gd-design-library 0.3.4 → 0.3.5

package/tokens/inputfile.js

@@ -1 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../constants/positioning.js"),i={default:{},input:{opacity:0,position:"absolute",zIndex:t.Z_INDEX.NEGATIVE}};exports.inputfile=i;
+import { Z_INDEX as t } from "../constants/positioning.js";
+const i = {
+  default: {},
+  input: {
+    opacity: 0,
+    position: "absolute",
+    zIndex: t.NEGATIVE
+  }
+};
+export {
+  i as inputfile
+};

package/tokens/label.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./cursors.js"),r={default:{cursor:e.cursors.pointer}};exports.label=r;
+import { cursors as r } from "./cursors.js";
+const t = {
+  default: {
+    cursor: r.pointer
+  }
+};
+export {
+  t as label
+};

package/tokens/link.js

@@ -1 +1,66 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../utils/helpers.js");require("react");const t=require("./spacing.js"),u=require("./font.js"),r=require("./colors.js"),i=require("./borders.js"),d=require("../types/cursors.js"),o=require("../types/link.js"),a=require("./values.js"),n=(l=e.get(r.colors,"text.default"),s="transparent",c=e.get(r.colors,"text.default"))=>({"&::after":{content:'""',position:"absolute",right:t.spacing.none,bottom:t.spacing.none,left:t.spacing.none,borderBottom:`1px solid ${l}`},"&:hover":{backgroundColor:s,"&::after":{borderBottomColor:c}}}),f={default:{fontFamily:u.font.family,fontSize:"inherit",fontWeight:"inherit",lineHeight:"inherit",color:r.colors.text.default,position:"relative","&:visited":{color:r.colors.text.caption,"&::after":{borderBottom:i.borders.generic({width:a.values.borderThin,color:e.get(r.colors,"bg.fill.primary.default")})}},"&:focus, &:active, &:focus-visible":{outline:i.borders.generic({width:a.values.borderThin,color:e.get(r.colors,"border.info")})},"&.Link--disabled":{color:r.colors.text.disabled,cursor:d.Cursors.Default,textDecoration:"none",backgroundColor:"transparent","&::after":{borderBottomColor:"transparent"}}},[o.LinkVariant.Primary]:n(),[o.LinkVariant.Secondary]:n(e.get(r.colors,"text.default"),e.get(r.colors,"bg.fill.primary.default"),"transparent"),[o.LinkVariant.Inverted]:n("transparent","transparent",e.get(r.colors,"text.default")),[o.LinkVariant.Inherit]:{color:"inherit"}};exports.link=f;
+import { spacing as e } from "./spacing.js";
+import { font as m } from "./font.js";
+import { colors as t } from "./colors.js";
+import { borders as n } from "./borders.js";
+import { values as a } from "./values.js";
+import { Cursors as s } from "../types/cursors.js";
+import { LinkVariant as r } from "../types/link.js";
+import { get as o } from "../utils/helpers.js";
+const i = (l = o(t, "text.default"), f = "transparent", d = o(t, "text.default")) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    right: e.none,
+    bottom: e.none,
+    left: e.none,
+    borderBottom: `1px solid ${l}`
+  },
+  "&:hover": {
+    backgroundColor: f,
+    "&::after": {
+      borderBottomColor: d
+    }
+  }
+}), y = {
+  default: {
+    fontFamily: m.family,
+    fontSize: "inherit",
+    fontWeight: "inherit",
+    lineHeight: "inherit",
+    color: t.text.default,
+    position: "relative",
+    "&:visited": {
+      color: t.text.caption,
+      "&::after": {
+        borderBottom: n.generic({
+          width: a.borderThin,
+          color: o(t, "bg.fill.primary.default")
+        })
+      }
+    },
+    "&:focus, &:active, &:focus-visible": {
+      outline: n.generic({
+        width: a.borderThin,
+        color: o(t, "border.info")
+      })
+    },
+    "&.Link--disabled": {
+      color: t.text.disabled,
+      cursor: s.Default,
+      textDecoration: "none",
+      backgroundColor: "transparent",
+      "&::after": {
+        borderBottomColor: "transparent"
+      }
+    }
+  },
+  [r.Primary]: i(),
+  [r.Secondary]: i(o(t, "text.default"), o(t, "bg.fill.primary.default"), "transparent"),
+  [r.Inverted]: i("transparent", "transparent", o(t, "text.default")),
+  [r.Inherit]: {
+    color: "inherit"
+  }
+};
+export {
+  y as link
+};

