@onewelcome/react-lib-components 8.1.0 → 8.1.2

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 (29) hide show
  1. package/dist/cjs/Form/FileUpload/FileUpload.module.scss.cjs.js +1 -1
  2. package/dist/cjs/Icon/Icon.cjs.js +1 -1
  3. package/dist/cjs/Icon/Icon.cjs.js.map +1 -1
  4. package/dist/cjs/Icon/Icon.module.scss.cjs.js +1 -1
  5. package/dist/cjs/_BaseStyling_/BaseStyling.cjs.js +1 -1
  6. package/dist/cjs/_BaseStyling_/BaseStyling.cjs.js.map +1 -1
  7. package/dist/cjs/src/components/Icon/Icon.d.ts +2 -1
  8. package/dist/cjs/src/components/_BaseStyling_/BaseStyling.d.ts +1 -6
  9. package/dist/cjs/src/index.d.ts +1 -0
  10. package/dist/esm/Form/FileUpload/FileUpload.module.scss.esm.js +1 -1
  11. package/dist/esm/Icon/Icon.esm.js +1 -0
  12. package/dist/esm/Icon/Icon.esm.js.map +1 -1
  13. package/dist/esm/Icon/Icon.module.scss.esm.js +2 -2
  14. package/dist/esm/_BaseStyling_/BaseStyling.esm.js +1 -6
  15. package/dist/esm/_BaseStyling_/BaseStyling.esm.js.map +1 -1
  16. package/dist/esm/src/components/Icon/Icon.d.ts +2 -1
  17. package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts +1 -6
  18. package/dist/esm/src/index.d.ts +1 -0
  19. package/package.json +1 -1
  20. package/src/components/Form/FileUpload/FileUpload.module.scss +2 -2
  21. package/src/components/Icon/Icon.module.scss +4 -1
  22. package/src/components/Icon/Icon.tsx +2 -1
  23. package/src/components/_BaseStyling_/BaseStyling.tsx +2 -12
  24. package/src/font/icomoon.eot +0 -0
  25. package/src/font/icomoon.svg +1 -0
  26. package/src/font/icomoon.ttf +0 -0
  27. package/src/font/icomoon.woff +0 -0
  28. package/src/font/selection.json +1 -1
  29. package/src/index.ts +1 -0
package/dist/esm/_BaseStyling_/BaseStyling.esm.js CHANGED
@@ -21,15 +21,14 @@ import React, { useState, useRef, useEffect } from 'react';
21
21
  */
