@tmorrow/cre8-react 1.0.14

package/lib/components/LinkList/index.js

@@ -0,0 +1 @@
+export * from './LinkList';

package/lib/components/LinkListItem/LinkListItem.d.ts

@@ -0,0 +1,2 @@
+import { Cre8LinkListItem as Cre8LinkListItemElement } from '@tmorrow/cre8-wc/lib/components/link-list-item/link-list-item';
+export declare const Cre8LinkListItem: import("@lit/react").ReactWebComponent<Cre8LinkListItemElement, {}>;

package/lib/components/LinkListItem/LinkListItem.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import { Cre8LinkListItem as Cre8LinkListItemElement } from '@tmorrow/cre8-wc/lib/components/link-list-item/link-list-item';
+import React from 'react';
+export const Cre8LinkListItem = createComponent({
+    react: React,
+    tagName: 'Cre8-link-list-item',
+    elementClass: Cre8LinkListItemElement,
+});

package/lib/components/LinkListItem/index.d.ts

@@ -0,0 +1 @@
+export * from './LinkListItem';

package/lib/components/LinkListItem/index.js

@@ -0,0 +1 @@
+export * from './LinkListItem';

package/lib/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,36 @@
+import { Cre8LoadingSpinner as Cre8LoadingSpinnerElement } from '@tmorrow/cre8-wc/lib/components/loading-spinner/loading-spinner';
+/**
+ * A loading spinner notifies the user that their request is being processed while the front end is retrieving data
+ * or performing slow computations.
+ *
+ * Providing visibility of a system's status is one of the most important rules of UI design. When the user has to
+ * guess or assume that the system is responding to their input, they may send a command such as submit multiple
+ * times, while also being anxious that the application is frozen or not working.
+ *
+ * While it is most ideal to improve system performance such that there is no perceptible delay, in some cases this
+ * is not possible. In these cases, the immediate response should be a progress indicator to give a visual indication
+ * that their command was received and that the application is working.
+ *
+ * The length of time for the system response is a good general guideline for which progress indicator to use.
+ *
+ * ## Determinable vs indeterminate progress
+ *
+ * A progress meter provides feedback that the system is working and gives the user an indication of how much time
+ * they will wait. This indicator should be used when the system response time is longer and determinable. See
+ * ProgressMeter component for further examples and accessibility considerations.
+ *
+ * ## How to Use
+ *
+ * The loading-spinner component can be used to indicate loading state on the component level all the way up to the
+ * page level. There are two loading styles: determinate (loading progress represents percentage of total load time)
+ * and indeterminate (a spinning animation that persists while loading continues)
+ *
+ * 1. Choose a size and use it according to context, guidance should be given by your design team.
+ * 2. If you choose to use the determinate loader then you must also control the progress attribute's value which
+ * controls the percentage of the circle that shows (values 0-100 accepted);
+ * 3. For dark backgrounds, add the `inverted` attribute to the `<Cre8-loading-spinner>` tag.
+ * 4. For accessibility reasons, always include a label input unless explicitly informed to do otherwise by design or
+ * accessibility teams.
+ *
+ */
+export declare const Cre8LoadingSpinner: import("@lit/react").ReactWebComponent<Cre8LoadingSpinnerElement, {}>;

