@intlayer/design-system 3.2.2 → 3.3.3

package/tailwind.config.js

@@ -0,0 +1,215 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import tailwindAspectRatio from '@tailwindcss/aspect-ratio';
+import defaultTheme from 'tailwindcss/defaultTheme';
+import tailwindAnimations from 'tailwindcss/plugin';
+
+const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+const __dirname = path.dirname(__filename); // get the name of the directory
+
+/** @type {() => import('tailwindcss').Config} */
+const getTailwindConfig = () => {
+  const originAbsolutePath = process.cwd();
+  const localePath = __dirname;
+
+  let relativePath = path.relative(originAbsolutePath, localePath);
+
+  if (!relativePath) {
+    relativePath = '.';
+  }
+
+  return {
+    darkMode: ['selector', '[data-theme="dark"]'],
+    content: [
+      `${relativePath}/pages/**/*.{ts,tsx}`,
+      `${relativePath}/components/**/*.{ts,tsx}`,
+      `${relativePath}/app/**/*.{ts,tsx}`,
+      `${relativePath}/src/**/*.{ts,tsx}`,
+    ],
+    prefix: '',
+    theme: {
+      screens: {
+        ...defaultTheme.screens,
+      },
+      fontFamily: {
+        sans: ['Inter Variable'],
+      },
+      container: {
+        center: true,
+        padding: '2rem',
+        screens: {
+          '2xl': '1400px',
+        },
+      },
+      extend: {
+        aria: {
+          invalid: 'invalid="true"',
+        },
+        colors: {
+          background: {
+            DEFAULT: 'rgba(255, 255, 255, <alpha-value>)',
+            dark: 'rgba(23, 23, 23, <alpha-value>)',
+          },
+          text: {
+            DEFAULT: 'rgba(18, 18, 18, <alpha-value>)',
+            dark: 'rgba(255, 245, 237, <alpha-value>)',
+            opposite: {
+              DEFAULT: 'rgba(255, 245, 237, <alpha-value>)',
+              dark: 'rgba(28, 28, 28, <alpha-value>)',
+            },
+          },
+          card: {
+            DEFAULT: 'rgba(231, 231, 231, <alpha-value>)',
+            dark: 'rgba(39, 39, 39, <alpha-value>)',
+            hover: {
+              DEFAULT: 'rgba(231, 231, 231, <alpha-value>)',
+              dark: 'rgba(79, 79, 79, <alpha-value>)',
+            },
+          },
+          hypertext: {
+            DEFAULT: 'rgba(232, 121, 249, <alpha-value>)',
+            dark: 'rgba(232, 121, 249, <alpha-value>)',
+            hover: {
+              DEFAULT: 'rgba(197, 101, 212, <alpha-value>)',
+              dark: 'rgba(197, 101, 212, <alpha-value>)',
+            },
+            active: {
+              DEFAULT: 'rgba(232, 121, 249, <alpha-value>)',
+              dark: 'rgba(232, 121, 249, <alpha-value>)',
+            },
+          },
+          shadow: {
+            DEFAULT: 'rgba(18, 18, 18, <alpha-value>)',
+            dark: 'rgba(18, 18, 18, <alpha-value>)',
+          },
+          input: {
+            background: {
+              DEFAULT: 'rgba(255, 255, 255, <alpha-value>)',
+              dark: 'rgba(61, 61, 61, <alpha-value>)',
+            },
+            text: {
+              DEFAULT: 'rgba(18, 18, 18, <alpha-value>)',
+              dark: 'rgba(246, 246, 246, <alpha-value>)',
+            },
+            border: {
+              DEFAULT: 'rgba(246, 246, 246, <alpha-value>)',
+              dark: 'rgba(79, 79, 79, <alpha-value>)',
+              hover: {
+                DEFAULT: 'rgba(231, 231, 231, <alpha-value>)',
+                dark: 'rgba(93, 93, 93, <alpha-value>)',
+              },
+              focus: {
+                DEFAULT: 'rgba(209, 209, 209, <alpha-value>)',
+                dark: 'rgba(176, 176, 176, <alpha-value>)',
+              },
+            },
+          },
+          success: {
+            DEFAULT: 'rgba(0, 204, 102, <alpha-value>)',
+            dark: 'rgba(102, 255, 153, <alpha-value>)',
+          },
+          warning: {
+            DEFAULT: 'rgba(214, 153, 66, <alpha-value>)',
+            dark: 'rgba(255, 230, 109, <alpha-value>)',
+          },
+          error: {
+            DEFAULT: 'rgba(181, 24, 13, <alpha-value>)',
+            dark: 'rgba(255, 88, 77, <alpha-value>)',
+          },
+          white: {
+            DEFAULT: 'rgba(255, 255, 255, <alpha-value>)',
+            dark: 'rgba(255, 255, 255, <alpha-value>)',
+          },
+          black: {
+            DEFAULT: 'rgba(0, 0, 0, <alpha-value>)',
+            dark: 'rgba(0, 0, 0, <alpha-value>)',
+          },
+          primary: {
+            DEFAULT: 'rgba(232, 121, 249, <alpha-value>)',
+            dark: 'rgba(232, 121, 249, <alpha-value>)',
+            50: 'rgba(254, 244, 255, <alpha-value>)',
+            100: 'rgba(252, 232, 255, <alpha-value>)',
+            200: 'rgba(248, 208, 254, <alpha-value>)',
+            300: 'rgba(241, 171, 252, <alpha-value>)',
+            400: 'rgba(232, 121, 249, <alpha-value>)',
+            500: 'rgba(197, 101, 212, <alpha-value>)',
+            600: 'rgba(163, 81, 175, <alpha-value>)',
+            700: 'rgba(128, 61, 139, <alpha-value>)',
+            800: 'rgba(93, 41, 102, <alpha-value>)',
+            900: 'rgba(59, 21, 65, <alpha-value>)',
+            950: 'rgba(24, 1, 28, <alpha-value>)',
+          },
+          secondary: {
+            DEFAULT: 'rgba(255, 230, 109, <alpha-value>)',
+            dark: 'rgba(255, 230, 109, <alpha-value>)',
+            50: 'rgba(254, 251, 232, <alpha-value>)',
+            100: 'rgba(255, 246, 194, <alpha-value>)',
+            200: 'rgba(255, 230, 109, <alpha-value>)',
+            300: 'rgba(255, 216, 69, <alpha-value>)',
+            400: 'rgba(252, 193, 19, <alpha-value>)',
+            500: 'rgba(236, 168, 6, <alpha-value>)',
+            600: 'rgba(204, 129, 2, <alpha-value>)',
+            700: 'rgba(162, 90, 6, <alpha-value>)',
+            800: 'rgba(134, 71, 13, <alpha-value>)',
+            900: 'rgba(114, 58, 17, <alpha-value>)',
+            950: 'rgba(67, 29, 5, <alpha-value>)',
+          },
+          destructive: {
+            DEFAULT: 'rgba(251, 125, 60, <alpha-value>)',
+            dark: 'rgba(251, 125, 60, <alpha-value>)',
+            50: 'rgba(255, 245, 237, <alpha-value>)',
+            100: 'rgba(255, 232, 213, <alpha-value>)',
+            200: 'rgba(254, 206, 170, <alpha-value>)',
+            300: 'rgba(253, 171, 116, <alpha-value>)',
+            400: 'rgba(251, 125, 60, <alpha-value>)',
+            500: 'rgba(249, 90, 22, <alpha-value>)',
+            600: 'rgba(234, 63, 12, <alpha-value>)',
+            700: 'rgba(194, 45, 12, <alpha-value>)',
+            800: 'rgba(154, 37, 18, <alpha-value>)',
+            900: 'rgba(124, 33, 18, <alpha-value>)',
+            950: 'rgba(67, 13, 7, <alpha-value>)',
+          },
+          neutral: {
+            DEFAULT: 'rgba(93, 93, 93, <alpha-value>)',
+            dark: 'rgba(136, 136, 136, <alpha-value>)',
+            50: 'rgba(246, 246, 246, <alpha-value>)',
+            100: 'rgba(231, 231, 231, <alpha-value>)',
+            200: 'rgba(209, 209, 209, <alpha-value>)',
+            300: 'rgba(176, 176, 176, <alpha-value>)',
+            400: 'rgba(136, 136, 136, <alpha-value>)',
+            500: 'rgba(109, 109, 109, <alpha-value>)',
+            600: 'rgba(93, 93, 93, <alpha-value>)',
+            700: 'rgba(79, 79, 79, <alpha-value>)',
+            800: 'rgba(69, 69, 69, <alpha-value>)',
+            900: 'rgba(61, 61, 61, <alpha-value>)',
+            950: 'rgba(48, 48, 48, <alpha-value>)',
+          },
+        },
+      },
+      animation: {
+        spotlight: 'spotlight 2s ease .75s 1 forwards',
+      },
+      keyframes: {
+        spotlight: {
+          '0%': {
+            opacity: 0,
+            transform: 'translate(72%, -62%) scale(0.5)',
+          },
+          '100%': {
+            opacity: 1,
+            transform: 'translate(50%,-40%) scale(1)',
+          },
+        },
+      },
+    },
+    plugins: [tailwindAnimations, tailwindAspectRatio],
+  };
+};
+
+const tailwindConfig = getTailwindConfig();
+
+/** @type {string[]} */
+const intlayerTailwindContent = tailwindConfig.content;
+
+export { intlayerTailwindContent };
+export default tailwindConfig;

