@vtex/admin-ui-theme - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.5.1](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.5.0...@vtex/admin-ui-theme@0.5.1) (2020-11-27)
+
+**Note:** Version bump only for package @vtex/admin-ui-theme
+
+
+
+
+
 # [0.5.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.4.3...@vtex/admin-ui-theme@0.5.0) (2020-11-24)
@@ -8,0 +16,0 @@

dist/admin-ui-theme.cjs.development.js

@@ -825,2 +825,128 @@ 'use strict';
 
+var inputStyle = {
+  fontVariationSettings: '"wght" 92',
+  width: 'full',
+  height: 48,
+  borderStyle: 'solid',
+  borderWidth: 1,
+  paddingLeft: 3,
+  paddingRight: 4,
+  borderColor: 'muted.2',
+  borderRadius: 'default',
+  bg: 'inherit',
+  marginY: 1,
+  fontSize: 1,
+  color: 'text.primary',
+  outline: 0,
+  transition: 'snap',
+  ':hover': {
+    borderColor: 'text.primary'
+  },
+  ':focus': {
+    borderColor: 'primary.base',
+    boxShadow: "0 0 0 1px  " + colors.primary.base
+  },
+  ':disabled': {
+    bg: 'muted.3',
+    borderColor: 'muted.0',
+    color: 'muted.0'
+  },
+  ':focus + label': {
+    transform: 'translate(1px, 4px) scale(0.875)'
+  },
+  ':placeholder-shown:not(:focus) + label': {
+    paddingTop: 1
+  },
+  ':not(:placeholder-shown) + label': {
+    transform: 'translate(1px, 4px) scale(0.875)'
+  }
+};
+var errorState = {
+  borderColor: 'danger.base',
+  ':focus': {
+    borderColor: 'danger.base',
+    boxShadow: "0 0 0 1px  " + colors.danger.base
+  },
+  ':hover': {
+    borderColor: 'danger.hover'
+  }
+};
+
+function getInputVariants(name, styles) {
+  var _ref;
+
+  if (styles === void 0) {
+    styles = {};
+  }
+
+  return _ref = {}, _ref["" + name] = adminUiSystem.merge(inputStyle, styles), _ref[name + "-icon"] = adminUiSystem.merge(inputStyle, styles, {
+    paddingLeft: 44
+  }), _ref[name + "-suffix"] = adminUiSystem.merge(inputStyle, styles, {
+    paddingRight: '64px'
+  }), _ref[name + "-clear"] = adminUiSystem.merge(inputStyle, styles, {
+    paddingRight: '44px'
+  }), _ref[name + "-icon-clear"] = adminUiSystem.merge(inputStyle, styles, {
+    paddingLeft: '44px',
+    paddingRight: '44px'
+  }), _ref[name + "-icon-suffix"] = adminUiSystem.merge(inputStyle, styles, {
+    paddingRight: '64px',
+    paddingLeft: '44px'
+  }), _ref[name + "-suffix-clear"] = adminUiSystem.merge(inputStyle, styles, {
+    paddingRight: '75px'
+  }), _ref[name + "-icon-suffix-clear"] = adminUiSystem.merge(inputStyle, styles, {
+    paddingLeft: '44px',
+    paddingRight: '75px'
+  }), _ref;
+}
+
+var abstractInput = /*#__PURE__*/_extends({
+  // input container
+  container: {
+    position: 'relative'
+  },
+  'container-icon': {
+    position: 'relative',
+    label: {
+      left: '44px'
+    }
+  },
+  // input suffix
+  suffix: {
+    color: 'muted.0',
+    borderLeftStyle: 'solid',
+    borderLeftWidth: '1px',
+    borderLeftColor: 'muted.2',
+    paddingTop: '14px',
+    marginTop: 'px',
+    width: '32px',
+    paddingLeft: 3,
+    lineHeight: 'body',
+    fontVariationSettings: 'regular',
+    fontSize: 1
+  },
+  // left icon style
+  icon: {
+    color: 'muted.0',
+    top: 1,
+    left: 0,
+    marginX: 3,
+    marginTop: '14px',
+    position: 'absolute',
+    height: 20,
+    width: 20,
+    minWidth: 20,
+    minHeight: 20
+  },
+  // button container
+  buttons: {
+    right: 0,
+    top: 1,
+    height: 46,
+    paddingRight: 3,
+    position: 'absolute',
+    display: 'flex',
+    color: 'text.secondary'
+  }
+}, /*#__PURE__*/getInputVariants('input'), /*#__PURE__*/getInputVariants('input-error', errorState));
+
 var styles$5 = {
@@ -1137,188 +1263,28 @@ fontVariationSettings: 'regular',
 
-var inputStyle = {
-  fontVariationSettings: '"wght" 92',
-  width: 'full',
-  height: 48,
-  borderStyle: 'solid',
-  borderWidth: 1,
-  // paddingTop: 2,
-  paddingLeft: 3,
-  paddingRight: 4,
-  borderColor: 'muted.2',
-  borderRadius: 'default',
-  bg: 'inherit',
-  marginY: 1,
-  fontSize: 1,
-  color: 'text.primary',
-  outline: 0,
-  transition: 'snap',
-  ':hover': {
-    borderColor: 'text.primary'
+var input = {
+  container: {
+    display: 'flex',
+    position: 'relative',
+    justifyContent: 'flex-start',
+    flexDirection: 'column'
   },
-  ':focus': {
-    borderColor: 'primary.base',
-    boxShadow: "0 0 0 1px  " + colors.primary.base
+  'floating-label': {
+    fontSize: 1,
+    left: 12,
+    paddingTop: 2,
+    color: 'muted.0',
+    marginBottom: 3,
+    position: 'absolute',
+    transform: 'translate(0, 16px) scale(1)',
+    transformOrigin: 'top left',
+    transition: 'all 0.2s ease-out;'
   },
-  ':disabled': {
-    bg: 'muted.3',
-    borderColor: 'muted.0',
-    color: 'muted.0'
-  },
-  // Label styles
-  ':focus + label': {
-    transform: 'translate(1px, 4px) scale(0.875)',
-    color: 'primary.base'
-  },
-  ':placeholder-shown:not(:focus) + label': {
+  'text-container': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: '',
     paddingTop: 1
-  },
-  ':active + label': {
-    transform: 'translate(1px, 4px) scale(0.875)'
-  },
-  ':not(:placeholder-shown) + label': {
-    transform: 'translate(1px, 4px) scale(0.875)'
   }
 };
-var clearButtonStyle = {
-  color: 'muted.0',
-  marginY: '14px',
-  marginRight: 1,
-  height: 20,
-  width: 20,
-  border: 'none',
-  borderRadius: 'default',
-  bg: 'transparent',
-  cursor: 'pointer',
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none'
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus'
-  },
-  ':hover': {
-    color: 'text.primary'
-  },
-  '> div': {
-    display: 'flex',
-    height: 'full',
-    width: 'full',
-    margin: 'auto',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-};
-var iconStyle = {
-  color: 'muted.0',
-  top: 1,
-  left: 0,
-  paddingX: 3,
-  paddingTop: '14px',
-  position: 'absolute',
-  width: 44,
-  height: 48,
-  svg: {
-    height: 20,
-    width: 20,
-    minWidth: 20,
-    minHeight: 20
-  }
-};
-var suffixStyle = {
-  color: 'muted.0',
-  borderLeftStyle: 'solid',
-  borderLeftWidth: '1px',
-  borderLeftColor: 'muted.2',
-  paddingTop: '14px',
-  marginTop: 'px',
-  width: '32px',
-  paddingLeft: 3,
-  lineHeight: 'body',
-  fontVariationSettings: 'regular',
-  fontSize: 1
-};
-var passwordButtonStyle = {
-  color: 'text.secondary',
-  marginY: '20px',
-  marginRight: 1,
-  cursor: 'pointer'
-};
-var inputVariants = {
-  "default": /*#__PURE__*/_extends({}, inputStyle),
-  'with-password': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '64px'
-  }),
-  'with-icon': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingLeft: '44px'
-  }),
-  'with-suffix': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '64px'
-  }),
-  'with-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '44px'
-  }),
-  'with-icon-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingLeft: '44px',
-    paddingRight: '44px'
-  }),
-  'with-icon-suffix': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '64px',
-    paddingLeft: '44px'
-  }),
-  'with-suffix-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '75px'
-  }),
-  'with-icon-suffix-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingLeft: '44px',
-    paddingRight: '75px'
-  })
-};
-var containerStyles = {
-  position: 'relative'
-};
-var input = /*#__PURE__*/_extends({
-  container: /*#__PURE__*/_extends({}, containerStyles),
-  'container-with-icon': /*#__PURE__*/_extends({}, containerStyles, {
-    label: {
-      left: '44px'
-    }
-  }),
-  'icon-style': /*#__PURE__*/_extends({}, iconStyle),
-  'suffix-style': /*#__PURE__*/_extends({}, suffixStyle),
-  'clear-button-style': /*#__PURE__*/_extends({}, clearButtonStyle),
-  // 'password-style': { ...passwordStyle },
-  'password-button-style': /*#__PURE__*/_extends({}, passwordButtonStyle)
-}, inputVariants);
 
-var styles$8 = {
-  display: 'flex',
-  position: 'relative',
-  justifyContent: 'flex-start',
-  flexDirection: 'column'
-};
-var error = {
-  input: {
-    borderColor: 'danger.base',
-    ':focus': {
-      borderColor: 'danger.base',
-      boxShadow: "0 0 0 1px  " + colors.danger.base
-    },
-    ':focus + label': {
-      transform: 'translate(1px, 4px) scale(0.875)',
-      color: 'danger.base'
-    },
-    ':hover': {
-      borderColor: 'danger.hover'
-    }
-  },
-  label: {
-    color: 'danger.base'
-  }
-};
-var textField = {
-  "default": /*#__PURE__*/_extends({}, styles$8),
-  error: /*#__PURE__*/_extends({}, styles$8, error)
-};
-
 var textAreaInputStyle = {
@@ -1366,3 +1332,3 @@ paddingTop: 24,
 };
