@mittwald/flow-react-components 0.2.0-alpha.150 → 0.2.0-alpha.152

package/dist/js/components/src/components/Checkbox/Checkbox.mjs

@@ -13,17 +13,14 @@ import { IconCheckboxIndeterminate } from '../Icon/components/icons/IconCheckbox
 import * as Aria from 'react-aria-components';
 import styles from './Checkbox.module.scss.mjs';
 
-const Checkbox = flowComponent(
-  "Checkbox",
-  (props) => {
-    const { children, className, ref, ...rest } = props;
-    const rootClassName = clsx(styles.checkbox, className);
-    return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, { ...rest, className: rootClassName, ref, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, { className: styles.icon }) : isIndeterminate ? /* @__PURE__ */ jsx(IconCheckboxIndeterminate, { className: styles.icon }) : /* @__PURE__ */ jsx(IconCheckboxEmpty, { className: styles.icon }),
-      children
-    ] }) }) });
-  }
-);
+const Checkbox = flowComponent("Checkbox", (props) => {
+  const { children, className, ref, ...rest } = props;
+  const rootClassName = clsx(styles.checkbox, className);
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, { ...rest, className: rootClassName, ref, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, { className: styles.icon }) : isIndeterminate ? /* @__PURE__ */ jsx(IconCheckboxIndeterminate, { className: styles.icon }) : /* @__PURE__ */ jsx(IconCheckboxEmpty, { className: styles.icon }),
+    children
+  ] }) }) });
+});
 
 export { Checkbox, Checkbox as default };
 //# sourceMappingURL=Checkbox.mjs.map

package/dist/js/components/src/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckboxProps\n  extends PropsWithChildren<Omit<Aria.CheckboxProps, \"children\">>,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Checkbox = flowComponent<\"Checkbox\", HTMLLabelElement>(\n  \"Checkbox\",\n  (props) => {\n    const { children, className, ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.checkbox, className);\n\n    return (\n      <ClearPropsContext>\n        <Aria.Checkbox {...rest} className={rootClassName} ref={ref}>\n          {({ isSelected, isIndeterminate }) => (\n            <>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </>\n          )}\n        </Aria.Checkbox>\n      </ClearPropsContext>\n    );\n  },\n);\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,MAAM,QAAW,GAAA,aAAA;AAAA,EACtB,UAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,IAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,QAAA,EAAU,SAAS,CAAA;AAErD,IAAA,2BACG,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,CAAA,QAAA,EAAL,EAAe,GAAG,IAAA,EAAM,SAAW,EAAA,aAAA,EAAe,KAChD,QAAC,EAAA,CAAA,EAAE,UAAY,EAAA,eAAA,uBAEX,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA,uBACE,mBAAoB,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAM,IAC3C,eACF,mBAAA,GAAA,CAAC,yBAA0B,EAAA,EAAA,SAAA,EAAW,OAAO,IAAM,EAAA,CAAA,uBAElD,iBAAkB,EAAA,EAAA,SAAA,EAAW,OAAO,IAAM,EAAA,CAAA;AAAA,MAE5C;AAAA,KAAA,EACH,GAEJ,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckboxProps\n  extends PropsWithChildren<Omit<Aria.CheckboxProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.checkbox, className);\n\n  return (\n    <ClearPropsContext>\n      <Aria.Checkbox {...rest} className={rootClassName} ref={ref}>\n        {({ isSelected, isIndeterminate }) => (\n          <>\n            {isSelected ? (\n              <IconCheckboxChecked className={styles.icon} />\n            ) : isIndeterminate ? (\n              <IconCheckboxIndeterminate className={styles.icon} />\n            ) : (\n              <IconCheckboxEmpty className={styles.icon} />\n            )}\n            {children}\n          </>\n        )}\n      </Aria.Checkbox>\n    </ClearPropsContext>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,MAAM,QAAW,GAAA,aAAA,CAAc,UAAY,EAAA,CAAC,KAAU,KAAA;AAC3D,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,2BACG,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,CAAA,QAAA,EAAL,EAAe,GAAG,IAAA,EAAM,SAAW,EAAA,aAAA,EAAe,KAChD,QAAC,EAAA,CAAA,EAAE,UAAY,EAAA,eAAA,uBAEX,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA,uBACE,mBAAoB,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAM,IAC3C,eACF,mBAAA,GAAA,CAAC,yBAA0B,EAAA,EAAA,SAAA,EAAW,OAAO,IAAM,EAAA,CAAA,uBAElD,iBAAkB,EAAA,EAAA,SAAA,EAAW,OAAO,IAAM,EAAA,CAAA;AAAA,IAE5C;AAAA,GAAA,EACH,GAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs

@@ -10,22 +10,19 @@ import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvide
 import { Checkbox } from '../Checkbox/Checkbox.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 
-const CheckboxButton = flowComponent(
-  "CheckboxButton",
-  (props) => {
-    const { children, className, ref, ...rest } = props;
-    const rootClassName = clsx(styles.checkboxButton, className);
-    const propsContext = {
-      Text: {
-        className: styles.label
-      },
-      Content: {
-        className: styles.content
-      }
-    };
-    return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Checkbox, { ...rest, className: rootClassName, ref, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }) });
-  }
-);
+const CheckboxButton = flowComponent("CheckboxButton", (props) => {
+  const { children, className, ref, ...rest } = props;
+  const rootClassName = clsx(styles.checkboxButton, className);
+  const propsContext = {
+    Text: {
+      className: styles.label
+    },
+    Content: {
+      className: styles.content
+    }
+  };
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Checkbox, { ...rest, className: rootClassName, ref, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }) });
+});
 
 export { CheckboxButton, CheckboxButton as default };
 //# sourceMappingURL=CheckboxButton.mjs.map

