@mittwald/flow-react-components 0.2.0-alpha.865 → 0.2.0-alpha.866

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs

@@ -1,95 +1,86 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styles from './SectionHeader.module.scss.mjs';
-import clsx from 'clsx';
-import '../../../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
-import { UiComponentTunnelExit } from '../../../UiComponentTunnel/UiComponentTunnelExit.mjs';
+import PropsContextProvider from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
+import "../../../../lib/propsContext/index.mjs";
+import { UiComponentTunnelExit } from "../../../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import SectionHeader_module_default from "./SectionHeader.module.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Section/components/SectionHeader/SectionHeader.tsx
+var SectionHeader = flowComponent("SectionHeader", (props) => {
+	const { children, className, ref } = props;
+	return /* @__PURE__ */ jsx("header", {
+		ref,
+		className: clsx(SectionHeader_module_default.sectionHeader, className),
+		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			props: {
+				Switch: {
+					labelPosition: "leading",
+					tunnel: {
+						id: "actions",
+						component: "SectionHeader"
+					}
+				},
+				Button: {
+					size: "s",
+					tunnel: {
+						id: "actions",
+						component: "SectionHeader"
+					}
+				},
+				FileField: {
+					tunnel: {
+						id: "actions",
+						component: "SectionHeader"
+					},
+					Button: { size: "s" }
+				},
+				ContextMenuTrigger: {
+					tunnel: {
+						id: "actions",
+						component: "SectionHeader"
+					},
+					Button: { tunnel: null }
+				},
+				PopoverTrigger: {
+					tunnel: {
+						id: "actions",
+						component: "SectionHeader"
+					},
+					Button: { tunnel: null }
+				},
+				ContextualHelpTrigger: {
+					tunnel: {
+						id: "actions",
+						component: "SectionHeader"
+					},
+					Button: { tunnel: null }
+				},
+				Action: {
+					tunnel: {
+						id: "actions",
+						component: "SectionHeader"
+					},
+					Button: { tunnel: null }
+				},
+				Heading: { level: 2 },
+				Link: { tunnel: {
+					id: "actions",
+					component: "SectionHeader"
+				} }
+			},
+			children: [children, /* @__PURE__ */ jsx("div", {
+				className: SectionHeader_module_default.actions,
+				children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: "actions",
+					component: "SectionHeader"
+				})
+			})]
+		})
+	});
+}, { type: "layout" });
+//#endregion
+export { SectionHeader as default };
 
