@gobolt/genesis 0.3.22 → 0.3.23

package/dist/components/Badge/Badge.js

@@ -1,28 +1,51 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as S from "./styles";
 import { Typography } from "@gobolt/genesis/components";
 import { useGenesis } from "@gobolt/genesis/providers";
 import { getBadgeStateIcon } from "@gobolt/genesis/utils/icon-util";
 import { HiOutlineX } from "react-icons/hi";
-const isBadgeIconFilled = false;
-const Badge = ({ label, state = "info", isDisabled, hasClose = false, onClick = () => { }, size = "normal", hasIcon = true, customIcon = null, backgroundColor = null, textColor = null, hasHover = false, ...rest }) => {
-    const { theme } = useGenesis();
-    const role = hasClose ? "button" : "badge";
+var isBadgeIconFilled = false;
+var Badge = function (_a) {
+    var label = _a.label, _b = _a.state, state = _b === void 0 ? "info" : _b, isDisabled = _a.isDisabled, _c = _a.hasClose, hasClose = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, _f = _a.hasIcon, hasIcon = _f === void 0 ? true : _f, _g = _a.customIcon, customIcon = _g === void 0 ? null : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? null : _h, _j = _a.textColor, textColor = _j === void 0 ? null : _j, _k = _a.hasHover, hasHover = _k === void 0 ? false : _k, rest = __rest(_a, ["label", "state", "isDisabled", "hasClose", "onClick", "size", "hasIcon", "customIcon", "backgroundColor", "textColor", "hasHover"]);
+    var theme = useGenesis().theme;
+    var role = hasClose ? "button" : "badge";
     if (!label) {
-        return (_jsx(S.Badge, { label: label, role: "badge", state: state, disabled: isDisabled, style: {
+        return (_jsx(S.Badge, __assign({ label: label, role: "badge", state: state, disabled: isDisabled, style: {
                 padding: "4px 4px",
-            }, "$hasHover": hasHover, ...rest, children: _jsx("div", { style: {
+            }, "$hasHover": hasHover }, rest, { children: _jsx("div", { style: {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: getBadgeStateIcon(state, backgroundColor || theme.colors.status[state].onsurface, isBadgeIconFilled, hasIcon, customIcon) }) }));
+                }, children: getBadgeStateIcon(state, backgroundColor || theme.colors.status[state].onsurface, isBadgeIconFilled, hasIcon, customIcon) }) })));
     }
-    return (_jsxs(S.Badge, { label: label, role: role, onClick: onClick, state: state, disabled: isDisabled, style: { cursor: role === "button" ? "pointer" : "default" }, "$backgroundColor": backgroundColor, "$hasHover": hasHover, ...rest, children: [getBadgeStateIcon(state, isDisabled
+    return (_jsxs(S.Badge, __assign({ label: label, role: role, onClick: onClick, state: state, disabled: isDisabled, style: { cursor: role === "button" ? "pointer" : "default" }, "$backgroundColor": backgroundColor, "$hasHover": hasHover }, rest, { children: [getBadgeStateIcon(state, isDisabled
                 ? theme.colors.status.disabled.default
                 : textColor || theme.colors.status[state].onsurface, isBadgeIconFilled, hasIcon, customIcon), _jsx(Typography, { variant: size === "small" ? "label3" : "label2", color: isDisabled
                     ? theme.colors.status.disabled.default
                     : textColor || theme.colors.status[state].onsurface, 
                 // @ts-ignore
-                isDisabled: isDisabled, children: label }), hasClose ? (_jsx(HiOutlineX, { color: theme.colors.status[state].onsurface })) : null] }));
+                isDisabled: isDisabled, children: label }), hasClose ? (_jsx(HiOutlineX, { color: theme.colors.status[state].onsurface })) : null] })));
 };
 export default Badge;

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

@@ -1,4 +1,13 @@
 import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
 import { type State } from "./Badge";
+interface StyledBadgeProperties {
+    theme?: GenesisTheme;
+    state?: State;
+    label?: string;
+    disabled?: boolean;
+    $backgroundColor?: string;
+    $hasHover?: boolean;
+}
 export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, $backgroundColor?: string, $hasHover?: boolean) => string;