package/dist/Form-2XHQV7F_.cjs

@@ -1,295 +0,0 @@
-"use client";
-"use strict";
-const components_Button_Button = require("./components/Button/Button.cjs");
-const jsxRuntime = require("./jsx-runtime-DvCoRj5u.cjs");
-const reactHookForm = require("react-hook-form");
-const components_Input_Input = require("./components/Input/Input.cjs");
-const components_Input_InputPassword = require("./components/Input/InputPassword.cjs");
-const components_Input_Checkbox = require("./components/Input/Checkbox.cjs");
-const components_TextArea_TextArea = require("./components/TextArea/TextArea.cjs");
-const components_EditableField_EditableFieldInput = require("./components/EditableField/EditableFieldInput.cjs");
-const components_EditableField_EditableFieldTextArea = require("./components/EditableField/EditableFieldTextArea.cjs");
-const components_Select_Multiselect = require("./components/Select/Multiselect.cjs");
-const components_Form_FormField = require("./components/Form/FormField.cjs");
-const components_Form_layout_FormLabelLayout = require("./components/Form/layout/FormLabelLayout.cjs");
-const components_Select_Select = require("./components/Select/Select.cjs");
-const components_SwitchSelector_index = require("./components/SwitchSelector/index.cjs");
-const components_Form_FormBase = require("./components/Form/FormBase.cjs");
-const components_Form_FormControl = require("./components/Form/FormControl.cjs");
-const components_Form_FormDescription = require("./components/Form/FormDescription.cjs");
-const components_Form_FormItem = require("./components/Form/FormItem.cjs");
-const components_Form_FormMessage = require("./components/Form/FormMessage.cjs");
-require("clsx");
-require("tailwind-merge");
-require("./components/Form/FormLabel.cjs");
-const FormItemLayout = ({
-  label,
-  description,
-  isRequired,
-  info,
-  children,
-  showErrorMessage = true,
-  htmlFor
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Form.Item, { className: "w-full space-y-2", children: [
-  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "space-y-1 leading-none", children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Form_layout_FormLabelLayout.FormLabelLayout, { isRequired, info, htmlFor, children: label }),
-    description && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Form.Description, { children: description })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Form.Control, { children }),
-  showErrorMessage && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Form.Message, { "data-testid": "error-message" })
-] });
-const FormFieldElement = ({
-  field,
-  name,
-  label,
-  Element,
-  isRequired = false,
-  info,
-  description,
-  showErrorMessage = true,
-  ...props
-}) => {
-  const { error } = components_Form_FormField.useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    FormItemLayout,
-    {
-      htmlFor: name,
-      label,
-      description,
-      isRequired,
-      info,
-      showErrorMessage,
-      "aria-invalid": !!error,
-      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Element, { "data-testid": "element", id: name, ...field, ...props, children: props.children })
-    }
-  );
-};
-const FormElement = (props) => {
-  const { control } = reactHookForm.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    Form.Field,
-    {
-      control,
-      name: props.name,
-      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(FormFieldElement, { ...props, field })
-    }
-  );
-};
-const InputElement = (props) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  FormElement,
-  {
-    id: props.name,
-    "data-testid": props.name,
-    Element: components_Input_Input.Input,
-    ...props
-  }
-);
-const InputPasswordElement = ({
-  autoComplete,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  FormElement,
-  {
-    Element: components_Input_InputPassword.InputPassword,
-    id: props.name,
-    "data-testid": props.name,
-    autoComplete,
-    minLength: 6,
-    maxLength: 255,
-    ...props
-  }
-);
-const TextAreaElement = (props) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  FormElement,
-  {
-    Element: components_TextArea_TextArea.TextArea,
-    id: props.name,
-    "data-testid": props.name,
-    ...props
-  }
-);
-const EditableFieldInputElement = (props) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  FormElement,
-  {
-    id: props.name,
-    "data-testid": props.name,
-    Element: components_EditableField_EditableFieldInput.EditableFieldInput,
-    ...props
-  }
-);
-const EditableFieldTextAreaElement = (props) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  FormElement,
-  {
-    id: props.name,
-    "data-testid": props.name,
-    Element: components_EditableField_EditableFieldTextArea.EditableFieldTextArea,
-    ...props
-  }
-);
-const CheckboxElement = ({
-  autoComplete,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  FormElement,
-  {
-    Element: components_Input_Checkbox.Checkbox,
-    id: props.name,
-    "data-testid": props.name,
-    autoComplete,
-    minLength: 6,
-    maxLength: 255,
-    ...props
-  }
-);
-const MultiSelectElement = ({
-  name,
-  description,
-  label,
-  isRequired,
-  info,
-  showErrorMessage,
-  children,
-  ...props
-}) => {
-  const { control } = reactHookForm.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    Form.Field,
-    {
-      control,
-      name,
-      render: ({ field }) => {
-        const { error } = components_Form_FormField.useFormField();
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          FormItemLayout,
-          {
-            htmlFor: name,
-            label,
-            description,
-            isRequired,
-            info,
-            showErrorMessage,
-            "aria-invalid": !!error,
-            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              components_Select_Multiselect.MultiSelect,
-              {
-                onValueChange: field.onChange,
-                values: field.value,
-                ...props,
-                children
-              }
-            )
-          }
-        );
-      }
-    }
-  );
-};
-const SelectElement = ({
-  name,
-  description,
-  label,
-  isRequired,
-  info,
-  showErrorMessage,
-  children,
-  ...props
-}) => {
-  const { control } = reactHookForm.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    Form.Field,
-    {
-      control,
-      name,
-      render: ({ field }) => {
-        const { error } = components_Form_FormField.useFormField();
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          FormItemLayout,
-          {
-            htmlFor: name,
-            label,
-            description,
-            isRequired,
-            info,
-            showErrorMessage,
-            "aria-invalid": !!error,
-            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              components_Select_Select.Select,
-              {
-                onValueChange: field.onChange,
-                defaultValue: field.value,
-                ...props,
-                children
-              }
-            )
-          }
-        );
-      }
-    }
-  );
-};
-const SwitchSelectorElement = ({
-  name,
-  description,
-  label,
-  isRequired,
-  info,
-  showErrorMessage,
-  children,
-  ...props
-}) => {
-  const { control } = reactHookForm.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    Form.Field,
-    {
-      control,
-      name,
-      render: ({ field }) => {
-        const { error } = components_Form_FormField.useFormField();
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          FormItemLayout,
-          {
-            htmlFor: name,
-            label,
-            description,
-            isRequired,
-            info,
-            showErrorMessage,
-            "aria-invalid": !!error,
-            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_SwitchSelector_index.SwitchSelector, { ...field, ...props, children })
-          }
-        );
-      }
-    }
-  );
-};
-const Form = components_Form_FormBase.Form;
-Form.Description = components_Form_FormDescription.FormDescription;
-Form.Control = components_Form_FormControl.FormControl;
-Form.Field = components_Form_FormField.FormField;
-Form.Item = components_Form_FormItem.FormItem;
-Form.Label = components_Form_layout_FormLabelLayout.FormLabelLayout;
-Form.Message = components_Form_FormMessage.FormMessage;
-Form.Element = FormElement;
-Form.Input = InputElement;
-Form.InputPassword = InputPasswordElement;
-Form.Checkbox = CheckboxElement;
-Form.TextArea = TextAreaElement;
-Form.Button = components_Button_Button.Button;
-Form.Select = SelectElement;
-Form.MultiSelect = MultiSelectElement;
-Form.EditableFieldInput = EditableFieldInputElement;
-Form.EditableFieldTextArea = EditableFieldTextAreaElement;
-Form.SwitchSelector = SwitchSelectorElement;
-exports.CheckboxElement = CheckboxElement;
-exports.EditableFieldInputElement = EditableFieldInputElement;
-exports.EditableFieldTextAreaElement = EditableFieldTextAreaElement;
-exports.Form = Form;
-exports.FormElement = FormElement;
-exports.FormItemLayout = FormItemLayout;
-exports.InputElement = InputElement;
-exports.InputPasswordElement = InputPasswordElement;
-exports.MultiSelectElement = MultiSelectElement;
-exports.SelectElement = SelectElement;
-exports.SwitchSelectorElement = SwitchSelectorElement;
-exports.TextAreaElement = TextAreaElement;
-//# sourceMappingURL=Form-2XHQV7F_.cjs.map

