acinguiux-ds-react-framework 0.0.1

package/build/esm/components/FormField/FormField.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryFn } from '@storybook/react';
+import { FormFieldSize, IFormFieldProps } from './FormField.types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
+export default _default;
+export declare const WithInput: StoryFn<IFormFieldProps>;
+export declare const WithLabelIconOnRight: StoryFn<IFormFieldProps>;
+export declare const WithInputExamples: StoryFn<IFormFieldProps>;
+export declare const WithHelpers: StoryFn<IFormFieldProps>;
+export declare const WithMandatoryInput: StoryFn<IFormFieldProps>;
+export declare const Invalid: StoryFn<IFormFieldProps>;
+export declare const WithRadioButton: StoryFn<IFormFieldProps>;
+export declare const FullExample: StoryFn<{
+    size: FormFieldSize;
+}>;
+//# sourceMappingURL=FormField.stories.d.ts.map

package/build/esm/components/FormField/FormField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAajD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;AAMnE,wBAmCU;AAEV,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,eAAe,CAyB9C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,eAAe,CAgBzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,eAAe,CAgCtD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,eAAe,CAsBhD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,eAAe,CAQvD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,eAAe,CAmD5C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,eAAe,CAyCpD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAmExD,CAAC"}

package/build/esm/components/FormField/FormField.stories.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Positions, Sizes, Alignments, FORM_FIELD_CLASS } from 'acinguiux-ds-react-base';
+import Checkbox from '../Checkbox/Checkbox';
+import SingleDatePicker from '../DatePicker/components/SingleDatePicker/SingleDatePicker';
+import { InfoCircle, PeopleCircle, Lock } from '../Icon/components';
+import RadioButton from '../RadioButton/RadioButton';
+import Option from '../Select/components/Option/Option';
+import Select from '../Select/Select';
+import Slider from '../Slider/Slider';
+import TextInput from '../TextInput/TextInput';
+import Toggle from '../Toggle/Toggle';
+import FormField from './FormField';
+import { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';
+import { Sentiments } from '../../types/types';
+const icons = { People: _jsx(PeopleCircle, {}), Lock: _jsx(Lock, {}), Info: _jsx(InfoCircle, {}) };
+export default {
+    title: 'Data Input/Form Field',
+    component: FormField,
+    parameters: {
+        storyLink: `${GITHUB_COMPONENT_BASE_URL}/FormField/FormField.stories.tsx`,
+    },
+    argTypes: {
+        bottomLeftHelper: {
+            description: 'Insert FormFieldMessage object, like: { content: "Invalid input", sentiment: "negative" }',
+            control: { type: 'object' },
+        },
+        bottomRightHelper: {
+            description: 'Insert FormFieldMessage object, like: { content: "max 100 characters", sentiment: "neutral" }',
+            control: { type: 'object' },
+        },
+        className: { control: { type: 'text' } },
+        icon: {
+            options: Object.keys(icons),
+            control: {
+                type: 'select',
+                labels: { QuestionMarkCircle: 'Question mark', Barrel: 'Barrel' },
+            },
+            mapping: icons,
+        },
+        iconPosition: {
+            options: [Positions.Right, Positions.Left],
+            control: 'radio',
+            if: { arg: 'icon', exists: true },
+        },
+        mandatory: { control: { type: 'boolean' } },
+        size: {
+            options: [Sizes.Small, Sizes.Medium, Sizes.Large],
+            control: 'radio',
+        },
+    },
+};
+export const WithInput = ({ size = Sizes.Medium, id = 'username', ...args }) => (_jsx(FormField, { size: size, id: id, label: "Username", description: "Should be between 5 and 15 characters", mandatory: true, icon: _jsx(PeopleCircle, {}), topHelper: _jsx(InfoCircle, {}), bottomLeftHelper: {
+        content: 'Invalid input',
+        sentiment: Sentiments.Negative,
+    }, bottomRightHelper: {
+        content: '0/100',
+        sentiment: Sentiments.Secondary,
+    }, ...args, children: _jsx(TextInput, { size: size, id: id }) }));
+export const WithLabelIconOnRight = ({ size = Sizes.Medium, id = 'username', ...args }) => (_jsx(FormField, { size: size, id: id, label: "Username", mandatory: true, icon: _jsx(PeopleCircle, {}), iconPosition: Positions.Right, ...args, children: _jsx(TextInput, { size: size, id: id }) }));
+export const WithInputExamples = ({ size }) => (_jsxs(_Fragment, { children: [_jsx(FormField, { size: size, id: "username", label: "Username", description: "Should be between 5 and 15 characters", icon: _jsx(PeopleCircle, {}), children: _jsx(TextInput, { size: size, id: "username" }) }), _jsx(FormField, { size: size, label: "Name", children: _jsx(TextInput, { size: size, placeholder: "Enter your full name" }) }), _jsx(FormField, { size: size, label: "Email address", bottomLeftHelper: { content: 'You have entered an invalid email.', sentiment: Sentiments.Negative }, children: _jsx(TextInput, { size: size, invalid: true, "aria-describedby": `${FORM_FIELD_CLASS}-bottom-left-message` }) }), _jsx(FormField, { size: size, label: "Status", topHelper: "0/128", children: _jsx(TextInput, { size: size }) }), _jsx(FormField, { size: size, label: "Password", bottomLeftHelper: { content: 'Your password must contain a special character, a number and a capital letter' }, children: _jsx(TextInput, { size: size, type: "password" }) })] }));
+export const WithHelpers = ({ size = Sizes.Medium, id = 'username', ...args }) => (_jsx(FormField, { size: size, id: id, label: "Username", bottomLeftHelper: {
+        content: 'Invalid input',
+        sentiment: Sentiments.Negative,
+    }, bottomRightHelper: {
+        content: '0/100',
+        sentiment: Sentiments.Secondary,
+    }, topHelper: _jsx(InfoCircle, {}), ...args, children: _jsx(TextInput, { size: size, id: id, "aria-describedby": `${FORM_FIELD_CLASS}-bottom-left-message` }) }));
+export const WithMandatoryInput = ({ size = Sizes.Medium, id = 'password', ...args }) => (_jsx(FormField, { size: size, id: id, label: "Password", mandatory: true, icon: _jsx(Lock, {}), ...args, children: _jsx(TextInput, { size: size, id: id, type: "password" }) }));
+export const Invalid = ({ size = Sizes.Medium, id = 'username', ...args }) => {
+    const [invalid, setInvalid] = useState(true);
+    const [value, setValue] = useState('');
+    const invalidMessage = 'Value is not between 5 and 15 characters!';
+    const validMessage = 'Correct!';
+    const handleOnChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        setInvalid(true);
+        if (newValue.length > 4 && newValue.length < 16) {
+            setInvalid(false);
+        }
+    }, []);
+    return (_jsx(FormField, { size: size, id: id, label: "Username", description: "Should be between 5 and 15 characters", mandatory: true, icon: _jsx(PeopleCircle, {}), topHelper: _jsx(InfoCircle, {}), bottomLeftHelper: {
+            content: invalid ? invalidMessage : validMessage,
+            sentiment: invalid ? Sentiments.Negative : Sentiments.Positive,
+        }, bottomRightHelper: {
+            content: '0/100',
+            sentiment: Sentiments.Secondary,
+        }, ...args, children: _jsx(TextInput, { size: size, id: id, value: value, onChange: handleOnChange, invalid: invalid, "aria-describedby": `${FORM_FIELD_CLASS}-bottom-left-message` }) }));
+};
+export const WithRadioButton = ({ size = Sizes.Medium, ...args }) => {
+    const [checked, setChecked] = useState('');
+    return (_jsxs(FormField, { size: size, label: "Choose your favorite sport", description: "Could be to see it or to play it", icon: _jsx(InfoCircle, {}), bottomLeftHelper: { content: 'Nice choice!' }, ...args, children: [_jsx(RadioButton, { size: size, name: "football", value: "football", label: "Football", checked: checked === 'football', onChange: () => setChecked('football') }), _jsx(RadioButton, { size: size, name: "basketball", value: "basketball", label: "Basketball", checked: checked === 'basketball', onChange: () => setChecked('basketball') }), _jsx(RadioButton, { size: size, name: "rugby", value: "rugby", label: "Rugby", checked: checked === 'rugby', onChange: () => setChecked('rugby') })] }));
+};
+export const FullExample = ({ size }) => {
+    const [checked, setChecked] = useState('');
+    const [gdprAccepted, setGdprAccepted] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsx(FormField, { id: "username", label: "Username", size: size, icon: _jsx(PeopleCircle, {}), iconPosition: Positions.Right, children: _jsx(TextInput, { size: size, value: inputValue, id: "username", onChange: ({ target }) => setInputValue(target.value) }) }), _jsx(FormField, { id: "acquisitionTime", label: "Acquisition time", size: size, children: _jsx(SingleDatePicker, {}) }), _jsxs(FormField, { label: "Car fuel type", size: size, children: [_jsx(RadioButton, { size: size, name: "gasoline", value: "gasoline", label: "Gasoline", checked: checked === 'gasoline', onChange: () => setChecked('gasoline') }), _jsx(RadioButton, { size: size, name: "diesel", value: "diesel", label: "Diesel", checked: checked === 'diesel', onChange: () => setChecked('diesel') }), _jsx(RadioButton, { size: size, name: "electric", value: "electric", label: "Electric", checked: checked === 'electric', onChange: () => setChecked('electric') })] }), _jsx(FormField, { id: "power", label: "Power", description: "In W", size: size, iconPosition: Positions.Right }), _jsx(FormField, { id: "power", label: "Power", description: "In W", size: size, children: _jsx(Slider, { labelAlignment: Alignments.Left, labelPosition: Positions.Side, size: size, defaultValue: 0 }) }), _jsx(FormField, { id: "type", label: "Car type", size: size, children: _jsxs(Select, { size: size, children: [_jsx(Option, { value: "suv", children: "SUV" }), _jsx(Option, { value: "sport", children: "Sport" })] }) }), _jsx(FormField, { id: "available", size: size, children: _jsx(Toggle, { label: "Current Available", labelPosition: Positions.Right, size: size }) }), _jsx(FormField, { id: "gdpr", size: size, children: _jsx(Checkbox, { label: "Do you accept the GDPR?", size: size, checked: gdprAccepted, onChange: () => setGdprAccepted(!gdprAccepted) }) })] }));
+};
+//# sourceMappingURL=FormField.stories.js.map

