@gobolt/genesis 0.3.21 → 0.3.23

package/dist/components/TableWithControls/components/Button/styles.js

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { STATE } from "../../constants";
+import type { InputProps as AntInputProperties, InputRef } from "antd";
+import type { InputEvent } from "../../types/events";
+type BaseInputProps = Omit<AntInputProperties, "size" | "onChange" | "value">;
+export interface InputProps extends BaseInputProps {
+    state?: keyof typeof STATE;
+    size?: "normal" | "small" | "large";
+    onChange?: (actionEvent: InputEvent) => void;
+    value?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+export default Input;

package/dist/components/TableWithControls/components/Input/Input.js

@@ -0,0 +1,34 @@
+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) => {
+    // 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;
+    // If addonAfter is a Select, use our custom chevron
+    const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select
+        ? React.cloneElement(rest.addonAfter, {
+            suffixIcon: _jsx(DropdownChevron, {}),
+        })
+        : rest.addonAfter;
+    const handleChange = React.useCallback((e) => {
+        if (onChange) {
+            onChange({
+                event: "inputChange",
+                payload: {
+                    value: e.target.value,
+                },
+            });
+        }
+    }, [onChange]);
+    return (_jsx(S.Input, { ...validRest, ref: ref, size: size, state: state, disabled: state === "disabled" || rest.disabled, addonAfter: addonAfter, style: {
+            height: size === "normal" || size === "large" ? "40px" : "32px",
+        }, onChange: handleChange, value: value }));
+});
+Input.displayName = "Input";
+Input.__ANT_INPUT = true;
+export default Input;

package/dist/components/TableWithControls/components/Input/index.d.ts

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

package/dist/components/TableWithControls/components/Input/index.js

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

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

@@ -0,0 +1 @@
+export declare const Input: any;

package/dist/components/TableWithControls/components/Input/styles.js

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

package/dist/components/TableWithControls/components/Select/Select.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { TYPE, STATE } from "@gobolt/genesis/constants";
+import { SelectProps as AntSelectProps } from "antd";
+import { GenesisTheme } from "@/lib/styles/theme/genesis-theme.types";
+type Variant = "none" | "simple";
+export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
+    type?: keyof typeof TYPE;
+    state?: keyof typeof STATE;
+    options?: {
+        value: string;
+        label: React.ReactNode;
+    }[];
+    variant?: Variant;
+    defaultValue?: string | string[] | number | number[] | unknown;
+    onChange?: (value: string | string[]) => void;
+    size?: "normal" | "small" | "large";
+    value?: string[] | string | number[] | number;
+    width?: number | string;
+    placeholder?: string;
+    selectDisplayMode?: "chip" | "count";
+    isSingleSelect?: boolean;
+    disabled?: boolean;
+    theme?: GenesisTheme;
+}
+declare const Select: ({ type, state, variant, defaultValue, onChange, size, width, value, options, placeholder, selectDisplayMode, isSingleSelect, disabled, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/TableWithControls/components/Select/Select.js

@@ -0,0 +1,175 @@
+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) => {
+            if (selectReference.current &&
+                !selectReference.current.contains(event.target)) {
+                handleClose();
+                setIsFocused(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleClose = () => {
+        setDropdownAnimation("exiting");
+        setTimeout(() => {
+            setIsOpen(false);
+            setDropdownAnimation("entered");
+        }, 200);
+    };
+    const handleTriggerClick = () => {
+        if (disabled)
+            return;
+        setIsFocused(true);
+        if (isOpen) {
+            handleClose();
+        }
+        else {
+            setIsOpen(true);
+            setDropdownAnimation("entering");
+            setTimeout(() => {
+                setDropdownAnimation("entered");
+            }, 0);
+        }
+    };
+    const handleOptionSelect = (optionValue) => {
+        if (disabled)
+            return;
+        let newValue;
+        if (Array.isArray(value)) {
+            // Handle multi-select
+            const stringValue = value.map(String);
+            newValue = stringValue.includes(optionValue)
+                ? stringValue.filter((v) => v !== optionValue)
+                : [...stringValue, optionValue];
+        }
+        else {
+            // Handle single select
+            newValue = optionValue;
+        }
+        // Autoclose if single select or variant is 'simple'
+        if (isSingleSelect || variant === "simple") {
+            handleClose(); // Close immediately
+            onChange?.(newValue);
+        }
+        else {
+            onChange?.(newValue);
+        }
+    };
+    const getSelectModeValue = (value) => {
+        if (Array.isArray(value)) {
+            if (selectDisplayMode === "count") {
+                return `${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: {
+                        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((option) => {
+                        const 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));
+                    }) }))] }) }));
+};
+export default Select;

package/dist/components/TableWithControls/components/Select/SelectTrigger.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { STATE } from "@gobolt/genesis/constants";
+import { GenesisTheme } from "@/lib/styles/theme/genesis-theme.types";
+type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+type Variant = "none" | "simple";
+interface SelectTriggerProperties {
+    type?: ThemeType;
+    theme?: GenesisTheme;
+    state?: keyof typeof STATE;
+    value?: string[] | string | number[] | number;
+    placeholder?: string;
+    open?: boolean;
+    onClick?: () => void;
+    renderValue?: (value: any) => React.ReactNode;
+    options?: {
+        value: string;
+        label: React.ReactNode;
+    }[];
+    disabled?: boolean;
+    variant?: Variant;
+}
+declare const SelectTrigger: React.FC<SelectTriggerProperties>;
+export default SelectTrigger;

package/dist/components/TableWithControls/components/Select/SelectTrigger.js

@@ -0,0 +1,103 @@
+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) => {
+    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(() => {
+        if (disabled)
+            return;
+        onClick?.();
+    }, [disabled, onClick]);
+    const displayValue = React.useMemo(() => {
+        if (!value)
+            return null;
+        if (renderValue)
+            return renderValue(value);
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return null;
+            const selectedLabels = value
+                .map(String)
+                .map((v) => options.find((opt) => opt.value === v)?.label)
+                .filter(Boolean);
+            return selectedLabels.length > 0
+                ? selectedLabels.join(", ")
+                : `${value.length} selected`;
+        }
+        const selectedOption = options.find((opt) => opt.value === String(value));
+        return 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;