@digigov/ui 0.28.1 → 0.28.3

package/esm/core/Radios/index.mdx

@@ -54,3 +54,17 @@ Error messages should be styled like this:
 
 
 
+
+## API
+
+### RadioContainer
+
+<PropTypes packageName="@digigov/ui" component="RadioContainer" />
+
+### RadioConditional
+
+<PropTypes packageName="@digigov/ui" component="RadioConditional" />
+
+### RadioItem
+
+<PropTypes packageName="@digigov/ui" component="RadioItem" />

package/esm/core/Select/Select.stories.js

@@ -1,7 +1,10 @@
 import Select from "@digigov/ui/core/Select";
 export default {
   title: 'Digigov UI/core/Select',
-  component: Select
+  description: 'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',
+  link: 'https://guide.services.gov.gr/docs/components/select',
+  component: Select,
+  displayName: 'Select'
 };
 export * from './__stories__/Default';
 export * from './__stories__/DisabledInput';

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import Select, { SelectOption } from '@digigov/ui/core/Select';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
   name: "select-list",
   "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/React.createElement(SelectOption, {

package/esm/core/Select/__stories__/DisabledInput.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import Select, { SelectOption } from '@digigov/ui/core/Select';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
   name: "select-list",
   disabled: true,
   "aria-disabled": "true",

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import Select, { SelectOption } from '@digigov/ui/core/Select';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import { Hint } from '@digigov/ui/typography';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03BE\u03B9\u03BC\u03CC\u03BD\u03B7\u03C3\u03B7 \u03C0\u03BF\u03C5 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(Select, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03BE\u03B9\u03BC\u03CC\u03BD\u03B7\u03C3\u03B7 \u03C0\u03BF\u03C5 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(Select, {
   name: "select-list",
   "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/React.createElement(SelectOption, {

package/esm/core/Select/index.js

@@ -1,4 +1,4 @@
-export * from '@digigov/react-core/Select';
+export * from '@digigov/react-core/SelectContainer';
 export * from '@digigov/react-core/SelectOption';
-import Select from '@digigov/react-core/Select';
+import Select from '@digigov/react-core/SelectContainer';
 export default Select;

package/esm/core/Select/index.mdx

@@ -40,3 +40,7 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 
 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SelectContainer" />

package/esm/core/SummaryList/SummaryList.stories.js

@@ -1,8 +1,11 @@
 /* eslint-disable digigov/no-relative-imports */
-import SummaryList from '@digigov/ui/core';
+import SummaryList from '@digigov/ui/core/SummaryList';
 export default {
   title: 'Digigov UI/core/SummaryList',
-  component: SummaryList
+  description: 'Use the summary list to summarise information.',
+  link: 'https://guide.services.gov.gr/docs/components/summary-list',
+  component: SummaryList,
+  displayName: 'SummaryList'
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithActions';

package/esm/core/SummaryList/index.mdx

@@ -30,3 +30,7 @@ This means a screen reader user will hear a meaningful action, like ‘Αλλα
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
 <Story packageName="@digigov/ui" component="core/SummaryList" story="WithoutBorders.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SummaryList" />

package/esm/core/Table/Table.stories.js

@@ -1,8 +1,11 @@
 /* eslint-disable digigov/no-relative-imports */
-import Table from '@digigov/ui/core';
+import Table from '@digigov/ui/core/Table';
 export default {
   title: 'Digigov UI/core/Table',
-  component: Table
+  description: 'Use the table component to make information easier to compare and scan for users.',
+  link: 'https://guide.services.gov.gr/docs/components/table',
+  component: Table,
+  displayName: 'Table'
 };
 export * from './__stories__/Default';
 export * from './__stories__/TableCaptions';

package/esm/core/Table/__stories__/WithFloatingScroll.js

@@ -52,20 +52,6 @@ var _ref2 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/R
   href: "#"
 }, "Dismiss")))));
 
