@apple-pie/slice 0.0.5 → 0.0.7

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var _types = require("./_types-B5xXv4NA.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
+    wrapper: "DropDown-module_wrapper__56asG flexBox-module_rowStart__nJZnW",
+    face: "DropDown-module_face__kF56R flexBox-module_rowStart__nJZnW",
+    small: "DropDown-module_small__QYoM4 type-module_body-s-regular__8-FO-",
+    medium: "DropDown-module_medium__FrKVH type-module_body-m-regular__Qtp5G",
+    large: "DropDown-module_large__O1hDm type-module_body-l-regular__Ar4d3",
+    chevron: "DropDown-module_chevron__upYr7 flexBox-module_rowStart__nJZnW",
+    select: "DropDown-module_select__1rQRA"
+};
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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}.type-module_body-xs-regular__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.DropDown-module_wrapper__56asG {\n\tposition: relative;\n\tgap: var(--dd-gap);\n\tmin-width: var(--dd-width);\n\twidth: var(--dd-width);\n\tborder-radius: var(--dd-border-radius);\n\tbackground-color: var(--dd-bg-color);\n\tbox-shadow: 0 0 0 var(--dd-box-shadow-size) var(--dd-border-color);\n\tpadding: var(--dd-padding-tops) var(--dd-padding-left) var(--dd-padding-tops)\n\t\tvar(--dd-padding-right) !important;\n\ttransition: all 0.2s ease-in-out 0s;\n}\n\n.DropDown-module_face__kF56R {\n\tflex: 1;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\ttext-overflow: ellipsis;\n\tword-break: break-all;\n\tcolor: var(--dd-color);\n}\n\n.DropDown-module_small__QYoM4 {\n}\n\n.DropDown-module_medium__FrKVH {\n}\n\n.DropDown-module_large__O1hDm {\n}\n\n.DropDown-module_chevron__upYr7 {\n\tmin-height: var(--dd-icon-size);\n\tmax-height: var(--dd-icon-size);\n\tmin-width: var(--dd-icon-size);\n\tmax-width: var(--dd-icon-size);\n}\n\n.DropDown-module_select__1rQRA {\n\tposition: absolute;\n\topacity: 0;\n\twidth: 100%;\n\theight: 100%;\n\tfont-size: 14px;\n\tbackground-color: #1f99cd;\n\tbackground-position: right 10px center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: auto 50%;\n\tborder: none;\n\toutline: none;\n\t-moz-appearance: none;\n\t-webkit-appearance: none;\n\tappearance: none;\n\t&::-ms-expand {\n\t\tdisplay: none;\n\t}\n}\n");
+
+const DropDown = React.memo(props => {
+    const theme = hooks_useTheme.useTheme(), {name: name = "Select", width: width = "100%", height: height = "auto", selectedIndex: selectedIndex = 0, selectedValue: selectedValue = "", options: options = [], placeholder: placeholder = !0, validate: validate = !0, borderRadius: borderRadius = 4, bgColor: bgColor = "transparent", iconColor: iconColor = theme.current.colors["core-icon-primary"], paddingLeft: paddingLeft = "8px", paddingRight: paddingRight = "12px", paddingTops: paddingTops = "8px", iconSize: iconSize = 20, disabled: disabled = !1, unframed: unframed = !1, focused: focused = !1, gap: gap = 0, size: size = "medium", onChange: onChange = () => null, onValidate: onValidate = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "name", "width", "height", "selectedIndex", "selectedValue", "options", "placeholder", "validate", "borderRadius", "bgColor", "iconColor", "paddingLeft", "paddingRight", "paddingTops", "iconSize", "disabled", "unframed", "focused", "gap", "size", "onChange", "onValidate", "onFocus", "onBlur" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = React.useState(selectedIndex), [selectedText, setSelectedText] = React.useState("Select an option"), [initiated, setInitiated] = React.useState(!1), [color, setColor] = React.useState(iconColor), ref = React.useRef(null);
+    React.useEffect(() => setColor(theme.current.colors["core-icon-primary"]), [ theme ]), 
+    React.useEffect(() => {
+        let valid = !0;
+        validate && placeholder && 0 === index && (valid = !1), initiated || (valid = !0), 
+        onValidate(valid);
+    }, [ index, validate, placeholder, initiated, onValidate ]), React.useEffect(() => {
+        focused && (null == ref ? void 0 : ref.current) && (setInitiated(!0), ref.current.click());
+    }, [ focused ]), React.useEffect(() => {
+        if (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 ]), React.useEffect(() => {
+        if (!options || 0 === options.length || "" === selectedValue) return;
+        const foundIndex = options.findIndex(option => {
+            var _a, _b, _c;
+            return (null === (_a = null == option ? void 0 : option.value) || void 0 === _a ? void 0 : _a.toLowerCase()) === selectedValue.toString().toLowerCase() || (null === (_b = null == option ? void 0 : option.label) || void 0 === _b ? void 0 : _b.toLowerCase()) === selectedValue.toString().toLowerCase() || (null === (_c = null == option ? void 0 : option.alt) || void 0 === _c ? void 0 : _c.toLowerCase()) === selectedValue.toString().toLowerCase();
+        });
+        if (-1 !== foundIndex) {
+            const label = options[foundIndex].label || "Select an option";
+            setSelectedText(label), setIndex(foundIndex), ref.current && (ref.current.selectedIndex = foundIndex);
+        }
+    }, [ selectedValue, options ]);
+    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]), onBlur(options[i].label || "");
+    }, [ options, index, onChange, onBlur ]), handleFocus = React.useCallback(() => {
+        setInitiated(!0), onFocus();
+    }, [ onFocus ]), renderedOptions = React.useMemo(() => options ? options.map((option, i) => jsxRuntime.jsx("option", {
+        value: null == option ? void 0 : option.value,
+        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(), handleFocus();
+    }, [ disabled, handleFocus ]), handleSelectChange = React.useCallback(e => {
+        handleChange(e.target.selectedIndex);
+    }, [ handleChange ]), getSize = React.useCallback(value => "string" == typeof value ? value : `${value}px`, []), cssVars = React.useMemo(() => ({
+        "--dd-gap": `${gap}px`,
+        "--dd-height": `${getSize(height)}`,
+        "--dd-width": `${getSize(width)}`,
+        "--dd-margin": "8px",
+        "--dd-border-radius": borderRadius ? `${borderRadius}px` : "4px",
+        "--dd-box-shadow-size": unframed ? "0" : "1px",
+        "--dd-border-color": unframed ? "transparent" : "var(--core-outline-primary)",
+        "--dd-bg-color": null != bgColor ? bgColor : "transparent",
+        "--dd-padding-left": unframed ? "0" : `${getSize(paddingLeft)}`,
+        "--dd-padding-right": unframed ? "0" : `${getSize(paddingRight)}`,
+        "--dd-padding-tops": unframed ? "0" : `${getSize(paddingTops)}`,
+        "--dd-icon-size": `${iconSize}px`,
+        "--dd-color": placeholder && 0 === index ? "var(--core-text-tertiary)" : "var(--core-text-primary)"
+    }), [ gap, height, width, borderRadius, bgColor, paddingLeft, paddingRight, paddingTops, unframed, placeholder, iconSize, index, getSize ]);
+    return jsxRuntime.jsxs("div", Object.assign({
+        id: divId,
+        className: `${css.wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, rest, {
+        children: [ jsxRuntime.jsx("div", {
+            className: `${css.face} ${css[size]}`,
+            children: displayText
+        }), jsxRuntime.jsx("div", {
+            className: css.chevron,
+            children: jsxRuntime.jsx(_types.Icon, {
+                name: "chevron down",
+                size: iconSize,
+                strokeColor: color
+            })
+        }), jsxRuntime.jsx("select", {
+            className: css.select,
+            defaultValue: index,
+            ref: ref,
+            onFocus: handleFocus,
+            onMouseDown: handleMouseDown,
+            onChange: handleSelectChange,
+            "aria-label": name,
+            children: renderedOptions
+        }) ]
+    }));
+});
+
+DropDown.displayName = "DropDown", exports.DropDown = DropDown;

package/dist/cjs/chunks/ErrorSummary-CIUqlSLC.js

@@ -0,0 +1,60 @@
+"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_errorBox = "ErrorSummary-module_errorBox__-R7XM flexBox-module_columnStart__Kg8cV type-module_body-m-regular__Qtp5G", css_error = "ErrorSummary-module_error__YCQLh flexBox-module_columnStart__Kg8cV", css_p = "ErrorSummary-module_p__lbLpS type-module_body-m-regular__Qtp5G", css_strong = "ErrorSummary-module_strong__XVtAe type-module_body-m-bold__0lZ3I", css_ul = "ErrorSummary-module_ul__d0xoc", css_li = "ErrorSummary-module_li__jym6S type-module_body-m-regular__Qtp5G";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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}.type-module_body-xs-regular__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.ErrorSummary-module_errorBox__-R7XM {\n\twidth: 100%;\n\tbackground: var(--core-surface-secondary);\n\tcolor: var(--feedback-warning);\n\tborder: 1px solid var(--feedback-warning);\n\tborder-radius: 4px;\n\tpadding: 0 16px 16px 16px !important;\n\toverflow: hidden;\n\tmargin-bottom: 44px !important;\n}\n\n.ErrorSummary-module_error__YCQLh {\n\twidth: 100%;\n}\n\n.ErrorSummary-module_p__lbLpS {\n\tmargin: 0;\n\tpadding: 16px 0 0 0;\n}\n\n.ErrorSummary-module_strong__XVtAe {\n}\n\n.ErrorSummary-module_ul__d0xoc {\n\tlist-style-type: none;\n\tlist-style-position: outside;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.ErrorSummary-module_li__jym6S {\n\tmargin: 3px 0 3px 0;\n\tline-height: 1.2em;\n\tpadding: 0;\n}\n");
+
+const ErrorSummary = React.memo(props => {
+    const {entries: entries, errors: errors = []} = props, divAttributes = tslib_es6.__rest(props, [ "entries", "errors" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", 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
+    }), []), renderedErrors = React.useMemo(() => entries ? entries.map((error, index) => {
+        var _a;
+        return errors.includes(index) || errors.includes(error.id) ? jsxRuntime.jsxs("div", {
+            className: css_error,
+            children: [ jsxRuntime.jsx("p", {
+                className: css_p,
+                children: jsxRuntime.jsx("strong", {
+                    className: css_strong,
+                    children: error.title
+                })
+            }), jsxRuntime.jsx("ul", {
+                className: css_ul,
+                children: null === (_a = error.bullets) || void 0 === _a ? void 0 : _a.map((bullet, index) => jsxRuntime.jsx("li", {
+                    className: css_li,
+                    children: bullet
+                }, `${error.title}_bullet_${index}`))
+            }) ]
+        }, `${error.id}_${index}`) : null;
+    }) : null, [ entries, errors ]);
+    return jsxRuntime.jsx(react.AnimatePresence, {
+        initial: !1,
+        children: entries && errors && errors.length > 0 && jsxRuntime.jsx(react.motion.div, Object.assign({
+            id: divId,
+            className: `${css_errorBox}${divClass}`,
+            style: divStyle,
+            initial: "enter",
+            animate: "animate",
+            exit: "exit",
+            variants: variants,
+            transition: transition
+        }, rest, {
+            children: renderedErrors
+        }))
+    });
+});
+
+exports.ErrorSummary = ErrorSummary;

package/dist/cjs/chunks/FileIcon-DTQaXxfC.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var FileIconNames, utils = require("./utils-BsBHecUI.js");
+
+exports.FileIconNames = void 0, (FileIconNames = exports.FileIconNames || (exports.FileIconNames = {})).pdf = "pdf", 
+FileIconNames.text = "text", FileIconNames.sheet = "sheet", FileIconNames.preso = "preso", 
+FileIconNames.md = "md", FileIconNames.code = "code", FileIconNames.image = "image", 
+FileIconNames.audio = "audio", FileIconNames.video = "video", FileIconNames.other = "other";
+
+const iconColorSchemes = {
+    blue: {
+        dark: "#4084ff",
+        light: "#2d2fff"
+    },
+    red: {
+        dark: "#ff474a",
+        light: "#df0529"
+    },
+    green: {
+        dark: "#2d8c00",
+        light: "#2d8c00"
+    },
+    gray: {
+        dark: "#657d91",
+        light: "#4c6273"
+    },
+    pink: {
+        dark: "#ff3ac2",
+        light: "#df059b"
+    }
+}, STATIC_FILE_ICONS = new Map([ [ "pdf", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.red[theme]
+        }), jsxRuntime.jsx("path", {
+            d: "M8.53,7c-.39,0-.73.38-.64.77.06.59.44,1.07.74,1.56.03.18-.06.36-.07.54-.19,1.06-.49,2.12-.95,3.09-.56.26-1.2.52-1.53,1.08-.21.39.09.91.52.95.4.05.7-.29.92-.58.23-.31.38-.68.57-1.01,1.15-.46,2.37-.79,3.61-.91.5.36,1.03.78,1.68.81.37,0,.68-.37.63-.74-.02-.34-.32-.57-.63-.63-.5-.15-1.03-.07-1.54-.06-.97-.78-1.87-1.67-2.58-2.7.05-.62.16-1.31-.17-1.88-.12-.18-.33-.3-.55-.28ZM8.55,7.57c.11.02.12.18.15.27.03.18.03.36.02.54-.13-.24-.3-.5-.27-.79.03,0,.06-.02.1-.02ZM9.15,10c.58.72,1.23,1.39,1.93,1.99-.93.14-1.85.38-2.73.7.34-.89.6-1.8.77-2.73.01.01.02.03.04.04ZM12.77,12.43c.23.02.49,0,.67.16.02.14-.15.16-.25.11-.19-.06-.38-.14-.54-.27.04,0,.08,0,.12,0ZM7.15,13.9c-.11.2-.26.39-.43.53-.05.09-.2-.07-.13-.14.14-.22.39-.34.61-.47-.02.03-.03.06-.05.08Z",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "text", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.blue[theme]
+        }), jsxRuntime.jsx("rect", {
+            x: "6",
+            y: "8",
+            width: "6",
+            height: "1",
+            fill: "#fff"
+        }), jsxRuntime.jsx("rect", {
+            x: "6",
+            y: "10.5",
+            width: "8",
+            height: "1",
+            fill: "#fff"
+        }), jsxRuntime.jsx("rect", {
+            x: "6",
+            y: "13",
+            width: "3.5",
+            height: "1",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "sheet", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.green[theme]
+        }), jsxRuntime.jsx("path", {
+            d: "M6,8v6h8v-6H6ZM7,9h1.5v1.5h-1.5v-1.5ZM7,11.5h1.5v1.5h-1.5v-1.5ZM13,13h-3.5v-1.5h3.5v1.5ZM9.5,10.5v-1.5h3.5v1.5h-3.5Z",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "preso", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.red[theme]
+        }), jsxRuntime.jsx("path", {
+            d: "M14,7.5H6c-.28,0-.5.22-.5.5v6c0,.28.22.5.5.5h8c.28,0,.5-.22.5-.5v-6c0-.28-.22-.5-.5-.5ZM8.5,12.5c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5c0,0,0,0,0,0v1.5h1.5s0,0,0,0c0,.83-.67,1.5-1.5,1.5ZM13,12.5h-2v-1h2v1ZM13,10.5h-2v-1h2v1Z",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "md", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.gray[theme]
+        }), jsxRuntime.jsx("path", {
+            d: "M14,9.13v-1h-1.63v-1.63h-1v1.63h-2.73v-1.63h-1v1.63h-1.63v1h1.63v2.73h-1.63v1h1.63v1.63h1v-1.63h2.73v1.63h1v-1.63h1.63v-1h-1.63v-2.73h1.63ZM11.37,11.87h-2.73v-2.73h2.73v2.73Z",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "code", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.gray[theme]
+        }), jsxRuntime.jsx("path", {
+            d: "M7.75,8.47l-2.8,1.6c-.16.09-.25.25-.25.43s.1.34.25.43l2.8,1.6.5-.87-2.04-1.17,2.04-1.17-.5-.87Z",
+            fill: "#fff"
+        }), jsxRuntime.jsx("path", {
+            d: "M15.28,10.18l-2.4-1.6-.55.83,1.78,1.18-1.78,1.18.55.83,2.4-1.6c.14-.09.22-.25.22-.42s-.08-.32-.22-.42Z",
+            fill: "#fff"
+        }), jsxRuntime.jsx("rect", {
+            x: "6.53",
+            y: "10",
+            width: "7.43",
+            height: "1",
+            transform: "translate(-1.52 19.26) rotate(-82.36)",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "image", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.blue[theme]
+        }), jsxRuntime.jsx("path", {
+            d: "M13.51,7h-7.03c-.54,0-.99.44-.99.99v4.84h0s0,1.68,0,1.68h8.01c.54,0,.99-.44.99-.99v-5.53c0-.54-.44-.99-.99-.99ZM6.49,8h7.01v5.26s-1-1.01-1-1.01l-1.25,1.25h-.01l-3.25-3.79-1.49,1.86v-3.58Z",
+            fill: "#fff"
+        }), jsxRuntime.jsx("circle", {
+            cx: "11.5",
+            cy: "10",
+            r: "1",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "audio", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.pink[theme]
+        }), jsxRuntime.jsx("path", {
+            d: "M9.14,8.39c-.09.07-.2.11-.31.11h-1.32c-.28,0-.5.23-.5.5v2.49c0,.28.23.5.5.5h1.32c.11,0,.22.04.31.11l1.86,1.89h1v-7.5h-1l-1.86,1.89Z",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "video", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.pink[theme]
+        }), jsxRuntime.jsx("rect", {
+            x: "6",
+            y: "7.75",
+            width: "5.5",
+            height: "5.5",
+            rx: ".75",
+            ry: ".75",
+            fill: "#fff"
+        }), jsxRuntime.jsx("path", {
+            d: "M13.87,8.03c-.08-.04-.18-.04-.26.01l-1.5,1c-.07.05-.11.12-.11.21v2.5c0,.08.04.16.11.21l1.5,1s.09.04.14.04c.04,0,.08,0,.12-.03.08-.04.13-.13.13-.22v-4.5c0-.09-.05-.18-.13-.22Z",
+            fill: "#fff"
+        }) ]
+    })
+} ], [ "other", {
+    paths: theme => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("path", {
+            d: "M3,2v15.99c0,.55.45,1,1,1h11.99c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1h-2v-2c0-.55-.45-1-1-1H4c-.55,0-1,.45-1,1Z",
+            fill: iconColorSchemes.gray[theme]
+        }), jsxRuntime.jsx("rect", {
+            x: "6",
+            y: "8",
+            width: "6",
+            height: "1",
+            fill: "#fff"
+        }), jsxRuntime.jsx("rect", {
+            x: "6",
+            y: "10.5",
+            width: "8",
+            height: "1",
+            fill: "#fff"
+        }), jsxRuntime.jsx("rect", {
+            x: "6",
+            y: "13",
+            width: "3.5",
+            height: "1",
+            fill: "#fff"
+        }) ]
+    })
+} ] ]), FileIcon = React.memo(props => {
+    const {name: name = "pdf", size: size = 24, pointer: pointer = !1, disabled: disabled = !1, onClick: onClick} = props, svgAttributes = tslib_es6.__rest(props, [ "name", "size", "pointer", "disabled", "onClick" ]), {id: svgId, className: className, style: style} = svgAttributes, rest = tslib_es6.__rest(svgAttributes, [ "id", "className", "style" ]), {isDark: isDark} = hooks_useTheme.useTheme(), cursor = React.useMemo(() => disabled ? "default" : pointer ? "pointer" : "inherit", [ disabled, pointer ]), iconStyle = React.useMemo(() => ({
+        cursor: cursor,
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        WebkitTapHighlightColor: "transparent",
+        outline: "none",
+        border: 0
+    }), [ cursor ]), handleClick = React.useCallback(e => {
+        disabled || null == onClick || onClick(e);
+    }, [ onClick, disabled ]), definition = STATIC_FILE_ICONS.get(name), paths = null == definition ? void 0 : definition.paths(isDark ? "dark" : "light");
+    return paths ? jsxRuntime.jsxs("svg", Object.assign({
+        id: svgId,
+        className: className,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 20 20",
+        style: Object.assign(Object.assign({}, style), iconStyle),
+        onClick: handleClick,
+        role: pointer ? "button" : "img",
+        "aria-label": `${name} icon`,
+        "aria-disabled": pointer ? disabled : void 0,
+        tabIndex: pointer && !disabled ? 0 : -1,
+        onKeyDown: e => {
+            pointer && !disabled && utils.accessibleKeyDown(e, () => handleClick(e));
+        },
+        opacity: disabled ? .5 : 1
+    }, rest, {
+        children: [ jsxRuntime.jsx("title", {}), paths ]
+    })) : null;
+});
+
+FileIcon.displayName = "FileIcon", exports.FileIcon = FileIcon;

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

@@ -0,0 +1,217 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), utils = require("./utils-BsBHecUI.js"), FileIcon = require("./FileIcon-DTQaXxfC.js"), _types = require("./_types-B5xXv4NA.js"), ProgressIndicator = require("./ProgressIndicator-BbrZ7Aoc.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js");
+
+var css = {
+    wrapper: "FileList-module_wrapper__vsmK5 flexBox-module_rowStart__nJZnW",
+    file: "FileList-module_file__TTDb9 flexBox-module_rowStart__nJZnW",
+    fileName: "FileList-module_fileName__qFumz flexBox-module_row__PWxbe",
+    meta: "FileList-module_meta__cEeZM flexBox-module_columnStart__Kg8cV",
+    status: "FileList-module_status__gOq0Z type-module_body-xs-regular__QWEzl",
+    error: "FileList-module_error__lwFza",
+    fileIcon: "FileList-module_fileIcon__a-lhL flexBox-module_row__PWxbe",
+    icon: "FileList-module_icon__IqQtu flexBox-module_row__PWxbe",
+    xs: "FileList-module_xs__E8BbI type-module_body-xs-regular__QWEzl",
+    s: "FileList-module_s__hk4A- type-module_body-s-regular__8-FO-",
+    m: "FileList-module_m__3Fc4x type-module_body-m-regular__Qtp5G",
+    l: "FileList-module_l__pS2TK type-module_body-l-regular__Ar4d3",
+    xl: "FileList-module_xl__NbbC5 type-module_body-xl-regular__zDf-z"
+};
+
+/**
+ * display the remove button if not uploading
+ */
+function displayClose(uploading) {
+    return uploading ? {
+        display: "none"
+    } : {
+        display: "flex"
+    };
+}
+
+styleInject_es.styleInject('.flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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}.type-module_body-xs-regular__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.FileList-module_wrapper__vsmK5 {\n\twidth: 100%;\n\toverflow: hidden;\n\tflex-wrap: var(--file-wrap);\n\tflex-direction: var(--file-direction) !important;\n\talign-items: flex-start !important;\n\tgap: var(--file-gap);\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.FileList-module_file__TTDb9 {\n\tposition: relative;\n\tpadding: var(--file-padding) !important;\n\tborder: 1px solid var(--file-border-color);\n\tborder-radius: 4px;\n\toverflow: hidden;\n\tmin-height: max-content;\n\tmax-width: var(--file-max-width);\n\tmin-width: var(--file-min-width);\n\tcolor: var(--core-text-primary);\n\tbackground: transparent;\n\tgap: 4px;\n}\n\n/* file progress bar */\n.FileList-module_file__TTDb9::before {\n\tcontent: "";\n\tposition: absolute;\n\tbackground: var(--file-bg-color);\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: var(--file-progress);\n\ttransition: width 1s ease-in-out 0s;\n\tz-index: 1;\n}\n\n.FileList-module_fileName__qFumz {\n\twidth: 100%;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tword-break: break-all;\n\tdisplay: -webkit-box !important;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\tz-index: 2;\n}\n\n.FileList-module_meta__cEeZM {\n\tflex: 1;\n\tmin-width: 0;\n\tgap: 2px;\n\tz-index: 2;\n}\n\n.FileList-module_status__gOq0Z {\n\tcolor: var(--core-text-secondary);\n\tline-height: 1.2;\n}\n\n.FileList-module_error__lwFza {\n\tcolor: var(--feedback-warning);\n}\n\n.FileList-module_fileIcon__a-lhL {\n\tmin-width: var(--file-icon-size);\n\tmin-height: var(--file-icon-size);\n\tmax-width: var(--file-icon-size);\n\tmax-height: var(--file-icon-size);\n\tz-index: 2;\n}\n\n.FileList-module_icon__IqQtu {\n\tmargin-left: 4px !important;\n\tmin-width: 20px;\n\tmin-height: 20px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n\tcursor: pointer;\n\tz-index: 2;\n}\n\n.FileList-module_xs__E8BbI {\n}\n\n.FileList-module_s__hk4A- {\n}\n\n.FileList-module_m__3Fc4x {\n}\n\n.FileList-module_l__pS2TK {\n}\n\n.FileList-module_xl__NbbC5 {\n}\n');
+
+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, bgColor: bgColor, canRemove: canRemove = !0} = props, divAttributes = tslib_es6.__rest(props, [ "files", "onChange", "onToolTip", "maxWidth", "minWidth", "direction", "padding", "gap", "size", "iconSize", "bgColor", "canRemove" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", fileNameToFileItem = React.useCallback(fileName => {
+        const {ext: ext, name: name} = function(fileName) {
+            var _a;
+            const ext = null !== (_a = fileName.split(".").pop()) && void 0 !== _a ? _a : "unknown";
+            return {
+                name: fileName,
+                ext: ext
+            };
+        }(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 = 
+        /**
+ * utility get file name from file item
+ */
+        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%" : utils.setStyle(maxWidth),
+        "--file-min-width": "column" !== direction || minWidth ? utils.setStyle(minWidth) : "100%",
+        "--file-gap": utils.setStyle(gap),
+        "--file-direction": direction,
+        "--file-wrap": "column" === direction ? "nowrap" : "wrap",
+        "--file-padding": padding ? utils.setStyle(padding) : "4px 4px 4px 2px",
+        "--file-icon-size": utils.setStyle(iconSize),
+        "--file-overflow": "column" === direction ? "unset" : "hidden",
+        "--file-bg-color": null != bgColor ? bgColor : "var(--core-surface-secondary)"
+    }), [ maxWidth, gap, direction, minWidth, padding, iconSize, bgColor ]), 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 => utils.accessibleKeyDown(e, () => handleRemove(i.index)),
+                    tabIndex: 0,
+                    children: jsxRuntime.jsx(_types.Icon, {
+                        name: "x",
+                        style: {
+                            pointerEvents: "none"
+                        }
+                    })
+                }) ]
+            }, i.key);
+            var uploading;
+        })
+    }));
+});
+
+exports.FileList = FileList;