package/build/esm/components/FormField/FormField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.stories.js","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactElement, ChangeEventHandler, useState, useCallback } from 'react';\n\nimport { Meta, StoryFn } from '@storybook/react';\nimport { Positions, Sizes, Alignments, FORM_FIELD_CLASS } from 'acinguiux-ds-react-base';\n\nimport Checkbox from '../Checkbox/Checkbox';\nimport SingleDatePicker from '../DatePicker/components/SingleDatePicker/SingleDatePicker';\nimport { InfoCircle, PeopleCircle, Lock } from '../Icon/components';\nimport RadioButton from '../RadioButton/RadioButton';\nimport Option from '../Select/components/Option/Option';\nimport Select from '../Select/Select';\nimport Slider from '../Slider/Slider';\nimport TextInput from '../TextInput/TextInput';\nimport Toggle from '../Toggle/Toggle';\nimport FormField from './FormField';\nimport { FormFieldSize, IFormFieldProps } from './FormField.types';\nimport { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';\nimport { Sentiments } from '../../types/types';\n\nconst icons = { People: <PeopleCircle />, Lock: <Lock />, Info: <InfoCircle /> };\n\nexport default {\n  title: 'Data Input/Form Field',\n  component: FormField,\n  parameters: {\n    storyLink: `${GITHUB_COMPONENT_BASE_URL}/FormField/FormField.stories.tsx`,\n  },\n  argTypes: {\n    bottomLeftHelper: {\n      description: 'Insert FormFieldMessage object, like: { content: \"Invalid input\", sentiment: \"negative\" }',\n      control: { type: 'object' },\n    },\n    bottomRightHelper: {\n      description: 'Insert FormFieldMessage object, like: { content: \"max 100 characters\", sentiment: \"neutral\" }',\n      control: { type: 'object' },\n    },\n    className: { control: { type: 'text' } },\n    icon: {\n      options: Object.keys(icons),\n      control: {\n        type: 'select',\n        labels: { QuestionMarkCircle: 'Question mark', Barrel: 'Barrel' },\n      },\n      mapping: icons,\n    },\n    iconPosition: {\n      options: [Positions.Right, Positions.Left],\n      control: 'radio',\n      if: { arg: 'icon', exists: true },\n    },\n    mandatory: { control: { type: 'boolean' } },\n    size: {\n      options: [Sizes.Small, Sizes.Medium, Sizes.Large],\n      control: 'radio',\n    },\n  },\n} as Meta;\n\nexport const WithInput: StoryFn<IFormFieldProps> = ({\n  size = Sizes.Medium,\n  id = 'username',\n  ...args\n}: IFormFieldProps): ReactElement => (\n  <FormField\n    size={size}\n    id={id}\n    label=\"Username\"\n    description=\"Should be between 5 and 15 characters\"\n    mandatory\n    icon={<PeopleCircle />}\n    topHelper={<InfoCircle />}\n    bottomLeftHelper={{\n      content: 'Invalid input',\n      sentiment: Sentiments.Negative,\n    }}\n    bottomRightHelper={{\n      content: '0/100',\n      sentiment: Sentiments.Secondary,\n    }}\n    {...args}\n  >\n    <TextInput size={size} id={id} />\n  </FormField>\n);\n\nexport const WithLabelIconOnRight: StoryFn<IFormFieldProps> = ({\n  size = Sizes.Medium,\n  id = 'username',\n  ...args\n}: IFormFieldProps): ReactElement => (\n  <FormField\n    size={size}\n    id={id}\n    label=\"Username\"\n    mandatory\n    icon={<PeopleCircle />}\n    iconPosition={Positions.Right}\n    {...args}\n  >\n    <TextInput size={size} id={id} />\n  </FormField>\n);\n\nexport const WithInputExamples: StoryFn<IFormFieldProps> = ({ size }: IFormFieldProps): ReactElement => (\n  <>\n    <FormField\n      size={size}\n      id=\"username\"\n      label=\"Username\"\n      description=\"Should be between 5 and 15 characters\"\n      icon={<PeopleCircle />}\n    >\n      <TextInput size={size} id=\"username\" />\n    </FormField>\n    <FormField size={size} label=\"Name\">\n      <TextInput size={size} placeholder=\"Enter your full name\" />\n    </FormField>\n    <FormField\n      size={size}\n      label=\"Email address\"\n      bottomLeftHelper={{ content: 'You have entered an invalid email.', sentiment: Sentiments.Negative }}\n    >\n      <TextInput size={size} invalid aria-describedby={`${FORM_FIELD_CLASS}-bottom-left-message`} />\n    </FormField>\n    <FormField size={size} label=\"Status\" topHelper=\"0/128\">\n      <TextInput size={size} />\n    </FormField>\n    <FormField\n      size={size}\n      label=\"Password\"\n      bottomLeftHelper={{ content: 'Your password must contain a special character, a number and a capital letter' }}\n    >\n      <TextInput size={size} type=\"password\" />\n    </FormField>\n  </>\n);\n\nexport const WithHelpers: StoryFn<IFormFieldProps> = ({\n  size = Sizes.Medium,\n  id = 'username',\n  ...args\n}: IFormFieldProps): ReactElement => (\n  <FormField\n    size={size}\n    id={id}\n    label=\"Username\"\n    bottomLeftHelper={{\n      content: 'Invalid input',\n      sentiment: Sentiments.Negative,\n    }}\n    bottomRightHelper={{\n      content: '0/100',\n      sentiment: Sentiments.Secondary,\n    }}\n    topHelper={<InfoCircle />}\n    {...args}\n  >\n    <TextInput size={size} id={id} aria-describedby={`${FORM_FIELD_CLASS}-bottom-left-message`} />\n  </FormField>\n);\n\nexport const WithMandatoryInput: StoryFn<IFormFieldProps> = ({\n  size = Sizes.Medium,\n  id = 'password',\n  ...args\n}: IFormFieldProps): ReactElement => (\n  <FormField size={size} id={id} label=\"Password\" mandatory icon={<Lock />} {...args}>\n    <TextInput size={size} id={id} type=\"password\" />\n  </FormField>\n);\n\nexport const Invalid: StoryFn<IFormFieldProps> = ({\n  size = Sizes.Medium,\n  id = 'username',\n  ...args\n}: IFormFieldProps): ReactElement => {\n  const [invalid, setInvalid] = useState(true);\n  const [value, setValue] = useState('');\n\n  const invalidMessage = 'Value is not between 5 and 15 characters!';\n  const validMessage = 'Correct!';\n\n  const handleOnChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n    const newValue = e.target.value;\n\n    setValue(newValue);\n    setInvalid(true);\n\n    if (newValue.length > 4 && newValue.length < 16) {\n      setInvalid(false);\n    }\n  }, []);\n\n  return (\n    <FormField\n      size={size}\n      id={id}\n      label=\"Username\"\n      description=\"Should be between 5 and 15 characters\"\n      mandatory\n      icon={<PeopleCircle />}\n      topHelper={<InfoCircle />}\n      bottomLeftHelper={{\n        content: invalid ? invalidMessage : validMessage,\n        sentiment: invalid ? Sentiments.Negative : Sentiments.Positive,\n      }}\n      bottomRightHelper={{\n        content: '0/100',\n        sentiment: Sentiments.Secondary,\n      }}\n      {...args}\n    >\n      <TextInput\n        size={size}\n        id={id}\n        value={value}\n        onChange={handleOnChange}\n        invalid={invalid}\n        aria-describedby={`${FORM_FIELD_CLASS}-bottom-left-message`}\n      />\n    </FormField>\n  );\n};\n\nexport const WithRadioButton: StoryFn<IFormFieldProps> = ({\n  size = Sizes.Medium,\n  ...args\n}: IFormFieldProps): ReactElement => {\n  const [checked, setChecked] = useState('');\n\n  return (\n    <FormField\n      size={size}\n      label=\"Choose your favorite sport\"\n      description=\"Could be to see it or to play it\"\n      icon={<InfoCircle />}\n      bottomLeftHelper={{ content: 'Nice choice!' }}\n      {...args}\n    >\n      <RadioButton\n        size={size}\n        name=\"football\"\n        value=\"football\"\n        label=\"Football\"\n        checked={checked === 'football'}\n        onChange={() => setChecked('football')}\n      />\n      <RadioButton\n        size={size}\n        name=\"basketball\"\n        value=\"basketball\"\n        label=\"Basketball\"\n        checked={checked === 'basketball'}\n        onChange={() => setChecked('basketball')}\n      />\n      <RadioButton\n        size={size}\n        name=\"rugby\"\n        value=\"rugby\"\n        label=\"Rugby\"\n        checked={checked === 'rugby'}\n        onChange={() => setChecked('rugby')}\n      />\n    </FormField>\n  );\n};\n\nexport const FullExample: StoryFn<{ size: FormFieldSize }> = ({ size }): ReactElement => {\n  const [checked, setChecked] = useState('');\n  const [gdprAccepted, setGdprAccepted] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n\n  return (\n    <>\n      <FormField id=\"username\" label=\"Username\" size={size} icon={<PeopleCircle />} iconPosition={Positions.Right}>\n        <TextInput\n          size={size}\n          value={inputValue}\n          id=\"username\"\n          onChange={({ target }) => setInputValue(target.value)}\n        />\n      </FormField>\n      <FormField id=\"acquisitionTime\" label=\"Acquisition time\" size={size}>\n        <SingleDatePicker />\n      </FormField>\n      <FormField label=\"Car fuel type\" size={size}>\n        <RadioButton\n          size={size}\n          name=\"gasoline\"\n          value=\"gasoline\"\n          label=\"Gasoline\"\n          checked={checked === 'gasoline'}\n          onChange={() => setChecked('gasoline')}\n        />\n        <RadioButton\n          size={size}\n          name=\"diesel\"\n          value=\"diesel\"\n          label=\"Diesel\"\n          checked={checked === 'diesel'}\n          onChange={() => setChecked('diesel')}\n        />\n        <RadioButton\n          size={size}\n          name=\"electric\"\n          value=\"electric\"\n          label=\"Electric\"\n          checked={checked === 'electric'}\n          onChange={() => setChecked('electric')}\n        />\n      </FormField>\n      <FormField id=\"power\" label=\"Power\" description=\"In W\" size={size} iconPosition={Positions.Right} />\n      <FormField id=\"power\" label=\"Power\" description=\"In W\" size={size}>\n        <Slider labelAlignment={Alignments.Left} labelPosition={Positions.Side} size={size} defaultValue={0} />\n      </FormField>\n      <FormField id=\"type\" label=\"Car type\" size={size}>\n        <Select size={size}>\n          <Option value=\"suv\">SUV</Option>\n          <Option value=\"sport\">Sport</Option>\n        </Select>\n      </FormField>\n      <FormField id=\"available\" size={size}>\n        <Toggle label=\"Current Available\" labelPosition={Positions.Right} size={size} />\n      </FormField>\n      <FormField id=\"gdpr\" size={size}>\n        <Checkbox\n          label=\"Do you accept the GDPR?\"\n          size={size}\n          checked={gdprAccepted}\n          onChange={() => setGdprAccepted(!gdprAccepted)}\n        />\n      </FormField>\n    </>\n  );\n};\n"]}

