@gobolt/genesis 0.2.20 → 0.3.0

package/dist/components/Radio/states/RadioUnchecked.cjs

@@ -1,13 +1,13 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
-const RadioUnchecked = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+const RadioUnchecked = (properties) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none",
-    ...props,
+    ...properties,
     children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" })
   }
 );

package/dist/components/Radio/states/RadioUnchecked.d.ts

@@ -1,2 +1,2 @@
-declare const RadioUnchecked: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const RadioUnchecked: (properties: any) => import("react/jsx-runtime").JSX.Element;
 export default RadioUnchecked;

package/dist/components/Radio/states/RadioUnchecked.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-const RadioUnchecked = (props) => /* @__PURE__ */ jsx(
+const RadioUnchecked = (properties) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none",
-    ...props,
+    ...properties,
     children: /* @__PURE__ */ jsx("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" })
   }
 );

package/dist/components/Radio/states/RadioUncheckedDisabled.cjs

@@ -1,13 +1,13 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
-const RadioUncheckedDisabled = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+const RadioUncheckedDisabled = (properties) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none",
-    ...props,
+    ...properties,
     children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" })
   }
 );

package/dist/components/Radio/states/RadioUncheckedDisabled.d.ts

@@ -1,2 +1,2 @@
-declare const RadioUncheckedDisabled: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const RadioUncheckedDisabled: (properties: any) => import("react/jsx-runtime").JSX.Element;
 export default RadioUncheckedDisabled;

package/dist/components/Radio/states/RadioUncheckedDisabled.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-const RadioUncheckedDisabled = (props) => /* @__PURE__ */ jsx(
+const RadioUncheckedDisabled = (properties) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none",
-    ...props,
+    ...properties,
     children: /* @__PURE__ */ jsx("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" })
   }
 );

package/dist/components/Radio/states/RadioUncheckedFocussed.cjs

@@ -1,13 +1,13 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
-const RadioUncheckedFocussed = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+const RadioUncheckedFocussed = (properties) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
     fill: "none",
-    ...props,
+    ...properties,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 13, cy: 13, r: 9.5, fill: "#fff", stroke: "#9A9A9A" }),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/Radio/states/RadioUncheckedFocussed.d.ts

@@ -1,2 +1,2 @@
-declare const RadioUncheckedFocussed: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const RadioUncheckedFocussed: (properties: any) => import("react/jsx-runtime").JSX.Element;
 export default RadioUncheckedFocussed;