-export declare const Badge: any;
+export declare const Badge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProperties>> & string;
+export {};

package/dist/components/Badge/styles.js

@@ -1,46 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from "@gobolt/genesis/utils/styled";
-const getBorderColor = (theme, state) => {
+var getBorderColor = function (theme, state) {
     if (state === "hollow") {
         return theme.colors.inputs.surface.border;
     }
     return theme.colors.status[state].surface;
 };
-export const getGenesisClass = (theme, state, label, disabled, $backgroundColor, $hasHover) => `
-  display: inline-flex; 
-  align-self: inherit;
-  gap: 4px;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding-top: ${theme.components.badge["ver-padding"]}px;
-  padding-bottom: ${theme.components.badge["ver-padding"]}px;
-  padding-left: ${theme.components.badge["left-padding"]}px;
-  padding-right: ${theme.components.badge["right-padding"]}px;
-  border-radius: ${theme.components.badge.radius}px;
-  border: 1px solid ${getBorderColor(theme, state)};
-  background-color: ${$backgroundColor || theme.colors.status[state].surface};
-
-  &:not(:disabled):hover {
-    ${$hasHover
-    ? `background-color: ${theme.colors.status[state]["surface-hover"]};`
-    : ""}
-  }
-
-  ${disabled
-    ? `
-    background-color: ${theme.colors.status.disabled.surface} !important;
-    border-color: ${theme.colors.status.disabled} !important;
-    border: none;
-    cursor: not-allowed;
-
-    &:hover {
-      cursor: not-allowed;
-    }
-  `
-    : ""}
-`;
-export const Badge = styled.div `
-  ${({ theme, state, label, disabled, $backgroundColor, $hasHover, }) => {
+export var getGenesisClass = function (theme, state, label, disabled, $backgroundColor, $hasHover) { return "\n  display: inline-flex; \n  align-self: inherit;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-top: ".concat(theme.components.badge["ver-padding"], "px;\n  padding-bottom: ").concat(theme.components.badge["ver-padding"], "px;\n  padding-left: ").concat(theme.components.badge["left-padding"], "px;\n  padding-right: ").concat(theme.components.badge["right-padding"], "px;\n  border-radius: ").concat(theme.components.badge.radius, "px;\n  border: 1px solid ").concat(getBorderColor(theme, state), ";\n  background-color: ").concat($backgroundColor || theme.colors.status[state].surface, ";\n\n  &:not(:disabled):hover {\n    ").concat($hasHover
+    ? "background-color: ".concat(theme.colors.status[state]["surface-hover"], ";")
+    : "", "\n  }\n\n  ").concat(disabled
+    ? "\n    background-color: ".concat(theme.colors.status.disabled.surface, " !important;\n    border-color: ").concat(theme.colors.status.disabled, " !important;\n    border: none;\n    cursor: not-allowed;\n\n    &:hover {\n      cursor: not-allowed;\n    }\n  ")
+    : "", "\n"); };
+export var Badge = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, state = _a.state, label = _a.label, disabled = _a.disabled, $backgroundColor = _a.$backgroundColor, $hasHover = _a.$hasHover;
     return getGenesisClass(theme, state, label, disabled, $backgroundColor, $hasHover);
-}}
-`;
+});
+var templateObject_1;

package/dist/components/Button/Button.js

@@ -1,13 +1,36 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as S from "./styles";
-const getState = (state, isSelected) => {
+var getState = function (state, isSelected) {
     if (isSelected) {
         return "selected";
     }
     return state === "active" || state === "disabled" ? state : "active";
 };
-const Button = ({ children, onClick, themeType = "primary", state = "active", isIconButton = false, size = "normal", isSelected, ...rest }) => {
-    const buttonState = getState(state, isSelected);
-    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, "$isIconButton": isIconButton, size: size, ...rest, children: children }));
+var Button = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.themeType, themeType = _b === void 0 ? "primary" : _b, _c = _a.state, state = _c === void 0 ? "active" : _c, _d = _a.isIconButton, isIconButton = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, isSelected = _a.isSelected, rest = __rest(_a, ["children", "onClick", "themeType", "state", "isIconButton", "size", "isSelected"]);
+    var buttonState = getState(state, isSelected);
+    return (_jsx(S.Button, __assign({ onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, "$isIconButton": isIconButton, size: size }, rest, { children: children })));
 };
 export default Button;

