@onewelcome/react-lib-components 6.7.1 → 7.0.0

package/dist/esm/Layout/FormPage/FormWithStepper/FormWithStepper.esm.js

@@ -1,2 +1,2 @@
-import e from"react";import t from"./FormWithStepper.module.esm.js";const r=({children:r,stepper:m,...a})=>e.createElement("div",{className:`${t["wrapper"]} ${a.className}`,...a},e.createElement("div",{className:t["content"]},m,e.createElement("div",{className:t["form-section"]},r)));export{r as FormWithStepper};
+import e from"react";import t from"./FormWithStepper.module.esm.js";const m=({children:m,stepper:r,...o})=>e.createElement("div",{className:`${t["content"]} ${o.className}`,...o},r,e.createElement("div",{className:t["form-section"]},m));export{m as FormWithStepper};
 //# sourceMappingURL=FormWithStepper.esm.js.map

package/dist/esm/Layout/FormPage/FormWithStepper/FormWithStepper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormWithStepper.esm.js","sources":["../../../../../../../src/components/Layout/FormPage/FormWithStepper/FormWithStepper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { HTMLAttributes, ReactElement } from \"react\";\nimport { Props as FormStepperProps, FormStepper } from \"./FormStepper/FormStepper\";\nimport classes from \"./FormWithStepper.module.scss\";\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  stepper?: ReactElement<FormStepperProps, typeof FormStepper>;\n}\n\nexport const FormWithStepper = ({ children, stepper, ...rest }: Props) => {\n  return (\n    <div className={`${classes[\"wrapper\"]} ${rest.className}`} {...rest}>\n      <div className={classes[\"content\"]}>\n        {stepper}\n        <div className={classes[\"form-section\"]}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["FormWithStepper","children","stepper","rest","React","createElement","className","classes"],"mappings":"oEAwBO,MAAMA,EAAkB,EAAGC,WAAUC,aAAYC,KAEpDC,EAAAC,cAAA,MAAA,CAAKC,UAAW,GAAGC,EAAQ,cAAcJ,EAAKG,eAAiBH,GAC7DC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAQ,YACrBL,EACDE,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAQ,iBAAkBN"}
+{"version":3,"file":"FormWithStepper.esm.js","sources":["../../../../../../../src/components/Layout/FormPage/FormWithStepper/FormWithStepper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { HTMLAttributes, ReactElement } from \"react\";\nimport { Props as FormStepperProps, FormStepper } from \"./FormStepper/FormStepper\";\nimport classes from \"./FormWithStepper.module.scss\";\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  stepper?: ReactElement<FormStepperProps, typeof FormStepper>;\n}\n\nexport const FormWithStepper = ({ children, stepper, ...rest }: Props) => {\n  return (\n    <div className={`${classes[\"content\"]} ${rest.className}`} {...rest}>\n      {stepper}\n      <div className={classes[\"form-section\"]}>{children}</div>\n    </div>\n  );\n};\n"],"names":["FormWithStepper","children","stepper","rest","React","createElement","className","classes"],"mappings":"oEAwBO,MAAMA,EAAkB,EAAGC,WAAUC,aAAYC,KAEpDC,EAAAC,cAAA,MAAA,CAAKC,UAAW,GAAGC,EAAQ,cAAcJ,EAAKG,eAAiBH,GAC5DD,EACDE,EAAKC,cAAA,MAAA,CAAAC,UAAWC,EAAQ,iBAAkBN"}

package/dist/esm/Layout/FormPage/FormWithStepper/FormWithStepper.module.esm.js

@@ -1,2 +1,2 @@
-import I from "../../../../lib/style-inject.js";var l=".FormWithStepper-module_wrapper__j1iyK{font-family:var(--font-family);margin:0 auto;position:relative}.FormWithStepper-module_wrapper__j1iyK .FormWithStepper-module_content__5EN-5{background-color:var(--color-white);display:flex;gap:3.5rem;height:calc(100vh - 13.25rem);overflow:auto;position:relative;scroll-behavior:smooth}.FormWithStepper-module_wrapper__j1iyK .FormWithStepper-module_content__5EN-5 .FormWithStepper-module_form-section__EVbON{display:flex;flex:0 0 72%;flex-direction:column}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvcm1XaXRoU3RlcHBlci5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlQSx1Q0FHRSw4QkFBK0IsQ0FEL0IsYUFBYyxDQURkLGlCQUdGLENBQ0EsOEVBSUUsbUNBQW9DLENBRnBDLFlBQWEsQ0FDYixVQUFXLENBRVgsNkJBQThCLENBQzlCLGFBQWMsQ0FMZCxpQkFBa0IsQ0FNbEIsc0JBQ0YsQ0FDQSwwSEFDRSxZQUFhLENBRWIsWUFBYSxDQURiLHFCQUVGIiwiZmlsZSI6IkZvcm1XaXRoU3RlcHBlci5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi53cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXJnaW46IDAgYXV0bztcbiAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5KTtcbn1cbi53cmFwcGVyIC5jb250ZW50IHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6IDMuNXJlbTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3Itd2hpdGUpO1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAxMy4yNXJlbSk7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbn1cbi53cmFwcGVyIC5jb250ZW50IC5mb3JtLXNlY3Rpb24ge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBmbGV4OiAwIDAgNzIlO1xufSJdfQ== */";var c={wrapper:"FormWithStepper-module_wrapper__j1iyK",content:"FormWithStepper-module_content__5EN-5","form-section":"FormWithStepper-module_form-section__EVbON"};I(l);export{c as default};
+import l from "../../../../lib/style-inject.js";var I=".FormWithStepper-module_content__5EN-5{background-color:var(--color-white);display:flex;font-family:var(--font-family);gap:3.5rem;height:calc(100vh - 13.25rem);margin:0 auto;overflow:auto;position:relative;scroll-behavior:smooth}.FormWithStepper-module_content__5EN-5 .FormWithStepper-module_form-section__EVbON{display:flex;flex:0 0 72%;flex-direction:column}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvcm1XaXRoU3RlcHBlci5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlQSx1Q0FNRSxtQ0FBb0MsQ0FGcEMsWUFBYSxDQUZiLDhCQUErQixDQUcvQixVQUFXLENBRVgsNkJBQThCLENBTjlCLGFBQWMsQ0FPZCxhQUFjLENBTGQsaUJBQWtCLENBTWxCLHNCQUNGLENBQ0EsbUZBQ0UsWUFBYSxDQUViLFlBQWEsQ0FEYixxQkFFRiIsImZpbGUiOiJGb3JtV2l0aFN0ZXBwZXIubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uY29udGVudCB7XG4gIG1hcmdpbjogMCBhdXRvO1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHkpO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogMy41cmVtO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci13aGl0ZSk7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEzLjI1cmVtKTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHNjcm9sbC1iZWhhdmlvcjogc21vb3RoO1xufVxuLmNvbnRlbnQgLmZvcm0tc2VjdGlvbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZsZXg6IDAgMCA3MiU7XG59Il19 */";var g={content:"FormWithStepper-module_content__5EN-5","form-section":"FormWithStepper-module_form-section__EVbON"};l(I);export{g as default};
 //# sourceMappingURL=FormWithStepper.module.esm.js.map

package/dist/esm/Notifications/NotificationProvider/NotificationContext.esm.js

@@ -1,2 +1,2 @@
-import e,{createContext as t,useReducer as s,useContext as a,useCallback as n,useEffect as r}from"react";import{defaultTranslations as i}from"./NotificationService.esm.js";import{useSnackbar as o}from"../Snackbar/useSnackbar.esm.js";import{generateID as d,deepMerge as c}from"../../src/util/helper.esm.js";const l={notifications:[]};const u=({translations:e={},dispatchFn:t})=>{const{enqueueErrorSnackbar:s,enqueueSuccessSnackbar:a}=o();const{state:{notifications:n}}=f();const d=c(i,e);const l=e=>{if(e.message)return e.message;switch(e.status){case 500:return d.messages.general;case 400:return d.messages.badRequest;case 401:return d.messages.unauthorized;case 403:return d.messages.forbidden;case 404:return d.messages.notFound;case 502:case 503:return d.messages.unavailable;case 504:return d.messages.timeout;default:return d.messages.general}};r((()=>{n.forEach((e=>{var n,r;if(e.status&&e.handled&&(e.status===401||e.status===403))t({type:"remove",payload:{id:e.id}});else if(e.status&&!e.handled&&e.type==="error"){s((n=e.title)!==null&&n!==void 0?n:d.general.error,l(e),{onClose:()=>t({type:"remove",payload:{id:e.id}})});t({type:"handled",payload:{id:e.id,handled:true}})}else if(e.title&&!e.handled&&e.type==="success"){a((r=e.title)!==null&&r!==void 0?r:d.general.success,e.message,{onClose:()=>t({type:"remove",payload:{id:e.id}})});t({type:"handled",payload:{id:e.id,handled:true}})}}))}),[n.length]);return null};const p=t({state:l,dispatch:()=>{}});const m=({children:t,translations:a})=>{const[n,r]=s(h,l);return e.createElement(p.Provider,{value:{state:n,dispatch:r}},t,e.createElement(u,{translations:a,dispatchFn:r}))};const f=()=>{const e=a(p);const t=n((t=>{e.dispatch({type:"add",payload:t})}),[e]);const s=n((t=>{e.dispatch({type:"remove",payload:{id:t}})}),[e]);const r=n((()=>{e.dispatch({type:"reset"})}),[e]);return{state:e.state,addNotification:t,removeNotification:s,resetNotifications:r}};const h=(e,t)=>{switch(t.type){case"add":return{...e,notifications:[...e.notifications,{...t.payload,id:d(),handled:false}]};case"remove":return{...e,notifications:e.notifications.filter((e=>{var s;return e.id!==((s=t.payload)===null||s===void 0?void 0:s.id)}))};case"handled":return{...e,notifications:e.notifications.map((e=>{var s;return e.id===((s=t.payload)===null||s===void 0?void 0:s.id)?{...e,handled:true}:e}))};case"reset":return{...e,notifications:[]};default:return e}};export{p as NotificationContext,u as NotificationHandler,m as NotificationProvider,h as notificationReducer,f as useNotificationContext};
+import e,{createContext as t,useReducer as s,useContext as a,useCallback as n,useEffect as i}from"react";import{defaultTranslations as r}from"./NotificationService.esm.js";import{generateID as o,deepMerge as d}from"../../src/util/helper.esm.js";import{useAlert as c}from"../Alert/useAlert.esm.js";const l={notifications:[]};const u=({translations:e={},dispatchFn:t})=>{const{enqueueErrorAlert:s,enqueueSuccessAlert:a}=c();const{state:{notifications:n}}=f();const o=d(r,e);const l=e=>{if(e.message)return e.message;switch(e.status){case 500:return o.messages.general;case 400:return o.messages.badRequest;case 401:return o.messages.unauthorized;case 403:return o.messages.forbidden;case 404:return o.messages.notFound;case 502:case 503:return o.messages.unavailable;case 504:return o.messages.timeout;default:return o.messages.general}};i((()=>{n.forEach((e=>{var n,i;if(e.status&&e.handled&&(e.status===401||e.status===403))t({type:"remove",payload:{id:e.id}});else if(e.status&&!e.handled&&e.type==="error"){s({title:(n=e.title)!==null&&n!==void 0?n:o.general.error,content:l(e),onClose:()=>t({type:"remove",payload:{id:e.id}})});t({type:"handled",payload:{id:e.id,handled:true}})}else if(e.title&&!e.handled&&e.type==="success"){a({title:(i=e.title)!==null&&i!==void 0?i:o.general.success,content:e.message,onClose:()=>t({type:"remove",payload:{id:e.id}})});t({type:"handled",payload:{id:e.id,handled:true}})}}))}),[n.length]);return null};const p=t({state:l,dispatch:()=>{}});const m=({children:t,translations:a})=>{const[n,i]=s(h,l);return e.createElement(p.Provider,{value:{state:n,dispatch:i}},t,e.createElement(u,{translations:a,dispatchFn:i}))};const f=()=>{const e=a(p);const t=n((t=>{e.dispatch({type:"add",payload:t})}),[e]);const s=n((t=>{e.dispatch({type:"remove",payload:{id:t}})}),[e]);const i=n((()=>{e.dispatch({type:"reset"})}),[e]);return{state:e.state,addNotification:t,removeNotification:s,resetNotifications:i}};const h=(e,t)=>{switch(t.type){case"add":return{...e,notifications:[...e.notifications,{...t.payload,id:o(),handled:false}]};case"remove":return{...e,notifications:e.notifications.filter((e=>{var s;return e.id!==((s=t.payload)===null||s===void 0?void 0:s.id)}))};case"handled":return{...e,notifications:e.notifications.map((e=>{var s;return e.id===((s=t.payload)===null||s===void 0?void 0:s.id)?{...e,handled:true}:e}))};case"reset":return{...e,notifications:[]};default:return e}};export{p as NotificationContext,u as NotificationHandler,m as NotificationProvider,h as notificationReducer,f as useNotificationContext};
 //# sourceMappingURL=NotificationContext.esm.js.map

