@digigov/ui 2.0.0-0edebf87 → 2.0.0-2445d5cb

package/app/Masthead/index.js

@@ -1,5 +1,9 @@
-export * from '@digigov/react-core/Masthead';
-export * from '@digigov/react-core/MastheadBody';
-export * from '@digigov/react-core/MastheadLogo';
-import Masthead from '@digigov/react-core/Masthead';
-export default Masthead;
+export * from "@digigov/react-core/Masthead";
+export * from "@digigov/react-core/MastheadBody";
+export * from "@digigov/react-core/MastheadLogo";
+import Masthead from "@digigov/react-core/Masthead";
+var Masthead_default = Masthead;
+export {
+  Masthead_default as default
+};
+//# sourceMappingURL=index.js.map

package/app/Masthead/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/app/Masthead/index.tsx"],
+  "sourcesContent": ["export * from '@digigov/react-core/Masthead';\nexport * from '@digigov/react-core/MastheadBody';\nexport * from '@digigov/react-core/MastheadLogo';\nimport Masthead from '@digigov/react-core/Masthead';\nexport default Masthead;\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,OAAO,cAAc;AACrB,IAAO,mBAAQ;",
+  "names": []
+}

package/app/Modal/Modal/index.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import ModalContainer from "@digigov/react-core/ModalContainer";
+import useKeypress from "@digigov/ui/utils/hooks/useKeypress";
+const Modal = React.forwardRef(
+  function Modal2({ ...props }, ref) {
+    if (props.open) {
+      return /* @__PURE__ */ React.createElement(ModalBase, { ...props, ref });
+    } else {
+      return null;
+    }
+  }
+);
+const ModalBase = React.forwardRef(
+  function ModalBase2({ open, children, onEscape, ...props }, ref) {
+    const firstModalElement = useRef();
+    const lastModalElement = useRef();
+    const handleFocus = useCallback(() => {
+      firstModalElement.current.focus();
+    }, []);
+    useKeypress("Escape", onEscape);
+    useEffect(() => {
+      const lastModalElementInstance = lastModalElement.current;
+      handleFocus();
+      lastModalElementInstance.addEventListener("focus", handleFocus);
+      return () => {
+        lastModalElementInstance.removeEventListener("focus", handleFocus);
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      ModalContainer,
+      {
+        open,
+        role: "dialog",
+        ref,
+        "aria-hidden": "false",
+        "aria-modal": "true",
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("span", { tabIndex: -1, ref: firstModalElement, "aria-hidden": "true" }),
+      open && children,
+      /* @__PURE__ */ React.createElement("span", { tabIndex: 0, ref: lastModalElement, "aria-hidden": "true" })
+    );
+  }
+);
+var Modal_default = Modal;
+export {
+  Modal,
+  ModalBase,
+  Modal_default as default
+};
+//# sourceMappingURL=Modal.js.map

package/app/Modal/Modal/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/Modal/Modal/index.js"
+}

package/app/Modal/Modal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ModalContainerProps } from '@digigov/react-core/ModalContainer';
+export interface ModalProps extends ModalContainerProps {
+    onEscape?: () => void;
+}
+export declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalBase: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/app/Modal/Modal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/app/Modal/Modal.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef } from 'react';\nimport ModalContainer, {\n  ModalContainerProps,\n} from '@digigov/react-core/ModalContainer';\nimport useKeypress from '@digigov/ui/utils/hooks/useKeypress';\n\nexport interface ModalProps extends ModalContainerProps {\n  onEscape?: () => void;\n}\n\nexport const Modal = React.forwardRef<HTMLDivElement, ModalProps>(\n  function Modal({ ...props }, ref) {\n    if (props.open) {\n      return <ModalBase {...props} ref={ref} />;\n    } else {\n      return null;\n    }\n  }\n);\n\nexport const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(\n  function ModalBase({ open, children, onEscape, ...props }, ref) {\n    const firstModalElement =\n      useRef() as React.MutableRefObject<HTMLSpanElement>;\n    const lastModalElement =\n      useRef() as React.MutableRefObject<HTMLSpanElement>;\n    const handleFocus = useCallback(() => {\n      firstModalElement.current.focus();\n    }, []);\n    useKeypress('Escape', onEscape);\n    useEffect(() => {\n      const lastModalElementInstance = lastModalElement.current;\n      handleFocus();\n      lastModalElementInstance.addEventListener('focus', handleFocus);\n      return () => {\n        lastModalElementInstance.removeEventListener('focus', handleFocus);\n      };\n    }, []);\n    return (\n      <ModalContainer\n        open={open}\n        role=\"dialog\"\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-modal=\"true\"\n        {...props}\n      >\n        <span tabIndex={-1} ref={firstModalElement} aria-hidden=\"true\" />\n        {open && children}\n        <span tabIndex={0} ref={lastModalElement} aria-hidden=\"true\" />\n      </ModalContainer>\n    );\n  }\n);\n\nexport default Modal;\n"],
+  "mappings": "AAAA,OAAO,SAAS,aAAa,WAAW,cAAc;AACtD,OAAO,oBAEA;AACP,OAAO,iBAAiB;AAMjB,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,GAAG,MAAM,GAAG,KAAK;AAChC,QAAI,MAAM,MAAM;AACd,aAAO,oCAAC,aAAW,GAAG,OAAO,KAAU;AAAA,IACzC,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,MAAM,UAAU,UAAU,GAAG,MAAM,GAAG,KAAK;AAC9D,UAAM,oBACJ,OAAO;AACT,UAAM,mBACJ,OAAO;AACT,UAAM,cAAc,YAAY,MAAM;AACpC,wBAAkB,QAAQ,MAAM;AAAA,IAClC,GAAG,CAAC,CAAC;AACL,gBAAY,UAAU,QAAQ;AAC9B,cAAU,MAAM;AACd,YAAM,2BAA2B,iBAAiB;AAClD,kBAAY;AACZ,+BAAyB,iBAAiB,SAAS,WAAW;AAC9D,aAAO,MAAM;AACX,iCAAyB,oBAAoB,SAAS,WAAW;AAAA,MACnE;AAAA,IACF,GAAG,CAAC,CAAC;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,eAAY;AAAA,QACZ,cAAW;AAAA,QACV,GAAG;AAAA;AAAA,MAEJ,oCAAC,UAAK,UAAU,IAAI,KAAK,mBAAmB,eAAY,QAAO;AAAA,MAC9D,QAAQ;AAAA,MACT,oCAAC,UAAK,UAAU,GAAG,KAAK,kBAAkB,eAAY,QAAO;AAAA,IAC/D;AAAA,EAEJ;AACF;AAEA,IAAO,gBAAQ;",
+  "names": ["Modal", "ModalBase"]
+}

package/app/Modal/Modal.stories/index.js

@@ -1,14 +1,24 @@
-import Modal from '@digigov/ui/app/Modal';
-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',
+import Modal from "@digigov/ui/app/Modal";
+var Modal_stories_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'
+  displayName: "Modal"
 };