22
22
  const BaseStyling = ({ children, properties = {} }) => {
23
23
  const defaultProperties = {
24
+ colorPrimary50: "#E6E7F4",
24
25
  colorPrimary100: "#CDD0EA",
25
26
  colorPrimary300: "#6871BF",
26
27
  colorPrimary500: "#041295",
27
28
  colorPrimary600: "#030F77",
28
29
  colorPrimary700: "#020B59",
29
30
  colorPrimary900: "#01041E",
30
- colorPrimaryLight: "#E6E7F4",
31
31
  colorBlueGrey25: "#F7F7F9",
32
- colorBlueGrey25Transparent: "rgba(247, 247, 249, .8)",
33
32
  colorBlueGrey50: "#EEEFF3",
34
33
  colorBlueGrey100: "#DEDEE6",
35
34
  colorBlueGrey200: "#BCBECE",
@@ -44,8 +43,6 @@ const BaseStyling = ({ children, properties = {} }) => {
44
43
  colorGreen500: "#178244",
45
44
  colorGreen600: "#126836",
46
45
  colorGreen700: "#0E4E29",
47
- colorLightBlue500: "#00BCDD",
48
- colorLightBlue600: "#0096B1",
49
46
  colorOrange100: "#FFE0B2",
50
47
  colorOrange500: "#E07900",
51
48
  colorOrange600: "#B36100",
@@ -58,7 +55,6 @@ const BaseStyling = ({ children, properties = {} }) => {
58
55
  colorBlack100: "#000000",
59
56
  colorBlack20: "rgba(0, 0, 0, 0.2)",
60
57
  colorBlack10: "rgba(0, 0, 0, 0.1)",
61
- colorShadowBlue: "#7078C3",
62
58
  colorWhite: "#FFFFFF",
63
59
  colorFocus: "var(--color-primary300)",
64
60
  colorPrimary: "var(--color-primary500)",
@@ -116,7 +112,6 @@ const BaseStyling = ({ children, properties = {} }) => {
116
112
  inputHelperTextColor: "var(--color-blue-grey500)",
117
113
  inputHoverBackgroundColor: "var(--default-hover-color)",
118
114
  inputDisabledBackgroundColor: "var(--input-hover-background-color)",
119
- dragBackgroundColor: "var(--color-blue-grey25-transparent)",
120
115
  dragBorderStyle: "solid",
121
116
  modalShadowColor: "rgba(0, 0, 0, 0.16)",
122
117
  modalBackgroundColor: "var(--light)",
package/dist/esm/_BaseStyling_/BaseStyling.esm.js.map CHANGED
@@ -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":[],"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;;;;"}
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 colorPrimary50?: string;\n colorBlueGrey100?: string;\n colorBlueGrey200?: string;\n colorBlueGrey300?: string;\n colorBlueGrey400?: string;\n colorBlueGrey25?: 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 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 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 colorPrimary50: \"#E6E7F4\",\n colorPrimary100: \"#CDD0EA\",\n colorPrimary300: \"#6871BF\",\n colorPrimary500: \"#041295\",\n colorPrimary600: \"#030F77\",\n colorPrimary700: \"#020B59\",\n colorPrimary900: \"#01041E\",\n colorBlueGrey25: \"#F7F7F9\",\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 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 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 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":"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"}
package/dist/esm/src/components/Icon/Icon.d.ts CHANGED
@@ -81,7 +81,8 @@ export declare enum Icons {
81
81
  AddCircle = "add-circle",
82
82
  ZoomIn = "zoom-in",
83
83
  ZoomOut = "zoom-out",
84
- ArrowUp = "arrow-up"
84
+ ArrowUp = "arrow-up",
85
+ ExternalLink = "external-link"
85
86
  }
86
87
  type Tag = "span" | "div" | "i";
87
88
  export interface Props extends ComponentPropsWithRef<"div"> {
package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts CHANGED
@@ -15,13 +15,12 @@ interface CSSProperties {
15
15
  colorPrimary600?: string;
16
16
  colorPrimary700?: string;
17
17
  colorPrimary900?: string;
18
- colorPrimaryLight?: string;
18
+ colorPrimary50?: string;
19
19
  colorBlueGrey100?: string;
20
20
  colorBlueGrey200?: string;
21
21
  colorBlueGrey300?: string;
22
22
  colorBlueGrey400?: string;
23
23
  colorBlueGrey25?: string;
24
- colorBlueGrey25Transparent?: string;
25
24
  colorBlueGrey50?: string;
26
25
  colorBlueGrey500?: string;
27
26
  colorBlueGrey700?: string;
@@ -32,9 +31,6 @@ interface CSSProperties {
32
31
  colorGreen500?: string;
33
32
  colorGreen600?: string;
34
33
  colorGreen700?: string;
35
- colorLightBlue500?: string;
36
- colorLightBlue600?: string;
37
- colorShadowBlue?: string;
38
34
  colorOrange100?: string;
39
35
  colorOrange500?: string;
40
36
  colorOrange600?: string;
@@ -98,7 +94,6 @@ interface CSSProperties {
98
94
  inputHelperTextColor?: string;
99
95
  inputHoverBackgroundColor?: string;
100
96
  inputDisabledBackgroundColor?: string;
101
- dragBackgroundColor?: string;
102
97
  dragBorderStyle?: string;
103
98
  modalShadowColor?: string;
104
99
  modalBackgroundColor?: string;
package/dist/esm/src/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { BaseStyling } from "./components/_BaseStyling_/BaseStyling";
2
+ export type { Props as BaseStylingProps } from "./components/_BaseStyling_/BaseStyling";
2
3
  export { Button } from "./components/Button/Button";
3
4
  export type { Props as ButtonProps } from "./components/Button/Button";
4
5
  export { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "homepage": "http://onewelcome.github.io/react-lib-components",
3
3
  "name": "@onewelcome/react-lib-components",
4
- "version": "8.1.0",
4
+ "version": "8.1.2",
5
5
  "license": "Apache-2.0",
6
6
  "author": "OneWelcome B.V.",
7
7
  "main": "dist/cjs/src/index.cjs.js",
package/src/components/Form/FileUpload/FileUpload.module.scss CHANGED
@@ -86,7 +86,7 @@
86
86
  border: var(--file-upload-border-width) var(--drag-drop-border-style)
87
87
  var(--color-blue-grey500);
88
88
  border-radius: var(--input-border-radius);
89
- background-color: var(--color-primary-light);
89
+ background-color: var(--color-primary50);
90
90
 
91
91
  @include transition(all, 0.2s, ease-in-out);
92
92
  &::before {
@@ -99,7 +99,7 @@
99
99
  }
100
100
 
101
101
  &:hover .outline {
102
- background-color: var(--color-primary-light);
102
+ background-color: var(--color-primary50);
103
103
  }
104
104
 
105
105
  & .file-select {
package/src/components/Icon/Icon.module.scss CHANGED
@@ -369,8 +369,11 @@
369
369
  content: "\e94d";
370
370
  @include fontProperties();
371
371
  }
372
-
373
372
  .icon-arrow-up:before {
374
373
  content: "\e94f";
375
374
  @include fontProperties();
376
375
  }
376
+ .icon-external-link:before {
377
+ content: "\e950";
378
+ @include fontProperties();
379
+ }
package/src/components/Icon/Icon.tsx CHANGED
@@ -99,7 +99,8 @@ export enum Icons {
99
99
  AddCircle = "add-circle",
100
100
  ZoomIn = "zoom-in",
101
101
  ZoomOut = "zoom-out",
102
- ArrowUp = "arrow-up"
102
+ ArrowUp = "arrow-up",
103
+ ExternalLink = "external-link"
103
104
  }
104
105
 
105
106
  type Tag = "span" | "div" | "i";
package/src/components/_BaseStyling_/BaseStyling.tsx CHANGED
@@ -33,13 +33,12 @@ interface CSSProperties {
33
33
  colorPrimary600?: string;
34
34
  colorPrimary700?: string;
35
35
  colorPrimary900?: string;
36
- colorPrimaryLight?: string;
36
+ colorPrimary50?: string;
37
37
  colorBlueGrey100?: string;
38
38
  colorBlueGrey200?: string;
39
39
  colorBlueGrey300?: string;
40
40
  colorBlueGrey400?: string;
41
41
  colorBlueGrey25?: string;
42
- colorBlueGrey25Transparent?: string;
43
42
  colorBlueGrey50?: string;
44
43
  colorBlueGrey500?: string;
45
44
  colorBlueGrey700?: string;
@@ -50,9 +49,6 @@ interface CSSProperties {
50
49
  colorGreen500?: string;
51
50
  colorGreen600?: string;
52
51
  colorGreen700?: string;
53
- colorLightBlue500?: string;
54
- colorLightBlue600?: string;
55
- colorShadowBlue?: string;
56
52
  colorOrange100?: string;
57
53
  colorOrange500?: string;
58
54
  colorOrange600?: string;
@@ -116,7 +112,6 @@ interface CSSProperties {
116
112
  inputHelperTextColor?: string;
117
113
  inputHoverBackgroundColor?: string;
118
114
  inputDisabledBackgroundColor?: string;
119
- dragBackgroundColor?: string;
120
115
  dragBorderStyle?: string;
121
116
  modalShadowColor?: string;
122
117
  modalBackgroundColor?: string;
@@ -220,15 +215,14 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
220
215
 
221
216
  export const BaseStyling = ({ children, properties = {} }: Props) => {
222
217
  const defaultProperties: CSSProperties = {
218
+ colorPrimary50: "#E6E7F4",
223
219
  colorPrimary100: "#CDD0EA",
224
220
  colorPrimary300: "#6871BF",
225
221
  colorPrimary500: "#041295",
226
222
  colorPrimary600: "#030F77",
227
223
  colorPrimary700: "#020B59",
228
224
  colorPrimary900: "#01041E",
229
- colorPrimaryLight: "#E6E7F4",
230
225
  colorBlueGrey25: "#F7F7F9",
231
- colorBlueGrey25Transparent: "rgba(247, 247, 249, .8)",
232
226
  colorBlueGrey50: "#EEEFF3",
233
227
  colorBlueGrey100: "#DEDEE6",
234
228
  colorBlueGrey200: "#BCBECE",
@@ -243,8 +237,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
243
237
  colorGreen500: "#178244",
244
238
  colorGreen600: "#126836",
245
239
  colorGreen700: "#0E4E29",
246
- colorLightBlue500: "#00BCDD",
247
- colorLightBlue600: "#0096B1",
248
240
  colorOrange100: "#FFE0B2",
249
241
  colorOrange500: "#E07900",
250
242
  colorOrange600: "#B36100",
@@ -257,7 +249,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
257
249
  colorBlack100: "#000000",
258
250
  colorBlack20: "rgba(0, 0, 0, 0.2)",
259
251
  colorBlack10: "rgba(0, 0, 0, 0.1)",
260
- colorShadowBlue: "#7078C3",
261
252
  colorWhite: "#FFFFFF",
262
253
  colorFocus: "var(--color-primary300)",
263
254
  colorPrimary: "var(--color-primary500)",
@@ -315,7 +306,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
315
306
  inputHelperTextColor: "var(--color-blue-grey500)",
316
307
  inputHoverBackgroundColor: "var(--default-hover-color)",
317
308
  inputDisabledBackgroundColor: "var(--input-hover-background-color)",
318
- dragBackgroundColor: "var(--color-blue-grey25-transparent)",
319
309
  dragBorderStyle: "solid",
320
310
  modalShadowColor: "rgba(0, 0, 0, 0.16)",
321
311
  modalBackgroundColor: "var(--light)",
package/src/font/icomoon.eot CHANGED
Binary file
package/src/font/icomoon.svg CHANGED
@@ -87,5 +87,6 @@
87
87
  <glyph unicode="&#xe94d;" glyph-name="ZoomOut" d="M731.85 315.975h-46.258l-16.391 15.808c57.379 66.744 91.917 153.395 91.917 247.657 0 210.187-170.371 380.561-380.557 380.561s-380.561-170.374-380.561-380.561c0-210.187 170.374-380.557 380.561-380.557 94.262 0 180.913 34.538 247.657 91.917l15.808-16.391v-46.258l292.736-292.151 87.239 87.239-292.151 292.736zM380.561 315.975c-145.784 0-263.465 117.681-263.465 263.465s117.681 263.465 263.465 263.465c145.784 0 263.465-117.681 263.465-263.465s-117.681-263.465-263.465-263.465zM234.192 608.713h292.738v-58.548h-292.738v58.548z" />
88
88
  <glyph unicode="&#xe94e;" glyph-name="ZoomIn" d="M731.85 315.975h-46.258l-16.391 15.808c57.379 66.744 91.917 153.395 91.917 247.657 0 210.187-170.371 380.561-380.557 380.561s-380.561-170.374-380.561-380.561c0-210.187 170.374-380.557 380.561-380.557 94.262 0 180.913 34.538 247.657 91.917l15.808-16.391v-46.258l292.736-292.151 87.239 87.239-292.151 292.736zM380.561 315.975c-145.784 0-263.465 117.681-263.465 263.465s117.681 263.465 263.465 263.465c145.784 0 263.465-117.681 263.465-263.465s-117.681-263.465-263.465-263.465zM409.835 725.809h-58.548v-117.095h-117.095v-58.548h117.095v-117.095h58.548v117.095h117.095v58.548h-117.095v117.095z" />
89
89
  <glyph unicode="&#xe94f;" glyph-name="arrow-up" d="M0.001 448.003l90.24-90.24 357.76 357.117v-778.879h128.002v778.879l357.12-357.762 90.877 90.885-512.002 511.996-511.996-511.996z" />
90
+ <glyph unicode="&#xe950;" glyph-name="external-link" d="M910.225 49.775h-796.448v796.448h398.223v113.777h-398.223c-63.146 0-113.777-51.2-113.777-113.777v-796.448c0-62.575 50.631-113.775 113.777-113.775h796.448c62.575 0 113.775 51.2 113.775 113.775v398.225h-113.775v-398.225zM625.777 960v-113.777h204.232l-559.218-559.218 80.213-80.213 559.221 559.218v-204.232h113.775v398.223h-398.223z" />
90
91
  <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
91
92
  </font></defs></svg>
package/src/font/icomoon.ttf CHANGED
Binary file
package/src/font/icomoon.woff CHANGED
Binary file