package/dist/components/Radio/states/RadioUncheckedFocussed.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-const RadioUncheckedFocussed = (props) => /* @__PURE__ */ jsxs(
+const RadioUncheckedFocussed = (properties) => /* @__PURE__ */ jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
     fill: "none",
-    ...props,
+    ...properties,
     children: [
       /* @__PURE__ */ jsx("circle", { cx: 13, cy: 13, r: 9.5, fill: "#fff", stroke: "#9A9A9A" }),
       /* @__PURE__ */ jsx(

package/dist/components/Radio/states/RadioUncheckedHover.cjs

@@ -1,13 +1,13 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
-const RadioUncheckedHover = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+const RadioUncheckedHover = (properties) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none",
-    ...props,
+    ...properties,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 4, fill: "#6C6C6C" })

package/dist/components/Radio/states/RadioUncheckedHover.d.ts

@@ -1,2 +1,2 @@
-declare const RadioUncheckedHover: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const RadioUncheckedHover: (properties: any) => import("react/jsx-runtime").JSX.Element;
 export default RadioUncheckedHover;

package/dist/components/Radio/states/RadioUncheckedHover.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-const RadioUncheckedHover = (props) => /* @__PURE__ */ jsxs(
+const RadioUncheckedHover = (properties) => /* @__PURE__ */ jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none",
-    ...props,
+    ...properties,
     children: [
       /* @__PURE__ */ jsx("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" }),
       /* @__PURE__ */ jsx("circle", { cx: 10, cy: 10, r: 4, fill: "#6C6C6C" })

package/dist/components/Row/Row.cjs

@@ -11,7 +11,7 @@ const Row = ({
   actions,
   hasBorder = true,
   isLoading = false,
-  badgeProps = null
+  badgeProps: badgeProperties = null
 }) => {
   const { theme } = useGenesis.useGenesis();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -28,7 +28,7 @@ const Row = ({
             value,
             isFullWidth,
             isLoading,
-            badgeProps
+            badgeProps: badgeProperties
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(RowActions.RowActions, { actions })

package/dist/components/Row/Row.d.ts

@@ -9,5 +9,5 @@ export interface RowProps {
     isLoading?: boolean;
     badgeProps?: BadgeProps;
 }
-declare const Row: ({ label, value, isFullWidth, actions, hasBorder, isLoading, badgeProps, }: RowProps) => import("react/jsx-runtime").JSX.Element;
+declare const Row: ({ label, value, isFullWidth, actions, hasBorder, isLoading, badgeProps: badgeProperties, }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export default Row;

package/dist/components/Row/Row.js

@@ -10,7 +10,7 @@ const Row = ({
   actions,
   hasBorder = true,
   isLoading = false,
-  badgeProps = null
+  badgeProps: badgeProperties = null
 }) => {
   const { theme } = useGenesis();
   return /* @__PURE__ */ jsxs(
@@ -27,7 +27,7 @@ const Row = ({
             value,
             isFullWidth,
             isLoading,
-            badgeProps
+            badgeProps: badgeProperties
           }
         ),
         /* @__PURE__ */ jsx(RowActions, { actions })

package/dist/components/Row/RowActions/RowActions.d.ts

@@ -2,8 +2,8 @@ export type Action = {
     label: string;
     onClick: () => void;
 };
-interface RowActionsProps {
+interface RowActionsProperties {
     actions: Action[] | null;
 }
-export declare const RowActions: ({ actions }: RowActionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RowActions: ({ actions }: RowActionsProperties) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Row/RowLabelValue/RowLabelValue.cjs

@@ -36,7 +36,7 @@ const RowLabelValue = ({
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: !isLoading ? getBadgeOrTypography(badgeProps, value) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(RowSkeleton.RowSkeleton, { isFullWidth }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(RowSkeleton.RowSkeleton, { isFullWidth }) }) : getBadgeOrTypography(badgeProps, value) })
   ] });
 };
 exports.RowLabelValue = RowLabelValue;

package/dist/components/Row/RowLabelValue/RowLabelValue.d.ts

@@ -1,10 +1,10 @@
 import { BadgeProps } from '../..';
-interface RowLabelValueProps {
+interface RowLabelValueProperties {
     label: string;
     value: string;
     isLoading?: boolean;
     isFullWidth?: boolean;
     badgeProps: BadgeProps | null;
 }
-export declare const RowLabelValue: ({ label, value, isLoading, isFullWidth, badgeProps, }: RowLabelValueProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RowLabelValue: ({ label, value, isLoading, isFullWidth, badgeProps, }: RowLabelValueProperties) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Row/RowLabelValue/RowLabelValue.js

@@ -35,7 +35,7 @@ const RowLabelValue = ({
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { children: !isLoading ? getBadgeOrTypography(badgeProps, value) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RowSkeleton, { isFullWidth }) }) })
+    /* @__PURE__ */ jsx("div", { children: isLoading ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RowSkeleton, { isFullWidth }) }) : getBadgeOrTypography(badgeProps, value) })
   ] });
 };
 export {

package/dist/components/Row/RowLabelValue/styles.d.ts

@@ -1,10 +1,10 @@
-interface StyledRowLabelValueProps {
+interface StyledRowLabelValueProperties {
     $isFullWidth?: boolean;
 }
 export declare const getGenesisRowLabelValueClass: ({ components }: {
     components: any;
 }, $isFullWidth?: boolean) => string;
-export declare const RowLabelValue: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRowLabelValueProps>> & string;
+export declare const RowLabelValue: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRowLabelValueProperties>> & string;
 export declare const Skeleton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('antd').SkeletonProps, never>> & string & Omit<import('react').FC<import('antd').SkeletonProps> & {
     Button: import('react').FC<import('antd/es/skeleton/Button').SkeletonButtonProps>;
     Avatar: import('react').FC<import('antd/es/skeleton/Avatar').AvatarProps>;

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

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledColumnProps {
+interface StyledColumnProperties {
     theme?: GenesisTheme;
     $hasBorder?: boolean;
     $isFullWidth?: boolean;
@@ -10,5 +10,5 @@ export declare const getGenesisColumnClass: ({ colors, borderRadius, sizing }: {
     borderRadius: any;
     sizing: any;
 }, $hasBorder?: boolean, $isFullWidth?: boolean, actions?: any) => string;
-export declare const Column: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledColumnProps>> & string;
+export declare const Column: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledColumnProperties>> & string;
 export {};

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

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledSegmentedControlsProps {
+interface StyledSegmentedControlsProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -7,5 +7,5 @@ interface StyledSegmentedControlsProps {
 export declare const getGenesisClass: ({ colors, borderRadius, sizing, typography }: GenesisTheme, type?: string, state?: string) => string;
 export declare const SegmentedControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').SegmentedProps<unknown> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: import('react').Ref<HTMLDivElement>;
-}, StyledSegmentedControlsProps>> & string & Omit<(<ValueType>(props: import('antd').SegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>) => ReturnType<import('react').ForwardRefExoticComponent<Omit<import('antd').SegmentedProps<import('rc-segmented').SegmentedValue>, "ref"> & import('react').RefAttributes<HTMLDivElement>>>) & Pick<import('react').FC<{}>, "displayName">, keyof import('react').Component<any, {}, any>>;
+}, StyledSegmentedControlsProperties>> & string & Omit<(<ValueType>(props: import('antd').SegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>) => ReturnType<import('react').ForwardRefExoticComponent<Omit<import('antd').SegmentedProps<import('rc-segmented').SegmentedValue>, "ref"> & import('react').RefAttributes<HTMLDivElement>>>) & Pick<import('react').FC<{}>, "displayName">, keyof import('react').Component<any, {}, any>>;
 export {};

package/dist/components/Select/Select.cjs

@@ -2,9 +2,72 @@
 var jsxRuntime = require("react/jsx-runtime");
 var React = require("react");
 var index = require("../../constants/index.cjs");
-var DropdownChevron = require("../shared/DropdownChevron.cjs");
-var styles = require("./styles.cjs");
+var styled = require("styled-components");
+var SelectTrigger = require("./SelectTrigger.cjs");
 var useGenesis = require("../../providers/useGenesis.cjs");
+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 = index.TYPE.primary,
   state,
@@ -12,68 +75,141 @@ const Select = ({
   defaultValue,
   onChange,
   size = "normal",
-  width = 320,
+  width = "100%",
   value,
+  options = [],
+  placeholder,
+  selectDisplayMode = "count",
+  isSingleSelect = false,
+  disabled = false,
   ...rest
 }) => {
-  const { breakpoint } = useGenesis.useGenesis();
+  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.useGenesis();
   React.useEffect(() => {
-    const style2 = document.createElement("style");
-    style2.textContent = `
-      .ant-select-dropdown {
-        padding: 0px !important;
-        border-radius: 0px !important;
-      }
-      .ant-select-selection-placeholder {
-        inset-inline-start: 0px !important;
+    const handleClickOutside = (event) => {
+      if (selectReference.current && !selectReference.current.contains(event.target)) {
+        handleClose();
+        setIsFocused(false);
       }
-    `;
-    document.head.appendChild(style2);
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
     return () => {
-      document.head.removeChild(style2);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
-  const customDropdownRender = (menu) => /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropdown, { type, state, children: /* @__PURE__ */ jsxRuntime.jsx(styles.StyledMenuItem, { type, state, children: menu }) });
-  const isMultiSelectCountAtZero = variant === "multiSelectCount" && Array.isArray(value);
-  const totalSelected = Array.isArray(value) ? value == null ? void 0 : value.length : 0;
-  const shiftHackStyle = {
-    display: "block",
-    position: "absolute",
-    top: totalSelected === 0 ? 0 : 12,
-    left: 0,
-    width
+  }, [isOpen]);
+  const handleClose = () => {
+    setDropdownAnimation("exiting");
+    setTimeout(() => {
+      setIsOpen(false);
+      setDropdownAnimation("entered");
+    }, 200);
   };
-  const normalStyle = {
-    display: "block",
-    position: "relative",
-    width
+  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)) {
+      const stringValue = value.map(String);
+      newValue = stringValue.includes(optionValue) ? stringValue.filter((v) => v !== optionValue) : [...stringValue, optionValue];
+    } else {
+      newValue = optionValue;
+    }
+    onChange == null ? void 0 : onChange(newValue);
+    if (isSingleSelect) {
+      handleClose();
+    }
+  };
+  const getSelectModeValue = (value2) => {
+    if (Array.isArray(value2)) {
+      if (selectDisplayMode === "count") {
+        return `${value2.length} selected`;
+      }
+      return value2;
+    }
+    return value2;
   };
-  const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: /* @__PURE__ */ jsxRuntime.jsx(
-    styles.SelectWrapper,
+  const modeValue = getSelectModeValue(value);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", width }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectWrapper,
     {
+      ref: selectReference,
       $isFocused: isFocused,
       type,
-      $isMultiSelectCountAtZero: isMultiSelectCountAtZero,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        styles.Select,
-        {
-          ...rest,
-          size,
-          defaultValue,
-          $variant: variant,
-          suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),
-          dropdownRender: customDropdownRender,
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
-          onChange: (value2) => {
-            setIsFocused(false);
-            onChange == null ? void 0 : onChange(value2);
-          },
-          style: { width }
-        }
-      )
+      disabled,
+      onFocus: () => !disabled && setIsFocused(true),
+      onBlur: () => !isOpen && setIsFocused(false),
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectTrigger,
+          {
+            theme,
+            type,
+            state,
+            value: modeValue,
+            placeholder,
+            open: isOpen,
+            onClick: handleTriggerClick,
+            options,
+            disabled,
+            variant
+          }
+        ),
+        isOpen && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          SelectDropdown,
+          {
+            type,
+            state,
+            className: dropdownAnimation,
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 1e3,
+              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 /* @__PURE__ */ jsxRuntime.jsxs(
+                MenuItem,
+                {
+                  onClick: () => handleOptionSelect(option.value),
+                  $isSelected: isSelected,
+                  type,
+                  disabled,
+                  children: [
+                    option.label,
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "8px" }, children: "✓" })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
     }
   ) });
 };

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

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
 import { TYPE, STATE } from '../../constants';
 import { SelectProps as AntSelectProps } from 'antd';
+import { GenesisTheme } from '../../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;
@@ -8,12 +10,17 @@ export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
         value: string;
         label: React.ReactNode;
     }[];
-    variant?: "simple" | "none" | "multiSelectCount";
+    variant?: Variant;
     defaultValue?: string | string[] | number | number[] | unknown;
     onChange?: (value: string | string[]) => void;
     size?: "normal" | "small" | "large";
     value?: string[] | string | number[] | number;
-    width?: 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, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+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;