@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/cjs/{token-utils-5000595c.js → token-utils-COKjUxmn.js}

@@ -3,9 +3,36 @@
  */
 'use strict';
 
-const tokens_module = require('./tokens.module-7c947029.js');
+var tokens_module = require('./tokens.module-Bhh9B2g8.js');
+
+const turva2ColorTokens = {
+    "color-turva2-red-600": "rgb(230, 23, 64)",
+    "color-turva2-red-700": "rgb(185, 3, 41)",
+    "color-turva2-red-800": "rgb(140, 0, 30)",
+    "color-turva2-gray-00": "rgb(245, 246, 247)",
+    "color-turva2-gray-100": "rgb(212, 221, 226)",
+    "color-turva2-gray-200": "rgb(178, 194, 205)",
+    "color-turva2-gray-400": "rgb(120, 145, 164)",
+    "color-turva2-gray-500": "rgb(95, 122, 143)",
+    "color-turva2-gray-900": "rgb(23, 42, 59)",
+    "color-turva-nude-00": "rgb(253, 247, 242)",
+    "color-turva-nude-50": "rgb(251, 235, 225)",
+    "color-turva-nude-200": "rgb(241, 202, 178)"};
 
 const allowedThemes = ["turva"];
+const MATCH_CAPITAL_CASE = /[A-Z]/g;
+function isTurva2() {
+    var _a;
+    if (typeof document === "undefined") {
+        return false;
+    }
+    return !!((_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"));
+}
+function isCamelCase(str) {
+    const camel = MATCH_CAPITAL_CASE.test(str);
+    const barredString = !str.includes("_") && !str.includes("-") && !str.includes(" ");
+    return camel && barredString;
+}
 function isDashCase(str) {
     const dash = str.includes("-");
     const barredString = str.includes(" ") || str.includes("_");
@@ -51,18 +78,61 @@ function addTheme(str, theme) {
     }
     return str;
 }
+/**
+ * Add "-turva" to color names (or "Turva" to camelCase color names)
+ */
+function postfixTheme(name, theme) {
+    if (!name) {
+        return undefined;
+    }
+    if (["", "default"].includes(theme)) {
+        return name;
+    }
+    if ((isDashCase(name) && name.endsWith(`-${theme}`)) || (isCamelCase(name) && name.endsWith(capitalize(theme)))) {
+        return name;
+    }
+    if (tokens_module.tokens[`color${camelize(name)}${capitalizeFirstLetter(theme)}`]) {
+        return !isCamelCase(name) ? `${name}-${theme}` : `${name}${capitalize(theme)}`;
+    }
+    return name;
+}
 function getColorByName(name, theme = "") {
     if (!name) {
         return undefined;
     }
-    const defaultColor = convertToColorName(name);
-    const themedColor = convertToColorName(name, theme);
-    // lets just try to get the color first to save some cycles
-    let resolvedToken = tokens_module.tokens[themedColor];
-    if (!resolvedToken) {
-        resolvedToken = tokens_module.tokens[defaultColor];
+    if ((theme === "turva" || name.endsWith("-turva")) && isTurva2()) {
+        switch (name.replace(/-turva$/, "")) {
+            case "primary-lightest":
+                return turva2ColorTokens["color-turva-nude-00"];
+            case "primary-lighter":
+                return turva2ColorTokens["color-turva-nude-50"];
+            case "primary-light":
+                return turva2ColorTokens["color-turva-nude-200"];
+            case "primary":
+                return turva2ColorTokens["color-turva2-red-600"];
+            case "primary-darker":
+                return turva2ColorTokens["color-turva2-red-700"];
+            case "primary-dark":
+                return turva2ColorTokens["color-turva2-red-800"];
+            case "secondary":
+                return turva2ColorTokens["color-turva2-gray-900"];
+            case "gray-lighter":
+                return turva2ColorTokens["color-turva2-gray-00"];
+            case "gray-light":
+                return turva2ColorTokens["color-turva2-gray-100"];
+            case "gray":
+                return turva2ColorTokens["color-turva2-gray-200"];
+            case "gray-dark":
+                return turva2ColorTokens["color-turva2-gray-400"];
+            case "gray-darker":
+                return turva2ColorTokens["color-turva2-gray-500"];
+            // carry on to old turva colors
+        }
     }
-    return resolvedToken;
+    const defaultColor = convertToColorName(name);
+    const themedColor = theme && convertToColorName(name, theme);
+    // return themed color if it exists
+    return tokens_module.tokens[themedColor] || tokens_module.tokens[defaultColor];
 }
 function convertToColorName(name = "", theme = "") {
     let colorResolution = name;
@@ -106,7 +176,7 @@ function rgbaColorFromRgb(color, opacity) {
     return `rgba(${R},${G},${B},${opacity})`;
 }
 function shadeRGBColor(color, percent) {
-    const f = color.split(","), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent;
+    const f = color.split(","), t = 0 , p = percent * -1 ;
     let R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);
     R = Math.round((t - R) * p) + R;
     G = Math.round((t - G) * p) + G;
@@ -142,5 +212,6 @@ exports.breakpointTokensUpTo = breakpointTokensUpTo;
 exports.capitalizeFirstLetter = capitalizeFirstLetter;
 exports.getColorByName = getColorByName;
 exports.getShadowByName = getShadowByName;
+exports.postfixTheme = postfixTheme;
 exports.rgbaColorFromRgb = rgbaColorFromRgb;
 exports.shadeRGBColor = shadeRGBColor;

package/lib/cjs/{tokens-57e06fe4.js → tokens-9aevMbB1.js}

@@ -3,6 +3,18 @@
  */
 'use strict';
 
+const color_background_accent_primary = "rgb(240, 247, 250)";
+const color_background_accent_primary_turva = "rgb(253, 247, 242)";
+const color_background_accent_secondary = "rgb(217, 236, 245)";
+const color_background_accent_secondary_turva = "rgb(251, 225, 209)";
+const color_background_accent_tertiary = "rgb(0, 119, 179)";
+const color_background_accent_tertiary_turva = "rgb(230, 23, 64)";
+const color_background_primary = "rgb(255, 255, 255)";
+const color_background_primary_turva = "rgb(255, 255, 255)";
+const color_background_secondary = "rgb(245, 248, 250)";
+const color_background_secondary_turva = "rgb(245, 246, 247)";
+const color_background_tertiary = "rgb(8, 42, 77)";
+const color_background_tertiary_turva = "rgb(6, 23, 38)";
 const color_brand_blue = "rgb(0, 161, 212)";
 const color_brand_gray_turva = "rgb(178, 180, 179)";
 const color_category_family = "rgb(11, 114, 136)";
@@ -104,11 +116,35 @@ const color_success_300 = "rgb(163, 229, 202)";
 const color_success_400 = "rgb(134, 215, 185)";
 const color_success_50 = "rgb(231, 248, 239)";
 const color_success_500 = "rgb(105, 196, 166)";
-const color_success_600 = "rgb(77, 171, 143)";
+const color_success_600 = "rgb(76, 164, 138)";
 const color_success_700 = "rgb(48, 131, 105)";
 const color_success_800 = "rgb(29, 106, 88)";
 const color_success_900 = "rgb(13, 71, 59)";
 const color_success_turva = "rgb(48, 131, 105)";
+const color_turva2_gray_00 = "rgb(245, 246, 247)";
+const color_turva2_gray_100 = "rgb(212, 221, 226)";
+const color_turva2_gray_1000 = "rgb(6, 23, 38)";
+const color_turva2_gray_200 = "rgb(178, 194, 205)";
+const color_turva2_gray_300 = "rgb(148, 169, 185)";
+const color_turva2_gray_400 = "rgb(120, 145, 164)";
+const color_turva2_gray_50 = "rgb(228, 233, 237)";
+const color_turva2_gray_500 = "rgb(95, 122, 143)";
+const color_turva2_gray_600 = "rgb(72, 100, 122)";
+const color_turva2_gray_700 = "rgb(53, 79, 101)";
+const color_turva2_gray_800 = "rgb(37, 60, 80)";
+const color_turva2_gray_900 = "rgb(23, 42, 59)";
+const color_turva2_red_00 = "rgb(255, 242, 242)";
+const color_turva2_red_100 = "rgb(255, 229, 230)";
+const color_turva2_red_1000 = "rgb(51, 0, 10)";
+const color_turva2_red_200 = "rgb(255, 201, 204)";
+const color_turva2_red_300 = "rgb(249, 164, 172)";
+const color_turva2_red_400 = "rgb(243, 119, 133)";
+const color_turva2_red_50 = "rgb(255, 236, 236)";
+const color_turva2_red_500 = "rgb(236, 69, 96)";
+const color_turva2_red_600 = "rgb(230, 23, 64)";
+const color_turva2_red_700 = "rgb(185, 3, 41)";
+const color_turva2_red_800 = "rgb(140, 0, 30)";
+const color_turva2_red_900 = "rgb(96, 0, 20)";
 const color_turva_gray_00 = "rgb(245, 247, 250)";
 const color_turva_gray_100 = "rgb(222, 224, 228)";
 const color_turva_gray_1000 = "rgb(8, 13, 38)";
@@ -121,6 +157,18 @@ const color_turva_gray_600 = "rgb(98, 104, 122)";
 const color_turva_gray_700 = "rgb(71, 78, 101)";
 const color_turva_gray_800 = "rgb(45, 52, 79)";
 const color_turva_gray_900 = "rgb(23, 28, 58)";
+const color_turva_nude_00 = "rgb(253, 247, 242)";
+const color_turva_nude_100 = "rgb(251, 225, 209)";
+const color_turva_nude_1000 = "rgb(38, 21, 15)";
+const color_turva_nude_200 = "rgb(241, 202, 178)";
+const color_turva_nude_300 = "rgb(216, 174, 150)";
+const color_turva_nude_400 = "rgb(190, 147, 124)";
+const color_turva_nude_50 = "rgb(251, 235, 225)";
+const color_turva_nude_500 = "rgb(165, 122, 101)";
+const color_turva_nude_600 = "rgb(140, 98, 79)";
+const color_turva_nude_700 = "rgb(114, 76, 60)";
+const color_turva_nude_800 = "rgb(89, 56, 43)";
+const color_turva_nude_900 = "rgb(64, 38, 28)";
 const color_turva_red_00 = "rgb(255, 241, 241)";
 const color_turva_red_100 = "rgb(255, 213, 215)";
 const color_turva_red_1000 = "rgb(51, 5, 20)";
@@ -142,7 +190,7 @@ const color_warning_300 = "rgb(255, 217, 120)";
 const color_warning_400 = "rgb(255, 199, 79)";
 const color_warning_50 = "rgb(255, 247, 221)";
 const color_warning_500 = "rgb(247, 178, 40)";
-const color_warning_600 = "rgb(212, 151, 32)";
+const color_warning_600 = "rgb(196, 138, 23)";
 const color_warning_700 = "rgb(156, 110, 22)";
 const color_warning_800 = "rgb(126, 87, 16)";
 const color_warning_900 = "rgb(81, 55, 9)";
@@ -250,7 +298,19 @@ const z_index_popup = "950";
 const z_index_spinner = "800";
 const z_index_sticky = "300";
 const z_index_toast = "500";
-const tokens = {
+var tokens = {
+	color_background_accent_primary: color_background_accent_primary,
+	color_background_accent_primary_turva: color_background_accent_primary_turva,
+	color_background_accent_secondary: color_background_accent_secondary,
+	color_background_accent_secondary_turva: color_background_accent_secondary_turva,
+	color_background_accent_tertiary: color_background_accent_tertiary,
+	color_background_accent_tertiary_turva: color_background_accent_tertiary_turva,
+	color_background_primary: color_background_primary,
+	color_background_primary_turva: color_background_primary_turva,
+	color_background_secondary: color_background_secondary,
+	color_background_secondary_turva: color_background_secondary_turva,
+	color_background_tertiary: color_background_tertiary,
+	color_background_tertiary_turva: color_background_tertiary_turva,
 	color_brand_blue: color_brand_blue,
 	color_brand_gray_turva: color_brand_gray_turva,
 	color_category_family: color_category_family,
@@ -357,6 +417,30 @@ const tokens = {
 	color_success_800: color_success_800,
 	color_success_900: color_success_900,
 	color_success_turva: color_success_turva,
+	color_turva2_gray_00: color_turva2_gray_00,
+	color_turva2_gray_100: color_turva2_gray_100,
+	color_turva2_gray_1000: color_turva2_gray_1000,
+	color_turva2_gray_200: color_turva2_gray_200,
+	color_turva2_gray_300: color_turva2_gray_300,
+	color_turva2_gray_400: color_turva2_gray_400,
+	color_turva2_gray_50: color_turva2_gray_50,
+	color_turva2_gray_500: color_turva2_gray_500,
+	color_turva2_gray_600: color_turva2_gray_600,
+	color_turva2_gray_700: color_turva2_gray_700,
+	color_turva2_gray_800: color_turva2_gray_800,
+	color_turva2_gray_900: color_turva2_gray_900,
+	color_turva2_red_00: color_turva2_red_00,
+	color_turva2_red_100: color_turva2_red_100,
+	color_turva2_red_1000: color_turva2_red_1000,
+	color_turva2_red_200: color_turva2_red_200,
+	color_turva2_red_300: color_turva2_red_300,
+	color_turva2_red_400: color_turva2_red_400,
+	color_turva2_red_50: color_turva2_red_50,
+	color_turva2_red_500: color_turva2_red_500,
+	color_turva2_red_600: color_turva2_red_600,
+	color_turva2_red_700: color_turva2_red_700,
+	color_turva2_red_800: color_turva2_red_800,
+	color_turva2_red_900: color_turva2_red_900,
 	color_turva_gray_00: color_turva_gray_00,
 	color_turva_gray_100: color_turva_gray_100,
 	color_turva_gray_1000: color_turva_gray_1000,
@@ -369,6 +453,18 @@ const tokens = {
 	color_turva_gray_700: color_turva_gray_700,
 	color_turva_gray_800: color_turva_gray_800,
 	color_turva_gray_900: color_turva_gray_900,
+	color_turva_nude_00: color_turva_nude_00,
+	color_turva_nude_100: color_turva_nude_100,
+	color_turva_nude_1000: color_turva_nude_1000,
+	color_turva_nude_200: color_turva_nude_200,
+	color_turva_nude_300: color_turva_nude_300,
+	color_turva_nude_400: color_turva_nude_400,
+	color_turva_nude_50: color_turva_nude_50,
+	color_turva_nude_500: color_turva_nude_500,
+	color_turva_nude_600: color_turva_nude_600,
+	color_turva_nude_700: color_turva_nude_700,
+	color_turva_nude_800: color_turva_nude_800,
+	color_turva_nude_900: color_turva_nude_900,
 	color_turva_red_00: color_turva_red_00,
 	color_turva_red_100: color_turva_red_100,
 	color_turva_red_1000: color_turva_red_1000,
@@ -500,8 +596,20 @@ const tokens = {
 	z_index_toast: z_index_toast
 };
 
-const tokens$1 = /*#__PURE__*/Object.freeze({
+var tokens$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  color_background_accent_primary: color_background_accent_primary,
+  color_background_accent_primary_turva: color_background_accent_primary_turva,
+  color_background_accent_secondary: color_background_accent_secondary,
+  color_background_accent_secondary_turva: color_background_accent_secondary_turva,
+  color_background_accent_tertiary: color_background_accent_tertiary,
+  color_background_accent_tertiary_turva: color_background_accent_tertiary_turva,
+  color_background_primary: color_background_primary,
+  color_background_primary_turva: color_background_primary_turva,
+  color_background_secondary: color_background_secondary,
+  color_background_secondary_turva: color_background_secondary_turva,
+  color_background_tertiary: color_background_tertiary,
+  color_background_tertiary_turva: color_background_tertiary_turva,
   color_brand_blue: color_brand_blue,
   color_brand_gray_turva: color_brand_gray_turva,
   color_category_family: color_category_family,
@@ -608,6 +716,30 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   color_success_800: color_success_800,
   color_success_900: color_success_900,
   color_success_turva: color_success_turva,
+  color_turva2_gray_00: color_turva2_gray_00,
+  color_turva2_gray_100: color_turva2_gray_100,
+  color_turva2_gray_1000: color_turva2_gray_1000,
+  color_turva2_gray_200: color_turva2_gray_200,
+  color_turva2_gray_300: color_turva2_gray_300,
+  color_turva2_gray_400: color_turva2_gray_400,
+  color_turva2_gray_50: color_turva2_gray_50,
+  color_turva2_gray_500: color_turva2_gray_500,
+  color_turva2_gray_600: color_turva2_gray_600,
+  color_turva2_gray_700: color_turva2_gray_700,
+  color_turva2_gray_800: color_turva2_gray_800,
+  color_turva2_gray_900: color_turva2_gray_900,
+  color_turva2_red_00: color_turva2_red_00,
+  color_turva2_red_100: color_turva2_red_100,
+  color_turva2_red_1000: color_turva2_red_1000,
+  color_turva2_red_200: color_turva2_red_200,
+  color_turva2_red_300: color_turva2_red_300,
+  color_turva2_red_400: color_turva2_red_400,
+  color_turva2_red_50: color_turva2_red_50,
+  color_turva2_red_500: color_turva2_red_500,
+  color_turva2_red_600: color_turva2_red_600,
+  color_turva2_red_700: color_turva2_red_700,
+  color_turva2_red_800: color_turva2_red_800,
+  color_turva2_red_900: color_turva2_red_900,
   color_turva_gray_00: color_turva_gray_00,
   color_turva_gray_100: color_turva_gray_100,
   color_turva_gray_1000: color_turva_gray_1000,
@@ -620,6 +752,18 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   color_turva_gray_700: color_turva_gray_700,
   color_turva_gray_800: color_turva_gray_800,
   color_turva_gray_900: color_turva_gray_900,
+  color_turva_nude_00: color_turva_nude_00,
+  color_turva_nude_100: color_turva_nude_100,
+  color_turva_nude_1000: color_turva_nude_1000,
+  color_turva_nude_200: color_turva_nude_200,
+  color_turva_nude_300: color_turva_nude_300,
+  color_turva_nude_400: color_turva_nude_400,
+  color_turva_nude_50: color_turva_nude_50,
+  color_turva_nude_500: color_turva_nude_500,
+  color_turva_nude_600: color_turva_nude_600,
+  color_turva_nude_700: color_turva_nude_700,
+  color_turva_nude_800: color_turva_nude_800,
+  color_turva_nude_900: color_turva_nude_900,
   color_turva_red_00: color_turva_red_00,
   color_turva_red_100: color_turva_red_100,
   color_turva_red_1000: color_turva_red_1000,
@@ -646,6 +790,7 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   color_warning_800: color_warning_800,
   color_warning_900: color_warning_900,
   color_warning_turva: color_warning_turva,
+  default: tokens,
   font_family_heading: font_family_heading,
   font_family_heading_turva: font_family_heading_turva,
   font_family_text: font_family_text,
@@ -748,13 +893,10 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   z_index_popup: z_index_popup,
   z_index_spinner: z_index_spinner,
   z_index_sticky: z_index_sticky,
-  z_index_toast: z_index_toast,
-  'default': tokens
+  z_index_toast: z_index_toast
 });
 
 exports.font_size_medium = font_size_medium;
 exports.media_query_large = media_query_large;
 exports.media_query_medium = media_query_medium;
-exports.media_query_small = media_query_small;
-exports.media_query_xx_large = media_query_xx_large;
 exports.tokens = tokens$1;

package/lib/cjs/{tokens.module-7c947029.js → tokens.module-Bhh9B2g8.js}

@@ -3,6 +3,18 @@
  */
 'use strict';
 
+const colorBackgroundAccentPrimary = "rgb(240, 247, 250)";
+const colorBackgroundAccentPrimaryTurva = "rgb(253, 247, 242)";
+const colorBackgroundAccentSecondary = "rgb(217, 236, 245)";
+const colorBackgroundAccentSecondaryTurva = "rgb(251, 225, 209)";
+const colorBackgroundAccentTertiary = "rgb(0, 119, 179)";
+const colorBackgroundAccentTertiaryTurva = "rgb(230, 23, 64)";
+const colorBackgroundPrimary = "rgb(255, 255, 255)";
+const colorBackgroundPrimaryTurva = "rgb(255, 255, 255)";
+const colorBackgroundSecondary = "rgb(245, 248, 250)";
+const colorBackgroundSecondaryTurva = "rgb(245, 246, 247)";
+const colorBackgroundTertiary = "rgb(8, 42, 77)";
+const colorBackgroundTertiaryTurva = "rgb(6, 23, 38)";
 const colorBrandBlue = "rgb(0, 161, 212)";
 const colorBrandGrayTurva = "rgb(178, 180, 179)";
 const colorCategoryFamily = "rgb(11, 114, 136)";
@@ -104,11 +116,35 @@ const colorSuccess300 = "rgb(163, 229, 202)";
 const colorSuccess400 = "rgb(134, 215, 185)";
 const colorSuccess50 = "rgb(231, 248, 239)";
 const colorSuccess500 = "rgb(105, 196, 166)";
-const colorSuccess600 = "rgb(77, 171, 143)";
+const colorSuccess600 = "rgb(76, 164, 138)";
 const colorSuccess700 = "rgb(48, 131, 105)";
 const colorSuccess800 = "rgb(29, 106, 88)";
 const colorSuccess900 = "rgb(13, 71, 59)";
 const colorSuccessTurva = "rgb(48, 131, 105)";
+const colorTurva2Gray00 = "rgb(245, 246, 247)";
+const colorTurva2Gray100 = "rgb(212, 221, 226)";
+const colorTurva2Gray1000 = "rgb(6, 23, 38)";
+const colorTurva2Gray200 = "rgb(178, 194, 205)";
+const colorTurva2Gray300 = "rgb(148, 169, 185)";
+const colorTurva2Gray400 = "rgb(120, 145, 164)";
+const colorTurva2Gray50 = "rgb(228, 233, 237)";
+const colorTurva2Gray500 = "rgb(95, 122, 143)";
+const colorTurva2Gray600 = "rgb(72, 100, 122)";
+const colorTurva2Gray700 = "rgb(53, 79, 101)";
+const colorTurva2Gray800 = "rgb(37, 60, 80)";
+const colorTurva2Gray900 = "rgb(23, 42, 59)";
+const colorTurva2Red00 = "rgb(255, 242, 242)";
+const colorTurva2Red100 = "rgb(255, 229, 230)";
+const colorTurva2Red1000 = "rgb(51, 0, 10)";
+const colorTurva2Red200 = "rgb(255, 201, 204)";
+const colorTurva2Red300 = "rgb(249, 164, 172)";
+const colorTurva2Red400 = "rgb(243, 119, 133)";
+const colorTurva2Red50 = "rgb(255, 236, 236)";
+const colorTurva2Red500 = "rgb(236, 69, 96)";
+const colorTurva2Red600 = "rgb(230, 23, 64)";
+const colorTurva2Red700 = "rgb(185, 3, 41)";
+const colorTurva2Red800 = "rgb(140, 0, 30)";
+const colorTurva2Red900 = "rgb(96, 0, 20)";
 const colorTurvaGray00 = "rgb(245, 247, 250)";
 const colorTurvaGray100 = "rgb(222, 224, 228)";
 const colorTurvaGray1000 = "rgb(8, 13, 38)";
@@ -121,6 +157,18 @@ const colorTurvaGray600 = "rgb(98, 104, 122)";
 const colorTurvaGray700 = "rgb(71, 78, 101)";
 const colorTurvaGray800 = "rgb(45, 52, 79)";
 const colorTurvaGray900 = "rgb(23, 28, 58)";
+const colorTurvaNude00 = "rgb(253, 247, 242)";
+const colorTurvaNude100 = "rgb(251, 225, 209)";
+const colorTurvaNude1000 = "rgb(38, 21, 15)";
+const colorTurvaNude200 = "rgb(241, 202, 178)";
+const colorTurvaNude300 = "rgb(216, 174, 150)";
+const colorTurvaNude400 = "rgb(190, 147, 124)";
+const colorTurvaNude50 = "rgb(251, 235, 225)";
+const colorTurvaNude500 = "rgb(165, 122, 101)";
+const colorTurvaNude600 = "rgb(140, 98, 79)";
+const colorTurvaNude700 = "rgb(114, 76, 60)";
+const colorTurvaNude800 = "rgb(89, 56, 43)";
+const colorTurvaNude900 = "rgb(64, 38, 28)";
 const colorTurvaRed00 = "rgb(255, 241, 241)";
 const colorTurvaRed100 = "rgb(255, 213, 215)";
 const colorTurvaRed1000 = "rgb(51, 5, 20)";
@@ -142,7 +190,7 @@ const colorWarning300 = "rgb(255, 217, 120)";
 const colorWarning400 = "rgb(255, 199, 79)";
 const colorWarning50 = "rgb(255, 247, 221)";
 const colorWarning500 = "rgb(247, 178, 40)";
-const colorWarning600 = "rgb(212, 151, 32)";
+const colorWarning600 = "rgb(196, 138, 23)";
 const colorWarning700 = "rgb(156, 110, 22)";
 const colorWarning800 = "rgb(126, 87, 16)";
 const colorWarning900 = "rgb(81, 55, 9)";
@@ -251,8 +299,20 @@ const zIndexSpinner = "800";
 const zIndexSticky = "300";
 const zIndexToast = "500";
 
-const tokens = /*#__PURE__*/Object.freeze({
+var tokens = /*#__PURE__*/Object.freeze({
 	__proto__: null,
+	colorBackgroundAccentPrimary: colorBackgroundAccentPrimary,
+	colorBackgroundAccentPrimaryTurva: colorBackgroundAccentPrimaryTurva,
+	colorBackgroundAccentSecondary: colorBackgroundAccentSecondary,
+	colorBackgroundAccentSecondaryTurva: colorBackgroundAccentSecondaryTurva,
+	colorBackgroundAccentTertiary: colorBackgroundAccentTertiary,
+	colorBackgroundAccentTertiaryTurva: colorBackgroundAccentTertiaryTurva,
+	colorBackgroundPrimary: colorBackgroundPrimary,
+	colorBackgroundPrimaryTurva: colorBackgroundPrimaryTurva,
+	colorBackgroundSecondary: colorBackgroundSecondary,
+	colorBackgroundSecondaryTurva: colorBackgroundSecondaryTurva,
+	colorBackgroundTertiary: colorBackgroundTertiary,
+	colorBackgroundTertiaryTurva: colorBackgroundTertiaryTurva,
 	colorBrandBlue: colorBrandBlue,
 	colorBrandGrayTurva: colorBrandGrayTurva,
 	colorCategoryFamily: colorCategoryFamily,
@@ -359,6 +419,30 @@ const tokens = /*#__PURE__*/Object.freeze({
 	colorSuccess800: colorSuccess800,
 	colorSuccess900: colorSuccess900,
 	colorSuccessTurva: colorSuccessTurva,
+	colorTurva2Gray00: colorTurva2Gray00,
+	colorTurva2Gray100: colorTurva2Gray100,
+	colorTurva2Gray1000: colorTurva2Gray1000,
+	colorTurva2Gray200: colorTurva2Gray200,
+	colorTurva2Gray300: colorTurva2Gray300,
+	colorTurva2Gray400: colorTurva2Gray400,
+	colorTurva2Gray50: colorTurva2Gray50,
+	colorTurva2Gray500: colorTurva2Gray500,
+	colorTurva2Gray600: colorTurva2Gray600,
+	colorTurva2Gray700: colorTurva2Gray700,
+	colorTurva2Gray800: colorTurva2Gray800,
+	colorTurva2Gray900: colorTurva2Gray900,
+	colorTurva2Red00: colorTurva2Red00,
+	colorTurva2Red100: colorTurva2Red100,
+	colorTurva2Red1000: colorTurva2Red1000,
+	colorTurva2Red200: colorTurva2Red200,
+	colorTurva2Red300: colorTurva2Red300,
+	colorTurva2Red400: colorTurva2Red400,
+	colorTurva2Red50: colorTurva2Red50,
+	colorTurva2Red500: colorTurva2Red500,
+	colorTurva2Red600: colorTurva2Red600,
+	colorTurva2Red700: colorTurva2Red700,
+	colorTurva2Red800: colorTurva2Red800,
+	colorTurva2Red900: colorTurva2Red900,
 	colorTurvaGray00: colorTurvaGray00,
 	colorTurvaGray100: colorTurvaGray100,
 	colorTurvaGray1000: colorTurvaGray1000,
@@ -371,6 +455,18 @@ const tokens = /*#__PURE__*/Object.freeze({
 	colorTurvaGray700: colorTurvaGray700,
 	colorTurvaGray800: colorTurvaGray800,
 	colorTurvaGray900: colorTurvaGray900,
+	colorTurvaNude00: colorTurvaNude00,
+	colorTurvaNude100: colorTurvaNude100,
+	colorTurvaNude1000: colorTurvaNude1000,
+	colorTurvaNude200: colorTurvaNude200,
+	colorTurvaNude300: colorTurvaNude300,
+	colorTurvaNude400: colorTurvaNude400,
+	colorTurvaNude50: colorTurvaNude50,
+	colorTurvaNude500: colorTurvaNude500,
+	colorTurvaNude600: colorTurvaNude600,
+	colorTurvaNude700: colorTurvaNude700,
+	colorTurvaNude800: colorTurvaNude800,
+	colorTurvaNude900: colorTurvaNude900,
 	colorTurvaRed00: colorTurvaRed00,
 	colorTurvaRed100: colorTurvaRed100,
 	colorTurvaRed1000: colorTurvaRed1000,

package/lib/cjs/{watch-options-30a12622.js → watch-options-D4JNsU3B.js}

@@ -19,25 +19,6 @@ const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
 const watchForOptions = (containerEl, tagName, onChange) => {
     return watchFor(containerEl, tagName, onChange, getSelectedOption);
 };
-const watchForElement = (containerEl, tagName, onChange) => {
-    return watchFor(containerEl, tagName, onChange, getElementItem, {
-        childList: true,
-        subtree: true,
-    });
-};
-const getElementItem = (mutationList) => {
-    let addedNode = false;
-    let removedNode = false;
-    mutationList.forEach(mut => {
-        if (mut.addedNodes.length) {
-            addedNode = true;
-        }
-        if (mut.removedNodes.length) {
-            removedNode = true;
-        }
-    });
-    return { addedNode, removedNode, mutationList };
-};
 const getSelectedOption = (mutationList, tagName) => {
     let newOption;
     mutationList.forEach(mut => {
@@ -57,5 +38,4 @@ const findCheckedOption = (el, tagName) => {
 };
 
 exports.findCheckedOption = findCheckedOption;
-exports.watchForElement = watchForElement;
 exports.watchForOptions = watchForOptions;

package/lib/collection/collection-manifest.json

@@ -24,6 +24,7 @@
     "components/duet-header/duet-header.js",
     "components/duet-heading/duet-heading.js",
     "components/duet-hero/duet-hero.js",
+    "components/duet-indicator/duet-indicator.js",
     "components/duet-label/duet-label.js",
     "components/duet-layout/duet-layout.js",
     "components/duet-list/duet-list.js",
@@ -35,7 +36,9 @@
     "components/duet-number-input/duet-number-input.js",
     "components/duet-overlay/duet-overlay.js",
     "components/duet-pagination/duet-pagination.js",
+    "components/duet-panel/duet-panel.js",
     "components/duet-paragraph/duet-paragraph.js",
+    "components/duet-phone-input/duet-phone-input.js",
     "components/duet-popup-menu-item/duet-popup-menu-item.js",
     "components/duet-radio/duet-radio.js",
     "components/duet-range-slider/duet-range-slider.js",
@@ -79,10 +82,13 @@
     "components/duet-scrollable/duet-scrollable.js",
     "components/duet-section-layout/duet-section-layout.js",
     "components/duet-shaped-image/duet-shaped-image.js",
+    "components/duet-share-chart/duet-share-chart.js",
+    "components/duet-share-chart-item/duet-share-chart-item.js",
     "components/duet-slideout-lang/duet-slideout-lang.js",
     "components/duet-slideout-link/duet-slideout-link.js",
     "components/duet-slideout-panel/duet-slideout-panel.js",
     "components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js",
+    "components/duet-status-icon/duet-status-icon.js",
     "components/duet-submenu-bar/duet-submenu-bar.js",
     "components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js",
     "components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.js",
@@ -103,7 +109,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.23.0",
+    "version": "4.36.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/lib/collection/common/themeable-component.js

@@ -1,11 +1,69 @@
 /*!
  * Built with Duet Design System
  */
+import { Build } from "@stencil/core";
 export const inheritGlobalTheme = (component) => {
-    // this minor change enables duet-theme-XXXXX instead of just duet-theme-turva
-    const classList = Array.from(document.documentElement.classList).join(" ") || "";
-    const theme = /(duet-theme-)([a-z]*)/gi.exec(classList);
+    var _a, _b;
+    // this is done in a complex way to support hydrate.renderToString
+    const classList = (_b = (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+    const theme = /(duet-theme-)([a-z0-9]*)/gi.exec(classList);
+    if (component.element) {
+        component.element.classList.add("duet-theme-observer");
+    }
+    if (classList.includes("duet-theme-turva2")) {
+        component.theme = "turva";
+        if (component.element) {
+            component.element.classList.add("duet-theme-turva2");
+        }
+        return;
+    }
     if (theme && theme[1] === "duet-theme-") {
         component.theme = theme[2] === "default" ? "" : theme[2];
     }
 };
+const getObservingElements = (rootElement) => {
+    const elements = Array.from(rootElement.querySelectorAll(".duet-theme-observer"));
+    if (rootElement.shadowRoot) {
+        elements.push(...getObservingElements(rootElement.shadowRoot));
+    }
+    elements.forEach(nestedElement => {
+        if (nestedElement.shadowRoot) {
+            elements.push(...getObservingElements(nestedElement.shadowRoot));
+        }
+    });
+    return elements;
+};
+const setAllObservingElementsTheme = (mutations) => {
+    mutations.forEach(mutation => {
+        var _a, _b, _c;
+        if (!((_a = mutation.oldValue) === null || _a === void 0 ? void 0 : _a.includes("hydrated"))) {
+            // only set theme once hydrated is set
+            return;
+        }
+        const classList = (_c = (_b = document.documentElement.attributes.getNamedItem("class")) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : "";
+        const themeParts = /(duet-theme-)([a-z0-9]*)/gi.exec(classList);
+        const theme = (themeParts === null || themeParts === void 0 ? void 0 : themeParts.length) > 2 && themeParts[2].startsWith("turva") ? "turva" : "";
+        const isTurva2 = classList.includes("duet-theme-turva2");
+        const elements = getObservingElements(document.body);
+        elements.forEach(el => {
+            el.theme = theme;
+            if (isTurva2) {
+                el.classList.add("duet-theme-turva2");
+            }
+            else {
+                el.classList.remove("duet-theme-turva2");
+            }
+        });
+    });
+};
+if (!Build.isServer) {
+    const documentClassObserver = new MutationObserver(setAllObservingElementsTheme);
+    documentClassObserver.observe(document.documentElement, {
+        subtree: false,
+        childList: false,
+        characterData: false,
+        attributes: true,
+        attributeFilter: ["class"],
+        attributeOldValue: true,
+    });
+}