@blateral/b.kit 2.2.6 → 2.3.0-beta.1.0

package/lib/esm/blocks.js

@@ -0,0 +1,17 @@
+export { B as Bdot, E as EventBlock, c as HeaderKenBurns, H as HeaderPoster, d as HeaderVideo, b as InfoList, I as IntroBlock, f as POICard, P as POIFacts, e as TableBlock, a as Tag, T as Title, V as VideoBlock } from './Bdot-a103eeef.js';
+export { A as Actions } from './Actions-59bdbbf7.js';
+export { I as Image, L as LanguageSwitcher, S as SocialList } from './SocialList-385cde53.js';
+import './ClockFilled-cff5900e.js';
+import 'react';
+import 'styled-components';
+import './styles-eca3acc8.js';
+import 'react-dom/server';
+import './Copy-d2be4fb7.js';
+import './clamp-12d37b65.js';
+import './LibThemeProvider-17012395.js';
+import './Link-42f0b80f.js';
+import './arrays-65b644ef.js';
+import './useMediaQuery-07eee3f4.js';
+import './useObserverSupport-02bce7f5.js';
+import './useUpdateEffect-824c0c84.js';
+//# sourceMappingURL=blocks.js.map

package/lib/esm/blocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/lib/esm/buttons.js

@@ -0,0 +1,10 @@
+export { a as Button, B as ButtonGhost } from './ButtonGhost-422fd723.js';
+export { C as Control, P as Pointer } from './Control-52ff8784.js';
+import './ClockFilled-cff5900e.js';
+import 'react';
+import 'styled-components';
+import './hexRgbConverter-edb91624.js';
+import './clamp-12d37b65.js';
+import './styles-eca3acc8.js';
+import 'react-dom/server';
+//# sourceMappingURL=buttons.js.map

package/lib/esm/buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/esm/clamp-12d37b65.js

@@ -0,0 +1,10 @@
+var clampValue = function (value, min, max) {
+  if (max !== undefined && max !== null) {
+    return Math.max(min, Math.min(value, max));
+  } else {
+    return Math.max(value, min);
+  }
+};
+
+export { clampValue as c };
+//# sourceMappingURL=clamp-12d37b65.js.map

package/lib/esm/clamp-12d37b65.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp-12d37b65.js","sources":["../../src/utils/clamp.ts"],"sourcesContent":["export const clampValue = (value: number, min: number, max?: number) => {\n    if (max !== undefined && max !== null) {\n        return Math.max(min, Math.min(value, max));\n    } else {\n        return Math.max(value, min);\n    }\n};\n"],"names":["clampValue","value","min","max","undefined","Math"],"mappings":"AAAO,IAAMA,UAAU,GAAG,UAACC,KAAD,EAAgBC,GAAhB,EAA6BC,GAA7B,EAAyC;AAC/D,EAAA,IAAIA,GAAG,KAAKC,SAAR,IAAqBD,GAAG,KAAK,IAAjC,EAAuC;AACnC,IAAA,OAAOE,IAAI,CAACF,GAAL,CAASD,GAAT,EAAcG,IAAI,CAACH,GAAL,CAASD,KAAT,EAAgBE,GAAhB,CAAd,CAAP,CAAA;AACH,GAFD,MAEO;AACH,IAAA,OAAOE,IAAI,CAACF,GAAL,CAASF,KAAT,EAAgBC,GAAhB,CAAP,CAAA;AACH,GAAA;AACJ;;;;"}

package/lib/esm/concat-ab3c66f2.js

@@ -0,0 +1,40 @@
+import { i as isValidArray } from './arrays-65b644ef.js';
+
+var concat = function (values, delimeter) {
+  if (delimeter === void 0) {
+    delimeter = ', ';
+  }
+
+  var parts = [];
+
+  if (!isValidArray(values, false)) {
+    return '';
+  }
+
+  for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
+    var value = values_1[_i];
+    if (value === undefined || value === null) continue;
+
+    if (typeof value === 'string' && value !== '') {
+      parts.push(value);
+      continue;
+    }
+
+    if (typeof value === 'number') {
+      parts.push(value.toString());
+      continue;
+    }
+  }
+
+  return parts.join(delimeter);
+};
+var printAnchorTag = function (props) {
+  if (!(props === null || props === void 0 ? void 0 : props.href)) return '';
+  var pre = '';
+  if (props.type === 'mail') pre = 'mailto:';
+  if (props.type === 'phone') pre = 'tel:';
+  return "<a ".concat(props.isExternal ? 'target="_blank" rel="noopener noreferrer" ' : '', "href=\"").concat(pre).concat(props.href, "\">").concat(props.label || props.href, "</a>");
+};
+
+export { concat as c, printAnchorTag as p };
+//# sourceMappingURL=concat-ab3c66f2.js.map