package/dist/esm/Notifications/NotificationProvider/NotificationContext.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationContext.esm.js","sources":["../../../../../../src/components/Notifications/NotificationProvider/NotificationContext.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ReactNode,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer\n} from \"react\";\nimport {\n  Notification,\n  ErrorNotification,\n  SuccessNotification,\n  Translations,\n  AddNotification\n} from \"./notification.interfaces\";\nimport { defaultTranslations } from \"./NotificationService\";\nimport { useSnackbar } from \"../Snackbar/useSnackbar\";\nimport { deepMerge, generateID } from \"../../../util/helper\";\nimport { DeepPartial } from \"../../../interfaces\";\n\ninterface NotificationState {\n  notifications: Notification<ErrorNotification | SuccessNotification>[];\n}\n\nexport interface NotificationAction {\n  type: \"add\" | \"remove\" | \"handled\" | \"reset\";\n  payload?: Notification<ErrorNotification | SuccessNotification> & {\n    id?: string;\n    handled?: boolean;\n  };\n}\n\nconst initialState: NotificationState = {\n  notifications: []\n};\n\nexport interface NotificationHandlerProps {\n  translations?: DeepPartial<Translations>;\n  dispatchFn: React.Dispatch<NotificationAction>;\n}\n\nexport const NotificationHandler = ({\n  translations = {},\n  dispatchFn\n}: NotificationHandlerProps) => {\n  const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();\n  const {\n    state: { notifications }\n  } = useNotificationContext();\n\n  const mergedTranslations = deepMerge<Translations>(defaultTranslations, translations);\n\n  const determineNotificationMessage = (notification: Notification<ErrorNotification>) => {\n    if (notification.message) {\n      return notification.message;\n    }\n\n    switch (notification.status) {\n      case 500:\n        return mergedTranslations.messages.general;\n      case 400:\n        return mergedTranslations.messages.badRequest;\n      case 401:\n        return mergedTranslations.messages.unauthorized;\n      case 403:\n        return mergedTranslations.messages.forbidden;\n      case 404:\n        return mergedTranslations.messages.notFound;\n      case 502:\n      case 503:\n        return mergedTranslations.messages.unavailable;\n      case 504:\n        return mergedTranslations.messages.timeout;\n      default:\n        return mergedTranslations.messages.general;\n    }\n  };\n\n  useEffect(() => {\n    notifications.forEach(notification => {\n      if (\n        notification.status &&\n        notification.handled &&\n        (notification.status === 401 || notification.status === 403)\n      ) {\n        dispatchFn({ type: \"remove\", payload: { id: notification.id } });\n      } else if (notification.status && !notification.handled && notification.type === \"error\") {\n        enqueueErrorSnackbar(\n          notification.title ?? mergedTranslations.general.error,\n          determineNotificationMessage(notification as Notification<ErrorNotification>),\n          {\n            onClose: () => dispatchFn({ type: \"remove\", payload: { id: notification.id } })\n          }\n        );\n        dispatchFn({ type: \"handled\", payload: { id: notification.id, handled: true } });\n      } else if (notification.title && !notification.handled && notification.type === \"success\") {\n        enqueueSuccessSnackbar(\n          notification.title ?? mergedTranslations.general.success,\n          notification.message,\n          {\n            onClose: () => dispatchFn({ type: \"remove\", payload: { id: notification.id } })\n          }\n        );\n\n        dispatchFn({ type: \"handled\", payload: { id: notification.id, handled: true } });\n      }\n    });\n  }, [notifications.length]);\n\n  return null;\n};\n\nexport const NotificationContext = createContext<{\n  state: NotificationState;\n  dispatch: React.Dispatch<NotificationAction>;\n}>({\n  state: initialState,\n  dispatch: () => undefined\n});\n\nexport interface Props {\n  children?: ReactNode;\n  translations?: DeepPartial<Translations>;\n}\n\nexport const NotificationProvider = ({ children, translations }: Props) => {\n  const [state, dispatch] = useReducer(notificationReducer, initialState);\n\n  return (\n    <NotificationContext.Provider value={{ state, dispatch }}>\n      {children}\n      <NotificationHandler translations={translations} dispatchFn={dispatch} />\n    </NotificationContext.Provider>\n  );\n};\n\nexport const useNotificationContext = () => {\n  const ctx = useContext(NotificationContext);\n\n  const addNotification = useCallback(\n    (notification: AddNotification) => {\n      ctx.dispatch({ type: \"add\", payload: notification });\n    },\n    [ctx]\n  );\n\n  const removeNotification = useCallback(\n    (id: string) => {\n      ctx.dispatch({ type: \"remove\", payload: { id } });\n    },\n    [ctx]\n  );\n\n  const resetNotifications = useCallback(() => {\n    ctx.dispatch({ type: \"reset\" });\n  }, [ctx]);\n\n  return {\n    state: ctx.state,\n    addNotification,\n    removeNotification,\n    resetNotifications\n  };\n};\n\nexport const notificationReducer = (\n  state: NotificationState,\n  action: NotificationAction\n): NotificationState => {\n  switch (action.type) {\n    case \"add\":\n      return {\n        ...state,\n        notifications: [\n          ...state.notifications,\n          {\n            ...action.payload,\n            id: generateID(),\n            handled: false\n          }\n        ]\n      };\n    case \"remove\":\n      return {\n        ...state,\n        notifications: state.notifications.filter(\n          notification => notification.id !== action.payload?.id\n        )\n      };\n    case \"handled\":\n      return {\n        ...state,\n        notifications: state.notifications.map(notification =>\n          notification.id === action.payload?.id ? { ...notification, handled: true } : notification\n        )\n      };\n    case \"reset\":\n      return {\n        ...state,\n        notifications: []\n      };\n    default:\n      return state;\n  }\n};\n"],"names":["initialState","notifications","NotificationHandler","translations","dispatchFn","enqueueErrorSnackbar","enqueueSuccessSnackbar","useSnackbar","state","useNotificationContext","mergedTranslations","deepMerge","defaultTranslations","determineNotificationMessage","notification","message","status","messages","general","badRequest","unauthorized","forbidden","notFound","unavailable","timeout","useEffect","forEach","handled","type","payload","id","_a","title","error","onClose","_b","success","length","NotificationContext","createContext","dispatch","NotificationProvider","children","useReducer","notificationReducer","React","createElement","Provider","value","ctx","useContext","addNotification","useCallback","removeNotification","resetNotifications","action","generateID","filter","map"],"mappings":"kTAgDA,MAAMA,EAAkC,CACtCC,cAAe,IAQV,MAAMC,EAAsB,EACjCC,eAAe,CAAE,EACjBC,iBAEA,MAAMC,qBAAEA,EAAoBC,uBAAEA,GAA2BC,IACzD,MACEC,OAAOP,cAAEA,IACPQ,IAEJ,MAAMC,EAAqBC,EAAwBC,EAAqBT,GAExE,MAAMU,EAAgCC,IACpC,GAAIA,EAAaC,QACf,OAAOD,EAAaC,QAGtB,OAAQD,EAAaE,QACnB,KAAK,IACH,OAAON,EAAmBO,SAASC,QACrC,KAAK,IACH,OAAOR,EAAmBO,SAASE,WACrC,KAAK,IACH,OAAOT,EAAmBO,SAASG,aACrC,KAAK,IACH,OAAOV,EAAmBO,SAASI,UACrC,KAAK,IACH,OAAOX,EAAmBO,SAASK,SACrC,KAAK,IACL,KAAK,IACH,OAAOZ,EAAmBO,SAASM,YACrC,KAAK,IACH,OAAOb,EAAmBO,SAASO,QACrC,QACE,OAAOd,EAAmBO,SAASC,QACtC,EAGHO,GAAU,KACRxB,EAAcyB,SAAQZ,YACpB,GACEA,EAAaE,QACbF,EAAaa,UACZb,EAAaE,SAAW,KAAOF,EAAaE,SAAW,KAExDZ,EAAW,CAAEwB,KAAM,SAAUC,QAAS,CAAEC,GAAIhB,EAAagB,WACpD,GAAIhB,EAAaE,SAAWF,EAAaa,SAAWb,EAAac,OAAS,QAAS,CACxFvB,GACE0B,EAAAjB,EAAakB,4BAAStB,EAAmBQ,QAAQe,MACjDpB,EAA6BC,GAC7B,CACEoB,QAAS,IAAM9B,EAAW,CAAEwB,KAAM,SAAUC,QAAS,CAAEC,GAAIhB,EAAagB,QAG5E1B,EAAW,CAAEwB,KAAM,UAAWC,QAAS,CAAEC,GAAIhB,EAAagB,GAAIH,QAAS,OACxE,MAAM,GAAIb,EAAakB,QAAUlB,EAAaa,SAAWb,EAAac,OAAS,UAAW,CACzFtB,GACE6B,EAAArB,EAAakB,SAAS,MAAAG,SAAA,EAAAA,EAAAzB,EAAmBQ,QAAQkB,QACjDtB,EAAaC,QACb,CACEmB,QAAS,IAAM9B,EAAW,CAAEwB,KAAM,SAAUC,QAAS,CAAEC,GAAIhB,EAAagB,QAI5E1B,EAAW,CAAEwB,KAAM,UAAWC,QAAS,CAAEC,GAAIhB,EAAagB,GAAIH,QAAS,OACxE,IACD,GACD,CAAC1B,EAAcoC,SAElB,OAAO,IAAI,EAGN,MAAMC,EAAsBC,EAGhC,CACD/B,MAAOR,EACPwC,SAAU,SAQC,MAAAC,EAAuB,EAAGC,WAAUvC,mBAC/C,MAAOK,EAAOgC,GAAYG,EAAWC,EAAqB5C,GAE1D,OACE6C,EAAAC,cAACR,EAAoBS,SAAQ,CAACC,MAAO,CAAExC,QAAOgC,aAC3CE,EACDG,EAAAC,cAAC5C,EAAmB,CAACC,aAAcA,EAAcC,WAAYoC,IAE/D,EAGG,MAAM/B,EAAyB,KACpC,MAAMwC,EAAMC,EAAWZ,GAEvB,MAAMa,EAAkBC,GACrBtC,IACCmC,EAAIT,SAAS,CAAEZ,KAAM,MAAOC,QAASf,GAAe,GAEtD,CAACmC,IAGH,MAAMI,EAAqBD,GACxBtB,IACCmB,EAAIT,SAAS,CAAEZ,KAAM,SAAUC,QAAS,CAAEC,OAAO,GAEnD,CAACmB,IAGH,MAAMK,EAAqBF,GAAY,KACrCH,EAAIT,SAAS,CAAEZ,KAAM,SAAU,GAC9B,CAACqB,IAEJ,MAAO,CACLzC,MAAOyC,EAAIzC,MACX2C,kBACAE,qBACAC,qBACD,QAGUV,EAAsB,CACjCpC,EACA+C,KAEA,OAAQA,EAAO3B,MACb,IAAK,MACH,MAAO,IACFpB,EACHP,cAAe,IACVO,EAAMP,cACT,IACKsD,EAAO1B,QACVC,GAAI0B,IACJ7B,QAAS,SAIjB,IAAK,SACH,MAAO,IACFnB,EACHP,cAAeO,EAAMP,cAAcwD,QACjC3C,IAAgB,IAAAiB,EAAA,OAAAjB,EAAagB,OAAOC,EAAAwB,EAAO1B,WAAO,MAAAE,SAAA,OAAA,EAAAA,EAAED,GAAE,KAG5D,IAAK,UACH,MAAO,IACFtB,EACHP,cAAeO,EAAMP,cAAcyD,KAAI5C,IAAe,IAAAiB,EACpD,OAAAjB,EAAagB,OAAOC,EAAAwB,EAAO1B,WAAS,MAAAE,SAAA,OAAA,EAAAA,EAAAD,IAAK,IAAKhB,EAAca,QAAS,MAASb,CAAY,KAGhG,IAAK,QACH,MAAO,IACFN,EACHP,cAAe,IAEnB,QACE,OAAOO,EACV"}
+{"version":3,"file":"NotificationContext.esm.js","sources":["../../../../../../src/components/Notifications/NotificationProvider/NotificationContext.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ReactNode,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer\n} from \"react\";\nimport {\n  Notification,\n  ErrorNotification,\n  SuccessNotification,\n  Translations,\n  AddNotification\n} from \"./notification.interfaces\";\nimport { defaultTranslations } from \"./NotificationService\";\nimport { deepMerge, generateID } from \"../../../util/helper\";\nimport { DeepPartial } from \"../../../interfaces\";\nimport { useAlert } from \"../Alert/useAlert\";\n\ninterface NotificationState {\n  notifications: Notification<ErrorNotification | SuccessNotification>[];\n}\n\nexport interface NotificationAction {\n  type: \"add\" | \"remove\" | \"handled\" | \"reset\";\n  payload?: Notification<ErrorNotification | SuccessNotification> & {\n    id?: string;\n    handled?: boolean;\n  };\n}\n\nconst initialState: NotificationState = {\n  notifications: []\n};\n\nexport interface NotificationHandlerProps {\n  translations?: DeepPartial<Translations>;\n  dispatchFn: React.Dispatch<NotificationAction>;\n}\n\nexport const NotificationHandler = ({\n  translations = {},\n  dispatchFn\n}: NotificationHandlerProps) => {\n  const { enqueueErrorAlert, enqueueSuccessAlert } = useAlert();\n  const {\n    state: { notifications }\n  } = useNotificationContext();\n\n  const mergedTranslations = deepMerge<Translations>(defaultTranslations, translations);\n\n  const determineNotificationMessage = (notification: Notification<ErrorNotification>) => {\n    if (notification.message) {\n      return notification.message;\n    }\n\n    switch (notification.status) {\n      case 500:\n        return mergedTranslations.messages.general;\n      case 400:\n        return mergedTranslations.messages.badRequest;\n      case 401:\n        return mergedTranslations.messages.unauthorized;\n      case 403:\n        return mergedTranslations.messages.forbidden;\n      case 404:\n        return mergedTranslations.messages.notFound;\n      case 502:\n      case 503:\n        return mergedTranslations.messages.unavailable;\n      case 504:\n        return mergedTranslations.messages.timeout;\n      default:\n        return mergedTranslations.messages.general;\n    }\n  };\n\n  useEffect(() => {\n    notifications.forEach(notification => {\n      if (\n        notification.status &&\n        notification.handled &&\n        (notification.status === 401 || notification.status === 403)\n      ) {\n        dispatchFn({ type: \"remove\", payload: { id: notification.id } });\n      } else if (notification.status && !notification.handled && notification.type === \"error\") {\n        enqueueErrorAlert({\n          title: notification.title ?? mergedTranslations.general.error,\n          content: determineNotificationMessage(notification as Notification<ErrorNotification>),\n          onClose: () => dispatchFn({ type: \"remove\", payload: { id: notification.id } })\n        });\n        dispatchFn({ type: \"handled\", payload: { id: notification.id, handled: true } });\n      } else if (notification.title && !notification.handled && notification.type === \"success\") {\n        enqueueSuccessAlert({\n          title: notification.title ?? mergedTranslations.general.success,\n          content: notification.message,\n          onClose: () => dispatchFn({ type: \"remove\", payload: { id: notification.id } })\n        });\n\n        dispatchFn({ type: \"handled\", payload: { id: notification.id, handled: true } });\n      }\n    });\n  }, [notifications.length]);\n\n  return null;\n};\n\nexport const NotificationContext = createContext<{\n  state: NotificationState;\n  dispatch: React.Dispatch<NotificationAction>;\n}>({\n  state: initialState,\n  dispatch: () => undefined\n});\n\nexport interface Props {\n  children?: ReactNode;\n  translations?: DeepPartial<Translations>;\n}\n\nexport const NotificationProvider = ({ children, translations }: Props) => {\n  const [state, dispatch] = useReducer(notificationReducer, initialState);\n\n  return (\n    <NotificationContext.Provider value={{ state, dispatch }}>\n      {children}\n      <NotificationHandler translations={translations} dispatchFn={dispatch} />\n    </NotificationContext.Provider>\n  );\n};\n\nexport const useNotificationContext = () => {\n  const ctx = useContext(NotificationContext);\n\n  const addNotification = useCallback(\n    (notification: AddNotification) => {\n      ctx.dispatch({ type: \"add\", payload: notification });\n    },\n    [ctx]\n  );\n\n  const removeNotification = useCallback(\n    (id: string) => {\n      ctx.dispatch({ type: \"remove\", payload: { id } });\n    },\n    [ctx]\n  );\n\n  const resetNotifications = useCallback(() => {\n    ctx.dispatch({ type: \"reset\" });\n  }, [ctx]);\n\n  return {\n    state: ctx.state,\n    addNotification,\n    removeNotification,\n    resetNotifications\n  };\n};\n\nexport const notificationReducer = (\n  state: NotificationState,\n  action: NotificationAction\n): NotificationState => {\n  switch (action.type) {\n    case \"add\":\n      return {\n        ...state,\n        notifications: [\n          ...state.notifications,\n          {\n            ...action.payload,\n            id: generateID(),\n            handled: false\n          }\n        ]\n      };\n    case \"remove\":\n      return {\n        ...state,\n        notifications: state.notifications.filter(\n          notification => notification.id !== action.payload?.id\n        )\n      };\n    case \"handled\":\n      return {\n        ...state,\n        notifications: state.notifications.map(notification =>\n          notification.id === action.payload?.id ? { ...notification, handled: true } : notification\n        )\n      };\n    case \"reset\":\n      return {\n        ...state,\n        notifications: []\n      };\n    default:\n      return state;\n  }\n};\n"],"names":["initialState","notifications","NotificationHandler","translations","dispatchFn","enqueueErrorAlert","enqueueSuccessAlert","useAlert","state","useNotificationContext","mergedTranslations","deepMerge","defaultTranslations","determineNotificationMessage","notification","message","status","messages","general","badRequest","unauthorized","forbidden","notFound","unavailable","timeout","useEffect","forEach","handled","type","payload","id","title","_a","error","content","onClose","_b","success","length","NotificationContext","createContext","dispatch","NotificationProvider","children","useReducer","notificationReducer","React","createElement","Provider","value","ctx","useContext","addNotification","useCallback","removeNotification","resetNotifications","action","generateID","filter","map"],"mappings":"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"}

package/dist/esm/Pagination/Pagination.esm.js

@@ -1,2 +1,2 @@
-import e,{useState as t,useEffect as a,Fragment as r}from"react";import l from"./Pagination.module.esm.js";import n from"../src/readyclasses.module.esm.js";import{IconButton as s}from"../Button/IconButton.esm.js";import{Icon as c,Icons as i}from"../Icon/Icon.esm.js";import{Select as m}from"../Form/Select/SingleSelect/Select.esm.js";import{Option as o}from"../Form/Select/SingleSelect/Option.esm.js";import{Label as p}from"../Form/Label/Label.esm.js";var u;(function(e){e["totalItems"]="items in total";e["itemsPerPage"]="Items per page";e["currentPage"]="of %1 pages";e["itemsPerPageLabel"]="Select how many items per page you want to see.";e["currentPageLabel"]="What page you are currently on."})(u||(u={}));const g=({totalElements:g,pageSize:d=10,translate:v=u,currentPage:E,className:f,onPageChange:b,onPageSizeChange:N,...h},P)=>{const S=()=>{if(!g)return 1;if(Math.ceil(g/d)<1)return 1;return Math.ceil(g/d)};const y=S();const[C,I]=t(false);const $=e=>{const t=Number(e.target.value);I(true);N(t)};const j=e=>{b(e)};a((()=>{C&&I(false)}),[C]);return e.createElement("div",{...h,ref:P,className:`${l["pagination-wrapper"]} ${f!==null&&f!==void 0?f:""}`},e.createElement("div",{className:l["left"]},d&&e.createElement("div",{className:l["per-page"]},e.createElement(p,{id:"page-size-select-label",className:l["label"]},v.itemsPerPage),e.createElement(m,{labeledBy:"page-size-select-label",className:`${l["form-element"]} ${l["page-size-select"]}`,value:d.toString(),onChange:$},e.createElement(o,{value:"10"},"10"),e.createElement(o,{value:"25"},"25"),e.createElement(o,{value:"50"},"50"))),g&&e.createElement("div",{className:l["total"]},e.createElement("span",{tabIndex:0},g," ",v.totalItems))),e.createElement("div",{className:l["pagination"]},e.createElement(r,null,g&&!!y&&e.createElement("div",{className:l["page"]},e.createElement(p,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${n["sr-only"]} ${l["current-value-select-label"]}`},v.currentPageLabel),e.createElement(m,{labeledBy:"current-value-input-label",key:"input",id:"current-value-input",size:E.toString().length,onChange:e=>j(Number(e.target.value)),name:"current-value-input",value:E.toString(),className:`${l["form-element"]} ${l["current-page-select"]}`,searchInputProps:{wrapperProps:{className:l["search-input-wrapper"]},reset:C,autoComplete:"off"}},Array.from(Array(y).keys()).map((t=>e.createElement(o,{key:t,value:(t+1).toString()},(t+1).toString())))),e.createElement("span",{className:l["page-total"]},v.currentPage.replace("%1",Math.ceil(g/d).toString()))),!!E&&e.createElement("div",{className:l["previous"]},e.createElement(s,{disabled:E<=1,title:"first",onClick:()=>j(1),"data-paginate":"first"},e.createElement(c,{icon:i.NavigationFirst})),e.createElement(s,{disabled:E<=1,title:"previous",onClick:()=>j(E-1),"data-paginate":"previous"},e.createElement(c,{icon:i.ChevronLeft}))),e.createElement("div",{className:l["next"]},!!(E!==void 0||E!==void 0&&!g)&&e.createElement(s,{disabled:E>=y,title:"next",onClick:()=>j(E+1),"data-paginate":"next"},e.createElement(c,{icon:i.ChevronRight})),!!(E&&g)&&e.createElement(s,{disabled:E>=y,title:"last",onClick:()=>j(Math.ceil(g/d)),"data-paginate":"last"},e.createElement(c,{icon:i.NavigationLast}))))))};const d=e.forwardRef(g);export{d as Pagination};
+import e,{useState as t,useEffect as a,Fragment as l}from"react";import r from"./Pagination.module.esm.js";import n from"../src/readyclasses.module.esm.js";import{IconButton as s}from"../Button/IconButton.esm.js";import{Icon as c,Icons as i}from"../Icon/Icon.esm.js";import{Select as m}from"../Form/Select/SingleSelect/Select.esm.js";import{Option as o}from"../Form/Select/SingleSelect/Option.esm.js";import{Label as p}from"../Form/Label/Label.esm.js";var u;(function(e){e["totalItems"]="items in total";e["itemsPerPage"]="Items per page";e["currentPage"]="of %1 pages";e["itemsPerPageLabel"]="Select how many items per page you want to see.";e["currentPageLabel"]="What page you are currently on."})(u||(u={}));const g=({totalElements:g,pageSize:d=10,translate:v=u,currentPage:E,className:f,onPageChange:b,onPageSizeChange:h,...N},P)=>{const S=()=>{if(!g)return 1;if(Math.ceil(g/d)<1)return 1;return Math.ceil(g/d)};const y=S();const[C,z]=t(false);const I=e=>{const t=Number(e.target.value);z(true);h(t)};const $=e=>{b(e)};a((()=>{C&&z(false)}),[C]);return e.createElement("div",{...N,ref:P,className:`${r["pagination-wrapper"]} ${f!==null&&f!==void 0?f:""}`},e.createElement("div",{className:r["left"]},d&&e.createElement("div",{className:r["per-page"]},e.createElement(p,{id:"page-size-select-label",htmlFor:"page-size-select",className:r["label"]},v.itemsPerPage),e.createElement(m,{name:"page-size-select",id:"page-size-select",labeledBy:"page-size-select-label",className:`${r["form-element"]} ${r["page-size-select"]}`,value:d.toString(),onChange:I},e.createElement(o,{value:"10"},"10"),e.createElement(o,{value:"25"},"25"),e.createElement(o,{value:"50"},"50"))),g&&e.createElement("div",{className:r["total"]},e.createElement("span",{tabIndex:0},g," ",v.totalItems))),e.createElement("div",{className:r["pagination"]},e.createElement(l,null,g&&!!y&&e.createElement("div",{className:r["page"]},e.createElement(p,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${n["sr-only"]} ${r["current-value-select-label"]}`},v.currentPageLabel),e.createElement(m,{labeledBy:"current-value-input-label",key:"input",id:"current-value-input",size:E.toString().length,onChange:e=>$(Number(e.target.value)),name:"current-value-input",value:E.toString(),className:`${r["form-element"]} ${r["current-page-select"]}`,search:{enabled:true,searchInputProps:{wrapperProps:{className:r["search-input-wrapper"]},reset:C?C:void 0,autoComplete:"off"}}},Array.from(Array(y).keys()).map((t=>e.createElement(o,{key:t,value:(t+1).toString()},(t+1).toString())))),e.createElement("span",{className:r["page-total"]},v.currentPage.replace("%1",Math.ceil(g/d).toString()))),!!E&&e.createElement("div",{className:r["previous"]},e.createElement(s,{disabled:E<=1,title:"first",onClick:()=>$(1),"data-paginate":"first"},e.createElement(c,{icon:i.NavigationFirst})),e.createElement(s,{disabled:E<=1,title:"previous",onClick:()=>$(E-1),"data-paginate":"previous"},e.createElement(c,{icon:i.ChevronLeft}))),e.createElement("div",{className:r["next"]},(E!==void 0||false)&&e.createElement(s,{disabled:E>=y,title:"next",onClick:()=>$(E+1),"data-paginate":"next"},e.createElement(c,{icon:i.ChevronRight})),!!(E&&g)&&e.createElement(s,{disabled:E>=y,title:"last",onClick:()=>$(Math.ceil(g/d)),"data-paginate":"last"},e.createElement(c,{icon:i.NavigationLast}))))))};const d=e.forwardRef(g);export{d as Pagination};
 //# sourceMappingURL=Pagination.esm.js.map

