-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/webawesome/src/react/animated-image/index.ts b/packages/webawesome/src/react/animated-image/index.ts
deleted file mode 100644
index f4f8f7c20..000000000
--- a/packages/webawesome/src/react/animated-image/index.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/animated-image/animated-image.js';
-
-import { type EventName } from '@lit/react';
-import type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
-export type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
-
-const tagName = 'wa-animated-image';
-
-/**
- * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
- * @documentation https://backers.webawesome.com/docs/components/animated-image
- * @status stable
- * @since 2.0
- *
- * @dependency wa-icon
- *
- * @event wa-load - Emitted when the image loads successfully.
- * @event wa-error - Emitted when the image fails to load.
- *
- * @slot play-icon - Optional play icon to use instead of the default. Works best with ``.
- * @slot pause-icon - Optional pause icon to use instead of the default. Works best with ``.
- *
- * @csspart control-box - The container that surrounds the pause/play icons and provides their background.
- *
- * @cssproperty --control-box-size - The size of the icon box.
- * @cssproperty --icon-size - The size of the play/pause icons.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {
- onWaLoad: 'wa-load' as EventName,
- onWaError: 'wa-error' as EventName,
- },
- displayName: 'WaAnimatedImage',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/animation/index.ts b/packages/webawesome/src/react/animation/index.ts
deleted file mode 100644
index 626dc436b..000000000
--- a/packages/webawesome/src/react/animation/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/animation/animation.js';
-
-import { type EventName } from '@lit/react';
-import type { WaCancelEvent, WaFinishEvent, WaStartEvent } from '../../events/events.js';
-export type { WaCancelEvent, WaFinishEvent, WaStartEvent } from '../../events/events.js';
-
-const tagName = 'wa-animation';
-
-/**
- * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
- * @documentation https://backers.webawesome.com/docs/components/animation
- * @status stable
- * @since 2.0
- *
- * @event wa-cancel - Emitted when the animation is canceled.
- * @event wa-finish - Emitted when the animation finishes.
- * @event wa-start - Emitted when the animation starts or restarts.
- *
- * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To
- * animate multiple elements, either wrap them in a single container or use multiple `` elements.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {
- onWaCancel: 'wa-cancel' as EventName,
- onWaFinish: 'wa-finish' as EventName,
- onWaStart: 'wa-start' as EventName,
- },
- displayName: 'WaAnimation',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/avatar/index.ts b/packages/webawesome/src/react/avatar/index.ts
deleted file mode 100644
index 1e44b9632..000000000
--- a/packages/webawesome/src/react/avatar/index.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/avatar/avatar.js';
-
-import { type EventName } from '@lit/react';
-import type { WaErrorEvent } from '../../events/events.js';
-export type { WaErrorEvent } from '../../events/events.js';
-
-const tagName = 'wa-avatar';
-
-/**
- * @summary Avatars are used to represent a person or object.
- * @documentation https://backers.webawesome.com/docs/components/avatar
- * @status stable
- * @since 2.0
- *
- * @dependency wa-icon
- *
- * @slot icon - The default icon to use when no image or initials are present. Works best with ``.
- *
- * @event wa-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some
- * unknown cause.
- *
- * @csspart icon - The container that wraps the avatar's icon.
- * @csspart initials - The container that wraps the avatar's initials.
- * @csspart image - The avatar image. Only shown when the `image` attribute is set.
- *
- * @cssproperty --background-color - The avatar's background color.
- * @cssproperty --text-color - The color of the avatar's content.
- * @cssproperty --size - The size of the avatar.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {
- onWaError: 'wa-error' as EventName,
- },
- displayName: 'WaAvatar',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/badge/index.ts b/packages/webawesome/src/react/badge/index.ts
deleted file mode 100644
index b5f36a1ba..000000000
--- a/packages/webawesome/src/react/badge/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/badge/badge.js';
-
-const tagName = 'wa-badge';
-
-/**
- * @summary Badges are used to draw attention and display statuses or counts.
- * @documentation https://backers.webawesome.com/docs/components/badge
- * @status stable
- * @since 2.0
- *
- * @slot - The badge's content.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --background-color - The badge's background color.
- * @cssproperty --border-color - The color of the badge's border.
- * @cssproperty --text-color - The color of the badge's content.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {},
- displayName: 'WaBadge',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/breadcrumb-item/index.ts b/packages/webawesome/src/react/breadcrumb-item/index.ts
deleted file mode 100644
index bdc399dab..000000000
--- a/packages/webawesome/src/react/breadcrumb-item/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
-
-const tagName = 'wa-breadcrumb-item';
-
-/**
- * @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
- * @documentation https://backers.webawesome.com/docs/components/breadcrumb-item
- * @status stable
- * @since 2.0
- *
- * @slot - The breadcrumb item's label.
- * @slot prefix - An optional prefix, usually an icon.
- * @slot suffix - An optional suffix, usually an icon.
- * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
- * you want to change it for all items in the group, set the separator on `` instead.
- *
- * @csspart label - The breadcrumb item's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart separator - The container that wraps the separator.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {},
- displayName: 'WaBreadcrumbItem',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/breadcrumb/index.ts b/packages/webawesome/src/react/breadcrumb/index.ts
deleted file mode 100644
index 6180282aa..000000000
--- a/packages/webawesome/src/react/breadcrumb/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/breadcrumb/breadcrumb.js';
-
-const tagName = 'wa-breadcrumb';
-
-/**
- * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://backers.webawesome.com/docs/components/breadcrumb
- * @status stable
- * @since 2.0
- *
- * @slot - One or more breadcrumb items to display.
- * @slot separator - The separator to use between breadcrumb items. Works best with ``.
- *
- * @dependency wa-icon
- *
- * @csspart base - The component's base wrapper.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {},
- displayName: 'WaBreadcrumb',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/button-group/index.ts b/packages/webawesome/src/react/button-group/index.ts
deleted file mode 100644
index fa64e15ee..000000000
--- a/packages/webawesome/src/react/button-group/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/button-group/button-group.js';
-
-const tagName = 'wa-button-group';
-
-/**
- * @summary Button groups can be used to group related buttons into sections.
- * @documentation https://backers.webawesome.com/docs/components/button-group
- * @status stable
- * @since 2.0
- *
- * @slot - One or more `` elements to display in the button group.
- *
- * @csspart base - The component's base wrapper.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {},
- displayName: 'WaButtonGroup',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/button/index.ts b/packages/webawesome/src/react/button/index.ts
deleted file mode 100644
index 85e973b15..000000000
--- a/packages/webawesome/src/react/button/index.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/button/button.js';
-
-import { type EventName } from '@lit/react';
-import type { WaInvalidEvent } from '../../events/events.js';
-export type { WaInvalidEvent } from '../../events/events.js';
-
-const tagName = 'wa-button';
-
-/**
- * @summary Buttons represent actions that are available to the user.
- * @documentation https://backers.webawesome.com/docs/components/button
- * @status stable
- * @since 2.0
- *
- * @dependency wa-icon
- * @dependency wa-spinner
- *
- * @event blur - Emitted when the button loses focus.
- * @event focus - Emitted when the button gains focus.
- * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @slot - The button's label.
- * @slot prefix - A presentational prefix icon or similar element.
- * @slot suffix - A presentational suffix icon or similar element.
- *
- * @csspart base - The component's base wrapper.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart label - The button's label.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, a `` element.
- * @csspart spinner - The spinner that shows when the button is in the loading state.
- *
- * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
- * @cssproperty --background-color - The button's background color when the button is not being interacted with.
- * @cssproperty --background-color-active - The button's background color when active.
- * @cssproperty --background-color-hover - The button's background color on hover.
- * @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
- * @cssproperty --border-color-active - The color of the button's border when active.
- * @cssproperty --border-color-hover - The color of the button's border on hover.
- * @cssproperty --box-shadow - The shadow effects around the edges of the button.
- * @cssproperty --text-color - The color of the button's label when the button is not being interacted with.
- * @cssproperty --text-color-active - The color of the button's label when active.
- * @cssproperty --text-color-hover - The color of the button's label on hover.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {
- onWaInvalid: 'wa-invalid' as EventName,
- },
- displayName: 'WaButton',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/callout/index.ts b/packages/webawesome/src/react/callout/index.ts
deleted file mode 100644
index 3727f46c3..000000000
--- a/packages/webawesome/src/react/callout/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/callout/callout.js';
-
-const tagName = 'wa-callout';
-
-/**
- * @summary Callouts are used to display important messages inline.
- * @documentation https://backers.webawesome.com/docs/components/callout
- * @status stable
- * @since 2.0
- *
- * @slot - The callout's main content.
- * @slot icon - An icon to show in the callout. Works best with ``.
- *
- * @csspart icon - The container that wraps the optional icon.
- * @csspart message - The container that wraps the callout's main content.
- *
- * @cssproperty --icon-color - The color of the callout's icon.
- * @cssproperty --icon-size - The size of the callout's icon.
- * @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value. If you want different spacing around and between the content, use `padding` on the callout itself.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {},
- displayName: 'WaCallout',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/card/index.ts b/packages/webawesome/src/react/card/index.ts
deleted file mode 100644
index de7da4c9e..000000000
--- a/packages/webawesome/src/react/card/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/card/card.js';
-
-const tagName = 'wa-card';
-
-/**
- * @summary Cards can be used to group related subjects in a container.
- * @documentation https://backers.webawesome.com/docs/components/card
- * @status stable
- * @since 2.0
- *
- * @slot - The card's main content.
- * @slot header - An optional header for the card.
- * @slot footer - An optional footer for the card.
- * @slot media - An optional media section to render at the start of the card.
- *
- * @csspart media - The container that wraps the card's media.
- * @csspart header - The container that wraps the card's header.
- * @csspart body - The container that wraps the card's main content.
- * @csspart footer - The container that wraps the card's footer.
- *
- * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
- * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
- * @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
- * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
- * @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {},
- displayName: 'WaCard',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/carousel-item/index.ts b/packages/webawesome/src/react/carousel-item/index.ts
deleted file mode 100644
index 3202f6dff..000000000
--- a/packages/webawesome/src/react/carousel-item/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/carousel-item/carousel-item.js';
-
-const tagName = 'wa-carousel-item';
-
-/**
- * @summary A carousel item represent a slide within a [carousel](/docs/components/carousel).
- *
- * @since 2.0
- * @status experimental
- *
- * @slot - The carousel item's content..
- *
- * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.
- *
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {},
- displayName: 'WaCarouselItem',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/carousel/index.ts b/packages/webawesome/src/react/carousel/index.ts
deleted file mode 100644
index a5f47c2c8..000000000
--- a/packages/webawesome/src/react/carousel/index.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/carousel/carousel.js';
-
-import { type EventName } from '@lit/react';
-import type { WaSlideChangeEvent } from '../../events/events.js';
-export type { WaSlideChangeEvent } from '../../events/events.js';
-
-const tagName = 'wa-carousel';
-
-/**
- * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
- *
- * @since 2.2
- * @status experimental
- *
- * @dependency wa-icon
- *
- * @event {{ index: number, slide: WaCarouselItem }} wa-slide-change - Emitted when the active slide changes.
- *
- * @slot - The carousel's main content, one or more `` elements.
- * @slot next-icon - Optional next icon to use instead of the default. Works best with ``.
- * @slot previous-icon - Optional previous icon to use instead of the default. Works best with ``.
- *
- * @csspart base - The carousel's internal wrapper.
- * @csspart scroll-container - The scroll container that wraps the slides.
- * @csspart pagination - The pagination indicators wrapper.
- * @csspart pagination-item - The pagination indicator.
- * @csspart pagination-item-active - Applied when the item is active.
- * @csspart navigation - The navigation wrapper.
- * @csspart navigation-button - The navigation button.
- * @csspart navigation-button-previous - Applied to the previous button.
- * @csspart navigation-button-next - Applied to the next button.
- *
- * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
- * @cssproperty --navigation-color - The color of the navigation arrows.
- * @cssproperty --pagination-color - The color of the dots indicating the number of slides.
- * @cssproperty --pagination-color-active - The color of the dot indicating the active slide.
- * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
- * partially visible as a scroll hint.
- * @cssproperty --slide-gap - The space between each slide.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {
- onWaSlideChange: 'wa-slide-change' as EventName,
- },
- displayName: 'WaCarousel',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/checkbox/index.ts b/packages/webawesome/src/react/checkbox/index.ts
deleted file mode 100644
index 80c0f0d73..000000000
--- a/packages/webawesome/src/react/checkbox/index.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/checkbox/checkbox.js';
-
-import { type EventName } from '@lit/react';
-import type { WaInvalidEvent } from '../../events/events.js';
-export type { WaInvalidEvent } from '../../events/events.js';
-
-const tagName = 'wa-checkbox';
-
-/**
- * @summary Checkboxes allow the user to toggle an option on or off.
- * @documentation https://backers.webawesome.com/docs/components/checkbox
- * @status stable
- * @since 2.0
- *
- * @dependency wa-icon
- *
- * @slot - The checkbox's label.
- * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
- *
- * @event blur - Emitted when the checkbox loses focus.
- * @event change - Emitted when the checked state changes.
- * @event focus - Emitted when the checkbox gains focus.
- * @event input - Emitted when the checkbox receives input.
- * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @csspart base - The component's label .
- * @csspart control - The square container that wraps the checkbox's checked state.
- * @csspart checked-icon - The checked icon, a `` element.
- * @csspart indeterminate-icon - The indeterminate icon, a `` element.
- * @csspart label - The container that wraps the checkbox's label.
- * @csspart hint - The hint's wrapper.
- *
- * @cssproperty --background-color - The checkbox's background color.
- * @cssproperty --background-color-checked - The checkbox's background color when checked.
- * @cssproperty --border-color - The color of the checkbox's borders.
- * @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
- * @cssproperty --border-radius - The radius of the checkbox's corners.
- * @cssproperty --border-style - The style of the checkbox's borders.
- * @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
- * @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
- * @cssproperty --checked-icon-color - The color of the checkbox's icon.
- * @cssproperty --toggle-size - The size of the checkbox.
- *
- * @cssstate checked - Applied when the checkbox is checked.
- * @cssstate disabled - Applied when the checkbox is disabled.
- * @cssstate indeterminate - Applied when the checkbox is in an indeterminate state.
- *
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {
- onWaInvalid: 'wa-invalid' as EventName,
- },
- displayName: 'WaCheckbox',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/color-picker/index.ts b/packages/webawesome/src/react/color-picker/index.ts
deleted file mode 100644
index 6d220058e..000000000
--- a/packages/webawesome/src/react/color-picker/index.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/color-picker/color-picker.js';
-
-import { type EventName } from '@lit/react';
-import type { WaInvalidEvent } from '../../events/events.js';
-export type { WaInvalidEvent } from '../../events/events.js';
-
-const tagName = 'wa-color-picker';
-
-/**
- * @summary Color pickers allow the user to select a color.
- * @documentation https://backers.webawesome.com/docs/components/color-picker
- * @status stable
- * @since 2.0
- *
- * @dependency wa-button
- * @dependency wa-button-group
- * @dependency wa-dropdown
- * @dependency wa-input
- * @dependency wa-visually-hidden
- *
- * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
- * @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.
- *
- * @event blur - Emitted when the color picker loses focus.
- * @event change - Emitted when the color picker's value changes.
- * @event focus - Emitted when the color picker receives focus.
- * @event input - Emitted when the color picker receives input.
- * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @csspart base - The component's base wrapper.
- * @csspart trigger - The color picker's dropdown trigger.
- * @csspart swatches - The container that holds the swatches.
- * @csspart swatch - Each individual swatch.
- * @csspart grid - The color grid.
- * @csspart grid-handle - The color grid's handle.
- * @csspart slider - Hue and opacity sliders.
- * @csspart slider-handle - Hue and opacity slider handles.
- * @csspart hue-slider - The hue slider.
- * @csspart hue-slider-handle - The hue slider's handle.
- * @csspart opacity-slider - The opacity slider.
- * @csspart opacity-slider-handle - The opacity slider's handle.
- * @csspart preview - The preview color.
- * @csspart input - The text input.
- * @csspart eye-dropper-button - The eye dropper button.
- * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
- * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
- * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
- * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
- * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
- * @csspart format-button - The format button.
- * @csspart format-button__base - The format button's exported `button` part.
- * @csspart format-button__prefix - The format button's exported `prefix` part.
- * @csspart format-button__label - The format button's exported `label` part.
- * @csspart format-button__suffix - The format button's exported `suffix` part.
- * @csspart format-button__caret - The format button's exported `caret` part.
- *
- * @cssproperty --background-color - The color picker's background color.
- * @cssproperty --border-color - The color of the color picker's borders.
- * @cssproperty --border-radius - The radius of the color picker's corners.
- * @cssproperty --border-style - The style of the color picker's borders.
- * @cssproperty --border-width - The width of the color picker's borders.
- * @cssproperty --grid-width - The width of the color grid.
- * @cssproperty --grid-height - The height of the color grid.
- * @cssproperty --grid-handle-size - The size of the color grid's handle.
- * @cssproperty --preview-size - The size of the preview color.
- * @cssproperty --preview-border-radius - The corners of the preview color.
- * @cssproperty --slider-height - The height of the hue and alpha sliders.
- * @cssproperty --slider-handle-size - The diameter of the slider's handle.
- * @cssproperty --spacing - The amount of space around and between the color picker's controls.
- * @cssproperty --swatch-border-radius - The corners of each predefined color swatch.
- * @cssproperty --swatch-size - The size of each predefined color swatch.
- * @cssproperty --trigger-border-radius - The corners of the color picker's dropdown trigger.
- */
-const reactWrapper = createComponent({
- tagName,
- elementClass: Component,
- react: React,
- events: {
- onWaInvalid: 'wa-invalid' as EventName,
- },
- displayName: 'WaColorPicker',
-});
-
-export default reactWrapper;
diff --git a/packages/webawesome/src/react/comparison/index.ts b/packages/webawesome/src/react/comparison/index.ts
deleted file mode 100644
index b0f998694..000000000
--- a/packages/webawesome/src/react/comparison/index.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-import Component from '../../components/comparison/comparison.js';
-
-const tagName = 'wa-comparison';
-
-/**
- * @summary Compare visual differences between similar content with a sliding panel.
- * @documentation https://backers.webawesome.com/docs/components/comparison
- * @status stable
- * @since 2.0
- *
- * @dependency wa-icon
- *
- * @slot before - The before content, often an `` or `