Socket
Socket
Sign inDemoInstall

@vtex/admin-ui-theme

Package Overview
Dependencies
Maintainers
65
Versions
102
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.1.0-alpha.4 to 0.1.0-rc.0

dist/config/components/alert.d.ts
dist/config/components/tag.d.ts
src/config/components/tag.ts

29

CHANGELOG.md

@@ -6,2 +6,31 @@ # Change Log

# 0.1.0-rc.0 (2020-11-04)
### Bug Fixes
* **breakpoints:** merge small mobile and mobile ([2418007](https://github.com/vtex/onda/commit/2418007442425cc2fed7362f5060ff010a31fa84))
* **colors:** update theme colors values ([d8d525a](https://github.com/vtex/onda/commit/d8d525a537007c27f75921fa116a43ece914f461))
* **text:** change from text to variant prop ([5aa42a9](https://github.com/vtex/onda/commit/5aa42a9562319e3aeb0bfe0581311b1739ee1c19))
* **unstable-table:** use table styles instead of flex ([7623036](https://github.com/vtex/onda/commit/7623036803e281cea3d884a655c8788d4875ad24))
### Features
* **box:** migrate box to new structure ([890f91f](https://github.com/vtex/onda/commit/890f91f7b3081fbd7f53d3576500211995956744))
* **columns:** add columns unstable component ([0bfb696](https://github.com/vtex/onda/commit/0bfb696866b296c44cf9feb0b9720e6dfbe5c590))
* **label:** migrate label to new structure ([0a5e0fe](https://github.com/vtex/onda/commit/0a5e0fea1ccea884de20f42f0271582658abce7e))
* **layout:** add set component ([f9e2890](https://github.com/vtex/onda/commit/f9e28907a14e675e5fdc935f8ebfe3cf15179f5f))
* **list:** add component ([ba9a91a](https://github.com/vtex/onda/commit/ba9a91a5647506e023de6a558d69d89b45721ccc))
* **modal:** migrate to new structure ([5165767](https://github.com/vtex/onda/commit/5165767fc5788fbccf811ad383a3f08a72aedf60))
* **patterns:** add border, palette, and text patterns ([4ebd4f7](https://github.com/vtex/onda/commit/4ebd4f75f87cf88c1a182e7795e558ab9616d186))
* **skeleton:** migrate to new structure ([a118507](https://github.com/vtex/onda/commit/a11850778379d4e3f5bb608878daf4d280b3934b))
* **style-props:** add space and size style-props ([a1c7154](https://github.com/vtex/onda/commit/a1c715425062829102452d86ad3fd2887178a30b))
* **tag:** add tag to admin-ui-theme ([75db8ef](https://github.com/vtex/onda/commit/75db8effb1be25d0f63de7590d5216cb02cea3a5))
* **unstable-table:** add table component ([41ba514](https://github.com/vtex/onda/commit/41ba5148e41de9dc430d3dff72e4d4a5afcdcb7c))
# [0.1.0-alpha.4](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.1.0-alpha.3...@vtex/admin-ui-theme@0.1.0-alpha.4) (2020-10-27)

@@ -8,0 +37,0 @@

316

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

@@ -7,4 +7,4 @@ 'use strict';

var polished = require('polished');
var adminUiSystem = require('@vtex/admin-ui-system');
var polished = require('polished');
var React = _interopDefault(require('react'));

@@ -442,3 +442,115 @@

var buttonStyles = {
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'
};
var styles$2 = {
display: 'inline-flex',
alignItems: 'center',
borderRadius: '100px',
color: 'text',
border: 'none',
'> svg:nth-of-type(1)': {
marginRight: 1
}
};
var palette = {
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'
}
};
var size$1 = {
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
}
}
};
var tag = /*#__PURE__*/_extends({}, /*#__PURE__*/Object.keys(palette).reduce(function mergeV(acc, p) {
return _extends({}, acc, Object.keys(size$1).reduce(function mergeS(bcc, s) {
var _extends2;
return _extends({}, bcc, (_extends2 = {}, _extends2[p + "-" + s] = _extends({}, styles$2, palette[p], size$1[s]), _extends2));
}, []));
}, {}), {
'default-button': /*#__PURE__*/_extends({}, buttonStyles, {
'&:hover': {
backgroundColor: /*#__PURE__*/polished.rgba(colors.text, 0.1)
},
'&:active': {
backgroundColor: /*#__PURE__*/polished.rgba(colors.text, 0.13)
}
}),
'black-button': /*#__PURE__*/_extends({}, buttonStyles, {
'&:hover': {
backgroundColor: /*#__PURE__*/polished.rgba(colors.background, 0.1)
},
'&:active': {
backgroundColor: /*#__PURE__*/polished.rgba(colors.background, 0.13)
}
})
});
var styles$3 = {
table: {

@@ -539,3 +651,3 @@ display: 'table',

},
regular: /*#__PURE__*/adminUiSystem.merge(styles$2, {
regular: /*#__PURE__*/adminUiSystem.merge(styles$3, {
cell: {

@@ -545,3 +657,3 @@ height: 80

}),
compact: /*#__PURE__*/adminUiSystem.merge(styles$2, {
compact: /*#__PURE__*/adminUiSystem.merge(styles$3, {
cell: {

@@ -551,3 +663,3 @@ height: 48

}),
variable: /*#__PURE__*/adminUiSystem.merge(styles$2, {
variable: /*#__PURE__*/adminUiSystem.merge(styles$3, {
cell: {

@@ -600,3 +712,3 @@ verticalAlign: 'top',

var styles$3 = {
var styles$4 = {
fontVariationSettings: 'regular',

@@ -620,3 +732,3 @@ lh: 'highlight',

var controlGroup = {
'horizontal-regular': /*#__PURE__*/_extends({}, styles$3, {
'horizontal-regular': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '2',

@@ -628,3 +740,3 @@ flexDirection: 'row',

}),
'horizontal-small': /*#__PURE__*/_extends({}, styles$3, {
'horizontal-small': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '1',

@@ -636,3 +748,3 @@ flexDirection: 'row',

}),
'vertical-regular': /*#__PURE__*/_extends({}, styles$3, {
'vertical-regular': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '2',

@@ -644,3 +756,3 @@ flexDirection: 'column',

}),
'vertical-small': /*#__PURE__*/_extends({}, styles$3, {
'vertical-small': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '1',

@@ -660,10 +772,10 @@ flexDirection: 'column',

borderStyle: 'solid',
borderWidth: '1',
borderWidth: '1px',
borderColor: 'muted.2',
backgroundColor: 'transparent',
borderRadius: '50%',
borderRadius: 'circle',
':after': {
content: '""',
display: 'block',
borderRadius: '50%',
borderRadius: 'circle',
backgroundColor: 'white',

@@ -711,24 +823,26 @@ opacity: 0

};
var regular = /*#__PURE__*/adminUiSystem.merge(style, {
height: 20,
width: 20,
padding: '5px',
':after': {
width: 8,
height: 8
}
});
var small = /*#__PURE__*/adminUiSystem.merge(style, {
height: 16,
width: 16,
padding: 1,
':after': {
width: 6,
height: 6
}
});
var radio = {
regular: /*#__PURE__*/adminUiSystem.merge(style, {
height: 20,
width: 20,
padding: '0.3125rem',
':after': {
width: 8,
height: 8
}
}),
small: /*#__PURE__*/adminUiSystem.merge(style, {
height: 16,
width: 16,
padding: 1,
':after': {
width: 6,
height: 6
}
})
regular: regular,
small: small
};
var styles$4 = {
var styles$5 = {
appearance: 'none',

@@ -814,3 +928,3 @@ borderStyle: 'solid',

var checkbox = {
regular: /*#__PURE__*/_extends({}, styles$4, {
regular: /*#__PURE__*/_extends({}, styles$5, {
height: 20,

@@ -821,3 +935,3 @@ width: 20,

}),
small: /*#__PURE__*/_extends({}, styles$4, {
small: /*#__PURE__*/_extends({}, styles$5, {
height: 16,

@@ -830,3 +944,3 @@ width: 16,

var styles$5 = {
var styles$6 = {
appearance: 'none',

@@ -891,3 +1005,3 @@ position: 'relative',

var toggle = {
regular: /*#__PURE__*/adminUiSystem.merge(styles$5, {
regular: /*#__PURE__*/adminUiSystem.merge(styles$6, {
height: 20,

@@ -905,3 +1019,3 @@ width: 36,

}),
small: /*#__PURE__*/adminUiSystem.merge(styles$5, {
small: /*#__PURE__*/adminUiSystem.merge(styles$6, {
height: 16,

@@ -1111,2 +1225,26 @@ width: 28,

};
var content = {
pt: 4,
px: 6,
pb: 6
}; // TODO: Make it global
var scrollbar = {
scrollbarWidth: 'thin',
scrollbarColor: 'background',
'::-webkit-scrollbar': {
width: '8px'
},
'::-webkit-scrollbar-thumb': {
backgroundColor: 'muted.3',
borderRadius: '6px',
border: '2px solid',
color: 'background'
}
};
var contentWithScroll = /*#__PURE__*/_extends({}, content, scrollbar, {
overflowY: 'auto'
});
var modal = {

@@ -1149,7 +1287,18 @@ backdrop: {

}),
content: {
pt: 4,
px: 6,
pb: 6
},
'content-with-small-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 3.5rem)'
}),
'content-with-regular-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 3.5rem)'
}),
'content-with-large-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 5rem)'
}),
'content-with-larger-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 7rem)'
}),
'content-with-extra-large-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 10rem)'
}),
content: /*#__PURE__*/_extends({}, content),
'footer-small': /*#__PURE__*/_extends({}, footer, {

@@ -1160,9 +1309,12 @@ borderTopWidth: 0,

width: 'full'
}
},
minHeight: '3.5rem'
}),
'footer-regular': /*#__PURE__*/_extends({}, footer, {
borderTopWidth: 1
borderTopWidth: 1,
minHeight: '3.5rem'
}),
'footer.-large': /*#__PURE__*/_extends({}, footer, {
borderTopWidth: 1
'footer-large': /*#__PURE__*/_extends({}, footer, {
borderTopWidth: 1,
minHeight: '5rem'
})

@@ -1181,3 +1333,3 @@ };

var load = /*#__PURE__*/adminUiSystem.keyframes( /*#__PURE__*/_templateObject());
var styles$6 = {
var styles$7 = {
display: 'inline-block',

@@ -1195,7 +1347,7 @@ width: 'full',

var skeleton = {
square: /*#__PURE__*/_extends({}, styles$6, {
borderRadius: 3
rect: /*#__PURE__*/_extends({}, styles$7, {
borderRadius: 'default'
}),
circle: /*#__PURE__*/_extends({}, styles$6, {
borderRadius: '100%'
circle: /*#__PURE__*/_extends({}, styles$7, {
borderRadius: 'circle'
})

@@ -1228,3 +1380,3 @@ };

var styles$7 = {
var styles$8 = {
display: 'flex',

@@ -1240,11 +1392,11 @@ alignItems: 'center',

var avatar = {
base: /*#__PURE__*/_extends({}, styles$7, {
base: /*#__PURE__*/_extends({}, styles$8, {
bg: 'text',
color: 'background'
}),
primary: /*#__PURE__*/_extends({}, styles$7, {
primary: /*#__PURE__*/_extends({}, styles$8, {
bg: 'primary.base',
color: 'primary.contrast'
}),
danger: /*#__PURE__*/_extends({}, styles$7, {
danger: /*#__PURE__*/_extends({}, styles$8, {
bg: 'danger.base',

@@ -1255,2 +1407,44 @@ 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

@@ -1273,3 +1467,5 @@ var components = {

collapsible: collapsible,
avatar: avatar
avatar: avatar,
tag: tag,
alert: alert
};

@@ -1314,3 +1510,3 @@

var palette = {
var palette$1 = {
base: {

@@ -1393,3 +1589,3 @@ bg: 'background',

var patterns = {
palette: palette,
palette: palette$1,
text: text,

@@ -1400,3 +1596,3 @@ border: border

var unstableTheme = /*#__PURE__*/_extends({}, base, {
var theme = /*#__PURE__*/_extends({}, base, {
components: components,

@@ -1407,3 +1603,3 @@ patterns: patterns

function _templateObject$1() {
var data = _taggedTemplateLiteralLoose(["\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 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 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 ol,\n ul {\n list-style: none;\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 "]);
var data = _taggedTemplateLiteralLoose(["\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 "]);

@@ -1424,3 +1620,3 @@ _templateObject$1 = function _templateObject() {

exports.patternKeys = patternKeys;
exports.unstableTheme = unstableTheme;
exports.theme = theme;
//# sourceMappingURL=admin-ui-theme.cjs.development.js.map

2

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

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("@vtex/admin-ui-system"),o=require("polished"),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={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"}},p={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:r.merge(m,{cell:{height:80}}),compact:r.merge(m,{cell:{height:48}}),variable:r.merge(m,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},f={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3",justifyContent:"flex-start"},y={compact:i({},f,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:i({},f,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:i({},f,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},w={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"}},v={"horizontal-regular":i({},w,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":i({},w,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":i({},w,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":i({},w,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},x={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1",borderColor:"muted.2",backgroundColor:"transparent",borderRadius:"50%",":after":{content:'""',display:"block",borderRadius:"50%",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"}},C={regular:r.merge(x,{height:20,width:20,padding:"0.3125rem",":after":{width:8,height:8}}),small:r.merge(x,{height:16,width:16,padding:1,":after":{width:6,height:6}})},k={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"}},S={regular:i({},k,{height:20,width:20,minWidth:20,minHeight:20}),small:i({},k,{height:16,width:16,minWidth:16,minHeight:16})},F={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"}},W={regular:r.merge(F,{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}}),small:r.merge(F,{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}})},R={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}},z={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}}},H={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)"}},E={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},B={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]}},T={backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:o.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({},H,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":i({},H,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":i({},H,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":i({},E,{height:56}),"header-regular":i({},E,{height:56}),"header-large":i({},E,{height:80}),content:{pt:4,px:6,pb:6},"footer-small":i({},B,{borderTopWidth:0,pt:0,">button":{width:"full"}}),"footer-regular":i({},B,{borderTopWidth:1}),"footer.-large":i({},B,{borderTopWidth:1})};function L(){var e=n(["\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n"]);return L=function(){return e},e}var V={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:r.keyframes(L())+" 1.2s ease-in-out infinite"},D={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},j={button:h,list:y,table:p,controlGroup:v,toggle:W,checkbox:S,radio:C,input:R,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:z,modal:T,skeleton:{square:i({},V,{borderRadius:3}),circle:i({},V,{borderRadius:"100%"})},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({},D,{bg:"text",color:"background"}),primary:i({},D,{bg:"primary.base",color:"primary.contrast"}),danger:i({},D,{bg:"danger.base",color:"danger.contrast"})}},A={borderWidth:"1px",borderStyle:"solid",borderRadius:"default"},q={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({},A,{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({},A,{borderColor:"text"}),disabled:i({},A,{borderColor:"muted.2"}),primary:i({},A,{borderColor:"primary.base"}),danger:i({},A,{borderColor:"danger.base"})}},I=Object.keys(q),X=i({},l,{components:j,patterns:q});function M(){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 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 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 ol,\n ul {\n list-style: none;\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 M=function(){return e},e}exports.Preflight=function(){return t.createElement(r.Global,{styles:r.css(M())})},exports.patternKeys=I,exports.unstableTheme=X;
"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;
//# sourceMappingURL=admin-ui-theme.cjs.production.min.js.map

316

dist/admin-ui-theme.esm.js

@@ -0,3 +1,3 @@

import { rgba } from 'polished';
import { merge, keyframes, Global, css } from '@vtex/admin-ui-system';
import { rgba } from 'polished';
import React from 'react';

@@ -435,3 +435,115 @@

var buttonStyles = {
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'
};
var styles$2 = {
display: 'inline-flex',
alignItems: 'center',
borderRadius: '100px',
color: 'text',
border: 'none',
'> svg:nth-of-type(1)': {
marginRight: 1
}
};
var palette = {
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'
}
};
var size$1 = {
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
}
}
};
var tag = /*#__PURE__*/_extends({}, /*#__PURE__*/Object.keys(palette).reduce(function mergeV(acc, p) {
return _extends({}, acc, Object.keys(size$1).reduce(function mergeS(bcc, s) {
var _extends2;
return _extends({}, bcc, (_extends2 = {}, _extends2[p + "-" + s] = _extends({}, styles$2, palette[p], size$1[s]), _extends2));
}, []));
}, {}), {
'default-button': /*#__PURE__*/_extends({}, buttonStyles, {
'&:hover': {
backgroundColor: /*#__PURE__*/rgba(colors.text, 0.1)
},
'&:active': {
backgroundColor: /*#__PURE__*/rgba(colors.text, 0.13)
}
}),
'black-button': /*#__PURE__*/_extends({}, buttonStyles, {
'&:hover': {
backgroundColor: /*#__PURE__*/rgba(colors.background, 0.1)
},
'&:active': {
backgroundColor: /*#__PURE__*/rgba(colors.background, 0.13)
}
})
});
var styles$3 = {
table: {

@@ -532,3 +644,3 @@ display: 'table',

},
regular: /*#__PURE__*/merge(styles$2, {
regular: /*#__PURE__*/merge(styles$3, {
cell: {

@@ -538,3 +650,3 @@ height: 80

}),
compact: /*#__PURE__*/merge(styles$2, {
compact: /*#__PURE__*/merge(styles$3, {
cell: {

@@ -544,3 +656,3 @@ height: 48

}),
variable: /*#__PURE__*/merge(styles$2, {
variable: /*#__PURE__*/merge(styles$3, {
cell: {

@@ -593,3 +705,3 @@ verticalAlign: 'top',

var styles$3 = {
var styles$4 = {
fontVariationSettings: 'regular',

@@ -613,3 +725,3 @@ lh: 'highlight',

var controlGroup = {
'horizontal-regular': /*#__PURE__*/_extends({}, styles$3, {
'horizontal-regular': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '2',

@@ -621,3 +733,3 @@ flexDirection: 'row',

}),
'horizontal-small': /*#__PURE__*/_extends({}, styles$3, {
'horizontal-small': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '1',

@@ -629,3 +741,3 @@ flexDirection: 'row',

}),
'vertical-regular': /*#__PURE__*/_extends({}, styles$3, {
'vertical-regular': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '2',

@@ -637,3 +749,3 @@ flexDirection: 'column',

}),
'vertical-small': /*#__PURE__*/_extends({}, styles$3, {
'vertical-small': /*#__PURE__*/_extends({}, styles$4, {
fontSize: '1',

@@ -653,10 +765,10 @@ flexDirection: 'column',

borderStyle: 'solid',
borderWidth: '1',
borderWidth: '1px',
borderColor: 'muted.2',
backgroundColor: 'transparent',
borderRadius: '50%',
borderRadius: 'circle',
':after': {
content: '""',
display: 'block',
borderRadius: '50%',
borderRadius: 'circle',
backgroundColor: 'white',

@@ -704,24 +816,26 @@ opacity: 0

};
var regular = /*#__PURE__*/merge(style, {
height: 20,
width: 20,
padding: '5px',
':after': {
width: 8,
height: 8
}
});
var small = /*#__PURE__*/merge(style, {
height: 16,
width: 16,
padding: 1,
':after': {
width: 6,
height: 6
}
});
var radio = {
regular: /*#__PURE__*/merge(style, {
height: 20,
width: 20,
padding: '0.3125rem',
':after': {
width: 8,
height: 8
}
}),
small: /*#__PURE__*/merge(style, {
height: 16,
width: 16,
padding: 1,
':after': {
width: 6,
height: 6
}
})
regular: regular,
small: small
};
var styles$4 = {
var styles$5 = {
appearance: 'none',

@@ -807,3 +921,3 @@ borderStyle: 'solid',

var checkbox = {
regular: /*#__PURE__*/_extends({}, styles$4, {
regular: /*#__PURE__*/_extends({}, styles$5, {
height: 20,

@@ -814,3 +928,3 @@ width: 20,

}),
small: /*#__PURE__*/_extends({}, styles$4, {
small: /*#__PURE__*/_extends({}, styles$5, {
height: 16,

@@ -823,3 +937,3 @@ width: 16,

var styles$5 = {
var styles$6 = {
appearance: 'none',

@@ -884,3 +998,3 @@ position: 'relative',

var toggle = {
regular: /*#__PURE__*/merge(styles$5, {
regular: /*#__PURE__*/merge(styles$6, {
height: 20,

@@ -898,3 +1012,3 @@ width: 36,

}),
small: /*#__PURE__*/merge(styles$5, {
small: /*#__PURE__*/merge(styles$6, {
height: 16,

@@ -1104,2 +1218,26 @@ width: 28,

};
var content = {
pt: 4,
px: 6,
pb: 6
}; // TODO: Make it global
var scrollbar = {
scrollbarWidth: 'thin',
scrollbarColor: 'background',
'::-webkit-scrollbar': {
width: '8px'
},
'::-webkit-scrollbar-thumb': {
backgroundColor: 'muted.3',
borderRadius: '6px',
border: '2px solid',
color: 'background'
}
};
var contentWithScroll = /*#__PURE__*/_extends({}, content, scrollbar, {
overflowY: 'auto'
});
var modal = {

@@ -1142,7 +1280,18 @@ backdrop: {

}),
content: {
pt: 4,
px: 6,
pb: 6
},
'content-with-small-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 3.5rem)'
}),
'content-with-regular-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 3.5rem)'
}),
'content-with-large-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 5rem)'
}),
'content-with-larger-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 7rem)'
}),
'content-with-extra-large-scroll-area': /*#__PURE__*/_extends({}, contentWithScroll, {
height: 'calc(100% - 10rem)'
}),
content: /*#__PURE__*/_extends({}, content),
'footer-small': /*#__PURE__*/_extends({}, footer, {

@@ -1153,9 +1302,12 @@ borderTopWidth: 0,

width: 'full'
}
},
minHeight: '3.5rem'
}),
'footer-regular': /*#__PURE__*/_extends({}, footer, {
borderTopWidth: 1
borderTopWidth: 1,
minHeight: '3.5rem'
}),
'footer.-large': /*#__PURE__*/_extends({}, footer, {
borderTopWidth: 1
'footer-large': /*#__PURE__*/_extends({}, footer, {
borderTopWidth: 1,
minHeight: '5rem'
})

@@ -1174,3 +1326,3 @@ };

var load = /*#__PURE__*/keyframes( /*#__PURE__*/_templateObject());
var styles$6 = {
var styles$7 = {
display: 'inline-block',

@@ -1188,7 +1340,7 @@ width: 'full',

var skeleton = {
square: /*#__PURE__*/_extends({}, styles$6, {
borderRadius: 3
rect: /*#__PURE__*/_extends({}, styles$7, {
borderRadius: 'default'
}),
circle: /*#__PURE__*/_extends({}, styles$6, {
borderRadius: '100%'
circle: /*#__PURE__*/_extends({}, styles$7, {
borderRadius: 'circle'
})

@@ -1221,3 +1373,3 @@ };

var styles$7 = {
var styles$8 = {
display: 'flex',

@@ -1233,11 +1385,11 @@ alignItems: 'center',

var avatar = {
base: /*#__PURE__*/_extends({}, styles$7, {
base: /*#__PURE__*/_extends({}, styles$8, {
bg: 'text',
color: 'background'
}),
primary: /*#__PURE__*/_extends({}, styles$7, {
primary: /*#__PURE__*/_extends({}, styles$8, {
bg: 'primary.base',
color: 'primary.contrast'
}),
danger: /*#__PURE__*/_extends({}, styles$7, {
danger: /*#__PURE__*/_extends({}, styles$8, {
bg: 'danger.base',

@@ -1248,2 +1400,44 @@ 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

@@ -1266,3 +1460,5 @@ var components = {

collapsible: collapsible,
avatar: avatar
avatar: avatar,
tag: tag,
alert: alert
};

@@ -1307,3 +1503,3 @@

var palette = {
var palette$1 = {
base: {

@@ -1386,3 +1582,3 @@ bg: 'background',

var patterns = {
palette: palette,
palette: palette$1,
text: text,

@@ -1393,3 +1589,3 @@ border: border

var unstableTheme = /*#__PURE__*/_extends({}, base, {
var theme = /*#__PURE__*/_extends({}, base, {
components: components,

@@ -1400,3 +1596,3 @@ patterns: patterns

function _templateObject$1() {
var data = _taggedTemplateLiteralLoose(["\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 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 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 ol,\n ul {\n list-style: none;\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 "]);
var data = _taggedTemplateLiteralLoose(["\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 "]);

@@ -1415,3 +1611,3 @@ _templateObject$1 = function _templateObject() {

export { Preflight, patternKeys, unstableTheme };
export { Preflight, patternKeys, theme };
//# sourceMappingURL=admin-ui-theme.esm.js.map

549

dist/config/components/index.d.ts

@@ -104,90 +104,5 @@ declare const _default: {

};
regular: {
cell: {
display: string;
alignItems: string;
verticalAlign: string;
height: number;
paddingX: number;
variant: string;
};
reset: {
borderCollapse: string;
'td, th': {
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
};
lead: {
height: number;
display: string;
alignItems: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
};
};
compact: {
cell: {
display: string;
alignItems: string;
verticalAlign: string;
height: number;
paddingX: number;
variant: string;
};
reset: {
borderCollapse: string;
'td, th': {
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
};
lead: {
height: number;
display: string;
alignItems: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
};
};
variable: {
reset: {
borderCollapse: string;
'td, th': {
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
};
lead: {
height: number;
display: string;
alignItems: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
};
} & {
tbody: {
verticalAlign: string;
};
cell: {
display: string;
alignItems: string;
minHeight: number;
paddingY: number;
paddingX: number;
variant: string;
};
};
regular: any;
compact: any;
variable: any;
};

@@ -289,144 +204,4 @@ controlGroup: {

toggle: {
regular: {
appearance: string;
position: string;
cursor: string;
borderRadius: string;
backgroundColor: string;
borderStyle: string;
borderColor: string;
borderWidth: number;
'&:after': {
content: string;
display: string;
position: string;
borderRadius: string;
backgroundColor: string;
transition: string;
};
'&:checked': {
backgroundColor: string;
borderColor: string;
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
};
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
':not(:checked):active': {
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
'&:after': {
width: number;
height: number;
};
'&:checked': {
'&:after': {
transform: string;
};
};
};
small: {
appearance: string;
position: string;
cursor: string;
borderRadius: string;
backgroundColor: string;
borderStyle: string;
borderColor: string;
borderWidth: number;
'&:after': {
content: string;
display: string;
position: string;
borderRadius: string;
backgroundColor: string;
transition: string;
};
'&:checked': {
backgroundColor: string;
borderColor: string;
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
};
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
':not(:checked):active': {
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
'&:after': {
width: number;
height: number;
};
'&:checked': {
'&:after': {
transform: string;
};
};
};
regular: any;
small: any;
};

@@ -604,130 +379,4 @@ checkbox: {

radio: {
regular: {
appearance: string;
margin: number;
position: string;
cursor: string;
borderStyle: string;
borderWidth: string;
borderColor: string;
backgroundColor: string;
borderRadius: string;
':after': {
content: string;
display: string;
borderRadius: string;
backgroundColor: string;
opacity: number;
};
':checked': {
backgroundColor: string;
borderColor: string;
':after': {
opacity: number;
};
':hover': {
backgroundColor: string;
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
};
':disabled': {
cursor: string;
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':hover': {
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
padding: string;
':after': {
width: number;
height: number;
};
};
small: {
appearance: string;
margin: number;
position: string;
cursor: string;
borderStyle: string;
borderWidth: string;
borderColor: string;
backgroundColor: string;
borderRadius: string;
':after': {
content: string;
display: string;
borderRadius: string;
backgroundColor: string;
opacity: number;
};
':checked': {
backgroundColor: string;
borderColor: string;
':after': {
opacity: number;
};
':hover': {
backgroundColor: string;
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
};
':disabled': {
cursor: string;
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':hover': {
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
padding: number;
':after': {
width: number;
height: number;
};
};
regular: any;
small: any;
};

@@ -1013,2 +662,92 @@ input: {

};
'content-with-small-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-regular-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-large-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-larger-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-extra-large-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
content: {

@@ -1025,2 +764,3 @@ pt: number;

};
minHeight: string;
display: string;

@@ -1048,2 +788,3 @@ justifyContent: string;

borderTopWidth: number;
minHeight: string;
display: string;

@@ -1072,4 +813,5 @@ justifyContent: string;

};
'footer.-large': {
'footer-large': {
borderTopWidth: number;
minHeight: string;
display: string;

@@ -1100,4 +842,4 @@ justifyContent: string;

skeleton: {
square: {
borderRadius: number;
rect: {
borderRadius: string;
display: string;

@@ -1203,3 +945,88 @@ width: string;

};
tag: {
'default-button': {
'&:hover': {
backgroundColor: string;
};
'&:active': {
backgroundColor: string;
};
padding: number;
border: string;
borderRadius: number;
cursor: string;
position: string;
color: string;
backgroundColor: string;
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
marginLeft: string;
};
'black-button': {
'&:hover': {
backgroundColor: string;
};
'&:active': {
backgroundColor: string;
};
padding: number;
border: string;
borderRadius: number;
cursor: string;
position: string;
color: string;
backgroundColor: string;
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
marginLeft: string;
};
};
alert: {
error: {
bg: string;
display: string;
alignItems: string;
justifyContent: string;
height: number;
paddingY: number;
paddingLeft: number;
paddingRight: number;
borderRadius: string;
};
success: {
bg: string;
display: string;
alignItems: string;
justifyContent: string;
height: number;
paddingY: number;
paddingLeft: number;
paddingRight: number;
borderRadius: string;
};
warning: {
bg: string;
display: string;
alignItems: string;
justifyContent: string;
height: number;
paddingY: number;
paddingLeft: number;
paddingRight: number;
borderRadius: string;
};
};
};
export default _default;

95

dist/config/components/modal.d.ts

@@ -164,2 +164,92 @@ declare const _default: {

};
'content-with-small-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-regular-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-large-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-larger-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-extra-large-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
content: {

@@ -176,2 +266,3 @@ pt: number;

};
minHeight: string;
display: string;

@@ -199,2 +290,3 @@ justifyContent: string;

borderTopWidth: number;
minHeight: string;
display: string;

@@ -223,4 +315,5 @@ justifyContent: string;

};
'footer.-large': {
'footer-large': {
borderTopWidth: number;
minHeight: string;
display: string;

@@ -227,0 +320,0 @@ justifyContent: string;

130

dist/config/components/radio.d.ts
declare const _default: {
regular: {
appearance: string;
margin: number;
position: string;
cursor: string;
borderStyle: string;
borderWidth: string;
borderColor: string;
backgroundColor: string;
borderRadius: string;
':after': {
content: string;
display: string;
borderRadius: string;
backgroundColor: string;
opacity: number;
};
':checked': {
backgroundColor: string;
borderColor: string;
':after': {
opacity: number;
};
':hover': {
backgroundColor: string;
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
};
':disabled': {
cursor: string;
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':hover': {
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
padding: string;
':after': {
width: number;
height: number;
};
};
small: {
appearance: string;
margin: number;
position: string;
cursor: string;
borderStyle: string;
borderWidth: string;
borderColor: string;
backgroundColor: string;
borderRadius: string;
':after': {
content: string;
display: string;
borderRadius: string;
backgroundColor: string;
opacity: number;
};
':checked': {
backgroundColor: string;
borderColor: string;
':after': {
opacity: number;
};
':hover': {
backgroundColor: string;
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
};
':disabled': {
cursor: string;
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':hover': {
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
padding: number;
':after': {
width: number;
height: number;
};
};
regular: any;
small: any;
};
export default _default;

4

dist/config/components/skeleton.d.ts
declare const _default: {
square: {
borderRadius: number;
rect: {
borderRadius: string;
display: string;

@@ -5,0 +5,0 @@ width: string;

152

dist/config/components/table.d.ts

@@ -52,152 +52,6 @@ declare const _default: {

};
regular: {
table: {
display: string;
width: string;
};
header: {
display: string;
};
body: {
display: string;
};
'row-ltr': {
display: string;
textAlign: string;
};
'row-rtl': {
display: string;
textAlign: string;
};
cell: {
bg: string;
flex: number;
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
display: string;
verticalAlign: string;
paddingX: number;
variant: string;
};
columnheader: {
bg: string;
height: number;
display: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
flex: number;
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
} & {
cell: {
height: number;
};
};
compact: {
table: {
display: string;
width: string;
};
header: {
display: string;
};
body: {
display: string;
};
'row-ltr': {
display: string;
textAlign: string;
};
'row-rtl': {
display: string;
textAlign: string;
};
cell: {
bg: string;
flex: number;
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
display: string;
verticalAlign: string;
paddingX: number;
variant: string;
};
columnheader: {
bg: string;
height: number;
display: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
flex: number;
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
} & {
cell: {
height: number;
};
};
variable: {
table: {
display: string;
width: string;
};
header: {
display: string;
};
body: {
display: string;
};
'row-ltr': {
display: string;
textAlign: string;
};
'row-rtl': {
display: string;
textAlign: string;
};
cell: {
bg: string;
flex: number;
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
display: string;
verticalAlign: string;
paddingX: number;
variant: string;
};
columnheader: {
bg: string;
height: number;
display: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
flex: number;
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
} & {
cell: {
verticalAlign: string;
minHeight: number;
paddingY: number;
};
};
regular: any;
compact: any;
variable: any;
};
export default _default;

144

dist/config/components/toggle.d.ts
declare const _default: {
regular: {
appearance: string;
position: string;
cursor: string;
borderRadius: string;
backgroundColor: string;
borderStyle: string;
borderColor: string;
borderWidth: number;
'&:after': {
content: string;
display: string;
position: string;
borderRadius: string;
backgroundColor: string;
transition: string;
};
'&:checked': {
backgroundColor: string;
borderColor: string;
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
};
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
':not(:checked):active': {
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
'&:after': {
width: number;
height: number;
};
'&:checked': {
'&:after': {
transform: string;
};
};
};
small: {
appearance: string;
position: string;
cursor: string;
borderRadius: string;
backgroundColor: string;
borderStyle: string;
borderColor: string;
borderWidth: number;
'&:after': {
content: string;
display: string;
position: string;
borderRadius: string;
backgroundColor: string;
transition: string;
};
'&:checked': {
backgroundColor: string;
borderColor: string;
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
};
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
':not(:checked):active': {
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
'&:after': {
width: number;
height: number;
};
'&:checked': {
'&:after': {
transform: string;
};
};
};
regular: any;
small: any;
};
export default _default;

559

dist/config/index.d.ts
export * from './patterns';
export * from './styleProps';
export declare const unstableTheme: {
export declare const theme: {
components: {

@@ -107,90 +107,5 @@ button: {};

};
regular: {
cell: {
display: string;
alignItems: string;
verticalAlign: string;
height: number;
paddingX: number;
variant: string;
};
reset: {
borderCollapse: string;
'td, th': {
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
};
lead: {
height: number;
display: string;
alignItems: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
};
};
compact: {
cell: {
display: string;
alignItems: string;
verticalAlign: string;
height: number;
paddingX: number;
variant: string;
};
reset: {
borderCollapse: string;
'td, th': {
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
};
lead: {
height: number;
display: string;
alignItems: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
};
};
variable: {
reset: {
borderCollapse: string;
'td, th': {
borderBottomWidth: number;
borderBottomStyle: string;
borderBottomColor: string;
};
};
lead: {
height: number;
display: string;
alignItems: string;
verticalAlign: string;
paddingX: number;
color: string;
fontWeight: string;
variant: string;
};
} & {
tbody: {
verticalAlign: string;
};
cell: {
display: string;
alignItems: string;
minHeight: number;
paddingY: number;
paddingX: number;
variant: string;
};
};
regular: any;
compact: any;
variable: any;
};

@@ -292,144 +207,4 @@ controlGroup: {

toggle: {
regular: {
appearance: string;
position: string;
cursor: string;
borderRadius: string;
backgroundColor: string;
borderStyle: string;
borderColor: string;
borderWidth: number;
'&:after': {
content: string;
display: string;
position: string;
borderRadius: string;
backgroundColor: string;
transition: string;
};
'&:checked': {
backgroundColor: string;
borderColor: string;
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
};
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
':not(:checked):active': {
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
'&:after': {
width: number;
height: number;
};
'&:checked': {
'&:after': {
transform: string;
};
};
};
small: {
appearance: string;
position: string;
cursor: string;
borderRadius: string;
backgroundColor: string;
borderStyle: string;
borderColor: string;
borderWidth: number;
'&:after': {
content: string;
display: string;
position: string;
borderRadius: string;
backgroundColor: string;
transition: string;
};
'&:checked': {
backgroundColor: string;
borderColor: string;
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
};
'&:hover': {
backgroundColor: string;
borderColor: string;
};
'&:disabled': {
backgroundColor: string;
borderColor: string;
'&:after': {
backgroundColor: string;
};
};
':not(:checked):active': {
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
'&:after': {
width: number;
height: number;
};
'&:checked': {
'&:after': {
transform: string;
};
};
};
regular: any;
small: any;
};

@@ -607,130 +382,4 @@ checkbox: {

radio: {
regular: {
appearance: string;
margin: number;
position: string;
cursor: string;
borderStyle: string;
borderWidth: string;
borderColor: string;
backgroundColor: string;
borderRadius: string;
':after': {
content: string;
display: string;
borderRadius: string;
backgroundColor: string;
opacity: number;
};
':checked': {
backgroundColor: string;
borderColor: string;
':after': {
opacity: number;
};
':hover': {
backgroundColor: string;
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
};
':disabled': {
cursor: string;
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':hover': {
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
padding: string;
':after': {
width: number;
height: number;
};
};
small: {
appearance: string;
margin: number;
position: string;
cursor: string;
borderStyle: string;
borderWidth: string;
borderColor: string;
backgroundColor: string;
borderRadius: string;
':after': {
content: string;
display: string;
borderRadius: string;
backgroundColor: string;
opacity: number;
};
':checked': {
backgroundColor: string;
borderColor: string;
':after': {
opacity: number;
};
':hover': {
backgroundColor: string;
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
};
':disabled': {
cursor: string;
backgroundColor: string;
borderColor: string;
':after': {
backgroundColor: string;
};
};
':hover': {
borderColor: string;
};
':active': {
borderColor: string;
backgroundColor: string;
};
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
} & {
height: number;
width: number;
padding: number;
':after': {
width: number;
height: number;
};
};
regular: any;
small: any;
};

@@ -1016,2 +665,92 @@ input: {

};
'content-with-small-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-regular-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-large-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-larger-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
'content-with-extra-large-scroll-area': {
height: string;
overflowY: string;
scrollbarWidth: string;
scrollbarColor: string;
'::-webkit-scrollbar': {
width: string;
};
'::-webkit-scrollbar-thumb': {
backgroundColor: string;
borderRadius: string;
border: string;
color: string;
};
pt: number;
px: number;
pb: number;
};
content: {

@@ -1028,2 +767,3 @@ pt: number;

};
minHeight: string;
display: string;

@@ -1051,2 +791,3 @@ justifyContent: string;

borderTopWidth: number;
minHeight: string;
display: string;

@@ -1075,4 +816,5 @@ justifyContent: string;

};
'footer.-large': {
'footer-large': {
borderTopWidth: number;
minHeight: string;
display: string;

@@ -1103,4 +845,4 @@ justifyContent: string;

skeleton: {
square: {
borderRadius: number;
rect: {
borderRadius: string;
display: string;

@@ -1206,2 +948,87 @@ width: string;

};
tag: {
'default-button': {
'&:hover': {
backgroundColor: string;
};
'&:active': {
backgroundColor: string;
};
padding: number;
border: string;
borderRadius: number;
cursor: string;
position: string;
color: string;
backgroundColor: string;
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
marginLeft: string;
};
'black-button': {
'&:hover': {
backgroundColor: string;
};
'&:active': {
backgroundColor: string;
};
padding: number;
border: string;
borderRadius: number;
cursor: string;
position: string;
color: string;
backgroundColor: string;
':focus:not([data-focus-visible-added])': {
outline: string;
boxShadow: string;
};
':focus': {
outline: string;
boxShadow: string;
};
marginLeft: string;
};
};
alert: {
error: {
bg: string;
display: string;
alignItems: string;
justifyContent: string;
height: number;
paddingY: number;
paddingLeft: number;
paddingRight: number;
borderRadius: string;
};
success: {
bg: string;
display: string;
alignItems: string;
justifyContent: string;
height: number;
paddingY: number;
paddingLeft: number;
paddingRight: number;
borderRadius: string;
};
warning: {
bg: string;
display: string;
alignItems: string;
justifyContent: string;
height: number;
paddingY: number;
paddingLeft: number;
paddingRight: number;
borderRadius: string;
};
};
};

@@ -1483,11 +1310,11 @@ patterns: {

};
export declare type Theme = typeof unstableTheme;
export declare type Theme = typeof theme;
export declare type FontSizes = '0' | '1' | '2' | '3' | '4';
export declare type BorderWidths = '0' | '1' | '2' | '3';
export declare type BorderRadius = '0' | '1' | '2' | '3' | 'full';
export declare type FontWeights = keyof typeof unstableTheme.fontWeights;
export declare type LineHeights = keyof typeof unstableTheme.lineHeights;
export declare type FontWeights = keyof typeof theme.fontWeights;
export declare type LineHeights = keyof typeof theme.lineHeights;
export declare type ZIndexes = 'under' | 'plain' | 'over' | '1' | '2' | '3' | '4' | '5';
export declare type Space = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | 'px' | '2px';
export declare type Sizes = keyof typeof unstableTheme.sizes;
export declare type Sizes = keyof typeof theme.sizes;
export declare type ThemeColors = 'text' | 'background' | 'muted.0' | 'muted.1' | 'muted.2' | 'muted.3' | 'muted.4' | 'emphasis' | 'focus' | 'primary.base' | 'primary.hover' | 'primary.active' | 'primary.contrast' | 'primary.washed.0' | 'primary.washed.1' | 'primary.washed.2' | 'danger.base' | 'danger.hover' | 'danger.active' | 'danger.contrast' | 'danger.washed.0' | 'danger.washed.1' | 'danger.washed.2' | 'success.base' | 'success.hover' | 'success.active' | 'success.contrast' | 'success.washed.0' | 'warning.base';

4

dist/config/patterns/index.d.ts
import { BorderPattern } from './border';
import { PalettePattern } from './palette';
import { TextPattern } from './text';
import { TextPattern, TextVariant } from './text';
declare const patterns: {

@@ -129,3 +129,3 @@ palette: {

declare type PatternsProps = BorderPattern & TextPattern & PalettePattern;
export { BorderPattern, PalettePattern, TextPattern, PatternsProps };
export { BorderPattern, PalettePattern, TextPattern, PatternsProps, TextVariant, };
export default patterns;

3

dist/config/patterns/text.d.ts

@@ -35,2 +35,3 @@ declare const text: {

export { text };
export declare type TextVariant = keyof typeof text;
export declare type TextPattern = {

@@ -49,3 +50,3 @@ /**

*/
text?: keyof typeof text;
text?: TextVariant;
};

10

dist/config/styleProps/space.d.ts

@@ -6,6 +6,16 @@ import { ResponsiveValue } from '@vtex/admin-ui-system';

padding?: ResponsiveValue<Space>;
paddingX?: ResponsiveValue<Space>;
paddingY?: ResponsiveValue<Space>;
paddingTop?: ResponsiveValue<Space>;
paddingRight?: ResponsiveValue<Space>;
paddingBottom?: ResponsiveValue<Space>;
paddingLeft?: ResponsiveValue<Space>;
margin?: ResponsiveValue<Space | 'auto'>;
marginY?: ResponsiveValue<Space | 'auto'>;
marginX?: ResponsiveValue<Space | 'auto'>;
marginTop?: ResponsiveValue<Space | 'auto'>;
marginRight?: ResponsiveValue<Space | 'auto'>;
marginBottom?: ResponsiveValue<Space | 'auto'>;
marginLeft?: ResponsiveValue<Space | 'auto'>;
}
export {};

12

package.json
{
"name": "@vtex/admin-ui-theme",
"version": "0.1.0-alpha.4",
"version": "0.1.0-rc.0",
"main": "dist/index.js",

@@ -29,6 +29,5 @@ "module": "dist/admin-ui-theme.esm.js",

"build": "tsdx build --tsconfig tsconfig.json",
"test": "tsdx test"
"test": "tsdx test --passWithNoTests"
},
"peerDependencies": {
"@vtex/admin-ui-system": "*",
"react": ">=16",

@@ -38,5 +37,8 @@ "react-dom": ">=16"

"devDependencies": {
"@vtex/admin-ui-system": "^0.1.0-alpha.2"
"@vtex/admin-ui-system": "^0.1.0-rc.0"
},
"gitHead": "2ef55bc5bd4e336803e92d218f9ab6a316a4a1e3"
"dependencies": {
"polished": "^4.0.3"
},
"gitHead": "a02683bc9a0f0c37fd46d31ff70776cef5c1f9a8"
}

2

src/config/components/index.ts
// elements
import button from './button'
import divider from './divider'
import tag from './tag'
// data

@@ -40,2 +41,3 @@ import table from './table'

avatar,
tag,
}

56

src/config/components/modal.ts

@@ -78,2 +78,29 @@ import { rgba } from 'polished'

const content = {
pt: 4,
px: 6,
pb: 6,
}
// TODO: Make it global
const scrollbar = {
scrollbarWidth: 'thin',
scrollbarColor: 'background',
'::-webkit-scrollbar': {
width: '8px',
},
'::-webkit-scrollbar-thumb': {
backgroundColor: 'muted.3',
borderRadius: '6px',
border: '2px solid',
color: 'background',
},
}
const contentWithScroll = {
...content,
...scrollbar,
overflowY: 'auto',
}
export default {

@@ -113,6 +140,24 @@ backdrop: {

'header-large': { ...header, height: 80 },
'content-with-small-scroll-area': {
...contentWithScroll,
height: 'calc(100% - 3.5rem)',
},
'content-with-regular-scroll-area': {
...contentWithScroll,
height: 'calc(100% - 3.5rem)',
},
'content-with-large-scroll-area': {
...contentWithScroll,
height: 'calc(100% - 5rem)',
},
'content-with-larger-scroll-area': {
...contentWithScroll,
height: 'calc(100% - 7rem)',
},
'content-with-extra-large-scroll-area': {
...contentWithScroll,
height: 'calc(100% - 10rem)',
},
content: {
pt: 4,
px: 6,
pb: 6,
...content,
},

@@ -126,5 +171,6 @@ 'footer-small': {

},
minHeight: '3.5rem',
},
'footer-regular': { ...footer, borderTopWidth: 1 },
'footer.-large': { ...footer, borderTopWidth: 1 },
'footer-regular': { ...footer, borderTopWidth: 1, minHeight: '3.5rem' },
'footer-large': { ...footer, borderTopWidth: 1, minHeight: '5rem' },
}

46

src/config/components/radio.ts

@@ -9,10 +9,10 @@ import { merge } from '@vtex/admin-ui-system'

borderStyle: 'solid',
borderWidth: '1',
borderWidth: '1px',
borderColor: 'muted.2',
backgroundColor: 'transparent',
borderRadius: '50%',
borderRadius: 'circle',
':after': {
content: '""',
display: 'block',
borderRadius: '50%',
borderRadius: 'circle',
backgroundColor: 'white',

@@ -61,21 +61,25 @@ opacity: 0,

const regular = merge(style, {
height: 20,
width: 20,
padding: '5px',
':after': {
width: 8,
height: 8,
},
})
const small = merge(style, {
height: 16,
width: 16,
padding: 1,
':after': {
width: 6,
height: 6,
},
})
export default {
regular: merge(style, {
height: 20,
width: 20,
padding: '0.3125rem',
':after': {
width: 8,
height: 8,
},
}),
small: merge(style, {
height: 16,
width: 16,
padding: 1,
':after': {
width: 6,
height: 6,
},
}),
regular,
small,
}

6

src/config/components/skeleton.ts

@@ -33,10 +33,10 @@ import { keyframes } from '@vtex/admin-ui-system'

export default {
square: {
rect: {
...styles,
borderRadius: 3,
borderRadius: 'default',
},
circle: {
...styles,
borderRadius: '100%',
borderRadius: 'circle',
},
}

10

src/config/index.ts

@@ -8,3 +8,3 @@ import base from './base'

export const unstableTheme = {
export const theme = {
...base,

@@ -15,3 +15,3 @@ components,

export type Theme = typeof unstableTheme
export type Theme = typeof theme

@@ -25,4 +25,4 @@ // ///////////// ///////////// ///////////// ///////////// ///////////

export type BorderRadius = '0' | '1' | '2' | '3' | 'full'
export type FontWeights = keyof typeof unstableTheme.fontWeights
export type LineHeights = keyof typeof unstableTheme.lineHeights
export type FontWeights = keyof typeof theme.fontWeights
export type LineHeights = keyof typeof theme.lineHeights
export type ZIndexes = 'under' | 'plain' | 'over' | '1' | '2' | '3' | '4' | '5'

@@ -43,3 +43,3 @@

export type Sizes = keyof typeof unstableTheme.sizes
export type Sizes = keyof typeof theme.sizes

@@ -46,0 +46,0 @@ export type ThemeColors =

10

src/config/patterns/index.ts
import { border, BorderPattern } from './border'
import { palette, PalettePattern } from './palette'
import { text, TextPattern } from './text'
import { text, TextPattern, TextVariant } from './text'

@@ -15,3 +15,9 @@ const patterns = {

export { BorderPattern, PalettePattern, TextPattern, PatternsProps }
export {
BorderPattern,
PalettePattern,
TextPattern,
PatternsProps,
TextVariant,
}
export default patterns

4

src/config/patterns/text.ts

@@ -37,2 +37,4 @@ const text = {

export type TextVariant = keyof typeof text
export type TextPattern = {

@@ -51,3 +53,3 @@ /**

*/
text?: keyof typeof text
text?: TextVariant
}

10

src/config/styleProps/space.ts

@@ -9,5 +9,15 @@ import { ResponsiveValue } from '@vtex/admin-ui-system'

padding?: ResponsiveValue<Space>
paddingX?: ResponsiveValue<Space>
paddingY?: ResponsiveValue<Space>
paddingTop?: ResponsiveValue<Space>
paddingRight?: ResponsiveValue<Space>
paddingBottom?: ResponsiveValue<Space>
paddingLeft?: ResponsiveValue<Space>
margin?: ResponsiveValue<Space | 'auto'>
marginY?: ResponsiveValue<Space | 'auto'>
marginX?: ResponsiveValue<Space | 'auto'>
marginTop?: ResponsiveValue<Space | 'auto'>
marginRight?: ResponsiveValue<Space | 'auto'>
marginBottom?: ResponsiveValue<Space | 'auto'>
marginLeft?: ResponsiveValue<Space | 'auto'>
}
dist/admin-ui-theme.cjs.development.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/admin-ui-theme.esm.js.map

Sorry, the diff of this file is not supported yet

src/Preflight.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc