@apple-pie/slice 0.0.0 → 0.0.2

package/dist/esm/chunks/DropDown-D4t6EhKL.js

@@ -0,0 +1,152 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme.js';
+import '../theme/colors.js';
+import '../hooks/useWindow.js';
+import { I as Icon } from './_types-BaYeLEWK.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.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.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";
+var 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(css_248z);
+
+const DropDown = React.memo((props) => {
+    const theme = useTheme();
+    const { name = 'Select', width = '100%', height = 'auto', selectedIndex = 0, selectedValue = '', options = [], placeholder = true, validate = true, borderRadius = 4, bgColor = 'transparent', iconColor = theme.current.colors['core-icon-primary'], paddingLeft = '8px', paddingRight = '12px', paddingTops = '8px', iconSize = 20, disabled = false, unframed = false, focused = false, gap = 0, size = 'medium', onChange = () => null, onValidate = () => null, onFocus = () => null, onBlur = () => null } = props, divAttributes = __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"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [index, setIndex] = useState(selectedIndex);
+    const [selectedText, setSelectedText] = useState('Select an option');
+    const [initiated, setInitiated] = useState(false);
+    const [color, setColor] = useState(iconColor);
+    const ref = useRef(null);
+    useEffect(() => setColor(theme.current.colors['core-icon-primary']), [theme]);
+    // validate selection and if there's a placeholder
+    // with a validate flag, set error state and event error
+    useEffect(() => {
+        let valid = true;
+        if (validate && placeholder && index === 0)
+            valid = false;
+        if (!initiated)
+            valid = true;
+        onValidate(valid);
+    }, [index, validate, placeholder, initiated, onValidate]);
+    // set focus
+    useEffect(() => {
+        if (focused && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+            setInitiated(true);
+            ref.current.click();
+        }
+    }, [focused]);
+    // set selected by index
+    useEffect(() => {
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
+            if (!(options === null || options === void 0 ? void 0 : options[selectedIndex]))
+                return;
+            const label = options[selectedIndex].label || 'Select an option';
+            setIndex(selectedIndex);
+            setSelectedText(label);
+            ref.current.selectedIndex = selectedIndex;
+        }
+    }, [selectedIndex, options]);
+    // set selected by value - FIXED: potential infinite loop
+    useEffect(() => {
+        if (!options || options.length === 0 || selectedValue === '')
+            return;
+        const foundIndex = options.findIndex((option) => {
+            var _a, _b, _c;
+            return ((_a = option === null || option === void 0 ? void 0 : option.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) ===
+                selectedValue.toString().toLowerCase() ||
+                ((_b = option === null || option === void 0 ? void 0 : option.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) ===
+                    selectedValue.toString().toLowerCase() ||
+                ((_c = option === null || option === void 0 ? void 0 : option.alt) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === selectedValue.toString().toLowerCase();
+        });
+        if (foundIndex !== -1) {
+            const label = options[foundIndex].label || 'Select an option';
+            setSelectedText(label);
+            setIndex(foundIndex);
+            if (ref.current)
+                ref.current.selectedIndex = foundIndex;
+        }
+    }, [selectedValue, options]);
+    // memo on change
+    const handleChange = useCallback((i) => {
+        if (!options)
+            return;
+        const label = options[i].label || 'Select an option';
+        setIndex(i);
+        setSelectedText(label);
+        if (index !== i)
+            onChange(i, options[i]);
+        onBlur(options[i].label || '');
+    }, [options, index, onChange, onBlur]);
+    // memo focus
+    const handleFocus = useCallback(() => {
+        setInitiated(true);
+        onFocus();
+    }, [onFocus]);
+    // Memoize renderOptions
+    const renderedOptions = useMemo(() => {
+        if (!options)
+            return null;
+        return options.map((option, i) => (jsx("option", { value: option === null || option === void 0 ? void 0 : option.value, onMouseUp: () => handleChange(i), children: option === null || option === void 0 ? void 0 : option.label }, `${option === null || option === void 0 ? void 0 : option.value}_${i}`)));
+    }, [options, handleChange]);
+    // Memoize displayed text
+    const displayText = useMemo(() => selectedText.replace('-- ', ''), [selectedText]);
+    // Memoize handleMouseDown
+    const handleMouseDown = useCallback((e) => {
+        if (disabled)
+            e.preventDefault();
+        handleFocus();
+    }, [disabled, handleFocus]);
+    // Memoize onChange handler
+    const handleSelectChange = useCallback((e) => {
+        handleChange(e.target.selectedIndex);
+    }, [handleChange]);
+    const getSize = useCallback((value) => {
+        if (typeof value === 'string')
+            return value;
+        return `${value}px`;
+    }, []);
+    const cssVars = useMemo(() => {
+        return {
+            '--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': bgColor !== null && bgColor !== void 0 ? 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 && index === 0
+                ? 'var(--core-text-tertiary)'
+                : 'var(--core-text-primary)',
+        };
+    }, [
+        gap,
+        height,
+        width,
+        borderRadius,
+        bgColor,
+        paddingLeft,
+        paddingRight,
+        paddingTops,
+        unframed,
+        placeholder,
+        iconSize,
+        index,
+        getSize,
+    ]);
+    return (jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars) }, rest, { children: [jsx("div", { className: `${css.face} ${css[size]}`, children: displayText }), jsx("div", { className: css.chevron, children: jsx(Icon, { name: "chevron down", size: iconSize, strokeColor: color }) }), jsx("select", { className: css.select, defaultValue: index, ref: ref, onFocus: handleFocus, onMouseDown: handleMouseDown, onChange: handleSelectChange, "aria-label": name, children: renderedOptions })] })));
+});
+DropDown.displayName = 'DropDown';
+
+export { DropDown as D };

