@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-75e5086d

package/esm/form/Checkbox/index.mdx

@@ -11,57 +11,33 @@ import Checkbox from '@digigov/ui/form/Checkbox';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="MultipleQuestions.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="WithHint.tsx" />
 
 ### Add an option for ‘none’
 
 When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="NoneAnswer.tsx" />
 
 If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswerWithError.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="NoneAnswerWithError.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox"story="WithErrorMessage.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -69,11 +45,12 @@ You can ask the user a related question when they select a particular checkbox,
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="ConditionalReveal.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="ConditionalReveal.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Checkbox
+implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
 
 ## API
 

package/esm/form/DateInputContainer/index.mdx

@@ -11,34 +11,23 @@ import DateInputContainer from '@digigov/ui/form/DateInputContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="MultipleQuestions.tsx" />
 
 ### Error message
 
 If you’re highlighting the whole date, style all the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="WithErrorMessage.tsx" />
 
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessageForSingleField.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer"story="WithErrorMessageForSingleField.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />

package/esm/form/ErrorMessage/index.mdx

@@ -14,11 +14,7 @@ import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/ErrorMessage"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/ErrorMessage" story="Default.tsx" />
 
 ## API
 

package/esm/form/FileUpload/index.mdx

@@ -11,16 +11,14 @@ import FileUpload from '@digigov/ui/form/FileUpload';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/FileUpload" story="Default.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
+<Story packageName="@digigov/ui" component="form/FileUpload" story="WithErrorMessage.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="FileUpload" />

package/esm/form/RadioContainer/__stories__/ConditionalReveal.js

@@ -14,7 +14,7 @@ var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/R
   value: "email"
 }, "Email"), /*#__PURE__*/React.createElement(RadioConditional, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 email", /*#__PURE__*/React.createElement(TextInput, {
   name: "email",
-  cellWidth: "one-third"
+  width: "33.3%"
 })), /*#__PURE__*/React.createElement(RadioItem, {
   name: "contact",
   value: "phone"

package/esm/form/RadioContainer/index.mdx

@@ -11,48 +11,28 @@ import RadioContainer from '@digigov/ui/form/RadioContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Inline.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="Inline.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithHints.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="WithHints.tsx" />
 
 ### RadioContainer items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="NoneAnswer.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -60,21 +40,18 @@ You can ask the user a related question when they select a particular checkbox,
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="ConditionalReveal.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="ConditionalReveal.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="WithErrorMessage.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Radio
+implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) section.
 
 ## API
 

package/esm/form/SearchContainer/index.js

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/SearchContainer';
+export * from '@digigov/react-core/SearchButton';
+export * from '@digigov/react-icons/SearchIcon';
+import SearchContainer from '@digigov/react-core/SearchContainer';
+export default SearchContainer;

package/esm/form/SelectContainer/__stories__/Default.js

@@ -7,13 +7,13 @@ var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/R
   name: "select-list",
   "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/React.createElement(SelectOption, {
-  value: "dim"
+  value: "popular"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/React.createElement(SelectOption, {
-  value: "kat"
+  value: "recent"
 }, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/React.createElement(SelectOption, {
-  value: "kat"
+  value: "views"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/React.createElement(SelectOption, {
-  value: "kat"
+  value: "comments"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
 
 export var Default = function Default() {

package/esm/form/SelectContainer/index.mdx

@@ -11,32 +11,26 @@ import SelectContainer from '@digigov/ui/form/SelectContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="DisabledInput.tsx" />
+
+## Accessibility
 
 You can read more about the accessibility patterns used in our SelectContainer
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SelectContainer" />

package/esm/form/SingleCharacterInputs/SingleCharacterInput.stories.js

@@ -0,0 +1,12 @@
+import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+export default {
+  title: 'Digigov UI/form/SingleCharacterInputs',
+  description: 'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
+  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
+  component: SingleCharacterInputs,
+  displayName: 'SingleCharacterInputs'
+};
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';

package/esm/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/Default.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
-import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/form/SingleCharacterInputContainer';
+import { SingleCharacterInputs, SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 
 var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
@@ -9,24 +9,24 @@ var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/R
   heading: true
 }, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Hint, {
   id: "code-hint"
-}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/React.createElement(SingleCharacterInputs, null, /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "first-digit",
-  value: 4
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: 4
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "second-digit",
-  value: 4
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: 4
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "third-digit",
-  value: 5
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: 5
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "forth-digit",
-  value: 1
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: 1
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "fifth-digit",
-  value: 2
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: 2
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "sixth-digit",
-  value: 3
+  defaultValue: 3
 }))));
 
 export var Default = function Default() {

package/{es/form/SingleCharacterInputContainer → esm/form/SingleCharacterInputs}/__stories__/WithDefaultError.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
-import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/form/SingleCharacterInputContainer';
+import { SingleCharacterInputs, SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -13,22 +13,22 @@ var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
   heading: true
 }, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Hint, {
   id: "code-hint"
-}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u03A4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C5\u03C0\u03BF\u03C7\u03C1\u03B5\u03C9\u03C4\u03B9\u03BA\u03CC."), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u03A4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C5\u03C0\u03BF\u03C7\u03C1\u03B5\u03C9\u03C4\u03B9\u03BA\u03CC."), /*#__PURE__*/React.createElement(SingleCharacterInputs, null, /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "first-digit",
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "second-digit",
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "third-digit",
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "forth-digit",
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "fifth-digit",
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "sixth-digit",
   error: true
 }))));

