@mittwald/flow-react-components 1.5.0-next.9 → 1.5.1

package/dist/js/packages/components/src/components/Navigation/Navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n */\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n  Children.map(children, (child) =>\n    containsTextChild(child) ? <span>{child}</span> : child,\n  );\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnel: {\n            id: \"links\",\n            component: \"Navigation\",\n          },\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n        <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n        {children}\n      </nav>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UACtB,kBAAkB,KAAK,IAAI,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,IAAI,KACpD;;AAGF,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAW,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAW,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAW,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAW,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Navigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n */\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n  Children.map(children, (child) => {\n    const label = (\n      <span>\n        <SkeletonTextContent defaultWidth=\"6em\">{child}</SkeletonTextContent>\n      </span>\n    );\n\n    return containsTextChild(child) ? label : child;\n  });\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnel: {\n            id: \"links\",\n            component: \"Navigation\",\n          },\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n        <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n        {children}\n      </nav>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UAAU;CAChC,MAAM,QACJ,oBAAC,QAAD,EAAA,UACE,oBAAC,qBAAD;EAAqB,cAAa;EAAO,UAAA;CAA2B,CAAA,EAChE,CAAA;CAGR,OAAO,kBAAkB,KAAK,IAAI,QAAQ;AAC5C,CAAC;;AAGH,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAWA,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAWA,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAWA,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAWA,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAWA,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Navigation/Navigation.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n@use \"@/styles/mixins/ellipsis\";\n\n.navigation {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n\n  .linkList {\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--menu--item-to-item-spacing);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .item {\n    @include menuItem.menuItem();\n\n    > .icon {\n      order: 0;\n      flex-shrink: 0;\n    }\n\n    > :not(.icon) {\n      order: 1;\n    }\n\n    > :not(.icon, .badge) {\n      @include ellipsis.ellipsis;\n\n      min-width: 0;\n    }\n\n    .badge {\n      margin-inline-start: auto;\n      flex-shrink: 0;\n    }\n  }\n\n  // A consumer-placed `Separator`, which is a plain FC — Navigation's props\n  // context cannot inject a class into it.\n  // stylelint-disable-next-line selector-max-type -- consumer separator\n  hr {\n    margin-bottom: var(--menu--group-to-group-spacing);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n@use \"@/styles/mixins/ellipsis\";\n\n.navigation {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n\n  /* Label and link texts line up with the content around the navigation;\n     only the hover backgrounds reach past it. */\n  margin-inline: calc(var(--menu-item--padding-x) * -1);\n\n  .linkList {\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--menu--item-to-item-spacing);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .item {\n    @include menuItem.menuItem();\n\n    > .icon {\n      order: 0;\n      flex-shrink: 0;\n    }\n\n    > :not(.icon) {\n      order: 1;\n    }\n\n    > :not(.icon, .badge) {\n      @include ellipsis.ellipsis;\n\n      min-width: 0;\n    }\n\n    .badge {\n      margin-inline-start: auto;\n      flex-shrink: 0;\n    }\n  }\n\n  // A consumer-placed `Separator`, which is a plain FC — Navigation's props\n  // context cannot inject a class into it.\n  // stylelint-disable-next-line selector-max-type -- consumer separator\n  hr {\n    margin-bottom: var(--menu--group-to-group-spacing);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkListTunnelExit.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport styles from \"../../Navigation.module.scss\";\n\nexport const LinkListTunnelExit: typeof UiComponentTunnelExit = (props) => {\n  return (\n    <UiComponentTunnelExit\n      {...props}\n      children={(children) => {\n        if (Children.count(children) >= 1) {\n          return <ul className={styles.linkList}>{children}</ul>;\n        }\n\n        return null;\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAIA,IAAa,sBAAoD,UAAU;CACzE,OACE,oBAAC,uBAAD;EACE,GAAI;EACJ,WAAW,aAAa;GACtB,IAAI,SAAS,MAAM,QAAQ,KAAK,GAC9B,OAAO,oBAAC,MAAD;IAAI,WAAW,0BAAO;IAAW;GAAa,CAAA;GAGvD,OAAO;EACT;CACD,CAAA;AAEL"}
+{"version":3,"file":"LinkListTunnelExit.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport styles from \"../../Navigation.module.scss\";\n\nexport const LinkListTunnelExit: typeof UiComponentTunnelExit = (props) => {\n  return (\n    <UiComponentTunnelExit\n      {...props}\n      children={(children) => {\n        if (Children.count(children) >= 1) {\n          return <ul className={styles.linkList}>{children}</ul>;\n        }\n\n        return null;\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAIA,IAAa,sBAAoD,UAAU;CACzE,OACE,oBAAC,uBAAD;EACE,GAAI;EACJ,WAAW,aAAa;GACtB,IAAI,SAAS,MAAM,QAAQ,KAAK,GAC9B,OAAO,oBAAC,MAAD;IAAI,WAAWA,0BAAO;IAAW;GAAa,CAAA;GAGvD,OAAO;EACT;CACD,CAAA;AAEL"}

