npm - @onewelcome/react-lib-components - Versions diffs - 7.0.0 → 7.1.0 - Mend

@onewelcome/react-lib-components 7.0.0 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1108) hide show

package/dist/esm/Typography/Typography.module.scss.esm.js ADDED Viewed

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
+var css_248z = "/*!\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 */.Typography-module_typography_style_h1__1rY7r{font-size:var(--font-size-h1);line-height:1.2}.Typography-module_typography_style_h1__1rY7r,.Typography-module_typography_style_h2__XOaTb{color:var(--default);font-family:var(--font-family);font-style:normal;font-variant:normal;font-weight:700;letter-spacing:0;margin:0 0 1rem;text-transform:none}.Typography-module_typography_style_h2__XOaTb{font-size:var(--font-size-h2);line-height:1.42857}.Typography-module_typography_style_h3__9gsns{font-size:var(--font-size-h3);line-height:1.16666}.Typography-module_typography_style_h3__9gsns,.Typography-module_typography_style_h4__HkodR{color:var(--default);font-family:var(--font-family);font-style:normal;font-variant:normal;font-weight:500;letter-spacing:0;margin:0 0 1rem;text-transform:none}.Typography-module_typography_style_h4__HkodR{font-size:var(--font-size-h4);line-height:1.2}.Typography-module_typography_style_body__bbb7n{font-weight:400}.Typography-module_typography_style_body-bold__E17ob,.Typography-module_typography_style_body__bbb7n{color:var(--default);font-family:var(--font-family);font-size:var(--font-size);font-style:normal;font-variant:normal;letter-spacing:0;line-height:var(--default-line-height);margin:0 0 1rem;text-transform:none}.Typography-module_typography_style_body-bold__E17ob{font-weight:700}.Typography-module_typography_style_sub-text__GLVAO{font-family:var(--font-family);font-size:var(--font-size-sub);line-height:1rem}.Typography-module_typography_style_code__edwhb,.Typography-module_typography_style_sub-text__GLVAO{color:var(--default);font-style:normal;font-variant:normal;font-weight:400;letter-spacing:0;margin:0 0 1rem;text-transform:none}.Typography-module_typography_style_code__edwhb{font-family:var(--font-family-code);font-size:var(--font-size-code);line-height:1.5}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlR5cG9ncmFwaHkubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRiw4Q0FFRSw2QkFBOEIsQ0FHOUIsZUFNRixDQUNBLDRGQUhFLG9CQUFxQixDQVJyQiw4QkFBK0IsQ0FFL0IsaUJBQWtCLENBQ2xCLG1CQUFvQixDQUVwQixlQUFnQixDQUVoQixnQkFBaUIsQ0FFakIsZUFBa0IsQ0FIbEIsbUJBZ0JGLENBWEEsOENBRUUsNkJBQThCLENBRzlCLG1CQU1GLENBQ0EsOENBRUUsNkJBQThCLENBRzlCLG1CQU1GLENBQ0EsNEZBSEUsb0JBQXFCLENBUnJCLDhCQUErQixDQUUvQixpQkFBa0IsQ0FDbEIsbUJBQW9CLENBRXBCLGVBQWdCLENBRWhCLGdCQUFpQixDQUVqQixlQUFrQixDQUhsQixtQkFnQkYsQ0FYQSw4Q0FFRSw2QkFBOEIsQ0FHOUIsZUFNRixDQUNBLGdEQU1FLGVBS0YsQ0FDQSxxR0FIRSxvQkFBcUIsQ0FSckIsOEJBQStCLENBQy9CLDBCQUEyQixDQUMzQixpQkFBa0IsQ0FDbEIsbUJBQW9CLENBSXBCLGdCQUFpQixDQUhqQixzQ0FBdUMsQ0FLdkMsZUFBa0IsQ0FIbEIsbUJBZ0JGLENBWEEscURBTUUsZUFLRixDQUNBLG9EQUNFLDhCQUErQixDQUMvQiw4QkFBK0IsQ0FHL0IsZ0JBTUYsQ0FDQSxvR0FIRSxvQkFBcUIsQ0FOckIsaUJBQWtCLENBQ2xCLG1CQUFvQixDQUVwQixlQUFnQixDQUVoQixnQkFBaUIsQ0FFakIsZUFBa0IsQ0FIbEIsbUJBZ0JGLENBWEEsZ0RBQ0UsbUNBQW9DLENBQ3BDLCtCQUFnQyxDQUdoQyxlQU1GIiwiZmlsZSI6IlR5cG9ncmFwaHkubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnR5cG9ncmFwaHlfc3R5bGVfaDEge1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1oMSk7XG4gIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgZm9udC12YXJpYW50OiBub3JtYWw7XG4gIGxpbmUtaGVpZ2h0OiAxLjI7XG4gIGZvbnQtd2VpZ2h0OiA3MDA7XG4gIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICBsZXR0ZXItc3BhY2luZzogMDtcbiAgY29sb3I6IHZhcigtLWRlZmF1bHQpO1xuICBtYXJnaW46IDAgMCAxcmVtIDA7XG59XG4udHlwb2dyYXBoeV9zdHlsZV9oMiB7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWgyKTtcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xuICBmb250LXZhcmlhbnQ6IG5vcm1hbDtcbiAgbGluZS1oZWlnaHQ6IDEuNDI4NTc7XG4gIGZvbnQtd2VpZ2h0OiA3MDA7XG4gIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICBsZXR0ZXItc3BhY2luZzogMDtcbiAgY29sb3I6IHZhcigtLWRlZmF1bHQpO1xuICBtYXJnaW46IDAgMCAxcmVtIDA7XG59XG4udHlwb2dyYXBoeV9zdHlsZV9oMyB7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWgzKTtcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xuICBmb250LXZhcmlhbnQ6IG5vcm1hbDtcbiAgbGluZS1oZWlnaHQ6IDEuMTY2NjY7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG4gIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICBsZXR0ZXItc3BhY2luZzogMDtcbiAgY29sb3I6IHZhcigtLWRlZmF1bHQpO1xuICBtYXJnaW46IDAgMCAxcmVtIDA7XG59XG4udHlwb2dyYXBoeV9zdHlsZV9oNCB7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWg0KTtcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xuICBmb250LXZhcmlhbnQ6IG5vcm1hbDtcbiAgbGluZS1oZWlnaHQ6IDEuMjtcbiAgZm9udC13ZWlnaHQ6IDUwMDtcbiAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gIGxldHRlci1zcGFjaW5nOiAwO1xuICBjb2xvcjogdmFyKC0tZGVmYXVsdCk7XG4gIG1hcmdpbjogMCAwIDFyZW0gMDtcbn1cbi50eXBvZ3JhcGh5X3N0eWxlX2JvZHkge1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZSk7XG4gIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgZm9udC12YXJpYW50OiBub3JtYWw7XG4gIGxpbmUtaGVpZ2h0OiB2YXIoLS1kZWZhdWx0LWxpbmUtaGVpZ2h0KTtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gIGxldHRlci1zcGFjaW5nOiAwO1xuICBjb2xvcjogdmFyKC0tZGVmYXVsdCk7XG4gIG1hcmdpbjogMCAwIDFyZW0gMDtcbn1cbi50eXBvZ3JhcGh5X3N0eWxlX2JvZHktYm9sZCB7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplKTtcbiAgZm9udC1zdHlsZTogbm9ybWFsO1xuICBmb250LXZhcmlhbnQ6IG5vcm1hbDtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLWRlZmF1bHQtbGluZS1oZWlnaHQpO1xuICBmb250LXdlaWdodDogNzAwO1xuICB0ZXh0LXRyYW5zZm9ybTogbm9uZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDA7XG4gIGNvbG9yOiB2YXIoLS1kZWZhdWx0KTtcbiAgbWFyZ2luOiAwIDAgMXJlbSAwO1xufVxuLnR5cG9ncmFwaHlfc3R5bGVfc3ViLXRleHQge1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1zdWIpO1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIGZvbnQtdmFyaWFudDogbm9ybWFsO1xuICBsaW5lLWhlaWdodDogMXJlbTtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gIGxldHRlci1zcGFjaW5nOiAwO1xuICBjb2xvcjogdmFyKC0tZGVmYXVsdCk7XG4gIG1hcmdpbjogMCAwIDFyZW0gMDtcbn1cbi50eXBvZ3JhcGh5X3N0eWxlX2NvZGUge1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktY29kZSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWNvZGUpO1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIGZvbnQtdmFyaWFudDogbm9ybWFsO1xuICBsaW5lLWhlaWdodDogMS41O1xuICBmb250LXdlaWdodDogNDAwO1xuICB0ZXh0LXRyYW5zZm9ybTogbm9uZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDA7XG4gIGNvbG9yOiB2YXIoLS1kZWZhdWx0KTtcbiAgbWFyZ2luOiAwIDAgMXJlbSAwO1xufSJdfQ== */";
+var classes = {"typography_style_h1":"Typography-module_typography_style_h1__1rY7r","typography_style_h2":"Typography-module_typography_style_h2__XOaTb","typography_style_h3":"Typography-module_typography_style_h3__9gsns","typography_style_h4":"Typography-module_typography_style_h4__HkodR","typography_style_body":"Typography-module_typography_style_body__bbb7n","typography_style_body-bold":"Typography-module_typography_style_body-bold__E17ob","typography_style_sub-text":"Typography-module_typography_style_sub-text__GLVAO","typography_style_code":"Typography-module_typography_style_code__edwhb"};
+styleInject(css_248z);
+export { classes as default };
+//# sourceMappingURL=Typography.module.scss.esm.js.map

