carbon-addons-iot-react 2.98.2 → 2.100.1

package/lib/src/components/ComboBox/ComboBox.jsx

@@ -0,0 +1,380 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var carbonComponentsReact = require('carbon-components-react');
+var PropTypes = _interopDefault(require('prop-types'));
+var React = require('react');
+var React__default = _interopDefault(React);
+var classnames = _interopDefault(require('classnames'));
+require('core-js/modules/es.symbol');
+require('core-js/modules/es.array.filter');
+require('core-js/modules/es.array.for-each');
+require('core-js/modules/es.object.get-own-property-descriptor');
+require('core-js/modules/es.object.get-own-property-descriptors');
+require('core-js/modules/es.object.keys');
+require('core-js/modules/web.dom-collections.for-each');
+var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
+var __chunk_1 = require('../../constants/Settings.js');
+require('core-js/modules/es.array.concat');
+var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
+require('core-js/modules/es.array.map');
+require('core-js/modules/es.array.slice');
+var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
+require('core-js/modules/es.array.join');
+require('core-js/modules/es.array.reduce');
+require('core-js/modules/es.regexp.exec');
+var __chunk_18 = require('../../internal/deprecate.js');
+require('core-js/modules/es.array.splice');
+require('core-js/modules/es.string.trim');
+require('core-js/modules/es.string.split');
+require('core-js/modules/es.array.index-of');
+require('core-js/modules/es.string.starts-with');
+var __chunk_198 = require('./CarbonComboBox.jsx');
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var iotPrefix = __chunk_1.settings.iotPrefix;
+
+var propTypes = _objectSpread({}, __chunk_198.default.propTypes, {
+  loading: PropTypes.bool,
+  // Callback that is called with the value of the input on change
+  onChange: PropTypes.func.isRequired,
+  // OPtional classname to be applied to wrapper
+  wrapperClassName: PropTypes.string,
+  // String to pass to input field option
+  editOptionText: PropTypes.string,
+  // String to pass for tags close button aria-label. Will be prepended to value name
+  closeButtonText: PropTypes.string,
+  // Bit that will allow mult value and tag feature
+  hasMultiValue: __chunk_18.default(PropTypes.bool, '\nThe prop `hasMultiValue` for Combobox is experimental. The functionality that is enabled by this prop is subject to change until Combobbox moves out of experimental.')
+});
+
+var defaultProps = _objectSpread({}, __chunk_198.default.defaultProps, {
+  loading: false,
+  wrapperClassName: null,
+  closeButtonText: 'Close',
+  editOptionText: '-Create',
+  hasMultiValue: false,
+  items: []
+});
+
+var ComboBox = function ComboBox(_ref) {
+  var loading = _ref.loading,
+      wrapperClassName = _ref.wrapperClassName,
+      closeButtonText = _ref.closeButtonText,
+      editOptionText = _ref.editOptionText,
+      hasMultiValue = _ref.hasMultiValue,
+      onChange = _ref.onChange,
+      comboProps = _objectWithoutProperties(_ref, ["loading", "wrapperClassName", "closeButtonText", "editOptionText", "hasMultiValue", "onChange"]);
+
+  var items = comboProps.items,
+      ariaLabel = comboProps.ariaLabel,
+      className = comboProps.className,
+      disabled = comboProps.disabled,
+      id = comboProps.id,
+      initialSelectedItem = comboProps.initialSelectedItem,
+      downshiftProps = comboProps.downshiftProps,
+      itemToString = comboProps.itemToString,
+      itemToElement = comboProps.itemToElement,
+      placeholder = comboProps.placeholder,
+      shouldFilterItem = comboProps.shouldFilterItem,
+      type = comboProps.type,
+      invalid = comboProps.invalid,
+      invalidText = comboProps.invalidText,
+      translateWithId = comboProps.translateWithId,
+      size = comboProps.size,
+      onInputChange = comboProps.onInputChange,
+      light = comboProps.light,
+      direction = comboProps.direction; // Ref for the combobox input
+
+  var comboRef = /*#__PURE__*/React__default.createRef(); // Input value that is added to list
+
+  var _useState = React.useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1]; // Current selected item that shows in the input
+
+
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedItem = _useState4[0],
+      setSelectedItem = _useState4[1]; // Array that populates list
+
+
+  var _useState5 = React.useState(items),
+      _useState6 = _slicedToArray(_useState5, 2),
+      listItems = _useState6[0],
+      setListItems = _useState6[1]; // Array that populates tags
+
+
+  var _useState7 = React.useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      tagItems = _useState8[0],
+      setTagItems = _useState8[1]; // Highlighted index for list dropdown
+
+
+  var _useState9 = React.useState(-1),
+      _useState10 = _slicedToArray(_useState9, 2),
+      highlightedIndex = _useState10[0],
+      setHighlightedIndex = _useState10[1];
+
+  React.useEffect(function () {
+    // If there are tags then clear and focus the input
+    if (hasMultiValue) {
+      setSelectedItem(null);
+    }
+  });
+
+  var handleOnClose = function handleOnClose(e) {
+    var _e$currentTarget$pare, _e$currentTarget$pare2, _e$currentTarget$pare3, _e$currentTarget$pare4, _e$currentTarget$pare5, _e$currentTarget$pare6, _e$currentTarget$pare7, _e$currentTarget$pare8;
+
+    // Get close target's text
+    var closedValue = (_e$currentTarget$pare = e.currentTarget.parentNode) === null || _e$currentTarget$pare === void 0 ? void 0 : (_e$currentTarget$pare2 = _e$currentTarget$pare.children[0]) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.textContent; // If there is a tag with the same value then remove from tag array
+
+    tagItems.forEach(function (item, idx) {
+      if (itemToString(item) === closedValue) {
+        tagItems.splice(idx, 1);
+        setTagItems(_toConsumableArray(tagItems));
+      }
+    }); // Send new value to users onChange callback
+
+    onChange(_toConsumableArray(tagItems)); // eslint-disable-next-line no-unused-expressions
+
+    (_e$currentTarget$pare3 = e.currentTarget.parentNode) === null || _e$currentTarget$pare3 === void 0 ? void 0 : (_e$currentTarget$pare4 = _e$currentTarget$pare3.parentNode) === null || _e$currentTarget$pare4 === void 0 ? void 0 : (_e$currentTarget$pare5 = _e$currentTarget$pare4.parentNode) === null || _e$currentTarget$pare5 === void 0 ? void 0 : (_e$currentTarget$pare6 = _e$currentTarget$pare5.firstChild) === null || _e$currentTarget$pare6 === void 0 ? void 0 : (_e$currentTarget$pare7 = _e$currentTarget$pare6.children[0]) === null || _e$currentTarget$pare7 === void 0 ? void 0 : (_e$currentTarget$pare8 = _e$currentTarget$pare7.children[1]) === null || _e$currentTarget$pare8 === void 0 ? void 0 : _e$currentTarget$pare8.focus();
+  };
+
+  var handleOnChange = function handleOnChange(_ref2) {
+    var downShiftSelectedItem = _ref2.selectedItem;
+    var newItem = downShiftSelectedItem && Object.keys(downShiftSelectedItem).reduce(function (acc, currentId) {
+      return _objectSpread({}, acc, _defineProperty({}, currentId, downShiftSelectedItem[currentId].trim()));
+    }, {});
+    var currentValue = itemToString(newItem); // Check that there is no existing tag
+
+    var hasNoExistingTag = tagItems.filter(function (x) {
+      return itemToString(x) === currentValue;
+    }).length < 1; // Check if value is part of items array
+
+    var matchedItem = listItems.filter(function (x) {
+      return itemToString(x).trim() === currentValue;
+    })[0];
+
+    if (hasMultiValue) {
+      // If tags array does not contain new value
+      if (newItem && hasNoExistingTag) {
+        // Add new value to tags array
+        setTagItems(function (inputValues) {
+          return [].concat(_toConsumableArray(inputValues), [newItem]);
+        }); // pass the combobox value to user's onChange callback
+
+        onChange([].concat(_toConsumableArray(tagItems), [newItem]));
+      }
+    } else {
+      onChange(newItem);
+    }
+
+    if ((newItem === null || newItem === void 0 ? void 0 : newItem.id.startsWith("".concat(iotPrefix, "-input-"))) && !matchedItem) {
+      // Add new item to items array
+      setListItems(function (currentList) {
+        return [newItem].concat(_toConsumableArray(currentList));
+      });
+    }
+
+    setSelectedItem(newItem);
+    setInputValue(null);
+  };
+
+  var handleOnKeypress = function handleOnKeypress(evt) {
+    // Current value of input
+    var currentValue = comboRef.current.textInput.current.value.trim();
+
+    if (evt.key === 'Enter' && currentValue && highlightedIndex < 0) {
+      var newItem = {
+        id: "".concat(iotPrefix, "-input-").concat(currentValue.split(' ').join('-'), "-").concat(currentValue.length),
+        text: currentValue
+      };
+      handleOnChange({
+        selectedItem: newItem
+      });
+    }
+  };
+
+  var handleInputChange = function handleInputChange(e) {
+    var matchedItem = listItems.filter(function (x) {
+      return itemToString(x) === e;
+    })[0];
+
+    if (e !== '' && !matchedItem) {
+      setInputValue({
+        id: "".concat(iotPrefix, "-input-").concat(e.split(' ').join('-'), "-").concat(e.length),
+        text: e
+      });
+    } else {
+      setInputValue(null);
+    } // Pass on to user callback
+
+
+    onInputChange(e);
+  };
+
+  var findHighlightedIndex = function findHighlightedIndex(_ref3, carbonInputValue) {
+    var carbonItems = _ref3.items;
+
+    if (!carbonInputValue) {
+      return -1;
+    }
+
+    var searchValue = carbonItems[0].id.startsWith("".concat(iotPrefix, "-input")) ? carbonInputValue.slice(0, -1).toLowerCase() : carbonInputValue.toLowerCase(); // eslint-disable-next-line no-plusplus
+
+    for (var i = 0; i < carbonItems.length; i++) {
+      var item = itemToString(carbonItems[i]).toLowerCase();
+
+      if (item.indexOf(searchValue) !== -1 && searchValue && searchValue.trim() === item.trim()) {
+        return i;
+      }
+    }
+
+    return -1;
+  };
+
+  var combinedItems = React.useMemo(function () {
+    return inputValue ? [inputValue].concat(_toConsumableArray(listItems)) : listItems;
+  }, [inputValue, listItems]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React__default.createElement("div", {
+      className: classnames("".concat(iotPrefix, "--combobox"), _defineProperty({}, wrapperClassName, wrapperClassName), _defineProperty({}, "".concat(iotPrefix, "--combobox-add"), inputValue)),
+      onKeyDown: function onKeyDown(evt) {
+        return handleOnKeypress(evt);
+      },
+      "data-testid": "combo-wrapper"
+    }, /*#__PURE__*/React__default.createElement(__chunk_198.default, {
+      "data-testid": "combo-box",
+      ariaLabel: ariaLabel,
+      id: id,
+      type: type,
+      placeholder: placeholder,
+      shouldFilterItem: shouldFilterItem,
+      size: size,
+      invalid: invalid,
+      light: light,
+      direction: direction,
+      invalidText: invalidText,
+      translateWithId: translateWithId,
+      initialSelectedItem: initialSelectedItem,
+      downshiftProps: downshiftProps,
+      findHighlightedIndex: findHighlightedIndex,
+      onHighligtedIndexChange: setHighlightedIndex,
+      ref: comboRef,
+      selectedItem: comboProps.selectedItem || selectedItem,
+      items: combinedItems,
+      itemToString: itemToString,
+      itemToElement: itemToElement,
+      editOptionText: editOptionText,
+      onChange: handleOnChange,
+      onInputChange: handleInputChange,
+      className: classnames(className, "".concat(iotPrefix, "--combobox-input")),
+      disabled: disabled || loading !== undefined && loading !== false
+    }), /*#__PURE__*/React__default.createElement("ul", {
+      "data-testid": "combo-tags",
+      className: "".concat(iotPrefix, "--combobox-tags")
+    }, tagItems.map(function (item, idx) {
+      return /*#__PURE__*/React__default.createElement("li", {
+        key: "li-".concat(item === null || item === void 0 ? void 0 : item.id, "-").concat(idx)
+      }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tag, {
+        key: "tag-".concat(item === null || item === void 0 ? void 0 : item.id, "-").concat(idx),
+        filter: true,
+        onClose: function onClose(e) {
+          return handleOnClose(e);
+        },
+        title: closeButtonText
+      }, itemToString(item)));
+    })))
+  );
+};
+
+ComboBox.propTypes = propTypes;
+ComboBox.defaultProps = defaultProps;
+ComboBox.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ComboBox",
+  "props": {
+    "loading": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "wrapperClassName": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "closeButtonText": {
+      "defaultValue": {
+        "value": "'Close'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "editOptionText": {
+      "defaultValue": {
+        "value": "'-Create'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "hasMultiValue": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "custom",
+        "raw": "deprecate(\n  PropTypes.bool,\n  '\\nThe prop `hasMultiValue` for Combobox is experimental. The functionality that is enabled by this prop is subject to change until Combobbox moves out of experimental.'\n)"
+      },
+      "required": false,
+      "description": ""
+    },
+    "items": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
+      "required": false
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": ""
+    }
+  },
+  "composes": ["./CarbonComboBox"]
+};
+
+exports.default = ComboBox;