package/lib/esm/concat-ab3c66f2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"concat-ab3c66f2.js","sources":["../../src/utils/concat.ts"],"sourcesContent":["import { isValidArray } from './arrays';\n\nexport const concat = (\n    values: Array<string | number | undefined>,\n    delimeter = ', '\n): string => {\n    const parts: string[] = [];\n\n    if (!isValidArray(values, false)) {\n        return '';\n    }\n\n    for (const value of values) {\n        if (value === undefined || value === null) continue;\n        if (typeof value === 'string' && value !== '') {\n            parts.push(value);\n            continue;\n        }\n\n        if (typeof value === 'number') {\n            parts.push(value.toString());\n            continue;\n        }\n    }\n\n    return parts.join(delimeter);\n};\n\nexport const printAnchorTag = (props: {\n    href: string;\n    label?: string;\n    isExternal?: boolean;\n    type?: 'mail' | 'phone';\n}) => {\n    if (!props?.href) return '';\n    let pre = '';\n    if (props.type === 'mail') pre = 'mailto:';\n    if (props.type === 'phone') pre = 'tel:';\n\n    return `<a ${\n        props.isExternal ? 'target=\"_blank\" rel=\"noopener noreferrer\" ' : ''\n    }href=\"${pre}${props.href}\">${props.label || props.href}</a>`;\n};\n"],"names":["concat","values","delimeter","parts","isValidArray","values_1","_i","length","value","undefined","push","toString","join","printAnchorTag","props","href","pre","type","isExternal","label"],"mappings":";;IAEaA,MAAM,GAAG,UAClBC,MADkB,EAElBC,SAFkB,EAEF;AAAhB,EAAA,IAAAA,SAAA,KAAA,KAAA,CAAA,EAAA;AAAAA,IAAAA,SAAgB,GAAA,IAAhB,CAAA;AAAgB,GAAA;;AAEhB,EAAMC,IAAAA,KAAK,GAAa,EAAxB,CAAA;;AAEA,EAAA,IAAI,CAACC,YAAY,CAACH,MAAD,EAAS,KAAT,CAAjB,EAAkC;AAC9B,IAAA,OAAO,EAAP,CAAA;AACH,GAAA;;AAED,EAAA,KAAoB,UAAA,EAAAI,QAAA,GAAAJ,MAApB,EAAoBK,EAAM,GAAAD,QAAA,CAAAE,MAA1B,EAAoBD,IAApB,EAA4B;AAAvB,IAAA,IAAME,KAAK,GAAAH,QAAA,CAAAC,EAAA,CAAX,CAAA;AACD,IAAA,IAAIE,KAAK,KAAKC,SAAV,IAAuBD,KAAK,KAAK,IAArC,EAA2C,SAAA;;AAC3C,IAAI,IAAA,OAAOA,KAAP,KAAiB,QAAjB,IAA6BA,KAAK,KAAK,EAA3C,EAA+C;AAC3CL,MAAAA,KAAK,CAACO,IAAN,CAAWF,KAAX,CAAA,CAAA;AACA,MAAA,SAAA;AACH,KAAA;;AAED,IAAA,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;AAC3BL,MAAAA,KAAK,CAACO,IAAN,CAAWF,KAAK,CAACG,QAAN,EAAX,CAAA,CAAA;AACA,MAAA,SAAA;AACH,KAAA;AACJ,GAAA;;AAED,EAAA,OAAOR,KAAK,CAACS,IAAN,CAAWV,SAAX,CAAP,CAAA;AACH,EAxBM;AA0BMW,IAAAA,cAAc,GAAG,UAACC,KAAD,EAK7B;AACG,EAAA,IAAI,EAACA,KAAK,KAAA,IAAL,IAAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,KAAK,CAAEC,IAAR,CAAJ,EAAkB,OAAO,EAAP,CAAA;AAClB,EAAIC,IAAAA,GAAG,GAAG,EAAV,CAAA;AACA,EAAIF,IAAAA,KAAK,CAACG,IAAN,KAAe,MAAnB,EAA2BD,GAAG,GAAG,SAAN,CAAA;AAC3B,EAAIF,IAAAA,KAAK,CAACG,IAAN,KAAe,OAAnB,EAA4BD,GAAG,GAAG,MAAN,CAAA;AAE5B,EAAA,OAAO,MAAAhB,MAAA,CACHc,KAAK,CAACI,UAAN,GAAmB,4CAAnB,GAAkE,EAD/D,EACiE,SADjE,CAAA,CACiElB,MADjE,CAEEgB,GAFF,CAEKhB,CAAAA,MAFL,CAEQc,KAAK,CAACC,IAFd,EAEkB,KAFlB,CAAA,CAEkBf,MAFlB,CAEuBc,KAAK,CAACK,KAAN,IAAeL,KAAK,CAACC,IAF5C,EAEgD,MAFhD,CAAP,CAAA;AAGH;;;;"}

package/lib/esm/cookies.js