package/dist/esm/Typography/Typography.module.scss.esm.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Typography.module.scss.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -1,2 +1,231 @@
-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};
+import React, { useState, useRef, useEffect } from 'react';
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+/**
+ * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx
+ * and make sure to add it to the shouldBeColorPicker array!
+ */
+const BaseStyling = ({ children, properties = {} }) => {
+    const defaultProperties = {
+        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", //FIXME: UCL-395
+        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", //FIXME: UCL-395
+        fontSize: "1rem", //FIXME: UCL-395
+        fontSizeH1: "2.5rem",
+        fontSizeH2: "1.625rem",
+        fontSizeH3: "1.5rem",
+        fontSizeH4: "1.25rem",
+        fontSizeSub: ".75rem",
+        fontSizeCode: "1rem",
+        formControlFontSize: "0.875rem", //FIXME: UCL-395
+        fontSizeDataGrid: "0.875rem" //FIXME: UCL-395
+    };
+    /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
+    const [isLoading, setIsLoading] = useState(true);
+    const baseStylingWrapper = useRef(null);
+    const setCSSProperties = (CSSPropertiesObject) => {
+        for (const [key, value] of Object.entries(CSSPropertiesObject)) {
+            const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
+            baseStylingWrapper.current.style.setProperty(`--${formattedPropertyName}`, value);
+        }
+    };
+    useEffect(() => {
+        if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {
+            const mergedState = { ...defaultProperties, ...properties };
+            setCSSProperties(mergedState);
+        }
+        else if (baseStylingWrapper.current) {
+            setCSSProperties(defaultProperties);
+        }
+        setIsLoading(false);
+    }, [properties, baseStylingWrapper.current]);
+    return (React.createElement("div", { className: "basestyling-wrapper", ref: baseStylingWrapper }, !isLoading ? children : null));
+};
+export { BaseStyling };
 //# sourceMappingURL=BaseStyling.esm.js.map

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

	@@ -1 +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 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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"}
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 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":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAEH;;;AAGG;AAyMI,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,GAAG,EAAE,EAAS,KAAI;AAClE,IAAA,MAAM,iBAAiB,GAAkB;AACvC,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,0BAA0B,EAAE,yBAAyB;AACrD,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,gBAAgB,EAAE,SAAS;AAC3B,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,YAAY,EAAE,oBAAoB;AAClC,QAAA,YAAY,EAAE,oBAAoB;AAClC,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,yBAAyB;AACrC,QAAA,YAAY,EAAE,yBAAyB;AACvC,QAAA,YAAY,EAAE,uBAAuB;AACrC,QAAA,YAAY,EAAE,wBAAwB;AACtC,QAAA,WAAW,EAAE,qBAAqB;AAClC,QAAA,mBAAmB,EAAE,2BAA2B;AAChD,QAAA,iBAAiB,EAAE,0BAA0B;QAC7C,iBAAiB,EAAE,KAAK;AACxB,QAAA,kBAAkB,EAAE,MAAM;AAC1B,QAAA,mBAAmB,EAAE,SAAS;AAC9B,QAAA,iBAAiB,EAAE,UAAU;AAC7B,QAAA,kBAAkB,EAAE,UAAU;AAC9B,QAAA,iBAAiB,EAAE,KAAK;AACxB,QAAA,cAAc,EAAE,UAAU;AAC1B,QAAA,iBAAiB,EAAE,OAAO;AAC1B,QAAA,mBAAmB,EAAE,cAAc;AACnC,QAAA,yBAAyB,EAAE,yBAAyB;AACpD,QAAA,uBAAuB,EAAE,yBAAyB;AAClD,QAAA,yBAAyB,EAAE,yBAAyB;AACpD,QAAA,yBAAyB,EAAE,yBAAyB;AACpD,QAAA,yBAAyB,EAAE,uBAAuB;AAClD,QAAA,uBAAuB,EAAE,uBAAuB;AAChD,QAAA,yBAAyB,EAAE,uBAAuB;AAClD,QAAA,yBAAyB,EAAE,uBAAuB;AAClD,QAAA,wBAAwB,EAAE,qBAAqB;AAC/C,QAAA,sBAAsB,EAAE,qBAAqB;AAC7C,QAAA,wBAAwB,EAAE,qBAAqB;AAC/C,QAAA,wBAAwB,EAAE,qBAAqB;AAC/C,QAAA,yBAAyB,EAAE,wBAAwB;AACnD,QAAA,uBAAuB,EAAE,wBAAwB;AACjD,QAAA,yBAAyB,EAAE,wBAAwB;AACnD,QAAA,yBAAyB,EAAE,wBAAwB;AACnD,QAAA,kBAAkB,EAAE,2BAA2B;AAC/C,QAAA,uBAAuB,EAAE,2BAA2B;AACpD,QAAA,yBAAyB,EAAE,2BAA2B;AACtD,QAAA,yBAAyB,EAAE,2BAA2B;AACtD,QAAA,2BAA2B,EAAE,yBAAyB;AACtD,QAAA,2BAA2B,EAAE,0BAA0B;AACvD,QAAA,6BAA6B,EAAE,8BAA8B;AAC7D,QAAA,yBAAyB,EAAE,yBAAyB;AACpD,QAAA,2BAA2B,EAAE,yBAAyB;AACtD,QAAA,yBAAyB,EAAE,0BAA0B;AACrD,QAAA,2BAA2B,EAAE,8BAA8B;AAC3D,QAAA,eAAe,EAAE,yBAAyB;AAC1C,QAAA,iBAAiB,EAAE,yBAAyB;AAC5C,QAAA,iBAAiB,EAAE,KAAK;AACxB,QAAA,gBAAgB,EAAE,KAAK;AACvB,QAAA,qBAAqB,EAAE,KAAK;AAC5B,QAAA,gBAAgB,EAAE,OAAO;AACzB,QAAA,qBAAqB,EAAE,KAAK;AAC5B,QAAA,mBAAmB,EAAE,QAAQ;AAC7B,QAAA,gBAAgB,EAAE,2BAA2B;AAC7C,QAAA,oBAAoB,EAAE,cAAc;AACpC,QAAA,oBAAoB,EAAE,2BAA2B;AACjD,QAAA,yBAAyB,EAAE,4BAA4B;AACvD,QAAA,4BAA4B,EAAE,qCAAqC;AACnE,QAAA,mBAAmB,EAAE,sCAAsC;AAC3D,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,gBAAgB,EAAE,qBAAqB;AACvC,QAAA,oBAAoB,EAAE,cAAc;AACpC,QAAA,kBAAkB,EAAE,gBAAgB;AACpC,QAAA,uBAAuB,EAAE,iBAAiB;AAC1C,QAAA,yBAAyB,EAAE,eAAe;AAE1C,QAAA,cAAc,EAAE,gBAAgB;AAChC,QAAA,sBAAsB,EAAE,cAAc;AAEtC,QAAA,2BAA2B,EAAE,0BAA0B;AACvD,QAAA,yBAAyB,EAAE,2BAA2B;AAEtD,QAAA,wBAAwB,EAAE,yBAAyB;AACnD,QAAA,sBAAsB,EAAE,yBAAyB;AAEjD,QAAA,2BAA2B,EAAE,uBAAuB;AACpD,QAAA,yBAAyB,EAAE,uBAAuB;AAElD,QAAA,yBAAyB,EAAE,qBAAqB;AAChD,QAAA,uBAAuB,EAAE,qBAAqB;AAE9C,QAAA,2BAA2B,EAAE,wBAAwB;AACrD,QAAA,yBAAyB,EAAE,wBAAwB;AAEnD,QAAA,gBAAgB,EAAE,KAAK;AACvB,QAAA,iBAAiB,EAAE,KAAK;AAExB,QAAA,mBAAmB,EAAE,2BAA2B;AAChD,QAAA,wBAAwB,EAAE,2BAA2B;AACrD,QAAA,yBAAyB,EAAE,2BAA2B;AACtD,QAAA,2BAA2B,EAAE,2BAA2B;AACxD,QAAA,mBAAmB,EAAE,yBAAyB;AAC9C,QAAA,wBAAwB,EAAE,yBAAyB;AACnD,QAAA,yBAAyB,EAAE,yBAAyB;AACpD,QAAA,2BAA2B,EAAE,yBAAyB;AACtD,QAAA,gBAAgB,EAAE,uBAAuB;AACzC,QAAA,qBAAqB,EAAE,uBAAuB;AAC9C,QAAA,sBAAsB,EAAE,uBAAuB;AAC/C,QAAA,wBAAwB,EAAE,uBAAuB;AACjD,QAAA,iBAAiB,EAAE,qBAAqB;AACxC,QAAA,sBAAsB,EAAE,qBAAqB;AAC7C,QAAA,uBAAuB,EAAE,qBAAqB;AAC9C,QAAA,yBAAyB,EAAE,qBAAqB;AAChD,QAAA,uBAAuB,EAAE,oBAAoB;AAC7C,QAAA,gBAAgB,EAAE,2BAA2B;AAC7C,QAAA,oBAAoB,EAAE,2BAA2B;AACjD,QAAA,wBAAwB,EAAE,2BAA2B;AACrD,QAAA,4BAA4B,EAAE,2BAA2B;AACzD,QAAA,iBAAiB,EAAE,2BAA2B;AAC9C,QAAA,mBAAmB,EAAE,2BAA2B;AAChD,QAAA,wBAAwB,EAAE,qBAAqB;AAC/C,QAAA,yBAAyB,EAAE,2BAA2B;AACtD,QAAA,2BAA2B,EAAE,2BAA2B;AACxD,QAAA,gCAAgC,EAAE,qBAAqB;AACvD,QAAA,kBAAkB,EAAE,KAAK;AACzB,QAAA,iBAAiB,EAAE,WAAW;AAC9B,QAAA,0BAA0B,EAAE,aAAa;AACzC,QAAA,+BAA+B,EAAE,4BAA4B;AAC7D,QAAA,0BAA0B,EAAE,iBAAiB;AAC7C,QAAA,mBAAmB,EAAE,cAAc;AACnC,QAAA,qBAAqB,EAAE,SAAS;AAChC,QAAA,oBAAoB,EAAE,sBAAsB;AAC5C,QAAA,kBAAkB,EAAE,sBAAsB;AAC1C,QAAA,kBAAkB,EAAE,WAAW;AAC/B,QAAA,kBAAkB,EAAE,OAAO;AAC3B,QAAA,kBAAkB,EAAE,2BAA2B;AAC/C,QAAA,YAAY,EAAE,2BAA2B;AACzC,QAAA,aAAa,EAAE,4BAA4B;AAC3C,QAAA,eAAe,EAAE,8BAA8B;AAC/C,QAAA,qBAAqB,EAAE,2BAA2B;AAClD,QAAA,sBAAsB,EAAE,gBAAgB;AACxC,QAAA,qBAAqB,EAAE,4BAA4B;AACnD,QAAA,uBAAuB,EAAE,8BAA8B;AACvD,QAAA,OAAO,EAAE,2BAA2B;AACpC,QAAA,OAAO,EAAE,uBAAuB;AAChC,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,yBAAyB;AAC/B,QAAA,QAAQ,EAAE,2BAA2B;AACrC,QAAA,SAAS,EAAE,2BAA2B;AACtC,QAAA,eAAe,EAAE,2BAA2B;AAC5C,QAAA,OAAO,EAAE,wBAAwB;AACjC,QAAA,KAAK,EAAE,oBAAoB;AAC3B,QAAA,UAAU,EAAE,oBAAoB;AAChC,QAAA,cAAc,EAAE,0BAA0B;QAC1C,iBAAiB,EAAE,UAAU;QAC7B,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,YAAY,EAAE,MAAM;QACpB,mBAAmB,EAAE,UAAU;QAC/B,gBAAgB,EAAE,UAAU;KAC7B,CAAC;;IAGF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AACjD,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAExC,IAAA,MAAM,gBAAgB,GAAG,CAAC,mBAAkC,KAAI;AAC9D,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE;AAC9D,YAAA,MAAM,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,IAAI,IAAI,GAAG,CAAC,WAAW,EAAE,CAAA,CAAE,CAAC,CAAC;AACrF,YAAA,kBAAkB,CAAC,OAAwB,CAAC,KAAK,CAAC,WAAW,CAC5D,CAAA,EAAA,EAAK,qBAAqB,CAAA,CAAE,EAC5B,KAAK,CACN,CAAC;SACH;AACH,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,kBAAkB,CAAC,OAAO,EAAE;YACtE,MAAM,WAAW,GAAG,EAAE,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;YAC5D,gBAAgB,CAAC,WAAW,CAAC,CAAC;SAC/B;AAAM,aAAA,IAAI,kBAAkB,CAAC,OAAO,EAAE;YACrC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;SACrC;QACD,YAAY,CAAC,KAAK,CAAC,CAAC;KACrB,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;IAE7C,QACE,6BAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,kBAAkB,EACzD,EAAA,CAAC,SAAS,GAAG,QAAQ,GAAG,IAAI,CACzB,EACN;AACJ;;;;"}

