@mittwald/flow-react-components 1.6.0-next.2 → 1.6.0-next.20

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/integrations/react-hook-form/components/Field/Field.mjs

@@ -4,7 +4,7 @@ import { PropsContextProvider } from "../../../../lib/propsContext/components/Pr
 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 __locale_default from "../../../../../../../_virtual/_36.locale.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useUpdateFormDefaultValue } from "./hooks/useUpdateFormDefaultValue.mjs";
 import "react";

package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs

@@ -848,7 +848,7 @@ var light = { "color": {
 		]
 	}
 } };
-var color = /*#__PURE__*/ JSON.parse("{\"gray\":{\"100\":{\"value\":\"#1B1F24\",\"path\":[\"color\",\"gray\",\"100\"]},\"200\":{\"value\":\"#292F37\",\"path\":[\"color\",\"gray\",\"200\"]},\"300\":{\"value\":\"#3A434E\",\"path\":[\"color\",\"gray\",\"300\"]},\"400\":{\"value\":\"#5E6C7A\",\"path\":[\"color\",\"gray\",\"400\"]},\"500\":{\"value\":\"#8FA1B4\",\"path\":[\"color\",\"gray\",\"500\"]},\"600\":{\"value\":\"#B7C9DB\",\"path\":[\"color\",\"gray\",\"600\"]},\"700\":{\"value\":\"#DCE9F7\",\"path\":[\"color\",\"gray\",\"700\"]},\"800\":{\"value\":\"#E5EFF8\",\"path\":[\"color\",\"gray\",\"800\"]},\"900\":{\"value\":\"#F4F8FC\",\"path\":[\"color\",\"gray\",\"900\"]},\"1000\":{\"value\":\"#FFFFFF\",\"path\":[\"color\",\"gray\",\"1000\"]},\"1100\":{\"value\":\"#FFFFFF\",\"path\":[\"color\",\"gray\",\"1100\"]},\"1200\":{\"value\":\"#FFFFFF\",\"path\":[\"color\",\"gray\",\"1200\"]}},\"hosting-blue\":{\"100\":{\"value\":\"#00205C\",\"path\":[\"color\",\"hosting-blue\",\"100\"]},\"200\":{\"value\":\"#002A7B\",\"path\":[\"color\",\"hosting-blue\",\"200\"]},\"300\":{\"value\":\"#003FB8\",\"path\":[\"color\",\"hosting-blue\",\"300\"]},\"400\":{\"value\":\"#0054F5\",\"path\":[\"color\",\"hosting-blue\",\"400\"]},\"500\":{\"value\":\"#1A68FF\",\"path\":[\"color\",\"hosting-blue\",\"500\"]},\"600\":{\"value\":\"#3D80FF\",\"path\":[\"color\",\"hosting-blue\",\"600\"]},\"700\":{\"value\":\"#6197FF\",\"path\":[\"color\",\"hosting-blue\",\"700\"]},\"800\":{\"value\":\"#85AFFF\",\"path\":[\"color\",\"hosting-blue\",\"800\"]},\"900\":{\"value\":\"#ABC6FF\",\"path\":[\"color\",\"hosting-blue\",\"900\"]},\"1000\":{\"value\":\"#E0EBFF\",\"path\":[\"color\",\"hosting-blue\",\"1000\"]},\"1100\":{\"value\":\"#F0F5FF\",\"path\":[\"color\",\"hosting-blue\",\"1100\"]}},\"amaranth-red\":{\"100\":{\"value\":\"#540B1B\",\"path\":[\"color\",\"amaranth-red\",\"100\"]},\"200\":{\"value\":\"#710F24\",\"path\":[\"color\",\"amaranth-red\",\"200\"]},\"300\":{\"value\":\"#AB1737\",\"path\":[\"color\",\"amaranth-red\",\"300\"]},\"400\":{\"value\":\"#E1244C\",\"path\":[\"color\",\"amaranth-red\",\"400\"]},\"500\":{\"value\":\"#E54366\",\"path\":[\"color\",\"amaranth-red\",\"500\"]},\"600\":{\"value\":\"#EA637F\",\"path\":[\"color\",\"amaranth-red\",\"600\"]},\"700\":{\"value\":\"#EE8299\",\"path\":[\"color\",\"amaranth-red\",\"700\"]},\"800\":{\"value\":\"#F2A2B3\",\"path\":[\"color\",\"amaranth-red\",\"800\"]},\"900\":{\"value\":\"#F7C1CC\",\"path\":[\"color\",\"amaranth-red\",\"900\"]},\"1000\":{\"value\":\"#FBE0E6\",\"path\":[\"color\",\"amaranth-red\",\"1000\"]},\"1100\":{\"value\":\"#FDF0F3\",\"path\":[\"color\",\"amaranth-red\",\"1100\"]}},\"royal-orange\":{\"100\":{\"value\":\"#763200\",\"path\":[\"color\",\"royal-orange\",\"100\"]},\"200\":{\"value\":\"#8F3D00\",\"path\":[\"color\",\"royal-orange\",\"200\"]},\"300\":{\"value\":\"#C25200\",\"path\":[\"color\",\"royal-orange\",\"300\"]},\"400\":{\"value\":\"#F56800\",\"path\":[\"color\",\"royal-orange\",\"400\"]},\"500\":{\"value\":\"#FF8225\",\"path\":[\"color\",\"royal-orange\",\"500\"]},\"600\":{\"value\":\"#FF9343\",\"path\":[\"color\",\"royal-orange\",\"600\"]},\"700\":{\"value\":\"#FFA562\",\"path\":[\"color\",\"royal-orange\",\"700\"]},\"800\":{\"value\":\"#FFC89F\",\"path\":[\"color\",\"royal-orange\",\"800\"]},\"900\":{\"value\":\"#FFD9BD\",\"path\":[\"color\",\"royal-orange\",\"900\"]},\"1000\":{\"value\":\"#FFEBDC\",\"path\":[\"color\",\"royal-orange\",\"1000\"]},\"1100\":{\"value\":\"#FFF4EB\",\"path\":[\"color\",\"royal-orange\",\"1100\"]}},\"espelkamp-green\":{\"100\":{\"value\":\"#00291C\",\"path\":[\"color\",\"espelkamp-green\",\"100\"]},\"200\":{\"value\":\"#003B29\",\"path\":[\"color\",\"espelkamp-green\",\"200\"]},\"300\":{\"value\":\"#005F42\",\"path\":[\"color\",\"espelkamp-green\",\"300\"]},\"400\":{\"value\":\"#00825B\",\"path\":[\"color\",\"espelkamp-green\",\"400\"]},\"500\":{\"value\":\"#00A673\",\"path\":[\"color\",\"espelkamp-green\",\"500\"]},\"600\":{\"value\":\"#00DE9A\",\"path\":[\"color\",\"espelkamp-green\",\"600\"]},\"700\":{\"value\":\"#17FFB8\",\"path\":[\"color\",\"espelkamp-green\",\"700\"]},\"800\":{\"value\":\"#4FFFC9\",\"path\":[\"color\",\"espelkamp-green\",\"800\"]},\"900\":{\"value\":\"#87FFDA\",\"path\":[\"color\",\"espelkamp-green\",\"900\"]},\"1000\":{\"value\":\"#C0FFEB\",\"path\":[\"color\",\"espelkamp-green\",\"1000\"]},\"1100\":{\"value\":\"#DCFFF4\",\"path\":[\"color\",\"espelkamp-green\",\"1100\"]}},\"soft-contrast-violet\":{\"100\":{\"value\":\"#302a6f\",\"path\":[\"color\",\"soft-contrast-violet\",\"100\"]},\"200\":{\"value\":\"#483b9f\",\"path\":[\"color\",\"soft-contrast-violet\",\"200\"]},\"300\":{\"value\":\"#5d4abf\",\"path\":[\"color\",\"soft-contrast-violet\",\"300\"]},\"400\":{\"value\":\"#715DEE\",\"path\":[\"color\",\"soft-contrast-violet\",\"400\"]},\"500\":{\"value\":\"#8574F0\",\"path\":[\"color\",\"soft-contrast-violet\",\"500\"]},\"600\":{\"value\":\"#998BF3\",\"path\":[\"color\",\"soft-contrast-violet\",\"600\"]},\"700\":{\"value\":\"#AEA2F5\",\"path\":[\"color\",\"soft-contrast-violet\",\"700\"]},\"800\":{\"value\":\"#C2B9F8\",\"path\":[\"color\",\"soft-contrast-violet\",\"800\"]},\"900\":{\"value\":\"#D6D0FA\",\"path\":[\"color\",\"soft-contrast-violet\",\"900\"]},\"1000\":{\"value\":\"#EAE7FD\",\"path\":[\"color\",\"soft-contrast-violet\",\"1000\"]},\"1100\":{\"value\":\"#F4F3FE\",\"path\":[\"color\",\"soft-contrast-violet\",\"1100\"]}},\"mittwald-navy\":{\"100\":{\"value\":\"#0E142E\",\"path\":[\"color\",\"mittwald-navy\",\"100\"]},\"200\":{\"value\":\"#131B3D\",\"path\":[\"color\",\"mittwald-navy\",\"200\"]},\"300\":{\"value\":\"#1D285C\",\"path\":[\"color\",\"mittwald-navy\",\"300\"]},\"400\":{\"value\":\"#27367B\",\"path\":[\"color\",\"mittwald-navy\",\"400\"]},\"500\":{\"value\":\"#32459E\",\"path\":[\"color\",\"mittwald-navy\",\"500\"]},\"600\":{\"value\":\"#3D55C1\",\"path\":[\"color\",\"mittwald-navy\",\"600\"]},\"700\":{\"value\":\"#5F73CC\",\"path\":[\"color\",\"mittwald-navy\",\"700\"]},\"800\":{\"value\":\"#8291D7\",\"path\":[\"color\",\"mittwald-navy\",\"800\"]},\"900\":{\"value\":\"#A5B0E2\",\"path\":[\"color\",\"mittwald-navy\",\"900\"]},\"1000\":{\"value\":\"#C8CFEE\",\"path\":[\"color\",\"mittwald-navy\",\"1000\"]},\"1100\":{\"value\":\"#E4E7F6\",\"path\":[\"color\",\"mittwald-navy\",\"1100\"]}},\"bright-lilac\":{\"100\":{\"value\":\"#470062\",\"path\":[\"color\",\"bright-lilac\",\"100\"]},\"200\":{\"value\":\"#5f0083\",\"path\":[\"color\",\"bright-lilac\",\"200\"]},\"300\":{\"value\":\"#9000c5\",\"path\":[\"color\",\"bright-lilac\",\"300\"]},\"400\":{\"value\":\"#bc08ff\",\"path\":[\"color\",\"bright-lilac\",\"400\"]},\"500\":{\"value\":\"#ce4bff\",\"path\":[\"color\",\"bright-lilac\",\"500\"]},\"600\":{\"value\":\"#e08dff\",\"path\":[\"color\",\"bright-lilac\",\"600\"]},\"700\":{\"value\":\"#e6a1ff\",\"path\":[\"color\",\"bright-lilac\",\"700\"]},\"800\":{\"value\":\"#ebb6ff\",\"path\":[\"color\",\"bright-lilac\",\"800\"]},\"900\":{\"value\":\"#f1caff\",\"path\":[\"color\",\"bright-lilac\",\"900\"]},\"1000\":{\"value\":\"#f6dfff\",\"path\":[\"color\",\"bright-lilac\",\"1000\"]},\"1100\":{\"value\":\"#f9e9ff\",\"path\":[\"color\",\"bright-lilac\",\"1100\"]}},\"super-teal\":{\"100\":{\"value\":\"#00424a\",\"path\":[\"color\",\"super-teal\",\"100\"]},\"200\":{\"value\":\"#004f59\",\"path\":[\"color\",\"super-teal\",\"200\"]},\"300\":{\"value\":\"#006b78\",\"path\":[\"color\",\"super-teal\",\"300\"]},\"400\":{\"value\":\"#008696\",\"path\":[\"color\",\"super-teal\",\"400\"]},\"500\":{\"value\":\"#00a1b5\",\"path\":[\"color\",\"super-teal\",\"500\"]},\"600\":{\"value\":\"#00d3ed\",\"path\":[\"color\",\"super-teal\",\"600\"]},\"700\":{\"value\":\"#26e7ff\",\"path\":[\"color\",\"super-teal\",\"700\"]},\"800\":{\"value\":\"#5eedff\",\"path\":[\"color\",\"super-teal\",\"800\"]},\"900\":{\"value\":\"#96f3ff\",\"path\":[\"color\",\"super-teal\",\"900\"]},\"1000\":{\"value\":\"#cffaff\",\"path\":[\"color\",\"super-teal\",\"1000\"]},\"1100\":{\"value\":\"#ebfdff\",\"path\":[\"color\",\"super-teal\",\"1100\"]}},\"categorical\":{\"sea-green\":{\"value\":\"#0fb5ae\",\"path\":[\"color\",\"categorical\",\"sea-green\"]},\"palatinate-blue\":{\"value\":\"#4046ca\",\"path\":[\"color\",\"categorical\",\"palatinate-blue\"]},\"tangerine\":{\"value\":\"#f68511\",\"path\":[\"color\",\"categorical\",\"tangerine\"]},\"magenta\":{\"value\":\"#de3d82\",\"path\":[\"color\",\"categorical\",\"magenta\"]},\"tropical-indigo\":{\"value\":\"#7e84fa\",\"path\":[\"color\",\"categorical\",\"tropical-indigo\"]},\"malachite\":{\"value\":\"#72e06a\",\"path\":[\"color\",\"categorical\",\"malachite\"]},\"azure\":{\"value\":\"#147af3\",\"path\":[\"color\",\"categorical\",\"azure\"]},\"violet\":{\"value\":\"#7326d3\",\"path\":[\"color\",\"categorical\",\"violet\"]},\"yellow\":{\"value\":\"#e8c600\",\"path\":[\"color\",\"categorical\",\"yellow\"]},\"alloy-orange\":{\"value\":\"#cb5d00\",\"path\":[\"color\",\"categorical\",\"alloy-orange\"]},\"green\":{\"value\":\"#008f5d\",\"path\":[\"color\",\"categorical\",\"green\"]},\"lime\":{\"value\":\"#bce931\",\"path\":[\"color\",\"categorical\",\"lime\"]}},\"transparent\":{\"value\":\"transparent\",\"path\":[\"color\",\"transparent\"]},\"code-syntax\":{\"keyword\":{\"value\":\"#ff7b72\",\"path\":[\"color\",\"code-syntax\",\"keyword\"]},\"type\":{\"value\":\"#d2a8ff\",\"path\":[\"color\",\"code-syntax\",\"type\"]},\"variable\":{\"value\":\"#79c0ff\",\"path\":[\"color\",\"code-syntax\",\"variable\"]},\"property\":{\"value\":\"#d2a8ff\",\"path\":[\"color\",\"code-syntax\",\"property\"]},\"string\":{\"value\":\"#a5d6ff\",\"path\":[\"color\",\"code-syntax\",\"string\"]},\"number\":{\"value\":\"#79c0ff\",\"path\":[\"color\",\"code-syntax\",\"number\"]},\"comment\":{\"value\":\"#a0a7b0\",\"path\":[\"color\",\"code-syntax\",\"comment\"]},\"function\":{\"value\":\"#d2a8ff\",\"path\":[\"color\",\"code-syntax\",\"function\"]},\"operator\":{\"value\":\"#ff7b72\",\"path\":[\"color\",\"code-syntax\",\"operator\"]},\"invalid\":{\"value\":\"#f97583\",\"path\":[\"color\",\"code-syntax\",\"invalid\"]}},\"black-alpha\":{\"100\":{\"value\":\"rgb(255 255 255 / 12.5%)\",\"path\":[\"color\",\"black-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(255 255 255 / 25%)\",\"path\":[\"color\",\"black-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(255 255 255 / 37.5%)\",\"path\":[\"color\",\"black-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(255 255 255 / 50%)\",\"path\":[\"color\",\"black-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(255 255 255 / 62.5%)\",\"path\":[\"color\",\"black-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(255 255 255 / 75%)\",\"path\":[\"color\",\"black-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(255 255 255 / 87.5%)\",\"path\":[\"color\",\"black-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(255 255 255 / 100%)\",\"path\":[\"color\",\"black-alpha\",\"800\"]}},\"white-alpha\":{\"100\":{\"value\":\"rgb(0 0 0 / 12.5%)\",\"path\":[\"color\",\"white-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(0 0 0 / 25%)\",\"path\":[\"color\",\"white-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(0 0 0 / 37.5%)\",\"path\":[\"color\",\"white-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(0 0 0 / 50%)\",\"path\":[\"color\",\"white-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(0 0 0 / 62.5%)\",\"path\":[\"color\",\"white-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(0 0 0 / 75%)\",\"path\":[\"color\",\"white-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(0 0 0 / 87.5%)\",\"path\":[\"color\",\"white-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(0 0 0 / 100%)\",\"path\":[\"color\",\"white-alpha\",\"800\"]}},\"static-black-alpha\":{\"100\":{\"value\":\"rgb(0 0 0 / 12.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(0 0 0 / 25%)\",\"path\":[\"color\",\"static-black-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(0 0 0 / 37.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(0 0 0 / 50%)\",\"path\":[\"color\",\"static-black-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(0 0 0 / 62.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(0 0 0 / 75%)\",\"path\":[\"color\",\"static-black-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(0 0 0 / 87.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(0 0 0 / 100%)\",\"path\":[\"color\",\"static-black-alpha\",\"800\"]}},\"static-white-alpha\":{\"100\":{\"value\":\"rgb(255 255 255 / 12.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(255 255 255 / 25%)\",\"path\":[\"color\",\"static-white-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(255 255 255 / 37.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(255 255 255 / 50%)\",\"path\":[\"color\",\"static-white-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(255 255 255 / 62.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(255 255 255 / 75%)\",\"path\":[\"color\",\"static-white-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(255 255 255 / 87.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(255 255 255 / 100%)\",\"path\":[\"color\",\"static-white-alpha\",\"800\"]}},\"gradient\":{\"value\":\"radial-gradient(circle at 18% 20%, #3D55C159, transparent 22%), radial-gradient(circle at 82% 18%, #00A1B54D, transparent 18%), radial-gradient(circle at 70% 82%, #715DEE47, transparent 24%), linear-gradient(180deg, #06070A 0%, #0A0E18 45%, #0F1424 100%)\",\"path\":[\"color\",\"gradient\"]},\"background-gradient\":{\"value\":\"linear-gradient(180deg,rgba(18, 21, 24, 1) 0%, rgba(35, 41, 64, 1) 80%)\",\"path\":[\"color\",\"background-gradient\"]}}");
+var color = /*#__PURE__*/ JSON.parse("{\"gray\":{\"100\":{\"value\":\"#1B1F24\",\"path\":[\"color\",\"gray\",\"100\"]},\"200\":{\"value\":\"#292F37\",\"path\":[\"color\",\"gray\",\"200\"]},\"300\":{\"value\":\"#3A434E\",\"path\":[\"color\",\"gray\",\"300\"]},\"400\":{\"value\":\"#5E6C7A\",\"path\":[\"color\",\"gray\",\"400\"]},\"500\":{\"value\":\"#8FA1B4\",\"path\":[\"color\",\"gray\",\"500\"]},\"600\":{\"value\":\"#B7C9DB\",\"path\":[\"color\",\"gray\",\"600\"]},\"700\":{\"value\":\"#DCE9F7\",\"path\":[\"color\",\"gray\",\"700\"]},\"800\":{\"value\":\"#E5EFF8\",\"path\":[\"color\",\"gray\",\"800\"]},\"900\":{\"value\":\"#F4F8FC\",\"path\":[\"color\",\"gray\",\"900\"]},\"1000\":{\"value\":\"#FFFFFF\",\"path\":[\"color\",\"gray\",\"1000\"]},\"1100\":{\"value\":\"#FFFFFF\",\"path\":[\"color\",\"gray\",\"1100\"]},\"1200\":{\"value\":\"#FFFFFF\",\"path\":[\"color\",\"gray\",\"1200\"]}},\"hosting-blue\":{\"100\":{\"value\":\"#00205C\",\"path\":[\"color\",\"hosting-blue\",\"100\"]},\"200\":{\"value\":\"#002A7B\",\"path\":[\"color\",\"hosting-blue\",\"200\"]},\"300\":{\"value\":\"#003FB8\",\"path\":[\"color\",\"hosting-blue\",\"300\"]},\"400\":{\"value\":\"#0054F5\",\"path\":[\"color\",\"hosting-blue\",\"400\"]},\"500\":{\"value\":\"#1A68FF\",\"path\":[\"color\",\"hosting-blue\",\"500\"]},\"600\":{\"value\":\"#3D80FF\",\"path\":[\"color\",\"hosting-blue\",\"600\"]},\"700\":{\"value\":\"#6197FF\",\"path\":[\"color\",\"hosting-blue\",\"700\"]},\"800\":{\"value\":\"#85AFFF\",\"path\":[\"color\",\"hosting-blue\",\"800\"]},\"900\":{\"value\":\"#ABC6FF\",\"path\":[\"color\",\"hosting-blue\",\"900\"]},\"1000\":{\"value\":\"#E0EBFF\",\"path\":[\"color\",\"hosting-blue\",\"1000\"]},\"1100\":{\"value\":\"#F0F5FF\",\"path\":[\"color\",\"hosting-blue\",\"1100\"]}},\"amaranth-red\":{\"100\":{\"value\":\"#540B1B\",\"path\":[\"color\",\"amaranth-red\",\"100\"]},\"200\":{\"value\":\"#710F24\",\"path\":[\"color\",\"amaranth-red\",\"200\"]},\"300\":{\"value\":\"#AB1737\",\"path\":[\"color\",\"amaranth-red\",\"300\"]},\"400\":{\"value\":\"#E1244C\",\"path\":[\"color\",\"amaranth-red\",\"400\"]},\"500\":{\"value\":\"#E54366\",\"path\":[\"color\",\"amaranth-red\",\"500\"]},\"600\":{\"value\":\"#EA637F\",\"path\":[\"color\",\"amaranth-red\",\"600\"]},\"700\":{\"value\":\"#EE8299\",\"path\":[\"color\",\"amaranth-red\",\"700\"]},\"800\":{\"value\":\"#F2A2B3\",\"path\":[\"color\",\"amaranth-red\",\"800\"]},\"900\":{\"value\":\"#F7C1CC\",\"path\":[\"color\",\"amaranth-red\",\"900\"]},\"1000\":{\"value\":\"#FBE0E6\",\"path\":[\"color\",\"amaranth-red\",\"1000\"]},\"1100\":{\"value\":\"#FDF0F3\",\"path\":[\"color\",\"amaranth-red\",\"1100\"]}},\"royal-orange\":{\"100\":{\"value\":\"#763200\",\"path\":[\"color\",\"royal-orange\",\"100\"]},\"200\":{\"value\":\"#8F3D00\",\"path\":[\"color\",\"royal-orange\",\"200\"]},\"300\":{\"value\":\"#C25200\",\"path\":[\"color\",\"royal-orange\",\"300\"]},\"400\":{\"value\":\"#F56800\",\"path\":[\"color\",\"royal-orange\",\"400\"]},\"500\":{\"value\":\"#FF8225\",\"path\":[\"color\",\"royal-orange\",\"500\"]},\"600\":{\"value\":\"#FF9343\",\"path\":[\"color\",\"royal-orange\",\"600\"]},\"700\":{\"value\":\"#FFA562\",\"path\":[\"color\",\"royal-orange\",\"700\"]},\"800\":{\"value\":\"#FFC89F\",\"path\":[\"color\",\"royal-orange\",\"800\"]},\"900\":{\"value\":\"#FFD9BD\",\"path\":[\"color\",\"royal-orange\",\"900\"]},\"1000\":{\"value\":\"#FFEBDC\",\"path\":[\"color\",\"royal-orange\",\"1000\"]},\"1100\":{\"value\":\"#FFF4EB\",\"path\":[\"color\",\"royal-orange\",\"1100\"]}},\"espelkamp-green\":{\"100\":{\"value\":\"#00291C\",\"path\":[\"color\",\"espelkamp-green\",\"100\"]},\"200\":{\"value\":\"#003B29\",\"path\":[\"color\",\"espelkamp-green\",\"200\"]},\"300\":{\"value\":\"#005F42\",\"path\":[\"color\",\"espelkamp-green\",\"300\"]},\"400\":{\"value\":\"#00825B\",\"path\":[\"color\",\"espelkamp-green\",\"400\"]},\"500\":{\"value\":\"#00A673\",\"path\":[\"color\",\"espelkamp-green\",\"500\"]},\"600\":{\"value\":\"#00DE9A\",\"path\":[\"color\",\"espelkamp-green\",\"600\"]},\"700\":{\"value\":\"#17FFB8\",\"path\":[\"color\",\"espelkamp-green\",\"700\"]},\"800\":{\"value\":\"#4FFFC9\",\"path\":[\"color\",\"espelkamp-green\",\"800\"]},\"900\":{\"value\":\"#87FFDA\",\"path\":[\"color\",\"espelkamp-green\",\"900\"]},\"1000\":{\"value\":\"#C0FFEB\",\"path\":[\"color\",\"espelkamp-green\",\"1000\"]},\"1100\":{\"value\":\"#DCFFF4\",\"path\":[\"color\",\"espelkamp-green\",\"1100\"]}},\"soft-contrast-violet\":{\"100\":{\"value\":\"#302a6f\",\"path\":[\"color\",\"soft-contrast-violet\",\"100\"]},\"200\":{\"value\":\"#483b9f\",\"path\":[\"color\",\"soft-contrast-violet\",\"200\"]},\"300\":{\"value\":\"#5d4abf\",\"path\":[\"color\",\"soft-contrast-violet\",\"300\"]},\"400\":{\"value\":\"#715DEE\",\"path\":[\"color\",\"soft-contrast-violet\",\"400\"]},\"500\":{\"value\":\"#8574F0\",\"path\":[\"color\",\"soft-contrast-violet\",\"500\"]},\"600\":{\"value\":\"#998BF3\",\"path\":[\"color\",\"soft-contrast-violet\",\"600\"]},\"700\":{\"value\":\"#AEA2F5\",\"path\":[\"color\",\"soft-contrast-violet\",\"700\"]},\"800\":{\"value\":\"#C2B9F8\",\"path\":[\"color\",\"soft-contrast-violet\",\"800\"]},\"900\":{\"value\":\"#D6D0FA\",\"path\":[\"color\",\"soft-contrast-violet\",\"900\"]},\"1000\":{\"value\":\"#EAE7FD\",\"path\":[\"color\",\"soft-contrast-violet\",\"1000\"]},\"1100\":{\"value\":\"#F4F3FE\",\"path\":[\"color\",\"soft-contrast-violet\",\"1100\"]}},\"mittwald-navy\":{\"100\":{\"value\":\"#0E142E\",\"path\":[\"color\",\"mittwald-navy\",\"100\"]},\"200\":{\"value\":\"#131B3D\",\"path\":[\"color\",\"mittwald-navy\",\"200\"]},\"300\":{\"value\":\"#1D285C\",\"path\":[\"color\",\"mittwald-navy\",\"300\"]},\"400\":{\"value\":\"#27367B\",\"path\":[\"color\",\"mittwald-navy\",\"400\"]},\"500\":{\"value\":\"#32459E\",\"path\":[\"color\",\"mittwald-navy\",\"500\"]},\"600\":{\"value\":\"#3D55C1\",\"path\":[\"color\",\"mittwald-navy\",\"600\"]},\"700\":{\"value\":\"#5F73CC\",\"path\":[\"color\",\"mittwald-navy\",\"700\"]},\"800\":{\"value\":\"#8291D7\",\"path\":[\"color\",\"mittwald-navy\",\"800\"]},\"900\":{\"value\":\"#A5B0E2\",\"path\":[\"color\",\"mittwald-navy\",\"900\"]},\"1000\":{\"value\":\"#C8CFEE\",\"path\":[\"color\",\"mittwald-navy\",\"1000\"]},\"1100\":{\"value\":\"#E4E7F6\",\"path\":[\"color\",\"mittwald-navy\",\"1100\"]}},\"bright-lilac\":{\"100\":{\"value\":\"#470062\",\"path\":[\"color\",\"bright-lilac\",\"100\"]},\"200\":{\"value\":\"#5f0083\",\"path\":[\"color\",\"bright-lilac\",\"200\"]},\"300\":{\"value\":\"#9000c5\",\"path\":[\"color\",\"bright-lilac\",\"300\"]},\"400\":{\"value\":\"#bc08ff\",\"path\":[\"color\",\"bright-lilac\",\"400\"]},\"500\":{\"value\":\"#ce4bff\",\"path\":[\"color\",\"bright-lilac\",\"500\"]},\"600\":{\"value\":\"#e08dff\",\"path\":[\"color\",\"bright-lilac\",\"600\"]},\"700\":{\"value\":\"#e6a1ff\",\"path\":[\"color\",\"bright-lilac\",\"700\"]},\"800\":{\"value\":\"#ebb6ff\",\"path\":[\"color\",\"bright-lilac\",\"800\"]},\"900\":{\"value\":\"#f1caff\",\"path\":[\"color\",\"bright-lilac\",\"900\"]},\"1000\":{\"value\":\"#f6dfff\",\"path\":[\"color\",\"bright-lilac\",\"1000\"]},\"1100\":{\"value\":\"#f9e9ff\",\"path\":[\"color\",\"bright-lilac\",\"1100\"]}},\"super-teal\":{\"100\":{\"value\":\"#00424a\",\"path\":[\"color\",\"super-teal\",\"100\"]},\"200\":{\"value\":\"#004f59\",\"path\":[\"color\",\"super-teal\",\"200\"]},\"300\":{\"value\":\"#006b78\",\"path\":[\"color\",\"super-teal\",\"300\"]},\"400\":{\"value\":\"#008696\",\"path\":[\"color\",\"super-teal\",\"400\"]},\"500\":{\"value\":\"#00a1b5\",\"path\":[\"color\",\"super-teal\",\"500\"]},\"600\":{\"value\":\"#00d3ed\",\"path\":[\"color\",\"super-teal\",\"600\"]},\"700\":{\"value\":\"#26e7ff\",\"path\":[\"color\",\"super-teal\",\"700\"]},\"800\":{\"value\":\"#5eedff\",\"path\":[\"color\",\"super-teal\",\"800\"]},\"900\":{\"value\":\"#96f3ff\",\"path\":[\"color\",\"super-teal\",\"900\"]},\"1000\":{\"value\":\"#cffaff\",\"path\":[\"color\",\"super-teal\",\"1000\"]},\"1100\":{\"value\":\"#ebfdff\",\"path\":[\"color\",\"super-teal\",\"1100\"]}},\"categorical\":{\"sea-green\":{\"value\":\"#0fb5ae\",\"path\":[\"color\",\"categorical\",\"sea-green\"]},\"palatinate-blue\":{\"value\":\"#4046ca\",\"path\":[\"color\",\"categorical\",\"palatinate-blue\"]},\"tangerine\":{\"value\":\"#f68511\",\"path\":[\"color\",\"categorical\",\"tangerine\"]},\"magenta\":{\"value\":\"#de3d82\",\"path\":[\"color\",\"categorical\",\"magenta\"]},\"tropical-indigo\":{\"value\":\"#7e84fa\",\"path\":[\"color\",\"categorical\",\"tropical-indigo\"]},\"malachite\":{\"value\":\"#72e06a\",\"path\":[\"color\",\"categorical\",\"malachite\"]},\"azure\":{\"value\":\"#147af3\",\"path\":[\"color\",\"categorical\",\"azure\"]},\"violet\":{\"value\":\"#7326d3\",\"path\":[\"color\",\"categorical\",\"violet\"]},\"yellow\":{\"value\":\"#e8c600\",\"path\":[\"color\",\"categorical\",\"yellow\"]},\"alloy-orange\":{\"value\":\"#cb5d00\",\"path\":[\"color\",\"categorical\",\"alloy-orange\"]},\"green\":{\"value\":\"#008f5d\",\"path\":[\"color\",\"categorical\",\"green\"]},\"lime\":{\"value\":\"#bce931\",\"path\":[\"color\",\"categorical\",\"lime\"]}},\"transparent\":{\"value\":\"transparent\",\"path\":[\"color\",\"transparent\"]},\"code-syntax\":{\"keyword\":{\"value\":\"#ff7b72\",\"path\":[\"color\",\"code-syntax\",\"keyword\"]},\"type\":{\"value\":\"#d2a8ff\",\"path\":[\"color\",\"code-syntax\",\"type\"]},\"variable\":{\"value\":\"#79c0ff\",\"path\":[\"color\",\"code-syntax\",\"variable\"]},\"property\":{\"value\":\"#d2a8ff\",\"path\":[\"color\",\"code-syntax\",\"property\"]},\"string\":{\"value\":\"#a5d6ff\",\"path\":[\"color\",\"code-syntax\",\"string\"]},\"number\":{\"value\":\"#79c0ff\",\"path\":[\"color\",\"code-syntax\",\"number\"]},\"comment\":{\"value\":\"#a0a7b0\",\"path\":[\"color\",\"code-syntax\",\"comment\"]},\"function\":{\"value\":\"#d2a8ff\",\"path\":[\"color\",\"code-syntax\",\"function\"]},\"operator\":{\"value\":\"#ff7b72\",\"path\":[\"color\",\"code-syntax\",\"operator\"]},\"invalid\":{\"value\":\"#f97583\",\"path\":[\"color\",\"code-syntax\",\"invalid\"]}},\"black-alpha\":{\"100\":{\"value\":\"rgb(255 255 255 / 12.5%)\",\"path\":[\"color\",\"black-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(255 255 255 / 25%)\",\"path\":[\"color\",\"black-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(255 255 255 / 37.5%)\",\"path\":[\"color\",\"black-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(255 255 255 / 50%)\",\"path\":[\"color\",\"black-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(255 255 255 / 62.5%)\",\"path\":[\"color\",\"black-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(255 255 255 / 75%)\",\"path\":[\"color\",\"black-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(255 255 255 / 87.5%)\",\"path\":[\"color\",\"black-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(255 255 255 / 100%)\",\"path\":[\"color\",\"black-alpha\",\"800\"]}},\"white-alpha\":{\"100\":{\"value\":\"rgb(0 0 0 / 12.5%)\",\"path\":[\"color\",\"white-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(0 0 0 / 25%)\",\"path\":[\"color\",\"white-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(0 0 0 / 37.5%)\",\"path\":[\"color\",\"white-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(0 0 0 / 50%)\",\"path\":[\"color\",\"white-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(0 0 0 / 62.5%)\",\"path\":[\"color\",\"white-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(0 0 0 / 75%)\",\"path\":[\"color\",\"white-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(0 0 0 / 87.5%)\",\"path\":[\"color\",\"white-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(0 0 0 / 100%)\",\"path\":[\"color\",\"white-alpha\",\"800\"]}},\"static-black-alpha\":{\"100\":{\"value\":\"rgb(0 0 0 / 12.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(0 0 0 / 25%)\",\"path\":[\"color\",\"static-black-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(0 0 0 / 37.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(0 0 0 / 50%)\",\"path\":[\"color\",\"static-black-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(0 0 0 / 62.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(0 0 0 / 75%)\",\"path\":[\"color\",\"static-black-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(0 0 0 / 87.5%)\",\"path\":[\"color\",\"static-black-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(0 0 0 / 100%)\",\"path\":[\"color\",\"static-black-alpha\",\"800\"]}},\"static-white-alpha\":{\"100\":{\"value\":\"rgb(255 255 255 / 12.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"100\"]},\"200\":{\"value\":\"rgb(255 255 255 / 25%)\",\"path\":[\"color\",\"static-white-alpha\",\"200\"]},\"300\":{\"value\":\"rgb(255 255 255 / 37.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"300\"]},\"400\":{\"value\":\"rgb(255 255 255 / 50%)\",\"path\":[\"color\",\"static-white-alpha\",\"400\"]},\"500\":{\"value\":\"rgb(255 255 255 / 62.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"500\"]},\"600\":{\"value\":\"rgb(255 255 255 / 75%)\",\"path\":[\"color\",\"static-white-alpha\",\"600\"]},\"700\":{\"value\":\"rgb(255 255 255 / 87.5%)\",\"path\":[\"color\",\"static-white-alpha\",\"700\"]},\"800\":{\"value\":\"rgb(255 255 255 / 100%)\",\"path\":[\"color\",\"static-white-alpha\",\"800\"]}},\"gradient\":{\"value\":\"radial-gradient(circle at 18% 20%, #3D55C159, transparent 22%), radial-gradient(circle at 82% 18%, #00A1B54D, transparent 18%), radial-gradient(circle at 70% 82%, #715DEE47, transparent 24%), linear-gradient(180deg, #06070A 0%, #0A0E18 45%, #0F1424 100%)\",\"path\":[\"color\",\"gradient\"]},\"background-gradient\":{\"value\":\"linear-gradient(180deg, #0d101a 0%, #354176 100%)\",\"path\":[\"color\",\"background-gradient\"]}}");
 var avatar = {
 	"size": {
 		"xs": {
@@ -2810,6 +2810,10 @@ var table = {
 		"path": ["table", "background-color-accent"]
 	}
 };
+var texture = { "grain": {
+	"value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.8' intercept='0.1'/%3E%3CfeFuncG type='linear' slope='0.8' intercept='0.1'/%3E%3CfeFuncB type='linear' slope='0.8' intercept='0.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
+	"path": ["texture", "grain"]
+} };
 var all_dark_default = {
 	"action-group": { "spacing": {
 		"m": {
@@ -5623,6 +5627,7 @@ var all_dark_default = {
 	},
 	separator,
 	table,
+	texture,
 	"file-card": {
 		"padding-x": {
 			"value": "8px",
@@ -5837,6 +5842,6 @@ var all_dark_default = {
 	}
 };
 //#endregion
-export { accordion, alert, area, avatar, axis, badge, bar, blur, breadcrumb, button, calendar, chat, choice, color, combine, danger, dark, decorative, all_dark_default as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, overlay, popover, primary, rating, scrollbar, section, separator, shadow, slider, success, table, tabs, text, tooltip, transition, unavailable, warning };
+export { accordion, alert, area, avatar, axis, badge, bar, blur, breadcrumb, button, calendar, chat, choice, color, combine, danger, dark, decorative, all_dark_default as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, overlay, popover, primary, rating, scrollbar, section, separator, shadow, slider, success, table, tabs, text, texture, tooltip, transition, unavailable, warning };
 
 //# sourceMappingURL=all-dark.mjs.map