import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.object.get-own-property-descriptor.js';
import 'core-js/modules/es.object.get-own-property-descriptors.js';
import 'core-js/modules/es.object.keys.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import isEmpty from '../../node_modules/lodash-es/isEmpty.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.find.js';
import 'core-js/modules/es.array.iterator.js';
import 'core-js/modules/es.array.slice.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.object.values.js';
import 'core-js/modules/web.dom-collections.iterator.js';
import React__default, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
import { SkeletonText } from '@carbon/react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import warning from 'warning';
import useVisibilityObserver from '../../hooks/useVisibilityObserver.js';
import { settings } from '../../constants/Settings.js';
import { CARD_SIZES, CARD_LAYOUTS, ROW_HEIGHT, DASHBOARD_SIZES, CARD_DIMENSIONS, DASHBOARD_BREAKPOINTS, DASHBOARD_COLUMNS, CARD_TYPES, CARD_CONTENT_PADDING, CARD_TITLE_HEIGHT } from '../../constants/LayoutConstants.js';
import { CardPropTypes } from '../../constants/CardPropTypes.js';
import { getCardMinSize, filterValidAttributes } from '../../utils/componentUtilityFunctions.js';
import { getTranslatedLabel, getUpdatedCardSize, useCardResizing } from '../../utils/cardUtilityFunctions.js';
import { parseValue } from '../DateTimePicker/dateTimePickerUtils.js';
import useSizeObserver from '../../hooks/useSizeObserver.js';
import EmptyState from '../EmptyState/EmptyState.js';
import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
import CardTypeContent from './CardTypeContent.js';
import CardToolbar from './CardToolbar.js';
import { CardTitle } from './CardTitle.js';

var _excluded = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
  _excluded2 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels", "backgroundGradient", "theme"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var prefix = settings.prefix,
  iotPrefix = settings.iotPrefix;
var OptimizedSkeletonText = /*#__PURE__*/React__default.memo(SkeletonText);

/** Full card */
var CardWrapper = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
  var isSelected = _ref.isSelected,
    children = _ref.children,
    dimensions = _ref.dimensions,
    id = _ref.id,
    style = _ref.style,
    className = _ref.className,
    onScroll = _ref.onScroll,
    onMouseDown = _ref.onMouseDown,
    onMouseUp = _ref.onMouseUp,
    onTouchEnd = _ref.onTouchEnd,
    onTouchStart = _ref.onTouchStart,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    tabIndex = _ref.tabIndex,
    testID = _ref.testID,
    testId = _ref.testId,
    others = _objectWithoutProperties(_ref, _excluded);
  var validOthers = filterValidAttributes(others);
  return /*#__PURE__*/React__default.createElement("div", _extends({
    ref: ref,
    "data-testid": testID || testId,
    id: id,
    role: "presentation",
    style: _objectSpread(_objectSpread({}, style), {}, {
      '--card-default-height': "".concat(dimensions.y, "px")
    }),
    onMouseDown: onMouseDown,
    onMouseUp: onMouseUp,
    onTouchEnd: onTouchEnd,
    onTouchStart: onTouchStart,
    onScroll: onScroll,
    onFocus: onFocus,
    onBlur: onBlur,
    tabIndex: tabIndex,
    className: classnames(className, "".concat(iotPrefix, "--card--wrapper"), _defineProperty({}, "".concat(iotPrefix, "--card--wrapper__selected"), isSelected))
  }, validOthers), children);
});

