gd-design-library 0.3.4 → 0.3.5

package/tokens/header.js

@@ -1 +1,123 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../constants/positioning.js"),e=require("./spacing.js"),t=require("./font.js"),o=require("./colors.js"),n=require("./display.js"),i=require("./borders.js"),a=require("./cursors.js"),c={container:{fontFamily:t.font.family,alignItems:n.flexAlignItems.center,backgroundColor:o.colors.bg.surface,maxWidth:"100%"},topBannerRow:{width:"100%",backgroundColor:o.colors.neutral.black,color:o.colors.bg.surface},searchColumn:{default:{flexDirection:"row",justifyContent:n.flexAlignItems.center,"& a":{margin:`${e.spacing.none} ${e.spacing.md}`}}},navigationRow:{default:{width:"100%",padding:`${e.spacing.md} ${e.spacing.lg}`,alignItems:n.flexAlignItems.center}},actionsColumn:{default:{flexDirection:"row","& > button":{margin:`${e.spacing.none} calc(${e.spacing.lg}/2)`}}},menuRow:{default:{width:"100%",justifyContent:n.flexAlignItems.center},column:{flexDirection:"row","& a":{margin:`${e.spacing.none} ${e.spacing.md}`}}},children:{default:{margin:`${e.spacing.md} ${e.spacing.lg}`}},mobile:{openedDropdownWrapper:{position:"fixed",top:e.spacing.none,left:e.spacing.none,zIndex:r.Z_INDEX.HIGH,background:o.colors.neutral.white,width:"100vw",height:"100vh",padding:`${e.spacing.xxl} ${e.spacing.lg} ${e.spacing.md}`,overflowY:"auto"},closeMenuIconWrapper:{width:"40px",height:"40px",display:n.display.flex,justifyContent:"center",alignItems:n.flexAlignItems.center},openMenuIconWrapper:{width:"40px",height:"40px",display:n.display.flex,justifyContent:"center",alignItems:n.flexAlignItems.center},menuWrapper:{margin:`${e.spacing.lg} ${e.spacing.none}`,borderTop:i.borders.generic({width:"1px",color:o.colors.border.default})},menuItemWrapper:{padding:`calc(${e.spacing.xs}*3) ${e.spacing.none}`,borderBottom:i.borders.generic({width:"1px",color:o.colors.border.default}),cursor:a.cursors.pointer}},icons:{close:{name:"cross",width:24,height:24},right:{name:"chevronRight",width:16,height:16},menu:{name:"mobileMenu",width:40,height:40}}};exports.header=c;
+import { spacing as e } from "./spacing.js";
+import { font as i } from "./font.js";
+import { colors as o } from "./colors.js";
+import { flexAlignItems as n, display as r } from "./display.js";
+import { borders as t } from "./borders.js";
+import { cursors as a } from "./cursors.js";
+import { Z_INDEX as l } from "../constants/positioning.js";
+const u = {
+  container: {
+    fontFamily: i.family,
+    alignItems: n.center,
+    backgroundColor: o.bg.surface,
+    maxWidth: "100%"
+  },
+  topBannerRow: {
+    width: "100%",
+    backgroundColor: o.neutral.black,
+    color: o.bg.surface
+  },
+  searchColumn: {
+    default: {
+      flexDirection: "row",
+      justifyContent: n.center,
+      "& a": {
+        margin: `${e.none} ${e.md}`
+      }
+    }
+  },
+  navigationRow: {
+    default: {
+      width: "100%",
+      padding: `${e.md} ${e.lg}`,
+      alignItems: n.center
+    }
+  },
+  actionsColumn: {
+    default: {
+      flexDirection: "row",
+      "& > button": {
+        margin: `${e.none} calc(${e.lg}/2)`
+      }
+    }
+  },
+  menuRow: {
+    default: {
+      width: "100%",
+      justifyContent: n.center
+    },
+    column: {
+      flexDirection: "row",
+      "& a": {
+        margin: `${e.none} ${e.md}`
+      }
+    }
+  },
+  children: {
+    default: {
+      margin: `${e.md} ${e.lg}`
+    }
+  },
+  mobile: {
+    openedDropdownWrapper: {
+      position: "fixed",
+      top: e.none,
+      left: e.none,
+      zIndex: l.HIGH,
+      background: o.neutral.white,
+      width: "100vw",
+      height: "100vh",
+      padding: `${e.xxl} ${e.lg} ${e.md}`,
+      overflowY: "auto"
+    },
+    closeMenuIconWrapper: {
+      width: "40px",
+      height: "40px",
+      display: r.flex,
+      justifyContent: "center",
+      alignItems: n.center
+    },
+    openMenuIconWrapper: {
+      width: "40px",
+      height: "40px",
+      display: r.flex,
+      justifyContent: "center",
+      alignItems: n.center
+    },
+    menuWrapper: {
+      margin: `${e.lg} ${e.none}`,
+      borderTop: t.generic({
+        width: "1px",
+        color: o.border.default
+      })
+    },
+    menuItemWrapper: {
+      padding: `calc(${e.xs}*3) ${e.none}`,
+      borderBottom: t.generic({
+        width: "1px",
+        color: o.border.default
+      }),
+      cursor: a.pointer
+    }
+  },
+  icons: {
+    close: {
+      name: "cross",
+      width: 24,
+      height: 24
+    },
+    right: {
+      name: "chevronRight",
+      width: 16,
+      height: 16
+    },
+    menu: {
+      name: "mobileMenu",
+      width: 40,
+      height: 40
+    }
+  }
+};
+export {
+  u as header
+};

