draft-components 3.6.0 → 4.0.0

package/dist/components/text-input/text-input.css

@@ -1,32 +1,32 @@
 .dc-text-input {
-  --dc-input-font-size: 14px;
-  --dc-input-height: 36px;
-  --dc-input-padding-x: 12px;
-  --dc-input-border-radius: 7px;
-  --dc-input-text-color: var(--dc-control-primary-text-color);
-  --dc-input-border-color: var(--dc-control-border-color);
-  --dc-input-border-color-error: var(--dc-control-error-color);
-  --dc-input-bg: var(--dc-control-bg);
-  --dc-input-add-on-color: var(--dc-control-secondary-text-color);
-  --dc-input-add-on-bg: none;
-  --dc-input-focus-ring-color: var(--dc-control-primary-color);
+  --font-size: 14px;
+  --height: 36px;
+  --padding-x: 12px;
+  --border-radius: 7px;
+  --color: var(--dc-neutral-900);
+  --border-color: var(--dc-neutral-300);
+  --border-color-error: var(--dc-red-500);
+  --background: var(--dc-white);
+  --add-on-color: var(--dc-neutral-500);
+  --add-on-background: none;
+  --focus-ring-color: var(--dc-focus-ring-color);
 
   box-sizing: border-box;
   display: inline-flex;
   align-items: stretch;
   min-width: 0;
   max-width: 100%;
-  height: var(--dc-input-height);
+  height: var(--height);
   font-family: var(--dc-primary-font);
-  font-size: var(--dc-input-font-size);
+  font-size: var(--font-size);
   font-weight: 400;
   line-height: 1;
-  color: var(--dc-input-text-color);
   vertical-align: middle;
+  color: var(--color);
   color-scheme: light;
-  background: var(--dc-input-bg);
-  border: 1px solid var(--dc-input-border-color);
-  border-radius: var(--dc-input-border-radius);
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
 }
 
 .dc-text-input_full-width {
@@ -35,7 +35,7 @@
 }
 
 .dc-text-input_invalid {
-  border-color: var(--dc-input-border-color-error);
+  border-color: var(--border-color-error);
 }
 
 .dc-text-input_disabled {
@@ -43,39 +43,39 @@
 }
 
 .dc-text-input_focused {
-  border-color: var(--dc-input-focus-ring-color);
-  box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 1px var(--focus-ring-color);
 }
 
 .dc-text-input > :first-child {
-  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
-  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-top-left-radius: calc(var(--border-radius) - 1px);
+  border-bottom-left-radius: calc(var(--border-radius) - 1px);
 }
 
 .dc-text-input > :last-child {
-  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
-  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-top-right-radius: calc(var(--border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--border-radius) - 1px);
 }
 
 .dc-text-input_sm {
-  --dc-input-font-size: 13px;
-  --dc-input-height: 32px;
-  --dc-input-padding-x: 8px;
-  --dc-input-border-radius: 6px;
+  --font-size: 13px;
+  --height: 32px;
+  --padding-x: 8px;
+  --border-radius: 6px;
 }
 
 .dc-text-input_lg {
-  --dc-input-font-size: 15px;
-  --dc-input-height: 40px;
-  --dc-input-padding-x: 16px;
-  --dc-input-border-radius: 8px;
+  --font-size: 15px;
+  --height: 40px;
+  --padding-x: 16px;
+  --border-radius: 8px;
 }
 
 .dc-text-input__native {
   flex: auto;
   min-width: 0;
   max-width: 100%;
-  padding: 0 var(--dc-input-padding-x);
+  padding: 0 var(--padding-x);
   margin: 0;
   font: inherit;
   color: inherit;
@@ -118,41 +118,47 @@
   display: inline-flex;
   flex: none;
   align-items: center;
-  color: var(--dc-input-add-on-color);
-  background: var(--dc-input-add-on-bg);
+  color: var(--add-on-color);
+  background: var(--add-on-background);
 }
 
 .dc-text-input__slot-left {
-  padding-left: var(--dc-input-padding-x);
+  padding-left: var(--padding-x);
 }
 
 .dc-text-input__slot-right {
-  padding-right: var(--dc-input-padding-x);
+  padding-right: var(--padding-x);
 }
 
 .dc-text-input_has_slot-left:not(.dc-text-input_slot_tinted) .dc-text-input__native {
-  padding-left: calc(var(--dc-input-padding-x) / 2);
+  padding-left: calc(var(--padding-x) / 2);
 }
 
 .dc-text-input_has_slot-right:not(.dc-text-input_slot_tinted) .dc-text-input__native {
-  padding-right: calc(var(--dc-input-padding-x) / 2);
+  padding-right: calc(var(--padding-x) / 2);
 }
 
 .dc-text-input_slot_tinted {
-  --dc-input-add-on-bg: rgb(var(--dc-gray-400-rgb) / 10%);
+  --add-on-background: rgb(var(--dc-neutral-400-rgb) / 10%);
 }
 
 .dc-text-input_slot_tinted .dc-text-input__slot-left {
-  padding-right: var(--dc-input-padding-x);
-  border-right: 1px solid var(--dc-input-border-color);
+  padding-right: var(--padding-x);
+  border-right: 1px solid var(--border-color);
 }
 
 .dc-text-input_slot_tinted .dc-text-input__slot-right {
-  padding-left: var(--dc-input-padding-x);
-  border-left: 1px solid var(--dc-input-border-color);
+  padding-left: var(--padding-x);
+  border-left: 1px solid var(--border-color);
 }
 
 .dark .dc-text-input,
 .dark.dc-text-input {
+  --color: var(--dc-white);
+  --border-color: var(--dc-neutral-600);
+  --border-color-error: var(--dc-red-400);
+  --background: var(--dc-neutral-800);
+  --add-on-color: var(--dc-neutral-400);
+
   color-scheme: dark;
 }

