@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.51

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

@@ -1,21 +1,26 @@
 "use client"
 /* */
 import Table_module_default from "../../Table.module.mjs";
+import { IsFirstColumnContext } from "./context.mjs";
 import clsx from "clsx";
+import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Table/components/TableHeader/TableHeader.tsx
+// src/components/Table/components/TableHeader/TableHeader.tsx
 /** @flr-generate all */
 var TableHeader = (props) => {
 	const { children, className, ...rest } = props;
 	const rootClassName = clsx(Table_module_default.header, className);
+	const columns = typeof children === "function" ? children : Children.toArray(children).map((column, index) => /* @__PURE__ */ jsx(IsFirstColumnContext, {
+		value: index === 0,
+		children: column
+	}, index));
 	return /* @__PURE__ */ jsx(Aria.TableHeader, {
 		className: rootClassName,
 		...rest,
-		children
+		children: columns
 	});
 };
-//#endregion
 export { TableHeader, TableHeader as default };
 
 //# sourceMappingURL=TableHeader.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {children}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C;CACe,CAAA;AAEtB"}
+{"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import { Children, type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { IsFirstColumnContext } from \"./context\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  // Assumes the first child renders a column; a wrapper that renders nothing\n  // leaves the table without row header column, and react-aria throws.\n  const columns =\n    typeof children === \"function\"\n      ? children\n      : Children.toArray(children).map((column, index) => (\n          <IsFirstColumnContext key={index} value={index === 0}>\n            {column}\n          </IsFirstColumnContext>\n        ));\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {columns}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;;;AASA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAInD,MAAM,UACJ,OAAO,aAAa,aAChB,WACA,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,QAAQ,UACtC,oBAAC,sBAAD;EAAkC,OAAO,UAAU;EAChD,UAAA;CACmB,GAFK,KAEL,CACvB;CAEP,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C,UAAA;CACe,CAAA;AAEtB"}

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

@@ -0,0 +1,13 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+// src/components/Table/components/TableHeader/context.ts
+/**
+* Whether a column is the first of its `TableHeader`. Undefined outside a
+* header that can tell, e.g. with dynamic `columns`.
+*/
+var IsFirstColumnContext = createContext(void 0);
+var useIsFirstColumn = () => useContext(IsFirstColumnContext);
+export { IsFirstColumnContext, useIsFirstColumn };
+
+//# sourceMappingURL=context.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Whether a column is the first of its `TableHeader`. Undefined outside a\n * header that can tell, e.g. with dynamic `columns`.\n */\nexport const IsFirstColumnContext = createContext<boolean | undefined>(\n  undefined,\n);\n\nexport const useIsFirstColumn = () => useContext(IsFirstColumnContext);\n"],"mappings":";;;;;;;;AAMA,IAAa,uBAAuB,cAClC,KAAA,CACF;AAEA,IAAa,yBAAyB,WAAW,oBAAoB"}

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

@@ -4,7 +4,7 @@ import Table_module_default from "../../Table.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Table/components/TableRow/TableRow.tsx
+// src/components/Table/components/TableRow/TableRow.tsx
 /** @flr-generate all */
 var TableRow = (props) => {
 	const { children, className, footer, ...rest } = props;
@@ -14,7 +14,6 @@ var TableRow = (props) => {
 		children
 	});
 };
-//#endregion
 export { TableRow, TableRow as default };
 
 //# sourceMappingURL=TableRow.mjs.map

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

@@ -10,7 +10,7 @@ import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useIsSSR } from "react-aria";
 import * as Aria from "react-aria-components";
-//#region src/components/Tabs/Tabs.tsx
+// src/components/Tabs/Tabs.tsx
 /** @flr-generate all */
 var Tabs = flowComponent("Tabs", (props) => {
 	const { children, className, defaultSelectedKey, selectedKey: selectedKeyProps, disabledKeys, ref, onSelectionChange, tabNotFoundView, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest } = props;
@@ -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, {
@@ -48,7 +46,6 @@ var Tabs = flowComponent("Tabs", (props) => {
 		]
 	})] });
 });
-//#endregion
 export { Tabs, Tabs as default };
 
 //# sourceMappingURL=Tabs.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Tabs/Tabs.module.scss
