@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/form/AutoComplete/index.mdx

@@ -8,19 +8,9 @@ through, select from large collections of options and help services get more con
 
 ## Usage
 
-### How to import
-
-```bash
-import AutoComplete from '@digigov/ui/form/AutoComplete';
-```
-
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="Default.tsx" />
 
 ### AutoComplete with auto select
 
@@ -30,14 +20,6 @@ import AutoComplete from '@digigov/ui/form/AutoComplete';
   story="WithAutoSelect.tsx"
 />
 
-### AutoComplete with inline style
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
-
 ### AutoComplete with default value
 
 <Story
@@ -74,4 +56,15 @@ This is the minimum number of characters that should be entered before the autoc
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="AutoComplete" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["AutoCompleteWrapper",
+  "AutoCompleteStatus",
+  "AutoCompleteStatusWrapper",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

package/form/AutoComplete/utils/index.js

@@ -3,7 +3,8 @@ export var keyCodes = {
   27: 'escape',
   32: 'space',
   38: 'up',
-  40: 'down'
+  40: 'down',
+  8: 'backspace'
 };
 export function isIosDevice() {
   return typeof navigator !== 'undefined' && !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));

package/form/AutoComplete/utils.d.ts

@@ -4,6 +4,7 @@ export declare const keyCodes: {
     32: string;
     38: string;
     40: string;
+    8: string;
 };
 export declare function isIosDevice(): boolean | undefined;
 export declare function isPrintableKeyCode(keyCode: number): boolean;

package/form/Button/index.mdx

@@ -8,10 +8,6 @@ title: 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/form/Button';
-```
-
 ## How to use
 
 ### Default buttons
@@ -110,4 +106,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Button" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 

package/form/Checkbox/index.mdx

@@ -5,10 +5,6 @@ title: Checkbox
 
 # Checkbox
 
-```bash
-import Checkbox from '@digigov/ui/form/Checkbox';
-```
-
 ## How to use
 
 <Story
@@ -82,4 +78,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https:/
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Checkbox" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Checkbox","CheckboxItem"]} /> 

package/form/DateInputContainer/index.mdx

@@ -5,10 +5,6 @@ title: DateInputContainer
 
 # DateInputContainer
 
-```bash
-import DateInputContainer from '@digigov/ui/form/DateInputContainer';
-```
-
 ## How to use
 
 <Story
@@ -45,4 +41,6 @@ If you’re highlighting just one field - either the day, month or year - only s
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="DateInputContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["DateInputContainer","DateInputItem"]} /> 

package/form/ErrorMessage/index.mdx

@@ -8,10 +8,6 @@ title: 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/form/ErrorMessage';
-```
-
 ## How to use
 
 <Story
@@ -22,4 +18,6 @@ import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorMessage" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorMessage"]} /> 

package/form/FileUpload/index.mdx

@@ -5,10 +5,6 @@ title: FileUpload
 
 # FileUpload
 
-```bash
-import FileUpload from '@digigov/ui/form/FileUpload';
-```
-
 ## How to use
 
 <Story
@@ -29,4 +25,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="FileUpload" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["FileUpload", "FileUploadContainer"]} /> 

package/form/RadioContainer/index.mdx

@@ -5,10 +5,6 @@ title: RadioContainer
 
 # RadioContainer
 
-```bash
-import RadioContainer from '@digigov/ui/form/RadioContainer';
-```
-
 ## How to use
 
 <Story
@@ -83,14 +79,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://ww
 
 ## API
 
-### RadioContainer
-
-<PropTypes packageName="@digigov/ui" component="RadioContainer" />
-
-### RadioConditional
-
-<PropTypes packageName="@digigov/ui" component="RadioConditional" />
-
-### RadioItem
+See below for a complete reference to all of the props  available to the components mentioned here.
 
