@digigov/ui 0.21.2 → 0.23.0

package/esm/core/Button/index.mdx

@@ -0,0 +1,97 @@
+---
+id: button
+title: Button
+---
+
+# Button
+
+Use the button component to help users carry out an action like starting an
+application or saving their information.
+
+ 
+
+
+```bash
+import Button from '@digigov/ui/core/Button';
+``` 
+
+## How to use
+
+### Default buttons
+
+Use a default button for the main call to action on a page.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Primary.tsx" />
+
+
+### Start buttons
+Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
+
+<Story packageName="@digigov/ui" component="core/Button" story="CallToActionButton.tsx" />
+
+### Secondary buttons
+Use secondary buttons for secondary calls to action on a page.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Secondary.tsx" />
+
+### Warning buttons
+Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Warning.tsx" />
+
+### Disable buttons
+Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Disabled.tsx" />
+
+
+### Grouping buttons
+Use a button group when two or more buttons are placed together.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtons.tsx" />
+
+Any links within a button group will automatically align with the buttons.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtonsAndLinks.tsx" />
+
+
+
+Write button text in sentence case, describing the action it performs. For
+example:'
+
+- `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
+- `Sign in` to an account a user has already created
+- `Continue` when the service does not save a user's information
+- `Save and continue` when the service does save a user's information
+- `Save and come back later` when a user can save their information and come back later
+- `Add another` to add another item to a list or group
+- `Pay` to make a payment
+- `Confirm and send` on a check answers page that does not have any legal
+  content a user must agree to
+- `Accept and send` on a check answers page that has legal content a user
+  must agree to
+- `Sign out` when a user is signed in to an account
+
+You may need to include more or different words to better describe the action.
+For example, `Add another address` and `Accept and claim a tax refund`.
+
+Align the primary action button to the left edge of your form.
+
+## Default buttons
+
+Use a default button for the main call to action on a page.
+
+Avoid using multiple default buttons on a single page. Having more than on main
+call to action reduces their impact, and makes it harder for users to know what
+to do next.
+
+## API Docs
+
+Read more about [how to use the React types](/docs/api/Button)
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Select
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.

package/esm/core/Card/Card.stories.js

@@ -10,4 +10,5 @@ export * from '@digigov/ui/core/Card/__stories__/WithGrayTopBorder';
 export * from '@digigov/ui/core/Card/__stories__/WithDarkTopBorder';
 export * from '@digigov/ui/core/Card/__stories__/WithDivider';
 export * from '@digigov/ui/core/Card/__stories__/WithClickableContent';
-export * from '@digigov/ui/core/Card/__stories__/WithClickableLink';
+export * from '@digigov/ui/core/Card/__stories__/WithClickableLink';
+export * from '@digigov/ui/core/Card/__stories__/WithGroupButton';

package/esm/core/Card/__stories__/WithClickableLink.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import Card, { CardAction, CardHeading, CardText } from '@digigov/ui/core/Card';
-import Button from '@digigov/ui/core/Button';
+import Card, { CardHeading, CardText } from '@digigov/ui/core/Card';
 import Link from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/React.createElement(CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."), /*#__PURE__*/React.createElement(CardAction, null, /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1")));
+}, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/React.createElement(CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."));
 
 export var WithClickableLink = function WithClickableLink() {
   return _ref;

package/esm/core/Card/__stories__/WithGroupButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Card, { CardHeading, CardText, CardAction } from '@digigov/ui/core/Card';
+import Button, { ButtonGroup } from '@digigov/ui/core/Button';
+import Link from '@digigov/ui/core/Link';
+
+var _ref = /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1"), /*#__PURE__*/React.createElement(CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."), /*#__PURE__*/React.createElement(CardAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+
+export var WithGroupButton = function WithGroupButton() {
+  return _ref;
+};
+export default WithGroupButton;

package/esm/core/Card/card.mdx

@@ -0,0 +1,78 @@
+---
+id: card
+title: Card
+---
+
+
+# Card
+
+Cards can be used to divide and organise interface content for better understandability and readability. 
+When used correctly, Cards can help users to scan through vast amounts of information quicker.
+
+ 
+
+
+```bash
+import Card from '@digigov/ui/core/Card';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Card" story="Default.tsx" />
+
+
+### Card with border
+
+You can set the color of the Card's border. You can choose between `dark` and `grey` color respectively.
+
+#### Card with gray border color
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayBorder.tsx" />
+
+#### Card with dark border color
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkBorder.tsx" />
+
+
+### Card with top border
+
+You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey
+
+#### Card with grey top border
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayTopBorder.tsx" />
+
+#### Card with dark top border
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkTopBorder.tsx" />
+
+
+### Card with divider
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDivider.tsx" />
+
+
+### Card with actions
+
+#### Card with title link
+
+Cards can be used without an action button, but with a clickable title.
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableLink.tsx" />
+
+#### Card with clickable content
+
+You can expand the clickable area of the link to fill Card's content.
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableContent.tsx" />
+
+
+Cards also provides styles for actionable elements such as Buttons or Links.
+
+#### Card with button or link
+
+<Story packageName="@digigov/ui" component="core/Card" story="Default.tsx" />
+
+#### Card with a group of actions
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGroupButton.tsx" />

