@gobolt/genesis 0.2.4 → 0.2.6

package/dist/components/SegmentedControls/styles.js

@@ -1,16 +1,29 @@
-import { styled as a } from "../../utils/styled.js";
-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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../utils/styled.cjs"),d=require("../../node_modules/antd/es/select/index.cjs"),c=a.styled.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),d=require("../../node_modules/antd/es/select/index.cjs"),c=a.div`
   position: relative;
   border: 2px solid transparent;
   background-color: transparent;
@@ -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};
@@ -82,7 +95,7 @@
         }
       }
     }
-  `,m=a.styled.div`
+  `,m=a.div`
   .ant-select-item-option {
     transition: ${({theme:e,type:o})=>l(e)};
     border-radius: 0px;
@@ -105,7 +118,7 @@
       }
     }
   }
-`,b=a.styled.div`
+`,b=a.div`
   .ant-select-dropdown {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
     transition: all ${({theme:e})=>`${e.motion.veryfast}s`}
@@ -124,6 +137,6 @@
   &.ant-slide-up-leave {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,$=a.styled(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.d.ts

@@ -1,13 +1,30 @@
 import { Select as AntSelect, SelectProps } from 'antd';
 import { BaseSelectRef } from 'rc-select';
 import { StyledComponent } from '../../utils/styled';
-import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+import { GenesisTheme, Breakpoint } from '../../styles/theme/genesis-theme.types';
+import { TYPE } from '../../constants';
 interface StyledSelectProps extends SelectProps {
     theme?: GenesisTheme;
 }
-export declare const SelectWrapper: any;
-export declare const StyledMenuItem: any;
-export declare const SelectDropdown: any;
+interface SelectWrapperProps {
+    theme?: GenesisTheme;
+    $isFocused: boolean;
+    type: keyof typeof TYPE;
+    variant?: "simple" | "none";
+}
+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;
+interface SelectMenuItemProps {
+    theme: GenesisTheme;
+    type?: keyof typeof TYPE;
+    state?: keyof Breakpoint;
+}
+export declare const StyledMenuItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectMenuItemProps>> & string;
+interface SelectDropdownProps {
+    theme: GenesisTheme;
+    type?: keyof typeof TYPE;
+    state?: keyof Breakpoint;
+}
+export declare const SelectDropdown: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectDropdownProps>> & string;
 type StyledSelectComponent = StyledComponent<typeof AntSelect, any, StyledSelectProps & {
     ref?: React.Ref<BaseSelectRef>;
 }, never>;

package/dist/components/Select/styles.js

@@ -1,4 +1,4 @@
-import { styled as a } from "../../utils/styled.js";
+import a from "styled-components";
 import d from "../../node_modules/antd/es/select/index.js";
 const b = a.div`
   position: relative;
@@ -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/Switch/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../utils/styled.cjs"),u=require("../../node_modules/antd/es/switch/index.cjs"),n=({colors:e,borderRadius:c})=>`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("styled-components"),t=require("../../node_modules/antd/es/switch/index.cjs"),n=({colors:e,borderRadius:c})=>`
   &.ant-switch {
     background-color: ${e.primary.active};
     border-radius: ${c==null?void 0:c.BorderRadiusMd};
@@ -53,6 +53,6 @@
       }
     }
   }
-`,s=t.styled(u)`
+`,s=u(t)`
   ${({theme:e})=>n(e)}
 `;exports.Switch=s;exports.default=s;

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

@@ -1,2 +1,8 @@
-export declare const Switch: any;
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledSwitchProps extends React.HTMLAttributes<HTMLButtonElement> {
+    theme?: GenesisTheme;
+}
+export declare const Switch: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLButtonElement>;
+}, StyledSwitchProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
 export default Switch;

package/dist/components/Switch/styles.js

@@ -1,4 +1,4 @@
-import { styled as s } from "../../utils/styled.js";
+import s from "styled-components";
 import t from "../../node_modules/antd/es/switch/index.js";
 const u = ({ colors: e, borderRadius: c }) => `
   &.ant-switch {

package/dist/components/Table/TableControls/PrimaryTableControlsRow.cjs

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),j=require("../../../node_modules/react-icons/hi2/index.cjs"),c=require("../../../node_modules/react-icons/hi/index.cjs"),m=require("../../../node_modules/react-icons/fi/index.cjs"),q=require("../../../_virtual/index5.cjs"),I=require("../../Input/Input.cjs"),d=require("../../Button/UtilityButton.cjs"),f=require("../../Typography/Typography.cjs"),k=require("../../Select/Select.cjs"),S=require("../../Button/IconButton.cjs"),b=({sortOptions:s,searchByPlaceholder:p="",searchField:x="address",isSortedAscending:n=!0,onChange:t})=>{const a=i=>{const v={event:"inputChange",payload:{value:i.target.value,field:x}};q(()=>{t==null||t(v)},200)()},r=i=>{const u={event:"primaryChange",payload:{value:i}};t==null||t(u)},l=()=>{const i={event:"filterClick",payload:{}};t==null||t(i)},o=()=>{const i={event:"settingsClick",payload:{}};t==null||t(i)},y=()=>{const i={event:"orderClick",payload:{value:n?"desc":"asc"}};t==null||t(i)};return e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%",minWidth:800},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(I,{size:"normal",placeholder:p,prefix:e.jsx(c.HiSearch,{}),style:{padding:"5px 8px"},onChange:a}),l&&e.jsx(d,{isIconButton:!0,icon:e.jsx(j.HiMiniAdjustmentsVertical,{}),onClick:l}),o&&e.jsx(d,{isIconButton:!0,icon:e.jsx(m.FiSettings,{}),onClick:o})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[e.jsx(f,{variant:"body3",color:"#6C6C6C",children:"Sort by"}),s&&r?e.jsx(k,{options:s,defaultValue:s[0].value,variant:"simple",onChange:r}):null,e.jsx(S,{icon:n?e.jsx(c.HiOutlineSortDescending,{}):e.jsx(c.HiOutlineSortAscending,{}),onClick:y})]})]})};module.exports=b;
+"use strict";const e=require("react/jsx-runtime"),j=require("../../../node_modules/react-icons/hi2/index.cjs"),c=require("../../../node_modules/react-icons/hi/index.cjs"),m=require("../../../node_modules/react-icons/fi/index.cjs"),q=require("../../../_virtual/index6.cjs"),I=require("../../Input/Input.cjs"),d=require("../../Button/UtilityButton.cjs"),f=require("../../Typography/Typography.cjs"),k=require("../../Select/Select.cjs"),S=require("../../Button/IconButton.cjs"),b=({sortOptions:s,searchByPlaceholder:p="",searchField:x="address",isSortedAscending:n=!0,onChange:t})=>{const a=i=>{const v={event:"inputChange",payload:{value:i.target.value,field:x}};q(()=>{t==null||t(v)},200)()},r=i=>{const u={event:"primaryChange",payload:{value:i}};t==null||t(u)},l=()=>{const i={event:"filterClick",payload:{}};t==null||t(i)},o=()=>{const i={event:"settingsClick",payload:{}};t==null||t(i)},y=()=>{const i={event:"orderClick",payload:{value:n?"desc":"asc"}};t==null||t(i)};return e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%",minWidth:800},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(I,{size:"normal",placeholder:p,prefix:e.jsx(c.HiSearch,{}),style:{padding:"5px 8px"},onChange:a}),l&&e.jsx(d,{isIconButton:!0,icon:e.jsx(j.HiMiniAdjustmentsVertical,{}),onClick:l}),o&&e.jsx(d,{isIconButton:!0,icon:e.jsx(m.FiSettings,{}),onClick:o})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[e.jsx(f,{variant:"body3",color:"#6C6C6C",children:"Sort by"}),s&&r?e.jsx(k,{options:s,defaultValue:s[0].value,variant:"simple",onChange:r}):null,e.jsx(S,{icon:n?e.jsx(c.HiOutlineSortDescending,{}):e.jsx(c.HiOutlineSortAscending,{}),onClick:y})]})]})};module.exports=b;

package/dist/components/Table/TableControls/PrimaryTableControlsRow.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import { HiMiniAdjustmentsVertical as v } from "../../../node_modules/react-icons/hi2/index.js";
 import { HiSearch as I, HiOutlineSortDescending as k, HiOutlineSortAscending as x } from "../../../node_modules/react-icons/hi/index.js";
 import { FiSettings as b } from "../../../node_modules/react-icons/fi/index.js";
-import S from "../../../_virtual/index5.js";
+import S from "../../../_virtual/index6.js";
 import A from "../../Input/Input.js";
 import d from "../../Button/UtilityButton.js";
 import E from "../../Typography/Typography.js";

package/dist/components/Table/TableControls/styles.d.ts

@@ -1,6 +1,13 @@
+import { GenesisTheme } from '../../../styles/theme/genesis-theme.types';
+interface StyledTableControlsProps {
+    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 StyledTableControls: any;
+export declare const StyledTableControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTableControlsProps>> & string;
+export {};

package/dist/components/Table/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../utils/styled.cjs"),r=require("../../node_modules/antd/es/table/Table.cjs"),t=({colors:e,borderRadius:l,sizing:a})=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("styled-components"),r=require("../../node_modules/antd/es/table/Table.cjs"),t=({colors:e,borderRadius:a,sizing:l})=>`
   &.ant-table-wrapper {
     // Add your custom styles here
   }
@@ -20,6 +20,6 @@
     font-family: 'Inter', sans-serif;
     font-size: 14px;
   }
-`,o=s.styled(r)`
+`,o=s(r)`
   ${({theme:e})=>t(e)}
 `;exports.Table=o;exports.getGenesisClass=t;

package/dist/components/Table/styles.js

@@ -1,4 +1,4 @@
-import { styled as e } from "../../utils/styled.js";
+import e from "styled-components";
 import r from "../../node_modules/antd/es/table/Table.js";
 const s = ({ colors: t, borderRadius: o, sizing: a }) => `
   &.ant-table-wrapper {

package/dist/components/Tabs/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../utils/styled.cjs"),i=require("../../node_modules/antd/es/tabs/index.cjs"),r=({colors:t,borderRadius:e,sizing:a},s="primary",b="active")=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),i=require("../../node_modules/antd/es/tabs/index.cjs"),r=({colors:t,borderRadius:e,sizing:a},s="primary",b="active")=>`
   &.ant-tabs {
     background: #F4F4F4;
 
@@ -91,6 +91,6 @@
       }
     }
   }