-<PropTypes packageName="@digigov/ui" component="RadioItem" />
+<ComponentProps componentName={["RadioItem","RadioContainer","RadioConditional","ChoiceDividerText"]} /> 

package/form/SelectContainer/index.mdx

@@ -45,4 +45,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SelectContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SelectContainer","SelectOption"]} /> 

package/form/SingleCharacterInputs/index.mdx

@@ -5,10 +5,6 @@ title: SingleCharacterInputs
 
 # SingleCharacterInput
 
-```bash
-import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
-```
-
 ## How to use
 
 <Story
@@ -29,4 +25,6 @@ If you’re highlighting the whole date, style all the fields like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SingleCharacterInputs","SingleCharacterInput"]} /> 

package/form/TextArea/index.mdx

@@ -5,10 +5,6 @@ title: TextArea
 
 # TextArea
 
-```bash
-import TextArea from '@digigov/ui/form/TextArea';
-```
-
 ## How to use
 
 <Story
@@ -73,4 +69,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TextArea" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextArea"]} /> 

package/form/TextInput/TextInput.stories/index.js

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

package/form/TextInput/TextInput.stories.d.ts

@@ -14,5 +14,6 @@ export * from "@digigov/ui/form/TextInput/__stories__/WithHint";
 export * from "@digigov/ui/form/TextInput/__stories__/AskingForNumbers";
 export * from "@digigov/ui/form/TextInput/__stories__/WithErrorMessage";
 export * from "@digigov/ui/form/TextInput/__stories__/DisabledInput";
+export * from "@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue";
 export * from "@digigov/ui/form/TextInput/__stories__/Dense";
 import TextInput from '@digigov/ui/form/TextInput';

package/form/TextInput/__stories__/DisabledInputWithValue/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { LockIcon } from '@digigov/react-icons';
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  size: "md"
+}, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(TextInput, {
+  "aria-describedby": "input-hint",
+  name: "inputext",
+  value: 'Μάριος',
+  disabled: true
+}), /*#__PURE__*/React.createElement(Hint, {
+  id: "input-hint",
+  size: "sm"
+}, /*#__PURE__*/React.createElement(LockIcon, {
+  mr: 1,
+  mb: 1
+}), "\u03A0\u03B5\u03B4\u03AF\u03BF \u03BC\u03CC\u03BD\u03BF \u03B3\u03B9\u03B1 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE")));
+export var DisabledInputWithValue = function DisabledInputWithValue() {
+  return _ref;
+};
+export default DisabledInputWithValue;

package/form/TextInput/__stories__/DisabledInputWithValue/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/form/TextInput/__stories__/DisabledInputWithValue/index.js"
+}

package/form/TextInput/__stories__/DisabledInputWithValue.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DisabledInputWithValue: () => JSX.Element;
+export default DisabledInputWithValue;

package/form/TextInput/index.mdx

@@ -5,10 +5,6 @@ title: TextInput
 
 # TextInput
 
-```bash
-import TextInput from '@digigov/ui/form/TextInput';
-```
-
 ## How to use
 
 <Story
@@ -89,4 +85,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TextInput" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextInput"]} /> 

package/govgr/Footer/index.mdx

@@ -98,4 +98,4 @@ import { Feedback } from '@digigov/ui/govgr/Footer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Footer" />
+See below for a complete reference to all of the props  available to the components mentioned here.

package/i18n/locales/el/index.js

