@flodesk/grain 2.20.3 → 2.22.0

package/es/components/arrange.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.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";
-var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
+var _excluded = ["children", "gap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "autoFlow", "width", "height"];
 
 var _templateObject;
 
@@ -16,11 +16,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { getGridColumns, getResponsiveSpace } from '../utilities';
-import React from "react";
-import styled from "@emotion/styled";
+import { getGridColumns, getResponsiveDimension, getResponsiveSpace } from '../utilities';
+import React from 'react';
+import styled from '@emotion/styled';
 import { types } from '../types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  place-items: ", ";\n  place-content: ", ";\n"])), function (p) {
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return !p.columns && "grid-auto-flow: ".concat(p.autoFlow);
 }, function (p) {
   return getResponsiveSpace('gap', p.gap);
@@ -35,46 +35,46 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 }, function (p) {
   return p.alignContent;
 }, function (p) {
-  return p.placeItems;
+  return getResponsiveDimension('width', p.width);
 }, function (p) {
-  return p.placeContent;
+  return getResponsiveDimension('height', p.height);
 });
 export var Arrange = function Arrange(_ref) {
   var children = _ref.children,
       gap = _ref.gap,
-      columns = _ref.columns,
-      _ref$autoFlow = _ref.autoFlow,
-      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
-      justifyItems = _ref.justifyItems,
       _ref$alignItems = _ref.alignItems,
       alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
+      justifyItems = _ref.justifyItems,
       _ref$justifyContent = _ref.justifyContent,
       justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
       alignContent = _ref.alignContent,
-      placeItems = _ref.placeItems,
-      placeContent = _ref.placeContent,
+      columns = _ref.columns,
+      _ref$autoFlow = _ref.autoFlow,
+      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
+      width = _ref.width,
+      height = _ref.height,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     gap: gap,
     columns: columns,
     autoFlow: autoFlow,
-    justifyItems: justifyItems,
     alignItems: alignItems,
+    justifyItems: justifyItems,
     justifyContent: justifyContent,
     alignContent: alignContent,
-    placeItems: placeItems,
-    placeContent: placeContent
+    width: width,
+    height: height
   }, props), children);
 };
 Arrange.propTypes = {
   gap: types.space,
   columns: types.columns,
   autoFlow: types.autoFlow,
-  justifyItems: types.gridItemsAlignments,
-  alignItems: types.gridItemsAlignments,
-  justifyContent: types.gridContentPositions,
-  alignContent: types.gridContentPositions,
-  placeItems: types.gridItemsAlignments,
-  placeContent: types.gridContentPositions
+  alignItems: types.gridItemsAlignment,
+  justifyItems: types.gridItemsAlignment,
+  justifyContent: types.gridContentPosition,
+  alignContent: types.gridContentPosition,
+  width: types.dimension,
+  height: types.dimension
 };

package/es/components/box.js

@@ -4,12 +4,9 @@ import "core-js/modules/es.object.define-properties.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.define-property.js";
 var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
 
-var _templateObject, _Box$propTypes;
-
-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; }
+var _templateObject;
 
 import "core-js/modules/es.object.assign.js";
 
@@ -20,11 +17,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getBorder, getColor, getRadius, getResponsiveSpace, getShadow, getResponsiveDimension } from '../utilities';
-import React from "react";
-import styled from "@emotion/styled";
+import React from 'react';
+import styled from '@emotion/styled';
 import { types } from '../types';
-import { PropTypes } from 'prop-types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n  \n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
+import PropTypes from 'prop-types';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
   return getBorder(p.borderSide, p.borderWidth, p.borderColor);
 }, function (p) {
   return getResponsiveSpace('padding', p.padding);
@@ -154,7 +151,7 @@ export var Box = function Box(_ref) {
     aspectRatio: aspectRatio
   }, props), children);
 };
