@apple-pie/slice 0.0.0 → 0.0.2

package/dist/cjs/chunks/EditorButtonBar-CUNDgRQd.js

@@ -0,0 +1,244 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var hooks_useTheme = require('../hooks/useTheme.js');
+require('../theme/colors.js');
+require('../hooks/useWindow.js');
+var hooks_useObserveResize = require('../hooks/useObserveResize.js');
+var DropDown = require('./DropDown-D9sf_m2I.js');
+var IconButton = require('./IconButton-BfsPlKTb.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".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}\n\n.EditorButtonBar-module_wrapper__mfv-c {\n\twidth: 100%;\n}\n\n.EditorButtonBar-module_right__G2tBZ {\n}\n\n.EditorButtonBar-module_left__9omfV {\n\tflex: 1;\n}\n\n.EditorButtonBar-module_buttonGroup__p0aEd {\n\tgap: 4px;\n\tdiv.EditorButtonBar-module_divider__T5y5c {\n\t\theight: 20px;\n\t\tmin-height: 100%;\n\t\twidth: 1px;\n\t\tmin-width: 1px;\n\t\tmax-width: 1px;\n\t\tbackground: var(--core-surface-secondary);\n\t\tmargin: 0 8px;\n\t}\n}\n";
+var css = {"wrapper":"EditorButtonBar-module_wrapper__mfv-c flexBox-module_rowStart__nJZnW","right":"EditorButtonBar-module_right__G2tBZ flexBox-module_rowStart__nJZnW","left":"EditorButtonBar-module_left__9omfV flexBox-module_rowStart__nJZnW","buttonGroup":"EditorButtonBar-module_buttonGroup__p0aEd flexBox-module_rowStart__nJZnW"};
+styleInject_es.styleInject(css_248z);
+
+var FormattingOption;
+(function (FormattingOption) {
+    FormattingOption["hilight"] = "hilight";
+    FormattingOption["bold"] = "bold";
+    FormattingOption["italic"] = "italic";
+    FormattingOption["underline"] = "underline";
+    FormattingOption["strikethrough"] = "strikethrough";
+    FormattingOption["list"] = "list";
+    FormattingOption["orderedList"] = "ordered list";
+    FormattingOption["taskList"] = "task list";
+    FormattingOption["sinkList"] = "sink list";
+    FormattingOption["raiseList"] = "raise list";
+    FormattingOption["undo"] = "undo";
+    FormattingOption["redo"] = "redo";
+    FormattingOption["download"] = "download";
+    FormattingOption["more"] = "more";
+    FormattingOption["copy"] = "copy";
+    FormattingOption["link"] = "link";
+})(FormattingOption || (FormattingOption = {}));
+
+const coreButtons = {
+    link: {
+        icon: 'link',
+        toolTip: 'Link',
+        command: 'link',
+        id: FormattingOption.link,
+    },
+    hilight: {
+        icon: 'hilight',
+        toolTip: 'Highlight',
+        command: 'hilight',
+        id: FormattingOption.hilight,
+    },
+    bold: {
+        icon: 'bold',
+        toolTip: 'Bold',
+        command: 'bold',
+        id: FormattingOption.bold,
+        shortcut: { modifier: 'meta', key: 'b' },
+    },
+    italic: {
+        icon: 'italic',
+        toolTip: 'Italic',
+        command: 'italic',
+        id: FormattingOption.italic,
+        shortcut: { modifier: 'meta', key: 'i' },
+    },
+    underline: {
+        icon: 'underline',
+        toolTip: 'Underline',
+        command: 'underline',
+        id: FormattingOption.underline,
+        shortcut: { modifier: 'meta', key: 'u' },
+    },
+    strikethrough: {
+        icon: 'strike',
+        toolTip: 'Strikethrough',
+        command: 'strike',
+        id: FormattingOption.strikethrough,
+        shortcut: { modifier: 'meta', key: 's' },
+    },
+    list: {
+        icon: 'bullet list',
+        toolTip: 'List',
+        command: 'ulist',
+        id: FormattingOption.list,
+    },
+    orderedList: {
+        icon: 'numbered list',
+        toolTip: 'Ordered list',
+        command: 'olist',
+        id: FormattingOption.orderedList,
+    },
+    taskList: {
+        icon: 'task list',
+        toolTip: 'Task list',
+        command: 'task',
+        id: FormattingOption.taskList,
+    },
+    sinkList: {
+        icon: 'sink',
+        toolTip: 'Sink list item',
+        command: 'sink',
+        id: FormattingOption.sinkList,
+    },
+    raiseList: {
+        icon: 'lift',
+        toolTip: 'Raise list item',
+        command: 'raise',
+        id: FormattingOption.raiseList,
+    },
+    undo: {
+        icon: 'undo',
+        toolTip: 'Undo',
+        command: 'undo',
+        id: FormattingOption.undo,
+    },
+    redo: {
+        icon: 'redo',
+        toolTip: 'Redo',
+        command: 'redo',
+        id: FormattingOption.redo,
+    },
+    copy: {
+        icon: 'copy',
+        toolTip: 'Copy',
+        command: 'copy',
+        id: FormattingOption.copy,
+    },
+    download: {
+        icon: 'download',
+        toolTip: 'Download',
+        command: 'download',
+        id: FormattingOption.download,
+    },
+    more: {
+        icon: 'more',
+        toolTip: 'More Options',
+        command: 'more',
+        id: FormattingOption.more,
+    },
+};
+const styles = [
+    { label: 'Heading 1', value: 'h1', alt: 'h1' },
+    { label: 'Heading 2', value: 'h2', alt: 'h2' },
+    { label: 'Heading 3', value: 'h3', alt: 'h3' },
+    { label: 'Body', value: 'p', alt: 'p' },
+];
+const buttonGroups = {
+    format: {
+        buttons: [
+            coreButtons.hilight,
+            coreButtons.bold,
+            coreButtons.italic,
+            coreButtons.underline,
+            coreButtons.strikethrough,
+            coreButtons.link,
+        ],
+    },
+    lists: {
+        buttons: [coreButtons.list, coreButtons.orderedList, coreButtons.taskList],
+    },
+    listEdit: {
+        buttons: [coreButtons.sinkList, coreButtons.raiseList],
+    },
+    undo: {
+        buttons: [coreButtons.undo, coreButtons.redo],
+    },
+    more: {
+        buttons: [coreButtons.more],
+    },
+};
+const editControls = {
+    regular: {
+        styles,
+        buttons: [
+            buttonGroups.format,
+            buttonGroups.lists,
+            buttonGroups.listEdit,
+            buttonGroups.undo,
+        ],
+        download: coreButtons.download,
+    },
+    small: {
+        buttons: [buttonGroups.format, buttonGroups.more],
+        download: coreButtons.download,
+    },
+    medium: {
+        styles,
+        buttons: [buttonGroups.format, buttonGroups.lists],
+        download: coreButtons.download,
+    },
+};
+
+const EditorButtonBar = React.memo((props) => {
+    var _a;
+    const { onCommand = () => null, onToolTip = () => null, shortSize = 500, mediumSize = 664, state = 'auto', activeStyle = 'p', disabledFormats = [], activeFormats } = props, divAttributes = tslib_es6.__rest(props, ["onCommand", "onToolTip", "shortSize", "mediumSize", "state", "activeStyle", "disabledFormats", "activeFormats"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [barState, setBarState] = React.useState('regular');
+    const ref = React.useRef(null);
+    const size = hooks_useObserveResize.useObserveResize(ref);
+    React.useEffect(() => {
+        if (state !== 'auto')
+            setBarState(state);
+        else if (size.width < shortSize)
+            setBarState('small');
+        else if (size.width < mediumSize)
+            setBarState('medium');
+        else
+            setBarState('regular');
+    }, [size, shortSize, mediumSize, state]);
+    const handleStyleChange = React.useCallback((option) => {
+        switch (option.value) {
+            case 'h1':
+                onCommand('h1', undefined);
+                break;
+            case 'h2':
+                onCommand('h2', undefined);
+                break;
+            case 'h3':
+                onCommand('h3', undefined);
+                break;
+            case 'p':
+                onCommand('p', undefined);
+                break;
+        }
+    }, [onCommand]);
+    return (jsxRuntime.jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: divStyle, ref: ref }, rest, { children: [jsxRuntime.jsxs("div", { className: css.left, children: [(editControls === null || editControls === void 0 ? void 0 : editControls[barState].styles) && (jsxRuntime.jsx(DropDown.DropDown, { options: editControls === null || editControls === void 0 ? void 0 : editControls[barState].styles, placeholder: false, unframed: true, width: '100px', selectedValue: activeStyle, onChange: (_index, option) => handleStyleChange(option) })), (_a = editControls === null || editControls === void 0 ? void 0 : editControls[barState].buttons) === null || _a === void 0 ? void 0 : _a.map((group, index) => {
+                        return (jsxRuntime.jsx(RenderGroup, { onCommand: onCommand, onToolTip: onToolTip, buttonGroup: group, activeFormats: activeFormats, disabledFormats: disabledFormats, state: barState }, `button-group-${group.name}${index}`));
+                    })] }), (editControls === null || editControls === void 0 ? void 0 : editControls[barState].download) && (jsxRuntime.jsxs("div", { className: css.right, children: [jsxRuntime.jsx(IconButton.IconButton, { icon: coreButtons.copy.icon, tooltip: coreButtons.copy.toolTip, hover: disabledFormats.includes('download'), toggle: false, onToolTip: onToolTip, disabled: disabledFormats.includes('copy'), onClick: (e) => onCommand(coreButtons.copy.command, e) }), jsxRuntime.jsx(IconButton.IconButton, { icon: coreButtons.download.icon, tooltip: coreButtons.download.toolTip, hover: !disabledFormats.includes('download'), toggle: false, onToolTip: onToolTip, disabled: disabledFormats.includes('download'), onClick: (e) => onCommand(coreButtons.download.command, e) })] }))] })));
+});
+const RenderGroup = React.memo((props) => {
+    var _a;
+    const { onCommand = () => null, onToolTip = () => null, buttonGroup, activeFormats, state = 'default', disabledFormats = [], } = props;
+    const theme = hooks_useTheme.useTheme();
+    return (jsxRuntime.jsxs("div", { className: css.buttonGroup, children: [state !== 'small' && jsxRuntime.jsx("div", { className: "divider" }), (_a = buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.buttons) === null || _a === void 0 ? void 0 : _a.map((button, index) => {
+                const active = (button === null || button === void 0 ? void 0 : button.id) ? activeFormats === null || activeFormats === void 0 ? void 0 : activeFormats.includes(button.id) : false;
+                const bgColor = active
+                    ? theme.current.colors['core-surface-secondary']
+                    : 'transparent';
+                return (jsxRuntime.jsx(IconButton.IconButton, { icon: button === null || button === void 0 ? void 0 : button.icon, tooltip: button === null || button === void 0 ? void 0 : button.toolTip, onToolTip: onToolTip, hover: !disabledFormats.includes(button.id || 'none'), toggle: false, bgColor: bgColor, onClick: (e) => onCommand(button === null || button === void 0 ? void 0 : button.command, e), disabled: disabledFormats.includes(button.id || 'none'), frameSize: 30, iconSize: 20 }, `button-${button === null || button === void 0 ? void 0 : button.icon}-${index}`));
+            })] }));
+});
+
+exports.EditorButtonBar = EditorButtonBar;

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var React = require('react');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".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_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\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: 650;\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: 560;\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: 560;\n\tfont-size: 28px;\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: 650;\n\tfont-size: 28px;\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";
+var css = {"errorBox":"ErrorSummary-module_errorBox__-R7XM flexBox-module_columnStart__Kg8cV type-module_body-m-regular__Qtp5G","error":"ErrorSummary-module_error__YCQLh flexBox-module_columnStart__Kg8cV","p":"ErrorSummary-module_p__lbLpS type-module_body-m-regular__Qtp5G","strong":"ErrorSummary-module_strong__XVtAe type-module_body-m-bold__0lZ3I","ul":"ErrorSummary-module_ul__d0xoc","li":"ErrorSummary-module_li__jym6S type-module_body-m-regular__Qtp5G"};
+styleInject_es.styleInject(css_248z);
+
+const ErrorSummary = React.memo((props) => {
+    const { entries, errors = [] } = props, divAttributes = tslib_es6.__rest(props, ["entries", "errors"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    // memo animation variants
+    const variants = React.useMemo(() => ({
+        enter: { opacity: 0, maxHeight: 0 },
+        animate: { opacity: 1, maxHeight: 500 },
+        exit: { opacity: 0, maxHeight: 0 },
+    }), []);
+    // memo trans
+    const transition = React.useMemo(() => ({ ease: 'easeInOut', duration: 0.25 }), []);
+    const renderedErrors = React.useMemo(() => {
+        if (!entries)
+            return null;
+        return entries.map((error, index) => {
+            var _a;
+            if (errors.includes(index) || errors.includes(error.id)) {
+                return (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: (_a = error.bullets) === null || _a === void 0 ? void 0 : _a.map((bullet, index) => {
+                                return (jsxRuntime.jsx("li", { className: css.li, children: bullet }, `${error.title}_bullet_${index}`));
+                            }) })] }, `${error.id}_${index}`));
+            }
+            return null;
+        });
+    }, [entries, errors]);
+    return (jsxRuntime.jsx(react.AnimatePresence, { initial: false, 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/FlexDiv-DZBpswHV.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var React = require('react');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".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_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\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: 650;\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: 560;\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: 560;\n\tfont-size: 28px;\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: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.FlexDiv-module_flexDiv__VNfVQ {\n\t&::-webkit-scrollbar {\n\t\tbackground-color: var(--flex-div-bg);\n\t\twidth: 14px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground-color: var(--flex-div-scroll-border);\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: var(--flex-div-scroll-handle);\n\t\tborder-radius: 20px;\n\t\tborder: 4px solid var(--flex-div-scroll-border);\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground-color: var(--flex-div-scroll-handle-hover);\n\t\tborder-radius: 20px;\n\t\tborder: 4px solid var(--flex-div-scroll-border);\n\t\tcursor: default;\n\t}\n}\n";
+var css = {"flexDiv":"FlexDiv-module_flexDiv__VNfVQ type-module_body-m-regular__Qtp5G"};
+styleInject_es.styleInject(css_248z);
+
+// Extract helper functions outside component
+function setSize(style, isHeight) {
+    if (typeof style === 'number')
+        return `${style}px`;
+    if (style === 'grow')
+        return 'unset';
+    if (style === 'fill')
+        return '100%';
+    if (style === 'fit')
+        return 'auto';
+    if (style === 'viewport')
+        return isHeight ? '100vh' : '100vw';
+    return style;
+}
+function setBox(style) {
+    if (typeof style === 'number')
+        return `${style}px`;
+    return style;
+}
+function setFlex(style) {
+    if (style === 'start' || style === 'top')
+        return 'flex-start';
+    if (style === 'end' || style === 'bottom')
+        return 'flex-end';
+    if (style === 'between')
+        return 'space-between';
+    return style;
+}
+const FlexDiv = React.memo(React.forwardRef((props, ref) => {
+    const { children, scrollY = false, scrollX = false, background = 'var(--core-surface-primary)', direction = 'column', alignItems = 'start', justify = 'start', height = 'fit', width = 'fill', maxWidth = undefined, centerSelf = undefined, wrap = false, reverse = false, padding = 0, margin = 0, absolute = false, flex, gap, variants, transition, animate, enter, exit, border, borderRadius, className, scrollHandle, scrollHandleHover } = props, divAttributes = tslib_es6.__rest(props, ["children", "scrollY", "scrollX", "background", "direction", "alignItems", "justify", "height", "width", "maxWidth", "centerSelf", "wrap", "reverse", "padding", "margin", "absolute", "flex", "gap", "variants", "transition", "animate", "enter", "exit", "border", "borderRadius", "className", "scrollHandle", "scrollHandleHover"]);
+    const { id: divId, style: userStyle } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "style"]);
+    const wrapperStyle = userStyle !== null && userStyle !== void 0 ? userStyle : {};
+    // Memoize layout
+    const style = React.useMemo(() => {
+        return {
+            display: 'flex',
+            position: `${absolute ? 'absolute' : 'relative'}`,
+            flexDirection: `${direction}${reverse ? '-reverse' : ''}`,
+            flexWrap: `${wrap ? 'wrap' : 'nowrap'}`,
+            justifyContent: `${setFlex(justify)}`,
+            alignItems: `${setFlex(alignItems)}`,
+            boxSizing: 'border-box',
+            padding: `${setBox(padding)}`,
+            margin: centerSelf ? '0 auto' : `${setBox(margin)}`,
+            width: `${absolute ? 'unset' : setSize(width, false)}`,
+            height: `${absolute ? 'unset' : setSize(height, true)}`,
+            maxWidth: `${maxWidth ? setSize(maxWidth, false) : 'unset'}`,
+            flex: `${absolute ? 'unset' : (flex !== null && flex !== void 0 ? flex : 'unset')}`,
+            top: `${absolute ? '0' : 'unset'}`,
+            bottom: `${absolute ? '0' : 'unset'}`,
+            left: `${absolute ? '0' : 'unset'}`,
+            right: `${absolute ? '0' : 'unset'}`,
+            gap: gap ? `${gap}px` : 'unset',
+            border: `${border !== null && border !== void 0 ? border : 'unset'}`,
+            background: `${background !== null && background !== void 0 ? background : 'transparent'}`,
+            overflow: 'hidden',
+            overflowY: `${scrollY ? 'auto' : 'unset'}`,
+            overflowX: `${scrollX ? 'auto' : 'unset'}`,
+            borderRadius: borderRadius ? `${borderRadius}px` : 'unset',
+            color: 'var(--core-text-primary)',
+            '--flex-div-scroll-border': `${background !== null && background !== void 0 ? background : 'transparent'}`,
+            '--flex-div-scroll-handle': `${scrollHandle !== null && scrollHandle !== void 0 ? scrollHandle : 'var(--scroll-bar)'}`,
+            '--flex-div-scroll-handle-hover': `${scrollHandleHover !== null && scrollHandleHover !== void 0 ? scrollHandleHover : 'var(--scroll-bar-hover)'}`,
+        };
+    }, [
+        absolute,
+        direction,
+        reverse,
+        wrap,
+        justify,
+        alignItems,
+        padding,
+        margin,
+        width,
+        height,
+        flex,
+        gap,
+        border,
+        background,
+        scrollY,
+        scrollX,
+        centerSelf,
+        maxWidth,
+        scrollHandle,
+        scrollHandleHover,
+        borderRadius,
+    ]);
+    return (jsxRuntime.jsx(react.motion.div, Object.assign({ id: divId, ref: ref, className: `${css.flexDiv} ${className !== null && className !== void 0 ? className : ''}`, style: Object.assign(Object.assign({}, wrapperStyle), style), transition: transition, variants: variants, initial: enter, animate: animate, exit: exit }, rest, { children: children })));
+}));
+
+exports.FlexDiv = FlexDiv;

package/dist/cjs/chunks/Grouper-_kd2nU78.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var React = require('react');
+var hooks_useTheme = require('../hooks/useTheme.js');
+require('../theme/colors.js');
+require('../hooks/useWindow.js');
+var Badge = require('./Badge-CMapJCij.js');
+var _types = require('./_types-CoWzQFsT.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".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_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\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: 650;\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: 560;\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: 560;\n\tfont-size: 28px;\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: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Grouper-module_header__NPgUW {\n\twidth: 100%;\n\tcursor: pointer;\n}\n\n.Grouper-module_title__-bt06 {\n\tcolor: var(--core-text-primary);\n\tflex: 1;\n}\n\n.Grouper-module_content__u2SN7 {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tpadding: 0 24px !important;\n\twidth: 100%;\n\tgap: 6px;\n\theight: var(--grouper-height);\n\tborder-top: var(--grouper-border) solid var(--core-outline-primary);\n}\n\n.Grouper-module_icon__7YSLa {\n\tmin-height: var(--grouper-icon-size);\n\theight: var(--grouper-icon-size);\n\tmin-width: var(--grouper-icon-size);\n\twidth: var(--grouper-icon-size);\n}\n";
+var css = {"header":"Grouper-module_header__NPgUW flexBox-module_rowBetween__27lKK","title":"Grouper-module_title__-bt06 flexBox-module_rowBetween__27lKK type-module_body-m-regular__Qtp5G","content":"Grouper-module_content__u2SN7 flexBox-module_rowBetween__27lKK","icon":"Grouper-module_icon__7YSLa flexBox-module_row__PWxbe"};
+styleInject_es.styleInject(css_248z);
+
+const Grouper = React.memo((props) => {
+    const { title = 'Group Title', toggle = true, open = true, hasIcon = true, iconName = 'chevron down', iconSize = 18, frameSize = 64, border = 0, count = 0, unframed = false, hideNull = true, showFilterBadge = false, onChange = () => null, onClick = () => null } = props, divAttributes = tslib_es6.__rest(props, ["title", "toggle", "open", "hasIcon", "iconName", "iconSize", "frameSize", "border", "count", "unframed", "hideNull", "showFilterBadge", "onChange", "onClick"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const theme = hooks_useTheme.useTheme();
+    const [state, setState] = React.useState(open);
+    const [icon, animateIcon] = react.useAnimate();
+    React.useEffect(() => setState(open), [open]);
+    const animate = React.useCallback((state) => {
+        const animation = { rotate: state ? 0 : 180 };
+        animateIcon(icon.current, Object.assign({}, animation), { ease: 'easeInOut', duration: 0.25 });
+    }, [animateIcon, icon]);
+    const handleToggle = React.useCallback(() => {
+        if (!toggle)
+            return;
+        onClick();
+        onChange(!state);
+        animate(!state);
+        setState(!state);
+    }, [toggle, onClick, onChange, state, animate]);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--grouper-height': unframed ? 'auto' : `${frameSize}px`,
+            '--grouper-border': border ? `${border}px` : '0',
+            '--grouper-icon-size': `${iconSize}px`,
+        };
+    }, [frameSize, iconSize, border, unframed]);
+    return (jsxRuntime.jsx("div", Object.assign({ id: divId, className: `${css.header}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onClick: handleToggle, onKeyDown: handleToggle }, rest, { children: jsxRuntime.jsxs("div", { className: css.content, children: [jsxRuntime.jsxs("div", { className: css.title, children: [title, jsxRuntime.jsx(Badge.Badge, { hideNull: hideNull, count: count, variant: 'light' }), showFilterBadge && (jsxRuntime.jsx(_types.Icon, { name: "filter", size: 16, strokeColor: theme.current.colors['core-text-disabled'] }))] }), hasIcon && (jsxRuntime.jsx("div", { ref: icon, className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: iconName, size: iconSize }) }))] }) })));
+});
+
+exports.Grouper = Grouper;

package/dist/cjs/chunks/IconButton-BfsPlKTb.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var React = require('react');
+var Badge = require('./Badge-CMapJCij.js');
+var Dot = require('./Dot-Dnr9M9na.js');
+var _types = require('./_types-CoWzQFsT.js');
+var sharedTypes = require('./sharedTypes-BvTjh6M5.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".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_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\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: 650;\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: 560;\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: 560;\n\tfont-size: 28px;\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: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.IconButton-module_button__Mq4Gd {\n\tposition: relative;\n\tbackground: var(--ib-bg);\n\tborder-radius: var(--ib-border-radius);\n\tborder: var(--ib-border) solid var(--core-outline-primary);\n\tgap: 6px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: var(--ib-bg-hover);\n\t}\n}\n\n.IconButton-module_label__piWOE {\n\tcolor: var(--ib-color);\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\tword-break: break-all;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n}\n\n.IconButton-module_icon__EQ8vW {\n\tmin-height: var(--ib-icon-size);\n\theight: var(--ib-icon-size);\n\tmin-width: var(--ib-icon-size);\n\twidth: var(--ib-icon-size);\n}\n\n.IconButton-module_count__BhOlH {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(5px) translateY(-2px);\n}\n";
+var css = {"button":"IconButton-module_button__Mq4Gd flexBox-module_row__PWxbe","label":"IconButton-module_label__piWOE flexBox-module_row__PWxbe type-module_body-l-regular__Ar4d3","icon":"IconButton-module_icon__EQ8vW flexBox-module_row__PWxbe","count":"IconButton-module_count__BhOlH flexBox-module_row__PWxbe"};
+styleInject_es.styleInject(css_248z);
+
+const IconButton = React.memo((props) => {
+    const { frameSize = 36, iconSize = 20, icon = 'more', borderRadius = 4, tooltip = undefined, color = undefined, colorOn = undefined, bgColor = 'var(--core-surface-secondary)', bgColorHover = 'var(--core-outline-primary)', bgColorOn = 'var(--core-outline-primary)', transition = undefined, variants = undefined, initial = undefined, animate = undefined, exit = undefined, fillColor = undefined, label = undefined, hover = undefined, count = 0, toggle = true, toggleIcon = false, isToggled = false, disabled = false, showDot = false, border = false, onClick = () => null, onToolTip = () => null } = props, divAttributes = tslib_es6.__rest(props, ["frameSize", "iconSize", "icon", "borderRadius", "tooltip", "color", "colorOn", "bgColor", "bgColorHover", "bgColorOn", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "border", "onClick", "onToolTip"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [on, setOn] = React.useState(isToggled);
+    const ref = React.useRef(null);
+    React.useEffect(() => setOn(isToggled), [isToggled]);
+    const handleClick = React.useCallback((e) => {
+        if (disabled)
+            return;
+        if (tooltip)
+            onToolTip(null);
+        setOn(!on);
+        onClick(e);
+    }, [disabled, tooltip, onToolTip, on, onClick]);
+    const handleMouseEnter = React.useCallback((e) => {
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current) || !tooltip)
+            return;
+        const tip = {
+            type: sharedTypes.ToolTipType.button,
+            payload: { label: tooltip },
+            event: e,
+            ref: ref,
+        };
+        onToolTip(tip);
+    }, [tooltip, onToolTip]);
+    const handleMouseLeave = React.useCallback(() => {
+        if (tooltip)
+            onToolTip(null);
+    }, [tooltip, onToolTip]);
+    // memo icon stroke color
+    const strokeColor = React.useMemo(() => color || 'var(--core-icon-primary)', [color]);
+    // memo bg color
+    const bgColorNormal = React.useMemo(() => {
+        if (on && toggle)
+            return bgColorOn;
+        return bgColor !== null && bgColor !== void 0 ? bgColor : 'var(--core-surface-secondary)';
+    }, [toggle, bgColorOn, bgColor, on]);
+    // memo bg color on hover
+    const bgHoverColor = React.useMemo(() => {
+        if (hover && on)
+            return bgColorOn;
+        if (hover)
+            return bgColorHover;
+        return bgColor !== null && bgColor !== void 0 ? bgColor : 'transparent';
+    }, [hover, bgColor, bgColorOn, bgColorHover, on]);
+    // memo text color selected / unselected
+    const textColor = React.useMemo(() => {
+        if (toggle && on)
+            return colorOn;
+        return color !== null && color !== void 0 ? color : 'var(--core-text-primary)';
+    }, [toggle, on, colorOn, color]);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--ib-bg': bgColorNormal,
+            '--ib-bg-hover': bgHoverColor,
+            '--ib-icon-size': `${frameSize !== null && frameSize !== void 0 ? frameSize : 0}px`,
+            '--ib-border-radius': `${borderRadius !== null && borderRadius !== void 0 ? borderRadius : 0}px`,
+            '--ib-border': border ? '1px' : 0,
+            '--ib-color': textColor,
+        };
+    }, [bgColorNormal, bgHoverColor, textColor, border, frameSize, borderRadius]);
+    return (jsxRuntime.jsxs(react.motion.div, Object.assign({ id: divId, className: `${css.button}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onClick: handleClick, onMouseLeave: handleMouseLeave, onMouseEnter: handleMouseEnter, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, ref: ref }, rest, { children: [jsxRuntime.jsx("div", { className: css.icon, style: { opacity: disabled ? 0.3 : 1 }, children: jsxRuntime.jsx(_types.Icon, { name: icon, strokeColor: strokeColor, fillColor: fillColor, disabled: disabled, size: iconSize, toggle: toggleIcon ? isToggled : false, pointer: true }) }), label && jsxRuntime.jsx("div", { className: css.label, children: label }), jsxRuntime.jsx(Dot.Dot, { show: showDot }), count !== 0 && (jsxRuntime.jsx("div", { className: css.count, children: jsxRuntime.jsx(Badge.Badge, { variant: 'light', count: count, hideNull: true }) }))] })));
+});
+
+exports.IconButton = IconButton;