@mittwald/flow-react-components 0.2.0-experimental.776 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnLayout.mjs","sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n  T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n>\n  extends\n    PropsWithChildren,\n    PropsWithElementType<T>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElementTagNameMap[T]> {\n  /** Column layout for container size s. */\n  s?: (number | null)[];\n  /** Column layout for container size m. */\n  m?: (number | null)[];\n  /** Column layout for container size l. */\n  l?: (number | null)[];\n  /**\n   * Size of the row and column gap between the content blocks inside the column\n   * layout.\n   *\n   * @default \"m\"\n   */\n  gap?: GapSize;\n  /** Size of the row gap between the content blocks inside the column layout. */\n  rowGap?: GapSize;\n  /** Size of the column gap between the content blocks inside the column layout. */\n  columnGap?: GapSize;\n}\n\n/** @flr-generate all */\nexport const ColumnLayout = flowComponent(\n  \"ColumnLayout\",\n  (props) => {\n    const {\n      children,\n      className,\n      s,\n      m,\n      l,\n      gap = \"m\",\n      rowGap = gap,\n      columnGap = gap,\n      elementType = \"div\",\n      \"aria-label\": ariaLabel,\n      ref,\n      style: styleFromProps,\n    } = props;\n\n    let elementClassName = styles.columnLayout;\n\n    s?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(elementClassName, styles[`hide-s-${i + 1}`]);\n      }\n    });\n    m?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(elementClassName, styles[`hide-m-${i + 1}`]);\n      }\n    });\n    l?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(elementClassName, styles[`hide-l-${i + 1}`]);\n      }\n    });\n\n    const columnsS = s ? getColumns(s) : \"1fr\";\n    const columnsM = m ? getColumns(m) : s ? columnsS : \"1fr 1fr\";\n    const columnsL = l ? getColumns(l) : m || s ? columnsM : \"1fr 1fr 1fr\";\n\n    const style = {\n      ...styleFromProps,\n      \"--column-layout--columns-s\": columnsS,\n      \"--column-layout--columns-m\": columnsM,\n      \"--column-layout--columns-l\": columnsL,\n      \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n      \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n    } as CSSProperties;\n\n    const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      Section: {\n        hideSeparator: true,\n      },\n    };\n\n    return (\n      <div className={rootClassName} style={style}>\n        <Element\n          ref={ref as never}\n          aria-label={ariaLabel}\n          className={elementClassName}\n        >\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </Element>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ColumnLayout;\n"],"names":[],"mappings":";;;;;;;;AA6CO,MAAM,YAAA,GAAe,aAAA;AAAA,EAC1B,cAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,CAAA;AAAA,MACA,CAAA;AAAA,MACA,CAAA;AAAA,MACA,GAAA,GAAM,GAAA;AAAA,MACN,MAAA,GAAS,GAAA;AAAA,MACT,SAAA,GAAY,GAAA;AAAA,MACZ,WAAA,GAAc,KAAA;AAAA,MACd,YAAA,EAAc,SAAA;AAAA,MACd,GAAA;AAAA,MACA,KAAA,EAAO;AAAA,KACT,GAAI,KAAA;AAEJ,IAAA,IAAI,mBAAmB,MAAA,CAAO,YAAA;AAE9B,IAAA,CAAA,EAAG,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACf,MAAA,IAAI,MAAM,IAAA,EAAM;AACd,QAAA,gBAAA,GAAmB,KAAK,gBAAA,EAAkB,MAAA,CAAO,UAAU,CAAA,GAAI,CAAC,EAAE,CAAC,CAAA;AAAA,MACrE;AAAA,IACF,CAAC,CAAA;AACD,IAAA,CAAA,EAAG,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACf,MAAA,IAAI,MAAM,IAAA,EAAM;AACd,QAAA,gBAAA,GAAmB,KAAK,gBAAA,EAAkB,MAAA,CAAO,UAAU,CAAA,GAAI,CAAC,EAAE,CAAC,CAAA;AAAA,MACrE;AAAA,IACF,CAAC,CAAA;AACD,IAAA,CAAA,EAAG,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACf,MAAA,IAAI,MAAM,IAAA,EAAM;AACd,QAAA,gBAAA,GAAmB,KAAK,gBAAA,EAAkB,MAAA,CAAO,UAAU,CAAA,GAAI,CAAC,EAAE,CAAC,CAAA;AAAA,MACrE;AAAA,IACF,CAAC,CAAA;AAED,IAAA,MAAM,QAAA,GAAW,CAAA,GAAI,UAAA,CAAW,CAAC,CAAA,GAAI,KAAA;AACrC,IAAA,MAAM,WAAW,CAAA,GAAI,UAAA,CAAW,CAAC,CAAA,GAAI,IAAI,QAAA,GAAW,SAAA;AACpD,IAAA,MAAM,WAAW,CAAA,GAAI,UAAA,CAAW,CAAC,CAAA,GAAI,CAAA,IAAK,IAAI,QAAA,GAAW,aAAA;AAEzD,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,GAAG,cAAA;AAAA,MACH,4BAAA,EAA8B,QAAA;AAAA,MAC9B,4BAAA,EAA8B,QAAA;AAAA,MAC9B,4BAAA,EAA8B,QAAA;AAAA,MAC9B,0BAAA,EAA4B,6BAA6B,MAAM,CAAA,CAAA,CAAA;AAAA,MAC/D,6BAAA,EAA+B,6BAA6B,SAAS,CAAA,CAAA;AAAA,KACvE;AAEA,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAuB,SAAS,CAAA;AAElE,IAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,OAAA,EAAS;AAAA,QACP,aAAA,EAAe;AAAA;AACjB,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe,KAAA,EAC7B,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,SAAA,EAAW,gBAAA;AAAA,QAEX,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA,KACF,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}
+{"version":3,"file":"ColumnLayout.mjs","names":[],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n  T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n>\n  extends\n    PropsWithChildren,\n    PropsWithElementType<T>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElementTagNameMap[T]> {\n  /** Column layout for container size s. */\n  s?: (number | null)[];\n  /** Column layout for container size m. */\n  m?: (number | null)[];\n  /** Column layout for container size l. */\n  l?: (number | null)[];\n  /**\n   * Size of the row and column gap between the content blocks inside the column\n   * layout.\n   *\n   * @default \"m\"\n   */\n  gap?: GapSize;\n  /** Size of the row gap between the content blocks inside the column layout. */\n  rowGap?: GapSize;\n  /** Size of the column gap between the content blocks inside the column layout. */\n  columnGap?: GapSize;\n}\n\n/** @flr-generate all */\nexport const ColumnLayout = flowComponent(\n  \"ColumnLayout\",\n  (props) => {\n    const {\n      children,\n      className,\n      s,\n      m,\n      l,\n      gap = \"m\",\n      rowGap = gap,\n      columnGap = gap,\n      elementType = \"div\",\n      \"aria-label\": ariaLabel,\n      ref,\n      style: styleFromProps,\n    } = props;\n\n    let elementClassName: string = styles.columnLayout;\n\n    s?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-s-${i + 1}`),\n        );\n      }\n    });\n    m?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-m-${i + 1}`),\n        );\n      }\n    });\n    l?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-l-${i + 1}`),\n        );\n      }\n    });\n\n    const columnsS = s ? getColumns(s) : \"1fr\";\n    const columnsM = m ? getColumns(m) : s ? columnsS : \"1fr 1fr\";\n    const columnsL = l ? getColumns(l) : m || s ? columnsM : \"1fr 1fr 1fr\";\n\n    const style = {\n      ...styleFromProps,\n      \"--column-layout--columns-s\": columnsS,\n      \"--column-layout--columns-m\": columnsM,\n      \"--column-layout--columns-l\": columnsL,\n      \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n      \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n    } as CSSProperties;\n\n    const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      Section: {\n        hideSeparator: true,\n      },\n    };\n\n    return (\n      <div className={rootClassName} style={style}>\n        <Element\n          ref={ref as never}\n          aria-label={ariaLabel}\n          className={elementClassName}\n        >\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </Element>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ColumnLayout;\n"],"mappings":";;;;;;;;;;;AA8CA,IAAa,eAAe,cAC1B,iBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,GACA,GACA,GACA,MAAM,KACN,SAAS,KACT,YAAY,KACZ,cAAc,OACd,cAAc,WACd,KACA,OAAO,mBACL;CAEJ,IAAI,mBAA2B,4BAAO;CAEtC,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CAED,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI;CACrC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW;CACpD,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,KAAK,IAAI,WAAW;CAEzD,MAAM,QAAQ;EACZ,GAAG;EACH,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,4BAA4B,6BAA6B,OAAO;EAChE,+BAA+B,6BAA6B,UAAU;CACxE;CAEA,MAAM,gBAAgB,KAAK,4BAAO,uBAAuB,SAAS;CAUlE,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB;EACpC,UAAA,oBAAC,aAAD;GACO;GACL,cAAY;GACZ,WAAW;GAEX,UAAA,oBAAC,sBAAD;IAAsB,OAAO,EAZjC,SAAS,EACP,eAAe,KACjB,EAUiC;IAC1B;GACmB,CAAA;EACf,CAAA;CACN,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -0,0 +1,28 @@
+"use client"
+/* */
+//#region src/components/ColumnLayout/ColumnLayout.module.scss
+var columnLayoutContainer = "flow--column-layout--column-layout-container";
+var columnLayout = "flow--column-layout";
+var ColumnLayout_module_default = {
+	columnLayoutContainer,
+	columnLayout,
+	"hide-l-1": "flow--column-layout--hide-l-1",
+	"hide-l-2": "flow--column-layout--hide-l-2",
+	"hide-l-3": "flow--column-layout--hide-l-3",
+	"hide-l-4": "flow--column-layout--hide-l-4",
+	"hide-l-5": "flow--column-layout--hide-l-5",
+	"hide-m-1": "flow--column-layout--hide-m-1",
+	"hide-m-2": "flow--column-layout--hide-m-2",
+	"hide-m-3": "flow--column-layout--hide-m-3",
+	"hide-m-4": "flow--column-layout--hide-m-4",
+	"hide-m-5": "flow--column-layout--hide-m-5",
+	"hide-s-1": "flow--column-layout--hide-s-1",
+	"hide-s-2": "flow--column-layout--hide-s-2",
+	"hide-s-3": "flow--column-layout--hide-s-3",
+	"hide-s-4": "flow--column-layout--hide-s-4",
+	"hide-s-5": "flow--column-layout--hide-s-5"
+};
+//#endregion
+export { columnLayout, columnLayoutContainer, ColumnLayout_module_default as default };
+
+//# sourceMappingURL=ColumnLayout.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnLayout.module.mjs","names":[],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.module.scss"],"sourcesContent":[".columnLayoutContainer {\n  container-type: inline-size;\n  width: 100%;\n\n  &:has(> .columnLayout) {\n    display: block;\n\n    &:empty {\n      display: none;\n    }\n  }\n}\n\n.columnLayout {\n  display: grid;\n  align-items: start;\n  gap: var(--column-layout--row-gap) var(--column-layout--column-gap);\n\n  @mixin hide($size) {\n    &.hide-#{$size}-1 {\n      > :nth-child(1) {\n        display: none;\n      }\n    }\n    &.hide-#{$size}-2 {\n      > :nth-child(2) {\n        display: none;\n      }\n    }\n    &.hide-#{$size}-3 {\n      > :nth-child(3) {\n        display: none;\n      }\n    }\n    &.hide-#{$size}-4 {\n      > :nth-child(4) {\n        display: none;\n      }\n    }\n    &.hide-#{$size}-5 {\n      > :nth-child(5) {\n        display: none;\n      }\n    }\n  }\n\n  @container (min-width:850px) {\n    grid-template-columns: var(--column-layout--columns-l);\n\n    @include hide(\"l\");\n  }\n\n  @container (max-width: 850px) and (min-width:550px) {\n    grid-template-columns: var(--column-layout--columns-m);\n\n    @include hide(\"m\");\n  }\n\n  @container (max-width: 550px) {\n    grid-template-columns: var(--column-layout--columns-s);\n\n    @include hide(\"s\");\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ColumnLayout/lib/getColumns.mjs

@@ -1,9 +1,10 @@
 "use client"
 /* */
-const getColumns = (values) => {
-  const fractionValues = values.filter((v) => v !== null).map((value) => `${value}fr`);
-  return fractionValues.join(" ");
+//#region src/components/ColumnLayout/lib/getColumns.ts
+var getColumns = (values) => {
+	return values.filter((v) => v !== null).map((value) => `${value}fr`).join(" ");
 };
-
+//#endregion
 export { getColumns };
-//# sourceMappingURL=getColumns.mjs.map
+
+//# sourceMappingURL=getColumns.mjs.map

package/dist/js/packages/components/src/components/ColumnLayout/lib/getColumns.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getColumns.mjs","sources":["../../../../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"sourcesContent":["export const getColumns = (values: (number | null)[]): string => {\n  const fractionValues = values\n    .filter((v) => v !== null)\n    .map((value) => `${value}fr`);\n\n  return fractionValues.join(\" \");\n};\n"],"names":[],"mappings":"AAAO,MAAM,UAAA,GAAa,CAAC,MAAA,KAAsC;AAC/D,EAAA,MAAM,cAAA,GAAiB,MAAA,CACpB,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,KAAM,IAAI,CAAA,CACxB,GAAA,CAAI,CAAC,KAAA,KAAU,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,CAAA;AAE9B,EAAA,OAAO,cAAA,CAAe,KAAK,GAAG,CAAA;AAChC;;;;"}
+{"version":3,"file":"getColumns.mjs","names":[],"sources":["../../../../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"sourcesContent":["export const getColumns = (values: (number | null)[]): string => {\n  const fractionValues = values\n    .filter((v) => v !== null)\n    .map((value) => `${value}fr`);\n\n  return fractionValues.join(\" \");\n};\n"],"mappings":";;;AAAA,IAAa,cAAc,WAAsC;CAK/D,OAJuB,OACpB,QAAQ,MAAM,MAAM,IAAI,CAAC,CACzB,KAAK,UAAU,GAAG,MAAM,GAEpB,CAAA,CAAe,KAAK,GAAG;AAChC"}

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

@@ -0,0 +1,50 @@
+"use client"
+/* */
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import Combine_module_default from "./Combine.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Combine/Combine.tsx
+/**
+* The arrangement itself, shared with the deprecated `Align` alias so both
+* names render the exact same output.
+*/
+var CombineImplementation = (props) => {
+	const { children, className } = props;
+	const rootClassName = clsx(Combine_module_default.combine, className);
+	const propsContext = {
+		Text: { className: Combine_module_default.text },
+		Button: { className: Combine_module_default.button },
+		Avatar: {
+			className: Combine_module_default.avatar,
+			size: "m"
+		},
+		CopyButton: {
+			size: "s",
+			className: Combine_module_default.copyButton
+		},
+		Icon: {
+			size: "s",
+			className: Combine_module_default.icon,
+			color: "neutral"
+		},
+		ContextualHelpTrigger: { Button: { className: Combine_module_default.contextualHelpTriggerButton } }
+	};
+	return /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children: /* @__PURE__ */ jsx("div", {
+			className: rootClassName,
+			children
+		})
+	});
+};
+/**
+* @flowStatus new
+* @flr-generate all
+*/
+var Combine = flowComponent("Combine", CombineImplementation, { type: "layout" });
+//#endregion
+export { Combine, Combine as default, CombineImplementation };
+
+//# sourceMappingURL=Combine.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combine.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Combine.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 type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CombineProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {}\n\n/**\n * The arrangement itself, shared with the deprecated `Align` alias so both\n * names render the exact same output.\n */\nexport const CombineImplementation: FC<CombineProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.combine, className);\n\n  const propsContext: PropsContext = {\n    Text: { className: styles.text },\n    Button: { className: styles.button },\n    Avatar: { className: styles.avatar, size: \"m\" },\n    CopyButton: { size: \"s\", className: styles.copyButton },\n    Icon: { size: \"s\", className: styles.icon, color: \"neutral\" },\n    ContextualHelpTrigger: {\n      Button: {\n        className: styles.contextualHelpTriggerButton,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName}>{children}</div>\n    </PropsContextProvider>\n  );\n};\n\n/**\n * @flowStatus new\n * @flr-generate all\n */\nexport const Combine = flowComponent(\"Combine\", CombineImplementation, {\n  type: \"layout\",\n});\n\nexport default Combine;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,MAAM,eAA6B;EACjC,MAAM,EAAE,WAAW,uBAAO,KAAK;EAC/B,QAAQ,EAAE,WAAW,uBAAO,OAAO;EACnC,QAAQ;GAAE,WAAW,uBAAO;GAAQ,MAAM;EAAI;EAC9C,YAAY;GAAE,MAAM;GAAK,WAAW,uBAAO;EAAW;EACtD,MAAM;GAAE,MAAM;GAAK,WAAW,uBAAO;GAAM,OAAO;EAAU;EAC5D,uBAAuB,EACrB,QAAQ,EACN,WAAW,uBAAO,4BACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAC1B,CAAA;AAE1B;;;;;AAMA,IAAa,UAAU,cAAc,WAAW,uBAAuB,EACrE,MAAM,SACR,CAAC"}

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

@@ -0,0 +1,23 @@
+"use client"
+/* */
+//#region src/components/Combine/Combine.module.scss
+var combine = "flow--combine";
+var avatar = "flow--combine--avatar";
+var text = "flow--combine--text";
+var button = "flow--combine--button";
+var contextualHelpTriggerButton = "flow--combine--contextual-help-trigger-button";
+var copyButton = "flow--combine--copy-button";
+var icon = "flow--combine--icon";
+var Combine_module_default = {
+	combine,
+	avatar,
+	text,
+	button,
+	contextualHelpTriggerButton,
+	copyButton,
+	icon
+};
+//#endregion
+export { avatar, button, combine, contextualHelpTriggerButton, copyButton, Combine_module_default as default, icon, text };
+
+//# sourceMappingURL=Combine.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n  &:has(.avatar):has(.text) {\n    display: flex;\n    gap: var(--combine--avatar-text--spacing);\n    height: fit-content;\n\n    --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n    min-height: var(--first-two-lines-height);\n\n    .text {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      align-self: center;\n      font-size: var(--font-size-text--s);\n    }\n\n    .avatar {\n      margin-top: calc(\n        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n      );\n    }\n  }\n\n  &:has(:global(.flow--form-field)):has(.button) {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--combine--input-button--spacing);\n\n    :global(.flow--form-field) {\n      flex-grow: 1;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n      }\n    }\n  }\n\n  &:has(.text):has(.contextualHelpTriggerButton),\n  &:has(.text):has(.copyButton) {\n    display: flex;\n    align-items: center;\n    column-gap: var(--combine--text-button--spacing);\n  }\n\n  &:has(> .text):has(> .icon) {\n    display: flex;\n    align-items: center;\n    column-gap: var(--combine--icon-text--spacing);\n  }\n}\n\n@media (max-width: 550px) {\n  .combine:has(:global(.flow--form-field)):has(.button) {\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n    align-items: stretch;\n\n    .button {\n      width: 100%;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1,109 +1,80 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
-import * as Aria from 'react-aria-components';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
-import { Button } from '../Button/Button.mjs';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
-import { Options } from '../Options/Options.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import clsx from 'clsx';
-import styles from './ComboBox.module.scss.mjs';
-import locales from '../../../../../_virtual/_.locale.json@03a1e95aeecfc0686e76f008592d87f5.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import 'mobx';
-import 'remeda';
-import '@react-aria/utils';
-import 'dot-prop';
-import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-
-const ComboBox = flowComponent("ComboBox", (props) => {
-  const {
-    children,
-    className,
-    menuTrigger = "focus",
-    onChange,
-    onSelectionChange,
-    placeholder,
-    ref,
-    renderEmptyState,
-    ...rest
-  } = props;
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldProps,
-    fieldPropsContext
-  } = useFieldComponent(props);
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);
-  const propsContext = {
-    Option: {
-      tunnelId: "options"
-    },
-    ...fieldPropsContext
-  };
-  const handleSelectionChange = (key) => {
-    if (key === null) {
-      return;
-    }
-    onChange?.(String(key));
-    onSelectionChange?.(key);
-  };
-  const controller = useOverlayController("ComboBox", {
-    reuseControllerFromContext: false
-  });
-  return /* @__PURE__ */ jsx(
-    Aria.ComboBox,
-    {
-      ...fieldProps,
-      menuTrigger,
-      className: rootClassName,
-      ...rest,
-      onSelectionChange: handleSelectionChange,
-      onOpenChange: (isOpen) => {
-        controller.setOpen(isOpen);
-      },
-      children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.input, children: [
-            /* @__PURE__ */ jsx(Aria.Input, { placeholder, ref }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: styles.toggle,
-                "aria-label": stringFormatter.format("comboBox.showOptions"),
-                variant: "plain",
-                color: "secondary",
-                children: /* @__PURE__ */ jsx(IconChevronDown, {})
-              }
-            )
-          ] }),
-          children,
-          /* @__PURE__ */ jsx(
-            Options,
-            {
-              controller,
-              onOpenChange: () => {
-              },
-              renderEmptyState,
-              children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(FieldErrorView, {})
-      ] }) })
-    }
-  );
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { Button } from "../Button/Button.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
+import { Options } from "../Options/Options.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import ComboBox_module_default from "./ComboBox.module.mjs";
+import __locale_default from "../../../../../_virtual/_11.locale.mjs";
+import clsx from "clsx";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/ComboBox/ComboBox.tsx
+/** @flr-generate all */
+var ComboBox = flowComponent("ComboBox", (props) => {
+	const { children, className, menuTrigger = "focus", onChange, onSelectionChange, placeholder, ref, renderEmptyState, ...rest } = props;
+	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "ComboBox");
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ComboBox");
+	const rootClassName = clsx(fieldProps.className, ComboBox_module_default.comboBox, className);
+	const propsContext = {
+		Option: { tunnel: {
+			id: "options",
+			component: "ComboBox"
+		} },
+		...fieldPropsContext
+	};
+	const handleSelectionChange = (key) => {
+		if (key === null) return;
+		onChange?.(String(key));
+		onSelectionChange?.(key);
+	};
+	const controller = useOverlayController("ComboBox", { reuseControllerFromContext: false });
+	return /* @__PURE__ */ jsx(Aria.ComboBox, {
+		...fieldProps,
+		menuTrigger,
+		className: rootClassName,
+		...rest,
+		onSelectionChange: handleSelectionChange,
+		onOpenChange: (isOpen) => {
+			controller.setOpen(isOpen);
+		},
+		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			props: propsContext,
+			children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: ComboBox_module_default.input,
+					children: [/* @__PURE__ */ jsx(Aria.Input, {
+						placeholder,
+						ref
+					}), /* @__PURE__ */ jsx(Button, {
+						className: ComboBox_module_default.toggle,
+						"aria-label": stringFormatter.format("showOptions"),
+						variant: "plain",
+						color: "secondary",
+						children: /* @__PURE__ */ jsx(IconChevronDown, {})
+					})]
+				}),
+				children,
+				/* @__PURE__ */ jsx(Options, {
+					controller,
+					onOpenChange: () => {},
+					renderEmptyState,
+					children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+						id: "options",
+						component: "ComboBox"
+					})
+				})
+			] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+		})
+	});
 });
