@dynatrace/strato-components 3.4.0 → 3.5.0

package/charts/xy-chart-adoption/histogram/utils/serialize-histogram-config.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var serialize_histogram_config_exports = {};
+__export(serialize_histogram_config_exports, {
+  serializeHistogramConfig: () => serializeHistogramConfig
+});
+module.exports = __toCommonJS(serialize_histogram_config_exports);
+var import_chart_types = require("../../../core/types/chart-types.js");
+var import_histogram_configuration = require("../../../histogram/utils/histogram-configuration.js");
+const serializeHistogramConfig = (config) => JSON.stringify({
+  type: import_chart_types.ChartType.Histogram,
+  ...(0, import_histogram_configuration.normalizeConfig)(config)
+});

package/charts/xy-chart-adoption/timeseries/transformer-data-to-xy.d.ts

@@ -0,0 +1,13 @@
+import type { ChartUnit } from '../../core/types/chart-unit.js';
+import type { Timeseries } from '../../core/types/timeseries.js';
+import type { XYChartData } from '../../xy-chart/types/xy-chart.js';
+interface TransformTimeseriesDataResult {
+    seriesProps: SeriesProps[];
+    units: Set<ChartUnit>;
+}
+type SeriesProps = {
+    data: XYChartData[];
+    unit: ChartUnit;
+};
+export declare function transformTimeseriesDataToXYChart(data: Timeseries[]): TransformTimeseriesDataResult;
+export {};

package/charts/xy-chart-adoption/timeseries/transformer-data-to-xy.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transformer_data_to_xy_exports = {};
+__export(transformer_data_to_xy_exports, {
+  transformTimeseriesDataToXYChart: () => transformTimeseriesDataToXYChart
+});
+module.exports = __toCommonJS(transformer_data_to_xy_exports);
+var import_single_line_name = require("../../core/utils/single-line-name.js");
+function transformTimeseriesDataToXYChart(data) {
+  const units = /* @__PURE__ */ new Set();
+  const seriesProps = [];
+  data.forEach((series, index) => {
+    const { datapoints, name, unit, ...extraSeriesProps } = series;
+    const seriesName = (0, import_single_line_name.singleLineName)(name);
+    const seriesId = index.toString();
+    const xyData = datapoints.map((datapoint) => ({
+      ...extraSeriesProps,
+      start: datapoint.start,
+      end: datapoint.end,
+      center: datapoint.center,
+      value: datapoint.value,
+      seriesName,
+      seriesId
+    }));
+    seriesProps.push({ data: xyData, unit });
+    units.add(unit);
+  });
+  return { seriesProps, units };
+}

package/content/accordion/Accordion.css

