@onewelcome/react-lib-components 2.3.0 → 3.0.0

package/dist/esm/src/components/Notifications/Snackbar/useSnackbar.d.ts

@@ -0,0 +1,6 @@
+export declare const useSnackbar: () => {
+    enqueueWarningSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueErrorSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueSuccessSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+};

package/dist/{cjs → esm/src}/components/Pagination/Pagination.d.ts

@@ -9,7 +9,7 @@ export type PaginationTranslations = {
 export type PageChangeLabels = "next" | "previous" | "first" | "last";
 export type PageSize = 10 | 25 | 50;
 export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
-    currentPage?: number;
+    currentPage: number;
     totalElements?: number;
     pageSize?: PageSize;
     translate?: PaginationTranslations;

package/dist/esm/{components → src/components}/ProgressBar/ProgressBar.d.ts

@@ -1,6 +1,9 @@
 import React, { ComponentPropsWithRef } from "react";
 export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
-    placeholderText: string;
+    label?: string;
+    caption?: string;
     completed?: number;
+    percentage?: number;
+    accessibilityTitle?: string;
 }
 export declare const ProgressBar: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+import { Icons } from "../Icon/Icon";
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: "enabled" | "disabled";
+    icon?: Icons;
+    backgroundColor?: string;
+    color?: string;
+    children?: string;
+}
+export declare const Tag: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/dist/{cjs → esm/src}/components/Tooltip/Tooltip.d.ts

@@ -1,11 +1,11 @@
 import React, { ComponentPropsWithRef, ReactNode } from "react";
-import { Offset, Placement } from "../../hooks/usePosition";
 export interface Props extends ComponentPropsWithRef<"div"> {
-    label: string | ReactNode;
+    label: ReactNode;
+    title?: string;
     children: string;
-    placement?: Placement;
-    offset?: Offset;
-    transformOrigin?: Placement;
     domRoot?: HTMLElement;
+    location?: "left" | "right" | "top" | "bottom";
+    color?: "black" | "blue";
+    position?: "start" | "center" | "end";
 }
 export declare const Tooltip: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/src/components/Wizard/WizardActions/WizardActions.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { Props as ButtonProps } from "../../Button/Button";
+export interface Props extends React.HTMLProps<HTMLDivElement> {
+    actions: {
+        cancel: {
+            label?: string;
+            hide?: boolean;
+            onClick?: () => void;
+            cancelButtonProps?: ButtonProps;
+        };
+        previous: {
+            label: string;
+            onClick: () => void;
+            previousButtonProps?: ButtonProps;
+        };
+        next: {
+            label: string;
+            onClick: (currentStepNo: number) => boolean;
+            nextButtonProps?: ButtonProps;
+        };
+        saveAndClose: {
+            label: string;
+            onClick: (currentStepNo: number) => void;
+            saveAndCloseButtonProps?: ButtonProps;
+        };
+    };
+}
+export declare const WizardActions: ({ actions }: Props) => React.JSX.Element;

package/dist/esm/{components → src/components}/_BaseStyling_/BaseStyling.d.ts

