@gobolt/genesis 0.2.4 → 0.2.5

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../utils/styled.cjs"),o=t.styled.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),o=t.div`
   position: relative;
   display: flex;
   position: absolute;
@@ -12,10 +12,10 @@
   border-radius: 50%;
   box-sizing: border-box;
   background-color: white;
-`,r=t.styled.div`
+`,r=t.div`
   display: flex;
   position: relative;
-`,i=t.styled.div`
+`,i=t.div`
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/components/Notification/NotificationBadge/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const BadgeState: any;
-export declare const Badge: any;
-export declare const BadgeWrapper: any;
+export declare const BadgeState: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,4 +1,4 @@
-import { styled as o } from "../../../utils/styled.js";
+import o from "styled-components";
 const i = o.div`
   position: relative;
   display: flex;

package/dist/components/Notification/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../utils/styled.cjs"),o=require("../../constants/index.cjs"),n=e.styled.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),o=require("../../constants/index.cjs"),n=i.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9,8 +9,8 @@
   border-radius: ${({theme:t})=>t.borderRadius.BorderRadiusSm}px;
   height: 85px;
   width: 500px;
-  background-color: ${({theme:t,$isUnread:i})=>i?"#F4F4F4":t.colors.surface.default};
-`,r=e.styled.div`
+  background-color: ${({theme:t,$isUnread:e})=>e?"#F4F4F4":t.colors.surface.default};
+`,r=i.div`
   display: flex;
   align-items: center;
   gap: ${({theme:t})=>t.sizing.Size2}px;
@@ -24,9 +24,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-family: ${({theme:t})=>t.typography.fontFamily};
-    line-height: ${({theme:t,size:i})=>i===o.SIZE.standard?t.typography.lineHeight:"16px"};
+    line-height: ${({theme:t,size:e})=>e===o.SIZE.standard?t.typography.lineHeight:"16px"};
   }
-`,d=e.styled.div`
+`,d=i.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -36,7 +36,7 @@
   width: 8px;
   aspect-ratio: 1;
   min-height: 8px;
-`,a=t=>`1px solid ${t.colors.interactive.utility.border}`;e.styled.button`
+`,a=t=>`1px solid ${t.colors.interactive.utility.border}`;i.button`
   border: ${({theme:t})=>a(t)};
   background: "none";
   cursor: "pointer";
@@ -47,7 +47,7 @@
   padding-bottom: "2px";
   padding-left: ${({theme:t})=>t.components.utilityButton.padding.horPadding};
   padding-right: ${({theme:t})=>t.components.utilityButton.padding.horPadding};
-`;const s=e.styled.button`
+`;const s=i.button`
   text-decoration: underline;
   border: none;
   background: none;

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

@@ -1,5 +1,16 @@
-export declare const NotificationRow: any;
-export declare const NotificationContent: any;
-export declare const NotificationUnread: any;
-export declare const NotificationActionButton: any;
-export declare const ChevronButton: any;
+type NotificationRowProps = {
+    state: string;
+    size: string;
+    $isUnread: boolean;
+};
+export declare const NotificationRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NotificationRowProps>> & string;
+export declare const NotificationContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: string;
+}>> & string;
+export declare const NotificationUnread: 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 NotificationActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ChevronButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export {};

package/dist/components/Notification/styles.js

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

package/dist/components/Popover/styles.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../utils/styled.cjs"),o=require("../../node_modules/antd/es/popconfirm/index.cjs"),e=t=>"",r=s.styled(o)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("styled-components"),o=require("../../node_modules/antd/es/popconfirm/index.cjs"),e=t=>"",r=s(o)`
   ${({theme:t})=>e()}
 `;exports.Popover=r;exports.getGenesisClass=e;

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

@@ -1,2 +1,14 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledPopoverProps {
+    theme?: GenesisTheme;
+    align?: "left" | "right" | "top" | "bottom";
+    placement?: "top" | "topleft" | "topright";
+    title?: string;
+}
 export declare const getGenesisClass: (theme: any) => string;
-export declare const Popover: any;
+export declare const Popover: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').PopconfirmProps & import('react').RefAttributes<import('antd/es/tooltip').TooltipRef>, "ref"> & {
+    ref?: import('react').Ref<import('antd/es/tooltip').TooltipRef>;
+}, StyledPopoverProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').PopconfirmProps & import('react').RefAttributes<import('antd/es/tooltip').TooltipRef>> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import('react').FC<import('antd/es/popconfirm/PurePanel').PurePanelProps>;
+}, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Popover/styles.js

@@ -1,4 +1,4 @@
-import { styled as o } from "../../utils/styled.js";
+import o from "styled-components";
 import t from "../../node_modules/antd/es/popconfirm/index.js";
 const r = (e) => "", n = o(t)`
   ${({ theme: e }) => r()}

