@apple-pie/slice 0.0.1 → 0.0.2

package/dist/cjs/chunks/UIButton-CH4p-8yq.js

@@ -0,0 +1,317 @@
+'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 Dot = require('./Dot-Dnr9M9na.js');
+var _types = require('./_types-CoWzQFsT.js');
+var ProgressIndicator = require('./ProgressIndicator-C5oB7Mky.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.UIButton-module_button__nAcQH {\n\tposition: relative;\n\tuser-select: none;\n\tmin-width: var(--ui-button-min-width);\n\t-webkit-user-select: none;\n}\n\n.UIButton-module_label__q4X-J {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\tword-break: break-all;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\t&:hover {\n\t\ttext-decoration: var(--ui-button-decoration);\n\t}\n}\n\n.UIButton-module_count__AvZ7Z {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(10px) translateY(-2px);\n}\n\n.UIButton-module_icon__An3R1 {\n\tmin-width: var(--ui-button-icon-size);\n\tmin-height: var(--ui-button-icon-size);\n\theight: var(--ui-button-icon-size);\n\twidth: var(--ui-button-icon-size);\n}\n\n.UIButton-module_m__6qPGY {\n}\n\n.UIButton-module_l__8Pu8o {\n}\n\n.UIButton-module_s__YShP1 {\n}\n";
+var css = {"button":"UIButton-module_button__nAcQH flexBox-module_row__PWxbe","label":"UIButton-module_label__q4X-J","count":"UIButton-module_count__AvZ7Z flexBox-module_row__PWxbe","icon":"UIButton-module_icon__An3R1 flexBox-module_row__PWxbe","m":"UIButton-module_m__6qPGY type-module_body-m-regular__Qtp5G","l":"UIButton-module_l__8Pu8o type-module_body-l-regular__Ar4d3","s":"UIButton-module_s__YShP1 type-module_body-s-regular__8-FO-"};
+styleInject_es.styleInject(css_248z);
+
+const UIButtonComponent = React.forwardRef((props, buttonRef) => {
+    const theme = hooks_useTheme.useTheme();
+    const { size = 'medium', variant = 'outline', label = undefined, labelSize = 'm', iconRight = undefined, iconLeft = undefined, count = props.count === undefined ? undefined : Number(props.count), showDot = undefined, tooltip = undefined, round = false, state = 'normal', fill = false, iconSize = props.iconSize === undefined ? 20 : Number(props.iconSize), width = 'auto', underline = false, borderRadius = undefined, iconColor = undefined, bgColor = undefined, bgColorDisabled = undefined, labelColor = undefined, transition = undefined, variants = undefined, initial = undefined, animate = undefined, exit = undefined, paddingRight = undefined, paddingLeft = undefined, progress = false, working = false, duration = undefined, trigger = false, destructive = false, onClick = () => null, onToolTip = () => null } = props, divAttributes = tslib_es6.__rest(props, ["size", "variant", "label", "labelSize", "iconRight", "iconLeft", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "iconColor", "bgColor", "bgColorDisabled", "labelColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "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 [btnState, setBtnState] = React.useState(state);
+    const [btnWidth, setBtnWidth] = React.useState(undefined);
+    const [playing, setPlaying] = React.useState(working);
+    const ref = React.useRef(null);
+    const handleClick = React.useCallback((e) => {
+        onToolTip(null);
+        if (state === 'disabled')
+            return;
+        if (progress && duration) {
+            setPlaying(true);
+        }
+        else {
+            onClick(e);
+        }
+    }, [onToolTip, state, progress, duration, onClick]);
+    React.useEffect(() => setBtnState(state), [state]);
+    React.useEffect(() => setPlaying(working), [working]);
+    // memo button width - note the inclusion of unnecessary dependencies for story book purposes
+    // biome-ignore lint/correctness/useExhaustiveDependencies: avoid expensive observers
+    React.useEffect(() => {
+        if (!variant || !size || !labelSize)
+            return;
+        if (ref === null || ref === void 0 ? void 0 : ref.current)
+            setBtnWidth(ref.current.offsetWidth);
+        else
+            setBtnWidth(width);
+    }, [width, variant, labelSize, size, iconLeft, iconRight]);
+    React.useImperativeHandle(buttonRef, () => ({
+        triggerClick: () => handleClick(undefined),
+    }));
+    React.useEffect(() => {
+        if (trigger)
+            handleClick(undefined);
+    }, [trigger, handleClick]);
+    // memo destructive check
+    const destructiveColor = React.useCallback((icon) => {
+        if (icon && variant === 'solid') {
+            return theme.current.colors['core-text-light'];
+        }
+        if (destructive)
+            return theme.current.colors['feedback-warning'];
+        return theme.current.colors['core-text-primary'];
+    }, [destructive, theme, variant]);
+    // memo solid styles
+    const solid = React.useMemo(() => {
+        return {
+            border: '0px',
+            iconColor: {
+                normal: iconColor || destructiveColor(true),
+                hover: iconColor || destructiveColor(true),
+                disabled: iconColor || destructiveColor(true),
+            },
+            background: {
+                normal: bgColor ||
+                    (destructive
+                        ? 'var(--feedback-warning)'
+                        : 'var(--core-button-primary)'),
+                hover: bgColor ||
+                    (destructive
+                        ? 'var(--feedback-warning)'
+                        : 'var(--core-button-primary)'),
+                disabled: bgColorDisabled || 'var(--core-button-disabled)',
+            },
+            borderColor: {
+                normal: 'transparent',
+                hover: 'transparent',
+                disabled: 'transparent',
+            },
+            color: {
+                normal: labelColor || (destructive ? 'white' : 'var(--core-text-light)'),
+                hover: labelColor || (destructive ? 'white' : 'var(--core-text-light)'),
+                disabled: 'var(--core-text-disabled)',
+            },
+        };
+    }, [
+        labelColor,
+        destructive,
+        destructiveColor,
+        bgColor,
+        bgColorDisabled,
+        iconColor,
+    ]);
+    // memo outline styles
+    const outline = React.useMemo(() => {
+        return {
+            border: '1px',
+            iconColor: {
+                normal: iconColor || destructiveColor(true),
+                hover: iconColor || destructiveColor(true),
+                disabled: iconColor || 'var(--core-text-disabled)',
+            },
+            background: {
+                normal: bgColor || 'var(--core-surface-primary)',
+                hover: bgColor || 'var(--core-surface-primary)',
+                disabled: bgColorDisabled || 'var(--core-surface-primary)',
+            },
+            borderColor: {
+                normal: destructive
+                    ? 'var(--feedback-warning)'
+                    : 'var(--core-outline-primary)',
+                hover: destructive
+                    ? 'var(--feedback-warning)'
+                    : 'var(--core-outline-primary)',
+                disabled: 'var(--core-outline-primary)',
+            },
+            color: {
+                normal: labelColor ||
+                    (destructive
+                        ? 'var(--feedback-warning)'
+                        : 'var(--core-text-primary)'),
+                hover: labelColor ||
+                    (destructive
+                        ? 'var(--feedback-warning)'
+                        : 'var(--core-text-special)'),
+                disabled: 'var(--core-text-disabled)',
+            },
+        };
+    }, [
+        iconColor,
+        destructive,
+        bgColor,
+        bgColorDisabled,
+        labelColor,
+        destructiveColor,
+    ]);
+    // memo text styles
+    const text = React.useMemo(() => {
+        return {
+            border: '1px',
+            iconColor: {
+                normal: destructiveColor(true),
+                hover: destructiveColor(true),
+                disabled: 'var(--core-text-disabled)',
+            },
+            background: {
+                normal: 'transparent',
+                hover: 'transparent',
+                disabled: 'transparent',
+            },
+            borderColor: {
+                normal: 'transparent',
+                hover: 'transparent',
+                disabled: 'transparent',
+            },
+            color: {
+                normal: labelColor || destructiveColor(false),
+                hover: labelColor || destructiveColor(false),
+                disabled: 'var(--core-text-disabled)',
+            },
+        };
+    }, [destructiveColor, labelColor]);
+    // memo color styles
+    const colorStyles = React.useMemo(() => {
+        return {
+            solid,
+            outline,
+            text,
+        };
+    }, [solid, outline, text]);
+    // Memoize sizing styles
+    const setPadding = React.useCallback((side) => {
+        if (round)
+            return 0;
+        if (side === 'left' && iconLeft)
+            return 20;
+        if (side === 'right' && iconRight)
+            return 20;
+        return 24;
+    }, [round, iconLeft, iconRight]);
+    const sizingStyles = React.useMemo(() => {
+        return {
+            large: {
+                height: 48,
+                gap: 8,
+                iconSize,
+                paddingLeft: setPadding('left'),
+                paddingRight: setPadding('right'),
+                width: round ? '48px' : btnWidth || 'auto',
+                borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '500px',
+            },
+            medium: {
+                height: 36,
+                gap: 8,
+                iconSize,
+                paddingLeft: setPadding('left'),
+                paddingRight: setPadding('right'),
+                width: round ? '36px' : btnWidth || 'auto',
+                borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '500px',
+            },
+            text: {
+                height: 20,
+                gap: 8,
+                iconSize,
+                paddingLeft: 0,
+                paddingRight: 0,
+                btnWidth,
+                borderRadius: 0,
+            },
+        };
+    }, [iconSize, btnWidth, round, borderRadius, setPadding]);
+    // Memoize handleMouseEnter
+    const handleMouseEnter = React.useCallback((e) => {
+        if (btnState !== 'disabled')
+            setBtnState('hover');
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current) || !tooltip)
+            return;
+        const tip = {
+            type: sharedTypes.ToolTipType.button,
+            payload: { label: tooltip },
+            event: e,
+            ref,
+        };
+        onToolTip(tip);
+    }, [btnState, tooltip, onToolTip]);
+    // Memoize handleMouseLeave
+    const handleMouseLeave = React.useCallback(() => {
+        if (btnState !== 'disabled')
+            setBtnState('normal');
+        if (tooltip)
+            onToolTip(null);
+    }, [btnState, tooltip, onToolTip]);
+    // Memoize handleDidStop
+    const handleDidStop = React.useCallback(() => {
+        setPlaying(false);
+        onClick(undefined);
+    }, [onClick]);
+    // Memoize showLabel
+    const shouldShowLabel = React.useMemo(() => !(playing && !iconLeft && !iconRight) && Boolean(label), [playing, iconLeft, iconRight, label]);
+    // Memoize button styles
+    const buttonStyle = React.useMemo(() => ({
+        color: colorStyles[variant].color[btnState],
+        background: fill
+            ? theme.current.colors['core-surface-primary']
+            : colorStyles[variant].background[state],
+        paddingRight: paddingRight !== null && paddingRight !== void 0 ? paddingRight : sizingStyles[size].paddingRight,
+        paddingLeft: paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : sizingStyles[size].paddingLeft,
+        borderRadius: sizingStyles[size].borderRadius,
+        height: sizingStyles[size].height,
+        maxHeight: sizingStyles[size].height,
+        minHeight: sizingStyles[size].height,
+        flex: width === 'fill' ? 1 : 'unset',
+        gap: sizingStyles[size].gap,
+        borderWidth: colorStyles[variant].border,
+        borderStyle: 'solid',
+        borderColor: colorStyles[variant].borderColor[btnState],
+        cursor: state === 'disabled' ? 'default' : 'pointer',
+        transition: 'all 0s ease-in-out 0s',
+    }), [
+        colorStyles,
+        variant,
+        btnState,
+        fill,
+        theme,
+        state,
+        paddingRight,
+        paddingLeft,
+        sizingStyles,
+        size,
+        width,
+    ]);
+    // memo icon stroke color
+    const iconStrokeColor = React.useMemo(() => colorStyles[variant].iconColor[state], [colorStyles, variant, state]);
+    // memo progress color
+    const progressColor = React.useMemo(() => destructive
+        ? theme.current.colors['feedback-warning']
+        : colorStyles[variant].color[btnState], [destructive, theme, colorStyles, variant, btnState]);
+    const setStyle = React.useCallback((value) => {
+        if (value === undefined)
+            return 'unset';
+        if (typeof value === 'number')
+            return `${value}px`;
+        return value;
+    }, []);
+    const iconDivSize = React.useMemo(() => {
+        if (round)
+            return `${buttonStyle.minHeight}px`;
+        return iconSize ? setStyle(iconSize) : 'unset';
+    }, [round, iconSize, buttonStyle, setStyle]);
+    const cssVars = React.useMemo(() => {
+        return {
+            '--ui-button-decoration': underline ? 'underline' : 'unset',
+            '--ui-button-min-width': btnWidth ? setStyle(btnWidth) : 'unset',
+            '--ui-button-icon-size': iconDivSize,
+        };
+    }, [underline, btnWidth, setStyle, iconDivSize]);
+    return (jsxRuntime.jsxs(react.motion.div, Object.assign({ id: divId, className: `${css.button}${divClass}`, ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: Object.assign(Object.assign(Object.assign({}, divStyle), buttonStyle), cssVars), transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, onClick: handleClick }, rest, { children: [!playing && iconLeft && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: iconLeft, size: sizingStyles[size].iconSize, strokeColor: iconStrokeColor, pointer: state !== 'disabled' }) })), playing && iconLeft && (jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, { show: playing, didStop: handleDidStop, duration: duration, size: sizingStyles[size].iconSize, color: progressColor, inline: true })), playing && !iconLeft && !iconRight && (jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, { show: playing, didStop: handleDidStop, duration: duration, size: sizingStyles[size].iconSize, color: progressColor, inline: false })), shouldShowLabel && (jsxRuntime.jsx("div", { className: `${css.label} ${css[labelSize]}`, children: label })), playing && iconRight && (jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, { show: playing, didStop: handleDidStop, duration: duration, size: sizingStyles[size].iconSize, color: progressColor, inline: true })), !playing && iconRight && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: iconRight, size: sizingStyles[size].iconSize, strokeColor: iconStrokeColor, pointer: state !== 'disabled' }) })), jsxRuntime.jsx(Dot.Dot, { show: !playing && showDot }), !playing && count && (jsxRuntime.jsx("div", { className: css.count, children: jsxRuntime.jsx(Badge.Badge, { variant: 'light', count: Number(count) }) }))] })));
+});
+UIButtonComponent.displayName = 'UIButton';
+const UIButton = React.memo(UIButtonComponent);
+
+exports.UIButton = UIButton;

