@mittwald/flow-react-components 0.2.0-alpha.6 → 0.2.0-alpha.600

package/dist/js/components/src/integrations/react-hook-form/components/SubmitButton/SubmitButton.mjs

@@ -0,0 +1,63 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../../../../components/Button/Button.mjs';
+import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+import { useFormContext } from '../context/formContext.mjs';
+import '../../../../lib/propsContext/propsContext.mjs';
+import '../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import { useMemo } from 'react';
+import 'react-hook-form';
+import 'react-hotkeys-hook';
+import 'react-aria';
+import '../../../../views/FieldErrorView.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import 'mobx';
+import '../../../../lib/controller/overlay/context.mjs';
+import 'invariant';
+import '../../../../components/Action/context.mjs';
+import '../../../../components/Action/models/ActionStateContext.mjs';
+import 'remeda';
+import '../ResetButton/ResetButton.mjs';
+import { Action } from '../../../../components/Action/Action.mjs';
+import '@react-aria/live-announcer';
+import { useMergeRefs } from 'use-callback-ref';
+
+const SubmitButton = flowComponent(
+  "SubmitButton",
+  (props) => {
+    const {
+      children,
+      ref,
+      buttonComponent: ButtonComponent = Button,
+      ...rest
+    } = props;
+    const {
+      id: formId = props.form,
+      formActionModel,
+      submitButtonRef: submitButtonRefFromFormContext
+    } = useFormContext();
+    const ButtonViewComponent = useMemo(() => ButtonComponent, [formId]);
+    const submitButtonRefFromProps = useObjectRef(ref);
+    const submitButtonRef = useMergeRefs([
+      submitButtonRefFromProps,
+      submitButtonRefFromFormContext
+    ]);
+    return /* @__PURE__ */ jsx(Action, { actionModel: formActionModel, children: /* @__PURE__ */ jsx(
+      ButtonViewComponent,
+      {
+        ...rest,
+        ref: submitButtonRef,
+        type: "submit",
+        form: formId,
+        children
+      }
+    ) });
+  },
+  {
+    type: "provider"
+  }
+);
+
+export { SubmitButton, SubmitButton as default };
+//# sourceMappingURL=SubmitButton.mjs.map

package/dist/js/components/src/integrations/react-hook-form/components/SubmitButton/SubmitButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import { Button, type ButtonProps } from \"@/components/Button\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFormContext } from \"@/integrations/react-hook-form\";\nimport { Action } from \"@/components/Action\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport { type FC, useMemo } from \"react\";\n\nexport type SubmitButtonProps = Omit<\n  ButtonProps,\n  \"isFailed\" | \"isSucceeded\" | \"isPending\" | \"isReadOnly\" | \"type\"\n> & {\n  buttonComponent?: FC<Omit<ButtonProps, \"ref\">>;\n};\n\nexport const SubmitButton = flowComponent(\n  \"SubmitButton\",\n  (props) => {\n    const {\n      children,\n      ref,\n      buttonComponent: ButtonComponent = Button,\n      ...rest\n    } = props;\n\n    const {\n      id: formId = props.form,\n      formActionModel,\n      submitButtonRef: submitButtonRefFromFormContext,\n    } = useFormContext();\n    const ButtonViewComponent = useMemo(() => ButtonComponent, [formId]);\n\n    const submitButtonRefFromProps = useObjectRef(ref);\n    const submitButtonRef = useMergeRefs([\n      submitButtonRefFromProps,\n      submitButtonRefFromFormContext,\n    ]);\n\n    return (\n      <Action actionModel={formActionModel}>\n        <ButtonViewComponent\n          {...rest}\n          ref={submitButtonRef}\n          type=\"submit\"\n          form={formId}\n        >\n          {children}\n        </ButtonViewComponent>\n      </Action>\n    );\n  },\n  {\n    type: \"provider\",\n  },\n);\n\nexport default SubmitButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,YAAA,GAAe,aAAA;AAAA,EAC1B,cAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,GAAA;AAAA,MACA,iBAAiB,eAAA,GAAkB,MAAA;AAAA,MACnC,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM;AAAA,MACJ,EAAA,EAAI,SAAS,KAAA,CAAM,IAAA;AAAA,MACnB,eAAA;AAAA,MACA,eAAA,EAAiB;AAAA,QACf,cAAA,EAAe;AACnB,IAAA,MAAM,sBAAsB,OAAA,CAAQ,MAAM,eAAA,EAAiB,CAAC,MAAM,CAAC,CAAA;AAEnE,IAAA,MAAM,wBAAA,GAA2B,aAAa,GAAG,CAAA;AACjD,IAAA,MAAM,kBAAkB,YAAA,CAAa;AAAA,MACnC,wBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,WAAA,EAAa,eAAA,EACnB,QAAA,kBAAA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,GAAA,EAAK,eAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAM,MAAA;AAAA,QAEL;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

package/dist/js/components/src/integrations/react-hook-form/components/context/formContext.mjs

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { createContext, useContext } from 'react';
+import invariant from 'invariant';
+
+const formContext = createContext(void 0);
+const FormContextProvider = formContext.Provider;
+const useFormContext = () => {
+  const ctx = useContext(formContext);
+  invariant(
+    !!ctx,
+    "Could not useFormContext() outside a Form, or multiple versions of Flow installed."
+  );
+  return ctx;
+};
+const useOptionalFormContext = () => useContext(formContext);
+
+export { FormContextProvider, formContext, useFormContext, useOptionalFormContext };
+//# sourceMappingURL=formContext.mjs.map

