@gobolt/genesis 0.1.6 → 0.2.1

package/dist/components/Radio/Radio.cjs

@@ -0,0 +1,9 @@
+"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`
+  outline: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  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;

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

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 interface RadioProps {
     id: string;
     label?: string;
@@ -6,8 +5,6 @@ interface RadioProps {
     onChange: (id: string) => void;
     isDisabled?: boolean;
 }
-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;
+export declare const RadioWrapper: any;
 declare const Radio: ({ id, label, selectedId, onChange, isDisabled }: RadioProps) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/dist/components/Radio/Radio.js

@@ -1,46 +1,81 @@
-import "react/jsx-runtime";
-import "react";
-import "../Avatar/styles.js";
-import "../Badge/styles.js";
-import "../../providers/BreakpointThemeProvider.js";
-import { g as P, b as Q } from "../../Typography-8BO7aTuQ.js";
-import "../../styled-components.browser.esm-C47QHsU4.js";
-import "../../constants/index.js";
-import "../Breadcrumb/styles.js";
-import "../Button/styles.js";
-import "../Button/icon-button-styles.js";
-import "../Card/styles.js";
-import "../Checkbox/styles.js";
-import "../DateRangePicker/DateRangePicker.js";
-import "../ErrorBoundaryFallback/styles.js";
-import "../../styles-XuoEGUZZ.js";
-import "../Layout/Content/styles.js";
-import "../Message/styles.js";
-import "../Notification/NotificationBadge/styles.js";
-import "../Notification/styles.js";
-import "../../styles-DNay6iFa.js";
-import "../Progress/styles.js";
-import "../Row/styles.js";
-import "../../styles/global-styles.js";
-import "../Row/RowLabelValue/styles.js";
-import "../Row/RowActions/styles.js";
-import "../SegmentedControls/styles.js";
-import "../Select/styles.js";
-import "../Switch/styles.js";
-import "../../styles-Wpm1RiGr.js";
-import "../Tabs/styles.js";
-import "../Tile/styles.js";
-import "../Toast/styles.js";
-import "../Tooltip/styles.js";
-import "./states/RadioChecked.js";
-import "./states/RadioCheckedHover.js";
-import "./states/RadioCheckedFocussed.js";
-import "./states/RadioCheckedDisabled.js";
-import "./states/RadioUnchecked.js";
-import "./states/RadioUncheckedHover.js";
-import "./states/RadioUncheckedFocussed.js";
-import "./states/RadioUncheckedDisabled.js";
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import { useState as i, useRef as y, useEffect as v } from "react";
+import { TYPOGRAPHY_VARIANT as x } from "../../constants/index.js";
+import C from "./states/RadioChecked.js";
+import g from "./states/RadioCheckedHover.js";
+import l from "./states/RadioCheckedFocussed.js";
+import I from "./states/RadioCheckedDisabled.js";
+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 U from "../Typography/Typography.js";
+const j = T.div`
+  outline: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: ${({ $isDisabled: o }) => o ? "not-allowed" : "pointer"};
+  pointer-events: ${({ $isDisabled: o }) => o ? "none" : "auto"};
+  position: relative;
+`, q = ({ id: o, label: a, selectedId: f, onChange: h, isDisabled: r }) => {
+  const [c, R] = i(!1), [d, s] = i(!1), [n, u] = i(!1), m = y(null);
+  v(() => {
+    R(f === o);
+  }, [f, o]);
+  const p = () => {
+    r || h(o);
+  };
+  return /* @__PURE__ */ k(
+    j,
+    {
+      ref: m,
+      $isDisabled: r,
+      onFocus: (t) => {
+        r || t.target !== m.current || u(!0);
+      },
+      onBlur: () => {
+        r || u(!1);
+      },
+      onMouseEnter: () => !r && s(!0),
+      onMouseLeave: () => s(!1),
+      onClick: p,
+      onKeyDown: (t) => {
+        r || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), p());
+      },
+      tabIndex: r ? -1 : 0,
+      role: "radio",
+      "aria-checked": c,
+      "aria-disabled": r,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 26,
+              height: 26,
+              pointerEvents: "none"
+            },
+            children: c ? r ? /* @__PURE__ */ e(I, {}) : n ? /* @__PURE__ */ e(l, {}) : n ? /* @__PURE__ */ e(l, {}) : d ? /* @__PURE__ */ e(g, {}) : /* @__PURE__ */ e(C, {}) : n ? /* @__PURE__ */ e(H, {}) : d ? /* @__PURE__ */ e(F, {}) : r ? /* @__PURE__ */ e(E, {}) : /* @__PURE__ */ e(w, {})
+          }
+        ),
+        a && /* @__PURE__ */ e(
+          U,
+          {
+            variant: x.label1,
+            isText: !0,
+            children: a
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  P as RadioWrapper,
-  Q as default
+  j as RadioWrapper,
+  q as default
 };

package/dist/components/Radio/RadioGroup.cjs

@@ -0,0 +1 @@
+"use strict";const l=require("react/jsx-runtime"),s=require("./Radio.cjs"),t=({selectedId:n,options:r,onChange:d,isDisabled:o=!1})=>l.jsx("div",{role:"radiogroup",style:{display:"flex",flexDirection:"column",border:"none",cursor:o?"not-allowed":"pointer"},children:r.map(e=>l.jsx(s.default,{id:e.id,selectedId:n,label:e.label,onChange:i=>d(r.find(a=>a.id===i)),isDisabled:o},e.id))});module.exports=t;

package/dist/components/Radio/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { b as f } from "../../Typography-8BO7aTuQ.js";
+import f from "./Radio.js";
 const u = ({
   selectedId: d,
   options: r,

package/dist/components/Radio/states/RadioChecked.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),s=i=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...i,children:[e.jsx("rect",{width:20,height:20,fill:"#384DF6",rx:10}),e.jsx("circle",{cx:10,cy:10,r:4,fill:"#fff"})]});module.exports=s;

