@gobolt/genesis 0.2.5 → 0.2.7

package/dist/_virtual/index5.cjs

@@ -1 +1 @@
-"use strict";const r=require("./_commonjsHelpers.cjs"),e=require("../node_modules/copy-to-clipboard/index.cjs");var o=e.__require();const s=r.getDefaultExportFromCjs(o);module.exports=s;
+"use strict";const e=require("./_commonjsHelpers.cjs"),r=require("../node_modules/debounce/index.cjs");var o=r.__require();const s=e.getDefaultExportFromCjs(o);module.exports=s;

package/dist/_virtual/index5.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as o } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/copy-to-clipboard/index.js";
-var p = r();
-const a = /* @__PURE__ */ o(p);
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/debounce/index.js";
+var o = /* @__PURE__ */ r();
+const a = /* @__PURE__ */ e(o);
 export {
   a as default
 };

package/dist/_virtual/index6.cjs

@@ -1 +1 @@
-"use strict";const e=require("./_commonjsHelpers.cjs"),r=require("../node_modules/debounce/index.cjs");var o=r.__require();const s=e.getDefaultExportFromCjs(o);module.exports=s;
+"use strict";const r=require("./_commonjsHelpers.cjs"),e=require("../node_modules/copy-to-clipboard/index.cjs");var o=e.__require();const s=r.getDefaultExportFromCjs(o);module.exports=s;

package/dist/_virtual/index6.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/debounce/index.js";
-var o = /* @__PURE__ */ r();
-const a = /* @__PURE__ */ e(o);
+import { getDefaultExportFromCjs as o } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/copy-to-clipboard/index.js";
+var p = r();
+const a = /* @__PURE__ */ o(p);
 export {
   a as default
 };

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { default as React, MouseEvent } from 'react';
 import { ButtonProps as AntButtonProps } from 'antd/es/button';
 import { STATE } from '../../constants';
