gd-design-library 0.3.3 → 0.3.5

package/tokens/slider.js

@@ -1 +1,45 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./colors.js"),e=require("./cursors.js"),o={isolation:"isolate",appearance:"none",backgroundColor:r.colors.bg.fill.secondary.default,borderRadius:"50%",blockSize:"20px",inlineSize:"20px",boxSizing:"border-box",border:"2px solid currentColor",marginTop:"-6px"},a={blockSize:"8px",borderRadius:"inherit",backgroundRepeat:"no-repeat",backgroundColor:r.colors.border.default,backgroundImage:"linear-gradient(to right, transparent 0 100%), linear-gradient(to right, currentColor calc(100% * var(--gd-slider-fill-ratio)), transparent calc(100% * var(--gd-slider-fill-ratio)))",backgroundPositionX:"calc((0.75rem - 8px) / 2), 0",backgroundSize:"calc(100% - 0.75rem), auto"},t={default:{position:"relative",display:"block",inlineSize:"100%",color:r.colors.text.title,cursor:e.cursors.pointer,WebkitAppearance:"none",appearance:"none",padding:"0.4375rem 0",backgroundColor:r.colors.transparent,outline:"none","&[disabled]":{opacity:"50%",cursor:e.cursors.default},"&::-webkit-slider-thumb":o,"&::-webkit-slider-runnable-track":a,"&::-moz-range-thumb":o,"&::-moz-range-track":a}};exports.slider=t;
+import { colors as r } from "./colors.js";
+import { cursors as e } from "./cursors.js";
+const o = {
+  isolation: "isolate",
+  appearance: "none",
+  backgroundColor: r.bg.fill.secondary.default,
+  borderRadius: "50%",
+  blockSize: "20px",
+  inlineSize: "20px",
+  boxSizing: "border-box",
+  border: "2px solid currentColor",
+  marginTop: "-6px"
+}, a = {
+  blockSize: "8px",
+  borderRadius: "inherit",
+  backgroundRepeat: "no-repeat",
+  backgroundColor: r.border.default,
+  backgroundImage: "linear-gradient(to right, transparent 0 100%), linear-gradient(to right, currentColor calc(100% * var(--gd-slider-fill-ratio)), transparent calc(100% * var(--gd-slider-fill-ratio)))",
+  backgroundPositionX: "calc((0.75rem - 8px) / 2), 0",
+  backgroundSize: "calc(100% - 0.75rem), auto"
+}, n = {
+  default: {
+    position: "relative",
+    display: "block",
+    inlineSize: "100%",
+    color: r.text.title,
+    cursor: e.pointer,
+    WebkitAppearance: "none",
+    appearance: "none",
+    padding: "0.4375rem 0",
+    backgroundColor: r.transparent,
+    outline: "none",
+    "&[disabled]": {
+      opacity: "50%",
+      cursor: e.default
+    },
+    "&::-webkit-slider-thumb": o,
+    "&::-webkit-slider-runnable-track": a,
+    "&::-moz-range-thumb": o,
+    "&::-moz-range-track": a
+  }
+};
+export {
+  n as slider
+};

package/tokens/snackbar.js