package/dist/js/components/src/integrations/react-hook-form/components/context/formContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"formContext.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/context/formContext.ts"],"sourcesContent":["import type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport {\n  createContext,\n  useContext,\n  type Dispatch,\n  type FormEvent,\n  type RefObject,\n  type SetStateAction,\n} from \"react\";\nimport invariant from \"invariant\";\nimport type { ActionModel } from \"@/components/Action/models/ActionModel\";\n\ninterface FormContext<F extends FieldValues> {\n  form: UseFormReturn<F>;\n  id: string;\n  isReadOnly: boolean;\n  setReadOnly: Dispatch<SetStateAction<boolean>>;\n  submitButtonRef: RefObject<HTMLButtonElement | null>;\n  submit: (e?: FormEvent<HTMLFormElement> | F) => void;\n  formActionModel: ActionModel;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFormContext = FormContext<any>;\n\nexport const formContext = createContext<AnyFormContext | undefined>(undefined);\n\nexport const FormContextProvider = formContext.Provider;\n\nexport const useFormContext = <F extends FieldValues>(): FormContext<F> => {\n  const ctx = useContext(formContext);\n  invariant(\n    !!ctx,\n    \"Could not useFormContext() outside a Form, or multiple versions of Flow installed.\",\n  );\n  return ctx;\n};\n\nexport const useOptionalFormContext = <F extends FieldValues>() =>\n  useContext(formContext) as FormContext<F> | undefined;\n"],"names":[],"mappings":";;;AAyBO,MAAM,WAAA,GAAc,cAA0C,MAAS;AAEvE,MAAM,sBAAsB,WAAA,CAAY;AAExC,MAAM,iBAAiB,MAA6C;AACzE,EAAA,MAAM,GAAA,GAAM,WAAW,WAAW,CAAA;AAClC,EAAA,SAAA;AAAA,IACE,CAAC,CAAC,GAAA;AAAA,IACF;AAAA,GACF;AACA,EAAA,OAAO,GAAA;AACT;AAEO,MAAM,sBAAA,GAAyB,MACpC,UAAA,CAAW,WAAW;;;;"}

package/dist/js/components/src/lib/array/toArray.mjs

@@ -0,0 +1,6 @@
+"use client"
+/* */
+const toArray = (val) => Array.isArray(val) ? val : [val];
+
+export { toArray };
+//# sourceMappingURL=toArray.mjs.map

package/dist/js/components/src/lib/array/toArray.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toArray.mjs","sources":["../../../../../../src/lib/array/toArray.ts"],"sourcesContent":["export const toArray = <T>(val: T | T[]): T[] =>\n  Array.isArray(val) ? val : [val];\n"],"names":[],"mappings":"AAAO,MAAM,OAAA,GAAU,CAAI,GAAA,KACzB,KAAA,CAAM,QAAQ,GAAG,CAAA,GAAI,GAAA,GAAM,CAAC,GAAG;;;;"}

package/dist/js/components/src/lib/componentFactory/flowComponent.mjs

@@ -0,0 +1,49 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { memo, cloneElement } from 'react';
+import { TunnelEntry } from '@mittwald/react-tunnel';
+import { SlotContextProvider } from '../slotContext/SlotContextProvider.mjs';
+import { useProps } from '../hooks/useProps.mjs';
+import { useComponentPropsContext } from '../propsContext/propsContext.mjs';
+import { ComponentPropsContextProvider } from '../propsContext/components/ComponentPropsContextProvider.mjs';
+import { ClearPropsContext } from '../propsContext/components/ClearPropsContext.mjs';
+import ClearPropsContextView from '../../views/ClearPropsContextView.mjs';
+
+function flowComponent(componentName, ImplementationComponentType, options = {}) {
+  const { type = "ui", isRemoteComponent = false } = options;
+  const MemoizedImplementationComponentType = memo(ImplementationComponentType);
+  function Component(props) {
+    const { tunnelId, wrapWith, ...propsWithContext } = useProps(
+      componentName,
+      props
+    );
+    const implementationTypeProps = propsWithContext;
+    const componentProps = useComponentPropsContext(componentName);
+    ImplementationComponentType.displayName = `FlowComponentImpl(${componentName})`;
+    let element = /* @__PURE__ */ jsx(MemoizedImplementationComponentType, { ...implementationTypeProps });
+    element = /* @__PURE__ */ jsx(ComponentPropsContextProvider, { componentProps, children: element });
+    if (type === "ui") {
+      if (isRemoteComponent) {
+        element = /* @__PURE__ */ jsx(ClearPropsContext, { children: element });
+      } else {
+        element = /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(ClearPropsContextView, { children: element }) });
+      }
+    }
+    if ("slot" in props && !!props.slot && typeof props.slot === "string") {
+      element = /* @__PURE__ */ jsx(SlotContextProvider, { slot: props.slot, component: componentName, children: element });
+    }
+    if (wrapWith) {
+      element = cloneElement(wrapWith, void 0, element);
+    }
+    if (tunnelId) {
+      element = /* @__PURE__ */ jsx(TunnelEntry, { id: tunnelId, children: element });
+    }
+    return element;
+  }
+  Component.displayName = `FlowComponent(${componentName})`;
+  return memo(Component);
+}
+
+export { flowComponent };
+//# sourceMappingURL=flowComponent.mjs.map

