@sage/design-tokens 15.1.0 → 15.2.0

package/js/es6/frozenproduct/large/dark/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/frozenproduct/large/dark/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
 export const formColorDropdownLabelDisabled = "#ffffff4d";
 export const formColorDropdownLabelEnabled = "#ffffffab";
 export const formColorDropdownLabelHover = "#FFFFFF";
+export const formColorDropdownLabelSubtext = "#ffffff6b";
 export const formColorLabelsetLabelRequired = "#E13E53";
 export const formColorLabelsetLabelDefault = "#fffffff2";
 export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/frozenproduct/large/dark/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/frozenproduct/large/dark/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
 export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
 export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
 export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
 export const modesColorInteractiveMonochromeHover = "#ffffff26";
 export const modesColorInteractiveMonochromeWithActive = "#000000";

package/js/es6/frozenproduct/large/light/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/frozenproduct/large/light/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#000000e6";
 export const formColorDropdownLabelDisabled = "#0000006b";
 export const formColorDropdownLabelEnabled = "#000000ab";
 export const formColorDropdownLabelHover = "#000000";
+export const formColorDropdownLabelSubtext = "#0000006b";
 export const formColorLabelsetLabelRequired = "#CD384B";
 export const formColorLabelsetLabelDefault = "#000000f2";
 export const formColorLabelsetLabelAlt = "#0000008c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/frozenproduct/large/light/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/frozenproduct/large/light/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#000000";
 export const modesColorInteractiveMonochromeActiveAlt = "#00000026";
 export const modesColorInteractiveMonochromeDefault = "#000000e6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#000000ab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000006b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000008c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#0000006b";
 export const modesColorInteractiveMonochromeHoverAlt = "#0000001a";
 export const modesColorInteractiveMonochromeHover = "#00000026";
 export const modesColorInteractiveMonochromeWithActive = "#FFFFFF";

package/js/es6/frozenproduct/small/dark/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/frozenproduct/small/dark/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
 export const formColorDropdownLabelDisabled = "#ffffff4d";
 export const formColorDropdownLabelEnabled = "#ffffffab";
 export const formColorDropdownLabelHover = "#FFFFFF";
+export const formColorDropdownLabelSubtext = "#ffffff6b";
 export const formColorLabelsetLabelRequired = "#E13E53";
 export const formColorLabelsetLabelDefault = "#fffffff2";
 export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/frozenproduct/small/dark/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/frozenproduct/small/dark/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
 export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
 export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
 export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
 export const modesColorInteractiveMonochromeHover = "#ffffff26";
 export const modesColorInteractiveMonochromeWithActive = "#000000";

package/js/es6/frozenproduct/small/light/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/frozenproduct/small/light/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#000000e6";
 export const formColorDropdownLabelDisabled = "#0000006b";
 export const formColorDropdownLabelEnabled = "#000000ab";
 export const formColorDropdownLabelHover = "#000000";
+export const formColorDropdownLabelSubtext = "#0000006b";
 export const formColorLabelsetLabelRequired = "#CD384B";
 export const formColorLabelsetLabelDefault = "#000000f2";
 export const formColorLabelsetLabelAlt = "#0000008c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/frozenproduct/small/light/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/frozenproduct/small/light/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#000000";
 export const modesColorInteractiveMonochromeActiveAlt = "#00000026";
 export const modesColorInteractiveMonochromeDefault = "#000000e6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#000000ab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000006b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000008c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#0000006b";
 export const modesColorInteractiveMonochromeHoverAlt = "#0000001a";
 export const modesColorInteractiveMonochromeHover = "#00000026";
 export const modesColorInteractiveMonochromeWithActive = "#FFFFFF";

package/js/es6/product/large/dark/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/product/large/dark/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
 export const formColorDropdownLabelDisabled = "#ffffff4d";
 export const formColorDropdownLabelEnabled = "#ffffffab";
 export const formColorDropdownLabelHover = "#FFFFFF";
+export const formColorDropdownLabelSubtext = "#ffffff6b";
 export const formColorLabelsetLabelRequired = "#E13E53";
 export const formColorLabelsetLabelDefault = "#fffffff2";
 export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/product/large/dark/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/product/large/dark/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
 export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
 export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
 export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
 export const modesColorInteractiveMonochromeHover = "#ffffff26";
 export const modesColorInteractiveMonochromeWithActive = "#000000";

package/js/es6/product/large/light/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/product/large/light/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#000000e6";
 export const formColorDropdownLabelDisabled = "#0000006b";
 export const formColorDropdownLabelEnabled = "#000000ab";
 export const formColorDropdownLabelHover = "#000000";
+export const formColorDropdownLabelSubtext = "#0000006b";
 export const formColorLabelsetLabelRequired = "#CD384B";
 export const formColorLabelsetLabelDefault = "#000000f2";
 export const formColorLabelsetLabelAlt = "#0000008c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/product/large/light/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/product/large/light/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#000000";
 export const modesColorInteractiveMonochromeActiveAlt = "#00000026";
 export const modesColorInteractiveMonochromeDefault = "#000000e6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#000000ab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000006b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000008c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#0000006b";
 export const modesColorInteractiveMonochromeHoverAlt = "#0000001a";
 export const modesColorInteractiveMonochromeHover = "#00000026";
 export const modesColorInteractiveMonochromeWithActive = "#FFFFFF";

package/js/es6/product/small/dark/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/product/small/dark/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
 export const formColorDropdownLabelDisabled = "#ffffff4d";
 export const formColorDropdownLabelEnabled = "#ffffffab";
 export const formColorDropdownLabelHover = "#FFFFFF";
+export const formColorDropdownLabelSubtext = "#ffffff6b";
 export const formColorLabelsetLabelRequired = "#E13E53";
 export const formColorLabelsetLabelDefault = "#fffffff2";
 export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/product/small/dark/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/product/small/dark/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
 export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
 export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
 export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
 export const modesColorInteractiveMonochromeHover = "#ffffff26";
 export const modesColorInteractiveMonochromeWithActive = "#000000";