@blateral/b.kit 2.8.1 → 2.8.3

package/esm/FilterField-60359bfc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterField-60359bfc.js","sources":["../src/components/fields/FilterField.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { copyStyle } from 'components/typography/Copy';\nimport {\n    spacings,\n    getColors as color,\n    getFonts as font,\n    getGlobals as global,\n} from 'utils/styles';\nimport Magnifier from 'components/base/icons/Magnifier';\nimport useLazyInput from 'utils/useLazyInput';\nimport Cross from 'components/base/icons/Cross';\n\nconst View = styled.div<{ isInverted?: boolean }>`\n    display: flex;\n    height: 45px;\n    border: solid 1px\n        ${({ theme, isInverted }) =>\n            isInverted\n                ? color(theme).elementBg.light\n                : color(theme).elementBg.dark};\n    border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n\n    color: ${({ theme, isInverted }) =>\n        isInverted\n            ? font(theme).copy.medium.colorInverted\n            : font(theme).copy.medium.color};\n\n    &:focus-within {\n        outline: ${({ theme, isInverted }) =>\n            `1px solid ${\n                isInverted\n                    ? color(theme).primary.inverted\n                    : color(theme).primary.default\n            }`};\n        outline-offset: 0;\n    }\n\n    &:focus-within & > input:not(:focus-visible) {\n        outline: none;\n    }\n`;\n\nconst Field = styled.input<{ isInverted?: boolean }>`\n    flex: 1 1 auto;\n    min-width: 20%;\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    color: inherit;\n    ${copyStyle('copy', 'medium')}\n    line-height: 1;\n\n    padding: ${spacings.nudge * 2}px ${spacings.nudge}px;\n\n    &:not(:first-child) {\n        padding-left: 0px;\n    }\n\n    &:not(:last-child) {\n        padding-right: 0px;\n    }\n\n    &::placeholder {\n        color: ${({ theme, isInverted }) =>\n            isInverted\n                ? color(theme).text.subtileInverted\n                : color(theme).text.subtile};\n    }\n`;\n\nconst Icon = styled.div`\n    display: flex;\n    align-items: center;\n    padding-right: ${spacings.nudge}px;\n    padding-left: ${spacings.nudge * 2}px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n`;\n\nconst ClearBtn = styled.button<{ isInverted?: boolean }>`\n    flex: 0 0 auto;\n\n    display: flex;\n    align-items: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n\n    padding-right: ${spacings.nudge}px;\n    padding-left: ${spacings.nudge}px;\n    margin-left: ${spacings.nudge}px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.8;\n        }\n    }\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n\n        outline: ${({ theme, isInverted }) =>\n            `2px solid ${\n                isInverted\n                    ? color(theme).primary.inverted\n                    : color(theme).primary.default\n            }`};\n        outline-offset: -4px;\n        outline-style: dashed;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        height: 20px;\n        width: 20px;\n    }\n`;\n\nconst FilterField: FC<{\n    isInverted?: boolean;\n    value?: string;\n    initialValue?: string;\n    placeholder?: string;\n    onSubmit?: (value: string) => void;\n    onBlur?: (ev: React.SyntheticEvent<HTMLInputElement>) => void;\n    icon?: (isInverted?: boolean) => React.ReactNode;\n    submitIcon?: (isInverted?: boolean) => React.ReactNode;\n    clearIcon?: (isInverted?: boolean) => React.ReactNode;\n    className?: string;\n}> = ({\n    isInverted,\n    value,\n    initialValue,\n    placeholder,\n    onSubmit,\n    onBlur,\n    icon,\n    submitIcon,\n    clearIcon,\n    className,\n}) => {\n    const {\n        update,\n        value: getValue,\n        forceUpdate,\n    } = useLazyInput((value) => {\n        onSubmit?.(value);\n    }, initialValue || '');\n\n    useEffect(() => {\n        if (value !== undefined) {\n            update(value);\n        }\n    }, [update, value]);\n\n    const iconElement = icon ? icon(isInverted) : null;\n    const submitIconElement = submitIcon ? (\n        submitIcon(isInverted)\n    ) : (\n        <Magnifier width={20} height={20} />\n    );\n    const clearIconElement = clearIcon ? (\n        clearIcon(isInverted)\n    ) : (\n        <Cross width={20} height={20} />\n    );\n\n    return (\n        <View isInverted={isInverted} className={className}>\n            {iconElement && <Icon>{iconElement}</Icon>}\n            <Field\n                type=\"text\"\n                isInverted={isInverted}\n                value={getValue}\n                placeholder={placeholder}\n                onChange={(ev) => {\n                    const newValue = ev?.currentTarget?.value;\n                    if (newValue !== undefined) {\n                        update(newValue, newValue === '');\n                    }\n                }}\n                onBlur={onBlur}\n                onKeyDown={(ev) => {\n                    if (ev.key === 'Enter') {\n                        forceUpdate();\n                    }\n                }}\n            />\n            {getValue === '' && submitIconElement && (\n                <Icon>{submitIconElement}</Icon>\n            )}\n            {getValue !== '' && clearIconElement && (\n                <ClearBtn\n                    isInverted={isInverted}\n                    aria-label=\"clear filter\"\n                    onClick={() => {\n                        update('', true);\n                    }}\n                >\n                    {clearIconElement}\n                </ClearBtn>\n            )}\n        </View>\n    );\n};\n\nexport default FilterField;\n"],"names":["View","styled","div","_a","theme","isInverted","color","elementBg","light","dark","global","sections","edgeRadius","font","copy","medium","colorInverted","primary","inverted","default","Field","input","templateObject_2","__makeTemplateObject","copyStyle","spacings","nudge","text","subtileInverted","subtile","Icon","templateObject_3","ClearBtn","button","templateObject_4","FilterField","value","initialValue","placeholder","onSubmit","onBlur","icon","submitIcon","clearIcon","className","_b","useLazyInput","update","getValue","forceUpdate","useEffect","undefined","iconElement","submitIconElement","React","createElement","Magnifier","width","height","clearIconElement","Cross","type","onChange","ev","newValue","currentTarget","onKeyDown","key","onClick"],"mappings":"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"}