package/tokens/list.js

@@ -1 +1,87 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../types/common.js"),s=require("../types/typography.js"),t=require("../types/list.js"),c=require("./radius.js"),e=require("./spacing.js"),r=require("./colors.js"),n=require("./font.js"),a={content:"counter(list-counter)",counterIncrement:"list-counter",background:r.colors.primary.default,fontFamily:n.font.family,fontSize:n.font.size[s.TypographyVariant.Body2],fontWeight:n.font.weight.medium,width:e.spacing[i.SizeVariant.Lg],height:e.spacing[i.SizeVariant.Lg],color:r.colors.text.default,display:"flex",alignItems:"center",justifyContent:"center",marginRight:e.spacing[i.SizeVariant.Sm]},o={counterReset:"list-counter",paddingLeft:e.spacing.none,"& .List__bulletPoint":{marginRight:e.spacing[i.SizeVariant.Sm],color:r.colors.primary.default}},l={wrapper:{default:{listStyle:"none",padding:e.spacing.none,margin:e.spacing.none},[t.ListVariant.OrderedCircle]:{counterReset:"list-counter",paddingLeft:e.spacing.none},[t.ListVariant.OrderedSquare]:{counterReset:"list-counter",paddingLeft:e.spacing.none}},item:{default:{display:"flex",alignItems:"center",flexDirection:"row",margin:`${e.spacing[i.SizeVariant.Sm]} 0`,"&:first-child":{margin:`0 0 ${e.spacing[i.SizeVariant.Sm]}`}},[t.ListVariant.OrderedCircle]:{"&::before":{borderRadius:c.radius.round,...a}},[t.ListVariant.OrderedSquare]:{"&::before":{...a}},[t.ListVariant.UnorderedCheck]:{...o},[t.ListVariant.UnorderedDot]:{...o}},icons:{bulletDot:{name:"dot",width:6,height:6},bulletCheck:{name:"check"}}};exports.list=l;
+import { radius as d } from "./radius.js";
+import { spacing as e } from "./spacing.js";
+import { colors as o } from "./colors.js";
+import { font as n } from "./font.js";
+import { ListVariant as t } from "../types/list.js";
+import { SizeVariant as r } from "../types/common.js";
+import { TypographyVariant as m } from "../types/typography.js";
+const i = {
+  content: "counter(list-counter)",
+  counterIncrement: "list-counter",
+  background: o.primary.default,
+  fontFamily: n.family,
+  fontSize: n.size[m.Body2],
+  fontWeight: n.weight.medium,
+  width: e[r.Lg],
+  height: e[r.Lg],
+  color: o.text.default,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: e[r.Sm]
+}, a = {
+  counterReset: "list-counter",
+  paddingLeft: e.none,
+  "& .List__bulletPoint": {
+    marginRight: e[r.Sm],
+    color: o.primary.default
+  }
+}, h = {
+  wrapper: {
+    default: {
+      listStyle: "none",
+      padding: e.none,
+      margin: e.none
+    },
+    [t.OrderedCircle]: {
+      counterReset: "list-counter",
+      paddingLeft: e.none
+    },
+    [t.OrderedSquare]: {
+      counterReset: "list-counter",
+      paddingLeft: e.none
+    }
+  },
+  item: {
+    default: {
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "row",
+      margin: `${e[r.Sm]} 0`,
+      "&:first-child": {
+        // reset first item top margin to align with other blocks by start
+        margin: `0 0 ${e[r.Sm]}`
+      }
+    },
+    [t.OrderedCircle]: {
+      "&::before": {
+        borderRadius: d.round,
+        ...i
+      }
+    },
+    [t.OrderedSquare]: {
+      "&::before": {
+        ...i
+      }
+    },
+    [t.UnorderedCheck]: {
+      ...a
+    },
+    [t.UnorderedDot]: {
+      ...a
+    }
+  },
+  icons: {
+    bulletDot: {
+      name: "dot",
+      width: 6,
+      height: 6
+    },
+    bulletCheck: {
+      name: "check"
+    }
+  }
+};
+export {
+  h as list
+};

package/tokens/loader.js

