@choco-vanille/ui 1.1.2 → 1.2.0

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.js

@@ -0,0 +1,8 @@
+/* empty css                                            */
+/* empty css                               */
+import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
+var i = { recipe: a({ defaultClassName: "_40ge150", variantClassNames: { orientation: { horizontal: "_40ge151", vertical: "_40ge152" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] }) };
+export {
+  i as TOGGLE_GROUP_STYLES
+};
+//# sourceMappingURL=ToggleGroup.css.js.map

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/actions/toggle-group/types/ToggleGroup.props.d.ts

@@ -0,0 +1,19 @@
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import type * as React from 'react';
+/**
+ * Coordinates the pressed state of a set of `ToggleGroup.Item` components.
+ *
+ * By default, one item can be pressed at a time. Set `multiple` to `true` to
+ * allow several values. Use `value` with `onValueChange` for controlled state,
+ * or `defaultValue` for uncontrolled state.
+ */
+export type ToggleGroupProps<Value extends string = string> = Omit<BaseToggleGroup.Props<Value>, 'className' | 'children' | 'orientation'> & {
+    /** Class applied to the group container. */
+    className?: string;
+    /** Toggle items rendered by the group. */
+    children?: React.ReactNode;
+    /** Arrow-key navigation direction. Defaults to `horizontal`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Ref forwarded to the group's `<div>` element. */
+    ref?: React.Ref<HTMLDivElement>;
+};

package/dist/components/actions/toggle-group/types/ToggleGroupCompound.d.ts

@@ -0,0 +1,6 @@
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { default as ToggleGroupItem } from '../components/toggle-group-item/ToggleGroupItem.tsx';
+export type ToggleGroupCompound = (typeof BaseToggleGroup) & {
+    displayName?: string;
+    Item: typeof ToggleGroupItem;
+};

package/dist/components/data-display/avatar/Avatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./components/avatar-fallback/AvatarFallback.cjs"),c=require("./components/avatar-image/AvatarImage.cjs"),n=require("./components/avatar-root/AvatarRoot.cjs"),i=require("./components/avatar-status/AvatarStatus.cjs"),R=require("./constants/avatarSizes.const.cjs"),I=require("react"),a=I.memo(({src:t,alt:l,initials:u,icon:m,size:r=R.AVATAR_SIZES.md,shape:A="circle",color:v="primary",status:o,statusLabel:q,statusSize:S,fallbackDelay:d,onLoadingStatusChange:j,className:b,ref:g,...x})=>{const y=!!t;return e.jsxs(n,{ref:g,size:r,shape:A,color:v,className:b,...x,children:[y&&e.jsx(c,{src:t,alt:l,onLoadingStatusChange:j}),e.jsx(s,{initials:u,icon:m,size:r,delay:d}),o&&e.jsx(i,{status:o,size:S??r,label:q})]})});a.displayName="Avatar";a.Root=n;a.Image=c;a.Fallback=s;a.Status=i;exports.Avatar=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./components/avatar-fallback/AvatarFallback.cjs"),c=require("./components/avatar-image/AvatarImage.cjs"),n=require("./components/avatar-root/AvatarRoot.cjs"),i=require("./components/avatar-status/AvatarStatus.cjs"),I=require("./constants/avatarSizes.const.cjs"),R=require("react"),a=R.memo(({src:t,alt:l,initials:u,icon:m,size:r=I.AVATAR_SIZES.md,shape:A="circle",color:v="primary",status:o,statusLabel:q,statusSize:S,fallbackDelay:d,onLoadingStatusChange:j,className:b,ref:g,...x})=>{const y=!!t;return e.jsxs(n,{ref:g,size:r,shape:A,color:v,className:b,...x,children:[y&&e.jsx(c,{src:t,alt:l,onLoadingStatusChange:j}),e.jsx(s,{initials:u,icon:m,size:r,delay:d}),o&&e.jsx(i,{status:o,size:S??r,label:q})]})});a.displayName="Avatar";a.Root=n;a.Image=c;a.Fallback=s;a.Status=i;exports.Avatar=a;
 //# sourceMappingURL=Avatar.cjs.map

package/dist/components/data-display/avatar/components/avatar-fallback/types/AvatarFallback.props.d.ts

@@ -1,6 +1,7 @@
 import { Avatar } from '@base-ui/react/avatar';
+import { HTMLAttributes } from 'react';
 import { AvatarSize } from '../../../types/Avatar.types.ts';
