@cimpress-ui/react 1.27.0 → 1.29.0

package/dist/commonjs/components/app-header/app-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAiED;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAqED;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/app-header/app-header.js

@@ -23,7 +23,7 @@ function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNS
     const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
     const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
     const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
-    return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, "data-react-aria-top-layer": appShellContext?.sideNavIsOpen || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton !== undefined ? navButton : appShellContext ? (0, jsx_runtime_1.jsx)(nav_button_js_1.UNSTABLE_AppHeaderNavButton, {}) : null, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, "data-react-aria-top-layer": appShellContext?.mobileNavIsOpen || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton !== undefined ? (navButton) : appShellContext ? ((0, jsx_runtime_1.jsx)(nav_button_js_1.UNSTABLE_AppHeaderNavButton, { "data-app-shell-controlled": true })) : null, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
 }
 /**
  * Displays a basic application header.

package/dist/commonjs/components/app-header/app-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAsE;AACtE,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAClD,mDAAoF;AAgBpF,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,+BACQ,eAAe,EAAE,aAAa,IAAI,SAAS,aAEtE,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,uBAAC,2CAAkB,KAAG,CAAC,CAAC,CAAC,IAAI,EACtF,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\nimport { UNSTABLE_AppHeaderNavButton as AppHeaderNavButton } from './nav-button.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n  /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n  title: string;\n  /** The props of the link that is rendered around the header title. */\n  titleLink: Href | AppHeaderTitleLinkProps;\n  /** The tools to render at the end of the header. */\n  tools?: ReactNode;\n  UNSTABLE_navButton?: ReactNode;\n  UNSTABLE_postTitle?: ReactNode;\n  UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n  {\n    title,\n    titleLink,\n    tools,\n    UNSTABLE_navButton: navButton,\n    UNSTABLE_postTitle: postTitle,\n    UNSTABLE_search: search,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const isMobile = useIsMobile();\n  const appShellContext = useContext(AppShellContext);\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={clsx('cim-app-header', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-react-aria-top-layer={appShellContext?.sideNavIsOpen || undefined}\n    >\n      <div className=\"cim-app-header-title\">\n        {navButton !== undefined ? navButton : appShellContext ? <AppHeaderNavButton /> : null}\n        <CimpressLogo height={24} />\n        <Divider orientation=\"vertical\" />\n        <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n          <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n            {title}\n          </Link>\n        </Text>\n\n        {postTitle}\n      </div>\n\n      {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n      <div className=\"cim-app-header-tools\">\n        {isMobile && tools ? (\n          <PopoverRoot>\n            <IconButton\n              icon={<IconMenuMoreVertical />}\n              // TODO: i18n\n              aria-label=\"Expand/collapse header\"\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n            <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n              <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n            </Popover>\n          </PopoverRoot>\n        ) : (\n          tools\n        )}\n      </div>\n    </header>\n  );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}
+{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAsE;AACtE,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAClD,mDAAoF;AAgBpF,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,+BACQ,eAAe,EAAE,eAAe,IAAI,SAAS,aAExE,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACzB,SAAS,CACV,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CACpB,uBAAC,2CAAkB,wCAA6B,CACjD,CAAC,CAAC,CAAC,IAAI,EACR,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\nimport { UNSTABLE_AppHeaderNavButton as AppHeaderNavButton } from './nav-button.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n  /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n  title: string;\n  /** The props of the link that is rendered around the header title. */\n  titleLink: Href | AppHeaderTitleLinkProps;\n  /** The tools to render at the end of the header. */\n  tools?: ReactNode;\n  UNSTABLE_navButton?: ReactNode;\n  UNSTABLE_postTitle?: ReactNode;\n  UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n  {\n    title,\n    titleLink,\n    tools,\n    UNSTABLE_navButton: navButton,\n    UNSTABLE_postTitle: postTitle,\n    UNSTABLE_search: search,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const isMobile = useIsMobile();\n  const appShellContext = useContext(AppShellContext);\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={clsx('cim-app-header', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-react-aria-top-layer={appShellContext?.mobileNavIsOpen || undefined}\n    >\n      <div className=\"cim-app-header-title\">\n        {navButton !== undefined ? (\n          navButton\n        ) : appShellContext ? (\n          <AppHeaderNavButton data-app-shell-controlled />\n        ) : null}\n        <CimpressLogo height={24} />\n        <Divider orientation=\"vertical\" />\n        <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n          <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n            {title}\n          </Link>\n        </Text>\n\n        {postTitle}\n      </div>\n\n      {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n      <div className=\"cim-app-header-tools\">\n        {isMobile && tools ? (\n          <PopoverRoot>\n            <IconButton\n              icon={<IconMenuMoreVertical />}\n              // TODO: i18n\n              aria-label=\"Expand/collapse header\"\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n            <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n              <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n            </Popover>\n          </PopoverRoot>\n        ) : (\n          tools\n        )}\n      </div>\n    </header>\n  );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}

package/dist/commonjs/components/app-header/nav-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gCAAiC,SAAQ,WAAW;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA4BD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}
+{"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gCAAiC,SAAQ,WAAW;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA6BD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}

package/dist/commonjs/components/app-header/nav-button.js

@@ -12,13 +12,13 @@ const index_js_1 = require("../../icons/index.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const app_shell_context_js_1 = require("../app-shell/app-shell-context.js");
 const icon_button_js_1 = require("../button/icon-button.js");
-function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE_style }, ref) {
+function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
     const handlePress = () => {
         onPress?.();
         appShellContext?.toggleSideNav();
     };
-    return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { "aria-expanded": isOpen ?? appShellContext?.sideNavIsOpen, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenu, {}), "aria-label": "Open menu", variant: "tertiary", onPress: handlePress, ref: ref, UNSAFE_className: (0, clsx_1.default)('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
+    return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...props, "aria-expanded": isOpen ?? appShellContext?.mobileNavIsOpen, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenu, {}), "aria-label": "Open menu", variant: "tertiary", onPress: handlePress, ref: ref, UNSAFE_className: (0, clsx_1.default)('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
 }
 const _UNSTABLE_AppHeaderNavButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));
 exports.UNSTABLE_AppHeaderNavButton = _UNSTABLE_AppHeaderNavButton;

package/dist/commonjs/components/app-header/nav-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AACxB,iCAAsD;AACtD,yDAAkD;AAClD,mDAAgD;AAChD,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAoC,EACrF,GAAoC;IAEpC,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,CAAC;QACZ,eAAe,EAAE,aAAa,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,2BAAU,qBACM,MAAM,IAAI,eAAe,EAAE,aAAa,EACvD,IAAI,EAAE,uBAAC,mBAAQ,KAAG,gBAEP,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAE1E,mEAA2B","sourcesContent":["import clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n  isOpen?: boolean;\n  onPress?: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n  { isOpen, onPress, UNSAFE_className, UNSAFE_style }: UNSTABLE_AppHeaderNavButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const appShellContext = useContext(AppShellContext);\n\n  const handlePress = () => {\n    onPress?.();\n    appShellContext?.toggleSideNav();\n  };\n\n  return (\n    <IconButton\n      aria-expanded={isOpen ?? appShellContext?.sideNavIsOpen}\n      icon={<IconMenu />}\n      // TODO\n      aria-label=\"Open menu\"\n      variant=\"tertiary\"\n      onPress={handlePress}\n      ref={ref}\n      UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n      UNSAFE_style={UNSAFE_style}\n    />\n  );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}
+{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AACxB,iCAAsD;AACtD,yDAAkD;AAClD,mDAAgD;AAChD,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoC,EAC/F,GAAoC;IAEpC,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,CAAC;QACZ,eAAe,EAAE,aAAa,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,2BAAU,OACL,KAAK,mBACM,MAAM,IAAI,eAAe,EAAE,eAAe,EACzD,IAAI,EAAE,uBAAC,mBAAQ,KAAG,gBAEP,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAE1E,mEAA2B","sourcesContent":["import clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n  isOpen?: boolean;\n  onPress?: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n  { isOpen, onPress, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppHeaderNavButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const appShellContext = useContext(AppShellContext);\n\n  const handlePress = () => {\n    onPress?.();\n    appShellContext?.toggleSideNav();\n  };\n\n  return (\n    <IconButton\n      {...props}\n      aria-expanded={isOpen ?? appShellContext?.mobileNavIsOpen}\n      icon={<IconMenu />}\n      // TODO\n      aria-label=\"Open menu\"\n      variant=\"tertiary\"\n      onPress={handlePress}\n      ref={ref}\n      UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n      UNSAFE_style={UNSAFE_style}\n    />\n  );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}

package/dist/commonjs/components/app-shell/app-shell-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell-context.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell-context.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AAEtC,gBAAgB;AACH,QAAA,eAAe,GAAG,IAAA,qBAAa,EAGlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  sideNavIsOpen: boolean;\n  toggleSideNav: (isOpen?: boolean) => void;\n} | null>(null);\n"]}
+{"version":3,"file":"app-shell-context.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell-context.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AAEtC,gBAAgB;AACH,QAAA,eAAe,GAAG,IAAA,qBAAa,EAQlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  mobileNavIsOpen: boolean;\n  toggleMobileNav: (isOpen?: boolean) => void;\n  sideNavIsCollapsed: boolean | undefined;\n  toggleSideNavCollapse: (isCollapsed?: boolean) => void;\n  sideNavIsCollapsible: boolean;\n  setSideNavIsCollapsible: (isCollapsible: boolean) => void;\n  toggleSideNav: () => void;\n} | null>(null);\n"]}

package/dist/commonjs/components/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAa/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAkB5B"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAmC/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAM5B"}

package/dist/commonjs/components/app-shell/app-shell.js

@@ -8,19 +8,37 @@ exports.UNSTABLE_AppShellBody = UNSTABLE_AppShellBody;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
-const use_is_mobile_js_1 = require("../../utils/use-is-mobile.js");
+const breakpoints_js_1 = require("../../utils/breakpoints.js");
 const app_shell_context_js_1 = require("./app-shell-context.js");
 function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
-    const [sideNavIsOpen, setSideNavIsOpen] = (0, react_1.useState)(true);
-    const toggleSideNav = (0, react_1.useCallback)((isOpen) => {
-        setSideNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);
+    const [sideNavIsCollapsible, setSideNavIsCollapsible] = (0, react_1.useState)(false);
+    const [mobileNavIsOpen, setMobileNavIsOpen] = (0, react_1.useState)(false);
+    const toggleMobileNav = (0, react_1.useCallback)((isOpen) => {
+        setMobileNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(app_shell_context_js_1.AppShellContext.Provider, { value: { sideNavIsOpen, toggleSideNav }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }) }));
+    const [sideNavIsCollapsed, setSideNavIsCollapsed] = (0, react_1.useState)(undefined);
+    const toggleSideNavCollapse = (0, react_1.useCallback)((isCollapsed) => {
+        setSideNavIsCollapsed((prevIsCollapsed) => isCollapsed ?? !prevIsCollapsed);
+    }, []);
+    const toggleSideNav = (0, react_1.useCallback)(() => {
+        if (sideNavIsCollapsible && (0, breakpoints_js_1.matchesBreakpoint)({ min: 'md' })) {
+            toggleSideNavCollapse();
+        }
+        else {
+            toggleMobileNav();
+        }
+    }, [sideNavIsCollapsible, toggleMobileNav, toggleSideNavCollapse]);
+    return ((0, jsx_runtime_1.jsx)(app_shell_context_js_1.AppShellContext.Provider, { value: {
+            sideNavIsCollapsible,
+            setSideNavIsCollapsible,
+            mobileNavIsOpen,
+            toggleMobileNav,
+            sideNavIsCollapsed,
+            toggleSideNavCollapse,
+            toggleSideNav,
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }) }));
 }
 function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
-    const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
-    const sideNavIsOpen = appShellContext?.sideNavIsOpen ?? false;
-    const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, inert: isMobile && sideNavIsOpen ? '' : undefined, ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
 }
 //# sourceMappingURL=app-shell.js.map

