@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTActionCard/components/Header/index.js

@@ -0,0 +1,89 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo } from 'react';
+import { arrayOf, bool, elementType, func, number, object, objectOf, oneOf, oneOfType, shape, string } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import UTStatus from '../../../UTStatus';
+import UTLabel from '../../../UTLabel';
+import HeaderActions from '../HeaderActions';
+import { HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES, SIZES } from '../../constants';
+import { renderAdornment, statusPropsMapper } from './utils';
+import styles from './styles.module.scss';
+const Header = _ref => {
+  let {
+    adornment,
+    classNames,
+    description,
+    descriptionProps,
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible,
+    size,
+    status,
+    statusAlignment,
+    statusDataTestId,
+    statusLabel,
+    title,
+    titleProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.header, " ").concat(styles[size], " ").concat(classNames.header)
+  }, renderAdornment(adornment, 'left'), /*#__PURE__*/React.createElement("div", {
+    className: styles.headerTitles
+  }, renderAdornment(adornment, 'top'), /*#__PURE__*/React.createElement("div", {
+    className: styles.titleAndDescription
+  }, /*#__PURE__*/React.createElement(UTLabel, _extends({
+    variant: "title3",
+    weight: "medium"
+  }, titleProps), title), description && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray"
+  }, descriptionProps), description))), status ? /*#__PURE__*/React.createElement(UTStatus, _extends({
+    className: "".concat(styles["placeSelf-".concat(statusAlignment)]),
+    labelDataTestId: statusDataTestId,
+    type: "light"
+  }, statusPropsMapper(status)), statusLabel || status) : null, !isEmpty(headerActions) && /*#__PURE__*/React.createElement(HeaderActions, {
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible
+  }));
+};
+Header.propTypes = {
+  adornment: shape({
+    position: string,
+    props: object,
+    type: string
+  }),
+  classNames: objectOf(string),
+  description: string,
+  descriptionProps: shape({
+    colorTheme: string,
+    variant: string
+  }),
+  headerActions: arrayOf(shape({
+    Icon: oneOfType([elementType, string]),
+    id: oneOfType([number, string]),
+    isPrimary: bool,
+    label: string,
+    loading: bool,
+    onClick: func
+  })),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({
+      colorTheme: string,
+      shape: string
+    }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  setMainActionHoverVisible: func,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
+  status: string,
+  statusAlignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+  statusDataTestId: string,
+  statusLabel: string,
+  title: string,
+  titleProps: shape({
+    variant: string,
+    weight: string
+  })
+};
+export default /*#__PURE__*/memo(Header);

package/dist/esm/components/UTActionCard/components/Header/styles.module.scss

@@ -0,0 +1,48 @@
+.header {
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+}
+
+.headerTitles {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+  margin-right: auto;
+}
+
+.titleAndDescription {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  overflow-wrap: anywhere;
+}
+
+.medium {
+  padding: 24px;
+}
+
+.small {
+  padding: 16px;
+}
+
+.placeSelf-center {
+  place-self: center;
+}
+
+.placeSelf-start {
+  place-self: flex-start;
+}
+
+.placeSelf-end {
+  place-self: flex-end;
+}
+
+.defaultAvatar {
+  height: 64px;
+  width: 64px;
+}
+
+.adornment {
+  max-width: 100%;
+}

package/dist/esm/components/UTActionCard/components/Header/utils.js

@@ -0,0 +1,146 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import { PLACE_SELF_TYPES } from '../../constants';
+import { ADORNMENT_COMPONENT_MAPPER } from './constants';
+import styles from './styles.module.scss';
+const ACTIVE = 'active';
+const APPROVED = 'approved';
+const CHARGED_BILL = 'factura cobrada';
+const FINISHED = 'finished';
+const INACTIVE = 'inactive';
+const PENDING = 'pending';
+const BILLED = 'cobrada';
+const PAID = 'pagado';
+const ABOUT_TO_EXPIRE = 'por vencer';
+const UNPAID = 'impaga';
+const SUBSCRIBED = 'subscribed_from_utility';
+const UNSUBSCRIBED = 'unsubscribed';
+const CLOSED_STATUS = 'completed';
+const OBSERVED_STATUS = 'observed';
+const ONGOING_STATUS = 'pending';
+const FORM_STATUS = {
+  CANCELED: 'cancelled',
+  FINISHED: 'finished',
+  IN_PROGRESS: 'in_progress',
+  ON_HOLD: 'on_hold',
+  COMPLETED: 'completed'
+};
+const PAYMENTPLAN_STATUS = {
+  ACTIVE: 'active',
+  CANCELLED: 'canceled',
+  DRAFT: 'draft',
+  FINISHED: 'finished',
+  PENDING: 'pending',
+  PAYMENT_IN_PROGRESS: 'payment_in_progress',
+  PENDING_OFFLINE_PAYMENT: 'pending_offline_payment',
+  PENDING_PAYMENT: 'pending_payment'
+};
+export const statusPropsMapper = status => ({
+  [ACTIVE]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [APPROVED]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [CHARGED_BILL]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [CLOSED_STATUS]: {
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  [BILLED]: {
+    variant: 'success',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [FINISHED]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [INACTIVE]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [OBSERVED_STATUS]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [ONGOING_STATUS]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [PAID]: {
+    variant: 'success',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [PAYMENTPLAN_STATUS.CANCELLED]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.DRAFT]: {
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PAYMENT_IN_PROGRESS]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PENDING_OFFLINE_PAYMENT]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PENDING_PAYMENT]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PENDING]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [ABOUT_TO_EXPIRE]: {
+    variant: 'unassigned',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [SUBSCRIBED]: {
+    variant: 'success'
+  },
+  [UNSUBSCRIBED]: {
+    variant: 'error'
+  },
+  [UNPAID]: {
+    variant: 'warning',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [FORM_STATUS.CANCELED]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [FORM_STATUS.IN_PROGRESS]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [FORM_STATUS.ON_HOLD]: {
+    variant: 'warning',
+    withoutIcon: true
+  }
+})[status === null || status === void 0 ? void 0 : status.toLowerCase()] || {
+  variant: 'error',
+  withoutIcon: true
+};
+export const renderAdornment = (adornment, position) => {
+  var _adornment$props;
+  if (objectIsEmpty(adornment) || adornment.position !== position) return null;
+  const AdornmentComponent = ADORNMENT_COMPONENT_MAPPER[adornment.type];
+  const defaultPlaceSelf = adornment.position === 'left' ? PLACE_SELF_TYPES.CENTER : PLACE_SELF_TYPES.START;
+  return /*#__PURE__*/React.createElement(AdornmentComponent, _extends({}, adornment.props || {}, {
+    className: "".concat(styles.adornment, " ").concat(styles["placeSelf-".concat(adornment.alignment || defaultPlaceSelf)], "  ").concat(((_adornment$props = adornment.props) === null || _adornment$props === void 0 ? void 0 : _adornment$props.className) || '')
+  }));
+};

package/dist/esm/components/UTActionCard/components/HeaderActions/index.js

@@ -0,0 +1,121 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { Fragment, memo, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { arrayOf, bool, elementType, func, number, oneOf, oneOfType, shape, string } from 'prop-types';
+import UTButton from '../../../UTButton';
+import UTButtonGroup from '../../../UTButtonGroup';
+import UTMenu from '../../../UTMenu';
+import UTTooltip from '../../../UTTooltip';
+import { HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES } from '../../constants';
+import { processActions } from './utils';
+import styles from './styles.module.scss';
+const HeaderActions = _ref => {
+  var _headerActions$find, _secondaryActions$;
+  let {
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible
+  } = _ref;
+  const [menu, setMenu] = useState();
+  const [selectedAction, setSelectedAction] = useState((_headerActions$find = headerActions.find(_ref2 => {
+    let {
+      selectedDefault
+    } = _ref2;
+    return selectedDefault;
+  })) === null || _headerActions$find === void 0 ? void 0 : _headerActions$find.id);
+  const showButtonGroup = headerActionsProps.variant === HEADER_ACTIONS_VARIANTS.BUTTON_GROUP;
+  const {
+    colorTheme: buttonGroupColorTheme = 'secondary',
+    shape: buttonGroupShape
+  } = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.buttonGroupProps) || {};
+  const handleSetMainActionHoverVisible = () => setMainActionHoverVisible(true);
+  const handleSetMainActionHoverHidden = () => setMainActionHoverVisible(false);
+  const openMenu = event => setMenu(event.currentTarget);
+  const closeMenu = () => {
+    handleSetMainActionHoverVisible();
+    setMenu();
+  };
+  const {
+    primaryActions,
+    secondaryActions
+  } = processActions(headerActions, !showButtonGroup ? closeMenu : null);
+  const buttonSize = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.buttonSize) || 'medium';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerActionsContainer, " ").concat(styles["placeSelf-".concat(headerActionsProps.alignment)]),
+    onClick: e => e.stopPropagation(),
+    onMouseEnter: handleSetMainActionHoverHidden,
+    onMouseLeave: handleSetMainActionHoverVisible
+  }, primaryActions.map(buttonProps => /*#__PURE__*/React.createElement(UTTooltip, {
+    tippyProps: {
+      appendTo: () => document.body,
+      interactive: false
+    },
+    content: buttonProps.label && /*#__PURE__*/React.createElement("span", null, buttonProps.label)
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, _extends({}, buttonProps, {
+    classNames: {
+      root: styles.zIndex
+    },
+    size: buttonSize,
+    variant: "text"
+  }), buttonProps.title)))), !isEmpty(secondaryActions) && (!showButtonGroup ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTMenu, {
+    anchor: menu,
+    iconBefore: true,
+    items: secondaryActions,
+    menuPlacement: "bottom-end",
+    onClose: closeMenu,
+    scrollBarProps: {
+      options: {
+        suppressScrollY: true,
+        suppressScrollX: true
+      }
+    }
+  }), /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: styles.zIndex
+    },
+    Icon: "IconDots",
+    onClick: e => {
+      e.stopPropagation();
+      if (menu) {
+        setMenu();
+      } else {
+        openMenu(e);
+      }
+    },
+    size: "medium",
+    variant: "text"
+  })) : /*#__PURE__*/React.createElement(UTButtonGroup, {
+    actions: secondaryActions.map(action => ({
+      ...action,
+      onClick: () => {
+        setSelectedAction(action.id);
+        action.onClick();
+      }
+    })),
+    colorTheme: buttonGroupColorTheme,
+    selected: selectedAction || ((_secondaryActions$ = secondaryActions[0]) === null || _secondaryActions$ === void 0 ? void 0 : _secondaryActions$.id),
+    shape: buttonGroupShape
+  })));
+};
+HeaderActions.propTypes = {
+  headerActions: arrayOf(shape({
+    Icon: oneOfType([elementType, string]),
+    id: oneOfType([number, string]),
+    isPrimary: bool,
+    title: string,
+    label: string,
+    loading: bool,
+    onClick: func,
+    selectedDefault: bool
+  })),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({
+      colorTheme: string,
+      shape: string
+    }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  setMainActionHoverVisible: func
+};
+export default /*#__PURE__*/memo(HeaderActions);

package/dist/esm/components/UTActionCard/components/HeaderActions/styles.module.scss

@@ -0,0 +1,22 @@
+.headerActionsContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+  height: fit-content;
+}
+
+.zIndex {
+  z-index: 2;
+}
+
+.placeSelf-center {
+  place-self: center;
+}
+
+.placeSelf-start {
+  place-self: flex-start;
+}
+
+.placeSelf-end {
+  place-self: flex-end;
+}