package/dist/components/text-input/text-input.d.ts

@@ -1,6 +1,4 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
-type TextInputHTMLProps = ComponentPropsWithRef<'input'>;
-type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'size'>;
+import { type ComponentProps, type ReactNode } from 'react';
 export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export type TextInputSize = 'sm' | 'md' | 'lg';
 export type TextInputSlotStyle = 'plain' | 'tinted';
@@ -9,7 +7,8 @@ export type TextInputSlotRenderer = (props: {
     className: string;
 }) => ReactNode;
 export type TextInputValueChangeHandler = (value: string) => void;
-export type TextInputProps = TextInputBaseProps & {
+type TextInputHTMLProps = ComponentProps<'input'>;
+type TextInputBaseProps = {
     fullWidth?: boolean;
     invalid?: boolean;
     type?: TextInputType;
@@ -21,5 +20,6 @@ export type TextInputProps = TextInputBaseProps & {
     textAlign?: TextInputTextAlign;
     onChangeValue?: TextInputValueChangeHandler;
 };
-export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export type TextInputProps = TextInputBaseProps & Omit<TextInputHTMLProps, keyof TextInputBaseProps>;
+export declare function TextInput({ style, className, fullWidth, size, sizeInChars, slotStyle, textAlign, slotLeft, slotRight, type, invalid, disabled, onChange, onFocus, onBlur, onChangeValue, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/text-input/text-input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { useState, } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const TextInput = forwardRef(function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', textAlign = 'left', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onFocus, onBlur, onChangeValue, ...props }, ref) {
+export function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', textAlign = 'left', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onFocus, onBlur, onChangeValue, ...props }) {
     const [focused, setFocused] = useState(false);
     let elementBeforeInput;
     if (slotLeft) {
@@ -53,5 +53,6 @@ export const TextInput = forwardRef(function TextInput({ style, className, fullW
             'dc-text-input_disabled': disabled,
             'dc-text-input_has_slot-left': elementBeforeInput,
             'dc-text-input_has_slot-right': elementAfterInput,
-        }), children: [elementBeforeInput, _jsx("input", { ...props, className: "dc-text-input__native", ref: ref, type: type, size: sizeInChars, disabled: disabled, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }), elementAfterInput] }));
-});
+        }), children: [elementBeforeInput, _jsx("input", { ...props, className: "dc-text-input__native", type: type, size: sizeInChars, disabled: disabled, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }), elementAfterInput] }));
+}
+//# sourceMappingURL=text-input.js.map

