@amboss/design-system 1.14.1 → 1.14.3

package/build/cjs/build-tokens/visualConfig.js

@@ -554,6 +554,16 @@ const ambossVisualConfiguration = {
             "gray": "#393e47"
           }
         },
+        "tag": {
+          "background": {
+            "gray": "#5b5f67",
+            "blue": "#2f538a"
+          },
+          "text": {
+            "gray": "#ced1d6",
+            "blue": "#e7effe"
+          }
+        },
         "segmentedProgressBar": {
           "monochrome": "#ced1d6",
           "success": "#28816b",
@@ -1094,6 +1104,16 @@ const ambossVisualConfiguration = {
             "gray": "#eef2f5"
           }
         },
+        "tag": {
+          "background": {
+            "gray": "#e0e6eb",
+            "blue": "#d2e2f9"
+          },
+          "text": {
+            "gray": "#40515e",
+            "blue": "#1c427d"
+          }
+        },
         "segmentedProgressBar": {
           "monochrome": "#607585",
           "success": "#39d6ac",

package/build/cjs/scss/themes/dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 10 Aug 2023 14:34:12 GMT
+// Generated on Tue, 22 Aug 2023 12:57:57 GMT
 
 $color-canvas: #1e2125;
 $color-background-primary-default: #24282d;
@@ -94,6 +94,10 @@ $color-badge-border-brand: #393e47;
 $color-badge-border-purple: #393e47;
 $color-badge-border-red: #393e47;
 $color-badge-border-gray: #393e47;
+$color-tag-background-gray: #5b5f67;
+$color-tag-background-blue: #2f538a;
+$color-tag-text-gray: #ced1d6;
+$color-tag-text-blue: #e7effe;
 $color-segmented-progress-bar-monochrome: #ced1d6;
 $color-segmented-progress-bar-success: #28816b;
 $color-segmented-progress-bar-warning: #a4792d;

package/build/cjs/scss/themes/light.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 10 Aug 2023 14:34:12 GMT
+// Generated on Tue, 22 Aug 2023 12:57:57 GMT
 
 $color-canvas: #eef2f5;
 $color-background-primary-default: #ffffff;
@@ -94,6 +94,10 @@ $color-badge-border-brand: #e7f6f8;
 $color-badge-border-purple: #f2effb;
 $color-badge-border-red: #fde8e8;
 $color-badge-border-gray: #eef2f5;
+$color-tag-background-gray: #e0e6eb;
+$color-tag-background-blue: #d2e2f9;
+$color-tag-text-gray: #40515e;
+$color-tag-text-blue: #1c427d;
 $color-segmented-progress-bar-monochrome: #607585;
 $color-segmented-progress-bar-success: #39d6ac;
 $color-segmented-progress-bar-warning: #f1d56b;

package/build/cjs/src/components/Pagination/Pagination.js

@@ -9,15 +9,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-function getItemIndices(page, numOfItemsPerPage) {
-  const lastItemIndex = page * numOfItemsPerPage;
-  const firstItemIndex = lastItemIndex - numOfItemsPerPage + 1;
+function getItemIndices(page, numOfItemsPerPage, numOfItems) {
+  let lastItemIndex = page * numOfItemsPerPage;
+  let itemsPerPage = numOfItemsPerPage;
+
+  // Re-calculate the numOfItemsPerPage for the last page.
+  if (lastItemIndex > numOfItems) {
+    itemsPerPage -= lastItemIndex - numOfItems;
+    lastItemIndex = numOfItems;
+  }
+  const firstItemIndex = lastItemIndex - itemsPerPage + 1;
   return [firstItemIndex, lastItemIndex];
 }
 function Pagination(_ref) {
   let {
-    numOfPages,
-    numOfItemsPerPage,
+    numOfItems,
+    numOfItemsPerPage = 1,
     currentPage,
     formatLabel,
     alignLabel = "center",
@@ -26,26 +33,33 @@ function Pagination(_ref) {
     onNextClick
   } = _ref;
   let label;
+  const itemsPerPage = numOfItems > numOfItemsPerPage ? numOfItemsPerPage : numOfItems;
+  const numOfPages = Math.ceil(numOfItems / itemsPerPage);
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === numOfPages;
-  if (numOfItemsPerPage) {
-    const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage, numOfItemsPerPage);
-    const numOfItems = numOfPages * numOfItemsPerPage;
-    label = formatLabel ? formatLabel(firstItemIndex, lastItemIndex, numOfItems) : `${firstItemIndex} - ${lastItemIndex} of ${numOfItems}`;
+  if (itemsPerPage > 1) {
+    const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage, itemsPerPage, numOfItems);
+    if (formatLabel) {
+      label = formatLabel(firstItemIndex, lastItemIndex);
+    } else if (firstItemIndex === lastItemIndex) {
+      label = `${firstItemIndex} of ${numOfItems}`;
+    } else {
+      label = `${firstItemIndex} - ${lastItemIndex} of ${numOfItems}`;
+    }
   } else {
     label = formatLabel ? formatLabel() : `${currentPage} of ${numOfPages}`;
   }
   const handlePrevClick = () => {
-    if (numOfItemsPerPage) {
-      const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage - 1, numOfItemsPerPage);
+    if (itemsPerPage > 1) {
+      const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage - 1, itemsPerPage, numOfItems);
       onPrevClick(currentPage - 1, firstItemIndex, lastItemIndex);
     } else {
       onPrevClick(currentPage - 1);
     }
   };
   const handleNextClick = () => {
-    if (numOfItemsPerPage) {
-      const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage + 1, numOfItemsPerPage);
+    if (itemsPerPage > 1) {
+      const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage + 1, itemsPerPage, numOfItems);
       onNextClick(currentPage + 1, firstItemIndex, lastItemIndex);
     } else {
       onNextClick(currentPage + 1);

package/build/cjs/src/components/Tag/Tag.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var React = require('react');
+var PictogramButton = require('../PictogramButton/PictogramButton.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const TagContainer = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e1i6narj2"
+} : {
+  target: "e1i6narj2",
+  label: "TagContainer"
+})(_ref => {
+  let {
+    theme,
+    colorVariant,
+    isRemovable
+  } = _ref;
+  return {
+    display: "flex",
+    alignItems: "center",
+    maxWidth: "200px",
+    paddingLeft: theme.variables.size.spacing.xs,
+    paddingRight: isRemovable ? theme.variables.size.spacing.zero : theme.variables.size.spacing.xs,
+    paddingTop: isRemovable ? theme.variables.size.spacing.zero : theme.variables.size.spacing.xxs,
+    paddingBottom: isRemovable ? theme.variables.size.spacing.zero : theme.variables.size.spacing.xxs,
+    borderRadius: theme.variables.size.borderRadius.xs,
+    backgroundColor: theme.values.color.tag.background[colorVariant],
+    color: theme.values.color.tag.text[colorVariant],
+    fontFamily: theme.variables.fontFamily.lato,
+    fontSize: theme.variables.size.font.text.s
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJxQiIsImZpbGUiOiJUYWcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQaWN0b2dyYW1CdXR0b24gfSBmcm9tIFwiLi4vUGljdG9ncmFtQnV0dG9uL1BpY3RvZ3JhbUJ1dHRvblwiO1xuXG50eXBlIEJhc2VUYWdQcm9wcyA9IHtcbiAgbGFiZWw6IHN0cmluZztcbiAgY29sb3JWYXJpYW50PzogXCJncmF5XCIgfCBcImJsdWVcIjtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xudHlwZSBDb25kaXRpb25hbFRhZ1Byb3BzID1cbiAgfCB7XG4gICAgICBpc1JlbW92YWJsZT86IGZhbHNlO1xuICAgICAgb25DbGVhcj86IG5ldmVyO1xuICAgICAgY2xlYXJCdG5BcmlhTGFiZWw/OiBuZXZlcjtcbiAgICB9XG4gIHwge1xuICAgICAgaXNSZW1vdmFibGU6IHRydWU7XG4gICAgICBvbkNsZWFyOiAoKSA9PiB2b2lkO1xuICAgICAgY2xlYXJCdG5BcmlhTGFiZWw/OiBzdHJpbmc7XG4gICAgfTtcblxuZXhwb3J0IHR5cGUgVGFnUHJvcHMgPSBCYXNlVGFnUHJvcHMgJiBDb25kaXRpb25hbFRhZ1Byb3BzO1xuXG5jb25zdCBUYWdDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8VGFnUHJvcHM+PihcbiAgKHsgdGhlbWUsIGNvbG9yVmFyaWFudCwgaXNSZW1vdmFibGUgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIG1heFdpZHRoOiBcIjIwMHB4XCIsXG4gICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHMsXG4gICAgcGFkZGluZ1JpZ2h0OiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cyxcbiAgICBwYWRkaW5nVG9wOiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgcGFkZGluZ0JvdHRvbTogaXNSZW1vdmFibGVcbiAgICAgID8gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy56ZXJvXG4gICAgICA6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUudmFyaWFibGVzLnNpemUuYm9yZGVyUmFkaXVzLnhzLFxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy5iYWNrZ3JvdW5kW2NvbG9yVmFyaWFudF0sXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQudGV4dC5zLFxuICB9KVxuKTtcblxuY29uc3QgVGFnTGFiZWwgPSBzdHlsZWQuc3BhbigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG59KSk7XG5cbmNvbnN0IENsZWFyQnV0dG9uID0gc3R5bGVkKFBpY3RvZ3JhbUJ1dHRvbik8UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50IH0pID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWcoe1xuICBsYWJlbCxcbiAgY29sb3JWYXJpYW50ID0gXCJncmF5XCIsXG4gIGlzUmVtb3ZhYmxlID0gZmFsc2UsXG4gIG9uQ2xlYXIsXG4gIGNsZWFyQnRuQXJpYUxhYmVsLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFRhZ1Byb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgcmV0dXJuIChcbiAgICA8VGFnQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ1wiXG4gICAgICBjb2xvclZhcmlhbnQ9e2NvbG9yVmFyaWFudH1cbiAgICAgIGlzUmVtb3ZhYmxlPXtpc1JlbW92YWJsZX1cbiAgICA+XG4gICAgICA8VGFnTGFiZWw+e2xhYmVsfTwvVGFnTGFiZWw+XG5cbiAgICAgIHtpc1JlbW92YWJsZSAmJiAoXG4gICAgICAgIDxDbGVhckJ1dHRvblxuICAgICAgICAgIGljb249XCJ4XCJcbiAgICAgICAgICBzaXplPVwieHNcIlxuICAgICAgICAgIGFyaWEtbGFiZWw9e2NsZWFyQnRuQXJpYUxhYmVsfVxuICAgICAgICAgIG9uQ2xpY2s9e29uQ2xlYXJ9XG4gICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgIC8+XG4gICAgICApfVxuICAgIDwvVGFnQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
+const TagLabel = /*#__PURE__*/_styled__default.default("span", process.env.NODE_ENV === "production" ? {
+  target: "e1i6narj1"
+} : {
+  target: "e1i6narj1",
+  label: "TagLabel"
+})(() => ({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOENpQiIsImZpbGUiOiJUYWcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQaWN0b2dyYW1CdXR0b24gfSBmcm9tIFwiLi4vUGljdG9ncmFtQnV0dG9uL1BpY3RvZ3JhbUJ1dHRvblwiO1xuXG50eXBlIEJhc2VUYWdQcm9wcyA9IHtcbiAgbGFiZWw6IHN0cmluZztcbiAgY29sb3JWYXJpYW50PzogXCJncmF5XCIgfCBcImJsdWVcIjtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xudHlwZSBDb25kaXRpb25hbFRhZ1Byb3BzID1cbiAgfCB7XG4gICAgICBpc1JlbW92YWJsZT86IGZhbHNlO1xuICAgICAgb25DbGVhcj86IG5ldmVyO1xuICAgICAgY2xlYXJCdG5BcmlhTGFiZWw/OiBuZXZlcjtcbiAgICB9XG4gIHwge1xuICAgICAgaXNSZW1vdmFibGU6IHRydWU7XG4gICAgICBvbkNsZWFyOiAoKSA9PiB2b2lkO1xuICAgICAgY2xlYXJCdG5BcmlhTGFiZWw/OiBzdHJpbmc7XG4gICAgfTtcblxuZXhwb3J0IHR5cGUgVGFnUHJvcHMgPSBCYXNlVGFnUHJvcHMgJiBDb25kaXRpb25hbFRhZ1Byb3BzO1xuXG5jb25zdCBUYWdDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8VGFnUHJvcHM+PihcbiAgKHsgdGhlbWUsIGNvbG9yVmFyaWFudCwgaXNSZW1vdmFibGUgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIG1heFdpZHRoOiBcIjIwMHB4XCIsXG4gICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHMsXG4gICAgcGFkZGluZ1JpZ2h0OiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cyxcbiAgICBwYWRkaW5nVG9wOiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgcGFkZGluZ0JvdHRvbTogaXNSZW1vdmFibGVcbiAgICAgID8gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy56ZXJvXG4gICAgICA6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUudmFyaWFibGVzLnNpemUuYm9yZGVyUmFkaXVzLnhzLFxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy5iYWNrZ3JvdW5kW2NvbG9yVmFyaWFudF0sXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQudGV4dC5zLFxuICB9KVxuKTtcblxuY29uc3QgVGFnTGFiZWwgPSBzdHlsZWQuc3BhbigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG59KSk7XG5cbmNvbnN0IENsZWFyQnV0dG9uID0gc3R5bGVkKFBpY3RvZ3JhbUJ1dHRvbik8UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50IH0pID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWcoe1xuICBsYWJlbCxcbiAgY29sb3JWYXJpYW50ID0gXCJncmF5XCIsXG4gIGlzUmVtb3ZhYmxlID0gZmFsc2UsXG4gIG9uQ2xlYXIsXG4gIGNsZWFyQnRuQXJpYUxhYmVsLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFRhZ1Byb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgcmV0dXJuIChcbiAgICA8VGFnQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ1wiXG4gICAgICBjb2xvclZhcmlhbnQ9e2NvbG9yVmFyaWFudH1cbiAgICAgIGlzUmVtb3ZhYmxlPXtpc1JlbW92YWJsZX1cbiAgICA+XG4gICAgICA8VGFnTGFiZWw+e2xhYmVsfTwvVGFnTGFiZWw+XG5cbiAgICAgIHtpc1JlbW92YWJsZSAmJiAoXG4gICAgICAgIDxDbGVhckJ1dHRvblxuICAgICAgICAgIGljb249XCJ4XCJcbiAgICAgICAgICBzaXplPVwieHNcIlxuICAgICAgICAgIGFyaWEtbGFiZWw9e2NsZWFyQnRuQXJpYUxhYmVsfVxuICAgICAgICAgIG9uQ2xpY2s9e29uQ2xlYXJ9XG4gICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgIC8+XG4gICAgICApfVxuICAgIDwvVGFnQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
+const ClearButton = /*#__PURE__*/_styled__default.default(PictogramButton.PictogramButton, process.env.NODE_ENV === "production" ? {
+  target: "e1i6narj0"
+} : {
+  target: "e1i6narj0",
+  label: "ClearButton"
+})(_ref2 => {
+  let {
+    theme,
+    colorVariant
+  } = _ref2;
+  return {
+    backgroundColor: "transparent",
+    color: theme.values.color.tag.text[colorVariant],
+    "&:hover": {
+      color: theme.values.color.tag.text[colorVariant]
+    }
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0RvQiIsImZpbGUiOiJUYWcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQaWN0b2dyYW1CdXR0b24gfSBmcm9tIFwiLi4vUGljdG9ncmFtQnV0dG9uL1BpY3RvZ3JhbUJ1dHRvblwiO1xuXG50eXBlIEJhc2VUYWdQcm9wcyA9IHtcbiAgbGFiZWw6IHN0cmluZztcbiAgY29sb3JWYXJpYW50PzogXCJncmF5XCIgfCBcImJsdWVcIjtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xudHlwZSBDb25kaXRpb25hbFRhZ1Byb3BzID1cbiAgfCB7XG4gICAgICBpc1JlbW92YWJsZT86IGZhbHNlO1xuICAgICAgb25DbGVhcj86IG5ldmVyO1xuICAgICAgY2xlYXJCdG5BcmlhTGFiZWw/OiBuZXZlcjtcbiAgICB9XG4gIHwge1xuICAgICAgaXNSZW1vdmFibGU6IHRydWU7XG4gICAgICBvbkNsZWFyOiAoKSA9PiB2b2lkO1xuICAgICAgY2xlYXJCdG5BcmlhTGFiZWw/OiBzdHJpbmc7XG4gICAgfTtcblxuZXhwb3J0IHR5cGUgVGFnUHJvcHMgPSBCYXNlVGFnUHJvcHMgJiBDb25kaXRpb25hbFRhZ1Byb3BzO1xuXG5jb25zdCBUYWdDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8VGFnUHJvcHM+PihcbiAgKHsgdGhlbWUsIGNvbG9yVmFyaWFudCwgaXNSZW1vdmFibGUgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIG1heFdpZHRoOiBcIjIwMHB4XCIsXG4gICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHMsXG4gICAgcGFkZGluZ1JpZ2h0OiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cyxcbiAgICBwYWRkaW5nVG9wOiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgcGFkZGluZ0JvdHRvbTogaXNSZW1vdmFibGVcbiAgICAgID8gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy56ZXJvXG4gICAgICA6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUudmFyaWFibGVzLnNpemUuYm9yZGVyUmFkaXVzLnhzLFxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy5iYWNrZ3JvdW5kW2NvbG9yVmFyaWFudF0sXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQudGV4dC5zLFxuICB9KVxuKTtcblxuY29uc3QgVGFnTGFiZWwgPSBzdHlsZWQuc3BhbigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG59KSk7XG5cbmNvbnN0IENsZWFyQnV0dG9uID0gc3R5bGVkKFBpY3RvZ3JhbUJ1dHRvbik8UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50IH0pID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWcoe1xuICBsYWJlbCxcbiAgY29sb3JWYXJpYW50ID0gXCJncmF5XCIsXG4gIGlzUmVtb3ZhYmxlID0gZmFsc2UsXG4gIG9uQ2xlYXIsXG4gIGNsZWFyQnRuQXJpYUxhYmVsLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFRhZ1Byb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgcmV0dXJuIChcbiAgICA8VGFnQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ1wiXG4gICAgICBjb2xvclZhcmlhbnQ9e2NvbG9yVmFyaWFudH1cbiAgICAgIGlzUmVtb3ZhYmxlPXtpc1JlbW92YWJsZX1cbiAgICA+XG4gICAgICA8VGFnTGFiZWw+e2xhYmVsfTwvVGFnTGFiZWw+XG5cbiAgICAgIHtpc1JlbW92YWJsZSAmJiAoXG4gICAgICAgIDxDbGVhckJ1dHRvblxuICAgICAgICAgIGljb249XCJ4XCJcbiAgICAgICAgICBzaXplPVwieHNcIlxuICAgICAgICAgIGFyaWEtbGFiZWw9e2NsZWFyQnRuQXJpYUxhYmVsfVxuICAgICAgICAgIG9uQ2xpY2s9e29uQ2xlYXJ9XG4gICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgIC8+XG4gICAgICApfVxuICAgIDwvVGFnQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
+function Tag(_ref3) {
+  let {
+    label,
+    colorVariant = "gray",
+    isRemovable = false,
+    onClear,
+    clearBtnAriaLabel,
+    "data-e2e-test-id": dataE2eTestId
+  } = _ref3;
+  return /*#__PURE__*/React__default.default.createElement(TagContainer, {
+    "data-e2e-test-id": dataE2eTestId,
+    "data-ds-id": "Tag",
+    colorVariant: colorVariant,
+    isRemovable: isRemovable
+  }, /*#__PURE__*/React__default.default.createElement(TagLabel, null, label), isRemovable && /*#__PURE__*/React__default.default.createElement(ClearButton, {
+    icon: "x",
+    size: "xs",
+    "aria-label": clearBtnAriaLabel,
+    onClick: onClear,
+    colorVariant: colorVariant
+  }));
+}
+
+exports.Tag = Tag;

package/build/cjs/src/index.js

@@ -47,6 +47,7 @@ var LoadingSpinner = require('./components/LoadingSpinner/LoadingSpinner.js');
 var Pagination = require('./components/Pagination/Pagination.js');
 var SegmentedControl = require('./components/Form/SegmentedControl/SegmentedControl.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
+var Tag = require('./components/Tag/Tag.js');
 var Input = require('./components/Form/Input/Input.js');
 var PasswordInput = require('./components/Form/PasswordInput/PasswordInput.js');
 var DataTable = require('./components/DataTable/DataTable.js');
@@ -125,6 +126,7 @@ exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
 exports.Pagination = Pagination.Pagination;
 exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.Tooltip = Tooltip.Tooltip;
+exports.Tag = Tag.Tag;
 exports.Input = Input.Input;
 exports.PasswordInput = PasswordInput.PasswordInput;
 exports.BaseDataTable = DataTable.BaseDataTable;

package/build/esm/build-tokens/visualConfig.d.ts

@@ -548,6 +548,16 @@ declare type AmbossTheme = {
                 "gray": string;
             };
         };
+        "tag": {
+            "background": {
+                "gray": string;
+                "blue": string;
+            };
+            "text": {
+                "gray": string;
+                "blue": string;
+            };
+        };
         "segmentedProgressBar": {
             "monochrome": string;
             "success": string;

package/build/esm/build-tokens/visualConfig.js

@@ -552,6 +552,16 @@ const ambossVisualConfiguration = {
             "gray": "#393e47"
           }
         },
+        "tag": {
+          "background": {
+            "gray": "#5b5f67",
+            "blue": "#2f538a"
+          },
+          "text": {
+            "gray": "#ced1d6",
+            "blue": "#e7effe"
+          }
+        },
         "segmentedProgressBar": {
           "monochrome": "#ced1d6",
           "success": "#28816b",
@@ -1092,6 +1102,16 @@ const ambossVisualConfiguration = {
             "gray": "#eef2f5"
           }
         },
+        "tag": {
+          "background": {
+            "gray": "#e0e6eb",
+            "blue": "#d2e2f9"
+          },
+          "text": {
+            "gray": "#40515e",
+            "blue": "#1c427d"
+          }
+        },
         "segmentedProgressBar": {
           "monochrome": "#607585",
           "success": "#39d6ac",