@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-a131264d

package/app/Loader/Loader.stories.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _Loader = _interopRequireDefault(require("@digigov/ui/app/Loader"));
+var _ = _interopRequireDefault(require("./"));
 
-var _Default = require("@digigov/ui/app/Loader/__stories__/Default");
+var _Default = require("./__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -25,7 +25,7 @@ Object.keys(_Default).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov UI/app/CircularProgress',
-  component: _Loader["default"],
+  component: _["default"],
   displayName: 'CircularProgress'
 };
 exports["default"] = _default;

package/app/Loader/Loader.stories.mjs

@@ -0,0 +1,7 @@
+import CircularProgress from "./";
+export default {
+  title: 'Digigov UI/app/CircularProgress',
+  component: CircularProgress,
+  displayName: 'CircularProgress'
+};
+export * from "./__stories__/Default";

package/app/Loader/__stories__/Default.js

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

package/app/Loader/__stories__/Default.mjs

@@ -0,0 +1,9 @@
+import React from 'react';
+import { LoaderContainer, CircularProgress } from "./..";
+
+var _ref = /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/app/Masthead/Masthead.stories.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _Masthead = _interopRequireDefault(require("@digigov/ui/app/Masthead"));
+var _ = _interopRequireDefault(require("./"));
 
-var _Default = require("@digigov/ui/app/Masthead/__stories__/Default");
+var _Default = require("./__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,7 +24,7 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
-var _WithLogo = require("@digigov/ui/app/Masthead/__stories__/WithLogo");
+var _WithLogo = require("./__stories__/WithLogo");
 
 Object.keys(_WithLogo).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -38,7 +38,7 @@ Object.keys(_WithLogo).forEach(function (key) {
   });
 });
 
-var _WithElements = require("@digigov/ui/app/Masthead/__stories__/WithElements");
+var _WithElements = require("./__stories__/WithElements");
 
 Object.keys(_WithElements).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -56,7 +56,7 @@ var _default = {
   description: 'You can use the masthead at the top of the first page of a GOV.GR service, not at internal pages.',
   link: 'https://guide.services.gov.gr/docs/components/masthead',
   defaultWidth: 'lg',
-  component: _Masthead["default"],
+  component: _["default"],
   displayName: 'Masthead'
 };
 exports["default"] = _default;

package/app/Masthead/Masthead.stories.mjs

@@ -0,0 +1,12 @@
+import Masthead from "./";
+export default {
+  title: 'Digigov UI/app/Masthead',
+  description: 'You can use the masthead at the top of the first page of a GOV.GR service, not at internal pages.',
+  link: 'https://guide.services.gov.gr/docs/components/masthead',
+  defaultWidth: 'lg',
+  component: Masthead,
+  displayName: 'Masthead'
+};
+export * from "./__stories__/Default";
+export * from "./__stories__/WithLogo";
+export * from "./__stories__/WithElements";

package/app/Masthead/__stories__/Default.js

@@ -9,15 +9,15 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CallToAction = require("@digigov/ui/form/Button/CallToAction");
+var _CallToAction = require("../../../form/Button/CallToAction");
 
-var _Container = require("@digigov/ui/layouts/Basic/Container");
+var _Container = require("../../../layouts/Basic/Container");
 
-var _Main = require("@digigov/ui/layouts/Basic/Main");
+var _Main = require("../../../layouts/Basic/Main");
 
-var _Masthead = require("@digigov/ui/layouts/Basic/Masthead");
+var _Masthead = require("../../../layouts/Basic/Masthead");
 
