@digigov/ui 0.28.3 → 0.29.0

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Fri, 02 Dec 2022 11:20:56 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Jan 2023 13:05:21 GMT and should not be manually modified.
+
+## 0.29.0
+Mon, 16 Jan 2023 13:05:21 GMT
+
+### Minor changes
+
+- Add new NavHorizontalList component
+- Remove Title and Caption from exports
+- Normalize renamed components and their imports
+
+### Patches
+
+- Update the Drawer example in order to use the NavList component
 
 ## 0.28.3
 Fri, 02 Dec 2022 11:20:56 GMT

package/README.md

@@ -1 +0,0 @@
-lalalal

package/admin/AutoComplete/__stories__/Default.js

@@ -9,13 +9,13 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+var _AutoComplete = require("@digigov/ui/admin/AutoComplete");
 
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
 var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
   source: _utils.suggest,
   cellWidth: "one-third",
   id: "govgr"
@@ -23,7 +23,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null,
 
 var _ref2 = /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
-}, "lalal");
+}, "Click");
 
 var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref, _ref2);

package/admin/AutoComplete/__stories__/WithAutoSelect.js

@@ -9,18 +9,18 @@ exports["default"] = exports.WithAutoSelect = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+var _AutoComplete = require("@digigov/ui/admin/AutoComplete");
 
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
 var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
-}, "lalal");
+}, "Click");
 
 var WithAutoSelect = function WithAutoSelect() {
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
     source: _utils.suggest,
     autoselect: true,
     id: "govgr" // tStatusResults={(x, y) => {

package/admin/AutoComplete/__stories__/WithDefaultValue.js

@@ -9,20 +9,20 @@ exports["default"] = exports.WithDefaultValue = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+var _AutoComplete = require("@digigov/ui/admin/AutoComplete");
 
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
 var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
-var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
   source: _utils.suggest,
   autoselect: true,
   defaultValue: "Germany",
   id: "govgr"
 })), /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
-}, "lalal"));
+}, "Click"));
 
 var WithDefaultValue = function WithDefaultValue() {
   return _ref;

package/admin/AutoComplete/__stories__/WithInLine.js

@@ -9,20 +9,20 @@ exports["default"] = exports.WithInLine = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+var _AutoComplete = require("@digigov/ui/admin/AutoComplete");
 
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
 var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
-var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
   source: _utils.suggest,
   autoselect: true,
   displayMenu: "inline",
   id: "govgr"
 })), /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
-}, "lalal"));
+}, "Click"));
 
 var WithInLine = function WithInLine() {
   return _ref;

package/admin/AutoComplete/__stories__/WithMinLength.js

@@ -9,22 +9,22 @@ exports["default"] = exports.WithMinLength = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+var _AutoComplete = require("@digigov/ui/admin/AutoComplete");
 
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
-var _Paragraph = _interopRequireDefault(require("@digigov/ui/typography/Paragraph"));
+var _Paragraph = require("@digigov/ui/typography/Paragraph");
 
 var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
-var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], null, "This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)"), /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Paragraph.Paragraph, null, "This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)"), /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
   source: _utils.suggest,
   autoselect: true,
   minLength: 2,
   id: "govgr"
 })), /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
-}, "lalal"));
+}, "Click"));
 
 var WithMinLength = function WithMinLength() {
   return _ref;

package/admin/AutoComplete/__stories__/WithPlaceHolder.js

@@ -9,20 +9,20 @@ exports["default"] = exports.WithPlaceHolder = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+var _AutoComplete = require("@digigov/ui/admin/AutoComplete");
 
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
 var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
-var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
   source: _utils.suggest,
   autoselect: true,
   placeholder: "Search for a country",
   id: "govgr"
 })), /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
-}, "lalal"));
+}, "Click"));
 
 var WithPlaceHolder = function WithPlaceHolder() {
   return _ref;

package/admin/AutoComplete/__stories__/WithShowAllValues.js

@@ -9,20 +9,20 @@ exports["default"] = exports.WithShowAllValues = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+var _AutoComplete = require("@digigov/ui/admin/AutoComplete");
 
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
 var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
-var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
   source: _utils.suggest,
   autoselect: true,
   showAllValues: true,
   id: "govgr"
 })), /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
