@hhgtech/hhg-components 1.29.417 → 1.29.418-beta-2

package/build/vaccination.js

@@ -2,47 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-77611d97.js');
+var tslib_es6 = require('./tslib.es6-abaf58a5.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$5 = require('./index-32b4734b.js');
+var index$5 = require('./index-190a4162.js');
 require('@mantine/dates');
-require('./index-efdee7e0.js');
-var index$7 = require('./index-1ed83894.js');
-require('./index-479148db.js');
-var index$3 = require('./index-ec936b1f.js');
-var index$2 = require('./index-1421020e.js');
-var index$1 = require('./index-4f5231ab.js');
+require('./index-e81537b3.js');
+var index$7 = require('./index-9b755601.js');
+require('./index-f4788d34.js');
+var index$3 = require('./index-d14610c4.js');
+var index$2 = require('./index-30c33273.js');
+var index$1 = require('./index-f0b8a1ab.js');
 var miscTheme = require('./miscTheme.js');
-require('./index.styles-58f3d2e6.js');
-var index = require('./index-a234c228.js');
+require('./index.styles-c77e4f07.js');
+var index = require('./index-9628baf4.js');
 var hooks = require('@mantine/hooks');
-require('./text-2d269f79.js');
-var utils = require('./utils-d0544a49.js');
-require('./index-359cb049.js');
+require('./text-65cdc640.js');
+var utils = require('./utils-206e074f.js');
+require('./index-a8a23325.js');
 var styled = require('@emotion/styled');
-var index$4 = require('./index-49e4941e.js');
-require('./translationsContext-d7368ee5.js');
+var index$4 = require('./index-50a8b3e6.js');
+require('./translationsContext-bd7e78bb.js');
 var other = require('@hhgtech/icons/other');
-var index$6 = require('./index-d778b9e9.js');
-var index$8 = require('./index-3f1411c6.js');
+var index$6 = require('./index-c771ec23.js');
+var index$8 = require('./index-f8f46a81.js');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
 var customParseFormat = require('dayjs/plugin/customParseFormat');
-var index$a = require('./index-e33474fc.js');
-var index$9 = require('./index-a4cd3f3a.js');
+var index$a = require('./index-7aec0a0c.js');
+var index$9 = require('./index-c5c67407.js');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-230a0871.js');
+require('./useUniqueId-ad0a5556.js');
 require('./constantsSite.js');
-require('./Locale-a70f3018.js');
+require('./Locale-8b371dbd.js');
 require('@hhgtech/icons/core');
 require('date-fns/locale');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('@mantine/notifications');
-require('./shared-357ef7eb.js');
+require('./shared-d918f3b5.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hhgtech/hhg-components",
-  "version": "1.29.417",
+  "version": "1.29.418-beta-2",
   "main": "build/index.js",
   "module": "build/esm/index.js",
   "files": [

package/build/esm/index-8d4eb39a.js

@@ -1,262 +0,0 @@
-import { _ as __rest } from './tslib.es6-f56963a6.js';
-import React__default, { useState } from 'react';
-import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-ca546a43.js';
-import { theme } from './miscTheme.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-335d9430.js';
-
-const StyledInput = styled.div `
-  position: relative;
-  width: 100%;
-
-  &[data-has-error] {
-    input {
-      border-color: ${theme.colors.red700};
-    }
-  }
-
-  input {
-    width: 100%;
-    padding: 12px 16px;
-    border: solid 1px ${theme.colors.gray200};
-    border-radius: ${theme.borderRadius};
-
-    &:active,
-    &:focus,
-    .focused & {
-      border-color: ${theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
-    }
-
-    &:disabled {
-      background-color: ${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: ${theme.sizes.fwRegular};
-      ${MediaQueries.mbDown} {
-        font-size: 22px;
-        line-height: 1.2;
-      }
-
-      ${MediaQueries.mbUp} {
-        font-size: 26px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='md'] {
-    input {
-      font-weight: ${theme.sizes.fwRegular};
-      ${MediaQueries.mbDown} {
-        font-size: 14px;
-        line-height: 1.2;
-      }
-
-      ${MediaQueries.mbUp} {
-        font-size: 16px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='sm'] {
-    input {
-      font-weight: ${theme.sizes.fwRegular};
-      ${MediaQueries.mbDown} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-
-      ${MediaQueries.mbUp} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-    }
-  }
-`;
-
-/**
- * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
- */
-const PureInput = React__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 = __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] = 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.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.createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
-        React__default.createElement("div", { style: { position: 'relative' } },
-            CustomInput ? (CustomInput) : (React__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.createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
-            ActionIcon && (React__default.createElement(StyledActionIcon, { className: "actionIcon", onClick: handleOnActionClick }, ActionIcon))),
-        errorMessage && errorMessage.length > 0 && (React__default.createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
-});
-PureInput.displayName = 'PureInput';
-
-const StyledCheckbox = styled.div `
-  display: flex;
-  cursor: pointer;
-
-  &[data-theme='marryBaby'] {
-    input {
-      width: 20px;
-      height: 20px;
-      border: 1.3px solid ${theme.mbColors.midGray};
-      border-radius: 9px;
-
-      cursor: inherit;
-      transition: border-color 0.4s, box-shadow 0.4s;
-
-      &:hover,
-      &:active {
-        border-color: ${theme.mbColors.cobalt};
-        box-shadow: 0 0 2px 2px ${theme.mbColors.cobalt};
-      }
-
-      &:focus-visible {
-        border: 2px solid ${theme.mbColors.cobalt};
-      }
-
-      &:checked {
-        border: 0;
-        background: ${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: ${theme.mbColors.gray};
-    }
-  }
-  input {
-    width: 20px;
-    height: 20px;
-    border: solid 1px ${theme.colors.gray500};
-    border-radius: 2px;
-
-    cursor: inherit;
-    transition: border-color 0.4s, box-shadow 0.4s;
-
-    &:hover,
-    &:active {
-      border-color: ${theme.colors.primaryBase};
-      box-shadow: 0 0 2px 2px ${theme.colors.primary200};
-    }
-
-    &:focus-visible {
-      border: 2px solid ${theme.colors.primaryActive};
-    }
-
-    &:checked {
-      border: 0;
-      background: ${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: ${theme.sizes.fwRegular};
-    width: calc(100% - 24px);
-    cursor: inherit;
-
-    ${MediaQueries.mbDown} {
-      font-size: 14px;
-      line-height: 24px;
-    }
-
-    ${MediaQueries.mbUp} {
-      font-size: 16px;
-      line-height: 22px;
-    }
-  }
-
-  &[data-is-rectangle] > input {
-    position: relative;
-    width: unset;
-    height: unset;
-    padding: 5px 12px;
-    border: 1px solid ${theme.colors.neutral100};
-    border-radius: 32px;
-
-    &::after {
-      color: ${theme.colors.gray800};
-      content: attr(data-label-text);
-      font-size: 13px;
-    }
-    &:checked {
-      border-color: ${theme.colors.primary50};
-      &::after {
-        color: ${theme.colors.primaryBase};
-      }
-    }
-    &:checked {
-      background: ${theme.colors.primary50};
-    }
-  }
-
-  &[data-disabled] {
-    color: ${theme.colors.gray300};
-    cursor: not-allowed;
-    input {
-      border-color: ${theme.colors.gray300};
-      &:hover {
-        border-color: ${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.createElement(StyledCheckbox, { className: className, "data-disabled": isDisabled || undefined, "data-is-rectangle": isRectangle || undefined, "data-label-text": label, "data-theme": siteType },
-        React__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.createElement("label", { htmlFor: `${name}-${value}` }, label)));
-};
-
-export { Checkbox as C, PureInput as P };

package/build/index-3a35c0e9.js

@@ -1,270 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-77611d97.js');
-var React = require('react');
-var styled = require('@emotion/styled');
-var utils = require('./utils-d0544a49.js');
-var miscTheme = require('./miscTheme.js');
-var index = require('./index-c04c9aca.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;