@apple-pie/slice 0.0.1 → 0.0.2

package/dist/esm/chunks/ProgressIndicator-BVukxMU6.js

@@ -0,0 +1,118 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-0pkUdtrF.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAnimate, usePresence, AnimatePresence, motion } from 'motion/react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme.js';
+import '../theme/colors.js';
+import '../hooks/useWindow.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+const DoneCheck = React.memo((props) => {
+    const theme = useTheme();
+    const { size = 88, stroke = 0.75, duration = 0.35, bounce = 0.7, delay = 0.5, color = theme.current.colors['feedback-positive'], didEnd = () => null, didStart = () => null, play = false } = props, svgAttributes = __rest(props, ["size", "stroke", "duration", "bounce", "delay", "color", "didEnd", "didStart", "play"]);
+    const { id: svgId, className, style } = svgAttributes, rest = __rest(svgAttributes, ["id", "className", "style"]);
+    const [check, animateCheck] = useAnimate();
+    const [isPresent, safeToRemove] = usePresence();
+    useEffect(() => {
+        const variants = { initial: { scale: 0.9 }, animate: { scale: 1 } };
+        const spring = {
+            type: 'spring',
+            time: duration,
+            bounce,
+            delay,
+        };
+        const instant = { ease: 'linear', duration: 0, delay: 0 };
+        if (isPresent && play) {
+            const enterAnimation = () => __awaiter(void 0, void 0, void 0, function* () {
+                didStart();
+                yield animateCheck(check.current, variants.initial, instant);
+                yield animateCheck(check.current, variants.animate, spring);
+                didEnd();
+            });
+            enterAnimation();
+        }
+        else if (isPresent && !play) {
+            const enterAnimation = () => __awaiter(void 0, void 0, void 0, function* () {
+                yield animateCheck(check.current, variants.animate, instant);
+            });
+            enterAnimation();
+        }
+        else if (!isPresent) {
+            const exitAnimation = () => __awaiter(void 0, void 0, void 0, function* () {
+                yield animateCheck(check.current, variants.initial, instant);
+                safeToRemove();
+            });
+            exitAnimation();
+        }
+    }, [
+        isPresent,
+        play,
+        animateCheck,
+        check,
+        didEnd,
+        didStart,
+        safeToRemove,
+        bounce,
+        delay,
+        duration,
+    ]);
+    const checkMark = () => {
+        return (jsxs("svg", Object.assign({ id: svgId, className: className, ref: check, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, scale: 0.9, viewBox: "0 0 20 20", fill: "none", style: (style !== null && style !== void 0 ? style : {}), "aria-label": "Checkmark icon" }, rest, { children: [jsx("title", { children: "Checkmark" }), jsx("path", { d: "M 1 1 L 19 1 L 19 19 L 1 19 Z", fill: "transparent" }), jsx("path", { d: "M 10 2 C 14.418 2 18 5.582 18 10 C 18 14.418 14.418 18 10 18 C 5.582 18 2 14.418 2 10 C 2 5.582 5.582 2 10 2 Z", fill: "transparent", strokeWidth: stroke, stroke: color }), jsx("path", { d: "M 6.5 9.5 L 9 12 L 13.5 7.5", fill: "transparent", strokeWidth: stroke, stroke: color })] })));
+    };
+    return checkMark();
+});
+
+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.ProgressIndicator-module_container__CZDPk {\n\tposition: var(--pi-position);\n\ttop: var(--pi-inset);\n\tbottom: var(--pi-inset);\n\tleft: var(--pi-inset);\n\tright: var(--pi-inset);\n\tcolor: var(--core-text-disabled);\n}\n\n.ProgressIndicator-module_iconWrapper__jPIBx {\n\tmin-width: var(--pi-icon-size);\n\tmax-width: var(--pi-icon-size);\n\tmax-height: var(--pi-icon-size);\n\tmin-height: var(--pi-icon-size);\n\theight: var(--pi-icon-size);\n\twidth: var(--pi-icon-size);\n\tpadding: 0;\n\tbackground: none;\n\tborder-radius: 100%;\n}\n";
+var css = {"container":"ProgressIndicator-module_container__CZDPk flexBox-module_column__MP2Xd"};
+styleInject(css_248z);
+
+function ProgressIndicator(props) {
+    const theme = useTheme();
+    const { size = 20, secondsPerSpin = 1, show = false, color = theme.current.colors['core-icon-primary'], stroke = 1.5, inline = false, duration = undefined, didStart = () => null, didStop = () => null } = props, divAttributes = __rest(props, ["size", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop"]);
+    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 [playing, setPlaying] = useState(show);
+    const timer = useRef(null);
+    useEffect(() => {
+        if (show) {
+            setPlaying(true);
+            didStart();
+            if (duration) {
+                timer.current = setTimeout(() => {
+                    setPlaying(false);
+                    didStop();
+                }, duration * 1000);
+            }
+        }
+        else {
+            setPlaying(false);
+            didStop();
+        }
+        return () => {
+            if (timer === null || timer === void 0 ? void 0 : timer.current)
+                clearTimeout(timer.current);
+        };
+    }, [show, didStart, didStop, duration]);
+    const cssVars = useMemo(() => {
+        return {
+            '--pi-position': inline ? 'relative' : 'absolute',
+            '--pi-inset': inline ? 'unset' : '0',
+            '--pi-icon-size': `${size !== null && size !== void 0 ? size : 0}px`,
+        };
+    }, [inline, size]);
+    const openCircle = useMemo(() => {
+        return OpenCircle(size, secondsPerSpin, color, stroke, playing);
+    }, [size, secondsPerSpin, color, stroke, playing]);
+    return (jsx(AnimatePresence, { initial: true, children: show && (jsx(motion.div, Object.assign({ id: divId, className: `${css.container}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, rest, { children: openCircle }))) }));
+}
+const OpenCircle = (size, secondsPerSpin, color, stroke = 1.5, playing = false) => {
+    return (jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", role: "img", "aria-label": "Loading spinner", transition: {
+            ease: 'linear',
+            repeatType: 'loop',
+            repeat: playing ? Number.POSITIVE_INFINITY : 0,
+            duration: secondsPerSpin,
+        }, animate: playing ? { rotate: 360 } : { rotate: 0 }, children: [jsx("title", { children: "Loading" }), jsx("defs", { children: jsxs("linearGradient", { id: "strokeFill", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }), jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 1 }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })] }) }), jsx(motion.path, { d: "M 17.371 6.886 C 17.776 7.843 18 8.895 18 10 C 18 14.418 14.418 18 10 18 C 5.582 18 2 14.418 2 10 C 2 5.582 5.582 2 10 2", fill: "transparent", strokeWidth: stroke, stroke: 'url(#strokeFill)' })] }));
+};
+
+export { DoneCheck as D, ProgressIndicator as P };

package/dist/esm/chunks/RadioButton-B5BxQI0R.js

@@ -0,0 +1,63 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme.js';
+import '../theme/colors.js';
+import '../hooks/useWindow.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}.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.RadioButton-module_wrapper__ezvz- {\n\tpadding: var(--rb-padding) !important;\n\tmax-width: var(--rb-max-width);\n\tflex: var(--rb-flex);\n\tborder: 1px solid var(--core-outline-primary);\n\tbackground: var(--rb-bg);\n\tgap: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttransition: all 0.25s ease-in-out 0s;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.RadioButton-module_radioIcon__6ddS9 {\n\twidth: 20px;\n\theight: 20px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n\tmin-height: 20px;\n\tmin-width: 20px;\n}\n\n.RadioButton-module_radioTitle__R1R2D {\n\tcolor: var(--core-text-primary);\n\twhite-space: nowrap;\n\tflex: 1;\n}\n\n.RadioButton-module_radioSummary__-RRdT {\n\tcolor: var(--core-text-primary);\n\tflex: 1;\n}\n\n.RadioButton-module_radioContent__Fq-Ry {\n\twidth: 100%;\n}\n";
+var css = {"wrapper":"RadioButton-module_wrapper__ezvz- flexBox-module_row__PWxbe","radioIcon":"RadioButton-module_radioIcon__6ddS9 flexBox-module_column__MP2Xd","radioTitle":"RadioButton-module_radioTitle__R1R2D flexBox-module_rowStart__nJZnW type-module_body-m-regular__Qtp5G","radioSummary":"RadioButton-module_radioSummary__-RRdT flexBox-module_rowStart__nJZnW type-module_body-s-regular__8-FO-","radioContent":"RadioButton-module_radioContent__Fq-Ry flexBox-module_columnStart__Kg8cV"};
+styleInject(css_248z);
+
+const RadioButton = React.memo((props) => {
+    const theme = useTheme();
+    const { option, selected = false, deselect = true, tabIndex = 1, wrap = false, list = false, hideRadio = false, toggleIcon = true, noFrame = false, iconColor, onChange = () => null } = props, divAttributes = __rest(props, ["option", "selected", "deselect", "tabIndex", "wrap", "list", "hideRadio", "toggleIcon", "noFrame", "iconColor", "onChange"]);
+    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 [isSelected, setIsSelected] = useState(selected);
+    useEffect(() => setIsSelected(selected), [selected]);
+    const handleChange = useCallback(() => {
+        if (isSelected && !deselect)
+            return;
+        setIsSelected(!isSelected);
+        onChange(option, !isSelected);
+    }, [isSelected, deselect, onChange, option]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.code === 'Space') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleChange();
+        }
+    }, [handleChange]);
+    // memo icon color
+    const setIconColor = useMemo(() => {
+        if (iconColor)
+            return iconColor;
+        return toggleIcon && isSelected
+            ? theme.current.colors['core-button-primary']
+            : theme.current.colors['core-icon-primary'];
+    }, [iconColor, toggleIcon, isSelected, theme]);
+    // memo icon name
+    const iconName = useMemo(() => (toggleIcon && isSelected ? 'checked' : 'unchecked'), [toggleIcon, isSelected]);
+    // memo flex
+    const setFlex = useMemo(() => {
+        if (list)
+            return 'unset';
+        return wrap ? '40%' : '1';
+    }, [list, wrap]);
+    // memo css vars
+    const cssVars = useMemo(() => {
+        return {
+            '--rb-max-width': wrap ? '50%' : '100%',
+            '--rb-flex': setFlex,
+            '--rb-padding': noFrame ? '0' : '8px 16px 8px 10px',
+            '--rb-bg': isSelected ? 'var(--core-surface-secondary)' : 'transparent',
+        };
+    }, [setFlex, isSelected, wrap, noFrame]);
+    return (jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onClick: handleChange, onKeyDown: handleKeyDown, tabIndex: tabIndex, "aria-label": option.title, "aria-selected": isSelected }, rest, { children: [option.icon && !hideRadio && (jsx("div", { className: css.radioIcon, children: jsx(IconButton, { toggle: false, icon: iconName, color: setIconColor, frameSize: 20, iconSize: 20 }) })), jsxs("div", { className: css.radioContent, children: [jsx("div", { className: css.radioTitle, children: option.title }), option.description && option.description !== '' && (jsx("div", { className: css.radioSummary, children: option.description }))] })] })));
+});
+
+export { RadioButton as R };

package/dist/esm/chunks/RadioButtonList-C2z8McAD.js

@@ -0,0 +1,114 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { R as RadioButton } from './RadioButton-B5BxQI0R.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.RadioButtonList-module_wrapper__UMlAV {\n\talign-items: flex-start;\n\twidth: 100%;\n\tflex-wrap: var(--rb-list-flex-wrap);\n\tmargin-bottom: var(--rb-list-margin-bottom);\n\tgap: var(--rb-gap);\n}\n\n.RadioButtonList-module_column__E9MfY {\n}\n\n.RadioButtonList-module_row__l88Vt {\n}\n";
+var css = {"wrapper":"RadioButtonList-module_wrapper__UMlAV","column":"RadioButtonList-module_column__E9MfY flexBox-module_columnStart__Kg8cV","row":"RadioButtonList-module_row__l88Vt flexBox-module_rowStart__nJZnW"};
+styleInject(css_248z);
+
+const RadioButtonList = React.memo((props) => {
+    const { options = [], selectedIndexes = null, selectedOptions = null, label = null, deselect = false, multiSelect = false, wrap = false, tabIndexSeed = 0, spacer = 'none', custom = 0, gap = 16, hideRadio = false, noFrame = false, toggleIcon = true, iconColor = undefined, iconSelectedColor = undefined, onChange = () => null } = props, divAttributes = __rest(props, ["options", "selectedIndexes", "selectedOptions", "label", "deselect", "multiSelect", "wrap", "tabIndexSeed", "spacer", "custom", "gap", "hideRadio", "noFrame", "toggleIcon", "iconColor", "iconSelectedColor", "onChange"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    // internal array of selected indexes
+    const [selected, setSelected] = useState(selectedIndexes);
+    // update indexes selected based on prop
+    useEffect(() => setSelected(selectedIndexes), [selectedIndexes]);
+    // update indexes selected if setting selections via field name / values
+    useEffect(() => {
+        if (!selectedOptions || !options)
+            return;
+        const selections = [];
+        for (const item of selectedOptions) {
+            for (let i = 0; i < options.length; i++) {
+                const option = options[i];
+                if (option.fieldName === item)
+                    selections.push(i);
+            }
+        }
+        setSelected(selections);
+    }, [selectedOptions, options]);
+    // returns if a specific option index is selected
+    const isSelected = useCallback((index) => {
+        if (!selected)
+            return false;
+        return selected.includes(index);
+    }, [selected]);
+    const doMultiSelection = useCallback((selection, state) => {
+        // **** update the selected indexes
+        let indexesSelected = selected ? [...selected] : [];
+        // if deselecting and there are selections
+        if (!state && selected) {
+            const removeAt = indexesSelected.indexOf(selection);
+            indexesSelected.splice(removeAt, 1);
+        }
+        else if (state) {
+            indexesSelected = selected ? [...selected] : [];
+            const exists = indexesSelected.includes(selection);
+            if (!exists)
+                indexesSelected.push(selection);
+        }
+        // **** create an array of selected options
+        let updatedSelections = [];
+        for (const index of indexesSelected || []) {
+            if (updatedSelections)
+                updatedSelections.push(options[index]);
+        }
+        if (updatedSelections.length < 1)
+            updatedSelections = null;
+        setSelected(indexesSelected || null);
+        onChange(updatedSelections, indexesSelected || null);
+    }, [selected, options, onChange]);
+    const doSingleSelection = useCallback((selection, state) => {
+        onChange(state ? [options[selection]] : [], state ? [selection] : []);
+        setSelected(state ? [selection] : null);
+    }, [options, onChange]);
+    const handleChange = useCallback((selection, state) => {
+        // it not multiselect just pass the current selection
+        if (multiSelect) {
+            doMultiSelection(selection, state);
+        }
+        else {
+            doSingleSelection(selection, state);
+        }
+    }, [multiSelect, doMultiSelection, doSingleSelection]);
+    const renderedOptions = useMemo(() => {
+        return options.map((option, i) => {
+            return (jsx(RadioButton, { option: option, selected: isSelected(i), deselect: deselect, wrap: wrap, noFrame: noFrame, hideRadio: hideRadio, onChange: (_option, state) => handleChange(i, state), tabIndex: i + 1 + 100 * tabIndexSeed, toggleIcon: toggleIcon, iconColor: isSelected(i) ? iconSelectedColor : iconColor }, `${option.fieldName}_${i}`));
+        });
+    }, [
+        options,
+        isSelected,
+        deselect,
+        wrap,
+        noFrame,
+        hideRadio,
+        handleChange,
+        tabIndexSeed,
+        toggleIcon,
+        iconColor,
+        iconSelectedColor,
+    ]);
+    // memo margin
+    const margin = useMemo(() => {
+        if (spacer === 'none')
+            return 0;
+        if (spacer === 'custom')
+            return custom;
+        return 0;
+    }, [spacer, custom]);
+    // memo css vars
+    const cssVars = useMemo(() => {
+        return {
+            '--rb-list-flex-wrap': wrap ? 'wrap' : 'nowrap',
+            '--rb-list-margin-bottom': noFrame ? 0 : `${margin}px`,
+            '--rb-gap': `${gap}px`,
+        };
+    }, [wrap, margin, gap, noFrame]);
+    return (jsxs("div", Object.assign({ id: divId, className: `${css.wrapper} ${noFrame ? css.column : css.row}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars) }, rest, { children: [label, renderedOptions] })));
+});
+
+export { RadioButtonList as R };

package/dist/esm/chunks/Slider-C-PcWqTz.js

@@ -0,0 +1,283 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useMemo, useCallback, useEffect } from 'react';
+import { useObserveResize } from '../hooks/useObserveResize.js';
+import { p as pointerPosition } from './utils-BRZK2Drn.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+/**
+ * General debounce utility with delay setting and cancel/flush methods
+ * to clear a "debounce" or immediately "execute" the debounced function
+ */
+function debounce(func, delay) {
+    let timeoutId = null;
+    let lastArgs = null;
+    const debounced = function (...args) {
+        lastArgs = args;
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            func.apply(this, lastArgs !== null && lastArgs !== void 0 ? lastArgs : []);
+            timeoutId = null;
+            lastArgs = null;
+        }, delay);
+    };
+    debounced.cancel = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+            lastArgs = null;
+        }
+    };
+    debounced.flush = function () {
+        if (timeoutId !== null && lastArgs !== null) {
+            clearTimeout(timeoutId);
+            func.apply(this, lastArgs);
+            timeoutId = null;
+            lastArgs = null;
+        }
+    };
+    return debounced;
+}
+
+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.Slider-module_wrapper__ju4N2 {\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: var(--slider-padding);\n\tmargin: 0;\n\twidth: var(--slider-width);\n\theight: var(--slider-height);\n\tmin-height: var(--slider-touch-height);\n\tcursor: var(--slider-cursor);\n}\n\n.Slider-module_track__XogMe {\n\tposition: relative;\n\twidth: 0;\n\theight: 100%;\n\tbackground-color: var(--slider-progress-color);\n\toverflow: visible;\n\tpointer-events: none;\n\tborder-radius: 100px;\n}\n\n.Slider-module_trackHead__Ka3pu {\n\tposition: absolute;\n\tdisplay: var(--slider-head-display);\n\tbackground-color: var(--slider-head-color);\n\tpointer-events: none;\n\tborder-radius: var(--slider-head-radius);\n\tmax-width: var(--slider-head-width);\n\tmax-height: var(--slider-head-size);\n\tmin-width: var(--slider-head-width);\n\tmin-height: var(--slider-head-size);\n\ttop: 50%;\n\ttransform: translateY(-50%) translateX(-50%);\n}\n\n.Slider-module_trackBg__4z7Pt {\n\twidth: 100%;\n\theight: var(--slider-height);\n\tbackground-color: var(--slider-track-color);\n\tpointer-events: none;\n\tborder-radius: 100px;\n}\n";
+var css = {"wrapper":"Slider-module_wrapper__ju4N2","track":"Slider-module_track__XogMe flexBox-module_rowStart__nJZnW","trackHead":"Slider-module_trackHead__Ka3pu","trackBg":"Slider-module_trackBg__4z7Pt flexBox-module_rowStart__nJZnW"};
+styleInject(css_248z);
+
+const Slider = React.memo((props) => {
+    const { value = 25, scaleMin = 0, scaleMax = 100, width, height = 2, touchHeight = 24, trackHeadSize = 7, headType = 'round', trackHeadWidth = 4, cursor = 'default', headColor = 'var(--core-text-primary)', trackColor = 'var(--core-surface-secondary)', progressColor = 'var(--core-text-primary)', onChange = () => null, onDragChange = () => null } = props, divAttributes = __rest(props, ["value", "scaleMin", "scaleMax", "width", "height", "touchHeight", "trackHeadSize", "headType", "trackHeadWidth", "cursor", "headColor", "trackColor", "progressColor", "onChange", "onDragChange"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    // hook into the relevant on screen elements
+    const ref = useRef(null);
+    const track = useRef(null);
+    const head = useRef(null);
+    // tracking slider values via ref to avoid state issues from direct listeners
+    const absProgressRef = useRef(value);
+    const relativeProgressRef = useRef(value / scaleMax);
+    const didMount = useRef(false);
+    // use resize observer to track changes to container size for responsive behavior
+    const size = useObserveResize(ref, { ignore: 'height' });
+    // use a "debounce" to limit the number of onChange calls
+    const debouncedOnChange = debounce((value, percent) => {
+        onChange(value, percent);
+    }, 0);
+    // set padding based on head size since dragging the head all the way to the edge will move it
+    // such that half the head would be outside the track constraints
+    const padding = useMemo(() => {
+        if (headType === 'none' || !trackHeadSize)
+            return 0;
+        return trackHeadSize / 2;
+    }, [headType, trackHeadSize]);
+    // set the position of the track progress and track head
+    // based on the pixel position / adjust for half the size of the head (= padding)
+    const setTrackAndHead = useCallback((pixelPos, max = false) => {
+        const tr = track.current;
+        const hd = head.current;
+        let adjustment = 0;
+        if (pixelPos === 0)
+            adjustment = padding;
+        if (max)
+            adjustment = -padding;
+        if (tr && hd) {
+            tr.style.width = `${pixelPos}px`;
+            hd.style.left = `${pixelPos - padding + adjustment}px`;
+        }
+        didMount.current = true;
+    }, [padding]);
+    // set the initial position of the slider absolute value within scale
+    const initialProgress = useCallback((current) => {
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current))
+            return;
+        const sliderWidth = ref.current.getBoundingClientRect().width;
+        let adjustedCurrent = current;
+        if (adjustedCurrent > scaleMax || adjustedCurrent < scaleMin) {
+            console.warn('Slider outside range. Adjusted to mid point.');
+            adjustedCurrent = (scaleMax - scaleMin) / 2;
+        }
+        const normalized = (adjustedCurrent - scaleMin) / (scaleMax - scaleMin);
+        const pixelPos = normalized * sliderWidth;
+        absProgressRef.current = adjustedCurrent; // updated the progress value
+        relativeProgressRef.current = normalized; // updated the relative value
+        const max = relativeProgressRef.current === 1; // flag if at max value
+        setTrackAndHead(pixelPos, max);
+        didMount.current = true;
+    }, [scaleMax, scaleMin, setTrackAndHead]);
+    // based on x pos of a mouse drag/click, update the percent and normalized value of the slider
+    const progress = useCallback((posX) => {
+        const el = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!el)
+            return { value: 0, percent: 0 };
+        const rect = el.getBoundingClientRect();
+        const sliderWidth = rect.width;
+        relativeProgressRef.current = posX / sliderWidth;
+        absProgressRef.current =
+            scaleMin + relativeProgressRef.current * (scaleMax - scaleMin);
+    }, [scaleMax, scaleMin]);
+    // take a mouse pos and sets the slider position accordingly
+    // returns the pos value making sure it's in bounds
+    const updateSlider = useCallback((e) => {
+        const newPos = pointerPosition(e);
+        const el = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!el)
+            return 0;
+        const rect = el.getBoundingClientRect();
+        const sliderWidth = rect.width;
+        let pos = newPos - rect.x;
+        if (pos > sliderWidth - padding)
+            pos = sliderWidth;
+        else if (pos < padding)
+            pos = 0;
+        const max = pos === sliderWidth;
+        setTrackAndHead(pos, max);
+        return pos;
+    }, [setTrackAndHead, padding]);
+    // on mouse move, push slider to the updated mouse position and trigger the update events
+    // use ref values in the call back to avoid state issues
+    const handleMouseMove = useCallback((e) => {
+        e.preventDefault();
+        const el = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (el) {
+            const pos = updateSlider(e); // return new pixel pos and updates head/track
+            progress(pos); // update the slider progress
+            debouncedOnChange(absProgressRef.current, relativeProgressRef.current); // debounce updates
+        }
+    }, [progress, updateSlider, debouncedOnChange]);
+    // on mouse up, push slider to the updated mouse up position and trigger the update events
+    // also cleaning up the mouse move and mouse up listeners attached to the window
+    const handleMouseUp = useCallback((e) => {
+        e.preventDefault();
+        const el = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (el) {
+            const pos = updateSlider(e); // return new pixel pos and updates head/track
+            progress(pos);
+            debouncedOnChange.cancel(); // cancel current debounce if any
+            onDragChange(absProgressRef.current, relativeProgressRef.current); // immediate update
+            onChange(absProgressRef.current, relativeProgressRef.current);
+        }
+        globalThis.removeEventListener('mousemove', handleMouseMove, false);
+        globalThis.removeEventListener('touchmove', handleMouseMove, false);
+        globalThis.removeEventListener('mouseup', handleMouseUp, false);
+        globalThis.removeEventListener('touchend', handleMouseUp, false);
+    }, [
+        handleMouseMove,
+        progress,
+        updateSlider,
+        debouncedOnChange,
+        onDragChange,
+        onChange,
+    ]);
+    // On mouse down push the progress of then slider to the mouse down point
+    // and trigger events - add the drag and mouse up window listeners
+    const handleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        globalThis.addEventListener('mousemove', handleMouseMove, false);
+        globalThis.addEventListener('touchmove', handleMouseMove, false);
+        globalThis.addEventListener('mouseup', handleMouseUp, false);
+        globalThis.addEventListener('touchend', handleMouseUp, false);
+        const el = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (el) {
+            const pos = updateSlider(e); // return new pixel pos and updates head/track
+            progress(pos);
+            debouncedOnChange.cancel(); // cancel current debounce if any
+            onChange(absProgressRef.current, relativeProgressRef.current); // immediate update
+            onDragChange(absProgressRef.current, relativeProgressRef.current);
+        }
+    }, [
+        handleMouseMove,
+        handleMouseUp,
+        onChange,
+        onDragChange,
+        progress,
+        updateSlider,
+        debouncedOnChange,
+    ]);
+    // on mount, set the initial position of the slider
+    useEffect(() => {
+        if (didMount.current && value === absProgressRef.current)
+            return;
+        initialProgress(value);
+    }, [value, initialProgress]);
+    // set up slider
+    useEffect(() => {
+        const el = ref === null || ref === void 0 ? void 0 : ref.current;
+        el === null || el === void 0 ? void 0 : el.addEventListener('mousedown', handleMouseDown, false);
+        el === null || el === void 0 ? void 0 : el.addEventListener('touchstart', handleMouseDown, false);
+        return () => {
+            el === null || el === void 0 ? void 0 : el.removeEventListener('mousedown', handleMouseDown, false);
+            el === null || el === void 0 ? void 0 : el.removeEventListener('touchstart', handleMouseDown, false);
+        };
+    }, [handleMouseDown]);
+    // respond to size changes triggered by browser resizing as opposed to props
+    // note: this causes an extra render with every width prop change
+    useEffect(() => {
+        var _a;
+        const sliderWidth = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+        if (!sliderWidth || size.width === 0)
+            return;
+        const max = relativeProgressRef.current === 1;
+        setTrackAndHead(relativeProgressRef.current * sliderWidth, max);
+    }, [size.width, setTrackAndHead]);
+    // memo head color
+    const trackHeadColor = useMemo(() => {
+        if (headType === 'none')
+            return 'transparent';
+        return headColor !== null && headColor !== void 0 ? headColor : 'var(--core-text-primary)';
+    }, [headColor, headType]);
+    // memo head height
+    const headSize = useMemo(() => {
+        if (headType === 'none')
+            return height;
+        return trackHeadSize;
+    }, [trackHeadSize, headType, height]);
+    // memo head width
+    const headWidth = useMemo(() => {
+        if (headType === 'round')
+            return trackHeadSize;
+        return trackHeadWidth;
+    }, [headType, trackHeadSize, trackHeadWidth]);
+    // set container width
+    const setWidth = useMemo(() => {
+        if (width && typeof width === 'string') {
+            if (width === 'auto')
+                return '100%';
+            return width;
+        }
+        return `${width !== null && width !== void 0 ? width : 100}px`;
+    }, [width]);
+    // memo css vars
+    const cssVars = useMemo(() => {
+        return {
+            '--slider-padding': `${padding}px`,
+            '--slider-width': setWidth,
+            '--slider-height': `${height}px`,
+            '--slider-touch-height': `${touchHeight}px`,
+            '--slider-cursor': cursor,
+            '--slider-head-display': height ? 'block' : 'none',
+            '--slider-head-radius': headType === 'round' ? '100%' : '0px',
+            '--slider-head-size': `${headSize}px`,
+            '--slider-head-width': `${headWidth}px`,
+            '--slider-head-color': trackHeadColor,
+            '--slider-progress-color': progressColor !== null && progressColor !== void 0 ? progressColor : 'var(--core-text-primary)',
+            '--slider-track-color': trackColor !== null && trackColor !== void 0 ? trackColor : 'var(--core-surface-secondary)',
+        };
+    }, [
+        padding,
+        height,
+        touchHeight,
+        cursor,
+        headWidth,
+        progressColor,
+        trackColor,
+        headSize,
+        trackHeadColor,
+        headType,
+        setWidth,
+    ]);
+    return (jsx("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), ref: ref }, rest, { children: jsx("div", { className: css.trackBg, children: jsx("div", { className: css.track, ref: track, children: jsx("div", { className: css.trackHead, ref: head }) }) }) })));
+});
+
+export { Slider as S };

package/dist/esm/chunks/Spacer-DbZSG5x3.js

@@ -0,0 +1,14 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+
+const Spacer = React.memo((props) => {
+    const { size = 8 } = props, divAttributes = __rest(props, ["size"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const spacerStyle = useMemo(() => ({ height: size, minHeight: size, maxHeight: size }), [size]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    return (jsx("div", Object.assign({ id: divId, className: divClass.trim(), style: Object.assign(Object.assign({}, divStyle), spacerStyle) }, rest)));
+});
+
+export { Spacer as S };