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

package/build/{utils-f8b481d2.js → utils-206e074f.js}

@@ -132,11 +132,29 @@ const safeEncodeURI = (s) => {
         return s;
     else
         return encodeURI(s);
+};
+const convertDay = (totalDay) => {
+    if (!totalDay) {
+        return {
+            years: 0,
+            months: 0,
+            weeks: 0,
+        };
+    }
+    const years = parseInt(`${totalDay / 365}`);
+    const months = parseInt(`${totalDay / 30}`);
+    const weeks = parseInt(`${totalDay / 7}`);
+    return {
+        years,
+        months,
+        weeks,
+    };
 };
 
 exports.Breakpoints = Breakpoints;
 exports.MediaQueries = MediaQueries;
 exports.Screens = Screens;
+exports.convertDay = convertDay;
 exports.formatUrlWithPageParam = formatUrlWithPageParam;
 exports.getBoundariesFromMediaQueryKey = getBoundariesFromMediaQueryKey;
 exports.getPopupWrapperDom = getPopupWrapperDom;

package/build/{utils-a1253bc1.js → utils-9d6d77e9.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b12343bd.js');
-var index = require('./index-245d6fd3.js');
+var tslib_es6 = require('./tslib.es6-abaf58a5.js');
+var index = require('./index-9fc9352d.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 var slugify = require('slugify');
 var constantsIsProduction = require('./constantsIsProduction.js');
 var formatString = require('string-format');
 var React = require('react');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var constants = require('./constants-94bf3614.js');
+var constants = require('./constants-36031416.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{utils-2128979a.js → utils-f3053adb.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-require('./index-5f2466e4.js');
-var Locale = require('./Locale-7bc5a105.js');
+require('./index-9b755601.js');
+var Locale = require('./Locale-8b371dbd.js');
 
 // https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
 const MAPPED_LOCALE = {

package/build/{utils-06db93cc.js → utils-fc673d1a.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-a2333a7c.js');
+var index = require('./index-e81537b3.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-f8b481d2.js');
+var utils = require('./utils-206e074f.js');
 var Skeleton = require('react-loading-skeleton');
 var formatString = require('string-format');
 var constantsDomainLocales = require('./constantsDomainLocales.js');

package/build/vaccination.js

@@ -2,47 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-b12343bd.js');
+var tslib_es6 = require('./tslib.es6-abaf58a5.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$5 = require('./index-28bbbfcb.js');
+var index$5 = require('./index-190a4162.js');
 require('@mantine/dates');
-require('./index-a2333a7c.js');
-var index$7 = require('./index-5f2466e4.js');
-require('./index-f273f473.js');
-var index$3 = require('./index-64625ca6.js');
-var index$2 = require('./index-188d7d0b.js');
-var index$1 = require('./index-ad243b92.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-f203e1a2.js');
-var index = require('./index-2f19468e.js');
+require('./index.styles-c77e4f07.js');
+var index = require('./index-9628baf4.js');
 var hooks = require('@mantine/hooks');
-require('./text-69b6c175.js');
-var utils = require('./utils-f8b481d2.js');
-require('./index-0c1c026c.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-bf66f2e8.js');
-require('./translationsContext-86f8978d.js');
+var index$4 = require('./index-50a8b3e6.js');
+require('./translationsContext-bd7e78bb.js');
 var other = require('@hhgtech/icons/other');
-var index$6 = require('./index-4eaed35f.js');
-var index$8 = require('./index-68c2a0a9.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-49d08e3e.js');
-var index$9 = require('./index-35580834.js');
+var index$a = require('./index-7aec0a0c.js');
+var index$9 = require('./index-c5c67407.js');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-0fb4be92.js');
+require('./useUniqueId-ad0a5556.js');
 require('./constantsSite.js');
-require('./Locale-7bc5a105.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-5d1ce612.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.418-beta-1",
+  "version": "1.29.418-beta-2",
   "main": "build/index.js",
   "module": "build/esm/index.js",
   "files": [

package/build/esm/index-16013e37.js

@@ -1,262 +0,0 @@
-import { _ as __rest } from './tslib.es6-973fb363.js';
-import React__default, { useState } from 'react';
-import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-06a90493.js';
-import { theme } from './miscTheme.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-576cde59.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-4ef2a1d4.js

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