@usefragments/ui 1.6.0 → 1.7.0

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

@@ -1,55 +1,55 @@
-const loading = "_loading_dbqe1_1";
-const sm = "_sm_dbqe1_8";
-const md = "_md_dbqe1_18";
-const lg = "_lg_dbqe1_28";
-const xl = "_xl_dbqe1_38";
-const colorAccent = "_color-accent_dbqe1_48";
-const colorCurrent = "_color-current_dbqe1_52";
-const colorMuted = "_color-muted_dbqe1_56";
-const centered = "_centered_dbqe1_60";
-const fill = "_fill_dbqe1_66";
-const spinnerIcon = "_spinnerIcon_dbqe1_74";
-const spin = "_spin_dbqe1_74";
-const dots = "_dots_dbqe1_94";
-const dot = "_dot_dbqe1_94";
-const bounce = "_bounce_dbqe1_1";
-const pulse = "_pulse_dbqe1_135";
-const pulseRing = "_pulseRing_dbqe1_144";
-const pulseDot = "_pulseDot_dbqe1_160";
-const overlayBackdrop = "_overlayBackdrop_dbqe1_178";
-const inline = "_inline_dbqe1_188";
-const inlineSm = "_inline-sm_dbqe1_194";
-const inlineMd = "_inline-md_dbqe1_198";
-const inlineSpinner = "_inlineSpinner_dbqe1_202";
-const screen = "_screen_dbqe1_215";
-const screenLabel = "_screenLabel_dbqe1_227";
+const loading = "_loading_7x0gi_1";
+const sm = "_sm_7x0gi_8";
+const md = "_md_7x0gi_18";
+const lg = "_lg_7x0gi_28";
+const xl = "_xl_7x0gi_38";
+const colorAccent = "_color-accent_7x0gi_48";
+const colorCurrent = "_color-current_7x0gi_52";
+const colorMuted = "_color-muted_7x0gi_56";
+const centered = "_centered_7x0gi_60";
+const fill = "_fill_7x0gi_66";
+const spinnerIcon = "_spinnerIcon_7x0gi_74";
+const spin = "_spin_7x0gi_74";
+const dotsTrack = "_dotsTrack_7x0gi_94";
+const dot = "_dot_7x0gi_94";
+const bounce = "_bounce_7x0gi_1";
+const pulseTrack = "_pulseTrack_7x0gi_135";
+const pulseRing = "_pulseRing_7x0gi_144";
+const pulseDot = "_pulseDot_7x0gi_160";
+const overlayBackdrop = "_overlayBackdrop_7x0gi_178";
+const inline = "_inline_7x0gi_188";
+const inlineSm = "_inline-sm_7x0gi_194";
+const inlineMd = "_inline-md_7x0gi_198";
+const inlineSpinner = "_inlineSpinner_7x0gi_202";
+const screen = "_screen_7x0gi_215";
+const screenLabel = "_screenLabel_7x0gi_227";
 const styles = {
   loading,
   sm,
   md,
   lg,
   xl,
-  "color-accent": "_color-accent_dbqe1_48",
+  "color-accent": "_color-accent_7x0gi_48",
   colorAccent,
-  "color-current": "_color-current_dbqe1_52",
+  "color-current": "_color-current_7x0gi_52",
   colorCurrent,
-  "color-muted": "_color-muted_dbqe1_56",
+  "color-muted": "_color-muted_7x0gi_56",
   colorMuted,
   centered,
   fill,
   spinnerIcon,
   spin,
-  dots,
+  dotsTrack,
   dot,
   bounce,
-  pulse,
+  pulseTrack,
   pulseRing,
   pulseDot,
   overlayBackdrop,
   inline,
-  "inline-sm": "_inline-sm_dbqe1_194",
+  "inline-sm": "_inline-sm_7x0gi_194",
   inlineSm,
-  "inline-md": "_inline-md_dbqe1_198",
+  "inline-md": "_inline-md_7x0gi_198",
   inlineMd,
   inlineSpinner,
   screen,
@@ -63,7 +63,7 @@ export {
   colorMuted,
   styles as default,
   dot,
-  dots,
+  dotsTrack,
   fill,
   inline,
   inlineMd,
@@ -73,9 +73,9 @@ export {
   loading,
   md,
   overlayBackdrop,
-  pulse,
   pulseDot,
   pulseRing,
+  pulseTrack,
   screen,
   screenLabel,
   sm,

package/dist/components/Loading/index.cjs

@@ -72,7 +72,7 @@ const LoadingRoot = React__namespace.forwardRef(function LoadingRoot2({
     overlay && Loading_module.default.overlay,
     className
   ].filter(Boolean).join(" ");
-  const animation = variant === "dots" ? /* @__PURE__ */ jsxRuntime.jsx(DotsAnimation, { className: Loading_module.default.dots }) : variant === "pulse" ? /* @__PURE__ */ jsxRuntime.jsx(PulseAnimation, { className: Loading_module.default.pulse }) : /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: Loading_module.default.spinnerIcon });
+  const animation = variant === "dots" ? /* @__PURE__ */ jsxRuntime.jsx(DotsAnimation, { className: Loading_module.default.dotsTrack }) : variant === "pulse" ? /* @__PURE__ */ jsxRuntime.jsx(PulseAnimation, { className: Loading_module.default.pulseTrack }) : /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: Loading_module.default.spinnerIcon });
   const content = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/components/Loading/index.js

@@ -53,7 +53,7 @@ const LoadingRoot = React.forwardRef(function LoadingRoot2({
     overlay && styles.overlay,
     className
   ].filter(Boolean).join(" ");
-  const animation = variant === "dots" ? /* @__PURE__ */ jsx(DotsAnimation, { className: styles.dots }) : variant === "pulse" ? /* @__PURE__ */ jsx(PulseAnimation, { className: styles.pulse }) : /* @__PURE__ */ jsx(SpinnerIcon, { className: styles.spinnerIcon });
+  const animation = variant === "dots" ? /* @__PURE__ */ jsx(DotsAnimation, { className: styles.dotsTrack }) : variant === "pulse" ? /* @__PURE__ */ jsx(PulseAnimation, { className: styles.pulseTrack }) : /* @__PURE__ */ jsx(SpinnerIcon, { className: styles.spinnerIcon });
   const content = /* @__PURE__ */ jsx(
     "div",
     {

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const markdown = "_markdown_10y3w_2";
+const markdown = "_markdown_v14j4_2";
 const styles = {
   markdown
 };

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

@@ -1,4 +1,4 @@
-const markdown = "_markdown_10y3w_2";
+const markdown = "_markdown_v14j4_2";
 const styles = {
   markdown
 };

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React from "react";
 type MarkdownComponentMap = Record<string, React.ComponentType<any>>;
-export interface MarkdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface MarkdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /** Markdown string to render */
     content: string;
     /** Override map for markdown element components */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD;;;;;;;;GAQG;AACH,iBAAS,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,CA2BjC;AAiED,eAAO,MAAM,QAAQ;;IAEnB;;;;OAIG;;CAEH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,KAAK,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD;;;;;;;;GAQG;AACH,iBAAS,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,CA2BjC;AA+DD,eAAO,MAAM,QAAQ;;IAEnB;;;;OAIG;;CAEH,CAAC"}

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const positioner = "_positioner_10vn6_1";
-const popup = "_popup_10vn6_7";
-const viewport = "_viewport_10vn6_49";
-const item = "_item_10vn6_56";
-const itemDanger = "_itemDanger_10vn6_78";
-const itemIcon = "_itemIcon_10vn6_86";
-const checkIndicator = "_checkIndicator_10vn6_87";
-const radioIndicator = "_radioIndicator_10vn6_88";
-const itemLabel = "_itemLabel_10vn6_108";
-const itemShortcut = "_itemShortcut_10vn6_113";
-const radioItem = "_radioItem_10vn6_139";
-const separator = "_separator_10vn6_144";
-const groupLabel = "_groupLabel_10vn6_150";
-const submenuTrigger = "_submenuTrigger_10vn6_164";
+const positioner = "_positioner_13yql_1";
+const popup = "_popup_13yql_9";
+const viewport = "_viewport_13yql_59";
+const item = "_item_13yql_66";
+const itemDanger = "_itemDanger_13yql_90";
+const itemIcon = "_itemIcon_13yql_98";
+const checkIndicator = "_checkIndicator_13yql_99";
+const radioIndicator = "_radioIndicator_13yql_100";
+const itemLabel = "_itemLabel_13yql_120";
+const itemShortcut = "_itemShortcut_13yql_125";
+const radioItem = "_radioItem_13yql_151";
+const separator = "_separator_13yql_156";
+const groupLabel = "_groupLabel_13yql_162";
+const submenuTrigger = "_submenuTrigger_13yql_176";
 const styles = {
   positioner,
   popup,

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

@@ -1,17 +1,17 @@
-const positioner = "_positioner_10vn6_1";
-const popup = "_popup_10vn6_7";
-const viewport = "_viewport_10vn6_49";
-const item = "_item_10vn6_56";
-const itemDanger = "_itemDanger_10vn6_78";
-const itemIcon = "_itemIcon_10vn6_86";
-const checkIndicator = "_checkIndicator_10vn6_87";
-const radioIndicator = "_radioIndicator_10vn6_88";
-const itemLabel = "_itemLabel_10vn6_108";
-const itemShortcut = "_itemShortcut_10vn6_113";
-const radioItem = "_radioItem_10vn6_139";
-const separator = "_separator_10vn6_144";
-const groupLabel = "_groupLabel_10vn6_150";
-const submenuTrigger = "_submenuTrigger_10vn6_164";
+const positioner = "_positioner_13yql_1";
+const popup = "_popup_13yql_9";
+const viewport = "_viewport_13yql_59";
+const item = "_item_13yql_66";
+const itemDanger = "_itemDanger_13yql_90";
+const itemIcon = "_itemIcon_13yql_98";
+const checkIndicator = "_checkIndicator_13yql_99";
+const radioIndicator = "_radioIndicator_13yql_100";
+const itemLabel = "_itemLabel_13yql_120";
+const itemShortcut = "_itemShortcut_13yql_125";
+const radioItem = "_radioItem_13yql_151";
+const separator = "_separator_13yql_156";
+const groupLabel = "_groupLabel_13yql_162";
+const submenuTrigger = "_submenuTrigger_13yql_176";
 const styles = {
   positioner,
   popup,

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

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const message = "_message_1rzq8_2";
-const actions = "_actions_1rzq8_9";
-const withoutAvatar = "_withoutAvatar_1rzq8_13";
-const assistant = "_assistant_1rzq8_13";
-const content = "_content_1rzq8_13";
-const user = "_user_1rzq8_17";
-const body = "_body_1rzq8_21";
-const system = "_system_1rzq8_35";
-const avatar = "_avatar_1rzq8_44";
-const error = "_error_1rzq8_48";
-const sending = "_sending_1rzq8_54";
-const avatarUser = "_avatarUser_1rzq8_62";
-const avatarAssistant = "_avatarAssistant_1rzq8_63";
-const avatarSystem = "_avatarSystem_1rzq8_68";
-const avatarImage = "_avatarImage_1rzq8_73";
-const streaming = "_streaming_1rzq8_231";
-const blink = "_blink_1rzq8_1";
-const timestamp = "_timestamp_1rzq8_257";
+const message = "_message_1iumw_2";
+const actions = "_actions_1iumw_9";
+const withoutAvatar = "_withoutAvatar_1iumw_13";
+const assistant = "_assistant_1iumw_13";
+const content = "_content_1iumw_13";
+const user = "_user_1iumw_17";
+const body = "_body_1iumw_22";
+const system = "_system_1iumw_35";
+const avatar = "_avatar_1iumw_44";
+const error = "_error_1iumw_48";
+const sending = "_sending_1iumw_54";
+const avatarUser = "_avatarUser_1iumw_62";
+const avatarAssistant = "_avatarAssistant_1iumw_63";
+const avatarSystem = "_avatarSystem_1iumw_68";
+const avatarImage = "_avatarImage_1iumw_73";
+const streaming = "_streaming_1iumw_231";
+const blink = "_blink_1iumw_1";
+const timestamp = "_timestamp_1iumw_257";
 const styles = {
   message,
   actions,

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

@@ -1,21 +1,21 @@
-const message = "_message_1rzq8_2";
-const actions = "_actions_1rzq8_9";
-const withoutAvatar = "_withoutAvatar_1rzq8_13";
-const assistant = "_assistant_1rzq8_13";
-const content = "_content_1rzq8_13";
-const user = "_user_1rzq8_17";
-const body = "_body_1rzq8_21";
-const system = "_system_1rzq8_35";
-const avatar = "_avatar_1rzq8_44";
-const error = "_error_1rzq8_48";
-const sending = "_sending_1rzq8_54";
-const avatarUser = "_avatarUser_1rzq8_62";
-const avatarAssistant = "_avatarAssistant_1rzq8_63";
-const avatarSystem = "_avatarSystem_1rzq8_68";
-const avatarImage = "_avatarImage_1rzq8_73";
-const streaming = "_streaming_1rzq8_231";
-const blink = "_blink_1rzq8_1";
-const timestamp = "_timestamp_1rzq8_257";
+const message = "_message_1iumw_2";
+const actions = "_actions_1iumw_9";
+const withoutAvatar = "_withoutAvatar_1iumw_13";
+const assistant = "_assistant_1iumw_13";
+const content = "_content_1iumw_13";
+const user = "_user_1iumw_17";
+const body = "_body_1iumw_22";
+const system = "_system_1iumw_35";
+const avatar = "_avatar_1iumw_44";
+const error = "_error_1iumw_48";
+const sending = "_sending_1iumw_54";
+const avatarUser = "_avatarUser_1iumw_62";
+const avatarAssistant = "_avatarAssistant_1iumw_63";
+const avatarSystem = "_avatarSystem_1iumw_68";
+const avatarImage = "_avatarImage_1iumw_73";
+const streaming = "_streaming_1iumw_231";
+const blink = "_blink_1iumw_1";
+const timestamp = "_timestamp_1iumw_257";
 const styles = {
   message,
   actions,

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

@@ -1,37 +1,40 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1tkec_1";
-const rootVertical = "_rootVertical_1tkec_24";
-const list = "_list_1tkec_29";
-const listVertical = "_listVertical_1tkec_43";
-const trigger = "_trigger_1tkec_48";
-const triggerChevron = "_triggerChevron_1tkec_112";
-const content = "_content_1tkec_120";
-const link = "_link_1tkec_183";
-const linkActive = "_linkActive_1tkec_207";
-const linkStructured = "_linkStructured_1tkec_213";
-const linkIcon = "_linkIcon_1tkec_225";
-const linkBody = "_linkBody_1tkec_236";
-const linkTitle = "_linkTitle_1tkec_243";
-const linkDescription = "_linkDescription_1tkec_252";
-const linkFeatured = "_linkFeatured_1tkec_261";
-const indicator = "_indicator_1tkec_270";
-const viewport = "_viewport_1tkec_280";
-const hamburger = "_hamburger_1tkec_337";
-const drawerBackdrop = "_drawerBackdrop_1tkec_408";
-const drawer = "_drawer_1tkec_408";
-const drawerHeader = "_drawerHeader_1tkec_442";
-const drawerClose = "_drawerClose_1tkec_451";
-const drawerBody = "_drawerBody_1tkec_512";
-const drawerNav = "_drawerNav_1tkec_518";
-const drawerLink = "_drawerLink_1tkec_523";
-const drawerSectionLabel = "_drawerSectionLabel_1tkec_572";
-const drawerCollapsibleTrigger = "_drawerCollapsibleTrigger_1tkec_600";
-const drawerCollapsibleContent = "_drawerCollapsibleContent_1tkec_659";
+const root = "_root_5ym48_1";
+const list = "_list_5ym48_23";
+const viewport = "_viewport_5ym48_24";
+const hamburger = "_hamburger_5ym48_27";
+const rootVertical = "_rootVertical_5ym48_31";
+const listVertical = "_listVertical_5ym48_50";
+const trigger = "_trigger_5ym48_55";
+const triggerChevron = "_triggerChevron_5ym48_121";
+const content = "_content_5ym48_129";
+const link = "_link_5ym48_192";
+const linkActive = "_linkActive_5ym48_218";
+const linkStructured = "_linkStructured_5ym48_224";
+const linkIcon = "_linkIcon_5ym48_236";
+const linkBody = "_linkBody_5ym48_247";
+const linkTitle = "_linkTitle_5ym48_254";
+const linkDescription = "_linkDescription_5ym48_263";
+const linkFeatured = "_linkFeatured_5ym48_272";
+const indicator = "_indicator_5ym48_281";
+const drawerBackdrop = "_drawerBackdrop_5ym48_426";
+const drawer = "_drawer_5ym48_426";
+const drawerHeader = "_drawerHeader_5ym48_460";
+const drawerClose = "_drawerClose_5ym48_469";
+const drawerBody = "_drawerBody_5ym48_534";
+const drawerNav = "_drawerNav_5ym48_555";
+const drawerLink = "_drawerLink_5ym48_560";
+const drawerLinkActive = "_drawerLinkActive_5ym48_612";
+const drawerSectionLabel = "_drawerSectionLabel_5ym48_622";
+const drawerCollapsibleTrigger = "_drawerCollapsibleTrigger_5ym48_652";
+const drawerCollapsibleContent = "_drawerCollapsibleContent_5ym48_714";
 const styles = {
   root,
-  rootVertical,
   list,
+  viewport,
+  hamburger,
+  rootVertical,
   listVertical,
   trigger,
   triggerChevron,
@@ -45,8 +48,6 @@ const styles = {
   linkDescription,
   linkFeatured,
   indicator,
-  viewport,
-  hamburger,
   drawerBackdrop,
   drawer,
   drawerHeader,
@@ -54,6 +55,7 @@ const styles = {
   drawerBody,
   drawerNav,
   drawerLink,
+  drawerLinkActive,
   drawerSectionLabel,
   drawerCollapsibleTrigger,
   drawerCollapsibleContent
@@ -68,6 +70,7 @@ exports.drawerCollapsibleContent = drawerCollapsibleContent;
 exports.drawerCollapsibleTrigger = drawerCollapsibleTrigger;
 exports.drawerHeader = drawerHeader;
 exports.drawerLink = drawerLink;
+exports.drawerLinkActive = drawerLinkActive;
 exports.drawerNav = drawerNav;
 exports.drawerSectionLabel = drawerSectionLabel;
 exports.hamburger = hamburger;

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

@@ -1,35 +1,38 @@
-const root = "_root_1tkec_1";
-const rootVertical = "_rootVertical_1tkec_24";
-const list = "_list_1tkec_29";
-const listVertical = "_listVertical_1tkec_43";
-const trigger = "_trigger_1tkec_48";
-const triggerChevron = "_triggerChevron_1tkec_112";
-const content = "_content_1tkec_120";
-const link = "_link_1tkec_183";
-const linkActive = "_linkActive_1tkec_207";
-const linkStructured = "_linkStructured_1tkec_213";
-const linkIcon = "_linkIcon_1tkec_225";
-const linkBody = "_linkBody_1tkec_236";
-const linkTitle = "_linkTitle_1tkec_243";
-const linkDescription = "_linkDescription_1tkec_252";
-const linkFeatured = "_linkFeatured_1tkec_261";
-const indicator = "_indicator_1tkec_270";
-const viewport = "_viewport_1tkec_280";
-const hamburger = "_hamburger_1tkec_337";
-const drawerBackdrop = "_drawerBackdrop_1tkec_408";
-const drawer = "_drawer_1tkec_408";
-const drawerHeader = "_drawerHeader_1tkec_442";
-const drawerClose = "_drawerClose_1tkec_451";
-const drawerBody = "_drawerBody_1tkec_512";
-const drawerNav = "_drawerNav_1tkec_518";
-const drawerLink = "_drawerLink_1tkec_523";
-const drawerSectionLabel = "_drawerSectionLabel_1tkec_572";
-const drawerCollapsibleTrigger = "_drawerCollapsibleTrigger_1tkec_600";
-const drawerCollapsibleContent = "_drawerCollapsibleContent_1tkec_659";
+const root = "_root_5ym48_1";
+const list = "_list_5ym48_23";
+const viewport = "_viewport_5ym48_24";
+const hamburger = "_hamburger_5ym48_27";
+const rootVertical = "_rootVertical_5ym48_31";
+const listVertical = "_listVertical_5ym48_50";
+const trigger = "_trigger_5ym48_55";
+const triggerChevron = "_triggerChevron_5ym48_121";
+const content = "_content_5ym48_129";
+const link = "_link_5ym48_192";
+const linkActive = "_linkActive_5ym48_218";
+const linkStructured = "_linkStructured_5ym48_224";
+const linkIcon = "_linkIcon_5ym48_236";
+const linkBody = "_linkBody_5ym48_247";
+const linkTitle = "_linkTitle_5ym48_254";
+const linkDescription = "_linkDescription_5ym48_263";
+const linkFeatured = "_linkFeatured_5ym48_272";
+const indicator = "_indicator_5ym48_281";
+const drawerBackdrop = "_drawerBackdrop_5ym48_426";
+const drawer = "_drawer_5ym48_426";
+const drawerHeader = "_drawerHeader_5ym48_460";
+const drawerClose = "_drawerClose_5ym48_469";
+const drawerBody = "_drawerBody_5ym48_534";
+const drawerNav = "_drawerNav_5ym48_555";
+const drawerLink = "_drawerLink_5ym48_560";
+const drawerLinkActive = "_drawerLinkActive_5ym48_612";
+const drawerSectionLabel = "_drawerSectionLabel_5ym48_622";
+const drawerCollapsibleTrigger = "_drawerCollapsibleTrigger_5ym48_652";
+const drawerCollapsibleContent = "_drawerCollapsibleContent_5ym48_714";
 const styles = {
   root,
-  rootVertical,
   list,
+  viewport,
+  hamburger,
+  rootVertical,
   listVertical,
   trigger,
   triggerChevron,
@@ -43,8 +46,6 @@ const styles = {
   linkDescription,
   linkFeatured,
   indicator,
-  viewport,
-  hamburger,
   drawerBackdrop,
   drawer,
   drawerHeader,
@@ -52,6 +53,7 @@ const styles = {
   drawerBody,
   drawerNav,
   drawerLink,
+  drawerLinkActive,
   drawerSectionLabel,
   drawerCollapsibleTrigger,
   drawerCollapsibleContent
@@ -67,6 +69,7 @@ export {
   drawerCollapsibleTrigger,
   drawerHeader,
   drawerLink,
+  drawerLinkActive,
   drawerNav,
   drawerSectionLabel,
   hamburger,

package/dist/components/NavigationMenu/index.cjs

@@ -35,16 +35,17 @@ function composeNavMenuClickHandlers(childHandler, internalHandler) {
     internalHandler(event);
   };
 }
-function useIsMobile() {
+function useIsMobile(breakpoint) {
   const [isMobile, setIsMobile] = React__namespace.useState(false);
   React__namespace.useEffect(() => {
     if (typeof window === "undefined") return;
-    const mq = window.matchMedia("(max-width: 767px)");
+    const maxWidth = breakpoint === "lg" ? 1023 : 767;
+    const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
     setIsMobile(mq.matches);
     const handler = (e) => setIsMobile(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
-  }, []);
+  }, [breakpoint]);
   return isMobile;
 }
 function renderNavigationMenuIcon(slot, state) {
@@ -60,12 +61,13 @@ function NavigationMenuRoot({
   delayDuration = 200,
   skipDelayDuration = 300,
   icons,
+  mobileBreakpoint = "md",
   className,
   "aria-label": ariaLabel = "Main navigation",
   ...htmlProps
 }) {
   const rootId = React__namespace.useId();
-  const isMobile = useIsMobile();
+  const isMobile = useIsMobile(mobileBreakpoint);
   const state = useNavigationMenu.useNavigationMenu({
     value: controlledValue,
     defaultValue,
@@ -84,11 +86,21 @@ function NavigationMenuRoot({
     }),
     [state, orientation, isMobile, rootId, icons]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContext.NavigationMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...htmlProps, className: classes, "aria-label": ariaLabel, "data-orientation": orientation, children: [
-    children,
-    isMobile && /* @__PURE__ */ jsxRuntime.jsx(MobileHamburger, {}),
-    isMobile && state.mobileOpen && /* @__PURE__ */ jsxRuntime.jsx(MobileDrawer, {})
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContext.NavigationMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ...htmlProps,
+      className: classes,
+      "aria-label": ariaLabel,
+      "data-orientation": orientation,
+      "data-mobile": isMobile || void 0,
+      children: [
+        children,
+        isMobile && /* @__PURE__ */ jsxRuntime.jsx(MobileHamburger, {}),
+        isMobile && state.mobileOpen && /* @__PURE__ */ jsxRuntime.jsx(MobileDrawer, {})
+      ]
+    }
+  ) });
 }
 function NavigationMenuList({ children, className }) {
   const { orientation, triggerOrder, triggerRefs, value } = NavigationMenuContext.useNavigationMenuContext();
@@ -375,12 +387,13 @@ function NavigationMenuLink({
       ctx.setValue("");
     }
   };
+  const inMobileDrawer = Boolean((ctx == null ? void 0 : ctx.isMobile) && (ctx == null ? void 0 : ctx.mobileOpen));
   if (isStructured) {
     const classes2 = [
-      NavigationMenu_module.default.link,
-      NavigationMenu_module.default.linkStructured,
-      active && NavigationMenu_module.default.linkActive,
-      featured && NavigationMenu_module.default.linkFeatured,
+      inMobileDrawer ? NavigationMenu_module.default.drawerLink : NavigationMenu_module.default.link,
+      !inMobileDrawer && NavigationMenu_module.default.linkStructured,
+      active && (inMobileDrawer ? NavigationMenu_module.default.drawerLinkActive : NavigationMenu_module.default.linkActive),
+      !inMobileDrawer && featured && NavigationMenu_module.default.linkFeatured,
       className
     ].filter(Boolean).join(" ");
     const linkProps2 = {
@@ -413,7 +426,11 @@ function NavigationMenuLink({
       ] })
     ] });
   }
-  const classes = [NavigationMenu_module.default.link, active && NavigationMenu_module.default.linkActive, className].filter(Boolean).join(" ");
+  const classes = [
+    inMobileDrawer ? NavigationMenu_module.default.drawerLink : NavigationMenu_module.default.link,
+    active && (inMobileDrawer ? NavigationMenu_module.default.drawerLinkActive : NavigationMenu_module.default.linkActive),
+    className
+  ].filter(Boolean).join(" ");
   const linkProps = {
     ...htmlProps,
     className: classes,
@@ -602,7 +619,7 @@ function MobileDrawer() {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(index.ScrollArea, { orientation: "vertical", className: NavigationMenu_module.default.drawerBody, children: ctx.mobileContentChildren ? ctx.mobileContentChildren : /* @__PURE__ */ jsxRuntime.jsx("div", { className: NavigationMenu_module.default.drawerNav, children: autoItems.map(
+          /* @__PURE__ */ jsxRuntime.jsx(index.ScrollArea, { orientation: "vertical", showFades: true, className: NavigationMenu_module.default.drawerBody, children: ctx.mobileContentChildren ? ctx.mobileContentChildren : /* @__PURE__ */ jsxRuntime.jsx("div", { className: NavigationMenu_module.default.drawerNav, children: autoItems.map(
             (item) => item.contentChildren ? /* @__PURE__ */ jsxRuntime.jsx(
               MobileCollapsibleSection,
               {