package/dist/js/components/src/lib/componentFactory/flowComponent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowComponent.mjs","sources":["../../../../../../src/lib/componentFactory/flowComponent.tsx"],"sourcesContent":["import type {\n  FlowComponentName,\n  FlowComponentProps as FlowComponentPropsOfName,\n} from \"@/components/propTypes\";\nimport type {\n  ComponentProps,\n  ComponentType,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n  FunctionComponent,\n} from \"react\";\nimport { cloneElement, memo } from \"react\";\nimport type { PropsWithTunnel } from \"@/lib/types/props\";\nimport { TunnelEntry } from \"@mittwald/react-tunnel\";\nimport SlotContextProvider from \"@/lib/slotContext/SlotContextProvider\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport { ComponentPropsContextProvider } from \"@/components/ComponentPropsContextProvider\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\n\ntype RefType<T> = T extends RefAttributes<infer R> ? R : undefined;\n\nexport interface FlowComponentProps<R = HTMLDivElement>\n  extends PropsWithTunnel,\n    RefAttributes<R> {\n  wrapWith?: ReactElement;\n}\n\ntype FlowComponentImplementationProps<C extends FlowComponentName> = Omit<\n  FlowComponentPropsOfName<C>,\n  keyof FlowComponentProps\n> &\n  RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\ntype FlowComponentImplementationType<C extends FlowComponentName> =\n  ComponentType<FlowComponentImplementationProps<C>>;\n\ntype FlowComponentType<C extends FlowComponentName> = FunctionComponent<\n  FlowComponentPropsOfName<C> &\n    RefAttributes<RefType<FlowComponentPropsOfName<C>>>\n>;\n\nexport type FlowComponentProvisionType = \"provider\" | \"ui\" | \"layout\";\n\ninterface Options {\n  type?: FlowComponentProvisionType;\n  isRemoteComponent?: boolean;\n}\n\nexport function flowComponent<C extends FlowComponentName>(\n  componentName: C,\n  ImplementationComponentType: FlowComponentImplementationType<C>,\n  options: Options = {},\n): FlowComponentType<C> {\n  type Props = FlowComponentPropsOfName<C> &\n    RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\n  const { type = \"ui\", isRemoteComponent = false } = options;\n\n  const MemoizedImplementationComponentType = memo(ImplementationComponentType);\n\n  function Component(props: Props) {\n    const { tunnelId, wrapWith, ...propsWithContext } = useProps(\n      componentName,\n      props as FlowComponentPropsOfName<C>,\n    ) as FlowComponentProps<RefType<FlowComponentPropsOfName<C>>>;\n\n    const implementationTypeProps = propsWithContext as ComponentProps<\n      typeof ImplementationComponentType\n    >;\n\n    const componentProps = useComponentPropsContext(componentName);\n\n    ImplementationComponentType.displayName = `FlowComponentImpl(${componentName})`;\n\n    let element: ReactNode = (\n      <MemoizedImplementationComponentType {...implementationTypeProps} />\n    );\n\n    element = (\n      <ComponentPropsContextProvider componentProps={componentProps}>\n        {element}\n      </ComponentPropsContextProvider>\n    );\n\n    if (type === \"ui\") {\n      /**\n       * Protect the inside of UI components for accidental prop changes through\n       * the Props Context.\n       */\n      if (isRemoteComponent) {\n        element = <ClearPropsContext>{element}</ClearPropsContext>;\n      } else {\n        /**\n         * In case of a UI component that does not have a remote counterpart\n         * (like the Modal component), the <ClearPropsContext> must be\n         * additionally applied on the host side by using the\n         * <ClearPropsContextView>.\n         *\n         * This prevents Props Contexts created by parent components on the host\n         * side affecting the children of this UI component.\n         */\n        element = (\n          <ClearPropsContext>\n            <ClearPropsContextView>{element}</ClearPropsContextView>\n          </ClearPropsContext>\n        );\n      }\n    }\n\n    if (\"slot\" in props && !!props.slot && typeof props.slot === \"string\") {\n      element = (\n        <SlotContextProvider slot={props.slot} component={componentName}>\n          {element}\n        </SlotContextProvider>\n      );\n    }\n\n    if (wrapWith) {\n      element = cloneElement(wrapWith, undefined, element);\n    }\n\n    if (tunnelId) {\n      element = <TunnelEntry id={tunnelId}>{element}</TunnelEntry>;\n    }\n    return element;\n  }\n\n  Component.displayName = `FlowComponent(${componentName})`;\n  return memo(Component);\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmDO,SAAS,aAAA,CACd,aAAA,EACA,2BAAA,EACA,OAAA,GAAmB,EAAC,EACE;AAItB,EAAA,MAAM,EAAE,IAAA,GAAO,IAAA,EAAM,iBAAA,GAAoB,OAAM,GAAI,OAAA;AAEnD,EAAA,MAAM,mCAAA,GAAsC,KAAK,2BAA2B,CAAA;AAE5E,EAAA,SAAS,UAAU,KAAA,EAAc;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,QAAA,EAAU,GAAG,kBAAiB,GAAI,QAAA;AAAA,MAClD,aAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,uBAAA,GAA0B,gBAAA;AAIhC,IAAA,MAAM,cAAA,GAAiB,yBAAyB,aAAa,CAAA;AAE7D,IAAA,2BAAA,CAA4B,WAAA,GAAc,qBAAqB,aAAa,CAAA,CAAA,CAAA;AAE5E,IAAA,IAAI,OAAA,mBACF,GAAA,CAAC,mCAAA,EAAA,EAAqC,GAAG,uBAAA,EAAyB,CAAA;AAGpE,IAAA,OAAA,mBACE,GAAA,CAAC,6BAAA,EAAA,EAA8B,cAAA,EAC5B,QAAA,EAAA,OAAA,EACH,CAAA;AAGF,IAAA,IAAI,SAAS,IAAA,EAAM;AAKjB,MAAA,IAAI,iBAAA,EAAmB;AACrB,QAAA,OAAA,mBAAU,GAAA,CAAC,qBAAmB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,MACxC,CAAA,MAAO;AAUL,QAAA,OAAA,mBACE,GAAA,CAAC,iBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAuB,mBAAQ,CAAA,EAClC,CAAA;AAAA,MAEJ;AAAA,IACF;AAEA,IAAA,IAAI,MAAA,IAAU,SAAS,CAAC,CAAC,MAAM,IAAA,IAAQ,OAAO,KAAA,CAAM,IAAA,KAAS,QAAA,EAAU;AACrE,MAAA,OAAA,uBACG,mBAAA,EAAA,EAAoB,IAAA,EAAM,MAAM,IAAA,EAAM,SAAA,EAAW,eAC/C,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,IAEJ;AAEA,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,OAAA,GAAU,YAAA,CAAa,QAAA,EAAU,MAAA,EAAW,OAAO,CAAA;AAAA,IACrD;AAEA,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,OAAA,mBAAU,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAI,QAAA,EAAW,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,IAChD;AACA,IAAA,OAAO,OAAA;AAAA,EACT;AAEA,EAAA,SAAA,CAAU,WAAA,GAAc,iBAAiB,aAAa,CAAA,CAAA,CAAA;AACtD,EAAA,OAAO,KAAK,SAAS,CAAA;AACvB;;;;"}