package/lib/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8LoadingSpinner as Cre8LoadingSpinnerElement } from '@tmorrow/cre8-wc/lib/components/loading-spinner/loading-spinner';
+/**
+ * A loading spinner notifies the user that their request is being processed while the front end is retrieving data
+ * or performing slow computations.
+ *
+ * Providing visibility of a system's status is one of the most important rules of UI design. When the user has to
+ * guess or assume that the system is responding to their input, they may send a command such as submit multiple
+ * times, while also being anxious that the application is frozen or not working.
+ *
+ * While it is most ideal to improve system performance such that there is no perceptible delay, in some cases this
+ * is not possible. In these cases, the immediate response should be a progress indicator to give a visual indication
+ * that their command was received and that the application is working.
+ *
+ * The length of time for the system response is a good general guideline for which progress indicator to use.
+ *
+ * ## Determinable vs indeterminate progress
+ *
+ * A progress meter provides feedback that the system is working and gives the user an indication of how much time
+ * they will wait. This indicator should be used when the system response time is longer and determinable. See
+ * ProgressMeter component for further examples and accessibility considerations.
+ *
+ * ## How to Use
+ *
+ * The loading-spinner component can be used to indicate loading state on the component level all the way up to the
+ * page level. There are two loading styles: determinate (loading progress represents percentage of total load time)
+ * and indeterminate (a spinning animation that persists while loading continues)
+ *
+ * 1. Choose a size and use it according to context, guidance should be given by your design team.
+ * 2. If you choose to use the determinate loader then you must also control the progress attribute's value which
+ * controls the percentage of the circle that shows (values 0-100 accepted);
+ * 3. For dark backgrounds, add the `inverted` attribute to the `<Cre8-loading-spinner>` tag.
+ * 4. For accessibility reasons, always include a label input unless explicitly informed to do otherwise by design or
+ * accessibility teams.
+ *
+ */
+export const Cre8LoadingSpinner = createComponent({
+    react: React,
+    tagName: 'Cre8-loading-spinner',
+    elementClass: Cre8LoadingSpinnerElement,
+});

package/lib/components/LoadingSpinner/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingSpinner';

package/lib/components/LoadingSpinner/index.js

@@ -0,0 +1 @@
+export * from './LoadingSpinner';

package/lib/components/Logo/Logo.d.ts

@@ -0,0 +1,2 @@
+import { Cre8Logo as Cre8LogoElement } from '@tmorrow/cre8-wc/lib/components/logo/logo';
+export declare const Cre8Logo: import("@lit/react").ReactWebComponent<Cre8LogoElement, {}>;

package/lib/components/Logo/Logo.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Logo as Cre8LogoElement } from '@tmorrow/cre8-wc/lib/components/logo/logo';
+export const Cre8Logo = createComponent({
+    react: React,
+    tagName: 'Cre8-logo',
+    elementClass: Cre8LogoElement,
+});

package/lib/components/Logo/index.d.ts

@@ -0,0 +1 @@
+export * from './Logo';

package/lib/components/Logo/index.js

@@ -0,0 +1 @@
+export * from './Logo';

package/lib/components/Main/Main.d.ts

@@ -0,0 +1,2 @@
+import { Cre8Main as Cre8MainElement } from '@tmorrow/cre8-wc/lib/components/main/main';
+export declare const Cre8Main: import("@lit/react").ReactWebComponent<Cre8MainElement, {}>;

package/lib/components/Main/Main.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import { Cre8Main as Cre8MainElement } from '@tmorrow/cre8-wc/lib/components/main/main';
+import React from 'react';
+export const Cre8Main = createComponent({
+    react: React,
+    tagName: 'Cre8-main',
+    elementClass: Cre8MainElement,
+});

package/lib/components/Main/index.d.ts

@@ -0,0 +1 @@
+export * from './Main';

package/lib/components/Main/index.js

@@ -0,0 +1 @@
+export * from './Main';

package/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,8 @@
+import { EventName } from '@lit/react';
+import { Cre8Modal as Cre8ModalElement, type CloseModalEvent } from '@tmorrow/cre8-wc/lib/components/modal/modal';
+export declare const Cre8Modal: import("@lit/react").ReactWebComponent<Cre8ModalElement, {
+    /** Event emitted when the close button is clicked. Use this
+     * when managing `isActive`'s state.
+    */
+    onClose: EventName<CloseModalEvent>;
+}>;

