@flodesk/grain 6.3.0 → 6.3.3

package/es/components/arrange.js

@@ -11,11 +11,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 { getResponsiveDimension, getResponsiveGridColumns, getResponsiveGridRows, getResponsiveSpace } from '../utilities';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { css } from '@emotion/react';
 import { types } from '../types';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var Arrange = function Arrange(_ref) {
+export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       gap = _ref.gap,
       _ref$alignItems = _ref.alignItems,
@@ -33,9 +33,10 @@ export var Arrange = function Arrange(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX("div", _extends({
-    css: /*#__PURE__*/css("display:grid;", !columns && "grid-auto-flow: ".concat(autoFlow), ";", getResponsiveSpace('gap', gap), ";", getResponsiveGridColumns(columns), ";", getResponsiveGridRows(rows), ";justify-items:", justifyItems, ";align-items:", alignItems, ";justify-content:", justifyContent, ";align-content:", alignContent, ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('height', height), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Arrange;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2FycmFuZ2UuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCWSIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9hcnJhbmdlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIGdldFJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIGdldFJlc3BvbnNpdmVHcmlkQ29sdW1ucyxcbiAgZ2V0UmVzcG9uc2l2ZUdyaWRSb3dzLFxuICBnZXRSZXNwb25zaXZlU3BhY2UsXG59IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBBcnJhbmdlID0gKHtcbiAgY2hpbGRyZW4sXG4gIGdhcCxcbiAgYWxpZ25JdGVtcyA9ICdjZW50ZXInLFxuICBqdXN0aWZ5SXRlbXMsXG4gIGp1c3RpZnlDb250ZW50ID0gJ3N0YXJ0JyxcbiAgYWxpZ25Db250ZW50LFxuICBjb2x1bW5zLFxuICByb3dzLFxuICBhdXRvRmxvdyA9ICdjb2x1bW4nLFxuICB3aWR0aCxcbiAgaGVpZ2h0LFxuICAuLi5wcm9wc1xufSkgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgJHshY29sdW1ucyAmJiBgZ3JpZC1hdXRvLWZsb3c6ICR7YXV0b0Zsb3d9YH07XG4gICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnZ2FwJywgZ2FwKX07XG4gICAgICAke2dldFJlc3BvbnNpdmVHcmlkQ29sdW1ucyhjb2x1bW5zKX07XG4gICAgICAke2dldFJlc3BvbnNpdmVHcmlkUm93cyhyb3dzKX07XG4gICAgICBqdXN0aWZ5LWl0ZW1zOiAke2p1c3RpZnlJdGVtc307XG4gICAgICBhbGlnbi1pdGVtczogJHthbGlnbkl0ZW1zfTtcbiAgICAgIGp1c3RpZnktY29udGVudDogJHtqdXN0aWZ5Q29udGVudH07XG4gICAgICBhbGlnbi1jb250ZW50OiAke2FsaWduQ29udGVudH07XG4gICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ3dpZHRoJywgd2lkdGgpfTtcbiAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignaGVpZ2h0JywgaGVpZ2h0KX07XG4gICAgYH1cbiAgICB7Li4ucHJvcHN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvZGl2PlxuKTtcblxuQXJyYW5nZS5wcm9wVHlwZXMgPSB7XG4gIGdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBjb2x1bW5zOiB0eXBlcy5yZXNwb25zaXZlQ29sdW1ucyxcbiAgcm93czogdHlwZXMucmVzcG9uc2l2ZVJvd3MsXG4gIGF1dG9GbG93OiB0eXBlcy5hdXRvRmxvdyxcbiAgYWxpZ25JdGVtczogdHlwZXMuZ3JpZEl0ZW1zQWxpZ25tZW50LFxuICBqdXN0aWZ5SXRlbXM6IHR5cGVzLmdyaWRJdGVtc0FsaWdubWVudCxcbiAganVzdGlmeUNvbnRlbnQ6IHR5cGVzLmdyaWRDb250ZW50UG9zaXRpb24sXG4gIGFsaWduQ29udGVudDogdHlwZXMuZ3JpZENvbnRlbnRQb3NpdGlvbixcbiAgd2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIGhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbn07XG4iXX0= */")
+    ref: ref,
+    css: /*#__PURE__*/css("display:grid;", !columns && "grid-auto-flow: ".concat(autoFlow), ";", getResponsiveSpace('gap', gap), ";", getResponsiveGridColumns(columns), ";", getResponsiveGridRows(rows), ";justify-items:", justifyItems, ";align-items:", alignItems, ";justify-content:", justifyContent, ";align-content:", alignContent, ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('height', height), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Arrange;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2FycmFuZ2UuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9hcnJhbmdlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIGdldFJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIGdldFJlc3BvbnNpdmVHcmlkQ29sdW1ucyxcbiAgZ2V0UmVzcG9uc2l2ZUdyaWRSb3dzLFxuICBnZXRSZXNwb25zaXZlU3BhY2UsXG59IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQXJyYW5nZSA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGdhcCxcbiAgICAgIGFsaWduSXRlbXMgPSAnY2VudGVyJyxcbiAgICAgIGp1c3RpZnlJdGVtcyxcbiAgICAgIGp1c3RpZnlDb250ZW50ID0gJ3N0YXJ0JyxcbiAgICAgIGFsaWduQ29udGVudCxcbiAgICAgIGNvbHVtbnMsXG4gICAgICByb3dzLFxuICAgICAgYXV0b0Zsb3cgPSAnY29sdW1uJyxcbiAgICAgIHdpZHRoLFxuICAgICAgaGVpZ2h0LFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiAoXG4gICAgPGRpdlxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgJHshY29sdW1ucyAmJiBgZ3JpZC1hdXRvLWZsb3c6ICR7YXV0b0Zsb3d9YH07XG4gICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdnYXAnLCBnYXApfTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlR3JpZENvbHVtbnMoY29sdW1ucyl9O1xuICAgICAgICAke2dldFJlc3BvbnNpdmVHcmlkUm93cyhyb3dzKX07XG4gICAgICAgIGp1c3RpZnktaXRlbXM6ICR7anVzdGlmeUl0ZW1zfTtcbiAgICAgICAgYWxpZ24taXRlbXM6ICR7YWxpZ25JdGVtc307XG4gICAgICAgIGp1c3RpZnktY29udGVudDogJHtqdXN0aWZ5Q29udGVudH07XG4gICAgICAgIGFsaWduLWNvbnRlbnQ6ICR7YWxpZ25Db250ZW50fTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCd3aWR0aCcsIHdpZHRoKX07XG4gICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignaGVpZ2h0JywgaGVpZ2h0KX07XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKSxcbik7XG5cbkFycmFuZ2UucHJvcFR5cGVzID0ge1xuICBnYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgY29sdW1uczogdHlwZXMucmVzcG9uc2l2ZUNvbHVtbnMsXG4gIHJvd3M6IHR5cGVzLnJlc3BvbnNpdmVSb3dzLFxuICBhdXRvRmxvdzogdHlwZXMuYXV0b0Zsb3csXG4gIGFsaWduSXRlbXM6IHR5cGVzLmdyaWRJdGVtc0FsaWdubWVudCxcbiAganVzdGlmeUl0ZW1zOiB0eXBlcy5ncmlkSXRlbXNBbGlnbm1lbnQsXG4gIGp1c3RpZnlDb250ZW50OiB0eXBlcy5ncmlkQ29udGVudFBvc2l0aW9uLFxuICBhbGlnbkNvbnRlbnQ6IHR5cGVzLmdyaWRDb250ZW50UG9zaXRpb24sXG4gIHdpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBoZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG59O1xuIl19 */")
   }, props), children);
-};
+});
 Arrange.propTypes = {
   gap: types.responsiveSpace,
   columns: types.responsiveColumns,

package/es/components/index.js

@@ -19,5 +19,5 @@ export { Autocomplete } from './autocomplete';
 export { MultiAutocomplete } from './multi-autocomplete';
 export { Dropdown } from './dropdown';
 export { Modal } from './modal';
-export { Link } from './link';
+export { Link, linkStyles } from './link';
 export { Popover } from './popover';

package/es/components/link.js

@@ -16,15 +16,12 @@ import { getColor } from '../utilities';
 import { styles } from '../foundational';
 import PropTypes from 'prop-types';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var buttonStyles = /*#__PURE__*/css(styles.buttonReset, ";border:none;background:transparent;padding:0;text-decoration:underline;font-weight:unset;" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2xpbmsuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU13QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9saW5rLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IGJ1dHRvblN0eWxlcyA9IGNzc2BcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwO1xuICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTtcbiAgZm9udC13ZWlnaHQ6IHVuc2V0O1xuYDtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIHRleHREZWNvcmF0aW9uQ29sb3I6IGdldENvbG9yKCdmYWRlMycpLFxuICB9LFxuICBzdWJ0bGU6IHtcbiAgICB0ZXh0RGVjb3JhdGlvbkNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IExpbmsgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0YWcgPSAnYScsIHZhcmlhbnQgPSAnbmV1dHJhbCcsIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICBjb25zdCBUYWcgPSB0YWc7XG4gIHJldHVybiAoXG4gICAgPFRhZ1xuICAgICAgcmVmPXtyZWZ9XG4gICAgICBhcz17dGFnfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgICAgICAgJHt0YWcgPT09ICdidXR0b24nICYmIGJ1dHRvblN0eWxlc307XG4gICAgICAgICR7dmFyaWFudFN0eWxlc1t2YXJpYW50XX07XG4gICAgICAgIHRleHQtdW5kZXJsaW5lLXBvc2l0aW9uOiB1bmRlcjtcbiAgICAgICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiBjYWxjKDJweCAtIDAuMWVtKTtcbiAgICAgICAgY29sb3I6IGluaGVyaXQ7XG5cbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgdGV4dC1kZWNvcmF0aW9uLWNvbG9yOiBjdXJyZW50Q29sb3I7XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGFnPlxuICApO1xufSk7XG5cbkxpbmsucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhyZWY6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRhcmdldDogUHJvcFR5cGVzLnN0cmluZyxcbiAgdGFnOiBQcm9wVHlwZXMub25lT2YoWydhJywgJ2J1dHRvbiddKSxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */");
-var variantStyles = {
-  neutral: {
-    textDecorationColor: getColor('fade3')
-  },
-  subtle: {
-    textDecorationColor: 'transparent'
-  }
+var baseStyles = /*#__PURE__*/css(styles.transitions, ";text-underline-position:under;text-underline-offset:calc(2px - 0.1em);color:inherit;&:hover{text-decoration-color:currentColor;}" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2xpbmsuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1zQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9saW5rLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IGJhc2VTdHlsZXMgPSBjc3NgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgdGV4dC11bmRlcmxpbmUtcG9zaXRpb246IHVuZGVyO1xuICB0ZXh0LXVuZGVybGluZS1vZmZzZXQ6IGNhbGMoMnB4IC0gMC4xZW0pO1xuICBjb2xvcjogaW5oZXJpdDtcblxuICAmOmhvdmVyIHtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGxpbmtTdHlsZXMgPSB7XG4gIG5ldXRyYWw6IGNzc2BcbiAgICAke2Jhc2VTdHlsZXN9O1xuICAgIHRleHQtZGVjb3JhdGlvbi1jb2xvcjogJHtnZXRDb2xvcignZmFkZTMnKX07XG4gIGAsXG5cbiAgc3VidGxlOiBjc3NgXG4gICAgJHtiYXNlU3R5bGVzfTtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IHRyYW5zcGFyZW50O1xuICBgLFxufTtcblxuY29uc3QgYnV0dG9uU3R5bGVzID0gY3NzYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IDA7XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuICBmb250LXdlaWdodDogdW5zZXQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGluayA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIHRhZyA9ICdhJywgdmFyaWFudCA9ICduZXV0cmFsJywgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFRhZyA9IHRhZztcbiAgcmV0dXJuIChcbiAgICA8VGFnXG4gICAgICByZWY9e3JlZn1cbiAgICAgIGFzPXt0YWd9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0YWcgPT09ICdidXR0b24nICYmIGJ1dHRvblN0eWxlc307XG4gICAgICAgICR7bGlua1N0eWxlc1t2YXJpYW50XX07XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1RhZz5cbiAgKTtcbn0pO1xuXG5MaW5rLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBocmVmOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB0YXJnZXQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRhZzogUHJvcFR5cGVzLm9uZU9mKFsnYScsICdidXR0b24nXSksXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */");
+export var linkStyles = {
+  neutral: /*#__PURE__*/css(baseStyles, ";text-decoration-color:", getColor('fade3'), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:neutral;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2xpbmsuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9saW5rLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IGJhc2VTdHlsZXMgPSBjc3NgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgdGV4dC11bmRlcmxpbmUtcG9zaXRpb246IHVuZGVyO1xuICB0ZXh0LXVuZGVybGluZS1vZmZzZXQ6IGNhbGMoMnB4IC0gMC4xZW0pO1xuICBjb2xvcjogaW5oZXJpdDtcblxuICAmOmhvdmVyIHtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGxpbmtTdHlsZXMgPSB7XG4gIG5ldXRyYWw6IGNzc2BcbiAgICAke2Jhc2VTdHlsZXN9O1xuICAgIHRleHQtZGVjb3JhdGlvbi1jb2xvcjogJHtnZXRDb2xvcignZmFkZTMnKX07XG4gIGAsXG5cbiAgc3VidGxlOiBjc3NgXG4gICAgJHtiYXNlU3R5bGVzfTtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IHRyYW5zcGFyZW50O1xuICBgLFxufTtcblxuY29uc3QgYnV0dG9uU3R5bGVzID0gY3NzYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IDA7XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuICBmb250LXdlaWdodDogdW5zZXQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGluayA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIHRhZyA9ICdhJywgdmFyaWFudCA9ICduZXV0cmFsJywgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFRhZyA9IHRhZztcbiAgcmV0dXJuIChcbiAgICA8VGFnXG4gICAgICByZWY9e3JlZn1cbiAgICAgIGFzPXt0YWd9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0YWcgPT09ICdidXR0b24nICYmIGJ1dHRvblN0eWxlc307XG4gICAgICAgICR7bGlua1N0eWxlc1t2YXJpYW50XX07XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1RhZz5cbiAgKTtcbn0pO1xuXG5MaW5rLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBocmVmOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB0YXJnZXQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRhZzogUHJvcFR5cGVzLm9uZU9mKFsnYScsICdidXR0b24nXSksXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"),
+  subtle: /*#__PURE__*/css(baseStyles, ";text-decoration-color:transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:subtle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2xpbmsuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCYSIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9saW5rLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IGJhc2VTdHlsZXMgPSBjc3NgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgdGV4dC11bmRlcmxpbmUtcG9zaXRpb246IHVuZGVyO1xuICB0ZXh0LXVuZGVybGluZS1vZmZzZXQ6IGNhbGMoMnB4IC0gMC4xZW0pO1xuICBjb2xvcjogaW5oZXJpdDtcblxuICAmOmhvdmVyIHtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGxpbmtTdHlsZXMgPSB7XG4gIG5ldXRyYWw6IGNzc2BcbiAgICAke2Jhc2VTdHlsZXN9O1xuICAgIHRleHQtZGVjb3JhdGlvbi1jb2xvcjogJHtnZXRDb2xvcignZmFkZTMnKX07XG4gIGAsXG5cbiAgc3VidGxlOiBjc3NgXG4gICAgJHtiYXNlU3R5bGVzfTtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IHRyYW5zcGFyZW50O1xuICBgLFxufTtcblxuY29uc3QgYnV0dG9uU3R5bGVzID0gY3NzYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IDA7XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuICBmb250LXdlaWdodDogdW5zZXQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGluayA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIHRhZyA9ICdhJywgdmFyaWFudCA9ICduZXV0cmFsJywgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFRhZyA9IHRhZztcbiAgcmV0dXJuIChcbiAgICA8VGFnXG4gICAgICByZWY9e3JlZn1cbiAgICAgIGFzPXt0YWd9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0YWcgPT09ICdidXR0b24nICYmIGJ1dHRvblN0eWxlc307XG4gICAgICAgICR7bGlua1N0eWxlc1t2YXJpYW50XX07XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1RhZz5cbiAgKTtcbn0pO1xuXG5MaW5rLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBocmVmOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB0YXJnZXQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRhZzogUHJvcFR5cGVzLm9uZU9mKFsnYScsICdidXR0b24nXSksXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */")
 };
+var buttonStyles = /*#__PURE__*/css(styles.buttonReset, ";border:none;background:transparent;padding:0;text-decoration:underline;font-weight:unset;" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2xpbmsuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCd0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvbGluay5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuXG5jb25zdCBiYXNlU3R5bGVzID0gY3NzYFxuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG4gIHRleHQtdW5kZXJsaW5lLXBvc2l0aW9uOiB1bmRlcjtcbiAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiBjYWxjKDJweCAtIDAuMWVtKTtcbiAgY29sb3I6IGluaGVyaXQ7XG5cbiAgJjpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uLWNvbG9yOiBjdXJyZW50Q29sb3I7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBsaW5rU3R5bGVzID0ge1xuICBuZXV0cmFsOiBjc3NgXG4gICAgJHtiYXNlU3R5bGVzfTtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6ICR7Z2V0Q29sb3IoJ2ZhZGUzJyl9O1xuICBgLFxuXG4gIHN1YnRsZTogY3NzYFxuICAgICR7YmFzZVN0eWxlc307XG4gICAgdGV4dC1kZWNvcmF0aW9uLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYCxcbn07XG5cbmNvbnN0IGJ1dHRvblN0eWxlcyA9IGNzc2BcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwO1xuICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTtcbiAgZm9udC13ZWlnaHQ6IHVuc2V0O1xuYDtcblxuZXhwb3J0IGNvbnN0IExpbmsgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0YWcgPSAnYScsIHZhcmlhbnQgPSAnbmV1dHJhbCcsIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICBjb25zdCBUYWcgPSB0YWc7XG4gIHJldHVybiAoXG4gICAgPFRhZ1xuICAgICAgcmVmPXtyZWZ9XG4gICAgICBhcz17dGFnfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgICR7dGFnID09PSAnYnV0dG9uJyAmJiBidXR0b25TdHlsZXN9O1xuICAgICAgICAke2xpbmtTdHlsZXNbdmFyaWFudF19O1xuICAgICAgYH1cbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9UYWc+XG4gICk7XG59KTtcblxuTGluay5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaHJlZjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdGFyZ2V0OiBQcm9wVHlwZXMuc3RyaW5nLFxuICB0YWc6IFByb3BUeXBlcy5vbmVPZihbJ2EnLCAnYnV0dG9uJ10pLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */");
 export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$tag = _ref.tag,
@@ -37,7 +34,7 @@ export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return ___EmotionJSX(Tag, _extends({
     ref: ref,
     as: tag,
-    css: /*#__PURE__*/css(styles.transitions, ";", tag === 'button' && buttonStyles, ";", variantStyles[variant], ";text-underline-position:under;text-underline-offset:calc(2px - 0.1em);color:inherit;&:hover{text-decoration-color:currentColor;}" + (process.env.NODE_ENV === "production" ? "" : ";label:Link;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2xpbmsuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9saW5rLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IGJ1dHRvblN0eWxlcyA9IGNzc2BcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwO1xuICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTtcbiAgZm9udC13ZWlnaHQ6IHVuc2V0O1xuYDtcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgbmV1dHJhbDoge1xuICAgIHRleHREZWNvcmF0aW9uQ29sb3I6IGdldENvbG9yKCdmYWRlMycpLFxuICB9LFxuICBzdWJ0bGU6IHtcbiAgICB0ZXh0RGVjb3JhdGlvbkNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IExpbmsgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0YWcgPSAnYScsIHZhcmlhbnQgPSAnbmV1dHJhbCcsIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICBjb25zdCBUYWcgPSB0YWc7XG4gIHJldHVybiAoXG4gICAgPFRhZ1xuICAgICAgcmVmPXtyZWZ9XG4gICAgICBhcz17dGFnfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgICAgICAgJHt0YWcgPT09ICdidXR0b24nICYmIGJ1dHRvblN0eWxlc307XG4gICAgICAgICR7dmFyaWFudFN0eWxlc1t2YXJpYW50XX07XG4gICAgICAgIHRleHQtdW5kZXJsaW5lLXBvc2l0aW9uOiB1bmRlcjtcbiAgICAgICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiBjYWxjKDJweCAtIDAuMWVtKTtcbiAgICAgICAgY29sb3I6IGluaGVyaXQ7XG5cbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgdGV4dC1kZWNvcmF0aW9uLWNvbG9yOiBjdXJyZW50Q29sb3I7XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGFnPlxuICApO1xufSk7XG5cbkxpbmsucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhyZWY6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRhcmdldDogUHJvcFR5cGVzLnN0cmluZyxcbiAgdGFnOiBQcm9wVHlwZXMub25lT2YoWydhJywgJ2J1dHRvbiddKSxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */")
+    css: /*#__PURE__*/css(tag === 'button' && buttonStyles, ";", linkStyles[variant], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Link;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2xpbmsuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9saW5rLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IGJhc2VTdHlsZXMgPSBjc3NgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgdGV4dC11bmRlcmxpbmUtcG9zaXRpb246IHVuZGVyO1xuICB0ZXh0LXVuZGVybGluZS1vZmZzZXQ6IGNhbGMoMnB4IC0gMC4xZW0pO1xuICBjb2xvcjogaW5oZXJpdDtcblxuICAmOmhvdmVyIHtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGxpbmtTdHlsZXMgPSB7XG4gIG5ldXRyYWw6IGNzc2BcbiAgICAke2Jhc2VTdHlsZXN9O1xuICAgIHRleHQtZGVjb3JhdGlvbi1jb2xvcjogJHtnZXRDb2xvcignZmFkZTMnKX07XG4gIGAsXG5cbiAgc3VidGxlOiBjc3NgXG4gICAgJHtiYXNlU3R5bGVzfTtcbiAgICB0ZXh0LWRlY29yYXRpb24tY29sb3I6IHRyYW5zcGFyZW50O1xuICBgLFxufTtcblxuY29uc3QgYnV0dG9uU3R5bGVzID0gY3NzYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IDA7XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuICBmb250LXdlaWdodDogdW5zZXQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGluayA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIHRhZyA9ICdhJywgdmFyaWFudCA9ICduZXV0cmFsJywgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFRhZyA9IHRhZztcbiAgcmV0dXJuIChcbiAgICA8VGFnXG4gICAgICByZWY9e3JlZn1cbiAgICAgIGFzPXt0YWd9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0YWcgPT09ICdidXR0b24nICYmIGJ1dHRvblN0eWxlc307XG4gICAgICAgICR7bGlua1N0eWxlc1t2YXJpYW50XX07XG4gICAgICBgfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1RhZz5cbiAgKTtcbn0pO1xuXG5MaW5rLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBocmVmOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB0YXJnZXQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHRhZzogUHJvcFR5cGVzLm9uZU9mKFsnYScsICdidXR0b24nXSksXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */")
   }, props), children);
 });
 Link.propTypes = {

package/es/components/stack.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import { getResponsiveSpace } from '../utilities';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { types } from '../types';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
@@ -24,17 +24,18 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
   label: "Wrapper"
 })("&>*+*{", function (p) {
   return getResponsiveSpace('margin-top', p.gap);
-}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N0YWNrLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RhY2suanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAmID4gKiArICoge1xuICAgICR7cCA9PiBnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi10b3AnLCBwLmdhcCl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3RhY2sgPSAoeyBjaGlsZHJlbiwgZ2FwLCAuLi5wcm9wcyB9KSA9PiAoXG4gIDxXcmFwcGVyIGdhcD17Z2FwfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKTtcblxuU3RhY2sucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxufTtcbiJdfQ== */"));
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N0YWNrLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RhY2suanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgJiA+ICogKyAqIHtcbiAgICAke3AgPT4gZ2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tdG9wJywgcC5nYXApfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFN0YWNrID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgZ2FwLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFdyYXBwZXIgcmVmPXtyZWZ9IGdhcD17Z2FwfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKSk7XG5cblN0YWNrLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBnYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbn07XG4iXX0= */"));
 
-export var Stack = function Stack(_ref) {
+export var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       gap = _ref.gap,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX(Wrapper, _extends({
+    ref: ref,
     gap: gap
   }, props), children);
-};
+});
 Stack.propTypes = {
   children: PropTypes.node,
   gap: types.responsiveSpace

package/es/components/text-input.js

@@ -43,6 +43,7 @@ import { IconButton } from './icon-button';
 import { componentVars, FieldLabel, InputField } from '../foundational';
 import { types } from '../types';
 import { IconHide, IconShow } from '../icons';
+import { useWidth } from '../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var iconOffsetPx = 12;
 var iconTextGapPx = 8;
@@ -52,22 +53,22 @@ 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWE4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuL2ljb24tYnV0dG9uJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkTGFiZWwsIElucHV0RmllbGQgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBJY29uSGlkZSwgSWNvblNob3cgfSBmcm9tICcuLi9pY29ucyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5jb25zdCBTaG93QnV0dG9uID0gKHsgY2hpbGRyZW4sIGludGVybmFsVHlwZSwgc2V0SW50ZXJuYWxUeXBlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IHNob3dSaWdodE9mZnNldCA9IGBjYWxjKCgke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAke2NvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25IZWlnaHR9KSAvIDIpYDtcbiAgY29uc3QgdHlwZUFuZEljb25NYXAgPSB7XG4gICAgcGFzc3dvcmQ6IDxJY29uU2hvdyAvPixcbiAgICB0ZXh0OiA8SWNvbkhpZGUgLz4sXG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94XG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIHJpZ2h0PXtzaG93UmlnaHRPZmZzZXR9XG4gICAgICB0b3A9XCIwXCJcbiAgICAgIGJvdHRvbT1cIjBcIlxuICAgICAgbWFyZ2luPVwiYXV0b1wiXG4gICAgICBoZWlnaHQ9XCJmaXQtY29udGVudFwiXG4gICAgPlxuICAgICAgPEljb25CdXR0b25cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgICBpY29uPXt0eXBlQW5kSWNvbk1hcFtpbnRlcm5hbFR5cGVdfVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRJbnRlcm5hbFR5cGUoaW50ZXJuYWxUeXBlID09PSAndGV4dCcgPyAncGFzc3dvcmQnIDogJ3RleHQnKX1cbiAgICAgIC8+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIGlzRGlzYWJsZWQsXG4gIHR5cGUgPSAndGV4dCcsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuICBjb25zdCBbaW50ZXJuYWxUeXBlLCBzZXRJbnRlcm5hbFR5cGVdID0gUmVhY3QudXNlU3RhdGUodHlwZSk7XG5cbiAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaWNvblJlZi5jdXJyZW50KSB7XG4gICAgICBzZXRJY29uV2lkdGgoaWNvblJlZi5jdXJyZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBoYXNTaG93QnV0dG9uID0gdHlwZSA9PT0gJ3Bhc3N3b3JkJztcbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IHBhZGRpbmdSaWdodCA9IGhhc1Nob3dCdXR0b24gPyBjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHQgOiB1bmRlZmluZWQ7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdHlwZT17aW50ZXJuYWxUeXBlfVxuICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgICAgICBwYWRkaW5nUmlnaHQ9e3BhZGRpbmdSaWdodH1cbiAgICAgICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICAgICAgaXNEaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIC8+XG4gICAgICAgIHtoYXNTaG93QnV0dG9uICYmIChcbiAgICAgICAgICA8U2hvd0J1dHRvbiBzZXRJbnRlcm5hbFR5cGU9e3NldEludGVybmFsVHlwZX0gaW50ZXJuYWxUeXBlPXtpbnRlcm5hbFR5cGV9IC8+XG4gICAgICAgICl9XG4gICAgICA8L0JveD5cbiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICA8Qm94IG1hcmdpblRvcD17MC41fT5cbiAgICAgICAgICA8VGV4dCBjb2xvcj1cImRhbmdlclwiPntlcnJvck1lc3NhZ2V9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5UZXh0SW5wdXQucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdmFsdWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGxhYmVsOiB0eXBlcy5sYWJlbCxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgdHlwZTogdHlwZXMudGV4dElucHV0LFxufTtcbiJdfQ== */"));
+})("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWM4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuL2ljb24tYnV0dG9uJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkTGFiZWwsIElucHV0RmllbGQgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBJY29uSGlkZSwgSWNvblNob3cgfSBmcm9tICcuLi9pY29ucyc7XG5pbXBvcnQgeyB1c2VXaWR0aCB9IGZyb20gJy4uL2hvb2tzJztcblxuY29uc3QgaWNvbk9mZnNldFB4ID0gMTI7XG5jb25zdCBpY29uVGV4dEdhcFB4ID0gODtcblxuY29uc3QgSWNvblNlY3Rpb24gPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIG1hcmdpbjogYXV0bztcbiAgbGVmdDogJHtpY29uT2Zmc2V0UHh9cHg7XG4gIHRvcDogMDtcbiAgYm90dG9tOiAwO1xuICBoZWlnaHQ6IGZpdC1jb250ZW50O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbmA7XG5cbmNvbnN0IFZpc2liaWxpdHlCdXR0b24gPSAoeyBjaGlsZHJlbiwgaW50ZXJuYWxUeXBlLCBzZXRJbnRlcm5hbFR5cGUsIC4uLnByb3BzIH0pID0+IHtcbiAgY29uc3QgcmlnaHRPZmZzZXQgPSBgY2FsYygoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gJHtjb21wb25lbnRWYXJzLmNsZWFyQnV0dG9uSGVpZ2h0fSkgLyAyKWA7XG4gIGNvbnN0IHR5cGVBbmRJY29uTWFwID0ge1xuICAgIHBhc3N3b3JkOiA8SWNvblNob3cgLz4sXG4gICAgdGV4dDogPEljb25IaWRlIC8+LFxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPEJveFxuICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICByaWdodD17cmlnaHRPZmZzZXR9XG4gICAgICB0b3A9XCIwXCJcbiAgICAgIGJvdHRvbT1cIjBcIlxuICAgICAgbWFyZ2luPVwiYXV0b1wiXG4gICAgICBoZWlnaHQ9XCJmaXQtY29udGVudFwiXG4gICAgPlxuICAgICAgPEljb25CdXR0b25cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgICBpY29uPXt0eXBlQW5kSWNvbk1hcFtpbnRlcm5hbFR5cGVdfVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRJbnRlcm5hbFR5cGUoaW50ZXJuYWxUeXBlID09PSAndGV4dCcgPyAncGFzc3dvcmQnIDogJ3RleHQnKX1cbiAgICAgIC8+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIGlzRGlzYWJsZWQsXG4gIHR5cGUgPSAndGV4dCcsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpbnRlcm5hbFR5cGUsIHNldEludGVybmFsVHlwZV0gPSBSZWFjdC51c2VTdGF0ZSh0eXBlKTtcblxuICBjb25zdCBpY29uV2lkdGggPSB1c2VXaWR0aChpY29uUmVmKTtcbiAgY29uc3QgaGFzVmlzaWJpbGl0eUJ1dHRvbiA9IHR5cGUgPT09ICdwYXNzd29yZCc7XG4gIGNvbnN0IHBhZGRpbmdMZWZ0ID0gaWNvbiA/IGAke2ljb25PZmZzZXRQeCArIGljb25XaWR0aCArIGljb25UZXh0R2FwUHh9cHhgIDogdW5kZWZpbmVkO1xuICBjb25zdCBwYWRkaW5nUmlnaHQgPSBoYXNWaXNpYmlsaXR5QnV0dG9uID8gY29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0IDogdW5kZWZpbmVkO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIHtsYWJlbCAmJiA8RmllbGRMYWJlbCBodG1sRm9yPXtpZH0+e2xhYmVsfTwvRmllbGRMYWJlbD59XG4gICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgICAge2ljb24gJiYgKFxuICAgICAgICAgIDxJY29uU2VjdGlvbj5cbiAgICAgICAgICAgIDxJY29uIHJlZj17aWNvblJlZn0gaWNvbj17aWNvbn0gLz5cbiAgICAgICAgICA8L0ljb25TZWN0aW9uPlxuICAgICAgICApfVxuICAgICAgICA8SW5wdXRGaWVsZFxuICAgICAgICAgIHR5cGU9e2ludGVybmFsVHlwZX1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBwYWRkaW5nTGVmdD17cGFkZGluZ0xlZnR9XG4gICAgICAgICAgcGFkZGluZ1JpZ2h0PXtwYWRkaW5nUmlnaHR9XG4gICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAvPlxuICAgICAgICB7aGFzVmlzaWJpbGl0eUJ1dHRvbiAmJiAoXG4gICAgICAgICAgPFZpc2liaWxpdHlCdXR0b24gc2V0SW50ZXJuYWxUeXBlPXtzZXRJbnRlcm5hbFR5cGV9IGludGVybmFsVHlwZT17aW50ZXJuYWxUeXBlfSAvPlxuICAgICAgICApfVxuICAgICAgPC9Cb3g+XG4gICAgICB7ZXJyb3JNZXNzYWdlICYmIChcbiAgICAgICAgPEJveCBtYXJnaW5Ub3A9ezAuNX0+XG4gICAgICAgICAgPFRleHQgY29sb3I9XCJkYW5nZXJcIj57ZXJyb3JNZXNzYWdlfTwvVGV4dD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogdHlwZXMubGFiZWwsXG4gIGljb246IFByb3BUeXBlcy5ub2RlLFxuICBoYXNFcnJvcjogUHJvcFR5cGVzLmJvb2wsXG4gIGVycm9yTWVzc2FnZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIHR5cGU6IHR5cGVzLnRleHRJbnB1dCxcbn07XG4iXX0= */"));
 
-var ShowButton = function ShowButton(_ref) {
+var VisibilityButton = function VisibilityButton(_ref) {
   var children = _ref.children,
       internalType = _ref.internalType,
       setInternalType = _ref.setInternalType,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var showRightOffset = "calc((".concat(componentVars.textBoxHeight, " - ").concat(componentVars.clearButtonHeight, ") / 2)");
+  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: showRightOffset,
+    right: rightOffset,
     top: "0",
     bottom: "0",
     margin: "auto",
@@ -95,24 +96,15 @@ export var TextInput = function TextInput(_ref2) {
 
   var iconRef = React.useRef(null);
 
-  var _React$useState = React.useState(),
+  var _React$useState = React.useState(type),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      iconWidth = _React$useState2[0],
-      setIconWidth = _React$useState2[1];
+      internalType = _React$useState2[0],
+      setInternalType = _React$useState2[1];
 
-  var _React$useState3 = React.useState(type),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      internalType = _React$useState4[0],
-      setInternalType = _React$useState4[1];
-
-  React.useEffect(function () {
-    if (iconRef.current) {
-      setIconWidth(iconRef.current.getBoundingClientRect().width);
-    }
-  }, []);
-  var hasShowButton = type === 'password';
+  var iconWidth = useWidth(iconRef);
+  var hasVisibilityButton = type === 'password';
   var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : undefined;
-  var paddingRight = hasShowButton ? componentVars.textBoxHeight : undefined;
+  var paddingRight = hasVisibilityButton ? componentVars.textBoxHeight : undefined;
   return ___EmotionJSX("div", null, label && ___EmotionJSX(FieldLabel, {
     htmlFor: id
   }, label), ___EmotionJSX(Box, {
@@ -129,7 +121,7 @@ export var TextInput = function TextInput(_ref2) {
     paddingRight: paddingRight,
     hasError: hasError,
     isDisabled: isDisabled
-  }, props)), hasShowButton && ___EmotionJSX(ShowButton, {
+  }, props)), hasVisibilityButton && ___EmotionJSX(VisibilityButton, {
     setInternalType: setInternalType,
     internalType: internalType
   })), errorMessage && ___EmotionJSX(Box, {

package/es/hooks/index.js

@@ -2,4 +2,5 @@ export { useMedia } from './useMedia';
 export { useKeyPress } from './useKeyPress';
 export { useOnClickOutside } from './useOnClickOutside';
 export { useWindowSize } from './useWindowSize';
-export { useHasOverflow } from './useHasOverflow';
+export { useHasOverflow } from './useHasOverflow';
+export { useWidth } from './useWidth';

package/es/hooks/useWidth.js

@@ -0,0 +1,37 @@
+import "core-js/modules/es.symbol.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";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useEffect, useState } from 'react';
+export var useWidth = function useWidth(ref) {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  useEffect(function () {
+    if (ref.current) {
+      setWidth(ref.current.getBoundingClientRect().width);
+    }
+  }, [ref]);
+  return width;
+};

package/package.json

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