-var _Heading = require("@digigov/ui/typography/Heading");
+var _Heading = require("../../../typography/Heading");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Masthead.Masthead, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_Heading.Heading, null, "\u03A3\u03C7\u03B5\u03B4\u03B9\u03AC\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03B1\u03C2, \u03BC\u03B5 \u03C4\u03BF \u03C3\u03C4\u03C5\u03BB \u03C4\u03BF\u03C5 GOV.GR"), /*#__PURE__*/_react["default"].createElement(_Masthead.MastheadBody, null, "\u03A7\u03C1\u03B7\u03C3\u03B9\u03BC\u03BF\u03C0\u03BF\u03B9\u03B5\u03AF\u03C3\u03C4\u03B5 \u03B1\u03C5\u03C4\u03CC\u03BD \u03C4\u03BF\u03BD \u03BF\u03B4\u03B7\u03B3\u03CC \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C6\u03C4\u03B9\u03AC\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03C5\u03BD\u03B5\u03C0\u03AE \u03C3\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C4\u03C5\u03C0\u03B1 \u03C4\u03BF\u03C5 GOV.GR. \u0391\u03C0\u03BF\u03BA\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B3\u03BD\u03CE\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03B7\u03BD \u03AD\u03C1\u03B5\u03C5\u03BD\u03B1 \u03BA\u03B1\u03B9 \u03C4\u03B7\u03BD \u03B5\u03BC\u03C0\u03B5\u03B9\u03C1\u03AF\u03B1 \u03AC\u03BB\u03BB\u03C9\u03BD \u03BF\u03BC\u03AC\u03B4\u03C9\u03BD \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03C6\u03CD\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03C0\u03B1\u03BD\u03AC\u03BB\u03B7\u03C8\u03B7 \u03B5\u03C1\u03B3\u03B1\u03C3\u03B9\u03CE\u03BD \u03C0\u03BF\u03C5 \u03AD\u03C7\u03BF\u03C5\u03BD \u03AE\u03B4\u03B7 \u03B3\u03AF\u03BD\u03B5\u03B9."), /*#__PURE__*/_react["default"].createElement(_CallToAction.CallToAction, {
   href: "#"

package/app/Masthead/__stories__/Default.mjs

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CallToAction } from "../../../form/Button/CallToAction";
+import { Container } from "../../../layouts/Basic/Container";
+import { Main } from "../../../layouts/Basic/Main";
+import { Masthead, MastheadBody } from "../../../layouts/Basic/Masthead";
+import { Heading } from "../../../typography/Heading";
+
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, null, "\u03A3\u03C7\u03B5\u03B4\u03B9\u03AC\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03B1\u03C2, \u03BC\u03B5 \u03C4\u03BF \u03C3\u03C4\u03C5\u03BB \u03C4\u03BF\u03C5 GOV.GR"), /*#__PURE__*/React.createElement(MastheadBody, null, "\u03A7\u03C1\u03B7\u03C3\u03B9\u03BC\u03BF\u03C0\u03BF\u03B9\u03B5\u03AF\u03C3\u03C4\u03B5 \u03B1\u03C5\u03C4\u03CC\u03BD \u03C4\u03BF\u03BD \u03BF\u03B4\u03B7\u03B3\u03CC \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C6\u03C4\u03B9\u03AC\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03C5\u03BD\u03B5\u03C0\u03AE \u03C3\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C4\u03C5\u03C0\u03B1 \u03C4\u03BF\u03C5 GOV.GR. \u0391\u03C0\u03BF\u03BA\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B3\u03BD\u03CE\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03B7\u03BD \u03AD\u03C1\u03B5\u03C5\u03BD\u03B1 \u03BA\u03B1\u03B9 \u03C4\u03B7\u03BD \u03B5\u03BC\u03C0\u03B5\u03B9\u03C1\u03AF\u03B1 \u03AC\u03BB\u03BB\u03C9\u03BD \u03BF\u03BC\u03AC\u03B4\u03C9\u03BD \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03C6\u03CD\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03C0\u03B1\u03BD\u03AC\u03BB\u03B7\u03C8\u03B7 \u03B5\u03C1\u03B3\u03B1\u03C3\u03B9\u03CE\u03BD \u03C0\u03BF\u03C5 \u03AD\u03C7\u03BF\u03C5\u03BD \u03AE\u03B4\u03B7 \u03B3\u03AF\u03BD\u03B5\u03B9."), /*#__PURE__*/React.createElement(CallToAction, {
+  href: "#"
+}, "\u039E\u03B5\u03BA\u03B9\u03BD\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/app/Masthead/__stories__/WithElements.js

@@ -9,21 +9,21 @@ exports["default"] = exports.WithElements = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CallToAction = require("@digigov/ui/form/Button/CallToAction");
+var _CallToAction = require("../../../form/Button/CallToAction");
 
-var _Container = require("@digigov/ui/layouts/Basic/Container");
+var _Container = require("../../../layouts/Basic/Container");
 
-var _Main = require("@digigov/ui/layouts/Basic/Main");
+var _Main = require("../../../layouts/Basic/Main");
 
-var _Masthead = require("@digigov/ui/layouts/Basic/Masthead");
+var _Masthead = require("../../../layouts/Basic/Masthead");
 
-var _Heading = require("@digigov/ui/typography/Heading");
+var _Heading = require("../../../typography/Heading");
 
-var _Hint = _interopRequireDefault(require("@digigov/ui/typography/Hint"));
+var _Hint = _interopRequireDefault(require("../../../typography/Hint"));
 
-var _mineduLogoBase = _interopRequireDefault(require("@digigov/ui/govgr/images/minedu-logo-base64"));
+var _mineduLogoBase = _interopRequireDefault(require("../../../govgr/images/minedu-logo-base64"));
 
-var _Link = _interopRequireDefault(require("@digigov/ui/navigation/Link"));
+var _Link = _interopRequireDefault(require("../../../navigation/Link"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Masthead.Masthead, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_Masthead.MastheadLogo, {
   src: _mineduLogoBase["default"],

package/app/Masthead/__stories__/WithElements.mjs

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CallToAction } from "../../../form/Button/CallToAction";
+import { Container } from "../../../layouts/Basic/Container";
+import { Main } from "../../../layouts/Basic/Main";
+import { Masthead, MastheadBody, MastheadLogo } from "../../../layouts/Basic/Masthead";
+import { Heading } from "../../../typography/Heading";
+import Hint from "../../../typography/Hint";
+import mineduLogo from "../../../govgr/images/minedu-logo-base64";
+import Link from "../../../navigation/Link";
+
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(MastheadLogo, {
+  src: mineduLogo,
+  alt: "minedu logo"
+}), /*#__PURE__*/React.createElement(Heading, null, "\u03A3\u03C7\u03B5\u03B4\u03B9\u03AC\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03B1\u03C2, \u03BC\u03B5 \u03C4\u03BF \u03C3\u03C4\u03C5\u03BB \u03C4\u03BF\u03C5 GOV.GR"), /*#__PURE__*/React.createElement(MastheadBody, null, "\u03A7\u03C1\u03B7\u03C3\u03B9\u03BC\u03BF\u03C0\u03BF\u03B9\u03B5\u03AF\u03C3\u03C4\u03B5 \u03B1\u03C5\u03C4\u03CC\u03BD \u03C4\u03BF\u03BD \u03BF\u03B4\u03B7\u03B3\u03CC \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C6\u03C4\u03B9\u03AC\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03C5\u03BD\u03B5\u03C0\u03AE \u03C3\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C4\u03C5\u03C0\u03B1 \u03C4\u03BF\u03C5 GOV.GR. \u0391\u03C0\u03BF\u03BA\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B3\u03BD\u03CE\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03B7\u03BD \u03AD\u03C1\u03B5\u03C5\u03BD\u03B1 \u03BA\u03B1\u03B9 \u03C4\u03B7\u03BD \u03B5\u03BC\u03C0\u03B5\u03B9\u03C1\u03AF\u03B1 \u03AC\u03BB\u03BB\u03C9\u03BD \u03BF\u03BC\u03AC\u03B4\u03C9\u03BD \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03C6\u03CD\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03C0\u03B1\u03BD\u03AC\u03BB\u03B7\u03C8\u03B7 \u03B5\u03C1\u03B3\u03B1\u03C3\u03B9\u03CE\u03BD \u03C0\u03BF\u03C5 \u03AD\u03C7\u03BF\u03C5\u03BD \u03AE\u03B4\u03B7 \u03B3\u03AF\u03BD\u03B5\u03B9. ", /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03C1\u03BF\u03C4\u03B5\u03AF\u03BD\u03B5\u03C4\u03B5 \u03B2\u03B5\u03BB\u03C4\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2.")), /*#__PURE__*/React.createElement(Hint, null, "\u03A4\u03B5\u03BB\u03B5\u03C5\u03C4\u03B1\u03AF\u03B1 \u03B5\u03BD\u03B7\u03BC\u03AD\u03C1\u03C9\u03C3\u03B7: 08/12/2021"), /*#__PURE__*/React.createElement(CallToAction, {
+  href: "#"
+}, "\u039E\u03B5\u03BA\u03B9\u03BD\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE"))));
+
+export var WithElements = function WithElements() {
+  return _ref;
+};
+export default WithElements;