package/lib/components/Modal/Modal.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Modal as Cre8ModalElement } from '@tmorrow/cre8-wc/lib/components/modal/modal';
+export const Cre8Modal = createComponent({
+    react: React,
+    tagName: 'Cre8-modal',
+    elementClass: Cre8ModalElement,
+    events: {
+        /** Event emitted when the close button is clicked. Use this
+         * when managing `isActive`'s state.
+        */
+        onClose: 'close-modal',
+    },
+});

package/lib/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export * from './Modal';

package/lib/components/Modal/index.js

@@ -0,0 +1 @@
+export * from './Modal';

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,15 @@
+import { EventName } from '@lit/react';
+import { Cre8MultiSelect as Cre8MultiSelectElement } from '@tmorrow/cre8-wc/lib/components/multi-select/multi-select';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * Multiselect is used when multiple options can be chosen from a static dropdown
+ * This component has a list of items in the dropdown that can be added as "selected tags"
+ * The checkbox will always reflect the selected nature of the item and is not removed
+ * from the dropdown when clicked, the tags will be added and removed based on their state.
+ *
+ * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * current list after the change is given in the detail.
+ */
+export declare const Cre8MultiSelect: import("@lit/react").ReactWebComponent<Cre8MultiSelectElement, {
+    onSelectedItemsChange: EventName<Cre8DomEvent<Cre8MultiSelectElement>>;
+}>;

package/lib/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8MultiSelect as Cre8MultiSelectElement } from '@tmorrow/cre8-wc/lib/components/multi-select/multi-select';
+/**
+ * Multiselect is used when multiple options can be chosen from a static dropdown
+ * This component has a list of items in the dropdown that can be added as "selected tags"
+ * The checkbox will always reflect the selected nature of the item and is not removed
+ * from the dropdown when clicked, the tags will be added and removed based on their state.
+ *
+ * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * current list after the change is given in the detail.
+ */
+export const Cre8MultiSelect = createComponent({
+    react: React,
+    tagName: 'Cre8-multi-select',
+    elementClass: Cre8MultiSelectElement,
+    events: {
+        onSelectedItemsChange: 'selectedItemsChange',
+    },
+});

package/lib/components/MultiSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './MultiSelect';

package/lib/components/MultiSelect/index.js

@@ -0,0 +1 @@
+export * from './MultiSelect';

package/lib/components/NavContainer/NavContainer.d.ts

@@ -0,0 +1,2 @@
+import { Cre8NavContainer as Cre8NavContainerElement } from '@tmorrow/cre8-wc/lib/components/nav-container/nav-container';
+export declare const Cre8NavContainer: import("@lit/react").ReactWebComponent<Cre8NavContainerElement, {}>;

package/lib/components/NavContainer/NavContainer.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import { Cre8NavContainer as Cre8NavContainerElement } from '@tmorrow/cre8-wc/lib/components/nav-container/nav-container';
+import React from 'react';
+export const Cre8NavContainer = createComponent({
+    react: React,
+    tagName: 'Cre8-nav-container',
+    elementClass: Cre8NavContainerElement,
+});

package/lib/components/NavContainer/index.d.ts

@@ -0,0 +1 @@
+export * from './NavContainer';

package/lib/components/NavContainer/index.js