package/dist/commonjs/components/app-shell/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;AAUA,8CAaC;AAMD,sDAuBC;;AApDD,gDAAwB;AACxB,iCAA0E;AAC1E,mEAA2D;AAE3D,iEAAyD;AAMzD,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,CAAC,MAAgB,EAAE,EAAE;QACrD,gBAAgB,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uBAAC,sCAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,YAC/D,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC;AAMD,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,eAAe,EAAE,aAAa,IAAI,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,OAAO,CACL,gCACE,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAE,YAAY,EAIb,KAAK,EAAE,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KACnD,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useCallback, useContext, useState, type ReactNode } from 'react';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport type { CommonProps } from '../types.js';\nimport { AppShellContext } from './app-shell-context.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n  const [sideNavIsOpen, setSideNavIsOpen] = useState(true);\n  const toggleSideNav = useCallback((isOpen?: boolean) => {\n    setSideNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n\n  return (\n    <AppShellContext.Provider value={{ sideNavIsOpen, toggleSideNav }}>\n      <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_AppShellBodyProps) {\n  const appShellContext = useContext(AppShellContext);\n  const sideNavIsOpen = appShellContext?.sideNavIsOpen ?? false;\n  const isMobile = useIsMobile();\n\n  return (\n    <div\n      className={clsx('cim-app-shell-body', UNSAFE_className)}\n      style={UNSAFE_style}\n      // Make the body inert when the side nav is open on mobile so that tabbing is contained to app header and side nav\n      // Workaround for React not having type definitions for the `inert` attribute\n      // eslint-disable-next-line internal/no-extra-props-in-spread\n      {...{ inert: isMobile && sideNavIsOpen ? '' : undefined }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;AAUA,8CAmCC;AAMD,sDAWC;;AA9DD,gDAAwB;AACxB,iCAA8D;AAC9D,+DAA+D;AAE/D,iEAAyD;AAMzD,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,CAAC,MAAgB,EAAE,EAAE;QACvD,kBAAkB,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAsB,SAAS,CAAC,CAAC;IAC7F,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,CAAC,WAAqB,EAAE,EAAE;QAClE,qBAAqB,CAAC,CAAC,eAAe,EAAE,EAAE,CAAC,WAAW,IAAI,CAAC,eAAe,CAAC,CAAC;IAC9E,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACrC,IAAI,oBAAoB,IAAI,IAAA,kCAAiB,EAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;YAC7D,qBAAqB,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,eAAe,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEnE,OAAO,CACL,uBAAC,sCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,oBAAoB;YACpB,uBAAuB;YACvB,eAAe;YACf,eAAe;YACf,kBAAkB;YAClB,qBAAqB;YACrB,aAAa;SACd,YAED,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC;AAMD,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACzF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useCallback, useState, type ReactNode } from 'react';\nimport { matchesBreakpoint } from '../../utils/breakpoints.js';\nimport type { CommonProps } from '../types.js';\nimport { AppShellContext } from './app-shell-context.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n  const [sideNavIsCollapsible, setSideNavIsCollapsible] = useState(false);\n  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);\n  const toggleMobileNav = useCallback((isOpen?: boolean) => {\n    setMobileNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n  const [sideNavIsCollapsed, setSideNavIsCollapsed] = useState<boolean | undefined>(undefined);\n  const toggleSideNavCollapse = useCallback((isCollapsed?: boolean) => {\n    setSideNavIsCollapsed((prevIsCollapsed) => isCollapsed ?? !prevIsCollapsed);\n  }, []);\n  const toggleSideNav = useCallback(() => {\n    if (sideNavIsCollapsible && matchesBreakpoint({ min: 'md' })) {\n      toggleSideNavCollapse();\n    } else {\n      toggleMobileNav();\n    }\n  }, [sideNavIsCollapsible, toggleMobileNav, toggleSideNavCollapse]);\n\n  return (\n    <AppShellContext.Provider\n      value={{\n        sideNavIsCollapsible,\n        setSideNavIsCollapsible,\n        mobileNavIsOpen,\n        toggleMobileNav,\n        sideNavIsCollapsed,\n        toggleSideNavCollapse,\n        toggleSideNav,\n      }}\n    >\n      <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_AppShellBodyProps) {\n  return (\n    <div className={clsx('cim-app-shell-body', UNSAFE_className)} style={UNSAFE_style} {...props}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/commonjs/components/mobile-nav/mobile-nav.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface UNSTABLE_MobileNavProps {
+    children: ReactNode;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export declare function UNSTABLE_MobileNav({ children, isOpen, onOpenChange }: UNSTABLE_MobileNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_MobileNav {
+    var displayName: string;
+}
+//# sourceMappingURL=mobile-nav.d.ts.map

package/dist/commonjs/components/mobile-nav/mobile-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/mobile-nav/mobile-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAoB7F;yBApBe,kBAAkB"}

package/dist/commonjs/components/mobile-nav/mobile-nav.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_MobileNav = UNSTABLE_MobileNav;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_aria_components_1 = require("react-aria-components");
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+function UNSTABLE_MobileNav({ children, isOpen, onOpenChange }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "cim-mobile-nav", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: true, className: "cim-mobile-nav-drawer-overlay", "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: "cim-mobile-nav-drawer", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { className: "cim-mobile-nav-drawer-dialog", "aria-label": "Navigation", children: (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { scrollDirection: "vertical", className: "cim-mobile-nav-drawer-body", children: children }) }) }) }) }));
+}
+UNSTABLE_MobileNav.displayName = 'UNSTABLE_MobileNav';
+//# sourceMappingURL=mobile-nav.js.map

package/dist/commonjs/components/mobile-nav/mobile-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-nav.js","sourceRoot":"","sources":["../../../../src/components/mobile-nav/mobile-nav.tsx"],"names":[],"mappings":";;AAUA,gDAoBC;;AA7BD,iEAAgH;AAChH,mGAA4F;AAQ5F,SAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAA2B;IAC5F,OAAO,CACL,gCAAK,SAAS,EAAC,gBAAgB,YAC7B,uBAAC,oCAAe,IACd,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,QACb,SAAS,EAAC,+BAA+B,yCAGzC,uBAAC,6BAAQ,IAAC,SAAS,EAAC,uBAAuB,YACzC,uBAAC,8BAAS,IAAC,SAAS,EAAC,8BAA8B,gBAAY,YAAY,YACzE,uBAAC,2CAAkB,IAAC,eAAe,EAAC,UAAU,EAAC,SAAS,EAAC,4BAA4B,YAClF,QAAQ,GACU,GACX,GACH,GACK,GACd,CACP,CAAC;AACJ,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["import type { ReactNode } from 'react';\nimport { Dialog as RACDialog, Modal as RACModal, ModalOverlay as RACModalOverlay } from 'react-aria-components';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\n\nexport interface UNSTABLE_MobileNavProps {\n  children: ReactNode;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport function UNSTABLE_MobileNav({ children, isOpen, onOpenChange }: UNSTABLE_MobileNavProps) {\n  return (\n    <div className=\"cim-mobile-nav\">\n      <RACModalOverlay\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        isDismissable\n        className=\"cim-mobile-nav-drawer-overlay\"\n        data-cim-style-root\n      >\n        <RACModal className=\"cim-mobile-nav-drawer\">\n          <RACDialog className=\"cim-mobile-nav-drawer-dialog\" aria-label=\"Navigation\">\n            <FocusableContainer scrollDirection=\"vertical\" className=\"cim-mobile-nav-drawer-body\">\n              {children}\n            </FocusableContainer>\n          </RACDialog>\n        </RACModal>\n      </RACModalOverlay>\n    </div>\n  );\n}\n\nUNSTABLE_MobileNav.displayName = 'UNSTABLE_MobileNav';\n"]}

package/dist/commonjs/components/side-nav/side-nav.d.ts

@@ -3,20 +3,20 @@ import type { Href, StringLikeChildren } from '../types.js';
 export interface UNSTABLE_SideNavProps {
     children: ReactNode;
     /**
-     * Whether the side nav is open. Only needed when the side nav is not controlled by the app shell.
+     * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.
+     *
+     * Setting to `true` will enable collapsibility. Passing an object allows for more advanced configuration, including fully controlled usage outside app shell context.
      */
-    isOpen?: boolean;
-    /**
-     * Callback function that is called when the side nav is opened or closed.
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-    /**
-     * Whether the side nav should be expanded by default. Only affects large viewports.
-     * @default true
-     */
-    defaultIsOpen?: boolean;
+    UNSTABLE_isCollapsible?: boolean | {
+        /** Whether the side nav should be collapsed by default. Only affects large viewports. */
+        defaultCollapsed?: true;
+        /** Whether the side nav is currently collapsed. Only needed when the side nav is not controlled by the app shell. */
+        isCollapsed?: boolean;
+        /** Callback function that is called when the side nav is collapsed or expanded. */
+        onCollapseChange?: (isCollapsed: boolean) => void;
+    };
 }
-export declare function UNSTABLE_SideNav({ children, isOpen, defaultIsOpen, onOpenChange }: UNSTABLE_SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps): import("react/jsx-runtime").JSX.Element;
 export interface UNSTABLE_SideNavListProps {
     children: ReactNode;
 }

package/dist/commonjs/components/side-nav/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpF,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAoB,EAAE,YAAY,EAAE,EAAE,qBAAqB,2CA6D/G;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAE3E;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,6BAA6B,2CAazG;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,gCAAgC,2CAahG"}
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,sBAAsB,CAAC,EACnB,OAAO,GACP;QACE,yFAAyF;QACzF,gBAAgB,CAAC,EAAE,IAAI,CAAC;QACxB,qHAAqH;QACrH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,mFAAmF;QACnF,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACnD,CAAC;CACP;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CAiB1G;AA6DD,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAE3E;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,6BAA6B,2CAazG;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,gCAAgC,2CAahG"}

package/dist/commonjs/components/side-nav/side-nav.js

@@ -12,43 +12,59 @@ const react_aria_1 = require("react-aria");
 const react_aria_components_1 = require("react-aria-components");
 const breakpoints_js_1 = require("../../utils/breakpoints.js");
 const string_like_children_to_string_js_1 = require("../../utils/string-like-children-to-string.js");
-const use_is_mobile_js_1 = require("../../utils/use-is-mobile.js");
 const app_shell_context_js_1 = require("../app-shell/app-shell-context.js");
+const mobile_nav_js_1 = require("../mobile-nav/mobile-nav.js");
 const tooltip_js_1 = require("../tooltip/tooltip.js");
 const text_js_1 = require("../typography/text.js");
-const SideNavContext = (0, react_1.createContext)({ isOpen: false });
-function UNSTABLE_SideNav({ children, isOpen, defaultIsOpen = true, onOpenChange }) {
+const SideNavContext = (0, react_1.createContext)({ isCollapsed: false });
+function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
+    const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
+    (0, utils_1.useLayoutEffect)(() => {
+        appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);
+    }, [isCollapsible, appShellContext]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SideNavInner, { UNSTABLE_isCollapsible: isCollapsible, children: children }), appShellContext && ((0, jsx_runtime_1.jsx)(mobile_nav_js_1.UNSTABLE_MobileNav, { isOpen: appShellContext.mobileNavIsOpen, onOpenChange: () => appShellContext.toggleMobileNav(false), children: children }))] }));
+}
+function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
     const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
