@amboss/design-system 1.15.2 → 1.15.3

package/build/esm/src/components/MediaItem/MediaItem.js

@@ -0,0 +1,114 @@
+import _styled from '@emotion/styled/base';
+import React, { useState } from 'react';
+import { Icon } from '../Icon/Icon.js';
+
+const StyledMediaContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e18zu6wq2"
+} : {
+  target: "e18zu6wq2",
+  label: "StyledMediaContainer"
+})(_ref => {
+  let {
+    squareByWidth
+  } = _ref;
+  return {
+    position: "relative",
+    backgroundColor: " transparent",
+    overflow: "hidden",
+    border: "none",
+    width: "100%",
+    borderRadius: "inherit",
+    ...(squareByWidth && {
+      paddingTop: "100%"
+    }),
+    ...(!squareByWidth && {
+      height: "100%"
+    })
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lZGlhSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUI2QiIsImZpbGUiOiJNZWRpYUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb24gfSBmcm9tIFwiLi4vSWNvbi9JY29uXCI7XG5cbmV4cG9ydCB0eXBlIE1lZGlhSXRlbVByb3BzID0ge1xuICBzcmM6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgLyoqIFNldHMgdGhlIGhlaWdodCBvZiB0aGUgbWVkaWEgdG8gZXF1YWwgdGhlIHdpZHRoIHZhbHVlIG1ha2luZyBhIHNxdWFyZSA8YnIvPlxuICAgKi9cbiAgc3F1YXJlQnlXaWR0aD86IGJvb2xlYW47XG4gIC8qKiBTcGVjaWZ5IGZpdCBvZiB0aGUgbWVkaWEgYmFja2dyb3VuZC4gPGJyLz5cbiAgICogXCJjb250YWluXCIgLSB0aGUgbWVkaWEga2VlcHMgaXRzIGFzcGVjdCByYXRpbywgYnV0IGlzIHJlc2l6ZWQgdG8gZml0IHdpdGhpbiB0aGUgZ2l2ZW4gZGltZW5zaW9uLiA8YnIvPlxuICAgKiBcImNvdmVyXCIgLSB0aGUgbWVkaWEga2VlcHMgaXRzIGFzcGVjdCByYXRpbyBhbmQgZmlsbHMgdGhlIGdpdmVuIGRpbWVuc2lvbi4gVGhlIG1lZGlhIHdpbGwgYmUgY2xpcHBlZCB0byBmaXQuXG4gICAqL1xuICBmaXQ6IFwiY292ZXJcIiB8IFwiY29udGFpblwiO1xufTtcblxuY29uc3QgU3R5bGVkTWVkaWFDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8TWVkaWFJdGVtUHJvcHM+PihcbiAgKHsgc3F1YXJlQnlXaWR0aCB9KSA9PiAoe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcIiB0cmFuc3BhcmVudFwiLFxuICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGJvcmRlclJhZGl1czogXCJpbmhlcml0XCIsXG4gICAgLi4uKHNxdWFyZUJ5V2lkdGggJiYgeyBwYWRkaW5nVG9wOiBcIjEwMCVcIiB9KSxcbiAgICAuLi4oIXNxdWFyZUJ5V2lkdGggJiYgeyBoZWlnaHQ6IFwiMTAwJVwiIH0pLFxuICB9KVxuKTtcblxuY29uc3QgU3R5bGVkTWVkaWEgPSBzdHlsZWQuaW1nPFBhcnRpYWw8TWVkaWFJdGVtUHJvcHM+PigoeyB0aGVtZSwgZml0IH0pID0+ICh7XG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogMCxcbiAgbGVmdDogMCxcbiAgZGlzcGxheTogXCJibG9ja1wiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIGJhY2tncm91bmRQb3NpdGlvbjogXCJjZW50ZXJcIixcbiAgb2JqZWN0Rml0OiBmaXQsXG4gIGJhY2tncm91bmRSZXBlYXQ6IFwibm8tcmVwZWF0XCIsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIFwiOmdsb2JhbCguaXNEYXJrbW9kZUFjdGl2ZSkgJlwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gIH0sXG59KSk7XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8UGFydGlhbDxNZWRpYUl0ZW1Qcm9wcz4+KFxuICAoeyB0aGVtZSwgc3F1YXJlQnlXaWR0aCB9KSA9PiAoe1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgdG9wOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC50cmFuc3BhcmVudC5hY3RpdmUsXG4gICAgLi4uKHNxdWFyZUJ5V2lkdGggJiYgeyBwYWRkaW5nVG9wOiBcIjEwMCVcIiB9KSxcbiAgICAuLi4oIXNxdWFyZUJ5V2lkdGggJiYgeyBoZWlnaHQ6IFwiMTAwJVwiIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIE1lZGlhSXRlbSh7XG4gIHNyYyxcbiAgdGl0bGUsXG4gIHNxdWFyZUJ5V2lkdGggPSBmYWxzZSxcbiAgZml0ID0gXCJjb3ZlclwiLFxufTogTWVkaWFJdGVtUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBbc3JjRXJyb3IsIHNldFNyY0Vycm9yXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBpbWFnZSA9IG5ldyBJbWFnZSgpO1xuICBpbWFnZS5zcmMgPSBzcmM7XG4gIGltYWdlLm9uZXJyb3IgPSAoKSA9PiB7XG4gICAgaWYgKCFzcmNFcnJvcikge1xuICAgICAgc2V0U3JjRXJyb3IodHJ1ZSk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZE1lZGlhQ29udGFpbmVyIHNxdWFyZUJ5V2lkdGg9e3NxdWFyZUJ5V2lkdGh9IGRhdGEtZHMtaWQ9XCJNZWRpYUl0ZW1cIj5cbiAgICAgIHshc3JjRXJyb3IgPyAoXG4gICAgICAgIDxTdHlsZWRNZWRpYSBzcmM9e3NyY30gdGl0bGU9e3RpdGxlfSBhbHQ9e3RpdGxlfSBmaXQ9e2ZpdH0gLz5cbiAgICAgICkgOiAoXG4gICAgICAgIDxTdHlsZWRDb250YWluZXIgdGl0bGU9XCJFcnJvciBub3QgZm91bmRcIj5cbiAgICAgICAgICA8SWNvbiBuYW1lPVwiaW1hZ2UtYnJva2VuXCIgY29sb3I9XCJ0ZXJ0aWFyeVwiIC8+XG4gICAgICAgIDwvU3R5bGVkQ29udGFpbmVyPlxuICAgICAgKX1cbiAgICA8L1N0eWxlZE1lZGlhQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
+const StyledMedia = /*#__PURE__*/_styled("img", process.env.NODE_ENV === "production" ? {
+  target: "e18zu6wq1"
+} : {
+  target: "e18zu6wq1",
+  label: "StyledMedia"
+})(_ref2 => {
+  let {
+    theme,
+    fit
+  } = _ref2;
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    display: "block",
+    width: "100%",
+    height: "100%",
+    backgroundPosition: "center",
+    objectFit: fit,
+    backgroundRepeat: "no-repeat",
+    cursor: "pointer",
+    ":global(.isDarkmodeActive) &": {
+      backgroundColor: theme.values.color.background.primary.default
+    }
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lZGlhSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJvQiIsImZpbGUiOiJNZWRpYUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb24gfSBmcm9tIFwiLi4vSWNvbi9JY29uXCI7XG5cbmV4cG9ydCB0eXBlIE1lZGlhSXRlbVByb3BzID0ge1xuICBzcmM6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgLyoqIFNldHMgdGhlIGhlaWdodCBvZiB0aGUgbWVkaWEgdG8gZXF1YWwgdGhlIHdpZHRoIHZhbHVlIG1ha2luZyBhIHNxdWFyZSA8YnIvPlxuICAgKi9cbiAgc3F1YXJlQnlXaWR0aD86IGJvb2xlYW47XG4gIC8qKiBTcGVjaWZ5IGZpdCBvZiB0aGUgbWVkaWEgYmFja2dyb3VuZC4gPGJyLz5cbiAgICogXCJjb250YWluXCIgLSB0aGUgbWVkaWEga2VlcHMgaXRzIGFzcGVjdCByYXRpbywgYnV0IGlzIHJlc2l6ZWQgdG8gZml0IHdpdGhpbiB0aGUgZ2l2ZW4gZGltZW5zaW9uLiA8YnIvPlxuICAgKiBcImNvdmVyXCIgLSB0aGUgbWVkaWEga2VlcHMgaXRzIGFzcGVjdCByYXRpbyBhbmQgZmlsbHMgdGhlIGdpdmVuIGRpbWVuc2lvbi4gVGhlIG1lZGlhIHdpbGwgYmUgY2xpcHBlZCB0byBmaXQuXG4gICAqL1xuICBmaXQ6IFwiY292ZXJcIiB8IFwiY29udGFpblwiO1xufTtcblxuY29uc3QgU3R5bGVkTWVkaWFDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8TWVkaWFJdGVtUHJvcHM+PihcbiAgKHsgc3F1YXJlQnlXaWR0aCB9KSA9PiAoe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcIiB0cmFuc3BhcmVudFwiLFxuICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGJvcmRlclJhZGl1czogXCJpbmhlcml0XCIsXG4gICAgLi4uKHNxdWFyZUJ5V2lkdGggJiYgeyBwYWRkaW5nVG9wOiBcIjEwMCVcIiB9KSxcbiAgICAuLi4oIXNxdWFyZUJ5V2lkdGggJiYgeyBoZWlnaHQ6IFwiMTAwJVwiIH0pLFxuICB9KVxuKTtcblxuY29uc3QgU3R5bGVkTWVkaWEgPSBzdHlsZWQuaW1nPFBhcnRpYWw8TWVkaWFJdGVtUHJvcHM+PigoeyB0aGVtZSwgZml0IH0pID0+ICh7XG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogMCxcbiAgbGVmdDogMCxcbiAgZGlzcGxheTogXCJibG9ja1wiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIGJhY2tncm91bmRQb3NpdGlvbjogXCJjZW50ZXJcIixcbiAgb2JqZWN0Rml0OiBmaXQsXG4gIGJhY2tncm91bmRSZXBlYXQ6IFwibm8tcmVwZWF0XCIsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIFwiOmdsb2JhbCguaXNEYXJrbW9kZUFjdGl2ZSkgJlwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gIH0sXG59KSk7XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8UGFydGlhbDxNZWRpYUl0ZW1Qcm9wcz4+KFxuICAoeyB0aGVtZSwgc3F1YXJlQnlXaWR0aCB9KSA9PiAoe1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgdG9wOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC50cmFuc3BhcmVudC5hY3RpdmUsXG4gICAgLi4uKHNxdWFyZUJ5V2lkdGggJiYgeyBwYWRkaW5nVG9wOiBcIjEwMCVcIiB9KSxcbiAgICAuLi4oIXNxdWFyZUJ5V2lkdGggJiYgeyBoZWlnaHQ6IFwiMTAwJVwiIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIE1lZGlhSXRlbSh7XG4gIHNyYyxcbiAgdGl0bGUsXG4gIHNxdWFyZUJ5V2lkdGggPSBmYWxzZSxcbiAgZml0ID0gXCJjb3ZlclwiLFxufTogTWVkaWFJdGVtUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBbc3JjRXJyb3IsIHNldFNyY0Vycm9yXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBpbWFnZSA9IG5ldyBJbWFnZSgpO1xuICBpbWFnZS5zcmMgPSBzcmM7XG4gIGltYWdlLm9uZXJyb3IgPSAoKSA9PiB7XG4gICAgaWYgKCFzcmNFcnJvcikge1xuICAgICAgc2V0U3JjRXJyb3IodHJ1ZSk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZE1lZGlhQ29udGFpbmVyIHNxdWFyZUJ5V2lkdGg9e3NxdWFyZUJ5V2lkdGh9IGRhdGEtZHMtaWQ9XCJNZWRpYUl0ZW1cIj5cbiAgICAgIHshc3JjRXJyb3IgPyAoXG4gICAgICAgIDxTdHlsZWRNZWRpYSBzcmM9e3NyY30gdGl0bGU9e3RpdGxlfSBhbHQ9e3RpdGxlfSBmaXQ9e2ZpdH0gLz5cbiAgICAgICkgOiAoXG4gICAgICAgIDxTdHlsZWRDb250YWluZXIgdGl0bGU9XCJFcnJvciBub3QgZm91bmRcIj5cbiAgICAgICAgICA8SWNvbiBuYW1lPVwiaW1hZ2UtYnJva2VuXCIgY29sb3I9XCJ0ZXJ0aWFyeVwiIC8+XG4gICAgICAgIDwvU3R5bGVkQ29udGFpbmVyPlxuICAgICAgKX1cbiAgICA8L1N0eWxlZE1lZGlhQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
+const StyledContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e18zu6wq0"
+} : {
+  target: "e18zu6wq0",
+  label: "StyledContainer"
+})(_ref3 => {
+  let {
+    theme,
+    squareByWidth
+  } = _ref3;
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    backgroundColor: theme.values.color.background.transparent.active,
+    ...(squareByWidth && {
+      paddingTop: "100%"
+    }),
+    ...(!squareByWidth && {
+      height: "100%"
+    })
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lZGlhSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEN3QiIsImZpbGUiOiJNZWRpYUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb24gfSBmcm9tIFwiLi4vSWNvbi9JY29uXCI7XG5cbmV4cG9ydCB0eXBlIE1lZGlhSXRlbVByb3BzID0ge1xuICBzcmM6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgLyoqIFNldHMgdGhlIGhlaWdodCBvZiB0aGUgbWVkaWEgdG8gZXF1YWwgdGhlIHdpZHRoIHZhbHVlIG1ha2luZyBhIHNxdWFyZSA8YnIvPlxuICAgKi9cbiAgc3F1YXJlQnlXaWR0aD86IGJvb2xlYW47XG4gIC8qKiBTcGVjaWZ5IGZpdCBvZiB0aGUgbWVkaWEgYmFja2dyb3VuZC4gPGJyLz5cbiAgICogXCJjb250YWluXCIgLSB0aGUgbWVkaWEga2VlcHMgaXRzIGFzcGVjdCByYXRpbywgYnV0IGlzIHJlc2l6ZWQgdG8gZml0IHdpdGhpbiB0aGUgZ2l2ZW4gZGltZW5zaW9uLiA8YnIvPlxuICAgKiBcImNvdmVyXCIgLSB0aGUgbWVkaWEga2VlcHMgaXRzIGFzcGVjdCByYXRpbyBhbmQgZmlsbHMgdGhlIGdpdmVuIGRpbWVuc2lvbi4gVGhlIG1lZGlhIHdpbGwgYmUgY2xpcHBlZCB0byBmaXQuXG4gICAqL1xuICBmaXQ6IFwiY292ZXJcIiB8IFwiY29udGFpblwiO1xufTtcblxuY29uc3QgU3R5bGVkTWVkaWFDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8TWVkaWFJdGVtUHJvcHM+PihcbiAgKHsgc3F1YXJlQnlXaWR0aCB9KSA9PiAoe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcIiB0cmFuc3BhcmVudFwiLFxuICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGJvcmRlclJhZGl1czogXCJpbmhlcml0XCIsXG4gICAgLi4uKHNxdWFyZUJ5V2lkdGggJiYgeyBwYWRkaW5nVG9wOiBcIjEwMCVcIiB9KSxcbiAgICAuLi4oIXNxdWFyZUJ5V2lkdGggJiYgeyBoZWlnaHQ6IFwiMTAwJVwiIH0pLFxuICB9KVxuKTtcblxuY29uc3QgU3R5bGVkTWVkaWEgPSBzdHlsZWQuaW1nPFBhcnRpYWw8TWVkaWFJdGVtUHJvcHM+PigoeyB0aGVtZSwgZml0IH0pID0+ICh7XG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogMCxcbiAgbGVmdDogMCxcbiAgZGlzcGxheTogXCJibG9ja1wiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIGJhY2tncm91bmRQb3NpdGlvbjogXCJjZW50ZXJcIixcbiAgb2JqZWN0Rml0OiBmaXQsXG4gIGJhY2tncm91bmRSZXBlYXQ6IFwibm8tcmVwZWF0XCIsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIFwiOmdsb2JhbCguaXNEYXJrbW9kZUFjdGl2ZSkgJlwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gIH0sXG59KSk7XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8UGFydGlhbDxNZWRpYUl0ZW1Qcm9wcz4+KFxuICAoeyB0aGVtZSwgc3F1YXJlQnlXaWR0aCB9KSA9PiAoe1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgdG9wOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC50cmFuc3BhcmVudC5hY3RpdmUsXG4gICAgLi4uKHNxdWFyZUJ5V2lkdGggJiYgeyBwYWRkaW5nVG9wOiBcIjEwMCVcIiB9KSxcbiAgICAuLi4oIXNxdWFyZUJ5V2lkdGggJiYgeyBoZWlnaHQ6IFwiMTAwJVwiIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIE1lZGlhSXRlbSh7XG4gIHNyYyxcbiAgdGl0bGUsXG4gIHNxdWFyZUJ5V2lkdGggPSBmYWxzZSxcbiAgZml0ID0gXCJjb3ZlclwiLFxufTogTWVkaWFJdGVtUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBbc3JjRXJyb3IsIHNldFNyY0Vycm9yXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBpbWFnZSA9IG5ldyBJbWFnZSgpO1xuICBpbWFnZS5zcmMgPSBzcmM7XG4gIGltYWdlLm9uZXJyb3IgPSAoKSA9PiB7XG4gICAgaWYgKCFzcmNFcnJvcikge1xuICAgICAgc2V0U3JjRXJyb3IodHJ1ZSk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZE1lZGlhQ29udGFpbmVyIHNxdWFyZUJ5V2lkdGg9e3NxdWFyZUJ5V2lkdGh9IGRhdGEtZHMtaWQ9XCJNZWRpYUl0ZW1cIj5cbiAgICAgIHshc3JjRXJyb3IgPyAoXG4gICAgICAgIDxTdHlsZWRNZWRpYSBzcmM9e3NyY30gdGl0bGU9e3RpdGxlfSBhbHQ9e3RpdGxlfSBmaXQ9e2ZpdH0gLz5cbiAgICAgICkgOiAoXG4gICAgICAgIDxTdHlsZWRDb250YWluZXIgdGl0bGU9XCJFcnJvciBub3QgZm91bmRcIj5cbiAgICAgICAgICA8SWNvbiBuYW1lPVwiaW1hZ2UtYnJva2VuXCIgY29sb3I9XCJ0ZXJ0aWFyeVwiIC8+XG4gICAgICAgIDwvU3R5bGVkQ29udGFpbmVyPlxuICAgICAgKX1cbiAgICA8L1N0eWxlZE1lZGlhQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
+function MediaItem(_ref4) {
+  let {
+    src,
+    title,
+    squareByWidth = false,
+    fit = "cover"
+  } = _ref4;
+  const [srcError, setSrcError] = useState(false);
+  const image = new Image();
+  image.src = src;
+  image.onerror = () => {
+    if (!srcError) {
+      setSrcError(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledMediaContainer, {
+    squareByWidth: squareByWidth,
+    "data-ds-id": "MediaItem"
+  }, !srcError ? /*#__PURE__*/React.createElement(StyledMedia, {
+    src: src,
+    title: title,
+    alt: title,
+    fit: fit
+  }) : /*#__PURE__*/React.createElement(StyledContainer, {
+    title: "Error not found"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "image-broken",
+    color: "tertiary"
+  })));
+}
+
+export { MediaItem };
+//# sourceMappingURL=MediaItem.js.map

package/build/esm/src/components/MediaItem/MediaItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaItem.js","sources":["../../../../../src/components/MediaItem/MediaItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"../Icon/Icon\";\n\nexport type MediaItemProps = {\n  src: string;\n  title: string;\n  /** Sets the height of the media to equal the width value making a square <br/>\n   */\n  squareByWidth?: boolean;\n  /** Specify fit of the media background. <br/>\n   * \"contain\" - the media keeps its aspect ratio, but is resized to fit within the given dimension. <br/>\n   * \"cover\" - the media keeps its aspect ratio and fills the given dimension. The media will be clipped to fit.\n   */\n  fit: \"cover\" | \"contain\";\n};\n\nconst StyledMediaContainer = styled.div<Partial<MediaItemProps>>(\n  ({ squareByWidth }) => ({\n    position: \"relative\",\n    backgroundColor: \" transparent\",\n    overflow: \"hidden\",\n    border: \"none\",\n    width: \"100%\",\n    borderRadius: \"inherit\",\n    ...(squareByWidth && { paddingTop: \"100%\" }),\n    ...(!squareByWidth && { height: \"100%\" }),\n  })\n);\n\nconst StyledMedia = styled.img<Partial<MediaItemProps>>(({ theme, fit }) => ({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  display: \"block\",\n  width: \"100%\",\n  height: \"100%\",\n  backgroundPosition: \"center\",\n  objectFit: fit,\n  backgroundRepeat: \"no-repeat\",\n  cursor: \"pointer\",\n  \":global(.isDarkmodeActive) &\": {\n    backgroundColor: theme.values.color.background.primary.default,\n  },\n}));\n\nconst StyledContainer = styled.div<Partial<MediaItemProps>>(\n  ({ theme, squareByWidth }) => ({\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    backgroundColor: theme.values.color.background.transparent.active,\n    ...(squareByWidth && { paddingTop: \"100%\" }),\n    ...(!squareByWidth && { height: \"100%\" }),\n  })\n);\n\nexport function MediaItem({\n  src,\n  title,\n  squareByWidth = false,\n  fit = \"cover\",\n}: MediaItemProps): React.ReactElement {\n  const [srcError, setSrcError] = useState(false);\n\n  const image = new Image();\n  image.src = src;\n  image.onerror = () => {\n    if (!srcError) {\n      setSrcError(true);\n    }\n  };\n\n  return (\n    <StyledMediaContainer squareByWidth={squareByWidth} data-ds-id=\"MediaItem\">\n      {!srcError ? (\n        <StyledMedia src={src} title={title} alt={title} fit={fit} />\n      ) : (\n        <StyledContainer title=\"Error not found\">\n          <Icon name=\"image-broken\" color=\"tertiary\" />\n        </StyledContainer>\n      )}\n    </StyledMediaContainer>\n  );\n}\n"],"names":["StyledMediaContainer","_styled","process","env","NODE_ENV","target","label","_ref","squareByWidth","position","backgroundColor","overflow","border","width","borderRadius","paddingTop","height","StyledMedia","_ref2","theme","fit","top","left","display","backgroundPosition","objectFit","backgroundRepeat","cursor","values","color","background","primary","default","StyledContainer","_ref3","alignItems","justifyContent","transparent","active","MediaItem","_ref4","src","title","srcError","setSrcError","useState","image","Image","onerror","React","createElement","alt","Icon","name"],"mappings":"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"}

package/build/esm/src/components/MediaViewerBar/MediaViewerBar.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+export declare type MediaViewerBarProps = {
+    children?: ReactElement | ReactElement[];
+    hasSeparator?: boolean;
+    "data-e2e-test-id"?: string;
+};
+export declare function MediaViewerBar({ children, hasSeparator, "data-e2e-test-id": dataE2eTestId, }: MediaViewerBarProps): ReactElement;

package/build/esm/src/components/MediaViewerBar/MediaViewerBar.js

@@ -0,0 +1,67 @@
+import _styled from '@emotion/styled/base';
+import React from 'react';
+import { Inline } from '../Inline/Inline.js';
+import { flattenChildren } from '../../shared/flattenChildren.js';
+import { SubThemeProvider } from '../SubThemeProvider/SubThemeProvider.js';
+
+const StyledMediaViewerBar = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1l20w891"
+} : {
+  target: "e1l20w891",
+  label: "StyledMediaViewerBar"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    display: "inline-flex",
+    borderRadius: theme.variables.size.spacing.xxs,
+    height: theme.variables.size.spacing.l,
+    backgroundColor: theme.values.color.background.primary.default,
+    color: theme.values.color.text.secondary.default,
+    overflow: "hidden",
+    "> div": {
+      width: "100%",
+      "> div": {
+        lineHeight: "normal"
+      }
+    }
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lZGlhVmlld2VyQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNNkIiLCJmaWxlIjoiTWVkaWFWaWV3ZXJCYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0RWxlbWVudCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBJbmxpbmUgfSBmcm9tIFwiLi4vSW5saW5lL0lubGluZVwiO1xuaW1wb3J0IHsgZmxhdHRlbkNoaWxkcmVuIH0gZnJvbSBcIi4uLy4uL3NoYXJlZC9mbGF0dGVuQ2hpbGRyZW5cIjtcbmltcG9ydCB7IFN1YlRoZW1lUHJvdmlkZXIgfSBmcm9tIFwiLi4vU3ViVGhlbWVQcm92aWRlci9TdWJUaGVtZVByb3ZpZGVyXCI7XG5cbmNvbnN0IFN0eWxlZE1lZGlhVmlld2VyQmFyID0gc3R5bGVkLmRpdigoeyB0aGVtZSB9KSA9PiAoe1xuICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gIGJvcmRlclJhZGl1czogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gIGhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5sLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLnByaW1hcnkuZGVmYXVsdCxcbiAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LnNlY29uZGFyeS5kZWZhdWx0LFxuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgXCI+IGRpdlwiOiB7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIFwiPiBkaXZcIjoge1xuICAgICAgbGluZUhlaWdodDogXCJub3JtYWxcIixcbiAgICB9LFxuICB9LFxufSkpO1xuXG5jb25zdCBTdHlsZWRTZXBhcmF0b3IgPSBzdHlsZWQuZGl2KCh7IHRoZW1lIH0pID0+ICh7XG4gIHdpZHRoOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5kaW1lbnNpb24ubWVkaWFWaWV3ZXJCYXIuc2VwYXJhdG9yLndpZHRoLFxuICBoZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG59KSk7XG5cbmV4cG9ydCB0eXBlIE1lZGlhVmlld2VyQmFyUHJvcHMgPSB7XG4gIGNoaWxkcmVuPzogUmVhY3RFbGVtZW50IHwgUmVhY3RFbGVtZW50W107XG4gIGhhc1NlcGFyYXRvcj86IGJvb2xlYW47XG4gIFwiZGF0YS1lMmUtdGVzdC1pZFwiPzogc3RyaW5nO1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIE1lZGlhVmlld2VyQmFyKHtcbiAgY2hpbGRyZW4sXG4gIGhhc1NlcGFyYXRvcixcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG59OiBNZWRpYVZpZXdlckJhclByb3BzKTogUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgZmxhdHRlbmVkQ2hpbGRyZW4gPSBmbGF0dGVuQ2hpbGRyZW4oY2hpbGRyZW4pO1xuXG4gIHJldHVybiAoXG4gICAgPFN1YlRoZW1lUHJvdmlkZXIgbmFtZT1cImRpbW1lZFwiPlxuICAgICAgPFN0eWxlZE1lZGlhVmlld2VyQmFyXG4gICAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICAgIGRhdGEtZHMtaWQ9XCJNZWRpYVZpZXdlckJhclwiXG4gICAgICA+XG4gICAgICAgIDxJbmxpbmUgc3BhY2U9XCJ6ZXJvXCIgdkFsaWduSXRlbXM9XCJjZW50ZXJcIiBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgbm9XcmFwPlxuICAgICAgICAgIHtSZWFjdC5DaGlsZHJlbi5tYXAoZmxhdHRlbmVkQ2hpbGRyZW4sIChjaGlsZCwgaW5kZXgpID0+IChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIHtoYXNTZXBhcmF0b3IgJiYgaW5kZXggPiAwICYmIDxTdHlsZWRTZXBhcmF0b3IgLz59XG4gICAgICAgICAgICAgIHtjaGlsZH1cbiAgICAgICAgICAgIDwvPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L0lubGluZT5cbiAgICAgIDwvU3R5bGVkTWVkaWFWaWV3ZXJCYXI+XG4gICAgPC9TdWJUaGVtZVByb3ZpZGVyPlxuICApO1xufVxuIl19 */");
+const StyledSeparator = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1l20w890"
+} : {
+  target: "e1l20w890",
+  label: "StyledSeparator"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return {
+    width: theme.variables.size.dimension.mediaViewerBar.separator.width,
+    height: theme.variables.size.spacing.l,
+    backgroundColor: theme.values.color.background.primary.default
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lZGlhVmlld2VyQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQndCIiwiZmlsZSI6Ik1lZGlhVmlld2VyQmFyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdEVsZW1lbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uL0lubGluZS9JbmxpbmVcIjtcbmltcG9ydCB7IGZsYXR0ZW5DaGlsZHJlbiB9IGZyb20gXCIuLi8uLi9zaGFyZWQvZmxhdHRlbkNoaWxkcmVuXCI7XG5pbXBvcnQgeyBTdWJUaGVtZVByb3ZpZGVyIH0gZnJvbSBcIi4uL1N1YlRoZW1lUHJvdmlkZXIvU3ViVGhlbWVQcm92aWRlclwiO1xuXG5jb25zdCBTdHlsZWRNZWRpYVZpZXdlckJhciA9IHN0eWxlZC5kaXYoKHsgdGhlbWUgfSkgPT4gKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzLFxuICBoZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gIGNvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGV4dC5zZWNvbmRhcnkuZGVmYXVsdCxcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIFwiPiBkaXZcIjoge1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBcIj4gZGl2XCI6IHtcbiAgICAgIGxpbmVIZWlnaHQ6IFwibm9ybWFsXCIsXG4gICAgfSxcbiAgfSxcbn0pKTtcblxuY29uc3QgU3R5bGVkU2VwYXJhdG9yID0gc3R5bGVkLmRpdigoeyB0aGVtZSB9KSA9PiAoe1xuICB3aWR0aDogdGhlbWUudmFyaWFibGVzLnNpemUuZGltZW5zaW9uLm1lZGlhVmlld2VyQmFyLnNlcGFyYXRvci53aWR0aCxcbiAgaGVpZ2h0OiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLmwsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQucHJpbWFyeS5kZWZhdWx0LFxufSkpO1xuXG5leHBvcnQgdHlwZSBNZWRpYVZpZXdlckJhclByb3BzID0ge1xuICBjaGlsZHJlbj86IFJlYWN0RWxlbWVudCB8IFJlYWN0RWxlbWVudFtdO1xuICBoYXNTZXBhcmF0b3I/OiBib29sZWFuO1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbn07XG5cbmV4cG9ydCBmdW5jdGlvbiBNZWRpYVZpZXdlckJhcih7XG4gIGNoaWxkcmVuLFxuICBoYXNTZXBhcmF0b3IsXG4gIFwiZGF0YS1lMmUtdGVzdC1pZFwiOiBkYXRhRTJlVGVzdElkLFxufTogTWVkaWFWaWV3ZXJCYXJQcm9wcyk6IFJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IGZsYXR0ZW5lZENoaWxkcmVuID0gZmxhdHRlbkNoaWxkcmVuKGNoaWxkcmVuKTtcblxuICByZXR1cm4gKFxuICAgIDxTdWJUaGVtZVByb3ZpZGVyIG5hbWU9XCJkaW1tZWRcIj5cbiAgICAgIDxTdHlsZWRNZWRpYVZpZXdlckJhclxuICAgICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgICBkYXRhLWRzLWlkPVwiTWVkaWFWaWV3ZXJCYXJcIlxuICAgICAgPlxuICAgICAgICA8SW5saW5lIHNwYWNlPVwiemVyb1wiIHZBbGlnbkl0ZW1zPVwiY2VudGVyXCIgYWxpZ25JdGVtcz1cImNlbnRlclwiIG5vV3JhcD5cbiAgICAgICAgICB7UmVhY3QuQ2hpbGRyZW4ubWFwKGZsYXR0ZW5lZENoaWxkcmVuLCAoY2hpbGQsIGluZGV4KSA9PiAoXG4gICAgICAgICAgICA8PlxuICAgICAgICAgICAgICB7aGFzU2VwYXJhdG9yICYmIGluZGV4ID4gMCAmJiA8U3R5bGVkU2VwYXJhdG9yIC8+fVxuICAgICAgICAgICAgICB7Y2hpbGR9XG4gICAgICAgICAgICA8Lz5cbiAgICAgICAgICApKX1cbiAgICAgICAgPC9JbmxpbmU+XG4gICAgICA8L1N0eWxlZE1lZGlhVmlld2VyQmFyPlxuICAgIDwvU3ViVGhlbWVQcm92aWRlcj5cbiAgKTtcbn1cbiJdfQ== */");
+function MediaViewerBar(_ref3) {
+  let {
+    children,
+    hasSeparator,
+    "data-e2e-test-id": dataE2eTestId
+  } = _ref3;
+  const flattenedChildren = flattenChildren(children);
+  return /*#__PURE__*/React.createElement(SubThemeProvider, {
+    name: "dimmed"
+  }, /*#__PURE__*/React.createElement(StyledMediaViewerBar, {
+    "data-e2e-test-id": dataE2eTestId,
+    "data-ds-id": "MediaViewerBar"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "zero",
+    vAlignItems: "center",
+    alignItems: "center",
+    noWrap: true
+  }, React.Children.map(flattenedChildren, (child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, hasSeparator && index > 0 && /*#__PURE__*/React.createElement(StyledSeparator, null), child)))));
+}
+
+export { MediaViewerBar };
+//# sourceMappingURL=MediaViewerBar.js.map

package/build/esm/src/components/MediaViewerBar/MediaViewerBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewerBar.js","sources":["../../../../../src/components/MediaViewerBar/MediaViewerBar.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Inline } from \"../Inline/Inline\";\nimport { flattenChildren } from \"../../shared/flattenChildren\";\nimport { SubThemeProvider } from \"../SubThemeProvider/SubThemeProvider\";\n\nconst StyledMediaViewerBar = styled.div(({ theme }) => ({\n  display: \"inline-flex\",\n  borderRadius: theme.variables.size.spacing.xxs,\n  height: theme.variables.size.spacing.l,\n  backgroundColor: theme.values.color.background.primary.default,\n  color: theme.values.color.text.secondary.default,\n  overflow: \"hidden\",\n  \"> div\": {\n    width: \"100%\",\n    \"> div\": {\n      lineHeight: \"normal\",\n    },\n  },\n}));\n\nconst StyledSeparator = styled.div(({ theme }) => ({\n  width: theme.variables.size.dimension.mediaViewerBar.separator.width,\n  height: theme.variables.size.spacing.l,\n  backgroundColor: theme.values.color.background.primary.default,\n}));\n\nexport type MediaViewerBarProps = {\n  children?: ReactElement | ReactElement[];\n  hasSeparator?: boolean;\n  \"data-e2e-test-id\"?: string;\n};\n\nexport function MediaViewerBar({\n  children,\n  hasSeparator,\n  \"data-e2e-test-id\": dataE2eTestId,\n}: MediaViewerBarProps): ReactElement {\n  const flattenedChildren = flattenChildren(children);\n\n  return (\n    <SubThemeProvider name=\"dimmed\">\n      <StyledMediaViewerBar\n        data-e2e-test-id={dataE2eTestId}\n        data-ds-id=\"MediaViewerBar\"\n      >\n        <Inline space=\"zero\" vAlignItems=\"center\" alignItems=\"center\" noWrap>\n          {React.Children.map(flattenedChildren, (child, index) => (\n            <>\n              {hasSeparator && index > 0 && <StyledSeparator />}\n              {child}\n            </>\n          ))}\n        </Inline>\n      </StyledMediaViewerBar>\n    </SubThemeProvider>\n  );\n}\n"],"names":["StyledMediaViewerBar","_styled","process","env","NODE_ENV","target","label","_ref","theme","display","borderRadius","variables","size","spacing","xxs","height","l","backgroundColor","values","color","background","primary","default","text","secondary","overflow","width","lineHeight","StyledSeparator","_ref2","dimension","mediaViewerBar","separator","MediaViewerBar","_ref3","children","hasSeparator","dataE2eTestId","flattenedChildren","flattenChildren","React","createElement","SubThemeProvider","name","Inline","space","vAlignItems","alignItems","noWrap","Children","map","child","index","Fragment"],"mappings":"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"}

package/build/esm/src/components/Notification/ExpandedContent.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function ExpandedContent(): React.ReactElement;

package/build/esm/src/components/Notification/Notification.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { IconName } from "../Icon/Icon";
+export declare type NotificationProps = {
+    "data-e2e-test-id"?: string;
+    text?: string;
+    icon?: IconName;
+    isDismissable?: boolean;
+    callToActionLabel?: string;
+    expandButtonLabel?: string;
+    shrinkButtonLabel?: string;
+    expandable?: boolean;
+    onClickCallToAction?: (e: React.MouseEvent) => void;
+    onClickDismiss?: () => void;
+    children?: React.ReactNode;
+};
+export declare function Notification({ text, icon, isDismissable, callToActionLabel, onClickDismiss, onClickCallToAction, expandable, expandButtonLabel, shrinkButtonLabel, children, "data-e2e-test-id": dataE2eTestId, }: NotificationProps): React.ReactElement;

package/build/esm/src/components/Notification/Notification.js

@@ -0,0 +1,102 @@
+import _styled from '@emotion/styled/base';
+import React, { useState } from 'react';
+import { Card } from '../Card/Card.js';
+import { Box } from '../Box/Box.js';
+import { Columns, Column } from '../Column/Columns.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Typography/Text/Text.js';
+
+const ANIMATION_TIME = 200;
+const StyledExpandingContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1cdeufo1"
+} : {
+  target: "e1cdeufo1",
+  label: "StyledExpandingContainer"
+})(_ref => {
+  let {
+    isDismissed
+  } = _ref;
+  return {
+    transform: `translateY(${isDismissed ? "calc(-100% - 8px)" : "0%"})`,
+    transition: `transform ${isDismissed ? ANIMATION_TIME : 0}ms cubic-bezier(0.0, 0.0, 0.25, 1.0)`
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlmaWNhdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJpQyIsImZpbGUiOiJOb3RpZmljYXRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IENhcmQgfSBmcm9tIFwiLi4vQ2FyZC9DYXJkXCI7XG5pbXBvcnQgeyBCb3ggfSBmcm9tIFwiLi4vQm94L0JveFwiO1xuaW1wb3J0IHsgQ29sdW1ucywgQ29sdW1uIH0gZnJvbSBcIi4uL0NvbHVtbi9Db2x1bW5zXCI7XG5pbXBvcnQgeyBCdXR0b24gfSBmcm9tIFwiLi4vQnV0dG9uL0J1dHRvblwiO1xuaW1wb3J0IHsgSWNvbiwgSWNvbk5hbWUgfSBmcm9tIFwiLi4vSWNvbi9JY29uXCI7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSBcIi4uL1R5cG9ncmFwaHkvVGV4dC9UZXh0XCI7XG5cbmNvbnN0IEFOSU1BVElPTl9USU1FID0gMjAwO1xuXG5leHBvcnQgdHlwZSBOb3RpZmljYXRpb25Qcm9wcyA9IHtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG4gIHRleHQ/OiBzdHJpbmc7XG4gIGljb24/OiBJY29uTmFtZTtcbiAgaXNEaXNtaXNzYWJsZT86IGJvb2xlYW47XG4gIGNhbGxUb0FjdGlvbkxhYmVsPzogc3RyaW5nO1xuICBleHBhbmRCdXR0b25MYWJlbD86IHN0cmluZztcbiAgc2hyaW5rQnV0dG9uTGFiZWw/OiBzdHJpbmc7XG4gIGV4cGFuZGFibGU/OiBib29sZWFuO1xuICBvbkNsaWNrQ2FsbFRvQWN0aW9uPzogKGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIG9uQ2xpY2tEaXNtaXNzPzogKCkgPT4gdm9pZDtcbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGU7XG59O1xuXG5jb25zdCBTdHlsZWRFeHBhbmRpbmdDb250YWluZXIgPSBzdHlsZWQuZGl2PHtcbiAgaXNEaXNtaXNzZWQ6IGJvb2xlYW47XG59PigoeyBpc0Rpc21pc3NlZCB9KSA9PiAoe1xuICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVZKCR7aXNEaXNtaXNzZWQgPyBcImNhbGMoLTEwMCUgLSA4cHgpXCIgOiBcIjAlXCJ9KWAsXG4gIHRyYW5zaXRpb246IGB0cmFuc2Zvcm0gJHtcbiAgICBpc0Rpc21pc3NlZCA/IEFOSU1BVElPTl9USU1FIDogMFxuICB9bXMgY3ViaWMtYmV6aWVyKDAuMCwgMC4wLCAwLjI1LCAxLjApYCxcbn0pKTtcblxuY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkLmRpdigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIE5vdGlmaWNhdGlvbih7XG4gIHRleHQsXG4gIGljb24sXG4gIGlzRGlzbWlzc2FibGUsXG4gIGNhbGxUb0FjdGlvbkxhYmVsLFxuICBvbkNsaWNrRGlzbWlzcyxcbiAgb25DbGlja0NhbGxUb0FjdGlvbixcbiAgZXhwYW5kYWJsZSxcbiAgZXhwYW5kQnV0dG9uTGFiZWwsXG4gIHNocmlua0J1dHRvbkxhYmVsLFxuICBjaGlsZHJlbixcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG59OiBOb3RpZmljYXRpb25Qcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IFtpc0V4cGFuZGVkLCBzZXRJc0V4cGFuZGVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGlzbWlzc2VkLCBzZXRJc0Rpc21pc3NlZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgZGlzbWlzcyA9ICgpID0+IHtcbiAgICBzZXRJc0Rpc21pc3NlZCh0cnVlKTtcbiAgICBzZXRUaW1lb3V0KG9uQ2xpY2tEaXNtaXNzLCBBTklNQVRJT05fVElNRSk7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ29udGFpbmVyIGRhdGEtZHMtaWQ9XCJOb3RpZmljYXRpb25cIj5cbiAgICAgIDxTdHlsZWRFeHBhbmRpbmdDb250YWluZXIgaXNEaXNtaXNzZWQ9e2lzRGlzbWlzc2VkfT5cbiAgICAgICAgPENhcmQgc3F1YXJlQ29ybmVycyBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfT5cbiAgICAgICAgICA8Qm94IHNwYWNlPVwic1wiPlxuICAgICAgICAgICAgPENvbHVtbnMgZ2FwPVwic1wiIHZBbGlnbkl0ZW1zPVwidG9wXCI+XG4gICAgICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgICAgICA8Q29sdW1uIHNpemU9XCJuYXJyb3dcIj5cbiAgICAgICAgICAgICAgICAgIDxCb3ggdlNwYWNlPVwieHhzXCIgc3BhY2U9XCJ6ZXJvXCI+XG4gICAgICAgICAgICAgICAgICAgIDxJY29uIG5hbWU9e2ljb259IGNvbG9yPVwicHJpbWFyeVwiIGRhdGEtdGVzdGlkPVwiaWNvblwiIC8+XG4gICAgICAgICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgICAgICA8L0NvbHVtbj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgPENvbHVtbiBzaXplPVwiZmlsbFwiPlxuICAgICAgICAgICAgICAgIDxCb3ggdlNwYWNlPVwieHhzXCIgc3BhY2U9XCJ6ZXJvXCI+XG4gICAgICAgICAgICAgICAgICA8VGV4dD57dGV4dH08L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgICAgIDwvQ29sdW1uPntcIiBcIn1cbiAgICAgICAgICAgICAgeyhjYWxsVG9BY3Rpb25MYWJlbCB8fCBleHBhbmRhYmxlKSAmJiAoXG4gICAgICAgICAgICAgICAgPENvbHVtblxuICAgICAgICAgICAgICAgICAgc2l6ZT17WzEyLCBcIm5hcnJvd1wiLCBcIm5hcnJvd1wiXX1cbiAgICAgICAgICAgICAgICAgIG9yZGVyPXtbXCJsYXN0XCIsIFwidW5zZXRcIiwgXCJ1bnNldFwiXX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICB7Y2FsbFRvQWN0aW9uTGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8QnV0dG9uIHNpemU9XCJzXCIgZnVsbFdpZHRoIG9uQ2xpY2s9e29uQ2xpY2tDYWxsVG9BY3Rpb259PlxuICAgICAgICAgICAgICAgICAgICAgIHtjYWxsVG9BY3Rpb25MYWJlbH1cbiAgICAgICAgICAgICAgICAgICAgPC9CdXR0b24+XG4gICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAge2V4cGFuZGFibGUgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8QnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICAgc2l6ZT1cInNcIlxuICAgICAgICAgICAgICAgICAgICAgIGZ1bGxXaWR0aFxuICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHNldElzRXhwYW5kZWQoIWlzRXhwYW5kZWQpfVxuICAgICAgICAgICAgICAgICAgICAgIHJpZ2h0SWNvbj17aXNFeHBhbmRlZCA/IFwiY2hldnJvbi11cFwiIDogXCJjaGV2cm9uLWRvd25cIn1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgIHtpc0V4cGFuZGVkID8gc2hyaW5rQnV0dG9uTGFiZWwgOiBleHBhbmRCdXR0b25MYWJlbH1cbiAgICAgICAgICAgICAgICAgICAgPC9CdXR0b24+XG4gICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIDwvQ29sdW1uPlxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB7aXNEaXNtaXNzYWJsZSAmJiAoXG4gICAgICAgICAgICAgICAgPENvbHVtbiBzaXplPVwibmFycm93XCI+XG4gICAgICAgICAgICAgICAgICA8QnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGxlZnRJY29uPVwieFwiXG4gICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJ0ZXJ0aWFyeVwiXG4gICAgICAgICAgICAgICAgICAgIHNpemU9XCJzXCJcbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17ZGlzbWlzc31cbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9Db2x1bW4+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L0NvbHVtbnM+XG4gICAgICAgICAgICB7aXNFeHBhbmRlZCAmJiBjaGlsZHJlbn1cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9DYXJkPlxuICAgICAgPC9TdHlsZWRFeHBhbmRpbmdDb250YWluZXI+XG4gICAgPC9TdHlsZWRDb250YWluZXI+XG4gICk7XG59XG4iXX0= */");
+const StyledContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1cdeufo0"
+} : {
+  target: "e1cdeufo0",
+  label: "StyledContainer"
+})(() => ({
+  overflow: "hidden"
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlmaWNhdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0N3QiIsImZpbGUiOiJOb3RpZmljYXRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IENhcmQgfSBmcm9tIFwiLi4vQ2FyZC9DYXJkXCI7XG5pbXBvcnQgeyBCb3ggfSBmcm9tIFwiLi4vQm94L0JveFwiO1xuaW1wb3J0IHsgQ29sdW1ucywgQ29sdW1uIH0gZnJvbSBcIi4uL0NvbHVtbi9Db2x1bW5zXCI7XG5pbXBvcnQgeyBCdXR0b24gfSBmcm9tIFwiLi4vQnV0dG9uL0J1dHRvblwiO1xuaW1wb3J0IHsgSWNvbiwgSWNvbk5hbWUgfSBmcm9tIFwiLi4vSWNvbi9JY29uXCI7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSBcIi4uL1R5cG9ncmFwaHkvVGV4dC9UZXh0XCI7XG5cbmNvbnN0IEFOSU1BVElPTl9USU1FID0gMjAwO1xuXG5leHBvcnQgdHlwZSBOb3RpZmljYXRpb25Qcm9wcyA9IHtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG4gIHRleHQ/OiBzdHJpbmc7XG4gIGljb24/OiBJY29uTmFtZTtcbiAgaXNEaXNtaXNzYWJsZT86IGJvb2xlYW47XG4gIGNhbGxUb0FjdGlvbkxhYmVsPzogc3RyaW5nO1xuICBleHBhbmRCdXR0b25MYWJlbD86IHN0cmluZztcbiAgc2hyaW5rQnV0dG9uTGFiZWw/OiBzdHJpbmc7XG4gIGV4cGFuZGFibGU/OiBib29sZWFuO1xuICBvbkNsaWNrQ2FsbFRvQWN0aW9uPzogKGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIG9uQ2xpY2tEaXNtaXNzPzogKCkgPT4gdm9pZDtcbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGU7XG59O1xuXG5jb25zdCBTdHlsZWRFeHBhbmRpbmdDb250YWluZXIgPSBzdHlsZWQuZGl2PHtcbiAgaXNEaXNtaXNzZWQ6IGJvb2xlYW47XG59PigoeyBpc0Rpc21pc3NlZCB9KSA9PiAoe1xuICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVZKCR7aXNEaXNtaXNzZWQgPyBcImNhbGMoLTEwMCUgLSA4cHgpXCIgOiBcIjAlXCJ9KWAsXG4gIHRyYW5zaXRpb246IGB0cmFuc2Zvcm0gJHtcbiAgICBpc0Rpc21pc3NlZCA/IEFOSU1BVElPTl9USU1FIDogMFxuICB9bXMgY3ViaWMtYmV6aWVyKDAuMCwgMC4wLCAwLjI1LCAxLjApYCxcbn0pKTtcblxuY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkLmRpdigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIE5vdGlmaWNhdGlvbih7XG4gIHRleHQsXG4gIGljb24sXG4gIGlzRGlzbWlzc2FibGUsXG4gIGNhbGxUb0FjdGlvbkxhYmVsLFxuICBvbkNsaWNrRGlzbWlzcyxcbiAgb25DbGlja0NhbGxUb0FjdGlvbixcbiAgZXhwYW5kYWJsZSxcbiAgZXhwYW5kQnV0dG9uTGFiZWwsXG4gIHNocmlua0J1dHRvbkxhYmVsLFxuICBjaGlsZHJlbixcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG59OiBOb3RpZmljYXRpb25Qcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IFtpc0V4cGFuZGVkLCBzZXRJc0V4cGFuZGVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGlzbWlzc2VkLCBzZXRJc0Rpc21pc3NlZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgZGlzbWlzcyA9ICgpID0+IHtcbiAgICBzZXRJc0Rpc21pc3NlZCh0cnVlKTtcbiAgICBzZXRUaW1lb3V0KG9uQ2xpY2tEaXNtaXNzLCBBTklNQVRJT05fVElNRSk7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ29udGFpbmVyIGRhdGEtZHMtaWQ9XCJOb3RpZmljYXRpb25cIj5cbiAgICAgIDxTdHlsZWRFeHBhbmRpbmdDb250YWluZXIgaXNEaXNtaXNzZWQ9e2lzRGlzbWlzc2VkfT5cbiAgICAgICAgPENhcmQgc3F1YXJlQ29ybmVycyBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfT5cbiAgICAgICAgICA8Qm94IHNwYWNlPVwic1wiPlxuICAgICAgICAgICAgPENvbHVtbnMgZ2FwPVwic1wiIHZBbGlnbkl0ZW1zPVwidG9wXCI+XG4gICAgICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgICAgICA8Q29sdW1uIHNpemU9XCJuYXJyb3dcIj5cbiAgICAgICAgICAgICAgICAgIDxCb3ggdlNwYWNlPVwieHhzXCIgc3BhY2U9XCJ6ZXJvXCI+XG4gICAgICAgICAgICAgICAgICAgIDxJY29uIG5hbWU9e2ljb259IGNvbG9yPVwicHJpbWFyeVwiIGRhdGEtdGVzdGlkPVwiaWNvblwiIC8+XG4gICAgICAgICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgICAgICA8L0NvbHVtbj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgPENvbHVtbiBzaXplPVwiZmlsbFwiPlxuICAgICAgICAgICAgICAgIDxCb3ggdlNwYWNlPVwieHhzXCIgc3BhY2U9XCJ6ZXJvXCI+XG4gICAgICAgICAgICAgICAgICA8VGV4dD57dGV4dH08L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgICAgIDwvQ29sdW1uPntcIiBcIn1cbiAgICAgICAgICAgICAgeyhjYWxsVG9BY3Rpb25MYWJlbCB8fCBleHBhbmRhYmxlKSAmJiAoXG4gICAgICAgICAgICAgICAgPENvbHVtblxuICAgICAgICAgICAgICAgICAgc2l6ZT17WzEyLCBcIm5hcnJvd1wiLCBcIm5hcnJvd1wiXX1cbiAgICAgICAgICAgICAgICAgIG9yZGVyPXtbXCJsYXN0XCIsIFwidW5zZXRcIiwgXCJ1bnNldFwiXX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICB7Y2FsbFRvQWN0aW9uTGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8QnV0dG9uIHNpemU9XCJzXCIgZnVsbFdpZHRoIG9uQ2xpY2s9e29uQ2xpY2tDYWxsVG9BY3Rpb259PlxuICAgICAgICAgICAgICAgICAgICAgIHtjYWxsVG9BY3Rpb25MYWJlbH1cbiAgICAgICAgICAgICAgICAgICAgPC9CdXR0b24+XG4gICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAge2V4cGFuZGFibGUgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8QnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICAgc2l6ZT1cInNcIlxuICAgICAgICAgICAgICAgICAgICAgIGZ1bGxXaWR0aFxuICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHNldElzRXhwYW5kZWQoIWlzRXhwYW5kZWQpfVxuICAgICAgICAgICAgICAgICAgICAgIHJpZ2h0SWNvbj17aXNFeHBhbmRlZCA/IFwiY2hldnJvbi11cFwiIDogXCJjaGV2cm9uLWRvd25cIn1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgIHtpc0V4cGFuZGVkID8gc2hyaW5rQnV0dG9uTGFiZWwgOiBleHBhbmRCdXR0b25MYWJlbH1cbiAgICAgICAgICAgICAgICAgICAgPC9CdXR0b24+XG4gICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIDwvQ29sdW1uPlxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB7aXNEaXNtaXNzYWJsZSAmJiAoXG4gICAgICAgICAgICAgICAgPENvbHVtbiBzaXplPVwibmFycm93XCI+XG4gICAgICAgICAgICAgICAgICA8QnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGxlZnRJY29uPVwieFwiXG4gICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJ0ZXJ0aWFyeVwiXG4gICAgICAgICAgICAgICAgICAgIHNpemU9XCJzXCJcbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17ZGlzbWlzc31cbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9Db2x1bW4+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L0NvbHVtbnM+XG4gICAgICAgICAgICB7aXNFeHBhbmRlZCAmJiBjaGlsZHJlbn1cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9DYXJkPlxuICAgICAgPC9TdHlsZWRFeHBhbmRpbmdDb250YWluZXI+XG4gICAgPC9TdHlsZWRDb250YWluZXI+XG4gICk7XG59XG4iXX0= */");
+function Notification(_ref2) {
+  let {
+    text,
+    icon,
+    isDismissable,
+    callToActionLabel,
+    onClickDismiss,
+    onClickCallToAction,
+    expandable,
+    expandButtonLabel,
+    shrinkButtonLabel,
+    children,
+    "data-e2e-test-id": dataE2eTestId
+  } = _ref2;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const dismiss = () => {
+    setIsDismissed(true);
+    setTimeout(onClickDismiss, ANIMATION_TIME);
+  };
+  return /*#__PURE__*/React.createElement(StyledContainer, {
+    "data-ds-id": "Notification"
+  }, /*#__PURE__*/React.createElement(StyledExpandingContainer, {
+    isDismissed: isDismissed
+  }, /*#__PURE__*/React.createElement(Card, {
+    squareCorners: true,
+    "data-e2e-test-id": dataE2eTestId
+  }, /*#__PURE__*/React.createElement(Box, {
+    space: "s"
+  }, /*#__PURE__*/React.createElement(Columns, {
+    gap: "s",
+    vAlignItems: "top"
+  }, icon && /*#__PURE__*/React.createElement(Column, {
+    size: "narrow"
+  }, /*#__PURE__*/React.createElement(Box, {
+    vSpace: "xxs",
+    space: "zero"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    color: "primary",
+    "data-testid": "icon"
+  }))), /*#__PURE__*/React.createElement(Column, {
+    size: "fill"
+  }, /*#__PURE__*/React.createElement(Box, {
+    vSpace: "xxs",
+    space: "zero"
+  }, /*#__PURE__*/React.createElement(Text, null, text))), " ", (callToActionLabel || expandable) && /*#__PURE__*/React.createElement(Column, {
+    size: [12, "narrow", "narrow"],
+    order: ["last", "unset", "unset"]
+  }, callToActionLabel && /*#__PURE__*/React.createElement(Button, {
+    size: "s",
+    fullWidth: true,
+    onClick: onClickCallToAction
+  }, callToActionLabel), expandable && /*#__PURE__*/React.createElement(Button, {
+    size: "s",
+    fullWidth: true,
+    onClick: () => setIsExpanded(!isExpanded),
+    rightIcon: isExpanded ? "chevron-up" : "chevron-down"
+  }, isExpanded ? shrinkButtonLabel : expandButtonLabel)), isDismissable && /*#__PURE__*/React.createElement(Column, {
+    size: "narrow"
+  }, /*#__PURE__*/React.createElement(Button, {
+    leftIcon: "x",
+    variant: "tertiary",
+    size: "s",
+    onClick: dismiss
+  }))), isExpanded && children))));
+}
+
+export { Notification };
+//# sourceMappingURL=Notification.js.map

package/build/esm/src/components/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Card } from \"../Card/Card\";\nimport { Box } from \"../Box/Box\";\nimport { Columns, Column } from \"../Column/Columns\";\nimport { Button } from \"../Button/Button\";\nimport { Icon, IconName } from \"../Icon/Icon\";\nimport { Text } from \"../Typography/Text/Text\";\n\nconst ANIMATION_TIME = 200;\n\nexport type NotificationProps = {\n  \"data-e2e-test-id\"?: string;\n  text?: string;\n  icon?: IconName;\n  isDismissable?: boolean;\n  callToActionLabel?: string;\n  expandButtonLabel?: string;\n  shrinkButtonLabel?: string;\n  expandable?: boolean;\n  onClickCallToAction?: (e: React.MouseEvent) => void;\n  onClickDismiss?: () => void;\n  children?: React.ReactNode;\n};\n\nconst StyledExpandingContainer = styled.div<{\n  isDismissed: boolean;\n}>(({ isDismissed }) => ({\n  transform: `translateY(${isDismissed ? \"calc(-100% - 8px)\" : \"0%\"})`,\n  transition: `transform ${\n    isDismissed ? ANIMATION_TIME : 0\n  }ms cubic-bezier(0.0, 0.0, 0.25, 1.0)`,\n}));\n\nconst StyledContainer = styled.div(() => ({\n  overflow: \"hidden\",\n}));\n\nexport function Notification({\n  text,\n  icon,\n  isDismissable,\n  callToActionLabel,\n  onClickDismiss,\n  onClickCallToAction,\n  expandable,\n  expandButtonLabel,\n  shrinkButtonLabel,\n  children,\n  \"data-e2e-test-id\": dataE2eTestId,\n}: NotificationProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isDismissed, setIsDismissed] = useState(false);\n\n  const dismiss = () => {\n    setIsDismissed(true);\n    setTimeout(onClickDismiss, ANIMATION_TIME);\n  };\n\n  return (\n    <StyledContainer data-ds-id=\"Notification\">\n      <StyledExpandingContainer isDismissed={isDismissed}>\n        <Card squareCorners data-e2e-test-id={dataE2eTestId}>\n          <Box space=\"s\">\n            <Columns gap=\"s\" vAlignItems=\"top\">\n              {icon && (\n                <Column size=\"narrow\">\n                  <Box vSpace=\"xxs\" space=\"zero\">\n                    <Icon name={icon} color=\"primary\" data-testid=\"icon\" />\n                  </Box>\n                </Column>\n              )}\n              <Column size=\"fill\">\n                <Box vSpace=\"xxs\" space=\"zero\">\n                  <Text>{text}</Text>\n                </Box>\n              </Column>{\" \"}\n              {(callToActionLabel || expandable) && (\n                <Column\n                  size={[12, \"narrow\", \"narrow\"]}\n                  order={[\"last\", \"unset\", \"unset\"]}\n                >\n                  {callToActionLabel && (\n                    <Button size=\"s\" fullWidth onClick={onClickCallToAction}>\n                      {callToActionLabel}\n                    </Button>\n                  )}\n                  {expandable && (\n                    <Button\n                      size=\"s\"\n                      fullWidth\n                      onClick={() => setIsExpanded(!isExpanded)}\n                      rightIcon={isExpanded ? \"chevron-up\" : \"chevron-down\"}\n                    >\n                      {isExpanded ? shrinkButtonLabel : expandButtonLabel}\n                    </Button>\n                  )}\n                </Column>\n              )}\n              {isDismissable && (\n                <Column size=\"narrow\">\n                  <Button\n                    leftIcon=\"x\"\n                    variant=\"tertiary\"\n                    size=\"s\"\n                    onClick={dismiss}\n                  />\n                </Column>\n              )}\n            </Columns>\n            {isExpanded && children}\n          </Box>\n        </Card>\n      </StyledExpandingContainer>\n    </StyledContainer>\n  );\n}\n"],"names":["ANIMATION_TIME","StyledExpandingContainer","_styled","process","env","NODE_ENV","target","label","_ref","isDismissed","transform","transition","StyledContainer","overflow","Notification","_ref2","text","icon","isDismissable","callToActionLabel","onClickDismiss","onClickCallToAction","expandable","expandButtonLabel","shrinkButtonLabel","children","dataE2eTestId","isExpanded","setIsExpanded","useState","setIsDismissed","dismiss","setTimeout","React","createElement","Card","squareCorners","Box","space","Columns","gap","vAlignItems","Column","size","vSpace","Icon","name","color","Text","order","Button","fullWidth","onClick","rightIcon","leftIcon","variant"],"mappings":";;;;;;;;;AASA,MAAMA,cAAc,GAAG,GAAG,CAAA;AAgB1B,MAAMC,wBAAwB,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,0BAAA;AAAA,CAAA,CAAA,CAE9BC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,WAAAA;AAAY,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAM;AACvBE,IAAAA,SAAS,EAAG,CAAaD,WAAAA,EAAAA,WAAW,GAAG,mBAAmB,GAAG,IAAK,CAAE,CAAA,CAAA;AACpEE,IAAAA,UAAU,EAAG,CACXF,UAAAA,EAAAA,WAAW,GAAGT,cAAc,GAAG,CAChC,CAAA,oCAAA,CAAA;GACF,CAAA;AAAA,CAAC,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,yqKAAA,CAAA,CAAA;AAEH,MAAMO,eAAe,gBAAGV,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CAAW,OAAO;AACxCM,EAAAA,QAAQ,EAAE,QAAA;AACZ,CAAC,CAAC,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,yqKAAA,CAAA,CAAA;AAEI,SAASS,YAAYA,CAAAC,KAAA,EAYc;EAAA,IAZb;IAC3BC,IAAI;IACJC,IAAI;IACJC,aAAa;IACbC,iBAAiB;IACjBC,cAAc;IACdC,mBAAmB;IACnBC,UAAU;IACVC,iBAAiB;IACjBC,iBAAiB;IACjBC,QAAQ;AACR,IAAA,kBAAkB,EAAEC,aAAAA;AACH,GAAC,GAAAX,KAAA,CAAA;EAClB,MAAM,CAACY,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACnD,MAAM,CAACpB,WAAW,EAAEqB,cAAc,CAAC,GAAGD,QAAQ,CAAC,KAAK,CAAC,CAAA;EAErD,MAAME,OAAO,GAAGA,MAAM;IACpBD,cAAc,CAAC,IAAI,CAAC,CAAA;AACpBE,IAAAA,UAAU,CAACZ,cAAc,EAAEpB,cAAc,CAAC,CAAA;GAC3C,CAAA;AAED,EAAA,oBACEiC,KAAA,CAAAC,aAAA,CAACtB,eAAe,EAAA;IAAC,YAAW,EAAA,cAAA;AAAc,GAAA,eACxCqB,KAAA,CAAAC,aAAA,CAACjC,wBAAwB,EAAA;AAACQ,IAAAA,WAAW,EAAEA,WAAAA;AAAY,GAAA,eACjDwB,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;IAACC,aAAa,EAAA,IAAA;IAAC,kBAAkBV,EAAAA,aAAAA;AAAc,GAAA,eAClDO,KAAA,CAAAC,aAAA,CAACG,GAAG,EAAA;AAACC,IAAAA,KAAK,EAAC,GAAA;AAAG,GAAA,eACZL,KAAA,CAAAC,aAAA,CAACK,OAAO,EAAA;AAACC,IAAAA,GAAG,EAAC,GAAG;AAACC,IAAAA,WAAW,EAAC,KAAA;AAAK,GAAA,EAC/BxB,IAAI,iBACHgB,KAAA,CAAAC,aAAA,CAACQ,MAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,QAAA;AAAQ,GAAA,eACnBV,KAAA,CAAAC,aAAA,CAACG,GAAG,EAAA;AAACO,IAAAA,MAAM,EAAC,KAAK;AAACN,IAAAA,KAAK,EAAC,MAAA;AAAM,GAAA,eAC5BL,KAAA,CAAAC,aAAA,CAACW,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAE7B,IAAK;AAAC8B,IAAAA,KAAK,EAAC,SAAS;IAAC,aAAY,EAAA,MAAA;GAAQ,CACnD,CACC,CACT,eACDd,KAAA,CAAAC,aAAA,CAACQ,MAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,eACjBV,KAAA,CAAAC,aAAA,CAACG,GAAG,EAAA;AAACO,IAAAA,MAAM,EAAC,KAAK;AAACN,IAAAA,KAAK,EAAC,MAAA;GACtBL,eAAAA,KAAA,CAAAC,aAAA,CAACc,IAAI,EAAEhC,IAAAA,EAAAA,IAAW,CACf,CACC,CAAC,EAAC,GAAG,EACZ,CAACG,iBAAiB,IAAIG,UAAU,kBAC/BW,KAAA,CAAAC,aAAA,CAACQ,MAAM,EAAA;AACLC,IAAAA,IAAI,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAE;AAC/BM,IAAAA,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAA;AAAE,GAAA,EAEjC9B,iBAAiB,iBAChBc,KAAA,CAAAC,aAAA,CAACgB,MAAM,EAAA;AAACP,IAAAA,IAAI,EAAC,GAAG;IAACQ,SAAS,EAAA,IAAA;AAACC,IAAAA,OAAO,EAAE/B,mBAAAA;GACjCF,EAAAA,iBACK,CACT,EACAG,UAAU,iBACTW,KAAA,CAAAC,aAAA,CAACgB,MAAM,EAAA;AACLP,IAAAA,IAAI,EAAC,GAAG;IACRQ,SAAS,EAAA,IAAA;AACTC,IAAAA,OAAO,EAAEA,MAAMxB,aAAa,CAAC,CAACD,UAAU,CAAE;AAC1C0B,IAAAA,SAAS,EAAE1B,UAAU,GAAG,YAAY,GAAG,cAAA;AAAe,GAAA,EAErDA,UAAU,GAAGH,iBAAiB,GAAGD,iBAC5B,CAEJ,CACT,EACAL,aAAa,iBACZe,KAAA,CAAAC,aAAA,CAACQ,MAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,QAAA;AAAQ,GAAA,eACnBV,KAAA,CAAAC,aAAA,CAACgB,MAAM,EAAA;AACLI,IAAAA,QAAQ,EAAC,GAAG;AACZC,IAAAA,OAAO,EAAC,UAAU;AAClBZ,IAAAA,IAAI,EAAC,GAAG;AACRS,IAAAA,OAAO,EAAErB,OAAAA;GACV,CACK,CAEH,CAAC,EACTJ,UAAU,IAAIF,QACZ,CACD,CACkB,CACX,CAAC,CAAA;AAEtB;;;;"}