-var _ref3 = /*#__PURE__*/React.createElement(TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
-
-var _ref4 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/React.createElement(Dropdown, {
-  "float": true,
-  align: "left",
-  placement: "bottom"
-}, /*#__PURE__*/React.createElement(DropdownButton, {
-  variant: "link"
-}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
-  href: "#"
-}, "Accept"), /*#__PURE__*/React.createElement(NavVerticalItem, {
-  href: "#"
-}, "Dismiss")))));
-
 export var WithFloatingScroll = function WithFloatingScroll() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableFloatingScroll, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, Object.keys(data[0]).map(function (key) {
     return /*#__PURE__*/React.createElement(TableHeadCell, {
@@ -79,18 +65,6 @@ export var WithFloatingScroll = function WithFloatingScroll() {
         key: key
       }, dt[key]);
     }), _ref2);
-  })))), /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, Object.keys(data[0]).map(function (key) {
-    return /*#__PURE__*/React.createElement(TableHeadCell, {
-      key: key
-    }, labels[key]);
-  }), _ref3)), /*#__PURE__*/React.createElement(TableBody, null, data && data.map(function (dt, index) {
-    return /*#__PURE__*/React.createElement(TableRow, {
-      key: index
-    }, Object.keys(dt).map(function (key) {
-      return /*#__PURE__*/React.createElement(TableDataCell, {
-        key: key
-      }, dt[key]);
-    }), _ref4);
-  }))));
+  })))));
 };
 export default WithFloatingScroll;

package/esm/core/Table/index.js

@@ -7,4 +7,6 @@ export * from '@digigov/react-core/TableHead';
 export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
 export * from '@digigov/react-core/TableNoDataRow';
-export * from '@digigov/ui/core/Table/TableFloatingScroll';
+export * from '@digigov/ui/core/Table/TableFloatingScroll';
+import Table from '@digigov/react-core/Table';
+export default Table;

package/esm/core/Table/index.mdx

@@ -65,4 +65,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 You can read more about the accessibility patterns used in our Table
 implementation in the ARIA Authoring Practices Guide (APG) at 
