@flodesk/grain 10.17.4 → 10.19.0

package/es/components/arrange.js

@@ -1,8 +1,5 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.object.assign.js";
-var _excluded = ["children", "gap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "rows", "autoFlow", "width", "height"];
+import _styled from "@emotion/styled/base";
+var _excluded = ["children", "gap", "columnGap", "rowGap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "rows", "autoFlow"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,42 +7,85 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import { getResponsiveDimension, getResponsiveOneOf, getResponsiveSpace } from '../utilities';
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
+import { getResponsiveOneOf, getResponsiveSpace } from '../utilities';
 import React, { forwardRef } from 'react';
-import { css } from '@emotion/react';
 import { types } from '../types';
+import { Box } from './box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      gap = _ref.gap,
-      _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,
-      columns = _ref.columns,
-      rows = _ref.rows,
-      _ref$autoFlow = _ref.autoFlow,
-      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
-      width = _ref.width,
-      height = _ref.height,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return ___EmotionJSX("div", _extends({
-    ref: ref,
-    css: /*#__PURE__*/css("display:grid;", !columns && getResponsiveOneOf('grid-auto-flow', autoFlow), ";", getResponsiveSpace('gap', gap), ";", getResponsiveOneOf('grid-template-columns', columns), ";", getResponsiveOneOf('grid-template-rows', rows), ";", getResponsiveOneOf('justify-items', justifyItems), ";", getResponsiveOneOf('align-items', alignItems), ";", getResponsiveOneOf('justify-content', justifyContent), ";", getResponsiveOneOf('align-content', alignContent), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('height', height), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Arrange;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2FycmFuZ2UuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9hcnJhbmdlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldFJlc3BvbnNpdmVEaW1lbnNpb24sIGdldFJlc3BvbnNpdmVPbmVPZiwgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBBcnJhbmdlID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgZ2FwLFxuICAgICAgYWxpZ25JdGVtcyA9ICdjZW50ZXInLFxuICAgICAganVzdGlmeUl0ZW1zLFxuICAgICAganVzdGlmeUNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgYWxpZ25Db250ZW50LFxuICAgICAgY29sdW1ucyxcbiAgICAgIHJvd3MsXG4gICAgICBhdXRvRmxvdyA9ICdjb2x1bW4nLFxuICAgICAgd2lkdGgsXG4gICAgICBoZWlnaHQsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8ZGl2XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICAkeyFjb2x1bW5zICYmIGdldFJlc3BvbnNpdmVPbmVPZignZ3JpZC1hdXRvLWZsb3cnLCBhdXRvRmxvdyl9O1xuICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnZ2FwJywgZ2FwKX07XG4gICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLXRlbXBsYXRlLWNvbHVtbnMnLCBjb2x1bW5zKX07XG4gICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLXRlbXBsYXRlLXJvd3MnLCByb3dzKX07XG5cbiAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2p1c3RpZnktaXRlbXMnLCBqdXN0aWZ5SXRlbXMpfTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLWl0ZW1zJywgYWxpZ25JdGVtcyl9O1xuICAgICAgICAke2dldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1jb250ZW50JywganVzdGlmeUNvbnRlbnQpfTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLWNvbnRlbnQnLCBhbGlnbkNvbnRlbnQpfTtcblxuICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ3dpZHRoJywgd2lkdGgpfTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdoZWlnaHQnLCBoZWlnaHQpfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApLFxuKTtcblxuQXJyYW5nZS5wcm9wVHlwZXMgPSB7XG4gIGdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBjb2x1bW5zOiB0eXBlcy5yZXNwb25zaXZlQ29sdW1ucyxcbiAgcm93czogdHlwZXMucmVzcG9uc2l2ZVJvd3MsXG4gIGF1dG9GbG93OiB0eXBlcy5hdXRvRmxvdyxcbiAgYWxpZ25JdGVtczogdHlwZXMuZ3JpZEl0ZW1zQWxpZ25tZW50LFxuICBqdXN0aWZ5SXRlbXM6IHR5cGVzLmdyaWRJdGVtc0FsaWdubWVudCxcbiAganVzdGlmeUNvbnRlbnQ6IHR5cGVzLmdyaWRDb250ZW50UG9zaXRpb24sXG4gIGFsaWduQ29udGVudDogdHlwZXMuZ3JpZENvbnRlbnRQb3NpdGlvbixcbiAgd2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIGhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbn07XG4iXX0= */")
-  }, props), children);
-});
-Arrange.propTypes = {
+var gridProps = {
   gap: types.responsiveSpace,
+  columnGap: types.responsiveSpace,
+  rowGap: types.responsiveSpace,
   columns: types.responsiveColumns,
   rows: types.responsiveRows,
   autoFlow: types.autoFlow,
   alignItems: types.gridItemsAlignment,
   justifyItems: types.gridItemsAlignment,
   justifyContent: types.gridContentPosition,
-  alignContent: types.gridContentPosition,
-  width: types.responsiveDimension,
-  height: types.responsiveDimension
-};
+  alignContent: types.gridContentPosition
+};
+
+var Root = /*#__PURE__*/_styled(Box, process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !Object.keys(gridProps).includes(prop);
+  },
+  target: "e12ddjtg0"
+} : {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !Object.keys(gridProps).includes(prop);
+  },
+  target: "e12ddjtg0",
+  label: "Root"
+})("display:grid;", function (_ref) {
+  var columns = _ref.columns,
+      autoFlow = _ref.autoFlow,
+      gap = _ref.gap,
+      columnGap = _ref.columnGap,
+      rowGap = _ref.rowGap,
+      rows = _ref.rows,
+      justifyItems = _ref.justifyItems,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      alignContent = _ref.alignContent;
+  return "\n    ".concat(!columns && getResponsiveOneOf('grid-auto-flow', autoFlow), ";\n    ").concat(getResponsiveSpace('gap', gap), ";\n    ").concat(getResponsiveSpace('column-gap', columnGap), ";\n    ").concat(getResponsiveSpace('row-gap', rowGap), ";\n    ").concat(getResponsiveOneOf('grid-template-columns', columns), ";\n    ").concat(getResponsiveOneOf('grid-template-rows', rows), ";\n    ").concat(getResponsiveOneOf('justify-items', justifyItems), ";\n    ").concat(getResponsiveOneOf('align-items', alignItems), ";\n    ").concat(getResponsiveOneOf('justify-content', justifyContent), ";\n    ").concat(getResponsiveOneOf('align-content', alignContent), ";\n  ");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2FycmFuZ2UuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCRSIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9hcnJhbmdlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldFJlc3BvbnNpdmVPbmVPZiwgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5cbmNvbnN0IGdyaWRQcm9wcyA9IHtcbiAgZ2FwOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIGNvbHVtbkdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICByb3dHYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgY29sdW1uczogdHlwZXMucmVzcG9uc2l2ZUNvbHVtbnMsXG4gIHJvd3M6IHR5cGVzLnJlc3BvbnNpdmVSb3dzLFxuICBhdXRvRmxvdzogdHlwZXMuYXV0b0Zsb3csXG4gIGFsaWduSXRlbXM6IHR5cGVzLmdyaWRJdGVtc0FsaWdubWVudCxcbiAganVzdGlmeUl0ZW1zOiB0eXBlcy5ncmlkSXRlbXNBbGlnbm1lbnQsXG4gIGp1c3RpZnlDb250ZW50OiB0eXBlcy5ncmlkQ29udGVudFBvc2l0aW9uLFxuICBhbGlnbkNvbnRlbnQ6IHR5cGVzLmdyaWRDb250ZW50UG9zaXRpb24sXG59O1xuXG5jb25zdCBSb290ID0gc3R5bGVkKEJveCwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PiAhT2JqZWN0LmtleXMoZ3JpZFByb3BzKS5pbmNsdWRlcyhwcm9wKSxcbn0pYFxuICBkaXNwbGF5OiBncmlkO1xuICAkeyh7XG4gICAgY29sdW1ucyxcbiAgICBhdXRvRmxvdyxcbiAgICBnYXAsXG4gICAgY29sdW1uR2FwLFxuICAgIHJvd0dhcCxcbiAgICByb3dzLFxuICAgIGp1c3RpZnlJdGVtcyxcbiAgICBhbGlnbkl0ZW1zLFxuICAgIGp1c3RpZnlDb250ZW50LFxuICAgIGFsaWduQ29udGVudCxcbiAgfSkgPT4gYFxuICAgICR7IWNvbHVtbnMgJiYgZ2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLWF1dG8tZmxvdycsIGF1dG9GbG93KX07XG4gICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2dhcCcsIGdhcCl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdjb2x1bW4tZ2FwJywgY29sdW1uR2FwKX07XG4gICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3Jvdy1nYXAnLCByb3dHYXApfTtcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zJywgY29sdW1ucyl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLXRlbXBsYXRlLXJvd3MnLCByb3dzKX07XG4gICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2p1c3RpZnktaXRlbXMnLCBqdXN0aWZ5SXRlbXMpfTtcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignYWxpZ24taXRlbXMnLCBhbGlnbkl0ZW1zKX07XG4gICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2p1c3RpZnktY29udGVudCcsIGp1c3RpZnlDb250ZW50KX07XG4gICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLWNvbnRlbnQnLCBhbGlnbkNvbnRlbnQpfTtcbiAgYH07XG5gO1xuXG5leHBvcnQgY29uc3QgQXJyYW5nZSA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGdhcCxcbiAgICAgIGNvbHVtbkdhcCxcbiAgICAgIHJvd0dhcCxcbiAgICAgIGFsaWduSXRlbXMgPSAnY2VudGVyJyxcbiAgICAgIGp1c3RpZnlJdGVtcyxcbiAgICAgIGp1c3RpZnlDb250ZW50ID0gJ3N0YXJ0JyxcbiAgICAgIGFsaWduQ29udGVudCxcbiAgICAgIGNvbHVtbnMsXG4gICAgICByb3dzLFxuICAgICAgYXV0b0Zsb3cgPSAnY29sdW1uJyxcbiAgICAgIC4uLnByb3BzXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4gKFxuICAgIDxSb290XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGdhcD17Z2FwfVxuICAgICAgY29sdW1uR2FwPXtjb2x1bW5HYXB9XG4gICAgICByb3dHYXA9e3Jvd0dhcH1cbiAgICAgIGFsaWduSXRlbXM9e2FsaWduSXRlbXN9XG4gICAgICBqdXN0aWZ5SXRlbXM9e2p1c3RpZnlJdGVtc31cbiAgICAgIGp1c3RpZnlDb250ZW50PXtqdXN0aWZ5Q29udGVudH1cbiAgICAgIGFsaWduQ29udGVudD17YWxpZ25Db250ZW50fVxuICAgICAgY29sdW1ucz17Y29sdW1uc31cbiAgICAgIHJvd3M9e3Jvd3N9XG4gICAgICBhdXRvRmxvdz17YXV0b0Zsb3d9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvUm9vdD5cbiAgKSxcbik7XG5cbkFycmFuZ2UucHJvcFR5cGVzID0gZ3JpZFByb3BzO1xuIl19 */"));
+
+export var Arrange = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      gap = _ref2.gap,
+      columnGap = _ref2.columnGap,
+      rowGap = _ref2.rowGap,
+      _ref2$alignItems = _ref2.alignItems,
+      alignItems = _ref2$alignItems === void 0 ? 'center' : _ref2$alignItems,
+      justifyItems = _ref2.justifyItems,
+      _ref2$justifyContent = _ref2.justifyContent,
+      justifyContent = _ref2$justifyContent === void 0 ? 'start' : _ref2$justifyContent,
+      alignContent = _ref2.alignContent,
+      columns = _ref2.columns,
+      rows = _ref2.rows,
+      _ref2$autoFlow = _ref2.autoFlow,
+      autoFlow = _ref2$autoFlow === void 0 ? 'column' : _ref2$autoFlow,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return ___EmotionJSX(Root, _extends({
+    ref: ref,
+    gap: gap,
+    columnGap: columnGap,
+    rowGap: rowGap,
+    alignItems: alignItems,
+    justifyItems: justifyItems,
+    justifyContent: justifyContent,
+    alignContent: alignContent,
+    columns: columns,
+    rows: rows,
+    autoFlow: autoFlow
+  }, props), children);
+});
+Arrange.propTypes = gridProps;