package/dist/esm/Pagination/Pagination.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.esm.js","sources":["../../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  Fragment,\n  useState,\n  useEffect\n} from \"react\";\nimport classes from \"./Pagination.module.scss\";\nimport readyclasses from \"../../readyclasses.module.scss\";\nimport { IconButton } from \"../Button/IconButton\";\nimport { Icons, Icon } from \"../Icon/Icon\";\nimport { Select } from \"../Form/Select/SingleSelect/Select\";\nimport { Option } from \"../Form/Select/SingleSelect/Option\";\nimport { Label } from \"../Form/Label/Label\";\n\nexport type PaginationTranslations = {\n  totalItems: string;\n  itemsPerPage: string;\n  itemsPerPageLabel: string;\n  currentPage: string;\n  currentPageLabel: string;\n};\n\nexport type PageChangeLabels = \"next\" | \"previous\" | \"first\" | \"last\";\n\nenum DefaultTranslations {\n  totalItems = \"items in total\",\n  itemsPerPage = \"Items per page\",\n  currentPage = \"of %1 pages\",\n  itemsPerPageLabel = \"Select how many items per page you want to see.\",\n  currentPageLabel = \"What page you are currently on.\"\n}\n\nexport type PageSize = 10 | 25 | 50;\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"translate\"> {\n  currentPage: number;\n  totalElements?: number;\n  pageSize?: PageSize;\n  translate?: PaginationTranslations;\n  onPageChange: (pageToGoTo: number) => void;\n  onPageSizeChange: (pageSize: PageSize) => void;\n}\n\nconst PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    totalElements,\n    pageSize = 10,\n    translate = DefaultTranslations,\n    currentPage,\n    className,\n    onPageChange,\n    onPageSizeChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const calculateAmountOfPages = () => {\n    if (!totalElements) return 1;\n\n    if (Math.ceil(totalElements / pageSize) < 1) {\n      return 1;\n    }\n\n    return Math.ceil(totalElements / pageSize);\n  };\n  const pagesAmount = calculateAmountOfPages();\n  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);\n\n  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const pageSizeNumber = Number(event.target.value) as PageSize;\n    setResetPageNoSelect(true);\n    onPageSizeChange(pageSizeNumber);\n  };\n\n  const onPageChangeHandler = (pageToGoTo: number) => {\n    onPageChange(pageToGoTo);\n  };\n\n  useEffect(() => {\n    resetPageNoSelect && setResetPageNoSelect(false);\n  }, [resetPageNoSelect]);\n\n  return (\n    <div {...rest} ref={ref} className={`${classes[\"pagination-wrapper\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left\"]}>\n        {pageSize && (\n          <div className={classes[\"per-page\"]}>\n            <Label id=\"page-size-select-label\" className={classes[\"label\"]}>\n              {translate.itemsPerPage}\n            </Label>\n            <Select\n              labeledBy=\"page-size-select-label\"\n              className={`${classes[\"form-element\"]} ${classes[\"page-size-select\"]}`}\n              value={pageSize.toString()}\n              onChange={onPageSizeChangeHandler}\n            >\n              <Option value=\"10\">10</Option>\n              <Option value=\"25\">25</Option>\n              <Option value=\"50\">50</Option>\n            </Select>\n          </div>\n        )}\n        {totalElements && (\n          <div className={classes[\"total\"]}>\n            <span tabIndex={0}>\n              {totalElements}&nbsp;{translate.totalItems}\n            </span>\n          </div>\n        )}\n      </div>\n      <div className={classes[\"pagination\"]}>\n        <Fragment>\n          {totalElements && !!pagesAmount && (\n            <div className={classes[\"page\"]}>\n              <Label\n                id=\"current-value-input-label\"\n                htmlFor=\"current-value-input\"\n                className={`${readyclasses[\"sr-only\"]} ${classes[\"current-value-select-label\"]}`}\n              >\n                {translate.currentPageLabel}\n              </Label>\n              <Select\n                labeledBy=\"current-value-input-label\"\n                key=\"input\"\n                id=\"current-value-input\"\n                size={currentPage.toString().length}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>\n                  onPageChangeHandler(Number(e.target.value))\n                }\n                name=\"current-value-input\"\n                value={currentPage.toString()}\n                className={`${classes[\"form-element\"]} ${classes[\"current-page-select\"]}`}\n                searchInputProps={{\n                  wrapperProps: { className: classes[\"search-input-wrapper\"] },\n                  reset: resetPageNoSelect,\n                  autoComplete: \"off\"\n                }}\n              >\n                {Array.from(Array(pagesAmount).keys()).map(page => (\n                  <Option key={page} value={(page + 1).toString()}>\n                    {(page + 1).toString()}\n                  </Option>\n                ))}\n              </Select>\n              <span className={classes[\"page-total\"]}>\n                {translate.currentPage.replace(\n                  \"%1\",\n                  Math.ceil(totalElements / pageSize).toString()\n                )}\n              </span>\n            </div>\n          )}\n          {!!currentPage && (\n            <div className={classes[\"previous\"]}>\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"first\"\n                  onClick={() => onPageChangeHandler(1)}\n                  data-paginate=\"first\"\n                >\n                  <Icon icon={Icons.NavigationFirst} />\n                </IconButton>\n              }\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"previous\"\n                  onClick={() => onPageChangeHandler(currentPage - 1)}\n                  data-paginate=\"previous\"\n                >\n                  <Icon icon={Icons.ChevronLeft} />\n                </IconButton>\n              }\n            </div>\n          )}\n          <div className={classes[\"next\"]}>\n            {!!(currentPage !== undefined || (currentPage !== undefined && !totalElements)) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"next\"\n                onClick={() => onPageChangeHandler(currentPage + 1)}\n                data-paginate=\"next\"\n              >\n                <Icon icon={Icons.ChevronRight} />\n              </IconButton>\n            )}\n            {!!(currentPage && totalElements) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"last\"\n                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}\n                data-paginate=\"last\"\n              >\n                <Icon icon={Icons.NavigationLast} />\n              </IconButton>\n            )}\n          </div>\n        </Fragment>\n      </div>\n    </div>\n  );\n};\n\nexport const Pagination = React.forwardRef(PaginationComponent);\n"],"names":["DefaultTranslations","PaginationComponent","totalElements","pageSize","translate","currentPage","className","onPageChange","onPageSizeChange","rest","ref","calculateAmountOfPages","Math","ceil","pagesAmount","resetPageNoSelect","setResetPageNoSelect","useState","onPageSizeChangeHandler","event","pageSizeNumber","Number","target","value","onPageChangeHandler","pageToGoTo","useEffect","React","classes","createElement","Label","id","itemsPerPage","Select","labeledBy","toString","onChange","Option","tabIndex","totalItems","Fragment","htmlFor","readyclasses","currentPageLabel","key","size","length","e","name","searchInputProps","wrapperProps","reset","autoComplete","Array","from","keys","map","page","replace","IconButton","disabled","title","onClick","Icon","icon","Icons","NavigationFirst","ChevronLeft","undefined","ChevronRight","NavigationLast","Pagination","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Pagination.esm.js","sources":["../../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  Fragment,\n  useState,\n  useEffect\n} from \"react\";\nimport classes from \"./Pagination.module.scss\";\nimport readyclasses from \"../../readyclasses.module.scss\";\nimport { IconButton } from \"../Button/IconButton\";\nimport { Icons, Icon } from \"../Icon/Icon\";\nimport { Select } from \"../Form/Select/SingleSelect/Select\";\nimport { Option } from \"../Form/Select/SingleSelect/Option\";\nimport { Label } from \"../Form/Label/Label\";\n\nexport type PaginationTranslations = {\n  totalItems: string;\n  itemsPerPage: string;\n  itemsPerPageLabel: string;\n  currentPage: string;\n  currentPageLabel: string;\n};\n\nexport type PageChangeLabels = \"next\" | \"previous\" | \"first\" | \"last\";\n\nenum DefaultTranslations {\n  totalItems = \"items in total\",\n  itemsPerPage = \"Items per page\",\n  currentPage = \"of %1 pages\",\n  itemsPerPageLabel = \"Select how many items per page you want to see.\",\n  currentPageLabel = \"What page you are currently on.\"\n}\n\nexport type PageSize = 10 | 25 | 50;\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"translate\"> {\n  currentPage: number;\n  totalElements?: number;\n  pageSize?: PageSize;\n  translate?: PaginationTranslations;\n  onPageChange: (pageToGoTo: number) => void;\n  onPageSizeChange: (pageSize: PageSize) => void;\n}\n\nconst PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    totalElements,\n    pageSize = 10,\n    translate = DefaultTranslations,\n    currentPage,\n    className,\n    onPageChange,\n    onPageSizeChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const calculateAmountOfPages = () => {\n    if (!totalElements) return 1;\n\n    if (Math.ceil(totalElements / pageSize) < 1) {\n      return 1;\n    }\n\n    return Math.ceil(totalElements / pageSize);\n  };\n  const pagesAmount = calculateAmountOfPages();\n  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);\n\n  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const pageSizeNumber = Number(event.target.value) as PageSize;\n    setResetPageNoSelect(true);\n    onPageSizeChange(pageSizeNumber);\n  };\n\n  const onPageChangeHandler = (pageToGoTo: number) => {\n    onPageChange(pageToGoTo);\n  };\n\n  useEffect(() => {\n    resetPageNoSelect && setResetPageNoSelect(false);\n  }, [resetPageNoSelect]);\n\n  return (\n    <div {...rest} ref={ref} className={`${classes[\"pagination-wrapper\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left\"]}>\n        {pageSize && (\n          <div className={classes[\"per-page\"]}>\n            <Label\n              id=\"page-size-select-label\"\n              htmlFor=\"page-size-select\"\n              className={classes[\"label\"]}\n            >\n              {translate.itemsPerPage}\n            </Label>\n            <Select\n              name=\"page-size-select\"\n              id=\"page-size-select\"\n              labeledBy=\"page-size-select-label\"\n              className={`${classes[\"form-element\"]} ${classes[\"page-size-select\"]}`}\n              value={pageSize.toString()}\n              onChange={onPageSizeChangeHandler}\n            >\n              <Option value=\"10\">10</Option>\n              <Option value=\"25\">25</Option>\n              <Option value=\"50\">50</Option>\n            </Select>\n          </div>\n        )}\n        {totalElements && (\n          <div className={classes[\"total\"]}>\n            <span tabIndex={0}>\n              {totalElements}&nbsp;{translate.totalItems}\n            </span>\n          </div>\n        )}\n      </div>\n      <div className={classes[\"pagination\"]}>\n        <Fragment>\n          {totalElements && !!pagesAmount && (\n            <div className={classes[\"page\"]}>\n              <Label\n                id=\"current-value-input-label\"\n                htmlFor=\"current-value-input\"\n                className={`${readyclasses[\"sr-only\"]} ${classes[\"current-value-select-label\"]}`}\n              >\n                {translate.currentPageLabel}\n              </Label>\n              <Select\n                labeledBy=\"current-value-input-label\"\n                key=\"input\"\n                id=\"current-value-input\"\n                size={currentPage.toString().length}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>\n                  onPageChangeHandler(Number(e.target.value))\n                }\n                name=\"current-value-input\"\n                value={currentPage.toString()}\n                className={`${classes[\"form-element\"]} ${classes[\"current-page-select\"]}`}\n                search={{\n                  enabled: true,\n                  searchInputProps: {\n                    wrapperProps: { className: classes[\"search-input-wrapper\"] },\n                    reset: resetPageNoSelect ? resetPageNoSelect : undefined,\n                    autoComplete: \"off\"\n                  }\n                }}\n              >\n                {Array.from(Array(pagesAmount).keys()).map(page => (\n                  <Option key={page} value={(page + 1).toString()}>\n                    {(page + 1).toString()}\n                  </Option>\n                ))}\n              </Select>\n              <span className={classes[\"page-total\"]}>\n                {translate.currentPage.replace(\n                  \"%1\",\n                  Math.ceil(totalElements / pageSize).toString()\n                )}\n              </span>\n            </div>\n          )}\n          {!!currentPage && (\n            <div className={classes[\"previous\"]}>\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"first\"\n                  onClick={() => onPageChangeHandler(1)}\n                  data-paginate=\"first\"\n                >\n                  <Icon icon={Icons.NavigationFirst} />\n                </IconButton>\n              }\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"previous\"\n                  onClick={() => onPageChangeHandler(currentPage - 1)}\n                  data-paginate=\"previous\"\n                >\n                  <Icon icon={Icons.ChevronLeft} />\n                </IconButton>\n              }\n            </div>\n          )}\n          <div className={classes[\"next\"]}>\n            {(currentPage !== undefined || false) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"next\"\n                onClick={() => onPageChangeHandler(currentPage + 1)}\n                data-paginate=\"next\"\n              >\n                <Icon icon={Icons.ChevronRight} />\n              </IconButton>\n            )}\n            {!!(currentPage && totalElements) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"last\"\n                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}\n                data-paginate=\"last\"\n              >\n                <Icon icon={Icons.NavigationLast} />\n              </IconButton>\n            )}\n          </div>\n        </Fragment>\n      </div>\n    </div>\n  );\n};\n\nexport const Pagination = React.forwardRef(PaginationComponent);\n"],"names":["DefaultTranslations","PaginationComponent","totalElements","pageSize","translate","currentPage","className","onPageChange","onPageSizeChange","rest","ref","calculateAmountOfPages","Math","ceil","pagesAmount","resetPageNoSelect","setResetPageNoSelect","useState","onPageSizeChangeHandler","event","pageSizeNumber","Number","target","value","onPageChangeHandler","pageToGoTo","useEffect","React","classes","createElement","Label","id","htmlFor","itemsPerPage","Select","name","labeledBy","toString","onChange","Option","tabIndex","totalItems","Fragment","readyclasses","currentPageLabel","key","size","length","e","search","enabled","searchInputProps","wrapperProps","reset","undefined","autoComplete","Array","from","keys","map","page","replace","IconButton","disabled","title","onClick","Icon","icon","Icons","NavigationFirst","ChevronLeft","ChevronRight","NavigationLast","Pagination","forwardRef"],"mappings":"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"}

package/dist/esm/Popover/Popover.esm.js

@@ -1,2 +1,2 @@
-import e,{useState as t,useRef as o,useEffect as n}from"react";import{usePosition as i}from"../src/hooks/usePosition.esm.js";import r from"./Popover.module.esm.js";const s=({children:s,className:l,show:c,placement:m,offset:u,debounceAmount:d,transformOrigin:a,anchorEl:f,onAnchorOutOfView:v,...w},p)=>{const[b,g]=t(false);const h=o(null);const{top:N,left:E,right:L,bottom:O,calculatePosition:P,initialCalculationDone:A}=i({elementToBePositioned:h,relativeElement:f,offset:u,placement:m,transformOrigin:a,debounceAmount:d!==null&&d!==void 0?d:void 0});const B=e=>{if(e==="initial")return"initial";if(isNaN(e))return 0;return Number(e)};n((()=>{if(A)g(!!c)}),[c,A]);n((()=>{if(!b)return;window.addEventListener("resize",P);window.addEventListener("scroll",P);return()=>{window.removeEventListener("resize",P);window.removeEventListener("scroll",P)}}),[b]);n((()=>{P()}),[b]);n((()=>{const e=f===null||f===void 0?void 0:f.current;if(e){const t=e.getBoundingClientRect().top;const o=e.getBoundingClientRect().bottom;const n=b&&(Number(N)<0||Number(E)<0||Number(L)<0||Number(O)<0||t<0||o>window.innerHeight);if(n)v===null||v===void 0?void 0:v()}}),[N,E,L,O]);return e.createElement("div",{ref:p,...w},e.createElement("div",{ref:h,className:`${r.popover} ${l!==null&&l!==void 0?l:""} ${b?r.show:""}`,style:{top:B(N),left:B(E),right:B(L),bottom:B(O)}},s))};const l=e.forwardRef(s);export{l as Popover};
+import e,{useState as t,useRef as o,useEffect as n}from"react";import{usePosition as i}from"../src/hooks/usePosition.esm.js";import r from"./Popover.module.esm.js";const s=({children:s,className:l,show:c,placement:m,offset:u,debounceAmount:d,transformOrigin:a,anchorEl:f,onAnchorOutOfView:v,...w},p)=>{const[b,g]=t(false);const h=o(null);const{top:N,left:E,right:L,bottom:O,calculatePosition:P,initialCalculationDone:A}=i({elementToBePositioned:h,relativeElement:f,offset:u,placement:m,transformOrigin:a,debounceAmount:d!==null&&d!==void 0?d:void 0});const B=e=>{if(e==="initial")return"initial";if(isNaN(e))return 0;return Number(e)};n((()=>{if(A)g(!!c)}),[c,A]);n((()=>{if(!b)return;window.addEventListener("resize",P);window.addEventListener("scroll",P);return()=>{window.removeEventListener("resize",P);window.removeEventListener("scroll",P)}}),[b]);n((()=>{P()}),[b,h,f]);n((()=>{const e=f===null||f===void 0?void 0:f.current;if(e){const t=e.getBoundingClientRect().top;const o=e.getBoundingClientRect().bottom;const n=b&&(Number(N)<0||Number(E)<0||Number(L)<0||Number(O)<0||t<0||o>window.innerHeight);if(n)v===null||v===void 0?void 0:v()}}),[N,E,L,O]);return e.createElement("div",{ref:p,...w},e.createElement("div",{ref:h,className:`${r.popover} ${l!==null&&l!==void 0?l:""} ${b?r.show:""}`,style:{top:B(N),left:B(E),right:B(L),bottom:B(O)}},s))};const l=e.forwardRef(s);export{l as Popover};
 //# sourceMappingURL=Popover.esm.js.map