-const SectionHeader = flowComponent(
-  "SectionHeader",
-  (props) => {
-    const { children, className, ref } = props;
-    const rootClassName = clsx(styles.sectionHeader, className);
-    const propsContext = {
-      Switch: {
-        labelPosition: "leading",
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        }
-      },
-      Button: {
-        size: "s",
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        }
-      },
-      FileField: {
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        },
-        Button: { size: "s" }
-      },
-      ContextMenuTrigger: {
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        },
-        Button: {
-          tunnel: null
-        }
-      },
-      PopoverTrigger: {
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        },
-        Button: {
-          tunnel: null
-        }
-      },
-      ContextualHelpTrigger: {
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        },
-        Button: {
-          tunnel: null
-        }
-      },
-      Action: {
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        },
-        Button: {
-          tunnel: null
-        }
-      },
-      Heading: {
-        level: 2
-      },
-      Link: {
-        tunnel: {
-          id: "actions",
-          component: "SectionHeader"
-        }
-      }
-    };
-    return /* @__PURE__ */ jsx("header", { ref, className: rootClassName, children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
-      children,
-      /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "actions", component: "SectionHeader" }) })
-    ] }) });
-  },
-  {
-    type: "layout"
-  }
-);
-
-export { SectionHeader, SectionHeader as default };
-//# sourceMappingURL=SectionHeader.mjs.map
+//# sourceMappingURL=SectionHeader.mjs.map

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.mjs","sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n  PropsWithClassName &\n  RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n  \"SectionHeader\",\n  (props) => {\n    const { children, className, ref } = props;\n\n    const rootClassName = clsx(styles.sectionHeader, className);\n\n    const propsContext: PropsContext = {\n      Switch: {\n        labelPosition: \"leading\",\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n      },\n      Button: {\n        size: \"s\",\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n      },\n      FileField: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: { size: \"s\" },\n      },\n      ContextMenuTrigger: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      PopoverTrigger: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      ContextualHelpTrigger: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      Action: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      Heading: {\n        level: 2,\n      },\n      Link: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n      },\n    };\n\n    return (\n      <header ref={ref} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n          <div className={styles.actions}>\n            <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n          </div>\n        </PropsContextProvider>\n      </header>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default SectionHeader;\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,aAAA,GAAwC,aAAA;AAAA,EACnD,eAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAI,GAAI,KAAA;AAErC,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,aAAA,EAAe,SAAS,CAAA;AAE1D,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe,SAAA;AAAA,QACf,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,GAAA;AAAA,QACN,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,SAAA,EAAW;AAAA,QACT,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ,EAAE,IAAA,EAAM,GAAA;AAAI,OACtB;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,cAAA,EAAgB;AAAA,QACd,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,qBAAA,EAAuB;AAAA,QACrB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb;AACF,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,YAAO,GAAA,EAAU,SAAA,EAAW,eAC3B,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,SAAA,EAAU,SAAA,EAAU,eAAA,EAAgB,CAAA,EAChE;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}
+{"version":3,"file":"SectionHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n  PropsWithClassName &\n  RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n  \"SectionHeader\",\n  (props) => {\n    const { children, className, ref } = props;\n\n    const rootClassName = clsx(styles.sectionHeader, className);\n\n    const propsContext: PropsContext = {\n      Switch: {\n        labelPosition: \"leading\",\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n      },\n      Button: {\n        size: \"s\",\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n      },\n      FileField: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: { size: \"s\" },\n      },\n      ContextMenuTrigger: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      PopoverTrigger: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      ContextualHelpTrigger: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      Action: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      Heading: {\n        level: 2,\n      },\n      Link: {\n        tunnel: {\n          id: \"actions\",\n          component: \"SectionHeader\",\n        },\n      },\n    };\n\n    return (\n      <header ref={ref} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n          <div className={styles.actions}>\n            <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n          </div>\n        </PropsContextProvider>\n      </header>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;AAaA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAyErC,OACE,oBAAC,UAAD;EAAa;EAAK,WAxEE,KAAK,6BAAO,eAAe,SAwElB;YAC3B,qBAAC,sBAAD;GAAsB,OAAO;IAtE/B,QAAQ;KACN,eAAe;KACf,QAAQ;MACN,IAAI;MACJ,WAAW;KACb;IACF;IACA,QAAQ;KACN,MAAM;KACN,QAAQ;MACN,IAAI;MACJ,WAAW;KACb;IACF;IACA,WAAW;KACT,QAAQ;MACN,IAAI;MACJ,WAAW;KACb;KACA,QAAQ,EAAE,MAAM,IAAI;IACtB;IACA,oBAAoB;KAClB,QAAQ;MACN,IAAI;MACJ,WAAW;KACb;KACA,QAAQ,EACN,QAAQ,KACV;IACF;IACA,gBAAgB;KACd,QAAQ;MACN,IAAI;MACJ,WAAW;KACb;KACA,QAAQ,EACN,QAAQ,KACV;IACF;IACA,uBAAuB;KACrB,QAAQ;MACN,IAAI;MACJ,WAAW;KACb;KACA,QAAQ,EACN,QAAQ,KACV;IACF;IACA,QAAQ;KACN,QAAQ;MACN,IAAI;MACJ,WAAW;KACb;KACA,QAAQ,EACN,QAAQ,KACV;IACF;IACA,SAAS,EACP,OAAO,EACT;IACA,MAAM,EACJ,QAAQ;KACN,IAAI;KACJ,WAAW;IACb,EACF;GAK+B;aAA7B,CACG,UACD,oBAAC,OAAD;IAAK,WAAW,6BAAO;cACrB,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.module.mjs

@@ -0,0 +1,10 @@
+"use client"
+/* */
+var SectionHeader_module_default = {
+	sectionHeader: "flow--section--section-header",
+	actions: "flow--section--section-header--actions"
+};
+//#endregion
+export { SectionHeader_module_default as default };
+
+//# sourceMappingURL=SectionHeader.module.mjs.map

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.module.scss"],"sourcesContent":[".sectionHeader {\n  display: flex;\n  gap: var(--section-header--heading-to-action-spacing);\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  .actions {\n    display: flex;\n    gap: var(--section-header--action-to-action-spacing);\n    margin-inline-start: auto;\n    flex-wrap: wrap;\n  }\n\n  &:not(:first-child):has(h2),\n  &:not(:first-child):has(h3) {\n    margin-top: var(--section--sub-heading-spacing-m);\n  }\n\n  &:not(:first-child):has(h4),\n  &:not(:first-child):has(h5),\n  &:not(:first-child):has(h6) {\n    margin-top: var(--section--sub-heading-spacing-s);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Section/index.mjs

@@ -0,0 +1 @@
+import "./Section.mjs";

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

@@ -1,74 +1,58 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import 'react';
-import * as Aria from 'react-aria-components';
-import formFieldStyles from '../FormField/FormField.module.scss.mjs';
-import styles from './SegmentedControl.module.scss.mjs';
-import { getContainerBreakpointSizeClassName } from '../../lib/getContainerBreakpointSizeClassName.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import clsx from 'clsx';
-import { useObjectRef } from '@react-aria/utils';
-import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
-
-const SegmentedControl = flowComponent("SegmentedControl", (props) => {
-  const {
-    children,
-    className,
-    containerBreakpointSize = "m",
-    ref,
-    ...rest
-  } = props;
-  const {
-    FieldErrorView,
-    fieldPropsContext,
-    fieldProps,
-    FieldErrorCaptureContext
-  } = useFieldComponent(props, "SegmentedControl");
-  const rootClassName = clsx(
-    formFieldStyles.formField,
-    styles.segmentedControlContainer,
-    className,
-    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)]
-  );
-  const propsContext = {
-    Segment: {
-      tunnel: {
-        id: "segments",
-        component: "SegmentedControl"
-      },
-      className: styles.segment
-    },
-    ...fieldPropsContext
-  };
-  const objectRef = useObjectRef(ref);
-  useMakeFocusable(objectRef);
-  return /* @__PURE__ */ jsxs(
-    Aria.RadioGroup,
-    {
-      ...rest,
-      className: clsx(rootClassName, fieldProps.className),
-      ref: objectRef,
-      children: [
-        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { dependencies: ["segment"], props: propsContext, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.segmentedControl, children: /* @__PURE__ */ jsx("div", { className: styles.segments, children: /* @__PURE__ */ jsx(
-            UiComponentTunnelExit,
-            {
-              id: "segments",
-              component: "SegmentedControl"
-            }
-          ) }) }),
-          children
-        ] }) }),
-        /* @__PURE__ */ jsx(FieldErrorView, {})
-      ]
-    }
-  );
+import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import "../../lib/propsContext/index.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import FormField_module_default from "../FormField/FormField.module.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
+import SegmentedControl_module_default from "./SegmentedControl.module.mjs";
+import { getContainerBreakpointSizeClassName } from "../../lib/getContainerBreakpointSizeClassName.mjs";
+import clsx from "clsx";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "@react-aria/utils";
+import * as Aria from "react-aria-components";
+//#region src/components/SegmentedControl/SegmentedControl.tsx
+/** @flr-generate all */
+var SegmentedControl = flowComponent("SegmentedControl", (props) => {
+	const { children, className, containerBreakpointSize = "m", ref, ...rest } = props;
+	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "SegmentedControl");
+	const rootClassName = clsx(FormField_module_default.formField, SegmentedControl_module_default.segmentedControlContainer, className, SegmentedControl_module_default[getContainerBreakpointSizeClassName(containerBreakpointSize)]);
+	const propsContext = {
+		Segment: {
+			tunnel: {
+				id: "segments",
+				component: "SegmentedControl"
+			},
+			className: SegmentedControl_module_default.segment
+		},
+		...fieldPropsContext
+	};
+	const objectRef = useObjectRef(ref);
+	useMakeFocusable(objectRef);
+	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
+		...rest,
+		className: clsx(rootClassName, fieldProps.className),
+		ref: objectRef,
+		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			dependencies: ["segment"],
+			props: propsContext,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: SegmentedControl_module_default.segmentedControl,
+				children: /* @__PURE__ */ jsx("div", {
+					className: SegmentedControl_module_default.segments,
+					children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+						id: "segments",
+						component: "SegmentedControl"
+					})
+				})
+			}), children]
+		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+	});
 });
