@box/blueprint-web 5.31.3

package/lib-esm/combobox/combobox.js

@@ -0,0 +1,422 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, SelectList, ComboboxPopover } from '@ariakit/react';
+import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
+import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import clsx from 'clsx';
+import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
+import { InputChip } from '../input-chip/input-chip.js';
+import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { TextArea } from '../text-area/text-area.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import { ChipsGroup } from './chips-group.js';
+import styles from './combobox.module.js';
+
+const getOptionValue = option => typeof option === 'string' ? option : option.value;
+const getOptionFromValue = (value, options) => options.find(option => typeof option === 'string' ? option === value : option.value === value);
+const RootInner = ({
+  as = 'input',
+  ...props
+}, ref) => {
+  const {
+    freeInput = false,
+    multiselect = false,
+    ...rest
+  } = props;
+  const {
+    disabled = false,
+    required = false,
+    className,
+    error,
+    hideLabel = false,
+    label,
+    defaultOpen = false,
+    open,
+    onOpenChange,
+    defaultInputValue = '',
+    inputValue: inputValueProp,
+    onInputValueChange,
+    defaultValue,
+    value: valueProp,
+    onValueChange,
+    displayValue,
+    displayAvatar,
+    renderOption,
+    options,
+    filterFn,
+    loading = false,
+    loadingAriaLabel = '',
+    noResultMessage = '',
+    clearOnBlur = !freeInput,
+    clearOnEscape = false,
+    portalElement,
+    hideSelectedOptions = false,
+    unmountOnHide = false,
+    experimentalVirtualization = false,
+    ...comboboxProps
+  } = rest;
+  const isInput = useMemo(() => as === 'input', [as]);
+  const inputRef = useRef(null);
+  const popoverRef = useRef(null);
+  const comboboxId = useUniqueId('combobox-');
+  const hasError = !!error && !disabled;
+  const comboboxStore = useComboboxStore({
+    // Input state
+    defaultValue: defaultInputValue,
+    value: inputValueProp,
+    setValue: onInputValueChange,
+    // Open state
+    defaultOpen: defaultOpen && !disabled,
+    open: open && !disabled,
+    setOpen: onOpenChange,
+    includesBaseElement: true,
+    virtualFocus: false
+  });
+  const {
+    setValue: setInputValue,
+    setOpen
+  } = comboboxStore;
+  const inputValue = comboboxStore.useState('value');
+  const isOpen = comboboxStore.useState('open');
+  const getSelectedOptionValues = useCallback(valueSource => {
+    return Array.isArray(valueSource) ? valueSource.map(val => getOptionValue(val)) : getOptionValue(valueSource);
+  }, []);
+  const getDefaultValue = () => {
+    /**
+     * It's necessary to explicitly set the defaultValue to an empty array
+     * when multiselect is true but no defaultValue is specified. Otherwise,
+     * Ariakit won't know that we want to have a multi-selectable combobox.
+     */
+    if (defaultValue == null) {
+      return multiselect ? [] : '';
+    }
+    return getSelectedOptionValues(defaultValue);
+  };
+  const initSelectValue = useMemo(() => {
+    if (valueProp == null) {
+      return undefined;
+    }
+    return getSelectedOptionValues(valueProp);
+  }, [getSelectedOptionValues, valueProp]);
+  const setValue = newSelectedValue => {
+    if (!onValueChange) {
+      return;
+    }
+    let selectedOption;
+    if (Array.isArray(newSelectedValue)) {
+      selectedOption = newSelectedValue.map(newValue => getOptionFromValue(newValue, options));
+    } else {
+      selectedOption = getOptionFromValue(newSelectedValue, options);
+    }
+    onValueChange(selectedOption);
+  };
+  const selectStore = useSelectStore({
+    combobox: comboboxStore,
+    defaultValue: getDefaultValue(),
+    value: initSelectValue,
+    setValue
+  });
+  const selectedValue = selectStore.useState('value');
+  const {
+    setValue: setSelectedValue
+  } = selectStore;
+  const filteredOptions = useMemo(() => {
+    const visibleOptions = filterFn ? options.filter(option => filterFn(inputValue, option)) : options;
+    if (!hideSelectedOptions) {
+      return visibleOptions;
+    }
+    return visibleOptions.filter(option => !selectedValue.includes(getOptionValue(option)));
+  }, [filterFn, options, hideSelectedOptions, inputValue, selectedValue]);
+  const getDisplayValueFromOptionValue = useCallback(optionValue => {
+    const option = getOptionFromValue(optionValue, options);
+    return displayValue && option ? displayValue(option) : optionValue;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [displayValue]);
+  const getDisplayAvatarFromOptionValue = useCallback(optionValue => {
+    const option = getOptionFromValue(optionValue, options);
+    return displayAvatar && option ? displayAvatar(option) : undefined;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [displayAvatar]);
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const renderSelectItemOption = useCallback(option => {
+    const value = getOptionValue(option);
+    return jsxs(OptionWithIndicator, {
+      ...(typeof option === 'object' ? option : {}),
+      disabled: typeof option === 'object' && option.disabled,
+      value: value,
+      children: [jsx(Indicator, {}), displayValue ? displayValue(option) : value]
+    });
+  }, [displayValue]);
+  const renderOptionFn = renderOption || renderSelectItemOption;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const selectedValueMemoized = useMemo(() => selectedValue, [JSON.stringify(selectedValue)]);
+  // Reset input whenever an option is checked or unchecked
+  useEffect(() => {
+    if (Array.isArray(selectedValueMemoized)) {
+      setInputValue('');
+    } else if (selectedValueMemoized) {
+      setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized));
+      // Also focus input for single-select variant
+      focusInput();
+    }
+  }, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue, focusInput]);
+  const handleKeyDown = useCallback(event => {
+    // Close menu
+    if (event.key === 'Enter' || event.key === 'Tab') {
+      setOpen(false);
+      return;
+    }
+    // Close menu or clear input
+    if (event.key === 'Escape') {
+      if (isOpen) {
+        setOpen(false);
+      } else {
+        if (!clearOnEscape) {
+          return;
+        }
+        setInputValue('');
+        setSelectedValue(multiselect ? [] : '');
+      }
+    }
+  }, [clearOnEscape, isOpen, multiselect, setInputValue, setOpen, setSelectedValue]);
+  // Reset input on blur
+  const handleOnBlur = useCallback(() => {
+    if (!clearOnBlur || isOpen) {
+      return;
+    }
+    setInputValue(Array.isArray(selectedValue) ? '' : getDisplayValueFromOptionValue(selectedValue));
+  }, [clearOnBlur, getDisplayValueFromOptionValue, isOpen, selectedValue, setInputValue]);
+  const removeInputChip = id => {
+    // For multi-select variant only
+    selectStore.setValue(prev => {
+      if (Array.isArray(prev)) {
+        // unselect corresponding option
+        const remainingValues = prev.filter(val => val !== id);
+        // focus combobox input if no more input chips
+        if (remainingValues.length === 0) {
+          focusInput();
+        }
+        // update state
+        return remainingValues;
+      }
+      // do nothing it single-select
+      return prev;
+    });
+  };
+  const reference = useForkRef(inputRef, ref);
+  const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
+  const inputComponent = isInput ? jsxs(Fragment, {
+    children: [jsx("label", {
+      className: clsx(styles.label, {
+        [styles.hiddenLabel]: hideLabel
+      }),
+      htmlFor: comboboxId,
+      children: hideLabel ? jsx(VisuallyHidden, {
+        children: label
+      }) : label
+    }), jsx(PopoverAnchor, {
+      store: comboboxStore,
+      children: jsxs("div", {
+        className: clsx(styles.comboboxContainer, {
+          [styles.error]: hasError,
+          [styles.withChipsGroup]: showChipsGroup
+        }),
+        children: [showChipsGroup && jsx(ChipsGroup, {
+          children: selectedValue.map(selected => jsx(InputChip, {
+            avatar: getDisplayAvatarFromOptionValue(selected),
+            label: getDisplayValueFromOptionValue(selected),
+            onDelete: () => removeInputChip(selected)
+          }, selected))
+        }), jsx("div", {
+          className: styles.textInputWrapper,
+          children: jsx(Combobox$1, {
+            ...comboboxProps,
+            ref: reference,
+            "aria-invalid": hasError,
+            "aria-required": required,
+            autoSelect: false,
+            className: styles.textInput,
+            disabled: disabled,
+            id: comboboxId,
+            onBlur: handleOnBlur,
+            onKeyDown: handleKeyDown,
+            required: required,
+            store: comboboxStore
+          })
+        })]
+      })
+    }), jsx(InlineError, {
+      className: styles.inlineError,
+      children: error
+    })]
+  }) : jsx(Combobox$1, {
+    ...comboboxProps,
+    autoSelect: false,
+    id: comboboxId,
+    render: jsx(TextArea, {
+      ref: reference,
+      "aria-invalid": hasError,
+      "aria-required": required,
+      className: styles.textInput,
+      disabled: disabled,
+      error: error,
+      hideLabel: hideLabel,
+      label: label,
+      onBlur: handleOnBlur,
+      onKeyDown: handleKeyDown,
+      required: required
+    }),
+    store: comboboxStore
+  });
+  const render = useCallback(popoverProps => jsx(SelectList, {
+    ...popoverProps,
+    "aria-multiselectable": true,
+    // Disable the composite behavior on the select list since combobox will handle it
+    composite: false,
+    store: selectStore,
+    // Disable typeahead so it doesn't conflict with typing on the combobox input
+    typeahead: false
+  }), [selectStore]);
+  const showLoading = loading && !!loadingAriaLabel;
+  return jsxs("div", {
+    className: clsx(styles.container, {
+      [styles.disabled]: disabled
+    }, className),
+    children: [inputComponent, showLoading || filteredOptions.length > 0 || filteredOptions.length <= 0 && noResultMessage ? jsx(ComboboxPopover, {
+      ref: popoverRef,
+      "aria-labelledby": comboboxId,
+      className: styles.popover,
+      fitViewport: true,
+      gutter: 8,
+      portal: true,
+      portalElement: portalElement,
+      render: render,
+      sameWidth: true,
+      store: comboboxStore,
+      unmountOnHide: unmountOnHide,
+      children: jsx(Collection, {
+        experimentalVirtualization: experimentalVirtualization,
+        inputValue: inputValue,
+        loadingAriaLabel: loadingAriaLabel,
+        noResultMessage: noResultMessage,
+        options: filteredOptions,
+        overscan: 2,
+        renderOptionFn: renderOptionFn,
+        showLoading: showLoading
+      })
+    }) : null]
+  });
+};
+const Root = /*#__PURE__*/forwardRef(RootInner);
+const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
+  return jsx(SelectItemCheck, {
+    ref: ref,
+    className: styles.indicator,
+    // Remove width and height styles to unset values from Ariakit
+    style: {
+      width: 'none',
+      height: 'none'
+    },
+    children: jsx(Checkmark, {
+      className: styles.indicatorIcon
+    })
+  });
+});
+Indicator.displayName = 'Combobox.Indicator';
+const Option = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    value,
+    disabled,
+    className,
+    ...rest
+  } = props;
+  return jsx(SelectItem, {
+    ref: ref,
+    autoFocus: false,
+    className: clsx(styles.option, className),
+    disabled: disabled,
+    focusOnHover: false,
+    /* eslint-disable react/jsx-no-bind */
+    render: itemProps => jsx(ComboboxItem, {
+      ...itemProps,
+      disabled: disabled,
+      children: children
+    }),
+    value: value,
+    ...rest
+  });
+});
+Option.displayName = 'Combobox.Option';
+const OptionWithIndicator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...optionProps
+  } = props;
+  return jsxs(Option, {
+    ref: ref,
+    ...optionProps,
+    className: clsx(styles.optionWithIndicator, className),
+    children: [jsx(Indicator, {}), children]
+  });
+});
+OptionWithIndicator.displayName = 'Combobox.OptionWithIndicator';
+const Combobox = Object.assign(Root, {
+  Option,
+  OptionWithIndicator,
+  Indicator
+});
+const Collection = ({
+  options,
+  experimentalVirtualization,
+  renderOptionFn,
+  inputValue,
+  noResultMessage = '',
+  overscan,
+  showLoading,
+  loadingAriaLabel
+}) => {
+  const resultsFound = options.length > 0;
+  if (showLoading) {
+    return jsx(Option, {
+      disabled: true,
+      children: jsx(LoadingIndicator, {
+        "aria-label": loadingAriaLabel,
+        className: styles.loadingIndicator
+      })
+    });
+  }
+  if (resultsFound) {
+    return experimentalVirtualization ? jsx(SelectRenderer, {
+      id: "collection-renderer" // without id, combobox crashes with prop defaultOpen={true}
+      ,
+      items: options,
+      overscan: overscan,
+      children: option => {
+        const key = getOptionValue(option);
+        return jsx(React__default.Fragment, {
+          children:
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          renderOptionFn(option)
+        }, key);
+      }
+    }, inputValue) : jsx(Fragment, {
+      children: options.map(option => jsx(React__default.Fragment, {
+        children: renderOptionFn(option)
+      }, typeof option === 'string' ? option : option.value))
+    });
+  }
+  return typeof noResultMessage === 'string' ? jsx(Option, {
+    disabled: true,
+    children: noResultMessage
+  }) : noResultMessage;
+};
+
+export { Combobox, Root };