package/app/Masthead/__stories__/WithLogo.js

@@ -9,17 +9,17 @@ exports["default"] = exports.WithLogo = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CallToAction = require("@digigov/ui/form/Button/CallToAction");
+var _CallToAction = require("../../../form/Button/CallToAction");
 
-var _Container = require("@digigov/ui/layouts/Basic/Container");
+var _Container = require("../../../layouts/Basic/Container");
 
-var _Main = require("@digigov/ui/layouts/Basic/Main");
+var _Main = require("../../../layouts/Basic/Main");
 
-var _Masthead = require("@digigov/ui/layouts/Basic/Masthead");
+var _Masthead = require("../../../layouts/Basic/Masthead");
 
-var _Heading = require("@digigov/ui/typography/Heading");
+var _Heading = require("../../../typography/Heading");
 
-var _mineduLogoBase = _interopRequireDefault(require("@digigov/ui/govgr/images/minedu-logo-base64"));
+var _mineduLogoBase = _interopRequireDefault(require("../../../govgr/images/minedu-logo-base64"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Masthead.Masthead, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_Masthead.MastheadLogo, {
   src: _mineduLogoBase["default"],

package/app/Masthead/__stories__/WithLogo.mjs

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CallToAction } from "../../../form/Button/CallToAction";
+import { Container } from "../../../layouts/Basic/Container";
+import { Main } from "../../../layouts/Basic/Main";
+import { Masthead, MastheadBody, MastheadLogo } from "../../../layouts/Basic/Masthead";
+import { Heading } from "../../../typography/Heading";
+import logo3 from "../../../govgr/images/minedu-logo-base64";
+
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(MastheadLogo, {
+  src: logo3,
+  alt: "minedu logo"
+}), /*#__PURE__*/React.createElement(Heading, null, "\u03A3\u03C7\u03B5\u03B4\u03B9\u03AC\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03B1\u03C2, \u03BC\u03B5 \u03C4\u03BF \u03C3\u03C4\u03C5\u03BB \u03C4\u03BF\u03C5 GOV.GR"), /*#__PURE__*/React.createElement(MastheadBody, null, "\u03A7\u03C1\u03B7\u03C3\u03B9\u03BC\u03BF\u03C0\u03BF\u03B9\u03B5\u03AF\u03C3\u03C4\u03B5 \u03B1\u03C5\u03C4\u03CC\u03BD \u03C4\u03BF\u03BD \u03BF\u03B4\u03B7\u03B3\u03CC \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C6\u03C4\u03B9\u03AC\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03C5\u03BD\u03B5\u03C0\u03AE \u03C3\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C4\u03C5\u03C0\u03B1 \u03C4\u03BF\u03C5 GOV.GR. \u0391\u03C0\u03BF\u03BA\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B3\u03BD\u03CE\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03B7\u03BD \u03AD\u03C1\u03B5\u03C5\u03BD\u03B1 \u03BA\u03B1\u03B9 \u03C4\u03B7\u03BD \u03B5\u03BC\u03C0\u03B5\u03B9\u03C1\u03AF\u03B1 \u03AC\u03BB\u03BB\u03C9\u03BD \u03BF\u03BC\u03AC\u03B4\u03C9\u03BD \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03C6\u03CD\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03C0\u03B1\u03BD\u03AC\u03BB\u03B7\u03C8\u03B7 \u03B5\u03C1\u03B3\u03B1\u03C3\u03B9\u03CE\u03BD \u03C0\u03BF\u03C5 \u03AD\u03C7\u03BF\u03C5\u03BD \u03AE\u03B4\u03B7 \u03B3\u03AF\u03BD\u03B5\u03B9."), /*#__PURE__*/React.createElement(CallToAction, {
+  href: "#"
+}, "\u039E\u03B5\u03BA\u03B9\u03BD\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE"))));
+
+export var WithLogo = function WithLogo() {
+  return _ref;
+};
+export default WithLogo;

