@coopdigital/react 1.4.1 → 1.5.1

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

@@ -21,29 +21,32 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
     /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
     size?: StandardSizes;
 }
-export declare const Fieldset: {
+declare const Fieldset: {
     ({ children, className, disabled, error, hideErrorBar, ref, size, ...props }: FieldsetProps): JSX.Element;
+    slot: {
+        name: string;
+    };
     Error: {
-        (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        (props: ErrorProps): JSX.Element;
+        slot: {
             name: string;
         };
     };
     Fields: {
         ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Hint: {
-        (props: HintProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        (props: HintProps): JSX.Element;
+        slot: {
             name: string;
         };
     };
     Legend: {
-        (props: LegendProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        (props: LegendProps): JSX.Element;
+        slot: {
             name: string;
         };
     };
@@ -58,4 +61,29 @@ interface FieldsetFieldsProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify the CheckboxGroup orientation. */
     orientation?: "horizontal" | "vertical";
 }
+declare const FieldsetFields: {
+    ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const FieldsetLegend: {
+    (props: LegendProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const FieldsetHint: {
+    (props: HintProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const FieldsetError: {
+    (props: ErrorProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Fieldset;
+export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend };

package/dist/components/Fieldset/Fieldset.js

@@ -28,13 +28,14 @@ const FieldsetFields = ({ boxed = false, children, className, orientation = "ver
 const FieldsetLegend = (props) => jsx(Legend, { ...props });
 const FieldsetHint = (props) => jsx(Hint, { ...props });
 const FieldsetError = (props) => jsx(Error, { ...props });
-FieldsetFields.config = { name: "FieldsetField" };
-FieldsetLegend.config = { name: "FieldsetLegend" };
-FieldsetHint.config = { name: "FieldsetHint" };
-FieldsetError.config = { name: "FieldsetError" };
+Fieldset.slot = { name: "Fieldset" };
+FieldsetFields.slot = { name: "FieldsetField" };
+FieldsetLegend.slot = { name: "FieldsetLegend" };
+FieldsetHint.slot = { name: "FieldsetHint" };
+FieldsetError.slot = { name: "FieldsetError" };
 Fieldset.Error = FieldsetError;
 Fieldset.Fields = FieldsetFields;
 Fieldset.Hint = FieldsetHint;
 Fieldset.Legend = FieldsetLegend;
 
-export { Fieldset, Fieldset as default };
+export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Fieldset as default };

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

@@ -10,5 +10,11 @@ export interface FlourishProps extends SVGProps<SVGSVGElement> {
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<SVGSVGElement>;
 }
-export declare const Flourish: ({ children, className, fill, ref, ...props }: FlourishProps) => JSX.Element;
+declare const Flourish: {
+    ({ children, className, fill, ref, ...props }: FlourishProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Flourish;
+export { Flourish };

package/dist/components/Flourish/Flourish.js

@@ -9,5 +9,6 @@ const Flourish = ({ children, className, fill = "brand-blue", ref, ...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" }) })] }));
 };
+Flourish.slot = { name: "Flourish" };
 
 export { Flourish, Flourish as default };

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

@@ -7,5 +7,11 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLFormElement>;
 }
-export declare const Form: ({ children, className, ref, ...props }: FormProps) => JSX.Element;
+declare const Form: {
+    ({ children, className, ref, ...props }: FormProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Form;
+export { Form };

package/dist/components/Form/Form.js

@@ -8,5 +8,6 @@ const Form = ({ children, className, ref, ...props }) => {
     };
     return (jsx("form", { ...componentProps, ref: ref, children: children }));
 };
+Form.slot = { name: "Form" };
 
 export { Form, Form as default };

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

@@ -13,5 +13,11 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     /** **(Optional)** Specify the width of the image. */
     width?: string;
 }
-export declare const Image: ({ alt, crop, height, ref, src, width, ...props }: ImageProps) => JSX.Element;
+declare const Image: {
+    ({ alt, crop, height, ref, src, width, ...props }: ImageProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Image;
+export { Image };

package/dist/components/Image/Image.js

@@ -32,5 +32,6 @@ const Image = ({ alt, crop, height, ref, src, width = "640", ...props }) => {
     };
     return (jsx("picture", { children: jsx("img", { alt: alt, loading: "lazy", src: params.src, ...dimensions, ...props, ref: ref }) }));
 };
+Image.slot = { name: "Image" };
 
 export { Image, Image as default };

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

@@ -21,13 +21,23 @@ interface PillBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
     className?: string;
 }
-export declare const Pill: {
+declare const Pill: {
     ({ as, children, className, href, ref, size, ...props }: PillProps): JSX.Element;
+    slot: {
+        name: string;
+    };
     Badge: {
-        ({ children, className }: PillBadgeProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        ({ children, className }: PillBadgeProps): JSX.Element;
+        slot: {
             name: string;
         };
     };
 };
+declare const PillBadge: {
+    ({ children, className }: PillBadgeProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Pill;
+export { Pill, PillBadge };

package/dist/components/Pill/Pill.js

@@ -22,7 +22,8 @@ const Pill = ({ as, children, className, href, ref, size = "md", ...props }) =>
 const PillBadge = ({ children, className }) => {
     return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className), children: children }));
 };
-PillBadge.config = { name: "PillBadge" };
+Pill.slot = { name: "Pill" };
+PillBadge.slot = { name: "PillBadge" };
 Pill.Badge = PillBadge;
 
-export { Pill, Pill as default };
+export { Pill, PillBadge, Pill as default };

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

@@ -52,31 +52,59 @@ interface PopoverAnchorProps extends RadixPopoverAnchorProps {
     /** **(Optional)** Content inside the Popover Anchor element. */
     children?: React.ReactNode;
 }
-export declare const Popover: {
+declare const Popover: {
     ({ children, ...props }: PopoverProps): JSX.Element;
+    slot: {
+        name: string;
+    };
     Trigger: {
         ({ asChild, children, className, ...props }: PopoverTriggerProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Content: {
         ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Close: {
         ({ asChild, children, className, ...props }: PopoverCloseProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Anchor: {
         ({ asChild, children, ...props }: PopoverAnchorProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
 };
+declare const PopoverContent: {
+    ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const PopoverTrigger: {
+    ({ asChild, children, className, ...props }: PopoverTriggerProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const PopoverClose: {
+    ({ asChild, children, className, ...props }: PopoverCloseProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const PopoverAnchor: {
+    ({ asChild, children, ...props }: PopoverAnchorProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Popover;
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/Popover/Popover.js

@@ -63,13 +63,14 @@ const PopoverAnchor = ({ asChild = false, children, ...props }) => {
     };
     return jsx(RadixPopover.Anchor, { ...componentProps, children: children });
 };
-PopoverTrigger.config = { name: "PopoverTrigger" };
-PopoverContent.config = { name: "PopoverContent" };
-PopoverClose.config = { name: "PopoverClose" };
-PopoverAnchor.config = { name: "PopoverAnchor" };
+Popover.slot = { name: "Popover" };
+PopoverTrigger.slot = { name: "PopoverTrigger" };
+PopoverContent.slot = { name: "PopoverContent" };
+PopoverClose.slot = { name: "PopoverClose" };
+PopoverAnchor.slot = { name: "PopoverAnchor" };
 Popover.Trigger = PopoverTrigger;
 Popover.Content = PopoverContent;
 Popover.Close = PopoverClose;
 Popover.Anchor = PopoverAnchor;
 
-export { Popover, Popover as default };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Popover as default };

package/dist/components/Popover/index.js

@@ -1,4 +1,5 @@
 import { Popover } from './Popover.js';
+export { PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from './Popover.js';
 
 
 

package/dist/components/Radio/Radio.d.ts

@@ -16,11 +16,13 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** **(Optional)** Specify the Radio size. */
     size?: StandardSizes;
 }
-export declare const Radio: {
+declare const Radio: {
     ({ className, disabled, error, id, name, ref, size, ...props }: RadioProps): JSX.Element;
-    config: {
-        isField: true;
-        isInline: true;
+    slot: {
+        field: boolean;
+        inline: boolean;
+        name: string;
     };
 };
 export default Radio;
+export { Radio };

package/dist/components/Radio/Radio.js

@@ -1,15 +1,16 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from '../../hooks/useId.js';
+import { useField } from '../Field/Field.context.js';
 
 const Radio = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
-    const uid = useId(id);
+    const field = useField();
     const componentProps = {
         className: clsx("coop-radio", "coop-field-element", className),
         "data-error": error || undefined,
         "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
-        id: uid,
+        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
         name,
         type: "radio",
         ...props,
@@ -17,9 +18,10 @@ const Radio = ({ className, disabled, error = false, id, name, ref, size, ...pro
     //const formItemProps = { "aria-disabled": disabled ? true : undefined }
     return jsx("input", { ...componentProps, ref: ref });
 };
-Radio.config = {
-    isField: true,
-    isInline: true,
+Radio.slot = {
+    field: true,
+    inline: true,
+    name: "Radio",
 };
 
 export { Radio, Radio as default };

package/dist/components/RootSVG/RootSVG.d.ts

@@ -1,2 +1,8 @@
-export declare const RootSVG: () => import("react/jsx-runtime").JSX.Element;
+declare const RootSVG: {
+    (): import("react").JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default RootSVG;
+export { RootSVG };

package/dist/components/RootSVG/RootSVG.js

@@ -8,5 +8,6 @@ const RootSVG = () => {
             position: "absolute",
         }, width: "0", xmlns: "http://www.w3.org/2000/svg", children: jsx("defs", { children: jsx("clipPath", { clipPathUnits: "objectBoundingBox", id: "coop-squircle", children: jsx("path", { d: "M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5" }) }) }) }));
 };
+RootSVG.slot = { name: "RootSVG" };
 
 export { RootSVG, RootSVG as default };

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

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+import { StandardSizes } from "../../types";
+interface SearchboxContextValue {
+    buttonId?: string;
+    id?: string;
+    inputId?: string;
+    isLoading?: boolean;
+    ref?: RefObject<HTMLFormElement | null> | null;
+    size?: StandardSizes;
+}
+export declare const SearchboxContext: import("react").Context<SearchboxContextValue>;
+export declare const useSearchbox: () => SearchboxContextValue;
+export {};

package/dist/components/Searchbox/Searchbox.context.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const SearchboxContext = createContext({});
+const useSearchbox = () => {
+    const context = useContext(SearchboxContext);
+    if (!context)
+        throw new Error("Searchbox components must be used inside <Searchbox>");
+    return context;
+};
+
+export { SearchboxContext, useSearchbox };

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

@@ -1,4 +1,4 @@
-import type { FormHTMLAttributes, JSX, Ref } from "react";
+import type { FormHTMLAttributes, JSX, RefObject } from "react";
 import React from "react";
 import { StandardSizes } from "../../types";
 import { type ButtonProps } from "../Button";
@@ -25,26 +25,30 @@ export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
     /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
     placeholder?: string;
     /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLFormElement>;
+    ref?: RefObject<HTMLFormElement | null>;
     /** **(Optional)** Specify the Searchbox size. */
     size?: StandardSizes;
     /** **(Optional)** Specify the Searchbox variant. */
     variant?: "solid" | "ghost";
 }
-export declare const Searchbox: {
+declare const Searchbox: {
     ({ action, children, className, id, label, labelVisible, onSubmit, ref, size, variant, ...props }: SearchboxProps): JSX.Element;
     Button: {
-        ({ children, id, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-        config: {
-            name: string;
-        };
+        ({ children, ...props }: ButtonProps): JSX.Element;
+        displayName: string;
     };
     Input: {
-        (props: TextInputProps): import("react/jsx-runtime").JSX.Element;
-        config: {
-            isField: boolean;
-            name: string;
-        };
+        (props: TextInputProps): JSX.Element;
+        displayName: string;
     };
 };
+declare const SearchboxButton: {
+    ({ children, ...props }: ButtonProps): JSX.Element;
+    displayName: string;
+};
+declare const SearchboxInput: {
+    (props: TextInputProps): JSX.Element;
+    displayName: string;
+};
 export default Searchbox;
+export { Searchbox, SearchboxButton, SearchboxInput };

package/dist/components/Searchbox/Searchbox.js

@@ -1,24 +1,27 @@
-
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useId } from '../../hooks/useId.js';
 import { useSlots } from '../../hooks/useSlots.js';
-import { hasUserBorder } from '../../utils/index.js';
+import { getSlotProp, hasUserBorder } from '../../utils/index.js';
 import { Button } from '../Button/Button.js';
-import { Field } from '../Field/Field.js';
+import { FieldLabel, Field } from '../Field/Field.js';
 import { SearchIcon } from '../icons/SearchIcon.js';
 import { TextInput } from '../TextInput/TextInput.js';
+import { SearchboxContext, useSearchbox } from './Searchbox.context.js';
 
 const componentSlots = {
     SearchboxButton: null,
     SearchboxInput: null,
 };
 const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size, variant = "solid", ...props }) => {
-    const slots = { ...useSlots(componentSlots, children) };
-    const [isPending, setIsPending] = useState(false);
+    var _a, _b;
+    const slots = useSlots(componentSlots, children);
     const uid = useId(id);
+    const [isPending, setIsPending] = useState(false);
+    const inputId = (_a = getSlotProp(slots.SearchboxInput, "id")) !== null && _a !== void 0 ? _a : uid + "__input";
+    const buttonId = (_b = getSlotProp(slots.SearchboxButton, "id")) !== null && _b !== void 0 ? _b : uid + "__button";
     const handleSubmit = useCallback(async (event) => {
         event.preventDefault();
         if (isPending || !onSubmit)
@@ -40,38 +43,31 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
         className: clsx("coop-searchbox", borderClass, className),
         "data-size": size !== null && size !== void 0 ? size : undefined,
         "data-variant": variant.length && variant !== "solid" ? variant : undefined,
-        id: uid + "__form",
+        id: id !== null && id !== void 0 ? id : undefined,
         onSubmit: onSubmit ? handleSubmit : undefined,
         ...props,
     };
-    slots.SearchboxButton = React.cloneElement(slots.SearchboxButton, {
-        isLoading: isPending,
-        size,
-    });
-    slots.SearchboxInput = React.cloneElement(slots.SearchboxInput, {
-        autoCapitalize: "off",
-        id: uid,
-        size,
-        type: "search",
-    });
-    const labelProps = {
-        htmlFor: uid,
-        isVisible: labelVisible,
-    };
-    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] })] }));
+    return (jsx(SearchboxContext.Provider, { value: { buttonId, inputId, isLoading: isPending, ref, size }, children: jsxs("form", { ...formProps, ref: ref, children: [label && (jsx(FieldLabel, { htmlFor: inputId !== null && inputId !== void 0 ? inputId : uid, isVisible: labelVisible, children: label })), jsxs("div", { className: clsx("coop-searchbox--inner"), children: [jsx(Field, { children: slots.SearchboxInput }), slots.SearchboxButton] })] }) }));
 };
-const SearchboxButton = ({ children, id, ...props }) => {
-    const uid = useId(id);
+const SearchboxButton = ({ children, ...props }) => {
+    // const uid = useId(id)
+    const searchbox = useSearchbox();
     const buttonProps = {
-        children: children !== null && children !== void 0 ? children : (jsx(SearchIcon, { alt: "Search", id: uid + "__icon", stroke: "currentColor", width: "24" })),
+        children: children !== null && children !== void 0 ? children : (jsx(SearchIcon, { alt: "Search", id: searchbox.buttonId + "__icon", stroke: "currentColor", width: "24" })),
+        id: searchbox.buttonId,
+        isLoading: searchbox.isLoading,
+        size: searchbox.size,
         ...props,
     };
     return jsx(Button, { ...buttonProps });
 };
-const SearchboxInput = (props) => jsx(TextInput, { ...props });
+SearchboxButton.displayName = "Searchbox.Button";
+const SearchboxInput = (props) => {
+    const searchbox = useSearchbox();
+    return (jsx(TextInput, { autoCapitalize: "off", id: searchbox.inputId, size: searchbox.size, type: "search", ...props }));
+};
+SearchboxInput.displayName = "Searchbox.Input";
 Searchbox.Button = SearchboxButton;
 Searchbox.Input = SearchboxInput;
-SearchboxButton.config = { name: "SearchboxButton" };
-SearchboxInput.config = { isField: true, name: "SearchboxInput" };
 
-export { Searchbox, Searchbox as default };
+export { Searchbox, SearchboxButton, SearchboxInput, Searchbox as default };

package/dist/components/Select/Select.d.ts

@@ -32,22 +32,35 @@ interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
     /** Value of Select option. */
     value: string;
 }
-export declare const Select: {
+declare const Select: {
     ({ children, className, disabled, error, id, name, ref, size, ...props }: SelectProps): JSX.Element;
+    slot: {
+        name: string;
+    };
     OptionGroup: {
         ({ children, ...props }: SelectOptionGroupProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Option: {
         ({ children, className, ...props }: SelectOptionProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
-    config: {
-        isField: true;
+};
+declare const SelectOptionGroup: {
+    ({ children, ...props }: SelectOptionGroupProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const SelectOption: {
+    ({ children, className, ...props }: SelectOptionProps): JSX.Element;
+    slot: {
+        name: string;
     };
 };
 export default Select;
+export { Select, SelectOption, SelectOptionGroup };

package/dist/components/Select/Select.js

@@ -1,15 +1,16 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from '../../hooks/useId.js';
+import { useField } from '../Field/Field.context.js';
 
 const Select = ({ children, className, disabled, error, id, name, ref, size, ...props }) => {
-    const uid = useId(id);
+    const field = useField();
     const componentProps = {
         className: clsx("coop-select", "coop-field-element", className),
         "data-error": error !== null && error !== void 0 ? error : undefined,
         "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
-        id: uid,
+        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
         name,
         ...props,
     };
@@ -21,12 +22,10 @@ const SelectOptionGroup = ({ children, ...props }) => {
 const SelectOption = ({ children, className, ...props }) => {
     return (jsx("option", { className: clsx("coop-select--option", className), ...props, children: children }));
 };
-SelectOption.config = { name: "SelectOption" };
-SelectOptionGroup.config = { name: "SelectOptionGroup" };
+Select.slot = { name: "Select" };
+SelectOption.slot = { name: "SelectOption" };
+SelectOptionGroup.slot = { name: "SelectOptionGroup" };
 Select.OptionGroup = SelectOptionGroup;
 Select.Option = SelectOption;
-Select.config = {
-    isField: true,
-};
 
-export { Select, Select as default };
+export { Select, SelectOption, SelectOptionGroup, Select as default };

package/dist/components/Signpost/Signpost.d.ts

@@ -17,5 +17,11 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const Signpost: ({ as, children, className, headingLevel, href, image, ref, ...props }: SignpostProps) => JSX.Element;
+declare const Signpost: {
+    ({ as, children, className, headingLevel, href, image, ref, ...props }: SignpostProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Signpost;
+export { Signpost };

package/dist/components/Signpost/Signpost.js

@@ -12,5 +12,6 @@ const Signpost = ({ as, children, className, headingLevel = "h3", href, image, r
     };
     return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { crop: "wide", ...image }), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] }));
 };
+Signpost.slot = { name: "Signpost" };
 
 export { Signpost, Signpost as default };

package/dist/components/SkipNav/SkipNav.d.ts

@@ -14,5 +14,11 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const SkipNav: ({ className, isVisible, links, ref, ...props }: SkipNavProps) => JSX.Element;
+declare const SkipNav: {
+    ({ className, isVisible, links, ref, ...props }: SkipNavProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default SkipNav;
+export { SkipNav };

package/dist/components/SkipNav/SkipNav.js

@@ -17,5 +17,6 @@ const SkipNav = ({ className, isVisible = false, links = defaultLinks, ref, ...p
                 return (jsx("li", { children: jsx("a", { ...linkProps, children: link.label }) }, link.href));
             }) }) }));
 };
+SkipNav.slot = { name: "SkipNav" };
 
 export { SkipNav, SkipNav as default };