package/dist/components/Button/IconButton.js

@@ -1,9 +1,32 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as S from "./icon-button-styles";
 import { TYPE } from "../../constants";
-const IconButton = ({ isSelected = false, state = "active", onClick, icon, size = "small", ...rest }) => {
-    const buttonState = state === "active" || state === "disabled" ? state : "active";
-    const themeType = TYPE.icon;
-    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, size: size, "$isSelected": isSelected, ...rest, children: icon }));
+var IconButton = function (_a) {
+    var _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, _c = _a.state, state = _c === void 0 ? "active" : _c, onClick = _a.onClick, icon = _a.icon, _d = _a.size, size = _d === void 0 ? "small" : _d, rest = __rest(_a, ["isSelected", "state", "onClick", "icon", "size"]);
+    var buttonState = state === "active" || state === "disabled" ? state : "active";
+    var themeType = TYPE.icon;
+    return (_jsx(S.Button, __assign({ onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, size: size, "$isSelected": isSelected }, rest, { children: icon })));
 };
 export default IconButton;

package/dist/components/Button/components/Button/Button.d.ts

@@ -0,0 +1,16 @@
+import React, { MouseEvent } from "react";
+import type { ButtonProps as AntButtonProperties } from "antd/es/button";
+import { STATE } from "../../constants";
+type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+export interface ButtonProps extends Omit<AntButtonProperties, "type" | "size"> {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    themeType?: ButtonThemeType;
+    state?: keyof typeof STATE;
+    isIconButton?: boolean;
+    size?: "small" | "normal" | "large";
+    isSelected?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Button/components/Button/Button.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./styles";
+const getState = (state, isSelected) => {
+    if (isSelected) {
+        return "selected";
+    }
+    return state === "active" || state === "disabled" ? state : "active";
+};
+const Button = ({ children, onClick, themeType = "primary", state = "active", isIconButton = false, size = "normal", isSelected, ...rest }) => {
+    const buttonState = getState(state, isSelected);
+    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, "$isIconButton": isIconButton, size: size, ...rest, children: children }));
+};
+export default Button;

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

@@ -0,0 +1 @@
+export declare const Button: any;

package/dist/components/Button/components/Button/styles.js

