@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/index-acf8b60e.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import styled from '@emotion/styled';
+import { L as Label } from './index-f660abb7.js';
+import { t as theme } from './theme-7dadf4a1.js';
+
+const StyledTextArea = styled.div `
+  textarea {
+    width: 100%;
+    height: var(--textarea-height, 116px);
+    padding: 1rem;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 6px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    resize: none;
+
+    &:focus {
+      box-shadow: 0px 0px 2px 2px #91caff;
+    }
+
+    &::placeholder {
+      color: ${theme.colors.gray500};
+    }
+
+    &:disabled {
+      background-color: ${theme.colors.neutral50};
+      cursor: not-allowed;
+    }
+  }
+`;
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const TextArea = React__default.forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
+    return (React__default.createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
+        labelText && (React__default.createElement(Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
+        React__default.createElement("textarea", { name: name, ref: ref, placeholder: placeholder, id: id, onChange: (e) => onChange && onChange(e.target.value), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onKeyPress: (e) => onKeyPress && onKeyPress(e), value: value, disabled: disabled })));
+});
+
+export { TextArea as T };

package/build/esm/index-ad1c7c38.js

@@ -0,0 +1,275 @@
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/**
+ * Module exports.
+ * @public
+ */
+
+var parse_1 = parse;
+var serialize_1 = serialize;
+
+/**
+ * Module variables.
+ * @private
+ */
+
+var __toString = Object.prototype.toString;
+
+/**
+ * RegExp to match field-content in RFC 7230 sec 3.2
+ *
+ * field-content = field-vchar [ 1*( SP / HTAB ) field-vchar ]
+ * field-vchar   = VCHAR / obs-text
+ * obs-text      = %x80-FF
+ */
+
+var fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;
+
+/**
+ * Parse a cookie header.
+ *
+ * Parse the given cookie header string into an object
+ * The object has the various cookies as keys(names) => values
+ *
+ * @param {string} str
+ * @param {object} [options]
+ * @return {object}
+ * @public
+ */
+
+function parse(str, options) {
+  if (typeof str !== 'string') {
+    throw new TypeError('argument str must be a string');
+  }
+
+  var obj = {};
+  var opt = options || {};
+  var dec = opt.decode || decode;
+
+  var index = 0;
+  while (index < str.length) {
+    var eqIdx = str.indexOf('=', index);
+
+    // no more cookie pairs
+    if (eqIdx === -1) {
+      break
+    }
+
+    var endIdx = str.indexOf(';', index);
+
+    if (endIdx === -1) {
+      endIdx = str.length;
+    } else if (endIdx < eqIdx) {
+      // backtrack on prior semicolon
+      index = str.lastIndexOf(';', eqIdx - 1) + 1;
+      continue
+    }
+
+    var key = str.slice(index, eqIdx).trim();
+
+    // only assign once
+    if (undefined === obj[key]) {
+      var val = str.slice(eqIdx + 1, endIdx).trim();
+
+      // quoted values
+      if (val.charCodeAt(0) === 0x22) {
+        val = val.slice(1, -1);
+      }
+
+      obj[key] = tryDecode(val, dec);
+    }
+
+    index = endIdx + 1;
+  }
+
+  return obj;
+}
+
+/**
+ * Serialize data into a cookie header.
+ *
+ * Serialize the a name value pair into a cookie string suitable for
+ * http headers. An optional options object specified cookie parameters.
+ *
+ * serialize('foo', 'bar', { httpOnly: true })
+ *   => "foo=bar; httpOnly"
+ *
+ * @param {string} name
+ * @param {string} val
+ * @param {object} [options]
+ * @return {string}
+ * @public
+ */
+
+function serialize(name, val, options) {
+  var opt = options || {};
+  var enc = opt.encode || encode;
+
+  if (typeof enc !== 'function') {
+    throw new TypeError('option encode is invalid');
+  }
+
+  if (!fieldContentRegExp.test(name)) {
+    throw new TypeError('argument name is invalid');
+  }
+
+  var value = enc(val);
+
+  if (value && !fieldContentRegExp.test(value)) {
+    throw new TypeError('argument val is invalid');
+  }
+
+  var str = name + '=' + value;
+
+  if (null != opt.maxAge) {
+    var maxAge = opt.maxAge - 0;
+
+    if (isNaN(maxAge) || !isFinite(maxAge)) {
+      throw new TypeError('option maxAge is invalid')
+    }
+
+    str += '; Max-Age=' + Math.floor(maxAge);
+  }
+
+  if (opt.domain) {
+    if (!fieldContentRegExp.test(opt.domain)) {
+      throw new TypeError('option domain is invalid');
+    }
+
+    str += '; Domain=' + opt.domain;
+  }
+
+  if (opt.path) {
+    if (!fieldContentRegExp.test(opt.path)) {
+      throw new TypeError('option path is invalid');
+    }
+
+    str += '; Path=' + opt.path;
+  }
+
+  if (opt.expires) {
+    var expires = opt.expires;
+
+    if (!isDate(expires) || isNaN(expires.valueOf())) {
+      throw new TypeError('option expires is invalid');
+    }
+
+    str += '; Expires=' + expires.toUTCString();
+  }
+
+  if (opt.httpOnly) {
+    str += '; HttpOnly';
+  }
+
+  if (opt.secure) {
+    str += '; Secure';
+  }
+
+  if (opt.priority) {
+    var priority = typeof opt.priority === 'string'
+      ? opt.priority.toLowerCase()
+      : opt.priority;
+
+    switch (priority) {
+      case 'low':
+        str += '; Priority=Low';
+        break
+      case 'medium':
+        str += '; Priority=Medium';
+        break
+      case 'high':
+        str += '; Priority=High';
+        break
+      default:
+        throw new TypeError('option priority is invalid')
+    }
+  }
+
+  if (opt.sameSite) {
+    var sameSite = typeof opt.sameSite === 'string'
+      ? opt.sameSite.toLowerCase() : opt.sameSite;
+
+    switch (sameSite) {
+      case true:
+        str += '; SameSite=Strict';
+        break;
+      case 'lax':
+        str += '; SameSite=Lax';
+        break;
+      case 'strict':
+        str += '; SameSite=Strict';
+        break;
+      case 'none':
+        str += '; SameSite=None';
+        break;
+      default:
+        throw new TypeError('option sameSite is invalid');
+    }
+  }
+
+  return str;
+}
+
+/**
+ * URL-decode string value. Optimized to skip native call when no %.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+
+function decode (str) {
+  return str.indexOf('%') !== -1
+    ? decodeURIComponent(str)
+    : str
+}
+
+/**
+ * URL-encode value.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+
+function encode (val) {
+  return encodeURIComponent(val)
+}
+
+/**
+ * Determine if value is a Date.
+ *
+ * @param {*} val
+ * @private
+ */
+
+function isDate (val) {
+  return __toString.call(val) === '[object Date]' ||
+    val instanceof Date
+}
+
+/**
+ * Try decoding a string using a decoding function.
+ *
+ * @param {string} str
+ * @param {function} decode
+ * @private
+ */
+
+function tryDecode(str, decode) {
+  try {
+    return decode(str);
+  } catch (e) {
+    return str;
+  }
+}
+
+var cookie = {
+	parse: parse_1,
+	serialize: serialize_1
+};
+
+export { cookie as c };