package/dist/esm/Popover/Popover.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.esm.js","sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Offset, Placement, PositionType, usePosition } from \"../../hooks/usePosition\";\nimport classes from \"./Popover.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children?: ReactNode;\n  show?: boolean;\n  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  transformOrigin?: Placement;\n  onAnchorOutOfView?: () => void;\n}\n\nconst PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    children,\n    className,\n    show,\n    placement,\n    offset,\n    debounceAmount,\n    transformOrigin,\n    anchorEl,\n    onAnchorOutOfView,\n    ...rest\n  },\n  ref\n) => {\n  const [showPopover, setShowPopover] = useState(false);\n  const elToBePositioned = useRef<HTMLDivElement>(null);\n  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({\n    elementToBePositioned: elToBePositioned,\n    relativeElement: anchorEl,\n    offset: offset,\n    placement: placement,\n    transformOrigin: transformOrigin,\n    debounceAmount: debounceAmount ?? undefined\n  });\n\n  const normalizePosition = (value: PositionType) => {\n    if (value === \"initial\") {\n      return \"initial\";\n    }\n\n    if (isNaN(value)) {\n      return 0;\n    }\n\n    return Number(value);\n  };\n\n  useEffect(() => {\n    if (initialCalculationDone) {\n      setShowPopover(!!show);\n    }\n  }, [show, initialCalculationDone]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      return;\n    }\n\n    window.addEventListener(\"resize\", calculatePosition);\n    window.addEventListener(\"scroll\", calculatePosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", calculatePosition);\n      window.removeEventListener(\"scroll\", calculatePosition);\n    };\n  }, [showPopover]);\n\n  useEffect(() => {\n    calculatePosition();\n  }, [showPopover]);\n\n  useEffect(() => {\n    const anchor = anchorEl?.current as HTMLElement;\n\n    if (anchor) {\n      const anchorTop = anchor.getBoundingClientRect().top;\n      const anchorBottom = anchor.getBoundingClientRect().bottom;\n\n      const isAnchorOffscreen =\n        showPopover &&\n        (Number(top) < 0 ||\n          Number(left) < 0 ||\n          Number(right) < 0 ||\n          Number(bottom) < 0 ||\n          anchorTop < 0 ||\n          anchorBottom > window.innerHeight);\n\n      if (isAnchorOffscreen) {\n        onAnchorOutOfView?.();\n      }\n    }\n  }, [top, left, right, bottom]);\n\n  return (\n    <div ref={ref} {...rest}>\n      <div\n        ref={elToBePositioned}\n        className={`${classes.popover} ${className ?? \"\"} ${showPopover ? classes.show : \"\"}`}\n        style={{\n          top: normalizePosition(top),\n          left: normalizePosition(left),\n          right: normalizePosition(right),\n          bottom: normalizePosition(bottom)\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport const Popover = React.forwardRef(PopoverComponent);\n"],"names":["PopoverComponent","children","className","show","placement","offset","debounceAmount","transformOrigin","anchorEl","onAnchorOutOfView","rest","ref","showPopover","setShowPopover","useState","elToBePositioned","useRef","top","left","right","bottom","calculatePosition","initialCalculationDone","usePosition","elementToBePositioned","relativeElement","undefined","normalizePosition","value","isNaN","Number","useEffect","window","addEventListener","removeEventListener","anchor","current","anchorTop","getBoundingClientRect","anchorBottom","isAnchorOffscreen","innerHeight","React","createElement","classes","popover","style","Popover","forwardRef"],"mappings":"oKAuCA,MAAMA,EAAoE,EAEtEC,WACAC,YACAC,OACAC,YACAC,SACAC,iBACAC,kBACAC,WACAC,uBACGC,GAELC,KAEA,MAAOC,EAAaC,GAAkBC,EAAS,OAC/C,MAAMC,EAAmBC,EAAuB,MAChD,MAAMC,IAAEA,EAAGC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,kBAAEA,EAAiBC,uBAAEA,GAA2BC,EAAY,CAC1FC,sBAAuBT,EACvBU,gBAAiBjB,EACjBH,OAAQA,EACRD,UAAWA,EACXG,gBAAiBA,EACjBD,eAAgBA,IAAc,MAAdA,SAAA,EAAAA,OAAkBoB,IAGpC,MAAMC,EAAqBC,IACzB,GAAIA,IAAU,UACZ,MAAO,UAGT,GAAIC,MAAMD,GACR,OAAO,EAGT,OAAOE,OAAOF,EAAM,EAGtBG,GAAU,KACR,GAAIT,EACFT,IAAiBV,EAClB,GACA,CAACA,EAAMmB,IAEVS,GAAU,KACR,IAAKnB,EACH,OAGFoB,OAAOC,iBAAiB,SAAUZ,GAClCW,OAAOC,iBAAiB,SAAUZ,GAElC,MAAO,KACLW,OAAOE,oBAAoB,SAAUb,GACrCW,OAAOE,oBAAoB,SAAUb,EAAkB,CACxD,GACA,CAACT,IAEJmB,GAAU,KACRV,GAAmB,GAClB,CAACT,IAEJmB,GAAU,KACR,MAAMI,EAAS3B,IAAQ,MAARA,SAAA,OAAA,EAAAA,EAAU4B,QAEzB,GAAID,EAAQ,CACV,MAAME,EAAYF,EAAOG,wBAAwBrB,IACjD,MAAMsB,EAAeJ,EAAOG,wBAAwBlB,OAEpD,MAAMoB,EACJ5B,IACCkB,OAAOb,GAAO,GACba,OAAOZ,GAAQ,GACfY,OAAOX,GAAS,GAChBW,OAAOV,GAAU,GACjBiB,EAAY,GACZE,EAAeP,OAAOS,aAE1B,GAAID,EACF/B,IAAA,MAAAA,SAAA,OAAA,EAAAA,GAEH,IACA,CAACQ,EAAKC,EAAMC,EAAOC,IAEtB,OACEsB,EAAKC,cAAA,MAAA,CAAAhC,IAAKA,KAASD,GACjBgC,EAAAC,cAAA,MAAA,CACEhC,IAAKI,EACLb,UAAW,GAAG0C,EAAQC,WAAW3C,IAAS,MAATA,SAAA,EAAAA,EAAa,MAAMU,EAAcgC,EAAQzC,KAAO,KACjF2C,MAAO,CACL7B,IAAKU,EAAkBV,GACvBC,KAAMS,EAAkBT,GACxBC,MAAOQ,EAAkBR,GACzBC,OAAQO,EAAkBP,KAG3BnB,GAGL,EAGS,MAAA8C,EAAUL,EAAMM,WAAWhD"}
+{"version":3,"file":"Popover.esm.js","sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Offset, Placement, PositionType, usePosition } from \"../../hooks/usePosition\";\nimport classes from \"./Popover.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children?: ReactNode;\n  show?: boolean;\n  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  transformOrigin?: Placement;\n  onAnchorOutOfView?: () => void;\n}\n\nconst PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    children,\n    className,\n    show,\n    placement,\n    offset,\n    debounceAmount,\n    transformOrigin,\n    anchorEl,\n    onAnchorOutOfView,\n    ...rest\n  },\n  ref\n) => {\n  const [showPopover, setShowPopover] = useState(false);\n  const elToBePositioned = useRef<HTMLDivElement>(null);\n  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({\n    elementToBePositioned: elToBePositioned,\n    relativeElement: anchorEl,\n    offset: offset,\n    placement: placement,\n    transformOrigin: transformOrigin,\n    debounceAmount: debounceAmount ?? undefined\n  });\n\n  const normalizePosition = (value: PositionType) => {\n    if (value === \"initial\") {\n      return \"initial\";\n    }\n\n    if (isNaN(value)) {\n      return 0;\n    }\n\n    return Number(value);\n  };\n\n  useEffect(() => {\n    if (initialCalculationDone) {\n      setShowPopover(!!show);\n    }\n  }, [show, initialCalculationDone]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      return;\n    }\n\n    window.addEventListener(\"resize\", calculatePosition);\n    window.addEventListener(\"scroll\", calculatePosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", calculatePosition);\n      window.removeEventListener(\"scroll\", calculatePosition);\n    };\n  }, [showPopover]);\n\n  useEffect(() => {\n    calculatePosition();\n  }, [showPopover, elToBePositioned, anchorEl]);\n\n  useEffect(() => {\n    const anchor = anchorEl?.current as HTMLElement;\n\n    if (anchor) {\n      const anchorTop = anchor.getBoundingClientRect().top;\n      const anchorBottom = anchor.getBoundingClientRect().bottom;\n\n      const isAnchorOffscreen =\n        showPopover &&\n        (Number(top) < 0 ||\n          Number(left) < 0 ||\n          Number(right) < 0 ||\n          Number(bottom) < 0 ||\n          anchorTop < 0 ||\n          anchorBottom > window.innerHeight);\n\n      if (isAnchorOffscreen) {\n        onAnchorOutOfView?.();\n      }\n    }\n  }, [top, left, right, bottom]);\n\n  return (\n    <div ref={ref} {...rest}>\n      <div\n        ref={elToBePositioned}\n        className={`${classes.popover} ${className ?? \"\"} ${showPopover ? classes.show : \"\"}`}\n        style={{\n          top: normalizePosition(top),\n          left: normalizePosition(left),\n          right: normalizePosition(right),\n          bottom: normalizePosition(bottom)\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport const Popover = React.forwardRef(PopoverComponent);\n"],"names":["PopoverComponent","children","className","show","placement","offset","debounceAmount","transformOrigin","anchorEl","onAnchorOutOfView","rest","ref","showPopover","setShowPopover","useState","elToBePositioned","useRef","top","left","right","bottom","calculatePosition","initialCalculationDone","usePosition","elementToBePositioned","relativeElement","undefined","normalizePosition","value","isNaN","Number","useEffect","window","addEventListener","removeEventListener","anchor","current","anchorTop","getBoundingClientRect","anchorBottom","isAnchorOffscreen","innerHeight","React","createElement","classes","popover","style","Popover","forwardRef"],"mappings":"oKAuCA,MAAMA,EAAoE,EAEtEC,WACAC,YACAC,OACAC,YACAC,SACAC,iBACAC,kBACAC,WACAC,uBACGC,GAELC,KAEA,MAAOC,EAAaC,GAAkBC,EAAS,OAC/C,MAAMC,EAAmBC,EAAuB,MAChD,MAAMC,IAAEA,EAAGC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,kBAAEA,EAAiBC,uBAAEA,GAA2BC,EAAY,CAC1FC,sBAAuBT,EACvBU,gBAAiBjB,EACjBH,OAAQA,EACRD,UAAWA,EACXG,gBAAiBA,EACjBD,eAAgBA,IAAc,MAAdA,SAAA,EAAAA,OAAkBoB,IAGpC,MAAMC,EAAqBC,IACzB,GAAIA,IAAU,UACZ,MAAO,UAGT,GAAIC,MAAMD,GACR,OAAO,EAGT,OAAOE,OAAOF,EAAM,EAGtBG,GAAU,KACR,GAAIT,EACFT,IAAiBV,EAClB,GACA,CAACA,EAAMmB,IAEVS,GAAU,KACR,IAAKnB,EACH,OAGFoB,OAAOC,iBAAiB,SAAUZ,GAClCW,OAAOC,iBAAiB,SAAUZ,GAElC,MAAO,KACLW,OAAOE,oBAAoB,SAAUb,GACrCW,OAAOE,oBAAoB,SAAUb,EAAkB,CACxD,GACA,CAACT,IAEJmB,GAAU,KACRV,GAAmB,GAClB,CAACT,EAAaG,EAAkBP,IAEnCuB,GAAU,KACR,MAAMI,EAAS3B,IAAQ,MAARA,SAAA,OAAA,EAAAA,EAAU4B,QAEzB,GAAID,EAAQ,CACV,MAAME,EAAYF,EAAOG,wBAAwBrB,IACjD,MAAMsB,EAAeJ,EAAOG,wBAAwBlB,OAEpD,MAAMoB,EACJ5B,IACCkB,OAAOb,GAAO,GACba,OAAOZ,GAAQ,GACfY,OAAOX,GAAS,GAChBW,OAAOV,GAAU,GACjBiB,EAAY,GACZE,EAAeP,OAAOS,aAE1B,GAAID,EACF/B,IAAA,MAAAA,SAAA,OAAA,EAAAA,GAEH,IACA,CAACQ,EAAKC,EAAMC,EAAOC,IAEtB,OACEsB,EAAKC,cAAA,MAAA,CAAAhC,IAAKA,KAASD,GACjBgC,EAAAC,cAAA,MAAA,CACEhC,IAAKI,EACLb,UAAW,GAAG0C,EAAQC,WAAW3C,IAAS,MAATA,SAAA,EAAAA,EAAa,MAAMU,EAAcgC,EAAQzC,KAAO,KACjF2C,MAAO,CACL7B,IAAKU,EAAkBV,GACvBC,KAAMS,EAAkBT,GACxBC,MAAOQ,EAAkBR,GACzBC,OAAQO,EAAkBP,KAG3BnB,GAGL,EAGS,MAAA8C,EAAUL,EAAMM,WAAWhD"}

package/dist/esm/Tag/RemoveButton.module.esm.js

@@ -1,2 +1,2 @@
-import e from "../../lib/style-inject.js";var i='/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.RemoveButton-module_sr-only__395Xl{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.RemoveButton-module_hidden__eKGPT{display:none}.RemoveButton-module_slide-in__ZVj2V{animation:RemoveButton-module_slide-in__ZVj2V .5s forwards}@media (prefers-reduced-motion:reduce){.RemoveButton-module_slide-in__ZVj2V{animation-duration:.1ms}}.RemoveButton-module_slide-out__2S-4s{animation:RemoveButton-module_slide-out__2S-4s .5s forwards}@media (prefers-reduced-motion:reduce){.RemoveButton-module_slide-out__2S-4s{animation-duration:.1ms}}@keyframes RemoveButton-module_slide-in__ZVj2V{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes RemoveButton-module_slide-out__2S-4s{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.RemoveButton-module_remove__Q60E1{background:none;border:none;height:1.25rem;margin-right:-.375rem;padding:0;width:1.25rem}.RemoveButton-module_remove__Q60E1:hover{background-color:var(--color-black10);border-radius:.125rem}.RemoveButton-module_remove__Q60E1:active{background-color:var(--color-blue-grey400)}.RemoveButton-module_remove__Q60E1:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.RemoveButton-module_remove__Q60E1 .RemoveButton-module_icon__4KpuX{font-size:.625rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlbW92ZUJ1dHRvbi5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRTtBQUNGOzs7Ozs7Ozs7Ozs7OztFQWNFO0FBQ0Y7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRixvQ0FPRSxrQkFBc0IsQ0FDdEIsUUFBUyxDQUxULFVBQVcsQ0FFWCxXQUFZLENBQ1osZUFBZ0IsQ0FGaEIsU0FBVSxDQUhWLGlCQUFrQixDQUNsQixTQU9GLENBRUEsbUNBQ0UsWUFDRixDQUVBLHFDQUNFLDBEQUNGLENBQ0EsdUNBQ0UscUNBQ0UsdUJBQ0YsQ0FDRixDQUVBLHNDQUNFLDJEQUNGLENBQ0EsdUNBQ0Usc0NBQ0UsdUJBQ0YsQ0FDRixDQUVBLCtDQUNFLEdBQ0UsMkJBQ0YsQ0FDQSxHQUNFLHVCQUNGLENBQ0YsQ0FDQSxnREFDRSxHQUNFLHVCQUNGLENBQ0EsR0FDRSwyQkFDRixDQUNGLENBQ0EsbUNBR0UsZUFBZ0IsQ0FDaEIsV0FBWSxDQUZaLGNBQWUsQ0FJZixxQkFBdUIsQ0FEdkIsU0FBVSxDQUpWLGFBTUYsQ0FDQSx5Q0FFRSxxQ0FBc0MsQ0FEdEMscUJBRUYsQ0FDQSwwQ0FDRSwwQ0FDRixDQUNBLGlEQUdFLHdDQUF5QyxDQUZ6Qyx3Q0FBMEMsQ0FDMUMsZ0JBRUYsQ0FDQSxvRUFDRSxpQkFDRiIsImZpbGUiOiJSZW1vdmVCdXR0b24ubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uc3Itb25seSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDFweDtcbiAgaGVpZ2h0OiAxcHg7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogLTFweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY2xpcDogcmVjdCgwLCAwLCAwLCAwKTtcbiAgYm9yZGVyOiAwO1xufVxuXG4uaGlkZGVuIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLnNsaWRlLWluIHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1pbiAwLjVzIGZvcndhcmRzO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLWluIHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbi5zbGlkZS1vdXQge1xuICBhbmltYXRpb246IHNsaWRlLW91dCAwLjVzIGZvcndhcmRzO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLW91dCB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNsaWRlLWluIHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDAlKTtcbiAgfVxufVxuQGtleWZyYW1lcyBzbGlkZS1vdXQge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDAlKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG59XG4ucmVtb3ZlIHtcbiAgd2lkdGg6IDEuMjVyZW07XG4gIGhlaWdodDogMS4yNXJlbTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW4tcmlnaHQ6IC0wLjM3NXJlbTtcbn1cbi5yZW1vdmU6aG92ZXIge1xuICBib3JkZXItcmFkaXVzOiAwLjEyNXJlbTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItYmxhY2sxMCk7XG59XG4ucmVtb3ZlOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLWJsdWUtZ3JleTQwMCk7XG59XG4ucmVtb3ZlOmZvY3VzLXZpc2libGUge1xuICBvdXRsaW5lOiAwLjEyNXJlbSBzb2xpZCB2YXIoLS1jb2xvci1mb2N1cyk7XG4gIG91dGxpbmUtb2Zmc2V0OiAwO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1mb2N1cy1ib3JkZXItcmFkaXVzKTtcbn1cbi5yZW1vdmUgLmljb24ge1xuICBmb250LXNpemU6IDAuNjI1cmVtO1xufSJdfQ== */';var l={"sr-only":"RemoveButton-module_sr-only__395Xl",hidden:"RemoveButton-module_hidden__eKGPT","slide-in":"RemoveButton-module_slide-in__ZVj2V","slide-out":"RemoveButton-module_slide-out__2S-4s",remove:"RemoveButton-module_remove__Q60E1",icon:"RemoveButton-module_icon__4KpuX"};e(i);export{l as default};
+import e from "../../lib/style-inject.js";var i='/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.RemoveButton-module_sr-only__395Xl{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.RemoveButton-module_hidden__eKGPT{display:none}.RemoveButton-module_slide-in__ZVj2V{animation:RemoveButton-module_slide-in__ZVj2V .5s forwards}@media (prefers-reduced-motion:reduce){.RemoveButton-module_slide-in__ZVj2V{animation-duration:.1ms}}.RemoveButton-module_slide-out__2S-4s{animation:RemoveButton-module_slide-out__2S-4s .5s forwards}@media (prefers-reduced-motion:reduce){.RemoveButton-module_slide-out__2S-4s{animation-duration:.1ms}}@keyframes RemoveButton-module_slide-in__ZVj2V{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes RemoveButton-module_slide-out__2S-4s{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.RemoveButton-module_remove__Q60E1{background:none;border:none;cursor:pointer;height:1.25rem;margin-right:-.375rem;padding:0;width:1.25rem}.RemoveButton-module_remove__Q60E1:hover{background-color:var(--color-black10);border-radius:.125rem}.RemoveButton-module_remove__Q60E1:active{background-color:var(--color-blue-grey400)}.RemoveButton-module_remove__Q60E1:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.RemoveButton-module_remove__Q60E1 .RemoveButton-module_icon__4KpuX{font-size:.625rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlbW92ZUJ1dHRvbi5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRTtBQUNGOzs7Ozs7Ozs7Ozs7OztFQWNFO0FBQ0Y7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRixvQ0FPRSxrQkFBc0IsQ0FDdEIsUUFBUyxDQUxULFVBQVcsQ0FFWCxXQUFZLENBQ1osZUFBZ0IsQ0FGaEIsU0FBVSxDQUhWLGlCQUFrQixDQUNsQixTQU9GLENBRUEsbUNBQ0UsWUFDRixDQUVBLHFDQUNFLDBEQUNGLENBQ0EsdUNBQ0UscUNBQ0UsdUJBQ0YsQ0FDRixDQUVBLHNDQUNFLDJEQUNGLENBQ0EsdUNBQ0Usc0NBQ0UsdUJBQ0YsQ0FDRixDQUVBLCtDQUNFLEdBQ0UsMkJBQ0YsQ0FDQSxHQUNFLHVCQUNGLENBQ0YsQ0FDQSxnREFDRSxHQUNFLHVCQUNGLENBQ0EsR0FDRSwyQkFDRixDQUNGLENBQ0EsbUNBR0UsZUFBZ0IsQ0FDaEIsV0FBWSxDQUdaLGNBQWUsQ0FMZixjQUFlLENBSWYscUJBQXVCLENBRHZCLFNBQVUsQ0FKVixhQU9GLENBQ0EseUNBRUUscUNBQXNDLENBRHRDLHFCQUVGLENBQ0EsMENBQ0UsMENBQ0YsQ0FDQSxpREFHRSx3Q0FBeUMsQ0FGekMsd0NBQTBDLENBQzFDLGdCQUVGLENBQ0Esb0VBQ0UsaUJBQ0YiLCJmaWxlIjoiUmVtb3ZlQnV0dG9uLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4vKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnNyLW9ubHkge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxcHg7XG4gIGhlaWdodDogMXB4O1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IC0xcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGNsaXA6IHJlY3QoMCwgMCwgMCwgMCk7XG4gIGJvcmRlcjogMDtcbn1cblxuLmhpZGRlbiB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zbGlkZS1pbiB7XG4gIGFuaW1hdGlvbjogc2xpZGUtaW4gMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1pbiB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuXG4uc2xpZGUtb3V0IHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1vdXQgMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1vdXQge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBzbGlkZS1pbiB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtb3V0IHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxufVxuLnJlbW92ZSB7XG4gIHdpZHRoOiAxLjI1cmVtO1xuICBoZWlnaHQ6IDEuMjVyZW07XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luLXJpZ2h0OiAtMC4zNzVyZW07XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5yZW1vdmU6aG92ZXIge1xuICBib3JkZXItcmFkaXVzOiAwLjEyNXJlbTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItYmxhY2sxMCk7XG59XG4ucmVtb3ZlOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLWJsdWUtZ3JleTQwMCk7XG59XG4ucmVtb3ZlOmZvY3VzLXZpc2libGUge1xuICBvdXRsaW5lOiAwLjEyNXJlbSBzb2xpZCB2YXIoLS1jb2xvci1mb2N1cyk7XG4gIG91dGxpbmUtb2Zmc2V0OiAwO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1mb2N1cy1ib3JkZXItcmFkaXVzKTtcbn1cbi5yZW1vdmUgLmljb24ge1xuICBmb250LXNpemU6IDAuNjI1cmVtO1xufSJdfQ== */';var l={"sr-only":"RemoveButton-module_sr-only__395Xl",hidden:"RemoveButton-module_hidden__eKGPT","slide-in":"RemoveButton-module_slide-in__ZVj2V","slide-out":"RemoveButton-module_slide-out__2S-4s",remove:"RemoveButton-module_remove__Q60E1",icon:"RemoveButton-module_icon__4KpuX"};e(i);export{l as default};
 //# sourceMappingURL=RemoveButton.module.esm.js.map