package/dist/components/Progress/styles.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../utils/styled.cjs"),o=require("../../node_modules/antd/es/progress/progress.cjs"),r=({colors:e},s="info")=>"",n=t.styled(o)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),o=require("../../node_modules/antd/es/progress/progress.cjs"),r=({colors:e},s="info")=>"",n=t(o)`
   ${({theme:e,state:s})=>r(e,s)}
 `;exports.Progress=n;exports.getGenesisClass=r;

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

@@ -1,4 +1,16 @@
+import { ProgressProps } from 'antd';
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+import { Percent } from './Progress';
+interface StyledProgressProps extends ProgressProps {
+    theme?: GenesisTheme;
+    percent?: number;
+    success?: Percent | null;
+    state?: "success" | "error" | "info";
+}
 export declare const getGenesisClass: ({ colors }: {
     colors: any;
 }, state?: string) => string;
-export declare const Progress: any;
+export declare const Progress: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<ProgressProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLDivElement>;
+}, StyledProgressProps>> & string & Omit<import('react').ForwardRefExoticComponent<ProgressProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Progress/styles.js

@@ -1,4 +1,4 @@
-import { styled as r } from "../../utils/styled.js";
+import r from "styled-components";
 import t from "../../node_modules/antd/es/progress/progress.js";
 const e = ({ colors: s }, o = "info") => "", m = r(t)`
   ${({ theme: s, state: o }) => e(s, o)}