package/lib/src/components/ComposedModal/ComposedModal.jsx

@@ -8,6 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var classnames = _interopDefault(require('classnames'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
+var __chunk_1 = require('../../constants/Settings.js');
 require('core-js/modules/es.array.concat');
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
@@ -54,6 +55,7 @@ function _templateObject() {
 
   return data;
 }
+var iotPrefix = __chunk_1.settings.iotPrefix;
 var StyledModal = styled(carbonComponentsReact.ComposedModal)(_templateObject(), polished.rem(515), polished.rem(600), polished.rem(800), polished.rem(600), polished.rem(1024), polished.rem(1200), polished.rem(200));
 var StyledMessageBox = styled(carbonComponentsReact.InlineNotification)(_templateObject2(), __chunk_15.PADDING.horizontalWrapPadding, __chunk_15.PADDING.verticalPadding);
 var StyledModalFooter = styled(carbonComponentsReact.ModalFooter)(_templateObject3());
@@ -230,7 +232,9 @@ var ComposedModal = /*#__PURE__*/function (_React$Component) {
         iconDescription: iconDescription
       }, helpText ? /*#__PURE__*/React__default.createElement("p", {
         className: "bx--modal-content__text"
-      }, helpText) : null), children ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.ModalBody, null, children) : null, error ? /*#__PURE__*/React__default.createElement(StyledMessageBox, {
+      }, helpText) : null), children ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.ModalBody, {
+        className: classnames(_defineProperty({}, "".concat(iotPrefix, "--composed-modal__body--small-margin-bottom"), error))
+      }, children) : null, error ? /*#__PURE__*/React__default.createElement(StyledMessageBox, {
         title: error,
         subtitle: "",
         kind: "error",

package/lib/src/index.js

@@ -76,6 +76,7 @@ var __chunk_183 = require('./components/TileGallery/StatefulTileGallery.jsx');
 var __chunk_184 = require('./components/List/SimpleList/SimpleList.jsx');
 var __chunk_185 = require('./components/IconSwitch/IconSwitch.jsx');
 var __chunk_186 = require('./components/Accordion/AccordionItemDefer.jsx');
+var __chunk_199 = require('./components/ComboBox/ComboBox.jsx');
 
 // Needed so that any component that uses sizeme can be jest tested
 withSize.noPlaceholders = true; // Components
@@ -86,7 +87,6 @@ exports.Accordion = carbonComponentsReact.Accordion;
 exports.AccordionItem = carbonComponentsReact.AccordionItem;
 exports.Checkbox = carbonComponentsReact.Checkbox;
 exports.CodeSnippet = carbonComponentsReact.CodeSnippet;
-exports.ComboBox = carbonComponentsReact.ComboBox;
 exports.ModalHeader = carbonComponentsReact.ModalHeader;
 exports.ModalBody = carbonComponentsReact.ModalBody;
 exports.ModalFooter = carbonComponentsReact.ModalFooter;
@@ -303,3 +303,4 @@ exports.SimpleList = __chunk_184.default;
 exports.IconSwitch = __chunk_185.default;
 exports.ICON_SWITCH_SIZES = __chunk_185.ICON_SWITCH_SIZES;
 exports.AccordionItemDefer = __chunk_186.default;
+exports.ComboBox = __chunk_199.default;

package/package.json

@@ -32,7 +32,6 @@
     "lint": "yarn lint:javascript && yarn lint:stylelint",
     "lint:javascript": "eslint --ext .jsx --ext .js .",
     "lint:stylelint": "stylelint './src/**/*.scss' --syntax scss --ignorePath .gitignore",
-    "prepare": "yarn build",
     "publish-npm": "yarn semantic-release",
     "start": "yarn test:engines && yarn storybook",
     "storybook": "yarn test:engines && start-storybook -p 3000 -s public/development",
@@ -89,6 +88,7 @@
     "carbon-icons": "^7.0.7",
     "classnames": "^2.2.5",
     "core-js": "3.6.5",
+    "downshift": "^1.31.14",
     "immutability-helper": "^2.9.0",
     "js-file-download": "^0.4.7",
     "lodash": "^4.17.13",
@@ -147,9 +147,10 @@
     "@storybook/addon-storyshots": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
-    "@testing-library/dom": "^7.2.2",
-    "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^10.0.3",
+    "@testing-library/dom": "^7.12.0",
+    "@testing-library/jest-dom": "^5.10.0",
+    "@testing-library/react": "^10.2.1",
+    "@testing-library/user-event": "^11.4.2",
     "accessibility-checker": "^3.0.5",
     "autoprefixer": "^9.4.4",
     "babel-core": "^7.0.0-bridge.0",
@@ -181,6 +182,7 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.2",
     "eslint-plugin-react-hooks": "^1.5.0",
+    "eslint-plugin-testing-library": "^3.3.1",
     "eslint-plugin-unicorn": "^20.1.0",
     "faker": "^4.1.0",
     "fast-sass-loader": "^1.5.0",
@@ -228,5 +230,5 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.98.2"
+  "version": "2.100.1"
 }

package/scss/components/ComboBox/_combo-box.scss

@@ -1 +1,44 @@
 @import '~carbon-components/scss/components/combo-box/combo-box';
+
+.#{$iot-prefix}--combobox {
+  display: flex;
+  flex-flow: column-reverse;
+  position: relative;
+  padding-top: $spacing-08;
+
+  .#{$prefix}--form__helper-text,
+  .#{$prefix}--label {
+    bottom: 100%;
+    position: absolute;
+  }
+
+  .#{$prefix}--label {
+    transform: translateY(25px);
+  }
+
+  .#{$prefix}--form__helper-text {
+    transform: translateY(40px);
+  }
+
+  &-tags {
+    margin-bottom: $spacing-03;
+
+    li {
+      display: inline-block;
+      max-width: 100%;
+    }
+  }
+
+  &.#{$iot-prefix}--combobox-add {
+    .#{$prefix}--list-box__menu-item:first-child {
+      &::after {
+        content: attr(data-text);
+        color: $text-03;
+        position: absolute;
+        right: $spacing-03;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}

