@amboss/design-system 1.12.1 → 1.13.1

package/build/esm/scss/themes/dark.scss

@@ -0,0 +1,100 @@
+
+// Do not edit directly
+// Generated on Fri, 28 Jul 2023 09:36:32 GMT
+
+$color-canvas: #1e2125;
+$color-background-primary-default: #24282d;
+$color-background-secondary-default: #282c34;
+$color-background-secondary-hover: #393e47;
+$color-background-secondary-active: #393e47;
+$color-background-accent-default: #28816b;
+$color-background-accent-hover: #41a48a;
+$color-background-accent-active: #233d3d;
+$color-background-accent-disabled: rgba(40, 129, 107, 0.3);
+$color-background-onAccent-default: #ffffff;
+$color-background-onAccent-hover: #ffffff;
+$color-background-onAccent-active: #ffffff;
+$color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
+$color-background-error-default: #a45355;
+$color-background-success-default: #28816b;
+$color-background-info-default: #2f538a;
+$color-background-warning-default: #a4792d;
+$color-background-accentSubtle-default: #233d3d;
+$color-background-errorSubtle-default: #312b31;
+$color-background-successSubtle-default: #262e33;
+$color-background-infoSubtle-default: #282e39;
+$color-background-warningSubtle-default: #32302f;
+$color-background-hightlight-default: #40454f;
+$color-background-hightlight-hover: #393e47;
+$color-background-contrast-default: #ced1d6;
+$color-background-transparent-default: rgba(255, 255, 255, 0);
+$color-background-transparent-hover: rgba(147, 151, 159, 0.08);
+$color-background-transparent-active: rgba(147, 151, 159, 0.08);
+$color-background-backdrop-default: rgba(0, 0, 0, 0.6);
+$color-text-primary-default: #ced1d6;
+$color-text-primary-hover: #ffffff;
+$color-text-secondary-default: #b9bcc3;
+$color-text-secondary-hover: #ced1d6;
+$color-text-tertiary-default: #93979f;
+$color-text-tertiary-disabled: rgba(216, 218, 222, 0.3);
+$color-text-tertiary-hover: #b9bcc3;
+$color-text-quaternary-default: #757a84;
+$color-text-accent-default: #a6f2dd;
+$color-text-accent-hover: #e2fef7;
+$color-text-onAccent-default: #ffffff;
+$color-text-onAccent-disabled: rgba(216, 218, 222, 0.3);
+$color-text-info-default: #99c1fa;
+$color-text-error-default: #f49a9a;
+$color-text-warning-default: #fae0b3;
+$color-text-success-default: #a6f2dd;
+$color-icon-primary: #d8dade;
+$color-icon-secondary: #ced1d6;
+$color-icon-tertiary: #93979f;
+$color-icon-quaternary: #757a84;
+$color-icon-accent: #41a48a;
+$color-icon-onAccent: #ffffff;
+$color-icon-info: #6e95cf;
+$color-icon-error: #d07c7c;
+$color-icon-warning: #cbac76;
+$color-icon-success: #41a48a;
+$color-icon-brand: #62b2bc;
+$color-border-primary-default: #5b5f67;
+$color-border-primary-hover: #757a84;
+$color-border-primary-active: #93979f;
+$color-border-primary-disabled: rgba(147, 151, 159, 0.08);
+$color-border-secondary-default: rgba(147, 149, 159, 0.3);
+$color-border-accent-default: #41a48a;
+$color-border-error-default: #d07c7c;
+$color-border-accentSubtle-default: #28816b;
+$color-divider-primary: rgba(147, 149, 159, 0.3);
+$color-toggle-background-hightlight: #b2ab39;
+$color-toggle-border-hightlight: #b2ab39;
+$color-badge-background-default: transparent;
+$color-badge-background-green: transparent;
+$color-badge-background-blue: transparent;
+$color-badge-background-yellow: transparent;
+$color-badge-background-brand: transparent;
+$color-badge-background-purple: transparent;
+$color-badge-background-red: transparent;
+$color-badge-background-gray: transparent;
+$color-badge-text-default: #ced1d6;
+$color-badge-text-green: #41a48a;
+$color-badge-text-blue: #6e95cf;
+$color-badge-text-yellow: #cbac76;
+$color-badge-text-brand: #62b2bc;
+$color-badge-text-purple: #ad97f7;
+$color-badge-text-red: #d07c7c;
+$color-badge-text-gray: #93979f;
+$color-badge-border-default: #393e47;
+$color-badge-border-green: #393e47;
+$color-badge-border-blue: #393e47;
+$color-badge-border-yellow: #393e47;
+$color-badge-border-brand: #393e47;
+$color-badge-border-purple: #393e47;
+$color-badge-border-red: #393e47;
+$color-badge-border-gray: #393e47;
+$color-segmented-progress-bar-monochrome: #ced1d6;
+$color-segmented-progress-bar-success: #28816b;
+$color-segmented-progress-bar-warning: #a4792d;
+$color-segmented-progress-bar-alert: #a45355;
+$color-segmented-progress-bar-in-progress: #5b5f67;

