@terraware/web-components 2.1.0 → 2.1.2

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,10 +1,7 @@
 import { TooltipProps } from '@mui/material';
+import { DropdownItem as Option } from '../types';
 import '../Select/styles.scss';
 import './styles.scss';
-export type Option = {
-    value: any;
-    label: string;
-};
 export type ValueType = string | Option;
 export interface Props {
     id: string;
@@ -21,9 +18,5 @@ export interface Props {
     errorText?: string;
     tooltipTitle?: TooltipProps['title'];
 }
-export type DropdownItem = {
-    label: string;
-    value: string;
-};
 export default function Autocomplete({ id, label, values, onChange, selected, freeSolo, disabled, className, hideClearIcon, isEqual, placeholder, errorText, tooltipTitle, }: Props): JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

package/components/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,YAAY,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+ErB"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,YAAY,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+ErB"}

package/components/Dropdown.d.ts

@@ -1,4 +1,5 @@
 import { TooltipProps } from '@mui/material';
+import { DropdownItem } from './types';
 export interface Props {
     id: string;
     label: string;
@@ -7,10 +8,6 @@ export interface Props {
     selected: string | undefined;
     disabled?: boolean;
 }
-export type DropdownItem = {
-    label: string;
-    value: string;
-};
 export declare function DropdownV1({ id, label, values, onChange, selected, disabled }: Props): JSX.Element;
 export interface DropdownProps {
     onChange: (newValue: string) => void;
@@ -45,4 +42,23 @@ export interface DropdownProps {
  * />
  */
 export default function Dropdown(props: DropdownProps): JSX.Element;
+export interface DropdownAutocompleteProps {
+    id: string;
+    label: string;
+    options: DropdownItem[];
+    onChange: (newValue: string) => void;
+    selectedValue: string;
+    freeSolo: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    hideClearIcon?: boolean;
+    placeholder?: string;
+    errorText?: string;
+    tooltipTitle?: TooltipProps['title'];
+}
+/**
+ * A simple dropdown wrapper for Autocomplete that handles { label: string, value: string } values.
+ */
+export declare function DropdownAutocomplete(props: DropdownAutocompleteProps): JSX.Element;
 //# sourceMappingURL=Dropdown.d.ts.map

package/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgE,YAAY,EAAE,MAAM,eAAe,CAAC;AAK3G,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBlG;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAgBlE"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMvC,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBlG;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAelE;AAED,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,CAalF"}

package/components/Dropdown.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DropdownV1 = DropdownV1;
 exports.default = Dropdown;
+exports.DropdownAutocomplete = DropdownAutocomplete;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
@@ -14,6 +15,8 @@ var _material = require("@mui/material");
 
 var _SelectT = _interopRequireDefault(require("./Select/SelectT"));
 
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete/Autocomplete"));
+
 var _styles = require("@mui/styles");
 
 var _react = _interopRequireDefault(require("react"));
@@ -103,7 +106,29 @@ function Dropdown(props) {
     },
     onChange: function onChange(option) {
       return _onChange(option.value);
+    }
+  }));
+}
+
+/**
+ * A simple dropdown wrapper for Autocomplete that handles { label: string, value: string } values.
+ */
+function DropdownAutocomplete(props) {
+  var selectedValue = props.selectedValue,
+      _onChange2 = props.onChange,
+      options = props.options,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, ["selectedValue", "onChange", "options"]);
+  var selectedItem = options === null || options === void 0 ? void 0 : options.find(function (option) {
+    return option.value === selectedValue;
+  });
+  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, Object.assign({}, remainingProps, {
+    values: options,
+    selected: selectedItem,
+    isEqual: function isEqual(A, B) {
+      return A.value === B.value;
     },
-    tooltipTitle: props.tooltipTitle
+    onChange: function onChange(option) {
+      return _onChange2(option.value);
+    }
   }));
 }

package/components/Pill/index.d.ts

@@ -0,0 +1,11 @@
+import './styles.scss';
+type PillProps<IdType> = {
+    id: IdType;
+    label: string;
+    value: string;
+    onRemove?: (id: IdType) => void;
+    className?: string;
+};
+export default function Pill<IdType>({ id, label, value, onRemove, className }: PillProps<IdType>): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/components/Pill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAc9G"}

package/components/Pill/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pill;
+
+var _material = require("@mui/material");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./styles.scss");
+
+function Pill(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      value = _ref.value,
+      onRemove = _ref.onRemove,
+      className = _ref.className;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pill ".concat(className !== null && className !== void 0 ? className : '')
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "label"
+  }, label, ":"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "value"
+  }, value), onRemove ? /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: function onClick() {
+      return onRemove(id);
+    },
+    className: "iconContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "icon"
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "spacer"
+  }));
+}

