@apple-pie/slice 0.0.5 → 0.0.7

package/dist/cjs/chunks/Pager-CN2z8M9E.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), utils = require("./utils-BsBHecUI.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "Pager-module_wrapper__L8AZG flexBox-module_row__PWxbe", css_bullet = "Pager-module_bullet__tj-vE flexBox-module_row__PWxbe", css_selected = "Pager-module_selected__EdNnR";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.Pager-module_wrapper__L8AZG {\n\tgap: var(--pager-gap);\n\twidth: 100%;\n\tz-index: var(--elevation-status);\n}\n\n.Pager-module_bullet__tj-vE {\n\twidth: var(--pager-size);\n\theight: var(--pager-size);\n\tmax-width: var(--pager-size);\n\tmax-height: var(--pager-size);\n\tbackground: var(--pager-color);\n\tborder-radius: 100%;\n\tborder: 0;\n\tcursor: pointer;\n\ttransition: background 0.25s ease-in-out 0s;\n\t&:hover {\n\t\tbackground: var(--pager-colorHover);\n\t}\n}\n\n.Pager-module_selected__EdNnR {\n\tbackground: var(--pager-colorOn);\n\t&:hover {\n\t\tbackground: var(--pager-colorOn);\n\t}\n}\n");
+
+const Pager = React.memo(props => {
+    const {size: size = 8, index: index = 0, color: color, colorHover: colorHover, colorOn: colorOn, pages: pages = 2, gap: gap = 4, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "index", "color", "colorHover", "colorOn", "pages", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [selected, setSelected] = React.useState(index), bullets = React.useMemo(() => Array.from({
+        length: pages
+    }, (_, i) => i), [ pages ]);
+    React.useEffect(() => setSelected(index), [ index ]);
+    const handleClick = React.useCallback(i => {
+        setSelected(i), onChange(i);
+    }, [ onChange ]), cssVars = React.useMemo(() => ({
+        "--pager-gap": `${gap}px`,
+        "--pager-size": `${size}px`,
+        "--pager-color": null != color ? color : "var(--core-text-disabled)",
+        "--pager-colorOn": null != colorOn ? colorOn : "var(--core-text-primary)",
+        "--pager-colorHover": null != colorHover ? colorHover : "var(--core-text-disabled)"
+    }), [ gap, size, color, colorOn, colorHover ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        className: `${css_wrapper}${divClass}`
+    }, rest, {
+        children: bullets.map(bulletId => jsxRuntime.jsx("input", {
+            className: `${css_bullet} ${selected === bulletId ? css_selected : ""}`,
+            type: "button",
+            onClick: () => handleClick(bulletId),
+            onKeyDown: e => utils.accessibleKeyDown(e, () => handleClick(bulletId)),
+            onTouchStart: () => handleClick(bulletId),
+            tabIndex: bulletId
+        }, `paging_bullet_${bulletId}`))
+    }));
+});
+
+exports.Pager = Pager;

