draft-components 3.6.0 → 4.0.0

package/dist/components/alert/alert.css

@@ -1,10 +1,10 @@
 .dc-alert {
-  --dc-alert-text-color: var(--dc-gray-700);
-  --dc-alert-icon-color: var(--dc-gray-500);
-  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 25%);
-  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 25%);
-  --dc-alert-accent-border-color: var(--dc-gray-500);
-  --dc-alert-icon-size: 20px;
+  --color: var(--dc-neutral-700);
+  --icon-color: var(--dc-neutral-500);
+  --background: rgb(var(--dc-neutral-200-rgb) / 25%);
+  --border-color: rgb(var(--dc-neutral-400-rgb) / 25%);
+  --accent-border-color: var(--dc-neutral-500);
+  --icon-size: 20px;
 
   box-sizing: border-box;
   display: flex;
@@ -12,11 +12,11 @@
   align-items: flex-start;
   padding: 12px 16px;
   font: var(--dc-text-sm);
-  color: var(--dc-alert-text-color);
+  color: var(--color);
   text-align: left;
   color-scheme: light;
-  background: var(--dc-alert-bg);
-  border: 1px solid var(--dc-alert-border-color);
+  background: var(--background);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
 }
 
@@ -30,7 +30,7 @@
 
 .dc-alert__icon {
   display: inline-flex;
-  color: var(--dc-alert-icon-color);
+  color: var(--icon-color);
 }
 
 .dc-alert__body {
@@ -63,11 +63,10 @@
 
 .dc-alert__dismiss-button:focus {
   outline: none;
-  box-shadow: 0 0 0 2px currentcolor;
 }
 
-.dc-alert__dismiss-button:focus:not(:focus-visible) {
-  box-shadow: none;
+.dc-alert__dismiss-button:focus-visible {
+  outline: 2px solid currentcolor;
 }
 
 .dc-alert_style_full-width {
@@ -78,85 +77,85 @@
 
 .dc-alert_style_accent-left {
   border: none;
-  border-left: 4px solid var(--dc-alert-accent-border-color);
+  border-left: 4px solid var(--accent-border-color);
   border-radius: 0;
 }
 
 .dc-alert_tint_orange {
-  --dc-alert-text-color: var(--dc-orange-700);
-  --dc-alert-icon-color: var(--dc-orange-600);
-  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 20%);
-  --dc-alert-border-color: rgb(var(--dc-orange-500-rgb) / 25%);
-  --dc-alert-accent-border-color: var(--dc-orange-500);
+  --color: var(--dc-orange-700);
+  --icon-color: var(--dc-orange-600);
+  --background: rgb(var(--dc-orange-200-rgb) / 20%);
+  --border-color: rgb(var(--dc-orange-500-rgb) / 25%);
+  --accent-border-color: var(--dc-orange-500);
 }
 
 .dc-alert_tint_red {
-  --dc-alert-text-color: var(--dc-red-700);
-  --dc-alert-icon-color: var(--dc-red-600);
-  --dc-alert-bg: rgb(var(--dc-red-200-rgb) / 20%);
-  --dc-alert-border-color: rgb(var(--dc-red-500-rgb) / 25%);
-  --dc-alert-accent-border-color: var(--dc-red-500);
+  --color: var(--dc-red-700);
+  --icon-color: var(--dc-red-600);
+  --background: rgb(var(--dc-red-200-rgb) / 20%);
+  --border-color: rgb(var(--dc-red-500-rgb) / 25%);
+  --accent-border-color: var(--dc-red-500);
 }
 
 .dc-alert_tint_blue {
-  --dc-alert-text-color: var(--dc-blue-700);
-  --dc-alert-icon-color: var(--dc-blue-600);
-  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 20%);
-  --dc-alert-border-color: rgb(var(--dc-blue-500-rgb) / 25%);
-  --dc-alert-accent-border-color: var(--dc-blue-500);
+  --color: var(--dc-blue-700);
+  --icon-color: var(--dc-blue-600);
+  --background: rgb(var(--dc-blue-200-rgb) / 20%);
+  --border-color: rgb(var(--dc-blue-500-rgb) / 25%);
+  --accent-border-color: var(--dc-blue-500);
 }
 
 .dc-alert_tint_green {
-  --dc-alert-text-color: var(--dc-green-700);
-  --dc-alert-icon-color: var(--dc-green-600);
-  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 20%);
-  --dc-alert-border-color: rgb(var(--dc-green-600-rgb) / 25%);
-  --dc-alert-accent-border-color: var(--dc-green-500);
+  --color: var(--dc-green-700);
+  --icon-color: var(--dc-green-600);
+  --background: rgb(var(--dc-green-200-rgb) / 20%);
+  --border-color: rgb(var(--dc-green-600-rgb) / 25%);
+  --accent-border-color: var(--dc-green-500);
 }
 
 .dark .dc-alert,
 .dark.dc-alert {
-  --dc-alert-text-color: var(--dc-gray-300);
-  --dc-alert-icon-color: var(--dc-gray-300);
-  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 10%);
-  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 20%);
-  --dc-alert-accent-border-color: var(--dc-gray-400);
+  --color: var(--dc-neutral-300);
+  --icon-color: var(--dc-neutral-300);
+  --background: rgb(var(--dc-neutral-200-rgb) / 10%);
+  --border-color: rgb(var(--dc-neutral-400-rgb) / 20%);
+  --accent-border-color: var(--dc-neutral-400);
 
   color-scheme: dark;
 }
 
 .dark .dc-alert_tint_orange,
 .dark.dc-alert_tint_orange {
-  --dc-alert-text-color: var(--dc-orange-400);
-  --dc-alert-icon-color: var(--dc-orange-400);
-  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 10%);
-  --dc-alert-border-color: rgb(var(--dc-orange-400-rgb) / 30%);
-  --dc-alert-accent-border-color: var(--dc-orange-500);
+  --color: var(--dc-orange-400);
+  --icon-color: var(--dc-orange-400);
+  --background: rgb(var(--dc-orange-200-rgb) / 10%);
+  --border-color: rgb(var(--dc-orange-400-rgb) / 30%);
+  --accent-border-color: var(--dc-orange-500);
 }
 
 .dark .dc-alert_tint_red,
 .dark.dc-alert_tint_red {
-  --dc-alert-text-color: var(--dc-red-400);
-  --dc-alert-icon-color: var(--dc-red-400);
-  --dc-alert-bg: rgb(var(--dc-red-300-rgb) / 10%);
-  --dc-alert-border-color: rgb(var(--dc-red-400-rgb) / 30%);
-  --dc-alert-accent-border-color: var(--dc-red-500);
+  --color: var(--dc-red-500);
+  --icon-color: var(--dc-red-400);
+  --background: rgb(var(--dc-red-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-red-500-rgb) / 30%);
+  --accent-border-color: var(--dc-red-500);
 }
 
 .dark .dc-alert_tint_blue,
 .dark.dc-alert_tint_blue {
-  --dc-alert-text-color: var(--dc-blue-300);
-  --dc-alert-icon-color: var(--dc-blue-300);
-  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 10%);
-  --dc-alert-border-color: rgb(var(--dc-blue-400-rgb) / 30%);
-  --dc-alert-accent-border-color: var(--dc-blue-400);
+  --color: var(--dc-blue-300);
+  --icon-color: var(--dc-blue-300);
+  --background: rgb(var(--dc-blue-200-rgb) / 10%);
+  --border-color: rgb(var(--dc-blue-400-rgb) / 30%);
+  --accent-border-color: var(--dc-blue-400);
 }
 
 .dark .dc-alert_tint_green,
 .dark.dc-alert_tint_green {
-  --dc-alert-text-color: var(--dc-green-400);
-  --dc-alert-icon-color: var(--dc-green-400);
-  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 10%);
-  --dc-alert-border-color: rgb(var(--dc-green-400-rgb) / 30%);
-  --dc-alert-accent-border-color: var(--dc-green-500);
+  --color: var(--dc-green-400);
+  --icon-color: var(--dc-green-400);
+  --background: rgb(var(--dc-green-200-rgb) / 10%);
+  --border-color: rgb(var(--dc-green-400-rgb) / 30%);
+  --accent-border-color: var(--dc-green-500);
 }