package/build/esm/components/FormField/FormField.styles.d.ts

@@ -0,0 +1,9 @@
+import { FormFieldSize, FormFieldSentiment } from './FormField.types';
+type MessageStyledProps = {
+    size: FormFieldSize;
+    sentiment?: FormFieldSentiment;
+};
+declare const FormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Message: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MessageStyledProps, never>;
+export { FormField, Message };
+//# sourceMappingURL=FormField.styles.d.ts.map

package/build/esm/components/FormField/FormField.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEtE,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC,CAAC;AAeF,QAAA,MAAM,SAAS,yGASd,CAAC;AAEF,QAAA,MAAM,OAAO,yHAUZ,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC"}

package/build/esm/components/FormField/FormField.styles.js

@@ -0,0 +1,39 @@
+import styled, { css } from 'styled-components';
+import { Sizes } from 'acinguiux-ds-react-base';
+import { Sentiments } from 'acinguiux-ds-fabrics';
+import { formFieldConsts } from './FormField.consts';
+const getColor = (theme, sentiment) => {
+    switch (sentiment) {
+        case Sentiments.Secondary:
+            return theme.text.onSurface.subtle;
+        case Sentiments.Negative:
+            return theme.text.onSystem.subtle.negative;
+        case Sentiments.Positive:
+            return theme.text.onSystem.subtle.positive;
+        default:
+            return theme.text.onSurface.strong;
+    }
+};
+const FormField = styled.div `
+  width: 100%;
+  margin-bottom: 12px;
+
+  fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+`;
+const Message = styled.div `
+  ${({ sentiment, size, theme }) => css `
+    ${size === Sizes.Small && theme.label.small.normal};
+    ${size === Sizes.Medium && theme.label.medium.normal};
+    ${size === Sizes.Large && theme.label.large.normal};
+    color: ${getColor(theme, sentiment)};
+    margin-top: ${formFieldConsts[size].margin};
+  `};
+
+  display: flex;
+`;
+export { FormField, Message };
+//# sourceMappingURL=FormField.styles.js.map