package/build/esm/src/components/Pagination/Pagination.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export declare type PaginationProps = {
+    /** Total number of items */
+    numOfItems: number;
+    /** Current page */
+    currentPage: number;
+    /** Number of items per page */
+    numOfItemsPerPage?: number;
+    onPrevClick: (page: number, firstItemIndex?: number, lastItemIndex?: number) => void;
+    onNextClick: (page: number, firstItemIndex?: number, lastItemIndex?: number) => void;
+    /** Callback to provide a custom label */
+    formatLabel?: (firstItemIndex?: number, lastItemIndex?: number, numOfItems?: number) => string;
+    /** Align label with respect to arrow buttons */
+    alignLabel?: "center" | "left";
+    "data-e2e-test-id"?: string;
+};
+export declare function Pagination({ numOfItems, numOfItemsPerPage, currentPage, formatLabel, alignLabel, "data-e2e-test-id": dataE2eTestId, onPrevClick, onNextClick, }: PaginationProps): React.ReactElement;

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Inline } from '../Inline/Inline.js';
+import { PictogramButton } from '../PictogramButton/PictogramButton.js';
+import { Text } from '../Typography/Text/Text.js';
+
+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 {
+    numOfItems,
+    numOfItemsPerPage = 1,
+    currentPage,
+    formatLabel,
+    alignLabel = "center",
+    "data-e2e-test-id": dataE2eTestId,
+    onPrevClick,
+    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 (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 (itemsPerPage > 1) {
+      const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage - 1, itemsPerPage, numOfItems);
+      onPrevClick(currentPage - 1, firstItemIndex, lastItemIndex);
+    } else {
+      onPrevClick(currentPage - 1);
+    }
+  };
+  const handleNextClick = () => {
+    if (itemsPerPage > 1) {
+      const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage + 1, itemsPerPage, numOfItems);
+      onNextClick(currentPage + 1, firstItemIndex, lastItemIndex);
+    } else {
+      onNextClick(currentPage + 1);
+    }
+  };
+  const leftButton = /*#__PURE__*/React.createElement(PictogramButton, {
+    size: "s",
+    icon: "chevron-left",
+    disabled: isFirstPage,
+    onClick: handlePrevClick
+  });
+  const rightButton = /*#__PURE__*/React.createElement(PictogramButton, {
+    size: "s",
+    icon: "chevron-right",
+    disabled: isLastPage,
+    onClick: handleNextClick
+  });
+  const labelElm = /*#__PURE__*/React.createElement(Text, {
+    size: "s"
+  }, label);
+  const content = alignLabel === "left" ? /*#__PURE__*/React.createElement(React.Fragment, null, labelElm, leftButton, rightButton) : /*#__PURE__*/React.createElement(React.Fragment, null, leftButton, labelElm, rightButton);
+  return /*#__PURE__*/React.createElement(Inline, {
+    vAlignItems: "center",
+    "data-e2e-test-id": dataE2eTestId,
+    "data-ds-id": "Pagination"
+  }, content);
+}
+
+export { Pagination };
+//# sourceMappingURL=Pagination.js.map

