@evolve.ui/core-components 1.0.0

package/cardFactory-B0Ah0Qb8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardFactory-B0Ah0Qb8.mjs","names":[],"sources":["../src/Card/types.ts","../src/Card/cardFactory.tsx"],"sourcesContent":["import { JSX, ReactNode } from 'react';\n\nexport type CardComponent<ExtraData> = {\n    /**\n     * Component that gets rendered. Automatically gets passed all values from the card data.\n     */\n    Component: (props: { key?: number } & ExtraData) => JSX.Element | null;\n    /**\n     * The skeleton size of the component.\n     *\n     * We are assuming the item card is `282px` wide.\n     *\n     * `inline` means that it will be tracked and spacing will be added accordingly.\n     *\n     * `absolute` means that it will not be tracked, so you just put a `rect` wherever you like.\n     */\n    skeletonConfig?:\n        | {\n              height?: number;\n              rx?: number;\n              ry?: number;\n              type: 'inline';\n              width?: number;\n          }\n        | {\n              node: ReactNode;\n              type: 'absolute';\n          };\n};\n\nexport type Spacer = {\n    spacerPx: number;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: the ExtraData generic is irrelevant to this Spacer type guard (only `spacerPx` is checked); `unknown` breaks callers via contravariance on CardComponent's Component param\nexport const isSpacer = (component: CardComponent<any> | Spacer): component is Spacer =>\n    (component as Spacer).spacerPx > 0;\n\nexport type CardSpec<ExtraData> = {\n    /**\n     * The styles for the container of the card.\n     */\n    className?: string;\n    /**\n     * The components that make up the card.\n     *\n     * If you need space between components, do not style the components,\n     * instead, add a number to the array, which will be interpreted as\n     * margin-bottom to the above component.\n     */\n    components: (CardComponent<ExtraData> | Spacer)[];\n    /**\n     * The name of the card.\n     *\n     * Needed for React for better dev experience.\n     */\n    name: string;\n    /**\n     * The height of the skeleton card, if for some reason, the computed one is incorrect.\n     */\n    overrideSkeletonHeightPx?: number;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useMemo } from 'react';\n\nimport { Skeleton } from '../Skeleton/Skeleton';\nimport { CardComponent, CardSpec, isSpacer } from './types';\n\nexport { type CardComponent, type CardSpec };\n\nexport type CreatedCard<CardData> = ReturnType<typeof cardFactory<CardData>>;\n\n/**\n * This function takes a `CardSpec` and returns a React component.\n *\n * This function should be called _once_ for each card spec.\n * You can export the result of this function and use it in your app later.\n */\nexport const cardFactory = <CardData,>(cardSpec: CardSpec<CardData>) => {\n    const { components: oldComponents, name } = cardSpec;\n\n    if (!oldComponents.length) {\n        throw new Error('Card must have at least one component');\n    }\n\n    let componentCount: number = 0;\n    const components: CardComponent<CardData>[] = [];\n    const spacing: number[] = new Array(oldComponents.length).fill(0);\n\n    let currentSkeletonOffset = 0;\n    const skeletonComponents: ReactNode[] = [];\n\n    for (const componentOrSpace of oldComponents) {\n        if (isSpacer(componentOrSpace)) {\n            if (componentCount === 0) {\n                throw new Error('Card cannot start with a spacer');\n            }\n\n            currentSkeletonOffset += componentOrSpace.spacerPx;\n            spacing[componentCount] += componentOrSpace.spacerPx;\n\n            continue;\n        }\n\n        const component = componentOrSpace;\n        components.push(component);\n\n        if (component.skeletonConfig) {\n            const skeletonConfig = component.skeletonConfig;\n            if (skeletonConfig.type === 'inline' && skeletonConfig.width && skeletonConfig.height) {\n                skeletonComponents.push(\n                    <rect\n                        height={skeletonConfig.height}\n                        key={componentCount}\n                        rx={skeletonConfig.rx ?? 4}\n                        ry={skeletonConfig.ry ?? 4}\n                        width={skeletonConfig.width}\n                        x=\"0\"\n                        y={currentSkeletonOffset}\n                    />\n                );\n\n                currentSkeletonOffset += skeletonConfig.height;\n            } else if (skeletonConfig.type === 'absolute') {\n                skeletonComponents.push(skeletonConfig.node);\n            }\n        }\n\n        componentCount++;\n    }\n\n    const Normal = ({\n        cardData,\n        className,\n        onCardClick,\n        visibilityRef,\n    }: {\n        cardData: CardData;\n        className?: string;\n        /** Optional click handler for the card */\n        onCardClick?: (cardData: CardData) => void;\n        /** Ref callback for visibility tracking */\n        visibilityRef?: (element: Element | null) => void;\n    }) => {\n        return (\n            <CardContainer\n                className={cn('group', cardSpec.className, className)}\n                // @ts-expect-error id is not part of the card data, but can be added by the caller\n                id={cardData?.id ?? undefined}\n                onClick={onCardClick ? () => onCardClick(cardData) : undefined}\n                spacing={spacing}\n                visibilityRef={visibilityRef}\n            >\n                {/* The components will never change, so using index here is ok. */}\n                {components.map((component, index) => (\n                    <component.Component\n                        {...cardData}\n                        key={index}\n                    />\n                ))}\n            </CardContainer>\n        );\n    };\n    Normal.displayName = name;\n    const CardSkeleton = ({ className }: { className?: string }) => {\n        return (\n            <CardContainer\n                className={cn(cardSpec.className, className)}\n                isSkeleton\n                spacing={spacing}\n            >\n                <Skeleton viewBox={`0 0 282 ${cardSpec.overrideSkeletonHeightPx ?? currentSkeletonOffset}`}>\n                    {skeletonComponents}\n                </Skeleton>\n            </CardContainer>\n        );\n    };\n    CardSkeleton.displayName = name + 'Skeleton';\n\n    const Card = {\n        Normal,\n        Skeleton: CardSkeleton,\n    };\n\n    return Card;\n};\n\ntype CardContainerProps = {\n    children: ReactNode;\n    className?: string;\n    isSkeleton?: boolean;\n    onClick?: () => void;\n    spacing: number[];\n    visibilityRef?: (element: Element | null) => void;\n};\n\nconst CardContainer = ({\n    children,\n    className,\n    isSkeleton,\n    onClick,\n    spacing,\n    visibilityRef,\n    ...props\n}: CardContainerProps) => {\n    const { styles } = useMemo(() => {\n        const styles = {} as { [key: string]: string };\n\n        spacing.forEach((space, i) => {\n            if (space !== 0) {\n                const key = `--card-spacing-${i}`;\n                styles[key] = `${space}px`;\n            }\n        });\n\n        return {\n            styles: styles as React.CSSProperties,\n        };\n    }, [spacing]);\n\n    const Container = isSkeleton ? 'div' : 'article';\n\n    return (\n        <Container\n            className={cn(\n                // Base spacing classes\n                'hui-item-card relative flex w-full flex-col',\n                className\n            )}\n            onClick={onClick}\n            ref={visibilityRef}\n            style={styles}\n            {...props}\n        >\n            {children}\n        </Container>\n    );\n};\n"],"mappings":";;;;;AAmCA,MAAa,YAAY,cACpB,UAAqB,WAAW;;;;;;;;;ACpBrC,MAAa,eAA0B,aAAiC;CACpE,MAAM,EAAE,YAAY,eAAe,SAAS;CAE5C,IAAI,CAAC,cAAc,QACf,MAAM,IAAI,MAAM,uCAAuC;CAG3D,IAAI,iBAAyB;CAC7B,MAAM,aAAwC,CAAC;CAC/C,MAAM,UAAoB,IAAI,MAAM,cAAc,MAAM,CAAC,CAAC,KAAK,CAAC;CAEhE,IAAI,wBAAwB;CAC5B,MAAM,qBAAkC,CAAC;CAEzC,KAAK,MAAM,oBAAoB,eAAe;EAC1C,IAAI,SAAS,gBAAgB,GAAG;GAC5B,IAAI,mBAAmB,GACnB,MAAM,IAAI,MAAM,iCAAiC;GAGrD,yBAAyB,iBAAiB;GAC1C,QAAQ,mBAAmB,iBAAiB;GAE5C;EACJ;EAEA,MAAM,YAAY;EAClB,WAAW,KAAK,SAAS;EAEzB,IAAI,UAAU,gBAAgB;GAC1B,MAAM,iBAAiB,UAAU;GACjC,IAAI,eAAe,SAAS,YAAY,eAAe,SAAS,eAAe,QAAQ;IACnF,mBAAmB,KACf,oBAAC,QAAD;KACI,QAAQ,eAAe;KAEvB,IAAI,eAAe,MAAM;KACzB,IAAI,eAAe,MAAM;KACzB,OAAO,eAAe;KACtB,GAAE;KACF,GAAG;IACN,GANQ,cAMR,CACL;IAEA,yBAAyB,eAAe;GAC5C,OAAO,IAAI,eAAe,SAAS,YAC/B,mBAAmB,KAAK,eAAe,IAAI;EAEnD;EAEA;CACJ;CAEA,MAAM,UAAU,EACZ,UACA,WACA,aACA,oBAQE;EACF,OACI,oBAAC,eAAD;GACI,WAAW,GAAG,SAAS,SAAS,WAAW,SAAS;GAEpD,IAAI,UAAU,MAAM,KAAA;GACpB,SAAS,oBAAoB,YAAY,QAAQ,IAAI,KAAA;GAC5C;GACM;aAGd,WAAW,KAAK,WAAW,UACxB,8BAAC,UAAU,WAAX;IACI,GAAI;IACJ,KAAK;GACR,CAAA,CACJ;EACU,CAAA;CAEvB;CACA,OAAO,cAAc;CACrB,MAAM,gBAAgB,EAAE,gBAAwC;EAC5D,OACI,oBAAC,eAAD;GACI,WAAW,GAAG,SAAS,WAAW,SAAS;GAC3C,YAAA;GACS;aAET,oBAAC,UAAD;IAAU,SAAS,WAAW,SAAS,4BAA4B;cAC9D;GACK,CAAA;EACC,CAAA;CAEvB;CACA,aAAa,cAAc,OAAO;CAOlC,OAAO;EAJH;EACA,UAAU;CAGJ;AACd;AAWA,MAAM,iBAAiB,EACnB,UACA,WACA,YACA,SACA,SACA,eACA,GAAG,YACmB;CACtB,MAAM,EAAE,WAAW,cAAc;EAC7B,MAAM,SAAS,CAAC;EAEhB,QAAQ,SAAS,OAAO,MAAM;GAC1B,IAAI,UAAU,GAAG;IACb,MAAM,MAAM,kBAAkB;IAC9B,OAAO,OAAO,GAAG,MAAM;GAC3B;EACJ,CAAC;EAED,OAAO,EACK,OACZ;CACJ,GAAG,CAAC,OAAO,CAAC;CAIZ,OACI,oBAHc,aAAa,QAAQ,WAGnC;EACI,WAAW,GAEP,+CACA,SACJ;EACS;EACT,KAAK;EACL,OAAO;EACP,GAAI;EAEH;CACM,CAAA;AAEnB"}

package/cardFactory-CEKTSSXs.d.cts

@@ -0,0 +1,37 @@
+import { n as CardSpec } from "./types-wcNSa96H.cjs";
+
+//#region src/Card/cardFactory.d.ts
+type CreatedCard<CardData> = ReturnType<typeof cardFactory<CardData>>;
+/**
+ * This function takes a `CardSpec` and returns a React component.
+ *
+ * This function should be called _once_ for each card spec.
+ * You can export the result of this function and use it in your app later.
+ */
+declare const cardFactory: <CardData>(cardSpec: CardSpec<CardData>) => {
+  Normal: {
+    ({
+      cardData,
+      className,
+      onCardClick,
+      visibilityRef
+    }: {
+      cardData: CardData;
+      className?: string; /** Optional click handler for the card */
+      onCardClick?: (cardData: CardData) => void; /** Ref callback for visibility tracking */
+      visibilityRef?: (element: Element | null) => void;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+  };
+  Skeleton: {
+    ({
+      className
+    }: {
+      className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+export { cardFactory as n, CreatedCard as t };
+//# sourceMappingURL=cardFactory-CEKTSSXs.d.cts.map

package/cardFactory-CEKTSSXs.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardFactory-CEKTSSXs.d.cts","names":[],"sources":["../src/Card/cardFactory.tsx"],"mappings":";;;KAQY,WAAA,aAAwB,UAAA,QAAkB,WAAA,CAAY,QAAA;AAAlE;;;;;;AAAA,cAQa,WAAA,aAA0B,QAAA,EAAU,QAAA,CAAS,QAAA;;;;;;;;MA2DlD,QAAA,EAAU,QAAA;MACV,SAAA,WApE0D;MAsE1D,WAAA,IAAe,QAAA,EAAU,QAAA,WAtEyC;MAwElE,aAAA,IAAiB,OAAA,EAAS,OAAA;IAAA,gCAC7B,GAAA,CAAA,OAAA;;;;;;;MAqBsC,SAAA;IAAA,gCAAoB,GAAA,CAAA,OAAA"}

package/cardFactory-DTU3jY-R.cjs

@@ -0,0 +1,107 @@
+const require_skeleton = require("./skeleton.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Card/types.ts
+const isSpacer = (component) => component.spacerPx > 0;
+//#endregion
+//#region src/Card/cardFactory.tsx
+/**
+* This function takes a `CardSpec` and returns a React component.
+*
+* This function should be called _once_ for each card spec.
+* You can export the result of this function and use it in your app later.
+*/
+const cardFactory = (cardSpec) => {
+	const { components: oldComponents, name } = cardSpec;
+	if (!oldComponents.length) throw new Error("Card must have at least one component");
+	let componentCount = 0;
+	const components = [];
+	const spacing = new Array(oldComponents.length).fill(0);
+	let currentSkeletonOffset = 0;
+	const skeletonComponents = [];
+	for (const componentOrSpace of oldComponents) {
+		if (isSpacer(componentOrSpace)) {
+			if (componentCount === 0) throw new Error("Card cannot start with a spacer");
+			currentSkeletonOffset += componentOrSpace.spacerPx;
+			spacing[componentCount] += componentOrSpace.spacerPx;
+			continue;
+		}
+		const component = componentOrSpace;
+		components.push(component);
+		if (component.skeletonConfig) {
+			const skeletonConfig = component.skeletonConfig;
+			if (skeletonConfig.type === "inline" && skeletonConfig.width && skeletonConfig.height) {
+				skeletonComponents.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					height: skeletonConfig.height,
+					rx: skeletonConfig.rx ?? 4,
+					ry: skeletonConfig.ry ?? 4,
+					width: skeletonConfig.width,
+					x: "0",
+					y: currentSkeletonOffset
+				}, componentCount));
+				currentSkeletonOffset += skeletonConfig.height;
+			} else if (skeletonConfig.type === "absolute") skeletonComponents.push(skeletonConfig.node);
+		}
+		componentCount++;
+	}
+	const Normal = ({ cardData, className, onCardClick, visibilityRef }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, {
+			className: (0, _evolve_ui_theme_system.cn)("group", cardSpec.className, className),
+			id: cardData?.id ?? void 0,
+			onClick: onCardClick ? () => onCardClick(cardData) : void 0,
+			spacing,
+			visibilityRef,
+			children: components.map((component, index) => /* @__PURE__ */ (0, react.createElement)(component.Component, {
+				...cardData,
+				key: index
+			}))
+		});
+	};
+	Normal.displayName = name;
+	const CardSkeleton = ({ className }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, {
+			className: (0, _evolve_ui_theme_system.cn)(cardSpec.className, className),
+			isSkeleton: true,
+			spacing,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_skeleton.Skeleton, {
+				viewBox: `0 0 282 ${cardSpec.overrideSkeletonHeightPx ?? currentSkeletonOffset}`,
+				children: skeletonComponents
+			})
+		});
+	};
+	CardSkeleton.displayName = name + "Skeleton";
+	return {
+		Normal,
+		Skeleton: CardSkeleton
+	};
+};
+const CardContainer = ({ children, className, isSkeleton, onClick, spacing, visibilityRef, ...props }) => {
+	const { styles } = (0, react.useMemo)(() => {
+		const styles = {};
+		spacing.forEach((space, i) => {
+			if (space !== 0) {
+				const key = `--card-spacing-${i}`;
+				styles[key] = `${space}px`;
+			}
+		});
+		return { styles };
+	}, [spacing]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(isSkeleton ? "div" : "article", {
+		className: (0, _evolve_ui_theme_system.cn)("hui-item-card relative flex w-full flex-col", className),
+		onClick,
+		ref: visibilityRef,
+		style: styles,
+		...props,
+		children
+	});
+};
+//#endregion
+Object.defineProperty(exports, "cardFactory", {
+	enumerable: true,
+	get: function() {
+		return cardFactory;
+	}
+});
+
+//# sourceMappingURL=cardFactory-DTU3jY-R.cjs.map

package/cardFactory-DTU3jY-R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardFactory-DTU3jY-R.cjs","names":["Skeleton"],"sources":["../src/Card/types.ts","../src/Card/cardFactory.tsx"],"sourcesContent":["import { JSX, ReactNode } from 'react';\n\nexport type CardComponent<ExtraData> = {\n    /**\n     * Component that gets rendered. Automatically gets passed all values from the card data.\n     */\n    Component: (props: { key?: number } & ExtraData) => JSX.Element | null;\n    /**\n     * The skeleton size of the component.\n     *\n     * We are assuming the item card is `282px` wide.\n     *\n     * `inline` means that it will be tracked and spacing will be added accordingly.\n     *\n     * `absolute` means that it will not be tracked, so you just put a `rect` wherever you like.\n     */\n    skeletonConfig?:\n        | {\n              height?: number;\n              rx?: number;\n              ry?: number;\n              type: 'inline';\n              width?: number;\n          }\n        | {\n              node: ReactNode;\n              type: 'absolute';\n          };\n};\n\nexport type Spacer = {\n    spacerPx: number;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: the ExtraData generic is irrelevant to this Spacer type guard (only `spacerPx` is checked); `unknown` breaks callers via contravariance on CardComponent's Component param\nexport const isSpacer = (component: CardComponent<any> | Spacer): component is Spacer =>\n    (component as Spacer).spacerPx > 0;\n\nexport type CardSpec<ExtraData> = {\n    /**\n     * The styles for the container of the card.\n     */\n    className?: string;\n    /**\n     * The components that make up the card.\n     *\n     * If you need space between components, do not style the components,\n     * instead, add a number to the array, which will be interpreted as\n     * margin-bottom to the above component.\n     */\n    components: (CardComponent<ExtraData> | Spacer)[];\n    /**\n     * The name of the card.\n     *\n     * Needed for React for better dev experience.\n     */\n    name: string;\n    /**\n     * The height of the skeleton card, if for some reason, the computed one is incorrect.\n     */\n    overrideSkeletonHeightPx?: number;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useMemo } from 'react';\n\nimport { Skeleton } from '../Skeleton/Skeleton';\nimport { CardComponent, CardSpec, isSpacer } from './types';\n\nexport { type CardComponent, type CardSpec };\n\nexport type CreatedCard<CardData> = ReturnType<typeof cardFactory<CardData>>;\n\n/**\n * This function takes a `CardSpec` and returns a React component.\n *\n * This function should be called _once_ for each card spec.\n * You can export the result of this function and use it in your app later.\n */\nexport const cardFactory = <CardData,>(cardSpec: CardSpec<CardData>) => {\n    const { components: oldComponents, name } = cardSpec;\n\n    if (!oldComponents.length) {\n        throw new Error('Card must have at least one component');\n    }\n\n    let componentCount: number = 0;\n    const components: CardComponent<CardData>[] = [];\n    const spacing: number[] = new Array(oldComponents.length).fill(0);\n\n    let currentSkeletonOffset = 0;\n    const skeletonComponents: ReactNode[] = [];\n\n    for (const componentOrSpace of oldComponents) {\n        if (isSpacer(componentOrSpace)) {\n            if (componentCount === 0) {\n                throw new Error('Card cannot start with a spacer');\n            }\n\n            currentSkeletonOffset += componentOrSpace.spacerPx;\n            spacing[componentCount] += componentOrSpace.spacerPx;\n\n            continue;\n        }\n\n        const component = componentOrSpace;\n        components.push(component);\n\n        if (component.skeletonConfig) {\n            const skeletonConfig = component.skeletonConfig;\n            if (skeletonConfig.type === 'inline' && skeletonConfig.width && skeletonConfig.height) {\n                skeletonComponents.push(\n                    <rect\n                        height={skeletonConfig.height}\n                        key={componentCount}\n                        rx={skeletonConfig.rx ?? 4}\n                        ry={skeletonConfig.ry ?? 4}\n                        width={skeletonConfig.width}\n                        x=\"0\"\n                        y={currentSkeletonOffset}\n                    />\n                );\n\n                currentSkeletonOffset += skeletonConfig.height;\n            } else if (skeletonConfig.type === 'absolute') {\n                skeletonComponents.push(skeletonConfig.node);\n            }\n        }\n\n        componentCount++;\n    }\n\n    const Normal = ({\n        cardData,\n        className,\n        onCardClick,\n        visibilityRef,\n    }: {\n        cardData: CardData;\n        className?: string;\n        /** Optional click handler for the card */\n        onCardClick?: (cardData: CardData) => void;\n        /** Ref callback for visibility tracking */\n        visibilityRef?: (element: Element | null) => void;\n    }) => {\n        return (\n            <CardContainer\n                className={cn('group', cardSpec.className, className)}\n                // @ts-expect-error id is not part of the card data, but can be added by the caller\n                id={cardData?.id ?? undefined}\n                onClick={onCardClick ? () => onCardClick(cardData) : undefined}\n                spacing={spacing}\n                visibilityRef={visibilityRef}\n            >\n                {/* The components will never change, so using index here is ok. */}\n                {components.map((component, index) => (\n                    <component.Component\n                        {...cardData}\n                        key={index}\n                    />\n                ))}\n            </CardContainer>\n        );\n    };\n    Normal.displayName = name;\n    const CardSkeleton = ({ className }: { className?: string }) => {\n        return (\n            <CardContainer\n                className={cn(cardSpec.className, className)}\n                isSkeleton\n                spacing={spacing}\n            >\n                <Skeleton viewBox={`0 0 282 ${cardSpec.overrideSkeletonHeightPx ?? currentSkeletonOffset}`}>\n                    {skeletonComponents}\n                </Skeleton>\n            </CardContainer>\n        );\n    };\n    CardSkeleton.displayName = name + 'Skeleton';\n\n    const Card = {\n        Normal,\n        Skeleton: CardSkeleton,\n    };\n\n    return Card;\n};\n\ntype CardContainerProps = {\n    children: ReactNode;\n    className?: string;\n    isSkeleton?: boolean;\n    onClick?: () => void;\n    spacing: number[];\n    visibilityRef?: (element: Element | null) => void;\n};\n\nconst CardContainer = ({\n    children,\n    className,\n    isSkeleton,\n    onClick,\n    spacing,\n    visibilityRef,\n    ...props\n}: CardContainerProps) => {\n    const { styles } = useMemo(() => {\n        const styles = {} as { [key: string]: string };\n\n        spacing.forEach((space, i) => {\n            if (space !== 0) {\n                const key = `--card-spacing-${i}`;\n                styles[key] = `${space}px`;\n            }\n        });\n\n        return {\n            styles: styles as React.CSSProperties,\n        };\n    }, [spacing]);\n\n    const Container = isSkeleton ? 'div' : 'article';\n\n    return (\n        <Container\n            className={cn(\n                // Base spacing classes\n                'hui-item-card relative flex w-full flex-col',\n                className\n            )}\n            onClick={onClick}\n            ref={visibilityRef}\n            style={styles}\n            {...props}\n        >\n            {children}\n        </Container>\n    );\n};\n"],"mappings":";;;;;AAmCA,MAAa,YAAY,cACpB,UAAqB,WAAW;;;;;;;;;ACpBrC,MAAa,eAA0B,aAAiC;CACpE,MAAM,EAAE,YAAY,eAAe,SAAS;CAE5C,IAAI,CAAC,cAAc,QACf,MAAM,IAAI,MAAM,uCAAuC;CAG3D,IAAI,iBAAyB;CAC7B,MAAM,aAAwC,CAAC;CAC/C,MAAM,UAAoB,IAAI,MAAM,cAAc,MAAM,CAAC,CAAC,KAAK,CAAC;CAEhE,IAAI,wBAAwB;CAC5B,MAAM,qBAAkC,CAAC;CAEzC,KAAK,MAAM,oBAAoB,eAAe;EAC1C,IAAI,SAAS,gBAAgB,GAAG;GAC5B,IAAI,mBAAmB,GACnB,MAAM,IAAI,MAAM,iCAAiC;GAGrD,yBAAyB,iBAAiB;GAC1C,QAAQ,mBAAmB,iBAAiB;GAE5C;EACJ;EAEA,MAAM,YAAY;EAClB,WAAW,KAAK,SAAS;EAEzB,IAAI,UAAU,gBAAgB;GAC1B,MAAM,iBAAiB,UAAU;GACjC,IAAI,eAAe,SAAS,YAAY,eAAe,SAAS,eAAe,QAAQ;IACnF,mBAAmB,KACf,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KACI,QAAQ,eAAe;KAEvB,IAAI,eAAe,MAAM;KACzB,IAAI,eAAe,MAAM;KACzB,OAAO,eAAe;KACtB,GAAE;KACF,GAAG;IACN,GANQ,cAMR,CACL;IAEA,yBAAyB,eAAe;GAC5C,OAAO,IAAI,eAAe,SAAS,YAC/B,mBAAmB,KAAK,eAAe,IAAI;EAEnD;EAEA;CACJ;CAEA,MAAM,UAAU,EACZ,UACA,WACA,aACA,oBAQE;EACF,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CAAc,SAAS,SAAS,WAAW,SAAS;GAEpD,IAAI,UAAU,MAAM,KAAA;GACpB,SAAS,oBAAoB,YAAY,QAAQ,IAAI,KAAA;GAC5C;GACM;aAGd,WAAW,KAAK,WAAW,UACxB,iBAAA,GAAA,MAAA,cAAA,CAAC,UAAU,WAAX;IACI,GAAI;IACJ,KAAK;GACR,CAAA,CACJ;EACU,CAAA;CAEvB;CACA,OAAO,cAAc;CACrB,MAAM,gBAAgB,EAAE,gBAAwC;EAC5D,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CAAc,SAAS,WAAW,SAAS;GAC3C,YAAA;GACS;aAET,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,UAAD;IAAU,SAAS,WAAW,SAAS,4BAA4B;cAC9D;GACK,CAAA;EACC,CAAA;CAEvB;CACA,aAAa,cAAc,OAAO;CAOlC,OAAO;EAJH;EACA,UAAU;CAGJ;AACd;AAWA,MAAM,iBAAiB,EACnB,UACA,WACA,YACA,SACA,SACA,eACA,GAAG,YACmB;CACtB,MAAM,EAAE,YAAA,GAAA,MAAA,QAAA,OAAyB;EAC7B,MAAM,SAAS,CAAC;EAEhB,QAAQ,SAAS,OAAO,MAAM;GAC1B,IAAI,UAAU,GAAG;IACb,MAAM,MAAM,kBAAkB;IAC9B,OAAO,OAAO,GAAG,MAAM;GAC3B;EACJ,CAAC;EAED,OAAO,EACK,OACZ;CACJ,GAAG,CAAC,OAAO,CAAC;CAIZ,OACI,iBAAA,GAAA,kBAAA,IAAA,CAHc,aAAa,QAAQ,WAGnC;EACI,YAAA,GAAA,wBAAA,GAAA,CAEI,+CACA,SACJ;EACS;EACT,KAAK;EACL,OAAO;EACP,GAAI;EAEH;CACM,CAAA;AAEnB"}

package/cardFactory-Z5a675Nr.d.mts

@@ -0,0 +1,37 @@
+import { n as CardSpec } from "./types-wcNSa96H.mjs";
+
+//#region src/Card/cardFactory.d.ts
+type CreatedCard<CardData> = ReturnType<typeof cardFactory<CardData>>;
+/**
+ * This function takes a `CardSpec` and returns a React component.
+ *
+ * This function should be called _once_ for each card spec.
+ * You can export the result of this function and use it in your app later.
+ */
+declare const cardFactory: <CardData>(cardSpec: CardSpec<CardData>) => {
+  Normal: {
+    ({
+      cardData,
+      className,
+      onCardClick,
+      visibilityRef
+    }: {
+      cardData: CardData;
+      className?: string; /** Optional click handler for the card */
+      onCardClick?: (cardData: CardData) => void; /** Ref callback for visibility tracking */
+      visibilityRef?: (element: Element | null) => void;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+  };
+  Skeleton: {
+    ({
+      className
+    }: {
+      className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+export { cardFactory as n, CreatedCard as t };
+//# sourceMappingURL=cardFactory-Z5a675Nr.d.mts.map

package/cardFactory-Z5a675Nr.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardFactory-Z5a675Nr.d.mts","names":[],"sources":["../src/Card/cardFactory.tsx"],"mappings":";;;KAQY,WAAA,aAAwB,UAAA,QAAkB,WAAA,CAAY,QAAA;AAAlE;;;;;;AAAA,cAQa,WAAA,aAA0B,QAAA,EAAU,QAAA,CAAS,QAAA;;;;;;;;MA2DlD,QAAA,EAAU,QAAA;MACV,SAAA,WApE0D;MAsE1D,WAAA,IAAe,QAAA,EAAU,QAAA,WAtEyC;MAwElE,aAAA,IAAiB,OAAA,EAAS,OAAA;IAAA,gCAC7B,GAAA,CAAA,OAAA;;;;;;;MAqBsC,SAAA;IAAA,gCAAoB,GAAA,CAAA,OAAA"}

package/carousel.cjs

@@ -0,0 +1,10 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Carousel = require("./Carousel-Du89BCCK.cjs");
+exports.CAROUSEL_CARD_GAP_MOBILE_NUM = require_Carousel.CAROUSEL_CARD_GAP_MOBILE_NUM;
+exports.CAROUSEL_CARD_GAP_NUM = require_Carousel.CAROUSEL_CARD_GAP_NUM;
+exports.Carousel = require_Carousel.Carousel;
+exports.CarouselGoToPageDirection = require_Carousel.CarouselGoToPageDirection;

package/carousel.d.cts

@@ -0,0 +1,2 @@
+import { a as CarouselGoToPageDirection, i as CarouselCard, n as CAROUSEL_CARD_GAP_MOBILE_NUM, o as CarouselGoToPageInfo, r as CAROUSEL_CARD_GAP_NUM, s as CarouselPageInfo, t as Carousel } from "./index-NeSBj5ci.cjs";
+export { CAROUSEL_CARD_GAP_MOBILE_NUM, CAROUSEL_CARD_GAP_NUM, Carousel, CarouselCard, CarouselGoToPageDirection, CarouselGoToPageInfo, CarouselPageInfo };

package/carousel.d.mts

@@ -0,0 +1,2 @@
+import { a as CarouselGoToPageDirection, i as CarouselCard, n as CAROUSEL_CARD_GAP_MOBILE_NUM, o as CarouselGoToPageInfo, r as CAROUSEL_CARD_GAP_NUM, s as CarouselPageInfo, t as Carousel } from "./index-NeSBj5ci.mjs";
+export { CAROUSEL_CARD_GAP_MOBILE_NUM, CAROUSEL_CARD_GAP_NUM, Carousel, CarouselCard, CarouselGoToPageDirection, CarouselGoToPageInfo, CarouselPageInfo };

package/carousel.mjs

@@ -0,0 +1,3 @@
+'use client';
+import { i as CarouselGoToPageDirection, n as CAROUSEL_CARD_GAP_MOBILE_NUM, r as CAROUSEL_CARD_GAP_NUM, t as Carousel } from "./Carousel-8CbTiwMk.mjs";
+export { CAROUSEL_CARD_GAP_MOBILE_NUM, CAROUSEL_CARD_GAP_NUM, Carousel, CarouselGoToPageDirection };

package/chipTypes-Bi0ZROty.d.cts

@@ -0,0 +1,109 @@
+import { ReactElement, ReactNode } from "react";
+
+//#region src/Chips/chipTypes.d.ts
+type ChipProps = {
+  /**
+   * The aria-haspopup attribute for the chip.
+   */
+  ['aria-haspopup']?: boolean;
+  /**
+   * The aria-label attribute for the chip.
+   */
+  ['aria-label']?: string;
+  /**
+   * The HTML element to render as. Defaults to 'button'.
+   * Use 'a' for link chips or 'button' for interactive chips.
+   */
+  as?: 'a' | 'button';
+  /**
+   * The content of the chip.
+   */
+  children: ReactNode;
+  /**
+   * Additional CSS classes to apply to the chip.
+   */
+  className?: string;
+  /**
+   * Whether the chip is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The number of filters in the chip.
+   */
+  filterCount?: number;
+  /**
+   * The href of the chip. Only applies when `as="a"`.
+   */
+  href?: string;
+  /**
+   * The id of the chip.
+   */
+  id?: string;
+  /**
+   * The onClick handler for the chip.
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /**
+   * The onClose handler for the filter chip.
+   */
+  onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /**
+   * Whether the chip is selected.
+   */
+  selected?: boolean;
+  /**
+   * The size of the chip.
+   */
+  size?: 'xs' | 'md';
+  /**
+   * The style of the chip.
+   */
+  style?: 'selectable' | 'input' | 'singleFilter' | 'allFilters' | 'suggestion';
+  /**
+   * The value of the chip.
+   */
+  value?: unknown;
+};
+type ChipGroupProps = {
+  /**
+   * These children should be a Chip component.
+   */
+  children: ReactElement<ChipProps> | ReactElement<ChipProps>[];
+  /**
+   * The type of the rendered chips. If the type is `link`, the chips will be rendered as `<a>`. If the type is `radio` or `checkbox`, the chips will be rendered as `<input type="radio">` or `<input type="checkbox">` (the text is a span next to the inputs).
+   */
+  chipType: 'link' | 'radio' | 'checkbox';
+  className?: string;
+  /**
+   * @default 'chip-group'
+   */
+  'data-testid'?: string;
+  /**
+   * How to interact with the rendered chip components. Returns both the just mutated chip and the entire state of the chip group.
+   */
+  onChange?: (changed: ChipState, state: TotalChipState) => void;
+} & ({
+  chipType: 'link'; /** `name` is only required when chipType is `'radio'` or `'checkbox'` */
+  name?: string;
+} | {
+  chipType: 'radio' | 'checkbox'; /** `name` is only required when chipType is `'radio'` or `'checkbox'` */
+  name: string;
+});
+type ChipState = {
+  /**
+   * The id of the chip
+   */
+  id: string;
+  /**
+   * Whether the chip is selected or not
+   */
+  selected: boolean;
+  /**
+   * The value of the chip, marked as unknown since there's no way to carry types.
+   */
+  value: unknown;
+};
+type TotalChipState = Record<string, ChipState>;
+//#endregion
+export { TotalChipState as i, ChipProps as n, ChipState as r, ChipGroupProps as t };
+//# sourceMappingURL=chipTypes-Bi0ZROty.d.cts.map

package/chipTypes-Bi0ZROty.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipTypes-Bi0ZROty.d.cts","names":[],"sources":["../src/Chips/chipTypes.ts"],"mappings":";;;KAEY,SAAA;;AAAZ;;GAIK,eAAA;EAaS;;;EAAA,CATT,YAAA;EAqCkC;;;;EAhCnC,EAAA;EATC;;;EAaD,QAAA,EAAU,SAAA;EAAA;;;EAIV,SAAA;EAYA;;;EARA,QAAA;EAgBwB;;;EAZxB,WAAA;EAgBA;;;EAZA,IAAA;EAYgD;;;EARhD,EAAA;EAoBA;;;EAhBA,OAAA,IAAW,KAAA,EAAO,KAAA,CAAM,UAAA,CAAW,WAAA,EAAa,UAAA;EAuBxC;;;EAnBR,OAAA,IAAW,KAAA,EAAO,KAAA,CAAM,UAAA,CAAW,WAAA,EAAa,UAAA;EAuBtC;;;EAnBV,QAAA;EAgCuC;;;EA5BvC,IAAA;EAeU;;;EAXV,KAAA;EAeA;;;EAXA,KAAA;AAAA;AAAA,KAGQ,cAAA;EAiB+B;;;EAbvC,QAAA,EAAU,YAAA,CAAa,SAAA,IAAa,YAAA,CAAa,SAAA;EAqB3C;;;EAjBN,QAAA;EACA,SAAA;EAsBiB;;;EAlBjB,aAAA;EA0BA;;;EAtBA,QAAA,IAAY,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,cAAA;AAAA;EAGjC,QAAA;EAEA,IAAA;AAAA;EAGA,QAAA;EAEA,IAAA;AAAA;AAAA,KAIE,SAAA;;;;EAIR,EAAA;;;;EAIA,QAAA;;;;EAIA,KAAA;AAAA;AAAA,KAGQ,cAAA,GAAiB,MAAM,SAAS,SAAA"}

package/chipTypes-Bi0ZROty.d.mts

@@ -0,0 +1,109 @@
+import { ReactElement, ReactNode } from "react";
+
+//#region src/Chips/chipTypes.d.ts
+type ChipProps = {
+  /**
+   * The aria-haspopup attribute for the chip.
+   */
+  ['aria-haspopup']?: boolean;
+  /**
+   * The aria-label attribute for the chip.
+   */
+  ['aria-label']?: string;
+  /**
+   * The HTML element to render as. Defaults to 'button'.
+   * Use 'a' for link chips or 'button' for interactive chips.
+   */
+  as?: 'a' | 'button';
+  /**
+   * The content of the chip.
+   */
+  children: ReactNode;
+  /**
+   * Additional CSS classes to apply to the chip.
+   */
+  className?: string;
+  /**
+   * Whether the chip is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The number of filters in the chip.
+   */
+  filterCount?: number;
+  /**
+   * The href of the chip. Only applies when `as="a"`.
+   */
+  href?: string;
+  /**
+   * The id of the chip.
+   */
+  id?: string;
+  /**
+   * The onClick handler for the chip.
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /**
+   * The onClose handler for the filter chip.
+   */
+  onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /**
+   * Whether the chip is selected.
+   */
+  selected?: boolean;
+  /**
+   * The size of the chip.
+   */
+  size?: 'xs' | 'md';
+  /**
+   * The style of the chip.
+   */
+  style?: 'selectable' | 'input' | 'singleFilter' | 'allFilters' | 'suggestion';
+  /**
+   * The value of the chip.
+   */
+  value?: unknown;
+};
+type ChipGroupProps = {
+  /**
+   * These children should be a Chip component.
+   */
+  children: ReactElement<ChipProps> | ReactElement<ChipProps>[];
+  /**
+   * The type of the rendered chips. If the type is `link`, the chips will be rendered as `<a>`. If the type is `radio` or `checkbox`, the chips will be rendered as `<input type="radio">` or `<input type="checkbox">` (the text is a span next to the inputs).
+   */
+  chipType: 'link' | 'radio' | 'checkbox';
+  className?: string;
+  /**
+   * @default 'chip-group'
+   */
+  'data-testid'?: string;
+  /**
+   * How to interact with the rendered chip components. Returns both the just mutated chip and the entire state of the chip group.
+   */
+  onChange?: (changed: ChipState, state: TotalChipState) => void;
+} & ({
+  chipType: 'link'; /** `name` is only required when chipType is `'radio'` or `'checkbox'` */
+  name?: string;
+} | {
+  chipType: 'radio' | 'checkbox'; /** `name` is only required when chipType is `'radio'` or `'checkbox'` */
+  name: string;
+});
+type ChipState = {
+  /**
+   * The id of the chip
+   */
+  id: string;
+  /**
+   * Whether the chip is selected or not
+   */
+  selected: boolean;
+  /**
+   * The value of the chip, marked as unknown since there's no way to carry types.
+   */
+  value: unknown;
+};
+type TotalChipState = Record<string, ChipState>;
+//#endregion
+export { TotalChipState as i, ChipProps as n, ChipState as r, ChipGroupProps as t };
+//# sourceMappingURL=chipTypes-Bi0ZROty.d.mts.map

package/chipTypes-Bi0ZROty.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipTypes-Bi0ZROty.d.mts","names":[],"sources":["../src/Chips/chipTypes.ts"],"mappings":";;;KAEY,SAAA;;AAAZ;;GAIK,eAAA;EAaS;;;EAAA,CATT,YAAA;EAqCkC;;;;EAhCnC,EAAA;EATC;;;EAaD,QAAA,EAAU,SAAA;EAAA;;;EAIV,SAAA;EAYA;;;EARA,QAAA;EAgBwB;;;EAZxB,WAAA;EAgBA;;;EAZA,IAAA;EAYgD;;;EARhD,EAAA;EAoBA;;;EAhBA,OAAA,IAAW,KAAA,EAAO,KAAA,CAAM,UAAA,CAAW,WAAA,EAAa,UAAA;EAuBxC;;;EAnBR,OAAA,IAAW,KAAA,EAAO,KAAA,CAAM,UAAA,CAAW,WAAA,EAAa,UAAA;EAuBtC;;;EAnBV,QAAA;EAgCuC;;;EA5BvC,IAAA;EAeU;;;EAXV,KAAA;EAeA;;;EAXA,KAAA;AAAA;AAAA,KAGQ,cAAA;EAiB+B;;;EAbvC,QAAA,EAAU,YAAA,CAAa,SAAA,IAAa,YAAA,CAAa,SAAA;EAqB3C;;;EAjBN,QAAA;EACA,SAAA;EAsBiB;;;EAlBjB,aAAA;EA0BA;;;EAtBA,QAAA,IAAY,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,cAAA;AAAA;EAGjC,QAAA;EAEA,IAAA;AAAA;EAGA,QAAA;EAEA,IAAA;AAAA;AAAA,KAIE,SAAA;;;;EAIR,EAAA;;;;EAIA,QAAA;;;;EAIA,KAAA;AAAA;AAAA,KAGQ,cAAA,GAAiB,MAAM,SAAS,SAAA"}

package/chips/chip.cjs

@@ -0,0 +1,102 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Icons = require("../Icons.cjs");
+const require_Typography_Text = require("../Typography/Text.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Chips/Chip.tsx
+/**
+* Chip component that can be used for filters, suggestions, or input selections
+* see Storybook for design-approved implementation examples
+* @param children - Content to display inside the chip
+* @param className - Additional CSS classes to apply
+* @param disabled - Whether the chip is disabled
+* @param filterCount - Number to display for filter count (only used with style="allFilters")
+* @param onClick - Click handler for the chip
+* @param onClose - Handler for when close button is clicked
+* @param selected - Whether the chip is in selected state
+* @param size - Size of the chip: "xs" | "md" (default: "md") - Note: x-small size is only used for input chips
+* @param style - Visual style: "suggestion" | "input" | "singleFilter" | "allFilters" | "selectable" (default: "suggestion")
+*/
+const Chip = ({ "aria-haspopup": ariaHasPopup, "aria-label": ariaLabel, as: Component = "button", children, className, disabled, filterCount, onClick, onClose, selected, size = "md", style = "suggestion", value, ...props }) => {
+	const realSize = style === "input" || style === "selectable" ? size : "md";
+	const showClose = Boolean((style === "input" || style === "singleFilter") && selected);
+	const showCaretDown = Boolean(style === "singleFilter" && !selected);
+	const baseClasses = (0, _evolve_ui_theme_system.cn)("group hui-text-body-secondary rounded-full border border-border-secondary px-sm py-[6px] text-text-primary", "transition-colors duration-200 ease-in-out", "cursor-pointer select-none whitespace-nowrap", "flex h-[34px] w-min items-center no-underline", "focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-focus-primary", {
+		"bg-background-primary hover:bg-background-hover active:bg-background-pressed": !disabled,
+		"border-border-selected text-primary-500 hover:bg-primary-50 hover:text-primary-700 active:bg-primary-100": selected && !disabled && style !== "allFilters",
+		"hui-text-caption h-md pl-[12px] pr-xs": realSize === "xs",
+		"pl-xs": style === "allFilters" && filterCount,
+		"pointer-events-none border-border-disabled bg-background-disabled text-text-disabled": disabled,
+		"pr-[12px]": showClose || showCaretDown
+	}, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		"aria-label": ariaLabel ?? (typeof children === "string" || typeof children === "number" ? `${children} filter` : void 0),
+		className: baseClasses,
+		"data-hui-id": "Chip",
+		...Component === "button" && { type: "button" },
+		...props,
+		...value !== void 0 && { value },
+		...!disabled && !showClose && { onClick: (event) => {
+			onClick?.(event);
+		} },
+		...disabled && { "aria-disabled": true },
+		...ariaHasPopup && { "aria-haspopup": ariaHasPopup },
+		...selected && { "aria-current": selected },
+		children: [
+			style === "selectable" && selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Check, {
+				className: "mr-2xs",
+				size: "xs"
+			}),
+			style === "allFilters" && Boolean(filterCount) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.LabelStrong, {
+				className: (0, _evolve_ui_theme_system.cn)("mr-xs inline-flex h-5 min-w-5 items-center justify-center rounded-lg bg-primary-500 px-[2px]", {
+					"bg-background-subdued text-text-disabled": disabled,
+					"group-hover:bg-primary-700 group-active:bg-primary-900": !disabled,
+					"hui-label-caption h-sm min-w-sm": realSize === "xs"
+				}),
+				color: "inverse",
+				children: filterCount
+			}),
+			children,
+			showCaretDown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CaretDown, {
+				className: "ml-2xs",
+				color: "inherit",
+				size: "xs"
+			}),
+			showClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...!disabled && onClose && { onClick: (event) => {
+					event.stopPropagation();
+					onClose(event);
+				} },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Close, {
+					"aria-label": `remove ${children} filter`,
+					className: "ml-2xs",
+					color: "inherit",
+					"data-testid": "remove-filter",
+					size: "xs"
+				})
+			}),
+			style === "allFilters" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...!disabled && onClick && { onClick: (event) => {
+					event.stopPropagation();
+					onClick(event);
+				} },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.SlidersHorizontal, {
+					"aria-label": "change filters",
+					className: "ml-2xs",
+					color: "inherit",
+					"data-testid": "filter-button",
+					size: "xs"
+				})
+			})
+		]
+	});
+};
+Chip.displayName = "Chip";
+//#endregion
+exports.Chip = Chip;
+
+//# sourceMappingURL=chip.cjs.map

package/chips/chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.cjs","names":["Check","LabelStrong","CaretDown","Close","SlidersHorizontal"],"sources":["../../src/Chips/Chip.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ComponentProps } from 'react';\n\nimport { CaretDown, Check, Close, SlidersHorizontal } from '../Icons';\nimport { LabelStrong } from '../Typography/Text/Text';\nimport { ChipProps } from './chipTypes';\n\n/**\n * Chip component that can be used for filters, suggestions, or input selections\n * see Storybook for design-approved implementation examples\n * @param children - Content to display inside the chip\n * @param className - Additional CSS classes to apply\n * @param disabled - Whether the chip is disabled\n * @param filterCount - Number to display for filter count (only used with style=\"allFilters\")\n * @param onClick - Click handler for the chip\n * @param onClose - Handler for when close button is clicked\n * @param selected - Whether the chip is in selected state\n * @param size - Size of the chip: \"xs\" | \"md\" (default: \"md\") - Note: x-small size is only used for input chips\n * @param style - Visual style: \"suggestion\" | \"input\" | \"singleFilter\" | \"allFilters\" | \"selectable\" (default: \"suggestion\")\n */\nexport const Chip = ({\n    'aria-haspopup': ariaHasPopup,\n    'aria-label': ariaLabel,\n    as: Component = 'button',\n    children,\n    className,\n    disabled,\n    filterCount,\n    onClick,\n    onClose,\n    selected,\n    size = 'md',\n    style = 'suggestion',\n    value,\n    ...props\n}: ChipProps) => {\n    // 'xs' size is only used for input and selectable chips\n    const realSize = style === 'input' || style === 'selectable' ? size : 'md';\n    const showClose = Boolean((style === 'input' || style === 'singleFilter') && selected);\n    const showCaretDown = Boolean(style === 'singleFilter' && !selected);\n\n    const baseClasses = cn(\n        'group hui-text-body-secondary rounded-full border border-border-secondary px-sm py-[6px] text-text-primary',\n        // TRANSITIONS: enable fade from background to background-hover\n        'transition-colors duration-200 ease-in-out',\n        'cursor-pointer select-none whitespace-nowrap',\n        'flex h-[34px] w-min items-center no-underline',\n        'focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-focus-primary',\n        {\n            'bg-background-primary hover:bg-background-hover active:bg-background-pressed': !disabled,\n            'border-border-selected text-primary-500 hover:bg-primary-50 hover:text-primary-700 active:bg-primary-100':\n                selected && !disabled && style !== 'allFilters',\n            'hui-text-caption h-md pl-[12px] pr-xs': realSize === 'xs',\n            'pl-xs': style === 'allFilters' && filterCount,\n            'pointer-events-none border-border-disabled bg-background-disabled text-text-disabled': disabled,\n            'pr-[12px]': showClose || showCaretDown,\n        },\n        className\n    );\n\n    return (\n        <Component\n            aria-label={\n                ariaLabel ??\n                (typeof children === 'string' || typeof children === 'number' ? `${children} filter` : undefined)\n            }\n            className={baseClasses}\n            data-hui-id=\"Chip\"\n            {...(Component === 'button' && { type: 'button' })}\n            {...props}\n            {...(value !== undefined && { value: value as ComponentProps<'button'>['value'] })}\n            {...(!disabled &&\n                !showClose && {\n                    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                        onClick?.(event);\n                    },\n                })}\n            {...(disabled && { 'aria-disabled': true })}\n            {...(ariaHasPopup && { 'aria-haspopup': ariaHasPopup })}\n            {...(selected && { 'aria-current': selected })}\n        >\n            {style === 'selectable' && selected && (\n                <Check\n                    className=\"mr-2xs\"\n                    size=\"xs\"\n                />\n            )}\n            {style === 'allFilters' && Boolean(filterCount) && (\n                <LabelStrong\n                    className={cn(\n                        'mr-xs inline-flex h-5 min-w-5 items-center justify-center rounded-lg bg-primary-500 px-[2px]',\n                        {\n                            'bg-background-subdued text-text-disabled': disabled,\n                            'group-hover:bg-primary-700 group-active:bg-primary-900': !disabled,\n                            'hui-label-caption h-sm min-w-sm': realSize === 'xs',\n                        }\n                    )}\n                    color=\"inverse\"\n                >\n                    {filterCount}\n                </LabelStrong>\n            )}\n            {children}\n            {showCaretDown && (\n                <CaretDown\n                    className=\"ml-2xs\"\n                    color=\"inherit\"\n                    size=\"xs\"\n                />\n            )}\n            {showClose && (\n                <span\n                    {...(!disabled &&\n                        onClose && {\n                            onClick: (event) => {\n                                event.stopPropagation();\n                                onClose(event);\n                            },\n                        })}\n                >\n                    <Close\n                        aria-label={`remove ${children} filter`}\n                        className=\"ml-2xs\"\n                        color=\"inherit\"\n                        data-testid=\"remove-filter\"\n                        size=\"xs\"\n                    />\n                </span>\n            )}\n            {style === 'allFilters' && (\n                <span\n                    {...(!disabled &&\n                        onClick && {\n                            onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                                event.stopPropagation();\n                                onClick(event);\n                            },\n                        })}\n                >\n                    <SlidersHorizontal\n                        aria-label=\"change filters\"\n                        className=\"ml-2xs\"\n                        color=\"inherit\"\n                        data-testid=\"filter-button\"\n                        size=\"xs\"\n                    />\n                </span>\n            )}\n        </Component>\n    );\n};\n\nChip.displayName = 'Chip';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,QAAQ,EACjB,iBAAiB,cACjB,cAAc,WACd,IAAI,YAAY,UAChB,UACA,WACA,UACA,aACA,SACA,SACA,UACA,OAAO,MACP,QAAQ,cACR,OACA,GAAG,YACU;CAEb,MAAM,WAAW,UAAU,WAAW,UAAU,eAAe,OAAO;CACtE,MAAM,YAAY,SAAS,UAAU,WAAW,UAAU,mBAAmB,QAAQ;CACrF,MAAM,gBAAgB,QAAQ,UAAU,kBAAkB,CAAC,QAAQ;CAEnE,MAAM,eAAA,GAAA,wBAAA,GAAA,CACF,8GAEA,8CACA,gDACA,iDACA,oHACA;EACI,gFAAgF,CAAC;EACjF,4GACI,YAAY,CAAC,YAAY,UAAU;EACvC,yCAAyC,aAAa;EACtD,SAAS,UAAU,gBAAgB;EACnC,wFAAwF;EACxF,aAAa,aAAa;CAC9B,GACA,SACJ;CAEA,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EACI,cACI,cACC,OAAO,aAAa,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,WAAW,KAAA;EAE3F,WAAW;EACX,eAAY;EACZ,GAAK,cAAc,YAAY,EAAE,MAAM,SAAS;EAChD,GAAI;EACJ,GAAK,UAAU,KAAA,KAAa,EAAS,MAA2C;EAChF,GAAK,CAAC,YACF,CAAC,aAAa,EACV,UAAU,UAAqD;GAC3D,UAAU,KAAK;EACnB,EACJ;EACJ,GAAK,YAAY,EAAE,iBAAiB,KAAK;EACzC,GAAK,gBAAgB,EAAE,iBAAiB,aAAa;EACrD,GAAK,YAAY,EAAE,gBAAgB,SAAS;YAlBhD;GAoBK,UAAU,gBAAgB,YACvB,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,OAAD;IACI,WAAU;IACV,MAAK;GACR,CAAA;GAEJ,UAAU,gBAAgB,QAAQ,WAAW,KAC1C,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,aAAD;IACI,YAAA,GAAA,wBAAA,GAAA,CACI,gGACA;KACI,4CAA4C;KAC5C,0DAA0D,CAAC;KAC3D,mCAAmC,aAAa;IACpD,CACJ;IACA,OAAM;cAEL;GACQ,CAAA;GAEhB;GACA,iBACG,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,WAAD;IACI,WAAU;IACV,OAAM;IACN,MAAK;GACR,CAAA;GAEJ,aACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACI,GAAK,CAAC,YACF,WAAW,EACP,UAAU,UAAU;KAChB,MAAM,gBAAgB;KACtB,QAAQ,KAAK;IACjB,EACJ;cAEJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;KACI,cAAY,UAAU,SAAS;KAC/B,WAAU;KACV,OAAM;KACN,eAAY;KACZ,MAAK;IACR,CAAA;GACC,CAAA;GAET,UAAU,gBACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACI,GAAK,CAAC,YACF,WAAW,EACP,UAAU,UAAqD;KAC3D,MAAM,gBAAgB;KACtB,QAAQ,KAAK;IACjB,EACJ;cAEJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,mBAAD;KACI,cAAW;KACX,WAAU;KACV,OAAM;KACN,eAAY;KACZ,MAAK;IACR,CAAA;GACC,CAAA;EAEH;;AAEnB;AAEA,KAAK,cAAc"}

package/chips/chip.d.cts

@@ -0,0 +1,2 @@
+import { t as Chip } from "../Chip-UMJoX3ST.cjs";
+export { Chip };

package/chips/chip.d.mts

@@ -0,0 +1,2 @@
+import { t as Chip } from "../Chip-giQtR8GC.mjs";
+export { Chip };