-}, "lalal"));
+}, "Click"));
 
 var WithShowAllValues = function WithShowAllValues() {
   return _ref;

package/admin/AutoComplete/index.d.ts

@@ -115,4 +115,4 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     }): void;
     render(): JSX.Element;
 }
-export { AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteNoResult, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteWrapper, AutoCompleteAssistiveHint, };
+export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteNoResult, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteWrapper, AutoCompleteAssistiveHint, };

package/admin/AutoComplete/index.js

@@ -7,6 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.AutoComplete = void 0;
 Object.defineProperty(exports, "AutoCompleteAssistiveHint", {
   enumerable: true,
   get: function get() {
@@ -690,7 +691,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
   return AutoComplete;
 }(_react.Component);
 
-exports["default"] = AutoComplete;
+exports.AutoComplete = exports["default"] = AutoComplete;
 AutoComplete.defaultProps = {
   cellWidth: 'one-third',
   autoselect: false,

package/admin/AutoComplete/index.mdx

@@ -3,40 +3,64 @@ id: autocomplete
 title: AutoComplete
 ---
 
-Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search 
+Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
 through, select from large collections of options and help services get more consistent data.
 
 ## Usage
 
-
 ### How to import
 
 ```bash
 import AutoComplete from '@digigov/ui/admin/AutoComplete';
-``` 
+```
 
 ### AutoComplete
 
-<Story packageName="@digigov/ui" component="admin/AutoComplete" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="admin/AutoComplete"
+  story="Default.tsx"
+/>
 
 ### AutoComplete with auto select
 
-<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithAutoSelect.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="admin/AutoComplete"
+  story="WithAutoSelect.tsx"
+/>
 
 ### AutoComplete with inline style
 
-<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithInLine.tsx" />
-
+<Story
+  packageName="@digigov/ui"
+  component="admin/AutoComplete"
+  story="WithInLine.tsx"
+/>
 
 ### AutoComplete with default value
 
-<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithDefaultValue.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="admin/AutoComplete"
+  story="WithDefaultValue.tsx"
+/>
 
 ### AutoComplete with placeholder
-<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithPlaceHolder.tsx" />
+
+<Story
+  packageName="@digigov/ui"
+  component="admin/AutoComplete"
+  story="WithPlaceHolder.tsx"
+/>
 
 ### AutoComplete with all option's values
-<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithShowAllValues.tsx" />
+
+<Story
+  packageName="@digigov/ui"
+  component="admin/AutoComplete"
+  story="WithShowAllValues.tsx"
+/>
 
 ### AutoComplete with min length
 

package/admin/CircularProgress/CircularProgress.stories.d.ts

@@ -4,5 +4,5 @@ declare namespace _default {
     export const displayName: string;
 }
 export default _default;
-export * from "./__stories__/Default";
+export * from "@digigov/ui/admin/CircularProgress/__stories__/Default";
 import CircularProgress from "@digigov/ui/admin/CircularProgress";

package/admin/CircularProgress/CircularProgress.stories.js

@@ -10,7 +10,7 @@ exports["default"] = void 0;
 
 var _CircularProgress = _interopRequireDefault(require("@digigov/ui/admin/CircularProgress"));
 
-var _Default = require("./__stories__/Default");
+var _Default = require("@digigov/ui/admin/CircularProgress/__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/admin/CircularProgress/__stories__/Default.js

@@ -9,11 +9,11 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _LoaderContainer = _interopRequireDefault(require("@digigov/ui/admin/LoaderContainer"));
+var _LoaderContainer = require("@digigov/ui/admin/LoaderContainer");
 
-var _CircularProgress = _interopRequireDefault(require("@digigov/ui/admin/CircularProgress"));
+var _CircularProgress = require("@digigov/ui/admin/CircularProgress");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_LoaderContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null));
+var _ref = /*#__PURE__*/_react["default"].createElement(_LoaderContainer.LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_CircularProgress.CircularProgress, null));
 
 var Default = function Default() {
   return _ref;

package/admin/CopyToClipboard/__stories__/Banner.js

@@ -9,15 +9,15 @@ exports["default"] = exports.Banner = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _admin = require("@digigov/ui/admin");
+var _CopyToClipboard = require("@digigov/ui/admin/CopyToClipboard");
 
-var _ui = require("@digigov/ui");
+var _Button = require("@digigov/ui/core/Button");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_admin.CopyToClipboard, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_CopyToClipboard.CopyToClipboard, {
   text: "copied-text",
   variant: "banner",
   message: "text successfuly copied!"
-}, /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+}, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   color: "secondary"
 }, "Banner example"));
 

package/admin/CopyToClipboard/__stories__/Default.js

@@ -11,14 +11,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _CopyToClipboard = require("@digigov/ui/admin/CopyToClipboard");
 
-var _ui = require("@digigov/ui");
+var _Button = require("@digigov/ui/core/Button");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_CopyToClipboard.CopyToClipboard, {
   text: "copied-text",
   variant: "tooltip-left",
   message: "text successfuly copied!",
   id: "copy-to-clipboard"
-}, /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+}, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   color: "secondary",
   "aria-describedby": "copy-to-clipboard"
 }, "Copy"));

package/admin/CopyToClipboard/index.mdx

@@ -5,13 +5,17 @@ title: CopyToClipboard
 
 ```bash
 import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
-``` 
+```
 
 ## How to use
 
 ### Default
 
-<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="admin/CopyToClipboard"
+  story="Default.tsx"
+/>
 
 ### Banner
 

package/admin/Drawer/__stories__/Default.js

@@ -13,13 +13,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Drawer = _interopRequireDefault(require("@digigov/ui/admin/Drawer"));
+var _Drawer = require("@digigov/ui/admin/Drawer");
 
-var _List = require("@digigov/ui/core/List");
+var _NavList = require("@digigov/ui/core/NavList");
 
-var _Title = _interopRequireDefault(require("@digigov/ui/typography/Title"));
-
-var _admin = require("@digigov/react-extensions/admin");
+var _Title = require("@digigov/ui/typography/Title");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -38,28 +36,67 @@ function useDrawer() {
   return [open, toggleDrawer];
 }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+var links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }, {
+    name: 'Nav2.4',
+    href: '#',
+    label: 'Nav list item 2.4'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Title.Title, {
   size: "md"
 }, "Menu");
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_List.List, {
-  spaced: true
-}, /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, "List Item 1"), /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, "List Item 2"));
-
 var Default = function Default() {
   var _useDrawer = useDrawer(),
       _useDrawer2 = (0, _slicedToArray2["default"])(_useDrawer, 2),
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
-  return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
     direction: "left",
     open: open
-  }, /*#__PURE__*/_react["default"].createElement(_admin.DrawerHeading, {
+  }, /*#__PURE__*/_react["default"].createElement(_Drawer.DrawerHeading, {
     onClick: function onClick() {
       return toggleDrawer();
     }
-  }, _ref), _ref2);
+  }, _ref), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    links: links,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
+      key: key,
+      name: link.name,
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false'
+    });
+  })));
 };
 
 exports.Default = Default;