package/dist/esm/_BaseStyling_/BaseStyling.esm.js

@@ -1,2 +1,2 @@
-import r,{useState as o,useRef as e,useEffect as l}from"react";const a=({children:a,properties:t={}})=>{const c={colorPrimary100:"#CDD0EA",colorPrimary300:"#6871BF",colorPrimary500:"#041295",colorPrimary600:"#030F77",colorPrimary700:"#020B59",colorPrimary900:"#01041E",colorPrimaryLight:"#E6E7F4",colorBlueGrey25:"#F7F7F9",colorBlueGrey25Transparent:"rgba(247, 247, 249, .8)",colorBlueGrey50:"#EEEFF3",colorBlueGrey100:"#DEDEE6",colorBlueGrey200:"#BCBECE",colorBlueGrey300:"#9A9DB5",colorBlueGrey400:"#797D9C",colorBlueGrey500:"#5D607E",colorBlueGrey700:"#383A4B",colorBlueGrey800:"#252733",colorBlueGrey900:"#131319",colorGreen100:"#D1E6DA",colorGreen200:"#A2CDB4",colorGreen500:"#178244",colorGreen600:"#126836",colorGreen700:"#0E4E29",colorLightBlue500:"#00BCDD",colorLightBlue600:"#0096B1",colorOrange100:"#FFE0B2",colorOrange500:"#E07900",colorOrange600:"#B36100",colorOrange700:"#864900",colorRed100:"#FFCDD2",colorRed200:"#F3A599",colorRed500:"#E01E00",colorRed600:"#B31800",colorRed700:"#861200",colorBlack100:"#000000",colorBlack20:"rgba(0, 0, 0, 0.2)",colorBlack10:"rgba(0, 0, 0, 0.1)",colorShadowBlue:"#7078C3",colorWhite:"#FFFFFF",colorFocus:"var(--color-primary300)",colorPrimary:"var(--color-primary500)",colorSuccess:"var(--color-green500)",colorWarning:"var(--color-orange500)",colorDanger:"var(--color-red500)",defaultPressedColor:"var(--color-blue-grey100)",defaultHoverColor:"var(--color-blue-grey25)",defaultLineHeight:"1.5",dataGridLineHeight:"1.25",defaultBorderRadius:"0.25rem",focusBorderRadius:"0.125rem",buttonBorderRadius:"0.125rem",buttonBorderWidth:"2px",buttonFontSize:"0.875rem",buttonBorderStyle:"solid",buttonFillTextColor:"var(--light)",buttonPrimaryDefaultColor:"var(--color-primary500)",buttonPrimaryHoverColor:"var(--color-primary600)",buttonPrimaryFocusedColor:"var(--color-primary500)",buttonPrimaryPressedColor:"var(--color-primary700)",buttonSuccessDefaultColor:"var(--color-green500)",buttonSuccessHoverColor:"var(--color-green600)",buttonSuccessFocusedColor:"var(--color-green500)",buttonSuccessPressedColor:"var(--color-green700)",buttonDangerDefaultColor:"var(--color-red500)",buttonDangerHoverColor:"var(--color-red600)",buttonDangerFocusedColor:"var(--color-red500)",buttonDangerPressedColor:"var(--color-red700)",buttonWarningDefaultColor:"var(--color-orange500)",buttonWarningHoverColor:"var(--color-orange600)",buttonWarningFocusedColor:"var(--color-orange500)",buttonWarningPressedColor:"var(--color-orange700)",buttonDefaultColor:"var(--color-blue-grey700)",buttonDefaultHoverColor:"var(--color-blue-grey800)",buttonDefaultFocusedColor:"var(--color-blue-grey700)",buttonDefaultPressedColor:"var(--color-blue-grey800)",buttonOutlineHoverTextColor:"var(--color-primary600)",checkboxUncheckedHoverColor:"var(--color-blue-grey50)",checkboxUncheckedPressedColor:"var(--default-pressed-color)",checkboxCheckedHoverColor:"var(--color-primary600)",checkboxCheckedPressedColor:"var(--color-primary700)",radioHoverBackgroundColor:"var(--color-blue-grey50)",radioPressedBackgroundColor:"var(--default-pressed-color)",radioHoverColor:"var(--color-primary600)",radioPressedColor:"var(--color-primary700)",inputBorderRadius:"2px",inputBorderWidth:"1px",inputBorderWidthFocus:"1px",inputBorderStyle:"solid",fileUploadBorderWidth:"1px",dragDropBorderStyle:"dashed",inputBorderColor:"var(--color-blue-grey500)",inputBackgroundColor:"var(--light)",inputHelperTextColor:"var(--color-blue-grey500)",inputHoverBackgroundColor:"var(--default-hover-color)",inputDisabledBackgroundColor:"var(--input-hover-background-color)",dragBackgroundColor:"var(--color-blue-grey25-transparent)",dragBorderStyle:"solid",modalShadowColor:"rgba(0, 0, 0, 0.16)",modalBackgroundColor:"var(--light)",modalBackdropColor:"var(--default)",skeletonBackgroundColor:"var(--disabled)",skeletonAnimationColorRgb:"255, 255, 255",snackbarTextColor:"var(--light)",snackbarInfoBackgroundColor:"var(--color-primary500)",snackbarSuccessBackgroundColor:"var(--color-green500)",snackbarErrorBackgroundColor:"var(--color-red500)",snackbarWarningBackgroundColor:"var(--color-orange500)",snackbarBorderRadius:"2px",alertTextColor:"var(--default)",alertTextInvertedColor:"var(--light)",alertNeutralBackgroundColor:"var(--color-blue-grey50)",alertNeutralInvertedColor:"var(--color-blue-grey500)",alertInfoBackgroundColor:"var(--color-primary100)",alertInfoInvertedColor:"var(--color-primary500)",alertSuccessBackgroundColor:"var(--color-green100)",alertSuccessInvertedColor:"var(--color-green500)",alertErrorBackgroundColor:"var(--color-red100)",alertErrorInvertedColor:"var(--color-red500)",alertWarningBackgroundColor:"var(--color-orange100)",alertWarningInvertedColor:"var(--color-orange500)",alertBorderWidth:"4px",alertBorderRadius:"2px",stepperWaitingColor:"var(--color-blue-grey200)",stepperWaitingHoverColor:"var(--color-blue-grey300)",stepperWaitingActiveColor:"var(--color-blue-grey400)",stepperWaitingDisabledColor:"var(--color-blue-grey100)",stepperCurrentColor:"var(--color-primary500)",stepperCurrentHoverColor:"var(--color-primary600)",stepperCurrentActiveColor:"var(--color-primary700)",stepperCurrentDisabledColor:"var(--color-primary100)",stepperDoneColor:"var(--color-green500)",stepperDoneHoverColor:"var(--color-green600)",stepperDoneActiveColor:"var(--color-green700)",stepperDoneDisabledColor:"var(--color-green200)",stepperErrorColor:"var(--color-red500)",stepperErrorHoverColor:"var(--color-red600)",stepperErrorActiveColor:"var(--color-red700)",stepperErrorDisabledColor:"var(--color-red200)",stepperDefaultTextColor:"var(--color-white)",stepperLineColor:"var(--color-blue-grey300)",stepperLineBoldColor:"var(--color-blue-grey700)",stepperLineDisabledColor:"var(--color-blue-grey100)",stepperLineBoldDisabledColor:"var(--color-blue-grey300)",stepperLabelColor:"var(--color-blue-grey900)",stepperCaptionColor:"var(--color-blue-grey500)",stepperCaptionErrorColor:"var(--color-red500)",stepperLabelDisabledColor:"var(--color-blue-grey400)",stepperCaptionDisabledColor:"var(--color-blue-grey400)",stepperCaptionErrorDisabledColor:"var(--color-red200)",bannerBorderRadius:"2px",bannerBorderWidth:"0 0 0 4px",dataGridRowBackgroundColor:"transparent",dataGridRowHoverBackgroundColor:"var(--default-hover-color)",progressBarBackgroundColor:"var(--disabled)",tabsBackgroundColor:"var(--light)",tabActiveBorderHeight:"0.25rem",tabActiveBorderColor:"var(--color-primary)",tabActiveTextColor:"var(--color-primary)",tablistBorderWidth:"0.0625rem",tablistBorderStyle:"solid",tablistBorderColor:"var(--color-blue-grey100)",tabTextColor:"var(--color-blue-grey900)",tabHoverColor:"var(--default-hover-color)",tabPressedColor:"var(--default-pressed-color)",toggleBackgroundColor:"var(--color-blue-grey100)",tooltipBackgroundColor:"var(--default)",wizardStepIndicatorFutureColor:"var(--color-blue-grey200)",contextMenuHoverColor:"var(--default-hover-color)",contextMenuPressedColor:"var(--default-pressed-color)",default:"var(--color-blue-grey900)",success:"var(--color-green500)",error:"var(--color-red500)",info:"var(--color-primary500)",disabled:"var(--color-blue-grey100)",greyedOut:"var(--color-blue-grey400)",lightGreyBorder:"var(--color-blue-grey100)",warning:"var(--color-orange500)",light:"var(--color-white)",fontFamily:"Roboto, sans-serif",fontFamilyCode:"'Roboto Mono', monospace",fontSizeFormLabel:"0.875rem",fontSize:"1rem",fontSizeH1:"2.5rem",fontSizeH2:"1.625rem",fontSizeH3:"1.5rem",fontSizeH4:"1.25rem",fontSizeSub:".75rem",fontSizeCode:"1rem",defaultZIndex1:"1",formControlFontSize:"0.875rem",fontSizeDataGrid:"0.875rem"};const[n,d]=o(true);const u=e(null);const i=r=>{for(const[o,e]of Object.entries(r)){const r=o.replace(/([A-Z])/g,(r=>`-${r.toLowerCase()}`));u.current.style.setProperty(`--${r}`,e)}};l((()=>{if(Object.keys(t).length!==0&&u.current){const r={...c,...t};i(r)}else if(u.current)i(c);d(false)}),[t,u.current]);return r.createElement("div",{className:"basestyling-wrapper",ref:u},!n?a:null)};export{a as BaseStyling};
+import r,{useState as o,useRef as e,useEffect as l}from"react";const a=({children:a,properties:t={}})=>{const c={colorPrimary100:"#CDD0EA",colorPrimary300:"#6871BF",colorPrimary500:"#041295",colorPrimary600:"#030F77",colorPrimary700:"#020B59",colorPrimary900:"#01041E",colorPrimaryLight:"#E6E7F4",colorBlueGrey25:"#F7F7F9",colorBlueGrey25Transparent:"rgba(247, 247, 249, .8)",colorBlueGrey50:"#EEEFF3",colorBlueGrey100:"#DEDEE6",colorBlueGrey200:"#BCBECE",colorBlueGrey300:"#9A9DB5",colorBlueGrey400:"#797D9C",colorBlueGrey500:"#5D607E",colorBlueGrey700:"#383A4B",colorBlueGrey800:"#252733",colorBlueGrey900:"#131319",colorGreen100:"#D1E6DA",colorGreen200:"#A2CDB4",colorGreen500:"#178244",colorGreen600:"#126836",colorGreen700:"#0E4E29",colorLightBlue500:"#00BCDD",colorLightBlue600:"#0096B1",colorOrange100:"#FFE0B2",colorOrange500:"#E07900",colorOrange600:"#B36100",colorOrange700:"#864900",colorRed100:"#FFCDD2",colorRed200:"#F3A599",colorRed500:"#E01E00",colorRed600:"#B31800",colorRed700:"#861200",colorBlack100:"#000000",colorBlack20:"rgba(0, 0, 0, 0.2)",colorBlack10:"rgba(0, 0, 0, 0.1)",colorShadowBlue:"#7078C3",colorWhite:"#FFFFFF",colorFocus:"var(--color-primary300)",colorPrimary:"var(--color-primary500)",colorSuccess:"var(--color-green500)",colorWarning:"var(--color-orange500)",colorDanger:"var(--color-red500)",defaultPressedColor:"var(--color-blue-grey100)",defaultHoverColor:"var(--color-blue-grey25)",defaultLineHeight:"1.5",dataGridLineHeight:"1.25",defaultBorderRadius:"0.25rem",focusBorderRadius:"0.125rem",buttonBorderRadius:"0.125rem",buttonBorderWidth:"2px",buttonFontSize:"0.875rem",buttonBorderStyle:"solid",buttonFillTextColor:"var(--light)",buttonPrimaryDefaultColor:"var(--color-primary500)",buttonPrimaryHoverColor:"var(--color-primary600)",buttonPrimaryFocusedColor:"var(--color-primary500)",buttonPrimaryPressedColor:"var(--color-primary700)",buttonSuccessDefaultColor:"var(--color-green500)",buttonSuccessHoverColor:"var(--color-green600)",buttonSuccessFocusedColor:"var(--color-green500)",buttonSuccessPressedColor:"var(--color-green700)",buttonDangerDefaultColor:"var(--color-red500)",buttonDangerHoverColor:"var(--color-red600)",buttonDangerFocusedColor:"var(--color-red500)",buttonDangerPressedColor:"var(--color-red700)",buttonWarningDefaultColor:"var(--color-orange500)",buttonWarningHoverColor:"var(--color-orange600)",buttonWarningFocusedColor:"var(--color-orange500)",buttonWarningPressedColor:"var(--color-orange700)",buttonDefaultColor:"var(--color-blue-grey700)",buttonDefaultHoverColor:"var(--color-blue-grey800)",buttonDefaultFocusedColor:"var(--color-blue-grey700)",buttonDefaultPressedColor:"var(--color-blue-grey800)",buttonOutlineHoverTextColor:"var(--color-primary600)",checkboxUncheckedHoverColor:"var(--color-blue-grey50)",checkboxUncheckedPressedColor:"var(--default-pressed-color)",checkboxCheckedHoverColor:"var(--color-primary600)",checkboxCheckedPressedColor:"var(--color-primary700)",radioHoverBackgroundColor:"var(--color-blue-grey50)",radioPressedBackgroundColor:"var(--default-pressed-color)",radioHoverColor:"var(--color-primary600)",radioPressedColor:"var(--color-primary700)",inputBorderRadius:"2px",inputBorderWidth:"1px",inputBorderWidthFocus:"1px",inputBorderStyle:"solid",fileUploadBorderWidth:"1px",dragDropBorderStyle:"dashed",inputBorderColor:"var(--color-blue-grey500)",inputBackgroundColor:"var(--light)",inputHelperTextColor:"var(--color-blue-grey500)",inputHoverBackgroundColor:"var(--default-hover-color)",inputDisabledBackgroundColor:"var(--input-hover-background-color)",dragBackgroundColor:"var(--color-blue-grey25-transparent)",dragBorderStyle:"solid",modalShadowColor:"rgba(0, 0, 0, 0.16)",modalBackgroundColor:"var(--light)",modalBackdropColor:"var(--default)",skeletonBackgroundColor:"var(--disabled)",skeletonAnimationColorRgb:"255, 255, 255",alertTextColor:"var(--default)",alertTextInvertedColor:"var(--light)",alertNeutralBackgroundColor:"var(--color-blue-grey50)",alertNeutralInvertedColor:"var(--color-blue-grey500)",alertInfoBackgroundColor:"var(--color-primary100)",alertInfoInvertedColor:"var(--color-primary500)",alertSuccessBackgroundColor:"var(--color-green100)",alertSuccessInvertedColor:"var(--color-green500)",alertErrorBackgroundColor:"var(--color-red100)",alertErrorInvertedColor:"var(--color-red500)",alertWarningBackgroundColor:"var(--color-orange100)",alertWarningInvertedColor:"var(--color-orange500)",alertBorderWidth:"4px",alertBorderRadius:"2px",stepperWaitingColor:"var(--color-blue-grey200)",stepperWaitingHoverColor:"var(--color-blue-grey300)",stepperWaitingActiveColor:"var(--color-blue-grey400)",stepperWaitingDisabledColor:"var(--color-blue-grey100)",stepperCurrentColor:"var(--color-primary500)",stepperCurrentHoverColor:"var(--color-primary600)",stepperCurrentActiveColor:"var(--color-primary700)",stepperCurrentDisabledColor:"var(--color-primary100)",stepperDoneColor:"var(--color-green500)",stepperDoneHoverColor:"var(--color-green600)",stepperDoneActiveColor:"var(--color-green700)",stepperDoneDisabledColor:"var(--color-green200)",stepperErrorColor:"var(--color-red500)",stepperErrorHoverColor:"var(--color-red600)",stepperErrorActiveColor:"var(--color-red700)",stepperErrorDisabledColor:"var(--color-red200)",stepperDefaultTextColor:"var(--color-white)",stepperLineColor:"var(--color-blue-grey300)",stepperLineBoldColor:"var(--color-blue-grey700)",stepperLineDisabledColor:"var(--color-blue-grey100)",stepperLineBoldDisabledColor:"var(--color-blue-grey300)",stepperLabelColor:"var(--color-blue-grey900)",stepperCaptionColor:"var(--color-blue-grey500)",stepperCaptionErrorColor:"var(--color-red500)",stepperLabelDisabledColor:"var(--color-blue-grey400)",stepperCaptionDisabledColor:"var(--color-blue-grey400)",stepperCaptionErrorDisabledColor:"var(--color-red200)",bannerBorderRadius:"2px",bannerBorderWidth:"0 0 0 4px",dataGridRowBackgroundColor:"transparent",dataGridRowHoverBackgroundColor:"var(--default-hover-color)",progressBarBackgroundColor:"var(--disabled)",tabsBackgroundColor:"var(--light)",tabActiveBorderHeight:"0.25rem",tabActiveBorderColor:"var(--color-primary)",tabActiveTextColor:"var(--color-primary)",tablistBorderWidth:"0.0625rem",tablistBorderStyle:"solid",tablistBorderColor:"var(--color-blue-grey100)",tabTextColor:"var(--color-blue-grey900)",tabHoverColor:"var(--default-hover-color)",tabPressedColor:"var(--default-pressed-color)",toggleBackgroundColor:"var(--color-blue-grey100)",tooltipBackgroundColor:"var(--default)",contextMenuHoverColor:"var(--default-hover-color)",contextMenuPressedColor:"var(--default-pressed-color)",default:"var(--color-blue-grey900)",success:"var(--color-green500)",error:"var(--color-red500)",info:"var(--color-primary500)",disabled:"var(--color-blue-grey100)",greyedOut:"var(--color-blue-grey400)",lightGreyBorder:"var(--color-blue-grey100)",warning:"var(--color-orange500)",light:"var(--color-white)",fontFamily:"Roboto, sans-serif",fontFamilyCode:"'Roboto Mono', monospace",fontSizeFormLabel:"0.875rem",fontSize:"1rem",fontSizeH1:"2.5rem",fontSizeH2:"1.625rem",fontSizeH3:"1.5rem",fontSizeH4:"1.25rem",fontSizeSub:".75rem",fontSizeCode:"1rem",formControlFontSize:"0.875rem",fontSizeDataGrid:"0.875rem"};const[n,d]=o(true);const u=e(null);const i=r=>{for(const[o,e]of Object.entries(r)){const r=o.replace(/([A-Z])/g,(r=>`-${r.toLowerCase()}`));u.current.style.setProperty(`--${r}`,e)}};l((()=>{if(Object.keys(t).length!==0&&u.current){const r={...c,...t};i(r)}else if(u.current)i(c);d(false)}),[t,u.current]);return r.createElement("div",{className:"basestyling-wrapper",ref:u},!n?a:null)};export{a as BaseStyling};
 //# sourceMappingURL=BaseStyling.esm.js.map