-[Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Table" />

package/esm/core/Tabs/Tabs.stories.js

@@ -1,6 +1,10 @@
-import Tabs from "@digigov/ui/core";
+import Tabs from "@digigov/ui/core/Tabs";
 export default {
   title: 'Digigov UI/core/Tabs',
-  component: Tabs
+  tags: ["Experimental"],
+  description: "The tabs component lets users navigate between related sections of content, displaying one section at a time.",
+  link: "https://guide.services.gov.gr/docs/components/tabs",
+  component: Tabs,
+  displayName: 'Tabs'
 };
 export * from './__stories__/Default';

package/esm/core/Tabs/index.js

@@ -3,12 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["register", "opened"];
 import { useCallback, useRef } from 'react';
 import Tabs from '@digigov/react-core/Tabs';
-import TabsList from '@digigov/react-core/TabsList';
-import TabsListItem from '@digigov/react-core/TabsListItem';
-import TabsPanel from '@digigov/react-core/TabsPanel';
-import TabsHeading from '@digigov/react-core/TabsHeading';
 import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
-export { Tabs, TabsList, TabsListItem, TabsPanel, TabsHeading };
 export var useTabs = function useTabs() {
   var registeredPanels = useRef({});
   var goTo = useCallback(function (key) {
@@ -54,4 +49,9 @@ export var useTabs = function useTabs() {
     panel: panel
   }, rest);
 };
+export * from '@digigov/react-core/Tabs';
+export * from '@digigov/react-core/TabsList';
+export * from '@digigov/react-core/TabsListItem';
+export * from '@digigov/react-core/TabsPanel';
+export * from '@digigov/react-core/TabsHeading';
 export default Tabs;

package/esm/core/Tabs/index.mdx

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

package/esm/core/TextArea/TextArea.stories.js

@@ -1,7 +1,10 @@
 import TextArea from "@digigov/ui/core/TextArea";
 export default {
   title: 'Digigov UI/core/TextArea',
-  component: TextArea
+  description: "Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.",
+  link: "https://guide.services.gov.gr/docs/components/textarea",
+  component: TextArea,
+  displayName: 'TextArea'
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithHint';

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

@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from "@digigov/ui/core/TextArea";
+import TextArea from '@digigov/ui/core/TextArea';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\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, {
   name: "textarea"

package/esm/core/TextArea/__stories__/DisabledInput.js

@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
 import Field from '@digigov/ui/core/Field';
 import Hint from '@digigov/react-core/Hint';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from "@digigov/ui/core/TextArea";
+import TextArea from '@digigov/ui/core/TextArea';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\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(Hint, null, "\u03A3\u03C4\u03B9\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2 \u03BC\u03B7\u03BD \u03C0\u03C1\u03BF\u03C3\u03B8\u03AD\u03C3\u03B5\u03C4\u03B5 \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03AC \u03AE \u03BF\u03B9\u03BA\u03BF\u03BD\u03BF\u03BC\u03B9\u03BA\u03AC \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1, \u03CC\u03C0\u03C9\u03C2 \u03C4\u03BF \u0391\u039C\u0391 \u03AE \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1 \u03C0\u03B9\u03C3\u03C4\u03C9\u03C4\u03B9\u03BA\u03AE\u03C2 \u03BA\u03AC\u03C1\u03C4\u03B1\u03C2."), /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea",

package/esm/core/TextArea/__stories__/LimitedCharacters.js

@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
 import Field from '@digigov/ui/core/Field';
 import Hint from '@digigov/react-core/Hint';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from "@digigov/ui/core/TextArea";
+import TextArea from '@digigov/ui/core/TextArea';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\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(Hint, null, "\u03A3\u03C4\u03B9\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2 \u03BC\u03B7\u03BD \u03C0\u03C1\u03BF\u03C3\u03B8\u03AD\u03C3\u03B5\u03C4\u03B5 \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03AC \u03AE \u03BF\u03B9\u03BA\u03BF\u03BD\u03BF\u03BC\u03B9\u03BA\u03AC \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1, \u03CC\u03C0\u03C9\u03C2 \u03C4\u03BF \u0391\u039C\u0391 \u03AE \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1 \u03C0\u03B9\u03C3\u03C4\u03C9\u03C4\u03B9\u03BA\u03AE\u03C2 \u03BA\u03AC\u03C1\u03C4\u03B1\u03C2."), /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea"

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

@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react';
 import Field from '@digigov/ui/core/Field';
 import Hint from '@digigov/react-core/Hint';
-import Label from '@digigov/react-core/Label';
-import TextArea from "@digigov/ui/core/TextArea";
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import TextArea from '@digigov/ui/core/TextArea';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, 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(Hint, null, "\u03A3\u03C4\u03B9\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2 \u03BC\u03B7\u03BD \u03C0\u03C1\u03BF\u03C3\u03B8\u03AD\u03C3\u03B5\u03C4\u03B5 \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03AC \u03AE \u03BF\u03B9\u03BA\u03BF\u03BD\u03BF\u03BC\u03B9\u03BA\u03AC \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1, \u03CC\u03C0\u03C9\u03C2 \u03C4\u03BF \u0391\u039C\u0391 \u03AE \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1 \u03C0\u03B9\u03C3\u03C4\u03C9\u03C4\u03B9\u03BA\u03AE\u03C2 \u03BA\u03AC\u03C1\u03C4\u03B1\u03C2."), /*#__PURE__*/React.createElement(TextArea, {
+var _ref = /*#__PURE__*/React.createElement(Field, 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(Hint, null, "\u03A3\u03C4\u03B9\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2 \u03BC\u03B7\u03BD \u03C0\u03C1\u03BF\u03C3\u03B8\u03AD\u03C3\u03B5\u03C4\u03B5 \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03AC \u03AE \u03BF\u03B9\u03BA\u03BF\u03BD\u03BF\u03BC\u03B9\u03BA\u03AC \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1, \u03CC\u03C0\u03C9\u03C2 \u03C4\u03BF \u0391\u039C\u0391 \u03AE \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1 \u03C0\u03B9\u03C3\u03C4\u03C9\u03C4\u03B9\u03BA\u03AE\u03C2 \u03BA\u03AC\u03C1\u03C4\u03B1\u03C2."), /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea"
 })));
 

package/esm/core/TextArea/__stories__/WithDeclaredRows.js

@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
 import Field from '@digigov/ui/core/Field';
 import Hint from '@digigov/react-core/Hint';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from "@digigov/ui/core/TextArea";
+import TextArea from '@digigov/ui/core/TextArea';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\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(Hint, null, "\u03A3\u03C4\u03B9\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2 \u03BC\u03B7\u03BD \u03C0\u03C1\u03BF\u03C3\u03B8\u03AD\u03C3\u03B5\u03C4\u03B5 \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03AC \u03AE \u03BF\u03B9\u03BA\u03BF\u03BD\u03BF\u03BC\u03B9\u03BA\u03AC \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1, \u03CC\u03C0\u03C9\u03C2 \u03C4\u03BF \u0391\u039C\u0391 \u03AE \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1 \u03C0\u03B9\u03C3\u03C4\u03C9\u03C4\u03B9\u03BA\u03AE\u03C2 \u03BA\u03AC\u03C1\u03C4\u03B1\u03C2."), /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea",

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

@@ -1,14 +1,14 @@
-import React from "react";
+import React from 'react';
 import Field from '@digigov/ui/core/Field';
 import Hint from '@digigov/react-core/Hint';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 import ErrorMessage from '@digigov/react-core/ErrorMessage';
-import TextArea from "@digigov/ui/core/TextArea";
+import TextArea from '@digigov/ui/core/TextArea';
 
 var _ref = /*#__PURE__*/React.createElement(Field, {
   error: true
-}, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\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(Hint, null, "\u03A3\u03C4\u03B9\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2 \u03BC\u03B7\u03BD \u03C0\u03C1\u03BF\u03C3\u03B8\u03AD\u03C3\u03B5\u03C4\u03B5 \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03AC \u03AE \u03BF\u03B9\u03BA\u03BF\u03BD\u03BF\u03BC\u03B9\u03BA\u03AC \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1, \u03CC\u03C0\u03C9\u03C2 \u03C4\u03BF \u0391\u039C\u0391 \u03AE \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1 \u03C0\u03B9\u03C3\u03C4\u03C9\u03C4\u03B9\u03BA\u03AE\u03C2 \u03BA\u03AC\u03C1\u03C4\u03B1\u03C2."), /*#__PURE__*/React.createElement(ErrorMessage, null, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF."), /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea",

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

@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
 import Field from '@digigov/ui/core/Field';
 import Hint from '@digigov/react-core/Hint';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from "@digigov/ui/core/TextArea";
+import TextArea from '@digigov/ui/core/TextArea';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\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(Hint, null, "\u03A3\u03C4\u03B9\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2 \u03BC\u03B7\u03BD \u03C0\u03C1\u03BF\u03C3\u03B8\u03AD\u03C3\u03B5\u03C4\u03B5 \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03AC \u03AE \u03BF\u03B9\u03BA\u03BF\u03BD\u03BF\u03BC\u03B9\u03BA\u03AC \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1, \u03CC\u03C0\u03C9\u03C2 \u03C4\u03BF \u0391\u039C\u0391 \u03AE \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1 \u03C0\u03B9\u03C3\u03C4\u03C9\u03C4\u03B9\u03BA\u03AE\u03C2 \u03BA\u03AC\u03C1\u03C4\u03B1\u03C2."), /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea"

package/esm/core/TextArea/index.mdx

@@ -48,3 +48,7 @@ Error messages should be styled like this:
 ### Disabled input
 
 <Story packageName="@digigov/ui" component="core/TextArea" story="DisabledInput.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TextArea" />

package/esm/core/TextInput/TextInput.stories.js

@@ -1,7 +1,10 @@
 import TextInput from "@digigov/ui/core/TextInput";
 export default {
   title: 'Digigov UI/core/TextInput',
-  component: TextInput
+  description: "Use the text input component when you need to let users enter text that’s no longer than a single line.",
+  link: "https://guide.services.gov.gr/docs/components/TextInput",
+  component: TextInput,
+  displayName: 'TextInput'
 };
 export * from './__stories__/Default';
 export * from './__stories__/MultipleQuestions';

package/esm/core/TextInput/__stories__/AskingForNumbers.js

@@ -1,11 +1,11 @@
-import React from "react";
-import TextInput from "@digigov/ui/core/TextInput";
+import React from 'react';
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 import Hint from '@digigov/react-core/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\u0391\u03A6\u039C \u03C0\u03B5\u03BB\u03AC\u03C4\u03B7"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 9 \u03C8\u03B7\u03C6\u03AF\u03B1."), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",

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

@@ -1,10 +1,10 @@
-import React from "react";
-import TextInput from "@digigov/ui/core/TextInput";
+import React from 'react';
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext"

package/esm/core/TextInput/__stories__/DisabledInput.js

@@ -1,11 +1,11 @@
-import React from "react";
-import TextInput from "@digigov/ui/core/TextInput";
+import React from 'react';
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 import Hint from '@digigov/react-core/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\u038C\u03BD\u03BF\u03BC\u03B1 \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(TextInput, {
   name: "inputext",

package/esm/core/TextInput/__stories__/FixedWidths.js

@@ -1,45 +1,45 @@
-import React from "react";
-import TextInput from "@digigov/ui/core/TextInput";
+import React from 'react';
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "20 character width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   characterWidth: 20
 })));
 
-var _ref2 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref2 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "10 character width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   characterWidth: 10
 })));
 