-var styles$9 = {
+var styles$8 = {
   display: 'flex',
@@ -1385,3 +1351,3 @@ position: 'relative',
 };
-var error$1 = {
+var error = {
   textarea: {
@@ -1414,5 +1380,5 @@ borderColor: 'danger.base',
 var textArea = {
-  container: /*#__PURE__*/_extends({}, styles$9),
+  container: /*#__PURE__*/_extends({}, styles$8),
   "default": /*#__PURE__*/_extends({}, textAreaInputStyle),
-  error: /*#__PURE__*/_extends({}, styles$9, error$1)
+  error: /*#__PURE__*/_extends({}, styles$8, error)
 };
@@ -1691,3 +1657,3 @@
 var load = /*#__PURE__*/adminUiSystem.keyframes( /*#__PURE__*/_templateObject());
-var styles$a = {
+var styles$9 = {
   display: 'inline-block',
@@ -1705,6 +1671,6 @@ width: 'full',
 var skeleton = {
-  rect: /*#__PURE__*/_extends({}, styles$a, {
+  rect: /*#__PURE__*/_extends({}, styles$9, {
     borderRadius: 'default'
   }),
-  circle: /*#__PURE__*/_extends({}, styles$a, {
+  circle: /*#__PURE__*/_extends({}, styles$9, {
     borderRadius: 'circle'
@@ -1752,3 +1718,3 @@ })
 
-var styles$b = {
+var styles$a = {
   display: 'flex',
@@ -1764,11 +1730,11 @@ alignItems: 'center',
 var avatar = {
-  base: /*#__PURE__*/_extends({}, styles$b, {
+  base: /*#__PURE__*/_extends({}, styles$a, {
     bg: 'text.primary',
     color: 'background'
   }),
-  primary: /*#__PURE__*/_extends({}, styles$b, {
+  primary: /*#__PURE__*/_extends({}, styles$a, {
     bg: 'primary.base',
     color: 'primary.accent'
   }),
-  danger: /*#__PURE__*/_extends({}, styles$b, {
+  danger: /*#__PURE__*/_extends({}, styles$a, {
     bg: 'danger.base',
@@ -1788,4 +1754,4 @@ color: 'danger.accent'
   radio: radio,
+  abstractInput: abstractInput,
   input: input,
-  textField: textField,
   tooltip: tooltip,
@@ -1792,0 +1758,0 @@ menu: menu$1,

dist/admin-ui-theme.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("polished"),o=require("@vtex/admin-ui-system"),t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e}).apply(this,arguments)}function a(e,r){return r||(r=e.slice(0)),e.raw=r,e}var i=n({},{white:"#FFFFFF",blue:"#DAE3F5",purple:"#F4EFFF",yellow:"#FDE6C0",green:"#D6EFE5",red:"#FEE3E3",black:"#323845"},{text:{primary:"#323845",secondary:"#707685"},background:"#FFFFFF",brand:"#F71963",muted:["#898F9E","#C4C5CA","#E0E2E7","#F4F6FB"],focus:"#8DB6FA",primary:{base:"#2953B2",hover:r.darken(.08,"#2953B2"),pressed:r.darken(.16,"#2953B2"),accent:"#FFFFFF"},secondary:{base:"#DAE3F5",hover:r.darken(.04,"#DAE3F5"),pressed:r.darken(.08,"#DAE3F5"),accent:"#2953B2"},danger:{base:"#CB4242",hover:r.darken(.08,"#CB4242"),pressed:r.darken(.16,"#CB4242"),accent:"#FFFFFF",washed:{base:"#FEDADA",hover:r.darken(.04,"#FEDADA"),pressed:r.darken(.08,"#FEDADA"),accent:"#CB4242"}},warning:{base:"#FFBA52",hover:r.darken(.08,"#FFBA52"),pressed:r.darken(.16,"#FFBA52"),accent:"#FFFFFF",washed:{base:"#F6E0BA",hover:r.darken(.04,"#F6E0BA"),pressed:r.darken(.08,"#F6E0BA"),accent:"#FFBA52"}},success:{base:"#368369",hover:r.darken(.08,"#368369"),pressed:r.darken(.16,"#368369"),accent:"#FFFFFF",washed:{base:"#CEE8DE",hover:r.darken(.04,"#CEE8DE"),pressed:r.darken(.08,"#CEE8DE"),accent:"#368369"}}}),d={0:"0rem",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",px:"0.0625rem","2px":"0.125rem"},l={sizes:{sm:"20rem",md:"48rem",lg:"56rem",xl:"64rem","1/2":"50%","1/4":"25%","2/4":"50%","3/4":"75%","1/8":"12.5%","2/8":"25%","3/8":"37.5%","4/8":"50%","5/8":"62.5%","6/8":"75%","7/8":"87.5%","1/12":"8.333333%","2/12":"16.666667%","3/12":"25%","4/12":"33.333333%","5/12":"41.666667%","6/12":"50%","7/12":"58.333333%","8/12":"66.666667%","9/12":"75%","10/12":"83.333333%","11/12":"91.666667%",full:"100%",screenHeight:"100vh",screenWidth:"100vw"},colors:i,space:d,breakpoints:["640px","768px","1024px","1280px"],transition:{snap:"all 70ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",fade:"all 110ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",pop:"all 150ms cubic-bezier(0.4, 0.14, 0.3, 1)",callout:"all 240ms cubic-bezier(0.4, 0.14, 0.3, 1)"},fontSizes:{0:"0.75rem",1:"0.875rem",2:"1rem",3:"1.125rem",4:"1.25rem"},zIndexes:{under:-1,plain:0,over:999,1:1,2:2,3:3,4:4,5:5},fontWeights:{light:{fontVariationSettings:"'wght' 80",fontWeight:300},regular:{fontVariationSettings:"'wght' 92",fontWeight:400},medium:{fontVariationSettings:"'wght' 100",fontWeight:500},bold:{fontVariationSettings:"'wght' 108",fontWeight:600}},fontVariationSettings:{regular:"'wght' 92"},lineHeights:{small:1.125,body:1.25,highlight:1.25,action:1.5,subtitle:1.5,headline:1.5},shadows:{menu:"0rem 0rem 1rem 0rem rgba(0,0,0,0.10)",subtle:"0rem 0rem 1.5rem 0rem rgba(0,0,0,0.05)",focus:"0rem 0rem 0rem "+d["2px"]+" "+i.focus},borderRadius:{default:"4px",flat:"0px",pill:"100px",circle:"100%"}},s={regular:{fontSize:1,height:40,width:"auto",paddingLeft:4,paddingRight:4},"regular-icon":{fontSize:1,height:40,width:40,paddingLeft:1,paddingRight:1,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-start":{fontSize:1,height:40,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-end":{fontSize:1,height:40,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},small:{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:3},"small-icon":{fontSize:0,height:32,width:32,paddingLeft:"2px",paddingRight:"2px",svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-start":{fontSize:0,height:32,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-end":{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}}},c={primary:{textTransform:"uppercase",color:"primary.accent",backgroundColor:"primary.base",":hover":{backgroundColor:"primary.hover"},":active":{backgroundColor:"primary.pressed"},":disabled":{color:"text.primary",backgroundColor:"muted.1"}},secondary:{textTransform:"uppercase",backgroundColor:"secondary.base",color:"secondary.accent",":hover":{backgroundColor:"secondary.hover"},":active":{backgroundColor:"secondary.pressed"},":disabled":{color:"muted.0",backgroundColor:"muted.3"}},tertiary:{textTransform:"capitalize",backgroundColor:"transparent",color:"primary.base",":hover":{color:"primary.hover",backgroundColor:"secondary.hover"},":active":{color:"primary.pressed",backgroundColor:"secondary.pressed"},":disabled":{color:"muted.0"}},danger:{textTransform:"uppercase",color:"danger.accent",backgroundColor:"danger.base",":hover":{backgroundColor:"danger.hover"},":active":{backgroundColor:"danger.pressed"},":disabled":{color:"text.primary",backgroundColor:"muted.1"}},"danger-secondary":{textTransform:"uppercase",backgroundColor:"danger.washed.base",color:"danger.base",":hover":{backgroundColor:"danger.washed.hover",color:"danger.hover"},":active":{backgroundColor:"danger.washed.pressed",color:"danger.pressed"},":disabled":{color:"muted.0",backgroundColor:"muted.3"}},"danger-tertiary":{textTransform:"capitalize",backgroundColor:"transparent",color:"danger.washed.accent",":hover":{color:"danger.hover",backgroundColor:"danger.washed.hover"},":active":{color:"danger.pressed",backgroundColor:"danger.washed.pressed"},":disabled":{color:"muted.0"}},"adaptative-dark":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:o.alpha("text.primary",.04)},":active":{backgroundColor:o.alpha("text.primary",.08)},":disabled":{color:"muted.0"}},"adaptative-light":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:o.alpha("background",.04)},":active":{backgroundColor:o.alpha("background",.08)},":disabled":{color:"muted.0"}}},g={fontVariationSettings:"'wght' 92",border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},b=n({},Object.keys(c).reduce((function(e,r){return n({},e,Object.keys(s).reduce((function(e,o){var t;return n({},e,((t={})[r+"-"+o]=n({},g,c[r],s[o]),t))}),[]))}),{})),h={border:"solid",borderWidth:1,borderColor:"muted.2"},u={horizontal:n({},h,{marginY:0,borderBottom:0}),vertical:n({},h,{marginX:0,borderLeft:0})},p={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"text.primary",border:"none","> svg:nth-of-type(1)":{marginRight:1}},m={blue:{bg:"blue"},green:{bg:"green"},red:{bg:"red"},black:{bg:"black",color:"white"},yellow:{bg:"yellow"},purple:{bg:"purple"}},f={small:{height:26,paddingX:"2",lineHeight:"small",fontVariationSettings:"'wght' 80",fontWeight:400,fontSize:0,svg:{width:16,height:16,minWidth:16,minHeight:16},button:{height:16,width:16}},regular:{height:40,paddingX:"4",lineHeight:"subtitle",fontVariationSettings:"'wght' 92",fontWeight:500,fontSize:2,svg:{width:20,minWidth:20,height:20,minHeight:20},button:{height:20,width:20}}},x=n({},Object.keys(m).reduce((function(e,r){return n({},e,Object.keys(f).reduce((function(e,o){var t;return n({},e,((t={})[r+"-"+o]=n({},p,m[r],f[o]),t))}),[]))}),{})),y={fontSize:14,width:106,height:48,appearance:"none","::-webkit-inner-spin-button ":{WebkitAppearance:"none",margin:0},paddingLeft:36,paddingRight:36,textAlign:"center",color:"black",borderStyle:"solid",borderWidth:1,borderColor:"muted.0",borderRadius:"default",backgroundColor:"primary.accent",":hover":{borderColor:"black"},":disabled":{backgroundColor:"muted.3",color:"muted.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},w={position:"absolute",top:14,height:20,width:20,cursor:"pointer",borderRadius:"default",backgroundColor:"transparent",color:"primary.base",":hover":{color:"primary.hover"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},":disabled":{color:"muted.0"},"> div":{display:"flex",height:"full",width:"full",margin:"auto",alignItems:"center",justifyContent:"center"}},v={error:n({},y,{borderColor:"danger.base",":hover":{borderColor:"danger.base"},":focus":{outline:"none",boxShadow:"none"}}),default:n({},y),buttonMinus:n({},w,{left:12}),buttonPlus:n({},w,{right:12})},C={table:{display:"table",width:"full"},header:{display:"table-header-group"},body:{display:"table-row-group"},"row-ltr":{display:"table-row",textAlign:"left"},"row-rtl":{display:"table-row",textAlign:"right"},cell:{bg:"background",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"background",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"text.secondary",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2"}},k={skeleton:{height:24},image:{regular:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4},compact:{width:32,minWidth:32,height:32,minHeight:32,borderRadius:4},variable:{minWidth:32,minHeight:32,borderRadius:4}},"image-preview":{small:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4,boxShadow:"menu"},regular:{width:156,minWidth:156,height:156,minHeight:156,borderRadius:4,boxShadow:"menu"},large:{width:256,minWidth:256,height:256,minHeight:256,borderRadius:4,boxShadow:"menu"}},regular:o.merge(C,{cell:{height:80}}),compact:o.merge(C,{cell:{height:48}}),variable:o.merge(C,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},S={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2",justifyContent:"flex-start"},F={compact:n({},S,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:n({},S,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:n({},S,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},R={fontVariationSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"text.primary",display:"flex",alignItems:"center"}},W={"horizontal-regular":n({},R,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":n({},R,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":n({},R,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":n({},R,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},z={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"muted.1",backgroundColor:"transparent",borderRadius:"circle",":after":{content:'""',display:"block",borderRadius:"circle",backgroundColor:"white",opacity:0},":checked":{backgroundColor:"primary.base",borderColor:"primary.base",":after":{opacity:1},":hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},":active":{borderColor:"primary.pressed",backgroundColor:"primary.pressed"}},":disabled":{cursor:"not-allowed",backgroundColor:"muted.2",borderColor:"muted.0",":after":{backgroundColor:"muted.0"}},":hover":{borderColor:"text.primary"},":active":{borderColor:"text.secondary",backgroundColor:"secondary.base"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},B={regular:o.merge(z,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:o.merge(z,{height:16,width:16,padding:1,":after":{width:6,height:6}})},H={appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"muted.0",borderRadius:3,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center","&:checked":{backgroundColor:"primary.base",borderColor:"primary.base","&:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&[disabled]:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%238B9299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&:hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},"&:active":{backgroundColor:"primary.pressed",borderColor:"primary.pressed"}},"&:indeterminate":{backgroundColor:"secondary.base",borderColor:"primary.base",color:"primary.base","&:after":{content:'""',position:"absolute",width:8,height:0,borderWidth:1,borderStyle:"solid",borderLeft:0,borderRight:0,borderRadius:3,borderColor:"currentColor"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.0",color:"muted.0"},"&:hover":{borderColor:"primary.hover",color:"primary.hover",bg:"secondary.hover"},"&:active":{borderColor:"primary.pressed",color:"primary.pressed"}},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.0",color:"muted.0"},"&:hover":{borderColor:"text.primary"},"&:active":{backgroundColor:"secondary.base",borderColor:"text.secondary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},L={regular:n({},H,{height:20,width:20,minWidth:20,minHeight:20}),small:n({},H,{height:16,width:16,minWidth:16,minHeight:16})},E={appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"muted.0",borderStyle:"solid",borderColor:"muted.0",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"success.accent",transition:"transform .25s ease"},"&:checked":{backgroundColor:"success.base",borderColor:"success.base","&:hover":{backgroundColor:"success.hover",borderColor:"success.hover"},"&:disabled":{backgroundColor:"muted.0",borderColor:"muted.0","&:after":{backgroundColor:"muted.1"}}},"&:hover":{backgroundColor:"text.secondary",borderColor:"text.secondary"},"&:disabled":{backgroundColor:"muted.0",borderColor:"muted.0","&:after":{backgroundColor:"muted.1"}},":not(:checked):active":{backgroundColor:"text.secondary",borderColor:"text.secondary",":after":{backgroundColor:"secondary.base"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},T={regular:o.merge(E,{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}}),small:o.merge(E,{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}})},D={fontVariationSettings:'"wght" 92',width:"full",height:48,borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"muted.2",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text.primary",outline:0,transition:"snap",":hover":{borderColor:"text.primary"},":focus":{borderColor:"primary.base",boxShadow:"0 0 0 1px  "+i.primary.base},":disabled":{bg:"muted.3",borderColor:"muted.0",color:"muted.0"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"primary.base"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":active + label":{transform:"translate(1px, 4px) scale(0.875)"},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},A={color:"muted.0",marginY:"14px",marginRight:1,height:20,width:20,border:"none",borderRadius:"default",bg:"transparent",cursor:"pointer",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},":hover":{color:"text.primary"},"> div":{display:"flex",height:"full",width:"full",margin:"auto",alignItems:"center",justifyContent:"center"}},j={color:"muted.0",top:1,left:0,paddingX:3,paddingTop:"14px",position:"absolute",width:44,height:48,svg:{height:20,width:20,minWidth:20,minHeight:20}},V={color:"muted.0",borderLeftStyle:"solid",borderLeftWidth:"1px",borderLeftColor:"muted.2",paddingTop:"14px",marginTop:"px",width:"32px",paddingLeft:3,lineHeight:"body",fontVariationSettings:"regular",fontSize:1},I={color:"text.secondary",marginY:"20px",marginRight:1,cursor:"pointer"},X={default:n({},D),"with-password":n({},D,{paddingRight:"64px"}),"with-icon":n({},D,{paddingLeft:"44px"}),"with-suffix":n({},D,{paddingRight:"64px"}),"with-clear":n({},D,{paddingRight:"44px"}),"with-icon-clear":n({},D,{paddingLeft:"44px",paddingRight:"44px"}),"with-icon-suffix":n({},D,{paddingRight:"64px",paddingLeft:"44px"}),"with-suffix-clear":n({},D,{paddingRight:"75px"}),"with-icon-suffix-clear":n({},D,{paddingLeft:"44px",paddingRight:"75px"})},q={position:"relative"},O=n({container:n({},q),"container-with-icon":n({},q,{label:{left:"44px"}}),"icon-style":n({},j),"suffix-style":n({},V),"clear-button-style":n({},A),"password-button-style":n({},I)},X),Y={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column"},M={input:{borderColor:"danger.base",":focus":{borderColor:"danger.base",boxShadow:"0 0 0 1px  "+i.danger.base},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"danger.base"},":hover":{borderColor:"danger.hover"}},label:{color:"danger.base"}},P={default:n({},Y),error:n({},Y,M)},G={paddingTop:24,height:100,resize:"none",fontVariationSettings:'"wght" 92',width:"full",borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"muted.2",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text.primary",outline:0,transition:"snap",":hover":{borderColor:"text.primary"},":focus":{borderColor:"primary.base",boxShadow:"0 0 0 1px  "+i.primary.base},":disabled":{bg:"muted.3",borderColor:"muted.0",color:"muted.0"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"primary.base"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},_={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column",width:"full",label:{fontSize:1,left:12,paddingTop:2,color:"muted.0",marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"}},K={textarea:{borderColor:"danger.base",":focus":{borderColor:"danger.base",boxShadow:"0 0 0 1px  "+i.danger.base},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"danger.base"},":hover":{borderColor:"danger.hover"}},label:{color:"danger.base",fontSize:1,left:12,paddingTop:2,marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"}},J={container:n({},_),default:n({},G),error:n({},_,K)},N={visibility:"hidden",cursor:"pointer",bg:"background",borderRadius:"default",borderWidth:1,borderStyle:"solid",borderColor:"muted.1",boxShadow:"menu",outline:"none",marginTop:1,paddingY:4,width:"max-content",position:"absolute",zIndex:999},Q={display:"flex",alignItems:"center",height:24,paddingX:4,cursor:"pointer",bg:"background"},U={menu:N,"menu-visible":n({},N,{visibility:"visible"}),item:Q,"item-active":n({},Q,{bg:"secondary.base"})},Z={display:"flex",flexDirection:"column",bg:"background",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"muted.1",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"muted.1",width:"calc(100% -"+d[3]+")",marginX:"-"+d[3],outline:"none"},"> button":{marginY:"2px",paddingX:1,color:"text.primary",fontSize:1,border:"none",textTransform:"initial",":focus":{bg:"secondary.base",outline:"none",boxShadow:"none"},":hover":{color:"text.primary"},width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}}},$={outline:"none",bg:"background",borderRadius:3,borderColor:"muted.2",borderStyle:"solid",borderWidth:1,position:"relative",overflowY:"auto",overflowX:"hidden",maxHeight:"3/4",margin:2,opacity:0,transform:"translate3d(0, 48px, 0)",transition:"pop","&[data-enter]":{opacity:1,transform:"translate3d(0, 0, 0)"}},ee={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.2",borderStyle:"solid","button + button":{ml:4},py:4,px:6,borderTopWidth:0,borderLeftWidth:0,borderRightWidth:0,borderBottomWidth:1,h1:{variant:"text.subtitle",lineHeight:0},position:"sticky",top:0,left:0,right:0,bg:"background",zIndex:999},re={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.2",borderStyle:"solid",borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,position:"sticky",bottom:0,left:0,right:0,bg:"background",p:6,flexDirection:["column-reverse","column-reverse","row"],">button":{width:["full","full","inherit"]},"* + button":{ml:[0,0,4],mb:[4,4,0]}},oe={pt:4,px:6,pb:6},te=n({},oe,{scrollbarWidth:"thin",scrollbarColor:"background","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"muted.2",borderRadius:"6px",border:"2px solid",color:"background"}},{overflowY:"auto"}),ne={backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:r.rgba(i.text.primary,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":n({},$,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":n({},$,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":n({},$,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":n({},ee,{height:56}),"header-regular":n({},ee,{height:56}),"header-large":n({},ee,{height:80}),"content-with-small-scroll-area":n({},te,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":n({},te,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":n({},te,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":n({},te,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":n({},te,{height:"calc(100% - 10rem)"}),content:n({},oe),"footer-small":n({},re,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":n({},re,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":n({},re,{borderTopWidth:1,minHeight:"5rem"})};function ae(){var e=a(["\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n"]);return ae=function(){return e},e}var ie={display:"inline-block",width:"full",height:"full",backgroundColor:"muted.3",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n    90deg,\n    "+i.muted[3]+",\n    white,\n    "+i.muted[3]+"\n  )",animation:o.keyframes(ae())+" 1.2s ease-in-out infinite"},de={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},le={button:b,list:F,table:k,controlGroup:W,toggle:T,checkbox:L,radio:B,input:O,textField:P,tooltip:{backgroundColor:"text.primary",color:"background",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32},menu:Z,modal:ne,skeleton:{rect:n({},ie,{borderRadius:"default"}),circle:n({},ie,{borderRadius:"circle"})},divider:u,collapsible:{container:{bg:"background",borderColor:"muted.2",borderStyle:"solid",borderWidth:1,borderRadius:3},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:2,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6},"header-nested":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:4,paddingLeft:0,"div > button:nth-of-type(n+2)":{marginLeft:1}},"section-nested":{paddingX:4,paddingBottom:4}},avatar:{base:n({},de,{bg:"text.primary",color:"background"}),primary:n({},de,{bg:"primary.base",color:"primary.accent"}),danger:n({},de,{bg:"danger.base",color:"danger.accent"})},tag:x,anchor:{font:"inherit",color:"primary.base",textDecoration:"none",":active":{color:"primary.pressed",textDecoration:"underline"},":hover":{color:"primary.hover",textDecoration:"underline"}},selectButton:U,textArea:J,stepper:v},se={borderWidth:"1px",borderStyle:"solid",borderRadius:"default"},ce={palette:{base:{bg:"background",color:"text.primary"},inverted:{bg:"text.primary",color:"background"},primary:{bg:"primary.base",color:"primary.accent"},secondary:{bg:"secondary.base",color:"secondary.accent"},danger:{bg:"danger.base",color:"danger.accent"},"danger-washed":{bg:"danger.washed.base",color:"danger.washed.accent"},success:{bg:"success.base",color:"success.accent"},"success-washed":{bg:"success.washed.base",color:"success.washed.accent"},warning:{bg:"warning.base",color:"warning.accent"},"warning-washed":{bg:"warning.washed.base",color:"warning.washed.accent"}},text:{small:{lineHeight:"small",fontVariationSettings:"regular",fontSize:0},body:{lineHeight:"body",fontVariationSettings:"regular",fontSize:1},highlight:{lineHeight:"highlight",fontVariationSettings:"regular",fontSize:1},action:{lineHeight:"action",fontVariationSettings:"regular",fontSize:1,textTransform:"uppercase"},subtitle:{lineHeight:"subtitle",fontVariationSettings:"regular",fontSize:2},headline:{lineHeight:"headline",fontVariationSettings:"regular",fontSize:4}},border:{default:n({},se,{borderColor:"muted.2"}),"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"muted.2"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"muted.2"},strong:n({},se,{borderColor:"text.primary"}),disabled:n({},se,{borderColor:"muted.1"}),primary:n({},se,{borderColor:"primary.base"}),danger:n({},se,{borderColor:"danger.base"})}},ge=Object.keys(ce),be=n({},l,{components:le,patterns:ce});function he(){var e=a(["\n        @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n\n        code > * > *,\n        pre > * > *,\n        code,\n        pre {\n          font-family: 'SF Mono', 'Operator Mono', 'Dank Mono',\n            'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', Consolas, Monaco,\n            monospace !important;\n        }\n\n        body {\n          margin: 0;\n          background-color: ",";\n          color: ",";\n        }\n\n        html,\n        body,\n        * {\n          font-family: VTEXTrustVF, -apple-system, system-ui, BlinkMacSystemFont,\n            sans-serif !important;\n          font-variation-settings: 'wght' 92;\n        }\n\n        *,\n        ::before,\n        ::after {\n          box-sizing: border-box;\n          border-width: 0;\n          border-style: solid;\n        }\n\n        html,\n        body,\n        div,\n        span,\n        applet,\n        object,\n        iframe,\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6,\n        p,\n        blockquote,\n        pre,\n        a,\n        abbr,\n        acronym,\n        address,\n        big,\n        cite,\n        code,\n        del,\n        dfn,\n        em,\n        img,\n        ins,\n        kbd,\n        q,\n        s,\n        samp,\n        small,\n        strike,\n        strong,\n        sub,\n        sup,\n        tt,\n        var,\n        b,\n        u,\n        i,\n        center,\n        dl,\n        dt,\n        dd,\n        ol,\n        ul,\n        li,\n        fieldset,\n        form,\n        label,\n        legend,\n        table,\n        caption,\n        tbody,\n        tfoot,\n        thead,\n        tr,\n        th,\n        td,\n        article,\n        aside,\n        canvas,\n        details,\n        embed,\n        figure,\n        figcaption,\n        footer,\n        header,\n        hgroup,\n        menu,\n        nav,\n        output,\n        ruby,\n        section,\n        summary,\n        time,\n        mark,\n        audio,\n        video {\n          margin: 0;\n          padding: 0;\n          border: 0;\n          font-size: 100%;\n          font: inherit;\n          vertical-align: baseline;\n        }\n\n        /* HTML5 display-role reset for older browsers */\n        article,\n        aside,\n        details,\n        figcaption,\n        figure,\n        footer,\n        header,\n        hgroup,\n        menu,\n        nav,\n        section {\n          display: block;\n        }\n\n        body {\n          line-height: 1;\n        }\n\n        blockquote,\n        q {\n          quotes: none;\n        }\n\n        blockquote:before,\n        blockquote:after,\n        q:before,\n        q:after {\n          content: '';\n          content: none;\n        }\n\n        table {\n          border-collapse: collapse;\n          border-spacing: 0;\n        }\n      "]);return he=function(){return e},e}exports.Preflight=function(){return t.createElement(o.Global,{styles:function(e){return o.css(he(),o.get(e,"colors.background"),o.get(e,"colors.text"))}})},exports.patternKeys=ge,exports.theme=be;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("polished"),o=require("@vtex/admin-ui-system"),t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e}).apply(this,arguments)}function a(e,r){return r||(r=e.slice(0)),e.raw=r,e}var i=n({},{white:"#FFFFFF",blue:"#DAE3F5",purple:"#F4EFFF",yellow:"#FDE6C0",green:"#D6EFE5",red:"#FEE3E3",black:"#323845"},{text:{primary:"#323845",secondary:"#707685"},background:"#FFFFFF",brand:"#F71963",muted:["#898F9E","#C4C5CA","#E0E2E7","#F4F6FB"],focus:"#8DB6FA",primary:{base:"#2953B2",hover:r.darken(.08,"#2953B2"),pressed:r.darken(.16,"#2953B2"),accent:"#FFFFFF"},secondary:{base:"#DAE3F5",hover:r.darken(.04,"#DAE3F5"),pressed:r.darken(.08,"#DAE3F5"),accent:"#2953B2"},danger:{base:"#CB4242",hover:r.darken(.08,"#CB4242"),pressed:r.darken(.16,"#CB4242"),accent:"#FFFFFF",washed:{base:"#FEDADA",hover:r.darken(.04,"#FEDADA"),pressed:r.darken(.08,"#FEDADA"),accent:"#CB4242"}},warning:{base:"#FFBA52",hover:r.darken(.08,"#FFBA52"),pressed:r.darken(.16,"#FFBA52"),accent:"#FFFFFF",washed:{base:"#F6E0BA",hover:r.darken(.04,"#F6E0BA"),pressed:r.darken(.08,"#F6E0BA"),accent:"#FFBA52"}},success:{base:"#368369",hover:r.darken(.08,"#368369"),pressed:r.darken(.16,"#368369"),accent:"#FFFFFF",washed:{base:"#CEE8DE",hover:r.darken(.04,"#CEE8DE"),pressed:r.darken(.08,"#CEE8DE"),accent:"#368369"}}}),d={0:"0rem",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",px:"0.0625rem","2px":"0.125rem"},l={sizes:{sm:"20rem",md:"48rem",lg:"56rem",xl:"64rem","1/2":"50%","1/4":"25%","2/4":"50%","3/4":"75%","1/8":"12.5%","2/8":"25%","3/8":"37.5%","4/8":"50%","5/8":"62.5%","6/8":"75%","7/8":"87.5%","1/12":"8.333333%","2/12":"16.666667%","3/12":"25%","4/12":"33.333333%","5/12":"41.666667%","6/12":"50%","7/12":"58.333333%","8/12":"66.666667%","9/12":"75%","10/12":"83.333333%","11/12":"91.666667%",full:"100%",screenHeight:"100vh",screenWidth:"100vw"},colors:i,space:d,breakpoints:["640px","768px","1024px","1280px"],transition:{snap:"all 70ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",fade:"all 110ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",pop:"all 150ms cubic-bezier(0.4, 0.14, 0.3, 1)",callout:"all 240ms cubic-bezier(0.4, 0.14, 0.3, 1)"},fontSizes:{0:"0.75rem",1:"0.875rem",2:"1rem",3:"1.125rem",4:"1.25rem"},zIndexes:{under:-1,plain:0,over:999,1:1,2:2,3:3,4:4,5:5},fontWeights:{light:{fontVariationSettings:"'wght' 80",fontWeight:300},regular:{fontVariationSettings:"'wght' 92",fontWeight:400},medium:{fontVariationSettings:"'wght' 100",fontWeight:500},bold:{fontVariationSettings:"'wght' 108",fontWeight:600}},fontVariationSettings:{regular:"'wght' 92"},lineHeights:{small:1.125,body:1.25,highlight:1.25,action:1.5,subtitle:1.5,headline:1.5},shadows:{menu:"0rem 0rem 1rem 0rem rgba(0,0,0,0.10)",subtle:"0rem 0rem 1.5rem 0rem rgba(0,0,0,0.05)",focus:"0rem 0rem 0rem "+d["2px"]+" "+i.focus},borderRadius:{default:"4px",flat:"0px",pill:"100px",circle:"100%"}},s={regular:{fontSize:1,height:40,width:"auto",paddingLeft:4,paddingRight:4},"regular-icon":{fontSize:1,height:40,width:40,paddingLeft:1,paddingRight:1,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-start":{fontSize:1,height:40,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-end":{fontSize:1,height:40,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},small:{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:3},"small-icon":{fontSize:0,height:32,width:32,paddingLeft:"2px",paddingRight:"2px",svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-start":{fontSize:0,height:32,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-end":{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}}},c={primary:{textTransform:"uppercase",color:"primary.accent",backgroundColor:"primary.base",":hover":{backgroundColor:"primary.hover"},":active":{backgroundColor:"primary.pressed"},":disabled":{color:"text.primary",backgroundColor:"muted.1"}},secondary:{textTransform:"uppercase",backgroundColor:"secondary.base",color:"secondary.accent",":hover":{backgroundColor:"secondary.hover"},":active":{backgroundColor:"secondary.pressed"},":disabled":{color:"muted.0",backgroundColor:"muted.3"}},tertiary:{textTransform:"capitalize",backgroundColor:"transparent",color:"primary.base",":hover":{color:"primary.hover",backgroundColor:"secondary.hover"},":active":{color:"primary.pressed",backgroundColor:"secondary.pressed"},":disabled":{color:"muted.0"}},danger:{textTransform:"uppercase",color:"danger.accent",backgroundColor:"danger.base",":hover":{backgroundColor:"danger.hover"},":active":{backgroundColor:"danger.pressed"},":disabled":{color:"text.primary",backgroundColor:"muted.1"}},"danger-secondary":{textTransform:"uppercase",backgroundColor:"danger.washed.base",color:"danger.base",":hover":{backgroundColor:"danger.washed.hover",color:"danger.hover"},":active":{backgroundColor:"danger.washed.pressed",color:"danger.pressed"},":disabled":{color:"muted.0",backgroundColor:"muted.3"}},"danger-tertiary":{textTransform:"capitalize",backgroundColor:"transparent",color:"danger.washed.accent",":hover":{color:"danger.hover",backgroundColor:"danger.washed.hover"},":active":{color:"danger.pressed",backgroundColor:"danger.washed.pressed"},":disabled":{color:"muted.0"}},"adaptative-dark":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:o.alpha("text.primary",.04)},":active":{backgroundColor:o.alpha("text.primary",.08)},":disabled":{color:"muted.0"}},"adaptative-light":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:o.alpha("background",.04)},":active":{backgroundColor:o.alpha("background",.08)},":disabled":{color:"muted.0"}}},g={fontVariationSettings:"'wght' 92",border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},b=n({},Object.keys(c).reduce((function(e,r){return n({},e,Object.keys(s).reduce((function(e,o){var t;return n({},e,((t={})[r+"-"+o]=n({},g,c[r],s[o]),t))}),[]))}),{})),h={border:"solid",borderWidth:1,borderColor:"muted.2"},u={horizontal:n({},h,{marginY:0,borderBottom:0}),vertical:n({},h,{marginX:0,borderLeft:0})},p={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"text.primary",border:"none","> svg:nth-of-type(1)":{marginRight:1}},m={blue:{bg:"blue"},green:{bg:"green"},red:{bg:"red"},black:{bg:"black",color:"white"},yellow:{bg:"yellow"},purple:{bg:"purple"}},f={small:{height:26,paddingX:"2",lineHeight:"small",fontVariationSettings:"'wght' 80",fontWeight:400,fontSize:0,svg:{width:16,height:16,minWidth:16,minHeight:16},button:{height:16,width:16}},regular:{height:40,paddingX:"4",lineHeight:"subtitle",fontVariationSettings:"'wght' 92",fontWeight:500,fontSize:2,svg:{width:20,minWidth:20,height:20,minHeight:20},button:{height:20,width:20}}},x=n({},Object.keys(m).reduce((function(e,r){return n({},e,Object.keys(f).reduce((function(e,o){var t;return n({},e,((t={})[r+"-"+o]=n({},p,m[r],f[o]),t))}),[]))}),{})),y={fontSize:14,width:106,height:48,appearance:"none","::-webkit-inner-spin-button ":{WebkitAppearance:"none",margin:0},paddingLeft:36,paddingRight:36,textAlign:"center",color:"black",borderStyle:"solid",borderWidth:1,borderColor:"muted.0",borderRadius:"default",backgroundColor:"primary.accent",":hover":{borderColor:"black"},":disabled":{backgroundColor:"muted.3",color:"muted.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},w={position:"absolute",top:14,height:20,width:20,cursor:"pointer",borderRadius:"default",backgroundColor:"transparent",color:"primary.base",":hover":{color:"primary.hover"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},":disabled":{color:"muted.0"},"> div":{display:"flex",height:"full",width:"full",margin:"auto",alignItems:"center",justifyContent:"center"}},v={error:n({},y,{borderColor:"danger.base",":hover":{borderColor:"danger.base"},":focus":{outline:"none",boxShadow:"none"}}),default:n({},y),buttonMinus:n({},w,{left:12}),buttonPlus:n({},w,{right:12})},C={table:{display:"table",width:"full"},header:{display:"table-header-group"},body:{display:"table-row-group"},"row-ltr":{display:"table-row",textAlign:"left"},"row-rtl":{display:"table-row",textAlign:"right"},cell:{bg:"background",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"background",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"text.secondary",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2"}},k={skeleton:{height:24},image:{regular:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4},compact:{width:32,minWidth:32,height:32,minHeight:32,borderRadius:4},variable:{minWidth:32,minHeight:32,borderRadius:4}},"image-preview":{small:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4,boxShadow:"menu"},regular:{width:156,minWidth:156,height:156,minHeight:156,borderRadius:4,boxShadow:"menu"},large:{width:256,minWidth:256,height:256,minHeight:256,borderRadius:4,boxShadow:"menu"}},regular:o.merge(C,{cell:{height:80}}),compact:o.merge(C,{cell:{height:48}}),variable:o.merge(C,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},S={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2",justifyContent:"flex-start"},F={compact:n({},S,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:n({},S,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:n({},S,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},R={fontVariationSettings:'"wght" 92',width:"full",height:48,borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"muted.2",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text.primary",outline:0,transition:"snap",":hover":{borderColor:"text.primary"},":focus":{borderColor:"primary.base",boxShadow:"0 0 0 1px  "+i.primary.base},":disabled":{bg:"muted.3",borderColor:"muted.0",color:"muted.0"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},W={borderColor:"danger.base",":focus":{borderColor:"danger.base",boxShadow:"0 0 0 1px  "+i.danger.base},":hover":{borderColor:"danger.hover"}};function z(e,r){var t;return void 0===r&&(r={}),(t={})[""+e]=o.merge(R,r),t[e+"-icon"]=o.merge(R,r,{paddingLeft:44}),t[e+"-suffix"]=o.merge(R,r,{paddingRight:"64px"}),t[e+"-clear"]=o.merge(R,r,{paddingRight:"44px"}),t[e+"-icon-clear"]=o.merge(R,r,{paddingLeft:"44px",paddingRight:"44px"}),t[e+"-icon-suffix"]=o.merge(R,r,{paddingRight:"64px",paddingLeft:"44px"}),t[e+"-suffix-clear"]=o.merge(R,r,{paddingRight:"75px"}),t[e+"-icon-suffix-clear"]=o.merge(R,r,{paddingLeft:"44px",paddingRight:"75px"}),t}var B=n({container:{position:"relative"},"container-icon":{position:"relative",label:{left:"44px"}},suffix:{color:"muted.0",borderLeftStyle:"solid",borderLeftWidth:"1px",borderLeftColor:"muted.2",paddingTop:"14px",marginTop:"px",width:"32px",paddingLeft:3,lineHeight:"body",fontVariationSettings:"regular",fontSize:1},icon:{color:"muted.0",top:1,left:0,marginX:3,marginTop:"14px",position:"absolute",height:20,width:20,minWidth:20,minHeight:20},buttons:{right:0,top:1,height:46,paddingRight:3,position:"absolute",display:"flex",color:"text.secondary"}},z("input"),z("input-error",W)),H={fontVariationSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"text.primary",display:"flex",alignItems:"center"}},L={"horizontal-regular":n({},H,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":n({},H,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":n({},H,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":n({},H,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},T={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"muted.1",backgroundColor:"transparent",borderRadius:"circle",":after":{content:'""',display:"block",borderRadius:"circle",backgroundColor:"white",opacity:0},":checked":{backgroundColor:"primary.base",borderColor:"primary.base",":after":{opacity:1},":hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},":active":{borderColor:"primary.pressed",backgroundColor:"primary.pressed"}},":disabled":{cursor:"not-allowed",backgroundColor:"muted.2",borderColor:"muted.0",":after":{backgroundColor:"muted.0"}},":hover":{borderColor:"text.primary"},":active":{borderColor:"text.secondary",backgroundColor:"secondary.base"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},E={regular:o.merge(T,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:o.merge(T,{height:16,width:16,padding:1,":after":{width:6,height:6}})},D={appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"muted.0",borderRadius:3,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center","&:checked":{backgroundColor:"primary.base",borderColor:"primary.base","&:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&[disabled]:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%238B9299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&:hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},"&:active":{backgroundColor:"primary.pressed",borderColor:"primary.pressed"}},"&:indeterminate":{backgroundColor:"secondary.base",borderColor:"primary.base",color:"primary.base","&:after":{content:'""',position:"absolute",width:8,height:0,borderWidth:1,borderStyle:"solid",borderLeft:0,borderRight:0,borderRadius:3,borderColor:"currentColor"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.0",color:"muted.0"},"&:hover":{borderColor:"primary.hover",color:"primary.hover",bg:"secondary.hover"},"&:active":{borderColor:"primary.pressed",color:"primary.pressed"}},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.0",color:"muted.0"},"&:hover":{borderColor:"text.primary"},"&:active":{backgroundColor:"secondary.base",borderColor:"text.secondary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},A={regular:n({},D,{height:20,width:20,minWidth:20,minHeight:20}),small:n({},D,{height:16,width:16,minWidth:16,minHeight:16})},j={appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"muted.0",borderStyle:"solid",borderColor:"muted.0",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"success.accent",transition:"transform .25s ease"},"&:checked":{backgroundColor:"success.base",borderColor:"success.base","&:hover":{backgroundColor:"success.hover",borderColor:"success.hover"},"&:disabled":{backgroundColor:"muted.0",borderColor:"muted.0","&:after":{backgroundColor:"muted.1"}}},"&:hover":{backgroundColor:"text.secondary",borderColor:"text.secondary"},"&:disabled":{backgroundColor:"muted.0",borderColor:"muted.0","&:after":{backgroundColor:"muted.1"}},":not(:checked):active":{backgroundColor:"text.secondary",borderColor:"text.secondary",":after":{backgroundColor:"secondary.base"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},I={regular:o.merge(j,{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}}),small:o.merge(j,{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}})},V={paddingTop:24,height:100,resize:"none",fontVariationSettings:'"wght" 92',width:"full",borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"muted.2",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text.primary",outline:0,transition:"snap",":hover":{borderColor:"text.primary"},":focus":{borderColor:"primary.base",boxShadow:"0 0 0 1px  "+i.primary.base},":disabled":{bg:"muted.3",borderColor:"muted.0",color:"muted.0"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"primary.base"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},X={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column",width:"full",label:{fontSize:1,left:12,paddingTop:2,color:"muted.0",marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"}},O={textarea:{borderColor:"danger.base",":focus":{borderColor:"danger.base",boxShadow:"0 0 0 1px  "+i.danger.base},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"danger.base"},":hover":{borderColor:"danger.hover"}},label:{color:"danger.base",fontSize:1,left:12,paddingTop:2,marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"}},q={container:n({},X),default:n({},V),error:n({},X,O)},M={visibility:"hidden",cursor:"pointer",bg:"background",borderRadius:"default",borderWidth:1,borderStyle:"solid",borderColor:"muted.1",boxShadow:"menu",outline:"none",marginTop:1,paddingY:4,width:"max-content",position:"absolute",zIndex:999},Y={display:"flex",alignItems:"center",height:24,paddingX:4,cursor:"pointer",bg:"background"},P={menu:M,"menu-visible":n({},M,{visibility:"visible"}),item:Y,"item-active":n({},Y,{bg:"secondary.base"})},G={display:"flex",flexDirection:"column",bg:"background",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"muted.1",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"muted.1",width:"calc(100% -"+d[3]+")",marginX:"-"+d[3],outline:"none"},"> button":{marginY:"2px",paddingX:1,color:"text.primary",fontSize:1,border:"none",textTransform:"initial",":focus":{bg:"secondary.base",outline:"none",boxShadow:"none"},":hover":{color:"text.primary"},width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}}},_={outline:"none",bg:"background",borderRadius:3,borderColor:"muted.2",borderStyle:"solid",borderWidth:1,position:"relative",overflowY:"auto",overflowX:"hidden",maxHeight:"3/4",margin:2,opacity:0,transform:"translate3d(0, 48px, 0)",transition:"pop","&[data-enter]":{opacity:1,transform:"translate3d(0, 0, 0)"}},K={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.2",borderStyle:"solid","button + button":{ml:4},py:4,px:6,borderTopWidth:0,borderLeftWidth:0,borderRightWidth:0,borderBottomWidth:1,h1:{variant:"text.subtitle",lineHeight:0},position:"sticky",top:0,left:0,right:0,bg:"background",zIndex:999},J={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.2",borderStyle:"solid",borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,position:"sticky",bottom:0,left:0,right:0,bg:"background",p:6,flexDirection:["column-reverse","column-reverse","row"],">button":{width:["full","full","inherit"]},"* + button":{ml:[0,0,4],mb:[4,4,0]}},N={pt:4,px:6,pb:6},Q=n({},N,{scrollbarWidth:"thin",scrollbarColor:"background","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"muted.2",borderRadius:"6px",border:"2px solid",color:"background"}},{overflowY:"auto"}),U={backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:r.rgba(i.text.primary,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":n({},_,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":n({},_,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":n({},_,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":n({},K,{height:56}),"header-regular":n({},K,{height:56}),"header-large":n({},K,{height:80}),"content-with-small-scroll-area":n({},Q,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":n({},Q,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":n({},Q,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":n({},Q,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":n({},Q,{height:"calc(100% - 10rem)"}),content:n({},N),"footer-small":n({},J,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":n({},J,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":n({},J,{borderTopWidth:1,minHeight:"5rem"})};function Z(){var e=a(["\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n"]);return Z=function(){return e},e}var $={display:"inline-block",width:"full",height:"full",backgroundColor:"muted.3",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n    90deg,\n    "+i.muted[3]+",\n    white,\n    "+i.muted[3]+"\n  )",animation:o.keyframes(Z())+" 1.2s ease-in-out infinite"},ee={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},re={button:b,list:F,table:k,controlGroup:L,toggle:I,checkbox:A,radio:E,abstractInput:B,input:{container:{display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column"},"floating-label":{fontSize:1,left:12,paddingTop:2,color:"muted.0",marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"},"text-container":{display:"flex",justifyContent:"space-between",alignItems:"",paddingTop:1}},tooltip:{backgroundColor:"text.primary",color:"background",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32},menu:G,modal:U,skeleton:{rect:n({},$,{borderRadius:"default"}),circle:n({},$,{borderRadius:"circle"})},divider:u,collapsible:{container:{bg:"background",borderColor:"muted.2",borderStyle:"solid",borderWidth:1,borderRadius:3},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:2,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6},"header-nested":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:4,paddingLeft:0,"div > button:nth-of-type(n+2)":{marginLeft:1}},"section-nested":{paddingX:4,paddingBottom:4}},avatar:{base:n({},ee,{bg:"text.primary",color:"background"}),primary:n({},ee,{bg:"primary.base",color:"primary.accent"}),danger:n({},ee,{bg:"danger.base",color:"danger.accent"})},tag:x,anchor:{font:"inherit",color:"primary.base",textDecoration:"none",":active":{color:"primary.pressed",textDecoration:"underline"},":hover":{color:"primary.hover",textDecoration:"underline"}},selectButton:P,textArea:q,stepper:v},oe={borderWidth:"1px",borderStyle:"solid",borderRadius:"default"},te={palette:{base:{bg:"background",color:"text.primary"},inverted:{bg:"text.primary",color:"background"},primary:{bg:"primary.base",color:"primary.accent"},secondary:{bg:"secondary.base",color:"secondary.accent"},danger:{bg:"danger.base",color:"danger.accent"},"danger-washed":{bg:"danger.washed.base",color:"danger.washed.accent"},success:{bg:"success.base",color:"success.accent"},"success-washed":{bg:"success.washed.base",color:"success.washed.accent"},warning:{bg:"warning.base",color:"warning.accent"},"warning-washed":{bg:"warning.washed.base",color:"warning.washed.accent"}},text:{small:{lineHeight:"small",fontVariationSettings:"regular",fontSize:0},body:{lineHeight:"body",fontVariationSettings:"regular",fontSize:1},highlight:{lineHeight:"highlight",fontVariationSettings:"regular",fontSize:1},action:{lineHeight:"action",fontVariationSettings:"regular",fontSize:1,textTransform:"uppercase"},subtitle:{lineHeight:"subtitle",fontVariationSettings:"regular",fontSize:2},headline:{lineHeight:"headline",fontVariationSettings:"regular",fontSize:4}},border:{default:n({},oe,{borderColor:"muted.2"}),"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"muted.2"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"muted.2"},strong:n({},oe,{borderColor:"text.primary"}),disabled:n({},oe,{borderColor:"muted.1"}),primary:n({},oe,{borderColor:"primary.base"}),danger:n({},oe,{borderColor:"danger.base"})}},ne=Object.keys(te),ae=n({},l,{components:re,patterns:te});function ie(){var e=a(["\n        @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n\n        code > * > *,\n        pre > * > *,\n        code,\n        pre {\n          font-family: 'SF Mono', 'Operator Mono', 'Dank Mono',\n            'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', Consolas, Monaco,\n            monospace !important;\n        }\n\n        body {\n          margin: 0;\n          background-color: ",";\n          color: ",";\n        }\n\n        html,\n        body,\n        * {\n          font-family: VTEXTrustVF, -apple-system, system-ui, BlinkMacSystemFont,\n            sans-serif !important;\n          font-variation-settings: 'wght' 92;\n        }\n\n        *,\n        ::before,\n        ::after {\n          box-sizing: border-box;\n          border-width: 0;\n          border-style: solid;\n        }\n\n        html,\n        body,\n        div,\n        span,\n        applet,\n        object,\n        iframe,\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6,\n        p,\n        blockquote,\n        pre,\n        a,\n        abbr,\n        acronym,\n        address,\n        big,\n        cite,\n        code,\n        del,\n        dfn,\n        em,\n        img,\n        ins,\n        kbd,\n        q,\n        s,\n        samp,\n        small,\n        strike,\n        strong,\n        sub,\n        sup,\n        tt,\n        var,\n        b,\n        u,\n        i,\n        center,\n        dl,\n        dt,\n        dd,\n        ol,\n        ul,\n        li,\n        fieldset,\n        form,\n        label,\n        legend,\n        table,\n        caption,\n        tbody,\n        tfoot,\n        thead,\n        tr,\n        th,\n        td,\n        article,\n        aside,\n        canvas,\n        details,\n        embed,\n        figure,\n        figcaption,\n        footer,\n        header,\n        hgroup,\n        menu,\n        nav,\n        output,\n        ruby,\n        section,\n        summary,\n        time,\n        mark,\n        audio,\n        video {\n          margin: 0;\n          padding: 0;\n          border: 0;\n          font-size: 100%;\n          font: inherit;\n          vertical-align: baseline;\n        }\n\n        /* HTML5 display-role reset for older browsers */\n        article,\n        aside,\n        details,\n        figcaption,\n        figure,\n        footer,\n        header,\n        hgroup,\n        menu,\n        nav,\n        section {\n          display: block;\n        }\n\n        body {\n          line-height: 1;\n        }\n\n        blockquote,\n        q {\n          quotes: none;\n        }\n\n        blockquote:before,\n        blockquote:after,\n        q:before,\n        q:after {\n          content: '';\n          content: none;\n        }\n\n        table {\n          border-collapse: collapse;\n          border-spacing: 0;\n        }\n      "]);return ie=function(){return e},e}exports.Preflight=function(){return t.createElement(o.Global,{styles:function(e){return o.css(ie(),o.get(e,"colors.background"),o.get(e,"colors.text"))}})},exports.patternKeys=ne,exports.theme=ae;
 //# sourceMappingURL=admin-ui-theme.cjs.production.min.js.map

dist/admin-ui-theme.esm.js

@@ -819,2 +819,128 @@ import { darken, rgba } from 'polished';
 
+var inputStyle = {
+  fontVariationSettings: '"wght" 92',
+  width: 'full',
+  height: 48,
+  borderStyle: 'solid',
+  borderWidth: 1,
+  paddingLeft: 3,
+  paddingRight: 4,
+  borderColor: 'muted.2',
+  borderRadius: 'default',
+  bg: 'inherit',
+  marginY: 1,
+  fontSize: 1,
+  color: 'text.primary',
+  outline: 0,
+  transition: 'snap',
+  ':hover': {
+    borderColor: 'text.primary'
+  },
+  ':focus': {
+    borderColor: 'primary.base',
+    boxShadow: "0 0 0 1px  " + colors.primary.base
+  },
+  ':disabled': {
+    bg: 'muted.3',
+    borderColor: 'muted.0',
+    color: 'muted.0'
+  },
+  ':focus + label': {
+    transform: 'translate(1px, 4px) scale(0.875)'
+  },
+  ':placeholder-shown:not(:focus) + label': {
+    paddingTop: 1
+  },
+  ':not(:placeholder-shown) + label': {
+    transform: 'translate(1px, 4px) scale(0.875)'
+  }
+};
+var errorState = {
+  borderColor: 'danger.base',
+  ':focus': {
+    borderColor: 'danger.base',
+    boxShadow: "0 0 0 1px  " + colors.danger.base
+  },
+  ':hover': {
+    borderColor: 'danger.hover'
+  }
+};
+
+function getInputVariants(name, styles) {
+  var _ref;
+
+  if (styles === void 0) {
+    styles = {};
+  }
+
+  return _ref = {}, _ref["" + name] = merge(inputStyle, styles), _ref[name + "-icon"] = merge(inputStyle, styles, {
+    paddingLeft: 44
+  }), _ref[name + "-suffix"] = merge(inputStyle, styles, {
+    paddingRight: '64px'
+  }), _ref[name + "-clear"] = merge(inputStyle, styles, {
+    paddingRight: '44px'
+  }), _ref[name + "-icon-clear"] = merge(inputStyle, styles, {
+    paddingLeft: '44px',
+    paddingRight: '44px'
+  }), _ref[name + "-icon-suffix"] = merge(inputStyle, styles, {
+    paddingRight: '64px',
+    paddingLeft: '44px'
+  }), _ref[name + "-suffix-clear"] = merge(inputStyle, styles, {
+    paddingRight: '75px'
+  }), _ref[name + "-icon-suffix-clear"] = merge(inputStyle, styles, {
+    paddingLeft: '44px',
+    paddingRight: '75px'
+  }), _ref;
+}
+
+var abstractInput = /*#__PURE__*/_extends({
+  // input container
+  container: {
+    position: 'relative'
+  },
+  'container-icon': {
+    position: 'relative',
+    label: {
+      left: '44px'
+    }
+  },
+  // input suffix
+  suffix: {
+    color: 'muted.0',
+    borderLeftStyle: 'solid',
+    borderLeftWidth: '1px',
+    borderLeftColor: 'muted.2',
+    paddingTop: '14px',
+    marginTop: 'px',
+    width: '32px',
+    paddingLeft: 3,
+    lineHeight: 'body',
+    fontVariationSettings: 'regular',
+    fontSize: 1
+  },
+  // left icon style
+  icon: {
+    color: 'muted.0',
+    top: 1,
+    left: 0,
+    marginX: 3,
+    marginTop: '14px',
+    position: 'absolute',
+    height: 20,
+    width: 20,
+    minWidth: 20,
+    minHeight: 20
+  },
+  // button container
+  buttons: {
+    right: 0,
+    top: 1,
+    height: 46,
+    paddingRight: 3,
+    position: 'absolute',
+    display: 'flex',
+    color: 'text.secondary'
+  }
+}, /*#__PURE__*/getInputVariants('input'), /*#__PURE__*/getInputVariants('input-error', errorState));
+
 var styles$5 = {
@@ -1131,188 +1257,28 @@ fontVariationSettings: 'regular',
 
-var inputStyle = {
-  fontVariationSettings: '"wght" 92',
-  width: 'full',
-  height: 48,
-  borderStyle: 'solid',
-  borderWidth: 1,
-  // paddingTop: 2,
-  paddingLeft: 3,
-  paddingRight: 4,
-  borderColor: 'muted.2',
-  borderRadius: 'default',
-  bg: 'inherit',
-  marginY: 1,
-  fontSize: 1,
-  color: 'text.primary',
-  outline: 0,
-  transition: 'snap',
-  ':hover': {
-    borderColor: 'text.primary'
+var input = {
+  container: {
+    display: 'flex',
+    position: 'relative',
+    justifyContent: 'flex-start',
+    flexDirection: 'column'
   },
-  ':focus': {
-    borderColor: 'primary.base',
-    boxShadow: "0 0 0 1px  " + colors.primary.base
+  'floating-label': {
+    fontSize: 1,
+    left: 12,
+    paddingTop: 2,
+    color: 'muted.0',
+    marginBottom: 3,
+    position: 'absolute',
+    transform: 'translate(0, 16px) scale(1)',
+    transformOrigin: 'top left',
+    transition: 'all 0.2s ease-out;'
   },
-  ':disabled': {
-    bg: 'muted.3',
-    borderColor: 'muted.0',
-    color: 'muted.0'
-  },
-  // Label styles
-  ':focus + label': {
-    transform: 'translate(1px, 4px) scale(0.875)',
-    color: 'primary.base'
-  },
-  ':placeholder-shown:not(:focus) + label': {
+  'text-container': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: '',
     paddingTop: 1
-  },
-  ':active + label': {
-    transform: 'translate(1px, 4px) scale(0.875)'
-  },
-  ':not(:placeholder-shown) + label': {
-    transform: 'translate(1px, 4px) scale(0.875)'
   }
 };
-var clearButtonStyle = {
-  color: 'muted.0',
-  marginY: '14px',
-  marginRight: 1,
-  height: 20,
-  width: 20,
-  border: 'none',
-  borderRadius: 'default',
-  bg: 'transparent',
-  cursor: 'pointer',
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none'
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus'
-  },
-  ':hover': {
-    color: 'text.primary'
-  },
-  '> div': {
-    display: 'flex',
-    height: 'full',
-    width: 'full',
-    margin: 'auto',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-};
-var iconStyle = {
-  color: 'muted.0',
-  top: 1,
-  left: 0,
-  paddingX: 3,
-  paddingTop: '14px',
-  position: 'absolute',
-  width: 44,
-  height: 48,
-  svg: {
-    height: 20,
-    width: 20,
-    minWidth: 20,
-    minHeight: 20
-  }
-};
-var suffixStyle = {
-  color: 'muted.0',
-  borderLeftStyle: 'solid',
-  borderLeftWidth: '1px',
-  borderLeftColor: 'muted.2',
-  paddingTop: '14px',
-  marginTop: 'px',
-  width: '32px',
-  paddingLeft: 3,
-  lineHeight: 'body',
-  fontVariationSettings: 'regular',
-  fontSize: 1
-};
-var passwordButtonStyle = {
-  color: 'text.secondary',
-  marginY: '20px',
-  marginRight: 1,
-  cursor: 'pointer'
-};
-var inputVariants = {
-  "default": /*#__PURE__*/_extends({}, inputStyle),
-  'with-password': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '64px'
-  }),
-  'with-icon': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingLeft: '44px'
-  }),
-  'with-suffix': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '64px'
-  }),
-  'with-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '44px'
-  }),
-  'with-icon-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingLeft: '44px',
-    paddingRight: '44px'
-  }),
-  'with-icon-suffix': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '64px',
-    paddingLeft: '44px'
-  }),
-  'with-suffix-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingRight: '75px'
-  }),
-  'with-icon-suffix-clear': /*#__PURE__*/_extends({}, inputStyle, {
-    paddingLeft: '44px',
-    paddingRight: '75px'
-  })
-};
-var containerStyles = {
-  position: 'relative'
-};
-var input = /*#__PURE__*/_extends({
-  container: /*#__PURE__*/_extends({}, containerStyles),
-  'container-with-icon': /*#__PURE__*/_extends({}, containerStyles, {
-    label: {
-      left: '44px'
-    }
-  }),
-  'icon-style': /*#__PURE__*/_extends({}, iconStyle),
-  'suffix-style': /*#__PURE__*/_extends({}, suffixStyle),
-  'clear-button-style': /*#__PURE__*/_extends({}, clearButtonStyle),
-  // 'password-style': { ...passwordStyle },
-  'password-button-style': /*#__PURE__*/_extends({}, passwordButtonStyle)
-}, inputVariants);
 
-var styles$8 = {
-  display: 'flex',
-  position: 'relative',
-  justifyContent: 'flex-start',
-  flexDirection: 'column'
-};
-var error = {
-  input: {
-    borderColor: 'danger.base',
-    ':focus': {
-      borderColor: 'danger.base',
-      boxShadow: "0 0 0 1px  " + colors.danger.base
-    },
-    ':focus + label': {
-      transform: 'translate(1px, 4px) scale(0.875)',
-      color: 'danger.base'
-    },
-    ':hover': {
-      borderColor: 'danger.hover'
-    }
-  },
-  label: {
-    color: 'danger.base'
-  }
-};
-var textField = {
-  "default": /*#__PURE__*/_extends({}, styles$8),
-  error: /*#__PURE__*/_extends({}, styles$8, error)
-};
-
 var textAreaInputStyle = {
@@ -1360,3 +1326,3 @@ paddingTop: 24,
 };
-var styles$9 = {
+var styles$8 = {
   display: 'flex',
@@ -1379,3 +1345,3 @@ position: 'relative',
 };
-var error$1 = {
+var error = {
   textarea: {
@@ -1408,5 +1374,5 @@ borderColor: 'danger.base',
 var textArea = {
-  container: /*#__PURE__*/_extends({}, styles$9),
+  container: /*#__PURE__*/_extends({}, styles$8),
   "default": /*#__PURE__*/_extends({}, textAreaInputStyle),
-  error: /*#__PURE__*/_extends({}, styles$9, error$1)
+  error: /*#__PURE__*/_extends({}, styles$8, error)
 };
@@ -1685,3 +1651,3 @@
 var load = /*#__PURE__*/keyframes( /*#__PURE__*/_templateObject());
-var styles$a = {
+var styles$9 = {
   display: 'inline-block',
@@ -1699,6 +1665,6 @@ width: 'full',
 var skeleton = {
-  rect: /*#__PURE__*/_extends({}, styles$a, {
+  rect: /*#__PURE__*/_extends({}, styles$9, {
     borderRadius: 'default'
   }),
-  circle: /*#__PURE__*/_extends({}, styles$a, {
+  circle: /*#__PURE__*/_extends({}, styles$9, {
     borderRadius: 'circle'
@@ -1746,3 +1712,3 @@ })
 
-var styles$b = {
+var styles$a = {
   display: 'flex',
@@ -1758,11 +1724,11 @@ alignItems: 'center',
 var avatar = {
-  base: /*#__PURE__*/_extends({}, styles$b, {
+  base: /*#__PURE__*/_extends({}, styles$a, {
     bg: 'text.primary',
     color: 'background'
   }),
-  primary: /*#__PURE__*/_extends({}, styles$b, {
+  primary: /*#__PURE__*/_extends({}, styles$a, {
     bg: 'primary.base',
     color: 'primary.accent'
   }),
-  danger: /*#__PURE__*/_extends({}, styles$b, {
+  danger: /*#__PURE__*/_extends({}, styles$a, {
     bg: 'danger.base',
@@ -1782,4 +1748,4 @@ color: 'danger.accent'
   radio: radio,
+  abstractInput: abstractInput,
   input: input,
-  textField: textField,
   tooltip: tooltip,
@@ -1786,0 +1752,0 @@ menu: menu$1,

dist/config/components/index.d.ts

@@ -380,366 +380,14 @@ declare const _default: {
     };
-    input: {
-        default: {
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
-        'with-icon': {
-            paddingLeft: string;
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            paddingRight: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
-        'with-suffix': {
-            paddingRight: string;
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            paddingLeft: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
-        'with-clear': {
-            paddingRight: string;
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            paddingLeft: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
-        'with-icon-clear': {
-            paddingLeft: string;
-            paddingRight: string;
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
-        'with-icon-suffix': {
-            paddingRight: string;
-            paddingLeft: string;
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
-        'with-suffix-clear': {
-            paddingRight: string;
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            paddingLeft: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
-        'with-icon-suffix-clear': {
-            paddingLeft: string;
-            paddingRight: string;
-            fontVariationSettings: string;
-            width: string;
-            height: number;
-            borderStyle: string;
-            borderWidth: number;
-            borderColor: string;
-            borderRadius: string;
-            bg: string;
-            marginY: number;
-            fontSize: number;
-            color: string;
-            outline: number;
-            transition: string;
-            ':hover': {
-                borderColor: string;
-            };
-            ':focus': {
-                borderColor: string;
-                boxShadow: string;
-            };
-            ':disabled': {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            ':focus + label': {
-                transform: string;
-                color: string;
-            };
-            ':placeholder-shown:not(:focus) + label': {
-                paddingTop: number;
-            };
-            ':active + label': {
-                transform: string;
-            };
-            ':not(:placeholder-shown) + label': {
-                transform: string;
-            };
-        };
+    abstractInput: {
         container: {
             position: string;
         };
-        'container-with-icon': {
+        'container-icon': {
+            position: string;
             label: {
                 left: string;
             };
-            position: string;
         };
-        'icon-style': {
+        suffix: {
             color: string;
-            top: number;
-            left: number;
-            paddingX: number;
-            paddingTop: string;
-            position: string;
-            width: number;
-            height: number;
-            svg: {
-                height: number;
-                width: number;
-                minWidth: number;
-                minHeight: number;
-            };
-        };
-        'suffix-style': {
-            color: string;
             borderLeftStyle: string;
@@ -756,35 +404,26 @@ borderLeftWidth: string;
         };
-        'clear-button-style': {
+        icon: {
             color: string;
-            marginY: string;
-            marginRight: number;
+            top: number;
+            left: number;
+            marginX: number;
+            marginTop: string;
+            position: string;
             height: number;
             width: number;
-            border: string;
-            borderRadius: string;
-            bg: string;
-            cursor: string;
-            ':focus:not([data-focus-visible-added])': {
-                outline: string;
-                boxShadow: string;
-            };
-            ':focus': {
-                outline: string;
-                boxShadow: string;
-            };
-            ':hover': {
-                color: string;
-            };
-            '> div': {
-                display: string;
-                height: string;
-                width: string;
-                margin: string;
-                alignItems: string;
-                justifyContent: string;
-            };
+            minWidth: number;
+            minHeight: number;
         };
+        buttons: {
+            right: number;
+            top: number;
+            height: number;
+            paddingRight: number;
+            position: string;
+            display: string;
+            color: string;
+        };
     };
-    textField: {
-        default: {
+    input: {
+        container: {
             display: string;
@@ -795,24 +434,12 @@ position: string;
         };
-        error: {
-            input: {
-                borderColor: string;
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':hover': {
-                    borderColor: string;
-                };
-            };
-            label: {
-                color: string;
-            };
-            display: string;
+        'floating-label': {
+            fontSize: number;
+            left: number;
+            paddingTop: number;
+            color: string;
+            marginBottom: number;
             position: string;
-            justifyContent: string;
-            flexDirection: string;
+            transform: string;
+            transformOrigin: string;
+            transition: string;
         };
@@ -819,0 +446,0 @@ };

dist/config/components/input.d.ts

 declare const _default: {
-    default: {
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        paddingLeft: number;
-        paddingRight: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-password': {
-        paddingRight: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        paddingLeft: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-icon': {
-        paddingLeft: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        paddingRight: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-suffix': {
-        paddingRight: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        paddingLeft: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-clear': {
-        paddingRight: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        paddingLeft: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-icon-clear': {
-        paddingLeft: string;
-        paddingRight: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-icon-suffix': {
-        paddingRight: string;
-        paddingLeft: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-suffix-clear': {
-        paddingRight: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        paddingLeft: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
-    'with-icon-suffix-clear': {
-        paddingLeft: string;
-        paddingRight: string;
-        fontVariationSettings: string;
-        width: string;
-        height: number;
-        borderStyle: string;
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: string;
-        bg: string;
-        marginY: number;
-        fontSize: number;
-        color: string;
-        outline: number;
-        transition: string;
-        ':hover': {
-            borderColor: string;
-        };
-        ':focus': {
-            borderColor: string;
-            boxShadow: string;
-        };
-        ':disabled': {
-            bg: string;
-            borderColor: string;
-            color: string;
-        };
-        ':focus + label': {
-            transform: string;
-            color: string;
-        };
-        ':placeholder-shown:not(:focus) + label': {
-            paddingTop: number;
-        };
-        ':active + label': {
-            transform: string;
-        };
-        ':not(:placeholder-shown) + label': {
-            transform: string;
-        };
-    };
     container: {
+        display: string;
         position: string;
+        justifyContent: string;
+        flexDirection: string;
     };
-    'container-with-icon': {
-        label: {
-            left: string;
-        };
-        position: string;
-    };
-    'icon-style': {
+    'floating-label': {
+        fontSize: number;
+        left: number;
+        paddingTop: number;
         color: string;
-        top: number;
-        left: number;
-        paddingX: number;
-        paddingTop: string;
+        marginBottom: number;
         position: string;
-        width: number;
-        height: number;
-        svg: {
-            height: number;
-            width: number;
-            minWidth: number;
-            minHeight: number;
-        };
+        transform: string;
+        transformOrigin: string;
+        transition: string;
     };
-    'suffix-style': {
-        color: string;
-        borderLeftStyle: string;
-        borderLeftWidth: string;
-        borderLeftColor: string;
-        paddingTop: string;
-        marginTop: string;
-        width: string;
-        paddingLeft: number;
-        lineHeight: string;
-        fontVariationSettings: string;
-        fontSize: number;
+    'text-container': {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        paddingTop: number;
     };
-    'clear-button-style': {
-        color: string;
-        marginY: string;
-        marginRight: number;
-        height: number;
-        width: number;
-        border: string;
-        borderRadius: string;
-        bg: string;
-        cursor: string;
-        ':focus:not([data-focus-visible-added])': {
-            outline: string;
-            boxShadow: string;
-        };
-        ':focus': {
-            outline: string;
-            boxShadow: string;
-        };
-        ':hover': {
-            color: string;
-        };
-        '> div': {
-            display: string;
-            height: string;
-            width: string;
-            margin: string;
-            alignItems: string;
-            justifyContent: string;
-        };
-    };
-    'password-button-style': {
-        color: string;
-        marginY: string;
-        marginRight: number;
-        cursor: string;
-    };
 };
 export default _default;

dist/config/index.d.ts

@@ -383,366 +383,14 @@ export * from './patterns';
         };
-        input: {
-            default: {
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
-            'with-icon': {
-                paddingLeft: string;
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                paddingRight: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
-            'with-suffix': {
-                paddingRight: string;
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                paddingLeft: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
-            'with-clear': {
-                paddingRight: string;
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                paddingLeft: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
-            'with-icon-clear': {
-                paddingLeft: string;
-                paddingRight: string;
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
-            'with-icon-suffix': {
-                paddingRight: string;
-                paddingLeft: string;
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
-            'with-suffix-clear': {
-                paddingRight: string;
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                paddingLeft: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
-            'with-icon-suffix-clear': {
-                paddingLeft: string;
-                paddingRight: string;
-                fontVariationSettings: string;
-                width: string;
-                height: number;
-                borderStyle: string;
-                borderWidth: number;
-                borderColor: string;
-                borderRadius: string;
-                bg: string;
-                marginY: number;
-                fontSize: number;
-                color: string;
-                outline: number;
-                transition: string;
-                ':hover': {
-                    borderColor: string;
-                };
-                ':focus': {
-                    borderColor: string;
-                    boxShadow: string;
-                };
-                ':disabled': {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                ':focus + label': {
-                    transform: string;
-                    color: string;
-                };
-                ':placeholder-shown:not(:focus) + label': {
-                    paddingTop: number;
-                };
-                ':active + label': {
-                    transform: string;
-                };
-                ':not(:placeholder-shown) + label': {
-                    transform: string;
-                };
-            };
+        abstractInput: {
             container: {
                 position: string;
             };
-            'container-with-icon': {
+            'container-icon': {
+                position: string;
                 label: {
                     left: string;
                 };
-                position: string;
             };
-            'icon-style': {
+            suffix: {
                 color: string;
-                top: number;
-                left: number;
-                paddingX: number;
-                paddingTop: string;
-                position: string;
-                width: number;
-                height: number;
-                svg: {
-                    height: number;
-                    width: number;
-                    minWidth: number;
-                    minHeight: number;
-                };
-            };
-            'suffix-style': {
-                color: string;
                 borderLeftStyle: string;
@@ -759,35 +407,26 @@ borderLeftWidth: string;
             };
-            'clear-button-style': {
+            icon: {
                 color: string;
-                marginY: string;
-                marginRight: number;
+                top: number;
+                left: number;
+                marginX: number;
+                marginTop: string;
+                position: string;
                 height: number;
                 width: number;
-                border: string;
-                borderRadius: string;
-                bg: string;
-                cursor: string;
-                ':focus:not([data-focus-visible-added])': {
-                    outline: string;
-                    boxShadow: string;
-                };
-                ':focus': {
-                    outline: string;
-                    boxShadow: string;
-                };
-                ':hover': {
-                    color: string;
-                };
-                '> div': {
-                    display: string;
-                    height: string;
-                    width: string;
-                    margin: string;
-                    alignItems: string;
-                    justifyContent: string;
-                };
+                minWidth: number;
+                minHeight: number;
             };
+            buttons: {
+                right: number;
+                top: number;
+                height: number;
+                paddingRight: number;
+                position: string;
+                display: string;
+                color: string;
+            };
         };
-        textField: {
-            default: {
+        input: {
+            container: {
                 display: string;
@@ -798,24 +437,12 @@ position: string;
             };
-            error: {
-                input: {
-                    borderColor: string;
-                    ':focus': {
-                        borderColor: string;
-                        boxShadow: string;
-                    };
-                    ':focus + label': {
-                        transform: string;
-                        color: string;
-                    };
-                    ':hover': {
-                        borderColor: string;
-                    };
-                };
-                label: {
-                    color: string;
-                };
-                display: string;
+            'floating-label': {
+                fontSize: number;
+                left: number;
+                paddingTop: number;
+                color: string;
+                marginBottom: number;
                 position: string;
-                justifyContent: string;
-                flexDirection: string;
+                transform: string;
+                transformOrigin: string;
+                transition: string;
             };
@@ -822,0 +449,0 @@ };

package.json

 {
   "name": "@vtex/admin-ui-theme",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "dist/index.js",
@@ -36,3 +36,3 @@ "module": "dist/admin-ui-theme.esm.js",
   "devDependencies": {
-    "@vtex/admin-ui-system": "^0.3.0"
+    "@vtex/admin-ui-system": "^0.3.1"
   },
@@ -42,3 +42,3 @@ "dependencies": {
   },
-  "gitHead": "f25666c1435c99498c1eb71c468e0df4bb2ebf6d"
+  "gitHead": "714fd8b2f8f85e36030fbe2267b5aecc3bd638e7"
 }

src/config/components/index.ts

@@ -7,3 +7,2 @@ // elements
 import stepper from './stepper'
-
 // data
@@ -13,2 +12,3 @@ import table from './table'
 // forms
+import abstractInput from './abstractInput'
 import controlGroup from './controlGroup'
@@ -19,3 +19,2 @@ import radio from './radio'
 import input from './input'
-import textField from './textField'
 import textArea from './textArea'
@@ -40,4 +39,4 @@ import selectButton from './selectButton'
   radio,
+  abstractInput,
   input,
-  textField,
   tooltip,
@@ -44,0 +43,0 @@ menu,

src/config/components/input.ts

@@ -1,163 +0,25 @@
-import { colors } from '../base'
-
-const inputStyle = {
-  fontVariationSettings: '"wght" 92',
-  width: 'full',
-  height: 48,
-  borderStyle: 'solid',
-  borderWidth: 1,
-  // paddingTop: 2,
-  paddingLeft: 3,
-  paddingRight: 4,
-  borderColor: 'muted.2',
-  borderRadius: 'default',
-  bg: 'inherit',
-  marginY: 1,
-  fontSize: 1,
-  color: 'text.primary',
-  outline: 0,
-  transition: 'snap',
-  ':hover': {
-    borderColor: 'text.primary',
+export default {
+  container: {
+    display: 'flex',
+    position: 'relative',
+    justifyContent: 'flex-start',
+    flexDirection: 'column',
   },
-  ':focus': {
-    borderColor: 'primary.base',
-    boxShadow: `0 0 0 1px  ${colors.primary.base}`,
-  },
-  ':disabled': {
-    bg: 'muted.3',
-    borderColor: 'muted.0',
+  'floating-label': {
+    fontSize: 1,
+    left: 12,
+    paddingTop: 2,
     color: 'muted.0',
+    marginBottom: 3,
+    position: 'absolute',
+    transform: 'translate(0, 16px) scale(1)',
+    transformOrigin: 'top left',
+    transition: 'all 0.2s ease-out;',
   },
-  // Label styles
-  ':focus + label': {
-    transform: 'translate(1px, 4px) scale(0.875)',
-    color: 'primary.base',
-  },
-  ':placeholder-shown:not(:focus) + label': {
+  'text-container': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: '',
     paddingTop: 1,
   },
-  ':active + label': {
-    transform: 'translate(1px, 4px) scale(0.875)',
-  },
-  ':not(:placeholder-shown) + label': {
-    transform: 'translate(1px, 4px) scale(0.875)',
-  },
 }
-
-const clearButtonStyle = {
-  color: 'muted.0',
-  marginY: '14px',
-  marginRight: 1,
-  height: 20,
-  width: 20,
-  border: 'none',
-  borderRadius: 'default',
-  bg: 'transparent',
-  cursor: 'pointer',
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none',
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus',
-  },
-  ':hover': {
-    color: 'text.primary',
-  },
-  '> div': {
-    display: 'flex',
-    height: 'full',
-    width: 'full',
-    margin: 'auto',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-}
-
-const iconStyle = {
-  color: 'muted.0',
-  top: 1,
-  left: 0,
-  paddingX: 3,
-  paddingTop: '14px',
-  position: 'absolute',
-  width: 44,
-  height: 48,
-  svg: {
-    height: 20,
-    width: 20,
-    minWidth: 20,
-    minHeight: 20,
-  },
-}
-
-const suffixStyle = {
-  color: 'muted.0',
-  borderLeftStyle: 'solid',
-  borderLeftWidth: '1px',
-  borderLeftColor: 'muted.2',
-  paddingTop: '14px',
-  marginTop: 'px',
-  width: '32px',
-  paddingLeft: 3,
-  lineHeight: 'body',
-  fontVariationSettings: 'regular',
-  fontSize: 1,
-}
-
-const passwordButtonStyle = {
-  color: 'text.secondary',
-  marginY: '20px',
-  marginRight: 1,
-  cursor: 'pointer',
-}
-
-const inputVariants = {
-  default: { ...inputStyle },
-  'with-password': { ...inputStyle, paddingRight: '64px' },
-  'with-icon': { ...inputStyle, paddingLeft: '44px' },
-  'with-suffix': { ...inputStyle, paddingRight: '64px' },
-  'with-clear': {
-    ...inputStyle,
-    paddingRight: '44px',
-  },
-  'with-icon-clear': {
-    ...inputStyle,
-    paddingLeft: '44px',
-    paddingRight: '44px',
-  },
-  'with-icon-suffix': {
-    ...inputStyle,
-    paddingRight: '64px',
-    paddingLeft: '44px',
-  },
-  'with-suffix-clear': {
-    ...inputStyle,
-    paddingRight: '75px',
-  },
-  'with-icon-suffix-clear': {
-    ...inputStyle,
-    paddingLeft: '44px',
-    paddingRight: '75px',
-  },
-}
-
-const containerStyles = {
-  position: 'relative',
-}
-
-export default {
-  container: { ...containerStyles },
-  'container-with-icon': {
-    ...containerStyles,
-    label: { left: '44px' },
-  },
-  'icon-style': { ...iconStyle },
-  'suffix-style': { ...suffixStyle },
-  'clear-button-style': { ...clearButtonStyle },
-  // 'password-style': { ...passwordStyle },
-  'password-button-style': { ...passwordButtonStyle },
-  ...inputVariants,
-}

No alert changes

Worsened metrics

Total package byte prevSize

564046

decreased by-6.55%

Lines of code

10766

decreased by-10.6%

No dependency changes