package/dist/cjs/chunks/ProgressIndicator-BbrZ7Aoc.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var styleInject_es = require("./style-inject.es-CMuL-BfJ.js");
+
+const DoneCheck = React.memo(props => {
+    const theme = hooks_useTheme.useTheme(), {size: size = 88, stroke: stroke = .75, duration: duration = .35, bounce: bounce = .7, delay: delay = .5, color: color = theme.current.colors["feedback-positive"], didEnd: didEnd = () => null, didStart: didStart = () => null, play: play = !1} = props, svgAttributes = tslib_es6.__rest(props, [ "size", "stroke", "duration", "bounce", "delay", "color", "didEnd", "didStart", "play" ]), {id: svgId, className: className, style: style} = svgAttributes, rest = tslib_es6.__rest(svgAttributes, [ "id", "className", "style" ]), [check, animateCheck] = react.useAnimate(), [isPresent, safeToRemove] = react.usePresence();
+    React.useEffect(() => {
+        const variants_initial = {
+            scale: .9
+        }, variants_animate = {
+            scale: 1
+        }, spring = {
+            type: "spring",
+            time: duration,
+            bounce: bounce,
+            delay: delay
+        }, instant = {
+            ease: "linear",
+            duration: 0,
+            delay: 0
+        };
+        if (isPresent && play) {
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+                didStart(), yield animateCheck(check.current, variants_initial, instant), yield animateCheck(check.current, variants_animate, spring), 
+                didEnd();
+            }))();
+        } else if (isPresent && !play) {
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+                yield animateCheck(check.current, variants_animate, instant);
+            }))();
+        } else if (!isPresent) {
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+                yield animateCheck(check.current, variants_initial, instant), safeToRemove();
+            }))();
+        }
+    }, [ isPresent, play, animateCheck, check, didEnd, didStart, safeToRemove, bounce, delay, duration ]);
+    return jsxRuntime.jsxs("svg", Object.assign({
+        id: svgId,
+        className: className,
+        ref: check,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        scale: .9,
+        viewBox: "0 0 20 20",
+        fill: "none",
+        style: null != style ? style : {},
+        "aria-label": "Checkmark icon"
+    }, rest, {
+        children: [ jsxRuntime.jsx("title", {
+            children: "Checkmark"
+        }), jsxRuntime.jsx("path", {
+            d: "M 1 1 L 19 1 L 19 19 L 1 19 Z",
+            fill: "transparent"
+        }), jsxRuntime.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
+        }), jsxRuntime.jsx("path", {
+            d: "M 6.5 9.5 L 9 12 L 13.5 7.5",
+            fill: "transparent",
+            strokeWidth: stroke,
+            stroke: color
+        }) ]
+    }));
+});
+
+var css_container = "ProgressIndicator-module_container__CZDPk flexBox-module_column__MP2Xd";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\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\tz-index: var(--elevation-status);\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");
+
+const OpenCircle = (size, secondsPerSpin, color, stroke = 1.5, playing = !1) => jsxRuntime.jsxs(react.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: [ jsxRuntime.jsx("title", {
+        children: "Loading"
+    }), jsxRuntime.jsx("defs", {
+        children: jsxRuntime.jsxs("linearGradient", {
+            id: "strokeFill",
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            children: [ jsxRuntime.jsx("stop", {
+                offset: "0%",
+                stopColor: color,
+                stopOpacity: 1
+            }), jsxRuntime.jsx("stop", {
+                offset: "50%",
+                stopColor: color,
+                stopOpacity: 1
+            }), jsxRuntime.jsx("stop", {
+                offset: "100%",
+                stopColor: color,
+                stopOpacity: 0
+            }) ]
+        })
+    }), jsxRuntime.jsx(react.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)"
+    }) ]
+});
+
+exports.DoneCheck = DoneCheck, exports.ProgressIndicator = function(props) {
+    const theme = hooks_useTheme.useTheme(), {size: size = 20, secondsPerSpin: secondsPerSpin = 1, show: show = !1, color: color = theme.current.colors["core-icon-primary"], stroke: stroke = 1.5, inline: inline = !1, duration: duration, didStart: didStart = () => null, didStop: didStop = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = React.useState(show), timer = React.useRef(null);
+    React.useEffect(() => (show ? (setPlaying(!0), didStart(), duration && (timer.current = setTimeout(() => {
+        setPlaying(!1), didStop();
+    }, 1e3 * duration))) : (setPlaying(!1), didStop()), () => {
+        (null == timer ? void 0 : timer.current) && clearTimeout(timer.current);
+    }), [ show, didStart, didStop, duration ]);
+    const cssVars = React.useMemo(() => ({
+        "--pi-position": inline ? "relative" : "absolute",
+        "--pi-inset": inline ? "unset" : "0",
+        "--pi-icon-size": `${null != size ? size : 0}px`
+    }), [ inline, size ]), openCircle = React.useMemo(() => OpenCircle(size, secondsPerSpin, color, stroke, playing), [ size, secondsPerSpin, color, stroke, playing ]);
+    return jsxRuntime.jsx(react.AnimatePresence, {
+        initial: !0,
+        children: show && jsxRuntime.jsx(react.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
+        }))
+    });
+};