+//#endregion
+export { SegmentedControl as default };
 
-export { SegmentedControl };
-//# sourceMappingURL=SegmentedControl.mjs.map
+//# sourceMappingURL=SegmentedControl.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,MAAM,gBAAA,GAAmB,aAAA,CAAc,kBAAA,EAAoB,CAAC,KAAA,KAAU;AAC3E,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA,GAA0B,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,kBAAkB,CAAA;AAE/C,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,yBAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,mCAAA,CAAoC,uBAAuB,CAAC;AAAA,GACrE;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,UAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAClC,EAAA,gBAAA,CAAiB,SAAS,CAAA;AAE1B,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,SAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,SAAS,CAAA,EAAG,OAAO,YAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,gBAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,QAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,YAAC,qBAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAG,UAAA;AAAA,cACH,SAAA,EAAU;AAAA;AAAA,aAEd,CAAA,EACF,CAAA;AAAA,UACC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"SegmentedControl.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAC3E,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,kBAAkB;CAE/C,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,gCAAO,2BACP,WACA,gCAAO,oCAAoC,uBAAuB,EACpE;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAW,gCAAO;EACpB;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,KAAK;YAHP,CAKE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,cAAc,CAAC,SAAS;GAAG,OAAO;aAAxD,CACE,oBAAC,OAAD;IAAK,WAAW,gCAAO;cACrB,oBAAC,OAAD;KAAK,WAAW,gCAAO;eACrB,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACE,CAAA;GACF,CAAA,GACJ,QACmB;KACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+var SegmentedControl_module_default = {
+	segmentedControl: "flow--segmented-control",
+	segments: "flow--segmented-control--segments",
+	segmentedControlContainer: "flow--segmented-control--segmented-control-container",
+	"container-breakpoint-size-xs": "flow--segmented-control--container-breakpoint-size-xs",
+	segment: "flow--segmented-control--segment",
+	"container-breakpoint-size-s": "flow--segmented-control--container-breakpoint-size-s",
+	"container-breakpoint-size-m": "flow--segmented-control--container-breakpoint-size-m",
+	"container-breakpoint-size-l": "flow--segmented-control--container-breakpoint-size-l",
+	"container-breakpoint-size-xl": "flow--segmented-control--container-breakpoint-size-xl"
+};
+//#endregion
+export { SegmentedControl_module_default as default };
+
+//# sourceMappingURL=SegmentedControl.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.module.scss"],"sourcesContent":["@use \"../../styles/mixins/containerBreakpointSizes\";\n\n.segmentedControl {\n  order: 2;\n  container-type: inline-size;\n  isolation: isolate;\n\n  .segments {\n    display: flex;\n    flex-wrap: nowrap;\n    order: 2;\n  }\n}\n\n.segmentedControlContainer {\n  @include containerBreakpointSizes.containerBreakpointSizes(\n    250,\n    400,\n    550,\n    700,\n    850\n  ) {\n    .segmentedControl {\n      .segments {\n        flex-direction: column;\n      }\n\n      .segment {\n        margin-bottom: -1px; /* Collapse borders */\n        margin-right: 0;\n\n        &:first-of-type {\n          border-start-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: 0;\n        }\n\n        &:last-of-type {\n          border-end-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: 0;\n          margin: 0;\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs

