@coopdigital/react 1.12.0 → 1.13.0

package/dist/components/Fieldset/index.d.ts

@@ -1,4 +1,2 @@
-import Fieldset from "./Fieldset";
-export default Fieldset;
-export { Fieldset };
-export * from "./Fieldset";
+import { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps } from "./Fieldset.js";
+export { Fieldset, Fieldset as default, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps };

package/dist/components/Fieldset/index.js

@@ -0,0 +1,5 @@
+import { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend } from "./Fieldset.js";
+//#region src/components/Fieldset/index.ts
+var Fieldset_default = Fieldset;
+//#endregion
+export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Fieldset_default as default };

package/dist/components/Flourish/Flourish.d.ts

@@ -1,20 +1,21 @@
-import type { JSX, ReactNode, Ref, SVGProps } from "react";
-import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../types/colors";
-export interface FlourishProps extends SVGProps<SVGSVGElement> {
-    /** Specify the text to be highlighted by the Flourish. */
-    children: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify the Flourish color. */
-    fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<SVGSVGElement>;
+import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../types/colors.js";
+import { JSX, ReactNode, Ref, SVGProps } from "react";
+//#region src/components/Flourish/Flourish.d.ts
+interface FlourishProps extends SVGProps<SVGSVGElement> {
+  /** Specify the text to be highlighted by the Flourish. */
+  children: string | ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify the Flourish color. */
+  fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<SVGSVGElement>;
 }
 declare const Flourish: {
-    ({ children, className, fill, ref, ...props }: FlourishProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ children, className, fill, ref, ...props }: FlourishProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Flourish;
-export { Flourish };
+//#endregion
+export { Flourish, Flourish as default, FlourishProps };

package/dist/components/Flourish/Flourish.js

@@ -1,14 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Flourish/Flourish.tsx
 const Flourish = ({ children, className, fill = "brand-blue", ref, ...props }) => {
-    const componentProps = {
-        className: clsx("coop-flourish ", className),
-        fill: `var(--color-${fill})`,
-        ...props,
-    };
-    return (jsxs("span", { style: { position: "relative" }, children: [children, jsx("svg", { ...componentProps, ref: ref, viewBox: "0 0 276 10", children: jsx("path", { d: "M275.9 8.6c.1-1.6.2-1.8-.4-2.9.3-1-.3-1.2-1.8-1.1v-.3c.6-.4.2-.2 1.4-.1-.9-2.3-5.6-1.8-8.5-2.3C259 .5 246.3.7 237.4.5L185 .4l-33-.2-26.1-.2-67.4 1.2-44.3.5C10.7 2.1 1.5.4 0 3.3l1 .2L0 4v.5C8.2 7.9 26.6 7.2 35.6 7c5 0 13.5 1.6 16.5-.6C53.4 8 59.5 8 62 7.7l45 .1 42.8.3 30.7.3 44.2.6 27.8-.5 23 .8c.1-.8-.3-.5.5-.7ZM219 2.8v-.2l.8-.2h.4l.3.4H219Zm30-.1h1.2c-.8.4-.5.3-1.2 0Zm6.2.6.2-.4h.3l-.5.4Z" }) })] }));
+	return /* @__PURE__ */ jsxs("span", {
+		style: { position: "relative" },
+		children: [children, /* @__PURE__ */ jsx("svg", {
+			className: clsx("coop-flourish ", className),
+			fill: `var(--color-${fill})`,
+			...props,
+			ref,
+			viewBox: "0 0 276 10",
+			children: /* @__PURE__ */ jsx("path", { d: "M275.9 8.6c.1-1.6.2-1.8-.4-2.9.3-1-.3-1.2-1.8-1.1v-.3c.6-.4.2-.2 1.4-.1-.9-2.3-5.6-1.8-8.5-2.3C259 .5 246.3.7 237.4.5L185 .4l-33-.2-26.1-.2-67.4 1.2-44.3.5C10.7 2.1 1.5.4 0 3.3l1 .2L0 4v.5C8.2 7.9 26.6 7.2 35.6 7c5 0 13.5 1.6 16.5-.6C53.4 8 59.5 8 62 7.7l45 .1 42.8.3 30.7.3 44.2.6 27.8-.5 23 .8c.1-.8-.3-.5.5-.7ZM219 2.8v-.2l.8-.2h.4l.3.4H219Zm30-.1h1.2c-.8.4-.5.3-1.2 0Zm6.2.6.2-.4h.3l-.5.4Z" })
+		})]
+	});
 };
 Flourish.slot = { name: "Flourish" };
-
+//#endregion
 export { Flourish, Flourish as default };

package/dist/components/Flourish/index.d.ts

@@ -1,4 +1,2 @@
-import Flourish from "./Flourish";
-export default Flourish;
-export { Flourish };
-export * from "./Flourish";
+import { Flourish, FlourishProps } from "./Flourish.js";
+export { Flourish, Flourish as default, FlourishProps };

package/dist/components/Flourish/index.js

@@ -0,0 +1,5 @@
+import { Flourish } from "./Flourish.js";
+//#region src/components/Flourish/index.ts
+var Flourish_default = Flourish;
+//#endregion
+export { Flourish, Flourish_default as default };

package/dist/components/Form/Form.d.ts

@@ -1,17 +1,18 @@
-import type { FormHTMLAttributes, JSX, ReactNode, Ref } from "react";
-export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
-    /** **(Optional)** Main content inside the form. This will usually be a collection of Field, Fieldset and Button components. */
-    children?: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLFormElement>;
+import { FormHTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Form/Form.d.ts
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  /** **(Optional)** Main content inside the form. This will usually be a collection of Field, Fieldset and Button components. */
+  children?: string | ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLFormElement>;
 }
 declare const Form: {
-    ({ children, className, ref, ...props }: FormProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ children, className, ref, ...props }: FormProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Form;
-export { Form };
+//#endregion
+export { Form, Form as default, FormProps };

package/dist/components/Form/Form.js

@@ -1,13 +1,14 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Form/Form.tsx
 const Form = ({ children, className, ref, ...props }) => {
-    const componentProps = {
-        className: clsx("coop-form ", className),
-        ...props,
-    };
-    return (jsx("form", { ...componentProps, ref: ref, children: children }));
+	return /* @__PURE__ */ jsx("form", {
+		className: clsx("coop-form ", className),
+		...props,
+		ref,
+		children
+	});
 };
 Form.slot = { name: "Form" };
-
+//#endregion
 export { Form, Form as default };

package/dist/components/Form/index.d.ts

@@ -1,4 +1,2 @@
-import Form from "./Form";
-export default Form;
-export { Form };
-export * from "./Form";
+import { Form, FormProps } from "./Form.js";
+export { Form, Form as default, FormProps };

package/dist/components/Form/index.js

@@ -0,0 +1,5 @@
+import { Form } from "./Form.js";
+//#region src/components/Form/index.ts
+var Form_default = Form;
+//#endregion
+export { Form, Form_default as default };

package/dist/components/Image/Image.d.ts

@@ -1,23 +1,24 @@
-import type { HTMLAttributes, JSX, Ref } from "react";
-export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
-    /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
-    alt: string;
-    /** **(Optional)** Specify the image crop mode. */
-    crop?: "square" | "wide" | "none";
-    /** **(Optional)** Specify the height of the image. */
-    height?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLImageElement>;
-    /** Specify the Image source URL. */
-    src: string;
-    /** **(Optional)** Specify the width of the image. */
-    width?: string;
+import { HTMLAttributes, JSX, Ref } from "react";
+//#region src/components/Image/Image.d.ts
+interface ImageProps extends HTMLAttributes<HTMLImageElement> {
+  /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
+  alt: string;
+  /** **(Optional)** Specify the image crop mode. */
+  crop?: "square" | "wide" | "none";
+  /** **(Optional)** Specify the height of the image. */
+  height?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLImageElement>;
+  /** Specify the Image source URL. */
+  src: string;
+  /** **(Optional)** Specify the width of the image. */
+  width?: string;
 }
 declare const Image: {
-    ({ alt, crop, height, ref, src, width, ...props }: ImageProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ alt, crop, height, ref, src, width, ...props }: ImageProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Image;
-export { Image };
+//#endregion
+export { Image, Image as default, ImageProps };

package/dist/components/Image/Image.js

@@ -1,37 +1,43 @@
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Image/Image.tsx
 const getContentfulParams = (src, width, height) => {
-    var _a, _b;
-    const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src);
-    const params = [
-        ["fm", "webp"],
-        ["q", "70"],
-        ["fit", "fill"],
-        ["w", width],
-        ...(height ? [["h", height]] : []),
-    ];
-    params.forEach(([k, v]) => {
-        if (!url.searchParams.has(k))
-            url.searchParams.set(k, v);
-    });
-    return {
-        height: (_a = url.searchParams.get("h")) !== null && _a !== void 0 ? _a : height,
-        src: url.toString(),
-        width: (_b = url.searchParams.get("w")) !== null && _b !== void 0 ? _b : width,
-    };
+	const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src);
+	[
+		["fm", "webp"],
+		["q", "70"],
+		["fit", "fill"],
+		["w", width],
+		...height ? [["h", height]] : []
+	].forEach(([k, v]) => {
+		if (!url.searchParams.has(k)) url.searchParams.set(k, v);
+	});
+	return {
+		height: url.searchParams.get("h") ?? height,
+		src: url.toString(),
+		width: url.searchParams.get("w") ?? width
+	};
 };
 const Image = ({ alt, crop, height, ref, src, width = "640", ...props }) => {
-    let params = { height, src, width };
-    if (src.includes("images.ctfassets.net")) {
-        params = getContentfulParams(src, width, height);
-    }
-    const dimensions = {
-        "data-crop": crop,
-        height: params.height,
-        width: params.width,
-    };
-    return (jsx("picture", { children: jsx("img", { alt: alt, loading: "lazy", src: params.src, ...dimensions, ...props, ref: ref }) }));
+	let params = {
+		height,
+		src,
+		width
+	};
+	if (src.includes("images.ctfassets.net")) params = getContentfulParams(src, width, height);
+	const dimensions = {
+		"data-crop": crop,
+		height: params.height,
+		width: params.width
+	};
+	return /* @__PURE__ */ jsx("picture", { children: /* @__PURE__ */ jsx("img", {
+		alt,
+		loading: "lazy",
+		src: params.src,
+		...dimensions,
+		...props,
+		ref
+	}) });
 };
 Image.slot = { name: "Image" };
-
+//#endregion
 export { Image, Image as default };

package/dist/components/Image/index.d.ts

@@ -1,4 +1,2 @@
-import Image from "./Image";
-export default Image;
-export { Image };
-export * from "./Image";
+import { Image, ImageProps } from "./Image.js";
+export { Image, Image as default, ImageProps };

package/dist/components/Image/index.js

@@ -0,0 +1,5 @@
+import { Image } from "./Image.js";
+//#region src/components/Image/index.ts
+var Image_default = Image;
+//#endregion
+export { Image, Image_default as default };

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,13 +1,15 @@
-import type { JSX, Ref, SVGProps } from "react";
-export interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<SVGSVGElement>;
-    /** **(Optional)** Specify LoadingSpinner stroke. */
-    stroke?: string;
-    /** **(Optional)** Specify LoadingSpinner stroke width. */
-    strokeWidth?: string;
+import { JSX, Ref, SVGProps } from "react";
+//#region src/components/LoadingSpinner/LoadingSpinner.d.ts
+interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<SVGSVGElement>;
+  /** **(Optional)** Specify LoadingSpinner stroke. */
+  stroke?: string;
+  /** **(Optional)** Specify LoadingSpinner stroke width. */
+  strokeWidth?: string;
 }
-export declare const LoadingSpinner: ({ className, ref, stroke, strokeWidth, ...props }: LoadingSpinnerProps) => JSX.Element;
-export default LoadingSpinner;
+declare const LoadingSpinner: ({ className, ref, stroke, strokeWidth, ...props }: LoadingSpinnerProps) => JSX.Element;
+//#endregion
+export { LoadingSpinner, LoadingSpinner as default, LoadingSpinnerProps };

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -1,16 +1,15 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import 'react';
-import { LoadingIcon } from '../icons/LoadingIcon.js';
-
+import { LoadingIcon } from "../icons/LoadingIcon.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/LoadingSpinner/LoadingSpinner.tsx
 const LoadingSpinner = ({ className, ref, stroke = "currentColor", strokeWidth = "1px", ...props }) => {
-    const componentProps = {
-        className: clsx("coop-loading-spinner ", className),
-        stroke,
-        strokeWidth,
-        ...props,
-    };
-    return jsx(LoadingIcon, { ...componentProps, ref: ref });
+	return /* @__PURE__ */ jsx(LoadingIcon, {
+		className: clsx("coop-loading-spinner ", className),
+		stroke,
+		strokeWidth,
+		...props,
+		ref
+	});
 };
-
+//#endregion
 export { LoadingSpinner, LoadingSpinner as default };

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

@@ -1,4 +1,2 @@
-import LoadingSpinner from "./LoadingSpinner";
-export default LoadingSpinner;
-export { LoadingSpinner };
-export * from "./LoadingSpinner";
+import { LoadingSpinner, LoadingSpinnerProps } from "./LoadingSpinner.js";
+export { LoadingSpinner, LoadingSpinner as default, LoadingSpinnerProps };

package/dist/components/LoadingSpinner/index.js

@@ -0,0 +1,5 @@
+import { LoadingSpinner } from "./LoadingSpinner.js";
+//#region src/components/LoadingSpinner/index.ts
+var LoadingSpinner_default = LoadingSpinner;
+//#endregion
+export { LoadingSpinner, LoadingSpinner_default as default };

package/dist/components/Logo/Logo.d.ts

@@ -1,17 +1,19 @@
-import type { JSX, SVGProps } from "react";
-export interface LogoProps extends SVGProps<SVGSVGElement> {
-    /** **(Optional)** Specify the Logo alternative text. */
-    alt?: string;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify the Logo fill color.
-     *
-     * Default: brand-blue. */
-    fill?: "white" | "black" | "brand-blue";
-    /** **(Optional)** Specify the Logo height. */
-    height?: number;
-    /** **(Optional)** Specify the Logo width. */
-    width?: number;
+import { JSX, SVGProps } from "react";
+//#region src/components/Logo/Logo.d.ts
+interface LogoProps extends SVGProps<SVGSVGElement> {
+  /** **(Optional)** Specify the Logo alternative text. */
+  alt?: string;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify the Logo fill color.
+   *
+   * Default: brand-blue. */
+  fill?: "white" | "black" | "brand-blue";
+  /** **(Optional)** Specify the Logo height. */
+  height?: number;
+  /** **(Optional)** Specify the Logo width. */
+  width?: number;
 }
-export declare const Logo: ({ alt, className, fill, height, id, ref, width, ...props }: LogoProps) => JSX.Element;
-export default Logo;
+declare const Logo: ({ alt, className, fill, height, id, ref, width, ...props }: LogoProps) => JSX.Element;
+//#endregion
+export { Logo, Logo as default, LogoProps };

package/dist/components/Logo/Logo.js

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Logo/Logo.tsx
+const Logo = ({ alt = "Co-op", className, fill = "brand-blue", height, id, ref, width, ...props }) => {
+	return /* @__PURE__ */ jsxs("svg", {
+		alt,
+		className: clsx("coop-logo", className),
+		fill: fill === "brand-blue" ? void 0 : `var(--color-${fill})`,
+		height,
+		id,
+		role: "img",
+		viewBox: "0 0 38 40",
+		width,
+		...props,
+		ref,
+		children: [/* @__PURE__ */ jsx("title", { children: alt }), /* @__PURE__ */ jsx("path", { d: "M37.8 8.8c0-1.4-.2-2.8-.6-4.2-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 1.6.6 3.4.9 5.1.8 1.7 0 3.5-.3 5.1-.8 1.7-.6 2.9-2 3.4-3.7.4-1.5.6-2.9.6-4.3zm-5.5 0c0 .7-.1 1.4-.3 2-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.3-.4-2.8 0-4.1.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.4.3 2.1m-14.6 23c.8-2.8.8-5.7 0-8.5-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 3.3 1.2 6.9 1.2 10.2 0 1.6-.6 2.9-2 3.4-3.7m-4.9-4.2c0 .7-.1 1.4-.3 2-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.4-.4-2.8 0-4.1.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.4.3 2.1m0-18.9h5.5c0-1.4-.2-2.8-.6-4.2-.5-1.7-1.8-3-3.4-3.7C11-.3 7.4-.3 4.1.9c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 1.6.6 3.4.8 5.1.8s3.5-.3 5.1-.8c1.7-.6 2.9-2 3.4-3.7.1-.2.1-.5.2-.7L12.7 10c-.1.3-.1.6-.2.9-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.4-.4-2.9 0-4.2.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.3.3 2m7.4 14.6c-.4 1.4-.6 2.8-.6 4.2V40h5.5V27.6c0-.7.1-1.4.3-2 .3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.4 1.4.4 2.8 0 4.1-.3.9-1 1.6-1.9 1.8-.9.2-1.8.2-2.6 0-.2-.1-.4-.1-.5-.2l1.9 5.1c1.7 0 3.5-.3 5.1-.8 1.7-.6 2.9-2 3.4-3.7.8-2.8.8-5.7 0-8.5-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.9.6-3.1 2-3.6 3.6" })]
+	});
+};
+//#endregion
+export { Logo, Logo as default };

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

@@ -1,4 +1,2 @@
-import Logo from "./Logo";
-export default Logo;
-export { Logo };
-export * from "./Logo";
+import { Logo, LogoProps } from "./Logo.js";
+export { Logo, Logo as default, LogoProps };

package/dist/components/Logo/index.js

@@ -0,0 +1,5 @@
+import { Logo } from "./Logo.js";
+//#region src/components/Logo/index.ts
+var Logo_default = Logo;
+//#endregion
+export { Logo, Logo_default as default };

package/dist/components/Pill/Pill.d.ts

@@ -1,43 +1,43 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
-import React from "react";
-import { StandardSizes } from "../../types";
-export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
-    /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-    as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
-    href?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLElement>;
-    /** **(Optional)** Specify the Pill size. */
-    size?: StandardSizes;
+import { StandardSizes } from "../../types/index.js";
+import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
+//#region src/components/Pill/Pill.d.ts
+interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
+  /** **(Optional)** Specify a custom element to override default `a` or `span`. */
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
+  href?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLElement>;
+  /** **(Optional)** Specify the Pill size. */
+  size?: StandardSizes;
 }
 interface PillBadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /** **(Optional)** Content inside the Badge. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
-    className?: string;
+  /** **(Optional)** Content inside the Badge. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+  className?: string;
 }
 declare const Pill: {
-    ({ as, children, className, href, ref, size, ...props }: PillProps): JSX.Element;
+  ({ as, children, className, href, ref, size, ...props }: PillProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+  Badge: {
+    ({ children, className }: PillBadgeProps): JSX.Element;
     slot: {
-        name: string;
-    };
-    Badge: {
-        ({ children, className }: PillBadgeProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+      name: string;
     };
+  };
 };
 declare const PillBadge: {
-    ({ children, className }: PillBadgeProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ children, className }: PillBadgeProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Pill;
-export { Pill, PillBadge };
+//#endregion
+export { Pill, Pill as default, PillBadge, PillProps };

package/dist/components/Pill/Pill.js

@@ -1,29 +1,35 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import React from 'react';
-import { useSlots } from '../../hooks/useSlots.js';
-import { hasUserBg } from '../../utils/index.js';
-
+import { hasUserBg } from "../../utils/index.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+//#region src/components/Pill/Pill.tsx
 const componentSlots = {
-    Children: null,
-    PillBadge: null,
+	Children: null,
+	PillBadge: null
 };
 const Pill = ({ as, children, className, href, ref, size, ...props }) => {
-    const element = as !== null && as !== void 0 ? as : (href ? "a" : "span");
-    const slots = useSlots(componentSlots, children);
-    const componentProps = {
-        className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
-        "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
-        href,
-        ...props,
-    };
-    return React.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
+	const element = as ?? (href ? "a" : "span");
+	const slots = useSlots(componentSlots, children);
+	const componentProps = {
+		className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
+		"data-size": size?.length ? size : void 0,
+		href,
+		...props
+	};
+	return React.createElement(element, {
+		...componentProps,
+		ref
+	}, slots.PillBadge, slots.Children);
 };
 const PillBadge = ({ children, className }) => {
-    return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className), children: children }));
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className),
+		children
+	});
 };
 Pill.slot = { name: "Pill" };
 PillBadge.slot = { name: "PillBadge" };
 Pill.Badge = PillBadge;
-
-export { Pill, PillBadge, Pill as default };
+//#endregion
+export { Pill, Pill as default, PillBadge };

package/dist/components/Pill/index.d.ts

@@ -1,4 +1,2 @@
-import Pill from "./Pill";
-export default Pill;
-export { Pill };
-export * from "./Pill";
+import { Pill, PillBadge, PillProps } from "./Pill.js";
+export { Pill, Pill as default, PillBadge, PillProps };

package/dist/components/Pill/index.js

@@ -0,0 +1,5 @@
+import { Pill, PillBadge } from "./Pill.js";
+//#region src/components/Pill/index.ts
+var Pill_default = Pill;
+//#endregion
+export { Pill, PillBadge, Pill_default as default };