-Box.propTypes = (_Box$propTypes = {
+Box.propTypes = {
   color: types.color,
   backgroundColor: types.color,
   borderSide: types.side,
@@ -165,5 +162,28 @@ Box.propTypes = (_Box$propTypes = {
   maxWidth: types.dimension,
   height: types.dimension,
   minHeight: types.dimension,
-  maxHeight: types.dimension
-}, _defineProperty(_Box$propTypes, "height", types.dimension), _defineProperty(_Box$propTypes, "radius", types.radius), _defineProperty(_Box$propTypes, "shadow", types.shadow), _defineProperty(_Box$propTypes, "padding", types.space), _defineProperty(_Box$propTypes, "paddingTop", types.space), _defineProperty(_Box$propTypes, "paddingBottom", types.space), _defineProperty(_Box$propTypes, "paddingLeft", types.space), _defineProperty(_Box$propTypes, "paddingRight", types.space), _defineProperty(_Box$propTypes, "paddingX", types.space), _defineProperty(_Box$propTypes, "paddingY", types.space), _defineProperty(_Box$propTypes, "margin", types.space), _defineProperty(_Box$propTypes, "marginTop", types.space), _defineProperty(_Box$propTypes, "marginBottom", types.space), _defineProperty(_Box$propTypes, "marginLeft", types.space), _defineProperty(_Box$propTypes, "marginRight", types.space), _defineProperty(_Box$propTypes, "marginX", types.space), _defineProperty(_Box$propTypes, "marginY", types.space), _defineProperty(_Box$propTypes, "position", types.position), _defineProperty(_Box$propTypes, "top", types.space), _defineProperty(_Box$propTypes, "bottom", types.space), _defineProperty(_Box$propTypes, "left", types.space), _defineProperty(_Box$propTypes, "right", types.space), _defineProperty(_Box$propTypes, "overflow", types.overflow), _defineProperty(_Box$propTypes, "aspectRatio", PropTypes.string), _Box$propTypes);
+  maxHeight: types.dimension,
+  radius: types.radius,
+  shadow: types.shadow,
+  padding: types.space,
+  paddingTop: types.space,
+  paddingBottom: types.space,
+  paddingLeft: types.space,
+  paddingRight: types.space,
+  paddingX: types.space,
+  paddingY: types.space,
+  margin: types.space,
+  marginTop: types.space,
+  marginBottom: types.space,
+  marginLeft: types.space,
+  marginRight: types.space,
+  marginX: types.space,
+  marginY: types.space,
+  position: types.position,
+  top: types.space,
+  bottom: types.space,
+  left: types.space,
+  right: types.space,
+  overflow: types.overflow,
+  aspectRatio: PropTypes.string
+};

package/es/components/button.js

@@ -17,10 +17,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getRadius, getWeight } from '../utilities';
-import { Icon } from '../components';
-import React from "react";
-import styled from "@emotion/styled";
-import PropTypes from "prop-types";
+import { Icon } from './icon';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { transitions } from '../foundational';
 var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-paddingX-m: 16px;\n  --grn-borderColor: var(--grn-color-fade4);\n  --grn-borderColor-hover: var(--grn-color-fade6);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
@@ -28,7 +28,7 @@ var variants = {
   neutral: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-borderColor);\n\n    &:hover {\n      border-color: var(--grn-borderColor-hover);\n    }\n    &:active {\n      border-color: var(--grn-borderColor-active);\n    }\n  "]))),
   primary: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n    }\n  "])), getColor('accent'), getColor('grey7'), getColor('grey6'))
 };
-var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n  \n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, transitions, getWeight('medium'), getRadius('s'), function (p) {
+var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, transitions, getWeight('medium'), getRadius('s'), function (p) {
   return !p.isDisabled && variants[p.variant];
 }, function (p) {
   return p.hasFullWidth && "width: 100%";

package/es/components/icon-button.js

@@ -16,10 +16,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { Icon } from '../components';
-import React from "react";
-import styled from "@emotion/styled";
-import PropTypes from "prop-types";
+import { Icon } from './icon';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
 import { types } from '../types';
 import { ClearButtonBox } from '../foundational';
 var Wrapper = styled(ClearButtonBox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: var(--grn-clearButtonHeight-m);\n"])));

package/es/components/icon-toggle.js

@@ -17,16 +17,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { getTransition, getWeight } from "../utilities";
-import { Icon } from ".";
-import React from "react";
-import styled from "@emotion/styled";
-import PropTypes from "prop-types";
-import { css } from "@emotion/react";
-import { types } from "../types";
+import { getTransition, getWeight } from '../utilities';
+import { Icon } from '.';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { types } from '../types';
 var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n  --grn-width: calc(var(--grn-textBoxHeight-m) + 2px);\n"])));
 var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: var(--grn-radius-s);\n  width: fit-content;\n"])));
-var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n  transition: color ", ";\n\n  ", ";\n  \n  & + .IconToggle {\n    border-color: var(--grn-color-border);\n  }\n  \n  &:after {\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: ", ";\n    ", ";\n  }\n\n  &:first-of-type {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n  \n  &:first-of-type:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n  \n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-body);\n  }\n"])), variables, getWeight("medium"), getTransition('fast'), function (p) {
+var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n  transition: color ", ";\n\n  ", ";\n\n  & + .IconToggle {\n    border-color: var(--grn-color-border);\n  }\n\n  &:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: ", ";\n    ", ";\n  }\n\n  &:first-of-type {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n\n  &:first-of-type:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n\n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-body);\n  }\n"])), variables, getWeight('medium'), getTransition('fast'), function (p) {
   return p.isActive && "\n    color: var(--grn-color-body);\n  ";
 }, getTransition('xFast'), function (p) {
   return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";

package/es/components/icon.js

@@ -17,9 +17,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getIconSize } from '../utilities';
-import { PropTypes } from 'prop-types';
-import React from "react";
-import styled from "@emotion/styled";
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import styled from '@emotion/styled';
 import { types } from '../types';
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  color: ", ";\n  \n  svg {\n    display: block;\n    height: ", ";\n    ", "\n"])), function (p) {
   return getColor(p.color);
@@ -30,7 +30,7 @@ var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateL
 }, function (p) {
   return p.hasEvenBoundary && "width: ".concat(getIconSize(p.size), "}");
 });