package/dist/esm/admin/layout/MicrofrontendContainer/MicrofrontendContainer.esm.js CHANGED Viewed

@@ -1,2 +1,29 @@
-import e from"react";import n from"./MicrofrontendContainer.module.esm.js";const t=({header:t,children:r,contentMargins:o=true,contentMaxWidth:i=true,...a})=>{const c=[];o&&c.push(n["microfrontend-container-margin"]);i&&c.push(n["microfrontend-container-max-width"]);return e.createElement(e.Fragment,null,e.createElement("div",null,t),e.createElement("div",{className:c.join(" "),...a},r))};export{t as MicrofrontendContainer};
+import React from 'react';
+import classes from './MicrofrontendContainer.module.scss.esm.js';
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const MicrofrontendContainer = ({ header, children, contentMargins = true, contentMaxWidth = true, ...rest }) => {
+    const appliedClasses = [];
+    contentMargins && appliedClasses.push(classes["microfrontend-container-margin"]);
+    contentMaxWidth && appliedClasses.push(classes["microfrontend-container-max-width"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, header),
+        React.createElement("div", { className: appliedClasses.join(" "), ...rest }, children)));
+};
+export { MicrofrontendContainer };
 //# sourceMappingURL=MicrofrontendContainer.esm.js.map

package/dist/esm/admin/layout/MicrofrontendContainer/MicrofrontendContainer.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MicrofrontendContainer.esm.js","sources":["../../../../../../../src/components/admin/layout/MicrofrontendContainer/MicrofrontendContainer.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, { ReactElement } from \"react\";\nimport classes from \"./MicrofrontendContainer.module.scss\";\n\nexport interface Props {\n header?: ReactElement \| ReactElement[];\n children: ReactElement \| ReactElement[];\n contentMargins?: boolean;\n contentMaxWidth?: boolean;\n}\n\nexport const MicrofrontendContainer = ({\n header,\n children,\n contentMargins = true,\n contentMaxWidth = true,\n ...rest\n}: Props) => {\n const appliedClasses = [];\n\n contentMargins && appliedClasses.push(classes[\"microfrontend-container-margin\"]);\n contentMaxWidth && appliedClasses.push(classes[\"microfrontend-container-max-width\"]);\n\n return (\n <>\n <div>{header}</div>\n <div className={appliedClasses.join(\" \")} {...rest}>\n {children}\n </div>\n </>\n );\n};\n"],"names":[~~"MicrofrontendContainer"~~,"~~header~~","~~children"~~,~~"contentMargins"~~,~~"contentMaxWidth"~~,~~"rest"~~,~~"appliedClasses"~~,~~"push"~~,~~"classes"~~,~~"React"~~,~~"createElement"~~,~~"Fragment"~~,~~"className"~~,~~"join"]~~,~~"mappings":"iFA0BaA~~,~~EAAyB~~,~~EACpCC~~,~~SACAC~~,~~WACAC~~,~~iBAAiB~~,~~KACjBC~~,~~kBAAkB~~,~~QACfC~~,~~MAEH~~,~~MAAMC~~,~~EAAiB~~,~~GAEvBH~~,~~GAAkBG~~,~~EAAeC~~,~~KAAKC~~,~~EAAQ~~,~~mCAC9CJ~~,~~GAAmBE~~,~~EAAeC~~,~~KAAKC~~,~~EAAQ~~,~~sCAE/C~~,~~OACEC~~,~~EAAAC~~,~~cAAAD~~,~~EAAAE~~,~~SAAA~~,~~KACEF~~,~~EAAAC~~,~~cAAA~~,~~MAAA~~,~~KAAMT~~,~~GACNQ~~,~~EAAAC~~,~~cAAA~~,~~MAAA~~,~~CAAKE~~,~~UAAWN~~,~~EAAeO~~,~~KAAK~~,~~QAAUR~~,~~GAC3CH~~,~~GAGL~~"}
1	+ {"version":3,"file":"MicrofrontendContainer.esm.js","sources":["../../../../../../../src/components/admin/layout/MicrofrontendContainer/MicrofrontendContainer.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, { ReactElement } from \"react\";\nimport classes from \"./MicrofrontendContainer.module.scss\";\n\nexport interface Props {\n header?: ReactElement \| ReactElement[];\n children: ReactElement \| ReactElement[];\n contentMargins?: boolean;\n contentMaxWidth?: boolean;\n}\n\nexport const MicrofrontendContainer = ({\n header,\n children,\n contentMargins = true,\n contentMaxWidth = true,\n ...rest\n}: Props) => {\n const appliedClasses = [];\n\n contentMargins && appliedClasses.push(classes[\"microfrontend-container-margin\"]);\n contentMaxWidth && appliedClasses.push(classes[\"microfrontend-container-max-width\"]);\n\n return (\n <>\n <div>{header}</div>\n <div className={appliedClasses.join(\" \")} {...rest}>\n {children}\n </div>\n </>\n );\n};\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;MAYU,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,QAAQ,EACR,cAAc,GAAG,IAAI,EACrB,eAAe,GAAG,IAAI,EACtB,GAAG,IAAI,EACD,KAAI;IACV,MAAM,cAAc,GAAG,EAAE,CAAC;IAE1B,cAAc,IAAI,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC;IACjF,eAAe,IAAI,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,mCAAmC,CAAC,CAAC,CAAC;AAErF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,MAAM,CAAO;AACnB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,GAAM,IAAI,EAC/C,EAAA,QAAQ,CACL,CACL,EACH;AACJ;;;;"}

package/dist/esm/admin/layout/MicrofrontendContainer/MicrofrontendContainer.module.scss.esm.js ADDED Viewed

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.esm.js';
+var css_248z = "/*!\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 */.MicrofrontendContainer-module_microfrontend-container-margin__sCNCe{padding:2rem}.MicrofrontendContainer-module_microfrontend-container-max-width__AMgo6{max-width:105rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1pY3JvZnJvbnRlbmRDb250YWluZXIubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRixxRUFDRSxZQUNGLENBQ0Esd0VBQ0UsZ0JBQ0YiLCJmaWxlIjoiTWljcm9mcm9udGVuZENvbnRhaW5lci5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4ubWljcm9mcm9udGVuZC1jb250YWluZXItbWFyZ2luIHtcbiAgcGFkZGluZzogMnJlbTtcbn1cbi5taWNyb2Zyb250ZW5kLWNvbnRhaW5lci1tYXgtd2lkdGgge1xuICBtYXgtd2lkdGg6IDEwNXJlbTtcbn0iXX0= */";
+var classes = {"microfrontend-container-margin":"MicrofrontendContainer-module_microfrontend-container-margin__sCNCe","microfrontend-container-max-width":"MicrofrontendContainer-module_microfrontend-container-max-width__AMgo6"};
+styleInject(css_248z);
+export { classes as default };
+//# sourceMappingURL=MicrofrontendContainer.module.scss.esm.js.map

package/dist/esm/admin/layout/MicrofrontendContainer/MicrofrontendContainer.module.scss.esm.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MicrofrontendContainer.module.scss.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/node_modules/style-inject/dist/style-inject.es.esm.js CHANGED Viewed

@@ -1,2 +1,29 @@
-function e(e,t){if(t===void 0)t={};var d=t.insertAt;if(!e||typeof document==="undefined")return;var i=document.head||document.getElementsByTagName("head")[0];var n=document.createElement("style");n.type="text/css";if(d==="top")if(i.firstChild)i.insertBefore(n,i.firstChild);else i.appendChild(n);else i.appendChild(n);if(n.styleSheet)n.styleSheet.cssText=e;else n.appendChild(document.createTextNode(e))}export{e as default};
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') { return; }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+export { styleInject as default };
 //# sourceMappingURL=style-inject.es.esm.js.map

package/dist/esm/node_modules/style-inject/dist/style-inject.es.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style-inject.es.esm.js","sources":["../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css \|\| typeof document === 'undefined') { return; }\n\n var head = document.head \|\| document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[~~"styleInject"~~,"~~css~~","~~ref"~~,~~"insertAt"~~,~~"document"~~,~~"head"~~,~~"getElementsByTagName"~~,~~"style"~~,~~"createElement"~~,~~"type"~~,~~"firstChild"~~,~~"insertBefore"~~,~~"appendChild"~~,~~"styleSheet"~~,~~"cssText"~~,~~"createTextNode"]~~,~~"mappings":"AAAA~~,~~SAASA~~,~~EAAYC~~,~~EAAKC~~,~~GACxB~~,~~GAAKA~~,~~SAAa~~,~~EAAIA~~,~~EAAM~~,~~CAAA~~,~~EAC5B~~,~~IAAIC~~,~~EAAWD~~,~~EAAIC~~,~~SAEnB~~,~~IAAKF~~,~~UAAcG~~,~~WAAa~~,~~YAAe~~,~~OAE/C~~,~~IAAIC~~,~~EAAOD~~,~~SAASC~~,~~MAAQD~~,~~SAASE~~,~~qBAAqB~~,QAAQ,~~GAClE~~,~~IAAIC~~,~~EAAQH~~,~~SAASI~~,~~cAAc~~,~~SACnCD~~,~~EAAME~~,~~KAAO~~,~~WAEb~~,~~GAAIN~~,~~IAAa~~,~~MACf~~,~~GAAIE~~,~~EAAKK~~,~~WACPL~~,~~EAAKM~~,~~aAAaJ~~,~~EAAOF~~,~~EAAKK~~,~~iBAE9BL~~,~~EAAKO~~,~~YAAYL~~,~~QAGnBF~~,~~EAAKO~~,~~YAAYL~~,~~GAGnB~~,~~GAAIA~~,~~EAAMM~~,~~WACRN~~,~~EAAMM~~,~~WAAWC~~,~~QAAUb~~,~~OAE3BM~~,~~EAAMK~~,~~YAAYR~~,~~SAASW~~,~~eAAed~~,~~GAE9C~~"}
1	+ {"version":3,"file":"style-inject.es.esm.js","sources":["../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css \|\| typeof document === 'undefined') { return; }\n\n var head = document.head \|\| document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;","x_google_ignoreList":[0]}

package/dist/esm/src/components/Icon/Icon.d.ts CHANGED Viewed

@@ -78,7 +78,9 @@ export declare enum Icons {
     RetryFile = "retry",
     AbortFile = "cancel",
     FileAltIcon = "file-alt",
-    AddCircle = "add-circle"
+    AddCircle = "add-circle",
+    ZoomIn = "zoom-in",
+    ZoomOut = "zoom-out"
 }
 type Tag = "span" | "div" | "i";
 export interface Props extends ComponentPropsWithRef<"div"> {

package/dist/esm/src/hooks/useAnimation.esm.js CHANGED Viewed

@@ -1,2 +1,36 @@
-import{useRef as n,useState as t,useEffect as r}from"react";const e=e=>{const o=n(null);const[i,a]=t(false);const d=()=>i&&e();r((()=>{var n;(n=o.current)===null||n===void 0?void 0:n.addEventListener("animationend",d);return()=>{var n;return(n=o.current)===null||n===void 0?void 0:n.removeEventListener("animationend",d)}}),[i]);return{ref:o,animationStarted:i,startAnimation:()=>a(true)}};export{e as useAnimation};
+import { useRef, useState, useEffect } from 'react';
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const useAnimation = (callback) => {
+    const animatedObjectRef = useRef(null);
+    /** We need to store flag that says us when to call the callback */
+    const [animationStarted, setAnimationStarted] = useState(false);
+    const onAnimationEnd = () => animationStarted && callback();
+    useEffect(() => {
+        var _a;
+        (_a = animatedObjectRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("animationend", onAnimationEnd);
+        return () => { var _a; return (_a = animatedObjectRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("animationend", onAnimationEnd); };
+    }, [animationStarted]);
+    return {
+        ref: animatedObjectRef,
+        animationStarted,
+        startAnimation: () => setAnimationStarted(true)
+    };
+};
+export { useAnimation };
 //# sourceMappingURL=useAnimation.esm.js.map

package/dist/esm/src/hooks/useAnimation.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimation.esm.js","sources":["../../../../../../src/hooks/useAnimation.ts"],"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 { useEffect, useRef, useState } from \"react\";\n\nexport const useAnimation = <RefElement extends HTMLElement>(callback: () => void) => {\n const animatedObjectRef = useRef<RefElement>(null);\n /* We need to store flag that says us when to call the callback */\n const [animationStarted, setAnimationStarted] = useState(false);\n\n const onAnimationEnd = () => animationStarted && callback();\n\n useEffect(() => {\n animatedObjectRef.current?.addEventListener(\"animationend\", onAnimationEnd);\n return () => animatedObjectRef.current?.removeEventListener(\"animationend\", onAnimationEnd);\n }, [animationStarted]);\n\n return {\n ref: animatedObjectRef,\n animationStarted,\n startAnimation: () => setAnimationStarted(true)\n };\n};\n"],"names":[~~"useAnimation"~~,"~~callback~~","~~animatedObjectRef"~~,~~"useRef"~~,~~"animationStarted"~~,~~"setAnimationStarted"~~,~~"useState"~~,~~"onAnimationEnd"~~,~~"useEffect"~~,~~"_a"~~,~~"current"~~,~~"addEventListener"~~,~~"removeEventListener"~~,~~"ref"~~,~~"startAnimation"]~~,~~"mappings":"4DAkBa~~,~~MAAAA~~,~~EAAgDC~~,~~IAC3D~~,~~MAAMC~~,~~EAAoBC~~,~~EAAmB~~,~~MAE7C~~,~~MAAOC~~,~~EAAkBC~~,~~GAAuBC~~,~~EAAS~~,~~OAEzD~~,~~MAAMC~~,~~EAAiB~~,~~IAAMH~~,~~GAAoBH~~,~~IAEjDO~~,~~GAAU~~,~~YACRC~~,~~EAAAP~~,~~EAAkBQ~~,~~WAAS~~,~~MAAAD~~,~~SAAA~~,~~OAAA~~,~~EAAAA~~,~~EAAAE~~,iBAAiB,~~eAAgBJ~~,~~GAC5D~~,~~MAAO~~,~~KAAK~~,~~IAAAE~~,~~EAAC~~,~~OAAAA~~,~~EAAAP~~,~~EAAkBQ~~,~~WAAS~~,~~MAAAD~~,~~SAAA~~,OAAA,~~EAAAA~~,~~EAAAG~~,~~oBAAoB~~,~~eAAgBL~~,~~EAAe~~,CAAA,~~GAC1F~~,~~CAACH~~,~~IAEJ~~,~~MAAO~~,~~CACLS~~,~~IAAKX~~,~~EACLE~~,~~mBACAU~~,~~eAAgB~~,~~IAAMT~~,~~EAAoB~~,~~MAC3C~~"}
1	+ {"version":3,"file":"useAnimation.esm.js","sources":["../../../../../../src/hooks/useAnimation.ts"],"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 { useEffect, useRef, useState } from \"react\";\n\nexport const useAnimation = <RefElement extends HTMLElement>(callback: () => void) => {\n const animatedObjectRef = useRef<RefElement>(null);\n /* We need to store flag that says us when to call the callback */\n const [animationStarted, setAnimationStarted] = useState(false);\n\n const onAnimationEnd = () => animationStarted && callback();\n\n useEffect(() => {\n animatedObjectRef.current?.addEventListener(\"animationend\", onAnimationEnd);\n return () => animatedObjectRef.current?.removeEventListener(\"animationend\", onAnimationEnd);\n }, [animationStarted]);\n\n return {\n ref: animatedObjectRef,\n animationStarted,\n startAnimation: () => setAnimationStarted(true)\n };\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIU,MAAA,YAAY,GAAG,CAAiC,QAAoB,KAAI;AACnF,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAa,IAAI,CAAC,CAAC;;IAEnD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,cAAc,GAAG,MAAM,gBAAgB,IAAI,QAAQ,EAAE,CAAC;IAE5D,SAAS,CAAC,MAAK;;QACb,CAAA,EAAA,GAAA,iBAAiB,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAC5E,QAAA,OAAO,MAAK,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,iBAAiB,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA,EAAA,CAAC;AAC9F,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO;AACL,QAAA,GAAG,EAAE,iBAAiB;QACtB,gBAAgB;AAChB,QAAA,cAAc,EAAE,MAAM,mBAAmB,CAAC,IAAI,CAAC;KAChD,CAAC;AACJ;;;;"}