-    const [isHydrated, setIsHydrated] = (0, react_1.useState)(false);
-    const resolvedIsOpen = isOpen ?? (isHydrated ? appShellContext?.sideNavIsOpen : defaultIsOpen);
     const sideNavRef = (0, react_1.useRef)(null);
-    const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
-    const isOverlaySideNav = (0, breakpoints_js_1.useBreakpoint)({ max: 'md' });
+    const isOverlaySideNav = (0, breakpoints_js_1.useBreakpoint)({ max: 'md' }) && isCollapsible !== false;
+    const isCollapsed = typeof isCollapsible === 'object'
+        ? (isCollapsible.isCollapsed ?? appShellContext?.sideNavIsCollapsed ?? isCollapsible.defaultCollapsed)
+        : isCollapsible
+            ? appShellContext?.sideNavIsCollapsed
+            : undefined;
     function handleClose() {
-        appShellContext?.toggleSideNav(false);
-        onOpenChange?.(false);
+        appShellContext?.toggleSideNavCollapse(true);
+        if (typeof isCollapsible === 'object') {
+            isCollapsible.onCollapseChange?.(true);
+        }
     }
-    const { overlayProps, underlayProps } = (0, react_aria_1.useOverlay)({
+    const { overlayProps } = (0, react_aria_1.useOverlay)({
         isDismissable: isOverlaySideNav,
-        isOpen: resolvedIsOpen,
+        isOpen: isOverlaySideNav && isCollapsed !== undefined ? !isCollapsed : undefined,
         onClose: () => handleClose(),
     }, sideNavRef);
     const resetState = (0, utils_1.useEffectEvent)(() => {
-        setIsHydrated(true);
-        appShellContext?.toggleSideNav(defaultIsOpen && (0, breakpoints_js_1.matchesBreakpoint)({ min: 'lg' }));
+        if (typeof isCollapsible === 'object' || isCollapsible) {
+            const defaultIsCollapsed = typeof isCollapsible === 'object' ? isCollapsible.defaultCollapsed : false;
+            appShellContext?.toggleSideNavCollapse(defaultIsCollapsed || (0, breakpoints_js_1.matchesBreakpoint)({ max: 'md' }));
+            if (typeof isCollapsible === 'object') {
+                isCollapsible.onCollapseChange?.(defaultIsCollapsed || (0, breakpoints_js_1.matchesBreakpoint)({ max: 'md' }));
+            }
+        }
     });
     // Hydrate state and reset when screen size changes to or from overlay mode
     (0, utils_1.useLayoutEffect)(() => {
         resetState();
     }, [isOverlaySideNav]);
-    return ((0, jsx_runtime_1.jsxs)(SideNavContext.Provider, { value: { isOpen: resolvedIsOpen ?? false }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { ...underlayProps, className: "cim-side-nav-backdrop", "aria-hidden": !resolvedIsOpen, "data-expanded": resolvedIsOpen, "data-hydrated": isHydrated || undefined })), isMobile && resolvedIsOpen && (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: () => handleClose() }), (0, jsx_runtime_1.jsx)("div", { ...(isOverlaySideNav ? overlayProps : {}), className: "cim-side-nav", "data-expanded": resolvedIsOpen, "data-hydrated": isHydrated || undefined, "aria-label": "Side navigation", ref: sideNavRef, inert: isMobile && !resolvedIsOpen ? '' : undefined, children: children })] }));
+    return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: { isCollapsed: isCollapsed ?? false }, children: (0, jsx_runtime_1.jsx)("div", { ...(isOverlaySideNav ? overlayProps : {}), className: "cim-side-nav", "data-collapsible": typeof isCollapsible === 'object' ? true : isCollapsible || false, "data-collapsed": isCollapsed, "aria-label": "Side navigation", ref: sideNavRef, children: children }) }));
 }
 function UNSTABLE_SideNavList({ children }) {
     return (0, jsx_runtime_1.jsx)("nav", { className: "cim-side-nav-list", children: children });
 }
 function UNSTABLE_SideNavListItem({ children, href, isActive, icon }) {
-    const { isOpen } = (0, react_1.useContext)(SideNavContext);
-    return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { label: (0, string_like_children_to_string_js_1.stringLikeChildrenToString)(children), placement: "right", isDisabled: isOpen, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, children: [icon, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
+    const { isCollapsed } = (0, react_1.useContext)(SideNavContext);
+    return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { label: (0, string_like_children_to_string_js_1.stringLikeChildrenToString)(children), placement: "right", isDisabled: !isCollapsed, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, children: [icon, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
 }
 function UNSTABLE_SideNavListSection({ children, label }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-side-nav-list-section", children: [label && ((0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-list-section-header", children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "small-semibold", tone: "subtle", UNSAFE_className: "cim-side-nav-list-section-header-label", children: label }) })), children] }));