package/dist/esm/components/UTActionCard/components/HeaderActions/utils.js

@@ -0,0 +1,23 @@
+import isEmpty from 'lodash/isEmpty';
+const mapAction = (action, onClickHandler) => ({
+  ...action,
+  onClick: e => {
+    var _action$onClick;
+    e === null || e === void 0 || e.stopPropagation();
+    if (onClickHandler) onClickHandler();
+    action === null || action === void 0 || (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+  }
+});
+export const processActions = (headerActions, onClickHandler) => headerActions.reduce((final, current) => {
+  if (current.isPrimary && isEmpty(final.primaryActions)) return {
+    ...final,
+    primaryActions: [current]
+  };
+  return {
+    ...final,
+    secondaryActions: [...final.secondaryActions, mapAction(current, onClickHandler)]
+  };
+}, {
+  primaryActions: [],
+  secondaryActions: []
+});

package/dist/esm/components/UTActionCard/constants.js

@@ -0,0 +1,17 @@
+export const SIZES = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
+export const ACTION_TYPES = {
+  DEFAULT: 'default',
+  REDIRECTION: 'redirection'
+};
+export const HEADER_ACTIONS_VARIANTS = {
+  BUTTON_GROUP: 'buttonGroup',
+  DEFAULT: 'default'
+};
+export const PLACE_SELF_TYPES = {
+  CENTER: 'center',
+  END: 'end',
+  START: 'start'
+};

package/dist/esm/components/UTActionCard/index.js

@@ -0,0 +1,150 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo, useState } from 'react';
+import { arrayOf, bool, elementType, func, number, object, objectOf, oneOf, oneOfType, shape, string } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import BottomActions from './components/BottomActions';
+import AdditionalMessage from './components/AdditionalMessage';
+import Header from './components/Header';
+import { ACTION_TYPES, HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES, SIZES } from './constants';
+import styles from './styles.module.scss';
+const UTActionCard = _ref => {
+  let {
+    additionalMessage,
+    adornment,
+    BackgroundImage,
+    bottomActions,
+    bottomActionsVariant,
+    children,
+    classNames = {},
+    description,
+    descriptionProps = {},
+    headerActions,
+    headerActionsProps = {
+      variant: HEADER_ACTIONS_VARIANTS.DEFAULT
+    },
+    hideHeader = false,
+    mainAction,
+    size = SIZES.MEDIUM,
+    status,
+    statusAlignment,
+    statusLabel,
+    testIds = {},
+    title,
+    titleProps = {},
+    withBodyPadding = true
+  } = _ref;
+  const [mainActionHoverVisible, setMainActionHoverVisible] = useState(true);
+  const {
+    backgroundDataTestId,
+    containerDataTestId,
+    statusDataTestId
+  } = testIds;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.cardContainer, " ").concat(classNames.container)
+  }, /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(styles.innerContainer, " ").concat(classNames.innerContainer, " ").concat(!mainAction ? styles.withoutMainAction : "".concat(styles.withMainAction, " ").concat(mainActionHoverVisible && "".concat(styles.mainActionHover, " ").concat(classNames.mainActionHover))),
+    dataTestId: containerDataTestId,
+    onClick: () => mainAction === null || mainAction === void 0 ? void 0 : mainAction()
+  }, BackgroundImage && /*#__PURE__*/React.createElement(BackgroundImage, {
+    className: "".concat(styles.backgroundImage, " ").concat(classNames.backgroundImage),
+    "data-testid": backgroundDataTestId
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerAndChildrenContainer, " ").concat(classNames.headerAndChildrenContainer)
+  }, !hideHeader && /*#__PURE__*/React.createElement(Header, {
+    adornment,
+    classNames,
+    description,
+    descriptionProps,
+    headerActions,
+    headerActionsProps,
+    mainAction,
+    setMainActionHoverVisible,
+    size,
+    status,
+    statusAlignment,
+    statusDataTestId,
+    statusLabel,
+    title,
+    titleProps
+  }), children && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(hideHeader ? styles.withoutHeader : '', " ").concat(withBodyPadding ? styles["bodyPadding-".concat(size)] : styles["withoutBodyPadding-".concat(size)])
+  }, children))), !objectIsEmpty(additionalMessage) && /*#__PURE__*/React.createElement(AdditionalMessage, _extends({}, additionalMessage, {
+    size: size
+  })), !isEmpty(bottomActions) && /*#__PURE__*/React.createElement(BottomActions, {
+    actions: bottomActions,
+    bottomActionsVariant: bottomActionsVariant,
+    size: size
+  }));
+};
+UTActionCard.propTypes = {
+  additionalMessage: shape({
+    Icon: elementType,
+    iconProps: shape({
+      colorTheme: string,
+      size: string
+    }),
+    labelProps: shape({
+      colorTheme: string,
+      variant: string
+    }),
+    message: string
+  }),
+  adornment: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    position: string,
+    props: object,
+    type: string
+  }),
+  BackgroundImage: elementType,
+  bottomActions: arrayOf(shape({
+    colorTheme: string,
+    disabled: bool,
+    Icon: elementType,
+    label: string,
+    loading: bool,
+    onClick: func
+  })),
+  bottomActionsVariant: oneOf([ACTION_TYPES.DEFAULT, ACTION_TYPES.REDIRECTION]),
+  classNames: objectOf(string),
+  description: string,
+  descriptionProps: shape({
+    colorTheme: string,
+    variant: string
+  }),
+  headerActions: arrayOf(shape({
+    Icon: oneOfType([elementType, string]),
+    iconProps: string,
+    id: oneOfType([number, string]),
+    label: string,
+    loading: bool,
+    onClick: func
+  })),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({
+      colorTheme: string,
+      shape: string
+    }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  hideHeader: bool,
+  mainAction: func,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
+  status: string,
+  statusLabel: string,
+  statusAlignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+  testIds: shape({
+    backgroundDataTestId: string,
+    containerDataTestId: string,
+    statusDataTestId: string
+  }),
+  title: string,
+  titleProps: shape({
+    variant: string,
+    weight: string
+  }),
+  withBodyPadding: bool
+};
+export default /*#__PURE__*/memo(UTActionCard);