package/dist/cjs/chunks/PromptInput-BXDqUXFQ.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var Button = require("./Button-DFAWHJmQ.js"), FileList = require("./FileList-J2EgJyCo.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
+    wrapperBg: "PromptInput-module_wrapperBg__9QWdq flexBox-module_columnStart__Kg8cV",
+    bgRotate: "PromptInput-module_bgRotate__xvvtD",
+    textareaWrapper: "PromptInput-module_textareaWrapper__4hWyM flexBox-module_columnStart__Kg8cV",
+    attachments: "PromptInput-module_attachments__R0egZ flexBox-module_rowStart__nJZnW",
+    clear: "PromptInput-module_clear__tjFZ- flexBox-module_row__PWxbe",
+    buttonBar: "PromptInput-module_buttonBar__9Ol9O flexBox-module_rowBetween__27lKK",
+    toolBar: "PromptInput-module_toolBar__CmIf- flexBox-module_rowStart__nJZnW",
+    textarea: "PromptInput-module_textarea__ZuzrC",
+    s: "PromptInput-module_s__Z684A type-module_body-s-regular__8-FO-",
+    m: "PromptInput-module_m__NxLh6 type-module_body-m-regular__Qtp5G",
+    l: "PromptInput-module_l__BaGnx type-module_body-l-regular__Ar4d3"
+};
+
+styleInject_es.styleInject('.flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.PromptInput-module_wrapperBg__9QWdq {\n\tposition: relative;\n\t--border-angle: 0turn;\n\t--conic-gradient-dark: conic-gradient(\n\t\tfrom var(--border-angle),\n\t\tvar(--core-text-special) 0deg,\n\t\tvar(--core-text-special) 45deg,\n\t\tvar(--core-text-special) 90deg,\n\t\tvar(--array-magenta-label) 135deg,\n\t\tvar(--array-magenta-label) 180deg,\n\t\tvar(--array-magenta-label) 225deg,\n\t\tvar(--array-land) 270deg,\n\t\tvar(--array-land) 315deg,\n\t\tvar(--array-land) 360deg\n\t);\n\t--conic-gradient-light: conic-gradient(\n\t\tfrom var(--border-angle),\n\t\tvar(--core-text-special) 0deg,\n\t\tvar(--core-text-special) 45deg,\n\t\tvar(--core-text-special) 90deg,\n\t\tvar(--array-magenta-label) 135deg,\n\t\tvar(--array-magenta-label) 180deg,\n\t\tvar(--array-magenta-label) 225deg,\n\t\tvar(--array-land-label) 270deg,\n\t\tvar(--array-land-label) 315deg,\n\t\tvar(--array-land-label) 360deg\n\t);\n\tz-index: 0;\n\theight: auto;\n\tmax-height: var(--prompt-max-height);\n\twidth: 100%;\n\tborder-radius: var(--prompt-border-radius);\n\toverflow: hidden;\n\tpadding: var(--prompt-border-width) !important;\n\tbackground: var(--prompt-border-color);\n\tanimation: PromptInput-module_bgRotate__xvvtD 3s linear infinite;\n\tanimation-play-state: var(--prompt-state);\n\ttransition: background 0.25s ease-in-out 0s;\n}\n\n@property --border-angle {\n\tsyntax: "<angle>";\n\tinherits: false;\n\tinitial-value: 0turn;\n}\n\n@keyframes PromptInput-module_bgRotate__xvvtD {\n\t100% {\n\t\t--border-angle: 1turn;\n\t}\n}\n\n.PromptInput-module_textareaWrapper__4hWyM {\n\talign-items: flex-start;\n\twidth: 100%;\n\theight: min-content;\n\tmax-height: 400px;\n\toverflow: hidden;\n\toverflow-y: auto;\n\tborder-radius: var(--prompt-inner-border-radius);\n\tbackground: var(--core-surface-secondary);\n}\n\n.PromptInput-module_attachments__R0egZ {\n\tpadding: 16px 16px 0 16px !important;\n\twidth: 100%;\n}\n\n.PromptInput-module_clear__tjFZ- {\n\tpadding: 12px 8px 0 0 !important;\n\tdisplay: var(--prompt-clear) !important;\n}\n\n.PromptInput-module_buttonBar__9Ol9O {\n\tpadding: 8px 16px 16px 16px !important;\n\twidth: 100%;\n\tcursor: text;\n}\n\n.PromptInput-module_toolBar__CmIf- {\n\tflex: 1;\n\tgap: 8px;\n}\n\n.PromptInput-module_textarea__ZuzrC {\n\tpadding: 16px !important;\n\tbox-sizing: border-box;\n\tfield-sizing: content;\n\twidth: 100%;\n\tresize: none;\n\tborder: 0;\n\toutline: none;\n\tcolor: var(--core-text-primary);\n\tbackground: transparent;\n\tborder-radius: var(--prompt-border-radius);\n\t&::placeholder {\n\t\tcolor: var(--core-text-disabled);\n\t}\n}\n\n.PromptInput-module_s__Z684A {\n}\n\n.PromptInput-module_m__NxLh6 {\n}\n\n.PromptInput-module_l__BaGnx {\n}\n');
+
+const PromptInputBase = React.forwardRef((props, ref) => {
+    const {children: children, attachments: attachments = [], value: value = "", working: working = !1, maxHeight: maxHeight, borderStyle: borderStyle = "gradient", borderColor: borderColor, borderColorOn: borderColorOn, borderAnimate: borderAnimate = !0, borderWidth: borderWidth = 1, borderRadius: borderRadius = 8, focused: focused = !1, placeholder: placeholder = "Ask me anything ...", placeholderWorking: placeholderWorking = "Working ...", submitClears: submitClears = !0, submitEnablesStop: submitEnablesStop = !0, enterSubmits: enterSubmits = !0, attachButton: attachButton = !0, sendButton: sendButton = !0, stopEnabled: stopEnabled = !1, textSize: textSize = "m", maxLength: maxLength, toolbarGap: toolbarGap = 8, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, onStop: onStop, onAttachmentsChange: onAttachmentsChange} = props, {isDark: isDark} = hooks_useTheme.useTheme(), [isFocused, setIsFocused] = React.useState(null != focused && focused), [isWorking, setIsWorking] = React.useState(null != working && working), [isStopEnabled, setIsStopEnabled] = React.useState(stopEnabled), [textValue, setTextValue] = React.useState(value), textAreaRef = React.useRef(null), handleFocus = React.useCallback(() => {
+        var _a, _b;
+        setIsFocused(!0), null === (_a = null == textAreaRef ? void 0 : textAreaRef.current) || void 0 === _a || _a.focus(), 
+        null == onFocus || onFocus(null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
+    }, [ onFocus, attachments ]), handleBlur = React.useCallback(() => {
+        var _a, _b;
+        setIsFocused(!1), null === (_a = textAreaRef.current) || void 0 === _a || _a.blur(), 
+        null == onBlur || onBlur(null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
+    }, [ onBlur, attachments ]), handleAttachmentsChange = React.useCallback(newFiles => {
+        var _a;
+        null == onAttachmentsChange || onAttachmentsChange(newFiles), null == onChange || onChange(null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value, newFiles);
+    }, [ onAttachmentsChange, onChange ]), handleChange = React.useCallback(e => {
+        const newValue = e.target.value;
+        setTextValue(newValue), null == onChange || onChange(newValue, attachments);
+    }, [ onChange, attachments ]), handleSubmit = React.useCallback(() => {
+        var _a;
+        if (isWorking || isStopEnabled) return;
+        const currentValue = null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value;
+        currentValue && (null == onSubmit || onSubmit(currentValue, attachments), setIsWorking(!0), 
+        submitClears && setTextValue(""), submitEnablesStop && setIsStopEnabled(!0), handleBlur());
+    }, [ submitClears, onSubmit, handleBlur, submitEnablesStop, isWorking, isStopEnabled, attachments ]), handleStop = React.useCallback(() => {
+        setIsWorking(!1), setIsStopEnabled(!1), null == onStop || onStop(), handleFocus();
+    }, [ onStop, handleFocus ]), handleKeyDown = React.useCallback(e => {
+        if ("Enter" === e.key && enterSubmits) {
+            if (e.preventDefault(), isWorking) return;
+            handleSubmit();
+        }
+    }, [ handleSubmit, isWorking, enterSubmits ]), handleClickSend = React.useCallback(e => {
+        e.preventDefault(), e.stopPropagation(), isWorking && !isStopEnabled || (isStopEnabled ? handleStop() : handleSubmit());
+    }, [ handleSubmit, handleStop, isStopEnabled, isWorking ]), handleClickAttach = React.useCallback(e => {
+        e.preventDefault(), e.stopPropagation();
+    }, []), handleClickButtonBar = React.useCallback(e => {
+        e.preventDefault(), isWorking || handleFocus();
+    }, [ handleFocus, isWorking ]), setBorderColor = React.useMemo(() => {
+        if ("gradient" === borderStyle) {
+            const radial = isDark ? "var(--conic-gradient-dark)" : "var(--conic-gradient-light)";
+            return isWorking && borderAnimate ? radial : isFocused ? null != borderColorOn ? borderColorOn : radial : null != borderColor ? borderColor : radial;
+        }
+        return "solid" === borderStyle ? isWorking || isFocused ? null != borderColorOn ? borderColorOn : "var(--core-outline-special)" : null != borderColor ? borderColor : "transparent" : "transparent";
+    }, [ borderStyle, isFocused, borderColorOn, borderColor, isWorking, borderAnimate, isDark ]), setPlaceholder = React.useMemo(() => isWorking && placeholderWorking ? placeholderWorking : placeholder, [ isWorking, placeholder, placeholderWorking ]), setSendIconColor = React.useMemo(() => isStopEnabled || isWorking ? "var(--core-text-primary)" : "" !== textValue ? "var(--core-text-light)" : "var(--core-text-disabled)", [ textValue, isWorking, isStopEnabled ]), sendButtonState = React.useMemo(() => isStopEnabled || "" !== textValue || isWorking ? "normal" : "disabled", [ textValue, isStopEnabled, isWorking ]), attachState = React.useMemo(() => isWorking ? "disabled" : "normal", [ isWorking ]);
+    React.useEffect(() => {
+        var _a, _b;
+        focused ? null === (_a = textAreaRef.current) || void 0 === _a || _a.focus() : null === (_b = textAreaRef.current) || void 0 === _b || _b.blur();
+    }, [ focused ]), React.useEffect(() => {
+        var _a;
+        (null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value) !== value && setTextValue(value);
+    }, [ value ]), React.useEffect(() => {
+        void 0 !== working && setIsWorking(working);
+    }, [ working ]), React.useEffect(() => setIsStopEnabled(stopEnabled), [ stopEnabled ]);
+    const cssVars = React.useMemo(() => ({
+        "--prompt-border-color": setBorderColor,
+        "--prompt-max-height": maxHeight ? `${maxHeight}px` : "unset",
+        "--prompt-border-width": borderWidth ? `${borderWidth}px` : "0",
+        "--prompt-state": isWorking && borderAnimate ? "running" : "paused",
+        "--prompt-border-radius": borderRadius ? `${borderRadius}px` : "8px",
+        "--prompt-inner-border-radius": borderRadius ? borderRadius - 1 + "px" : "7px"
+    }), [ isWorking, borderAnimate, setBorderColor, borderWidth, borderRadius, maxHeight ]);
+    return jsxRuntime.jsx("div", {
+        className: css.wrapperBg,
+        ref: ref,
+        style: cssVars,
+        children: jsxRuntime.jsxs("div", {
+            className: css.textareaWrapper,
+            children: [ attachments.length > 0 && jsxRuntime.jsx("div", {
+                className: css.attachments,
+                children: jsxRuntime.jsx(FileList.FileList, {
+                    files: attachments,
+                    onChange: handleAttachmentsChange,
+                    bgColor: "var(--core-surface-primary)",
+                    size: "s",
+                    direction: "row",
+                    gap: 8,
+                    iconSize: 24
+                })
+            }), jsxRuntime.jsx("textarea", {
+                id: "promptInput",
+                name: "promptInput",
+                className: `${css.textarea} ${css[textSize]}`,
+                ref: textAreaRef,
+                value: null != textValue ? textValue : "",
+                onChange: handleChange,
+                placeholder: setPlaceholder,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                maxLength: maxLength,
+                rows: 1
+            }), (children || attachButton || sendButton) && jsxRuntime.jsxs("div", {
+                className: css.buttonBar,
+                onMouseDown: handleClickButtonBar,
+                children: [ jsxRuntime.jsxs("div", {
+                    className: css.toolBar,
+                    style: {
+                        gap: toolbarGap
+                    },
+                    children: [ attachButton && jsxRuntime.jsx(Button.Button, {
+                        round: !0,
+                        label: void 0,
+                        variant: "outline",
+                        iconLeft: "plus",
+                        iconSize: 20,
+                        state: attachState,
+                        onMouseDown: handleClickAttach
+                    }), children ]
+                }), sendButton && jsxRuntime.jsx(Button.Button, {
+                    round: !0,
+                    label: void 0,
+                    variant: isStopEnabled ? "outline" : "solid",
+                    iconLeft: isStopEnabled ? "stop" : "arrow up",
+                    iconSize: isStopEnabled ? 16 : 20,
+                    state: sendButtonState,
+                    bgColorDisabled: "var(--core-outline-primary)",
+                    progress: !isStopEnabled,
+                    working: !isStopEnabled && isWorking,
+                    onMouseDown: handleClickSend,
+                    iconColor: setSendIconColor
+                }) ]
+            }) ]
+        })
+    });
+});
+
+PromptInputBase.displayName = "PromptInput";
+
+const PromptInput = React.memo(PromptInputBase);
+
+exports.PromptInput = PromptInput;

package/dist/cjs/chunks/RadioButton-GKRhZEmb.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var IconButton = require("./IconButton-B53y3z1_.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "RadioButton-module_wrapper__ezvz- flexBox-module_row__PWxbe", css_radioIcon = "RadioButton-module_radioIcon__6ddS9 flexBox-module_column__MP2Xd", css_radioTitle = "RadioButton-module_radioTitle__R1R2D flexBox-module_rowStart__nJZnW type-module_body-m-regular__Qtp5G", css_radioSummary = "RadioButton-module_radioSummary__-RRdT flexBox-module_rowStart__nJZnW type-module_body-s-regular__8-FO-", css_radioContent = "RadioButton-module_radioContent__Fq-Ry flexBox-module_columnStart__Kg8cV";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.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");
+
+const RadioButton = React.memo(props => {
+    const theme = hooks_useTheme.useTheme(), {option: option, selected: selected = !1, deselect: deselect = !0, tabIndex: tabIndex = 1, wrap: wrap = !1, list: list = !1, hideRadio: hideRadio = !1, toggleIcon: toggleIcon = !0, noFrame: noFrame = !1, iconColor: iconColor, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "option", "selected", "deselect", "tabIndex", "wrap", "list", "hideRadio", "toggleIcon", "noFrame", "iconColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isSelected, setIsSelected] = React.useState(selected);
+    React.useEffect(() => setIsSelected(selected), [ selected ]);
+    const handleChange = React.useCallback(() => {
+        isSelected && !deselect || (setIsSelected(!isSelected), onChange(option, !isSelected));
+    }, [ isSelected, deselect, onChange, option ]), handleKeyDown = React.useCallback(e => {
+        "Space" === e.code && (e.preventDefault(), e.stopPropagation(), handleChange());
+    }, [ handleChange ]), setIconColor = React.useMemo(() => iconColor || (toggleIcon && isSelected ? theme.current.colors["core-button-primary"] : theme.current.colors["core-icon-primary"]), [ iconColor, toggleIcon, isSelected, theme ]), iconName = React.useMemo(() => toggleIcon && isSelected ? "checked" : "unchecked", [ toggleIcon, isSelected ]), setFlex = React.useMemo(() => list ? "unset" : wrap ? "40%" : "1", [ list, wrap ]), cssVars = React.useMemo(() => ({
+        "--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 jsxRuntime.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 && jsxRuntime.jsx("div", {
+            className: css_radioIcon,
+            children: jsxRuntime.jsx(IconButton.IconButton, {
+                toggle: !1,
+                icon: iconName,
+                color: setIconColor,
+                frameSize: 20,
+                iconSize: 20
+            })
+        }), jsxRuntime.jsxs("div", {
+            className: css_radioContent,
+            children: [ jsxRuntime.jsx("div", {
+                className: css_radioTitle,
+                children: option.title
+            }), option.description && "" !== option.description && jsxRuntime.jsx("div", {
+                className: css_radioSummary,
+                children: option.description
+            }) ]
+        }) ]
+    }));
+});
+
+exports.RadioButton = RadioButton;

