@flodesk/grain 5.9.2 → 5.10.0

package/es/components/autocomplete.js

@@ -40,7 +40,7 @@ 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';
+import { fieldStyles, fieldXPadding, focusFieldStyles, MenuCard, MenuCardItem } from '../foundational';
 var Input = styled(Combobox.Input)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), fieldStyles({
   paddingRight: '32px'
 }), focusFieldStyles);
@@ -76,7 +76,7 @@ export var Autocomplete = function Autocomplete(_ref3) {
       _ref3$menuAlign = _ref3.menuAlign,
       menuAlign = _ref3$menuAlign === void 0 ? 'left' : _ref3$menuAlign,
       _ref3$menuWidth = _ref3.menuWidth,
-      menuWidth = _ref3$menuWidth === void 0 ? '240px' : _ref3$menuWidth,
+      menuWidth = _ref3$menuWidth === void 0 ? '100%' : _ref3$menuWidth,
       placeholder = _ref3.placeholder;
 
   var _useState = useState(defaultOption ? defaultOption : ''),
@@ -122,7 +122,7 @@ export var Autocomplete = function Autocomplete(_ref3) {
   }))), /*#__PURE__*/React.createElement(Combobox.Options, {
     menuAlign: menuAlign,
     menuWidth: menuWidth,
-    as: Menu
+    as: MenuCard
   }, filteredOptions.map(function (option, index) {
     return /*#__PURE__*/React.createElement(Combobox.Option, {
       key: index,
@@ -131,7 +131,7 @@ export var Autocomplete = function Autocomplete(_ref3) {
     }, function (_ref4) {
       var active = _ref4.active,
           selected = _ref4.selected;
-      return /*#__PURE__*/React.createElement(MenuItem, {
+      return /*#__PURE__*/React.createElement(MenuCardItem, {
         isSelected: selected,
         isActive: active
       }, option);

package/es/components/box.js

@@ -7,7 +7,7 @@ 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"];
+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", "tag"];
 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) } })); }
@@ -60,11 +60,14 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       overflow = _ref.overflow,
       aspectRatio = _ref.aspectRatio,
       zIndex = _ref.zIndex,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'div' : _ref$tag,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  var Tag = tag;
+  return /*#__PURE__*/React.createElement(Tag, 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 || paddingY), getResponsiveSpace('padding-bottom', paddingBottom || paddingY), getResponsiveSpace('padding-left', paddingLeft || paddingX), getResponsiveSpace('padding-right', paddingRight || paddingX), getResponsiveSpace('margin', margin), getResponsiveSpace('margin-top', marginTop || marginY), getResponsiveSpace('margin-bottom', marginBottom || marginY), getResponsiveSpace('margin-left', marginLeft || marginX), getResponsiveSpace('margin-right', marginRight || marginX), 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)
+    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 || paddingY), getResponsiveSpace('padding-bottom', paddingBottom || paddingY), getResponsiveSpace('padding-left', paddingLeft || paddingX), getResponsiveSpace('padding-right', paddingRight || paddingX), getResponsiveSpace('margin', margin), getResponsiveSpace('margin-top', marginTop || marginY), getResponsiveSpace('margin-bottom', marginBottom || marginY), getResponsiveSpace('margin-left', marginLeft || marginX), getResponsiveSpace('margin-right', marginRight || marginX), 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 = {

package/es/components/dropdown.js

@@ -0,0 +1,49 @@
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.array.map.js";
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Box } from '.';
+import { Menu } from '@headlessui/react';
+import { types } from '../types';
+import { MenuCard, MenuCardItem } from '../foundational';
+
+var Root = function Root(_ref) {
+  var props = Object.assign({}, _ref);
+  return /*#__PURE__*/React.createElement(Box, Object.assign({
+    position: "relative"
+  }, props));
+};
+
+export var Dropdown = function Dropdown(_ref2) {
+  var options = _ref2.options,
+      _ref2$menuAlign = _ref2.menuAlign,
+      menuAlign = _ref2$menuAlign === void 0 ? 'left' : _ref2$menuAlign,
+      _ref2$menuWidth = _ref2.menuWidth,
+      menuWidth = _ref2$menuWidth === void 0 ? 'auto' : _ref2$menuWidth,
+      trigger = _ref2.trigger;
+  return /*#__PURE__*/React.createElement(Menu, {
+    as: Root
+  }, /*#__PURE__*/React.createElement(Menu.Button, {
+    as: "div"
+  }, trigger), /*#__PURE__*/React.createElement(Menu.Items, {
+    as: MenuCard,
+    menuAlign: menuAlign,
+    menuWidth: menuWidth
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      key: index
+    }, function (_ref3) {
+      var active = _ref3.active;
+      return /*#__PURE__*/React.createElement(MenuCardItem, {
+        icon: option.icon,
+        isActive: active,
+        onClick: option.onClick
+      }, option.content);
+    });
+  })));
+};
+Dropdown.propTypes = {
+  options: PropTypes.array,
+  menuAlign: PropTypes.oneOf(['left', 'right']),
+  menuWidth: types.dimension
+};

