@coopdigital/react 0.52.3 → 0.54.0

package/README.md

@@ -25,18 +25,18 @@ npm install @coopdigital/react
 
 ## Usage
 
-Import the components that you need, along with the main stylesheet and the corresponding component styles:
+Import the components that you need, along with the foundations stylesheet and the corresponding component styles:
 
 ```
 import { Pill } from "@coopdigital/react"
-import "@coopdigital/styles/main.css"
+import "@coopdigital/styles/foundations.css"
 import "@coopdigital/styles/components/Pill.css"
 ```
 
 Alternatively if your project uses SASS you can import the source stylesheets:
 
 ```
-@use "@coopdigital/styles/src/main.scss"
+@use "@coopdigital/styles/src/foundations.scss"
 @use "@coopdigital/styles/src/components/Pill.scss"
 ```
 

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -19,7 +19,9 @@ export declare const AlertBanner: {
     ({ children, className, ref, variant, ...props }: AlertBannerProps): JSX.Element;
     Heading: {
         ({ children, className }: AlertBannerHeadingProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
 };
 export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -12,7 +12,7 @@ const AlertBanner = ({ children, className, ref, variant = "default", ...props }
 const AlertBannerHeading = ({ children, className }) => {
     return jsx("h2", { className: className, children: children });
 };
-AlertBannerHeading.displayName = "AlertBanner.Heading";
+AlertBannerHeading.config = { name: "AlertBannerHeading" };
 AlertBanner.Heading = AlertBannerHeading;
 
 export { AlertBanner, AlertBanner as default };

package/dist/components/Button/Button.d.ts

@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify the Button size. */
     size?: "sm" | "md" | "lg";
     /** **(Optional)** Specify the Button variant. */
-    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
+    variant?: "solid" | "ghost" | "text";
 }
 export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, ref, size, variant, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -3,9 +3,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default, { useState, useCallback } from 'react';
-import { LoadingIcon } from '../Icon/LoadingIcon.js';
+import { hasUserBg } from '../../utils/index.js';
+import { LoadingIcon } from '../icons/LoadingIcon.js';
 
-const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "green", ...props }) => {
+const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "solid", ...props }) => {
     const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
     const [isPending, setIsPending] = useState(false);
     const handleClick = useCallback(async (event) => {
@@ -22,7 +23,7 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
     const componentProps = {
         "aria-disabled": isDisabled ? true : undefined,
         "aria-live": "assertive",
-        className: clsx(variant == "text" ? "coop-link" : "coop-button", className),
+        className: clsx(variant == "text" ? "coop-link" : "coop-button", !hasUserBg(className) && variant === "solid" && "bg-teal", className),
         "data-loading": isLoading || isPending ? true : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         "data-variant": variant !== "text" ? variant : undefined,

package/dist/components/Card/Card.d.ts

@@ -52,23 +52,33 @@ export declare const Card: {
     ({ chevron, children, className, href, hrefAs, imagePosition, orientation, ref, ...props }: CardProps): JSX.Element;
     Label: {
         ({ children, className }: CardLabelProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Heading: {
         ({ as, children, className }: CardHeadingProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Badge: {
         ({ align, children, position, ...props }: CardBadgeProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Body: {
         ({ children }: CardBodyProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Image: {
         (props: CardImageProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
 };
 export default Card;

package/dist/components/Card/Card.js

@@ -2,7 +2,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default from 'react';
 import { useSlots } from '../../hooks/useSlots.js';
-import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
+import { hasUserBg } from '../../utils/index.js';
+import { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
 const componentSlots = {
@@ -28,7 +29,7 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
     const innerProps = { className: "coop-card--inner" };
     const hasLinkWrapper = href && !slots.CardHeading;
     const componentProps = {
-        className: clsx("coop-card", className),
+        className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
         "data-image-pos": imagePosition,
         "data-orientation": orientation !== "vertical" ? orientation : undefined,
         ...props,
@@ -41,24 +42,24 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
 const CardHeading = ({ as = "h3", children, className }) => {
     return React__default.createElement(as, { className: clsx("coop-card--heading", className) }, children);
 };
-CardHeading.displayName = "Card.Heading";
 const CardLabel = ({ children, className }) => {
     return jsx("span", { className: clsx("coop-card--label", className), children: children });
 };
-CardLabel.displayName = "Card.Label";
 const CardBadge = ({ align = "right", children, position = "popout", ...props }) => {
     return (jsx("div", { className: "coop-card--badge", "data-align": align, "data-position": position, ...props, children: children }));
 };
-CardBadge.displayName = "Card.Badge";
 const CardBody = ({ children }) => {
     return jsx(Fragment, { children: children });
 };
-CardBody.displayName = "Card.Body";
 const CardImage = (props) => {
     var _a;
     return jsx(Image, { ...props, crop: (_a = props.crop) !== null && _a !== void 0 ? _a : "wide" });
 };
-CardImage.displayName = "Card.Image";
+CardLabel.config = { name: "CardLabel" };
+CardHeading.config = { name: "CardHeading" };
+CardBadge.config = { name: "CardBadge" };
+CardBody.config = { name: "CardBody" };
+CardImage.config = { name: "CardImage" };
 Card.Label = CardLabel;
 Card.Heading = CardHeading;
 Card.Badge = CardBadge;

package/dist/components/DatePicker/DatePicker.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { useMemo, useReducer, useCallback } from 'react';
 import { useId } from '../../hooks/useId.js';
 import { Button } from '../Button/Button.js';
-import { CloseIcon } from '../Icon/CloseIcon.js';
-import { TickIcon } from '../Icon/TickIcon.js';
+import { CloseIcon } from '../icons/CloseIcon.js';
+import { TickIcon } from '../icons/TickIcon.js';
 import { Popover } from '../Popover/Popover.js';
 import { TextInput } from '../TextInput/TextInput.js';
 import { getInitialDate, getStartDate, getEndDate, getDefaultMonth, getDateValues, shouldClose, shouldSkipParsing } from './datepicker-utils.js';
@@ -130,7 +130,7 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                                 // eslint-disable-next-line jsx-a11y/no-autofocus
                                 autoFocus: true, captionLayout: "dropdown", 
                                 //defaultMonth={defaultMonth}
-                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", onClick: resetState, size: "sm", variant: "grey", children: ["Clear ", jsx(CloseIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
+                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CloseIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
 };
 DatePicker.config = componentConfig;
 

package/dist/components/Expandable/Expandable.d.ts

@@ -1,6 +1,6 @@
 import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react";
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-    /** Main content inside the component, only visible when it is open. It can be any valid JSX or string. */
+    /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */
     children: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
@@ -13,11 +13,25 @@ interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
     /** **(Optional)** Specify additional CSS classes to be applied to the Summary. */
     className?: string;
 }
+interface ExpandableContentProps extends HTMLAttributes<HTMLElement> {
+    /** **(Optional)** Content inside the Expandable. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the content wrapper. */
+    className?: string;
+}
 export declare const Expandable: {
     ({ children, className, ref, ...props }: ExpandableProps): JSX.Element;
     Summary: {
         ({ children, className, ...props }: ExpandableSummaryProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
+    };
+    Content: {
+        ({ children, className, ...props }: ExpandableContentProps): import("react/jsx-runtime").JSX.Element;
+        config: {
+            name: string;
+        };
     };
 };
 export default Expandable;

package/dist/components/Expandable/Expandable.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { useSlots } from '../../hooks/useSlots.js';
-import { hasUserBg, bgClassToColor } from '../../utils/index.js';
+import { hasUserBg } from '../../utils/index.js';
 import 'react';
-import { ChevronDownIcon } from '../Icon/ChevronDownIcon.js';
+import { ChevronDownIcon } from '../icons/ChevronDownIcon.js';
 
 const componentSlots = {
-    Children: null,
+    ExpandableContent: null,
     ExpandableSummary: null,
 };
 const Expandable = ({ children, className, ref, ...props }) => {
@@ -15,15 +15,20 @@ const Expandable = ({ children, className, ref, ...props }) => {
         className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
         ...props,
     };
-    componentProps.style = {
-        "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-    };
-    return (jsxs("details", { ...componentProps, ref: ref, children: [slots.ExpandableSummary, jsx("div", { className: "coop-expandable--content", children: slots.Children })] }));
+    // componentProps.style = {
+    //   "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+    // }
+    return (jsxs("details", { ...componentProps, ref: ref, children: [slots.ExpandableSummary, slots.ExpandableContent] }));
 };
 const ExpandableSummary = ({ children, className, ...props }) => {
     return (jsxs("summary", { ...props, className: className, children: [children, jsx(ChevronDownIcon, { className: "coop-expandable--icon", stroke: "currentColor", strokeWidth: 2, width: "12" })] }));
 };
-ExpandableSummary.displayName = "Expandable.Summary";
+const ExpandableContent = ({ children, className, ...props }) => {
+    return (jsx("div", { className: clsx("coop-expandable--content", className), ...props, children: children }));
+};
+ExpandableSummary.config = { name: "ExpandableSummary" };
+ExpandableContent.config = { name: "ExpandableContent" };
 Expandable.Summary = ExpandableSummary;
+Expandable.Content = ExpandableContent;
 
 export { Expandable, Expandable as default };

package/dist/components/Field/Field.d.ts

@@ -27,24 +27,34 @@ interface ControlProps extends HTMLAttributes<HTMLDivElement> {
 }
 export declare const FieldControl: {
     ({ children, className, ...props }: ControlProps): JSX.Element;
-    displayName: string;
+    config: {
+        name: string;
+    };
 };
 export declare const Field: (({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element) & {
     Control: {
         ({ children, className, ...props }: ControlProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Error: {
         (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Hint: {
         (props: HintProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Label: {
         (props: LabelProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
 };
 export default Field;

package/dist/components/Field/Field.js

@@ -61,13 +61,13 @@ const Root = ({ boxed = false, children, className, error = false, hideErrorBar
 const FieldControl = ({ children, className, ...props }) => {
     return (jsx("div", { className: clsx("coop-field-control ", className), ...props, children: children }));
 };
-FieldControl.displayName = "Field.Control";
 const FieldLabel = (props) => jsx(Label, { ...props });
-FieldLabel.displayName = "Field.Label";
 const FieldHint = (props) => jsx(Hint, { ...props });
-FieldHint.displayName = "Field.Hint";
 const FieldError = (props) => jsx(Error, { ...props });
-FieldError.displayName = "Field.Error";
+FieldControl.config = { name: "FieldControl" };
+FieldLabel.config = { name: "FieldLabel" };
+FieldHint.config = { name: "FieldHint" };
+FieldError.config = { name: "FieldError" };
 const Field = Object.assign(Root, {
     Control: FieldControl,
     Error: FieldError,

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

@@ -33,24 +33,34 @@ interface FieldsetFieldsProps {
 }
 export declare const FieldsetFields: {
     ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
-    displayName: string;
+    config: {
+        name: string;
+    };
 };
 export declare const Fieldset: (({ children, className, disabled, error, hideErrorBar, ref, size, ...props }: FieldsetProps) => JSX.Element) & {
     Error: {
         (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Fields: {
         ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Hint: {
         (props: HintProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Legend: {
         (props: LegendProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
 };
 export default Fieldset;

package/dist/components/Fieldset/Fieldset.js

@@ -25,13 +25,13 @@ const FieldsetFields = ({ boxed = false, children, className, orientation = "ver
     };
     return jsx("div", { ...componentProps, children: children });
 };
-FieldsetFields.displayName = "Fieldset.Fields";
 const FieldsetLegend = (props) => jsx(Legend, { ...props });
-FieldsetLegend.displayName = "Fieldset.Legend";
 const FieldsetHint = (props) => jsx(Hint, { ...props });
-FieldsetHint.displayName = "Fieldset.Hint";
 const FieldsetError = (props) => jsx(Error, { ...props });
-FieldsetError.displayName = "Fieldset.Error";
+FieldsetFields.config = { name: "FieldsetField" };
+FieldsetLegend.config = { name: "FieldsetLegend" };
+FieldsetHint.config = { name: "FieldsetHint" };
+FieldsetError.config = { name: "FieldsetError" };
 const Fieldset = Object.assign(Root, {
     Error: FieldsetError,
     Fields: FieldsetFields,

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

@@ -25,7 +25,9 @@ export declare const Pill: {
     ({ as, children, className, href, ref, size, ...props }: PillProps): JSX.Element;
     Badge: {
         ({ children, className }: PillBadgeProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
 };
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -22,9 +22,9 @@ const Pill = ({ as, children, className, href, ref, size = "md", ...props }) =>
     return React__default.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
 };
 const PillBadge = ({ children, className }) => {
-    return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className), children: children }));
+    return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className), children: children }));
 };
-PillBadge.displayName = "Pill.Badge";
+PillBadge.config = { name: "PillBadge" };
 Pill.Badge = PillBadge;
 
 export { Pill, Pill as default };

package/dist/components/Popover/Popover.d.ts

@@ -56,19 +56,27 @@ export declare const Popover: {
     ({ children, ...props }: PopoverProps): JSX.Element;
     Trigger: {
         ({ asChild, children, className, ...props }: PopoverTriggerProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Content: {
         ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Close: {
         ({ asChild, children, className, ...props }: PopoverCloseProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Anchor: {
         ({ asChild, children, ...props }: PopoverAnchorProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
 };
 export default Popover;

package/dist/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Root as Root2, Portal, Content as Content2, Arrow as Arrow2, Trigger, Close, Anchor as Anchor2 } from '../../node_modules/@radix-ui/react-popover/dist/index.js';
+import { Root as Root2, Portal, Trigger, Content as Content2, Arrow as Arrow2, Close, Anchor as Anchor2 } from '../../node_modules/@radix-ui/react-popover/dist/index.js';
 import clsx from 'clsx';
 import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg, bgClassToColor } from '../../utils/index.js';
@@ -33,7 +33,6 @@ const PopoverContent = ({ align = "center", alignOffset = 0, asChild = false, av
     };
     return (jsxs(Content2, { ref: ref, ...componentProps, children: [children, jsx(Arrow2, { className: "coop-popover-arrow" })] }));
 };
-PopoverContent.displayName = "Popover.Content";
 const PopoverTrigger = ({ asChild = false, children, className, ...props }) => {
     const componentProps = {
         // There is a known issue with aria-controls being set to target
@@ -49,7 +48,6 @@ const PopoverTrigger = ({ asChild = false, children, className, ...props }) => {
     };
     return jsx(Trigger, { ...componentProps, children: children });
 };
-PopoverTrigger.displayName = "Popover.Trigger";
 const PopoverClose = ({ asChild = false, children, className, ...props }) => {
     const componentProps = {
         asChild,
@@ -58,7 +56,6 @@ const PopoverClose = ({ asChild = false, children, className, ...props }) => {
     };
     return (jsx(Close, { "aria-label": "Close", ...componentProps, children: children }));
 };
-PopoverClose.displayName = "Popover.Close";
 const PopoverAnchor = ({ asChild = false, children, ...props }) => {
     const componentProps = {
         asChild,
@@ -66,7 +63,10 @@ const PopoverAnchor = ({ asChild = false, children, ...props }) => {
     };
     return jsx(Anchor2, { ...componentProps, children: children });
 };
-PopoverAnchor.displayName = "Popover.Anchor";
+PopoverTrigger.config = { name: "PopoverTrigger" };
+PopoverContent.config = { name: "PopoverContent" };
+PopoverClose.config = { name: "PopoverClose" };
+PopoverAnchor.config = { name: "PopoverAnchor" };
 Popover.Trigger = PopoverTrigger;
 Popover.Content = PopoverContent;
 Popover.Close = PopoverClose;

package/dist/components/Searchbox/Searchbox.d.ts

@@ -1,8 +1,9 @@
-import type { InputHTMLAttributes, JSX, Ref } from "react";
+import type { FormHTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 import { StandardSizes } from "../../types";
 import { type ButtonProps } from "../Button";
-export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+import { TextInputProps } from "../TextInput";
+export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
     action?: string;
     /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -28,7 +29,22 @@ export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the Searchbox size. */
     size?: StandardSizes;
     /** **(Optional)** Specify the Searchbox variant. */
-    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
+    variant?: "solid" | "ghost";
 }
-export declare const Searchbox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, ref, size, variant, ...props }: SearchboxProps) => JSX.Element;
+export declare const Searchbox: {
+    ({ action, children, className, id, label, labelVisible, onSubmit, ref, size, variant, ...props }: SearchboxProps): JSX.Element;
+    Button: {
+        ({ children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+        config: {
+            name: string;
+        };
+    };
+    Input: {
+        (props: TextInputProps): import("react/jsx-runtime").JSX.Element;
+        config: {
+            isField: boolean;
+            name: string;
+        };
+    };
+};
 export default Searchbox;

package/dist/components/Searchbox/Searchbox.js

@@ -1,21 +1,27 @@
 
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default, { useState, useCallback } from 'react';
 import { useId } from '../../hooks/useId.js';
+import { useSlots } from '../../hooks/useSlots.js';
+import { hasUserBorder } from '../../utils/index.js';
 import { Button } from '../Button/Button.js';
 import { Field } from '../Field/Field.js';
-import { Label } from '../FieldMarkers/Label.js';
-import { SearchIcon } from '../Icon/SearchIcon.js';
+import { SearchIcon } from '../icons/SearchIcon.js';
 import { TextInput } from '../TextInput/TextInput.js';
 
-const defaultButtonProps = {
-    label: React__default.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
-    loadingText: "",
+const componentSlots = {
+    SearchboxButton: null,
+    SearchboxInput: null,
 };
-const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, ref, size = "md", variant = "green", ...props }) => {
-    var _a, _b;
+const defaultButtonText = React__default.createElement(SearchIcon, {
+    alt: "Search",
+    stroke: "currentColor",
+    strokeWidth: 2,
+});
+const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size = "md", variant = "solid", ...props }) => {
+    const slots = useSlots(componentSlots, children);
     const [isPending, setIsPending] = useState(false);
     const uid = useId(id);
     const handleSubmit = useCallback(async (event) => {
@@ -30,37 +36,45 @@ const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
             setIsPending(false);
         }
     }, [onSubmit, isPending]);
+    let borderClass = "";
+    if (!hasUserBorder(className)) {
+        borderClass = variant === "ghost" ? "border-teal" : "border-grey";
+    }
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
-        className: clsx("coop-searchbox", className),
+        className: clsx("coop-searchbox", borderClass, className),
         "data-size": size && size !== "md" ? size : undefined,
-        "data-variant": variant.length && variant !== "green" ? variant : undefined,
-        id: uid,
+        "data-variant": variant.length && variant !== "solid" ? variant : undefined,
+        id: uid + "-form",
         onSubmit: onSubmit ? handleSubmit : undefined,
+        ...props,
     };
-    const buttonProps = {
-        className: button === null || button === void 0 ? void 0 : button.className,
+    slots.SearchboxButton = React__default.cloneElement(slots.SearchboxButton, {
         isLoading: isPending,
-        loadingText: (_a = button === null || button === void 0 ? void 0 : button.loadingText) !== null && _a !== void 0 ? _a : "",
         size,
-        variant,
-    };
-    const inputProps = {
-        "aria-placeholder": (_b = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _b !== void 0 ? _b : undefined,
-        autoCapitalize,
-        autoComplete,
-        id: uid + "--input",
-        name,
-        placeholder,
+    });
+    slots.SearchboxInput = React__default.cloneElement(slots.SearchboxInput, {
+        autoCapitalize: "off",
+        id: uid,
         size,
-        type: "search",
-        ...props,
-    };
+    });
     const labelProps = {
-        htmlFor: uid + "--input",
+        htmlFor: uid,
         isVisible: labelVisible,
     };
-    return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Label, { ...labelProps, children: label }), jsxs("div", { className: "coop-searchbox--inner", children: [jsx(Field, { children: jsx(TextInput, { ...inputProps }) }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Field.Label, { ...labelProps, children: label }), jsxs("div", { className: clsx("coop-searchbox--inner"), children: [jsx(Field, { children: slots.SearchboxInput }), slots.SearchboxButton] })] }));
+};
+const SearchboxButton = ({ children, ...props }) => {
+    const buttonProps = {
+        children: children !== null && children !== void 0 ? children : defaultButtonText,
+        ...props,
+    };
+    return jsx(Button, { ...buttonProps });
 };
+const SearchboxInput = (props) => jsx(TextInput, { ...props });
+Searchbox.Button = SearchboxButton;
+Searchbox.Input = SearchboxInput;
+SearchboxButton.config = { name: "SearchboxButton" };
+SearchboxInput.config = { isField: true, name: "SearchboxInput" };
 
 export { Searchbox, Searchbox as default };