package/tokens/icon.js

@@ -1 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../types/common.js"),t={size:{[i.SizeVariant.Xs]:{width:14,height:14},[i.SizeVariant.Sm]:{width:16,height:16},[i.SizeVariant.Md]:{width:18,height:18},[i.SizeVariant.Lg]:{width:24,height:24},[i.SizeVariant.Xl]:{width:32,height:32},[i.SizeVariant.Xxl]:{width:40,height:40}}};exports.icon=t;
+import { SizeVariant as h } from "../types/common.js";
+const t = {
+  size: {
+    [h.Xs]: {
+      width: 14,
+      height: 14
+    },
+    [h.Sm]: {
+      width: 16,
+      height: 16
+    },
+    [h.Md]: {
+      width: 18,
+      height: 18
+    },
+    [h.Lg]: {
+      width: 24,
+      height: 24
+    },
+    [h.Xl]: {
+      width: 32,
+      height: 32
+    },
+    [h.Xxl]: {
+      width: 40,
+      height: 40
+    }
+  }
+};
+export {
+  t as icon
+};

package/tokens/image.js

@@ -1 +1,40 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../types/common.js"),t=require("../types/typography.js"),n=require("../types/layout.js"),i=require("./colors.js"),e=require("./display.js"),r=require("./spacing.js"),l=require("./font.js"),s={default:{width:"100%",height:"100%",transition:"opacity 0.2s ease-in-out"},wrapper:{position:"relative",display:e.display.flex,flexDirection:n.FlexDirection.Column,alignItems:e.flexAlignItems.center},placeholder:{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:e.display.flex,alignItems:e.flexAlignItems.center,justifyContent:e.flexAlignItems.center,background:i.colors.bg.default},caption:{marginTop:r.spacing[o.SizeVariant.Xs],fontSize:l.font.size[t.TypographyVariant.Body2],color:i.colors.text.caption,textAlign:t.TextAlign.Center}};exports.image=s;
+import { colors as i } from "./colors.js";
+import { flexAlignItems as t, display as o } from "./display.js";
+import { spacing as e } from "./spacing.js";
+import { font as r } from "./font.js";
+import { TextAlign as n, TypographyVariant as a } from "../types/typography.js";
+import { FlexDirection as p } from "../types/layout.js";
+import { SizeVariant as l } from "../types/common.js";
+const h = {
+  default: {
+    width: "100%",
+    height: "100%",
+    transition: "opacity 0.2s ease-in-out"
+  },
+  wrapper: {
+    position: "relative",
+    display: o.flex,
+    flexDirection: p.Column,
+    alignItems: t.center
+  },
+  placeholder: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    display: o.flex,
+    alignItems: t.center,
+    justifyContent: t.center,
+    background: i.bg.default
+  },
+  caption: {
+    marginTop: e[l.Xs],
+    fontSize: r.size[a.Body2],
+    color: i.text.caption,
+    textAlign: n.Center
+  }
+};
+export {
+  h as image
+};

package/tokens/index.d.ts

