@hhgtech/hhg-components/build/esm/index-5ef41652.js

Hello Health Group common components

import React__default, { useState } from 'react';
import { theme } from './miscTheme.js';
import styled from '@emotion/styled';
import { M as MarryBabyText } from './index-3b8537c3.js';
import { T as Text } from './index-cf9e26de.js';

const StyledRadioImageGroup = styled.div `
  display: flex;
  width: 100%;

  &[data-direction='vertical'] {
    flex-direction: column;
  }

  &[data-direction='horizontal'] {
    flex-wrap: wrap;
  }
`;
const StyledRadioImageItem = styled.div `
  display: flex;

  padding: 8px;

  border-radius: ${theme.borderRadius};
  cursor: pointer;

  & > div {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  &[data-is-mb='false'] {
    &[data-selected='true'] {
      border: 1px solid #2d87f3;
      background: white;
    }
    &[data-selected='false'] {
      border: 1px solid #f2f2f2;
      box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
    }
  }

  &[data-is-mb='true'] {
    border-radius: 16px;
    background: white;
    padding: 16px auto;

    &[data-selected='true'] {
      border: 1px solid ${theme.mbColors.mint};
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
    }
    &[data-selected='false'] {
      border: none;
    }
  }

  &[data-disabled='true'] {
    cursor: auto;
  }

  .radio-group-item-heading {
    margin-top: 8px;
    //height: 48px;
    text-align: center;
  }

  .gender-image {
    width: 70px;
    height: 70px;
    &[data-is-mobile='true'] {
      width: 40px;
      height: 40px;
    }
  }
`;

const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
    const [check, setCheck] = useState(value);
    const handleOnChange = (v) => {
        if (isDisabled)
            return;
        setCheck(v);
        onChange && onChange(v);
    };
    const isMarryBaby = siteType === 'marryBaby';
    return (React__default.createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default.createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index, onClick: () => {
            handleOnChange(option.value);
        } },
        React__default.createElement("div", null,
            option.content,
            option.label && (React__default.createElement(React__default.Fragment, null, isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
                    ? theme.mbColors.dark
                    : theme.mbColors.midGray }, option.label)) : (React__default.createElement(Text, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
};

export { RadioImageGroup as R };