package/esm/core/Checkboxes/Checkbox.stories.js

@@ -7,5 +7,6 @@ export * from '@digigov/ui/core/Checkboxes/__stories__/Default';
 export * from '@digigov/ui/core/Checkboxes/__stories__/MultipleQuestions';
 export * from '@digigov/ui/core/Checkboxes/__stories__/WithHint';
 export * from '@digigov/ui/core/Checkboxes/__stories__/NoneAnswer';
+export * from '@digigov/ui/core/Checkboxes/__stories__/NoneAnswerWithError';
 export * from '@digigov/ui/core/Checkboxes/__stories__/WithErrorMessage';
 export * from '@digigov/ui/core/Checkboxes/__stories__/ConditionalReveal';

package/esm/core/Checkboxes/__stories__/ConditionalReveal.js

@@ -4,7 +4,11 @@ import TextInput from '@digigov/ui/core/TextInput';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "contact-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "contact-hint"
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   checked: true,
   name: "email",
   value: "email"

package/esm/core/Checkboxes/__stories__/Default.js

@@ -3,7 +3,11 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "feeling-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/esm/core/Checkboxes/__stories__/MultipleQuestions.js

@@ -3,9 +3,13 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, {
   size: "s"
-}, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+}, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "feeling-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/esm/core/Checkboxes/__stories__/NoneAnswer.js