@@ -0,0 +1,118 @@
+import styled from "@gobolt/genesis/utils/styled";
+import { Button as AntButton } from "antd";
+const getPadding = (size, $themeType, sizing, $isIconButton) => {
+    if ($isIconButton && (size === "normal" || size === "large")) {
+        return `${sizing.Size2}px ${sizing.Size2}px`;
+    }
+    if ($isIconButton && size === "small") {
+        return `${sizing.Size1}px ${sizing.Size1}px`;
+    }
+    // utility button padding is different from the main button
+    if ($themeType === "utility" && size === "small") {
+        return `${sizing.Size1_5}px ${sizing.Size2}px`;
+    }
+    if ($themeType === "utility" && (size === "normal" || size === "large")) {
+        return `${sizing.Size2_5}px ${sizing.Size3}px`;
+    }
+    if (size === "small") {
+        return `${sizing.Size1_5}px ${sizing.Size4}px`;
+    }
+    if (size === "normal" || size === "large") {
+        return `${sizing.Size2_5}px ${sizing.Size6}px`;
+    }
+    return `${sizing.Size2}px ${sizing.Size2}px`;
+};
+const getHeight = (size) => {
+    if (size === "normal" || size === "large") {
+        return `40px`;
+    }
+    if (size === "small") {
+        return `32px`;
+    }
+    return `40px`;
+};
+const getWidth = (size, $isIconButton) => {
+    if (!$isIconButton) {
+        return `auto`;
+    }
+    if (size === "normal" || size === "large") {
+        return `40px`;
+    }
+    if (size === "small") {
+        return `32px`;
+    }
+    return `40px`;
+};
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isIconButton) => {
+    const backgroundColor = colors[$themeType][$state].backgroundColor;
+    return `
+      &.ant-btn {
+      
+        color: ${colors[$themeType][$state].color};
+        font-size: ${sizing.Size4}px;
+        line-height: ${sizing.Size6}px;
+        letter-spacing: 0;
+        font-weight: 400;
+        border-width: 1px;
+        line-height: 1 !important;
+
+        width: ${getWidth(size, $isIconButton)}; !important;
+        height: ${getHeight(size)}; !important;
+
+        background-color: ${colors[$themeType][$state].backgroundColor};
+        padding: ${getPadding(size, $themeType, sizing, $isIconButton)};
+
+        box-shadow: ${$themeType === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
+
+        border-radius: ${borderRadius.BorderRadiusMd}px;
+        gap: ${components.button.gap}px;
+        border-style: solid;
+        border-color: ${colors[$themeType][$state].borderColor};
+        
+        transition: all 0.2s ease-in-out;
+
+        &:hover {
+          color: ${colors[$themeType].hover.color};
+          background-color: ${colors[$themeType].hover.backgroundColor};
+          border-color: ${colors[$themeType].hover.borderColor};
+        }
+
+        &:active {
+          color: ${colors[$themeType].pressed.color};
+          background-color: ${colors[$themeType].pressed.backgroundColor};
+          border-color: ${colors[$themeType].pressed.borderColor};
+        }
+
+        &:focus-visible {
+          outline: none;
+          color: ${colors[$themeType].focussed.color};
+          background-color: ${colors[$themeType].focussed.backgroundColor};
+          box-shadow: 0 0 0 1px #fff, 0 0 0 4px ${colors[$themeType].focussed.ringColor};
+          border-radius: ${borderRadius.BorderRadiusMd}px;
+          border-color: ${colors[$themeType].focussed.borderColor};
+          transition: box-shadow 0.2s ease-in-out;
+        }
+
+        &:disabled {
+          color: ${colors[$themeType].disabled.color};
+          background-color: ${colors[$themeType].disabled.backgroundColor};
+          border-color: ${colors[$themeType].disabled.borderColor};
+          cursor: not-allowed;
+        }
+    
+      }
+        
+      `;
+};
+const getGenesisButtonClass = (theme, $themeType, $state, $isIconButton, size) => `
+    &.ant-btn {
+      font-family: 'Inter', sans-serif;
+ 
+      ${getVariant(theme, $themeType, $state, size, $isIconButton)}
+    } 
+`;
+export const Button = styled(AntButton) `
+  ${({ theme, $themeType, $state, children, $isIconButton, size }) => {
+    return getGenesisButtonClass(theme, $themeType, $state, $isIconButton, size);
+}}
+`;

package/dist/components/Button/constants/index.d.ts