package/build/esm/components/FormField/FormField.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.styles.js","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAS,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQrD,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,SAA8B,EAAE,EAAE;IAChE,QAAQ,SAAS,EAAE;QACjB,KAAK,UAAU,CAAC,SAAS;YACvB,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QACrC,KAAK,UAAU,CAAC,QAAQ;YACtB,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC7C,KAAK,UAAU,CAAC,QAAQ;YACtB,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC7C;YACE,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;KACtC;AACH,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS3B,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAoB;IAC1C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACjC,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM;MAChD,IAAI,KAAK,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;MAClD,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM;aACzC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;kBACrB,eAAe,CAAC,IAAI,CAAC,CAAC,MAAM;GAC3C;;;CAGF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Theme, Sizes } from 'acinguiux-ds-react-base';\nimport { Sentiments } from 'acinguiux-ds-fabrics';\n\nimport { formFieldConsts } from './FormField.consts';\nimport { FormFieldSize, FormFieldSentiment } from './FormField.types';\n\ntype MessageStyledProps = {\n  size: FormFieldSize;\n  sentiment?: FormFieldSentiment;\n};\n\nconst getColor = (theme: Theme, sentiment?: FormFieldSentiment) => {\n  switch (sentiment) {\n    case Sentiments.Secondary:\n      return theme.text.onSurface.subtle;\n    case Sentiments.Negative:\n      return theme.text.onSystem.subtle.negative;\n    case Sentiments.Positive:\n      return theme.text.onSystem.subtle.positive;\n    default:\n      return theme.text.onSurface.strong;\n  }\n};\n\nconst FormField = styled.div`\n  width: 100%;\n  margin-bottom: 12px;\n\n  fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n  }\n`;\n\nconst Message = styled.div<MessageStyledProps>`\n  ${({ sentiment, size, theme }) => css`\n    ${size === Sizes.Small && theme.label.small.normal};\n    ${size === Sizes.Medium && theme.label.medium.normal};\n    ${size === Sizes.Large && theme.label.large.normal};\n    color: ${getColor(theme, sentiment)};\n    margin-top: ${formFieldConsts[size].margin};\n  `};\n\n  display: flex;\n`;\n\nexport { FormField, Message };\n"]}

