@flodesk/grain 10.17.2 → 10.17.4

package/es/foundational/styles.js

@@ -1,19 +1,19 @@
-import "core-js/modules/es.array.concat.js";
+import { css } from '@emotion/react';
 import { getColor, getRadius, getTextSize, getTransition, getWeight } from '../utilities';
 export var capHeight = "0.74em";
 export var lineHeightAndCapHeightOffset = "calc((var(--grn-lineHeight-global) - ".concat(capHeight, ") / 2)");
 export var componentVars = {
   strokeSize: '1px',
   dividerStrokeSize: '1px',
-  activeBorderColor: getColor('shade9'),
+  activeBorderColor: getColor('shade7'),
   textBoxHeight: '40px',
   clearButtonHeight: '36px',
   clearButtonDangerBackgroundHover: 'hsl(var(--redHS) var(--redL) / 12%)',
-  clearButtonDangerBackgroundActive: 'hsl(var(--redHS) var(--redL) / 19%)',
+  clearButtonDangerBackgroundActive: 'hsl(var(--redHS) var(--redL) / 60%)',
   dangerIconColor: 'hsl(var(--redHS) var(--redL) / 70%)'
 };
-var buttonResetStyles = "\n  appearance: none;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ".concat(getWeight('medium'), ";\n  cursor: pointer;\n");
-export var transitionStyles = "\n  transition: ".concat(getTransition('leave'), ";\n\n  &:hover {\n    transition: ").concat(getTransition('hover'), ";\n  }\n\n  &:active {\n    transition: ").concat(getTransition('active'), ";\n  }\n");
+var buttonResetStyles = /*#__PURE__*/css("appearance:none;font-family:inherit;font-size:inherit;font-weight:", getWeight('medium'), ";cursor:pointer;" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonResetStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRleHRTaXplLCBnZXRUcmFuc2l0aW9uLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5leHBvcnQgY29uc3QgY2FwSGVpZ2h0ID0gYDAuNzRlbWA7XG5leHBvcnQgY29uc3QgbGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpIC0gJHtjYXBIZWlnaHR9KSAvIDIpYDtcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIHN0cm9rZVNpemU6ICcxcHgnLFxuICBkaXZpZGVyU3Ryb2tlU2l6ZTogJzFweCcsXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignc2hhZGU3JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4JyxcbiAgY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXI6ICdoc2wodmFyKC0tcmVkSFMpIHZhcigtLXJlZEwpIC8gMTIlKScsXG4gIGNsZWFyQnV0dG9uRGFuZ2VyQmFja2dyb3VuZEFjdGl2ZTogJ2hzbCh2YXIoLS1yZWRIUykgdmFyKC0tcmVkTCkgLyA2MCUpJyxcbiAgZGFuZ2VySWNvbkNvbG9yOiAnaHNsKHZhcigtLXJlZEhTKSB2YXIoLS1yZWRMKSAvIDcwJSknLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcblxuICAmOmhvdmVyIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2hvdmVyJyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxufTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIGljb25Db2xvcjogZ2V0Q29sb3IoJ2ljb24nKSxcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCdmYWRlMScpLFxuICAgICAgaWNvbkNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIH0sXG5cbiAgICBhY3RpdmU6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTUnKSxcbiAgICB9LFxuICB9LFxuXG4gIGRhbmdlcjoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgaWNvbkNvbG9yOiBjb21wb25lbnRWYXJzLmRhbmdlckljb25Db2xvcixcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGNvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXIsXG4gICAgICBpY29uQ29sb3I6IGdldENvbG9yKCdkYW5nZXInKSxcbiAgICB9LFxuXG4gICAgYWN0aXZlOiB7XG4gICAgICBib3JkZXJDb2xvcjogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmRBY3RpdmUsXG4gICAgfSxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDbGVhckJ1dHRvblN0eWxlcyA9ICh7IHZhcmlhbnQgPSAnbmV1dHJhbCcsIGlzQWN0aXZlLCBpc0Rpc2FibGVkIH0pID0+IHtcbiAgY29uc3QgYm94ID0gY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5iYWNrZ3JvdW5kQ29sb3J9O1xuXG4gICAgICAuSWNvbiB7XG4gICAgICAgIGNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5pY29uQ29sb3J9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIC0tYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0gJHt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmFjdGl2ZS5ib3JkZXJDb2xvcn07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigtLWJvcmRlcik7XG4gICAgfVxuXG4gICAgJHtpc0Rpc2FibGVkICYmIGBwb2ludGVyLWV2ZW50czogbm9uZTsgYH1cbiAgYDtcblxuICBjb25zdCBpY29uID0gY3NzYFxuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmljb25Db2xvcn07XG4gICAgJHtpc0FjdGl2ZSAmJiBgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfWB9O1xuICBgO1xuXG4gIGNvbnN0IHRleHQgPSBjc3NgXG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfTtcbiAgICAke2lzRGlzYWJsZWQgJiYgYGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX1gfTtcbiAgYDtcblxuICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IHsgYm94LCBpY29uLCB0ZXh0IH07XG4gIHJldHVybiBjbGVhckJ1dHRvblN0eWxlcztcbn07XG5cbmNvbnN0IGZ1bGxPZmZzZXQgPSBgY2FsYygxMDAlICsgdmFyKC0tcGxhY2VtZW50T2Zmc2V0LCB2YXIoLS1ncm4tc3BhY2UteHMpKSlgO1xuXG5leHBvcnQgY29uc3QgcGxhY2VtZW50U3R5bGVzID0ge1xuICB0b3A6IHtcbiAgICBib3R0b206IGZ1bGxPZmZzZXQsXG4gICAgbGVmdDogYDUwJWAsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWCgtNTAlKWAsXG4gIH0sXG4gIHRvcFN0YXJ0OiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIGxlZnQ6IGAwYCxcbiAgfSxcbiAgdG9wRW5kOiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIHJpZ2h0OiBgMGAsXG4gIH0sXG4gIGJvdHRvbToge1xuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgICBsZWZ0OiBgNTAlYCxcbiAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKC01MCUpYCxcbiAgfSxcbiAgYm90dG9tU3RhcnQ6IHtcbiAgICBsZWZ0OiBgMGAsXG4gICAgdG9wOiBmdWxsT2Zmc2V0LFxuICB9LFxuICBib3R0b21FbmQ6IHtcbiAgICByaWdodDogYDBgLFxuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgfSxcbiAgcmlnaHQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgtNTAlKWAsXG4gIH0sXG4gIHJpZ2h0U3RhcnQ6IHtcbiAgICBsZWZ0OiBmdWxsT2Zmc2V0LFxuICAgIHRvcDogYDBgLFxuICB9LFxuICByaWdodEVuZDoge1xuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgYm90dG9tOiBgMGAsXG4gIH0sXG4gIGxlZnQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoLTUwJSlgLFxuICB9LFxuICBsZWZ0U3RhcnQ6IHtcbiAgICByaWdodDogZnVsbE9mZnNldCxcbiAgICB0b3A6IGAwYCxcbiAgfSxcbiAgbGVmdEVuZDoge1xuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIGJvdHRvbTogYDBgLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IGNhcFN0eWxlcyA9IGNzc2BcbiAgZm9udC1zaXplOiAke2dldFRleHRTaXplKCdzJyl9O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDAuMDVlbTtcbmA7XG4iXX0= */");
+export var transitionStyles = /*#__PURE__*/css("transition:", getTransition('leave'), ";&:hover{transition:", getTransition('hover'), ";}&:active{transition:", getTransition('active'), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:transitionStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5Qm1DIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRleHRTaXplLCBnZXRUcmFuc2l0aW9uLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5leHBvcnQgY29uc3QgY2FwSGVpZ2h0ID0gYDAuNzRlbWA7XG5leHBvcnQgY29uc3QgbGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpIC0gJHtjYXBIZWlnaHR9KSAvIDIpYDtcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIHN0cm9rZVNpemU6ICcxcHgnLFxuICBkaXZpZGVyU3Ryb2tlU2l6ZTogJzFweCcsXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignc2hhZGU3JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4JyxcbiAgY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXI6ICdoc2wodmFyKC0tcmVkSFMpIHZhcigtLXJlZEwpIC8gMTIlKScsXG4gIGNsZWFyQnV0dG9uRGFuZ2VyQmFja2dyb3VuZEFjdGl2ZTogJ2hzbCh2YXIoLS1yZWRIUykgdmFyKC0tcmVkTCkgLyA2MCUpJyxcbiAgZGFuZ2VySWNvbkNvbG9yOiAnaHNsKHZhcigtLXJlZEhTKSB2YXIoLS1yZWRMKSAvIDcwJSknLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcblxuICAmOmhvdmVyIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2hvdmVyJyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxufTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIGljb25Db2xvcjogZ2V0Q29sb3IoJ2ljb24nKSxcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCdmYWRlMScpLFxuICAgICAgaWNvbkNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIH0sXG5cbiAgICBhY3RpdmU6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTUnKSxcbiAgICB9LFxuICB9LFxuXG4gIGRhbmdlcjoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgaWNvbkNvbG9yOiBjb21wb25lbnRWYXJzLmRhbmdlckljb25Db2xvcixcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGNvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXIsXG4gICAgICBpY29uQ29sb3I6IGdldENvbG9yKCdkYW5nZXInKSxcbiAgICB9LFxuXG4gICAgYWN0aXZlOiB7XG4gICAgICBib3JkZXJDb2xvcjogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmRBY3RpdmUsXG4gICAgfSxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDbGVhckJ1dHRvblN0eWxlcyA9ICh7IHZhcmlhbnQgPSAnbmV1dHJhbCcsIGlzQWN0aXZlLCBpc0Rpc2FibGVkIH0pID0+IHtcbiAgY29uc3QgYm94ID0gY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5iYWNrZ3JvdW5kQ29sb3J9O1xuXG4gICAgICAuSWNvbiB7XG4gICAgICAgIGNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5pY29uQ29sb3J9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIC0tYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0gJHt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmFjdGl2ZS5ib3JkZXJDb2xvcn07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigtLWJvcmRlcik7XG4gICAgfVxuXG4gICAgJHtpc0Rpc2FibGVkICYmIGBwb2ludGVyLWV2ZW50czogbm9uZTsgYH1cbiAgYDtcblxuICBjb25zdCBpY29uID0gY3NzYFxuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmljb25Db2xvcn07XG4gICAgJHtpc0FjdGl2ZSAmJiBgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfWB9O1xuICBgO1xuXG4gIGNvbnN0IHRleHQgPSBjc3NgXG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfTtcbiAgICAke2lzRGlzYWJsZWQgJiYgYGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX1gfTtcbiAgYDtcblxuICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IHsgYm94LCBpY29uLCB0ZXh0IH07XG4gIHJldHVybiBjbGVhckJ1dHRvblN0eWxlcztcbn07XG5cbmNvbnN0IGZ1bGxPZmZzZXQgPSBgY2FsYygxMDAlICsgdmFyKC0tcGxhY2VtZW50T2Zmc2V0LCB2YXIoLS1ncm4tc3BhY2UteHMpKSlgO1xuXG5leHBvcnQgY29uc3QgcGxhY2VtZW50U3R5bGVzID0ge1xuICB0b3A6IHtcbiAgICBib3R0b206IGZ1bGxPZmZzZXQsXG4gICAgbGVmdDogYDUwJWAsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWCgtNTAlKWAsXG4gIH0sXG4gIHRvcFN0YXJ0OiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIGxlZnQ6IGAwYCxcbiAgfSxcbiAgdG9wRW5kOiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIHJpZ2h0OiBgMGAsXG4gIH0sXG4gIGJvdHRvbToge1xuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgICBsZWZ0OiBgNTAlYCxcbiAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKC01MCUpYCxcbiAgfSxcbiAgYm90dG9tU3RhcnQ6IHtcbiAgICBsZWZ0OiBgMGAsXG4gICAgdG9wOiBmdWxsT2Zmc2V0LFxuICB9LFxuICBib3R0b21FbmQ6IHtcbiAgICByaWdodDogYDBgLFxuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgfSxcbiAgcmlnaHQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgtNTAlKWAsXG4gIH0sXG4gIHJpZ2h0U3RhcnQ6IHtcbiAgICBsZWZ0OiBmdWxsT2Zmc2V0LFxuICAgIHRvcDogYDBgLFxuICB9LFxuICByaWdodEVuZDoge1xuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgYm90dG9tOiBgMGAsXG4gIH0sXG4gIGxlZnQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoLTUwJSlgLFxuICB9LFxuICBsZWZ0U3RhcnQ6IHtcbiAgICByaWdodDogZnVsbE9mZnNldCxcbiAgICB0b3A6IGAwYCxcbiAgfSxcbiAgbGVmdEVuZDoge1xuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIGJvdHRvbTogYDBgLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IGNhcFN0eWxlcyA9IGNzc2BcbiAgZm9udC1zaXplOiAke2dldFRleHRTaXplKCdzJyl9O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDAuMDVlbTtcbmA7XG4iXX0= */");
 export var styles = {
   buttonReset: buttonResetStyles,
   transitions: transitionStyles
@@ -27,7 +27,7 @@ var variantStyles = {
       iconColor: getColor('content')
     },
     active: {
-      backgroundColor: getColor('fade2')
+      borderColor: getColor('fade5')
     }
   },
   danger: {
@@ -38,7 +38,7 @@ var variantStyles = {
       iconColor: getColor('danger')
     },
     active: {
-      backgroundColor: componentVars.clearButtonDangerBackgroundActive
+      borderColor: componentVars.clearButtonDangerBackgroundActive
     }
   }
 };
@@ -47,9 +47,9 @@ export var getClearButtonStyles = function getClearButtonStyles(_ref) {
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
       isActive = _ref.isActive,
       isDisabled = _ref.isDisabled;
-  var box = "\n    ".concat(buttonResetStyles, ";\n    ").concat(transitionStyles, ";\n\n    border: none;\n    padding: 0;\n    border-radius: ").concat(getRadius('s'), ";\n    height: ").concat(componentVars.clearButtonHeight, ";\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n      background-color: ").concat(variant && variantStyles[variant].hover.backgroundColor, ";\n\n      .Icon {\n        color: ").concat(variant && variantStyles[variant].hover.iconColor, ";\n      }\n    }\n\n    &:active {\n      background-color: ").concat(variant && variantStyles[variant].active.backgroundColor, ";\n    }\n\n    ").concat(isDisabled && "pointer-events: none; ", "\n  ");
-  var icon = "\n    ".concat(transitionStyles, ";\n    color: ").concat(variant && variantStyles[variant].iconColor, ";\n    ").concat(isActive && "color: ".concat(variant && variantStyles[variant].color), ";\n    ").concat(isDisabled && "color: ".concat(getColor('disabledIcon')), ";\n  ");
-  var text = "\n    color: ".concat(variant && variantStyles[variant].color, ";\n    ").concat(isDisabled && "color: ".concat(getColor('disabledContent')), ";\n  ");
+  var box = /*#__PURE__*/css(buttonResetStyles, ";", transitionStyles, ";border:none;padding:0;border-radius:", getRadius('s'), ";height:", componentVars.clearButtonHeight, ";background-color:transparent;display:flex;align-items:center;justify-content:center;&:hover{background-color:", variant && variantStyles[variant].hover.backgroundColor, ";.Icon{color:", variant && variantStyles[variant].hover.iconColor, ";}}&:active{--border:", componentVars.strokeSize, " ", variantStyles[variant].active.borderColor, ";background-color:transparent;box-shadow:inset 0 0 0 var(--border);}", isDisabled && "pointer-events: none; ", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:box;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RWlCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRleHRTaXplLCBnZXRUcmFuc2l0aW9uLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5leHBvcnQgY29uc3QgY2FwSGVpZ2h0ID0gYDAuNzRlbWA7XG5leHBvcnQgY29uc3QgbGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpIC0gJHtjYXBIZWlnaHR9KSAvIDIpYDtcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIHN0cm9rZVNpemU6ICcxcHgnLFxuICBkaXZpZGVyU3Ryb2tlU2l6ZTogJzFweCcsXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignc2hhZGU3JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4JyxcbiAgY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXI6ICdoc2wodmFyKC0tcmVkSFMpIHZhcigtLXJlZEwpIC8gMTIlKScsXG4gIGNsZWFyQnV0dG9uRGFuZ2VyQmFja2dyb3VuZEFjdGl2ZTogJ2hzbCh2YXIoLS1yZWRIUykgdmFyKC0tcmVkTCkgLyA2MCUpJyxcbiAgZGFuZ2VySWNvbkNvbG9yOiAnaHNsKHZhcigtLXJlZEhTKSB2YXIoLS1yZWRMKSAvIDcwJSknLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcblxuICAmOmhvdmVyIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2hvdmVyJyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxufTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIGljb25Db2xvcjogZ2V0Q29sb3IoJ2ljb24nKSxcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCdmYWRlMScpLFxuICAgICAgaWNvbkNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIH0sXG5cbiAgICBhY3RpdmU6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTUnKSxcbiAgICB9LFxuICB9LFxuXG4gIGRhbmdlcjoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgaWNvbkNvbG9yOiBjb21wb25lbnRWYXJzLmRhbmdlckljb25Db2xvcixcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGNvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXIsXG4gICAgICBpY29uQ29sb3I6IGdldENvbG9yKCdkYW5nZXInKSxcbiAgICB9LFxuXG4gICAgYWN0aXZlOiB7XG4gICAgICBib3JkZXJDb2xvcjogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmRBY3RpdmUsXG4gICAgfSxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDbGVhckJ1dHRvblN0eWxlcyA9ICh7IHZhcmlhbnQgPSAnbmV1dHJhbCcsIGlzQWN0aXZlLCBpc0Rpc2FibGVkIH0pID0+IHtcbiAgY29uc3QgYm94ID0gY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5iYWNrZ3JvdW5kQ29sb3J9O1xuXG4gICAgICAuSWNvbiB7XG4gICAgICAgIGNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5pY29uQ29sb3J9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIC0tYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0gJHt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmFjdGl2ZS5ib3JkZXJDb2xvcn07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigtLWJvcmRlcik7XG4gICAgfVxuXG4gICAgJHtpc0Rpc2FibGVkICYmIGBwb2ludGVyLWV2ZW50czogbm9uZTsgYH1cbiAgYDtcblxuICBjb25zdCBpY29uID0gY3NzYFxuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmljb25Db2xvcn07XG4gICAgJHtpc0FjdGl2ZSAmJiBgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfWB9O1xuICBgO1xuXG4gIGNvbnN0IHRleHQgPSBjc3NgXG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfTtcbiAgICAke2lzRGlzYWJsZWQgJiYgYGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX1gfTtcbiAgYDtcblxuICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IHsgYm94LCBpY29uLCB0ZXh0IH07XG4gIHJldHVybiBjbGVhckJ1dHRvblN0eWxlcztcbn07XG5cbmNvbnN0IGZ1bGxPZmZzZXQgPSBgY2FsYygxMDAlICsgdmFyKC0tcGxhY2VtZW50T2Zmc2V0LCB2YXIoLS1ncm4tc3BhY2UteHMpKSlgO1xuXG5leHBvcnQgY29uc3QgcGxhY2VtZW50U3R5bGVzID0ge1xuICB0b3A6IHtcbiAgICBib3R0b206IGZ1bGxPZmZzZXQsXG4gICAgbGVmdDogYDUwJWAsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWCgtNTAlKWAsXG4gIH0sXG4gIHRvcFN0YXJ0OiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIGxlZnQ6IGAwYCxcbiAgfSxcbiAgdG9wRW5kOiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIHJpZ2h0OiBgMGAsXG4gIH0sXG4gIGJvdHRvbToge1xuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgICBsZWZ0OiBgNTAlYCxcbiAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKC01MCUpYCxcbiAgfSxcbiAgYm90dG9tU3RhcnQ6IHtcbiAgICBsZWZ0OiBgMGAsXG4gICAgdG9wOiBmdWxsT2Zmc2V0LFxuICB9LFxuICBib3R0b21FbmQ6IHtcbiAgICByaWdodDogYDBgLFxuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgfSxcbiAgcmlnaHQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgtNTAlKWAsXG4gIH0sXG4gIHJpZ2h0U3RhcnQ6IHtcbiAgICBsZWZ0OiBmdWxsT2Zmc2V0LFxuICAgIHRvcDogYDBgLFxuICB9LFxuICByaWdodEVuZDoge1xuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgYm90dG9tOiBgMGAsXG4gIH0sXG4gIGxlZnQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoLTUwJSlgLFxuICB9LFxuICBsZWZ0U3RhcnQ6IHtcbiAgICByaWdodDogZnVsbE9mZnNldCxcbiAgICB0b3A6IGAwYCxcbiAgfSxcbiAgbGVmdEVuZDoge1xuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIGJvdHRvbTogYDBgLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IGNhcFN0eWxlcyA9IGNzc2BcbiAgZm9udC1zaXplOiAke2dldFRleHRTaXplKCdzJyl9O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDAuMDVlbTtcbmA7XG4iXX0= */");
+  var icon = /*#__PURE__*/css(transitionStyles, ";color:", variant && variantStyles[variant].iconColor, ";", isActive && "color: ".concat(variant && variantStyles[variant].color), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:icon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1R2tCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRleHRTaXplLCBnZXRUcmFuc2l0aW9uLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5leHBvcnQgY29uc3QgY2FwSGVpZ2h0ID0gYDAuNzRlbWA7XG5leHBvcnQgY29uc3QgbGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpIC0gJHtjYXBIZWlnaHR9KSAvIDIpYDtcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIHN0cm9rZVNpemU6ICcxcHgnLFxuICBkaXZpZGVyU3Ryb2tlU2l6ZTogJzFweCcsXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignc2hhZGU3JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4JyxcbiAgY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXI6ICdoc2wodmFyKC0tcmVkSFMpIHZhcigtLXJlZEwpIC8gMTIlKScsXG4gIGNsZWFyQnV0dG9uRGFuZ2VyQmFja2dyb3VuZEFjdGl2ZTogJ2hzbCh2YXIoLS1yZWRIUykgdmFyKC0tcmVkTCkgLyA2MCUpJyxcbiAgZGFuZ2VySWNvbkNvbG9yOiAnaHNsKHZhcigtLXJlZEhTKSB2YXIoLS1yZWRMKSAvIDcwJSknLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcblxuICAmOmhvdmVyIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2hvdmVyJyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxufTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIGljb25Db2xvcjogZ2V0Q29sb3IoJ2ljb24nKSxcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCdmYWRlMScpLFxuICAgICAgaWNvbkNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIH0sXG5cbiAgICBhY3RpdmU6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTUnKSxcbiAgICB9LFxuICB9LFxuXG4gIGRhbmdlcjoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgaWNvbkNvbG9yOiBjb21wb25lbnRWYXJzLmRhbmdlckljb25Db2xvcixcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGNvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXIsXG4gICAgICBpY29uQ29sb3I6IGdldENvbG9yKCdkYW5nZXInKSxcbiAgICB9LFxuXG4gICAgYWN0aXZlOiB7XG4gICAgICBib3JkZXJDb2xvcjogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmRBY3RpdmUsXG4gICAgfSxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDbGVhckJ1dHRvblN0eWxlcyA9ICh7IHZhcmlhbnQgPSAnbmV1dHJhbCcsIGlzQWN0aXZlLCBpc0Rpc2FibGVkIH0pID0+IHtcbiAgY29uc3QgYm94ID0gY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5iYWNrZ3JvdW5kQ29sb3J9O1xuXG4gICAgICAuSWNvbiB7XG4gICAgICAgIGNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5pY29uQ29sb3J9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIC0tYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0gJHt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmFjdGl2ZS5ib3JkZXJDb2xvcn07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigtLWJvcmRlcik7XG4gICAgfVxuXG4gICAgJHtpc0Rpc2FibGVkICYmIGBwb2ludGVyLWV2ZW50czogbm9uZTsgYH1cbiAgYDtcblxuICBjb25zdCBpY29uID0gY3NzYFxuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmljb25Db2xvcn07XG4gICAgJHtpc0FjdGl2ZSAmJiBgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfWB9O1xuICBgO1xuXG4gIGNvbnN0IHRleHQgPSBjc3NgXG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfTtcbiAgICAke2lzRGlzYWJsZWQgJiYgYGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX1gfTtcbiAgYDtcblxuICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IHsgYm94LCBpY29uLCB0ZXh0IH07XG4gIHJldHVybiBjbGVhckJ1dHRvblN0eWxlcztcbn07XG5cbmNvbnN0IGZ1bGxPZmZzZXQgPSBgY2FsYygxMDAlICsgdmFyKC0tcGxhY2VtZW50T2Zmc2V0LCB2YXIoLS1ncm4tc3BhY2UteHMpKSlgO1xuXG5leHBvcnQgY29uc3QgcGxhY2VtZW50U3R5bGVzID0ge1xuICB0b3A6IHtcbiAgICBib3R0b206IGZ1bGxPZmZzZXQsXG4gICAgbGVmdDogYDUwJWAsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWCgtNTAlKWAsXG4gIH0sXG4gIHRvcFN0YXJ0OiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIGxlZnQ6IGAwYCxcbiAgfSxcbiAgdG9wRW5kOiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIHJpZ2h0OiBgMGAsXG4gIH0sXG4gIGJvdHRvbToge1xuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgICBsZWZ0OiBgNTAlYCxcbiAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKC01MCUpYCxcbiAgfSxcbiAgYm90dG9tU3RhcnQ6IHtcbiAgICBsZWZ0OiBgMGAsXG4gICAgdG9wOiBmdWxsT2Zmc2V0LFxuICB9LFxuICBib3R0b21FbmQ6IHtcbiAgICByaWdodDogYDBgLFxuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgfSxcbiAgcmlnaHQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgtNTAlKWAsXG4gIH0sXG4gIHJpZ2h0U3RhcnQ6IHtcbiAgICBsZWZ0OiBmdWxsT2Zmc2V0LFxuICAgIHRvcDogYDBgLFxuICB9LFxuICByaWdodEVuZDoge1xuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgYm90dG9tOiBgMGAsXG4gIH0sXG4gIGxlZnQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoLTUwJSlgLFxuICB9LFxuICBsZWZ0U3RhcnQ6IHtcbiAgICByaWdodDogZnVsbE9mZnNldCxcbiAgICB0b3A6IGAwYCxcbiAgfSxcbiAgbGVmdEVuZDoge1xuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIGJvdHRvbTogYDBgLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IGNhcFN0eWxlcyA9IGNzc2BcbiAgZm9udC1zaXplOiAke2dldFRleHRTaXplKCdzJyl9O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDAuMDVlbTtcbmA7XG4iXX0= */");
+  var text = /*#__PURE__*/css("color:", variant && variantStyles[variant].color, ";", isDisabled && "color: ".concat(getColor('disabledContent')), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:text;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2R2tCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRleHRTaXplLCBnZXRUcmFuc2l0aW9uLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5leHBvcnQgY29uc3QgY2FwSGVpZ2h0ID0gYDAuNzRlbWA7XG5leHBvcnQgY29uc3QgbGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpIC0gJHtjYXBIZWlnaHR9KSAvIDIpYDtcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIHN0cm9rZVNpemU6ICcxcHgnLFxuICBkaXZpZGVyU3Ryb2tlU2l6ZTogJzFweCcsXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignc2hhZGU3JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4JyxcbiAgY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXI6ICdoc2wodmFyKC0tcmVkSFMpIHZhcigtLXJlZEwpIC8gMTIlKScsXG4gIGNsZWFyQnV0dG9uRGFuZ2VyQmFja2dyb3VuZEFjdGl2ZTogJ2hzbCh2YXIoLS1yZWRIUykgdmFyKC0tcmVkTCkgLyA2MCUpJyxcbiAgZGFuZ2VySWNvbkNvbG9yOiAnaHNsKHZhcigtLXJlZEhTKSB2YXIoLS1yZWRMKSAvIDcwJSknLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcblxuICAmOmhvdmVyIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2hvdmVyJyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxufTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIGljb25Db2xvcjogZ2V0Q29sb3IoJ2ljb24nKSxcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCdmYWRlMScpLFxuICAgICAgaWNvbkNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIH0sXG5cbiAgICBhY3RpdmU6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTUnKSxcbiAgICB9LFxuICB9LFxuXG4gIGRhbmdlcjoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgaWNvbkNvbG9yOiBjb21wb25lbnRWYXJzLmRhbmdlckljb25Db2xvcixcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGNvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXIsXG4gICAgICBpY29uQ29sb3I6IGdldENvbG9yKCdkYW5nZXInKSxcbiAgICB9LFxuXG4gICAgYWN0aXZlOiB7XG4gICAgICBib3JkZXJDb2xvcjogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmRBY3RpdmUsXG4gICAgfSxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDbGVhckJ1dHRvblN0eWxlcyA9ICh7IHZhcmlhbnQgPSAnbmV1dHJhbCcsIGlzQWN0aXZlLCBpc0Rpc2FibGVkIH0pID0+IHtcbiAgY29uc3QgYm94ID0gY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5iYWNrZ3JvdW5kQ29sb3J9O1xuXG4gICAgICAuSWNvbiB7XG4gICAgICAgIGNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5pY29uQ29sb3J9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIC0tYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0gJHt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmFjdGl2ZS5ib3JkZXJDb2xvcn07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigtLWJvcmRlcik7XG4gICAgfVxuXG4gICAgJHtpc0Rpc2FibGVkICYmIGBwb2ludGVyLWV2ZW50czogbm9uZTsgYH1cbiAgYDtcblxuICBjb25zdCBpY29uID0gY3NzYFxuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmljb25Db2xvcn07XG4gICAgJHtpc0FjdGl2ZSAmJiBgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfWB9O1xuICBgO1xuXG4gIGNvbnN0IHRleHQgPSBjc3NgXG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfTtcbiAgICAke2lzRGlzYWJsZWQgJiYgYGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX1gfTtcbiAgYDtcblxuICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IHsgYm94LCBpY29uLCB0ZXh0IH07XG4gIHJldHVybiBjbGVhckJ1dHRvblN0eWxlcztcbn07XG5cbmNvbnN0IGZ1bGxPZmZzZXQgPSBgY2FsYygxMDAlICsgdmFyKC0tcGxhY2VtZW50T2Zmc2V0LCB2YXIoLS1ncm4tc3BhY2UteHMpKSlgO1xuXG5leHBvcnQgY29uc3QgcGxhY2VtZW50U3R5bGVzID0ge1xuICB0b3A6IHtcbiAgICBib3R0b206IGZ1bGxPZmZzZXQsXG4gICAgbGVmdDogYDUwJWAsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWCgtNTAlKWAsXG4gIH0sXG4gIHRvcFN0YXJ0OiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIGxlZnQ6IGAwYCxcbiAgfSxcbiAgdG9wRW5kOiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIHJpZ2h0OiBgMGAsXG4gIH0sXG4gIGJvdHRvbToge1xuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgICBsZWZ0OiBgNTAlYCxcbiAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKC01MCUpYCxcbiAgfSxcbiAgYm90dG9tU3RhcnQ6IHtcbiAgICBsZWZ0OiBgMGAsXG4gICAgdG9wOiBmdWxsT2Zmc2V0LFxuICB9LFxuICBib3R0b21FbmQ6IHtcbiAgICByaWdodDogYDBgLFxuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgfSxcbiAgcmlnaHQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgtNTAlKWAsXG4gIH0sXG4gIHJpZ2h0U3RhcnQ6IHtcbiAgICBsZWZ0OiBmdWxsT2Zmc2V0LFxuICAgIHRvcDogYDBgLFxuICB9LFxuICByaWdodEVuZDoge1xuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgYm90dG9tOiBgMGAsXG4gIH0sXG4gIGxlZnQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoLTUwJSlgLFxuICB9LFxuICBsZWZ0U3RhcnQ6IHtcbiAgICByaWdodDogZnVsbE9mZnNldCxcbiAgICB0b3A6IGAwYCxcbiAgfSxcbiAgbGVmdEVuZDoge1xuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIGJvdHRvbTogYDBgLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IGNhcFN0eWxlcyA9IGNzc2BcbiAgZm9udC1zaXplOiAke2dldFRleHRTaXplKCdzJyl9O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDAuMDVlbTtcbmA7XG4iXX0= */");
   var clearButtonStyles = {
     box: box,
     icon: icon,
@@ -112,4 +112,4 @@ export var placementStyles = {
     bottom: "0"
   }
 };
-export var capStyles = "\n  font-size: ".concat(getTextSize('s'), ";\n  font-weight: ").concat(getWeight('medium'), ";\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n");
+export var capStyles = /*#__PURE__*/css("font-size:", getTextSize('s'), ";font-weight:", getWeight('medium'), ";text-transform:uppercase;letter-spacing:0.05em;" + (process.env.NODE_ENV === "production" ? "" : ";label:capStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErSzRCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRleHRTaXplLCBnZXRUcmFuc2l0aW9uLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5leHBvcnQgY29uc3QgY2FwSGVpZ2h0ID0gYDAuNzRlbWA7XG5leHBvcnQgY29uc3QgbGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpIC0gJHtjYXBIZWlnaHR9KSAvIDIpYDtcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIHN0cm9rZVNpemU6ICcxcHgnLFxuICBkaXZpZGVyU3Ryb2tlU2l6ZTogJzFweCcsXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignc2hhZGU3JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4JyxcbiAgY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXI6ICdoc2wodmFyKC0tcmVkSFMpIHZhcigtLXJlZEwpIC8gMTIlKScsXG4gIGNsZWFyQnV0dG9uRGFuZ2VyQmFja2dyb3VuZEFjdGl2ZTogJ2hzbCh2YXIoLS1yZWRIUykgdmFyKC0tcmVkTCkgLyA2MCUpJyxcbiAgZGFuZ2VySWNvbkNvbG9yOiAnaHNsKHZhcigtLXJlZEhTKSB2YXIoLS1yZWRMKSAvIDcwJSknLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcblxuICAmOmhvdmVyIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2hvdmVyJyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxufTtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIGljb25Db2xvcjogZ2V0Q29sb3IoJ2ljb24nKSxcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCdmYWRlMScpLFxuICAgICAgaWNvbkNvbG9yOiBnZXRDb2xvcignY29udGVudCcpLFxuICAgIH0sXG5cbiAgICBhY3RpdmU6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTUnKSxcbiAgICB9LFxuICB9LFxuXG4gIGRhbmdlcjoge1xuICAgIGNvbG9yOiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgaWNvbkNvbG9yOiBjb21wb25lbnRWYXJzLmRhbmdlckljb25Db2xvcixcblxuICAgIGhvdmVyOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGNvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25EYW5nZXJCYWNrZ3JvdW5kSG92ZXIsXG4gICAgICBpY29uQ29sb3I6IGdldENvbG9yKCdkYW5nZXInKSxcbiAgICB9LFxuXG4gICAgYWN0aXZlOiB7XG4gICAgICBib3JkZXJDb2xvcjogY29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkRhbmdlckJhY2tncm91bmRBY3RpdmUsXG4gICAgfSxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDbGVhckJ1dHRvblN0eWxlcyA9ICh7IHZhcmlhbnQgPSAnbmV1dHJhbCcsIGlzQWN0aXZlLCBpc0Rpc2FibGVkIH0pID0+IHtcbiAgY29uc3QgYm94ID0gY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5iYWNrZ3JvdW5kQ29sb3J9O1xuXG4gICAgICAuSWNvbiB7XG4gICAgICAgIGNvbG9yOiAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XS5ob3Zlci5pY29uQ29sb3J9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIC0tYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0gJHt2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmFjdGl2ZS5ib3JkZXJDb2xvcn07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigtLWJvcmRlcik7XG4gICAgfVxuXG4gICAgJHtpc0Rpc2FibGVkICYmIGBwb2ludGVyLWV2ZW50czogbm9uZTsgYH1cbiAgYDtcblxuICBjb25zdCBpY29uID0gY3NzYFxuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmljb25Db2xvcn07XG4gICAgJHtpc0FjdGl2ZSAmJiBgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfWB9O1xuICBgO1xuXG4gIGNvbnN0IHRleHQgPSBjc3NgXG4gICAgY29sb3I6ICR7dmFyaWFudCAmJiB2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yfTtcbiAgICAke2lzRGlzYWJsZWQgJiYgYGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX1gfTtcbiAgYDtcblxuICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IHsgYm94LCBpY29uLCB0ZXh0IH07XG4gIHJldHVybiBjbGVhckJ1dHRvblN0eWxlcztcbn07XG5cbmNvbnN0IGZ1bGxPZmZzZXQgPSBgY2FsYygxMDAlICsgdmFyKC0tcGxhY2VtZW50T2Zmc2V0LCB2YXIoLS1ncm4tc3BhY2UteHMpKSlgO1xuXG5leHBvcnQgY29uc3QgcGxhY2VtZW50U3R5bGVzID0ge1xuICB0b3A6IHtcbiAgICBib3R0b206IGZ1bGxPZmZzZXQsXG4gICAgbGVmdDogYDUwJWAsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWCgtNTAlKWAsXG4gIH0sXG4gIHRvcFN0YXJ0OiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIGxlZnQ6IGAwYCxcbiAgfSxcbiAgdG9wRW5kOiB7XG4gICAgYm90dG9tOiBmdWxsT2Zmc2V0LFxuICAgIHJpZ2h0OiBgMGAsXG4gIH0sXG4gIGJvdHRvbToge1xuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgICBsZWZ0OiBgNTAlYCxcbiAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKC01MCUpYCxcbiAgfSxcbiAgYm90dG9tU3RhcnQ6IHtcbiAgICBsZWZ0OiBgMGAsXG4gICAgdG9wOiBmdWxsT2Zmc2V0LFxuICB9LFxuICBib3R0b21FbmQ6IHtcbiAgICByaWdodDogYDBgLFxuICAgIHRvcDogZnVsbE9mZnNldCxcbiAgfSxcbiAgcmlnaHQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgtNTAlKWAsXG4gIH0sXG4gIHJpZ2h0U3RhcnQ6IHtcbiAgICBsZWZ0OiBmdWxsT2Zmc2V0LFxuICAgIHRvcDogYDBgLFxuICB9LFxuICByaWdodEVuZDoge1xuICAgIGxlZnQ6IGZ1bGxPZmZzZXQsXG4gICAgYm90dG9tOiBgMGAsXG4gIH0sXG4gIGxlZnQ6IHtcbiAgICB0b3A6IGA1MCVgLFxuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoLTUwJSlgLFxuICB9LFxuICBsZWZ0U3RhcnQ6IHtcbiAgICByaWdodDogZnVsbE9mZnNldCxcbiAgICB0b3A6IGAwYCxcbiAgfSxcbiAgbGVmdEVuZDoge1xuICAgIHJpZ2h0OiBmdWxsT2Zmc2V0LFxuICAgIGJvdHRvbTogYDBgLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IGNhcFN0eWxlcyA9IGNzc2BcbiAgZm9udC1zaXplOiAke2dldFRleHRTaXplKCdzJyl9O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbGV0dGVyLXNwYWNpbmc6IDAuMDVlbTtcbmA7XG4iXX0= */");

package/es/hooks/index.js

@@ -2,5 +2,4 @@ export * from './useMedia';
 export * from './useKeyPress';
 export * from './useOnClickOutside';
 export * from './useWindowSize';
-export * from './useWidth';
-export * from './usePrev';
+export * from './useWidth';

package/es/hooks/useOnClickOutside.js

@@ -1,13 +1,12 @@
-import "core-js/modules/es.object.to-string.js";
 import { useEffect } from 'react';
-export function useOnClickOutside(refs, handler) {
+export function useOnClickOutside(ref, handler) {
   useEffect(function () {
     var listener = function listener(event) {
-      if (refs.every(function (ref) {
-        return ref.current && !ref.current.contains(event.target);
-      })) {
-        handler(event);
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
       }
+
+      handler(event);
     };
 
     document.addEventListener('mousedown', listener);
@@ -16,5 +15,5 @@ export function useOnClickOutside(refs, handler) {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  }, [refs, handler]);
+  }, [ref, handler]);
 }

package/es/icons/index.js

@@ -22,9 +22,7 @@ export { default as IconDuplicate } from './icon-duplicate';
 export { default as IconEllipsis } from './icon-ellipsis';
 export { default as IconFile } from './icon-file';
 export { default as IconFolder } from './icon-folder';
-export { default as IconFolderRemove } from './icon-folder-remove';
 export { default as IconFolderAdd } from './icon-folder-add';
-export { default as IconFolderMove } from './icon-folder-move';
 export { default as IconGear } from './icon-gear';
 export { default as IconGlobe } from './icon-globe';
 export { default as IconHeart } from './icon-heart';
@@ -46,7 +44,6 @@ export { default as IconTablet } from './icon-tablet';
 export { default as IconTextAlignCenter } from './icon-text-align-center';
 export { default as IconTextAlignLeft } from './icon-text-align-left';
 export { default as IconTextAlignRight } from './icon-text-align-right';
-export { default as IconTextJustify } from './icon-text-justify';
 export { default as IconTrash } from './icon-trash';
 export { default as IconType } from './icon-type';
 export { default as IconUndo } from './icon-undo';
@@ -59,18 +56,4 @@ export { default as IconQuestion } from './icon-question';
 export { default as IconReset } from './icon-reset';
 export { default as IconDrag } from './icon-drag';
 export { default as IconLocation } from './icon-location';
-export { default as IconPlay } from './icon-play';
-export { default as IconArchive } from './icon-archive';
-export { default as ColumnsAndRow } from './icon-columns-and-row';
-export { default as ColumnAndRows } from './icon-column-and-rows';
-export { default as Columns } from './icon-columns';
-export { default as Rows } from './icon-rows';
-export { default as RowAndColumns } from './icon-row-and-columns';
-export { default as RowsAndColumn } from './icon-rows-and-column';
-export { default as IconItalic } from './icon-italic';
-export { default as IconStrike } from './icon-strike';
-export { default as IconBold } from './icon-bold';
-export { default as IconUnderline } from './icon-underline';
-export { default as IconBulletList } from './icon-bullet-list';
-export { default as IconNumberList } from './icon-number-list';
-export { default as IconAt } from './icon-at';
+export { default as IconPlay } from './icon-play';

package/es/index.js

@@ -2,5 +2,4 @@ export * from './components';
 export * from './icons';
 export * from './variables';
 export * from './utilities';
-export * from './hooks';
-export * from './foundational';
+export * from './hooks';

package/es/styles/base.css

@@ -0,0 +1,53 @@
+@import './variables.css';
+@import './colors/core.css';
+@import './colors/theme.css';
+@import './colors/experimental.css';
+@import './shadows.css';
+
+:root {
+  --grn-lineHeight-fixed: 7px;
+  --grn-lineHeight-relative: 0.9em;
+  --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));
+
+  --grn-font-global: 'Flodesk Sans', sans-serif;
+  --grn-radius-button: var(--grn-radius-s);
+}
+
+.grn-context, .grn-context * {
+  line-height: var(--grn-lineHeight-global);
+  outline-color: var(--grn-color-selection);
+}
+
+.grn-context {
+  font-family: var(--grn-font-global);
+  font-size: var(--grn-text-m);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[data-theme],
+.grn-context {
+  color: var(--grn-color-content);
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+.grn-link-context a {
+  transition: var(--grn-transition-slow);
+  text-underline-position: under;
+  text-underline-offset: calc(2px - 0.1em);
+  color: inherit;
+  cursor: pointer;
+  text-decoration-color: var(--grn-color-fade3);
+}
+
+.grn-link-context a:hover {
+  transition: var(--grn-transition-fast);
+  text-decoration-color: currentColor;
+}
+
+.grn-link-context a:active {
+  transition: var(--grn-transition-xxFast);
+}

package/es/styles/colors/core.css

@@ -0,0 +1,74 @@
+:root {
+  --white: hsl(0 0% 100%);
+  --H: 13.85;
+  --S: 7%;
+  --HS: var(--H) var(--S);
+  --bfS: 20%;
+  --wfS: calc(100% - var(--bfS));
+}
+
+:root {
+  --redHS: 6 55%;
+  --redL: 52%;
+
+  --grn-color-blue: hsl(218 74% 54%);
+  --grn-color-red: hsl(var(--redHS) var(--redL));
+  --grn-color-yellow: hsl(44 99% 59%);
+  --grn-color-green: hsl(153 22% 57%);
+}
+
+:root, [data-experimental] {
+  --grn-color-shadeTone13: hsl(var(--H) 20% 10%);
+  --grn-color-shadeTone12: hsl(var(--H) 22% 11.5%);
+  --grn-color-shadeTone11: hsl(var(--H) 15% 15%);
+  --grn-color-shadeTone10: hsl(var(--H) 12% 21%);
+  --grn-color-shadeTone9: hsl(var(--H) 9% 28%);
+  --grn-color-shadeTone8: hsl(var(--H) 7% 38%);
+  --grn-color-shadeTone7: hsl(var(--H) 5% 51%);
+  --grn-color-shadeTone6: hsl(var(--H) 6% 70%);
+  --grn-color-shadeTone5: hsl(var(--H) 7% 82%);
+  --grn-color-shadeTone4: hsl(var(--H) 7% 90%);
+  --grn-color-shadeTone3: hsl(var(--H) 7% 95%);
+  --grn-color-shadeTone2: hsl(var(--H) 6% 97.5%);
+  --grn-color-shadeTone1: hsl(var(--H) 6% 100%);
+
+  --fadeA10: 73%;
+  --fadeA9: 66%;
+  --fadeA8: 59%;
+  --fadeA7: 52%;
+  --fadeA6: 45%;
+  --fadeA5: 38%;
+  --fadeA4: 31%;
+  --fadeA3: 24%;
+  --fadeA2: 17%;
+  --fadeA1: 10%;
+
+  --grn-color-lightFade10: hsl(var(--H) 7% var(--wfS) / var(--fadeA10));
+  --grn-color-lightFade9:  hsl(var(--H) 7% var(--wfS) / var(--fadeA9));
+  --grn-color-lightFade8:  hsl(var(--H) 7% var(--wfS) / var(--fadeA8));
+  --grn-color-lightFade7:  hsl(var(--H) 7% var(--wfS) / var(--fadeA7));
+  --grn-color-lightFade6:  hsl(var(--H) 7% var(--wfS) / var(--fadeA6));
+  --grn-color-lightFade5:  hsl(var(--H) 7% var(--wfS) / var(--fadeA5));
+  --grn-color-lightFade4:  hsl(var(--H) 7% var(--wfS) / var(--fadeA4));
+  --grn-color-lightFade3:  hsl(var(--H) 7% var(--wfS) / var(--fadeA3));
+  --grn-color-lightFade2:  hsl(var(--H) 7% var(--wfS) / var(--fadeA2));
+  --grn-color-lightFade1:  hsl(var(--H) 7% var(--wfS) / var(--fadeA1));
+
+  --grn-color-darkFade10: hsl(var(--H) 7% var(--bfS) / var(--fadeA10));
+  --grn-color-darkFade9:  hsl(var(--H) 7% var(--bfS) / var(--fadeA9));
+  --grn-color-darkFade8:  hsl(var(--H) 7% var(--bfS) / var(--fadeA8));
+  --grn-color-darkFade7:  hsl(var(--H) 7% var(--bfS) / var(--fadeA7));
+  --grn-color-darkFade6:  hsl(var(--H) 7% var(--bfS) / var(--fadeA6));
+  --grn-color-darkFade5:  hsl(var(--H) 7% var(--bfS) / var(--fadeA5));
+  --grn-color-darkFade4:  hsl(var(--H) 9% var(--bfS) / var(--fadeA4));
+  --grn-color-darkFade3:  hsl(var(--H) 11% var(--bfS) / var(--fadeA3));
+  --grn-color-darkFade2:  hsl(var(--H) 13% var(--bfS) / var(--fadeA2));
+  --grn-color-darkFade1:  hsl(var(--H) 15% var(--bfS) / var(--fadeA1));
+}
+
+:root {
+  --grn-color-warning: var(--grn-color-yellow);
+  --grn-color-danger: var(--grn-color-red);
+  --grn-color-success: var(--grn-color-green);
+  --grn-color-selection: var(--grn-color-blue);
+}

package/es/styles/colors/experimental.css

@@ -0,0 +1,3 @@
+[data-experimental="true"] {
+  --grn-radius-button: 1000px;
+}

package/es/styles/colors/theme.css

@@ -0,0 +1,92 @@
+/* light */
+
+:root, [data-theme="light"], [data-theme="dark"] [data-theme="invert"] {
+  --grn-color-fade10: var(--grn-color-darkFade10);
+  --grn-color-fade9: var(--grn-color-darkFade9);
+  --grn-color-fade8: var(--grn-color-darkFade8);
+  --grn-color-fade7: var(--grn-color-darkFade7);
+  --grn-color-fade6: var(--grn-color-darkFade6);
+  --grn-color-fade5: var(--grn-color-darkFade5);
+  --grn-color-fade4: var(--grn-color-darkFade4);
+  --grn-color-fade3: var(--grn-color-darkFade3);
+  --grn-color-fade2: var(--grn-color-darkFade2);
+  --grn-color-fade1: var(--grn-color-darkFade1);
+
+  --grn-color-shade1: var(--grn-color-shadeTone1);
+  --grn-color-shade2: var(--grn-color-shadeTone2);
+  --grn-color-shade3: var(--grn-color-shadeTone3);
+  --grn-color-shade4: var(--grn-color-shadeTone4);
+  --grn-color-shade5: var(--grn-color-shadeTone5);
+  --grn-color-shade6: var(--grn-color-shadeTone6);
+  --grn-color-shade7: var(--grn-color-shadeTone7);
+  --grn-color-shade8: var(--grn-color-shadeTone8);
+  --grn-color-shade9: var(--grn-color-shadeTone9);
+  --grn-color-shade10: var(--grn-color-shadeTone10);
+  --grn-color-shade11: var(--grn-color-shadeTone11);
+  --grn-color-shade12: var(--grn-color-shadeTone12);
+  --grn-color-shade13: var(--grn-color-shadeTone13);
+}
+
+/* dark */
+
+[data-theme="dark"], [data-theme="light"] [data-theme="invert"] {
+  --grn-color-fade10: var(--grn-color-lightFade10);
+  --grn-color-fade9: var(--grn-color-lightFade9);
+  --grn-color-fade8: var(--grn-color-lightFade8);
+  --grn-color-fade7: var(--grn-color-lightFade7);
+  --grn-color-fade6: var(--grn-color-lightFade6);
+  --grn-color-fade5: var(--grn-color-lightFade5);
+  --grn-color-fade4: var(--grn-color-lightFade4);
+  --grn-color-fade3: var(--grn-color-lightFade3);
+  --grn-color-fade2: var(--grn-color-lightFade2);
+  --grn-color-fade1: var(--grn-color-lightFade1);
+
+  --grn-color-shade1: var(--grn-color-shadeTone13);
+  --grn-color-shade2: var(--grn-color-shadeTone12);
+  --grn-color-shade3: var(--grn-color-shadeTone11);
+  --grn-color-shade4: var(--grn-color-shadeTone10);
+  --grn-color-shade5: var(--grn-color-shadeTone9);
+  --grn-color-shade6: var(--grn-color-shadeTone8);
+  --grn-color-shade7: var(--grn-color-shadeTone7);
+  --grn-color-shade8: var(--grn-color-shadeTone6);
+  --grn-color-shade9: var(--grn-color-shadeTone5);
+  --grn-color-shade10:var(--grn-color-shadeTone4);
+  --grn-color-shade11: var(--grn-color-shadeTone3);
+  --grn-color-shade12: var(--grn-color-shadeTone2);
+  --grn-color-shade13: var(--grn-color-shadeTone1);
+}
+
+/* light */
+
+:root, [data-theme="light"], [data-theme="dark"] [data-theme="invert"] {
+  --contentL: 20%;
+  --backgroundL: 80%;
+  --grn-color-floatingBackground: var(--grn-color-shade1);
+}
+
+/* dark */
+
+[data-theme="dark"], [data-theme="light"] [data-theme="invert"] {
+  --contentL: 80%;
+  --backgroundL: 20%;
+  --grn-color-floatingBackground: var(--grn-color-shade2);
+}
+
+/* light + dark */
+
+:root, [data-theme] {
+  --grn-color-content: var(--grn-color-shade12);
+  --grn-color-content2: var(--grn-color-fade7);
+  --grn-color-content3: var(--grn-color-fade5);
+  --grn-color-disabledContent: var(--grn-color-shade7);
+  --grn-color-icon: var(--grn-color-fade6);
+
+  --grn-color-background: var(--grn-color-shade1);
+  --grn-color-background2: var(--grn-color-shade2);
+  --grn-color-background3: var(--grn-color-shade3);
+  --grn-color-disabledBackground: var(--grn-color-shade4);
+
+  --grn-color-border: hsl(var(--HS) var(--contentL) / 12%);
+  --grn-color-border2: hsl(var(--HS) var(--contentL) / 20%);
+}
+

package/es/styles/shadows.css

@@ -0,0 +1,60 @@
+:root, [data-theme="light"], [data-theme="dark"] [data-theme="invert"] {
+  --alphaRatio: 0.6;
+}
+
+[data-theme="dark"], [data-theme="light"] [data-theme="invert"] {
+  --alphaRatio: 20;
+}
+
+:root, [data-theme] {
+  --c: 0 0% 0%;
+  --blurRatio: 1.7;
+  --yRatio: 1.1;
+  --spreadRatio: 2;
+  --ratioCurve: 0.9;
+
+  --rc1: var(--ratioCurve) * 1;
+  --rc2: var(--ratioCurve) * 2;
+  --rc3: var(--ratioCurve) * 3;
+  --rc4: var(--ratioCurve) * 4;
+
+  --b1: 1px;
+  --b2: calc(var(--b1) * var(--rc2) * var(--blurRatio));
+  --b3: calc(var(--b2) * var(--rc3) * var(--blurRatio));
+  --b4: calc(var(--b3) * var(--rc4) * var(--blurRatio));
+
+  --y1: 1px;
+  --y2: calc(var(--y1) * var(--rc2) * var(--yRatio));
+  --y3: calc(var(--y2) * var(--rc3) * var(--yRatio));
+  --y4: calc(var(--y3) * var(--rc4) * var(--yRatio));
+
+  --a1: 5%;
+  --a2: calc(var(--a1) * var(--rc2) * var(--alphaRatio));
+  --a3: calc(var(--a2) * var(--rc3) * var(--alphaRatio));
+  --a4: calc(var(--a3) * var(--rc4) * var(--alphaRatio));
+
+  --s1: -0.1px;
+  --s2: calc(var(--s1) * var(--rc2) * var(--spreadRatio));
+  --s3: calc(var(--s2) * var(--rc3) * var(--spreadRatio));
+  --s4: calc(var(--s3) * var(--rc4) * var(--spreadRatio));
+
+  --shadow1: 0 var(--y1) var(--b1) var(--s1) hsl(var(--c) / var(--a1));
+  --shadow2: 0 var(--y2) var(--b2) var(--s2) hsl(var(--c) / var(--a2));
+  --shadow3: 0 var(--y3) var(--b3) var(--s3) hsl(var(--c) / var(--a3));
+  --shadow4: 0 var(--y4) var(--b4) var(--s4) hsl(var(--c) / var(--a4));
+
+  --grn-shadow-s:
+    var(--shadow1),
+    var(--shadow2)
+  ;
+
+  --grn-shadow-m:
+    var(--grn-shadow-s),
+    var(--shadow3)
+  ;
+
+  --grn-shadow-l:
+    var(--grn-shadow-m),
+    var(--shadow4)
+  ;
+}

package/es/styles/variables.css

@@ -0,0 +1,66 @@
+:root {
+  --grn-unit: 8px;
+}
+
+:root {
+  --grn-text-s: 12px;
+  --grn-text-m: 15px;
+  --grn-text-l: 18px;
+  --grn-text-xl: 24px;
+  --grn-text-xxl: 30px;
+}
+
+/* text size ✕ ~1.285 */
+:root {
+  --grn-icon-s: 14px;
+  --grn-icon-m: 18px;
+  --grn-icon-l: 24px;
+  --grn-icon-xl: 32px;
+  --grn-icon-xxl: 40px;
+}
+
+:root {
+  --grn-weight-normal: 400;
+  --grn-weight-medium: 500;
+}
+
+:root {
+  --grn-space-xs: calc(var(--grn-unit) / 2);
+  --grn-space-s: calc(var(--grn-unit) * 1);
+  --grn-space-xl: calc(var(--grn-unit) * 2);
+  --grn-space-xxxl: calc(var(--grn-unit) * 3);
+  --grn-space-xxxl: calc(var(--grn-unit) * 5);
+  --grn-space-xxxxxl: calc(var(--grn-unit) * 7);
+}
+
+:root {
+  --grn-radius-s: 3px;
+  --grn-radius-m: 6px;
+  --grn-radius-l: 10px;
+}
+
+:root {
+  --grn-transition-slow: 400ms;
+  --grn-transition-fast: 200ms;
+  --grn-transition-xFast: 160ms;
+  --grn-transition-xxFast: 80ms;
+}
+
+:root, [data-theme] {
+  --grn-space-betweenFormTitleAndContent: var(--grn-space-xxxl);
+  --grn-space-betweenFormContents: var(--grn-space-xl);
+  --grn-space-betweenFormContentAndActions: var(--grn-space-xxxl);
+  --grn-space-betweenFormControlAndLabel: var(--grn-space-s);
+  --grn-space-fieldPaddingX: 12px;
+
+  --grn-color-fieldBorder: var(--grn-color-fade3);
+  --grn-color-fieldBorderHover: var(--grn-color-fade6);
+  --grn-color-fieldBorderFocus: var(--grn-color-shade9);
+  --grn-color-fieldBorderDisabled: var(--grn-color-shade5);
+  --grn-color-fieldBackgroundDisabled: var(--grn-color-shade2);
+  --grn-color-backdrop: var(--grn-color-darkFade8);
+
+  --grn-transition-leave: var(--grn-transition-slow);
+  --grn-transition-hover: var(--grn-transition-fast);
+  --grn-transition-active: var(--grn-transition-xxFast);
+}

package/es/types.js

@@ -17,32 +17,22 @@ export var autoFlows = directions;
 export var flexDirections = directions;
 export var alignSelfs = [].concat(axisAlignments, ['baseline']);
 export var flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
-export var overflows = ['visible', 'hidden', 'scroll', 'auto'];
-export var positions = ['static', 'relative', 'fixed', 'absolute', 'sticky'];
-export var cursors = ['default', 'pointer'];
-export var sides = ['all', 'left', 'right', 'top', 'bottom', 'x', 'y'];
-export var borderWidths = ['1px', '2px', '3px', '4px'];
-export var textTransforms = ['capitalize', 'uppercase', 'lowercase'];
-export var textDisplays = ['block', 'inline-block', 'inline'];
-export var textAlignments = ['left', 'center', 'right'];
-export var spaces = Object.keys(vars.spaces);
 export var types = {
-  spaces: PropTypes.oneOf(spaces),
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
-  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(spaces), PropTypes.number, PropTypes.string, PropTypes.object]),
+  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
   dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   responsiveDimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-  side: PropTypes.oneOf(sides),
+  side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
   radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string, PropTypes.number]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
-  position: PropTypes.oneOf(positions),
+  position: PropTypes.oneOf(['static', 'relative', 'fixed', 'absolute', 'sticky']),
   responsiveTextSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
-  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(textAlignments), PropTypes.string, PropTypes.object]),
+  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
-  overflow: PropTypes.oneOf(overflows),
+  overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
   textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label']),
-  textDisplay: PropTypes.oneOf(textDisplays),
+  textDisplay: PropTypes.oneOf(['block', 'inline-block', 'inline']),
   responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   responsiveRows: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOfType([PropTypes.oneOf(autoFlows), PropTypes.string, PropTypes.object]),
@@ -67,8 +57,7 @@ export var types = {
   buttonTag: PropTypes.oneOf(['button', 'a', 'span']),
   hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   transition: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.transitions)), PropTypes.string]),
-  cursor: PropTypes.oneOf(cursors),
-  borderWidth: PropTypes.oneOf(borderWidths)
+  cursor: PropTypes.oneOf(['default', 'pointer'])
 };
 export var defaultProps = {
   menuMaxHeight: '468px',