package/dist/js/components/src/lib/controller/overlay/OverlayContextProvider.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { useOverlayContext, overlayContext } from './context.mjs';
+
+const OverlayContextProvider = (props) => {
+  const { type, controller, children } = props;
+  const parentContext = useOverlayContext();
+  return /* @__PURE__ */ jsx(
+    overlayContext.Provider,
+    {
+      value: {
+        ...parentContext,
+        [type]: controller
+      },
+      children
+    }
+  );
+};
+
+export { OverlayContextProvider, OverlayContextProvider as default };
+//# sourceMappingURL=OverlayContextProvider.mjs.map

package/dist/js/components/src/lib/controller/overlay/OverlayContextProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayContextProvider.mjs","sources":["../../../../../../../src/lib/controller/overlay/OverlayContextProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport {\n  overlayContext,\n  useOverlayContext,\n} from \"@/lib/controller/overlay/context\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport type { OverlayController } from \"@/lib/controller\";\n\ninterface Props extends PropsWithChildren {\n  type: FlowComponentName;\n  controller: OverlayController;\n}\n\nexport const OverlayContextProvider: FC<Props> = (props) => {\n  const { type, controller, children } = props;\n  const parentContext = useOverlayContext();\n\n  return (\n    <overlayContext.Provider\n      value={{\n        ...parentContext,\n        [type]: controller,\n      }}\n    >\n      {children}\n    </overlayContext.Provider>\n  );\n};\n\nexport default OverlayContextProvider;\n"],"names":[],"mappings":";;;;AAcO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAY,QAAA,EAAS,GAAI,KAAA;AACvC,EAAA,MAAM,gBAAgB,iBAAA,EAAkB;AAExC,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA,CAAe,QAAA;AAAA,IAAf;AAAA,MACC,KAAA,EAAO;AAAA,QACL,GAAG,aAAA;AAAA,QACH,CAAC,IAAI,GAAG;AAAA,OACV;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/js/components/src/lib/controller/overlay/OverlayController.mjs

@@ -0,0 +1,84 @@
+"use client"
+/* */
+import { makeObservable, action, observable } from 'mobx';
+import { useSelector } from '../../mobx/useSelector.mjs';
+import { useStatic } from '../../hooks/useStatic.mjs';
+
+class OverlayController {
+  isOpen = false;
+  onOpenHandlers = /* @__PURE__ */ new Set();
+  onCloseHandlers = /* @__PURE__ */ new Set();
+  constructor(options) {
+    makeObservable(this, {
+      isOpen: observable,
+      open: action.bound,
+      close: action.bound,
+      toggle: action.bound,
+      setOpen: action.bound
+    });
+    this.isOpen = options?.isDefaultOpen ?? false;
+    if (options?.onOpen) {
+      this.onOpenHandlers.add(options.onOpen);
+    }
+    if (options?.onClose) {
+      this.onCloseHandlers.add(options.onClose);
+    }
+  }
+  static useNew(options) {
+    return useStatic(() => new OverlayController(options));
+  }
+  addOnOpen(handler) {
+    this.onOpenHandlers.add(handler);
+    return () => {
+      this.onOpenHandlers.delete(handler);
+    };
+  }
+  addOnClose(handler) {
+    this.onCloseHandlers.add(handler);
+    return () => {
+      this.onCloseHandlers.delete(handler);
+    };
+  }
+  executeOnClose() {
+    this.onCloseHandlers.forEach((handler) => handler());
+  }
+  executeOnOpen() {
+    this.onOpenHandlers.forEach((handler) => handler());
+  }
+  open() {
+    if (this.isOpen) {
+      return;
+    }
+    this.isOpen = true;
+    this.executeOnOpen();
+  }
+  close() {
+    if (!this.isOpen) {
+      return;
+    }
+    this.isOpen = false;
+    this.executeOnClose();
+  }
+  toggle() {
+    this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      this.executeOnOpen();
+    } else {
+      this.executeOnClose();
+    }
+  }
+  setOpen(to) {
+    this.isOpen = to;
+    if (to) {
+      this.executeOnOpen();
+    } else {
+      this.executeOnClose();
+    }
+  }
+  useIsOpen() {
+    return useSelector(() => this.isOpen);
+  }
+}
+
+export { OverlayController };
+//# sourceMappingURL=OverlayController.mjs.map