package/esm/{MultiselectDropdown-a97be6bc.js → MultiselectDropdown-91d0151c.js}

@@ -1,6 +1,6 @@
 import { a as __makeTemplateObject, i as AngleUp, g as AngleDown, e as __spreadArray } from './Filter-19220970.js';
 import React__default, { useState, useRef, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { c as copyStyle, C as Copy } from './Copy-c6786949.js';
 import { u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
 import { s as spacings, g as getColors, c as getGlobals, w as withRange, a as getFonts } from './styles-1f1841ef.js';
@@ -11,7 +11,7 @@ import { C as Checkbox } from './Checkbox-1957067a.js';
 var Select = styled.button.withConfig({
   displayName: "MultiselectDropdown__Select",
   componentId: "sc-rrwdl0-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 45px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: ", ";\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n    line-height: normal;\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 45px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: ", ";\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n    line-height: normal;\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), function (_a) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 45px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: ", ";\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n    transition: background-color 0.2s ease-in-out;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n    line-height: normal;\n\n    @media (hover: hover) and (pointer: fine) {\n        ", "\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 45px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: ", ";\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n    transition: background-color 0.2s ease-in-out;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n    line-height: normal;\n\n    @media (hover: hover) and (pointer: fine) {\n        ", "\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), function (_a) {
   var inlined = _a.inlined;
   return inlined ? 'default' : 'pointer';
 }, spacings.nudge, function (_a) {
@@ -40,6 +40,11 @@ var Select = styled.button.withConfig({
   }
 
   return hasError ? getColors(theme).text.error : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme,
+      isOpen = _a.isOpen;
+  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                &:hover {\n                    outline: ", ";\n                    outline-offset: 0;\n                }\n            "], ["\n                &:hover {\n                    outline: ", ";\n                    outline-offset: 0;\n                }\n            "])), "1px solid ".concat(isOpen ? 'transparent' : isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default));
 }, function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted,
@@ -49,15 +54,15 @@ var Select = styled.button.withConfig({
 var SelectMain = styled(Copy).withConfig({
   displayName: "MultiselectDropdown__SelectMain",
   componentId: "sc-rrwdl0-1"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
 var Indicator = styled.span.withConfig({
   displayName: "MultiselectDropdown__Indicator",
   componentId: "sc-rrwdl0-2"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
 var Flyout = styled.ul.withConfig({
   displayName: "MultiselectDropdown__Flyout",
   componentId: "sc-rrwdl0-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    list-style: none;\n    padding: ", "px ", "px;\n    margin: 0;\n    margin-top: ", ";\n\n    position: ", ";\n    top: calc(100% + 3px);\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: none;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"], ["\n    list-style: none;\n    padding: ", "px ", "px;\n    margin: 0;\n    margin-top: ", ";\n\n    position: ", ";\n    top: calc(100% + 3px);\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: none;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"])), spacings.nudge, spacings.nudge * 2, function (_a) {
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    list-style: none;\n    padding: ", "px ", "px;\n    margin: 0;\n    margin-top: ", ";\n\n    position: ", ";\n    top: calc(100% + 3px);\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: none;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"], ["\n    list-style: none;\n    padding: ", "px ", "px;\n    margin: 0;\n    margin-top: ", ";\n\n    position: ", ";\n    top: calc(100% + 3px);\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: none;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"])), spacings.nudge, spacings.nudge * 2, function (_a) {
   var inlined = _a.inlined;
   return inlined && '3px';
 }, function (_a) {
@@ -83,19 +88,19 @@ var Flyout = styled.ul.withConfig({
 var ItemStyle = styled.li.withConfig({
   displayName: "MultiselectDropdown__ItemStyle",
   componentId: "sc-rrwdl0-4"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 100%;\n    cursor: pointer;\n    position: relative;\n\n    padding: 5px 0px;\n"], ["\n    width: 100%;\n    cursor: pointer;\n    position: relative;\n\n    padding: 5px 0px;\n"])));
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 100%;\n    cursor: pointer;\n    position: relative;\n\n    padding: 5px 0px;\n"], ["\n    width: 100%;\n    cursor: pointer;\n    position: relative;\n\n    padding: 5px 0px;\n"])));
 var ItemCheckbox = styled(Checkbox).withConfig({
   displayName: "MultiselectDropdown__ItemCheckbox",
   componentId: "sc-rrwdl0-5"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 100%;\n"], ["\n    width: 100%;\n"])));
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: 100%;\n"], ["\n    width: 100%;\n"])));
 var Container = styled.div.withConfig({
   displayName: "MultiselectDropdown__Container",
   componentId: "sc-rrwdl0-6"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: relative;\n    outline: none;\n"], ["\n    position: relative;\n    outline: none;\n"])));
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    position: relative;\n    outline: none;\n"], ["\n    position: relative;\n    outline: none;\n"])));
 var Counter = styled(Copy).withConfig({
   displayName: "MultiselectDropdown__Counter",
   componentId: "sc-rrwdl0-7"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    flex: 0 0 20px;\n\n    position: relative;\n    background: ", ";\n\n    line-height: normal;\n    color: ", ";\n\n    max-height: 20px;\n    max-width: 20px;\n\n    height: 20px;\n    width: 20px;\n\n    border-radius: 50px;\n\n    & > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n\n        transform: translate(-50%, -50%);\n    }\n"], ["\n    flex: 0 0 20px;\n\n    position: relative;\n    background: ", ";\n\n    line-height: normal;\n    color: ", ";\n\n    max-height: 20px;\n    max-width: 20px;\n\n    height: 20px;\n    width: 20px;\n\n    border-radius: 50px;\n\n    & > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n\n        transform: translate(-50%, -50%);\n    }\n"])), function (_a) {
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    flex: 0 0 20px;\n\n    position: relative;\n    background: ", ";\n\n    line-height: normal;\n    color: ", ";\n\n    max-height: 20px;\n    max-width: 20px;\n\n    height: 20px;\n    width: 20px;\n\n    border-radius: 50px;\n\n    & > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n\n        transform: translate(-50%, -50%);\n    }\n"], ["\n    flex: 0 0 20px;\n\n    position: relative;\n    background: ", ";\n\n    line-height: normal;\n    color: ", ";\n\n    max-height: 20px;\n    max-width: 20px;\n\n    height: 20px;\n    width: 20px;\n\n    border-radius: 50px;\n\n    & > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n\n        transform: translate(-50%, -50%);\n    }\n"])), function (_a) {
   var theme = _a.theme;
   return getColors(theme).text.default;
 }, function (_a) {
@@ -105,14 +110,14 @@ var Counter = styled(Copy).withConfig({
 var Reset = styled.button.withConfig({
   displayName: "MultiselectDropdown__Reset",
   componentId: "sc-rrwdl0-8"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    background: none;\n    border: none;\n    padding: 0;\n\n    ", ";\n    margin-top: ", "px;\n\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            text-decoration: underline;\n        }\n    }\n\n    &:focus {\n        outline: 1px dashed ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    background: none;\n    border: none;\n    padding: 0;\n\n    ", ";\n    margin-top: ", "px;\n\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            text-decoration: underline;\n        }\n    }\n\n    &:focus {\n        outline: 1px dashed ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), copyStyle('copy', 'small'), spacings.nudge * 2, function (_a) {
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    background: none;\n    border: none;\n    padding: 0;\n\n    ", ";\n    margin-top: ", "px;\n\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            text-decoration: underline;\n        }\n    }\n\n    &:focus {\n        outline: 1px dashed ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    background: none;\n    border: none;\n    padding: 0;\n\n    ", ";\n    margin-top: ", "px;\n\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            text-decoration: underline;\n        }\n    }\n\n    &:focus {\n        outline: 1px dashed ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), copyStyle('copy', 'small'), spacings.nudge * 2, function (_a) {
   var theme = _a.theme;
   return getFonts(theme).link.color;
 });
 var Icon = styled.div.withConfig({
   displayName: "MultiselectDropdown__Icon",
   componentId: "sc-rrwdl0-9"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n"], ["\n    display: flex;\n    align-items: center;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n"])), spacings.nudge);
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n"], ["\n    display: flex;\n    align-items: center;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n"])), spacings.nudge);
 
 var MultiselectDropdown = function (_a) {
   var label = _a.label,
@@ -209,7 +214,7 @@ var MultiselectDropdown = function (_a) {
       });
     },
     "aria-expanded": isOpen
-  }, React__default.createElement(SelectMain, null, iconElement && React__default.createElement(Icon, null, iconElement), React__default.createElement("span", null, placeholder)), React__default.createElement(Indicator, null, React__default.createElement(Counter, {
+  }, React__default.createElement(SelectMain, null, iconElement && React__default.createElement(Icon, null, iconElement), React__default.createElement("span", null, placeholder)), React__default.createElement(Indicator, null, selected.length > 0 && React__default.createElement(Counter, {
     size: "small"
   }, React__default.createElement("span", null, selected.length)), indicator && indicator({
     isOpen: isOpen,
@@ -290,7 +295,7 @@ var areEqual = function (prev, next) {
 };
 
 var MultiselectDropdown$1 = React__default.memo(MultiselectDropdown, areEqual);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 
 export { MultiselectDropdown$1 as M };
-//# sourceMappingURL=MultiselectDropdown-a97be6bc.js.map
+//# sourceMappingURL=MultiselectDropdown-91d0151c.js.map

package/esm/MultiselectDropdown-91d0151c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectDropdown-91d0151c.js","sources":["../src/components/fields/MultiselectDropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport AngleDown from 'components/base/icons/AngleDown';\nimport AngleUp from 'components/base/icons/AngleUp';\nimport Copy, { copyStyle } from 'components/typography/Copy';\nimport { useLibTheme } from 'utils/LibThemeProvider';\nimport {\n    getColors as color,\n    getFonts as font,\n    spacings,\n    getGlobals as global,\n    withRange,\n} from 'utils/styles';\nimport FieldWrapper from './FormField';\nimport { FormProps } from './Textfield';\nimport { getFormFieldTextSize } from 'utils/formFieldText';\nimport useMounted from 'utils/useMounted';\nimport Checkbox from './Checkbox';\n\nconst Select = styled.button<{\n    hasError?: boolean;\n    isOpen?: boolean;\n    isInverted?: boolean;\n    inlined?: boolean;\n}>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 45px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: ${({ inlined }) => (inlined ? 'default' : 'pointer')};\n\n    padding: ${spacings.nudge}px;\n\n    border: 1px solid\n        ${({ theme, isInverted, hasError }) => {\n            if (isInverted) {\n                return hasError\n                    ? color(theme).errorInverted\n                    : color(theme).elementBg.light;\n            }\n            return hasError ? color(theme).error : color(theme).elementBg.dark;\n        }};\n    border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n\n    background: transparent;\n    transition: background-color 0.2s ease-in-out;\n\n    ${copyStyle('copy', 'small')}\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ${({ theme }) => withRange(getFormFieldTextSize(theme), 'font-size')}\n    \n    color: ${({ theme, isInverted, hasError }) => {\n        if (isInverted) {\n            return hasError\n                ? color(theme).text.errorInverted\n                : font(theme).copy.small.colorInverted;\n        }\n        return hasError\n            ? color(theme).text.error\n            : font(theme).copy.small.color;\n    }};\n    line-height: normal;\n\n    @media (hover: hover) and (pointer: fine) {\n        ${({ isInverted, theme, isOpen }) =>\n            css`\n                &:hover {\n                    outline: ${`1px solid ${\n                        isOpen\n                            ? 'transparent'\n                            : isInverted\n                            ? color(theme).primary.inverted\n                            : color(theme).primary.default\n                    }`};\n                    outline-offset: 0;\n                }\n            `}\n    }\n\n    &:focus {\n        outline: ${({ theme, isInverted, isOpen }) =>\n            `1px solid ${\n                isOpen\n                    ? 'transparent'\n                    : isInverted\n                    ? color(theme).primary.inverted\n                    : color(theme).primary.default\n            }`};\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ${spacings.nudge}px;\n    }\n`;\n\nconst SelectMain = styled(Copy)`\n    display: flex;\n    align-items: center;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ${spacings.nudge}px;\n    }\n`;\n\nconst Indicator = styled.span`\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n\n    & > * + * {\n        margin-left: ${spacings.nudge}px;\n    }\n`;\n\nconst Flyout = styled.ul<{\n    isVisible?: boolean;\n    isInverted?: boolean;\n    inlined?: boolean;\n}>`\n    list-style: none;\n    padding: ${spacings.nudge}px ${spacings.nudge * 2}px;\n    margin: 0;\n    margin-top: ${({ inlined }) => inlined && '3px'};\n\n    position: ${({ inlined }) => (inlined ? 'relative' : 'absolute')};\n    top: calc(100% + 3px);\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ${({ isVisible }) => (isVisible ? 'block' : 'none')};\n    background: ${({ theme }) => color(theme).elementBg.light};\n    border: 1px solid\n        ${({ theme, isInverted }) =>\n            isInverted\n                ? color(theme).elementBg.light\n                : color(theme).elementBg.dark};\n    border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: none;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ${({ theme }) => color(theme).elementBg.medium};\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n`;\n\nconst ItemStyle = styled.li`\n    width: 100%;\n    cursor: pointer;\n    position: relative;\n\n    padding: 5px 0px;\n`;\n\nconst ItemCheckbox = styled(Checkbox)`\n    width: 100%;\n`;\n\nconst Container = styled.div`\n    position: relative;\n    outline: none;\n`;\n\nconst Counter = styled(Copy)`\n    flex: 0 0 20px;\n\n    position: relative;\n    background: ${({ theme }) => color(theme).text.default};\n\n    line-height: normal;\n    color: ${({ theme }) => color(theme).text.inverted};\n\n    max-height: 20px;\n    max-width: 20px;\n\n    height: 20px;\n    width: 20px;\n\n    border-radius: 50px;\n\n    & > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n\n        transform: translate(-50%, -50%);\n    }\n`;\n\nconst Reset = styled.button`\n    background: none;\n    border: none;\n    padding: 0;\n\n    ${copyStyle('copy', 'small')};\n    margin-top: ${spacings.nudge * 2}px;\n\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            text-decoration: underline;\n        }\n    }\n\n    &:focus {\n        outline: 1px dashed ${({ theme }) => font(theme).link.color};\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n`;\nconst Icon = styled.div`\n    display: flex;\n    align-items: center;\n    padding-left: ${spacings.nudge}px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n`;\n\ninterface FilterItem {\n    value: string;\n    label: string;\n}\n\nexport type MultiselectDropdownProps = Omit<FormProps, 'value'> & {\n    enableMemo?: boolean;\n    inlined?: boolean;\n    placeholder?: string;\n    name?: string;\n    selectedItems?: string[];\n    items: FilterItem[];\n    resetLabel?: string;\n\n    onChange?: (values: string[]) => void;\n    onBlur?: () => void;\n    icon?: (isInverted?: boolean) => React.ReactNode;\n    indicator?: (props: {\n        isOpen: boolean;\n        isDisabled?: boolean;\n    }) => React.ReactNode;\n};\n\nconst MultiselectDropdown: React.FC<\n    MultiselectDropdownProps & { className?: string }\n> = ({\n    label,\n    isRequired,\n    errorMessage,\n    infoMessage,\n    isDisabled,\n    isInverted,\n    items,\n    name,\n    selectedItems,\n    placeholder,\n    resetLabel,\n    inlined,\n    icon,\n    onChange,\n    onBlur,\n    indicator,\n    className,\n}) => {\n    const { colors } = useLibTheme();\n    const [isOpen, setIsOpen] = useState(inlined || false);\n    const [selected, setSelected] = useState<string[]>(selectedItems || []);\n\n    const selectBtnRef = useRef<HTMLButtonElement>(null);\n    const selectContainerRef = useRef<HTMLDivElement>(null);\n    const isMounted = useMounted();\n    const itemHasBeenClicked = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (selectedItems) {\n            setSelected(selectedItems);\n        }\n    }, [selectedItems]);\n\n    useEffect(() => {\n        if (isMounted) {\n            onChange?.(selected);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selected]);\n\n    if (isDisabled) {\n        errorMessage = '';\n    }\n\n    const toggleSelected = (value: string) => {\n        if (selected.includes(value)) {\n            setSelected((prev) => prev.filter((v) => v !== value));\n            return;\n        }\n\n        setSelected((prev) => [...prev, value]);\n    };\n\n    const iconElement = icon?.(isInverted);\n\n    return (\n        <FieldWrapper.View isDisabled={isDisabled} className={className}>\n            <FieldWrapper.Head\n                label={label}\n                isRequired={isRequired}\n                isInverted={isInverted}\n            />\n            <FieldWrapper.Content>\n                <Container\n                    ref={selectContainerRef}\n                    onBlur={(ev) => {\n                        if (\n                            !inlined &&\n                            !selectContainerRef.current?.contains(\n                                ev.relatedTarget\n                            ) &&\n                            !itemHasBeenClicked.current\n                        ) {\n                            setIsOpen(false);\n                            onBlur?.();\n                        }\n                    }}\n                >\n                    <Select\n                        ref={selectBtnRef}\n                        type=\"button\"\n                        isOpen={isOpen}\n                        inlined={inlined}\n                        isInverted={isInverted}\n                        hasError={!!errorMessage}\n                        onClick={() => {\n                            if (inlined) return;\n                            setIsOpen((prev) => !prev);\n                        }}\n                        aria-expanded={isOpen}\n                    >\n                        <SelectMain>\n                            {iconElement && <Icon>{iconElement}</Icon>}\n                            <span>{placeholder}</span>\n                        </SelectMain>\n                        <Indicator>\n                            {selected.length > 0 && (\n                                <Counter size=\"small\">\n                                    <span>{selected.length}</span>\n                                </Counter>\n                            )}\n                            {indicator &&\n                                indicator({ isOpen, isDisabled: isDisabled })}\n                            {!indicator &&\n                                (isOpen ? (\n                                    <AngleUp\n                                        iconColor={\n                                            isDisabled\n                                                ? colors.elementBg.medium\n                                                : colors.elementBg.dark\n                                        }\n                                    />\n                                ) : (\n                                    <AngleDown\n                                        iconColor={\n                                            isDisabled\n                                                ? colors.elementBg.medium\n                                                : colors.elementBg.dark\n                                        }\n                                    />\n                                ))}\n                        </Indicator>\n                    </Select>\n                    <Flyout isVisible={isOpen} inlined={inlined}>\n                        {items.map((item, i) => {\n                            const isSelected = selected.includes(item.value);\n\n                            return (\n                                <ItemStyle\n                                    key={`key_${i + 1}`}\n                                    onMouseDown={() => {\n                                        itemHasBeenClicked.current = true;\n                                    }}\n                                >\n                                    <ItemCheckbox\n                                        isSelected={isSelected}\n                                        value={item.value}\n                                        onChange={() => {\n                                            toggleSelected(item.value);\n                                            itemHasBeenClicked.current = false;\n                                        }}\n                                        label={item.label}\n                                    />\n                                </ItemStyle>\n                            );\n                        })}\n                        {resetLabel && (\n                            <Reset onClick={() => setSelected([])}>\n                                {resetLabel}\n                            </Reset>\n                        )}\n                    </Flyout>\n                </Container>\n                <select name={name} multiple hidden defaultValue={selected}>\n                    {items.map((item, i) => {\n                        return (\n                            <option key={`key_${i}`} value={item.value}>\n                                {item.label}\n                            </option>\n                        );\n                    })}\n                </select>\n            </FieldWrapper.Content>\n            <FieldWrapper.Messages\n                infoMessage={infoMessage}\n                errorMessage={errorMessage}\n                isInverted={isInverted}\n            />\n        </FieldWrapper.View>\n    );\n};\n\n/**\n * Function to compare both field prop states\n * @param prev Previous props\n * @param next Next props\n * @returns\n */\nconst areEqual = (\n    prev: MultiselectDropdownProps,\n    next: MultiselectDropdownProps\n) => {\n    // only apply logic if memo functionality is enabled\n    if (!prev.enableMemo) return false;\n\n    if (prev.selectedItems !== next.selectedItems) return false;\n    if (prev.errorMessage !== next.errorMessage) return false;\n    if (prev.infoMessage !== next.infoMessage) return false;\n    if (prev.label !== next.label) return false;\n    if (prev.placeholder !== next.placeholder) return false;\n    if (prev.resetLabel !== next.resetLabel) return false;\n    if (prev.isInverted !== next.isInverted) return false;\n    if (prev.isDisabled !== next.isDisabled) return false;\n    if (prev.inlined !== next.inlined) return false;\n\n    // compare items\n    if (prev.items.length !== next.items.length) return false;\n    for (let i = 0; i < prev.items.length; i++) {\n        if (\n            prev.items[i].label !== next.items[i].label ||\n            prev.items[i].value !== next.items[i].value\n        ) {\n            return false;\n        }\n    }\n\n    return true;\n};\n\nexport default React.memo(MultiselectDropdown, areEqual);\n"],"names":["Select","styled","button","templateObject_2","__makeTemplateObject","_a","inlined","spacings","nudge","theme","isInverted","hasError","color","errorInverted","elementBg","light","error","dark","global","sections","edgeRadius","copyStyle","withRange","getFormFieldTextSize","text","font","copy","small","colorInverted","isOpen","css","templateObject_1","primary","inverted","default","SelectMain","Copy","templateObject_3","Indicator","span","templateObject_4","Flyout","ul","isVisible","medium","ItemStyle","li","templateObject_6","ItemCheckbox","Checkbox","templateObject_7","Container","div","templateObject_8","Counter","templateObject_9","Reset","templateObject_10","link","Icon","templateObject_11","MultiselectDropdown","label","isRequired","errorMessage","infoMessage","isDisabled","items","name","selectedItems","placeholder","resetLabel","icon","onChange","onBlur","indicator","className","colors","useLibTheme","_b","useState","setIsOpen","_c","selected","setSelected","selectBtnRef","useRef","selectContainerRef","isMounted","useMounted","itemHasBeenClicked","useEffect","toggleSelected","value","includes","prev","filter","v","__spreadArray","iconElement","React","createElement","FieldWrapper","View","Head","Content","ref","ev","current","contains","relatedTarget","type","onClick","length","size","AngleUp","iconColor","AngleDown","map","item","i","isSelected","key","concat","onMouseDown","multiple","hidden","defaultValue","Messages","areEqual","next","enableMemo","memo"],"mappings":"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"}

package/esm/{Pointer-b4abee91.js → Pointer-3e965d7b.js}

@@ -6,7 +6,7 @@ import { a as getFonts, w as withRange, g as getColors, s as spacings } from './
 var View = styled.a.withConfig({
   displayName: "Pointer__View",
   componentId: "sc-1jne5k6-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ", ";\n    ", "\n    font-weight: ", ";\n    text-align: center;\n    text-decoration: ", ";\n    line-height: 1;\n    letter-spacing: ", ";\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ", ";\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ", ";\n\n    background: none;\n    color: ", ";\n\n    & > * {\n        color: ", ";\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n        padding-right: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n"], ["\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ", ";\n    ", "\n    font-weight: ", ";\n    text-align: center;\n    text-decoration: ", ";\n    line-height: 1;\n    letter-spacing: ", ";\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ", ";\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ", ";\n\n    background: none;\n    color: ", ";\n\n    & > * {\n        color: ", ";\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n        padding-right: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ", ";\n    ", "\n    font-weight: ", ";\n    text-align: center;\n    text-decoration: ", ";\n    line-height: 1;\n    letter-spacing: ", ";\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ", ";\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ", ";\n\n    background: none;\n    color: ", ";\n\n    & > * {\n        color: ", ";\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    /* & > :not(:last-child) {\n        padding-right: ", "px;\n    } */\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n"], ["\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ", ";\n    ", "\n    font-weight: ", ";\n    text-align: center;\n    text-decoration: ", ";\n    line-height: 1;\n    letter-spacing: ", ";\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ", ";\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ", ";\n\n    background: none;\n    color: ", ";\n\n    & > * {\n        color: ", ";\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    /* & > :not(:last-child) {\n        padding-right: ", "px;\n    } */\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n"])), function (_a) {
   var theme = _a.theme;
   return getFonts(theme).copy.medium.family;
 }, function (_a) {
@@ -108,4 +108,4 @@ var Pointer$1 = {
 var templateObject_1, templateObject_2, templateObject_3;
 
 export { Pointer$1 as P };
-//# sourceMappingURL=Pointer-b4abee91.js.map
+//# sourceMappingURL=Pointer-3e965d7b.js.map

package/esm/Pointer-3e965d7b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pointer-3e965d7b.js","sources":["../src/components/buttons/Pointer.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {\n    getColors as color,\n    getFonts as font,\n    spacings,\n    withRange,\n} from 'utils/styles';\n\nconst View = styled.a<{\n    inverted?: boolean;\n    disable?: boolean;\n    textDecoration?: 'none' | 'underline';\n}>`\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ${({ theme }) => font(theme).copy.medium.family};\n    ${({ theme }) => withRange(font(theme).copy.medium.size, 'font-size')}\n    font-weight: ${({ theme }) => font(theme).copy.medium.weight};\n    text-align: center;\n    text-decoration: ${({ textDecoration }) =>\n        textDecoration ? textDecoration : 'underline'};\n    line-height: 1;\n    letter-spacing: ${({ theme }) => font(theme).copy.medium.letterSpacing};\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ${({ theme, inverted }) =>\n        inverted\n            ? color(theme).primary.inverted\n            : color(theme).primary.default};\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ${({ disable }) => (disable ? 'none' : 'all')};\n\n    background: none;\n    color: ${({ theme, inverted, disable }) =>\n        disable\n            ? color(theme).elementBg.medium\n            : inverted\n            ? color(theme).text.copyInverted\n            : color(theme).text.copy};\n\n    & > * {\n        color: ${({ theme, inverted, disable }) =>\n            disable\n                ? color(theme).elementBg.medium\n                : inverted\n                ? color(theme).text.copyInverted\n                : color(theme).text.copy};\n    }\n\n    & > * + * {\n        margin-left: ${spacings.nudge}px;\n    }\n\n    /* & > :not(:last-child) {\n        padding-right: ${spacings.nudge}px;\n    } */\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ${({ theme }) => color(theme).primary.default};\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n`;\n\ninterface Props {\n    isInverted?: boolean;\n    isDisabled?: boolean;\n    onClick?: () => void;\n    textDecoration?: 'none' | 'underline';\n    className?: string;\n    children?: React.ReactNode;\n}\n\nexport type BtnProps = Props & {\n    as?: 'button';\n};\n\nexport type LinkProps = Props & {\n    as?: 'a';\n    href?: string;\n    isExternal?: boolean;\n};\n\nconst Pointer: React.FC<BtnProps | LinkProps> = React.forwardRef(\n    (\n        {\n            as,\n            isInverted,\n            isDisabled,\n            onClick,\n            className,\n            textDecoration,\n            children,\n            ...rest\n        },\n        ref\n    ) => {\n        if (as === 'button') {\n            return (\n                <View\n                    textDecoration={textDecoration}\n                    ref={ref}\n                    as={as as any}\n                    inverted={isInverted}\n                    disable={isDisabled}\n                    onClick={onClick}\n                    className={className}\n                    {...rest}\n                >\n                    {children}\n                </View>\n            );\n        } else {\n            return (\n                <View\n                    textDecoration={textDecoration}\n                    ref={ref}\n                    as={as as any}\n                    href={(rest as LinkProps).href}\n                    data-disabled={isDisabled}\n                    data-inverted={isInverted}\n                    target={\n                        (rest as LinkProps).isExternal ? '_blank' : undefined\n                    }\n                    rel={\n                        (rest as LinkProps).isExternal\n                            ? 'noopener noreferrer'\n                            : undefined\n                    }\n                    inverted={isInverted}\n                    disable={isDisabled}\n                    onClick={onClick}\n                    className={className}\n                    {...rest}\n                >\n                    {children}\n                </View>\n            );\n        }\n    }\n);\n\nPointer.displayName = 'Button';\n\nconst Icon = styled.div<{ iconColor?: string }>`\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    color: ${({ theme, iconColor }) => iconColor || color(theme).text.copy};\n\n    transition: transform 0.2s ease-in-out;\n\n    ${View}[data-inverted='true'] > & {\n        color: ${({ theme, iconColor }) =>\n            iconColor || color(theme).text.copyInverted};\n    }\n\n    ${View}[data-disabled='true'] > & {\n        color: ${({ theme, iconColor }) =>\n            iconColor || color(theme).elementBg.medium};\n    }\n\n    ${View}:hover > & {\n        transform: translateX(3px);\n    }\n`;\n\nconst Label = styled.span`\n    display: inline-block;\n`;\n\nexport default { View: Pointer, Label: Label, Icon: Icon };\n"],"names":["View","styled","a","templateObject_1","__makeTemplateObject","_a","theme","font","copy","medium","family","withRange","size","weight","textDecoration","letterSpacing","inverted","color","primary","default","disable","elementBg","text","copyInverted","spacings","nudge","Pointer","React","forwardRef","ref","as","isInverted","isDisabled","onClick","className","children","rest","__rest","createElement","__assign","href","target","isExternal","undefined","rel","displayName","Icon","div","templateObject_2","iconColor","Label","span","templateObject_3"],"mappings":"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"}

package/esm/blocks.js

@@ -6,7 +6,7 @@ export { I as Image } from './Image-b26692a9.js';
 export { L as LanguageSwitcher } from './LanguageSwitcher-f9218fdc.js';
 export { E as EventBlock } from './EventBlock-8e130f6b.js';
 export { T as Tag } from './Tag-c3bd6b7f.js';
-export { F as FilterBar, a as POICard, P as POIFacts } from './FilterBar-2a2a09b7.js';
+export { F as FilterBar, a as POICard, P as POIFacts } from './FilterBar-821e43bc.js';
 export { I as InfoList } from './InfoList-b6980a42.js';
 export { S as SocialList } from './SocialList-336b7f6d.js';
 import './Filter-19220970.js';
@@ -20,13 +20,13 @@ import 'react-dom/server';
 import './Link-6067a27f.js';
 import './statusFormatter-9be0fbff.js';
 import './arrays-65b644ef.js';
-import './FilterField-bec061bc.js';
+import './FilterField-60359bfc.js';
 import './useLazyInput-0b6932aa.js';
-import './MultiselectDropdown-a97be6bc.js';
+import './MultiselectDropdown-91d0151c.js';
 import './formFieldText-f4188e55.js';
 import './useMounted-1e4cc87b.js';
 import './Checkbox-1957067a.js';
 import './useScroll-881c7b04.js';
 import 'react-dom';
-import './Pointer-b4abee91.js';
+import './Pointer-3e965d7b.js';
 //# sourceMappingURL=blocks.js.map

package/esm/buttons.js

@@ -1,6 +1,6 @@
 export { B as Button } from './Button-9a0dd9aa.js';
 export { B as ButtonGhost } from './ButtonGhost-fc9e7a75.js';
-export { P as Pointer } from './Pointer-b4abee91.js';
+export { P as Pointer } from './Pointer-3e965d7b.js';
 export { C as Control } from './Control-56ec7872.js';
 import './Filter-19220970.js';
 import 'react';

package/esm/fields.js

@@ -3,11 +3,11 @@ import React__default from 'react';
 import styled from 'styled-components';
 import { u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
 import { g as getColors, m as mq, s as spacings, a as getFonts, w as withRange } from './styles-1f1841ef.js';
-export { F as FilterField } from './FilterField-bec061bc.js';
+export { F as FilterField } from './FilterField-60359bfc.js';
 export { F as FormField } from './formFieldText-f4188e55.js';
 export { D as Datepicker, F as FileUpload, L as LocationField, R as Radio, S as SelectDropdown, T as Textarea } from './Textarea-95352f50.js';
 export { C as Checkbox } from './Checkbox-1957067a.js';
-export { M as MultiselectDropdown } from './MultiselectDropdown-a97be6bc.js';
+export { M as MultiselectDropdown } from './MultiselectDropdown-91d0151c.js';
 export { T as Textfield } from './Textfield-99d91b4e.js';
 import 'react-dom/server';
 import './Copy-c6786949.js';

package/esm/sections.events.js

@@ -9,7 +9,7 @@ import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-fb1d35ac
 import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
 import { c as concat } from './concat-ab3c66f2.js';
 import { T as Tag } from './Tag-c3bd6b7f.js';
-import { P as Pointer } from './Pointer-b4abee91.js';
+import { P as Pointer } from './Pointer-3e965d7b.js';
 import { C as Copy, H as Heading } from './Copy-c6786949.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
 import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';

package/esm/sections.jobs.js

@@ -9,7 +9,7 @@ import { i as isValidArray } from './arrays-65b644ef.js';
 import { g as getColors, s as spacings, c as getGlobals, m as mq } from './styles-1f1841ef.js';
 import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
 import { u as useEqualSheetHeight } from './useEqualSheetHeight-60ff9de7.js';
-import { F as FilterField } from './FilterField-bec061bc.js';
+import { F as FilterField } from './FilterField-60359bfc.js';
 import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
 import { e as escapeRegExp } from './escape-cbff9c25.js';
 import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';

package/esm/sections.js

@@ -18,7 +18,7 @@ import { I as IntroBlock, V as VideoBlock } from './VideoBlock-474e0aa4.js';
 import { I as Image } from './Image-b26692a9.js';
 import { u as useIE } from './useIE-a9c56989.js';
 import ReactDOMServer from 'react-dom/server';
-import { P as Pointer } from './Pointer-b4abee91.js';
+import { P as Pointer } from './Pointer-3e965d7b.js';
 import { u as useScrollTo } from './useScrollTo-70af34bf.js';
 import { e as getNavbarState, a as getFullNavbarHeights } from './Navigation-bb79a1eb.js';
 import { a as useMediaQueries } from './useMediaQuery-4c1b1fa6.js';

package/esm/sections.news.js

@@ -16,7 +16,7 @@ import { u as useEqualSheetHeight } from './useEqualSheetHeight-60ff9de7.js';
 import { G as Grid } from './Grid-7b33e271.js';
 import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
 import { u as useScrollTo } from './useScrollTo-70af34bf.js';
-import { P as Pointer } from './Pointer-b4abee91.js';
+import { P as Pointer } from './Pointer-3e965d7b.js';
 import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
 import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
 import { u as useMounted } from './useMounted-1e4cc87b.js';

package/esm/sections.pois.js

@@ -9,7 +9,7 @@ import { s as spacings, m as mq, g as getColors, w as withRange, c as getGlobals
 import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
 import { G as Grid } from './Grid-7b33e271.js';
 import { I as InfoList } from './InfoList-b6980a42.js';
-import { P as POIFacts, F as FilterBar, a as POICard } from './FilterBar-2a2a09b7.js';
+import { P as POIFacts, F as FilterBar, a as POICard } from './FilterBar-821e43bc.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
 import { s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
 import './useScroll-881c7b04.js';
@@ -20,14 +20,14 @@ import { g as generateNavbarIdent, a as getFullNavbarHeights } from './Navigatio
 import { u as useGeolocation } from './useGeolocation-f9f073cc.js';
 import './concat-ab3c66f2.js';
 import './clamp-12d37b65.js';
-import './FilterField-bec061bc.js';
+import './FilterField-60359bfc.js';
 import './useLazyInput-0b6932aa.js';
-import './MultiselectDropdown-a97be6bc.js';
+import './MultiselectDropdown-91d0151c.js';
 import './formFieldText-f4188e55.js';
 import './useMounted-1e4cc87b.js';
 import './Checkbox-1957067a.js';
 import 'react-dom';
-import './Pointer-b4abee91.js';
+import './Pointer-3e965d7b.js';
 import './useMediaQuery-4c1b1fa6.js';
 import './navigation-5216dbad.js';
 import './Link-6067a27f.js';
@@ -356,10 +356,13 @@ var Content = styled.div.withConfig({
 var PoiOverviewFilterBar = styled(PoiFilterBar).withConfig({
   displayName: "PointOfInterestOverview__PoiOverviewFilterBar",
   componentId: "sc-epctuk-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"], ["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"])), function (_a) {
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n    border-radius: ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"], ["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n    border-radius: ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"])), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.globals.sections.edgeRadius;
 }, spacings.nudge * 5, mq.medium);
 
 var PointOfInterestOverview = function (_a) {