package/dist/components/Radio/Radio.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),y=require("../../constants/index.cjs"),v=require("./states/RadioChecked.cjs"),g=require("./states/RadioCheckedHover.cjs"),x=require("./states/RadioCheckedFocussed.cjs"),C=require("./states/RadioCheckedDisabled.cjs"),I=require("./states/RadioUnchecked.cjs"),F=require("./states/RadioUncheckedHover.cjs"),H=require("./states/RadioUncheckedFocussed.cjs"),S=require("./states/RadioUncheckedDisabled.cjs"),T=require("../../utils/styled.cjs"),m=require("../Typography/Typography.cjs"),R=T.styled.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),v=require("../../constants/index.cjs"),y=require("./states/RadioChecked.cjs"),g=require("./states/RadioCheckedHover.cjs"),x=require("./states/RadioCheckedFocussed.cjs"),C=require("./states/RadioCheckedDisabled.cjs"),I=require("./states/RadioUnchecked.cjs"),F=require("./states/RadioUncheckedHover.cjs"),H=require("./states/RadioUncheckedFocussed.cjs"),S=require("./states/RadioUncheckedDisabled.cjs"),T=require("styled-components"),m=require("../Typography/Typography.cjs"),R=T.div`
   outline: none;
   display: flex;
   align-items: center;
@@ -6,4 +6,4 @@
   cursor: ${({$isDisabled:t})=>t?"not-allowed":"pointer"};
   pointer-events: ${({$isDisabled:t})=>t?"none":"auto"};
   position: relative;
-`,w=({id:t,label:i,selectedId:u,onChange:p,isDisabled:r})=>{const[c,j]=o.useState(!1),[a,d]=o.useState(!1),[s,f]=o.useState(!1),l=o.useRef(null);o.useEffect(()=>{j(u===t)},[u,t]);const h=()=>{r||p(t)},k=n=>{r||(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),h())},q=()=>c?r?e.jsx(C,{}):s?e.jsx(x,{}):s?e.jsx(x,{}):a?e.jsx(g,{}):e.jsx(v,{}):s?e.jsx(H,{}):a?e.jsx(F,{}):r?e.jsx(S,{}):e.jsx(I,{});return e.jsxs(R,{ref:l,$isDisabled:r,onFocus:n=>{r||n.target!==l.current||f(!0)},onBlur:()=>{r||f(!1)},onMouseEnter:()=>!r&&d(!0),onMouseLeave:()=>d(!1),onClick:h,onKeyDown:k,tabIndex:r?-1:0,role:"radio","aria-checked":c,"aria-disabled":r,children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:26,height:26,pointerEvents:"none"},children:q()}),i&&e.jsx(m,{variant:y.TYPOGRAPHY_VARIANT.label1,isText:!0,children:i})]})};exports.RadioWrapper=R;exports.default=w;
+`,w=({id:t,label:i,selectedId:u,onChange:p,isDisabled:r})=>{const[c,j]=o.useState(!1),[a,d]=o.useState(!1),[s,f]=o.useState(!1),l=o.useRef(null);o.useEffect(()=>{j(u===t)},[u,t]);const h=()=>{r||p(t)},k=n=>{r||(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),h())},q=()=>c?r?e.jsx(C,{}):s?e.jsx(x,{}):s?e.jsx(x,{}):a?e.jsx(g,{}):e.jsx(y,{}):s?e.jsx(H,{}):a?e.jsx(F,{}):r?e.jsx(S,{}):e.jsx(I,{});return e.jsxs(R,{ref:l,$isDisabled:r,onFocus:n=>{r||n.target!==l.current||f(!0)},onBlur:()=>{r||f(!1)},onMouseEnter:()=>!r&&d(!0),onMouseLeave:()=>d(!1),onClick:h,onKeyDown:k,tabIndex:r?-1:0,role:"radio","aria-checked":c,"aria-disabled":r,children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:26,height:26,pointerEvents:"none"},children:q()}),i&&e.jsx(m,{variant:v.TYPOGRAPHY_VARIANT.label1,isText:!0,children:i})]})};exports.RadioWrapper=R;exports.default=w;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 interface RadioProps {
     id: string;
     label?: string;
@@ -5,6 +6,8 @@ interface RadioProps {
     onChange: (id: string) => void;
     isDisabled?: boolean;
 }
-export declare const RadioWrapper: any;
+export declare const RadioWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isDisabled: boolean;
+}>> & string;
 declare const Radio: ({ id, label, selectedId, onChange, isDisabled }: RadioProps) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/dist/components/Radio/Radio.js

@@ -9,7 +9,7 @@ import w from "./states/RadioUnchecked.js";
 import F from "./states/RadioUncheckedHover.js";
 import H from "./states/RadioUncheckedFocussed.js";
 import E from "./states/RadioUncheckedDisabled.js";
-import { styled as T } from "../../utils/styled.js";
+import T from "styled-components";
 import U from "../Typography/Typography.js";
 const j = T.div`
   outline: none;

package/dist/components/Row/RowActions/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../utils/styled.cjs"),t=e.styled.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),t=e.div`
   display: flex;
   flex-direction: column;
   gap: 16px;

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

@@ -1 +1 @@
-export declare const ActionsContainer: any;
+export declare const ActionsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Row/RowActions/styles.js

@@ -1,4 +1,4 @@
-import { styled as i } from "../../../utils/styled.js";
+import i from "styled-components";
 const p = i.div`
   display: flex;
   flex-direction: column;

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../utils/styled.cjs"),r=require("../../../node_modules/antd/es/skeleton/Skeleton.cjs"),o=e=>`${e.row["ver-padding"]}px ${e.row["hor-padding"]}px`,a=({components:e},t=!1)=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),r=require("../../../node_modules/antd/es/skeleton/Skeleton.cjs"),o=e=>`${e.row["ver-padding"]}px ${e.row["hor-padding"]}px`,a=({components:e},t=!1)=>`
   display: flex;
   flex-direction: ${t?"column":"row"};
   align-items:  ${t?"flex-start":"center"};
