@onewelcome/react-lib-components 8.5.0 → 8.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"BaseStyling.esm.js","sources":["../../../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\n\ninterface CSSProperties {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorDanger?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  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":[],"mappings":"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"}
+{"version":3,"file":"BaseStyling.esm.js","sources":["../../../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\n\ninterface CSSProperties {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorDanger?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  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":[],"mappings":"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"}

package/dist/esm/src/components/Form/Checkbox/Checkbox.d.ts

@@ -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/esm/src/components/Form/Fieldset/Fieldset.d.ts

@@ -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/esm/src/components/Form/FileUpload/FileItem/FileItem.d.ts

@@ -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/esm/src/components/Form/FileUpload/FileUpload.d.ts

@@ -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/esm/src/components/Form/Input/Input.d.ts

@@ -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/esm/src/components/Form/Radio/Radio.d.ts

@@ -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/esm/src/components/Form/Select/MultiSelect/MultiSelect.d.ts

@@ -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/esm/src/components/Form/Select/MultiSelect/useArrowNavigation.d.ts

@@ -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/esm/src/components/Form/Select/MultiSelect/useMultiSelect.d.ts

@@ -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/esm/src/components/Form/Select/MultiSelect/useMultiSelect.test.d.ts

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

package/dist/esm/src/components/Form/Select/Select.interfaces.d.ts

@@ -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/esm/src/components/Form/Select/SingleSelect/Select.d.ts

@@ -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/esm/src/components/Form/Select/SingleSelect/useArrowNavigation.d.ts

@@ -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/esm/src/components/Form/Select/useSelectPositionList.d.ts

@@ -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/esm/src/components/Form/Textarea/Textarea.d.ts

@@ -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/esm/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.d.ts

@@ -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/esm/src/components/Form/Wrapper/InputWrapper/InputWrapper.d.ts

@@ -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/esm/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.d.ts

@@ -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/esm/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.d.ts

@@ -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/esm/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.d.ts

@@ -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/esm/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.d.ts

@@ -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/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -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/esm/src/components/withReadOnly.d.ts

@@ -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/esm/src/components/withReadOnly.test.d.ts

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

package/dist/esm/src/index.d.ts

@@ -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/esm/src/index.esm.js

@@ -62,6 +62,7 @@ export { SelectWrapper } from '../Form/Wrapper/SelectWrapper/SelectWrapper.esm.j
 export { FileUpload } from '../Form/FileUpload/FileUpload.esm.js';
 export { ACTION_STATUS, FILE_ACTION } from '../Form/FileUpload/FileItem/FileItem.esm.js';
 export { MultiSelectWrapper } from '../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.esm.js';
+export { useMultiSelect } from '../Form/Select/MultiSelect/useMultiSelect.esm.js';
 export { ContentHeader } from '../Layout/ContentHeader/ContentHeader.esm.js';
 export { FormStepper } from '../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.esm.js';
 export { FormSection } from '../Layout/FormPage/FormWithStepper/FormSection/FormSection.esm.js';

package/dist/esm/src/index.esm.js.map

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

package/dist/esm/src/util/unitTestUtils.d.ts

@@ -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/esm/withReadOnly.esm.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const componentsWithKeyEventsToPrevent = ["CheckboxWrapper"];
+const getDisplayName = (WrappedComponent) => {
+    var _a, _b;
+    return (_b = (_a = WrappedComponent.displayName) !== null && _a !== void 0 ? _a : WrappedComponent.name) !== null && _b !== void 0 ? _b : "Component";
+};
+const getConditionalProps = (readOnlyView, type, helperText) => {
+    const props = {};
+    if (readOnlyView) {
+        props.style = { pointerEvents: "none", userSelect: "text" };
+        if (helperText) {
+            props.helperText = "";
+        }
+    }
+    else {
+        props.helperText = helperText;
+    }
+    if (type) {
+        props.type = type;
+    }
+    return props;
+};
+const withReadOnly = (WrappedComponent) => {
+    const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView) => {
+        const preventSubmissionKeys = (e) => {
+            const isEnterOrSpace = (e) => e.key === "Enter" || e.key === " ";
+            if (isEnterOrSpace(e)) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+        if (readOnlyView &&
+            componentsWithKeyEventsToPrevent.includes(WrappedComponent.displayName || WrappedComponent.name)) {
+            const props = {};
+            props.onKeyUp = (e) => {
+                preventSubmissionKeys(e);
+            };
+            props.onKeyDown = (e) => {
+                preventSubmissionKeys(e);
+            };
+            return props;
+        }
+        return {};
+    };
+    const WithReadOnlyComponent = React.forwardRef((props, ref) => {
+        const { readOnlyView = false, required, children, helperText, type = "", ...restProps } = props;
+        return (React.createElement(WrappedComponent, { ref: ref, ...restProps, "data-readonlyview": readOnlyView, "aria-readonly": readOnlyView, required: readOnlyView ? false : required, ...getConditionalProps(readOnlyView, type, helperText), ...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView) }, children));
+    });
+    WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;
+    return WithReadOnlyComponent;
+};
+
+export { withReadOnly };
+//# sourceMappingURL=withReadOnly.esm.js.map