@@ -0,0 +1 @@
+export * from './NavContainer';

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,44 @@
+import { Cre8Pagination as Cre8PaginationElement } from '@tmorrow/cre8-wc/lib/components/pagination/pagination';
+/**
+ * The Pagination component is used to split up a large amount of results by showing only
+ * a certain amount on each page. You can cycle through the pages using Page Numbers,
+ * Next and Previous Buttons, or optional First Page and Last Page Buttons.
+ * This component is also used by Table to cycle through rows of results. Pagination has four display options:
+ *
+ * **default**:  Can contain up to seven Page Numbers (ellipses included) at a time flanked by
+ * Next and Previous Buttons. When there are more than seven pages, numbers start getting
+ * replaced by ellipses. Use this option when you have a lot of horizontal space in a layout.
+ * It should not be used for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.
+ *
+ *
+ * **compact** : Best used as a summary of where you are among pages or table rows
+ * flanked by Previous and Next Buttons. Use this option when you have limited horizontal
+ * space but still need to show where users are among results. Great for mobile layouts.
+ *
+ *
+ * **icon-only** : Use this option in very tight spaces when it’s not required
+ * to show users where they are among results. Great for mobile layouts.
+ *
+ * ## HOW TO USE
+ *
+ * Select an option from the “Display” dropdown depending on layout width
+ * Select where your current page is from the “Page” dropdown
+ * To show less pages when using Full Numbers, use the “pageNumber” toggles
+ * To hide the First Page and Last Page Buttons, turn off the “firstLastButton” toggle
+ * To change the states of page numbers or buttons, click on each to see its “State” dropdown
+ * When using Compact Pagination, you can choose between “Page Numbers” and "Icon Only" formats
+ *
+ *
+ * ## ACCESSIBILITY NOTE
+ *
+ * To best orient people using screen readers, push focus to the top of
+ * the list of results after any of the pagination buttons have been triggered,
+ * **except for the currently selected one**. Focus target could be a visual results heading,
+ * or the top heading of the results container of the page selected
+ * via a programmatic selector, e.g. < section id=“results” aria-label="results-section" > or
+ * < div role= “group” aria-label=“results” >.
+ *
+ * @dependency Cre8-button, Cre8-icon, Cre8-pagination-counter
+ * @csspart icon - distinguishes the page buttons from the icon buttons
+ */
+export declare const Cre8Pagination: import("@lit/react").ReactWebComponent<Cre8PaginationElement, {}>;

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Pagination as Cre8PaginationElement } from '@tmorrow/cre8-wc/lib/components/pagination/pagination';
+/**
+ * The Pagination component is used to split up a large amount of results by showing only
+ * a certain amount on each page. You can cycle through the pages using Page Numbers,
+ * Next and Previous Buttons, or optional First Page and Last Page Buttons.
+ * This component is also used by Table to cycle through rows of results. Pagination has four display options:
+ *
+ * **default**:  Can contain up to seven Page Numbers (ellipses included) at a time flanked by
+ * Next and Previous Buttons. When there are more than seven pages, numbers start getting
+ * replaced by ellipses. Use this option when you have a lot of horizontal space in a layout.
+ * It should not be used for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.
+ *
+ *
+ * **compact** : Best used as a summary of where you are among pages or table rows
+ * flanked by Previous and Next Buttons. Use this option when you have limited horizontal
+ * space but still need to show where users are among results. Great for mobile layouts.
+ *
+ *
+ * **icon-only** : Use this option in very tight spaces when it’s not required
+ * to show users where they are among results. Great for mobile layouts.
+ *
+ * ## HOW TO USE
+ *
+ * Select an option from the “Display” dropdown depending on layout width
+ * Select where your current page is from the “Page” dropdown
+ * To show less pages when using Full Numbers, use the “pageNumber” toggles
+ * To hide the First Page and Last Page Buttons, turn off the “firstLastButton” toggle
+ * To change the states of page numbers or buttons, click on each to see its “State” dropdown
+ * When using Compact Pagination, you can choose between “Page Numbers” and "Icon Only" formats
+ *
+ *
+ * ## ACCESSIBILITY NOTE
+ *
+ * To best orient people using screen readers, push focus to the top of
+ * the list of results after any of the pagination buttons have been triggered,
+ * **except for the currently selected one**. Focus target could be a visual results heading,
+ * or the top heading of the results container of the page selected
+ * via a programmatic selector, e.g. < section id=“results” aria-label="results-section" > or
+ * < div role= “group” aria-label=“results” >.
+ *
+ * @dependency Cre8-button, Cre8-icon, Cre8-pagination-counter
+ * @csspart icon - distinguishes the page buttons from the icon buttons
+ */
+export const Cre8Pagination = createComponent({
+    react: React,
+    tagName: 'Cre8-pagination',
+    elementClass: Cre8PaginationElement,
+});

