@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/es/form/SingleCharacterInputs/index.js

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/SingleCharacterInputs';
+export * from '@digigov/react-core/SingleCharacterInput';
+import SingleCharacterInputs from '@digigov/react-core/SingleCharacterInputs';
+export default SingleCharacterInputs;

package/es/form/SingleCharacterInputs/index.mdx

@@ -0,0 +1,24 @@
+---
+id: single-character-inputs
+title: SingleCharacterInputs
+---
+
+# SingleCharacterInput
+
+```bash
+import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="Default.tsx" />
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="WithDefaultError.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />

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

@@ -3,10 +3,13 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 import { LabelContainer } from '@digigov/ui/form/LabelContainer';
 import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
+import Hint from '@digigov/ui/typography/Hint';
 
 var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "md"
-}, "\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, {
+}, "\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, {
+  id: "info-hint"
+}, "\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/es/form/TextArea/index.mdx

@@ -11,65 +11,37 @@ import TextArea from '@digigov/ui/form/TextArea';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="Default.tsx" />
 
 ### Use appropriately-sized textareas
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithDeclaredRows.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithDeclaredRows.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="LimitedCharacters.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="LimitedCharacters.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="DisabledInput.tsx" />
 
 ## API
 

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

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

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

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

package/es/form/TextInput/index.mdx

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

package/es/form/index.js

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

package/es/govgr/Footer/index.js

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

package/es/layouts/Admin/index.js

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

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

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

package/es/layouts/Section/index.js

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

package/es/layouts/Stack/Stack.stories.js

@@ -0,0 +1,12 @@
+import Stack from '@digigov/ui/layouts/Stack';
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  displayName: 'Stack'
+};
+export * from '@digigov/ui/layouts/Stack/__stories__/Default';
+export * from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export * from '@digigov/ui/layouts/Stack/__stories__/Row';
+export * from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export * from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export * from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/es/layouts/Stack/__stories__/AlignItems.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "flex-start"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "center"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "flex-end"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "baseline"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "stretch"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")));
+
+export var AlignItems = function AlignItems() {
+  return _ref;
+};
+export default AlignItems;

package/es/layouts/Stack/__stories__/Default.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 2
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 5 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 6 "));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/layouts/Stack/__stories__/JustifyContent.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "flex-start"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "center"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "flex-end"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-between"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-around"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-evenly"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")));
+
+export var JustifyContent = function JustifyContent() {
+  return _ref;
+};
+export default JustifyContent;

package/es/layouts/Stack/__stories__/NoWrap.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 4,
+  direction: "row",
+  flexWrap: "nowrap"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 4 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 5 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 6 "));
+
+export var NoWrap = function NoWrap() {
+  return _ref;
+};
+export default NoWrap;

package/es/layouts/Stack/__stories__/Row.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 2,
+  direction: "row"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 5 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 6 "));
+
+export var Row = function Row() {
+  return _ref;
+};
+export default Row;