+//#endregion
+export { ComboBox, ComboBox as default };
 
-export { ComboBox };
-//# sourceMappingURL=ComboBox.mjs.map
+//# sourceMappingURL=ComboBox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <FieldErrorCaptureContext>\n            <div className={styles.input}>\n              <Aria.Input placeholder={placeholder} ref={ref} />\n              <Button\n                className={styles.toggle}\n                aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n                variant=\"plain\"\n                color=\"secondary\"\n              >\n                <IconChevronDown />\n              </Button>\n            </div>\n\n            {children}\n\n            <Options\n              controller={controller}\n              onOpenChange={() => {\n                // cut-off to avoid double controller state changes\n              }}\n              renderEmptyState={renderEmptyState}\n            >\n              <TunnelExit id=\"options\" />\n            </Options>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,OAAA;AAAA,IACd,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAA;AAAA,IACA,gBAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,gBAAgB,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,UAAU,SAAS,CAAA;AAE3E,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,qBAAA,GAAwB,CAAC,GAAA,KAAoB;AACjD,IAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,MAAA;AAAA,IACF;AACA,IAAA,QAAA,GAAW,MAAA,CAAO,GAAG,CAAC,CAAA;AACtB,IAAA,iBAAA,GAAoB,GAAG,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,qBAAqB,UAAA,EAAY;AAAA,IAClD,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAmB,qBAAA;AAAA,MACnB,YAAA,EAAc,CAAC,MAAA,KAAW;AACxB,QAAA,UAAA,CAAW,QAAQ,MAAM,CAAA;AAAA,MAC3B,CAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAW,WAAA,EAA0B,GAAA,EAAU,CAAA;AAAA,4BAChD,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,WAAW,MAAA,CAAO,MAAA;AAAA,gBAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,sBAAsB,CAAA;AAAA,gBACzD,OAAA,EAAQ,OAAA;AAAA,gBACR,KAAA,EAAM,WAAA;AAAA,gBAEN,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA;AACnB,WAAA,EACF,CAAA;AAAA,UAEC,QAAA;AAAA,0BAED,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,UAAA;AAAA,cACA,cAAc,MAAM;AAAA,cAEpB,CAAA;AAAA,cACA,gBAAA;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,SAAA,EAAU;AAAA;AAAA;AAC3B,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB,CAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ComboBox.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  /** Called with the key of the selected option whenever the selection changes. */\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: {\n        id: \"options\",\n        component: \"ComboBox\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KAAK,WAAW,WAAW,wBAAO,UAAU,SAAS;CAE3E,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACS;EACb,WAAW;EACX,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAW,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAW,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/ComboBox/ComboBox.module.scss
+var comboBox = "flow--combo-box";
+var input = "flow--combo-box--input";
+var readonly = "flow--combo-box--readonly";
+var toggle = "flow--combo-box--toggle";
+var ComboBox_module_default = {
+	comboBox,
+	input,
+	readonly,
+	toggle
+};
+//#endregion
+export { comboBox, ComboBox_module_default as default, input, readonly, toggle };
+
+//# sourceMappingURL=ComboBox.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.module.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.comboBox {\n  .input {\n    order: 2;\n    display: grid;\n    grid-template-areas: \"input\";\n\n    input {\n      @include formControl.formControl();\n\n      grid-area: input;\n      padding-inline-end: calc(\n        var(--button--padding-icon-only) * 2 + var(--icon--size--s)\n      );\n    }\n\n    .toggle {\n      grid-area: input;\n      justify-self: end;\n      margin: var(--form-control--border-width);\n      padding: calc(\n        var(--button--padding-icon-only) - var(--form-control--border-width)\n      );\n\n      &:hover {\n        background-color: transparent;\n      }\n\n      &[data-pressed] {\n        background-color: transparent;\n      }\n    }\n  }\n\n  &:not([data-disabled=\"true\"]):hover {\n    input:not(:read-only),\n    .toggle:not([data-disabled=\"true\"]) {\n      background-color: var(--form-control--background-color--hover);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,48 @@
+"use client"
+/* */
+import { builtInComponentDefaults } from "./defaults.mjs";
+import { useDeprecatedFlagDefaults } from "./deprecatedFlags.mjs";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ComponentDefaultsProvider/ComponentDefaultsProvider.tsx
+var ComponentDefaultsContext = createContext({});
+var mergeDefaults = (base, override) => {
+	const merged = { ...base };
+	for (const component of Object.keys(override)) Object.assign(merged, { [component]: {
+		...base[component],
+		...override[component]
+	} });
+	return merged;
+};
+/**
+* Defines the default behavior of components for the whole application – or,
+* nested, for a part of it.
+*
+* @flowStatus new
+*/
+var ComponentDefaultsProvider = (props) => {
+	const { defaults, children } = props;
+	const inheritedDefaults = useContext(ComponentDefaultsContext);
+	const value = useMemo(() => mergeDefaults(inheritedDefaults, defaults), [inheritedDefaults, defaults]);
+	return /* @__PURE__ */ jsx(ComponentDefaultsContext.Provider, {
+		value,
+		children
+	});
+};
+/**
+* The defaults that apply to a component: built-in defaults, overridden by the
+* deprecated `flags` object, overridden by the ComponentDefaultsProvider.
+*/
+var useComponentDefaults = (component) => {
+	const fromContext = useContext(ComponentDefaultsContext)[component];
+	const fromDeprecatedFlags = useDeprecatedFlagDefaults(component);
+	return {
+		...builtInComponentDefaults[component],
+		...fromDeprecatedFlags,
+		...fromContext
+	};
+};
+//#endregion
+export { ComponentDefaultsContext, ComponentDefaultsProvider, ComponentDefaultsProvider as default, useComponentDefaults };
+
+//# sourceMappingURL=ComponentDefaultsProvider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDefaultsProvider.mjs","names":[],"sources":["../../../../../../../src/components/ComponentDefaultsProvider/ComponentDefaultsProvider.tsx"],"sourcesContent":["import {\n  builtInComponentDefaults,\n  type ComponentDefaults,\n  type ComponentWithDefaults,\n  type PartialComponentDefaults,\n} from \"@/components/ComponentDefaultsProvider/defaults\";\nimport { useDeprecatedFlagDefaults } from \"@/components/ComponentDefaultsProvider/deprecatedFlags\";\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n} from \"react\";\n\nexport const ComponentDefaultsContext = createContext<PartialComponentDefaults>(\n  {},\n);\n\nexport interface ComponentDefaultsProviderProps extends PropsWithChildren {\n  /**\n   * Defaults per component. Every setting that is not given keeps the default\n   * of a surrounding ComponentDefaultsProvider, or its built-in default.\n   */\n  defaults: PartialComponentDefaults;\n}\n\nconst mergeDefaults = (\n  base: PartialComponentDefaults,\n  override: PartialComponentDefaults,\n): PartialComponentDefaults => {\n  const merged: PartialComponentDefaults = { ...base };\n\n  for (const component of Object.keys(override) as ComponentWithDefaults[]) {\n    Object.assign(merged, {\n      [component]: { ...base[component], ...override[component] },\n    });\n  }\n\n  return merged;\n};\n\n/**\n * Defines the default behavior of components for the whole application – or,\n * nested, for a part of it.\n *\n * @flowStatus new\n */\nexport const ComponentDefaultsProvider: FC<ComponentDefaultsProviderProps> = (\n  props,\n) => {\n  const { defaults, children } = props;\n  const inheritedDefaults = useContext(ComponentDefaultsContext);\n\n  const value = useMemo(\n    () => mergeDefaults(inheritedDefaults, defaults),\n    [inheritedDefaults, defaults],\n  );\n\n  return (\n    <ComponentDefaultsContext.Provider value={value}>\n      {children}\n    </ComponentDefaultsContext.Provider>\n  );\n};\n\n/**\n * The defaults that apply to a component: built-in defaults, overridden by the\n * deprecated `flags` object, overridden by the ComponentDefaultsProvider.\n */\nexport const useComponentDefaults = <C extends ComponentWithDefaults>(\n  component: C,\n): ComponentDefaults[C] => {\n  const fromContext = useContext(ComponentDefaultsContext)[component];\n  const fromDeprecatedFlags = useDeprecatedFlagDefaults(component);\n\n  return {\n    ...builtInComponentDefaults[component],\n    ...fromDeprecatedFlags,\n    ...fromContext,\n  };\n};\n\nexport default ComponentDefaultsProvider;\n"],"mappings":";;;;;;;AAeA,IAAa,2BAA2B,cACtC,CAAC,CACH;AAUA,IAAM,iBACJ,MACA,aAC6B;CAC7B,MAAM,SAAmC,EAAE,GAAG,KAAK;CAEnD,KAAK,MAAM,aAAa,OAAO,KAAK,QAAQ,GAC1C,OAAO,OAAO,QAAQ,GACnB,YAAY;EAAE,GAAG,KAAK;EAAY,GAAG,SAAS;CAAW,EAC5D,CAAC;CAGH,OAAO;AACT;;;;;;;AAQA,IAAa,6BACX,UACG;CACH,MAAM,EAAE,UAAU,aAAa;CAC/B,MAAM,oBAAoB,WAAW,wBAAwB;CAE7D,MAAM,QAAQ,cACN,cAAc,mBAAmB,QAAQ,GAC/C,CAAC,mBAAmB,QAAQ,CAC9B;CAEA,OACE,oBAAC,yBAAyB,UAA1B;EAA0C;EACvC;CACgC,CAAA;AAEvC;;;;;AAMA,IAAa,wBACX,cACyB;CACzB,MAAM,cAAc,WAAW,wBAAwB,CAAC,CAAC;CACzD,MAAM,sBAAsB,0BAA0B,SAAS;CAE/D,OAAO;EACL,GAAG,yBAAyB;EAC5B,GAAG;EACH,GAAG;CACL;AACF"}