package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const CheckboxButton = flowComponent<\"CheckboxButton\", HTMLLabelElement>(\n  \"CheckboxButton\",\n  (props) => {\n    const { children, className, ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.checkboxButton, className);\n\n    const propsContext: PropsContext = {\n      Text: {\n        className: styles.label,\n      },\n      Content: {\n        className: styles.content,\n      },\n    };\n\n    return (\n      <ClearPropsContext>\n        <Checkbox {...rest} className={rootClassName} ref={ref}>\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </ClearPropsContext>\n    );\n  },\n);\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,gBAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,IAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,cAAA,EAAgB,SAAS,CAAA;AAE3D,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,IAAM,EAAA;AAAA,QACJ,WAAW,MAAO,CAAA;AAAA,OACpB;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAW,MAAO,CAAA;AAAA;AACpB,KACF;AAEA,IAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAU,GAAG,IAAM,EAAA,SAAA,EAAW,aAAe,EAAA,GAAA,EAC5C,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.checkboxButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n  };\n\n  return (\n    <ClearPropsContext>\n      <Checkbox {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Checkbox>\n    </ClearPropsContext>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,MAAM,cAAiB,GAAA,aAAA,CAAc,gBAAkB,EAAA,CAAC,KAAU,KAAA;AACvE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,cAAA,EAAgB,SAAS,CAAA;AAE3D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAU,GAAG,IAAM,EAAA,SAAA,EAAW,aAAe,EAAA,GAAA,EAC5C,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -21,7 +21,8 @@ const ColumnLayout = flowComponent("ColumnLayout", (props) => {
     rowGap = gap,
     columnGap = gap,
     elementType = "div",
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    ref
   } = props;
   const columnsS = s ? getColumns(s) : "1fr";
   const columnsM = m ? getColumns(m) : s ? columnsS : "1fr 1fr";
@@ -40,7 +41,15 @@ const ColumnLayout = flowComponent("ColumnLayout", (props) => {
       hideSeparator: true
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: rootClassName, style, children: /* @__PURE__ */ jsx(Element, { "aria-label": ariaLabel, className: styles.columnLayout, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }) });
+  return /* @__PURE__ */ jsx("div", { className: rootClassName, style, children: /* @__PURE__ */ jsx(
+    Element,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: styles.columnLayout,
+      children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+    }
+  ) });
 });
 
 export { ColumnLayout, ColumnLayout as default };

package/dist/js/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 React 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 { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps\n  extends PropsWithChildren,\n    PropsWithElementType<\"div\" | \"ul\">,\n    PropsWithClassName {\n  /** Column layout for container size s. */\n  s?: number[];\n  /** Column layout for container size m. */\n  m?: number[];\n  /** Column layout for container size l. */\n  l?: number[];\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/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const ColumnLayout = flowComponent(\"ColumnLayout\", (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  } = props;\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    \"--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 aria-label={ariaLabel} className={styles.columnLayout}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    </div>\n  );\n});\n\nexport default ColumnLayout;\n"],"names":[],"mappings":";;;;;;;;;;AA0CO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,GAAM,GAAA,GAAA;AAAA,IACN,MAAS,GAAA,GAAA;AAAA,IACT,SAAY,GAAA,GAAA;AAAA,IACZ,WAAc,GAAA,KAAA;AAAA,IACd,YAAc,EAAA;AAAA,GACZ,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAW,GAAA,CAAA,GAAI,UAAW,CAAA,CAAC,CAAI,GAAA,KAAA;AACrC,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAA,GAAI,IAAI,QAAW,GAAA,SAAA;AACpD,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAI,GAAA,CAAA,IAAK,IAAI,QAAW,GAAA,aAAA;AAEzD,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,0BAAA,EAA4B,6BAA6B,MAAM,CAAA,CAAA,CAAA;AAAA,IAC/D,6BAAA,EAA+B,6BAA6B,SAAS,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAElE,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,OAAS,EAAA;AAAA,MACP,aAAe,EAAA;AAAA;AACjB,GACF;AAEA,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,eAAe,KAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,YAAY,EAAA,SAAA,EAAW,SAAW,EAAA,MAAA,CAAO,cAChD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,OAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ColumnLayout.mjs","sources":["../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport React 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> extends PropsWithChildren,\n    PropsWithElementType<T>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElementTagNameMap[T]> {\n  /** Column layout for container size s. */\n  s?: number[];\n  /** Column layout for container size m. */\n  m?: number[];\n  /** Column layout for container size l. */\n  l?: number[];\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/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const ColumnLayout = flowComponent(\"ColumnLayout\", (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  } = props;\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    \"--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={styles.columnLayout}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    </div>\n  );\n});\n\nexport default ColumnLayout;\n"],"names":[],"mappings":";;;;;;;;;;AA+CO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,GAAM,GAAA,GAAA;AAAA,IACN,MAAS,GAAA,GAAA;AAAA,IACT,SAAY,GAAA,GAAA;AAAA,IACZ,WAAc,GAAA,KAAA;AAAA,IACd,YAAc,EAAA,SAAA;AAAA,IACd;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAW,GAAA,CAAA,GAAI,UAAW,CAAA,CAAC,CAAI,GAAA,KAAA;AACrC,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAA,GAAI,IAAI,QAAW,GAAA,SAAA;AACpD,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAI,GAAA,CAAA,IAAK,IAAI,QAAW,GAAA,aAAA;AAEzD,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,0BAAA,EAA4B,6BAA6B,MAAM,CAAA,CAAA,CAAA;AAAA,IAC/D,6BAAA,EAA+B,6BAA6B,SAAS,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAElE,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,OAAS,EAAA;AAAA,MACP,aAAe,EAAA;AAAA;AACjB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,aAAA,EAAe,KAC7B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,WAAW,MAAO,CAAA,YAAA;AAAA,MAElB,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -31,6 +31,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
     },
     controller: controllerFromProps,
     placeholder,