package/build/esm/components/FormField/FormField.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FormField.test.d.ts.map

package/build/esm/components/FormField/FormField.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.test.d.ts","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/FormField/FormField.test.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { render, screen, userEvent, waitFor, describe, it, expect } from '../../utils/viTestUtils';
+import { Barrel } from '../Icon/components';
+import RadioButton from '../RadioButton/RadioButton';
+import TextInput from '../TextInput/TextInput';
+import FormField from './FormField';
+const LABEL = 'this is the label';
+const MESSAGE = 'this is the message';
+const DESCRIPTION = 'this is the description';
+const StateWrapper = ({ renderChildren }) => {
+    const [value, setValue] = useState('');
+    return renderChildren(value, setValue);
+};
+describe('FormField component', () => {
+    describe('Without RadioButton as children', () => {
+        it('should render properly without any props', () => {
+            render(_jsx(FormField, { children: "fake input" }));
+            expect(screen.getByText('fake input')).toBeInTheDocument();
+        });
+        it('should render the label', () => {
+            render(_jsx(FormField, { label: LABEL, children: "fake input" }));
+            expect(screen.getByText(LABEL)).toBeInTheDocument();
+        });
+        it('should render the message', () => {
+            render(_jsx(FormField, { bottomLeftHelper: { content: MESSAGE }, children: "fake input" }));
+            expect(screen.getByText(MESSAGE)).toBeInTheDocument();
+        });
+        it('should render the description', () => {
+            render(_jsx(FormField, { description: DESCRIPTION, children: "fake input" }));
+            expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+        });
+        it('should render the label, description and message', () => {
+            render(_jsx(FormField, { label: LABEL, bottomLeftHelper: { content: MESSAGE }, description: DESCRIPTION, children: "fake input" }));
+            expect(screen.getByText(MESSAGE)).toBeInTheDocument();
+            expect(screen.getByText(LABEL)).toBeInTheDocument();
+            expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+        });
+        it('should render the label, description and right aligned message', () => {
+            render(_jsx(FormField, { label: LABEL, bottomRightHelper: { content: MESSAGE }, description: DESCRIPTION, children: "fake input" }));
+            expect(screen.getByText(MESSAGE)).toBeInTheDocument();
+            expect(screen.getByText(LABEL)).toBeInTheDocument();
+            expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+        });
+        it('should render an icon', () => {
+            render(_jsx(FormField, { label: LABEL, bottomLeftHelper: { content: MESSAGE }, icon: _jsx(Barrel, { "data-testid": "icon" }), children: "fake input" }));
+            expect(screen.getByText(MESSAGE)).toBeInTheDocument();
+            expect(screen.getByText(LABEL)).toBeInTheDocument();
+            expect(screen.getByTestId('icon')).toBeInTheDocument();
+        });
+        it('should accept a className prop', () => {
+            const { container } = render(_jsx(FormField, { className: "custom-class-name" }));
+            expect(container.querySelector('.custom-class-name')).toBeInTheDocument();
+        });
+        it('should accept a className prop', () => {
+            const { container } = render(_jsx(FormField, { className: "custom-class-name" }));
+            expect(container.querySelector('.custom-class-name')).toBeInTheDocument();
+        });
+        it('should render text input and change its value without rerendering', () => {
+            render(_jsx(StateWrapper, { renderChildren: (val, setValue) => (_jsx(FormField, { className: "custom-class-name", children: _jsx(TextInput, { value: val, onChange: (e) => setValue(e.target.value), "data-testid": val, title: "input" }) })) }));
+            const input = screen.getByTitle('input');
+            userEvent.type(input, 'testing');
+            expect(screen.getByTestId('testing')).toBeInTheDocument();
+        });
+        it('should render the helper if it is a string', () => {
+            const HELPER = 'Help';
+            render(_jsx(FormField, { label: HELPER, children: "fake input" }));
+            expect(screen.getByText(HELPER)).toBeInTheDocument();
+        });
+    });
+    describe('When RadioButton is present', () => {
+        it('should render fieldset when RadioButton is present in children', async () => {
+            const { container } = render(_jsx(FormField, { className: "custom-class-name", children: _jsx(RadioButton, { label: "radio" }) }));
+            await waitFor(() => expect(container.querySelector('fieldset')).toBeInTheDocument());
+        });
+    });
+});
+//# sourceMappingURL=FormField.test.js.map