@@ -1 +1,167 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../types/common.js"),v=require("../types/typography.js"),i=require("../types/layout.js"),t=require("../types/snackbar.js"),s=require("./utils.js"),n=require("./spacing.js"),T=require("./font.js"),o=require("./colors.js"),B=require("./borders.js"),F=require("./cursors.js"),R=require("./values.js"),V=require("./radius.js"),a=require("./icon.js"),P=require("./shadow.js"),e=require("./display.js"),C="302px";var c,l,g,p,d,u,b,m,f,x,h,S,k,w,I,y,D,q,z,A;const $={container:{position:"fixed",display:e.display.flex,flexDirection:i.FlexDirection.Column,gap:n.spacing[r.SizeVariant.Sm],padding:n.spacing[r.SizeVariant.Sm],boxSizing:"border-box",maxHeight:`calc(100vh - ${n.spacing[r.SizeVariant.Xs]})`,overflowY:"auto",overflowX:"hidden",scrollbarWidth:"thin",scrollbarColor:`${o.colors.transparent} ${o.colors.transparent}`,zIndex:R.values.zIndex.snackbar,"&::-webkit-scrollbar":{width:n.spacing[(c=r.SizeVariant)==null?void 0:c.Sm],background:o.colors.transparent},"&::-webkit-scrollbar-thumb":{background:o.colors.transparent,borderRadius:V.radius[(l=r.SizeVariant)==null?void 0:l.Sm]},"&::-webkit-scrollbar-track":{background:o.colors.transparent},"&:hover::-webkit-scrollbar-thumb":{background:"rgba(0, 0, 0, 0.3)"},"&.scrolling::-webkit-scrollbar-thumb":{background:"rgba(0, 0, 0, 0.3)"}},snackbar:{default:{position:"relative",boxShadow:(g=P.shadows.snackbar)==null?void 0:g.default,width:C,fontSize:T.font.size[(p=v.TypographyVariant)==null?void 0:p.Body1],display:e.display.flex,flexDirection:i.FlexDirection.Column,gap:n.spacing.sm,color:(d=o.colors.text)==null?void 0:d.default,padding:`${(u=n.spacing)==null?void 0:u.sm} ${(b=n.spacing)==null?void 0:b.md}`},background:{default:(m=o.colors.bg)==null?void 0:m.surface,variants:{success:o.colors.bg.toast.success,error:o.colors.bg.toast.error,warning:o.colors.bg.toast.warning,info:o.colors.bg.toast.info}},animation:{duration:"300ms",timing:"ease-out"}},positions:{[(f=t.SnackbarPosition)==null?void 0:f.TopLeft]:{top:0,left:0,alignItems:e.flexAlignItems.start},[(x=t.SnackbarPosition)==null?void 0:x.TopCenter]:{top:n.spacing.none,left:"50%",transform:"translateX(-50%)",alignItems:e.flexAlignItems.center},[(h=t.SnackbarPosition)==null?void 0:h.TopRight]:{top:n.spacing.none,right:n.spacing.none,alignItems:e.flexAlignItems.end},[(S=t.SnackbarPosition)==null?void 0:S.BottomLeft]:{bottom:n.spacing.none,left:n.spacing.none,alignItems:e.flexAlignItems.start,flexDirection:i.FlexDirection.ColumnReverse},[(k=t.SnackbarPosition)==null?void 0:k.BottomCenter]:{bottom:n.spacing.none,left:"50%",transform:"translateX(-50%)",alignItems:e.flexAlignItems.center,flexDirection:i.FlexDirection.ColumnReverse},[(w=t.SnackbarPosition)==null?void 0:w.BottomRight]:{bottom:n.spacing.none,right:n.spacing.none,alignItems:e.flexAlignItems.end,flexDirection:i.FlexDirection.ColumnReverse}},closeButton:{position:"absolute",top:n.spacing.sm,right:n.spacing.md,background:o.colors.transparent,border:B.borders.none,cursor:F.cursors.pointer,padding:3,width:(D=(y=(I=a.icon)==null?void 0:I.size)==null?void 0:y[r.SizeVariant.Sm])==null?void 0:D.width,height:(A=(z=(q=a.icon)==null?void 0:q.size)==null?void 0:z[r.SizeVariant.Sm])==null?void 0:A.height},icons:{close:{name:"cross",width:"100%",height:"100%"},success:{name:"success",fill:o.colors.icon.success},error:{name:"error",fill:o.colors.icon.error},warning:{name:"warning",fill:o.colors.icon.warning},info:{name:"info",fill:o.colors.icon.info}},snackbarBody:{display:e.display.flex,alignItems:e.flexAlignItems.start,gap:n.spacing.sm},snackbarContent:{display:e.display.flex,flexDirection:i.FlexDirection.Column,alignItems:e.flexAlignItems.start,gap:s.getSpacing(1),flex:1},actionsContainer:{paddingTop:s.getSpacing(1)}};exports.DEFAULT_SNACKBAR_WIDTH=C;exports.snackbar=$;
+import { getSpacing as s } from "./utils.js";
+import { spacing as o } from "./spacing.js";
+import { font as R } from "./font.js";
+import { colors as r } from "./colors.js";
+import { borders as T } from "./borders.js";
+import { cursors as $ } from "./cursors.js";
+import { values as A } from "./values.js";
+import { radius as X } from "./radius.js";
+import { icon as l } from "./icon.js";
+import { shadows as L } from "./shadow.js";
+import { flexAlignItems as t, display as a } from "./display.js";
+import { SnackbarPosition as e } from "../types/snackbar.js";
+import { FlexDirection as i } from "../types/layout.js";
+import { SizeVariant as n } from "../types/common.js";
+import { TypographyVariant as F } from "../types/typography.js";
+const H = "302px";
+var m, c, f, p, g, d, b, u, h, x, k, w, S, C, I, v, y, D, z, B;
+const Q = {
+  container: {
+    position: "fixed",
+    display: a.flex,
+    flexDirection: i.Column,
+    gap: o[n.Sm],
+    padding: o[n.Sm],
+    boxSizing: "border-box",
+    maxHeight: `calc(100vh - ${o[n.Xs]})`,
+    overflowY: "auto",
+    overflowX: "hidden",
+    scrollbarWidth: "thin",
+    scrollbarColor: `${r.transparent} ${r.transparent}`,
+    zIndex: A.zIndex.snackbar,
+    // to be under modal, could be rewritten by theme
+    "&::-webkit-scrollbar": {
+      width: o[(m = n) == null ? void 0 : m.Sm],
+      background: r.transparent
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: r.transparent,
+      borderRadius: X[(c = n) == null ? void 0 : c.Sm]
+    },
+    "&::-webkit-scrollbar-track": {
+      background: r.transparent
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+      background: "rgba(0, 0, 0, 0.3)"
+    },
+    "&.scrolling::-webkit-scrollbar-thumb": {
+      background: "rgba(0, 0, 0, 0.3)"
+    }
+  },
+  snackbar: {
+    default: {
+      position: "relative",
+      boxShadow: (f = L.snackbar) == null ? void 0 : f.default,
+      width: H,
+      fontSize: R.size[(p = F) == null ? void 0 : p.Body1],
+      display: a.flex,
+      flexDirection: i.Column,
+      gap: o.sm,
+      color: (g = r.text) == null ? void 0 : g.default,
+      padding: `${(d = o) == null ? void 0 : d.sm} ${(b = o) == null ? void 0 : b.md}`
+    },
+    background: {
+      default: (u = r.bg) == null ? void 0 : u.surface,
+      variants: {
+        success: r.bg.toast.success,
+        error: r.bg.toast.error,
+        warning: r.bg.toast.warning,
+        info: r.bg.toast.info
+      }
+    },
+    animation: {
+      duration: "300ms",
+      timing: "ease-out"
+    }
+  },
+  positions: {
+    [(h = e) == null ? void 0 : h.TopLeft]: {
+      top: 0,
+      left: 0,
+      alignItems: t.start
+    },
+    [(x = e) == null ? void 0 : x.TopCenter]: {
+      top: o.none,
+      left: "50%",
+      transform: "translateX(-50%)",
+      alignItems: t.center
+    },
+    [(k = e) == null ? void 0 : k.TopRight]: {
+      top: o.none,
+      right: o.none,
+      alignItems: t.end
+    },
+    [(w = e) == null ? void 0 : w.BottomLeft]: {
+      bottom: o.none,
+      left: o.none,
+      alignItems: t.start,
+      flexDirection: i.ColumnReverse
+    },
+    [(S = e) == null ? void 0 : S.BottomCenter]: {
+      bottom: o.none,
+      left: "50%",
+      transform: "translateX(-50%)",
+      alignItems: t.center,
+      flexDirection: i.ColumnReverse
+    },
+    [(C = e) == null ? void 0 : C.BottomRight]: {
+      bottom: o.none,
+      right: o.none,
+      alignItems: t.end,
+      flexDirection: i.ColumnReverse
+    }
+  },
+  closeButton: {
+    position: "absolute",
+    top: o.sm,
+    right: o.md,
+    background: r.transparent,
+    border: T.none,
+    cursor: $.pointer,
+    padding: 3,
+    width: (y = (v = (I = l) == null ? void 0 : I.size) == null ? void 0 : v[n.Sm]) == null ? void 0 : y.width,
+    height: (B = (z = (D = l) == null ? void 0 : D.size) == null ? void 0 : z[n.Sm]) == null ? void 0 : B.height
+  },
+  icons: {
+    close: {
+      name: "cross",
+      width: "100%",
+      height: "100%"
+    },
+    success: {
+      name: "success",
+      fill: r.icon.success
+    },
+    error: {
+      name: "error",
+      fill: r.icon.error
+    },
+    warning: {
+      name: "warning",
+      fill: r.icon.warning
+    },
+    info: {
+      name: "info",
+      fill: r.icon.info
+    }
+  },
+  snackbarBody: {
+    display: a.flex,
+    alignItems: t.start,
+    gap: o.sm
+  },
+  snackbarContent: {
+    display: a.flex,
+    flexDirection: i.Column,
+    alignItems: t.start,
+    gap: s(1),
+    flex: 1
+  },
+  actionsContainer: {
+    paddingTop: s(1)
+  }
+};
+export {
+  H as DEFAULT_SNACKBAR_WIDTH,
+  Q as snackbar
+};