package/dist/Form-2XHQV7F_.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form-2XHQV7F_.cjs","sources":["../src/components/Form/layout/FormItemLayout.tsx","../src/components/Form/elements/FormElement.tsx","../src/components/Form/elements/InputElement.tsx","../src/components/Form/elements/InputPasswordElement.tsx","../src/components/Form/elements/TextAreaElement.tsx","../src/components/Form/elements/EditableFieldInputElement.tsx","../src/components/Form/elements/EditableFieldTextAreaElement.tsx","../src/components/Form/elements/CheckboxElement.tsx","../src/components/Form/elements/MultiselectElement.tsx","../src/components/Form/elements/SelectElement.tsx","../src/components/Form/elements/SwitchSelectorElement.tsx","../src/components/Form/Form.tsx"],"sourcesContent":["/* eslint-disable import/no-cycle */\nimport type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n  label: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  showErrorMessage?: boolean;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n  label,\n  description,\n  isRequired,\n  info,\n  children,\n  showErrorMessage = true,\n  htmlFor,\n}) => (\n  <Form.Item className=\"w-full space-y-2\">\n    <div className=\"space-y-1 leading-none\">\n      <FormLabelLayout isRequired={isRequired} info={info} htmlFor={htmlFor}>\n        {label}\n      </FormLabelLayout>\n      {description && <Form.Description>{description}</Form.Description>}\n    </div>\n    <Form.Control>{children}</Form.Control>\n\n    {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n  </Form.Item>\n);\n","/* eslint-disable import/no-cycle */\n'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n  useFormContext,\n  type ControllerRenderProps,\n  type FieldValues,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n  name: string;\n  Element: T;\n  label?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  showErrorMessage?: boolean;\n  focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n  ComponentProps<T> & {\n    field: ControllerRenderProps<FieldValues, string>;\n  };\n\nconst FormFieldElement = <T extends ElementType>({\n  field,\n  name,\n  label,\n  Element,\n  isRequired = false,\n  info,\n  description,\n  showErrorMessage = true,\n  ...props\n}: FormFieldElementProps<T>) => {\n  const { error } = useFormField();\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <Element data-testid=\"element\" id={name} {...field} {...props}>\n        {props.children}\n      </Element>\n    </FormItemLayout>\n  );\n};\n\n/**\n * FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n *\n * The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n  props: FormElementProps<T> & ComponentProps<T>\n) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={props.name}\n      render={({ field }) => <FormFieldElement {...props} field={field} />}\n    />\n  );\n};\n","/* eslint-disable import/no-cycle */\nimport type { ComponentProps, FC } from 'react';\nimport { Input } from '../../../components/Input';\nimport { FormElementProps, FormElement } from './FormElement';\n\ntype InputElementProps = Omit<FormElementProps<typeof Input>, 'Element'> &\n  ComponentProps<typeof Input> & {\n    name: string;\n  };\n\nexport const InputElement: FC<InputElementProps> = (props) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={Input}\n    {...props}\n  />\n);\n","/* eslint-disable import/no-cycle */\nimport type { ComponentProps, FC } from 'react';\nimport { InputPassword } from '../../Input';\nimport { FormElementProps, FormElement } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n  FormElementProps<typeof InputPassword>,\n  'Element'\n> &\n  ComponentProps<typeof InputPassword> & {\n    name: string;\n    autoComplete: 'current-password' | 'new-password';\n  };\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={InputPassword}\n    id={props.name}\n    data-testid={props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n","/* eslint-disable import/no-cycle */\nimport type { FC } from 'react';\nimport { TextArea } from '../../TextArea/TextArea';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype TextAreaElementsProps = Omit<\n  FormElementProps<typeof TextArea>,\n  'Element'\n> &\n  React.ComponentProps<typeof TextArea> & {\n    name: string;\n  };\n\nexport const TextAreaElement: FC<TextAreaElementsProps> = (props) => (\n  <FormElement\n    Element={TextArea}\n    id={props.name}\n    data-testid={props.name}\n    {...props}\n  />\n);\n","/* eslint-disable import/no-cycle */\nimport type { ComponentProps, ReactNode } from 'react';\nimport { EditableFieldInput } from '../../EditableField/EditableFieldInput';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n  FormElementProps<typeof EditableFieldInput>,\n  'Element'\n> &\n  Omit<ComponentProps<typeof EditableFieldInput>, 'onChange'> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const EditableFieldInputElement = (\n  props: EditableFieldInputElementProps\n) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={EditableFieldInput}\n    {...props}\n  />\n);\n","/* eslint-disable import/no-cycle */\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { EditableFieldTextArea } from '../../EditableField/EditableFieldTextArea';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n  FormElementProps<typeof EditableFieldTextArea>,\n  'Element'\n> &\n  Omit<ComponentProps<typeof EditableFieldTextArea>, 'onChange'> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const EditableFieldTextAreaElement = (\n  props: EditableFieldTextAreaElementProps\n) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={EditableFieldTextArea}\n    {...props}\n  />\n);\n","/* eslint-disable import/no-cycle */\nimport type { ComponentProps, FC } from 'react';\nimport { Checkbox } from '../../Input';\nimport { FormElementProps, FormElement } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n  ComponentProps<typeof Checkbox> & {\n    name: string;\n    inputLabel?: string;\n  };\n\ntype CheckboxComponentProps = Omit<ComponentProps<typeof Checkbox>, 'label'> & {\n  name: string;\n  inputLabel?: string;\n};\n\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n  inputLabel,\n  ...props\n}) => <Checkbox {...props} label={inputLabel} />;\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={Checkbox}\n    id={props.name}\n    data-testid={props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n","/* eslint-disable import/no-cycle */\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { MultiSelect } from '../../Select/Multiselect';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n  FormElementProps<typeof MultiSelect>,\n  'Element'\n> &\n  ComponentProps<typeof MultiSelect> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const MultiSelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => {\n        // eslint-disable-next-line react-hooks/rules-of-hooks, sonarjs/rules-of-hooks\n        const { error } = useFormField();\n\n        return (\n          <FormItemLayout\n            htmlFor={name}\n            label={label}\n            description={description}\n            isRequired={isRequired}\n            info={info}\n            showErrorMessage={showErrorMessage}\n            aria-invalid={!!error}\n          >\n            <MultiSelect\n              onValueChange={field.onChange}\n              values={field.value}\n              {...props}\n            >\n              {children}\n            </MultiSelect>\n          </FormItemLayout>\n        );\n      }}\n    />\n  );\n};\n","/* eslint-disable import/no-cycle */\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Select } from '../../Select/Select';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n  ComponentProps<typeof Select> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const SelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => {\n        // eslint-disable-next-line react-hooks/rules-of-hooks, sonarjs/rules-of-hooks\n        const { error } = useFormField();\n\n        return (\n          <FormItemLayout\n            htmlFor={name}\n            label={label}\n            description={description}\n            isRequired={isRequired}\n            info={info}\n            showErrorMessage={showErrorMessage}\n            aria-invalid={!!error}\n          >\n            <Select\n              onValueChange={field.onChange}\n              defaultValue={field.value}\n              {...props}\n            >\n              {children}\n            </Select>\n          </FormItemLayout>\n        );\n      }}\n    />\n  );\n};\n","/* eslint-disable import/no-cycle */\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { SwitchSelector } from '../../SwitchSelector';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SwitchSelectorElementProps = Omit<\n  FormElementProps<typeof SwitchSelector>,\n  'Element'\n> &\n  ComponentProps<typeof SwitchSelector> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const SwitchSelectorElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SwitchSelectorElementProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => {\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const { error } = useFormField();\n\n        return (\n          <FormItemLayout\n            htmlFor={name}\n            label={label}\n            description={description}\n            isRequired={isRequired}\n            info={info}\n            showErrorMessage={showErrorMessage}\n            aria-invalid={!!error}\n          >\n            <SwitchSelector {...field} {...props}>\n              {children}\n            </SwitchSelector>\n          </FormItemLayout>\n        );\n      }}\n    />\n  );\n};\n","/* eslint-disable import/no-cycle */\nimport { Button } from '../Button';\nimport {\n  FormElement,\n  InputElement,\n  InputPasswordElement,\n  TextAreaElement,\n} from './elements';\nimport { CheckboxElement } from './elements/CheckboxElement';\nimport { EditableFieldInputElement } from './elements/EditableFieldInputElement';\nimport { EditableFieldTextAreaElement } from './elements/EditableFieldTextAreaElement';\nimport { MultiSelectElement } from './elements/MultiselectElement';\nimport { SelectElement } from './elements/SelectElement';\nimport { SwitchSelectorElement } from './elements/SwitchSelectorElement';\nimport { Form as FormRoot } from './FormBase';\nimport { FormControl } from './FormControl';\nimport { FormDescription } from './FormDescription';\nimport { FormField } from './FormField';\nimport { FormItem } from './FormItem';\nimport { FormMessage } from './FormMessage';\nimport { FormLabelLayout } from './layout';\n\ntype FormType = typeof FormRoot & {\n  Description: typeof FormDescription;\n  Control: typeof FormControl;\n  Field: typeof FormField;\n  Item: typeof FormItem;\n  Label: typeof FormLabelLayout;\n  Message: typeof FormMessage;\n  Element: typeof FormElement;\n  Button: typeof Button;\n  Input: typeof InputElement;\n  InputPassword: typeof InputPasswordElement;\n  Checkbox: typeof CheckboxElement;\n  TextArea: typeof TextAreaElement;\n  MultiSelect: typeof MultiSelectElement;\n  Select: typeof SelectElement;\n  EditableFieldInput: typeof EditableFieldInputElement;\n  EditableFieldTextArea: typeof EditableFieldTextAreaElement;\n  SwitchSelector: typeof SwitchSelectorElement;\n};\n\n/**\n * Form components\n *\n * Example of usage:\n * ```jsx\n * <Form\n *  schema={ZodSchema}\n *  onSubmitSuccess={onSubmitSuccess}\n *  onSubmitError={onSubmitError}\n *  autoComplete\n * >\n *   <Form.Input name=\"name\" label=\"Name\" />\n *   <Form.Button type=\"submit\" label=\"Click to submit\">\n *      Submit\n *   </Form.Button>\n * </Form>\n * ```\n */\nexport const Form = FormRoot as FormType;\nForm.Description = FormDescription;\nForm.Control = FormControl;\nForm.Field = FormField;\nForm.Item = FormItem;\nForm.Label = FormLabelLayout;\nForm.Message = FormMessage;\nForm.Element = FormElement;\nForm.Input = InputElement;\nForm.InputPassword = InputPasswordElement;\nForm.Checkbox = CheckboxElement;\nForm.TextArea = TextAreaElement;\nForm.Button = Button;\nForm.Select = SelectElement;\nForm.MultiSelect = MultiSelectElement;\nForm.EditableFieldInput = EditableFieldInputElement;\nForm.EditableFieldTextArea = EditableFieldTextAreaElement;\nForm.SwitchSelector = SwitchSelectorElement;\n"],"names":["jsxs","jsx","FormLabelLayout","useFormField","useFormContext","Input","InputPassword","TextArea","EditableFieldInput","EditableFieldTextArea","Checkbox","MultiSelect","Select","SwitchSelector","FormRoot","FormDescription","FormControl","FormField","FormItem","FormMessage","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AACF,MACGA,2BAAAA,kBAAAA,KAAA,KAAK,MAAL,EAAU,WAAU,oBACnB,UAAA;AAAA,EAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,IAAAC,2BAAA,kBAAA,IAACC,uCAAgB,iBAAA,EAAA,YAAwB,MAAY,SAClD,UACH,OAAA;AAAA,IACC,eAAeD,2BAAA,kBAAA,IAAC,KAAK,aAAL,EAAkB,UAAY,aAAA;AAAA,EAAA,GACjD;AAAA,EACCA,2BAAAA,kBAAAA,IAAA,KAAK,SAAL,EAAc,SAAS,CAAA;AAAA,EAEvB,oBAAqBA,2BAAA,kBAAA,IAAA,KAAK,SAAL,EAAa,eAAY,iBAAgB;AAAA,EACjE,CAAA;ACHF,MAAM,mBAAmB,CAAwB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,MAAgC;AACxB,QAAA,EAAE,UAAUE,0BAAAA;AAGhB,SAAAF,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc,CAAC,CAAC;AAAA,MAEhB,UAAAA,2BAAAA,kBAAAA,IAAC,SAAQ,EAAA,eAAY,WAAU,IAAI,MAAO,GAAG,OAAQ,GAAG,OACrD,UAAA,MAAM,SACT,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AASa,MAAA,cAAc,CACzB,UACG;AACG,QAAA,EAAE,YAAYG,cAAAA;AAGlB,SAAAH,2BAAA,kBAAA;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,QAAQ,CAAC,EAAE,YAAaA,2BAAAA,kBAAAA,IAAA,kBAAA,EAAkB,GAAG,OAAO,OAAc;AAAA,IAAA;AAAA,EAAA;AAGxE;ACnEa,MAAA,eAAsC,CAAC,UAClDA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAI,MAAM;AAAA,IACV,eAAa,MAAM;AAAA,IACnB,SAASI,uBAAA;AAAA,IACR,GAAG;AAAA,EAAA;AACN;ACFK,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA,GAAG;AACL,MACEJ,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAASK,+BAAA;AAAA,IACT,IAAI,MAAM;AAAA,IACV,eAAa,MAAM;AAAA,IACnB;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACV,GAAG;AAAA,EAAA;AACN;ACbW,MAAA,kBAA6C,CAAC,UACzDL,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAASM,6BAAA;AAAA,IACT,IAAI,MAAM;AAAA,IACV,eAAa,MAAM;AAAA,IAClB,GAAG;AAAA,EAAA;AACN;ACFW,MAAA,4BAA4B,CACvC,UAEAN,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAI,MAAM;AAAA,IACV,eAAa,MAAM;AAAA,IACnB,SAASO,4CAAA;AAAA,IACR,GAAG;AAAA,EAAA;AACN;ACPW,MAAA,+BAA+B,CAC1C,UAEAP,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAI,MAAM;AAAA,IACV,eAAa,MAAM;AAAA,IACnB,SAASQ,+CAAA;AAAA,IACR,GAAG;AAAA,EAAA;AACN;ACLK,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACER,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAASS,0BAAA;AAAA,IACT,IAAI,MAAM;AAAA,IACV,eAAa,MAAM;AAAA,IACnB;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACV,GAAG;AAAA,EAAA;AACN;ACZK,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACnB,QAAA,EAAE,YAAYN,cAAAA;AAGlB,SAAAH,2BAAA,kBAAA;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,YAAY;AAEf,cAAA,EAAE,UAAUE,0BAAAA;AAGhB,eAAAF,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAc,CAAC,CAAC;AAAA,YAEhB,UAAAA,2BAAA,kBAAA;AAAA,cAACU,8BAAA;AAAA,cAAA;AAAA,gBACC,eAAe,MAAM;AAAA,gBACrB,QAAQ,MAAM;AAAA,gBACb,GAAG;AAAA,gBAEH;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN;AAAA,IAAA;AAAA,EAAA;AAGN;AC7CO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACnB,QAAA,EAAE,YAAYP,cAAAA;AAGlB,SAAAH,2BAAA,kBAAA;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,YAAY;AAEf,cAAA,EAAE,UAAUE,0BAAAA;AAGhB,eAAAF,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAc,CAAC,CAAC;AAAA,YAEhB,UAAAA,2BAAA,kBAAA;AAAA,cAACW,yBAAA;AAAA,cAAA;AAAA,gBACC,eAAe,MAAM;AAAA,gBACrB,cAAc,MAAM;AAAA,gBACnB,GAAG;AAAA,gBAEH;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN;AAAA,IAAA;AAAA,EAAA;AAGN;ACvCO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkC;AAC1B,QAAA,EAAE,YAAYR,cAAAA;AAGlB,SAAAH,2BAAA,kBAAA;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,YAAY;AAEf,cAAA,EAAE,UAAUE,0BAAAA;AAGhB,eAAAF,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAc,CAAC,CAAC;AAAA,YAEhB,2DAACY,gDAAgB,EAAA,GAAG,OAAQ,GAAG,OAC5B,UACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN;AAAA,IAAA;AAAA,EAAA;AAGN;ACCO,MAAM,OAAOC,yBAAA;AACpB,KAAK,cAAcC,gCAAAA;AACnB,KAAK,UAAUC,4BAAAA;AACf,KAAK,QAAQC,0BAAAA;AACb,KAAK,OAAOC,yBAAAA;AACZ,KAAK,QAAQhB,uCAAAA;AACb,KAAK,UAAUiB,4BAAAA;AACf,KAAK,UAAU;AACf,KAAK,QAAQ;AACb,KAAK,gBAAgB;AACrB,KAAK,WAAW;AAChB,KAAK,WAAW;AAChB,KAAK,SAASC,yBAAAA;AACd,KAAK,SAAS;AACd,KAAK,cAAc;AACnB,KAAK,qBAAqB;AAC1B,KAAK,wBAAwB;AAC7B,KAAK,iBAAiB;;;;;;;;;;;;;"}