@flodesk/grain 5.8.0 → 5.9.0

package/es/components/arrange.js

@@ -1,44 +1,25 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-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", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "autoFlow", "width", "height"];
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
 
 var _templateObject;
 
+var _excluded = ["children", "gap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "autoFlow", "width", "height"];
 import "core-js/modules/es.object.assign.js";
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 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; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 import { getResponsiveDimension, getResponsiveGridColumns, getResponsiveSpace } from '../utilities';
 import React from 'react';
-import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import { types } from '../types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  ", ";\n  ", ";\n  ", ";\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);
-}, function (p) {
-  return getResponsiveGridColumns(p.columns);
-}, function (p) {
-  return p.justifyItems;
-}, function (p) {
-  return p.alignItems;
-}, function (p) {
-  return p.justifyContent;
-}, function (p) {
-  return p.alignContent;
-}, function (p) {
-  return getResponsiveDimension('width', p.width);
-}, function (p) {
-  return getResponsiveDimension('height', p.height);
-});
 export var Arrange = function Arrange(_ref) {
   var children = _ref.children,
       gap = _ref.gap,
@@ -55,16 +36,8 @@ export var Arrange = function Arrange(_ref) {
       height = _ref.height,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
-    gap: gap,
-    columns: columns,
-    autoFlow: autoFlow,
-    alignItems: alignItems,
-    justifyItems: justifyItems,
-    justifyContent: justifyContent,
-    alignContent: alignContent,
-    width: width,
-    height: height
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: grid;\n      ", ";\n      ", ";\n      ", ";\n      justify-items: ", ";\n      align-items: ", ";\n      justify-content: ", ";\n      align-content: ", ";\n      ", ";\n      ", ";\n    "])), !columns && "grid-auto-flow: ".concat(autoFlow), getResponsiveSpace('gap', gap), getResponsiveGridColumns(columns), justifyItems, alignItems, justifyContent, alignContent, getResponsiveDimension('width', width), getResponsiveDimension('height', height))
   }, props), children);
 };
 Arrange.propTypes = {

package/es/components/autocomplete.js

@@ -0,0 +1,138 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.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.from.js";
+import "core-js/modules/es.regexp.exec.js";
+
+var _templateObject;
+
+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 "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.map.js";
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { Icon, Box, Text } from '.';
+import { IconChevronDown } from '../icons';
+import { Combobox } from '@headlessui/react';
+import { types } from '../types';
+import { fieldStyles, fieldXPadding, focusFieldStyles, Menu, MenuItem } from '../foundational';
+var Input = styled(Combobox.Input)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), fieldStyles({
+  paddingRight: '32px'
+}), focusFieldStyles);
+
+var Root = function Root(_ref) {
+  var props = Object.assign({}, _ref);
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    position: "relative"
+  }));
+};
+
+var Trigger = function Trigger(_ref2) {
+  var props = Object.assign({}, _ref2);
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    position: "relative"
+  }));
+};
+
+var EmptyState = function EmptyState() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "s"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "content2"
+  }, "No results"));
+};
+
+export var Autocomplete = function Autocomplete(_ref3) {
+  var options = _ref3.options,
+      defaultOption = _ref3.defaultOption,
+      onChange = _ref3.onChange;
+
+  var _useState = useState(defaultOption || {}),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedOption = _useState2[0],
+      setSelectedOption = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      query = _useState4[0],
+      setQuery = _useState4[1];
+
+  var handleChange = function handleChange(option) {
+    setSelectedOption(option);
+    onChange && onChange(option);
+    setQuery('');
+  };
+
+  var filteredOptions = query === '' ? options : options.filter(function (option) {
+    return option.value.toLowerCase().includes(query.toLowerCase());
+  });
+  return /*#__PURE__*/React.createElement(Combobox, {
+    as: Root,
+    value: selectedOption,
+    onChange: handleChange
+  }, /*#__PURE__*/React.createElement(Combobox.Button, {
+    as: Trigger
+  }, /*#__PURE__*/React.createElement(Input, {
+    autocomplete: "off",
+    onChange: function onChange(event) {
+      return setQuery(event.target.value);
+    },
+    placeholder: "Start typing"
+  }), /*#__PURE__*/React.createElement(Box, {
+    right: fieldXPadding,
+    position: "absolute",
+    top: "0px",
+    bottom: "0px",
+    margin: "auto",
+    height: "fit-content"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
+  }))), /*#__PURE__*/React.createElement(Combobox.Options, {
+    as: Menu
+  }, filteredOptions.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(Combobox.Option, {
+      key: index,
+      value: option.value,
+      as: React.Fragment
+    }, function (_ref4) {
+      var active = _ref4.active,
+          selected = _ref4.selected;
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        isSelected: selected,
+        isActive: active
+      }, option.content);
+    });
+  }), !Boolean(filteredOptions.length) && /*#__PURE__*/React.createElement(EmptyState, null)));
+};
+Autocomplete.propTypes = {
+  options: PropTypes.array,
+  defaultOption: PropTypes.object,
+  onChange: PropTypes.func,
+  menuAlign: PropTypes.oneOf(['left', 'right']),
+  menuWidth: types.dimension
+};