package/dist/commonjs/components/side-nav/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { createContext, useContext, useRef, useState, type ReactNode } from 'react';\nimport { DismissButton, useOverlay } from 'react-aria';\nimport { Link as RACLink } from 'react-aria-components';\nimport { matchesBreakpoint, useBreakpoint } from '../../utils/breakpoints.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{ isOpen: boolean }>({ isOpen: false });\n\nexport interface UNSTABLE_SideNavProps {\n  children: ReactNode;\n  /**\n   * Whether the side nav is open. Only needed when the side nav is not controlled by the app shell.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback function that is called when the side nav is opened or closed.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Whether the side nav should be expanded by default. Only affects large viewports.\n   * @default true\n   */\n  defaultIsOpen?: boolean;\n}\n\nexport function UNSTABLE_SideNav({ children, isOpen, defaultIsOpen = true, onOpenChange }: UNSTABLE_SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n  const [isHydrated, setIsHydrated] = useState(false);\n  const resolvedIsOpen = isOpen ?? (isHydrated ? appShellContext?.sideNavIsOpen : defaultIsOpen);\n  const sideNavRef = useRef<HTMLDivElement>(null);\n  const isMobile = useIsMobile();\n  const isOverlaySideNav = useBreakpoint({ max: 'md' });\n\n  function handleClose() {\n    appShellContext?.toggleSideNav(false);\n    onOpenChange?.(false);\n  }\n\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      isDismissable: isOverlaySideNav,\n      isOpen: resolvedIsOpen,\n      onClose: () => handleClose(),\n    },\n    sideNavRef,\n  );\n\n  const resetState = useEffectEvent(() => {\n    setIsHydrated(true);\n\n    appShellContext?.toggleSideNav(defaultIsOpen && matchesBreakpoint({ min: 'lg' }));\n  });\n\n  // Hydrate state and reset when screen size changes to or from overlay mode\n  useLayoutEffect(() => {\n    resetState();\n  }, [isOverlaySideNav]);\n\n  return (\n    <SideNavContext.Provider value={{ isOpen: resolvedIsOpen ?? false }}>\n      {isMobile && (\n        <div\n          {...underlayProps}\n          className=\"cim-side-nav-backdrop\"\n          aria-hidden={!resolvedIsOpen}\n          data-expanded={resolvedIsOpen}\n          data-hydrated={isHydrated || undefined}\n        />\n      )}\n      {isMobile && resolvedIsOpen && <DismissButton onDismiss={() => handleClose()} />}\n      <div\n        {...(isOverlaySideNav ? overlayProps : {})}\n        className=\"cim-side-nav\"\n        data-expanded={resolvedIsOpen}\n        data-hydrated={isHydrated || undefined}\n        aria-label=\"Side navigation\"\n        ref={sideNavRef}\n        // Make the side nav rail inert when hidden on mobile devices to prevent user interaction and assistive technology focus\n        // Workaround for React not having type definitions for the `inert` attribute\n        // eslint-disable-next-line internal/no-extra-props-in-spread\n        {...{ inert: isMobile && !resolvedIsOpen ? '' : undefined }}\n      >\n        {children}\n      </div>\n    </SideNavContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_SideNavListProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps) {\n  return <nav className=\"cim-side-nav-list\">{children}</nav>;\n}\n\nexport interface UNSTABLE_SideNavListItemProps {\n  children: StringLikeChildren;\n  href: Href;\n  isActive?: boolean;\n  icon?: ReactNode;\n}\n\nexport function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps) {\n  const { isOpen } = useContext(SideNavContext);\n\n  return (\n    <Tooltip label={stringLikeChildrenToString(children)} placement=\"right\" isDisabled={isOpen}>\n      <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive}>\n        {icon}\n        <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n          {children}\n        </Text>\n      </RACLink>\n    </Tooltip>\n  );\n}\n\nexport interface UNSTABLE_SideNavListSectionProps {\n  children: ReactNode;\n  label?: string;\n}\n\nexport function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps) {\n  return (\n    <div className=\"cim-side-nav-list-section\">\n      {label && (\n        <div className=\"cim-side-nav-list-section-header\">\n          <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n            {label}\n          </Text>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { createContext, useContext, useRef, type ReactNode } from 'react';\nimport { useOverlay } from 'react-aria';\nimport { Link as RACLink } from 'react-aria-components';\nimport { matchesBreakpoint, useBreakpoint } from '../../utils/breakpoints.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { UNSTABLE_MobileNav as MobileNav } from '../mobile-nav/mobile-nav.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{ isCollapsed: boolean }>({ isCollapsed: false });\n\nexport interface UNSTABLE_SideNavProps {\n  children: ReactNode;\n  /**\n   * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.\n   *\n   * Setting to `true` will enable collapsibility. Passing an object allows for more advanced configuration, including fully controlled usage outside app shell context.\n   */\n  UNSTABLE_isCollapsible?:\n    | boolean\n    | {\n        /** Whether the side nav should be collapsed by default. Only affects large viewports. */\n        defaultCollapsed?: true;\n        /** Whether the side nav is currently collapsed. Only needed when the side nav is not controlled by the app shell. */\n        isCollapsed?: boolean;\n        /** Callback function that is called when the side nav is collapsed or expanded. */\n        onCollapseChange?: (isCollapsed: boolean) => void;\n      };\n}\n\nexport function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n\n  useLayoutEffect(() => {\n    appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);\n  }, [isCollapsible, appShellContext]);\n\n  return (\n    <>\n      <SideNavInner UNSTABLE_isCollapsible={isCollapsible}>{children}</SideNavInner>\n      {appShellContext && (\n        <MobileNav isOpen={appShellContext.mobileNavIsOpen} onOpenChange={() => appShellContext.toggleMobileNav(false)}>\n          {children}\n        </MobileNav>\n      )}\n    </>\n  );\n}\n\nfunction SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n  const sideNavRef = useRef<HTMLDivElement>(null);\n  const isOverlaySideNav = useBreakpoint({ max: 'md' }) && isCollapsible !== false;\n  const isCollapsed =\n    typeof isCollapsible === 'object'\n      ? (isCollapsible.isCollapsed ?? appShellContext?.sideNavIsCollapsed ?? isCollapsible.defaultCollapsed)\n      : isCollapsible\n        ? appShellContext?.sideNavIsCollapsed\n        : undefined;\n\n  function handleClose() {\n    appShellContext?.toggleSideNavCollapse(true);\n\n    if (typeof isCollapsible === 'object') {\n      isCollapsible.onCollapseChange?.(true);\n    }\n  }\n\n  const { overlayProps } = useOverlay(\n    {\n      isDismissable: isOverlaySideNav,\n      isOpen: isOverlaySideNav && isCollapsed !== undefined ? !isCollapsed : undefined,\n      onClose: () => handleClose(),\n    },\n    sideNavRef,\n  );\n\n  const resetState = useEffectEvent(() => {\n    if (typeof isCollapsible === 'object' || isCollapsible) {\n      const defaultIsCollapsed = typeof isCollapsible === 'object' ? isCollapsible.defaultCollapsed : false;\n      appShellContext?.toggleSideNavCollapse(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      if (typeof isCollapsible === 'object') {\n        isCollapsible.onCollapseChange?.(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      }\n    }\n  });\n\n  // Hydrate state and reset when screen size changes to or from overlay mode\n  useLayoutEffect(() => {\n    resetState();\n  }, [isOverlaySideNav]);\n\n  return (\n    <SideNavContext.Provider value={{ isCollapsed: isCollapsed ?? false }}>\n      <div\n        {...(isOverlaySideNav ? overlayProps : {})}\n        className=\"cim-side-nav\"\n        data-collapsible={typeof isCollapsible === 'object' ? true : isCollapsible || false}\n        data-collapsed={isCollapsed}\n        aria-label=\"Side navigation\"\n        ref={sideNavRef}\n      >\n        {children}\n      </div>\n    </SideNavContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_SideNavListProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps) {\n  return <nav className=\"cim-side-nav-list\">{children}</nav>;\n}\n\nexport interface UNSTABLE_SideNavListItemProps {\n  children: StringLikeChildren;\n  href: Href;\n  isActive?: boolean;\n  icon?: ReactNode;\n}\n\nexport function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps) {\n  const { isCollapsed } = useContext(SideNavContext);\n\n  return (\n    <Tooltip label={stringLikeChildrenToString(children)} placement=\"right\" isDisabled={!isCollapsed}>\n      <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive}>\n        {icon}\n        <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n          {children}\n        </Text>\n      </RACLink>\n    </Tooltip>\n  );\n}\n\nexport interface UNSTABLE_SideNavListSectionProps {\n  children: ReactNode;\n  label?: string;\n}\n\nexport function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps) {\n  return (\n    <div className=\"cim-side-nav-list-section\">\n      {label && (\n        <div className=\"cim-side-nav-list-section-header\">\n          <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n            {label}\n          </Text>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/commonjs/icons/ai-expand.d.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from '../components/types.js';
+/** Renders an SVG icon. */
+declare const SvgAiExpand: {
+    ({ size, "aria-hidden": ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SvgAiExpand;
+//# sourceMappingURL=ai-expand.d.ts.map

package/dist/commonjs/icons/ai-expand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-expand.d.ts","sourceRoot":"","sources":["../../../src/icons/ai-expand.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGxD,2BAA2B;AAC3B,QAAA,MAAM,WAAW;yFAAwF,SAAS;;CAqBjH,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/commonjs/icons/ai-expand.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const tone_js_1 = require("../utils/style/tone.js");
+const displayName = 'IconAiExpand';
+/** Renders an SVG icon. */
+const SvgAiExpand = ({ size, 'aria-hidden': ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }) => {
+    const props = {
+        ...rest,
+        'aria-hidden': ariaHidden ?? (rest['aria-label'] == null && rest['aria-labelledby'] == null),
+        className: (0, clsx_1.default)('cim-icon', tone && (0, tone_js_1.fgTone)(tone), UNSAFE_className),
+        style: UNSAFE_style,
+        width: size != null ? size + 'px' : '1em',
+        height: size != null ? size + 'px' : '1em',
+    };
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "data-icon": "true", fill: "currentColor", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M23 3a1 1 0 0 0-.906.577l-.976 2.091a3 3 0 0 1-1.45 1.45l-2.09.976a1 1 0 0 0 0 1.812l2.09.976a3 3 0 0 1 1.45 1.45l.976 2.09a1 1 0 0 0 1.812 0l.976-2.09a3 3 0 0 1 1.45-1.45l2.09-.976a1 1 0 0 0 0-1.812l-2.09-.976a3 3 0 0 1-1.45-1.45l-.976-2.09A1 1 0 0 0 23 3m.07 3.514a5 5 0 0 0 2.416 2.417l.15.069-.15.07a5 5 0 0 0-2.417 2.416l-.069.149-.07-.149a5 5 0 0 0-2.416-2.417L20.365 9l.149-.07a5 5 0 0 0 2.417-2.416l.069-.15zM4 25v-2.25a1 1 0 1 1 2 0V25a1 1 0 0 0 1 1h2.25a1 1 0 1 1 0 2H7a3 3 0 0 1-3-3m14.25 1a1 1 0 1 1 0 2h-4.5a1 1 0 1 1 0-2zM26 25v-2.25a1 1 0 1 1 2 0V25a3 3 0 0 1-3 3h-2.25a1 1 0 1 1 0-2H25a1 1 0 0 0 1-1M4 18.25v-4.5a1 1 0 1 1 2 0v4.5a1 1 0 1 1-2 0m22 0V16a1 1 0 1 1 2 0v2.25a1 1 0 1 1-2 0m-22-9V7a3 3 0 0 1 3-3h2.25a1 1 0 0 1 0 2H7a1 1 0 0 0-1 1v2.25a1 1 0 0 1-2 0M16 4a1 1 0 1 1 0 2h-2.25a1 1 0 1 1 0-2z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M14 25a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1zm2-6a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3z" })] }));
+};
+SvgAiExpand.displayName = displayName;
+exports.default = SvgAiExpand;
+//# sourceMappingURL=ai-expand.js.map

package/dist/commonjs/icons/ai-expand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-expand.js","sourceRoot":"","sources":["../../../src/icons/ai-expand.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AAExB,oDAAgD;AAChD,MAAM,WAAW,GAAG,cAAc,CAAC;AACnC,2BAA2B;AAC3B,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,IAAI,EAAa,EAAE,EAAE;IACpH,MAAM,KAAK,GAAG;QACZ,GAAG,IAAI;QACP,aAAa,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC;QAC5F,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,IAAI,IAAI,IAAA,gBAAM,EAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QACnE,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;QACzC,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;KAC3C,CAAC;IACF,OAAO,CACL,iCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,eAAW,MAAM,EAAC,IAAI,EAAC,cAAc,KAAK,KAAK,aACxG,iCACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,mzBAAmzB,GACrzB,EACF,iCACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,2IAA2I,GAC7I,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,WAAW,CAAC;AACtC,kBAAe,WAAW,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { IconProps } from '../components/types.js';\nimport { fgTone } from '../utils/style/tone.js';\nconst displayName = 'IconAiExpand';\n/** Renders an SVG icon. */\nconst SvgAiExpand = ({ size, 'aria-hidden': ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }: IconProps) => {\n  const props = {\n    ...rest,\n    'aria-hidden': ariaHidden ?? (rest['aria-label'] == null && rest['aria-labelledby'] == null),\n    className: clsx('cim-icon', tone && fgTone(tone), UNSAFE_className),\n    style: UNSAFE_style,\n    width: size != null ? size + 'px' : '1em',\n    height: size != null ? size + 'px' : '1em',\n  };\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" data-icon=\"true\" fill=\"currentColor\" {...props}>\n      <path\n        fill=\"currentColor\"\n        d=\"M23 3a1 1 0 0 0-.906.577l-.976 2.091a3 3 0 0 1-1.45 1.45l-2.09.976a1 1 0 0 0 0 1.812l2.09.976a3 3 0 0 1 1.45 1.45l.976 2.09a1 1 0 0 0 1.812 0l.976-2.09a3 3 0 0 1 1.45-1.45l2.09-.976a1 1 0 0 0 0-1.812l-2.09-.976a3 3 0 0 1-1.45-1.45l-.976-2.09A1 1 0 0 0 23 3m.07 3.514a5 5 0 0 0 2.416 2.417l.15.069-.15.07a5 5 0 0 0-2.417 2.416l-.069.149-.07-.149a5 5 0 0 0-2.416-2.417L20.365 9l.149-.07a5 5 0 0 0 2.417-2.416l.069-.15zM4 25v-2.25a1 1 0 1 1 2 0V25a1 1 0 0 0 1 1h2.25a1 1 0 1 1 0 2H7a3 3 0 0 1-3-3m14.25 1a1 1 0 1 1 0 2h-4.5a1 1 0 1 1 0-2zM26 25v-2.25a1 1 0 1 1 2 0V25a3 3 0 0 1-3 3h-2.25a1 1 0 1 1 0-2H25a1 1 0 0 0 1-1M4 18.25v-4.5a1 1 0 1 1 2 0v4.5a1 1 0 1 1-2 0m22 0V16a1 1 0 1 1 2 0v2.25a1 1 0 1 1-2 0m-22-9V7a3 3 0 0 1 3-3h2.25a1 1 0 0 1 0 2H7a1 1 0 0 0-1 1v2.25a1 1 0 0 1-2 0M16 4a1 1 0 1 1 0 2h-2.25a1 1 0 1 1 0-2z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M14 25a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1zm2-6a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3z\"\n      />\n    </svg>\n  );\n};\nSvgAiExpand.displayName = displayName;\nexport default SvgAiExpand;\n"]}

package/dist/commonjs/icons/chat.d.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from '../components/types.js';
+/** Renders an SVG icon. */
+declare const SvgChat: {
+    ({ size, "aria-hidden": ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SvgChat;
+//# sourceMappingURL=chat.d.ts.map

package/dist/commonjs/icons/chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../../src/icons/chat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGxD,2BAA2B;AAC3B,QAAA,MAAM,OAAO;yFAAwF,SAAS;;CAqB7G,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/commonjs/icons/chat.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const tone_js_1 = require("../utils/style/tone.js");
+const displayName = 'IconChat';
+/** Renders an SVG icon. */
+const SvgChat = ({ size, 'aria-hidden': ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }) => {
+    const props = {
+        ...rest,
+        'aria-hidden': ariaHidden ?? (rest['aria-label'] == null && rest['aria-labelledby'] == null),
+        className: (0, clsx_1.default)('cim-icon', tone && (0, tone_js_1.fgTone)(tone), UNSAFE_className),
+        style: UNSAFE_style,
+        width: size != null ? size + 'px' : '1em',
+        height: size != null ? size + 'px' : '1em',
+    };
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "data-icon": "true", fill: "currentColor", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M28 15a2 2 0 0 0-2-2H16a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h5a4 4 0 0 1 2.4.8L25 25v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1zm2 7a3 3 0 0 1-3 3v2a1 1 0 0 1-1.6.8l-3.2-2.4A2 2 0 0 0 21 25h-5a4 4 0 0 1-4-4v-6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M11 16a4 4 0 0 0-2.4.8L7 18a2 2 0 0 0-2-2 1 1 0 0 1-1-1V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2.5a1 1 0 1 0 2 0V8a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v7a3 3 0 0 0 3 3v2a1 1 0 0 0 1.6.8l3.2-2.4A2 2 0 0 1 11 18h1.5a1 1 0 1 0 0-2zm7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" })] }));
+};
+SvgChat.displayName = displayName;
+exports.default = SvgChat;
+//# sourceMappingURL=chat.js.map

package/dist/commonjs/icons/chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.js","sourceRoot":"","sources":["../../../src/icons/chat.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AAExB,oDAAgD;AAChD,MAAM,WAAW,GAAG,UAAU,CAAC;AAC/B,2BAA2B;AAC3B,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,IAAI,EAAa,EAAE,EAAE;IAChH,MAAM,KAAK,GAAG;QACZ,GAAG,IAAI;QACP,aAAa,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC;QAC5F,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,IAAI,IAAI,IAAA,gBAAM,EAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QACnE,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;QACzC,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;KAC3C,CAAC;IACF,OAAO,CACL,iCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,eAAW,MAAM,EAAC,IAAI,EAAC,cAAc,KAAK,KAAK,aACxG,iCACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,kOAAkO,GACpO,EACF,iCACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yTAAyT,GAC3T,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AACF,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;AAClC,kBAAe,OAAO,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { IconProps } from '../components/types.js';\nimport { fgTone } from '../utils/style/tone.js';\nconst displayName = 'IconChat';\n/** Renders an SVG icon. */\nconst SvgChat = ({ size, 'aria-hidden': ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }: IconProps) => {\n  const props = {\n    ...rest,\n    'aria-hidden': ariaHidden ?? (rest['aria-label'] == null && rest['aria-labelledby'] == null),\n    className: clsx('cim-icon', tone && fgTone(tone), UNSAFE_className),\n    style: UNSAFE_style,\n    width: size != null ? size + 'px' : '1em',\n    height: size != null ? size + 'px' : '1em',\n  };\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" data-icon=\"true\" fill=\"currentColor\" {...props}>\n      <path\n        fill=\"currentColor\"\n        d=\"M28 15a2 2 0 0 0-2-2H16a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h5a4 4 0 0 1 2.4.8L25 25v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1zm2 7a3 3 0 0 1-3 3v2a1 1 0 0 1-1.6.8l-3.2-2.4A2 2 0 0 0 21 25h-5a4 4 0 0 1-4-4v-6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M11 16a4 4 0 0 0-2.4.8L7 18a2 2 0 0 0-2-2 1 1 0 0 1-1-1V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2.5a1 1 0 1 0 2 0V8a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v7a3 3 0 0 0 3 3v2a1 1 0 0 0 1.6.8l3.2-2.4A2 2 0 0 1 11 18h1.5a1 1 0 1 0 0-2zm7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0\"\n      />\n    </svg>\n  );\n};\nSvgChat.displayName = displayName;\nexport default SvgChat;\n"]}

package/dist/commonjs/icons/index.d.ts

@@ -6,6 +6,7 @@ export { default as IconAddCircle } from './add-circle.js';
 export { default as IconAddSquareFill } from './add-square-fill.js';
 export { default as IconAddSquare } from './add-square.js';
 export { default as IconAdd } from './add.js';
+export { default as IconAiExpand } from './ai-expand.js';
 export { default as IconAi } from './ai.js';
 export { default as IconAlignHorizontalCenter } from './align-horizontal-center.js';
 export { default as IconAlignHorizontalLeft } from './align-horizontal-left.js';
@@ -59,6 +60,7 @@ export { default as IconCategoryNewspaper } from './category-newspaper.js';
 export { default as IconCategoryPackage } from './category-package.js';
 export { default as IconCategoryPromoProduct } from './category-promo-product.js';
 export { default as IconCategorySmallFormat } from './category-small-format.js';
+export { default as IconChat } from './chat.js';
 export { default as IconCheckBadgeFill } from './check-badge-fill.js';
 export { default as IconCheckBadge } from './check-badge.js';
 export { default as IconCheckBold } from './check-bold.js';
@@ -138,6 +140,7 @@ export { default as IconKeyboard } from './keyboard.js';
 export { default as IconLayerDown } from './layer-down.js';
 export { default as IconLayerUp } from './layer-up.js';
 export { default as IconLayers } from './layers.js';
+export { default as IconLinkBroken } from './link-broken.js';
 export { default as IconLink } from './link.js';
 export { default as IconListBullets } from './list-bullets.js';
 export { default as IconListNumbers } from './list-numbers.js';
@@ -151,9 +154,11 @@ export { default as IconMenuGrid } from './menu-grid.js';
 export { default as IconMenuMoreHorizontal } from './menu-more-horizontal.js';
 export { default as IconMenuMoreVertical } from './menu-more-vertical.js';
 export { default as IconMenu } from './menu.js';
+export { default as IconMobilePhone } from './mobile-phone.js';
 export { default as IconOpacity } from './opacity.js';
 export { default as IconPencilFill } from './pencil-fill.js';
 export { default as IconPencil } from './pencil.js';
+export { default as IconPhone } from './phone.js';
 export { default as IconPinMap } from './pin-map.js';
 export { default as IconPlaceholder } from './placeholder.js';
 export { default as IconPlacement } from './placement.js';