@@ -1 +1,141 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../types/common.js"),e=require("./utils.js"),a=require("./display.js"),n=require("./radius.js"),t=require("./colors.js"),o={default:{},inline:{},section:{},fullPage:{},circle:{default:{border:`3px solid ${t.colors.transparent}`,borderTop:`3px solid ${t.colors.bg.fill.primary.default}`,borderRadius:n.radius.round},[i.SizeVariant.Xs]:{borderWidth:"1px",width:"16px",height:"16px",minWidth:"16px",minHeight:"16px"},[i.SizeVariant.Sm]:{borderWidth:"2px",width:"24px",height:"24px",maxWidth:"24px",maxHeight:"24px"},[i.SizeVariant.Md]:{borderWidth:"3px",width:"32px",height:"32px",maxWidth:"32px",maxHeight:"32px"},[i.SizeVariant.Lg]:{borderWidth:"4px",width:"48px",height:"48px",maxWidth:"48px",maxHeight:"48px"},[i.SizeVariant.Xl]:{borderWidth:"5px",width:"54px",height:"54px",maxWidth:"54px",maxHeight:"54px"}},dots:{default:{display:a.display.flex,justifyContent:a.flexAlignItems.center,alignItems:a.flexAlignItems.center},[i.SizeVariant.Xs]:{gap:e.getSpacing(1),".dot":{background:t.colors.bg.fill.primary.default,width:"8px",height:"8px","&:nth-of-type(1)":{animationDelay:"-0.32s"},"&:nth-of-type(2)":{animationDelay:"-0.16s"}}},[i.SizeVariant.Sm]:{gap:e.getSpacing(2),".dot":{background:t.colors.bg.fill.primary.default,width:"12px",height:"12px","&:nth-of-type(1)":{animationDelay:"-0.32s"},"&:nth-of-type(2)":{animationDelay:"-0.16s"}}},[i.SizeVariant.Md]:{gap:e.getSpacing(2),".dot":{background:t.colors.bg.fill.primary.default,width:"16px",height:"16px","&:nth-of-type(1)":{animationDelay:"-0.32s"},"&:nth-of-type(2)":{animationDelay:"-0.16s"}}},[i.SizeVariant.Lg]:{gap:e.getSpacing(2),".dot":{background:t.colors.bg.fill.primary.default,width:"24px",height:"24px","&:nth-of-type(1)":{animationDelay:"-0.32s"},"&:nth-of-type(2)":{animationDelay:"-0.16s"}}},[i.SizeVariant.Xl]:{gap:e.getSpacing(2),".dot":{background:t.colors.bg.fill.primary.default,width:"32px",height:"32px","&:nth-of-type(1)":{animationDelay:"-0.32s"},"&:nth-of-type(2)":{animationDelay:"-0.16s"}}}},animation:{circle:{name:"spinKeyframes"},dots:{name:"bounceKeyframes"}}};exports.loader=o;
+import { getSpacing as a } from "./utils.js";
+import { flexAlignItems as e, display as p } from "./display.js";
+import { radius as o } from "./radius.js";
+import { colors as i } from "./colors.js";
+import { SizeVariant as t } from "../types/common.js";
+const x = {
+  default: {},
+  inline: {},
+  section: {},
+  fullPage: {},
+  circle: {
+    default: {
+      border: `3px solid ${i.transparent}`,
+      borderTop: `3px solid ${i.bg.fill.primary.default}`,
+      borderRadius: o.round
+    },
+    [t.Xs]: {
+      borderWidth: "1px",
+      width: "16px",
+      height: "16px",
+      minWidth: "16px",
+      minHeight: "16px"
+    },
+    [t.Sm]: {
+      borderWidth: "2px",
+      width: "24px",
+      height: "24px",
+      maxWidth: "24px",
+      maxHeight: "24px"
+    },
+    [t.Md]: {
+      borderWidth: "3px",
+      width: "32px",
+      height: "32px",
+      maxWidth: "32px",
+      maxHeight: "32px"
+    },
+    [t.Lg]: {
+      borderWidth: "4px",
+      width: "48px",
+      height: "48px",
+      maxWidth: "48px",
+      maxHeight: "48px"
+    },
+    [t.Xl]: {
+      borderWidth: "5px",
+      width: "54px",
+      height: "54px",
+      maxWidth: "54px",
+      maxHeight: "54px"
+    }
+  },
+  dots: {
+    default: {
+      display: p.flex,
+      justifyContent: e.center,
+      alignItems: e.center
+    },
+    [t.Xs]: {
+      gap: a(1),
+      ".dot": {
+        background: i.bg.fill.primary.default,
+        width: "8px",
+        height: "8px",
+        "&:nth-of-type(1)": {
+          animationDelay: "-0.32s"
+        },
+        "&:nth-of-type(2)": {
+          animationDelay: "-0.16s"
+        }
+      }
+    },
+    [t.Sm]: {
+      gap: a(2),
+      ".dot": {
+        background: i.bg.fill.primary.default,
+        width: "12px",
+        height: "12px",
+        "&:nth-of-type(1)": {
+          animationDelay: "-0.32s"
+        },
+        "&:nth-of-type(2)": {
+          animationDelay: "-0.16s"
+        }
+      }
+    },
+    [t.Md]: {
+      gap: a(2),
+      ".dot": {
+        background: i.bg.fill.primary.default,
+        width: "16px",
+        height: "16px",
+        "&:nth-of-type(1)": {
+          animationDelay: "-0.32s"
+        },
+        "&:nth-of-type(2)": {
+          animationDelay: "-0.16s"
+        }
+      }
+    },
+    [t.Lg]: {
+      gap: a(2),
+      ".dot": {
+        background: i.bg.fill.primary.default,
+        width: "24px",
+        height: "24px",
+        "&:nth-of-type(1)": {
+          animationDelay: "-0.32s"
+        },
+        "&:nth-of-type(2)": {
+          animationDelay: "-0.16s"
+        }
+      }
+    },
+    [t.Xl]: {
+      gap: a(2),
+      ".dot": {
+        background: i.bg.fill.primary.default,
+        width: "32px",
+        height: "32px",
+        "&:nth-of-type(1)": {
+          animationDelay: "-0.32s"
+        },
+        "&:nth-of-type(2)": {
+          animationDelay: "-0.16s"
+        }
+      }
+    }
+  },
+  animation: {
+    circle: {
+      name: "spinKeyframes"
+    },
+    dots: {
+      name: "bounceKeyframes"
+    }
+  }
+};
+export {
+  x as loader
+};