package/es/components/box.js

@@ -1,86 +1,27 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-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", "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", "zIndex"];
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
 
 var _templateObject;
 
+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", "zIndex"];
 import "core-js/modules/es.object.assign.js";
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 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; }
 
-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, { forwardRef } from 'react';
+import { css } from '@emotion/react';
 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  ", ";\n"])), function (p) {
-  return getBorder(p.borderSide, p.borderWidth, p.borderColor);
-}, function (p) {
-  return getResponsiveSpace('padding', p.padding);
-}, function (p) {
-  return getResponsiveSpace('padding-top', p.paddingTop);
-}, function (p) {
-  return getResponsiveSpace('padding-bottom', p.paddingBottom);
-}, function (p) {
-  return getResponsiveSpace('padding-left', p.paddingLeft);
-}, function (p) {
-  return getResponsiveSpace('padding-right', p.paddingRight);
-}, function (p) {
-  return getResponsiveSpace('margin', p.margin);
-}, function (p) {
-  return getResponsiveSpace('margin-top', p.marginTop);
-}, function (p) {
-  return getResponsiveSpace('margin-bottom', p.marginBottom);
-}, function (p) {
-  return getResponsiveSpace('margin-left', p.marginLeft);
-}, function (p) {
-  return getResponsiveSpace('margin-right', p.marginRight);
-}, function (p) {
-  return getResponsiveSpace('top', p.top);
-}, function (p) {
-  return getResponsiveSpace('bottom', p.bottom);
-}, function (p) {
-  return getResponsiveSpace('left', p.left);
-}, function (p) {
-  return getResponsiveSpace('right', p.right);
-}, function (p) {
-  return getResponsiveDimension('width', p.width);
-}, function (p) {
-  return getResponsiveDimension('min-width', p.minWidth);
-}, function (p) {
-  return getResponsiveDimension('max-width', p.maxWidth);
-}, function (p) {
-  return getResponsiveDimension('height', p.height);
-}, function (p) {
-  return getResponsiveDimension('min-height', p.minHeight);
-}, function (p) {
-  return getResponsiveDimension('max-height', p.maxHeight);
-}, function (p) {
-  return getColor(p.color);
-}, function (p) {
-  return getColor(p.backgroundColor);
-}, function (p) {
-  return p.position;
-}, function (p) {
-  return getRadius(p.radius);
-}, function (p) {
-  return getShadow(p.shadow);
-}, function (p) {
-  return p.overflow;
-}, function (p) {
-  return p.aspectRatio;
-}, function (p) {
-  return p.zIndex && "z-index: ".concat(p.zIndex);
-});
-export var Box = function Box(_ref) {
+export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       color = _ref.color,
       backgroundColor = _ref.backgroundColor,
@@ -121,40 +62,11 @@ export var Box = function Box(_ref) {
       zIndex = _ref.zIndex,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
-    backgroundColor: backgroundColor,
-    color: color,
-    borderSide: borderSide,
-    borderWidth: borderWidth,
-    borderColor: borderColor,
-    width: width,
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    height: height,
-    minHeight: minHeight,
-    maxHeight: maxHeight,
-    radius: radius,
-    padding: padding,
-    paddingTop: paddingY || paddingTop,
-    paddingBottom: paddingY || paddingBottom,
-    paddingLeft: paddingX || paddingLeft,
-    paddingRight: paddingX || paddingRight,
-    margin: margin,
-    marginTop: marginY || marginTop,
-    marginBottom: marginY || marginBottom,
-    marginLeft: marginX || marginLeft,
-    marginRight: marginX || marginRight,
-    position: position,
-    top: top,
-    bottom: bottom,
-    left: left,
-    right: right,
-    shadow: shadow,
-    overflow: overflow,
-    aspectRatio: aspectRatio,
-    zIndex: zIndex
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    css: css(_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        position: ", ";\n        border-radius: ", ";\n        box-shadow: ", ";\n        overflow: ", ";\n        aspect-ratio: ", ";\n        z-index: ", ";\n      "])), getBorder(borderSide, borderWidth, borderColor), getResponsiveSpace('padding', padding), getResponsiveSpace('padding-top', paddingTop), getResponsiveSpace('padding-bottom', paddingBottom), getResponsiveSpace('padding-left', paddingLeft), getResponsiveSpace('padding-right', paddingRight), getResponsiveSpace('margin', margin), getResponsiveSpace('margin-top', marginTop), getResponsiveSpace('margin-bottom', marginBottom), getResponsiveSpace('margin-left', marginLeft), getResponsiveSpace('margin-right', marginRight), getResponsiveSpace('top', top), getResponsiveSpace('bottom', bottom), getResponsiveSpace('left', left), getResponsiveSpace('right', right), getResponsiveDimension('width', width), getResponsiveDimension('min-width', minWidth), getResponsiveDimension('max-width', maxWidth), getResponsiveDimension('height', height), getResponsiveDimension('min-height', minHeight), getResponsiveDimension('max-height', maxHeight), getColor(color), getColor(backgroundColor), position, getRadius(radius), getShadow(shadow), overflow, aspectRatio, zIndex)
   }, props), children);