-export var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+export var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,

package/es/components/index.js

@@ -1,11 +1,11 @@
-export { Text } from "./text";
-export { Box } from "./box";
-export { Button } from "./button";
-export { TextInput } from "./text-input";
-export { Arrange } from "./arrange";
-export { Icon } from "./icon";
-export { IconButton } from "./icon-button";
-export { TextButton } from "./text-button";
-export { IconToggleGroup, IconToggle } from "./icon-toggle";
-export { TextToggleGroup, TextToggle } from "./text-toggle";
-export { Stack } from "./stack";
+export { Text } from './text';
+export { Box } from './box';
+export { Button } from './button';
+export { TextInput } from './text-input';
+export { Arrange } from './arrange';
+export { Icon } from './icon';
+export { IconButton } from './icon-button';
+export { TextButton } from './text-button';
+export { IconToggleGroup, IconToggle } from './icon-toggle';
+export { TextToggleGroup, TextToggle } from './text-toggle';
+export { Stack } from './stack';

package/es/components/stack.js

@@ -16,10 +16,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { getColor, getIconSize, getResponsiveSpace } from '../utilities';
-import { PropTypes } from 'prop-types';
-import React from "react";
-import styled from "@emotion/styled";
+import { getResponsiveSpace } from '../utilities';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
 import { types } from '../types';
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > * + * {\n    ", ";\n  }\n"])), function (p) {
   return getResponsiveSpace('margin-top', p.gap);

package/es/components/text-button.js

@@ -17,9 +17,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { Icon } from '../components';
-import React from "react";
-import styled from "@emotion/styled";
-import PropTypes from "prop-types";
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
 import { ClearButtonBox } from '../foundational';
 var Wrapper = styled(ClearButtonBox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 8px;\n  gap: 8px;\n"])));
 export var TextButton = function TextButton(_ref) {

package/es/components/text-input.js

@@ -37,9 +37,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getRadius, getTextSize } from '../utilities';
-import { PropTypes } from 'prop-types';
-import React from "react";
-import styled from "@emotion/styled";
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
 import { types } from '../types';
 import { css } from '@emotion/react';
 import { Box } from './box';
@@ -68,7 +68,7 @@ var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplate
 var Label = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: ", ";\n"])), function (p) {
   return sizesStyles[p.size].labelGap;
 });
-var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;  \n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  height: ", ";\n  padding: ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), transitions, function (p) {
+var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  height: ", ";\n  padding: ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n\n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), transitions, function (p) {
   return getRadius('s');
 }, function (p) {
   return sizesStyles[p.size].height;
@@ -77,7 +77,7 @@ var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTem
 }, function (p) {
   return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");
 }, getColor('grey5'));