package/dist/cjs/chunks/UIButtonBar-0fHPB0ww.js

@@ -0,0 +1,58 @@
+'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 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}.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.UIButtonBar-module_wrapper__8z-P8 {\n}\n\n.UIButtonBar-module_label__w6ru4 {\n\tcolor: var(--core-text-disabled);\n\tpadding-right: 4px;\n}\n\n.UIButtonBar-module_button__CeXO1 {\n\theight: 32px;\n\tgap: 0;\n\tcursor: pointer;\n\tbackground: var(--core-surface-primary);\n\tcolor: var(--core-text-disabled);\n\t&:last-child {\n\t\t&:hover {\n\t\t\tbackground: var(--core-surface-primary);\n\t\t}\n\t}\n\t&:first-child {\n\t\t&:hover {\n\t\t\tbackground: var(--core-surface-primary);\n\t\t}\n\t}\n\t&:hover {\n\t\tbackground: var(--core-surface-primary);\n\t\tcolor: var(--core-text-primary);\n\t}\n}\n\n.UIButtonBar-module_selected__I7geu {\n\tbackground: var(--core-surface-primary);\n\tcolor: var(--core-link-primary);\n}\n\n.UIButtonBar-module_divider__E03Ym {\n\tdisplay: block;\n\tbackground: var(--core-outline-primary);\n\twidth: 1px;\n\theight: 16px;\n\tmargin: 0 4px;\n}\n\n.UIButtonBar-module_last__0vvyg {\n\tdisplay: none;\n}\n";
+var css = {"wrapper":"UIButtonBar-module_wrapper__8z-P8 flexBox-module_rowStart__nJZnW","label":"UIButtonBar-module_label__w6ru4 flexBox-module_rowStart__nJZnW type-module_body-s-regular__8-FO-","button":"UIButtonBar-module_button__CeXO1 flexBox-module_rowStart__nJZnW","selected":"UIButtonBar-module_selected__I7geu","divider":"UIButtonBar-module_divider__E03Ym","last":"UIButtonBar-module_last__0vvyg"};
+styleInject_es.styleInject(css_248z);
+
+function UIButtonBar(props) {
+    const { options = [], current = 0, label, onChange = () => null, onToolTip = () => null } = props, divAttributes = tslib_es6.__rest(props, ["options", "current", "label", "onChange", "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 theme = hooks_useTheme.useTheme();
+    const [hovered, setHovered] = React.useState(-1);
+    const [currentPage, setCurrentPage] = React.useState(current);
+    React.useEffect(() => setCurrentPage(current), [current]);
+    const handleMouseEnter = React.useCallback((index) => {
+        setHovered(index);
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+        setHovered(-1);
+    }, []);
+    const handleClick = React.useCallback((button, index) => {
+        setCurrentPage(index);
+        onChange(button);
+    }, [onChange]);
+    // memo display
+    const display = React.useCallback((index) => {
+        return index === options.length - 1 ? css.last : '';
+    }, [options.length]);
+    // memo selected
+    const selected = React.useCallback((index) => {
+        return currentPage === index ? css.selected : '';
+    }, [currentPage]);
+    // memo icon stroke color
+    const iconColor = React.useCallback((index) => {
+        const isSelected = currentPage === index;
+        const isHovered = hovered === index;
+        if (isSelected)
+            return theme.current.colors['core-icon-primary'];
+        if (isHovered)
+            return theme.current.colors['core-button-primary'];
+        return theme.current.colors['core-text-disabled'];
+    }, [currentPage, hovered, theme]);
+    return (jsxRuntime.jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: divStyle }, rest, { children: [label && jsxRuntime.jsx("div", { className: css.label, children: label }), options === null || options === void 0 ? void 0 : options.map((button, index) => {
+                return (jsxRuntime.jsxs("div", { className: css.button, onMouseEnter: () => handleMouseEnter(index), onMouseLeave: () => handleMouseLeave(), children: [jsxRuntime.jsx("div", { className: selected(index), onClick: () => handleClick(button, index), onKeyDown: () => handleClick(button, index), children: jsxRuntime.jsx(IconButton.IconButton, { icon: button.icon, color: iconColor(index), label: button.label, tooltip: button.tip, onToolTip: onToolTip, hover: true, toggle: false }) }), jsxRuntime.jsx("div", { className: `${css.divider} ${display(index)}` })] }, `button-bar-${button.icon}-${index}`));
+            })] })));
+}
+
+exports.UIButtonBar = UIButtonBar;

