@vtex/admin-ui-theme
Advanced tools
Comparing version 0.1.0-rc.1 to 0.1.0-rc.2
@@ -6,2 +6,14 @@ # Change Log | ||
# [0.1.0-rc.2](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.1.0-rc.1...@vtex/admin-ui-theme@0.1.0-rc.2) (2020-11-06) | ||
### Features | ||
* anchor [WIP] ([54f2acd](https://github.com/vtex/onda/commit/54f2acd758ffbbe6a8be9b6ca1f95aaa97ad8735)) | ||
* link [WIP] ([3748582](https://github.com/vtex/onda/commit/3748582786583d0ad4d08a51be3b48fdefd593bd)) | ||
# [0.1.0-rc.1](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.1.0-rc.0...@vtex/admin-ui-theme@0.1.0-rc.1) (2020-11-04) | ||
@@ -8,0 +20,0 @@ |
@@ -553,2 +553,16 @@ 'use strict'; | ||
var anchor = { | ||
font: 'inherit', | ||
color: 'primary.base', | ||
textDecoration: 'none', | ||
':active': { | ||
color: 'primary.active', | ||
textDecoration: 'underline' | ||
}, | ||
':hover': { | ||
color: 'primary.hover', | ||
textDecoration: 'underline' | ||
} | ||
}; | ||
var styles$3 = { | ||
@@ -1019,9 +1033,10 @@ table: { | ||
var input = { | ||
var inputStyle = { | ||
fontVariationSettings: '"wght" 92', | ||
width: 'full', | ||
height: 48, | ||
paddingX: 4, | ||
borderStyle: 'solid', | ||
borderWidth: 1, | ||
paddingLeft: 3, | ||
paddingRight: 4, | ||
borderColor: 'muted.3', | ||
@@ -1036,44 +1051,158 @@ borderRadius: 'default', | ||
':hover': { | ||
borderColor: 'muted.2' | ||
borderColor: 'text' | ||
}, | ||
':focus': { | ||
borderColor: 'primary.base', | ||
boxShadow: "inset 0 0 0 1px " + colors.primary.base | ||
boxShadow: "0 0 0 1px " + colors.primary.base | ||
}, | ||
':disabled': { | ||
bg: 'muted.4', | ||
borderColor: 'muted.1', | ||
color: 'muted.1' | ||
}, | ||
// Label styles | ||
':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)' | ||
} | ||
}; | ||
var clearButtonStyle = { | ||
color: 'muted.1', | ||
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' | ||
}, | ||
'> div': { | ||
display: 'flex', | ||
height: 'full', | ||
width: 'full', | ||
margin: 'auto', | ||
alignItems: 'center', | ||
justifyContent: 'center' | ||
} | ||
}; | ||
var iconStyle = { | ||
color: 'muted.1', | ||
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.1', | ||
borderLeftStyle: 'solid', | ||
borderLeftWidth: '1px', | ||
borderLeftColor: 'muted.3', | ||
paddingTop: '14px', | ||
marginTop: 'px', | ||
width: '32px', | ||
paddingLeft: 3, | ||
lineHeight: 'body', | ||
fontVariationSettings: 'regular', | ||
fontSize: 1 | ||
}; | ||
var inputVariants = { | ||
"default": /*#__PURE__*/_extends({}, inputStyle), | ||
'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) | ||
}, inputVariants); | ||
var textField = { | ||
var styles$7 = { | ||
display: 'flex', | ||
position: 'relative', | ||
justifyContent: 'flex-start', | ||
flexDirection: 'column', | ||
flexDirection: 'column' | ||
}; | ||
var error = { | ||
input: { | ||
paddingTop: 4 | ||
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: { | ||
fontSize: 1, | ||
paddingX: 4, | ||
paddingTop: 2, | ||
color: 'muted.0', | ||
marginBottom: 3, | ||
pointerEvents: 'none', | ||
position: 'absolute', | ||
transform: 'translate(0, 16px) scale(1)', | ||
transformOrigin: 'top left', | ||
transition: 'all 0.2s ease-out;' | ||
}, | ||
':focus-within > label': { | ||
transform: 'translate(4px, 4px) scale(0.875)', | ||
color: 'primary.base' | ||
}, | ||
'input:placeholder-shown:not(:focus) + label': { | ||
paddingTop: 1 | ||
}, | ||
'input:active + label': { | ||
transform: 'translate(4px, 4px) scale(0.875)' | ||
}, | ||
'input:not(:placeholder-shown) + label': { | ||
transform: 'translate(4px, 4px) scale(0.875)' | ||
color: 'danger.base' | ||
} | ||
}; | ||
var textField = { | ||
"default": /*#__PURE__*/_extends({}, styles$7), | ||
error: /*#__PURE__*/_extends({}, styles$7, error) | ||
}; | ||
@@ -1316,3 +1445,3 @@ var tooltip = { | ||
var load = /*#__PURE__*/adminUiSystem.keyframes( /*#__PURE__*/_templateObject()); | ||
var styles$7 = { | ||
var styles$8 = { | ||
display: 'inline-block', | ||
@@ -1330,6 +1459,6 @@ width: 'full', | ||
var skeleton = { | ||
rect: /*#__PURE__*/_extends({}, styles$7, { | ||
rect: /*#__PURE__*/_extends({}, styles$8, { | ||
borderRadius: 'default' | ||
}), | ||
circle: /*#__PURE__*/_extends({}, styles$7, { | ||
circle: /*#__PURE__*/_extends({}, styles$8, { | ||
borderRadius: 'circle' | ||
@@ -1363,3 +1492,3 @@ }) | ||
var styles$8 = { | ||
var styles$9 = { | ||
display: 'flex', | ||
@@ -1375,11 +1504,11 @@ alignItems: 'center', | ||
var avatar = { | ||
base: /*#__PURE__*/_extends({}, styles$8, { | ||
base: /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'text', | ||
color: 'background' | ||
}), | ||
primary: /*#__PURE__*/_extends({}, styles$8, { | ||
primary: /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'primary.base', | ||
color: 'primary.contrast' | ||
}), | ||
danger: /*#__PURE__*/_extends({}, styles$8, { | ||
danger: /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'danger.base', | ||
@@ -1390,44 +1519,2 @@ color: 'danger.contrast' | ||
var styles$9 = { | ||
display: 'flex', | ||
alignItems: 'center', | ||
justifyContent: 'space-between', | ||
height: 56, | ||
paddingY: 3, | ||
paddingLeft: 4, | ||
paddingRight: 3, | ||
borderRadius: 'default', | ||
opacity: 0, | ||
zIndex: 999, | ||
transform: 'translate3d(0, -10px, 0)', | ||
visibility: 'hidden', | ||
transition: 'pop' | ||
}; | ||
var visible = { | ||
opacity: 1, | ||
visibility: 'visible', | ||
transform: 'translate3d(0, 0, 0)' | ||
}; | ||
var error = /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'danger.washed.0' | ||
}); | ||
var success = /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'success.washed.0' | ||
}); | ||
var warning = /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'warning.washed.0' | ||
}); | ||
var alert = { | ||
error: error, | ||
'error-visible': /*#__PURE__*/_extends({}, error, visible), | ||
success: success, | ||
'success-visible': /*#__PURE__*/_extends({}, success, visible), | ||
warning: warning, | ||
'warning-visible': /*#__PURE__*/_extends({}, warning, visible) | ||
}; | ||
// elements | ||
@@ -1452,3 +1539,3 @@ var components = { | ||
tag: tag, | ||
alert: alert | ||
anchor: anchor | ||
}; | ||
@@ -1455,0 +1542,0 @@ |
@@ -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 i(){return(i=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 n(e,r){return r||(r=e.slice(0)),e.raw=r,e}var a={text:"#323845",background:"#FFFFFF",muted:["#707685","#898F9E","#C4C5CA","#E0E2E7","#F4F6FB"],focus:"#8DB6FA",emphasis:"#F71963",primary:{base:"#2953B2",hover:"#1E4397",active:"#3F6FDB",contrast:"#FFFFFF",washed:["#DAE3F5","#E8F1FF","#DBE9FF"]},danger:{base:"#CE454F",hover:"#A70C0C",active:"#DE0404",contrast:"#FFFFFF",washed:["#FEE3E3","#FFE3E3","#FFD0D0"]},warning:{base:"#FFBA52",hover:"#E6A30A",active:"#EFA906",contrast:"#FFFFFF",washed:["#FDE6C0"]},success:{base:"#368369",hover:"#005C31",active:"#26AE6E",contrast:"#FFFFFF",washed:["#D6EFE5"]},basic:{blue:"#DAE3F5",purple:"#F4EFFF",yellow:"#FDE6C0",green:"#CCECE3",red:"#FEE3E3",black:"#323845"}},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:a,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"]+" "+a.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}}},g={"filled-primary":{textTransform:"uppercase",color:"primary.contrast",backgroundColor:"primary.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"primary.hover"},":active":{backgroundColor:"primary.active"},":disabled":{color:"text",backgroundColor:"muted.2"}},"subtle-primary":{textTransform:"uppercase",backgroundColor:"primary.washed.0",color:"primary.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"primary.washed.1",color:"primary.hover"},":active":{backgroundColor:"primary.washed.2",color:"primary.active"},":disabled":{color:"muted.1",backgroundColor:"muted.4"}},"text-primary":{textTransform:"capitalize",backgroundColor:"transparent",color:"primary.base",fontVariationSettings:"'wght' 92",":hover":{color:"primary.hover",backgroundColor:"primary.washed.1"},":active":{color:"primary.active",backgroundColor:"primary.washed.2"},":disabled":{color:"muted.1"}},"filled-danger":{textTransform:"uppercase",color:"danger.contrast",backgroundColor:"danger.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"danger.hover"},":active":{backgroundColor:"danger.active"},":disabled":{color:"text",backgroundColor:"muted.2"}},"subtle-danger":{textTransform:"uppercase",backgroundColor:"danger.washed.0",color:"danger.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"danger.washed.1",color:"danger.hover"},":active":{backgroundColor:"danger.washed.2",color:"danger.active"},":disabled":{color:"muted.1",backgroundColor:"muted.4"}},"text-danger":{textTransform:"capitalize",backgroundColor:"transparent",color:"danger.base",fontVariationSettings:"'wght' 92",":hover":{color:"danger.hover",backgroundColor:"danger.washed.1"},":active":{color:"danger.active",backgroundColor:"danger.washed.2"},":disabled":{color:"muted.1"}}},c={border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},h=i({},Object.keys(g).reduce((function(e,r){return i({},e,Object.keys(s).reduce((function(e,o){var t;return i({},e,((t={})[r+"-"+o]=i({},c,g[r],s[o]),t))}),[]))}),{})),b={border:"solid",borderWidth:1,borderColor:"muted.3"},u={horizontal:i({},b,{marginY:4,borderBottom:0}),vertical:i({},b,{marginX:4,borderLeft:0})},m={padding:0,border:"none",borderRadius:3,cursor:"pointer",position:"relative",color:"currentColor",backgroundColor:"transparent",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},marginLeft:"1"},p={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"text",border:"none","> svg:nth-of-type(1)":{marginRight:1}},f={blue:{bg:"basic.blue"},green:{bg:"basic.green"},red:{bg:"basic.red"},black:{bg:"basic.black",color:"background"},yellow:{bg:"basic.yellow"},purple:{bg:"basic.purple"}},w={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}}},y=i({},Object.keys(f).reduce((function(e,r){return i({},e,Object.keys(w).reduce((function(e,o){var t;return i({},e,((t={})[r+"-"+o]=i({},p,f[r],w[o]),t))}),[]))}),{}),{"default-button":i({},m,{"&:hover":{backgroundColor:r.rgba(a.text,.1)},"&:active":{backgroundColor:r.rgba(a.text,.13)}}),"black-button":i({},m,{"&:hover":{backgroundColor:r.rgba(a.background,.1)},"&:active":{backgroundColor:r.rgba(a.background,.13)}})}),x={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.3",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"background",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"muted.0",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3"}},v={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(x,{cell:{height:80}}),compact:o.merge(x,{cell:{height:48}}),variable:o.merge(x,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},C={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3",justifyContent:"flex-start"},k={compact:i({},C,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:i({},C,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:i({},C,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},S={fontVariationSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"text",display:"flex",alignItems:"center"}},F={"horizontal-regular":i({},S,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":i({},S,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":i({},S,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":i({},S,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},W={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"muted.2",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.active",backgroundColor:"primary.active"}},":disabled":{cursor:"not-allowed",backgroundColor:"muted.3",borderColor:"muted.1",":after":{backgroundColor:"muted.1"}},":hover":{borderColor:"text"},":active":{borderColor:"muted.0",backgroundColor:"primary.washed.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},R={regular:o.merge(W,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:o.merge(W,{height:16,width:16,padding:1,":after":{width:6,height:6}})},z={appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"muted.1",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.active",borderColor:"primary.active"}},"&:indeterminate":{backgroundColor:"primary.washed.0",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.2",borderColor:"muted.1",color:"muted.1"},"&:hover":{borderColor:"primary.hover",color:"primary.hover",bg:"primary.washed.1"},"&:active":{borderColor:"primary.active",color:"primary.active"}},"&:disabled":{backgroundColor:"muted.2",borderColor:"muted.1",color:"muted.1"},"&:hover":{borderColor:"text"},"&:active":{backgroundColor:"primary.washed.0",borderColor:"muted.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},H={regular:i({},z,{height:20,width:20,minWidth:20,minHeight:20}),small:i({},z,{height:16,width:16,minWidth:16,minHeight:16})},E={appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"muted.1",borderStyle:"solid",borderColor:"muted.1",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"success.contrast",transition:"transform .25s ease"},"&:checked":{backgroundColor:"success.base",borderColor:"success.base","&:hover":{backgroundColor:"success.hover",borderColor:"success.hover"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.1","&:after":{backgroundColor:"muted.2"}}},"&:hover":{backgroundColor:"muted.0",borderColor:"muted.0"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.1","&:after":{backgroundColor:"muted.2"}},":not(:checked):active":{backgroundColor:"muted.0",borderColor:"muted.0",":after":{backgroundColor:"primary.washed.0"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},B={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)"}}})},L={fontVariationSettings:'"wght" 92',width:"full",height:48,paddingX:4,borderStyle:"solid",borderWidth:1,borderColor:"muted.3",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text",outline:0,transition:"snap",":hover":{borderColor:"muted.2"},":focus":{borderColor:"primary.base",boxShadow:"inset 0 0 0 1px "+a.primary.base}},T={display:"flex",flexDirection:"column",bg:"background",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"muted.2",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"muted.2",width:"calc(100% -"+d[3]+")",marginX:"-"+d[3],outline:"none"},"> button":{marginY:"2px",paddingX:1,color:"text",fontSize:1,border:"none",textTransform:"initial",":focus":{bg:"primary.washed.0",outline:"none",boxShadow:"none"},":hover":{color:"text"},width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}}},V={outline:"none",bg:"background",borderRadius:3,borderColor:"muted.3",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)"}},j={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.3",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},D={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.3",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]}},I={pt:4,px:6,pb:6},A=i({},I,{scrollbarWidth:"thin",scrollbarColor:"background","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"muted.3",borderRadius:"6px",border:"2px solid",color:"background"}},{overflowY:"auto"}),X={backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:r.rgba(a.text,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":i({},V,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":i({},V,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":i({},V,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":i({},j,{height:56}),"header-regular":i({},j,{height:56}),"header-large":i({},j,{height:80}),"content-with-small-scroll-area":i({},A,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":i({},A,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":i({},A,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":i({},A,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":i({},A,{height:"calc(100% - 10rem)"}),content:i({},I),"footer-small":i({},D,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":i({},D,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":i({},D,{borderTopWidth:1,minHeight:"5rem"})};function q(){var e=n(["\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n"]);return q=function(){return e},e}var O={display:"inline-block",width:"full",height:"full",backgroundColor:"muted.4",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n 90deg,\n "+a.muted[4]+",\n white,\n "+a.muted[4]+"\n )",animation:o.keyframes(q())+" 1.2s ease-in-out infinite"},M={rect:i({},O,{borderRadius:"default"}),circle:i({},O,{borderRadius:"circle"})},Y={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},P={base:i({},Y,{bg:"text",color:"background"}),primary:i({},Y,{bg:"primary.base",color:"primary.contrast"}),danger:i({},Y,{bg:"danger.base",color:"danger.contrast"})},G={display:"flex",alignItems:"center",justifyContent:"space-between",height:56,paddingY:3,paddingLeft:4,paddingRight:3,borderRadius:"default",opacity:0,zIndex:999,transform:"translate3d(0, -10px, 0)",visibility:"hidden",transition:"pop"},_={opacity:1,visibility:"visible",transform:"translate3d(0, 0, 0)"},K=i({},G,{bg:"danger.washed.0"}),J=i({},G,{bg:"success.washed.0"}),N=i({},G,{bg:"warning.washed.0"}),Q={button:h,list:k,table:v,controlGroup:F,toggle:B,checkbox:H,radio:R,input:L,textField:{display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column",input:{paddingTop:4},label:{fontSize:1,paddingX:4,paddingTop:2,color:"muted.0",marginBottom:3,pointerEvents:"none",position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"},":focus-within > label":{transform:"translate(4px, 4px) scale(0.875)",color:"primary.base"},"input:placeholder-shown:not(:focus) + label":{paddingTop:1},"input:active + label":{transform:"translate(4px, 4px) scale(0.875)"},"input:not(:placeholder-shown) + label":{transform:"translate(4px, 4px) scale(0.875)"}},tooltip:{backgroundColor:"text",color:"background",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32},menu:T,modal:X,skeleton:M,divider:u,collapsible:{container:{bg:"background",borderColor:"muted.3",borderStyle:"solid",borderWidth:1,borderRadius:3},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:3,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6}},avatar:P,tag:y,alert:{error:K,"error-visible":i({},K,_),success:J,"success-visible":i({},J,_),warning:N,"warning-visible":i({},N,_)}},U={borderWidth:"1px",borderStyle:"solid",borderRadius:"default"},Z={palette:{base:{bg:"background",color:"text"},inverted:{bg:"text",color:"background"},primary:{bg:"primary.base",color:"primary.contrast"},"primary-washed":{bg:"primary.washed.0",color:"primary.base"},danger:{bg:"danger.base",color:"danger.contrast"},"danger-washed":{bg:"danger.washed.0",color:"danger.base"},success:{bg:"success.base",color:"success.contrast"},"success-washed":{bg:"success.washed.0",color:"success.base"},warning:{bg:"warning.base",color:"warning.contrast"},"warning-washed":{bg:"warning.washed.0",color:"warning.base"}},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:i({},U,{borderColor:"muted.3"}),"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"muted.3"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"muted.3"},strong:i({},U,{borderColor:"text"}),disabled:i({},U,{borderColor:"muted.2"}),primary:i({},U,{borderColor:"primary.base"}),danger:i({},U,{borderColor:"danger.base"})}},$=Object.keys(Z),ee=i({},l,{components:Q,patterns:Z});function re(){var e=n(["\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 body: {\n margin: 0;\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 ::before,\n ::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\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 /* 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 body {\n line-height: 1;\n }\n blockquote,\n q {\n quotes: none;\n }\n blockquote:before,\n blockquote:after,\n q:before,\n q:after {\n content: '';\n content: none;\n }\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n "]);return re=function(){return e},e}exports.Preflight=function(){return t.createElement(o.Global,{styles:o.css(re())})},exports.patternKeys=$,exports.theme=ee; | ||
"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 i(){return(i=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 n(e,r){return r||(r=e.slice(0)),e.raw=r,e}var a={text:"#323845",background:"#FFFFFF",muted:["#707685","#898F9E","#C4C5CA","#E0E2E7","#F4F6FB"],focus:"#8DB6FA",emphasis:"#F71963",primary:{base:"#2953B2",hover:"#1E4397",active:"#3F6FDB",contrast:"#FFFFFF",washed:["#DAE3F5","#E8F1FF","#DBE9FF"]},danger:{base:"#CE454F",hover:"#A70C0C",active:"#DE0404",contrast:"#FFFFFF",washed:["#FEE3E3","#FFE3E3","#FFD0D0"]},warning:{base:"#FFBA52",hover:"#E6A30A",active:"#EFA906",contrast:"#FFFFFF",washed:["#FDE6C0"]},success:{base:"#368369",hover:"#005C31",active:"#26AE6E",contrast:"#FFFFFF",washed:["#D6EFE5"]},basic:{blue:"#DAE3F5",purple:"#F4EFFF",yellow:"#FDE6C0",green:"#CCECE3",red:"#FEE3E3",black:"#323845"}},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:a,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"]+" "+a.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}}},g={"filled-primary":{textTransform:"uppercase",color:"primary.contrast",backgroundColor:"primary.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"primary.hover"},":active":{backgroundColor:"primary.active"},":disabled":{color:"text",backgroundColor:"muted.2"}},"subtle-primary":{textTransform:"uppercase",backgroundColor:"primary.washed.0",color:"primary.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"primary.washed.1",color:"primary.hover"},":active":{backgroundColor:"primary.washed.2",color:"primary.active"},":disabled":{color:"muted.1",backgroundColor:"muted.4"}},"text-primary":{textTransform:"capitalize",backgroundColor:"transparent",color:"primary.base",fontVariationSettings:"'wght' 92",":hover":{color:"primary.hover",backgroundColor:"primary.washed.1"},":active":{color:"primary.active",backgroundColor:"primary.washed.2"},":disabled":{color:"muted.1"}},"filled-danger":{textTransform:"uppercase",color:"danger.contrast",backgroundColor:"danger.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"danger.hover"},":active":{backgroundColor:"danger.active"},":disabled":{color:"text",backgroundColor:"muted.2"}},"subtle-danger":{textTransform:"uppercase",backgroundColor:"danger.washed.0",color:"danger.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"danger.washed.1",color:"danger.hover"},":active":{backgroundColor:"danger.washed.2",color:"danger.active"},":disabled":{color:"muted.1",backgroundColor:"muted.4"}},"text-danger":{textTransform:"capitalize",backgroundColor:"transparent",color:"danger.base",fontVariationSettings:"'wght' 92",":hover":{color:"danger.hover",backgroundColor:"danger.washed.1"},":active":{color:"danger.active",backgroundColor:"danger.washed.2"},":disabled":{color:"muted.1"}}},c={border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},h=i({},Object.keys(g).reduce((function(e,r){return i({},e,Object.keys(s).reduce((function(e,o){var t;return i({},e,((t={})[r+"-"+o]=i({},c,g[r],s[o]),t))}),[]))}),{})),b={border:"solid",borderWidth:1,borderColor:"muted.3"},u={horizontal:i({},b,{marginY:4,borderBottom:0}),vertical:i({},b,{marginX:4,borderLeft:0})},m={padding:0,border:"none",borderRadius:3,cursor:"pointer",position:"relative",color:"currentColor",backgroundColor:"transparent",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},marginLeft:"1"},p={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"text",border:"none","> svg:nth-of-type(1)":{marginRight:1}},f={blue:{bg:"basic.blue"},green:{bg:"basic.green"},red:{bg:"basic.red"},black:{bg:"basic.black",color:"background"},yellow:{bg:"basic.yellow"},purple:{bg:"basic.purple"}},x={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}}},w=i({},Object.keys(f).reduce((function(e,r){return i({},e,Object.keys(x).reduce((function(e,o){var t;return i({},e,((t={})[r+"-"+o]=i({},p,f[r],x[o]),t))}),[]))}),{}),{"default-button":i({},m,{"&:hover":{backgroundColor:r.rgba(a.text,.1)},"&:active":{backgroundColor:r.rgba(a.text,.13)}}),"black-button":i({},m,{"&:hover":{backgroundColor:r.rgba(a.background,.1)},"&:active":{backgroundColor:r.rgba(a.background,.13)}})}),y={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.3",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"background",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"muted.0",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3"}},v={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(y,{cell:{height:80}}),compact:o.merge(y,{cell:{height:48}}),variable:o.merge(y,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},C={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3",justifyContent:"flex-start"},k={compact:i({},C,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:i({},C,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:i({},C,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},S={fontVariationSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"text",display:"flex",alignItems:"center"}},F={"horizontal-regular":i({},S,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":i({},S,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":i({},S,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":i({},S,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},R={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"muted.2",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.active",backgroundColor:"primary.active"}},":disabled":{cursor:"not-allowed",backgroundColor:"muted.3",borderColor:"muted.1",":after":{backgroundColor:"muted.1"}},":hover":{borderColor:"text"},":active":{borderColor:"muted.0",backgroundColor:"primary.washed.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},W={regular:o.merge(R,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:o.merge(R,{height:16,width:16,padding:1,":after":{width:6,height:6}})},H={appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"muted.1",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.active",borderColor:"primary.active"}},"&:indeterminate":{backgroundColor:"primary.washed.0",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.2",borderColor:"muted.1",color:"muted.1"},"&:hover":{borderColor:"primary.hover",color:"primary.hover",bg:"primary.washed.1"},"&:active":{borderColor:"primary.active",color:"primary.active"}},"&:disabled":{backgroundColor:"muted.2",borderColor:"muted.1",color:"muted.1"},"&:hover":{borderColor:"text"},"&:active":{backgroundColor:"primary.washed.0",borderColor:"muted.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},z={regular:i({},H,{height:20,width:20,minWidth:20,minHeight:20}),small:i({},H,{height:16,width:16,minWidth:16,minHeight:16})},L={appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"muted.1",borderStyle:"solid",borderColor:"muted.1",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"success.contrast",transition:"transform .25s ease"},"&:checked":{backgroundColor:"success.base",borderColor:"success.base","&:hover":{backgroundColor:"success.hover",borderColor:"success.hover"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.1","&:after":{backgroundColor:"muted.2"}}},"&:hover":{backgroundColor:"muted.0",borderColor:"muted.0"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.1","&:after":{backgroundColor:"muted.2"}},":not(:checked):active":{backgroundColor:"muted.0",borderColor:"muted.0",":after":{backgroundColor:"primary.washed.0"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},E={regular:o.merge(L,{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}}),small:o.merge(L,{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}})},B={fontVariationSettings:'"wght" 92',width:"full",height:48,borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"muted.3",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text",outline:0,transition:"snap",":hover":{borderColor:"text"},":focus":{borderColor:"primary.base",boxShadow:"0 0 0 1px "+a.primary.base},":disabled":{bg:"muted.4",borderColor:"muted.1",color:"muted.1"},":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)"}},T={color:"muted.1",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"},"> div":{display:"flex",height:"full",width:"full",margin:"auto",alignItems:"center",justifyContent:"center"}},V={color:"muted.1",top:1,left:0,paddingX:3,paddingTop:"14px",position:"absolute",width:44,height:48,svg:{height:20,width:20,minWidth:20,minHeight:20}},D={color:"muted.1",borderLeftStyle:"solid",borderLeftWidth:"1px",borderLeftColor:"muted.3",paddingTop:"14px",marginTop:"px",width:"32px",paddingLeft:3,lineHeight:"body",fontVariationSettings:"regular",fontSize:1},j={default:i({},B),"with-icon":i({},B,{paddingLeft:"44px"}),"with-suffix":i({},B,{paddingRight:"64px"}),"with-clear":i({},B,{paddingRight:"44px"}),"with-icon-clear":i({},B,{paddingLeft:"44px",paddingRight:"44px"}),"with-icon-suffix":i({},B,{paddingRight:"64px",paddingLeft:"44px"}),"with-suffix-clear":i({},B,{paddingRight:"75px"}),"with-icon-suffix-clear":i({},B,{paddingLeft:"44px",paddingRight:"75px"})},A={position:"relative"},I=i({container:i({},A),"container-with-icon":i({},A,{label:{left:"44px"}}),"icon-style":i({},V),"suffix-style":i({},D),"clear-button-style":i({},T)},j),X={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column"},q={input:{borderColor:"danger.base",":focus":{borderColor:"danger.base",boxShadow:"0 0 0 1px "+a.danger.base},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"danger.base"},":hover":{borderColor:"danger.hover"}},label:{color:"danger.base"}},O={default:i({},X),error:i({},X,q)},M={display:"flex",flexDirection:"column",bg:"background",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"muted.2",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"muted.2",width:"calc(100% -"+d[3]+")",marginX:"-"+d[3],outline:"none"},"> button":{marginY:"2px",paddingX:1,color:"text",fontSize:1,border:"none",textTransform:"initial",":focus":{bg:"primary.washed.0",outline:"none",boxShadow:"none"},":hover":{color:"text"},width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}}},Y={outline:"none",bg:"background",borderRadius:3,borderColor:"muted.3",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)"}},P={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.3",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},G={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.3",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]}},_={pt:4,px:6,pb:6},K=i({},_,{scrollbarWidth:"thin",scrollbarColor:"background","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"muted.3",borderRadius:"6px",border:"2px solid",color:"background"}},{overflowY:"auto"}),J={backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:r.rgba(a.text,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":i({},Y,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":i({},Y,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":i({},Y,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":i({},P,{height:56}),"header-regular":i({},P,{height:56}),"header-large":i({},P,{height:80}),"content-with-small-scroll-area":i({},K,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":i({},K,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":i({},K,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":i({},K,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":i({},K,{height:"calc(100% - 10rem)"}),content:i({},_),"footer-small":i({},G,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":i({},G,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":i({},G,{borderTopWidth:1,minHeight:"5rem"})};function N(){var e=n(["\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n"]);return N=function(){return e},e}var Q={display:"inline-block",width:"full",height:"full",backgroundColor:"muted.4",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n 90deg,\n "+a.muted[4]+",\n white,\n "+a.muted[4]+"\n )",animation:o.keyframes(N())+" 1.2s ease-in-out infinite"},U={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},Z={button:h,list:k,table:v,controlGroup:F,toggle:E,checkbox:z,radio:W,input:I,textField:O,tooltip:{backgroundColor:"text",color:"background",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32},menu:M,modal:J,skeleton:{rect:i({},Q,{borderRadius:"default"}),circle:i({},Q,{borderRadius:"circle"})},divider:u,collapsible:{container:{bg:"background",borderColor:"muted.3",borderStyle:"solid",borderWidth:1,borderRadius:3},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:3,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6}},avatar:{base:i({},U,{bg:"text",color:"background"}),primary:i({},U,{bg:"primary.base",color:"primary.contrast"}),danger:i({},U,{bg:"danger.base",color:"danger.contrast"})},tag:w,anchor:{font:"inherit",color:"primary.base",textDecoration:"none",":active":{color:"primary.active",textDecoration:"underline"},":hover":{color:"primary.hover",textDecoration:"underline"}}},$={borderWidth:"1px",borderStyle:"solid",borderRadius:"default"},ee={palette:{base:{bg:"background",color:"text"},inverted:{bg:"text",color:"background"},primary:{bg:"primary.base",color:"primary.contrast"},"primary-washed":{bg:"primary.washed.0",color:"primary.base"},danger:{bg:"danger.base",color:"danger.contrast"},"danger-washed":{bg:"danger.washed.0",color:"danger.base"},success:{bg:"success.base",color:"success.contrast"},"success-washed":{bg:"success.washed.0",color:"success.base"},warning:{bg:"warning.base",color:"warning.contrast"},"warning-washed":{bg:"warning.washed.0",color:"warning.base"}},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:i({},$,{borderColor:"muted.3"}),"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"muted.3"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"muted.3"},strong:i({},$,{borderColor:"text"}),disabled:i({},$,{borderColor:"muted.2"}),primary:i({},$,{borderColor:"primary.base"}),danger:i({},$,{borderColor:"danger.base"})}},re=Object.keys(ee),oe=i({},l,{components:Z,patterns:ee});function te(){var e=n(["\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 body: {\n margin: 0;\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 ::before,\n ::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\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 /* 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 body {\n line-height: 1;\n }\n blockquote,\n q {\n quotes: none;\n }\n blockquote:before,\n blockquote:after,\n q:before,\n q:after {\n content: '';\n content: none;\n }\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n "]);return te=function(){return e},e}exports.Preflight=function(){return t.createElement(o.Global,{styles:o.css(te())})},exports.patternKeys=re,exports.theme=oe; | ||
//# sourceMappingURL=admin-ui-theme.cjs.production.min.js.map |
@@ -547,2 +547,16 @@ import { rgba } from 'polished'; | ||
var anchor = { | ||
font: 'inherit', | ||
color: 'primary.base', | ||
textDecoration: 'none', | ||
':active': { | ||
color: 'primary.active', | ||
textDecoration: 'underline' | ||
}, | ||
':hover': { | ||
color: 'primary.hover', | ||
textDecoration: 'underline' | ||
} | ||
}; | ||
var styles$3 = { | ||
@@ -1013,9 +1027,10 @@ table: { | ||
var input = { | ||
var inputStyle = { | ||
fontVariationSettings: '"wght" 92', | ||
width: 'full', | ||
height: 48, | ||
paddingX: 4, | ||
borderStyle: 'solid', | ||
borderWidth: 1, | ||
paddingLeft: 3, | ||
paddingRight: 4, | ||
borderColor: 'muted.3', | ||
@@ -1030,44 +1045,158 @@ borderRadius: 'default', | ||
':hover': { | ||
borderColor: 'muted.2' | ||
borderColor: 'text' | ||
}, | ||
':focus': { | ||
borderColor: 'primary.base', | ||
boxShadow: "inset 0 0 0 1px " + colors.primary.base | ||
boxShadow: "0 0 0 1px " + colors.primary.base | ||
}, | ||
':disabled': { | ||
bg: 'muted.4', | ||
borderColor: 'muted.1', | ||
color: 'muted.1' | ||
}, | ||
// Label styles | ||
':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)' | ||
} | ||
}; | ||
var clearButtonStyle = { | ||
color: 'muted.1', | ||
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' | ||
}, | ||
'> div': { | ||
display: 'flex', | ||
height: 'full', | ||
width: 'full', | ||
margin: 'auto', | ||
alignItems: 'center', | ||
justifyContent: 'center' | ||
} | ||
}; | ||
var iconStyle = { | ||
color: 'muted.1', | ||
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.1', | ||
borderLeftStyle: 'solid', | ||
borderLeftWidth: '1px', | ||
borderLeftColor: 'muted.3', | ||
paddingTop: '14px', | ||
marginTop: 'px', | ||
width: '32px', | ||
paddingLeft: 3, | ||
lineHeight: 'body', | ||
fontVariationSettings: 'regular', | ||
fontSize: 1 | ||
}; | ||
var inputVariants = { | ||
"default": /*#__PURE__*/_extends({}, inputStyle), | ||
'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) | ||
}, inputVariants); | ||
var textField = { | ||
var styles$7 = { | ||
display: 'flex', | ||
position: 'relative', | ||
justifyContent: 'flex-start', | ||
flexDirection: 'column', | ||
flexDirection: 'column' | ||
}; | ||
var error = { | ||
input: { | ||
paddingTop: 4 | ||
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: { | ||
fontSize: 1, | ||
paddingX: 4, | ||
paddingTop: 2, | ||
color: 'muted.0', | ||
marginBottom: 3, | ||
pointerEvents: 'none', | ||
position: 'absolute', | ||
transform: 'translate(0, 16px) scale(1)', | ||
transformOrigin: 'top left', | ||
transition: 'all 0.2s ease-out;' | ||
}, | ||
':focus-within > label': { | ||
transform: 'translate(4px, 4px) scale(0.875)', | ||
color: 'primary.base' | ||
}, | ||
'input:placeholder-shown:not(:focus) + label': { | ||
paddingTop: 1 | ||
}, | ||
'input:active + label': { | ||
transform: 'translate(4px, 4px) scale(0.875)' | ||
}, | ||
'input:not(:placeholder-shown) + label': { | ||
transform: 'translate(4px, 4px) scale(0.875)' | ||
color: 'danger.base' | ||
} | ||
}; | ||
var textField = { | ||
"default": /*#__PURE__*/_extends({}, styles$7), | ||
error: /*#__PURE__*/_extends({}, styles$7, error) | ||
}; | ||
@@ -1310,3 +1439,3 @@ var tooltip = { | ||
var load = /*#__PURE__*/keyframes( /*#__PURE__*/_templateObject()); | ||
var styles$7 = { | ||
var styles$8 = { | ||
display: 'inline-block', | ||
@@ -1324,6 +1453,6 @@ width: 'full', | ||
var skeleton = { | ||
rect: /*#__PURE__*/_extends({}, styles$7, { | ||
rect: /*#__PURE__*/_extends({}, styles$8, { | ||
borderRadius: 'default' | ||
}), | ||
circle: /*#__PURE__*/_extends({}, styles$7, { | ||
circle: /*#__PURE__*/_extends({}, styles$8, { | ||
borderRadius: 'circle' | ||
@@ -1357,3 +1486,3 @@ }) | ||
var styles$8 = { | ||
var styles$9 = { | ||
display: 'flex', | ||
@@ -1369,11 +1498,11 @@ alignItems: 'center', | ||
var avatar = { | ||
base: /*#__PURE__*/_extends({}, styles$8, { | ||
base: /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'text', | ||
color: 'background' | ||
}), | ||
primary: /*#__PURE__*/_extends({}, styles$8, { | ||
primary: /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'primary.base', | ||
color: 'primary.contrast' | ||
}), | ||
danger: /*#__PURE__*/_extends({}, styles$8, { | ||
danger: /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'danger.base', | ||
@@ -1384,44 +1513,2 @@ color: 'danger.contrast' | ||
var styles$9 = { | ||
display: 'flex', | ||
alignItems: 'center', | ||
justifyContent: 'space-between', | ||
height: 56, | ||
paddingY: 3, | ||
paddingLeft: 4, | ||
paddingRight: 3, | ||
borderRadius: 'default', | ||
opacity: 0, | ||
zIndex: 999, | ||
transform: 'translate3d(0, -10px, 0)', | ||
visibility: 'hidden', | ||
transition: 'pop' | ||
}; | ||
var visible = { | ||
opacity: 1, | ||
visibility: 'visible', | ||
transform: 'translate3d(0, 0, 0)' | ||
}; | ||
var error = /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'danger.washed.0' | ||
}); | ||
var success = /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'success.washed.0' | ||
}); | ||
var warning = /*#__PURE__*/_extends({}, styles$9, { | ||
bg: 'warning.washed.0' | ||
}); | ||
var alert = { | ||
error: error, | ||
'error-visible': /*#__PURE__*/_extends({}, error, visible), | ||
success: success, | ||
'success-visible': /*#__PURE__*/_extends({}, success, visible), | ||
warning: warning, | ||
'warning-visible': /*#__PURE__*/_extends({}, warning, visible) | ||
}; | ||
// elements | ||
@@ -1446,3 +1533,3 @@ var components = { | ||
tag: tag, | ||
alert: alert | ||
anchor: anchor | ||
}; | ||
@@ -1449,0 +1536,0 @@ |
@@ -381,58 +381,438 @@ declare const _default: { | ||
input: { | ||
fontVariationSettings: string; | ||
width: string; | ||
height: number; | ||
paddingX: number; | ||
borderStyle: string; | ||
borderWidth: number; | ||
borderColor: string; | ||
borderRadius: string; | ||
bg: string; | ||
marginY: number; | ||
fontSize: number; | ||
color: string; | ||
outline: number; | ||
transition: string; | ||
':hover': { | ||
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; | ||
}; | ||
}; | ||
':focus': { | ||
'with-icon': { | ||
paddingLeft: string; | ||
fontVariationSettings: string; | ||
width: string; | ||
height: number; | ||
borderStyle: string; | ||
borderWidth: number; | ||
paddingRight: number; | ||
borderColor: string; | ||
boxShadow: 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; | ||
}; | ||
}; | ||
}; | ||
textField: { | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
input: { | ||
paddingTop: number; | ||
'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; | ||
}; | ||
}; | ||
label: { | ||
'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; | ||
paddingX: number; | ||
paddingTop: number; | ||
color: string; | ||
marginBottom: number; | ||
pointerEvents: string; | ||
position: string; | ||
transform: string; | ||
transformOrigin: 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; | ||
}; | ||
}; | ||
':focus-within > 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; | ||
}; | ||
}; | ||
'input:placeholder-shown:not(:focus) + label': { | ||
paddingTop: number; | ||
'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; | ||
}; | ||
}; | ||
'input:active + 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; | ||
}; | ||
}; | ||
'input: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: { | ||
position: string; | ||
}; | ||
'container-with-icon': { | ||
label: { | ||
left: string; | ||
}; | ||
position: string; | ||
}; | ||
'icon-style': { | ||
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; | ||
borderLeftWidth: string; | ||
borderLeftColor: string; | ||
paddingTop: string; | ||
marginTop: string; | ||
width: string; | ||
paddingLeft: number; | ||
lineHeight: string; | ||
fontVariationSettings: string; | ||
fontSize: 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; | ||
}; | ||
}; | ||
}; | ||
textField: { | ||
default: { | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
}; | ||
error: { | ||
input: { | ||
borderColor: string; | ||
':focus': { | ||
borderColor: string; | ||
boxShadow: string; | ||
}; | ||
':focus + label': { | ||
transform: string; | ||
color: string; | ||
}; | ||
':hover': { | ||
borderColor: string; | ||
}; | ||
}; | ||
label: { | ||
color: string; | ||
}; | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
}; | ||
}; | ||
tooltip: { | ||
@@ -988,38 +1368,16 @@ backgroundColor: string; | ||
}; | ||
alert: { | ||
error: { | ||
bg: string; | ||
display: string; | ||
alignItems: string; | ||
justifyContent: string; | ||
height: number; | ||
paddingY: number; | ||
paddingLeft: number; | ||
paddingRight: number; | ||
borderRadius: string; | ||
anchor: { | ||
font: string; | ||
color: string; | ||
textDecoration: string; | ||
':active': { | ||
color: string; | ||
textDecoration: string; | ||
}; | ||
success: { | ||
bg: string; | ||
display: string; | ||
alignItems: string; | ||
justifyContent: string; | ||
height: number; | ||
paddingY: number; | ||
paddingLeft: number; | ||
paddingRight: number; | ||
borderRadius: string; | ||
':hover': { | ||
color: string; | ||
textDecoration: string; | ||
}; | ||
warning: { | ||
bg: string; | ||
display: string; | ||
alignItems: string; | ||
justifyContent: string; | ||
height: number; | ||
paddingY: number; | ||
paddingLeft: number; | ||
paddingRight: number; | ||
borderRadius: string; | ||
}; | ||
}; | ||
}; | ||
export default _default; |
declare const _default: { | ||
fontVariationSettings: string; | ||
width: string; | ||
height: number; | ||
paddingX: number; | ||
borderStyle: string; | ||
borderWidth: number; | ||
borderColor: string; | ||
borderRadius: string; | ||
bg: string; | ||
marginY: number; | ||
fontSize: number; | ||
color: string; | ||
outline: number; | ||
transition: string; | ||
':hover': { | ||
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; | ||
}; | ||
}; | ||
':focus': { | ||
'with-icon': { | ||
paddingLeft: string; | ||
fontVariationSettings: string; | ||
width: string; | ||
height: number; | ||
borderStyle: string; | ||
borderWidth: number; | ||
paddingRight: number; | ||
borderColor: string; | ||
boxShadow: 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: { | ||
position: string; | ||
}; | ||
'container-with-icon': { | ||
label: { | ||
left: string; | ||
}; | ||
position: string; | ||
}; | ||
'icon-style': { | ||
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; | ||
borderLeftWidth: string; | ||
borderLeftColor: string; | ||
paddingTop: string; | ||
marginTop: string; | ||
width: string; | ||
paddingLeft: number; | ||
lineHeight: string; | ||
fontVariationSettings: string; | ||
fontSize: 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; | ||
}; | ||
}; | ||
}; | ||
export default _default; |
declare const _default: { | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
input: { | ||
paddingTop: number; | ||
default: { | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
}; | ||
label: { | ||
fontSize: number; | ||
paddingX: number; | ||
paddingTop: number; | ||
color: string; | ||
marginBottom: number; | ||
pointerEvents: string; | ||
error: { | ||
input: { | ||
borderColor: string; | ||
':focus': { | ||
borderColor: string; | ||
boxShadow: string; | ||
}; | ||
':focus + label': { | ||
transform: string; | ||
color: string; | ||
}; | ||
':hover': { | ||
borderColor: string; | ||
}; | ||
}; | ||
label: { | ||
color: string; | ||
}; | ||
display: string; | ||
position: string; | ||
transform: string; | ||
transformOrigin: string; | ||
transition: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
}; | ||
':focus-within > label': { | ||
transform: string; | ||
color: string; | ||
}; | ||
'input:placeholder-shown:not(:focus) + label': { | ||
paddingTop: number; | ||
}; | ||
'input:active + label': { | ||
transform: string; | ||
}; | ||
'input:not(:placeholder-shown) + label': { | ||
transform: string; | ||
}; | ||
}; | ||
export default _default; |
@@ -384,58 +384,438 @@ export * from './patterns'; | ||
input: { | ||
fontVariationSettings: string; | ||
width: string; | ||
height: number; | ||
paddingX: number; | ||
borderStyle: string; | ||
borderWidth: number; | ||
borderColor: string; | ||
borderRadius: string; | ||
bg: string; | ||
marginY: number; | ||
fontSize: number; | ||
color: string; | ||
outline: number; | ||
transition: string; | ||
':hover': { | ||
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; | ||
}; | ||
}; | ||
':focus': { | ||
'with-icon': { | ||
paddingLeft: string; | ||
fontVariationSettings: string; | ||
width: string; | ||
height: number; | ||
borderStyle: string; | ||
borderWidth: number; | ||
paddingRight: number; | ||
borderColor: string; | ||
boxShadow: 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; | ||
}; | ||
}; | ||
}; | ||
textField: { | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
input: { | ||
paddingTop: number; | ||
'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; | ||
}; | ||
}; | ||
label: { | ||
'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; | ||
paddingX: number; | ||
paddingTop: number; | ||
color: string; | ||
marginBottom: number; | ||
pointerEvents: string; | ||
position: string; | ||
transform: string; | ||
transformOrigin: 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; | ||
}; | ||
}; | ||
':focus-within > 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; | ||
}; | ||
}; | ||
'input:placeholder-shown:not(:focus) + label': { | ||
paddingTop: number; | ||
'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; | ||
}; | ||
}; | ||
'input:active + 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; | ||
}; | ||
}; | ||
'input: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: { | ||
position: string; | ||
}; | ||
'container-with-icon': { | ||
label: { | ||
left: string; | ||
}; | ||
position: string; | ||
}; | ||
'icon-style': { | ||
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; | ||
borderLeftWidth: string; | ||
borderLeftColor: string; | ||
paddingTop: string; | ||
marginTop: string; | ||
width: string; | ||
paddingLeft: number; | ||
lineHeight: string; | ||
fontVariationSettings: string; | ||
fontSize: 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; | ||
}; | ||
}; | ||
}; | ||
textField: { | ||
default: { | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
}; | ||
error: { | ||
input: { | ||
borderColor: string; | ||
':focus': { | ||
borderColor: string; | ||
boxShadow: string; | ||
}; | ||
':focus + label': { | ||
transform: string; | ||
color: string; | ||
}; | ||
':hover': { | ||
borderColor: string; | ||
}; | ||
}; | ||
label: { | ||
color: string; | ||
}; | ||
display: string; | ||
position: string; | ||
justifyContent: string; | ||
flexDirection: string; | ||
}; | ||
}; | ||
tooltip: { | ||
@@ -991,36 +1371,14 @@ backgroundColor: string; | ||
}; | ||
alert: { | ||
error: { | ||
bg: string; | ||
display: string; | ||
alignItems: string; | ||
justifyContent: string; | ||
height: number; | ||
paddingY: number; | ||
paddingLeft: number; | ||
paddingRight: number; | ||
borderRadius: string; | ||
anchor: { | ||
font: string; | ||
color: string; | ||
textDecoration: string; | ||
':active': { | ||
color: string; | ||
textDecoration: string; | ||
}; | ||
success: { | ||
bg: string; | ||
display: string; | ||
alignItems: string; | ||
justifyContent: string; | ||
height: number; | ||
paddingY: number; | ||
paddingLeft: number; | ||
paddingRight: number; | ||
borderRadius: string; | ||
':hover': { | ||
color: string; | ||
textDecoration: string; | ||
}; | ||
warning: { | ||
bg: string; | ||
display: string; | ||
alignItems: string; | ||
justifyContent: string; | ||
height: number; | ||
paddingY: number; | ||
paddingLeft: number; | ||
paddingRight: number; | ||
borderRadius: string; | ||
}; | ||
}; | ||
@@ -1027,0 +1385,0 @@ }; |
{ | ||
"name": "@vtex/admin-ui-theme", | ||
"version": "0.1.0-rc.1", | ||
"version": "0.1.0-rc.2", | ||
"main": "dist/index.js", | ||
@@ -41,3 +41,3 @@ "module": "dist/admin-ui-theme.esm.js", | ||
}, | ||
"gitHead": "9344ad58b2d36648065820894521c47f3079f36c" | ||
"gitHead": "506da81c22c00fbd248453e47cc0cebd3a3503b4" | ||
} |
@@ -5,2 +5,3 @@ // elements | ||
import tag from './tag' | ||
import anchor from './anchor' | ||
// data | ||
@@ -43,2 +44,3 @@ import table from './table' | ||
tag, | ||
anchor, | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
512316
75
10389