package/es/components/index.js

@@ -14,4 +14,6 @@ export { Stack } from './stack';
 export { Slider } from './slider';
 export { Spinner } from './spinner';
 export { Switch } from './switch';
-export { Autocomplete } from './autocomplete';
+export { Autocomplete } from './autocomplete';
+export { MultiAutocomplete } from './multi-autocomplete';
+export { Dropdown } from './dropdown';

package/es/components/multi-autocomplete.js

@@ -0,0 +1,189 @@
+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, _templateObject2, _templateObject3;
+
+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, { forwardRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { Icon, Box, Text, Arrange } from '.';
+import { IconChevronDown, IconCross } from '../icons';
+import { Combobox } from '@headlessui/react';
+import { types } from '../types';
+import { ClearButtonBox, fieldStyles, fieldXPadding, focusFieldStyles, MenuCard, MenuCardItem } 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 = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var props = Object.assign({}, _ref2);
+  return /*#__PURE__*/React.createElement(Box, Object.assign({
+    ref: ref
+  }, props, {
+    position: "relative"
+  }));
+});
+
+var EmptyState = function EmptyState() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "s"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "content2"
+  }, "No results"));
+};
+
+var Tags = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: start;\n  gap: 4px;\n  margin-bottom: 8px;\n  flex-wrap: wrap;\n"])));
+var RemoveButton = styled(ClearButtonBox)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
+
+var Tag = function Tag(_ref3) {
+  var children = _ref3.children,
+      onRemoveClick = _ref3.onRemoveClick;
+  return /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "fade1",
+    radius: "s",
+    height: "32px",
+    paddingLeft: "12px",
+    paddingRight: "8px"
+  }, /*#__PURE__*/React.createElement(Arrange, {
+    gap: "4px",
+    height: "100%"
+  }, children, /*#__PURE__*/React.createElement(RemoveButton, {
+    onClick: function onClick() {
+      return onRemoveClick();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconCross, null),
+    size: "s"
+  }))));
+};
+
+export var MultiAutocomplete = function MultiAutocomplete(_ref4) {
+  var options = _ref4.options,
+      _ref4$defaultOptions = _ref4.defaultOptions,
+      defaultOptions = _ref4$defaultOptions === void 0 ? [] : _ref4$defaultOptions,
+      onChange = _ref4.onChange,
+      _ref4$menuAlign = _ref4.menuAlign,
+      menuAlign = _ref4$menuAlign === void 0 ? 'left' : _ref4$menuAlign,
+      _ref4$menuWidth = _ref4.menuWidth,
+      menuWidth = _ref4$menuWidth === void 0 ? '100%' : _ref4$menuWidth,
+      placeholder = _ref4.placeholder;
+
+  var _useState = useState(defaultOptions),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedOptions = _useState2[0],
+      setSelectedOptions = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      query = _useState4[0],
+      setQuery = _useState4[1];
+
+  var handleChange = function handleChange(option) {
+    setSelectedOptions(option);
+    onChange && onChange(option);
+    setQuery('');
+  };
+
+  var filteredOptions = query === '' ? options : options.filter(function (option) {
+    return option.content.toLowerCase().includes(query.toLowerCase());
+  });
+
+  var deselectOption = function deselectOption(option) {
+    var remaining = selectedOptions.filter(function (item) {
+      return item !== option;
+    });
+    setSelectedOptions(remaining);
+  };
+
+  return /*#__PURE__*/React.createElement(Combobox, {
+    as: Root,
+    value: selectedOptions,
+    onChange: handleChange,
+    multiple: true
+  }, selectedOptions.length > 0 && /*#__PURE__*/React.createElement(Tags, null, selectedOptions.map(function (option) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      onRemoveClick: function onRemoveClick() {
+        return deselectOption(option);
+      },
+      key: option.id
+    }, option.content);
+  })), /*#__PURE__*/React.createElement(Combobox.Button, {
+    as: Trigger
+  }, /*#__PURE__*/React.createElement(Input, {
+    autoComplete: "off",
+    onChange: function onChange(event) {
+      return setQuery(event.target.value);
+    },
+    placeholder: placeholder
+  }), /*#__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, {
+    menuAlign: menuAlign,
+    menuWidth: menuWidth,
+    as: MenuCard
+  }, filteredOptions.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(Combobox.Option, {
+      key: index,
+      value: option,
+      as: React.Fragment
+    }, function (_ref5) {
+      var active = _ref5.active,
+          selected = _ref5.selected;
+      return /*#__PURE__*/React.createElement(MenuCardItem, {
+        isSelected: selected,
+        isActive: active
+      }, option.content);
+    });
+  }), !Boolean(filteredOptions.length) && /*#__PURE__*/React.createElement(EmptyState, null)));
+};
+MultiAutocomplete.propTypes = {
+  options: PropTypes.array,
+  defaultOption: PropTypes.object,
+  onChange: PropTypes.func,
+  menuAlign: PropTypes.oneOf(['left', 'right']),
+  menuWidth: types.dimension
+};