@@ -0,0 +1,163 @@
+export declare const TYPE: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    destructive: string;
+    utility: string;
+    icon: string;
+};
+export declare const BREAKPOINTS: {
+    wide: string;
+    medium: string;
+    narrow: string;
+};
+export declare const STATE: {
+    active: string;
+    hover: string;
+    pressed: string;
+    focussed: string;
+    disabled: string;
+    error: string;
+    success: string;
+    warning: string;
+    progress: string;
+    info: string;
+    filled: string;
+    generic: string;
+    removed: string;
+    hollow: string;
+};
+export declare const TYPOGRAPHY_VARIANT: {
+    display1: string;
+    display2: string;
+    display3: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    subHeading1: string;
+    subHeading2: string;
+    subHeading3: string;
+    body1: string;
+    body2: string;
+    body3: string;
+    body4: string;
+    body5: string;
+    message: string;
+    overline1: string;
+    overline2: string;
+    overline3: string;
+    label1: string;
+    label2: string;
+    label3: string;
+    link1: string;
+    link2: string;
+    link3: string;
+    digits1: string;
+    digits2: string;
+    digits3: string;
+};
+export declare const BUTTON_VARIANT: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+};
+export declare const SIZE: {
+    small: string;
+    medium: string;
+    large: string;
+    standard: string;
+};
+export declare const BADGE: {
+    appointment: string;
+    asn: string;
+    inventory: string;
+    parcel: string;
+    product: string;
+    route: string;
+    shipment: string;
+    shoppingCart: string;
+    system: string;
+};
+declare const _default: {
+    TYPE: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        destructive: string;
+        utility: string;
+        icon: string;
+    };
+    BREAKPOINTS: {
+        wide: string;
+        medium: string;
+        narrow: string;
+    };
+    STATE: {
+        active: string;
+        hover: string;
+        pressed: string;
+        focussed: string;
+        disabled: string;
+        error: string;
+        success: string;
+        warning: string;
+        progress: string;
+        info: string;
+        filled: string;
+        generic: string;
+        removed: string;
+        hollow: string;
+    };
+    TYPOGRAPHY_VARIANT: {
+        display1: string;
+        display2: string;
+        display3: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        subHeading1: string;
+        subHeading2: string;
+        subHeading3: string;
+        body1: string;
+        body2: string;
+        body3: string;
+        body4: string;
+        body5: string;
+        message: string;
+        overline1: string;
+        overline2: string;
+        overline3: string;
+        label1: string;
+        label2: string;
+        label3: string;
+        link1: string;
+        link2: string;
+        link3: string;
+        digits1: string;
+        digits2: string;
+        digits3: string;
+    };
+    BUTTON_VARIANT: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    SIZE: {
+        small: string;
+        medium: string;
+        large: string;
+        standard: string;
+    };
+    BADGE: {
+        appointment: string;
+        asn: string;
+        inventory: string;
+        parcel: string;
+        product: string;
+        route: string;
+        shipment: string;
+        shoppingCart: string;
+        system: string;
+    };
+};
+export default _default;

package/dist/components/Button/constants/index.js

@@ -0,0 +1,89 @@
+export const TYPE = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+    destructive: "destructive",
+    utility: "utility",
+    icon: "icon",
+};
+export const BREAKPOINTS = {
+    wide: "wide",
+    medium: "medium",
+    narrow: "narrow",
+};
+export const STATE = {
+    active: "active",
+    hover: "hover",
+    pressed: "pressed",
+    focussed: "focus",
+    disabled: "disabled",
+    error: "error",
+    success: "success",
+    warning: "warning",
+    progress: "progress",
+    info: "info",
+    filled: "filled",
+    generic: "generic",
+    removed: "removed",
+    hollow: "hollow",
+};
+export const TYPOGRAPHY_VARIANT = {
+    display1: "display1",
+    display2: "display2",
+    display3: "display3",
+    heading1: "heading1",
+    heading2: "heading2",
+    heading3: "heading3",
+    subHeading1: "subHeading1",
+    subHeading2: "subHeading2",
+    subHeading3: "subHeading3",
+    body1: "body1",
+    body2: "body2",
+    body3: "body3",
+    body4: "body4",
+    body5: "body5",
+    message: "message",
+    overline1: "overline1",
+    overline2: "overline2",
+    overline3: "overline3",
+    label1: "label1",
+    label2: "label2",
+    label3: "label3",
+    link1: "link1",
+    link2: "link2",
+    link3: "link3",
+    digits1: "digits1",
+    digits2: "digits2",
+    digits3: "digits3",
+};
+export const BUTTON_VARIANT = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+};
+export const SIZE = {
+    small: "small",
+    medium: "medium",
+    large: "large",
+    standard: "standard",
+};
+export const BADGE = {
+    appointment: "appointment",
+    asn: "asn",
+    inventory: "inventory",
+    parcel: "parcel",
+    product: "product",
+    route: "route",
+    shipment: "shipment",
+    shoppingCart: "shopping cart",
+    system: "system",
+};
+export default {
+    TYPE,
+    BREAKPOINTS,
+    STATE,
+    TYPOGRAPHY_VARIANT,
+    BUTTON_VARIANT,
+    SIZE,
+    BADGE,
+};

package/dist/components/Button/icon-button-styles.d.ts

@@ -1 +1,12 @@
-export declare const Button: any;
+import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
+interface StyledIconButtonProperties {
+    theme?: GenesisTheme;
+    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+    $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
+    children?: React.ReactNode;
+    $isIconButton?: boolean;
+    $isSelected?: boolean;
+    size?: "small" | "normal" | "large";
+}
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledIconButtonProperties>> & string;
+export {};