-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';
-export * from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';
+import { Default } from "@digigov/ui/app/Modal/__stories__/Default";
+import { AlertDialog } from "@digigov/ui/app/Modal/__stories__/AlertDialog";
+import { Dense } from "@digigov/ui/app/Modal/__stories__/Dense";
+import { WithHooks } from "@digigov/ui/app/Modal/__stories__/WithHooks";
+import { Auto } from "@digigov/ui/app/Modal/__stories__/Auto";
+import { WithoutModalGaps } from "@digigov/ui/app/Modal/__stories__/WithoutModalGaps";
+export {
+  AlertDialog,
+  Auto,
+  Default,
+  Dense,
+  WithHooks,
+  WithoutModalGaps,
+  Modal_stories_default as default
+};
+//# sourceMappingURL=Modal.stories.js.map

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

@@ -6,10 +6,10 @@ declare namespace _default {
     export let displayName: string;
 }
 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";
-export * from "@digigov/ui/app/Modal/__stories__/WithoutModalGaps";
+export { Default } from "@digigov/ui/app/Modal/__stories__/Default";
+export { AlertDialog } from "@digigov/ui/app/Modal/__stories__/AlertDialog";
+export { Dense } from "@digigov/ui/app/Modal/__stories__/Dense";
+export { WithHooks } from "@digigov/ui/app/Modal/__stories__/WithHooks";
+export { Auto } from "@digigov/ui/app/Modal/__stories__/Auto";
+export { WithoutModalGaps } from "@digigov/ui/app/Modal/__stories__/WithoutModalGaps";
 import Modal from '@digigov/ui/app/Modal';

