@gobolt/genesis 0.2.20 → 0.3.0

package/dist/components/Input/Input.cjs

@@ -8,23 +8,40 @@ var index = require("../../node_modules/antd/es/select/index.cjs");
 const Input = ({
   state = index$1.STATE.active,
   size = "normal",
+  onChange,
+  value,
   ...rest
 }) => {
   const { type, ...validRest } = rest;
   const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === index ? React.cloneElement(rest.addonAfter, {
     suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {})
   }) : rest.addonAfter;
+  const handleChange = React.useCallback(
+    (e) => {
+      if (onChange) {
+        onChange({
+          event: "inputChange",
+          payload: {
+            value: e.target.value
+          }
+        });
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     styles.Input,
     {
+      ...validRest,
       size,
       state,
       disabled: state === "disabled" || rest.disabled,
-      ...validRest,
       addonAfter,
       style: {
         height: size === "normal" || size === "large" ? "40px" : "32px"
-      }
+      },
+      onChange: handleChange,
+      value
     }
   );
 };

package/dist/components/Input/Input.d.ts

@@ -1,8 +1,12 @@
 import { STATE } from '../../constants';
-import { InputProps as AntInputProps } from 'antd';
-export interface InputProps extends Omit<AntInputProps, "size"> {
+import { InputProps as AntInputProperties } from 'antd';
+import { ActionEvent } from '../Table/Table';
+type BaseInputProps = Omit<AntInputProperties, "size" | "onChange" | "value">;
+export interface InputProps extends BaseInputProps {
     state?: keyof typeof STATE;
     size?: "normal" | "small" | "large";
+    onChange?: (actionEvent: ActionEvent) => void;
+    value?: string;
 }
-declare const Input: ({ state, size, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ state, size, onChange, value, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -7,23 +7,40 @@ import Select from "../../node_modules/antd/es/select/index.js";
 const Input = ({
   state = STATE.active,
   size = "normal",
+  onChange,
+  value,
   ...rest
 }) => {
   const { type, ...validRest } = rest;
   const addonAfter = React__default.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select ? React__default.cloneElement(rest.addonAfter, {
     suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {})
   }) : rest.addonAfter;
+  const handleChange = React__default.useCallback(
+    (e) => {
+      if (onChange) {
+        onChange({
+          event: "inputChange",
+          payload: {
+            value: e.target.value
+          }
+        });
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsx(
     Input$1,
     {
+      ...validRest,
       size,
       state,
       disabled: state === "disabled" || rest.disabled,
-      ...validRest,
       addonAfter,
       style: {
         height: size === "normal" || size === "large" ? "40px" : "32px"
-      }
+      },
+      onChange: handleChange,
+      value
     }
   );
 };

package/dist/components/Input/styles.cjs

@@ -37,7 +37,7 @@ const getStateColors = (colors, type, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
+const getGenesisInputClass = ({ colors, borderRadius, components, shadows }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
   const stateColors = getStateColors(colors, type, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
@@ -53,7 +53,17 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
         font-family: 'Inter', sans-serif;
         color: ${stateColors.color};
         border-color: ${stateColors.borderColor};
-        height: ${size === "normal" || size === "large" ? "40px" : "32px !important"};
+        box-shadow: ${shadows.inputs[1]} !important;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"} !important;
+    }
+
+    /* Increase specificity for focus states */
+    &.ant-input.ant-input:focus,
+    &.ant-input.ant-input:focus-visible,
+    &.ant-input.ant-input-focused {
+      outline: none !important;
+      border-color: ${colors[type].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor} !important;
     }
 
     &.ant-input-outlined {
@@ -62,11 +72,6 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
       &:hover {
         border-color: ${stateColors.borderColor};
       }
-
-      &:focus {
-        border-color: black;
-        box-shadow: none;
-      }
     }
 
     .ant-input-group & {
@@ -130,11 +135,37 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
     }
 
     &.ant-input-group-wrapper {
-      .ant-input-group-addon {
-        padding-left: ${components.input.suffixPrefixHorPadding};
-        padding-right: ${components.input.suffixPrefixHorPadding};
-        padding-top: ${components.input.suffixPrefixVerPadding};
-        padding-bottom: ${components.input.suffixPrefixVerPadding};
+      .ant-input-group {
+        display: flex;
+        align-items: center;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"};
+
+        .ant-input {
+          height: 100% !important;
+        }
+
+        .ant-input-group-addon {
+          padding: 0 ${components.input.suffixPrefixHorPadding};
+          height: 100%;
+          display: flex;
+          align-items: center;
+          min-width: fit-content;
+          width: auto;
+          
+          > * {
+            width: 100%;
+          }
+          
+          .ant-select {
+            height: 100%;
+            
+            .ant-select-selector {
+              height: 100%;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
       }
     }
   `;

package/dist/components/Input/styles.d.ts

@@ -1,12 +1,13 @@
-import { InputProps as AntInputProps } from 'antd';
+import { InputProps as AntInputProperties } from 'antd';
 import { STATE } from '../../constants';
-interface InputStyledProps extends Omit<AntInputProps, "size"> {
+interface InputStyledProperties extends Omit<AntInputProperties, "size"> {
     state?: keyof typeof STATE;
     size?: "normal" | "small" | "large";
+    value?: string;
 }
-export declare const Input: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntInputProps & import('react').RefAttributes<import('rc-input').InputRef>, "ref"> & {
+export declare const Input: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntInputProperties & import('react').RefAttributes<import('rc-input').InputRef>, "ref"> & {
     ref?: import('react').Ref<import('rc-input').InputRef>;
-}, InputStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<AntInputProps & import('react').RefAttributes<import('rc-input').InputRef>> & {
+}, InputStyledProperties>> & string & Omit<import('react').ForwardRefExoticComponent<AntInputProperties & import('react').RefAttributes<import('rc-input').InputRef>> & {
     Group: import('react').FC<import('antd/es/input').GroupProps>;
     Search: import('react').ForwardRefExoticComponent<import('antd/es/input').SearchProps & import('react').RefAttributes<import('rc-input').InputRef>>;
     TextArea: import('react').ForwardRefExoticComponent<import('antd/es/input').TextAreaProps & import('react').RefAttributes<import('antd/es/input/TextArea').TextAreaRef>>;

package/dist/components/Input/styles.js

@@ -36,7 +36,7 @@ const getStateColors = (colors, type, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
+const getGenesisInputClass = ({ colors, borderRadius, components, shadows }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
   const stateColors = getStateColors(colors, type, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
@@ -52,7 +52,17 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
         font-family: 'Inter', sans-serif;
         color: ${stateColors.color};
         border-color: ${stateColors.borderColor};
-        height: ${size === "normal" || size === "large" ? "40px" : "32px !important"};
+        box-shadow: ${shadows.inputs[1]} !important;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"} !important;
+    }
+
+    /* Increase specificity for focus states */
+    &.ant-input.ant-input:focus,
+    &.ant-input.ant-input:focus-visible,
+    &.ant-input.ant-input-focused {
+      outline: none !important;
+      border-color: ${colors[type].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor} !important;
     }
 
     &.ant-input-outlined {
@@ -61,11 +71,6 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
       &:hover {
         border-color: ${stateColors.borderColor};
       }
-
-      &:focus {
-        border-color: black;
-        box-shadow: none;
-      }
     }
 
     .ant-input-group & {
@@ -129,11 +134,37 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
     }
 
     &.ant-input-group-wrapper {
-      .ant-input-group-addon {
-        padding-left: ${components.input.suffixPrefixHorPadding};
-        padding-right: ${components.input.suffixPrefixHorPadding};
-        padding-top: ${components.input.suffixPrefixVerPadding};
-        padding-bottom: ${components.input.suffixPrefixVerPadding};
+      .ant-input-group {
+        display: flex;
+        align-items: center;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"};
+
+        .ant-input {
+          height: 100% !important;
+        }
+
+        .ant-input-group-addon {
+          padding: 0 ${components.input.suffixPrefixHorPadding};
+          height: 100%;
+          display: flex;
+          align-items: center;
+          min-width: fit-content;
+          width: auto;
+          
+          > * {
+            width: 100%;
+          }
+          
+          .ant-select {
+            height: 100%;
+            
+            .ant-select-selector {
+              height: 100%;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
       }
     }
   `;

package/dist/components/Layout/Content/ResponsiveContent.d.ts

@@ -1,7 +1,7 @@
-export interface ResponsiveContentProps {
+export interface ResponsiveContentProperties {
     total?: number;
     backgroundColor?: string;
     isSidebar?: boolean;
 }
-declare const ResponsiveContent: ({ total, backgroundColor, isSidebar, }: ResponsiveContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const ResponsiveContent: ({ total, backgroundColor, isSidebar, }: ResponsiveContentProperties) => import("react/jsx-runtime").JSX.Element;
 export default ResponsiveContent;

package/dist/components/Layout/Content/styles.d.ts

@@ -1,10 +1,10 @@
 import { GenesisTheme } from '../../../styles/theme/genesis-theme.types';
-interface StyledContentProps {
+interface StyledContentProperties {
     theme?: GenesisTheme;
     $isColumn?: boolean;
 }
 export declare const getGenesisClass: ({ sizing }: {
     sizing: any;
 }, $isColumn: any) => string;
-export declare const Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentProps>> & string;
+export declare const Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentProperties>> & string;
 export {};

package/dist/components/Message/Message.cjs

@@ -2,7 +2,7 @@
 var jsxRuntime = require("react/jsx-runtime");
 var React = require("react");
 var index = require("../../constants/index.cjs");
-var styled = require("../../utils/styled.cjs");
+var styled = require("styled-components");
 var styles = require("./styles.cjs");
 var Typography = require("../Typography/Typography.cjs");
 var InfoCircleOutlined = require("../../node_modules/@ant-design/icons/es/icons/InfoCircleOutlined.cjs");
@@ -12,32 +12,42 @@ var CloseCircleOutlined = require("../../node_modules/@ant-design/icons/es/icons
 var ExclamationCircleOutlined = require("../../node_modules/@ant-design/icons/es/icons/ExclamationCircleOutlined.cjs");
 const getIconColor = (state, theme) => {
   switch (state) {
-    case index.STATE.error:
+    case index.STATE.error: {
       return theme.colors.status.error.onsurface;
-    case index.STATE.success:
+    }
+    case index.STATE.success: {
       return theme.colors.status.success.onsurface;
-    case index.STATE.warning:
+    }
+    case index.STATE.warning: {
       return theme.colors.status.warning.onsurface;
-    case index.STATE.generic:
+    }
+    case index.STATE.generic: {
       return theme.colors.status.generic.onsurface;
+    }
     case index.STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const getIcon = (state, color) => {
   switch (state) {
-    case index.STATE.warning:
+    case index.STATE.warning: {
       return /* @__PURE__ */ jsxRuntime.jsx(ExclamationCircleOutlined, { style: { color } });
-    case index.STATE.error:
+    }
+    case index.STATE.error: {
       return /* @__PURE__ */ jsxRuntime.jsx(CloseCircleOutlined, { style: { color } });
-    case index.STATE.success:
+    }
+    case index.STATE.success: {
       return /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlined, { style: { color } });
-    case index.STATE.generic:
+    }
+    case index.STATE.generic: {
       return /* @__PURE__ */ jsxRuntime.jsx(MinusCircleOutlined, { style: { color } });
+    }
     case index.STATE.info:
-    default:
+    default: {
       return /* @__PURE__ */ jsxRuntime.jsx(InfoCircleOutlined, { style: { color } });
+    }
   }
 };
 const Message = ({

package/dist/components/Message/Message.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { TYPOGRAPHY_VARIANT, SIZE, STATE } from "../../constants/index.js";
-import { useTheme } from "../../utils/styled.js";
+import { useTheme } from "styled-components";
 import { MessageRow, MessageContent, ActionButton } from "./styles.js";
 import Typography from "../Typography/Typography.js";
 import RefIcon from "../../node_modules/@ant-design/icons/es/icons/InfoCircleOutlined.js";
@@ -11,32 +11,42 @@ import RefIcon$3 from "../../node_modules/@ant-design/icons/es/icons/CloseCircle
 import RefIcon$4 from "../../node_modules/@ant-design/icons/es/icons/ExclamationCircleOutlined.js";
 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.onsurface;
-    case STATE.generic:
+    }
+    case STATE.generic: {
       return theme.colors.status.generic.onsurface;
+    }
     case STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const getIcon = (state, color) => {
   switch (state) {
-    case STATE.warning:
+    case STATE.warning: {
       return /* @__PURE__ */ jsx(RefIcon$4, { style: { color } });
-    case STATE.error:
+    }
+    case STATE.error: {
       return /* @__PURE__ */ jsx(RefIcon$3, { style: { color } });
-    case STATE.success:
+    }
+    case STATE.success: {
       return /* @__PURE__ */ jsx(RefIcon$2, { style: { color } });
-    case STATE.generic:
+    }
+    case STATE.generic: {
       return /* @__PURE__ */ jsx(RefIcon$1, { style: { color } });
+    }
     case STATE.info:
-    default:
+    default: {
       return /* @__PURE__ */ jsx(RefIcon, { style: { color } });
+    }
   }
 };
 const Message = ({

package/dist/components/Notification/Notification.cjs

@@ -2,7 +2,7 @@
 var jsxRuntime = require("react/jsx-runtime");
 var index = require("../../constants/index.cjs");
 var NotificationBadge = require("./NotificationBadge/NotificationBadge.cjs");
-var styled = require("../../utils/styled.cjs");
+var styled = require("styled-components");
 var styles = require("./styles.cjs");
 var NotificationRightChevron = require("./NotificationRightChevron.cjs");
 var format = require("../../node_modules/date-fns/format.cjs");
@@ -11,17 +11,22 @@ var Typography = require("../Typography/Typography.cjs");
 var Button = require("../Button/Button.cjs");
 const getIconColor = (state, theme) => {
   switch (state) {
-    case index.STATE.warning:
+    case index.STATE.warning: {
       return theme.colors.status.warning.onsurface;
-    case index.STATE.error:
+    }
+    case index.STATE.error: {
       return theme.colors.status.error.onsurface;
-    case index.STATE.success:
+    }
+    case index.STATE.success: {
       return theme.colors.status.success.onsurface;
-    case index.STATE.generic:
+    }
+    case index.STATE.generic: {
       return theme.colors.status.generic.onsurface;
+    }
     case index.STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const Notification = ({

package/dist/components/Notification/Notification.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { SIZE, TYPOGRAPHY_VARIANT, STATE } from "../../constants/index.js";
 import NotificationBadge from "./NotificationBadge/NotificationBadge.js";
-import { useTheme } from "../../utils/styled.js";
+import { useTheme } from "styled-components";
 import { NotificationRow, NotificationUnread, NotificationContent, ChevronButton } from "./styles.js";
 import NotificationRightChevron from "./NotificationRightChevron.js";
 import { formatDate as format } from "../../node_modules/date-fns/format.js";
@@ -10,17 +10,22 @@ import Typography from "../Typography/Typography.js";
 import Button from "../Button/Button.js";
 const getIconColor = (state, theme) => {
   switch (state) {
-    case STATE.warning:
+    case STATE.warning: {
       return theme.colors.status.warning.onsurface;
-    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.generic:
+    }
+    case STATE.generic: {
       return theme.colors.status.generic.onsurface;
+    }
     case STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const Notification = ({

package/dist/components/Notification/NotificationBadge/NotificationBadge.cjs

@@ -10,30 +10,39 @@ var Shipment = require("./icons/Shipment.cjs");
 var ShoppingCart = require("./icons/ShoppingCart.cjs");
 var System = require("./icons/System.cjs");
 var index = require("../../../constants/index.cjs");
-var styled = require("../../../utils/styled.cjs");
+var styled = require("styled-components");
 var styles = require("./styles.cjs");
 var iconUtil = require("../../../utils/icon-util.cjs");
 const getBagde = (badge) => {
   switch (badge) {
-    case index.BADGE.appointment:
+    case index.BADGE.appointment: {
       return /* @__PURE__ */ jsxRuntime.jsx(Appointment, {});
-    case index.BADGE.asn:
+    }
+    case index.BADGE.asn: {
       return /* @__PURE__ */ jsxRuntime.jsx(ASN, {});
-    case index.BADGE.inventory:
+    }
+    case index.BADGE.inventory: {
       return /* @__PURE__ */ jsxRuntime.jsx(Inventory, {});
-    case index.BADGE.parcel:
+    }
+    case index.BADGE.parcel: {
       return /* @__PURE__ */ jsxRuntime.jsx(Parcel, {});
-    case index.BADGE.product:
+    }
+    case index.BADGE.product: {
       return /* @__PURE__ */ jsxRuntime.jsx(Product, {});
-    case index.BADGE.route:
+    }
+    case index.BADGE.route: {
       return /* @__PURE__ */ jsxRuntime.jsx(Route, {});
-    case index.BADGE.shipment:
+    }
+    case index.BADGE.shipment: {
       return /* @__PURE__ */ jsxRuntime.jsx(Shipment, {});
-    case index.BADGE.shoppingCart:
+    }
+    case index.BADGE.shoppingCart: {
       return /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {});
+    }
     case index.BADGE.system:
-    default:
+    default: {
       return /* @__PURE__ */ jsxRuntime.jsx(System, {});
+    }
   }
 };
 const NotificationBadge = ({

package/dist/components/Notification/NotificationBadge/NotificationBadge.js

@@ -9,30 +9,39 @@ import Shipment from "./icons/Shipment.js";
 import ShoppingCart from "./icons/ShoppingCart.js";
 import System from "./icons/System.js";
 import { STATE, BADGE } from "../../../constants/index.js";
-import { useTheme } from "../../../utils/styled.js";
+import { useTheme } from "styled-components";
 import { BadgeWrapper, Badge, BadgeState } from "./styles.js";
 import { getIconColor, getBadgeStateIcon } from "../../../utils/icon-util.js";
 const getBagde = (badge) => {
   switch (badge) {
-    case BADGE.appointment:
+    case BADGE.appointment: {
       return /* @__PURE__ */ jsx(Appointment, {});
-    case BADGE.asn:
+    }
+    case BADGE.asn: {
       return /* @__PURE__ */ jsx(SvgComponent$1, {});
-    case BADGE.inventory:
+    }
+    case BADGE.inventory: {
       return /* @__PURE__ */ jsx(Inventory, {});
-    case BADGE.parcel:
+    }
+    case BADGE.parcel: {
       return /* @__PURE__ */ jsx(Parcel, {});
-    case BADGE.product:
+    }
+    case BADGE.product: {
       return /* @__PURE__ */ jsx(SvgComponent, {});
-    case BADGE.route:
+    }
+    case BADGE.route: {
       return /* @__PURE__ */ jsx(Route, {});
-    case BADGE.shipment:
+    }
+    case BADGE.shipment: {
       return /* @__PURE__ */ jsx(Shipment, {});
-    case BADGE.shoppingCart:
+    }
+    case BADGE.shoppingCart: {
       return /* @__PURE__ */ jsx(ShoppingCart, {});
+    }
     case BADGE.system:
-    default:
+    default: {
       return /* @__PURE__ */ jsx(System, {});
+    }
   }
 };
 const NotificationBadge = ({

package/dist/components/Notification/NotificationBadge/icons/ASN.cjs

@@ -1,13 +1,13 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
-const SvgComponent = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+const SvgComponent = (properties) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
-    ...props,
+    ...properties,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {

package/dist/components/Notification/NotificationBadge/icons/ASN.d.ts

@@ -1,2 +1,2 @@
-declare const SvgComponent: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const SvgComponent: (properties: any) => import("react/jsx-runtime").JSX.Element;
 export default SvgComponent;

package/dist/components/Notification/NotificationBadge/icons/ASN.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-const SvgComponent = (props) => /* @__PURE__ */ jsx(
+const SvgComponent = (properties) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
-    ...props,
+    ...properties,
     children: /* @__PURE__ */ jsx(
       "path",
       {