@oc-digital/react-component-library 7.2.2-beta.0 → 7.2.2-beta.2

package/build/styles/colours.d.ts

@@ -1,3 +1,3 @@
-export declare const RED = "#d32f2f";
-export declare const GREY = "rgb(158, 158, 158)";
-export declare const PRIMARY = "rgb(115, 196, 202)";
+export declare const RED = "#d32f2f";
+export declare const GREY = "rgb(158, 158, 158)";
+export declare const PRIMARY = "rgb(115, 196, 202)";

package/build/styles/colours.js

@@ -0,0 +1,4 @@
+export var RED = "#d32f2f";
+export var GREY = "rgb(158, 158, 158)";
+export var PRIMARY = "rgb(115, 196, 202)"; // Novel
+//# sourceMappingURL=colours.js.map

package/build/styles/colours.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colours.js","sourceRoot":"","sources":["../../src/styles/colours.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,GAAG,GAAG,SAAS,CAAC;AAC7B,MAAM,CAAC,IAAM,IAAI,GAAG,oBAAoB,CAAC;AACzC,MAAM,CAAC,IAAM,OAAO,GAAG,oBAAoB,CAAC,CAAC,QAAQ"}

package/build/styles/font.d.ts

@@ -1 +1 @@
-export declare const useFontStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"boldText" | "bolderText" | "smallText" | "warningColor" | "centerText">;
+export declare const useFontStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"boldText" | "bolderText" | "smallText" | "warningColor" | "centerText">;

package/build/styles/font.js

@@ -0,0 +1,19 @@
+import makeStyles from "@mui/styles/makeStyles";
+export var useFontStyles = makeStyles(function (theme) { return ({
+    boldText: {
+        fontWeight: 700,
+    },
+    bolderText: {
+        fontWeight: 500,
+    },
+    smallText: {
+        fontSize: "0.7rem",
+    },
+    warningColor: {
+        color: theme.palette.warning.main,
+    },
+    centerText: {
+        textAlign: "center",
+    },
+}); }, { classNamePrefix: "font" });
+//# sourceMappingURL=font.js.map

package/build/styles/font.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font.js","sourceRoot":"","sources":["../../src/styles/font.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAEhD,MAAM,CAAC,IAAM,aAAa,GAAG,UAAU,CACrC,UAAC,KAAK,IAAK,OAAA,CAAC;IACV,QAAQ,EAAE;QACR,UAAU,EAAE,GAAG;KAChB;IACD,UAAU,EAAE;QACV,UAAU,EAAE,GAAG;KAChB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,QAAQ;KACnB;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;KAClC;IACD,UAAU,EAAE;QACV,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,EAhBS,CAgBT,EACF,EAAE,eAAe,EAAE,MAAM,EAAE,CAC5B,CAAC"}

package/build/styles/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./spacing";
-export * from "./font";
-export * from "./layout";
+export * from "./spacing";
+export * from "./font";
+export * from "./layout";

package/build/styles/index.js

@@ -0,0 +1,4 @@
+export * from "./spacing";
+export * from "./font";
+export * from "./layout";
+//# sourceMappingURL=index.js.map

package/build/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}

package/build/styles/layout.d.ts

@@ -1 +1 @@
-export declare const useLayoutStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"contentBox" | "limitWidth60rem" | "limitWidth50rem" | "limitWidth45rem" | "limitWidth40rem" | "limitWidth35rem" | "limitWidth30rem" | "limitWidth25rem" | "centeredText" | "startAlignedText" | "width20" | "width49" | "width50" | "width60" | "width100" | "flexCenter" | "centerJustify" | "leftJustify" | "rightJustify" | "adornmentGap">;
+export declare const useLayoutStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"contentBox" | "limitWidth60rem" | "limitWidth50rem" | "limitWidth45rem" | "limitWidth40rem" | "limitWidth35rem" | "limitWidth30rem" | "limitWidth25rem" | "centeredText" | "startAlignedText" | "width20" | "width49" | "width50" | "width60" | "width100" | "flexCenter" | "centerJustify" | "leftJustify" | "rightJustify" | "adornmentGap">;

package/build/styles/layout.js