package/dist/components/text-input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/components/text-input/text-input.tsx"],"names":[],"mappings":"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"}

package/dist/components/textarea/index.js

@@ -1 +1,2 @@
 export * from './textarea.js';
+//# sourceMappingURL=index.js.map

package/dist/components/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/textarea/textarea.css

@@ -1,14 +1,14 @@
 .dc-textarea {
-  --dc-textarea-font-size: 14px;
-  --dc-textarea-leading: 20px;
-  --dc-textarea-padding-y: 8px;
-  --dc-textarea-padding-x: 12px;
-  --dc-textarea-radius: 7px;
-  --dc-textarea-text-color: var(--dc-primary-text-color);
-  --dc-textarea-border-color: var(--dc-control-border-color);
-  --dc-textarea-border-color-error: var(--dc-control-error-color);
-  --dc-textarea-bg: var(--dc-control-bg);
-  --dc-textarea-focus-ring-color: var(--dc-control-primary-color);
+  --font-size: 14px;
+  --leading: 20px;
+  --padding-y: 8px;
+  --padding-x: 12px;
+  --radius: 7px;
+  --color: var(--dc-neutral-900);
+  --border-color: var(--dc-neutral-300);
+  --border-color-error: var(--dc-red-500);
+  --background: var(--dc-white);
+  --focus-ring-color: var(--dc-focus-ring-color);
 
   box-sizing: border-box;
   display: inline-block;
@@ -16,18 +16,18 @@
   width: auto;
   min-width: 0;
   max-width: 100%;
-  min-height: calc(var(--dc-textarea-leading) + var(--dc-textarea-padding-y) * 2);
-  padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
+  min-height: calc(var(--leading) + var(--padding-y) * 2);
+  padding: var(--padding-y) var(--padding-x);
   margin-top: 0;
   margin-bottom: 0;
   font-family: var(--dc-primary-font);
-  font-size: var(--dc-textarea-font-size);
-  line-height: var(--dc-textarea-leading);
-  color: var(--dc-textarea-text-color);
+  font-size: var(--font-size);
+  line-height: var(--leading);
+  color: var(--color);
   color-scheme: light;
-  background: var(--dc-textarea-bg);
-  border: 1px solid var(--dc-textarea-border-color);
-  border-radius: var(--dc-textarea-radius);
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
 }
 
 .dc-textarea::-moz-placeholder {
@@ -41,9 +41,9 @@
 }
 
 .dc-textarea:focus {
-  border-color: var(--dc-textarea-focus-ring-color);
   outline: none;
-  box-shadow: 0 0 0 1px var(--dc-textarea-focus-ring-color);
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 1px var(--focus-ring-color);
 }
 
 .dc-textarea_disabled {
@@ -51,7 +51,7 @@
 }
 
 .dc-textarea_invalid {
-  border-color: var(--dc-textarea-border-color-error);
+  border-color: var(--border-color-error);
 }
 
 .dc-textarea_full-width {
@@ -61,22 +61,27 @@
 }
 
 .dc-textarea_sm {
-  --dc-textarea-font-size: 13px;
-  --dc-textarea-leading: 16px;
-  --dc-textarea-padding-y: 8px;
-  --dc-textarea-padding-x: 8px;
-  --dc-textarea-radius: 6px;
+  --font-size: 13px;
+  --leading: 16px;
+  --padding-y: 8px;
+  --padding-x: 8px;
+  --radius: 6px;
 }
 
 .dc-textarea_lg {
-  --dc-textarea-font-size: 15px;
-  --dc-textarea-leading: 24px;
-  --dc-textarea-padding-y: 12px;
-  --dc-textarea-padding-x: 16px;
-  --dc-textarea-radius: 8px;
+  --font-size: 15px;
+  --leading: 24px;
+  --padding-y: 12px;
+  --padding-x: 16px;
+  --radius: 8px;
 }
 
 .dark .dc-textarea,
 .dark.dc-textarea {
+  --color: var(--dc-white);
+  --border-color: var(--dc-neutral-600);
+  --border-color-error: var(--dc-red-400);
+  --background: var(--dc-neutral-800);
+
   color-scheme: dark;
 }