package/dist/components/Radio/states/RadioCheckedDisabled.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("react/jsx-runtime"),c=e=>s.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...e,children:[s.jsx("circle",{cx:10,cy:10,r:9.5,fill:"#F4F4F4",stroke:"#9A9A9A"}),s.jsx("circle",{cx:10,cy:10,r:4,fill:"#6C6C6C"})]});module.exports=c;

package/dist/components/Radio/states/RadioCheckedFocussed.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),s=e=>t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:26,height:26,fill:"none",...e,children:[t.jsx("rect",{width:20,height:20,x:3,y:3,fill:"#384DF6",rx:10}),t.jsx("circle",{cx:13,cy:13,r:4,fill:"#fff"}),t.jsx("rect",{width:24,height:24,x:1,y:1,stroke:"#384DF6",strokeWidth:2,rx:12})]});module.exports=s;

package/dist/components/Radio/states/RadioCheckedHover.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),s=i=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...i,children:[e.jsx("rect",{width:20,height:20,fill:"#384DF6",rx:10}),e.jsx("circle",{cx:10,cy:10,r:4,fill:"#fff"})]});module.exports=s;

package/dist/components/Radio/states/RadioUnchecked.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),t=s=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...s,children:e.jsx("circle",{cx:10,cy:10,r:9.5,fill:"#fff",stroke:"#9A9A9A"})});module.exports=t;

package/dist/components/Radio/states/RadioUncheckedDisabled.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),i=s=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...s,children:e.jsx("circle",{cx:10,cy:10,r:9.5,fill:"#fff",stroke:"#9A9A9A"})});module.exports=i;

package/dist/components/Radio/states/RadioUncheckedFocussed.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("react/jsx-runtime"),t=e=>s.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:26,height:26,fill:"none",...e,children:[s.jsx("circle",{cx:13,cy:13,r:9.5,fill:"#fff",stroke:"#9A9A9A"}),s.jsx("rect",{width:24,height:24,x:1,y:1,stroke:"#384DF6",strokeWidth:2,rx:12})]});module.exports=t;

package/dist/components/Radio/states/RadioUncheckedHover.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react/jsx-runtime"),s=e=>c.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...e,children:[c.jsx("circle",{cx:10,cy:10,r:9.5,fill:"#fff",stroke:"#9A9A9A"}),c.jsx("circle",{cx:10,cy:10,r:4,fill:"#6C6C6C"})]});module.exports=s;