package/app/Modal/Modal.stories.d.ts

@@ -9,4 +9,6 @@ export default _default;
 export * from "@digigov/ui/app/Modal/__stories__/Default";
 export * from "@digigov/ui/app/Modal/__stories__/AlertDialog";
 export * from "@digigov/ui/app/Modal/__stories__/Dense";
+export * from "@digigov/ui/app/Modal/__stories__/WithHooks";
+export * from "@digigov/ui/app/Modal/__stories__/Auto";
 import Modal from "@digigov/ui/app/Modal";

package/app/Modal/Modal.stories.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _Modal = _interopRequireDefault(require("@digigov/ui/app/Modal"));
+var _ = _interopRequireDefault(require("./"));
 
-var _Default = require("@digigov/ui/app/Modal/__stories__/Default");
+var _Default = require("./__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,7 +24,7 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
-var _AlertDialog = require("@digigov/ui/app/Modal/__stories__/AlertDialog");
+var _AlertDialog = require("./__stories__/AlertDialog");
 
 Object.keys(_AlertDialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -38,7 +38,7 @@ Object.keys(_AlertDialog).forEach(function (key) {
   });
 });
 
-var _Dense = require("@digigov/ui/app/Modal/__stories__/Dense");
+var _Dense = require("./__stories__/Dense");
 
 Object.keys(_Dense).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -51,11 +51,39 @@ Object.keys(_Dense).forEach(function (key) {
     }
   });
 });
