@gobolt/genesis 0.2.18 → 0.2.20

package/dist/components/Avatar/Avatar.cjs

@@ -16,7 +16,6 @@ const Avatar = ({
   backgroundColor = "#00282B",
   user = null
 }) => {
-  console.log("Avatar", user);
   if (!user) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       styles.Avatar,

package/dist/components/Avatar/Avatar.js

@@ -15,7 +15,6 @@ const Avatar = ({
   backgroundColor = "#00282B",
   user = null
 }) => {
-  console.log("Avatar", user);
   if (!user) {
     return /* @__PURE__ */ jsx(
       Avatar$1,

package/dist/components/Badge/Badge.cjs

@@ -11,8 +11,14 @@ const Badge = ({
   state = "info",
   isDisabled,
   hasClose = false,
-  onClick,
+  onClick = () => {
+  },
   size = "normal",
+  hasIcon = true,
+  customIcon = null,
+  backgroundColor = null,
+  textColor = null,
+  hasHover = true,
   ...rest
 }) => {
   const { theme } = useGenesis.useGenesis();
@@ -28,6 +34,7 @@ const Badge = ({
         style: {
           padding: "4px 4px"
         },
+        hasHover,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -39,8 +46,10 @@ const Badge = ({
             },
             children: iconUtil.getBadgeStateIcon(
               state,
-              theme.colors.status[state].onsurface,
-              isBadgeIconFilled
+              backgroundColor || theme.colors.status[state].onsurface,
+              isBadgeIconFilled,
+              hasIcon,
+              customIcon
             )
           }
         )
@@ -56,18 +65,22 @@ const Badge = ({
       state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
+      backgroundColor,
+      hasHover,
       ...rest,
       children: [
         iconUtil.getBadgeStateIcon(
           state,
-          theme.colors.status[state].onsurface,
-          isBadgeIconFilled
+          backgroundColor || theme.colors.status[state].onsurface,
+          isBadgeIconFilled,
+          hasIcon,
+          customIcon
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Typography,
           {
             variant: size === "small" ? "label3" : "label2",
-            color: isDisabled ? theme.colors.status.disabled.default : theme.colors.status[state].onsurface,
+            color: isDisabled ? theme.colors.status.disabled.default : textColor || theme.colors.status[state].onsurface,
             isDisabled,
             children: label
           }

package/dist/components/Badge/Badge.d.ts

@@ -4,8 +4,13 @@ export interface BadgeProps {
     isDisabled?: boolean;
     state?: State;
     hasClose?: boolean;
+    hasIcon?: boolean;
+    customIcon?: React.ReactNode | null;
     size?: "small" | "normal" | "large";
-    onClick?: () => void;
+    backgroundColor?: string;
+    textColor?: string;
+    onClick?: () => void | null;
+    hasHover?: boolean;
 }
-declare const Badge: ({ label, state, isDisabled, hasClose, onClick, size, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ label, state, isDisabled, hasClose, onClick, size, hasIcon, customIcon, backgroundColor, textColor, hasHover, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -10,8 +10,14 @@ const Badge = ({
   state = "info",
   isDisabled,
   hasClose = false,
-  onClick,
+  onClick = () => {
+  },
   size = "normal",
+  hasIcon = true,
+  customIcon = null,
+  backgroundColor = null,
+  textColor = null,
+  hasHover = true,
   ...rest
 }) => {
   const { theme } = useGenesis();
@@ -27,6 +33,7 @@ const Badge = ({
         style: {
           padding: "4px 4px"
         },
+        hasHover,
         ...rest,
         children: /* @__PURE__ */ jsx(
           "div",
@@ -38,8 +45,10 @@ const Badge = ({
             },
             children: getBadgeStateIcon(
               state,
-              theme.colors.status[state].onsurface,
-              isBadgeIconFilled
+              backgroundColor || theme.colors.status[state].onsurface,
+              isBadgeIconFilled,
+              hasIcon,
+              customIcon
             )
           }
         )
@@ -55,18 +64,22 @@ const Badge = ({
       state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
+      backgroundColor,
+      hasHover,
       ...rest,
       children: [
         getBadgeStateIcon(
           state,
-          theme.colors.status[state].onsurface,
-          isBadgeIconFilled
+          backgroundColor || theme.colors.status[state].onsurface,
+          isBadgeIconFilled,
+          hasIcon,
+          customIcon
         ),
         /* @__PURE__ */ jsx(
           Typography,
           {
             variant: size === "small" ? "label3" : "label2",
-            color: isDisabled ? theme.colors.status.disabled.default : theme.colors.status[state].onsurface,
+            color: isDisabled ? theme.colors.status.disabled.default : textColor || theme.colors.status[state].onsurface,
             isDisabled,
             children: label
           }

package/dist/components/Badge/__stories__/Badge.stories.d.ts

@@ -12,3 +12,5 @@ export declare const Hollow: Story;
 export declare const Disabled: Story;
 export declare const Icon: Story;
 export declare const WithClose: Story;
+export declare const NoIconNoCloseNoHover: Story;
+export declare const Custom: Story;

package/dist/components/Badge/styles.cjs

@@ -6,7 +6,7 @@ const getBorderColor = (theme, state) => {
   }
   return theme.colors.status[state].surface;
 };
-const getGenesisClass = (theme, state, label, disabled) => `
+const getGenesisClass = (theme, state, label, disabled, backgroundColor, textColor, hasHover) => `
   display: flex;
   gap: 4px;
   justify-content: center;
@@ -18,10 +18,10 @@ const getGenesisClass = (theme, state, label, disabled) => `
   padding-right: ${theme.components.badge["right-padding"]}px;
   border-radius: ${theme.components.badge.radius}px;
   border: 1px solid ${getBorderColor(theme, state)};
-  background-color: ${theme.colors.status[state].surface};
+  background-color: ${backgroundColor || theme.colors.status[state].surface};
 
   &:not(:disabled):hover {
-    background-color: ${theme.colors.status[state]["surface-hover"]};
+    ${hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
   }
 
   ${disabled ? `
@@ -36,8 +36,24 @@ const getGenesisClass = (theme, state, label, disabled) => `
   ` : ""}
 `;
 const Badge = styled.div`
-  ${({ theme, state, label, disabled }) => {
-  return getGenesisClass(theme, state, label, disabled);
+  ${({
+  theme,
+  state,
+  label,
+  disabled,
+  backgroundColor,
+  textColor,
+  hasHover
+}) => {
+  return getGenesisClass(
+    theme,
+    state,
+    label,
+    disabled,
+    backgroundColor,
+    textColor,
+    hasHover
+  );
 }}
 `;
 exports.Badge = Badge;

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

@@ -5,7 +5,10 @@ interface StyledBadgeProps {
     state?: State;
     label?: string;
     disabled?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    hasHover?: boolean;
 }
-export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean) => string;
+export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, backgroundColor?: string, textColor?: string, hasHover?: boolean) => string;
 export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProps>> & string;
 export {};

package/dist/components/Badge/styles.js

@@ -5,7 +5,7 @@ const getBorderColor = (theme, state) => {
   }
   return theme.colors.status[state].surface;
 };
-const getGenesisClass = (theme, state, label, disabled) => `
+const getGenesisClass = (theme, state, label, disabled, backgroundColor, textColor, hasHover) => `
   display: flex;
   gap: 4px;
   justify-content: center;
@@ -17,10 +17,10 @@ const getGenesisClass = (theme, state, label, disabled) => `
   padding-right: ${theme.components.badge["right-padding"]}px;
   border-radius: ${theme.components.badge.radius}px;
   border: 1px solid ${getBorderColor(theme, state)};
-  background-color: ${theme.colors.status[state].surface};
+  background-color: ${backgroundColor || theme.colors.status[state].surface};
 
   &:not(:disabled):hover {
-    background-color: ${theme.colors.status[state]["surface-hover"]};
+    ${hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
   }
 
   ${disabled ? `
@@ -35,8 +35,24 @@ const getGenesisClass = (theme, state, label, disabled) => `
   ` : ""}
 `;
 const Badge = styled.div`
-  ${({ theme, state, label, disabled }) => {
-  return getGenesisClass(theme, state, label, disabled);
+  ${({
+  theme,
+  state,
+  label,
+  disabled,
+  backgroundColor,
+  textColor,
+  hasHover
+}) => {
+  return getGenesisClass(
+    theme,
+    state,
+    label,
+    disabled,
+    backgroundColor,
+    textColor,
+    hasHover
+  );
 }}
 `;
 export {

package/dist/components/Card/__stories__/Card.stories.d.ts

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof Card>;
 export default meta;
 type Story = StoryObj<typeof Card>;
 export declare const CardStory: Story;
-export declare const SalesVersion2: Story;
 export declare const SalesCardStory: Story;

package/dist/components/Filters/Filter.d.ts

@@ -0,0 +1,23 @@
+import { RangePickerProps } from 'antd/lib/date-picker';
+export declare const FILTER_TYPE: {
+    readonly input: "input";
+    readonly select: "select";
+    readonly dateRange: "date-range";
+    readonly multiSelectCount: "multi-select-count";
+};
+export type Option = {
+    value: string;
+    label: string;
+};
+export interface FilterProps {
+    id: string;
+    label: string;
+    type: "input" | "select" | "date-range" | "multi-select-count";
+    value: string | string[] | number | RangePickerProps["value"];
+    options?: Option[];
+    onChange: (updatedFilter: FilterProps) => void;
+    selectedValues?: string[];
+    colSpan?: number;
+}
+declare const Filter: ({ id, label, type, value, options, onChange, selectedValues, colSpan, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
+export default Filter;

package/dist/components/Filters/FilterRow.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { FilterProps } from './Filter';
+export interface FilterRowProps {
+    filters: FilterProps[];
+    onChange?: (filters: any) => void;
+}
+declare const FilterRow: React.FC<FilterRowProps>;
+export default FilterRow;

package/dist/components/Filters/Filters.d.ts

@@ -0,0 +1,8 @@
+import { FilterProps } from './Filter';
+import { FilterRowProps } from './FilterRow';
+export interface FiltersProps {
+    onChange?: (newFilter: FilterProps, newFilters: FilterRowProps[]) => void;
+    filterRows: FilterRowProps[];
+}
+declare const Filters: ({ filterRows, onChange }: FiltersProps) => import("react/jsx-runtime").JSX.Element;
+export default Filters;

package/dist/components/Filters/__stories__/Filters.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Filters } from '../Filters';
+import { FilterRowProps } from '../FilterRow';
+declare const meta: Meta<typeof Filters>;
+export default meta;
+type Story = StoryObj<typeof Filters>;
+export declare const oneFilterRow: FilterRowProps[];
+export declare const OneFilterRowStory: Story;
+export declare const ThreeFilterRowsStory: Story;

package/dist/components/Filters/__tests__/Filters.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Filters/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Filters';
+export type { FiltersProps } from './Filters';

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

@@ -0,0 +1,26 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledFiltersProps {
+    theme?: GenesisTheme;
+    type?: "primary" | "secondary";
+    state?: "active" | "disabled";
+}
+export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+}, type?: string, state?: string) => string;
+export declare const StyledFilters: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFiltersProps>> & string;
+export declare const LinkButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const FilterRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLDivElement>;
+}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const FilterRowNoDivider: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLDivElement>;
+}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').InputProps, never>> & string & Omit<({ state, size, ...rest }: import('..').InputProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const StyledSelect: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').SelectProps, never>> & string & Omit<({ type, state, variant, defaultValue, onChange, size, width, value, ...rest }: import('..').SelectProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const StyledCol: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('antd').ColProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLDivElement>;
+}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').ColProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const HelperText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/components/Select/MultiSelectCount.cjs

@@ -6,8 +6,9 @@ const MultiSelectCount = ({
   options,
   onChange,
   width = 320,
-  selectedValues,
-  placeholder = "0 selected"
+  selectedValues = [],
+  placeholder = "0 selected",
+  variant = "multiSelectCount"
 }) => {
   const renderMultiSelectValue = () => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -19,7 +20,7 @@ const MultiSelectCount = ({
           paddingTop: "2px"
         },
         children: [
-          selectedValues.length,
+          (selectedValues || []).length,
           " selected"
         ]
       }
@@ -31,13 +32,16 @@ const MultiSelectCount = ({
       options,
       mode: "multiple",
       value: selectedValues,
+      defaultValue: selectedValues,
       onChange,
       maxTagCount: 0,
       suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),
       labelInValue: false,
       showSearch: false,
       maxTagPlaceholder: renderMultiSelectValue,
-      placeholder
+      placeholder,
+      variant,
+      style: { width }
     }
   ) });
 };

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

@@ -4,9 +4,10 @@ export interface MultiSelectCountProps {
         label: string;
     }[];
     onChange: (values: string[]) => void;
-    width?: number;
+    width?: number | string;
     selectedValues?: string[];
     placeholder?: string;
+    variant?: "multiSelectCount" | "none";
 }
-declare const MultiSelectCount: ({ options, onChange, width, selectedValues, placeholder, }: MultiSelectCountProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectCount: ({ options, onChange, width, selectedValues, placeholder, variant, }: MultiSelectCountProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectCount;

package/dist/components/Select/MultiSelectCount.js

@@ -5,8 +5,9 @@ const MultiSelectCount = ({
   options,
   onChange,
   width = 320,
-  selectedValues,
-  placeholder = "0 selected"
+  selectedValues = [],
+  placeholder = "0 selected",
+  variant = "multiSelectCount"
 }) => {
   const renderMultiSelectValue = () => {
     return /* @__PURE__ */ jsxs(
@@ -18,7 +19,7 @@ const MultiSelectCount = ({
           paddingTop: "2px"
         },
         children: [
-          selectedValues.length,
+          (selectedValues || []).length,
           " selected"
         ]
       }
@@ -30,13 +31,16 @@ const MultiSelectCount = ({
       options,
       mode: "multiple",
       value: selectedValues,
+      defaultValue: selectedValues,
       onChange,
       maxTagCount: 0,
       suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),
       labelInValue: false,
       showSearch: false,
       maxTagPlaceholder: renderMultiSelectValue,
-      placeholder
+      placeholder,
+      variant,
+      style: { width }
     }
   ) });
 };

package/dist/components/Select/Select.cjs

@@ -12,39 +12,68 @@ const Select = ({
   defaultValue,
   onChange,
   size = "normal",
+  width = 320,
+  value,
   ...rest
 }) => {
   const { breakpoint } = useGenesis.useGenesis();
   const [isFocused, setIsFocused] = React.useState(false);
   React.useEffect(() => {
-    const style = document.createElement("style");
-    style.textContent = `
+    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;
+      }
     `;
-    document.head.appendChild(style);
+    document.head.appendChild(style2);
     return () => {
-      document.head.removeChild(style);
+      document.head.removeChild(style2);
     };
   }, []);
   const customDropdownRender = (menu) => /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropdown, { type, state, children: /* @__PURE__ */ jsxRuntime.jsx(styles.StyledMenuItem, { type, state, children: menu }) });
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.SelectWrapper, { $isFocused: isFocused, type, children: /* @__PURE__ */ jsxRuntime.jsx(
-    styles.Select,
+  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
+  };
+  const normalStyle = {
+    display: "block",
+    position: "relative",
+    width
+  };
+  const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: /* @__PURE__ */ jsxRuntime.jsx(
+    styles.SelectWrapper,
     {
-      ...rest,
-      size,
-      defaultValue,
-      $variant: variant,
-      suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),
-      dropdownRender: customDropdownRender,
-      onFocus: () => setIsFocused(true),
-      onBlur: () => setIsFocused(false),
-      onChange: (value) => {
-        setIsFocused(false);
-        onChange == null ? void 0 : onChange(value);
-      }
+      $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 }
+        }
+      )
     }
   ) });
 };

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

@@ -8,10 +8,12 @@ export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
         value: string;
         label: React.ReactNode;
     }[];
-    variant?: "simple" | "none";
+    variant?: "simple" | "none" | "multiSelectCount";
     defaultValue?: string | string[] | number | number[] | unknown;
     onChange?: (value: string | string[]) => void;
     size?: "normal" | "small" | "large";
+    value?: string[] | string | number[] | number;
+    width?: number;
 }
-declare const Select: ({ type, state, variant, defaultValue, onChange, size, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ type, state, variant, defaultValue, onChange, size, width, value, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -11,39 +11,68 @@ const Select = ({
   defaultValue,
   onChange,
   size = "normal",
+  width = 320,
+  value,
   ...rest
 }) => {
   const { breakpoint } = useGenesis();
   const [isFocused, setIsFocused] = React__default.useState(false);
   useEffect(() => {
-    const style = document.createElement("style");
-    style.textContent = `
+    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;
+      }
     `;
-    document.head.appendChild(style);
+    document.head.appendChild(style2);
     return () => {
-      document.head.removeChild(style);
+      document.head.removeChild(style2);
     };
   }, []);
   const customDropdownRender = (menu) => /* @__PURE__ */ jsx(SelectDropdown, { type, state, children: /* @__PURE__ */ jsx(StyledMenuItem, { type, state, children: menu }) });
-  return /* @__PURE__ */ jsx(SelectWrapper, { $isFocused: isFocused, type, children: /* @__PURE__ */ jsx(
-    Select$1,
+  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
+  };
+  const normalStyle = {
+    display: "block",
+    position: "relative",
+    width
+  };
+  const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
+  return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+    SelectWrapper,
     {
-      ...rest,
-      size,
-      defaultValue,
-      $variant: variant,
-      suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),
-      dropdownRender: customDropdownRender,
-      onFocus: () => setIsFocused(true),
-      onBlur: () => setIsFocused(false),
-      onChange: (value) => {
-        setIsFocused(false);
-        onChange == null ? void 0 : onChange(value);
-      }
+      $isFocused: isFocused,
+      type,
+      $isMultiSelectCountAtZero: isMultiSelectCountAtZero,
+      children: /* @__PURE__ */ jsx(
+        Select$1,
+        {
+          ...rest,
+          size,
+          defaultValue,
+          $variant: variant,
+          suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),
+          dropdownRender: customDropdownRender,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          onChange: (value2) => {
+            setIsFocused(false);
+            onChange == null ? void 0 : onChange(value2);
+          },
+          style: { width }
+        }
+      )
     }
   ) });
 };

package/dist/components/Select/__stories__/MultiSelectCount.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof MultiSelectCount>;
 export declare const Default: Story;
 export declare const ThreeSelected: Story;
+export declare const AntDesignSelect: Story;

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

@@ -4,7 +4,7 @@ declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
-export declare const Filled: Story;
+export declare const DefaultSelectedValue: Story;
 export declare const Focussed: Story;
 export declare const Disabled: Story;
 export declare const Simple: Story;

package/dist/components/Select/styles.cjs

@@ -3,17 +3,18 @@ var styled = require("styled-components");
 var index = require("../../node_modules/antd/es/select/index.cjs");
 const SelectWrapper = styled.div`
   position: relative;
-  border: 2px solid transparent;
+  //border: 2px solid transparent;
   background-color: transparent;
   border-radius: 8px;
-  padding: 1px;
+  //padding: 1px;
   width: auto;
+  margin-top: ${({ $isMultiSelectCountAtZero }) => $isMultiSelectCountAtZero ? "-12px" : "0px"};
 
   ${({ $isFocused, theme: theme2, type = "primary" }) => $isFocused && `
     border: 2px solid ${theme2.colors[type].focussed.ringColor};
     background-color: transparent;
     border-radius: 8px;
-    padding: 1px;
+    //padding: 1px;
   `}
 
   .ant-select-dropdown {
@@ -57,7 +58,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
       min-width: 250px;
       height: ${size === "normal" || size === "large" ? "40px" : "32px"};
 
-      //background-color:  ${colors[type][state].backgroundColor}
+      background-color:  ${colors[type][state].backgroundColor}
       background-color: #fff;
       
       border-radius: ${borderRadius.BorderRadiusMd}px;
@@ -107,6 +108,8 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
 
           &.ant-select-selection-placeholder {
             padding-top: 6px;
+            inset-inline-end: 0px;
+            inset-inline-start: 0px;
           }
         }
 

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

@@ -12,6 +12,7 @@ interface SelectWrapperProps {
     type: keyof typeof TYPE;
     variant?: "simple" | "none";
     size?: "normal" | "small" | "large";
+    $isMultiSelectCountAtZero?: boolean;
 }
 export declare const SelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectWrapperProps>> & string;
 export declare const getGenesisClass: ({ colors, sizing, typography, borderRadius }: {

package/dist/components/Select/styles.js

@@ -2,17 +2,18 @@ import styled from "styled-components";
 import Select$1 from "../../node_modules/antd/es/select/index.js";
 const SelectWrapper = styled.div`
   position: relative;
-  border: 2px solid transparent;
+  //border: 2px solid transparent;
   background-color: transparent;
   border-radius: 8px;
-  padding: 1px;
+  //padding: 1px;
   width: auto;
+  margin-top: ${({ $isMultiSelectCountAtZero }) => $isMultiSelectCountAtZero ? "-12px" : "0px"};
 
   ${({ $isFocused, theme: theme2, type = "primary" }) => $isFocused && `
     border: 2px solid ${theme2.colors[type].focussed.ringColor};
     background-color: transparent;
     border-radius: 8px;
-    padding: 1px;
+    //padding: 1px;
   `}
 
   .ant-select-dropdown {
@@ -56,7 +57,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
       min-width: 250px;
       height: ${size === "normal" || size === "large" ? "40px" : "32px"};
 
-      //background-color:  ${colors[type][state].backgroundColor}
+      background-color:  ${colors[type][state].backgroundColor}
       background-color: #fff;
       
       border-radius: ${borderRadius.BorderRadiusMd}px;
@@ -106,6 +107,8 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
 
           &.ant-select-selection-placeholder {
             padding-top: 6px;
+            inset-inline-end: 0px;
+            inset-inline-start: 0px;
           }
         }
 

package/dist/components/Stories/position-checker.d.ts

@@ -0,0 +1,6 @@
+export declare const PositionChecker: ({ children, width, isVisible, }: {
+    children: React.ReactNode;
+    width?: number;
+    isVisible?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PositionChecker;

package/dist/components/Table/TableWithControls/TableWithControls.cjs

@@ -13,7 +13,6 @@ const TableWithControls = ({
     onChange(event);
   };
   const onTableChange = (pagination, filters, sorter) => {
-    console.log("Table changed:", pagination, filters, sorter);
     onChange({
       event: "tableChange",
       payload: { pagination, filters, sorter }

package/dist/components/Table/TableWithControls/TableWithControls.js

@@ -12,7 +12,6 @@ const TableWithControls = ({
     onChange(event);
   };
   const onTableChange = (pagination, filters, sorter) => {
-    console.log("Table changed:", pagination, filters, sorter);
     onChange({
       event: "tableChange",
       payload: { pagination, filters, sorter }

package/dist/utils/icon-util.cjs

@@ -44,10 +44,13 @@ const getIconColor = (state, theme) => {
       return theme.colors.status.info.onsurface;
   }
 };
-const getBadgeStateIcon = (state, color, isFilled = true) => {
-  if (!state) {
+const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
+  if (!state || !hasIcon) {
     return null;
   }
+  if (customIcon) {
+    return customIcon;
+  }
   if (!isFilled) {
     switch (state) {
       // isFilled is false

package/dist/utils/icon-util.d.ts

@@ -1,3 +1,3 @@
 export declare const getIcon: (name: string) => import("react/jsx-runtime").JSX.Element;
 export declare const getIconColor: (state: any, theme: any) => any;
-export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean) => import("react/jsx-runtime").JSX.Element;
+export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: any) => any;

package/dist/utils/icon-util.js

@@ -43,10 +43,13 @@ const getIconColor = (state, theme) => {
       return theme.colors.status.info.onsurface;
   }
 };
-const getBadgeStateIcon = (state, color, isFilled = true) => {
-  if (!state) {
+const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
+  if (!state || !hasIcon) {
     return null;
   }
+  if (customIcon) {
+    return customIcon;
+  }
   if (!isFilled) {
     switch (state) {
       // isFilled is false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",