package/lib-esm/combobox/combobox.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"container":"combobox-module_container__9gL43","disabled":"combobox-module_disabled__RMcKi","label":"combobox-module_label__jsQE1","hiddenLabel":"combobox-module_hiddenLabel__P2V7Q","comboboxContainer":"combobox-module_comboboxContainer__qLp7x","error":"combobox-module_error__-3LkW","textInputWrapper":"combobox-module_textInputWrapper__ygic9","textInput":"combobox-module_textInput__n26dz","errorIcon":"combobox-module_errorIcon__61HpQ","withChipsGroup":"combobox-module_withChipsGroup__MXt4s","inlineError":"combobox-module_inlineError__zGyvx","popover":"combobox-module_popover__Tps-g","option":"combobox-module_option__uSqrC","indicator":"combobox-module_indicator__-OqBm","indicatorIcon":"combobox-module_indicatorIcon__CgKMF","optionWithIndicator":"combobox-module_optionWithIndicator__pNwKk","loadingIndicator":"combobox-module_loadingIndicator__WBwaf","noResultOption":"combobox-module_noResultOption__Tw9aZ"};
+
+export { styles as default };

package/lib-esm/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './combobox';
+export * from './types';

package/lib-esm/combobox/types.d.ts

@@ -0,0 +1,206 @@
+/// <reference types="react" />
+import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
+import { type TextAreaProps } from '../text-area/types';
+export type OptionValue = {
+    value: string;
+    disabled?: boolean;
+} | string;
+export type SingleSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string : T;
+export type MultiSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string[] : T[];
+export type ComboboxValue<Multiple, FreeInput, T> = Multiple extends true ? MultiSelectComboboxValue<FreeInput, T> : SingleSelectComboboxValue<FreeInput, T>;
+export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> {
+    /**
+     * The label for the combobox.
+     */
+    label: string;
+    /**
+     * The list of values for the combobox items.
+     */
+    options: T[];
+    /**
+     * If set to `true`, the combobox input can contain any arbitrary value.
+     * In other words, options just behave as suggestions and the user input
+     * is not bound to the provided options.
+     */
+    freeInput?: FreeInput;
+    /**
+     * The placeholder of the combobox input.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the menu will support multiple selections.
+     *
+     * @default false
+     */
+    multiselect?: Multiple;
+    /**
+     * The `open` state of the combobox content when it is initially rendered. Use when you do not need to control its `open` state.
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled `open` state of the combobox content. Must be used in conjunction with `onOpenChange`.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the `open` state of the combobox changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The input value when initially rendered.
+     */
+    defaultInputValue?: string;
+    /**
+     * The input value of the combobox. Should be used in conjunction with `onInputValueChange`.
+     */
+    inputValue?: string;
+    /**
+     * Event handler called when the input value change.
+     */
+    onInputValueChange?: (value: string) => void;
+    /**
+     * The selected value(s) when initially rendered.
+     */
+    defaultValue?: ComboboxValue<Multiple, FreeInput, T>;
+    /**
+     * The controlled value(s) of the combobox. Should be used in conjunction with `onValueChange`.
+     */
+    value?: ComboboxValue<Multiple, FreeInput, T>;
+    /**
+     * Event handler called when the selected value(s) change.
+     */
+    onValueChange?: (value: ComboboxValue<Multiple, FreeInput, T>) => void;
+    /**
+     * The string representation of your `value`.
+     *
+     * It is used to fill the options in the dropdown menu and either:
+     *  - the input value on select option (single-select combobox), or
+     *  - the chip labels on select options (multi-select combobox)
+     */
+    displayValue?: (value: T) => string;
+    /**
+     * Return a JSX representations of an avatar used for InputChip when multiselect is selected.
+     * If not provided `displayValue()` is used to render select option item with a checkmark.
+     */
+    displayAvatar?: (option: T) => React.ReactElement | undefined;
+    /**
+     * Return a JSX representations of an option displayed in Combobox dropdown
+     * If not provided `displayValue()` is used to render select option item with a checkmark.
+     */
+    renderOption?: (option: T) => React.ReactElement;
+    /**
+     * Use this prop to filter options in the combobox based on the user's input.
+     *
+     * It should return `true` if the `value` should be displayed as an option in the combobox for the given `query`, and `false` otherwise.
+     *
+     * If left `undefined`, all options will be shown.
+     */
+    filterFn?: (query: string, value: T) => boolean;
+    /**
+     * If `true`, prevent showing selected options in options array. As a general guideline, this is
+     * used when the options list is dynamic and non-finite (ie connected via API with dynamic results).
+     * This should primarily be used with the multiselect option.
+     *
+     * @default false
+     */
+    hideSelectedOptions?: boolean;
+    /**
+     * Default message when there are no matches found.
+     */
+    noResultMessage?: React.ReactElement | string;
+    /**
+     * If `true`, the input's text is cleared on blur if no value is selected.
+     *
+     * @default !props.freeInput
+     */
+    clearOnBlur?: boolean;
+    /**
+     * If `true`, clear all values when the user presses escape and the dropdown menu is closed.
+     */
+    clearOnEscape?: boolean;
+    /**
+     * The name of the combobox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * When `true`, prevents the user from interacting with combobox.
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, indicates that the user must select a value before the owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * When true a loading indicator is shown in the popover
+     */
+    loading?: boolean;
+    /**
+     * The aria-label for the loading indicator.
+     */
+    loadingAriaLabel?: string;
+    /**
+     * Extend the styles applied to the component.
+     */
+    className?: string;
+    /**
+     * When `true`, label text is hidden.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * The content of the error message
+     */
+    error?: React.ReactNode;
+    /**
+     * The DOM element where the Combobox should be portal-ed into. If not provided, the Combobox will be appended to the document body.
+     */
+    portalElement?: HTMLElement;
+    /**
+     * When set to `true`, the content element will be unmounted and removed from the DOM when it's hidden.
+     */
+    unmountOnHide?: boolean;
+    /**
+     * When set to `true`, list is virtualized using experimental feature of underlying lib.
+     * @default false
+     */
+    experimentalVirtualization?: boolean;
+}
+export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength'> & {
+    as: 'textarea';
+};
+export type ConditionalComboboxProps = ComboboxTextArea | {
+    as: 'input';
+};
+export type ComboboxProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = ComboboxBaseProps<Multiple, FreeInput, T> & ConditionalComboboxProps;
+export interface ComboboxOptionProps {
+    /**
+     * The content to render for the combobox option.
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the combobox option.
+     */
+    value?: string;
+    /**
+     * When `true`, prevents the user from interacting with the combobox option.
+     */
+    disabled?: boolean;
+    /**
+     * Extend the styles applied to the component.
+     */
+    className?: string;
+}
+export interface CollectionProps<T> {
+    options: Array<T>;
+    experimentalVirtualization: boolean;
+    inputValue: string;
+    renderOptionFn: (option: T) => React.ReactElement;
+    noResultMessage?: React.ReactElement | string;
+    overscan: SelectRendererProps['overscan'];
+    showLoading?: boolean;
+    loadingAriaLabel: string;
+}

package/lib-esm/content-card/content-card-body.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type ElementTypes } from '../text/types';
+declare const ContentCardBody: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<ElementTypes>>;
+export default ContentCardBody;

package/lib-esm/content-card/content-card-body.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../text/text.js';
+import styles from './content-card.module.js';
+
+const ContentCardBody = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    className: clsx(styles.cardBody, className),
+    children: jsx(Text, {
+      ...rest,
+      ref: forwardedRef,
+      as: "p",
+      className: styles.cardBodyText,
+      color: "textOnLightDefault",
+      variant: "bodyDefault",
+      children: children
+    })
+  });
+});
+ContentCardBody.displayName = 'ContentCard.Body';
+
+export { ContentCardBody as default };

package/lib-esm/content-card/content-card-footer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ContentCardFooter: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default ContentCardFooter;

package/lib-esm/content-card/content-card-footer.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const ContentCardFooter = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    children: children
+  });
+});
+ContentCardFooter.displayName = 'ContentCard.Footer';
+
+export { ContentCardFooter as default };