@@ -1,25 +1,25 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from './Segment.module.scss.mjs';
-import * as Aria from 'react-aria-components';
-import clsx from 'clsx';
-import 'react';
-import '@mittwald/flow-icons';
-import '../../../Icon/components/IconSetProvider.mjs';
-import '../../../Icon/Icon.mjs';
-import '../../../../views/IconView.mjs';
-import { IconCheck } from '../../../Icon/components/icons/IconCheck.mjs';
-import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
-
-const Segment = flowComponent("Segment", (props) => {
-  const { children, className, ref, ...rest } = props;
-  const rootClassName = clsx(styles.segment, className);
-  return /* @__PURE__ */ jsxs(Aria.Radio, { ...rest, className: rootClassName, ref, children: [
-    children,
-    /* @__PURE__ */ jsx(IconCheck, { className: styles.checkmark })
-  ] });
+import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
+import IconCheck from "../../../Icon/components/icons/IconCheck.mjs";
+import "../../../Icon/components/icons/index.mjs";
+import Segment_module_default from "./Segment.module.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/SegmentedControl/components/Segment/Segment.tsx
+/** @flr-generate all */
+var Segment = flowComponent("Segment", (props) => {
+	const { children, className, ref, ...rest } = props;
+	const rootClassName = clsx(Segment_module_default.segment, className);
+	return /* @__PURE__ */ jsxs(Aria.Radio, {
+		...rest,
+		className: rootClassName,
+		ref,
+		children: [children, /* @__PURE__ */ jsx(IconCheck, { className: Segment_module_default.checkmark })]
+	});
 });
+//#endregion
+export { Segment as default };
 
-export { Segment };
-//# sourceMappingURL=Segment.mjs.map
+//# sourceMappingURL=Segment.mjs.map

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segment.mjs","sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.segment, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {children}\n      <IconCheck className={styles.checkmark} />\n    </Aria.Radio>\n  );\n});\n\nexport default Segment;\n"],"names":[],"mappings":";;;;;;;;;;;;AAcO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAEpD,EAAA,uBACE,IAAA,CAAC,KAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW;AAAA,GAAA,EAC1C,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.segment, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {children}\n      <IconCheck className={styles.checkmark} />\n    </Aria.Radio>\n  );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;AAcA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;YAArD,CACG,UACD,oBAAC,WAAD,EAAW,WAAW,uBAAO,UAAY,CAAA,CAC/B;;AAEhB,CAAC"}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.module.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+var Segment_module_default = {
+	segment: "flow--segmented-control--segment",
+	readonly: "flow--segmented-control--segment--readonly",
+	checkmark: "flow--segmented-control--segment--checkmark"
+};
+//#endregion
+export { Segment_module_default as default };
+
+//# sourceMappingURL=Segment.module.mjs.map

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segment.module.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"../../../../styles/mixins/formControl\";\n\n.segment {\n  flex: 1;\n  display: grid;\n  column-gap: var(--form-control--spacing-x);\n  grid-template-areas: \"label checkmark\";\n  grid-template-columns: 1fr auto;\n  margin-right: -1px; /* Collapse borders */\n  z-index: 1;\n\n  @include formControl.formControl();\n  @include focus.focus();\n\n  & {\n    border-radius: 0;\n  }\n\n  &:first-of-type {\n    border-start-start-radius: var(--form-control--corner-radius);\n    border-end-start-radius: var(--form-control--corner-radius);\n  }\n\n  &:last-of-type {\n    border-start-end-radius: var(--form-control--corner-radius);\n    border-end-end-radius: var(--form-control--corner-radius);\n    margin: 0;\n  }\n\n  .checkmark {\n    grid-area: checkmark;\n    display: none;\n  }\n\n  &[data-selected] {\n    z-index: 2;\n\n    .checkmark {\n      display: block;\n    }\n  }\n\n  &[data-disabled] {\n    z-index: 0;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/index.mjs

@@ -0,0 +1 @@
+import "./Segment.mjs";

package/dist/js/packages/components/src/components/SegmentedControl/index.mjs

@@ -0,0 +1,3 @@
+import "./SegmentedControl.mjs";
+import "./components/Segment/Segment.mjs";
+import "./components/Segment/index.mjs";