@@ -1,45 +1,45 @@
-._12zc70k0-3-4-0 {
+._12zc70k0-3-5-0 {
   width: 100%;
-  color: var(--_bx32h0-3-4-0);
+  color: var(--_bx32h0-3-5-0);
 }
-._12zc70k1-3-4-0 {
+._12zc70k1-3-5-0 {
   margin: var(--dt-spacings-size-8, 8px) 0;
 }
-._12zc70k2-3-4-0 {
+._12zc70k2-3-5-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }
-._12zc70k3-3-4-0 {
+._12zc70k3-3-5-0 {
   transition-duration: var(--dt-animations-expand-collapse-duration-fast, 250ms);
   transition-timing-function: var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._12zc70k4-3-4-0 {
+._12zc70k4-3-5-0 {
   transform: rotate(-90deg);
 }
-._12zc70k5-3-4-0 {
+._12zc70k5-3-5-0 {
   transform: rotate(90deg);
 }
-._12zc70k6-3-4-0 {
+._12zc70k6-3-5-0 {
   transform: rotate(0);
 }
-._12zc70k7-3-4-0 {
+._12zc70k7-3-5-0 {
   box-sizing: border-box;
   transform-origin: top center;
   display: flex;
 }
-._12zc70k8-3-4-0 {
+._12zc70k8-3-5-0 {
   width: 100%;
   box-sizing: border-box;
-  color: var(--_bx32h0-3-4-0);
+  color: var(--_bx32h0-3-5-0);
 }
-._12zc70k9-3-4-0 {
+._12zc70k9-3-5-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
 }
-._12zc70ka-3-4-0 {
+._12zc70ka-3-5-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
 }
 @media (prefers-reduced-motion) {
-  ._12zc70k3-3-4-0 {
+  ._12zc70k3-3-5-0 {
     transition-duration: 0s;
   }
 }

package/content/accordion/Accordion.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Accordion_css_ts_vanilla = require("./Accordion.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-4-0", variantClassNames: { size: { "default": "_12zc70k9-3-4-0", condensed: "_12zc70ka-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var accordionContentWrapperCSS = "_12zc70k7-3-4-0";
-var accordionDividerMarginCSS = { "default": "_12zc70k1-3-4-0", condensed: "_12zc70k2-3-4-0" };
-var accordionLabelCSS = "_12zc70k0-3-4-0";
-var accordionTriggerIconCSS = "_12zc70k3-3-4-0";
-var accordionTriggerIconEndCSS = "_12zc70k5-3-4-0";
-var accordionTriggerIconExpandedCSS = "_12zc70k6-3-4-0";
-var accordionTriggerIconStartCSS = "_12zc70k4-3-4-0";
+var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-5-0", variantClassNames: { size: { "default": "_12zc70k9-3-5-0", condensed: "_12zc70ka-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var accordionContentWrapperCSS = "_12zc70k7-3-5-0";
+var accordionDividerMarginCSS = { "default": "_12zc70k1-3-5-0", condensed: "_12zc70k2-3-5-0" };
+var accordionLabelCSS = "_12zc70k0-3-5-0";
+var accordionTriggerIconCSS = "_12zc70k3-3-5-0";
+var accordionTriggerIconEndCSS = "_12zc70k5-3-5-0";
+var accordionTriggerIconExpandedCSS = "_12zc70k6-3-5-0";
+var accordionTriggerIconStartCSS = "_12zc70k4-3-5-0";

package/content/ai-loading-indicator/AiLoadingIndicator.css

@@ -1,4 +1,4 @@
-@keyframes _1te6oqj4-3-4-0 {
+@keyframes _1te6oqj4-3-5-0 {
   0% {
     background-position: 20% 0%;
   }
@@ -6,27 +6,27 @@
     background-position: -120% 100%;
   }
 }
-._1te6oqj5-3-4-0 {
-  --_1te6oqj0-3-4-0: #CB53F6;
-  --_1te6oqj1-3-4-0: #7FF8F9;
-  --_1te6oqj2-3-4-0: 15%;
-  --_1te6oqj3-3-4-0: 5%;
+._1te6oqj5-3-5-0 {
+  --_1te6oqj0-3-5-0: #CB53F6;
+  --_1te6oqj1-3-5-0: #7FF8F9;
+  --_1te6oqj2-3-5-0: 15%;
+  --_1te6oqj3-3-5-0: 5%;
   position: relative;
-  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-4-0) 0%, var(--_1te6oqj1-3-4-0) 100%);
+  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-5-0) 0%, var(--_1te6oqj1-3-5-0) 100%);
   background-size: 200% 600%;
   background-position: 0% 0%;
   background-clip: text;
   color: transparent;
-  animation-name: _1te6oqj4-3-4-0;
+  animation-name: _1te6oqj4-3-5-0;
   animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
   animation-iteration-count: infinite;
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1te6oqj6-3-4-0 {
+._1te6oqj6-3-5-0 {
   padding-top: calc(var(--dt-spacings-size-20, 20px) / 2 - 0.5lh);
   min-width: 0;
 }
-._1te6oqj7-3-4-0 {
+._1te6oqj7-3-5-0 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
   display: flex;
@@ -34,12 +34,12 @@
   align-items: center;
   flex-shrink: 0;
 }
-._1te6oqj7-3-4-0 svg {
+._1te6oqj7-3-5-0 svg {
   display: block;
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1te6oqj8-3-4-0 {
+._1te6oqj8-3-5-0 {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;

package/content/ai-loading-indicator/AiLoadingIndicator.sty.js

@@ -24,7 +24,7 @@ __export(AiLoadingIndicator_css_exports, {
 });
 module.exports = __toCommonJS(AiLoadingIndicator_css_exports);
 var import_AiLoadingIndicator_css_ts_vanilla = require("./AiLoadingIndicator.css");
-var container = "_1te6oqj8-3-4-0";
-var iconWrapper = "_1te6oqj7-3-4-0";
-var label = "_1te6oqj6-3-4-0";
-var labelAnimation = "_1te6oqj5-3-4-0";
+var container = "_1te6oqj8-3-5-0";
+var iconWrapper = "_1te6oqj7-3-5-0";
+var label = "_1te6oqj6-3-5-0";
+var labelAnimation = "_1te6oqj5-3-5-0";

package/content/ai-response/AiResponse.css

@@ -6,20 +6,20 @@
     opacity: 1;
   }
 }
-._jdyvf80-3-4-0 {
+._jdyvf80-3-5-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._jdyvf80-3-4-0 [data-sd-animate]:not(table [data-sd-animate]) {
+._jdyvf80-3-5-0 [data-sd-animate]:not(table [data-sd-animate]) {
   animation: var(--sd-animation, sd-aiResponseAnimation) var(--sd-duration, 200ms) var(--sd-easing, ease) both;
 }
-._jdyvf80-3-4-0 ._17pa72a0-3-4-0 {
+._jdyvf80-3-5-0 ._17pa72a0-3-5-0 {
   margin-bottom: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
   margin-top: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
 }
-._jdyvf81-3-4-0 > :first-child {
+._jdyvf81-3-5-0 > :first-child {
   margin-top: 0;
 }
-._jdyvf81-3-4-0 > :last-child {
+._jdyvf81-3-5-0 > :last-child {
   margin-bottom: 0;
 }

package/content/ai-response/AiResponse.sty.js

@@ -21,7 +21,8 @@ __export(AiResponse_css_exports, {
   wrapper: () => wrapper
 });
 module.exports = __toCommonJS(AiResponse_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_CodeSnippet_css_ts_vanilla = require("../code-snippet/CodeSnippet.css");
 var import_AiResponse_css_ts_vanilla = require("./AiResponse.css");
-var streamdown = "_jdyvf81-3-4-0";
-var wrapper = "_jdyvf80-3-4-0";
+var streamdown = "_jdyvf81-3-5-0";
+var wrapper = "_jdyvf80-3-5-0";

package/content/avatar/Avatar.css

@@ -1,4 +1,4 @@
-._7llfy90-3-4-0 {
+._7llfy90-3-5-0 {
   cursor: default;
   box-sizing: border-box;
   border: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
@@ -11,19 +11,19 @@
   align-items: center;
   align-self: start;
 }
-._7llfy91-3-4-0 {
+._7llfy91-3-5-0 {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy92-3-4-0 {
+._7llfy92-3-5-0 {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy93-3-4-0 {
+._7llfy93-3-5-0 {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   background-color: var(--dt-colors-background-surface-default, #fff);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   z-index: 0;
 }
-._7llfy93-3-4-0:before {
+._7llfy93-3-5-0:before {
   content: "";
   aspect-ratio: 1/1;
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
@@ -32,36 +32,36 @@
   position: absolute;
   z-index: -1;
 }
-._7llfy94-3-4-0[tabindex]:hover, button._7llfy94-3-4-0:hover, a._7llfy94-3-4-0:hover, ._7llfy94-3-4-0:focus {
+._7llfy94-3-5-0[tabindex]:hover, button._7llfy94-3-5-0:hover, a._7llfy94-3-5-0:hover, ._7llfy94-3-5-0:focus {
   background-color: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
   z-index: 1;
 }
-button._7llfy94-3-4-0:hover, a._7llfy94-3-4-0:hover, button._7llfy94-3-4-0:active, a._7llfy94-3-4-0:active {
+button._7llfy94-3-5-0:hover, a._7llfy94-3-5-0:hover, button._7llfy94-3-5-0:active, a._7llfy94-3-5-0:active {
   cursor: pointer;
   z-index: 1;
 }
-._7llfy94-3-4-0[tabindex]:active, button._7llfy94-3-4-0:active, a._7llfy94-3-4-0:active {
+._7llfy94-3-5-0[tabindex]:active, button._7llfy94-3-5-0:active, a._7llfy94-3-5-0:active {
   background-color: var(--dt-colors-background-field-neutral-accent-active, #404164);
   border-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
   z-index: 1;
 }
-._7llfy95-3-4-0:before {
+._7llfy95-3-5-0:before {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy96-3-4-0:before {
+._7llfy96-3-5-0:before {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy97-3-4-0 {
+._7llfy97-3-5-0 {
   padding: 0;
   margin: 0;
   border: none;
   background-color: transparent;
 }
-._7llfy98-3-4-0 {
+._7llfy98-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   overflow-wrap: break-word;
 }
-._7llfy99-3-4-0 ~ div > div {
+._7llfy99-3-5-0 ~ div > div {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }

package/content/avatar/Avatar.sty.js

@@ -25,7 +25,7 @@ __export(Avatar_css_exports, {
 module.exports = __toCommonJS(Avatar_css_exports);
 var import_Avatar_css_ts_vanilla = require("./Avatar.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var avatarAbbreviationCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_7llfy90-3-4-0", variantClassNames: { size: { small: "_7llfy91-3-4-0", "default": "_7llfy92-3-4-0" }, disabled: { true: "_7llfy93-3-4-0", false: "_7llfy94-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-4-0"], [{ disabled: true, size: "default" }, "_7llfy96-3-4-0"]] });
-var avatarDisabledCSS = "_7llfy99-3-4-0";
-var avatarSubtitleCSS = "_7llfy98-3-4-0";
-var avatarWrapperCSS = "_7llfy97-3-4-0";
+var avatarAbbreviationCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_7llfy90-3-5-0", variantClassNames: { size: { small: "_7llfy91-3-5-0", "default": "_7llfy92-3-5-0" }, disabled: { true: "_7llfy93-3-5-0", false: "_7llfy94-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-5-0"], [{ disabled: true, size: "default" }, "_7llfy96-3-5-0"]] });
+var avatarDisabledCSS = "_7llfy99-3-5-0";
+var avatarSubtitleCSS = "_7llfy98-3-5-0";
+var avatarWrapperCSS = "_7llfy97-3-5-0";

package/content/avatar-group/AvatarGroup.css

@@ -1,9 +1,9 @@
-._129un530-3-4-0 {
+._129un530-3-5-0 {
   display: flex;
 }
-._129un531-3-4-0 {
+._129un531-3-5-0 {
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._129un531-3-4-0:first-child {
+._129un531-3-5-0:first-child {
   margin-left: var(--dt-spacings-size-0, 0);
 }

package/content/avatar-group/AvatarGroup.sty.js

@@ -22,5 +22,5 @@ __export(AvatarGroup_css_exports, {
 });
 module.exports = __toCommonJS(AvatarGroup_css_exports);
 var import_AvatarGroup_css_ts_vanilla = require("./AvatarGroup.css");
-var additionalAvatarWrapperCSS = "_129un530-3-4-0";
-var avatarGroupItemWrapperCSS = "_129un531-3-4-0";
+var additionalAvatarWrapperCSS = "_129un530-3-5-0";
+var avatarGroupItemWrapperCSS = "_129un531-3-5-0";

package/content/chip/BaseChip.css

@@ -1,9 +1,12 @@
-._1raebd91-3-4-0 {
+._1jgl8s50-3-5-0 ._1raebd90-3-5-0 {
+  gap: 1px;
+}
+._1raebd91-3-5-0 {
   cursor: not-allowed;
 }
-._1raebd92-3-4-0 {
-  background: var(--_bx32h2-3-4-0);
-  color: var(--_bx32h0-3-4-0);
+._1raebd92-3-5-0 {
+  background: var(--_bx32h2-3-5-0);
+  color: var(--_bx32h0-3-5-0);
   position: relative;
   display: grid;
   grid: auto / auto-flow auto;
@@ -17,100 +20,109 @@
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
 }
-._1raebd92-3-4-0:is(button) {
+._1raebd92-3-5-0:is(button) {
   border: 0;
 }
-._1raebd93-3-4-0 {
+._1raebd93-3-5-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   height: var(--dt-spacings-size-24, 24px);
 }
-._1raebd94-3-4-0 {
+._1raebd94-3-5-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-top: 0;
   padding-bottom: 0;
   height: var(--dt-spacings-size-20, 20px);
 }
-._1raebd95-3-4-0 {
+._1raebd95-3-5-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-._1raebd96-3-4-0 {
+._1raebd96-3-5-0 {
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1raebd97-3-4-0 {
+._1raebd97-3-5-0 {
   cursor: not-allowed;
   pointer-events: none;
 }
-._1raebd98-3-4-0:is(button) {
+._1raebd98-3-5-0:is(button) {
   cursor: pointer;
 }
-._1raebd9g-3-4-0[tabindex]:hover, button._1raebd9g-3-4-0:hover, a._1raebd9g-3-4-0:hover {
+._1raebd9g-3-5-0[tabindex]:hover, button._1raebd9g-3-5-0:hover, a._1raebd9g-3-5-0:hover {
   background: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
 }
-._1raebd9g-3-4-0[tabindex]:active, button._1raebd9g-3-4-0:active, a._1raebd9g-3-4-0:active {
+._1raebd9g-3-5-0[tabindex]:active, button._1raebd9g-3-5-0:active, a._1raebd9g-3-5-0:active {
   background: var(--dt-colors-background-field-neutral-accent-active, #404164);
 }
-._1raebd9h-3-4-0[tabindex]:hover, button._1raebd9h-3-4-0:hover, a._1raebd9h-3-4-0:hover {
+._1raebd9h-3-5-0[tabindex]:hover, button._1raebd9h-3-5-0:hover, a._1raebd9h-3-5-0:hover {
   background: var(--dt-colors-background-field-primary-accent-hover, #3b3fbe);
 }
-._1raebd9h-3-4-0[tabindex]:active, button._1raebd9h-3-4-0:active, a._1raebd9h-3-4-0:active {
+._1raebd9h-3-5-0[tabindex]:active, button._1raebd9h-3-5-0:active, a._1raebd9h-3-5-0:active {
   background: var(--dt-colors-background-field-primary-accent-active, #312dad);
 }
-._1raebd9i-3-4-0[tabindex]:hover, button._1raebd9i-3-4-0:hover, a._1raebd9i-3-4-0:hover {
+._1raebd9i-3-5-0[tabindex]:hover, button._1raebd9i-3-5-0:hover, a._1raebd9i-3-5-0:hover {
   background: var(--dt-colors-background-field-success-accent-hover, #1f5a54);
 }
-._1raebd9i-3-4-0[tabindex]:active, button._1raebd9i-3-4-0:active, a._1raebd9i-3-4-0:active {
+._1raebd9i-3-5-0[tabindex]:active, button._1raebd9i-3-5-0:active, a._1raebd9i-3-5-0:active {
   background: var(--dt-colors-background-field-success-accent-active, #0d4c47);
 }
-._1raebd9j-3-4-0[tabindex]:hover, button._1raebd9j-3-4-0:hover, a._1raebd9j-3-4-0:hover {
+._1raebd9j-3-5-0[tabindex]:hover, button._1raebd9j-3-5-0:hover, a._1raebd9j-3-5-0:hover {
   background: var(--dt-colors-background-field-warning-accent-hover, #ffb54f);
 }
-._1raebd9j-3-4-0[tabindex]:active, button._1raebd9j-3-4-0:active, a._1raebd9j-3-4-0:active {
+._1raebd9j-3-5-0[tabindex]:active, button._1raebd9j-3-5-0:active, a._1raebd9j-3-5-0:active {
   background: var(--dt-colors-background-field-warning-accent-active, #ffc76d);
 }
-._1raebd9k-3-4-0[tabindex]:hover, button._1raebd9k-3-4-0:hover, a._1raebd9k-3-4-0:hover {
+._1raebd9k-3-5-0[tabindex]:hover, button._1raebd9k-3-5-0:hover, a._1raebd9k-3-5-0:hover {
   background: var(--dt-colors-background-field-critical-accent-hover, #b4002b);
 }
-._1raebd9k-3-4-0[tabindex]:active, button._1raebd9k-3-4-0:active, a._1raebd9k-3-4-0:active {
+._1raebd9k-3-5-0[tabindex]:active, button._1raebd9k-3-5-0:active, a._1raebd9k-3-5-0:active {
   background: var(--dt-colors-background-field-critical-accent-active, #a2001d);
 }
-._1raebd9l-3-4-0[tabindex]:hover, button._1raebd9l-3-4-0:hover, a._1raebd9l-3-4-0:hover {
+._1raebd9l-3-5-0[tabindex]:hover, button._1raebd9l-3-5-0:hover, a._1raebd9l-3-5-0:hover {
+  background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+}
+._1raebd9l-3-5-0[tabindex]:active, button._1raebd9l-3-5-0:active, a._1raebd9l-3-5-0:active {
+  background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._1jgl8s50-3-5-0 ._1raebd9l-3-5-0 {
+  background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._1jgl8s50-3-5-0 ._1raebd9l-3-5-0[tabindex]:hover, ._1jgl8s50-3-5-0 button._1raebd9l-3-5-0:hover, ._1jgl8s50-3-5-0 a._1raebd9l-3-5-0:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1raebd9l-3-4-0[tabindex]:active, button._1raebd9l-3-4-0:active, a._1raebd9l-3-4-0:active {
+._1jgl8s50-3-5-0 ._1raebd9l-3-5-0[tabindex]:active, ._1jgl8s50-3-5-0 button._1raebd9l-3-5-0:active, ._1jgl8s50-3-5-0 a._1raebd9l-3-5-0:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1raebd9m-3-4-0[tabindex]:hover, button._1raebd9m-3-4-0:hover, a._1raebd9m-3-4-0:hover {
+._1raebd9m-3-5-0[tabindex]:hover, button._1raebd9m-3-5-0:hover, a._1raebd9m-3-5-0:hover {
   background: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
 }
-._1raebd9m-3-4-0[tabindex]:active, button._1raebd9m-3-4-0:active, a._1raebd9m-3-4-0:active {
+._1raebd9m-3-5-0[tabindex]:active, button._1raebd9m-3-5-0:active, a._1raebd9m-3-5-0:active {
   background: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1raebd9n-3-4-0[tabindex]:hover, button._1raebd9n-3-4-0:hover, a._1raebd9n-3-4-0:hover {
+._1raebd9n-3-5-0[tabindex]:hover, button._1raebd9n-3-5-0:hover, a._1raebd9n-3-5-0:hover {
   background: var(--dt-colors-background-field-success-emphasized-hover, #d3dedd);
 }
-._1raebd9n-3-4-0[tabindex]:active, button._1raebd9n-3-4-0:active, a._1raebd9n-3-4-0:active {
+._1raebd9n-3-5-0[tabindex]:active, button._1raebd9n-3-5-0:active, a._1raebd9n-3-5-0:active {
   background: var(--dt-colors-background-field-success-emphasized-active, #c7d5d3);
 }
-._1raebd9o-3-4-0[tabindex]:hover, button._1raebd9o-3-4-0:hover, a._1raebd9o-3-4-0:hover {
+._1raebd9o-3-5-0[tabindex]:hover, button._1raebd9o-3-5-0:hover, a._1raebd9o-3-5-0:hover {
   background: var(--dt-colors-background-field-warning-emphasized-hover, #f9ebdb);
 }
-._1raebd9o-3-4-0[tabindex]:active, button._1raebd9o-3-4-0:active, a._1raebd9o-3-4-0:active {
+._1raebd9o-3-5-0[tabindex]:active, button._1raebd9o-3-5-0:active, a._1raebd9o-3-5-0:active {
   background: var(--dt-colors-background-field-warning-emphasized-active, #f9e6d0);
 }
-._1raebd9p-3-4-0[tabindex]:hover, button._1raebd9p-3-4-0:hover, a._1raebd9p-3-4-0:hover {
+._1raebd9p-3-5-0[tabindex]:hover, button._1raebd9p-3-5-0:hover, a._1raebd9p-3-5-0:hover {
   background: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1raebd9p-3-4-0[tabindex]:active, button._1raebd9p-3-4-0:active, a._1raebd9p-3-4-0:active {
+._1raebd9p-3-5-0[tabindex]:active, button._1raebd9p-3-5-0:active, a._1raebd9p-3-5-0:active {
   background: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1raebd9q-3-4-0 {
-  color: var(--_bx32h0-3-4-0);
+._1raebd9q-3-5-0 {
+  color: var(--_bx32h0-3-5-0);
   min-width: 0;
   box-sizing: border-box;
   white-space: nowrap;
@@ -120,14 +132,14 @@
   text-transform: none;
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd9q-3-4-0 * {
-  color: var(--_bx32h0-3-4-0);
+._1raebd9q-3-5-0 * {
+  color: var(--_bx32h0-3-5-0);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: baseline;
 }
-._1raebd9r-3-4-0 {
+._1raebd9r-3-5-0 {
   display: grid;
   grid: auto / auto-flow auto;
 }

package/content/chip/BaseChip.sty.js

@@ -28,8 +28,8 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_BaseChip_css_ts_vanilla = require("./BaseChip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1raebd92-3-4-0", variantClassNames: { size: { "default": "_1raebd93-3-4-0", condensed: "_1raebd94-3-4-0" }, hasDeleteButton: { true: "_1raebd95-3-4-0", false: "_1raebd96-3-4-0" }, disabled: { true: "_1raebd97-3-4-0", false: "_1raebd98-3-4-0" }, color: { neutral: "_1raebd99-3-4-0", primary: "_1raebd9a-3-4-0", success: "_1raebd9b-3-4-0", warning: "_1raebd9c-3-4-0", critical: "_1raebd9d-3-4-0" }, variant: { emphasized: "_1raebd9e-3-4-0", accent: "_1raebd9f-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-4-0"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-4-0"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-4-0"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-4-0"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-4-0"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-4-0"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-4-0"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-4-0"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-4-0"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-4-0"]] });
-var disabledWrapper = "_1raebd91-3-4-0";
-var textContainer = "_1raebd9r-3-4-0";
-var value = "_1raebd9q-3-4-0";
-var wrapper = "_1raebd90-3-4-0";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1raebd92-3-5-0", variantClassNames: { size: { "default": "_1raebd93-3-5-0", condensed: "_1raebd94-3-5-0" }, hasDeleteButton: { true: "_1raebd95-3-5-0", false: "_1raebd96-3-5-0" }, disabled: { true: "_1raebd97-3-5-0", false: "_1raebd98-3-5-0" }, color: { neutral: "_1raebd99-3-5-0", primary: "_1raebd9a-3-5-0", success: "_1raebd9b-3-5-0", warning: "_1raebd9c-3-5-0", critical: "_1raebd9d-3-5-0" }, variant: { emphasized: "_1raebd9e-3-5-0", accent: "_1raebd9f-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-5-0"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-5-0"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-5-0"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-5-0"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-5-0"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-5-0"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-5-0"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-5-0"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-5-0"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-5-0"]] });
+var disabledWrapper = "_1raebd91-3-5-0";
+var textContainer = "_1raebd9r-3-5-0";
+var value = "_1raebd9q-3-5-0";
+var wrapper = "_1raebd90-3-5-0";

package/content/chip/ChipContent.css

@@ -1,24 +1,24 @@
-._uhh9yl1-3-4-0 {
+._uhh9yl1-3-5-0 {
   display: flex;
   align-self: stretch;
   line-height: 100%;
-  fill: var(--_bx32h1-3-4-0);
-  color: var(--_bx32h0-3-4-0);
+  fill: var(--_bx32h1-3-5-0);
+  color: var(--_bx32h0-3-5-0);
 }
-._uhh9yl2-3-4-0 {
-  --_uhh9yl0-3-4-0: 20px;
+._uhh9yl2-3-5-0 {
+  --_uhh9yl0-3-5-0: 20px;
 }
-._uhh9yl3-3-4-0 {
-  --_uhh9yl0-3-4-0: 16px;
+._uhh9yl3-3-5-0 {
+  --_uhh9yl0-3-5-0: 16px;
 }
-._1raebd99-3-4-0._1raebd9e-3-4-0._1raebd98-3-4-0 ._uhh9yl4-3-4-0 {
+._1raebd99-3-5-0._1raebd9e-3-5-0._1raebd98-3-5-0 ._uhh9yl4-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._uhh9yl1-3-4-0._uhh9yl1-3-4-0 svg {
+._uhh9yl1-3-5-0._uhh9yl1-3-5-0 svg {
   box-sizing: content-box;
   align-items: center;
   align-self: center;
-  width: var(--_uhh9yl0-3-4-0);
-  height: var(--_uhh9yl0-3-4-0);
+  width: var(--_uhh9yl0-3-5-0);
+  height: var(--_uhh9yl0-3-5-0);
 }

package/content/chip/ChipContent.sty.js

@@ -26,5 +26,5 @@ var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_BaseChip_css_ts_vanilla = require("./BaseChip.css");
 var import_ChipContent_css_ts_vanilla = require("./ChipContent.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var content = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uhh9yl1-3-4-0", variantClassNames: { size: { "default": "_uhh9yl2-3-4-0", condensed: "_uhh9yl3-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var prefix = "_uhh9yl4-3-4-0";
+var content = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uhh9yl1-3-5-0", variantClassNames: { size: { "default": "_uhh9yl2-3-5-0", condensed: "_uhh9yl3-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var prefix = "_uhh9yl4-3-5-0";