@@ -12,8 +12,8 @@ export default {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
-      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο.',
-      image_size: 'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο.',
+      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+      image_size: 'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',

package/i18n/locales/en/index.js

@@ -12,8 +12,8 @@ export default {
       string: 'This field must be a string',
       email: 'Please enter a valid email address (e-mail).',
       afm: 'The VAT number you entered is incorrect.',
-      file_size: 'File size is larger than allowed.',
-      image_size: 'Image size is larger than allowed.',
+      file_size: 'File size is larger than allowed ({{maxSizeToMb}}Mb).',
+      image_size: 'Image size is larger than allowed ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Fill in a valid mobile phone number.',
       landline: 'Fill in a valid landline phone number.',
       phone_number: 'Fill in a valid phone number.',

package/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v1.2.0-a7ffb5dc
+/** @license Digigov v2.0.0-462194bf
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/layouts/Basic/Bottom/__stories__/Default/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { GovGRFooter } from '@digigov/ui/govgr/Footer';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+import Bottom from '@digigov/ui/layouts/Basic/Bottom';
+var _ref = /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(GovGRLogo, null))), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03B5 \u03B1\u03C5\u03C4\u03CC \u03C4\u03BF \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 \u03C4\u03BF Footer \u03B5\u03C3\u03C9\u03BA\u03BB\u03B5\u03AF\u03B5\u03C4\u03B1\u03B9 \u03BC\u03AD\u03C3\u03B1 \u03C3\u03C4\u03BF Bottom component"))), /*#__PURE__*/React.createElement(Bottom, null, /*#__PURE__*/React.createElement(GovGRFooter, null)));
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/layouts/Basic/Bottom/__stories__/Default/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../../cjs/layouts/Basic/Bottom/__stories__/Default/index.js"
+}

package/layouts/Basic/Bottom/__stories__/Default.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Default: () => JSX.Element;
+export default Default;

package/layouts/Basic/Bottom/index.mdx

@@ -1,41 +1,22 @@
 ---
 id: bottom
 title: Bottom
-parent: docs/ui/components
 ---
 
 # Bottom
 
-import { Bottom } from '@digigov/ui/layouts/Basic';
-
-```jsx live path=layouts/Basic/index.tsx
-import GovGRFooter from '@digigov/ui/govgr/Footer';
-
-function Bottom{
- return (
-    <Bottom>
-        <GovGRFooter />
-    </Bottom>
- )
-}
-export Bottom
-
-```
-
-<br />
-
-## How it works
-
 Use the Bottom component in order to wrap the Footer's components.
 
-<br />
-
-## API
+## How to use
 
-### Properties
-
-<PropsDoc data={Bottom.__doc__} />
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Bottom"
+  story="Default.tsx"
+/>
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Bottom" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Bottom"]} /> 

package/layouts/Basic/Container/__stories__/Default/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+var _ref = /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(GovGRLogo, null))), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, null, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03BC\u03AD\u03C3\u03B1 \u03C3\u03B5 Container"), /*#__PURE__*/React.createElement(Paragraph, null, "\u0397 \u03B5\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE \u03B1\u03C6\u03BF\u03C1\u03AC \u03C3\u03C4\u03B7\u03BD \u0391\u03C4\u03BF\u03BC\u03B9\u03BA\u03AE \u0391\u03BE\u03B9\u03BF\u03BB\u03CC\u03B3\u03B7\u03C3\u03B7 \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CE\u03BD, \u039C\u03B5\u03BB\u03CE\u03BD \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03BF\u03CD \u03BA\u03B1\u03B9 \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0392\u03BF\u03B7\u03B8\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD \u03A0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03BF\u03CD, \u0394\u03B9\u03B5\u03C5\u03B8\u03C5\u03BD\u03C4\u03CE\u03BD, \u03A0\u03C1\u03BF\u03CA\u03C3\u03C4\u03B1\u03BC\u03AD\u03BD\u03C9\u03BD \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE\u03C2 \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1\u03C2 \u03AE \u0395\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03BF\u03CD \u039A\u03AD\u03BD\u03C4\u03C1\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03C0\u03B1\u03C1\u03AD\u03C7\u03BF\u03C5\u03BD \u03B4\u03B9\u03B4\u03B1\u03BA\u03C4\u03B9\u03BA\u03CC \u03AD\u03C1\u03B3\u03BF."))));
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/layouts/Basic/Container/__stories__/Default/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../../cjs/layouts/Basic/Container/__stories__/Default/index.js"
+}

