@flodesk/grain 11.0.9 → 11.2.0

package/es/components/arrange/index.js

@@ -29,10 +29,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { generateAttributes } from '../../utilities';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../../types';
 import { Box } from '../box';
 import styles from './styles.module.css';
+import { BreakpointsContext } from '../breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -55,6 +56,7 @@ export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
   var sharedProps = {
     gap: gap,
     columnGap: columnGap,
@@ -70,7 +72,8 @@ export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
       columns: columns,
       rows: rows
     }, sharedProps),
-    classNameProps: _objectSpread({}, sharedProps)
+    classNameProps: _objectSpread({}, sharedProps),
+    breakpoints: breakpoints
   });
 
   var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);

package/es/components/box.js

@@ -26,10 +26,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../types';
 import PropTypes from 'prop-types';
 import { generateAttributes } from '../utilities';
+import { BreakpointsContext } from './breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var color = _ref.color,
@@ -91,6 +92,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
   var Tag = tag;
+  var breakpoints = useContext(BreakpointsContext);
   var sharedProps = {
     padding: padding,
     paddingTop: paddingTop,
@@ -146,7 +148,8 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       overflow: overflow,
       overflowX: overflowX,
       overflowY: overflowY
-    }, sharedProps)
+    }, sharedProps),
+    breakpoints: breakpoints
   });
   var classAttributes = "".concat(attributes.classNames, " ").concat(propClassName).trim();
 

package/es/components/breakpoints-provider.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import { breakpoints } from '../variables';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var BreakpointsContext = /*#__PURE__*/createContext(breakpoints);
+export var BreakpointsProvider = function BreakpointsProvider(_ref) {
+  var children = _ref.children,
+      breakpoints = _ref.breakpoints;
+  return ___EmotionJSX(BreakpointsContext.Provider, {
+    value: breakpoints
+  }, children);
+};

package/es/components/flex/index.js

@@ -28,11 +28,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../../types';
 import { generateAttributes } from '../../utilities';
 import { Box } from '../box';
 import styles from './styles.module.css';
+import { BreakpointsContext } from '../breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$direction = _ref.direction,
@@ -55,6 +56,7 @@ export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
   var sharedProps = {
     gap: gap,
     columnGap: columnGap,
@@ -67,7 +69,8 @@ export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var attributes = generateAttributes({
     styleProps: _objectSpread({}, sharedProps),
-    classNameProps: _objectSpread({}, sharedProps)
+    classNameProps: _objectSpread({}, sharedProps),
+    breakpoints: breakpoints
   });
 
   var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);

package/es/components/nav/index.js

@@ -0,0 +1,108 @@
+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.define-property.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.assign.js";
+var _excluded = ["children", "direction", "justifyContent", "size", "className", "style"],
+    _excluded2 = ["children", "isActive"],
+    _excluded3 = ["children", "direction", "justifyContent", "size"];
+
+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.string.trim.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.array.concat.js";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 React, { forwardRef, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { generateAttributes } from '../../utilities';
+import { types } from '../../types';
+import { BreakpointsContext } from '../breakpoints-provider';
+import styles from './styles.module.css';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavRoot = function NavRoot(_ref) {
+  var children = _ref.children,
+      direction = _ref.direction,
+      justifyContent = _ref.justifyContent,
+      size = _ref.size,
+      className = _ref.className,
+      style = _ref.style,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var propClassName = className ? className : '';
+  var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
+  var attributes = generateAttributes({
+    styleProps: {
+      size: size,
+      justifyContent: justifyContent
+    },
+    classNameProps: {
+      size: size,
+      justifyContent: justifyContent
+    },
+    breakpoints: breakpoints
+  });
+
+  var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);
+
+  var classAttributes = [attributes.classNames, propClassName, styles.nav, styles[direction]].join(' ').replace(/\s+/g, ' ').trim();
+  return ___EmotionJSX("nav", _extends({
+    className: classAttributes,
+    style: styleAttributes
+  }, props), children);
+};
+
+export var NavItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      isActive = _ref2.isActive,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var classAttributes = "".concat(styles.navItem, " ").concat(isActive ? styles.isActive : '').trim();
+  return ___EmotionJSX("div", _extends({
+    ref: ref,
+    isActive: isActive,
+    className: classAttributes
+  }, props), children);
+});
+export var Nav = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      _ref3$direction = _ref3.direction,
+      direction = _ref3$direction === void 0 ? 'row' : _ref3$direction,
+      justifyContent = _ref3.justifyContent,
+      size = _ref3.size,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  return ___EmotionJSX(NavRoot, _extends({
+    direction: direction,
+    size: size,
+    justifyContent: justifyContent,
+    ref: ref
+  }, props), children);
+});
+NavItem.propTypes = {
+  isActive: PropTypes.bool
+};
+Nav.propTypes = {
+  direction: PropTypes.oneOf(['row', 'column']),
+  size: types.responsiveTextSize,
+  justifyContent: PropTypes.oneOfType([PropTypes.oneOf(['start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly']), PropTypes.object])
+};

package/es/components/nav/styles.module.css

@@ -0,0 +1,42 @@
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--grn-space-s);
+}
+
+.nav.row {
+  flex-direction: row;
+  align-items: baseline;
+  column-gap: var(--grn-space-m);
+}
+
+.nav.row .navItem {
+  font-weight: var(--grn-weight-medium);
+}
+
+.nav.column {
+  flex-direction: column;
+  align-items: start;
+}
+
+.navItem {
+  cursor: pointer;
+  transition: color var(--grn-transition-leave);
+  color: var(--grn-color-content2);
+}
+
+.navItem.isActive {
+  color: var(--grn-color-content);
+  font-weight: var(--grn-weight-medium);
+}
+
+.navItem:hover {
+  color: var(--grn-color-content);
+  transition: color var(--grn-transition-hover);
+}
+
+.navItem a {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+}

package/es/components/provider.js

@@ -2,13 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Global } from '@emotion/react';
 import styles from '../styles';