package/app/Modal/Modal.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/app/Modal/Modal.stories.js"],
+  "sourcesContent": ["import Modal from '@digigov/ui/app/Modal';\nexport default {\n  title: 'Digigov UI/app/Modal',\n  description:\n    'Use the modal component with caution when you need to provide critical information or ask for a decision.',\n  link:\n    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',\n  component: Modal,\n  displayName: 'Modal',\n};\nexport { Default } from '@digigov/ui/app/Modal/__stories__/Default';\nexport { AlertDialog } from '@digigov/ui/app/Modal/__stories__/AlertDialog';\nexport { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';\nexport { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';\nexport { Auto } from '@digigov/ui/app/Modal/__stories__/Auto';\nexport { WithoutModalGaps } from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MACE;AAAA,EACF,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,wBAAwB;",
+  "names": []
+}

package/app/Modal/__stories__/AlertDialog/index.js

@@ -1,39 +1,48 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
-import { Modal, ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
-import { Button } from '@digigov/ui/form/Button';
-import { Paragraph } from '@digigov/ui/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"))));
+import React, { useState } from "react";
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction
+} from "@digigov/ui/app/Modal";
+import { Button } from "@digigov/ui/form/Button";
+import { Paragraph } from "@digigov/ui/typography/Paragraph";
+const AlertDialog = () => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "warning",
+      onClick: () => {
+        setOpen(!open);
+      }
+    },
+    "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2"
+  ), /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      open,
+      role: "alertdialog",
+      "aria-labelledby": "modal-label",
+      "aria-describedby": "modal-content"
+    },
+    /* @__PURE__ */ React.createElement(ModalHeading, { id: "modal-label" }, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7"),
+    /* @__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;")),
+    /* @__PURE__ */ React.createElement(ModalAction, null, /* @__PURE__ */ React.createElement(Button, { color: "warning" }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "link",
+        onClick: () => {
+          setOpen(!open);
+        }
+      },
+      "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"
+    ))
+  ));
 };
-export default AlertDialog;
+var AlertDialog_default = AlertDialog;
+export {
+  AlertDialog,
+  AlertDialog_default as default
+};
+//# sourceMappingURL=AlertDialog.js.map

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const AlertDialog: () => JSX.Element;
+import React from 'react';
+export declare const AlertDialog: () => React.JSX.Element;
 export default AlertDialog;

package/app/Modal/__stories__/AlertDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/app/Modal/__stories__/AlertDialog.tsx"],
+  "sourcesContent": ["import React, { useState } from 'react';\n\nimport {\n  Modal,\n  ModalHeading,\n  ModalContent,\n  ModalAction,\n} from '@digigov/ui/app/Modal';\n\nimport { Button } from '@digigov/ui/form/Button';\nimport { Paragraph } from '@digigov/ui/typography/Paragraph';\n\nexport const AlertDialog = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <div>\n      <Button\n        color=\"warning\"\n        onClick={() => {\n          setOpen(!open);\n        }}\n      >\n        \u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2\n      </Button>\n      <Modal\n        open={open}\n        role=\"alertdialog\"\n        aria-labelledby=\"modal-label\"\n        aria-describedby=\"modal-content\"\n      >\n        <ModalHeading id=\"modal-label\">\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7</ModalHeading>\n        <ModalContent id=\"modal-content\">\n          <Paragraph margin={0}>\n            \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;\n          </Paragraph>\n        </ModalContent>\n        <ModalAction>\n          <Button color=\"warning\">\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE</Button>\n          <Button\n            variant=\"link\"\n            onClick={() => {\n              setOpen(!open);\n            }}\n          >\n            \u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7\n          </Button>\n        </ModalAction>\n      </Modal>\n    </div>\n  );\n};\n\nexport default AlertDialog;\n"],
+  "mappings": "AAAA,OAAO,SAAS,gBAAgB;AAEhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAEnB,MAAM,cAAc,MAAM;AAC/B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,SACE,oCAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAS,MAAM;AACb,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA;AAAA,IACD;AAAA,EAED,GACA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,mBAAgB;AAAA,MAChB,oBAAiB;AAAA;AAAA,IAEjB,oCAAC,gBAAa,IAAG,iBAAc,oEAAW;AAAA,IAC1C,oCAAC,gBAAa,IAAG,mBACf,oCAAC,aAAU,QAAQ,KAAG,kRAEtB,CACF;AAAA,IACA,oCAAC,mBACC,oCAAC,UAAO,OAAM,aAAU,kDAAQ,GAChC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,kBAAQ,CAAC,IAAI;AAAA,QACf;AAAA;AAAA,MACD;AAAA,IAED,CACF;AAAA,EACF,CACF;AAEJ;AAEA,IAAO,sBAAQ;",
+  "names": []
+}

