@gobolt/genesis 0.3.21 → 0.3.22

package/dist/components/Badge/Badge.js

@@ -1,51 +1,28 @@
-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";
-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";
+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";
     if (!label) {
-        return (_jsx(S.Badge, __assign({ label: label, role: "badge", state: state, disabled: isDisabled, style: {
+        return (_jsx(S.Badge, { 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, __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
+    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
                 ? 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,13 +1,4 @@
 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: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProperties>> & string;
-export {};
+export declare const Badge: any;

package/dist/components/Badge/styles.js

@@ -1,21 +1,46 @@
-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";
-var getBorderColor = function (theme, state) {
+const getBorderColor = (theme, state) => {
     if (state === "hollow") {
         return theme.colors.inputs.surface.border;
     }
     return theme.colors.status[state].surface;
 };
-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;
+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, }) => {
     return getGenesisClass(theme, state, label, disabled, $backgroundColor, $hasHover);
-});
-var templateObject_1;
+}}
+`;

package/dist/components/Button/Button.js

@@ -1,36 +1,13 @@
-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";
-var getState = function (state, isSelected) {
+const getState = (state, isSelected) => {
     if (isSelected) {
         return "selected";
     }
     return state === "active" || state === "disabled" ? state : "active";
 };
-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 })));
+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/IconButton.js

@@ -1,32 +1,9 @@
-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";
-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 })));
+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 }));
 };
 export default IconButton;

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

@@ -1,12 +1 @@
-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 {};
+export declare const Button: any;

package/dist/components/Button/icon-button-styles.js

@@ -1,23 +1,76 @@
-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";
-var getPadding = function (size, sizing) {
+const getPadding = (size, sizing) => {
     if (size === "small") {
-        return "".concat(sizing.Size1, "px ").concat(sizing.Size1, "px");
+        return `${sizing.Size1}px ${sizing.Size1}px`;
     }
-    return "".concat(sizing.Size2, "px ").concat(sizing.Size2, "px");
+    return `${sizing.Size2}px ${sizing.Size2}px`;
 };
-var getVariant = function (_a, $themeType, $state, size, $isSelected) {
-    var colors = _a.colors, sizing = _a.sizing, borderRadius = _a.borderRadius, components = _a.components;
-    return "\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      color: ".concat(colors[$themeType][$state].color, ";\n      font-size: ").concat(sizing.Size4, "px;\n      line-height: ").concat(sizing.Size6, "px;\n      letter-spacing: 0;\n      font-weight: 400;\n      border-width: 1px;\n      cursor: pointer;\n      width: auto; !important;\n      height: auto; !important;\n\n      background-color:").concat($isSelected
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isSelected) => {
+    return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: ${colors[$themeType][$state].color};
+      font-size: ${sizing.Size4}px;
+      line-height: ${sizing.Size6}px;
+      letter-spacing: 0;
+      font-weight: 400;
+      border-width: 1px;
+      cursor: pointer;
+      width: auto; !important;
+      height: auto; !important;
+
+      background-color:${$isSelected
         ? colors[$themeType].hover.backgroundColor
-        : colors[$themeType][$state].backgroundColor, ";\n      padding: ").concat(getPadding(size, sizing), ";\n\n      box-shadow: ").concat($themeType === "utility" ? "0px 1px 2px 0px #00000026" : "none", ";\n\n      border-radius: ").concat(borderRadius.BorderRadiusMd, "px;\n      gap: ").concat(components.button.gap, "px;\n      border-style: solid;\n      border-color: ").concat(colors[$themeType][$state].borderColor, ";\n      \n      transition: all 0.2s ease-in-out;\n\n      &:hover {\n        color: ").concat(colors[$themeType].hover.color, ";\n        background-color: ").concat(colors[$themeType].hover.backgroundColor, ";\n        border-color: ").concat(colors[$themeType].hover.borderColor, ";\n      }\n\n      &:active {\n        color: ").concat(colors[$themeType].pressed.color, ";\n        background-color: ").concat(colors[$themeType].pressed.backgroundColor, ";\n        border-color: ").concat(colors[$themeType].pressed.borderColor, ";\n      }\n\n      &:focus-visible {\n        outline: none;\n        color: ").concat(colors[$themeType].focussed.color, ";\n        background-color: ").concat(colors[$themeType].focussed.backgroundColor, ";\n        box-shadow: 0 0 0 1px #fff, 0 0 0 4px ").concat(colors[$themeType].focussed.ringColor, ";\n        border-radius: ").concat(borderRadius.BorderRadiusMd, "px;\n        border-color: ").concat(colors[$themeType].focussed.borderColor, ";\n        transition: box-shadow 0.2s ease-in-out;\n      }\n\n      &:disabled {\n        color: ").concat(colors[$themeType].disabled.color, ";\n        background-color: ").concat(colors[$themeType].disabled.backgroundColor, ";\n        border-color: ").concat(colors[$themeType].disabled.borderColor, ";\n        cursor: not-allowed;\n      }\n    ");
+        : colors[$themeType][$state].backgroundColor};
+      padding: ${getPadding(size, sizing)};
+
+      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;
+      }
+    `;
 };
-var getGenesisButtonClass = function (theme, $themeType, $state, size, $isSelected) { return "\n    font-family: 'Inter', sans-serif;\n    ".concat(getVariant(theme, $themeType, $state, size, $isSelected), "\n"); };
-export var Button = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, $themeType = _a.$themeType, $state = _a.$state, size = _a.size, $isSelected = _a.$isSelected;
+const getGenesisButtonClass = (theme, $themeType, $state, size, $isSelected) => `
+    font-family: 'Inter', sans-serif;
+    ${getVariant(theme, $themeType, $state, size, $isSelected)}
+`;
+export const Button = styled.button `
+  ${({ theme, $themeType, $state, size, $isSelected }) => {
     return getGenesisButtonClass(theme, $themeType, $state, size, $isSelected);
-});
-var templateObject_1;
+}}
+`;

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

@@ -1,16 +1 @@
-import type { ButtonProps as AntButtonProperties } from "antd/es/button";
-import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
-interface StyledButtonProperties extends Omit<AntButtonProperties, "type" | "size"> {
-    theme?: GenesisTheme;
-    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
-    $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
-    children?: React.ReactNode;
-    $isIconButton?: boolean;
-    size?: "small" | "normal" | "large";
-}
-export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<AntButtonProperties & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
-}, StyledButtonProperties>> & string & Omit<import("react").ForwardRefExoticComponent<AntButtonProperties & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const Button: any;

package/dist/components/Button/styles.js

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

package/dist/components/Input/Input.js

@@ -1,44 +1,21 @@
-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 React from "react";
 import * as S from "./styles";
 import { STATE } from "../../constants";
 import DropdownChevron from "../shared/DropdownChevron";
 import { Select } from "antd";
-var Input = React.forwardRef(function (_a, ref) {
-    var _b = _a.state, state = _b === void 0 ? STATE.active : _b, _c = _a.size, size = _c === void 0 ? "normal" : _c, onChange = _a.onChange, value = _a.value, rest = __rest(_a, ["state", "size", "onChange", "value"]);
+const Input = React.forwardRef(({ state = STATE.active, size = "normal", onChange, value, ...rest }, ref) => {
     // make sure rest.type is ignored in the final output
     // we don't want the rest type "number" to be passed to the input
     // since we have our own version of type
-    var type = rest.type, validRest = __rest(rest, ["type"]);
+    const { type, ...validRest } = rest;
     // If addonAfter is a Select, use our custom chevron
-    var addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select
+    const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select
         ? React.cloneElement(rest.addonAfter, {
             suffixIcon: _jsx(DropdownChevron, {}),
         })
         : rest.addonAfter;
-    var handleChange = React.useCallback(function (e) {
+    const handleChange = React.useCallback((e) => {
         if (onChange) {
             onChange({
                 event: "inputChange",
@@ -48,9 +25,9 @@ var Input = React.forwardRef(function (_a, ref) {
             });
         }
     }, [onChange]);
-    return (_jsx(S.Input, __assign({}, validRest, { ref: ref, size: size, state: state, disabled: state === "disabled" || rest.disabled, addonAfter: addonAfter, style: {
+    return (_jsx(S.Input, { ...validRest, ref: ref, size: size, state: state, disabled: state === "disabled" || rest.disabled, addonAfter: addonAfter, style: {
             height: size === "normal" || size === "large" ? "40px" : "32px",
-        }, onChange: handleChange, value: value })));
+        }, onChange: handleChange, value: value }));
 });
 Input.displayName = "Input";
 Input.__ANT_INPUT = true;

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

@@ -1,18 +1 @@
-import type { InputProps as AntInputProperties } from "antd";
-import { STATE } from "@gobolt/genesis/constants";
-import type { InputRef } from "antd";
-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<AntInputProperties & import("react").RefAttributes<InputRef>, "ref"> & {
-    ref?: ((instance: InputRef | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<InputRef> | null | undefined;
-}, InputStyledProperties>> & string & Omit<import("react").ForwardRefExoticComponent<AntInputProperties & import("react").RefAttributes<InputRef>> & {
-    Group: import("react").FC<import("antd/es/input").GroupProps>;
-    Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<InputRef>>;
-    TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<InputRef>>;
-    OTP: import("react").ForwardRefExoticComponent<import("antd/es/input/OTP").OTPProps & import("react").RefAttributes<import("antd/es/input/OTP").OTPRef>>;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const Input: any;