@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.40

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
@@ -24,6 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var TabNavigation = flowComponent("TabNavigation", (props) => {
 	const { children, className, ref, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "TabNavigation");
+	const isSkeleton = useSkeletonMode();
 	const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
 	const rootClassName = clsx(TabNavigation_module_default.tabNavigation, hasOverflow && TabNavigation_module_default.collapsed, className);
 	const propsContext = { Link: {
@@ -47,6 +49,7 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 		}), /* @__PURE__ */ jsx("div", {
 			className: TabNavigation_module_default.more,
 			ref: moreRef,
+			inert: isSkeleton || void 0,
 			children: /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [/* @__PURE__ */ jsxs(Button, {
 				unstyled: true,
 				className: clsx(TabNavigation_module_default.moreButton, menuHasCurrentItem && TabNavigation_module_default.current),

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

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul className={styles.list} ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div className={styles.more} ref={moreRef}>\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4B,kBAAS,eAAe;CAE5E,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpB,6BAAO,eACP,eAAe,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,WAAW,6BAAO,KAAO,CAAA;EACvC,WAAW,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,WAAW,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAW,6BAAO;GAAM,KAAK;GAChC,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACT,6BAAO,YACP,sBAAsB,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}
+{"version":3,"file":"TabNavigation.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n  const isSkeleton = useSkeletonMode();\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul className={styles.list} ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div\n        className={styles.more}\n        ref={moreRef}\n        inert={isSkeleton || undefined}\n      >\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4BA,kBAAS,eAAe;CAC5E,MAAM,aAAa,gBAAgB;CAEnC,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpBC,6BAAO,eACP,eAAeA,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,WAAWA,6BAAO,KAAO,CAAA;EACvC,WAAWA,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,WAAWA,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GACE,WAAWA,6BAAO;GAClB,KAAK;GACL,OAAO,cAAc,KAAA;GAErB,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACTA,6BAAO,YACP,sBAAsBA,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}

package/dist/js/packages/components/src/components/TabNavigation/components/LinkContent/LinkContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkContent.mjs","names":[],"sources":["../../../../../../../../../src/components/TabNavigation/components/LinkContent/LinkContent.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { LinkProps } from \"@/components/Link\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { Text } from \"@/components/Text\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport styles from \"../../TabNavigation.module.scss\";\n\ninterface Props {\n  linkProps: Partial<LinkProps>;\n}\n\n/**\n * Renders the content of a link inside the tab navigation and mirrors the link\n * as a menu item into the overflow context menu (via tunnel). The context menu\n * only renders the menu items of the currently collapsed links.\n */\nexport const LinkContent: FC<Props> = (props) => {\n  const { linkProps } = props;\n\n  const {\n    children,\n    href,\n    target,\n    rel,\n    download,\n    hrefLang,\n    ping,\n    referrerPolicy,\n    routerOptions,\n    \"aria-label\": ariaLabel,\n    \"aria-current\": ariaCurrent,\n  } = linkProps;\n\n  return (\n    <>\n      <Text emulateBoldWidth>\n        <span className={styles.text}>{children}</span>\n      </Text>\n      <UiComponentTunnelEntry id=\"menuItems\" component=\"TabNavigation\">\n        <MenuItem\n          aria-current={ariaCurrent}\n          href={href}\n          target={target}\n          rel={rel}\n          download={download}\n          hrefLang={hrefLang}\n          ping={ping}\n          referrerPolicy={referrerPolicy}\n          routerOptions={routerOptions}\n          aria-label={ariaLabel}\n        >\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default LinkContent;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,cAAc;CAEtB,MAAM,EACJ,UACA,MACA,QACA,KACA,UACA,UACA,MACA,gBACA,eACA,cAAc,WACd,gBAAgB,gBACd;CAEJ,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,kBAAA;EACJ,UAAA,oBAAC,QAAD;GAAM,WAAW,6BAAO;GAAO;EAAe,CAAA;CAC1C,CAAA,GACN,oBAAC,wBAAD;EAAwB,IAAG;EAAY,WAAU;EAC/C,UAAA,oBAAC,UAAD;GACE,gBAAc;GACR;GACE;GACH;GACK;GACA;GACJ;GACU;GACD;GACf,cAAY;GAEX;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}
+{"version":3,"file":"LinkContent.mjs","names":["_Fragment","styles"],"sources":["../../../../../../../../../src/components/TabNavigation/components/LinkContent/LinkContent.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { LinkProps } from \"@/components/Link\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { Text } from \"@/components/Text\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport styles from \"../../TabNavigation.module.scss\";\n\ninterface Props {\n  linkProps: Partial<LinkProps>;\n}\n\n/**\n * Renders the content of a link inside the tab navigation and mirrors the link\n * as a menu item into the overflow context menu (via tunnel). The context menu\n * only renders the menu items of the currently collapsed links.\n */\nexport const LinkContent: FC<Props> = (props) => {\n  const { linkProps } = props;\n\n  const {\n    children,\n    href,\n    target,\n    rel,\n    download,\n    hrefLang,\n    ping,\n    referrerPolicy,\n    routerOptions,\n    \"aria-label\": ariaLabel,\n    \"aria-current\": ariaCurrent,\n  } = linkProps;\n\n  return (\n    <>\n      <Text emulateBoldWidth>\n        <span className={styles.text}>{children}</span>\n      </Text>\n      <UiComponentTunnelEntry id=\"menuItems\" component=\"TabNavigation\">\n        <MenuItem\n          aria-current={ariaCurrent}\n          href={href}\n          target={target}\n          rel={rel}\n          download={download}\n          hrefLang={hrefLang}\n          ping={ping}\n          referrerPolicy={referrerPolicy}\n          routerOptions={routerOptions}\n          aria-label={ariaLabel}\n        >\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default LinkContent;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,cAAc;CAEtB,MAAM,EACJ,UACA,MACA,QACA,KACA,UACA,UACA,MACA,gBACA,eACA,cAAc,WACd,gBAAgB,gBACd;CAEJ,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,kBAAA;EACJ,UAAA,oBAAC,QAAD;GAAM,WAAWC,6BAAO;GAAO;EAAe,CAAA;CAC1C,CAAA,GACN,oBAAC,wBAAD;EAAwB,IAAG;EAAY,WAAU;EAC/C,UAAA,oBAAC,UAAD;GACE,gBAAc;GACR;GACE;GACH;GACK;GACA;GACJ;GACU;GACD;GACf,cAAY;GAEX;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}

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

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<\n  Aria.TableProps,\n  \"render\" | \"className\" | \"style\"\n> & {\n  /** The vertical alignment of the table cells content. */\n  verticalAlign?: \"top\" | \"middle\";\n  /**\n   * The column-sizing algorithm of the table. Use \"fixed\" together with column\n   * widths to enforce exact widths. @default \"auto\"\n   */\n  layout?: \"auto\" | \"fixed\";\n  /**\n   * The minimum width of the table. Below this width the table scrolls\n   * horizontally instead of shrinking its columns.\n   */\n  minWidth?: number | string;\n  /** The elements class name. */\n  className?: string;\n};\n\n/** @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n  const {\n    children,\n    className,\n    verticalAlign = \"top\",\n    layout = \"auto\",\n    minWidth,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.table,\n    verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n    styles[`layout-${layout}`],\n    className,\n  );\n\n  return (\n    <div className={styles.tableContainer}>\n      <div className={styles.tableScrollArea} style={{ minWidth }}>\n        <Aria.Table className={rootClassName} {...rest}>\n          {children}\n        </Aria.Table>\n      </div>\n    </div>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;AA0BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,kBAAkB,SAAS,qBAAO,kBAAkB,kBACpD,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAW,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IAAY,WAAW;IAAe,GAAI;IACvC;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<\n  Aria.TableProps,\n  \"render\" | \"className\" | \"style\"\n> & {\n  /** The vertical alignment of the table cells content. */\n  verticalAlign?: \"top\" | \"middle\";\n  /**\n   * The column-sizing algorithm of the table. Use \"fixed\" together with column\n   * widths to enforce exact widths. @default \"auto\"\n   */\n  layout?: \"auto\" | \"fixed\";\n  /**\n   * The minimum width of the table. Below this width the table scrolls\n   * horizontally instead of shrinking its columns.\n   */\n  minWidth?: number | string;\n  /** The elements class name. */\n  className?: string;\n};\n\n/** @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n  const {\n    children,\n    className,\n    verticalAlign = \"top\",\n    layout = \"auto\",\n    minWidth,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.table,\n    verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n    styles[`layout-${layout}`],\n    className,\n  );\n\n  return (\n    <div className={styles.tableContainer}>\n      <div className={styles.tableScrollArea} style={{ minWidth }}>\n        <Aria.Table className={rootClassName} {...rest}>\n          {children}\n        </Aria.Table>\n      </div>\n    </div>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;AA0BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,OACP,kBAAkB,SAASA,qBAAO,kBAAkB,kBACpDA,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAWA,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAWA,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IAAY,WAAW;IAAe,GAAI;IACvC;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}

package/dist/js/packages/components/src/components/Table/components/TableBody/TableBody.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableBody/TableBody.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableBodyProps = Aria.TableBodyProps<never>;\n\n/** @flr-generate all */\nexport const TableBody: FC<TableBodyProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.body, className);\n\n  return (\n    <Aria.TableBody className={rootClassName} {...rest}>\n      {children}\n    </Aria.TableBody>\n  );\n};\n\nexport default TableBody;\n"],"mappings":";;;;;;;;AAQA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAK,qBAAO,MAAM,SAAS;CAEjD,OACE,oBAAC,KAAK,WAAN;EAAgB,WAAW;EAAe,GAAI;EAC3C;CACa,CAAA;AAEpB"}
+{"version":3,"file":"TableBody.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableBody/TableBody.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableBodyProps = Aria.TableBodyProps<never>;\n\n/** @flr-generate all */\nexport const TableBody: FC<TableBodyProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.body, className);\n\n  return (\n    <Aria.TableBody className={rootClassName} {...rest}>\n      {children}\n    </Aria.TableBody>\n  );\n};\n\nexport default TableBody;\n"],"mappings":";;;;;;;;AAQA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,MAAM,SAAS;CAEjD,OACE,oBAAC,KAAK,WAAN;EAAgB,WAAW;EAAe,GAAI;EAC3C;CACa,CAAA;AAEpB"}

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /** Use cell as row header */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>{children}</Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,MACP,oBAAoB,WAClB,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,UACJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;EAAI;CAAmB,CAAA;CAG1E,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EACxC,UAAA;CACU,CAAA;CAIjB,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACtC,UAAA;CACQ,CAAA;AAEf"}
+{"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /** Use cell as row header */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>{children}</Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,UACJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;EAAI;CAAmB,CAAA;CAG1E,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EACxC,UAAA;CACU,CAAA;CAIjB,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACtC,UAAA;CACQ,CAAA;AAEf"}

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    ...rest\n  } = props;\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;AAsBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,GAAG,SACD;CACJ,MAAM,gBAAgB,KACpB,qBAAO,QACP,oBAAoB,WAClB,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAA;EACA,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACX,CAAA;AAEjB"}
+{"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    ...rest\n  } = props;\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;AAsBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,GAAG,SACD;CACJ,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAA;EACA,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACX,CAAA;AAEjB"}

package/dist/js/packages/components/src/components/Table/components/TableHeader/TableHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {children}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAK,qBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C;CACe,CAAA;AAEtB"}
+{"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {children}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C;CACe,CAAA;AAEtB"}

package/dist/js/packages/components/src/components/Table/components/TableRow/TableRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableRow/TableRow.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableRowProps = Aria.RowProps<never> & {\n  /** @internal */\n  footer?: boolean;\n};\n\n/** @flr-generate all */\nexport const TableRow: FC<TableRowProps> = (props) => {\n  const { children, className, footer, ...rest } = props;\n\n  return (\n    <Aria.Row\n      className={(props) =>\n        clsx(\n          styles.row,\n          footer && styles.footer,\n          typeof className === \"function\" ? className(props) : className,\n        )\n      }\n      {...rest}\n    >\n      {children}\n    </Aria.Row>\n  );\n};\n\nexport default TableRow;\n"],"mappings":";;;;;;;;AAWA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,QAAQ,GAAG,SAAS;CAEjD,OACE,oBAAC,KAAK,KAAN;EACE,YAAY,UACV,KACE,qBAAO,KACP,UAAU,qBAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAEF,GAAI;EAEH;CACO,CAAA;AAEd"}
+{"version":3,"file":"TableRow.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableRow/TableRow.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableRowProps = Aria.RowProps<never> & {\n  /** @internal */\n  footer?: boolean;\n};\n\n/** @flr-generate all */\nexport const TableRow: FC<TableRowProps> = (props) => {\n  const { children, className, footer, ...rest } = props;\n\n  return (\n    <Aria.Row\n      className={(props) =>\n        clsx(\n          styles.row,\n          footer && styles.footer,\n          typeof className === \"function\" ? className(props) : className,\n        )\n      }\n      {...rest}\n    >\n      {children}\n    </Aria.Row>\n  );\n};\n\nexport default TableRow;\n"],"mappings":";;;;;;;;AAWA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,QAAQ,GAAG,SAAS;CAEjD,OACE,oBAAC,KAAK,KAAN;EACE,YAAY,UACV,KACEA,qBAAO,KACP,UAAUA,qBAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAEF,GAAI;EAEH;CACO,CAAA;AAEd"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n  extends\n    Omit<Aria.TabsProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n   * how the group is named when the surrounding heading does not already do\n   * it.\n   */\n  \"aria-label\"?: string;\n  /** The id of an element that names the tab list. */\n  \"aria-labelledby\"?: string;\n  /**\n   * The view rendered when the selected tab does not exist. Defaults to a\n   * built-in IllustratedMessage.\n   */\n  tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n  const {\n    children,\n    className,\n    defaultSelectedKey,\n    selectedKey: selectedKeyProps,\n    disabledKeys,\n    ref,\n    onSelectionChange,\n    tabNotFoundView,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(styles.tabs, className);\n  const [selectedKeyState, setSelectedKeyState] = useState<\n    Aria.Key | undefined\n  >(defaultSelectedKey);\n\n  /*\n   * `null`, not `undefined`, keeps `Aria.Tabs` controlled while nothing is\n   * selected yet — see the controlled-from-the-first-render convention in\n   * AGENTS.md. `Aria.TabsProps` narrows `selectedKey` to `Key`, hence the cast\n   * below.\n   */\n  const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;\n\n  const isSsr = useIsSSR();\n\n  return (\n    <>\n      {children}\n      <Aria.Tabs\n        slot={null}\n        className={rootClassName}\n        {...rest}\n        selectedKey={selectedKey as Aria.Key | undefined}\n        onSelectionChange={(key) => {\n          setSelectedKeyState(key);\n          if (onSelectionChange) {\n            onSelectionChange(key);\n          }\n        }}\n        disabledKeys={disabledKeys}\n        ref={ref}\n      >\n        <TabList\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          selection={selectedKey}\n          onContextMenuSelectionChange={(key) => {\n            setSelectedKeyState(key);\n            if (onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          disabledKeys={disabledKeys}\n        />\n        <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n        {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n      </Aria.Tabs>\n    </>\n  );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAK,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAQpB,MAAM,cAAc,oBAAoB,oBAAoB;CAE5D,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}
+{"version":3,"file":"Tabs.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n  extends\n    Omit<Aria.TabsProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n   * how the group is named when the surrounding heading does not already do\n   * it.\n   */\n  \"aria-label\"?: string;\n  /** The id of an element that names the tab list. */\n  \"aria-labelledby\"?: string;\n  /**\n   * The view rendered when the selected tab does not exist. Defaults to a\n   * built-in IllustratedMessage.\n   */\n  tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n  const {\n    children,\n    className,\n    defaultSelectedKey,\n    selectedKey: selectedKeyProps,\n    disabledKeys,\n    ref,\n    onSelectionChange,\n    tabNotFoundView,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(styles.tabs, className);\n  const [selectedKeyState, setSelectedKeyState] = useState<\n    Aria.Key | undefined\n  >(defaultSelectedKey);\n\n  /*\n   * `null`, not `undefined`, keeps `Aria.Tabs` controlled while nothing is\n   * selected yet — see the controlled-from-the-first-render convention in\n   * AGENTS.md. `Aria.TabsProps` narrows `selectedKey` to `Key`, hence the cast\n   * below.\n   */\n  const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;\n\n  const isSsr = useIsSSR();\n\n  return (\n    <>\n      {children}\n      <Aria.Tabs\n        slot={null}\n        className={rootClassName}\n        {...rest}\n        selectedKey={selectedKey as Aria.Key | undefined}\n        onSelectionChange={(key) => {\n          setSelectedKeyState(key);\n          if (onSelectionChange) {\n            onSelectionChange(key);\n          }\n        }}\n        disabledKeys={disabledKeys}\n        ref={ref}\n      >\n        <TabList\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          selection={selectedKey}\n          onContextMenuSelectionChange={(key) => {\n            setSelectedKeyState(key);\n            if (onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          disabledKeys={disabledKeys}\n        />\n        <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n        {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n      </Aria.Tabs>\n    </>\n  );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAQpB,MAAM,cAAc,oBAAoB,oBAAoB;CAE5D,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAAC,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}

package/dist/js/packages/components/src/components/Tabs/components/FallbackTab/FallbackTab.mjs

@@ -6,7 +6,7 @@ import { Text } from "../../../Text/Text.mjs";
 import { Heading } from "../../../Heading/Heading.mjs";
 import { IllustratedMessage } from "../../../IllustratedMessage/IllustratedMessage.mjs";
 import Tabs_module_default from "../../Tabs.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_32.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_33.locale.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tabs/components/FallbackTab/FallbackTab.tsx
 var FallbackTab = (props) => {

package/dist/js/packages/components/src/components/Tabs/components/FallbackTab/FallbackTab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackTab.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/FallbackTab/FallbackTab.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Tabs.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../locales/*.locale.json\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { Heading } from \"@/components/Heading\";\nimport { Text } from \"@/components/Text\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { TabsProps } from \"@/components/Tabs\";\n\ntype FallbackTabProps = Pick<TabsProps, \"tabNotFoundView\">;\n\nexport const FallbackTab: FC<FallbackTabProps> = (props) => {\n  const { tabNotFoundView } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Tabs\");\n\n  if (tabNotFoundView) {\n    return <div className={styles.fallbackTab}>{tabNotFoundView}</div>;\n  }\n\n  return (\n    <IllustratedMessage className={styles.fallbackTab} color=\"unavailable\">\n      <AlertIcon status=\"unavailable\" />\n      <Heading>{stringFormatter.format(\"fallbackTab.heading\")}</Heading>\n      <Text>{stringFormatter.format(\"fallbackTab.text\")}</Text>\n    </IllustratedMessage>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,oBAAoB;CAE5B,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CAEnE,IAAI,iBACF,OAAO,oBAAC,OAAD;EAAK,WAAW,oBAAO;EAAc,UAAA;CAAqB,CAAA;CAGnE,OACE,qBAAC,oBAAD;EAAoB,WAAW,oBAAO;EAAa,OAAM;EAAzD,UAAA;GACE,oBAAC,WAAD,EAAW,QAAO,cAAe,CAAA;GACjC,oBAAC,SAAD,EAAA,UAAU,gBAAgB,OAAO,qBAAqB,EAAW,CAAA;GACjE,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,kBAAkB,EAAQ,CAAA;EACtC;;AAExB"}
+{"version":3,"file":"FallbackTab.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/Tabs/components/FallbackTab/FallbackTab.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Tabs.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../locales/*.locale.json\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { Heading } from \"@/components/Heading\";\nimport { Text } from \"@/components/Text\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { TabsProps } from \"@/components/Tabs\";\n\ntype FallbackTabProps = Pick<TabsProps, \"tabNotFoundView\">;\n\nexport const FallbackTab: FC<FallbackTabProps> = (props) => {\n  const { tabNotFoundView } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Tabs\");\n\n  if (tabNotFoundView) {\n    return <div className={styles.fallbackTab}>{tabNotFoundView}</div>;\n  }\n\n  return (\n    <IllustratedMessage className={styles.fallbackTab} color=\"unavailable\">\n      <AlertIcon status=\"unavailable\" />\n      <Heading>{stringFormatter.format(\"fallbackTab.heading\")}</Heading>\n      <Text>{stringFormatter.format(\"fallbackTab.text\")}</Text>\n    </IllustratedMessage>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,oBAAoB;CAE5B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,IAAI,iBACF,OAAO,oBAAC,OAAD;EAAK,WAAWC,oBAAO;EAAc,UAAA;CAAqB,CAAA;CAGnE,OACE,qBAAC,oBAAD;EAAoB,WAAWA,oBAAO;EAAa,OAAM;EAAzD,UAAA;GACE,oBAAC,WAAD,EAAW,QAAO,cAAe,CAAA;GACjC,oBAAC,SAAD,EAAA,UAAU,gBAAgB,OAAO,qBAAqB,EAAW,CAAA;GACjE,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,kBAAkB,EAAQ,CAAA;EACtC;;AAExB"}

package/dist/js/packages/components/src/components/Tabs/components/Tab/Tab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport type { TabPanelRenderProps } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Tabs.module.scss\";\nimport clsx from \"clsx\";\nimport { TabContextProvider } from \"@/components/Tabs/components/Tab/context\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Activity } from \"@/components/Activity\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabProps\n  extends Omit<Aria.TabPanelProps, \"children\">, PropsWithChildren {}\n\n/** @flr-generate all */\nexport const Tab: FC<TabProps> = (props) => {\n  const { children, className, id: idFromProps, ...rest } = props;\n\n  const rootClassName = clsx(styles.tabPanel, className);\n\n  const generatedId = useId();\n  const id = idFromProps ?? generatedId;\n\n  const TabPanelRenderer = (props: TabPanelRenderProps): Awaited<ReactNode> => {\n    const isSelected = props.state.selectedKey === id;\n\n    const propsContext: PropsContext = {\n      Content: {\n        wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n      },\n      Section: {\n        wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n      },\n    };\n\n    return (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[isSelected, children]}\n      >\n        {children}\n      </PropsContextProvider>\n    );\n  };\n\n  return (\n    <UiComponentTunnelEntry id=\"Panels\" component=\"Tabs\">\n      <TabContextProvider value={{ id }}>\n        <Aria.TabPanel\n          className={rootClassName}\n          shouldForceMount\n          id={id}\n          {...rest}\n        >\n          {TabPanelRenderer}\n        </Aria.TabPanel>\n      </TabContextProvider>\n    </UiComponentTunnelEntry>\n  );\n};\n\nexport default Tab;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,UAAU,WAAW,IAAI,aAAa,GAAG,SAAS;CAE1D,MAAM,gBAAgB,KAAK,oBAAO,UAAU,SAAS;CAErD,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,eAAe;CAE1B,MAAM,oBAAoB,UAAmD;EAC3E,MAAM,aAAa,MAAM,MAAM,gBAAgB;EAW/C,OACE,oBAAC,sBAAD;GACE,OAAO;IAVT,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;IACA,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;GAKS;GACP,cAAc,CAAC,YAAY,QAAQ;GAElC;EACmB,CAAA;CAE1B;CAEA,OACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,oBAAD;GAAoB,OAAO,EAAE,GAAG;GAC9B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,kBAAA;IACI;IACJ,GAAI;IAEH,UAAA;GACY,CAAA;EACG,CAAA;CACE,CAAA;AAE5B"}
+{"version":3,"file":"Tab.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport type { TabPanelRenderProps } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Tabs.module.scss\";\nimport clsx from \"clsx\";\nimport { TabContextProvider } from \"@/components/Tabs/components/Tab/context\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Activity } from \"@/components/Activity\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabProps\n  extends Omit<Aria.TabPanelProps, \"children\">, PropsWithChildren {}\n\n/** @flr-generate all */\nexport const Tab: FC<TabProps> = (props) => {\n  const { children, className, id: idFromProps, ...rest } = props;\n\n  const rootClassName = clsx(styles.tabPanel, className);\n\n  const generatedId = useId();\n  const id = idFromProps ?? generatedId;\n\n  const TabPanelRenderer = (props: TabPanelRenderProps): Awaited<ReactNode> => {\n    const isSelected = props.state.selectedKey === id;\n\n    const propsContext: PropsContext = {\n      Content: {\n        wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n      },\n      Section: {\n        wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n      },\n    };\n\n    return (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[isSelected, children]}\n      >\n        {children}\n      </PropsContextProvider>\n    );\n  };\n\n  return (\n    <UiComponentTunnelEntry id=\"Panels\" component=\"Tabs\">\n      <TabContextProvider value={{ id }}>\n        <Aria.TabPanel\n          className={rootClassName}\n          shouldForceMount\n          id={id}\n          {...rest}\n        >\n          {TabPanelRenderer}\n        </Aria.TabPanel>\n      </TabContextProvider>\n    </UiComponentTunnelEntry>\n  );\n};\n\nexport default Tab;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,UAAU,WAAW,IAAI,aAAa,GAAG,SAAS;CAE1D,MAAM,gBAAgB,KAAKA,oBAAO,UAAU,SAAS;CAErD,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,eAAe;CAE1B,MAAM,oBAAoB,UAAmD;EAC3E,MAAM,aAAa,MAAM,MAAM,gBAAgB;EAW/C,OACE,oBAAC,sBAAD;GACE,OAAO;IAVT,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;IACA,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;GAKS;GACP,cAAc,CAAC,YAAY,QAAQ;GAElC;EACmB,CAAA;CAE1B;CAEA,OACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,oBAAD;GAAoB,OAAO,EAAE,GAAG;GAC9B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,kBAAA;IACI;IACJ,GAAI;IAEH,UAAA;GACY,CAAA;EACG,CAAA;CACE,CAAA;AAE5B"}

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { IconChevronDown } from "../../../Icon/components/icons/IconChevronDown.mjs";
 import { Button } from "../../../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../../../UiComponentTunnel/UiComponentTunnelExit.mjs";
@@ -17,6 +18,7 @@ import { useMergeRefs } from "use-callback-ref";
 var TabList = (props) => {
 	const { selection, disabledKeys, onContextMenuSelectionChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
 	const titleCollapsedElementId = useId();
+	const isSkeleton = useSkeletonMode();
 	const overflowObserver = useObserveOverflow();
 	const isCollapsed = overflowObserver.isOverflowing;
 	const rootClassName = clsx(TabList_module_default.tabList, isCollapsed && TabList_module_default.collapsed);
@@ -54,11 +56,13 @@ var TabList = (props) => {
 			component: "Tabs"
 		})
 	})] });
+	const showIndicator = !isCollapsed && !isSkeleton && tabIndicator.indicatorStyle;
 	return /* @__PURE__ */ jsxs("div", {
 		className: rootClassName,
 		ref: tabIndicator.rootRef,
+		inert: isSkeleton || void 0,
 		children: [
-			!isCollapsed && tabIndicator.indicatorStyle && /* @__PURE__ */ jsx("div", {
+			showIndicator && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
 				className: clsx(TabList_module_default.activeIndicator, tabIndicator.isAnimated && TabList_module_default.animated),
 				style: tabIndicator.indicatorStyle

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n  selection: Aria.Key | null;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const {\n    selection,\n    disabledKeys,\n    onContextMenuSelectionChange,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n  } = props;\n\n  const titleCollapsedElementId = useId();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n  const tabIndicator = useTabIndicator(isCollapsed);\n\n  const setTitlesRef = useMergeRefs<HTMLDivElement>([\n    overflowObserver.ref,\n    tabIndicator.titlesRef,\n  ]);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      className={styles.titles}\n      ref={setTitlesRef}\n    >\n      <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  return (\n    <div className={rootClassName} ref={tabIndicator.rootRef}>\n      {!isCollapsed && tabIndicator.indicatorStyle && (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            styles.activeIndicator,\n            tabIndicator.isAnimated && styles.animated,\n          )}\n          style={tabIndicator.indicatorStyle}\n        />\n      )}\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,eAAe,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,WAAW,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAG1B,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,KAAK,aAAa;EAAjD,UAAA;GACG,CAAC,eAAe,aAAa,kBAC5B,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACT,uBAAO,iBACP,aAAa,cAAc,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}
+{"version":3,"file":"TabList.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\ninterface Props {\n  selection: Aria.Key | null;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const {\n    selection,\n    disabledKeys,\n    onContextMenuSelectionChange,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n  } = props;\n\n  const titleCollapsedElementId = useId();\n  const isSkeleton = useSkeletonMode();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n  const tabIndicator = useTabIndicator(isCollapsed);\n\n  const setTitlesRef = useMergeRefs<HTMLDivElement>([\n    overflowObserver.ref,\n    tabIndicator.titlesRef,\n  ]);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      className={styles.titles}\n      ref={setTitlesRef}\n    >\n      <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  /* In the mode, no tab shows as selected. */\n  const showIndicator =\n    !isCollapsed && !isSkeleton && tabIndicator.indicatorStyle;\n\n  return (\n    <div\n      className={rootClassName}\n      ref={tabIndicator.rootRef}\n      inert={isSkeleton || undefined}\n    >\n      {showIndicator && (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            styles.activeIndicator,\n            tabIndicator.isAnimated && styles.animated,\n          )}\n          style={tabIndicator.indicatorStyle}\n        />\n      )}\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,aAAa,gBAAgB;CACnC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,eAAeA,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,WAAWA,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAWA,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAI1B,MAAM,gBACJ,CAAC,eAAe,CAAC,cAAc,aAAa;CAE9C,OACE,qBAAC,OAAD;EACE,WAAW;EACX,KAAK,aAAa;EAClB,OAAO,cAAc,KAAA;EAHvB,UAAA;GAKG,iBACC,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACTA,uBAAO,iBACP,aAAa,cAAcA,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { UiComponentTunnelEntry } from "../../../UiComponentTunnel/UiComponentTunnelEntry.mjs";
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { Text } from "../../../Text/Text.mjs";
 import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
 import TabTitle_module_default from "./TabTitle.module.mjs";
@@ -13,7 +14,8 @@ import * as Aria from "react-aria-components";
 var TabTitle = (props) => {
 	const { children, className, ...rest } = props;
 	const { id } = useTabContext();
-	const titleClassName = clsx(TabTitle_module_default.tabTitle, className);
+	const isSkeleton = useSkeletonMode();
+	const titleClassName = clsx(TabTitle_module_default.tabTitle, isSkeleton && TabTitle_module_default.skeleton, className);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UiComponentTunnelEntry, {
 		id: "Titles",
 		component: "Tabs",

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabTitle.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabTitleProps\n  extends\n    Omit<Aria.TabProps, \"children\" | \"id\" | \"isDisabled\">,\n    PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const { id } = useTabContext();\n\n  const titleClassName = clsx(styles.tabTitle, className);\n\n  return (\n    <>\n      <UiComponentTunnelEntry id=\"Titles\" component=\"Tabs\">\n        <Aria.Tab {...rest} id={id} className={titleClassName}>\n          {(p) => (\n            <>\n              <Text emulateBoldWidth>\n                <span className={styles.text}>{children}</span>\n              </Text>\n              <UiComponentTunnelEntry id=\"ActiveTitle\" component=\"Tabs\">\n                {p.isSelected && children}\n              </UiComponentTunnelEntry>\n            </>\n          )}\n        </Aria.Tab>\n      </UiComponentTunnelEntry>\n\n      <UiComponentTunnelEntry id=\"ContextMenuItems\" component=\"Tabs\">\n        <MenuItem {...rest} className={styles.menuItem} id={id}>\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default TabTitle;\n"],"mappings":";;;;;;;;;;;;AAeA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,EAAE,OAAO,cAAc;CAE7B,MAAM,iBAAiB,KAAK,wBAAO,UAAU,SAAS;CAEtD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,KAAK,KAAN;GAAU,GAAI;GAAU;GAAI,WAAW;GACnC,WAAA,MACA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,kBAAA;IACJ,UAAA,oBAAC,QAAD;KAAM,WAAW,wBAAO;KAAO;IAAe,CAAA;GAC1C,CAAA,GACN,oBAAC,wBAAD;IAAwB,IAAG;IAAc,WAAU;IAChD,UAAA,EAAE,cAAc;GACK,CAAA,CACxB,EAAA,CAAA;EAEI,CAAA;CACY,CAAA,GAExB,oBAAC,wBAAD;EAAwB,IAAG;EAAmB,WAAU;EACtD,UAAA,oBAAC,UAAD;GAAU,GAAI;GAAM,WAAW,wBAAO;GAAc;GACjD;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}
+{"version":3,"file":"TabTitle.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TabTitleProps\n  extends\n    Omit<Aria.TabProps, \"children\" | \"id\" | \"isDisabled\">,\n    PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const { id } = useTabContext();\n  const isSkeleton = useSkeletonMode();\n\n  const titleClassName = clsx(\n    styles.tabTitle,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  return (\n    <>\n      <UiComponentTunnelEntry id=\"Titles\" component=\"Tabs\">\n        <Aria.Tab {...rest} id={id} className={titleClassName}>\n          {(p) => (\n            <>\n              <Text emulateBoldWidth>\n                <span className={styles.text}>{children}</span>\n              </Text>\n              <UiComponentTunnelEntry id=\"ActiveTitle\" component=\"Tabs\">\n                {p.isSelected && children}\n              </UiComponentTunnelEntry>\n            </>\n          )}\n        </Aria.Tab>\n      </UiComponentTunnelEntry>\n\n      <UiComponentTunnelEntry id=\"ContextMenuItems\" component=\"Tabs\">\n        <MenuItem {...rest} className={styles.menuItem} id={id}>\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default TabTitle;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,aAAa,gBAAgB;CAEnC,MAAM,iBAAiB,KACrBA,wBAAO,UACP,cAAcA,wBAAO,UACrB,SACF;CAEA,OACE,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,KAAK,KAAN;GAAU,GAAI;GAAU;GAAI,WAAW;GACnC,WAAA,MACA,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,kBAAA;IACJ,UAAA,oBAAC,QAAD;KAAM,WAAWD,wBAAO;KAAO;IAAe,CAAA;GAC1C,CAAA,GACN,oBAAC,wBAAD;IAAwB,IAAG;IAAc,WAAU;IAChD,UAAA,EAAE,cAAc;GACK,CAAA,CACxB,EAAA,CAAA;EAEI,CAAA;CACY,CAAA,GAExB,oBAAC,wBAAD;EAAwB,IAAG;EAAmB,WAAU;EACtD,UAAA,oBAAC,UAAD;GAAU,GAAI;GAAM,WAAWA,wBAAO;GAAc;GACjD;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs

@@ -3,13 +3,15 @@
 //#region src/components/Tabs/components/TabTitle/TabTitle.module.scss
 var tabTitle = "flow--tabs--tab-title";
 var text = "flow--tabs--tab-title--text";
+var skeleton = "flow--tabs--tab-title--skeleton";
 var menuItem = "flow--tabs--tab-title--menu-item";
 var TabTitle_module_default = {
 	tabTitle,
 	text,
+	skeleton,
 	menuItem
 };
 //#endregion
-export { TabTitle_module_default as default, menuItem, tabTitle, text };
+export { TabTitle_module_default as default, menuItem, skeleton, tabTitle, text };
 
 //# sourceMappingURL=TabTitle.module.mjs.map

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n  // The tab's children are the consumer's; a `Text` child renders this span.\n  // stylelint-disable-next-line selector-max-type -- consumer children\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n/* SkeletonMode: no tab shows as selected */\n.tabTitle.skeleton[data-selected] {\n  font-weight: inherit;\n}\n\n.menuItem {\n  // The tab's children are the consumer's; a `Text` child renders this span.\n  // stylelint-disable-next-line selector-max-type -- consumer children\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}

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

@@ -3,9 +3,11 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
 import { EmulatedBoldText } from "../EmulatedBoldText/EmulatedBoldText.mjs";
 import Text_module_default from "./Text.module.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
@@ -14,10 +16,12 @@ import invariant from "invariant";
 /** @flr-generate all */
 var Text = flowComponent("Text", (props) => {
 	const { children, className, elementType = "span", emulateBoldWidth, ref, color = "default", align = "start", wrap, style: styleFromProps, whiteSpace, wordBreak, noLigatures, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(Text_module_default.text, isAlphaColor(color) && Text_module_default[color], align && Text_module_default[`align-${align}`], wrap && Text_module_default[`wrap-${wrap}`], noLigatures && Text_module_default[`no-ligatures`], className);
 	const textProps = {
 		...rest,
-		className: rootClassName
+		className: rootClassName,
+		inert: isSkeleton || void 0
 	};
 	const propsContext = {
 		Link: {
@@ -36,7 +40,10 @@ var Text = flowComponent("Text", (props) => {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Wrap, {
 			if: emulateBoldWidth,
-			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children })
+			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children: /* @__PURE__ */ jsx(SkeletonTextContent, {
+				defaultWidth: "8em",
+				children
+			}) })
 		})
 	});
 	if (!props.slot) return /* @__PURE__ */ jsx(elementType, {

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

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /**\n   * Whether the elements width should match the width it would have with bold\n   * text.\n   */\n  emulateBoldWidth?: boolean;\n  /** The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The text-wrap property of the text. */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /** The white-space property of the text. */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /** The word-break property of the text. */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n  /**\n   * Disables standard and contextual ligatures for predictable, literal text\n   * rendering.\n   */\n  noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    noLigatures,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    noLigatures && styles[`no-ligatures`],\n    className,\n  );\n\n  const textProps = { ...rest, className: rootClassName };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n      color: isAlphaColor(color) ? color : undefined,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = {\n    whiteSpace,\n    wordBreak,\n    ...styleFromProps,\n  };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>{children}</EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,oBAAO,MACP,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,oBAAO,SAAS,UACzB,QAAQ,oBAAO,QAAQ,SACvB,eAAe,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;EAAE,GAAG;EAAM,WAAW;CAAc;CAEtD,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAW,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;EAC1C,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAAC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}
+{"version":3,"file":"Text.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /**\n   * Whether the elements width should match the width it would have with bold\n   * text.\n   */\n  emulateBoldWidth?: boolean;\n  /** The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The text-wrap property of the text. */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /** The white-space property of the text. */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /** The word-break property of the text. */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n  /**\n   * Disables standard and contextual ligatures for predictable, literal text\n   * rendering.\n   */\n  noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    noLigatures,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    noLigatures && styles[`no-ligatures`],\n    className,\n  );\n\n  const textProps = {\n    ...rest,\n    className: rootClassName,\n    inert: isSkeleton || undefined,\n  };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n      color: isAlphaColor(color) ? color : undefined,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = {\n    whiteSpace,\n    wordBreak,\n    ...styleFromProps,\n  };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>\n          <SkeletonTextContent defaultWidth=\"8em\">\n            {children}\n          </SkeletonTextContent>\n        </EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;;;AAiDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,oBAAO,MACP,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAASA,oBAAO,SAAS,UACzB,QAAQA,oBAAO,QAAQ,SACvB,eAAeA,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;EAChB,GAAG;EACH,WAAW;EACX,OAAO,cAAc,KAAA;CACvB;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAWA,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,EAAA,UACE,oBAAC,qBAAD;IAAqB,cAAa;IAC/B;GACkB,CAAA,EACL,CAAA;EACd,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAACC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}

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

@@ -21,11 +21,11 @@ var TextArea = flowComponent("TextArea", (props) => {
 	const { children, placeholder, rows = 5, autoResizeMaxRows = rows, ref, allowVerticalResize, allowHorizontalResize, showCharacterCount, className, onChange, isReadOnly, value, ...rest } = useControlledHostValueProps(props, "");
 	if (allowHorizontalResize !== void 0) warnDeprecation("The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
 	if (allowVerticalResize !== void 0) warnDeprecation("The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TextArea");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "TextArea");
 	let { allowResize } = props;
 	if (allowVerticalResize) allowResize = "vertical";
 	else if (allowHorizontalResize) allowResize = "horizontal";
-	const rootClassName = clsx(fieldProps.className, className);
+	const rootClassName = clsx(wrapperProps.className, className);
 	const inputClassName = clsx(TextArea_module_default.input, typeof allowResize === "boolean" && allowResize ? TextArea_module_default.resize : null, allowResize === "horizontal" ? TextArea_module_default.horizontalResize : allowResize === "vertical" ? TextArea_module_default.verticalResize : null);
 	const handleChange = (v) => {
 		if (isReadOnly) return;
@@ -78,7 +78,7 @@ var TextArea = flowComponent("TextArea", (props) => {
 	]);
 	return /* @__PURE__ */ jsx(Aria.TextField, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		value,
 		className: rootClassName,
 		onChange: handleChange,

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport {\n  type PropsWithChildren,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    showCharacterCount,\n    className,\n    onChange,\n    isReadOnly,\n    value,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  if (allowHorizontalResize !== undefined) {\n    warnDeprecation(\n      \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n    );\n  }\n  if (allowVerticalResize !== undefined) {\n    warnDeprecation(\n      \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"TextArea\");\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const inputClassName = clsx(\n    styles.input,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const handleChange = (v: string) => {\n    if (isReadOnly) {\n      return;\n    }\n\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n  // Derived, so that a value the field never saw typed is counted as well.\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: value.length,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const localRef = useObjectRef(ref);\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  /*\n   * The height depends on the rendered content, so it cannot be a style. It is\n   * synced to the value instead of to the `change` event, because a value the\n   * field never saw typed — an initial value, or a draft loaded into a\n   * controlled field — has to resize it just the same.\n   */\n  useLayoutEffect(() => {\n    const textArea = localRef.current;\n    if (!textArea || !autoResizable || verticallyResizable) {\n      return;\n    }\n    // https://stackoverflow.com/a/60795884\n    textArea.style.height = \"0px\";\n    // + 2 to add border height\n    textArea.style.height = `${textArea.scrollHeight + 2}px`;\n  }, [value, autoResizable, verticallyResizable]);\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      value={value}\n      className={rootClassName}\n      onChange={handleChange}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <Aria.TextArea\n          rows={rows}\n          {...(isReadOnly ? { \"data-readonly\": true } : {})}\n          aria-readonly={isReadOnly}\n          aria-hidden={props[\"aria-hidden\"]}\n          placeholder={placeholder}\n          className={inputClassName}\n          ref={localRef}\n          style={{\n            \"--text-area--rows\": rows,\n            \"--text-area--max-rows\": verticallyResizable\n              ? undefined\n              : autoResizeMaxRows,\n          }}\n        />\n        {showCharacterCount && (\n          <FieldDescription>{charactersCountDescription}</FieldDescription>\n        )}\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,YACA,OACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,IAAI,0BAA0B,KAAA,GAC5B,gBACE,oHACF;CAEF,IAAI,wBAAwB,KAAA,GAC1B,gBACE,kHACF;CAGF,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,UAAU;CAEvC,IAAI,EAAE,gBAAgB;CACtB,IAAI,qBACF,cAAc;MACT,IAAI,uBACT,cAAc;CAGhB,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,IACR;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,YACF;EAGF,IAAI,UACF,SAAS,CAAC;CAEd;CAKA,MAAM,6BAHc,4BAA4B,kBAAS,UAGtB,CAAA,CAAY,OAAO,cAAc;EAClE,OAAO,MAAM;EACb,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;CAEtD,gBAAgB;EACd,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;GAC5B,WAAW;EACb;EAEA,MAAM,wBAAwB;GAC5B,IAAI,CAAC,YAAY,SAAS;GAI1B,IAFsB,SAAS,iBAET,aAAa;IACjC,WAAW,IAAI;IACf,WAAW;GACb;EACF;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,WAAW,aAAa;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,WAAW,aAAa;EACrD;CACF,GAAG,CAAC,OAAO,CAAC;CAQZ,sBAAsB;EACpB,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,qBACjC;EAGF,SAAS,MAAM,SAAS;EAExB,SAAS,MAAM,SAAS,GAAG,SAAS,eAAe,EAAE;CACvD,GAAG;EAAC;EAAO;EAAe;CAAmB,CAAC;CAE9C,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACG;EACP,WAAW;EACX,UAAU;EAEV,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC9D,oBAAC,KAAK,UAAN;KACQ;KACN,GAAK,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC/C,iBAAe;KACf,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,OAAO;MACL,qBAAqB;MACrB,yBAAyB,sBACrB,KAAA,IACA;KACN;IACD,CAAA;IACA,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;IAElE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACR,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"TextArea.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport {\n  type PropsWithChildren,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    showCharacterCount,\n    className,\n    onChange,\n    isReadOnly,\n    value,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  if (allowHorizontalResize !== undefined) {\n    warnDeprecation(\n      \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n    );\n  }\n  if (allowVerticalResize !== undefined) {\n    warnDeprecation(\n      \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n  } = useFieldComponent(props, \"TextArea\");\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const inputClassName = clsx(\n    styles.input,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const handleChange = (v: string) => {\n    if (isReadOnly) {\n      return;\n    }\n\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n  // Derived, so that a value the field never saw typed is counted as well.\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: value.length,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const localRef = useObjectRef(ref);\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  /*\n   * The height depends on the rendered content, so it cannot be a style. It is\n   * synced to the value instead of to the `change` event, because a value the\n   * field never saw typed — an initial value, or a draft loaded into a\n   * controlled field — has to resize it just the same.\n   */\n  useLayoutEffect(() => {\n    const textArea = localRef.current;\n    if (!textArea || !autoResizable || verticallyResizable) {\n      return;\n    }\n    // https://stackoverflow.com/a/60795884\n    textArea.style.height = \"0px\";\n    // + 2 to add border height\n    textArea.style.height = `${textArea.scrollHeight + 2}px`;\n  }, [value, autoResizable, verticallyResizable]);\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      value={value}\n      className={rootClassName}\n      onChange={handleChange}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <Aria.TextArea\n          rows={rows}\n          {...(isReadOnly ? { \"data-readonly\": true } : {})}\n          aria-readonly={isReadOnly}\n          aria-hidden={props[\"aria-hidden\"]}\n          placeholder={placeholder}\n          className={inputClassName}\n          ref={localRef}\n          style={{\n            \"--text-area--rows\": rows,\n            \"--text-area--max-rows\": verticallyResizable\n              ? undefined\n              : autoResizeMaxRows,\n          }}\n        />\n        {showCharacterCount && (\n          <FieldDescription>{charactersCountDescription}</FieldDescription>\n        )}\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,YACA,OACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,IAAI,0BAA0B,KAAA,GAC5B,gBACE,oHACF;CAEF,IAAI,wBAAwB,KAAA,GAC1B,gBACE,kHACF;CAGF,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,UAAU;CAEvC,IAAI,EAAE,gBAAgB;CACtB,IAAI,qBACF,cAAc;MACT,IAAI,uBACT,cAAc;CAGhB,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,iBAAiB,KACrBA,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAcA,wBAAO,SAAS,MAClE,gBAAgB,eACZA,wBAAO,mBACP,gBAAgB,aACdA,wBAAO,iBACP,IACR;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,YACF;EAGF,IAAI,UACF,SAAS,CAAC;CAEd;CAKA,MAAM,6BAHc,4BAA4BC,kBAAS,UAGtB,CAAA,CAAY,OAAO,cAAc;EAClE,OAAO,MAAM;EACb,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;CAEtD,gBAAgB;EACd,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;GAC5B,WAAW;EACb;EAEA,MAAM,wBAAwB;GAC5B,IAAI,CAAC,YAAY,SAAS;GAI1B,IAFsB,SAAS,iBAET,aAAa;IACjC,WAAW,IAAI;IACf,WAAW;GACb;EACF;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,WAAW,aAAa;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,WAAW,aAAa;EACrD;CACF,GAAG,CAAC,OAAO,CAAC;CAQZ,sBAAsB;EACpB,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,qBACjC;EAGF,SAAS,MAAM,SAAS;EAExB,SAAS,MAAM,SAAS,GAAG,SAAS,eAAe,EAAE;CACvD,GAAG;EAAC;EAAO;EAAe;CAAmB,CAAC;CAE9C,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACG;EACP,WAAW;EACX,UAAU;EAEV,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC9D,oBAAC,KAAK,UAAN;KACQ;KACN,GAAK,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC/C,iBAAe;KACf,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,OAAO;MACL,qBAAqB;MACrB,yBAAyB,sBACrB,KAAA,IACA;KACN;IACD,CAAA;IACA,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;IAElE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACR,CAAA;AAEpB,CAAC"}

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

@@ -11,7 +11,7 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import TextField_module_default from "./TextField.module.mjs";
-import __locale_default from "../../../../../_virtual/_33.locale.mjs";
+import __locale_default from "../../../../../_virtual/_34.locale.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,8 +22,8 @@ var TextField = flowComponent("TextField", (props) => {
 	const { className, showCharacterCount, form, placeholder, ref, type: typeFromProps, children, onChange, ...rest } = useControlledHostValueProps(props, "");
 	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
 	const [type, setType] = useState(typeFromProps);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TextField");
-	const rootClassName = clsx(fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "TextField");
+	const rootClassName = clsx(wrapperProps.className, className);
 	const propsContext = {
 		Button: {
 			className: TextField_module_default.button,
@@ -54,7 +54,7 @@ var TextField = flowComponent("TextField", (props) => {
 	});
 	return /* @__PURE__ */ jsx(Aria.TextField, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		className: rootClassName,
 		onChange: handleChange,
 		type,

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","names":[],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && (\n              <Button\n                color=\"secondary\"\n                variant=\"plain\"\n                className={styles.button}\n                onPress={() =>\n                  setType(type === \"password\" ? \"text\" : \"password\")\n                }\n                aria-label={translation.format(\n                  `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                )}\n              >\n                {type === \"password\" ? <IconShow /> : <IconHide />}\n              </Button>\n            )}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAW,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4B,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAW,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAW,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAW,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,UAAU;OAEnD,cAAY,YAAY,OACtB,YAAY,SAAS,aAAa,SAAS,QAC7C;OAEC,UAAA,SAAS,aAAa,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;MAC3C,CAAA;KAEP;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"TextField.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && (\n              <Button\n                color=\"secondary\"\n                variant=\"plain\"\n                className={styles.button}\n                onPress={() =>\n                  setType(type === \"password\" ? \"text\" : \"password\")\n                }\n                aria-label={translation.format(\n                  `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                )}\n              >\n                {type === \"password\" ? <IconShow /> : <IconHide />}\n              </Button>\n            )}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAWA,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAWA,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4BC,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAWD,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAWA,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAWA,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,UAAU;OAEnD,cAAY,YAAY,OACtB,YAAY,SAAS,aAAa,SAAS,QAC7C;OAEC,UAAA,SAAS,aAAa,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;MAC3C,CAAA;KAEP;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { DateInput } from "../DateInput/DateInput.mjs";
 import TimeField_module_default from "./TimeField.module.mjs";
 import "react";
@@ -11,12 +12,13 @@ import * as Aria from "react-aria-components";
 //#region src/components/TimeField/TimeField.tsx
 /** @flr-generate all */
 var TimeField = flowComponent("TimeField", (props) => {
-	const { children, ref, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TimeField");
+	const { children, ref, ...rest } = useControlledHostValueProps(props, null);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "TimeField");
 	return /* @__PURE__ */ jsxs(Aria.TimeField, {
 		hourCycle: 24,
 		...rest,
-		...fieldProps,
+		...wrapperProps,
+		...controlProps,
 		children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [/* @__PURE__ */ jsx(DateInput, {
 			className: TimeField_module_default.dateInput,
 			ref

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

@@ -1 +1 @@
-{"version":3,"file":"TimeField.mjs","names":[],"sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n  extends\n    PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n  const { children, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"TimeField\");\n\n  return (\n    <Aria.TimeField hourCycle={24} {...rest} {...fieldProps}>\n      <FieldErrorCaptureContext>\n        <DateInput className={styles.dateInput} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.TimeField>\n  );\n});\n\nexport default TimeField;\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CAEnC,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,WAAW;CAExC,OACE,qBAAC,KAAK,WAAN;EAAgB,WAAW;EAAI,GAAI;EAAM,GAAI;EAA7C,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,WAAW,yBAAO;GAAgB;EAAM,CAAA,GACnD,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,CACE,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACH;;AAEpB,CAAC"}
+{"version":3,"file":"TimeField.mjs","names":["styles"],"sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n  extends\n    PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n  // `null` is what react-aria's time field state uses for \"no time\"\n  const { children, ref, ...rest } = useControlledHostValueProps(props, null);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n  } = useFieldComponent(props, \"TimeField\");\n\n  return (\n    <Aria.TimeField\n      hourCycle={24}\n      {...rest}\n      {...wrapperProps}\n      {...controlProps}\n    >\n      <FieldErrorCaptureContext>\n        <DateInput className={styles.dateInput} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.TimeField>\n  );\n});\n\nexport default TimeField;\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAE7D,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS,4BAA4B,OAAO,IAAI;CAE1E,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,WAAW;CAExC,OACE,qBAAC,KAAK,WAAN;EACE,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EAJN,UAAA,CAME,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,WAAWA,yBAAO;GAAgB;EAAM,CAAA,GACnD,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,CACE,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACH;;AAEpB,CAAC"}