@gobolt/genesis 0.3.26 → 0.3.28

package/dist/components/Button/styles.js

@@ -1,60 +0,0 @@
-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) {
-    if ($isIconButton && (size === "normal" || size === "large")) {
-        return "".concat(sizing.Size2, "px ").concat(sizing.Size2, "px");
-    }
-    if ($isIconButton && size === "small") {
-        return "".concat(sizing.Size1, "px ").concat(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");
-    }
-    if ($themeType === "utility" && (size === "normal" || size === "large")) {
-        return "".concat(sizing.Size2_5, "px ").concat(sizing.Size3, "px");
-    }
-    if (size === "small") {
-        return "".concat(sizing.Size1_5, "px ").concat(sizing.Size4, "px");
-    }
-    if (size === "normal" || size === "large") {
-        return "".concat(sizing.Size2_5, "px ").concat(sizing.Size6, "px");
-    }
-    return "".concat(sizing.Size2, "px ").concat(sizing.Size2, "px");
-};
-var getHeight = function (size) {
-    if (size === "normal" || size === "large") {
-        return "40px";
-    }
-    if (size === "small") {
-        return "32px";
-    }
-    return "40px";
-};
-var getWidth = function (size, $isIconButton) {
-    if (!$isIconButton) {
-        return "auto";
-    }
-    if (size === "normal" || size === "large") {
-        return "40px";
-    }
-    if (size === "small") {
-        return "32px";
-    }
-    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      ");
-};
-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/Button/styles.ts

@@ -1,176 +0,0 @@
-import styled from "@gobolt/genesis/utils/styled";
-import { Button as AntButton } from "antd";
-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";
-}
-
-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)<StyledButtonProperties>`
-  ${({ theme, $themeType, $state, children, $isIconButton, size }) => {
-    return getGenesisButtonClass(
-      theme,
-      $themeType,
-      $state,
-      $isIconButton,
-      size
-    );
-  }}
-`;

package/dist/components/Input/Input.js

@@ -1,57 +0,0 @@
-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"]);
-    // 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"]);
-    // If addonAfter is a Select, use our custom chevron
-    var addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select
-        ? React.cloneElement(rest.addonAfter, {
-            suffixIcon: _jsx(DropdownChevron, {}),
-        })
-        : rest.addonAfter;
-    var handleChange = React.useCallback(function (e) {
-        if (onChange) {
-            onChange({
-                event: "inputChange",
-                payload: {
-                    value: e.target.value,
-                },
-            });
-        }
-    }, [onChange]);
-    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 })));
-});
-Input.displayName = "Input";
-Input.__ANT_INPUT = true;
-export default Input;

package/dist/components/Input/index.js

@@ -1 +0,0 @@
-export { default } from "./Input";

package/dist/components/Input/styles.js

@@ -1,76 +0,0 @@
-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";
-var getStateColors = function (colors, type, state) {
-    var filled = {
-        color: colors.inputs.onsurface.active,
-        borderColor: colors[TYPE.secondary].active.borderColor,
-        ringColor: colors[type].focussed.ringColor,
-    };
-    var success = {
-        color: colors.status.success.default,
-        borderColor: colors.status.success.default,
-        ringColor: colors.status.success.ringColor,
-    };
-    var error = {
-        color: colors.status.error.default,
-        borderColor: colors.status.error.default,
-        ringColor: colors.status.error.ringColor,
-    };
-    var themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled
-        ? {
-            color: colors.inputs.onsurface.active,
-            backgroundColor: colors.inputs.surface.active,
-            borderColor: colors.inputs.surface.border,
-            ringColor: colors[type][state].ringColor,
-        }
-        : null;
-    var stateMap = {
-        filled: filled,
-        error: error,
-        success: success,
-        themeState: themeState,
-    };
-    var getValidKey = function (state) {
-        var validStates = [STATE.filled, STATE.error, STATE.success];
-        return validStates.includes(state) ? state : "themeState";
-    };
-    var css = stateMap[getValidKey(state)];
-    return css;
-};
-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 "".concat(borderRadius.BorderRadiusMd, "px 0px 0px ").concat(borderRadius.BorderRadiusMd, "px");
-        }
-        if (hasBeforeAddon && !hasAfterAddon) {
-            return "0px ".concat(borderRadius.BorderRadiusMd, "px ").concat(borderRadius.BorderRadiusMd, "px 0px");
-        }
-        return "0px";
-    };
-    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 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;