package/layouts/Basic/Container/__stories__/Default.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Default: () => JSX.Element;
+export default Default;

package/layouts/Basic/Container/index.mdx

@@ -0,0 +1,23 @@
+---
+id: container
+title: Container
+---
+
+# Container
+
+Container compoment wraps around other elements, grouping them together. Containers are often used to structure and organize content on a web page.
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Container"
+  story="Default.tsx"
+/>
+
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Container"]} /> 

package/layouts/Basic/Main/__stories__/Default/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+var _ref = /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(GovGRLogo, null))), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 Main"), /*#__PURE__*/React.createElement(Paragraph, null, "\u0397 \u03B5\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE \u03B1\u03C6\u03BF\u03C1\u03AC \u03C3\u03C4\u03B7\u03BD \u0391\u03C4\u03BF\u03BC\u03B9\u03BA\u03AE \u0391\u03BE\u03B9\u03BF\u03BB\u03CC\u03B3\u03B7\u03C3\u03B7 \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CE\u03BD, \u039C\u03B5\u03BB\u03CE\u03BD \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03BF\u03CD \u03BA\u03B1\u03B9 \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0392\u03BF\u03B7\u03B8\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD \u03A0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03BF\u03CD, \u0394\u03B9\u03B5\u03C5\u03B8\u03C5\u03BD\u03C4\u03CE\u03BD, \u03A0\u03C1\u03BF\u03CA\u03C3\u03C4\u03B1\u03BC\u03AD\u03BD\u03C9\u03BD \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE\u03C2 \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1\u03C2 \u03AE \u0395\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03BF\u03CD \u039A\u03AD\u03BD\u03C4\u03C1\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03C0\u03B1\u03C1\u03AD\u03C7\u03BF\u03C5\u03BD \u03B4\u03B9\u03B4\u03B1\u03BA\u03C4\u03B9\u03BA\u03CC \u03AD\u03C1\u03B3\u03BF."))));
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/layouts/Basic/Main/__stories__/Default/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../../cjs/layouts/Basic/Main/__stories__/Default/index.js"
+}

package/layouts/Basic/Main/__stories__/Default.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Default: () => JSX.Element;
+export default Default;

package/layouts/Basic/Main/index.mdx

@@ -1,58 +1,21 @@
 ---
 id: main
 title: Main
-parent: docs/ui/components
 ---
 
-# Main
-
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
-
-function Main{
-    return (
-      <>
-    <Top>
-        <Header>
-          <GovGRLogo />
-          <HeaderTitle>
-            <PhaseBanner>
-              <PhaseBannerTag>ALPHA</PhaseBannerTag>
-            </PhaseBanner>
-          </HeaderTitle>
-        </Header>
-      </Top>
-    <Container>
-        <Main>
-          <Title size="xl">Main content</Title>
-            <Paragraph>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </Paragraph>
-        </Main>
-      </Container>
-      </>
-
- )
-}
-export Main
-
-```
-
-<br />
-
-## How it works
+# How to use
 
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
 
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Main"
+  story="Default.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Main" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Main"]} /> 

package/layouts/Basic/Top/__stories__/Default/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+var _ref = /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(GovGRLogo, null))), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03B5 \u03B1\u03C5\u03C4\u03CC \u03C4\u03BF \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 \u03C4\u03BF \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03C4\u03BF\u03C5 Header \u03B5\u03C3\u03C9\u03BA\u03BB\u03B5\u03AF\u03B5\u03C4\u03B1\u03B9 \u03BC\u03AD\u03C3\u03B1 \u03C3\u03C4\u03BF Top component"))));
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/layouts/Basic/Top/__stories__/Default/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../../cjs/layouts/Basic/Top/__stories__/Default/index.js"
+}

package/layouts/Basic/Top/__stories__/Default.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Default: () => JSX.Element;
+export default Default;