+
+var _WithHooks = require("./__stories__/WithHooks");
+
+Object.keys(_WithHooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithHooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithHooks[key];
+    }
+  });
+});
+
+var _Auto = require("./__stories__/Auto");
+
+Object.keys(_Auto).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Auto[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Auto[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/app/Modal',
   description: 'Use the modal component with caution when you need to provide critical information or ask for a decision.',
   link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
-  component: _Modal["default"],
+  component: _["default"],
   displayName: 'Modal'
 };
 exports["default"] = _default;

package/app/Modal/Modal.stories.mjs

@@ -0,0 +1,13 @@
+import Modal from "./";
+export default {
+  title: 'Digigov UI/app/Modal',
+  description: 'Use the modal component with caution when you need to provide critical information or ask for a decision.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
+  component: Modal,
+  displayName: 'Modal'
+};
+export * from "./__stories__/Default";
+export * from "./__stories__/AlertDialog";
+export * from "./__stories__/Dense";
+export * from "./__stories__/WithHooks";
+export * from "./__stories__/Auto";

package/app/Modal/Modal.stories.playwright.json

@@ -16,6 +16,38 @@
           "title": "Open modal"
         }
       ]
+    },
+    "digigov-ui-app-modal--auto": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button:nth-child(1)"
+              }
+            }
+          ],
+          "id": "dXPG8JfyYmKl",
+          "title": "Click modal"
+        }
+      ]
+    },
+    "digigov-ui-app-modal--with-hooks": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button"
+              }
+            }
+          ],
+          "id": "dRIM_j1o3xe-",
+          "title": "Click modal with hooks"
+        }
+      ]
     }
   }
 }

package/app/Modal/__stories__/AlertDialog.js

@@ -13,21 +13,21 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Modal = require("@digigov/ui/app/Modal");
+var _ = require("./..");
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("../../../form/Button");
 
