@flodesk/grain 5.12.0 → 5.14.0

package/es/components/select.js

@@ -11,7 +11,7 @@ import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
 import _styled from "@emotion/styled/base";
-var _excluded = ["children"];
+var _excluded = ["children", "triggerVariant"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -36,26 +36,27 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import PropTypes from 'prop-types';
 import React, { useState, forwardRef, Fragment } from 'react';
-import { Icon, Box, Text } from '.';
+import { Icon, Box, Text, TextButton } from '.';
 import { IconChevronDown } from '../icons';
 import { Listbox } from '@headlessui/react';
 import { getColor, getRadius } from '../utilities';
 import { types } from '../types';
-import { fieldXPadding, MenuCard, MenuCardItem, textBoxHeight, transitions } from '../foundational';
+import { fieldXPadding, MenuCard, MenuItem, textBoxHeight, transitions } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var DefaultTriggerButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
+var TriggerButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "e17qd7kh0"
 } : {
   target: "e17qd7kh0",
-  label: "DefaultTriggerButton"
-})(transitions, ";display:flex;align-items:center;gap:8px;appearance:none;border:none;background:", getColor('fade1'), ";padding:0 ", fieldXPadding, ";min-height:", textBoxHeight, ";border-radius:", getRadius('s'), ";font:inherit;color:inherit;cursor:pointer;width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTBDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCBmb3J3YXJkUmVmLCBGcmFnbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEljb24sIEJveCwgVGV4dCB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbkNoZXZyb25Eb3duIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgTGlzdGJveCB9IGZyb20gJ0BoZWFkbGVzc3VpL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBmaWVsZFhQYWRkaW5nLCBNZW51Q2FyZCwgTWVudUNhcmRJdGVtLCB0ZXh0Qm94SGVpZ2h0LCB0cmFuc2l0aW9ucyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IERlZmF1bHRUcmlnZ2VyQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHt0cmFuc2l0aW9uc307XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogOHB4O1xuICBhcHBlYXJhbmNlOiBub25lO1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ2ZhZGUxJyl9O1xuICBwYWRkaW5nOiAwICR7ZmllbGRYUGFkZGluZ307XG4gIG1pbi1oZWlnaHQ6ICR7dGV4dEJveEhlaWdodH07XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICBmb250OiBpbmhlcml0O1xuICBjb2xvcjogaW5oZXJpdDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdmYWRlMicpfTtcbiAgfVxuYDtcblxuY29uc3QgRGVmYXVsdFRyaWdnZXIgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPERlZmF1bHRUcmlnZ2VyQnV0dG9uIHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIDxUZXh0IGhhc0VsbGlwc2lzIHdlaWdodD1cIm1lZGl1bVwiPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGV4dD5cbiAgICA8Qm94IG1hcmdpbkxlZnQ9XCJhdXRvXCI+XG4gICAgICA8SWNvbiBpY29uPXs8SWNvbkNoZXZyb25Eb3duIC8+fSAvPlxuICAgIDwvQm94PlxuICA8L0RlZmF1bHRUcmlnZ2VyQnV0dG9uPlxuKSk7XG5cbmNvbnN0IFNlbGVjdFJvb3QgPSAoeyAuLi5wcm9wcyB9KSA9PiA8Qm94IHsuLi5wcm9wc30gcG9zaXRpb249XCJyZWxhdGl2ZVwiIC8+O1xuXG5leHBvcnQgY29uc3QgU2VsZWN0ID0gKHtcbiAgb3B0aW9ucyxcbiAgZGVmYXVsdE9wdGlvbixcbiAgb25DaGFuZ2UsXG4gIG1lbnVBbGlnbiA9ICdsZWZ0JyxcbiAgbWVudVdpZHRoID0gJzEwMCUnLFxuICB0cmlnZ2VyLFxufSkgPT4ge1xuICBjb25zdCBbc2VsZWN0ZWRPcHRpb24sIHNldFNlbGVjdGVkT3B0aW9uXSA9IHVzZVN0YXRlKGRlZmF1bHRPcHRpb24gfHwge30pO1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9IG9wdGlvbiA9PiB7XG4gICAgc2V0U2VsZWN0ZWRPcHRpb24ob3B0aW9uKTtcbiAgICBvbkNoYW5nZSAmJiBvbkNoYW5nZShvcHRpb24pO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPExpc3Rib3ggYXM9e1NlbGVjdFJvb3R9IHZhbHVlPXtzZWxlY3RlZE9wdGlvbn0gb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0+XG4gICAgICA8TGlzdGJveC5CdXR0b24gYXM9e0ZyYWdtZW50fT5cbiAgICAgICAge3RyaWdnZXIgPyAoXG4gICAgICAgICAgdHJpZ2dlcihzZWxlY3RlZE9wdGlvbilcbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8RGVmYXVsdFRyaWdnZXI+e3NlbGVjdGVkT3B0aW9uLmNvbnRlbnR9PC9EZWZhdWx0VHJpZ2dlcj5cbiAgICAgICAgKX1cbiAgICAgIDwvTGlzdGJveC5CdXR0b24+XG5cbiAgICAgIDxMaXN0Ym94Lk9wdGlvbnMgbWVudUFsaWduPXttZW51QWxpZ259IG1lbnVXaWR0aD17bWVudVdpZHRofSBhcz17TWVudUNhcmR9PlxuICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbiwgaW5kZXgpID0+IChcbiAgICAgICAgICA8TGlzdGJveC5PcHRpb24ga2V5PXtpbmRleH0gdmFsdWU9e29wdGlvbn0gYXM9e0ZyYWdtZW50fSBkaXNhYmxlZD17b3B0aW9uLmlzRGlzYWJsZWR9PlxuICAgICAgICAgICAgeyh7IGFjdGl2ZSwgc2VsZWN0ZWQgfSkgPT4gKFxuICAgICAgICAgICAgICA8TWVudUNhcmRJdGVtIGlzU2VsZWN0ZWQ9e3NlbGVjdGVkfSBpc0FjdGl2ZT17YWN0aXZlfSBpc0Rpc2FibGVkPXtvcHRpb24uaXNEaXNhYmxlZH0+XG4gICAgICAgICAgICAgICAge29wdGlvbi5jb250ZW50fVxuICAgICAgICAgICAgICA8L01lbnVDYXJkSXRlbT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9MaXN0Ym94Lk9wdGlvbj5cbiAgICAgICAgKSl9XG4gICAgICA8L0xpc3Rib3guT3B0aW9ucz5cbiAgICA8L0xpc3Rib3g+XG4gICk7XG59O1xuXG5TZWxlY3QucHJvcFR5cGVzID0ge1xuICBvcHRpb25zOiBQcm9wVHlwZXMuYXJyYXksXG4gIGRlZmF1bHRPcHRpb246IFByb3BUeXBlcy5vYmplY3QsXG4gIG9uQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYyxcbiAgbWVudUFsaWduOiBQcm9wVHlwZXMub25lT2YoWydsZWZ0JywgJ3JpZ2h0J10pLFxuICBtZW51V2lkdGg6IHR5cGVzLmRpbWVuc2lvbixcbiAgdHJpZ2dlcjogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */"));
+  label: "TriggerButton"
+})(transitions, ";display:flex;align-items:center;gap:8px;appearance:none;border:none;background:", getColor('fade1'), ";padding:0 ", fieldXPadding, ";min-height:", textBoxHeight, ";border-radius:", getRadius('s'), ";font:inherit;color:inherit;cursor:pointer;width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1DIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCBmb3J3YXJkUmVmLCBGcmFnbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEljb24sIEJveCwgVGV4dCwgVGV4dEJ1dHRvbiB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbkNoZXZyb25Eb3duIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgTGlzdGJveCB9IGZyb20gJ0BoZWFkbGVzc3VpL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBmaWVsZFhQYWRkaW5nLCBNZW51Q2FyZCwgTWVudUl0ZW0sIHRleHRCb3hIZWlnaHQsIHRyYW5zaXRpb25zIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgVHJpZ2dlckJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gICR7dHJhbnNpdGlvbnN9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IDhweDtcbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgYm9yZGVyOiBub25lO1xuICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdmYWRlMScpfTtcbiAgcGFkZGluZzogMCAke2ZpZWxkWFBhZGRpbmd9O1xuICBtaW4taGVpZ2h0OiAke3RleHRCb3hIZWlnaHR9O1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgZm9udDogaW5oZXJpdDtcbiAgY29sb3I6IGluaGVyaXQ7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJjpob3ZlciB7XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignZmFkZTInKX07XG4gIH1cbmA7XG5cbmNvbnN0IFRyaWdnZXIgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0cmlnZ2VyVmFyaWFudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDw+XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAnYm94JyAmJiAoXG4gICAgICA8VHJpZ2dlckJ1dHRvbiByZWY9e3JlZn0gey4uLnByb3BzfT5cbiAgICAgICAgPFRleHQgaGFzRWxsaXBzaXMgd2VpZ2h0PVwibWVkaXVtXCI+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1RleHQ+XG4gICAgICAgIDxCb3ggbWFyZ2luTGVmdD1cImF1dG9cIj5cbiAgICAgICAgICA8SWNvbiBpY29uPXs8SWNvbkNoZXZyb25Eb3duIC8+fSAvPlxuICAgICAgICA8L0JveD5cbiAgICAgIDwvVHJpZ2dlckJ1dHRvbj5cbiAgICApfVxuICAgIHt0cmlnZ2VyVmFyaWFudCA9PT0gJ3RleHQnICYmIChcbiAgICAgIDxUZXh0QnV0dG9uIHJlZj17cmVmfSBpY29uPXs8SWNvbkNoZXZyb25Eb3duIC8+fSBpY29uUG9zaXRpb249XCJyaWdodFwiIHsuLi5wcm9wc30+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvVGV4dEJ1dHRvbj5cbiAgICApfVxuICA8Lz5cbikpO1xuXG5jb25zdCBTZWxlY3RSb290ID0gKHsgLi4ucHJvcHMgfSkgPT4gPEJveCB7Li4ucHJvcHN9IHBvc2l0aW9uPVwicmVsYXRpdmVcIiAvPjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7XG4gIG9wdGlvbnMsXG4gIGRlZmF1bHRPcHRpb24sXG4gIG9uQ2hhbmdlLFxuICBtZW51QWxpZ24gPSAnbGVmdCcsXG4gIG1lbnVXaWR0aCA9ICcxMDAlJyxcbiAgdHJpZ2dlcjogY3VzdG9tVHJpZ2dlcixcbiAgdHJpZ2dlclZhcmlhbnQgPSAnYm94Jyxcbn0pID0+IHtcbiAgY29uc3QgW3NlbGVjdGVkT3B0aW9uLCBzZXRTZWxlY3RlZE9wdGlvbl0gPSB1c2VTdGF0ZShkZWZhdWx0T3B0aW9uIHx8IHt9KTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2UgPSBvcHRpb24gPT4ge1xuICAgIHNldFNlbGVjdGVkT3B0aW9uKG9wdGlvbik7XG4gICAgb25DaGFuZ2UgJiYgb25DaGFuZ2Uob3B0aW9uKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxMaXN0Ym94IGFzPXtTZWxlY3RSb290fSB2YWx1ZT17c2VsZWN0ZWRPcHRpb259IG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9PlxuICAgICAgPExpc3Rib3guQnV0dG9uIGFzPXtGcmFnbWVudH0+XG4gICAgICAgIHtjdXN0b21UcmlnZ2VyID8gKFxuICAgICAgICAgIGN1c3RvbVRyaWdnZXIoc2VsZWN0ZWRPcHRpb24pXG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPFRyaWdnZXIgdHJpZ2dlclZhcmlhbnQ9e3RyaWdnZXJWYXJpYW50fT57c2VsZWN0ZWRPcHRpb24uY29udGVudH08L1RyaWdnZXI+XG4gICAgICAgICl9XG4gICAgICA8L0xpc3Rib3guQnV0dG9uPlxuXG4gICAgICA8TGlzdGJveC5PcHRpb25zIG1lbnVBbGlnbj17bWVudUFsaWdufSBtZW51V2lkdGg9e21lbnVXaWR0aH0gYXM9e01lbnVDYXJkfT5cbiAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiAoXG4gICAgICAgICAgPExpc3Rib3guT3B0aW9uIGtleT17aW5kZXh9IHZhbHVlPXtvcHRpb259IGFzPXtGcmFnbWVudH0gZGlzYWJsZWQ9e29wdGlvbi5pc0Rpc2FibGVkfT5cbiAgICAgICAgICAgIHsoeyBhY3RpdmUsIHNlbGVjdGVkIH0pID0+IChcbiAgICAgICAgICAgICAgPE1lbnVJdGVtIGlzU2VsZWN0ZWQ9e3NlbGVjdGVkfSBpc0FjdGl2ZT17YWN0aXZlfSBpc0Rpc2FibGVkPXtvcHRpb24uaXNEaXNhYmxlZH0+XG4gICAgICAgICAgICAgICAge29wdGlvbi5jb250ZW50fVxuICAgICAgICAgICAgICA8L01lbnVJdGVtPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L0xpc3Rib3guT3B0aW9uPlxuICAgICAgICApKX1cbiAgICAgIDwvTGlzdGJveC5PcHRpb25zPlxuICAgIDwvTGlzdGJveD5cbiAgKTtcbn07XG5cblNlbGVjdC5wcm9wVHlwZXMgPSB7XG4gIG9wdGlvbnM6IFByb3BUeXBlcy5hcnJheSxcbiAgZGVmYXVsdE9wdGlvbjogUHJvcFR5cGVzLm9iamVjdCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBtZW51QWxpZ246IHR5cGVzLm1lbnVBbGlnbixcbiAgbWVudVdpZHRoOiB0eXBlcy5kaW1lbnNpb24sXG4gIHRyaWdnZXI6IFByb3BUeXBlcy5mdW5jLFxuICB0cmlnZ2VyVmFyaWFudDogUHJvcFR5cGVzLm9uZU9mKFsnYm94JywgJ3RleHQnXSksXG59O1xuIl19 */"));
 