package/dist/components/alert/alert.d.ts

@@ -1,15 +1,15 @@
-import { ComponentPropsWithRef, MouseEventHandler, ReactNode } from 'react';
-type AlertHTMLProps = ComponentPropsWithRef<'div'>;
-type AlertBaseProps = Omit<AlertHTMLProps, 'title'>;
+import { type ComponentProps, type MouseEventHandler, type ReactNode } from 'react';
 export type AlertStyle = 'default' | 'full-width' | 'accent-left';
 export type AlertTint = 'gray' | 'orange' | 'red' | 'blue' | 'green';
-export type AlertProps = {
+type AlertHTMLProps = ComponentProps<'div'>;
+type AlertBaseProps = {
     shouldShowDismissButton?: boolean;
     alertStyle?: AlertStyle;
     tint?: AlertTint;
     icon?: ReactNode;
     title?: ReactNode;
     onClickDismissButton?: MouseEventHandler<HTMLButtonElement>;
-} & AlertBaseProps;
-export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type AlertProps = AlertBaseProps & Omit<AlertHTMLProps, keyof AlertBaseProps>;
+export declare function Alert({ shouldShowDismissButton, alertStyle, tint, icon, title, children, className, onClickDismissButton, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/alert/alert.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
-export const Alert = forwardRef(function Alert({ shouldShowDismissButton, alertStyle = 'default', tint = 'gray', icon, title, children, className, onClickDismissButton, ...props }, ref) {
-    return (_jsxs("div", { ...props, ref: ref, className: classNames(className, 'dc-alert', {
+export function Alert({ shouldShowDismissButton, alertStyle = 'default', tint = 'gray', icon, title, children, className, onClickDismissButton, ...props }) {
+    return (_jsxs("div", { ...props, className: classNames(className, 'dc-alert', {
             [`dc-alert_style_${alertStyle}`]: alertStyle,
             [`dc-alert_tint_${tint}`]: tint,
             'dc-alert_has_icon': icon,
             'dc-alert_has_dismiss-button': shouldShowDismissButton,
         }), children: [icon ? _jsx("div", { className: "dc-alert__icon", children: icon }) : null, _jsxs("div", { className: "dc-alert__body", children: [title ? _jsx("h2", { className: "dc-alert__title", children: title }) : null, children] }), shouldShowDismissButton && (_jsx("button", { type: "button", className: "dc-alert__dismiss-button", onClick: onClickDismissButton, children: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }) }))] }));
-});
+}
+//# sourceMappingURL=alert.js.map

package/dist/components/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.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;AA6BpE,MAAM,UAAU,KAAK,CAAC,EACpB,uBAAuB,EACvB,UAAU,GAAG,SAAS,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,oBAAoB,EACpB,GAAG,KAAK,EACG;IACX,OAAO,CACL,kBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,EAAE;YAC3C,CAAC,kBAAkB,UAAU,EAAE,CAAC,EAAE,UAAU;YAC5C,CAAC,iBAAiB,IAAI,EAAE,CAAC,EAAE,IAAI;YAC/B,mBAAmB,EAAE,IAAI;YACzB,6BAA6B,EAAE,uBAAuB;SACvD,CAAC,aAED,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,gBAAgB,YAAE,IAAI,GAAO,CAAC,CAAC,CAAC,IAAI,EAC3D,eAAK,SAAS,EAAC,gBAAgB,aAC5B,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC3D,QAAQ,IACL,EACL,uBAAuB,IAAI,CAC1B,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,oBAAoB,YAE7B,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,GAAI,GAC7C,CACV,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/alert/index.js

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

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

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

package/dist/components/avatar/avatar.css

@@ -1,9 +1,9 @@
 .dc-avatar {
-  --dc-avatar-monogram-color: var(--dc-white);
-  --dc-avatar-silhouette-color: var(--dc-white);
-  --dc-avatar-bg-color-1: #94a3b8;
-  --dc-avatar-bg-color-2: #64748b;
-  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 2.5%);
+  --monogram-color: var(--dc-white);
+  --silhouette-color: var(--dc-white);
+  --background-color-1: #94a3b8;
+  --background-color-2: #64748b;
+  --border-color: rgb(var(--dc-black-rgb) / 2.5%);
 
   -webkit-user-select: none;
 
@@ -13,52 +13,52 @@
 }
 
 .dc-avatar_type_image {
-  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 10%);
+  --border-color: rgb(var(--dc-black-rgb) / 10%);
 }
 
 .dc-avatar_fill_pink {
-  --dc-avatar-bg-color-1: #fb7185;
-  --dc-avatar-bg-color-2: #f43f5e;
+  --background-color-1: #fb7185;
+  --background-color-2: #f43f5e;
 }
 
 .dc-avatar_fill_red {
-  --dc-avatar-bg-color-1: #f87171;
-  --dc-avatar-bg-color-2: #ef4444;
+  --background-color-1: #f87171;
+  --background-color-2: #ef4444;
 }
 
 .dc-avatar_fill_orange {
-  --dc-avatar-bg-color-1: #fb923c;
-  --dc-avatar-bg-color-2: #f97316;
+  --background-color-1: #fb923c;
+  --background-color-2: #f97316;
 }
 
 .dc-avatar_fill_yellow {
-  --dc-avatar-bg-color-1: #fbbf24;
-  --dc-avatar-bg-color-2: #f59e0b;
+  --background-color-1: #fbbf24;
+  --background-color-2: #f59e0b;
 }
 
 .dc-avatar_fill_green {
-  --dc-avatar-bg-color-1: #4ade80;
-  --dc-avatar-bg-color-2: #22c55e;
+  --background-color-1: #4ade80;
+  --background-color-2: #22c55e;
 }
 
 .dc-avatar_fill_teal {
-  --dc-avatar-bg-color-1: #2dd4bf;
-  --dc-avatar-bg-color-2: #14b8a6;
+  --background-color-1: #2dd4bf;
+  --background-color-2: #14b8a6;
 }
 
 .dc-avatar_fill_blue {
-  --dc-avatar-bg-color-1: #38bdf8;
-  --dc-avatar-bg-color-2: #0ea5e9;
+  --background-color-1: #38bdf8;
+  --background-color-2: #0ea5e9;
 }
 
 .dc-avatar_fill_indigo {
-  --dc-avatar-bg-color-1: #818cf8;
-  --dc-avatar-bg-color-2: #6366f1;
+  --background-color-1: #818cf8;
+  --background-color-2: #6366f1;
 }
 
 .dc-avatar_fill_violet {
-  --dc-avatar-bg-color-1: #c084fc;
-  --dc-avatar-bg-color-2: #a855f7;
+  --background-color-1: #c084fc;
+  --background-color-2: #a855f7;
 }
 
 .dc-avatar__monogram {
@@ -66,26 +66,26 @@
   font-size: 22px;
   font-weight: 600;
   letter-spacing: 0.025em;
-  fill: var(--dc-avatar-monogram-color);
+  fill: var(--monogram-color);
 }
 
 .dc-avatar__silhouette {
-  fill: var(--dc-avatar-silhouette-color);
+  fill: var(--silhouette-color);
 }
 
 .dc-avatar__border {
   fill: none;
-  stroke: var(--dc-avatar-border-color);
+  stroke: var(--border-color);
 }
 
 .dark .dc-avatar,
 .dark.dc-avatar {
-  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 2.5%);
+  --border-color: rgb(var(--dc-white-rgb) / 2.5%);
 
   color-scheme: dark;
 }
 
 .dark .dc-avatar_type_image,
 .dark.dc-avatar_type_image {
-  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 10%);
+  --border-color: rgb(var(--dc-white-rgb) / 10%);
 }

package/dist/components/avatar/avatar.d.ts

@@ -1,15 +1,15 @@
-import { ComponentPropsWithRef } from 'react';
-type AvatarHTMLProps = ComponentPropsWithRef<'svg'>;
-type AvatarBaseProps = Omit<AvatarHTMLProps, 'fill'>;
+import { type ComponentProps } from 'react';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarFill = 'gray' | 'pink' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'indigo' | 'violet';
-export type AvatarProps = {
+type AvatarHTMLProps = ComponentProps<'svg'>;
+type AvatarBaseProps = {
     square?: boolean;
     size?: AvatarSize;
     fill?: AvatarFill;
     src?: string;
     altText?: string;
     monogram?: string;
-} & AvatarBaseProps;
-export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+};
+export type AvatarProps = AvatarBaseProps & Omit<AvatarHTMLProps, keyof AvatarBaseProps>;
+export declare function Avatar({ square, size, fill, src, altText, monogram, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/avatar/avatar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from 'react';
+import { useId } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 const sizesInPixels = {
     xs: 24,
@@ -8,7 +8,7 @@ const sizesInPixels = {
     lg: 48,
     xl: 56,
 };
-export const Avatar = forwardRef(function Avatar({ square, size = 'md', fill = 'gray', src, altText, monogram, className, ...props }, ref) {
+export function Avatar({ square, size = 'md', fill = 'gray', src, altText, monogram, className, ...props }) {
     const id = useId();
     const titleId = altText ? `${id}avatar-title` : undefined;
     const maskId = `${id}avatar-mask`;
@@ -33,9 +33,10 @@ export const Avatar = forwardRef(function Avatar({ square, size = 'md', fill = '
     const maskElement = square
         ? _jsx("rect", { width: "56", height: "56", rx: "10", fill: "#fff" })
         : _jsx("circle", { r: "28", cx: "28", cy: "28", fill: "#fff" });
-    return (_jsxs("svg", { ref: ref, className: classNames(className, {
+    return (_jsxs("svg", { className: classNames(className, {
             'dc-avatar': true,
             [`dc-avatar_type_${type}`]: type,
             [`dc-avatar_fill_${fill}`]: fill,
-        }), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 56 56", width: sizePx, height: sizePx, role: "img", "aria-labelledby": titleId, ...props, children: [altText ? _jsx("title", { id: titleId, children: altText }) : null, _jsxs("defs", { children: [_jsx("mask", { id: maskId, children: maskElement }), _jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { stopColor: "var(--dc-avatar-bg-color-1)", offset: "0%" }), _jsx("stop", { stopColor: "var(--dc-avatar-bg-color-2)", offset: "100%" })] })] }), _jsxs("g", { mask: `url(#${maskId})`, children: [_jsx("rect", { fill: `url(#${gradientId})`, width: "56", height: "56" }), children, _jsx(maskElement.type, { ...maskElement.props, className: "dc-avatar__border", strokeWidth: "3" })] })] }));
-});
+        }), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 56 56", width: sizePx, height: sizePx, role: "img", "aria-labelledby": titleId, ...props, children: [altText ? _jsx("title", { id: titleId, children: altText }) : null, _jsxs("defs", { children: [_jsx("mask", { id: maskId, children: maskElement }), _jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { stopColor: "var(--background-color-1)", offset: "0%" }), _jsx("stop", { stopColor: "var(--background-color-2)", offset: "100%" })] })] }), _jsxs("g", { mask: `url(#${maskId})`, children: [_jsx("rect", { fill: `url(#${gradientId})`, width: "56", height: "56" }), children, _jsx(maskElement.type, { ...maskElement.props, className: "dc-avatar__border", strokeWidth: "3" })] })] }));
+}
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

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

package/dist/components/avatar/index.js

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

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

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

package/dist/components/badge/badge.css

@@ -1,20 +1,20 @@
 .dc-badge {
-  --dc-badge-height: 20px;
-  --dc-badge-text-color: var(--dc-primary-text-color);
-  --dc-badge-bg: var(--dc-bg-transparent-2);
+  --height: 20px;
+  --color: var(--dc-text-color-primary);
+  --background: var(--dc-background-color-2);
 
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  min-width: var(--dc-badge-height);
-  height: var(--dc-badge-height);
+  min-width: var(--height);
+  height: var(--height);
   padding: 0 6px;
   font: 12px/1 var(--dc-primary-font);
-  color: var(--dc-badge-text-color);
+  color: var(--color);
   color-scheme: light;
-  background: var(--dc-badge-bg);
-  border-radius: calc(var(--dc-badge-height) / 2);
+  background: var(--background);
+  border-radius: calc(var(--height) / 2);
 }
 
 .dc-badge_circle {

package/dist/components/badge/badge.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef } from 'react';
-type BadgeHTMLProps = ComponentPropsWithoutRef<'span'>;
-type BadgeBaseProps = Omit<BadgeHTMLProps, 'children'>;
-export type BadgeProps = {
+import { type ComponentProps } from 'react';
+type BadgeHTMLProps = ComponentProps<'span'>;
+type BadgeBaseProps = {
     children: number | string;
-} & BadgeBaseProps;
+};
+export type BadgeProps = BadgeBaseProps & Omit<BadgeHTMLProps, keyof BadgeBaseProps>;
 export declare function Badge({ className, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/badge/badge.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 export function Badge({ className, children, ...props }) {
     let isCircle;
@@ -16,3 +17,4 @@ export function Badge({ className, children, ...props }) {
             'dc-badge_circle': isCircle,
         }), children: children }));
 }
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAYxD,MAAM,UAAU,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACG;IACX,IAAI,QAAQ,CAAC;IACb,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,EAAE,EAAE,CAAC;QAClE,QAAQ,GAAG,IAAI,CAAC;IAClB,CAAC;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjE,QAAQ,GAAG,IAAI,CAAC;IAClB,CAAC;SAAM,CAAC;QACN,QAAQ,GAAG,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,OAAO,CACL,kBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,QAAQ;SAC5B,CAAC,YAED,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/components/badge/index.js

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

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

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

package/dist/components/breadcrumbs/breadcrumbs-context.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type BreadcrumbsContextValue = {
     separator: ReactNode;
 };

package/dist/components/breadcrumbs/breadcrumbs-context.js

@@ -11,3 +11,4 @@ export function useBreadcrumbsContext() {
 export function BreadcrumbsContextProvider(props) {
     return (_jsx(BreadcrumbsContext.Provider, { value: { separator: props.separator }, children: props.children }));
 }
+//# sourceMappingURL=breadcrumbs-context.js.map

package/dist/components/breadcrumbs/breadcrumbs-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-context.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIlE,MAAM,kBAAkB,GAAG,aAAa,CAAiC,IAAI,CAAC,CAAC;AAE/E,MAAM,UAAU,qBAAqB;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,uEAAuE,CACxE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,KAG1C;IACC,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAC/D,KAAK,CAAC,QAAQ,GACa,CAC/B,CAAC;AACJ,CAAC"}

package/dist/components/breadcrumbs/breadcrumbs-item.d.ts

@@ -1,12 +1,13 @@
-import { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
-type BreadcrumbsItemHTMLProps = ComponentPropsWithoutRef<'a'>;
-export type BreadcrumbsItemRenderFn = (props: {
+import { type ComponentProps, type JSX, type ReactNode } from 'react';
+export type BreadcrumbsItemRenderer = (props: {
     className: string;
     children: JSX.Element;
 }) => ReactNode;
-export type BreadcrumbsItemProps = {
+type BreadcrumbsItemHTMLProps = ComponentProps<'a'>;
+type BreadcrumbsItemBaseProps = {
     icon?: ReactNode;
-    renderAs?: BreadcrumbsItemRenderFn;
-} & BreadcrumbsItemHTMLProps;
+    renderAs?: BreadcrumbsItemRenderer;
+};
+export type BreadcrumbsItemProps = BreadcrumbsItemBaseProps & Omit<BreadcrumbsItemHTMLProps, keyof BreadcrumbsItemBaseProps>;
 export declare function BreadcrumbsItem({ className, icon, children, renderAs, ...props }: BreadcrumbsItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/breadcrumbs/breadcrumbs-item.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { useBreadcrumbsContext } from './breadcrumbs-context.js';
 export function BreadcrumbsItem({ className, icon, children, renderAs, ...props }) {
@@ -14,3 +15,4 @@ export function BreadcrumbsItem({ className, icon, children, renderAs, ...props
     }
     return (_jsxs("li", { className: "dc-breadcrumbs-item", children: [content, separator != null && (_jsx("div", { "aria-hidden": true, className: "dc-breadcrumbs-item__separator", children: separator }))] }));
 }
+//# sourceMappingURL=breadcrumbs-item.js.map

package/dist/components/breadcrumbs/breadcrumbs-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAkBjE,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACa;IACrB,MAAM,EAAE,SAAS,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE9C,SAAS,GAAG,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAC;IAC/D,QAAQ,GAAG,CACT,8BACG,IAAI,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,2BAA2B,YAAE,IAAI,GAAO,EACxE,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,IAC1D,CACJ,CAAC;IAEF,IAAI,OAAO,CAAC;IACZ,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,GAAG,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9C,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,eAAO,KAAK,EAAE,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAK,CAAC;IAC/D,CAAC;IAED,OAAO,CACL,cAAI,SAAS,EAAC,qBAAqB,aAChC,OAAO,EACP,SAAS,IAAI,IAAI,IAAI,CACpB,6BAAkB,IAAI,EAAE,SAAS,EAAC,gCAAgC,YAC/D,SAAS,GACN,CACP,IACE,CACN,CAAC;AACJ,CAAC"}

package/dist/components/breadcrumbs/breadcrumbs.css

@@ -1,8 +1,8 @@
 .dc-breadcrumbs {
-  --dc-breadcrumbs-text-color: var(--dc-secondary-text-color);
-  --dc-breadcrumbs-text-color-hover: var(--dc-primary-text-color);
-  --dc-breadcrumbs-text-color-active: var(--dc-primary-text-color);
-  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-500-rgb) / 50%);
+  --color: var(--dc-text-color-secondary);
+  --color-hover: var(--dc-text-color-primary);
+  --color-active: var(--dc-text-color-primary);
+  --delimiter-color: rgb(var(--dc-neutral-500-rgb) / 50%);
 
   color-scheme: light;
 }
@@ -13,7 +13,7 @@
   align-items: center;
   padding: 0;
   margin: 0;
-  color: var(--dc-breadcrumbs-text-color);
+  color: var(--color);
   list-style: none;
 }
 
@@ -34,7 +34,7 @@
 }
 
 .dc-breadcrumbs-item__link:hover {
-  color: var(--dc-breadcrumbs-text-color-hover);
+  color: var(--color-hover);
   text-decoration: underline;
   cursor: pointer;
 }
@@ -43,7 +43,7 @@
 .dc-breadcrumbs-item__link[aria-current="page"],
 .dc-breadcrumbs-item__link[aria-current="step"],
 .dc-breadcrumbs-item__link[aria-current="true"] {
-  color: var(--dc-breadcrumbs-text-color-active);
+  color: var(--color-active);
 }
 
 .dc-breadcrumbs-item__icon {
@@ -54,7 +54,7 @@
 .dc-breadcrumbs-item__separator {
   display: inline-flex;
   margin: 0 12px;
-  color: var(--dc-breadcrumbs-separator-color);
+  color: var(--delimiter-color);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -66,7 +66,7 @@
 
 .dark .dc-breadcrumbs,
 .dark.dc-breadcrumbs {
-  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-400-rgb) / 50%);
+  --delimiter-color: rgb(var(--dc-neutral-400-rgb) / 50%);
 
   color-scheme: dark;
 }

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-type BreadcrumbsHTMLProps = ComponentPropsWithoutRef<'nav'>;
-export type BreadcrumbsProps = {
+import { type ComponentProps, type ReactNode } from 'react';
+type BreadcrumbsHTMLProps = ComponentProps<'nav'>;
+type BreadcrumbsBaseProps = {
     separator?: ReactNode;
-} & BreadcrumbsHTMLProps;
+};
+export type BreadcrumbsProps = BreadcrumbsBaseProps & Omit<BreadcrumbsHTMLProps, keyof BreadcrumbsBaseProps>;
 export declare function Breadcrumbs({ separator, className, children, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { BreadcrumbsContextProvider } from './breadcrumbs-context.js';
 const defaultSeparator = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 18", width: 6, height: 18, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1, children: _jsx("line", { x1: 1, y1: 16, x2: 4, y2: 1 }) }));
 export function Breadcrumbs({ separator = defaultSeparator, className, children, ...props }) {
     return (_jsx(BreadcrumbsContextProvider, { separator: separator, children: _jsx("nav", { ...props, className: classNames('dc-breadcrumbs', className), children: _jsx("ol", { className: "dc-breadcrumbs__items", children: children }) }) }));
 }
+//# sourceMappingURL=breadcrumbs.js.map