@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

package/{esm/form/SingleCharacterInputContainer → es/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 → 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 → 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/es/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/es/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/es/form/TextArea/TextArea.stories.js

@@ -12,4 +12,5 @@ export * from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
 export * from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
 export * from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextArea/__stories__/Dense';

package/es/form/TextArea/__stories__/Dense.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextArea } from '@digigov/ui/form/TextArea';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2;", /*#__PURE__*/React.createElement(TextArea, {
+  dense: true,
+  name: "textarea"
+})));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/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
 

package/es/form/TextInput/TextInput.stories.js

@@ -13,4 +13,5 @@ export * from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
 export * from '@digigov/ui/form/TextInput/__stories__/WithHint';
 export * from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
 export * from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextInput/__stories__/Dense';

package/es/form/TextInput/__stories__/Dense.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(TextInput, {
+  dense: true,
+  name: "inputext"
+})));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/TextInput/__stories__/FixedWidths.js

@@ -4,49 +4,39 @@ import { LabelContainer } from '@digigov/ui/form/LabelContainer';
 import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
-var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 20 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  characterWidth: 20
-})));
-
-var _ref2 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  maxWidth: '20-char'
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 10 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  characterWidth: 10
-})));
-
-var _ref3 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  maxWidth: '10-char'
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 5 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  characterWidth: 5
-})));
-
-var _ref4 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  maxWidth: '5-char'
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 4 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  characterWidth: 4
-})));
-
-var _ref5 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  maxWidth: '4-char'
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 3 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  characterWidth: 3
-})));
-
-var _ref6 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  maxWidth: '3-char'
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 2 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  characterWidth: 2
-})));
+  maxWidth: '2-char'
+}))));
 
 export var FixedWidths = function FixedWidths() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3, _ref4, _ref5, _ref6);
+  return _ref;
 };
 export default FixedWidths;

package/es/form/TextInput/__stories__/FluidWidths.js

@@ -4,49 +4,39 @@ import { LabelContainer } from '@digigov/ui/form/LabelContainer';
 import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
-var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u039C\u03AD\u03B3\u03B9\u03C3\u03C4\u03BF \u03C0\u03BB\u03AC\u03C4\u03BF\u03C2"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  cellWidth: "full"
-})));
-
-var _ref2 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  width: "full"
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03B1 \u03C4\u03C1\u03AF\u03B1-\u03C4\u03AD\u03C4\u03B1\u03C1\u03C4\u03B1"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  cellWidth: "three-quarters"
-})));
-
-var _ref3 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  width: "75%"
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03B1 \u03B4\u03CD\u03BF-\u03C4\u03C1\u03AF\u03C4\u03B1"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  cellWidth: "two-thirds"
-})));
-
-var _ref4 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  width: "66.6%"
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03BF \u03BC\u03B9\u03C3\u03CC"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  cellWidth: "one-half"
-})));
-
-var _ref5 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  width: "50%"
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03BF \u03AD\u03BD\u03B1-\u03C4\u03C1\u03AF\u03C4\u03BF"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  cellWidth: "one-third"
-})));
-
-var _ref6 = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  width: "33.3%"
+}))), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03BF \u03AD\u03BD\u03B1-\u03C4\u03AD\u03C4\u03B1\u03C1\u03C4\u03BF"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
-  cellWidth: "one-quarter"
-})));
+  width: "25%"
+}))));
 
 export var FluidWidths = function FluidWidths() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3, _ref4, _ref5, _ref6);
+  return _ref;
 };
 export default FluidWidths;

package/es/form/TextInput/index.mdx

@@ -11,19 +11,11 @@ import TextInput from '@digigov/ui/form/TextInput';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -33,59 +25,35 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FixedWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FluidWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FluidWidths.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/TextInput"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithHint.tsx" />
 
 ## Numbers
 
 ### Asking for whole numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="AskingForNumbers.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="DisabledInput.tsx" />
 
 ## API
 

package/es/form/index.js

@@ -8,8 +8,8 @@ export * from '@digigov/ui/form/FileUpload';
 export * from '@digigov/ui/form/Form';
 export * from '@digigov/ui/form/LabelContainer';
 export * from '@digigov/ui/form/RadioContainer';
-export * from '@digigov/ui/form/SearchSection';
+export * from '@digigov/ui/form/SearchContainer';
 export * from '@digigov/ui/form/SelectContainer';
-export * from '@digigov/ui/form/SingleCharacterInputContainer';
+export * from '@digigov/ui/form/SingleCharacterInputs';
 export * from '@digigov/ui/form/TextArea';
 export * from '@digigov/ui/form/TextInput';