-};
+});
 Box.propTypes = {
   color: types.color,
   backgroundColor: types.color,

package/es/components/index.js

@@ -13,4 +13,5 @@ export { Select } from './select';
 export { Stack } from './stack';
 export { Slider } from './slider';
 export { Spinner } from './spinner';
-export { Switch } from './switch';
+export { Switch } from './switch';
+export { Autocomplete } from './autocomplete';

package/es/components/select.js

@@ -12,10 +12,9 @@ import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
-var _excluded = ["children"],
-    _excluded2 = ["children", "isSelected", "isActive"];
+var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -42,11 +41,12 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { Icon, Box, Text } from '.';
-import { IconCheck, IconChevronDown } from '../icons';
+import { IconChevronDown } from '../icons';
 import { Listbox } from '@headlessui/react';
-import { getColor, getRadius, getShadow } from '../utilities';
-var Options = styled(Listbox.Options)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px;\n  margin: 0;\n  position: absolute;\n  background: white;\n  box-shadow: ", ";\n  border-radius: ", ";\n  max-height: 468px;\n  min-width: 160px;\n  max-width: 240px;\n  overflow: auto;\n\n  &:focus {\n    outline: none;\n  }\n"])), getShadow('m'), getRadius('s'));
-var SelectButtonWrapper = styled(Listbox.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 var(--grn-fieldXPadding);\n  min-height: var(--grn-textBoxHeight-m);\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  max-width: 100%;\n  text-align: left;\n"])), getColor('fade1'), getRadius('s'));
+import { getColor, getRadius } from '../utilities';
+import { types } from '../types';
+import { Menu, MenuItem } from '../foundational';
+var SelectButtonWrapper = styled(Listbox.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 var(--grn-fieldXPadding);\n  min-height: var(--grn-textBoxHeight-m);\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n"])), getColor('fade1'), getRadius('s'));
 
 var SelectButton = function SelectButton(_ref) {
   var children = _ref.children,
@@ -55,38 +55,30 @@ var SelectButton = function SelectButton(_ref) {
   return /*#__PURE__*/React.createElement(SelectButtonWrapper, props, /*#__PURE__*/React.createElement(Text, {
     hasEllipsis: true,
     weight: "medium"
-  }, children), /*#__PURE__*/React.createElement(Icon, {
+  }, children), /*#__PURE__*/React.createElement(Box, {
+    marginLeft: "auto"
+  }, /*#__PURE__*/React.createElement(Icon, {
     icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
+  })));
+};
+
+var SelectRoot = function SelectRoot(_ref2) {
+  var props = Object.assign({}, _ref2);
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    position: "relative"
   }));
 };
 
-var MenuItemWrapper = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  gap: 8px;\n  align-items: center;\n  list-style: none;\n  padding: 0 1rem;\n  min-height: var(--grn-textBoxHeight-m);\n  cursor: pointer;\n  border-radius: ", ";\n"])), getRadius('s'));
-var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      isSelected = _ref2.isSelected,
-      isActive = _ref2.isActive,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  return /*#__PURE__*/React.createElement(MenuItemWrapper, Object.assign({
-    ref: ref,
-    isActive: isActive,
-    style: {
-      background: isActive ? getColor('overlay') : undefined
-    }
-  }, props), /*#__PURE__*/React.createElement(Text, {
-    hasEllipsis: true
-  }, children), isSelected && /*#__PURE__*/React.createElement(Box, {
-    marginLeft: "auto"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(IconCheck, null)
-  })));
-});
 export var Select = function Select(_ref3) {
   var options = _ref3.options,
       defaultOption = _ref3.defaultOption,
-      onChange = _ref3.onChange;
+      onChange = _ref3.onChange,
+      _ref3$menuAlign = _ref3.menuAlign,
+      menuAlign = _ref3$menuAlign === void 0 ? 'left' : _ref3$menuAlign,
+      _ref3$menuWidth = _ref3.menuWidth,
+      menuWidth = _ref3$menuWidth === void 0 ? '240px' : _ref3$menuWidth;
 
-  var _useState = useState(defaultOption || options[0]),
+  var _useState = useState(defaultOption || {}),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -97,11 +89,16 @@ export var Select = function Select(_ref3) {
   };
 
   return /*#__PURE__*/React.createElement(Listbox, {
+    as: SelectRoot,
     value: selectedOption,
     onChange: handleChange
-  }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption.content), /*#__PURE__*/React.createElement(Options, null, options.map(function (option, index) {
+  }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption.content), /*#__PURE__*/React.createElement(Listbox.Options, {
+    menuAlign: menuAlign,
+    menuWidth: menuWidth,
+    as: Menu
+  }, options.map(function (option) {
     return /*#__PURE__*/React.createElement(Listbox.Option, {
-      key: index,
+      key: option.id,
       value: option,
       as: React.Fragment
     }, function (_ref4) {
@@ -117,5 +114,7 @@ export var Select = function Select(_ref3) {
 Select.propTypes = {
   options: PropTypes.array,
   defaultOption: PropTypes.object,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  menuAlign: PropTypes.oneOf(['left', 'right']),
+  menuWidth: types.dimension
 };

package/es/components/text-input.js

@@ -36,25 +36,25 @@ 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 } from '../utilities';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { Box, Text } from '.';
 import { Icon } from './icon';
-import { transitions } from '../foundational';
+import { fieldStyles, focusFieldStyles } from '../foundational';
 var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor: var(--grn-color-fade3);\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldBorderColor-focus: var(--grn-color-grey6);\n"])));
 var iconOffsetPx = 12;
 var iconTextGapPx = 8;
 var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), variables);
 var Label = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: 4px;\n"])));
-var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  background-color: transparent;\n  transition-property: border-color;\n  width: 100%;\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-fieldXPadding) 0 ", ";\n  outline: none;\n  border: 1px solid ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", "\n"])), transitions, getRadius('s'), function (p) {
-  return p.paddingLeft;
+var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n"])), function (p) {
+  return fieldStyles({
+    paddingLeft: p.paddingLeft,
+    borderColor: p.hasError ? 'var(--grn-color-danger)' : 'var(--grn-fieldBorderColor)'
+  });
 }, function (p) {
-  return p.hasError ? 'var(--grn-color-danger)' : 'var(--grn-fieldBorderColor)';
-}, getColor('grey5'), function (p) {
-  return !p.hasError && "\n    &:hover {\n      border-color: var(--grn-fieldBorderColor-hover);\n    }\n\n    &:focus {\n      transition: 0s;\n      border-color: var(--grn-fieldBorderColor-focus);\n    }\n  ";
+  return !p.hasError && focusFieldStyles;
 });
 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"])), iconOffsetPx);
 export var TextInput = function TextInput(_ref) {

package/es/components/text.js

@@ -1,41 +1,26 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-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", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align"];
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
 
 var _templateObject;
 
+var _excluded = ["children", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align"];
 import "core-js/modules/es.object.assign.js";
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 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; }
 
-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 { css } from '@emotion/react';
 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) {
-  return getResponsiveTextSize(p.size);
-}, function (p) {
-  return getWeight(p.weight);
-}, function (p) {
-  return getColor(p.color);
-}, function (p) {
-  return p.align;
-}, function (p) {
-  return p.hasEllipsis && "\n    overflow: hidden;\n    text-overflow: ellipsis;\n  ";
-}, function (p) {
-  return p.hasEllipsis && !p.ellipsisLines && "\n    white-space: nowrap;\n  ";
-}, function (p) {
-  return p.hasEllipsis && p.ellipsisLines && "\n    display: -webkit-box;\n    -webkit-line-clamp: ".concat(p.ellipsisLines, ";\n    -webkit-box-orient: vertical;\n  ");
-});
 export var Text = function Text(_ref) {
   var children = _ref.children,
       _ref$size = _ref.size,
@@ -50,14 +35,9 @@ export var Text = function Text(_ref) {
       align = _ref.align,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
-    size: size,
-    weight: weight,
-    color: color,
-    as: tag,
-    hasEllipsis: hasEllipsis,
-    ellipsisLines: ellipsisLines,
-    align: align
+  var Tag = tag;
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: block;\n        ", ";\n        font-weight: ", ";\n        color: ", ";\n        text-align: ", ";\n\n        ", ";\n\n        ", ";\n      "])), getResponsiveTextSize(size), getWeight(weight), getColor(color), align, hasEllipsis && "\n          overflow: hidden;\n          text-overflow: ellipsis;\n          ".concat(!ellipsisLines && "white-space: nowrap", ";\n        "), hasEllipsis && ellipsisLines && "\n          display: -webkit-box;\n          -webkit-line-clamp: ".concat(ellipsisLines, ";\n          -webkit-box-orient: vertical;\n        "))
   }, props), children);
 };
 Text.propTypes = {

package/es/foundational/index.js

@@ -1,13 +1,65 @@
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.object.freeze.js";
 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", "isSelected", "isActive"];
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+import "core-js/modules/es.object.assign.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; }
 
 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 { css } from '@emotion/react';
-import { getColor, getRadius, getTransition, getWeight } from '../utilities';
+import { getColor, getDimension, getRadius, getShadow, getTransition, getWeight } from '../utilities';
+import { Box, Icon, Text } from '../components';
+import { IconCheck } from '../icons';
+import { forwardRef } from 'react';
+export var fieldXPadding = '12px';
 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-backgroundOverlay);\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('contentDisabled'));
