@gobolt/genesis 0.3.22 → 0.3.24

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

@@ -1,76 +1,23 @@
+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 getPadding = (size, sizing) => {
+var getPadding = function (size, sizing) {
     if (size === "small") {
-        return `${sizing.Size1}px ${sizing.Size1}px`;
+        return "".concat(sizing.Size1, "px ").concat(sizing.Size1, "px");
     }
-    return `${sizing.Size2}px ${sizing.Size2}px`;
+    return "".concat(sizing.Size2, "px ").concat(sizing.Size2, "px");
 };
-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
+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
         ? colors[$themeType].hover.backgroundColor
-        : 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;
-      }
-    `;
+        : 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    ");
 };
-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 }) => {
+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;
     return getGenesisButtonClass(theme, $themeType, $state, size, $isSelected);
-}}
-`;
+});
+var templateObject_1;

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

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

package/dist/components/Button/styles.js

@@ -1,118 +1,60 @@
+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";
-const getPadding = (size, $themeType, sizing, $isIconButton) => {
+var getPadding = function (size, $themeType, sizing, $isIconButton) {
     if ($isIconButton && (size === "normal" || size === "large")) {
-        return `${sizing.Size2}px ${sizing.Size2}px`;
+        return "".concat(sizing.Size2, "px ").concat(sizing.Size2, "px");
     }
     if ($isIconButton && size === "small") {
-        return `${sizing.Size1}px ${sizing.Size1}px`;
+        return "".concat(sizing.Size1, "px ").concat(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`;
+        return "".concat(sizing.Size1_5, "px ").concat(sizing.Size2, "px");
     }
     if ($themeType === "utility" && (size === "normal" || size === "large")) {
-        return `${sizing.Size2_5}px ${sizing.Size3}px`;
+        return "".concat(sizing.Size2_5, "px ").concat(sizing.Size3, "px");
     }
     if (size === "small") {
-        return `${sizing.Size1_5}px ${sizing.Size4}px`;
+        return "".concat(sizing.Size1_5, "px ").concat(sizing.Size4, "px");
     }
     if (size === "normal" || size === "large") {
-        return `${sizing.Size2_5}px ${sizing.Size6}px`;
+        return "".concat(sizing.Size2_5, "px ").concat(sizing.Size6, "px");
     }
-    return `${sizing.Size2}px ${sizing.Size2}px`;
+    return "".concat(sizing.Size2, "px ").concat(sizing.Size2, "px");
 };
-const getHeight = (size) => {
+var getHeight = function (size) {
     if (size === "normal" || size === "large") {
-        return `40px`;
+        return "40px";
     }
     if (size === "small") {
-        return `32px`;
+        return "32px";
     }
-    return `40px`;
+    return "40px";
 };
-const getWidth = (size, $isIconButton) => {
+var getWidth = function (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";
 };
-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 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 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 }) => {
+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;
     return getGenesisButtonClass(theme, $themeType, $state, $isIconButton, size);
-}}
-`;
+});
+var templateObject_1;

package/dist/components/Input/Input.js

@@ -1,21 +1,44 @@
+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";
-const Input = React.forwardRef(({ state = STATE.active, size = "normal", onChange, value, ...rest }, ref) => {
+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"]);
     // 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
-    const { type, ...validRest } = rest;
+    var type = rest.type, validRest = __rest(rest, ["type"]);
     // If addonAfter is a Select, use our custom chevron
-    const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select
+    var addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select
         ? React.cloneElement(rest.addonAfter, {
             suffixIcon: _jsx(DropdownChevron, {}),
         })
         : rest.addonAfter;
-    const handleChange = React.useCallback((e) => {
+    var handleChange = React.useCallback(function (e) {
         if (onChange) {
             onChange({
                 event: "inputChange",
@@ -25,9 +48,9 @@ const Input = React.forwardRef(({ state = STATE.active, size = "normal", onChang
             });
         }
     }, [onChange]);
-    return (_jsx(S.Input, { ...validRest, ref: ref, size: size, state: state, disabled: state === "disabled" || rest.disabled, addonAfter: addonAfter, style: {
+    return (_jsx(S.Input, __assign({}, 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 +1,18 @@
-export declare const Input: any;
+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 {};

package/dist/components/Input/styles.js

@@ -1,23 +1,38 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 styled from "@gobolt/genesis/utils/styled";
 import { Input as AntInput } from "antd";
 import { TYPE, STATE } from "@gobolt/genesis/constants";
-const getStateColors = (colors, type, state) => {
-    const filled = {
+var getStateColors = function (colors, type, state) {
+    var filled = {
         color: colors.inputs.onsurface.active,
         borderColor: colors[TYPE.secondary].active.borderColor,
         ringColor: colors[type].focussed.ringColor,
     };
-    const success = {
+    var success = {
         color: colors.status.success.default,
         borderColor: colors.status.success.default,
         ringColor: colors.status.success.ringColor,
     };
-    const error = {
+    var error = {
         color: colors.status.error.default,
         borderColor: colors.status.error.default,
         ringColor: colors.status.error.ringColor,
     };
-    const themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled
+    var themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled
         ? {
             color: colors.inputs.onsurface.active,
             backgroundColor: colors.inputs.surface.active,
@@ -25,156 +40,37 @@ const getStateColors = (colors, type, state) => {
             ringColor: colors[type][state].ringColor,
         }
         : null;
-    const stateMap = {
-        filled,
-        error,
-        success,
-        themeState,
+    var stateMap = {
+        filled: filled,
+        error: error,
+        success: success,
+        themeState: themeState,
     };
-    const getValidKey = (state) => {
-        const validStates = [STATE.filled, STATE.error, STATE.success];
+    var getValidKey = function (state) {
+        var validStates = [STATE.filled, STATE.error, STATE.success];
         return validStates.includes(state) ? state : "themeState";
     };
-    const css = stateMap[getValidKey(state)];
+    var css = stateMap[getValidKey(state)];
     return css;
 };
-const getGenesisInputClass = ({ colors, borderRadius, components, shadows }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
-    const stateColors = getStateColors(colors, type, state);
-    const getBorderRadius = (hasBeforeAddon, hasAfterAddon) => {
+var getGenesisInputClass = function (_a, type, state, hasBeforeAddon, hasAfterAddon, size) {
+    var colors = _a.colors, borderRadius = _a.borderRadius, components = _a.components, shadows = _a.shadows;
+    var stateColors = getStateColors(colors, type, state);
+    var getBorderRadius = function (hasBeforeAddon, hasAfterAddon) {
         if (hasAfterAddon && !hasBeforeAddon) {
-            return `${borderRadius.BorderRadiusMd}px 0px 0px ${borderRadius.BorderRadiusMd}px`;
+            return "".concat(borderRadius.BorderRadiusMd, "px 0px 0px ").concat(borderRadius.BorderRadiusMd, "px");
         }
         if (hasBeforeAddon && !hasAfterAddon) {
-            return `0px ${borderRadius.BorderRadiusMd}px ${borderRadius.BorderRadiusMd}px 0px`;
+            return "0px ".concat(borderRadius.BorderRadiusMd, "px ").concat(borderRadius.BorderRadiusMd, "px 0px");
         }
-        return `0px`;
+        return "0px";
     };
-    return `
-    &.ant-input {
-        font-family: 'Inter', sans-serif;
-        color: ${stateColors.color};
-        border-color: ${stateColors.borderColor};
-        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 {
-      border: 1px solid ${stateColors.borderColor};
-
-      &:hover {
-        border-color: ${stateColors.borderColor};
-      }
-    }
-
-    .ant-input-group & {
-      &:focus-within {
-        outline: none;
-        color: ${stateColors.color};
-        box-shadow: none;
-        border-color: ${colors[type].focussed.borderColor};
-      }
-    }
-
-    .ant-input-group:focus-within {
-      outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      transition: box-shadow 0.2s ease-in-out;
-
-      /* Hide focus styles on inner input when parent is focused */
-      .ant-input:focus-within {
-        box-shadow: none;
-        border-radius: 0;
-        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
-        border-color: #ddd;
-      }
-    }
-
-    /* Remove inner input focus styles when in a group */
-    .ant-input-group .ant-input:focus,
-    .ant-input-group .ant-input:focus-visible,
-    .ant-input-group .ant-input:focus-within {
-      outline: none;
-      box-shadow: none;
-      border-color: ${colors[type].focussed.borderColor};
-    }
-
-    /* Single focus ring on group */
-    .ant-input-group:focus-within {
-      outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    /* Remove focus styles for standalone inputs */
-    &:not(.ant-input-group):focus-visible {
-      outline: none;
-      color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      border-color: ${colors[type].focussed.borderColor};
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    &:not(.ant-input-group .ant-input):focus-visible {
-      outline: none;
-      color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      border-color: ${colors[type].focussed.borderColor};
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    &.ant-input-group-wrapper {
-      .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;
-            }
-          }
-        }
-      }
-    }
-  `;
+    return "\n    &.ant-input {\n        font-family: 'Inter', sans-serif;\n        color: ".concat(stateColors.color, ";\n        border-color: ").concat(stateColors.borderColor, ";\n        box-shadow: ").concat(shadows.inputs[1], " !important;\n        height: ").concat(size === "normal" || size === "large" ? "40px" : "32px", " !important;\n    }\n\n    /* Increase specificity for focus states */\n    &.ant-input.ant-input:focus,\n    &.ant-input.ant-input:focus-visible,\n    &.ant-input.ant-input-focused {\n      outline: none !important;\n      border-color: ").concat(colors[type].focussed.borderColor, " !important;\n      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ").concat(colors[type].focussed.ringColor, " !important;\n    }\n\n    &.ant-input-outlined {\n      border: 1px solid ").concat(stateColors.borderColor, ";\n\n      &:hover {\n        border-color: ").concat(stateColors.borderColor, ";\n      }\n    }\n\n    .ant-input-group & {\n      &:focus-within {\n        outline: none;\n        color: ").concat(stateColors.color, ";\n        box-shadow: none;\n        border-color: ").concat(colors[type].focussed.borderColor, ";\n      }\n    }\n\n    .ant-input-group:focus-within {\n      outline: none;\n      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ").concat(colors[type].focussed.ringColor, ";\n      border-radius: ").concat(borderRadius.BorderRadiusMd, "px;\n      transition: box-shadow 0.2s ease-in-out;\n\n      /* Hide focus styles on inner input when parent is focused */\n      .ant-input:focus-within {\n        box-shadow: none;\n        border-radius: 0;\n        border-radius: ").concat(getBorderRadius(hasBeforeAddon, hasAfterAddon), ";\n        border-color: #ddd;\n      }\n    }\n\n    /* Remove inner input focus styles when in a group */\n    .ant-input-group .ant-input:focus,\n    .ant-input-group .ant-input:focus-visible,\n    .ant-input-group .ant-input:focus-within {\n      outline: none;\n      box-shadow: none;\n      border-color: ").concat(colors[type].focussed.borderColor, ";\n    }\n\n    /* Single focus ring on group */\n    .ant-input-group:focus-within {\n      outline: none;\n      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ").concat(colors[type].focussed.ringColor, ";\n      border-radius: ").concat(borderRadius.BorderRadiusMd, "px;\n      transition: box-shadow 0.2s ease-in-out;\n    }\n\n    /* Remove focus styles for standalone inputs */\n    &:not(.ant-input-group):focus-visible {\n      outline: none;\n      color: ").concat(stateColors.color, ";\n      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ").concat(colors[type].focussed.ringColor, ";\n      border-radius: ").concat(borderRadius.BorderRadiusMd, "px;\n      border-color: ").concat(colors[type].focussed.borderColor, ";\n      transition: box-shadow 0.2s ease-in-out;\n    }\n\n    &:not(.ant-input-group .ant-input):focus-visible {\n      outline: none;\n      color: ").concat(stateColors.color, ";\n      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ").concat(colors[type].focussed.ringColor, ";\n      border-radius: ").concat(borderRadius.BorderRadiusMd, "px;\n      border-color: ").concat(colors[type].focussed.borderColor, ";\n      transition: box-shadow 0.2s ease-in-out;\n    }\n\n    &.ant-input-group-wrapper {\n      .ant-input-group {\n        display: flex;\n        align-items: center;\n        height: ").concat(size === "normal" || size === "large" ? "40px" : "32px", ";\n\n        .ant-input {\n          height: 100% !important;\n        }\n\n        .ant-input-group-addon {\n          padding: 0 ").concat(components.input.suffixPrefixHorPadding, ";\n          height: 100%;\n          display: flex;\n          align-items: center;\n          min-width: fit-content;\n          width: auto;\n          \n          > * {\n            width: 100%;\n          }\n          \n          .ant-select {\n            height: 100%;\n            \n            .ant-select-selector {\n              height: 100%;\n              display: flex;\n              align-items: center;\n            }\n          }\n        }\n      }\n    }\n  ");
 };
-export const Input = styled(AntInput) `
-  ${({ theme, state, type = TYPE.primary, size = "normal", ...rest }) => {
-    const hasBeforeAddon = !!rest.addonBefore;
-    const hasAfterAddon = !!rest.addonAfter;
+export var Input = styled(AntInput)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, state = _a.state, _b = _a.type, type = _b === void 0 ? TYPE.primary : _b, _c = _a.size, size = _c === void 0 ? "normal" : _c, rest = __rest(_a, ["theme", "state", "type", "size"]);
+    var hasBeforeAddon = !!rest.addonBefore;
+    var hasAfterAddon = !!rest.addonAfter;
     return getGenesisInputClass(theme, type, state, hasBeforeAddon, hasAfterAddon, size);
-}}
-`;
+});
+var templateObject_1;