package/components/Pill/styles.scss

@@ -0,0 +1,48 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.pill {
+  font-family: $tw-fnt-base-font-family;
+  background: $tw-clr-bg-tertiary;
+  padding: $tw-spc-base-xx-small $tw-spc-base-xx-small $tw-spc-base-xx-small 12px;
+  display: flex;
+  border-radius: 13px;
+  align-items: center;
+  margin-right: $tw-spc-base-x-small;
+  margin-bottom: $tw-spc-base-x-small;
+
+  .label {
+    font-size: 12px;
+    color: $tw-clr-txt;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  .value {
+    padding-left: $tw-spc-base-xx-small;
+    font-size: 12px;
+    color: $tw-clr-txt;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .icon {
+    fill: $tw-clr-icn;
+    width: 12px;
+    height: 12px;
+    margin: 0 $tw-spc-base-xx-small;
+  }
+
+  .iconContainer {
+    padding: 0;
+  }
+
+  .spacer {
+    width: $tw-spc-base-x-small;
+    height: 12px;
+  }
+}

package/components/PillList/index.d.ts

@@ -0,0 +1,14 @@
+export type PillListItem<IdType> = {
+    id: IdType;
+    label: string;
+    value: string;
+    onRemove?: (id: IdType) => void;
+    className?: string;
+};
+export type PillListProps<IdType> = {
+    data: PillListItem<IdType>[];
+    onRemove?: (id: IdType) => void;
+    className?: string;
+};
+export default function PillList<IdType>(props: PillListProps<IdType>): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/PillList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAiBlF"}

package/components/PillList/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PillList;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Pill = _interopRequireDefault(require("../Pill"));
+
+var _material = require("@mui/material");
+
+function PillList(props) {
+  var data = props.data,
+      onRemove = props.onRemove,
+      className = props.className;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    flexWrap: "wrap"
+  }, data.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_Pill.default, {
+      key: index,
+      id: item.id,
+      label: item.label,
+      value: item.value,
+      onRemove: item.onRemove || onRemove,
+      className: item.className || className
+    });
+  }));
+}

package/components/types/index.d.ts

@@ -0,0 +1,5 @@
+export type DropdownItem = {
+    label: string;
+    value: any;
+};
+//# sourceMappingURL=index.d.ts.map

package/components/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC"}

package/components/types/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/index.d.ts

@@ -4,7 +4,7 @@ import Checkbox from './components/Checkbox';
 import DatePicker from './components/DatePicker/DatePicker';
 import DialogBox from './components/DialogBox/DialogBox';
 import Divisor from './components/Divisor';
-import Dropdown, { DropdownV1 } from './components/Dropdown';
+import Dropdown, { DropdownV1, DropdownAutocomplete } from './components/Dropdown';
 import ErrorBox from './components/ErrorBox/ErrorBox';
 import Icon from './components/Icon/Icon';
 import IconTooltip from './components/IconTooltip';
@@ -14,6 +14,8 @@ import NavFooter from './components/Navbar/NavFooter';
 import NavItem from './components/Navbar/NavItem';
 import NavSection from './components/Navbar/NavSection';
 import Note from './components/Note';
+import Pill from './components/Pill';
+import PillList from './components/PillList';
 import ProgressCircle from './components/ProgressCircle/ProgressCircle';
 import RadioButton from './components/RadioButton';
 import Select from './components/Select/Select';
@@ -28,9 +30,10 @@ import { EnhancedTableDetailsRow, RendererProps, TableColumnType } from './compo
 import * as Svg from './components/svg';
 import Message from './components/Message/Message';
 import theme from './theme';
+export type { PillListItem } from './components/PillList';
 export type { IconName } from './components/Icon/icons/';
 export type { Size } from './components/Size';
-export type { DropdownItem } from './components/Dropdown';
+export type { DropdownItem } from './components/types';
 export type { EnhancedTableDetailsRow, RendererProps, TableColumnType, TableRowType, SortOrder };
