@gobolt/genesis 0.3.21 → 0.3.22

package/dist/components/Input/styles.js

@@ -1,38 +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;
-};
-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 = {
+const getStateColors = (colors, type, state) => {
+    const filled = {
         color: colors.inputs.onsurface.active,
         borderColor: colors[TYPE.secondary].active.borderColor,
         ringColor: colors[type].focussed.ringColor,
     };
-    var success = {
+    const success = {
         color: colors.status.success.default,
         borderColor: colors.status.success.default,
         ringColor: colors.status.success.ringColor,
     };
-    var error = {
+    const 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
+    const themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled
         ? {
             color: colors.inputs.onsurface.active,
             backgroundColor: colors.inputs.surface.active,
@@ -40,37 +25,156 @@ var getStateColors = function (colors, type, state) {
             ringColor: colors[type][state].ringColor,
         }
         : null;
-    var stateMap = {
-        filled: filled,
-        error: error,
-        success: success,
-        themeState: themeState,
+    const stateMap = {
+        filled,
+        error,
+        success,
+        themeState,
     };
-    var getValidKey = function (state) {
-        var validStates = [STATE.filled, STATE.error, STATE.success];
+    const getValidKey = (state) => {
+        const validStates = [STATE.filled, STATE.error, STATE.success];
         return validStates.includes(state) ? state : "themeState";
     };
-    var css = stateMap[getValidKey(state)];
+    const 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) {
+const getGenesisInputClass = ({ colors, borderRadius, components, shadows }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
+    const stateColors = getStateColors(colors, type, state);
+    const getBorderRadius = (hasBeforeAddon, hasAfterAddon) => {
         if (hasAfterAddon && !hasBeforeAddon) {
-            return "".concat(borderRadius.BorderRadiusMd, "px 0px 0px ").concat(borderRadius.BorderRadiusMd, "px");
+            return `${borderRadius.BorderRadiusMd}px 0px 0px ${borderRadius.BorderRadiusMd}px`;
         }
         if (hasBeforeAddon && !hasAfterAddon) {
-            return "0px ".concat(borderRadius.BorderRadiusMd, "px ").concat(borderRadius.BorderRadiusMd, "px 0px");
+            return `0px ${borderRadius.BorderRadiusMd}px ${borderRadius.BorderRadiusMd}px 0px`;
         }
-        return "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  ");
+    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;
+            }
+          }
+        }
+      }
+    }
+  `;
 };
-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;
+export const Input = styled(AntInput) `
+  ${({ theme, state, type = TYPE.primary, size = "normal", ...rest }) => {
+    const hasBeforeAddon = !!rest.addonBefore;
+    const hasAfterAddon = !!rest.addonAfter;
     return getGenesisInputClass(theme, type, state, hasBeforeAddon, hasAfterAddon, size);
-});
-var templateObject_1;
+}}
+`;

package/dist/components/Select/Select.js

@@ -1,114 +1,91 @@
-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) {
+const SelectWrapper = styled.div `
+  position: relative;
+  background-color: transparent;
+  border-radius: 8px;
+  width: auto;
+
+  ${({ $isFocused, theme, type = "primary" }) => $isFocused &&
+    `
+    background-color: transparent;
+  `}
+
+  ${({ disabled, theme }) => disabled &&
+    `
+    cursor: not-allowed;
+    
+    &:hover {
+      border-color: ${theme.colors.inputs.surface.border};
+    }
+  `}
+`;
+const SelectDropdown = styled.div `
+  padding: 0px;
+  border-radius: 0px;
+  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &.entering {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  &.entered {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  &.exiting {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+`;
+const MenuItem = styled.div `
+  padding: 8px 12px;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "transparent"};
+  color: ${({ $isSelected, disabled, theme, type = "primary" }) => disabled
+    ? theme.colors.inputs.onsurface.disabled
+    : $isSelected
+        ? theme.colors[type].hover.color
+        : theme.colors.onsurface.copy};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+
+  ${({ disabled }) => !disabled &&
+    `
+    &:hover {
+      background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected
+        ? theme.colors[type].hover.backgroundColor
+        : "rgba(0, 0, 0, 0.04)"};
+      color: ${({ $isSelected, theme, type = "primary" }) => $isSelected
+        ? theme.colors[type].hover.color
+        : theme.colors.onsurface["copy-dark"]};
+    }
+
+    &:active {
+      background-color: ${({ theme, type = "primary" }) => theme.colors[type].hover.backgroundColor};
+      color: ${({ theme, type = "primary" }) => theme.colors[type].hover.color};
+    }
+  `}
+`;
+const Select = ({ type = TYPE.primary, state, variant = "none", defaultValue, onChange, size = "normal", width = "100%", value, options = [], placeholder, selectDisplayMode = "count", isSingleSelect = true, disabled = false, ...rest }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [dropdownAnimation, setDropdownAnimation] = React.useState("entered");
+    const selectReference = React.useRef(null);
+    const { theme } = useGenesis();
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
             if (selectReference.current &&
                 !selectReference.current.contains(event.target)) {
                 handleClose();
@@ -118,18 +95,18 @@ var Select = function (_a) {
         if (isOpen) {
             document.addEventListener("mousedown", handleClickOutside);
         }
-        return function () {
+        return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    var handleClose = function () {
+    const handleClose = () => {
         setDropdownAnimation("exiting");
-        setTimeout(function () {
+        setTimeout(() => {
             setIsOpen(false);
             setDropdownAnimation("entered");
         }, 200);
     };
-    var handleTriggerClick = function () {
+    const handleTriggerClick = () => {
         if (disabled)
             return;
         setIsFocused(true);
@@ -139,21 +116,21 @@ var Select = function (_a) {
         else {
             setIsOpen(true);
             setDropdownAnimation("entering");
-            setTimeout(function () {
+            setTimeout(() => {
                 setDropdownAnimation("entered");
             }, 0);
         }
     };
-    var handleOptionSelect = function (optionValue) {
+    const handleOptionSelect = (optionValue) => {
         if (disabled)
             return;
-        var newValue;
+        let newValue;
         if (Array.isArray(value)) {
             // Handle multi-select
-            var stringValue = value.map(String);
+            const stringValue = value.map(String);
             newValue = stringValue.includes(optionValue)
-                ? stringValue.filter(function (v) { return v !== optionValue; })
-                : __spreadArray(__spreadArray([], __read(stringValue), false), [optionValue], false);
+                ? stringValue.filter((v) => v !== optionValue)
+                : [...stringValue, optionValue];
         }
         else {
             // Handle single select
@@ -162,23 +139,23 @@ var Select = function (_a) {
         // Autoclose if single select or variant is 'simple'
         if (isSingleSelect || variant === "simple") {
             handleClose(); // Close immediately
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            onChange?.(newValue);
         }
         else {
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            onChange?.(newValue);
         }
     };
-    var getSelectModeValue = function (value) {
+    const getSelectModeValue = (value) => {
         if (Array.isArray(value)) {
             if (selectDisplayMode === "count") {
-                return "".concat(value.length, " selected");
+                return `${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: {
+    const modeValue = getSelectModeValue(value);
+    return (_jsx("div", { style: { position: "relative", width }, children: _jsxs(SelectWrapper, { ref: selectReference, "$isFocused": isFocused, type: type, disabled: disabled, onFocus: () => !disabled && setIsFocused(true), onBlur: () => !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,
@@ -188,12 +165,11 @@ var Select = function (_a) {
                         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)
+                    }, children: options.map((option) => {
+                        const 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));
+                        return (_jsxs(MenuItem, { onClick: () => 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;