@@ -234,24 +234,31 @@ export declare const defaultTokens: {
         };
         fallbackText: {
             default: {
-                variant: import('../types').TypographyVariant;
-                align: import('../types').TextAlign;
+                overflow: string;
+                textOverflow: string;
+                whiteSpace: string;
             };
-            size: {
-                xs: {
-                    variant: import('../types').TypographyVariant;
-                };
-                sm: {
-                    variant: import('../types').TypographyVariant;
-                };
-                md: {
-                    variant: import('../types').TypographyVariant;
-                };
-                lg: {
+            attrs: {
+                default: {
                     variant: import('../types').TypographyVariant;
+                    align: import('../types').TextAlign;
                 };
-                xl: {
-                    variant: import('../types').TypographyVariant;
+                size: {
+                    xs: {
+                        variant: import('../types').TypographyVariant;
+                    };
+                    sm: {
+                        variant: import('../types').TypographyVariant;
+                    };
+                    md: {
+                        variant: import('../types').TypographyVariant;
+                    };
+                    lg: {
+                        variant: import('../types').TypographyVariant;
+                    };
+                    xl: {
+                        variant: import('../types').TypographyVariant;
+                    };
                 };
             };
         };

package/tokens/index.js

@@ -1 +1,142 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./separator.js"),a=require("./draganddrop.js"),s=require("./avatar.js"),t=require("./chatbubble.js"),o=require("./radiogroup.js"),i=require("./draganddropfiles.js"),n=require("./inputfile.js"),c=require("./searchModal.js"),u=require("./carousel.js"),l=require("./progressbar.js"),d=require("./card.js"),p=require("./counter.js"),b=require("./font.js"),q=require("./colors.js"),g=require("./spacing.js"),h=require("./radius.js"),f=require("./typography.js"),k=require("./borders.js"),m=require("./button.js"),T=require("./input.js"),w=require("./label.js"),y=require("./textarea.js"),v=require("./link.js"),A=require("./form.js"),M=require("./wrapper.js"),x=require("./loader.js"),_=require("./toggle.js"),D=require("./skeleton.js"),S=require("./animations.js"),r=require("./snackbar.js"),B=require("./list.js"),C=require("./select.js"),E=require("./search.js"),F=require("./breadcrumbs.js"),H=require("./icon.js"),I=require("./reset.js"),K=require("./tabs.js"),L=require("./stepper.js"),N=require("./rating.js"),R=require("./header.js"),U=require("./switch.js"),W=require("./chat.js"),j=require("./slider.js"),O=require("./menu.js"),P=require("./scroll.js"),z=require("./values.js");require("./flexContainer.js");require("./tooltip.js");require("./modal.js");require("./image.js");require("./price.js");require("./accordion.js");require("./inlineNotification.js");require("@emotion/react");const G={separator:e.separator,draganddrop:a.draganddrop,avatar:s.avatar,chatbubble:t.chatbubble,radiogroup:o.radiogroup,draganddropfiles:i.draganddropfiles,inputfile:n.inputfile,carousel:u.carousel,searchModal:c.searchModal,progressbar:l.progressbar,card:d.card,counter:p.counter,font:b.font,colors:q.colors,spacing:g.spacing,borders:k.borders,scroll:P.scroll,radius:h.radius,button:m.button,input:T.input,label:w.label,link:v.link,form:A.form,typography:f.typography,textarea:y.textarea,wrapper:M.wrapper,loader:x.loader,switchToggle:_.switchToggle,skeleton:D.skeleton,animations:S.animations,snackbar:r.snackbar,list:B.list,select:C.select,search:E.search,breadcrumbs:F.breadcrumbs,icon:H.icon,reset:I.reset,tabs:K.tabs,stepper:L.stepper,rating:N.rating,header:R.header,switchToken:U.switchToken,chat:W.chat,slider:j.slider,menu:O.menu};exports.separator=e.separator;exports.draganddrop=a.draganddrop;exports.avatar=s.avatar;exports.chatbubble=t.chatbubble;exports.radiogroup=o.radiogroup;exports.draganddropfiles=i.draganddropfiles;exports.inputfile=n.inputfile;exports.searchModal=c.searchModal;exports.carousel=u.carousel;exports.progressbar=l.progressbar;exports.card=d.card;exports.counter=p.counter;exports.font=b.font;exports.colors=q.colors;exports.spacing=g.spacing;exports.radius=h.radius;exports.typography=f.typography;exports.borders=k.borders;exports.button=m.button;exports.input=T.input;exports.label=w.label;exports.textarea=y.textarea;exports.link=v.link;exports.form=A.form;exports.wrapper=M.wrapper;exports.loader=x.loader;exports.switchToggle=_.switchToggle;exports.skeleton=D.skeleton;exports.animations=S.animations;exports.DEFAULT_SNACKBAR_WIDTH=r.DEFAULT_SNACKBAR_WIDTH;exports.snackbar=r.snackbar;exports.list=B.list;exports.select=C.select;exports.search=E.search;exports.breadcrumbs=F.breadcrumbs;exports.icon=H.icon;exports.reset=I.reset;exports.tabs=K.tabs;exports.stepper=L.stepper;exports.rating=N.rating;exports.header=R.header;exports.switchToken=U.switchToken;exports.chat=W.chat;exports.slider=j.slider;exports.menu=O.menu;exports.scroll=P.scroll;exports.values=z.values;exports.defaultTokens=G;
+import { separator as r } from "./separator.js";
+import { draganddrop as o } from "./draganddrop.js";
+import { avatar as m } from "./avatar.js";
+import { chatbubble as t } from "./chatbubble.js";
+import { radiogroup as i } from "./radiogroup.js";
+import { draganddropfiles as p } from "./draganddropfiles.js";
+import { inputfile as f } from "./inputfile.js";
+import { searchModal as a } from "./searchModal.js";
+import { carousel as e } from "./carousel.js";
+import { progressbar as s } from "./progressbar.js";
+import { card as n } from "./card.js";
+import { counter as l } from "./counter.js";
+import { font as c } from "./font.js";
+import { colors as d } from "./colors.js";
+import { spacing as b } from "./spacing.js";
+import { radius as u } from "./radius.js";
+import { typography as g } from "./typography.js";
+import { borders as h } from "./borders.js";
+import { button as k } from "./button.js";
+import { input as T } from "./input.js";
+import { label as w } from "./label.js";
+import { textarea as x } from "./textarea.js";
+import { link as A } from "./link.js";
+import { form as y } from "./form.js";
+import { wrapper as D } from "./wrapper.js";
+import { loader as _ } from "./loader.js";
+import { switchToggle as v } from "./toggle.js";
+import { skeleton as B } from "./skeleton.js";
+import { animations as C } from "./animations.js";
+import { snackbar as E } from "./snackbar.js";
+import { DEFAULT_SNACKBAR_WIDTH as Ur } from "./snackbar.js";
+import { list as F } from "./list.js";
+import { select as H } from "./select.js";
+import { search as I } from "./search.js";
+import { breadcrumbs as K } from "./breadcrumbs.js";
+import { icon as L } from "./icon.js";
+import { reset as M } from "./reset.js";
+import { tabs as N } from "./tabs.js";
+import { stepper as R } from "./stepper.js";
+import { rating as S } from "./rating.js";
+import { header as U } from "./header.js";
+import { switchToken as W } from "./switch.js";
+import { chat as j } from "./chat.js";
+import { slider as q } from "./slider.js";
+import { menu as z } from "./menu.js";
+import { scroll as G } from "./scroll.js";
+const Nr = {
+  separator: r,
+  draganddrop: o,
+  avatar: m,
+  chatbubble: t,
+  radiogroup: i,
+  draganddropfiles: p,
+  inputfile: f,
+  carousel: e,
+  searchModal: a,
+  progressbar: s,
+  card: n,
+  counter: l,
+  font: c,
+  colors: d,
+  spacing: b,
+  borders: h,
+  scroll: G,
+  radius: u,
+  button: k,
+  input: T,
+  label: w,
+  link: A,
+  form: y,
+  typography: g,
+  textarea: x,
+  wrapper: D,
+  loader: _,
+  switchToggle: v,
+  skeleton: B,
+  animations: C,
+  snackbar: E,
+  list: F,
+  select: H,
+  search: I,
+  breadcrumbs: K,
+  icon: L,
+  reset: M,
+  tabs: N,
+  stepper: R,
+  rating: S,
+  header: U,
+  switchToken: W,
+  chat: j,
+  slider: q,
+  menu: z
+};
+export {
+  Ur as DEFAULT_SNACKBAR_WIDTH,
+  C as animations,
+  m as avatar,
+  h as borders,
+  K as breadcrumbs,
+  k as button,
+  n as card,
+  e as carousel,
+  j as chat,
+  t as chatbubble,
+  d as colors,
+  l as counter,
+  Nr as defaultTokens,
+  o as draganddrop,
+  p as draganddropfiles,
+  c as font,
+  y as form,
+  U as header,
+  L as icon,
+  T as input,
+  f as inputfile,
+  w as label,
+  A as link,
+  F as list,
+  _ as loader,
+  z as menu,
+  s as progressbar,
+  i as radiogroup,
+  u as radius,
+  S as rating,
+  M as reset,
+  G as scroll,
+  I as search,
+  a as searchModal,
+  H as select,
+  r as separator,
+  B as skeleton,
+  q as slider,
+  E as snackbar,
+  b as spacing,
+  R as stepper,
+  v as switchToggle,
+  W as switchToken,
+  N as tabs,
+  x as textarea,
+  g as typography,
+  D as wrapper
+};

package/tokens/inlineNotification.js

@@ -1 +1,75 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./spacing.js"),r=require("./shadow.js"),t=require("./borders.js"),c=require("./values.js"),e=require("./colors.js"),o=require("./display.js"),i=require("./font.js"),s={default:{wrapper:{display:o.display.inlineFlex,alignItems:o.flexAlignItems.center,gap:n.spacing.xs,width:"max-content"},content:{flex:1,fontFamily:i.font.family,fontWeight:i.font.weight.medium,fontSize:i.font.size.small,lineHeight:i.font.line.height.small}},success:{wrapper:{},content:{},icon:{name:"success",fill:e.colors.icon.success}},warning:{wrapper:{},content:{},icon:{name:"warning",fill:e.colors.icon.warning}},error:{wrapper:{},content:{},icon:{name:"error",fill:e.colors.icon.error}},info:{wrapper:{},content:{},icon:{name:"info",fill:e.colors.icon.info}},basic:{wrapper:{border:t.borders.generic({width:c.values.borderThin,color:e.colors.border.default}),boxShadow:r.shadows.inlineNotification.default,padding:`${n.spacing.sm} ${n.spacing.md} ${n.spacing.sm} ${n.spacing.md}`},content:{fontWeight:i.font.weight.normal},icon:{name:""}}};exports.inlineNotification=s;
+import { spacing as i } from "./spacing.js";
+import { shadows as e } from "./shadow.js";
+import { borders as r } from "./borders.js";
+import { values as t } from "./values.js";
+import { colors as n } from "./colors.js";
+import { flexAlignItems as a, display as l } from "./display.js";
+import { font as o } from "./font.js";
+const w = {
+  default: {
+    wrapper: {
+      display: l.inlineFlex,
+      alignItems: a.center,
+      gap: i.xs,
+      width: "max-content"
+    },
+    content: {
+      flex: 1,
+      fontFamily: o.family,
+      fontWeight: o.weight.medium,
+      fontSize: o.size.small,
+      lineHeight: o.line.height.small
+    }
+  },
+  success: {
+    wrapper: {},
+    content: {},
+    icon: {
+      name: "success",
+      fill: n.icon.success
+    }
+  },
+  warning: {
+    wrapper: {},
+    content: {},
+    icon: {
+      name: "warning",
+      fill: n.icon.warning
+    }
+  },
+  error: {
+    wrapper: {},
+    content: {},
+    icon: {
+      name: "error",
+      fill: n.icon.error
+    }
+  },
+  info: {
+    wrapper: {},
+    content: {},
+    icon: {
+      name: "info",
+      fill: n.icon.info
+    }
+  },
+  basic: {
+    wrapper: {
+      border: r.generic({
+        width: t.borderThin,
+        color: n.border.default
+      }),
+      boxShadow: e.inlineNotification.default,
+      padding: `${i.sm} ${i.md} ${i.sm} ${i.md}`
+    },
+    content: {
+      fontWeight: o.weight.normal
+    },
+    icon: {
+      name: ""
+    }
+  }
+};
+export {
+  w as inlineNotification
+};

package/tokens/input.js

@@ -1 +1,192 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../assets/svg/checkbox_border.svg.js"),b=require("../assets/svg/checkbox_bg_checked.svg.js"),g=require("../assets/svg/checkbox_disabled_bg_checked.svg.js"),y=require("../assets/svg/radio_bg.svg.js"),h=require("../assets/svg/radio_bg_checked.svg.js"),s=require("../constants/positioning.js"),c=require("../types/typography.js"),x=require("../types/layout.js"),r=require("../types/input.js"),n=require("./borders.js"),d=require("./typography.js"),t=require("./display.js"),l=require("./spacing.js"),e=require("./colors.js"),i=require("./cursors.js"),I=require("./values.js"),o=require("./utils.js"),a=u=>({position:"absolute",top:0,left:0,width:"100%",height:"100%",border:n.borders.generic({width:I.values.borderThin,color:u})}),m={wrapper:{default:{boxSizing:"border-box",display:t.display.flex,alignSelf:t.flexAlignItems.stretch,alignItems:t.flexAlignItems.center,borderRadius:n.borders.none,position:"relative",width:"100%"},withGap:{flexDirection:x.FlexDirection.Column,alignItems:t.flexAlignItems.start,gap:l.spacing.xs}},input:{default:{borderRadius:n.borders.none,padding:l.spacing.sm,outline:"none",position:"relative",cursor:i.cursors.text,border:n.borders.none,backgroundColor:"transparent","&::placeholder":{color:e.colors.text.disabled},'&:not([type="radio"], [type="checkbox"], [type="range"])':{height:"40px",width:"100%",zIndex:s.Z_INDEX.FIRST},'&[type="number"]':{appearance:"textfield","&::-webkit-outer-spin-button, &::-webkit-inner-spin-button":{appearance:"none",margin:0}},"&[readonly], &:disabled":{color:e.colors.text.disabled,cursor:i.cursors.default},'&[type="checkbox"]':{cursor:i.cursors.pointer,appearance:"none",height:"18px",width:"18px",backgroundColor:"transparent",border:"none",backgroundImage:o.getImgSrc(p),"&:focus-visible":o.getFocusStyles({inset:"-4px",borderRadius:"3px"})},'&[type="checkbox"]:not(:checked)':{"&[readonly], &:disabled":{opacity:.5}},'&[type="checkbox"]:checked':{backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundSize:"18px",backgroundColor:e.colors.neutral.white,border:"none",backgroundImage:o.getImgSrc(b),"&[readonly], &:disabled":{backgroundImage:o.getImgSrc(g)}},'&[type="radio"]':{cursor:i.cursors.pointer,appearance:"none",height:"20px",width:"20px",border:"none",backgroundImage:o.getImgSrc(y),"&:focus-visible":o.getFocusStyles({inset:"-4px",borderRadius:"50%"}),"&[readonly], &:disabled":{opacity:.5}},'&[type="radio"]:checked':{backgroundImage:o.getImgSrc(h)}},defaultInteraction:{"&:focus-visible ~ .Input__outline":{position:"absolute",top:0,left:0,bottom:0,width:"100%",outline:n.borders.focus,outlineOffset:"3px"}},mouseInteraction:{},[r.InputColorVariant.Primary]:{"& + .Input__border":a(e.colors.border.default)},[r.InputColorVariant.Success]:{"& + .Input__border":a(e.colors.border.success)},[r.InputColorVariant.Warning]:{"& + .Input__border":a(e.colors.primary.default)},[r.InputColorVariant.Error]:{"& + .Input__border":a(e.colors.border.error)}},helper:{default:{sm:d.typography[c.TypographyVariant.Caption],md:{color:e.colors.text.disabled,...d.typography[c.TypographyVariant.Body2]}},[r.InputColorVariant.Primary]:{sm:{color:e.colors.text.caption},md:{}},[r.InputColorVariant.Success]:{sm:{color:e.colors.text.success},md:{}},[r.InputColorVariant.Warning]:{sm:{color:e.colors.text.caption},md:{}},[r.InputColorVariant.Error]:{sm:{color:e.colors.text.error},md:{}}},adornment:{default:{display:t.display.flex,alignItems:t.flexAlignItems.center,position:"relative",zIndex:s.Z_INDEX.FIRST}}};exports.input=m;
+import b from "../assets/svg/checkbox_border.svg.js";
+import g from "../assets/svg/checkbox_bg_checked.svg.js";
+import f from "../assets/svg/checkbox_disabled_bg_checked.svg.js";
+import x from "../assets/svg/radio_bg.svg.js";
+import h from "../assets/svg/radio_bg_checked.svg.js";
+import { borders as t } from "./borders.js";
+import { typography as d } from "./typography.js";
+import { flexAlignItems as i, display as p } from "./display.js";
+import { spacing as c } from "./spacing.js";
+import { colors as e } from "./colors.js";
+import { cursors as n } from "./cursors.js";
+import { values as y } from "./values.js";
+import { getImgSrc as r, getFocusStyles as s } from "./utils.js";
+import { InputColorVariant as o } from "../types/input.js";
+import { Z_INDEX as l } from "../constants/positioning.js";
+import { FlexDirection as k } from "../types/layout.js";
+import { TypographyVariant as m } from "../types/typography.js";
+const a = (u) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  border: t.generic({
+    width: y.borderThin,
+    color: u
+  })
+}), G = {
+  wrapper: {
+    default: {
+      boxSizing: "border-box",
+      display: p.flex,
+      alignSelf: i.stretch,
+      alignItems: i.center,
+      borderRadius: t.none,
+      position: "relative",
+      width: "100%"
+    },
+    withGap: {
+      flexDirection: k.Column,
+      alignItems: i.start,
+      gap: c.xs
+    }
+  },
+  input: {
+    default: {
+      borderRadius: t.none,
+      padding: c.sm,
+      outline: "none",
+      position: "relative",
+      cursor: n.text,
+      border: t.none,
+      backgroundColor: "transparent",
+      "&::placeholder": {
+        color: e.text.disabled
+      },
+      '&:not([type="radio"], [type="checkbox"], [type="range"])': {
+        height: "40px",
+        width: "100%",
+        zIndex: l.FIRST
+      },
+      '&[type="number"]': {
+        appearance: "textfield",
+        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
+          appearance: "none",
+          margin: 0
+        }
+      },
+      "&[readonly], &:disabled": {
+        color: e.text.disabled,
+        cursor: n.default
+      },
+      // CHECKBOX
+      '&[type="checkbox"]': {
+        cursor: n.pointer,
+        appearance: "none",
+        height: "18px",
+        width: "18px",
+        backgroundColor: "transparent",
+        border: "none",
+        backgroundImage: r(b),
+        "&:focus-visible": s({
+          inset: "-4px",
+          borderRadius: "3px"
+        })
+      },
+      '&[type="checkbox"]:not(:checked)': {
+        "&[readonly], &:disabled": {
+          opacity: 0.5
+        }
+      },
+      '&[type="checkbox"]:checked': {
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        backgroundSize: "18px",
+        backgroundColor: e.neutral.white,
+        border: "none",
+        backgroundImage: r(g),
+        "&[readonly], &:disabled": {
+          backgroundImage: r(f)
+        }
+      },
+      // RADIO
+      '&[type="radio"]': {
+        cursor: n.pointer,
+        appearance: "none",
+        height: "20px",
+        width: "20px",
+        border: "none",
+        backgroundImage: r(x),
+        "&:focus-visible": s({
+          inset: "-4px",
+          borderRadius: "50%"
+        }),
+        "&[readonly], &:disabled": {
+          opacity: 0.5
+        }
+      },
+      '&[type="radio"]:checked': {
+        backgroundImage: r(h)
+      }
+    },
+    defaultInteraction: {
+      "&:focus-visible ~ .Input__outline": {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: "100%",
+        outline: t.focus,
+        outlineOffset: "3px"
+      }
+    },
+    mouseInteraction: {},
+    [o.Primary]: {
+      "& + .Input__border": a(e.border.default)
+    },
+    [o.Success]: {
+      "& + .Input__border": a(e.border.success)
+    },
+    [o.Warning]: {
+      "& + .Input__border": a(e.primary.default)
+    },
+    [o.Error]: {
+      "& + .Input__border": a(e.border.error)
+    }
+  },
+  helper: {
+    default: {
+      sm: d[m.Caption],
+      md: {
+        color: e.text.disabled,
+        ...d[m.Body2]
+      }
+    },
+    [o.Primary]: {
+      sm: {
+        color: e.text.caption
+      },
+      md: {}
+    },
+    [o.Success]: {
+      sm: {
+        color: e.text.success
+      },
+      md: {}
+    },
+    [o.Warning]: {
+      sm: {
+        color: e.text.caption
+      },
+      md: {}
+    },
+    [o.Error]: {
+      sm: {
+        color: e.text.error
+      },
+      md: {}
+    }
+  },
+  adornment: {
+    default: {
+      display: p.flex,
+      alignItems: i.center,
+      position: "relative",
+      zIndex: l.FIRST
+    }
+  }
+};
+export {
+  G as input
+};