@gobolt/genesis 0.3.22 → 0.3.23

package/dist/components/Select/Select.js

@@ -1,91 +1,114 @@
+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";
-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) => {
+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();
@@ -95,18 +118,18 @@ const Select = ({ type = TYPE.primary, state, variant = "none", defaultValue, on
         if (isOpen) {
             document.addEventListener("mousedown", handleClickOutside);
         }
-        return () => {
+        return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    const handleClose = () => {
+    var handleClose = function () {
         setDropdownAnimation("exiting");
-        setTimeout(() => {
+        setTimeout(function () {
             setIsOpen(false);
             setDropdownAnimation("entered");
         }, 200);
     };
-    const handleTriggerClick = () => {
+    var handleTriggerClick = function () {
         if (disabled)
             return;
         setIsFocused(true);
@@ -116,21 +139,21 @@ const Select = ({ type = TYPE.primary, state, variant = "none", defaultValue, on
         else {
             setIsOpen(true);
             setDropdownAnimation("entering");
-            setTimeout(() => {
+            setTimeout(function () {
                 setDropdownAnimation("entered");
             }, 0);
         }
     };
-    const handleOptionSelect = (optionValue) => {
+    var handleOptionSelect = function (optionValue) {
         if (disabled)
             return;
-        let newValue;
+        var newValue;
         if (Array.isArray(value)) {
             // Handle multi-select
-            const stringValue = value.map(String);
+            var stringValue = value.map(String);
             newValue = stringValue.includes(optionValue)
-                ? stringValue.filter((v) => v !== optionValue)
-                : [...stringValue, optionValue];
+                ? stringValue.filter(function (v) { return v !== optionValue; })
+                : __spreadArray(__spreadArray([], __read(stringValue), false), [optionValue], false);
         }
         else {
             // Handle single select
@@ -139,23 +162,23 @@ const Select = ({ type = TYPE.primary, state, variant = "none", defaultValue, on
         // Autoclose if single select or variant is 'simple'
         if (isSingleSelect || variant === "simple") {
             handleClose(); // Close immediately
-            onChange?.(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         }
         else {
-            onChange?.(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         }
     };
-    const getSelectModeValue = (value) => {
+    var getSelectModeValue = function (value) {
         if (Array.isArray(value)) {
             if (selectDisplayMode === "count") {
-                return `${value.length} selected`;
+                return "".concat(value.length, " selected");
             }
             return value;
         }
         return value;
     };
-    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: {
+    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,
@@ -165,11 +188,12 @@ const Select = ({ type = TYPE.primary, state, variant = "none", defaultValue, on
                         boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
                         border: "1px solid #d9d9d9",
                         transformOrigin: "top",
-                    }, children: options.map((option) => {
-                        const isSelected = Array.isArray(value)
+                    }, children: options.map(function (option) {
+                        var isSelected = Array.isArray(value)
                             ? value.map(String).includes(option.value)
                             : String(value) === 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));
+                        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;

package/dist/components/Select/SelectTrigger.js

@@ -1,83 +1,68 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import styled from "@gobolt/genesis/utils/styled";
 import DropdownChevron from "../shared/DropdownChevron";
 import { Typography } from "@gobolt/genesis/components";
-const getBackgroundColor = (colors, disabled, $variant) => {
+var getBackgroundColor = function (colors, disabled, $variant) {
     if ($variant === "simple")
         return "#F4F4F4";
     if (disabled)
         return "#F4F4F4";
     return "#fff";
 };
-const TriggerWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")};
-  opacity: ${({ $disabled }) => ($disabled ? 0.4 : 1)};
-  position: relative;
-  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
-  transition: all 0.2s ease-in-out;
-  min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  &:focus {
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
-      0 0 0 3px
-        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
-  }
-
-  ${({ $variant, theme, $disabled }) => $variant === "simple"
-    ? `
-    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
-    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
-    border: none;
-    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
-    min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
-
-    &:hover {
-      border: none;
-    }
-    `
-    : `
-    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
-    background: ${$disabled
-        ? theme.colors.inputs.surface.disabled
-        : theme.colors.surface.default?.backgroundColor};
-    border: 1px solid #9a9a9a;
-    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
-    min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
-
-    &:hover {
-      border-color: rgba(0, 0, 0, 0.2);
-    }
-  `}
-`;
-const ValueContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.sizing.Size2}px;
-  flex: 1;
-  padding: 4px 8px;
-`;
-const ChevronContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${({ $variant }) => ($variant === "simple" ? "4px" : "4px")};
-  margin-left: ${({ $variant }) => ($variant === "simple" ? "4px" : "0")};
-`;
-const SelectTrigger = ({ type = "primary", theme, state, value, placeholder = "Select...", open, onClick, renderValue, options = [], disabled = false, variant = "none", }) => {
-    const handleClick = React.useCallback(() => {
+var TriggerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: ", ";\n  opacity: ", ";\n  position: relative;\n  box-shadow: ", ";\n  transition: all 0.2s ease-in-out;\n  min-height: ", ";\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus {\n    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),\n      0 0 0 3px\n        ", ";\n  }\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: ", ";\n  opacity: ", ";\n  position: relative;\n  box-shadow: ", ";\n  transition: all 0.2s ease-in-out;\n  min-height: ", ";\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus {\n    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),\n      0 0 0 3px\n        ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 0.4 : 1);
+}, function (_a) {
+    var $variant = _a.$variant;
+    return $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)";
+}, function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === "simple" ? "32px" : "40px");
+}, function (_a) {
+    var theme = _a.theme, _b = _a.$themeType, $themeType = _b === void 0 ? "primary" : _b;
+    return theme.colors[$themeType].focussed.ringColor;
+}, function (_a) {
+    var _b;
+    var $variant = _a.$variant, theme = _a.theme, $disabled = _a.$disabled;
+    return $variant === "simple"
+        ? "\n    padding: ".concat(theme.sizing.Size1, " ").concat(theme.sizing.Size2, ";\n    background: ").concat($disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)", ";\n    border: none;\n    border-radius: ").concat(theme.borderRadius.BorderRadiusSm, "px;\n    min-height: ").concat(function (_a) {
+            var $variant = _a.$variant;
+            return ($variant === "simple" ? "32px" : "40px");
+        }, ";\n\n    &:hover {\n      border: none;\n    }\n    ")
+        : "\n    padding: ".concat(theme.sizing.Size1, " ").concat(theme.sizing.Size2, ";\n    background: ").concat($disabled
+            ? theme.colors.inputs.surface.disabled
+            : (_b = theme.colors.surface.default) === null || _b === void 0 ? void 0 : _b.backgroundColor, ";\n    border: 1px solid #9a9a9a;\n    border-radius: ").concat(theme.borderRadius.BorderRadiusSm, "px;\n    min-height: ").concat(function (_a) {
+            var $variant = _a.$variant;
+            return ($variant === "simple" ? "32px" : "40px");
+        }, ";\n\n    &:hover {\n      border-color: rgba(0, 0, 0, 0.2);\n    }\n  ");
+});
+var ValueContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  flex: 1;\n  padding: 4px 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  flex: 1;\n  padding: 4px 8px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.sizing.Size2;
+});
+var ChevronContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ", ";\n  margin-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === "simple" ? "4px" : "4px");
+}, function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === "simple" ? "4px" : "0");
+});
+var SelectTrigger = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? "primary" : _b, theme = _a.theme, state = _a.state, value = _a.value, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, open = _a.open, onClick = _a.onClick, renderValue = _a.renderValue, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? "none" : _f;
+    var handleClick = React.useCallback(function () {
         if (disabled)
             return;
-        onClick?.();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [disabled, onClick]);
-    const displayValue = React.useMemo(() => {
+    var displayValue = React.useMemo(function () {
         if (!value)
             return null;
         if (renderValue)
@@ -85,19 +70,20 @@ const SelectTrigger = ({ type = "primary", theme, state, value, placeholder = "S
         if (Array.isArray(value)) {
             if (value.length === 0)
                 return null;
-            const selectedLabels = value
+            var selectedLabels = value
                 .map(String)
-                .map((v) => options.find((opt) => opt.value === v)?.label)
+                .map(function (v) { var _a; return (_a = options.find(function (opt) { return opt.value === v; })) === null || _a === void 0 ? void 0 : _a.label; })
                 .filter(Boolean);
             return selectedLabels.length > 0
                 ? selectedLabels.join(", ")
-                : `${value.length} selected`;
+                : "".concat(value.length, " selected");
         }
-        const selectedOption = options.find((opt) => opt.value === String(value));
-        return selectedOption?.label || value.toString();
+        var selectedOption = options.find(function (opt) { return opt.value === String(value); });
+        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || value.toString();
     }, [value, renderValue, options]);
     return (_jsxs(TriggerWrapper, { "$themeType": type, "$state": state, onClick: handleClick, tabIndex: disabled ? -1 : 0, role: "button", "$disabled": disabled, "$variant": variant, style: {
             backgroundColor: getBackgroundColor(theme, disabled, variant),
         }, children: [_jsx(ValueContainer, { "$variant": variant, children: displayValue ? (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue })) : (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy-light", children: placeholder })) }), _jsx(ChevronContainer, { "$variant": variant, children: _jsx(DropdownChevron, {}) })] }));
 };
 export default SelectTrigger;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Table/Table.js

@@ -1,14 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as S from "./styles";
 import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
-function Table({ columns, dataSource, rowKey = "id", size = "small", onChange, rowSelection, pagination, isMainContentCell = false, ...rest }) {
-    const paginationConfig = pagination === false
+function Table(_a) {
+    var columns = _a.columns, dataSource = _a.dataSource, _b = _a.rowKey, rowKey = _b === void 0 ? "id" : _b, _c = _a.size, size = _c === void 0 ? "small" : _c, onChange = _a.onChange, rowSelection = _a.rowSelection, pagination = _a.pagination, _d = _a.isMainContentCell, isMainContentCell = _d === void 0 ? false : _d, rest = __rest(_a, ["columns", "dataSource", "rowKey", "size", "onChange", "rowSelection", "pagination", "isMainContentCell"]);
+    var paginationConfig = pagination === false
         ? false
-        : {
-            ...pagination,
-            itemRender: undefined, // Clear any existing itemRender to avoid conflicts
-            render: (properties) => (_jsx(CustomPagination, { ...properties, paginationStyle: pagination?.paginationStyle || PaginationStyle.SIMPLE })),
-        };
-    return (_jsx(S.Table, { "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell, ...rest }));
+        : __assign(__assign({}, pagination), { itemRender: undefined, render: function (properties) { return (_jsx(CustomPagination, __assign({}, properties, { paginationStyle: (pagination === null || pagination === void 0 ? void 0 : pagination.paginationStyle) || PaginationStyle.SIMPLE }))); } });
+    return (_jsx(S.Table, __assign({ "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell }, rest)));
 }
 export default Table;