-var IconSection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  margin: auto;\n  left: ", "px;\n  top: 0; \n  bottom: 0;\n  height: fit-content;\n  pointer-events: none;\n"])), function (p) {
+var IconSection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  margin: auto;\n  left: ", "px;\n  top: 0;\n  bottom: 0;\n  height: fit-content;\n  pointer-events: none;\n"])), function (p) {
   return sizesStyles[p.size].iconOffsetPx;
 });
 export var TextInput = function TextInput(_ref) {

package/es/components/text-toggle.js

@@ -17,12 +17,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { getWeight, getTransition } from "../utilities";
-import React from "react";
-import styled from "@emotion/styled";
-import PropTypes from "prop-types";
+import { getWeight, getTransition } from '../utilities';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: 1000px;\n  width: fit-content;\n"])));
-var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  padding: 0 16px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n  border-radius: 1000px;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n  \n  &:hover {\n    color: var(--grn-color-body);\n  }\n  \n  ", ";\n"])), getWeight("medium"), getTransition('fast'), getTransition('xFast'), function (p) {
+var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  padding: 0 16px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n  border-radius: 1000px;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-body);\n  }\n\n  ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
   return p.isActive && "\n    box-shadow: 0 0 0 1px var(--grn-color-grey6);\n    color: var(--grn-color-body);\n  ";
 });
 export var TextToggle = function TextToggle(_ref) {

package/es/components/text.js

@@ -17,11 +17,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getResponsiveTextSize, getWeight } from '../utilities';
-import { PropTypes } from 'prop-types';
-import React from "react";
-import styled from "@emotion/styled";
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
 import { types } from '../types';
-var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return getResponsiveTextSize(p.size);
 }, function (p) {
   return getWeight(p.weight);

package/es/foundational/index.js

@@ -6,8 +6,8 @@ var _templateObject, _templateObject2;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import styled from "@emotion/styled";
+import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { getColor, getRadius, getTransition, getWeight } from "../utilities";
-export var transitions = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: ", ";\n  \n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n"])), getTransition('slow'), getTransition('fast'));
-export var ClearButtonBox = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  --grn-borderColor-active: var(--grn-color-fade5);\n  \n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background-color: var(--grn-color-overlay);\n  }\n\n  &:active {\n    border-color: var(--grn-borderColor-active);\n    outline-color: var(--grn-borderColor-active);\n    background-color: transparent;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n\n    &:hover {\n      background-color: transparent;\n    }\n  }\n"])), transitions, getWeight("medium"), getRadius('s'), getColor('disabledContent'));
+import { getColor, getRadius, getTransition, getWeight } from '../utilities';
+export var transitions = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: ", ";\n\n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n"])), getTransition('slow'), getTransition('fast'));
+export var ClearButtonBox = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  --grn-borderColor-active: var(--grn-color-fade5);\n\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background-color: var(--grn-color-overlay);\n  }\n\n  &:active {\n    border-color: var(--grn-borderColor-active);\n    outline-color: var(--grn-borderColor-active);\n    background-color: transparent;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n\n    &:hover {\n      background-color: transparent;\n    }\n  }\n"])), transitions, getWeight('medium'), getRadius('s'), getColor('disabledContent'));

package/es/hooks/index.js

@@ -1 +1 @@
-export { useMedia } from "./useMedia";
+export { useMedia } from './useMedia';

package/es/hooks/useMedia.js

@@ -32,7 +32,7 @@ export function useMedia(queries, values, defaultValue) {
     var index = mediaQueryLists.findIndex(function (mql) {
       return mql.matches;
     });
-    return typeof values[index] !== "undefined" ? values[index] : defaultValue;
+    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
   };
 
   var _useState = useState(getValue),

package/es/icons/icon-align-center.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconAlignCenter = function IconAlignCenter(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-align-left.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconAlignLeft = function IconAlignLeft(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-align-right.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconAlignRight = function IconAlignRight(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-arrow-down.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconArrowDown = function IconArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-arrow-left.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconArrowLeft = function IconArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-arrow-right.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconArrowRight = function IconArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-arrow-up.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconArrowUp = function IconArrowUp(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-browser.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconBrowser = function IconBrowser(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-chart.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconChart = function IconChart(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-check.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconCheck = function IconCheck(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-chevron-down.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconChevronDown = function IconChevronDown(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-chevron-horizontal.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconChevronHorizontal = function IconChevronHorizontal(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-chevron-left.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconChevronLeft = function IconChevronLeft(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-chevron-right.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconChevronRight = function IconChevronRight(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-chevron-up.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconChevronUp = function IconChevronUp(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-chevron-vertical.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconChevronVertical = function IconChevronVertical(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-clip.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconClip = function IconClip(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-clock.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconClock = function IconClock(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-crop.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconCrop = function IconCrop(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-cross.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconCross = function IconCross(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-download.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconDownload = function IconDownload(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-duplicate.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconDuplicate = function IconDuplicate(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({