+import { generateUtilitiesCss } from '../styles/utilities';
+import { BreakpointsProvider } from './breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var defaultBreakpoints = {
+  tablet: 1169,
+  mobile: 767
+};
 export function GrainProvider(_ref) {
-  var children = _ref.children;
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Global, {
-    styles: styles
+  var children = _ref.children,
+      _ref$breakpoints = _ref.breakpoints,
+      breakpoints = _ref$breakpoints === void 0 ? defaultBreakpoints : _ref$breakpoints;
+  var utilityStyles = generateUtilitiesCss({
+    breakpoints: breakpoints
+  });
+  return ___EmotionJSX(BreakpointsProvider, {
+    breakpoints: breakpoints
+  }, ___EmotionJSX(Global, {
+    styles: [styles, utilityStyles, process.env.NODE_ENV === "production" ? "" : ";label:GrainProvider;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3Byb3ZpZGVyLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmMiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJvdmlkZXIuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVzIGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgeyBnZW5lcmF0ZVV0aWxpdGllc0NzcyB9IGZyb20gJy4uL3N0eWxlcy91dGlsaXRpZXMnO1xuaW1wb3J0IHsgQnJlYWtwb2ludHNQcm92aWRlciB9IGZyb20gJy4vYnJlYWtwb2ludHMtcHJvdmlkZXInO1xuXG5jb25zdCBkZWZhdWx0QnJlYWtwb2ludHMgPSB7XG4gIHRhYmxldDogMTE2OSxcbiAgbW9iaWxlOiA3NjcsXG59O1xuXG5leHBvcnQgZnVuY3Rpb24gR3JhaW5Qcm92aWRlcih7IGNoaWxkcmVuLCBicmVha3BvaW50cyA9IGRlZmF1bHRCcmVha3BvaW50cyB9KSB7XG4gIGNvbnN0IHV0aWxpdHlTdHlsZXMgPSBnZW5lcmF0ZVV0aWxpdGllc0Nzcyh7IGJyZWFrcG9pbnRzIH0pO1xuICByZXR1cm4gKFxuICAgIDxCcmVha3BvaW50c1Byb3ZpZGVyIGJyZWFrcG9pbnRzPXticmVha3BvaW50c30+XG4gICAgICA8R2xvYmFsIHN0eWxlcz17W3N0eWxlcywgdXRpbGl0eVN0eWxlc119IC8+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9CcmVha3BvaW50c1Byb3ZpZGVyPlxuICApO1xufVxuXG5HcmFpblByb3ZpZGVyLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLmlzUmVxdWlyZWQsXG4gIGJyZWFrcG9pbnRzOiBQcm9wVHlwZXMub2JqZWN0LFxufTtcbiJdfQ== */"]
   }), children);
 }
 GrainProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  breakpoints: PropTypes.object
 };

package/es/components/text/index.js

@@ -29,9 +29,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import { generateAttributes } from '../../utilities';
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../../types';
 import styles from './styles.module.css';
+import { BreakpointsContext } from '../breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -65,6 +66,7 @@ export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
   var attributes = generateAttributes({
     styleProps: {
       size: size,
@@ -79,7 +81,8 @@ export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
       weight: weight,
       display: !ellipsisLines ? display : undefined,
       textTransform: textTransform
-    }
+    },
+    breakpoints: breakpoints
   });
 
   var styleAttributes = _objectSpread(_objectSpread(_objectSpread({}, attributes.styles), propStyle), ellipsisLines && _defineProperty({}, '--el', ellipsisLines));

package/es/components/text-input.js

@@ -1,20 +1,7 @@
-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";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-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", "internalType", "setInternalType"],
     _excluded2 = ["children"],
-    _excluded3 = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage", "isReadOnly", "isDisabled", "type", "hint"];
+    _excluded3 = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage", "isReadOnly", "isDisabled", "type", "hint", "onClear"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -30,12 +17,24 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 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 "core-js/modules/es.array.concat.js";
+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";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+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 PropTypes from 'prop-types';
 import React from 'react';
 import { Box, Text } from '.';
@@ -43,7 +42,7 @@ import { Icon } from './icon';
 import { IconButton } from './icon-button';
 import { componentVars, FieldHint, FieldLabel, InputField } from '../foundational';
 import { types } from '../types';
-import { IconHide, IconShow } from '../icons';
+import { IconCross, IconHide, IconShow } from '../icons';
 import { useWidth } from '../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var iconOffsetPx = 12;