package/{es/form/SingleCharacterInputContainer → esm/form/SingleCharacterInputs}/__stories__/WithErrorMessageInvalidCode.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
-import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/form/SingleCharacterInputContainer';
+import { SingleCharacterInputs, SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -15,31 +15,31 @@ var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
   id: "code-hint"
 }, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/React.createElement(ErrorMessage, {
   id: "code-error"
-}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B5\u03B9 \u03BB\u03AC\u03B8\u03BF\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC."), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, {
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B5\u03B9 \u03BB\u03AC\u03B8\u03BF\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC."), /*#__PURE__*/React.createElement(SingleCharacterInputs, {
   "aria-describedby": "code-error"
-}, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}, /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "first-digit",
-  value: 4,
+  defaultValue: 4,
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "second-digit",
-  value: 4,
+  defaultValue: 4,
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "third-digit",
-  value: 5,
+  defaultValue: 5,
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "forth-digit",
-  value: 1,
+  defaultValue: 1,
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "fifth-digit",
-  value: 2,
+  defaultValue: 2,
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "sixth-digit",
-  value: 3,
+  defaultValue: 3,
   error: true
 }))));
 

package/{es/form/SingleCharacterInputContainer → esm/form/SingleCharacterInputs}/__stories__/WithErrorMessageLessDigit.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
-import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/form/SingleCharacterInputContainer';
+import { SingleCharacterInputs, SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -15,24 +15,24 @@ var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
   id: "code-hint"
 }, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/React.createElement(ErrorMessage, {
   id: "code-error"
-}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03B9 \u03BB\u03B9\u03B3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03B1\u03C0\u03CC 6 \u03C8\u03B7\u03C6\u03AF\u03B1."), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, {
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03B9 \u03BB\u03B9\u03B3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03B1\u03C0\u03CC 6 \u03C8\u03B7\u03C6\u03AF\u03B1."), /*#__PURE__*/React.createElement(SingleCharacterInputs, {
   "aria-describedby": "code-error"
-}, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}, /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "first-digit",
-  value: "6"
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: "6"
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "second-digit",
-  value: "4"
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: "4"
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "third-digit",
-  value: "5"
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  defaultValue: "5"
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "forth-digit",
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "fifth-digit",
   error: true
-}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+}), /*#__PURE__*/React.createElement(SingleCharacterInput, {
   name: "sixth-digit",
   error: true
 }))));

package/esm/form/SingleCharacterInputs/index.js

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/SingleCharacterInputs';
+export * from '@digigov/react-core/SingleCharacterInput';
+import SingleCharacterInputs from '@digigov/react-core/SingleCharacterInputs';
+export default SingleCharacterInputs;

package/esm/form/SingleCharacterInputs/index.mdx

@@ -0,0 +1,24 @@
+---
+id: single-character-inputs
+title: SingleCharacterInputs
+---
+
+# SingleCharacterInput
+
+```bash
+import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="Default.tsx" />
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="WithDefaultError.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />

package/esm/form/TextArea/index.mdx

@@ -11,65 +11,37 @@ import TextArea from '@digigov/ui/form/TextArea';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="Default.tsx" />
 
 ### Use appropriately-sized textareas
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithDeclaredRows.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithDeclaredRows.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="LimitedCharacters.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="LimitedCharacters.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="DisabledInput.tsx" />
 
 ## API