@@ -0,0 +1,85 @@
+import makeStyles from "@mui/styles/makeStyles";
+import { BORDER_RADIUS, ONE_REM, THREE_REM } from "../globals";
+export var useLayoutStyles = makeStyles({
+    contentBox: {
+        background: "white",
+        borderRadius: BORDER_RADIUS,
+        marginBottom: ONE_REM,
+        padding: THREE_REM,
+        overflow: "hidden",
+    },
+    limitWidth60rem: {
+        maxWidth: "60rem",
+        marginLeft: "auto",
+        marginRight: "auto",
+    },
+    limitWidth50rem: {
+        maxWidth: "50rem",
+        marginLeft: "auto",
+        marginRight: "auto",
+    },
+    limitWidth45rem: {
+        maxWidth: "45rem",
+        marginLeft: "auto",
+        marginRight: "auto",
+    },
+    limitWidth40rem: {
+        maxWidth: "40rem",
+        marginLeft: "auto",
+        marginRight: "auto",
+    },
+    limitWidth35rem: {
+        maxWidth: "35rem",
+        marginLeft: "auto",
+        marginRight: "auto",
+    },
+    limitWidth30rem: {
+        maxWidth: "30rem",
+        marginLeft: "auto",
+        marginRight: "auto",
+    },
+    limitWidth25rem: {
+        maxWidth: "25rem",
+        marginLeft: "auto",
+        marginRight: "auto",
+    },
+    centeredText: {
+        textAlign: "center",
+    },
+    startAlignedText: {
+        textAlign: "start",
+    },
+    width20: {
+        width: "20%",
+    },
+    width49: {
+        width: "49%",
+    },
+    width50: {
+        width: "50%",
+    },
+    width60: {
+        width: "60%",
+    },
+    width100: {
+        width: "100%",
+    },
+    flexCenter: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    centerJustify: {
+        justifyContent: "center",
+    },
+    leftJustify: {
+        justifyContent: "left",
+    },
+    rightJustify: {
+        justifyContent: "right",
+    },
+    adornmentGap: {
+        gap: "0.35rem",
+    },
+}, { classNamePrefix: "layout", index: 2 });
+//# sourceMappingURL=layout.js.map

package/build/styles/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/styles/layout.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,CAAC,IAAM,eAAe,GAAG,UAAU,CACvC;IACE,UAAU,EAAE;QACV,UAAU,EAAE,OAAO;QACnB,YAAY,EAAE,aAAa;QAC3B,YAAY,EAAE,OAAO;QACrB,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,QAAQ;KACnB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;KACpB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;KACpB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;KACpB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;KACpB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;KACpB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;KACpB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;KACpB;IACD,YAAY,EAAE;QACZ,SAAS,EAAE,QAAQ;KACpB;IACD,gBAAgB,EAAE;QAChB,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;KACb;IACD,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;KACb;IACD,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;KACb;IACD,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,aAAa,EAAE;QACb,cAAc,EAAE,QAAQ;KACzB;IACD,WAAW,EAAE;QACX,cAAc,EAAE,MAAM;KACvB;IACD,YAAY,EAAE;QACZ,cAAc,EAAE,OAAO;KACxB;IACD,YAAY,EAAE;QACZ,GAAG,EAAE,SAAS;KACf;CACF,EACD,EAAE,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CACxC,CAAC"}

package/build/styles/spacing.d.ts

@@ -1 +1 @@
-export declare const useSpacingStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"labelBreak" | "contentBreak" | "sectionBreak" | "doubleSectionBreak" | "rightSpacer1" | "rightSpacer2" | "leftSpacer1" | "leftSpacer2" | "buttonSpacing" | "leftRightPadding1" | "leftRightPadding2" | "topBottomPadding1" | "topBottomPadding2">;
+export declare const useSpacingStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"labelBreak" | "contentBreak" | "sectionBreak" | "doubleSectionBreak" | "rightSpacer1" | "rightSpacer2" | "leftSpacer1" | "leftSpacer2" | "buttonSpacing" | "leftRightPadding1" | "leftRightPadding2" | "topBottomPadding1" | "topBottomPadding2">;

package/build/styles/spacing.js