package/dist/esm/_BaseStyling_/BaseStyling.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStyling.esm.js","sources":["../../../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\n\ninterface CSSProperties {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorDanger?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  colorPrimaryLight?: string;\n  colorBlueGrey100?: string;\n  colorBlueGrey200?: string;\n  colorBlueGrey300?: string;\n  colorBlueGrey400?: string;\n  colorBlueGrey25?: string;\n  colorBlueGrey25Transparent?: string;\n  colorBlueGrey50?: string;\n  colorBlueGrey500?: string;\n  colorBlueGrey700?: string;\n  colorBlueGrey800?: string;\n  colorBlueGrey900?: string;\n  colorGreen100?: string;\n  colorGreen200?: string;\n  colorGreen500?: string;\n  colorGreen600?: string;\n  colorGreen700?: string;\n  colorLightBlue500?: string;\n  colorLightBlue600?: string;\n  colorShadowBlue?: string;\n  colorOrange100?: string;\n  colorOrange500?: string;\n  colorOrange600?: string;\n  colorOrange700?: string;\n  colorRed100?: string;\n  colorRed200?: string;\n  colorRed500?: string;\n  colorRed600?: string;\n  colorRed700?: string;\n  colorWhite?: string;\n  colorBlack100?: string;\n  colorBlack20?: string;\n  colorBlack10?: string;\n  defaultPressedColor?: string;\n  defaultHoverColor?: string;\n  defaultLineHeight?: string;\n  dataGridLineHeight?: string;\n  focusBorderRadius?: string;\n  buttonBorderRadius?: string;\n  buttonBorderWidth?: string;\n  buttonFontSize?: string;\n  buttonBorderStyle?: string;\n  buttonPrimaryDefaultColor?: string;\n  buttonPrimaryPressedColor?: string;\n  buttonFillTextColor?: string;\n  buttonPrimaryHoverColor?: string;\n  buttonPrimaryFocusedColor?: string;\n  buttonOutlineHoverTextColor?: string;\n  buttonSuccessDefaultColor?: string;\n  buttonSuccessHoverColor?: string;\n  buttonSuccessFocusedColor?: string;\n  buttonSuccessPressedColor?: string;\n  buttonDangerDefaultColor?: string;\n  buttonDangerHoverColor?: string;\n  buttonDangerFocusedColor?: string;\n  buttonDangerPressedColor?: string;\n  buttonWarningDefaultColor?: string;\n  buttonWarningHoverColor?: string;\n  buttonWarningFocusedColor?: string;\n  buttonWarningPressedColor?: string;\n  buttonDefaultColor?: string;\n  buttonDefaultHoverColor?: string;\n  buttonDefaultFocusedColor?: string;\n  buttonDefaultPressedColor?: string;\n  buttonOutlineActiveTextColor?: string;\n  checkboxUncheckedHoverColor?: string;\n  checkboxUncheckedPressedColor?: string;\n  checkboxCheckedHoverColor?: string;\n  checkboxCheckedPressedColor?: string;\n  radioHoverBackgroundColor?: string;\n  radioPressedBackgroundColor?: string;\n  radioHoverColor?: string;\n  radioPressedColor?: string;\n  defaultBorderRadius?: string;\n  inputBorderRadius?: string;\n  inputBorderWidth?: string;\n  inputBorderWidthFocus?: string;\n  inputBorderStyle?: string;\n  inputBorderColor?: string;\n  inputBackgroundColor?: string;\n  inputHelperTextColor?: string;\n  inputHoverBackgroundColor?: string;\n  inputDisabledBackgroundColor?: string;\n  dragBackgroundColor?: string;\n  dragBorderStyle?: string;\n  modalShadowColor?: string;\n  modalBackgroundColor?: string;\n  modalBackdropColor?: string;\n  skeletonBackgroundColor?: string;\n  skeletonAnimationColorRgb?: string;\n\n  /**\n   * @deprecated\n   */\n  snackbarTextColor?: string;\n  /**\n   * @deprecated\n   */\n  snackbarInfoBackgroundColor?: string;\n  /**\n   * @deprecated\n   */\n  snackbarSuccessBackgroundColor?: string;\n  /**\n   * @deprecated\n   */\n  snackbarErrorBackgroundColor?: string;\n  /**\n   * @deprecated\n   */\n  snackbarWarningBackgroundColor?: string;\n  /**\n   * @deprecated\n   */\n  snackbarBorderRadius?: string;\n\n  alertTextColor?: string;\n  alertTextInvertedColor?: string;\n\n  alertNeutralBackgroundColor?: string;\n  alertInfoBackgroundColor?: string;\n  alertSuccessBackgroundColor?: string;\n  alertErrorBackgroundColor?: string;\n  alertWarningBackgroundColor?: string;\n\n  alertNeutralInvertedColor?: string;\n  alertInfoInvertedColor?: string;\n  alertSuccessInvertedColor?: string;\n  alertErrorInvertedColor?: string;\n  alertWarningInvertedColor?: string;\n\n  alertBorderWidth?: string;\n  alertBorderRadius?: string;\n\n  stepperWaitingColor?: string;\n  stepperWaitingHoverColor?: string;\n  stepperWaitingActiveColor?: string;\n  stepperWaitingDisabledColor?: string;\n  stepperCurrentColor?: string;\n  stepperCurrentHoverColor?: string;\n  stepperCurrentActiveColor?: string;\n  stepperCurrentDisabledColor?: string;\n  stepperDoneColor?: string;\n  stepperDoneHoverColor?: string;\n  stepperDoneActiveColor?: string;\n  stepperDoneDisabledColor?: string;\n  stepperErrorColor?: string;\n  stepperErrorHoverColor?: string;\n  stepperErrorActiveColor?: string;\n  stepperErrorDisabledColor?: string;\n  stepperDefaultTextColor?: string;\n  stepperLineColor?: string;\n  stepperLineBoldColor?: string;\n  stepperLineDisabledColor?: string;\n  stepperLineBoldDisabledColor?: string;\n  stepperLabelColor?: string;\n  stepperCaptionColor?: string;\n  stepperCaptionErrorColor?: string;\n  stepperLabelDisabledColor?: string;\n  stepperCaptionDisabledColor?: string;\n  stepperCaptionErrorDisabledColor?: string;\n  bannerBorderRadius?: string;\n  bannerBorderWidth?: string;\n  dataGridRowBackgroundColor?: string;\n  dataGridRowHoverBackgroundColor?: string;\n  progressBarBackgroundColor?: string;\n  tabsBackgroundColor?: string;\n  tabActiveBorderHeight?: string;\n  tabActiveBorderColor?: string;\n  tabActiveTextColor?: string;\n  tablistBorderWidth?: string;\n  tablistBorderStyle?: string;\n  tablistBorderColor?: string;\n  tabTextColor?: string;\n  tabHoverColor?: string;\n  tabPressedColor?: string;\n  toggleBackgroundColor?: string;\n  tooltipBackgroundColor?: string;\n  wizardStepIndicatorFutureColor?: string;\n  contextMenuHoverColor?: string;\n  contextMenuPressedColor?: string;\n  default?: string;\n  success?: string;\n  error?: string;\n  info?: string;\n  disabled?: string;\n  greyedOut?: string;\n  lightGreyBorder?: string;\n  warning?: string;\n  light?: string;\n  fontFamily?: string;\n  fontFamilyCode?: string;\n  fontSizeFormLabel?: string;\n  fontSize?: string;\n  fontSizeH1?: string;\n  fontSizeH2?: string;\n  fontSizeH3?: string;\n  fontSizeH4?: string;\n  fontSizeSub?: string;\n  fontSizeCode?: string;\n  formControlFontSize?: string;\n  fileUploadBorderWidth?: string;\n  dragDropBorderStyle?: string;\n  defaultZIndex1?: string;\n  fontSizeDataGrid?: string;\n}\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactElement[] | ReactElement | string[] | string | number[] | number;\n  properties?: CSSProperties;\n}\n\nexport const BaseStyling = ({ children, properties = {} }: Props) => {\n  const defaultProperties: CSSProperties = {\n    colorPrimary100: \"#CDD0EA\",\n    colorPrimary300: \"#6871BF\",\n    colorPrimary500: \"#041295\",\n    colorPrimary600: \"#030F77\",\n    colorPrimary700: \"#020B59\",\n    colorPrimary900: \"#01041E\",\n    colorPrimaryLight: \"#E6E7F4\",\n    colorBlueGrey25: \"#F7F7F9\",\n    colorBlueGrey25Transparent: \"rgba(247, 247, 249, .8)\",\n    colorBlueGrey50: \"#EEEFF3\",\n    colorBlueGrey100: \"#DEDEE6\",\n    colorBlueGrey200: \"#BCBECE\",\n    colorBlueGrey300: \"#9A9DB5\",\n    colorBlueGrey400: \"#797D9C\",\n    colorBlueGrey500: \"#5D607E\",\n    colorBlueGrey700: \"#383A4B\",\n    colorBlueGrey800: \"#252733\",\n    colorBlueGrey900: \"#131319\",\n    colorGreen100: \"#D1E6DA\",\n    colorGreen200: \"#A2CDB4\",\n    colorGreen500: \"#178244\",\n    colorGreen600: \"#126836\",\n    colorGreen700: \"#0E4E29\",\n    colorLightBlue500: \"#00BCDD\",\n    colorLightBlue600: \"#0096B1\",\n    colorOrange100: \"#FFE0B2\",\n    colorOrange500: \"#E07900\",\n    colorOrange600: \"#B36100\",\n    colorOrange700: \"#864900\",\n    colorRed100: \"#FFCDD2\",\n    colorRed200: \"#F3A599\",\n    colorRed500: \"#E01E00\",\n    colorRed600: \"#B31800\",\n    colorRed700: \"#861200\",\n    colorBlack100: \"#000000\",\n    colorBlack20: \"rgba(0, 0, 0, 0.2)\",\n    colorBlack10: \"rgba(0, 0, 0, 0.1)\",\n    colorShadowBlue: \"#7078C3\",\n    colorWhite: \"#FFFFFF\",\n    colorFocus: \"var(--color-primary300)\",\n    colorPrimary: \"var(--color-primary500)\",\n    colorSuccess: \"var(--color-green500)\",\n    colorWarning: \"var(--color-orange500)\",\n    colorDanger: \"var(--color-red500)\",\n    defaultPressedColor: \"var(--color-blue-grey100)\",\n    defaultHoverColor: \"var(--color-blue-grey25)\",\n    defaultLineHeight: \"1.5\", //FIXME: UCL-395\n    dataGridLineHeight: \"1.25\",\n    defaultBorderRadius: \"0.25rem\",\n    focusBorderRadius: \"0.125rem\",\n    buttonBorderRadius: \"0.125rem\",\n    buttonBorderWidth: \"2px\",\n    buttonFontSize: \"0.875rem\",\n    buttonBorderStyle: \"solid\",\n    buttonFillTextColor: \"var(--light)\",\n    buttonPrimaryDefaultColor: \"var(--color-primary500)\",\n    buttonPrimaryHoverColor: \"var(--color-primary600)\",\n    buttonPrimaryFocusedColor: \"var(--color-primary500)\",\n    buttonPrimaryPressedColor: \"var(--color-primary700)\",\n    buttonSuccessDefaultColor: \"var(--color-green500)\",\n    buttonSuccessHoverColor: \"var(--color-green600)\",\n    buttonSuccessFocusedColor: \"var(--color-green500)\",\n    buttonSuccessPressedColor: \"var(--color-green700)\",\n    buttonDangerDefaultColor: \"var(--color-red500)\",\n    buttonDangerHoverColor: \"var(--color-red600)\",\n    buttonDangerFocusedColor: \"var(--color-red500)\",\n    buttonDangerPressedColor: \"var(--color-red700)\",\n    buttonWarningDefaultColor: \"var(--color-orange500)\",\n    buttonWarningHoverColor: \"var(--color-orange600)\",\n    buttonWarningFocusedColor: \"var(--color-orange500)\",\n    buttonWarningPressedColor: \"var(--color-orange700)\",\n    buttonDefaultColor: \"var(--color-blue-grey700)\",\n    buttonDefaultHoverColor: \"var(--color-blue-grey800)\",\n    buttonDefaultFocusedColor: \"var(--color-blue-grey700)\",\n    buttonDefaultPressedColor: \"var(--color-blue-grey800)\",\n    buttonOutlineHoverTextColor: \"var(--color-primary600)\",\n    checkboxUncheckedHoverColor: \"var(--color-blue-grey50)\",\n    checkboxUncheckedPressedColor: \"var(--default-pressed-color)\",\n    checkboxCheckedHoverColor: \"var(--color-primary600)\",\n    checkboxCheckedPressedColor: \"var(--color-primary700)\",\n    radioHoverBackgroundColor: \"var(--color-blue-grey50)\",\n    radioPressedBackgroundColor: \"var(--default-pressed-color)\",\n    radioHoverColor: \"var(--color-primary600)\",\n    radioPressedColor: \"var(--color-primary700)\",\n    inputBorderRadius: \"2px\",\n    inputBorderWidth: \"1px\",\n    inputBorderWidthFocus: \"1px\",\n    inputBorderStyle: \"solid\",\n    fileUploadBorderWidth: \"1px\",\n    dragDropBorderStyle: \"dashed\",\n    inputBorderColor: \"var(--color-blue-grey500)\",\n    inputBackgroundColor: \"var(--light)\",\n    inputHelperTextColor: \"var(--color-blue-grey500)\",\n    inputHoverBackgroundColor: \"var(--default-hover-color)\",\n    inputDisabledBackgroundColor: \"var(--input-hover-background-color)\",\n    dragBackgroundColor: \"var(--color-blue-grey25-transparent)\",\n    dragBorderStyle: \"solid\",\n    modalShadowColor: \"rgba(0, 0, 0, 0.16)\",\n    modalBackgroundColor: \"var(--light)\",\n    modalBackdropColor: \"var(--default)\",\n    skeletonBackgroundColor: \"var(--disabled)\",\n    skeletonAnimationColorRgb: \"255, 255, 255\",\n\n    snackbarTextColor: \"var(--light)\",\n    snackbarInfoBackgroundColor: \"var(--color-primary500)\",\n    snackbarSuccessBackgroundColor: \"var(--color-green500)\",\n    snackbarErrorBackgroundColor: \"var(--color-red500)\",\n    snackbarWarningBackgroundColor: \"var(--color-orange500)\",\n    snackbarBorderRadius: \"2px\",\n\n    alertTextColor: \"var(--default)\",\n    alertTextInvertedColor: \"var(--light)\",\n\n    alertNeutralBackgroundColor: \"var(--color-blue-grey50)\",\n    alertNeutralInvertedColor: \"var(--color-blue-grey500)\",\n\n    alertInfoBackgroundColor: \"var(--color-primary100)\",\n    alertInfoInvertedColor: \"var(--color-primary500)\",\n\n    alertSuccessBackgroundColor: \"var(--color-green100)\",\n    alertSuccessInvertedColor: \"var(--color-green500)\",\n\n    alertErrorBackgroundColor: \"var(--color-red100)\",\n    alertErrorInvertedColor: \"var(--color-red500)\",\n\n    alertWarningBackgroundColor: \"var(--color-orange100)\",\n    alertWarningInvertedColor: \"var(--color-orange500)\",\n\n    alertBorderWidth: \"4px\",\n    alertBorderRadius: \"2px\",\n\n    stepperWaitingColor: \"var(--color-blue-grey200)\",\n    stepperWaitingHoverColor: \"var(--color-blue-grey300)\",\n    stepperWaitingActiveColor: \"var(--color-blue-grey400)\",\n    stepperWaitingDisabledColor: \"var(--color-blue-grey100)\",\n    stepperCurrentColor: \"var(--color-primary500)\",\n    stepperCurrentHoverColor: \"var(--color-primary600)\",\n    stepperCurrentActiveColor: \"var(--color-primary700)\",\n    stepperCurrentDisabledColor: \"var(--color-primary100)\",\n    stepperDoneColor: \"var(--color-green500)\",\n    stepperDoneHoverColor: \"var(--color-green600)\",\n    stepperDoneActiveColor: \"var(--color-green700)\",\n    stepperDoneDisabledColor: \"var(--color-green200)\",\n    stepperErrorColor: \"var(--color-red500)\",\n    stepperErrorHoverColor: \"var(--color-red600)\",\n    stepperErrorActiveColor: \"var(--color-red700)\",\n    stepperErrorDisabledColor: \"var(--color-red200)\",\n    stepperDefaultTextColor: \"var(--color-white)\",\n    stepperLineColor: \"var(--color-blue-grey300)\",\n    stepperLineBoldColor: \"var(--color-blue-grey700)\",\n    stepperLineDisabledColor: \"var(--color-blue-grey100)\",\n    stepperLineBoldDisabledColor: \"var(--color-blue-grey300)\",\n    stepperLabelColor: \"var(--color-blue-grey900)\",\n    stepperCaptionColor: \"var(--color-blue-grey500)\",\n    stepperCaptionErrorColor: \"var(--color-red500)\",\n    stepperLabelDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionErrorDisabledColor: \"var(--color-red200)\",\n    bannerBorderRadius: \"2px\",\n    bannerBorderWidth: \"0 0 0 4px\",\n    dataGridRowBackgroundColor: \"transparent\",\n    dataGridRowHoverBackgroundColor: \"var(--default-hover-color)\",\n    progressBarBackgroundColor: \"var(--disabled)\",\n    tabsBackgroundColor: \"var(--light)\",\n    tabActiveBorderHeight: \"0.25rem\",\n    tabActiveBorderColor: \"var(--color-primary)\",\n    tabActiveTextColor: \"var(--color-primary)\",\n    tablistBorderWidth: \"0.0625rem\",\n    tablistBorderStyle: \"solid\",\n    tablistBorderColor: \"var(--color-blue-grey100)\",\n    tabTextColor: \"var(--color-blue-grey900)\",\n    tabHoverColor: \"var(--default-hover-color)\",\n    tabPressedColor: \"var(--default-pressed-color)\",\n    toggleBackgroundColor: \"var(--color-blue-grey100)\",\n    tooltipBackgroundColor: \"var(--default)\",\n    wizardStepIndicatorFutureColor: \"var(--color-blue-grey200)\",\n    contextMenuHoverColor: \"var(--default-hover-color)\",\n    contextMenuPressedColor: \"var(--default-pressed-color)\",\n    default: \"var(--color-blue-grey900)\",\n    success: \"var(--color-green500)\",\n    error: \"var(--color-red500)\",\n    info: \"var(--color-primary500)\",\n    disabled: \"var(--color-blue-grey100)\",\n    greyedOut: \"var(--color-blue-grey400)\",\n    lightGreyBorder: \"var(--color-blue-grey100)\",\n    warning: \"var(--color-orange500)\",\n    light: \"var(--color-white)\",\n    fontFamily: \"Roboto, sans-serif\",\n    fontFamilyCode: \"'Roboto Mono', monospace\",\n    fontSizeFormLabel: \"0.875rem\", //FIXME: UCL-395\n    fontSize: \"1rem\", //FIXME: UCL-395\n    fontSizeH1: \"2.5rem\",\n    fontSizeH2: \"1.625rem\",\n    fontSizeH3: \"1.5rem\",\n    fontSizeH4: \"1.25rem\",\n    fontSizeSub: \".75rem\",\n    fontSizeCode: \"1rem\",\n    defaultZIndex1: \"1\",\n    formControlFontSize: \"0.875rem\", //FIXME: UCL-395\n    fontSizeDataGrid: \"0.875rem\" //FIXME: UCL-395\n  };\n\n  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */\n  const [isLoading, setIsLoading] = useState(true);\n  const baseStylingWrapper = useRef(null);\n\n  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {\n    for (const [key, value] of Object.entries(CSSPropertiesObject)) {\n      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);\n      (baseStylingWrapper.current! as HTMLElement).style.setProperty(\n        `--${formattedPropertyName}`,\n        value\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {\n      const mergedState = { ...defaultProperties, ...properties };\n      setCSSProperties(mergedState);\n    } else if (baseStylingWrapper.current) {\n      setCSSProperties(defaultProperties);\n    }\n    setIsLoading(false);\n  }, [properties, baseStylingWrapper.current]);\n\n  return (\n    <div className=\"basestyling-wrapper\" ref={baseStylingWrapper}>\n      {!isLoading ? children : null}\n    </div>\n  );\n};\n"],"names":["BaseStyling","children","properties","defaultProperties","colorPrimary100","colorPrimary300","colorPrimary500","colorPrimary600","colorPrimary700","colorPrimary900","colorPrimaryLight","colorBlueGrey25","colorBlueGrey25Transparent","colorBlueGrey50","colorBlueGrey100","colorBlueGrey200","colorBlueGrey300","colorBlueGrey400","colorBlueGrey500","colorBlueGrey700","colorBlueGrey800","colorBlueGrey900","colorGreen100","colorGreen200","colorGreen500","colorGreen600","colorGreen700","colorLightBlue500","colorLightBlue600","colorOrange100","colorOrange500","colorOrange600","colorOrange700","colorRed100","colorRed200","colorRed500","colorRed600","colorRed700","colorBlack100","colorBlack20","colorBlack10","colorShadowBlue","colorWhite","colorFocus","colorPrimary","colorSuccess","colorWarning","colorDanger","defaultPressedColor","defaultHoverColor","defaultLineHeight","dataGridLineHeight","defaultBorderRadius","focusBorderRadius","buttonBorderRadius","buttonBorderWidth","buttonFontSize","buttonBorderStyle","buttonFillTextColor","buttonPrimaryDefaultColor","buttonPrimaryHoverColor","buttonPrimaryFocusedColor","buttonPrimaryPressedColor","buttonSuccessDefaultColor","buttonSuccessHoverColor","buttonSuccessFocusedColor","buttonSuccessPressedColor","buttonDangerDefaultColor","buttonDangerHoverColor","buttonDangerFocusedColor","buttonDangerPressedColor","buttonWarningDefaultColor","buttonWarningHoverColor","buttonWarningFocusedColor","buttonWarningPressedColor","buttonDefaultColor","buttonDefaultHoverColor","buttonDefaultFocusedColor","buttonDefaultPressedColor","buttonOutlineHoverTextColor","checkboxUncheckedHoverColor","checkboxUncheckedPressedColor","checkboxCheckedHoverColor","checkboxCheckedPressedColor","radioHoverBackgroundColor","radioPressedBackgroundColor","radioHoverColor","radioPressedColor","inputBorderRadius","inputBorderWidth","inputBorderWidthFocus","inputBorderStyle","fileUploadBorderWidth","dragDropBorderStyle","inputBorderColor","inputBackgroundColor","inputHelperTextColor","inputHoverBackgroundColor","inputDisabledBackgroundColor","dragBackgroundColor","dragBorderStyle","modalShadowColor","modalBackgroundColor","modalBackdropColor","skeletonBackgroundColor","skeletonAnimationColorRgb","snackbarTextColor","snackbarInfoBackgroundColor","snackbarSuccessBackgroundColor","snackbarErrorBackgroundColor","snackbarWarningBackgroundColor","snackbarBorderRadius","alertTextColor","alertTextInvertedColor","alertNeutralBackgroundColor","alertNeutralInvertedColor","alertInfoBackgroundColor","alertInfoInvertedColor","alertSuccessBackgroundColor","alertSuccessInvertedColor","alertErrorBackgroundColor","alertErrorInvertedColor","alertWarningBackgroundColor","alertWarningInvertedColor","alertBorderWidth","alertBorderRadius","stepperWaitingColor","stepperWaitingHoverColor","stepperWaitingActiveColor","stepperWaitingDisabledColor","stepperCurrentColor","stepperCurrentHoverColor","stepperCurrentActiveColor","stepperCurrentDisabledColor","stepperDoneColor","stepperDoneHoverColor","stepperDoneActiveColor","stepperDoneDisabledColor","stepperErrorColor","stepperErrorHoverColor","stepperErrorActiveColor","stepperErrorDisabledColor","stepperDefaultTextColor","stepperLineColor","stepperLineBoldColor","stepperLineDisabledColor","stepperLineBoldDisabledColor","stepperLabelColor","stepperCaptionColor","stepperCaptionErrorColor","stepperLabelDisabledColor","stepperCaptionDisabledColor","stepperCaptionErrorDisabledColor","bannerBorderRadius","bannerBorderWidth","dataGridRowBackgroundColor","dataGridRowHoverBackgroundColor","progressBarBackgroundColor","tabsBackgroundColor","tabActiveBorderHeight","tabActiveBorderColor","tabActiveTextColor","tablistBorderWidth","tablistBorderStyle","tablistBorderColor","tabTextColor","tabHoverColor","tabPressedColor","toggleBackgroundColor","tooltipBackgroundColor","wizardStepIndicatorFutureColor","contextMenuHoverColor","contextMenuPressedColor","default","success","error","info","disabled","greyedOut","lightGreyBorder","warning","light","fontFamily","fontFamilyCode","fontSizeFormLabel","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeSub","fontSizeCode","defaultZIndex1","formControlFontSize","fontSizeDataGrid","isLoading","setIsLoading","useState","baseStylingWrapper","useRef","setCSSProperties","CSSPropertiesObject","key","value","Object","entries","formattedPropertyName","replace","val","toLowerCase","current","style","setProperty","useEffect","keys","length","mergedState","React","className","ref"],"mappings":"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"}
+{"version":3,"file":"BaseStyling.esm.js","sources":["../../../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\n\ninterface CSSProperties {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorDanger?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  colorPrimaryLight?: string;\n  colorBlueGrey100?: string;\n  colorBlueGrey200?: string;\n  colorBlueGrey300?: string;\n  colorBlueGrey400?: string;\n  colorBlueGrey25?: string;\n  colorBlueGrey25Transparent?: string;\n  colorBlueGrey50?: string;\n  colorBlueGrey500?: string;\n  colorBlueGrey700?: string;\n  colorBlueGrey800?: string;\n  colorBlueGrey900?: string;\n  colorGreen100?: string;\n  colorGreen200?: string;\n  colorGreen500?: string;\n  colorGreen600?: string;\n  colorGreen700?: string;\n  colorLightBlue500?: string;\n  colorLightBlue600?: string;\n  colorShadowBlue?: string;\n  colorOrange100?: string;\n  colorOrange500?: string;\n  colorOrange600?: string;\n  colorOrange700?: string;\n  colorRed100?: string;\n  colorRed200?: string;\n  colorRed500?: string;\n  colorRed600?: string;\n  colorRed700?: string;\n  colorWhite?: string;\n  colorBlack100?: string;\n  colorBlack20?: string;\n  colorBlack10?: string;\n  defaultPressedColor?: string;\n  defaultHoverColor?: string;\n  defaultLineHeight?: string;\n  dataGridLineHeight?: string;\n  focusBorderRadius?: string;\n  buttonBorderRadius?: string;\n  buttonBorderWidth?: string;\n  buttonFontSize?: string;\n  buttonBorderStyle?: string;\n  buttonPrimaryDefaultColor?: string;\n  buttonPrimaryPressedColor?: string;\n  buttonFillTextColor?: string;\n  buttonPrimaryHoverColor?: string;\n  buttonPrimaryFocusedColor?: string;\n  buttonOutlineHoverTextColor?: string;\n  buttonSuccessDefaultColor?: string;\n  buttonSuccessHoverColor?: string;\n  buttonSuccessFocusedColor?: string;\n  buttonSuccessPressedColor?: string;\n  buttonDangerDefaultColor?: string;\n  buttonDangerHoverColor?: string;\n  buttonDangerFocusedColor?: string;\n  buttonDangerPressedColor?: string;\n  buttonWarningDefaultColor?: string;\n  buttonWarningHoverColor?: string;\n  buttonWarningFocusedColor?: string;\n  buttonWarningPressedColor?: string;\n  buttonDefaultColor?: string;\n  buttonDefaultHoverColor?: string;\n  buttonDefaultFocusedColor?: string;\n  buttonDefaultPressedColor?: string;\n  buttonOutlineActiveTextColor?: string;\n  checkboxUncheckedHoverColor?: string;\n  checkboxUncheckedPressedColor?: string;\n  checkboxCheckedHoverColor?: string;\n  checkboxCheckedPressedColor?: string;\n  radioHoverBackgroundColor?: string;\n  radioPressedBackgroundColor?: string;\n  radioHoverColor?: string;\n  radioPressedColor?: string;\n  defaultBorderRadius?: string;\n  inputBorderRadius?: string;\n  inputBorderWidth?: string;\n  inputBorderWidthFocus?: string;\n  inputBorderStyle?: string;\n  inputBorderColor?: string;\n  inputBackgroundColor?: string;\n  inputHelperTextColor?: string;\n  inputHoverBackgroundColor?: string;\n  inputDisabledBackgroundColor?: string;\n  dragBackgroundColor?: string;\n  dragBorderStyle?: string;\n  modalShadowColor?: string;\n  modalBackgroundColor?: string;\n  modalBackdropColor?: string;\n  skeletonBackgroundColor?: string;\n  skeletonAnimationColorRgb?: string;\n\n  alertTextColor?: string;\n  alertTextInvertedColor?: string;\n\n  alertNeutralBackgroundColor?: string;\n  alertInfoBackgroundColor?: string;\n  alertSuccessBackgroundColor?: string;\n  alertErrorBackgroundColor?: string;\n  alertWarningBackgroundColor?: string;\n\n  alertNeutralInvertedColor?: string;\n  alertInfoInvertedColor?: string;\n  alertSuccessInvertedColor?: string;\n  alertErrorInvertedColor?: string;\n  alertWarningInvertedColor?: string;\n\n  alertBorderWidth?: string;\n  alertBorderRadius?: string;\n\n  stepperWaitingColor?: string;\n  stepperWaitingHoverColor?: string;\n  stepperWaitingActiveColor?: string;\n  stepperWaitingDisabledColor?: string;\n  stepperCurrentColor?: string;\n  stepperCurrentHoverColor?: string;\n  stepperCurrentActiveColor?: string;\n  stepperCurrentDisabledColor?: string;\n  stepperDoneColor?: string;\n  stepperDoneHoverColor?: string;\n  stepperDoneActiveColor?: string;\n  stepperDoneDisabledColor?: string;\n  stepperErrorColor?: string;\n  stepperErrorHoverColor?: string;\n  stepperErrorActiveColor?: string;\n  stepperErrorDisabledColor?: string;\n  stepperDefaultTextColor?: string;\n  stepperLineColor?: string;\n  stepperLineBoldColor?: string;\n  stepperLineDisabledColor?: string;\n  stepperLineBoldDisabledColor?: string;\n  stepperLabelColor?: string;\n  stepperCaptionColor?: string;\n  stepperCaptionErrorColor?: string;\n  stepperLabelDisabledColor?: string;\n  stepperCaptionDisabledColor?: string;\n  stepperCaptionErrorDisabledColor?: string;\n  bannerBorderRadius?: string;\n  bannerBorderWidth?: string;\n  dataGridRowBackgroundColor?: string;\n  dataGridRowHoverBackgroundColor?: string;\n  progressBarBackgroundColor?: string;\n  tabsBackgroundColor?: string;\n  tabActiveBorderHeight?: string;\n  tabActiveBorderColor?: string;\n  tabActiveTextColor?: string;\n  tablistBorderWidth?: string;\n  tablistBorderStyle?: string;\n  tablistBorderColor?: string;\n  tabTextColor?: string;\n  tabHoverColor?: string;\n  tabPressedColor?: string;\n  toggleBackgroundColor?: string;\n  tooltipBackgroundColor?: string;\n  contextMenuHoverColor?: string;\n  contextMenuPressedColor?: string;\n  default?: string;\n  success?: string;\n  error?: string;\n  info?: string;\n  disabled?: string;\n  greyedOut?: string;\n  lightGreyBorder?: string;\n  warning?: string;\n  light?: string;\n  fontFamily?: string;\n  fontFamilyCode?: string;\n  fontSizeFormLabel?: string;\n  fontSize?: string;\n  fontSizeH1?: string;\n  fontSizeH2?: string;\n  fontSizeH3?: string;\n  fontSizeH4?: string;\n  fontSizeSub?: string;\n  fontSizeCode?: string;\n  formControlFontSize?: string;\n  fileUploadBorderWidth?: string;\n  dragDropBorderStyle?: string;\n  fontSizeDataGrid?: string;\n}\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactElement[] | ReactElement | string[] | string | number[] | number;\n  properties?: CSSProperties;\n}\n\nexport const BaseStyling = ({ children, properties = {} }: Props) => {\n  const defaultProperties: CSSProperties = {\n    colorPrimary100: \"#CDD0EA\",\n    colorPrimary300: \"#6871BF\",\n    colorPrimary500: \"#041295\",\n    colorPrimary600: \"#030F77\",\n    colorPrimary700: \"#020B59\",\n    colorPrimary900: \"#01041E\",\n    colorPrimaryLight: \"#E6E7F4\",\n    colorBlueGrey25: \"#F7F7F9\",\n    colorBlueGrey25Transparent: \"rgba(247, 247, 249, .8)\",\n    colorBlueGrey50: \"#EEEFF3\",\n    colorBlueGrey100: \"#DEDEE6\",\n    colorBlueGrey200: \"#BCBECE\",\n    colorBlueGrey300: \"#9A9DB5\",\n    colorBlueGrey400: \"#797D9C\",\n    colorBlueGrey500: \"#5D607E\",\n    colorBlueGrey700: \"#383A4B\",\n    colorBlueGrey800: \"#252733\",\n    colorBlueGrey900: \"#131319\",\n    colorGreen100: \"#D1E6DA\",\n    colorGreen200: \"#A2CDB4\",\n    colorGreen500: \"#178244\",\n    colorGreen600: \"#126836\",\n    colorGreen700: \"#0E4E29\",\n    colorLightBlue500: \"#00BCDD\",\n    colorLightBlue600: \"#0096B1\",\n    colorOrange100: \"#FFE0B2\",\n    colorOrange500: \"#E07900\",\n    colorOrange600: \"#B36100\",\n    colorOrange700: \"#864900\",\n    colorRed100: \"#FFCDD2\",\n    colorRed200: \"#F3A599\",\n    colorRed500: \"#E01E00\",\n    colorRed600: \"#B31800\",\n    colorRed700: \"#861200\",\n    colorBlack100: \"#000000\",\n    colorBlack20: \"rgba(0, 0, 0, 0.2)\",\n    colorBlack10: \"rgba(0, 0, 0, 0.1)\",\n    colorShadowBlue: \"#7078C3\",\n    colorWhite: \"#FFFFFF\",\n    colorFocus: \"var(--color-primary300)\",\n    colorPrimary: \"var(--color-primary500)\",\n    colorSuccess: \"var(--color-green500)\",\n    colorWarning: \"var(--color-orange500)\",\n    colorDanger: \"var(--color-red500)\",\n    defaultPressedColor: \"var(--color-blue-grey100)\",\n    defaultHoverColor: \"var(--color-blue-grey25)\",\n    defaultLineHeight: \"1.5\", //FIXME: UCL-395\n    dataGridLineHeight: \"1.25\",\n    defaultBorderRadius: \"0.25rem\",\n    focusBorderRadius: \"0.125rem\",\n    buttonBorderRadius: \"0.125rem\",\n    buttonBorderWidth: \"2px\",\n    buttonFontSize: \"0.875rem\",\n    buttonBorderStyle: \"solid\",\n    buttonFillTextColor: \"var(--light)\",\n    buttonPrimaryDefaultColor: \"var(--color-primary500)\",\n    buttonPrimaryHoverColor: \"var(--color-primary600)\",\n    buttonPrimaryFocusedColor: \"var(--color-primary500)\",\n    buttonPrimaryPressedColor: \"var(--color-primary700)\",\n    buttonSuccessDefaultColor: \"var(--color-green500)\",\n    buttonSuccessHoverColor: \"var(--color-green600)\",\n    buttonSuccessFocusedColor: \"var(--color-green500)\",\n    buttonSuccessPressedColor: \"var(--color-green700)\",\n    buttonDangerDefaultColor: \"var(--color-red500)\",\n    buttonDangerHoverColor: \"var(--color-red600)\",\n    buttonDangerFocusedColor: \"var(--color-red500)\",\n    buttonDangerPressedColor: \"var(--color-red700)\",\n    buttonWarningDefaultColor: \"var(--color-orange500)\",\n    buttonWarningHoverColor: \"var(--color-orange600)\",\n    buttonWarningFocusedColor: \"var(--color-orange500)\",\n    buttonWarningPressedColor: \"var(--color-orange700)\",\n    buttonDefaultColor: \"var(--color-blue-grey700)\",\n    buttonDefaultHoverColor: \"var(--color-blue-grey800)\",\n    buttonDefaultFocusedColor: \"var(--color-blue-grey700)\",\n    buttonDefaultPressedColor: \"var(--color-blue-grey800)\",\n    buttonOutlineHoverTextColor: \"var(--color-primary600)\",\n    checkboxUncheckedHoverColor: \"var(--color-blue-grey50)\",\n    checkboxUncheckedPressedColor: \"var(--default-pressed-color)\",\n    checkboxCheckedHoverColor: \"var(--color-primary600)\",\n    checkboxCheckedPressedColor: \"var(--color-primary700)\",\n    radioHoverBackgroundColor: \"var(--color-blue-grey50)\",\n    radioPressedBackgroundColor: \"var(--default-pressed-color)\",\n    radioHoverColor: \"var(--color-primary600)\",\n    radioPressedColor: \"var(--color-primary700)\",\n    inputBorderRadius: \"2px\",\n    inputBorderWidth: \"1px\",\n    inputBorderWidthFocus: \"1px\",\n    inputBorderStyle: \"solid\",\n    fileUploadBorderWidth: \"1px\",\n    dragDropBorderStyle: \"dashed\",\n    inputBorderColor: \"var(--color-blue-grey500)\",\n    inputBackgroundColor: \"var(--light)\",\n    inputHelperTextColor: \"var(--color-blue-grey500)\",\n    inputHoverBackgroundColor: \"var(--default-hover-color)\",\n    inputDisabledBackgroundColor: \"var(--input-hover-background-color)\",\n    dragBackgroundColor: \"var(--color-blue-grey25-transparent)\",\n    dragBorderStyle: \"solid\",\n    modalShadowColor: \"rgba(0, 0, 0, 0.16)\",\n    modalBackgroundColor: \"var(--light)\",\n    modalBackdropColor: \"var(--default)\",\n    skeletonBackgroundColor: \"var(--disabled)\",\n    skeletonAnimationColorRgb: \"255, 255, 255\",\n\n    alertTextColor: \"var(--default)\",\n    alertTextInvertedColor: \"var(--light)\",\n\n    alertNeutralBackgroundColor: \"var(--color-blue-grey50)\",\n    alertNeutralInvertedColor: \"var(--color-blue-grey500)\",\n\n    alertInfoBackgroundColor: \"var(--color-primary100)\",\n    alertInfoInvertedColor: \"var(--color-primary500)\",\n\n    alertSuccessBackgroundColor: \"var(--color-green100)\",\n    alertSuccessInvertedColor: \"var(--color-green500)\",\n\n    alertErrorBackgroundColor: \"var(--color-red100)\",\n    alertErrorInvertedColor: \"var(--color-red500)\",\n\n    alertWarningBackgroundColor: \"var(--color-orange100)\",\n    alertWarningInvertedColor: \"var(--color-orange500)\",\n\n    alertBorderWidth: \"4px\",\n    alertBorderRadius: \"2px\",\n\n    stepperWaitingColor: \"var(--color-blue-grey200)\",\n    stepperWaitingHoverColor: \"var(--color-blue-grey300)\",\n    stepperWaitingActiveColor: \"var(--color-blue-grey400)\",\n    stepperWaitingDisabledColor: \"var(--color-blue-grey100)\",\n    stepperCurrentColor: \"var(--color-primary500)\",\n    stepperCurrentHoverColor: \"var(--color-primary600)\",\n    stepperCurrentActiveColor: \"var(--color-primary700)\",\n    stepperCurrentDisabledColor: \"var(--color-primary100)\",\n    stepperDoneColor: \"var(--color-green500)\",\n    stepperDoneHoverColor: \"var(--color-green600)\",\n    stepperDoneActiveColor: \"var(--color-green700)\",\n    stepperDoneDisabledColor: \"var(--color-green200)\",\n    stepperErrorColor: \"var(--color-red500)\",\n    stepperErrorHoverColor: \"var(--color-red600)\",\n    stepperErrorActiveColor: \"var(--color-red700)\",\n    stepperErrorDisabledColor: \"var(--color-red200)\",\n    stepperDefaultTextColor: \"var(--color-white)\",\n    stepperLineColor: \"var(--color-blue-grey300)\",\n    stepperLineBoldColor: \"var(--color-blue-grey700)\",\n    stepperLineDisabledColor: \"var(--color-blue-grey100)\",\n    stepperLineBoldDisabledColor: \"var(--color-blue-grey300)\",\n    stepperLabelColor: \"var(--color-blue-grey900)\",\n    stepperCaptionColor: \"var(--color-blue-grey500)\",\n    stepperCaptionErrorColor: \"var(--color-red500)\",\n    stepperLabelDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionErrorDisabledColor: \"var(--color-red200)\",\n    bannerBorderRadius: \"2px\",\n    bannerBorderWidth: \"0 0 0 4px\",\n    dataGridRowBackgroundColor: \"transparent\",\n    dataGridRowHoverBackgroundColor: \"var(--default-hover-color)\",\n    progressBarBackgroundColor: \"var(--disabled)\",\n    tabsBackgroundColor: \"var(--light)\",\n    tabActiveBorderHeight: \"0.25rem\",\n    tabActiveBorderColor: \"var(--color-primary)\",\n    tabActiveTextColor: \"var(--color-primary)\",\n    tablistBorderWidth: \"0.0625rem\",\n    tablistBorderStyle: \"solid\",\n    tablistBorderColor: \"var(--color-blue-grey100)\",\n    tabTextColor: \"var(--color-blue-grey900)\",\n    tabHoverColor: \"var(--default-hover-color)\",\n    tabPressedColor: \"var(--default-pressed-color)\",\n    toggleBackgroundColor: \"var(--color-blue-grey100)\",\n    tooltipBackgroundColor: \"var(--default)\",\n    contextMenuHoverColor: \"var(--default-hover-color)\",\n    contextMenuPressedColor: \"var(--default-pressed-color)\",\n    default: \"var(--color-blue-grey900)\",\n    success: \"var(--color-green500)\",\n    error: \"var(--color-red500)\",\n    info: \"var(--color-primary500)\",\n    disabled: \"var(--color-blue-grey100)\",\n    greyedOut: \"var(--color-blue-grey400)\",\n    lightGreyBorder: \"var(--color-blue-grey100)\",\n    warning: \"var(--color-orange500)\",\n    light: \"var(--color-white)\",\n    fontFamily: \"Roboto, sans-serif\",\n    fontFamilyCode: \"'Roboto Mono', monospace\",\n    fontSizeFormLabel: \"0.875rem\", //FIXME: UCL-395\n    fontSize: \"1rem\", //FIXME: UCL-395\n    fontSizeH1: \"2.5rem\",\n    fontSizeH2: \"1.625rem\",\n    fontSizeH3: \"1.5rem\",\n    fontSizeH4: \"1.25rem\",\n    fontSizeSub: \".75rem\",\n    fontSizeCode: \"1rem\",\n    formControlFontSize: \"0.875rem\", //FIXME: UCL-395\n    fontSizeDataGrid: \"0.875rem\" //FIXME: UCL-395\n  };\n\n  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */\n  const [isLoading, setIsLoading] = useState(true);\n  const baseStylingWrapper = useRef(null);\n\n  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {\n    for (const [key, value] of Object.entries(CSSPropertiesObject)) {\n      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);\n      (baseStylingWrapper.current! as HTMLElement).style.setProperty(\n        `--${formattedPropertyName}`,\n        value\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {\n      const mergedState = { ...defaultProperties, ...properties };\n      setCSSProperties(mergedState);\n    } else if (baseStylingWrapper.current) {\n      setCSSProperties(defaultProperties);\n    }\n    setIsLoading(false);\n  }, [properties, baseStylingWrapper.current]);\n\n  return (\n    <div className=\"basestyling-wrapper\" ref={baseStylingWrapper}>\n      {!isLoading ? children : null}\n    </div>\n  );\n};\n"],"names":["BaseStyling","children","properties","defaultProperties","colorPrimary100","colorPrimary300","colorPrimary500","colorPrimary600","colorPrimary700","colorPrimary900","colorPrimaryLight","colorBlueGrey25","colorBlueGrey25Transparent","colorBlueGrey50","colorBlueGrey100","colorBlueGrey200","colorBlueGrey300","colorBlueGrey400","colorBlueGrey500","colorBlueGrey700","colorBlueGrey800","colorBlueGrey900","colorGreen100","colorGreen200","colorGreen500","colorGreen600","colorGreen700","colorLightBlue500","colorLightBlue600","colorOrange100","colorOrange500","colorOrange600","colorOrange700","colorRed100","colorRed200","colorRed500","colorRed600","colorRed700","colorBlack100","colorBlack20","colorBlack10","colorShadowBlue","colorWhite","colorFocus","colorPrimary","colorSuccess","colorWarning","colorDanger","defaultPressedColor","defaultHoverColor","defaultLineHeight","dataGridLineHeight","defaultBorderRadius","focusBorderRadius","buttonBorderRadius","buttonBorderWidth","buttonFontSize","buttonBorderStyle","buttonFillTextColor","buttonPrimaryDefaultColor","buttonPrimaryHoverColor","buttonPrimaryFocusedColor","buttonPrimaryPressedColor","buttonSuccessDefaultColor","buttonSuccessHoverColor","buttonSuccessFocusedColor","buttonSuccessPressedColor","buttonDangerDefaultColor","buttonDangerHoverColor","buttonDangerFocusedColor","buttonDangerPressedColor","buttonWarningDefaultColor","buttonWarningHoverColor","buttonWarningFocusedColor","buttonWarningPressedColor","buttonDefaultColor","buttonDefaultHoverColor","buttonDefaultFocusedColor","buttonDefaultPressedColor","buttonOutlineHoverTextColor","checkboxUncheckedHoverColor","checkboxUncheckedPressedColor","checkboxCheckedHoverColor","checkboxCheckedPressedColor","radioHoverBackgroundColor","radioPressedBackgroundColor","radioHoverColor","radioPressedColor","inputBorderRadius","inputBorderWidth","inputBorderWidthFocus","inputBorderStyle","fileUploadBorderWidth","dragDropBorderStyle","inputBorderColor","inputBackgroundColor","inputHelperTextColor","inputHoverBackgroundColor","inputDisabledBackgroundColor","dragBackgroundColor","dragBorderStyle","modalShadowColor","modalBackgroundColor","modalBackdropColor","skeletonBackgroundColor","skeletonAnimationColorRgb","alertTextColor","alertTextInvertedColor","alertNeutralBackgroundColor","alertNeutralInvertedColor","alertInfoBackgroundColor","alertInfoInvertedColor","alertSuccessBackgroundColor","alertSuccessInvertedColor","alertErrorBackgroundColor","alertErrorInvertedColor","alertWarningBackgroundColor","alertWarningInvertedColor","alertBorderWidth","alertBorderRadius","stepperWaitingColor","stepperWaitingHoverColor","stepperWaitingActiveColor","stepperWaitingDisabledColor","stepperCurrentColor","stepperCurrentHoverColor","stepperCurrentActiveColor","stepperCurrentDisabledColor","stepperDoneColor","stepperDoneHoverColor","stepperDoneActiveColor","stepperDoneDisabledColor","stepperErrorColor","stepperErrorHoverColor","stepperErrorActiveColor","stepperErrorDisabledColor","stepperDefaultTextColor","stepperLineColor","stepperLineBoldColor","stepperLineDisabledColor","stepperLineBoldDisabledColor","stepperLabelColor","stepperCaptionColor","stepperCaptionErrorColor","stepperLabelDisabledColor","stepperCaptionDisabledColor","stepperCaptionErrorDisabledColor","bannerBorderRadius","bannerBorderWidth","dataGridRowBackgroundColor","dataGridRowHoverBackgroundColor","progressBarBackgroundColor","tabsBackgroundColor","tabActiveBorderHeight","tabActiveBorderColor","tabActiveTextColor","tablistBorderWidth","tablistBorderStyle","tablistBorderColor","tabTextColor","tabHoverColor","tabPressedColor","toggleBackgroundColor","tooltipBackgroundColor","contextMenuHoverColor","contextMenuPressedColor","default","success","error","info","disabled","greyedOut","lightGreyBorder","warning","light","fontFamily","fontFamilyCode","fontSizeFormLabel","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeSub","fontSizeCode","formControlFontSize","fontSizeDataGrid","isLoading","setIsLoading","useState","baseStylingWrapper","useRef","setCSSProperties","CSSPropertiesObject","key","value","Object","entries","formattedPropertyName","replace","val","toLowerCase","current","style","setProperty","useEffect","keys","length","mergedState","React","className","ref"],"mappings":"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"}

