twilio-labs · kodiakhq · May 15, 2025 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025
diff --git a/.changeset/curly-jeans-talk.md b/.changeset/curly-jeans-talk.md
@@ -0,0 +1,17 @@
+---
+"@twilio-paste/base-radio-checkbox": patch
+"@twilio-paste/button": patch
+"@twilio-paste/checkbox": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/file-picker": patch
+"@twilio-paste/file-uploader": patch
+"@twilio-paste/input": patch
+"@twilio-paste/input-box": patch
+"@twilio-paste/menu": patch
+"@twilio-paste/select": patch
+"@twilio-paste/textarea": patch
+"@twilio-paste/visual-picker": patch
+"@twilio-paste/core": patch
+---
+
+[Base Radio Checkbox, Button, Combobox, File Picker, File Uploader, Input, Input Box, Menu, Select, Textarea, Visual Picker] Update styles of form related components
diff --git a/.changeset/lazy-icons-prove.md b/.changeset/lazy-icons-prove.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": patch
+"@twilio-paste/core": patch
-"@twilio-paste/design-tokens": patch
-"@twilio-paste/core": patch
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
-"@twilio-paste/design-tokens": patch
-"@twilio-paste/core": patch
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design Tokens] Update palette and new elevation token
diff --git a/.changeset/selfish-birds-pump.md b/.changeset/selfish-birds-pump.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/label": minor
+"@twilio-paste/core": minor
+---
+
+[Label] Update font weight, expose new prop for optional variant and fix require dot causing scrolling issue
diff --git a/cypress/integration/token-list/index.spec.ts b/cypress/integration/token-list/index.spec.ts
@@ -47,7 +47,7 @@ describe("Token list filter format control and theme control", function () {
     cy.get('[data-cy="theme-control"]').select("dark").should("have.value", "dark");
     cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(
       "include.text",
-      "rgb(18, 28, 45)",
+      "rgb(24, 37, 60)",
     );
     cy.get('[data-cy="theme-control"]').select("default").should("have.value", "default");
     cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(

diff --git a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
@@ -42,7 +42,7 @@ describe("AccountSwitcher", () => {
       });
       expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
         "background-color",
-        "rgb(214, 31, 31)",
+        "rgb(219, 19, 42)",
       );
       expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
       expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(
@@ -59,7 +59,7 @@ describe("AccountSwitcher", () => {
       });
       expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
         "background-color",
-        "rgb(214, 31, 31)",
+        "rgb(219, 19, 42)",
       );
       expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
       expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(

diff --git a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
@@ -83,7 +83,7 @@ describe("Alert Dialog customization", () => {
   });
   it("should apply styles to Alert Dialog with custom element prop", () => {
     const { container } = render(<CustomizedDestructiveAlertDialog />);
-    expect(screen.getByTestId("destructive_alert_dialog")).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(screen.getByTestId("destructive_alert_dialog")).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
     expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toHaveStyleRule("border", "inherit");
     expect(screen.getByText("Alert Dialog")).toHaveStyleRule("background-color", "rgb(235, 244, 255)");
     expect(

diff --git a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
@@ -30,7 +30,7 @@ describe("Alert Dialog", () => {
   it("Should have a destructive button style when the destructive prop is included", () => {
     render(<DestructiveAlertDialog />, { wrapper: ThemeWrapper });
     const button = screen.getByRole("button", { name: "Delete" });
-    expect(button).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(button).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
   });
 
   it("Should have a disabled destructive button style when the onConfirmDisabled prop is included", () => {

diff --git a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
@@ -55,8 +55,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           color: "colorTextInverse",
         }}
         _disabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
         }}
         _invalidSibling={{
           borderColor: "colorBorderError",
@@ -65,7 +65,7 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           borderColor: "colorBorderErrorStronger",
         }}
         _invalidAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
+          borderColor: "colorBorderWeak",
         }}
         _checkedAndHoverSibling={{
           borderColor: "colorBorderPrimaryStronger",
@@ -86,8 +86,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
             : undefined
         }
         _checkedAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
           color: "colorTextWeaker",
         }}
         _checkedAndInvalidSibling={{
@@ -100,8 +100,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           backgroundColor: "colorBackgroundErrorStronger",
         }}
         _checkedAndInvalidAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
           color: "colorTextWeaker",
         }}
         {...props}

diff --git a/packages/paste-core/components/button/src/DestructiveButton.tsx b/packages/paste-core/components/button/src/DestructiveButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 });
 
 const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {

diff --git a/packages/paste-core/components/button/src/DestructiveIconButton.tsx b/packages/paste-core/components/button/src/DestructiveIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {

diff --git a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
@@ -15,11 +15,11 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextLinkDestructive",
+  color: "colorTextWeaker",
   textAlign: "left",
-  _hover: { color: "colorTextLinkDestructiveStronger" },
-  _active: { color: "colorTextLinkDestructiveStronger" },
-  _focus: { color: "colorTextLinkDestructiveStronger" },
+  _hover: { color: "colorTextWeaker" },
+  _active: { color: "colorTextWeaker" },
+  _focus: { color: "colorTextWeaker" },
 });
 
 const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