package/dist/js/packages/components/src/components/ComponentDefaultsProvider/defaults.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+//#region src/components/ComponentDefaultsProvider/defaults.ts
+var builtInComponentDefaults = {
+	List: { disableInitialSuspenseBoundary: false },
+	Form: { confirmModalCloseOnUnsavedChanges: true }
+};
+//#endregion
+export { builtInComponentDefaults };
+
+//# sourceMappingURL=defaults.mjs.map

package/dist/js/packages/components/src/components/ComponentDefaultsProvider/defaults.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.mjs","names":[],"sources":["../../../../../../../src/components/ComponentDefaultsProvider/defaults.ts"],"sourcesContent":["/**\n * Behavior of components that an application can define once, globally, instead\n * of repeating it at every usage. Every setting has a built-in default and\n * stays overridable at the component itself.\n */\nexport interface ComponentDefaults {\n  List: {\n    /**\n     * Whether a `List` renders no own Suspense boundary while it initially\n     * loads. Suspending is then handed over to the closest Suspense boundary\n     * above the List, so the List appears with loaded data instead of showing\n     * its loading view (skeleton) first.\n     *\n     * Overridable per List through the `disableInitialSuspenseBoundary`\n     * property of its data source.\n     *\n     * @default false\n     */\n    disableInitialSuspenseBoundary: boolean;\n  };\n  Form: {\n    /**\n     * Whether closing a `Modal` that contains a `Form` with unsaved changes\n     * must be confirmed. Applies as long as the Form is _dirty_ – after a\n     * successful submit or a `form.reset()` it is not.\n     *\n     * @default true\n     */\n    confirmModalCloseOnUnsavedChanges: boolean;\n  };\n}\n\nexport type ComponentWithDefaults = keyof ComponentDefaults;\n\nexport type PartialComponentDefaults = {\n  [C in ComponentWithDefaults]?: Partial<ComponentDefaults[C]>;\n};\n\nexport const builtInComponentDefaults: ComponentDefaults = {\n  List: {\n    disableInitialSuspenseBoundary: false,\n  },\n  Form: {\n    confirmModalCloseOnUnsavedChanges: true,\n  },\n};\n"],"mappings":";;;AAsCA,IAAa,2BAA8C;CACzD,MAAM,EACJ,gCAAgC,MAClC;CACA,MAAM,EACJ,mCAAmC,KACrC;AACF"}