-var _ref3 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref3 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "5 character width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   characterWidth: 5
 })));
 
-var _ref4 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref4 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "4 character width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   characterWidth: 4
 })));
 
-var _ref5 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref5 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "3 character width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   characterWidth: 3
 })));
 
-var _ref6 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref6 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "2 character width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",

package/esm/core/TextInput/__stories__/FluidWidths.js

@@ -1,45 +1,45 @@
-import React from "react";
-import TextInput from "@digigov/ui/core/TextInput";
+import React from 'react';
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "Full width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   cellWidth: "full"
 })));
 
-var _ref2 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref2 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "Three-quarters width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   cellWidth: "three-quarters"
 })));
 
-var _ref3 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref3 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "Two-thirds width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   cellWidth: "two-thirds"
 })));
 
-var _ref4 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref4 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "One-half width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   cellWidth: "one-half"
 })));
 
-var _ref5 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref5 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "One-third width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   cellWidth: "one-third"
 })));
 
-var _ref6 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+var _ref6 = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "s"
 }, "One-quarter width"), /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",

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

@@ -1,9 +1,9 @@
-import React from "react";
-import TextInput from "@digigov/ui/core/TextInput";
+import React from 'react';
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(TextInput, {
+var _ref = /*#__PURE__*/React.createElement(Field, 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, {
   name: "inputext"
 })));
 

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

@@ -1,14 +1,14 @@
-import React from "react";
-import TextInput from "@digigov/ui/core/TextInput";
+import React from 'react';
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 import Hint from '@digigov/react-core/Hint';
-import ErrorMessage from "@digigov/react-core/ErrorMessage";
+import ErrorMessage from '@digigov/react-core/ErrorMessage';
 
 var _ref = /*#__PURE__*/React.createElement(Field, {
   error: true
-}, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03BF\u03B9\u03BF \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C4\u03B7\u03C2 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2;"), /*#__PURE__*/React.createElement(ErrorMessage, 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(TextInput, {
   error: true,