package/tokens/spacing.js

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../types/common.js"),a={none:0,[i.SizeVariant.Xs]:"4px",[i.SizeVariant.Sm]:"8px",[i.SizeVariant.Md]:"16px",[i.SizeVariant.Lg]:"24px",[i.SizeVariant.Xl]:"32px",[i.SizeVariant.Xxl]:"40px"};exports.spacing=a;
+import { SizeVariant as p } from "../types/common.js";
+const n = {
+  none: 0,
+  [p.Xs]: "4px",
+  [p.Sm]: "8px",
+  [p.Md]: "16px",
+  [p.Lg]: "24px",
+  [p.Xl]: "32px",
+  [p.Xxl]: "40px"
+};
+export {
+  n as spacing
+};

package/tokens/stepper.js

@@ -1 +1,147 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../utils/helpers.js");require("react");const o=require("../types/common.js"),n=require("../types/typography.js"),d=require("../types/cursors.js"),t=require("../types/stepper.js"),i=require("./icon.js"),r=require("./colors.js"),c=require("./borders.js"),S=require("./radius.js"),s=require("./values.js"),u=require("./typography.js"),g=require("./font.js"),f=require("./spacing.js"),a=require("./display.js"),p=i.icon.size[o.SizeVariant.Xxl],l=104,m={default:{display:a.display.flex,flexDirection:"row",justifyContent:"space-between",width:"100%"},separator:{default:{width:"100%",position:"relative",zIndex:-100,top:`${p.height/2}px`,marginLeft:`-${l/2}px`,marginRight:`-${l/2}px`,transition:e.get(s.values,"transitions.stepper.separator"),borderTop:c.borders.generic({color:e.get(r.colors,"border.default"),width:s.values.borderMedium})},[t.StepStatus.Active]:{},[t.StepStatus.Complete]:{borderTopColor:e.get(r.colors,"border.primary.default")},[t.StepStatus.Inactive]:{}},step:{default:{display:a.display.flex,flexDirection:"column",alignItems:a.flexAlignItems.center,justifyContent:"space-between",minWidth:`${l}px`},[t.StepStatus.Active]:{},[t.StepStatus.Inactive]:{},[t.StepStatus.Complete]:{cursor:d.Cursors.Pointer}},stepIcon:{default:{display:a.display.flex,alignItems:a.flexAlignItems.center,justifyContent:"center",borderRadius:S.radius.round,border:c.borders.generic({width:s.values.borderMedium}),fontSize:u.typography[n.TypographyVariant.H5],transition:e.get(s.values,"transitions.stepper.stepIcon"),colors:e.get(r.colors,"text.default"),...p},[t.StepStatus.Active]:{default:{backgroundColor:e.get(r.colors,"bg.default"),borderColor:e.get(r.colors,"border.primary.default")},[t.StepValidationStatus.Success]:{},[t.StepValidationStatus.Error]:{backgroundColor:e.get(r.colors,"bg.fill.error.primary.default"),borderColor:e.get(r.colors,"bg.fill.error.primary.default")}},[t.StepStatus.Inactive]:{default:{backgroundColor:e.get(r.colors,"bg.default")},[t.StepValidationStatus.Success]:{},[t.StepValidationStatus.Error]:{}},[t.StepStatus.Complete]:{default:{fontWeight:g.font.weight.medium,backgroundColor:e.get(r.colors,"bg.fill.primary.default")},[t.StepValidationStatus.Success]:{},[t.StepValidationStatus.Error]:{backgroundColor:e.get(r.colors,"bg.fill.error.secondary.default"),borderColor:e.get(r.colors,"bg.fill.error.secondary.default")}},[t.StepValidationStatus.Success]:{default:{},[t.StepValidationStatus.Success]:{},[t.StepValidationStatus.Error]:{}}},stepLabel:{default:{marginTop:f.spacing[o.SizeVariant.Sm],fontSize:u.typography[n.TypographyVariant.Body1],colors:e.get(r.colors,"text.default")},[t.StepStatus.Active]:{},[t.StepStatus.Inactive]:{},[t.StepStatus.Complete]:{},[t.StepValidationStatus.Error]:{},[t.StepValidationStatus.Success]:{}},icons:{active:{name:"check",fill:e.get(r.colors,"icon.primary.active"),...e.get(i.icon,["size",o.SizeVariant.Md],{})},inactive:{name:"check",fill:e.get(r.colors,"icon.primary.default"),...e.get(i.icon,["size",o.SizeVariant.Md],{})},complete:{name:"check",fill:e.get(r.colors,"bg.fill.secondary.default"),...e.get(i.icon,["size",o.SizeVariant.Md],{})},error:{name:"cross",fill:e.get(r.colors,"icon.error"),...e.get(i.icon,["size",o.SizeVariant.Sm],{})},errorActive:{name:"cross",fill:e.get(r.colors,"neutral.white"),...e.get(i.icon,["size",o.SizeVariant.Sm],{})}}};exports.stepper=m;
+import { icon as a } from "./icon.js";
+import { colors as e } from "./colors.js";
+import { borders as c } from "./borders.js";
+import { radius as u } from "./radius.js";
+import { values as l } from "./values.js";
+import { typography as d } from "./typography.js";
+import { font as b } from "./font.js";
+import { spacing as g } from "./spacing.js";
+import { flexAlignItems as p, display as n } from "./display.js";
+import { StepValidationStatus as t, StepStatus as o } from "../types/stepper.js";
+import { get as r } from "../utils/helpers.js";
+import { Cursors as y } from "../types/cursors.js";
+import { SizeVariant as i } from "../types/common.js";
+import { TypographyVariant as f } from "../types/typography.js";
+const m = a.size[i.Xxl], s = 104, $ = {
+  default: {
+    display: n.flex,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  separator: {
+    default: {
+      width: "100%",
+      position: "relative",
+      zIndex: -100,
+      top: `${m.height / 2}px`,
+      marginLeft: `-${s / 2}px`,
+      marginRight: `-${s / 2}px`,
+      transition: r(l, "transitions.stepper.separator"),
+      borderTop: c.generic({
+        color: r(e, "border.default"),
+        width: l.borderMedium
+      })
+    },
+    [o.Active]: {},
+    [o.Complete]: {
+      borderTopColor: r(e, "border.primary.default")
+    },
+    [o.Inactive]: {}
+  },
+  step: {
+    default: {
+      display: n.flex,
+      flexDirection: "column",
+      alignItems: p.center,
+      justifyContent: "space-between",
+      minWidth: `${s}px`
+    },
+    [o.Active]: {},
+    [o.Inactive]: {},
+    [o.Complete]: {
+      cursor: y.Pointer
+    }
+  },
+  stepIcon: {
+    default: {
+      display: n.flex,
+      alignItems: p.center,
+      justifyContent: "center",
+      borderRadius: u.round,
+      border: c.generic({
+        width: l.borderMedium
+      }),
+      fontSize: d[f.H5],
+      transition: r(l, "transitions.stepper.stepIcon"),
+      colors: r(e, "text.default"),
+      ...m
+    },
+    [o.Active]: {
+      default: {
+        backgroundColor: r(e, "bg.default"),
+        borderColor: r(e, "border.primary.default")
+      },
+      [t.Success]: {},
+      [t.Error]: {
+        backgroundColor: r(e, "bg.fill.error.primary.default"),
+        borderColor: r(e, "bg.fill.error.primary.default")
+      }
+    },
+    [o.Inactive]: {
+      default: {
+        backgroundColor: r(e, "bg.default")
+      },
+      [t.Success]: {},
+      [t.Error]: {}
+    },
+    [o.Complete]: {
+      default: {
+        fontWeight: b.weight.medium,
+        backgroundColor: r(e, "bg.fill.primary.default")
+      },
+      [t.Success]: {},
+      [t.Error]: {
+        backgroundColor: r(e, "bg.fill.error.secondary.default"),
+        borderColor: r(e, "bg.fill.error.secondary.default")
+      }
+    },
+    [t.Success]: {
+      default: {},
+      [t.Success]: {},
+      [t.Error]: {}
+    }
+  },
+  stepLabel: {
+    default: {
+      marginTop: g[i.Sm],
+      fontSize: d[f.Body1],
+      colors: r(e, "text.default")
+    },
+    [o.Active]: {},
+    [o.Inactive]: {},
+    [o.Complete]: {},
+    [t.Error]: {},
+    [t.Success]: {}
+  },
+  icons: {
+    active: {
+      name: "check",
+      fill: r(e, "icon.primary.active"),
+      ...r(a, ["size", i.Md], {})
+    },
+    inactive: {
+      name: "check",
+      fill: r(e, "icon.primary.default"),
+      ...r(a, ["size", i.Md], {})
+    },
+    complete: {
+      name: "check",
+      fill: r(e, "bg.fill.secondary.default"),
+      ...r(a, ["size", i.Md], {})
+    },
+    error: {
+      name: "cross",
+      fill: r(e, "icon.error"),
+      ...r(a, ["size", i.Sm], {})
+    },
+    errorActive: {
+      name: "cross",
+      fill: r(e, "neutral.white"),
+      ...r(a, ["size", i.Sm], {})
+    }
+  }
+};
+export {
+  $ as stepper
+};

package/tokens/switch.js

@@ -1 +1,76 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");const i=require("../utils/layout.js"),t=require("../types/label.js"),e=require("./colors.js"),o=require("./display.js"),r=require("./cursors.js"),l={default:{position:"relative",display:o.display.inlineBlock,width:"45px",height:"24px",flexShrink:0,borderRadius:"20px",cursor:r.cursors.pointer,"&[disabled]":{opacity:"50%",cursor:r.cursors.default}},label:{[t.LabelPosition.Right]:{order:1}},wrapper:{default:{display:o.display.inlineFlex,gap:"0.5rem",calculateJustify:i.calculateJustify("center")},disabled:{}},slider:{default:{position:"absolute",left:0,right:0,top:0,bottom:0,transition:"0.2s",backgroundColor:e.colors.bg.fill.disabled,borderRadius:"inherit","&::before":{position:"absolute",content:'""',borderRadius:"50%",width:"18px",height:"18px",left:"3px",bottom:"3px",transition:"0.2s",backgroundColor:e.colors.neutral.white}},checked:{backgroundColor:e.colors.primary.default,"&::before":{transform:"translateX(21px)"}}},checkbox:{border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:"1px"}};exports.switchToken=l;
+import { colors as o } from "./colors.js";
+import { display as i } from "./display.js";
+import { cursors as r } from "./cursors.js";
+import { LabelPosition as t } from "../types/label.js";
+import { calculateJustify as e } from "../utils/layout.js";
+const n = {
+  default: {
+    position: "relative",
+    display: i.inlineBlock,
+    width: "45px",
+    height: "24px",
+    flexShrink: 0,
+    borderRadius: "20px",
+    cursor: r.pointer,
+    "&[disabled]": {
+      opacity: "50%",
+      cursor: r.default
+    }
+  },
+  label: {
+    [t.Right]: {
+      order: 1
+    }
+  },
+  wrapper: {
+    default: {
+      display: i.inlineFlex,
+      gap: "0.5rem",
+      calculateJustify: e("center")
+    },
+    disabled: {}
+  },
+  slider: {
+    default: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      transition: "0.2s",
+      backgroundColor: o.bg.fill.disabled,
+      borderRadius: "inherit",
+      "&::before": {
+        position: "absolute",
+        content: '""',
+        borderRadius: "50%",
+        width: "18px",
+        height: "18px",
+        left: "3px",
+        bottom: "3px",
+        transition: "0.2s",
+        backgroundColor: o.neutral.white
+      }
+    },
+    checked: {
+      backgroundColor: o.primary.default,
+      "&::before": {
+        transform: "translateX(21px)"
+      }
+    }
+  },
+  checkbox: {
+    border: 0,
+    clip: "rect(0 0 0 0)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px"
+  }
+};
+export {
+  n as switchToken
+};