-`,o=n.styled(i)`
+`,o=n(i)`
   ${({theme:t,type:e,state:a})=>r(t,e,a)}
 `;exports.Tabs=o;exports.getGenesisClass=r;

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

@@ -1,3 +1,11 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledTabsProps {
+    theme?: GenesisTheme;
+    state: "active" | "hovered" | "focussed" | "disabled";
+    type: "card";
+}
 export declare const getGenesisClass: ({ colors, borderRadius, sizing }: GenesisTheme, type?: string, state?: string) => string;
-export declare const Tabs: any;
+export declare const Tabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('antd').TabsProps, StyledTabsProps>> & string & Omit<import('react').FC<import('antd').TabsProps> & {
+    TabPane: import('react').FC<import('antd').TabPaneProps>;
+}, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Tabs/styles.js

@@ -1,4 +1,4 @@
-import { styled as r } from "../../utils/styled.js";
+import r from "styled-components";
 import n from "../../node_modules/antd/es/tabs/index.js";
 const i = ({ colors: t, borderRadius: e, sizing: a }, o = "primary", b = "active") => `
   &.ant-tabs {

package/dist/components/Tile/styles.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../utils/styled.cjs"),t=({sizing:e},s=!1)=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),i=({sizing:e},s=!1)=>`
     display: flex;
     flex-direction: ${s?"row":"column"};
     padding: ${e.Size4};
- `,l=i.styled.div`
-  ${({theme:e,$isHorizontal:s})=>t(e,s)}
-`;exports.Tile=l;exports.getGenesisClass=t;
+ `,l=t.div`
+  ${({theme:e,$isHorizontal:s})=>i(e,s)}
+`;exports.Tile=l;exports.getGenesisClass=i;

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

@@ -1,4 +1,10 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledTileProps {
+    theme?: GenesisTheme;
+    $isHorizontal?: boolean;
+}
 export declare const getGenesisClass: ({ sizing }: {
     sizing: any;
 }, $isHorizontal?: boolean) => string;
-export declare const Tile: any;
+export declare const Tile: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTileProps>> & string;
+export {};

package/dist/components/Tile/styles.js

@@ -1,4 +1,4 @@
-import { styled as s } from "../../utils/styled.js";
+import s from "styled-components";
 const l = ({ sizing: e }, i = !1) => `
     display: flex;
     flex-direction: ${i ? "row" : "column"};

package/dist/components/Toast/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../utils/styled.cjs"),i=require("../../constants/index.cjs"),n=s.styled.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),n=require("../../constants/index.cjs"),a=i.div`
   display: flex;
   align-items: center;
   gap: ${({theme:e})=>e.sizing.Size4}px;
@@ -12,13 +12,13 @@
   width: ${({theme:e,state:t,size:o})=>o==="standard"?"340px":"240px"};
   background-color: ${({theme:e,state:t})=>e.colors.surface.default};
   box-shadow: 0px 4px 16px 0px #00000026;
-`,a=s.styled.button`
+`,s=i.button`
   text-decoration: underline;
   border: none;
   background: none;
   cursor: pointer;
   pointer-events: all;
-`,r=s.styled.div`
+`,r=i.div`
   display: flex;
   align-items: center;
   gap: ${({theme:e})=>e.sizing.Size2}px;
@@ -33,6 +33,6 @@
     text-overflow: ellipsis;
     font-size: 16px;
     font-family: ${({theme:e})=>e.typography.fontFamily};
-    line-height: ${({theme:e,size:t})=>t===i.SIZE.standard?e.typography.lineHeight:"16px"};
+    line-height: ${({theme:e,size:t})=>t===n.SIZE.standard?e.typography.lineHeight:"16px"};
   }
