@usefragments/ui 1.7.0 → 2.0.0

package/dist/blocks/components/StatsCard.d.ts

@@ -7,7 +7,7 @@ export interface StatsCardProps {
     /** Change indicator text (e.g., "+12.5%") */
     change?: string;
     /** Semantic variant for the change badge */
-    changeVariant?: 'success' | 'warning' | 'error';
+    changeTone?: 'success' | 'warning' | 'danger';
     /** Optional icon rendered in the top-right corner */
     icon?: React.ReactNode;
     /** Additional CSS class name */

package/dist/blocks/components/StatsCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../src/blocks/components/StatsCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,qDAAqD;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,SAAS,uFA8CrB,CAAC"}
+{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../src/blocks/components/StatsCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9C,qDAAqD;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,SAAS,uFA8CrB,CAAC"}

package/dist/codeblock.cjs

@@ -25,7 +25,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const index = require("./components/Tabs/index.cjs");
+const index$1 = require("./components/Button/index.cjs");
+const index = require("./components/IconButton/index.cjs");
+const index$2 = require("./components/Tabs/index.cjs");
 const cssVariablesTheme = require("./components/CodeBlock/css-variables-theme.cjs");
 const CodeBlock_module = require("./components/CodeBlock/CodeBlock.module.scss.cjs");
 const env = require("./utils/env.cjs");
@@ -506,9 +508,10 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
       shouldRenderHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CodeBlock_module.default.header, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: CodeBlock_module.default.filename, children: filename ?? "" }),
         shouldShowHeaderCopy && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          index.IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             onClick: handleCopy,
             className: `${CodeBlock_module.default.copyButton} ${copied ? CodeBlock_module.default.copied : ""}`,
             "aria-label": copied ? "Copied!" : "Copy code",
@@ -517,9 +520,10 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         )
       ] }),
       shouldShowOverlayCopy && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        index.IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${CodeBlock_module.default.copyButton} ${CodeBlock_module.default.copyOverlay} ${copied ? CodeBlock_module.default.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -535,9 +539,10 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         }
       ),
       persistentCopy && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        index.IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${CodeBlock_module.default.persistentCopy} ${CodeBlock_module.default.copyButton} ${CodeBlock_module.default.copyOverlay} ${copied ? CodeBlock_module.default.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -545,9 +550,11 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         }
       ),
       shouldShowCollapse && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        index$1.Button,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
+          fullWidth: true,
           onClick: toggleCollapsed,
           className: collapseAction === "expand" ? `${CodeBlock_module.default.collapseButton} ${CodeBlock_module.default.collapseExpand}` : CodeBlock_module.default.collapseButton,
           "aria-expanded": !isCollapsed,
@@ -578,7 +585,7 @@ function TabbedCodeBlock({
   copyPlacement = "auto",
   showLineNumbers = false,
   theme,
-  tabsVariant = "pills",
+  tabsVariant = "soft",
   wordWrap,
   maxHeight,
   collapsible,
@@ -590,15 +597,15 @@ function TabbedCodeBlock({
 }) {
   var _a, _b;
   const defaultValue = defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value) || ((_b = tabs[0]) == null ? void 0 : _b.label) || "";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs(index.TabsRoot, { defaultValue, value, onValueChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.TabsList, { variant: tabsVariant, children: tabs.map((tab, index$1) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs(index$2.TabsRoot, { defaultValue, value, onValueChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$2.TabsList, { variant: tabsVariant, children: tabs.map((tab, index2) => {
       const tabValue = tab.value ?? tab.label;
-      return /* @__PURE__ */ jsxRuntime.jsx(index.Tab, { value: tabValue, children: tab.label }, `${tabValue}-${index$1}`);
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.Tab, { value: tabValue, children: tab.label }, `${tabValue}-${index2}`);
     }) }),
-    tabs.map((tab, index$1) => {
+    tabs.map((tab, index2) => {
       const tabValue = tab.value ?? tab.label;
       return /* @__PURE__ */ jsxRuntime.jsx(
-        index.TabsPanel,
+        index$2.TabsPanel,
         {
           value: tabValue,
           flush: true,
@@ -622,7 +629,7 @@ function TabbedCodeBlock({
             }
           )
         },
-        `${tabValue}-panel-${index$1}`
+        `${tabValue}-panel-${index2}`
       );
     })
   ] }) });

package/dist/codeblock.js

@@ -2,6 +2,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "./components/Button/index.js";
+import { IconButton } from "./components/IconButton/index.js";
 import { TabsRoot, TabsList, Tab, TabsPanel } from "./components/Tabs/index.js";
 import { FUI_CSS_VARIABLES_THEME } from "./components/CodeBlock/css-variables-theme.js";
 import styles from "./components/CodeBlock/CodeBlock.module.scss.js";
@@ -466,9 +468,10 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
       shouldRenderHeader && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
         /* @__PURE__ */ jsx("span", { className: styles.filename, children: filename ?? "" }),
         shouldShowHeaderCopy && /* @__PURE__ */ jsx(
-          "button",
+          IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             onClick: handleCopy,
             className: `${styles.copyButton} ${copied ? styles.copied : ""}`,
             "aria-label": copied ? "Copied!" : "Copy code",
@@ -477,9 +480,10 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
         )
       ] }),
       shouldShowOverlayCopy && /* @__PURE__ */ jsx(
-        "button",
+        IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -495,9 +499,10 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
         }
       ),
       persistentCopy && /* @__PURE__ */ jsx(
-        "button",
+        IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${styles.persistentCopy} ${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -505,9 +510,11 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
         }
       ),
       shouldShowCollapse && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