@@ -23,6 +23,7 @@ interface CSSProperties {
     colorBlueGrey700?: string;
     colorBlueGrey800?: string;
     colorBlueGrey900?: string;
+    colorGreen100?: string;
     colorGreen500?: string;
     colorGreen600?: string;
     colorGreen700?: string;
@@ -37,8 +38,8 @@ interface CSSProperties {
     colorRed600?: string;
     colorRed700?: string;
     colorBlack100?: string;
-    colorBlack10?: string;
     colorBlack20?: string;
+    colorBlack10?: string;
     defaultLineHeight?: string;
     buttonBorderRadius?: string;
     buttonBorderWidth?: string;
@@ -71,19 +72,23 @@ interface CSSProperties {
     inputBorderWidth?: string;
     inputBorderWidthFocus?: string;
     inputBorderStyle?: string;
+    inputBorderColor?: string;
     inputBackgroundColor?: string;
+    inputHelperTextColor?: string;
+    inputHoverBackgroundColor?: string;
+    inputDisabledBackgroundColor?: string;
     dragBackgroundColor?: string;
     dragBorderStyle?: string;
     modalShadowColor?: string;
     modalBackgroundColor?: string;
     modalBackdropColor?: string;
-    modalHeaderBackgroundColor?: string;
     skeletonBackgroundColor?: string;
     skeletonAnimationColorRgb?: string;
     snackbarTextColor?: string;
     snackbarInfoBackgroundColor?: string;
     snackbarSuccessBackgroundColor?: string;
     snackbarErrorBackgroundColor?: string;
+    snackbarWarningBackgroundColor?: string;
     snackbarBorderRadius?: string;
     bannerBorderRadius?: string;
     bannerBorderWidth?: string;

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

@@ -1,2 +1,2 @@
-import r,{useRef as e}from"react";import{Icon as t,Icons as c}from"../../Icon/Icon.esm.js";const o=o=>{const{error:n,success:s}=o||!1;let a=null;const l=e(null),u=e(null);return n?a=r.createElement(t,{ref:l,"data-icon-status":"error",icon:c.Error}):s&&(a=r.createElement(t,{ref:u,"data-icon-status":"success",icon:c.CheckmarkCircleBreakout})),a};export{o as useDetermineStatusIcon};
+import r,{useRef as e}from"react";import{Icon as t,Icons as c}from"../../Icon/Icon.esm.js";const o=o=>{const{error:n,success:s}=o||!1;let l=null;const a=e(null),m=e(null);return n?l=r.createElement(t,{ref:a,"data-icon-status":"error",icon:c.Error}):s&&(l=r.createElement(t,{ref:m,"data-icon-status":"success",icon:c.CheckmarkCircleAlt})),l};export{o as useDetermineStatusIcon};
 //# sourceMappingURL=useDetermineStatusIcon.esm.js.map

package/dist/esm/{hooks → src/hooks}/usePosition.d.ts

@@ -33,5 +33,6 @@ export declare const usePosition: (providedConfigObject?: ConfigObject) => {
     left: PositionType;
     right: PositionType;
     calculatePosition: (...args: any[]) => void;
+    initialCalculationDone: boolean;
 };
 export {};

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

@@ -1,2 +1,2 @@
-import{useState as t}from"react";import{useDebouncedCallback as o}from"./useDebouncedCallback.esm.js";const e={relativeElement:void 0,elementToBePositioned:void 0,transformOrigin:{horizontal:"left",vertical:"top"},placement:{horizontal:"left",vertical:"top"},offset:{top:0,right:0,bottom:0,left:0},debounceAmount:20},i=(i=e)=>{var n;const r={...e,...i};void 0===r.transformOrigin&&(r.transformOrigin=e.transformOrigin),void 0===r.placement&&(r.placement=e.placement),void 0===r.offset&&(r.offset=e.offset);const[l,h]=t({left:0,top:0,right:"initial",bottom:"initial"}),d=(t,o,e,i,n)=>{const l="center"===o?(t=>{if("horizontal"===t)return"centerh";if("vertical"===t)return"centerv";throw new Error(`the requested return value isn't "vertical" or "horizontal" ${t} was given.`)})(e):o,h=((t,o,e,i,n)=>{let r=0;return"left"===t[o]||"top"===t[o]?r=e[i]:"center"===t[o]?r=e[i]-n["horizontal"===o?"width":"height"]/2:"right"!==t[o]&&"bottom"!==t[o]||(r=window["horizontal"===o?"innerWidth":"innerHeight"]-e[i]),r})(t,e,i,l,n),d=((t,o,e)=>{var i,n,l,h,d,f,v,a,c,g,m,s;let u=t;return("horizontal"===o&&0!==(null===(i=r.offset)||void 0===i?void 0:i.left)||"horizontal"===o&&0!==(null===(n=r.offset)||void 0===n?void 0:n.right))&&("left"!==e[o]&&"center"!==e[o]||(u+=null===(l=r.offset)||void 0===l?void 0:l.left,u-=null===(h=r.offset)||void 0===h?void 0:h.right),"right"===e[o]&&(u-=null===(d=r.offset)||void 0===d?void 0:d.left,u+=null===(f=r.offset)||void 0===f?void 0:f.right)),("vertical"===o&&0!==(null===(v=r.offset)||void 0===v?void 0:v.top)||"vertical"===o&&0!==(null===(a=r.offset)||void 0===a?void 0:a.bottom))&&("top"!==e[o]&&"center"!==e[o]||(u+=null===(c=r.offset)||void 0===c?void 0:c.top,u-=null===(g=r.offset)||void 0===g?void 0:g.bottom),"bottom"===e[o]&&(u-=null===(m=r.offset)||void 0===m?void 0:m.top,u+=null===(s=r.offset)||void 0===s?void 0:s.bottom)),u})(h,e,t),f=((t,o,e,i)=>{let n=t;return("left"===o[e]&&n<0||"top"===o[e]&&n<0||"center"===o[e]&&n<0||"bottom"===o[e]&&n<0)&&(n=0),("left"===o[e]&&n>window.innerWidth-i.width||"center"===o[e]&&"horizontal"===e&&n>window.innerWidth-i.width)&&(n=window.innerWidth-i.width),("top"===o[e]&&n>window.innerHeight-i.height||"center"===o[e]&&"vertical"===e&&n>window.innerHeight-i.height)&&(n=window.innerHeight-i.height),"right"===o[e]&&n>window.innerWidth-i.width&&(n=window.innerWidth-i.width),"bottom"===o[e]&&n>window.innerHeight-i.height&&(n=window.innerHeight-i.height),n})(d,t,e,n);return f},f=(t,o,e)=>{var i,n;const l=d(r.transformOrigin,r.placement[e],e,t,o);let f="left",v="right";"horizontal"===e&&"right"===(null===(i=r.transformOrigin)||void 0===i?void 0:i.horizontal)?(f="right",v="left"):"horizontal"===e&&(f="left",v="right"),"vertical"===e&&"bottom"===(null===(n=r.transformOrigin)||void 0===n?void 0:n.vertical)?(f="bottom",v="top"):"vertical"===e&&(f="top",v="bottom"),h((t=>({...t,[f]:l,[v]:"initial"})))},v=o((()=>{var t,o;if(!(null===(t=r.relativeElement)||void 0===t?void 0:t.current)||!(null===(o=r.elementToBePositioned)||void 0===o?void 0:o.current))return;const e=r.relativeElement.current.getBoundingClientRect(),i={height:r.elementToBePositioned.current.offsetHeight,width:r.elementToBePositioned.current.offsetWidth},n={top:e.top,right:e.right,bottom:e.bottom,center:0,centerv:e.top+e.height/2,centerh:e.left+e.width/2,left:e.left,width:e.width,height:e.height,x:e.x,y:e.y};f(n,i,"horizontal"),f(n,i,"vertical")}),null!==(n=r.debounceAmount)&&void 0!==n?n:20);return{top:l.top,bottom:l.bottom,left:l.left,right:l.right,calculatePosition:v}};export{i as usePosition};
+import{useState as t}from"react";import{useDebouncedCallback as o}from"./useDebouncedCallback.esm.js";const i={relativeElement:void 0,elementToBePositioned:void 0,transformOrigin:{horizontal:"left",vertical:"top"},placement:{horizontal:"left",vertical:"top"},offset:{top:0,right:0,bottom:0,left:0},debounceAmount:20},e=(e=i)=>{var n;const r={...i,...e},[l,h]=t(!1);void 0===r.transformOrigin&&(r.transformOrigin=i.transformOrigin),void 0===r.placement&&(r.placement=i.placement),void 0===r.offset&&(r.offset=i.offset);const[d,f]=t({left:0,top:0,right:"initial",bottom:"initial"}),v=(t,o,i,e,n)=>{const l="center"===o?(t=>{if("horizontal"===t)return"centerh";if("vertical"===t)return"centerv";throw new Error(`the requested return value isn't "vertical" or "horizontal" ${t} was given.`)})(i):o,h=((t,o,i,e,n)=>{let r=0;return"left"===t[o]||"top"===t[o]?r=i[e]:"center"===t[o]?r=i[e]-n["horizontal"===o?"width":"height"]/2:"right"!==t[o]&&"bottom"!==t[o]||(r=window["horizontal"===o?"innerWidth":"innerHeight"]-i[e]),r})(t,i,e,l,n),d=((t,o,i)=>{var e,n,l,h,d,f,v,a,c,g,m,s;let u=t;return("horizontal"===o&&0!==(null===(e=r.offset)||void 0===e?void 0:e.left)||"horizontal"===o&&0!==(null===(n=r.offset)||void 0===n?void 0:n.right))&&("left"!==i[o]&&"center"!==i[o]||(u+=null===(l=r.offset)||void 0===l?void 0:l.left,u-=null===(h=r.offset)||void 0===h?void 0:h.right),"right"===i[o]&&(u-=null===(d=r.offset)||void 0===d?void 0:d.left,u+=null===(f=r.offset)||void 0===f?void 0:f.right)),("vertical"===o&&0!==(null===(v=r.offset)||void 0===v?void 0:v.top)||"vertical"===o&&0!==(null===(a=r.offset)||void 0===a?void 0:a.bottom))&&("top"!==i[o]&&"center"!==i[o]||(u+=null===(c=r.offset)||void 0===c?void 0:c.top,u-=null===(g=r.offset)||void 0===g?void 0:g.bottom),"bottom"===i[o]&&(u-=null===(m=r.offset)||void 0===m?void 0:m.top,u+=null===(s=r.offset)||void 0===s?void 0:s.bottom)),u})(h,i,t),f=((t,o,i,e)=>{let n=t;return("left"===o[i]&&n<0||"top"===o[i]&&n<0||"center"===o[i]&&n<0||"bottom"===o[i]&&n<0)&&(n=0),("left"===o[i]&&n>window.innerWidth-e.width||"center"===o[i]&&"horizontal"===i&&n>window.innerWidth-e.width)&&(n=window.innerWidth-e.width),("top"===o[i]&&n>window.innerHeight-e.height||"center"===o[i]&&"vertical"===i&&n>window.innerHeight-e.height)&&(n=window.innerHeight-e.height),"right"===o[i]&&n>window.innerWidth-e.width&&(n=window.innerWidth-e.width),"bottom"===o[i]&&n>window.innerHeight-e.height&&(n=window.innerHeight-e.height),n})(d,t,i,n);return f},a=(t,o,i)=>{var e,n;const l=v(r.transformOrigin,r.placement[i],i,t,o);let h="left",d="right";"horizontal"===i&&"right"===(null===(e=r.transformOrigin)||void 0===e?void 0:e.horizontal)?(h="right",d="left"):"horizontal"===i&&(h="left",d="right"),"vertical"===i&&"bottom"===(null===(n=r.transformOrigin)||void 0===n?void 0:n.vertical)?(h="bottom",d="top"):"vertical"===i&&(h="top",d="bottom"),f((t=>({...t,[h]:l,[d]:"initial"})))},c=o((()=>{var t,o;if(!(null===(t=r.relativeElement)||void 0===t?void 0:t.current)||!(null===(o=r.elementToBePositioned)||void 0===o?void 0:o.current))return;const i=r.relativeElement.current.getBoundingClientRect(),e={height:r.elementToBePositioned.current.offsetHeight,width:r.elementToBePositioned.current.offsetWidth},n={top:i.top,right:i.right,bottom:i.bottom,center:0,centerv:i.top+i.height/2,centerh:i.left+i.width/2,left:i.left,width:i.width,height:i.height,x:i.x,y:i.y};a(n,e,"horizontal"),a(n,e,"vertical"),l||h(!0)}),null!==(n=r.debounceAmount)&&void 0!==n?n:20);return{top:d.top,bottom:d.bottom,left:d.left,right:d.right,calculatePosition:c,initialCalculationDone:l}};export{e as usePosition};
 //# sourceMappingURL=usePosition.esm.js.map

package/dist/esm/src/hooks/useSpacing.test.d.ts

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

package/dist/esm/src/hooks/useUploadFile.test.d.ts

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

package/dist/esm/src/hooks/useWrapper.test.d.ts

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

package/dist/esm/{index.d.ts → src/index.d.ts}

@@ -51,6 +51,9 @@ export { ModalContent } from "./components/Notifications/Modal/ModalContent/Moda
 export type { Props as ModalContentProps } from "./components/Notifications/Modal/ModalContent/ModalContent";
 export { ModalHeader } from "./components/Notifications/Modal/ModalHeader/ModalHeader";
 export type { Props as ModalHeaderProps } from "./components/Notifications/Modal/ModalHeader/ModalHeader";
+export { NotificationProvider, useNotificationContext } from "./components/Notifications/NotificationProvider/NotificationContext";
+export type { Props as NotificationProviderProps } from "./components/Notifications/NotificationProvider/NotificationContext";
+export type { AddNotification, RemoveNotification, Translations } from "./components/Notifications/NotificationProvider/notification.interfaces";
 export { SlideInModal } from "./components/Notifications/SlideInModal/SlideInModal";
 export type { Props as SlideInModalProps } from "./components/Notifications/SlideInModal/SlideInModal";
 export { SnackbarProvider } from "./components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider";

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

@@ -1,2 +1,2 @@
-export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
+export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
 //# sourceMappingURL=index.esm.js.map

package/dist/esm/{interfaces.d.ts → src/interfaces.d.ts}

@@ -4,3 +4,6 @@ export interface KeyValuePair {
     [dataAttribute: DataAttributeKey]: unknown;
 }
 export type MergeElementProps<T extends React.ElementType, P> = Omit<React.ComponentPropsWithRef<T>, keyof P> & P;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? DeepPartial<U>[] : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};

package/dist/{cjs → esm/src}/util/helper.d.ts

@@ -10,3 +10,8 @@ export declare const getValueByPath: (obj: {
 /** Source: https://stackoverflow.com/a/42769683/5084110 */
 export declare const remToPx: (rem: number) => number;
 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 {};

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

@@ -1,2 +1,2 @@
-const e=(e=15,t)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],n="";for(let o=0;o<e&&n.length<e;o++){n=n+("string"!=typeof t||void 0===(null==t?void 0:t[o])||/\s/.test(t[o])?"":t[o])+r[Math.floor(Math.random()*r.length)]}return n.slice(0,e)},t=(e,t,r=!0)=>r?Object.keys(e).reduce(((r,n)=>(t.test(n)&&(r[n]=e[n]),r)),{}):Object.entries(e).filter((([e])=>!t.test(e))).reduce(((e,t)=>({...e,[t[0]]:t[1]})),{}),r=(e,t)=>{let r;return function(...n){clearTimeout(r),r=setTimeout((()=>{clearTimeout(r),e(...n)}),t)}},n=(e,t)=>{let r=0;return function(){let n=Date.now();n-r>=t&&(e(),r=n)}};export{r as debounce,t as filterProps,e as generateID,n as throttle};
+const t=(t=15,e)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],o="";for(let l=0;l<t&&o.length<t;l++){o=o+("string"!=typeof e||void 0===(null==e?void 0:e[l])||/\s/.test(e[l])?"":e[l])+r[Math.floor(Math.random()*r.length)]}return o.slice(0,t)},e=(t,e,r=!0)=>r?Object.keys(t).reduce(((r,o)=>(e.test(o)&&(r[o]=t[o]),r)),{}):Object.entries(t).filter((([t])=>!e.test(t))).reduce(((t,e)=>({...t,[e[0]]:e[1]})),{}),r=(t,e)=>{let r;return function(...o){clearTimeout(r),r=setTimeout((()=>{clearTimeout(r),t(...o)}),e)}},o=(t,e)=>{let r=0;return function(){let o=Date.now();o-r>=e&&(t(),r=o)}},l=(t,e)=>{if(!e)return t;let r={...t};for(let o in e)Object.prototype.hasOwnProperty.call(e,o)&&("object"==typeof e[o]&&null!==e[o]&&Object.prototype.hasOwnProperty.call(t,o)&&!Array.isArray(e[o])?r[o]=l(t[o],e[o]):r[o]=e[o]);return r};export{r as debounce,l as deepMerge,e as filterProps,t as generateID,o as throttle};
 //# sourceMappingURL=helper.esm.js.map

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

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

