@gobolt/genesis 0.2.20 → 0.3.0

package/dist/providers/ToastProvider.cjs

@@ -2,7 +2,7 @@
 var jsxRuntime = require("react/jsx-runtime");
 var React = require("react");
 var index = require("../node_modules/react-toastify/dist/index.cjs");
-var styled = require("../utils/styled.cjs");
+var styled = require("styled-components");
 require("../node_modules/react-toastify/dist/ReactToastify.css.cjs");
 var Toast = require("../components/Toast/Toast.cjs");
 const ToastContext = React.createContext(
@@ -15,13 +15,13 @@ const ToastWrapper = ({ closeToast, toastProps, message, state, action }) => {
 const ToastProvider = ({ children }) => {
   const theme = styled.useTheme();
   const show = (message, state, action) => {
-    index.toast.success((props) => /* @__PURE__ */ jsxRuntime.jsx(
+    index.toast.success((properties) => /* @__PURE__ */ jsxRuntime.jsx(
       ToastWrapper,
       {
         message,
         state,
         action,
-        ...props
+        ...properties
       }
     ));
   };

package/dist/providers/ToastProvider.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { ToastContainer as Lt, toast as y } from "../node_modules/react-toastify/dist/index.js";
-import { useTheme } from "../utils/styled.js";
+import { useTheme } from "styled-components";
 import "../node_modules/react-toastify/dist/ReactToastify.css.js";
 import Toast from "../components/Toast/Toast.js";
 const ToastContext = React__default.createContext(
@@ -14,13 +14,13 @@ const ToastWrapper = ({ closeToast, toastProps, message, state, action }) => {
 const ToastProvider = ({ children }) => {
   const theme = useTheme();
   const show = (message, state, action) => {
-    y.success((props) => /* @__PURE__ */ jsx(
+    y.success((properties) => /* @__PURE__ */ jsx(
       ToastWrapper,
       {
         message,
         state,
         action,
-        ...props
+        ...properties
       }
     ));
   };

package/dist/providers/useGenesis.cjs

@@ -1,6 +1,6 @@
 "use strict";
 var BreakpointProvider = require("./BreakpointProvider.cjs");
-var styled = require("../utils/styled.cjs");
+var styled = require("styled-components");
 var ToastProvider = require("./ToastProvider.cjs");
 const useGenesis = () => {
   const theme = styled.useTheme();

package/dist/providers/useGenesis.js

@@ -1,5 +1,5 @@
 import { useBreakpoint } from "./BreakpointProvider.js";
-import { useTheme } from "../utils/styled.js";
+import { useTheme } from "styled-components";
 import { useToast } from "./ToastProvider.js";
 const useGenesis = () => {
   const theme = useTheme();

package/dist/styles/global-styles.cjs

@@ -1,5 +1,5 @@
 "use strict";
-var styled = require("../utils/styled.cjs");
+var styled = require("styled-components");
 require("../node_modules/@fontsource/inter/300.css.cjs");
 require("../node_modules/@fontsource/inter/400.css.cjs");
 require("../node_modules/@fontsource/inter/500.css.cjs");

package/dist/styles/global-styles.js

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from "../utils/styled.js";
+import { createGlobalStyle } from "styled-components";
 import "../node_modules/@fontsource/inter/300.css.js";
 import "../node_modules/@fontsource/inter/400.css.js";
 import "../node_modules/@fontsource/inter/500.css.js";

package/dist/styles/theme/genesis-theme.cjs

@@ -1245,17 +1245,17 @@ const darkModeColors = lightModeColors;
 });
 const shadows = {
   general: {
-    "1": "box-shadow: 0px 4px 16px 0px #00000026",
-    "2": "box-shadow: 0px 8px 24px -4px #00000026",
-    "3": "box-shadow: 0px 2px 3px -1px #00000026",
-    "4": "box-shadow: 4px 0px 7px -3px #0000001F"
+    "1": "0px 4px 16px 0px #00000026",
+    "2": "0px 8px 24px -4px #00000026",
+    "3": "0px 2px 3px -1px #00000026",
+    "4": "4px 0px 7px -3px #0000001F"
   },
   actions: {
-    "1": "box-shadow: 0px 2px 2px -1px #00000033",
-    "2": "box-shadow: 0px 1px 2px 0px #00000026"
+    "1": "0px 2px 2px -1px #00000033",
+    "2": "0px 1px 2px 0px #00000026"
   },
   inputs: {
-    "1": "box-shadow: 0px 1px 2px 0px #0000001F"
+    "1": "0px 1px 2px 0px #0000001F"
   }
 };
 const motion = {
@@ -1283,6 +1283,16 @@ const row = {
   "hor-padding": sizing.Size6,
   gap: sizing.Size2
 };
+const tableCell = {
+  surface: variables.ColorGrayWhite,
+  hover: variables.ColorGray100,
+  pressed: variables.ColorGray200,
+  focussed: variables.ColorGray300,
+  disabled: variables.ColorGray400,
+  selected: variables.ColorSky800,
+  border: "#E0E0E0",
+  ring: "#E0E0E0"
+};
 const components = {
   button,
   utilityButton,
@@ -1290,7 +1300,8 @@ const components = {
   input,
   row,
   badge,
-  popover
+  popover,
+  tableCell
 };
 const getStatusColor = (colors2, status) => {
   return colors2.status[status].default;

package/dist/styles/theme/genesis-theme.js

@@ -1,4 +1,4 @@
-import { Size4, Size3, Size2, Size1, Size25, Size025, Size15, Size05, Size64, Size50, Size43, Size39, Size35, Size34, Size32, Size30, Size28, Size27, Size24, Size20, Size18, Size16, Size14, Size13, Size12, Size10, Size8, Size7, Size6, Size5, Size2_5, Size1_5, BorderRadiusMd, BorderRadiusSm, ColorGrayWhite, ColorGrayBlack, ColorGray900, ColorGray800, ColorGray700, ColorGray600, ColorGray500, ColorGray400, ColorGray300, ColorGray200, ColorGray100, ColorPurple900, ColorPurple800, ColorPurple700, ColorPurple600, ColorPurple500, ColorPurple400, ColorPurple300, ColorPurple200, ColorPurple100, ColorBlue900, ColorBlue800, ColorBlue700, ColorBlue600, ColorBlue500, ColorBlue400, ColorBlue300, ColorBlue200, ColorBlue100, ColorSky900, ColorSky800, ColorSky700, ColorSky600, ColorSky500, ColorSky400, ColorSky300, ColorSky200, ColorSky100, ColorGreen900, ColorGreen800, ColorGreen700, ColorGreen600, ColorGreen500, ColorGreen400, ColorGreen300, ColorGreen200, ColorGreen100, ColorYellow900, ColorYellow800, ColorYellow700, ColorYellow600, ColorYellow500, ColorYellow400, ColorYellow300, ColorYellow200, ColorYellow100, ColorOrange900, ColorOrange800, ColorOrange700, ColorOrange600, ColorOrange500, ColorOrange400, ColorOrange300, ColorOrange200, ColorOrange100, ColorRed900, ColorRed800, ColorRed700, ColorRed600, ColorRed500, ColorRed400, ColorRed300, ColorRed200, ColorRed100, TypographyNarrowFontSizeDigits3, TypographyNarrowFontSizeDigits2, TypographyNarrowFontSizeDigits1, TypographyNarrowFontSizeLink3, TypographyNarrowFontSizeLink2, TypographyNarrowFontSizeLink1, TypographyNarrowFontSizeLabel3, TypographyNarrowFontSizeLabel2, TypographyNarrowFontSizeLabel1, TypographyNarrowFontSizeOverline3, TypographyNarrowFontSizeOverline2, TypographyNarrowFontSizeOverline1, TypographyNarrowFontSizeMessage, TypographyNarrowFontSizeBody5, TypographyNarrowFontSizeBody4, TypographyNarrowFontSizeBody3, TypographyNarrowFontSizeBody2, TypographyNarrowFontSizeBody1, TypographyNarrowFontSizeSubHeading3, TypographyNarrowFontSizeSubHeading2, TypographyNarrowFontSizeSubHeading1, TypographyNarrowFontSizeHeading3, TypographyNarrowFontSizeHeading2, TypographyNarrowFontSizeHeading1, TypographyNarrowFontSizeDisplay3, TypographyNarrowFontSizeDisplay2, TypographyNarrowFontSizeDisplay1, TypographyMediumFontSizeDigits3, TypographyMediumFontSizeDigits2, TypographyMediumFontSizeDigits1, TypographyMediumFontSizeLink3, TypographyMediumFontSizeLink2, TypographyMediumFontSizeLink1, TypographyMediumFontSizeLabel3, TypographyMediumFontSizeLabel2, TypographyMediumFontSizeLabel1, TypographyMediumFontSizeOverline3, TypographyMediumFontSizeOverline2, TypographyMediumFontSizeOverline1, TypographyMediumFontSizeMessage, TypographyMediumFontSizeBody5, TypographyMediumFontSizeBody4, TypographyMediumFontSizeBody3, TypographyMediumFontSizeBody2, TypographyMediumFontSizeBody1, TypographyMediumFontSizeSubHeading3, TypographyMediumFontSizeSubHeading2, TypographyMediumFontSizeSubHeading1, TypographyMediumFontSizeHeading3, TypographyMediumFontSizeHeading2, TypographyMediumFontSizeHeading1, TypographyMediumFontSizeDisplay3, TypographyMediumFontSizeDisplay2, TypographyMediumFontSizeDisplay1, TypographyWideFontSizeDigits3, TypographyWideFontSizeDigits2, TypographyWideFontSizeDigits1, TypographyWideFontSizeLink3, TypographyWideFontSizeLink2, TypographyWideFontSizeLink1, TypographyWideFontSizeLabel3, TypographyWideFontSizeLabel2, TypographyWideFontSizeLabel1, TypographyWideFontSizeOverline3, TypographyWideFontSizeOverline2, TypographyWideFontSizeOverline1, TypographyWideFontSizeMessage, TypographyWideFontSizeBody5, TypographyWideFontSizeBody4, TypographyWideFontSizeBody3, TypographyWideFontSizeBody2, TypographyWideFontSizeBody1, TypographyWideFontSizeSubHeading3, TypographyWideFontSizeSubHeading2, TypographyWideFontSizeSubHeading1, TypographyWideFontSizeHeading3, TypographyWideFontSizeHeading2, TypographyWideFontSizeHeading1, TypographyWideFontSizeDisplay3, TypographyWideFontSizeDisplay2, TypographyWideFontSizeDisplay1, TypographyPrimaryFontFamily, BorderRadiusRounded, BorderRadiusXxxl, BorderRadiusXxl, BorderRadiusXl, BorderRadiusLg, BorderRadiusXs, BorderRadiusNone } from "../design-tokens/variables.js";
+import { Size4, Size3, Size2, Size1, Size25, Size025, Size15, Size05, Size64, Size50, Size43, Size39, Size35, Size34, Size32, Size30, Size28, Size27, Size24, Size20, Size18, Size16, Size14, Size13, Size12, Size10, Size8, Size7, Size6, Size5, Size2_5, Size1_5, ColorSky800, ColorGray400, ColorGray300, ColorGray200, ColorGray100, ColorGrayWhite, BorderRadiusMd, BorderRadiusSm, ColorGrayBlack, ColorGray900, ColorGray800, ColorGray700, ColorGray600, ColorGray500, ColorPurple900, ColorPurple800, ColorPurple700, ColorPurple600, ColorPurple500, ColorPurple400, ColorPurple300, ColorPurple200, ColorPurple100, ColorBlue900, ColorBlue800, ColorBlue700, ColorBlue600, ColorBlue500, ColorBlue400, ColorBlue300, ColorBlue200, ColorBlue100, ColorSky900, ColorSky700, ColorSky600, ColorSky500, ColorSky400, ColorSky300, ColorSky200, ColorSky100, ColorGreen900, ColorGreen800, ColorGreen700, ColorGreen600, ColorGreen500, ColorGreen400, ColorGreen300, ColorGreen200, ColorGreen100, ColorYellow900, ColorYellow800, ColorYellow700, ColorYellow600, ColorYellow500, ColorYellow400, ColorYellow300, ColorYellow200, ColorYellow100, ColorOrange900, ColorOrange800, ColorOrange700, ColorOrange600, ColorOrange500, ColorOrange400, ColorOrange300, ColorOrange200, ColorOrange100, ColorRed900, ColorRed800, ColorRed700, ColorRed600, ColorRed500, ColorRed400, ColorRed300, ColorRed200, ColorRed100, TypographyNarrowFontSizeDigits3, TypographyNarrowFontSizeDigits2, TypographyNarrowFontSizeDigits1, TypographyNarrowFontSizeLink3, TypographyNarrowFontSizeLink2, TypographyNarrowFontSizeLink1, TypographyNarrowFontSizeLabel3, TypographyNarrowFontSizeLabel2, TypographyNarrowFontSizeLabel1, TypographyNarrowFontSizeOverline3, TypographyNarrowFontSizeOverline2, TypographyNarrowFontSizeOverline1, TypographyNarrowFontSizeMessage, TypographyNarrowFontSizeBody5, TypographyNarrowFontSizeBody4, TypographyNarrowFontSizeBody3, TypographyNarrowFontSizeBody2, TypographyNarrowFontSizeBody1, TypographyNarrowFontSizeSubHeading3, TypographyNarrowFontSizeSubHeading2, TypographyNarrowFontSizeSubHeading1, TypographyNarrowFontSizeHeading3, TypographyNarrowFontSizeHeading2, TypographyNarrowFontSizeHeading1, TypographyNarrowFontSizeDisplay3, TypographyNarrowFontSizeDisplay2, TypographyNarrowFontSizeDisplay1, TypographyMediumFontSizeDigits3, TypographyMediumFontSizeDigits2, TypographyMediumFontSizeDigits1, TypographyMediumFontSizeLink3, TypographyMediumFontSizeLink2, TypographyMediumFontSizeLink1, TypographyMediumFontSizeLabel3, TypographyMediumFontSizeLabel2, TypographyMediumFontSizeLabel1, TypographyMediumFontSizeOverline3, TypographyMediumFontSizeOverline2, TypographyMediumFontSizeOverline1, TypographyMediumFontSizeMessage, TypographyMediumFontSizeBody5, TypographyMediumFontSizeBody4, TypographyMediumFontSizeBody3, TypographyMediumFontSizeBody2, TypographyMediumFontSizeBody1, TypographyMediumFontSizeSubHeading3, TypographyMediumFontSizeSubHeading2, TypographyMediumFontSizeSubHeading1, TypographyMediumFontSizeHeading3, TypographyMediumFontSizeHeading2, TypographyMediumFontSizeHeading1, TypographyMediumFontSizeDisplay3, TypographyMediumFontSizeDisplay2, TypographyMediumFontSizeDisplay1, TypographyWideFontSizeDigits3, TypographyWideFontSizeDigits2, TypographyWideFontSizeDigits1, TypographyWideFontSizeLink3, TypographyWideFontSizeLink2, TypographyWideFontSizeLink1, TypographyWideFontSizeLabel3, TypographyWideFontSizeLabel2, TypographyWideFontSizeLabel1, TypographyWideFontSizeOverline3, TypographyWideFontSizeOverline2, TypographyWideFontSizeOverline1, TypographyWideFontSizeMessage, TypographyWideFontSizeBody5, TypographyWideFontSizeBody4, TypographyWideFontSizeBody3, TypographyWideFontSizeBody2, TypographyWideFontSizeBody1, TypographyWideFontSizeSubHeading3, TypographyWideFontSizeSubHeading2, TypographyWideFontSizeSubHeading1, TypographyWideFontSizeHeading3, TypographyWideFontSizeHeading2, TypographyWideFontSizeHeading1, TypographyWideFontSizeDisplay3, TypographyWideFontSizeDisplay2, TypographyWideFontSizeDisplay1, TypographyPrimaryFontFamily, BorderRadiusRounded, BorderRadiusXxxl, BorderRadiusXxl, BorderRadiusXl, BorderRadiusLg, BorderRadiusXs, BorderRadiusNone } from "../design-tokens/variables.js";
 const breakpoints = {
   wide: 1280,
   medium: 1024,
@@ -1244,17 +1244,17 @@ const darkModeColors = lightModeColors;
 });
 const shadows = {
   general: {
-    "1": "box-shadow: 0px 4px 16px 0px #00000026",
-    "2": "box-shadow: 0px 8px 24px -4px #00000026",
-    "3": "box-shadow: 0px 2px 3px -1px #00000026",
-    "4": "box-shadow: 4px 0px 7px -3px #0000001F"
+    "1": "0px 4px 16px 0px #00000026",
+    "2": "0px 8px 24px -4px #00000026",
+    "3": "0px 2px 3px -1px #00000026",
+    "4": "4px 0px 7px -3px #0000001F"
   },
   actions: {
-    "1": "box-shadow: 0px 2px 2px -1px #00000033",
-    "2": "box-shadow: 0px 1px 2px 0px #00000026"
+    "1": "0px 2px 2px -1px #00000033",
+    "2": "0px 1px 2px 0px #00000026"
   },
   inputs: {
-    "1": "box-shadow: 0px 1px 2px 0px #0000001F"
+    "1": "0px 1px 2px 0px #0000001F"
   }
 };
 const motion = {
@@ -1282,6 +1282,16 @@ const row = {
   "hor-padding": sizing.Size6,
   gap: sizing.Size2
 };
+const tableCell = {
+  surface: ColorGrayWhite,
+  hover: ColorGray100,
+  pressed: ColorGray200,
+  focussed: ColorGray300,
+  disabled: ColorGray400,
+  selected: ColorSky800,
+  border: "#E0E0E0",
+  ring: "#E0E0E0"
+};
 const components = {
   button,
   utilityButton,
@@ -1289,7 +1299,8 @@ const components = {
   input,
   row,
   badge,
-  popover
+  popover,
+  tableCell
 };
 const getStatusColor = (colors2, status) => {
   return colors2.status[status].default;

package/dist/styles/theme/genesis-theme.types.d.ts

@@ -207,7 +207,12 @@ type CommonContainer = {
 };
 type Popover = CommonContainer;
 type Row = CommonContainer;
-type Components = {
+type TableCell = {
+    surface: string;
+    hover: string;
+    pressed: string;
+};
+export type Components = {
     button: Button;
     utilityButton: Button;
     iconButton: Button;
@@ -215,6 +220,7 @@ type Components = {
     row: Row;
     badge: Badge;
     popover: Popover;
+    tableCell: TableCell;
 };
 type Motion = {
     instant: string;

package/dist/utils/icon-util.cjs

@@ -6,42 +6,44 @@ var index$2 = require("../node_modules/react-icons/hi/index.cjs");
 var index = require("../node_modules/react-icons/pi/index.cjs");
 var index$4 = require("../node_modules/react-icons/tb/index.cjs");
 var index$5 = require("../node_modules/react-icons/lu/index.cjs");
-var MinusCircleOutlined = require("../node_modules/@ant-design/icons/es/icons/MinusCircleOutlined.cjs");
-var ClockCircleOutlined = require("../node_modules/@ant-design/icons/es/icons/ClockCircleOutlined.cjs");
-var CloseCircleOutlined = require("../node_modules/@ant-design/icons/es/icons/CloseCircleOutlined.cjs");
-var ExclamationCircleOutlined = require("../node_modules/@ant-design/icons/es/icons/ExclamationCircleOutlined.cjs");
-var MinusCircleFilled = require("../node_modules/@ant-design/icons/es/icons/MinusCircleFilled.cjs");
-var ClockCircleFilled = require("../node_modules/@ant-design/icons/es/icons/ClockCircleFilled.cjs");
-var CloseCircleFilled = require("../node_modules/@ant-design/icons/es/icons/CloseCircleFilled.cjs");
-var ExclamationCircleFilled = require("../node_modules/@ant-design/icons/es/icons/ExclamationCircleFilled.cjs");
-const iconFontSize = 16;
+const iconSize = 18;
 const getIcon = (name) => {
   switch (name.toLowerCase()) {
-    case "orders":
+    case "orders": {
       return /* @__PURE__ */ jsxRuntime.jsx(index$5.LuTag, {});
-    case "warehouse":
+    }
+    case "warehouse": {
       return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineGlobe, {});
-    case "availability":
+    }
+    case "availability": {
       return /* @__PURE__ */ jsxRuntime.jsx(index$4.TbFiles, {});
-    default:
+    }
+    default: {
       return null;
+    }
   }
 };
 const getIconColor = (state, theme) => {
   switch (state) {
-    case index$1.STATE.error:
+    case index$1.STATE.error: {
       return theme.colors.status.error.onsurface;
-    case index$1.STATE.success:
+    }
+    case index$1.STATE.success: {
       return theme.colors.status.success.onsurface;
-    case index$1.STATE.warning:
+    }
+    case index$1.STATE.warning: {
       return theme.colors.status.warning.default;
-    case index$1.STATE.removed:
+    }
+    case index$1.STATE.removed: {
       return theme.colors.status.generic.default;
-    case index$1.STATE.progress:
+    }
+    case index$1.STATE.progress: {
       return theme.colors.timebox.evening.default;
+    }
     case index$1.STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
@@ -54,41 +56,48 @@ const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, custom
   if (!isFilled) {
     switch (state) {
       // isFilled is false
-      case index$1.STATE.warning:
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          ExclamationCircleOutlined,
-          {
-            style: { color, fontSize: iconFontSize }
-          }
-        );
-      case index$1.STATE.error:
-        return /* @__PURE__ */ jsxRuntime.jsx(CloseCircleOutlined, { style: { color, fontSize: iconFontSize } });
-      case index$1.STATE.success:
-        return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineCheckCircle, { style: { color, fontSize: iconFontSize } });
-      case index$1.STATE.progress:
-        return /* @__PURE__ */ jsxRuntime.jsx(ClockCircleOutlined, { style: { color, fontSize: iconFontSize } });
-      case index$1.STATE.removed:
-        return /* @__PURE__ */ jsxRuntime.jsx(MinusCircleOutlined, { style: { color, fontSize: iconFontSize } });
+      case index$1.STATE.warning: {
+        return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineExclamationCircle, { size: iconSize, style: { color } });
+      }
+      case index$1.STATE.error: {
+        return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineXCircle, { size: iconSize, style: { color } });
+      }
+      case index$1.STATE.success: {
+        return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineCheckCircle, { size: iconSize, style: { color } });
+      }
+      case index$1.STATE.progress: {
+        return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineClock, { size: iconSize, style: { color } });
+      }
+      case index$1.STATE.removed: {
+        return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineMinusCircle, { size: iconSize, style: { color } });
+      }
       case index$1.STATE.info:
-      default:
-        return /* @__PURE__ */ jsxRuntime.jsx(index.PiInfo, { style: { color, fontSize: iconFontSize } });
+      default: {
+        return /* @__PURE__ */ jsxRuntime.jsx(index.PiInfo, { size: iconSize, style: { color } });
+      }
     }
   }
   switch (state) {
     // isFilled is true
-    case index$1.STATE.warning:
-      return /* @__PURE__ */ jsxRuntime.jsx(ExclamationCircleFilled, { style: { color, fontSize: iconFontSize } });
-    case index$1.STATE.error:
-      return /* @__PURE__ */ jsxRuntime.jsx(CloseCircleFilled, { style: { color, fontSize: iconFontSize } });
-    case index$1.STATE.success:
-      return /* @__PURE__ */ jsxRuntime.jsx(index$3.FaCircleCheck, { style: { color, fontSize: iconFontSize } });
-    case index$1.STATE.progress:
-      return /* @__PURE__ */ jsxRuntime.jsx(ClockCircleFilled, { style: { color, fontSize: iconFontSize } });
-    case index$1.STATE.removed:
-      return /* @__PURE__ */ jsxRuntime.jsx(MinusCircleFilled, { style: { color, fontSize: iconFontSize } });
+    case index$1.STATE.warning: {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiExclamationCircle, { size: iconSize, style: { color } });
+    }
+    case index$1.STATE.error: {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiXCircle, { size: iconSize, style: { color } });
+    }
+    case index$1.STATE.success: {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$3.FaCircleCheck, { size: iconSize, style: { color } });
+    }
+    case index$1.STATE.progress: {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiClock, { size: iconSize, style: { color } });
+    }
+    case index$1.STATE.removed: {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiMinusCircle, { size: iconSize, style: { color } });
+    }
     case index$1.STATE.info:
-    default:
-      return /* @__PURE__ */ jsxRuntime.jsx(index.PiInfoFill, { style: { color, fontSize: iconFontSize } });
+    default: {
+      return /* @__PURE__ */ jsxRuntime.jsx(index.PiInfoFill, { size: iconSize, style: { color } });
+    }
   }
 };
 exports.getBadgeStateIcon = getBadgeStateIcon;

package/dist/utils/icon-util.js

@@ -1,46 +1,48 @@
 import { jsx } from "react/jsx-runtime";
 import { STATE } from "../constants/index.js";
 import { FaCircleCheck } from "../node_modules/react-icons/fa6/index.js";
-import { HiOutlineCheckCircle, HiOutlineGlobe } from "../node_modules/react-icons/hi/index.js";
+import { HiOutlineMinusCircle, HiOutlineClock, HiOutlineCheckCircle, HiOutlineXCircle, HiOutlineExclamationCircle, HiMinusCircle, HiClock, HiXCircle, HiExclamationCircle, HiOutlineGlobe } from "../node_modules/react-icons/hi/index.js";
 import { PiInfo, PiInfoFill } from "../node_modules/react-icons/pi/index.js";
 import { TbFiles } from "../node_modules/react-icons/tb/index.js";
 import { LuTag } from "../node_modules/react-icons/lu/index.js";
-import RefIcon from "../node_modules/@ant-design/icons/es/icons/MinusCircleOutlined.js";
-import RefIcon$1 from "../node_modules/@ant-design/icons/es/icons/ClockCircleOutlined.js";
-import RefIcon$2 from "../node_modules/@ant-design/icons/es/icons/CloseCircleOutlined.js";
-import RefIcon$3 from "../node_modules/@ant-design/icons/es/icons/ExclamationCircleOutlined.js";
-import RefIcon$4 from "../node_modules/@ant-design/icons/es/icons/MinusCircleFilled.js";
-import RefIcon$5 from "../node_modules/@ant-design/icons/es/icons/ClockCircleFilled.js";
-import RefIcon$6 from "../node_modules/@ant-design/icons/es/icons/CloseCircleFilled.js";
-import RefIcon$7 from "../node_modules/@ant-design/icons/es/icons/ExclamationCircleFilled.js";
-const iconFontSize = 16;
+const iconSize = 18;
 const getIcon = (name) => {
   switch (name.toLowerCase()) {
-    case "orders":
+    case "orders": {
       return /* @__PURE__ */ jsx(LuTag, {});
-    case "warehouse":
+    }
+    case "warehouse": {
       return /* @__PURE__ */ jsx(HiOutlineGlobe, {});
-    case "availability":
+    }
+    case "availability": {
       return /* @__PURE__ */ jsx(TbFiles, {});
-    default:
+    }
+    default: {
       return null;
+    }
   }
 };
 const getIconColor = (state, theme) => {
   switch (state) {
-    case STATE.error:
+    case STATE.error: {
       return theme.colors.status.error.onsurface;
-    case STATE.success:
+    }
+    case STATE.success: {
       return theme.colors.status.success.onsurface;
-    case STATE.warning:
+    }
+    case STATE.warning: {
       return theme.colors.status.warning.default;
-    case STATE.removed:
+    }
+    case STATE.removed: {
       return theme.colors.status.generic.default;
-    case STATE.progress:
+    }
+    case STATE.progress: {
       return theme.colors.timebox.evening.default;
+    }
     case STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
@@ -53,41 +55,48 @@ const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, custom
   if (!isFilled) {
     switch (state) {
       // isFilled is false
-      case STATE.warning:
-        return /* @__PURE__ */ jsx(
-          RefIcon$3,
-          {
-            style: { color, fontSize: iconFontSize }
-          }
-        );
-      case STATE.error:
-        return /* @__PURE__ */ jsx(RefIcon$2, { style: { color, fontSize: iconFontSize } });
-      case STATE.success:
-        return /* @__PURE__ */ jsx(HiOutlineCheckCircle, { style: { color, fontSize: iconFontSize } });
-      case STATE.progress:
-        return /* @__PURE__ */ jsx(RefIcon$1, { style: { color, fontSize: iconFontSize } });
-      case STATE.removed:
-        return /* @__PURE__ */ jsx(RefIcon, { style: { color, fontSize: iconFontSize } });
+      case STATE.warning: {
+        return /* @__PURE__ */ jsx(HiOutlineExclamationCircle, { size: iconSize, style: { color } });
+      }
+      case STATE.error: {
+        return /* @__PURE__ */ jsx(HiOutlineXCircle, { size: iconSize, style: { color } });
+      }
+      case STATE.success: {
+        return /* @__PURE__ */ jsx(HiOutlineCheckCircle, { size: iconSize, style: { color } });
+      }
+      case STATE.progress: {
+        return /* @__PURE__ */ jsx(HiOutlineClock, { size: iconSize, style: { color } });
+      }
+      case STATE.removed: {
+        return /* @__PURE__ */ jsx(HiOutlineMinusCircle, { size: iconSize, style: { color } });
+      }
       case STATE.info:
-      default:
-        return /* @__PURE__ */ jsx(PiInfo, { style: { color, fontSize: iconFontSize } });
+      default: {
+        return /* @__PURE__ */ jsx(PiInfo, { size: iconSize, style: { color } });
+      }
     }
   }
   switch (state) {
     // isFilled is true
-    case STATE.warning:
-      return /* @__PURE__ */ jsx(RefIcon$7, { style: { color, fontSize: iconFontSize } });
-    case STATE.error:
-      return /* @__PURE__ */ jsx(RefIcon$6, { style: { color, fontSize: iconFontSize } });
-    case STATE.success:
-      return /* @__PURE__ */ jsx(FaCircleCheck, { style: { color, fontSize: iconFontSize } });
-    case STATE.progress:
-      return /* @__PURE__ */ jsx(RefIcon$5, { style: { color, fontSize: iconFontSize } });
-    case STATE.removed:
-      return /* @__PURE__ */ jsx(RefIcon$4, { style: { color, fontSize: iconFontSize } });
+    case STATE.warning: {
+      return /* @__PURE__ */ jsx(HiExclamationCircle, { size: iconSize, style: { color } });
+    }
+    case STATE.error: {
+      return /* @__PURE__ */ jsx(HiXCircle, { size: iconSize, style: { color } });
+    }
+    case STATE.success: {
+      return /* @__PURE__ */ jsx(FaCircleCheck, { size: iconSize, style: { color } });
+    }
+    case STATE.progress: {
+      return /* @__PURE__ */ jsx(HiClock, { size: iconSize, style: { color } });
+    }
+    case STATE.removed: {
+      return /* @__PURE__ */ jsx(HiMinusCircle, { size: iconSize, style: { color } });
+    }
     case STATE.info:
-    default:
-      return /* @__PURE__ */ jsx(PiInfoFill, { style: { color, fontSize: iconFontSize } });
+    default: {
+      return /* @__PURE__ */ jsx(PiInfoFill, { size: iconSize, style: { color } });
+    }
   }
 };
 export {

package/dist/utils/styled.d.ts

@@ -1,6 +1 @@
-import { default as styled, createGlobalStyle as styledCreateGlobalStyle, ThemeProvider as styledThemeProvider, useTheme as styledUseTheme, css as styledCss } from 'styled-components';
-export declare const createGlobalStyle: typeof styledCreateGlobalStyle;
-export declare const ThemeProvider: typeof styledThemeProvider;
-export declare const useTheme: typeof styledUseTheme;
-export declare const css: typeof styledCss;
-export default styled;
+export { default, createGlobalStyle, useTheme, ThemeProvider, css, } from 'styled-components';

package/dist/utils/user-util.cjs

@@ -6,8 +6,8 @@ const createInitials = (user) => {
   }
   const firstName = (_a = user == null ? void 0 : user.first_name) == null ? void 0 : _a.trim();
   const lastName = (_b = user == null ? void 0 : user.last_name) == null ? void 0 : _b.trim();
-  const sanitizedFirstName = firstName.replace(/[^a-zA-Z]/g, "");
-  const sanitizedLastName = lastName.replace(/[^a-zA-Z]/g, "");
+  const sanitizedFirstName = firstName.replaceAll(/[^A-Za-z]/g, "");
+  const sanitizedLastName = lastName.replaceAll(/[^A-Za-z]/g, "");
   const userInitials = firstName && lastName ? `${sanitizedFirstName.charAt(0).toUpperCase()}${sanitizedLastName.charAt(0).toUpperCase()}` : "";
   return userInitials;
 };

package/dist/utils/user-util.js

@@ -5,8 +5,8 @@ const createInitials = (user) => {
   }
   const firstName = (_a = user == null ? void 0 : user.first_name) == null ? void 0 : _a.trim();
   const lastName = (_b = user == null ? void 0 : user.last_name) == null ? void 0 : _b.trim();
-  const sanitizedFirstName = firstName.replace(/[^a-zA-Z]/g, "");
-  const sanitizedLastName = lastName.replace(/[^a-zA-Z]/g, "");
+  const sanitizedFirstName = firstName.replaceAll(/[^A-Za-z]/g, "");
+  const sanitizedLastName = lastName.replaceAll(/[^A-Za-z]/g, "");
   const userInitials = firstName && lastName ? `${sanitizedFirstName.charAt(0).toUpperCase()}${sanitizedLastName.charAt(0).toUpperCase()}` : "";
   return userInitials;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.2.20",
+  "version": "0.3.0",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",
@@ -78,10 +78,11 @@
     }
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.27.1",
     "@changesets/cli": "^2.27.8",
     "@eslint/config-array": "latest",
     "@eslint/object-schema": "latest",
-    "@fontsource/inter": "^5.1.1",
+    "@fontsource/inter": "^5.2.5",
     "@fontsource/roboto-mono": "^5.1.1",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -115,9 +116,14 @@
     "@vitest/ui": "^3.0.8",
     "chalk": "^5.4.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-unicorn": "^48.0.1",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
     "jest-styled-components": "^7.2.0",
@@ -143,6 +149,7 @@
     "@ant-design/icons": "^5.5.2",
     "@mdx-js/react": "^3.0.1",
     "@secondcloset/types": "^3.4.6",
+    "@types/socket.io-client": "^1.4.36",
     "antd": "^5.23.1",
     "clsx": "^1.2.1",
     "date-fns": "^3.6.0",
@@ -150,9 +157,11 @@
     "debounce": "^2.2.0",
     "react-error-boundary": "^4.0.11",
     "react-icons": "^5.5.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.2.0",
     "react-toastify": "^11.0.3",
     "recharts": "^2.15.1",
+    "socket.io-client": "^4.8.1",
     "styled-components": "^6.0.0",
     "typescript": "^5.2.2"
   },