@hhgtech/hhg-components/build/index-e72600f2.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var styled = require('@emotion/styled');
var utils = require('./utils-7ba0038a.js');
var miscTheme = require('./miscTheme.js');
var index = require('./index-da18c632.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledInput = styled__default["default"].div `
  position: relative;
  width: 100%;

  &[data-has-error] {
    input {
      border-color: ${miscTheme.theme.colors.red700};
    }
  }

  input {
    width: 100%;
    padding: 12px 16px;
    border: solid 1px ${miscTheme.theme.colors.gray200};
    border-radius: ${miscTheme.theme.borderRadius};

    &:active,
    &:focus,
    .focused & {
      border-color: ${miscTheme.theme.colors.primaryBase};
      box-shadow: 0px 0px 2px 2px ${miscTheme.theme.colors.primary200};
    }

    &:disabled {
      background-color: ${miscTheme.theme.colors.gray100};
      cursor: not-allowed;
    }
  }

  &[data-has-action-icon] {
    input {
      padding: 12px 48px 12px 16px;
    }
  }
  &[data-has-display-icon] {
    input {
      padding: 12px 16px 12px 48px;
    }
  }

  &[data-has-action-icon][data-has-display-icon] {
    input {
      padding: 12px 48px;
    }
  }

  &[data-size='lg'] {
    input {
      font-size: 16px;
      font-weight: ${miscTheme.theme.sizes.fwRegular};
      ${utils.MediaQueries.mbDown} {
        font-size: 22px;
        line-height: 1.2;
      }

      ${utils.MediaQueries.mbUp} {
        font-size: 26px;
        line-height: 1.2;
      }
    }
  }
  &[data-size='md'] {
    input {
      font-weight: ${miscTheme.theme.sizes.fwRegular};
      ${utils.MediaQueries.mbDown} {
        font-size: 14px;
        line-height: 1.2;
      }

      ${utils.MediaQueries.mbUp} {
        font-size: 16px;
        line-height: 1.2;
      }
    }
  }
  &[data-size='sm'] {
    input {
      font-weight: ${miscTheme.theme.sizes.fwRegular};
      ${utils.MediaQueries.mbDown} {
        font-size: 13px;
        line-height: 1.5;
      }

      ${utils.MediaQueries.mbUp} {
        font-size: 13px;
        line-height: 1.5;
      }
    }
  }
`;

/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const PureInput = React__default["default"].forwardRef((_a, ref) => {
    var { name, errorMessage, autoComplete = 'off', defaultValue, actionIcon: ActionIcon, displayIcon: DisplayIcon, isDeleteAction, onActionClick, label, placeholder, className, onChange, onKeyPress, isDisabled, CustomInput, size, style, autoFocus, type = 'text', isNumerousKeyboard = false, onFocus, enterKeyHint, nativeOnChange } = _a, other = tslib_es6.__rest(_a, ["name", "errorMessage", "autoComplete", "defaultValue", "actionIcon", "displayIcon", "isDeleteAction", "onActionClick", "label", "placeholder", "className", "onChange", "onKeyPress", "isDisabled", "CustomInput", "size", "style", "autoFocus", "type", "isNumerousKeyboard", "onFocus", "enterKeyHint", "nativeOnChange"]);
    const [localValue, setLocalValue] = React.useState(defaultValue);
    const handleOnChange = (v) => {
        setLocalValue(v);
        onChange(v);
    };
    const handleOnActionClick = () => {
        var _a;
        if (isDeleteAction) {
            setLocalValue('');
            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
        }
        onActionClick && onActionClick();
    };
    return (React__default["default"].createElement(StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, style: style },
        label && (React__default["default"].createElement(index.Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
        React__default["default"].createElement("div", { style: { position: 'relative' } },
            CustomInput ? (CustomInput) : (React__default["default"].createElement("input", Object.assign({ id: name, name: name, placeholder: placeholder, onChange: nativeOnChange !== null && nativeOnChange !== void 0 ? nativeOnChange : ((e) => handleOnChange(e.target.value)), onKeyPress: onKeyPress, type: type, "aria-label": type, disabled: isDisabled, value: localValue, autoComplete: autoComplete, ref: ref, autoFocus: autoFocus, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', onFocus: onFocus, enterKeyHint: enterKeyHint }, other))),
            DisplayIcon && (React__default["default"].createElement(index.StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
            ActionIcon && (React__default["default"].createElement(index.StyledActionIcon, { className: "actionIcon", onClick: handleOnActionClick }, ActionIcon))),
        errorMessage && errorMessage.length > 0 && (React__default["default"].createElement(index.StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
});
PureInput.displayName = 'PureInput';

const StyledCheckbox = styled__default["default"].div `
  display: flex;
  cursor: pointer;

  &[data-theme='marryBaby'] {
    input {
      width: 20px;
      height: 20px;
      border: 1.3px solid ${miscTheme.theme.mbColors.midGray};
      border-radius: 9px;

      cursor: inherit;
      transition: border-color 0.4s, box-shadow 0.4s;

      &:hover,
      &:active {
        border-color: ${miscTheme.theme.mbColors.cobalt};
        box-shadow: 0 0 2px 2px ${miscTheme.theme.mbColors.cobalt};
      }

      &:focus-visible {
        border: 2px solid ${miscTheme.theme.mbColors.cobalt};
      }

      &:checked {
        border: 0;
        background: ${miscTheme.theme.mbColors.cobalt}
          url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4L3.45455 6L8 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
          no-repeat center center;
      }
    }

    label {
      max-width: 15rem;
      margin-left: 8px;
      width: calc(100% - 24px);
      cursor: inherit;
      font-weight: 600;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: -0.2px;
      color: ${miscTheme.theme.mbColors.gray};
    }
  }
  input {
    width: 20px;
    height: 20px;
    border: solid 1px ${miscTheme.theme.colors.gray500};
    border-radius: 2px;

    cursor: inherit;
    transition: border-color 0.4s, box-shadow 0.4s;

    &:hover,
    &:active {
      border-color: ${miscTheme.theme.colors.primaryBase};
      box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
    }

    &:focus-visible {
      border: 2px solid ${miscTheme.theme.colors.primaryActive};
    }

    &:checked {
      border: 0;
      background: ${miscTheme.theme.colors.primaryBase}
        url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L4.125 8L1 4.81819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
        no-repeat center center;
    }
  }

  label {
    max-width: 15rem;
    margin-left: 8px;
    font-weight: ${miscTheme.theme.sizes.fwRegular};
    width: calc(100% - 24px);
    cursor: inherit;

    ${utils.MediaQueries.mbDown} {
      font-size: 14px;
      line-height: 24px;
    }

    ${utils.MediaQueries.mbUp} {
      font-size: 16px;
      line-height: 22px;
    }
  }

  &[data-is-rectangle] > input {
    position: relative;
    width: unset;
    height: unset;
    padding: 5px 12px;
    border: 1px solid ${miscTheme.theme.colors.neutral100};
    border-radius: 32px;

    &::after {
      color: ${miscTheme.theme.colors.gray800};
      content: attr(data-label-text);
      font-size: 13px;
    }
    &:checked {
      border-color: ${miscTheme.theme.colors.primary50};
      &::after {
        color: ${miscTheme.theme.colors.primaryBase};
      }
    }
    &:checked {
      background: ${miscTheme.theme.colors.primary50};
    }
  }

  &[data-disabled] {
    color: ${miscTheme.theme.colors.gray300};
    cursor: not-allowed;
    input {
      border-color: ${miscTheme.theme.colors.gray300};
      &:hover {
        border-color: ${miscTheme.theme.colors.gray300};
        box-shadow: none;
      }
    }
  }
`;

/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const Checkbox = ({ label, name, checked, className, isDisabled, onChange, value, isRectangle, inputDataTestId, siteType, }) => {
    return (React__default["default"].createElement(StyledCheckbox, { className: className, "data-disabled": isDisabled || undefined, "data-is-rectangle": isRectangle || undefined, "data-label-text": label, "data-theme": siteType },
        React__default["default"].createElement("input", { type: "checkbox", checked: checked, name: name, onChange: () => onChange(value, !checked), disabled: isDisabled, value: value, id: `${name}-${value}`, "data-label-text": label, "data-testid": inputDataTestId }),
        !isRectangle && React__default["default"].createElement("label", { htmlFor: `${name}-${value}` }, label)));
};

exports.Checkbox = Checkbox;
exports.PureInput = PureInput;