/** Header components */
var CardHeader = function CardHeader(_ref2 // eslint-disable-line react/prop-types
) {
  var children = _ref2.children,
    testId = _ref2.testId,
    hasSubtitle = _ref2.hasSubtitle;
  return /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    className: classnames("".concat(iotPrefix, "--card--header"), _defineProperty({}, "".concat(iotPrefix, "--card--header--with-subtitle"), hasSubtitle))
  }, children);
};
var CardContent = function CardContent(props) {
  var children = props.children,
    dimensions = props.dimensions,
    isExpanded = props.isExpanded,
    className = props.className,
    testId = props.testId,
    noPadding = props.noPadding,
    hasFooter = props.hasFooter;
  var height = "".concat(dimensions.y - CARD_TITLE_HEIGHT - (hasFooter ? '40' : '0'), "px");
  return /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    style: _defineProperty({}, "--card-content-height", height),
    className: classnames(className, "".concat(iotPrefix, "--card--content"), _defineProperty(_defineProperty({}, "".concat(iotPrefix, "--card--content--expanded"), isExpanded), "".concat(iotPrefix, "--card__content--no-padding"), noPadding))
  }, children);
};
CardWrapper.propTypes = {
  /**
   * Is given the event as argument. Should return true or false if event should trigger selection
   */
  isSelected: PropTypes.bool,
  children: PropTypes.node.isRequired,
  dimensions: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number
  }).isRequired,
  id: CardPropTypes.id,
  style: PropTypes.objectOf(PropTypes.string),
  testId: CardPropTypes.testId,
  onMouseDown: PropTypes.func,
  onMouseUp: PropTypes.func,
  onTouchEnd: PropTypes.func,
  onTouchStart: PropTypes.func,
  onScroll: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  /** Optionally sets a keyboard tab index for the container */
  tabIndex: PropTypes.number
};
CardWrapper.defaultProps = {
  isSelected: false,
  id: undefined,
  style: undefined,
  testId: 'Card',
  onMouseDown: undefined,
  onMouseUp: undefined,
  onTouchEnd: undefined,
  onTouchStart: undefined,
  onScroll: undefined,
  onFocus: undefined,
  onBlur: undefined,
  tabIndex: undefined
};
CardContent.propTypes = {
  testId: PropTypes.string,
  className: PropTypes.string,
  children: PropTypes.node,
  dimensions: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number
  }).isRequired,
  isExpanded: CardPropTypes.isExpanded.isRequired,
  noPadding: PropTypes.bool,
  // define the actual card content depending if it has a footer or not
  hasFooter: PropTypes.bool
};
CardContent.defaultProps = {
  children: undefined,
  className: '',
  testId: 'card-content',
  noPadding: false,
  hasFooter: false
};
({
  children: PropTypes.node.isRequired
});
var defaultProps = {
  size: CARD_SIZES.MEDIUM,
  layout: CARD_LAYOUTS.HORIZONTAL,
  title: undefined,
  subtitle: undefined,
  hasTitleWrap: false,
  toolbar: undefined,
  hideHeader: false,
  hideTitle: false,
  timeRange: undefined,
  isLoading: false,
  isEmpty: false,
  /** In editable mode we'll show preview data */
  isEditable: false,
  isExpanded: false,
  /** performance option: only render the content of the card to the ReactDOM if the card is visible on screen */
  isLazyLoading: false,
  theme: 'light',
  /** For now we will hide the per card actions when we're editing */
  availableActions: {
    edit: false,
    clone: false,
    delete: false,
    range: false,
    expand: false,
    settings: false,
    extra: false
  },
  renderExpandIcon: undefined,
  renderDateDropdownInPortal: true,
  rowHeight: ROW_HEIGHT,
  breakpoint: DASHBOARD_SIZES.LARGE,
  cardDimensions: CARD_DIMENSIONS,
  dashboardBreakpoints: DASHBOARD_BREAKPOINTS,
  dashboardColumns: DASHBOARD_COLUMNS,
  i18n: {
    noDataLabel: 'No data is available for this time range.',
    noDataShortLabel: 'No data',
    errorLoadingDataLabel: 'Error loading data for this card: ',
    errorLoadingDataShortLabel: 'Data error.',
    timeRangeLabel: 'Time range',
    rollingPeriodLabel: 'Rolling period',
    defaultLabel: 'Default',
    last24HoursLabel: 'Last 24 hrs',
    last7DaysLabel: 'Last 7 days',
    lastMonthLabel: 'Last month',
    lastQuarterLabel: 'Last quarter',
    lastYearLabel: 'Last year',
    periodToDateLabel: 'Period to date',
    thisWeekLabel: 'This week',
    thisMonthLabel: 'This month',
    thisQuarterLabel: 'This quarter',
    thisYearLabel: 'This year',
    selectTimeRangeLabel: 'Select time range',
    hourlyLabel: 'Hourly',
    dailyLabel: 'Daily',
    weeklyLabel: 'Weekly',
    monthlyLabel: 'Monthly',
    editCardLabel: 'Edit card',
    cloneCardLabel: 'Clone card',
    deleteCardLabel: 'Delete card',
    closeLabel: 'Close',
    expandLabel: 'Expand to fullscreen',
    overflowMenuDescription: 'Open and close list of options',
    toLabel: 'to',
    extraActionLabel: 'Action Label',
    titleTooltipIconDescription: 'Tooltip info icon'
  },
  onMouseDown: undefined,
  onMouseUp: undefined,
  onTouchEnd: undefined,
  onTouchStart: undefined,
  onScroll: undefined,
  onFocus: undefined,
  onBlur: undefined,
  tabIndex: undefined,
  testId: CardWrapper.defaultProps.testId,
  tooltip: undefined,
  titleTextTooltip: undefined,
  footerContent: undefined,
  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
  padding: 'default',
  overrides: undefined,
  type: null,
  data: null,
  content: null,
  shouldUseTranslatedLabels: false,
  backgroundGradient: null
};