@@ -6,9 +6,9 @@
   width: 100%;
   padding: ${o(e)};
   gap: 8px;
-`,l=n.styled.div`
+`,l=n.div`
   ${({theme:e,$isFullWidth:t})=>a(e,t)}
-`,s=n.styled(r)`
+`,s=n(r)`
   && {
     .ant-skeleton-content .ant-skeleton-paragraph > li {
       border-radius: 50px !important;

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

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

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

@@ -1,4 +1,4 @@
-import { styled as n } from "../../../utils/styled.js";
+import n from "styled-components";
 import r from "../../../node_modules/antd/es/skeleton/Skeleton.js";
 const a = (e) => `${e.row["ver-padding"]}px ${e.row["hor-padding"]}px`, o = ({ components: e }, t = !1) => `
   display: flex;

package/dist/components/Row/styles.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../utils/styled.cjs"),d=e=>`1px solid ${e.surface["border-light"]}`,n=({colors:e,borderRadius:o,sizing:s},t=!1,l=!1,r=null)=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),d=e=>`1px solid ${e.surface["border-light"]}`,s=({colors:e,borderRadius:o,sizing:n},t=!1,r=!1,l=null)=>`
   display: flex;
   flex-direction: column;
   width: 100%;
   border-bottom: ${t?d(e):"none"};
-  padding-bottom:${r?"24px":"0"};
-  align-items: ${l?"flex-start !important":"center"};
-`,u=i.styled.div`
-  ${({theme:e,$hasBorder:o,$isFullWidth:s,actions:t})=>n(e,o,s,t)}
-`;exports.Column=u;exports.getGenesisColumnClass=n;
+  padding-bottom:${l?"24px":"0"};
+  align-items: ${r?"flex-start !important":"center"};
+`,u=i.div`
+  ${({theme:e,$hasBorder:o,$isFullWidth:n,actions:t})=>s(e,o,n,t)}
+`;exports.Column=u;exports.getGenesisColumnClass=s;

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

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

package/dist/components/Row/styles.js

@@ -1,4 +1,4 @@
-import { styled as i } from "../../utils/styled.js";
+import i from "styled-components";
 const l = (e) => `1px solid ${e.surface["border-light"]}`, d = ({ colors: e, borderRadius: o, sizing: r }, t = !1, n = !1, s = null) => `
   display: flex;
   flex-direction: column;

package/dist/components/SegmentedControls/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../utils/styled.cjs"),a=require("../../node_modules/antd/es/segmented/index.cjs"),n=({colors:e,borderRadius:r,sizing:s},t="primary",o="active")=>`
+"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")=>`
   &.ant-segmented {
     border-radius: ${r.BorderRadiusMd};
     color: ${e.onsurface.copy};
@@ -17,6 +17,6 @@
       }
     }
   }
-`,d=i.styled(a)`
-  ${({theme:e,type:r="primary",state:s="active"})=>n(e,r,s)}
-`;exports.SegmentedControls=d;exports.getGenesisClass=n;
+`,d=i(a)`
+  ${({theme:e,type:r="primary",state:n="active"})=>s(e,r,n)}
+`;exports.SegmentedControls=d;exports.getGenesisClass=s;

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

@@ -1,3 +1,11 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledSegmentedControlsProps {
+    theme?: GenesisTheme;
+    type?: "primary" | "secondary";
+    state?: "active" | "disabled";
+}
 export declare const getGenesisClass: ({ colors, borderRadius, sizing }: GenesisTheme, type?: string, state?: string) => string;
-export declare const SegmentedControls: any;
+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>>;
+export {};

package/dist/components/SegmentedControls/styles.js

@@ -1,4 +1,4 @@
-import { styled as a } from "../../utils/styled.js";
+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") => `
   &.ant-segmented {

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;
@@ -82,7 +82,7 @@
         }
       }
     }
-  `,m=a.styled.div`
+  `,m=a.div`
   .ant-select-item-option {
     transition: ${({theme:e,type:o})=>l(e)};
     border-radius: 0px;
@@ -105,7 +105,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 +124,6 @@
   &.ant-slide-up-leave {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,$=a.styled(d)`
+`,$=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;

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;

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 {};