package/build/esm/components/FormField/FormField.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.test.js","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactElement, useState, Dispatch, SetStateAction } from 'react';\n\nimport { render, screen, userEvent, waitFor, describe, it, expect } from '../../utils/viTestUtils';\nimport { Barrel } from '../Icon/components';\nimport RadioButton from '../RadioButton/RadioButton';\nimport TextInput from '../TextInput/TextInput';\nimport FormField from './FormField';\n\nconst LABEL = 'this is the label';\nconst MESSAGE = 'this is the message';\nconst DESCRIPTION = 'this is the description';\n\ntype StateWrapperProps = {\n  renderChildren: (v: string, setV: Dispatch<SetStateAction<string>>) => ReactElement;\n};\nconst StateWrapper = ({ renderChildren }: StateWrapperProps): ReactElement => {\n  const [value, setValue] = useState('');\n\n  return renderChildren(value, setValue);\n};\n\ndescribe('FormField component', () => {\n  describe('Without RadioButton as children', () => {\n    it('should render properly without any props', () => {\n      render(<FormField>fake input</FormField>);\n      expect(screen.getByText('fake input')).toBeInTheDocument();\n    });\n\n    it('should render the label', () => {\n      render(<FormField label={LABEL}>fake input</FormField>);\n      expect(screen.getByText(LABEL)).toBeInTheDocument();\n    });\n\n    it('should render the message', () => {\n      render(<FormField bottomLeftHelper={{ content: MESSAGE }}>fake input</FormField>);\n      expect(screen.getByText(MESSAGE)).toBeInTheDocument();\n    });\n\n    it('should render the description', () => {\n      render(<FormField description={DESCRIPTION}>fake input</FormField>);\n      expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();\n    });\n\n    it('should render the label, description and message', () => {\n      render(\n        <FormField label={LABEL} bottomLeftHelper={{ content: MESSAGE }} description={DESCRIPTION}>\n          fake input\n        </FormField>,\n      );\n      expect(screen.getByText(MESSAGE)).toBeInTheDocument();\n      expect(screen.getByText(LABEL)).toBeInTheDocument();\n      expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();\n    });\n\n    it('should render the label, description and right aligned message', () => {\n      render(\n        <FormField label={LABEL} bottomRightHelper={{ content: MESSAGE }} description={DESCRIPTION}>\n          fake input\n        </FormField>,\n      );\n      expect(screen.getByText(MESSAGE)).toBeInTheDocument();\n      expect(screen.getByText(LABEL)).toBeInTheDocument();\n      expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();\n    });\n\n    it('should render an icon', () => {\n      render(\n        <FormField label={LABEL} bottomLeftHelper={{ content: MESSAGE }} icon={<Barrel data-testid=\"icon\" />}>\n          fake input\n        </FormField>,\n      );\n      expect(screen.getByText(MESSAGE)).toBeInTheDocument();\n      expect(screen.getByText(LABEL)).toBeInTheDocument();\n      expect(screen.getByTestId('icon')).toBeInTheDocument();\n    });\n\n    it('should accept a className prop', () => {\n      const { container } = render(<FormField className=\"custom-class-name\" />);\n      expect(container.querySelector('.custom-class-name')).toBeInTheDocument();\n    });\n\n    it('should accept a className prop', () => {\n      const { container } = render(<FormField className=\"custom-class-name\" />);\n      expect(container.querySelector('.custom-class-name')).toBeInTheDocument();\n    });\n\n    it('should render text input and change its value without rerendering', () => {\n      render(\n        <StateWrapper\n          renderChildren={(val, setValue) => (\n            <FormField className=\"custom-class-name\">\n              <TextInput value={val} onChange={(e) => setValue(e.target.value)} data-testid={val} title=\"input\" />\n            </FormField>\n          )}\n        />,\n      );\n      const input = screen.getByTitle('input');\n      userEvent.type(input, 'testing');\n      expect(screen.getByTestId('testing')).toBeInTheDocument();\n    });\n\n    it('should render the helper if it is a string', () => {\n      const HELPER = 'Help';\n      render(<FormField label={HELPER}>fake input</FormField>);\n      expect(screen.getByText(HELPER)).toBeInTheDocument();\n    });\n  });\n\n  describe('When RadioButton is present', () => {\n    it('should render fieldset when RadioButton is present in children', async () => {\n      const { container } = render(\n        <FormField className=\"custom-class-name\">\n          <RadioButton label=\"radio\" />\n        </FormField>,\n      );\n\n      await waitFor(() => expect(container.querySelector('fieldset')).toBeInTheDocument());\n    });\n  });\n});\n"]}

package/build/esm/components/FormField/FormField.types.d.ts

@@ -0,0 +1,54 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import * as Types from '../../types/types';
+import { Sentiments } from '../../types/types';
+/**
+ * @deprecated FormFieldPositions prop has been deprecated, please use FormLabelIconPosition
+ */
+export type FormFieldPositions = FormLabelIconPosition;
+/**
+ * @deprecated DeprecatedSize prop has been deprecated, please use FormFieldSize
+ */
+type DeprecatedSize = Types.SmallSize | Types.MediumSize | Types.LargeSize;
+export type FormFieldSize = Sizes.Small | Sizes.Medium | Sizes.Large | DeprecatedSize;
+/**
+ * @deprecated DeprecatedSentiment prop has been deprecated, please use FormFieldSentiment
+ */
+type DeprecatedSentiment = Types.DefaultSentiment | 'secondary' | Types.PositiveSentiment | Types.NegativeSentiment;
+export type FormFieldSentiment = Sentiments.Default | Sentiments.Positive | Sentiments.Negative | Sentiments.Secondary | DeprecatedSentiment;
+/**
+ * @deprecated FormFieldState prop has been deprecated, please use FormFieldSentiment
+ */
+export type FormFieldState = FormFieldSentiment;
+export type FormLabelIconPosition = Positions.Left | Positions.Right | Types.DeprecatedHorizontalPositions;
+export type FormFieldMessage = {
+    content: ReactNode;
+    sentiment?: FormFieldSentiment;
+    /**
+     * @deprecated state prop has been deprecated, please use sentiment
+     */
+    state?: FormFieldSentiment;
+};
+export interface IFormFieldProps extends ComponentPropsWithoutRef<'div'> {
+    label?: string;
+    description?: string;
+    size?: FormFieldSize;
+    topHelper?: ReactNode;
+    bottomLeftHelper?: FormFieldMessage;
+    bottomRightHelper?: FormFieldMessage;
+    icon?: ReactNode;
+    iconPosition?: FormLabelIconPosition;
+    mandatory?: boolean;
+}
+export interface ILabelProps {
+    size: FormFieldSize;
+    id?: string;
+    label?: string;
+    description?: string;
+    icon?: ReactNode;
+    iconPosition?: FormLabelIconPosition;
+    mandatory?: boolean;
+    helper?: ReactNode;
+}
+export {};
+//# sourceMappingURL=FormField.types.d.ts.map

package/build/esm/components/FormField/FormField.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD;;GAEG;AACH,KAAK,cAAc,GAAG,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC;AAC3E,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;AACtF;;GAEG;AACH,KAAK,mBAAmB,GAAG,KAAK,CAAC,gBAAgB,GAAG,WAAW,GAAG,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;AACpH,MAAM,MAAM,kBAAkB,GAC1B,UAAU,CAAC,OAAO,GAClB,UAAU,CAAC,QAAQ,GACnB,UAAU,CAAC,QAAQ,GACnB,UAAU,CAAC,SAAS,GACpB,mBAAmB,CAAC;AACxB;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAChD,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,6BAA6B,CAAC;AAC3G,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB"}

package/build/esm/components/FormField/FormField.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FormField.types.js.map

package/build/esm/components/FormField/FormField.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.types.js","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport * as Types from '../../types/types';\nimport { Sentiments } from '../../types/types';\n\n/**\n * @deprecated FormFieldPositions prop has been deprecated, please use FormLabelIconPosition\n */\nexport type FormFieldPositions = FormLabelIconPosition;\n\n/**\n * @deprecated DeprecatedSize prop has been deprecated, please use FormFieldSize\n */\ntype DeprecatedSize = Types.SmallSize | Types.MediumSize | Types.LargeSize;\nexport type FormFieldSize = Sizes.Small | Sizes.Medium | Sizes.Large | DeprecatedSize;\n/**\n * @deprecated DeprecatedSentiment prop has been deprecated, please use FormFieldSentiment\n */\ntype DeprecatedSentiment = Types.DefaultSentiment | 'secondary' | Types.PositiveSentiment | Types.NegativeSentiment;\nexport type FormFieldSentiment =\n  | Sentiments.Default\n  | Sentiments.Positive\n  | Sentiments.Negative\n  | Sentiments.Secondary\n  | DeprecatedSentiment;\n/**\n * @deprecated FormFieldState prop has been deprecated, please use FormFieldSentiment\n */\nexport type FormFieldState = FormFieldSentiment;\nexport type FormLabelIconPosition = Positions.Left | Positions.Right | Types.DeprecatedHorizontalPositions;\nexport type FormFieldMessage = {\n  content: ReactNode;\n  sentiment?: FormFieldSentiment;\n  /**\n   * @deprecated state prop has been deprecated, please use sentiment\n   */\n  state?: FormFieldSentiment;\n};\n\nexport interface IFormFieldProps extends ComponentPropsWithoutRef<'div'> {\n  label?: string;\n  description?: string;\n  size?: FormFieldSize;\n  topHelper?: ReactNode;\n  bottomLeftHelper?: FormFieldMessage;\n  bottomRightHelper?: FormFieldMessage;\n  icon?: ReactNode;\n  iconPosition?: FormLabelIconPosition;\n  mandatory?: boolean;\n}\n\nexport interface ILabelProps {\n  size: FormFieldSize;\n  id?: string;\n  label?: string;\n  description?: string;\n  icon?: ReactNode;\n  iconPosition?: FormLabelIconPosition;\n  mandatory?: boolean;\n  helper?: ReactNode;\n}\n"]}

package/build/esm/components/FormField/__tests__/FormField.avt.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FormField.avt.test.d.ts.map

package/build/esm/components/FormField/__tests__/FormField.avt.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.avt.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormField/__tests__/FormField.avt.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/FormField/__tests__/FormField.avt.test.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import FormField from '../FormField';
+import { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';
+const content = 'FormField content';
+describe('AVT', () => {
+    it('should not have Accessibility violations for DEFAULT <FormField />', async () => {
+        await runAxeAccessibilityValidationTest(_jsx(FormField, { children: content }));
+    });
+});
+//# sourceMappingURL=FormField.avt.test.js.map

package/build/esm/components/FormField/__tests__/FormField.avt.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.avt.test.js","sourceRoot":"","sources":["../../../../../src/components/FormField/__tests__/FormField.avt.test.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAE/E,MAAM,OAAO,GAAG,mBAAmB,CAAC;AAEpC,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACnB,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,iCAAiC,CAAC,KAAC,SAAS,cAAE,OAAO,GAAa,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import FormField from '../FormField';\nimport { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';\n\nconst content = 'FormField content';\n\ndescribe('AVT', () => {\n  it('should not have Accessibility violations for DEFAULT <FormField />', async () => {\n    await runAxeAccessibilityValidationTest(<FormField>{content}</FormField>);\n  });\n});\n"]}

package/build/esm/components/FormField/components/Label/Label.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { ILabelProps } from '../../FormField.types';
+declare const Label: ({ size, icon, iconPosition, id, label, description, mandatory, helper }: ILabelProps) => ReactElement;
+export default Label;
+//# sourceMappingURL=Label.d.ts.map

package/build/esm/components/FormField/components/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormField/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAUpD,QAAA,MAAM,KAAK,4EAA6E,WAAW,KAAG,YAWrG,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/esm/components/FormField/components/Label/Label.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Styled from './Label.styles';
+const LabelMessage = ({ label, size, mandatory }) => (_jsxs(Styled.LabelText, { children: [label && _jsx(Styled.Title, { size: size, children: label }), mandatory && _jsx(Styled.Mandatory, { size: size, children: "*" })] }));
+const Label = ({ size, icon, iconPosition, id, label, description, mandatory, helper }) => (_jsxs(Styled.Container, { children: [_jsxs(Styled.LeftContainer, { size: size, children: [_jsxs(Styled.TitleContainer, { iconPosition: iconPosition, size: size, htmlFor: id, children: [icon, _jsx(LabelMessage, { label: label, size: size, mandatory: mandatory })] }), description && _jsx(Styled.Description, { children: description })] }), helper] }));
+export default Label;
+//# sourceMappingURL=Label.js.map

package/build/esm/components/FormField/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../../src/components/FormField/components/Label/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAEzC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAqD,EAAE,EAAE,CAAC,CACtG,MAAC,MAAM,CAAC,SAAS,eACd,KAAK,IAAI,KAAC,MAAM,CAAC,KAAK,IAAC,IAAI,EAAE,IAAI,YAAG,KAAK,GAAgB,EACzD,SAAS,IAAI,KAAC,MAAM,CAAC,SAAS,IAAC,IAAI,EAAE,IAAI,kBAAsB,IAC/C,CACpB,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAe,EAAgB,EAAE,CAAC,CACpH,MAAC,MAAM,CAAC,SAAS,eACf,MAAC,MAAM,CAAC,aAAa,IAAC,IAAI,EAAE,IAAI,aAC9B,MAAC,MAAM,CAAC,cAAc,IAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,aACvE,IAAI,EACL,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,IAC1C,EACvB,WAAW,IAAI,KAAC,MAAM,CAAC,WAAW,cAAE,WAAW,GAAsB,IACjD,EACtB,MAAM,IACU,CACpB,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { ILabelProps } from '../../FormField.types';\nimport * as Styled from './Label.styles';\n\nconst LabelMessage = ({ label, size, mandatory }: Pick<ILabelProps, 'label' | 'size' | 'mandatory'>) => (\n  <Styled.LabelText>\n    {label && <Styled.Title size={size}>{label}</Styled.Title>}\n    {mandatory && <Styled.Mandatory size={size}>*</Styled.Mandatory>}\n  </Styled.LabelText>\n);\n\nconst Label = ({ size, icon, iconPosition, id, label, description, mandatory, helper }: ILabelProps): ReactElement => (\n  <Styled.Container>\n    <Styled.LeftContainer size={size}>\n      <Styled.TitleContainer iconPosition={iconPosition} size={size} htmlFor={id}>\n        {icon}\n        <LabelMessage label={label} size={size} mandatory={mandatory} />\n      </Styled.TitleContainer>\n      {description && <Styled.Description>{description}</Styled.Description>}\n    </Styled.LeftContainer>\n    {helper}\n  </Styled.Container>\n);\n\nexport default Label;\n"]}

package/build/esm/components/FormField/components/Label/Label.styles.d.ts

@@ -0,0 +1,16 @@
+import { FormFieldSize } from '../../FormField.types';
+type CommonStyledProps = {
+    size: FormFieldSize;
+};
+type IconOrientation = {
+    iconPosition?: string;
+};
+declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const LeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CommonStyledProps, never>;
+declare const TitleContainer: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, CommonStyledProps & IconOrientation, never>;
+declare const LabelText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+declare const Title: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CommonStyledProps, never>;
+declare const Mandatory: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, CommonStyledProps, never>;
+declare const Description: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export { Container, LeftContainer, TitleContainer, LabelText, Title, Mandatory, Description };
+//# sourceMappingURL=Label.styles.d.ts.map

package/build/esm/components/FormField/components/Label/Label.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormField/components/Label/Label.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,SAAS,yGAQd,CAAC;AAEF,QAAA,MAAM,aAAa,wHAYlB,CAAC;AAEF,QAAA,MAAM,cAAc,4IAkBnB,CAAC;AAEF,QAAA,MAAM,SAAS,0GAGd,CAAC;AAEF,QAAA,MAAM,KAAK,wHAOV,CAAC;AAEF,QAAA,MAAM,SAAS,yHAQd,CAAC;AAEF,QAAA,MAAM,WAAW,0GAKhB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC"}

package/build/esm/components/FormField/components/Label/Label.styles.js

@@ -0,0 +1,72 @@
+import styled, { css } from 'styled-components';
+import { Positions, Sizes } from 'acinguiux-ds-react-base';
+import { formFieldConsts } from '../../FormField.consts';
+const Container = styled.div `
+  ${({ theme }) => css `
+    display: flex;
+    align-items: center;
+
+    ${theme.label.medium.normal};
+    color: ${theme.text.onSurface.subtle};
+  `}
+`;
+const LeftContainer = styled.div `
+  ${({ size }) => css `
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin-bottom: ${formFieldConsts[size].margin};
+
+    svg {
+      width: ${formFieldConsts[size].icon};
+      height: ${formFieldConsts[size].icon};
+    }
+  `}
+`;
+const TitleContainer = styled.label `
+  ${({ iconPosition }) => iconPosition === Positions.Right &&
+    css `
+      flex-flow: row-reverse;
+      margin-right: auto;
+    `}
+
+  ${({ size, theme }) => css `
+    ${size === Sizes.Small && theme.label.small.bold};
+    ${size === Sizes.Medium && theme.label.medium.bold};
+    ${size === Sizes.Large && theme.label.large.bold};
+    color: ${theme.text.onSurface.strong};
+  `}
+  
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`;
+const LabelText = styled.span `
+  display: flex;
+  gap: 6px;
+`;
+const Title = styled.div `
+  ${({ size, theme }) => css `
+    ${size === Sizes.Small && theme.label.small.bold};
+    ${size === Sizes.Medium && theme.label.medium.bold};
+    ${size === Sizes.Large && theme.label.large.bold};
+    color: ${theme.text.onSurface.strong};
+  `}
+`;
+const Mandatory = styled.span `
+  ${({ size, theme }) => css `
+    ${size === Sizes.Small && theme.label.small.bold};
+    ${size === Sizes.Medium && theme.label.medium.bold};
+    ${size === Sizes.Large && theme.label.large.bold};
+    color: ${theme.system.strong.negative};
+    margin-left: 1px;
+  `}
+`;
+const Description = styled.span `
+  ${({ theme }) => css `
+    ${theme.label.small.normal};
+    color: ${theme.text.onSurface.subtle};
+  `}
+`;
+export { Container, LeftContainer, TitleContainer, LabelText, Title, Mandatory, Description };
+//# sourceMappingURL=Label.styles.js.map

package/build/esm/components/FormField/components/Label/Label.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.styles.js","sourceRoot":"","sources":["../../../../../../src/components/FormField/components/Label/Label.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Positions, Sizes } from 'acinguiux-ds-react-base';\n\nimport { formFieldConsts } from '../../FormField.consts';\nimport { FormFieldSize } from '../../FormField.types';\n\ntype CommonStyledProps = {\n  size: FormFieldSize;\n};\n\ntype IconOrientation = {\n  iconPosition?: string;\n};\n\nconst Container = styled.div`\n  ${({ theme }) => css`\n    display: flex;\n    align-items: center;\n\n    ${theme.label.medium.normal};\n    color: ${theme.text.onSurface.subtle};\n  `}\n`;\n\nconst LeftContainer = styled.div<CommonStyledProps>`\n  ${({ size }) => css`\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    margin-bottom: ${formFieldConsts[size].margin};\n\n    svg {\n      width: ${formFieldConsts[size].icon};\n      height: ${formFieldConsts[size].icon};\n    }\n  `}\n`;\n\nconst TitleContainer = styled.label<CommonStyledProps & IconOrientation>`\n  ${({ iconPosition }) =>\n    iconPosition === Positions.Right &&\n    css`\n      flex-flow: row-reverse;\n      margin-right: auto;\n    `}\n\n  ${({ size, theme }) => css`\n    ${size === Sizes.Small && theme.label.small.bold};\n    ${size === Sizes.Medium && theme.label.medium.bold};\n    ${size === Sizes.Large && theme.label.large.bold};\n    color: ${theme.text.onSurface.strong};\n  `}\n  \n  display: flex;\n  gap: 6px;\n  align-items: center;\n`;\n\nconst LabelText = styled.span`\n  display: flex;\n  gap: 6px;\n`;\n\nconst Title = styled.div<CommonStyledProps>`\n  ${({ size, theme }) => css`\n    ${size === Sizes.Small && theme.label.small.bold};\n    ${size === Sizes.Medium && theme.label.medium.bold};\n    ${size === Sizes.Large && theme.label.large.bold};\n    color: ${theme.text.onSurface.strong};\n  `}\n`;\n\nconst Mandatory = styled.span<CommonStyledProps>`\n  ${({ size, theme }) => css`\n    ${size === Sizes.Small && theme.label.small.bold};\n    ${size === Sizes.Medium && theme.label.medium.bold};\n    ${size === Sizes.Large && theme.label.large.bold};\n    color: ${theme.system.strong.negative};\n    margin-left: 1px;\n  `}\n`;\n\nconst Description = styled.span`\n  ${({ theme }) => css`\n    ${theme.label.small.normal};\n    color: ${theme.text.onSurface.subtle};\n  `}\n`;\n\nexport { Container, LeftContainer, TitleContainer, LabelText, Title, Mandatory, Description };\n"]}

package/build/esm/components/FormField/components/Label/Label.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Label.test.d.ts.map

package/build/esm/components/FormField/components/Label/Label.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.test.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormField/components/Label/Label.test.tsx"],"names":[],"mappings":""}