-`;exports.ToastCloseButton=a;exports.ToastContent=r;exports.ToastRow=n;
+`;exports.ToastCloseButton=s;exports.ToastContent=r;exports.ToastRow=a;

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

@@ -1,3 +1,9 @@
-export declare const ToastRow: any;
-export declare const ToastCloseButton: any;
-export declare const ToastContent: any;
+export declare const ToastRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    state: string;
+    size: string;
+}>> & string;
+export declare const ToastCloseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ToastContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    state: string;
+    size: string;
+}>> & string;

package/dist/components/Toast/styles.js

@@ -1,4 +1,4 @@
-import { styled as i } from "../../utils/styled.js";
+import i from "styled-components";
 import { SIZE as r } from "../../constants/index.js";
 const s = i.div`
   display: flex;

package/dist/components/Tooltip/styles.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../utils/styled.cjs"),r=require("../../node_modules/antd/es/tooltip/index.cjs"),i=({colors:e,borderRadius:t,sizing:s},l="primary",a="active")=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=require("../../node_modules/antd/es/tooltip/index.cjs"),i=({colors:e,borderRadius:t,sizing:s},l="primary",a="active")=>`
   
- `,n=o.styled(r)`
+ `,n=o(r)`
   ${({theme:e,type:t,state:s})=>i(e,t,s)}
 `;exports.Tooltip=n;exports.getGenesisClass=i;

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

@@ -1,6 +1,19 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledTooltipProps {
+    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 Tooltip: any;
+export declare const Tooltip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(Omit<import('antd/es/tooltip').TooltipPropsWithTitle & import('react').RefAttributes<import('antd/es/tooltip').TooltipRef>, "ref"> & {
+    ref?: import('react').Ref<import('antd/es/tooltip').TooltipRef>;
+}) | (Omit<import('antd/es/tooltip').TooltipPropsWithOverlay & import('react').RefAttributes<import('antd/es/tooltip').TooltipRef>, "ref"> & {
+    ref?: import('react').Ref<import('antd/es/tooltip').TooltipRef>;
+}), StyledTooltipProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').TooltipProps & import('react').RefAttributes<import('antd/es/tooltip').TooltipRef>> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import('react').FC<import('antd/es/tooltip/PurePanel').PurePanelProps>;
+}, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Tooltip/styles.js

@@ -1,4 +1,4 @@
-import { styled as s } from "../../utils/styled.js";
+import s from "styled-components";
 import e from "../../node_modules/antd/es/tooltip/index.js";
 const i = ({ colors: o, borderRadius: t, sizing: r }, p = "primary", a = "active") => `
   