package/dist/esm/src/components/DataGrid/DataGrid.d.ts

@@ -3,6 +3,7 @@ import { Props as ButtonProps } from "../Button/Button";
 import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
 import { Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing } from "../../hooks/useSpacing";
+import { DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
     children: ({ item, index }: {
         item: T;
@@ -24,6 +25,11 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     emptyLabel?: string;
     paginationProps?: PaginationProps;
     disableContextMenuColumn?: boolean;
+    enableExpandableRow?: boolean;
+    filters?: {
+        enable: boolean;
+        filtersProps: DataGridToolbarProps;
+    };
     isLoading?: boolean;
     enableMultiSorting?: boolean;
     spacing?: Spacing;

package/dist/esm/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawer.d.ts

@@ -0,0 +1,5 @@
+import React, { ComponentPropsWithRef } from "react";
+export interface Props extends ComponentPropsWithRef<"div"> {
+    isExpanded: boolean;
+}
+export declare const DataGridDrawer: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.d.ts

@@ -0,0 +1,6 @@
+import React, { ComponentPropsWithRef } from "react";
+export interface Props extends ComponentPropsWithRef<"div"> {
+    title?: string;
+    description?: string;
+}
+export declare const DataGridDrawerItem: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/src/components/DataGrid/DataGridBody/{DataGridRow.d.ts → DataGridRow/DataGridRow.d.ts}

@@ -1,9 +1,16 @@
 import React, { ComponentPropsWithRef } from "react";
-import { HeaderCell } from "../datagrid.interfaces";
+import { HeaderCell } from "../../datagrid.interfaces";
 export interface Props extends ComponentPropsWithRef<"tr"> {
     headers?: HeaderCell[];
     isLoading?: boolean;
     spacing?: React.CSSProperties;
     disableContextMenuColumn?: boolean;
+    expandableRowProps?: {
+        enableExpandableRow: boolean;
+        expandableRowContent: React.ReactNode;
+        expandButtonTitle?: string;
+        expandButtonId?: string;
+        drawerId?: string;
+    };
 }
 export declare const DataGridRow: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilter.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { DataGridColumnMetadata, Filter, FilterEditorMode, FiltersAction, PopoverTranslations, TagTranslations } from "./DataGridFilters.interfaces";
+export type Props = {
+    mode: FilterEditorMode;
+    domRoot?: HTMLElement;
+    filter?: Filter;
+    columnsMetadata: DataGridColumnMetadata[];
+    dispatch: React.Dispatch<FiltersAction>;
+    onFilterAdd?: (filter: Filter) => void;
+    onFilterEdit?: (filter: Filter) => void;
+    onFilterDelete?: (id: string) => void;
+    tagTranslations?: TagTranslations;
+    popoverTranslations?: PopoverTranslations;
+};
+export declare const DataGridFilter: ({ mode, filter, domRoot, columnsMetadata, dispatch, onFilterAdd, onFilterEdit, onFilterDelete, tagTranslations, popoverTranslations }: Props) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { DataGridColumnMetadata, PopoverTranslations } from "./DataGridFilters.interfaces";
+export type Props = {
+    anchorRef?: React.RefObject<HTMLOrSVGElement>;
+    isOpen: boolean;
+    column: string;
+    columnsMetadata: DataGridColumnMetadata[];
+    values: string[];
+    pickedValues: string[];
+    operator: string;
+    operators: string[];
+    onFilterSubmit: () => void;
+    resetFields: () => void;
+    setFilterOpen: (value: React.SetStateAction<boolean>) => void;
+    setColumn: (column: React.SetStateAction<string>) => void;
+    setOperator: (operator: React.SetStateAction<string>) => void;
+    setOperators: (operators: React.SetStateAction<string[]>) => void;
+    setValues: (values: React.SetStateAction<string[]>) => void;
+    setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
+    translations?: PopoverTranslations;
+};
+export declare const DataGridFilterPopover: ({ anchorRef, isOpen, column, columnsMetadata, values, pickedValues, operator, operators, onFilterSubmit, resetFields, setFilterOpen, setColumn, setOperator, setOperators, setValues, setPickedValues, translations }: Props) => React.JSX.Element;