@pinuts/bsr-uikit-relaunch 0.0.11 → 0.0.13

package/dist/items/eventWizardItems/shared/PickerFieldsetLegend.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _InfoModal = _interopRequireDefault(require("../../../shared/InfoModal/InfoModal.jsx"));
+var _LocationPicker = _interopRequireDefault(require("../../../shared/LocationPicker/LocationPicker.jsx"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PickerFieldsetLegend = props => {
+  const {
+    groupName,
+    headline,
+    infoText,
+    infoButton,
+    locationPicker
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("legend", {
+    id: `selectGroup-${groupName}`
+  }, headline, locationPicker && /*#__PURE__*/_react.default.createElement(_LocationPicker.default, null), infoText && /*#__PURE__*/_react.default.createElement(_InfoModal.default, {
+    headline: headline,
+    infoText: infoText,
+    infoButton: infoButton
+  }));
+};
+PickerFieldsetLegend.propTypes = {
+  groupName: PropTypes.string,
+  headline: PropTypes.string,
+  infoText: PropTypes.string,
+  infoButton: PropTypes.string,
+  locationPicker: PropTypes.bool
+};
+var _default = exports.default = PickerFieldsetLegend;

package/dist/items/eventWizardItems/validations.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=validations.d.ts.map

package/dist/items/eventWizardItems/validations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validations.d.ts","sourceRoot":"","sources":["../../../src/items/eventWizardItems/validations.js"],"names":[],"mappings":""}

package/dist/items/eventWizardItems/validations.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _formBuilder = require("@pinuts/form-builder");
+_formBuilder.jsonLogic.add_operation('isSet', (value, errorMsg) => {
+  // eslint-disable-next-line no-extra-boolean-cast
+  return !!value ? true : errorMsg;
+});

package/dist/items/index.d.ts

@@ -25,5 +25,10 @@ import BootstrapInputGroupField from './BootstrapInputGroupField/BootstrapInputG
 import BSRGridRow from './Grid/BSRGridRow.jsx';
 import BSRGridColumn from './Grid/BSRGridColumn.jsx';
 import BSRGridRowCols from './Grid/BSRGridRowCols.jsx';
-export { Badge, Button, BSRAddressSelector, SubmitButton, DateInputField, DropDownButton, FieldLabel, FormFieldChildPropTypes, FormFieldWrapper, GroupInputField, Icon, FormBuilderIcon, NumberInputField, SelectField, StaticAlert, TextBox, TextAreaField, TextInputField, Toast, ToggleSwitchField, SectionSpinner, ArrayFieldset, FieldsetWrapper, BootstrapInputGroupField, BSRGridRow, BSRGridColumn, BSRGridRowCols };
+import EventPicker from './eventWizardItems/EventPicker/EventPicker.jsx';
+import EventDatePicker from './eventWizardItems/EventDatePicker/EventDatePicker.jsx';
+import FormTitle from './eventWizardItems/FormTitle/FormTitle.jsx';
+import Intro from './eventWizardItems/Intro/Intro.jsx';
+import Required from './eventWizardItems/Required/Required.jsx';
+export { Badge, Button, BSRAddressSelector, SubmitButton, DateInputField, DropDownButton, FieldLabel, FormFieldChildPropTypes, FormFieldWrapper, GroupInputField, Icon, FormBuilderIcon, NumberInputField, SelectField, StaticAlert, TextBox, TextAreaField, TextInputField, Toast, ToggleSwitchField, SectionSpinner, ArrayFieldset, FieldsetWrapper, BootstrapInputGroupField, BSRGridRow, BSRGridColumn, BSRGridRowCols, EventPicker, EventDatePicker, FormTitle, Intro, Required };
 //# sourceMappingURL=index.d.ts.map

package/dist/items/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/items/index.js"],"names":[],"mappings":"kBAIkB,mBAAmB;mBAClB,qBAAqB;+BAHT,6CAA6C;yBAInD,2BAA2B;2BACzB,qCAAqC;2BACrC,qCAAqC;uBACzC,6BAA6B;oCAChB,gDAAgD;6BACvD,yCAAyC;4BAC1C,uCAAuC;iBAClD,oBAAoB;4BACT,iBAAiB;6BAGhB,yCAAyC;wBAC9C,+BAA+B;wBAC/B,+BAA+B;oBAGnC,uBAAuB;0BACjB,mCAAmC;2BAClC,qCAAqC;kBAE9C,mBAAmB;8BACP,2CAA2C;2BAN9C,oCAAoC;0BAQrC,mCAAmC;4BACjC,uCAAuC;qCAL9B,yDAAyD;uBAMvE,uBAAuB;0BACpB,0BAA0B;2BACzB,2BAA2B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/items/index.js"],"names":[],"mappings":"kBAIkB,mBAAmB;mBAClB,qBAAqB;+BAHT,6CAA6C;yBAInD,2BAA2B;2BACzB,qCAAqC;2BACrC,qCAAqC;uBACzC,6BAA6B;oCAChB,gDAAgD;6BACvD,yCAAyC;4BAC1C,uCAAuC;iBAClD,oBAAoB;4BACT,iBAAiB;6BAGhB,yCAAyC;wBAC9C,+BAA+B;wBAC/B,+BAA+B;oBAGnC,uBAAuB;0BACjB,mCAAmC;2BAClC,qCAAqC;kBAE9C,mBAAmB;8BACP,2CAA2C;2BAN9C,oCAAoC;0BAQrC,mCAAmC;4BACjC,uCAAuC;qCAL9B,yDAAyD;uBAMvE,uBAAuB;0BACpB,0BAA0B;2BACzB,2BAA2B;wBAC9B,gDAAgD;4BAC5C,wDAAwD;sBAC9D,4CAA4C;kBAChD,oCAAoC;qBACjC,0CAA0C"}

package/dist/items/index.js

@@ -63,6 +63,18 @@ Object.defineProperty(exports, "DropDownButton", {
     return _DropDownButton.default;
   }
 });
+Object.defineProperty(exports, "EventDatePicker", {
+  enumerable: true,
+  get: function () {
+    return _EventDatePicker.default;
+  }
+});
+Object.defineProperty(exports, "EventPicker", {
+  enumerable: true,
+  get: function () {
+    return _EventPicker.default;
+  }
+});
 Object.defineProperty(exports, "FieldLabel", {
   enumerable: true,
   get: function () {
@@ -93,6 +105,12 @@ Object.defineProperty(exports, "FormFieldWrapper", {
     return _FormFieldWrapper.default;
   }
 });
+Object.defineProperty(exports, "FormTitle", {
+  enumerable: true,
+  get: function () {
+    return _FormTitle.default;
+  }
+});
 Object.defineProperty(exports, "GroupInputField", {
   enumerable: true,
   get: function () {
@@ -105,12 +123,24 @@ Object.defineProperty(exports, "Icon", {
     return _Icon.default;
   }
 });
+Object.defineProperty(exports, "Intro", {
+  enumerable: true,
+  get: function () {
+    return _Intro.default;
+  }
+});
 Object.defineProperty(exports, "NumberInputField", {
   enumerable: true,
   get: function () {
     return _NumberInputField.default;
   }
 });
+Object.defineProperty(exports, "Required", {
+  enumerable: true,
+  get: function () {
+    return _Required.default;
+  }
+});
 Object.defineProperty(exports, "SectionSpinner", {
   enumerable: true,
   get: function () {
@@ -192,5 +222,11 @@ var _FieldsetWrapper = _interopRequireDefault(require("./FieldsetWrapper/Fieldse
 var _BSRGridRow = _interopRequireDefault(require("./Grid/BSRGridRow.jsx"));
 var _BSRGridColumn = _interopRequireDefault(require("./Grid/BSRGridColumn.jsx"));
 var _BSRGridRowCols = _interopRequireDefault(require("./Grid/BSRGridRowCols.jsx"));
+var _EventPicker = _interopRequireDefault(require("./eventWizardItems/EventPicker/EventPicker.jsx"));
+var _EventDatePicker = _interopRequireDefault(require("./eventWizardItems/EventDatePicker/EventDatePicker.jsx"));
+var _FormTitle = _interopRequireDefault(require("./eventWizardItems/FormTitle/FormTitle.jsx"));
+var _Intro = _interopRequireDefault(require("./eventWizardItems/Intro/Intro.jsx"));
+var _Required = _interopRequireDefault(require("./eventWizardItems/Required/Required.jsx"));
+require("./eventWizardItems/validations.js");
 require("../styles/main.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/locales.d.ts

@@ -6,6 +6,20 @@ export namespace resources {
                 let saveButton: string;
                 let okButton: string;
             }
+            namespace general {
+                let client: string;
+                let altLogo: string;
+                let clientLong: string;
+                let close: string;
+                let toTop: string;
+            }
+            namespace modal {
+                namespace aria {
+                    let close_1: string;
+                    export { close_1 as close };
+                    export let open: string;
+                }
+            }
             namespace errorMessages {
                 let mandatory: string;
                 let dateOnlyFuture: string;

package/dist/locales.js

@@ -12,6 +12,19 @@ const resources = exports.resources = {
         saveButton: 'Speichern',
         okButton: 'Ok'
       },
+      general: {
+        client: 'BSR',
+        altLogo: 'BSR Logo',
+        clientLong: 'Berliner Stadtreinigung',
+        close: 'schließen',
+        toTop: 'zum Seitenanfang'
+      },
+      modal: {
+        aria: {
+          close: 'Modal Schließen',
+          open: 'Info Modal öffnen'
+        }
+      },
       errorMessages: {
         mandatory: 'Diese Angabe ist erforderlich!',
         dateOnlyFuture: 'Bitte wählen Sie ein Datum in der Zukunft.',

package/dist/shared/InfoModal/InfoModal.d.ts

@@ -0,0 +1,12 @@
+export default InfoModal;
+declare function InfoModal({ headline, infoText }: {
+    headline: any;
+    infoText: any;
+}): JSX.Element;
+declare namespace InfoModal {
+    namespace propTypes {
+        let headline: any;
+        let infoText: any;
+    }
+}
+//# sourceMappingURL=InfoModal.d.ts.map

package/dist/shared/InfoModal/InfoModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoModal.d.ts","sourceRoot":"","sources":["../../../src/shared/InfoModal/InfoModal.jsx"],"names":[],"mappings":";AAWA;;;gBAsCC"}

package/dist/shared/InfoModal/InfoModal.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
+var _HTMLParserSanitized = require("../../items/HTMLParserSanitized/HTMLParserSanitized.jsx");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// import Close from "../../icons/Close.jsx";
+// import Info from '../../icons/Info.jsx';
+// import { SmallModal } from '../Modal/SmallModal.jsx';
+// import Modal from "../Modal/Modal.jsx";
+// import styles from "../Modal/Modal.module.scss";
+
+const InfoModal = _ref => {
+  let {
+    headline,
+    infoText
+  } = _ref;
+  const [show, setShow] = (0, _react.useState)(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pi-info ml-auto"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    onClick: handleShow,
+    variant: ""
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": true,
+    className: 'sr-only d-none'
+  }, "Erkl\xE4rung"), /*#__PURE__*/_react.default.createElement("i", {
+    className: "pi-icon pi-info ml-2"
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+    show: show,
+    onHide: handleClose,
+    dialogClassName: 'pi-fuehrungen-widget',
+    className: 'pi-fuehrungen-widget',
+    backdropClassName: 'pi-fuehrungen-widget'
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "modal-title"
+  }, headline))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, infoText)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Footer, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "primary",
+    onClick: handleClose
+  }, "Verstanden"))));
+};
+InfoModal.propTypes = {
+  headline: _propTypes.default.string.isRequired,
+  infoText: _propTypes.default.string.isRequired
+};
+var _default = exports.default = InfoModal; // const InfoModal = ({ headline, infoText, infoButton }) => {
+//     const [show, setShow] = useState(false);
+//     const [isModalOpen, setIsModalOpen] = useState(false);
+//     const handleClose = () => setShow(false);
+//     const handleShow = () => setIsModalOpen(true);
+//
+//     const { t } = useTranslation();
+//     console.log('InfoModal', infoText, isModalOpen);
+//
+//     return (
+//         <div className="pi-info ml-auto ">
+//             <button
+//                 onClick={handleShow}
+//                 type={'button'}
+//                 aria-label={t('modal.aria.open')}
+//             >
+//                 {infoButton && <span>{infoButton}</span>}
+//                 <Info stroke="black" fill="black" width={24} height={24} />
+//             </button>
+//             <SmallModal
+//                 show={isModalOpen}
+//                 onClose={() => setIsModalOpen(false)}
+//                 id={''}
+//                 aria-labelledby="toc-button"
+//                 aria-describedby="toc-description"
+//             >
+//                 {/*<Headline id={'modalHeadlineId'} priority="h3" alignment='start' colorVariant='light'*/}
+//                 {/*          className={styles.headlineModal}>*/}
+//                 {/*    {t('components.tableOfContents.title')}*/}
+//                 {/*</Headline>*/}
+//                 <h3>
+//                     {headline}
+//                 </h3>
+//                 <ol className={'styles.orderedList'} id="">
+//                     <HTMLParserSanitized>{infoText}</HTMLParserSanitized>
+//                 </ol>
+//             </SmallModal>
+//         </div>
+//     );
+//
+// };
+// InfoModal.propTypes = {
+//     headline: PropTypes.string.isRequired,
+//     infoText: PropTypes.string.isRequired,
+//     infoButton: PropTypes.string,
+// };
+//
+// export default InfoModal;

package/dist/shared/LocationPicker/LocationPicker.d.ts

@@ -0,0 +1,3 @@
+export default LocationPicker;
+declare function LocationPicker(): JSX.Element;
+//# sourceMappingURL=LocationPicker.d.ts.map

package/dist/shared/LocationPicker/LocationPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocationPicker.d.ts","sourceRoot":"","sources":["../../../src/shared/LocationPicker/LocationPicker.jsx"],"names":[],"mappings":";AAGA,+CAcC"}

package/dist/shared/LocationPicker/LocationPicker.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//FIXME sr-only oder aria-hidden="true"  setzen
+const LocationPicker = () => {
+  return /*#__PURE__*/_react.default.createElement("a", {
+    className: "ml-auto",
+    href: "https://www.bsr.de/recyclinghoefe-20503.php",
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "d-none d-sm-inline-block"
+  }, "Standort in der N\xE4he finden"), /*#__PURE__*/_react.default.createElement("i", {
+    className: "pi-icon pi-icon-location ml-2"
+  }));
+};
+var _default = exports.default = LocationPicker;

package/dist/shared/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+export default Modal;
+declare function Modal({ modalClassNames, modalLabel, showModal, toggleModal, children, }: {
+    modalClassNames?: {
+        modal: string;
+        modalDialog: string;
+        modalContent: string;
+    };
+    modalLabel: any;
+    showModal: any;
+    toggleModal: any;
+    children: any;
+}): JSX.Element;
+declare namespace Modal {
+    namespace propTypes {
+        let modalClassNames: any;
+        let modalLabel: any;
+        let showModal: any;
+        let toggleModal: any;
+        let children: any;
+    }
+}
+//# sourceMappingURL=Modal.d.ts.map

package/dist/shared/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/shared/Modal/Modal.jsx"],"names":[],"mappings":";AASA;;;;;;;;;;gBAqIC"}

package/dist/shared/Modal/Modal.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactI18next = require("react-i18next");
+var _uuid = require("uuid");
+var _ModalModule = _interopRequireDefault(require("./Modal.module.scss"));
+var _Close = _interopRequireDefault(require("../../icons/Close.jsx"));
+var _isWindowAvailable = require("../../utils/isWindowAvailable.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Modal = _ref => {
+  let {
+    modalClassNames = {
+      modal: '',
+      modalDialog: '',
+      modalContent: ''
+    },
+    modalLabel,
+    showModal,
+    toggleModal,
+    children
+  } = _ref;
+  const closeButtonRef = (0, _react.useRef)(null); // Create a ref for the close button
+  const modalRef = (0, _react.useRef)(null);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const currentId = (0, _uuid.v4)();
+  const modalLabelId = `modal-label-${currentId}`;
+  const modalDescriptionId = `modal-description-${currentId}`;
+  const outerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const modalElement = modalRef.current;
+    if (showModal && modalElement) {
+      //add any focusable HTML element you want to include to this string
+      const focusableElements = modalElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      // Set focus on the close button
+      (closeButtonRef.current || null)?.focus();
+      const handleTabKeyPress = event => {
+        if (event.key === 'Tab') {
+          if (event.shiftKey && document.activeElement === firstElement) {
+            event.preventDefault();
+            lastElement.focus();
+          } else if (!event.shiftKey && document.activeElement === lastElement) {
+            event.preventDefault();
+            firstElement.focus();
+          }
+        }
+      };
+      const handleEscapeKeyPress = event => {
+        if (event.key === 'Escape') {
+          toggleModal();
+        }
+      };
+      modalElement.addEventListener('keydown', handleTabKeyPress);
+      modalElement.addEventListener('keydown', handleEscapeKeyPress);
+      (0, _isWindowAvailable.isWindowAvailable)() && document.body.classList.add(_ModalModule.default.modalOpen || '');
+      return () => {
+        modalElement.removeEventListener('keydown', handleTabKeyPress);
+        modalElement.removeEventListener('keydown', handleEscapeKeyPress);
+        (0, _isWindowAvailable.isWindowAvailable)() && document.body.classList.remove(_ModalModule.default.modalOpen || '');
+      };
+    }
+    (0, _isWindowAvailable.isWindowAvailable)() && document.body.classList.remove(_ModalModule.default.modalOpen || '');
+  }, [showModal, toggleModal]);
+  const classNames = {
+    modal: ['modal', _ModalModule.default.modal, modalClassNames.modal].join(' '),
+    modalDialog: ['modal-dialog', 'container', _ModalModule.default.modalDialog, modalClassNames.modalDialog].join(' '),
+    modalContent: ['modal-content', _ModalModule.default.modalContent, modalClassNames.modalContent].join(' '),
+    modalHeader: ['modal-header', 'col-lg-8', 'col-10', 'align-self-center', _ModalModule.default.modalHeader, !modalLabel ? _ModalModule.default.noHeadline : ''].join(' '),
+    modalTitle: ['modal-title'].join(''),
+    modalBody: ['modal-body', 'col-10', 'align-self-center', _ModalModule.default.modalBody].join(' '),
+    closeButton: ['btn', 'close', _ModalModule.default.closeButton].join(' ')
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: outerRef,
+    className: `${showModal ? 'd-flex' : ''} ${classNames.modal}`,
+    onClick: e => {
+      e.stopPropagation();
+      toggleModal();
+    },
+    "aria-labelledby": modalLabel ? modalLabelId : undefined,
+    "aria-describedby": modalDescriptionId,
+    onKeyDown: event => {
+      if (event.key === 'Escape' && showModal) {
+        toggleModal();
+      }
+    },
+    role: "button",
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classNames.modalDialog,
+    ref: modalRef,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": modalLabel ? modalLabelId : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classNames.modalContent,
+    role: "document"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classNames.modalHeader
+  }, modalLabel && /*#__PURE__*/_react.default.createElement("h2", {
+    id: modalLabelId,
+    className: classNames.modalTitle
+  }, modalLabel), /*#__PURE__*/_react.default.createElement("button", {
+    ref: closeButtonRef,
+    type: "button",
+    className: classNames.closeButton,
+    "data-dismiss": "modal",
+    "aria-label": t('aria.atoms.modal.close'),
+    onClick: toggleModal
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true"
+  }, t('general.close')), /*#__PURE__*/_react.default.createElement(_Close.default, {
+    width: 20,
+    height: 20
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    id: modalDescriptionId,
+    className: classNames.modalBody
+  }, children))));
+};
+
+//add prop types
+Modal.propTypes = {
+  modalClassNames: _propTypes.default.object,
+  modalLabel: _propTypes.default.string,
+  showModal: _propTypes.default.bool.isRequired,
+  toggleModal: _propTypes.default.func.isRequired,
+  children: _propTypes.default.node.isRequired
+};
+var _default = exports.default = Modal;