package/dist/cjs/chunks/UICard-DBDSyT7E.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+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.UICard-module_card__ENpS- {\n\tpadding: 8px 14px 8px 8px !important;\n\tcolor: var(--core-text-primary);\n\twidth: var(--card-width);\n\tmax-width: min-content;\n\tflex: var(--card-flex);\n\tgap: 8px;\n\tborder-radius: 8px;\n\tborder: 1px solid var(--core-outline-primary);\n\tcursor: pointer;\n\ttransition: all 0.25s ease-in-out 0s;\n\t&:hover {\n\t\tcolor: var(--core-button-primary);\n\t\tborder: 1px solid var(--core-button-primary);\n\t}\n}\n\n.UICard-module_icon__n4kmT {\n\tmin-width: 20px;\n\tmin-height: 20px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n}\n\n.UICard-module_label__Ev9Fa {\n\tflex: 1;\n\tword-break: break-all;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\toverflow-wrap: anywhere;\n\tdisplay: -webkit-box;\n\twhite-space: nowrap;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n}\n";
+var css = {"card":"UICard-module_card__ENpS- flexBox-module_rowStart__nJZnW type-module_body-m-regular__Qtp5G","icon":"UICard-module_icon__n4kmT flexBox-module_row__PWxbe","label":"UICard-module_label__Ev9Fa"};
+styleInject_es.styleInject(css_248z);
+
+const UICard = React.memo(function UICard(props) {
+    const { id, icon, label, command, width, onCommand = () => null } = props, divAttributes = tslib_es6.__rest(props, ["id", "icon", "label", "command", "width", "onCommand"]);
+    const { className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    // set style value callback
+    const setStyle = React.useCallback((value) => {
+        if (value === undefined || value === 'fill')
+            return 'unset';
+        if (typeof value === 'string')
+            return value;
+        return `${value}px`;
+    }, []);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--card-width': setStyle(width),
+            '--card-flex': width === 'fill' ? '1' : 'unset',
+        };
+    }, [setStyle, width]);
+    return (jsxRuntime.jsxs("div", Object.assign({ id: id, className: `${css.card}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onClick: () => onCommand({ id, command }), onKeyDown: () => onCommand({ id, command }) }, rest, { children: [icon && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: icon }) })), label && jsxRuntime.jsx("div", { className: css.label, children: label })] })));
+});
+
+exports.UICard = UICard;

package/dist/cjs/chunks/UIChip-kjhvRrOV.js

@@ -0,0 +1,93 @@
+'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 _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.UIChip-module_chip__Mlm-E {\n\tpadding: var(--ui-chip-padding) !important;\n\twidth: min-content;\n\tmin-height: 30px;\n\tgap: var(--ui-chip-gap);\n\tbackground: var(--ui-chip-background);\n\tline-height: 1em;\n\tcolor: var(--ui-chip-color);\n\tborder: var(--ui-chip-border) solid var(--ui-chip-border-color);\n\tborder-radius: var(--ui-chip-border-radius);\n\ttransition: all 0.25s ease-in-out 0s;\n\tcursor: pointer;\n\twhite-space: nowrap;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.UIChip-module_icon__T3CKh {\n\theight: var(--ui-chip-icon-size);\n\tmin-height: var(--ui-chip-icon-size);\n\twidth: var(--ui-chip-icon-size);\n\tmin-width: var(--ui-chip-icon-size);\n}\n\n.UIChip-module_s__xUUaz {\n}\n\n.UIChip-module_m__mNHBQ {\n}\n\n.UIChip-module_l__DWRA6 {\n}\n";
+var css = {"chip":"UIChip-module_chip__Mlm-E flexBox-module_row__PWxbe","icon":"UIChip-module_icon__T3CKh flexBox-module_row__PWxbe","s":"UIChip-module_s__xUUaz type-module_body-s-regular__8-FO-","m":"UIChip-module_m__mNHBQ type-module_body-m-regular__Qtp5G","l":"UIChip-module_l__DWRA6 type-module_body-l-regular__Ar4d3"};
+styleInject_es.styleInject(css_248z);
+
+const UIChip = React.memo((props) => {
+    const { label, icon, background, disabled = false, focused = false, variant = 'regular', unframed = false, iconRight = false, labelSize = 'm', tooltip, iconColor, onToolTip = () => null, onClick = () => null, onMouseDown = () => null } = props, divAttributes = tslib_es6.__rest(props, ["label", "icon", "background", "disabled", "focused", "variant", "unframed", "iconRight", "labelSize", "tooltip", "iconColor", "onToolTip", "onClick", "onMouseDown"]);
+    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 [isFocused, setIsFocused] = React.useState(focused);
+    const [isHovered, setIsHovered] = React.useState(false);
+    React.useEffect(() => setIsFocused(focused), [focused]);
+    // click handler
+    const handleClick = React.useCallback((e) => {
+        if (!disabled)
+            onClick(e);
+    }, [disabled, onClick]);
+    // handle mouse down
+    const handleMouseDown = React.useCallback((e) => {
+        if (!disabled)
+            onMouseDown(e);
+    }, [disabled, onMouseDown]);
+    // handle mouse enter / leave
+    const handleMouseEnter = React.useCallback((enter, event) => {
+        if (enter) {
+            if (tooltip) {
+                const tip = {
+                    type: sharedTypes.ToolTipType.button,
+                    payload: { label: tooltip },
+                    ref: null,
+                    event,
+                };
+                onToolTip(tip);
+            }
+            setIsHovered(true);
+        }
+        else {
+            onToolTip(null);
+            setIsHovered(false);
+        }
+    }, [tooltip, onToolTip]);
+    // memo padding
+    const padding = React.useMemo(() => {
+        const isSmall = variant === 'small';
+        if (!icon) {
+            return isSmall ? '6px' : '9px 16px 9px 16px';
+        }
+        if (icon && iconRight) {
+            return isSmall ? '6px 6px 6px 10px' : '9px 12px 9px 16px';
+        }
+        return isSmall ? '6px 10px 6px 6px' : '9px 16px 9px 12px';
+    }, [variant, icon, iconRight]);
+    // memo icon color
+    const computedIconColor = React.useMemo(() => {
+        if (iconColor)
+            return iconColor;
+        if (disabled)
+            return theme.current.colors['core-icon-disabled'];
+        if (isHovered)
+            return theme.current.colors['core-link-primary'];
+        if (isFocused)
+            return theme.current.colors['core-link-primary'];
+        return theme.current.colors['core-text-primary'];
+    }, [iconColor, disabled, isFocused, isHovered, theme]);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--ui-chip-padding': padding,
+            '--ui-chip-background': background || 'transparent',
+            '--ui-chip-gap': variant === 'small' ? '4px' : '8px',
+            '--ui-chip-color': computedIconColor,
+            '--ui-chip-border-radius': variant === 'small' ? '4px' : '8px',
+            '--ui-chip-border': unframed ? '0' : '1px',
+            '--ui-chip-border-color': unframed ? 'transparent' : computedIconColor,
+        };
+    }, [padding, background, variant, unframed, computedIconColor]);
+    return (jsxRuntime.jsxs("div", Object.assign({ id: divId, className: `${css.chip}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onMouseDown: handleMouseDown, onKeyDown: () => null, onClick: handleClick, onMouseEnter: (e) => handleMouseEnter(true, e), onMouseLeave: (e) => handleMouseEnter(false, e), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }, rest, { children: [icon && !iconRight && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: icon, size: variant === 'regular' ? 20 : 16, strokeColor: computedIconColor }) })), jsxRuntime.jsx("div", { className: css[labelSize], children: label }), icon && iconRight && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: icon, size: variant === 'regular' ? 20 : 16, strokeColor: computedIconColor }) }))] })));
+});
+
+exports.UIChip = UIChip;