package/build/esm/{index-bcd13f1d.js → index-bcedec73.js}

@@ -1,22 +1,23 @@
 import React__default from 'react';
-import { C as Container } from './index-6c0f560b.js';
+import { C as Container } from './index-266a32ff.js';
 import dayjs from 'dayjs';
-import { d as domainLocales } from './index-c807ef87.js';
-import { u as useScreenSize } from './index-92eedeb0.js';
+import { d as domainLocales } from './index-6210f454.js';
+import { u as useScreenSize } from './index-9b3a8b6d.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-eeedf0f0.js';
-import './index-80f4d7df.js';
-import './useMantineLocale-1373e175.js';
-import { T as Text } from './index-4dcdce19.js';
-import { t as theme } from './theme-0af1cc3d.js';
-import './translationsContext-036458b7.js';
+import './index-189d7601.js';
+import './index-9471fca1.js';
+import './useMantineLocale-453f8013.js';
+import { T as Text } from './index-5723381f.js';
+import './index-1d3c6ce7.js';
+import { t as theme } from './theme-7dadf4a1.js';
+import './translationsContext-42a1fa63.js';
 import 'string-format';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-511a24f4.js';
+import { M as MediaQueries } from './utils-d7bbdb52.js';
 import styled from '@emotion/styled';
-import { L as Logo } from './index-d48b5db6.js';
-import { M as MarryBabyText } from './index-d5b66388.js';
+import { L as Logo } from './index-2dc7803d.js';
+import { M as MarryBabyText } from './index-1c9b481b.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-ef855343.js → index-c013ba1b.js}

@@ -1,9 +1,9 @@
-import { c as cookie } from './index-13bf84f4.js';
-import { B as BEARER_TOKEN_COOKIE, d as domainLocales } from './index-c807ef87.js';
-import { N as NodeIntentType } from './index-eeedf0f0.js';
+import { c as cookie } from './index-ad1c7c38.js';
+import { B as BEARER_TOKEN_COOKIE, d as domainLocales } from './index-6210f454.js';
+import { N as NodeIntentType } from './index-189d7601.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import { i as isProduction } from './isProduction-1937d355.js';
 
 const queryKeysJson = [
     'form_submit_meta',

package/build/esm/index-c2584051.js

@@ -0,0 +1,262 @@
+import { _ as __rest } from './tslib.es6-06ba3978.js';
+import React__default, { useState } from 'react';
+import styled from '@emotion/styled';
+import { M as MediaQueries } from './utils-d7bbdb52.js';
+import { t as theme } from './theme-7dadf4a1.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-f660abb7.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 };