package/tokens/tabs.js

@@ -1 +1,108 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../utils/helpers.js");require("react");const n=require("../types/common.js"),a=require("../types/typography.js"),l=require("./icon.js"),r=require("./font.js"),e=require("./colors.js"),t=require("./borders.js"),d=require("./radius.js"),i=require("./values.js"),s={default:{display:"flex",flexDirection:"column",width:"100%"},header:{default:{display:"flex",flexDirection:"row",position:"relative","&::after":{content:'""',position:"absolute",width:"100%",bottom:0,zIndex:-100,borderBottom:t.borders.generic({width:i.values.borderThin,color:o.get(e.colors,"border.default")})}}},label:{default:{fontWeight:o.get(r.font,"weight.medium"),fontSize:o.get(r.font,["size",a.TypographyVariant.Body2]),color:o.get(e.colors,"text.default"),transition:"border 0.2s ease-in",borderBottom:t.borders.generic({width:i.values.borderMedium,color:e.colors.transparent}),flex:1,"&:hover":{".Tabs__noticeCounter":{backgroundColor:o.get(e.colors,"icon.primary.active")}}},active:{borderBottomColor:o.get(e.colors,"border.primary.default")},disabled:{default:{"&:hover":{".Tabs__noticeCounter":{backgroundColor:o.get(e.colors,"icon.primary.disabled")}},".Tabs__noticeCounter":{color:e.colors.neutral.white},borderBottom:t.borders.generic({width:i.values.borderThin,color:o.get(e.colors,"border.secondary.disabled")})},active:{borderBottomWidth:"2px",borderBottomColor:o.get(e.colors,"border.secondary.disabled")}}},panelsWrapper:{default:{}},panel:{default:{}},noticeCounter:{default:{display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:o.get(e.colors,"icon.primary.default"),color:o.get(e.colors,"neutral.white"),fontWeight:o.get(r.font,"weight.normal"),fontSize:o.get(r.font,["size",a.TypographyVariant.Caption]),borderRadius:d.radius.round,...o.get(l.icon,["size",n.SizeVariant.Sm],{})},active:{backgroundColor:o.get(e.colors,"icon.primary.active")},disabled:{backgroundColor:o.get(e.colors,"icon.primary.disabled")}},tabButton:{default:{width:"100%"}}};exports.tabs=s;
+import { icon as d } from "./icon.js";
+import { font as e } from "./font.js";
+import { colors as r } from "./colors.js";
+import { borders as t } from "./borders.js";
+import { radius as n } from "./radius.js";
+import { values as i } from "./values.js";
+import { get as o } from "../utils/helpers.js";
+import { SizeVariant as l } from "../types/common.js";
+import { TypographyVariant as a } from "../types/typography.js";
+const y = {
+  default: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%"
+  },
+  header: {
+    default: {
+      display: "flex",
+      flexDirection: "row",
+      position: "relative",
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        bottom: 0,
+        zIndex: -100,
+        borderBottom: t.generic({
+          width: i.borderThin,
+          color: o(r, "border.default")
+        })
+      }
+    }
+  },
+  label: {
+    default: {
+      fontWeight: o(e, "weight.medium"),
+      fontSize: o(e, ["size", a.Body2]),
+      color: o(r, "text.default"),
+      transition: "border 0.2s ease-in",
+      borderBottom: t.generic({
+        width: i.borderMedium,
+        color: r.transparent
+      }),
+      flex: 1,
+      "&:hover": {
+        ".Tabs__noticeCounter": {
+          backgroundColor: o(r, "icon.primary.active")
+        }
+      }
+    },
+    active: {
+      borderBottomColor: o(r, "border.primary.default")
+    },
+    disabled: {
+      default: {
+        "&:hover": {
+          ".Tabs__noticeCounter": {
+            backgroundColor: o(r, "icon.primary.disabled")
+          }
+        },
+        ".Tabs__noticeCounter": {
+          color: r.neutral.white
+        },
+        borderBottom: t.generic({
+          width: i.borderThin,
+          color: o(r, "border.secondary.disabled")
+        })
+      },
+      active: {
+        borderBottomWidth: "2px",
+        borderBottomColor: o(r, "border.secondary.disabled")
+      }
+    }
+  },
+  panelsWrapper: {
+    default: {}
+  },
+  panel: {
+    default: {}
+  },
+  noticeCounter: {
+    default: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: o(r, "icon.primary.default"),
+      color: o(r, "neutral.white"),
+      fontWeight: o(e, "weight.normal"),
+      fontSize: o(e, ["size", a.Caption]),
+      borderRadius: n.round,
+      ...o(d, ["size", l.Sm], {})
+    },
+    active: {
+      backgroundColor: o(r, "icon.primary.active")
+    },
+    disabled: {
+      backgroundColor: o(r, "icon.primary.disabled")
+    }
+  },
+  tabButton: {
+    default: {
+      width: "100%"
+    }
+  }
+};
+export {
+  y as tabs
+};