package/dist/esm/components/UTActionCard/styles.module.scss

@@ -0,0 +1,83 @@
+$default-active-color: rgba(0, 0, 0, 0.2);
+$default-card-container-color: #FFFFFF;
+$default-hover-color: rgba(0, 0, 0, 0.08);
+$default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
+
+.cardContainer {
+  background: var(--light01, $default-card-container-color);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1, $default-shadow-gray-bottom-1);
+  overflow: hidden;
+}
+
+.bodyPadding-medium {
+  padding: 0 24px 24px;
+}
+
+.bodyPadding-small {
+  padding: 0 16px 16px;
+}
+
+.withoutMainAction {
+  cursor: auto;
+}
+
+.withMainAction {
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  width: 100%;
+
+  &::after {
+    background-color: transparent;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transition: all 0.2s;
+    width: 100%;
+  }
+}
+
+.mainActionHover {
+  &:hover::after {
+    background-color: $default-hover-color;
+  }
+
+  &:active::after {
+    background-color: $default-active-color;
+  }
+}
+
+.innerContainer {
+  height: auto;
+  position: relative;
+  width: 100%;
+}
+
+.backgroundImage {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 0;
+}
+
+.headerAndChildrenContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  z-index: 1;
+}
+
+.withoutBodyPadding-small {
+  padding-bottom: 16px;
+}
+
+.withoutBodyPadding-medium {
+  padding-bottom: 24px;
+}
+
+.withoutHeader {
+  padding-top: 24px;
+}