package/dist/esm/stories/utils/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const isStory: () => boolean;
+export declare const centerStory: () => void;
+export declare const resetStory: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -49,81 +49,81 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@mdx-js/react": "^2.3.0",
-    "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
-    "@rollup/plugin-commonjs": "^25.0.0",
+    "@onewelcome/eslint-config-shared-codestyle": "^9.1.0",
+    "@onewelcome/storybook-addon-basestyling": "^0.0.2",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-a11y": "^7.0.18",
-    "@storybook/addon-actions": "^7.0.18",
-    "@storybook/addon-docs": "^7.0.18",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-webpack5": "^7.0.18",
-    "@storybook/theming": "^7.0.18",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@size-limit/preset-small-lib": "^8.2.6",
+    "@storybook/addon-a11y": "^7.2.3",
+    "@storybook/addon-actions": "^7.2.3",
+    "@storybook/addon-docs": "^7.2.3",
+    "@storybook/addon-essentials": "^7.2.3",
+    "@storybook/addon-interactions": "^7.2.3",
+    "@storybook/addon-links": "^7.2.3",
+    "@storybook/blocks": "^7.2.3",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react": "^7.2.3",
+    "@storybook/react-webpack5": "^7.2.3",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.2.3",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@tsconfig/recommended": "^1.0.2",
     "@types/color-convert": "^2.0.0",