package/lib/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/lib/components/Pagination/index.js

@@ -0,0 +1 @@
+export * from './Pagination';

package/lib/components/PercentBar/PercentBar.d.ts

@@ -0,0 +1,11 @@
+import { EventName } from '@lit/react';
+import { Cre8PercentBar as Cre8PercentBarElement } from '@tmorrow/cre8-wc/lib/components/percent-bar/percent-bar';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
+ * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
+ * allows a user save their progress before exiting.
+ */
+export declare const Cre8PercentBar: import("@lit/react").ReactWebComponent<Cre8PercentBarElement, {
+    onLeftActionButtonClick: EventName<Cre8DomEvent<Cre8PercentBarElement>>;
+}>;

package/lib/components/PercentBar/PercentBar.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8PercentBar as Cre8PercentBarElement } from '@tmorrow/cre8-wc/lib/components/percent-bar/percent-bar';
+/**
+ * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
+ * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
+ * allows a user save their progress before exiting.
+ */
+export const Cre8PercentBar = createComponent({
+    react: React,
+    tagName: 'Cre8-percent-bar',
+    elementClass: Cre8PercentBarElement,
+    events: {
+        onLeftActionButtonClick: 'leftActionButtonClick',
+    },
+});

package/lib/components/PercentBar/index.d.ts

@@ -0,0 +1 @@
+export * from './PercentBar';

package/lib/components/PercentBar/index.js

@@ -0,0 +1 @@
+export * from './PercentBar';

package/lib/components/Popover/Popover.d.ts

@@ -0,0 +1,11 @@
+import { EventName } from '@lit/react';
+import { Cre8Popover as Cre8PopoverElement } from '@tmorrow/cre8-wc/lib/components/popover/popover';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.
+ * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.
+ */
+export declare const Cre8Popover: import("@lit/react").ReactWebComponent<Cre8PopoverElement, {
+    onOpen: EventName<Cre8DomEvent<Cre8PopoverElement>>;
+    onClose: EventName<Cre8DomEvent<Cre8PopoverElement>>;
+}>;

package/lib/components/Popover/Popover.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Popover as Cre8PopoverElement } from '@tmorrow/cre8-wc/lib/components/popover/popover';
+/**
+ * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.
+ * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.
+ */
+export const Cre8Popover = createComponent({
+    react: React,
+    tagName: 'Cre8-popover',
+    elementClass: Cre8PopoverElement,
+    events: {
+        onOpen: 'open',
+        onClose: 'close',
+    },
+});

package/lib/components/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from './Popover';

package/lib/components/Popover/index.js

@@ -0,0 +1 @@
+export * from './Popover';

package/lib/components/PrimaryNav/PrimaryNav.d.ts

@@ -0,0 +1,2 @@
+import { Cre8PrimaryNav as Cre8PrimaryNavElement } from '@tmorrow/cre8-wc/lib/components/primary-nav/primary-nav';
+export declare const Cre8PrimaryNav: import("@lit/react").ReactWebComponent<Cre8PrimaryNavElement, {}>;

package/lib/components/PrimaryNav/PrimaryNav.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import { Cre8PrimaryNav as Cre8PrimaryNavElement } from '@tmorrow/cre8-wc/lib/components/primary-nav/primary-nav';
+import React from 'react';
+export const Cre8PrimaryNav = createComponent({
+    react: React,
+    tagName: 'Cre8-primary-nav',
+    elementClass: Cre8PrimaryNavElement,
+});

package/lib/components/PrimaryNav/index.d.ts

@@ -0,0 +1 @@
+export * from './PrimaryNav';

package/lib/components/PrimaryNav/index.js

