npm - @onewelcome/react-lib-components - Versions diffs - 8.5.0 → 8.6.0 - Mend

@onewelcome/react-lib-components 8.5.0 → 8.6.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 (208) hide show

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("react");exports.BaseStyling=({children:o,properties:e={}})=>{const l={colorPrimary50:"#E6E7F4",colorPrimary100:"#CDD0EA",colorPrimary300:"#6871BF",colorPrimary500:"#041295",colorPrimary600:"#030F77",colorPrimary700:"#020B59",colorPrimary900:"#01041E",colorBlueGrey25:"#F7F7F9",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",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)",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)",dragBorderStyle:"solid",modalShadowColor:"rgba(0, 0, 0, 0.16)",modalBackgroundColor:"var(--light)",modalBackdropColor:"var(--default)",sideSheetShadowColorOne:"#01053214",sideSheetShadowColorTwo:"#0105320a",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"},[a,t]=r.useState(!0),c=r.useRef(null),n=r=>{for(const[o,e]of Object.entries(r)){const r=o.replace(/([A-Z])/g,(r=>`-${r.toLowerCase()}`));c.current.style.setProperty(`--${r}`,e)}};return r.useEffect((()=>{if(0!==Object.keys(e).length&&c.current){const r={...l,...e};n(r)}else c.current&&n(l);t(!1)}),[e,c.current]),r.createElement("div",{className:"basestyling-wrapper",ref:c},a?null:o)};
+"use strict";var r=require("react");exports.BaseStyling=({children:o,properties:e={}})=>{const l={colorPrimary50:"#E6E7F4",colorPrimary100:"#CDD0EA",colorPrimary300:"#6871BF",colorPrimary500:"#041295",colorPrimary600:"#030F77",colorPrimary700:"#020B59",colorPrimary900:"#01041E",colorBlueGrey25:"#F7F7F9",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",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)",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)",dragBorderStyle:"solid",modalShadowColor:"rgba(0, 0, 0, 0.16)",modalBackgroundColor:"var(--light)",modalBackdropColor:"var(--default)",sideSheetShadowColorOne:"#01053214",sideSheetShadowColorTwo:"#0105320a",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",readOnlyBorderColor:"var(--color-blue-grey100)",readOnlyTextColor:"var(--color-blue-grey900)",formControlFontSize:"0.875rem",fontSizeDataGrid:"0.875rem"},[a,t]=r.useState(!0),c=r.useRef(null),n=r=>{for(const[o,e]of Object.entries(r)){const r=o.replace(/([A-Z])/g,(r=>`-${r.toLowerCase()}`));c.current.style.setProperty(`--${r}`,e)}};return r.useEffect((()=>{if(0!==Object.keys(e).length&&c.current){const r={...l,...e};n(r)}else c.current&&n(l);t(!1)}),[e,c.current]),r.createElement("div",{className:"basestyling-wrapper",ref:c},a?null:o)};
 //# sourceMappingURL=BaseStyling.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseStyling.cjs.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 sideSheetShadowColorOne?: string;\n sideSheetShadowColorTwo?: 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 sideSheetShadowColorOne: \"#01053214\",\n sideSheetShadowColorTwo: \"#0105320a\",\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":["children","properties","defaultProperties","colorPrimary50","colorPrimary100","colorPrimary300","colorPrimary500","colorPrimary600","colorPrimary700","colorPrimary900","colorBlueGrey25","colorBlueGrey50","colorBlueGrey100","colorBlueGrey200","colorBlueGrey300","colorBlueGrey400","colorBlueGrey500","colorBlueGrey700","colorBlueGrey800","colorBlueGrey900","colorGreen100","colorGreen200","colorGreen500","colorGreen600","colorGreen700","colorOrange100","colorOrange500","colorOrange600","colorOrange700","colorRed100","colorRed200","colorRed500","colorRed600","colorRed700","colorBlack100","colorBlack20","colorBlack10","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","dragBorderStyle","modalShadowColor","modalBackgroundColor","modalBackdropColor","sideSheetShadowColorOne","sideSheetShadowColorTwo","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.cjs.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 sideSheetShadowColorOne?: string;\n sideSheetShadowColorTwo?: 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 readOnlyBorderColor?: string;\n readOnlyTextColor?: 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 sideSheetShadowColorOne: \"#01053214\",\n sideSheetShadowColorTwo: \"#0105320a\",\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 readOnlyBorderColor: \"var(--color-blue-grey100)\",\n readOnlyTextColor: \"var(--color-blue-grey900)\",\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":["children","properties","defaultProperties","colorPrimary50","colorPrimary100","colorPrimary300","colorPrimary500","colorPrimary600","colorPrimary700","colorPrimary900","colorBlueGrey25","colorBlueGrey50","colorBlueGrey100","colorBlueGrey200","colorBlueGrey300","colorBlueGrey400","colorBlueGrey500","colorBlueGrey700","colorBlueGrey800","colorBlueGrey900","colorGreen100","colorGreen200","colorGreen500","colorGreen600","colorGreen700","colorOrange100","colorOrange500","colorOrange600","colorOrange700","colorRed100","colorRed200","colorRed500","colorRed600","colorRed700","colorBlack100","colorBlack20","colorBlack10","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","dragBorderStyle","modalShadowColor","modalBackgroundColor","modalBackdropColor","sideSheetShadowColorOne","sideSheetShadowColorTwo","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","readOnlyBorderColor","readOnlyTextColor","formControlFontSize","fontSizeDataGrid","isLoading","setIsLoading","useState","baseStylingWrapper","useRef","setCSSProperties","CSSPropertiesObject","key","value","Object","entries","formattedPropertyName","replace","val","toLowerCase","current","style","setProperty","useEffect","keys","length","mergedState","React","className","ref"],"mappings":"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"}

package/dist/cjs/src/components/Form/Checkbox/Checkbox.d.ts CHANGED Viewed

@@ -9,4 +9,4 @@ export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector
     formSelectorWrapperProps?: FormSelectorWrapperProps;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement> & import("../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Fieldset/Fieldset.d.ts CHANGED Viewed

@@ -11,4 +11,4 @@ export interface Props extends ComponentPropsWithRef<"fieldset"> {
     required?: boolean;
     disablePropagation?: boolean;
 }
-export declare const Fieldset: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export declare const Fieldset: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLFieldSetElement> & import("../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/FileUpload/FileItem/FileItem.d.ts CHANGED Viewed

@@ -24,4 +24,4 @@ export declare enum ACTION_STATUS {
     RETRY = "retry",
     READONLY = "readonly"
 }
-export declare const FileItem: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FileItem: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/FileUpload/FileUpload.d.ts CHANGED Viewed

@@ -14,6 +14,9 @@ export interface Props extends FileUploadType {
     maxFileSizeInBytes?: number;
     selectButtonText?: string;
     dragAndDropText?: string;
+    /**
+     * @deprecated use the `helperText` prop instead
+     */
     subText?: string;
     onDragOver?: DragEventHandler;
     onDragEnter?: DragEventHandler;
@@ -25,6 +28,8 @@ export interface Props extends FileUploadType {
     isRequired?: boolean;
     invalidDropErrorMessage?: string;
     noMultipleFileDropErrorMessage?: string;
+    readOnlyViewMessage?: string;
+    helperText?: string;
 }
-export declare const FileUpload: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const FileUpload: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement> & import("../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;
 export {};

package/dist/cjs/src/components/Form/Input/Input.d.ts CHANGED Viewed

@@ -9,5 +9,6 @@ export type Props = MergeElementProps<"input", FormElement & {
     type: Type;
     suffix?: ReactNode;
     prefix?: ReactNode;
+    readOnlyView?: boolean;
 }>;
-export declare const Input: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement> & import("../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Radio/Radio.d.ts CHANGED Viewed

@@ -8,4 +8,4 @@ export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector
     formSelectorWrapperProps?: FormSelectorWrapperProps;
     helperProps?: HelperProps;
 }
-export declare const Radio: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement> & import("../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Select/MultiSelect/MultiSelect.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from "react";
 import { MultiSelectProps } from "../Select.interfaces";
-export declare const MultiSelect: React.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const MultiSelect: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<MultiSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Select/MultiSelect/useArrowNavigation.d.ts CHANGED Viewed

@@ -8,9 +8,10 @@ interface UseArrowNavigationParams {
     searchInputRef: React.RefObject<HTMLInputElement>;
     customSelectButtonRef: React.RefObject<HTMLButtonElement>;
     onClose: () => void;
+    isReadOnlyView?: boolean;
 }
 /** @scope .*/
-export declare const useArrowNavigation: ({ expanded, setExpanded, setFocusedSelectItem, childrenCount, setShouldClick, addBtnRef, searchInputRef, customSelectButtonRef, onClose }: UseArrowNavigationParams) => {
+export declare const useArrowNavigation: ({ expanded, setExpanded, setFocusedSelectItem, childrenCount, setShouldClick, addBtnRef, searchInputRef, customSelectButtonRef, onClose, isReadOnlyView }: UseArrowNavigationParams) => {
     onArrowNavigation: (event: React.KeyboardEvent) => void;
 };
 export {};

package/dist/cjs/src/components/Form/Select/MultiSelect/useMultiSelect.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import React from "react";
+export interface UseMultiSelectArgs {
+    initialOptions?: string[];
+    allOptions?: string[];
+    setAllOptions?: (options: string[]) => void;
+    pickedOptions: string[];
+    setPickedOptions: (options: string[]) => void;
+    onAddNew?: (newOption: string) => void;
+}
+export interface UseMultiSelectResult {
+    handleOptionChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    onAddNew: (newValue: string) => void;
+    optionElements: React.JSX.Element[];
+}
+export type UseMultiSelect = (args: UseMultiSelectArgs) => UseMultiSelectResult;
+export declare const useMultiSelect: UseMultiSelect;

package/dist/cjs/src/components/Form/Select/MultiSelect/useMultiSelect.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/cjs/src/components/Form/Select/Select.interfaces.d.ts CHANGED Viewed

@@ -30,13 +30,14 @@ export interface SelectProps<V extends string | readonly string[] | undefined> e
     noResultsLabel?: string;
     onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
     addNew?: AddNewProps;
+    isReadOnlyView?: boolean;
 }
 export type SingleSelectProps = SelectProps<string>;
 export type MultiSelectProps = SelectProps<string[]>;
-export type Position = {
-    top: number | `${number}rem` | "initial";
-    bottom: number | `${number}rem` | "initial";
-};
+export declare enum Position {
+    Above = "Above",
+    Below = "Below"
+}
 export interface UseArrowNavigationParams {
     expanded: boolean;
     setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
@@ -49,6 +50,7 @@ export interface UseArrowNavigationParams {
     searchInputRef: React.RefObject<HTMLInputElement>;
     addBtnRef?: React.RefObject<HTMLButtonElement>;
     renderThreshold: number;
+    isReadOnlyView?: boolean;
 }
 export interface UseSelectPositionListParams {
     expanded: boolean;

package/dist/cjs/src/components/Form/Select/SingleSelect/Select.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from "react";
 import { SingleSelectProps } from "../Select.interfaces";
-export declare const Select: React.ForwardRefExoticComponent<Omit<SingleSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<SingleSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Select/SingleSelect/useArrowNavigation.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { UseArrowNavigationParams } from "../Select.interfaces";
 /** @scope .*/
-export declare const useArrowNavigation: ({ expanded, setExpanded, isSearching, setIsSearching, setFocusedSelectItem, onOptionChangeHandler, childrenCount, setShouldClick, searchInputRef, addBtnRef, renderThreshold }: UseArrowNavigationParams) => {
+export declare const useArrowNavigation: ({ expanded, setExpanded, isSearching, setIsSearching, setFocusedSelectItem, onOptionChangeHandler, childrenCount, setShouldClick, searchInputRef, addBtnRef, renderThreshold, isReadOnlyView }: UseArrowNavigationParams) => {
     onArrowNavigation: (event: React.KeyboardEvent) => void;
 };

package/dist/cjs/src/components/Form/Select/useSelectPositionList.d.ts CHANGED Viewed

@@ -7,6 +7,6 @@ export declare const useSelectPositionList: ({ expanded, optionListReference, ad
     };
     opacity: number;
     setOpacity: import("react").Dispatch<import("react").SetStateAction<number>>;
-    listPosition: Partial<Position>;
-    setListPosition: import("react").Dispatch<import("react").SetStateAction<Partial<Position>>>;
+    listPosition: Position;
+    setListPosition: import("react").Dispatch<import("react").SetStateAction<Position>>;
 };

package/dist/cjs/src/components/Form/Textarea/Textarea.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@ import React, { ComponentPropsWithRef } from "react";
 import { FormElement } from "../form.interfaces";
 export interface Props extends ComponentPropsWithRef<"textarea">, FormElement {
     wrapperProps?: ComponentPropsWithRef<"div">;
+    readOnlyView?: boolean;
 }
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLTextAreaElement> & import("../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.d.ts CHANGED Viewed

@@ -9,4 +9,4 @@ export interface Props extends ComponentPropsWithRef<"div">, Omit<WrapperProps,
 /**
  * @deprecated
  */
-export declare const CheckboxWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxWrapper: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Wrapper/InputWrapper/InputWrapper.d.ts CHANGED Viewed

@@ -14,5 +14,5 @@ export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     success?: boolean;
 }
-export declare const InputWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InputWrapper: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;
 export {};

package/dist/cjs/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.d.ts CHANGED Viewed

@@ -12,5 +12,5 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange">, O
     onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     success?: boolean;
 }
-export declare const MultiSelectWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MultiSelectWrapper: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;
 export {};

package/dist/cjs/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.d.ts CHANGED Viewed

@@ -7,4 +7,4 @@ export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
     value: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const RadioWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioWrapper: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.d.ts CHANGED Viewed

@@ -12,5 +12,5 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange">, O
     onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     success?: boolean;
 }
-export declare const SelectWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectWrapper: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;
 export {};

package/dist/cjs/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.d.ts CHANGED Viewed

@@ -11,5 +11,6 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onFocus" | "o
     onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
     onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
     success?: boolean;
+    readOnlyView?: boolean;
 }
-export declare const TextareaWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TextareaWrapper: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement> & import("../../../withReadOnly").WithReadOnlyProps>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/src/components/_BaseStyling_/BaseStyling.d.ts CHANGED Viewed

@@ -185,6 +185,8 @@ interface CSSProperties {
     fileUploadBorderWidth?: string;
     dragDropBorderStyle?: string;
     fontSizeDataGrid?: string;
+    readOnlyBorderColor?: string;
+    readOnlyTextColor?: string;
 }
 export interface Props extends HTMLAttributes<HTMLDivElement> {
     children?: ReactElement[] | ReactElement | string[] | string | number[] | number;

package/dist/cjs/src/components/withReadOnly.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React, { ComponentType } from "react";
+export interface WithReadOnlyProps {
+    readOnlyView?: boolean;
+    required?: boolean;
+    helperText?: string;
+    type?: string;
+}
+export declare const withReadOnly: <P extends object>(WrappedComponent: ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithChildren<P & WithReadOnlyProps>> & React.RefAttributes<any>>;

package/dist/cjs/src/components/withReadOnly.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/cjs/src/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_BaseStyling_/BaseStyling.cjs.js"),r=require("../Button/Button.cjs.js"),t=require("../Breadcrumbs/Breadcrumbs.cjs.js"),o=require("../ContextMenu/ContextMenu.cjs.js"),s=require("../ContextMenu/ContextMenuItem.cjs.js"),i=require("../Link/Link.cjs.js"),a=require("../Icon/Icon.cjs.js"),p=require("../Button/IconButton.cjs.js"),n=require("../Tabs/Tab.cjs.js"),l=require("../Tabs/Tabs.cjs.js"),c=require("../Tag/Tag.cjs.js"),u=require("../TextEllipsis/TextEllipsis.cjs.js"),j=require("../Tiles/Tile.cjs.js"),d=require("../Tiles/Tiles.cjs.js"),x=require("../Tooltip/Tooltip.cjs.js"),S=require("../Typography/Typography.cjs.js"),F=require("../ProgressBar/ProgressBar.cjs.js"),q=require("../Skeleton/Skeleton.cjs.js"),m=require("../Spinner/Spinner.cjs.js"),C=require("../Stepper/Stepper.cjs.js"),T=require("../Pagination/Pagination.cjs.js"),M=require("./hooks/useRepeater.cjs.js"),g=require("./hooks/useFullHeightCollapse.cjs.js"),h=require("./hooks/usePosition.cjs.js"),D=require("./hooks/useDebouncedCallback.cjs.js"),B=require("./hooks/useUploadFile.cjs.js"),I=require("./util/helper.cjs.js"),b=require("../Notifications/BaseModal/BaseModal.cjs.js"),W=require("../Notifications/Alert/useAlert.cjs.js"),f=require("../Notifications/Alert/AlertProvider/AlertProvider.cjs.js"),G=require("../Notifications/Alert/AlertItem/AlertItem.cjs.js"),k=require("../Notifications/Dialog/Dialog.cjs.js"),P=require("../Notifications/DiscardChangesModal/DiscardChangesModal.cjs.js"),y=require("../Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js"),A=require("../Notifications/BaseModal/BaseModalContent/BaseModalContent.cjs.js"),N=require("../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.cjs.js"),H=require("../Notifications/NotificationProvider/NotificationContext.cjs.js"),R=require("../Notifications/SlideInModal/SlideInModal.cjs.js"),L=require("../Notifications/SideSheet/SideSheet.cjs.js"),O=require("../Notifications/SideSheet/SideSheetContent/SideSheetContent.cjs.js"),U=require("../Notifications/SideSheet/SideSheetHeader/SideSheetHeader.cjs.js"),v=require("../Form/Checkbox/Checkbox.cjs.js"),w=require("../Form/Fieldset/Fieldset.cjs.js"),E=require("../Form/Form.cjs.js"),_=require("../Form/FormControl/FormControl.cjs.js"),K=require("../Form/FormGroup/FormGroup.cjs.js"),z=require("../Form/FormHelperText/FormHelperText.cjs.js"),J=require("../Form/Input/Input.cjs.js"),Q=require("../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),V=require("../Form/Label/Label.cjs.js"),X=require("../Form/Radio/Radio.cjs.js"),Y=require("../Form/Wrapper/RadioWrapper/RadioWrapper.cjs.js"),Z=require("../Form/Select/SingleSelect/Select.cjs.js"),$=require("../Form/Select/MultiSelect/MultiSelect.cjs.js"),ee=require("../Form/Select/SingleSelect/Option.cjs.js"),re=require("../Form/Select/MultiSelect/MultiOption.cjs.js"),te=require("../Form/Textarea/Textarea.cjs.js"),oe=require("../Form/Toggle/Toggle.cjs.js"),se=require("../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.cjs.js"),ie=require("../Form/Wrapper/TextareaWrapper/TextareaWrapper.cjs.js"),ae=require("../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),pe=require("../Form/FileUpload/FileUpload.cjs.js"),ne=require("../Form/FileUpload/FileItem/FileItem.cjs.js"),le=require("../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.cjs.js"),ce=require("../Layout/ContentHeader/ContentHeader.cjs.js"),ue=require("../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.cjs.js"),je=require("../Layout/FormPage/FormWithStepper/FormSection/FormSection.cjs.js"),de=require("../Layout/FormPage/FormWithStepper/FormWithStepper.cjs.js"),xe=require("../DataGrid/DataGrid.cjs.js"),Se=require("../DataGrid/DataGridBody/DataGridRow/DataGridRow.cjs.js"),Fe=require("../DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.cjs.js"),qe=require("../DataGrid/DataGridBody/DataGridCell/DataGridCell.cjs.js"),me=require("../DataGrid/DataGridFilters/FilterKeyMapper.cjs.js"),Ce=require("../DataGrid/DataGridFilters/useFiltersReducer.cjs.js"),Te=require("../Notifications/Banner/Banner.cjs.js"),Me=require("../DatePicker/DatePicker.cjs.js"),ge=require("../admin/layout/MicrofrontendContainer/MicrofrontendContainer.cjs.js");exports.BaseStyling=e.BaseStyling,exports.Button=r.Button,exports.Breadcrumbs=t.Breadcrumbs,exports.ContextMenu=o.ContextMenu,exports.ContextMenuItem=s.ContextMenuItem,exports.Link=i.Link,exports.Icon=a.Icon,Object.defineProperty(exports,"Icons",{enumerable:!0,get:function(){return a.Icons}}),exports.IconButton=p.IconButton,exports.Tab=n.Tab,exports.Tabs=l.Tabs,exports.Tag=c.Tag,exports.TextEllipsis=u.TextEllipsis,exports.Tile=j.Tile,exports.Tiles=d.Tiles,exports.Tooltip=x.Tooltip,exports.Typography=S.Typography,exports.ProgressBar=F.ProgressBar,exports.Skeleton=q.Skeleton,exports.Spinner=m.Spinner,exports.Stepper=C.Stepper,exports.Pagination=T.Pagination,exports.useRepeater=M.useRepeater,exports.useFullHeightCollapse=g.useFullHeightCollapse,exports.usePosition=h.usePosition,exports.useDebouncedCallback=D.useDebouncedCallback,exports.useUploadFile=B.useUploadFile,exports.debounce=I.debounce,exports.generateID=I.generateID,exports.throttle=I.throttle,exports.Modal=b.BaseModal,exports.useAlert=W.useAlert,exports.AlertProvider=f.AlertProvider,exports.AlertItem=G.AlertItem,exports.Dialog=k.Dialog,exports.DiscardChangesModal=P.DiscardChangesModal,exports.ModalActions=y.BaseModalActions,exports.SideSheetActions=y.BaseModalActions,exports.ModalContent=A.BaseModalContent,exports.ModalHeader=N.BaseModalHeader,exports.NotificationProvider=H.NotificationProvider,exports.useNotificationContext=H.useNotificationContext,exports.SlideInModal=R.SlideInModal,exports.SideSheet=L.SideSheet,exports.SideSheetContent=O.SideSheetContent,exports.SideSheetHeader=U.SideSheetHeader,exports.Checkbox=v.Checkbox,exports.Fieldset=w.Fieldset,exports.Form=E.Form,exports.FormControl=_.FormControl,exports.FormGroup=K.FormGroup,exports.FormHelperText=z.FormHelperText,exports.Input=J.Input,exports.InputWrapper=Q.InputWrapper,exports.Label=V.Label,exports.Radio=X.Radio,exports.RadioWrapper=Y.RadioWrapper,exports.Select=Z.Select,exports.MultiSelect=$.MultiSelect,exports.Option=ee.Option,exports.MultiOption=re.MultiOption,exports.Textarea=te.Textarea,exports.Toggle=oe.Toggle,exports.CheckboxWrapper=se.CheckboxWrapper,exports.TextareaWrapper=ie.TextareaWrapper,exports.SelectWrapper=ae.SelectWrapper,exports.FileUpload=pe.FileUpload,Object.defineProperty(exports,"ACTION_STATUS",{enumerable:!0,get:function(){return ne.ACTION_STATUS}}),Object.defineProperty(exports,"FILE_ACTION",{enumerable:!0,get:function(){return ne.FILE_ACTION}}),exports.MultiSelectWrapper=le.MultiSelectWrapper,exports.ContentHeader=ce.ContentHeader,exports.FormStepper=ue.FormStepper,exports.FormSection=je.FormSection,exports.FormWithStepper=de.FormWithStepper,exports.DataGrid=xe.DataGrid,exports.DataGridRow=Se.DataGridRow,exports.DataGridDrawerItem=Fe.DataGridDrawerItem,exports.DataGridCell=qe.DataGridCell,exports.FilterKeyMapper=me.FilterKeyMapper,exports.useFiltersReducer=Ce.useFiltersReducer,exports.Banner=Te.Banner,exports.DatePicker=Me.DatePicker,exports.MicrofrontendContainer=ge.MicrofrontendContainer;
+"use strict";var e=require("../_BaseStyling_/BaseStyling.cjs.js"),r=require("../Button/Button.cjs.js"),t=require("../Breadcrumbs/Breadcrumbs.cjs.js"),o=require("../ContextMenu/ContextMenu.cjs.js"),s=require("../ContextMenu/ContextMenuItem.cjs.js"),i=require("../Link/Link.cjs.js"),a=require("../Icon/Icon.cjs.js"),p=require("../Button/IconButton.cjs.js"),l=require("../Tabs/Tab.cjs.js"),n=require("../Tabs/Tabs.cjs.js"),c=require("../Tag/Tag.cjs.js"),u=require("../TextEllipsis/TextEllipsis.cjs.js"),j=require("../Tiles/Tile.cjs.js"),d=require("../Tiles/Tiles.cjs.js"),x=require("../Tooltip/Tooltip.cjs.js"),S=require("../Typography/Typography.cjs.js"),F=require("../ProgressBar/ProgressBar.cjs.js"),q=require("../Skeleton/Skeleton.cjs.js"),m=require("../Spinner/Spinner.cjs.js"),M=require("../Stepper/Stepper.cjs.js"),C=require("../Pagination/Pagination.cjs.js"),T=require("./hooks/useRepeater.cjs.js"),g=require("./hooks/useFullHeightCollapse.cjs.js"),h=require("./hooks/usePosition.cjs.js"),D=require("./hooks/useDebouncedCallback.cjs.js"),B=require("./hooks/useUploadFile.cjs.js"),I=require("./util/helper.cjs.js"),b=require("../Notifications/BaseModal/BaseModal.cjs.js"),W=require("../Notifications/Alert/useAlert.cjs.js"),f=require("../Notifications/Alert/AlertProvider/AlertProvider.cjs.js"),G=require("../Notifications/Alert/AlertItem/AlertItem.cjs.js"),k=require("../Notifications/Dialog/Dialog.cjs.js"),P=require("../Notifications/DiscardChangesModal/DiscardChangesModal.cjs.js"),y=require("../Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js"),A=require("../Notifications/BaseModal/BaseModalContent/BaseModalContent.cjs.js"),N=require("../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.cjs.js"),H=require("../Notifications/NotificationProvider/NotificationContext.cjs.js"),R=require("../Notifications/SlideInModal/SlideInModal.cjs.js"),L=require("../Notifications/SideSheet/SideSheet.cjs.js"),O=require("../Notifications/SideSheet/SideSheetContent/SideSheetContent.cjs.js"),U=require("../Notifications/SideSheet/SideSheetHeader/SideSheetHeader.cjs.js"),v=require("../Form/Checkbox/Checkbox.cjs.js"),w=require("../Form/Fieldset/Fieldset.cjs.js"),E=require("../Form/Form.cjs.js"),_=require("../Form/FormControl/FormControl.cjs.js"),K=require("../Form/FormGroup/FormGroup.cjs.js"),z=require("../Form/FormHelperText/FormHelperText.cjs.js"),J=require("../Form/Input/Input.cjs.js"),Q=require("../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),V=require("../Form/Label/Label.cjs.js"),X=require("../Form/Radio/Radio.cjs.js"),Y=require("../Form/Wrapper/RadioWrapper/RadioWrapper.cjs.js"),Z=require("../Form/Select/SingleSelect/Select.cjs.js"),$=require("../Form/Select/MultiSelect/MultiSelect.cjs.js"),ee=require("../Form/Select/SingleSelect/Option.cjs.js"),re=require("../Form/Select/MultiSelect/MultiOption.cjs.js"),te=require("../Form/Textarea/Textarea.cjs.js"),oe=require("../Form/Toggle/Toggle.cjs.js"),se=require("../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.cjs.js"),ie=require("../Form/Wrapper/TextareaWrapper/TextareaWrapper.cjs.js"),ae=require("../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),pe=require("../Form/FileUpload/FileUpload.cjs.js"),le=require("../Form/FileUpload/FileItem/FileItem.cjs.js"),ne=require("../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.cjs.js"),ce=require("../Form/Select/MultiSelect/useMultiSelect.cjs.js"),ue=require("../Layout/ContentHeader/ContentHeader.cjs.js"),je=require("../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.cjs.js"),de=require("../Layout/FormPage/FormWithStepper/FormSection/FormSection.cjs.js"),xe=require("../Layout/FormPage/FormWithStepper/FormWithStepper.cjs.js"),Se=require("../DataGrid/DataGrid.cjs.js"),Fe=require("../DataGrid/DataGridBody/DataGridRow/DataGridRow.cjs.js"),qe=require("../DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.cjs.js"),me=require("../DataGrid/DataGridBody/DataGridCell/DataGridCell.cjs.js"),Me=require("../DataGrid/DataGridFilters/FilterKeyMapper.cjs.js"),Ce=require("../DataGrid/DataGridFilters/useFiltersReducer.cjs.js"),Te=require("../Notifications/Banner/Banner.cjs.js"),ge=require("../DatePicker/DatePicker.cjs.js"),he=require("../admin/layout/MicrofrontendContainer/MicrofrontendContainer.cjs.js");exports.BaseStyling=e.BaseStyling,exports.Button=r.Button,exports.Breadcrumbs=t.Breadcrumbs,exports.ContextMenu=o.ContextMenu,exports.ContextMenuItem=s.ContextMenuItem,exports.Link=i.Link,exports.Icon=a.Icon,Object.defineProperty(exports,"Icons",{enumerable:!0,get:function(){return a.Icons}}),exports.IconButton=p.IconButton,exports.Tab=l.Tab,exports.Tabs=n.Tabs,exports.Tag=c.Tag,exports.TextEllipsis=u.TextEllipsis,exports.Tile=j.Tile,exports.Tiles=d.Tiles,exports.Tooltip=x.Tooltip,exports.Typography=S.Typography,exports.ProgressBar=F.ProgressBar,exports.Skeleton=q.Skeleton,exports.Spinner=m.Spinner,exports.Stepper=M.Stepper,exports.Pagination=C.Pagination,exports.useRepeater=T.useRepeater,exports.useFullHeightCollapse=g.useFullHeightCollapse,exports.usePosition=h.usePosition,exports.useDebouncedCallback=D.useDebouncedCallback,exports.useUploadFile=B.useUploadFile,exports.debounce=I.debounce,exports.generateID=I.generateID,exports.throttle=I.throttle,exports.Modal=b.BaseModal,exports.useAlert=W.useAlert,exports.AlertProvider=f.AlertProvider,exports.AlertItem=G.AlertItem,exports.Dialog=k.Dialog,exports.DiscardChangesModal=P.DiscardChangesModal,exports.ModalActions=y.BaseModalActions,exports.SideSheetActions=y.BaseModalActions,exports.ModalContent=A.BaseModalContent,exports.ModalHeader=N.BaseModalHeader,exports.NotificationProvider=H.NotificationProvider,exports.useNotificationContext=H.useNotificationContext,exports.SlideInModal=R.SlideInModal,exports.SideSheet=L.SideSheet,exports.SideSheetContent=O.SideSheetContent,exports.SideSheetHeader=U.SideSheetHeader,exports.Checkbox=v.Checkbox,exports.Fieldset=w.Fieldset,exports.Form=E.Form,exports.FormControl=_.FormControl,exports.FormGroup=K.FormGroup,exports.FormHelperText=z.FormHelperText,exports.Input=J.Input,exports.InputWrapper=Q.InputWrapper,exports.Label=V.Label,exports.Radio=X.Radio,exports.RadioWrapper=Y.RadioWrapper,exports.Select=Z.Select,exports.MultiSelect=$.MultiSelect,exports.Option=ee.Option,exports.MultiOption=re.MultiOption,exports.Textarea=te.Textarea,exports.Toggle=oe.Toggle,exports.CheckboxWrapper=se.CheckboxWrapper,exports.TextareaWrapper=ie.TextareaWrapper,exports.SelectWrapper=ae.SelectWrapper,exports.FileUpload=pe.FileUpload,Object.defineProperty(exports,"ACTION_STATUS",{enumerable:!0,get:function(){return le.ACTION_STATUS}}),Object.defineProperty(exports,"FILE_ACTION",{enumerable:!0,get:function(){return le.FILE_ACTION}}),exports.MultiSelectWrapper=ne.MultiSelectWrapper,exports.useMultiSelect=ce.useMultiSelect,exports.ContentHeader=ue.ContentHeader,exports.FormStepper=je.FormStepper,exports.FormSection=de.FormSection,exports.FormWithStepper=xe.FormWithStepper,exports.DataGrid=Se.DataGrid,exports.DataGridRow=Fe.DataGridRow,exports.DataGridDrawerItem=qe.DataGridDrawerItem,exports.DataGridCell=me.DataGridCell,exports.FilterKeyMapper=Me.FilterKeyMapper,exports.useFiltersReducer=Ce.useFiltersReducer,exports.Banner=Te.Banner,exports.DatePicker=ge.DatePicker,exports.MicrofrontendContainer=he.MicrofrontendContainer;
 //# sourceMappingURL=index.cjs.js.map

package/dist/cjs/src/index.d.ts CHANGED Viewed

@@ -124,6 +124,7 @@ export type { Props as FileUploadProps, FileType } from "./components/Form/FileU
 export { FILE_ACTION, ACTION_STATUS } from "./components/Form/FileUpload/FileItem/FileItem";
 export { MultiSelectWrapper } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export type { Props as MultiSelectWrapperProps } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+export { useMultiSelect } from "./components/Form/Select/MultiSelect/useMultiSelect";
 export { ContentHeader } from "./components/Layout/ContentHeader/ContentHeader";
 export type { Props as ContentHeaderProps } from "./components/Layout/ContentHeader/ContentHeader";
 export { FormStepper } from "./components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper";

package/dist/cjs/src/util/unitTestUtils.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export declare class MockDOMRect implements DOMRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    constructor(x?: number, y?: number, width?: number, height?: number, top?: number, right?: number, bottom?: number, left?: number);
+    toJSON(): this;
+}

package/dist/cjs/withReadOnly.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react");const r=["CheckboxWrapper"],t=(e,r,t)=>{const n={};return e?(n.style={pointerEvents:"none",userSelect:"text"},t&&(n.helperText="")):n.helperText=t,r&&(n.type=r),n};exports.withReadOnly=n=>{const a=e=>{const t=e=>{(e=>"Enter"===e.key\|\|" "===e.key)(e)&&(e.stopPropagation(),e.preventDefault())};if(e&&r.includes(n.displayName\|\|n.name)){const e={onKeyUp:e=>{t(e)},onKeyDown:e=>{t(e)}};return e}return{}},o=e.forwardRef(((r,o)=>{const{readOnlyView:l=!1,required:i,children:p,helperText:s,type:d="",...u}=r;return e.createElement(n,{ref:o,...u,"data-readonlyview":l,"aria-readonly":l,required:!l&&i,...t(l,d,s),...a(l)},p)}));return o.displayName=`withReadOnly_${(e=>{var r,t;return null!==(t=null!==(r=e.displayName)&&void 0!==r?r:e.name)&&void 0!==t?t:"Component"})(n)}`,o};
2	+ //# sourceMappingURL=withReadOnly.cjs.js.map

package/dist/cjs/withReadOnly.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"withReadOnly.cjs.js","sources":["../../../../src/components/withReadOnly.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, { ComponentType, ForwardedRef, PropsWithChildren } from \"react\";\n\nexport interface WithReadOnlyProps {\n readOnlyView?: boolean;\n required?: boolean;\n helperText?: string;\n type?: string;\n}\n\nconst componentsWithKeyEventsToPrevent: string[] = [\"CheckboxWrapper\"];\n\nconst getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {\n return WrappedComponent.displayName ?? WrappedComponent.name ?? \"Component\";\n};\n\nconst getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {\n const props: Record<string, any> = {};\n\n if (readOnlyView) {\n props.style = { pointerEvents: \"none\", userSelect: \"text\" };\n if (helperText) {\n props.helperText = \"\";\n }\n } else {\n props.helperText = helperText;\n }\n\n if (type) {\n props.type = type;\n }\n\n return props;\n};\n\nexport const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {\n const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {\n const preventSubmissionKeys = (e: KeyboardEvent) => {\n const isEnterOrSpace = (e: KeyboardEvent) => e.key === \"Enter\" || e.key === \" \";\n if (isEnterOrSpace(e)) {\n e.stopPropagation();\n e.preventDefault();\n }\n };\n\n if (\n readOnlyView &&\n componentsWithKeyEventsToPrevent.includes(\n WrappedComponent.displayName || WrappedComponent.name\n )\n ) {\n const props: Record<string, any> = {};\n\n props.onKeyUp = (e: KeyboardEvent) => {\n preventSubmissionKeys(e);\n };\n\n props.onKeyDown = (e: KeyboardEvent) => {\n preventSubmissionKeys(e);\n };\n\n return props;\n }\n\n return {};\n };\n\n const WithReadOnlyComponent = React.forwardRef(\n (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<any>) => {\n const {\n readOnlyView = false,\n required,\n children,\n helperText,\n type = \"\",\n ...restProps\n } = props;\n\n return (\n <WrappedComponent\n ref={ref}\n {...(restProps as P)}\n data-readonlyview={readOnlyView}\n aria-readonly={readOnlyView}\n required={readOnlyView ? false : required}\n {...getConditionalProps(readOnlyView, type, helperText)}\n {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}\n >\n {children}\n </WrappedComponent>\n );\n }\n );\n\n WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;\n return WithReadOnlyComponent;\n};\n"],"names":["componentsWithKeyEventsToPrevent","getConditionalProps","readOnlyView","type","helperText","props","style","pointerEvents","userSelect","WrappedComponent","preventKeyUpAndKeyDownHandlerForSpecificComponents","preventSubmissionKeys","e","key","isEnterOrSpace","stopPropagation","preventDefault","includes","displayName","name","WithReadOnlyComponent","React","forwardRef","ref","required","children","restProps","createElement","_b","_a","getDisplayName"],"mappings":"oCAyBA,MAAMA,EAA6C,CAAC,mBAM9CC,EAAsB,CAACC,EAAuBC,EAAcC,KAChE,MAAMC,EAA6B,CAAA,EAenC,OAbIH,GACFG,EAAMC,MAAQ,CAAEC,cAAe,OAAQC,WAAY,QAC/CJ,IACFC,EAAMD,WAAa,KAGrBC,EAAMD,WAAaA,EAGjBD,IACFE,EAAMF,KAAOA,GAGRE,CAAK,uBAGiCI,IAC7C,MAAMC,EAAsDR,IAC1D,MAAMS,EAAyBC,IACN,CAACA,GAA+B,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,IAChEC,CAAeF,KACjBA,EAAEG,kBACFH,EAAEI,iBACH,EAGH,GACEd,GACAF,EAAiCiB,SAC/BR,EAAiBS,aAAeT,EAAiBU,MAEnD,CACA,MAAMd,EAA6B,CAEnCA,QAAiBO,IACfD,EAAsBC,EAAE,EAG1BP,UAAmBO,IACjBD,EAAsBC,EAAE,GAG1B,OAAOP,CACR,CAED,MAAO,EAAE,EAGLe,EAAwBC,EAAMC,YAClC,CAACjB,EAAiDkB,KAChD,MAAMrB,aACJA,GAAe,EAAKsB,SACpBA,EAAQC,SACRA,EAAQrB,WACRA,EAAUD,KACVA,EAAO,MACJuB,GACDrB,EAEJ,OACEgB,EAACM,cAAAlB,GACCc,IAAKA,KACAG,sBACcxB,EAAY,gBAChBA,EACfsB,UAAUtB,GAAuBsB,KAC7BvB,EAAoBC,EAAcC,EAAMC,MACxCM,EAAmDR,IAEtDuB,EAEH,IAKN,OADAL,EAAsBF,YAAc,gBAlFf,CAAKT,YAC1B,OAAgE,QAAzDmB,EAAgC,QAAhCC,EAAApB,EAAiBS,mBAAe,IAAAW,EAAAA,EAAApB,EAAiBU,YAAQ,IAAAS,EAAAA,EAAA,WAAW,EAiFvBE,CAAerB,KAC5DW,CAAqB"}

package/dist/esm/Form/Checkbox/Checkbox.esm.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { Icon, Icons } from '../../Icon/Icon.esm.js';
 import classes from './Checkbox.module.scss.esm.js';
 import { useFormSelector } from '../../src/hooks/useFormSelector.esm.js';
 import { FormSelectorWrapper } from '../FormSelectorWrapper/FormSelectorWrapper.esm.js';
+import { withReadOnly } from '../../withReadOnly.esm.js';
 /*
  * Copyright 2022 OneWelcome B.V.
@@ -72,7 +73,7 @@ const CheckboxComponent = ({ children, name, helperText, helperProps, indetermin
         !checked && !indeterminate && (React.createElement(Icon, { className: `${iconClasses.join(" ")} ${classes["square"]}`, icon: Icons.Square })),
         React.createElement("label", { htmlFor: `${identifier}-checkbox` }, determineLabel())));
 };
-const Checkbox = React.forwardRef(CheckboxComponent);
+const Checkbox = withReadOnly(React.forwardRef(CheckboxComponent));
 export { Checkbox };
 //# sourceMappingURL=Checkbox.esm.js.map

package/dist/esm/Form/Checkbox/Checkbox.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.esm.js","sources":["../../../../../../src/components/Form/Checkbox/Checkbox.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, {\n ForwardRefRenderFunction,\n ComponentPropsWithRef,\n ReactElement,\n ReactNode,\n useEffect\n} from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Props as FormHelperTextProps } from \"../FormHelperText/FormHelperText\";\nimport classes from \"./Checkbox.module.scss\";\nimport { useFormSelector } from \"../../../hooks/useFormSelector\";\nimport {\n FormSelectorWrapper,\n Props as FormSelectorWrapperProps\n} from \"../FormSelectorWrapper/FormSelectorWrapper\";\nimport { FormSelector } from \"../form.interfaces\";\n\nconst isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.[\"data-toggle\"];\n\nexport interface Props extends ComponentPropsWithRef<\"input\">, Omit<FormSelector, \"success\"> {\n label?: string \| React.ReactElement;\n indeterminate?: boolean;\n helperProps?: FormHelperTextProps;\n formSelectorWrapperProps?: FormSelectorWrapperProps;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (\n {\n children,\n name,\n helperText,\n helperProps,\n indeterminate,\n parentErrorId,\n errorMessage,\n disabled,\n label,\n parentHelperId,\n className,\n error,\n checked = false,\n formSelectorWrapperProps,\n onChange,\n ...rest\n }: Props,\n ref\n) => {\n const { errorId, identifier, describedBy } = useFormSelector({\n name,\n helperText,\n parentErrorId,\n errorMessage,\n error,\n parentHelperId\n });\n\n useEffect(() => {\n if (!name) {\n throw new Error(\"Please pass a 'name' prop to your <Checkbox> component.\");\n }\n\n if (typeof children === \"object\" && !isToggle(children) && indeterminate === undefined) {\n throw new Error(\n \"If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.\"\n );\n }\n }, []);\n\n const determineLabel = () => {\n // this should be temporary, for backwards compatibility;\n // once the components implementing checkboxes in microfrontends are updated, only label should be returned\n if (label) {\n return label;\n } else if (typeof children === \"string\") {\n return children;\n }\n };\n\n const renderNestedCheckboxes = () => (\n <ul className={classes[\"checkbox-list\"]}>\n {React.Children.map(children as ReactElement[], child => {\n return (\n <li>\n <Checkbox\n {...child.props}\n parentHelperId={parentHelperId}\n parentErrorId={parentErrorId}\n error={error}\n disabled={child.props.disabled ? child.props.disabled : disabled}\n >\n {child.props.children}\n </Checkbox>\n </li>\n );\n })}\n </ul>\n );\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) {\n return;\n }\n onChange?.(event);\n };\n\n const renderToggle = () => React.Children.toArray(children).filter(isToggle);\n\n const iconClasses = [classes[\"input\"]];\n const nativeInputClasses = [classes[\"native-input\"]];\n const wrapperClasses = [classes[\"checkbox-wrapper\"]];\n error && nativeInputClasses.push(classes[\"error\"]);\n disabled && nativeInputClasses.push(classes[\"disabled\"]) && iconClasses.push(classes[\"disabled\"]);\n className && wrapperClasses.push(className);\n\n return (\n <FormSelectorWrapper\n {...formSelectorWrapperProps}\n className={wrapperClasses.join(\" \")}\n containerProps={{ className: classes[\"checkbox-container\"] }}\n helperText={helperText}\n helperProps={helperProps}\n parentErrorId={parentErrorId}\n errorId={errorId}\n errorMessage={errorMessage}\n error={error}\n disabled={disabled}\n identifier={identifier}\n nestedChildren={\n typeof children === \"object\" && !isToggle(children) && renderNestedCheckboxes()\n }\n >\n <input\n {...rest}\n ref={ref}\n disabled={disabled}\n className={nativeInputClasses.join(\" \")}\n checked={checked}\n onChange={onChangeHandler}\n aria-invalid={error as boolean}\n aria-checked={indeterminate ? \"mixed\" : checked}\n aria-describedby={describedBy}\n id={`${identifier}-checkbox`}\n name={name}\n type=\"checkbox\"\n />\n {renderToggle()}\n\n {indeterminate && (\n <Icon\n className={`${iconClasses.join(\" \")} ${classes[\"indeterminate\"]}`}\n icon={Icons.MinusSquare}\n />\n )}\n {checked && !indeterminate && (\n <Icon\n className={`${iconClasses.join(\" \")} ${classes[\"checkmark\"]}`}\n icon={Icons.CheckmarkSquare}\n />\n )}\n {!checked && !indeterminate && (\n <Icon className={`${iconClasses.join(\" \")} ${classes[\"square\"]}`} icon={Icons.Square} />\n )}\n <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>\n </FormSelectorWrapper>\n );\n};\n\nexport const Checkbox = React.forwardRef(CheckboxComponent);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.esm.js","sources":["../../../../../../src/components/Form/Checkbox/Checkbox.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, {\n ForwardRefRenderFunction,\n ComponentPropsWithRef,\n ReactElement,\n ReactNode,\n useEffect\n} from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Props as FormHelperTextProps } from \"../FormHelperText/FormHelperText\";\nimport classes from \"./Checkbox.module.scss\";\nimport { useFormSelector } from \"../../../hooks/useFormSelector\";\nimport {\n FormSelectorWrapper,\n Props as FormSelectorWrapperProps\n} from \"../FormSelectorWrapper/FormSelectorWrapper\";\nimport { FormSelector } from \"../form.interfaces\";\nimport { withReadOnly } from \"../../withReadOnly\";\n\nconst isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.[\"data-toggle\"];\n\nexport interface Props extends ComponentPropsWithRef<\"input\">, Omit<FormSelector, \"success\"> {\n label?: string \| React.ReactElement;\n indeterminate?: boolean;\n helperProps?: FormHelperTextProps;\n formSelectorWrapperProps?: FormSelectorWrapperProps;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (\n {\n children,\n name,\n helperText,\n helperProps,\n indeterminate,\n parentErrorId,\n errorMessage,\n disabled,\n label,\n parentHelperId,\n className,\n error,\n checked = false,\n formSelectorWrapperProps,\n onChange,\n ...rest\n }: Props,\n ref\n) => {\n const { errorId, identifier, describedBy } = useFormSelector({\n name,\n helperText,\n parentErrorId,\n errorMessage,\n error,\n parentHelperId\n });\n\n useEffect(() => {\n if (!name) {\n throw new Error(\"Please pass a 'name' prop to your <Checkbox> component.\");\n }\n\n if (typeof children === \"object\" && !isToggle(children) && indeterminate === undefined) {\n throw new Error(\n \"If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.\"\n );\n }\n }, []);\n\n const determineLabel = () => {\n // this should be temporary, for backwards compatibility;\n // once the components implementing checkboxes in microfrontends are updated, only label should be returned\n if (label) {\n return label;\n } else if (typeof children === \"string\") {\n return children;\n }\n };\n\n const renderNestedCheckboxes = () => (\n <ul className={classes[\"checkbox-list\"]}>\n {React.Children.map(children as ReactElement[], child => {\n return (\n <li>\n <Checkbox\n {...child.props}\n parentHelperId={parentHelperId}\n parentErrorId={parentErrorId}\n error={error}\n disabled={child.props.disabled ? child.props.disabled : disabled}\n >\n {child.props.children}\n </Checkbox>\n </li>\n );\n })}\n </ul>\n );\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) {\n return;\n }\n onChange?.(event);\n };\n\n const renderToggle = () => React.Children.toArray(children).filter(isToggle);\n\n const iconClasses = [classes[\"input\"]];\n const nativeInputClasses = [classes[\"native-input\"]];\n const wrapperClasses = [classes[\"checkbox-wrapper\"]];\n error && nativeInputClasses.push(classes[\"error\"]);\n disabled && nativeInputClasses.push(classes[\"disabled\"]) && iconClasses.push(classes[\"disabled\"]);\n className && wrapperClasses.push(className);\n\n return (\n <FormSelectorWrapper\n {...formSelectorWrapperProps}\n className={wrapperClasses.join(\" \")}\n containerProps={{ className: classes[\"checkbox-container\"] }}\n helperText={helperText}\n helperProps={helperProps}\n parentErrorId={parentErrorId}\n errorId={errorId}\n errorMessage={errorMessage}\n error={error}\n disabled={disabled}\n identifier={identifier}\n nestedChildren={\n typeof children === \"object\" && !isToggle(children) && renderNestedCheckboxes()\n }\n >\n <input\n {...rest}\n ref={ref}\n disabled={disabled}\n className={nativeInputClasses.join(\" \")}\n checked={checked}\n onChange={onChangeHandler}\n aria-invalid={error as boolean}\n aria-checked={indeterminate ? \"mixed\" : checked}\n aria-describedby={describedBy}\n id={`${identifier}-checkbox`}\n name={name}\n type=\"checkbox\"\n />\n {renderToggle()}\n\n {indeterminate && (\n <Icon\n className={`${iconClasses.join(\" \")} ${classes[\"indeterminate\"]}`}\n icon={Icons.MinusSquare}\n />\n )}\n {checked && !indeterminate && (\n <Icon\n className={`${iconClasses.join(\" \")} ${classes[\"checkmark\"]}`}\n icon={Icons.CheckmarkSquare}\n />\n )}\n {!checked && !indeterminate && (\n <Icon className={`${iconClasses.join(\" \")} ${classes[\"square\"]}`} icon={Icons.Square} />\n )}\n <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>\n </FormSelectorWrapper>\n );\n};\n\nexport const Checkbox = withReadOnly(React.forwardRef(CheckboxComponent));\n"],"names":[],"mappings":"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"}