package/dist/js/packages/components/src/components/ComponentDefaultsProvider/deprecatedFlags.mjs

@@ -0,0 +1,40 @@
+"use client"
+/* */
+import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { flagIsAssigned, flags } from "../../flags.mjs";
+//#region src/components/ComponentDefaultsProvider/deprecatedFlags.ts
+/**
+* The global `flags` object is superseded by the ComponentDefaultsProvider. A
+* flag an application still assigns keeps working – it acts as the application
+* wide default below the provider – and warns about its replacement.
+*/
+var deprecatedFlagBridges = [{
+	flag: "requireCloseModalConfirmationOnUnsavedChanges",
+	component: "Form",
+	setting: "confirmModalCloseOnUnsavedChanges",
+	message: "The 'requireCloseModalConfirmationOnUnsavedChanges' flag is deprecated and will be removed in a future release. Confirming the close of a Modal that contains a Form with unsaved changes is the default now ('Form.confirmModalCloseOnUnsavedChanges: true'). Use the 'defaults' property of the ComponentDefaultsProvider to change it."
+}, {
+	flag: "disableInitialListSuspenseBoundaries",
+	component: "List",
+	setting: "disableInitialSuspenseBoundary",
+	message: "The 'disableInitialListSuspenseBoundaries' flag is deprecated and will be removed in a future release. Its default is unchanged ('List.disableInitialSuspenseBoundary: false'). Use the 'defaults' property of the ComponentDefaultsProvider to change it."
+}];
+/**
+* Defaults an application still contributes through the deprecated `flags`
+* object. Ranks below the ComponentDefaultsProvider and above the built-in
+* defaults.
+*/
+var useDeprecatedFlagDefaults = (component) => {
+	const warnDeprecation = useWarnDeprecation();
+	const fromFlags = {};
+	for (const bridge of deprecatedFlagBridges) {
+		if (bridge.component !== component || !flagIsAssigned(bridge.flag)) continue;
+		warnDeprecation(bridge.message);
+		fromFlags[bridge.setting] = flags[bridge.flag];
+	}
+	return fromFlags;
+};
+//#endregion
+export { useDeprecatedFlagDefaults };
+
+//# sourceMappingURL=deprecatedFlags.mjs.map