@@ -0,0 +1,269 @@
+import { u as useCookieConsent, b as bindConsentButtons, s as selectors, i as isUrlInWhitelist } from './useCookieConsent-cd262961.js';
+export { d as deleteCookie, g as getCookie, a as setCookie } from './useCookieConsent-cd262961.js';
+import { a as __makeTemplateObject, u as Check, s as Cross, O as UnfoldMore } from './ClockFilled-cff5900e.js';
+import { A as Actions, S as StatusFormatter } from './Actions-59bdbbf7.js';
+import { C as Checkbox } from './Checkbox-76c2576b.js';
+import { C as Copy } from './Copy-d2be4fb7.js';
+import React__default, { useCallback, useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { h as hexToRgba } from './hexRgbConverter-edb91624.js';
+import { u as useLibTheme, L as LibThemeProvider } from './LibThemeProvider-17012395.js';
+import { s as spacings, g as getColors, m as mq } from './styles-eca3acc8.js';
+import { u as useMounted } from './useMounted-1e4cc87b.js';
+import 'react-dom/server';
+import './clamp-12d37b65.js';
+
+var Stage = styled.div.withConfig({
+  displayName: "CookieConsent__Stage",
+  componentId: "sc-b6420b-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: rgba(0, 0, 0, ", ");\n    z-index: ", ";\n"], ["\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: rgba(0, 0, 0, ", ");\n    z-index: ", ";\n"])), function (_a) {
+  var bgOpacity = _a.bgOpacity;
+  return bgOpacity || 0.4;
+}, function (_a) {
+  var zIndex = _a.zIndex;
+  return zIndex || 1000;
+});
+var View = styled.div.withConfig({
+  displayName: "CookieConsent__View",
+  componentId: "sc-b6420b-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    box-sizing: border-box;\n    max-width: 900px;\n    width: 100vw;\n\n    max-height: 85%;\n    overflow-y: scroll;\n    padding: ", "px ", "px;\n    position: fixed;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 0);\n    text-align: center;\n\n    background-color: ", ";\n    box-shadow: 0 2px 44px rgba(0, 0, 0, 0.3);\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        padding: ", "px;\n\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n\n    @media ", " {\n        bottom: ", "px;\n        max-height: 100vh;\n        overflow: auto;\n    }\n"], ["\n    box-sizing: border-box;\n    max-width: 900px;\n    width: 100vw;\n\n    max-height: 85%;\n    overflow-y: scroll;\n    padding: ", "px ", "px;\n    position: fixed;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 0);\n    text-align: center;\n\n    background-color: ", ";\n    box-shadow: 0 2px 44px rgba(0, 0, 0, 0.3);\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        padding: ", "px;\n\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n\n    @media ", " {\n        bottom: ", "px;\n        max-height: 100vh;\n        overflow: auto;\n    }\n"])), spacings.spacer, spacings.nudge * 2, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, spacings.nudge * 2, mq.medium, spacings.nudge * 5, spacings.nudge * 3, mq.semilarge, spacings.spacer * 1.5);
+var Status = styled(Copy).withConfig({
+  displayName: "CookieConsent__Status",
+  componentId: "sc-b6420b-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    li > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    li > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
+var AcceptIcon = styled(Check).withConfig({
+  displayName: "CookieConsent__AcceptIcon",
+  componentId: "sc-b6420b-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n"], ["\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n"])));
+var DeclineIcon = styled(Cross).withConfig({
+  displayName: "CookieConsent__DeclineIcon",
+  componentId: "sc-b6420b-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n"], ["\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n"])));
+var CookieConsent = function (_a) {
+  var _b, _c;
+
+  var
+  /** URL's that should be excluded from consent */
+  _d = _a.urlWhitelist,
+
+  /** URL's that should be excluded from consent */
+  urlWhitelist = _d === void 0 ? [] : _d,
+      zIndex = _a.zIndex,
+      _e = _a.overlayOpacity,
+      overlayOpacity = _e === void 0 ? 0.4 : _e,
+      status = _a.status,
+      className = _a.className,
+      children = _a.children,
+      theme = _a.theme;
+  var globals = useLibTheme().globals;
+  var statusRenderer = useCallback(function (props) {
+    var updatedDate = new Date(props.updatedAt);
+    var formatter = new StatusFormatter(props.updatedAt, globals.cookie.consentStatusFormat, globals.cookie.consentDateFormat(updatedDate), globals.cookie.consentTimeFormat(updatedDate), globals.cookie.consentLocaleKey);
+    var typeKeys = Object.keys(props.state);
+    var types = props.state;
+    return React__default.createElement(Status, {
+      renderAs: "span"
+    }, React__default.createElement("span", null, formatter.getFormattedStatus()), React__default.createElement("ul", null, typeKeys === null || typeKeys === void 0 ? void 0 : typeKeys.map(function (type, i) {
+      return React__default.createElement("li", {
+        key: i
+      }, React__default.createElement("span", null, types[type].label), types[type].isAccepted ? React__default.createElement(AcceptIcon, null) : React__default.createElement(DeclineIcon, null));
+    })));
+  }, [globals.cookie]);
+
+  var _f = useState(false),
+      isVisible = _f[0],
+      setIsVisible = _f[1];
+
+  var _g = useCookieConsent({
+    cookieName: globals.cookie.name,
+    initialCookieTypes: globals.cookie.types,
+    lifetime: globals.cookie.lifetime
+  }, function () {
+    return setIsVisible(false);
+  }, status || statusRenderer),
+      getCookieValue = _g.getCookieValue,
+      cookieTypes = _g.cookieTypes,
+      acceptAll = _g.acceptAll,
+      acceptSelected = _g.acceptSelected,
+      declineAll = _g.declineAll,
+      setConsent = _g.setConsent;
+
+  var isMounted = useMounted();
+  useEffect(function () {
+    if (isMounted) return; // bind buttons to open consent
+
+    bindConsentButtons(function () {
+      return setIsVisible(true);
+    }, ["[".concat(selectors.buttons.attribute, "]"), ".".concat(selectors.buttons.class)]); // check if consent banner should be open
+
+    var isInWhitelist = isUrlInWhitelist(window.location.pathname, urlWhitelist);
+    if (!isInWhitelist) setIsVisible(!getCookieValue());
+  }, [getCookieValue, isMounted, urlWhitelist]);
+  useEffect(function () {
+    document.body.style.overflow = isVisible ? 'hidden' : 'visible';
+  }, [isVisible]);
+  if (!isVisible) return null;
+  return React__default.createElement(LibThemeProvider, {
+    theme: theme
+  }, React__default.createElement(Stage, {
+    zIndex: zIndex,
+    bgOpacity: overlayOpacity
+  }, React__default.createElement(View, {
+    className: className
+  }, children === null || children === void 0 ? void 0 : children({
+    types: cookieTypes,
+    acceptAll: acceptAll,
+    acceptSelected: acceptSelected,
+    setConsent: setConsent,
+    declineAll: declineAll,
+    additionalAcceptProps: (_b = {}, _b['data-gtm'] = 'button-cookie-consent-accept', _b),
+    additionalDeclineProps: (_c = {}, _c['data-gtm'] = 'button-cookie-consent-decline', _c)
+  }))));
+};
+/** Example Cookie icon */
+
+var CookieIcon = styled.img.withConfig({
+  displayName: "CookieConsent__CookieIcon",
+  componentId: "sc-b6420b-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: block;\n    margin: 0 auto;\n"], ["\n    display: block;\n    margin: 0 auto;\n"])));
+/** Example Cookie title */
+
+var TitleView = styled(Copy).withConfig({
+  displayName: "CookieConsent__TitleView",
+  componentId: "sc-b6420b-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    text-align: ", ";\n    margin-left: ", ";\n    margin-right: auto;\n    max-width: 670px;\n"], ["\n    text-align: ", ";\n    margin-left: ", ";\n    margin-right: auto;\n    max-width: 670px;\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered ? 'center' : 'left';
+}, function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered ? 'auto' : '0';
+});
+var CookieTitle = function (_a) {
+  var isCentered = _a.isCentered,
+      innerHTML = _a.innerHTML,
+      className = _a.className,
+      children = _a.children;
+  return React__default.createElement(TitleView, {
+    size: "big",
+    type: "copy-b",
+    innerHTML: innerHTML,
+    isCentered: isCentered,
+    className: className
+  }, children);
+};
+/** Example Cookie title */
+
+var TextView = styled.div.withConfig({
+  displayName: "CookieConsent__TextView",
+  componentId: "sc-b6420b-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
+var ClampWrapper = styled.div.withConfig({
+  displayName: "CookieConsent__ClampWrapper",
+  componentId: "sc-b6420b-8"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: relative;\n    max-height: ", ";\n    overflow: hidden;\n\n    &:after {\n        content: ", ";\n        display: block;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        height: 100%;\n        background: linear-gradient(\n            0deg,\n            ", " 0%,\n            ", " 25%,\n            ", " 100%\n        );\n        pointer-events: none;\n    }\n"], ["\n    position: relative;\n    max-height: ", ";\n    overflow: hidden;\n\n    &:after {\n        content: ", ";\n        display: block;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        height: 100%;\n        background: linear-gradient(\n            0deg,\n            ", " 0%,\n            ", " 25%,\n            ", " 100%\n        );\n        pointer-events: none;\n    }\n"])), function (_a) {
+  var isClamped = _a.isClamped;
+  return isClamped && '80px';
+}, function (_a) {
+  var isClamped = _a.isClamped;
+  return isClamped && "''";
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).elementBg.light, 0.9);
+}, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).elementBg.light, 0);
+});
+var Text = styled(Copy).withConfig({
+  displayName: "CookieConsent__Text",
+  componentId: "sc-b6420b-9"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    text-align: ", ";\n"], ["\n    text-align: ", ";\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered ? 'center' : 'left';
+});
+var TextToggle = styled.button.withConfig({
+  displayName: "CookieConsent__TextToggle",
+  componentId: "sc-b6420b-10"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    background: none;\n    margin: 0;\n    padding: 0;\n    border: none;\n    cursor: pointer;\n\n    padding: ", "px ", "px;\n"], ["\n    background: none;\n    margin: 0;\n    padding: 0;\n    border: none;\n    cursor: pointer;\n\n    padding: ", "px ", "px;\n"])), spacings.nudge, spacings.nudge * 2);
+var CookieText = function (_a) {
+  var isCentered = _a.isCentered,
+      innerHTML = _a.innerHTML,
+      _b = _a.allowClamping,
+      allowClamping = _b === void 0 ? true : _b,
+      toggle = _a.toggle,
+      className = _a.className,
+      children = _a.children;
+
+  var _c = useState(true),
+      isClamped = _c[0],
+      setIsClamped = _c[1];
+
+  var canClamp = useRef(!!allowClamping);
+  var cRef = useRef(null);
+  useEffect(function () {
+    var _a;
+
+    if (!canClamp.current) return;
+    var height = (_a = cRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+    if (height === undefined) return;
+    setIsClamped(height > 130);
+  }, [allowClamping]);
+
+  var handleToggleClick = function () {
+    setIsClamped(false);
+    canClamp.current = false;
+  };
+
+  return React__default.createElement(TextView, null, React__default.createElement(ClampWrapper, {
+    ref: cRef,
+    isClamped: isClamped
+  }, React__default.createElement(Text, {
+    isCentered: isCentered,
+    innerHTML: innerHTML,
+    className: className
+  }, children)), isClamped && (toggle ? toggle(handleToggleClick) : React__default.createElement(TextToggle, {
+    onClick: handleToggleClick
+  }, React__default.createElement(UnfoldMore, null))));
+};
+var SelectView = styled.div.withConfig({
+  displayName: "CookieConsent__SelectView",
+  componentId: "sc-b6420b-11"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    margin-left: auto;\n    margin-right: auto;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    margin-left: auto;\n    margin-right: auto;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
+var SelectTitle = styled(Copy).withConfig({
+  displayName: "CookieConsent__SelectTitle",
+  componentId: "sc-b6420b-12"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    text-align: left;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"], ["\n    text-align: left;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"])), spacings.nudge * 2);
+var CookieTypeSelect = function (_a) {
+  var title = _a.title,
+      types = _a.types,
+      setConsent = _a.setConsent;
+  return React__default.createElement(SelectView, null, title && React__default.createElement(SelectTitle, {
+    type: "copy-b",
+    innerHTML: title
+  }), types && Object.keys(types).map(function (key) {
+    return React__default.createElement(Checkbox, {
+      key: key,
+      label: types[key].label,
+      isSelected: types[key].isAccepted,
+      isDisabled: !types[key].isEditable,
+      onChange: function () {
+        return setConsent(key);
+      }
+    });
+  }));
+};
+/** Example Cookie actions */
+
+var CookieActions = styled(Actions).withConfig({
+  displayName: "CookieConsent__CookieActions",
+  componentId: "sc-b6420b-13"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    @media ", " {\n        margin-top: ", "px;\n    }\n"], ["\n    margin-top: ", "px;\n\n    @media ", " {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer, mq.medium, spacings.nudge * 5);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+
+export { CookieActions, CookieConsent, CookieIcon, CookieText, CookieTitle, CookieTypeSelect };
+//# sourceMappingURL=cookies.js.map

package/lib/esm/cookies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cookies.js","sources":["../../src/components/blocks/CookieConsent.tsx"],"sourcesContent":["import Check from 'components/base/icons/Check';\nimport Cross from 'components/base/icons/Cross';\nimport UnfoldMore from 'components/base/icons/UnfoldMore';\nimport Actions from 'components/blocks/Actions';\nimport Checkbox from 'components/fields/Checkbox';\nimport Copy from 'components/typography/Copy';\nimport React, { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n    bindConsentButtons,\n    isUrlInWhitelist,\n} from 'utils/cookie-consent/mutations';\nimport useCookieConsent, {\n    CookieTypes,\n    selectors,\n} from 'utils/cookie-consent/useCookieConsent';\nimport { hexToRgba } from 'utils/hexRgbConverter';\nimport {\n    LibThemeProvider,\n    ThemeMods,\n    useLibTheme,\n} from 'utils/LibThemeProvider';\nimport StatusFormatter from 'utils/statusFormatter';\nimport { getColors as color, mq, spacings } from 'utils/styles';\nimport useMounted from 'utils/useMounted';\n\nconst Stage = styled.div<{ zIndex?: number; bgOpacity?: number }>`\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: rgba(0, 0, 0, ${({ bgOpacity }) => bgOpacity || 0.4});\n    z-index: ${({ zIndex }) => zIndex || 1000};\n`;\n\nconst View = styled.div`\n    box-sizing: border-box;\n    max-width: 900px;\n    width: 100vw;\n\n    max-height: 85%;\n    overflow-y: scroll;\n    padding: ${spacings.spacer}px ${spacings.nudge * 2}px;\n    position: fixed;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 0);\n    text-align: center;\n\n    background-color: ${({ theme }) => color(theme).elementBg.light};\n    box-shadow: 0 2px 44px rgba(0, 0, 0, 0.3);\n\n    & > * + * {\n        margin-top: ${spacings.nudge * 2}px;\n    }\n\n    @media ${mq.medium} {\n        padding: ${spacings.nudge * 5}px;\n\n        & > * + * {\n            margin-top: ${spacings.nudge * 3}px;\n        }\n    }\n\n    @media ${mq.semilarge} {\n        bottom: ${spacings.spacer * 1.5}px;\n        max-height: 100vh;\n        overflow: auto;\n    }\n`;\n\nconst Status = styled(Copy)`\n    li > * + * {\n        margin-left: ${spacings.nudge}px;\n    }\n`;\n\nconst AcceptIcon = styled(Check)`\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n`;\n\nconst DeclineIcon = styled(Cross)`\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n`;\n\ntype RenderProps = {\n    types: CookieTypes;\n    acceptAll: () => void;\n    acceptSelected: () => void;\n    declineAll: () => void;\n    setConsent: (type: keyof CookieTypes, isAccepted?: boolean) => void;\n    additionalDeclineProps: {\n        ['data-gtm']: string;\n    };\n    additionalAcceptProps: {\n        ['data-gtm']: string;\n    };\n};\n\nexport const CookieConsent: FC<{\n    /** URL's that should be excluded from consent */\n    urlWhitelist?: string[];\n    zIndex?: number;\n    overlayOpacity?: number;\n    status?: (props: {\n        updatedAt: number;\n        state: CookieTypes;\n    }) => React.ReactElement;\n    className?: string;\n    children?: (props: RenderProps) => React.ReactElement;\n    theme?: ThemeMods;\n}> = ({\n    /** URL's that should be excluded from consent */\n    urlWhitelist = [],\n    zIndex,\n    overlayOpacity = 0.4,\n    status,\n    className,\n    children,\n    theme,\n}) => {\n    const { globals } = useLibTheme();\n\n    const statusRenderer = useCallback(\n        (props: { updatedAt: number; state: CookieTypes }) => {\n            const updatedDate = new Date(props.updatedAt);\n\n            const formatter = new StatusFormatter(\n                props.updatedAt,\n                globals.cookie.consentStatusFormat,\n                globals.cookie.consentDateFormat(updatedDate),\n                globals.cookie.consentTimeFormat(updatedDate),\n                globals.cookie.consentLocaleKey\n            );\n            const typeKeys: string[] = Object.keys(props.state);\n            const types: CookieTypes = props.state;\n\n            return (\n                <Status renderAs=\"span\">\n                    <span>{formatter.getFormattedStatus()}</span>\n                    <ul>\n                        {typeKeys?.map((type, i) => (\n                            <li key={i}>\n                                <span>{types[type].label}</span>\n                                {types[type].isAccepted ? (\n                                    <AcceptIcon />\n                                ) : (\n                                    <DeclineIcon />\n                                )}\n                            </li>\n                        ))}\n                    </ul>\n                </Status>\n            );\n        },\n        [globals.cookie]\n    );\n\n    const [isVisible, setIsVisible] = useState(false);\n    const {\n        getCookieValue,\n        cookieTypes,\n        acceptAll,\n        acceptSelected,\n        declineAll,\n        setConsent,\n    } = useCookieConsent(\n        {\n            cookieName: globals.cookie.name,\n            initialCookieTypes: globals.cookie.types,\n            lifetime: globals.cookie.lifetime,\n        },\n        () => setIsVisible(false),\n        status || statusRenderer\n    );\n    const isMounted = useMounted();\n\n    useEffect(() => {\n        if (isMounted) return;\n\n        // bind buttons to open consent\n        bindConsentButtons(\n            () => setIsVisible(true),\n            [`[${selectors.buttons.attribute}]`, `.${selectors.buttons.class}`]\n        );\n\n        // check if consent banner should be open\n        const isInWhitelist = isUrlInWhitelist(\n            window.location.pathname,\n            urlWhitelist\n        );\n        if (!isInWhitelist) setIsVisible(!getCookieValue());\n    }, [getCookieValue, isMounted, urlWhitelist]);\n\n    useEffect(() => {\n        document.body.style.overflow = isVisible ? 'hidden' : 'visible';\n    }, [isVisible]);\n\n    if (!isVisible) return null;\n    return (\n        <LibThemeProvider theme={theme}>\n            <Stage zIndex={zIndex} bgOpacity={overlayOpacity}>\n                <View className={className}>\n                    {children?.({\n                        types: cookieTypes,\n                        acceptAll,\n                        acceptSelected,\n                        setConsent,\n                        declineAll,\n                        additionalAcceptProps: {\n                            ['data-gtm']: 'button-cookie-consent-accept',\n                        },\n                        additionalDeclineProps: {\n                            ['data-gtm']: 'button-cookie-consent-decline',\n                        },\n                    })}\n                </View>\n            </Stage>\n        </LibThemeProvider>\n    );\n};\n\n/** Example Cookie icon */\nexport const CookieIcon = styled.img`\n    display: block;\n    margin: 0 auto;\n`;\n\n/** Example Cookie title */\nconst TitleView = styled(Copy)<{ isCentered?: boolean }>`\n    text-align: ${({ isCentered }) => (isCentered ? 'center' : 'left')};\n    margin-left: ${({ isCentered }) => (isCentered ? 'auto' : '0')};\n    margin-right: auto;\n    max-width: 670px;\n`;\n\nexport const CookieTitle: FC<{\n    isCentered?: boolean;\n    innerHTML?: string;\n    className?: string;\n    children?: React.ReactNode;\n}> = ({ isCentered, innerHTML, className, children }) => {\n    return (\n        <TitleView\n            size=\"big\"\n            type=\"copy-b\"\n            innerHTML={innerHTML}\n            isCentered={isCentered}\n            className={className}\n        >\n            {children}\n        </TitleView>\n    );\n};\n\n/** Example Cookie title */\nconst TextView = styled.div``;\n\nconst ClampWrapper = styled.div<{ isClamped?: boolean }>`\n    position: relative;\n    max-height: ${({ isClamped }) => isClamped && '80px'};\n    overflow: hidden;\n\n    &:after {\n        content: ${({ isClamped }) => isClamped && \"''\"};\n        display: block;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        height: 100%;\n        background: linear-gradient(\n            0deg,\n            ${({ theme }) => color(theme).elementBg.light} 0%,\n            ${({ theme }) => hexToRgba(color(theme).elementBg.light, 0.9)} 25%,\n            ${({ theme }) => hexToRgba(color(theme).elementBg.light, 0)} 100%\n        );\n        pointer-events: none;\n    }\n`;\n\nconst Text = styled(Copy)<{ isCentered?: boolean }>`\n    text-align: ${({ isCentered }) => (isCentered ? 'center' : 'left')};\n`;\n\nconst TextToggle = styled.button`\n    background: none;\n    margin: 0;\n    padding: 0;\n    border: none;\n    cursor: pointer;\n\n    padding: ${spacings.nudge}px ${spacings.nudge * 2}px;\n`;\n\nexport const CookieText: FC<{\n    isCentered?: boolean;\n    innerHTML?: string;\n    allowClamping?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n    toggle?: (handleClick: () => void) => React.ReactNode;\n}> = ({\n    isCentered,\n    innerHTML,\n    allowClamping = true,\n    toggle,\n    className,\n    children,\n}) => {\n    const [isClamped, setIsClamped] = useState<boolean>(true);\n    const canClamp = useRef<boolean>(!!allowClamping);\n    const cRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!canClamp.current) return;\n\n        const height = cRef.current?.scrollHeight;\n        if (height === undefined) return;\n\n        setIsClamped(height > 130);\n    }, [allowClamping]);\n\n    const handleToggleClick = () => {\n        setIsClamped(false);\n        canClamp.current = false;\n    };\n\n    return (\n        <TextView>\n            <ClampWrapper ref={cRef} isClamped={isClamped}>\n                <Text\n                    isCentered={isCentered}\n                    innerHTML={innerHTML}\n                    className={className}\n                >\n                    {children}\n                </Text>\n            </ClampWrapper>\n            {isClamped &&\n                (toggle ? (\n                    toggle(handleToggleClick)\n                ) : (\n                    <TextToggle onClick={handleToggleClick}>\n                        <UnfoldMore />\n                    </TextToggle>\n                ))}\n        </TextView>\n    );\n};\n\nconst SelectView = styled.div`\n    margin-left: auto;\n    margin-right: auto;\n\n    & > * + * {\n        margin-top: ${spacings.nudge}px;\n    }\n`;\n\nconst SelectTitle = styled(Copy)`\n    text-align: left;\n\n    &:not(:last-child) {\n        margin-bottom: ${spacings.nudge * 2}px;\n    }\n`;\n\nexport const CookieTypeSelect: FC<{\n    title?: string;\n    types: CookieTypes;\n    setConsent: (typeName: keyof CookieTypes, isAccepted?: boolean) => void;\n}> = ({ title, types, setConsent }) => (\n    <SelectView>\n        {title && <SelectTitle type=\"copy-b\" innerHTML={title} />}\n        {types &&\n            Object.keys(types).map((key) => (\n                <Checkbox\n                    key={key}\n                    label={types[key].label}\n                    isSelected={types[key].isAccepted}\n                    isDisabled={!types[key].isEditable}\n                    onChange={() => setConsent(key)}\n                />\n            ))}\n    </SelectView>\n);\n\n/** Example Cookie actions */\nexport const CookieActions = styled(Actions)`\n    margin-top: ${spacings.spacer}px;\n\n    @media ${mq.medium} {\n        margin-top: ${spacings.nudge * 5}px;\n    }\n`;\n\nexport default CookieConsent;\n"],"names":["Stage","styled","div","templateObject_1","__makeTemplateObject","_a","bgOpacity","zIndex","View","spacings","spacer","nudge","theme","color","elementBg","light","mq","medium","semilarge","Status","Copy","templateObject_3","AcceptIcon","Check","templateObject_4","DeclineIcon","Cross","templateObject_5","CookieConsent","_d","urlWhitelist","_e","overlayOpacity","status","className","children","globals","useLibTheme","statusRenderer","useCallback","props","updatedDate","Date","updatedAt","formatter","StatusFormatter","cookie","consentStatusFormat","consentDateFormat","consentTimeFormat","consentLocaleKey","typeKeys","Object","keys","state","types","React","createElement","renderAs","getFormattedStatus","map","type","i","key","label","isAccepted","_f","useState","isVisible","setIsVisible","_g","useCookieConsent","cookieName","name","initialCookieTypes","lifetime","getCookieValue","cookieTypes","acceptAll","acceptSelected","declineAll","setConsent","isMounted","useMounted","useEffect","bindConsentButtons","concat","selectors","buttons","attribute","class","isInWhitelist","isUrlInWhitelist","window","location","pathname","document","body","style","overflow","LibThemeProvider","additionalAcceptProps","_b","additionalDeclineProps","_c","CookieIcon","img","templateObject_6","TitleView","templateObject_7","isCentered","CookieTitle","innerHTML","size","TextView","templateObject_8","ClampWrapper","templateObject_9","isClamped","hexToRgba","Text","templateObject_10","TextToggle","button","templateObject_11","CookieText","allowClamping","toggle","setIsClamped","canClamp","useRef","cRef","current","height","scrollHeight","undefined","handleToggleClick","ref","onClick","UnfoldMore","SelectView","templateObject_12","SelectTitle","templateObject_13","CookieTypeSelect","title","Checkbox","isSelected","isDisabled","isEditable","onChange","CookieActions","Actions","templateObject_14"],"mappings":"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"}

package/lib/esm/fields.js

@@ -0,0 +1,186 @@
+import { a as __makeTemplateObject } from './ClockFilled-cff5900e.js';
+import React__default from 'react';
+import styled from 'styled-components';
+import { u as useLibTheme } from './LibThemeProvider-17012395.js';
+import { g as getColors, m as mq, s as spacings, a as getFonts, w as withRange } from './styles-eca3acc8.js';
+export { D as Datepicker, b as FileUpload, c as FilterField, F as FormField, L as LocationField, R as Radio, S as SelectDropdown, T as Textarea, a as Textfield } from './FilterField-b1a28df7.js';
+export { C as Checkbox } from './Checkbox-76c2576b.js';
+import 'react-dom/server';
+import './Copy-d2be4fb7.js';
+import './clamp-12d37b65.js';
+import './useGeolocation-c99d76bd.js';
+import './useUpdateEffect-824c0c84.js';
+import './ButtonGhost-422fd723.js';
+import './hexRgbConverter-edb91624.js';
+import 'react-datepicker';
+import './useMounted-1e4cc87b.js';
+import './arrays-65b644ef.js';
+
+var View$1 = styled.form.withConfig({
+  displayName: "CompactForm__View",
+  componentId: "sc-v44fzp-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n\n    color: ", ";\n\n    @media ", " {\n        flex-direction: row;\n    }\n"], ["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n\n    color: ", ";\n\n    @media ", " {\n        flex-direction: row;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.default;
+}, mq.medium);
+var InputField$1 = styled.input.withConfig({
+  displayName: "CompactForm__InputField",
+  componentId: "sc-v44fzp-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display: block;\n    width: 100%;\n    height: 49px;\n    max-height: 49px;\n    padding: ", "px ", "px;\n    color: inherit;\n\n    background-color: ", ";\n    box-shadow: none;\n    border: none;\n    border-right: none;\n    border-radius: 0px;\n    outline: none;\n    -webkit-appearance: none;\n\n    font-family: ", ";\n    font-weight: ", ";\n    ", "\n    line-height: ", ";\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: inherit;\n    }\n"], ["\n    display: block;\n    width: 100%;\n    height: 49px;\n    max-height: 49px;\n    padding: ", "px ", "px;\n    color: inherit;\n\n    background-color: ", ";\n    box-shadow: none;\n    border: none;\n    border-right: none;\n    border-radius: 0px;\n    outline: none;\n    -webkit-appearance: none;\n\n    font-family: ", ";\n    font-weight: ", ";\n    ", "\n    line-height: ", ";\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: inherit;\n    }\n"])), spacings.nudge, spacings.nudge * 3, function (_a) {
+  var backColor = _a.backColor;
+  return backColor && backColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.small.family;
+}, function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.small.weight;
+}, function (_a) {
+  var theme = _a.theme;
+  return withRange(getFonts(theme).copy.small.size, 'font-size');
+}, function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.small.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return "2px solid ".concat(getColors(theme).primary.default);
+});
+var SubmitBtn$1 = styled.button.withConfig({
+  displayName: "CompactForm__SubmitBtn",
+  componentId: "sc-v44fzp-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 49px;\n\n    margin-top: ", "px;\n\n    background-color: ", ";\n    color: ", ";\n\n    outline: none;\n    border: none;\n    user-select: none;\n    cursor: pointer;\n    transition: all ease-in-out 0.2s;\n\n    @media ", " {\n        width: 100px;\n        margin-top: 0;\n    }\n\n    &:hover {\n        transform: scale(1.05);\n    }\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 49px;\n\n    margin-top: ", "px;\n\n    background-color: ", ";\n    color: ", ";\n\n    outline: none;\n    border: none;\n    user-select: none;\n    cursor: pointer;\n    transition: all ease-in-out 0.2s;\n\n    @media ", " {\n        width: 100px;\n        margin-top: 0;\n    }\n\n    &:hover {\n        transform: scale(1.05);\n    }\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"])), spacings.spacer * 0.5, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.inverted;
+}, mq.medium);
+
+var CompactForm = function (_a) {
+  var _b = _a.mode,
+      mode = _b === void 0 ? 'default' : _b,
+      value = _a.value,
+      placeholder = _a.placeholder,
+      method = _a.method,
+      action = _a.action,
+      buttonIcon = _a.buttonIcon,
+      onSubmit = _a.onSubmit,
+      onClick = _a.onClick,
+      onBlur = _a.onBlur,
+      onFocus = _a.onFocus,
+      className = _a.className;
+  var colors = useLibTheme().colors;
+  var bgColor = mode === 'default' ? colors.elementBg.medium : colors.elementBg.light;
+  return React__default.createElement(View$1, {
+    onSubmit: onSubmit,
+    method: method,
+    action: action,
+    className: className
+  }, React__default.createElement(InputField$1, {
+    placeholder: placeholder,
+    value: value,
+    onClick: onClick,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    backColor: bgColor
+  }), buttonIcon && React__default.createElement(SubmitBtn$1, {
+    isInverted: mode === 'onDark'
+  }, buttonIcon));
+};
+var templateObject_1$1, templateObject_2$1, templateObject_3$1;
+
+var View = styled.div.withConfig({
+  displayName: "SearchInput__View",
+  componentId: "sc-21j67n-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n\n    color: ", ";\n\n    background-color: ", ";\n"], ["\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n\n    color: ", ";\n\n    background-color: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.default;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+});
+var InputField = styled.input.withConfig({
+  displayName: "SearchInput__InputField",
+  componentId: "sc-21j67n-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    width: 100%;\n    height: 100%;\n    padding: ", "px ", "px;\n    padding-left: ", ";\n    padding-right: ", ";\n    color: inherit;\n\n    background-color: transparent;\n    box-shadow: none;\n    border: none;\n    border-right: none;\n    border-radius: 0px;\n    outline: none;\n    -webkit-appearance: none;\n\n    font-family: ", ";\n    font-weight: 400;\n    ", "\n    line-height: 1.25;\n\n    &::placeholder {\n        color: inherit;\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: block;\n    width: 100%;\n    height: 100%;\n    padding: ", "px ", "px;\n    padding-left: ", ";\n    padding-right: ", ";\n    color: inherit;\n\n    background-color: transparent;\n    box-shadow: none;\n    border: none;\n    border-right: none;\n    border-radius: 0px;\n    outline: none;\n    -webkit-appearance: none;\n\n    font-family: ", ";\n    font-weight: 400;\n    ", "\n    line-height: 1.25;\n\n    &::placeholder {\n        color: inherit;\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge * 3, spacings.nudge * 3.5, function (_a) {
+  var hasLeftIcon = _a.hasLeftIcon;
+  return hasLeftIcon && spacings.spacer * 2.5 + 'px';
+}, function (_a) {
+  var hasRightIcon = _a.hasRightIcon;
+  return hasRightIcon && spacings.spacer * 2.5 + 'px';
+}, function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.small.family;
+}, function (_a) {
+  var theme = _a.theme;
+  return withRange(getFonts(theme).copy.small.size, 'font-size');
+}, function (_a) {
+  var theme = _a.theme;
+  return "1px solid ".concat(getColors(theme).primary.default);
+});
+var ControlBtn = styled.button.withConfig({
+  displayName: "SearchInput__ControlBtn",
+  componentId: "sc-21j67n-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 53px;\n\n    margin: -2px;\n    background-color: transparent;\n    color: ", ";\n\n    outline: none;\n    border: none;\n    user-select: none;\n    cursor: pointer;\n    /* transition: all ease-in-out 0.2s; */\n\n    &:hover {\n        transform: scale(1.02);\n    }\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 53px;\n\n    margin: -2px;\n    background-color: transparent;\n    color: ", ";\n\n    outline: none;\n    border: none;\n    user-select: none;\n    cursor: pointer;\n    /* transition: all ease-in-out 0.2s; */\n\n    &:hover {\n        transform: scale(1.02);\n    }\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.default;
+});
+var SubmitBtn = styled(ControlBtn).withConfig({
+  displayName: "SearchInput__SubmitBtn",
+  componentId: "sc-21j67n-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n"])));
+var ClearBtn = styled(ControlBtn).withConfig({
+  displayName: "SearchInput__ClearBtn",
+  componentId: "sc-21j67n-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n"])));
+
+var SearchInput = function (_a) {
+  var _b = _a.isInverted,
+      isInverted = _b === void 0 ? false : _b,
+      value = _a.value,
+      placeholder = _a.placeholder,
+      submitIcon = _a.submitIcon,
+      clearIcon = _a.clearIcon,
+      onSubmit = _a.onSubmit,
+      onClick = _a.onClick,
+      onClear = _a.onClear,
+      onBlur = _a.onBlur,
+      onFocus = _a.onFocus,
+      className = _a.className;
+
+  var handleKeyDown = function (ev) {
+    if (ev.keyCode === 13) {
+      onSubmit && onSubmit();
+      ev.preventDefault();
+    }
+  };
+
+  return React__default.createElement(View, {
+    isInverted: isInverted,
+    className: className
+  }, submitIcon && React__default.createElement(SubmitBtn, {
+    isInverted: isInverted,
+    onClick: function () {
+      return onSubmit && onSubmit();
+    }
+  }, submitIcon), React__default.createElement(InputField, {
+    hasLeftIcon: submitIcon !== undefined,
+    hasRightIcon: clearIcon !== undefined,
+    placeholder: placeholder,
+    value: value,
+    onClick: onClick,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown
+  }), clearIcon && React__default.createElement(ClearBtn, {
+    isInverted: isInverted,
+    onClick: function () {
+      return onClear && onClear();
+    }
+  }, clearIcon));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { CompactForm, SearchInput };
+//# sourceMappingURL=fields.js.map