@mittwald/flow-react-components 1.6.0-next.3 → 1.6.0-next.31

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

@@ -13,7 +13,7 @@ import ContextMenuTriggerView from "../../views/ContextMenuTriggerView.mjs";
 import ContextMenuView from "../../views/ContextMenuView.mjs";
 import TabNavigation_module_default from "./TabNavigation.module.mjs";
 import { LinkContent } from "./components/LinkContent/LinkContent.mjs";
-import __locale_default from "../../../../../_virtual/_18.locale.mjs";
+import __locale_default from "../../../../../_virtual/_19.locale.mjs";
 import useCollapsingItems from "./lib/useCollapsingItems.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useLabelledBySectionHeading } from "../Section/context.mjs";
 import Table_module_default from "./Table.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -8,6 +9,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var Table = (props) => {
 	const { children, className, verticalAlign = "top", layout = "auto", minWidth, ...rest } = props;
+	const ariaLabelledBy = useLabelledBySectionHeading(rest);
 	const rootClassName = clsx(Table_module_default.table, verticalAlign !== "top" && Table_module_default[`vertical-align-${verticalAlign}`], Table_module_default[`layout-${layout}`], className);
 	return /* @__PURE__ */ jsx("div", {
 		className: Table_module_default.tableContainer,
@@ -17,6 +19,7 @@ var Table = (props) => {
 			children: /* @__PURE__ */ jsx(Aria.Table, {
 				className: rootClassName,
 				...rest,
+				"aria-labelledby": ariaLabelledBy,
 				children
 			})
 		})

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

@@ -1 +1 @@
-{"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"}
+{"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\";\nimport { useLabelledBySectionHeading } from \"@/components/Section/context\";\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 ariaLabelledBy = useLabelledBySectionHeading(rest);\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\n          className={rootClassName}\n          {...rest}\n          aria-labelledby={ariaLabelledBy}\n        >\n          {children}\n        </Aria.Table>\n      </div>\n    </div>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;AA2BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,iBAAiB,4BAA4B,IAAI;CAEvD,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;IACE,WAAW;IACX,GAAI;IACJ,mBAAiB;IAEhB;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n    // stylelint-disable-next-line selector-max-type -- consumer content\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n    // stylelint-disable-next-line selector-max-type -- consumer content\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    // Hide only an all-empty header: a hidden `<th>` shifts the next headings.\n    &:not(:has(.column:not(:empty))) {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}

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

@@ -18,15 +18,16 @@ var Tabs = flowComponent("Tabs", (props) => {
 	const [selectedKeyState, setSelectedKeyState] = useState(defaultSelectedKey);
 	const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;
 	const isSsr = useIsSSR();
+	const handleSelectionChange = (key) => {
+		setSelectedKeyState(key);
+		onSelectionChange?.(key);
+	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsxs(Aria.Tabs, {
 		slot: null,
 		className: rootClassName,
 		...rest,
 		selectedKey,
-		onSelectionChange: (key) => {
-			setSelectedKeyState(key);
-			if (onSelectionChange) onSelectionChange(key);
-		},
+		onSelectionChange: handleSelectionChange,
 		disabledKeys,
 		ref,
 		children: [
@@ -34,10 +35,7 @@ var Tabs = flowComponent("Tabs", (props) => {
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledby,
 				selection: selectedKey,
-				onContextMenuSelectionChange: (key) => {
-					setSelectedKeyState(key);
-					if (onSelectionChange) onSelectionChange(key);
-				},
+				onContextMenuSelectionChange: handleSelectionChange,
 				disabledKeys
 			}),
 			/* @__PURE__ */ jsx(UiComponentTunnelExit, {

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

@@ -1 +1 @@
-{"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"}
+{"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  const handleSelectionChange = (key: Aria.Key) => {\n    setSelectedKeyState(key);\n    onSelectionChange?.(key);\n  };\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={handleSelectionChange}\n        disabledKeys={disabledKeys}\n        ref={ref}\n      >\n        <TabList\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          selection={selectedKey}\n          onContextMenuSelectionChange={handleSelectionChange}\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,MAAM,yBAAyB,QAAkB;EAC/C,oBAAoB,GAAG;EACvB,oBAAoB,GAAG;CACzB;CAEA,OACE,qBAAAC,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,mBAAmB;EACL;EACT;EAPP,UAAA;GASE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,8BAA8B;IAChB;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/Tabs.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabs {\n  display: flex;\n  flex-direction: column;\n\n  .list {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .fallbackTab {\n    display: none;\n  }\n\n  &:not(:has(.tabPanel[id])) {\n    .fallbackTab {\n      display: flex;\n    }\n  }\n}\n\n.tabPanel {\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n\n  &[id] {\n    padding-top: var(--section--spacing);\n    opacity: 1;\n    height: auto;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tabs.module.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabs {\n  display: flex;\n  flex-direction: column;\n\n  .list {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .fallbackTab {\n    display: none;\n  }\n\n  &:not(:has(.tabPanel[id])) {\n    .fallbackTab {\n      display: flex;\n    }\n  }\n}\n\n.tabPanel {\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n\n  &[id] {\n    padding-top: var(--section--spacing);\n    opacity: 1;\n    height: auto;\n\n    /* Only inactive panels clip, so focus rings and hover backgrounds can\n       reach past the panel. */\n    overflow: visible;\n  }\n}\n"],"mappings":""}

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/_33.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_34.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/TabList/TabList.mjs

@@ -10,14 +10,12 @@ import TabList_module_default from "./TabList.module.mjs";
 import { useTabIndicator } from "../../lib/useTabIndicator.mjs";
 import { useObserveOverflow } from "../../../../lib/hooks/dom/useObserveOverflow.mjs";
 import clsx from "clsx";
-import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 import { useMergeRefs } from "use-callback-ref";
 //#region src/components/Tabs/components/TabList/TabList.tsx
 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;
@@ -41,7 +39,6 @@ var TabList = (props) => {
 		variant: "solid",
 		className: TabList_module_default.contextMenuButton,
 		color: "light",
-		"aria-labelledby": titleCollapsedElementId,
 		children: [/* @__PURE__ */ jsx(UiComponentTunnelExit, {
 			id: "ActiveTitle",
 			component: "Tabs"

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"TabList.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } 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 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      >\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":";;;;;;;;;;;;;;;;AAsBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,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;EAHR,UAAA,CAKE,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/TextArea/TextArea.mjs

@@ -8,7 +8,7 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import TextArea_module_default from "./TextArea.module.mjs";
-import __locale_default from "../../../../../_virtual/_24.locale.mjs";
+import __locale_default from "../../../../../_virtual/_25.locale.mjs";
 import clsx from "clsx";
 import { useEffect, useLayoutEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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/_34.locale.mjs";
+import __locale_default from "../../../../../_virtual/_35.locale.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -52,6 +52,16 @@ var TextField = flowComponent("TextField", (props) => {
 		count: charactersCount,
 		maxCount: props.maxLength ?? 0
 	});
+	const isPasswordHidden = type === "password";
+	const togglePasswordVisibility = () => setType(isPasswordHidden ? "text" : "password");
+	const passwordVisibilityButton = /* @__PURE__ */ jsx(Button, {
+		color: "secondary",
+		variant: "plain",
+		className: TextField_module_default.button,
+		onPress: togglePasswordVisibility,
+		"aria-label": translation.format(isPasswordHidden ? "password.show" : "password.hide"),
+		children: isPasswordHidden ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
+	});
 	return /* @__PURE__ */ jsx(Aria.TextField, {
 		...rest,
 		...controlProps,
@@ -76,14 +86,7 @@ var TextField = flowComponent("TextField", (props) => {
 							id: "button",
 							component: "TextField"
 						}),
-						typeFromProps === "password" && /* @__PURE__ */ jsx(Button, {
-							color: "secondary",
-							variant: "plain",
-							className: TextField_module_default.button,
-							onPress: () => setType(type === "password" ? "text" : "password"),
-							"aria-label": translation.format(`password.${type === "password" ? "show" : "hide"}`),
-							children: type === "password" ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
-						})
+						typeFromProps === "password" && passwordVisibilityButton
 					]
 				}),
 				showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription })

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

@@ -1 +1 @@
-{"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    skeletonProps,\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      {...skeletonProps}\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,cACA,kBACE,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,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"}
+{"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    skeletonProps,\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  const isPasswordHidden = type === \"password\";\n\n  const togglePasswordVisibility = () =>\n    setType(isPasswordHidden ? \"text\" : \"password\");\n\n  const passwordVisibilityButton = (\n    <Button\n      color=\"secondary\"\n      variant=\"plain\"\n      className={styles.button}\n      onPress={togglePasswordVisibility}\n      aria-label={translation.format(\n        isPasswordHidden ? \"password.show\" : \"password.hide\",\n      )}\n    >\n      {isPasswordHidden ? <IconShow /> : <IconHide />}\n    </Button>\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\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\" && passwordVisibilityButton}\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,cACA,kBACE,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,MAAM,mBAAmB,SAAS;CAElC,MAAM,iCACJ,QAAQ,mBAAmB,SAAS,UAAU;CAEhD,MAAM,2BACJ,oBAAC,QAAD;EACE,OAAM;EACN,SAAQ;EACR,WAAWD,yBAAO;EAClB,SAAS;EACT,cAAY,YAAY,OACtB,mBAAmB,kBAAkB,eACvC;EAEC,UAAA,mBAAmB,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACxC,CAAA;CAGV,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,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,WAAWA,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,cAAc;KAC9B;;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

@@ -6,20 +6,22 @@ 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 clsx from "clsx";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 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 } = useControlledHostValueProps(props, null);
+	const { children, className, ref, ...rest } = useControlledHostValueProps(props, null);
 	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps, skeletonProps } = useFieldComponent(props, "TimeField");
+	const rootClassName = clsx(wrapperProps.className, className);
 	return /* @__PURE__ */ jsxs(Aria.TimeField, {
 		hourCycle: 24,
 		...rest,
-		...wrapperProps,
 		...controlProps,
 		...skeletonProps,
+		className: rootClassName,
 		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":["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    skeletonProps,\n  } = useFieldComponent(props, \"TimeField\");\n\n  return (\n    <Aria.TimeField\n      hourCycle={24}\n      {...rest}\n      {...wrapperProps}\n      {...controlProps}\n      {...skeletonProps}\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,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,OACE,qBAAC,KAAK,WAAN;EACE,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;EALN,UAAA,CAOE,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"}
+{"version":3,"file":"TimeField.mjs","names":["styles"],"sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\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, className, ref, ...rest } = useControlledHostValueProps(\n    props,\n    null,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"TimeField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  return (\n    <Aria.TimeField\n      hourCycle={24}\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\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":";;;;;;;;;;;;;;AAmBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAE7D,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS,4BAC5C,OACA,IACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,OACE,qBAAC,KAAK,WAAN;EACE,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EALb,UAAA,CAOE,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"}

package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs

@@ -13,6 +13,20 @@ var pickComponentTranslations = (componentName, data) => {
 		return pick(components ?? {}, [componentName])[componentName] ?? {};
 	});
 };
+var compiledMessages = /* @__PURE__ */ new Map();
+var getCompiledMessage = (message, locale) => {
+	let messagesOfLocale = compiledMessages.get(locale);
+	if (!messagesOfLocale) {
+		messagesOfLocale = /* @__PURE__ */ new Map();
+		compiledMessages.set(locale, messagesOfLocale);
+	}
+	let compiled = messagesOfLocale.get(message);
+	if (!compiled) {
+		compiled = new IntlMessageFormat(message, locale);
+		messagesOfLocale.set(message, compiled);
+	}
+	return compiled;
+};
 var useLocalizedStringFormatter = (strings, componentName) => {
 	const locale = useLanguage();
 	const { translations, translate } = useTranslationProvider();
@@ -31,8 +45,7 @@ var useLocalizedStringFormatter = (strings, componentName) => {
 			if (customTranslated !== void 0) return customTranslated;
 		}
 		const translationString = dictionary.getStringForLocale(key, locale);
-		const translationMessage = new IntlMessageFormat(translationString, locale);
-		return String(translationMessage.format(variables));
+		return String(getCompiledMessage(translationString, locale).format(variables));
 	}, [
 		translate,
 		locale,

package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLocalizedStringFormatter.mjs","names":[],"sources":["../../../../../../../src/components/TranslationProvider/useLocalizedStringFormatter.ts"],"sourcesContent":["import {\n  type Translations,\n  useTranslationProvider,\n} from \"@/components/TranslationProvider/TranslationProvider\";\nimport { mergeDeep } from \"remeda\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { mapValues, pick } from \"remeda\";\nimport type {\n  Variables,\n  LocalizedStrings as LocalizedStringsIntl,\n} from \"@internationalized/string\";\nimport IntlMessageFormat from \"intl-messageformat\";\nimport { useLocalizedStringDictionary } from \"@react-aria/i18n\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\n\nexport type LocalizedStrings = LocalizedStringsIntl<string, string>;\nexport type LocalizedComponentName = FlowComponentName | string;\n\nexport type TranslationFunction = (\n  key: string,\n  variables: Variables,\n  meta: {\n    component: string;\n    locale: string;\n  },\n) => string | undefined;\n\nconst pickComponentTranslations = (\n  componentName: LocalizedComponentName,\n  data?: Translations,\n) => {\n  if (!data) {\n    return {};\n  }\n\n  return mapValues(data, (components) => {\n    const picked = pick(components ?? {}, [componentName]);\n    return picked[componentName] ?? {};\n  });\n};\n\nexport const useLocalizedStringFormatter = (\n  strings: LocalizedStrings,\n  componentName: LocalizedComponentName,\n) => {\n  const locale = useLanguage();\n  const { translations, translate } = useTranslationProvider();\n\n  const mergedStrings = useMemo(\n    () =>\n      mergeDeep(\n        strings,\n        pickComponentTranslations(componentName, translations),\n      ),\n    [strings, translations, componentName],\n  );\n\n  const dictionary = useLocalizedStringDictionary(mergedStrings, componentName);\n  const formatFunction = useCallback(\n    (key: string, variables?: Variables): string => {\n      if (translate) {\n        const customTranslated = translate(key, variables, {\n          component: componentName,\n          locale,\n        });\n\n        if (customTranslated !== undefined) {\n          return customTranslated;\n        }\n      }\n\n      const translationString = dictionary.getStringForLocale(key, locale);\n      const translationMessage = new IntlMessageFormat(\n        translationString,\n        locale,\n      );\n\n      return String(translationMessage.format(variables));\n    },\n    [translate, locale, componentName, dictionary],\n  );\n\n  return useMemo(() => ({ format: formatFunction }), [formatFunction]);\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAM,6BACJ,eACA,SACG;CACH,IAAI,CAAC,MACH,OAAO,CAAC;CAGV,OAAO,UAAU,OAAO,eAAe;EAErC,OADe,KAAK,cAAc,CAAC,GAAG,CAAC,aAAa,CAC7C,CAAA,CAAO,kBAAkB,CAAC;CACnC,CAAC;AACH;AAEA,IAAa,+BACX,SACA,kBACG;CACH,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,cAAc,cAAc,uBAAuB;CAE3D,MAAM,gBAAgB,cAElB,UACE,SACA,0BAA0B,eAAe,YAAY,CACvD,GACF;EAAC;EAAS;EAAc;CAAa,CACvC;CAEA,MAAM,aAAa,6BAA6B,eAAe,aAAa;CAC5E,MAAM,iBAAiB,aACpB,KAAa,cAAkC;EAC9C,IAAI,WAAW;GACb,MAAM,mBAAmB,UAAU,KAAK,WAAW;IACjD,WAAW;IACX;GACF,CAAC;GAED,IAAI,qBAAqB,KAAA,GACvB,OAAO;EAEX;EAEA,MAAM,oBAAoB,WAAW,mBAAmB,KAAK,MAAM;EACnE,MAAM,qBAAqB,IAAI,kBAC7B,mBACA,MACF;EAEA,OAAO,OAAO,mBAAmB,OAAO,SAAS,CAAC;CACpD,GACA;EAAC;EAAW;EAAQ;EAAe;CAAU,CAC/C;CAEA,OAAO,eAAe,EAAE,QAAQ,eAAe,IAAI,CAAC,cAAc,CAAC;AACrE"}
+{"version":3,"file":"useLocalizedStringFormatter.mjs","names":[],"sources":["../../../../../../../src/components/TranslationProvider/useLocalizedStringFormatter.ts"],"sourcesContent":["import {\n  type Translations,\n  useTranslationProvider,\n} from \"@/components/TranslationProvider/TranslationProvider\";\nimport { mergeDeep } from \"remeda\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { mapValues, pick } from \"remeda\";\nimport type {\n  Variables,\n  LocalizedStrings as LocalizedStringsIntl,\n} from \"@internationalized/string\";\nimport IntlMessageFormat from \"intl-messageformat\";\nimport { useLocalizedStringDictionary } from \"@react-aria/i18n\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\n\nexport type LocalizedStrings = LocalizedStringsIntl<string, string>;\nexport type LocalizedComponentName = FlowComponentName | string;\n\nexport type TranslationFunction = (\n  key: string,\n  variables: Variables,\n  meta: {\n    component: string;\n    locale: string;\n  },\n) => string | undefined;\n\nconst pickComponentTranslations = (\n  componentName: LocalizedComponentName,\n  data?: Translations,\n) => {\n  if (!data) {\n    return {};\n  }\n\n  return mapValues(data, (components) => {\n    const picked = pick(components ?? {}, [componentName]);\n    return picked[componentName] ?? {};\n  });\n};\n\n// Compiling parses the message — do it once per locale and message.\nconst compiledMessages = new Map<string, Map<string, IntlMessageFormat>>();\n\nconst getCompiledMessage = (message: string, locale: string) => {\n  let messagesOfLocale = compiledMessages.get(locale);\n  if (!messagesOfLocale) {\n    messagesOfLocale = new Map();\n    compiledMessages.set(locale, messagesOfLocale);\n  }\n\n  let compiled = messagesOfLocale.get(message);\n  if (!compiled) {\n    compiled = new IntlMessageFormat(message, locale);\n    messagesOfLocale.set(message, compiled);\n  }\n\n  return compiled;\n};\n\nexport const useLocalizedStringFormatter = (\n  strings: LocalizedStrings,\n  componentName: LocalizedComponentName,\n) => {\n  const locale = useLanguage();\n  const { translations, translate } = useTranslationProvider();\n\n  const mergedStrings = useMemo(\n    () =>\n      mergeDeep(\n        strings,\n        pickComponentTranslations(componentName, translations),\n      ),\n    [strings, translations, componentName],\n  );\n\n  const dictionary = useLocalizedStringDictionary(mergedStrings, componentName);\n  const formatFunction = useCallback(\n    (key: string, variables?: Variables): string => {\n      if (translate) {\n        const customTranslated = translate(key, variables, {\n          component: componentName,\n          locale,\n        });\n\n        if (customTranslated !== undefined) {\n          return customTranslated;\n        }\n      }\n\n      const translationString = dictionary.getStringForLocale(key, locale);\n      return String(\n        getCompiledMessage(translationString, locale).format(variables),\n      );\n    },\n    [translate, locale, componentName, dictionary],\n  );\n\n  return useMemo(() => ({ format: formatFunction }), [formatFunction]);\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAM,6BACJ,eACA,SACG;CACH,IAAI,CAAC,MACH,OAAO,CAAC;CAGV,OAAO,UAAU,OAAO,eAAe;EAErC,OADe,KAAK,cAAc,CAAC,GAAG,CAAC,aAAa,CAC7C,CAAA,CAAO,kBAAkB,CAAC;CACnC,CAAC;AACH;AAGA,IAAM,mCAAmB,IAAI,IAA4C;AAEzE,IAAM,sBAAsB,SAAiB,WAAmB;CAC9D,IAAI,mBAAmB,iBAAiB,IAAI,MAAM;CAClD,IAAI,CAAC,kBAAkB;EACrB,mCAAmB,IAAI,IAAI;EAC3B,iBAAiB,IAAI,QAAQ,gBAAgB;CAC/C;CAEA,IAAI,WAAW,iBAAiB,IAAI,OAAO;CAC3C,IAAI,CAAC,UAAU;EACb,WAAW,IAAI,kBAAkB,SAAS,MAAM;EAChD,iBAAiB,IAAI,SAAS,QAAQ;CACxC;CAEA,OAAO;AACT;AAEA,IAAa,+BACX,SACA,kBACG;CACH,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,cAAc,cAAc,uBAAuB;CAE3D,MAAM,gBAAgB,cAElB,UACE,SACA,0BAA0B,eAAe,YAAY,CACvD,GACF;EAAC;EAAS;EAAc;CAAa,CACvC;CAEA,MAAM,aAAa,6BAA6B,eAAe,aAAa;CAC5E,MAAM,iBAAiB,aACpB,KAAa,cAAkC;EAC9C,IAAI,WAAW;GACb,MAAM,mBAAmB,UAAU,KAAK,WAAW;IACjD,WAAW;IACX;GACF,CAAC;GAED,IAAI,qBAAqB,KAAA,GACvB,OAAO;EAEX;EAEA,MAAM,oBAAoB,WAAW,mBAAmB,KAAK,MAAM;EACnE,OAAO,OACL,mBAAmB,mBAAmB,MAAM,CAAC,CAAC,OAAO,SAAS,CAChE;CACF,GACA;EAAC;EAAW;EAAQ;EAAe;CAAU,CAC/C;CAEA,OAAO,eAAe,EAAE,QAAQ,eAAe,IAAI,CAAC,cAAc,CAAC;AACrE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Wrap.mjs","names":[],"sources":["../../../../../../../src/components/Wrap/Wrap.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactElement } from \"react\";\n\nexport interface WrapProps {\n  if: unknown;\n  children: ReactElement<PropsWithChildren>;\n}\n\nexport const Wrap: FC<WrapProps> = (props) => {\n  const { if: _if, children } = props;\n\n  if (_if) {\n    return children;\n  }\n\n  return children.props.children;\n};\n\nexport default Wrap;\n"],"mappings":";;;AAOA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,IAAI,KAAK,aAAa;CAE9B,IAAI,KACF,OAAO;CAGT,OAAO,SAAS,MAAM;AACxB"}
+{"version":3,"file":"Wrap.mjs","names":[],"sources":["../../../../../../../src/components/Wrap/Wrap.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactElement } from \"react\";\n\nexport interface WrapProps {\n  /**\n   * Whether the child element is rendered. Any truthy value keeps it, a falsy\n   * one renders only its children.\n   */\n  if: unknown;\n  /** The element that wraps the content, with the content as its children. */\n  children: ReactElement<PropsWithChildren>;\n}\n\nexport const Wrap: FC<WrapProps> = (props) => {\n  const { if: _if, children } = props;\n\n  if (_if) {\n    return children;\n  }\n\n  return children.props.children;\n};\n\nexport default Wrap;\n"],"mappings":";;;AAYA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,IAAI,KAAK,aAAa;CAE9B,IAAI,KACF,OAAO;CAGT,OAAO,SAAS,MAAM;AACxB"}

package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs

@@ -3,9 +3,9 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import dynamic from "../../../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../../../../components/TranslationProvider/useLocalizedStringFormatter.mjs";
-import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
-import __locale_default from "../../../../../../../_virtual/_35.locale.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
+import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
+import __locale_default from "../../../../../../../_virtual/_36.locale.mjs";
 import { useUpdateFormDefaultValue } from "./hooks/useUpdateFormDefaultValue.mjs";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/integrations/react-hook-form/components/FormRootError/FormRootError.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
-import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
+import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import { useMountedFormRootErrorComponent } from "./useMountedFormRootErrorComponent.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx

package/dist/js/packages/components/src/views/DatePickerView.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { viewComponentContext } from "../lib/viewComponentContext/viewComponentContext.mjs";
+import { DatePicker } from "../components/DatePicker/DatePicker.mjs";
+import { memo, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/DatePickerView.tsx
+var DatePickerView = memo((props) => {
+	const View = useContext(viewComponentContext)["DatePicker"] ?? DatePicker;
+	return /* @__PURE__ */ jsx(View, { ...props });
+});
+DatePickerView.displayName = "DatePickerView";
+//#endregion
+export { DatePickerView as default };
+
+//# sourceMappingURL=DatePickerView.mjs.map

package/dist/js/packages/components/src/views/DatePickerView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerView.mjs","names":[],"sources":["../../../../../../src/views/DatePickerView.tsx"],"sourcesContent":["/* prettier-ignore */\n/* This file is auto-generated with the remote-components-generator */\nimport React, { memo, type FC, useContext } from \"react\";\nimport {\n  DatePicker,\n  type DatePickerProps,\n} from \"@/components/DatePicker/DatePicker\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst DatePickerView: FC<DatePickerProps> = memo((props) => {\n  const View = useContext(viewComponentContext)[\"DatePicker\"] ?? DatePicker;\n  return <View {...props} />;\n});\nDatePickerView.displayName = \"DatePickerView\";\n\nexport default DatePickerView;\n"],"mappings":";;;;;;;AASA,IAAM,iBAAsC,MAAM,UAAU;CAC1D,MAAM,OAAO,WAAW,oBAAoB,CAAC,CAAC,iBAAiB;CAC/D,OAAO,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAC3B,CAAC;AACD,eAAe,cAAc"}

package/dist/js/packages/components/src/views/LabelView.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { viewComponentContext } from "../lib/viewComponentContext/viewComponentContext.mjs";
+import { Label } from "../components/Label/Label.mjs";
+import { memo, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/LabelView.tsx
+var LabelView = memo((props) => {
+	const View = useContext(viewComponentContext)["Label"] ?? Label;
+	return /* @__PURE__ */ jsx(View, { ...props });
+});
+LabelView.displayName = "LabelView";
+//#endregion
+export { LabelView as default };
+
+//# sourceMappingURL=LabelView.mjs.map

package/dist/js/packages/components/src/views/LabelView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelView.mjs","names":[],"sources":["../../../../../../src/views/LabelView.tsx"],"sourcesContent":["/* prettier-ignore */\n/* This file is auto-generated with the remote-components-generator */\nimport React, { memo, type FC, useContext } from \"react\";\nimport { Label, type LabelProps } from \"@/components/Label/Label\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst LabelView: FC<LabelProps> = memo((props) => {\n  const View = useContext(viewComponentContext)[\"Label\"] ?? Label;\n  return <View {...props} />;\n});\nLabelView.displayName = \"LabelView\";\n\nexport default LabelView;\n"],"mappings":";;;;;;;AAMA,IAAM,YAA4B,MAAM,UAAU;CAChD,MAAM,OAAO,WAAW,oBAAoB,CAAC,CAAC,YAAY;CAC1D,OAAO,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAC3B,CAAC;AACD,UAAU,cAAc"}

package/dist/js/packages/components/src/views/TimeFieldView.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { viewComponentContext } from "../lib/viewComponentContext/viewComponentContext.mjs";
+import { TimeField } from "../components/TimeField/TimeField.mjs";
+import { memo, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/TimeFieldView.tsx
+var TimeFieldView = memo((props) => {
+	const View = useContext(viewComponentContext)["TimeField"] ?? TimeField;
+	return /* @__PURE__ */ jsx(View, { ...props });
+});
+TimeFieldView.displayName = "TimeFieldView";
+//#endregion
+export { TimeFieldView as default };
+
+//# sourceMappingURL=TimeFieldView.mjs.map

package/dist/js/packages/components/src/views/TimeFieldView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFieldView.mjs","names":[],"sources":["../../../../../../src/views/TimeFieldView.tsx"],"sourcesContent":["/* prettier-ignore */\n/* This file is auto-generated with the remote-components-generator */\nimport React, { memo, type FC, useContext } from \"react\";\nimport {\n  TimeField,\n  type TimeFieldProps,\n} from \"@/components/TimeField/TimeField\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst TimeFieldView: FC<TimeFieldProps> = memo((props) => {\n  const View = useContext(viewComponentContext)[\"TimeField\"] ?? TimeField;\n  return <View {...props} />;\n});\nTimeFieldView.displayName = \"TimeFieldView\";\n\nexport default TimeFieldView;\n"],"mappings":";;;;;;;AASA,IAAM,gBAAoC,MAAM,UAAU;CACxD,MAAM,OAAO,WAAW,oBAAoB,CAAC,CAAC,gBAAgB;CAC9D,OAAO,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAC3B,CAAC;AACD,cAAc,cAAc"}

package/dist/js/packages/components-base/src/index.mjs

@@ -4,8 +4,10 @@ import "./lib/array.mjs";
 import { getListColumn } from "./list/ListModelContext.mjs";
 import "./list/filter/ListFilterValue.mjs";
 import { ListFilter } from "./list/filter/ListFilter.mjs";
-import "./list/filter/dateRange.mjs";
+import { resolveListDateRange } from "./list/filter/dateRange.mjs";
 import { ListDateRangeFilter } from "./list/filter/ListDateRangeFilter.mjs";
+import { formatListDateRange } from "./list/filter/formatDateRange.mjs";
+import { getListDateTimeRangeUpdate, isListDateTimeRangeEndBeforeStart, listDateTimeRangeFieldsFromValue, toListCalendarDate, toListTime } from "./list/filter/dateTimeRangeFields.mjs";
 import "./list/item/ListItem.mjs";
 import { ListItemCollection } from "./list/item/ListItemCollection.mjs";
 import { ListLoaderState } from "./list/loading/ListLoaderState.mjs";
@@ -15,4 +17,4 @@ import { ListSearch } from "./list/search/ListSearch.mjs";
 import { ListSorting, mergeHiddenSorting } from "./list/sorting/ListSorting.mjs";
 import { ListTable } from "./list/table/ListTable.mjs";
 import { ListViewMode } from "./list/viewMode/ListViewMode.mjs";
-export { ActionState, ListBatchesController, ListDateRangeFilter, ListFilter, ListItemCollection, ListLoaderState, ListSearch, ListSorting, ListTable, ListViewMode, actionStateDurations, getListColumn, getListDataLoaderOptions, mergeHiddenSorting };
+export { ActionState, ListBatchesController, ListDateRangeFilter, ListFilter, ListItemCollection, ListLoaderState, ListSearch, ListSorting, ListTable, ListViewMode, actionStateDurations, formatListDateRange, getListColumn, getListDataLoaderOptions, getListDateTimeRangeUpdate, isListDateTimeRangeEndBeforeStart, listDateTimeRangeFieldsFromValue, mergeHiddenSorting, resolveListDateRange, toListCalendarDate, toListTime };

package/dist/js/packages/components-base/src/list/filter/ListDateRangeFilter.mjs

@@ -21,6 +21,7 @@ var ListDateRangeFilter = class extends ListFilter {
 	}
 	setValue(range) {
 		this.getTableColumn().setFilterValue(range);
+		this.notifyFilterUpdated(range ? [range] : []);
 	}
 };
 //#endregion

package/dist/js/packages/components-base/src/list/filter/ListDateRangeFilter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListDateRangeFilter.mjs","names":[],"sources":["../../../../../../../../components-base/src/list/filter/ListDateRangeFilter.ts"],"sourcesContent":["import { ListFilter } from \"./ListFilter\";\nimport {\n  applyDateRangeColumnDef,\n  isListDateRange,\n  type ListDateRange,\n} from \"./dateRange\";\nimport type { PropertyName } from \"../types\";\nimport type { ColumnDef } from \"@tanstack/table-core\";\n\n/**\n * A filter over a span of days rather than over a set of values.\n *\n * Everything except the control that picks the range: the table column, the\n * comparison and the stored value are the same in every binding, and what a\n * calendar looks like is not. A binding subclasses this to add its own calendar\n * options.\n */\nexport class ListDateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n  TRendered = unknown,\n> extends ListFilter<T, TProp, never, TRendered> {\n  public override updateTableColumnDef(def: ColumnDef<T>): void {\n    applyDateRangeColumnDef(def);\n  }\n\n  public override getValue(): ListDateRange | null {\n    const value = super.getValue();\n    return isListDateRange(value) ? value : null;\n  }\n\n  public setValue(range: ListDateRange | null): void {\n    this.getTableColumn().setFilterValue(range);\n  }\n}\n\nexport default ListDateRangeFilter;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAa,sBAAb,cAIU,WAAuC;CAC/C,qBAAqC,KAAyB;EAC5D,wBAAwB,GAAG;CAC7B;CAEA,WAAiD;EAC/C,MAAM,QAAQ,MAAM,SAAS;EAC7B,OAAO,gBAAgB,KAAK,IAAI,QAAQ;CAC1C;CAEA,SAAgB,OAAmC;EACjD,KAAK,eAAe,CAAC,CAAC,eAAe,KAAK;CAC5C;AACF"}
+{"version":3,"file":"ListDateRangeFilter.mjs","names":[],"sources":["../../../../../../../../components-base/src/list/filter/ListDateRangeFilter.ts"],"sourcesContent":["import { ListFilter } from \"./ListFilter\";\nimport {\n  applyDateRangeColumnDef,\n  isListDateRange,\n  type ListDateRange,\n} from \"./dateRange\";\nimport type { PropertyName } from \"../types\";\nimport type { ColumnDef } from \"@tanstack/table-core\";\n\n/**\n * A filter over a span of days rather than over a set of values.\n *\n * Everything except the control that picks the range: the table column, the\n * comparison and the stored value are the same in every binding, and what a\n * calendar looks like is not. A binding subclasses this to add its own calendar\n * options.\n */\nexport class ListDateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n  TRendered = unknown,\n> extends ListFilter<T, TProp, never, TRendered> {\n  public override updateTableColumnDef(def: ColumnDef<T>): void {\n    applyDateRangeColumnDef(def);\n  }\n\n  public override getValue(): ListDateRange | null {\n    const value = super.getValue();\n    return isListDateRange(value) ? value : null;\n  }\n\n  public setValue(range: ListDateRange | null): void {\n    this.getTableColumn().setFilterValue(range);\n    this.notifyFilterUpdated(range ? [range] : []);\n  }\n}\n\nexport default ListDateRangeFilter;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAa,sBAAb,cAIU,WAAuC;CAC/C,qBAAqC,KAAyB;EAC5D,wBAAwB,GAAG;CAC7B;CAEA,WAAiD;EAC/C,MAAM,QAAQ,MAAM,SAAS;EAC7B,OAAO,gBAAgB,KAAK,IAAI,QAAQ;CAC1C;CAEA,SAAgB,OAAmC;EACjD,KAAK,eAAe,CAAC,CAAC,eAAe,KAAK;EAC1C,KAAK,oBAAoB,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC;CAC/C;AACF"}

package/dist/js/packages/components-base/src/list/filter/ListFilter.mjs

@@ -166,7 +166,10 @@ var ListFilter = class {
 		this.callOnChangedHandlers(updatedValue);
 	}
 	callOnChangedHandlers(newValue) {
-		const values = toArray(newValue).map((v) => v?.value);
+		this.notifyFilterUpdated(toArray(newValue).map((v) => v?.value));
+	}
+	/** Tells the listeners — the list resetting its batches among them. */
+	notifyFilterUpdated(values) {
 		this.onFilterChangeCallbacks.forEach((cb) => cb(values));
 	}
 	hasChanges() {