+    ref,
     ...rest
   } = props;
   const stringFormatter = useLocalizedStringFormatter(locales);
@@ -65,6 +66,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
   return /* @__PURE__ */ jsx(
     Aria.ComboBox,
     {
+      ref,
       menuTrigger,
       className: rootClassName,
       ...rest,

package/dist/js/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 React 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 formFieldStyles from \"@/components/FormField/FormField.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 { type OverlayController, useOverlayController } from \"@/lib/controller\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n}\n\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(\n    styles.comboBox,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n    Option: {\n      tunnelId: \"options\",\n    },\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  return (\n    <Aria.ComboBox\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} />\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 controller={controller}>\n            <TunnelExit id=\"options\" />\n          </Options>\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,QAAW,GAAA,aAAA,CAAc,UAAY,EAAA,CAAC,KAAU,KAAA;AAC3D,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAc,GAAA,OAAA;AAAA,IACd,WAAW,MAAM;AAAA,KAEjB;AAAA,IACA,oBAAoB,MAAM;AAAA,KAE1B;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,WAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,QAAA;AAAA,IACP,eAAgB,CAAA,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAM,MAAA,uBAAA,GAA0B,CAAC,GAAoB,KAAA;AACnD,IAAS,QAAA,CAAA,MAAA,CAAO,GAAG,CAAC,CAAA;AACpB,IAAA,iBAAA,CAAkB,GAAG,CAAA;AAAA,GACvB;AAEA,EAAM,MAAA,qBAAA,GAAwB,qBAAqB,UAAY,EAAA;AAAA,IAC7D,0BAA4B,EAAA;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAuB,IAAA,qBAAA;AAE1C,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,QAAA;AAAA,IAAL;AAAA,MACC,WAAA;AAAA,MACA,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,iBAAmB,EAAA,uBAAA;AAAA,MACnB,YAAc,EAAA,CAAC,MAAW,KAAA,UAAA,CAAW,QAAQ,MAAM,CAAA;AAAA,MAEnD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,CAAK,KAAL,EAAA,EAAW,WAA0B,EAAA,CAAA;AAAA,0BACtC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAO,CAAA,MAAA;AAAA,cAClB,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,sBAAsB,CAAA;AAAA,cACzD,OAAQ,EAAA,OAAA;AAAA,cACR,KAAM,EAAA,WAAA;AAAA,cAEN,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA;AACnB,SACF,EAAA,CAAA;AAAA,QAEC,QAAA;AAAA,4BAEA,OAAQ,EAAA,EAAA,UAAA,EACP,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,WAAU,CAC3B,EAAA;AAAA,OAAA,EACF,CACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React 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 formFieldStyles from \"@/components/FormField/FormField.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 { type OverlayController, useOverlayController } from \"@/lib/controller\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n}\n\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ref,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(\n    styles.comboBox,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n    Option: {\n      tunnelId: \"options\",\n    },\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  return (\n    <Aria.ComboBox\n      ref={ref}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} />\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 controller={controller}>\n            <TunnelExit id=\"options\" />\n          </Options>\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,QAAW,GAAA,aAAA,CAAc,UAAY,EAAA,CAAC,KAAU,KAAA;AAC3D,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAc,GAAA,OAAA;AAAA,IACd,WAAW,MAAM;AAAA,KAEjB;AAAA,IACA,oBAAoB,MAAM;AAAA,KAE1B;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,WAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,QAAA;AAAA,IACP,eAAgB,CAAA,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAM,MAAA,uBAAA,GAA0B,CAAC,GAAoB,KAAA;AACnD,IAAS,QAAA,CAAA,MAAA,CAAO,GAAG,CAAC,CAAA;AACpB,IAAA,iBAAA,CAAkB,GAAG,CAAA;AAAA,GACvB;AAEA,EAAM,MAAA,qBAAA,GAAwB,qBAAqB,UAAY,EAAA;AAAA,IAC7D,0BAA4B,EAAA;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAuB,IAAA,qBAAA;AAE1C,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,QAAA;AAAA,IAAL;AAAA,MACC,GAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,iBAAmB,EAAA,uBAAA;AAAA,MACnB,YAAc,EAAA,CAAC,MAAW,KAAA,UAAA,CAAW,QAAQ,MAAM,CAAA;AAAA,MAEnD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,CAAK,KAAL,EAAA,EAAW,WAA0B,EAAA,CAAA;AAAA,0BACtC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAO,CAAA,MAAA;AAAA,cAClB,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,sBAAsB,CAAA;AAAA,cACzD,OAAQ,EAAA,OAAA;AAAA,cACR,KAAM,EAAA,WAAA;AAAA,cAEN,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA;AACnB,SACF,EAAA,CAAA;AAAA,QAEC,QAAA;AAAA,4BAEA,OAAQ,EAAA,EAAA,UAAA,EACP,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,WAAU,CAC3B,EAAA;AAAA,OAAA,EACF,CACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs

@@ -14,7 +14,7 @@ import { Action } from '../../../Action/Action.mjs';
 const ContextMenuSection = flowComponent(
   "ContextMenuSection",
   (props) => {
-    const { children, selectionMode, ...rest } = props;
+    const { children, selectionMode, ref, ...rest } = props;
     const selectionVariant = getMenuItemSelectionVariant(selectionMode);
     const propsContext = {
       Heading: {
@@ -28,6 +28,7 @@ const ContextMenuSection = flowComponent(
     return /* @__PURE__ */ jsx(
       Aria.MenuSection,
       {
+        ref,
         ...rest,
         selectionMode: getAriaSelectionMode(selectionMode),
         className: styles.section,

package/dist/js/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuSection.mjs","sources":["../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  getCloseOverlayType,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n  FlowComponentProps & {\n    selectionMode?: ContextMenuSelectionMode;\n  };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n  \"ContextMenuSection\",\n  (props) => {\n    const { children, selectionMode, ...rest } = props;\n\n    const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 5,\n        wrapWith: <Aria.Header />,\n      },\n      MenuItem: {\n        selectionVariant,\n      },\n    };\n\n    return (\n      <Aria.MenuSection\n        {...rest}\n        selectionMode={getAriaSelectionMode(selectionMode)}\n        className={styles.section}\n      >\n        <PropsContextProvider props={propsContext} mergeInParentContext>\n          <Action skip>\n            <Action closeOverlay={getCloseOverlayType(selectionMode)}>\n              {children}\n            </Action>\n          </Action>\n        </PropsContextProvider>\n      </Aria.MenuSection>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAsBO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAA,MAAM,EAAE,QAAA,EAAU,aAAe,EAAA,GAAG,MAAS,GAAA,KAAA;AAE7C,IAAM,MAAA,gBAAA,GAAmB,4BAA4B,aAAa,CAAA;AAElE,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,CAAA;AAAA,QACP,QAAU,kBAAA,GAAA,CAAC,IAAK,CAAA,MAAA,EAAL,EAAY;AAAA,OACzB;AAAA,MACA,QAAU,EAAA;AAAA,QACR;AAAA;AACF,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,IAAK,CAAA,WAAA;AAAA,MAAL;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,aAAA,EAAe,qBAAqB,aAAa,CAAA;AAAA,QACjD,WAAW,MAAO,CAAA,OAAA;AAAA,QAElB,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,cAAc,oBAAoB,EAAA,IAAA,EAC7D,8BAAC,MAAO,EAAA,EAAA,IAAA,EAAI,IACV,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,YAAc,EAAA,mBAAA,CAAoB,aAAa,CACpD,EAAA,QAAA,EACH,GACF,CACF,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"ContextMenuSection.mjs","sources":["../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  getCloseOverlayType,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n  FlowComponentProps & {\n    selectionMode?: ContextMenuSelectionMode;\n  };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n  \"ContextMenuSection\",\n  (props) => {\n    const { children, selectionMode, ref, ...rest } = props;\n\n    const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 5,\n        wrapWith: <Aria.Header />,\n      },\n      MenuItem: {\n        selectionVariant,\n      },\n    };\n\n    return (\n      <Aria.MenuSection\n        ref={ref}\n        {...rest}\n        selectionMode={getAriaSelectionMode(selectionMode)}\n        className={styles.section}\n      >\n        <PropsContextProvider props={propsContext} mergeInParentContext>\n          <Action skip>\n            <Action closeOverlay={getCloseOverlayType(selectionMode)}>\n              {children}\n            </Action>\n          </Action>\n        </PropsContextProvider>\n      </Aria.MenuSection>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAsBO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAA,MAAM,EAAE,QAAU,EAAA,aAAA,EAAe,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAElD,IAAM,MAAA,gBAAA,GAAmB,4BAA4B,aAAa,CAAA;AAElE,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,CAAA;AAAA,QACP,QAAU,kBAAA,GAAA,CAAC,IAAK,CAAA,MAAA,EAAL,EAAY;AAAA,OACzB;AAAA,MACA,QAAU,EAAA;AAAA,QACR;AAAA;AACF,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,IAAK,CAAA,WAAA;AAAA,MAAL;AAAA,QACC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,aAAA,EAAe,qBAAqB,aAAa,CAAA;AAAA,QACjD,WAAW,MAAO,CAAA,OAAA;AAAA,QAElB,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,cAAc,oBAAoB,EAAA,IAAA,EAC7D,8BAAC,MAAO,EAAA,EAAA,IAAA,EAAI,IACV,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,YAAc,EAAA,mBAAA,CAAoB,aAAa,CACpD,EAAA,QAAA,EACH,GACF,CACF,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist/js/components/src/components/CopyButton/CopyButton.mjs

@@ -17,37 +17,34 @@ import { Tooltip } from '../Tooltip/Tooltip.mjs';
 import { onlyText } from 'react-children-utilities';
 import { Action } from '../Action/Action.mjs';
 
-const CopyButton = flowComponent(
-  "CopyButton",
-  (props) => {
-    const {
-      text,
-      ref,
-      variant = "plain",
-      color = "secondary",
-      ...buttonProps
-    } = props;
-    const stringFormatter = useLocalizedStringFormatter(locales);
-    const tooltip = stringFormatter.format("copyButton.copy");
-    const copyValue = () => {
-      copy(onlyText(text));
-    };
-    return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
-      /* @__PURE__ */ jsx(Action, { action: copyValue, showFeedback: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          "aria-label": tooltip,
-          ...buttonProps,
-          ref,
-          variant,
-          color,
-          children: /* @__PURE__ */ jsx(IconCopy, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { children: tooltip })
-    ] }) });
-  }
-);
+const CopyButton = flowComponent("CopyButton", (props) => {
+  const {
+    text,
+    ref,
+    variant = "plain",
+    color = "secondary",
+    ...buttonProps
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const tooltip = stringFormatter.format("copyButton.copy");
+  const copyValue = () => {
+    copy(onlyText(text));
+  };
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+    /* @__PURE__ */ jsx(Action, { action: copyValue, showFeedback: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": tooltip,
+        ...buttonProps,
+        ref,
+        variant,
+        color,
+        children: /* @__PURE__ */ jsx(IconCopy, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { children: tooltip })
+  ] }) });
+});
 
 export { CopyButton, CopyButton as default };
 //# sourceMappingURL=CopyButton.mjs.map

package/dist/js/components/src/components/CopyButton/CopyButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.mjs","sources":["../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\nimport copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n  extends Omit<ButtonProps, \"onPress\" | \"aria-label\" | \"render\">,\n    FlowComponentProps {\n  /** The text to copy. */\n  text: ReactNode;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const CopyButton = flowComponent<\"CopyButton\", HTMLButtonElement>(\n  \"CopyButton\",\n  (props) => {\n    const {\n      text,\n      ref,\n      variant = \"plain\",\n      color = \"secondary\",\n      ...buttonProps\n    } = props;\n\n    const stringFormatter = useLocalizedStringFormatter(locales);\n\n    const tooltip = stringFormatter.format(\"copyButton.copy\");\n\n    const copyValue = () => {\n      copy(onlyText(text));\n    };\n\n    return (\n      <ClearPropsContext>\n        <TooltipTrigger>\n          <Action action={copyValue} showFeedback>\n            <Button\n              aria-label={tooltip}\n              {...buttonProps}\n              ref={ref}\n              variant={variant}\n              color={color}\n            >\n              <IconCopy />\n            </Button>\n          </Action>\n          <Tooltip>{tooltip}</Tooltip>\n        </TooltipTrigger>\n      </ClearPropsContext>\n    );\n  },\n);\n\nexport default CopyButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0BO,MAAM,UAAa,GAAA,aAAA;AAAA,EACxB,YAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAM,MAAA;AAAA,MACJ,IAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAU,GAAA,OAAA;AAAA,MACV,KAAQ,GAAA,WAAA;AAAA,MACR,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,IAAM,MAAA,OAAA,GAAU,eAAgB,CAAA,MAAA,CAAO,iBAAiB,CAAA;AAExD,IAAA,MAAM,YAAY,MAAM;AACtB,MAAK,IAAA,CAAA,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA,KACrB;AAEA,IACE,uBAAA,GAAA,CAAC,iBACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,MAAA,EAAQ,SAAW,EAAA,YAAA,EAAY,IACrC,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,YAAY,EAAA,OAAA;AAAA,UACX,GAAG,WAAA;AAAA,UACJ,GAAA;AAAA,UACA,OAAA;AAAA,UACA,KAAA;AAAA,UAEA,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA,OAEd,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,WAAS,QAAQ,EAAA,OAAA,EAAA;AAAA,KAAA,EACpB,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"CopyButton.mjs","sources":["../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\nimport copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n  extends Omit<ButtonProps, \"onPress\" | \"aria-label\" | \"render\">,\n    FlowComponentProps<HTMLButtonElement> {\n  /** The text to copy. */\n  text: ReactNode;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n  const {\n    text,\n    ref,\n    variant = \"plain\",\n    color = \"secondary\",\n    ...buttonProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const tooltip = stringFormatter.format(\"copyButton.copy\");\n\n  const copyValue = () => {\n    copy(onlyText(text));\n  };\n\n  return (\n    <ClearPropsContext>\n      <TooltipTrigger>\n        <Action action={copyValue} showFeedback>\n          <Button\n            aria-label={tooltip}\n            {...buttonProps}\n            ref={ref}\n            variant={variant}\n            color={color}\n          >\n            <IconCopy />\n          </Button>\n        </Action>\n        <Tooltip>{tooltip}</Tooltip>\n      </TooltipTrigger>\n    </ClearPropsContext>\n  );\n});\n\nexport default CopyButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0BO,MAAM,UAAa,GAAA,aAAA,CAAc,YAAc,EAAA,CAAC,KAAU,KAAA;AAC/D,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAU,GAAA,OAAA;AAAA,IACV,KAAQ,GAAA,WAAA;AAAA,IACR,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAM,MAAA,OAAA,GAAU,eAAgB,CAAA,MAAA,CAAO,iBAAiB,CAAA;AAExD,EAAA,MAAM,YAAY,MAAM;AACtB,IAAK,IAAA,CAAA,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA,GACrB;AAEA,EACE,uBAAA,GAAA,CAAC,iBACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,MAAA,EAAQ,SAAW,EAAA,YAAA,EAAY,IACrC,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,OAAA;AAAA,QACX,GAAG,WAAA;AAAA,QACJ,GAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QAEA,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA,KAEd,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,WAAS,QAAQ,EAAA,OAAA,EAAA;AAAA,GAAA,EACpB,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/DatePicker/DatePicker.mjs

@@ -21,7 +21,7 @@ import 'react-aria';
 import '@chakra-ui/live-region';
 
 const DatePicker = flowComponent("DatePicker", (props) => {
-  const { children, className, errorMessage, onChange, ...rest } = props;
+  const { children, className, errorMessage, onChange, ref, ...rest } = props;
   const rootClassName = clsx(formFieldStyles.formField, className);
   const propsContext = {
     Label: {
@@ -39,6 +39,7 @@ const DatePicker = flowComponent("DatePicker", (props) => {
   return /* @__PURE__ */ jsxs(
     Aria.DatePicker,
     {
+      ref,
       ...rest,
       className: rootClassName,
       onOpenChange: (v) => popoverController.setOpen(v),

package/dist/js/components/src/components/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","sources":["../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\">> {\n  /** The error message that is displayed below the input. */\n  errorMessage?: ReactNode;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, errorMessage, onChange, ...rest } = props;\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: styles.fieldDescription,\n    },\n    FieldError: {\n      className: styles.customFieldError,\n    },\n  };\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={styles.fieldError}>{errorMessage}</FieldError>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <Calendar />\n      </Popover>\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,UAAa,GAAA,aAAA,CAAc,YAAc,EAAA,CAAC,KAAU,KAAA;AAC/D,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,cAAc,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAEjE,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAKA,eAAO,CAAA,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAWA,eAAO,CAAA,KAAA;AAAA,MAClB,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAWA,eAAO,CAAA;AAAA,KACpB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAWA,eAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EACE,uBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,YAAc,EAAA,CAAC,CAAM,KAAA,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAkB,CAAA,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA;AAEhB,QAAA,iBAAA,CAAkB,KAAM,EAAA;AAAA,OAC1B;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,SAAA,EAAA,EAAU,UAAY,EAAA,KAAA,CAAM,UAAY,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAAA,eAAA,CAAO,YAAa,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,wBACxD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,YAAA;AAAA,YACV,eAAe,EAAA,IAAA;AAAA,YACf,UAAY,EAAA,iBAAA;AAAA,YAEZ,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA;AACZ;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DatePicker.mjs","sources":["../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\">>,\n    FlowComponentProps {\n  /** The error message that is displayed below the input. */\n  errorMessage?: ReactNode;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, errorMessage, onChange, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: styles.fieldDescription,\n    },\n    FieldError: {\n      className: styles.customFieldError,\n    },\n  };\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DatePicker\n      ref={ref}\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={styles.fieldError}>{errorMessage}</FieldError>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <Calendar />\n      </Popover>\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,UAAa,GAAA,aAAA,CAAc,YAAc,EAAA,CAAC,KAAU,KAAA;AAC/D,EAAM,MAAA,EAAE,UAAU,SAAW,EAAA,YAAA,EAAc,UAAU,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAEtE,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAKA,eAAO,CAAA,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAWA,eAAO,CAAA,KAAA;AAAA,MAClB,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAWA,eAAO,CAAA;AAAA,KACpB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAWA,eAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EACE,uBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,UAAA;AAAA,IAAL;AAAA,MACC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,YAAc,EAAA,CAAC,CAAM,KAAA,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAkB,CAAA,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA;AAEhB,QAAA,iBAAA,CAAkB,KAAM,EAAA;AAAA,OAC1B;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,SAAA,EAAA,EAAU,UAAY,EAAA,KAAA,CAAM,UAAY,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAAA,eAAA,CAAO,YAAa,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,wBACxD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,YAAA;AAAA,YACV,eAAe,EAAA,IAAA;AAAA,YACf,UAAY,EAAA,iBAAA;AAAA,YAEZ,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA;AACZ;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs

@@ -17,7 +17,7 @@ import { useOverlayController } from '../../lib/controller/overlay/useOverlayCon
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 
 const DateRangePicker = flowComponent("DateRangePicker", (props) => {
-  const { children, className, errorMessage, onChange, ...rest } = props;
+  const { children, className, errorMessage, onChange, ref, ...rest } = props;
   const rootClassName = clsx(formFieldStyles.formField, className);
   const propsContext = {
     Label: {
@@ -35,6 +35,7 @@ const DateRangePicker = flowComponent("DateRangePicker", (props) => {
   return /* @__PURE__ */ jsxs(
     Aria.DateRangePicker,
     {
+      ref,
       ...rest,
       className: rootClassName,
       onOpenChange: (v) => popoverController.setOpen(v),

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","sources":["../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { RangeCalendar } from \"../Calendar/RangeCalendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\">> {\n  /** The error message that is displayed below the input. */\n  errorMessage?: ReactNode;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  const { children, className, errorMessage, onChange, ...rest } = props;\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: styles.fieldDescription,\n    },\n    FieldError: {\n      className: styles.customFieldError,\n    },\n  };\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateRangeInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={styles.fieldError}>{errorMessage}</FieldError>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <RangeCalendar />\n      </Popover>\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;AAwBO,MAAM,eAAkB,GAAA,aAAA,CAAc,iBAAmB,EAAA,CAAC,KAAU,KAAA;AACzE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,cAAc,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAEjE,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAKA,eAAO,CAAA,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAWA,eAAO,CAAA,KAAA;AAAA,MAClB,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAWA,eAAO,CAAA;AAAA,KACpB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAWA,eAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EACE,uBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,eAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,YAAc,EAAA,CAAC,CAAM,KAAA,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAkB,CAAA,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA;AAEhB,QAAA,iBAAA,CAAkB,KAAM,EAAA;AAAA,OAC1B;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,UAAY,EAAA,KAAA,CAAM,UAAY,EAAA,CAAA;AAAA,wBAC7C,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAAA,eAAA,CAAO,YAAa,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,wBACxD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,YAAA;AAAA,YACV,eAAe,EAAA,IAAA;AAAA,YACf,UAAY,EAAA,iBAAA;AAAA,YAEZ,8BAAC,aAAc,EAAA,EAAA;AAAA;AAAA;AACjB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DateRangePicker.mjs","sources":["../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { RangeCalendar } from \"../Calendar/RangeCalendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\">>,\n    FlowComponentProps {\n  /** The error message that is displayed below the input. */\n  errorMessage?: ReactNode;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  const { children, className, errorMessage, onChange, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: styles.fieldDescription,\n    },\n    FieldError: {\n      className: styles.customFieldError,\n    },\n  };\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DateRangePicker\n      ref={ref}\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateRangeInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={styles.fieldError}>{errorMessage}</FieldError>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <RangeCalendar />\n      </Popover>\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;AA4BO,MAAM,eAAkB,GAAA,aAAA,CAAc,iBAAmB,EAAA,CAAC,KAAU,KAAA;AACzE,EAAM,MAAA,EAAE,UAAU,SAAW,EAAA,YAAA,EAAc,UAAU,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAEtE,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAKA,eAAO,CAAA,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAWA,eAAO,CAAA,KAAA;AAAA,MAClB,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAWA,eAAO,CAAA;AAAA,KACpB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAWA,eAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EACE,uBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,eAAA;AAAA,IAAL;AAAA,MACC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,YAAc,EAAA,CAAC,CAAM,KAAA,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAkB,CAAA,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA;AAEhB,QAAA,iBAAA,CAAkB,KAAM,EAAA;AAAA,OAC1B;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,UAAY,EAAA,KAAA,CAAM,UAAY,EAAA,CAAA;AAAA,wBAC7C,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAAA,eAAA,CAAO,YAAa,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,wBACxD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,YAAA;AAAA,YACV,eAAe,EAAA,IAAA;AAAA,YACf,UAAY,EAAA,iBAAA;AAAA,YAEZ,8BAAC,aAAc,EAAA,EAAA;AAAA;AAAA;AACjB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Div/Div.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Div.mjs","sources":["../../../../../../src/components/Div/Div.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface DivProps extends PropsWithChildren, PropsWithClassName {\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @flr-generate all */\nexport const Div: FC<DivProps> = (props) => {\n  const { children, ...restProps } = props;\n  return <div {...restProps}>{children}</div>;\n};\n\nexport default Div;\n"],"names":[],"mappings":";;AAQa,MAAA,GAAA,GAAoB,CAAC,KAAU,KAAA;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,SAAA,EAAc,GAAA,KAAA;AACnC,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,SAAA,EAAY,QAAS,EAAA,CAAA;AACvC;;;;"}
+{"version":3,"file":"Div.mjs","sources":["../../../../../../src/components/Div/Div.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface DivProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    RefAttributes<HTMLDivElement> {}\n\n/** @flr-generate all */\nexport const Div: FC<DivProps> = (props) => {\n  const { children, ...restProps } = props;\n  return <div {...restProps}>{children}</div>;\n};\n\nexport default Div;\n"],"names":[],"mappings":";;AASa,MAAA,GAAA,GAAoB,CAAC,KAAU,KAAA;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,SAAA,EAAc,GAAA,KAAA;AACnC,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,SAAA,EAAY,QAAS,EAAA,CAAA;AACvC;;;;"}

package/dist/js/components/src/components/FieldError/FieldError.mjs

@@ -12,9 +12,9 @@ import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import { IconDanger } from '../Icon/components/icons/IconDanger.mjs';
 
 const FieldError = flowComponent("FieldError", (props) => {
-  const { children, className, ...rest } = props;
+  const { children, className, ref, ...rest } = props;
   const rootClassName = clsx(styles.fieldError, className);
-  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Aria.FieldError, { ...rest, className: rootClassName, children: ({ validationErrors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Aria.FieldError, { ref, ...rest, className: rootClassName, children: ({ validationErrors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IconDanger, { size: "s" }),
     /* @__PURE__ */ jsx("span", { children: children ? children : validationErrors.join(" ") })
   ] }) }) });

package/dist/js/components/src/components/FieldError/FieldError.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.mjs","sources":["../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n\n  return (\n    <ClearPropsContext>\n      <Aria.FieldError {...rest} className={rootClassName}>\n        {({ validationErrors }) => (\n          <>\n            <IconDanger size=\"s\" />\n            <span>{children ? children : validationErrors.join(\" \")}</span>\n          </>\n        )}\n      </Aria.FieldError>\n    </ClearPropsContext>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,UAAa,GAAA,aAAA,CAAc,YAAc,EAAA,CAAC,KAAU,KAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzC,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAiB,GAAG,IAAM,EAAA,SAAA,EAAW,aACnC,EAAA,QAAA,EAAA,CAAC,EAAE,gBAAA,uBAEA,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,MAAK,GAAI,EAAA,CAAA;AAAA,wBACpB,MAAM,EAAA,EAAA,QAAA,EAAA,QAAA,GAAW,WAAW,gBAAiB,CAAA,IAAA,CAAK,GAAG,CAAE,EAAA;AAAA,GAAA,EAC1D,GAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FieldError.mjs","sources":["../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n\n  return (\n    <ClearPropsContext>\n      <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n        {({ validationErrors }) => (\n          <>\n            <IconDanger size=\"s\" />\n            <span>{children ? children : validationErrors.join(\" \")}</span>\n          </>\n        )}\n      </Aria.FieldError>\n    </ClearPropsContext>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,UAAa,GAAA,aAAA,CAAc,YAAc,EAAA,CAAC,KAAU,KAAA;AAC/D,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,GAAA,EAAW,GAAG,IAAA,EAAM,WAAW,aAC7C,EAAA,QAAA,EAAA,CAAC,EAAE,gBAAA,uBAEA,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,MAAK,GAAI,EAAA,CAAA;AAAA,wBACpB,MAAM,EAAA,EAAA,QAAA,EAAA,QAAA,GAAW,WAAW,gBAAiB,CAAA,IAAA,CAAK,GAAG,CAAE,EAAA;AAAA,GAAA,EAC1D,GAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FileCardList/FileCardList.mjs

@@ -9,11 +9,19 @@ import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvide
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 
 const FileCardList = flowComponent("FileCardList", (props) => {
-  const { className, ...rest } = props;
+  const { className, ref, ...rest } = props;
   const propsContext = {
     FileCard: { elementType: "li" }
   };
-  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(ColumnLayout, { elementType: "ul", className, ...rest }) });
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
+    ColumnLayout,
+    {
+      ref,
+      elementType: "ul",
+      className,
+      ...rest
+    }
+  ) });
 });
 
 export { FileCardList, FileCardList as default };

package/dist/js/components/src/components/FileCardList/FileCardList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileCardList.mjs","sources":["../../../../../../src/components/FileCardList/FileCardList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type FileCardListProps = Omit<ColumnLayoutProps, \"elementType\"> &\n  FlowComponentProps;\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FileCardList = flowComponent(\"FileCardList\", (props) => {\n  const { className, ...rest } = props;\n\n  const propsContext: PropsContext = {\n    FileCard: { elementType: \"li\" },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ColumnLayout elementType=\"ul\" className={className} {...rest} />\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCardList;\n"],"names":[],"mappings":";;;;;;;;AAiBO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,QAAA,EAAU,EAAE,WAAA,EAAa,IAAK;AAAA,GAChC;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,WAAA,EAAY,IAAK,EAAA,SAAA,EAAuB,GAAG,IAAA,EAAM,CACjE,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileCardList.mjs","sources":["../../../../../../src/components/FileCardList/FileCardList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type FileCardListProps = Omit<ColumnLayoutProps, \"elementType\"> &\n  FlowComponentProps;\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FileCardList = flowComponent(\"FileCardList\", (props) => {\n  const { className, ref, ...rest } = props;\n\n  const propsContext: PropsContext = {\n    FileCard: { elementType: \"li\" },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ColumnLayout\n        ref={ref}\n        elementType=\"ul\"\n        className={className}\n        {...rest}\n      />\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCardList;\n"],"names":[],"mappings":";;;;;;;;AAiBO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAEpC,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,QAAA,EAAU,EAAE,WAAA,EAAa,IAAK;AAAA,GAChC;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAY,EAAA,IAAA;AAAA,MACZ,SAAA;AAAA,MACC,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FileField/FileField.mjs

@@ -12,64 +12,55 @@ import '../../lib/propsContext/propsContext.mjs';
 import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
 
-const FileField = flowComponent(
-  "FileField",
-  (props) => {
-    const {
-      children,
-      ref,
-      isRequired,
-      isInvalid,
-      isDisabled,
-      validationBehavior,
-      onChange,
-      ...restInputProps
-    } = props;
-    const inputRef = useRef(null);
-    const formValidationState = useFormValidationState({
-      value: void 0,
-      validationBehavior,
-      isInvalid
-    });
-    useFormValidation({ validationBehavior }, formValidationState, inputRef);
-    const inputProps = useMemo(
-      () => ({
-        ...restInputProps,
-        ref: inputRef,
-        "aria-invalid": formValidationState.displayValidation.isInvalid,
-        value: void 0
-      }),
-      [formValidationState, isRequired, ...Object.values(restInputProps)]
-    );
-    const propsContext = {
-      Label: {
-        className: formFieldStyles.label,
-        optional: !props.isRequired
-      },
-      FieldDescription: {
-        className: formFieldStyles.fieldDescription
-      },
-      FieldError: {
-        className: formFieldStyles.customFieldError
-      }
-    };
-    return /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsx(
-      FieldErrorContext.Provider,
-      {
-        value: formValidationState.displayValidation,
-        children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-required": !!isRequired || void 0,
-            "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
-            className: formFieldStyles.formField,
-            children: /* @__PURE__ */ jsx(FileInput, { ref, onChange, isDisabled, children })
-          }
-        ) })
-      }
-    ) });
-  }
-);
+const FileField = flowComponent("FileField", (props) => {
+  const {
+    children,
+    ref,
+    isRequired,
+    isInvalid,
+    isDisabled,
+    validationBehavior,
+    onChange,
+    ...restInputProps
+  } = props;
+  const inputRef = useRef(null);
+  const formValidationState = useFormValidationState({
+    value: void 0,
+    validationBehavior,
+    isInvalid
+  });
+  useFormValidation({ validationBehavior }, formValidationState, inputRef);
+  const inputProps = useMemo(
+    () => ({
+      ...restInputProps,
+      ref: inputRef,
+      "aria-invalid": formValidationState.displayValidation.isInvalid,
+      value: void 0
+    }),
+    [formValidationState, isRequired, ...Object.values(restInputProps)]
+  );
+  const propsContext = {
+    Label: {
+      className: formFieldStyles.label,
+      optional: !props.isRequired
+    },
+    FieldDescription: {
+      className: formFieldStyles.fieldDescription
+    },
+    FieldError: {
+      className: formFieldStyles.customFieldError
+    }
+  };
+  return /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: formValidationState.displayValidation, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-required": !!isRequired || void 0,
+      "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
+      className: formFieldStyles.formField,
+      children: /* @__PURE__ */ jsx(FileInput, { ref, onChange, isDisabled, children })
+    }
+  ) }) }) });
+});
 
 export { FileField, FileField as default };
 //# sourceMappingURL=FileField.mjs.map