package/build/esm/src/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from \"react\";\nimport { Inline } from \"../Inline/Inline\";\nimport { PictogramButton } from \"../PictogramButton/PictogramButton\";\nimport { Text } from \"../Typography/Text/Text\";\n\nexport type PaginationProps = {\n  /** Total number of items */\n  numOfItems: number;\n  /** Current page */\n  currentPage: number;\n  /** Number of items per page */\n  numOfItemsPerPage?: number;\n  onPrevClick: (\n    page: number,\n    firstItemIndex?: number,\n    lastItemIndex?: number\n  ) => void;\n  onNextClick: (\n    page: number,\n    firstItemIndex?: number,\n    lastItemIndex?: number\n  ) => void;\n  /** Callback to provide a custom label */\n  formatLabel?: (\n    firstItemIndex?: number,\n    lastItemIndex?: number,\n    numOfItems?: number\n  ) => string;\n  /** Align label with respect to arrow buttons */\n  alignLabel?: \"center\" | \"left\";\n  \"data-e2e-test-id\"?: string;\n};\n\nfunction getItemIndices(\n  page: number,\n  numOfItemsPerPage: number,\n  numOfItems: number\n): [number, number] {\n  let lastItemIndex = page * numOfItemsPerPage;\n  let itemsPerPage = numOfItemsPerPage;\n\n  // Re-calculate the numOfItemsPerPage for the last page.\n  if (lastItemIndex > numOfItems) {\n    itemsPerPage -= lastItemIndex - numOfItems;\n    lastItemIndex = numOfItems;\n  }\n  const firstItemIndex = lastItemIndex - itemsPerPage + 1;\n\n  return [firstItemIndex, lastItemIndex];\n}\n\nexport function Pagination({\n  numOfItems,\n  numOfItemsPerPage = 1,\n  currentPage,\n  formatLabel,\n  alignLabel = \"center\",\n  \"data-e2e-test-id\": dataE2eTestId,\n  onPrevClick,\n  onNextClick,\n}: PaginationProps): React.ReactElement {\n  let label;\n  const itemsPerPage =\n    numOfItems > numOfItemsPerPage ? numOfItemsPerPage : numOfItems;\n  const numOfPages = Math.ceil(numOfItems / itemsPerPage);\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === numOfPages;\n\n  if (itemsPerPage > 1) {\n    const [firstItemIndex, lastItemIndex] = getItemIndices(\n      currentPage,\n      itemsPerPage,\n      numOfItems\n    );\n\n    if (formatLabel) {\n      label = formatLabel(firstItemIndex, lastItemIndex);\n    } else if (firstItemIndex === lastItemIndex) {\n      label = `${firstItemIndex} of ${numOfItems}`;\n    } else {\n      label = `${firstItemIndex} - ${lastItemIndex} of ${numOfItems}`;\n    }\n  } else {\n    label = formatLabel ? formatLabel() : `${currentPage} of ${numOfPages}`;\n  }\n\n  const handlePrevClick = () => {\n    if (itemsPerPage > 1) {\n      const [firstItemIndex, lastItemIndex] = getItemIndices(\n        currentPage - 1,\n        itemsPerPage,\n        numOfItems\n      );\n\n      onPrevClick(currentPage - 1, firstItemIndex, lastItemIndex);\n    } else {\n      onPrevClick(currentPage - 1);\n    }\n  };\n\n  const handleNextClick = () => {\n    if (itemsPerPage > 1) {\n      const [firstItemIndex, lastItemIndex] = getItemIndices(\n        currentPage + 1,\n        itemsPerPage,\n        numOfItems\n      );\n\n      onNextClick(currentPage + 1, firstItemIndex, lastItemIndex);\n    } else {\n      onNextClick(currentPage + 1);\n    }\n  };\n\n  const leftButton = (\n    <PictogramButton\n      size=\"s\"\n      icon=\"chevron-left\"\n      disabled={isFirstPage}\n      onClick={handlePrevClick}\n    />\n  );\n  const rightButton = (\n    <PictogramButton\n      size=\"s\"\n      icon=\"chevron-right\"\n      disabled={isLastPage}\n      onClick={handleNextClick}\n    />\n  );\n  const labelElm = <Text size=\"s\">{label}</Text>;\n  const content =\n    alignLabel === \"left\" ? (\n      <>\n        {labelElm}\n        {leftButton}\n        {rightButton}\n      </>\n    ) : (\n      <>\n        {leftButton}\n        {labelElm}\n        {rightButton}\n      </>\n    );\n\n  return (\n    <Inline\n      vAlignItems=\"center\"\n      data-e2e-test-id={dataE2eTestId}\n      data-ds-id=\"Pagination\"\n    >\n      {content}\n    </Inline>\n  );\n}\n"],"names":["getItemIndices","page","numOfItemsPerPage","numOfItems","lastItemIndex","itemsPerPage","firstItemIndex","Pagination","_ref","currentPage","formatLabel","alignLabel","dataE2eTestId","onPrevClick","onNextClick","label","numOfPages","Math","ceil","isFirstPage","isLastPage","handlePrevClick","handleNextClick","leftButton","React","createElement","PictogramButton","size","icon","disabled","onClick","rightButton","labelElm","Text","content","Fragment","Inline","vAlignItems"],"mappings":"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"}

