@apple-pie/slice 0.1.24 → 0.1.26

package/dist/cjs/providers/ThemeProvider.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 
 var jsxRuntime = require("react/jsx-runtime"), React = require("react"), styleInject_es = require("../chunks/style-inject.es-CMuL-BfJ.js"), theme_themes = require("../theme/themes.js");
@@ -17,39 +18,59 @@ styleInject_es.styleInject("[data-slice-theme-scope] {\n\t--motion-magnet: cubic
 
 styleInject_es.styleInject('.slice-global-body {\n\t/* apply themed background color */\n\tbackground-color: var(--core-surface-primary);\n\t/* remove gaps */\n\tmargin: 0;\n\tpadding: 0;\n\t/* base medium body font style with pref. for theme google font */\n\tfont-family: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",\n\t\tRoboto, Helvetica, Arial, sans-serif;\n\tfont-weight: 360;\n\tfont-size: 15px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n\t-webkit-font-smoothing: antialiased;\n}\n');
 
-const darkModeMediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
+const ThemeContext = React.createContext({
+    initialTheme: theme_themes.lightTheme.name
+});
+
+function setDocumentTheme(name) {
+    "undefined" != typeof document && (document.documentElement.dataset.sliceTheme = name, 
+    document.cookie = `slice-theme=${encodeURIComponent(name)}; path=/; max-age=31536000; samesite=lax`);
+}
 
 exports.ThemeProvider = function(props) {
-    const {children: children, theme: theme, system: system, global: global} = props;
+    const {children: children, theme: theme, system: system, global: global, initialTheme: initialTheme} = props, contextValue = React.useMemo(() => ({
+        initialTheme: null != initialTheme ? initialTheme : theme_themes.lightTheme.name
+    }), [ initialTheme ]);
     return React.useEffect(() => {
-        if (theme) {
+        if (theme || initialTheme) {
             const newTheme = function(theme) {
                 if (theme) return theme.includes("dark") ? theme_themes.darkTheme : theme_themes.lightTheme;
-            }(theme);
+            }(null != theme ? theme : initialTheme);
             if (!newTheme) return;
-            document.documentElement.dataset.sliceTheme = newTheme.name;
+            setDocumentTheme(newTheme.name);
         }
-    }, [ theme ]), React.useEffect(() => {
+    }, [ theme, initialTheme ]), React.useEffect(() => {
+        if (!system) return;
+        const darkModeMediaQuery = "undefined" == typeof globalThis || "function" != typeof globalThis.matchMedia ? null : globalThis.matchMedia("(prefers-color-scheme: dark)");
+        if (!darkModeMediaQuery) return;
         const handleSystemThemeChange = e => {
             if (system) {
-                const autoTheme = e.matches ? theme_themes.darkTheme : theme_themes.lightTheme;
-                document.documentElement.dataset.sliceTheme = autoTheme.name;
+                setDocumentTheme((e.matches ? theme_themes.darkTheme : theme_themes.lightTheme).name);
             }
         };
         if (system) {
-            const autoTheme = darkModeMediaQuery.matches ? theme_themes.darkTheme : theme_themes.lightTheme;
-            document.documentElement.dataset.sliceTheme = autoTheme.name;
+            setDocumentTheme((darkModeMediaQuery.matches ? theme_themes.darkTheme : theme_themes.lightTheme).name);
         }
         return darkModeMediaQuery.addEventListener("change", handleSystemThemeChange), () => {
             darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
         };
     }, [ system ]), React.useEffect(() => {
-        if (global) return document.body.classList.add("slice-global-body"), () => {
+        if (global) {
+            if ("undefined" != typeof document) return document.body.classList.add("slice-global-body"), 
+            () => {
+                document.body.classList.remove("slice-global-body");
+            };
+        } else {
+            if ("undefined" == typeof document) return;
             document.body.classList.remove("slice-global-body");
-        };
-        document.body.classList.remove("slice-global-body");
-    }, [ global ]), jsxRuntime.jsx("div", {
-        "data-slice-theme-scope": !0,
-        children: children
+        }
+    }, [ global ]), jsxRuntime.jsx(ThemeContext.Provider, {
+        value: contextValue,
+        children: jsxRuntime.jsx("div", {
+            "data-slice-theme-scope": !0,
+            children: children
+        })
     });
+}, exports.useThemeContext = function() {
+    return React.useContext(ThemeContext);
 };

package/dist/cjs/providers/themeServer.js

@@ -0,0 +1,24 @@
+"use strict";
+
+function normalizeThemeName(theme) {
+    if (theme) return theme.includes("dark") ? "darkMode" : "lightMode";
+}
+
+/**
+ * Resolve the startup Slice theme from an explicit theme value, cookie value,
+ * or fallback theme in that order.
+ */ exports.getThemeHtmlAttributes = 
+/**
+ * Return the root HTML attributes needed to render the active Slice theme
+ * before client hydration.
+ */
+function(theme) {
+    var _a;
+    return {
+        "data-slice-theme": null !== (_a = normalizeThemeName(theme)) && void 0 !== _a ? _a : "lightMode"
+    };
+}, exports.resolveInitialTheme = function(options = {}) {
+    var _a, _b;
+    const {theme: theme, cookieTheme: cookieTheme, fallbackTheme: fallbackTheme = "lightMode"} = options;
+    return null !== (_b = null !== (_a = normalizeThemeName(theme)) && void 0 !== _a ? _a : normalizeThemeName(cookieTheme)) && void 0 !== _b ? _b : fallbackTheme;
+};

package/dist/cjs/providers.js

@@ -1,8 +1,9 @@
 "use strict";
 
-var providers_ThemeProvider = require("./providers/ThemeProvider.js");
+var providers_ThemeProvider = require("./providers/ThemeProvider.js"), providers_themeServer = require("./providers/themeServer.js");
 
 require("react/jsx-runtime"), require("react"), require("./chunks/style-inject.es-CMuL-BfJ.js"), 
 require("./theme/themes.js"), require("./theme/colors.js"), require("./theme/corners.js"), 
 require("./theme/elevations.js"), require("./theme/motion.js"), require("./theme/type.js"), 
-exports.ThemeProvider = providers_ThemeProvider.ThemeProvider;
+exports.ThemeProvider = providers_ThemeProvider.ThemeProvider, exports.getThemeHtmlAttributes = providers_themeServer.getThemeHtmlAttributes, 
+exports.resolveInitialTheme = providers_themeServer.resolveInitialTheme;

package/dist/esm/chunks/{AudioBubble-DFh3Vxl6.mjs → AudioBubble-DZfzkdlq.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";

package/dist/esm/chunks/{Avatar-C8uV7ROZ.mjs → Avatar-m5-zleDk.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";

package/dist/esm/chunks/{AvatarGroup-Bt1Lkn5S.mjs → AvatarGroup-DlgP4lTS.mjs}

@@ -1,10 +1,11 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
 import React, { useMemo } from "react";
 
-import { A as Avatar } from "./Avatar-C8uV7ROZ.mjs";
+import { A as Avatar } from "./Avatar-m5-zleDk.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{Badge-D-U1jomY.mjs → Badge-CC0zSLMf.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";

package/dist/esm/chunks/{Button-sEYjFcR2.mjs → Button-YER9dCLE.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -6,13 +7,13 @@ import { motion } from "motion/react";
 
 import React, { forwardRef, useState, useRef, useCallback, useEffect, useImperativeHandle, useMemo } from "react";
 
-import { B as Badge } from "./Badge-D-U1jomY.mjs";
+import { B as Badge } from "./Badge-CC0zSLMf.mjs";
 
-import { D as Dot } from "./Dot-Cj6gWj4_.mjs";
+import { D as Dot } from "./Dot-DZE134mJ.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CxsZm_As.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-CB_oazMD.mjs";
 
 import { T as ToolTipType } from "./sharedTypes-tn9-uJvb.mjs";
 

package/dist/esm/chunks/{ButtonBar-DSR2lhhN.mjs → ButtonBar-BH4pcEpN.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";
@@ -6,7 +7,7 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 
 import { s as setStyle } from "./misc-BeEWwOaJ.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
@@ -15,7 +16,7 @@ var css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcx
 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.ButtonBar-module_wrapper__FYZ3s {\n\tborder-radius: var(--bb-border-radius);\n\tborder: var(--bb-border-size) solid var(--bb-border-color);\n\toverflow: hidden;\n}\n\n.ButtonBar-module_label__UcAS1 {\n\tcolor: var(--bb-label-color);\n\tpadding-right: 4px;\n}\n\n.ButtonBar-module_button__bMR3h {\n\theight: var(--bb-button-size);\n\twidth: var(--bb-button-size);\n\tmin-height: var(--bb-button-size);\n\tmin-width: var(--bb-button-size);\n\tcursor: pointer;\n\tbackground: var(--bb-bg-color);\n\tborder: 0;\n\tborder-right: var(--bb-border-size) solid var(--bb-border-color);\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tappearance: none;\n\t-webkit-appearance: none;\n\t&:first-child {\n\t\tpadding-left: 4px;\n\t}\n\t&:last-child {\n\t\tborder-right: none;\n\t\tpadding-right: 4px;\n\t}\n\t&:hover {\n\t\tbackground: var(--bb-bg-color-hover);\n\t}\n}\n\n.ButtonBar-module_selected__wKvmi {\n\tbackground: var(--bb-bg-color-active);\n\tcolor: var(--core-link-primary);\n}\n");
 
 const ButtonBar = React.memo(function(props) {
-    const {buttons: buttons = [], selected: selected, toggle: toggle = !0, buttonSize: buttonSize = 44, iconSize: iconSize = 20, borderWidth: borderWidth, borderSize: borderSize = 1, borderRadius: borderRadius = 100, borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, backgroundColorActive: backgroundColorActive, bgColor: bgColor = "var(--core-surface-primary)", bgColorHover: bgColorHover = "var(--core-surface-secondary)", bgColorActive: bgColorActive = "var(--core-surface-secondary)", labelColor: labelColor = "var(--core-text-primary)", onClick: onClick = button => null, onChange: onChange = button => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "buttons", "selected", "toggle", "buttonSize", "iconSize", "borderWidth", "borderSize", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorActive", "bgColor", "bgColorHover", "bgColorActive", "labelColor", "onClick", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBackgroundColorActive = null != backgroundColorActive ? backgroundColorActive : bgColorActive, [hovered, setHovered] = useState(-1), [selectedIndex, setSelectedIndex] = useState(selected);
+    const {buttons: buttons = [], selected: selected, toggle: toggle = !0, buttonSize: buttonSize = "m", frameSize: frameSize = 36, iconSize: iconSize = 20, borderWidth: borderWidth, borderSize: borderSize = 0, borderRadius: borderRadius = 100, borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, backgroundColorActive: backgroundColorActive, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorActive: bgColorActive = "var(--core-outline-primary)", labelColor: labelColor = "var(--core-text-primary)", onClick: onClick = button => null, onChange: onChange = button => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "buttons", "selected", "toggle", "buttonSize", "frameSize", "iconSize", "borderWidth", "borderSize", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorActive", "bgColor", "bgColorHover", "bgColorActive", "labelColor", "onClick", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBackgroundColorActive = null != backgroundColorActive ? backgroundColorActive : bgColorActive, [hovered, setHovered] = useState(-1), [selectedIndex, setSelectedIndex] = useState(selected);
     useEffect(() => setSelectedIndex(selected), [ selected ]);
     const handleMouseEnter = useCallback(index => {
         setHovered(index);
@@ -23,7 +24,7 @@ const ButtonBar = React.memo(function(props) {
         setHovered(-1);
     }, []), handleClick = useCallback((button, index) => {
         onClick(button), toggle && (setSelectedIndex(index), onChange(button));
-    }, [ onChange, onClick, toggle ]), buttonClass = useCallback(index => toggle && selectedIndex === index ? css_selected : "", [ selectedIndex, toggle ]), iconColor = useCallback(index => toggle && selectedIndex === index ? "var(--core-text-special)" : hovered === index ? "var(--core-text-primary)" : "var(--core-text-secondary)", [ selectedIndex, hovered, toggle ]), cssVars = useMemo(() => ({
+    }, [ onChange, onClick, toggle ]), buttonClass = useCallback(index => toggle && selectedIndex === index ? css_selected : "", [ selectedIndex, toggle ]), iconColor = useCallback(index => toggle && selectedIndex === index ? "var(--core-text-special)" : hovered === index ? "var(--core-text-primary)" : "var(--core-text-secondary)", [ selectedIndex, hovered, toggle ]), size = useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = useMemo(() => ({
         "--bb-border-size": `${resolvedBorderWidth}px`,
         "--bb-border-radius": setStyle(borderRadius),
         "--bb-border-color": borderColor,
@@ -31,8 +32,8 @@ const ButtonBar = React.memo(function(props) {
         "--bb-bg-color-hover": resolvedBackgroundColorHover,
         "--bb-bg-color-active": resolvedBackgroundColorActive,
         "--bb-label-color": labelColor,
-        "--bb-button-size": `${buttonSize}px`
-    }), [ resolvedBorderWidth, borderRadius, borderColor, resolvedBackgroundColor, labelColor, resolvedBackgroundColorHover, buttonSize, resolvedBackgroundColorActive ]), barButtons = useMemo(() => null == buttons ? void 0 : buttons.map((button, index) => jsx(BarButton, {
+        "--bb-button-size": `${size}px`
+    }), [ resolvedBorderWidth, borderRadius, borderColor, resolvedBackgroundColor, labelColor, resolvedBackgroundColorHover, size, resolvedBackgroundColorActive ]), barButtons = useMemo(() => null == buttons ? void 0 : buttons.map((button, index) => jsx(BarButton, {
         classNames: `${css_button} ${buttonClass(index)}`,
         onMouseEnter: () => handleMouseEnter(index),
         onMouseLeave: handleMouseLeave,

package/dist/esm/chunks/{Camera-DSSiOeJd.mjs → Camera-BJJpDuuA.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { _ as __awaiter } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -14,9 +15,9 @@ import { a as addOpacity } from "./colors-FQ0uNQcW.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { A as Avatar } from "./Avatar-C8uV7ROZ.mjs";
+import { A as Avatar } from "./Avatar-m5-zleDk.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{CheckBox-B6zWSySW.mjs → CheckBox-Cf2l3-D9.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -8,7 +9,7 @@ import React, { useState, useEffect, useMemo, useCallback } from "react";
 
 import { a as accessibleKeyDown } from "./misc-BeEWwOaJ.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{Chip-BBKJ6wG4.mjs → Chip-DWp7p2BF.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -6,7 +7,7 @@ import React, { useState, useCallback, useMemo } from "react";
 
 import { s as setStyle, a as accessibleKeyDown } from "./misc-BeEWwOaJ.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
 import { T as ToolTipType } from "./sharedTypes-tn9-uJvb.mjs";
 

package/dist/esm/chunks/{DivInput-cIMIH07H.mjs → DivInput-WJltaCra.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";

package/dist/esm/chunks/{Dot-Cj6gWj4_.mjs → Dot-DZE134mJ.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";

package/dist/esm/chunks/{DrggablePanel-CQcIbxpX.mjs → DrggablePanel-DA7pYWg6.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -20,6 +21,21 @@ var css_panel = "DraggablePanel-module_panel__vuq2R flexBox-module_columnStart__
 
 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.DraggablePanel-module_panel__vuq2R {\n\tposition: relative;\n\tbackground-color: var(--panel-bg);\n}\n\n.DraggablePanel-module_content__SBL0T {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.DraggablePanel-module_handle__LPZw8 {\n\twidth: var(--drag-handle-width);\n\theight: var(--drag-handle-height);\n\tmin-width: var(--drag-handle-width);\n\tmin-height: var(--drag-handle-height);\n\tborder-radius: var(--drag-handle-radius);\n\tborder: var(--drag-handle-border) solid var(--drag-handle-border-color);\n\tbackground: var(--drag-handle-bg);\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translateX(-50%) translateY(-50%);\n\tz-index: 15000;\n}\n");
 
+function normalizeConstraintValue(value, containerWidth, fallback) {
+    let normalized = value;
+    return normalized <= 1 && normalized >= 0 && (normalized = containerWidth ? containerWidth * normalized : fallback), 
+    normalized > 1 && normalized < 50 && (normalized = 50), normalized;
+}
+
+function resolveConstraints(sizeConstraints, containerWidth) {
+    const initial = normalizeConstraintValue(sizeConstraints.initial, containerWidth, 50), min = normalizeConstraintValue(sizeConstraints.min, containerWidth, initial);
+    return {
+        initial: min > initial ? min : initial,
+        min: min,
+        max: normalizeConstraintValue(sizeConstraints.max, containerWidth, initial)
+    };
+}
+
 const DraggablePanel = React.memo(props => {
     const theme = useTheme(), {children: children, sizeConstraints: sizeConstraints = {
         initial: 250,
@@ -29,7 +45,7 @@ const DraggablePanel = React.memo(props => {
         width: 10,
         color: "transparent",
         offsetX: !0
-    }, borderRight: borderRight = "1px solid var(--core-outline-primary)", borderLeft: borderLeft = null, bgColor: bgColor = "transparent", drags: drags = !0, isTouchDevice: isTouchDevice = !1, disableOnContext: disableOnContext = !0, dragHandle: dragHandle = !0, dragHandleStyle: dragHandleStyle, containerRef: containerRef, onResize: onResize = () => null, onResizeStart: onResizeStart = () => null, onResizeEnd: onResizeEnd = () => null} = props, divAttributes = __rest(props, [ "children", "sizeConstraints", "dragsRight", "isClosed", "resizeHandle", "borderRight", "borderLeft", "bgColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "containerRef", "onResize", "onResizeStart", "onResizeEnd" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = useRef(null), div = useRef(null), [isDragging, setIsDragging] = useState(!1), isOver = useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = useObserveResize(containerRef), [handleHighlight, setHandleHighlight] = useState(!1), [lastWidth, setLastWidth] = useState(null), [panelClosed, setPanelClosed] = useState(isClosed), [constraints, setConstraints] = useState(sizeConstraints), [contWidth, setContWidth] = useState(void 0), timer = useRef(null), startX = useRef(0), startWidth = useRef(0), divWidth = useRef(0), divHeight = useRef(0), deltaWidth = useRef(0), handleWindowResize = useCallback(() => {
+    }, borderRight: borderRight = "1px solid var(--core-outline-primary)", borderLeft: borderLeft = null, bgColor: bgColor = "transparent", drags: drags = !0, isTouchDevice: isTouchDevice = !1, disableOnContext: disableOnContext = !0, dragHandle: dragHandle = !0, dragHandleStyle: dragHandleStyle, containerRef: containerRef, onResize: onResize = () => null, onResizeStart: onResizeStart = () => null, onResizeEnd: onResizeEnd = () => null} = props, divAttributes = __rest(props, [ "children", "sizeConstraints", "dragsRight", "isClosed", "resizeHandle", "borderRight", "borderLeft", "bgColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "containerRef", "onResize", "onResizeStart", "onResizeEnd" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = useRef(null), div = useRef(null), [isDragging, setIsDragging] = useState(!1), isOver = useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = useObserveResize(containerRef), panelSize = useObserveResize(div), [handleHighlight, setHandleHighlight] = useState(!1), [lastWidth, setLastWidth] = useState(null), [panelClosed, setPanelClosed] = useState(isClosed), [constraints, setConstraints] = useState(() => resolveConstraints(sizeConstraints)), [contWidth, setContWidth] = useState(void 0), timer = useRef(null), closed = panelSize.width <= 1, startX = useRef(0), startWidth = useRef(0), divWidth = useRef(0), divHeight = useRef(0), deltaWidth = useRef(0), handleWindowResize = useCallback(() => {
         (null == containerRef ? void 0 : containerRef.current) || setContWidth(window.innerWidth);
     }, [ containerRef ]), handleMouseOver = useCallback(() => {
         isOver.current = !0, setHighlight(!0);
@@ -57,17 +73,7 @@ const DraggablePanel = React.memo(props => {
     }, []);
     useEffect(() => {
         if (!contWidth) return;
-        const {min: min, max: max, initial: initial} = sizeConstraints, relativeConstraints = {
-            min: min,
-            max: max,
-            initial: initial
-        };
-        for (const [key, value] of Object.entries(sizeConstraints)) {
-            let calc = value;
-            calc <= 1 && calc >= 0 && (calc = contWidth * value), calc > 1 && calc < 50 && (calc = 50), 
-            relativeConstraints[key] = calc;
-        }
-        relativeConstraints.min < relativeConstraints.initial && (relativeConstraints.initial = relativeConstraints.min), 
+        const relativeConstraints = resolveConstraints(sizeConstraints, contWidth);
         setConstraints(relativeConstraints), adjustCurrentWidth(relativeConstraints);
     }, [ sizeConstraints, contWidth, adjustCurrentWidth ]);
     const setHighlight = useCallback(state => {
@@ -154,8 +160,8 @@ const DraggablePanel = React.memo(props => {
             height: "100%",
             maxWidth: drags ? constraints.max : "unset",
             transition: isDragging ? "" : transition,
-            borderRight: !panelClosed && borderRight && drags ? borderRight : "none",
-            borderLeft: !panelClosed && borderLeft && drags ? borderLeft : "none"
+            borderRight: !closed && borderRight && drags ? borderRight : "none",
+            borderLeft: !closed && borderLeft && drags ? borderLeft : "none"
         })
     }, rest, {
         children: [ jsxs("div", {
@@ -163,7 +169,7 @@ const DraggablePanel = React.memo(props => {
             style: Object.assign(Object.assign({
                 position: "absolute",
                 boxSizing: "border-box",
-                display: panelClosed || !drags ? "none" : "flex",
+                display: closed || !drags ? "none" : "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 zIndex: 1,
@@ -181,7 +187,7 @@ const DraggablePanel = React.memo(props => {
             onBlur: handleBlur,
             onTouchStart: handleTouchStart,
             onTouchEnd: handleTouchEnd,
-            children: [ dragHandle && !panelClosed && jsx(DragHandle, Object.assign({}, null != dragHandleStyle ? dragHandleStyle : {})), jsx("div", {
+            children: [ dragHandle && !closed && jsx(DragHandle, Object.assign({}, null != dragHandleStyle ? dragHandleStyle : {})), jsx("div", {
                 style: {
                     backgroundColor: handleHighlight ? theme.current.colors["core-outline-primary"] : "transparent",
                     flex: 1,

package/dist/esm/chunks/{DropDown-DFUc_rjP.mjs → DropDown-BQ2tNN3_.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -6,7 +7,7 @@ import React, { useState, useRef, useEffect, useCallback, useMemo } from "react"
 
 import { s as setStyle } from "./misc-BeEWwOaJ.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{ErrorSummary-Mz9siVxm.mjs → ErrorSummary-EzCqVifm.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/chunks/{FileIcon-DeW-ZBiv.mjs → FileIcon-Cufsp1gn.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";

package/dist/esm/chunks/{FileList-0Dzx15hl.mjs → FileList-BQ9X5YnB.mjs}

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -6,11 +7,11 @@ import React, { useCallback, useMemo } from "react";
 
 import { s as setStyle, a as accessibleKeyDown } from "./misc-BeEWwOaJ.mjs";
 
-import { F as FileIcon } from "./FileIcon-DeW-ZBiv.mjs";
+import { F as FileIcon } from "./FileIcon-Cufsp1gn.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CxsZm_As.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-CB_oazMD.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

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

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx } from "react/jsx-runtime";
@@ -8,7 +9,84 @@ import React, { useMemo } from "react";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
-var css_flexDiv = "FlexDiv-module_flexDiv__EY5A- type-module_body-m-regular__LuQBA";
+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"), 
+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 || (Preset = {}));
+
+const layoutSets = {
+    [Preset.FillScroll]: {
+        width: "fill",
+        height: "fill",
+        justify: "start",
+        align: "start",
+        scrollY: !0,
+        direction: "column"
+    },
+    [Preset.FillCenter]: {
+        width: "fill",
+        height: "fill",
+        justify: "center",
+        align: "center",
+        scrollY: !1,
+        direction: "column"
+    },
+    [Preset.Window]: {
+        width: "viewport",
+        height: "viewport",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        direction: "row"
+    },
+    [Preset.Row]: {
+        width: "fill",
+        height: "fit",
+        justify: "start",
+        align: "center",
+        scrollY: !1,
+        direction: "row"
+    },
+    [Preset.RowBetween]: {
+        width: "fill",
+        height: "fit",
+        justify: "between",
+        align: "center",
+        scrollY: !1,
+        direction: "row"
+    },
+    [Preset.Column]: {
+        width: "fill",
+        height: "fit",
+        justify: "start",
+        align: "center",
+        scrollY: !1,
+        direction: "column"
+    },
+    [Preset.Default]: {
+        width: "fill",
+        height: "fit",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        direction: "column"
+    },
+    [Preset.Draggable]: {
+        width: "auto",
+        height: "fill",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        direction: "column"
+    }
+};
 
 function setSize(style, isHeight) {
     return "number" == typeof style ? `${style}px` : "grow" === style ? "unset" : "fill" === style ? "100%" : "fit" === style ? "auto" : "viewport" === style ? isHeight ? "100vh" : "100vw" : style;
@@ -22,10 +100,8 @@ function setFlex(style) {
     return "start" === style || "top" === style ? "flex-start" : "end" === style || "bottom" === style ? "flex-end" : "between" === style ? "space-between" : style;
 }
 
-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");
-
 const FlexDiv = React.memo(React.forwardRef((props, ref) => {
-    const {children: children, scrollY: scrollY = !1, scrollX: scrollX = !1, background: background = "var(--core-surface-primary)", direction: direction = "column", align: align = "start", justify: justify = "start", height: height = "fit", width: width = "fill", 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", "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 = 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(() => ({
         display: "flex",
         position: "" + (absolute ? "absolute" : "relative"),
         flexDirection: `${direction}${reverse ? "-reverse" : ""}`,
@@ -59,7 +135,7 @@ const FlexDiv = React.memo(React.forwardRef((props, ref) => {
         id: divId,
         ref: ref,
         className: `${css_flexDiv} ${null != className ? className : ""}`,
-        style: Object.assign(Object.assign({}, wrapperStyle), style),
+        style: Object.assign(Object.assign({}, style), wrapperStyle),
         transition: transition,
         variants: variants,
         initial: enter,
@@ -70,11 +146,4 @@ const FlexDiv = React.memo(React.forwardRef((props, ref) => {
     }));
 }));
 
-var Size;
-
-!function(Size) {
-    Size.Grow = "grow", Size.Fill = "fill", Size.Fit = "fit", Size.Viewport = "viewport", 
-    Size.Auto = "auto";
-}(Size || (Size = {}));
-
-export { FlexDiv as F, Size as S };
+export { FlexDiv as F, Preset as P, Size as S };

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

@@ -1,3 +1,4 @@
+'use client';
 import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,9 +13,9 @@ import "../theme/colors.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Badge } from "./Badge-D-U1jomY.mjs";
+import { B as Badge } from "./Badge-CC0zSLMf.mjs";
 
-import { I as Icon } from "./Icon-KDwlMXzH.mjs";
+import { I as Icon } from "./Icon-DI32kOA1.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";