package/build/esm/scss/themes/light.scss

@@ -0,0 +1,100 @@
+
+// Do not edit directly
+// Generated on Fri, 28 Jul 2023 09:36:32 GMT
+
+$color-canvas: #eef2f5;
+$color-background-primary-default: #ffffff;
+$color-background-secondary-default: #f5f7f9;
+$color-background-secondary-hover: #eef2f5;
+$color-background-secondary-active: #ffffff;
+$color-background-accent-default: #0fa980;
+$color-background-accent-hover: #0b8363;
+$color-background-accent-active: #0a5c45;
+$color-background-accent-disabled: rgba(15, 169, 128, 0.3);
+$color-background-onAccent-default: #ffffff;
+$color-background-onAccent-hover: #ffffff;
+$color-background-onAccent-active: #ffffff;
+$color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
+$color-background-error-default: #dc4847;
+$color-background-success-default: #0b8363;
+$color-background-info-default: #295dae;
+$color-background-warning-default: #df9411;
+$color-background-accentSubtle-default: #e8f8f4;
+$color-background-errorSubtle-default: #fde8e8;
+$color-background-successSubtle-default: #e8f8f4;
+$color-background-infoSubtle-default: #e7effe;
+$color-background-warningSubtle-default: #fef3e1;
+$color-background-hightlight-default: #607585;
+$color-background-hightlight-hover: #40515e;
+$color-background-contrast-default: #314554;
+$color-background-transparent-default: rgba(255, 255, 255, 0);
+$color-background-transparent-hover: rgba(96, 117, 133, 0.08);
+$color-background-transparent-active: rgba(96, 117, 133, 0.08);
+$color-background-backdrop-default: rgba(0, 0, 0, 0.6);
+$color-text-primary-default: #1a1c1c;
+$color-text-primary-hover: #1a1c1c;
+$color-text-secondary-default: #40515e;
+$color-text-secondary-hover: #40515e;
+$color-text-tertiary-default: #607585;
+$color-text-tertiary-disabled: rgba(64, 81, 94, 0.3);
+$color-text-tertiary-hover: #40515e;
+$color-text-quaternary-default: #a3b2bd;
+$color-text-accent-default: #0b8363;
+$color-text-accent-hover: #0a5c45;
+$color-text-onAccent-default: #ffffff;
+$color-text-onAccent-disabled: rgba(255, 255, 255, 0.6);
+$color-text-info-default: #1c427d;
+$color-text-error-default: #c02725;
+$color-text-warning-default: #314554;
+$color-text-success-default: #0a5c45;
+$color-icon-primary: #1a1c1c;
+$color-icon-secondary: #40515e;
+$color-icon-tertiary: #607585;
+$color-icon-quaternary: #a3b2bd;
+$color-icon-accent: #0b8363;
+$color-icon-onAccent: #ffffff;
+$color-icon-info: #295dae;
+$color-icon-error: #dc4847;
+$color-icon-warning: #df9411;
+$color-icon-success: #0b8363;
+$color-icon-brand: #0fa980;
+$color-border-primary-default: #a3b2bd;
+$color-border-primary-hover: #607585;
+$color-border-primary-active: #40515e;
+$color-border-primary-disabled: rgba(163, 178, 189, 0.3);
+$color-border-secondary-default: rgba(163, 178, 189, 0.3);
+$color-border-accent-default: #0b8363;
+$color-border-error-default: #dc4847;
+$color-border-accentSubtle-default: #8adcc6;
+$color-divider-primary: rgba(163, 178, 189, 0.3);
+$color-toggle-background-hightlight: #f3eb75;
+$color-toggle-border-hightlight: #f3eb75;
+$color-badge-background-default: #ffffff;
+$color-badge-background-green: #e8f8f4;
+$color-badge-background-blue: #e7effe;
+$color-badge-background-yellow: #fef3e1;
+$color-badge-background-brand: #e7f6f8;
+$color-badge-background-purple: #f2effb;
+$color-badge-background-red: #fde8e8;
+$color-badge-background-gray: #eef2f5;
+$color-badge-text-default: #1a1c1c;
+$color-badge-text-green: #0b8363;
+$color-badge-text-blue: #295dae;
+$color-badge-text-yellow: #9a6304;
+$color-badge-text-brand: #0b8363;
+$color-badge-text-purple: #5d44ab;
+$color-badge-text-red: #c02725;
+$color-badge-text-gray: #607585;
+$color-badge-border-default: #e0e6eb;
+$color-badge-border-green: #e8f8f4;
+$color-badge-border-blue: #e7effe;
+$color-badge-border-yellow: #fef3e1;
+$color-badge-border-brand: #e7f6f8;
+$color-badge-border-purple: #f2effb;
+$color-badge-border-red: #fde8e8;
+$color-badge-border-gray: #eef2f5;
+$color-segmented-progress-bar-monochrome: #607585;
+$color-segmented-progress-bar-success: #39d6ac;
+$color-segmented-progress-bar-warning: #f1d56b;
+$color-segmented-progress-bar-alert: #f07575;
+$color-segmented-progress-bar-in-progress: #e0e6eb;

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