-    "@types/jest": "^29.5.2",
-    "@types/mdx": "^2.0.5",
-    "@types/react": "^18.2.8",
-    "@types/react-dom": "^18.2.4",
+    "@types/jest": "^29.5.3",
+    "@types/mdx": "^2.0.6",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
-    "babel-loader": "^9.1.2",
-    "chromatic": "^6.18.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^6.21.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-cypress": "^2.14.0",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-license-header": "^0.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^14.0.0",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "postcss-url": "^10.1.3",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router": "^6.11.2",
-    "react-router-dom": "^6.11.2",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
     "remark-gfm": "^3.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.3.1",
-    "size-limit": "^8.2.4",
-    "storybook": "^7.0.18",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "sass": "^1.65.1",
+    "sass-loader": "^13.3.2",
+    "size-limit": "^8.2.6",
+    "storybook": "^7.2.3",
     "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.1.3"
-  },
-  "dependencies": {
-    "@onewelcome/storybook-addon-basestyling": "^0.0.1"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
   }
 }

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

@@ -18,7 +18,7 @@
 
 .fieldset {
   border: 0;
-  padding: 1rem variables.$form-element-horizontal-padding-mobile;
+  padding: variables.$form-element-horizontal-padding-mobile;
   border-radius: 0.5rem;
   margin: 0;
 
@@ -47,6 +47,6 @@
 }
 @media only screen and (min-width: 30em) {
   .fieldset {
-    padding: 1rem variables.$form-element-horizontal-padding-desktop;
+    padding: variables.$form-element-horizontal-padding-desktop;
   }
 }

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -126,11 +126,7 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         </Typography>
       )}
       {status === "uploading" ? (
-        <ProgressBar
-          className={classes["progress-bar"]}
-          placeholderText={""}
-          completed={progress}
-        />
+        <ProgressBar className={classes["progress-bar"]} completed={progress} />
       ) : (
         ""
       )}

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