/** Dumb component that renders the card basics */
var Card = function Card(props) {
  var _overrides$errorMessa, _overrides$errorMessa2, _overrides$errorMessa3;
  var size = props.size,
    children = props.children,
    titleProp = props.title,
    subtitleProp = props.subtitle,
    hasTitleWrap = props.hasTitleWrap;
    props.layout;
    var isLoading = props.isLoading,
    isEmptyProp = props.isEmpty,
    isEditable = props.isEditable,
    isExpanded = props.isExpanded,
    isLazyLoading = props.isLazyLoading,
    isResizable = props.isResizable,
    wrappingCardResizeHandles = props.resizeHandles,
    error = props.error,
    hideHeader = props.hideHeader,
    hideTitle = props.hideTitle,
    id = props.id,
    tooltipProp = props.tooltip,
    titleTextTooltip = props.titleTextTooltip,
    timeRange = props.timeRange,
    timeRangeOptions = props.timeRangeOptions,
    onCardAction = props.onCardAction,
    availableActions = props.availableActions,
    renderExpandIcon = props.renderExpandIcon,
    renderDateDropdownInPortal = props.renderDateDropdownInPortal,
    breakpoint = props.breakpoint,
    i18n = props.i18n,
    style = props.style,
    className = props.className;
    props.values;
    var testID = props.testID,
    testId = props.testId,
    contentClassName = props.contentClassName,
    CardFooter = props.footerContent,
    dateTimeMask = props.dateTimeMask,
    extraActions = props.extraActions,
    padding = props.padding,
    overrides = props.overrides,
    type = props.type,
    data = props.data,
    content = props.content,
    extraHeaderContent = props.extraHeaderContent,
    timeZone = props.timeZone,
    shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
    backgroundGradient = props.backgroundGradient,
    theme = props.theme,
    others = _objectWithoutProperties(props, _excluded2);
  var effectiveTimezone = timeZone || dayjs.tz.guess();
  dayjs.tz.setDefault(effectiveTimezone);
  // Get translated title if shouldUseTranslatedLabels is true
  var title = getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
  var tooltip = getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n);

  // TODO: remove once final version of range prop is supported
  useEffect(function () {
    if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
      warning(false, 'The Card components availableActions.range is an experimental property and may be subject to change.') ;
    }
  }, [availableActions]);
  var ErrorMessage = (overrides === null || overrides === void 0 || (_overrides$errorMessa = overrides.errorMessage) === null || _overrides$errorMessa === void 0 ? void 0 : _overrides$errorMessa.component) || EmptyState;

  // Checks size property against new size naming convention and reassigns to closest supported size if necessary.
  var newSize = getUpdatedCardSize(size);
  var _useSizeObserver = useSizeObserver(),
    _useSizeObserver2 = _slicedToArray(_useSizeObserver, 2),
    cardSize = _useSizeObserver2[0],
    cardRef = _useSizeObserver2[1];
  var isSmall = newSize === CARD_SIZES.SMALL || newSize === CARD_SIZES.SMALLWIDE || newSize === CARD_SIZES.SMALLFULL;
  var isLargeThin = newSize === CARD_SIZES.LARGETHIN;
  var isMediumThin = newSize === CARD_SIZES.MEDIUMTHIN;
  var isSmallOrThin = isSmall || isMediumThin || isLargeThin;
  var dimensions = getCardMinSize(breakpoint, newSize, others.dashboardBreakpoints, others.cardDimensions, others.rowHeight, others.dashboardColumns);

  // Need to cache the default available actions so it doesn't rerender
  var mergedAvailableActions = useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.availableActions), availableActions);
  }, [availableActions]);
  var hasToolbarActions = Boolean(Object.values(mergedAvailableActions).find(function (action) {
    return action !== false;
  }));
  var strings = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  var getTheSubtitle = useMemo(function () {
    if (subtitleProp) {
      return subtitleProp;
    }
    if (mergedAvailableActions.range === 'full' || mergedAvailableActions.range === 'iconOnly') {
      var _parseValue = parseValue(timeRange, dateTimeMask, strings.toLabel, true, effectiveTimezone),
        readableValue = _parseValue.readableValue;
      return readableValue;
    }
    return undefined;
  }, [dateTimeMask, mergedAvailableActions.range, strings.toLabel, subtitleProp, timeRange, effectiveTimezone]);
  var _useState = useState(getTheSubtitle),
    _useState2 = _slicedToArray(_useState, 2),
    subtitle = _useState2[0],
    setSubtitle = _useState2[1];
  useEffect(function () {
    setSubtitle(getTheSubtitle);
  }, [getTheSubtitle, subtitleProp]);

  /** adds the id to the card action */
  var cachedOnCardAction = useCallback(function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    var action = args[0],
      value = args[1];
    if (action === 'CHANGE_TIME_RANGE' && !subtitleProp) {
      if (value.timeRangeKind === 'PRESET') {
        setSubtitle(value.timeRangeValue.tooltipValue);
      } else if (!value.range) {
        setSubtitle(value.timeRangeValue.humanValue);
      }
    }
    onCardAction.apply(void 0, [id].concat(args));
  }, [subtitleProp, onCardAction, id]);
  var getChildSize = function getChildSize(theSize, cardTitle) {
    var childSize = _objectSpread(_objectSpread({}, theSize), {}, {
      height: cardTitle === null || cardTitle === undefined ? theSize.height : theSize.height - CARD_TITLE_HEIGHT
    });
    return childSize;
  };
  if (titleTextTooltip && tooltip) {
    warning(false, 'The props titleTextTooltip and tooltip cannot be combined. Now using titleTextTooltip') ;
  }
  if (titleTextTooltip && hasTitleWrap) {
    warning(false, 'The props titleTextTooltip and hasTitleWrap cannot be combined. Now using titleTextTooltip') ;
  }
  var visibilityRef = useRef(null);
  var _useVisibilityObserve = useVisibilityObserver(visibilityRef, {
      unobserveAfterVisible: true
    }),
    _useVisibilityObserve2 = _slicedToArray(_useVisibilityObserve, 1),
    isVisible = _useVisibilityObserve2[0];
  var _useCardResizing = useCardResizing(wrappingCardResizeHandles, children, isResizable),
    resizeHandles = _useCardResizing.resizeHandles,
    isResizing = _useCardResizing.isResizing;

  // support passing the card toolbar through to the custom card
  var cardToolbar = hasToolbarActions ? /*#__PURE__*/React__default.createElement(CardToolbar, {
    width: cardSize.width,
    availableActions: mergedAvailableActions,
    renderExpandIcon: renderExpandIcon,
    renderDateDropdownInPortal: renderDateDropdownInPortal,
    i18n: strings,
    isEditable: isEditable,
    isExpanded: isExpanded,
    timeRange: timeRange,
    locale: others.locale,
    timeZone: effectiveTimezone,
    timeRangeOptions: timeRangeOptions,
    onCardAction: cachedOnCardAction
    // TODO: remove deprecated testID prop in v3
    ,
    testId: "".concat(testID || testId, "-toolbar"),
    dateTimeMask: dateTimeMask,
    extraActions: extraActions,
    id: id
  }) : null;
  var isSupportedType = type === CARD_TYPES.METER_CHART || type === CARD_TYPES.SPARKLINE_CHART || type === CARD_TYPES.STACKED_AREA_CHART;

  // validate if the data is empty or prop says it's empty
  var isCardEmpty = isSupportedType && isEmpty(data) || isEmptyProp;
  var card = /*#__PURE__*/React__default.createElement(CardWrapper, _extends({}, others, {
    // you need all of these to support dynamic positioning during edit
    ref: function ref(node) {
      if (node) {
        visibilityRef.current = node;
        cardRef(node);
      }
    }
    // TODO: remove deprecated testID prop in v3
    ,
    testId: testID || testId,
    id: id,
    dimensions: dimensions,
    isExpanded: isExpanded,
    style: !isExpanded ? _objectSpread(_objectSpread({}, style), backgroundGradient && {
      background: backgroundGradient
    }) : _objectSpread({
      height: 'calc(100% - 50px)',
      width: 'calc(100% - 50px)'
    }, backgroundGradient && {
      background: backgroundGradient
    }),
    className: classnames("".concat(iotPrefix, "--card"), "".concat(iotPrefix, "--card--").concat(theme), className, _defineProperty({}, "".concat(iotPrefix, "--card--resizing"), isResizing))
  }), !hideHeader && !hideTitle && /*#__PURE__*/React__default.createElement(CardHeader
  // TODO: remove deprecated testID prop in v3
  , {
    testId: "".concat(testID || testId, "-header"),
    hasSubtitle: !!subtitle
  }, /*#__PURE__*/React__default.createElement(CardTitle
  // TODO: remove deprecated testID prop in v3
  , {
    id: id,
    hasTitleWrap: hasTitleWrap,
    subtitle: subtitle,
    title: title,
    titleTextTooltip: titleTextTooltip,
    infoIconTooltip: tooltip,
    titleTooltipIconDescription: strings.titleTooltipIconDescription // To fix accessibility violation.
    ,
    testId: "".concat(testID || testId)
  }), cardToolbar, extraHeaderContent), /*#__PURE__*/React__default.createElement(CardContent
  // TODO: remove deprecated testID prop in v3
  , {
    testId: "".concat(testID || testId, "-content"),
    dimensions: dimensions,
    isExpanded: isExpanded,
    className: contentClassName,
    noPadding: padding === 'none',
    hasFooter: !!CardFooter
  }, hideTitle && cardToolbar, hideTitle && extraHeaderContent, !isVisible && isLazyLoading ?
  // if not visible don't show anything
  '' : isLoading ? /*#__PURE__*/React__default.createElement("div", {
    style: {
      '--card-content-padding': "".concat(CARD_CONTENT_PADDING, "px")
    },
    className: "".concat(iotPrefix, "--card--skeleton-wrapper")
  }, /*#__PURE__*/React__default.createElement(OptimizedSkeletonText, {
    paragraph: true,
    lineCount: isSmallOrThin ? 2 : 3,
    width: "100%"
  })) : error ? /*#__PURE__*/React__default.createElement(ErrorMessage, _extends({
    icon: isSmall ? '' : 'error',
    title: strings.errorLoadingDataShortLabel,
    body: error
  }, overrides === null || overrides === void 0 || (_overrides$errorMessa2 = overrides.errorMessage) === null || _overrides$errorMessa2 === void 0 ? void 0 : _overrides$errorMessa2.props)) : isCardEmpty && !isEditable ? /*#__PURE__*/React__default.createElement(ErrorMessage, _extends({
    title: isSmallOrThin ? strings.noDataShortLabel : strings.noDataLabel,
    icon: isSmall ? '' : 'empty',
    body: ""
  }, overrides === null || overrides === void 0 || (_overrides$errorMessa3 = overrides.errorMessage) === null || _overrides$errorMessa3 === void 0 ? void 0 : _overrides$errorMessa3.props)) : isSupportedType ?
  /*#__PURE__*/
  // render card content based on supported type
  // TODO: remove deprecated testID prop in v3
  React__default.createElement(CardTypeContent, {
    testId: testID || testId,
    isExpanded: isExpanded,
    type: type,
    data: data,
    content: content
  }) : Array.isArray(children) && typeof (children === null || children === void 0 ? void 0 : children[0]) === 'function' ?
  // pass the measured size down to the children if it's an render function
  [// first option is a function
  children === null || children === void 0 ? void 0 : children[0](getChildSize(cardSize, title), _objectSpread({
    cardToolbar: cardToolbar
  }, props)), // second and third options are the resizable handles
  children === null || children === void 0 ? void 0 : children.slice(1)] : typeof children === 'function' ? children === null || children === void 0 ? void 0 : children(getChildSize(cardSize, title), _objectSpread({
    cardToolbar: cardToolbar
  }, props)) : children), CardFooter ? /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--card--footer--wrapper"),
    "data-testid": "".concat(testID || testId, "-footer")
  }, /*#__PURE__*/React__default.createElement(CardFooter, null)) : null, resizeHandles);
  return isExpanded ? /*#__PURE__*/React__default.createElement("div", {
    "data-floating-menu-container": true // needed to place overflow floating menus within the modal so we can control them through css
    ,
    className: "".concat(prefix, "--modal is-visible")
  }, card) : card;
};
Card.propTypes = CardPropTypes;
Card.defaultProps = defaultProps;
Card.__docgenInfo = {
  "description": "Dumb component that renders the card basics",
  "methods": [],
  "displayName": "Card",
  "props": {
    "size": {
      "defaultValue": {
        "value": "CARD_SIZES.MEDIUM",
        "computed": true
      },
      "required": false
    },
    "layout": {
      "defaultValue": {
        "value": "CARD_LAYOUTS.HORIZONTAL",
        "computed": true
      },
      "required": false
    },
    "title": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "subtitle": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "hasTitleWrap": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "toolbar": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "hideHeader": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "hideTitle": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "timeRange": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "isLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "isEmpty": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "isEditable": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "isExpanded": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "isLazyLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "theme": {
      "defaultValue": {
        "value": "'light'",
        "computed": false
      },
      "required": false
    },
    "availableActions": {
      "defaultValue": {
        "value": "{\n  edit: false,\n  clone: false,\n  delete: false,\n  range: false,\n  expand: false,\n  settings: false,\n  extra: false,\n}",
        "computed": false
      },
      "required": false
    },
    "renderExpandIcon": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "renderDateDropdownInPortal": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "required": false
    },
    "rowHeight": {
      "defaultValue": {
        "value": "ROW_HEIGHT",
        "computed": true
      },
      "required": false
    },
    "breakpoint": {
      "defaultValue": {
        "value": "DASHBOARD_SIZES.LARGE",
        "computed": true
      },
      "required": false
    },
    "cardDimensions": {
      "defaultValue": {
        "value": "CARD_DIMENSIONS",
        "computed": true
      },
      "required": false
    },
    "dashboardBreakpoints": {
      "defaultValue": {
        "value": "DASHBOARD_BREAKPOINTS",
        "computed": true
      },
      "required": false
    },
    "dashboardColumns": {
      "defaultValue": {
        "value": "DASHBOARD_COLUMNS",
        "computed": true
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n  titleTooltipIconDescription: 'Tooltip info icon',\n}",
        "computed": false
      },
      "required": false
    },
    "onMouseDown": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "onMouseUp": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "onTouchEnd": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "onTouchStart": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "onScroll": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "onFocus": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "onBlur": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "tabIndex": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "CardWrapper.defaultProps.testId",
        "computed": true
      },
      "required": false
    },
    "tooltip": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "titleTextTooltip": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "footerContent": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "dateTimeMask": {
      "defaultValue": {
        "value": "DAYJS_INPUT_FORMATS.RANGE",
        "computed": true
      },
      "required": false
    },
    "padding": {
      "defaultValue": {
        "value": "'default'",
        "computed": false
      },
      "required": false
    },
    "overrides": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "type": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    },
    "data": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    },
    "content": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    },
    "shouldUseTranslatedLabels": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "backgroundGradient": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    }
  },
  "composes": ["../../constants/CardPropTypes"]
};
var Card$1 = Card;
CardHeader.__docgenInfo = {
  "description": "Header components",
  "methods": [],
  "displayName": "CardHeader"
};

export { CardHeader, Card$1 as default, defaultProps };