package/dist/esm/withReadOnly.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withReadOnly.esm.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":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -65,19 +65,19 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-docs": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/components": "^8.1.11",
-    "@storybook/manager-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-webpack5": "^8.1.11",
-    "@storybook/theming": "^8.1.11",
+    "@storybook/addon-a11y": "~8.1.11",
+    "@storybook/addon-actions": "~8.1.11",
+    "@storybook/addon-docs": "~8.1.11",
+    "@storybook/addon-essentials": "~8.1.11",
+    "@storybook/addon-interactions": "~8.1.11",
+    "@storybook/addon-links": "~8.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "~3.0.3",
+    "@storybook/blocks": "~8.1.11",
+    "@storybook/components": "~8.1.11",
+    "@storybook/manager-api": "~8.1.11",
+    "@storybook/react": "~8.1.11",
+    "@storybook/react-webpack5": "~8.1.11",
+    "@storybook/theming": "~8.1.11",
     "@testing-library/dom": "^10.3.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -127,7 +127,7 @@
     "sass": "1.77.6",
     "sass-loader": "^14.2.1",
     "size-limit": "^11.1.4",
-    "storybook": "^8.1.11",
+    "storybook": "~8.1.11",
     "storybook-addon-mock": "^5.0.0",
     "storybook-addon-pseudo-states": "^3.1.1",
     "style-loader": "^4.0.0",

package/src/components/Form/Checkbox/Checkbox.module.scss

@@ -133,3 +133,73 @@
 .indeterminate {
   color: var(--color-primary);
 }
+
+[data-readonlyview="true"] {
+  & label {
+    border-color: var(--read-only-border-color);
+    color: var(--read-only-text-color);
+    background-color: transparent;
+    user-select: text;
+  }
+
+  & .checkbox-wrapper {
+    & span {
+      color: var(--color-blue-grey100);
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border-radius: 2px;
+        &:before {
+          outline: 1px solid var(--read-only-border-color);
+          border-radius: 2px;
+          outline-offset: -1px;
+        }
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    pointer-events: none;
+  }
+}
+
+input[type="checkbox"] {
+  &[data-readonlyview="true"] {
+    & ~ span {
+      &:before {
+        color: var(--color-blue-grey100);
+      }
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 1px solid var(--read-only-border-color);
+        border-radius: 3px;
+        &:before {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    & ~ span[data-icon="true"] {
+      color: var(--color-blue-grey100);
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 0;
+        &:before {
+          outline: 1px solid var(--read-only-border-color);
+          outline-offset: -1px;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    & ~ label {
+      pointer-events: none;
+      user-select: text;
+    }
+  }
+}