+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-backgroundOverlay);\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('contentDisabled'));
+export var fieldStyles = function fieldStyles(_ref) {
+  var _ref$paddingLeft = _ref.paddingLeft,
+      paddingLeft = _ref$paddingLeft === void 0 ? '12px' : _ref$paddingLeft,
+      _ref$paddingRight = _ref.paddingRight,
+      paddingRight = _ref$paddingRight === void 0 ? '12px' : _ref$paddingRight,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? 'var(--grn-color-fade3)' : _ref$borderColor;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldBorderColor-focus: var(--grn-color-grey6);\n\n  ", ";\n  appearance: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  background-color: transparent;\n  transition-property: border-color;\n  width: 100%;\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 ", " 0 ", ";\n  outline: none;\n  border: 1px solid ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), transitions, getRadius('s'), paddingRight, paddingLeft, borderColor, getColor('grey5'));
+};
+export var focusFieldStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:hover {\n    border-color: var(--grn-fieldBorderColor-hover);\n  }\n\n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-fieldBorderColor-focus);\n  }\n"])));
+export var Menu = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 8px;\n  margin: 0;\n  position: absolute;\n  background: white;\n  box-shadow: ", ";\n  border-radius: ", ";\n  max-height: 468px;\n  overflow: auto;\n  width: ", ";\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"])), getShadow('m'), getRadius('s'), function (_ref2) {
+  var menuWidth = _ref2.menuWidth;
+  return getDimension(menuWidth);
+}, function (_ref3) {
+  var menuAlign = _ref3.menuAlign;
+  return "".concat(menuAlign, ": 0;");
+});
+var MenuItemWrapper = styled.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  gap: 8px;\n  align-items: center;\n  list-style: none;\n  padding: 0 1rem;\n  min-height: var(--grn-textBoxHeight-m);\n  cursor: pointer;\n  border-radius: ", ";\n"])), getRadius('s'));
+export var MenuItem = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+      isSelected = _ref4.isSelected,
+      isActive = _ref4.isActive,
+      props = _objectWithoutProperties(_ref4, _excluded);
+
+  return /*#__PURE__*/React.createElement(MenuItemWrapper, Object.assign({
+    ref: ref,
+    isActive: isActive,
+    style: {
+      background: isActive ? getColor('overlay') : undefined
+    }
+  }, props), /*#__PURE__*/React.createElement(Text, {
+    hasEllipsis: true
+  }, children), isSelected && /*#__PURE__*/React.createElement(Box, {
+    marginLeft: "auto"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconCheck, null)
+  })));
+});