package/dist/js/packages/components/src/components/ComponentDefaultsProvider/deprecatedFlags.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecatedFlags.mjs","names":[],"sources":["../../../../../../../src/components/ComponentDefaultsProvider/deprecatedFlags.ts"],"sourcesContent":["import { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport type {\n  ComponentDefaults,\n  ComponentWithDefaults,\n} from \"@/components/ComponentDefaultsProvider/defaults\";\nimport { flagIsAssigned, flags, type FlagName } from \"@/flags\";\n\ninterface DeprecatedFlagBridge {\n  flag: FlagName;\n  component: ComponentWithDefaults;\n  setting: string;\n  message: string;\n}\n\n/**\n * The global `flags` object is superseded by the ComponentDefaultsProvider. A\n * flag an application still assigns keeps working – it acts as the application\n * wide default below the provider – and warns about its replacement.\n */\nconst deprecatedFlagBridges: DeprecatedFlagBridge[] = [\n  {\n    flag: \"requireCloseModalConfirmationOnUnsavedChanges\",\n    component: \"Form\",\n    setting: \"confirmModalCloseOnUnsavedChanges\",\n    message:\n      \"The 'requireCloseModalConfirmationOnUnsavedChanges' flag is deprecated and will be removed in a future release. Confirming the close of a Modal that contains a Form with unsaved changes is the default now ('Form.confirmModalCloseOnUnsavedChanges: true'). Use the 'defaults' property of the ComponentDefaultsProvider to change it.\",\n  },\n  {\n    flag: \"disableInitialListSuspenseBoundaries\",\n    component: \"List\",\n    setting: \"disableInitialSuspenseBoundary\",\n    message:\n      \"The 'disableInitialListSuspenseBoundaries' flag is deprecated and will be removed in a future release. Its default is unchanged ('List.disableInitialSuspenseBoundary: false'). Use the 'defaults' property of the ComponentDefaultsProvider to change it.\",\n  },\n];\n\n/**\n * Defaults an application still contributes through the deprecated `flags`\n * object. Ranks below the ComponentDefaultsProvider and above the built-in\n * defaults.\n */\nexport const useDeprecatedFlagDefaults = <C extends ComponentWithDefaults>(\n  component: C,\n): Partial<ComponentDefaults[C]> => {\n  const warnDeprecation = useWarnDeprecation();\n  const fromFlags: Record<string, boolean> = {};\n\n  for (const bridge of deprecatedFlagBridges) {\n    if (bridge.component !== component || !flagIsAssigned(bridge.flag)) {\n      continue;\n    }\n\n    warnDeprecation(bridge.message);\n    fromFlags[bridge.setting] = flags[bridge.flag];\n  }\n\n  return fromFlags as Partial<ComponentDefaults[C]>;\n};\n"],"mappings":";;;;;;;;;;AAmBA,IAAM,wBAAgD,CACpD;CACE,MAAM;CACN,WAAW;CACX,SAAS;CACT,SACE;AACJ,GACA;CACE,MAAM;CACN,WAAW;CACX,SAAS;CACT,SACE;AACJ,CACF;;;;;;AAOA,IAAa,6BACX,cACkC;CAClC,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,YAAqC,CAAC;CAE5C,KAAK,MAAM,UAAU,uBAAuB;EAC1C,IAAI,OAAO,cAAc,aAAa,CAAC,eAAe,OAAO,IAAI,GAC/D;EAGF,gBAAgB,OAAO,OAAO;EAC9B,UAAU,OAAO,WAAW,MAAM,OAAO;CAC3C;CAEA,OAAO;AACT"}

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