package/dist/js/components/src/lib/controller/overlay/OverlayController.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayController.mjs","sources":["../../../../../../../src/lib/controller/overlay/OverlayController.ts"],"sourcesContent":["import { action, makeObservable, observable } from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\ntype OpenStateHandler = () => void;\ntype DisposerFn = () => void;\n\nexport interface OverlayControllerOptions {\n  isDefaultOpen?: boolean;\n  onOpen?: OpenStateHandler;\n  onClose?: OpenStateHandler;\n}\n\nexport class OverlayController {\n  public isOpen = false;\n  private onOpenHandlers = new Set<OpenStateHandler>();\n  private onCloseHandlers = new Set<OpenStateHandler>();\n\n  public constructor(options?: OverlayControllerOptions) {\n    makeObservable(this, {\n      isOpen: observable,\n      open: action.bound,\n      close: action.bound,\n      toggle: action.bound,\n      setOpen: action.bound,\n    });\n    this.isOpen = options?.isDefaultOpen ?? false;\n\n    if (options?.onOpen) {\n      this.onOpenHandlers.add(options.onOpen);\n    }\n    if (options?.onClose) {\n      this.onCloseHandlers.add(options.onClose);\n    }\n  }\n\n  public static useNew(options?: OverlayControllerOptions): OverlayController {\n    return useStatic(() => new OverlayController(options));\n  }\n\n  public addOnOpen(handler: OpenStateHandler): DisposerFn {\n    this.onOpenHandlers.add(handler);\n    return () => {\n      this.onOpenHandlers.delete(handler);\n    };\n  }\n\n  public addOnClose(handler: OpenStateHandler): DisposerFn {\n    this.onCloseHandlers.add(handler);\n    return () => {\n      this.onCloseHandlers.delete(handler);\n    };\n  }\n\n  private executeOnClose(): void {\n    this.onCloseHandlers.forEach((handler) => handler());\n  }\n\n  private executeOnOpen(): void {\n    this.onOpenHandlers.forEach((handler) => handler());\n  }\n\n  public open(): void {\n    if (this.isOpen) {\n      return;\n    }\n    this.isOpen = true;\n    this.executeOnOpen();\n  }\n\n  public close(): void {\n    if (!this.isOpen) {\n      return;\n    }\n    this.isOpen = false;\n    this.executeOnClose();\n  }\n\n  public toggle(): void {\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      this.executeOnOpen();\n    } else {\n      this.executeOnClose();\n    }\n  }\n\n  public setOpen(to: boolean): void {\n    this.isOpen = to;\n\n    if (to) {\n      this.executeOnOpen();\n    } else {\n      this.executeOnClose();\n    }\n  }\n\n  public useIsOpen(): boolean {\n    return useSelector(() => this.isOpen);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/lib/controller/overlay/context.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+import { createContext, useContext } from 'react';
+
+const overlayContext = createContext({});
+const useOverlayContext = () => useContext(overlayContext);
+
+export { overlayContext, useOverlayContext };
+//# sourceMappingURL=context.mjs.map

package/dist/js/components/src/lib/controller/overlay/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","sources":["../../../../../../../src/lib/controller/overlay/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { OverlayController } from \"@/lib/controller/overlay/OverlayController\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\n\nexport type OverlayContext = Partial<\n  Record<FlowComponentName, OverlayController | undefined>\n>;\n\nexport const overlayContext = createContext<OverlayContext>({});\n\nexport const useOverlayContext = (): OverlayContext =>\n  useContext(overlayContext);\n"],"names":[],"mappings":";;AAQO,MAAM,cAAA,GAAiB,aAAA,CAA8B,EAAE;AAEvD,MAAM,iBAAA,GAAoB,MAC/B,UAAA,CAAW,cAAc;;;;"}

package/dist/js/components/src/lib/controller/overlay/useOverlayController.mjs

@@ -0,0 +1,37 @@
+"use client"
+/* */
+import { useOverlayContext } from './context.mjs';
+import { OverlayController } from './OverlayController.mjs';
+import { useEffect } from 'react';
+
+const useOverlayController = (overlayType, opts = {}) => {
+  const {
+    reuseControllerFromContext = true,
+    isDefaultOpen,
+    onOpen,
+    onClose
+  } = opts;
+  const newController = OverlayController.useNew({
+    isDefaultOpen,
+    onOpen,
+    onClose
+  });
+  const controllerFromContext = useOverlayContext()[overlayType];
+  const controller = reuseControllerFromContext && controllerFromContext ? controllerFromContext : newController;
+  useEffect(() => {
+    const disposers = [];
+    if (onOpen) {
+      disposers.push(controller.addOnOpen(onOpen));
+    }
+    if (onClose) {
+      disposers.push(controller.addOnClose(onClose));
+    }
+    return () => {
+      disposers.forEach((dispose) => dispose());
+    };
+  }, [onOpen, onClose]);
+  return controller;
+};
+
+export { useOverlayController };
+//# sourceMappingURL=useOverlayController.mjs.map