package/build/esm/src/components/Patterns/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { MQ, SpaceSizes } from "../../../types";
+import { ButtonProps } from "../../Button/Button";
+export declare type ActionButtonProps = {
+    text: string;
+} & ButtonProps;
+export declare type ButtonGroupProps = {
+    actionButton?: ActionButtonProps;
+    cancelButtonText?: string;
+    onButtonClick?: (action: "cancel" | "action") => void;
+    space?: MQ<SpaceSizes> | SpaceSizes;
+    "data-e2e-test-id"?: string;
+};
+export declare function ButtonGroup({ cancelButtonText, actionButton, onButtonClick, "data-e2e-test-id": dataE2eTestId, }: ButtonGroupProps): React.ReactElement;

package/build/esm/src/components/Patterns/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,46 @@
+import _extends from '@babel/runtime/helpers/extends';
+import React from 'react';
+import { Columns, Column } from '../../Column/Columns.js';
+import { Button } from '../../Button/Button.js';
+
+/* eslint-disable react/jsx-props-no-spreading */
+function ButtonGroup(_ref) {
+  let {
+    cancelButtonText,
+    actionButton,
+    onButtonClick,
+    "data-e2e-test-id": dataE2eTestId
+  } = _ref;
+  const {
+    text,
+    ...rest
+  } = actionButton;
+  return /*#__PURE__*/React.createElement(Columns, {
+    gap: "s",
+    alignItems: ["spaceBetween", "right"],
+    "data-e2e-test-id": dataE2eTestId,
+    "data-ds-id": "ButtonGroup"
+  }, actionButton && /*#__PURE__*/React.createElement(Column, {
+    order: ["first", "last"],
+    size: [12, "narrow"]
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    variant: "primary",
+    fullWidth: true,
+    onClick: () => {
+      onButtonClick("action");
+    }
+  }, rest), text)), cancelButtonText && /*#__PURE__*/React.createElement(Column, {
+    size: [12, "narrow"]
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    fullWidth: true,
+    onClick: () => {
+      onButtonClick("cancel");
+    }
+  }, cancelButtonText)));
+}
+
+/* eslint-enable react/jsx-props-no-spreading */
+
+export { ButtonGroup };
+//# sourceMappingURL=ButtonGroup.js.map