-export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, ErrorBox, getComparator, icons, Icon, IconTooltip, Message, NavFooter, NavItem, NavSection, Navbar, Note, ProgressCircle, RadioButton, Select, SelectT, stableSort, SummaryBox, Svg, Textfield, TextTruncated, Table, theme, };
+export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownAutocomplete, DropdownV1, ErrorBox, getComparator, icons, Icon, IconTooltip, Message, NavFooter, NavItem, NavSection, Navbar, Note, Pill, PillList, ProgressCircle, RadioButton, Select, SelectT, stableSort, SummaryBox, Svg, Textfield, TextTruncated, Table, theme, };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAClE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,SAAS,MAAM,+BAA+B,CAAC;AACtD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,YAAY,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,KAAK,GAAG,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAEjG,OAAO,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,aAAa,EACb,KAAK,EACL,KAAK,GACN,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAClE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,SAAS,MAAM,+BAA+B,CAAC;AACtD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,YAAY,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,KAAK,GAAG,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAEjG,OAAO,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,aAAa,EACb,KAAK,EACL,KAAK,GACN,CAAC"}

package/index.js

@@ -53,6 +53,12 @@ Object.defineProperty(exports, "DropdownV1", {
     return _Dropdown.DropdownV1;
   }
 });
+Object.defineProperty(exports, "DropdownAutocomplete", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.DropdownAutocomplete;
+  }
+});
 Object.defineProperty(exports, "ErrorBox", {
   enumerable: true,
   get: function get() {
@@ -107,6 +113,18 @@ Object.defineProperty(exports, "Note", {
     return _Note.default;
   }
 });
+Object.defineProperty(exports, "Pill", {
+  enumerable: true,
+  get: function get() {
+    return _Pill.default;
+  }
+});
+Object.defineProperty(exports, "PillList", {
+  enumerable: true,
+  get: function get() {
+    return _PillList.default;
+  }
+});
 Object.defineProperty(exports, "ProgressCircle", {
   enumerable: true,
   get: function get() {
@@ -231,6 +249,10 @@ var _NavSection = _interopRequireDefault(require("./components/Navbar/NavSection
 
 var _Note = _interopRequireDefault(require("./components/Note"));
 
+var _Pill = _interopRequireDefault(require("./components/Pill"));
+
+var _PillList = _interopRequireDefault(require("./components/PillList"));
+
 var _ProgressCircle = _interopRequireDefault(require("./components/ProgressCircle/ProgressCircle"));
 
 var _RadioButton = _interopRequireDefault(require("./components/RadioButton"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

package/stories/Dropdown.stories.d.ts

@@ -1,5 +1,5 @@
 import { Story } from '@storybook/react';
-import Dropdown, { Props as DropdownV1Props, DropdownProps } from '../components/Dropdown';
+import Dropdown, { Props as DropdownV1Props, DropdownProps, DropdownAutocompleteProps } from '../components/Dropdown';
 declare const _default: {
     title: string;
     component: typeof Dropdown;
@@ -7,4 +7,5 @@ declare const _default: {
 export default _default;
 export declare const LegacyDropdown: Story<DropdownV1Props>;
 export declare const Default: Story<DropdownProps>;
+export declare const Autocomplete: Story<DropdownAutocompleteProps>;
 //# sourceMappingURL=Dropdown.stories.d.ts.map

package/stories/Dropdown.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Dropdown.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,QAAQ,EAAE,EAAE,KAAK,IAAI,eAAe,EAAc,aAAa,EAAE,MAAM,wBAAwB,CAAC;;;;;AAEvG,wBAGE;AAYF,eAAO,MAAM,cAAc,wBAA8B,CAAC;AAmB1D,eAAO,MAAM,OAAO,sBAA4B,CAAC"}
+{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Dropdown.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,QAAQ,EAAE,EACf,KAAK,IAAI,eAAe,EAExB,aAAa,EACb,yBAAyB,EAE1B,MAAM,wBAAwB,CAAC;;;;;AAEhC,wBAGE;AAYF,eAAO,MAAM,cAAc,wBAA8B,CAAC;AAsB1D,eAAO,MAAM,OAAO,sBAA4B,CAAC;AAyBjD,eAAO,MAAM,YAAY,kCAAwC,CAAC"}

package/stories/PillList.stories.d.ts

@@ -0,0 +1,9 @@
+import { Story } from '@storybook/react';
+import PillList, { PillListProps } from '../components/PillList';
+declare const _default: {
+    title: string;
+    component: typeof PillList;
+};
+export default _default;
+export declare const Default: Story<PillListProps<number>>;
+//# sourceMappingURL=PillList.stories.d.ts.map

package/stories/PillList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillList.stories.d.ts","sourceRoot":"","sources":["../../src/stories/PillList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,QAAQ,EAAE,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;;;;;AAEjE,wBAGE;AAMF,eAAO,MAAM,OAAO,8BAAoB,CAAC"}