package/dist/shared/Modal/SmallModal.d.ts

@@ -0,0 +1,24 @@
+export default SmallModal;
+declare function SmallModal({ show, onClose, children, id, className, modalLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: {
+    show: any;
+    onClose: any;
+    children: any;
+    id: any;
+    className: any;
+    modalLabel: any;
+    "aria-labelledby": any;
+    "aria-describedby": any;
+}): JSX.Element;
+declare namespace SmallModal {
+    let propTypes: {
+        show: any;
+        onClose: any;
+        children: any;
+        id: any;
+        className: any;
+        modalLabel: any;
+        'aria-labelledby': any;
+        'aria-describedby': any;
+    };
+}
+//# sourceMappingURL=SmallModal.d.ts.map

package/dist/shared/Modal/SmallModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallModal.d.ts","sourceRoot":"","sources":["../../../src/shared/Modal/SmallModal.jsx"],"names":[],"mappings":";AAQA;;;;;;;;;gBA6EC"}

package/dist/shared/Modal/SmallModal.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactI18next = require("react-i18next");
+var _uuid = require("uuid");
+var _ModalModule = _interopRequireDefault(require("./Modal.module.scss"));
+var _Close = _interopRequireDefault(require("../../icons/Close.jsx"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SmallModal = _ref => {
+  let {
+    show,
+    onClose,
+    children,
+    id,
+    className,
+    modalLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const divRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const currentId = (0, _uuid.v4)();
+  const modalLabelId = `small-modal-label-${currentId}`;
+  const modalDescriptionId = `small-modal-description-${currentId}`;
+  (0, _react.useEffect)(() => {
+    if (show) {
+      const handleEscapeKeyPress = event => {
+        if (event.key === 'Escape') {
+          onClose();
+        }
+      };
+      const handleClickOutside = event => {
+        if (contentRef.current && !contentRef.current.contains(event.target)) {
+          onClose();
+        }
+      };
+      document.addEventListener('keydown', handleEscapeKeyPress);
+      document.addEventListener('mousedown', handleClickOutside);
+
+      // Set focus to the modal content when it opens
+      if (contentRef.current) {
+        contentRef.current.focus();
+      }
+      return () => {
+        document.removeEventListener('keydown', handleEscapeKeyPress);
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [show, onClose]);
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: divRef,
+    id: id,
+    className: [className, _ModalModule.default.smallModal].join(' '),
+    "aria-labelledby": ariaLabelledBy || modalLabelId,
+    "aria-describedby": ariaDescribedBy || modalDescriptionId
+  }, modalLabel && /*#__PURE__*/_react.default.createElement("div", {
+    "aria-hidden": true,
+    id: modalLabelId,
+    className: "d-none"
+  }, modalLabel), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: _ModalModule.default.closeButton,
+    "aria-label": t('modal.aria.close'),
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
+    className: _ModalModule.default.closeButtonText
+  }, t('general.close')), /*#__PURE__*/_react.default.createElement(_Close.default, {
+    width: 20,
+    height: 20,
+    stroke: "black",
+    fill: "black"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef,
+    className: _ModalModule.default.content,
+    id: ariaDescribedBy || modalDescriptionId,
+    tabIndex: -1
+  }, children));
+};
+
+// add prop types
+SmallModal.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  children: _propTypes.default.node.isRequired,
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  modalLabel: _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string
+};
+var _default = exports.default = SmallModal;