@@ -0,0 +1 @@
+export * from './PrimaryNav';

package/lib/components/PrimaryNavItem/PrimaryNavItem.d.ts

@@ -0,0 +1,2 @@
+import { Cre8PrimaryNavItem as Cre8PrimaryNavItemElement } from '@tmorrow/cre8-wc/lib/components/primary-nav-item/primary-nav-item';
+export declare const Cre8PrimaryNavItem: import("@lit/react").ReactWebComponent<Cre8PrimaryNavItemElement, {}>;

package/lib/components/PrimaryNavItem/PrimaryNavItem.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import { Cre8PrimaryNavItem as Cre8PrimaryNavItemElement } from '@tmorrow/cre8-wc/lib/components/primary-nav-item/primary-nav-item';
+import React from 'react';
+export const Cre8PrimaryNavItem = createComponent({
+    react: React,
+    tagName: 'Cre8-primary-nav-item',
+    elementClass: Cre8PrimaryNavItemElement,
+});

package/lib/components/PrimaryNavItem/index.d.ts

@@ -0,0 +1 @@
+export * from './PrimaryNavItem';

package/lib/components/PrimaryNavItem/index.js

@@ -0,0 +1 @@
+export * from './PrimaryNavItem';

package/lib/components/ProgressMeter/ProgressMeter.d.ts

@@ -0,0 +1,10 @@
+import { Cre8ProgressMeter as Cre8ProgressMeterElement } from '@tmorrow/cre8-wc/lib/components/progress-meter/progress-meter';
+/**
+ * A progress meter provides feedback that the system is working and gives the user an indication of how much time they will wait.
+ * This indicator should be used when the system response time is longer and determinable.
+ *
+ * # How to Use
+ * 1. Select a background from the “Surface” dropdown
+ * 2. Select completion amount from the “Progress” dropdown
+ */
+export declare const Cre8ProgressMeter: import("@lit/react").ReactWebComponent<Cre8ProgressMeterElement, {}>;

package/lib/components/ProgressMeter/ProgressMeter.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8ProgressMeter as Cre8ProgressMeterElement } from '@tmorrow/cre8-wc/lib/components/progress-meter/progress-meter';
+/**
+ * A progress meter provides feedback that the system is working and gives the user an indication of how much time they will wait.
+ * This indicator should be used when the system response time is longer and determinable.
+ *
+ * # How to Use
+ * 1. Select a background from the “Surface” dropdown
+ * 2. Select completion amount from the “Progress” dropdown
+ */
+export const Cre8ProgressMeter = createComponent({
+    react: React,
+    tagName: 'Cre8-progress-meter',
+    elementClass: Cre8ProgressMeterElement,
+});

package/lib/components/ProgressMeter/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressMeter';

package/lib/components/ProgressMeter/index.js

@@ -0,0 +1 @@
+export * from './ProgressMeter';

package/lib/components/RadioField/RadioField.d.ts

@@ -0,0 +1,9 @@
+import { Cre8RadioField as Cre8RadioFieldElement } from '@tmorrow/cre8-wc/lib/components/radio-field/radio-field';
+/**
+ * Radio Field is the parent container for `radio-field-item`.
+ * It is required to allow for grouping numerous radio fields that need additional context (in the form of `<legend>`).
+ * It also provides accessibility roles, aria attributes and field note messaging on the group.
+ *
+ * See [radio-field-item](?path=/story/Cre8-components-radio-field-item--default) for more guidance on its usage.
+ */
+export declare const Cre8RadioField: import("@lit/react").ReactWebComponent<Cre8RadioFieldElement, {}>;

