@apple-pie/slice 0.1.30 → 0.1.32

package/dist/cjs/chunks/CheckBox-CmZJd8u2.js

@@ -0,0 +1,51 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-4xyXRU2K.js"), Icon = require("./Icon-BVYVJp9J.js"), css_wrapper = "CheckBox-module_wrapper__uRsjI flexBox-module_row__z24tF", css_icon = "CheckBox-module_icon__FoDJN flexBox-module_row__z24tF", css_label = "CheckBox-module_label__0AiBp type-module_body-m-regular__LuQBA";
+
+const CheckBox = React.memo(props => {
+    const {size: size = 20, checked: checked = !1, disabled: disabled = !1, color: color, children: children, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "checked", "disabled", "color", "children", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [state, setState] = React.useState(checked);
+    React.useEffect(() => setState(checked), [ checked ]);
+    const iconName = React.useMemo(() => !0 === state ? "checkbox checked" : "mixed" === state ? "checkbox partial" : "checkbox", [ state ]), iconColor = React.useMemo(() => color || (disabled ? "var(--core-icon-disabled)" : "mixed" === state ? "var(--core-icon-primary)" : state ? "var(--core-text-special)" : "var(--core-icon-secondary"), [ color, disabled, state ]), labelColor = React.useMemo(() => color || (disabled ? "var(--core-text-disabled)" : "var(--core-text-primary)"), [ color, disabled ]), cssVars = React.useMemo(() => ({
+        "--cb-size": `${size}px`,
+        "--cb-label-color": labelColor
+    }), [ size, labelColor ]), handleToggle = React.useCallback(() => {
+        if (disabled) return;
+        let newState = !1;
+        switch (state) {
+          case !0:
+            break;
+
+          case "mixed":
+          case !1:
+            newState = !0;
+        }
+        setState(newState), onChange(newState);
+    }, [ state, disabled, onChange ]);
+    return jsxRuntime.jsxs(react.motion.div, Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        onClick: handleToggle,
+        onKeyDown: e => misc.accessibleKeyDown(e, handleToggle),
+        tabIndex: disabled ? -1 : 0,
+        role: "checkbox",
+        "aria-checked": state,
+        "aria-disabled": disabled,
+        "aria-label": String(children)
+    }, rest, {
+        children: [ jsxRuntime.jsx("div", {
+            className: css_icon,
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: iconName,
+                strokeColor: iconColor,
+                size: size
+            })
+        }), children && jsxRuntime.jsx("span", {
+            className: css_label,
+            children: children
+        }) ]
+    }));
+});
+
+exports.CheckBox = CheckBox;

package/dist/cjs/chunks/Chip-Bd1bSYeC.js

