@gobolt/genesis 0.2.5 → 0.2.6

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/styles.cjs

@@ -47,6 +47,19 @@
       border-radius: ${r.BorderRadiusMd}px;
       gap: ${o.Size2}px;
 
+      .ant-select-selector {
+        border-color: ${e.inputs.surface.border};
+        padding-left: 4px;
+      }
+
+      .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 +137,6 @@
   &.ant-slide-up-leave {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,$=a(d)`
+`,g=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;
+`;exports.Select=g;exports.SelectDropdown=b;exports.SelectWrapper=c;exports.StyledMenuItem=m;

package/dist/components/Select/styles.js

@@ -49,6 +49,19 @@ const b = a.div`
       border-radius: ${r.BorderRadiusMd}px;
       gap: ${o.Size2}px;
 
+      .ant-select-selector {
+        border-color: ${e.inputs.surface.border};
+        padding-left: 4px;
+      }
+
+      .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};

package/dist/components/shared/DropdownChevron.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),l=require("../../providers/useGenesis.cjs"),o=s=>{const{theme:n}=l.useGenesis();return e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...s,children:e.jsx("path",{fill:n.colors.inputs.onsurface.placeholder,fillRule:"evenodd",d:"M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})})};module.exports=o;

package/dist/components/shared/DropdownChevron.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useGenesis as n } from "../../providers/useGenesis.js";
+const s = (l) => {
+  const { theme: o } = n();
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 20,
+      height: 20,
+      fill: "none",
+      ...l,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          fill: o.colors.inputs.onsurface.placeholder,
+          fillRule: "evenodd",
+          d: "M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+};
+export {
+  s as default
+};

package/dist/constants/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={primary:"primary",secondary:"secondary",tertiary:"tertiary",utility:"utility",icon:"icon"},i={wide:"wide",medium:"medium",narrow:"narrow"},s={active:"active",hover:"hover",pressed:"pressed",focussed:"focus",disabled:"disabled",error:"error",success:"success",warning:"warning",progress:"progress",info:"info",filled:"filled",generic:"generic",removed:"removed",hollow:"hollow"},r={display1:"display1",display2:"display2",display3:"display3",heading1:"heading1",heading2:"heading2",heading3:"heading3",subHeading1:"subHeading1",subHeading2:"subHeading2",subHeading3:"subHeading3",body1:"body1",body2:"body2",body3:"body3",body4:"body4",body5:"body5",message:"message",overline1:"overline1",overline2:"overline2",overline3:"overline3",label1:"label1",label2:"label2",label3:"label3",link1:"link1",link2:"link2",link3:"link3",digits1:"digits1",digits2:"digits2",digits3:"digits3"},n={primary:"primary",secondary:"secondary",tertiary:"tertiary"},a={small:"small",medium:"medium",large:"large",standard:"standard"},d={appointment:"appointment",asn:"asn",inventory:"inventory",parcel:"parcel",product:"product",route:"route",shipment:"shipment",shoppingCart:"shopping cart",system:"system"},o={TYPE:e,BREAKPOINTS:i,STATE:s,TYPOGRAPHY_VARIANT:r,BUTTON_VARIANT:n,SIZE:a,BADGE:d};exports.BADGE=d;exports.BREAKPOINTS=i;exports.BUTTON_VARIANT=n;exports.SIZE=a;exports.STATE=s;exports.TYPE=e;exports.TYPOGRAPHY_VARIANT=r;exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={primary:"primary",secondary:"secondary",tertiary:"tertiary",destructive:"destructive",utility:"utility",icon:"icon"},i={wide:"wide",medium:"medium",narrow:"narrow"},s={active:"active",hover:"hover",pressed:"pressed",focussed:"focus",disabled:"disabled",error:"error",success:"success",warning:"warning",progress:"progress",info:"info",filled:"filled",generic:"generic",removed:"removed",hollow:"hollow"},r={display1:"display1",display2:"display2",display3:"display3",heading1:"heading1",heading2:"heading2",heading3:"heading3",subHeading1:"subHeading1",subHeading2:"subHeading2",subHeading3:"subHeading3",body1:"body1",body2:"body2",body3:"body3",body4:"body4",body5:"body5",message:"message",overline1:"overline1",overline2:"overline2",overline3:"overline3",label1:"label1",label2:"label2",label3:"label3",link1:"link1",link2:"link2",link3:"link3",digits1:"digits1",digits2:"digits2",digits3:"digits3"},d={primary:"primary",secondary:"secondary",tertiary:"tertiary"},n={small:"small",medium:"medium",large:"large",standard:"standard"},a={appointment:"appointment",asn:"asn",inventory:"inventory",parcel:"parcel",product:"product",route:"route",shipment:"shipment",shoppingCart:"shopping cart",system:"system"},o={TYPE:e,BREAKPOINTS:i,STATE:s,TYPOGRAPHY_VARIANT:r,BUTTON_VARIANT:d,SIZE:n,BADGE:a};exports.BADGE=a;exports.BREAKPOINTS=i;exports.BUTTON_VARIANT=d;exports.SIZE=n;exports.STATE=s;exports.TYPE=e;exports.TYPOGRAPHY_VARIANT=r;exports.default=o;

package/dist/constants/index.d.ts

@@ -2,6 +2,7 @@ export declare const TYPE: {
     primary: string;
     secondary: string;
     tertiary: string;
+    destructive: string;
     utility: string;
     icon: string;
 };
@@ -82,6 +83,7 @@ declare const _default: {
         primary: string;
         secondary: string;
         tertiary: string;
+        destructive: string;
         utility: string;
         icon: string;
     };

package/dist/constants/index.js

@@ -2,6 +2,7 @@ const e = {
   primary: "primary",
   secondary: "secondary",
   tertiary: "tertiary",
+  destructive: "destructive",
   utility: "utility",
   icon: "icon"
 }, i = {
@@ -23,7 +24,7 @@ const e = {
   generic: "generic",
   removed: "removed",
   hollow: "hollow"
-}, n = {
+}, r = {
   display1: "display1",
   display2: "display2",
   display3: "display3",
@@ -51,16 +52,16 @@ const e = {
   digits1: "digits1",
   digits2: "digits2",
   digits3: "digits3"
-}, r = {
+}, d = {
   primary: "primary",
   secondary: "secondary",
   tertiary: "tertiary"
-}, a = {
+}, n = {
   small: "small",
   medium: "medium",
   large: "large",
   standard: "standard"
-}, d = {
+}, a = {
   appointment: "appointment",
   asn: "asn",
   inventory: "inventory",
@@ -74,18 +75,18 @@ const e = {
   TYPE: e,
   BREAKPOINTS: i,
   STATE: s,
-  TYPOGRAPHY_VARIANT: n,
-  BUTTON_VARIANT: r,
-  SIZE: a,
-  BADGE: d
+  TYPOGRAPHY_VARIANT: r,
+  BUTTON_VARIANT: d,
+  SIZE: n,
+  BADGE: a
 };
 export {
-  d as BADGE,
+  a as BADGE,
   i as BREAKPOINTS,
-  r as BUTTON_VARIANT,
-  a as SIZE,
+  d as BUTTON_VARIANT,
+  n as SIZE,
   s as STATE,
   e as TYPE,
-  n as TYPOGRAPHY_VARIANT,
+  r as TYPOGRAPHY_VARIANT,
   o as default
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./constants/index.cjs"),r=require("./styles/global-styles.cjs"),o=require("./components/Avatar/Avatar.cjs"),t=require("./components/Badge/Badge.cjs"),s=require("./components/Breadcrumb/Breadcrumb.cjs"),i=require("./components/Button/Button.cjs"),n=require("./components/Button/UtilityButton.cjs"),u=require("./components/Button/IconButton.cjs"),c=require("./components/Card/Card.cjs"),a=require("./components/Checkbox/Checkbox.cjs"),l=require("./components/DatePicker/DatePicker.cjs"),q=require("./components/DateRangePicker/DateRangePicker.cjs"),b=require("./components/ErrorBoundary/ErrorBoundary.cjs"),d=require("./components/ErrorBoundaryFallback/ErrorBoundaryFallback.cjs"),T=require("./components/Form/Form.cjs"),y=require("./components/Input/Input.cjs"),g=require("./components/Layout/Layout.cjs"),p=require("./components/Message/Message.cjs"),S=require("./components/Notification/Notification.cjs"),B=require("./components/Popover/Popover.cjs"),h=require("./components/Progress/Progress.cjs"),P=require("./components/Radio/RadioGroup.cjs"),C=require("./components/Row/Row.cjs"),G=require("./components/SegmentedControls/SegmentedControls.cjs"),k=require("./components/Select/Select.cjs"),v=require("./components/Shapes/Shapes.cjs"),m=require("./components/Switch/Switch.cjs"),E=require("./components/Table/Table.cjs"),R=require("./components/Table/TableWithControls/TableWithControls.cjs"),f=require("./components/Tabs/Tabs.cjs"),I=require("./components/Tile/Tile.cjs"),W=require("./components/Toast/Toast.cjs"),w=require("./components/Tooltip/Tooltip.cjs"),D=require("./components/Typography/Typography.cjs"),F=require("./providers/GenesisProvider.cjs"),x=require("./components/Table/useTable.cjs"),M=require("./components/Table/TableWithControls/useTableWithControls.cjs"),N=require("./providers/useGenesis.cjs");exports.GENESIS=e.default;exports.GlobalStyles=r.GlobalStyles;exports.Avatar=o;exports.Badge=t;exports.Breadcrumb=s;exports.Button=i;exports.UtilityButton=n;exports.IconButton=u;exports.Card=c;exports.Checkbox=a;exports.DatePicker=l;exports.DateRangePicker=q;exports.ErrorBoundary=b;exports.ErrorBoundaryFallback=d;exports.Form=T.default;exports.Input=y;exports.Layout=g;exports.Message=p;exports.Notification=S;exports.Popover=B;exports.Progress=h;exports.RadioGroup=P;exports.Row=C;exports.SegmentedControls=G;exports.Select=k;exports.Shapes=v;exports.Switch=m;exports.Table=E;exports.TableWithControls=R;exports.Tabs=f;exports.Tile=I;exports.Toast=W;exports.Tooltip=w;exports.Typography=D;exports.GenesisProvider=F.GenesisProvider;exports.useTable=x.useTable;exports.useTableWithControls=M.useTableWithControls;exports.useGenesis=N.useGenesis;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./constants/index.cjs"),o=require("./styles/global-styles.cjs"),t=require("./components/Avatar/Avatar.cjs"),s=require("./components/Badge/Badge.cjs"),i=require("./components/Breadcrumb/Breadcrumb.cjs"),n=require("./components/Button/Button.cjs"),u=require("./components/Button/UtilityButton.cjs"),a=require("./components/Button/IconButton.cjs"),c=require("./components/Card/Card.cjs"),l=require("./components/Checkbox/Checkbox.cjs"),q=require("./components/DatePicker/DatePicker.cjs"),T=require("./components/DateRangePicker/DateRangePicker.cjs"),b=require("./components/ErrorBoundary/ErrorBoundary.cjs"),d=require("./components/ErrorBoundaryFallback/ErrorBoundaryFallback.cjs"),y=require("./components/Form/Form.cjs"),g=require("./components/Input/Input.cjs"),h=require("./components/Layout/Layout.cjs"),p=require("./components/Message/Message.cjs"),S=require("./components/Notification/Notification.cjs"),k=require("./components/Popover/Popover.cjs"),B=require("./components/Progress/Progress.cjs"),m=require("./components/Radio/RadioGroup.cjs"),P=require("./components/Row/Row.cjs"),C=require("./components/SegmentedControls/SegmentedControls.cjs"),G=require("./components/Select/Select.cjs"),v=require("./components/Shapes/Shapes.cjs"),E=require("./components/Switch/Switch.cjs"),R=require("./components/Table/Table.cjs"),f=require("./components/Table/TableWithControls/TableWithControls.cjs"),I=require("./components/Tabs/Tabs.cjs"),W=require("./components/Tile/Tile.cjs"),w=require("./components/Toast/Toast.cjs"),z=require("./components/Tooltip/Tooltip.cjs"),D=require("./components/Typography/Typography.cjs"),F=require("./providers/GenesisProvider.cjs"),x=require("./components/Table/useTable.cjs"),M=require("./components/Table/TableWithControls/useTableWithControls.cjs"),N=require("./providers/useGenesis.cjs"),e=require("./styles/theme/genesis-theme.cjs");exports.GENESIS=r.default;exports.GlobalStyles=o.GlobalStyles;exports.Avatar=t;exports.Badge=s;exports.Breadcrumb=i;exports.Button=n;exports.UtilityButton=u;exports.IconButton=a;exports.Card=c;exports.Checkbox=l;exports.DatePicker=q;exports.DateRangePicker=T;exports.ErrorBoundary=b;exports.ErrorBoundaryFallback=d;exports.Form=y.default;exports.Input=g;exports.Layout=h;exports.Message=p;exports.Notification=S;exports.Popover=k;exports.Progress=B;exports.RadioGroup=m;exports.Row=P;exports.SegmentedControls=C;exports.Select=G;exports.Shapes=v;exports.Switch=E;exports.Table=R;exports.TableWithControls=f;exports.Tabs=I;exports.Tile=W;exports.Toast=w;exports.Tooltip=z;exports.Typography=D;exports.GenesisProvider=F.GenesisProvider;exports.useTable=x.useTable;exports.useTableWithControls=M.useTableWithControls;exports.useGenesis=N.useGenesis;exports.TypographySizeKey=e.TypographySizeKey;exports.baseTokens=e.baseTokens;exports.breakpoints=e.breakpoints;exports.darkTheme=e.darkTheme;exports.lightTheme=e.lightTheme;exports.sizing=e.sizing;