package/scss/components/ComposedModal/_composed-modal.scss

@@ -0,0 +1,5 @@
+@import '../../globals/vars';
+
+.#{$iot-prefix}--composed-modal__body--small-margin-bottom {
+  margin-bottom: $spacing-05;
+}

package/scss/components/Tag/_tag.scss

@@ -1 +1,12 @@
 @import '~carbon-components/scss/components/tag/tag';
+
+html[dir='rtl'] {
+  .#{$prefix}--tag--filter {
+    padding-right: $spacing-03;
+    padding-left: $spacing-01;
+  }
+
+  .#{$prefix}--tag__close-icon {
+    margin: 0 $spacing-02 0 0;
+  }
+}

package/scss/styles.scss

@@ -104,50 +104,6 @@ $deprecations--reasons: ();
 /// @group global-deprecate
 $deprecations--message: 'Deprecated code was found, this code will be removed before the next release of Carbon.';
 
-// Font families needed for Charts (not included by carbon by default) TODO: remove once @carbon/types is updated
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-style: italic;
-  font-weight: 300;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-LightItalic.woff2)
-    format('woff2');
-}
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-style: italic;
-  font-weight: 400;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-Italic.woff2)
-    format('woff2');
-}
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-style: italic;
-  font-weight: 600;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-SemiBoldItalic.woff2)
-    format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-weight: 300;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-Light.woff2)
-    format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-weight: 400;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-Regular.woff2)
-    format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-weight: 600;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-SemiBold.woff2)
-    format('woff2');
-}
-
 //-------------------------
 // 🍕 Components
 //-------------------------
@@ -220,6 +176,7 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import 'components/BarChartCard/bar-chart-card';
 @import 'components/Button/button';
 @import 'components/Card/card';
+@import 'components/ComposedModal/composed-modal';
 @import 'components/Dashboard/dashboard';
 @import 'components/DateTimePicker/date-time-picker';
 @import 'components/GaugeCard/gauge-card';