package/dist/components/Row/Row.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),l=require("./styles.cjs"),c=require("./RowLabelValue/RowLabelValue.cjs"),a=require("./RowActions/RowActions.cjs"),R=require("../../providers/useGenesis.cjs"),q=({label:o,value:t,isFullWidth:s=!1,actions:r,hasBorder:n=!0,isLoading:u=!1,badgeProps:i=null})=>{const{theme:w}=R.useGenesis();return e.jsxs(l.Column,{$hasBorder:n,actions:r,$isFullWidth:s,children:[e.jsx(c.RowLabelValue,{label:o,value:t,isFullWidth:s,isLoading:u,badgeProps:i}),e.jsx(a.RowActions,{actions:r})]})};module.exports=q;

package/dist/components/Row/Row.js

@@ -1,10 +1,9 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Column as u } from "./styles.js";
-import "../../providers/BreakpointThemeProvider.js";
-import { u as a } from "../../Typography-8BO7aTuQ.js";
-import { RowLabelValue as n } from "./RowLabelValue/RowLabelValue.js";
-import { RowActions as p } from "./RowActions/RowActions.js";
-const $ = ({
+import { Column as n } from "./styles.js";
+import { RowLabelValue as u } from "./RowLabelValue/RowLabelValue.js";
+import { RowActions as a } from "./RowActions/RowActions.js";
+import { useGenesis as p } from "../../providers/useGenesis.js";
+const j = ({
   label: m,
   value: s,
   isFullWidth: o = !1,
@@ -13,16 +12,16 @@ const $ = ({
   isLoading: l = !1,
   badgeProps: f = null
 }) => {
-  const { theme: c } = a();
+  const { theme: c } = p();
   return /* @__PURE__ */ i(
-    u,
+    n,
     {
       $hasBorder: t,
       actions: r,
       $isFullWidth: o,
       children: [
         /* @__PURE__ */ e(
-          n,
+          u,
           {
             label: m,
             value: s,
@@ -31,11 +30,11 @@ const $ = ({
             badgeProps: f
           }
         ),
-        /* @__PURE__ */ e(p, { actions: r })
+        /* @__PURE__ */ e(a, { actions: r })
       ]
     }
   );
 };
 export {
-  $ as default
+  j as default
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("../../../constants/index.cjs"),n=require("./styles.cjs"),s=require("../../Typography/Typography.cjs"),c=({action:{onClick:e,label:t}})=>r.jsx(n.RowActionButton,{onClick:e,style:{cursor:"pointer",display:"100%",alignItems:"center",background:"#fff",borderRadius:4,padding:8,boxShadow:"0px 1px 2px 0px #00000026",width:"100%",border:"1px solid #cbcbcb"},children:r.jsx(s,{variant:o.TYPOGRAPHY_VARIANT.label1,isFullWidth:!0,children:t})}),u=({actions:e})=>e?r.jsx(n.ActionsContainer,{children:e.map((t,i)=>r.jsx(c,{action:t},i))}):null;exports.RowActions=u;

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

@@ -1,38 +1,9 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../Avatar/styles.js";
-import "../../Badge/styles.js";
-import "../../../providers/BreakpointThemeProvider.js";
-import { a as p } from "../../../Typography-8BO7aTuQ.js";
-import { TYPOGRAPHY_VARIANT as m } from "../../../constants/index.js";
-import "../../Breadcrumb/styles.js";
-import "../../Button/styles.js";
-import "../../Button/icon-button-styles.js";
-import "../../Card/styles.js";
-import "../../Checkbox/styles.js";
-import "../../DateRangePicker/DateRangePicker.js";
-import "react";
-import "../../ErrorBoundaryFallback/styles.js";
-import "../../../styles-XuoEGUZZ.js";
-import "../../Layout/Content/styles.js";
-import "../../Message/styles.js";
-import "../../Notification/NotificationBadge/styles.js";
-import "../../Notification/styles.js";
-import "../../../styles-DNay6iFa.js";
-import "../../Progress/styles.js";
-import "../styles.js";
-import "../../../styles/global-styles.js";
-import "../RowLabelValue/styles.js";
-import "../../SegmentedControls/styles.js";
-import "../../Select/styles.js";
-import "../../Switch/styles.js";
-import "../../../styles-Wpm1RiGr.js";
-import "../../Tabs/styles.js";
-import "../../Tile/styles.js";
-import "../../Toast/styles.js";
-import "../../Tooltip/styles.js";
-import { ActionsContainer as n, RowActionButton as e } from "./styles.js";
-const c = ({ action: { onClick: r, label: t } }) => /* @__PURE__ */ o(
-  e,
+import { TYPOGRAPHY_VARIANT as n } from "../../../constants/index.js";
+import { ActionsContainer as e, RowActionButton as p } from "./styles.js";
+import c from "../../Typography/Typography.js";
+const d = ({ action: { onClick: r, label: t } }) => /* @__PURE__ */ o(
+  p,
   {
     onClick: r,
     style: {
@@ -47,15 +18,15 @@ const c = ({ action: { onClick: r, label: t } }) => /* @__PURE__ */ o(
       border: "1px solid #cbcbcb"
     },
     children: /* @__PURE__ */ o(
-      p,
+      c,
       {
-        variant: m.label1,
+        variant: n.label1,
         isFullWidth: !0,
         children: t
       }
     )
   }
-), z = ({ actions: r }) => r ? /* @__PURE__ */ o(n, { children: r.map((t, i) => /* @__PURE__ */ o(c, { action: t }, i)) }) : null;
+), u = ({ actions: r }) => r ? /* @__PURE__ */ o(e, { children: r.map((t, i) => /* @__PURE__ */ o(d, { action: t }, i)) }) : null;
 export {
-  z as RowActions
+  u as RowActions
 };

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

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../utils/styled.cjs"),e=t.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  padding: 0px 26px;
+`,n=t.styled.button`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #cbcbcb !important;
+  border-radius: 4px;
+  padding: 8px;
+  box-shadow: ${({theme:o})=>o.shadows.general[1]};
+  width: 100%;
+  border: none;
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  &:active {
+    background: #f0f0f0;
+  }
+`;exports.ActionsContainer=e;exports.RowActionButton=n;

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

@@ -1,2 +1,2 @@
-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;
-export declare const RowActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ActionsContainer: any;
+export declare const RowActionButton: any;

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

@@ -1,11 +1,11 @@
-import { d as o } from "../../../styled-components.browser.esm-C47QHsU4.js";
+import { styled as o } from "../../../utils/styled.js";
 const r = o.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
   padding: 0px 26px;
-`, d = o.button`
+`, e = o.button`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -28,5 +28,5 @@ const r = o.div`
 `;
 export {
   r as ActionsContainer,
-  d as RowActionButton
+  e as RowActionButton
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../constants/index.cjs"),h=require("./RowSkeleton.cjs"),j=require("./styles.cjs"),x=require("../../../providers/useGenesis.cjs"),i=require("../../Typography/Typography.cjs"),R=require("../../Badge/Badge.cjs"),y=({label:t,value:l,isLoading:o,isFullWidth:r,badgeProps:s})=>{const{theme:c}=x.useGenesis(),u=(a,d)=>a?e.jsx(R,{...s}):e.jsx("div",{children:e.jsx(i,{variant:n.TYPOGRAPHY_VARIANT.label1,style:{lineHeight:"1.5"},children:d})});return e.jsxs(j.RowLabelValue,{$isFullWidth:r,children:[e.jsx("div",{children:e.jsx(i,{variant:n.TYPOGRAPHY_VARIANT.label2,color:c.colors.onsurface["copy-light"],children:t})}),e.jsx("div",{children:o?e.jsx("div",{children:e.jsx(h.RowSkeleton,{isFullWidth:r})}):u(s,l)})]})};exports.RowLabelValue=y;

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

@@ -1,4 +1,4 @@
-import { BadgeProps } from '../../..';
+import { BadgeProps } from '../..';
 interface RowLabelValueProps {
     label: string;
     value: string;

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

@@ -1,64 +1,37 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import "../../Avatar/styles.js";
-import h from "../../Badge/Badge.js";
-import "../../Breadcrumb/styles.js";
-import "../../../providers/BreakpointThemeProvider.js";
-import { u, a as t } from "../../../Typography-8BO7aTuQ.js";
-import "../../Button/styles.js";
-import { TYPOGRAPHY_VARIANT as m } from "../../../constants/index.js";
-import "../../Button/icon-button-styles.js";
-import "../../Card/styles.js";
-import "../../Checkbox/styles.js";
-import "../../DateRangePicker/DateRangePicker.js";
-import "react";
-import "../../ErrorBoundaryFallback/styles.js";
-import "../../../styles-XuoEGUZZ.js";
-import "../../Layout/Content/styles.js";
-import "../../Message/styles.js";
-import "../../Notification/NotificationBadge/styles.js";
-import "../../Notification/styles.js";
-import "../../../styles-DNay6iFa.js";
-import "../../Progress/styles.js";
-import "../styles.js";
-import "../RowActions/styles.js";
-import "../../SegmentedControls/styles.js";
-import "../../Select/styles.js";
-import "../../Switch/styles.js";
-import "../../../styles-Wpm1RiGr.js";
-import "../../Tabs/styles.js";
-import "../../Tile/styles.js";
-import "../../Toast/styles.js";
-import "../../Tooltip/styles.js";
-import "../../../styles/global-styles.js";
-import { RowSkeleton as f } from "./RowSkeleton.js";
-import { RowLabelValue as g } from "./styles.js";
-const W = ({
-  label: p,
-  value: e,
-  isLoading: l,
-  isFullWidth: o,
-  badgeProps: i
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { TYPOGRAPHY_VARIANT as i } from "../../../constants/index.js";
+import { RowSkeleton as s } from "./RowSkeleton.js";
+import { RowLabelValue as f } from "./styles.js";
+import { useGenesis as u } from "../../../providers/useGenesis.js";
+import l from "../../Typography/Typography.js";
+import g from "../../Badge/Badge.js";
+const x = ({
+  label: t,
+  value: n,
+  isLoading: a,
+  isFullWidth: e,
+  badgeProps: o
 }) => {
-  const { theme: a } = u(), n = (c, s) => c ? /* @__PURE__ */ r(h, { ...i }) : /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-    t,
+  const { theme: m } = u(), c = (d, h) => d ? /* @__PURE__ */ r(g, { ...o }) : /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+    l,
     {
-      variant: m.label1,
+      variant: i.label1,
       style: { lineHeight: "1.5" },
-      children: s
+      children: h
     }
   ) });
-  return /* @__PURE__ */ d(g, { $isFullWidth: o, children: [
+  return /* @__PURE__ */ p(f, { $isFullWidth: e, children: [
     /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-      t,
+      l,
       {
-        variant: m.label2,
-        color: a.colors.onsurface["copy-light"],
-        children: p
+        variant: i.label2,
+        color: m.colors.onsurface["copy-light"],
+        children: t
       }
     ) }),
-    /* @__PURE__ */ r("div", { children: l ? /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(f, { isFullWidth: o }) }) : n(i, e) })
+    /* @__PURE__ */ r("div", { children: a ? /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(s, { isFullWidth: e }) }) : c(o, n) })
   ] });
 };
 export {
-  W as RowLabelValue
+  x as RowLabelValue
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./styles.cjs"),a=({isFullWidth:r})=>r?e.jsx("div",{style:{width:200},children:e.jsx(t.Skeleton,{active:!0,paragraph:{rows:2},title:!1,avatar:!1,loading:!0})}):e.jsx("div",{style:{width:150},children:e.jsx(t.Skeleton,{active:!0,paragraph:{rows:1,width:"100%"},avatar:!1,title:!1,loading:!0})});exports.RowSkeleton=a;

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

@@ -0,0 +1,18 @@
+"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)=>`
+  display: flex;
+  flex-direction: ${t?"column":"row"};
+  align-items:  ${t?"flex-start":"center"};
+  justify-content:  ${t?"flex-start":"space-between"};
+  width: 100%;
+  padding: ${o(e)};
+  gap: 8px;
+`,l=n.styled.div`
+  ${({theme:e,$isFullWidth:t})=>a(e,t)}
+`,s=n.styled(r)`
+  && {
+    .ant-skeleton-content .ant-skeleton-paragraph > li {
+      border-radius: 50px !important;
+      height: 16px !important;
+    }
+  }
+`;exports.RowLabelValue=l;exports.Skeleton=s;exports.getGenesisRowLabelValueClass=a;

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

@@ -1,15 +1,5 @@
-interface StyledRowLabelValueProps {
-    $isFullWidth?: boolean;
-}
 export declare const getGenesisRowLabelValueClass: ({ components }: {
     components: any;
 }, $isFullWidth?: boolean) => string;
-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 {};
+export declare const RowLabelValue: any;
+export declare const Skeleton: any;

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

@@ -1,16 +1,16 @@
-import { d as n } from "../../../styled-components.browser.esm-C47QHsU4.js";
-import { S as a } from "../../../Skeleton-CudViN0a.js";
-const r = (e) => `${e.row["ver-padding"]}px ${e.row["hor-padding"]}px`, o = ({ components: e }, t = !1) => `
+import { styled as n } from "../../../utils/styled.js";
+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;
   flex-direction: ${t ? "column" : "row"};
   align-items:  ${t ? "flex-start" : "center"};
   justify-content:  ${t ? "flex-start" : "space-between"};
   width: 100%;
-  padding: ${r(e)};
+  padding: ${a(e)};
   gap: 8px;
 `, s = n.div`
   ${({ theme: e, $isFullWidth: t }) => o(e, t)}
-`, d = n(a)`
+`, l = n(r)`
   && {
     .ant-skeleton-content .ant-skeleton-paragraph > li {
       border-radius: 50px !important;
@@ -20,6 +20,6 @@ const r = (e) => `${e.row["ver-padding"]}px ${e.row["hor-padding"]}px`, o = ({ c
 `;
 export {
   s as RowLabelValue,
-  d as Skeleton,
+  l as Skeleton,
   o as getGenesisRowLabelValueClass
 };

package/dist/components/Row/styles.cjs

@@ -0,0 +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)=>`
+  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;

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

@@ -1,14 +1,6 @@
-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: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledColumnProps>> & string;
-export {};
+export declare const Column: any;

package/dist/components/Row/styles.js

@@ -1,13 +1,13 @@
-import { d as i } from "../../styled-components.browser.esm-C47QHsU4.js";
-const l = (t) => `1px solid ${t.surface["border-light"]}`, d = ({ colors: t, borderRadius: o, sizing: r }, e = !1, n = !1, s = null) => `
+import { styled as i } from "../../utils/styled.js";
+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;
   width: 100%;
-  border-bottom: ${e ? l(t) : "none"};
+  border-bottom: ${t ? l(e) : "none"};
   padding-bottom:${s ? "24px" : "0"};
   align-items: ${n ? "flex-start !important" : "center"};
 `, m = i.div`
-  ${({ theme: t, $hasBorder: o, $isFullWidth: r, actions: e }) => d(t, o, r, e)}
+  ${({ theme: e, $hasBorder: o, $isFullWidth: r, actions: t }) => d(e, o, r, t)}
 `;
 export {
   m as Column,

package/dist/components/SegmentedControls/SegmentedControls.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react/jsx-runtime"),i=require("./styles.cjs"),a=({options:e,onChange:t,selectedTabId:s,isScaled:n=!1})=>{const o=e.map(({label:r,id:l,icon:u})=>({label:r,value:l,icon:u}));return c.jsx(i.SegmentedControls,{options:o,onChange:t,value:s,block:n})};module.exports=a;

package/dist/components/SegmentedControls/styles.cjs

@@ -0,0 +1,22 @@
+"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")=>`
+  &.ant-segmented {
+    border-radius: ${r.BorderRadiusMd};
+    color: ${e.onsurface.copy};
+    
+    .ant-segmented-item {
+      color: ${e[t].text};
+      transition: all 0.3s;
+      
+      &-selected {
+        background: ${e[t][o]};
+        color: ${e[t].textContrast};
+      }
+      
+      &:hover {
+        color: ${e[t].hover};
+      }
+    }
+  }
+`,d=i.styled(a)`
+  ${({theme:e,type:r="primary",state:s="active"})=>n(e,r,s)}
+`;exports.SegmentedControls=d;exports.getGenesisClass=n;