package/tokens/menu.js

@@ -1 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./colors.js"),o={wrapper:{default:{padding:"0",height:"24px"}},content:{default:{backgroundColor:e.colors.neutral.white,position:"absolute",boxShadow:"0 2px 3px -1px #00000033"}}};exports.menu=o;
+import { colors as o } from "./colors.js";
+const e = {
+  wrapper: {
+    default: {
+      padding: "0",
+      height: "24px"
+    }
+  },
+  content: {
+    default: {
+      backgroundColor: o.neutral.white,
+      position: "absolute",
+      boxShadow: "0 2px 3px -1px #00000033"
+    }
+  }
+};
+export {
+  e as menu
+};

package/tokens/modal.js

@@ -1 +1,108 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../constants/positioning.js"),i=require("../types/common.js"),s=require("../types/typography.js");require("react");const r=require("../utils/layout.js"),n=require("./utils.js"),t=require("./display.js"),e=require("./spacing.js"),d=require("./font.js"),o=require("./colors.js"),a=require("./borders.js"),h=require("./cursors.js"),b=require("./values.js"),x=require("./shadow.js");var l,c,u,p,g,f;const m={header:{default:{display:t.display.flex,alignItems:t.flexAlignItems.center,justifyContent:r.calculateJustify("end"),padding:`${n.getSpacing(4)} ${n.getSpacing(6)}`,fontSize:d.font.size[(l=s.TypographyVariant)==null?void 0:l.H6],fontWeight:"bold",borderBottom:a.borders.generic({width:"1px",color:o.colors.border.default})},withTitle:{justifyContent:r.calculateJustify("between")}},title:{default:{display:"flex",alignItems:"center",padding:e.spacing.none,margin:e.spacing.none}},body:{default:{padding:e.spacing[(c=i.SizeVariant)==null?void 0:c.Lg],fontSize:d.font.size[(u=s.TypographyVariant)==null?void 0:u.Body1],color:o.colors.text.default}},content:{default:{background:o.colors.bg.surface,padding:e.spacing.none,borderRadius:b.values.border.radius.none,boxShadow:x.shadows.modal.default,position:"relative",display:t.display.flex,flexDirection:"column",maxWidth:"654px",width:"654px","@media (max-width: 768px)":{maxWidth:"100%",width:"100vw",height:"100vh"}}},footer:{default:{display:t.display.flex,justifyContent:r.calculateJustify("end"),gap:`calc(${e.spacing[(p=i.SizeVariant)==null?void 0:p.Xs]} * 3)`,padding:`${e.spacing[(g=i.SizeVariant)==null?void 0:g.Md]} ${e.spacing[(f=i.SizeVariant)==null?void 0:f.Lg]}`,borderTop:a.borders.generic({width:"1px",color:o.colors.border.default})}},closeButton:{default:{background:o.colors.transparent,border:a.borders.none,cursor:h.cursors.pointer,padding:e.spacing.none}},overlay:{default:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",background:n.hexToRgba(o.colors.neutral.black,.5),display:t.display.flex,alignItems:t.flexAlignItems.center,justifyContent:r.calculateJustify("center"),zIndex:y.Z_INDEX.HIGH}},icons:{close:{name:"cross"}}};exports.modal=m;
+import { hexToRgba as h, getSpacing as d } from "./utils.js";
+import { flexAlignItems as a, display as t } from "./display.js";
+import { spacing as o } from "./spacing.js";
+import { font as l } from "./font.js";
+import { colors as e } from "./colors.js";
+import { borders as n } from "./borders.js";
+import { cursors as x } from "./cursors.js";
+import { values as b } from "./values.js";
+import { shadows as y } from "./shadow.js";
+import { Z_INDEX as w } from "../constants/positioning.js";
+import { calculateJustify as r } from "../utils/layout.js";
+import { SizeVariant as i } from "../types/common.js";
+import { TypographyVariant as f } from "../types/typography.js";
+var p, m, s, c, u, g;
+const L = {
+  header: {
+    default: {
+      display: t.flex,
+      alignItems: a.center,
+      justifyContent: r("end"),
+      padding: `${d(4)} ${d(6)}`,
+      fontSize: l.size[(p = f) == null ? void 0 : p.H6],
+      fontWeight: "bold",
+      borderBottom: n.generic({
+        width: "1px",
+        color: e.border.default
+      })
+    },
+    withTitle: {
+      justifyContent: r("between")
+    }
+  },
+  title: {
+    default: {
+      display: "flex",
+      alignItems: "center",
+      padding: o.none,
+      margin: o.none
+    }
+  },
+  body: {
+    default: {
+      padding: o[(m = i) == null ? void 0 : m.Lg],
+      fontSize: l.size[(s = f) == null ? void 0 : s.Body1],
+      color: e.text.default
+    }
+  },
+  content: {
+    default: {
+      background: e.bg.surface,
+      padding: o.none,
+      borderRadius: b.border.radius.none,
+      boxShadow: y.modal.default,
+      position: "relative",
+      display: t.flex,
+      flexDirection: "column",
+      maxWidth: "654px",
+      width: "654px",
+      "@media (max-width: 768px)": {
+        maxWidth: "100%",
+        width: "100vw",
+        height: "100vh"
+      }
+    }
+  },
+  footer: {
+    default: {
+      display: t.flex,
+      justifyContent: r("end"),
+      gap: `calc(${o[(c = i) == null ? void 0 : c.Xs]} * 3)`,
+      padding: `${o[(u = i) == null ? void 0 : u.Md]} ${o[(g = i) == null ? void 0 : g.Lg]}`,
+      borderTop: n.generic({
+        width: "1px",
+        color: e.border.default
+      })
+    }
+  },
+  closeButton: {
+    default: {
+      background: e.transparent,
+      border: n.none,
+      cursor: x.pointer,
+      padding: o.none
+    }
+  },
+  overlay: {
+    default: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100vw",
+      height: "100vh",
+      background: h(e.neutral.black, 0.5),
+      display: t.flex,
+      alignItems: a.center,
+      justifyContent: r("center"),
+      zIndex: w.HIGH
+    }
+  },
+  icons: {
+    close: {
+      name: "cross"
+    }
+  }
+};
+export {
+  L as modal
+};