-type ButtonThemeType = "primary" | "secondary" | "tertiary" | "utility" | "icon";
+type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
 export interface ButtonProps extends Omit<AntButtonProps, "type" | "size"> {
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     children?: React.ReactNode;
@@ -10,6 +10,7 @@ export interface ButtonProps extends Omit<AntButtonProps, "type" | "size"> {
     isIconButton?: boolean;
     size?: "small" | "normal" | "large";
     isSelected?: boolean;
+    icon?: React.ReactNode;
 }
 declare const Button: React.FC<ButtonProps>;
 export default Button;

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

@@ -7,5 +7,6 @@ export declare const Focussed: Story;
 export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Tertiary: Story;
+export declare const Destructive: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;

package/dist/components/Button/icon-button-styles.d.ts

@@ -1,7 +1,7 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
 interface StyledIconButtonProps {
     theme?: GenesisTheme;
-    $themeType?: "primary" | "secondary" | "tertiary" | "utility" | "icon";
+    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
     children?: React.ReactNode;
     $isIconButton?: boolean;

package/dist/components/Button/styles.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("styled-components"),e=require("../../node_modules/antd/es/button/button.cjs"),i=(r,l,d,n)=>n&&(r==="normal"||r==="large")?`${d.Size2}px ${d.Size2}px`:n&&r==="small"?`${d.Size1}px ${d.Size1}px`:l==="utility"&&r==="small"?`${d.Size1_5}px ${d.Size2}px`:l==="utility"&&(r==="normal"||r==="large")?`${d.Size2_5}px ${d.Size3}px`:r==="small"?`${d.Size1_5}px ${d.Size4}px`:r==="normal"||r==="large"?`${d.Size2_5}px ${d.Size6}px`:`${d.Size2}px ${d.Size2}px`,c=r=>r==="normal"||r==="large"?"40px":r==="small"?"32px":"40px",x=({colors:r,sizing:l,borderRadius:d,components:n},o,a,t,u)=>(r[o][a].backgroundColor,`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),b=require("../../node_modules/antd/es/button/button.cjs"),x=(r,l,d,n)=>n&&(r==="normal"||r==="large")?`${d.Size2}px ${d.Size2}px`:n&&r==="small"?`${d.Size1}px ${d.Size1}px`:l==="utility"&&r==="small"?`${d.Size1_5}px ${d.Size2}px`:l==="utility"&&(r==="normal"||r==="large")?`${d.Size2_5}px ${d.Size3}px`:r==="small"?`${d.Size1_5}px ${d.Size4}px`:r==="normal"||r==="large"?`${d.Size2_5}px ${d.Size6}px`:`${d.Size2}px ${d.Size2}px`,i=r=>r==="normal"||r==="large"?"40px":r==="small"?"32px":"40px",c=(r,l)=>l?r==="normal"||r==="large"?"40px":r==="small"?"32px":"40px":"auto",f=({colors:r,sizing:l,borderRadius:d,components:n},o,t,a,u)=>(r[o][t].backgroundColor,`
       &.ant-btn {
       
-        color: ${r[o][a].color};
+        color: ${r[o][t].color};
         font-size: ${l.Size4}px;
         line-height: ${l.Size6}px;
         letter-spacing: 0;
@@ -9,18 +9,18 @@
         border-width: 1px;
         line-height: 1 !important;
 
-        width: auto; !important;
-        height: ${c(t)}; !important;
+        width: ${c(a,u)}; !important;
+        height: ${i(a)}; !important;
 
-        background-color: ${r[o][a].backgroundColor};
-        padding: ${i(t,o,l,u)};
+        background-color: ${r[o][t].backgroundColor};
+        padding: ${x(a,o,l,u)};
 
         box-shadow: ${o==="utility"?"0px 1px 2px 0px #00000026":"none"};
 
         border-radius: ${d.BorderRadiusMd}px;
         gap: ${n.button.gap}px;
         border-style: solid;
-        border-color: ${r[o][a].borderColor};
+        border-color: ${r[o][t].borderColor};
         
         transition: all 0.2s ease-in-out;
 
@@ -55,12 +55,12 @@
     
       }
         
-      `),f=(r,l,d,n,o)=>`
+      `),p=(r,l,d,n,o)=>`
     &.ant-btn {
       font-family: 'Inter', sans-serif;
  
-      ${x(r,l,d,o,n)}
+      ${f(r,l,d,o,n)}
     } 
-`,p=b(e)`
-  ${({theme:r,$themeType:l,$state:d,children:n,$isIconButton:o,size:a})=>f(r,l,d,o,a)}
-`;exports.Button=p;
+`,g=e(b)`
+  ${({theme:r,$themeType:l,$state:d,children:n,$isIconButton:o,size:t})=>p(r,l,d,o,t)}
+`;exports.Button=g;

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

@@ -2,7 +2,7 @@ import { ButtonProps as AntButtonProps } from 'antd/es/button';
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
 interface StyledButtonProps extends Omit<AntButtonProps, "type" | "size"> {
     theme?: GenesisTheme;
-    $themeType?: "primary" | "secondary" | "tertiary" | "utility" | "icon";
+    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
     children?: React.ReactNode;
     $isIconButton?: boolean;

package/dist/components/Button/styles.js

@@ -1,6 +1,6 @@
-import b from "styled-components";
-import x from "../../node_modules/antd/es/button/button.js";
-const i = (r, l, d, a) => a && (r === "normal" || r === "large") ? `${d.Size2}px ${d.Size2}px` : a && r === "small" ? `${d.Size1}px ${d.Size1}px` : l === "utility" && r === "small" ? `${d.Size1_5}px ${d.Size2}px` : l === "utility" && (r === "normal" || r === "large") ? `${d.Size2_5}px ${d.Size3}px` : r === "small" ? `${d.Size1_5}px ${d.Size4}px` : r === "normal" || r === "large" ? `${d.Size2_5}px ${d.Size6}px` : `${d.Size2}px ${d.Size2}px`, c = (r) => r === "normal" || r === "large" ? "40px" : r === "small" ? "32px" : "40px", e = ({ colors: r, sizing: l, borderRadius: d, components: a }, o, n, t, u) => (r[o][n].backgroundColor, `
+import x from "styled-components";
+import b from "../../node_modules/antd/es/button/button.js";
+const i = (r, l, d, a) => a && (r === "normal" || r === "large") ? `${d.Size2}px ${d.Size2}px` : a && r === "small" ? `${d.Size1}px ${d.Size1}px` : l === "utility" && r === "small" ? `${d.Size1_5}px ${d.Size2}px` : l === "utility" && (r === "normal" || r === "large") ? `${d.Size2_5}px ${d.Size3}px` : r === "small" ? `${d.Size1_5}px ${d.Size4}px` : r === "normal" || r === "large" ? `${d.Size2_5}px ${d.Size6}px` : `${d.Size2}px ${d.Size2}px`, e = (r) => r === "normal" || r === "large" ? "40px" : r === "small" ? "32px" : "40px", c = (r, l) => l ? r === "normal" || r === "large" ? "40px" : r === "small" ? "32px" : "40px" : "auto", f = ({ colors: r, sizing: l, borderRadius: d, components: a }, o, n, t, u) => (r[o][n].backgroundColor, `
       &.ant-btn {
       
         color: ${r[o][n].color};
@@ -11,8 +11,8 @@ const i = (r, l, d, a) => a && (r === "normal" || r === "large") ? `${d.Size2}px
         border-width: 1px;
         line-height: 1 !important;
 
-        width: auto; !important;
-        height: ${c(t)}; !important;
+        width: ${c(t, u)}; !important;
+        height: ${e(t)}; !important;
 
         background-color: ${r[o][n].backgroundColor};
         padding: ${i(t, o, l, u)};
@@ -57,14 +57,14 @@ const i = (r, l, d, a) => a && (r === "normal" || r === "large") ? `${d.Size2}px
     
       }
         
-      `), f = (r, l, d, a, o) => `
+      `), p = (r, l, d, a, o) => `
     &.ant-btn {
       font-family: 'Inter', sans-serif;
  
-      ${e(r, l, d, o, a)}
+      ${f(r, l, d, o, a)}
     } 
-`, S = b(x)`
-  ${({ theme: r, $themeType: l, $state: d, children: a, $isIconButton: o, size: n }) => f(
+`, S = x(b)`
+  ${({ theme: r, $themeType: l, $state: d, children: a, $isIconButton: o, size: n }) => p(
   r,
   l,
   d,

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

@@ -4,3 +4,5 @@ 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/Input/Input.cjs

@@ -1 +1 @@
-"use strict";const d=require("react/jsx-runtime"),r=require("./styles.cjs"),l=require("../../constants/index.cjs"),o=({state:e=l.STATE.active,size:s="normal",...i})=>{const{type:c,...t}=i,n=s==="normal"?"middle":s;return d.jsx(r.Input,{size:n,state:e,disabled:e==="disabled"||i.disabled,...t})};module.exports=o;
+"use strict";const o=require("react/jsx-runtime"),t=require("react"),c=require("./styles.cjs"),a=require("../../constants/index.cjs"),l=require("../shared/DropdownChevron.cjs"),u=require("../../node_modules/antd/es/select/index.cjs"),f=({state:n=a.STATE.active,size:d="normal",...e})=>{const{type:x,...i}=e,r=d==="normal"?"middle":d,s=t.isValidElement(e.addonAfter)&&e.addonAfter.type===u?t.cloneElement(e.addonAfter,{suffixIcon:o.jsx(l,{})}):e.addonAfter;return o.jsx(c.Input,{size:r,state:n,disabled:n==="disabled"||e.disabled,...i,addonAfter:s})};module.exports=f;

package/dist/components/Input/Input.js

@@ -1,22 +1,28 @@
-import { jsx as a } from "react/jsx-runtime";
-import { Input as e } from "./styles.js";
-import { STATE as l } from "../../constants/index.js";
-const u = ({
-  state: i = l.active,
-  size: d = "normal",
+import { jsx as e } from "react/jsx-runtime";
+import n from "react";
+import { Input as m } from "./styles.js";
+import { STATE as f } from "../../constants/index.js";
+import l from "../shared/DropdownChevron.js";
+import p from "../../node_modules/antd/es/select/index.js";
+const x = ({
+  state: d = f.active,
+  size: t = "normal",
   ...o
 }) => {
-  const { type: r, ...t } = o;
-  return /* @__PURE__ */ a(
-    e,
+  const { type: c, ...r } = o, a = t === "normal" ? "middle" : t, i = n.isValidElement(o.addonAfter) && o.addonAfter.type === p ? n.cloneElement(o.addonAfter, {
+    suffixIcon: /* @__PURE__ */ e(l, {})
+  }) : o.addonAfter;
+  return /* @__PURE__ */ e(
+    m,
     {
-      size: d === "normal" ? "middle" : d,
-      state: i,
-      disabled: i === "disabled" || o.disabled,
-      ...t
+      size: a,
+      state: d,
+      disabled: d === "disabled" || o.disabled,
+      ...r,
+      addonAfter: i
     }
   );
 };
 export {
-  u as default
+  x as default
 };

package/dist/components/Notification/NotificationBadge/styles.cjs

@@ -4,18 +4,32 @@
   position: absolute;
   justify-content: center;
   align-items: center;
-  top: -10px;
-  left: 16px;
+  top: -16px;
+  right: -16px;
+  box-shadow: -2px 2px white;
   width: 20px;
   height: 20px;
   border: 2px solid ${({color:e})=>e};
   border-radius: 50%;
   box-sizing: border-box;
   background-color: white;
-`,r=t.div`
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 2px solid white;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+  }
+`,i=t.div`
   display: flex;
   position: relative;
-`,i=t.div`
+`,r=t.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -25,4 +39,4 @@
   border-radius: 50%;
   border: 1px solid ${({theme:e})=>e.colors.surface.border};
   background-color: ${({theme:e})=>e.colors.surface.default};
-`;exports.Badge=r;exports.BadgeState=o;exports.BadgeWrapper=i;
+`;exports.Badge=i;exports.BadgeState=o;exports.BadgeWrapper=r;

package/dist/components/Notification/NotificationBadge/styles.js

@@ -5,14 +5,28 @@ const i = o.div`
   position: absolute;
   justify-content: center;
   align-items: center;
-  top: -10px;
-  left: 16px;
+  top: -16px;
+  right: -16px;
+  box-shadow: -2px 2px white;
   width: 20px;
   height: 20px;
   border: 2px solid ${({ color: e }) => e};
   border-radius: 50%;
   box-sizing: border-box;
   background-color: white;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 2px solid white;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+  }
 `, r = o.div`
   display: flex;
   position: relative;

package/dist/components/SegmentedControls/styles.cjs

@@ -1,14 +1,27 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),a=require("../../node_modules/antd/es/segmented/index.cjs"),s=({colors:e,borderRadius:r,sizing:n},t="primary",o="active")=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("styled-components"),d=require("../../node_modules/antd/es/segmented/index.cjs"),r=({colors:e,borderRadius:n,sizing:i,typography:o},t="primary",a="active")=>`
   &.ant-segmented {
-    border-radius: ${r.BorderRadiusMd};
+    border-radius: ${n.BorderRadiusMd};
     color: ${e.onsurface.copy};
-    
+    font-family: ${o.fontFamily};
+    color: ${e.onsurface.copy};
+
+  
+    :where(.css-dev-only-do-not-override-240cud).ant-segmented &.ant-segmented-item-icon + * {
+      margin-inline-start: 4px !important;
+    }
+
+    .ant-segmented-item-label span + span {
+      margin-inline-start: 4px !important;
+      font-family: ${o.fontFamily};
+      color: ${e.onsurface.copy};
+    }
+  
     .ant-segmented-item {
       color: ${e[t].text};
       transition: all 0.3s;
       
       &-selected {
-        background: ${e[t][o]};
+        background: ${e[t][a]};
         color: ${e[t].textContrast};
       }
       
@@ -17,6 +30,7 @@
       }
     }
   }
-`,d=i(a)`
-  ${({theme:e,type:r="primary",state:n="active"})=>s(e,r,n)}
-`;exports.SegmentedControls=d;exports.getGenesisClass=s;
+
+`,m=s(d)`
+  ${({theme:e,type:n="primary",state:i="active"})=>r(e,n,i)}
+`;exports.SegmentedControls=m;exports.getGenesisClass=r;

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

@@ -4,7 +4,7 @@ interface StyledSegmentedControlsProps {
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
 }
-export declare const getGenesisClass: ({ colors, borderRadius, sizing }: GenesisTheme, type?: string, state?: string) => string;
+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>>;

package/dist/components/SegmentedControls/styles.js

@@ -1,16 +1,29 @@
-import a from "styled-components";
-import i from "../../node_modules/antd/es/segmented/index.js";
-const s = ({ colors: e, borderRadius: r, sizing: o }, t = "primary", n = "active") => `
+import i from "styled-components";
+import m from "../../node_modules/antd/es/segmented/index.js";
+const s = ({ colors: e, borderRadius: n, sizing: o, typography: a }, t = "primary", r = "active") => `
   &.ant-segmented {
-    border-radius: ${r.BorderRadiusMd};
+    border-radius: ${n.BorderRadiusMd};
     color: ${e.onsurface.copy};
-    
+    font-family: ${a.fontFamily};
+    color: ${e.onsurface.copy};
+
+  
+    :where(.css-dev-only-do-not-override-240cud).ant-segmented &.ant-segmented-item-icon + * {
+      margin-inline-start: 4px !important;
+    }
+
+    .ant-segmented-item-label span + span {
+      margin-inline-start: 4px !important;
+      font-family: ${a.fontFamily};
+      color: ${e.onsurface.copy};
+    }
+  
     .ant-segmented-item {
       color: ${e[t].text};
       transition: all 0.3s;
       
       &-selected {
-        background: ${e[t][n]};
+        background: ${e[t][r]};
         color: ${e[t].textContrast};
       }
       
@@ -19,12 +32,13 @@ const s = ({ colors: e, borderRadius: r, sizing: o }, t = "primary", n = "active
       }
     }
   }
-`, c = a(
-  i
+
+`, l = i(
+  m
 )`
-  ${({ theme: e, type: r = "primary", state: o = "active" }) => s(e, r, o)}
+  ${({ theme: e, type: n = "primary", state: o = "active" }) => s(e, n, o)}
 `;
 export {
-  c as SegmentedControls,
+  l as SegmentedControls,
   s as getGenesisClass
 };

package/dist/components/Select/Select.cjs

@@ -1,6 +1,6 @@
-"use strict";const t=require("react/jsx-runtime"),d=require("react"),p=require("../../constants/index.cjs"),x=require("./DropdownChevron.cjs"),s=require("./styles.cjs"),m=require("../../providers/useGenesis.cjs"),f=({type:r=p.TYPE.primary,state:c,variant:u="none",defaultValue:j,onChange:n,...i})=>{const{breakpoint:q}=m.useGenesis(),[l,o]=d.useState(!1);d.useEffect(()=>{const e=document.createElement("style");return e.textContent=`
+"use strict";const s=require("react/jsx-runtime"),d=require("react"),x=require("../../constants/index.cjs"),m=require("../shared/DropdownChevron.cjs"),t=require("./styles.cjs"),f=require("../../providers/useGenesis.cjs"),j=({type:r=x.TYPE.primary,state:c,variant:u="none",defaultValue:i,onChange:n,...l})=>{const{breakpoint:q}=f.useGenesis(),[a,o]=d.useState(!1);d.useEffect(()=>{const e=document.createElement("style");return e.textContent=`
       .ant-select-dropdown {
         padding: 0px !important;
         border-radius: 0px !important;
       }
-    `,document.head.appendChild(e),()=>{document.head.removeChild(e)}},[]);const a=e=>t.jsx(s.SelectDropdown,{type:r,state:c,children:t.jsx(s.StyledMenuItem,{type:r,state:c,children:e})});return t.jsx(s.SelectWrapper,{$isFocused:l,type:r,children:t.jsx(s.Select,{...i,$variant:u,suffixIcon:t.jsx(x,{}),dropdownRender:a,onFocus:()=>o(!0),onBlur:()=>o(!1),onChange:e=>{o(!1),n==null||n(e)}})})};module.exports=f;
+    `,document.head.appendChild(e),()=>{document.head.removeChild(e)}},[]);const p=e=>s.jsx(t.SelectDropdown,{type:r,state:c,children:s.jsx(t.StyledMenuItem,{type:r,state:c,children:e})});return s.jsx(t.SelectWrapper,{$isFocused:a,type:r,children:s.jsx(t.Select,{...l,defaultValue:i,$variant:u,suffixIcon:s.jsx(m,{}),dropdownRender:p,onFocus:()=>o(!0),onBlur:()=>o(!1),onChange:e=>{o(!1),n==null||n(e)}})})};module.exports=j;

package/dist/components/Select/Select.js

@@ -1,19 +1,19 @@
 import { jsx as o } from "react/jsx-runtime";
-import m, { useEffect as u } from "react";
-import { TYPE as i } from "../../constants/index.js";
-import p from "./DropdownChevron.js";
-import { SelectWrapper as a, Select as f, SelectDropdown as S, StyledMenuItem as w } from "./styles.js";
-import { useGenesis as x } from "../../providers/useGenesis.js";
+import p, { useEffect as l } from "react";
+import { TYPE as u } from "../../constants/index.js";
+import a from "../shared/DropdownChevron.js";
+import { SelectWrapper as f, Select as S, SelectDropdown as w, StyledMenuItem as x } from "./styles.js";
+import { useGenesis as h } from "../../providers/useGenesis.js";
 const y = ({
-  type: t = i.primary,
+  type: t = u.primary,
   state: d,
   variant: s = "none",
-  defaultValue: h,
+  defaultValue: c,
   onChange: r,
-  ...c
+  ...m
 }) => {
-  const { breakpoint: D } = x(), [l, n] = m.useState(!1);
-  return u(() => {
+  const { breakpoint: D } = h(), [i, n] = p.useState(!1);
+  return l(() => {
     const e = document.createElement("style");
     return e.textContent = `
       .ant-select-dropdown {
@@ -23,13 +23,14 @@ const y = ({
     `, document.head.appendChild(e), () => {
       document.head.removeChild(e);
     };
-  }, []), /* @__PURE__ */ o(a, { $isFocused: l, type: t, children: /* @__PURE__ */ o(
-    f,
+  }, []), /* @__PURE__ */ o(f, { $isFocused: i, type: t, children: /* @__PURE__ */ o(
+    S,
     {
-      ...c,
+      ...m,
+      defaultValue: c,
       $variant: s,
-      suffixIcon: /* @__PURE__ */ o(p, {}),
-      dropdownRender: (e) => /* @__PURE__ */ o(S, { type: t, state: d, children: /* @__PURE__ */ o(w, { type: t, state: d, children: e }) }),
+      suffixIcon: /* @__PURE__ */ o(a, {}),
+      dropdownRender: (e) => /* @__PURE__ */ o(w, { type: t, state: d, children: /* @__PURE__ */ o(x, { type: t, state: d, children: e }) }),
       onFocus: () => n(!0),
       onBlur: () => n(!1),
       onChange: (e) => {

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

@@ -8,3 +8,4 @@ export declare const Filled: Story;
 export declare const Focussed: Story;
 export declare const Disabled: Story;
 export declare const Simple: Story;
+export declare const MultiSelect: Story;

package/dist/components/Select/styles.cjs

@@ -6,8 +6,8 @@
   padding: 1px;
   width: auto;
 
-  ${({$isFocused:e,theme:o,type:t="primary"})=>e&&`
-    border: 2px solid ${o.colors[t].focussed.ringColor};
+  ${({$isFocused:e,theme:o,type:r="primary"})=>e&&`
+    border: 2px solid ${o.colors[r].focussed.ringColor};
     background-color: transparent;
     border-radius: 8px;
     padding: 1px;
@@ -16,7 +16,7 @@
   .ant-select-dropdown {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,l=e=>`all ${e.motion.veryfast}s ease-in-out`,p=(e,o,t,r)=>`
+`,l=e=>`all ${e.motion.veryfast}s ease-in-out`,p=(e,o,r,t)=>`
     &.ant-select {
       background-color: ${e.surface.secondary};
       border-color: ${e.surface.secondary};
@@ -25,11 +25,11 @@
       .ant-select-selector {
         background-color: ${e.surface.secondary};
         border-color: ${e.surface.secondary};
-        border-radius: ${r.BorderRadiusSm}px;
+        border-radius: ${t.BorderRadiusSm}px;
         margin: 0px;  
       }
     }
-  `,u=({colors:e,sizing:o,typography:t,borderRadius:r},n,i,s)=>s==="simple"?p(e,n,i,r):`
+  `,u=({colors:e,sizing:o,typography:r,borderRadius:t},n,i,s)=>s==="simple"?p(e,n,i,t):`
     &.ant-select {
       color: ${e.input};
       font-size: ${o.Size4}px;
@@ -40,13 +40,40 @@
 
       width: 100%; 
       min-width: 250px;
-      height: 32px;
+      height: auto;
+      min-height: 32px;
 
       background-color:  ${e[n][i].backgroundColor}
       
-      border-radius: ${r.BorderRadiusMd}px;
+      border-radius: ${t.BorderRadiusMd}px;
       gap: ${o.Size2}px;
 
+      .ant-select-selector {
+        border-color: ${e.inputs.surface.border};
+        padding-left: 4px;
+        height: auto !important;
+        min-height: 32px !important;
+
+        .ant-select-selection-overflow {
+          flex-wrap: wrap;
+          gap: 4px;
+          padding: 4px 0;
+        }
+
+        .ant-select-selection-item {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
+      }
+
+      .ant-select-selection-item {
+        padding-left: 4px;
+      }
+
+      .ant-segmented-item-label span + span {
+        margin-inline-start: 4px !important;
+      }
+
       &:active {
         background-color: ${e[n].pressed.backgroundColor};
         border-color: ${e[n].pressed.borderColor};
@@ -124,6 +151,6 @@
   &.ant-slide-up-leave {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,$=a(d)`
-  ${({theme:e,type:o="primary",state:t="active",$variant:r="none"})=>u(e,o,t,r)}
-`;exports.Select=$;exports.SelectDropdown=b;exports.SelectWrapper=c;exports.StyledMenuItem=m;
+`,g=a(d)`
+  ${({theme:e,type:o="primary",state:r="active",$variant:t="none"})=>u(e,o,r,t)}
+`;exports.Select=g;exports.SelectDropdown=b;exports.SelectWrapper=c;exports.StyledMenuItem=m;