package/tokens/textarea.js

@@ -1 +1,45 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={default:{},outlined:{primary:{"&:hover":{},"&:active":{},"&:focus":{},"&:disabled":{},"&:read-only":{}},secondary:{"&:hover":{},"&:active":{},"&:focus":{},"&:disabled":{},"&:read-only":{}},success:{"&:hover":{},"&:active":{},"&:focus":{},"&:disabled":{},"&:read-only":{}},warning:{"&:hover":{},"&:active":{},"&:focus":{},"&:disabled":{},"&:read-only":{}},error:{"&:hover":{},"&:active":{},"&:focus":{},"&:disabled":{},"&:read-only":{}}},contained:{},text:{}};exports.textarea=e;
+const e = {
+  default: {},
+  outlined: {
+    primary: {
+      "&:hover": {},
+      "&:active": {},
+      "&:focus": {},
+      "&:disabled": {},
+      "&:read-only": {}
+    },
+    secondary: {
+      "&:hover": {},
+      "&:active": {},
+      "&:focus": {},
+      "&:disabled": {},
+      "&:read-only": {}
+    },
+    success: {
+      "&:hover": {},
+      "&:active": {},
+      "&:focus": {},
+      "&:disabled": {},
+      "&:read-only": {}
+    },
+    warning: {
+      "&:hover": {},
+      "&:active": {},
+      "&:focus": {},
+      "&:disabled": {},
+      "&:read-only": {}
+    },
+    error: {
+      "&:hover": {},
+      "&:active": {},
+      "&:focus": {},
+      "&:disabled": {},
+      "&:read-only": {}
+    }
+  },
+  contained: {},
+  text: {}
+};
+export {
+  e as textarea
+};

package/tokens/toggle.js

@@ -1 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../types/common.js"),r=require("./display.js"),o=require("./spacing.js"),i=require("./colors.js"),s=require("./borders.js"),t={default:{display:r.display.inlineFlex,position:"relative",padding:o.spacing[e.SizeVariant.Xs],border:s.borders.generic({color:i.colors.border.default})},disabled:{}};exports.switchToggle=t;
+import { display as o } from "./display.js";
+import { spacing as r } from "./spacing.js";
+import { colors as i } from "./colors.js";
+import { borders as e } from "./borders.js";
+import { SizeVariant as t } from "../types/common.js";
+const s = {
+  default: {
+    display: o.inlineFlex,
+    position: "relative",
+    padding: r[t.Xs],
+    border: e.generic({
+      color: i.border.default
+    })
+  },
+  disabled: {}
+};
+export {
+  s as switchToggle
+};