@@ -0,0 +1,50 @@
+import makeStyles from "@mui/styles/makeStyles";
+import { HALF_REM, ONE_AND_HALF_REM, THREE_REM, ONE_REM } from "../globals";
+export var useSpacingStyles = makeStyles({
+    labelBreak: {
+        marginBottom: HALF_REM,
+    },
+    contentBreak: {
+        marginBottom: ONE_REM,
+    },
+    sectionBreak: {
+        marginBottom: ONE_AND_HALF_REM,
+    },
+    doubleSectionBreak: {
+        marginBottom: THREE_REM,
+    },
+    rightSpacer1: {
+        marginRight: HALF_REM,
+    },
+    rightSpacer2: {
+        marginRight: ONE_REM,
+    },
+    leftSpacer1: {
+        marginLeft: HALF_REM,
+    },
+    leftSpacer2: {
+        marginLeft: ONE_REM,
+    },
+    buttonSpacing: {
+        marginLeft: HALF_REM,
+        marginRight: HALF_REM,
+        marginBottom: ONE_REM,
+    },
+    leftRightPadding1: {
+        paddingLeft: HALF_REM,
+        paddingRight: HALF_REM,
+    },
+    leftRightPadding2: {
+        paddingLeft: ONE_REM,
+        paddingRight: ONE_REM,
+    },
+    topBottomPadding1: {
+        paddingTop: HALF_REM,
+        paddingBottom: HALF_REM,
+    },
+    topBottomPadding2: {
+        paddingTop: ONE_REM,
+        paddingBottom: ONE_REM,
+    },
+}, { classNamePrefix: "spacing", index: 2 });
+//# sourceMappingURL=spacing.js.map

package/build/styles/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sourceRoot":"","sources":["../../src/styles/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5E,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAU,CACxC;IACE,UAAU,EAAE;QACV,YAAY,EAAE,QAAQ;KACvB;IACD,YAAY,EAAE;QACZ,YAAY,EAAE,OAAO;KACtB;IACD,YAAY,EAAE;QACZ,YAAY,EAAE,gBAAgB;KAC/B;IACD,kBAAkB,EAAE;QAClB,YAAY,EAAE,SAAS;KACxB;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,QAAQ;KACtB;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,OAAO;KACrB;IACD,WAAW,EAAE;QACX,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,UAAU,EAAE,OAAO;KACpB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,QAAQ;QACpB,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,OAAO;KACtB;IACD,iBAAiB,EAAE;QACjB,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,QAAQ;KACvB;IACD,iBAAiB,EAAE;QACjB,WAAW,EAAE,OAAO;QACpB,YAAY,EAAE,OAAO;KACtB;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAQ;KACxB;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,OAAO;QACnB,aAAa,EAAE,OAAO;KACvB;CACF,EACD,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,CACzC,CAAC"}

package/build/styles/themes.d.ts

@@ -1,2 +1,2 @@
-export declare const novelTheme: import("@mui/material/styles").Theme;
-export declare const partnersTheme: import("@mui/material/styles").Theme;
+export declare const novelTheme: import("@mui/material/styles").Theme;
+export declare const partnersTheme: import("@mui/material/styles").Theme;

package/build/styles/themes.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createTheme } from "@mui/material/styles";
+var sharedThemeProperties = {
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 960,
+            lg: 1280,
+            xl: 1920,
+        },
+    },
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    fontSize: "0.875rem",
+                    lineHeight: 1.43,
+                    letterSpacing: "0.01071em",
+                },
+            },
+        },
+    },
+};
+export var novelTheme = createTheme(__assign({ palette: {
+        primary: {
+            main: "#73c4ca",
+        },
+        background: {
+            default: "#fafafa",
+        },
+    } }, sharedThemeProperties));
+export var partnersTheme = createTheme(__assign({ palette: {
+        primary: {
+            main: "#440381",
+        },
+        secondary: {
+            main: "#f50057",
+        },
+        background: {
+            default: "#fafafa",
+        },
+    }, typography: {
+        subtitle1: { fontSize: "h5.fontSize" },
+    } }, sharedThemeProperties));
+//# sourceMappingURL=themes.js.map

