@warp-ds/elements 2.2.0-next.30 → 2.2.0-next.32

package/README.md

@@ -216,23 +216,6 @@ and use the component
 
 you should get intellisense when using Warp Elements.
 
-#### CustomData fallback
-
-`@warp-ds/elements` also includes [Custom HTML and CSS data for Visual Studio Code](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format).
-
-If you can't get the Web Components Language Server to work, add the following snippet to `.vscode/settings.json`, then restart VS Code.
-
-```json
-{
-  "html.customData": [
-    "./node_modules/@warp-ds/elements/dist/vscode.html-custom-data.json"
-  ],
-  "css.customData": [
-    "./node_modules/@warp-ds/elements/dist/vscode.css-custom-data.json"
-  ]
-}
-```
-
 #### JetBrains products
 
 We ship `web-types.json` which should get picked up automatically by JetBrains IDEA and similar products.

package/dist/custom-elements.json

@@ -6,22 +6,6 @@
       "kind": "javascript-module",
       "path": "packages/affix/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccSuffix",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ wrapper: prefixSuffixWrapper + 'right-0', wrapperWithLabel: 'w-max pr-12', wrapperWithIcon: 'w-40', label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text', }"
-        },
-        {
-          "kind": "variable",
-          "name": "ccPrefix",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ wrapper: prefixSuffixWrapper + 'left-0', wrapperWithLabel: 'w-max pl-12', wrapperWithIcon: 'w-40', label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text', }"
-        },
         {
           "kind": "class",
           "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)",
@@ -109,22 +93,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccSuffix",
-          "declaration": {
-            "name": "ccSuffix",
-            "module": "packages/affix/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ccPrefix",
-          "declaration": {
-            "name": "ccPrefix",
-            "module": "packages/affix/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-affix",
@@ -248,14 +216,6 @@
       "kind": "javascript-module",
       "path": "packages/button/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccButton",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ // Buttontypes secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`, secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`, secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`, secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`, secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`, secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`, secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`, secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`, primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`, primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `, primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`, primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`, primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`, utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`, utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`, utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`, utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`, utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`, utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`, utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`, utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`, negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`, negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`, negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`, negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`, negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`, negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`, negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`, negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`, negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`, pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`, pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`, pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`, link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`, linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`, linkAsButton: 'inline-block active:no-underline hover:no-underline focus:no-underline text-center', a11y: 'sr-only', fullWidth: 'w-full max-w-full', contentWidth: 'max-w-max', }"
-        },
         {
           "kind": "class",
           "description": "Buttons are used to perform actions, widh different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)",
@@ -518,14 +478,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccButton",
-          "declaration": {
-            "name": "ccButton",
-            "module": "packages/button/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-button",
@@ -548,14 +500,6 @@
       "kind": "javascript-module",
       "path": "packages/attention/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccAttention",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'border-2 relative flex items-center', tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8', callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8', highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0', popover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0', arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform', arrowDirectionLeftStart: '-left-[8px]', arrowDirectionLeft: '-left-[8px]', arrowDirectionLeftEnd: '-left-[8px]', arrowDirectionRightStart: '-right-[8px]', arrowDirectionRight: '-right-[8px]', arrowDirectionRightEnd: '-right-[8px]', arrowDirectionBottomStart: '-bottom-[8px]', arrowDirectionBottom: '-bottom-[8px]', arrowDirectionBottomEnd: '-bottom-[8px]', arrowDirectionTopStart: '-top-[8px]', arrowDirectionTop: '-top-[8px]', arrowDirectionTopEnd: '-top-[8px]', arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]', arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]', arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]', arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]', content: 'last-child:mb-0', notCallout: 'absolute z-50', }"
-        },
         {
           "kind": "class",
           "description": "",
@@ -872,14 +816,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccAttention",
-          "declaration": {
-            "name": "ccAttention",
-            "module": "packages/attention/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-attention",
@@ -1098,14 +1034,6 @@
       "kind": "javascript-module",
       "path": "packages/breadcrumbs/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccBreadcrumbs",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ wrapper: 'flex space-x-8', text: 's-text', link: 's-text-link', separator: 'select-none s-icon', a11y: 'sr-only', }"
-        },
         {
           "kind": "class",
           "description": "Breadcrumbs show the navigation structure for the current location.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)",
@@ -1140,14 +1068,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccBreadcrumbs",
-          "declaration": {
-            "name": "ccBreadcrumbs",
-            "module": "packages/breadcrumbs/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-breadcrumbs",
@@ -1170,14 +1090,6 @@
       "kind": "javascript-module",
       "path": "packages/card/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccCard",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'cursor-pointer overflow-hidden relative transition-all', shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active', selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active', outline: 'absolute border-2 rounded-8 inset-0 transition-all', outlineUnselected: 'border-transparent group-active:s-border-active', outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active', flat: 'border-2 rounded-4', flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active', flatSelected: 's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active', a11y: 'sr-only', }"
-        },
         {
           "kind": "class",
           "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)",
@@ -1268,14 +1180,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccCard",
-          "declaration": {
-            "name": "ccCard",
-            "module": "packages/card/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-card",
@@ -1298,22 +1202,6 @@
       "kind": "javascript-module",
       "path": "packages/expandable/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccBox",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'group block relative break-words last-child:mb-0 px-16 rounded-8', // Relative here enables w-clickable bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8 info: 's-bg-info-subtle', neutral: 's-surface-sunken', bordered: 'border-2 s-border s-bg', }"
-        },
-        {
-          "kind": "variable",
-          "name": "ccExpandable",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ wrapper: 'will-change-height s-text py-16', box: 's-bg-subtle hover:s-bg-subtle-hover active:s-bg-subtle-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8', bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8', chevron: 'inline-block align-middle s-icon', chevronNonBox: 'ml-8', chevronTransform: 'transform transition-transform transform-gpu ease-in-out', chevronExpand: '-rotate-180', chevronCollapse: 'rotate-180', // These are web component specific classes, using the ::part-selector: elementsChevronDownTransform: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out', elementsChevronUpTransform: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out', elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180', elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180', expansion: 'overflow-hidden', expansionNotExpanded: 'h-0 invisible', button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline', buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 px-16 rounded-8', contentWithTitle: 'pt-0', title: 'flex w-full justify-between items-center', titleType: 't4', }"
-        },
         {
           "kind": "class",
           "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)",
@@ -1555,22 +1443,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccBox",
-          "declaration": {
-            "name": "ccBox",
-            "module": "packages/expandable/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ccExpandable",
-          "declaration": {
-            "name": "ccExpandable",
-            "module": "packages/expandable/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-expandable",
@@ -1593,14 +1465,6 @@
       "kind": "javascript-module",
       "path": "packages/pill/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "pillStyles",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ wrapper: 'flex items-center', button: 'inline-flex items-center focusable text-xs transition-all', suggestion: 'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold', filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted', label: 'pl-12 py-8 rounded-l-full', labelWithoutClose: 'pr-12 rounded-r-full', labelWithClose: 'pr-2', close: 'pr-12 pl-4 py-8 rounded-r-full', closeIcon: 'h-16', a11y: 'sr-only', }"
-        },
         {
           "kind": "class",
           "description": "Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)",
@@ -1740,14 +1604,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "pillStyles",
-          "declaration": {
-            "name": "pillStyles",
-            "module": "packages/pill/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-pill",
@@ -1770,30 +1626,6 @@
       "kind": "javascript-module",
       "path": "packages/select/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccSelect",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current', default: 's-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active', disabled: 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none', invalid: 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!', readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden', wrapper: 'relative', selectWrapper: 'relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ', chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer', chevronDisabled: 'opacity-25', }"
-        },
-        {
-          "kind": "variable",
-          "name": "ccLabel",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text', optional: 'pl-8 font-normal text-s s-text-subtle', }"
-        },
-        {
-          "kind": "variable",
-          "name": "ccHelpText",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'text-xs mt-4 block', color: 's-text-subtle', colorInvalid: 's-text-negative', }"
-        },
         {
           "kind": "class",
           "description": "A dropdown component for selecting a single value.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)",
@@ -2052,30 +1884,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccSelect",
-          "declaration": {
-            "name": "ccSelect",
-            "module": "packages/select/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ccLabel",
-          "declaration": {
-            "name": "ccLabel",
-            "module": "packages/select/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ccHelpText",
-          "declaration": {
-            "name": "ccHelpText",
-            "module": "packages/select/index.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "WarpSelect",
@@ -2098,30 +1906,6 @@
       "kind": "javascript-module",
       "path": "packages/textfield/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccinput",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ // input classes base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true default: 'border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly placeholder: 'placeholder:s-text-placeholder', suffix: 'pr-40', prefix: 'pl-[var(--w-prefix-width,_40px)]', // textarea classes textArea: 'min-h-[42] sm:min-h-[45]', }"
-        },
-        {
-          "kind": "variable",
-          "name": "ccLabel",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text', optional: 'pl-8 font-normal text-s s-text-subtle', }"
-        },
-        {
-          "kind": "variable",
-          "name": "ccHelpText",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'text-xs mt-4 block', color: 's-text-subtle', colorInvalid: 's-text-negative', }"
-        },
         {
           "kind": "class",
           "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)",
@@ -2467,30 +2251,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccinput",
-          "declaration": {
-            "name": "ccinput",
-            "module": "packages/textfield/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ccLabel",
-          "declaration": {
-            "name": "ccLabel",
-            "module": "packages/textfield/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ccHelpText",
-          "declaration": {
-            "name": "ccHelpText",
-            "module": "packages/textfield/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
           "name": "w-textfield",
@@ -2924,6 +2684,53 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/modal/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WarpModal",
+          "declaration": {
+            "name": "ModalMain",
+            "module": "packages/modal/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpModalHeader",
+          "declaration": {
+            "name": "ModalHeader",
+            "module": "packages/modal/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpModalFooter",
+          "declaration": {
+            "name": "ModalFooter",
+            "module": "packages/modal/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ModalCanCloseMixin",
+          "declaration": {
+            "name": "CanCloseMixin",
+            "module": "packages/modal/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ModalProvidesCanCloseToSlotsMixin",
+          "declaration": {
+            "name": "ProvidesCanCloseToSlotsMixin",
+            "module": "packages/modal/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/toast/toast.ts",
@@ -3054,6 +2861,53 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/toast/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "removeToast",
+          "declaration": {
+            "name": "removeToast",
+            "module": "./api"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toast",
+          "declaration": {
+            "name": "toast",
+            "module": "./api"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "updateToast",
+          "declaration": {
+            "name": "updateToast",
+            "module": "./api"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpToast",
+          "declaration": {
+            "name": "WarpToast",
+            "module": "./toast"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpToastContainer",
+          "declaration": {
+            "name": "WarpToastContainer",
+            "module": "./toast-container"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/index.d.ts

@@ -1,16 +1,16 @@
 
-import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
+import type { WarpAffix } from "./packages/affix/index.ts";
 import type { WarpAlert } from "./packages/alert/index.ts";
-import type { ccButton, WarpButton } from "./packages/button/index.ts";
-import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
+import type { WarpButton } from "./packages/button/index.ts";
+import type { WarpAttention } from "./packages/attention/index.ts";
 import type { WarpBadge } from "./packages/badge/index.ts";
 import type { WarpBox } from "./packages/box/index.ts";
-import type { ccBreadcrumbs, WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
-import type { ccCard, WarpCard } from "./packages/card/index.ts";
-import type { ccBox, ccExpandable, WarpExpandable } from "./packages/expandable/index.ts";
-import type { pillStyles, WarpPill } from "./packages/pill/index.ts";
-import type { ccSelect, ccLabel, ccHelpText, WarpSelect } from "./packages/select/index.ts";
-import type { ccinput, WarpTextField } from "./packages/textfield/index.ts";
+import type { WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
+import type { WarpCard } from "./packages/card/index.ts";
+import type { WarpExpandable } from "./packages/expandable/index.ts";
+import type { WarpPill } from "./packages/pill/index.ts";
+import type { WarpSelect } from "./packages/select/index.ts";
+import type { WarpTextField } from "./packages/textfield/index.ts";
 import type { ModalFooter } from "./packages/modal/modal-footer.ts";
 import type { ModalHeader } from "./packages/modal/modal-header.ts";
 import type { ModalMain } from "./packages/modal/modal-main.ts";

package/dist/packages/affix/index.d.ts

@@ -1,18 +1,6 @@
 import { LitElement } from 'lit';
 import '@warp-ds/icons/elements/search-16';
 import '@warp-ds/icons/elements/close-16';
-export declare const ccSuffix: {
-    wrapper: string;
-    wrapperWithLabel: string;
-    wrapperWithIcon: string;
-    label: string;
-};
-export declare const ccPrefix: {
-    wrapper: string;
-    wrapperWithLabel: string;
-    wrapperWithIcon: string;
-    label: string;
-};
 /**
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
  *

package/dist/packages/affix/index.js

@@ -2458,5 +2458,5 @@ Please compile your catalog first.
       <div class="${this._classes}">
         <span class="${this._classBase.label}">${this.label}</span>
       </div>
-    `}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return L`${this._markup}`}};g.styles=[X,Z],x([C({attribute:"aria-label"})],g.prototype,"ariaLabel",2),x([C({type:Boolean})],g.prototype,"clear",2),x([C({type:Boolean})],g.prototype,"search",2),x([C()],g.prototype,"label",2);customElements.get("w-affix")||customElements.define("w-affix",g);export{g as WarpAffix,br as ccPrefix,dr as ccSuffix};
+    `}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return L`${this._markup}`}};g.styles=[X,Z],x([C({attribute:"aria-label"})],g.prototype,"ariaLabel",2),x([C({type:Boolean})],g.prototype,"clear",2),x([C({type:Boolean})],g.prototype,"search",2),x([C()],g.prototype,"label",2);customElements.get("w-affix")||customElements.define("w-affix",g);export{g as WarpAffix};
 //# sourceMappingURL=index.js.map