package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationGroup.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import { type ComponentProps, type PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationGroupProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  collapsable?: boolean;\n  /**\n   * Whether a `collapsable` group is initially expanded.\n   *\n   * @default true\n   */\n  defaultExpanded?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n  const {\n    children,\n    className,\n    collapsable,\n    defaultExpanded = true,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.navigationGroup,\n    collapsable && styles.collapsable,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      id: ariaLabel ? undefined : generatedId,\n      className: styles.label,\n    },\n    Link: {\n      tunnel: {\n        id: \"groupLinks\",\n        component: \"NavigationGroup\",\n      },\n    },\n  };\n\n  const collapsableUi = (\n    <Accordion defaultExpanded={defaultExpanded} className={rootClassName}>\n      {children}\n      <Content>\n        <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n      </Content>\n    </Accordion>\n  );\n\n  const defaultUi = (\n    <section\n      aria-labelledby={ariaLabel ? undefined : generatedId}\n      aria-label={ariaLabel}\n      className={rootClassName}\n      {...rest}\n    >\n      {children}\n      <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n    </section>\n  );\n\n  return (\n    <PropsContextProvider props={propsContext} dependencies={[generatedId]}>\n      {collapsable ? collapsableUi : defaultUi}\n    </PropsContextProvider>\n  );\n});\n\nexport default NavigationGroup;\n"],"mappings":";;;;;;;;;;;;;AA2BA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EACJ,UACA,WACA,aACA,kBAAkB,MAClB,cAAc,WACd,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,+BAAO,iBACP,eAAe,+BAAO,aACtB,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,eAA6B;EACjC,OAAO;GACL,IAAI,YAAY,KAAA,IAAY;GAC5B,WAAW,+BAAO;EACpB;EACA,MAAM,EACJ,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;CACF;CAEA,MAAM,gBACJ,qBAAC,WAAD;EAA4B;EAAiB,WAAW;EAAxD,UAAA,CACG,UACD,oBAAC,SAAD,EAAA,UACE,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,EAC1D,CAAA,CACA;;CAGb,MAAM,YACJ,qBAAC,WAAD;EACE,mBAAiB,YAAY,KAAA,IAAY;EACzC,cAAY;EACZ,WAAW;EACX,GAAI;EAJN,UAAA,CAMG,UACD,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,CAC1D;;CAGX,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAAc,cAAc,CAAC,WAAW;EAClE,UAAA,cAAc,gBAAgB;CACX,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"NavigationGroup.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import { type ComponentProps, type PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationGroupProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  collapsable?: boolean;\n  /**\n   * Whether a `collapsable` group is initially expanded.\n   *\n   * @default true\n   */\n  defaultExpanded?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n  const {\n    children,\n    className,\n    collapsable,\n    defaultExpanded = true,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.navigationGroup,\n    collapsable && styles.collapsable,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      id: ariaLabel ? undefined : generatedId,\n      className: styles.label,\n    },\n    Link: {\n      tunnel: {\n        id: \"groupLinks\",\n        component: \"NavigationGroup\",\n      },\n    },\n  };\n\n  const collapsableUi = (\n    <Accordion defaultExpanded={defaultExpanded} className={rootClassName}>\n      {children}\n      <Content>\n        <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n      </Content>\n    </Accordion>\n  );\n\n  const defaultUi = (\n    <section\n      aria-labelledby={ariaLabel ? undefined : generatedId}\n      aria-label={ariaLabel}\n      className={rootClassName}\n      {...rest}\n    >\n      {children}\n      <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n    </section>\n  );\n\n  return (\n    <PropsContextProvider props={propsContext} dependencies={[generatedId]}>\n      {collapsable ? collapsableUi : defaultUi}\n    </PropsContextProvider>\n  );\n});\n\nexport default NavigationGroup;\n"],"mappings":";;;;;;;;;;;;;AA2BA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EACJ,UACA,WACA,aACA,kBAAkB,MAClB,cAAc,WACd,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,+BAAO,iBACP,eAAeA,+BAAO,aACtB,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,eAA6B;EACjC,OAAO;GACL,IAAI,YAAY,KAAA,IAAY;GAC5B,WAAWA,+BAAO;EACpB;EACA,MAAM,EACJ,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;CACF;CAEA,MAAM,gBACJ,qBAAC,WAAD;EAA4B;EAAiB,WAAW;EAAxD,UAAA,CACG,UACD,oBAAC,SAAD,EAAA,UACE,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,EAC1D,CAAA,CACA;;CAGb,MAAM,YACJ,qBAAC,WAAD;EACE,mBAAiB,YAAY,KAAA,IAAY;EACzC,cAAY;EACZ,WAAW;EACX,GAAI;EAJN,UAAA,CAMG,UACD,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,CAC1D;;CAGX,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAAc,cAAc,CAAC,WAAW;EAClE,UAAA,cAAc,gBAAgB;CACX,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationGroup.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss"],"sourcesContent":[".navigationGroup {\n  &:not(.collapsable) :global(.flow--navigation--link-list) {\n    padding-inline: var(--accordion--padding-x);\n    padding-block: var(--accordion--padding-y);\n  }\n\n  &:not(:last-child) {\n    margin-bottom: var(--menu--group-to-group-spacing);\n  }\n\n  .label {\n    display: block;\n    padding-block: var(--accordion--padding-y);\n    padding-inline: var(--accordion--padding-x);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationGroup.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss"],"sourcesContent":["/* Group label and toggle sit on the menu item's edge; the links are indented\n   by one menu item padding, hover areas included. */\n.navigationGroup {\n  :global(.flow--navigation--link-list) {\n    padding-block: var(--menu--item-to-item-spacing);\n    padding-inline: var(--menu-item--padding-x);\n  }\n\n  &:not(:last-child) {\n    margin-bottom: var(--menu--group-to-group-spacing);\n  }\n\n  &:not(.collapsable) .label {\n    display: block;\n    padding-block: var(--menu-item--padding-y);\n    padding-inline: var(--menu-item--padding-x);\n  }\n\n  &.collapsable {\n    margin-inline: 0;\n\n    :global(.flow--accordion--header-button) {\n      padding-block: var(--menu-item--padding-y);\n      padding-inline: var(--menu-item--padding-x);\n      border-radius: var(--menu-item--corner-radius);\n    }\n\n    :global(.flow--accordion--content-inner) {\n      padding: 0;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Notification/Notification.mjs

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { Button } from "../Button/Button.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
@@ -15,8 +16,9 @@ import { useLocalizedStringFormatter } from "react-aria";
 /** @flr-generate all */
 var Notification = (props) => {
 	const { children, className, status = "info", role = "alert", href, onClick, onClose, autoClose: ignoredAutoClose, ...rest } = props;
-	const rootClassName = clsx(Notification_module_default.notification, Notification_module_default[status], (onClick || onClose || href) && Notification_module_default.hasLink, className);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Notification_module_default.notification, Notification_module_default[status], (onClick || onClose || href) && !isSkeleton && Notification_module_default.hasLink, isSkeleton && Notification_module_default.skeleton, className);
 	const propsContext = {
 		Heading: {
 			className: Notification_module_default.heading,
@@ -37,21 +39,27 @@ var Notification = (props) => {
 		"aria-label": stringFormatter.format("notification.close"),
 		children: /* @__PURE__ */ jsx(IconClose, {})
 	});
+	const content = /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children
+	});
+	const skeletonBody = /* @__PURE__ */ jsx("div", {
+		className: Notification_module_default.link,
+		children: content
+	});
+	const linkBody = /* @__PURE__ */ jsx(Link, {
+		unstyled: true,
+		href,
+		className: Notification_module_default.link,
+		onPress: onClick,
+		children: content
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: rootClassName,
 		role,
 		"data-react-aria-top-layer": true,
-		children: [/* @__PURE__ */ jsx(Link, {
-			unstyled: true,
-			href,
-			className: Notification_module_default.link,
-			onPress: onClick,
-			children: /* @__PURE__ */ jsx(PropsContextProvider, {
-				props: propsContext,
-				children
-			})
-		}), closeButton]
+		children: [isSkeleton ? skeletonBody : linkBody, closeButton]
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Notification/Notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { Link } from \"@/components/Link\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./Notification.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nexport interface NotificationProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, PropsWithStatus {\n  /** A link that is triggered when clicking the notification. */\n  href?: string;\n  /** Whether the notification should disappear automatically after some time. */\n  autoClose?: boolean;\n  /** Handler that is called when the notification is clicked. */\n  onClick?: () => void;\n  /**\n   * Handler that is called when the close button of the notification is\n   * clicked.\n   */\n  onClose?: () => void;\n}\n\n/** @flr-generate all */\nexport const Notification: FC<NotificationProps> = (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    role = \"alert\",\n    href,\n    onClick,\n    onClose,\n    autoClose: ignoredAutoClose,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.notification,\n    styles[status],\n    (onClick || onClose || href) && styles.hasLink,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 4,\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  const closeButton = onClose && (\n    <Button\n      size=\"s\"\n      className={styles.close}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onClose}\n      aria-label={stringFormatter.format(\"notification.close\")}\n    >\n      <IconClose />\n    </Button>\n  );\n\n  return (\n    <div\n      {...rest}\n      className={rootClassName}\n      role={role}\n      // See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts#L126C31-L126C58\n      data-react-aria-top-layer\n    >\n      <Link unstyled href={href} className={styles.link} onPress={onClick}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Link>\n      {closeButton}\n    </div>\n  );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,UACA,WACA,SAAS,QACT,OAAO,SACP,MACA,SACA,SACA,WAAW,kBACX,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,4BAAO,cACP,4BAAO,UACN,WAAW,WAAW,SAAS,4BAAO,SACvC,SACF;CAEA,MAAM,kBAAkB,4BAA4B,gBAAO;CAE3D,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,4BAAO;GAClB,OAAO;GACP,UAAU,SAAS,UACjB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAW,4BAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,MAAM,EACJ,WAAW,4BAAO,KACpB;CACF;CAEA,MAAM,cAAc,WAClB,oBAAC,QAAD;EACE,MAAK;EACL,WAAW,4BAAO;EAClB,SAAQ;EACR,OAAM;EACN,SAAS;EACT,cAAY,gBAAgB,OAAO,oBAAoB;EAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;CAGV,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACL;EAEN,6BAAA;EALF,UAAA,CAOE,oBAAC,MAAD;GAAM,UAAA;GAAe;GAAM,WAAW,4BAAO;GAAM,SAAS;GAC1D,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EAClB,CAAA,GACL,WACE;;AAET"}
+{"version":3,"file":"Notification.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { Link } from \"@/components/Link\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./Notification.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface NotificationProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, PropsWithStatus {\n  /** A link that is triggered when clicking the notification. */\n  href?: string;\n  /** Whether the notification should disappear automatically after some time. */\n  autoClose?: boolean;\n  /** Handler that is called when the notification is clicked. */\n  onClick?: () => void;\n  /**\n   * Handler that is called when the close button of the notification is\n   * clicked.\n   */\n  onClose?: () => void;\n}\n\n/** @flr-generate all */\nexport const Notification: FC<NotificationProps> = (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    role = \"alert\",\n    href,\n    onClick,\n    onClose,\n    autoClose: ignoredAutoClose,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.notification,\n    styles[status],\n    (onClick || onClose || href) && !isSkeleton && styles.hasLink,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 4,\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  const closeButton = onClose && (\n    <Button\n      size=\"s\"\n      className={styles.close}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onClose}\n      aria-label={stringFormatter.format(\"notification.close\")}\n    >\n      <IconClose />\n    </Button>\n  );\n\n  const content = (\n    <PropsContextProvider props={propsContext}>{children}</PropsContextProvider>\n  );\n\n  /*\n   * In the mode, the content is not wrapped in a link: a link would draw its\n   * whole content as one text bar, and there is nothing to click.\n   */\n  const skeletonBody = <div className={styles.link}>{content}</div>;\n\n  const linkBody = (\n    <Link unstyled href={href} className={styles.link} onPress={onClick}>\n      {content}\n    </Link>\n  );\n\n  return (\n    <div\n      {...rest}\n      className={rootClassName}\n      role={role}\n      // See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts#L126C31-L126C58\n      data-react-aria-top-layer\n    >\n      {isSkeleton ? skeletonBody : linkBody}\n      {closeButton}\n    </div>\n  );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,UACA,WACA,SAAS,QACT,OAAO,SACP,MACA,SACA,SACA,WAAW,kBACX,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4BA,gBAAO;CAC3D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,4BAAO,cACPA,4BAAO,UACN,WAAW,WAAW,SAAS,CAAC,cAAcA,4BAAO,SACtD,cAAcA,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,4BAAO;GAClB,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,4BAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;CACF;CAEA,MAAM,cAAc,WAClB,oBAAC,QAAD;EACE,MAAK;EACL,WAAWA,4BAAO;EAClB,SAAQ;EACR,OAAM;EACN,SAAS;EACT,cAAY,gBAAgB,OAAO,oBAAoB;EAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;CAGV,MAAM,UACJ,oBAAC,sBAAD;EAAsB,OAAO;EAAe;CAA+B,CAAA;CAO7E,MAAM,eAAe,oBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAO,UAAA;CAAa,CAAA;CAEhE,MAAM,WACJ,oBAAC,MAAD;EAAM,UAAA;EAAe;EAAM,WAAWA,4BAAO;EAAM,SAAS;EACzD,UAAA;CACG,CAAA;CAGR,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACL;EAEN,6BAAA;EALF,UAAA,CAOG,aAAa,eAAe,UAC5B,WACE;;AAET"}

package/dist/js/packages/components/src/components/Notification/Notification.module.mjs

@@ -13,6 +13,7 @@ var warning = "flow--notification--warning";
 var danger = "flow--notification--danger";
 var success = "flow--notification--success";
 var unavailable = "flow--notification--unavailable";
+var skeleton = "flow--notification--skeleton";
 var Notification_module_default = {
 	notification,
 	link,
@@ -25,9 +26,10 @@ var Notification_module_default = {
 	warning,
 	danger,
 	success,
-	unavailable
+	unavailable,
+	skeleton
 };
 //#endregion
-export { close, danger, Notification_module_default as default, hasLink, heading, icon, info, link, notification, success, text, unavailable, warning };
+export { close, danger, Notification_module_default as default, hasLink, heading, icon, info, link, notification, skeleton, success, text, unavailable, warning };
 
 //# sourceMappingURL=Notification.module.mjs.map

package/dist/js/packages/components/src/components/Notification/Notification.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.notification {\n  border-radius: var(--notification--corner-radius);\n  width: var(--notification--width);\n  max-width: var(--notification--max-width);\n  box-shadow: var(--notification--box-shadow);\n  position: relative;\n  border: var(--notification--border-width) var(--notification--border-style)\n    var(--notification--border-color);\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: var(--notification--border-x-start-width);\n    inset-inline-start: calc(var(--size-px--xxxs) * -1);\n    border-start-start-radius: var(--notification--corner-radius);\n    border-end-start-radius: var(--notification--corner-radius);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .link {\n    padding: var(--notification--padding);\n    padding-inline-start: calc(\n      var(--notification--padding) + var(--notification--border-x-start-width)\n    );\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--notification--heading-to-text-spacing);\n    cursor: default;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n    position: relative;\n    border-radius: calc(var(--notification--corner-radius) - 1px);\n\n    @include focus.focus;\n  }\n\n  .heading {\n    --button-size: calc(\n      var(--button--line-height-s) + 2 * var(--button--padding-s-x)\n    );\n\n    padding-inline-end: calc(\n      var(--button-size) + var(--heading--icon-to-text-spacing)\n    );\n\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .text {\n    font-size: var(--notification--font-size);\n  }\n\n  .close {\n    position: absolute;\n    top: var(--notification--padding);\n    inset-inline-end: var(--notification--padding);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .link {\n        border-color: var(--notification--#{$status}-background-color--default);\n        background-color: var(\n          --notification--#{$status}-background-color--default\n        );\n      }\n\n      &::after {\n        background-color: var(--notification--#{$status}-border-color);\n      }\n\n      &.hasLink {\n        .link {\n          &:hover {\n            background-color: var(\n              --notification--#{$status}-background-color--hover\n            );\n          }\n\n          &[data-pressed] {\n            background-color: var(\n              --notification--#{$status}-background-color--pressed\n            );\n          }\n        }\n      }\n\n      .heading {\n        color: var(--notification--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n}\n"],"mappings":""}
+{"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.notification {\n  border-radius: var(--notification--corner-radius);\n  width: var(--notification--width);\n  max-width: var(--notification--max-width);\n  box-shadow: var(--notification--box-shadow);\n  position: relative;\n  border: var(--notification--border-width) var(--notification--border-style)\n    var(--notification--border-color);\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: var(--notification--border-x-start-width);\n    inset-inline-start: calc(var(--size-px--xxxs) * -1);\n    border-start-start-radius: var(--notification--corner-radius);\n    border-end-start-radius: var(--notification--corner-radius);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .link {\n    padding: var(--notification--padding);\n    padding-inline-start: calc(\n      var(--notification--padding) + var(--notification--border-x-start-width)\n    );\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--notification--heading-to-text-spacing);\n    cursor: default;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n    position: relative;\n    border-radius: calc(var(--notification--corner-radius) - 1px);\n\n    @include focus.focus;\n  }\n\n  .heading {\n    --button-size: calc(\n      var(--button--line-height-s) + 2 * var(--button--padding-s-x)\n    );\n\n    padding-inline-end: calc(\n      var(--button-size) + var(--heading--icon-to-text-spacing)\n    );\n\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .text {\n    font-size: var(--notification--font-size);\n  }\n\n  .close {\n    position: absolute;\n    top: var(--notification--padding);\n    inset-inline-end: var(--notification--padding);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .link {\n        border-color: var(--notification--#{$status}-background-color--default);\n        background-color: var(\n          --notification--#{$status}-background-color--default\n        );\n      }\n\n      &::after {\n        background-color: var(--notification--#{$status}-border-color);\n      }\n\n      &.hasLink {\n        .link {\n          &:hover {\n            background-color: var(\n              --notification--#{$status}-background-color--hover\n            );\n          }\n\n          &[data-pressed] {\n            background-color: var(\n              --notification--#{$status}-background-color--pressed\n            );\n          }\n        }\n      }\n\n      .heading {\n        color: var(--notification--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n\n  /* SkeletonMode: no status color while the content loads */\n  &.skeleton::after {\n    background-color: skeleton.$background-color;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/NotificationProvider/NotificationContainer/NotificationContainer.mjs

@@ -6,8 +6,8 @@ import { useNotificationController } from "../NotificationProvider.mjs";
 import clsx from "clsx";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
-import { AnimatePresence, LazyMotion, MotionConfig, domAnimation, m } from "framer-motion";
 import { useIsSSR } from "react-aria";
+import { AnimatePresence, LazyMotion, MotionConfig, domAnimation, m } from "framer-motion";
 import ReactDOM from "react-dom";
 //#region src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx
 var NotificationContainer = (props) => {

package/dist/js/packages/components/src/components/NotificationProvider/NotificationContainer/NotificationContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport clsx from \"clsx\";\nimport styles from \"./NotificationContainer.module.scss\";\nimport ControlledNotification from \"@/components/NotificationProvider/ControlledNotification\";\nimport {\n  AnimatePresence,\n  domAnimation,\n  LazyMotion,\n  m,\n  MotionConfig,\n} from \"framer-motion\";\nimport { useIsSSR } from \"react-aria\";\nimport { useNotificationController } from \"@/components/NotificationProvider/NotificationProvider\";\n\nexport type NotificationsContainerProps = ComponentProps<\"div\">;\n\nexport const NotificationContainer: FC<NotificationsContainerProps> = (\n  props,\n) => {\n  const { className, ...rest } = props;\n\n  const controller = useNotificationController();\n  const notifications = controller.useNotifications();\n  const isSsr = useIsSSR();\n\n  const rootClassName = clsx(styles.notificationContainer, className);\n\n  const content = (\n    <MotionConfig reducedMotion=\"user\">\n      <LazyMotion features={domAnimation}>\n        <div className={rootClassName} {...rest} data-react-aria-top-layer>\n          <AnimatePresence>\n            {notifications.map((n) => (\n              <m.div\n                className={styles.notification}\n                key={n.meta.id}\n                initial={{ opacity: 0, x: 200 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: 200, height: 0, paddingBottom: 0 }}\n                transition={{\n                  bounce: 0,\n                }}\n              >\n                <Suspense>\n                  <ControlledNotification\n                    notification={n}\n                    controller={controller}\n                  />\n                </Suspense>\n              </m.div>\n            ))}\n          </AnimatePresence>\n        </div>\n      </LazyMotion>\n    </MotionConfig>\n  );\n\n  return isSsr ? null : ReactDOM.createPortal(content, document.body);\n};\n\nexport default NotificationContainer;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,yBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,aAAa,0BAA0B;CAC7C,MAAM,gBAAgB,WAAW,iBAAiB;CAClD,MAAM,QAAQ,SAAS;CAEvB,MAAM,gBAAgB,KAAK,qCAAO,uBAAuB,SAAS;CAElE,MAAM,UACJ,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,oBAAC,YAAD;GAAY,UAAU;GACpB,UAAA,oBAAC,OAAD;IAAK,WAAW;IAAe,GAAI;IAAM,6BAAA;IACvC,UAAA,oBAAC,iBAAD,EAAA,UACG,cAAc,KAAK,MAClB,oBAAC,EAAE,KAAH;KACE,WAAW,qCAAO;KAElB,SAAS;MAAE,SAAS;MAAG,GAAG;KAAI;KAC9B,SAAS;MAAE,SAAS;MAAG,GAAG;KAAE;KAC5B,MAAM;MAAE,SAAS;MAAG,GAAG;MAAK,QAAQ;MAAG,eAAe;KAAE;KACxD,YAAY,EACV,QAAQ,EACV;KAEA,UAAA,oBAAC,UAAD,EAAA,UACE,oBAAC,wBAAD;MACE,cAAc;MACF;KACb,CAAA,EACO,CAAA;IACL,GAdA,EAAE,KAAK,EAcP,CACR,EACc,CAAA;GACd,CAAA;EACK,CAAA;CACA,CAAA;CAGhB,OAAO,QAAQ,OAAO,SAAS,aAAa,SAAS,SAAS,IAAI;AACpE"}
+{"version":3,"file":"NotificationContainer.mjs","names":["styles"],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport clsx from \"clsx\";\nimport styles from \"./NotificationContainer.module.scss\";\nimport ControlledNotification from \"@/components/NotificationProvider/ControlledNotification\";\nimport {\n  AnimatePresence,\n  domAnimation,\n  LazyMotion,\n  m,\n  MotionConfig,\n} from \"framer-motion\";\nimport { useIsSSR } from \"react-aria\";\nimport { useNotificationController } from \"@/components/NotificationProvider/NotificationProvider\";\n\nexport type NotificationsContainerProps = ComponentProps<\"div\">;\n\nexport const NotificationContainer: FC<NotificationsContainerProps> = (\n  props,\n) => {\n  const { className, ...rest } = props;\n\n  const controller = useNotificationController();\n  const notifications = controller.useNotifications();\n  const isSsr = useIsSSR();\n\n  const rootClassName = clsx(styles.notificationContainer, className);\n\n  const content = (\n    <MotionConfig reducedMotion=\"user\">\n      <LazyMotion features={domAnimation}>\n        <div className={rootClassName} {...rest} data-react-aria-top-layer>\n          <AnimatePresence>\n            {notifications.map((n) => (\n              <m.div\n                className={styles.notification}\n                key={n.meta.id}\n                initial={{ opacity: 0, x: 200 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: 200, height: 0, paddingBottom: 0 }}\n                transition={{\n                  bounce: 0,\n                }}\n              >\n                <Suspense>\n                  <ControlledNotification\n                    notification={n}\n                    controller={controller}\n                  />\n                </Suspense>\n              </m.div>\n            ))}\n          </AnimatePresence>\n        </div>\n      </LazyMotion>\n    </MotionConfig>\n  );\n\n  return isSsr ? null : ReactDOM.createPortal(content, document.body);\n};\n\nexport default NotificationContainer;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,yBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,aAAa,0BAA0B;CAC7C,MAAM,gBAAgB,WAAW,iBAAiB;CAClD,MAAM,QAAQ,SAAS;CAEvB,MAAM,gBAAgB,KAAKA,qCAAO,uBAAuB,SAAS;CAElE,MAAM,UACJ,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,oBAAC,YAAD;GAAY,UAAU;GACpB,UAAA,oBAAC,OAAD;IAAK,WAAW;IAAe,GAAI;IAAM,6BAAA;IACvC,UAAA,oBAAC,iBAAD,EAAA,UACG,cAAc,KAAK,MAClB,oBAAC,EAAE,KAAH;KACE,WAAWA,qCAAO;KAElB,SAAS;MAAE,SAAS;MAAG,GAAG;KAAI;KAC9B,SAAS;MAAE,SAAS;MAAG,GAAG;KAAE;KAC5B,MAAM;MAAE,SAAS;MAAG,GAAG;MAAK,QAAQ;MAAG,eAAe;KAAE;KACxD,YAAY,EACV,QAAQ,EACV;KAEA,UAAA,oBAAC,UAAD,EAAA,UACE,oBAAC,wBAAD;MACE,cAAc;MACF;KACb,CAAA,EACO,CAAA;IACL,GAdA,EAAE,KAAK,EAcP,CACR,EACc,CAAA;GACd,CAAA;EACK,CAAA;CACA,CAAA;CAGhB,OAAO,QAAQ,OAAO,SAAS,aAAa,SAAS,SAAS,IAAI;AACpE"}

package/dist/js/packages/components/src/components/NumberField/NumberField.mjs

@@ -11,20 +11,25 @@ import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import NumberField_module_default from "./NumberField.module.mjs";
+import { NumberFieldUnit } from "./components/NumberFieldUnit.mjs";
 import clsx from "clsx";
-import "react";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/NumberField/NumberField.tsx
 /** @flr-generate all */
 var NumberField = flowComponent("NumberField", (props) => {
-	const { children, className, isWheelDisabled = true, ref, ...rest } = useControlledHostValueProps(props, NaN);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "NumberField");
+	const { children, className, isWheelDisabled = true, ref, unit, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, NaN);
+	const unitId = useId();
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "NumberField");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	return /* @__PURE__ */ jsxs(Aria.NumberField, {
 		...rest,
+		...skeletonProps,
 		isWheelDisabled,
-		className: clsx(rootClassName, fieldProps.className),
+		"aria-labelledby": unit ? [ariaLabelledBy, unitId].filter(Boolean).join(" ") : ariaLabelledBy,
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: fieldPropsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsx(FieldErrorView, {})]
@@ -39,9 +44,15 @@ var NumberField = flowComponent("NumberField", (props) => {
 					color: "secondary",
 					children: [/* @__PURE__ */ jsx(IconChevronDown, {}), /* @__PURE__ */ jsx(IconMinus, { className: NumberField_module_default.coarsePointerIcon })]
 				}),
-				/* @__PURE__ */ jsx(Aria.Input, {
-					className: NumberField_module_default.input,
-					ref
+				/* @__PURE__ */ jsxs("div", {
+					className: NumberField_module_default.inputContainer,
+					children: [/* @__PURE__ */ jsx(Aria.Input, {
+						className: NumberField_module_default.input,
+						ref
+					}), unit && /* @__PURE__ */ jsx(NumberFieldUnit, {
+						id: unitId,
+						unit
+					})]
 				}),
 				/* @__PURE__ */ jsxs(Button, {
 					ariaSlot: "increment",

package/dist/js/packages/components/src/components/NumberField/NumberField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <Aria.Input className={styles.input} ref={ref} />\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAK,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACa;EACjB,WAAW,KAAK,eAAe,WAAW,SAAS;EAHrD,UAAA,CAKE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAW,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAW,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,oBAAC,KAAK,OAAN;KAAY,WAAW,2BAAO;KAAY;IAAM,CAAA;IAChD,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAW,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}
+{"version":3,"file":"NumberField.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren, useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { NumberFieldUnit } from \"./components/NumberFieldUnit\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /**\n   * A unit displayed after the number, for units `Intl.NumberFormat` does not\n   * support (e.g. \"MiB\"). For supported units, use `formatOptions` instead.\n   */\n  unit?: string;\n}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    unit,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const unitId = useId();\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      {...skeletonProps}\n      isWheelDisabled={isWheelDisabled}\n      aria-labelledby={\n        unit\n          ? [ariaLabelledBy, unitId].filter(Boolean).join(\" \")\n          : ariaLabelledBy\n      }\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <div className={styles.inputContainer}>\n          <Aria.Input className={styles.input} ref={ref} />\n          {unit && <NumberFieldUnit id={unitId} unit={unit} />}\n        </div>\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,MACA,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,SAAS,MAAM;CAErB,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,kBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAKA,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACJ,GAAI;EACa;EACjB,mBACE,OACI,CAAC,gBAAgB,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,IACjD;EAEN,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EAVvD,UAAA,CAYE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAWC,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAWA,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,qBAAC,OAAD;KAAK,WAAWA,2BAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAY,WAAWA,2BAAO;MAAY;KAAM,CAAA,GAC/C,QAAQ,oBAAC,iBAAD;MAAiB,IAAI;MAAc;KAAO,CAAA,CAChD;;IACL,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAWA,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}

package/dist/js/packages/components/src/components/NumberField/NumberField.module.mjs

@@ -2,20 +2,30 @@
 /* */
 //#region src/components/NumberField/NumberField.module.scss
 var group = "flow--number-field--group";
+var inputContainer = "flow--number-field--input-container";
 var input = "flow--number-field--input";
+var unitOverlay = "flow--number-field--unit-overlay";
 var readonly = "flow--number-field--readonly";
+var unitClip = "flow--number-field--unit-clip";
+var unitSpacer = "flow--number-field--unit-spacer";
 var decrementButton = "flow--number-field--decrement-button";
 var incrementButton = "flow--number-field--increment-button";
 var coarsePointerIcon = "flow--number-field--coarse-pointer-icon";
 var NumberField_module_default = {
 	group,
+	inputContainer,
 	input,
+	unitOverlay,
 	readonly,
+	"skeleton-surface-shimmer": "flow--number-field--skeleton-surface-shimmer",
+	unitClip,
+	unitSpacer,
 	decrementButton,
 	incrementButton,
-	coarsePointerIcon
+	coarsePointerIcon,
+	"skeleton-text-shimmer": "flow--number-field--skeleton-text-shimmer"
 };
 //#endregion
-export { coarsePointerIcon, decrementButton, NumberField_module_default as default, group, incrementButton, input, readonly };
+export { coarsePointerIcon, decrementButton, NumberField_module_default as default, group, incrementButton, input, inputContainer, readonly, unitClip, unitOverlay, unitSpacer };
 
 //# sourceMappingURL=NumberField.module.mjs.map

package/dist/js/packages/components/src/components/NumberField/NumberField.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.module.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.group {\n  order: 2;\n  display: grid;\n  grid-template-columns: 1fr max-content;\n  grid-template-areas:\n    \"input increment\"\n    \"input decrement\";\n\n  .input {\n    grid-area: input;\n\n    @include formControl.formControl();\n  }\n\n  .decrementButton {\n    grid-area: decrement;\n  }\n\n  .incrementButton {\n    grid-area: increment;\n  }\n\n  .decrementButton,\n  .incrementButton {\n    border-width: var(--form-control--border-width);\n    border-color: var(--form-control--border-color--default);\n    border-style: solid;\n  }\n\n  &[aria-invalid] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--invalid);\n    }\n  }\n\n  &[data-focus-within] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--focused);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--disabled);\n    }\n  }\n\n  &:has(.input:read-only):not([aria-disabled=\"true\"]) {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--default);\n    }\n  }\n}\n\n@media (pointer: fine) {\n  .group {\n    .input {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    .incrementButton,\n    .decrementButton {\n      border-inline-start: none;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      padding-block: 0;\n\n      .coarsePointerIcon {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n    }\n\n    .incrementButton {\n      border-block-end: none;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n@media (pointer: coarse) {\n  .group {\n    grid-template-columns: auto 1fr auto;\n    grid-template-areas: \"decrement input increment\";\n    max-width: 100%;\n\n    .input {\n      border-radius: 0;\n      min-width: 0;\n    }\n\n    .decrementButton,\n    .incrementButton {\n      padding-inline: var(--button--padding-icon-only);\n\n      .coarsePointerIcon {\n        width: var(--icon--size--m);\n        height: var(--icon--size--m);\n      }\n\n      // Hides every icon the stepper buttons render except the coarse-pointer\n      // one — Button's own pending/success/failure icons included, and those\n      // share no class with the chevrons.\n      // stylelint-disable-next-line selector-max-type -- see above\n      svg:not(.coarsePointerIcon) {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-inline-end: none;\n    }\n\n    .incrementButton {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-inline-start: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NumberField.module.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.group {\n  order: 2;\n  display: grid;\n  grid-template-columns: 1fr max-content;\n  grid-template-areas:\n    \"input increment\"\n    \"input decrement\";\n\n  .inputContainer {\n    grid-area: input;\n    display: grid;\n    // Without it the column takes the input's intrinsic width\n    grid-template-columns: minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  .input,\n  .unitOverlay {\n    grid-area: 1 / 1;\n  }\n\n  .input {\n    @include formControl.formControl();\n  }\n\n  // Mirrors the input's box so the text lines up with the input text\n  .unitOverlay {\n    @include formControl.formBorder();\n    @include formControl.formOutline();\n\n    // Grid items paint in `order`; formControl moves the input to 2\n    order: 2;\n    border-color: transparent;\n    color: var(--form-control--content-color--default);\n    white-space: pre;\n    pointer-events: none;\n    contain: inline-size;\n\n    &[data-empty] {\n      visibility: hidden;\n    }\n  }\n\n  // The input clips its text at the content box, `overflow` clips at the\n  // padding box — so the overlay keeps the padding and clips one level deeper\n  .unitClip {\n    display: block;\n    overflow: hidden;\n  }\n\n  .unitSpacer {\n    visibility: hidden;\n  }\n\n  &[aria-disabled=\"true\"] .unitOverlay {\n    color: var(--form-control--content-color--disabled);\n  }\n\n  .decrementButton {\n    grid-area: decrement;\n  }\n\n  .incrementButton {\n    grid-area: increment;\n  }\n\n  .decrementButton,\n  .incrementButton {\n    border-width: var(--form-control--border-width);\n    border-color: var(--form-control--border-color--default);\n    border-style: solid;\n  }\n\n  &[aria-invalid] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--invalid);\n    }\n  }\n\n  &[data-focus-within] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--focused);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--disabled);\n    }\n  }\n\n  &:has(.input:read-only):not([aria-disabled=\"true\"]) {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--default);\n    }\n  }\n\n  /* Skeleton: input and stepper buttons form one surface */\n  @include formControl.formSkeleton;\n}\n\n@media (pointer: fine) {\n  .group {\n    .input {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    .incrementButton,\n    .decrementButton {\n      border-inline-start: none;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      padding-block: 0;\n\n      .coarsePointerIcon {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n    }\n\n    .incrementButton {\n      border-block-end: none;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n@media (pointer: coarse) {\n  .group {\n    grid-template-columns: auto 1fr auto;\n    grid-template-areas: \"decrement input increment\";\n    max-width: 100%;\n\n    .input {\n      border-radius: 0;\n      min-width: 0;\n    }\n\n    .decrementButton,\n    .incrementButton {\n      padding-inline: var(--button--padding-icon-only);\n\n      .coarsePointerIcon {\n        width: var(--icon--size--m);\n        height: var(--icon--size--m);\n      }\n\n      // Hides every icon the stepper buttons render except the coarse-pointer\n      // one — Button's own pending/success/failure icons included, and those\n      // share no class with the chevrons.\n      // stylelint-disable-next-line selector-max-type -- see above\n      svg:not(.coarsePointerIcon) {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-inline-end: none;\n    }\n\n    .incrementButton {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-inline-start: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/NumberField/components/NumberFieldUnit.mjs

@@ -0,0 +1,36 @@
+"use client"
+/* */
+import NumberField_module_default from "../NumberField.module.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/NumberField/components/NumberFieldUnit.tsx
+/**
+* React-aria cannot parse a unit `Intl.NumberFormat` does not know, so the unit
+* is drawn over the input instead of being part of its value. An invisible copy
+* of the input text pushes it right behind the number. The input's name
+* references the unit, like a unit written into the label.
+*/
+var NumberFieldUnit = (props) => {
+	const { id, unit } = props;
+	const inputValue = useContext(Aria.NumberFieldStateContext)?.inputValue;
+	return /* @__PURE__ */ jsx("span", {
+		className: NumberField_module_default.unitOverlay,
+		"data-empty": !inputValue || void 0,
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: NumberField_module_default.unitClip,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: NumberField_module_default.unitSpacer,
+				children: [inputValue, " "]
+			}), /* @__PURE__ */ jsx("span", {
+				id,
+				children: unit
+			})]
+		})
+	});
+};
+//#endregion
+export { NumberFieldUnit };
+
+//# sourceMappingURL=NumberFieldUnit.mjs.map

package/dist/js/packages/components/src/components/NumberField/components/NumberFieldUnit.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldUnit.mjs","names":["styles"],"sources":["../../../../../../../../src/components/NumberField/components/NumberFieldUnit.tsx"],"sourcesContent":["import { type FC, useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../NumberField.module.scss\";\n\ninterface Props {\n  id: string;\n  unit: string;\n}\n\n/**\n * React-aria cannot parse a unit `Intl.NumberFormat` does not know, so the unit\n * is drawn over the input instead of being part of its value. An invisible copy\n * of the input text pushes it right behind the number. The input's name\n * references the unit, like a unit written into the label.\n */\nexport const NumberFieldUnit: FC<Props> = (props) => {\n  const { id, unit } = props;\n  const inputValue = useContext(Aria.NumberFieldStateContext)?.inputValue;\n\n  return (\n    <span\n      className={styles.unitOverlay}\n      data-empty={!inputValue || undefined}\n      aria-hidden\n    >\n      <span className={styles.unitClip}>\n        <span className={styles.unitSpacer}>{inputValue} </span>\n        <span id={id}>{unit}</span>\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,IAAI,SAAS;CACrB,MAAM,aAAa,WAAW,KAAK,uBAAuB,CAAC,EAAE;CAE7D,OACE,oBAAC,QAAD;EACE,WAAWA,2BAAO;EAClB,cAAY,CAAC,cAAc,KAAA;EAC3B,eAAA;EAEA,UAAA,qBAAC,QAAD;GAAM,WAAWA,2BAAO;GAAxB,UAAA,CACE,qBAAC,QAAD;IAAM,WAAWA,2BAAO;IAAxB,UAAA,CAAqC,YAAW,GAAO;GACvD,CAAA,GAAA,oBAAC,QAAD;IAAU;IAAK,UAAA;GAAW,CAAA,CACtB;;CACF,CAAA;AAEV"}

package/dist/js/packages/components/src/components/Option/Option.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.mjs","names":[],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n  extends\n    Omit<Aria.ListBoxItemProps, \"children\" | \"value\" | \"id\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * The value this option contributes to the field's selection, and the key\n   * `defaultValue` / `value` of the surrounding field target.\n   *\n   * Defaults to `textValue`, which itself defaults to the text among the\n   * option's children — element children such as a `Badge` do not contribute,\n   * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n   * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n   * the display text, or when the children carry no text at all.\n   */\n  value?: string | number;\n}\n\n/**\n * The key an option contributes to its collection: an explicit `value`, else\n * the `textValue`, else the text among the children. Shared with the props\n * context that routes options through a field's tunnel, so both derive the same\n * identity for one option.\n */\nexport const getOptionValue = (\n  props: Pick<OptionProps, \"value\" | \"textValue\" | \"children\">,\n): string | number | undefined =>\n  props.value ?? props.textValue ?? extractTextFromChildren(props.children);\n\n/** @flr-generate all */\nexport const Option = flowComponent(\"Option\", (props) => {\n  const {\n    className,\n    children,\n    textValue = extractTextFromChildren(children),\n    // Derived through `getOptionValue` below; destructured only to keep it out\n    // of the props spread onto the react-aria item.\n    value: valueIgnored,\n    ref,\n    ...rest\n  } = props;\n\n  const value = getOptionValue(props);\n\n  useWarnMissingValue(value === undefined);\n\n  const rootClassName = clsx(styles.option, className);\n  const hasChildren = Children.count(children) >= 1;\n\n  return (\n    <Aria.ListBoxItem\n      className={rootClassName}\n      ref={ref}\n      id={value}\n      {...rest}\n      textValue={textValue}\n    >\n      <span className={styles.content}>\n        {hasChildren ? children : textValue}\n      </span>\n      <IconCheck aria-hidden className={styles.checkMark} />\n    </Aria.ListBoxItem>\n  );\n});\n\n/*\n * Without an `id`, react-aria gives the item a key off a render-order counter\n * (`react-aria-1`). That key is what the field reports as its selected value\n * and what `defaultValue` has to match, so an option without a `value` silently\n * submits a meaningless string and cannot be preselected — and the key shifts\n * when unrelated markup around it changes. react-aria warns about the missing\n * `textValue` in this situation but says nothing about the key, which is the\n * expensive half (#3028).\n *\n * Warn in an effect rather than during render, so a double render in StrictMode\n * does not log twice; the ref keeps it to once per option.\n */\nconst useWarnMissingValue = (isMissing: boolean): void => {\n  const hasWarned = useRef(false);\n\n  useEffect(() => {\n    if (!isMissing || hasWarned.current) {\n      return;\n    }\n\n    hasWarned.current = true;\n    console.error(\n      \"An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.\",\n    );\n  }, [isMissing]);\n};\n\nexport default Option;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,IAAa,kBACX,UAEA,MAAM,SAAS,MAAM,aAAa,wBAAwB,MAAM,QAAQ;;AAG1E,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,YAAY,wBAAwB,QAAQ,GAG5C,OAAO,cACP,KACA,GAAG,SACD;CAEJ,MAAM,QAAQ,eAAe,KAAK;CAElC,oBAAoB,UAAU,KAAA,CAAS;CAEvC,MAAM,gBAAgB,KAAK,sBAAO,QAAQ,SAAS;CACnD,MAAM,cAAc,SAAS,MAAM,QAAQ,KAAK;CAEhD,OACE,qBAAC,KAAK,aAAN;EACE,WAAW;EACN;EACL,IAAI;EACJ,GAAI;EACO;EALb,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAW,sBAAO;GACrB,UAAA,cAAc,WAAW;EACtB,CAAA,GACN,oBAAC,WAAD;GAAW,eAAA;GAAY,WAAW,sBAAO;EAAY,CAAA,CACrC;;AAEtB,CAAC;AAcD,IAAM,uBAAuB,cAA6B;CACxD,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU,SAC1B;EAGF,UAAU,UAAU;EACpB,QAAQ,MACN,uLACF;CACF,GAAG,CAAC,SAAS,CAAC;AAChB"}
+{"version":3,"file":"Option.mjs","names":["styles"],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n  extends\n    Omit<Aria.ListBoxItemProps, \"children\" | \"value\" | \"id\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * The value this option contributes to the field's selection, and the key\n   * `defaultValue` / `value` of the surrounding field target.\n   *\n   * Defaults to `textValue`, which itself defaults to the text among the\n   * option's children — element children such as a `Badge` do not contribute,\n   * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n   * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n   * the display text, or when the children carry no text at all.\n   */\n  value?: string | number;\n}\n\n/**\n * The key an option contributes to its collection: an explicit `value`, else\n * the `textValue`, else the text among the children. Shared with the props\n * context that routes options through a field's tunnel, so both derive the same\n * identity for one option.\n */\nexport const getOptionValue = (\n  props: Pick<OptionProps, \"value\" | \"textValue\" | \"children\">,\n): string | number | undefined =>\n  props.value ?? props.textValue ?? extractTextFromChildren(props.children);\n\n/** @flr-generate all */\nexport const Option = flowComponent(\"Option\", (props) => {\n  const {\n    className,\n    children,\n    textValue = extractTextFromChildren(children),\n    // Derived through `getOptionValue` below; destructured only to keep it out\n    // of the props spread onto the react-aria item.\n    value: valueIgnored,\n    ref,\n    ...rest\n  } = props;\n\n  const value = getOptionValue(props);\n\n  useWarnMissingValue(value === undefined);\n\n  const rootClassName = clsx(styles.option, className);\n  const hasChildren = Children.count(children) >= 1;\n\n  return (\n    <Aria.ListBoxItem\n      className={rootClassName}\n      ref={ref}\n      id={value}\n      {...rest}\n      textValue={textValue}\n    >\n      <span className={styles.content}>\n        {hasChildren ? children : textValue}\n      </span>\n      <IconCheck aria-hidden className={styles.checkMark} />\n    </Aria.ListBoxItem>\n  );\n});\n\n/*\n * Without an `id`, react-aria gives the item a key off a render-order counter\n * (`react-aria-1`). That key is what the field reports as its selected value\n * and what `defaultValue` has to match, so an option without a `value` silently\n * submits a meaningless string and cannot be preselected — and the key shifts\n * when unrelated markup around it changes. react-aria warns about the missing\n * `textValue` in this situation but says nothing about the key, which is the\n * expensive half (#3028).\n *\n * Warn in an effect rather than during render, so a double render in StrictMode\n * does not log twice; the ref keeps it to once per option.\n */\nconst useWarnMissingValue = (isMissing: boolean): void => {\n  const hasWarned = useRef(false);\n\n  useEffect(() => {\n    if (!isMissing || hasWarned.current) {\n      return;\n    }\n\n    hasWarned.current = true;\n    console.error(\n      \"An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.\",\n    );\n  }, [isMissing]);\n};\n\nexport default Option;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,IAAa,kBACX,UAEA,MAAM,SAAS,MAAM,aAAa,wBAAwB,MAAM,QAAQ;;AAG1E,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,YAAY,wBAAwB,QAAQ,GAG5C,OAAO,cACP,KACA,GAAG,SACD;CAEJ,MAAM,QAAQ,eAAe,KAAK;CAElC,oBAAoB,UAAU,KAAA,CAAS;CAEvC,MAAM,gBAAgB,KAAKA,sBAAO,QAAQ,SAAS;CACnD,MAAM,cAAc,SAAS,MAAM,QAAQ,KAAK;CAEhD,OACE,qBAAC,KAAK,aAAN;EACE,WAAW;EACN;EACL,IAAI;EACJ,GAAI;EACO;EALb,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GACrB,UAAA,cAAc,WAAW;EACtB,CAAA,GACN,oBAAC,WAAD;GAAW,eAAA;GAAY,WAAWA,sBAAO;EAAY,CAAA,CACrC;;AAEtB,CAAC;AAcD,IAAM,uBAAuB,cAA6B;CACxD,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU,SAC1B;EAGF,UAAU,UAAU;EACpB,QAAQ,MACN,uLACF;CACF,GAAG,CAAC,SAAS,CAAC;AAChB"}

package/dist/js/packages/components/src/components/Options/Options.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Options.mjs","names":[],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n  extends\n    Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n    PopoverProps {\n  controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n  const {\n    className,\n    children,\n    controller,\n    renderEmptyState,\n    onAction,\n    ...restPopoverProps\n  } = props;\n\n  const rootClassName = clsx(styles.options, className);\n\n  return (\n    <Popover\n      className={styles.popover}\n      controller={controller}\n      maxHeight={324}\n      {...restPopoverProps}\n    >\n      <Aria.ListBox\n        onAction={onAction}\n        className={rootClassName}\n        renderEmptyState={renderEmptyState}\n      >\n        {children}\n      </Aria.ListBox>\n    </Popover>\n  );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,WAAW,uBAAO;EACN;EACZ,WAAW;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}
+{"version":3,"file":"Options.mjs","names":["styles"],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n  extends\n    Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n    PopoverProps {\n  controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n  const {\n    className,\n    children,\n    controller,\n    renderEmptyState,\n    onAction,\n    ...restPopoverProps\n  } = props;\n\n  const rootClassName = clsx(styles.options, className);\n\n  return (\n    <Popover\n      className={styles.popover}\n      controller={controller}\n      maxHeight={324}\n      {...restPopoverProps}\n    >\n      <Aria.ListBox\n        onAction={onAction}\n        className={rootClassName}\n        renderEmptyState={renderEmptyState}\n      >\n        {children}\n      </Aria.ListBox>\n    </Popover>\n  );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,WAAWA,uBAAO;EACN;EACZ,WAAW;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}

package/dist/js/packages/components/src/components/Overlay/Overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n  OverlayCloseHandler,\n  OverlayOpenHandler,\n  OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\nimport type * as Aria from \"react-aria-components\";\n\nexport interface OverlayProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  /** The controller to control the overlay state. */\n  controller?: OverlayController;\n  /** Whether the overlay can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the overlay is a modal or a light box. */\n  overlayType?: \"Modal\" | \"LightBox\";\n  /** Whether the overlay is open. Use it to control the overlay state. */\n  isOpen?: boolean;\n  /**\n   * Whether the overlay is open initially. Use it for an uncontrolled overlay.\n   *\n   * @default false\n   */\n  isDefaultOpen?: boolean;\n  /** Called when the overlay is opened. */\n  onOpen?: OverlayOpenHandler;\n  /** Called when the overlay is closed. */\n  onClose?: OverlayCloseHandler;\n  /** Called with the new open state whenever the overlay is opened or closed. */\n  onOpenChange?: OverlayOpenStateHandler;\n  /** Whether closing the overlay must be confirmed. */\n  confirmOnClose?: boolean;\n}\n\nexport const Overlay: FC<OverlayProps> = (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    isDismissable = true,\n    className,\n    overlayType = \"Modal\",\n    isDefaultOpen,\n    isOpen: isOpenFromProps,\n    ref,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...controllerOptions\n  } = props;\n\n  const controllerFromContext = useOverlayController(overlayType, {\n    reuseControllerFromContext: true,\n    isDefaultOpen,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n  controller.useUpdateOptions(controllerOptions);\n\n  const isOpen = isOpenFromProps ?? controller.useIsOpen();\n\n  const rootClassName = clsx(styles.overlay, className);\n\n  return (\n    <OverlayContentView\n      onOpenChange={controller.setOpen}\n      isOpen={isOpen}\n      ref={ref}\n      isDismissable={isDismissable}\n      className={rootClassName}\n      aria-labelledby={ariaLabelledBy}\n    >\n      <OverlayContextProvider type=\"Modal\" controller={controller}>\n        {children}\n      </OverlayContextProvider>\n    </OverlayContentView>\n  );\n};\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;AA6CA,IAAa,WAA6B,UAAU;CAClD,MAAM,EACJ,YAAY,qBACZ,UACA,gBAAgB,MAChB,WACA,cAAc,SACd,eACA,QAAQ,iBACR,KACA,mBAAmB,gBACnB,GAAG,sBACD;CAEJ,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAC1C,WAAW,iBAAiB,iBAAiB;CAE7C,MAAM,SAAS,mBAAmB,WAAW,UAAU;CAEvD,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,cAAc,WAAW;EACjB;EACH;EACU;EACf,WAAW;EACX,mBAAiB;EAEjB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAoB;GAC9C;EACqB,CAAA;CACN,CAAA;AAExB"}
+{"version":3,"file":"Overlay.mjs","names":["styles"],"sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n  OverlayCloseHandler,\n  OverlayOpenHandler,\n  OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\nimport type * as Aria from \"react-aria-components\";\n\nexport interface OverlayProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  /** The controller to control the overlay state. */\n  controller?: OverlayController;\n  /** Whether the overlay can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the overlay is a modal or a light box. */\n  overlayType?: \"Modal\" | \"LightBox\";\n  /** Whether the overlay is open. Use it to control the overlay state. */\n  isOpen?: boolean;\n  /**\n   * Whether the overlay is open initially. Use it for an uncontrolled overlay.\n   *\n   * @default false\n   */\n  isDefaultOpen?: boolean;\n  /** Called when the overlay is opened. */\n  onOpen?: OverlayOpenHandler;\n  /** Called when the overlay is closed. */\n  onClose?: OverlayCloseHandler;\n  /** Called with the new open state whenever the overlay is opened or closed. */\n  onOpenChange?: OverlayOpenStateHandler;\n  /** Whether closing the overlay must be confirmed. */\n  confirmOnClose?: boolean;\n}\n\nexport const Overlay: FC<OverlayProps> = (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    isDismissable = true,\n    className,\n    overlayType = \"Modal\",\n    isDefaultOpen,\n    isOpen: isOpenFromProps,\n    ref,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...controllerOptions\n  } = props;\n\n  const controllerFromContext = useOverlayController(overlayType, {\n    reuseControllerFromContext: true,\n    isDefaultOpen,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n  controller.useUpdateOptions(controllerOptions);\n\n  const isOpen = isOpenFromProps ?? controller.useIsOpen();\n\n  const rootClassName = clsx(styles.overlay, className);\n\n  return (\n    <OverlayContentView\n      onOpenChange={controller.setOpen}\n      isOpen={isOpen}\n      ref={ref}\n      isDismissable={isDismissable}\n      className={rootClassName}\n      aria-labelledby={ariaLabelledBy}\n    >\n      <OverlayContextProvider type=\"Modal\" controller={controller}>\n        {children}\n      </OverlayContextProvider>\n    </OverlayContentView>\n  );\n};\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;AA6CA,IAAa,WAA6B,UAAU;CAClD,MAAM,EACJ,YAAY,qBACZ,UACA,gBAAgB,MAChB,WACA,cAAc,SACd,eACA,QAAQ,iBACR,KACA,mBAAmB,gBACnB,GAAG,sBACD;CAEJ,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAC1C,WAAW,iBAAiB,iBAAiB;CAE7C,MAAM,SAAS,mBAAmB,WAAW,UAAU;CAEvD,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,cAAc,WAAW;EACjB;EACH;EACU;EACf,WAAW;EACX,mBAAiB;EAEjB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAoB;GAC9C;EACqB,CAAA;CACN,CAAA;AAExB"}

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs

@@ -7,8 +7,8 @@ import { OverlaySuspenseFallback } from "./OverlaySuspenseFallback.mjs";
 import useKeepBrowserExtensionsInteractive, { isBrowserExtensionNode } from "../../../lib/hooks/dom/useKeepBrowserExtensionsInteractive.mjs";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
-import * as Aria from "react-aria-components";
 import { UNSAFE_PortalProvider } from "react-aria";
+import * as Aria from "react-aria-components";
 //#region src/components/Overlay/components/OverlayContent.tsx
 var overlayContainerAttribute = "data-flow-overlays";
 /**
@@ -17,9 +17,14 @@ var overlayContainerAttribute = "data-flow-overlays";
 * blurs a focused field inside it (#3268). The same heuristic also spares
 * custom elements and shadow hosts the page itself appends, which then render
 * above open overlays.
+*
+* Hidden nodes don't count either: react-aria appends a `display: none`
+* description node whenever a DatePicker's value changes, and moving the
+* container for it on every keystroke resets the segment being typed into.
 */
+var isHiddenNode = (node) => node instanceof HTMLElement && (node.hidden === true || node.style.display === "none");
 var isCoveredByPageContent = (container) => {
-	for (let node = container.nextElementSibling; node; node = node.nextElementSibling) if (!isBrowserExtensionNode(node)) return true;
+	for (let node = container.nextElementSibling; node; node = node.nextElementSibling) if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) return true;
 	return false;
 };
 /**

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n */\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                {children}\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B;;;;;;;;AASlC,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,GAC9B,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAW,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAW,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
+{"version":3,"file":"OverlayContent.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n *\n * Hidden nodes don't count either: react-aria appends a `display: none`\n * description node whenever a DatePicker's value changes, and moving the\n * container for it on every keystroke resets the segment being typed into.\n */\nconst isHiddenNode = (node: Element): boolean =>\n  node instanceof HTMLElement &&\n  (node.hidden === true || node.style.display === \"none\");\n\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                {children}\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B;;;;;;;;;;;;AAalC,IAAM,gBAAgB,SACpB,gBAAgB,gBACf,KAAK,WAAW,QAAQ,KAAK,MAAM,YAAY;AAElD,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,KAAK,CAAC,aAAa,IAAI,GACrD,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAWA,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAWA,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}