+// src/components/Tabs/Tabs.module.scss
 var tabs = "flow--tabs";
 var list = "flow--tabs--list";
 var fallbackTab = "flow--tabs--fallback-tab";
@@ -11,7 +11,6 @@ var Tabs_module_default = {
 	fallbackTab,
 	tabPanel
 };
-//#endregion
 export { Tabs_module_default as default, fallbackTab, list, tabPanel, tabs };
 
 //# sourceMappingURL=Tabs.module.mjs.map

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

@@ -8,7 +8,7 @@ import { IllustratedMessage } from "../../../IllustratedMessage/IllustratedMessa
 import Tabs_module_default from "../../Tabs.module.mjs";
 import __locale_default from "../../../../../../../_virtual/_34.locale.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Tabs/components/FallbackTab/FallbackTab.tsx
+// src/components/Tabs/components/FallbackTab/FallbackTab.tsx
 var FallbackTab = (props) => {
 	const { tabNotFoundView } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Tabs");
@@ -26,7 +26,6 @@ var FallbackTab = (props) => {
 		]
 	});
 };
-//#endregion
 export { FallbackTab };
 
 //# sourceMappingURL=FallbackTab.mjs.map

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

@@ -9,7 +9,7 @@ import clsx from "clsx";
 import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Tabs/components/Tab/Tab.tsx
+// src/components/Tabs/components/Tab/Tab.tsx
 /** @flr-generate all */
 var Tab = (props) => {
 	const { children, className, id: idFromProps, ...rest } = props;
@@ -48,7 +48,6 @@ var Tab = (props) => {
 		})
 	});
 };
-//#endregion
 export { Tab, Tab as default };
 
 //# sourceMappingURL=Tab.mjs.map

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

@@ -1,11 +1,10 @@
 "use client"
 /* */
 import { createContext, useContext } from "react";
-//#region src/components/Tabs/components/Tab/context.ts
+// src/components/Tabs/components/Tab/context.ts
 var tabContext = createContext({ id: "undefined" });
 var useTabContext = () => useContext(tabContext);
 var TabContextProvider = tabContext.Provider;
-//#endregion
 export { TabContextProvider, useTabContext };
 
 //# sourceMappingURL=context.mjs.map

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

@@ -13,7 +13,7 @@ import clsx from "clsx";
 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
+// src/components/Tabs/components/TabList/TabList.tsx
 var TabList = (props) => {
 	const { selection, disabledKeys, onContextMenuSelectionChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
 	const isSkeleton = useSkeletonMode();
@@ -69,7 +69,6 @@ var TabList = (props) => {
 		]
 	});
 };
-//#endregion
 export { TabList };
 
 //# sourceMappingURL=TabList.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Tabs/components/TabList/TabList.module.scss
+// src/components/Tabs/components/TabList/TabList.module.scss
 var tabList = "flow--tabs--tab-list";
 var activeIndicator = "flow--tabs--tab-list--active-indicator";
 var animated = "flow--tabs--tab-list--animated";
@@ -15,7 +15,6 @@ var TabList_module_default = {
 	titles,
 	collapsed
 };
-//#endregion
 export { activeIndicator, animated, collapsed, contextMenuButton, TabList_module_default as default, tabList, titles };
 
 //# sourceMappingURL=TabList.module.mjs.map

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

@@ -9,7 +9,7 @@ import { useTabContext } from "../Tab/context.mjs";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Tabs/components/TabTitle/TabTitle.tsx
+// src/components/Tabs/components/TabTitle/TabTitle.tsx
 /** @flr-generate all */
 var TabTitle = (props) => {
 	const { children, className, ...rest } = props;
@@ -46,7 +46,6 @@ var TabTitle = (props) => {
 		})
 	})] });
 };
-//#endregion
 export { TabTitle, TabTitle as default };
 
 //# sourceMappingURL=TabTitle.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Tabs/components/TabTitle/TabTitle.module.scss
+// src/components/Tabs/components/TabTitle/TabTitle.module.scss
 var tabTitle = "flow--tabs--tab-title";
 var text = "flow--tabs--tab-title--text";
 var skeleton = "flow--tabs--tab-title--skeleton";
@@ -11,7 +11,6 @@ var TabTitle_module_default = {
 	skeleton,
 	menuItem
 };