@@ -54,19 +53,11 @@ var IconSection = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "producti
 } : {
   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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWM4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuL2ljb24tYnV0dG9uJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCwgSW5wdXRGaWVsZCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IEljb25IaWRlLCBJY29uU2hvdyB9IGZyb20gJy4uL2ljb25zJztcbmltcG9ydCB7IHVzZVdpZHRoIH0gZnJvbSAnLi4vaG9va3MnO1xuXG5jb25zdCBpY29uT2Zmc2V0UHggPSAxMjtcbmNvbnN0IGljb25UZXh0R2FwUHggPSA4O1xuXG5jb25zdCBJY29uU2VjdGlvbiA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbWFyZ2luOiBhdXRvO1xuICBsZWZ0OiAke2ljb25PZmZzZXRQeH1weDtcbiAgdG9wOiAwO1xuICBib3R0b206IDA7XG4gIGhlaWdodDogZml0LWNvbnRlbnQ7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuYDtcblxuY29uc3QgVmlzaWJpbGl0eUJ1dHRvbiA9ICh7IGNoaWxkcmVuLCBpbnRlcm5hbFR5cGUsIHNldEludGVybmFsVHlwZSwgLi4ucHJvcHMgfSkgPT4ge1xuICBjb25zdCByaWdodE9mZnNldCA9IGBjYWxjKCgke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAke2NvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25IZWlnaHR9KSAvIDIpYDtcbiAgY29uc3QgdHlwZUFuZEljb25NYXAgPSB7XG4gICAgcGFzc3dvcmQ6IDxJY29uU2hvdyAvPixcbiAgICB0ZXh0OiA8SWNvbkhpZGUgLz4sXG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94XG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIHJpZ2h0PXtyaWdodE9mZnNldH1cbiAgICAgIHRvcD1cIjBcIlxuICAgICAgYm90dG9tPVwiMFwiXG4gICAgICBtYXJnaW49XCJhdXRvXCJcbiAgICAgIGhlaWdodD1cImZpdC1jb250ZW50XCJcbiAgICA+XG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIGljb249e3R5cGVBbmRJY29uTWFwW2ludGVybmFsVHlwZV19XG4gICAgICAgIG9uQ2xpY2s9eygpID0+IHNldEludGVybmFsVHlwZShpbnRlcm5hbFR5cGUgPT09ICd0ZXh0JyA/ICdwYXNzd29yZCcgOiAndGV4dCcpfVxuICAgICAgLz5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBUZXh0SW5wdXRMYWJlbCA9ICh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9KSA9PiAoXG4gIDxGaWVsZExhYmVsIHsuLi5wcm9wc30+e2NoaWxkcmVufTwvRmllbGRMYWJlbD5cbik7XG5cbmV4cG9ydCBjb25zdCBUZXh0SW5wdXQgPSBSZWFjdC5mb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgdmFsdWUsXG4gICAgICBwbGFjZWhvbGRlcixcbiAgICAgIGxhYmVsLFxuICAgICAgaWQsXG4gICAgICBpY29uLFxuICAgICAgaGFzRXJyb3IsXG4gICAgICBlcnJvck1lc3NhZ2UsXG4gICAgICBpc1JlYWRPbmx5LFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIHR5cGUgPSAndGV4dCcsXG4gICAgICBoaW50LFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgaWNvblJlZiA9IFJlYWN0LnVzZVJlZihudWxsKTtcbiAgICBjb25zdCBbaW50ZXJuYWxUeXBlLCBzZXRJbnRlcm5hbFR5cGVdID0gUmVhY3QudXNlU3RhdGUodHlwZSk7XG5cbiAgICBjb25zdCBpY29uV2lkdGggPSB1c2VXaWR0aChpY29uUmVmKTtcbiAgICBjb25zdCBoYXNWaXNpYmlsaXR5QnV0dG9uID0gdHlwZSA9PT0gJ3Bhc3N3b3JkJyAmJiAhaXNSZWFkT25seSAmJiAhaXNEaXNhYmxlZDtcbiAgICBjb25zdCBwYWRkaW5nTGVmdCA9IGljb24gPyBgJHtpY29uT2Zmc2V0UHggKyBpY29uV2lkdGggKyBpY29uVGV4dEdhcFB4fXB4YCA6IHVuZGVmaW5lZDtcbiAgICBjb25zdCBwYWRkaW5nUmlnaHQgPSBoYXNWaXNpYmlsaXR5QnV0dG9uID8gY29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0IDogdW5kZWZpbmVkO1xuXG4gICAgY29uc3QgZmllbGRNYXJnaW5Ub3AgPSBsYWJlbCB8fCBoaW50ID8gJ2JldHdlZW5Gb3JtQ29udHJvbEFuZExhYmVsJyA6IHVuZGVmaW5lZDtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICB7bGFiZWwgJiYgPEZpZWxkTGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0ZpZWxkTGFiZWw+fVxuICAgICAgICB7aGludCAmJiA8RmllbGRIaW50PntoaW50fTwvRmllbGRIaW50Pn1cbiAgICAgICAgPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCIgbWFyZ2luVG9wPXtmaWVsZE1hcmdpblRvcH0+XG4gICAgICAgICAge2ljb24gJiYgKFxuICAgICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgICA8SWNvbiByZWY9e2ljb25SZWZ9IGljb249e2ljb259IC8+XG4gICAgICAgICAgICA8L0ljb25TZWN0aW9uPlxuICAgICAgICAgICl9XG4gICAgICAgICAgPElucHV0RmllbGRcbiAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgICAgdHlwZT17aW50ZXJuYWxUeXBlfVxuICAgICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgICAgcGFkZGluZ1JpZ2h0PXtwYWRkaW5nUmlnaHR9XG4gICAgICAgICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICAgICAgICBpc1JlYWRPbmx5PXtpc1JlYWRPbmx5fVxuICAgICAgICAgICAgaXNEaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAvPlxuICAgICAgICAgIHtoYXNWaXNpYmlsaXR5QnV0dG9uICYmIChcbiAgICAgICAgICAgIDxWaXNpYmlsaXR5QnV0dG9uIHNldEludGVybmFsVHlwZT17c2V0SW50ZXJuYWxUeXBlfSBpbnRlcm5hbFR5cGU9e2ludGVybmFsVHlwZX0gLz5cbiAgICAgICAgICApfVxuICAgICAgICA8L0JveD5cbiAgICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgICAgPEJveCBtYXJnaW5Ub3A9XCJiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbFwiPlxuICAgICAgICAgICAgPFRleHQgY29sb3I9XCJkYW5nZXJcIj57ZXJyb3JNZXNzYWdlfTwvVGV4dD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuXG5UZXh0SW5wdXQuTGFiZWwgPSBUZXh0SW5wdXRMYWJlbDtcblRleHRJbnB1dC5IaW50ID0gRmllbGRIaW50O1xuXG5UZXh0SW5wdXQucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdmFsdWU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbiAgbGFiZWw6IHR5cGVzLmxhYmVsLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzUmVhZE9ubHk6IFByb3BUeXBlcy5ib29sLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgdHlwZTogdHlwZXMudGV4dElucHV0LFxuICBoaW50OiB0eXBlcy5oaW50LFxufTtcbiJdfQ== */"));
-
-var VisibilityButton = function VisibilityButton(_ref) {
-  var children = _ref.children,
-      internalType = _ref.internalType,
-      setInternalType = _ref.setInternalType,
-      props = _objectWithoutProperties(_ref, _excluded);
+})("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWM4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuL2ljb24tYnV0dG9uJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCwgSW5wdXRGaWVsZCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IEljb25Dcm9zcywgSWNvbkhpZGUsIEljb25TaG93IH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgdXNlV2lkdGggfSBmcm9tICcuLi9ob29rcyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5jb25zdCBBY3Rpb25CdXR0b25XcmFwcGVyID0gKHsgY2hpbGRyZW4gfSkgPT4ge1xuICBjb25zdCByaWdodE9mZnNldCA9IGBjYWxjKCgke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAke2NvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25IZWlnaHR9KSAvIDIpYDtcbiAgcmV0dXJuIChcbiAgICA8Qm94XG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIHJpZ2h0PXtyaWdodE9mZnNldH1cbiAgICAgIHRvcD1cIjBcIlxuICAgICAgYm90dG9tPVwiMFwiXG4gICAgICBtYXJnaW49XCJhdXRvXCJcbiAgICAgIGhlaWdodD1cImZpdC1jb250ZW50XCJcbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG5jb25zdCBWaXNpYmlsaXR5QnV0dG9uID0gKHsgY2hpbGRyZW4sIGludGVybmFsVHlwZSwgc2V0SW50ZXJuYWxUeXBlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IHR5cGVBbmRJY29uTWFwID0ge1xuICAgIHBhc3N3b3JkOiA8SWNvblNob3cgLz4sXG4gICAgdGV4dDogPEljb25IaWRlIC8+LFxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPEFjdGlvbkJ1dHRvbldyYXBwZXI+XG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIGljb249e3R5cGVBbmRJY29uTWFwW2ludGVybmFsVHlwZV19XG4gICAgICAgIG9uQ2xpY2s9eygpID0+IHNldEludGVybmFsVHlwZShpbnRlcm5hbFR5cGUgPT09ICd0ZXh0JyA/ICdwYXNzd29yZCcgOiAndGV4dCcpfVxuICAgICAgLz5cbiAgICA8L0FjdGlvbkJ1dHRvbldyYXBwZXI+XG4gICk7XG59O1xuXG5jb25zdCBDbGVhckJ1dHRvbiA9ICh7IG9uQ2xpY2sgfSkgPT4gKFxuICA8QWN0aW9uQnV0dG9uV3JhcHBlcj5cbiAgICA8SWNvbkJ1dHRvbiBpY29uPXs8SWNvbkNyb3NzIC8+fSBvbkNsaWNrPXtvbkNsaWNrfSAvPlxuICA8L0FjdGlvbkJ1dHRvbldyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0TGFiZWwgPSAoeyBjaGlsZHJlbiwgLi4ucHJvcHMgfSkgPT4gKFxuICA8RmllbGRMYWJlbCB7Li4ucHJvcHN9PntjaGlsZHJlbn08L0ZpZWxkTGFiZWw+XG4pO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gUmVhY3QuZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHZhbHVlLFxuICAgICAgcGxhY2Vob2xkZXIsXG4gICAgICBsYWJlbCxcbiAgICAgIGlkLFxuICAgICAgaWNvbixcbiAgICAgIGhhc0Vycm9yLFxuICAgICAgZXJyb3JNZXNzYWdlLFxuICAgICAgaXNSZWFkT25seSxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICB0eXBlID0gJ3RleHQnLFxuICAgICAgaGludCxcbiAgICAgIG9uQ2xlYXIsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBpY29uUmVmID0gUmVhY3QudXNlUmVmKG51bGwpO1xuICAgIGNvbnN0IFtpbnRlcm5hbFR5cGUsIHNldEludGVybmFsVHlwZV0gPSBSZWFjdC51c2VTdGF0ZSh0eXBlKTtcblxuICAgIGNvbnN0IGljb25XaWR0aCA9IHVzZVdpZHRoKGljb25SZWYpO1xuICAgIGNvbnN0IGhhc1Zpc2liaWxpdHlCdXR0b24gPSB0eXBlID09PSAncGFzc3dvcmQnICYmICFpc1JlYWRPbmx5ICYmICFpc0Rpc2FibGVkO1xuICAgIGNvbnN0IGhhc0NsZWFyQnV0dG9uID0gb25DbGVhciAmJiAhaXNSZWFkT25seSAmJiAhaXNEaXNhYmxlZDtcbiAgICBjb25zdCBoYXNCdXR0b24gPSBoYXNWaXNpYmlsaXR5QnV0dG9uIHx8IGhhc0NsZWFyQnV0dG9uO1xuICAgIGNvbnN0IHBhZGRpbmdMZWZ0ID0gaWNvbiA/IGAke2ljb25PZmZzZXRQeCArIGljb25XaWR0aCArIGljb25UZXh0R2FwUHh9cHhgIDogdW5kZWZpbmVkO1xuICAgIGNvbnN0IHBhZGRpbmdSaWdodCA9IGhhc0J1dHRvbiA/IGNvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodCA6IHVuZGVmaW5lZDtcblxuICAgIGNvbnN0IGZpZWxkTWFyZ2luVG9wID0gbGFiZWwgfHwgaGludCA/ICdiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbCcgOiB1bmRlZmluZWQ7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgICAge2hpbnQgJiYgPEZpZWxkSGludD57aGludH08L0ZpZWxkSGludD59XG4gICAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiIG1hcmdpblRvcD17ZmllbGRNYXJnaW5Ub3B9PlxuICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgIDxJY29uU2VjdGlvbj5cbiAgICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgICAgPC9JY29uU2VjdGlvbj5cbiAgICAgICAgICApfVxuICAgICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgIHR5cGU9e2ludGVybmFsVHlwZX1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgICAgICAgIHBhZGRpbmdSaWdodD17cGFkZGluZ1JpZ2h0fVxuICAgICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgICAgaXNSZWFkT25seT17aXNSZWFkT25seX1cbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgICB7aGFzVmlzaWJpbGl0eUJ1dHRvbiAmJiAoXG4gICAgICAgICAgICA8VmlzaWJpbGl0eUJ1dHRvbiBzZXRJbnRlcm5hbFR5cGU9e3NldEludGVybmFsVHlwZX0gaW50ZXJuYWxUeXBlPXtpbnRlcm5hbFR5cGV9IC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgICB7aGFzQ2xlYXJCdXR0b24gJiYgdmFsdWUgJiYgPENsZWFyQnV0dG9uIG9uQ2xpY2s9e29uQ2xlYXJ9IC8+fVxuICAgICAgICA8L0JveD5cbiAgICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgICAgPEJveCBtYXJnaW5Ub3A9XCJiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbFwiPlxuICAgICAgICAgICAgPFRleHQgY29sb3I9XCJkYW5nZXJcIj57ZXJyb3JNZXNzYWdlfTwvVGV4dD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuXG5UZXh0SW5wdXQuTGFiZWwgPSBUZXh0SW5wdXRMYWJlbDtcblRleHRJbnB1dC5IaW50ID0gRmllbGRIaW50O1xuXG5UZXh0SW5wdXQucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdmFsdWU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbiAgbGFiZWw6IHR5cGVzLmxhYmVsLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzUmVhZE9ubHk6IFByb3BUeXBlcy5ib29sLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgdHlwZTogdHlwZXMudGV4dElucHV0LFxuICBoaW50OiB0eXBlcy5oaW50LFxufTtcbiJdfQ== */"));
 