@@ -18,11 +18,8 @@
   position: relative;
 }
 
-.error {
-  color: var(--error);
-}
-
 .error-message {
+  color: var(--error);
   display: flex;
   align-items: flex-end;
 }
@@ -42,4 +39,5 @@
 
 .default-helper {
   font-size: 0.75rem;
+  line-height: 1.33333333;
 }

package/src/components/Form/FormGroup/FormGroup.tsx

@@ -46,16 +46,15 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     helperText,
     helperId,
     helperProps,
+    disabled,
     ...rest
   }: Props,
   ref
 ) => {
+  const disableHelperText = helperProps?.disabled !== undefined ? helperProps?.disabled : disabled;
+
   return (
-    <div
-      {...rest}
-      ref={ref}
-      className={`${classes["form-group"]} ${error ? classes.error : ""} ${className ?? ""}`}
-    >
+    <div {...rest} ref={ref} className={`${classes["form-group"]} ${className ?? ""}`}>
       {children}
 
       {(helperText || (errorMessage && error)) && (
@@ -65,13 +64,18 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           }`}
         >
           {((helperText && !error) || (helperText && error && !errorMessage)) && (
-            <FormHelperText {...helperProps} className={""} id={helperId}>
+            <FormHelperText
+              {...helperProps}
+              className={""}
+              id={helperId}
+              disabled={disableHelperText}
+            >
               {helperProps?.children || helperText}
             </FormHelperText>
           )}
           {error && errorMessage && (
             <span className={classes["error-message"]}>
-              <span className={classes.message} id={errorId}>
+              <span id={errorId} className={classes.message}>
                 {errorMessageIcon && errorMessageIconPosition === "before" && (
                   <Icon
                     className={`${classes["error-icon"]} ${classes["error-icon-before"]}`}

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

@@ -14,11 +14,15 @@
  *    limitations under the License.
  */
 
-.form-helper-text {
-  margin: 0;
+div.form-helper-text {
+  color: var(--input-helper-text-color);
+  margin-bottom: 0;
+}
+
+div.disabled {
   color: var(--greyed-out);
 }
 
-.error {
+div.error {
   color: var(--error);
 }

package/src/components/Form/FormHelperText/FormHelperText.tsx

@@ -21,20 +21,20 @@ import { FormElement } from "../form.interfaces";
 
 export interface Props extends ComponentPropsWithRef<"div">, FormElement {
   children?: ReactNode;
+  disabled?: boolean;
 }
 
 const FormHelperTextComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, error, className, ...rest }: Props,
+  { children, error, disabled, className, ...rest }: Props,
   ref
 ) => {
+  const classNames = [classes["form-helper-text"]];
+  error && classNames.push(classes["error"]);
+  disabled && classNames.push(classes["disabled"]);
+  className && classNames.push(className);
+
   return (
-    <Typography
-      {...rest}
-      ref={ref}
-      variant="sub-text"
-      tag="div"
-      className={`${classes["form-helper-text"]} ${error ? classes.error : ""} ${className ?? ""}`}
-    >
+    <Typography {...rest} ref={ref} variant="sub-text" tag="div" className={classNames.join(" ")}>
       {children}
     </Typography>
   );

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

@@ -71,15 +71,19 @@
     height: 100%;
     width: 1.25rem;
     box-sizing: border-box;
-    font-size: 1.25rem;
+    font-size: 1.125rem;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
 
     &:before {
+      font-size: 1.125rem;
       height: 1.25rem;
       width: 1.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 
@@ -93,8 +97,9 @@
 }
 
 .input {
+  padding: 0;
   height: 40px;
-  color: var(--greyed-out);
+  color: var(--color-blue-grey900);
   font-size: var(--form-control-font-size);
   font-family: var(--font-family);
   box-sizing: border-box;
@@ -110,6 +115,7 @@
 
   &:disabled {
     cursor: not-allowed;
+    color: var(--greyed-out);
   }
 
   &.shrink-width-for-date-icon {
@@ -122,7 +128,6 @@
 @include mixins.outline;
 
 .error input {
-  color: var(--error);
   padding-right: 1.25rem;
 
   &.remove-extra-indent {

package/src/components/Form/Input/Input.test.tsx

@@ -260,7 +260,7 @@ describe("It should render prefix and suffix ", () => {
       ...defaultParams,
       success: true
     }));
-    const icon = input.querySelector(".icon-checkmark-circle-breakout");
+    const icon = input.querySelector(".icon-checkmark-circle-alt");
     expect(input.querySelector(".success")).toBeDefined();
     expect(icon).toBeDefined();
   });

package/src/components/Form/Select/Option.tsx

@@ -19,12 +19,13 @@ import React, {
   ComponentPropsWithRef,
   createRef,
   RefObject,
-  useEffect
+  useEffect,
+  ReactNode
 } from "react";
 import classes from "./Select.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"li"> {
-  children: string;
+  children: ReactNode;
   value: string;
   disabled?: boolean;
   isSelected?: boolean;
@@ -71,9 +72,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
     }
   }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
 
-  const onSelectHandler = () => {
-    if (onOptionSelect) onOptionSelect(innerOptionRef);
-  };
+  const onSelectHandler = () => onOptionSelect?.(innerOptionRef);
 
   return (
     <li