-//#endregion
 export { TabTitle_module_default as default, menuItem, skeleton, tabTitle, text };
 
 //# sourceMappingURL=TabTitle.module.mjs.map

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

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

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

@@ -2,7 +2,7 @@
 /* */
 import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
 import { useLayoutEffect, useRef, useState } from "react";
-//#region src/components/Tabs/lib/useTabIndicator.ts
+// src/components/Tabs/lib/useTabIndicator.ts
 var getTabIndicatorStyle = (state) => state && {
 	"--tab-indicator-x": `${state.x}px`,
 	"--tab-indicator-width": `${state.width}px`
@@ -55,7 +55,6 @@ var useTabIndicator = (isCollapsed) => {
 		isAnimated: indicator?.isAnimated ?? false
 	};
 };
-//#endregion
 export { useTabIndicator };
 
 //# sourceMappingURL=useTabIndicator.mjs.map

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

@@ -12,7 +12,7 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 import invariant from "invariant";
-//#region src/components/Text/Text.tsx
+// src/components/Text/Text.tsx
 /** @flr-generate all */
 var Text = flowComponent("Text", (props) => {
 	const { children, className, elementType = "span", emulateBoldWidth, ref, color = "default", align = "start", wrap, style: styleFromProps, whiteSpace, wordBreak, noLigatures, ...rest } = props;
@@ -61,7 +61,6 @@ var Text = flowComponent("Text", (props) => {
 		children: childrenElement
 	});
 });
-//#endregion
 export { Text, Text as default };
 
 //# sourceMappingURL=Text.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Text/Text.module.scss
+// src/components/Text/Text.module.scss
 var text = "flow--text";
 var dark = "flow--text--dark";
 var light = "flow--text--light";
@@ -20,7 +20,6 @@ var Text_module_default = {
 	"wrap-pretty": "flow--text--wrap-pretty",
 	"no-ligatures": "flow--text--no-ligatures"
 };
-//#endregion
 export { dark, Text_module_default as default, icon, light, text };
 
 //# sourceMappingURL=Text.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n  text-wrap-style: pretty;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* `Text` styles raw HTML that its children bring along — `Markdown` nests\n     bare `<ul>`/`<ol>`/`<blockquote>` inside a `Text`, and consumers write the\n     same markup by hand. None of it is authored here, so none of it is classed. */\n  // stylelint-disable selector-max-type -- children's raw HTML, see above\n  ul,\n  ol {\n    padding-inline-start: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height-s);\n      height: var(--line-height-s);\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n\n  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* `Text` styles raw HTML that its children bring along — `Markdown` nests\n     bare `<ul>`/`<ol>`/`<blockquote>` inside a `Text`, and consumers write the\n     same markup by hand. None of it is authored here, so none of it is classed. */\n  // stylelint-disable selector-max-type -- children's raw HTML, see above\n  ul,\n  ol {\n    padding-inline-start: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height-s);\n      height: var(--line-height-s);\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n\n  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}

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

@@ -14,7 +14,7 @@ import { useEffect, useLayoutEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
-//#region src/components/TextArea/TextArea.tsx
+// src/components/TextArea/TextArea.tsx
 /** @flr-generate all */
 var TextArea = flowComponent("TextArea", (props) => {
 	const warnDeprecation = useWarnDeprecation();
@@ -106,7 +106,6 @@ var TextArea = flowComponent("TextArea", (props) => {
 		})
 	});
 });
-//#endregion
 export { TextArea, TextArea as default };
 
 //# sourceMappingURL=TextArea.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/TextArea/TextArea.module.scss
+// src/components/TextArea/TextArea.module.scss
 var input = "flow--text-area--input";
 var horizontalResize = "flow--text-area--horizontal-resize";
 var verticalResize = "flow--text-area--vertical-resize";
@@ -15,7 +15,6 @@ var TextArea_module_default = {
 	"skeleton-surface-shimmer": "flow--text-area--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--text-area--skeleton-text-shimmer"
 };
-//#endregion
 export { TextArea_module_default as default, horizontalResize, input, readonly, resize, verticalResize };
 
 //# sourceMappingURL=TextArea.module.mjs.map

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