package/build/styles/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../src/styles/themes.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,IAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE;QACX,MAAM,EAAE;YACN,EAAE,EAAE,CAAC;YACL,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,IAAI;YACR,EAAE,EAAE,IAAI;SACT;KACF;IAED,UAAU,EAAE;QACV,cAAc,EAAE;YACd,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,QAAQ,EAAE,UAAU;oBACpB,UAAU,EAAE,IAAI;oBAChB,aAAa,EAAE,WAAW;iBAC3B;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG,WAAW,YACnC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;SAChB;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;SACnB;KACF,IACE,qBAAqB,EACxB,CAAC;AAEH,MAAM,CAAC,IAAM,aAAa,GAAG,WAAW,YACtC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;SAChB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,SAAS;SAChB;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;SACnB;KACF,EACD,UAAU,EAAE;QACV,SAAS,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE;KACvC,IACE,qBAAqB,EACxB,CAAC"}

package/build/utils/index.d.ts

@@ -1,5 +1,5 @@
-import { TableCellValues } from "../EditableTable/EditableTable.types";
-export declare function sortDescendingStartDateString<T extends {
-    startDate: string;
-}>(array: T[]): T[];
-export declare const didCellValueChange: (oldVal: TableCellValues, newVal: TableCellValues, isDateValue?: boolean) => boolean;
+import { TableCellValues } from "../EditableTable/EditableTable.types";
+export declare function sortDescendingStartDateString<T extends {
+    startDate: string;
+}>(array: T[]): T[];
+export declare const didCellValueChange: (oldVal: TableCellValues, newVal: TableCellValues, isDateValue?: boolean) => boolean;

package/build/utils/index.js

@@ -0,0 +1,14 @@
+import { isValid } from "date-fns";
+export function sortDescendingStartDateString(array) {
+    return array.sort(function (a, b) {
+        return +b.startDate.split("T")[0].replaceAll("-", "") -
+            +a.startDate.split("T")[0].replaceAll("-", "");
+    });
+}
+export var didCellValueChange = function (oldVal, newVal, isDateValue) {
+    return isDateValue
+        ? (oldVal && isValid(oldVal) ? oldVal : new Date(0)).getTime() ===
+            (newVal && isValid(newVal) ? newVal : new Date(0)).getTime()
+        : oldVal === newVal;
+};
+//# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnC,MAAM,UAAU,6BAA6B,CAC3C,KAAU;IAEV,OAAO,KAAK,CAAC,IAAI,CACf,UAAC,CAAC,EAAE,CAAC;QACH,OAAA,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC;YAC9C,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC;IAD9C,CAC8C,CACjD,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAChC,MAAuB,EACvB,MAAuB,EACvB,WAAqB;IAErB,OAAA,WAAW;QACT,CAAC,CAAE,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAU,CAAC,OAAO,EAAE;YACrE,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAU,CAAC,OAAO,EAAE;QACxE,CAAC,CAAC,MAAM,KAAK,MAAM;AAHrB,CAGqB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oc-digital/react-component-library",
   "type": "module",
-  "version": "7.2.2-beta.0",
+  "version": "7.2.2-beta.2",
   "description": "React component library for Optimal Compliance",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -14,7 +14,7 @@
     "build:watch": "npx rollup -c -w",
     "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "beta": "npm publish --tag beta",
     "lint": "eslint ./",
@@ -24,9 +24,12 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/plugin-syntax-import-attributes": "^7.24.1",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "^1.3.4",
     "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -38,20 +41,19 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-actions": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-themes": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-webpack5": "^7.6.12",
+    "@storybook/addon-actions": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-themes": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
     "@types/react": "^17.0.21",
     "@types/react-table": "^7.7.8",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "babel-loader": "^8.2.2",
     "date-fns": "^2.25.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.10.0",
@@ -70,12 +72,14 @@
     "react-router-dom": "^6.21.1",
     "react-table": "^7.7.0",
     "rollup": "^4.12.1",
-    "rollup-plugin-import-css-classes": "^1.4.0",
+    "rollup-plugin-import-css-classes": "^1.5.0",
+    "rollup-plugin-import-css-classes-storybook": "npm:rollup-plugin-import-css-classes@^2.0.0-beta.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "storybook": "^7.6.12",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^8.0.10",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -96,7 +100,7 @@
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
-      "ecmaVersion": 2020,
+      "ecmaVersion": 2023,
       "sourceType": "module",
       "ecmaFeatures": {
         "jsx": true