package/dist/js/components/src/lib/controller/overlay/useOverlayController.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayController.mjs","sources":["../../../../../../../src/lib/controller/overlay/useOverlayController.ts"],"sourcesContent":["import { useOverlayContext } from \"@/lib/controller/overlay/context\";\nimport type { OverlayControllerOptions } from \"@/lib/controller/overlay/OverlayController\";\nimport { OverlayController } from \"@/lib/controller/overlay/OverlayController\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { useEffect } from \"react\";\n\ninterface Options extends OverlayControllerOptions {\n  reuseControllerFromContext?: boolean;\n}\n\nexport const useOverlayController = (\n  overlayType: FlowComponentName,\n  opts: Options = {},\n): OverlayController => {\n  const {\n    reuseControllerFromContext = true,\n    isDefaultOpen,\n    onOpen,\n    onClose,\n  } = opts;\n\n  const newController = OverlayController.useNew({\n    isDefaultOpen,\n    onOpen,\n    onClose,\n  });\n  const controllerFromContext = useOverlayContext()[overlayType];\n\n  const controller =\n    reuseControllerFromContext && controllerFromContext\n      ? controllerFromContext\n      : newController;\n\n  useEffect(() => {\n    const disposers: (() => void)[] = [];\n\n    if (onOpen) {\n      disposers.push(controller.addOnOpen(onOpen));\n    }\n\n    if (onClose) {\n      disposers.push(controller.addOnClose(onClose));\n    }\n\n    return () => {\n      disposers.forEach((dispose) => dispose());\n    };\n  }, [onOpen, onClose]);\n\n  return controller;\n};\n"],"names":[],"mappings":";;;;AAUO,MAAM,oBAAA,GAAuB,CAClC,WAAA,EACA,IAAA,GAAgB,EAAC,KACK;AACtB,EAAA,MAAM;AAAA,IACJ,0BAAA,GAA6B,IAAA;AAAA,IAC7B,aAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF,GAAI,IAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,kBAAkB,MAAA,CAAO;AAAA,IAC7C,aAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AACD,EAAA,MAAM,qBAAA,GAAwB,iBAAA,EAAkB,CAAE,WAAW,CAAA;AAE7D,EAAA,MAAM,UAAA,GACJ,0BAAA,IAA8B,qBAAA,GAC1B,qBAAA,GACA,aAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAA4B,EAAC;AAEnC,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,SAAA,CAAU,IAAA,CAAK,UAAA,CAAW,SAAA,CAAU,MAAM,CAAC,CAAA;AAAA,IAC7C;AAEA,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,SAAA,CAAU,IAAA,CAAK,UAAA,CAAW,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,IAC/C;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,OAAA,KAAY,OAAA,EAAS,CAAA;AAAA,IAC1C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AAEpB,EAAA,OAAO,UAAA;AACT;;;;"}

package/dist/js/components/src/lib/form/isFocused.mjs

@@ -0,0 +1,8 @@
+"use client"
+/* */
+const isFocused = (element) => {
+  return element?.getAttribute("data-focused") === "true";
+};
+
+export { isFocused };
+//# sourceMappingURL=isFocused.mjs.map

package/dist/js/components/src/lib/form/isFocused.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isFocused.mjs","sources":["../../../../../../src/lib/form/isFocused.ts"],"sourcesContent":["export const isFocused = (element: HTMLElement | null) => {\n  return element?.getAttribute(\"data-focused\") === \"true\";\n};\n"],"names":[],"mappings":"AAAO,MAAM,SAAA,GAAY,CAAC,OAAA,KAAgC;AACxD,EAAA,OAAO,OAAA,EAAS,YAAA,CAAa,cAAc,CAAA,KAAM,MAAA;AACnD;;;;"}

package/dist/js/components/src/lib/getContainerBreakpointSizeClassName.mjs

@@ -0,0 +1,6 @@
+"use client"
+/* */
+const getContainerBreakpointSizeClassName = (containerBreakpointSize) => `container-breakpoint-size-${containerBreakpointSize}`;
+
+export { getContainerBreakpointSizeClassName };
+//# sourceMappingURL=getContainerBreakpointSizeClassName.mjs.map

package/dist/js/components/src/lib/getContainerBreakpointSizeClassName.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getContainerBreakpointSizeClassName.mjs","sources":["../../../../../src/lib/getContainerBreakpointSizeClassName.ts"],"sourcesContent":["import type { ContainerBreakpointSize } from \"@/lib/types/props\";\n\nexport const getContainerBreakpointSizeClassName = (\n  containerBreakpointSize: ContainerBreakpointSize,\n) => `container-breakpoint-size-${containerBreakpointSize}`;\n"],"names":[],"mappings":"AAEO,MAAM,mCAAA,GAAsC,CACjD,uBAAA,KACG,CAAA,0BAAA,EAA6B,uBAAuB,CAAA;;;;"}

package/dist/js/components/src/lib/hooks/dom/useMakeFocusable.mjs

