@firecms/ui
Version:
Awesome Firebase/Firestore-based headless open-source CMS
1,243 lines (1,240 loc) • 972 kB
JavaScript
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("@radix-ui/react-checkbox"), require("@material-design-icons/font/filled.css"), require("@radix-ui/react-dialog"), require("@radix-ui/react-visually-hidden"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("@radix-ui/react-popover"), require("cmdk"), require("@radix-ui/react-separator"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("@radix-ui/react-slider"), require("@radix-ui/react-tooltip"), require("react-dom"), require("@radix-ui/react-tabs")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "@radix-ui/react-checkbox", "@material-design-icons/font/filled.css", "@radix-ui/react-dialog", "@radix-ui/react-visually-hidden", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "@radix-ui/react-popover", "cmdk", "@radix-ui/react-separator", "@radix-ui/react-radio-group", "@radix-ui/react-select", "@radix-ui/react-slider", "@radix-ui/react-tooltip", "react-dom", "@radix-ui/react-tabs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.CheckboxPrimitive, null, global.DialogPrimitive, global.VisuallyHidden, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.PopoverPrimitive, global.cmdk, global.SeparatorPrimitive, global.RadioGroupPrimitive, global.SelectPrimitive, global.SliderPrimitive, global.TooltipPrimitive, global.ReactDOM, global.TabsPrimitive));
})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, Collapsible, clsx, tailwindMerge, CheckboxPrimitive, filled_css, DialogPrimitive, VisuallyHidden, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, PopoverPrimitive, cmdk, SeparatorPrimitive, RadioGroupPrimitive, SelectPrimitive, SliderPrimitive, TooltipPrimitive, ReactDOM, TabsPrimitive) {
"use strict";"use client";
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
if (e) {
for (const k in e) {
if (k !== "default") {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
const Collapsible__namespace = /* @__PURE__ */ _interopNamespaceDefault(Collapsible);
const CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
const VisuallyHidden__namespace = /* @__PURE__ */ _interopNamespaceDefault(VisuallyHidden);
const LabelPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(LabelPrimitive);
const DropdownMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenu);
const MenubarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(MenubarPrimitive);
const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
const SeparatorPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SeparatorPrimitive);
const RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
const SliderPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SliderPrimitive);
const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60";
const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 m-1 -p-1";
const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
function cls(...classes) {
return tailwindMerge.twMerge(clsx.clsx(classes));
}
function cn(...classes) {
console.warn("cn() is deprecated, use cls() instead. cn will be removed in the final 3.0.0 version");
return cls(...classes);
}
function debounce(func, wait = 166) {
let timeout;
function debounced(...args) {
const later = () => {
func.apply(this, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
debounced.clear = () => {
clearTimeout(timeout);
};
return debounced;
}
function hashString(str) {
let hash = 0;
let i;
let chr;
for (i = 0; i < str.length; i++) {
chr = str.charCodeAt(i);
hash = (hash << 5) - hash + chr;
hash |= 0;
}
return Math.abs(hash);
}
const CHIP_COLORS = {
blueLighter: {
color: "#cfdfff",
text: "#102046"
},
cyanLighter: {
color: "#d0f0fd",
text: "#04283f"
},
tealLighter: {
color: "#c2f5e9",
text: "#012524"
},
greenLighter: {
color: "#d1f7c4",
text: "#0b1d05"
},
yellowLighter: {
color: "#ffeab6",
text: "#3b2501"
},
orangeLighter: {
color: "#fee2d5",
text: "#6b2613"
},
redLighter: {
color: "#ffdce5",
text: "#4c0c1c"
},
pinkLighter: {
color: "#ffdaf6",
text: "#400832"
},
purpleLighter: {
color: "#ede2fe",
text: "#280b42"
},
grayLighter: {
color: "#eee",
text: "#040404"
},
blueLight: {
color: "#9cc7ff",
text: "#102046"
},
cyanLight: {
color: "#77d1f3",
text: "#04283f"
},
tealLight: {
color: "#72ddc3",
text: "#012524"
},
greenLight: {
color: "#93e088",
text: "#0b1d05"
},
yellowLight: {
color: "#ffd66e",
text: "#3b2501"
},
orangeLight: {
color: "#ffa981",
text: "#6b2613"
},
redLight: {
color: "#ff9eb7",
text: "#4c0c1c"
},
pinkLight: {
color: "#f99de2",
text: "#400832"
},
purpleLight: {
color: "#cdb0ff",
text: "#280b42"
},
grayLight: {
color: "#ccc",
text: "#040404"
},
blueDark: {
color: "#2d7ff9",
text: "#fff"
},
cyanDark: {
color: "#18bfff",
text: "#fff"
},
tealDark: {
color: "#20d9d2",
text: "#fff"
},
greenDark: {
color: "#20c933",
text: "#fff"
},
yellowDark: {
color: "#fcb400",
text: "#fff"
},
orangeDark: {
color: "#ff6f2c",
text: "#fff"
},
redDark: {
color: "#f82b60",
text: "#fff"
},
pinkDark: {
color: "#ff08c2",
text: "#fff"
},
purpleDark: {
color: "#8b46ff",
text: "#fff"
},
grayDark: {
color: "#666",
text: "#fff"
},
blueDarker: {
color: "#2750ae",
text: "#cfdfff"
},
cyanDarker: {
color: "#0b76b7",
text: "#d0f0fd"
},
tealDarker: {
color: "#06a09b",
text: "#daf3e9"
},
greenDarker: {
color: "#338a17",
text: "#d1f7c4"
},
yellowDarker: {
color: "#b87503",
text: "#ffeab6"
},
orangeDarker: {
color: "#d74d26",
text: "#fee2d5"
},
redDarker: {
color: "#ba1e45",
text: "#ffdce5"
},
pinkDarker: {
color: "#b2158b",
text: "#ffdaf6"
},
purpleDarker: {
color: "#6b1cb0",
text: "#ede2fe"
},
grayDarker: {
color: "#444",
text: "#eee"
}
};
function getColorSchemeForKey(key) {
return CHIP_COLORS[key];
}
function getColorSchemeForSeed(seed) {
const hash = hashString(seed);
const colorKeys = Object.keys(CHIP_COLORS);
const index = hash % colorKeys.length;
return CHIP_COLORS[colorKeys[index]];
}
function keyToIconComponent(key) {
const startsWithNumber = key.match(/^\d/);
const componentName = (startsWithNumber ? "_" : "") + key.split("_").map((word) => {
return word.charAt(0).toUpperCase() + word.slice(1);
}).join("") + "Icon";
return componentName;
}
function useInjectStyles(key, styles2) {
const $ = reactCompilerRuntime.c(4);
let t0;
if ($[0] !== key || $[1] !== styles2) {
t0 = () => {
const styleElement = document.getElementById(key);
if (!styleElement) {
const style = document.createElement("style");
style.id = key;
style.innerHTML = styles2;
document.head.appendChild(style);
}
};
$[0] = key;
$[1] = styles2;
$[2] = t0;
} else {
t0 = $[2];
}
let t1;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t1 = [];
$[3] = t1;
} else {
t1 = $[3];
}
React.useEffect(t0, t1);
}
function useOutsideAlerter(ref, onOutsideClick, t0) {
const $ = reactCompilerRuntime.c(5);
const active = t0 === void 0 ? true : t0;
let t1;
let t2;
if ($[0] !== active || $[1] !== onOutsideClick || $[2] !== ref) {
t1 = () => {
if (!active) {
return;
}
const handleClickOutside = function handleClickOutside2(event) {
if (isInPresentationLayer(event.target)) {
return;
}
if (ref.current && !ref.current.contains(event.target)) {
onOutsideClick();
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
};
t2 = [ref, active, onOutsideClick];
$[0] = active;
$[1] = onOutsideClick;
$[2] = ref;
$[3] = t1;
$[4] = t2;
} else {
t1 = $[3];
t2 = $[4];
}
React.useEffect(t1, t2);
}
function isInPresentationLayer(node) {
if (node instanceof HTMLElement) {
if (node.getAttribute("role") === "presentation") return true;
return isInPresentationLayer(node.parentNode);
}
return false;
}
function useDebounceValue(value, t0) {
const $ = reactCompilerRuntime.c(4);
const delay = t0 === void 0 ? 300 : t0;
const [debouncedValue, setDebouncedValue] = React.useState(value);
let t1;
let t2;
if ($[0] !== delay || $[1] !== value) {
t1 = () => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
};
t2 = [value, delay];
$[0] = delay;
$[1] = value;
$[2] = t1;
$[3] = t2;
} else {
t1 = $[2];
t2 = $[3];
}
React.useEffect(t1, t2);
return debouncedValue;
}
function useIconStyles(t0) {
const {
fill: t1,
weight: t2,
grad: t3,
opticalSize: t4
} = t0;
const fill = t1 === void 0 ? true : t1;
const weight = t2 === void 0 ? 500 : t2;
const grad = t3 === void 0 ? 0 : t3;
const opticalSize = t4 === void 0 ? 24 : t4;
useInjectStyles("icons", `
.material-symbols-rounded {
font-variation-settings: 'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grad}, 'opsz' ${opticalSize};
}`);
}
function Collapse(t0) {
const $ = reactCompilerRuntime.c(9);
const {
children,
className,
in: t1,
duration: t2
} = t0;
const isOpen = t1 === void 0 ? false : t1;
const duration = t2 === void 0 ? 220 : t2;
useInjectStyles(`Collapse-${duration}`, `
.CollapseContent-${duration} {
overflow: hidden;
}
.CollapseContent-${duration}[data-state='open'] {
animation: slideDown ${duration}ms ease-out;
}
.CollapseContent-${duration}[data-state='closed'] {
animation: slideUp ${duration}ms ease-in;
}
@keyframes slideDown {
from {
height: 0;
}
to {
height: var(--radix-collapsible-content-height);
}
}
@keyframes slideUp {
from {
height: var(--radix-collapsible-content-height);
}
to {
height: 0;
}
}
`);
const t3 = `CollapseContent-${duration}`;
let t4;
if ($[0] !== t3) {
t4 = cls(t3);
$[0] = t3;
$[1] = t4;
} else {
t4 = $[1];
}
let t5;
if ($[2] !== children || $[3] !== t4) {
t5 = /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Content, { className: t4, children });
$[2] = children;
$[3] = t4;
$[4] = t5;
} else {
t5 = $[4];
}
let t6;
if ($[5] !== className || $[6] !== isOpen || $[7] !== t5) {
t6 = /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Root, { open: isOpen, className, children: t5 });
$[5] = className;
$[6] = isOpen;
$[7] = t5;
$[8] = t6;
} else {
t6 = $[8];
}
return t6;
}
const useAutoComplete = ({
ref
}) => {
const [autoCompleteOpen, setAutoCompleteOpen] = React.useState(false);
const [inputFocused, setInputFocused] = React.useState(false);
React.useEffect(() => {
if (ref.current) {
ref.current.onfocus = () => {
setAutoCompleteOpen(true);
setInputFocused(true);
};
ref.current.onblur = () => {
setInputFocused(false);
};
}
}, [ref]);
return {
inputFocused,
autoCompleteOpen,
setAutoCompleteOpen
};
};
function Autocomplete(t0) {
const $ = reactCompilerRuntime.c(14);
const {
children,
open,
setOpen,
className
} = t0;
const autocompleteRef = React.useRef(null);
let t1;
if ($[0] !== setOpen) {
t1 = () => setOpen(false);
$[0] = setOpen;
$[1] = t1;
} else {
t1 = $[1];
}
useOutsideAlerter(autocompleteRef, t1);
const t2 = open ? "shadow" : "";
let t3;
if ($[2] !== t2) {
t3 = cls("absolute top-full left-0 right-0 overflow-visible", t2, "my-2", "z-20", "w-full");
$[2] = t2;
$[3] = t3;
} else {
t3 = $[3];
}
const t4 = open ? paperMixin : "";
let t5;
if ($[4] !== className || $[5] !== t4) {
t5 = cls(t4, "bg-surface-50 dark:bg-surface-900", className);
$[4] = className;
$[5] = t4;
$[6] = t5;
} else {
t5 = $[6];
}
let t6;
if ($[7] !== children || $[8] !== t5) {
t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: autocompleteRef, className: t5, children });
$[7] = children;
$[8] = t5;
$[9] = t6;
} else {
t6 = $[9];
}
let t7;
if ($[10] !== open || $[11] !== t3 || $[12] !== t6) {
t7 = /* @__PURE__ */ jsxRuntime.jsx(Collapse, { in: open, duration: 30, className: t3, children: t6 });
$[10] = open;
$[11] = t3;
$[12] = t6;
$[13] = t7;
} else {
t7 = $[13];
}
return t7;
}
function AutocompleteItem(t0) {
const $ = reactCompilerRuntime.c(6);
const {
children,
onClick,
className
} = t0;
let t1;
if ($[0] !== className) {
t1 = cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className);
$[0] = className;
$[1] = t1;
} else {
t1 = $[1];
}
let t2;
if ($[2] !== children || $[3] !== onClick || $[4] !== t1) {
t2 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t1, onClick, children });
$[2] = children;
$[3] = onClick;
$[4] = t1;
$[5] = t2;
} else {
t2 = $[5];
}
return t2;
}
const getSizeClasses = (size) => {
switch (size) {
case "small":
return "px-4 py-1";
case "large":
return "px-4 py-4";
case "medium":
default:
return "px-4 py-2";
}
};
const getColorClasses = (severity) => {
switch (severity) {
case "error":
return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900";
case "warning":
return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
case "info":
return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
case "success":
return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
case "base":
default:
return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
}
};
const Alert = (t0) => {
const $ = reactCompilerRuntime.c(16);
const {
children,
onDismiss,
color: t1,
size: t2,
action,
className,
style
} = t0;
const color = t1 === void 0 ? "info" : t1;
const size = t2 === void 0 ? "medium" : t2;
let t3;
let t4;
if ($[0] !== className || $[1] !== color || $[2] !== size || $[3] !== style) {
const classes = getColorClasses(color);
t3 = style;
t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, className);
$[0] = className;
$[1] = color;
$[2] = size;
$[3] = style;
$[4] = t3;
$[5] = t4;
} else {
t3 = $[4];
t4 = $[5];
}
let t5;
if ($[6] !== children) {
t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children });
$[6] = children;
$[7] = t5;
} else {
t5 = $[7];
}
let t6;
if ($[8] !== onDismiss) {
t6 = onDismiss && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400", onClick: onDismiss, children: "×" });
$[8] = onDismiss;
$[9] = t6;
} else {
t6 = $[9];
}
let t7;
if ($[10] !== action || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
t7 = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: t3, className: t4, children: [
t5,
t6,
action
] });
$[10] = action;
$[11] = t3;
$[12] = t4;
$[13] = t5;
$[14] = t6;
$[15] = t7;
} else {
t7 = $[15];
}
return t7;
};
const AvatarInner = (t0, ref) => {
const $ = reactCompilerRuntime.c(25);
let alt;
let children;
let className;
let outerClassName;
let props;
let src;
let style;
let t1;
if ($[0] !== t0) {
({
src,
alt,
children,
className,
style,
outerClassName,
hover: t1,
...props
} = t0);
$[0] = t0;
$[1] = alt;
$[2] = children;
$[3] = className;
$[4] = outerClassName;
$[5] = props;
$[6] = src;
$[7] = style;
$[8] = t1;
} else {
alt = $[1];
children = $[2];
className = $[3];
outerClassName = $[4];
props = $[5];
src = $[6];
style = $[7];
t1 = $[8];
}
const hover = t1 === void 0 ? true : t1;
const [isImageError, setIsImageError] = React.useState(false);
let t2;
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
t2 = () => {
setIsImageError(true);
};
$[9] = t2;
} else {
t2 = $[9];
}
const handleImageError = t2;
const t3 = hover && "hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700";
let t4;
if ($[10] !== outerClassName || $[11] !== t3) {
t4 = cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", t3, outerClassName);
$[10] = outerClassName;
$[11] = t3;
$[12] = t4;
} else {
t4 = $[12];
}
let t5;
if ($[13] !== alt || $[14] !== children || $[15] !== className || $[16] !== isImageError || $[17] !== src) {
t5 = src && !isImageError ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className), src, alt, onError: handleImageError }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full", className), children });
$[13] = alt;
$[14] = children;
$[15] = className;
$[16] = isImageError;
$[17] = src;
$[18] = t5;
} else {
t5 = $[18];
}
let t6;
if ($[19] !== props || $[20] !== ref || $[21] !== style || $[22] !== t4 || $[23] !== t5) {
t6 = /* @__PURE__ */ jsxRuntime.jsx("button", { ref, style, ...props, className: t4, children: t5 });
$[19] = props;
$[20] = ref;
$[21] = style;
$[22] = t4;
$[23] = t5;
$[24] = t6;
} else {
t6 = $[24];
}
return t6;
};
const Avatar = React.forwardRef(AvatarInner);
const BooleanSwitch = React.forwardRef(function BooleanSwitch2({
value,
allowIndeterminate,
className,
onValueChange,
disabled = false,
size = "medium",
...props
}, ref) {
return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", ref, tabIndex: disabled ? -1 : void 0, onClick: disabled ? (e) => e.preventDefault() : (e_0) => {
e_0.preventDefault();
if (allowIndeterminate) {
if (value === null || value === void 0) onValueChange?.(true);
else if (value) onValueChange?.(false);
else onValueChange?.(null);
} else {
onValueChange?.(!value);
}
}, className: cls(size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
"w-[21px] h-[10px]": size === "medium" || size === "large",
"w-[19px] h-[8px]": size === "small",
"translate-x-[10px]": size === "medium" || size === "large",
"translate-x-[9px]": size === "small"
}) }, "knob"),
!(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
"w-[21px] h-[21px]": size === "medium" || size === "large",
"w-[19px] h-[19px]": size === "small",
[value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
[value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
}) }, "knob")
] });
});
const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
value,
position = "end",
size = "medium",
invisible,
onValueChange,
error,
label,
autoFocus,
disabled,
className,
fullWidth = true,
inputClassName,
...props
}) {
const ref = React.useRef(null);
const refInput = React.useRef(null);
const [_, setFocused] = React.useState(autoFocus);
const onFocus = () => setFocused(true);
const onBlur = () => setFocused(false);
React.useEffect(() => {
}, []);
const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current;
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onFocus, onBlur, tabIndex: -1, className: cls(!invisible && fieldBackgroundMixin, !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin), disabled ? "cursor-default" : "cursor-pointer", "rounded-md max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
"min-h-[28px]": size === "smallest",
"min-h-[32px]": size === "small",
"min-h-[42px]": size === "medium",
"min-h-[64px]": size === "large"
}, size === "small" ? "pl-2" : "pl-4", size === "small" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
if (props.allowIndeterminate) {
if (value === null || value === void 0) onValueChange?.(true);
else if (value) onValueChange?.(false);
else onValueChange?.(null);
} else {
onValueChange?.(!value);
}
}, children: [
/* @__PURE__ */ jsxRuntime.jsx(BooleanSwitch, { value, ref: refInput, size, className: cls(invisible && focus ? focusedClasses : "", inputClassName), disabled, ...props }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" ? "text-sm" : "text-base"), children: label })
] });
};
const ButtonInner = React.forwardRef((t0, ref) => {
const $ = reactCompilerRuntime.c(53);
let Component;
let children;
let className;
let props;
let t1;
let t2;
let t3;
let t4;
let t5;
let t6;
if ($[0] !== t0) {
({
children,
className,
variant: t1,
disabled: t2,
size: t3,
startIcon: t4,
fullWidth: t5,
component: Component,
color: t6,
...props
} = t0);
$[0] = t0;
$[1] = Component;
$[2] = children;
$[3] = className;
$[4] = props;
$[5] = t1;
$[6] = t2;
$[7] = t3;
$[8] = t4;
$[9] = t5;
$[10] = t6;
} else {
Component = $[1];
children = $[2];
className = $[3];
props = $[4];
t1 = $[5];
t2 = $[6];
t3 = $[7];
t4 = $[8];
t5 = $[9];
t6 = $[10];
}
const variant = t1 === void 0 ? "filled" : t1;
const disabled = t2 === void 0 ? false : t2;
const size = t3 === void 0 ? "medium" : t3;
const startIcon = t4 === void 0 ? null : t4;
const fullWidth = t5 === void 0 ? false : t5;
const color = t6 === void 0 ? "primary" : t6;
const t7 = !fullWidth;
const t8 = variant === "filled" && color === "primary" && !disabled;
const t9 = variant === "filled" && color === "secondary" && !disabled;
const t10 = variant === "filled" && color === "error" && !disabled;
const t11 = variant === "filled" && color === "text" && !disabled;
const t12 = variant === "filled" && color === "neutral" && !disabled;
const t13 = variant === "text" && color === "primary" && !disabled;
const t14 = variant === "text" && color === "secondary" && !disabled;
const t15 = variant === "text" && color === "error" && !disabled;
const t16 = variant === "text" && color === "text" && !disabled;
const t17 = variant === "text" && color === "neutral" && !disabled;
const t18 = variant === "outlined" && color === "primary" && !disabled;
const t19 = variant === "outlined" && color === "secondary" && !disabled;
const t20 = variant === "outlined" && color === "error" && !disabled;
const t21 = variant === "outlined" && color === "text" && !disabled;
const t22 = variant === "outlined" && color === "neutral" && !disabled;
const t23 = variant === "text" && disabled;
const t24 = variant === "outlined" && disabled;
const t25 = variant === "filled" && disabled;
let t26;
let t27;
let t28;
let t29;
let t30;
if ($[11] !== Component || $[12] !== children || $[13] !== className || $[14] !== disabled || $[15] !== fullWidth || $[16] !== props || $[17] !== ref || $[18] !== size || $[19] !== startIcon || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t13 || $[24] !== t14 || $[25] !== t15 || $[26] !== t16 || $[27] !== t17 || $[28] !== t18 || $[29] !== t19 || $[30] !== t20 || $[31] !== t21 || $[32] !== t22 || $[33] !== t23 || $[34] !== t24 || $[35] !== t25 || $[36] !== t7 || $[37] !== t8 || $[38] !== t9) {
t30 = Symbol.for("react.early_return_sentinel");
bb0: {
const buttonClasses2 = cls({
"w-full": fullWidth,
"w-fit": t7,
"border border-primary bg-primary focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": t8,
"border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": t9,
"border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": t10,
"border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
"border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark": t12,
"border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t13,
"border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t14,
"border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": t15,
"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t16,
"border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
"border border-primary text-primary hover:text-primary hover:bg-primary-bg": t18,
"border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t19,
"border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t20,
"border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t21,
"border border-surface-400 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t22,
"text-text-disabled dark:text-text-disabled-dark": disabled,
"border border-transparent opacity-50": t23,
"border border-surface-500 opacity-50": t24,
"border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": t25
});
const sizeClasses2 = cls({
"py-1 px-2": size === "small",
"py-2 px-4": size === "medium",
"py-2.5 px-5": size === "large",
"py-3 px-6": size === "xl",
"py-4 px-10": size === "2xl"
});
if (Component) {
t30 = /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, className), ...props, children: [
startIcon,
children
] });
break bb0;
}
t26 = ref;
t27 = props.type ?? "button";
t28 = props.onClick;
t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, className);
}
$[11] = Component;
$[12] = children;
$[13] = className;
$[14] = disabled;
$[15] = fullWidth;
$[16] = props;
$[17] = ref;
$[18] = size;
$[19] = startIcon;
$[20] = t10;
$[21] = t11;
$[22] = t12;
$[23] = t13;
$[24] = t14;
$[25] = t15;
$[26] = t16;
$[27] = t17;
$[28] = t18;
$[29] = t19;
$[30] = t20;
$[31] = t21;
$[32] = t22;
$[33] = t23;
$[34] = t24;
$[35] = t25;
$[36] = t7;
$[37] = t8;
$[38] = t9;
$[39] = t26;
$[40] = t27;
$[41] = t28;
$[42] = t29;
$[43] = t30;
} else {
t26 = $[39];
t27 = $[40];
t28 = $[41];
t29 = $[42];
t30 = $[43];
}
if (t30 !== Symbol.for("react.early_return_sentinel")) {
return t30;
}
const t31 = props;
let t32;
if ($[44] !== children || $[45] !== disabled || $[46] !== startIcon || $[47] !== t26 || $[48] !== t27 || $[49] !== t28 || $[50] !== t29 || $[51] !== t31) {
t32 = /* @__PURE__ */ jsxRuntime.jsxs("button", { ref: t26, type: t27, onClick: t28, className: t29, disabled, ...t31, children: [
startIcon,
children
] });
$[44] = children;
$[45] = disabled;
$[46] = startIcon;
$[47] = t26;
$[48] = t27;
$[49] = t28;
$[50] = t29;
$[51] = t31;
$[52] = t32;
} else {
t32 = $[52];
}
return t32;
});
ButtonInner.displayName = "Button";
const Button = ButtonInner;
const Card = React.forwardRef((t0, ref) => {
const $ = reactCompilerRuntime.c(21);
let children;
let className;
let onClick;
let props;
let style;
if ($[0] !== t0) {
({
children,
className,
onClick,
style,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = onClick;
$[4] = props;
$[5] = style;
} else {
children = $[1];
className = $[2];
onClick = $[3];
props = $[4];
style = $[5];
}
let t1;
if ($[6] !== onClick) {
t1 = (e) => {
if (e.key === "Enter" || e.key === " ") {
onClick?.();
}
};
$[6] = onClick;
$[7] = t1;
} else {
t1 = $[7];
}
const onKeyPress = t1;
const t2 = onClick ? "button" : void 0;
const t3 = onClick ? 0 : void 0;
const t4 = onClick && cardClickableMixin;
let t5;
if ($[8] !== className || $[9] !== t4) {
t5 = cls(cardMixin, t4, className);
$[8] = className;
$[9] = t4;
$[10] = t5;
} else {
t5 = $[10];
}
let t6;
if ($[11] !== children || $[12] !== onClick || $[13] !== onKeyPress || $[14] !== props || $[15] !== ref || $[16] !== style || $[17] !== t2 || $[18] !== t3 || $[19] !== t5) {
t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onKeyPress, role: t2, tabIndex: t3, onClick, className: t5, style, ...props, children });
$[11] = children;
$[12] = onClick;
$[13] = onKeyPress;
$[14] = props;
$[15] = ref;
$[16] = style;
$[17] = t2;
$[18] = t3;
$[19] = t5;
$[20] = t6;
} else {
t6 = $[20];
}
return t6;
});
const containerMaxWidths = {
xs: "max-w-xs",
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
"2xl": "max-w-2xl",
"3xl": "max-w-3xl",
"4xl": "max-w-4xl",
"5xl": "max-w-5xl",
"6xl": "max-w-6xl",
"7xl": "max-w-7xl"
};
const ContainerInner = (t0, ref) => {
const $ = reactCompilerRuntime.c(8);
const {
children,
className,
style,
maxWidth: t1
} = t0;
const maxWidth = t1 === void 0 ? "7xl" : t1;
const classForMaxWidth = maxWidth ? containerMaxWidths[maxWidth] : "";
let t2;
if ($[0] !== classForMaxWidth || $[1] !== className) {
t2 = cls("mx-auto px-3 md:px-4 lg-px-6", classForMaxWidth, className);
$[0] = classForMaxWidth;
$[1] = className;
$[2] = t2;
} else {
t2 = $[2];
}
let t3;
if ($[3] !== children || $[4] !== ref || $[5] !== style || $[6] !== t2) {
t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: t2, style, children });
$[3] = children;
$[4] = ref;
$[5] = style;
$[6] = t2;
$[7] = t3;
} else {
t3 = $[7];
}
return t3;
};
const Container = React.forwardRef(ContainerInner);
const CenteredView = React.forwardRef((t0, ref) => {
const $ = reactCompilerRuntime.c(21);
let children;
let className;
let fullScreen;
let maxWidth;
let outerClassName;
let rest;
if ($[0] !== t0) {
({
children,
maxWidth,
outerClassName,
className,
fullScreen,
...rest
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = fullScreen;
$[4] = maxWidth;
$[5] = outerClassName;
$[6] = rest;
} else {
children = $[1];
className = $[2];
fullScreen = $[3];
maxWidth = $[4];
outerClassName = $[5];
rest = $[6];
}
const t1 = fullScreen ? "h-screen" : "h-full";
let t2;
if ($[7] !== outerClassName || $[8] !== t1) {
t2 = cls("flex flex-col flex-grow", t1, outerClassName);
$[7] = outerClassName;
$[8] = t1;
$[9] = t2;
} else {
t2 = $[9];
}
let t3;
if ($[10] !== className) {
t3 = cls("m-auto", className);
$[10] = className;
$[11] = t3;
} else {
t3 = $[11];
}
let t4;
if ($[12] !== children || $[13] !== maxWidth || $[14] !== t3) {
t4 = /* @__PURE__ */ jsxRuntime.jsx(Container, { className: t3, maxWidth, children });
$[12] = children;
$[13] = maxWidth;
$[14] = t3;
$[15] = t4;
} else {
t4 = $[15];
}
let t5;
if ($[16] !== ref || $[17] !== rest || $[18] !== t2 || $[19] !== t4) {
t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: t2, ...rest, children: t4 });
$[16] = ref;
$[17] = rest;
$[18] = t2;
$[19] = t4;
$[20] = t5;
} else {
t5 = $[20];
}
return t5;
});
CenteredView.displayName = "CenteredView";
function CircularProgress(t0) {
const $ = reactCompilerRuntime.c(7);
const {
size: t1,
className
} = t0;
const size = t1 === void 0 ? "medium" : t1;
let sizeClasses2;
if (size === "smallest") {
sizeClasses2 = "w-4 h-4";
} else {
if (size === "small") {
sizeClasses2 = "w-6 h-6";
} else {
if (size === "medium") {
sizeClasses2 = "w-8 h-8 m-1";
} else {
sizeClasses2 = "w-10 h-10 m-1";
}
}
}
let borderClasses;
if (size === "smallest") {
borderClasses = "border-[3px]";
} else {
if (size === "small") {
borderClasses = "border-[4px]";
} else {
if (size === "medium") {
borderClasses = "border-4";
} else {
borderClasses = "border-[6px]";
}
}
}
let t2;
if ($[0] !== borderClasses || $[1] !== className || $[2] !== sizeClasses2) {
t2 = cls(sizeClasses2, borderClasses, "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]", "text-primary dark:text-primary", className);
$[0] = borderClasses;
$[1] = className;
$[2] = sizeClasses2;
$[3] = t2;
} else {
t2 = $[3];
}
let t3;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t3 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." });
$[4] = t3;
} else {
t3 = $[4];
}
let t4;
if ($[5] !== t2) {
t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t2, role: "status", children: t3 });
$[5] = t2;
$[6] = t4;
} else {
t4 = $[6];
}
return t4;
}
const iconKeys = ["10k", "10mp", "11mp", "123", "12mp", "13mp", "14mp", "15mp", "16mp", "17mp", "18_up_rating", "18mp", "19mp", "1k", "1k_plus", "1x_mobiledata", "20mp", "21mp", "22mp", "23mp", "24mp", "2k", "2k_plus", "2mp", "30fps", "30fps_select", "360", "3d_rotation", "3g_mobiledata", "3k", "3k_plus", "3mp", "3p", "4g_mobiledata", "4g_plus_mobiledata", "4k", "4k_plus", "4mp", "5g", "5k", "5k_plus", "5mp", "60fps", "60fps_select", "6_ft_apart", "6k", "6k_plus", "6mp", "7k", "7k_plus", "7mp", "8k", "8k_plus", "8mp", "9k", "9k_plus", "9mp", "abc", "ac_unit", "access_alarm", "access_alarms", "access_time", "access_time_filled", "accessibility", "accessibility_new", "accessible", "accessible_forward", "account_balance", "account_balance_wallet", "account_box", "account_circle", "account_tree", "ad_units", "adb", "add", "add_a_photo", "add_alarm", "add_alert", "add_box", "add_business", "add_card", "add_chart", "add_circle", "add_circle_outline", "add_comment", "add_home", "add_home_work", "add_ic_call", "add_link", "add_location", "add_location_alt", "add_moderator", "add_photo_alternate", "add_reaction", "add_road", "add_shopping_cart", "add_task", "add_to_drive", "add_to_home_screen", "add_to_photos", "add_to_queue", "addchart", "adf_scanner", "adjust", "admin_panel_settings", "adobe", "ads_click", "agriculture", "air", "airline_seat_flat", "airline_seat_flat_angled", "airline_seat_individual_suite", "airline_seat_legroom_extra", "airline_seat_legroom_normal", "airline_seat_legroom_reduced", "airline_seat_recline_extra", "airline_seat_recline_normal", "airline_stops", "airlines", "airplane_ticket", "airplanemode_active", "airplanemode_inactive", "airplanemode_off", "airplanemode_on", "airplay", "airport_shuttle", "alarm", "alarm_add", "alarm_off", "alarm_on", "album", "align_horizontal_center", "align_horizontal_left", "align_horizontal_right", "align_vertical_bottom", "align_vertical_center", "align_vertical_top", "all_inbox", "all_inclusive", "all_out", "alt_route", "alternate_email", "amp_stories", "analytics", "anchor", "android", "animation", "announcement", "aod", "apartment", "api", "app_blocking", "app_registration", "app_settings_alt", "app_shortcut", "apple", "approval", "apps", "apps_outage", "architecture", "archive", "area_chart", "arrow_back", "arrow_back_ios", "arrow_back_ios_new", "arrow_circle_down", "arrow_circle_left", "arrow_circle_right", "arrow_circle_up", "arrow_downward", "arrow_drop_down", "arrow_drop_down_circle", "arrow_drop_up", "arrow_forward", "arrow_forward_ios", "arrow_left", "arrow_outward", "arrow_right", "arrow_right_alt", "arrow_upward", "art_track", "article", "aspect_ratio", "assessment", "assignment", "assignment_ind", "assignment_late", "assignment_return", "assignment_returned", "assignment_turned_in", "assist_walker", "assistant", "assistant_direction", "assistant_photo", "assured_workload", "atm", "attach_email", "attach_file", "attach_money", "attachment", "attractions", "attribution", "audio_file", "audiotrack", "auto_awesome", "auto_awesome_mosaic", "auto_awesome_motion", "auto_delete", "auto_fix_high", "auto_fix_normal", "auto_fix_off", "auto_graph", "auto_mode", "auto_stories", "autofps_select", "autorenew", "av_timer", "baby_changing_station", "back_hand", "backpack", "backspace", "backup", "backup_table", "badge", "bakery_dining", "balance", "balcony", "ballot", "bar_chart", "batch_prediction", "bathroom", "bathtub", "battery_0_bar", "battery_1_bar", "battery_2_bar", "battery_3_bar", "battery_4_bar", "battery_5_bar", "battery_6_bar", "battery_alert", "battery_charging_full", "battery_full", "battery_saver", "battery_std", "battery_unknown", "beach_access", "bed", "bedroom_baby", "bedroom_child", "bedroom_parent", "bedtime", "bedtime_off", "beenhere", "bento", "bike_scooter", "biotech", "blender", "blind", "blinds", "blinds_closed", "block", "bloodtype", "bluetooth", "bluetooth_audio", "bluetooth_connected", "bluetooth_disabled", "bluetooth_drive", "bluetooth_searching", "blur_circular", "blur_linear", "blur_off", "blur_on", "bolt", "book", "book_online", "bookmark", "bookmark_add", "bookmark_added", "bookmark_border", "bookmark_outline", "bookmark_remove", "bookmarks", "border_all", "border_bottom", "border_clear", "border_color", "border_horizontal", "border_inner", "border_left", "border_outer", "border_right", "border_style", "border_top", "border_vertical", "boy", "branding_watermark", "breakfast_dining", "brightness_1", "brightness_2", "brightness_3", "brightness_4", "brightness_5", "brightness_6", "brightness_7", "brightness_auto", "brightness_high", "brightness_low", "brightness_medium", "broadcast_on_home", "broadcast_on_personal", "broken_image", "browse_gallery", "browser_not_supported", "browser_updated", "brunch_dining", "brush", "bubble_chart", "bug_report", "build", "build_circle", "bungalow", "burst_mode", "bus_alert", "business", "business_center", "cabin", "cable", "cached", "cake", "calculate", "calendar_month", "calendar_today", "calendar_view_day", "calendar_view_month", "calendar_view_week", "call", "call_end", "call_made", "call_merge", "call_missed", "call_missed_outgoing", "call_received", "call_split", "call_to_action", "camera", "camera_alt", "camera_enhance", "camera_front", "camera_indoor", "camera_outdoor", "camera_rear", "camera_roll", "cameraswitch", "campaign", "cancel", "cancel_presentation", "cancel_schedule_send", "candlestick_chart", "car_crash", "car_rental", "car_repair", "card_giftcard", "card_membership", "card_travel", "carpenter", "cases", "casino", "cast", "cast_connected", "cast_for_education", "castle", "catching_pokemon", "category", "celebration", "cell_tower", "cell_wifi", "center_focus_strong", "center_focus_weak", "chair", "chair_alt", "chalet", "change_circle", "change_history", "charging_station", "chat", "chat_bubble", "chat_bubble_outline", "check", "check_box", "check_box_outline_blank", "check_circle", "check_circle_outline", "checklist", "checklist_rtl", "checkroom", "chevron_left", "chevron_right", "child_care", "child_friendly", "chrome_reader_mode", "church", "circle", "circle_notifications", "class", "clean_hands", "cleaning_services", "clear", "clear_all", "close", "close_fullscreen", "closed_caption", "closed_caption_disabled", "closed_caption_off", "cloud", "cloud_circle", "cloud_done", "cloud_download", "cloud_off", "cloud_queue", "cloud_sync", "cloud_upload", "co2", "co_present", "code", "code_off", "coffee", "coffee_maker", "collections", "collections_bookmark", "color_lens", "colorize", "comment", "comment_bank", "comments_disabled", "commit", "commute", "compare", "compare_arrows", "compass_calibration", "compost", "compress", "computer", "confirmation_num", "confirmation_number", "connect_without_contact", "connected_tv", "connecting_airports", "construction", "contact_emergency", "contact_mail", "contact_page", "contact_phone", "contact_support", "contactless", "contacts", "content_copy", "content_cut", "content_paste", "content_paste_go", "content_paste_off", "content_paste_search", "contrast", "control_camera", "control_point", "control_point_duplicate"