package/es/components/select.js

@@ -45,7 +45,7 @@ import { IconChevronDown } from '../icons';
 import { Listbox } from '@headlessui/react';
 import { getColor, getRadius } from '../utilities';
 import { types } from '../types';
-import { fieldXPadding, Menu, MenuItem, textBoxHeight, transitions } from '../foundational';
+import { fieldXPadding, MenuCard, MenuCardItem, textBoxHeight, transitions } from '../foundational';
 var SelectButtonWrapper = styled(Listbox.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n\n  &:hover {\n    background: ", ";\n  }\n"])), transitions, getColor('fade1'), fieldXPadding, textBoxHeight, getRadius('s'), getColor('fade2'));
 
 var SelectButton = function SelectButton(_ref) {
@@ -76,7 +76,7 @@ export var Select = function Select(_ref3) {
       _ref3$menuAlign = _ref3.menuAlign,
       menuAlign = _ref3$menuAlign === void 0 ? 'left' : _ref3$menuAlign,
       _ref3$menuWidth = _ref3.menuWidth,
-      menuWidth = _ref3$menuWidth === void 0 ? '240px' : _ref3$menuWidth;
+      menuWidth = _ref3$menuWidth === void 0 ? '100%' : _ref3$menuWidth;
 
   var _useState = useState(defaultOption || ''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -95,7 +95,7 @@ export var Select = function Select(_ref3) {
   }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption), /*#__PURE__*/React.createElement(Listbox.Options, {
     menuAlign: menuAlign,
     menuWidth: menuWidth,
-    as: Menu
+    as: MenuCard
   }, options.map(function (option, index) {
     return /*#__PURE__*/React.createElement(Listbox.Option, {
       key: index,
@@ -104,7 +104,7 @@ export var Select = function Select(_ref3) {
     }, function (_ref4) {
       var active = _ref4.active,
           selected = _ref4.selected;
-      return /*#__PURE__*/React.createElement(MenuItem, {
+      return /*#__PURE__*/React.createElement(MenuCardItem, {
         isSelected: selected,
         isActive: active
       }, option);

package/es/foundational/index.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", "isSelected", "isActive"];
+var _excluded = ["children", "isSelected", "isActive", "icon"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
@@ -36,31 +36,42 @@ export var fieldStyles = function fieldStyles(_ref) {
   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) {
+export var MenuCard = 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 MenuItemWrapper = styled.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  grid-template-columns: ", ";\n  ", ";\n  align-items: center;\n  justify-content: start;\n  list-style: none;\n  padding: 0 12px;\n  min-height: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  appearance: none;\n"])), function (p) {
+  return p.hasIcon ? 'auto 1fr' : '1fr auto';
+}, function (p) {
+  return (p.hasIcon || p.isSelected) && 'gap: 8px';
+}, textBoxHeight, getRadius('s'));
+export var MenuCardItem = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var children = _ref4.children,
       isSelected = _ref4.isSelected,
       isActive = _ref4.isActive,
+      icon = _ref4.icon,
       props = _objectWithoutProperties(_ref4, _excluded);
 
   return /*#__PURE__*/React.createElement(MenuItemWrapper, Object.assign({
     ref: ref,
     isActive: isActive,
+    isSelected: isSelected,
     style: {
       background: isActive ? getColor('overlay') : undefined
-    }
-  }, props), /*#__PURE__*/React.createElement(Text, {
+    },
+    hasIcon: Boolean(icon)
+  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    hasEvenBoundary: true
+  }), /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    tag: "span"
+  }, /*#__PURE__*/React.createElement(Text, {
     hasEllipsis: true
-  }, children), isSelected && /*#__PURE__*/React.createElement(Box, {
-    marginLeft: "auto"
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, children)), isSelected && /*#__PURE__*/React.createElement(Icon, {
     icon: /*#__PURE__*/React.createElement(IconCheck, null)
-  })));
+  }));
 });

package/package.json

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