package/admin/Drawer/index.mdx

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

package/admin/Dropdown/__stories__/AlignRight.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,29 +9,23 @@ exports["default"] = exports.AlignRight = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
-
-var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
-
-var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
-
-var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
+var _Dropdown = require("@digigov/ui/admin/Dropdown");
 
-var _NavVertical = _interopRequireDefault(require("@digigov/react-core/NavVertical"));
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
-var _LabelTitle = require("@digigov/react-core/LabelTitle");
+var _LabelContainer = require("@digigov/ui/core/LabelContainer");
 
-var _TextInput = _interopRequireDefault(require("@digigov/ui/core/TextInput"));
+var _SectionBreak = require("@digigov/ui/core/SectionBreak");
 
-var _NavVerticalItem = _interopRequireDefault(require("@digigov/react-core/NavVerticalItem"));
+var _NavVertical = require("@digigov/ui/core/NavList/NavVertical");
 
-var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+var _TextInput = require("@digigov/ui/core/TextInput");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _NavVerticalItem = require("@digigov/ui/core/NavList/NavVerticalItem");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _Button = require("@digigov/ui/core/Button");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
   align: "right",
   open: true
 }, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
@@ -44,28 +36,28 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
 }, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
   role: "menu",
   id: "menu2"
-}, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
   role: "menuitem"
-}, /*#__PURE__*/_react["default"].createElement(_LabelContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
-}))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+}))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   visible: true,
   role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_NavVertical["default"], {
+}), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
   role: "menu"
-}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
   role: "menuitem",
   href: "#"
-}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   visible: true,
   role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+}), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   role: "menuitem"
 }, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));