+var ActionButtonWrapper = function ActionButtonWrapper(_ref) {
+  var children = _ref.children;
   var rightOffset = "calc((".concat(componentVars.textBoxHeight, " - ").concat(componentVars.clearButtonHeight, ") / 2)");
-  var typeAndIconMap = {
-    password: ___EmotionJSX(IconShow, null),
-    text: ___EmotionJSX(IconHide, null)
-  };
   return ___EmotionJSX(Box, {
     position: "absolute",
     right: rightOffset,
@@ -74,7 +65,20 @@ var VisibilityButton = function VisibilityButton(_ref) {
     bottom: "0",
     margin: "auto",
     height: "fit-content"
-  }, ___EmotionJSX(IconButton, _extends({}, props, {
+  }, children);
+};
+
+var VisibilityButton = function VisibilityButton(_ref2) {
+  var children = _ref2.children,
+      internalType = _ref2.internalType,
+      setInternalType = _ref2.setInternalType,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var typeAndIconMap = {
+    password: ___EmotionJSX(IconShow, null),
+    text: ___EmotionJSX(IconHide, null)
+  };
+  return ___EmotionJSX(ActionButtonWrapper, null, ___EmotionJSX(IconButton, _extends({}, props, {
     icon: typeAndIconMap[internalType],
     onClick: function onClick() {
       return setInternalType(internalType === 'text' ? 'password' : 'text');
@@ -82,26 +86,35 @@ var VisibilityButton = function VisibilityButton(_ref) {
   })));
 };
 
-export var TextInputLabel = function TextInputLabel(_ref2) {
-  var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
+var ClearButton = function ClearButton(_ref3) {
+  var onClick = _ref3.onClick;
+  return ___EmotionJSX(ActionButtonWrapper, null, ___EmotionJSX(IconButton, {
+    icon: ___EmotionJSX(IconCross, null),
+    onClick: onClick
+  }));
+};
+
+export var TextInputLabel = function TextInputLabel(_ref4) {
+  var children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, _excluded2);
 
   return ___EmotionJSX(FieldLabel, props, children);
 };
-export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var value = _ref3.value,
-      placeholder = _ref3.placeholder,
-      label = _ref3.label,
-      id = _ref3.id,
-      icon = _ref3.icon,
-      hasError = _ref3.hasError,
-      errorMessage = _ref3.errorMessage,
-      isReadOnly = _ref3.isReadOnly,
-      isDisabled = _ref3.isDisabled,
-      _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? 'text' : _ref3$type,
-      hint = _ref3.hint,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var value = _ref5.value,
+      placeholder = _ref5.placeholder,
+      label = _ref5.label,
+      id = _ref5.id,
+      icon = _ref5.icon,
+      hasError = _ref5.hasError,
+      errorMessage = _ref5.errorMessage,
+      isReadOnly = _ref5.isReadOnly,
+      isDisabled = _ref5.isDisabled,
+      _ref5$type = _ref5.type,
+      type = _ref5$type === void 0 ? 'text' : _ref5$type,
+      hint = _ref5.hint,
+      onClear = _ref5.onClear,
+      props = _objectWithoutProperties(_ref5, _excluded3);
 
   var iconRef = React.useRef(null);
 
@@ -112,8 +125,10 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
 
   var iconWidth = useWidth(iconRef);
   var hasVisibilityButton = type === 'password' && !isReadOnly && !isDisabled;
+  var hasClearButton = onClear && !isReadOnly && !isDisabled;
+  var hasButton = hasVisibilityButton || hasClearButton;
   var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : undefined;
-  var paddingRight = hasVisibilityButton ? componentVars.textBoxHeight : undefined;
+  var paddingRight = hasButton ? componentVars.textBoxHeight : undefined;
   var fieldMarginTop = label || hint ? 'betweenFormControlAndLabel' : undefined;
   return ___EmotionJSX("div", null, label && ___EmotionJSX(FieldLabel, {
     htmlFor: id
@@ -137,6 +152,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   }, props)), hasVisibilityButton && ___EmotionJSX(VisibilityButton, {
     setInternalType: setInternalType,
     internalType: internalType
+  }), hasClearButton && value && ___EmotionJSX(ClearButton, {
+    onClick: onClear
   })), errorMessage && ___EmotionJSX(Box, {
     marginTop: "betweenFormControlAndLabel"
   }, ___EmotionJSX(Text, {

package/es/styles/index.js

@@ -2,5 +2,4 @@ import variables from './variables';
 import colors from './colors';
 import shadows from './shadows';
 import base from './base';
-import utilities from './utilities';
-export default [variables, colors, shadows, base, utilities].join('\n');
+export default [variables, colors, shadows, base].join('\n');

package/es/styles/utilities.js

@@ -27,7 +27,6 @@ import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
 import { styleConfig } from '../utilities';
 import { propNameToShort } from '../utilities/style-config';
-import { breakpoints, deviceShort } from '../variables';
 
 var generateUtilityClassDeclarations = function generateUtilityClassDeclarations(propertySets) {
   var css = '';
@@ -47,7 +46,7 @@ var generateUtilityClassDeclarations = function generateUtilityClassDeclarations
   return css;
 };
 
-var generateStyleClassDeclarations = function generateStyleClassDeclarations(propertySets) {
+var generateStyleClassDeclarations = function generateStyleClassDeclarations(breakpoints, propertySets) {
   var css = '';
   propertySets.forEach(function (set) {
     set.props.forEach(function (prop) {
@@ -60,14 +59,14 @@ var generateStyleClassDeclarations = function generateStyleClassDeclarations(pro
       if (hasHover) css += "[style*=\"".concat(cssVar, ":\"]:hover ").concat(declaration);
 
       if (set.isResponsive) {
-        var device = deviceShort.default;
+        var device = 'default';
         css += "\n          [style*=\"".concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n        ");
         Object.entries(breakpoints).forEach(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
               deviceName = _ref2[0],
               screenSize = _ref2[1];
 
-          var device = deviceShort[deviceName];
+          var device = deviceName;
           css += "\n            @media (max-width: ".concat(screenSize, "px) {\n              [style*=\"").concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n            }\n          ");
         });
       }
@@ -110,5 +109,9 @@ var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radius
 var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, borderWidthProps, weightProps, textDisplayProps, borderSideProps, textTransformProps]);
 var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps, letterSpacingProps, gridTemplateProps]);
 var defaultBorder = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n    border-width: 1px;\n  }\n";
-var utilities = "\n  ".concat(defaultBorder, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
-export default utilities;
+export var generateUtilitiesCss = function generateUtilitiesCss(_ref3) {
+  var breakpoints = _ref3.breakpoints;
+  var classDeclarations = generateUtilityClassDeclarations(classDeclarationProps);
+  var styleDeclarations = generateStyleClassDeclarations(breakpoints, styleDeclarationProps);
+  return "\n    ".concat(defaultBorder, "\n    ").concat(classDeclarations, "\n    ").concat(styleDeclarations, "\n  ");
+};

package/es/utilities/attributes.js

@@ -1,29 +1,45 @@
-import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.values.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.map.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.string.trim.js";
-import { breakpoints, deviceShort } from '../variables';
 import { isObject } from './helpers';
 import { propNameToShort, styleConfig } from './style-config';
-var mediaQueries = {
-  tablet: "@media (max-width: ".concat(breakpoints.tablet, "px)"),
-  mobile: "@media (max-width: ".concat(breakpoints.mobile, "px)")
+
+var getValueWithBackup = function getValueWithBackup(value) {
+  var mediaQueries = {
+    '@media (max-width: 1169px)': 'tablet',
+    '@media (max-width: 767px)': 'mobile'
+  };
+  var valueWithBackup = Object.keys(value).reduce(function (acc, key) {
+    if (mediaQueries[key]) {
+      acc[mediaQueries[key]] = value[key];
+    } else {
+      acc[key] = value[key];
+    }
+
+    return acc;
+  }, {});
+  return valueWithBackup;
 };
-export var generateStyleAttributes = function generateStyleAttributes(props) {
+
+export var generateStyleAttributes = function generateStyleAttributes(_ref) {
+  var styleProps = _ref.styleProps,
+      breakpoints = _ref.breakpoints;
   var styles = {};
   var styleConfigValues = Object.values(styleConfig);
   styleConfigValues.forEach(function (propsSet) {
     var variableChecker = propsSet.variableChecker,
         valueTransformer = propsSet.valueTransformer;
-    propsSet.props.forEach(function (_ref) {
-      var propName = _ref.propName;
-      var value = props[propName];
+    propsSet.props.forEach(function (_ref2) {
+      var propName = _ref2.propName;
+      var value = styleProps[propName];
       if (value === undefined || value === null) return;
       var hasVariable = variableChecker && variableChecker(value);
       if (hasVariable) return;
@@ -37,18 +53,12 @@ export var generateStyleAttributes = function generateStyleAttributes(props) {
       if (!isObject(value)) {
         styles["--".concat(propNameShort)] = processValue(value);
       } else {
-        var def = value.default,
-            mobile = value.mobile,
-            tablet = value.tablet; // accept fixed string media queries to help migration
-
-        var mobileMediaValue = value[mediaQueries.mobile];
-        var tabletMediaValue = value[mediaQueries.tablet]; // check undefined to allow 0 value
-
-        var mob = mobileMediaValue !== undefined ? mobileMediaValue : mobile;
-        var tab = tabletMediaValue !== undefined ? tabletMediaValue : tablet;
-        styles["--".concat(propNameShort, "-").concat(deviceShort.default)] = processValue(def);
-        styles["--".concat(propNameShort, "-").concat(deviceShort.mobile)] = processValue(mob);
-        styles["--".concat(propNameShort, "-").concat(deviceShort.tablet)] = processValue(tab);
+        // // accept fixed string media queries to help migration
+        var valueWithBackup = getValueWithBackup(value);
+        styles["--".concat(propNameShort, "-default")] = processValue(value.default);
+        Object.keys(breakpoints).forEach(function (deviceName) {
+          styles["--".concat(propNameShort, "-").concat(deviceName)] = processValue(valueWithBackup[deviceName]);
+        });
       }
     });
   });
@@ -75,10 +85,14 @@ export var generateClassNameAttributes = function generateClassNameAttributes(pr
   });
   return classNames.join(' ').trim();
 };
-export var generateAttributes = function generateAttributes(_ref2) {
-  var styleProps = _ref2.styleProps,
-      classNameProps = _ref2.classNameProps;
-  var styleAttributes = generateStyleAttributes(styleProps);
+export var generateAttributes = function generateAttributes(_ref3) {
+  var styleProps = _ref3.styleProps,
+      classNameProps = _ref3.classNameProps,
+      breakpoints = _ref3.breakpoints;
+  var styleAttributes = generateStyleAttributes({
+    styleProps: styleProps,
+    breakpoints: breakpoints
+  });
   var classNameAttributes = generateClassNameAttributes(classNameProps);
   return {
     styles: styleAttributes,

package/es/variables/breakpoints.js

@@ -1,9 +1,4 @@
 export var breakpoints = {
   tablet: 1169,
   mobile: 767
-};
-export var deviceShort = {
-  default: 'def',
-  mobile: 'mob',
-  tablet: 'tab'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.0.9",
+  "version": "11.2.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",

package/es/components/nav.js

@@ -1,88 +0,0 @@
-import _styled from "@emotion/styled/base";
-var _excluded = ["children", "isActive"],
-    _excluded2 = ["children", "direction", "justifyContent", "size"];
-
-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); }
-
-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 "core-js/modules/es.array.concat.js";
-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";
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { getColor, getResponsiveOneOf, getResponsiveTextSize, getSpace, getTransition, getWeight } from '../utilities';
-import { types } from '../types';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var directionStyles = {
-  row: "\n    flex-direction: row;\n    align-items: baseline;\n    column-gap: ".concat(getSpace('m'), ";\n\n    .NavItem {\n      font-weight: ").concat(getWeight('medium'), ";\n    }\n  "),
-  column: "\n    flex-direction: column;\n    align-items: start;\n  "
-};
-
-var NavRoot = /*#__PURE__*/_styled("nav", process.env.NODE_ENV === "production" ? {
-  target: "esn928h1"
-} : {
-  target: "esn928h1",
-  label: "NavRoot"
-})("display:flex;flex-wrap:wrap;row-gap:", getSpace('s'), ";", function (_ref) {
-  var direction = _ref.direction;
-  return directionStyles[direction];
-}, ";", function (_ref2) {
-  var size = _ref2.size;
-  return getResponsiveTextSize(size);
-}, ";", function (_ref3) {
-  var justifyContent = _ref3.justifyContent;
-  return getResponsiveOneOf('justify-content', justifyContent);
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkIwQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9uYXYuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZ2V0Q29sb3IsXG4gIGdldFJlc3BvbnNpdmVPbmVPZixcbiAgZ2V0UmVzcG9uc2l2ZVRleHRTaXplLFxuICBnZXRTcGFjZSxcbiAgZ2V0VHJhbnNpdGlvbixcbiAgZ2V0V2VpZ2h0LFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGRpcmVjdGlvblN0eWxlcyA9IHtcbiAgcm93OiBgXG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgY29sdW1uLWdhcDogJHtnZXRTcGFjZSgnbScpfTtcblxuICAgIC5OYXZJdGVtIHtcbiAgICAgIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICAgIH1cbiAgYCxcbiAgY29sdW1uOiBgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gIGAsXG59O1xuXG5jb25zdCBOYXZSb290ID0gc3R5bGVkLm5hdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICByb3ctZ2FwOiAke2dldFNwYWNlKCdzJyl9O1xuICAkeyh7IGRpcmVjdGlvbiB9KSA9PiBkaXJlY3Rpb25TdHlsZXNbZGlyZWN0aW9uXX07XG4gICR7KHsgc2l6ZSB9KSA9PiBnZXRSZXNwb25zaXZlVGV4dFNpemUoc2l6ZSl9O1xuICAkeyh7IGp1c3RpZnlDb250ZW50IH0pID0+IGdldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1jb250ZW50JywganVzdGlmeUNvbnRlbnQpfTtcbmA7XG5cbmNvbnN0IE5hdkl0ZW1Sb290ID0gc3R5bGVkLmRpdmBcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogJHsoeyBpc0FjdGl2ZSB9KSA9PiBnZXRDb2xvcihpc0FjdGl2ZSA/ICdjb250ZW50JyA6ICdjb250ZW50MicpfTtcbiAgZm9udC13ZWlnaHQ6ICR7KHsgaXNBY3RpdmUgfSkgPT4gZ2V0V2VpZ2h0KGlzQWN0aXZlID8gJ21lZGl1bScgOiAnbm9ybWFsJyl9O1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAgIHRyYW5zaXRpb246IGNvbG9yICR7Z2V0VHJhbnNpdGlvbignaG92ZXInKX07XG4gIH1cblxuICBhIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBOYXZJdGVtID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaXNBY3RpdmUsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8TmF2SXRlbVJvb3QgcmVmPXtyZWZ9IGlzQWN0aXZlPXtpc0FjdGl2ZX0gY2xhc3NOYW1lPVwiTmF2SXRlbVwiIHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L05hdkl0ZW1Sb290PlxuKSk7XG5cbmV4cG9ydCBjb25zdCBOYXYgPSBmb3J3YXJkUmVmKFxuICAoeyBjaGlsZHJlbiwgZGlyZWN0aW9uID0gJ3JvdycsIGp1c3RpZnlDb250ZW50LCBzaXplLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPE5hdlJvb3RcbiAgICAgICAgZGlyZWN0aW9uPXtkaXJlY3Rpb259XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGp1c3RpZnlDb250ZW50PXtqdXN0aWZ5Q29udGVudH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZSb290PlxuICAgICk7XG4gIH0sXG4pO1xuXG5OYXZJdGVtLnByb3BUeXBlcyA9IHtcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxufTtcblxuTmF2LnByb3BUeXBlcyA9IHtcbiAgZGlyZWN0aW9uOiBQcm9wVHlwZXMub25lT2YoWydyb3cnLCAnY29sdW1uJ10pLFxuICBzaXplOiB0eXBlcy5yZXNwb25zaXZlVGV4dFNpemUsXG4gIGp1c3RpZnlDb250ZW50OiBQcm9wVHlwZXMub25lT2ZUeXBlKFtcbiAgICBQcm9wVHlwZXMub25lT2YoW1xuICAgICAgJ3N0YXJ0JyxcbiAgICAgICdlbmQnLFxuICAgICAgJ2NlbnRlcicsXG4gICAgICAnc3RyZXRjaCcsXG4gICAgICAnc3BhY2UtYXJvdW5kJyxcbiAgICAgICdzcGFjZS1iZXR3ZWVuJyxcbiAgICAgICdzcGFjZS1ldmVubHknLFxuICAgIF0pLFxuICAgIFByb3BUeXBlcy5vYmplY3QsXG4gIF0pLFxufTtcbiJdfQ== */"));
-
-var NavItemRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "esn928h0"
-} : {
-  target: "esn928h0",
-  label: "NavItemRoot"
-})("cursor:pointer;color:", function (_ref4) {
-  var isActive = _ref4.isActive;
-  return getColor(isActive ? 'content' : 'content2');
-}, ";font-weight:", function (_ref5) {
-  var isActive = _ref5.isActive;
-  return getWeight(isActive ? 'medium' : 'normal');
-}, ";transition:color ", getTransition('leave'), ";&:hover{color:", getColor('content'), ";transition:color ", getTransition('hover'), ";}a{color:inherit;text-decoration:none;display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0M4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9uYXYuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZ2V0Q29sb3IsXG4gIGdldFJlc3BvbnNpdmVPbmVPZixcbiAgZ2V0UmVzcG9uc2l2ZVRleHRTaXplLFxuICBnZXRTcGFjZSxcbiAgZ2V0VHJhbnNpdGlvbixcbiAgZ2V0V2VpZ2h0LFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGRpcmVjdGlvblN0eWxlcyA9IHtcbiAgcm93OiBgXG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgY29sdW1uLWdhcDogJHtnZXRTcGFjZSgnbScpfTtcblxuICAgIC5OYXZJdGVtIHtcbiAgICAgIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICAgIH1cbiAgYCxcbiAgY29sdW1uOiBgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gIGAsXG59O1xuXG5jb25zdCBOYXZSb290ID0gc3R5bGVkLm5hdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICByb3ctZ2FwOiAke2dldFNwYWNlKCdzJyl9O1xuICAkeyh7IGRpcmVjdGlvbiB9KSA9PiBkaXJlY3Rpb25TdHlsZXNbZGlyZWN0aW9uXX07XG4gICR7KHsgc2l6ZSB9KSA9PiBnZXRSZXNwb25zaXZlVGV4dFNpemUoc2l6ZSl9O1xuICAkeyh7IGp1c3RpZnlDb250ZW50IH0pID0+IGdldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1jb250ZW50JywganVzdGlmeUNvbnRlbnQpfTtcbmA7XG5cbmNvbnN0IE5hdkl0ZW1Sb290ID0gc3R5bGVkLmRpdmBcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogJHsoeyBpc0FjdGl2ZSB9KSA9PiBnZXRDb2xvcihpc0FjdGl2ZSA/ICdjb250ZW50JyA6ICdjb250ZW50MicpfTtcbiAgZm9udC13ZWlnaHQ6ICR7KHsgaXNBY3RpdmUgfSkgPT4gZ2V0V2VpZ2h0KGlzQWN0aXZlID8gJ21lZGl1bScgOiAnbm9ybWFsJyl9O1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAgIHRyYW5zaXRpb246IGNvbG9yICR7Z2V0VHJhbnNpdGlvbignaG92ZXInKX07XG4gIH1cblxuICBhIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBOYXZJdGVtID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaXNBY3RpdmUsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8TmF2SXRlbVJvb3QgcmVmPXtyZWZ9IGlzQWN0aXZlPXtpc0FjdGl2ZX0gY2xhc3NOYW1lPVwiTmF2SXRlbVwiIHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L05hdkl0ZW1Sb290PlxuKSk7XG5cbmV4cG9ydCBjb25zdCBOYXYgPSBmb3J3YXJkUmVmKFxuICAoeyBjaGlsZHJlbiwgZGlyZWN0aW9uID0gJ3JvdycsIGp1c3RpZnlDb250ZW50LCBzaXplLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPE5hdlJvb3RcbiAgICAgICAgZGlyZWN0aW9uPXtkaXJlY3Rpb259XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGp1c3RpZnlDb250ZW50PXtqdXN0aWZ5Q29udGVudH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZSb290PlxuICAgICk7XG4gIH0sXG4pO1xuXG5OYXZJdGVtLnByb3BUeXBlcyA9IHtcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxufTtcblxuTmF2LnByb3BUeXBlcyA9IHtcbiAgZGlyZWN0aW9uOiBQcm9wVHlwZXMub25lT2YoWydyb3cnLCAnY29sdW1uJ10pLFxuICBzaXplOiB0eXBlcy5yZXNwb25zaXZlVGV4dFNpemUsXG4gIGp1c3RpZnlDb250ZW50OiBQcm9wVHlwZXMub25lT2ZUeXBlKFtcbiAgICBQcm9wVHlwZXMub25lT2YoW1xuICAgICAgJ3N0YXJ0JyxcbiAgICAgICdlbmQnLFxuICAgICAgJ2NlbnRlcicsXG4gICAgICAnc3RyZXRjaCcsXG4gICAgICAnc3BhY2UtYXJvdW5kJyxcbiAgICAgICdzcGFjZS1iZXR3ZWVuJyxcbiAgICAgICdzcGFjZS1ldmVubHknLFxuICAgIF0pLFxuICAgIFByb3BUeXBlcy5vYmplY3QsXG4gIF0pLFxufTtcbiJdfQ== */"));
-
-export var NavItem = /*#__PURE__*/forwardRef(function (_ref6, ref) {
-  var children = _ref6.children,
-      isActive = _ref6.isActive,
-      props = _objectWithoutProperties(_ref6, _excluded);
-
-  return ___EmotionJSX(NavItemRoot, _extends({
-    ref: ref,
-    isActive: isActive,
-    className: "NavItem"
-  }, props), children);
-});
-export var Nav = /*#__PURE__*/forwardRef(function (_ref7, ref) {
-  var children = _ref7.children,
-      _ref7$direction = _ref7.direction,
-      direction = _ref7$direction === void 0 ? 'row' : _ref7$direction,
-      justifyContent = _ref7.justifyContent,
-      size = _ref7.size,
-      props = _objectWithoutProperties(_ref7, _excluded2);
-
-  return ___EmotionJSX(NavRoot, _extends({
-    direction: direction,
-    size: size,
-    justifyContent: justifyContent,
-    ref: ref
-  }, props), children);
-});
-NavItem.propTypes = {
-  isActive: PropTypes.bool
-};
-Nav.propTypes = {
-  direction: PropTypes.oneOf(['row', 'column']),
-  size: types.responsiveTextSize,
-  justifyContent: PropTypes.oneOfType([PropTypes.oneOf(['start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly']), PropTypes.object])
-};