package/dist/cjs/chunks/UIFileIcon-ZrbDIeYz.js

@@ -0,0 +1,54 @@
+'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');
+
+const UIFileIcon = React.memo((props) => {
+    var _a, _b;
+    const { name = 'document', size = 20, pointer = false, disabled = false, onClick = () => null } = props, svgAttributes = tslib_es6.__rest(props, ["name", "size", "pointer", "disabled", "onClick"]);
+    const { id: svgId, className, style } = svgAttributes, rest = tslib_es6.__rest(svgAttributes, ["id", "className", "style"]);
+    const theme = hooks_useTheme.useTheme();
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick(e);
+        }
+    }, [onClick]);
+    const FileIcon = React.useMemo(() => {
+        return [
+            {
+                name: 'pdf',
+                icon: (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", style: {
+                        cursor: disabled ? 'default' : pointer ? 'pointer' : 'inherit',
+                    }, onClick: (e) => onClick(e), onKeyDown: handleKeyDown, tabIndex: pointer ? 0 : -1, fill: "none", role: "img", "aria-label": "PDF document icon", children: [jsxRuntime.jsx("title", { children: "PDF document" }), jsxRuntime.jsx("path", { d: "M 4.5 19 L 15.5 19 C 16.328 19 17 18.328 17 17.5 L 17 5 L 14.5 5 C 13.672 5 13 4.328 13 3.5 L 13 1 L 4.5 1 C 3.672 1 3 1.672 3 2.5 L 3 17.5 C 3 18.328 3.672 19 4.5 19 Z", fill: "rgb(250,15,0)" }), jsxRuntime.jsx("path", { d: "M 5.516 9.416 L 7.237 9.416 C 7.485 9.416 7.7 9.464 7.884 9.56 C 8.068 9.654 8.21 9.788 8.309 9.96 C 8.409 10.133 8.458 10.334 8.458 10.563 C 8.458 10.79 8.408 10.99 8.309 11.164 C 8.209 11.338 8.067 11.474 7.882 11.572 C 7.682 11.673 7.461 11.723 7.237 11.718 L 6.502 11.718 L 6.502 13 L 5.516 13 Z M 7.069 10.932 C 7.175 10.937 7.278 10.902 7.359 10.834 C 7.432 10.764 7.471 10.665 7.467 10.564 C 7.467 10.446 7.431 10.357 7.359 10.294 C 7.277 10.229 7.174 10.196 7.069 10.202 L 6.502 10.202 L 6.502 10.932 Z M 8.836 9.416 L 10.248 9.416 C 10.618 9.416 10.941 9.489 11.214 9.636 C 11.489 9.781 11.701 9.988 11.849 10.258 C 11.997 10.527 12.071 10.843 12.071 11.208 C 12.071 11.573 11.997 11.89 11.849 12.16 C 11.704 12.426 11.483 12.643 11.214 12.783 C 10.915 12.934 10.583 13.008 10.248 13 L 8.836 13 Z M 10.223 12.214 C 10.389 12.214 10.533 12.174 10.653 12.097 C 10.778 12.013 10.875 11.894 10.931 11.755 C 11 11.581 11.034 11.395 11.029 11.208 C 11.034 11.022 11.001 10.837 10.931 10.664 C 10.875 10.524 10.778 10.403 10.653 10.319 C 10.524 10.239 10.375 10.198 10.223 10.202 L 9.823 10.202 L 9.823 12.214 Z M 12.53 9.416 L 15.182 9.416 L 15.182 10.202 L 13.517 10.202 L 13.517 10.759 L 14.715 10.759 L 14.715 11.545 L 13.517 11.545 L 13.517 13 L 12.53 13 Z", fill: theme.current.colors['core-icon-light'] }), jsxRuntime.jsx("path", { d: "M 13 1 L 15 3 L 17 5 L 14 5 C 13.448 5 13 4.552 13 4 Z", fill: theme.current.coreColors['brand-purple-300'] })] })),
+            },
+            {
+                name: 'spreadsheet',
+                icon: (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", style: {
+                        cursor: disabled ? 'default' : pointer ? 'pointer' : 'inherit',
+                    }, onClick: (e) => onClick(e), onKeyDown: handleKeyDown, tabIndex: pointer ? 0 : -1, fill: "none", role: "img", "aria-label": "Spreadsheet document icon", children: [jsxRuntime.jsx("title", { children: "Spreadsheet document" }), jsxRuntime.jsx("path", { d: "M 4.5 19 L 15.5 19 C 16.328 19 17 18.328 17 17.5 L 17 5 L 14.5 5 C 13.672 5 13 4.328 13 3.5 L 13 1 L 4.5 1 C 3.672 1 3 1.672 3 2.5 L 3 17.5 C 3 18.328 3.672 19 4.5 19 Z", fill: theme.current.coreColors['brand-land-700'] }), jsxRuntime.jsx("path", { d: "M 5 8 L 11 8 L 11 9.5 L 5 9.5 Z M 12 8 L 15 8 L 15 9.5 L 12 9.5 Z M 5 11 L 11 11 L 11 12.5 L 5 12.5 Z M 12 11 L 15 11 L 15 12.5 L 12 12.5 Z M 5 14 L 11 14 L 11 15.5 L 5 15.5 Z M 12 14 L 15 14 L 15 15.5 L 12 15.5 Z", fill: theme.current.colors['core-icon-light'] }), jsxRuntime.jsx("path", { d: "M 13 1 L 15 3 L 17 5 L 14 5 C 13.448 5 13 4.552 13 4 Z", fill: theme.current.coreColors['brand-purple-300'] })] })),
+            },
+            {
+                name: 'document',
+                icon: (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", style: {
+                        cursor: disabled ? 'default' : pointer ? 'pointer' : 'inherit',
+                    }, onClick: (e) => onClick(e), onKeyDown: handleKeyDown, tabIndex: pointer ? 0 : -1, fill: "none", role: "img", "aria-label": "Document icon", children: [jsxRuntime.jsx("title", { children: "Document" }), jsxRuntime.jsx("path", { d: "M 4.5 19 L 15.5 19 C 16.328 19 17 18.328 17 17.5 L 17 5 L 14.5 5 C 13.672 5 13 4.328 13 3.5 L 13 1 L 4.5 1 C 3.672 1 3 1.672 3 2.5 L 3 17.5 C 3 18.328 3.672 19 4.5 19 Z", fill: theme.current.colors['core-badge-primary'] }), jsxRuntime.jsx("path", { d: "M 6 14 L 14 14 M 6 10 L 12 10", fill: "transparent", strokeWidth: "1.5", stroke: theme.current.colors['core-icon-light'], strokeMiterlimit: "10", strokeDasharray: "" }), jsxRuntime.jsx("path", { d: "M 13 1 L 15 3 L 17 5 L 14 5 C 13.448 5 13 4.552 13 4 Z", fill: theme.current.coreColors['brand-purple-300'] })] })),
+            },
+        ];
+    }, [size, disabled, onClick, pointer, theme, handleKeyDown]);
+    // get the right icon in the array
+    const svgElement = FileIcon.filter((icon) => {
+        return icon.name.toLowerCase() === name.toLowerCase();
+    });
+    if (svgElement.length > 0) {
+        const iconNode = svgElement[0].icon;
+        return React.cloneElement(iconNode, Object.assign({ id: svgId, className, style: Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_b = (_a = iconNode.props) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {})), onClick: (e) => onClick(e) }, rest));
+    }
+    return null;
+});
+
+exports.UIFileIcon = UIFileIcon;