package/es/hooks/index.js

@@ -1 +1,3 @@
-export { useMedia } from './useMedia';
+export { useMedia } from './useMedia';
+export { useKeyPress } from './useKeyPress';
+export { useOnClickOutside } from './useOnClickOutside';

package/es/hooks/useKeyPress.js

@@ -0,0 +1,56 @@
+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 function useKeyPress(targetKey) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      keyPressed = _useState2[0],
+      setKeyPressed = _useState2[1];
+
+  function downHandler(_ref) {
+    var key = _ref.key;
+
+    if (key === targetKey) {
+      setKeyPressed(true);
+    }
+  }
+
+  var upHandler = function upHandler(_ref2) {
+    var key = _ref2.key;
+
+    if (key === targetKey) {
+      setKeyPressed(false);
+    }
+  };
+
+  useEffect(function () {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return function () {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []);
+  return keyPressed;
+}

package/es/hooks/useOnClickOutside.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export function useOnClickOutside(ref, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
@@ -23,7 +23,6 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@headlessui/react": "^1.6.6",
     "core-js": "^3.22.8",
     "prop-types": "^15.8.1"
   },
@@ -36,6 +35,8 @@
     "@babel/plugin-transform-runtime": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
+    "@emotion/babel-preset-css-prop": "^11.10.0",
+    "@headlessui/react": "^1.6.6",
     "@mdx-js/loader": "^2.1.1",
     "@next/mdx": "^12.1.6",
     "@semantic-release/git": "^10.0.1",