package/tokens/price.js

@@ -1 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../types/common.js"),t=require("../types/typography.js"),i=require("./display.js"),n=require("./spacing.js"),e=require("./font.js"),o=require("./colors.js"),a={default:{display:i.display.flex,alignItems:i.flexAlignItems.center,gap:n.spacing[r.SizeVariant.Sm]},currentPrice:{default:{fontSize:e.font.size[t.TypographyVariant.H3],fontWeight:e.font.weight.medium,lineHeight:e.font.line.height[t.TypographyVariant.H3],color:o.colors.text.default}},oldPrice:{default:{fontSize:e.font.size[t.TypographyVariant.H4],fontWeight:e.font.weight.medium,lineHeight:e.font.line.height[t.TypographyVariant.H4],color:o.colors.text.disabled}}};exports.price=a;
+import { flexAlignItems as o, display as r } from "./display.js";
+import { spacing as l } from "./spacing.js";
+import { font as e } from "./font.js";
+import { colors as t } from "./colors.js";
+import { TypographyVariant as i } from "../types/typography.js";
+import { SizeVariant as m } from "../types/common.js";
+const h = {
+  default: {
+    display: r.flex,
+    alignItems: o.center,
+    gap: l[m.Sm]
+  },
+  currentPrice: {
+    default: {
+      fontSize: e.size[i.H3],
+      fontWeight: e.weight.medium,
+      lineHeight: e.line.height[i.H3],
+      color: t.text.default
+    }
+  },
+  oldPrice: {
+    default: {
+      fontSize: e.size[i.H4],
+      fontWeight: e.weight.medium,
+      lineHeight: e.line.height[i.H4],
+      color: t.text.disabled
+    }
+  }
+};
+export {
+  h as price
+};