package/dist/components/Typography/styles.cjs

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../utils/styled.cjs"),a=require("../../node_modules/antd/es/typography/index.cjs"),u=(t,e,n)=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),l=require("../../node_modules/antd/es/typography/index.cjs"),g=(t,e,n)=>`
         font-size: ${t[n][e].fontSize}px !important;
         line-height: ${t[n][e].lineHeight};
         letter-spacing: ${t[n][e].letterSpacing}px;
         font-weight: ${t[n][e].fontWeight};
-      `,g=(t,e,n)=>t||e[n].active.color,$=t=>`
+      `,d=(t,e,n)=>t||e[n].active.color,$=t=>`
     ${t.includes("digits")?"'Roboto Mono', sans-serif":"'Inter', sans-serif"} !important;
-  `,c=({colors:t,typography:e},n,r,i,o,s,d)=>`
+  `,c=({colors:t,typography:e},n,r,s,o,i,u)=>`
     &.ant-typography {
       font-family: ${$(r)};
-      color: ${g(s,t,n)} !important;
-      ${u(e,r,o)}
+      color: ${d(i,t,n)} !important;
+      ${g(e,r,o)}
       margin-bottom: 0 !important;
-      width: ${d?"100%":"auto"};
+      width: ${u?"100%":"auto"};
       line-height: 1;
 
       &:disabled {
@@ -20,10 +20,10 @@
         cursor: not-allowed;
       }
     } 