-var _Paragraph = require("@digigov/ui/typography/Paragraph");
+var _Paragraph = require("../../../typography/Paragraph");
 
 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); }
 
 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 _ref = /*#__PURE__*/_react["default"].createElement(_Modal.ModalHeading, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_.ModalHeading, {
   id: "modal-label"
 }, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Modal.ModalContent, {
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_.ModalContent, {
   id: "modal-content"
 }, /*#__PURE__*/_react["default"].createElement(_Paragraph.Paragraph, {
   margin: 0
@@ -48,12 +48,12 @@ var AlertDialog = function AlertDialog() {
     onClick: function onClick() {
       setOpen(!open);
     }
-  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2"), /*#__PURE__*/_react["default"].createElement(_Modal.Modal, {
+  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2"), /*#__PURE__*/_react["default"].createElement(_.Modal, {
     open: open,
     role: "alertdialog",
     "aria-labelledby": "modal-label",
     "aria-describedby": "modal-content"
-  }, _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, _ref3, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  }, _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_.ModalAction, null, _ref3, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     variant: "link",
     onClick: function onClick() {
       setOpen(!open);

package/app/Modal/__stories__/AlertDialog.mjs

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Modal, ModalHeading, ModalContent, ModalAction } from "./..";
+import { Button } from "../../../form/Button";
+import { Paragraph } from "../../../typography/Paragraph";
+
+var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
+  id: "modal-label"
+}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
+
+var _ref2 = /*#__PURE__*/React.createElement(ModalContent, {
+  id: "modal-content"
+}, /*#__PURE__*/React.createElement(Paragraph, {
+  margin: 0
+}, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;"));
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, {
+  color: "warning"
+}, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE");
+
+export var AlertDialog = function AlertDialog() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    color: "warning",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2"), /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    role: "alertdialog",
+    "aria-labelledby": "modal-label",
+    "aria-describedby": "modal-content"
+  }, _ref, _ref2, /*#__PURE__*/React.createElement(ModalAction, null, _ref3, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+};
+export default AlertDialog;

package/app/Modal/__stories__/Auto.d.ts

@@ -0,0 +1,2 @@
+export declare const Auto: () => JSX.Element;
+export default Auto;

package/app/Modal/__stories__/Auto.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Auto = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("./..");
+
+var _Button = require("../../../form/Button");
+
+var _FieldContainer = require("../../../form/FieldContainer");
+
+var _LabelContainer = require("../../../form/LabelContainer");
+
+var _TextInput = require("../../../form/TextInput");
+
+var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_.ModalProvider, null, /*#__PURE__*/_react["default"].createElement(_.ModalButtonAuto, {
+  open: true,
+  modal: "modal-1"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_.ModalAuto, {
+  id: "modal-1",
+  clickOutside: true
+}, /*#__PURE__*/_react["default"].createElement(_.ModalHeading, {
+  id: "modal-label"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_.ModalContent, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
+  margin: 0
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
+  name: "inputext",
+  maxWidth: '10-char'
+})))), /*#__PURE__*/_react["default"].createElement(_.ModalAction, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_.ModalButtonAuto, {
+  modal: "modal-1",
+  close: true,
+  variant: "link"
+}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))), /*#__PURE__*/_react["default"].createElement(_.ModalButtonAuto, {
+  modal: "modal-2",
+  open: true
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_.ModalAuto, {
+  id: "modal-2",
+  closeOnEscape: true
+}, /*#__PURE__*/_react["default"].createElement(_.ModalHeading, {
+  id: "modal-label"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_.ModalContent, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
+  margin: 0
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B9\u03BD\u03B7\u03C4\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
+  name: "inputext",
+  maxWidth: '10-char'
+})))), /*#__PURE__*/_react["default"].createElement(_.ModalAction, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_.ModalButtonAuto, {
+  modal: "modal-2",
+  variant: "link",
+  close: true
+}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7")))));
+
+var Auto = function Auto() {
+  return _ref;
+};
+
+exports.Auto = Auto;
+var _default = Auto;
+exports["default"] = _default;

package/app/Modal/__stories__/Auto.mjs

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ModalAuto, ModalHeading, ModalContent, ModalAction, ModalButtonAuto, ModalProvider } from "./..";
+import { Button } from "../../../form/Button";
+import { FieldContainer } from "../../../form/FieldContainer";
+import { LabelContainer } from "../../../form/LabelContainer";
+import { TextInput } from "../../../form/TextInput";
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ModalProvider, null, /*#__PURE__*/React.createElement(ModalButtonAuto, {
+  open: true,
+  modal: "modal-1"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(ModalAuto, {
+  id: "modal-1",
+  clickOutside: true
+}, /*#__PURE__*/React.createElement(ModalHeading, {
+  id: "modal-label"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(FieldContainer, {
+  margin: 0
+}, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/React.createElement(TextInput, {
+  name: "inputext",
+  maxWidth: '10-char'
+})))), /*#__PURE__*/React.createElement(ModalAction, null, /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"), /*#__PURE__*/React.createElement(ModalButtonAuto, {
+  modal: "modal-1",
+  close: true,
+  variant: "link"
+}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))), /*#__PURE__*/React.createElement(ModalButtonAuto, {
+  modal: "modal-2",
+  open: true
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(ModalAuto, {
+  id: "modal-2",
+  closeOnEscape: true
+}, /*#__PURE__*/React.createElement(ModalHeading, {
+  id: "modal-label"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(FieldContainer, {
+  margin: 0
+}, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B9\u03BD\u03B7\u03C4\u03CC \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/React.createElement(TextInput, {
+  name: "inputext",
+  maxWidth: '10-char'
+})))), /*#__PURE__*/React.createElement(ModalAction, null, /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"), /*#__PURE__*/React.createElement(ModalButtonAuto, {
+  modal: "modal-2",
+  variant: "link",
+  close: true
+}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7")))));
+
+export var Auto = function Auto() {
+  return _ref;
+};
+export default Auto;