package/tokens/progressbar.js

@@ -1 +1,60 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");const r=require("../utils/layout.js"),t=require("./colors.js"),i=require("./spacing.js"),e=require("./display.js"),l=require("./font.js"),n=require("./values.js"),o={styledProgressBar:{default:{width:"100%",display:e.display.block}},styledTrack:{default:{position:"relative",width:"100%",height:i.spacing.md,overflow:"hidden",backgroundColor:t.colors.bg.default}},styledDeterminateFill:{default:{display:e.display.flex,alignItems:e.flexAlignItems.center,justifyContent:r.calculateJustify("end"),paddingRight:i.spacing.none,whiteSpace:"nowrap",height:"100%",backgroundColor:t.colors.bg.fill.primary.default,transition:n.values.transitions.progressbar.styledDeterminateFill}},styledIndeterminateFill:{default:{backgroundColor:t.colors.bg.fill.primary.default,width:"30%",height:"100%"}},styledIndeterminateFillAnimations:{animationName:"progressIndeterminate",animationProps:"1.2s infinite ease-in-out"},styledPercentLabel:{default:{display:e.display.flex,alignItems:e.flexAlignItems.center,color:t.colors.neutral.black,fontSize:l.font.size.caption,fontWeight:l.font.weight.normal,height:"100%",userSelect:"none"}}};exports.progressbar=o;
+import { colors as e } from "./colors.js";
+import { spacing as i } from "./spacing.js";
+import { flexAlignItems as r, display as t } from "./display.js";
+import { font as l } from "./font.js";
+import { values as o } from "./values.js";
+import { calculateJustify as a } from "../utils/layout.js";
+const g = {
+  styledProgressBar: {
+    default: {
+      width: "100%",
+      display: t.block
+    }
+  },
+  styledTrack: {
+    default: {
+      position: "relative",
+      width: "100%",
+      height: i.md,
+      overflow: "hidden",
+      backgroundColor: e.bg.default
+    }
+  },
+  styledDeterminateFill: {
+    default: {
+      display: t.flex,
+      alignItems: r.center,
+      justifyContent: a("end"),
+      paddingRight: i.none,
+      whiteSpace: "nowrap",
+      height: "100%",
+      backgroundColor: e.bg.fill.primary.default,
+      transition: o.transitions.progressbar.styledDeterminateFill
+    }
+  },
+  styledIndeterminateFill: {
+    default: {
+      backgroundColor: e.bg.fill.primary.default,
+      width: "30%",
+      height: "100%"
+    }
+  },
+  styledIndeterminateFillAnimations: {
+    animationName: "progressIndeterminate",
+    animationProps: "1.2s infinite ease-in-out"
+  },
+  styledPercentLabel: {
+    default: {
+      display: t.flex,
+      alignItems: r.center,
+      color: e.neutral.black,
+      fontSize: l.size.caption,
+      fontWeight: l.weight.normal,
+      height: "100%",
+      userSelect: "none"
+    }
+  }
+};
+export {
+  g as progressbar
+};

package/tokens/radiogroup.js