@@ -0,0 +1,47 @@
+"use client"
+/* */
+import { createContext, createElement, useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ComponentUsageProvider/ComponentUsageProvider.tsx
+var componentUsageContext = createContext(void 0);
+var viewCompositionContext = createContext(false);
+var ComponentUsageProvider = (props) => {
+	const { children, onUsage } = props;
+	return /* @__PURE__ */ jsx(componentUsageContext.Provider, {
+		value: onUsage,
+		children
+	});
+};
+var markedComponents = /* @__PURE__ */ new WeakMap();
+var markViewComposition = (Component) => {
+	const cached = markedComponents.get(Component);
+	if (cached) return cached;
+	const ViewComposition = (props) => /* @__PURE__ */ jsx(viewCompositionContext.Provider, {
+		value: true,
+		children: createElement(Component, props)
+	});
+	ViewComposition.displayName = `ViewComposition(${Component.displayName ?? Component.name})`;
+	markedComponents.set(Component, ViewComposition);
+	return ViewComposition;
+};
+var markViewComponents = (components) => Object.fromEntries(Object.entries(components).map(([name, component]) => [name, markViewComposition(component)]));
+var ViewCompositionReset = ({ children }) => /* @__PURE__ */ jsx(viewCompositionContext.Provider, {
+	value: false,
+	children
+});
+var useReportComponentUsage = (component) => {
+	const onUsage = useContext(componentUsageContext);
+	const isViewComposition = useContext(viewCompositionContext);
+	useEffect(() => {
+		if (!isViewComposition) onUsage?.({ component });
+	}, [
+		onUsage,
+		component,
+		isViewComposition
+	]);
+	return isViewComposition;
+};
+//#endregion
+export { ComponentUsageProvider, ComponentUsageProvider as default, ViewCompositionReset, markViewComponents, useReportComponentUsage };
+
+//# sourceMappingURL=ComponentUsageProvider.mjs.map