package/app/Modal/__stories__/Auto/index.js

@@ -1,45 +1,22 @@
-import React from 'react';
-import { ModalAuto, ModalHeading, ModalContent, ModalAction, ModalButtonAuto, ModalProvider } from '@digigov/ui/app/Modal';
-import { Button } from '@digigov/ui/form/Button';
-import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { TextInput } from '@digigov/ui/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;
+import React from "react";
+import {
+  ModalAuto,
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+  ModalButtonAuto,
+  ModalProvider
+} from "@digigov/ui/app/Modal";
+import { Button } from "@digigov/ui/form/Button";
+import { FieldContainer } from "@digigov/ui/form/FieldContainer";
+import { LabelContainer } from "@digigov/ui/form/LabelContainer";
+import { TextInput } from "@digigov/ui/form/TextInput";
+const Auto = () => {
+  return /* @__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 default Auto;
+var Auto_default = Auto;
+export {
+  Auto,
+  Auto_default as default
+};
+//# sourceMappingURL=Auto.js.map

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Auto: () => JSX.Element;
+import React from 'react';
+export declare const Auto: () => React.JSX.Element;
 export default Auto;

package/app/Modal/__stories__/Auto.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/app/Modal/__stories__/Auto.tsx"],
+  "sourcesContent": ["import React from 'react';\n\nimport {\n  ModalAuto,\n  ModalHeading,\n  ModalContent,\n  ModalAction,\n  ModalButtonAuto,\n  ModalProvider,\n} from '@digigov/ui/app/Modal';\n\nimport { Button } from '@digigov/ui/form/Button';\nimport { FieldContainer } from '@digigov/ui/form/FieldContainer';\nimport { LabelContainer } from '@digigov/ui/form/LabelContainer';\nimport { TextInput } from '@digigov/ui/form/TextInput';\nexport const Auto = () => {\n  return (\n    <div>\n      <ModalProvider>\n        <ModalButtonAuto open modal=\"modal-1\">\n          \u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5\n        </ModalButtonAuto>\n        <ModalAuto id=\"modal-1\" clickOutside>\n          <ModalHeading id=\"modal-label\">\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5</ModalHeading>\n          <ModalContent>\n            <FieldContainer margin={0}>\n              <LabelContainer>\n                \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\n                <TextInput name=\"inputext\" maxWidth={'10-char'}></TextInput>\n              </LabelContainer>\n            </FieldContainer>\n          </ModalContent>\n          <ModalAction>\n            <Button>\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE</Button>\n            <ModalButtonAuto modal=\"modal-1\" close variant=\"link\">\n              \u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7\n            </ModalButtonAuto>\n          </ModalAction>\n        </ModalAuto>\n        <ModalButtonAuto modal=\"modal-2\" open>\n          \u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5\n        </ModalButtonAuto>\n        <ModalAuto id=\"modal-2\" closeOnEscape>\n          <ModalHeading id=\"modal-label\">\n            \u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03BA\u03B9\u03BD\u03B7\u03C4\u03BF\u03CD \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5\n          </ModalHeading>\n          <ModalContent>\n            <FieldContainer margin={0}>\n              <LabelContainer>\n                \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\n                <TextInput name=\"inputext\" maxWidth={'10-char'}></TextInput>\n              </LabelContainer>\n            </FieldContainer>\n          </ModalContent>\n          <ModalAction>\n            <Button>\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE</Button>\n            <ModalButtonAuto modal=\"modal-2\" variant=\"link\" close>\n              \u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7\n            </ModalButtonAuto>\n          </ModalAction>\n        </ModalAuto>\n      </ModalProvider>\n    </div>\n  );\n};\n\nexport default Auto;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AACnB,MAAM,OAAO,MAAM;AACxB,SACE,oCAAC,aACC,oCAAC,qBACC,oCAAC,mBAAgB,MAAI,MAAC,OAAM,aAAU,yGAEtC,GACA,oCAAC,aAAU,IAAG,WAAU,cAAY,QAClC,oCAAC,gBAAa,IAAG,iBAAc,yGAAkB,GACjD,oCAAC,oBACC,oCAAC,kBAAe,QAAQ,KACtB,oCAAC,sBAAe,6MAEd,oCAAC,aAAU,MAAK,YAAW,UAAU,WAAW,CAClD,CACF,CACF,GACA,oCAAC,mBACC,oCAAC,cAAO,4CAAO,GACf,oCAAC,mBAAgB,OAAM,WAAU,OAAK,MAAC,SAAQ,UAAO,4CAEtD,CACF,CACF,GACA,oCAAC,mBAAgB,OAAM,WAAU,MAAI,QAAC,oJAEtC,GACA,oCAAC,aAAU,IAAG,WAAU,eAAa,QACnC,oCAAC,gBAAa,IAAG,iBAAc,oJAE/B,GACA,oCAAC,oBACC,oCAAC,kBAAe,QAAQ,KACtB,oCAAC,sBAAe,kPAEd,oCAAC,aAAU,MAAK,YAAW,UAAU,WAAW,CAClD,CACF,CACF,GACA,oCAAC,mBACC,oCAAC,cAAO,4CAAO,GACf,oCAAC,mBAAgB,OAAM,WAAU,SAAQ,QAAO,OAAK,QAAC,4CAEtD,CACF,CACF,CACF,CACF;AAEJ;AAEA,IAAO,eAAQ;",
+  "names": []
+}

package/app/Modal/__stories__/Default/index.js

@@ -1,37 +1,38 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
-import { Modal, ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
-import { Button } from '@digigov/ui/form/Button';
-import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { TextInput } from '@digigov/ui/form/TextInput';
-var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
-  id: "modal-label"
-}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5");
-var _ref2 = /*#__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'
-}))));
-var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
-export var Default = function Default() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      setOpen(!open);
-    }
-  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(Modal, {
-    open: open,
-    "aria-labelledby": "modal-label"
-  }, _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"))));
+import React, { useState } from "react";
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction
+} from "@digigov/ui/app/Modal";
+import { Button } from "@digigov/ui/form/Button";
+import { FieldContainer } from "@digigov/ui/form/FieldContainer";
+import { LabelContainer } from "@digigov/ui/form/LabelContainer";
+import { TextInput } from "@digigov/ui/form/TextInput";
+const Default = () => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: () => {
+        setOpen(!open);
+      }
+    },
+    "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"
+  ), /* @__PURE__ */ React.createElement(Modal, { open, "aria-labelledby": "modal-label" }, /* @__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(
+    Button,
+    {
+      variant: "link",
+      onClick: () => {
+        setOpen(!open);
+      }
+    },
+    "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"
+  ))));
 };
-export default Default;
+var Default_default = Default;
+export {
+  Default,
+  Default_default as default
+};
+//# sourceMappingURL=Default.js.map

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

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

package/app/Modal/__stories__/Default.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/app/Modal/__stories__/Default.tsx"],
+  "sourcesContent": ["import React, { useState } from 'react';\n\nimport {\n  Modal,\n  ModalHeading,\n  ModalContent,\n  ModalAction,\n} from '@digigov/ui/app/Modal';\n\nimport { Button } from '@digigov/ui/form/Button';\nimport { FieldContainer } from '@digigov/ui/form/FieldContainer';\nimport { LabelContainer } from '@digigov/ui/form/LabelContainer';\nimport { TextInput } from '@digigov/ui/form/TextInput';\n\nexport const Default = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <div>\n      <Button\n        onClick={() => {\n          setOpen(!open);\n        }}\n      >\n        \u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5\n      </Button>\n      <Modal open={open} aria-labelledby=\"modal-label\">\n        <ModalHeading id=\"modal-label\">\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5</ModalHeading>\n        <ModalContent>\n          <FieldContainer margin={0}>\n            <LabelContainer>\n              \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\n              <TextInput name=\"inputext\" maxWidth={'10-char'}></TextInput>\n            </LabelContainer>\n          </FieldContainer>\n        </ModalContent>\n        <ModalAction>\n          <Button>\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE</Button>\n          <Button\n            variant=\"link\"\n            onClick={() => {\n              setOpen(!open);\n            }}\n          >\n            \u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7\n          </Button>\n        </ModalAction>\n      </Modal>\n    </div>\n  );\n};\n\nexport default Default;\n"],
+  "mappings": "AAAA,OAAO,SAAS,gBAAgB;AAEhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAEnB,MAAM,UAAU,MAAM;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,SACE,oCAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM;AACb,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA;AAAA,IACD;AAAA,EAED,GACA,oCAAC,SAAM,MAAY,mBAAgB,iBACjC,oCAAC,gBAAa,IAAG,iBAAc,yGAAkB,GACjD,oCAAC,oBACC,oCAAC,kBAAe,QAAQ,KACtB,oCAAC,sBAAe,6MAEd,oCAAC,aAAU,MAAK,YAAW,UAAU,WAAW,CAClD,CACF,CACF,GACA,oCAAC,mBACC,oCAAC,cAAO,4CAAO,GACf;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM;AACb,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA;AAAA,IACD;AAAA,EAED,CACF,CACF,CACF;AAEJ;AAEA,IAAO,kBAAQ;",
+  "names": []
+}

package/app/Modal/__stories__/Dense/index.js

@@ -1,38 +1,38 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
-import { Modal, ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
-import { Button } from '@digigov/ui/form/Button';
-import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { TextInput } from '@digigov/ui/form/TextInput';
-var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
-  id: "modal-label"
-}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5");
-var _ref2 = /*#__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'
-}))));
-var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
-export var Dense = function Dense() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      setOpen(!open);
-    }
-  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(Modal, {
-    open: open,
-    "aria-labelledby": "modal-label",
-    dense: true
-  }, _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"))));
+import React, { useState } from "react";
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction
+} from "@digigov/ui/app/Modal";
+import { Button } from "@digigov/ui/form/Button";
+import { FieldContainer } from "@digigov/ui/form/FieldContainer";
+import { LabelContainer } from "@digigov/ui/form/LabelContainer";
+import { TextInput } from "@digigov/ui/form/TextInput";
+const Dense = () => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: () => {
+        setOpen(!open);
+      }
+    },
+    "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"
+  ), /* @__PURE__ */ React.createElement(Modal, { open, "aria-labelledby": "modal-label", dense: 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(
+    Button,
+    {
+      variant: "link",
+      onClick: () => {
+        setOpen(!open);
+      }
+    },
+    "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"
+  ))));
 };