package/dist/components/textarea/textarea.d.ts

@@ -1,12 +1,13 @@
-import { ComponentPropsWithRef } from 'react';
-type TextareaHTMLProps = ComponentPropsWithRef<'textarea'>;
+import { type ComponentProps } from 'react';
 export type TextareaSize = 'sm' | 'md' | 'lg';
 export type TextareaValueChangeHandler = (value: string) => void;
-export type TextareaProps = TextareaHTMLProps & {
+type TextareaHTMLProps = ComponentProps<'textarea'>;
+type TextareaBaseProps = {
     fullWidth?: boolean;
     invalid?: boolean;
     size?: TextareaSize;
     onChangeValue?: TextareaValueChangeHandler;
 };
-export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export type TextareaProps = TextareaBaseProps & Omit<TextareaHTMLProps, keyof TextareaBaseProps>;
+export declare function Textarea({ style, className, fullWidth, size, rows, invalid, disabled, onChange, onChangeValue, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/textarea/textarea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const Textarea = forwardRef(function Textarea({ style, className, fullWidth, size = 'md', rows = 3, invalid, disabled, onChange, onChangeValue, ...props }, ref) {
+export function Textarea({ style, className, fullWidth, size = 'md', rows = 3, invalid, disabled, onChange, onChangeValue, ...props }) {
     const handleChange = (event) => {
         if (typeof onChange === 'function') {
             onChange(event);
@@ -10,10 +10,11 @@ export const Textarea = forwardRef(function Textarea({ style, className, fullWid
             onChangeValue(event.target.value);
         }
     };
-    return (_jsx("textarea", { ...props, ref: ref, style: style, className: classNames(className, 'dc-textarea', {
+    return (_jsx("textarea", { ...props, style: style, className: classNames(className, 'dc-textarea', {
             [`dc-textarea_${size}`]: size,
             'dc-textarea_full-width': fullWidth,
             'dc-textarea_invalid': invalid,
             'dc-textarea_disabled': disabled,
         }), rows: rows, disabled: disabled, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange }));
-});
+}
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAmBxD,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,SAAS,EACT,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,CAAC,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACM;IACd,MAAM,YAAY,GAA4C,CAAC,KAAK,EAAE,EAAE;QACtE,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;YACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;QACD,IAAI,OAAO,aAAa,KAAK,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,sBACM,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,aAAa,EAAE;YAC9C,CAAC,eAAe,IAAI,EAAE,CAAC,EAAE,IAAI;YAC7B,wBAAwB,EAAE,SAAS;YACnC,qBAAqB,EAAE,OAAO;YAC9B,sBAAsB,EAAE,QAAQ;SACjC,CAAC,EACF,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,kBACJ,KAAK,CAAC,cAAc,CAAC,IAAI,OAAO,EAC9C,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/toast/index.js

@@ -1,2 +1,3 @@
 export * from './toast.js';
 export * from './toast-button.js';
+//# sourceMappingURL=index.js.map

package/dist/components/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/components/toast/toast-button.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from 'react';
-export type ToastButtonProps = ComponentPropsWithRef<'button'>;
-export declare const ToastButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+import { type ComponentProps } from 'react';
+type ToastButtonHTMLProps = ComponentProps<'button'>;
+export type ToastButtonProps = ToastButtonHTMLProps;
+export declare function ToastButton({ className, ...props }: ToastButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/toast/toast-button.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const ToastButton = forwardRef(function ToastButton({ className, ...props }, ref) {
-    return (_jsx("button", { ...props, ref: ref, className: classNames(className, 'dc-toast__btn') }));
-});
+export function ToastButton({ className, ...props }) {
+    return (_jsx("button", { ...props, className: classNames(className, 'dc-toast__btn') }));
+}
+//# sourceMappingURL=toast-button.js.map

package/dist/components/toast/toast-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-button.js","sourceRoot":"","sources":["../../../src/components/toast/toast-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IACnE,OAAO,CACL,oBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC,GACjD,CACH,CAAC;AACJ,CAAC"}

package/dist/components/toast/toast.css

@@ -1,24 +1,24 @@
 .dc-toast {
-  --dc-toast-text-color: var(--dc-gray-100);
-  --dc-toast-secondary-text-color: var(--dc-gray-300);
-  --dc-toast-icon-color: var(--dc-gray-200);
-  --dc-toast-bg: var(--dc-gray-700);
-  --dc-toast-padding: 16px;
-  --dc-toast-close-btn-color: var(--dc-gray-50);
-  --dc-toast-close-btn-bg: var(--dc-gray-500);
-  --dc-toast-btn-text-color: var(--dc-gray-100);
-  --dc-toast-btn-bg: rgb(var(--dc-gray-50-rgb) / 15%);
-  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-50-rgb) / 30%);
-  --dc-toast-btn-focus-ring-color: var(--dc-gray-200);
+  --color: var(--dc-neutral-100);
+  --secondary-color: var(--dc-neutral-300);
+  --icon-color: var(--dc-neutral-200);
+  --background: var(--dc-neutral-700);
+  --padding: 16px;
+  --close-button-color: var(--dc-neutral-50);
+  --close-button-background: var(--dc-neutral-500);
+  --button-color: var(--dc-neutral-100);
+  --button-background: rgb(var(--dc-neutral-50-rgb) / 15%);
+  --button-background-hover: rgb(var(--dc-neutral-50-rgb) / 30%);
+  --button-focus-ring-color: var(--dc-neutral-200);
 
   position: relative;
   display: inline-flex;
   min-width: 256px;
   font: var(--dc-text-sm);
-  color: var(--dc-toast-text-color);
+  color: var(--color);
   text-align: left;
   color-scheme: light;
-  background: var(--dc-toast-bg);
+  background: var(--background);
   border-radius: 10px;
   box-shadow: var(--dc-shadow-lg);
 }
@@ -34,16 +34,16 @@
   width: 24px;
   height: 24px;
   padding: 0;
-  color: var(--dc-toast-close-btn-color);
+  color: var(--close-button-color);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   pointer-events: none;
-  background: var(--dc-toast-close-btn-bg);
+  background: var(--close-button-background);
   border: none;
   border-radius: 50%;
   box-shadow:
-    var(--dc-shadow-sm),
+    var(--dc-shadow-xs),
     var(--dc-shadow-md);
   opacity: 0;
   transition: opacity 150ms ease;
@@ -58,11 +58,11 @@
   box-sizing: border-box;
   padding: 4px 12px;
   font: var(--dc-text-xs);
-  color: var(--dc-toast-btn-text-color);
+  color: var(--button-color);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: var(--dc-toast-btn-bg);
+  background: var(--button-background);
   border: none;
   border-radius: 6px;
   transition: 100ms ease;
@@ -70,13 +70,13 @@
 }
 
 .dc-toast__btn:hover {
-  background: var(--dc-toast-btn-bg-hover);
+  background: var(--button-background-hover);
 }
 
 .dc-toast__btn:focus {
-  background: var(--dc-toast-btn-bg-hover);
   outline: none;
-  box-shadow: 0 0 0 1px var(--dc-toast-btn-focus-ring-color);
+  background: var(--button-background-hover);
+  box-shadow: 0 0 0 1px var(--button-focus-ring-color);
 }
 
 .dc-toast__btn:focus:not(:focus-visible) {
@@ -84,7 +84,7 @@
 }
 
 .dc-toast__btn:focus:not(:focus-visible, :hover) {
-  background: var(--dc-toast-btn-bg);
+  background: var(--button-background);
 }
 
 .dc-toast__body {
@@ -113,7 +113,7 @@
   display: inline-flex;
   flex-shrink: 0;
   margin-right: 12px;
-  color: var(--dc-toast-icon-color);
+  color: var(--icon-color);
 }
 
 .dc-toast__title {
@@ -124,21 +124,21 @@
 
 .dc-toast__message {
   margin-top: 0.25em;
-  color: var(--dc-toast-secondary-text-color);
+  color: var(--secondary-color);
 }
 
 .dark .dc-toast,
 .dark.dc-toast {
-  --dc-toast-text-color: var(--dc-gray-800);
-  --dc-toast-secondary-text-color: var(--dc-gray-600);
-  --dc-toast-icon-color: var(--dc-gray-700);
-  --dc-toast-bg: var(--dc-gray-100);
-  --dc-toast-close-btn-color: var(--dc-gray-800);
-  --dc-toast-close-btn-bg: var(--dc-gray-100);
-  --dc-toast-btn-text-color: var(--dc-gray-800);
-  --dc-toast-btn-bg: rgb(var(--dc-gray-900-rgb) / 10%);
-  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-900-rgb) / 20%);
-  --dc-toast-btn-focus-ring-color: var(--dc-gray-700);
+  --color: var(--dc-neutral-800);
+  --secondary-color: var(--dc-neutral-600);
+  --icon-color: var(--dc-neutral-700);
+  --background: var(--dc-neutral-100);
+  --close-button-color: var(--dc-neutral-800);
+  --close-button-background: var(--dc-neutral-100);
+  --button-color: var(--dc-neutral-800);
+  --button-background: rgb(var(--dc-neutral-900-rgb) / 10%);
+  --button-background-hover: rgb(var(--dc-neutral-900-rgb) / 20%);
+  --button-focus-ring-color: var(--dc-neutral-700);
 
   color-scheme: dark;
 }
@@ -147,6 +147,6 @@
 .dark.dc-toast .dc-toast__close-btn {
   box-shadow:
     0 0 0 1px rgb(var(--dc-black-rgb) / 10%),
-    var(--dc-shadow-sm),
+    var(--dc-shadow-xs),
     var(--dc-shadow-md);
 }

package/dist/components/toast/toast.d.ts

@@ -1,11 +1,12 @@
-import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
-type ToastBaseProps = ComponentPropsWithoutRef<'section'>;
-export type ToastProps = {
+import { type ComponentProps, type MouseEventHandler, type ReactNode } from 'react';
+type ToastHTMLProps = ComponentProps<'section'>;
+type ToastBaseProps = {
     icon?: ReactNode;
     message?: ReactNode;
     actions?: ReactNode;
     closeButtonAriaLabel?: string;
     onClickCloseButton?: MouseEventHandler<HTMLButtonElement>;
-} & ToastBaseProps;
+};
+export type ToastProps = ToastBaseProps & Omit<ToastHTMLProps, keyof ToastBaseProps>;
 export declare function Toast({ icon, message, actions, closeButtonAriaLabel, onClickCloseButton, children, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/toast/toast.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
 export function Toast({ icon, message, actions, closeButtonAriaLabel = 'close', onClickCloseButton, children, className, ...props }) {
     return (_jsxs("section", { ...props, className: classNames('dc-toast', className), children: [_jsx("button", { className: "dc-toast__close-btn", "aria-label": closeButtonAriaLabel, onClick: onClickCloseButton, children: _jsx(XMarkIcon, { width: 16, height: 16 }) }), _jsxs("div", { className: "dc-toast__body", children: [icon && _jsx("div", { className: "dc-toast__icon", children: icon }), _jsxs("div", { className: "dc-toast__content", children: [_jsx("h1", { className: "dc-toast__title", children: children }), message && _jsx("div", { className: "dc-toast__message", children: message })] })] }), actions && _jsx("div", { className: "dc-toast__actions", children: actions })] }));
 }
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+D,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAgBpE,MAAM,UAAU,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,oBAAoB,GAAG,OAAO,EAC9B,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACG;IACX,OAAO,CACL,sBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,aAE5C,iBACE,SAAS,EAAC,qBAAqB,gBACnB,oBAAoB,EAChC,OAAO,EAAE,kBAAkB,YAE3B,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC7B,EACT,eAAK,SAAS,EAAC,gBAAgB,aAC5B,IAAI,IAAI,cAAK,SAAS,EAAC,gBAAgB,YAAE,IAAI,GAAO,EACrD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAM,EAC9C,OAAO,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,OAAO,GAAO,IAC1D,IACF,EACL,OAAO,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,OAAO,GAAO,IACtD,CACX,CAAC;AACJ,CAAC"}

package/dist/components/toaster/index.js

@@ -1 +1,2 @@
 export * from './toaster.js';
+//# sourceMappingURL=index.js.map

package/dist/components/toaster/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toaster/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}