@gobolt/genesis 0.2.4 → 0.2.6

package/dist/components/Input/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../utils/styled.cjs"),i=require("../../constants/index.cjs"),p=require("../../node_modules/antd/es/input/index.cjs"),x=(o,n,e)=>{const r={color:o.inputs.onsurface.active,borderColor:o[i.TYPE.secondary].active.borderColor,ringColor:o[n].focussed.ringColor},s={color:o.status.success.default,borderColor:o.status.success.default,ringColor:o.status.success.ringColor},u={color:o.status.error.default,borderColor:o.status.error.default,ringColor:o.status.error.ringColor},a=e!==i.STATE.error&&e!==i.STATE.success&&e!==i.STATE.filled?{color:o.inputs.onsurface.active,backgroundColor:o.inputs.surface.active,borderColor:o.inputs.surface.border,ringColor:o[n][e].ringColor}:null;return{filled:r,error:u,success:s,themeState:a}[(d=>[i.STATE.filled,i.STATE.error,i.STATE.success].includes(d)?d:"themeState")(e)]},g=({colors:o,borderRadius:n,components:e},r,s,u,a)=>{const t=x(o,r,s),l=(f,d)=>d&&!f?`${n.BorderRadiusMd}px 0px 0px ${n.BorderRadiusMd}px`:f&&!d?`0px ${n.BorderRadiusMd}px ${n.BorderRadiusMd}px 0px`:"0px";return`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("styled-components"),i=require("../../constants/index.cjs"),p=require("../../node_modules/antd/es/input/index.cjs"),x=(o,n,e)=>{const r={color:o.inputs.onsurface.active,borderColor:o[i.TYPE.secondary].active.borderColor,ringColor:o[n].focussed.ringColor},s={color:o.status.success.default,borderColor:o.status.success.default,ringColor:o.status.success.ringColor},u={color:o.status.error.default,borderColor:o.status.error.default,ringColor:o.status.error.ringColor},a=e!==i.STATE.error&&e!==i.STATE.success&&e!==i.STATE.filled?{color:o.inputs.onsurface.active,backgroundColor:o.inputs.surface.active,borderColor:o.inputs.surface.border,ringColor:o[n][e].ringColor}:null;return{filled:r,error:u,success:s,themeState:a}[(d=>[i.STATE.filled,i.STATE.error,i.STATE.success].includes(d)?d:"themeState")(e)]},g=({colors:o,borderRadius:n,components:e},r,s,u,a)=>{const t=x(o,r,s),l=(f,d)=>d&&!f?`${n.BorderRadiusMd}px 0px 0px ${n.BorderRadiusMd}px`:f&&!d?`0px ${n.BorderRadiusMd}px ${n.BorderRadiusMd}px 0px`:"0px";return`
     &.ant-input {
         font-family: 'Inter', sans-serif;
         color: ${t.color};
@@ -86,6 +86,6 @@
         padding-bottom: ${e.input.suffixPrefixVerPadding};
       }
     }
-  `},b=c.styled(p)`
+  `},b=c(p)`
   ${({theme:o,state:n,type:e=i.TYPE.primary,...r})=>{const s=!!r.addonBefore,u=!!r.addonAfter;return g(o,e,n,s,u)}}
 `;exports.Input=b;

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

@@ -1 +1,15 @@
-export declare const Input: any;
+import { InputProps as AntInputProps } from 'antd';
+import { STATE } from '../../constants';
+interface InputStyledProps extends AntInputProps {
+    state?: keyof typeof STATE;
+}
+export declare const Input: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntInputProps & import('react').RefAttributes<import('rc-input').InputRef>, "ref"> & {
+    ref?: import('react').Ref<import('rc-input').InputRef>;
+}, InputStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<AntInputProps & import('react').RefAttributes<import('rc-input').InputRef>> & {
+    Group: import('react').FC<import('antd/es/input').GroupProps>;
+    Search: import('react').ForwardRefExoticComponent<import('antd/es/input').SearchProps & import('react').RefAttributes<import('rc-input').InputRef>>;
+    TextArea: import('react').ForwardRefExoticComponent<import('antd/es/input').TextAreaProps & import('react').RefAttributes<import('antd/es/input/TextArea').TextAreaRef>>;
+    Password: import('react').ForwardRefExoticComponent<import('antd/es/input').PasswordProps & import('react').RefAttributes<import('rc-input').InputRef>>;
+    OTP: import('react').ForwardRefExoticComponent<import('antd/es/input/OTP').OTPProps & import('react').RefAttributes<import('antd/es/input/OTP').OTPRef>>;
+}, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Input/styles.js

@@ -1,4 +1,4 @@
-import { styled as c } from "../../utils/styled.js";
+import c from "styled-components";
 import { TYPE as l, STATE as i } from "../../constants/index.js";
 import x from "../../node_modules/antd/es/input/index.js";
 const g = (o, n, e) => {

package/dist/components/Layout/Content/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../utils/styled.cjs"),i=({sizing:e},t)=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),i=({sizing:e},t)=>`
   display: flex;
   flex-direction: ${t?"column":"row"};
   width: 100%;
@@ -6,6 +6,6 @@
   padding: ${e.Size4}px;
   margin: 0;
   box-sizing: border-box;
- `,s=n.styled.div`
+ `,s=n.div`
   ${({theme:e,$isColumn:t})=>i(e,t)}
 `;exports.Content=s;exports.getGenesisClass=i;

package/dist/components/Layout/Content/styles.d.ts

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

package/dist/components/Layout/Content/styles.js

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

package/dist/components/Layout/MainLayout/styles.d.ts

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

package/dist/components/Message/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../utils/styled.cjs"),i=require("../../constants/index.cjs"),r=o.styled.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=require("../../constants/index.cjs"),r=o.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9,7 +9,7 @@
   pointer-events: none;
   cursor: default;
   border-radius: ${({theme:e})=>e.borderRadius.BorderRadiusSm}px;
-`,s=o.styled.div`
+`,a=o.div`
   display: flex;
   align-items: center;
   gap: ${({theme:e})=>e.sizing.Size2}px;
@@ -24,7 +24,7 @@
     line-height: ${({theme:e,size:t})=>t===i.SIZE.standard?e.typography.lineHeight:"23px"};
     font-size: ${({theme:e,size:t})=>t==="standard"?e.typography.body2:e.typography.body1};
   }
-`,a=o.styled.button`
+`,s=o.button`
   text-decoration: underline;
   border: none;
   background: none;
@@ -35,4 +35,4 @@
   &:hover {
     color: ${({theme:e})=>e.colors.interactive.link.hover};
   }
-`;exports.ActionButton=a;exports.MessageContent=s;exports.MessageRow=r;
+`;exports.ActionButton=s;exports.MessageContent=a;exports.MessageRow=r;

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

@@ -1,3 +1,9 @@
-export declare const MessageRow: any;
-export declare const MessageContent: any;
-export declare const ActionButton: any;
+export declare const MessageRow: 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 MessageContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size?: string;
+    action?: unknown;
+}>> & string;
+export declare const ActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/components/Message/styles.js

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

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

@@ -1,21 +1,35 @@
-"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;
   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.styled.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.styled.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.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,18 +1,32 @@
-import { styled as o } from "../../../utils/styled.js";
+import o from "styled-components";
 const i = o.div`
   position: relative;
   display: flex;
   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/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,14 +1,27 @@
-"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 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.styled(a)`
-  ${({theme:e,type:r="primary",state:s="active"})=>n(e,r,s)}
-`;exports.SegmentedControls=d;exports.getGenesisClass=n;
+
+`,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

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