@@ -0,0 +1,28 @@
+"use client"
+/* */
+import { useEffect } from 'react';
+
+const useMakeFocusable = (ref, onFocus) => {
+  useEffect(() => {
+    const element = ref.current;
+    const shouldProcessElement = element && element instanceof HTMLElement;
+    if (!shouldProcessElement) {
+      return;
+    }
+    const onFocusHandler = () => onFocus?.();
+    element.addEventListener("focus", onFocusHandler);
+    const hasTabIndex = element.hasAttribute("tabIndex");
+    if (!hasTabIndex) {
+      element.setAttribute("tabIndex", "-1");
+    }
+    return () => {
+      element.removeEventListener("focus", onFocusHandler);
+      if (!hasTabIndex) {
+        element.removeAttribute("tabIndex");
+      }
+    };
+  }, [ref.current, onFocus]);
+};
+
+export { useMakeFocusable };
+//# sourceMappingURL=useMakeFocusable.mjs.map

package/dist/js/components/src/lib/hooks/dom/useMakeFocusable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMakeFocusable.mjs","sources":["../../../../../../../src/lib/hooks/dom/useMakeFocusable.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\n/**\n * A hook that makes an element focusable and calls a callback when it receives\n * focus.\n */\nexport const useMakeFocusable = (\n  ref: RefObject<unknown>,\n  onFocus?: CallableFunction,\n) => {\n  useEffect(() => {\n    const element = ref.current;\n    const shouldProcessElement = element && element instanceof HTMLElement;\n\n    if (!shouldProcessElement) {\n      return;\n    }\n\n    const onFocusHandler = () => onFocus?.();\n    element.addEventListener(\"focus\", onFocusHandler);\n\n    const hasTabIndex = element.hasAttribute(\"tabIndex\");\n    if (!hasTabIndex) {\n      // when we have no tabIndex, we set it to -1 to make it focusable\n      element.setAttribute(\"tabIndex\", \"-1\");\n    }\n\n    return () => {\n      element.removeEventListener(\"focus\", onFocusHandler);\n      if (!hasTabIndex) {\n        element.removeAttribute(\"tabIndex\");\n      }\n    };\n  }, [ref.current, onFocus]);\n};\n"],"names":[],"mappings":";;AAMO,MAAM,gBAAA,GAAmB,CAC9B,GAAA,EACA,OAAA,KACG;AACH,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,MAAM,oBAAA,GAAuB,WAAW,OAAA,YAAmB,WAAA;AAE3D,IAAA,IAAI,CAAC,oBAAA,EAAsB;AACzB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,cAAA,GAAiB,MAAM,OAAA,IAAU;AACvC,IAAA,OAAA,CAAQ,gBAAA,CAAiB,SAAS,cAAc,CAAA;AAEhD,IAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,YAAA,CAAa,UAAU,CAAA;AACnD,IAAA,IAAI,CAAC,WAAA,EAAa;AAEhB,MAAA,OAAA,CAAQ,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA,IACvC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,OAAA,CAAQ,mBAAA,CAAoB,SAAS,cAAc,CAAA;AACnD,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,OAAA,CAAQ,gBAAgB,UAAU,CAAA;AAAA,MACpC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,CAAI,OAAA,EAAS,OAAO,CAAC,CAAA;AAC3B;;;;"}

package/dist/js/components/src/lib/hooks/dom/useObserveOverflow.mjs

@@ -0,0 +1,45 @@
+"use client"
+/* */
+import { useRef, useState, useEffect } from 'react';
+import { useCallbackRef } from 'use-callback-ref';
+
+const useObserveOverflow = () => {
+  const observer = useRef(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const ref = useCallbackRef(null, (el) => {
+    stopObserver();
+    startObserver(el);
+  });
+  const onIntersectionChange = ([
+    intersection
+  ]) => {
+    if (intersection) {
+      setIsOverflowing(!intersection.isIntersecting);
+    }
+  };
+  const startObserver = (el = ref.current) => {
+    if (el && el instanceof Element) {
+      const newObserver = new IntersectionObserver(onIntersectionChange, {
+        root: el.parentElement,
+        // 1 = invoke callback when the element is 100% visible within the parent element
+        threshold: 1
+      });
+      observer.current = newObserver;
+      newObserver.observe(el);
+    }
+  };
+  const stopObserver = () => {
+    observer.current?.disconnect();
+  };
+  useEffect(() => {
+    startObserver();
+    return stopObserver;
+  }, [observer.current]);
+  return {
+    ref,
+    isOverflowing
+  };
+};
+
+export { useObserveOverflow };
+//# sourceMappingURL=useObserveOverflow.mjs.map

package/dist/js/components/src/lib/hooks/dom/useObserveOverflow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useObserveOverflow.mjs","sources":["../../../../../../../src/lib/hooks/dom/useObserveOverflow.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useCallbackRef } from \"use-callback-ref\";\n\ninterface UseObserveOverflowReturn {\n  ref: RefObject<never>;\n  isOverflowing: boolean;\n}\n\nexport const useObserveOverflow = (): UseObserveOverflowReturn => {\n  const observer = useRef<IntersectionObserver>(null);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const ref = useCallbackRef<never>(null, (el: unknown) => {\n    stopObserver();\n    startObserver(el);\n  });\n\n  const onIntersectionChange: IntersectionObserverCallback = ([\n    intersection,\n  ]) => {\n    if (intersection) {\n      setIsOverflowing(!intersection.isIntersecting);\n    }\n  };\n\n  const startObserver = (el: unknown = ref.current) => {\n    if (el && el instanceof Element) {\n      const newObserver = new IntersectionObserver(onIntersectionChange, {\n        root: el.parentElement,\n        // 1 = invoke callback when the element is 100% visible within the parent element\n        threshold: 1.0,\n      });\n\n      observer.current = newObserver;\n      newObserver.observe(el);\n    }\n  };\n\n  const stopObserver = () => {\n    observer.current?.disconnect();\n  };\n\n  useEffect(() => {\n    startObserver();\n    return stopObserver;\n  }, [observer.current]);\n\n  return {\n    ref,\n    isOverflowing,\n  } as never;\n};\n"],"names":[],"mappings":";;;AASO,MAAM,qBAAqB,MAAgC;AAChE,EAAA,MAAM,QAAA,GAAW,OAA6B,IAAI,CAAA;AAClD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAExD,EAAA,MAAM,GAAA,GAAM,cAAA,CAAsB,IAAA,EAAM,CAAC,EAAA,KAAgB;AACvD,IAAA,YAAA,EAAa;AACb,IAAA,aAAA,CAAc,EAAE,CAAA;AAAA,EAClB,CAAC,CAAA;AAED,EAAA,MAAM,uBAAqD,CAAC;AAAA,IAC1D;AAAA,GACF,KAAM;AACJ,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,gBAAA,CAAiB,CAAC,aAAa,cAAc,CAAA;AAAA,IAC/C;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,EAAA,GAAc,GAAA,CAAI,OAAA,KAAY;AACnD,IAAA,IAAI,EAAA,IAAM,cAAc,OAAA,EAAS;AAC/B,MAAA,MAAM,WAAA,GAAc,IAAI,oBAAA,CAAqB,oBAAA,EAAsB;AAAA,QACjE,MAAM,EAAA,CAAG,aAAA;AAAA;AAAA,QAET,SAAA,EAAW;AAAA,OACZ,CAAA;AAED,MAAA,QAAA,CAAS,OAAA,GAAU,WAAA;AACnB,MAAA,WAAA,CAAY,QAAQ,EAAE,CAAA;AAAA,IACxB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,QAAA,CAAS,SAAS,UAAA,EAAW;AAAA,EAC/B,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,EAAc;AACd,IAAA,OAAO,YAAA;AAAA,EACT,CAAA,EAAG,CAAC,QAAA,CAAS,OAAO,CAAC,CAAA;AAErB,EAAA,OAAO;AAAA,IACL,GAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/js/components/src/lib/hooks/useFieldComponent.mjs

@@ -0,0 +1,32 @@
+"use client"
+/* */
+import '../propsContext/propsContext.mjs';
+import '../propsContext/components/PropsContextProvider.mjs';
+import formFieldStyles from '../../components/FormField/FormField.module.scss.mjs';
+import { useFieldError } from './useFieldError.mjs';
+import clsx from 'clsx';
+
+const useFieldComponent = (props) => {
+  const { FieldErrorView, FieldErrorCaptureContext } = useFieldError();
+  const fieldPropsContext = {
+    Label: {
+      className: formFieldStyles.label,
+      optional: !props.isRequired,
+      isDisabled: !!props.isDisabled
+    },
+    FieldDescription: {
+      className: formFieldStyles.fieldDescription
+    }
+  };
+  return {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldPropsContext,
+    fieldProps: {
+      className: clsx(formFieldStyles.formField)
+    }
+  };
+};
+
+export { useFieldComponent };
+//# sourceMappingURL=useFieldComponent.mjs.map

package/dist/js/components/src/lib/hooks/useFieldComponent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldComponent.mjs","sources":["../../../../../../src/lib/hooks/useFieldComponent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFieldError } from \"@/lib/hooks/useFieldError\";\nimport clsx, { type ClassValue } from \"clsx\";\n\ninterface FieldComponentProps {\n  className?: ClassValue;\n  isRequired?: boolean;\n  isDisabled?: boolean;\n}\n\nexport interface UseFieldComponent {\n  FieldErrorCaptureContext: FC<PropsWithChildren>;\n  FieldErrorView: FC;\n  fieldPropsContext: PropsContext;\n  fieldProps: {\n    className?: ReturnType<typeof clsx>;\n  };\n}\n\nexport const useFieldComponent = (\n  props: FieldComponentProps,\n): UseFieldComponent => {\n  const { FieldErrorView, FieldErrorCaptureContext } = useFieldError();\n\n  // setting up the props context for all components that\n  // are part of a form control\n  const fieldPropsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n      isDisabled: !!props.isDisabled,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n  };\n\n  return {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps: {\n      className: clsx(formFieldStyles.formField),\n    },\n  } as const;\n};\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,iBAAA,GAAoB,CAC/B,KAAA,KACsB;AACtB,EAAA,MAAM,EAAE,cAAA,EAAgB,wBAAA,EAAyB,GAAI,aAAA,EAAc;AAInE,EAAA,MAAM,iBAAA,GAAkC;AAAA,IACtC,KAAA,EAAO;AAAA,MACL,WAAW,eAAA,CAAgB,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAA,CAAM,UAAA;AAAA,MACjB,UAAA,EAAY,CAAC,CAAC,KAAA,CAAM;AAAA,KACtB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAW,eAAA,CAAgB;AAAA;AAC7B,GACF;AAEA,EAAA,OAAO;AAAA,IACL,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,SAAA,EAAW,IAAA,CAAK,eAAA,CAAgB,SAAS;AAAA;AAC3C,GACF;AACF;;;;"}