package/es/govgr/Footer/Copyright.js

@@ -25,15 +25,15 @@ export var Copyright = function Copyright(_ref) {
     url: 'https://grnet.gr',
     label: t('footer.grnet')
   };
-  return /*#__PURE__*/React.createElement(CopyrightContainer, props, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, copyright, createdBy || /*#__PURE__*/React.createElement(React.Fragment, null, t('footer.created_by'), ' ', /*#__PURE__*/React.createElement(Link, {
+  return /*#__PURE__*/React.createElement(CopyrightContainer, props, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, copyright, createdBy || /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(t('footer.created_by'), " "), /*#__PURE__*/React.createElement(Link, {
     href: copyrightInfo.url,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, copyrightInfo.label), ' ', !minDigitalCopyright && /*#__PURE__*/React.createElement(React.Fragment, null, t('footer.created_for'), ' ', /*#__PURE__*/React.createElement(Link, {
+  }, "".concat(copyrightInfo.label)), !minDigitalCopyright && /*#__PURE__*/React.createElement(React.Fragment, null, " ".concat(t('footer.created_for'), " "), /*#__PURE__*/React.createElement(Link, {
     href: "https://mindigital.gr",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, t('footer.mindigital'))))));
+  }, "".concat(t('footer.mindigital')))))));
 };
 export { CopyrightContainer };
 export default Copyright;

package/es/govgr/Footer/index.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import Footer from '@digigov/react-core/Footer';
 import FooterContainer from '@digigov/react-core/FooterContainer';
-import FooterMeta from '@digigov/react-core/FooterMeta';
-import FooterMetaItem from '@digigov/react-core/FooterMetaItem';
+import FooterInfo from '@digigov/react-core/FooterInfo';
+import FooterInfoSection from '@digigov/react-core/FooterInfoSection';
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
 import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 
-var _ref2 = /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null));
+var _ref2 = /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null));
 
 export var GovGRFooter = function GovGRFooter(_ref) {
   var copyright = _ref.copyright,
       children = _ref.children,
       createdBy = _ref.createdBy,
       minDigitalCopyright = _ref.minDigitalCopyright;
-  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, children || /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, null, copyright ? copyright : /*#__PURE__*/React.createElement(Copyright, {
+  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, children || /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, null, copyright ? copyright : /*#__PURE__*/React.createElement(Copyright, {
     createdBy: createdBy,
     minDigitalCopyright: minDigitalCopyright
   })), _ref2)));

package/es/icons/Icon/index.js

@@ -1,5 +1,5 @@
-export * from '@digigov/react-core/Icon';
+export * from '@digigov/react-icons/Icon';
 export * from '@digigov/react-icons';
 export * from '@digigov/react-icons/icons';
-import Icon from '@digigov/react-core/Icon';
+import Icon from '@digigov/react-icons/Icon';
 export default Icon;

package/es/icons/ImageLogo/index.js

@@ -0,0 +1,3 @@
+import ImageLogo from '@digigov/react-core/ImageLogo';
+export * from '@digigov/react-core/ImageLogo';
+export default ImageLogo;

package/es/icons/ImageLogoSet/index.js

@@ -0,0 +1,3 @@
+import ImageLogoSet from '@digigov/react-core/ImageLogoSet';
+export * from '@digigov/react-core/ImageLogoSet';
+export default ImageLogoSet;

package/es/layouts/Admin/index.js

@@ -4,6 +4,6 @@ export * from '@digigov/react-core/AdminMain';
 export * from '@digigov/react-core/AdminAside';
 export * from '@digigov/react-core/AdminTopSection';
 export * from '@digigov/react-core/AdminHeader';
-export * from '@digigov/react-core/AdminHeaderSection';
+export * from '@digigov/react-core/AdminHeaderContent';
 import AdminLayout from '@digigov/react-core/AdminLayout';
 export default AdminLayout;

package/es/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side childr
 <ForwardRef(Layout)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    className="govgr-layout--full-height govgr-layout"
   >
     <div
-      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+      className="govgr-layout--full-height govgr-layout"
     >
       <ForwardRef(Top)>
         <ForwardRef(Base)
@@ -25,10 +25,10 @@ exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side childr
         <ForwardRef(Container)>
           <ForwardRef(Base)
             as="div"
-            className="govgr-width-container"
+            className="govgr-container"
           >
             <div
-              className="govgr-width-container"
+              className="govgr-container"
             >
               <ForwardRef(Base)
                 as="div"