package/es/components/autocomplete.js

@@ -9,7 +9,7 @@ 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";
-var _excluded = ["options", "value", "onChange", "menuPlacement", "menuWidth", "menuMaxHeight", "menuZIndex", "placeholder", "label", "hint", "menuItemsHaveEllipsis", "hasPortal"];
+var _excluded = ["options", "value", "onChange", "isCreatable", "onCreate", "menuPlacement", "menuWidth", "menuMaxHeight", "menuZIndex", "placeholder", "label", "hint", "menuItemsHaveEllipsis", "hasPortal", "hasError", "errorMessage", "searchField"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -34,17 +34,20 @@ 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.concat.js";
 import "core-js/modules/es.array.find.js";
 import "core-js/modules/es.array.map.js";
 import PropTypes from 'prop-types';
-import React, { forwardRef, Fragment, useMemo, useState } from 'react';
+import React, { forwardRef, Fragment, useMemo, useRef, useState } from 'react';
 import { Icon, Box, Text } from '.';
-import { IconChevronDown } from '../icons';
+import { IconCheck, IconChevronDown, IconPlus } from '../icons';
 import { Combobox } from '@headlessui/react';
 import { defaultProps, types } from '../types';
-import { InputField, MenuCard, MenuItem, MenuGroupTitle, FieldLabel, FieldHint } from '../foundational';
-import { useMenuPosition } from '../foundational/menu';
+import { InputField, MenuCard, MenuCardTransition, MenuGroupTitle, FieldLabel, FieldHint, componentVars } from '../foundational';
+import { MenuItemDivider, useMenuPosition } from '../foundational/menu';
 import { FloatingPortal } from '@floating-ui/react-dom-interactions';
+import { Global } from '@emotion/react';
+import { getColor, getRadius } from '../utilities';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var props = Object.assign({}, _ref);
@@ -58,7 +61,7 @@ var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var EmptyState = function EmptyState() {
   return ___EmotionJSX(Box, {
     paddingY: "s",
-    paddingX: "m"
+    paddingX: "12px"
   }, ___EmotionJSX(Text, {
     color: "content2"
   }, "No results"));
@@ -77,10 +80,10 @@ var ExpandIcon = function ExpandIcon() {
   }));
 };
 
