text: import React$1 from 'react';
  import { useFeatures } from '../../utilities/features/hooks.js';
  import { useI18n } from '../../utilities/i18n/hooks.js';
  import { classNames } from '../../utilities/css.js';
  import { Popover as Popover$1 } from '../Popover/Popover.js';
  import { ActionList as ActionList$1 } from '../ActionList/ActionList.js';
  import { Button as Button$1 } from '../Button/Button.js';
  import { buttonFrom } from '../Button/utils.js';
  import { useToggle as useToggle$1 } from '../../utilities/use-toggle.js';
  import { WithinContentContext } from '../../utilities/within-content-context.js';
  import { ButtonGroup as ButtonGroup$1 } from '../ButtonGroup/ButtonGroup.js';
  import styles from './Card.scss.js';
  import { Header as Header$1 } from './components/Header/Header.js';
  import { Section as Section$1 } from './components/Section/Section.js';
  import { Subsection as Subsection$1 } from './components/Subsection/Subsection.js';
  
  // TypeScript can't generate types that correctly infer the typing of
  // subcomponents so explicitly state the subcomponents in the type definition.
  // Letting this be implicit works in this project but fails in projects that use
  // generated *.d.ts files.
  const Card = function Card({
    children,
    title,
    subdued,
    sectioned,
    actions,
    primaryFooterAction,
    secondaryFooterActions,
    secondaryFooterActionsDisclosureText,
    footerActionAlignment = 'right'
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const {
      value: secondaryActionsPopoverOpen,
      toggle: toggleSecondaryActionsPopoverOpen
    } = useToggle$1(false);
    const className = classNames(styles.Card, subdued && styles.subdued, newDesignLanguage && styles.newDesignLanguage);
    const headerMarkup = title || actions ? /*#__PURE__*/React$1.createElement(Header$1, {
      actions: actions,
      title: title
    }) : null;
    const content = sectioned ? /*#__PURE__*/React$1.createElement(Section$1, null, children) : children;
    const primaryFooterActionMarkup = primaryFooterAction ? buttonFrom(primaryFooterAction, {
      primary: true
    }) : null;
    let secondaryFooterActionsMarkup = null;
  
    if (secondaryFooterActions && secondaryFooterActions.length) {
      if (secondaryFooterActions.length === 1) {
        secondaryFooterActionsMarkup = buttonFrom(secondaryFooterActions[0]);
      } else {
        secondaryFooterActionsMarkup = /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Popover$1, {
          active: secondaryActionsPopoverOpen,
          activator: /*#__PURE__*/React$1.createElement(Button$1, {
            disclosure: true,
            onClick: toggleSecondaryActionsPopoverOpen
          }, secondaryFooterActionsDisclosureText || i18n.translate('Polaris.Common.more')),
          onClose: toggleSecondaryActionsPopoverOpen
        }, /*#__PURE__*/React$1.createElement(ActionList$1, {
          items: secondaryFooterActions
        })));
      }
    }
  
    const footerMarkup = primaryFooterActionMarkup || secondaryFooterActionsMarkup ? /*#__PURE__*/React$1.createElement("div", {
      className: classNames(styles.Footer, footerActionAlignment === 'left' && styles.LeftJustified)
    }, footerActionAlignment === 'right' ? /*#__PURE__*/React$1.createElement(ButtonGroup$1, null, secondaryFooterActionsMarkup, primaryFooterActionMarkup) : /*#__PURE__*/React$1.createElement(ButtonGroup$1, null, primaryFooterActionMarkup, secondaryFooterActionsMarkup)) : null;
    return /*#__PURE__*/React$1.createElement(WithinContentContext.Provider, {
      value: true
    }, /*#__PURE__*/React$1.createElement("div", {
      className: className
    }, headerMarkup, content, footerMarkup));
  };
  Card.Header = Header$1;
  Card.Section = Section$1;
  Card.Subsection = Subsection$1;
  
  export { Card };
  