@apple-pie/slice 0.1.26 → 0.1.29

package/dist/esm/chunks/{FlexDiv-BFrVoFhC.mjs → FlexDiv-DnY1_qk4.mjs}

@@ -5,20 +5,20 @@ import { jsx } from "react/jsx-runtime";
 
 import { motion } from "motion/react";
 
-import React, { useMemo } from "react";
+import React, { useMemo, useCallback } from "react";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
 var Size, Preset, css_flexDiv = "FlexDiv-module_flexDiv__EY5A- type-module_body-m-regular__LuQBA";
 
-styleInject(".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}.FlexDiv-module_flexDiv__EY5A- {\n\t&::-webkit-scrollbar {\n\t\tbackground-color: var(--flex-div-bg);\n\t\twidth: 14px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground-color: var(--flex-div-scroll-border);\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: var(--flex-div-scroll-handle);\n\t\tborder-radius: 20px;\n\t\tborder: 4px solid var(--flex-div-scroll-border);\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground-color: var(--flex-div-scroll-handle-hover);\n\t\tborder-radius: 20px;\n\t\tborder: 4px solid var(--flex-div-scroll-border);\n\t\tcursor: default;\n\t}\n}\n"), 
+styleInject(".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}.FlexDiv-module_flexDiv__EY5A- {\n\t&::-webkit-scrollbar {\n\t\tbackground-color: var(--flex-div-bg);\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground-color: var(--flex-div-bg);\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: var(--flex-div-scroll-handle);\n\t\tborder-radius: 20px;\n\t\tborder: 1px solid var(--flex-div-bg);\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground-color: var(--flex-div-scroll-handle-hover);\n\t\tborder-radius: 20px;\n\t\tborder: 1px solid var(--flex-div-bg);\n\t}\n}\n"), 
 function(Size) {
     Size.Grow = "grow", Size.Fill = "fill", Size.Fit = "fit", Size.Viewport = "viewport", 
     Size.Auto = "auto";
 }(Size || (Size = {})), function(Preset) {
-    Preset.FillScroll = "fill-scroll", Preset.FillCenter = "fill-center", Preset.Window = "window", 
-    Preset.Row = "row", Preset.RowBetween = "row-between", Preset.Column = "fill-column", 
-    Preset.Default = "default", Preset.Draggable = "draggable";
+    Preset.FillScroll = "fill-scroll", Preset.FillCenter = "fill-center", Preset.FillStart = "fill-start", 
+    Preset.Window = "window", Preset.Row = "row", Preset.RowBetween = "row-between", 
+    Preset.Column = "column", Preset.Default = "default", Preset.Draggable = "draggable";
 }(Preset || (Preset = {}));
 
 const layoutSets = {
@@ -28,6 +28,8 @@ const layoutSets = {
         justify: "start",
         align: "start",
         scrollY: !0,
+        scrollX: !1,
+        overflow: "hidden",
         direction: "column"
     },
     [Preset.FillCenter]: {
@@ -36,6 +38,18 @@ const layoutSets = {
         justify: "center",
         align: "center",
         scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column"
+    },
+    [Preset.FillStart]: {
+        width: "fill",
+        height: "fill",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
         direction: "column"
     },
     [Preset.Window]: {
@@ -44,6 +58,8 @@ const layoutSets = {
         justify: "start",
         align: "start",
         scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
         direction: "row"
     },
     [Preset.Row]: {
@@ -51,7 +67,9 @@ const layoutSets = {
         height: "fit",
         justify: "start",
         align: "center",
-        scrollY: !1,
+        scrollY: void 0,
+        scrollX: void 0,
+        overflow: "hidden",
         direction: "row"
     },
     [Preset.RowBetween]: {
@@ -59,15 +77,19 @@ const layoutSets = {
         height: "fit",
         justify: "between",
         align: "center",
-        scrollY: !1,
+        scrollY: void 0,
+        scrollX: void 0,
+        overflow: "hidden",
         direction: "row"
     },
     [Preset.Column]: {
         width: "fill",
         height: "fit",
         justify: "start",
-        align: "center",
-        scrollY: !1,
+        align: "start",
+        scrollY: void 0,
+        scrollX: void 0,
+        overflow: "hidden",
         direction: "column"
     },
     [Preset.Default]: {
@@ -75,7 +97,9 @@ const layoutSets = {
         height: "fit",
         justify: "start",
         align: "start",
-        scrollY: !1,
+        scrollY: void 0,
+        scrollX: void 0,
+        overflow: "hidden",
         direction: "column"
     },
     [Preset.Draggable]: {
@@ -83,7 +107,9 @@ const layoutSets = {
         height: "fill",
         justify: "start",
         align: "start",
-        scrollY: !1,
+        scrollY: void 0,
+        scrollX: void 0,
+        overflow: "visible",
         direction: "column"
     }
 };
@@ -96,23 +122,37 @@ function setBox(style) {
     return "number" == typeof style ? `${style}px` : style;
 }
 
+function setPaddingRight(padding, scrollBox, pad = 4) {
+    return padding ? "number" == typeof padding ? `${padding}px` : padding : scrollBox ? `${pad}px` : "unset";
+}
+
 function setFlex(style) {
     return "start" === style || "top" === style ? "flex-start" : "end" === style || "bottom" === style ? "flex-end" : "between" === style ? "space-between" : style;
 }
 
 const FlexDiv = React.memo(React.forwardRef((props, ref) => {
-    const {children: children, preset: preset = "default", scrollY: scrollY = layoutSets[preset].scrollY, scrollX: scrollX = !1, background: background = "var(--core-surface-primary)", direction: direction = layoutSets[preset].direction, align: align = layoutSets[preset].align, justify: justify = layoutSets[preset].justify, height: height = layoutSets[preset].height, width: width = layoutSets[preset].width, maxWidth: maxWidth, centerSelf: centerSelf, wrap: wrap = !1, reverse: reverse = !1, padding: padding = 0, margin: margin = 0, absolute: absolute = !1, flex: flex, gap: gap, variants: variants, transition: transition, animate: animate, enter: enter, exit: exit, border: border, borderRadius: borderRadius, className: className, scrollHandle: scrollHandle, scrollHandleHover: scrollHandleHover} = props, divAttributes = __rest(props, [ "children", "preset", "scrollY", "scrollX", "background", "direction", "align", "justify", "height", "width", "maxWidth", "centerSelf", "wrap", "reverse", "padding", "margin", "absolute", "flex", "gap", "variants", "transition", "animate", "enter", "exit", "border", "borderRadius", "className", "scrollHandle", "scrollHandleHover" ]), {id: divId, style: userStyle} = divAttributes, rest = __rest(divAttributes, [ "id", "style" ]), wrapperStyle = null != userStyle ? userStyle : {}, style = useMemo(() => ({
+    const {children: children, preset: preset = "default", scrollY: scrollY, scrollX: scrollX, scrollBox: scrollBox = !1, background: background = "transparent", direction: direction, align: align, justify: justify, height: height, width: width, maxWidth: maxWidth, centerSelf: centerSelf, wrap: wrap = !1, reverse: reverse = !1, padding: padding = 0, margin: margin = 0, absolute: absolute = !1, flex: flex, gap: gap, variants: variants, transition: transition, animate: animate, enter: enter, exit: exit, border: border, borderRadius: borderRadius, className: className, scrollHandle: scrollHandle, scrollHandleHover: scrollHandleHover} = props, divAttributes = __rest(props, [ "children", "preset", "scrollY", "scrollX", "scrollBox", "background", "direction", "align", "justify", "height", "width", "maxWidth", "centerSelf", "wrap", "reverse", "padding", "margin", "absolute", "flex", "gap", "variants", "transition", "animate", "enter", "exit", "border", "borderRadius", "className", "scrollHandle", "scrollHandleHover" ]), {id: divId, style: userStyle} = divAttributes, rest = __rest(divAttributes, [ "id", "style" ]), wrapperStyle = null != userStyle ? userStyle : {}, presets = useMemo(() => ({
+        width: null != width ? width : layoutSets[preset].width,
+        height: null != height ? height : layoutSets[preset].height,
+        direction: null != direction ? direction : layoutSets[preset].direction,
+        align: null != align ? align : layoutSets[preset].align,
+        justify: null != justify ? justify : layoutSets[preset].justify,
+        scrollY: null != scrollY ? scrollY : layoutSets[preset].scrollY,
+        scrollX: null != scrollX ? scrollX : layoutSets[preset].scrollX,
+        overflow: layoutSets[preset].overflow
+    }), [ preset, width, height, direction, align, justify, scrollY, scrollX ]), setScroll = useCallback(value => void 0 === value ? "unset" : value ? "auto" : "hidden", []), style = useMemo(() => ({
         display: "flex",
         position: "" + (absolute ? "absolute" : "relative"),
-        flexDirection: `${direction}${reverse ? "-reverse" : ""}`,
+        flexDirection: `${presets.direction}${reverse ? "-reverse" : ""}`,
         flexWrap: "" + (wrap ? "wrap" : "nowrap"),
-        justifyContent: `${setFlex(justify)}`,
-        alignItems: `${setFlex(align)}`,
+        justifyContent: `${setFlex(presets.justify)}`,
+        alignItems: `${setFlex(presets.align)}`,
         boxSizing: "border-box",
         padding: `${setBox(padding)}`,
+        paddingRight: setPaddingRight(padding, scrollBox),
         margin: centerSelf ? "0 auto" : `${setBox(margin)}`,
-        width: `${absolute ? "unset" : setSize(width, !1)}`,
-        height: `${absolute ? "unset" : setSize(height, !0)}`,
+        width: `${absolute ? "unset" : setSize(presets.width, !1)}`,
+        height: `${absolute ? "unset" : setSize(presets.height, !0)}`,
         maxWidth: `${maxWidth ? setSize(maxWidth, !1) : "unset"}`,
         flex: `${absolute ? "unset" : null != flex ? flex : "unset"}`,
         top: "" + (absolute ? "0" : "unset"),
@@ -122,20 +162,20 @@ const FlexDiv = React.memo(React.forwardRef((props, ref) => {
         gap: gap ? `${gap}px` : "unset",
         border: `${null != border ? border : "unset"}`,
         background: `${null != background ? background : "transparent"}`,
-        overflow: "hidden",
-        overflowY: "" + (scrollY ? "auto" : "unset"),
-        overflowX: "" + (scrollX ? "auto" : "unset"),
+        overflow: presets.overflow,
+        overflowY: setScroll(presets.scrollY),
+        overflowX: setScroll(presets.scrollX),
         borderRadius: borderRadius ? `${borderRadius}px` : "unset",
         color: "var(--core-text-primary)",
         "--flex-div-scroll-border": `${null != background ? background : "transparent"}`,
         "--flex-div-scroll-handle": `${null != scrollHandle ? scrollHandle : "var(--scroll-bar)"}`,
         "--flex-div-scroll-handle-hover": `${null != scrollHandleHover ? scrollHandleHover : "var(--scroll-bar-hover)"}`
-    }), [ absolute, direction, reverse, wrap, justify, align, padding, margin, width, height, flex, gap, border, background, scrollY, scrollX, centerSelf, maxWidth, scrollHandle, scrollHandleHover, borderRadius ]);
+    }), [ absolute, reverse, wrap, padding, margin, flex, gap, border, background, centerSelf, maxWidth, scrollHandle, scrollHandleHover, borderRadius, setScroll, presets, scrollBox ]);
     return jsx(motion.div, Object.assign({
         id: divId,
         ref: ref,
         className: `${css_flexDiv} ${null != className ? className : ""}`,
-        style: Object.assign(Object.assign({}, style), wrapperStyle),
+        style: Object.assign(Object.assign({}, wrapperStyle), style),
         transition: transition,
         variants: variants,
         initial: enter,

package/dist/esm/chunks/{Grouper-CvPYEsF_.mjs → Grouper-CyWZ8tfm.mjs}

@@ -15,7 +15,7 @@ import "../hooks/useWindow.mjs";
 
 import { B as Badge } from "./Badge-CC0zSLMf.mjs";
 
-import { I as Icon } from "./Icon-DI32kOA1.mjs";
+import { I as Icon } from "./Icon-BOJAk-hM.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{Icon-DI32kOA1.mjs → Icon-BOJAk-hM.mjs}

@@ -9,7 +9,7 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import { a as accessibleKeyDown } from "./misc-BeEWwOaJ.mjs";
+import { a as accessibleKeyDown } from "./misc-Bjbro8Xe.mjs";
 
 import "../hooks/useWindow.mjs";
 
@@ -23,7 +23,216 @@ styleInject(".Icon-module_icon__szG-X {\n\tcursor: var(--cursor);\n\tuser-select
  * Static icon registry created once at module load.
  * Each entry stores only icon line content renderers.
  */
-const STATIC_ICON_REGISTRY = new Map([ [ "sidebar", {
+const STATIC_ICON_REGISTRY = new Map([ [ "talk", {
+    line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
+        children: [ jsx("path", {
+            d: "M10,2.5c4.14,0,7.5,3.36,7.5,7.5s-3.36,7.5-7.5,7.5-7.5-3.36-7.5-7.5,3.36-7.5,7.5-7.5M10,1C5.03,1,1,5.03,1,10s4.03,9,9,9,9-4.03,9-9S14.97,1,10,1h0Z",
+            fill: strokeColor
+        }), jsx("path", {
+            d: "M1,10c0,3,1.47,5.65,3.73,7.28l1.7.24c.43.06.86.03,1.28-.02.96-.12,1.81-.82,1.92-1.81.11-1.06-.59-2.18-.06-2.67.22-.21.47-.37.64-.62.17-.27.1-.73-.15-.93-.44-.36-1.41-.24-1.83-.66-.16-.16-.24-.41-.21-.62.13-.8,2.13-1,2.72-1.61.29-.3.25-.79.09-1.15-.34-.78-.72-1.73.15-2.09l.66-.27c.39-.16.73-.46.86-.87.25-.82-.71-1.56-1.39-2.21-.31-.3-.58-.63-.84-.97-.09,0-.18-.01-.26-.01C5.03,1,1,5.03,1,10Z",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
+            d: "M9.54,2.51c.17.2.34.39.52.55.09.09.18.17.28.26.13.13.32.3.47.46l-.41.17c-.78.32-1.13.86-1.29,1.27-.36.89-.08,1.79.19,2.45-.11.04-.23.09-.33.12-.94.35-2.22.82-2.44,2.15-.11.7.13,1.44.64,1.94.29.28.63.45.95.56-.42.77-.23,1.65-.11,2.22.07.32.14.64.11.85-.03.27-.34.45-.61.48-.17.02-.4.05-.61.05-.1,0-.19,0-.28-.02l-1.31-.18c-1.77-1.42-2.82-3.58-2.82-5.85,0-3.98,3.12-7.25,7.04-7.49M10,1C5.03,1,1,5.03,1,10c0,3,1.47,5.65,3.73,7.28l1.7.24c.16.02.32.03.49.03.27,0,.53-.02.79-.06.96-.12,1.81-.82,1.92-1.81.11-1.06-.59-2.18-.06-2.67.22-.21.47-.37.64-.62.17-.27.1-.73-.15-.93-.44-.36-1.41-.24-1.83-.66-.16-.16-.24-.41-.21-.62.13-.8,2.13-1,2.72-1.61.29-.3.25-.79.09-1.15-.34-.78-.72-1.73.15-2.09l.66-.27c.39-.16.73-.46.86-.87.25-.82-.71-1.56-1.39-2.21-.31-.3-.58-.63-.84-.97-.09,0-.18-.01-.26-.01h0Z",
+            fill: strokeColor
+        }) ]
+    })
+} ], [ "speaker", {
+    line: ({fillColor: fillColor, strokeColor: strokeColor}) => jsx("path", {
+        d: "M4.71,7.95v4.13c0,.37.3.66.66.66h3.31c.08,0,.17.03.23.09l4.81,4.21c.22.19.56.04.56-.25V3.15c0-.25-.3-.37-.47-.2l-4.21,4.21c-.06.06-.15.1-.24.1h-3.97c-.37,0-.68.3-.68.68Z",
+        fill: strokeColor,
+        fillOpacity: fillColor,
+        stroke: strokeColor,
+        strokeWidth: 1.5
+    })
+} ], [ "speaker muted", {
+    line: ({stroke: stroke, strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
+        children: [ jsx("polygon", {
+            points: "4.82 8.35 9.61 12.51 4.82 12.51 4.82 8.35",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("polygon", {
+            points: "8.51 7.58 14.51 12.78 14.5 3 14 2.5 8.51 7.58",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
+            d: "M9.02,8.02h.34c.29,0,.57-.11.77-.32l3.41-3.41v7.65l1.5,1.3V3.15c0-.42-.25-.79-.64-.95-.39-.16-.83-.07-1.12.22l-4.09,4.09h-1.9l1.73,1.5Z",
+            fill: strokeColor
+        }), jsx("path", {
+            d: "M9.16,12.11c-.15-.07-.3-.12-.47-.12h-3.22v-3.09l-1.46-1.27c-.02.1-.04.2-.04.31v4.13c0,.78.63,1.41,1.41,1.41h3.16l4.7,4.11c.2.18.46.27.72.27.15,0,.31-.03.45-.1.27-.12.47-.35.57-.62l-5.81-5.04Z",
+            fill: strokeColor
+        }), jsx("line", {
+            x1: "3.25",
+            y1: "5",
+            x2: "16.5",
+            y2: "16.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            stroke: strokeColor,
+            strokeWidth: stroke,
+            fill: "none"
+        }) ]
+    })
+} ], [ "speaker high", {
+    line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
+        children: [ jsx("path", {
+            d: "M11.24,17.87c-.26,0-.51-.09-.72-.27l-4.7-4.11h-3.16c-.78,0-1.41-.63-1.41-1.41v-4.13c0-.79.64-1.43,1.43-1.43h3.8l4.09-4.09c.29-.29.73-.38,1.12-.22.39.16.64.53.64.95v13.63c0,.43-.25.81-.64.99-.14.06-.3.1-.45.1Z",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
+            d: "M11.24,17.87c-.26,0-.51-.09-.72-.27l-4.7-4.11h-3.16c-.78,0-1.41-.63-1.41-1.41v-4.13c0-.79.64-1.43,1.43-1.43h3.8l4.09-4.09c.29-.29.73-.38,1.12-.22.39.16.64.53.64.95v13.63c0,.43-.25.81-.64.99-.14.06-.3.1-.45.1ZM2.75,11.99h3.22c.27,0,.52.1.72.27l4.13,3.61V4.29l-3.41,3.41c-.21.21-.48.32-.77.32h-3.89v3.97Z",
+            fill: strokeColor
+        }), jsx("rect", {
+            x: "14.04",
+            y: "8",
+            width: "1.5",
+            height: "4",
+            fill: strokeColor
+        }), jsx("rect", {
+            x: "16.75",
+            y: "6",
+            width: "1.5",
+            height: "8",
+            fill: strokeColor
+        }) ]
+    })
+} ], [ "speaker low", {
+    line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
+        children: [ jsx("path", {
+            d: "M12.85,17.87c-.26,0-.51-.09-.72-.27l-4.7-4.11h-3.16c-.78,0-1.41-.63-1.41-1.41v-4.13c0-.79.64-1.43,1.43-1.43h3.8l4.09-4.09c.3-.3.74-.38,1.12-.22.38.16.63.53.63.95v13.63c0,.43-.25.81-.64.99-.14.06-.3.1-.45.1Z",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
+            d: "M12.85,17.87c-.26,0-.51-.09-.72-.27l-4.7-4.11h-3.16c-.78,0-1.41-.63-1.41-1.41v-4.13c0-.79.64-1.43,1.43-1.43h3.8l4.09-4.09c.3-.3.74-.38,1.12-.22.38.16.63.53.63.95v13.63c0,.43-.25.81-.64.99-.14.06-.3.1-.45.1ZM4.36,11.99h3.22c.27,0,.52.1.72.27l4.13,3.61V4.29l-3.41,3.41c-.2.2-.49.32-.77.32h-3.9v3.97Z",
+            fill: strokeColor
+        }), jsx("rect", {
+            x: "15.64",
+            y: "8",
+            width: "1.5",
+            height: "4",
+            fill: strokeColor
+        }) ]
+    })
+} ], [ "laptop", {
+    line: ({fillColor: fillColor, strokeColor: strokeColor}) => jsxs(Fragment, {
+        children: [ jsx("rect", {
+            x: "4",
+            y: "5",
+            width: "12",
+            height: "9",
+            rx: "1",
+            ry: "1",
+            fill: strokeColor,
+            opacity: fillColor
+        }), jsx("path", {
+            d: "M18,13.25h-1.25v-7.25c0-.96-.79-1.75-1.75-1.75H5c-.96,0-1.75.79-1.75,1.75v7.25h-1.25c-.41,0-.75.34-.75.75s.34.75.75.75h16c.41,0,.75-.34.75-.75s-.34-.75-.75-.75ZM4.75,6c0-.14.11-.25.25-.25h10c.14,0,.25.11.25.25v7.25H4.75v-7.25Z",
+            fill: strokeColor
+        }) ]
+    })
+} ], [ "moon full", {
+    line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
+        children: [ jsx("circle", {
+            cx: "10",
+            cy: "10",
+            r: "6.5",
+            fill: "none",
+            stroke: strokeColor,
+            strokeWidth: 1.5
+        }), jsx("circle", {
+            cx: "10",
+            cy: "10",
+            r: "6.5",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }) ]
+    })
+} ], [ "sun", {
+    line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
+        children: [ jsx("path", {
+            d: "M10,13.25c-1.79,0-3.25-1.46-3.25-3.25s1.46-3.25,3.25-3.25,3.25,1.46,3.25,3.25-1.46,3.25-3.25,3.25Z",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
+            d: "M10,5.25c-2.62,0-4.75,2.13-4.75,4.75s2.13,4.75,4.75,4.75,4.75-2.13,4.75-4.75-2.13-4.75-4.75-4.75ZM10,13.25c-1.79,0-3.25-1.46-3.25-3.25s1.46-3.25,3.25-3.25,3.25,1.46,3.25,3.25-1.46,3.25-3.25,3.25Z",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "10",
+            cy: "2",
+            r: "1",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "15.7",
+            cy: "4.3",
+            r: "1",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "18.06",
+            cy: "10",
+            r: "1",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "1.95",
+            cy: "10",
+            r: "1",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "4.3",
+            cy: "15.7",
+            r: "1",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "10",
+            cy: "18.05",
+            r: "1",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "15.7",
+            cy: "15.7",
+            r: "1",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "4.3",
+            cy: "4.3",
+            r: "1",
+            fill: strokeColor
+        }) ]
+    })
+} ], [ "keyboard", {
+    line: ({strokeColor: strokeColor}) => jsxs(Fragment, {
+        children: [ jsx("path", {
+            d: "M17.26,16.46H2.75c-.96,0-1.75-.85-1.75-1.89V5.88c0-1.04.79-1.89,1.75-1.89h14.51c.96,0,1.75.85,1.75,1.89v8.69c0,1.04-.79,1.89-1.75,1.89ZM2.75,5.61c-.14,0-.25.12-.25.27v8.69c0,.15.11.27.25.27h14.51c.14,0,.25-.12.25-.27V5.88c0-.15-.11-.27-.25-.27H2.75Z",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "5.52",
+            cy: "8.52",
+            r: ".97",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "8.53",
+            cy: "8.52",
+            r: ".97",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "11.52",
+            cy: "8.52",
+            r: ".97",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "14.48",
+            cy: "8.52",
+            r: ".97",
+            fill: strokeColor
+        }), jsx("circle", {
+            cx: "14.48",
+            cy: "11.97",
+            r: ".97",
+            fill: strokeColor
+        }), jsx("path", {
+            d: "M11.52,11h-6c-.54,0-.97.44-.97.97s.44.97.97.97h6c.54,0,.97-.44.97-.97s-.44-.97-.97-.97Z",
+            fill: strokeColor
+        }) ]
+    })
+} ], [ "sidebar", {
     line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
         children: [ jsx("rect", {
             x: "10",
@@ -39,6 +248,34 @@ const STATIC_ICON_REGISTRY = new Map([ [ "sidebar", {
             fill: strokeColor
         }) ]
     })
+} ], [ "sidebar split", {
+    line: ({fillColor: fillColor, strokeColor: strokeColor}) => jsxs(Fragment, {
+        children: [ jsx("rect", {
+            x: "10",
+            y: "4.5",
+            width: "8",
+            height: "11",
+            rx: "1",
+            ry: "1",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
+            d: "M17,16.25H3c-.96,0-1.75-.78-1.75-1.75V5.5c0-.96.78-1.75,1.75-1.75h14c.96,0,1.75.78,1.75,1.75v9c0,.96-.78,1.75-1.75,1.75ZM3,5.25c-.14,0-.25.11-.25.25v9c0,.14.11.25.25.25h14c.14,0,.25-.11.25-.25V5.5c0-.14-.11-.25-.25-.25H3Z",
+            fill: strokeColor
+        }), jsx("rect", {
+            x: "9.25",
+            y: "4.5",
+            width: "1.5",
+            height: "11",
+            fill: strokeColor
+        }), jsx("rect", {
+            x: "10",
+            y: "9.5",
+            width: "8",
+            height: "1",
+            fill: strokeColor
+        }) ]
+    })
 } ], [ "target", {
     line: ({strokeColor: strokeColor}) => jsxs(Fragment, {
         children: [ jsx("circle", {
@@ -83,8 +320,12 @@ const STATIC_ICON_REGISTRY = new Map([ [ "sidebar", {
         }) ]
     })
 } ], [ "mic", {
-    line: ({strokeColor: strokeColor}) => jsxs(Fragment, {
+    line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
         children: [ jsx("path", {
+            d: "M10.25,11.75c1.65,0,3-1.35,3-3v-4.5c0-1.65-1.35-3-3-3s-3,1.35-3,3v4.5c0,1.65,1.35,3,3,3Z",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
             d: "M10.25,11.75c1.65,0,3-1.35,3-3v-4.5c0-1.65-1.35-3-3-3s-3,1.35-3,3v4.5c0,1.65,1.35,3,3,3ZM8.75,4.25c0-.83.67-1.5,1.5-1.5s1.5.67,1.5,1.5v4.5c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5v-4.5Z",
             fill: strokeColor
         }), jsx("path", {
@@ -839,10 +1080,12 @@ const STATIC_ICON_REGISTRY = new Map([ [ "sidebar", {
         }) ]
     })
 } ], [ "share", {
-    line: ({stroke: stroke, strokeColor: strokeColor}) => jsx("path", {
+    line: ({stroke: stroke, strokeColor: strokeColor, fillColor: fillColor}) => jsx("path", {
         d: "M11 7c-5.063 0-8 4.03-8 9 1.222-1.2 3-3 8-3v3l6-6-6-6v3Z",
         stroke: strokeColor,
-        strokeWidth: stroke
+        strokeWidth: stroke,
+        fill: strokeColor,
+        fillOpacity: fillColor
     })
 } ], [ "search", {
     line: ({strokeColor: strokeColor}) => jsxs(Fragment, {
@@ -1078,11 +1321,23 @@ const STATIC_ICON_REGISTRY = new Map([ [ "sidebar", {
         fill: strokeColor
     })
 } ], [ "sparkle", {
-    line: ({strokeColor: strokeColor}) => jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M10.5 2h.5a7 7 0 0 0 7 7v2a7 7 0 0 0-7 7H9a7 7 0 0 0-7-7V9a7 7 0 0 0 7-7h1.5ZM10 4.88A8.525 8.525 0 0 0 15.12 10 8.525 8.525 0 0 0 10 15.12 8.525 8.525 0 0 0 4.88 10 8.524 8.524 0 0 0 10 4.88ZM17 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM5 16a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
-        fill: strokeColor
+    line: ({strokeColor: strokeColor, fillColor: fillColor}) => jsxs(Fragment, {
+        children: [ jsx("path", {
+            d: "M10.5 2h.5a7 7 0 0 0 7 7v2a7 7 0 0 0-7 7H9a7 7 0 0 0-7-7V9a7 7 0 0 0 7-7h1.5ZM10 4.88A8.525 8.525 0 0 0 15.12 10 8.525 8.525 0 0 0 10 15.12 8.525 8.525 0 0 0 4.88 10 8.524 8.524 0 0 0 10 4.88Z",
+            fill: strokeColor,
+            fillOpacity: fillColor
+        }), jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10.5 2h.5a7 7 0 0 0 7 7v2a7 7 0 0 0-7 7H9a7 7 0 0 0-7-7V9a7 7 0 0 0 7-7h1.5ZM10 4.88A8.525 8.525 0 0 0 15.12 10 8.525 8.525 0 0 0 10 15.12 8.525 8.525 0 0 0 4.88 10 8.524 8.524 0 0 0 10 4.88ZM17 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM5 16a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
+            fill: strokeColor
+        }), jsx("path", {
+            d: "M17 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
+            fill: strokeColor
+        }), jsx("path", {
+            d: "M5 16a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
+            fill: strokeColor
+        }) ]
     })
 } ], [ "inbox", {
     line: ({strokeColor: strokeColor}) => jsx("path", {
@@ -1103,7 +1358,7 @@ const STATIC_ICON_REGISTRY = new Map([ [ "sidebar", {
     })
 } ] ]), Icon = React.memo(props => {
     var _a;
-    const theme = useTheme(), {name: name = "home", size: size = 20, stroke: stroke = 1.5, strokeColor: strokeColor = theme.current.colors["core-icon-primary"], fillColor: fillColor = .2, coverUp: coverUp = theme.current.colors["core-surface-primary"], toggle: toggle = !1, pointer: pointer = !1, disabled: disabled = !1, onClick: onClick} = props, svgAttributes = __rest(props, [ "name", "size", "stroke", "strokeColor", "fillColor", "coverUp", "toggle", "pointer", "disabled", "onClick" ]), {id: svgId, className: className, style: style} = svgAttributes, rest = __rest(svgAttributes, [ "id", "className", "style" ]), svgStyle = null != style ? style : {}, variantKey = toggle ? "lineOn" : "line", iconVariant = STATIC_ICON_REGISTRY.get(name), shape = null !== (_a = null == iconVariant ? void 0 : iconVariant[variantKey]) && void 0 !== _a ? _a : null == iconVariant ? void 0 : iconVariant.line, cursor = useMemo(() => disabled ? "default" : pointer ? "pointer" : "inherit", [ disabled, pointer ]), iconStyle = useMemo(() => ({
+    const theme = useTheme(), {name: name = "home", size: size = 20, stroke: stroke = 1.5, strokeColor: strokeColor = theme.current.colors["core-icon-primary"], fillColor: fillColor, fill: fill = !1, coverUp: coverUp = theme.current.colors["core-surface-primary"], toggle: toggle = !1, pointer: pointer = !1, disabled: disabled = !1, onClick: onClick} = props, svgAttributes = __rest(props, [ "name", "size", "stroke", "strokeColor", "fillColor", "fill", "coverUp", "toggle", "pointer", "disabled", "onClick" ]), {id: svgId, className: className, style: style} = svgAttributes, rest = __rest(svgAttributes, [ "id", "className", "style" ]), svgStyle = null != style ? style : {}, variantKey = toggle ? "lineOn" : "line", iconVariant = STATIC_ICON_REGISTRY.get(name), shape = null !== (_a = null == iconVariant ? void 0 : iconVariant[variantKey]) && void 0 !== _a ? _a : null == iconVariant ? void 0 : iconVariant.line, cursor = useMemo(() => disabled ? "default" : pointer ? "pointer" : "inherit", [ disabled, pointer ]), setFillColor = useMemo(() => fill ? fillColor || (theme.current.name.includes("dark") ? .2 : .125) : 0, [ fillColor, fill, theme.current.name ]), iconStyle = useMemo(() => ({
         "--cursor": cursor,
         "--pointer-events": onClick ? "auto" : "none"
     }), [ cursor, onClick ]), handleKeyActivate = useMemo(() => () => null == onClick ? void 0 : onClick(void 0), [ onClick ]);
@@ -1126,7 +1381,7 @@ const STATIC_ICON_REGISTRY = new Map([ [ "sidebar", {
         children: [ jsx("title", {}), shape({
             stroke: stroke,
             strokeColor: strokeColor,
-            fillColor: fillColor,
+            fillColor: setFillColor,
             coverUp: coverUp
         }) ]
     })) : null;