-var getFilteredOptions = function getFilteredOptions(query, options) {
+var getFilteredOptions = function getFilteredOptions(query, options, searchField) {
   if (query === '') return options;
   return options.filter(function (option) {
-    return option.content.toLowerCase().includes(query.toLowerCase());
+    return option[searchField].toLowerCase().includes(query.toLowerCase());
   });
 };
 
@@ -90,10 +93,13 @@ var getShowGroupTitle = function getShowGroupTitle(index, option, filteredOption
   return firstOptionHasTitle || titleChanged;
 };
 
+var menuItemStyles = "\n  .autocompleteMenuItem {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    list-style: none;\n    padding: 4px 12px;\n    min-height: ".concat(componentVars.textBoxHeight, ";\n    border-radius: ").concat(getRadius('s'), ";\n    appearance: none;\n\n    &.hasPreContent {\n      padding-left: 0;\n    }\n  }\n\n  .autocompleteMenuItemText {\n    flex-grow: 1;\n\n    &.hasEllipsis {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n");
 export var Autocomplete = function Autocomplete(_ref2) {
   var options = _ref2.options,
       value = _ref2.value,
       onChange = _ref2.onChange,
+      isCreatable = _ref2.isCreatable,
+      onCreate = _ref2.onCreate,
       _ref2$menuPlacement = _ref2.menuPlacement,
       menuPlacement = _ref2$menuPlacement === void 0 ? defaultProps.menuPlacement : _ref2$menuPlacement,
       menuWidth = _ref2.menuWidth,
@@ -107,6 +113,10 @@ export var Autocomplete = function Autocomplete(_ref2) {
       menuItemsHaveEllipsis = _ref2$menuItemsHaveEl === void 0 ? true : _ref2$menuItemsHaveEl,
       _ref2$hasPortal = _ref2.hasPortal,
       hasPortal = _ref2$hasPortal === void 0 ? true : _ref2$hasPortal,
+      hasError = _ref2.hasError,
+      errorMessage = _ref2.errorMessage,
+      _ref2$searchField = _ref2.searchField,
+      searchField = _ref2$searchField === void 0 ? 'content' : _ref2$searchField,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   var _useState = useState(''),
@@ -114,19 +124,44 @@ export var Autocomplete = function Autocomplete(_ref2) {
       query = _useState2[0],
       setQuery = _useState2[1];
 
-  var handleChange = function handleChange(option) {
+  var handleCreatableChange = function handleCreatableChange(option) {
+    if (onCreate) {
+      var isCreatableOption = !options.find(function (item) {
+        return item.value === option.value;
+      });
+
+      if (isCreatableOption) {
+        onCreate(option);
+        return;
+      }
+    }
+
     onChange(option);
-    setQuery('');
   };
 
-  var filteredOptions = getFilteredOptions(query, options);
-  var noResults = !Boolean(filteredOptions.length);
+  var handleChange = function handleChange(option) {
+    if (isCreatable) {
+      handleCreatableChange(option);
+    } else {
+      onChange(option);
+    }
+  };
+
+  var filteredOptions = getFilteredOptions(query, options, searchField);
+  var isShowCreateOption = isCreatable && query.length > 0;
+  var noResults = !Boolean(filteredOptions.length) && !isShowCreateOption;
   var fieldMarginTop = label || hint ? 'betweenFormControlAndLabel' : undefined;
   var selectedOption = useMemo(function () {
     return options.find(function (option) {
       return option.value === value;
     });
   }, [options, value]);
+  var newOption = useMemo(function () {
+    return {
+      value: query,
+      content: query
+    };
+  }, [query]);
 
   var _useMenuPosition = useMenuPosition({
     menuWidth: menuWidth,
@@ -137,12 +172,27 @@ export var Autocomplete = function Autocomplete(_ref2) {
       floatingStyles = _useMenuPosition.floatingStyles;
 
   var OptionsRoot = hasPortal ? FloatingPortal : Fragment;
-  return ___EmotionJSX(Combobox, _extends({
+  var preContentRef = useRef(null);
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      preContentWidth = _useState4[0],
+      setPreContentWidth = _useState4[1];
+
+  React.useEffect(function () {
+    if (preContentRef.current) {
+      setPreContentWidth(preContentRef.current.offsetWidth);
+    }
+  }, [selectedOption, preContentRef]);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Global, {
+    styles: menuItemStyles
+  }), ___EmotionJSX(Combobox, _extends({
     as: "div",
     value: selectedOption || '',
     onChange: handleChange
   }, props), function (_ref3) {
     var open = _ref3.open;
+    var hasPreContent = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.preContent;
     return ___EmotionJSX(React.Fragment, null, label && ___EmotionJSX(Combobox.Label, {
       as: FieldLabel
     }, label), hint && ___EmotionJSX(FieldHint, null, hint), ___EmotionJSX(Box, {
@@ -151,7 +201,16 @@ export var Autocomplete = function Autocomplete(_ref2) {
       ref: reference
     }, ___EmotionJSX(Combobox.Button, {
       as: Trigger
-    }, ___EmotionJSX(Combobox.Input, {
+    }, hasPreContent && !open && ___EmotionJSX(Box, {
+      ref: preContentRef,
+      width: "fit-content",
+      position: "absolute",
+      top: "0px",
+      bottom: "0px",
+      margin: "auto",
+      height: "fit-content",
+      left: "0"
+    }, selectedOption.preContent), ___EmotionJSX(Combobox.Input, {
       as: InputField,
       autoComplete: "off",
       onChange: function onChange(event) {
@@ -161,17 +220,23 @@ export var Autocomplete = function Autocomplete(_ref2) {
       displayValue: function displayValue(option) {
         return option && option.content;
       },
-      paddingRight: "32px"
-    }), ___EmotionJSX(ExpandIcon, null)), ___EmotionJSX(OptionsRoot, null, ___EmotionJSX(Combobox.Options, {
+      paddingRight: "32px",
+      paddingLeft: !open && hasPreContent ? "".concat(preContentWidth + 8, "px") : undefined,
+      hasError: hasError
+    }), ___EmotionJSX(ExpandIcon, null)), ___EmotionJSX(OptionsRoot, null, ___EmotionJSX(MenuCardTransition, {
+      afterLeave: function afterLeave() {
+        return setQuery('');
+      }
+    }, ___EmotionJSX(Combobox.Options, {
       static: true,
-      isOpen: open,
       className: "grn-context",
       ref: floating,
       placement: menuPlacement,
       maxHeight: menuMaxHeight,
       as: MenuCard,
       zIndex: menuZIndex,
-      style: floatingStyles
+      style: floatingStyles,
+      isDisabled: !open
     }, filteredOptions.map(function (option, index) {
       var showGroupTitle = getShowGroupTitle(index, option, filteredOptions);
       return ___EmotionJSX(Fragment, {
@@ -184,22 +249,59 @@ export var Autocomplete = function Autocomplete(_ref2) {
         disabled: option.isDisabled
       }, function (_ref4) {
         var active = _ref4.active;
-        return ___EmotionJSX(MenuItem, {
-          isSelected: option.value === value,
-          isActive: !option.isDisabled && active,
-          isDisabled: option.isDisabled,
-          hasEllipsis: menuItemsHaveEllipsis
-        }, option.content);
+        var isDisabled = option.isDisabled;
+        var isSelected = option.value === value;
+        var isActive = !option.isDisabled && active;
+        var hasEllipsis = menuItemsHaveEllipsis;
+        var hasPreContent = option.preContent;
+        return ___EmotionJSX("li", {
+          className: hasPreContent ? 'autocompleteMenuItem hasPreContent' : 'autocompleteMenuItem',
+          style: {
+            backgroundColor: isActive && getColor('fade1'),
+            color: isDisabled && getColor('disabledContent'),
+            cursor: !isDisabled && 'pointer'
+          }
+        }, hasPreContent && option.preContent, ___EmotionJSX("span", {
+          className: hasEllipsis ? 'autocompleteMenuItemText hasEllipsis' : 'autocompleteMenuItemText'
+        }, option.content), ___EmotionJSX(Icon, {
+          style: {
+            opacity: isSelected ? 1 : 0
+          },
+          icon: ___EmotionJSX(IconCheck, null),
+          color: isActive ? 'content' : 'icon'
+        }));
       }));
-    }), noResults && ___EmotionJSX(EmptyState, null)))));
-  });
+    }), isShowCreateOption && ___EmotionJSX(React.Fragment, null, filteredOptions.length > 0 && ___EmotionJSX(MenuItemDivider, null), ___EmotionJSX(Combobox.Option, {
+      value: newOption
+    }, function (_ref5) {
+      var active = _ref5.active;
+      var isActive = active;
+      return ___EmotionJSX("li", {
+        className: "autocompleteMenuItem",
+        style: {
+          backgroundColor: isActive && getColor('fade1'),
+          cursor: 'pointer'
+        }
+      }, ___EmotionJSX(Icon, {
+        icon: ___EmotionJSX(IconPlus, null),
+        color: isActive ? 'content' : 'icon'
+      }), ___EmotionJSX("span", {
+        className: "autocompleteMenuItemText hasEllipsis"
+      }, "Create ", "\"" + query + "\""));
+    })), noResults && ___EmotionJSX(EmptyState, null))))), errorMessage && ___EmotionJSX(Box, {
+      marginTop: "betweenFormControlAndLabel",
+      color: "danger"
+    }, errorMessage));
+  }));
 };
 Autocomplete.Label = FieldLabel;
 Autocomplete.Hint = FieldHint;
 Autocomplete.propTypes = {
   options: PropTypes.array,
-  value: PropTypes.string.isRequired,
+  value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  isCreatable: PropTypes.bool,
+  onCreate: PropTypes.func,
   menuPlacement: types.menuPlacement,
   menuWidth: types.dimension,
   menuMaxHeight: types.dimension,
@@ -207,5 +309,7 @@ Autocomplete.propTypes = {
   label: types.label,
   hint: types.hint,
   menuItemsHaveEllipsis: PropTypes.bool,
-  hasPortal: PropTypes.bool
+  hasPortal: PropTypes.bool,
+  hasError: PropTypes.bool,
+  errorMessage: PropTypes.string
 };