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

Comparing version 0.16.2 to 0.17.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.17.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.16.2...@vtex/admin-ui-theme@0.17.0) (2021-02-01)
+
+
+### Features
+
+* **admin-styles:** add package to parse styles from theme ([45e918b](https://github.com/vtex/onda/commit/45e918ba9f68cc83514bab0b4dcb5f23139acce6))
+
+
+
+
+
 ## [0.16.2](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.16.1...@vtex/admin-ui-theme@0.16.2) (2021-01-28)
@@ -8,0 +19,0 @@

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

@@ -146,3 +146,3 @@ 'use strict';
   breakpoints: ['640px', '768px', '1024px', '1280px'],
-  transition: {
+  transitions: {
     snap: 'all 70ms cubic-bezier(0.2, 0.2, 0.38, 0.9)',
@@ -1114,46 +1114,62 @@ fade: 'all 110ms cubic-bezier(0.2, 0.2, 0.38, 0.9)',
 
-var styles$6 = {
-  appearance: 'none',
-  borderStyle: 'solid',
-  borderWidth: 1,
-  borderColor: 'mid.primary',
-  borderRadius: 3,
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  '&:checked': {
-    backgroundColor: 'blue',
-    borderColor: 'blue',
-    '&: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>\")"
+var checkbox = {
+  styles: {
+    appearance: 'none',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: 'mid.primary',
+    borderRadius: 3,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&:checked': {
+      backgroundColor: 'blue',
+      borderColor: 'blue',
+      '&: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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"
+      },
+      '&:hover': {
+        backgroundColor: 'blue.hover',
+        borderColor: 'blue.hover'
+      },
+      '&:active': {
+        backgroundColor: 'blue.pressed',
+        borderColor: 'blue.pressed'
+      }
     },
-    '&[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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"
+    '&:indeterminate': {
+      backgroundColor: 'blue.secondary',
+      borderColor: 'blue',
+      color: 'blue',
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 8,
+        height: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderLeft: 0,
+        borderRight: 0,
+        borderRadius: 3,
+        borderColor: 'currentColor'
+      },
+      '&:disabled': {
+        backgroundColor: 'mid.secondary',
+        borderColor: 'mid.primary',
+        color: 'mid.primary'
+      },
+      '&:hover': {
+        borderColor: 'blue.hover',
+        color: 'blue.hover',
+        bg: 'blue.secondary.hover'
+      },
+      '&:active': {
+        borderColor: 'blue.pressed',
+        color: 'blue.pressed'
+      }
     },
-    '&:hover': {
-      backgroundColor: 'blue.hover',
-      borderColor: 'blue.hover'
-    },
-    '&:active': {
-      backgroundColor: 'blue.pressed',
-      borderColor: 'blue.pressed'
-    }
-  },
-  '&:indeterminate': {
-    backgroundColor: 'blue.secondary',
-    borderColor: 'blue',
-    color: 'blue',
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      width: 8,
-      height: 0,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderLeft: 0,
-      borderRight: 0,
-      borderRadius: 3,
-      borderColor: 'currentColor'
-    },
     '&:disabled': {
@@ -1165,70 +1181,69 @@ backgroundColor: 'mid.secondary',
     '&:hover': {
-      borderColor: 'blue.hover',
-      color: 'blue.hover',
-      bg: 'blue.secondary.hover'
+      borderColor: 'dark.primary'
     },
     '&:active': {
-      borderColor: 'blue.pressed',
-      color: 'blue.pressed'
+      backgroundColor: 'blue.secondary',
+      borderColor: 'dark.secondary'
+    },
+    ':focus:not([data-focus-visible-added])': {
+      outline: 'none',
+      boxShadow: 'none'
+    },
+    ':focus': {
+      outline: 'none',
+      boxShadow: 'focus'
     }
   },
-  '&:disabled': {
-    backgroundColor: 'mid.secondary',
-    borderColor: 'mid.primary',
-    color: 'mid.primary'
-  },
-  '&:hover': {
-    borderColor: 'dark.primary'
-  },
-  '&:active': {
-    backgroundColor: 'blue.secondary',
-    borderColor: 'dark.secondary'
-  },
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none'
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus'
+  size: {
+    regular: {
+      height: 20,
+      width: 20,
+      minWidth: 20,
+      minHeight: 20
+    },
+    small: {
+      height: 16,
+      width: 16,
+      minWidth: 16,
+      minHeight: 16
+    }
   }
 };
-var checkbox = {
-  regular: /*#__PURE__*/_extends({}, styles$6, {
-    height: 20,
-    width: 20,
-    minWidth: 20,
-    minHeight: 20
-  }),
-  small: /*#__PURE__*/_extends({}, styles$6, {
-    height: 16,
-    width: 16,
-    minWidth: 16,
-    minHeight: 16
-  })
-};
 
-var styles$7 = {
-  appearance: 'none',
-  position: 'relative',
-  cursor: 'pointer',
-  borderRadius: '6.25rem',
-  backgroundColor: 'mid.primary',
-  borderStyle: 'solid',
-  borderColor: 'mid.primary',
-  borderWidth: 1,
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    borderRadius: '1.25rem',
-    backgroundColor: 'light.primary',
-    transition: 'transform .25s ease'
-  },
-  '&:checked': {
-    backgroundColor: 'green',
-    borderColor: 'green',
+var toggle = {
+  styles: {
+    appearance: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    borderRadius: '6.25rem',
+    backgroundColor: 'mid.primary',
+    borderStyle: 'solid',
+    borderColor: 'mid.primary',
+    borderWidth: 1,
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      borderRadius: '1.25rem',
+      backgroundColor: 'light.primary',
+      transition: 'transform .25s ease'
+    },
+    '&:checked': {
+      backgroundColor: 'green',
+      borderColor: 'green',
+      '&:hover': {
+        backgroundColor: 'green.hover',
+        borderColor: 'green.hover'
+      },
+      '&:disabled': {
+        backgroundColor: 'mid.primary',
+        borderColor: 'mid.primary',
+        '&:after': {
+          backgroundColor: 'mid.secondary'
+        }
+      }
+    },
     '&:hover': {
-      backgroundColor: 'green.hover',
-      borderColor: 'green.hover'
+      backgroundColor: 'dark.secondary',
+      borderColor: 'dark.secondary'
     },
@@ -1241,58 +1256,47 @@ '&:disabled': {
       }
+    },
+    ':not(:checked):active': {
+      backgroundColor: 'dark.secondary',
+      borderColor: 'dark.secondary',
+      ':after': {
+        backgroundColor: 'blue.secondary'
+      }
+    },
+    ':focus:not([data-focus-visible-added])': {
+      outline: 'none',
+      boxShadow: 'none'
+    },
+    ':focus': {
+      outline: 'none',
+      boxShadow: 'focus'
     }
   },
-  '&:hover': {
-    backgroundColor: 'dark.secondary',
-    borderColor: 'dark.secondary'
-  },
-  '&:disabled': {
-    backgroundColor: 'mid.primary',
-    borderColor: 'mid.primary',
-    '&:after': {
-      backgroundColor: 'mid.secondary'
-    }
-  },
-  ':not(:checked):active': {
-    backgroundColor: 'dark.secondary',
-    borderColor: 'dark.secondary',
-    ':after': {
-      backgroundColor: 'blue.secondary'
-    }
-  },
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none'
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus'
-  }
-};
-var toggle = {
-  regular: /*#__PURE__*/adminUiSystem.merge(styles$7, {
-    height: 20,
-    width: 36,
-    '&:after': {
-      width: 18,
-      height: 18
-    },
-    '&:checked': {
+  size: {
+    regular: {
+      height: 20,
+      width: 36,
       '&:after': {
-        transform: 'translateX(16px)'
+        width: 18,
+        height: 18
+      },
+      '&:checked': {
+        '&:after': {
+          transform: 'translateX(16px)'
+        }
       }
-    }
-  }),
-  small: /*#__PURE__*/adminUiSystem.merge(styles$7, {
-    height: 16,
-    width: 28,
-    '&:after': {
-      width: 14,
-      height: 14
     },
-    '&:checked': {
+    small: {
+      height: 16,
+      width: 28,
       '&:after': {
-        transform: 'translateX(12px)'
+        width: 14,
+        height: 14
+      },
+      '&:checked': {
+        '&:after': {
+          transform: 'translateX(12px)'
+        }
       }
     }
-  })
+  }
 };
@@ -1367,3 +1371,3 @@
 };
-var styles$8 = {
+var styles$6 = {
   display: 'flex',
@@ -1388,5 +1392,5 @@ position: 'relative',
 var textArea = {
-  container: /*#__PURE__*/_extends({}, styles$8),
+  container: /*#__PURE__*/_extends({}, styles$6),
   "default": /*#__PURE__*/_extends({}, textAreaInputStyle),
-  'container-error': /*#__PURE__*/_extends({}, styles$8, error$1),
+  'container-error': /*#__PURE__*/_extends({}, styles$6, error$1),
   'text-container': {
@@ -1445,3 +1449,3 @@ display: 'flex',
 
-var styles$9 = {
+var styles$7 = {
   width: 106,
@@ -1488,3 +1492,3 @@ height: 48,
 var numericStepper = {
-  'default-error': /*#__PURE__*/_extends({}, styles$9, {
+  'default-error': /*#__PURE__*/_extends({}, styles$7, {
     borderColor: 'red',
@@ -1499,3 +1503,3 @@ ':hover': {
   }),
-  "default": styles$9,
+  "default": styles$7,
   container: containerStyles
@@ -1932,3 +1936,3 @@ };
 
-var styles$a = {
+var styles$8 = {
   display: 'inline-block',
@@ -1945,6 +1949,6 @@ width: 'full',
 var skeleton = {
-  rect: /*#__PURE__*/_extends({}, styles$a, {
+  rect: /*#__PURE__*/_extends({}, styles$8, {
     borderRadius: 'default'
   }),
-  circle: /*#__PURE__*/_extends({}, styles$a, {
+  circle: /*#__PURE__*/_extends({}, styles$8, {
     borderRadius: 'circle'
@@ -1996,25 +2000,27 @@ })
 
-var styles$b = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: 24,
-  height: 24,
-  padding: 2,
-  borderRadius: 'circle',
-  textTransform: 'uppercase'
-};
 var avatar = {
-  base: /*#__PURE__*/_extends({}, styles$b, {
-    bg: 'dark.primary',
-    color: 'light.primary'
-  }),
-  primary: /*#__PURE__*/_extends({}, styles$b, {
-    bg: 'blue',
-    color: 'light.primary'
-  }),
-  danger: /*#__PURE__*/_extends({}, styles$b, {
-    bg: 'red',
-    color: 'light.primary'
-  })
+  styles: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    padding: 2,
+    borderRadius: 'circle',
+    textTransform: 'uppercase'
+  },
+  palette: {
+    base: {
+      bg: 'dark.primary',
+      color: 'light.primary'
+    },
+    primary: {
+      bg: 'blue',
+      color: 'light.primary'
+    },
+    danger: {
+      bg: 'red',
+      color: 'light.primary'
+    }
+  }
 };
@@ -2021,0 +2027,0 @@

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

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("polished"),e=require("@vtex/admin-ui-system");function o(){return(o=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(r[i]=o[i])}return r}).apply(this,arguments)}var i={dark:{primary:"#323845",secondary:"#707685"},light:{primary:"#FFFFFF",secondary:"#F4F6FB"},mid:{primary:"#898F9E",secondary:"#C4C5CA",tertiary:"#E0E2E7"},focus:"#8DB6FA",blue:{default:"#2953B2",hover:r.darken(.08,"#2953B2"),pressed:r.darken(.16,"#2953B2"),secondary:{default:"#DAE3F5",hover:r.darken(.04,"#DAE3F5"),pressed:r.darken(.08,"#DAE3F5")}},red:{default:"#CB4242",hover:r.darken(.08,"#CB4242"),pressed:r.darken(.16,"#CB4242"),secondary:{default:"#FEDADA",hover:r.darken(.04,"#FEDADA"),pressed:r.darken(.08,"#FEDADA")}},yellow:{default:"#FFBA52",hover:r.darken(.08,"#FFBA52"),pressed:r.darken(.16,"#FFBA52"),secondary:{default:"#F6E0BA",hover:r.darken(.04,"#F6E0BA"),pressed:r.darken(.08,"#F6E0BA")}},green:{default:"#368369",hover:r.darken(.08,"#368369"),pressed:r.darken(.16,"#368369"),secondary:{default:"#CEE8DE",hover:r.darken(.04,"#CEE8DE"),pressed:r.darken(.08,"#CEE8DE")}}},t={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"},a={sizes:{sm:"20rem",md:"48rem",lg:"56rem",xl:"64rem","1/2":"50%","1/4":"25%","2/4":"50%","3/4":"75%","1/8":"12.5%","2/8":"25%","3/8":"37.5%","4/8":"50%","5/8":"62.5%","6/8":"75%","7/8":"87.5%","1/12":"8.333333%","2/12":"16.666667%","3/12":"25%","4/12":"33.333333%","5/12":"41.666667%","6/12":"50%","7/12":"58.333333%","8/12":"66.666667%","9/12":"75%","10/12":"83.333333%","11/12":"91.666667%",full:"100%",screenHeight:"100vh",screenWidth:"100vw"},colors:i,space:t,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)"},fonts:{sans:"VTEXTrustVF, -apple-system, system-ui, BlinkMacSystemFont, sans-serif",mono:'"Dank Mono", "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Consolas", "Monaco", "Menlo", monospace'},fontSizes:{0:"0.75rem",1:"0.875rem",2:"1rem",3:"1.125rem",4:"1.25rem"},text:{code:{fontFamily:"mono",lineHeight:"code",fontSize:1,fontFeatureSettings:"'clig' 0, 'calt' 0",fontVariantLigatures:"normal"},small:{fontFamily:"sans",lineHeight:"small",fontSettings:"regular",fontSize:0},body:{fontFamily:"sans",lineHeight:"body",fontSettings:"regular",fontSize:1},highlight:{fontFamily:"sans",lineHeight:"highlight",fontSettings:"regular",fontSize:1},action:{fontFamily:"sans",lineHeight:"action",fontSettings:"regular",fontSize:1,textTransform:"uppercase"},subtitle:{fontFamily:"sans",lineHeight:"subtitle",fontSettings:"regular",fontSize:2},headline:{fontFamily:"sans",lineHeight:"headline",fontSettings:"regular",fontSize:4}},border:{default:{borderWidth:"1px",borderStyle:"solid",borderRadius:"default",borderColor:"mid.tertiary"},"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"mid.tertiary"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"mid.tertiary"}},zIndices:{under:-1,plain:0,over:999,1:1,2:2,3:3,4:4,5:5},fontSettings:{hairline:"'wght' 30",thin:"'wght' 50",light:"'wght' 65",regular:"'wght' 92",medium:"'wght' 120",bold:"'wght' 170",black:"'wght' 200"},lineHeights:{code:1,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 "+t["2px"]+" "+i.focus},borderRadius:{default:"4px",flat:"0px",pill:"100px",circle:"100%"}},d={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}}},n={primary:{textTransform:"uppercase",color:"light.primary",backgroundColor:"blue",":hover":{backgroundColor:"blue.hover"},":active":{backgroundColor:"blue.pressed"},":disabled":{color:"dark.primary",backgroundColor:"mid.secondary"}},secondary:{textTransform:"uppercase",backgroundColor:"blue.secondary",color:"blue",":hover":{backgroundColor:"blue.secondary.hover"},":active":{backgroundColor:"blue.secondary.pressed"},":disabled":{color:"mid.primary",backgroundColor:"light.secondary"}},tertiary:{textTransform:"capitalize",backgroundColor:"transparent",color:"blue",":hover":{color:"blue.hover",backgroundColor:e.alpha("blue.secondary.hover",.24)},":active":{color:"blue.pressed",backgroundColor:e.alpha("blue.secondary.pressed",.32)},":disabled":{color:"mid.primary"}},danger:{textTransform:"uppercase",color:"light.primary",backgroundColor:"red",":hover":{backgroundColor:"red.hover"},":active":{backgroundColor:"red.pressed"},":disabled":{color:"dark.primary",backgroundColor:"mid.secondary"}},"danger-secondary":{textTransform:"uppercase",backgroundColor:"red.secondary",color:"red",":hover":{backgroundColor:"red.secondary.hover",color:"red.hover"},":active":{backgroundColor:"red.secondary.pressed",color:"red.pressed"},":disabled":{color:"mid.primary",backgroundColor:"light.secondary"}},"danger-tertiary":{textTransform:"capitalize",backgroundColor:"transparent",color:"red",":hover":{color:"red.hover",backgroundColor:e.alpha("red.secondary.hover",.24)},":active":{color:"red.pressed",backgroundColor:e.alpha("red.secondary.pressed",.32)},":disabled":{color:"mid.primary"}},"adaptative-dark":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:e.alpha("dark.primary",.04)},":active":{backgroundColor:e.alpha("dark.primary",.08)},":disabled":{color:"mid.primary"}},"adaptative-light":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:e.alpha("light.primary",.04)},":active":{backgroundColor:e.alpha("light.primary",.08)},":disabled":{color:"mid.primary"}}},l={fontFamily:"sans",fontSettings:"regular",border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},s=o({},Object.keys(n).reduce((function(r,e){return o({},r,Object.keys(d).reduce((function(r,i){var t;return o({},r,((t={})[e+"-"+i]=o({},l,n[e],d[i]),t))}),[]))}),{})),g={border:"solid",borderWidth:1,borderColor:"mid.tertiary",margin:0},h={horizontal:o({},g,{borderBottom:0}),vertical:o({},g,{borderLeft:0,height:"auto"})},c={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"dark.primary",border:"none","> svg:nth-of-type(1)":{marginRight:1}},b={blue:{bg:"blue.secondary"},green:{bg:"green.secondary"},red:{bg:"red.secondary"},black:{bg:"dark.primary",color:"light.primary"},yellow:{bg:"yellow.secondary"},purple:{bg:"#E4E0F0"}},p={small:{height:26,paddingX:"2",lineHeight:"small",fontSettings:"'wght' 80",fontSize:0,svg:{width:16,height:16,minWidth:16,minHeight:16},button:{height:16,width:16}},regular:{height:40,paddingX:"4",lineHeight:"subtitle",fontSettings:"regular",fontSize:2,svg:{width:20,minWidth:20,height:20,minHeight:20},button:{height:20,width:20}}},m=o({},Object.keys(b).reduce((function(r,e){return o({},r,Object.keys(p).reduce((function(r,i){var t;return o({},r,((t={})[e+"-"+i]=o({},c,b[e],p[i]),t))}),[]))}),{})),u={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",borderStyle:"solid",borderWidth:1},f={opacity:1,visibility:"visible",transform:"translate3d(0, 0, 0)"},y=o({},u,{bg:e.lightness("red.secondary.default",.94),borderColor:"red.secondary"}),x=o({},u,{bg:e.lightness("green.secondary.default",.94),borderColor:"green.secondary"}),v=o({},u,{bg:e.lightness("yellow.secondary.default",.94),borderColor:"yellow.secondary"}),C=o({},u,{bg:e.lightness("blue.secondary.default",.94),borderColor:"blue.secondary"}),k={height:"full",alignItems:"flex-start"},w={borderRadius:"flat",paddingRight:4};function S(r,e){var i;return void 0===e&&(e={}),(i={})[""+r]=e,i[r+"-visible"]=o({},e,f),i[r+"-fluid"]=o({},e,k),i[r+"-sticky"]=o({},e,w),i[r+"-visible-fluid"]=o({},e,f,k),i[r+"-visible-sticky"]=o({},e,f,w),i[r+"-fluid-sticky"]=o({},e,f,w),i[r+"-visible-fluid-sticky"]=o({},e,f,w,k),i}var R=o({},S("error",y),S("warning",v),S("info",C),S("success",x)),W={cursor:"pointer",":hover":{bg:"light.secondary"}},z={table:{display:"table",width:"full"},header:{display:"table-header-group"},body:{display:"table-row-group"},"row-ltr":{display:"table-row",textAlign:"left",bg:"light.primary"},"row-rtl":{display:"table-row",textAlign:"right",bg:"light.primary"},"row-clickable-ltr":o({display:"table-row",textAlign:"left",bg:"light.primary"},W),"row-clickable-rtl":o({display:"table-row",textAlign:"right",bg:"light.primary"},W),cell:{flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"mid.tertiary",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"light.primary",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"dark.secondary",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"mid.tertiary"}},H={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:e.merge(z,{cell:{height:80}}),compact:e.merge(z,{cell:{height:48}}),variable:e.merge(z,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},F={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"mid.tertiary",justifyContent:"flex-start"},L={compact:o({},F,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:o({},F,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:o({},F,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},B={fontSettings:"regular",width:"full",height:48,borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"mid.tertiary",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"dark.primary",outline:0,transition:"snap",":hover":{borderColor:"dark.primary"},":focus":{borderColor:"blue",boxShadow:"0 0 0 1px  "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"mid.primary"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},T={borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px  "+i.red.default},":hover":{borderColor:"red.hover"}};function I(r,o){var i;return void 0===o&&(o={}),(i={})[""+r]=e.merge(B,o),i[r+"-icon"]=e.merge(B,o,{paddingLeft:44}),i[r+"-suffix"]=e.merge(B,o,{paddingRight:"64px"}),i[r+"-clear"]=e.merge(B,o,{paddingRight:"44px"}),i[r+"-icon-clear"]=e.merge(B,o,{paddingLeft:"44px",paddingRight:"44px"}),i[r+"-icon-suffix"]=e.merge(B,o,{paddingRight:"64px",paddingLeft:"44px"}),i[r+"-suffix-clear"]=e.merge(B,o,{paddingRight:"75px"}),i[r+"-icon-suffix-clear"]=e.merge(B,o,{paddingLeft:"44px",paddingRight:"75px"}),i}var A=o({container:{position:"relative"},"container-icon":{position:"relative",label:{left:"44px"}},suffix:{color:"mid.primary",borderLeftStyle:"solid",borderLeftWidth:"1px",borderLeftColor:"mid.tertiary",paddingTop:"14px",marginTop:"px",width:"32px",paddingLeft:3,lineHeight:"body",fontSettings:"regular",fontSize:1},icon:{color:"mid.primary",top:1,left:0,marginX:3,marginTop:"14px",position:"absolute",height:20,width:20,minWidth:20,minHeight:20},buttons:{right:0,top:1,height:46,paddingRight:3,position:"absolute",display:"flex",color:"dark.secondary"}},I("input"),I("input-error",T)),E={fontSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"dark.secondary",display:"flex",alignItems:"center"}},D={"horizontal-regular":o({},E,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":o({},E,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":o({},E,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":o({},E,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},j={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"mid.secondary",backgroundColor:"transparent",borderRadius:"circle",":after":{content:'""',display:"block",borderRadius:"circle",backgroundColor:"light.primary",opacity:0},":checked":{backgroundColor:"blue",borderColor:"blue",":after":{opacity:1},":hover":{backgroundColor:"blue.hover",borderColor:"blue.hover"},":active":{borderColor:"blue.pressed",backgroundColor:"blue.pressed"}},":disabled":{cursor:"not-allowed",backgroundColor:"mid.tertiary",borderColor:"mid.primary",":after":{backgroundColor:"mid.primary"}},":hover":{borderColor:"dark.primary"},":active":{borderColor:"dark.secondary",backgroundColor:"blue.secondary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},X={regular:e.merge(j,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:e.merge(j,{height:16,width:16,padding:1,":after":{width:6,height:6}})},Y={appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"mid.primary",borderRadius:3,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center","&:checked":{backgroundColor:"blue",borderColor:"blue","&: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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&:hover":{backgroundColor:"blue.hover",borderColor:"blue.hover"},"&:active":{backgroundColor:"blue.pressed",borderColor:"blue.pressed"}},"&:indeterminate":{backgroundColor:"blue.secondary",borderColor:"blue",color:"blue","&:after":{content:'""',position:"absolute",width:8,height:0,borderWidth:1,borderStyle:"solid",borderLeft:0,borderRight:0,borderRadius:3,borderColor:"currentColor"},"&:disabled":{backgroundColor:"mid.secondary",borderColor:"mid.primary",color:"mid.primary"},"&:hover":{borderColor:"blue.hover",color:"blue.hover",bg:"blue.secondary.hover"},"&:active":{borderColor:"blue.pressed",color:"blue.pressed"}},"&:disabled":{backgroundColor:"mid.secondary",borderColor:"mid.primary",color:"mid.primary"},"&:hover":{borderColor:"dark.primary"},"&:active":{backgroundColor:"blue.secondary",borderColor:"dark.secondary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},O={regular:o({},Y,{height:20,width:20,minWidth:20,minHeight:20}),small:o({},Y,{height:16,width:16,minWidth:16,minHeight:16})},M={appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"mid.primary",borderStyle:"solid",borderColor:"mid.primary",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"light.primary",transition:"transform .25s ease"},"&:checked":{backgroundColor:"green",borderColor:"green","&:hover":{backgroundColor:"green.hover",borderColor:"green.hover"},"&:disabled":{backgroundColor:"mid.primary",borderColor:"mid.primary","&:after":{backgroundColor:"mid.secondary"}}},"&:hover":{backgroundColor:"dark.secondary",borderColor:"dark.secondary"},"&:disabled":{backgroundColor:"mid.primary",borderColor:"mid.primary","&:after":{backgroundColor:"mid.secondary"}},":not(:checked):active":{backgroundColor:"dark.secondary",borderColor:"dark.secondary",":after":{backgroundColor:"blue.secondary"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},P={regular:e.merge(M,{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}}),small:e.merge(M,{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}})},V={paddingTop:24,height:100,resize:"none",fontSettings:"regular",width:"full",borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"mid.tertiary",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"dark.primary",outline:0,transition:"snap",":hover":{borderColor:"dark.primary"},":focus":{borderColor:"blue",boxShadow:"0 0 0 1px  "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"mid.primary"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},q={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column",width:"full"},_={textarea:{borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px  "+i.red.default},":hover":{borderColor:"red.hover"}}},G={container:o({},q),default:o({},V),"container-error":o({},q,_),"text-container":{display:"flex",justifyContent:"space-between",paddingTop:1},"floating-label":{fontSize:1,left:12,paddingTop:2,color:"mid.primary",marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"}},U={visibility:"hidden",cursor:"pointer",bg:"light.primary",borderRadius:"default",borderWidth:1,borderStyle:"solid",borderColor:"mid.secondary",boxShadow:"menu",outline:"none",marginTop:1,paddingY:4,width:"max-content",position:"absolute",zIndex:999},J={display:"flex",alignItems:"center",height:24,paddingX:4,cursor:"pointer",bg:"light.primary"},K={menu:U,"menu-visible":o({},U,{visibility:"visible"}),item:J,"item-active":o({},J,{bg:"blue.secondary"})},N={width:106,height:48,appearance:"none","::-webkit-inner-spin-button ":{WebkitAppearance:"none",margin:0},paddingLeft:36,paddingRight:36,textAlign:"center",color:"dark.primary",borderStyle:"solid",borderWidth:1,borderColor:"mid.primary",borderRadius:"default",backgroundColor:"light.primary",":hover":{borderColor:"dark.primary"},":disabled":{backgroundColor:"light.secondary",color:"mid.primary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},Q={"default-error":o({},N,{borderColor:"red",":hover":{borderColor:"red"},":focus":{outline:"none",boxShadow:"none"}}),default:N,container:{position:"relative",display:"flex",alignItems:"center",height:48,width:106,paddingY:12}},Z={display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",height:48,width:"inherit",boxShadow:"0 0 0 0 transparent",borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"mid.secondary",borderRadius:"default",bg:"inherit",fontSize:1,color:"dark.secondary",outline:0,":hover":{borderColor:"mid.primary"},":hover > svg":{color:"dark.primary"},":focus":{borderColor:i.blue.default,boxShadow:"0 0 0 1px "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"dark.secondary",cursor:"initial"},":disabled > svg":{color:"dark.secondary"}},$={position:"absolute",top:"25%",lineHeight:1.5,paddingLeft:3,color:"dark.secondary",zIndex:2},rr={color:"dark.primary",outline:"none",fontSize:1,appearance:"none",backgroundColor:"transparent",border:"1px solid",borderColor:"mid.secondary",borderRadius:"default",paddingTop:"1.125rem",paddingLeft:3,width:"100%",height:"100%",":focus":{borderColor:"blue",boxShadow:"0 0 0 1px "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"dark.primary",opacity:1},":disabled > svg":{color:"dark.secondary"}},er={container:{width:288,position:"relative"},optionsPortal:{position:"absolute",zIndex:999,width:"inherit",backgroundColor:"light.primary",outline:"none"},optionsContainer:{display:"flex",flexDirection:"column",borderWidth:1,borderStyle:"solid",borderColor:"mid.primary",borderRadius:"default"},optionsLabel:{text:"small",lineHeight:1.5,paddingTop:2,paddingBottom:1,paddingLeft:3,color:"mid.primary"},optionsUl:{paddingBottom:1,maxHeight:150,width:"inherit",overflowY:"auto",borderBottomLeftRadius:4,borderBottomRightRadius:4},item:{color:"dark.primary",verticalAlign:"middle",listStyleType:"none",display:"flex",alignItems:"center",cursor:"pointer"},button:Z,buttonError:o({},Z,{borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px "+i.red.default},":hover":{borderColor:"red"}}),selectedItem:{lineHeight:1.43,color:"dark.primary",float:"left",marginTop:"1.125rem",":not(:empty) + label":{fontSize:0,lineHeight:1.5}},label:{lineHeight:1.43,position:"absolute",left:12},mobileContainer:{position:"relative",width:288,height:48},mobileLabel:$,mobileLabelSelectedItem:o({},$,{top:2,text:"small"}),mobileSelect:rr,mobileSelectError:o({},rr,{borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px "+i.red.default}}),mobileIcon:{position:"absolute",right:12,top:"25%",color:"dark.secondary"}},or={marginY:"2px",paddingX:1,fontSize:1,border:"none",textTransform:"initial",width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}},ir={display:"flex",flexDirection:"column",bg:"light.primary",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"mid.secondary",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"mid.secondary",width:"calc(100% -"+t[3]+")",marginX:"-"+t[3],outline:"none"},item:o({},or,{color:"dark.primary",":focus":{bg:e.alpha("blue.secondary.default",.32),outline:"none",boxShadow:"none"},":hover":{color:"dark.primary"}}),"item-dangerous":o({},or,{color:"red",":focus":{bg:e.alpha("red.secondary.default",.32),outline:"none",boxShadow:"none"},":hover":{color:"red"}})},tr={outline:"none",bg:"light.primary",borderRadius:3,borderColor:"mid.tertiary",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)"}},ar={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"mid.tertiary",borderStyle:"solid","button + button":{marginLeft:4},paddingY:4,paddingX:6,borderTopWidth:0,borderLeftWidth:0,borderRightWidth:0,borderBottomWidth:1,h1:{variant:"text.subtitle",lineHeight:0},position:"sticky",top:0,left:0,right:0,bg:"light.primary",zIndex:999},dr={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"mid.tertiary",borderStyle:"solid",borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,position:"sticky",bottom:0,left:0,right:0,bg:"light.primary",padding:6,flexDirection:["column-reverse","column-reverse","row"],">button":{width:["full","full","inherit"]},"* + button":{marginLeft:[0,0,4],marginBottom:[4,4,0]}},nr={paddingTop:4,paddingX:6,paddingBottom:6},lr=o({},nr,{scrollbarWidth:"thin",scrollbarColor:"light.primary","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"mid.tertiary",borderRadius:"6px",border:"2px solid",color:"light.primary"}},{overflowY:"auto"}),sr={display:"inline-block",width:"full",height:"full",backgroundColor:"light.secondary",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n    90deg,\n    "+i.light.secondary+",\n    white,\n    "+i.light.secondary+"\n  )"},gr={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"};exports.theme=o({},a,{components:{button:s,list:L,table:H,controlGroup:D,toggle:P,checkbox:O,radio:X,abstractInput:A,input:{container:{display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column"},"floating-label":{fontSize:1,left:12,paddingTop:2,color:"mid.primary",marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"},"text-container":{display:"flex",justifyContent:"space-between",alignItems:"",paddingTop:1}},tooltip:{backgroundColor:"dark.primary",color:"light.primary",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32,zIndex:"over"},menu:ir,modal:{backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:r.rgba(i.dark.primary,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":o({},tr,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":o({},tr,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":o({},tr,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":o({},ar,{height:56}),"header-regular":o({},ar,{height:56}),"header-large":o({},ar,{height:80}),"content-with-small-scroll-area":o({},lr,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":o({},lr,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":o({},lr,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":o({},lr,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":o({},lr,{height:"calc(100% - 10rem)"}),content:o({},nr),"footer-small":o({},dr,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":o({},dr,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":o({},dr,{borderTopWidth:1,minHeight:"5rem"})},skeleton:{rect:o({},sr,{borderRadius:"default"}),circle:o({},sr,{borderRadius:"circle"})},divider:h,collapsible:{container:{bg:"light.primary",borderColor:"mid.tertiary",borderStyle:"solid",borderWidth:1,borderRadius:"default"},"container-grouped":{bg:"light.primary",borderRadius:"default"},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:2,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6},"header-nested":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:4,paddingLeft:0,"div > button:nth-of-type(n+2)":{marginLeft:1}},"section-nested":{paddingX:4,paddingBottom:4}},avatar:{base:o({},gr,{bg:"dark.primary",color:"light.primary"}),primary:o({},gr,{bg:"blue",color:"light.primary"}),danger:o({},gr,{bg:"red",color:"light.primary"})},tag:m,anchor:{font:"inherit",color:"blue",textDecoration:"none",":active":{color:"blue.pressed",textDecoration:"underline"},":hover":{color:"blue.hover",textDecoration:"underline"}},dropdown:K,textArea:G,numericStepper:Q,select:er,alert:R}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("polished"),r=require("@vtex/admin-ui-system");function o(){return(o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i])}return e}).apply(this,arguments)}var i={dark:{primary:"#323845",secondary:"#707685"},light:{primary:"#FFFFFF",secondary:"#F4F6FB"},mid:{primary:"#898F9E",secondary:"#C4C5CA",tertiary:"#E0E2E7"},focus:"#8DB6FA",blue:{default:"#2953B2",hover:e.darken(.08,"#2953B2"),pressed:e.darken(.16,"#2953B2"),secondary:{default:"#DAE3F5",hover:e.darken(.04,"#DAE3F5"),pressed:e.darken(.08,"#DAE3F5")}},red:{default:"#CB4242",hover:e.darken(.08,"#CB4242"),pressed:e.darken(.16,"#CB4242"),secondary:{default:"#FEDADA",hover:e.darken(.04,"#FEDADA"),pressed:e.darken(.08,"#FEDADA")}},yellow:{default:"#FFBA52",hover:e.darken(.08,"#FFBA52"),pressed:e.darken(.16,"#FFBA52"),secondary:{default:"#F6E0BA",hover:e.darken(.04,"#F6E0BA"),pressed:e.darken(.08,"#F6E0BA")}},green:{default:"#368369",hover:e.darken(.08,"#368369"),pressed:e.darken(.16,"#368369"),secondary:{default:"#CEE8DE",hover:e.darken(.04,"#CEE8DE"),pressed:e.darken(.08,"#CEE8DE")}}},t={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"},a={sizes:{sm:"20rem",md:"48rem",lg:"56rem",xl:"64rem","1/2":"50%","1/4":"25%","2/4":"50%","3/4":"75%","1/8":"12.5%","2/8":"25%","3/8":"37.5%","4/8":"50%","5/8":"62.5%","6/8":"75%","7/8":"87.5%","1/12":"8.333333%","2/12":"16.666667%","3/12":"25%","4/12":"33.333333%","5/12":"41.666667%","6/12":"50%","7/12":"58.333333%","8/12":"66.666667%","9/12":"75%","10/12":"83.333333%","11/12":"91.666667%",full:"100%",screenHeight:"100vh",screenWidth:"100vw"},colors:i,space:t,breakpoints:["640px","768px","1024px","1280px"],transitions:{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)"},fonts:{sans:"VTEXTrustVF, -apple-system, system-ui, BlinkMacSystemFont, sans-serif",mono:'"Dank Mono", "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Consolas", "Monaco", "Menlo", monospace'},fontSizes:{0:"0.75rem",1:"0.875rem",2:"1rem",3:"1.125rem",4:"1.25rem"},text:{code:{fontFamily:"mono",lineHeight:"code",fontSize:1,fontFeatureSettings:"'clig' 0, 'calt' 0",fontVariantLigatures:"normal"},small:{fontFamily:"sans",lineHeight:"small",fontSettings:"regular",fontSize:0},body:{fontFamily:"sans",lineHeight:"body",fontSettings:"regular",fontSize:1},highlight:{fontFamily:"sans",lineHeight:"highlight",fontSettings:"regular",fontSize:1},action:{fontFamily:"sans",lineHeight:"action",fontSettings:"regular",fontSize:1,textTransform:"uppercase"},subtitle:{fontFamily:"sans",lineHeight:"subtitle",fontSettings:"regular",fontSize:2},headline:{fontFamily:"sans",lineHeight:"headline",fontSettings:"regular",fontSize:4}},border:{default:{borderWidth:"1px",borderStyle:"solid",borderRadius:"default",borderColor:"mid.tertiary"},"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"mid.tertiary"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"mid.tertiary"}},zIndices:{under:-1,plain:0,over:999,1:1,2:2,3:3,4:4,5:5},fontSettings:{hairline:"'wght' 30",thin:"'wght' 50",light:"'wght' 65",regular:"'wght' 92",medium:"'wght' 120",bold:"'wght' 170",black:"'wght' 200"},lineHeights:{code:1,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 "+t["2px"]+" "+i.focus},borderRadius:{default:"4px",flat:"0px",pill:"100px",circle:"100%"}},d={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}}},l={primary:{textTransform:"uppercase",color:"light.primary",backgroundColor:"blue",":hover":{backgroundColor:"blue.hover"},":active":{backgroundColor:"blue.pressed"},":disabled":{color:"dark.primary",backgroundColor:"mid.secondary"}},secondary:{textTransform:"uppercase",backgroundColor:"blue.secondary",color:"blue",":hover":{backgroundColor:"blue.secondary.hover"},":active":{backgroundColor:"blue.secondary.pressed"},":disabled":{color:"mid.primary",backgroundColor:"light.secondary"}},tertiary:{textTransform:"capitalize",backgroundColor:"transparent",color:"blue",":hover":{color:"blue.hover",backgroundColor:r.alpha("blue.secondary.hover",.24)},":active":{color:"blue.pressed",backgroundColor:r.alpha("blue.secondary.pressed",.32)},":disabled":{color:"mid.primary"}},danger:{textTransform:"uppercase",color:"light.primary",backgroundColor:"red",":hover":{backgroundColor:"red.hover"},":active":{backgroundColor:"red.pressed"},":disabled":{color:"dark.primary",backgroundColor:"mid.secondary"}},"danger-secondary":{textTransform:"uppercase",backgroundColor:"red.secondary",color:"red",":hover":{backgroundColor:"red.secondary.hover",color:"red.hover"},":active":{backgroundColor:"red.secondary.pressed",color:"red.pressed"},":disabled":{color:"mid.primary",backgroundColor:"light.secondary"}},"danger-tertiary":{textTransform:"capitalize",backgroundColor:"transparent",color:"red",":hover":{color:"red.hover",backgroundColor:r.alpha("red.secondary.hover",.24)},":active":{color:"red.pressed",backgroundColor:r.alpha("red.secondary.pressed",.32)},":disabled":{color:"mid.primary"}},"adaptative-dark":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:r.alpha("dark.primary",.04)},":active":{backgroundColor:r.alpha("dark.primary",.08)},":disabled":{color:"mid.primary"}},"adaptative-light":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:r.alpha("light.primary",.04)},":active":{backgroundColor:r.alpha("light.primary",.08)},":disabled":{color:"mid.primary"}}},n={fontFamily:"sans",fontSettings:"regular",border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},s=o({},Object.keys(l).reduce((function(e,r){return o({},e,Object.keys(d).reduce((function(e,i){var t;return o({},e,((t={})[r+"-"+i]=o({},n,l[r],d[i]),t))}),[]))}),{})),g={border:"solid",borderWidth:1,borderColor:"mid.tertiary",margin:0},h={horizontal:o({},g,{borderBottom:0}),vertical:o({},g,{borderLeft:0,height:"auto"})},c={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"dark.primary",border:"none","> svg:nth-of-type(1)":{marginRight:1}},b={blue:{bg:"blue.secondary"},green:{bg:"green.secondary"},red:{bg:"red.secondary"},black:{bg:"dark.primary",color:"light.primary"},yellow:{bg:"yellow.secondary"},purple:{bg:"#E4E0F0"}},p={small:{height:26,paddingX:"2",lineHeight:"small",fontSettings:"'wght' 80",fontSize:0,svg:{width:16,height:16,minWidth:16,minHeight:16},button:{height:16,width:16}},regular:{height:40,paddingX:"4",lineHeight:"subtitle",fontSettings:"regular",fontSize:2,svg:{width:20,minWidth:20,height:20,minHeight:20},button:{height:20,width:20}}},m=o({},Object.keys(b).reduce((function(e,r){return o({},e,Object.keys(p).reduce((function(e,i){var t;return o({},e,((t={})[r+"-"+i]=o({},c,b[r],p[i]),t))}),[]))}),{})),u={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",borderStyle:"solid",borderWidth:1},f={opacity:1,visibility:"visible",transform:"translate3d(0, 0, 0)"},y=o({},u,{bg:r.lightness("red.secondary.default",.94),borderColor:"red.secondary"}),x=o({},u,{bg:r.lightness("green.secondary.default",.94),borderColor:"green.secondary"}),v=o({},u,{bg:r.lightness("yellow.secondary.default",.94),borderColor:"yellow.secondary"}),C=o({},u,{bg:r.lightness("blue.secondary.default",.94),borderColor:"blue.secondary"}),k={height:"full",alignItems:"flex-start"},w={borderRadius:"flat",paddingRight:4};function S(e,r){var i;return void 0===r&&(r={}),(i={})[""+e]=r,i[e+"-visible"]=o({},r,f),i[e+"-fluid"]=o({},r,k),i[e+"-sticky"]=o({},r,w),i[e+"-visible-fluid"]=o({},r,f,k),i[e+"-visible-sticky"]=o({},r,f,w),i[e+"-fluid-sticky"]=o({},r,f,w),i[e+"-visible-fluid-sticky"]=o({},r,f,w,k),i}var R=o({},S("error",y),S("warning",v),S("info",C),S("success",x)),W={cursor:"pointer",":hover":{bg:"light.secondary"}},z={table:{display:"table",width:"full"},header:{display:"table-header-group"},body:{display:"table-row-group"},"row-ltr":{display:"table-row",textAlign:"left",bg:"light.primary"},"row-rtl":{display:"table-row",textAlign:"right",bg:"light.primary"},"row-clickable-ltr":o({display:"table-row",textAlign:"left",bg:"light.primary"},W),"row-clickable-rtl":o({display:"table-row",textAlign:"right",bg:"light.primary"},W),cell:{flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"mid.tertiary",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"light.primary",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"dark.secondary",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"mid.tertiary"}},H={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(z,{cell:{height:80}}),compact:r.merge(z,{cell:{height:48}}),variable:r.merge(z,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},F={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"mid.tertiary",justifyContent:"flex-start"},L={compact:o({},F,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:o({},F,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:o({},F,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},B={fontSettings:"regular",width:"full",height:48,borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"mid.tertiary",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"dark.primary",outline:0,transition:"snap",":hover":{borderColor:"dark.primary"},":focus":{borderColor:"blue",boxShadow:"0 0 0 1px  "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"mid.primary"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},T={borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px  "+i.red.default},":hover":{borderColor:"red.hover"}};function I(e,o){var i;return void 0===o&&(o={}),(i={})[""+e]=r.merge(B,o),i[e+"-icon"]=r.merge(B,o,{paddingLeft:44}),i[e+"-suffix"]=r.merge(B,o,{paddingRight:"64px"}),i[e+"-clear"]=r.merge(B,o,{paddingRight:"44px"}),i[e+"-icon-clear"]=r.merge(B,o,{paddingLeft:"44px",paddingRight:"44px"}),i[e+"-icon-suffix"]=r.merge(B,o,{paddingRight:"64px",paddingLeft:"44px"}),i[e+"-suffix-clear"]=r.merge(B,o,{paddingRight:"75px"}),i[e+"-icon-suffix-clear"]=r.merge(B,o,{paddingLeft:"44px",paddingRight:"75px"}),i}var A=o({container:{position:"relative"},"container-icon":{position:"relative",label:{left:"44px"}},suffix:{color:"mid.primary",borderLeftStyle:"solid",borderLeftWidth:"1px",borderLeftColor:"mid.tertiary",paddingTop:"14px",marginTop:"px",width:"32px",paddingLeft:3,lineHeight:"body",fontSettings:"regular",fontSize:1},icon:{color:"mid.primary",top:1,left:0,marginX:3,marginTop:"14px",position:"absolute",height:20,width:20,minWidth:20,minHeight:20},buttons:{right:0,top:1,height:46,paddingRight:3,position:"absolute",display:"flex",color:"dark.secondary"}},I("input"),I("input-error",T)),E={fontSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"dark.secondary",display:"flex",alignItems:"center"}},D={"horizontal-regular":o({},E,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":o({},E,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":o({},E,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":o({},E,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},j={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"mid.secondary",backgroundColor:"transparent",borderRadius:"circle",":after":{content:'""',display:"block",borderRadius:"circle",backgroundColor:"light.primary",opacity:0},":checked":{backgroundColor:"blue",borderColor:"blue",":after":{opacity:1},":hover":{backgroundColor:"blue.hover",borderColor:"blue.hover"},":active":{borderColor:"blue.pressed",backgroundColor:"blue.pressed"}},":disabled":{cursor:"not-allowed",backgroundColor:"mid.tertiary",borderColor:"mid.primary",":after":{backgroundColor:"mid.primary"}},":hover":{borderColor:"dark.primary"},":active":{borderColor:"dark.secondary",backgroundColor:"blue.secondary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},X={regular:r.merge(j,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:r.merge(j,{height:16,width:16,padding:1,":after":{width:6,height:6}})},Y={paddingTop:24,height:100,resize:"none",fontSettings:"regular",width:"full",borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"mid.tertiary",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"dark.primary",outline:0,transition:"snap",":hover":{borderColor:"dark.primary"},":focus":{borderColor:"blue",boxShadow:"0 0 0 1px  "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"mid.primary"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},O={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column",width:"full"},M={textarea:{borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px  "+i.red.default},":hover":{borderColor:"red.hover"}}},P={container:o({},O),default:o({},Y),"container-error":o({},O,M),"text-container":{display:"flex",justifyContent:"space-between",paddingTop:1},"floating-label":{fontSize:1,left:12,paddingTop:2,color:"mid.primary",marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"}},V={visibility:"hidden",cursor:"pointer",bg:"light.primary",borderRadius:"default",borderWidth:1,borderStyle:"solid",borderColor:"mid.secondary",boxShadow:"menu",outline:"none",marginTop:1,paddingY:4,width:"max-content",position:"absolute",zIndex:999},q={display:"flex",alignItems:"center",height:24,paddingX:4,cursor:"pointer",bg:"light.primary"},_={menu:V,"menu-visible":o({},V,{visibility:"visible"}),item:q,"item-active":o({},q,{bg:"blue.secondary"})},G={width:106,height:48,appearance:"none","::-webkit-inner-spin-button ":{WebkitAppearance:"none",margin:0},paddingLeft:36,paddingRight:36,textAlign:"center",color:"dark.primary",borderStyle:"solid",borderWidth:1,borderColor:"mid.primary",borderRadius:"default",backgroundColor:"light.primary",":hover":{borderColor:"dark.primary"},":disabled":{backgroundColor:"light.secondary",color:"mid.primary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},U={"default-error":o({},G,{borderColor:"red",":hover":{borderColor:"red"},":focus":{outline:"none",boxShadow:"none"}}),default:G,container:{position:"relative",display:"flex",alignItems:"center",height:48,width:106,paddingY:12}},J={display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",height:48,width:"inherit",boxShadow:"0 0 0 0 transparent",borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"mid.secondary",borderRadius:"default",bg:"inherit",fontSize:1,color:"dark.secondary",outline:0,":hover":{borderColor:"mid.primary"},":hover > svg":{color:"dark.primary"},":focus":{borderColor:i.blue.default,boxShadow:"0 0 0 1px "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"dark.secondary",cursor:"initial"},":disabled > svg":{color:"dark.secondary"}},K={position:"absolute",top:"25%",lineHeight:1.5,paddingLeft:3,color:"dark.secondary",zIndex:2},N={color:"dark.primary",outline:"none",fontSize:1,appearance:"none",backgroundColor:"transparent",border:"1px solid",borderColor:"mid.secondary",borderRadius:"default",paddingTop:"1.125rem",paddingLeft:3,width:"100%",height:"100%",":focus":{borderColor:"blue",boxShadow:"0 0 0 1px "+i.blue.default},":disabled":{bg:"light.secondary",borderColor:"mid.primary",color:"dark.primary",opacity:1},":disabled > svg":{color:"dark.secondary"}},Q={container:{width:288,position:"relative"},optionsPortal:{position:"absolute",zIndex:999,width:"inherit",backgroundColor:"light.primary",outline:"none"},optionsContainer:{display:"flex",flexDirection:"column",borderWidth:1,borderStyle:"solid",borderColor:"mid.primary",borderRadius:"default"},optionsLabel:{text:"small",lineHeight:1.5,paddingTop:2,paddingBottom:1,paddingLeft:3,color:"mid.primary"},optionsUl:{paddingBottom:1,maxHeight:150,width:"inherit",overflowY:"auto",borderBottomLeftRadius:4,borderBottomRightRadius:4},item:{color:"dark.primary",verticalAlign:"middle",listStyleType:"none",display:"flex",alignItems:"center",cursor:"pointer"},button:J,buttonError:o({},J,{borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px "+i.red.default},":hover":{borderColor:"red"}}),selectedItem:{lineHeight:1.43,color:"dark.primary",float:"left",marginTop:"1.125rem",":not(:empty) + label":{fontSize:0,lineHeight:1.5}},label:{lineHeight:1.43,position:"absolute",left:12},mobileContainer:{position:"relative",width:288,height:48},mobileLabel:K,mobileLabelSelectedItem:o({},K,{top:2,text:"small"}),mobileSelect:N,mobileSelectError:o({},N,{borderColor:"red",":focus":{borderColor:"red",boxShadow:"0 0 0 1px "+i.red.default}}),mobileIcon:{position:"absolute",right:12,top:"25%",color:"dark.secondary"}},Z={marginY:"2px",paddingX:1,fontSize:1,border:"none",textTransform:"initial",width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}},$={display:"flex",flexDirection:"column",bg:"light.primary",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"mid.secondary",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"mid.secondary",width:"calc(100% -"+t[3]+")",marginX:"-"+t[3],outline:"none"},item:o({},Z,{color:"dark.primary",":focus":{bg:r.alpha("blue.secondary.default",.32),outline:"none",boxShadow:"none"},":hover":{color:"dark.primary"}}),"item-dangerous":o({},Z,{color:"red",":focus":{bg:r.alpha("red.secondary.default",.32),outline:"none",boxShadow:"none"},":hover":{color:"red"}})},ee={outline:"none",bg:"light.primary",borderRadius:3,borderColor:"mid.tertiary",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)"}},re={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"mid.tertiary",borderStyle:"solid","button + button":{marginLeft:4},paddingY:4,paddingX:6,borderTopWidth:0,borderLeftWidth:0,borderRightWidth:0,borderBottomWidth:1,h1:{variant:"text.subtitle",lineHeight:0},position:"sticky",top:0,left:0,right:0,bg:"light.primary",zIndex:999},oe={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"mid.tertiary",borderStyle:"solid",borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,position:"sticky",bottom:0,left:0,right:0,bg:"light.primary",padding:6,flexDirection:["column-reverse","column-reverse","row"],">button":{width:["full","full","inherit"]},"* + button":{marginLeft:[0,0,4],marginBottom:[4,4,0]}},ie={paddingTop:4,paddingX:6,paddingBottom:6},te=o({},ie,{scrollbarWidth:"thin",scrollbarColor:"light.primary","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"mid.tertiary",borderRadius:"6px",border:"2px solid",color:"light.primary"}},{overflowY:"auto"}),ae={display:"inline-block",width:"full",height:"full",backgroundColor:"light.secondary",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n    90deg,\n    "+i.light.secondary+",\n    white,\n    "+i.light.secondary+"\n  )"};exports.theme=o({},a,{components:{button:s,list:L,table:H,controlGroup:D,toggle:{styles:{appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"mid.primary",borderStyle:"solid",borderColor:"mid.primary",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"light.primary",transition:"transform .25s ease"},"&:checked":{backgroundColor:"green",borderColor:"green","&:hover":{backgroundColor:"green.hover",borderColor:"green.hover"},"&:disabled":{backgroundColor:"mid.primary",borderColor:"mid.primary","&:after":{backgroundColor:"mid.secondary"}}},"&:hover":{backgroundColor:"dark.secondary",borderColor:"dark.secondary"},"&:disabled":{backgroundColor:"mid.primary",borderColor:"mid.primary","&:after":{backgroundColor:"mid.secondary"}},":not(:checked):active":{backgroundColor:"dark.secondary",borderColor:"dark.secondary",":after":{backgroundColor:"blue.secondary"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},size:{regular:{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}},small:{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}}}},checkbox:{styles:{appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"mid.primary",borderRadius:3,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center","&:checked":{backgroundColor:"blue",borderColor:"blue","&: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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&:hover":{backgroundColor:"blue.hover",borderColor:"blue.hover"},"&:active":{backgroundColor:"blue.pressed",borderColor:"blue.pressed"}},"&:indeterminate":{backgroundColor:"blue.secondary",borderColor:"blue",color:"blue","&:after":{content:'""',position:"absolute",width:8,height:0,borderWidth:1,borderStyle:"solid",borderLeft:0,borderRight:0,borderRadius:3,borderColor:"currentColor"},"&:disabled":{backgroundColor:"mid.secondary",borderColor:"mid.primary",color:"mid.primary"},"&:hover":{borderColor:"blue.hover",color:"blue.hover",bg:"blue.secondary.hover"},"&:active":{borderColor:"blue.pressed",color:"blue.pressed"}},"&:disabled":{backgroundColor:"mid.secondary",borderColor:"mid.primary",color:"mid.primary"},"&:hover":{borderColor:"dark.primary"},"&:active":{backgroundColor:"blue.secondary",borderColor:"dark.secondary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},size:{regular:{height:20,width:20,minWidth:20,minHeight:20},small:{height:16,width:16,minWidth:16,minHeight:16}}},radio:X,abstractInput:A,input:{container:{display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column"},"floating-label":{fontSize:1,left:12,paddingTop:2,color:"mid.primary",marginBottom:3,position:"absolute",transform:"translate(0, 16px) scale(1)",transformOrigin:"top left",transition:"all 0.2s ease-out;"},"text-container":{display:"flex",justifyContent:"space-between",alignItems:"",paddingTop:1}},tooltip:{backgroundColor:"dark.primary",color:"light.primary",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32,zIndex:"over"},menu:$,modal:{backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:e.rgba(i.dark.primary,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":o({},ee,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":o({},ee,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":o({},ee,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":o({},re,{height:56}),"header-regular":o({},re,{height:56}),"header-large":o({},re,{height:80}),"content-with-small-scroll-area":o({},te,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":o({},te,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":o({},te,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":o({},te,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":o({},te,{height:"calc(100% - 10rem)"}),content:o({},ie),"footer-small":o({},oe,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":o({},oe,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":o({},oe,{borderTopWidth:1,minHeight:"5rem"})},skeleton:{rect:o({},ae,{borderRadius:"default"}),circle:o({},ae,{borderRadius:"circle"})},divider:h,collapsible:{container:{bg:"light.primary",borderColor:"mid.tertiary",borderStyle:"solid",borderWidth:1,borderRadius:"default"},"container-grouped":{bg:"light.primary",borderRadius:"default"},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:2,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6},"header-nested":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:4,paddingLeft:0,"div > button:nth-of-type(n+2)":{marginLeft:1}},"section-nested":{paddingX:4,paddingBottom:4}},avatar:{styles:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},palette:{base:{bg:"dark.primary",color:"light.primary"},primary:{bg:"blue",color:"light.primary"},danger:{bg:"red",color:"light.primary"}}},tag:m,anchor:{font:"inherit",color:"blue",textDecoration:"none",":active":{color:"blue.pressed",textDecoration:"underline"},":hover":{color:"blue.hover",textDecoration:"underline"}},dropdown:_,textArea:P,numericStepper:U,select:Q,alert:R}});
 //# sourceMappingURL=admin-ui-theme.cjs.production.min.js.map

dist/admin-ui-theme.esm.js

@@ -142,3 +142,3 @@ import { darken, rgba } from 'polished';
   breakpoints: ['640px', '768px', '1024px', '1280px'],
-  transition: {
+  transitions: {
     snap: 'all 70ms cubic-bezier(0.2, 0.2, 0.38, 0.9)',
@@ -1110,46 +1110,62 @@ fade: 'all 110ms cubic-bezier(0.2, 0.2, 0.38, 0.9)',
 
-var styles$6 = {
-  appearance: 'none',
-  borderStyle: 'solid',
-  borderWidth: 1,
-  borderColor: 'mid.primary',
-  borderRadius: 3,
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  '&:checked': {
-    backgroundColor: 'blue',
-    borderColor: 'blue',
-    '&: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>\")"
+var checkbox = {
+  styles: {
+    appearance: 'none',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: 'mid.primary',
+    borderRadius: 3,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&:checked': {
+      backgroundColor: 'blue',
+      borderColor: 'blue',
+      '&: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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"
+      },
+      '&:hover': {
+        backgroundColor: 'blue.hover',
+        borderColor: 'blue.hover'
+      },
+      '&:active': {
+        backgroundColor: 'blue.pressed',
+        borderColor: 'blue.pressed'
+      }
     },
-    '&[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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"
+    '&:indeterminate': {
+      backgroundColor: 'blue.secondary',
+      borderColor: 'blue',
+      color: 'blue',
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 8,
+        height: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderLeft: 0,
+        borderRight: 0,
+        borderRadius: 3,
+        borderColor: 'currentColor'
+      },
+      '&:disabled': {
+        backgroundColor: 'mid.secondary',
+        borderColor: 'mid.primary',
+        color: 'mid.primary'
+      },
+      '&:hover': {
+        borderColor: 'blue.hover',
+        color: 'blue.hover',
+        bg: 'blue.secondary.hover'
+      },
+      '&:active': {
+        borderColor: 'blue.pressed',
+        color: 'blue.pressed'
+      }
     },
-    '&:hover': {
-      backgroundColor: 'blue.hover',
-      borderColor: 'blue.hover'
-    },
-    '&:active': {
-      backgroundColor: 'blue.pressed',
-      borderColor: 'blue.pressed'
-    }
-  },
-  '&:indeterminate': {
-    backgroundColor: 'blue.secondary',
-    borderColor: 'blue',
-    color: 'blue',
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      width: 8,
-      height: 0,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderLeft: 0,
-      borderRight: 0,
-      borderRadius: 3,
-      borderColor: 'currentColor'
-    },
     '&:disabled': {
@@ -1161,70 +1177,69 @@ backgroundColor: 'mid.secondary',
     '&:hover': {
-      borderColor: 'blue.hover',
-      color: 'blue.hover',
-      bg: 'blue.secondary.hover'
+      borderColor: 'dark.primary'
     },
     '&:active': {
-      borderColor: 'blue.pressed',
-      color: 'blue.pressed'
+      backgroundColor: 'blue.secondary',
+      borderColor: 'dark.secondary'
+    },
+    ':focus:not([data-focus-visible-added])': {
+      outline: 'none',
+      boxShadow: 'none'
+    },
+    ':focus': {
+      outline: 'none',
+      boxShadow: 'focus'
     }
   },
-  '&:disabled': {
-    backgroundColor: 'mid.secondary',
-    borderColor: 'mid.primary',
-    color: 'mid.primary'
-  },
-  '&:hover': {
-    borderColor: 'dark.primary'
-  },
-  '&:active': {
-    backgroundColor: 'blue.secondary',
-    borderColor: 'dark.secondary'
-  },
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none'
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus'
+  size: {
+    regular: {
+      height: 20,
+      width: 20,
+      minWidth: 20,
+      minHeight: 20
+    },
+    small: {
+      height: 16,
+      width: 16,
+      minWidth: 16,
+      minHeight: 16
+    }
   }
 };
-var checkbox = {
-  regular: /*#__PURE__*/_extends({}, styles$6, {
-    height: 20,
-    width: 20,
-    minWidth: 20,
-    minHeight: 20
-  }),
-  small: /*#__PURE__*/_extends({}, styles$6, {
-    height: 16,
-    width: 16,
-    minWidth: 16,
-    minHeight: 16
-  })
-};
 
-var styles$7 = {
-  appearance: 'none',
-  position: 'relative',
-  cursor: 'pointer',
-  borderRadius: '6.25rem',
-  backgroundColor: 'mid.primary',
-  borderStyle: 'solid',
-  borderColor: 'mid.primary',
-  borderWidth: 1,
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    borderRadius: '1.25rem',
-    backgroundColor: 'light.primary',
-    transition: 'transform .25s ease'
-  },
-  '&:checked': {
-    backgroundColor: 'green',
-    borderColor: 'green',
+var toggle = {
+  styles: {
+    appearance: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    borderRadius: '6.25rem',
+    backgroundColor: 'mid.primary',
+    borderStyle: 'solid',
+    borderColor: 'mid.primary',
+    borderWidth: 1,
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      borderRadius: '1.25rem',
+      backgroundColor: 'light.primary',
+      transition: 'transform .25s ease'
+    },
+    '&:checked': {
+      backgroundColor: 'green',
+      borderColor: 'green',
+      '&:hover': {
+        backgroundColor: 'green.hover',
+        borderColor: 'green.hover'
+      },
+      '&:disabled': {
+        backgroundColor: 'mid.primary',
+        borderColor: 'mid.primary',
+        '&:after': {
+          backgroundColor: 'mid.secondary'
+        }
+      }
+    },
     '&:hover': {
-      backgroundColor: 'green.hover',
-      borderColor: 'green.hover'
+      backgroundColor: 'dark.secondary',
+      borderColor: 'dark.secondary'
     },
@@ -1237,58 +1252,47 @@ '&:disabled': {
       }
+    },
+    ':not(:checked):active': {
+      backgroundColor: 'dark.secondary',
+      borderColor: 'dark.secondary',
+      ':after': {
+        backgroundColor: 'blue.secondary'
+      }
+    },
+    ':focus:not([data-focus-visible-added])': {
+      outline: 'none',
+      boxShadow: 'none'
+    },
+    ':focus': {
+      outline: 'none',
+      boxShadow: 'focus'
     }
   },
-  '&:hover': {
-    backgroundColor: 'dark.secondary',
-    borderColor: 'dark.secondary'
-  },
-  '&:disabled': {
-    backgroundColor: 'mid.primary',
-    borderColor: 'mid.primary',
-    '&:after': {
-      backgroundColor: 'mid.secondary'
-    }
-  },
-  ':not(:checked):active': {
-    backgroundColor: 'dark.secondary',
-    borderColor: 'dark.secondary',
-    ':after': {
-      backgroundColor: 'blue.secondary'
-    }
-  },
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none'
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus'
-  }
-};
-var toggle = {
-  regular: /*#__PURE__*/merge(styles$7, {
-    height: 20,
-    width: 36,
-    '&:after': {
-      width: 18,
-      height: 18
-    },
-    '&:checked': {
+  size: {
+    regular: {
+      height: 20,
+      width: 36,
       '&:after': {
-        transform: 'translateX(16px)'
+        width: 18,
+        height: 18
+      },
+      '&:checked': {
+        '&:after': {
+          transform: 'translateX(16px)'
+        }
       }
-    }
-  }),
-  small: /*#__PURE__*/merge(styles$7, {
-    height: 16,
-    width: 28,
-    '&:after': {
-      width: 14,
-      height: 14
     },
-    '&:checked': {
+    small: {
+      height: 16,
+      width: 28,
       '&:after': {
-        transform: 'translateX(12px)'
+        width: 14,
+        height: 14
+      },
+      '&:checked': {
+        '&:after': {
+          transform: 'translateX(12px)'
+        }
       }
     }
-  })
+  }
 };
@@ -1363,3 +1367,3 @@
 };
-var styles$8 = {
+var styles$6 = {
   display: 'flex',
@@ -1384,5 +1388,5 @@ position: 'relative',
 var textArea = {
-  container: /*#__PURE__*/_extends({}, styles$8),
+  container: /*#__PURE__*/_extends({}, styles$6),
   "default": /*#__PURE__*/_extends({}, textAreaInputStyle),
-  'container-error': /*#__PURE__*/_extends({}, styles$8, error$1),
+  'container-error': /*#__PURE__*/_extends({}, styles$6, error$1),
   'text-container': {
@@ -1441,3 +1445,3 @@ display: 'flex',
 
-var styles$9 = {
+var styles$7 = {
   width: 106,
@@ -1484,3 +1488,3 @@ height: 48,
 var numericStepper = {
-  'default-error': /*#__PURE__*/_extends({}, styles$9, {
+  'default-error': /*#__PURE__*/_extends({}, styles$7, {
     borderColor: 'red',
@@ -1495,3 +1499,3 @@ ':hover': {
   }),
-  "default": styles$9,
+  "default": styles$7,
   container: containerStyles
@@ -1928,3 +1932,3 @@ };
 
-var styles$a = {
+var styles$8 = {
   display: 'inline-block',
@@ -1941,6 +1945,6 @@ width: 'full',
 var skeleton = {
-  rect: /*#__PURE__*/_extends({}, styles$a, {
+  rect: /*#__PURE__*/_extends({}, styles$8, {
     borderRadius: 'default'
   }),
-  circle: /*#__PURE__*/_extends({}, styles$a, {
+  circle: /*#__PURE__*/_extends({}, styles$8, {
     borderRadius: 'circle'
@@ -1992,25 +1996,27 @@ })
 
-var styles$b = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: 24,
-  height: 24,
-  padding: 2,
-  borderRadius: 'circle',
-  textTransform: 'uppercase'
-};
 var avatar = {
-  base: /*#__PURE__*/_extends({}, styles$b, {
-    bg: 'dark.primary',
-    color: 'light.primary'
-  }),
-  primary: /*#__PURE__*/_extends({}, styles$b, {
-    bg: 'blue',
-    color: 'light.primary'
-  }),
-  danger: /*#__PURE__*/_extends({}, styles$b, {
-    bg: 'red',
-    color: 'light.primary'
-  })
+  styles: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    padding: 2,
+    borderRadius: 'circle',
+    textTransform: 'uppercase'
+  },
+  palette: {
+    base: {
+      bg: 'dark.primary',
+      color: 'light.primary'
+    },
+    primary: {
+      bg: 'blue',
+      color: 'light.primary'
+    },
+    danger: {
+      bg: 'red',
+      color: 'light.primary'
+    }
+  }
 };
@@ -2017,0 +2023,0 @@

dist/config/base/index.d.ts

@@ -107,3 +107,3 @@ import colors from './colors';
     breakpoints: string[];
-    transition: {
+    transitions: {
         snap: string;
@@ -110,0 +110,0 @@ fade: string;

dist/config/components/avatar.d.ts

 declare const _default: {
-    base: {
-        bg: string;
-        color: string;
+    styles: {
         display: string;
@@ -14,27 +12,17 @@ alignItems: string;
     };
-    primary: {
-        bg: string;
-        color: string;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        width: number;
-        height: number;
-        padding: number;
-        borderRadius: string;
-        textTransform: string;
+    palette: {
+        base: {
+            bg: string;
+            color: string;
+        };
+        primary: {
+            bg: string;
+            color: string;
+        };
+        danger: {
+            bg: string;
+            color: string;
+        };
     };
-    danger: {
-        bg: string;
-        color: string;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        width: number;
-        height: number;
-        padding: number;
-        borderRadius: string;
-        textTransform: string;
-    };
 };
 export default _default;

dist/config/components/checkbox.d.ts

 declare const _default: {
-    regular: {
-        height: number;
-        width: number;
-        minWidth: number;
-        minHeight: number;
+    styles: {
         appearance: string;
@@ -86,87 +82,17 @@ borderStyle: string;
     };
-    small: {
-        height: number;
-        width: number;
-        minWidth: number;
-        minHeight: number;
-        appearance: string;
-        borderStyle: string;
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: number;
-        cursor: string;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        '&:checked': {
-            backgroundColor: string;
-            borderColor: string;
-            '&:after': {
-                content: string;
-            };
-            '&[disabled]:after': {
-                content: string;
-            };
-            '&:hover': {
-                backgroundColor: string;
-                borderColor: string;
-            };
-            '&:active': {
-                backgroundColor: string;
-                borderColor: string;
-            };
+    size: {
+        regular: {
+            height: number;
+            width: number;
+            minWidth: number;
+            minHeight: number;
         };
-        '&:indeterminate': {
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
-            '&:after': {
-                content: string;
-                position: string;
-                width: number;
-                height: number;
-                borderWidth: number;
-                borderStyle: string;
-                borderLeft: number;
-                borderRight: number;
-                borderRadius: number;
-                borderColor: string;
-            };
-            '&:disabled': {
-                backgroundColor: string;
-                borderColor: string;
-                color: string;
-            };
-            '&:hover': {
-                borderColor: string;
-                color: string;
-                bg: string;
-            };
-            '&:active': {
-                borderColor: string;
-                color: string;
-            };
+        small: {
+            height: number;
+            width: number;
+            minWidth: number;
+            minHeight: number;
         };
-        '&:disabled': {
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
-        };
-        '&:hover': {
-            borderColor: string;
-        };
-        '&:active': {
-            backgroundColor: string;
-            borderColor: string;
-        };
-        ':focus:not([data-focus-visible-added])': {
-            outline: string;
-            boxShadow: string;
-        };
-        ':focus': {
-            outline: string;
-            boxShadow: string;
-        };
     };
 };
 export default _default;

dist/config/components/index.d.ts

@@ -485,11 +485,30 @@ declare const _default: {
         };
-        '> button': {
+        item: {
+            color: string;
+            ':focus': {
+                bg: (t: import("@vtex/admin-ui-system").Theme) => string;
+                outline: string;
+                boxShadow: string;
+            };
+            ':hover': {
+                color: string;
+            };
             marginY: string;
             paddingX: number;
-            color: string;
             fontSize: number;
             border: string;
             textTransform: string;
+            width: string;
+            div: {
+                justifyContent: string;
+            };
+            svg: {
+                marginLeft: number;
+                marginRight: number;
+            };
+        };
+        'item-dangerous': {
+            color: string;
             ':focus': {
-                bg: string;
+                bg: (t: import("@vtex/admin-ui-system").Theme) => string;
                 outline: string;
@@ -501,2 +520,7 @@ boxShadow: string;
             };
+            marginY: string;
+            paddingX: number;
+            fontSize: number;
+            border: string;
+            textTransform: string;
             width: string;
@@ -884,2 +908,3 @@ div: {
             borderLeft: number;
+            height: string;
             border: string;
@@ -1411,148 +1436,5 @@ borderWidth: number;
     alert: {
-        error: {
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            opacity: number;
-            zIndex: number;
-            transform: string;
-            visibility: string;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
-        'error-visible': {
-            opacity: number;
-            visibility: string;
-            transform: string;
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            zIndex: number;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
-        success: {
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            opacity: number;
-            zIndex: number;
-            transform: string;
-            visibility: string;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
-        'success-visible': {
-            opacity: number;
-            visibility: string;
-            transform: string;
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            zIndex: number;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
-        warning: {
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            opacity: number;
-            zIndex: number;
-            transform: string;
-            visibility: string;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
-        'warning-visible': {
-            opacity: number;
-            visibility: string;
-            transform: string;
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            zIndex: number;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
-        info: {
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            opacity: number;
-            zIndex: number;
-            transform: string;
-            visibility: string;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
-        'info-visible': {
-            opacity: number;
-            visibility: string;
-            transform: string;
-            borderColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            height: number;
-            paddingY: number;
-            paddingLeft: number;
-            paddingRight: number;
-            borderRadius: string;
-            zIndex: number;
-            transition: string;
-            borderStyle: string;
-            borderWidth: number;
-        };
+        [x: string]: {};
     };
 };
 export default _default;

dist/config/components/toggle.d.ts

 declare const _default: {
-    regular: any;
-    small: any;
+    styles: {
+        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;
+        };
+    };
+    size: {
+        regular: {
+            height: number;
+            width: number;
+            '&:after': {
+                width: number;
+                height: number;
+            };
+            '&:checked': {
+                '&:after': {
+                    transform: string;
+                };
+            };
+        };
+        small: {
+            height: number;
+            width: number;
+            '&:after': {
+                width: number;
+                height: number;
+            };
+            '&:checked': {
+                '&:after': {
+                    transform: string;
+                };
+            };
+        };
+    };
 };
 export default _default;

dist/config/index.d.ts

@@ -486,11 +486,30 @@ export declare const theme: {
             };
-            '> button': {
+            item: {
+                color: string;
+                ':focus': {
+                    bg: (t: import("@vtex/admin-ui-system").Theme) => string;
+                    outline: string;
+                    boxShadow: string;
+                };
+                ':hover': {
+                    color: string;
+                };
                 marginY: string;
                 paddingX: number;
-                color: string;
                 fontSize: number;
                 border: string;
                 textTransform: string;
+                width: string;
+                div: {
+                    justifyContent: string;
+                };
+                svg: {
+                    marginLeft: number;
+                    marginRight: number;
+                };
+            };
+            'item-dangerous': {
+                color: string;
                 ':focus': {
-                    bg: string;
+                    bg: (t: import("@vtex/admin-ui-system").Theme) => string;
                     outline: string;
@@ -502,2 +521,7 @@ boxShadow: string;
                 };
+                marginY: string;
+                paddingX: number;
+                fontSize: number;
+                border: string;
+                textTransform: string;
                 width: string;
@@ -885,2 +909,3 @@ div: {
                 borderLeft: number;
+                height: string;
                 border: string;
@@ -1412,146 +1437,3 @@ borderWidth: number;
         alert: {
-            error: {
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                opacity: number;
-                zIndex: number;
-                transform: string;
-                visibility: string;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
-            'error-visible': {
-                opacity: number;
-                visibility: string;
-                transform: string;
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                zIndex: number;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
-            success: {
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                opacity: number;
-                zIndex: number;
-                transform: string;
-                visibility: string;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
-            'success-visible': {
-                opacity: number;
-                visibility: string;
-                transform: string;
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                zIndex: number;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
-            warning: {
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                opacity: number;
-                zIndex: number;
-                transform: string;
-                visibility: string;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
-            'warning-visible': {
-                opacity: number;
-                visibility: string;
-                transform: string;
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                zIndex: number;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
-            info: {
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                opacity: number;
-                zIndex: number;
-                transform: string;
-                visibility: string;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
-            'info-visible': {
-                opacity: number;
-                visibility: string;
-                transform: string;
-                borderColor: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                height: number;
-                paddingY: number;
-                paddingLeft: number;
-                paddingRight: number;
-                borderRadius: string;
-                zIndex: number;
-                transition: string;
-                borderStyle: string;
-                borderWidth: number;
-            };
+            [x: string]: {};
         };
@@ -1558,0 +1440,0 @@ };

package.json

 {
   "name": "@vtex/admin-ui-theme",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "main": "dist/index.js",
@@ -36,3 +36,3 @@ "module": "dist/admin-ui-theme.esm.js",
   "devDependencies": {
-    "@vtex/admin-ui-system": "^0.10.1"
+    "@vtex/admin-ui-system": "^0.11.0"
   },
@@ -42,3 +42,3 @@ "dependencies": {
   },
-  "gitHead": "1f8abfb5401995b9d633e40149fefd60f020fca0"
+  "gitHead": "b997f566f3d19e3df900f90e8097b9e6c5bae6aa"
 }

src/config/base/index.ts

@@ -12,3 +12,3 @@ import colors from './colors'
   breakpoints: ['640px', '768px', '1024px', '1280px'],
-  transition: {
+  transitions: {
     snap: 'all 70ms cubic-bezier(0.2, 0.2, 0.38, 0.9)',
@@ -15,0 +15,0 @@ fade: 'all 110ms cubic-bezier(0.2, 0.2, 0.38, 0.9)',

src/config/components/alert.ts

@@ -56,3 +56,3 @@ import { lightness } from '@vtex/admin-ui-system'
 
-const sticky = { 
+const sticky = {
   borderRadius: 'flat',
@@ -62,13 +62,17 @@ paddingRight: 4,
 
-
 function getAlertVariants(name: string, styles = {}) {
   return {
     [`${name}`]: styles,
-    [`${name}-visible`]: { ...styles, ...visible},
-    [`${name}-fluid`]: { ...styles, ...fluid},
-    [`${name}-sticky`]: { ...styles, ...sticky},
-    [`${name}-visible-fluid`]: { ...styles, ...visible, ...fluid},
-    [`${name}-visible-sticky`]:{ ...styles, ...visible, ...sticky},
-    [`${name}-fluid-sticky`]:{ ...styles, ...visible, ...sticky},
-    [`${name}-visible-fluid-sticky`]:{ ...styles, ...visible, ...sticky, ...fluid},
+    [`${name}-visible`]: { ...styles, ...visible },
+    [`${name}-fluid`]: { ...styles, ...fluid },
+    [`${name}-sticky`]: { ...styles, ...sticky },
+    [`${name}-visible-fluid`]: { ...styles, ...visible, ...fluid },
+    [`${name}-visible-sticky`]: { ...styles, ...visible, ...sticky },
+    [`${name}-fluid-sticky`]: { ...styles, ...visible, ...sticky },
+    [`${name}-visible-fluid-sticky`]: {
+      ...styles,
+      ...visible,
+      ...sticky,
+      ...fluid,
+    },
   }
@@ -75,0 +79,0 @@ }

src/config/components/avatar.ts

@@ -1,28 +0,26 @@
-const styles = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: 24,
-  height: 24,
-  padding: 2,
-  borderRadius: 'circle',
-  textTransform: 'uppercase',
-}
-
 export default {
-  base: {
-    ...styles,
-    bg: 'dark.primary',
-    color: 'light.primary',
+  styles: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    padding: 2,
+    borderRadius: 'circle',
+    textTransform: 'uppercase',
   },
-  primary: {
-    ...styles,
-    bg: 'blue',
-    color: 'light.primary',
+  palette: {
+    base: {
+      bg: 'dark.primary',
+      color: 'light.primary',
+    },
+    primary: {
+      bg: 'blue',
+      color: 'light.primary',
+    },
+    danger: {
+      bg: 'red',
+      color: 'light.primary',
+    },
   },
-  danger: {
-    ...styles,
-    bg: 'red',
-    color: 'light.primary',
-  },
 }

src/config/components/checkbox.ts

@@ -1,45 +0,61 @@
-const styles = {
-  appearance: 'none',
-  borderStyle: 'solid',
-  borderWidth: 1,
-  borderColor: 'mid.primary',
-  borderRadius: 3,
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  '&:checked': {
-    backgroundColor: 'blue',
-    borderColor: 'blue',
-    '&: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>")`,
+export default {
+  styles: {
+    appearance: 'none',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: 'mid.primary',
+    borderRadius: 3,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&:checked': {
+      backgroundColor: 'blue',
+      borderColor: 'blue',
+      '&: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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>")`,
+      },
+      '&:hover': {
+        backgroundColor: 'blue.hover',
+        borderColor: 'blue.hover',
+      },
+      '&:active': {
+        backgroundColor: 'blue.pressed',
+        borderColor: 'blue.pressed',
+      },
     },
-    '&[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='%23898F9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>")`,
+    '&:indeterminate': {
+      backgroundColor: 'blue.secondary',
+      borderColor: 'blue',
+      color: 'blue',
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 8,
+        height: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderLeft: 0,
+        borderRight: 0,
+        borderRadius: 3,
+        borderColor: 'currentColor',
+      },
+      '&:disabled': {
+        backgroundColor: 'mid.secondary',
+        borderColor: 'mid.primary',
+        color: 'mid.primary',
+      },
+      '&:hover': {
+        borderColor: 'blue.hover',
+        color: 'blue.hover',
+        bg: 'blue.secondary.hover',
+      },
+      '&:active': {
+        borderColor: 'blue.pressed',
+        color: 'blue.pressed',
+      },
     },
-    '&:hover': {
-      backgroundColor: 'blue.hover',
-      borderColor: 'blue.hover',
-    },
-    '&:active': {
-      backgroundColor: 'blue.pressed',
-      borderColor: 'blue.pressed',
-    },
-  },
-  '&:indeterminate': {
-    backgroundColor: 'blue.secondary',
-    borderColor: 'blue',
-    color: 'blue',
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      width: 8,
-      height: 0,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderLeft: 0,
-      borderRight: 0,
-      borderRadius: 3,
-      borderColor: 'currentColor',
-    },
     '&:disabled': {
@@ -51,48 +67,31 @@ backgroundColor: 'mid.secondary',
     '&:hover': {
-      borderColor: 'blue.hover',
-      color: 'blue.hover',
-      bg: 'blue.secondary.hover',
+      borderColor: 'dark.primary',
     },
     '&:active': {
-      borderColor: 'blue.pressed',
-      color: 'blue.pressed',
+      backgroundColor: 'blue.secondary',
+      borderColor: 'dark.secondary',
     },
+    ':focus:not([data-focus-visible-added])': {
+      outline: 'none',
+      boxShadow: 'none',
+    },
+    ':focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+    },
   },
-  '&:disabled': {
-    backgroundColor: 'mid.secondary',
-    borderColor: 'mid.primary',
-    color: 'mid.primary',
+  size: {
+    regular: {
+      height: 20,
+      width: 20,
+      minWidth: 20,
+      minHeight: 20,
+    },
+    small: {
+      height: 16,
+      width: 16,
+      minWidth: 16,
+      minHeight: 16,
+    },
   },
-  '&:hover': {
-    borderColor: 'dark.primary',
-  },
-  '&:active': {
-    backgroundColor: 'blue.secondary',
-    borderColor: 'dark.secondary',
-  },
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none',
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus',
-  },
 }
-
-export default {
-  regular: {
-    ...styles,
-    height: 20,
-    width: 20,
-    minWidth: 20,
-    minHeight: 20,
-  },
-  small: {
-    ...styles,
-    height: 16,
-    width: 16,
-    minWidth: 16,
-    minHeight: 16,
-  },
-}

src/config/components/divider.ts

@@ -16,4 +16,4 @@ const styles = {
     borderLeft: 0,
-    height: 'auto'
+    height: 'auto',
   },
 }

src/config/components/skeleton.ts

@@ -1,5 +0,3 @@
-
 import { colors } from '../base'
 
-
 const styles = {
@@ -6,0 +4,0 @@ display: 'inline-block',

src/config/components/table.ts

@@ -6,4 +6,4 @@ import { merge } from '@vtex/admin-ui-system'
   ':hover': {
-    bg: 'light.secondary'
-  }
+    bg: 'light.secondary',
+  },
 }
@@ -10,0 +10,0 @@

src/config/components/toggle.ts

@@ -1,26 +0,37 @@
-import { merge } from '@vtex/admin-ui-system'
-
-const styles = {
-  appearance: 'none',
-  position: 'relative',
-  cursor: 'pointer',
-  borderRadius: '6.25rem',
-  backgroundColor: 'mid.primary',
-  borderStyle: 'solid',
-  borderColor: 'mid.primary',
-  borderWidth: 1,
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    borderRadius: '1.25rem',
-    backgroundColor: 'light.primary',
-    transition: 'transform .25s ease',
-  },
-  '&:checked': {
-    backgroundColor: 'green',
-    borderColor: 'green',
+export default {
+  styles: {
+    appearance: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    borderRadius: '6.25rem',
+    backgroundColor: 'mid.primary',
+    borderStyle: 'solid',
+    borderColor: 'mid.primary',
+    borderWidth: 1,
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      borderRadius: '1.25rem',
+      backgroundColor: 'light.primary',
+      transition: 'transform .25s ease',
+    },
+    '&:checked': {
+      backgroundColor: 'green',
+      borderColor: 'green',
+      '&:hover': {
+        backgroundColor: 'green.hover',
+        borderColor: 'green.hover',
+      },
+      '&:disabled': {
+        backgroundColor: 'mid.primary',
+        borderColor: 'mid.primary',
+        '&:after': {
+          backgroundColor: 'mid.secondary',
+        },
+      },
+    },
     '&:hover': {
-      backgroundColor: 'green.hover',
-      borderColor: 'green.hover',
+      backgroundColor: 'dark.secondary',
+      borderColor: 'dark.secondary',
     },
@@ -34,58 +45,46 @@ '&:disabled': {
     },
-  },
-  '&:hover': {
-    backgroundColor: 'dark.secondary',
-    borderColor: 'dark.secondary',
-  },
-  '&:disabled': {
-    backgroundColor: 'mid.primary',
-    borderColor: 'mid.primary',
-    '&:after': {
-      backgroundColor: 'mid.secondary',
+    ':not(:checked):active': {
+      backgroundColor: 'dark.secondary',
+      borderColor: 'dark.secondary',
+      ':after': {
+        backgroundColor: 'blue.secondary',
+      },
     },
-  },
-  ':not(:checked):active': {
-    backgroundColor: 'dark.secondary',
-    borderColor: 'dark.secondary',
-    ':after': {
-      backgroundColor: 'blue.secondary',
+    ':focus:not([data-focus-visible-added])': {
+      outline: 'none',
+      boxShadow: 'none',
     },
+    ':focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+    },
   },
-  ':focus:not([data-focus-visible-added])': {
-    outline: 'none',
-    boxShadow: 'none',
-  },
-  ':focus': {
-    outline: 'none',
-    boxShadow: 'focus',
-  },
-}
-
-export default {
-  regular: merge(styles, {
-    height: 20,
-    width: 36,
-    '&:after': {
-      width: 18,
-      height: 18,
-    },
-    '&:checked': {
+  size: {
+    regular: {
+      height: 20,
+      width: 36,
       '&:after': {
-        transform: 'translateX(16px)',
+        width: 18,
+        height: 18,
       },
+      '&:checked': {
+        '&:after': {
+          transform: 'translateX(16px)',
+        },
+      },
     },
-  }),
-  small: merge(styles, {
-    height: 16,
-    width: 28,
-    '&:after': {
-      width: 14,
-      height: 14,
-    },
-    '&:checked': {
+    small: {
+      height: 16,
+      width: 28,
       '&:after': {
-        transform: 'translateX(12px)',
+        width: 14,
+        height: 14,
       },
+      '&:checked': {
+        '&:after': {
+          transform: 'translateX(12px)',
+        },
+      },
     },
-  }),
+  },
 }

No alert changes

Worsened metrics

Total package byte prevSize

587831

decreased by-1.05%

Lines of code

11102

decreased by-1.94%

No dependency changes