@@ -3,7 +3,11 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__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(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "travel-hint"
+}, /*#__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, {
+  id: "travel-hint"
+}, "\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(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/esm/core/Checkboxes/__stories__/NoneAnswerWithError.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
+import ErrorMessage from '@digigov/react-core/ErrorMessage';
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "travel-hint travel-error"
+}, /*#__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, {
+  id: "travel-hint"
+}, "\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, {
+  id: "travel-error"
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2 \u03C3\u03C4\u03B9\u03C2 \u03BF\u03C0\u03BF\u03AF\u03B5\u03C2 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5, \u03AE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \xAB\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2\xBB."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  checked: true,
+  name: "en",
+  value: "en"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fr",
+  value: "fever"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-checkboxes__divider"
+}, "\u03AE"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  checked: true,
+  name: "none",
+  value: "none"
+}, "\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2"))));
+
+export var NoneAnswer = function NoneAnswer() {
+  return _ref;
+};
+export default NoneAnswer;

package/esm/core/Checkboxes/__stories__/WithErrorMessage.js

@@ -7,7 +7,13 @@ import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement(Field, {
   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, {
+  "aria-describedby": "nationality-hint nationality-error"
+}, /*#__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, {
+  id: "nationality-hint"
+}, "\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, {
+  id: "nationality-error"
+}, /*#__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, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/esm/core/Checkboxes/__stories__/WithHint.js

@@ -3,7 +3,11 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B5\u03B8\u03BD\u03B9\u03BA\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\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(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "nationality-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B5\u03B8\u03BD\u03B9\u03BA\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "nationality-hint"
+}, "\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(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0395\u03BB\u03BB\u03B7\u03BD\u03B9\u03BA\u03AE", /*#__PURE__*/React.createElement(Hint, null, "\u03C3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03B1\u03BD\u03BF\u03BC\u03AD\u03BD\u03C9\u03BD \u03B1\u03C0\u03CC\u03B4\u03B7\u03BC\u03C9\u03BD \u03C0\u03BF\u03BB\u03B9\u03C4\u03CE\u03BD")), /*#__PURE__*/React.createElement(CheckboxItem, {

package/esm/core/Checkboxes/checkboxes.mdx

@@ -0,0 +1,54 @@
+---
+id: checkboxes
+title: Checkboxes
+---
+
+
+# Checkboxes
+
+ 
+
+
+```bash
+import Checkboxes from '@digigov/ui/core/Checkboxes';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" 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="core/Checkboxes" 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="core/Checkboxes" 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="core/Checkboxes" story="NoneAnswerWithError.tsx" />
+
+### Error messages
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="WithErrorMessage.tsx" />
+
+## Conditionally revealing a related question
+
+You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
+
+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="core/Checkboxes" story="ConditionalReveal.tsx" />
+
+

package/esm/core/Confirmation/confirmation.mdx

@@ -0,0 +1,19 @@
+---
+id: confirmation
+title: Confirmation
+---
+
+
+# Confirmation
+
+
+ 
+
+
+```bash
+import Confirmation from '@digigov/ui/core/Confirmation';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Confirmation" story="Default.tsx" />

package/esm/core/DateInput/DateInput.stories.js

@@ -4,5 +4,6 @@ export default {
   component: DateInput
 };
 export * from '@digigov/ui/core/DateInput/__stories__/Default';
+export * from '@digigov/ui/core/DateInput/__stories__/MultipleQuestions';
 export * from '@digigov/ui/core/DateInput/__stories__/WithErrorMessage';
 export * from '@digigov/ui/core/DateInput/__stories__/WithErrorMessageForSingleField';

package/esm/core/DateInput/__stories__/Default.js

@@ -3,7 +3,9 @@ import DateInput, { DateInputItem } from '@digigov/ui/core/DateInput';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__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(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\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(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
   name: "day"
 }, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
   name: "month"

package/esm/core/DateInput/__stories__/MultipleQuestions.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import DateInput, { DateInputItem } from '@digigov/ui/core/DateInput';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "m"
+}, "\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(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+
+export var MultipleQuestions = function MultipleQuestions() {
+  return _ref;
+};
+export default MultipleQuestions;

package/esm/core/DateInput/index.mdx

@@ -0,0 +1,34 @@
+---
+id: date-input
+title: DateInput
+---
+
+
+# DateInput
+
+
+ 
+
+
+```bash
+import DateInput from '@digigov/ui/core/DateInput';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/DateInput" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/DateInput" story="MultipleQuestions.tsx" />
+
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story packageName="@digigov/ui" component="core/DateInput" 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="core/DateInput" story="WithErrorMessageForSingleField.tsx" />

package/esm/core/Details/index.mdx

@@ -1,34 +1,18 @@
 ---
-parent: docs/ui/components
+id: details
 title: Details
 ---
 
-## Example
+# Details
 
-```jsx live
-<Details>
-  <DetailsSummary>Help with nationality</DetailsSummary>
-  <DetailsContent>
-    We need to know your nationality so we can work out which elections you’re
-    entitled to vote in. If you cannot provide your nationality, you’ll have to
-    send copies of identity documents through the post.
-  </DetailsContent>
-</Details>
-```
+The details component is a short link that shows more detailed help text when a user clicks on it.
+ 
 
-<br />
 
-## When to use this component
+```bash
+import Details from '@digigov/ui/core/Details';
+``` 
 
-Use the Details component to make a page easier to scan when it contains
-information that only some users will need.
+## How to use
 
-## When not to use this component
-
-Do not use the Details component to hide information that the majority of
-your users should see.
-
-## How it works
-
-The Details component is a short link that expands into a text including some
-extra information, when a user clicks on it.
+<Story packageName="@digigov/ui" component="core/Details" story="Default.tsx" />

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

@@ -7,7 +7,7 @@ import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement(Field, {
   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(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/esm/core/ErrorMessage/index.mdx

@@ -0,0 +1,21 @@
+---
+id: error-message
+title: ErrorMessage
+---
+
+
+# ErrorMessage
+
+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
+
+<Story packageName="@digigov/ui" component="core/ErrorMessage" story="Default.tsx" />
+

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

@@ -13,7 +13,7 @@ var _ref = /*#__PURE__*/React.createElement("div", {
 }, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
   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: "#thisone"
+  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, {
   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, {