+          fullWidth: true,
           onClick: toggleCollapsed,
           className: collapseAction === "expand" ? `${styles.collapseButton} ${styles.collapseExpand}` : styles.collapseButton,
           "aria-expanded": !isCollapsed,
@@ -538,7 +545,7 @@ function TabbedCodeBlock({
   copyPlacement = "auto",
   showLineNumbers = false,
   theme,
-  tabsVariant = "pills",
+  tabsVariant = "soft",
   wordWrap,
   maxHeight,
   collapsible,

package/dist/colorpicker.cjs

@@ -151,6 +151,7 @@ const ColorPickerRoot = React__namespace.forwardRef(function ColorPicker2({
                 className: ColorPicker_module.default.swatch,
                 style: { backgroundColor: displayValue },
                 disabled,
+                "aria-invalid": error || void 0,
                 "aria-label": label ? `Edit ${label} color` : "Edit color"
               }
             ),

package/dist/colorpicker.js

@@ -110,6 +110,7 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
                 className: styles.swatch,
                 style: { backgroundColor: displayValue },
                 disabled,
+                "aria-invalid": error || void 0,
                 "aria-label": label ? `Edit ${label} color` : "Edit color"
               }
             ),

package/dist/components/Accordion/Accordion.module.scss.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const accordion = "_accordion_1wl4m_1";
-const item = "_item_1wl4m_11";
-const heading = "_heading_1wl4m_16";
-const trigger = "_trigger_1wl4m_21";
-const triggerContent = "_triggerContent_1wl4m_74";
-const chevron = "_chevron_1wl4m_79";
-const content = "_content_1wl4m_90";
-const contentInner = "_contentInner_1wl4m_102";
+const accordion = "_accordion_5sec0_1";
+const item = "_item_5sec0_11";
+const heading = "_heading_5sec0_17";
+const trigger = "_trigger_5sec0_22";
+const triggerContent = "_triggerContent_5sec0_76";
+const chevron = "_chevron_5sec0_81";
+const content = "_content_5sec0_92";
+const contentInner = "_contentInner_5sec0_104";
 const styles = {
   accordion,
   item,

package/dist/components/Accordion/Accordion.module.scss.js

@@ -1,11 +1,11 @@
-const accordion = "_accordion_1wl4m_1";
-const item = "_item_1wl4m_11";
-const heading = "_heading_1wl4m_16";
-const trigger = "_trigger_1wl4m_21";
-const triggerContent = "_triggerContent_1wl4m_74";
-const chevron = "_chevron_1wl4m_79";
-const content = "_content_1wl4m_90";
-const contentInner = "_contentInner_1wl4m_102";
+const accordion = "_accordion_5sec0_1";
+const item = "_item_5sec0_11";
+const heading = "_heading_5sec0_17";
+const trigger = "_trigger_5sec0_22";
+const triggerContent = "_triggerContent_5sec0_76";
+const chevron = "_chevron_5sec0_81";
+const content = "_content_5sec0_92";
+const contentInner = "_contentInner_5sec0_104";
 const styles = {
   accordion,
   item,

package/dist/components/Alert/Alert.module.scss.cjs

@@ -1,25 +1,25 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const alert = "_alert_1xq9x_1";
-const title = "_title_1xq9x_14";
-const info = "_info_1xq9x_18";
-const success = "_success_1xq9x_24";
-const warning = "_warning_1xq9x_30";
-const error = "_error_1xq9x_36";
-const surface = "_surface_1xq9x_42";
-const icon = "_icon_1xq9x_63";
-const body = "_body_1xq9x_95";
-const content = "_content_1xq9x_110";
-const actions = "_actions_1xq9x_119";
-const close = "_close_1xq9x_125";
-const action = "_action_1xq9x_119";
+const alert = "_alert_1b772_1";
+const title = "_title_1b772_29";
+const toneInfo = "_toneInfo_1b772_33";
+const toneSuccess = "_toneSuccess_1b772_39";
+const toneWarning = "_toneWarning_1b772_45";
+const toneDanger = "_toneDanger_1b772_51";
+const surface = "_surface_1b772_57";
+const icon = "_icon_1b772_65";
+const body = "_body_1b772_82";
+const content = "_content_1b772_97";
+const actions = "_actions_1b772_106";
+const close = "_close_1b772_112";
+const action = "_action_1b772_106";
 const styles = {
   alert,
   title,
-  info,
-  success,
-  warning,
-  error,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
   surface,
   icon,
   body,
@@ -35,10 +35,10 @@ exports.body = body;
 exports.close = close;
 exports.content = content;
 exports.default = styles;
-exports.error = error;
 exports.icon = icon;
-exports.info = info;
-exports.success = success;
 exports.surface = surface;
 exports.title = title;
-exports.warning = warning;
+exports.toneDanger = toneDanger;
+exports.toneInfo = toneInfo;
+exports.toneSuccess = toneSuccess;
+exports.toneWarning = toneWarning;

package/dist/components/Alert/Alert.module.scss.js

@@ -1,23 +1,23 @@
-const alert = "_alert_1xq9x_1";
-const title = "_title_1xq9x_14";
-const info = "_info_1xq9x_18";
-const success = "_success_1xq9x_24";
-const warning = "_warning_1xq9x_30";
-const error = "_error_1xq9x_36";
-const surface = "_surface_1xq9x_42";
-const icon = "_icon_1xq9x_63";
-const body = "_body_1xq9x_95";
-const content = "_content_1xq9x_110";
-const actions = "_actions_1xq9x_119";
-const close = "_close_1xq9x_125";
-const action = "_action_1xq9x_119";
+const alert = "_alert_1b772_1";
+const title = "_title_1b772_29";
+const toneInfo = "_toneInfo_1b772_33";
+const toneSuccess = "_toneSuccess_1b772_39";
+const toneWarning = "_toneWarning_1b772_45";
+const toneDanger = "_toneDanger_1b772_51";
+const surface = "_surface_1b772_57";
+const icon = "_icon_1b772_65";
+const body = "_body_1b772_82";
+const content = "_content_1b772_97";
+const actions = "_actions_1b772_106";
+const close = "_close_1b772_112";
+const action = "_action_1b772_106";
 const styles = {
   alert,
   title,
-  info,
-  success,
-  warning,
-  error,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
   surface,
   icon,
   body,
@@ -34,11 +34,11 @@ export {
   close,
   content,
   styles as default,
-  error,
   icon,
-  info,
-  success,
   surface,
   title,
-  warning
+  toneDanger,
+  toneInfo,
+  toneSuccess,
+  toneWarning
 };

package/dist/components/Alert/index.cjs

@@ -37,15 +37,21 @@ function composeEventHandlers(userHandler, internalHandler) {
     internalHandler == null ? void 0 : internalHandler(event);
   };
 }
-const severityIcons = {
+const toneIcons = {
   info: "i",
   success: "✓",
   warning: "!",
-  error: "✗"
+  danger: "✗"
+};
+const TONE_CLASS = {
+  info: Alert_module.default.toneInfo,
+  success: Alert_module.default.toneSuccess,
+  warning: Alert_module.default.toneWarning,
+  danger: Alert_module.default.toneDanger
 };
 function AlertRoot({
   children,
-  severity = "info",
+  tone = "info",
   emphasis = "tint",
   className,
   ...htmlProps
@@ -59,13 +65,13 @@ function AlertRoot({
   if (dismissed) return null;
   const classes = [
     Alert_module.default.alert,
-    Alert_module.default[severity],
+    TONE_CLASS[tone],
     emphasis === "surface" ? Alert_module.default.surface : null,
     className
   ].filter(Boolean).join(" ");
-  const role = severity === "warning" || severity === "error" ? "alert" : "status";
+  const role = tone === "warning" || tone === "danger" ? "alert" : "status";
   const contextValue = {
-    severity,
+    tone,
     titleId,
     descId,
     dismiss
@@ -83,9 +89,9 @@ function AlertRoot({
   ) });
 }
 function AlertIcon({ children, className, ...htmlProps }) {
-  const { severity } = useAlertContext();
+  const { tone } = useAlertContext();
   const classes = [Alert_module.default.icon, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? toneIcons[tone] });
 }
 function AlertBody({ children, className, ...htmlProps }) {
   const classes = [Alert_module.default.body, className].filter(Boolean).join(" ");

package/dist/components/Alert/index.d.ts

@@ -1,17 +1,17 @@
 import * as React from "react";
-export type AlertSeverity = "info" | "success" | "warning" | "error";
+export type AlertTone = "info" | "success" | "warning" | "danger";
 /**
- * Alert for contextual feedback messages (info, success, warning, error).
+ * Alert for contextual feedback messages (info, success, warning, danger).
  * @see https://usefragments.com/components/alert
  */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    /** Alert severity level. Controls color and default icon.
+    /** Tone. Controls color and default icon.
      * @default "info"
-     * @see https://usefragments.com/components/alert#variants */
-    severity?: AlertSeverity;
-    /** How much surface the severity claims. `tint` washes the whole card in the
-     * severity colour. `surface` keeps the card on the page's own background and
+     * @see https://usefragments.com/components/alert#tones */
+    tone?: AlertTone;
+    /** How much surface the tone claims. `tint` washes the whole card in the
+     * tone colour. `surface` keeps the card on the page's own background and
      * spends the colour only on the hairline and the title — for a standing
      * failure that owns the view, where a full wash would read as a red page.
      * @default "tint" */
@@ -40,13 +40,13 @@ export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
 interface AlertContextValue {
-    severity: AlertSeverity;
+    tone: AlertTone;
     titleId: string;
     descId: string;
     dismiss: () => void;
 }
 declare function useAlertContext(): AlertContextValue;
-declare function AlertRoot({ children, severity, emphasis, className, ...htmlProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AlertRoot({ children, tone, emphasis, className, ...htmlProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
 declare function AlertIcon({ children, className, ...htmlProps }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertBody({ children, className, ...htmlProps }: AlertBodyProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ children, className, ...htmlProps }: AlertTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Alert/index.js

@@ -18,15 +18,21 @@ function composeEventHandlers(userHandler, internalHandler) {
     internalHandler == null ? void 0 : internalHandler(event);
   };
 }
-const severityIcons = {
+const toneIcons = {
   info: "i",
   success: "✓",
   warning: "!",
-  error: "✗"
+  danger: "✗"
+};
+const TONE_CLASS = {
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger
 };
 function AlertRoot({
   children,
-  severity = "info",
+  tone = "info",
   emphasis = "tint",
   className,
   ...htmlProps
@@ -40,13 +46,13 @@ function AlertRoot({
   if (dismissed) return null;
   const classes = [
     styles.alert,
-    styles[severity],
+    TONE_CLASS[tone],
     emphasis === "surface" ? styles.surface : null,
     className
   ].filter(Boolean).join(" ");
-  const role = severity === "warning" || severity === "error" ? "alert" : "status";
+  const role = tone === "warning" || tone === "danger" ? "alert" : "status";
   const contextValue = {
-    severity,
+    tone,
     titleId,
     descId,
     dismiss
@@ -64,9 +70,9 @@ function AlertRoot({
   ) });
 }
 function AlertIcon({ children, className, ...htmlProps }) {
-  const { severity } = useAlertContext();
+  const { tone } = useAlertContext();
   const classes = [styles.icon, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+  return /* @__PURE__ */ jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? toneIcons[tone] });
 }
 function AlertBody({ children, className, ...htmlProps }) {
   const classes = [styles.body, className].filter(Boolean).join(" ");

package/dist/components/AppShell/AppShell.module.scss.cjs

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1ub3t_1";
-const sidebarLayout = "_sidebarLayout_1ub3t_40";
-const header = "_header_1ub3t_50";
-const sidebar = "_sidebar_1ub3t_40";
-const sidebarFullHeight = "_sidebarFullHeight_1ub3t_103";
-const sidebarFloating = "_sidebarFloating_1ub3t_112";
-const main = "_main_1ub3t_116";
-const mainFloating = "_mainFloating_1ub3t_123";
-const paddingNone = "_paddingNone_1ub3t_145";
-const paddingSm = "_paddingSm_1ub3t_149";
-const paddingMd = "_paddingMd_1ub3t_153";
-const paddingLg = "_paddingLg_1ub3t_157";
-const aside = "_aside_1ub3t_161";
-const asideFloating = "_asideFloating_1ub3t_182";
+const root = "_root_1syrl_1";
+const sidebarLayout = "_sidebarLayout_1syrl_41";
+const header = "_header_1syrl_57";
+const sidebar = "_sidebar_1syrl_41";
+const sidebarFullHeight = "_sidebarFullHeight_1syrl_110";
+const sidebarFloating = "_sidebarFloating_1syrl_119";
+const main = "_main_1syrl_123";
+const mainFloating = "_mainFloating_1syrl_130";
+const paddingNone = "_paddingNone_1syrl_152";
+const paddingSm = "_paddingSm_1syrl_156";
+const paddingMd = "_paddingMd_1syrl_160";
+const paddingLg = "_paddingLg_1syrl_164";
+const aside = "_aside_1syrl_168";
+const asideFloating = "_asideFloating_1syrl_189";
 const styles = {
   root,
   sidebarLayout,

package/dist/components/AppShell/AppShell.module.scss.js

@@ -1,17 +1,17 @@
-const root = "_root_1ub3t_1";
-const sidebarLayout = "_sidebarLayout_1ub3t_40";
-const header = "_header_1ub3t_50";
-const sidebar = "_sidebar_1ub3t_40";
-const sidebarFullHeight = "_sidebarFullHeight_1ub3t_103";
-const sidebarFloating = "_sidebarFloating_1ub3t_112";
-const main = "_main_1ub3t_116";
-const mainFloating = "_mainFloating_1ub3t_123";
-const paddingNone = "_paddingNone_1ub3t_145";
-const paddingSm = "_paddingSm_1ub3t_149";
-const paddingMd = "_paddingMd_1ub3t_153";
-const paddingLg = "_paddingLg_1ub3t_157";
-const aside = "_aside_1ub3t_161";
-const asideFloating = "_asideFloating_1ub3t_182";
+const root = "_root_1syrl_1";
+const sidebarLayout = "_sidebarLayout_1syrl_41";
+const header = "_header_1syrl_57";
+const sidebar = "_sidebar_1syrl_41";
+const sidebarFullHeight = "_sidebarFullHeight_1syrl_110";
+const sidebarFloating = "_sidebarFloating_1syrl_119";
+const main = "_main_1syrl_123";
+const mainFloating = "_mainFloating_1syrl_130";
+const paddingNone = "_paddingNone_1syrl_152";
+const paddingSm = "_paddingSm_1syrl_156";
+const paddingMd = "_paddingMd_1syrl_160";
+const paddingLg = "_paddingLg_1syrl_164";
+const aside = "_aside_1syrl_168";
+const asideFloating = "_asideFloating_1syrl_189";
 const styles = {
   root,
   sidebarLayout,

package/dist/components/AppShell/index.cjs

@@ -37,7 +37,7 @@ function resolveSlotVariant(explicit, layout, slot) {
 const AppShellContext = React__namespace.createContext({
   layout: "default",
   structure: "default",
-  headerHeight: "56px",
+  headerHeight: "var(--fui-appshell-header-height, 56px)",
   sidebarWidth: "240px",
   sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   asideWidth: "280px",
@@ -60,7 +60,7 @@ function useIsMobile() {
 }
 function extractConfigFromChildren(children) {
   const config = {
-    headerHeight: "56px",
+    headerHeight: "var(--fui-appshell-header-height, 56px)",
     sidebarWidth: "240px",
     sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
     sidebarCollapsible: "icon",

package/dist/components/AppShell/index.js

@@ -18,7 +18,7 @@ function resolveSlotVariant(explicit, layout, slot) {
 const AppShellContext = React.createContext({
   layout: "default",
   structure: "default",
-  headerHeight: "56px",
+  headerHeight: "var(--fui-appshell-header-height, 56px)",
   sidebarWidth: "240px",
   sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   asideWidth: "280px",
@@ -41,7 +41,7 @@ function useIsMobile() {
 }
 function extractConfigFromChildren(children) {
   const config = {
-    headerHeight: "56px",
+    headerHeight: "var(--fui-appshell-header-height, 56px)",
     sidebarWidth: "240px",
     sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
     sidebarCollapsible: "icon",