@@ -30,6 +30,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   _focus: { color: "colorTextLinkDestructiveWeak" },
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -45,7 +50,7 @@ const DestructiveLinkButton = React.forwardRef<HTMLButtonElement, DirectButtonPr
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },

diff --git a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const baseLoadingStyles: BoxStyleProps = {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 };
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {

diff --git a/packages/paste-core/components/button/src/InverseButton.tsx b/packages/paste-core/components/button/src/InverseButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextInverse",
+  color: "colorTextInverseWeakest",
   backgroundColor: "colorBackgroundInverseStrong",
-  boxShadow: "shadowBorderInverseWeaker",
+  boxShadow: "shadowBorderInverseWeakest",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {

diff --git a/packages/paste-core/components/button/src/InverseLinkButton.tsx b/packages/paste-core/components/button/src/InverseLinkButton.tsx
@@ -16,7 +16,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextInverse",
+  color: "colorTextInverseWeakest",
   textAlign: "left",
 });
 
@@ -25,6 +25,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   textAlign: "left",
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -40,7 +45,7 @@ const InverseLinkButton = React.forwardRef<HTMLButtonElement, DirectButtonProps>
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },

diff --git a/packages/paste-core/components/button/src/LinkButton.tsx b/packages/paste-core/components/button/src/LinkButton.tsx
@@ -15,7 +15,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   textAlign: "left",
 });
 
@@ -24,6 +24,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   textAlign: "left",
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -39,7 +44,7 @@ const LinkButton = React.forwardRef<HTMLButtonElement, DirectButtonProps>(
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },

diff --git a/packages/paste-core/components/button/src/PrimaryButton.tsx b/packages/paste-core/components/button/src/PrimaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {

diff --git a/packages/paste-core/components/button/src/PrimaryIconButton.tsx b/packages/paste-core/components/button/src/PrimaryIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {

diff --git a/packages/paste-core/components/button/src/SecondaryButton.tsx b/packages/paste-core/components/button/src/SecondaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const baseLoadingStyles: BoxStyleProps = {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 };
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {

diff --git a/packages/paste-core/components/button/src/SecondaryIconButton.tsx b/packages/paste-core/components/button/src/SecondaryIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {

diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts
@@ -44,7 +44,7 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
     paddingBottom: "space30",
     paddingLeft: "space40",
     paddingRight: "space40",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",
   },
@@ -53,17 +53,17 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
     paddingBottom: "space20",
     paddingLeft: "space30",
     paddingRight: "space30",
-    borderRadius: "borderRadius10",
+    borderRadius: "borderRadius30",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",
   },
   icon: {
     padding: "space30",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
   },
   icon_small: {
     padding: "space20",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
   },
   reset: {
     paddingTop: "space0",

diff --git a/packages/paste-core/components/card/__test__/card.test.tsx b/packages/paste-core/components/card/__test__/card.test.tsx
@@ -78,7 +78,7 @@ describe("Customization", () => {
     );
     const renderedCard = screen.getByTestId("customizable-card");
     expect(renderedCard).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-    expect(renderedCard).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+    expect(renderedCard).toHaveStyleRule("border-color", "rgb(219, 19, 42)");
   });
 
   it("should add custom styles to Card with a custom element data attribute", (): void => {
@@ -94,6 +94,6 @@ describe("Customization", () => {
     );
     const renderedCard = screen.getByTestId("customizable-card");
     expect(renderedCard).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-    expect(renderedCard).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+    expect(renderedCard).toHaveStyleRule("border-color", "rgb(219, 19, 42)");
   });
 });
diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx
@@ -21,7 +21,7 @@ const selectAllStyleProps = {
   paddingRight: "space30",
   paddingBottom: "space20",
   paddingLeft: "space30",
-  borderRadius: "borderRadius10",
+  borderRadius: "borderRadius20",
   backgroundColor: "colorBackground",
 };
 

diff --git a/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts b/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts
      convertRawTokenJSONToArray({
        "color-text-weak": {
          type: "color",
          category: "text-color",
          value: "#aeb2c1",
          comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
          originalValue: "{!palette-gray-40}",
diff --git a/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx b/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx
 const { defineTest } = require("jscodeshift/dist/testUtils");

 defineTest(__dirname, "barreled-to-unbarreled", null, "barreled-to-unbarreled", { parser: "ts" });
diff --git a/packages/paste-codemods/tools/generatePackageExportsMap.ts b/packages/paste-codemods/tools/generatePackageExportsMap.ts
    let packageExports = {};
    try {
      // eslint-disable-next-line global-require, import/no-dynamic-require
      packageExports = require(name);
    } catch (error) {
      // eslint-disable-next-line no-console
      console.log(`Failed to dynamically require package: ${name}`, error);
diff --git a/packages/paste-codemods/tools/create-package-mappings.ts b/packages/paste-codemods/tools/create-package-mappings.ts
  const mapping = await generatePackageExportsMap();

  // Write to disk
  writeToFile(path.join(__dirname, ".cache/mappings.json"), mapping, {
    successMessage: "Wrote core packages export mapping to .cache/mappings.json file!",
    errorMessage: "Could not generate mappings!",
    formatJson: true,
diff --git a/packages/paste-codemods/tools/__tests__/tools.spec.ts b/packages/paste-codemods/tools/__tests__/tools.spec.ts
    const mockMapping = await generatePackageExportsMap(mockGetPastePackages);

    expect(mockMapping).toEqual({
      BOX_PROPS_TO_BLOCK: "@twilio-paste/core/box",
      Box: "@twilio-paste/core/box",
      ComboboxPrimitive: "@twilio-paste/core/combobox-primitive",
      DisclosurePrimitive: "@twilio-paste/core/disclosure-primitive",
      DisclosurePrimitiveContent: "@twilio-paste/core/disclosure-primitive",
      Stack: "@twilio-paste/core/stack",
      getCustomElementStyles: "@twilio-paste/core/box",
	convertRawTokenJSONToArray({
	"color-text-weak": {
	type: "color",
	category: "text-color",
Check warning on line 20 in packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts GitHub Actions / Lint repository `Define a constant instead of duplicating this literal 7 times`
	value: "#aeb2c1",
	comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
	originalValue: "{!palette-gray-40}",
	const { defineTest } = require("jscodeshift/dist/testUtils");
Check warning on line 1 in packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx GitHub Actions / Lint repository `Do not use "require"` Check warning on line 1 in packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx GitHub Actions / Lint repository A `require()` style import is forbidden

	defineTest(__dirname, "barreled-to-unbarreled", null, "barreled-to-unbarreled", { parser: "ts" });
Check warning on line 3 in packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx GitHub Actions / Lint repository `Do not use "__dirname"`
	let packageExports = {};
	try {
	// eslint-disable-next-line global-require, import/no-dynamic-require
	packageExports = require(name);
Check warning on line 26 in packages/paste-codemods/tools/generatePackageExportsMap.ts GitHub Actions / Lint repository `Do not use "require"` Check warning on line 26 in packages/paste-codemods/tools/generatePackageExportsMap.ts GitHub Actions / Lint repository A `require()` style import is forbidden
	} catch (error) {
	// eslint-disable-next-line no-console
	console.log(`Failed to dynamically require package: ${name}`, error);
	const mapping = await generatePackageExportsMap();

	// Write to disk
	writeToFile(path.join(__dirname, ".cache/mappings.json"), mapping, {
Check warning on line 10 in packages/paste-codemods/tools/create-package-mappings.ts GitHub Actions / Lint repository `Do not use "__dirname"`
	successMessage: "Wrote core packages export mapping to .cache/mappings.json file!",
	errorMessage: "Could not generate mappings!",
	formatJson: true,
	const mockMapping = await generatePackageExportsMap(mockGetPastePackages);

	expect(mockMapping).toEqual({
	BOX_PROPS_TO_BLOCK: "@twilio-paste/core/box",
Check warning on line 37 in packages/paste-codemods/tools/__tests__/tools.spec.ts GitHub Actions / Lint repository `Define a constant instead of duplicating this literal 4 times`
	Box: "@twilio-paste/core/box",
	ComboboxPrimitive: "@twilio-paste/core/combobox-primitive",
Check warning on line 39 in packages/paste-codemods/tools/__tests__/tools.spec.ts GitHub Actions / Lint repository `Define a constant instead of duplicating this literal 3 times`
	DisclosurePrimitive: "@twilio-paste/core/disclosure-primitive",
Check warning on line 40 in packages/paste-codemods/tools/__tests__/tools.spec.ts GitHub Actions / Lint repository `Define a constant instead of duplicating this literal 3 times`
	DisclosurePrimitiveContent: "@twilio-paste/core/disclosure-primitive",
	Stack: "@twilio-paste/core/stack",
	getCustomElementStyles: "@twilio-paste/core/box",