@@ -1,4 +1,68 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../types/typography.js"),n=require("../types/layout.js"),r=require("./borders.js"),e=require("./spacing.js"),l=require("./display.js"),s=require("./font.js"),t=require("./cursors.js"),o=require("./colors.js"),c={input:{position:"absolute",opacity:0,pointerEvents:"none"},default:{margin:e.spacing.none,padding:e.spacing.none,border:r.borders.none},label:{default:{display:l.display.block,padding:`${e.spacing.sm} ${e.spacing.md}`,fontSize:s.font.size.p,fontWeight:s.font.weight.medium,cursor:t.cursors.inherit,color:o.colors.text.caption,width:"100%",height:"100%",alignContent:i.TextAlign.Center,textAlign:i.TextAlign.Center},disabled:{},selected:{},hover:{"&:hover":{color:o.colors.neutral["grey.90"]}}},item:{default:{position:"relative",cursor:t.cursors.pointer,border:r.borders.generic({width:"1px",type:"solid",color:o.colors.border.default}),"&:focus-within":{outline:`2px solid ${o.colors.border.focus}`,outlineOffset:"-1px"}},disabled:{cursor:t.cursors.notAllowed,backgroundColor:o.colors.bg.default,"&::after":{content:'""',position:"absolute",top:e.spacing.none,left:e.spacing.none,width:"100%",height:"100%",background:`
+import { borders as r } from "./borders.js";
+import { spacing as e } from "./spacing.js";
+import { display as d } from "./display.js";
+import { font as i } from "./font.js";
+import { cursors as t } from "./cursors.js";
+import { colors as o } from "./colors.js";
+import { FlexDirection as n } from "../types/layout.js";
+import { TextAlign as l } from "../types/typography.js";
+const b = {
+  input: {
+    position: "absolute",
+    opacity: 0,
+    pointerEvents: "none"
+  },
+  default: {
+    margin: e.none,
+    padding: e.none,
+    border: r.none
+  },
+  label: {
+    default: {
+      display: d.block,
+      padding: `${e.sm} ${e.md}`,
+      fontSize: i.size.p,
+      fontWeight: i.weight.medium,
+      cursor: t.inherit,
+      color: o.text.caption,
+      width: "100%",
+      height: "100%",
+      alignContent: l.Center,
+      textAlign: l.Center
+    },
+    disabled: {},
+    selected: {},
+    hover: {
+      "&:hover": {
+        color: o.neutral["grey.90"]
+      }
+    }
+  },
+  item: {
+    default: {
+      position: "relative",
+      cursor: t.pointer,
+      border: r.generic({
+        width: "1px",
+        type: "solid",
+        color: o.border.default
+      }),
+      "&:focus-within": {
+        outline: `2px solid ${o.border.focus}`,
+        outlineOffset: "-1px"
+      }
+    },
+    disabled: {
+      cursor: t.notAllowed,
+      backgroundColor: o.bg.default,
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: e.none,
+        left: e.none,
+        width: "100%",
+        height: "100%",
+        background: `
           linear-gradient(
               to top right,
               transparent 49%,
@@ -6,4 +70,41 @@
             #E5E5E5 51%,
               transparent 51%
           )
-      `}},selected:{boxShadow:`0 0 0 1px ${o.colors.neutral.black}`,border:r.borders.generic({width:"1px",type:"solid",color:o.colors.neutral.black})},hover:{"&:hover":{border:r.borders.generic({width:"1px",type:"solid",color:o.colors.neutral.black})}}},layouts:{column:{display:"flex",flexDirection:n.FlexDirection.Column},row:{display:"flex",flexDirection:n.FlexDirection.Row},grid:{display:"grid"}}};exports.radiogroup=c;
+      `
+      }
+    },
+    selected: {
+      boxShadow: `0 0 0 1px ${o.neutral.black}`,
+      border: r.generic({
+        width: "1px",
+        type: "solid",
+        color: o.neutral.black
+      })
+    },
+    hover: {
+      "&:hover": {
+        border: r.generic({
+          width: "1px",
+          type: "solid",
+          color: o.neutral.black
+        })
+      }
+    }
+  },
+  layouts: {
+    column: {
+      display: "flex",
+      flexDirection: n.Column
+    },
+    row: {
+      display: "flex",
+      flexDirection: n.Row
+    },
+    grid: {
+      display: "grid"
+    }
+  }
+};
+export {
+  b as radiogroup
+};