package/dist/esm/chunks/EditorButtonBar-FnMa8Zv2.js

@@ -0,0 +1,242 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useTheme } from '../hooks/useTheme.js';
+import '../theme/colors.js';
+import '../hooks/useWindow.js';
+import { useObserveResize } from '../hooks/useObserveResize.js';
+import { D as DropDown } from './DropDown-D4t6EhKL.js';
+import { I as IconButton } from './IconButton-CguHGkBM.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.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(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 = __rest(props, ["onCommand", "onToolTip", "shortSize", "mediumSize", "state", "activeStyle", "disabledFormats", "activeFormats"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [barState, setBarState] = useState('regular');
+    const ref = useRef(null);
+    const size = useObserveResize(ref);
+    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 = 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 (jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: divStyle, ref: ref }, rest, { children: [jsxs("div", { className: css.left, children: [(editControls === null || editControls === void 0 ? void 0 : editControls[barState].styles) && (jsx(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 (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) && (jsxs("div", { className: css.right, children: [jsx(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) }), jsx(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 = useTheme();
+    return (jsxs("div", { className: css.buttonGroup, children: [state !== 'small' && 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 (jsx(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}`));
+            })] }));
+});
+
+export { EditorButtonBar as E };

package/dist/esm/chunks/ErrorSummary-DhU5SKPt.js

@@ -0,0 +1,40 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'motion/react';
+import React, { useMemo } from 'react';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.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(css_248z);
+
+const ErrorSummary = React.memo((props) => {
+    const { entries, errors = [] } = props, divAttributes = __rest(props, ["entries", "errors"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    // memo animation variants
+    const variants = useMemo(() => ({
+        enter: { opacity: 0, maxHeight: 0 },
+        animate: { opacity: 1, maxHeight: 500 },
+        exit: { opacity: 0, maxHeight: 0 },
+    }), []);
+    // memo trans
+    const transition = useMemo(() => ({ ease: 'easeInOut', duration: 0.25 }), []);
+    const renderedErrors = useMemo(() => {
+        if (!entries)
+            return null;
+        return entries.map((error, index) => {
+            var _a;
+            if (errors.includes(index) || errors.includes(error.id)) {
+                return (jsxs("div", { className: css.error, children: [jsx("p", { className: css.p, children: jsx("strong", { className: css.strong, children: error.title }) }), jsx("ul", { className: css.ul, children: (_a = error.bullets) === null || _a === void 0 ? void 0 : _a.map((bullet, index) => {
+                                return (jsx("li", { className: css.li, children: bullet }, `${error.title}_bullet_${index}`));
+                            }) })] }, `${error.id}_${index}`));
+            }
+            return null;
+        });
+    }, [entries, errors]);
+    return (jsx(AnimatePresence, { initial: false, children: entries && errors && errors.length > 0 && (jsx(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 }))) }));
+});
+
+export { ErrorSummary as E };

package/dist/esm/chunks/FlexDiv-CmMpORgn.js

@@ -0,0 +1,101 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsx } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import React, { useMemo } from 'react';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.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(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 = __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 = __rest(divAttributes, ["id", "style"]);
+    const wrapperStyle = userStyle !== null && userStyle !== void 0 ? userStyle : {};
+    // Memoize layout
+    const style = 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 (jsx(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 })));
+}));
+
+export { FlexDiv as F };

package/dist/esm/chunks/Grouper-BbreOXI9.js

@@ -0,0 +1,48 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useAnimate } from 'motion/react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme.js';
+import '../theme/colors.js';
+import '../hooks/useWindow.js';
+import { B as Badge } from './Badge-PPf5Uvw3.js';
+import { I as Icon } from './_types-BaYeLEWK.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.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(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 = __rest(props, ["title", "toggle", "open", "hasIcon", "iconName", "iconSize", "frameSize", "border", "count", "unframed", "hideNull", "showFilterBadge", "onChange", "onClick"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const theme = useTheme();
+    const [state, setState] = useState(open);
+    const [icon, animateIcon] = useAnimate();
+    useEffect(() => setState(open), [open]);
+    const animate = useCallback((state) => {
+        const animation = { rotate: state ? 0 : 180 };
+        animateIcon(icon.current, Object.assign({}, animation), { ease: 'easeInOut', duration: 0.25 });
+    }, [animateIcon, icon]);
+    const handleToggle = useCallback(() => {
+        if (!toggle)
+            return;
+        onClick();
+        onChange(!state);
+        animate(!state);
+        setState(!state);
+    }, [toggle, onClick, onChange, state, animate]);
+    // memo css vars
+    const cssVars = useMemo(() => {
+        return {
+            '--grouper-height': unframed ? 'auto' : `${frameSize}px`,
+            '--grouper-border': border ? `${border}px` : '0',
+            '--grouper-icon-size': `${iconSize}px`,
+        };
+    }, [frameSize, iconSize, border, unframed]);
+    return (jsx("div", Object.assign({ id: divId, className: `${css.header}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onClick: handleToggle, onKeyDown: handleToggle }, rest, { children: jsxs("div", { className: css.content, children: [jsxs("div", { className: css.title, children: [title, jsx(Badge, { hideNull: hideNull, count: count, variant: 'light' }), showFilterBadge && (jsx(Icon, { name: "filter", size: 16, strokeColor: theme.current.colors['core-text-disabled'] }))] }), hasIcon && (jsx("div", { ref: icon, className: css.icon, children: jsx(Icon, { name: iconName, size: iconSize }) }))] }) })));
+});
+
+export { Grouper as G };