@@ -0,0 +1,77 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-4xyXRU2K.js"), Icon = require("./Icon-BVYVJp9J.js"), sharedTypes = require("./sharedTypes-C0ZHzH_T.js"), css = {
+    chip: "Chip-module_chip__0nys- flexBox-module_row__z24tF",
+    icon: "Chip-module_icon__dtR-K flexBox-module_row__z24tF",
+    xs: "Chip-module_xs__s-KNG type-module_body-xs-regular__ZAFft",
+    s: "Chip-module_s__2KTXi type-module_body-s-regular__vRHSP",
+    m: "Chip-module_m__l2u3N type-module_body-m-regular__LuQBA",
+    l: "Chip-module_l__3MqPN type-module_body-l-regular__lOYbg"
+};
+
+const Chip = React.memo(props => {
+    const {children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 20, disabled: disabled = !1, focused: focused = !1, iconPosition: iconPosition = "left", labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", labelColorHover: labelColorHover = "var(--core-text-special)", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-text-primary)", borderColorHover: borderColorHover = "var(--core-text-special)", borderColorDisabled: borderColorDisabled = "var(--core-text-disabled)", bgColor: bgColor = "transparent", bgColorHover: bgColorHover = "var(--core-surface-secondary)", borderRadius: borderRadius = 8, paddingTop: paddingTop, paddingTops: paddingTops = 8, paddingSides: paddingSides = 16, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "children", "label", "icon", "tooltip", "iconSize", "disabled", "focused", "iconPosition", "labelSize", "labelColor", "labelColorHover", "iconColor", "iconColorHover", "backgroundColor", "backgroundColorHover", "borderWidth", "borderSize", "borderColor", "borderColorHover", "borderColorDisabled", "bgColor", "bgColorHover", "borderRadius", "paddingTop", "paddingTops", "paddingSides", "gap", "onToolTip", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = React.useState(!1), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = React.useCallback(e => {
+        disabled || onClick(e);
+    }, [ disabled, onClick ]), handleMouseEnter = React.useCallback((enter, event) => {
+        if (enter) {
+            if (tooltip) {
+                const tip = {
+                    type: sharedTypes.ToolTipType.button,
+                    payload: {
+                        label: tooltip
+                    },
+                    ref: null,
+                    event: event
+                };
+                onToolTip(tip);
+            }
+            setIsHovered(!0);
+        } else onToolTip(null), setIsHovered(!1);
+    }, [ tooltip, onToolTip ]), padding = React.useMemo(() => {
+        if (!icon) return `${resolvedPaddingTop}px ${paddingSides}px`;
+        return `${resolvedPaddingTop}px ${"right" === iconPosition ? paddingSides - 4 : paddingSides}px ${resolvedPaddingTop}px ${"right" === iconPosition ? paddingSides : paddingSides - 4}px`;
+    }, [ icon, iconPosition, resolvedPaddingTop, paddingSides ]), computedIconColor = React.useMemo(() => disabled ? "var(--core-text-disabled)" : isHovered ? null != iconColorHover ? iconColorHover : "var(--core-text-special)" : null != iconColor ? iconColor : "var(--core-text-primary)", [ iconColor, disabled, isHovered, iconColorHover ]), cssVars = React.useMemo(() => ({
+        "--ui-chip-padding": padding,
+        "--ui-chip-gap": misc.setStyle(gap),
+        "--ui-chip-border-radius": misc.setStyle(borderRadius),
+        "--ui-chip-border-size": misc.setStyle(resolvedBorderWidth),
+        "--ui-chip-border-color": disabled ? borderColorDisabled : borderColor,
+        "--ui-chip-border-color-hover": disabled ? borderColorDisabled : borderColorHover,
+        "--ui-chip-bg-color": resolvedBackgroundColor,
+        "--ui-chip-bg-color-hover": disabled ? resolvedBackgroundColor : resolvedBackgroundColorHover,
+        "--ui-chip-label-color": disabled ? "var(--core-text-disabled)" : labelColor,
+        "--ui-chip-label-color-hover": disabled ? "var(--core-text-disabled)" : labelColorHover,
+        "--ui-chip-cursor": disabled ? "default" : "pointer"
+    }), [ padding, resolvedBackgroundColor, borderColor, borderColorDisabled, borderColorHover, resolvedBorderWidth, resolvedBackgroundColorHover, labelColorHover, labelColor, gap, borderRadius, disabled ]);
+    return jsxRuntime.jsxs("div", Object.assign({
+        id: divId,
+        className: `${css.chip}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        onKeyDown: e => misc.accessibleKeyDown(e, () => handleClick(e)),
+        onClick: handleClick,
+        onMouseEnter: e => handleMouseEnter(!0, e),
+        onMouseLeave: e => handleMouseEnter(!1, e)
+    }, rest, {
+        children: [ icon && "right" !== iconPosition && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: icon,
+                size: iconSize,
+                strokeColor: computedIconColor
+            })
+        }), jsxRuntime.jsx("div", {
+            className: css[labelSize],
+            children: null != children ? children : label
+        }), icon && "right" === iconPosition && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: icon,
+                size: iconSize,
+                strokeColor: computedIconColor
+            })
+        }) ]
+    }));
+});
+
+exports.Chip = Chip;

package/dist/cjs/chunks/{DivInput-2cMdJQ9U.js → DivInput-BY9pQ6ty.js}

@@ -1,9 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-QpU0XEOW.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "DivInput-module_wrapper__ZQxY-", css_input = "DivInput-module_input__J34-l type-module_body-m-regular__LuQBA";
-
-styleInject_es.styleInject(".type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.DivInput-module_wrapper__ZQxY- {\n\tpadding: var(--div-input-padding);\n\twidth: var(--div-input-width);\n\tborder-radius: var(--div-input-border-radius);\n\tbackground: var(--div-input-wrapper-bg);\n\t&:hover {\n\t\tbackground: var(--div-input-bg);\n\t}\n}\n\n.DivInput-module_input__J34-l {\n\tcolor: var(--div-input-color);\n\tuser-select: var(--div-input-user-select);\n\t-webkit-user-select: var(--div-input-user-select);\n\ttext-align: var(--div-input-text-align);\n\tpointer-events: all;\n\tbackground: transparent;\n\tborder-radius: 4px;\n\tborder: 0;\n\toutline: none;\n\ttext-overflow: ellipsis;\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\twhite-space: var(--div-input-white-space);\n\t-webkit-line-clamp: var(--div-input-line-clamp);\n\t-webkit-box-orient: vertical;\n\tcursor: var(--div-input-cursor);\n\ttransition: background var(--motion-water-duration) var(--motion-water) 0s;\n}\n");
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-4xyXRU2K.js"), css_wrapper = "DivInput-module_wrapper__ZQxY-", css_input = "DivInput-module_input__J34-l type-module_body-m-regular__LuQBA";
 
 const DivInput = React.memo(props => {
     const {value: value = "", name: name = "Input Field", placeholder: placeholder = "Placeholder", isEditable: isEditable = !0, wrap: wrap = !1, focus: focus = !1, width: width = "auto", textAlign: textAlign = "left", clamp: clamp = 3, padding: padding = "0px", onChange: onChange = () => null, onSubmit: onSubmit = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onDblClick: onDblClick = () => null, onClick: onClick = () => null, borderRadius: borderRadius, radius: radius = 4, backgroundColor: backgroundColor, bgColor: bgColor = "var(--core-surface-secondary)"} = props, divAttributes = tslib_es6.__rest(props, [ "value", "name", "placeholder", "isEditable", "wrap", "focus", "width", "textAlign", "clamp", "padding", "onChange", "onSubmit", "onFocus", "onBlur", "onDblClick", "onClick", "borderRadius", "radius", "backgroundColor", "bgColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), innerText = React.useRef("" === value ? misc.cleanString(placeholder) : misc.cleanString(value)), [isFocused, setIsFocused] = React.useState(focus), [text, setText] = React.useState(innerText.current), [isPlaceholder, setIsPlaceholder] = React.useState(!1), resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, setCursor = React.useCallback((to, length = 1) => {

package/dist/cjs/chunks/{Dot-fKIwhjYA.js → Dot-BeWDLajy.js}

@@ -1,9 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
-
-styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.Dot-module_dot__RNz87 {\n\tdisplay: var(--dot-display);\n\tbox-sizing: content-box;\n\tposition: var(--dot-position);\n\ttop: var(--dot-top);\n\tright: var(--dot-right);\n\tvertical-align: var(--dot-vertical-align);\n\tmin-height: var(--dot-size);\n\tmin-width: var(--dot-size);\n\theight: var(--dot-size);\n\twidth: var(--dot-size);\n\tborder: var(--dot-border) solid var(--core-surface-primary);\n\tbackground: var(--dot-bg);\n\tborder-radius: 100%;\n\tz-index: var(--elevation-status);\n}\n");
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
 
 const DEFAULT_VARIANTS = {
     initial: {

package/dist/cjs/chunks/{DrggablePanel-P7TgBI3j.js → DrggablePanel-DzY5wTco.js}

@@ -1,17 +1,15 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var misc = require("./misc-QpU0XEOW.js");
+var misc = require("./misc-4xyXRU2K.js");
 
 require("../hooks/useWindow.js");
 
-var hooks_useObserveResize = require("../hooks/useObserveResize.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_panel = "DraggablePanel-module_panel__vuq2R flexBox-module_columnStart__C7P44", css_content = "DraggablePanel-module_content__SBL0T flexBox-module_columnStart__C7P44", css_handle = "DraggablePanel-module_handle__LPZw8";
-
-styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.DraggablePanel-module_panel__vuq2R {\n\tposition: relative;\n\tbackground-color: var(--panel-bg);\n}\n\n.DraggablePanel-module_content__SBL0T {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.DraggablePanel-module_handle__LPZw8 {\n\twidth: var(--drag-handle-width);\n\theight: var(--drag-handle-height);\n\tmin-width: var(--drag-handle-width);\n\tmin-height: var(--drag-handle-height);\n\tborder-radius: var(--drag-handle-radius);\n\tborder: var(--drag-handle-border) solid var(--drag-handle-border-color);\n\tbackground: var(--drag-handle-bg);\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translateX(-50%) translateY(-50%);\n\tz-index: 15000;\n}\n");
+var hooks_useObserveResize = require("../hooks/useObserveResize.js"), css_panel = "DraggablePanel-module_panel__vuq2R flexBox-module_columnStart__C7P44", css_content = "DraggablePanel-module_content__SBL0T flexBox-module_columnStart__C7P44", css_handle = "DraggablePanel-module_handle__LPZw8";
 
 function normalizeConstraintValue(value, containerWidth, fallback) {
     let normalized = value;

package/dist/cjs/chunks/DropDown-Cn_nX8u7.js

@@ -0,0 +1,104 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-4xyXRU2K.js"), Icon = require("./Icon-BVYVJp9J.js"), css = {
+    wrapper: "DropDown-module_wrapper__CyX0u flexBox-module_rowStart__4tcxS",
+    face: "DropDown-module_face__6gyF3 flexBox-module_rowStart__4tcxS",
+    faceText: "DropDown-module_faceText__glhB3",
+    label: "DropDown-module_label__Mrwbp flexBox-module_rowStart__4tcxS",
+    xs: "DropDown-module_xs__7L71q type-module_body-xs-regular__ZAFft",
+    s: "DropDown-module_s__vAxXD type-module_body-s-regular__vRHSP",
+    m: "DropDown-module_m__K6JPk type-module_body-m-regular__LuQBA",
+    l: "DropDown-module_l__Kib48 type-module_body-l-regular__lOYbg",
+    chevron: "DropDown-module_chevron__LkYsE flexBox-module_rowStart__4tcxS",
+    select: "DropDown-module_select__mzNnv"
+};
+
+function resolveValueKey(value, valueKey) {
+    if (valueKey && value && "object" == typeof value) return value[valueKey];
+}
+
+function DropDownComponent(props) {
+    const {name: name = "drop-down-select", label: label, labelColor: labelColor = "var(--core-text-primary)", size: size = "m", width: width = "100%", height: height = "auto", inline: inline = !1, selectedIndex: selectedIndex, selectedValue: selectedValue, valueKey: valueKey, options: options = [], placeholder: placeholder = !0, borderRadius: borderRadius = 8, backgroundColor: backgroundColor = "var(--core-surface-secondary)", bgColor: bgColor = "var(--core-surface-secondary)", iconColor: iconColor = "var(--core-text-primary)", textColor: textColor = "var(--core-text-primary)", borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", paddingLeft: paddingLeft = "10px", paddingRight: paddingRight = "8px", paddingTop: paddingTop = "8px", paddingBottom: paddingBottom = "8px", borderStyle: borderStyle = "box", iconSize: iconSize = 20, disabled: disabled = !1, error: error = !1, gap: gap = 8, onChange: onChange = () => null, onOption: onOption = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "name", "label", "labelColor", "size", "width", "height", "inline", "selectedIndex", "selectedValue", "valueKey", "options", "placeholder", "borderRadius", "backgroundColor", "bgColor", "iconColor", "textColor", "borderWidth", "borderSize", "borderColor", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderStyle", "iconSize", "disabled", "error", "gap", "onChange", "onOption" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, [index, setIndex] = React.useState(null != selectedIndex ? selectedIndex : 0), [selectedText, setSelectedText] = React.useState("Select an option"), ref = React.useRef(null);
+    React.useEffect(() => {
+        if (null == selectedValue && void 0 !== selectedIndex && (null == ref ? void 0 : ref.current)) {
+            if (!(null == options ? void 0 : options[selectedIndex])) return;
+            const label = options[selectedIndex].label || "Select an option";
+            setIndex(selectedIndex), setSelectedText(label), ref.current.selectedIndex = selectedIndex;
+        }
+    }, [ selectedIndex, options, selectedValue ]), React.useEffect(() => {
+        if (!options || 0 === options.length || null == selectedValue) return;
+        const selectedKey = resolveValueKey(selectedValue, valueKey), foundIndex = options.findIndex(option => {
+            var _a, _b;
+            return (null == option ? void 0 : option.value) === selectedValue || void 0 !== selectedKey && resolveValueKey(null == option ? void 0 : option.value, valueKey) === selectedKey || (null === (_a = null == option ? void 0 : option.label) || void 0 === _a ? void 0 : _a.toLowerCase()) === String(selectedValue).toLowerCase() || (null === (_b = null == option ? void 0 : option.alt) || void 0 === _b ? void 0 : _b.toLowerCase()) === String(selectedValue).toLowerCase();
+        });
+        if (-1 !== foundIndex) {
+            const label = options[foundIndex].label || "Select an option";
+            setSelectedText(label), setIndex(foundIndex), ref.current && (ref.current.selectedIndex = foundIndex);
+        }
+    }, [ selectedValue, options, valueKey ]);
+    const handleChange = React.useCallback(i => {
+        if (!options) return;
+        const label = options[i].label || "Select an option";
+        setIndex(i), setSelectedText(label), index !== i && (onChange(i, options[i]), onOption(options[i]));
+    }, [ options, index, onChange, onOption ]), renderedOptions = React.useMemo(() => options ? options.map((option, i) => jsxRuntime.jsx("option", {
+        value: i,
+        onMouseUp: () => handleChange(i),
+        children: null == option ? void 0 : option.label
+    }, `${null == option ? void 0 : option.value}_${i}`)) : null, [ options, handleChange ]), displayText = React.useMemo(() => selectedText.replace("-- ", ""), [ selectedText ]), handleMouseDown = React.useCallback(e => {
+        disabled && e.preventDefault();
+    }, [ disabled ]), handleSelectChange = React.useCallback(e => {
+        handleChange(e.target.selectedIndex);
+    }, [ handleChange ]), setTextColor = React.useMemo(() => disabled ? "var(--core-text-disabled)" : placeholder && 0 === index ? "var(--core-text-tertiary)" : textColor, [ disabled, placeholder, index, textColor ]), setLabelColor = React.useMemo(() => disabled ? "var(--core-text-disabled)" : labelColor, [ disabled, labelColor ]), setIconColor = React.useMemo(() => disabled ? "var(--core-text-disabled)" : iconColor, [ disabled, iconColor ]), setBorderColor = React.useMemo(() => disabled ? "var(--core-outline-primary)" : error ? "var(--feedback-warning)" : borderColor, [ disabled, error, borderColor ]), setPadding = React.useMemo(() => "box" === borderStyle ? `${misc.setStyle(paddingTop)} ${misc.setStyle(paddingRight)} ${misc.setStyle(paddingBottom)} ${misc.setStyle(paddingLeft)}` : `0 0 ${misc.setStyle(paddingBottom)} 0`, [ paddingTop, paddingRight, paddingBottom, paddingLeft, borderStyle ]), setBorder = React.useMemo(() => "box" === borderStyle ? `${misc.setStyle(resolvedBorderWidth)} solid ${setBorderColor}` : "unset", [ resolvedBorderWidth, setBorderColor, borderStyle ]), setBorderBottom = React.useMemo(() => "none" !== borderStyle ? `${misc.setStyle(resolvedBorderWidth)} solid ${misc.setStyle(borderColor)}` : "unset", [ resolvedBorderWidth, borderColor, borderStyle ]), setBorderRadius = React.useMemo(() => "box" !== borderStyle ? 0 : `${borderRadius}px`, [ borderStyle, borderRadius ]), cssVars = React.useMemo(() => ({
+        "--dd-gap": misc.setStyle(gap),
+        "--dd-height": misc.setStyle(height),
+        "--dd-width": misc.setStyle(width),
+        "--dd-margin": inline ? "0 4px" : "0",
+        "--dd-border-radius": setBorderRadius,
+        "--dd-border": setBorder,
+        "--dd-border-bottom": setBorderBottom,
+        "--dd-color": setTextColor,
+        "--dd-bg-color": null != resolvedBackgroundColor ? resolvedBackgroundColor : "transparent",
+        "--dd-padding": setPadding,
+        "--dd-icon-size": `${iconSize}px`,
+        "--dd-label-color": setLabelColor,
+        "--dd-display": inline ? "inline-flex" : "flex"
+    }), [ gap, height, width, setBorderRadius, setBorder, setBorderBottom, setTextColor, resolvedBackgroundColor, setPadding, setLabelColor, iconSize, inline ]);
+    return jsxRuntime.jsxs("span", Object.assign({
+        id: divId,
+        className: `${css.wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, rest, {
+        children: [ label && jsxRuntime.jsx("span", {
+            className: `${css.label} ${css[size]}`,
+            children: label
+        }), jsxRuntime.jsx("span", {
+            className: `${css.face} ${css[size]}`,
+            children: jsxRuntime.jsx("span", {
+                className: css.faceText,
+                children: displayText
+            })
+        }), jsxRuntime.jsx("span", {
+            className: css.chevron,
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: "chevron down",
+                size: iconSize,
+                strokeColor: setIconColor
+            })
+        }), jsxRuntime.jsx("select", {
+            className: css.select,
+            value: index,
+            ref: ref,
+            onMouseDown: handleMouseDown,
+            onChange: handleSelectChange,
+            "aria-label": name,
+            children: renderedOptions
+        }) ]
+    }));
+}
+
+DropDownComponent.displayName = "DropDown";
+
+const DropDown = React.memo(DropDownComponent);
+
+exports.DropDown = DropDown;

package/dist/cjs/chunks/ErrorSummary-D-0uVwyV.js

@@ -0,0 +1,85 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js");
+
+var colors = require("./colors-4n0sNFRA.js");
+
+require("../hooks/useWindow.js");
+
+var css = {
+    errorBox: "ErrorSummary-module_errorBox__hjY50 flexBox-module_columnStart__C7P44",
+    error: "ErrorSummary-module_error__QX1mr flexBox-module_columnStart__C7P44",
+    p: "ErrorSummary-module_p__N-2Po",
+    ul: "ErrorSummary-module_ul__Xv0K7",
+    li: "ErrorSummary-module_li__0ciEx",
+    xs: "ErrorSummary-module_xs__pTqMn type-module_body-xs-regular__ZAFft",
+    s: "ErrorSummary-module_s__u2sIP type-module_body-s-regular__vRHSP",
+    m: "ErrorSummary-module_m__-QyP- type-module_body-m-regular__LuQBA",
+    l: "ErrorSummary-module_l__bb1xZ type-module_body-l-regular__lOYbg"
+};
+
+const ErrorSummary = React.memo(props => {
+    const {current: current} = hooks_useTheme.useTheme(), warning = current.colors["feedback-warning"], bg = colors.addOpacity(warning, .1), {entries: entries, textSize: textSize = "m", textColor: textColor = warning, backgroundColor: backgroundColor, bgColor: bgColor = bg, autoNumber: autoNumber = !0} = props, divAttributes = tslib_es6.__rest(props, [ "entries", "textSize", "textColor", "backgroundColor", "bgColor", "autoNumber" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, variants = React.useMemo(() => ({
+        enter: {
+            opacity: 0,
+            maxHeight: 0
+        },
+        animate: {
+            opacity: 1,
+            maxHeight: 500
+        },
+        exit: {
+            opacity: 0,
+            maxHeight: 0
+        }
+    }), []), transition = React.useMemo(() => ({
+        ease: "easeInOut",
+        duration: .25
+    }), []), renderMessages = React.useCallback(messages => messages ? messages.map(message => jsxRuntime.jsx("li", {
+        className: `${css.li} ${css[textSize]}`,
+        children: message
+    }, message)) : null, [ textSize ]), renderedErrors = React.useMemo(() => {
+        if (!entries) return null;
+        const addNumbers = autoNumber && entries.length > 1;
+        return entries.map((error, index) => {
+            let messages;
+            error.message && (messages = Array.isArray(error.message) ? error.message : [ error.message ]);
+            const number = addNumbers ? `${index + 1}. ` : "";
+            return jsxRuntime.jsxs("div", {
+                className: css.error,
+                children: [ jsxRuntime.jsx("p", {
+                    className: `${css.p} ${css[textSize]}`,
+                    children: jsxRuntime.jsx("strong", {
+                        children: `${number}${error.title}`
+                    })
+                }), messages && jsxRuntime.jsx("ul", {
+                    className: css.ul,
+                    children: renderMessages(messages)
+                }) ]
+            }, `${error.title}_${index}`);
+        });
+    }, [ entries, autoNumber, renderMessages, textSize ]), cssVars = React.useMemo(() => ({
+        "--error-text-color": textColor,
+        "--error-bg-color": resolvedBackgroundColor
+    }), [ textColor, resolvedBackgroundColor ]);
+    return jsxRuntime.jsx(react.AnimatePresence, {
+        initial: !1,
+        children: entries && entries.length > 0 && jsxRuntime.jsx(react.motion.div, Object.assign({
+            id: divId,
+            className: `${css.errorBox}${divClass}`,
+            style: Object.assign(Object.assign({}, divStyle), cssVars),
+            initial: "enter",
+            animate: "animate",
+            exit: "exit",
+            variants: variants,
+            transition: transition
+        }, rest, {
+            children: renderedErrors
+        }))
+    });
+});
+
+exports.ErrorSummary = ErrorSummary;

package/dist/cjs/chunks/{FileIcon-PuDoz0mF.js → FileIcon-JfY2AYqG.js}

@@ -1,11 +1,11 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var FileIconNames, misc = require("./misc-QpU0XEOW.js");
+var FileIconNames, misc = require("./misc-4xyXRU2K.js");
 
 require("../hooks/useWindow.js"), exports.FileIconNames = void 0, (FileIconNames = exports.FileIconNames || (exports.FileIconNames = {})).pdf = "pdf", 
 FileIconNames.text = "text", FileIconNames.sheet = "sheet", FileIconNames.preso = "preso", 

package/dist/cjs/chunks/FileList-Dc1nfpR2.js

@@ -0,0 +1,222 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-DsF7Wv4Y.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-4xyXRU2K.js"), FileIcon = require("./FileIcon-JfY2AYqG.js"), Icon = require("./Icon-BVYVJp9J.js"), ProgressIndicator = require("./ProgressIndicator-CFiAU-aF.js");
+
+var css = {
+    wrapper: "FileList-module_wrapper__9-rrl flexBox-module_rowStart__4tcxS",
+    file: "FileList-module_file__61dkh flexBox-module_rowStart__4tcxS",
+    fileName: "FileList-module_fileName__amame flexBox-module_row__z24tF",
+    meta: "FileList-module_meta__unbpG flexBox-module_columnStart__C7P44",
+    status: "FileList-module_status__H1s6f type-module_body-xs-regular__ZAFft",
+    error: "FileList-module_error__UZ4-T",
+    fileIcon: "FileList-module_fileIcon__xDWW8 flexBox-module_row__z24tF",
+    icon: "FileList-module_icon__JR0HE flexBox-module_row__z24tF",
+    xs: "FileList-module_xs__i2S-5 type-module_body-xs-regular__ZAFft",
+    s: "FileList-module_s__4q0ae type-module_body-s-regular__vRHSP",
+    m: "FileList-module_m__hWqBx type-module_body-m-regular__LuQBA",
+    l: "FileList-module_l__tHDNp type-module_body-l-regular__lOYbg",
+    xl: "FileList-module_xl__fxW11 type-module_body-xl-regular__pF2kC"
+};
+
+/**
+ * utility get file name from file item
+ */
+/**
+ * display the remove button if not uploading
+ */
+function displayClose(uploading) {
+    return uploading ? {
+        display: "none"
+    } : {
+        display: "flex"
+    };
+}
+
+const FileList = React.memo(props => {
+    const {files: files = [], onChange: onChange, onToolTip: onToolTip, maxWidth: maxWidth, minWidth: minWidth, direction: direction = "row", padding: padding, gap: gap = 10, size: size = "s", iconSize: iconSize = 24, backgroundColor: backgroundColor, bgColor: bgColor, canRemove: canRemove = !0} = props, divAttributes = tslib_es6.__rest(props, [ "files", "onChange", "onToolTip", "maxWidth", "minWidth", "direction", "padding", "gap", "size", "iconSize", "backgroundColor", "bgColor", "canRemove" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, fileNameToFileItem = React.useCallback(fileName => {
+        const {ext: ext, name: name} = 
+        /**
+ * Split a file name into its display name and extension.
+ */
+        function(fileName) {
+            var _a;
+            const ext = null !== (_a = fileName.split(".").pop()) && void 0 !== _a ? _a : "unknown";
+            return {
+                name: fileName,
+                ext: ext
+            };
+        }
+        /**
+ * Map a file extension to the corresponding file icon name.
+ */ (fileName);
+        return {
+            name: name,
+            ext: ext,
+            icon: function(extension) {
+                switch (extension) {
+                  case "png":
+                  case "jpeg":
+                  case "jpg":
+                  case "gif":
+                  case "heic":
+                    return "image";
+
+                  case "docx":
+                  case "doc":
+                  case "txt":
+                    return "text";
+
+                  case "md":
+                    return "md";
+
+                  case "html":
+                  case "js":
+                  case "ts":
+                  case "tsx":
+                  case "json":
+                  case "py":
+                    return "code";
+
+                  case "xls":
+                  case "xlsx":
+                  case "csv":
+                    return "sheet";
+
+                  case "ppt":
+                  case "pptx":
+                    return "preso";
+
+                  case "pdf":
+                    return "pdf";
+
+                  case "mp3":
+                  case "aif":
+                  case "wav":
+                    return "audio";
+
+                  case "mp4":
+                  case "mov":
+                    return "video";
+
+                  case "clipboard":
+                    return "clipboard";
+
+                  default:
+                    return "other";
+                }
+            }(ext)
+        };
+    }, []), displayList = React.useMemo(() => files.map((item, index) => {
+        var _a;
+        const fileName = function(item) {
+            return "string" == typeof item.file ? item.file : item.file.name;
+        }
+        /**
+ * cal progress as a percentage string
+ */ (item), fileMeta = fileNameToFileItem(fileName), progress = function(uploading, progress) {
+            if (void 0 === progress || Number.isNaN(progress)) return uploading ? "0%" : "100%";
+            const percent = progress <= 1 ? 100 * progress : progress, clamped = Math.max(0, Math.min(100, percent));
+            return `${Math.round(clamped)}%`;
+        }
+        /**
+ * display the progress indicator if uploading
+ */ (item.uploading, item.progress);
+        return Object.assign(Object.assign({}, fileMeta), {
+            key: `${fileMeta.name}-${index}`,
+            index: index,
+            uploading: null !== (_a = item.uploading) && void 0 !== _a && _a,
+            progress: progress,
+            error: item.error
+        });
+    }), [ files, fileNameToFileItem ]), handleRemove = React.useCallback(index => {
+        const updated = files.filter((_, itemIndex) => itemIndex !== index);
+        null == onChange || onChange(updated);
+    }, [ files, onChange ]), handleMouseOver = React.useCallback(e => {
+        const toolTip = {
+            payload: {
+                label: "Remove file"
+            },
+            ref: {
+                current: e.currentTarget
+            }
+        };
+        null == onToolTip || onToolTip(toolTip);
+    }, [ onToolTip ]), handleMouseOut = React.useCallback(() => {
+        null == onToolTip || onToolTip(null);
+    }, [ onToolTip ]), cssVars = React.useMemo(() => ({
+        "--file-max-width": "column" === direction ? "100%" : misc.setStyle(maxWidth),
+        "--file-min-width": "column" !== direction || minWidth ? misc.setStyle(minWidth) : "100%",
+        "--file-gap": misc.setStyle(gap),
+        "--file-direction": direction,
+        "--file-wrap": "column" === direction ? "nowrap" : "wrap",
+        "--file-padding": padding ? misc.setStyle(padding) : "4px 4px 4px 2px",
+        "--file-icon-size": misc.setStyle(iconSize),
+        "--file-overflow": "column" === direction ? "unset" : "hidden",
+        "--file-bg-color": null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)"
+    }), [ maxWidth, gap, direction, minWidth, padding, iconSize, resolvedBackgroundColor ]), fileCSSVars = React.useCallback((progress, error) => ({
+        "--file-progress": `${progress}`,
+        "--file-border-color": error ? "var(--feedback-warning)" : "var(--core-outline-primary)"
+    }), []);
+    return jsxRuntime.jsx("div", Object.assign({
+        className: `${css.wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        id: divId
+    }, rest, {
+        children: displayList.map(i => {
+            return jsxRuntime.jsxs("div", {
+                className: `${css.file} ${css[size]}`,
+                style: fileCSSVars(i.progress, i.error),
+                children: [ jsxRuntime.jsx("div", {
+                    className: css.fileIcon,
+                    children: jsxRuntime.jsx(FileIcon.FileIcon, {
+                        name: i.icon,
+                        size: iconSize
+                    })
+                }), jsxRuntime.jsxs("div", {
+                    className: css.meta,
+                    children: [ jsxRuntime.jsx("div", {
+                        className: css.fileName,
+                        children: i.name
+                    }), i.error && jsxRuntime.jsx("div", {
+                        className: `${css.status} ${i.error ? css.error : ""}`,
+                        children: i.error
+                    }) ]
+                }), jsxRuntime.jsx("div", {
+                    className: css.icon,
+                    style: (uploading = i.uploading, uploading ? {
+                        display: "flex"
+                    } : {
+                        display: "none"
+                    }),
+                    children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                        inline: !0,
+                        size: 20,
+                        show: i.uploading
+                    })
+                }), canRemove && jsxRuntime.jsx("div", {
+                    className: css.icon,
+                    style: displayClose(i.uploading),
+                    role: "button",
+                    "aria-label": "remove file",
+                    onMouseOver: handleMouseOver,
+                    onMouseOut: handleMouseOut,
+                    onFocus: handleMouseOver,
+                    onBlur: handleMouseOut,
+                    onClick: () => handleRemove(i.index),
+                    onKeyDown: e => misc.accessibleKeyDown(e, () => handleRemove(i.index)),
+                    tabIndex: 0,
+                    children: jsxRuntime.jsx(Icon.Icon, {
+                        name: "x",
+                        style: {
+                            pointerEvents: "none"
+                        }
+                    })
+                }) ]
+            }, i.key);
+            var uploading;
+        })
+    }));
+});
+
+exports.FileList = FileList;