@@ -16,7 +16,6 @@ const BadgeContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
   } = _ref;
   return {
     borderRadius: theme.variables.size.borderRadius.badge.m,
-    border: "1px solid",
     display: "inline-block",
     textTransform: "uppercase",
     fontFamily: theme.variables.fontFamily.lato,
@@ -24,11 +23,12 @@ const BadgeContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
     lineHeight: theme.variables.size.lineHeight.badge.m,
     fontWeight: "bold",
     letterSpacing: theme.variables.size.letterSpacing.badge.m,
-    color: color ? theme.values.color.text.badge[color] : theme.values.color.text.badge.default,
-    backgroundColor: color ? theme.values.color.background.badge[color] : theme.values.color.background.badge.default,
-    borderColor: color ? theme.values.color.border.badge[color] : theme.values.color.border.badge.default
+    border: "solid 1px",
+    borderColor: color ? theme.values.color.badge.border[color] : theme.values.color.badge.border.default,
+    backgroundColor: color ? theme.values.color.badge.background[color] : theme.values.color.badge.background.default,
+    color: color ? theme.values.color.badge.text[color] : theme.values.color.badge.text.default
   };
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhZGdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnVCIiwiZmlsZSI6IkJhZGdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tIFwiLi4vQm94L0JveFwiO1xuaW1wb3J0IHsgSWNvbk5hbWUsIEljb24gfSBmcm9tIFwiLi4vSWNvbi9JY29uXCI7XG5pbXBvcnQgeyBJbmxpbmUgfSBmcm9tIFwiLi4vSW5saW5lL0lubGluZVwiO1xuXG5leHBvcnQgdHlwZSBCYWRnZVByb3BzID0ge1xuICAvKiogVGhpcyBpcyBhIHRleHQgZm9yIGEgY29tcG9uZW50IHByb3BlcnR5ICovXG4gIHRleHQ6IHN0cmluZztcbiAgLyoqIEEgY29sb3IgZG9lc24ndCByZWZsZWN0IGFueSBpbnRlbnQgb3RoZXIgdGhhbiB0byB2YXJpZXR5ICovXG4gIGNvbG9yPzogYGdyZWVuYCB8IGBibHVlYCB8IGB5ZWxsb3dgIHwgYGJyYW5kYCB8IGBwdXJwbGVgIHwgYHJlZGAgfCBgZ3JheWA7XG5cbiAgaWNvbj86IEljb25OYW1lO1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbn07XG5cbmNvbnN0IEJhZGdlQ29udGFpbmVyID0gc3R5bGVkLmRpdjxQYXJ0aWFsPEJhZGdlUHJvcHM+PigoeyB0aGVtZSwgY29sb3IgfSkgPT4gKHtcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXMuYmFkZ2UubSxcbiAgYm9yZGVyOiBcIjFweCBzb2xpZFwiLFxuICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICB0ZXh0VHJhbnNmb3JtOiBcInVwcGVyY2FzZVwiLFxuICBmb250RmFtaWx5OiB0aGVtZS52YXJpYWJsZXMuZm9udEZhbWlseS5sYXRvLFxuICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC5iYWRnZS5tLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5saW5lSGVpZ2h0LmJhZGdlLm0sXG4gIGZvbnRXZWlnaHQ6IFwiYm9sZFwiLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5sZXR0ZXJTcGFjaW5nLmJhZGdlLm0sXG4gIGNvbG9yOiBjb2xvclxuICAgID8gdGhlbWUudmFsdWVzLmNvbG9yLnRleHQuYmFkZ2VbY29sb3JdXG4gICAgOiB0aGVtZS52YWx1ZXMuY29sb3IudGV4dC5iYWRnZS5kZWZhdWx0LFxuICBiYWNrZ3JvdW5kQ29sb3I6IGNvbG9yXG4gICAgPyB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5iYWRnZVtjb2xvcl1cbiAgICA6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLmJhZGdlLmRlZmF1bHQsXG4gIGJvcmRlckNvbG9yOiBjb2xvclxuICAgID8gdGhlbWUudmFsdWVzLmNvbG9yLmJvcmRlci5iYWRnZVtjb2xvcl1cbiAgICA6IHRoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYmFkZ2UuZGVmYXVsdCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIEJhZGdlKHtcbiAgdGV4dCxcbiAgY29sb3IgPSBudWxsLFxuICBpY29uLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IEJhZGdlUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxCYWRnZUNvbnRhaW5lclxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJCYWRnZVwiXG4gICAgICBjb2xvcj17Y29sb3J9XG4gICAgPlxuICAgICAgPEJveCBzcGFjZT1cInhzXCIgdlNwYWNlPVwieHhzXCI+XG4gICAgICAgIDxJbmxpbmUgdkFsaWduSXRlbXM9XCJjZW50ZXJcIiBzcGFjZT1cInh4c1wiIG5vV3JhcD5cbiAgICAgICAgICB7aWNvbiAmJiA8SWNvbiBuYW1lPXtpY29ufSBzaXplPVwic1wiIC8+fVxuICAgICAgICAgIDxzcGFuPnt0ZXh0fTwvc3Bhbj5cbiAgICAgICAgPC9JbmxpbmU+XG4gICAgICA8L0JveD5cbiAgICA8L0JhZGdlQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhZGdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnVCIiwiZmlsZSI6IkJhZGdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tIFwiLi4vQm94L0JveFwiO1xuaW1wb3J0IHsgSWNvbk5hbWUsIEljb24gfSBmcm9tIFwiLi4vSWNvbi9JY29uXCI7XG5pbXBvcnQgeyBJbmxpbmUgfSBmcm9tIFwiLi4vSW5saW5lL0lubGluZVwiO1xuXG5leHBvcnQgdHlwZSBCYWRnZVByb3BzID0ge1xuICAvKiogVGhpcyBpcyBhIHRleHQgZm9yIGEgY29tcG9uZW50IHByb3BlcnR5ICovXG4gIHRleHQ6IHN0cmluZztcbiAgLyoqIEEgY29sb3IgZG9lc24ndCByZWZsZWN0IGFueSBpbnRlbnQgb3RoZXIgdGhhbiB0byB2YXJpZXR5ICovXG4gIGNvbG9yPzogYGdyZWVuYCB8IGBibHVlYCB8IGB5ZWxsb3dgIHwgYGJyYW5kYCB8IGBwdXJwbGVgIHwgYHJlZGAgfCBgZ3JheWA7XG5cbiAgaWNvbj86IEljb25OYW1lO1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbn07XG5cbmNvbnN0IEJhZGdlQ29udGFpbmVyID0gc3R5bGVkLmRpdjxQYXJ0aWFsPEJhZGdlUHJvcHM+PigoeyB0aGVtZSwgY29sb3IgfSkgPT4gKHtcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXMuYmFkZ2UubSxcbiAgZGlzcGxheTogXCJpbmxpbmUtYmxvY2tcIixcbiAgdGV4dFRyYW5zZm9ybTogXCJ1cHBlcmNhc2VcIixcbiAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQuYmFkZ2UubSxcbiAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC5iYWRnZS5tLFxuICBmb250V2VpZ2h0OiBcImJvbGRcIixcbiAgbGV0dGVyU3BhY2luZzogdGhlbWUudmFyaWFibGVzLnNpemUubGV0dGVyU3BhY2luZy5iYWRnZS5tLFxuICBib3JkZXI6IFwic29saWQgMXB4XCIsXG4gIGJvcmRlckNvbG9yOiBjb2xvclxuICAgID8gdGhlbWUudmFsdWVzLmNvbG9yLmJhZGdlLmJvcmRlcltjb2xvcl1cbiAgICA6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWRnZS5ib3JkZXIuZGVmYXVsdCxcbiAgYmFja2dyb3VuZENvbG9yOiBjb2xvclxuICAgID8gdGhlbWUudmFsdWVzLmNvbG9yLmJhZGdlLmJhY2tncm91bmRbY29sb3JdXG4gICAgOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFkZ2UuYmFja2dyb3VuZC5kZWZhdWx0LFxuICBjb2xvcjogY29sb3JcbiAgICA/IHRoZW1lLnZhbHVlcy5jb2xvci5iYWRnZS50ZXh0W2NvbG9yXVxuICAgIDogdGhlbWUudmFsdWVzLmNvbG9yLmJhZGdlLnRleHQuZGVmYXVsdCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIEJhZGdlKHtcbiAgdGV4dCxcbiAgY29sb3IgPSBudWxsLFxuICBpY29uLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IEJhZGdlUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxCYWRnZUNvbnRhaW5lclxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJCYWRnZVwiXG4gICAgICBjb2xvcj17Y29sb3J9XG4gICAgPlxuICAgICAgPEJveCBzcGFjZT1cInhzXCIgdlNwYWNlPVwieHhzXCI+XG4gICAgICAgIDxJbmxpbmUgdkFsaWduSXRlbXM9XCJjZW50ZXJcIiBzcGFjZT1cInh4c1wiIG5vV3JhcD5cbiAgICAgICAgICB7aWNvbiAmJiA8SWNvbiBuYW1lPXtpY29ufSBzaXplPVwic1wiIC8+fVxuICAgICAgICAgIDxzcGFuPnt0ZXh0fTwvc3Bhbj5cbiAgICAgICAgPC9JbmxpbmU+XG4gICAgICA8L0JveD5cbiAgICA8L0JhZGdlQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
 function Badge(_ref2) {
   let {
     text,

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../Box/Box\";\nimport { IconName, Icon } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\n\nexport type BadgeProps = {\n  /** This is a text for a component property */\n  text: string;\n  /** A color doesn't reflect any intent other than to variety */\n  color?: `green` | `blue` | `yellow` | `brand` | `purple` | `red` | `gray`;\n\n  icon?: IconName;\n  \"data-e2e-test-id\"?: string;\n};\n\nconst BadgeContainer = styled.div<Partial<BadgeProps>>(({ theme, color }) => ({\n  borderRadius: theme.variables.size.borderRadius.badge.m,\n  border: \"1px solid\",\n  display: \"inline-block\",\n  textTransform: \"uppercase\",\n  fontFamily: theme.variables.fontFamily.lato,\n  fontSize: theme.variables.size.font.badge.m,\n  lineHeight: theme.variables.size.lineHeight.badge.m,\n  fontWeight: \"bold\",\n  letterSpacing: theme.variables.size.letterSpacing.badge.m,\n  color: color\n    ? theme.values.color.text.badge[color]\n    : theme.values.color.text.badge.default,\n  backgroundColor: color\n    ? theme.values.color.background.badge[color]\n    : theme.values.color.background.badge.default,\n  borderColor: color\n    ? theme.values.color.border.badge[color]\n    : theme.values.color.border.badge.default,\n}));\n\nexport function Badge({\n  text,\n  color = null,\n  icon,\n  \"data-e2e-test-id\": dataE2eTestId,\n}: BadgeProps): React.ReactElement {\n  return (\n    <BadgeContainer\n      data-e2e-test-id={dataE2eTestId}\n      data-ds-id=\"Badge\"\n      color={color}\n    >\n      <Box space=\"xs\" vSpace=\"xxs\">\n        <Inline vAlignItems=\"center\" space=\"xxs\" noWrap>\n          {icon && <Icon name={icon} size=\"s\" />}\n          <span>{text}</span>\n        </Inline>\n      </Box>\n    </BadgeContainer>\n  );\n}\n"],"names":["BadgeContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","color","borderRadius","variables","size","badge","m","border","display","textTransform","fontFamily","lato","fontSize","font","lineHeight","fontWeight","letterSpacing","values","text","default","backgroundColor","background","borderColor","Badge","_ref2","icon","dataE2eTestId","React","createElement","Box","space","vSpace","Inline","vAlignItems","noWrap","Icon","name"],"mappings":"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"}
+{"version":3,"file":"Badge.js","sources":["../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../Box/Box\";\nimport { IconName, Icon } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\n\nexport type BadgeProps = {\n  /** This is a text for a component property */\n  text: string;\n  /** A color doesn't reflect any intent other than to variety */\n  color?: `green` | `blue` | `yellow` | `brand` | `purple` | `red` | `gray`;\n\n  icon?: IconName;\n  \"data-e2e-test-id\"?: string;\n};\n\nconst BadgeContainer = styled.div<Partial<BadgeProps>>(({ theme, color }) => ({\n  borderRadius: theme.variables.size.borderRadius.badge.m,\n  display: \"inline-block\",\n  textTransform: \"uppercase\",\n  fontFamily: theme.variables.fontFamily.lato,\n  fontSize: theme.variables.size.font.badge.m,\n  lineHeight: theme.variables.size.lineHeight.badge.m,\n  fontWeight: \"bold\",\n  letterSpacing: theme.variables.size.letterSpacing.badge.m,\n  border: \"solid 1px\",\n  borderColor: color\n    ? theme.values.color.badge.border[color]\n    : theme.values.color.badge.border.default,\n  backgroundColor: color\n    ? theme.values.color.badge.background[color]\n    : theme.values.color.badge.background.default,\n  color: color\n    ? theme.values.color.badge.text[color]\n    : theme.values.color.badge.text.default,\n}));\n\nexport function Badge({\n  text,\n  color = null,\n  icon,\n  \"data-e2e-test-id\": dataE2eTestId,\n}: BadgeProps): React.ReactElement {\n  return (\n    <BadgeContainer\n      data-e2e-test-id={dataE2eTestId}\n      data-ds-id=\"Badge\"\n      color={color}\n    >\n      <Box space=\"xs\" vSpace=\"xxs\">\n        <Inline vAlignItems=\"center\" space=\"xxs\" noWrap>\n          {icon && <Icon name={icon} size=\"s\" />}\n          <span>{text}</span>\n        </Inline>\n      </Box>\n    </BadgeContainer>\n  );\n}\n"],"names":["BadgeContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","color","borderRadius","variables","size","badge","m","display","textTransform","fontFamily","lato","fontSize","font","lineHeight","fontWeight","letterSpacing","border","borderColor","values","default","backgroundColor","background","text","Badge","_ref2","icon","dataE2eTestId","React","createElement","Box","space","vSpace","Inline","vAlignItems","noWrap","Icon","name"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import React, { AriaAttributes } from "react";
 import { IconName } from "../Icon/Icon";
 import { BaseVariations, ButtonSize, HorizontalAlignment, TextVariations, PolymorphicComponentPropsWithRef } from "../../types";
 declare type ButtonPrivateProps = {
+    pseudoActiveClass?: boolean;
     squareCorners?: boolean | ("TopLeft" | "TopRight" | "BottomLeft" | "BottomRight")[];
     alignItems?: HorizontalAlignment;
     rightIconVariant?: TextVariations;