@@ -16,7 +16,7 @@ import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/TextField/TextField.tsx
+// src/components/TextField/TextField.tsx
 /** @flr-generate all */
 var TextField = flowComponent("TextField", (props) => {
 	const { className, showCharacterCount, form, placeholder, ref, type: typeFromProps, children, onChange, ...rest } = useControlledHostValueProps(props, "");
@@ -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 })
@@ -91,7 +94,6 @@ var TextField = flowComponent("TextField", (props) => {
 		})
 	});
 });
-//#endregion
 export { TextField, TextField as default };
 
 //# sourceMappingURL=TextField.mjs.map

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/TextField/TextField.module.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/TextField/TextField.module.scss
+// src/components/TextField/TextField.module.scss
 var inputContainer = "flow--text-field--input-container";
 var input = "flow--text-field--input";
 var readonly = "flow--text-field--readonly";
@@ -13,7 +13,6 @@ var TextField_module_default = {
 	button,
 	"skeleton-text-shimmer": "flow--text-field--skeleton-text-shimmer"
 };
-//#endregion
 export { button, TextField_module_default as default, input, inputContainer, readonly };
 
 //# sourceMappingURL=TextField.module.mjs.map

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

@@ -10,7 +10,7 @@ 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
+// src/components/TimeField/TimeField.tsx
 /** @flr-generate all */
 var TimeField = flowComponent("TimeField", (props) => {
 	const { children, className, ref, ...rest } = useControlledHostValueProps(props, null);
@@ -31,7 +31,6 @@ var TimeField = flowComponent("TimeField", (props) => {
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { TimeField, TimeField as default };
 
 //# sourceMappingURL=TimeField.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/TimeField/TimeField.module.scss
+// src/components/TimeField/TimeField.module.scss
 var dateInput = "flow--time-field--date-input";
 var readonly = "flow--time-field--readonly";
 var TimeField_module_default = {
@@ -9,7 +9,6 @@ var TimeField_module_default = {
 	"skeleton-surface-shimmer": "flow--time-field--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--time-field--skeleton-text-shimmer"
 };
-//#endregion
 export { dateInput, TimeField_module_default as default, readonly };
 
 //# sourceMappingURL=TimeField.module.mjs.map

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

@@ -6,7 +6,7 @@ import Tooltip_module_default from "./Tooltip.module.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Tooltip/Tooltip.tsx
+// src/components/Tooltip/Tooltip.tsx
 /** @flr-generate all */
 var Tooltip = (props) => {
 	const { children, className, ...rest } = props;
@@ -26,7 +26,6 @@ var Tooltip = (props) => {
 		}), children]
 	}) });
 };
-//#endregion
 export { Tooltip, Tooltip as default };
 
 //# sourceMappingURL=Tooltip.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Tooltip/Tooltip.module.scss
+// src/components/Tooltip/Tooltip.module.scss
 var tooltip = "flow--tooltip";
 var tip = "flow--tooltip--tip";
 var tipIcon = "flow--tooltip--tip-icon";
@@ -11,7 +11,6 @@ var Tooltip_module_default = {
 	tipIcon,
 	slide
 };
-//#endregion
 export { Tooltip_module_default as default, slide, tip, tipIcon, tooltip };
 
 //# sourceMappingURL=Tooltip.module.mjs.map

package/dist/js/packages/components/src/components/Tooltip/components/TooltipTrigger/TooltipTrigger.mjs

@@ -2,7 +2,7 @@
 /* */
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx
+// src/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx
 var delays = {
 	default: 400,
 	long: 1500
@@ -16,7 +16,6 @@ var TooltipTrigger = (props) => {
 		children
 	});
 };
-//#endregion
 export { TooltipTrigger, TooltipTrigger as default };
 
 //# sourceMappingURL=TooltipTrigger.mjs.map

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

@@ -2,7 +2,7 @@
 /* */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/TranslationProvider/TranslationProvider.tsx
+// src/components/TranslationProvider/TranslationProvider.tsx
 var context = createContext({});
 var useTranslationProvider = () => useContext(context);
 /** @flr-generate all */
@@ -16,7 +16,6 @@ var TranslationProvider = (props) => {
 		children
 	});
 };
-//#endregion
 export { TranslationProvider, TranslationProvider as default, useTranslationProvider };
 
 //# sourceMappingURL=TranslationProvider.mjs.map