-export default Dense;
+var Dense_default = Dense;
+export {
+  Dense,
+  Dense_default as default
+};
+//# sourceMappingURL=Dense.js.map

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Dense: () => JSX.Element;
+import React from 'react';
+export declare const Dense: () => React.JSX.Element;
 export default Dense;

package/app/Modal/__stories__/Dense.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/app/Modal/__stories__/Dense.tsx"],
+  "sourcesContent": ["import React, { useState } from 'react';\n\nimport {\n  Modal,\n  ModalHeading,\n  ModalContent,\n  ModalAction,\n} from '@digigov/ui/app/Modal';\n\nimport { Button } from '@digigov/ui/form/Button';\nimport { FieldContainer } from '@digigov/ui/form/FieldContainer';\nimport { LabelContainer } from '@digigov/ui/form/LabelContainer';\nimport { TextInput } from '@digigov/ui/form/TextInput';\n\nexport const Dense = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <div>\n      <Button\n        onClick={() => {\n          setOpen(!open);\n        }}\n      >\n        \u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5\n      </Button>\n      <Modal open={open} aria-labelledby=\"modal-label\" dense>\n        <ModalHeading id=\"modal-label\">\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5</ModalHeading>\n        <ModalContent>\n          <FieldContainer margin={0}>\n            <LabelContainer>\n              \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\n              <TextInput name=\"inputext\" maxWidth={'10-char'}></TextInput>\n            </LabelContainer>\n          </FieldContainer>\n        </ModalContent>\n        <ModalAction>\n          <Button>\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE</Button>\n          <Button\n            variant=\"link\"\n            onClick={() => {\n              setOpen(!open);\n            }}\n          >\n            \u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7\n          </Button>\n        </ModalAction>\n      </Modal>\n    </div>\n  );\n};\n\nexport default Dense;\n"],
+  "mappings": "AAAA,OAAO,SAAS,gBAAgB;AAEhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAEnB,MAAM,QAAQ,MAAM;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,SACE,oCAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM;AACb,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA;AAAA,IACD;AAAA,EAED,GACA,oCAAC,SAAM,MAAY,mBAAgB,eAAc,OAAK,QACpD,oCAAC,gBAAa,IAAG,iBAAc,yGAAkB,GACjD,oCAAC,oBACC,oCAAC,kBAAe,QAAQ,KACtB,oCAAC,sBAAe,6MAEd,oCAAC,aAAU,MAAK,YAAW,UAAU,WAAW,CAClD,CACF,CACF,GACA,oCAAC,mBACC,oCAAC,cAAO,4CAAO,GACf;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM;AACb,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA;AAAA,IACD;AAAA,EAED,CACF,CACF,CACF;AAEJ;AAEA,IAAO,gBAAQ;",
+  "names": []
+}