package/dist/cjs/chunks/RadioButtonList-CFpZmyAX.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), RadioButton = require("./RadioButton-GKRhZEmb.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "RadioButtonList-module_wrapper__UMlAV", css_column = "RadioButtonList-module_column__E9MfY flexBox-module_columnStart__Kg8cV", css_row = "RadioButtonList-module_row__l88Vt flexBox-module_rowStart__nJZnW";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\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");
+
+const RadioButtonList = React.memo(props => {
+    const {options: options = [], selectedIndexes: selectedIndexes = null, selectedOptions: selectedOptions = null, label: label = null, deselect: deselect = !1, multiSelect: multiSelect = !1, wrap: wrap = !1, tabIndexSeed: tabIndexSeed = 0, spacer: spacer = "none", custom: custom = 0, gap: gap = 16, hideRadio: hideRadio = !1, noFrame: noFrame = !1, toggleIcon: toggleIcon = !0, iconColor: iconColor, iconSelectedColor: iconSelectedColor, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "options", "selectedIndexes", "selectedOptions", "label", "deselect", "multiSelect", "wrap", "tabIndexSeed", "spacer", "custom", "gap", "hideRadio", "noFrame", "toggleIcon", "iconColor", "iconSelectedColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [selected, setSelected] = React.useState(selectedIndexes);
+    React.useEffect(() => setSelected(selectedIndexes), [ selectedIndexes ]), React.useEffect(() => {
+        if (!selectedOptions || !options) return;
+        const selections = [];
+        for (const item of selectedOptions) for (let i = 0; i < options.length; i++) {
+            options[i].fieldName === item && selections.push(i);
+        }
+        setSelected(selections);
+    }, [ selectedOptions, options ]);
+    const isSelected = React.useCallback(index => !!selected && selected.includes(index), [ selected ]), doMultiSelection = React.useCallback((selection, state) => {
+        let indexesSelected = selected ? [ ...selected ] : [];
+        if (!state && selected) {
+            const removeAt = indexesSelected.indexOf(selection);
+            indexesSelected.splice(removeAt, 1);
+        } else if (state) {
+            indexesSelected = selected ? [ ...selected ] : [];
+            indexesSelected.includes(selection) || indexesSelected.push(selection);
+        }
+        let updatedSelections = [];
+        for (const index of indexesSelected || []) updatedSelections && updatedSelections.push(options[index]);
+        updatedSelections.length < 1 && (updatedSelections = null), setSelected(indexesSelected || null), 
+        onChange(updatedSelections, indexesSelected || null);
+    }, [ selected, options, onChange ]), doSingleSelection = React.useCallback((selection, state) => {
+        onChange(state ? [ options[selection] ] : [], state ? [ selection ] : []), setSelected(state ? [ selection ] : null);
+    }, [ options, onChange ]), handleChange = React.useCallback((selection, state) => {
+        multiSelect ? doMultiSelection(selection, state) : doSingleSelection(selection, state);
+    }, [ multiSelect, doMultiSelection, doSingleSelection ]), renderedOptions = React.useMemo(() => options.map((option, i) => jsxRuntime.jsx(RadioButton.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 ]), margin = React.useMemo(() => "none" === spacer ? 0 : "custom" === spacer ? custom : 0, [ spacer, custom ]), cssVars = React.useMemo(() => ({
+        "--rb-list-flex-wrap": wrap ? "wrap" : "nowrap",
+        "--rb-list-margin-bottom": noFrame ? 0 : `${margin}px`,
+        "--rb-gap": `${gap}px`
+    }), [ wrap, margin, gap, noFrame ]);
+    return jsxRuntime.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 ]
+    }));
+});
+
+exports.RadioButtonList = RadioButtonList;