package/build/esm/src/components/Patterns/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../../src/components/Patterns/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { MQ, SpaceSizes } from \"../../../types\";\nimport { Columns, Column } from \"../../Column/Columns\";\nimport { Button, ButtonProps } from \"../../Button/Button\";\n\nexport type ActionButtonProps = {\n  text: string;\n} & ButtonProps;\n\nexport type ButtonGroupProps = {\n  actionButton?: ActionButtonProps;\n  cancelButtonText?: string;\n  onButtonClick?: (action: \"cancel\" | \"action\") => void;\n  space?: MQ<SpaceSizes> | SpaceSizes;\n  \"data-e2e-test-id\"?: string;\n};\n\n/* eslint-disable react/jsx-props-no-spreading */\nexport function ButtonGroup({\n  cancelButtonText,\n  actionButton,\n  onButtonClick,\n  \"data-e2e-test-id\": dataE2eTestId,\n}: ButtonGroupProps): React.ReactElement {\n  const { text, ...rest } = actionButton;\n\n  return (\n    <Columns\n      gap=\"s\"\n      alignItems={[\"spaceBetween\", \"right\"]}\n      data-e2e-test-id={dataE2eTestId}\n      data-ds-id=\"ButtonGroup\"\n    >\n      {actionButton && (\n        <Column order={[\"first\", \"last\"]} size={[12, \"narrow\"]}>\n          <Button\n            variant=\"primary\"\n            fullWidth\n            onClick={() => {\n              onButtonClick(\"action\");\n            }}\n            {...rest}\n          >\n            {text}\n          </Button>\n        </Column>\n      )}\n      {cancelButtonText && (\n        <Column size={[12, \"narrow\"]}>\n          <Button\n            variant=\"secondary\"\n            fullWidth\n            onClick={() => {\n              onButtonClick(\"cancel\");\n            }}\n          >\n            {cancelButtonText}\n          </Button>\n        </Column>\n      )}\n    </Columns>\n  );\n}\n\n/* eslint-enable react/jsx-props-no-spreading */\n"],"names":["ButtonGroup","_ref","cancelButtonText","actionButton","onButtonClick","dataE2eTestId","text","rest","React","createElement","Columns","gap","alignItems","Column","order","size","Button","_extends","variant","fullWidth","onClick"],"mappings":";;;;;AAiBA;AACO,SAASA,WAAWA,CAAAC,IAAA,EAKc;EAAA,IALb;IAC1BC,gBAAgB;IAChBC,YAAY;IACZC,aAAa;AACb,IAAA,kBAAkB,EAAEC,aAAAA;AACJ,GAAC,GAAAJ,IAAA,CAAA;EACjB,MAAM;IAAEK,IAAI;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAGJ,YAAY,CAAA;AAEtC,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,GAAG,EAAC,GAAG;AACPC,IAAAA,UAAU,EAAE,CAAC,cAAc,EAAE,OAAO,CAAE;AACtC,IAAA,kBAAA,EAAkBP,aAAc;IAChC,YAAW,EAAA,aAAA;AAAa,GAAA,EAEvBF,YAAY,iBACXK,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;AAACC,IAAAA,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAE;AAACC,IAAAA,IAAI,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAA;AAAE,GAAA,eACrDP,KAAA,CAAAC,aAAA,CAACO,MAAM,EAAAC,QAAA,CAAA;AACLC,IAAAA,OAAO,EAAC,SAAS;IACjBC,SAAS,EAAA,IAAA;IACTC,OAAO,EAAEA,MAAM;MACbhB,aAAa,CAAC,QAAQ,CAAC,CAAA;AACzB,KAAA;AAAE,GAAA,EACEG,IAAI,CAAA,EAEPD,IACK,CACF,CACT,EACAJ,gBAAgB,iBACfM,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;AAACE,IAAAA,IAAI,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAA;AAAE,GAAA,eAC3BP,KAAA,CAAAC,aAAA,CAACO,MAAM,EAAA;AACLE,IAAAA,OAAO,EAAC,WAAW;IACnBC,SAAS,EAAA,IAAA;IACTC,OAAO,EAAEA,MAAM;MACbhB,aAAa,CAAC,QAAQ,CAAC,CAAA;AACzB,KAAA;GAECF,EAAAA,gBACK,CACF,CAEH,CAAC,CAAA;AAEd,CAAA;;AAEA;;;;"}