package/dist/components/Select/Select.js

@@ -1,199 +0,0 @@
-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;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { TYPE } from "@gobolt/genesis/constants";
-import styled from "@gobolt/genesis/utils/styled";
-import SelectTrigger from "./SelectTrigger";
-import { useGenesis } from "@gobolt/genesis/providers";
-var SelectWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background-color: transparent;\n  border-radius: 8px;\n  width: auto;\n\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n  background-color: transparent;\n  border-radius: 8px;\n  width: auto;\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var $isFocused = _a.$isFocused, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
-    return $isFocused &&
-        "\n    background-color: transparent;\n  ";
-}, function (_a) {
-    var disabled = _a.disabled, theme = _a.theme;
-    return disabled &&
-        "\n    cursor: not-allowed;\n    \n    &:hover {\n      border-color: ".concat(theme.colors.inputs.surface.border, ";\n    }\n  ");
-});
-var SelectDropdown = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0px;\n  border-radius: 0px;\n  animation-duration: ", ";\n  transition: all ", "\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n\n  &.entering {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n\n  &.entered {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n\n  &.exiting {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n"], ["\n  padding: 0px;\n  border-radius: 0px;\n  animation-duration: ", ";\n  transition: all ", "\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n\n  &.entering {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n\n  &.entered {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n\n  &.exiting {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.motion.veryfast, "s");
-}, function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.motion.veryfast, "s");
-});
-var MenuItem = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px 12px;\n  cursor: ", ";\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: all ", " ease-in-out;\n  opacity: ", ";\n\n  ", "\n"], ["\n  padding: 8px 12px;\n  cursor: ", ";\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: all ", " ease-in-out;\n  opacity: ", ";\n\n  ", "\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? "not-allowed" : "pointer");
-}, function (_a) {
-    var $isSelected = _a.$isSelected, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
-    return $isSelected ? theme.colors[type].hover.backgroundColor : "transparent";
-}, function (_a) {
-    var $isSelected = _a.$isSelected, disabled = _a.disabled, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
-    return disabled
-        ? theme.colors.inputs.onsurface.disabled
-        : $isSelected
-            ? theme.colors[type].hover.color
-            : theme.colors.onsurface.copy;
-}, function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.motion.veryfast, "s");
-}, function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 0.5 : 1);
-}, function (_a) {
-    var disabled = _a.disabled;
-    return !disabled &&
-        "\n    &:hover {\n      background-color: ".concat(function (_a) {
-            var $isSelected = _a.$isSelected, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
-            return $isSelected
-                ? theme.colors[type].hover.backgroundColor
-                : "rgba(0, 0, 0, 0.04)";
-        }, ";\n      color: ").concat(function (_a) {
-            var $isSelected = _a.$isSelected, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
-            return $isSelected
-                ? theme.colors[type].hover.color
-                : theme.colors.onsurface["copy-dark"];
-        }, ";\n    }\n\n    &:active {\n      background-color: ").concat(function (_a) {
-            var theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
-            return theme.colors[type].hover.backgroundColor;
-        }, ";\n      color: ").concat(function (_a) {
-            var theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
-            return theme.colors[type].hover.color;
-        }, ";\n    }\n  ");
-});
-var Select = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? TYPE.primary : _b, state = _a.state, _c = _a.variant, variant = _c === void 0 ? "none" : _c, defaultValue = _a.defaultValue, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "normal" : _d, _e = _a.width, width = _e === void 0 ? "100%" : _e, value = _a.value, _f = _a.options, options = _f === void 0 ? [] : _f, placeholder = _a.placeholder, _g = _a.selectDisplayMode, selectDisplayMode = _g === void 0 ? "count" : _g, _h = _a.isSingleSelect, isSingleSelect = _h === void 0 ? true : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, rest = __rest(_a, ["type", "state", "variant", "defaultValue", "onChange", "size", "width", "value", "options", "placeholder", "selectDisplayMode", "isSingleSelect", "disabled"]);
-    var _k = __read(React.useState(false), 2), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = __read(React.useState(false), 2), isFocused = _l[0], setIsFocused = _l[1];
-    var _m = __read(React.useState("entered"), 2), dropdownAnimation = _m[0], setDropdownAnimation = _m[1];
-    var selectReference = React.useRef(null);
-    var theme = useGenesis().theme;
-    React.useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (selectReference.current &&
-                !selectReference.current.contains(event.target)) {
-                handleClose();
-                setIsFocused(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    var handleClose = function () {
-        setDropdownAnimation("exiting");
-        setTimeout(function () {
-            setIsOpen(false);
-            setDropdownAnimation("entered");
-        }, 200);
-    };
-    var handleTriggerClick = function () {
-        if (disabled)
-            return;
-        setIsFocused(true);
-        if (isOpen) {
-            handleClose();
-        }
-        else {
-            setIsOpen(true);
-            setDropdownAnimation("entering");
-            setTimeout(function () {
-                setDropdownAnimation("entered");
-            }, 0);
-        }
-    };
-    var handleOptionSelect = function (optionValue) {
-        if (disabled)
-            return;
-        var newValue;
-        if (Array.isArray(value)) {
-            // Handle multi-select
-            var stringValue = value.map(String);
-            newValue = stringValue.includes(optionValue)
-                ? stringValue.filter(function (v) { return v !== optionValue; })
-                : __spreadArray(__spreadArray([], __read(stringValue), false), [optionValue], false);
-        }
-        else {
-            // Handle single select
-            newValue = optionValue;
-        }
-        // Autoclose if single select or variant is 'simple'
-        if (isSingleSelect || variant === "simple") {
-            handleClose(); // Close immediately
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-        else {
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-    };
-    var getSelectModeValue = function (value) {
-        if (Array.isArray(value)) {
-            if (selectDisplayMode === "count") {
-                return "".concat(value.length, " selected");
-            }
-            return value;
-        }
-        return value;
-    };
-    var modeValue = getSelectModeValue(value);
-    return (_jsx("div", { style: { position: "relative", width: width }, children: _jsxs(SelectWrapper, { ref: selectReference, "$isFocused": isFocused, type: type, disabled: disabled, onFocus: function () { return !disabled && setIsFocused(true); }, onBlur: function () { return !isOpen && setIsFocused(false); }, tabIndex: disabled ? -1 : 0, children: [_jsx(SelectTrigger, { theme: theme, type: type, state: state, value: modeValue, placeholder: placeholder, open: isOpen, onClick: handleTriggerClick, options: options, disabled: disabled, variant: variant }), isOpen && !disabled && (_jsx(SelectDropdown, { type: type, state: state, className: dropdownAnimation, style: {
-                        position: "absolute",
-                        top: "calc(100% + 4px)",
-                        left: 0,
-                        right: 0,
-                        zIndex: 1000,
-                        backgroundColor: "white",
-                        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-                        border: "1px solid #d9d9d9",
-                        transformOrigin: "top",
-                    }, children: options.map(function (option) {
-                        var isSelected = Array.isArray(value)
-                            ? value.map(String).includes(option.value)
-                            : String(value) === option.value;
-                        return (_jsxs(MenuItem, { onClick: function () { return handleOptionSelect(option.value); }, "$isSelected": isSelected, type: type, disabled: disabled, children: [option.label, isSelected && _jsx("span", { style: { marginLeft: "8px" }, children: "\u2713" })] }, option.value));
-                    }) }))] }) }));
-};
-export default Select;
-var templateObject_1, templateObject_2, templateObject_3;