-var DefaultTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
+      triggerVariant = _ref.triggerVariant,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return ___EmotionJSX(DefaultTriggerButton, _extends({
+  return ___EmotionJSX(React.Fragment, null, triggerVariant === 'box' && ___EmotionJSX(TriggerButton, _extends({
     ref: ref
   }, props), ___EmotionJSX(Text, {
     hasEllipsis: true,
@@ -64,7 +65,11 @@ var DefaultTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
     marginLeft: "auto"
   }, ___EmotionJSX(Icon, {
     icon: ___EmotionJSX(IconChevronDown, null)
-  })));
+  }))), triggerVariant === 'text' && ___EmotionJSX(TextButton, _extends({
+    ref: ref,
+    icon: ___EmotionJSX(IconChevronDown, null),
+    iconPosition: "right"
+  }, props), children));
 });
 
 var SelectRoot = function SelectRoot(_ref2) {
@@ -82,7 +87,9 @@ export var Select = function Select(_ref3) {
       menuAlign = _ref3$menuAlign === void 0 ? 'left' : _ref3$menuAlign,
       _ref3$menuWidth = _ref3.menuWidth,
       menuWidth = _ref3$menuWidth === void 0 ? '100%' : _ref3$menuWidth,
-      trigger = _ref3.trigger;
+      customTrigger = _ref3.trigger,
+      _ref3$triggerVariant = _ref3.triggerVariant,
+      triggerVariant = _ref3$triggerVariant === void 0 ? 'box' : _ref3$triggerVariant;
 
   var _useState = useState(defaultOption || {}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -100,7 +107,9 @@ export var Select = function Select(_ref3) {
     onChange: handleChange
   }, ___EmotionJSX(Listbox.Button, {
     as: Fragment
-  }, trigger ? trigger(selectedOption) : ___EmotionJSX(DefaultTrigger, null, selectedOption.content)), ___EmotionJSX(Listbox.Options, {
+  }, customTrigger ? customTrigger(selectedOption) : ___EmotionJSX(Trigger, {
+    triggerVariant: triggerVariant
+  }, selectedOption.content)), ___EmotionJSX(Listbox.Options, {
     menuAlign: menuAlign,
     menuWidth: menuWidth,
     as: MenuCard
@@ -113,7 +122,7 @@ export var Select = function Select(_ref3) {
     }, function (_ref4) {
       var active = _ref4.active,
           selected = _ref4.selected;
-      return ___EmotionJSX(MenuCardItem, {
+      return ___EmotionJSX(MenuItem, {
         isSelected: selected,
         isActive: active,
         isDisabled: option.isDisabled
@@ -125,7 +134,8 @@ Select.propTypes = {
   options: PropTypes.array,
   defaultOption: PropTypes.object,
   onChange: PropTypes.func,
-  menuAlign: PropTypes.oneOf(['left', 'right']),
+  menuAlign: types.menuAlign,
   menuWidth: types.dimension,
-  trigger: PropTypes.func
+  trigger: PropTypes.func,
+  triggerVariant: PropTypes.oneOf(['box', 'text'])
 };

package/es/components/text-input.js

@@ -36,30 +36,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { css } from '@emotion/react';
 import { Box, Text } from '.';
 import { Icon } from './icon';
 import { fieldStyles, fieldXPadding, focusFieldStyles } from '../foundational';
+import { getColor } from '../utilities';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var variables = process.env.NODE_ENV === "production" ? {
-  name: "zg204k",
-  styles: "--grn-fieldBorderColor:var(--grn-color-fade3);--grn-fieldBorderColor-hover:var(--grn-color-fade6);--grn-fieldBorderColor-focus:var(--grn-color-grey6)"
-} : {
-  name: "gbj57z-variables",
-  styles: "--grn-fieldBorderColor:var(--grn-color-fade3);--grn-fieldBorderColor-hover:var(--grn-color-fade6);--grn-fieldBorderColor-focus:var(--grn-color-grey6);label:variables;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFxQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IGZpZWxkU3R5bGVzLCBmaWVsZFhQYWRkaW5nLCBmb2N1c0ZpZWxkU3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgdmFyaWFibGVzID0gY3NzYFxuICAtLWdybi1maWVsZEJvcmRlckNvbG9yOiB2YXIoLS1ncm4tY29sb3ItZmFkZTMpO1xuICAtLWdybi1maWVsZEJvcmRlckNvbG9yLWhvdmVyOiB2YXIoLS1ncm4tY29sb3ItZmFkZTYpO1xuICAtLWdybi1maWVsZEJvcmRlckNvbG9yLWZvY3VzOiB2YXIoLS1ncm4tY29sb3ItZ3JleTYpO1xuYDtcblxuY29uc3QgaWNvbk9mZnNldFB4ID0gMTI7XG5jb25zdCBpY29uVGV4dEdhcFB4ID0gODtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICR7dmFyaWFibGVzfTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsYFxuICBkaXNwbGF5OiBibG9jaztcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYDtcblxuY29uc3QgSW5wdXRGaWVsZCA9IHN0eWxlZC5pbnB1dGBcbiAgJHtwID0+XG4gICAgZmllbGRTdHlsZXMoe1xuICAgICAgcGFkZGluZ0xlZnQ6IHAucGFkZGluZ0xlZnQsXG4gICAgICBib3JkZXJDb2xvcjogcC5oYXNFcnJvciA/ICd2YXIoLS1ncm4tY29sb3ItZGFuZ2VyKScgOiAndmFyKC0tZ3JuLWZpZWxkQm9yZGVyQ29sb3IpJyxcbiAgICB9KX07XG5cbiAgJHtwID0+ICFwLmhhc0Vycm9yICYmIGZvY3VzRmllbGRTdHlsZXN9O1xuYDtcblxuY29uc3QgSWNvblNlY3Rpb24gPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIG1hcmdpbjogYXV0bztcbiAgbGVmdDogJHtpY29uT2Zmc2V0UHh9cHg7XG4gIHRvcDogMDtcbiAgYm90dG9tOiAwO1xuICBoZWlnaHQ6IGZpdC1jb250ZW50O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0SW5wdXQgPSAoe1xuICB2YWx1ZSxcbiAgcGxhY2Vob2xkZXIsXG4gIGxhYmVsLFxuICBpZCxcbiAgaWNvbixcbiAgaGFzRXJyb3IsXG4gIGVycm9yTWVzc2FnZSxcbiAgLi4ucHJvcHNcbn0pID0+IHtcbiAgY29uc3QgaWNvblJlZiA9IFJlYWN0LnVzZVJlZihudWxsKTtcbiAgY29uc3QgW2ljb25XaWR0aCwgc2V0SWNvbldpZHRoXSA9IFJlYWN0LnVzZVN0YXRlKCk7XG5cbiAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaWNvblJlZi5jdXJyZW50KSB7XG4gICAgICBzZXRJY29uV2lkdGgoaWNvblJlZi5jdXJyZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBwYWRkaW5nTGVmdCA9IGljb24gPyBgJHtpY29uT2Zmc2V0UHggKyBpY29uV2lkdGggKyBpY29uVGV4dEdhcFB4fXB4YCA6IGZpZWxkWFBhZGRpbmc7XG5cbiAgcmV0dXJuIChcbiAgICA8V3JhcHBlciB0eXBlPVwidGV4dFwiPlxuICAgICAge2xhYmVsICYmIDxMYWJlbCBodG1sRm9yPXtpZH0+e2xhYmVsfTwvTGFiZWw+fVxuICAgICAgPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+XG4gICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICA8SWNvblNlY3Rpb24+XG4gICAgICAgICAgICA8SWNvbiByZWY9e2ljb25SZWZ9IGljb249e2ljb259IC8+XG4gICAgICAgICAgPC9JY29uU2VjdGlvbj5cbiAgICAgICAgKX1cbiAgICAgICAgPElucHV0RmllbGRcbiAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgIGxhYmVsPXtsYWJlbH1cbiAgICAgICAgICBpY29uPXtpY29ufVxuICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICBwYWRkaW5nTGVmdD17cGFkZGluZ0xlZnR9XG4gICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgLz5cbiAgICAgIDwvQm94PlxuICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgIDxCb3ggbWFyZ2luVG9wPXswLjV9PlxuICAgICAgICAgIDxUZXh0IGNvbG9yPVwiZGFuZ2VyXCI+e2Vycm9yTWVzc2FnZX08L1RleHQ+XG4gICAgICAgIDwvQm94PlxuICAgICAgKX1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5UZXh0SW5wdXQucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdmFsdWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGxhYmVsOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubm9kZV0pLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var iconOffsetPx = 12;
 var iconTextGapPx = 8;
 
-var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1o9e51y3"
-} : {
-  target: "e1o9e51y3",
-  label: "Wrapper"
-})(variables, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgeyBmaWVsZFN0eWxlcywgZmllbGRYUGFkZGluZywgZm9jdXNGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IHZhcmlhYmxlcyA9IGNzc2BcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGUzKTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1ob3ZlcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGU2KTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1mb2N1czogdmFyKC0tZ3JuLWNvbG9yLWdyZXk2KTtcbmA7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAke3ZhcmlhYmxlc307XG5gO1xuXG5jb25zdCBMYWJlbCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDRweDtcbmA7XG5cbmNvbnN0IElucHV0RmllbGQgPSBzdHlsZWQuaW5wdXRgXG4gICR7cCA9PlxuICAgIGZpZWxkU3R5bGVzKHtcbiAgICAgIHBhZGRpbmdMZWZ0OiBwLnBhZGRpbmdMZWZ0LFxuICAgICAgYm9yZGVyQ29sb3I6IHAuaGFzRXJyb3IgPyAndmFyKC0tZ3JuLWNvbG9yLWRhbmdlciknIDogJ3ZhcigtLWdybi1maWVsZEJvcmRlckNvbG9yKScsXG4gICAgfSl9O1xuXG4gICR7cCA9PiAhcC5oYXNFcnJvciAmJiBmb2N1c0ZpZWxkU3R5bGVzfTtcbmA7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiBmaWVsZFhQYWRkaW5nO1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXIgdHlwZT1cInRleHRcIj5cbiAgICAgIHtsYWJlbCAmJiA8TGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0xhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgICAgaWNvbj17aWNvbn1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIC8+XG4gICAgICA8L0JveD5cbiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICA8Qm94IG1hcmdpblRvcD17MC41fT5cbiAgICAgICAgICA8VGV4dCBjb2xvcj1cImRhbmdlclwiPntlcnJvck1lc3NhZ2V9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgPC9XcmFwcGVyPlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */"));
-
 var Label = /*#__PURE__*/_styled("label", process.env.NODE_ENV === "production" ? {
   target: "e1o9e51y2"
 } : {
@@ -71,7 +55,7 @@ var Label = /*#__PURE__*/_styled("label", process.env.NODE_ENV === "production"
 } : {
   name: "1oawhp4",
   styles: "display:block;margin-bottom:4px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgeyBmaWVsZFN0eWxlcywgZmllbGRYUGFkZGluZywgZm9jdXNGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IHZhcmlhYmxlcyA9IGNzc2BcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGUzKTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1ob3ZlcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGU2KTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1mb2N1czogdmFyKC0tZ3JuLWNvbG9yLWdyZXk2KTtcbmA7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAke3ZhcmlhYmxlc307XG5gO1xuXG5jb25zdCBMYWJlbCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDRweDtcbmA7XG5cbmNvbnN0IElucHV0RmllbGQgPSBzdHlsZWQuaW5wdXRgXG4gICR7cCA9PlxuICAgIGZpZWxkU3R5bGVzKHtcbiAgICAgIHBhZGRpbmdMZWZ0OiBwLnBhZGRpbmdMZWZ0LFxuICAgICAgYm9yZGVyQ29sb3I6IHAuaGFzRXJyb3IgPyAndmFyKC0tZ3JuLWNvbG9yLWRhbmdlciknIDogJ3ZhcigtLWdybi1maWVsZEJvcmRlckNvbG9yKScsXG4gICAgfSl9O1xuXG4gICR7cCA9PiAhcC5oYXNFcnJvciAmJiBmb2N1c0ZpZWxkU3R5bGVzfTtcbmA7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiBmaWVsZFhQYWRkaW5nO1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXIgdHlwZT1cInRleHRcIj5cbiAgICAgIHtsYWJlbCAmJiA8TGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0xhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgICAgaWNvbj17aWNvbn1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIC8+XG4gICAgICA8L0JveD5cbiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICA8Qm94IG1hcmdpblRvcD17MC41fT5cbiAgICAgICAgICA8VGV4dCBjb2xvcj1cImRhbmdlclwiPntlcnJvck1lc3NhZ2V9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgPC9XcmFwcGVyPlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcwQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IGZpZWxkU3R5bGVzLCBmaWVsZFhQYWRkaW5nLCBmb2N1c0ZpZWxkU3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IGdldENvbG9yIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcblxuY29uc3QgaWNvbk9mZnNldFB4ID0gMTI7XG5jb25zdCBpY29uVGV4dEdhcFB4ID0gODtcblxuY29uc3QgTGFiZWwgPSBzdHlsZWQubGFiZWxgXG4gIGRpc3BsYXk6IGJsb2NrO1xuICBtYXJnaW4tYm90dG9tOiA0cHg7XG5gO1xuXG5jb25zdCBJbnB1dEZpZWxkID0gc3R5bGVkLmlucHV0YFxuICAke3AgPT5cbiAgICBmaWVsZFN0eWxlcyh7XG4gICAgICBwYWRkaW5nTGVmdDogcC5wYWRkaW5nTGVmdCxcbiAgICAgIGJvcmRlckNvbG9yOiBwLmhhc0Vycm9yICYmIGdldENvbG9yKCdkYW5nZXInKSxcbiAgICB9KX07XG5cbiAgJHtwID0+ICFwLmhhc0Vycm9yICYmIGZvY3VzRmllbGRTdHlsZXN9O1xuYDtcblxuY29uc3QgSWNvblNlY3Rpb24gPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIG1hcmdpbjogYXV0bztcbiAgbGVmdDogJHtpY29uT2Zmc2V0UHh9cHg7XG4gIHRvcDogMDtcbiAgYm90dG9tOiAwO1xuICBoZWlnaHQ6IGZpdC1jb250ZW50O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0SW5wdXQgPSAoe1xuICB2YWx1ZSxcbiAgcGxhY2Vob2xkZXIsXG4gIGxhYmVsLFxuICBpZCxcbiAgaWNvbixcbiAgaGFzRXJyb3IsXG4gIGVycm9yTWVzc2FnZSxcbiAgLi4ucHJvcHNcbn0pID0+IHtcbiAgY29uc3QgaWNvblJlZiA9IFJlYWN0LnVzZVJlZihudWxsKTtcbiAgY29uc3QgW2ljb25XaWR0aCwgc2V0SWNvbldpZHRoXSA9IFJlYWN0LnVzZVN0YXRlKCk7XG5cbiAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaWNvblJlZi5jdXJyZW50KSB7XG4gICAgICBzZXRJY29uV2lkdGgoaWNvblJlZi5jdXJyZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBwYWRkaW5nTGVmdCA9IGljb24gPyBgJHtpY29uT2Zmc2V0UHggKyBpY29uV2lkdGggKyBpY29uVGV4dEdhcFB4fXB4YCA6IGZpZWxkWFBhZGRpbmc7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAge2xhYmVsICYmIDxMYWJlbCBodG1sRm9yPXtpZH0+e2xhYmVsfTwvTGFiZWw+fVxuICAgICAgPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+XG4gICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICA8SWNvblNlY3Rpb24+XG4gICAgICAgICAgICA8SWNvbiByZWY9e2ljb25SZWZ9IGljb249e2ljb259IC8+XG4gICAgICAgICAgPC9JY29uU2VjdGlvbj5cbiAgICAgICAgKX1cbiAgICAgICAgPElucHV0RmllbGRcbiAgICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgICAgaWNvbj17aWNvbn1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIC8+XG4gICAgICA8L0JveD5cbiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICA8Qm94IG1hcmdpblRvcD17MC41fT5cbiAgICAgICAgICA8VGV4dCBjb2xvcj1cImRhbmdlclwiPntlcnJvck1lc3NhZ2V9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5UZXh0SW5wdXQucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdmFsdWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGxhYmVsOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubm9kZV0pLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
@@ -83,18 +67,18 @@ var InputField = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "product
 })(function (p) {
   return fieldStyles({
     paddingLeft: p.paddingLeft,
-    borderColor: p.hasError ? 'var(--grn-color-danger)' : 'var(--grn-fieldBorderColor)'
+    borderColor: p.hasError && getColor('danger')
   });
 }, ";", function (p) {
   return !p.hasError && focusFieldStyles;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCK0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgeyBmaWVsZFN0eWxlcywgZmllbGRYUGFkZGluZywgZm9jdXNGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IHZhcmlhYmxlcyA9IGNzc2BcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGUzKTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1ob3ZlcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGU2KTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1mb2N1czogdmFyKC0tZ3JuLWNvbG9yLWdyZXk2KTtcbmA7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAke3ZhcmlhYmxlc307XG5gO1xuXG5jb25zdCBMYWJlbCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDRweDtcbmA7XG5cbmNvbnN0IElucHV0RmllbGQgPSBzdHlsZWQuaW5wdXRgXG4gICR7cCA9PlxuICAgIGZpZWxkU3R5bGVzKHtcbiAgICAgIHBhZGRpbmdMZWZ0OiBwLnBhZGRpbmdMZWZ0LFxuICAgICAgYm9yZGVyQ29sb3I6IHAuaGFzRXJyb3IgPyAndmFyKC0tZ3JuLWNvbG9yLWRhbmdlciknIDogJ3ZhcigtLWdybi1maWVsZEJvcmRlckNvbG9yKScsXG4gICAgfSl9O1xuXG4gICR7cCA9PiAhcC5oYXNFcnJvciAmJiBmb2N1c0ZpZWxkU3R5bGVzfTtcbmA7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiBmaWVsZFhQYWRkaW5nO1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXIgdHlwZT1cInRleHRcIj5cbiAgICAgIHtsYWJlbCAmJiA8TGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0xhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgICAgaWNvbj17aWNvbn1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIC8+XG4gICAgICA8L0JveD5cbiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICA8Qm94IG1hcmdpblRvcD17MC41fT5cbiAgICAgICAgICA8VGV4dCBjb2xvcj1cImRhbmdlclwiPntlcnJvck1lc3NhZ2V9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgPC9XcmFwcGVyPlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */"));
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCK0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgeyBmaWVsZFN0eWxlcywgZmllbGRYUGFkZGluZywgZm9jdXNGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyBnZXRDb2xvciB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsYFxuICBkaXNwbGF5OiBibG9jaztcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYDtcblxuY29uc3QgSW5wdXRGaWVsZCA9IHN0eWxlZC5pbnB1dGBcbiAgJHtwID0+XG4gICAgZmllbGRTdHlsZXMoe1xuICAgICAgcGFkZGluZ0xlZnQ6IHAucGFkZGluZ0xlZnQsXG4gICAgICBib3JkZXJDb2xvcjogcC5oYXNFcnJvciAmJiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgfSl9O1xuXG4gICR7cCA9PiAhcC5oYXNFcnJvciAmJiBmb2N1c0ZpZWxkU3R5bGVzfTtcbmA7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiBmaWVsZFhQYWRkaW5nO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIHtsYWJlbCAmJiA8TGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0xhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgbGFiZWw9e2xhYmVsfVxuICAgICAgICAgIGljb249e2ljb259XG4gICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAvPlxuICAgICAgPC9Cb3g+XG4gICAgICB7ZXJyb3JNZXNzYWdlICYmIChcbiAgICAgICAgPEJveCBtYXJnaW5Ub3A9ezAuNX0+XG4gICAgICAgICAgPFRleHQgY29sb3I9XCJkYW5nZXJcIj57ZXJyb3JNZXNzYWdlfTwvVGV4dD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */"));
 
 var IconSection = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1o9e51y0"
 } : {
   target: "e1o9e51y0",
   label: "IconSection"
-})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DOEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgeyBmaWVsZFN0eWxlcywgZmllbGRYUGFkZGluZywgZm9jdXNGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IHZhcmlhYmxlcyA9IGNzc2BcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGUzKTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1ob3ZlcjogdmFyKC0tZ3JuLWNvbG9yLWZhZGU2KTtcbiAgLS1ncm4tZmllbGRCb3JkZXJDb2xvci1mb2N1czogdmFyKC0tZ3JuLWNvbG9yLWdyZXk2KTtcbmA7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAke3ZhcmlhYmxlc307XG5gO1xuXG5jb25zdCBMYWJlbCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDRweDtcbmA7XG5cbmNvbnN0IElucHV0RmllbGQgPSBzdHlsZWQuaW5wdXRgXG4gICR7cCA9PlxuICAgIGZpZWxkU3R5bGVzKHtcbiAgICAgIHBhZGRpbmdMZWZ0OiBwLnBhZGRpbmdMZWZ0LFxuICAgICAgYm9yZGVyQ29sb3I6IHAuaGFzRXJyb3IgPyAndmFyKC0tZ3JuLWNvbG9yLWRhbmdlciknIDogJ3ZhcigtLWdybi1maWVsZEJvcmRlckNvbG9yKScsXG4gICAgfSl9O1xuXG4gICR7cCA9PiAhcC5oYXNFcnJvciAmJiBmb2N1c0ZpZWxkU3R5bGVzfTtcbmA7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiBmaWVsZFhQYWRkaW5nO1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXIgdHlwZT1cInRleHRcIj5cbiAgICAgIHtsYWJlbCAmJiA8TGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0xhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgICAgaWNvbj17aWNvbn1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIC8+XG4gICAgICA8L0JveD5cbiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICA8Qm94IG1hcmdpblRvcD17MC41fT5cbiAgICAgICAgICA8VGV4dCBjb2xvcj1cImRhbmdlclwiPntlcnJvck1lc3NhZ2V9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgPC9XcmFwcGVyPlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */"));
+})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCOEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgeyBmaWVsZFN0eWxlcywgZmllbGRYUGFkZGluZywgZm9jdXNGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyBnZXRDb2xvciB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsYFxuICBkaXNwbGF5OiBibG9jaztcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYDtcblxuY29uc3QgSW5wdXRGaWVsZCA9IHN0eWxlZC5pbnB1dGBcbiAgJHtwID0+XG4gICAgZmllbGRTdHlsZXMoe1xuICAgICAgcGFkZGluZ0xlZnQ6IHAucGFkZGluZ0xlZnQsXG4gICAgICBib3JkZXJDb2xvcjogcC5oYXNFcnJvciAmJiBnZXRDb2xvcignZGFuZ2VyJyksXG4gICAgfSl9O1xuXG4gICR7cCA9PiAhcC5oYXNFcnJvciAmJiBmb2N1c0ZpZWxkU3R5bGVzfTtcbmA7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiBmaWVsZFhQYWRkaW5nO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIHtsYWJlbCAmJiA8TGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0xhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgbGFiZWw9e2xhYmVsfVxuICAgICAgICAgIGljb249e2ljb259XG4gICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAvPlxuICAgICAgPC9Cb3g+XG4gICAgICB7ZXJyb3JNZXNzYWdlICYmIChcbiAgICAgICAgPEJveCBtYXJnaW5Ub3A9ezAuNX0+XG4gICAgICAgICAgPFRleHQgY29sb3I9XCJkYW5nZXJcIj57ZXJyb3JNZXNzYWdlfTwvVGV4dD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm5vZGVdKSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */"));
 
 export var TextInput = function TextInput(_ref) {
   var value = _ref.value,
@@ -119,9 +103,7 @@ export var TextInput = function TextInput(_ref) {
     }
   }, []);
   var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : fieldXPadding;
-  return ___EmotionJSX(Wrapper, {
-    type: "text"
-  }, label && ___EmotionJSX(Label, {
+  return ___EmotionJSX("div", null, label && ___EmotionJSX(Label, {
     htmlFor: id
   }, label), ___EmotionJSX(Box, {
     position: "relative"
@@ -129,6 +111,7 @@ export var TextInput = function TextInput(_ref) {
     ref: iconRef,
     icon: icon
   })), ___EmotionJSX(InputField, _extends({
+    type: "text",
     value: value,
     placeholder: placeholder,
     label: label,

package/es/components/text.js

@@ -2,20 +2,25 @@ import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.assign.js";
-var _excluded = ["children", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align", "letterSpacing", "textTransform"];
+var _excluded = ["children", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align", "letterSpacing", "textTransform", "variant"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+import "core-js/modules/es.array.concat.js";
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import { getColor, getResponsiveTextSize, getWeight } from '../utilities';
+import { getColor, getResponsiveTextSize, getTextSize, getWeight } from '../utilities';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { css } from '@emotion/react';
 import { types } from '../types';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var variantStyles = {
+  caps: /*#__PURE__*/css("font-size:", getTextSize('s'), ";font-weight:", getWeight('semiBold'), ";text-transform:uppercase;letter-spacing:0.2em;" + (process.env.NODE_ENV === "production" ? "" : ";label:caps;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9XIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJlc3BvbnNpdmVUZXh0U2l6ZSwgZ2V0VGV4dFNpemUsIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCB2YXJpYW50U3R5bGVzID0ge1xuICBjYXBzOiBjc3NgXG4gICAgZm9udC1zaXplOiAke2dldFRleHRTaXplKCdzJyl9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnc2VtaUJvbGQnKX07XG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBsZXR0ZXItc3BhY2luZzogMC4yZW07XG4gIGAsXG59O1xuXG5leHBvcnQgY29uc3QgVGV4dCA9ICh7XG4gIGNoaWxkcmVuLFxuICBzaXplID0gJ20nLFxuICB3ZWlnaHQgPSAnbm9ybWFsJyxcbiAgY29sb3IsXG4gIHRhZyA9ICdzcGFuJyxcbiAgaGFzRWxsaXBzaXMsXG4gIGVsbGlwc2lzTGluZXMsXG4gIGFsaWduLFxuICBsZXR0ZXJTcGFjaW5nLFxuICB0ZXh0VHJhbnNmb3JtLFxuICB2YXJpYW50LFxuICAuLi5wcm9wc1xufSkgPT4ge1xuICBjb25zdCBUYWcgPSB0YWc7XG4gIHJldHVybiAoXG4gICAgPFRhZ1xuICAgICAgY3NzPXtjc3NgXG4gICAgICAgICR7IXZhcmlhbnQgJiZcbiAgICAgICAgYFxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVRleHRTaXplKHNpemUpfTtcbiAgICAgICAgICAke3RleHRUcmFuc2Zvcm0gJiYgYHRleHQtdHJhbnNmb3JtOiAke3RleHRUcmFuc2Zvcm19YH07XG4gICAgICAgICAgJHtsZXR0ZXJTcGFjaW5nICYmIGBsZXR0ZXItc3BhY2luZzogJHtsZXR0ZXJTcGFjaW5nfWB9O1xuICAgICAgICAgIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCh3ZWlnaHQpfTtcbiAgICAgICAgYH1cblxuICAgICAgICAke3ZhcmlhbnQgJiYgdmFyaWFudFN0eWxlc1t2YXJpYW50XX1cblxuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoY29sb3IpfTtcbiAgICAgICAgdGV4dC1hbGlnbjogJHthbGlnbn07XG5cbiAgICAgICAgJHtoYXNFbGxpcHNpcyAmJlxuICAgICAgICBgXG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgICAgICAgICAkeyFlbGxpcHNpc0xpbmVzICYmIGB3aGl0ZS1zcGFjZTogbm93cmFwYH07XG4gICAgICAgIGB9O1xuXG4gICAgICAgICR7aGFzRWxsaXBzaXMgJiZcbiAgICAgICAgZWxsaXBzaXNMaW5lcyAmJlxuICAgICAgICBgXG4gICAgICAgICAgZGlzcGxheTogLXdlYmtpdC1ib3g7XG4gICAgICAgICAgLXdlYmtpdC1saW5lLWNsYW1wOiAke2VsbGlwc2lzTGluZXN9O1xuICAgICAgICAgIC13ZWJraXQtYm94LW9yaWVudDogdmVydGljYWw7XG4gICAgICAgIGB9O1xuICAgICAgYH1cbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9UYWc+XG4gICk7XG59O1xuXG5UZXh0LnByb3BUeXBlcyA9IHtcbiAgc2l6ZTogdHlwZXMucmVzcG9uc2l2ZVRleHRTaXplLFxuICB3ZWlnaHQ6IHR5cGVzLndlaWdodCxcbiAgY29sb3I6IHR5cGVzLmNvbG9yLFxuICBhbGlnbjogdHlwZXMudGV4dEFsaWduLFxuICB0YWc6IHR5cGVzLnRleHRUYWcsXG4gIGhhc0VsbGlwc2lzOiBQcm9wVHlwZXMuYm9vbCxcbiAgZWxsaXBzaXNMaW5lczogUHJvcFR5cGVzLm51bWJlcixcbiAgbGV0dGVyU3BhY2luZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgdGV4dFRyYW5zZm9ybTogUHJvcFR5cGVzLm9uZU9mKFsnY2FwaXRhbGl6ZScsICd1cHBlcmNhc2UnLCAnbG93ZXJjYXNlJ10pLFxuICB2YXJpYW50OiBQcm9wVHlwZXMub25lT2YoWydjYXBzJ10pLFxufTtcbiJdfQ== */")
+};
 export var Text = function Text(_ref) {
   var children = _ref.children,
       _ref$size = _ref.size,
@@ -30,11 +35,12 @@ export var Text = function Text(_ref) {
       align = _ref.align,
       letterSpacing = _ref.letterSpacing,
       textTransform = _ref.textTransform,
+      variant = _ref.variant,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
-    css: /*#__PURE__*/css("display:block;", getResponsiveTextSize(size), ";font-weight:", getWeight(weight), ";color:", getColor(color), ";text-align:", align, ";", textTransform && "text-transform: ".concat(textTransform), ";", letterSpacing && "letter-spacing: ".concat(letterSpacing), ";", hasEllipsis && "\n          overflow: hidden;\n          text-overflow: ellipsis;\n          ".concat(!ellipsisLines && "white-space: nowrap", ";\n        "), ";", hasEllipsis && ellipsisLines && "\n          display: -webkit-box;\n          -webkit-line-clamp: ".concat(ellipsisLines, ";\n          -webkit-box-orient: vertical;\n        "), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Text;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRSZXNwb25zaXZlVGV4dFNpemUsIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVGV4dCA9ICh7XG4gIGNoaWxkcmVuLFxuICBzaXplID0gJ20nLFxuICB3ZWlnaHQgPSAnbm9ybWFsJyxcbiAgY29sb3IsXG4gIHRhZyA9ICdzcGFuJyxcbiAgaGFzRWxsaXBzaXMsXG4gIGVsbGlwc2lzTGluZXMsXG4gIGFsaWduLFxuICBsZXR0ZXJTcGFjaW5nLFxuICB0ZXh0VHJhbnNmb3JtLFxuICAuLi5wcm9wc1xufSkgPT4ge1xuICBjb25zdCBUYWcgPSB0YWc7XG4gIHJldHVybiAoXG4gICAgPFRhZ1xuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICAke2dldFJlc3BvbnNpdmVUZXh0U2l6ZShzaXplKX07XG4gICAgICAgIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCh3ZWlnaHQpfTtcbiAgICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoY29sb3IpfTtcbiAgICAgICAgdGV4dC1hbGlnbjogJHthbGlnbn07XG4gICAgICAgICR7dGV4dFRyYW5zZm9ybSAmJiBgdGV4dC10cmFuc2Zvcm06ICR7dGV4dFRyYW5zZm9ybX1gfTtcbiAgICAgICAgJHtsZXR0ZXJTcGFjaW5nICYmIGBsZXR0ZXItc3BhY2luZzogJHtsZXR0ZXJTcGFjaW5nfWB9O1xuXG4gICAgICAgICR7aGFzRWxsaXBzaXMgJiZcbiAgICAgICAgYFxuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgICAgICAgJHshZWxsaXBzaXNMaW5lcyAmJiBgd2hpdGUtc3BhY2U6IG5vd3JhcGB9O1xuICAgICAgICBgfTtcblxuICAgICAgICAke2hhc0VsbGlwc2lzICYmXG4gICAgICAgIGVsbGlwc2lzTGluZXMgJiZcbiAgICAgICAgYFxuICAgICAgICAgIGRpc3BsYXk6IC13ZWJraXQtYm94O1xuICAgICAgICAgIC13ZWJraXQtbGluZS1jbGFtcDogJHtlbGxpcHNpc0xpbmVzfTtcbiAgICAgICAgICAtd2Via2l0LWJveC1vcmllbnQ6IHZlcnRpY2FsO1xuICAgICAgICBgfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGFnPlxuICApO1xufTtcblxuVGV4dC5wcm9wVHlwZXMgPSB7XG4gIHNpemU6IHR5cGVzLnJlc3BvbnNpdmVUZXh0U2l6ZSxcbiAgd2VpZ2h0OiB0eXBlcy53ZWlnaHQsXG4gIGNvbG9yOiB0eXBlcy5jb2xvcixcbiAgYWxpZ246IHR5cGVzLnRleHRBbGlnbixcbiAgdGFnOiB0eXBlcy50ZXh0VGFnLFxuICBoYXNFbGxpcHNpczogUHJvcFR5cGVzLmJvb2wsXG4gIGVsbGlwc2lzTGluZXM6IFByb3BUeXBlcy5udW1iZXIsXG4gIGxldHRlclNwYWNpbmc6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRleHRUcmFuc2Zvcm06IFByb3BUeXBlcy5vbmVPZihbJ2NhcGl0YWxpemUnLCAndXBwZXJjYXNlJywgJ2xvd2VyY2FzZSddKSxcbn07XG4iXX0= */")
+    css: /*#__PURE__*/css(!variant && "\n          ".concat(getResponsiveTextSize(size), ";\n          ").concat(textTransform && "text-transform: ".concat(textTransform), ";\n          ").concat(letterSpacing && "letter-spacing: ".concat(letterSpacing), ";\n          font-weight: ").concat(getWeight(weight), ";\n        "), " ", variant && variantStyles[variant], " display:block;color:", getColor(color), ";text-align:", align, ";", hasEllipsis && "\n          overflow: hidden;\n          text-overflow: ellipsis;\n          ".concat(!ellipsisLines && "white-space: nowrap", ";\n        "), ";", hasEllipsis && ellipsisLines && "\n          display: -webkit-box;\n          -webkit-line-clamp: ".concat(ellipsisLines, ";\n          -webkit-box-orient: vertical;\n        "), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Text;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRSZXNwb25zaXZlVGV4dFNpemUsIGdldFRleHRTaXplLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgY2FwczogY3NzYFxuICAgIGZvbnQtc2l6ZTogJHtnZXRUZXh0U2l6ZSgncycpfTtcbiAgICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ3NlbWlCb2xkJyl9O1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgbGV0dGVyLXNwYWNpbmc6IDAuMmVtO1xuICBgLFxufTtcblxuZXhwb3J0IGNvbnN0IFRleHQgPSAoe1xuICBjaGlsZHJlbixcbiAgc2l6ZSA9ICdtJyxcbiAgd2VpZ2h0ID0gJ25vcm1hbCcsXG4gIGNvbG9yLFxuICB0YWcgPSAnc3BhbicsXG4gIGhhc0VsbGlwc2lzLFxuICBlbGxpcHNpc0xpbmVzLFxuICBhbGlnbixcbiAgbGV0dGVyU3BhY2luZyxcbiAgdGV4dFRyYW5zZm9ybSxcbiAgdmFyaWFudCxcbiAgLi4ucHJvcHNcbn0pID0+IHtcbiAgY29uc3QgVGFnID0gdGFnO1xuICByZXR1cm4gKFxuICAgIDxUYWdcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICAkeyF2YXJpYW50ICYmXG4gICAgICAgIGBcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVUZXh0U2l6ZShzaXplKX07XG4gICAgICAgICAgJHt0ZXh0VHJhbnNmb3JtICYmIGB0ZXh0LXRyYW5zZm9ybTogJHt0ZXh0VHJhbnNmb3JtfWB9O1xuICAgICAgICAgICR7bGV0dGVyU3BhY2luZyAmJiBgbGV0dGVyLXNwYWNpbmc6ICR7bGV0dGVyU3BhY2luZ31gfTtcbiAgICAgICAgICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQod2VpZ2h0KX07XG4gICAgICAgIGB9XG5cbiAgICAgICAgJHt2YXJpYW50ICYmIHZhcmlhbnRTdHlsZXNbdmFyaWFudF19XG5cbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIGNvbG9yOiAke2dldENvbG9yKGNvbG9yKX07XG4gICAgICAgIHRleHQtYWxpZ246ICR7YWxpZ259O1xuXG4gICAgICAgICR7aGFzRWxsaXBzaXMgJiZcbiAgICAgICAgYFxuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgICAgICAgJHshZWxsaXBzaXNMaW5lcyAmJiBgd2hpdGUtc3BhY2U6IG5vd3JhcGB9O1xuICAgICAgICBgfTtcblxuICAgICAgICAke2hhc0VsbGlwc2lzICYmXG4gICAgICAgIGVsbGlwc2lzTGluZXMgJiZcbiAgICAgICAgYFxuICAgICAgICAgIGRpc3BsYXk6IC13ZWJraXQtYm94O1xuICAgICAgICAgIC13ZWJraXQtbGluZS1jbGFtcDogJHtlbGxpcHNpc0xpbmVzfTtcbiAgICAgICAgICAtd2Via2l0LWJveC1vcmllbnQ6IHZlcnRpY2FsO1xuICAgICAgICBgfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGFnPlxuICApO1xufTtcblxuVGV4dC5wcm9wVHlwZXMgPSB7XG4gIHNpemU6IHR5cGVzLnJlc3BvbnNpdmVUZXh0U2l6ZSxcbiAgd2VpZ2h0OiB0eXBlcy53ZWlnaHQsXG4gIGNvbG9yOiB0eXBlcy5jb2xvcixcbiAgYWxpZ246IHR5cGVzLnRleHRBbGlnbixcbiAgdGFnOiB0eXBlcy50ZXh0VGFnLFxuICBoYXNFbGxpcHNpczogUHJvcFR5cGVzLmJvb2wsXG4gIGVsbGlwc2lzTGluZXM6IFByb3BUeXBlcy5udW1iZXIsXG4gIGxldHRlclNwYWNpbmc6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRleHRUcmFuc2Zvcm06IFByb3BUeXBlcy5vbmVPZihbJ2NhcGl0YWxpemUnLCAndXBwZXJjYXNlJywgJ2xvd2VyY2FzZSddKSxcbiAgdmFyaWFudDogUHJvcFR5cGVzLm9uZU9mKFsnY2FwcyddKSxcbn07XG4iXX0= */")
   }, props), children);
 };
 Text.propTypes = {
@@ -46,5 +52,6 @@ Text.propTypes = {
   hasEllipsis: PropTypes.bool,
   ellipsisLines: PropTypes.number,
   letterSpacing: PropTypes.string,
-  textTransform: PropTypes.oneOf(['capitalize', 'uppercase', 'lowercase'])
+  textTransform: PropTypes.oneOf(['capitalize', 'uppercase', 'lowercase']),
+  variant: PropTypes.oneOf(['caps'])
 };