@digigov/ui 0.28.3 → 0.29.0

package/es/core/ErrorMessage/ErrorMessage.stories.js

@@ -1,4 +1,4 @@
-import ErrorMessage from "@digigov/ui/core/ErrorMessage";
+import ErrorMessage from '@digigov/ui/core/ErrorMessage';
 export default {
   title: 'Digigov UI/core/ErrorMessage',
   description: 'Show an error message next to the field and in the error summary when there is a validation error.',
@@ -6,4 +6,4 @@ export default {
   component: ErrorMessage,
   displayName: 'ErrorMessage'
 };
-export * from './__stories__/Default';
+export * from '@digigov/ui/core/ErrorMessage/__stories__/Default';

package/es/core/ErrorMessage/__stories__/Default.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import ErrorMessage from '@digigov/ui/core/ErrorMessage';
-import Hint from '@digigov/ui/typography/Hint';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Field, {
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
   error: true
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/es/core/ErrorMessage/index.mdx

@@ -3,17 +3,14 @@ id: error-message
 title: ErrorMessage
 ---
 
-
 # ErrorMessage
 
-Follow the validation pattern and show an error message when there is a validation error. 
+Follow the validation pattern and show an error message when there is a validation error.
 In the error message explain what went wrong and how to fix it.
- 
-
 
 ```bash
 import ErrorMessage from '@digigov/ui/core/ErrorMessage';
-``` 
+```
 
 ## How to use
 

package/es/core/ErrorSummary/ErrorSummary.stories.js

@@ -1,4 +1,4 @@
-import ErrorSummary from "@digigov/ui/core/ErrorSummary";
+import ErrorSummary from '@digigov/ui/core/ErrorSummary';
 export default {
   title: 'Digigov UI/core/ErrorSummary',
   description: 'Use this component at the top of a page to summarise any errors a user has made.',
@@ -6,7 +6,7 @@ export default {
   component: ErrorSummary,
   displayName: 'ErrorSummary'
 };
-export * from './__stories__/Default';
-export * from './__stories__/LinkedToInput';
-export * from './__stories__/LinkedToField';
-export * from './__stories__/LinkedToCheckbox';
+export * from '@digigov/ui/core/ErrorSummary/__stories__/Default';
+export * from '@digigov/ui/core/ErrorSummary/__stories__/LinkedToInput';
+export * from '@digigov/ui/core/ErrorSummary/__stories__/LinkedToField';
+export * from '@digigov/ui/core/ErrorSummary/__stories__/LinkedToCheckbox';

package/es/core/ErrorSummary/__stories__/Default.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import ErrorSummary from '@digigov/ui/core/ErrorSummary';
-import Title from '@digigov/ui/typography/Title';
-import Link from '@digigov/ui/core/Link';
+import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
+import { Title } from '@digigov/ui/typography/Title';
+import { Link } from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
   size: "sm"

package/es/core/ErrorSummary/__stories__/LinkedToCheckbox.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import ErrorSummary from '@digigov/ui/core/ErrorSummary';
-import Title from '@digigov/ui/typography/Title';
-import Link from '@digigov/ui/core/Link';
-import Hint from '@digigov/ui/typography/Hint';
-import ErrorMessage from "@digigov/ui/core/ErrorMessage";
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
+import { Title } from '@digigov/ui/typography/Title';
+import { Link } from '@digigov/ui/core/Link';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
@@ -14,9 +14,9 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   size: "sm"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
   href: "#england"
-}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2.")), /*#__PURE__*/React.createElement(Field, {
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2.")), /*#__PURE__*/React.createElement(FieldContainer, {
   error: true
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "england",
   value: "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1",
   id: "england"

package/es/core/ErrorSummary/__stories__/LinkedToField.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import ErrorSummary from '@digigov/ui/core/ErrorSummary';
-import Title from '@digigov/ui/typography/Title';
-import Link from '@digigov/ui/core/Link';
-import Hint from '@digigov/ui/typography/Hint';
-import ErrorMessage from "@digigov/ui/core/ErrorMessage";
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import DateInput, { DateInputItem } from '@digigov/ui/core/DateInput';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
+import { Title } from '@digigov/ui/typography/Title';
+import { Link } from '@digigov/ui/core/Link';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { DateInputContainer, DateInputItem } from '@digigov/ui/core/DateInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
@@ -14,10 +14,10 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   size: "sm"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
   href: "#passport-date"
-}, "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.")), /*#__PURE__*/React.createElement(Field, {
+}, "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.")), /*#__PURE__*/React.createElement(FieldContainer, {
   error: true,
   id: "passport-date"
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/React.createElement(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/React.createElement(DateInputContainer, null, /*#__PURE__*/React.createElement(DateInputItem, {
   name: "day"
 }, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
   name: "month"

package/es/core/ErrorSummary/__stories__/LinkedToInput.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import ErrorSummary from '@digigov/ui/core/ErrorSummary';
-import Title from '@digigov/ui/typography/Title';
-import Link from '@digigov/ui/core/Link';
-import TextInput from '@digigov/ui/core/TextInput';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import Hint from '@digigov/ui/typography/Hint';
-import ErrorMessage from '@digigov/ui/core/ErrorMessage';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
+import { Title } from '@digigov/ui/typography/Title';
+import { Link } from '@digigov/ui/core/Link';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
@@ -16,7 +16,7 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   size: "sm"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
   href: "#business-name"
-}, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(Field, {
+}, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(FieldContainer, {
   error: true
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"

package/es/core/ErrorSummary/index.mdx

@@ -3,23 +3,23 @@ id: error-summary
 title: ErrorSummary
 ---
 
-
 # ErrorSummary
 
 Use this component at the top of a page to summarise any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
- 
-
 
 ```bash
 import ErrorSummary from '@digigov/ui/core/ErrorSummary';
-``` 
+```
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="core/ErrorSummary" story="Default.tsx" />
-
+<Story
+  packageName="@digigov/ui"
+  component="core/ErrorSummary"
+  story="Default.tsx"
+/>
 
 ### Linking from the error summary to each answer
 
@@ -27,13 +27,21 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToInput.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/ErrorSummary"
+  story="LinkedToInput.tsx"
+/>
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToField.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/ErrorSummary"
+  story="LinkedToField.tsx"
+/>
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 

package/es/core/{Field → FieldContainer}/index.js

@@ -1,5 +1,5 @@
-import Field from '@digigov/react-core/FieldContainer';
+import FieldContainer from '@digigov/react-core/FieldContainer';
 export * from '@digigov/react-core/FieldContainer';
 export * from '@digigov/react-core/Fieldset';
 export * from '@digigov/react-core/FieldsetLegend';
-export default Field;
+export default FieldContainer;

package/es/core/FileUpload/__stories__/Default.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Hint from '@digigov/ui/typography/Hint';
-import FileUpload from '@digigov/ui/core/FileUpload';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { FileUpload } from '@digigov/ui/core/FileUpload';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
   size: "m"
 }, "\u039B\u03BF\u03B3\u03CC\u03C4\u03C5\u03C0\u03BF \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF."), /*#__PURE__*/React.createElement(FileUpload, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5")));
 

package/es/core/FileUpload/__stories__/WithErrorMessage.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Hint from '@digigov/ui/typography/Hint';
-import ErrorMessage from '@digigov/ui/core/ErrorMessage';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import FileUpload from '@digigov/ui/core/FileUpload';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { FileUpload } from '@digigov/ui/core/FileUpload';
 
-var _ref = /*#__PURE__*/React.createElement(Field, {
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
   error: true
 }, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
   size: "m"

package/es/core/FileUpload/index.mdx

@@ -4,16 +4,18 @@ title: FileUpload
 ---
 
 # FileUpload
- 
-
 
 ```bash
 import FileUpload from '@digigov/ui/core/FileUpload';
-``` 
+```
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="core/FileUpload" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/FileUpload"
+  story="Default.tsx"
+/>
 
 ### Error message
 

package/es/core/{Label → LabelContainer}/index.js

@@ -1,4 +1,4 @@
 export * from '@digigov/react-core/LabelContainer';
 export * from '@digigov/react-core/LabelTitle';
-import Label from '@digigov/react-core/LabelContainer';
-export default Label;
+import LabelContainer from '@digigov/react-core/LabelContainer';
+export default LabelContainer;

package/es/core/Link/__stories__/DarkBackground.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Link from '@digigov/ui/core/Link';
-import { Masthead } from '@digigov/ui/layouts';
-import SectionBreak from '@digigov/ui/core/Divider';
+import { Link } from '@digigov/ui/core/Link';
+import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
   "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",

package/es/core/Link/__stories__/DarkBackgroundNoUnderline.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Link from '@digigov/ui/core/Link';
-import { Masthead } from '@digigov/ui/layouts';
-import SectionBreak from '@digigov/ui/core/Divider';
+import { Link } from '@digigov/ui/core/Link';
+import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
   "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",

package/es/core/Link/__stories__/Default.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from '@digigov/ui/core/Link';
+import { Link } from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Link, {
   "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",

package/es/core/Link/__stories__/ExternalLink.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Link from '@digigov/ui/core/Link';
-import Paragraph from '@digigov/ui/typography/Paragraph';
+import { Link } from '@digigov/ui/core/Link';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "\u03A4his is a paragraph that contains an external link that appears in print", ' ', /*#__PURE__*/React.createElement(Link, {
   "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",

package/es/core/Link/__stories__/NoUnderline.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from '@digigov/ui/core/Link';
+import { Link } from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Link, {
   "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",

package/es/core/Link/__stories__/OpensInNewTab.js

@@ -1,11 +1,11 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
+import React from 'react';
+import { Link } from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Link, {
   href: "#",
   rel: "noreferrer noopener",
   target: "_blank"
-}, " govgr link (opens in new tab) ");
+}, ' ', "govgr link (opens in new tab)", ' ');
 
 export var OpensInNewTab = function OpensInNewTab() {
   return _ref;

package/es/core/Link/index.js

@@ -25,6 +25,6 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(_ref, ref) {
   }, props), children);
 }); //@ts-ignore
 
-Link.displayName = "Link";
+Link.displayName = 'Link';
 export default Link;
 export { Link, LinkBase };

package/es/core/Link/link.mdx

@@ -5,7 +5,7 @@ title: Link
 
 ```bash
 import Link from '@digigov/ui/core/Link';
-``` 
+```
 
 ## How to use
 
@@ -15,22 +15,38 @@ import Link from '@digigov/ui/core/Link';
 
 ### No Underline
 
-<Story packageName="@digigov/ui" component="core/Link" story="NoUnderline.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Link"
+  story="NoUnderline.tsx"
+/>
 
 ### Opens in a new tab
 
-<Story packageName="@digigov/ui" component="core/Link" story="OpensInNewTab.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Link"
+  story="OpensInNewTab.tsx"
+/>
 
 ### At dark background
 
-<Story packageName="@digigov/ui" component="core/Link" story="DarkBackground.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Link"
+  story="DarkBackground.tsx"
+/>
 
 ### At dark background and no underline
 
-<Story packageName="@digigov/ui" component="core/Link" story="DarkBackgroundNoUnderline.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Link"
+  story="DarkBackgroundNoUnderline.tsx"
+/>
 
 You can read more about the accessibility patterns used in our Link
-implementation in the ARIA Authoring Practices Guide (APG) at 
+implementation in the ARIA Authoring Practices Guide (APG) at
 [Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.
 
 ## API

package/es/core/List/List.stories.js

@@ -6,9 +6,9 @@ export default {
   component: List,
   displayName: 'List'
 };
-export * from './__stories__/Default';
-export * from './__stories__/BulletList';
-export * from './__stories__/NumberedList';
-export * from './__stories__/WithExtraSpace';
-export * from './__stories__/NestedBulletList';
-export * from './__stories__/NestedListWithVariantStyles';
+export * from '@digigov/ui/core/List/__stories__/Default';
+export * from '@digigov/ui/core/List/__stories__/BulletList';
+export * from '@digigov/ui/core/List/__stories__/NumberedList';
+export * from '@digigov/ui/core/List/__stories__/WithExtraSpace';
+export * from '@digigov/ui/core/List/__stories__/NestedBulletList';
+export * from '@digigov/ui/core/List/__stories__/NestedListWithVariantStyles';

package/es/core/List/__stories__/BulletList.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import List, { ListItem } from '@digigov/ui/core/List';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
 
 var _ref = /*#__PURE__*/React.createElement(List, {
   listStyle: "bullet"

package/es/core/List/__stories__/Default.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import List, { ListItem } from '@digigov/ui/core/List';
-import Link from '@digigov/ui/core/Link';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+import { Link } from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item One")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item Two")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item Three")));
 

package/es/core/List/__stories__/NestedBulletList.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import List, { ListItem } from '@digigov/ui/core/List';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
 
 var _ref = /*#__PURE__*/React.createElement(List, {
   listStyle: "bullet"

package/es/core/List/__stories__/NestedListWithVariantStyles.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import List, { ListItem } from '@digigov/ui/core/List';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
 
 var _ref = /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, "Level 1 List Item One", /*#__PURE__*/React.createElement(List, {
   listStyle: "bullet"

package/es/core/List/__stories__/NumberedList.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import List, { ListItem } from '@digigov/ui/core/List';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
 
 var _ref = /*#__PURE__*/React.createElement(List, {
   listStyle: "number"

package/es/core/List/__stories__/WithExtraSpace.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import List, { ListItem } from '@digigov/ui/core/List';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
 
 var _ref = /*#__PURE__*/React.createElement(List, {
   spaced: true

package/es/core/List/index.mdx

@@ -3,10 +3,9 @@ id: list
 title: List
 ---
 
-
 ```bash
 import List from '@digigov/ui/core/List';
-``` 
+```
 
 ## How to use
 
@@ -20,7 +19,11 @@ import List from '@digigov/ui/core/List';
 
 ### List with numbers
 
-<Story packageName="@digigov/ui" component="core/List" story="NumberedList.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/List"
+  story="NumberedList.tsx"
+/>
 
 ### List with extra space
 

package/es/core/Masthead/__stories__/Default.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import Masthead, { MastheadBody } from '@digigov/ui/core/Masthead';
-import CallToAction from '@digigov/ui/core/Button/CallToAction';
-import { Container, Heading, Main } from '@digigov/react-core';
+import { Masthead, MastheadBody } from '@digigov/ui/layouts/Basic/Masthead';
+import { CallToAction } from '@digigov/ui/core/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, null, "\u03A3\u03C7\u03B5\u03B4\u03B9\u03AC\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03B1\u03C2, \u03BC\u03B5 \u03C4\u03BF \u03C3\u03C4\u03C5\u03BB \u03C4\u03BF\u03C5 GOV.GR"), /*#__PURE__*/React.createElement(MastheadBody, null, "\u03A7\u03C1\u03B7\u03C3\u03B9\u03BC\u03BF\u03C0\u03BF\u03B9\u03B5\u03AF\u03C3\u03C4\u03B5 \u03B1\u03C5\u03C4\u03CC\u03BD \u03C4\u03BF\u03BD \u03BF\u03B4\u03B7\u03B3\u03CC \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C6\u03C4\u03B9\u03AC\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03C5\u03BD\u03B5\u03C0\u03AE \u03C3\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C4\u03C5\u03C0\u03B1 \u03C4\u03BF\u03C5 GOV.GR. \u0391\u03C0\u03BF\u03BA\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B3\u03BD\u03CE\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03B7\u03BD \u03AD\u03C1\u03B5\u03C5\u03BD\u03B1 \u03BA\u03B1\u03B9 \u03C4\u03B7\u03BD \u03B5\u03BC\u03C0\u03B5\u03B9\u03C1\u03AF\u03B1 \u03AC\u03BB\u03BB\u03C9\u03BD \u03BF\u03BC\u03AC\u03B4\u03C9\u03BD \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03C6\u03CD\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03C0\u03B1\u03BD\u03AC\u03BB\u03B7\u03C8\u03B7 \u03B5\u03C1\u03B3\u03B1\u03C3\u03B9\u03CE\u03BD \u03C0\u03BF\u03C5 \u03AD\u03C7\u03BF\u03C5\u03BD \u03AE\u03B4\u03B7 \u03B3\u03AF\u03BD\u03B5\u03B9."), /*#__PURE__*/React.createElement(CallToAction, {
   href: "#"

package/es/core/Masthead/masthead.mdx

@@ -7,7 +7,7 @@ title: Masthead
 
 ```bash
 import Masthead from '@digigov/ui/core/Masthead';
-``` 
+```
 
 ## How to use
 

package/es/core/NavList/NavHorizontalListItemButton.js

@@ -0,0 +1,3 @@
+import NavHorizontalListItemButton from '@digigov/react-core/NavHorizontalListItemButton';
+export { NavHorizontalListItemButton };
+export default NavHorizontalListItemButton;

package/es/core/NavList/NavHorizontalListItemLink.js

@@ -0,0 +1,3 @@
+import NavHorizontalListItemLink from '@digigov/react-core/NavHorizontalListItemLink';
+export { NavHorizontalListItemLink };
+export default NavHorizontalListItemLink;

package/es/core/NavList/NavMenu.js

@@ -0,0 +1,3 @@
+import NavMenu from '@digigov/react-core/NavMenu';
+export { NavMenu };
+export default NavMenu;

package/es/core/NavList/NavMenuContainer.js

@@ -0,0 +1,3 @@
+import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
+export { NavMenuContainer };
+export default NavMenuContainer;

package/es/core/NavList/NavMenuContainerContent.js

@@ -0,0 +1,3 @@
+import NavMenuContainerContent from '@digigov/react-core/NavMenuContainerContent';
+export { NavMenuContainerContent };
+export default NavMenuContainerContent;