@apple-pie/slice 0.1.8 → 0.1.10

package/dist/esm/chunks/{Chip-BPF7fBba.mjs → Chip-BqneFUOR.mjs}

@@ -2,15 +2,9 @@ import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 
-import { useTheme } from "../hooks/useTheme.mjs";
-
-import "../theme/colors.mjs";
-
-import "../hooks/useWindow.mjs";
-
-import { a as accessibleKeyDown } from "./misc-N8KLjOXc.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-N8KLjOXc.mjs";
 
 import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
@@ -26,16 +20,12 @@ var css = {
     l: "Chip-module_l__3MqPN type-module_body-l-regular__lOYbg"
 };
 
-styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__ZAFft {\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__s3KvF {\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__Lhqqq {\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__vRHSP {\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__tjdFc {\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__Iy-VX {\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__LuQBA {\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__uW1on {\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__UBcvQ {\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__lOYbg {\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__BqRC7 {\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__Fh2dt {\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__pF2kC {\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__BeyrH {\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__Ruknj {\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__z8L3G {\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__0O3g6 {\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__KXxEB {\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__cJeEA {\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__eRe05 {\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__Xmwtf {\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__5q1m3 {\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__k9VFV {\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.Chip-module_chip__0nys- {\n\tpadding: var(--ui-chip-padding) !important;\n\twidth: min-content;\n\tmin-height: 30px;\n\tgap: var(--ui-chip-gap);\n\tbackground: var(--ui-chip-background);\n\tline-height: 1em;\n\tcolor: var(--ui-chip-color);\n\tborder: var(--ui-chip-border) solid var(--ui-chip-border-color);\n\tborder-radius: var(--ui-chip-border-radius);\n\ttransition: all var(--motion-water-duration) var(--motion-water) 0s;\n\tcursor: pointer;\n\twhite-space: nowrap;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.Chip-module_icon__dtR-K {\n\theight: var(--ui-chip-icon-size);\n\tmin-height: var(--ui-chip-icon-size);\n\twidth: var(--ui-chip-icon-size);\n\tmin-width: var(--ui-chip-icon-size);\n}\n\n.Chip-module_s__2KTXi {\n}\n\n.Chip-module_m__l2u3N {\n}\n\n.Chip-module_l__3MqPN {\n}\n");
+styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__ZAFft {\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__s3KvF {\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__Lhqqq {\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__vRHSP {\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__tjdFc {\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__Iy-VX {\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__LuQBA {\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__uW1on {\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__UBcvQ {\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__lOYbg {\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__BqRC7 {\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__Fh2dt {\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__pF2kC {\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__BeyrH {\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__Ruknj {\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__z8L3G {\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__0O3g6 {\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__KXxEB {\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__cJeEA {\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__eRe05 {\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__Xmwtf {\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__5q1m3 {\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__k9VFV {\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.Chip-module_chip__0nys- {\n\tpadding: var(--ui-chip-padding) !important;\n\twidth: min-content;\n\tmin-height: 30px;\n\tgap: var(--ui-chip-gap);\n\tbackground: var(--ui-chip-bg-color);\n\tline-height: 1em;\n\tcolor: var(--ui-chip-label-color);\n\tborder: var(--ui-chip-border-size) solid var(--ui-chip-border-color);\n\tborder-radius: var(--ui-chip-border-radius);\n\ttransition: all var(--motion-water-duration) var(--motion-water) 0s;\n\tcursor: var(--ui-chip-cursor);\n\twhite-space: nowrap;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t&:hover {\n\t\tborder-color: var(--ui-chip-border-color-hover);\n\t\tbackground: var(--ui-chip-bg-color-hover);\n\t\tcolor: var(--ui-chip-label-color-hover);\n\t}\n}\n\n.Chip-module_icon__dtR-K {\n\theight: var(--ui-chip-icon-size);\n\tmin-height: var(--ui-chip-icon-size);\n\twidth: var(--ui-chip-icon-size);\n\tmin-width: var(--ui-chip-icon-size);\n}\n\n.Chip-module_s__2KTXi {\n}\n\n.Chip-module_m__l2u3N {\n}\n\n.Chip-module_l__3MqPN {\n}\n");
 
 const Chip = React.memo(props => {
-    const theme = useTheme(), {label: label, icon: icon, background: background, disabled: disabled = !1, focused: focused = !1, variant: variant = "regular", unframed: unframed = !1, iconRight: iconRight = !1, labelSize: labelSize = "m", tooltip: tooltip, iconColor: iconColor, onToolTip: onToolTip = () => null, onClick: onClick = () => null, onMouseDown: onMouseDown = () => null} = props, divAttributes = __rest(props, [ "label", "icon", "background", "disabled", "focused", "variant", "unframed", "iconRight", "labelSize", "tooltip", "iconColor", "onToolTip", "onClick", "onMouseDown" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isFocused, setIsFocused] = useState(focused), [isHovered, setIsHovered] = useState(!1);
-    useEffect(() => setIsFocused(focused), [ focused ]);
-    const handleClick = useCallback(e => {
+    const {children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 20, disabled: disabled = !1, focused: focused = !1, iconPosition: iconPosition = "left", labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", labelColorHover: labelColorHover = "var(--core-text-special)", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", borderSize: borderSize = 1, borderColor: borderColor = "var(--core-text-primary)", borderColorHover: borderColorHover = "var(--core-text-special)", borderColorDisabled: borderColorDisabled = "var(--core-text-disabled)", bgColor: bgColor = "transparent", bgColorHover: bgColorHover = "var(--core-surface-secondary)", borderRadius: borderRadius = 8, paddingTops: paddingTops = 8, paddingSides: paddingSides = 16, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = __rest(props, [ "children", "label", "icon", "tooltip", "iconSize", "disabled", "focused", "iconPosition", "labelSize", "labelColor", "labelColorHover", "iconColor", "iconColorHover", "borderSize", "borderColor", "borderColorHover", "borderColorDisabled", "bgColor", "bgColorHover", "borderRadius", "paddingTops", "paddingSides", "gap", "onToolTip", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = useState(!1), handleClick = useCallback(e => {
         disabled || onClick(e);
-    }, [ disabled, onClick ]), handleMouseDown = useCallback(e => {
-        disabled || onMouseDown(e);
-    }, [ disabled, onMouseDown ]), handleMouseEnter = useCallback((enter, event) => {
+    }, [ disabled, onClick ]), handleMouseEnter = useCallback((enter, event) => {
         if (enter) {
             if (tooltip) {
                 const tip = {
@@ -51,44 +41,45 @@ const Chip = React.memo(props => {
             setIsHovered(!0);
         } else onToolTip(null), setIsHovered(!1);
     }, [ tooltip, onToolTip ]), padding = useMemo(() => {
-        const isSmall = "small" === variant;
-        return icon ? icon && iconRight ? isSmall ? "6px 6px 6px 10px" : "9px 12px 9px 16px" : isSmall ? "6px 10px 6px 6px" : "9px 16px 9px 12px" : isSmall ? "6px" : "9px 16px 9px 16px";
-    }, [ variant, icon, iconRight ]), computedIconColor = useMemo(() => iconColor || (disabled ? theme.current.colors["core-icon-disabled"] : isHovered || isFocused ? theme.current.colors["core-link-primary"] : theme.current.colors["core-text-primary"]), [ iconColor, disabled, isFocused, isHovered, theme ]), cssVars = useMemo(() => ({
+        if (!icon) return `${paddingTops}px ${paddingSides}px`;
+        return `${paddingTops}px ${"right" === iconPosition ? paddingSides - 4 : paddingSides}px ${paddingTops}px ${"right" === iconPosition ? paddingSides : paddingSides - 4}px`;
+    }, [ icon, iconPosition, paddingTops, paddingSides ]), computedIconColor = useMemo(() => disabled ? "var(--core-text-disabled)" : isHovered ? null != iconColorHover ? iconColorHover : "var(--core-text-special)" : null != iconColor ? iconColor : "var(--core-text-primary)", [ iconColor, disabled, isHovered, iconColorHover ]), cssVars = useMemo(() => ({
         "--ui-chip-padding": padding,
-        "--ui-chip-background": background || "transparent",
-        "--ui-chip-gap": "small" === variant ? "4px" : "8px",
-        "--ui-chip-color": computedIconColor,
-        "--ui-chip-border-radius": "small" === variant ? "4px" : "8px",
-        "--ui-chip-border": unframed ? "0" : "1px",
-        "--ui-chip-border-color": unframed ? "transparent" : computedIconColor
-    }), [ padding, background, variant, unframed, computedIconColor ]);
+        "--ui-chip-gap": setStyle(gap),
+        "--ui-chip-border-radius": setStyle(borderRadius),
+        "--ui-chip-border-size": setStyle(borderSize),
+        "--ui-chip-border-color": disabled ? borderColorDisabled : borderColor,
+        "--ui-chip-border-color-hover": disabled ? borderColorDisabled : borderColorHover,
+        "--ui-chip-bg-color": bgColor,
+        "--ui-chip-bg-color-hover": disabled ? bgColor : bgColorHover,
+        "--ui-chip-label-color": disabled ? "var(--core-text-disabled)" : labelColor,
+        "--ui-chip-label-color-hover": disabled ? "var(--core-text-disabled)" : labelColorHover,
+        "--ui-chip-cursor": disabled ? "default" : "pointer"
+    }), [ padding, bgColor, borderColor, borderColorDisabled, borderColorHover, borderSize, bgColorHover, labelColorHover, labelColor, gap, borderRadius, disabled ]);
     return jsxs("div", Object.assign({
         id: divId,
         className: `${css.chip}${divClass}`,
         style: Object.assign(Object.assign({}, divStyle), cssVars),
-        onMouseDown: handleMouseDown,
         onKeyDown: e => accessibleKeyDown(e, () => handleClick(e)),
         onClick: handleClick,
         onMouseEnter: e => handleMouseEnter(!0, e),
-        onMouseLeave: e => handleMouseEnter(!1, e),
-        onFocus: () => setIsFocused(!0),
-        onBlur: () => setIsFocused(!1)
+        onMouseLeave: e => handleMouseEnter(!1, e)
     }, rest, {
-        children: [ icon && !iconRight && jsx("div", {
+        children: [ icon && "right" !== iconPosition && jsx("div", {
             className: css.icon,
             children: jsx(Icon, {
                 name: icon,
-                size: "regular" === variant ? 20 : 16,
+                size: iconSize,
                 strokeColor: computedIconColor
             })
         }), jsx("div", {
             className: css[labelSize],
-            children: label
-        }), icon && iconRight && jsx("div", {
+            children: null != children ? children : label
+        }), icon && "right" === iconPosition && jsx("div", {
             className: css.icon,
             children: jsx(Icon, {
                 name: icon,
-                size: "regular" === variant ? 20 : 16,
+                size: iconSize,
                 strokeColor: computedIconColor
             })
         }) ]

package/dist/esm/chunks/{FileList-BHCGzX_0.mjs → FileList-Ckix8gUY.mjs}

@@ -10,7 +10,7 @@ import { F as FileIcon } from "./FileIcon-ePouoJpT.mjs";
 
 import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-BVwQNOcV.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-CfM2c4ty.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/IndexedDB-CJgzPHPB.mjs

@@ -0,0 +1,148 @@
+import { a as __awaiter } from "./tslib.es6-c-7TIv71.mjs";
+
+class IndexedDB {
+    constructor(storeName, options = {}) {
+        var _a, _b, _c;
+        this.db = null, this.storeName = storeName, this.databaseName = null !== (_a = options.databaseName) && void 0 !== _a ? _a : storeName, 
+        this.version = null !== (_b = options.version) && void 0 !== _b ? _b : 1, this.key = options.key, 
+        this.autoIncrement = null !== (_c = options.autoIncrement) && void 0 !== _c && _c;
+    }
+    /**
+     * Initialize the IndexedDB connection.
+     */    initialize() {
+        return __awaiter(this, arguments, void 0, function*(create = !0) {
+            if (!this.db) {
+                if ("undefined" == typeof indexedDB) throw new TypeError("IndexedDB is not supported in this environment.");
+                this.db = yield new Promise((resolve, reject) => {
+                    const request = indexedDB.open(this.databaseName, this.version);
+                    let settled = !1;
+                    const rejectOnce = error => {
+                        settled || (settled = !0, reject(error));
+                    };
+                    request.onerror = () => {
+                        var _a;
+                        rejectOnce(null !== (_a = request.error) && void 0 !== _a ? _a : new Error("Failed to open IndexedDB."));
+                    }, request.onupgradeneeded = () => {
+                        var _a;
+                        const database = request.result;
+                        database.objectStoreNames.contains(this.storeName) || (create ? database.createObjectStore(this.storeName, {
+                            keyPath: this.key,
+                            autoIncrement: this.autoIncrement
+                        }) : (null === (_a = request.transaction) || void 0 === _a || _a.abort(), rejectOnce(new Error("IndexedDB does not exist."))));
+                    }, request.onsuccess = () => {
+                        var database;
+                        database = request.result, settled ? database.close() : (settled = !0, resolve(database));
+                    };
+                });
+            }
+        });
+    }
+    /**
+     * Get a single DB value by key.
+     */    get(key) {
+        return __awaiter(this, void 0, void 0, function*() {
+            return this.runRequest("readonly", store => store.get(key));
+        });
+    }
+    /**
+     * Get all the values in the store.
+     */    getAll() {
+        return __awaiter(this, void 0, void 0, function*() {
+            return this.runRequest("readonly", store => store.getAll());
+        });
+    }
+    /**
+     * Get all keys in the store.
+     */    getAllKeys() {
+        return __awaiter(this, void 0, void 0, function*() {
+            return this.runRequest("readonly", store => store.getAllKeys());
+        });
+    }
+    set(key, value) {
+        return __awaiter(this, void 0, void 0, function*() {
+            return this.runRequest("readwrite", store => store.put(value, key));
+        });
+    }
+    /**
+     * Adds a new value to the store with or without a key.
+     * If a key already exists it will error.
+     */    add(value, key) {
+        return __awaiter(this, void 0, void 0, function*() {
+            return this.runRequest("readwrite", store => void 0 === key ? store.add(value) : store.add(value, key));
+        });
+    }
+    /**
+     * Updates a value by key. This uses IndexedDB put semantics.
+     */    update(key, value) {
+        return __awaiter(this, void 0, void 0, function*() {
+            return this.set(key, value);
+        });
+    }
+    /**
+     * Removes a value from the store by key.
+     */    remove(key) {
+        return __awaiter(this, void 0, void 0, function*() {
+            yield this.runRequest("readwrite", store => store.delete(key));
+        });
+    }
+    /**
+     * Clear all the store values
+     */    clear() {
+        return __awaiter(this, void 0, void 0, function*() {
+            yield this.runRequest("readwrite", store => store.clear());
+        });
+    }
+    /**
+     * Cleanly close the IndexedDB connection.
+     */    close() {
+        return __awaiter(this, void 0, void 0, function*() {
+            var _a;
+            null === (_a = this.db) || void 0 === _a || _a.close(), this.db = null;
+        });
+    }
+    /**
+     * Deletes an indexedDB database.
+     */    destroy() {
+        return __awaiter(this, void 0, void 0, function*() {
+            if (yield this.close(), "undefined" == typeof indexedDB) throw new TypeError("IndexedDB is not supported in this environment.");
+            yield new Promise((resolve, reject) => {
+                const request = indexedDB.deleteDatabase(this.databaseName);
+                request.onerror = () => {
+                    var _a;
+                    reject(null !== (_a = request.error) && void 0 !== _a ? _a : new Error("Failed to delete IndexedDB."));
+                }, request.onsuccess = () => resolve(), request.onblocked = () => {
+                    reject(new Error("Failed to delete IndexedDB because it is blocked."));
+                };
+            });
+        });
+    }
+    /**
+     * Private executor of request of the indexedDB
+     * Returns the result of the indexedDB request including the error if there is one
+     */    runRequest(mode, callback) {
+        return __awaiter(this, void 0, void 0, function*() {
+            if (yield this.initialize(), !this.db) throw new Error("IndexedDB connection is not initialized.");
+            const transaction = this.db.transaction(this.storeName, mode), store = transaction.objectStore(this.storeName);
+            let result;
+            return yield new Promise((resolve, reject) => {
+                const request = callback(store);
+                request.onerror = () => {
+                    var _a;
+                    reject(null !== (_a = request.error) && void 0 !== _a ? _a : new Error("IndexedDB request failed."));
+                }, request.onsuccess = () => {
+                    result = request.result;
+                }, transaction.onerror = () => {
+                    var _a, _b;
+                    reject(null !== (_b = null !== (_a = transaction.error) && void 0 !== _a ? _a : request.error) && void 0 !== _b ? _b : new Error("IndexedDB transaction failed."));
+                }, transaction.onabort = () => {
+                    var _a, _b;
+                    reject(null !== (_b = null !== (_a = transaction.error) && void 0 !== _a ? _a : request.error) && void 0 !== _b ? _b : new Error("IndexedDB transaction was aborted."));
+                }, transaction.oncomplete = () => {
+                    resolve(result);
+                };
+            });
+        });
+    }
+}
+
+export { IndexedDB as I };

package/dist/esm/chunks/{ProgressIndicator-BVwQNOcV.mjs → ProgressIndicator-CfM2c4ty.mjs}

@@ -21,13 +21,22 @@ var css$1_wrapper = "DoneCheck-module_wrapper__AlISD flexBox-module_row__z24tF",
 styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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.DoneCheck-module_wrapper__AlISD {\n\theight: var(--icon-height);\n\tmax-height: var(--icon-height);\n\twidth: var(--icon-width);\n\tmax-width: var(--icon-width);\n\toverflow: visible;\n}\n\n.DoneCheck-module_icon__bKaFp {\n\theight: var(--icon-height);\n\tmax-height: var(--icon-height);\n\twidth: var(--icon-width);\n\tmax-width: var(--icon-width);\n\tscale: var(--icon-scale);\n\ttransition: var(--icon-transition);\n}\n");
 
 const DoneCheck = React.memo(props => {
-    const theme = useTheme(), {size: size = 88, stroke: stroke = 1.5, color: color = theme.current.colors["feedback-positive"], play: play = !0, delay: delay = 0, duration: duration = 1, didStart: didStart, didEnd: didEnd} = props, [playing, setPlaying] = useState(!1);
-    useEffect(() => setPlaying(play), [ play ]);
+    const theme = useTheme(), {size: size = 88, stroke: stroke = 1.5, color: color = theme.current.colors["feedback-positive"], play: play = !0, delay: delay = 5, duration: duration = 1, didStart: didStart, didEnd: didEnd} = props, [playing, setPlaying] = useState(!play);
+    useEffect(() => {
+        let frameOne = 0, frameTwo = 0;
+        return play ? (setPlaying(!1), frameOne = requestAnimationFrame(() => {
+            frameTwo = requestAnimationFrame(() => {
+                setPlaying(!0);
+            });
+        })) : setPlaying(!0), () => {
+            frameOne && cancelAnimationFrame(frameOne), frameTwo && cancelAnimationFrame(frameTwo);
+        };
+    }, [ play ]);
     const transition = useMemo(() => `scale ${duration}s var(--motion-spring) ${delay}s`, [ delay, duration ]), cssVars = useMemo(() => ({
         "--icon-size": `${size}px`,
         "--icon-scale": playing ? 1 : 0,
-        "--icon-transition": playing ? transition : "unset"
-    }), [ size, playing, transition ]);
+        "--icon-transition": play ? transition : "unset"
+    }), [ size, playing, play, transition ]);
     return jsx("div", {
         className: css$1_wrapper,
         role: "status",

package/dist/esm/chunks/{PromptInput-pKwwzyAd.mjs → PromptInput-C6liKbFf.mjs}

@@ -8,12 +8,12 @@ import "../theme/colors.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-DAvVj4YV.mjs";
-
-import { F as FileList } from "./FileList-BHCGzX_0.mjs";
+import { B as Button } from "./Button-m0XAJsq5.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
+import { F as FileList } from "./FileList-Ckix8gUY.mjs";
+
 var css = {
     wrapperBg: "PromptInput-module_wrapperBg__zabZq flexBox-module_columnStart__C7P44",
     bgRotate: "PromptInput-module_bgRotate__Um720",

package/dist/esm/chunks/{TextArea-yF2pGeel.mjs → TextArea-DKRF4Irr.mjs}

@@ -4,7 +4,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 
-import { B as Button } from "./Button-DAvVj4YV.mjs";
+import { B as Button } from "./Button-m0XAJsq5.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
@@ -27,7 +27,7 @@ const TextArea = React.memo(props => {
         (null == ref ? void 0 : ref.current) && (focused ? ref.current.focus() : ref.current.blur(), 
         setIsFocused(focused));
     }, [ focused ]), useEffect(() => {
-        value && (setText(value), setInvalid(runValidation(value)));
+        setText(value), setInvalid(runValidation(value));
     }, [ value, runValidation ]), useEffect(() => {
         handleResize();
     }, [ rows ]);

package/dist/esm/chunks/{TextField-CgnPj6oK.mjs → TextField-CGOR6507.mjs}

@@ -12,7 +12,7 @@ import "../theme/colors.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-DAvVj4YV.mjs";
+import { B as Button } from "./Button-m0XAJsq5.mjs";
 
 import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
@@ -200,7 +200,7 @@ const MOTION_CONFIG = {
                     children: jsx(Button, {
                         label: "Translate",
                         variant: "text",
-                        size: "text",
+                        size: "small",
                         state: "" === text ? "disabled" : "normal",
                         labelColor: theme.current.colors["core-button-primary"],
                         onClick: onAction

package/dist/esm/chunks/{UploadArea-BNf1y8Ep.mjs → UploadArea-DNAH-Bu5.mjs}

@@ -4,14 +4,14 @@ import React, { useState, useRef, useId, useCallback, useMemo } from "react";
 
 import { s as setStyle, a as accessibleKeyDown } from "./misc-N8KLjOXc.mjs";
 
-import { F as FileList } from "./FileList-BHCGzX_0.mjs";
-
 import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-BVwQNOcV.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-CfM2c4ty.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
+import { F as FileList } from "./FileList-Ckix8gUY.mjs";
+
 var css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",
     icon: "UploadArea-module_icon__M7n-m flexBox-module_row__z24tF",