@onewelcome/react-lib-components 8.9.0 → 8.10.0

package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -3,7 +3,7 @@
  * and make sure to add it to the shouldBeColorPicker array!
  */
 import React, { HTMLAttributes, ReactElement } from "react";
-interface CSSProperties {
+export interface CSSProperties {
     colorFocus?: string;
     colorPrimary?: string;
     colorSuccess?: string;
@@ -95,14 +95,17 @@ interface CSSProperties {
     inputHelperTextColor?: string;
     inputHoverBackgroundColor?: string;
     inputDisabledBackgroundColor?: string;
+    inputFontSize?: string;
     dragBorderStyle?: string;
     modalShadowColor?: string;
     modalBackgroundColor?: string;
     modalBackdropColor?: string;
+    modalContentFontSize?: string;
     sideSheetShadowColorOne?: string;
     sideSheetShadowColorTwo?: string;
     skeletonBackgroundColor?: string;
     skeletonAnimationColorRgb?: string;
+    alertFontSize?: string;
     alertTextColor?: string;
     alertTextInvertedColor?: string;
     alertNeutralBackgroundColor?: string;
@@ -163,6 +166,7 @@ interface CSSProperties {
     tooltipBackgroundColor?: string;
     contextMenuHoverColor?: string;
     contextMenuPressedColor?: string;
+    contextMenuFontSize?: string;
     default?: string;
     success?: string;
     error?: string;
@@ -181,6 +185,8 @@ interface CSSProperties {
     fontSizeH3?: string;
     fontSizeH4?: string;
     fontSizeSub?: string;
+    fontSizeSmall?: string;
+    fontSizeBig?: string;
     fontSizeCode?: string;
     formControlFontSize?: string;
     fileUploadBorderWidth?: string;
@@ -188,10 +194,10 @@ interface CSSProperties {
     fontSizeDataGrid?: string;
     readOnlyBorderColor?: string;
     readOnlyTextColor?: string;
+    iconFontBig?: string;
 }
 export interface Props extends HTMLAttributes<HTMLDivElement> {
     children?: ReactElement[] | ReactElement | string[] | string | number[] | number;
     properties?: CSSProperties;
 }
 export declare const BaseStyling: ({ children, properties }: Props) => React.JSX.Element;
-export {};

package/dist/esm/src/components/miscellaneous/IdentityProviderButton.d.ts

@@ -13,5 +13,6 @@ export interface Props extends Omit<ComponentPropsWithRef<"button">, "color"> {
     imgAltText?: string;
     idpType: string;
     customization?: SupportedCustomizationKeys;
+    loading?: boolean;
 }
 export declare const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement, Props>;

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

@@ -5,4 +5,4 @@ export interface WithReadOnlyProps {
     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>>;
+export declare const withReadOnly: <P extends object>(WrappedComponent: ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithChildren<P & WithReadOnlyProps>> & React.RefAttributes<unknown>>;

package/dist/esm/src/hooks/useDebouncedCallback.esm.js

@@ -15,9 +15,11 @@ import React from 'react';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types */
 const useDebouncedCallback = (callback, delay, dependencies) => {
     const timeout = React.useRef();
     const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     return React.useCallback((...args) => {
         if (timeout.current != null) {
             clearTimeout(timeout.current);

package/dist/esm/src/hooks/useDebouncedCallback.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDebouncedCallback.esm.js","sources":["../../../../../../src/hooks/useDebouncedCallback.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 from \"react\";\n\nexport const useDebouncedCallback = (callback: Function, delay: number, dependencies?: any[]) => {\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n  const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];\n\n  return React.useCallback((...args: any[]) => {\n    if (timeout.current != null) {\n      clearTimeout(timeout.current);\n    }\n\n    timeout.current = setTimeout(() => {\n      callback(...args);\n    }, delay);\n  }, comboDeps);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIU,MAAA,oBAAoB,GAAG,CAAC,QAAkB,EAAE,KAAa,EAAE,YAAoB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAAiC,CAAC;IAC9D,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAExF,OAAO,KAAK,CAAC,WAAW,CAAC,CAAC,GAAG,IAAW,KAAI;AAC1C,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,IAAI,EAAE;AAC3B,YAAA,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;AAED,QAAA,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AAChC,YAAA,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;SACnB,EAAE,KAAK,CAAC,CAAC;KACX,EAAE,SAAS,CAAC,CAAC;AAChB;;;;"}
+{"version":3,"file":"useDebouncedCallback.esm.js","sources":["../../../../../../src/hooks/useDebouncedCallback.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 from \"react\";\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types */\nexport const useDebouncedCallback = (callback: Function, delay: number, dependencies?: any[]) => {\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n  const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];\n\n  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n  return React.useCallback((...args: any[]) => {\n    if (timeout.current != null) {\n      clearTimeout(timeout.current);\n    }\n\n    timeout.current = setTimeout(() => {\n      callback(...args);\n    }, delay);\n  }, comboDeps);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIH;AACa,MAAA,oBAAoB,GAAG,CAAC,QAAkB,EAAE,KAAa,EAAE,YAAoB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAAiC,CAAC;IAC9D,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;;IAGxF,OAAO,KAAK,CAAC,WAAW,CAAC,CAAC,GAAG,IAAW,KAAI;AAC1C,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,IAAI,EAAE;AAC3B,YAAA,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;AAED,QAAA,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AAChC,YAAA,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;SACnB,EAAE,KAAK,CAAC,CAAC;KACX,EAAE,SAAS,CAAC,CAAC;AAChB;;;;"}

package/dist/esm/src/hooks/useRepeatFocus.esm.js

@@ -44,15 +44,18 @@ const useRepeatFocus = (ref) => {
         return null;
     };
     useEffect(() => {
-        if (!ref.current || !open)
+        if (!ref.current || !open) {
             return;
+        }
         const lastFocusableElement = getFocusableElement(ref.current, "last");
         const firstFocusableElement = getFocusableElement(ref.current, "first");
-        if (!lastFocusableElement || !firstFocusableElement)
+        if (!lastFocusableElement || !firstFocusableElement) {
             return;
+        }
         const handleTabKeyPress = (event) => {
-            if (event.key !== "Tab")
+            if (event.key !== "Tab") {
                 return;
+            }
             if (event.shiftKey) {
                 if (document.activeElement === firstFocusableElement) {
                     event.preventDefault();

package/dist/esm/src/hooks/useRepeatFocus.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRepeatFocus.esm.js","sources":["../../../../../../src/hooks/useRepeatFocus.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 { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const baseSelectors = [\n      \"button\",\n      \"[href]\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"[tabindex]\",\n      \"[contenteditable]\"\n    ];\n    const focusableSelectors = baseSelectors\n      .map(selector => `${selector}:not([tabindex=\"-1\"])`)\n      .join(\", \");\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) return;\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) return;\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIH;;;;AAIG;AAEU,MAAA,cAAc,GAAG,CAAC,GAA8B,KAAI;AAC/D,IAAA,MAAM,mBAAmB,GAAG,CAC1B,OAAoB,EACpB,QAA0B,KACJ;AACtB,QAAA,MAAM,aAAa,GAAG;YACpB,QAAQ;YACR,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,UAAU;YACV,YAAY;YACZ,mBAAmB;SACpB,CAAC;QACF,MAAM,kBAAkB,GAAG,aAAa;aACrC,GAAG,CAAC,QAAQ,IAAI,CAAG,EAAA,QAAQ,uBAAuB,CAAC;aACnD,IAAI,CAAC,IAAI,CAAC,CAAC;QACd,MAAM,iBAAiB,GAAG,OAAO,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC;AAEpF,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,iBAAiB,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;SACrC;AAAM,aAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YAC9B,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;SAChE;AAED,QAAA,OAAO,IAAI,CAAC;AACd,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI;YAAE,OAAO;QAElC,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACtE,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAExE,QAAA,IAAI,CAAC,oBAAoB,IAAI,CAAC,qBAAqB;YAAE,OAAO;AAE5D,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;AACjD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;gBAAE,OAAO;AAEhC,YAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,qBAAqB,EAAE;oBACpD,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,oBAAA,oBAAoB,aAApB,oBAAoB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApB,oBAAoB,CAAE,KAAK,EAAE,CAAC;iBAC/B;aACF;AAAM,iBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,oBAAoB,EAAE;gBAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,gBAAA,qBAAqB,aAArB,qBAAqB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAArB,qBAAqB,CAAE,KAAK,EAAE,CAAC;aAChC;AACH,SAAC,CAAC;AAEF,QAAA,oBAAoB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACpE,QAAA,qBAAqB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAErE,QAAA,OAAO,MAAK;AACV,YAAA,oBAAoB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACvE,YAAA,qBAAqB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC1E,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;AAClB;;;;"}
+{"version":3,"file":"useRepeatFocus.esm.js","sources":["../../../../../../src/hooks/useRepeatFocus.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 { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const baseSelectors = [\n      \"button\",\n      \"[href]\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"[tabindex]\",\n      \"[contenteditable]\"\n    ];\n    const focusableSelectors = baseSelectors\n      .map(selector => `${selector}:not([tabindex=\"-1\"])`)\n      .join(\", \");\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) {\n      return;\n    }\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) {\n      return;\n    }\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") {\n        return;\n      }\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIH;;;;AAIG;AAEU,MAAA,cAAc,GAAG,CAAC,GAA8B,KAAI;AAC/D,IAAA,MAAM,mBAAmB,GAAG,CAC1B,OAAoB,EACpB,QAA0B,KACJ;AACtB,QAAA,MAAM,aAAa,GAAG;YACpB,QAAQ;YACR,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,UAAU;YACV,YAAY;YACZ,mBAAmB;SACpB,CAAC;QACF,MAAM,kBAAkB,GAAG,aAAa;aACrC,GAAG,CAAC,QAAQ,IAAI,CAAG,EAAA,QAAQ,uBAAuB,CAAC;aACnD,IAAI,CAAC,IAAI,CAAC,CAAC;QACd,MAAM,iBAAiB,GAAG,OAAO,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC;AAEpF,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,iBAAiB,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;SACrC;AAAM,aAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YAC9B,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;SAChE;AAED,QAAA,OAAO,IAAI,CAAC;AACd,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE;YACzB,OAAO;SACR;QAED,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACtE,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAExE,QAAA,IAAI,CAAC,oBAAoB,IAAI,CAAC,qBAAqB,EAAE;YACnD,OAAO;SACR;AAED,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;AACjD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;gBACvB,OAAO;aACR;AAED,YAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,qBAAqB,EAAE;oBACpD,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,oBAAA,oBAAoB,aAApB,oBAAoB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApB,oBAAoB,CAAE,KAAK,EAAE,CAAC;iBAC/B;aACF;AAAM,iBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,oBAAoB,EAAE;gBAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,gBAAA,qBAAqB,aAArB,qBAAqB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAArB,qBAAqB,CAAE,KAAK,EAAE,CAAC;aAChC;AACH,SAAC,CAAC;AAEF,QAAA,oBAAoB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACpE,QAAA,qBAAqB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAErE,QAAA,OAAO,MAAK;AACV,YAAA,oBAAoB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACvE,YAAA,qBAAqB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC1E,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;AAClB;;;;"}

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

@@ -1,4 +1,4 @@
-export { BaseStyling } from "./components/_BaseStyling_/BaseStyling";
+export { BaseStyling, CSSProperties as BaseStylingCSSProperties } from "./components/_BaseStyling_/BaseStyling";
 export type { Props as BaseStylingProps } from "./components/_BaseStyling_/BaseStyling";
 export { Button } from "./components/Button/Button";
 export type { Props as ButtonProps } from "./components/Button/Button";
@@ -156,3 +156,8 @@ export type { Props as DatePickerProps } from "./components/DatePicker/DatePicke
 /** Admin */
 export { MicrofrontendContainer } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
 export type { Props as MicrofrontendContainerProps } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
+/**
+ * Miscellaneous
+ */
+export { IdentityProviderButton } from "./components/miscellaneous/IdentityProviderButton";
+export type { Props as IdentityProviderButtonProps } from "./components/miscellaneous/IdentityProviderButton";

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

@@ -77,4 +77,5 @@ export { useFiltersReducer } from '../DataGrid/DataGridFilters/useFiltersReducer
 export { Banner } from '../Notifications/Banner/Banner.esm.js';
 export { DatePicker } from '../DatePicker/DatePicker.esm.js';
 export { MicrofrontendContainer } from '../admin/layout/MicrofrontendContainer/MicrofrontendContainer.esm.js';
+export { IdentityProviderButton } from '../miscellaneous/IdentityProviderButton.esm.js';
 //# sourceMappingURL=index.esm.js.map

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/readyclasses.module.scss.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_POUbO{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_POUbO{display:none}.readyclasses_slide-in_POUbO{animation:readyclasses_slide-in_POUbO .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_POUbO{animation-duration:.1ms}}.readyclasses_slide-out_POUbO{animation:readyclasses_slide-out_POUbO .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_POUbO{animation-duration:.1ms}}@keyframes readyclasses_slide-in_POUbO{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_POUbO{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
-var readyclasses = {"sr-only":"readyclasses_sr-only_POUbO","hidden":"readyclasses_hidden_POUbO","slide-in":"readyclasses_slide-in_POUbO","slide-out":"readyclasses_slide-out_POUbO"};
+var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_jzOEv{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_jzOEv{display:none}.readyclasses_slide-in_jzOEv{animation:readyclasses_slide-in_jzOEv .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_jzOEv{animation-duration:.1ms}}.readyclasses_slide-out_jzOEv{animation:readyclasses_slide-out_jzOEv .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_jzOEv{animation-duration:.1ms}}@keyframes readyclasses_slide-in_jzOEv{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_jzOEv{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
+var readyclasses = {"sr-only":"readyclasses_sr-only_jzOEv","hidden":"readyclasses_hidden_jzOEv","slide-in":"readyclasses_slide-in_jzOEv","slide-out":"readyclasses_slide-out_jzOEv"};
 styleInject(css_248z);
 
 export { readyclasses as default };

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

@@ -2,7 +2,6 @@ export declare const generateID: (length?: number, stringToWeaveIn?: string) =>
 export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => {};
 export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: number) => (...args: unknown[]) => void;
 export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
-export declare const isEqual: (x: any, y: any) => boolean;
 export declare const areArraysDifferent: (arr1: Record<string, any>[], arr2: Record<string, any>[], key: string) => boolean;
 /** Source: https://stackoverflow.com/a/42769683/5084110 */
 export declare const remToPx: (rem: number) => number;
@@ -10,6 +9,6 @@ export declare const isJsonString: (str: any) => boolean;
 type ObjectType = {
     [key: string]: any;
 };
-export declare const deepMerge: <T extends {}>(obj1: ObjectType, obj2: ObjectType | false) => T;
+export declare const deepMerge: <T extends object>(obj1: ObjectType, obj2: ObjectType | false) => T;
 export declare const escapeRegExp: (str: string) => string;
 export {};

package/dist/esm/src/util/helper.esm.js

@@ -15,7 +15,7 @@
  */
 const generateID = (length = 15, stringToWeaveIn) => {
     /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
-    let hashCharacters = [
+    const hashCharacters = [
         "1",
         "2",
         "3",
@@ -82,7 +82,7 @@ const generateID = (length = 15, stringToWeaveIn) => {
     let id = "";
     /** Generate an id of x characters in length */
     for (let i = 0; i < length && id.length < length; i++) {
-        let stringCharacter = typeof stringToWeaveIn === "string" &&
+        const stringCharacter = typeof stringToWeaveIn === "string" &&
             (stringToWeaveIn === null || stringToWeaveIn === void 0 ? void 0 : stringToWeaveIn[i]) !== undefined &&
             !/\s/.test(stringToWeaveIn[i])
             ? stringToWeaveIn[i]
@@ -120,7 +120,7 @@ const debounce = (fn, delay) => {
 const throttle = (fn, delay) => {
     let lastTime = 0;
     return function () {
-        let now = Date.now();
+        const now = Date.now();
         if (now - lastTime >= delay) {
             fn();
             lastTime = now;
@@ -141,10 +141,11 @@ const isJsonString = (str) => {
     return true;
 };
 const deepMerge = (obj1, obj2) => {
-    if (!obj2)
+    if (!obj2) {
         return obj1;
-    let result = { ...obj1 };
-    for (let key in obj2) {
+    }
+    const result = { ...obj1 };
+    for (const key in obj2) {
         if (Object.prototype.hasOwnProperty.call(obj2, key)) {
             if (typeof obj2[key] === "object" &&
                 obj2[key] !== null &&

package/dist/esm/src/util/helper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.esm.js","sources":["../../../../../../src/util/helper.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\ntype KeyValuePair = { [key: string]: unknown };\n\nexport const generateID = (length = 15, stringToWeaveIn?: string) => {\n  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */\n  let hashCharacters = [\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"5\",\n    \"6\",\n    \"7\",\n    \"8\",\n    \"9\",\n    \"0\",\n    \"A\",\n    \"B\",\n    \"C\",\n    \"D\",\n    \"E\",\n    \"F\",\n    \"G\",\n    \"H\",\n    \"I\",\n    \"J\",\n    \"K\",\n    \"L\",\n    \"M\",\n    \"N\",\n    \"O\",\n    \"P\",\n    \"Q\",\n    \"R\",\n    \"S\",\n    \"T\",\n    \"U\",\n    \"V\",\n    \"W\",\n    \"X\",\n    \"Y\",\n    \"Z\",\n    \"a\",\n    \"b\",\n    \"c\",\n    \"d\",\n    \"e\",\n    \"f\",\n    \"g\",\n    \"h\",\n    \"i\",\n    \"j\",\n    \"k\",\n    \"l\",\n    \"m\",\n    \"n\",\n    \"o\",\n    \"p\",\n    \"q\",\n    \"r\",\n    \"s\",\n    \"t\",\n    \"u\",\n    \"v\",\n    \"w\",\n    \"x\",\n    \"y\",\n    \"z\"\n  ];\n\n  let id = \"\";\n\n  /** Generate an id of x characters in length */\n  for (let i = 0; i < length && id.length < length; i++) {\n    let stringCharacter =\n      typeof stringToWeaveIn === \"string\" &&\n      stringToWeaveIn?.[i] !== undefined &&\n      !/\\s/.test(stringToWeaveIn[i])\n        ? stringToWeaveIn[i]\n        : \"\";\n    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];\n  }\n\n  return id.slice(0, length);\n};\n\nexport const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {\n  if (returnFiltered) {\n    return Object.keys(props).reduce((acc: KeyValuePair, key) => {\n      if (regexPattern.test(key)) {\n        acc[key] = props[key];\n      }\n\n      return acc;\n    }, {});\n  } else {\n    return Object.entries(props)\n      .filter(([key]) => !regexPattern.test(key))\n      .reduce(\n        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),\n        {}\n      );\n  }\n};\n\nexport const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let timeout: undefined | ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: unknown[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      fn(...args);\n    };\n\n    clearTimeout(timeout);\n\n    timeout = setTimeout(later, delay);\n  };\n};\n\nexport const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let lastTime = 0;\n\n  return function () {\n    let now = Date.now();\n\n    if (now - lastTime >= delay) {\n      fn();\n      lastTime = now;\n    }\n  };\n};\n\nexport const isEqual = (x: any, y: any): boolean => {\n  const typesCoincide = x && y && typeof x === \"object\" && typeof y === \"object\";\n  return typesCoincide\n    ? Object.keys(x).length === Object.keys(y).length &&\n        Object.keys(x).every(key => isEqual(x[key], y[key]))\n    : x === y;\n};\n\nexport const areArraysDifferent = (\n  arr1: Record<string, any>[],\n  arr2: Record<string, any>[],\n  key: string\n) => {\n  if (arr1.length !== arr2.length) {\n    return true;\n  } else {\n    const firstFilteredArray = arr1.filter(arr1Item =>\n      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n    const secondFilteredArray = arr2.filter(arr2Item =>\n      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n\n    return !!firstFilteredArray.length || !!secondFilteredArray.length;\n  }\n};\n\n/** Source: https://stackoverflow.com/a/42769683/5084110 */\nexport const remToPx = (rem: number): number => {\n  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);\n};\n\nexport const isJsonString = (str: any) => {\n  try {\n    JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  return true;\n};\n\ntype ObjectType = { [key: string]: any };\n\nexport const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | false): T => {\n  if (!obj2) return obj1 as T;\n\n  let result: ObjectType = { ...obj1 };\n\n  for (let key in obj2) {\n    if (Object.prototype.hasOwnProperty.call(obj2, key)) {\n      if (\n        typeof obj2[key] === \"object\" &&\n        obj2[key] !== null &&\n        Object.prototype.hasOwnProperty.call(obj1, key) &&\n        !Array.isArray(obj2[key])\n      ) {\n        result[key] = deepMerge(obj1[key], obj2[key]);\n      } else {\n        result[key] = obj2[key];\n      }\n    }\n  }\n\n  return result as T;\n};\n\nexport const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"helper.esm.js","sources":["../../../../../../src/util/helper.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/* eslint-disable @typescript-eslint/no-explicit-any */\n\ntype KeyValuePair = { [key: string]: unknown };\n\nexport const generateID = (length = 15, stringToWeaveIn?: string) => {\n  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */\n  const hashCharacters = [\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"5\",\n    \"6\",\n    \"7\",\n    \"8\",\n    \"9\",\n    \"0\",\n    \"A\",\n    \"B\",\n    \"C\",\n    \"D\",\n    \"E\",\n    \"F\",\n    \"G\",\n    \"H\",\n    \"I\",\n    \"J\",\n    \"K\",\n    \"L\",\n    \"M\",\n    \"N\",\n    \"O\",\n    \"P\",\n    \"Q\",\n    \"R\",\n    \"S\",\n    \"T\",\n    \"U\",\n    \"V\",\n    \"W\",\n    \"X\",\n    \"Y\",\n    \"Z\",\n    \"a\",\n    \"b\",\n    \"c\",\n    \"d\",\n    \"e\",\n    \"f\",\n    \"g\",\n    \"h\",\n    \"i\",\n    \"j\",\n    \"k\",\n    \"l\",\n    \"m\",\n    \"n\",\n    \"o\",\n    \"p\",\n    \"q\",\n    \"r\",\n    \"s\",\n    \"t\",\n    \"u\",\n    \"v\",\n    \"w\",\n    \"x\",\n    \"y\",\n    \"z\"\n  ];\n\n  let id = \"\";\n\n  /** Generate an id of x characters in length */\n  for (let i = 0; i < length && id.length < length; i++) {\n    const stringCharacter =\n      typeof stringToWeaveIn === \"string\" &&\n      stringToWeaveIn?.[i] !== undefined &&\n      !/\\s/.test(stringToWeaveIn[i])\n        ? stringToWeaveIn[i]\n        : \"\";\n    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];\n  }\n\n  return id.slice(0, length);\n};\n\nexport const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {\n  if (returnFiltered) {\n    return Object.keys(props).reduce((acc: KeyValuePair, key) => {\n      if (regexPattern.test(key)) {\n        acc[key] = props[key];\n      }\n\n      return acc;\n    }, {});\n  } else {\n    return Object.entries(props)\n      .filter(([key]) => !regexPattern.test(key))\n      .reduce(\n        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),\n        {}\n      );\n  }\n};\n\nexport const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let timeout: undefined | ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: unknown[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      fn(...args);\n    };\n\n    clearTimeout(timeout);\n\n    timeout = setTimeout(later, delay);\n  };\n};\n\nexport const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let lastTime = 0;\n\n  return function () {\n    const now = Date.now();\n\n    if (now - lastTime >= delay) {\n      fn();\n      lastTime = now;\n    }\n  };\n};\n\nconst isEqual = (x: any, y: any): boolean => {\n  const typesCoincide = x && y && typeof x === \"object\" && typeof y === \"object\";\n  return typesCoincide\n    ? Object.keys(x).length === Object.keys(y).length &&\n        Object.keys(x).every(key => isEqual(x[key], y[key]))\n    : x === y;\n};\n\nexport const areArraysDifferent = (\n  arr1: Record<string, any>[],\n  arr2: Record<string, any>[],\n  key: string\n) => {\n  if (arr1.length !== arr2.length) {\n    return true;\n  } else {\n    const firstFilteredArray = arr1.filter(arr1Item =>\n      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n    const secondFilteredArray = arr2.filter(arr2Item =>\n      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n\n    return !!firstFilteredArray.length || !!secondFilteredArray.length;\n  }\n};\n\n/** Source: https://stackoverflow.com/a/42769683/5084110 */\nexport const remToPx = (rem: number): number => {\n  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);\n};\n\nexport const isJsonString = (str: any) => {\n  try {\n    JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  return true;\n};\n\ntype ObjectType = { [key: string]: any };\n\nexport const deepMerge = <T extends object>(obj1: ObjectType, obj2: ObjectType | false): T => {\n  if (!obj2) {\n    return obj1 as T;\n  }\n\n  const result: ObjectType = { ...obj1 };\n\n  for (const key in obj2) {\n    if (Object.prototype.hasOwnProperty.call(obj2, key)) {\n      if (\n        typeof obj2[key] === \"object\" &&\n        obj2[key] !== null &&\n        Object.prototype.hasOwnProperty.call(obj1, key) &&\n        !Array.isArray(obj2[key])\n      ) {\n        result[key] = deepMerge(obj1[key], obj2[key]);\n      } else {\n        result[key] = obj2[key];\n      }\n    }\n  }\n\n  return result as T;\n};\n\nexport const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n"],"names":[],"mappings":"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"}

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

@@ -1 +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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"}
+{"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, unknown> = {};\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, unknown> = {};\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<unknown>) => {\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.9.0",
+  "version": "8.10.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -57,13 +57,13 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@chromatic-com/storybook": "^1.6.0",
     "@mdx-js/react": "^3.0.1",
-    "@onewelcome/eslint-config-shared-codestyle": "^9.2.3",
+    "@onewelcome/eslint-config-shared-codestyle": "^9.3.0",
     "@onewelcome/storybook-addon-basestyling": "^2.0.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -97,9 +97,8 @@
     "babel-loader": "^9.1.3",
     "chromatic": "^11.5.4",
     "css-loader": "^7.1.2",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-export-scope": "^2.4.0",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-license-header": "^0.6.1",
@@ -107,24 +106,24 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
     "lint-staged": "^15.2.7",
-    "mini-css-extract-plugin": "^2.9.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.39",
-    "postcss-modules": "^6.0.0",
+    "postcss-modules": "^6.0.1",
     "postcss-url": "^10.1.3",
     "prettier": "^3.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "react-router-dom": "^6.24.1",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",

package/src/_functions.scss

@@ -0,0 +1,19 @@
+/*!
+ * 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.
+ */
+
+@function relativeToBaseFontSize($ratio) {
+  @return calc($ratio * var(--font-size));
+}

package/src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -23,7 +23,7 @@
 
   .icon {
     color: var(--color-primary);
-    font-size: 0.625rem;
+    font-size: var(--font-size-small);
     line-height: var(--default-line-height);
     margin: 0 0.84rem;
   }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -39,7 +39,7 @@ const BreadcrumbsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const items = React.Children.map(children, (child, index) => {
     const isLastElement = Array.isArray(children) ? index === children.length - 1 : true;
     const isFirstElement = Array.isArray(children) && index === 0;
-    let item = React.cloneElement(child, {
+    const item = React.cloneElement(child, {
       className: classes["breadcrumb-link"],
       ...(isFirstElement
         ? {

package/src/components/Button/BaseButton.tsx

@@ -31,10 +31,11 @@ const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> =
 ) => {
   const validTypes = ["submit", "button", "reset"];
   const isDisabled = disabled ?? loading;
-  if (!validTypes.includes(type))
+  if (!validTypes.includes(type)) {
     throw new Error(
       `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
     );
+  }
 
   const buttonClasses = [classes.button];
   loading && buttonClasses.push(classes.loading);

package/src/components/Button/Button.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../mixins.module.scss";
+@use "src/functions" as *;
 
 .fill {
   @include mixins.button("fill");
@@ -47,11 +48,11 @@
     align-items: center;
     justify-content: center;
 
-    width: 1.5rem;
+    width: relativeToBaseFontSize(1.5);
     margin-right: 0.25rem;
 
     span {
-      font-size: 1rem;
+      font-size: var(--font-size);
     }
   }
 }

package/src/components/Button/IconButton.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../mixins.module.scss";
+@use "src/functions" as *;
 
 .icon-button {
   border: var(--button-border-width) var(--button-border-style) transparent;
@@ -32,29 +33,29 @@
 
   /** Sizes **/
   &.button-s {
-    width: 1.875rem;
-    height: 1.875rem;
+    width: relativeToBaseFontSize(1.875);
+    height: relativeToBaseFontSize(1.875);
 
     span {
-      font-size: 0.75rem;
+      font-size: relativeToBaseFontSize(0.75);
     }
   }
 
   &.button-m {
-    width: 2.5rem;
-    height: 2.5rem;
+    width: relativeToBaseFontSize(2.5);
+    height: relativeToBaseFontSize(2.5);
 
     span {
-      font-size: 1rem;
+      font-size: var(--font-size);
     }
   }
 
   &.button-l {
-    width: 3.125rem;
-    height: 3.125rem;
+    width: relativeToBaseFontSize(3.125);
+    height: relativeToBaseFontSize(3.125);
 
     span {
-      font-size: 1.375rem;
+      font-size: relativeToBaseFontSize(1.375);
     }
   }
 

package/src/components/ContextMenu/ContextMenuItem.module.scss

@@ -24,8 +24,8 @@
     background-color: transparent;
     border: 0;
     font-family: var(--font-family);
-    font-size: var(--font-size-form-label);
-    line-height: 1.25rem; //FIXME: UCL-395
+    font-size: var(--context-menu-font-size);
+    line-height: 1.43;
     cursor: pointer;
     width: 100%;
     height: 100%;

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -54,7 +54,7 @@ const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Prop
   }: Props,
   ref
 ) => {
-  let innerButtonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
+  const innerButtonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
 
   useEffect(() => {
     if (isSelected && innerButtonRef.current && shouldClick) {

package/src/components/DataGrid/DataGrid.tsx

@@ -69,7 +69,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
   spacing?: Spacing;
 }
 
-const DataGridInner = <T extends {}>(
+const DataGridInner = <T extends object>(
   {
     children,
     data,
@@ -214,6 +214,6 @@ const DataGridInner = <T extends {}>(
   );
 };
 
-export const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(
+export const DataGrid = React.forwardRef(DataGridInner) as <T extends object>(
   p: Props<T> & { ref?: Ref<HTMLDivElement> }
 ) => ReactElement;

package/src/components/DataGrid/DataGridBody/DataGridBody.tsx

@@ -37,7 +37,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children
 
 const skeletonLoadingRows = 9;
 
-const DataGridBodyInner = <T extends {}>(
+const DataGridBodyInner = <T extends object>(
   {
     children,
     data,
@@ -105,6 +105,6 @@ const DataGridBodyInner = <T extends {}>(
   );
 };
 
-export const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends {}>(
+export const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends object>(
   p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }
 ) => ReactElement;

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.tsx

@@ -49,7 +49,7 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
   }: Props,
   ref
 ) => {
-  let cellStyle: React.CSSProperties = {};
+  const cellStyle: React.CSSProperties = {};
 
   if (cellIndex === 0) {
     cellStyle.paddingLeft = spacing?.paddingLeft;
@@ -72,7 +72,9 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
 
       const parts = children.split(matchingSequence?.[0] ?? "");
       return parts.map((part, i) => {
-        if (i === parts.length - 1) return <Fragment key={`${part}-${i}`}>{part}</Fragment>;
+        if (i === parts.length - 1) {
+          return <Fragment key={`${part}-${i}`}>{part}</Fragment>;
+        }
 
         return (
           <Fragment key={`${part}-${i}`}>