-export type AvatarFallbackProps = {
+export type AvatarFallbackProps = HTMLAttributes<HTMLSpanElement> & {
     /** Initials displayed when the image fails to load or is omitted. */
     initials?: string;
     /** Iconify icon name displayed as a fallback when no initials are provided. */
@@ -11,6 +12,4 @@ export type AvatarFallbackProps = {
     delay?: Avatar.Fallback.Props['delay'];
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the fallback element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/avatar-image/types/AvatarImage.props.d.ts

@@ -1,5 +1,6 @@
 import { Avatar } from '@base-ui/react/avatar';
-export type AvatarImageProps = {
+import { ImgHTMLAttributes } from 'react';
+export type AvatarImageProps = ImgHTMLAttributes<HTMLImageElement> & {
     /** The URL of the image to display. */
     src?: string;
     /** Accessible text description of the image. */
@@ -8,6 +9,4 @@ export type AvatarImageProps = {
     onLoadingStatusChange?: Avatar.Image.Props['onLoadingStatusChange'];
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the image element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/avatar-root/types/AvatarRoot.props.d.ts

@@ -1,8 +1,6 @@
 import { AvatarColor, AvatarShape, AvatarSize } from '../../../types/Avatar.types.ts';
 import type * as React from 'react';
-export type AvatarRootProps = {
-    /** Ref forwarded to the underlying `<span>` element. */
-    ref?: React.Ref<HTMLSpanElement>;
+export type AvatarRootProps = React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement> & {
     /** Size variant. Defaults to `md`. */
     size?: AvatarSize;
     /** Shape variant. Defaults to `circle`. */
@@ -17,8 +15,4 @@ export type AvatarRootProps = {
     role?: React.HTMLAttributes<HTMLSpanElement>['role'];
     /** Additional CSS class names. */
     className?: string;
-    /** Children (image, fallback, status). */
-    children?: React.ReactNode;
-    /** Native HTML attributes forwarded to the root element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/avatar-status/AvatarStatus.cjs

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),i=require("../../constants/avatarStatus.const.cjs"),o=require("./styles/AvatarStatus.css.cjs"),u=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const A=require("../../../../../utils/cn.cjs"),S=require("react"),t=S.memo(({status:e=i.AVATAR_STATUS.online,size:s,label:a,className:r,...c})=>n.jsx(u,{as:"span",className:A.cn(o.AVATAR_STATUS_STYLES.recipe({size:s,status:e}),r),"aria-label":a??e,role:"status",...c}));t.displayName="Avatar.Status";module.exports=t;
+"use strict";const n=require("react/jsx-runtime"),i=require("../../constants/avatarStatus.const.cjs"),o=require("./styles/AvatarStatus.css.cjs"),u=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const A=require("../../../../../utils/cn.cjs"),S=require("react"),t=S.memo(({status:e=i.AVATAR_STATUS.online,size:r,label:s,className:a,...c})=>n.jsx(u,{as:"span",className:A.cn(o.AVATAR_STATUS_STYLES.recipe({size:r,status:e}),a),"aria-label":s??e,role:"status",...c}));t.displayName="Avatar.Status";module.exports=t;
 //# sourceMappingURL=AvatarStatus.cjs.map

package/dist/components/data-display/avatar/components/avatar-status/index.d.ts

@@ -1,3 +1,2 @@
-export { default as AvatarStatus } from './AvatarStatus.tsx';
 export { AVATAR_STATUS_STYLES } from './styles/AvatarStatus.css.ts';
 export type { AvatarStatusProps } from './types/AvatarStatus.props.ts';

package/dist/components/data-display/avatar/components/avatar-status/types/AvatarStatus.props.d.ts

@@ -1,5 +1,6 @@
 import { AvatarSize, AvatarStatus as AvatarStatusType } from '../../../types/Avatar.types.ts';
-export type AvatarStatusProps = {
+import { HTMLAttributes } from 'react';
+export type AvatarStatusProps = HTMLAttributes<HTMLSpanElement> & {
     /** Status indicator variant. Defaults to `online`. */
     status?: AvatarStatusType;
     /** Size of the status indicator. Defaults to `md`. */
@@ -8,6 +9,4 @@ export type AvatarStatusProps = {
     label?: string;
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the status element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from './avatar-root';
 export * from './avatar-image';
 export * from './avatar-fallback';
-export * from './avatar-status';
+export type { AvatarStatusProps } from './avatar-status';

package/dist/components/data-display/avatar/constants/avatarStatus.const.d.ts

@@ -4,4 +4,4 @@ export declare const AVATAR_STATUS: {
     readonly busy: "busy";
     readonly away: "away";
 };
-export declare const AVATAR_STATUS_ARRAY: ("online" | "offline" | "busy" | "away")[];
+export declare const AVATAR_STATUS_ARRAY: ("offline" | "online" | "busy" | "away")[];

package/dist/components/data-display/avatar/types/Avatar.props.d.ts

@@ -1,9 +1,7 @@
 import { Avatar } from '@base-ui/react/avatar';
 import { AvatarColor, AvatarShape, AvatarSize, AvatarStatus } from './Avatar.types.ts';
 import type * as React from 'react';
-export type AvatarProps = {
-    /** Ref forwarded to the underlying `<span>` element. */
-    ref?: React.Ref<HTMLSpanElement>;
+export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement> & {
     /** The URL of the image to display. */
     src?: string;
     /** Accessible text description of the image. */
@@ -36,6 +34,4 @@ export type AvatarProps = {
     onLoadingStatusChange?: Avatar.Image.Props['onLoadingStatusChange'];
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the root element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/types/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { default as AvatarFallback } from '../components/avatar-fallback/AvatarFallback.tsx';
 import { default as AvatarImage } from '../components/avatar-image/AvatarImage.tsx';
 import { default as AvatarRoot } from '../components/avatar-root/AvatarRoot.tsx';
-import { default as AvatarStatus } from '../components/avatar-status/AvatarStatus.tsx';
+import { default as AvatarStatusComponent } from '../components/avatar-status/AvatarStatus.tsx';
 import { AvatarProps } from './Avatar.props.ts';
 export type { AvatarProps } from './Avatar.props.ts';
 export type { AvatarColor, AvatarShape, AvatarSize, AvatarStatus, } from './Avatar.types.ts';
@@ -10,5 +10,5 @@ export type AvatarCompound = FC<AvatarProps> & {
     Root: typeof AvatarRoot;
     Image: typeof AvatarImage;
     Fallback: typeof AvatarFallback;
-    Status: typeof AvatarStatus;
+    Status: typeof AvatarStatusComponent;
 };

package/dist/components/data-display/badge/Badge.cjs

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),d=require("./styles/Badge.css.cjs"),r=require("./constants/badgeSizes.const.cjs"),c=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const p=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const x=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const B=require("../../../utils/cn.cjs"),I=require("react"),o=I.memo(({label:t,variant:a,color:_,size:e="md",startIcon:i,endIcon:n,className:u,ref:q,display:E="inline-flex",borderRadius:S="sm",...m})=>s.jsxs(x,{as:"span",ref:q,display:E,borderRadius:S,className:B.cn(d.BADGE_STYLES.recipe({variant:a,color:_,size:e}),u),...m,children:[i&&s.jsx(c,{icon:i,size:r.BADGE_SIZE_TO_ICON_SIZE[e]}),s.jsx(p,{as:"span",variant:"span",fontSize:r.BADGE_SIZE_TO_FONT_SIZE[e],fontWeight:"medium",children:t}),n&&s.jsx(c,{icon:n,size:r.BADGE_SIZE_TO_ICON_SIZE[e]})]}));o.displayName="Badge";module.exports=o;
+"use strict";const r=require("react/jsx-runtime"),d=require("./styles/Badge.css.cjs"),s=require("./constants/badgeSizes.const.cjs"),c=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const p=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const x=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const B=require("../../../utils/cn.cjs"),I=require("react"),o=I.memo(({label:t,variant:a,color:_,size:e="md",startIcon:i,endIcon:n,className:u,ref:q,display:E="inline-flex",borderRadius:S="sm",...m})=>r.jsxs(x,{as:"span",ref:q,display:E,borderRadius:S,className:B.cn(d.BADGE_STYLES.recipe({variant:a,color:_,size:e}),u),...m,children:[i&&r.jsx(c,{icon:i,size:s.BADGE_SIZE_TO_ICON_SIZE[e]}),r.jsx(p,{as:"span",variant:"span",fontSize:s.BADGE_SIZE_TO_FONT_SIZE[e],fontWeight:"medium",children:t}),n&&r.jsx(c,{icon:n,size:s.BADGE_SIZE_TO_ICON_SIZE[e]})]}));o.displayName="Badge";module.exports=o;
 //# sourceMappingURL=Badge.cjs.map

package/dist/components/data-display/badge/constants/badgeVariants.const.d.ts

@@ -1,7 +1,7 @@
 export declare const BADGE_VARIANTS: {
-    readonly solid: "solid";
+    readonly contained: "contained";
     readonly subtle: "subtle";
-    readonly outline: "outline";
+    readonly outlined: "outlined";
     readonly outlinedSubtle: "outlinedSubtle";
 };
-export declare const BADGE_VARIANTS_ARRAY: ("outline" | "solid" | "subtle" | "outlinedSubtle")[];
+export declare const BADGE_VARIANTS_ARRAY: ("contained" | "subtle" | "outlined" | "outlinedSubtle")[];

package/dist/components/data-display/badge/styles/Badge.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                           */const r=require("@vanilla-extract/recipes/createRuntimeFn");var o={recipe:r.createRuntimeFn({defaultClassName:"mw901r0",variantClassNames:{size:{sm:"mw901r1",md:"mw901r2",lg:"mw901r3"},variant:{solid:"mw901r4",subtle:"mw901r5",outline:"mw901r6",outlinedSubtle:"mw901r7"},color:{primary:"mw901r8",secondary:"mw901r9",tertiary:"mw901ra",destructive:"mw901rb",success:"mw901rc",warning:"mw901rd",info:"mw901re",purple:"mw901rf",pink:"mw901rg",orange:"mw901rh",teal:"mw901ri",cyan:"mw901rj",indigo:"mw901rk"}},defaultVariants:{variant:"outlinedSubtle",color:"primary",size:"md"},compoundVariants:[[{variant:"solid",color:"primary"},"mw901rl"],[{variant:"solid",color:"secondary"},"mw901rm"],[{variant:"solid",color:"tertiary"},"mw901rn"],[{variant:"solid",color:"destructive"},"mw901ro"],[{variant:"solid",color:"success"},"mw901rp"],[{variant:"solid",color:"warning"},"mw901rq"],[{variant:"solid",color:"info"},"mw901rr"],[{variant:"solid",color:"purple"},"mw901rs"],[{variant:"solid",color:"pink"},"mw901rt"],[{variant:"solid",color:"orange"},"mw901ru"],[{variant:"solid",color:"teal"},"mw901rv"],[{variant:"solid",color:"cyan"},"mw901rw"],[{variant:"solid",color:"indigo"},"mw901rx"],[{variant:"subtle",color:"primary"},"mw901ry"],[{variant:"subtle",color:"secondary"},"mw901rz"],[{variant:"subtle",color:"tertiary"},"mw901r10"],[{variant:"subtle",color:"destructive"},"mw901r11"],[{variant:"subtle",color:"success"},"mw901r12"],[{variant:"subtle",color:"warning"},"mw901r13"],[{variant:"subtle",color:"info"},"mw901r14"],[{variant:"subtle",color:"purple"},"mw901r15"],[{variant:"subtle",color:"pink"},"mw901r16"],[{variant:"subtle",color:"orange"},"mw901r17"],[{variant:"subtle",color:"teal"},"mw901r18"],[{variant:"subtle",color:"cyan"},"mw901r19"],[{variant:"subtle",color:"indigo"},"mw901r1a"],[{variant:"outline",color:"primary"},"mw901r1b"],[{variant:"outline",color:"secondary"},"mw901r1c"],[{variant:"outline",color:"tertiary"},"mw901r1d"],[{variant:"outline",color:"destructive"},"mw901r1e"],[{variant:"outline",color:"success"},"mw901r1f"],[{variant:"outline",color:"warning"},"mw901r1g"],[{variant:"outline",color:"info"},"mw901r1h"],[{variant:"outline",color:"purple"},"mw901r1i"],[{variant:"outline",color:"pink"},"mw901r1j"],[{variant:"outline",color:"orange"},"mw901r1k"],[{variant:"outline",color:"teal"},"mw901r1l"],[{variant:"outline",color:"cyan"},"mw901r1m"],[{variant:"outline",color:"indigo"},"mw901r1n"],[{variant:"outlinedSubtle",color:"primary"},"mw901r1o"],[{variant:"outlinedSubtle",color:"secondary"},"mw901r1p"],[{variant:"outlinedSubtle",color:"tertiary"},"mw901r1q"],[{variant:"outlinedSubtle",color:"destructive"},"mw901r1r"],[{variant:"outlinedSubtle",color:"success"},"mw901r1s"],[{variant:"outlinedSubtle",color:"warning"},"mw901r1t"],[{variant:"outlinedSubtle",color:"info"},"mw901r1u"],[{variant:"outlinedSubtle",color:"purple"},"mw901r1v"],[{variant:"outlinedSubtle",color:"pink"},"mw901r1w"],[{variant:"outlinedSubtle",color:"orange"},"mw901r1x"],[{variant:"outlinedSubtle",color:"teal"},"mw901r1y"],[{variant:"outlinedSubtle",color:"cyan"},"mw901r1z"],[{variant:"outlinedSubtle",color:"indigo"},"mw901r20"]]})};exports.BADGE_STYLES=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                           */const r=require("@vanilla-extract/recipes/createRuntimeFn");var o={recipe:r.createRuntimeFn({defaultClassName:"mw901r0",variantClassNames:{size:{sm:"mw901r1",md:"mw901r2",lg:"mw901r3"},variant:{contained:"mw901r4",subtle:"mw901r5",outlined:"mw901r6",outlinedSubtle:"mw901r7"},color:{primary:"mw901r8",secondary:"mw901r9",tertiary:"mw901ra",destructive:"mw901rb",success:"mw901rc",warning:"mw901rd",info:"mw901re",purple:"mw901rf",pink:"mw901rg",orange:"mw901rh",teal:"mw901ri",cyan:"mw901rj",indigo:"mw901rk"}},defaultVariants:{variant:"outlinedSubtle",color:"primary",size:"md"},compoundVariants:[[{variant:"contained",color:"primary"},"mw901rl"],[{variant:"contained",color:"secondary"},"mw901rm"],[{variant:"contained",color:"tertiary"},"mw901rn"],[{variant:"contained",color:"destructive"},"mw901ro"],[{variant:"contained",color:"success"},"mw901rp"],[{variant:"contained",color:"warning"},"mw901rq"],[{variant:"contained",color:"info"},"mw901rr"],[{variant:"contained",color:"purple"},"mw901rs"],[{variant:"contained",color:"pink"},"mw901rt"],[{variant:"contained",color:"orange"},"mw901ru"],[{variant:"contained",color:"teal"},"mw901rv"],[{variant:"contained",color:"cyan"},"mw901rw"],[{variant:"contained",color:"indigo"},"mw901rx"],[{variant:"subtle",color:"primary"},"mw901ry"],[{variant:"subtle",color:"secondary"},"mw901rz"],[{variant:"subtle",color:"tertiary"},"mw901r10"],[{variant:"subtle",color:"destructive"},"mw901r11"],[{variant:"subtle",color:"success"},"mw901r12"],[{variant:"subtle",color:"warning"},"mw901r13"],[{variant:"subtle",color:"info"},"mw901r14"],[{variant:"subtle",color:"purple"},"mw901r15"],[{variant:"subtle",color:"pink"},"mw901r16"],[{variant:"subtle",color:"orange"},"mw901r17"],[{variant:"subtle",color:"teal"},"mw901r18"],[{variant:"subtle",color:"cyan"},"mw901r19"],[{variant:"subtle",color:"indigo"},"mw901r1a"],[{variant:"outlined",color:"primary"},"mw901r1b"],[{variant:"outlined",color:"secondary"},"mw901r1c"],[{variant:"outlined",color:"tertiary"},"mw901r1d"],[{variant:"outlined",color:"destructive"},"mw901r1e"],[{variant:"outlined",color:"success"},"mw901r1f"],[{variant:"outlined",color:"warning"},"mw901r1g"],[{variant:"outlined",color:"info"},"mw901r1h"],[{variant:"outlined",color:"purple"},"mw901r1i"],[{variant:"outlined",color:"pink"},"mw901r1j"],[{variant:"outlined",color:"orange"},"mw901r1k"],[{variant:"outlined",color:"teal"},"mw901r1l"],[{variant:"outlined",color:"cyan"},"mw901r1m"],[{variant:"outlined",color:"indigo"},"mw901r1n"],[{variant:"outlinedSubtle",color:"primary"},"mw901r1o"],[{variant:"outlinedSubtle",color:"secondary"},"mw901r1p"],[{variant:"outlinedSubtle",color:"tertiary"},"mw901r1q"],[{variant:"outlinedSubtle",color:"destructive"},"mw901r1r"],[{variant:"outlinedSubtle",color:"success"},"mw901r1s"],[{variant:"outlinedSubtle",color:"warning"},"mw901r1t"],[{variant:"outlinedSubtle",color:"info"},"mw901r1u"],[{variant:"outlinedSubtle",color:"purple"},"mw901r1v"],[{variant:"outlinedSubtle",color:"pink"},"mw901r1w"],[{variant:"outlinedSubtle",color:"orange"},"mw901r1x"],[{variant:"outlinedSubtle",color:"teal"},"mw901r1y"],[{variant:"outlinedSubtle",color:"cyan"},"mw901r1z"],[{variant:"outlinedSubtle",color:"indigo"},"mw901r20"]]})};exports.BADGE_STYLES=o;
 //# sourceMappingURL=Badge.css.cjs.map

package/dist/components/data-display/badge/styles/Badge.css.d.ts

@@ -25,9 +25,9 @@ export declare const BADGE_STYLES: {
             };
         };
         variant: {
-            solid: {};
+            contained: {};
             subtle: {};
-            outline: {
+            outlined: {
                 backgroundColor: "transparent";
             };
             outlinedSubtle: {};

package/dist/components/data-display/badge/styles/Badge.css.js

@@ -1,8 +1,8 @@
 /* empty css                                            */
 /* empty css                         */
 import { createRuntimeFn as r } from "@vanilla-extract/recipes/createRuntimeFn";
-var t = { recipe: r({ defaultClassName: "mw901r0", variantClassNames: { size: { sm: "mw901r1", md: "mw901r2", lg: "mw901r3" }, variant: { solid: "mw901r4", subtle: "mw901r5", outline: "mw901r6", outlinedSubtle: "mw901r7" }, color: { primary: "mw901r8", secondary: "mw901r9", tertiary: "mw901ra", destructive: "mw901rb", success: "mw901rc", warning: "mw901rd", info: "mw901re", purple: "mw901rf", pink: "mw901rg", orange: "mw901rh", teal: "mw901ri", cyan: "mw901rj", indigo: "mw901rk" } }, defaultVariants: { variant: "outlinedSubtle", color: "primary", size: "md" }, compoundVariants: [[{ variant: "solid", color: "primary" }, "mw901rl"], [{ variant: "solid", color: "secondary" }, "mw901rm"], [{ variant: "solid", color: "tertiary" }, "mw901rn"], [{ variant: "solid", color: "destructive" }, "mw901ro"], [{ variant: "solid", color: "success" }, "mw901rp"], [{ variant: "solid", color: "warning" }, "mw901rq"], [{ variant: "solid", color: "info" }, "mw901rr"], [{ variant: "solid", color: "purple" }, "mw901rs"], [{ variant: "solid", color: "pink" }, "mw901rt"], [{ variant: "solid", color: "orange" }, "mw901ru"], [{ variant: "solid", color: "teal" }, "mw901rv"], [{ variant: "solid", color: "cyan" }, "mw901rw"], [{ variant: "solid", color: "indigo" }, "mw901rx"], [{ variant: "subtle", color: "primary" }, "mw901ry"], [{ variant: "subtle", color: "secondary" }, "mw901rz"], [{ variant: "subtle", color: "tertiary" }, "mw901r10"], [{ variant: "subtle", color: "destructive" }, "mw901r11"], [{ variant: "subtle", color: "success" }, "mw901r12"], [{ variant: "subtle", color: "warning" }, "mw901r13"], [{ variant: "subtle", color: "info" }, "mw901r14"], [{ variant: "subtle", color: "purple" }, "mw901r15"], [{ variant: "subtle", color: "pink" }, "mw901r16"], [{ variant: "subtle", color: "orange" }, "mw901r17"], [{ variant: "subtle", color: "teal" }, "mw901r18"], [{ variant: "subtle", color: "cyan" }, "mw901r19"], [{ variant: "subtle", color: "indigo" }, "mw901r1a"], [{ variant: "outline", color: "primary" }, "mw901r1b"], [{ variant: "outline", color: "secondary" }, "mw901r1c"], [{ variant: "outline", color: "tertiary" }, "mw901r1d"], [{ variant: "outline", color: "destructive" }, "mw901r1e"], [{ variant: "outline", color: "success" }, "mw901r1f"], [{ variant: "outline", color: "warning" }, "mw901r1g"], [{ variant: "outline", color: "info" }, "mw901r1h"], [{ variant: "outline", color: "purple" }, "mw901r1i"], [{ variant: "outline", color: "pink" }, "mw901r1j"], [{ variant: "outline", color: "orange" }, "mw901r1k"], [{ variant: "outline", color: "teal" }, "mw901r1l"], [{ variant: "outline", color: "cyan" }, "mw901r1m"], [{ variant: "outline", color: "indigo" }, "mw901r1n"], [{ variant: "outlinedSubtle", color: "primary" }, "mw901r1o"], [{ variant: "outlinedSubtle", color: "secondary" }, "mw901r1p"], [{ variant: "outlinedSubtle", color: "tertiary" }, "mw901r1q"], [{ variant: "outlinedSubtle", color: "destructive" }, "mw901r1r"], [{ variant: "outlinedSubtle", color: "success" }, "mw901r1s"], [{ variant: "outlinedSubtle", color: "warning" }, "mw901r1t"], [{ variant: "outlinedSubtle", color: "info" }, "mw901r1u"], [{ variant: "outlinedSubtle", color: "purple" }, "mw901r1v"], [{ variant: "outlinedSubtle", color: "pink" }, "mw901r1w"], [{ variant: "outlinedSubtle", color: "orange" }, "mw901r1x"], [{ variant: "outlinedSubtle", color: "teal" }, "mw901r1y"], [{ variant: "outlinedSubtle", color: "cyan" }, "mw901r1z"], [{ variant: "outlinedSubtle", color: "indigo" }, "mw901r20"]] }) };
+var n = { recipe: r({ defaultClassName: "mw901r0", variantClassNames: { size: { sm: "mw901r1", md: "mw901r2", lg: "mw901r3" }, variant: { contained: "mw901r4", subtle: "mw901r5", outlined: "mw901r6", outlinedSubtle: "mw901r7" }, color: { primary: "mw901r8", secondary: "mw901r9", tertiary: "mw901ra", destructive: "mw901rb", success: "mw901rc", warning: "mw901rd", info: "mw901re", purple: "mw901rf", pink: "mw901rg", orange: "mw901rh", teal: "mw901ri", cyan: "mw901rj", indigo: "mw901rk" } }, defaultVariants: { variant: "outlinedSubtle", color: "primary", size: "md" }, compoundVariants: [[{ variant: "contained", color: "primary" }, "mw901rl"], [{ variant: "contained", color: "secondary" }, "mw901rm"], [{ variant: "contained", color: "tertiary" }, "mw901rn"], [{ variant: "contained", color: "destructive" }, "mw901ro"], [{ variant: "contained", color: "success" }, "mw901rp"], [{ variant: "contained", color: "warning" }, "mw901rq"], [{ variant: "contained", color: "info" }, "mw901rr"], [{ variant: "contained", color: "purple" }, "mw901rs"], [{ variant: "contained", color: "pink" }, "mw901rt"], [{ variant: "contained", color: "orange" }, "mw901ru"], [{ variant: "contained", color: "teal" }, "mw901rv"], [{ variant: "contained", color: "cyan" }, "mw901rw"], [{ variant: "contained", color: "indigo" }, "mw901rx"], [{ variant: "subtle", color: "primary" }, "mw901ry"], [{ variant: "subtle", color: "secondary" }, "mw901rz"], [{ variant: "subtle", color: "tertiary" }, "mw901r10"], [{ variant: "subtle", color: "destructive" }, "mw901r11"], [{ variant: "subtle", color: "success" }, "mw901r12"], [{ variant: "subtle", color: "warning" }, "mw901r13"], [{ variant: "subtle", color: "info" }, "mw901r14"], [{ variant: "subtle", color: "purple" }, "mw901r15"], [{ variant: "subtle", color: "pink" }, "mw901r16"], [{ variant: "subtle", color: "orange" }, "mw901r17"], [{ variant: "subtle", color: "teal" }, "mw901r18"], [{ variant: "subtle", color: "cyan" }, "mw901r19"], [{ variant: "subtle", color: "indigo" }, "mw901r1a"], [{ variant: "outlined", color: "primary" }, "mw901r1b"], [{ variant: "outlined", color: "secondary" }, "mw901r1c"], [{ variant: "outlined", color: "tertiary" }, "mw901r1d"], [{ variant: "outlined", color: "destructive" }, "mw901r1e"], [{ variant: "outlined", color: "success" }, "mw901r1f"], [{ variant: "outlined", color: "warning" }, "mw901r1g"], [{ variant: "outlined", color: "info" }, "mw901r1h"], [{ variant: "outlined", color: "purple" }, "mw901r1i"], [{ variant: "outlined", color: "pink" }, "mw901r1j"], [{ variant: "outlined", color: "orange" }, "mw901r1k"], [{ variant: "outlined", color: "teal" }, "mw901r1l"], [{ variant: "outlined", color: "cyan" }, "mw901r1m"], [{ variant: "outlined", color: "indigo" }, "mw901r1n"], [{ variant: "outlinedSubtle", color: "primary" }, "mw901r1o"], [{ variant: "outlinedSubtle", color: "secondary" }, "mw901r1p"], [{ variant: "outlinedSubtle", color: "tertiary" }, "mw901r1q"], [{ variant: "outlinedSubtle", color: "destructive" }, "mw901r1r"], [{ variant: "outlinedSubtle", color: "success" }, "mw901r1s"], [{ variant: "outlinedSubtle", color: "warning" }, "mw901r1t"], [{ variant: "outlinedSubtle", color: "info" }, "mw901r1u"], [{ variant: "outlinedSubtle", color: "purple" }, "mw901r1v"], [{ variant: "outlinedSubtle", color: "pink" }, "mw901r1w"], [{ variant: "outlinedSubtle", color: "orange" }, "mw901r1x"], [{ variant: "outlinedSubtle", color: "teal" }, "mw901r1y"], [{ variant: "outlinedSubtle", color: "cyan" }, "mw901r1z"], [{ variant: "outlinedSubtle", color: "indigo" }, "mw901r20"]] }) };
 export {
-  t as BADGE_STYLES
+  n as BADGE_STYLES
 };
 //# sourceMappingURL=Badge.css.js.map

package/dist/components/data-display/badge/styles/variants/{solid.d.ts → contained.d.ts}

@@ -1,5 +1,5 @@
 import { BadgeCompoundVariant } from './types';
 /**
- * Compound variants for the "solid" visual variant.
+ * Compound variants for the "contained" visual variant.
  */
 export declare const solidCompoundVariants: BadgeCompoundVariant[];

package/dist/components/data-display/badge/styles/variants/{outline.d.ts → outlined.d.ts}

@@ -1,5 +1,5 @@
 import { BadgeCompoundVariant } from './types';
 /**
- * Compound variants for the "outline" visual variant.
+ * Compound variants for the "outlined" visual variant.
  */
 export declare const outlineCompoundVariants: BadgeCompoundVariant[];

package/dist/components/data-display/badge/types/Badge.props.d.ts

@@ -6,7 +6,7 @@ export type BadgeProps = Omit<BoxProps, 'as' | 'children' | 'ref'> & {
     ref?: React.Ref<HTMLSpanElement>;
     /** The text content rendered inside the badge. */
     label: string;
-    /** Visual style variant. Defaults to `subtle`. */
+    /** Visual style variant. Defaults to `outlinedSubtle`. */
     variant?: BadgeVariant;
     /** Semantic color intent. Defaults to `primary`. */
     color?: BadgeColor;

package/dist/components/data-display/table/components/table-body/TableBody.cjs

@@ -1,2 +1,2 @@
-"use strict";const c=require("react/jsx-runtime"),r=require("react"),a=require("./styles/TableBody.css.cjs"),n=require("../../../../../utils/cn.cjs"),e=r.memo(({className:s,ref:o,...t})=>c.jsx("tbody",{ref:o,className:n.cn(a.TABLE_BODY_STYLES.root,s),...t}));e.displayName="Table.Body";module.exports=e;
+"use strict";const t=require("react/jsx-runtime"),c=require("react"),a=require("./styles/TableBody.css.cjs"),n=require("../../../../../utils/cn.cjs"),e=c.memo(({className:s,ref:o,...r})=>t.jsx("tbody",{ref:o,className:n.cn(a.TABLE_BODY_STYLES.root,s),...r}));e.displayName="Table.Body";module.exports=e;
 //# sourceMappingURL=TableBody.cjs.map

package/dist/components/data-display/table/components/table-caption/TableCaption.cjs

@@ -1,2 +1,2 @@
-"use strict";const a=require("react/jsx-runtime"),c=require("react"),n=require("./styles/TableCaption.css.cjs"),i=require("../../../../../utils/cn.cjs"),e=c.memo(({className:s,ref:t,...o})=>a.jsx("caption",{ref:t,className:i.cn(n.TABLE_CAPTION_STYLES.root,s),...o}));e.displayName="Table.Caption";module.exports=e;
+"use strict";const a=require("react/jsx-runtime"),c=require("react"),n=require("./styles/TableCaption.css.cjs"),r=require("../../../../../utils/cn.cjs"),e=c.memo(({className:s,ref:t,...o})=>a.jsx("caption",{ref:t,className:r.cn(n.TABLE_CAPTION_STYLES.root,s),...o}));e.displayName="Table.Caption";module.exports=e;
 //# sourceMappingURL=TableCaption.cjs.map

package/dist/components/data-display/table/components/table-cell/styles/TableCell.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TABLE_CELL_STYLES: {
     recipe: RuntimeFn<{
         align: {
@@ -26,4 +26,3 @@ export declare const TABLE_CELL_STYLES: {
      */
     numeric: string;
 };
-export type TableCellRecipeVariants = NonNullable<RecipeVariants<typeof TABLE_CELL_STYLES.recipe>>;

package/dist/components/data-display/table/components/table-cell/types/TableCell.props.d.ts

@@ -1,6 +1,7 @@
-import { TableCellRecipeVariants } from '../styles/TableCell.css.ts';
+import { TableCellAlign } from '../../../types/Table.types.ts';
 import type * as React from 'react';
-export type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement> & TableCellRecipeVariants & {
+export type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement> & {
+    align?: TableCellAlign;
     /**
      * Right-aligns the content and enables tabular number rendering.
      * Takes precedence over the `align` variant when both are set.

package/dist/components/data-display/table/components/table-col/TableCol.cjs

@@ -1,2 +1,2 @@
-"use strict";const a=require("react/jsx-runtime"),i=require("react"),e=i.memo(({width:s,minWidth:t,maxWidth:o,style:l,ref:c,...r})=>a.jsx("col",{ref:c,style:{width:s,minWidth:t,maxWidth:o,...l},...r}));e.displayName="Table.Col";module.exports=e;
+"use strict";const a=require("react/jsx-runtime"),i=require("react"),e=i.memo(({width:s,minWidth:t,maxWidth:o,style:l,ref:r,...c})=>a.jsx("col",{ref:r,style:{width:s,minWidth:t,maxWidth:o,...l},...c}));e.displayName="Table.Col";module.exports=e;
 //# sourceMappingURL=TableCol.cjs.map

package/dist/components/data-display/table/components/table-footer/TableFooter.cjs

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),a=require("./styles/TableFooter.css.cjs"),n=require("../../../../../utils/cn.cjs"),e=c.memo(({className:o,ref:t,...s})=>r.jsx("tfoot",{ref:t,className:n.cn(a.TABLE_FOOTER_STYLES.root,o),...s}));e.displayName="Table.Footer";module.exports=e;
+"use strict";const s=require("react/jsx-runtime"),c=require("react"),a=require("./styles/TableFooter.css.cjs"),n=require("../../../../../utils/cn.cjs"),e=c.memo(({className:o,ref:t,...r})=>s.jsx("tfoot",{ref:t,className:n.cn(a.TABLE_FOOTER_STYLES.root,o),...r}));e.displayName="Table.Footer";module.exports=e;
 //# sourceMappingURL=TableFooter.cjs.map

package/dist/components/data-display/table/components/table-head/styles/TableHead.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TABLE_HEAD_STYLES: {
     recipe: RuntimeFn<{
         align: {
@@ -22,4 +22,3 @@ export declare const TABLE_HEAD_STYLES: {
     /** Sort icon when a direction is active (`asc` or `desc`). */
     sortIconActive: string;
 };
-export type TableHeadRecipeVariants = NonNullable<RecipeVariants<typeof TABLE_HEAD_STYLES.recipe>>;

package/dist/components/data-display/table/components/table-head/types/TableHead.props.d.ts

@@ -1,7 +1,8 @@
-import { TableHeadRecipeVariants } from '../styles/TableHead.css.ts';
+import { TableCellAlign } from '../../../types/Table.types.ts';
 import type * as React from 'react';
 export type TableSortDirection = 'asc' | 'desc' | 'none';
-export type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement> & TableHeadRecipeVariants & {
+export type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement> & {
+    align?: TableCellAlign;
     /**
      * Renders the column header as interactive (cursor pointer + hover tint).
      * Wire up an `onClick` handler to implement sorting logic.

package/dist/components/data-display/table/components/table-header/TableHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),o=require("./styles/TableHeader.css.cjs"),n=require("../../../../../utils/cn.cjs"),e=c.memo(({className:s,ref:r,...a})=>t.jsx("thead",{ref:r,className:n.cn(o.TABLE_HEADER_STYLES.root,s),...a}));e.displayName="Table.Header";module.exports=e;
+"use strict";const t=require("react/jsx-runtime"),c=require("react"),o=require("./styles/TableHeader.css.cjs"),n=require("../../../../../utils/cn.cjs"),e=c.memo(({className:r,ref:s,...a})=>t.jsx("thead",{ref:s,className:n.cn(o.TABLE_HEADER_STYLES.root,r),...a}));e.displayName="Table.Header";module.exports=e;
 //# sourceMappingURL=TableHeader.cjs.map

package/dist/components/data-display/table/components/table-row/TableRow.cjs

@@ -1,2 +1,2 @@
-"use strict";const T=require("react/jsx-runtime"),n=require("react"),m=require("./styles/TableRow.css.cjs"),k=require("../../../../../utils/cn.cjs"),o=n.memo(({hoverable:s,selectable:r,selected:e,intent:i,className:c,ref:u,onKeyDown:a,...d})=>{const R=n.useCallback(t=>{r&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),t.currentTarget.click()),a?.(t)},[r,a]);return T.jsx("tr",{ref:u,"data-intent":i,"aria-selected":r?e??!1:void 0,tabIndex:r?0:void 0,onKeyDown:r||a?R:void 0,className:k.cn(m.TABLE_ROW_STYLES.recipe({hoverable:s,selectable:r,selected:e,intent:i}),c),...d})});o.displayName="Table.Row";module.exports=o;
+"use strict";const m=require("react/jsx-runtime"),n=require("react"),R=require("./styles/TableRow.css.cjs"),k=require("../../../../../utils/cn.cjs"),o=n.memo(({hoverable:s,selectable:r,selected:e,intent:i,className:c,ref:u,onKeyDown:a,...d})=>{const T=n.useCallback(t=>{r&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),t.currentTarget.click()),a?.(t)},[r,a]);return m.jsx("tr",{ref:u,"data-intent":i,"aria-selected":r?e??!1:void 0,tabIndex:r?0:void 0,onKeyDown:r||a?T:void 0,className:k.cn(R.TABLE_ROW_STYLES.recipe({hoverable:s,selectable:r,selected:e,intent:i}),c),...d})});o.displayName="Table.Row";module.exports=o;
 //# sourceMappingURL=TableRow.cjs.map

package/dist/components/data-display/table/components/table-row/styles/TableRow.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const TABLE_ROW_STYLES: {
     recipe: RuntimeFn<{
         hoverable: {
@@ -55,4 +55,3 @@ export declare const TABLE_ROW_STYLES: {
         };
     }>;
 };
-export type TableRowRecipeVariants = NonNullable<RecipeVariants<typeof TABLE_ROW_STYLES.recipe>>;

package/dist/components/data-display/table/components/table-row/types/TableRow.props.d.ts

@@ -1,3 +1,8 @@
-import { TableRowRecipeVariants } from '../styles/TableRow.css.ts';
+import { TableRowIntent } from '../../../types/Table.types.ts';
 import type * as React from 'react';
-export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement> & TableRowRecipeVariants;
+export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement> & {
+    hoverable?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    intent?: TableRowIntent;
+};

package/dist/components/data-display/table/index.d.ts

@@ -8,7 +8,7 @@ export { TABLE_HEAD_STYLES } from './components/table-head/styles/TableHead.css.
 export { TABLE_CELL_STYLES } from './components/table-cell/styles/TableCell.css.ts';
 export { TABLE_CAPTION_STYLES } from './components/table-caption/styles/TableCaption.css.ts';
 export type { TableProps } from './types/Table.props.ts';
-export type { TableSize, TableCellAlign } from './types/Table.types.ts';
+export type { TableSize, TableCellAlign, TableRowIntent, } from './types/Table.types.ts';
 export type { TableHeaderProps } from './components/table-header/types/TableHeader.props.ts';
 export type { TableBodyProps } from './components/table-body/types/TableBody.props.ts';
 export type { TableFooterProps } from './components/table-footer/types/TableFooter.props.ts';

package/dist/components/data-display/table/styles/Table.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 /**
  * CSS custom property seeded on <table>, inherited by every <th>/<td>
  * descendant — lets the `size` variant control cell density from one place.
@@ -38,5 +38,4 @@ export declare const TABLE_STYLES: {
         };
     }>;
 };
-export type TableRecipeVariants = NonNullable<RecipeVariants<typeof TABLE_STYLES.recipe>>;
 export {};

package/dist/components/data-display/table/types/Table.props.d.ts

@@ -1,6 +1,7 @@
-import { TableRecipeVariants } from '../styles/Table.css.ts';
+import { TableSize } from './Table.types.ts';
 import type * as React from 'react';
-export type TableProps = React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement> & TableRecipeVariants & {
+export type TableProps = React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement> & {
+    size?: TableSize;
     /** Applies an alternating background to even body rows. */
     striped?: boolean;
     /** Adds borders on all four sides of every header and data cell. */

package/dist/components/data-display/table/types/Table.types.d.ts

@@ -2,3 +2,5 @@
 export type TableSize = 'sm' | 'md' | 'lg';
 /** Text alignment for header and data cells. */
 export type TableCellAlign = 'left' | 'center' | 'right';
+/** Semantic background intent for table rows. */
+export type TableRowIntent = 'success' | 'warning' | 'destructive' | 'info';

package/dist/components/feedback/callout/Callout.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),j=require("react"),g=require("./context/Callout.context.cjs"),p=require("./styles/Callout.css.cjs"),u=require("./components/callout-description/CalloutDescription.cjs"),n=require("./components/callout-icon/CalloutIcon.cjs");;/* empty css                                                                */const a=require("./components/callout-title/CalloutTitle.cjs"),l=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const D=require("../../../utils/createIconChildUtils.cjs"),T=require("../../../utils/cn.cjs"),{hasIconChild:f,extractIconChild:L}=D.createIconChildUtils(n),t=j.memo(({variant:r="info",role:C="status",icon:d,title:s,description:i,children:o,className:x,ref:h,...m})=>{const q=!f(o),c=L(o),I=c.remaining;return e.jsx(g.CalloutContext.Provider,{value:{variant:r},children:e.jsxs(l,{ref:h,alignItems:"start",gap:"md",className:T.cn(p.CALLOUT_STYLES.recipe({variant:r}),x),role:C,...m,children:[q?e.jsx(n,{icon:d}):c.node,e.jsxs(l,{flexDirection:"column",alignItems:"start",gap:"xs",minWidth:0,children:[s&&e.jsx(a,{children:s}),i&&e.jsx(u,{children:i}),I]})]})})});t.displayName="Callout";t.Icon=n;t.Title=a;t.Description=u;module.exports=t;
+"use strict";const e=require("react/jsx-runtime"),j=require("react"),g=require("./context/Callout.context.cjs"),f=require("./styles/Callout.css.cjs"),u=require("./components/callout-description/CalloutDescription.cjs"),i=require("./components/callout-icon/CalloutIcon.cjs"),d=require("./components/callout-title/CalloutTitle.cjs"),a=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const D=require("../../../utils/createIconChildUtils.cjs"),T=require("../../../utils/cn.cjs"),{hasIconChild:v,extractIconChild:L}=D.createIconChildUtils(i),t=j.memo(n=>{const{variant:r="info",icon:C,title:s,description:c,children:o,className:h,ref:x,...m}=n,q="role"in n?n.role:"status",I=!v(o),l=L(o),p=l.remaining;return e.jsx(g.CalloutContext.Provider,{value:{variant:r},children:e.jsxs(a,{ref:x,alignItems:"start",gap:"md",className:T.cn(f.CALLOUT_STYLES.recipe({variant:r}),h),...m,role:q,children:[I?e.jsx(i,{icon:C}):l.node,e.jsxs(a,{flexDirection:"column",alignItems:"start",gap:"xs",minWidth:0,children:[s&&e.jsx(d,{children:s}),c&&e.jsx(u,{children:c}),p]})]})})});t.displayName="Callout";t.Icon=i;t.Title=d;t.Description=u;module.exports=t;
 //# sourceMappingURL=Callout.cjs.map

package/dist/components/feedback/callout/Callout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.cjs","sources":["../../../../src/components/feedback/callout/Callout.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { CalloutContext } from '@components/feedback/callout/context/Callout.context.ts'\r\nimport { CALLOUT_STYLES } from '@components/feedback/callout/styles/Callout.css.ts'\r\nimport { CalloutDescription } from '@components/feedback/callout/components/callout-description'\r\nimport { CalloutIcon } from '@components/feedback/callout/components/callout-icon'\r\nimport { CalloutTitle } from '@components/feedback/callout/components/callout-title'\r\nimport type { CalloutCompound } from '@components/feedback/callout/types'\r\nimport type { CalloutProps } from '@components/feedback/callout/types/Callout.props.ts'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { createIconChildUtils } from '@utils/createIconChildUtils.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\nconst { hasIconChild, extractIconChild } = createIconChildUtils(CalloutIcon)\r\n\r\nconst Callout = memo<CalloutProps>(({\r\n    variant = 'info',\r\n    role = 'status',\r\n    icon,\r\n    title,\r\n    description,\r\n    children,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const showDefaultIcon = !hasIconChild(children)\r\n    const iconChild = extractIconChild(children)\r\n    const remainingChildren = iconChild.remaining\r\n\r\n    return (\r\n        <CalloutContext.Provider value={{ variant }}>\r\n            <Flex\r\n                ref={ref}\r\n                alignItems={'start'}\r\n                gap={'md'}\r\n                className={cn(CALLOUT_STYLES.recipe({ variant }), className)}\r\n                role={role}\r\n                {...props}\r\n            >\r\n                {showDefaultIcon ? (\r\n                    <CalloutIcon icon={icon} />\r\n                ) : (\r\n                    iconChild.node\r\n                )}\r\n                <Flex\r\n                    flexDirection={'column'}\r\n                    alignItems={'start'}\r\n                    gap={'xs'}\r\n                    minWidth={0}\r\n                >\r\n                    {title && <CalloutTitle>{title}</CalloutTitle>}\r\n                    {description && (\r\n                        <CalloutDescription>{description}</CalloutDescription>\r\n                    )}\r\n                    {remainingChildren}\r\n                </Flex>\r\n            </Flex>\r\n        </CalloutContext.Provider>\r\n    )\r\n}) as unknown as CalloutCompound\r\n\r\nCallout.displayName = 'Callout'\r\nCallout.Icon = CalloutIcon\r\nCallout.Title = CalloutTitle\r\nCallout.Description = CalloutDescription\r\n\r\nexport default Callout\r\n"],"names":["hasIconChild","extractIconChild","createIconChildUtils","CalloutIcon","Callout","memo","variant","role","icon","title","description","children","className","ref","props","showDefaultIcon","iconChild","remainingChildren","CalloutContext","jsxs","Flex","cn","CALLOUT_STYLES","jsx","CalloutTitle","CalloutDescription"],"mappings":"ulBAaM,CAAE,aAAAA,EAAc,iBAAAC,GAAqBC,EAAAA,qBAAqBC,CAAW,EAErEC,EAAUC,EAAAA,KAAmB,CAAC,CAChC,QAAAC,EAAU,OACV,KAAAC,EAAO,SACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAkB,CAACf,EAAaW,CAAQ,EACxCK,EAAYf,EAAiBU,CAAQ,EACrCM,EAAoBD,EAAU,UAEpC,aACKE,EAAAA,eAAe,SAAf,CAAwB,MAAO,CAAE,QAAAZ,GAC9B,SAAAa,EAAAA,KAACC,EAAA,CACG,IAAAP,EACA,WAAY,QACZ,IAAK,KACL,UAAWQ,EAAAA,GAAGC,iBAAe,OAAO,CAAE,QAAAhB,CAAA,CAAS,EAAGM,CAAS,EAC3D,KAAAL,EACC,GAAGO,EAEH,SAAA,CAAAC,EACGQ,EAAAA,IAACpB,EAAA,CAAY,KAAAK,CAAA,CAAY,EAEzBQ,EAAU,KAEdG,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,WAAY,QACZ,IAAK,KACL,SAAU,EAET,SAAA,CAAAX,GAASc,EAAAA,IAACC,GAAc,SAAAf,CAAA,CAAM,EAC9BC,GACGa,EAAAA,IAACE,EAAA,CAAoB,SAAAf,CAAA,CAAY,EAEpCO,CAAA,CAAA,CAAA,CACL,CAAA,CAAA,EAER,CAER,CAAC,EAEDb,EAAQ,YAAc,UACtBA,EAAQ,KAAOD,EACfC,EAAQ,MAAQoB,EAChBpB,EAAQ,YAAcqB"}
+{"version":3,"file":"Callout.cjs","sources":["../../../../src/components/feedback/callout/Callout.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { CalloutContext } from '@components/feedback/callout/context/Callout.context.ts'\r\nimport { CALLOUT_STYLES } from '@components/feedback/callout/styles/Callout.css.ts'\r\nimport CalloutDescription from '@components/feedback/callout/components/callout-description/CalloutDescription.tsx'\r\nimport CalloutIcon from '@components/feedback/callout/components/callout-icon/CalloutIcon.tsx'\r\nimport CalloutTitle from '@components/feedback/callout/components/callout-title/CalloutTitle.tsx'\r\nimport type { CalloutCompound } from '@components/feedback/callout/types'\r\nimport type { CalloutProps } from '@components/feedback/callout/types/Callout.props.ts'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { createIconChildUtils } from '@utils/createIconChildUtils.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\nconst { hasIconChild, extractIconChild } = createIconChildUtils(CalloutIcon)\r\n\r\nconst Callout = memo<CalloutProps>((calloutProps) => {\r\n    const {\r\n        variant = 'info',\r\n        icon,\r\n        title,\r\n        description,\r\n        children,\r\n        className,\r\n        ref,\r\n        ...props\r\n    } = calloutProps\r\n    const role = 'role' in calloutProps ? calloutProps.role : 'status'\r\n\r\n    const showDefaultIcon = !hasIconChild(children)\r\n    const iconChild = extractIconChild(children)\r\n    const remainingChildren = iconChild.remaining\r\n\r\n    return (\r\n        <CalloutContext.Provider value={{ variant }}>\r\n            <Flex\r\n                ref={ref}\r\n                alignItems={'start'}\r\n                gap={'md'}\r\n                className={cn(CALLOUT_STYLES.recipe({ variant }), className)}\r\n                {...props}\r\n                role={role}\r\n            >\r\n                {showDefaultIcon ? (\r\n                    <CalloutIcon icon={icon} />\r\n                ) : (\r\n                    iconChild.node\r\n                )}\r\n                <Flex\r\n                    flexDirection={'column'}\r\n                    alignItems={'start'}\r\n                    gap={'xs'}\r\n                    minWidth={0}\r\n                >\r\n                    {title && <CalloutTitle>{title}</CalloutTitle>}\r\n                    {description && (\r\n                        <CalloutDescription>{description}</CalloutDescription>\r\n                    )}\r\n                    {remainingChildren}\r\n                </Flex>\r\n            </Flex>\r\n        </CalloutContext.Provider>\r\n    )\r\n}) as unknown as CalloutCompound\r\n\r\nCallout.displayName = 'Callout'\r\nCallout.Icon = CalloutIcon\r\nCallout.Title = CalloutTitle\r\nCallout.Description = CalloutDescription\r\n\r\nexport default Callout\r\n"],"names":["hasIconChild","extractIconChild","createIconChildUtils","CalloutIcon","Callout","memo","calloutProps","variant","icon","title","description","children","className","ref","props","role","showDefaultIcon","iconChild","remainingChildren","CalloutContext","jsxs","Flex","cn","CALLOUT_STYLES","jsx","CalloutTitle","CalloutDescription"],"mappings":"kgBAaM,CAAE,aAAAA,EAAc,iBAAAC,GAAqBC,EAAAA,qBAAqBC,CAAW,EAErEC,EAAUC,EAAAA,KAAoBC,GAAiB,CACjD,KAAM,CACF,QAAAC,EAAU,OACV,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,IAAAC,EACA,GAAGC,CAAA,EACHR,EACES,EAAO,SAAUT,EAAeA,EAAa,KAAO,SAEpDU,EAAkB,CAAChB,EAAaW,CAAQ,EACxCM,EAAYhB,EAAiBU,CAAQ,EACrCO,EAAoBD,EAAU,UAEpC,aACKE,EAAAA,eAAe,SAAf,CAAwB,MAAO,CAAE,QAAAZ,GAC9B,SAAAa,EAAAA,KAACC,EAAA,CACG,IAAAR,EACA,WAAY,QACZ,IAAK,KACL,UAAWS,EAAAA,GAAGC,iBAAe,OAAO,CAAE,QAAAhB,CAAA,CAAS,EAAGK,CAAS,EAC1D,GAAGE,EACJ,KAAAC,EAEC,SAAA,CAAAC,EACGQ,EAAAA,IAACrB,EAAA,CAAY,KAAAK,CAAA,CAAY,EAEzBS,EAAU,KAEdG,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,WAAY,QACZ,IAAK,KACL,SAAU,EAET,SAAA,CAAAZ,GAASe,EAAAA,IAACC,GAAc,SAAAhB,CAAA,CAAM,EAC9BC,GACGc,EAAAA,IAACE,EAAA,CAAoB,SAAAhB,CAAA,CAAY,EAEpCQ,CAAA,CAAA,CAAA,CACL,CAAA,CAAA,EAER,CAER,CAAC,EAEDd,EAAQ,YAAc,UACtBA,EAAQ,KAAOD,EACfC,EAAQ,MAAQqB,EAChBrB,EAAQ,YAAcsB"}

package/dist/components/feedback/callout/Callout.js

@@ -1,49 +1,47 @@
 import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { memo as g } from "react";
-import { CalloutContext as D } from "./context/Callout.context.js";
-import { CALLOUT_STYLES as T } from "./styles/Callout.css.js";
-import s from "./components/callout-description/CalloutDescription.js";
+import { memo as D } from "react";
+import { CalloutContext as T } from "./context/Callout.context.js";
+import { CALLOUT_STYLES as v } from "./styles/Callout.css.js";
+import p from "./components/callout-description/CalloutDescription.js";
 import r from "./components/callout-icon/CalloutIcon.js";
-/* empty css                                                              */
-import p from "./components/callout-title/CalloutTitle.js";
-import c from "../../layout/flex/Flex.js";
+import d from "./components/callout-title/CalloutTitle.js";
+import s from "../../layout/flex/Flex.js";
 import "../../layout/flex/styles/Flex.css.js";
 import { createIconChildUtils as L } from "../../../utils/createIconChildUtils.js";
-import { cn as j } from "../../../utils/cn.js";
-const { hasIconChild: N, extractIconChild: S } = L(r), t = g(({
-  variant: i = "info",
-  role: d = "status",
-  icon: f,
-  title: l,
-  description: m,
-  children: n,
-  className: C,
-  ref: h,
-  ...u
-}) => {
-  const x = !N(n), e = S(n), I = e.remaining;
-  return /* @__PURE__ */ o(D.Provider, { value: { variant: i }, children: /* @__PURE__ */ a(
-    c,
+import { cn as N } from "../../../utils/cn.js";
+const { hasIconChild: j, extractIconChild: S } = L(r), i = D((t) => {
+  const {
+    variant: e = "info",
+    icon: f,
+    title: n,
+    description: l,
+    children: m,
+    className: h,
+    ref: C,
+    ...u
+  } = t, x = "role" in t ? t.role : "status", I = !j(m), c = S(m), g = c.remaining;
+  return /* @__PURE__ */ o(T.Provider, { value: { variant: e }, children: /* @__PURE__ */ a(
+    s,
     {
-      ref: h,
+      ref: C,
       alignItems: "start",
       gap: "md",
-      className: j(T.recipe({ variant: i }), C),
-      role: d,
+      className: N(v.recipe({ variant: e }), h),
       ...u,
+      role: x,
       children: [
-        x ? /* @__PURE__ */ o(r, { icon: f }) : e.node,
+        I ? /* @__PURE__ */ o(r, { icon: f }) : c.node,
         /* @__PURE__ */ a(
-          c,
+          s,
           {
             flexDirection: "column",
             alignItems: "start",
             gap: "xs",
             minWidth: 0,
             children: [
+              n && /* @__PURE__ */ o(d, { children: n }),
               l && /* @__PURE__ */ o(p, { children: l }),
-              m && /* @__PURE__ */ o(s, { children: m }),
-              I
+              g
             ]
           }
         )
@@ -51,11 +49,11 @@ const { hasIconChild: N, extractIconChild: S } = L(r), t = g(({
     }
   ) });
 });
-t.displayName = "Callout";
-t.Icon = r;
-t.Title = p;
-t.Description = s;
+i.displayName = "Callout";
+i.Icon = r;
+i.Title = d;
+i.Description = p;
 export {
-  t as default
+  i as default
 };
 //# sourceMappingURL=Callout.js.map