-`,f=l.styled(a.Title)`
-  ${({theme:t,$themeType:e,variant:n,state:r,breakpoint:i,color:o,$isFullWidth:s})=>c(t,e,n,r,i,o,s)}
-`,h=l.styled(a.Paragraph)`
-  ${({theme:t,$themeType:e,variant:n,state:r,breakpoint:i,color:o,$isFullWidth:s})=>c(t,e,n,r,i,o,s)}
-`,m=l.styled(a.Text)`
-  ${({theme:t,$themeType:e,variant:n,state:r,breakpoint:i,color:o,$isFullWidth:s})=>c(t,e,n,r,i,o,s)}
+`,f=a(l.Title)`
+  ${({theme:t,$themeType:e,variant:n,state:r,breakpoint:s,color:o,$isFullWidth:i})=>c(t,e,n,r,s,o,i)}
+`,h=a(l.Paragraph)`
+  ${({theme:t,$themeType:e,variant:n,state:r,breakpoint:s,color:o,$isFullWidth:i})=>c(t,e,n,r,s,o,i)}
+`,m=a(l.Text)`
+  ${({theme:t,$themeType:e,variant:n,state:r,breakpoint:s,color:o,$isFullWidth:i})=>c(t,e,n,r,s,o,i)}
 `;exports.Headline=f;exports.Paragraph=h;exports.Text=m;

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

@@ -1,3 +1,21 @@
-export declare const Headline: any;
-export declare const Paragraph: any;
-export declare const Text: any;
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+import { TYPE, STATE } from '../../constants';
+interface TypographyStyledProps {
+    theme: GenesisTheme;
+    $themeType?: keyof typeof TYPE;
+    variant?: string;
+    state?: keyof typeof STATE;
+    breakpoint?: string;
+    color?: string;
+    $isFullWidth?: boolean;
+}
+export declare const Headline: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd/es/typography/Title').TitleProps & import('react').RefAttributes<HTMLElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLElement>;
+}, TypographyStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd/es/typography/Title').TitleProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const Paragraph: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd/es/typography/Paragraph').ParagraphProps & import('react').RefAttributes<HTMLElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLElement>;
+}, TypographyStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd/es/typography/Paragraph').ParagraphProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const Text: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd/es/typography/Text').TextProps & import('react').RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLSpanElement>;
+}, TypographyStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd/es/typography/Text').TextProps & import('react').RefAttributes<HTMLSpanElement>>, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Typography/styles.js

@@ -1,4 +1,4 @@
-import { styled as a } from "../../utils/styled.js";
+import a from "styled-components";
 import l from "../../node_modules/antd/es/typography/index.js";
 const m = (t, e, n) => `
         font-size: ${t[n][e].fontSize}px !important;

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;