@usefragments/ui 1.5.4 → 1.7.0

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_1asss_1";
-const item = "_item_1asss_12";
-const heading = "_heading_1asss_17";
-const trigger = "_trigger_1asss_23";
-const triggerContent = "_triggerContent_1asss_64";
-const chevron = "_chevron_1asss_68";
-const content = "_content_1asss_79";
-const contentInner = "_contentInner_1asss_92";
+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 styles = {
   accordion,
   item,

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

@@ -1,11 +1,11 @@
-const accordion = "_accordion_1asss_1";
-const item = "_item_1asss_12";
-const heading = "_heading_1asss_17";
-const trigger = "_trigger_1asss_23";
-const triggerContent = "_triggerContent_1asss_64";
-const chevron = "_chevron_1asss_68";
-const content = "_content_1asss_79";
-const contentInner = "_contentInner_1asss_92";
+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 styles = {
   accordion,
   item,

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

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const alert = "_alert_r2w0u_1";
-const title = "_title_r2w0u_12";
-const info = "_info_r2w0u_16";
-const success = "_success_r2w0u_22";
-const warning = "_warning_r2w0u_28";
-const error = "_error_r2w0u_34";
-const icon = "_icon_r2w0u_40";
-const body = "_body_r2w0u_73";
-const content = "_content_r2w0u_83";
-const actions = "_actions_r2w0u_87";
-const close = "_close_r2w0u_93";
-const action = "_action_r2w0u_87";
+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 styles = {
   alert,
   title,
@@ -19,6 +20,7 @@ const styles = {
   success,
   warning,
   error,
+  surface,
   icon,
   body,
   content,
@@ -37,5 +39,6 @@ exports.error = error;
 exports.icon = icon;
 exports.info = info;
 exports.success = success;
+exports.surface = surface;
 exports.title = title;
 exports.warning = warning;

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

@@ -1,15 +1,16 @@
-const alert = "_alert_r2w0u_1";
-const title = "_title_r2w0u_12";
-const info = "_info_r2w0u_16";
-const success = "_success_r2w0u_22";
-const warning = "_warning_r2w0u_28";
-const error = "_error_r2w0u_34";
-const icon = "_icon_r2w0u_40";
-const body = "_body_r2w0u_73";
-const content = "_content_r2w0u_83";
-const actions = "_actions_r2w0u_87";
-const close = "_close_r2w0u_93";
-const action = "_action_r2w0u_87";
+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 styles = {
   alert,
   title,
@@ -17,6 +18,7 @@ const styles = {
   success,
   warning,
   error,
+  surface,
   icon,
   body,
   content,
@@ -36,6 +38,7 @@ export {
   icon,
   info,
   success,
+  surface,
   title,
   warning
 };

package/dist/components/Alert/index.cjs

@@ -46,6 +46,7 @@ const severityIcons = {
 function AlertRoot({
   children,
   severity = "info",
+  emphasis = "tint",
   className,
   ...htmlProps
 }) {
@@ -56,7 +57,12 @@ function AlertRoot({
     setDismissed(true);
   }, []);
   if (dismissed) return null;
-  const classes = [Alert_module.default.alert, Alert_module.default[severity], className].filter(Boolean).join(" ");
+  const classes = [
+    Alert_module.default.alert,
+    Alert_module.default[severity],
+    emphasis === "surface" ? Alert_module.default.surface : null,
+    className
+  ].filter(Boolean).join(" ");
   const role = severity === "warning" || severity === "error" ? "alert" : "status";
   const contextValue = {
     severity,

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-export type AlertSeverity = 'info' | 'success' | 'warning' | 'error';
+import * as React from "react";
+export type AlertSeverity = "info" | "success" | "warning" | "error";
 /**
  * Alert for contextual feedback messages (info, success, warning, error).
  * @see https://usefragments.com/components/alert
@@ -10,6 +10,12 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      * @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
+     * 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" */
+    emphasis?: "tint" | "surface";
 }
 export interface AlertIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     children?: React.ReactNode;
@@ -23,11 +29,11 @@ export interface AlertContentProps extends React.HTMLAttributes<HTMLDivElement>
 export interface AlertActionsProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
     children: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
-export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     children?: React.ReactNode;
 }
 export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -40,14 +46,14 @@ interface AlertContextValue {
     dismiss: () => void;
 }
 declare function useAlertContext(): AlertContextValue;
-declare function AlertRoot({ children, severity, className, ...htmlProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AlertRoot({ children, severity, 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;
 declare function AlertContent({ children, className, ...htmlProps }: AlertContentProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertActions({ children, className, ...htmlProps }: AlertActionsProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertAction({ children, onClick, type, className, ...htmlProps }: AlertActionProps): import("react/jsx-runtime").JSX.Element;
-declare function AlertClose({ children, className, onClick, type, 'aria-label': ariaLabel, ...htmlProps }: AlertCloseProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertClose({ children, className, onClick, type, "aria-label": ariaLabel, ...htmlProps }: AlertCloseProps): import("react/jsx-runtime").JSX.Element;
 export declare const Alert: typeof AlertRoot & {
     Icon: typeof AlertIcon;
     Body: typeof AlertBody;

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

@@ -27,6 +27,7 @@ const severityIcons = {
 function AlertRoot({
   children,
   severity = "info",
+  emphasis = "tint",
   className,
   ...htmlProps
 }) {
@@ -37,7 +38,12 @@ function AlertRoot({
     setDismissed(true);
   }, []);
   if (dismissed) return null;
-  const classes = [styles.alert, styles[severity], className].filter(Boolean).join(" ");
+  const classes = [
+    styles.alert,
+    styles[severity],
+    emphasis === "surface" ? styles.surface : null,
+    className
+  ].filter(Boolean).join(" ");
   const role = severity === "warning" || severity === "error" ? "alert" : "status";
   const contextValue = {
     severity,

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_1ccf1_1";
-const sidebarLayout = "_sidebarLayout_1ccf1_20";
-const header = "_header_1ccf1_30";
-const sidebar = "_sidebar_1ccf1_20";
-const sidebarFullHeight = "_sidebarFullHeight_1ccf1_80";
-const sidebarFloating = "_sidebarFloating_1ccf1_90";
-const main = "_main_1ccf1_94";
-const mainFloating = "_mainFloating_1ccf1_101";
-const paddingNone = "_paddingNone_1ccf1_123";
-const paddingSm = "_paddingSm_1ccf1_127";
-const paddingMd = "_paddingMd_1ccf1_131";
-const paddingLg = "_paddingLg_1ccf1_135";
-const aside = "_aside_1ccf1_139";
-const asideFloating = "_asideFloating_1ccf1_160";
+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 styles = {
   root,
   sidebarLayout,

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

@@ -1,17 +1,17 @@
-const root = "_root_1ccf1_1";
-const sidebarLayout = "_sidebarLayout_1ccf1_20";
-const header = "_header_1ccf1_30";
-const sidebar = "_sidebar_1ccf1_20";
-const sidebarFullHeight = "_sidebarFullHeight_1ccf1_80";
-const sidebarFloating = "_sidebarFloating_1ccf1_90";
-const main = "_main_1ccf1_94";
-const mainFloating = "_mainFloating_1ccf1_101";
-const paddingNone = "_paddingNone_1ccf1_123";
-const paddingSm = "_paddingSm_1ccf1_127";
-const paddingMd = "_paddingMd_1ccf1_131";
-const paddingLg = "_paddingLg_1ccf1_135";
-const aside = "_aside_1ccf1_139";
-const asideFloating = "_asideFloating_1ccf1_160";
+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 styles = {
   root,
   sidebarLayout,

package/dist/components/AppShell/index.cjs

@@ -39,7 +39,7 @@ const AppShellContext = React__namespace.createContext({
   structure: "default",
   headerHeight: "56px",
   sidebarWidth: "240px",
-  sidebarCollapsedWidth: "64px",
+  sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   asideWidth: "280px",
   asideVisible: false
 });
@@ -62,7 +62,7 @@ function extractConfigFromChildren(children) {
   const config = {
     headerHeight: "56px",
     sidebarWidth: "240px",
-    sidebarCollapsedWidth: "64px",
+    sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
     sidebarCollapsible: "icon",
     sidebarDefaultCollapsed: false,
     asideWidth: "280px",
@@ -184,10 +184,11 @@ function AppShellHeader({
 function AppShellSidebar({
   children,
   width = "240px",
-  collapsedWidth = "64px",
+  collapsedWidth = "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   collapsible = "icon",
   position = "left",
   defaultCollapsed = false,
+  activeIndicator = "start",
   variant,
   bg,
   "aria-label": ariaLabel,
@@ -216,6 +217,7 @@ function AppShellSidebar({
         position,
         collapsible,
         defaultCollapsed,
+        activeIndicator,
         "aria-label": ariaLabel,
         style: bg ? { backgroundColor: bg } : void 0,
         children

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

@@ -59,7 +59,7 @@ export interface AppShellSidebarProps extends React.HTMLAttributes<HTMLDivElemen
     children: React.ReactNode;
     /** Width of expanded sidebar (default: '240px') */
     width?: string;
-    /** Width when collapsed (default: '64px') */
+    /** Width when collapsed (default: '56px') */
     collapsedWidth?: string;
     /** Collapse behavior */
     collapsible?: SidebarCollapsible;
@@ -67,6 +67,8 @@ export interface AppShellSidebarProps extends React.HTMLAttributes<HTMLDivElemen
     position?: "left" | "right";
     /** Default collapsed state */
     defaultCollapsed?: boolean;
+    /** Forwarded to Sidebar — where the active-item affordance paints */
+    activeIndicator?: "start" | "end";
     /** Visual treatment: `'floating'` blends sidebar with the shell background */
     variant?: AppShellSlotVariant;
     /** Background color override (accepts any CSS color value or token) */
@@ -114,7 +116,7 @@ declare function AppShellHeader({ children, height, bg, className, style: styleP
 /**
  * AppShell.Sidebar - Sidebar slot (delegates to Sidebar component)
  */
-declare function AppShellSidebar({ children, width, collapsedWidth, collapsible, position, defaultCollapsed, variant, bg, "aria-label": ariaLabel, className, style: styleProp, ...htmlProps }: AppShellSidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function AppShellSidebar({ children, width, collapsedWidth, collapsible, position, defaultCollapsed, activeIndicator, variant, bg, "aria-label": ariaLabel, className, style: styleProp, ...htmlProps }: AppShellSidebarProps): import("react/jsx-runtime").JSX.Element;
 /**
  * AppShell.Main - Scrollable main content area
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAwC,KAAK,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAM3F;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,kBAAkB,GAAG,UAAU,CAAC;AAErF,oDAAoD;AACpD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,sFAAsF;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB;IACxB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAClC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sBAAsB;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoCD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;CACvB;AAYD,iBAAS,WAAW,yBAEnB;AA4ID;;;GAGG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,MAAkB,EAClB,EAAE,EACF,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,SAAS,EACb,EAAE,aAAa,2CAoCf;AAED;;GAEG;AACH,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,MAAe,EACf,EAAE,EACF,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,SAAS,EACb,EAAE,mBAAmB,2CAcrB;AAED;;GAEG;AACH,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,KAAe,EACf,cAAsE,EACtE,WAAoB,EACpB,QAAiB,EACjB,gBAAwB,EACxB,eAAyB,EACzB,OAAO,EACP,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAmCtB;AAED;;GAEG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,OAAc,EACd,OAAO,EACP,EAAE,EACF,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,EAAmB,EACnB,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAuBnB;AAED;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,KAAe,EACf,OAAc,EACd,OAAO,EACP,EAAE,EACF,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,SAAS,EACb,EAAE,kBAAkB,kDAuBpB;AAMD,eAAO,MAAM,QAAQ;;;;;CAKnB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/AppShell/index.js

@@ -20,7 +20,7 @@ const AppShellContext = React.createContext({
   structure: "default",
   headerHeight: "56px",
   sidebarWidth: "240px",
-  sidebarCollapsedWidth: "64px",
+  sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   asideWidth: "280px",
   asideVisible: false
 });
@@ -43,7 +43,7 @@ function extractConfigFromChildren(children) {
   const config = {
     headerHeight: "56px",
     sidebarWidth: "240px",
-    sidebarCollapsedWidth: "64px",
+    sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
     sidebarCollapsible: "icon",
     sidebarDefaultCollapsed: false,
     asideWidth: "280px",
@@ -165,10 +165,11 @@ function AppShellHeader({
 function AppShellSidebar({
   children,
   width = "240px",
-  collapsedWidth = "64px",
+  collapsedWidth = "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   collapsible = "icon",
   position = "left",
   defaultCollapsed = false,
+  activeIndicator = "start",
   variant,
   bg,
   "aria-label": ariaLabel,
@@ -197,6 +198,7 @@ function AppShellSidebar({
         position,
         collapsible,
         defaultCollapsed,
+        activeIndicator,
         "aria-label": ariaLabel,
         style: bg ? { backgroundColor: bg } : void 0,
         children

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

@@ -1,28 +1,30 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const avatar = "_avatar_5754n_1";
-const square = "_square_5754n_15";
-const xs = "_xs_5754n_19";
-const sm = "_sm_5754n_25";
-const md = "_md_5754n_31";
-const lg = "_lg_5754n_37";
-const xl = "_xl_5754n_43";
-const image = "_image_5754n_49";
-const initials = "_initials_5754n_55";
-const fallbackIcon = "_fallbackIcon_5754n_62";
-const group = "_group_5754n_68";
-const groupItem = "_groupItem_5754n_74";
-const overflow = "_overflow_5754n_102";
+const avatar = "_avatar_3118z_1";
+const xs = "_xs_3118z_14";
+const sm = "_sm_3118z_26";
+const md = "_md_3118z_38";
+const lg = "_lg_3118z_50";
+const xl = "_xl_3118z_62";
+const square = "_square_3118z_74";
+const image = "_image_3118z_78";
+const initials = "_initials_3118z_84";
+const fallback = "_fallback_3118z_91";
+const fallbackIcon = "_fallbackIcon_3118z_99";
+const group = "_group_3118z_105";
+const groupItem = "_groupItem_3118z_111";
+const overflow = "_overflow_3118z_140";
 const styles = {
   avatar,
-  square,
   xs,
   sm,
   md,
   lg,
   xl,
+  square,
   image,
   initials,
+  fallback,
   fallbackIcon,
   group,
   groupItem,
@@ -30,6 +32,7 @@ const styles = {
 };
 exports.avatar = avatar;
 exports.default = styles;
+exports.fallback = fallback;
 exports.fallbackIcon = fallbackIcon;
 exports.group = group;
 exports.groupItem = groupItem;

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

@@ -1,26 +1,28 @@
-const avatar = "_avatar_5754n_1";
-const square = "_square_5754n_15";
-const xs = "_xs_5754n_19";
-const sm = "_sm_5754n_25";
-const md = "_md_5754n_31";
-const lg = "_lg_5754n_37";
-const xl = "_xl_5754n_43";
-const image = "_image_5754n_49";
-const initials = "_initials_5754n_55";
-const fallbackIcon = "_fallbackIcon_5754n_62";
-const group = "_group_5754n_68";
-const groupItem = "_groupItem_5754n_74";
-const overflow = "_overflow_5754n_102";
+const avatar = "_avatar_3118z_1";
+const xs = "_xs_3118z_14";
+const sm = "_sm_3118z_26";
+const md = "_md_3118z_38";
+const lg = "_lg_3118z_50";
+const xl = "_xl_3118z_62";
+const square = "_square_3118z_74";
+const image = "_image_3118z_78";
+const initials = "_initials_3118z_84";
+const fallback = "_fallback_3118z_91";
+const fallbackIcon = "_fallbackIcon_3118z_99";
+const group = "_group_3118z_105";
+const groupItem = "_groupItem_3118z_111";
+const overflow = "_overflow_3118z_140";
 const styles = {
   avatar,
-  square,
   xs,
   sm,
   md,
   lg,
   xl,
+  square,
   image,
   initials,
+  fallback,
   fallbackIcon,
   group,
   groupItem,
@@ -29,6 +31,7 @@ const styles = {
 export {
   avatar,
   styles as default,
+  fallback,
   fallbackIcon,
   group,
   groupItem,