package/lib/components/RadioField/RadioField.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8RadioField as Cre8RadioFieldElement } from '@tmorrow/cre8-wc/lib/components/radio-field/radio-field';
+/**
+ * Radio Field is the parent container for `radio-field-item`.
+ * It is required to allow for grouping numerous radio fields that need additional context (in the form of `<legend>`).
+ * It also provides accessibility roles, aria attributes and field note messaging on the group.
+ *
+ * See [radio-field-item](?path=/story/Cre8-components-radio-field-item--default) for more guidance on its usage.
+ */
+export const Cre8RadioField = createComponent({
+    react: React,
+    tagName: 'Cre8-radio-field',
+    elementClass: Cre8RadioFieldElement,
+});

package/lib/components/RadioField/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioField';

package/lib/components/RadioField/index.js

@@ -0,0 +1 @@
+export * from './RadioField';

package/lib/components/RadioFieldItem/RadioFieldItem.d.ts

@@ -0,0 +1,11 @@
+import { EventName } from '@lit/react';
+import { Cre8RadioFieldItem as Cre8RadioFieldItemElement } from '@tmorrow/cre8-wc/lib/components/radio-field-item/radio-field-item';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * A Radio Field Item adds a radio button to a Radio Field. Radio buttons let a user choose only one of several
+ * options. Do not use a single radio button, because once selected, it cannot be de-selected. If the user can only
+ * choose one, none or many options, use Checkbox instead.
+ */
+export declare const Cre8RadioFieldItem: import("@lit/react").ReactWebComponent<Cre8RadioFieldItemElement, {
+    onChange: EventName<Cre8DomEvent<Cre8RadioFieldItemElement>>;
+}>;

package/lib/components/RadioFieldItem/RadioFieldItem.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8RadioFieldItem as Cre8RadioFieldItemElement } from '@tmorrow/cre8-wc/lib/components/radio-field-item/radio-field-item';
+/**
+ * A Radio Field Item adds a radio button to a Radio Field. Radio buttons let a user choose only one of several
+ * options. Do not use a single radio button, because once selected, it cannot be de-selected. If the user can only
+ * choose one, none or many options, use Checkbox instead.
+ */
+export const Cre8RadioFieldItem = createComponent({
+    react: React,
+    tagName: 'Cre8-radio-field-item',
+    elementClass: Cre8RadioFieldItemElement,
+    events: {
+        onChange: 'input',
+    },
+});

package/lib/components/RadioFieldItem/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioFieldItem';

package/lib/components/RadioFieldItem/index.js

@@ -0,0 +1 @@
+export * from './RadioFieldItem';

package/lib/components/RemoveTag/RemoveTag.d.ts

@@ -0,0 +1,6 @@
+import { EventName } from '@lit/react';
+import { Cre8RemoveTag as Cre8RemoveTagElement } from '@tmorrow/cre8-wc/lib/components/remove-tag/remove-tag';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+export declare const Cre8RemoveTag: import("@lit/react").ReactWebComponent<Cre8RemoveTagElement, {
+    onRemoveTagClicked: EventName<Cre8DomEvent<Cre8RemoveTagElement>>;
+}>;

package/lib/components/RemoveTag/RemoveTag.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8RemoveTag as Cre8RemoveTagElement } from '@tmorrow/cre8-wc/lib/components/remove-tag/remove-tag';
+export const Cre8RemoveTag = createComponent({
+    react: React,
+    tagName: 'Cre8-remove-tag',
+    elementClass: Cre8RemoveTagElement,
+    events: {
+        onRemoveTagClicked: 'removeTagClicked',
+    },
+});

package/lib/components/RemoveTag/index.d.ts

@@ -0,0 +1 @@
+export * from './RemoveTag';

package/lib/components/RemoveTag/index.js

@@ -0,0 +1 @@
+export * from './RemoveTag';

package/lib/components/Section/Section.d.ts

@@ -0,0 +1,2 @@
+import { Cre8Section as Cre8SectionElement } from '@tmorrow/cre8-wc/lib/components/section/section';
+export declare const Cre8Section: import("@lit/react").ReactWebComponent<Cre8SectionElement, {}>;