@coopdigital/react 0.52.2 → 0.53.0

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.js

@@ -3,7 +3,7 @@
 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 { 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 element = as !== null && as !== void 0 ? as : (href ? "a" : "button");

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,7 @@ 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 { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
 const componentSlots = {
@@ -41,24 +41,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';

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

@@ -3,10 +3,10 @@ import { clsx } from 'clsx';
 import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg, bgClassToColor } 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 }) => {
@@ -18,12 +18,17 @@ const Expandable = ({ children, className, ref, ...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 })] }));
+    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

@@ -24,7 +24,7 @@ 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-offer-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.js

@@ -7,7 +7,7 @@ import { useId } from '../../hooks/useId.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 = {

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

@@ -36,11 +36,15 @@ export declare const Select: {
     ({ children, className, disabled, error, id, name, ref, size, ...props }: SelectProps): JSX.Element;
     OptionGroup: {
         ({ children, ...props }: SelectOptionGroupProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Option: {
         ({ children, className, ...props }: SelectOptionProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     config: {
         isField: true;

package/dist/components/Select/Select.js

@@ -18,11 +18,11 @@ const Select = ({ children, className, disabled, error, id, name, ref, size = "m
 const SelectOptionGroup = ({ children, ...props }) => {
     return jsx("optgroup", { ...props, children: children });
 };
-SelectOptionGroup.displayName = "Select.OptionGroup";
 const SelectOption = ({ children, className, ...props }) => {
     return (jsx("option", { className: clsx("coop-select--option", className), ...props, children: children }));
 };
-SelectOption.displayName = "Select.Option";
+SelectOption.config = { name: "SelectOption" };
+SelectOptionGroup.config = { name: "SelectOptionGroup" };
 Select.OptionGroup = SelectOptionGroup;
 Select.Option = SelectOption;
 Select.config = {

package/dist/components/Signpost/Signpost.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default from 'react';
-import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
+import { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
 const Signpost = ({ as, children, className, headingLevel = "h3", href, image, ref, ...props }) => {

package/dist/hooks/useSlots.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import { ReactNodeWithConfig } from "src/types";
 type Slots<T> = Record<keyof T, React.ReactNode>;
 export declare function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T;
-export declare function getSlotName(node: React.ReactNode): string | false;
+export declare function getSlotName(node: ReactNodeWithConfig): string | false;
 export declare function useSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
     collect?: string[];
 }): Slots<T>;

package/dist/hooks/useSlots.js

@@ -4,9 +4,14 @@ function isKey(x, k) {
     return k in x;
 }
 function getSlotName(node) {
-    return React__default.isValidElement(node) && node.type && typeof node.type !== "string"
-        ? node.type.name
-        : false;
+    var _a, _b, _c;
+    if (React__default.isValidElement(node) &&
+        node.type &&
+        typeof node.type !== "string" &&
+        typeof node.type !== "symbol") {
+        return (_c = (_b = (_a = node.type) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : node.type.name;
+    }
+    return false;
 }
 function useSlots(componentSlots, children, options) {
     return React__default.Children.toArray(children).reduce((slots, child) => {

package/dist/types/index.d.ts

@@ -12,4 +12,5 @@ export interface ComponentConfig {
     fieldSuffix?: string;
     isField?: boolean;
     isInline?: boolean;
+    name?: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.52.2",
+  "version": "0.53.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -11,9 +11,13 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./Icon": {
-      "types": "./dist/components/Icon/index.d.ts",
-      "default": "./dist/components/Icon/index.js"
+    "./components/*": {
+      "types": "./dist/components/*/*.d.ts",
+      "default": "./dist/components/*/*.js"
+    },
+    "./icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "default": "./dist/components/icons/index.js"
     }
   },
   "files": [
@@ -43,13 +47,12 @@
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
     "build:icons": "tsx scripts build-icons",
-    "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
+    "build:storybook": "storybook build --disable-telemetry",
     "build:storybook:test": "storybook build --test --disable-telemetry --output-dir storybook-test",
     "serve:storybook:test": "serve -p 9000 ./storybook-test",
     "build:storybook:local": "storybook build --disable-telemetry",
     "serve:storybook:local": "serve -p 9000 ./storybook-static",
-    "storybook": "storybook dev -p 6006",
-    "storybook:fix-paths": "tsx scripts/storybook-fix-paths.ts"
+    "storybook": "storybook dev -p 6006"
   },
   "author": "",
   "license": "MIT",
@@ -57,10 +60,10 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.0",
     "@playwright/test": "^1.58.1",
-    "@storybook/addon-a11y": "^10.2.3",
-    "@storybook/addon-docs": "^10.2.3",
-    "@storybook/addon-onboarding": "^10.2.3",
-    "@storybook/react-vite": "^10.2.3",
+    "@storybook/addon-a11y": "^10.2.6",
+    "@storybook/addon-docs": "^10.2.6",
+    "@storybook/addon-onboarding": "^10.2.6",
+    "@storybook/react-vite": "^10.2.6",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.10",
@@ -69,7 +72,7 @@
     "react-dom": "^19.2.4",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.5",
-    "storybook": "^10.2.3",
+    "storybook": "^10.2.6",
     "storybook-addon-tag-badges": "^3.0.5"
   },
   "peerDependencies": {
@@ -85,5 +88,5 @@
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "0dc65b79845a688be75d0b5c6118d2d2a727f7c5"
+  "gitHead": "d8324f6ee7c544c37f752b5e6eeb67cffff20237"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -44,7 +44,7 @@ const AlertBannerHeading = ({ children, className }: AlertBannerHeadingProps): J
   return <h2 className={className}>{children}</h2>
 }
 
-AlertBannerHeading.displayName = "AlertBanner.Heading"
+AlertBannerHeading.config = { name: "AlertBannerHeading" }
 
 AlertBanner.Heading = AlertBannerHeading
 

package/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
-import { LoadingIcon } from "../Icon"
+import { LoadingIcon } from "../icons"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */

package/src/components/Card/Card.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { useSlots } from "../../hooks/useSlots"
-import { ChevronRightIcon } from "../Icon/ChevronRightIcon"
+import { ChevronRightIcon } from "../icons/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
@@ -136,14 +136,10 @@ const CardHeading = ({ as = "h3", children, className }: CardHeadingProps): JSX.
   return React.createElement(as, { className: clsx("coop-card--heading", className) }, children)
 }
 
-CardHeading.displayName = "Card.Heading"
-
 const CardLabel = ({ children, className }: CardLabelProps): JSX.Element => {
   return <span className={clsx("coop-card--label", className)}>{children}</span>
 }
 
-CardLabel.displayName = "Card.Label"
-
 const CardBadge = ({
   align = "right",
   children,
@@ -157,19 +153,19 @@ const CardBadge = ({
   )
 }
 
-CardBadge.displayName = "Card.Badge"
-
 const CardBody = ({ children }: CardBodyProps): JSX.Element => {
   return <>{children}</>
 }
 
-CardBody.displayName = "Card.Body"
-
 const CardImage = (props: CardImageProps) => {
   return <Image {...{ ...props, crop: props.crop ?? "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