@blateral/b.kit 2.8.3 → 2.8.4-patch-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/cjs/{Checkbox-8dccd42f.js → Checkbox-ddc9a87d.js} +2 -2
  2. package/cjs/{Checkbox-8dccd42f.js.map → Checkbox-ddc9a87d.js.map} +1 -1
  3. package/cjs/Copy-2a9d4b5d.js +2 -0
  4. package/cjs/Copy-2a9d4b5d.js.map +1 -0
  5. package/cjs/{EventBlock-4e406696.js → EventBlock-0b0f0dd3.js} +2 -2
  6. package/cjs/{EventBlock-4e406696.js.map → EventBlock-0b0f0dd3.js.map} +1 -1
  7. package/cjs/{FilterBar-0cb49472.js → FilterBar-bfd9db6e.js} +2 -2
  8. package/cjs/{FilterBar-0cb49472.js.map → FilterBar-bfd9db6e.js.map} +1 -1
  9. package/cjs/{FilterField-0ba59002.js → FilterField-d204feb1.js} +2 -2
  10. package/cjs/{FilterField-0ba59002.js.map → FilterField-d204feb1.js.map} +1 -1
  11. package/cjs/{Image-94820dfd.js → Image-69a9c116.js} +2 -2
  12. package/cjs/{Image-94820dfd.js.map → Image-69a9c116.js.map} +1 -1
  13. package/cjs/{InfoList-e416058c.js → InfoList-f040b8fb.js} +2 -2
  14. package/cjs/{InfoList-e416058c.js.map → InfoList-f040b8fb.js.map} +1 -1
  15. package/cjs/{LanguageSwitcher-aa96cc7d.js → LanguageSwitcher-c6fd04df.js} +2 -2
  16. package/cjs/{LanguageSwitcher-aa96cc7d.js.map → LanguageSwitcher-c6fd04df.js.map} +1 -1
  17. package/cjs/{MultiselectDropdown-07d543dc.js → MultiselectDropdown-d46ae36f.js} +2 -2
  18. package/cjs/{MultiselectDropdown-07d543dc.js.map → MultiselectDropdown-d46ae36f.js.map} +1 -1
  19. package/cjs/{Navigation-6abb6213.js → Navigation-6c5d9dee.js} +2 -2
  20. package/cjs/{Navigation-6abb6213.js.map → Navigation-6c5d9dee.js.map} +1 -1
  21. package/cjs/{SocialList-aec9a5c2.js → SocialList-73af56b5.js} +2 -2
  22. package/cjs/{SocialList-aec9a5c2.js.map → SocialList-73af56b5.js.map} +1 -1
  23. package/cjs/{TableBlock-c545ca8d.js → TableBlock-532c7e1e.js} +2 -2
  24. package/cjs/{TableBlock-c545ca8d.js.map → TableBlock-532c7e1e.js.map} +1 -1
  25. package/cjs/{Tag-937849ad.js → Tag-232f7aa9.js} +2 -2
  26. package/cjs/{Tag-937849ad.js.map → Tag-232f7aa9.js.map} +1 -1
  27. package/cjs/{Textarea-599e94a4.js → Textarea-d30682bd.js} +2 -2
  28. package/cjs/{Textarea-599e94a4.js.map → Textarea-d30682bd.js.map} +1 -1
  29. package/cjs/{Textfield-24f468be.js → Textfield-b3769184.js} +2 -2
  30. package/cjs/{Textfield-24f468be.js.map → Textfield-b3769184.js.map} +1 -1
  31. package/cjs/{VideoBlock-1fbf598b.js → VideoBlock-0cae22f0.js} +2 -2
  32. package/cjs/{VideoBlock-1fbf598b.js.map → VideoBlock-0cae22f0.js.map} +1 -1
  33. package/cjs/{VideoCard-905c08d2.js → VideoCard-c9d4f46a.js} +2 -2
  34. package/cjs/{VideoCard-905c08d2.js.map → VideoCard-c9d4f46a.js.map} +1 -1
  35. package/cjs/blocks.js +1 -1
  36. package/cjs/cookies.js +1 -1
  37. package/cjs/fields.js +1 -1
  38. package/cjs/footer.js +1 -1
  39. package/cjs/{formFieldText-046fcbf4.js → formFieldText-21f5f620.js} +2 -2
  40. package/cjs/{formFieldText-046fcbf4.js.map → formFieldText-21f5f620.js.map} +1 -1
  41. package/cjs/headers.js +1 -1
  42. package/cjs/navigation.js +1 -1
  43. package/cjs/sections.dynamicform.js +1 -1
  44. package/cjs/sections.dynamicform.js.map +1 -1
  45. package/cjs/sections.events.js +1 -1
  46. package/cjs/sections.forms.js +1 -1
  47. package/cjs/sections.jobs.js +1 -1
  48. package/cjs/sections.js +1 -1
  49. package/cjs/sections.news.js +1 -1
  50. package/cjs/sections.pois.js +1 -1
  51. package/cjs/typography.js +1 -1
  52. package/esm/{Checkbox-1957067a.js → Checkbox-962fea67.js} +2 -2
  53. package/esm/{Checkbox-1957067a.js.map → Checkbox-962fea67.js.map} +1 -1
  54. package/esm/{Copy-c6786949.js → Copy-fd9e25c0.js} +2 -2
  55. package/esm/Copy-fd9e25c0.js.map +1 -0
  56. package/esm/{EventBlock-8e130f6b.js → EventBlock-12361860.js} +4 -4
  57. package/esm/{EventBlock-8e130f6b.js.map → EventBlock-12361860.js.map} +1 -1
  58. package/esm/{FilterBar-821e43bc.js → FilterBar-8c258534.js} +6 -6
  59. package/esm/{FilterBar-821e43bc.js.map → FilterBar-8c258534.js.map} +1 -1
  60. package/esm/{FilterField-60359bfc.js → FilterField-8e64b355.js} +2 -2
  61. package/esm/{FilterField-60359bfc.js.map → FilterField-8e64b355.js.map} +1 -1
  62. package/esm/{Image-b26692a9.js → Image-c67870d4.js} +2 -2
  63. package/esm/{Image-b26692a9.js.map → Image-c67870d4.js.map} +1 -1
  64. package/esm/{InfoList-b6980a42.js → InfoList-d853db58.js} +2 -2
  65. package/esm/{InfoList-b6980a42.js.map → InfoList-d853db58.js.map} +1 -1
  66. package/esm/{LanguageSwitcher-f9218fdc.js → LanguageSwitcher-c9aa594a.js} +2 -2
  67. package/esm/{LanguageSwitcher-f9218fdc.js.map → LanguageSwitcher-c9aa594a.js.map} +1 -1
  68. package/esm/{MultiselectDropdown-91d0151c.js → MultiselectDropdown-61a5a1a6.js} +4 -4
  69. package/esm/{MultiselectDropdown-91d0151c.js.map → MultiselectDropdown-61a5a1a6.js.map} +1 -1
  70. package/esm/{Navigation-bb79a1eb.js → Navigation-6581bcdf.js} +4 -4
  71. package/esm/{Navigation-bb79a1eb.js.map → Navigation-6581bcdf.js.map} +1 -1
  72. package/esm/{SocialList-336b7f6d.js → SocialList-abaf970d.js} +2 -2
  73. package/esm/{SocialList-336b7f6d.js.map → SocialList-abaf970d.js.map} +1 -1
  74. package/esm/{TableBlock-1ddfd539.js → TableBlock-a65315ca.js} +2 -2
  75. package/esm/{TableBlock-1ddfd539.js.map → TableBlock-a65315ca.js.map} +1 -1
  76. package/esm/{Tag-c3bd6b7f.js → Tag-217cd89b.js} +2 -2
  77. package/esm/{Tag-c3bd6b7f.js.map → Tag-217cd89b.js.map} +1 -1
  78. package/esm/{Textarea-95352f50.js → Textarea-60503eb7.js} +3 -3
  79. package/esm/{Textarea-95352f50.js.map → Textarea-60503eb7.js.map} +1 -1
  80. package/esm/{Textfield-99d91b4e.js → Textfield-e8f48b5f.js} +3 -3
  81. package/esm/{Textfield-99d91b4e.js.map → Textfield-e8f48b5f.js.map} +1 -1
  82. package/esm/{VideoBlock-474e0aa4.js → VideoBlock-3f150172.js} +4 -4
  83. package/esm/{VideoBlock-474e0aa4.js.map → VideoBlock-3f150172.js.map} +1 -1
  84. package/esm/{VideoCard-91438667.js → VideoCard-aa60fbe5.js} +2 -2
  85. package/esm/{VideoCard-91438667.js.map → VideoCard-aa60fbe5.js.map} +1 -1
  86. package/esm/blocks.js +14 -14
  87. package/esm/cookies.js +2 -2
  88. package/esm/fields.js +7 -7
  89. package/esm/footer.js +3 -3
  90. package/esm/{formFieldText-f4188e55.js → formFieldText-c6fcd370.js} +2 -2
  91. package/esm/{formFieldText-f4188e55.js.map → formFieldText-c6fcd370.js.map} +1 -1
  92. package/esm/headers.js +4 -4
  93. package/esm/navigation.js +6 -6
  94. package/esm/sections.dynamicform.js +40 -12
  95. package/esm/sections.dynamicform.js.map +1 -1
  96. package/esm/sections.events.js +5 -5
  97. package/esm/sections.forms.js +3 -3
  98. package/esm/sections.jobs.js +2 -2
  99. package/esm/sections.js +7 -7
  100. package/esm/sections.news.js +5 -5
  101. package/esm/sections.pois.js +10 -10
  102. package/esm/typography.js +1 -1
  103. package/package.json +1 -1
  104. package/types/components/sections/form/DynamicForm.d.ts +7 -0
  105. package/types/components/sections/form/DynamicForm.d.ts.map +1 -1
  106. package/types/components/typography/Copy.d.ts.map +1 -1
  107. package/cjs/Copy-a0bc570d.js +0 -2
  108. package/cjs/Copy-a0bc570d.js.map +0 -1
  109. package/esm/Copy-c6786949.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBar-0cb49472.js","sources":["../src/components/blocks/POIFacts.tsx","../src/components/blocks/POICard.tsx","../src/components/blocks/Portal.tsx","../node_modules/fast-deep-equal/react.js","../src/components/blocks/FilterBar.tsx"],"sourcesContent":["import Check from 'components/base/icons/Check';\nimport { copyStyle } from 'components/typography/Copy';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { getColors as color, spacings } from 'utils/styles';\n\nconst View = styled.div`\n display: inline-flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin-top: -${spacings.nudge}px;\n margin-left: -${spacings.nudge * 2}px;\n\n &:not(:first-child) {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst FactsWrapper = styled.div`\n padding-top: ${spacings.nudge}px;\n padding-left: ${spacings.nudge * 2}px;\n`;\n\nconst Fact = styled.span<{ isInverted?: boolean }>`\n display: inline-flex;\n align-items: center;\n ${copyStyle('copy', 'medium')}\n color: ${({ theme, isInverted }) =>\n isInverted ? color(theme).text.copyInverted : color(theme).text.copy};\n\n & > * + * {\n margin-left: ${spacings.nudge * 0.5}px;\n }\n`;\n\nconst POIFacts: React.FC<{\n facts: string[];\n customFact?: (props: {\n key: React.Key;\n name: string;\n isInverted?: boolean;\n }) => React.ReactNode;\n isInverted?: boolean;\n}> = ({ facts, customFact, isInverted }) => {\n return (\n <View>\n {facts.map((fact, i) => (\n <FactsWrapper key={'tag_' + i}>\n {customFact ? (\n customFact({\n key: `headtag-${i}`,\n name: fact || '',\n isInverted: isInverted,\n })\n ) : (\n <Fact isInverted={isInverted}>\n <Check />\n <span>{fact}</span>\n </Fact>\n )}\n </FactsWrapper>\n ))}\n </View>\n );\n};\n\nexport default POIFacts;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport POIFacts from 'components/blocks/POIFacts';\nimport Copy from 'components/typography/Copy';\nimport { isValidArray } from 'utils/arrays';\nimport {\n getColors as color,\n getGlobals as global,\n mq,\n spacings,\n} from 'utils/styles';\nimport InfoList, { Info } from './InfoList';\n\nconst View = styled.div<{ isInverted?: boolean }>`\n border: 1px solid\n ${({ theme, isInverted }) =>\n isInverted\n ? color(theme).elementBg.light\n : color(theme).elementBg.dark};\n padding: ${spacings.nudge * 2}px;\n border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n overflow: hidden;\n\n & > * + * {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst Title = styled(Copy)`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* number of lines to show */\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &:not(:first-child) {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst Description = styled(Copy)`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 4; /* number of lines to show */\n line-clamp: 4;\n -webkit-box-orient: vertical;\n`;\n\nconst Body = styled.div<{ isInverted?: boolean }>`\n display: flex;\n flex-direction: row;\n /* align-items: flex-start; */\n\n @media ${mq.semilarge} {\n margin-left: -${spacings.spacer}px;\n margin-right: -${spacings.spacer}px;\n\n & > * + * {\n border-left: 1px solid\n ${({ theme, isInverted }) =>\n isInverted\n ? color(theme).elementBg.light\n : color(theme).elementBg.dark};\n }\n }\n`;\n\nconst Col = styled.div`\n flex: 1 0 100%;\n\n & > * + * {\n margin-top: ${spacings.nudge * 3}px;\n }\n\n @media ${mq.semilarge} {\n flex: 1 0 60%;\n padding: 0 ${spacings.spacer}px;\n }\n\n @media ${mq.large} {\n flex: 1 0 ${(2 / 3) * 100}%;\n }\n`;\n\nconst InfoCol = styled(Col)`\n display: none;\n margin-bottom: ${spacings.nudge * 2}px;\n\n @media ${mq.semilarge} {\n display: block;\n flex: 1 0 40%;\n }\n\n @media ${mq.large} {\n display: block;\n flex: 1 0 ${(1 / 3) * 100}%;\n }\n`;\n\nconst Action = styled.div``;\n\nexport type POILocation = {\n address: string;\n street: string;\n postalCode: string;\n city: string;\n coordinates?: { lat: number; long: number };\n mail: string;\n phone: string;\n web: string;\n};\n\nexport type POIContact = {\n name: string;\n position: string;\n street: string;\n postalCode: string;\n city: string;\n mail: string;\n phone: string;\n};\n\nexport interface POICardProps {\n /** Invert text and background for use on dark sections */\n isInverted?: boolean;\n\n /** POI name */\n name: string;\n\n /** Short POI description text (RichText) */\n shortDescription?: string;\n\n /** Array of additional POI informations */\n infos?: Info[];\n\n /** Array of POI facts */\n facts?: string[];\n\n /** Function to inject custom fact node */\n customFact?: (props: {\n key: React.Key;\n name: string;\n isInverted?: boolean;\n }) => React.ReactNode;\n\n /** Function to inject custom action node */\n action?: (isInverted?: boolean) => React.ReactNode;\n}\n\nconst POICard: React.FC<POICardProps> = ({\n isInverted,\n name,\n shortDescription,\n facts,\n infos,\n customFact,\n action,\n}) => {\n const hasFacts = isValidArray(facts, false);\n const hasInfos = isValidArray(infos, false);\n\n return (\n <View isInverted={isInverted}>\n {name && (\n <Title type=\"copy-b\" size=\"big\" isInverted={isInverted}>\n {name}\n </Title>\n )}\n {(hasFacts || shortDescription || hasInfos || action) && (\n <Body isInverted={isInverted}>\n <Col>\n {isValidArray(facts, false) && (\n <POIFacts\n facts={facts}\n isInverted={isInverted}\n customFact={customFact}\n />\n )}\n {shortDescription && (\n <Description\n isInverted={isInverted}\n innerHTML={shortDescription}\n />\n )}\n {action && <Action>{action(isInverted)}</Action>}\n </Col>\n {isValidArray(infos, false) && (\n <InfoCol>\n <InfoList\n isInverted={isInverted}\n items={[\n {\n items: infos,\n },\n ]}\n />\n </InfoCol>\n )}\n </Body>\n )}\n </View>\n );\n};\n\nexport default POICard;\n","import { FC, ReactNode, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nconst Portal: FC<{\n isVisible?: boolean;\n root?: HTMLElement;\n children?: ReactNode;\n}> = ({ isVisible, root, children }) => {\n const rootRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n rootRef.current = root || document.body;\n }, [root]);\n\n return isVisible && rootRef.current\n ? createPortal(children, rootRef.current)\n : null;\n};\nexport default Portal;\n","'use strict';\n\n// do not edit .js files directly - edit src/index.jst\n\n\n\nmodule.exports = function equal(a, b) {\n if (a === b) return true;\n\n if (a && b && typeof a == 'object' && typeof b == 'object') {\n if (a.constructor !== b.constructor) return false;\n\n var length, i, keys;\n if (Array.isArray(a)) {\n length = a.length;\n if (length != b.length) return false;\n for (i = length; i-- !== 0;)\n if (!equal(a[i], b[i])) return false;\n return true;\n }\n\n\n\n if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;\n if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();\n if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();\n\n keys = Object.keys(a);\n length = keys.length;\n if (length !== Object.keys(b).length) return false;\n\n for (i = length; i-- !== 0;)\n if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;\n\n for (i = length; i-- !== 0;) {\n var key = keys[i];\n\n if (key === '_owner' && a.$$typeof) {\n // React-specific: avoid traversing React elements' _owner.\n // _owner contains circular references\n // and is not needed when comparing the actual elements (and not their owners)\n continue;\n }\n\n if (!equal(a[key], b[key])) return false;\n }\n\n return true;\n }\n\n // true if both NaN, false otherwise\n return a!==a && b!==b;\n};\n","import * as Icons from 'components/base/icons/Icons';\nimport FilterField from 'components/fields/FilterField';\nimport MultiselectDropdown from 'components/fields/MultiselectDropdown';\nimport Copy, { copyStyle } from 'components/typography/Copy';\nimport { isValidArray } from 'hooks';\nimport React, {\n FC,\n Fragment,\n ReactNode,\n SyntheticEvent,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled from 'styled-components';\nimport {\n mq,\n spacings,\n getColors as color,\n getGlobals as global,\n withRange,\n} from 'utils/styles';\nimport Portal from './Portal';\nimport Pointer from 'components/buttons/Pointer';\nimport equal from 'fast-deep-equal/react';\nimport { useLibTheme } from 'utils/LibThemeProvider';\nimport { getFormFieldTextSize } from 'utils/formFieldText';\n\nconst FilterView = styled.div`\n display: inline-block;\n`;\n\nconst TextFilter = styled(FilterField)<{ hasBorders?: boolean }>`\n min-height: 45px;\n height: 45px;\n background: ${({ theme }) => color(theme).elementBg.light};\n border: ${({ hasBorders }) => (!hasBorders ? 'none' : undefined)};\n`;\n\nconst Select = styled(MultiselectDropdown)<{ hasBorders?: boolean }>`\n min-width: 220px;\n min-height: 45px;\n\n button,\n ul {\n border: ${({ hasBorders }) => (!hasBorders ? 'none' : undefined)};\n background: ${({ theme }) => color(theme).elementBg.light};\n }\n`;\n\nconst OverlayToggleView = styled.button<{ isInverted?: boolean }>`\n width: 250px;\n height: 45px;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n padding: ${spacings.nudge}px;\n background: ${({ theme }) => color(theme).elementBg.light};\n\n ${copyStyle('copy', 'small')}\n line-height: normal;\n /** Clamping min font size to 16px to prevent browser zooming */\n ${({ theme }) => withRange(getFormFieldTextSize(theme), 'font-size')}\n\n border: none;\n outline: none;\n border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n cursor: pointer;\n\n transition: all ease-in-out 0.2s;\n\n & > * + * {\n margin-left: ${spacings.nudge}px;\n }\n\n @media ${mq.medium} {\n display: none;\n }\n\n &:focus {\n text-decoration: underline;\n box-shadow: 0px 8px 16px\n ${({ isInverted }) =>\n isInverted\n ? 'rgba(255, 255, 255, 0.25)'\n : 'rgba(0, 0, 0, 0.25)'};\n }\n\n &:focus:not(:focus-visible) {\n text-decoration: none;\n outline: none;\n box-shadow: none;\n }\n`;\n\nconst Counter = styled(Copy)`\n position: relative;\n background: ${({ theme }) => color(theme).text.default};\n color: ${({ theme }) => color(theme).text.inverted};\n line-height: normal;\n\n max-height: 20px;\n max-width: 20px;\n\n height: 20px;\n width: 20px;\n\n border-radius: 50px;\n\n margin-left: ${spacings.nudge * 2}px;\n\n & > * {\n position: absolute;\n top: 50%;\n left: 50%;\n\n transform: translate(-50%, -50%);\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 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\nconst Label = styled.span`\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 OverlayToggle: FC<{\n isInverted?: boolean;\n label: string;\n onClick?: (ev: SyntheticEvent<HTMLButtonElement>) => void;\n icon?: (isInverted?: boolean) => ReactNode;\n indicator?: () => ReactNode;\n selected?: number;\n className?: string;\n}> = ({ isInverted, label, selected, onClick, icon, indicator, className }) => {\n const iconElement = icon?.(isInverted);\n const { colors } = useLibTheme();\n\n return (\n <OverlayToggleView\n isInverted={isInverted}\n onClick={onClick}\n className={className}\n >\n <Label>\n {iconElement && <Icon>{iconElement}</Icon>}\n <span>{label}</span>\n </Label>\n\n <Indicator>\n {selected ? (\n <Counter size=\"small\">\n <span>{selected || 0}</span>\n </Counter>\n ) : null}\n {indicator?.()}\n {!indicator && (\n <Icons.AngleDown iconColor={colors.elementBg.dark} />\n )}\n </Indicator>\n </OverlayToggleView>\n );\n};\n\nconst DesktopFilters = styled.div`\n display: none;\n\n @media ${mq.medium} {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n\n & > * {\n width: 220px;\n }\n\n & > * + * {\n margin-left: ${spacings.nudge}px;\n }\n }\n`;\n\nconst MobileBarStage = styled.div`\n position: fixed;\n bottom: 0;\n left: 0;\n top: 0;\n height: 100vh;\n width: 100vw;\n`;\n\nconst MobileBarBackdrop = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n background-color: ${({ theme }) => color(theme).elementBg.light};\n opacity: 0.8;\n z-index: 0;\n`;\n\nconst MobileBarContent = styled.div`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n max-height: 90vh;\n z-index: 0;\n overflow-y: auto;\n\n padding: ${spacings.nudge * 2}px;\n background-color: ${({ theme }) => color(theme).elementBg.light};\n border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n`;\n\nconst FilterBarHead = styled(Copy)`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n margin-bottom: ${spacings.nudge * 3}px;\n`;\n\nconst FilterBarCloseBtn = styled.button`\n flex: 0 0 auto;\n\n display: inline-block;\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n\n cursor: pointer;\n`;\n\nconst MobileBarMain = styled.div`\n display: flex;\n flex-direction: column;\n\n & > * {\n width: 100%;\n }\n\n & > * + * {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst MobileBarSubmitPointer = styled(Pointer.View)`\n width: auto;\n margin-right: auto;\n margin-top: ${spacings.nudge * 3}px;\n`;\n\nexport interface FilterBarProps {\n isInverted?: boolean;\n hasBorders?: boolean;\n value?: FilterState;\n onChange?: (filters: FilterState) => void;\n toggleLabel?: string;\n mobileSubmitLabel?: string;\n categoryFilter?: {\n label?: string;\n resetLabel?: string;\n items?: Array<{\n value: string;\n label: string;\n }>;\n };\n textFilter?: {\n placeholder?: string;\n icon?: (isInverted?: boolean) => React.ReactNode;\n submitIcon?: (isInverted?: boolean) => React.ReactNode;\n clearIcon?: (isInverted?: boolean) => React.ReactNode;\n };\n closeIcon?: (isInverted?: boolean) => React.ReactNode;\n filterIcon?: (isInverted?: boolean) => React.ReactNode;\n indicator?: (props: {\n isOpen: boolean;\n isDisabled?: boolean;\n }) => React.ReactNode;\n}\n\nexport interface FilterState {\n textFilter?: string;\n categoryFilter?: string[];\n}\n\nconst FilterBar: FC<FilterBarProps & { className?: string }> = ({\n isInverted,\n hasBorders,\n value,\n onChange,\n mobileSubmitLabel = 'Apply filters',\n toggleLabel,\n categoryFilter,\n textFilter,\n closeIcon,\n filterIcon,\n indicator,\n className,\n}) => {\n const [filters, setFilters] = useState<FilterState>(\n value || {\n textFilter: '',\n categoryFilter: [],\n }\n );\n const lastFilters = useRef<FilterState>(filters);\n\n const [isMobileBarOpen, setIsMobileBarOpen] = useState(false);\n const [mobileTextFilter, setMobileTextFilter] = useState(\n filters.textFilter || ''\n );\n const [mobileCategoryFilter, setMobileCategoryFilter] = useState(\n filters.categoryFilter || []\n );\n\n const handleMobileBarSubmit = () => {\n setIsMobileBarOpen(false);\n setFilters({\n textFilter: mobileTextFilter,\n categoryFilter: mobileCategoryFilter,\n });\n };\n\n const handleMobileBarClose = () => {\n setIsMobileBarOpen(false);\n setMobileCategoryFilter(filters.categoryFilter || []);\n setMobileTextFilter(filters.textFilter || '');\n };\n\n useEffect(() => {\n setMobileCategoryFilter(filters.categoryFilter || []);\n setMobileTextFilter(filters.textFilter || '');\n }, [filters]);\n\n useEffect(() => {\n if (!equal(filters, value)) {\n onChange?.(filters);\n }\n }, [filters, onChange, value]);\n\n useEffect(() => {\n if (value && !equal(value, lastFilters.current)) {\n setFilters(value);\n lastFilters.current = value;\n }\n }, [value]);\n\n const overallSelected =\n (filters?.categoryFilter?.length || 0) + (filters.textFilter ? 1 : 0);\n\n const closeIconElement = closeIcon?.(isInverted) || (\n <Icons.Cross width={32} height={32} />\n );\n\n return (\n <Fragment>\n <FilterView className={className}>\n <OverlayToggle\n label={toggleLabel || ''}\n selected={overallSelected}\n onClick={() => setIsMobileBarOpen((prev) => !prev)}\n icon={filterIcon}\n indicator={\n indicator\n ? () =>\n indicator({\n isOpen: false,\n isDisabled: false,\n })\n : undefined\n }\n />\n <DesktopFilters>\n {categoryFilter &&\n isValidArray(categoryFilter?.items, false) && (\n <Select\n isInverted={isInverted}\n items={categoryFilter.items}\n placeholder={categoryFilter.label}\n icon={filterIcon}\n indicator={indicator}\n resetLabel={categoryFilter.resetLabel}\n onChange={(value) =>\n setFilters((prev) => ({\n ...prev,\n categoryFilter: value,\n }))\n }\n selectedItems={filters.categoryFilter}\n hasBorders={hasBorders}\n />\n )}\n {textFilter && (\n <TextFilter\n isInverted={isInverted}\n icon={textFilter.icon}\n submitIcon={textFilter.submitIcon}\n clearIcon={textFilter.clearIcon}\n placeholder={textFilter.placeholder}\n value={filters.textFilter}\n onSubmit={(value) => {\n setFilters((prev) => ({\n ...prev,\n textFilter: value,\n }));\n }}\n hasBorders={hasBorders}\n />\n )}\n </DesktopFilters>\n </FilterView>\n <Portal isVisible={isMobileBarOpen}>\n <MobileBarStage>\n <MobileBarBackdrop onClick={handleMobileBarClose} />\n <MobileBarContent>\n <FilterBarHead>\n <Copy type=\"copy-b\" size=\"big\">\n {toggleLabel}\n </Copy>\n {closeIconElement && (\n <FilterBarCloseBtn\n onClick={handleMobileBarClose}\n >\n {closeIconElement}\n </FilterBarCloseBtn>\n )}\n </FilterBarHead>\n <MobileBarMain>\n {textFilter && (\n <FilterField\n icon={textFilter.icon}\n submitIcon={textFilter.submitIcon}\n clearIcon={textFilter.clearIcon}\n placeholder={textFilter.placeholder}\n value={mobileTextFilter}\n onSubmit={setMobileTextFilter}\n />\n )}\n {categoryFilter &&\n isValidArray(categoryFilter?.items, false) && (\n <MultiselectDropdown\n inlined\n items={categoryFilter.items}\n placeholder={categoryFilter.label}\n icon={filterIcon}\n indicator={indicator}\n resetLabel={categoryFilter.resetLabel}\n selectedItems={mobileCategoryFilter}\n onChange={setMobileCategoryFilter}\n />\n )}\n {mobileSubmitLabel && (\n <MobileBarSubmitPointer\n onClick={handleMobileBarSubmit}\n >\n <Pointer.Label>\n {mobileSubmitLabel}\n </Pointer.Label>\n <Pointer.Icon>\n <Icons.AngleRight />\n </Pointer.Icon>\n </MobileBarSubmitPointer>\n )}\n </MobileBarMain>\n </MobileBarContent>\n </MobileBarStage>\n </Portal>\n </Fragment>\n );\n};\n\nexport default FilterBar;\n"],"names":["View","styled","div","withConfig","displayName","componentId","templateObject_1","__makeTemplateObject","spacings","nudge","FactsWrapper","templateObject_2","Fact","span","templateObject_3","copyStyle","_a","theme","isInverted","color","text","copyInverted","copy","POIFacts","facts","customFact","React","createElement","map","fact","i","key","concat","name","Check","elementBg","light","dark","global","sections","edgeRadius","Title","Copy","Description","Body","templateObject_4","mq","semilarge","spacer","Col","templateObject_5","large","InfoCol","templateObject_6","Action","templateObject_7","Portal","isVisible","root","children","rootRef","useRef","useEffect","current","document","body","createPortal","react","equal","a","b","constructor","length","keys","Array","isArray","RegExp","source","flags","valueOf","Object","prototype","toString","hasOwnProperty","call","$$typeof","FilterView","TextFilter","FilterField","hasBorders","undefined","Select","MultiselectDropdown","OverlayToggleView","button","withRange","getFormFieldTextSize","medium","Counter","default","inverted","Indicator","Icon","Label","templateObject_8","OverlayToggle","label","selected","onClick","icon","indicator","className","iconElement","colors","useLibTheme","size","Icons","iconColor","DesktopFilters","templateObject_9","MobileBarStage","templateObject_10","MobileBarBackdrop","templateObject_11","MobileBarContent","templateObject_12","FilterBarHead","templateObject_13","FilterBarCloseBtn","templateObject_14","MobileBarMain","MobileBarSubmitPointer","Pointer","templateObject_16","value","onChange","_c","mobileSubmitLabel","toggleLabel","categoryFilter","textFilter","closeIcon","filterIcon","_d","useState","filters","setFilters","lastFilters","_e","isMobileBarOpen","setIsMobileBarOpen","_f","mobileTextFilter","setMobileTextFilter","_g","mobileCategoryFilter","setMobileCategoryFilter","handleMobileBarClose","overallSelected","_b","closeIconElement","width","height","Fragment","prev","isOpen","isDisabled","isValidArray","items","placeholder","resetLabel","__assign","selectedItems","submitIcon","clearIcon","onSubmit","type","inlined","AngleRight","shortDescription","infos","action","hasFacts","hasInfos","innerHTML","InfoList"],"mappings":"mqBAMMA,EAAOC,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,iBAAAC,YAAA,eAAGJ,CAAUK,IAAAA,EAAAC,EAAAA,qBAAA,CAAA,mGAAA,0BAAA,yDAAA,gBAAA,CAAA,mGAKU,0BACK,yDAGE,kBAJrBC,EAAQA,SAACC,MACS,EAAjBD,EAAAA,SAASC,MAGU,EAAjBD,EAAAA,SAASC,OAIzBC,EAAeT,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,eAAGJ,CAAUU,IAAAA,EAAAJ,EAAAA,qBAAA,CAAA,sBAAA,0BAAA,SAAA,CAAA,sBACE,0BACK,WADnBC,EAAQA,SAACC,MACS,EAAjBD,WAASC,OAGvBG,EAAOX,EAAAA,QAAOY,KAAVV,WAAA,CAAAC,YAAA,iBAAAC,YAAA,eAAGJ,CAAqCa,IAAAA,EAAAP,EAAAA,qBAAA,CAAA,8DAAA,gBAAA,8CAAA,gBAAA,CAAA,8DAGjB,gBAE2C,8CAGjC,kBALrCQ,EAASA,UAAC,OAAQ,WACX,SAACC,OAAEC,EAAKD,EAAAC,MACb,OADyBD,EAAAE,WACZC,EAAAA,UAAMF,GAAOG,KAAKC,aAAeF,EAAAA,UAAMF,GAAOG,KAAKE,OAGhC,GAAjBd,EAAQA,SAACC,OAI1Bc,EAQD,SAACP,GAAE,IAAAQ,UAAOC,EAAUT,EAAAS,WAAEP,EAAUF,EAAAE,WACjC,OACIQ,EAAA,QAAAC,cAAC3B,EAAI,KACAwB,EAAMI,KAAI,SAACC,EAAMC,GAAM,OACpBJ,EAAC,QAAAC,cAAAjB,EAAa,CAAAqB,IAAK,OAASD,GACvBL,EACGA,EAAW,CACPM,IAAK,WAAWC,OAAAF,GAChBG,KAAMJ,GAAQ,GACdX,WAAYA,IAGhBQ,EAAAA,sBAACd,EAAI,CAACM,WAAYA,GACdQ,UAAAC,cAACO,EAADA,MAAS,MACTR,EAAAA,QAAOC,cAAA,OAAA,KAAAE,UC5C7B7B,EAAOC,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,gBAAAC,YAAA,gBAAGJ,sMAAoC,oCAKJ,mBACZ,2BACoC,oEAI7B,mBAT9B,SAACe,OAAEC,EAAKD,EAAAC,MACN,OADkBD,EAAAE,WAEZC,EAAAA,UAAMF,GAAOkB,UAAUC,MACvBjB,EAAAA,UAAMF,GAAOkB,UAAUE,OACT,EAAjB7B,WAASC,OACH,SAACO,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAqB,aAAOrB,GAAOsB,SAASC,aAIpB,EAAjBhC,EAAQA,SAACC,OAIzBgC,EAAQxC,EAAM,QAACyC,QAAVvC,WAAA,CAAAC,YAAA,iBAAAC,YAAA,gBAAGJ,CAAYU,IAAAA,EAAAJ,EAAAA,qBAAA,CAAA,uPAAA,gBAAA,CAAA,uPASc,kBAAD,EAAjBC,EAAQA,SAACC,OAIzBkC,EAAc1C,EAAM,QAACyC,QAAVvC,WAAA,CAAAC,YAAA,uBAAAC,YAAA,gBAAGJ,CAAYa,IAAAA,EAAAP,uBAAA,CAAA,uMAAA,CAAA,0MAS1BqC,EAAO3C,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,gBAAAC,YAAA,gBAAGJ,CAAU4C,IAAAA,EAAAtC,EAAAA,qBAAA,CAAA,oGAAA,6BAAA,+BAAA,mFAAA,yBAAA,CAA0B,oGAKxB,6BACc,+BACC,mFAOa,2BATxCuC,EAAAA,GAAGC,UACQvC,EAAQA,SAACwC,OACRxC,EAAAA,SAASwC,QAIhB,SAAChC,OAAEC,EAAKD,EAAAC,MACN,OADkBD,EAAAE,WAEZC,EAAAA,UAAMF,GAAOkB,UAAUC,MACvBjB,EAAAA,UAAMF,GAAOkB,UAAUE,QAK3CY,EAAMhD,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,eAAAC,YAAA,gBAAGJ,CAAUiD,IAAAA,EAAA3C,EAAAA,qBAAA,CAAA,iEAAA,4BAAA,kDAAA,4BAAA,yBAAA,eAAA,CAAA,iEAIkB,4BAGf,kDAEW,4BAGf,yBACY,iBATM,EAAjBC,EAAAA,SAASC,MAGlBqC,EAAAA,GAAGC,UAEKvC,EAAAA,SAASwC,OAGjBF,EAAAA,GAAGK,MACK,EAAI,EAAK,KAIxBC,EAAUnD,EAAM,QAACgD,GAAV9C,WAAA,CAAAC,YAAA,mBAAAC,YAAA,gBAAGJ,CAAWoD,IAAAA,EAAA9C,EAAAA,qBAAA,CAAA,4CAAA,qBAAA,4EAAA,kDAAA,eAAA,CAAA,4CAEY,qBAEd,4EAKJ,kDAEY,iBATK,EAAjBC,WAASC,MAEjBqC,EAAAA,GAAGC,UAKHD,EAAEA,GAACK,MAEK,EAAI,EAAK,KAIxBG,EAASrD,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,gBAAGJ,CAAUsD,IAAAA,EAAAhD,uBAAA,CAAA,IAAA,CAAA,OCnGnBiD,EAID,SAACxC,GAAE,IAAAyC,cAAWC,EAAI1C,EAAA0C,KAAEC,EAAQ3C,EAAA2C,SACvBC,EAAUC,SAA2B,MAM3C,OAJAC,EAAAA,WAAU,WACNF,EAAQG,QAAUL,GAAQM,SAASC,OACpC,CAACP,IAEGD,GAAaG,EAAQG,QACtBG,EAAAA,aAAaP,EAAUC,EAAQG,SAC/B,MCVVI,GAAiB,SAASC,EAAMC,EAAGC,GACjC,GAAID,IAAMC,EAAG,OAAO,EAEpB,GAAID,GAAKC,GAAiB,iBAALD,GAA6B,iBAALC,EAAe,CACtDD,GAAAA,EAAEE,cAAgBD,EAAEC,YAAa,OAAO,EAE5C,IAAIC,EAAQ1C,EAAG2C,EACf,GAAIC,MAAMC,QAAQN,GAAI,CAEpB,IADAG,EAASH,EAAEG,SACGF,EAAEE,OAAQ,OAAO,EAC1B1C,IAAAA,EAAI0C,EAAgB,GAAR1C,KACf,IAAKsC,EAAMC,EAAEvC,GAAIwC,EAAExC,IAAK,OAAO,EACjC,OAAO,EAKLuC,GAAAA,EAAEE,cAAgBK,OAAQ,OAAOP,EAAEQ,SAAWP,EAAEO,QAAUR,EAAES,QAAUR,EAAEQ,MAC5E,GAAIT,EAAEU,UAAYC,OAAOC,UAAUF,QAAS,OAAOV,EAAEU,YAAcT,EAAES,UACrE,GAAIV,EAAEa,WAAaF,OAAOC,UAAUC,SAAU,OAAOb,EAAEa,aAAeZ,EAAEY,WAIpEV,IADJA,GADAC,EAAOO,OAAOP,KAAKJ,IACLG,UACCQ,OAAOP,KAAKH,GAAGE,OAAQ,OAAO,EAExC1C,IAAAA,EAAI0C,EAAgB,GAAR1C,KACf,IAAKkD,OAAOC,UAAUE,eAAeC,KAAKd,EAAGG,EAAK3C,IAAK,OAAO,EAEhE,IAAKA,EAAI0C,EAAgB,GAAR1C,KAAY,CAC3B,IAAIC,EAAM0C,EAAK3C,GAEf,IAAY,WAARC,IAAoBsC,EAAEgB,YAOrBjB,EAAMC,EAAEtC,GAAMuC,EAAEvC,IAAO,OAAO,EAGrC,OAAO,EAIT,OAAOsC,GAAIA,GAAKC,GAAIA,GCvBhBgB,GAAarF,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,eAAGJ,CAAUK,IAAAA,EAAAC,uBAAA,CAAA,kCAAA,CAAA,qCAIvBgF,GAAatF,EAAM,QAACuF,eAAVrF,WAAA,CAAAC,YAAA,wBAAAC,YAAA,eAAGJ,CAAmBU,IAAAA,EAAAJ,EAAAA,qBAAA,CAAA,+DAAA,kBAAA,OAAA,CAA0B,+DAGH,kBACO,UADlD,SAACS,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAE,YAAMF,GAAOkB,UAAUC,SAC1C,SAACpB,GAAmB,OAAPA,EAAAyE,gBAA+BC,EAAT,UAG3CC,GAAS1F,EAAM,QAAC2F,uBAAVzF,WAAA,CAAAC,YAAA,oBAAAC,YAAA,eAAGJ,CAA2Ba,IAAAA,EAAAP,EAAAA,qBAAA,CAAA,4FAAA,0BAAA,cAAA,CAA0B,4FAMI,0BACP,iBAD/C,SAACS,GAAmB,OAAPA,EAAAyE,gBAA+BC,EAAT,UAC/B,SAAC1E,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAE,YAAMF,GAAOkB,UAAUC,SAItDyD,GAAoB5F,EAAAA,QAAO6F,OAAV3F,WAAA,CAAAC,YAAA,+BAAAC,YAAA,eAAGJ,CAAa4C,IAAAA,EAAAtC,EAAAA,qBAAA,CAAA,yKAAA,wBAAA,YAAA,yGAAA,iEAAA,6GAAA,4BAAA,0IAAA,6IAAA,CAA0B,yKASpC,wBACgC,YAE7B,yGAGwC,iEAIH,6GAMhC,4BAGf,0IAUqB,+IA7B5BC,EAAQA,SAACC,OACN,SAACO,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAE,YAAMF,GAAOkB,UAAUC,QAElDrB,EAASA,UAAC,OAAQ,UAGlB,SAACC,GAAE,IAAAC,EAAKD,EAAAC,MAAO8E,OAAAA,EAASA,UAACC,EAAoBA,qBAAC/E,GAAQ,gBAIvC,SAACD,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAqB,aAAOrB,GAAOsB,SAASC,aAMpChC,EAAQA,SAACC,MAGnBqC,EAAEA,GAACmD,QAOF,SAACjF,GACC,OADWA,EAAAE,WAEL,4BACA,yBAUhBgF,GAAUjG,EAAM,QAACyC,QAAVvC,WAAA,CAAAC,YAAA,qBAAAC,YAAA,eAAGJ,CAAYiD,IAAAA,EAAA3C,EAAAA,qBAAA,CAAA,8CAAA,iBAAA,qKAAA,gJAAA,CAAA,8CAE8B,iBACJ,qKAWjB,mJAZnB,SAACS,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAE,YAAMF,GAAOG,KAAK+E,WACtC,SAACnF,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAE,YAAMF,GAAOG,KAAKgF,WAWV,EAAjB5F,EAAQA,SAACC,OAWtB4F,GAAYpG,EAAAA,QAAOY,KAAVV,WAAA,CAAAC,YAAA,uBAAAC,YAAA,eAAGJ,CAAWoD,IAAAA,EAAA9C,EAAAA,qBAAA,CAAA,sHAAA,gBAAA,CAAA,sHAMQ,kBAAdC,EAAQA,SAACC,OAI1B6F,GAAOrG,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,eAAGJ,CAAUsD,IAAAA,EAAAhD,EAAAA,qBAAA,CAAA,qEAAA,6EAAA,CAAA,qEAGW,+EAAdC,EAAQA,SAACC,OAMvB8F,GAAQtG,EAAAA,QAAOY,KAAVV,WAAA,CAAAC,YAAA,mBAAAC,YAAA,eAAGJ,CAAWuG,IAAAA,EAAAjG,EAAAA,qBAAA,CAAA,uNAAA,gBAAA,CAAA,uNAWY,kBAAdC,EAAQA,SAACC,OAI1BgG,GAQD,SAACzF,GAAE,IAAAE,eAAYwF,UAAOC,aAAUC,EAAO5F,EAAA4F,QAAEC,EAAI7F,EAAA6F,KAAEC,EAAS9F,EAAA8F,UAAEC,EAAS/F,EAAA+F,UAC9DC,EAAcH,MAAAA,SAAAA,EAAO3F,GACnB+F,EAAWC,uBAEnB,OACIxF,EAAA,QAAAC,cAACkE,GAAiB,CACd3E,WAAYA,EACZ0F,QAASA,EACTG,UAAWA,GAEXrF,UAAAC,cAAC4E,GAAK,KACDS,GAAetF,UAAAC,cAAC2E,GAAI,KAAEU,GACvBtF,EAAO,QAAAC,cAAA,OAAA,KAAA+E,IAGXhF,EAAAA,QAAAC,cAAC0E,GAAS,KACLM,EACGjF,wBAACwE,GAAO,CAACiB,KAAK,SACVzF,EAAA,QAAAC,cAAA,OAAA,KAAOgF,GAAY,IAEvB,KACHG,MAAAA,OAAS,EAATA,KACCA,GACEpF,EAAAA,QAAAC,cAACyF,aAAgBC,UAAWJ,EAAO9E,UAAUE,UAO3DiF,GAAiBrH,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,eAAGJ,CAAUsH,IAAAA,EAAAhH,EAAAA,qBAAA,CAAA,sCAAA,wOAAA,2BAAA,CAAA,sCAGX,wOAWmB,6BAX5BuC,EAAEA,GAACmD,OAWWzF,EAAAA,SAASC,OAK9B+G,GAAiBvH,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,eAAGJ,CAAUwH,IAAAA,EAAAlH,uBAAA,CAAA,8GAAA,CAAA,iHAS3BmH,GAAoBzH,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,gBAAGJ,CAAU0H,IAAAA,EAAApH,EAAAA,qBAAA,CAAA,qJAAA,2CAAA,CAAA,qJAS+B,8CAA3C,SAACS,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAE,YAAMF,GAAOkB,UAAUC,SAKxDwF,GAAmB3H,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,gBAAGJ,CAAU4H,IAAAA,EAAAtH,EAAAA,qBAAA,CAAA,4JAAA,8BAAA,yBAAA,OAAA,CAAA,4JASF,8BACkC,yBACE,SAFrC,EAAjBC,EAAAA,SAASC,OACA,SAACO,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAE,YAAMF,GAAOkB,UAAUC,SACzC,SAACpB,GAAE,IAAAC,EAAKD,EAAAC,MAAO,OAAAqB,aAAOrB,GAAOsB,SAASC,cAGrDsF,GAAgB7H,EAAM,QAACyC,QAAVvC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,gBAAGJ,CAAY8H,IAAAA,EAAAxH,EAAAA,qBAAA,CAAA,uIAAA,SAAA,CAAA,uIAMK,WAAD,EAAjBC,EAAQA,SAACC,OAGxBuH,GAAoB/H,EAAAA,QAAO6F,OAAV3F,WAAA,CAAAC,YAAA,+BAAAC,YAAA,gBAAGJ,CAAagI,IAAAA,EAAA1H,uBAAA,CAAA,4JAAA,CAAA,+JAYjC2H,GAAgBjI,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,gBAAGJ,yLAAU,yIASQ,kBAAD,EAAjBO,EAAQA,SAACC,OAIzB0H,GAAyBlI,EAAAA,QAAOmI,EAAAA,QAAQpI,MAAlBG,WAAA,CAAAC,YAAA,oCAAAC,YAAA,gBAAGJ,CAAoBoI,IAAAA,EAAA9H,EAAAA,qBAAA,CAAA,gEAAA,SAAA,CAAA,gEAGf,WAAD,EAAjBC,EAAQA,SAACC,yBAqCoC,SAACO,SAC5DE,eACAuE,EAAUzE,EAAAyE,WACV6C,EAAKtH,EAAAsH,MACLC,EAAQvH,EAAAuH,SACRC,EAAmCxH,EAAAyH,kBAAnCA,OAAiB,IAAAD,EAAG,gBAAeA,EACnCE,EAAW1H,EAAA0H,YACXC,EAAc3H,EAAA2H,eACdC,eACAC,EAAS7H,EAAA6H,UACTC,EAAU9H,EAAA8H,WACVhC,EAAS9F,EAAA8F,UACTC,EAAS/F,EAAA+F,UAEHgC,EAAwBC,EAAQA,SAClCV,GAAS,CACLM,WAAY,GACZD,eAAgB,KAHjBM,EAAOF,EAAA,GAAEG,OAMVC,EAActF,SAAoBoF,GAElCG,EAAwCJ,EAAQA,UAAC,GAAhDK,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCG,EAA0CP,EAAQA,SACpDC,EAAQL,YAAc,IADnBY,EAAgBD,EAAA,GAAEE,OAGnBC,EAAkDV,EAAQA,SAC5DC,EAAQN,gBAAkB,IADvBgB,EAAoBD,EAAA,GAAEE,OAYvBC,EAAuB,WACzBP,GAAmB,GACnBM,EAAwBX,EAAQN,gBAAkB,IAClDc,EAAoBR,EAAQL,YAAc,KAG9C9E,EAAAA,WAAU,WACN8F,EAAwBX,EAAQN,gBAAkB,IAClDc,EAAoBR,EAAQL,YAAc,MAC3C,CAACK,IAEJnF,EAAAA,WAAU,WACDM,GAAM6E,EAASX,IAChBC,MAAAA,GAAAA,EAAWU,KAEhB,CAACA,EAASV,EAAUD,IAEvBxE,EAAAA,WAAU,WACFwE,IAAUlE,GAAMkE,EAAOa,EAAYpF,WACnCmF,EAAWZ,GACXa,EAAYpF,QAAUuE,KAE3B,CAACA,IAEEwB,IAAAA,YACDC,EAAAd,MAAAA,OAAA,EAAAA,EAASN,qCAAgBnE,SAAU,IAAMyE,EAAQL,WAAa,EAAI,GAEjEoB,GAAmBnB,MAAAA,OAAS,EAATA,EAAY3H,KACjCQ,EAAAA,QAACC,cAAAyF,EAAAA,MAAY,CAAA6C,MAAO,GAAIC,OAAQ,KAGpC,OACIxI,EAAAA,sBAACyI,EAADA,SAAS,KACLzI,EAAA,QAAAC,cAAC2D,GAAU,CAACyB,UAAWA,GACnBrF,EAAA,QAAAC,cAAC8E,GACG,CAAAC,MAAOgC,GAAe,GACtB/B,SAAUmD,EACVlD,QAAS,WAAM,OAAA0C,GAAmB,SAACc,GAAS,OAACA,MAC7CvD,KAAMiC,EACNhC,UACIA,EACM,WACI,OAAAA,EAAU,CACNuD,QAAQ,EACRC,YAAY,UAEpB5E,IAGdhE,EAAAA,QAAAC,cAAC2F,GAAc,KACVqB,GACG4B,EAAAA,aAAa5B,MAAAA,SAAAA,EAAgB6B,OAAO,IAChC9I,EAAAA,QAAAC,cAACgE,GACG,CAAAzE,WAAYA,EACZsJ,MAAO7B,EAAe6B,MACtBC,YAAa9B,EAAejC,MAC5BG,KAAMiC,EACNhC,UAAWA,EACX4D,WAAY/B,EAAe+B,WAC3BnC,SAAU,SAACD,GACP,OAAAY,GAAW,SAACkB,GAASO,OAAAA,WAAAA,EAAAA,SAAA,GACdP,GAAI,CACPzB,eAAgBL,QAGxBsC,cAAe3B,EAAQN,eACvBlD,WAAYA,IAGvBmD,GACGlH,UAAAC,cAAC4D,GACG,CAAArE,WAAYA,EACZ2F,KAAM+B,EAAW/B,KACjBgE,WAAYjC,EAAWiC,WACvBC,UAAWlC,EAAWkC,UACtBL,YAAa7B,EAAW6B,YACxBnC,MAAOW,EAAQL,WACfmC,SAAU,SAACzC,GACPY,GAAW,SAACkB,GACLO,OAAAA,WAAAA,EAAAA,SAAA,GAAAP,GACH,CAAAxB,WAAYN,QAGpB7C,WAAYA,MAK5B/D,UAAAC,cAAC6B,EAAM,CAACC,UAAW4F,GACf3H,EAAAA,QAAAC,cAAC6F,GAAc,KACX9F,EAAA,QAAAC,cAAC+F,GAAiB,CAACd,QAASiD,IAC5BnI,EAAA,QAAAC,cAACiG,GAAgB,KACblG,EAAAA,QAAAC,cAACmG,GAAa,KACVpG,UAACC,cAAAe,EAAAA,KAAK,CAAAsI,KAAK,SAAS7D,KAAK,OACpBuB,GAEJsB,GACGtI,EAAAA,QAACC,cAAAqG,GACG,CAAApB,QAASiD,GAERG,IAIbtI,EAAA,QAAAC,cAACuG,GAAa,KACTU,GACGlH,EAAAA,QAAAC,cAAC6D,cAAW,CACRqB,KAAM+B,EAAW/B,KACjBgE,WAAYjC,EAAWiC,WACvBC,UAAWlC,EAAWkC,UACtBL,YAAa7B,EAAW6B,YACxBnC,MAAOkB,EACPuB,SAAUtB,IAGjBd,GACG4B,EAAYA,aAAC5B,MAAAA,OAAc,EAAdA,EAAgB6B,OAAO,IAChC9I,EAAC,QAAAC,cAAAiE,sBACG,CAAAqF,SACA,EAAAT,MAAO7B,EAAe6B,MACtBC,YAAa9B,EAAejC,MAC5BG,KAAMiC,EACNhC,UAAWA,EACX4D,WAAY/B,EAAe+B,WAC3BE,cAAejB,EACfpB,SAAUqB,IAGrBnB,GACG/G,UAAAC,cAACwG,GACG,CAAAvB,QA1IF,WAC1B0C,GAAmB,GACnBJ,EAAW,CACPN,WAAYY,EACZb,eAAgBgB,MAwIQjI,EAAA,QAAAC,cAACyG,UAAQ7B,MAAK,KACTkC,GAEL/G,EAAC,QAAAC,cAAAyG,EAAAA,QAAQ9B,KAAI,KACT5E,UAAAC,cAACyF,EAAD8D,WAAiB,8BH3VjB,SAAClK,GACrC,IAAAE,eACAe,SACAkJ,qBACA3J,EAAKR,EAAAQ,MACL4J,EAAKpK,EAAAoK,MACL3J,EAAUT,EAAAS,WACV4J,EAAMrK,EAAAqK,OAEAC,EAAWf,EAAAA,aAAa/I,GAAO,GAC/B+J,EAAWhB,EAAAA,aAAaa,GAAO,GAErC,OACI1J,EAAC,QAAAC,cAAA3B,EAAK,CAAAkB,WAAYA,GACbe,GACGP,EAAAA,QAAAC,cAACc,EAAM,CAAAuI,KAAK,SAAS7D,KAAK,MAAMjG,WAAYA,GACvCe,IAGPqJ,GAAYH,GAAoBI,GAAYF,IAC1C3J,EAAAA,QAACC,cAAAiB,EAAK,CAAA1B,WAAYA,GACdQ,UAAAC,cAACsB,EAAG,KACCsH,EAAAA,aAAa/I,GAAO,IACjBE,UAACC,cAAAJ,EACG,CAAAC,MAAOA,EACPN,WAAYA,EACZO,WAAYA,IAGnB0J,GACGzJ,UAACC,cAAAgB,EACG,CAAAzB,WAAYA,EACZsK,UAAWL,IAGlBE,GAAU3J,EAAAA,sBAAC4B,EAAM,KAAE+H,EAAOnK,KAE9BqJ,EAAYA,aAACa,GAAO,IACjB1J,EAAAA,sBAAC0B,EAAO,KACJ1B,EAAAA,QAAAC,cAAC8J,WACG,CAAAvK,WAAYA,EACZsJ,MAAO,CACH,CACIA,MAAOY"}
1
+ {"version":3,"file":"FilterBar-bfd9db6e.js","sources":["../src/components/blocks/POIFacts.tsx","../src/components/blocks/POICard.tsx","../src/components/blocks/Portal.tsx","../node_modules/fast-deep-equal/react.js","../src/components/blocks/FilterBar.tsx"],"sourcesContent":["import Check from 'components/base/icons/Check';\nimport { copyStyle } from 'components/typography/Copy';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { getColors as color, spacings } from 'utils/styles';\n\nconst View = styled.div`\n display: inline-flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin-top: -${spacings.nudge}px;\n margin-left: -${spacings.nudge * 2}px;\n\n &:not(:first-child) {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst FactsWrapper = styled.div`\n padding-top: ${spacings.nudge}px;\n padding-left: ${spacings.nudge * 2}px;\n`;\n\nconst Fact = styled.span<{ isInverted?: boolean }>`\n display: inline-flex;\n align-items: center;\n ${copyStyle('copy', 'medium')}\n color: ${({ theme, isInverted }) =>\n isInverted ? color(theme).text.copyInverted : color(theme).text.copy};\n\n & > * + * {\n margin-left: ${spacings.nudge * 0.5}px;\n }\n`;\n\nconst POIFacts: React.FC<{\n facts: string[];\n customFact?: (props: {\n key: React.Key;\n name: string;\n isInverted?: boolean;\n }) => React.ReactNode;\n isInverted?: boolean;\n}> = ({ facts, customFact, isInverted }) => {\n return (\n <View>\n {facts.map((fact, i) => (\n <FactsWrapper key={'tag_' + i}>\n {customFact ? (\n customFact({\n key: `headtag-${i}`,\n name: fact || '',\n isInverted: isInverted,\n })\n ) : (\n <Fact isInverted={isInverted}>\n <Check />\n <span>{fact}</span>\n </Fact>\n )}\n </FactsWrapper>\n ))}\n </View>\n );\n};\n\nexport default POIFacts;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport POIFacts from 'components/blocks/POIFacts';\nimport Copy from 'components/typography/Copy';\nimport { isValidArray } from 'utils/arrays';\nimport {\n getColors as color,\n getGlobals as global,\n mq,\n spacings,\n} from 'utils/styles';\nimport InfoList, { Info } from './InfoList';\n\nconst View = styled.div<{ isInverted?: boolean }>`\n border: 1px solid\n ${({ theme, isInverted }) =>\n isInverted\n ? color(theme).elementBg.light\n : color(theme).elementBg.dark};\n padding: ${spacings.nudge * 2}px;\n border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n overflow: hidden;\n\n & > * + * {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst Title = styled(Copy)`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* number of lines to show */\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &:not(:first-child) {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst Description = styled(Copy)`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 4; /* number of lines to show */\n line-clamp: 4;\n -webkit-box-orient: vertical;\n`;\n\nconst Body = styled.div<{ isInverted?: boolean }>`\n display: flex;\n flex-direction: row;\n /* align-items: flex-start; */\n\n @media ${mq.semilarge} {\n margin-left: -${spacings.spacer}px;\n margin-right: -${spacings.spacer}px;\n\n & > * + * {\n border-left: 1px solid\n ${({ theme, isInverted }) =>\n isInverted\n ? color(theme).elementBg.light\n : color(theme).elementBg.dark};\n }\n }\n`;\n\nconst Col = styled.div`\n flex: 1 0 100%;\n\n & > * + * {\n margin-top: ${spacings.nudge * 3}px;\n }\n\n @media ${mq.semilarge} {\n flex: 1 0 60%;\n padding: 0 ${spacings.spacer}px;\n }\n\n @media ${mq.large} {\n flex: 1 0 ${(2 / 3) * 100}%;\n }\n`;\n\nconst InfoCol = styled(Col)`\n display: none;\n margin-bottom: ${spacings.nudge * 2}px;\n\n @media ${mq.semilarge} {\n display: block;\n flex: 1 0 40%;\n }\n\n @media ${mq.large} {\n display: block;\n flex: 1 0 ${(1 / 3) * 100}%;\n }\n`;\n\nconst Action = styled.div``;\n\nexport type POILocation = {\n address: string;\n street: string;\n postalCode: string;\n city: string;\n coordinates?: { lat: number; long: number };\n mail: string;\n phone: string;\n web: string;\n};\n\nexport type POIContact = {\n name: string;\n position: string;\n street: string;\n postalCode: string;\n city: string;\n mail: string;\n phone: string;\n};\n\nexport interface POICardProps {\n /** Invert text and background for use on dark sections */\n isInverted?: boolean;\n\n /** POI name */\n name: string;\n\n /** Short POI description text (RichText) */\n shortDescription?: string;\n\n /** Array of additional POI informations */\n infos?: Info[];\n\n /** Array of POI facts */\n facts?: string[];\n\n /** Function to inject custom fact node */\n customFact?: (props: {\n key: React.Key;\n name: string;\n isInverted?: boolean;\n }) => React.ReactNode;\n\n /** Function to inject custom action node */\n action?: (isInverted?: boolean) => React.ReactNode;\n}\n\nconst POICard: React.FC<POICardProps> = ({\n isInverted,\n name,\n shortDescription,\n facts,\n infos,\n customFact,\n action,\n}) => {\n const hasFacts = isValidArray(facts, false);\n const hasInfos = isValidArray(infos, false);\n\n return (\n <View isInverted={isInverted}>\n {name && (\n <Title type=\"copy-b\" size=\"big\" isInverted={isInverted}>\n {name}\n </Title>\n )}\n {(hasFacts || shortDescription || hasInfos || action) && (\n <Body isInverted={isInverted}>\n <Col>\n {isValidArray(facts, false) && (\n <POIFacts\n facts={facts}\n isInverted={isInverted}\n customFact={customFact}\n />\n )}\n {shortDescription && (\n <Description\n isInverted={isInverted}\n innerHTML={shortDescription}\n />\n )}\n {action && <Action>{action(isInverted)}</Action>}\n </Col>\n {isValidArray(infos, false) && (\n <InfoCol>\n <InfoList\n isInverted={isInverted}\n items={[\n {\n items: infos,\n },\n ]}\n />\n </InfoCol>\n )}\n </Body>\n )}\n </View>\n );\n};\n\nexport default POICard;\n","import { FC, ReactNode, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nconst Portal: FC<{\n isVisible?: boolean;\n root?: HTMLElement;\n children?: ReactNode;\n}> = ({ isVisible, root, children }) => {\n const rootRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n rootRef.current = root || document.body;\n }, [root]);\n\n return isVisible && rootRef.current\n ? createPortal(children, rootRef.current)\n : null;\n};\nexport default Portal;\n","'use strict';\n\n// do not edit .js files directly - edit src/index.jst\n\n\n\nmodule.exports = function equal(a, b) {\n if (a === b) return true;\n\n if (a && b && typeof a == 'object' && typeof b == 'object') {\n if (a.constructor !== b.constructor) return false;\n\n var length, i, keys;\n if (Array.isArray(a)) {\n length = a.length;\n if (length != b.length) return false;\n for (i = length; i-- !== 0;)\n if (!equal(a[i], b[i])) return false;\n return true;\n }\n\n\n\n if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;\n if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();\n if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();\n\n keys = Object.keys(a);\n length = keys.length;\n if (length !== Object.keys(b).length) return false;\n\n for (i = length; i-- !== 0;)\n if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;\n\n for (i = length; i-- !== 0;) {\n var key = keys[i];\n\n if (key === '_owner' && a.$$typeof) {\n // React-specific: avoid traversing React elements' _owner.\n // _owner contains circular references\n // and is not needed when comparing the actual elements (and not their owners)\n continue;\n }\n\n if (!equal(a[key], b[key])) return false;\n }\n\n return true;\n }\n\n // true if both NaN, false otherwise\n return a!==a && b!==b;\n};\n","import * as Icons from 'components/base/icons/Icons';\nimport FilterField from 'components/fields/FilterField';\nimport MultiselectDropdown from 'components/fields/MultiselectDropdown';\nimport Copy, { copyStyle } from 'components/typography/Copy';\nimport { isValidArray } from 'hooks';\nimport React, {\n FC,\n Fragment,\n ReactNode,\n SyntheticEvent,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled from 'styled-components';\nimport {\n mq,\n spacings,\n getColors as color,\n getGlobals as global,\n withRange,\n} from 'utils/styles';\nimport Portal from './Portal';\nimport Pointer from 'components/buttons/Pointer';\nimport equal from 'fast-deep-equal/react';\nimport { useLibTheme } from 'utils/LibThemeProvider';\nimport { getFormFieldTextSize } from 'utils/formFieldText';\n\nconst FilterView = styled.div`\n display: inline-block;\n`;\n\nconst TextFilter = styled(FilterField)<{ hasBorders?: boolean }>`\n min-height: 45px;\n height: 45px;\n background: ${({ theme }) => color(theme).elementBg.light};\n border: ${({ hasBorders }) => (!hasBorders ? 'none' : undefined)};\n`;\n\nconst Select = styled(MultiselectDropdown)<{ hasBorders?: boolean }>`\n min-width: 220px;\n min-height: 45px;\n\n button,\n ul {\n border: ${({ hasBorders }) => (!hasBorders ? 'none' : undefined)};\n background: ${({ theme }) => color(theme).elementBg.light};\n }\n`;\n\nconst OverlayToggleView = styled.button<{ isInverted?: boolean }>`\n width: 250px;\n height: 45px;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n padding: ${spacings.nudge}px;\n background: ${({ theme }) => color(theme).elementBg.light};\n\n ${copyStyle('copy', 'small')}\n line-height: normal;\n /** Clamping min font size to 16px to prevent browser zooming */\n ${({ theme }) => withRange(getFormFieldTextSize(theme), 'font-size')}\n\n border: none;\n outline: none;\n border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n cursor: pointer;\n\n transition: all ease-in-out 0.2s;\n\n & > * + * {\n margin-left: ${spacings.nudge}px;\n }\n\n @media ${mq.medium} {\n display: none;\n }\n\n &:focus {\n text-decoration: underline;\n box-shadow: 0px 8px 16px\n ${({ isInverted }) =>\n isInverted\n ? 'rgba(255, 255, 255, 0.25)'\n : 'rgba(0, 0, 0, 0.25)'};\n }\n\n &:focus:not(:focus-visible) {\n text-decoration: none;\n outline: none;\n box-shadow: none;\n }\n`;\n\nconst Counter = styled(Copy)`\n position: relative;\n background: ${({ theme }) => color(theme).text.default};\n color: ${({ theme }) => color(theme).text.inverted};\n line-height: normal;\n\n max-height: 20px;\n max-width: 20px;\n\n height: 20px;\n width: 20px;\n\n border-radius: 50px;\n\n margin-left: ${spacings.nudge * 2}px;\n\n & > * {\n position: absolute;\n top: 50%;\n left: 50%;\n\n transform: translate(-50%, -50%);\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 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\nconst Label = styled.span`\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 OverlayToggle: FC<{\n isInverted?: boolean;\n label: string;\n onClick?: (ev: SyntheticEvent<HTMLButtonElement>) => void;\n icon?: (isInverted?: boolean) => ReactNode;\n indicator?: () => ReactNode;\n selected?: number;\n className?: string;\n}> = ({ isInverted, label, selected, onClick, icon, indicator, className }) => {\n const iconElement = icon?.(isInverted);\n const { colors } = useLibTheme();\n\n return (\n <OverlayToggleView\n isInverted={isInverted}\n onClick={onClick}\n className={className}\n >\n <Label>\n {iconElement && <Icon>{iconElement}</Icon>}\n <span>{label}</span>\n </Label>\n\n <Indicator>\n {selected ? (\n <Counter size=\"small\">\n <span>{selected || 0}</span>\n </Counter>\n ) : null}\n {indicator?.()}\n {!indicator && (\n <Icons.AngleDown iconColor={colors.elementBg.dark} />\n )}\n </Indicator>\n </OverlayToggleView>\n );\n};\n\nconst DesktopFilters = styled.div`\n display: none;\n\n @media ${mq.medium} {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n\n & > * {\n width: 220px;\n }\n\n & > * + * {\n margin-left: ${spacings.nudge}px;\n }\n }\n`;\n\nconst MobileBarStage = styled.div`\n position: fixed;\n bottom: 0;\n left: 0;\n top: 0;\n height: 100vh;\n width: 100vw;\n`;\n\nconst MobileBarBackdrop = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n background-color: ${({ theme }) => color(theme).elementBg.light};\n opacity: 0.8;\n z-index: 0;\n`;\n\nconst MobileBarContent = styled.div`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n max-height: 90vh;\n z-index: 0;\n overflow-y: auto;\n\n padding: ${spacings.nudge * 2}px;\n background-color: ${({ theme }) => color(theme).elementBg.light};\n border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n`;\n\nconst FilterBarHead = styled(Copy)`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n margin-bottom: ${spacings.nudge * 3}px;\n`;\n\nconst FilterBarCloseBtn = styled.button`\n flex: 0 0 auto;\n\n display: inline-block;\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n\n cursor: pointer;\n`;\n\nconst MobileBarMain = styled.div`\n display: flex;\n flex-direction: column;\n\n & > * {\n width: 100%;\n }\n\n & > * + * {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst MobileBarSubmitPointer = styled(Pointer.View)`\n width: auto;\n margin-right: auto;\n margin-top: ${spacings.nudge * 3}px;\n`;\n\nexport interface FilterBarProps {\n isInverted?: boolean;\n hasBorders?: boolean;\n value?: FilterState;\n onChange?: (filters: FilterState) => void;\n toggleLabel?: string;\n mobileSubmitLabel?: string;\n categoryFilter?: {\n label?: string;\n resetLabel?: string;\n items?: Array<{\n value: string;\n label: string;\n }>;\n };\n textFilter?: {\n placeholder?: string;\n icon?: (isInverted?: boolean) => React.ReactNode;\n submitIcon?: (isInverted?: boolean) => React.ReactNode;\n clearIcon?: (isInverted?: boolean) => React.ReactNode;\n };\n closeIcon?: (isInverted?: boolean) => React.ReactNode;\n filterIcon?: (isInverted?: boolean) => React.ReactNode;\n indicator?: (props: {\n isOpen: boolean;\n isDisabled?: boolean;\n }) => React.ReactNode;\n}\n\nexport interface FilterState {\n textFilter?: string;\n categoryFilter?: string[];\n}\n\nconst FilterBar: FC<FilterBarProps & { className?: string }> = ({\n isInverted,\n hasBorders,\n value,\n onChange,\n mobileSubmitLabel = 'Apply filters',\n toggleLabel,\n categoryFilter,\n textFilter,\n closeIcon,\n filterIcon,\n indicator,\n className,\n}) => {\n const [filters, setFilters] = useState<FilterState>(\n value || {\n textFilter: '',\n categoryFilter: [],\n }\n );\n const lastFilters = useRef<FilterState>(filters);\n\n const [isMobileBarOpen, setIsMobileBarOpen] = useState(false);\n const [mobileTextFilter, setMobileTextFilter] = useState(\n filters.textFilter || ''\n );\n const [mobileCategoryFilter, setMobileCategoryFilter] = useState(\n filters.categoryFilter || []\n );\n\n const handleMobileBarSubmit = () => {\n setIsMobileBarOpen(false);\n setFilters({\n textFilter: mobileTextFilter,\n categoryFilter: mobileCategoryFilter,\n });\n };\n\n const handleMobileBarClose = () => {\n setIsMobileBarOpen(false);\n setMobileCategoryFilter(filters.categoryFilter || []);\n setMobileTextFilter(filters.textFilter || '');\n };\n\n useEffect(() => {\n setMobileCategoryFilter(filters.categoryFilter || []);\n setMobileTextFilter(filters.textFilter || '');\n }, [filters]);\n\n useEffect(() => {\n if (!equal(filters, value)) {\n onChange?.(filters);\n }\n }, [filters, onChange, value]);\n\n useEffect(() => {\n if (value && !equal(value, lastFilters.current)) {\n setFilters(value);\n lastFilters.current = value;\n }\n }, [value]);\n\n const overallSelected =\n (filters?.categoryFilter?.length || 0) + (filters.textFilter ? 1 : 0);\n\n const closeIconElement = closeIcon?.(isInverted) || (\n <Icons.Cross width={32} height={32} />\n );\n\n return (\n <Fragment>\n <FilterView className={className}>\n <OverlayToggle\n label={toggleLabel || ''}\n selected={overallSelected}\n onClick={() => setIsMobileBarOpen((prev) => !prev)}\n icon={filterIcon}\n indicator={\n indicator\n ? () =>\n indicator({\n isOpen: false,\n isDisabled: false,\n })\n : undefined\n }\n />\n <DesktopFilters>\n {categoryFilter &&\n isValidArray(categoryFilter?.items, false) && (\n <Select\n isInverted={isInverted}\n items={categoryFilter.items}\n placeholder={categoryFilter.label}\n icon={filterIcon}\n indicator={indicator}\n resetLabel={categoryFilter.resetLabel}\n onChange={(value) =>\n setFilters((prev) => ({\n ...prev,\n categoryFilter: value,\n }))\n }\n selectedItems={filters.categoryFilter}\n hasBorders={hasBorders}\n />\n )}\n {textFilter && (\n <TextFilter\n isInverted={isInverted}\n icon={textFilter.icon}\n submitIcon={textFilter.submitIcon}\n clearIcon={textFilter.clearIcon}\n placeholder={textFilter.placeholder}\n value={filters.textFilter}\n onSubmit={(value) => {\n setFilters((prev) => ({\n ...prev,\n textFilter: value,\n }));\n }}\n hasBorders={hasBorders}\n />\n )}\n </DesktopFilters>\n </FilterView>\n <Portal isVisible={isMobileBarOpen}>\n <MobileBarStage>\n <MobileBarBackdrop onClick={handleMobileBarClose} />\n <MobileBarContent>\n <FilterBarHead>\n <Copy type=\"copy-b\" size=\"big\">\n {toggleLabel}\n </Copy>\n {closeIconElement && (\n <FilterBarCloseBtn\n onClick={handleMobileBarClose}\n >\n {closeIconElement}\n </FilterBarCloseBtn>\n )}\n </FilterBarHead>\n <MobileBarMain>\n {textFilter && (\n <FilterField\n icon={textFilter.icon}\n submitIcon={textFilter.submitIcon}\n clearIcon={textFilter.clearIcon}\n placeholder={textFilter.placeholder}\n value={mobileTextFilter}\n onSubmit={setMobileTextFilter}\n />\n )}\n {categoryFilter &&\n isValidArray(categoryFilter?.items, false) && (\n <MultiselectDropdown\n inlined\n items={categoryFilter.items}\n placeholder={categoryFilter.label}\n icon={filterIcon}\n indicator={indicator}\n resetLabel={categoryFilter.resetLabel}\n selectedItems={mobileCategoryFilter}\n onChange={setMobileCategoryFilter}\n />\n )}\n {mobileSubmitLabel && (\n <MobileBarSubmitPointer\n onClick={handleMobileBarSubmit}\n >\n <Pointer.Label>\n {mobileSubmitLabel}\n </Pointer.Label>\n <Pointer.Icon>\n <Icons.AngleRight />\n </Pointer.Icon>\n </MobileBarSubmitPointer>\n )}\n </MobileBarMain>\n </MobileBarContent>\n </MobileBarStage>\n </Portal>\n </Fragment>\n );\n};\n\nexport default FilterBar;\n"],"names":["View","styled","div","withConfig","displayName","componentId","templateObject_1","__makeTemplateObject","spacings","nudge","FactsWrapper","templateObject_2","Fact","span","templateObject_3","copyStyle","_a","theme","isInverted","color","text","copyInverted","copy","POIFacts","facts","customFact","React","createElement","map","fact","i","key","concat","name","Check","elementBg","light","dark","global","sections","edgeRadius","Title","Copy","Description","Body","templateObject_4","mq","semilarge","spacer","Col","templateObject_5","large","InfoCol","templateObject_6","Action","templateObject_7","Portal","isVisible","root","children","rootRef","useRef","useEffect","current","document","body","createPortal","react","equal","a","b","constructor","length","keys","Array","isArray","RegExp","source","flags","valueOf","Object","prototype","toString","hasOwnProperty","call","$$typeof","FilterView","TextFilter","FilterField","hasBorders","undefined","Select","MultiselectDropdown","OverlayToggleView","button","withRange","getFormFieldTextSize","medium","Counter","default","inverted","Indicator","Icon","Label","templateObject_8","OverlayToggle","label","selected","onClick","icon","indicator","className","iconElement","colors","useLibTheme","size","Icons","iconColor","DesktopFilters","templateObject_9","MobileBarStage","templateObject_10","MobileBarBackdrop","templateObject_11","MobileBarContent","templateObject_12","FilterBarHead","templateObject_13","FilterBarCloseBtn","templateObject_14","MobileBarMain","MobileBarSubmitPointer","Pointer","templateObject_16","value","onChange","_c","mobileSubmitLabel","toggleLabel","categoryFilter","textFilter","closeIcon","filterIcon","_d","useState","filters","setFilters","lastFilters","_e","isMobileBarOpen","setIsMobileBarOpen","_f","mobileTextFilter","setMobileTextFilter","_g","mobileCategoryFilter","setMobileCategoryFilter","handleMobileBarClose","overallSelected","_b","closeIconElement","width","height","Fragment","prev","isOpen","isDisabled","isValidArray","items","placeholder","resetLabel","__assign","selectedItems","submitIcon","clearIcon","onSubmit","type","inlined","AngleRight","shortDescription","infos","action","hasFacts","hasInfos","innerHTML","InfoList"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";var n=require("./Filter-89286db9.js"),e=require("react"),t=require("styled-components"),i=require("./Copy-a0bc570d.js"),o=require("./styles-13e5d9ac.js"),r=require("./useLazyInput-911b8eda.js");function a(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var l,d,s,u,c=a(e),p=a(t),f=p.default.div.withConfig({displayName:"FilterField__View",componentId:"sc-1reb7yx-0"})(l||(l=n.__makeTemplateObject(["\n display: flex;\n height: 45px;\n border: solid 1px\n ",";\n border-radius: ",";\n\n color: ",";\n\n &:focus-within {\n outline: ",";\n outline-offset: 0;\n }\n\n &:focus-within & > input:not(:focus-visible) {\n outline: none;\n }\n"],["\n display: flex;\n height: 45px;\n border: solid 1px\n ",";\n border-radius: ",";\n\n color: ",";\n\n &:focus-within {\n outline: ",";\n outline-offset: 0;\n }\n\n &:focus-within & > input:not(:focus-visible) {\n outline: none;\n }\n"])),(function(n){var e=n.theme;return n.isInverted?o.getColors(e).elementBg.light:o.getColors(e).elementBg.dark}),(function(n){var e=n.theme;return o.getGlobals(e).sections.edgeRadius}),(function(n){var e=n.theme;return n.isInverted?o.getFonts(e).copy.medium.colorInverted:o.getFonts(e).copy.medium.color}),(function(n){var e=n.theme,t=n.isInverted;return"1px solid ".concat(t?o.getColors(e).primary.inverted:o.getColors(e).primary.default)})),g=p.default.input.withConfig({displayName:"FilterField__Field",componentId:"sc-1reb7yx-1"})(d||(d=n.__makeTemplateObject(["\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 ","\n line-height: 1;\n\n padding: ","px ","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: ",";\n }\n"],["\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 ","\n line-height: 1;\n\n padding: ","px ","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: ",";\n }\n"])),i.copyStyle("copy","medium"),2*o.spacings.nudge,o.spacings.nudge,(function(n){var e=n.theme;return n.isInverted?o.getColors(e).text.subtileInverted:o.getColors(e).text.subtile})),h=p.default.div.withConfig({displayName:"FilterField__Icon",componentId:"sc-1reb7yx-2"})(s||(s=n.__makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-right: ","px;\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-right: ","px;\n padding-left: ","px;\n color: inherit;\n\n transition: transform 0.2s ease-in-out;\n"])),o.spacings.nudge,2*o.spacings.nudge),m=p.default.button.withConfig({displayName:"FilterField__ClearBtn",componentId:"sc-1reb7yx-3"})(u||(u=n.__makeTemplateObject(["\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: ","px;\n padding-left: ","px;\n margin-left: ","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: ",";\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 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: ","px;\n padding-left: ","px;\n margin-left: ","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: ",";\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"])),o.spacings.nudge,o.spacings.nudge,o.spacings.nudge,(function(n){var e=n.theme,t=n.isInverted;return"2px solid ".concat(t?o.getColors(e).primary.inverted:o.getColors(e).primary.default)}));exports.FilterField=function(t){var i=t.isInverted,o=t.value,a=t.initialValue,l=t.placeholder,d=t.onSubmit,s=t.onBlur,u=t.icon,p=t.submitIcon,x=t.clearIcon,v=t.className,b=r.useLazyInput((function(n){null==d||d(n)}),a||""),y=b.update,w=b.value,I=b.forceUpdate;e.useEffect((function(){void 0!==o&&y(o)}),[y,o]);var C=u?u(i):null,_=p?p(i):c.default.createElement(n.Magnifier,{width:20,height:20}),F=x?x(i):c.default.createElement(n.Cross,{width:20,height:20});return c.default.createElement(f,{isInverted:i,className:v},C&&c.default.createElement(h,null,C),c.default.createElement(g,{type:"text",isInverted:i,value:w,placeholder:l,onChange:function(n){var e,t=null===(e=null==n?void 0:n.currentTarget)||void 0===e?void 0:e.value;void 0!==t&&y(t,""===t)},onBlur:s,onKeyDown:function(n){"Enter"===n.key&&I()}}),""===w&&_&&c.default.createElement(h,null,_),""!==w&&F&&c.default.createElement(m,{isInverted:i,"aria-label":"clear filter",onClick:function(){y("",!0)}},F))};
2
- //# sourceMappingURL=FilterField-0ba59002.js.map
1
+ "use strict";var n=require("./Filter-89286db9.js"),e=require("react"),t=require("styled-components"),i=require("./Copy-2a9d4b5d.js"),o=require("./styles-13e5d9ac.js"),r=require("./useLazyInput-911b8eda.js");function a(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var l,d,s,u,c=a(e),p=a(t),f=p.default.div.withConfig({displayName:"FilterField__View",componentId:"sc-1reb7yx-0"})(l||(l=n.__makeTemplateObject(["\n display: flex;\n height: 45px;\n border: solid 1px\n ",";\n border-radius: ",";\n\n color: ",";\n\n &:focus-within {\n outline: ",";\n outline-offset: 0;\n }\n\n &:focus-within & > input:not(:focus-visible) {\n outline: none;\n }\n"],["\n display: flex;\n height: 45px;\n border: solid 1px\n ",";\n border-radius: ",";\n\n color: ",";\n\n &:focus-within {\n outline: ",";\n outline-offset: 0;\n }\n\n &:focus-within & > input:not(:focus-visible) {\n outline: none;\n }\n"])),(function(n){var e=n.theme;return n.isInverted?o.getColors(e).elementBg.light:o.getColors(e).elementBg.dark}),(function(n){var e=n.theme;return o.getGlobals(e).sections.edgeRadius}),(function(n){var e=n.theme;return n.isInverted?o.getFonts(e).copy.medium.colorInverted:o.getFonts(e).copy.medium.color}),(function(n){var e=n.theme,t=n.isInverted;return"1px solid ".concat(t?o.getColors(e).primary.inverted:o.getColors(e).primary.default)})),g=p.default.input.withConfig({displayName:"FilterField__Field",componentId:"sc-1reb7yx-1"})(d||(d=n.__makeTemplateObject(["\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 ","\n line-height: 1;\n\n padding: ","px ","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: ",";\n }\n"],["\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 ","\n line-height: 1;\n\n padding: ","px ","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: ",";\n }\n"])),i.copyStyle("copy","medium"),2*o.spacings.nudge,o.spacings.nudge,(function(n){var e=n.theme;return n.isInverted?o.getColors(e).text.subtileInverted:o.getColors(e).text.subtile})),h=p.default.div.withConfig({displayName:"FilterField__Icon",componentId:"sc-1reb7yx-2"})(s||(s=n.__makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-right: ","px;\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-right: ","px;\n padding-left: ","px;\n color: inherit;\n\n transition: transform 0.2s ease-in-out;\n"])),o.spacings.nudge,2*o.spacings.nudge),m=p.default.button.withConfig({displayName:"FilterField__ClearBtn",componentId:"sc-1reb7yx-3"})(u||(u=n.__makeTemplateObject(["\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: ","px;\n padding-left: ","px;\n margin-left: ","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: ",";\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 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: ","px;\n padding-left: ","px;\n margin-left: ","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: ",";\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"])),o.spacings.nudge,o.spacings.nudge,o.spacings.nudge,(function(n){var e=n.theme,t=n.isInverted;return"2px solid ".concat(t?o.getColors(e).primary.inverted:o.getColors(e).primary.default)}));exports.FilterField=function(t){var i=t.isInverted,o=t.value,a=t.initialValue,l=t.placeholder,d=t.onSubmit,s=t.onBlur,u=t.icon,p=t.submitIcon,x=t.clearIcon,v=t.className,b=r.useLazyInput((function(n){null==d||d(n)}),a||""),y=b.update,w=b.value,I=b.forceUpdate;e.useEffect((function(){void 0!==o&&y(o)}),[y,o]);var C=u?u(i):null,_=p?p(i):c.default.createElement(n.Magnifier,{width:20,height:20}),F=x?x(i):c.default.createElement(n.Cross,{width:20,height:20});return c.default.createElement(f,{isInverted:i,className:v},C&&c.default.createElement(h,null,C),c.default.createElement(g,{type:"text",isInverted:i,value:w,placeholder:l,onChange:function(n){var e,t=null===(e=null==n?void 0:n.currentTarget)||void 0===e?void 0:e.value;void 0!==t&&y(t,""===t)},onBlur:s,onKeyDown:function(n){"Enter"===n.key&&I()}}),""===w&&_&&c.default.createElement(h,null,_),""!==w&&F&&c.default.createElement(m,{isInverted:i,"aria-label":"clear filter",onClick:function(){y("",!0)}},F))};
2
+ //# sourceMappingURL=FilterField-d204feb1.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FilterField-0ba59002.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","withConfig","displayName","componentId","_a","theme","isInverted","color","elementBg","light","dark","global","sections","edgeRadius","font","getFonts","copy","medium","colorInverted","primary","inverted","default","Field","input","templateObject_2","__makeTemplateObject","copyStyle","spacings","nudge","text","subtileInverted","subtile","Icon","templateObject_3","ClearBtn","button","templateObject_4","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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"}
1
+ {"version":3,"file":"FilterField-d204feb1.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","withConfig","displayName","componentId","_a","theme","isInverted","color","elementBg","light","dark","global","sections","edgeRadius","font","getFonts","copy","medium","colorInverted","primary","inverted","default","Field","input","templateObject_2","__makeTemplateObject","copyStyle","spacings","nudge","text","subtileInverted","subtile","Icon","templateObject_3","ClearBtn","button","templateObject_4","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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"}
@@ -1,2 +1,2 @@
1
- "use strict";var n=require("./Filter-89286db9.js"),e=require("./Copy-a0bc570d.js"),t=require("react"),o=require("styled-components"),i=require("./LibThemeProvider-69109901.js"),r=require("./styles-13e5d9ac.js");function a(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function l(n){if(n&&n.__esModule)return n;var e=Object.create(null);return n&&Object.keys(n).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:function(){return n[t]}})}})),e.default=n,Object.freeze(e)}var s,d,c,u,p,m,v=l(t),f=a(o),g=function(n,e){if(n&&e&&!isNaN(n)&&!isNaN(e))return n/e},w=function(n){return!!(n&&(null==n?void 0:n.w)&&(null==n?void 0:n.h))},h=function(e){return o.css(s||(s=n.__makeTemplateObject(["\n @supports not (aspect-ratio: auto) {\n height: ",";\n padding-top: ",";\n }\n"],["\n @supports not (aspect-ratio: auto) {\n height: ",";\n padding-top: ",";\n }\n"])),w(e)&&0,w(e)&&"calc(100% / ".concat(g(null==e?void 0:e.w,null==e?void 0:e.h),")"))},b=f.default.div.withConfig({displayName:"Image__AspectContainer",componentId:"sc-10qjgzr-0"})(u||(u=n.__makeTemplateObject(["\n display: inline-block;\n position: relative;\n border-radius: ",";\n overflow: hidden;\n\n aspect-ratio: ",";\n\n width: ",";\n\n max-width: 100%;\n\n object-position: center;\n\n img {\n width: 100%;\n }\n\n ","\n\n // fallback if browsers do not support aspect-ratio\n ","\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio. (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n ","\n"],["\n display: inline-block;\n position: relative;\n border-radius: ",";\n overflow: hidden;\n\n aspect-ratio: ",";\n\n width: ",";\n\n max-width: 100%;\n\n object-position: center;\n\n img {\n width: 100%;\n }\n\n ","\n\n // fallback if browsers do not support aspect-ratio\n ","\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio. (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n ","\n"])),(function(n){var e=n.theme;return n.allowEdgeRadius&&r.getGlobals(e).sections.edgeRadius}),(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.small)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.small)||void 0===t?void 0:t.h)}),(function(n){var e,t,o=n.ratios;return!n.coverSpace&&(null===(e=null==o?void 0:o.small)||void 0===e?void 0:e.w)?"".concat(null===(t=null==o?void 0:o.small)||void 0===t?void 0:t.w,"px"):""}),(function(e){return e.coverSpace&&o.css(d||(d=n.__makeTemplateObject(["\n width: 100%;\n\n img {\n object-fit: cover;\n }\n "],["\n width: 100%;\n\n img {\n object-fit: cover;\n }\n "])))}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.small)}),r.mq.medium,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.medium)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.medium)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.medium)}),r.mq.semilarge,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.semilarge)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.semilarge)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.semilarge)}),r.mq.large,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.large)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.large)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.large)}),r.mq.xlarge,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.xlarge)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.xlarge)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.xlarge)}),(function(e){var t=e.ratios,i=e.coverSpace;return t&&o.css(c||(c=n.__makeTemplateObject(["\n img {\n height: 100%;\n width: 100%;\n object-fit: ",";\n\n @supports not (aspect-ratio: auto) {\n position: ",";\n top: 0;\n left: 0;\n right: 0;\n }\n }\n "],["\n img {\n height: 100%;\n width: 100%;\n object-fit: ",";\n\n @supports not (aspect-ratio: auto) {\n position: ",";\n top: 0;\n left: 0;\n right: 0;\n }\n }\n "])),i?"cover":"contain",i&&"absolute")})),k=f.default.img.withConfig({displayName:"Image__Img",componentId:"sc-10qjgzr-1"})(p||(p=n.__makeTemplateObject(["\n display: block;\n color: ",";\n\n &[data-img-loaded='false'] {\n background: ",";\n }\n"],["\n display: block;\n color: ",";\n\n &[data-img-loaded='false'] {\n background: ",";\n }\n"])),(function(n){var e=n.theme;return n.isInverted?r.getColors(e).text.inverted:r.getColors(e).text.default}),(function(n){var e=n.theme,t=n.isInverted;return n.showPlaceholder?t?r.getGlobals(e).sections.imagePlaceholderBg.inverted:r.getGlobals(e).sections.imagePlaceholderBg.default:void 0})),y=f.default(e.Copy).withConfig({displayName:"Image__Copyright",componentId:"sc-10qjgzr-2"})(m||(m=n.__makeTemplateObject(["\n display: inline-block;\n position: absolute;\n max-height: 100%;\n bottom: 0;\n right: 0;\n\n padding: ","px ","px;\n\n pointer-events: none;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -ms-writing-mode: tb-rl;\n writing-mode: vertical-rl;\n text-orientation: sideways-right;\n transform: rotate(180deg);\n"],["\n display: inline-block;\n position: absolute;\n max-height: 100%;\n bottom: 0;\n right: 0;\n\n padding: ","px ","px;\n\n pointer-events: none;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -ms-writing-mode: tb-rl;\n writing-mode: vertical-rl;\n text-orientation: sideways-right;\n transform: rotate(180deg);\n"])),2*r.spacings.nudge,r.spacings.nudge);exports.Image=function(n){var e=n.className,o=n.small,a=n.medium,l=n.semilarge,s=n.large,d=n.xlarge,c=n.alt,u=n.ratios,p=n.coverSpace,m=n.onClick,f=n.isInverted,g=n.showPlaceholder,w=void 0===g||g,h=n.allowEdgeRadius,j=n.copyright,x=i.useLibTheme().colors,O=t.useRef(null),_=t.useState(!1),E=_[0],q=_[1];return t.useEffect((function(){if(O.current){var n=O.current,e=function(){q(!0)},t=function(){q(!1)};return n.complete?(n.removeEventListener("load",e),n.removeEventListener("error",t),e()):(n.addEventListener("load",e),n.addEventListener("error",t)),function(){n.removeEventListener("load",e),n.removeEventListener("error",t)}}}),[]),v.createElement(b,{ratios:u,coverSpace:p,allowEdgeRadius:h,className:e},v.createElement("picture",{onClick:m},d&&v.createElement("source",{srcSet:d,media:r.mq.xlarge}),s&&v.createElement("source",{srcSet:s,media:r.mq.large}),l&&v.createElement("source",{srcSet:l,media:r.mq.semilarge}),a&&v.createElement("source",{srcSet:a,media:r.mq.medium}),v.createElement(k,{ref:O,"data-img-loaded":E,showPlaceholder:w,isInverted:f,srcSet:o,alt:c||"",loading:"lazy"})),j&&v.createElement(y,{size:"small",textColor:x.text.inverted,innerHTML:"&copy; ".concat(j),renderAs:"span"}))};
2
- //# sourceMappingURL=Image-94820dfd.js.map
1
+ "use strict";var n=require("./Filter-89286db9.js"),e=require("./Copy-2a9d4b5d.js"),t=require("react"),o=require("styled-components"),i=require("./LibThemeProvider-69109901.js"),r=require("./styles-13e5d9ac.js");function a(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function l(n){if(n&&n.__esModule)return n;var e=Object.create(null);return n&&Object.keys(n).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:function(){return n[t]}})}})),e.default=n,Object.freeze(e)}var s,d,c,u,p,m,v=l(t),f=a(o),g=function(n,e){if(n&&e&&!isNaN(n)&&!isNaN(e))return n/e},w=function(n){return!!(n&&(null==n?void 0:n.w)&&(null==n?void 0:n.h))},h=function(e){return o.css(s||(s=n.__makeTemplateObject(["\n @supports not (aspect-ratio: auto) {\n height: ",";\n padding-top: ",";\n }\n"],["\n @supports not (aspect-ratio: auto) {\n height: ",";\n padding-top: ",";\n }\n"])),w(e)&&0,w(e)&&"calc(100% / ".concat(g(null==e?void 0:e.w,null==e?void 0:e.h),")"))},b=f.default.div.withConfig({displayName:"Image__AspectContainer",componentId:"sc-10qjgzr-0"})(u||(u=n.__makeTemplateObject(["\n display: inline-block;\n position: relative;\n border-radius: ",";\n overflow: hidden;\n\n aspect-ratio: ",";\n\n width: ",";\n\n max-width: 100%;\n\n object-position: center;\n\n img {\n width: 100%;\n }\n\n ","\n\n // fallback if browsers do not support aspect-ratio\n ","\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio. (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n ","\n"],["\n display: inline-block;\n position: relative;\n border-radius: ",";\n overflow: hidden;\n\n aspect-ratio: ",";\n\n width: ",";\n\n max-width: 100%;\n\n object-position: center;\n\n img {\n width: 100%;\n }\n\n ","\n\n // fallback if browsers do not support aspect-ratio\n ","\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio. (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n @media "," {\n aspect-ratio: ",";\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ","\n }\n\n ","\n"])),(function(n){var e=n.theme;return n.allowEdgeRadius&&r.getGlobals(e).sections.edgeRadius}),(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.small)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.small)||void 0===t?void 0:t.h)}),(function(n){var e,t,o=n.ratios;return!n.coverSpace&&(null===(e=null==o?void 0:o.small)||void 0===e?void 0:e.w)?"".concat(null===(t=null==o?void 0:o.small)||void 0===t?void 0:t.w,"px"):""}),(function(e){return e.coverSpace&&o.css(d||(d=n.__makeTemplateObject(["\n width: 100%;\n\n img {\n object-fit: cover;\n }\n "],["\n width: 100%;\n\n img {\n object-fit: cover;\n }\n "])))}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.small)}),r.mq.medium,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.medium)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.medium)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.medium)}),r.mq.semilarge,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.semilarge)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.semilarge)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.semilarge)}),r.mq.large,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.large)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.large)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.large)}),r.mq.xlarge,(function(n){var e,t,o=n.ratios;return g(null===(e=null==o?void 0:o.xlarge)||void 0===e?void 0:e.w,null===(t=null==o?void 0:o.xlarge)||void 0===t?void 0:t.h)}),(function(n){var e=n.ratios;return n.coverSpace&&h(null==e?void 0:e.xlarge)}),(function(e){var t=e.ratios,i=e.coverSpace;return t&&o.css(c||(c=n.__makeTemplateObject(["\n img {\n height: 100%;\n width: 100%;\n object-fit: ",";\n\n @supports not (aspect-ratio: auto) {\n position: ",";\n top: 0;\n left: 0;\n right: 0;\n }\n }\n "],["\n img {\n height: 100%;\n width: 100%;\n object-fit: ",";\n\n @supports not (aspect-ratio: auto) {\n position: ",";\n top: 0;\n left: 0;\n right: 0;\n }\n }\n "])),i?"cover":"contain",i&&"absolute")})),k=f.default.img.withConfig({displayName:"Image__Img",componentId:"sc-10qjgzr-1"})(p||(p=n.__makeTemplateObject(["\n display: block;\n color: ",";\n\n &[data-img-loaded='false'] {\n background: ",";\n }\n"],["\n display: block;\n color: ",";\n\n &[data-img-loaded='false'] {\n background: ",";\n }\n"])),(function(n){var e=n.theme;return n.isInverted?r.getColors(e).text.inverted:r.getColors(e).text.default}),(function(n){var e=n.theme,t=n.isInverted;return n.showPlaceholder?t?r.getGlobals(e).sections.imagePlaceholderBg.inverted:r.getGlobals(e).sections.imagePlaceholderBg.default:void 0})),y=f.default(e.Copy).withConfig({displayName:"Image__Copyright",componentId:"sc-10qjgzr-2"})(m||(m=n.__makeTemplateObject(["\n display: inline-block;\n position: absolute;\n max-height: 100%;\n bottom: 0;\n right: 0;\n\n padding: ","px ","px;\n\n pointer-events: none;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -ms-writing-mode: tb-rl;\n writing-mode: vertical-rl;\n text-orientation: sideways-right;\n transform: rotate(180deg);\n"],["\n display: inline-block;\n position: absolute;\n max-height: 100%;\n bottom: 0;\n right: 0;\n\n padding: ","px ","px;\n\n pointer-events: none;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -ms-writing-mode: tb-rl;\n writing-mode: vertical-rl;\n text-orientation: sideways-right;\n transform: rotate(180deg);\n"])),2*r.spacings.nudge,r.spacings.nudge);exports.Image=function(n){var e=n.className,o=n.small,a=n.medium,l=n.semilarge,s=n.large,d=n.xlarge,c=n.alt,u=n.ratios,p=n.coverSpace,m=n.onClick,f=n.isInverted,g=n.showPlaceholder,w=void 0===g||g,h=n.allowEdgeRadius,j=n.copyright,x=i.useLibTheme().colors,O=t.useRef(null),_=t.useState(!1),E=_[0],q=_[1];return t.useEffect((function(){if(O.current){var n=O.current,e=function(){q(!0)},t=function(){q(!1)};return n.complete?(n.removeEventListener("load",e),n.removeEventListener("error",t),e()):(n.addEventListener("load",e),n.addEventListener("error",t)),function(){n.removeEventListener("load",e),n.removeEventListener("error",t)}}}),[]),v.createElement(b,{ratios:u,coverSpace:p,allowEdgeRadius:h,className:e},v.createElement("picture",{onClick:m},d&&v.createElement("source",{srcSet:d,media:r.mq.xlarge}),s&&v.createElement("source",{srcSet:s,media:r.mq.large}),l&&v.createElement("source",{srcSet:l,media:r.mq.semilarge}),a&&v.createElement("source",{srcSet:a,media:r.mq.medium}),v.createElement(k,{ref:O,"data-img-loaded":E,showPlaceholder:w,isInverted:f,srcSet:o,alt:c||"",loading:"lazy"})),j&&v.createElement(y,{size:"small",textColor:x.text.inverted,innerHTML:"&copy; ".concat(j),renderAs:"span"}))};
2
+ //# sourceMappingURL=Image-69a9c116.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Image-94820dfd.js","sources":["../src/components/blocks/Image.tsx"],"sourcesContent":["import Copy from 'components/typography/Copy';\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { useLibTheme } from 'utils/LibThemeProvider';\nimport {\n mq,\n getColors as color,\n getGlobals as global,\n spacings,\n} from 'utils/styles';\n\nexport interface ImageAspectRatios {\n small: { w: number; h: number };\n medium?: { w: number; h: number };\n semilarge?: { w: number; h: number };\n large?: { w: number; h: number };\n xlarge?: { w: number; h: number };\n}\n\nexport interface ImageProps {\n /** Alternative text if image cannot be loaded */\n alt?: string;\n\n /** Image URL for small breakpoint */\n small: string;\n /** Image URL for medium breakpoint */\n medium?: string;\n /** Image URL for semilarge breakpoint */\n semilarge?: string;\n /** Image URL for large breakpoint */\n large?: string;\n /** Image URL for xlarge breakpoint */\n xlarge?: string;\n\n /** Cover full width of parent container */\n coverSpace?: boolean;\n\n /**\n * Image ratios for each breakpoint to avoid layout shifting.\n * Only works if coverSpace = true!\n * */\n ratios?: ImageAspectRatios;\n\n /** Show image placeholder background */\n showPlaceholder?: boolean;\n\n /** Image copyright text (richtext) */\n copyright?: string;\n}\n\nconst getAspectRatio = (width?: number, height?: number) => {\n if (!width || !height) return undefined;\n if (isNaN(width) || isNaN(height)) return undefined;\n\n return width / height;\n};\n\nconst isValid = (ratio?: { w?: number; h?: number }) => {\n return ratio && ratio?.w && ratio?.h ? true : false;\n};\n\nconst aspectFallback = (ratio?: { w?: number; h?: number }) => css`\n @supports not (aspect-ratio: auto) {\n height: ${isValid(ratio) && 0};\n padding-top: ${isValid(ratio) &&\n `calc(100% / ${getAspectRatio(ratio?.w, ratio?.h)})`};\n }\n`;\n\nconst AspectContainer = styled.div<{\n ratios?: ImageAspectRatios;\n coverSpace?: boolean;\n allowEdgeRadius?: boolean;\n}>`\n display: inline-block;\n position: relative;\n border-radius: ${({ theme, allowEdgeRadius }) =>\n allowEdgeRadius && global(theme).sections.edgeRadius};\n overflow: hidden;\n\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.small?.w, ratios?.small?.h)};\n\n width: ${({ ratios, coverSpace }) =>\n !coverSpace && ratios?.small?.w ? `${ratios?.small?.w}px` : ''};\n\n max-width: 100%;\n\n object-position: center;\n\n img {\n width: 100%;\n }\n\n ${({ coverSpace }) =>\n coverSpace &&\n css`\n width: 100%;\n\n img {\n object-fit: cover;\n }\n `}\n\n // fallback if browsers do not support aspect-ratio\n ${({ ratios, coverSpace }) => coverSpace && aspectFallback(ratios?.small)}\n\n @media ${mq.medium} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.medium?.w, ratios?.medium?.h)};\n\n // fallback if browsers do not support aspect-ratio. (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.medium)}\n }\n\n @media ${mq.semilarge} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.semilarge?.w, ratios?.semilarge?.h)};\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.semilarge)}\n }\n\n @media ${mq.large} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.large?.w, ratios?.large?.h)};\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.large)}\n }\n\n @media ${mq.xlarge} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.xlarge?.w, ratios?.xlarge?.h)};\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.xlarge)}\n }\n\n ${({ ratios, coverSpace }) =>\n ratios &&\n css`\n img {\n height: 100%;\n width: 100%;\n object-fit: ${coverSpace ? 'cover' : 'contain'};\n\n @supports not (aspect-ratio: auto) {\n position: ${coverSpace && 'absolute'};\n top: 0;\n left: 0;\n right: 0;\n }\n }\n `}\n`;\n\nconst Img = styled.img<{ isInverted?: boolean; showPlaceholder?: boolean }>`\n display: block;\n color: ${({ theme, isInverted }) =>\n isInverted ? color(theme).text.inverted : color(theme).text.default};\n\n &[data-img-loaded='false'] {\n background: ${({ theme, isInverted, showPlaceholder }) =>\n showPlaceholder\n ? isInverted\n ? global(theme).sections.imagePlaceholderBg.inverted\n : global(theme).sections.imagePlaceholderBg.default\n : undefined};\n }\n`;\n\nconst Copyright = styled(Copy)`\n display: inline-block;\n position: absolute;\n max-height: 100%;\n bottom: 0;\n right: 0;\n\n padding: ${spacings.nudge * 2}px ${spacings.nudge}px;\n\n pointer-events: none;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -ms-writing-mode: tb-rl;\n writing-mode: vertical-rl;\n text-orientation: sideways-right;\n transform: rotate(180deg);\n`;\n\nconst Image: React.FC<\n {\n className?: string;\n\n /** Click handler */\n onClick?: () => void;\n\n /** Show inverted image placeholder background */\n isInverted?: boolean;\n\n /** Allow edge radius defined by theme settings */\n allowEdgeRadius?: boolean;\n } & ImageProps\n> = ({\n className,\n small,\n medium,\n semilarge,\n large,\n xlarge,\n alt,\n ratios,\n coverSpace,\n onClick,\n isInverted,\n showPlaceholder = true,\n allowEdgeRadius,\n copyright,\n}) => {\n const { colors } = useLibTheme();\n const imgRef = useRef<HTMLImageElement>(null);\n const [isLoaded, setIsLoaded] = useState<boolean>(false);\n\n useEffect(() => {\n if (!imgRef.current) return;\n const ref = imgRef.current;\n\n const handleLoad = () => {\n setIsLoaded(true);\n };\n\n const handleError = () => {\n setIsLoaded(false);\n };\n\n if (!ref.complete) {\n ref.addEventListener('load', handleLoad);\n ref.addEventListener('error', handleError);\n } else {\n ref.removeEventListener('load', handleLoad);\n ref.removeEventListener('error', handleError);\n handleLoad();\n }\n\n return () => {\n ref.removeEventListener('load', handleLoad);\n ref.removeEventListener('error', handleError);\n };\n }, []);\n\n return (\n <AspectContainer\n ratios={ratios}\n coverSpace={coverSpace}\n allowEdgeRadius={allowEdgeRadius}\n className={className}\n >\n <picture onClick={onClick}>\n {xlarge && <source srcSet={xlarge} media={mq.xlarge} />}\n {large && <source srcSet={large} media={mq.large} />}\n {semilarge && (\n <source srcSet={semilarge} media={mq.semilarge} />\n )}\n {medium && <source srcSet={medium} media={mq.medium} />}\n <Img\n ref={imgRef}\n data-img-loaded={isLoaded}\n showPlaceholder={showPlaceholder}\n isInverted={isInverted}\n srcSet={small}\n alt={alt || ''}\n loading=\"lazy\"\n />\n </picture>\n {copyright && (\n <Copyright\n size=\"small\"\n textColor={colors.text.inverted}\n innerHTML={`&copy; ${copyright}`}\n renderAs=\"span\"\n />\n )}\n </AspectContainer>\n );\n};\n\nexport default Image;\n"],"names":["getAspectRatio","width","height","isNaN","isValid","ratio","w","h","aspectFallback","css","templateObject_1","__makeTemplateObject","concat","AspectContainer","styled","div","withConfig","displayName","componentId","templateObject_4","_a","theme","allowEdgeRadius","global","getGlobals","sections","edgeRadius","ratios","_b","small","_c","coverSpace","templateObject_2","mq","medium","semilarge","large","xlarge","templateObject_3","Img","img","templateObject_5","isInverted","color","text","inverted","default","showPlaceholder","imagePlaceholderBg","undefined","Copyright","Copy","templateObject_6","spacings","nudge","className","alt","onClick","copyright","colors","useLibTheme","imgRef","useRef","useState","isLoaded","setIsLoaded","useEffect","current","ref","handleLoad","handleError","complete","removeEventListener","addEventListener","React","createElement","srcSet","media","loading","size","textColor","innerHTML","renderAs"],"mappings":"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"}
1
+ {"version":3,"file":"Image-69a9c116.js","sources":["../src/components/blocks/Image.tsx"],"sourcesContent":["import Copy from 'components/typography/Copy';\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { useLibTheme } from 'utils/LibThemeProvider';\nimport {\n mq,\n getColors as color,\n getGlobals as global,\n spacings,\n} from 'utils/styles';\n\nexport interface ImageAspectRatios {\n small: { w: number; h: number };\n medium?: { w: number; h: number };\n semilarge?: { w: number; h: number };\n large?: { w: number; h: number };\n xlarge?: { w: number; h: number };\n}\n\nexport interface ImageProps {\n /** Alternative text if image cannot be loaded */\n alt?: string;\n\n /** Image URL for small breakpoint */\n small: string;\n /** Image URL for medium breakpoint */\n medium?: string;\n /** Image URL for semilarge breakpoint */\n semilarge?: string;\n /** Image URL for large breakpoint */\n large?: string;\n /** Image URL for xlarge breakpoint */\n xlarge?: string;\n\n /** Cover full width of parent container */\n coverSpace?: boolean;\n\n /**\n * Image ratios for each breakpoint to avoid layout shifting.\n * Only works if coverSpace = true!\n * */\n ratios?: ImageAspectRatios;\n\n /** Show image placeholder background */\n showPlaceholder?: boolean;\n\n /** Image copyright text (richtext) */\n copyright?: string;\n}\n\nconst getAspectRatio = (width?: number, height?: number) => {\n if (!width || !height) return undefined;\n if (isNaN(width) || isNaN(height)) return undefined;\n\n return width / height;\n};\n\nconst isValid = (ratio?: { w?: number; h?: number }) => {\n return ratio && ratio?.w && ratio?.h ? true : false;\n};\n\nconst aspectFallback = (ratio?: { w?: number; h?: number }) => css`\n @supports not (aspect-ratio: auto) {\n height: ${isValid(ratio) && 0};\n padding-top: ${isValid(ratio) &&\n `calc(100% / ${getAspectRatio(ratio?.w, ratio?.h)})`};\n }\n`;\n\nconst AspectContainer = styled.div<{\n ratios?: ImageAspectRatios;\n coverSpace?: boolean;\n allowEdgeRadius?: boolean;\n}>`\n display: inline-block;\n position: relative;\n border-radius: ${({ theme, allowEdgeRadius }) =>\n allowEdgeRadius && global(theme).sections.edgeRadius};\n overflow: hidden;\n\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.small?.w, ratios?.small?.h)};\n\n width: ${({ ratios, coverSpace }) =>\n !coverSpace && ratios?.small?.w ? `${ratios?.small?.w}px` : ''};\n\n max-width: 100%;\n\n object-position: center;\n\n img {\n width: 100%;\n }\n\n ${({ coverSpace }) =>\n coverSpace &&\n css`\n width: 100%;\n\n img {\n object-fit: cover;\n }\n `}\n\n // fallback if browsers do not support aspect-ratio\n ${({ ratios, coverSpace }) => coverSpace && aspectFallback(ratios?.small)}\n\n @media ${mq.medium} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.medium?.w, ratios?.medium?.h)};\n\n // fallback if browsers do not support aspect-ratio. (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.medium)}\n }\n\n @media ${mq.semilarge} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.semilarge?.w, ratios?.semilarge?.h)};\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.semilarge)}\n }\n\n @media ${mq.large} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.large?.w, ratios?.large?.h)};\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.large)}\n }\n\n @media ${mq.xlarge} {\n aspect-ratio: ${({ ratios }) =>\n getAspectRatio(ratios?.xlarge?.w, ratios?.xlarge?.h)};\n\n // fallback if browsers do not support aspect-ratio (Only works with width = 100%)\n ${({ ratios, coverSpace }) =>\n coverSpace && aspectFallback(ratios?.xlarge)}\n }\n\n ${({ ratios, coverSpace }) =>\n ratios &&\n css`\n img {\n height: 100%;\n width: 100%;\n object-fit: ${coverSpace ? 'cover' : 'contain'};\n\n @supports not (aspect-ratio: auto) {\n position: ${coverSpace && 'absolute'};\n top: 0;\n left: 0;\n right: 0;\n }\n }\n `}\n`;\n\nconst Img = styled.img<{ isInverted?: boolean; showPlaceholder?: boolean }>`\n display: block;\n color: ${({ theme, isInverted }) =>\n isInverted ? color(theme).text.inverted : color(theme).text.default};\n\n &[data-img-loaded='false'] {\n background: ${({ theme, isInverted, showPlaceholder }) =>\n showPlaceholder\n ? isInverted\n ? global(theme).sections.imagePlaceholderBg.inverted\n : global(theme).sections.imagePlaceholderBg.default\n : undefined};\n }\n`;\n\nconst Copyright = styled(Copy)`\n display: inline-block;\n position: absolute;\n max-height: 100%;\n bottom: 0;\n right: 0;\n\n padding: ${spacings.nudge * 2}px ${spacings.nudge}px;\n\n pointer-events: none;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -ms-writing-mode: tb-rl;\n writing-mode: vertical-rl;\n text-orientation: sideways-right;\n transform: rotate(180deg);\n`;\n\nconst Image: React.FC<\n {\n className?: string;\n\n /** Click handler */\n onClick?: () => void;\n\n /** Show inverted image placeholder background */\n isInverted?: boolean;\n\n /** Allow edge radius defined by theme settings */\n allowEdgeRadius?: boolean;\n } & ImageProps\n> = ({\n className,\n small,\n medium,\n semilarge,\n large,\n xlarge,\n alt,\n ratios,\n coverSpace,\n onClick,\n isInverted,\n showPlaceholder = true,\n allowEdgeRadius,\n copyright,\n}) => {\n const { colors } = useLibTheme();\n const imgRef = useRef<HTMLImageElement>(null);\n const [isLoaded, setIsLoaded] = useState<boolean>(false);\n\n useEffect(() => {\n if (!imgRef.current) return;\n const ref = imgRef.current;\n\n const handleLoad = () => {\n setIsLoaded(true);\n };\n\n const handleError = () => {\n setIsLoaded(false);\n };\n\n if (!ref.complete) {\n ref.addEventListener('load', handleLoad);\n ref.addEventListener('error', handleError);\n } else {\n ref.removeEventListener('load', handleLoad);\n ref.removeEventListener('error', handleError);\n handleLoad();\n }\n\n return () => {\n ref.removeEventListener('load', handleLoad);\n ref.removeEventListener('error', handleError);\n };\n }, []);\n\n return (\n <AspectContainer\n ratios={ratios}\n coverSpace={coverSpace}\n allowEdgeRadius={allowEdgeRadius}\n className={className}\n >\n <picture onClick={onClick}>\n {xlarge && <source srcSet={xlarge} media={mq.xlarge} />}\n {large && <source srcSet={large} media={mq.large} />}\n {semilarge && (\n <source srcSet={semilarge} media={mq.semilarge} />\n )}\n {medium && <source srcSet={medium} media={mq.medium} />}\n <Img\n ref={imgRef}\n data-img-loaded={isLoaded}\n showPlaceholder={showPlaceholder}\n isInverted={isInverted}\n srcSet={small}\n alt={alt || ''}\n loading=\"lazy\"\n />\n </picture>\n {copyright && (\n <Copyright\n size=\"small\"\n textColor={colors.text.inverted}\n innerHTML={`&copy; ${copyright}`}\n renderAs=\"span\"\n />\n )}\n </AspectContainer>\n );\n};\n\nexport default Image;\n"],"names":["getAspectRatio","width","height","isNaN","isValid","ratio","w","h","aspectFallback","css","templateObject_1","__makeTemplateObject","concat","AspectContainer","styled","div","withConfig","displayName","componentId","templateObject_4","_a","theme","allowEdgeRadius","global","getGlobals","sections","edgeRadius","ratios","_b","small","_c","coverSpace","templateObject_2","mq","medium","semilarge","large","xlarge","templateObject_3","Img","img","templateObject_5","isInverted","color","text","inverted","default","showPlaceholder","imagePlaceholderBg","undefined","Copyright","Copy","templateObject_6","spacings","nudge","className","alt","onClick","copyright","colors","useLibTheme","imgRef","useRef","useState","isLoaded","setIsLoaded","useEffect","current","ref","handleLoad","handleError","complete","removeEventListener","addEventListener","React","createElement","srcSet","media","loading","size","textColor","innerHTML","renderAs"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";var n=require("./Filter-89286db9.js"),e=require("./Copy-a0bc570d.js"),t=require("react"),i=require("styled-components"),a=require("./arrays-c272ed59.js"),l=require("./styles-13e5d9ac.js");function o(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var r,s,d,p,m,c,g,f=o(t),u=o(i),x=u.default.div.withConfig({displayName:"InfoList__View",componentId:"sc-1bggeo0-0"})(r||(r=n.__makeTemplateObject([""],[""]))),y=u.default.ul.withConfig({displayName:"InfoList__Container",componentId:"sc-1bggeo0-1"})(s||(s=n.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin: 0;\n padding: 0;\n margin-left: -","px;\n margin-top: -","px;\n list-style: none;\n"],["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin: 0;\n padding: 0;\n margin-left: -","px;\n margin-top: -","px;\n list-style: none;\n"])),l.spacings.spacer,5*l.spacings.nudge),_=u.default.li.withConfig({displayName:"InfoList__Item",componentId:"sc-1bggeo0-2"})(d||(d=n.__makeTemplateObject(["\n flex: 1 1 100%;\n padding-left: ","px;\n padding-top: ","px;\n\n @media "," {\n flex: 1 1 300px;\n }\n"],["\n flex: 1 1 100%;\n padding-left: ","px;\n padding-top: ","px;\n\n @media "," {\n flex: 1 1 300px;\n }\n"])),l.spacings.spacer,5*l.spacings.nudge,l.mq.medium),w=u.default(e.Copy).withConfig({displayName:"InfoList__Title",componentId:"sc-1bggeo0-3"})(p||(p=n.__makeTemplateObject(["\n display: block;\n margin-bottom: ","px;\n"],["\n display: block;\n margin-bottom: ","px;\n"])),3*l.spacings.nudge),I=u.default.ul.withConfig({displayName:"InfoList__Infos",componentId:"sc-1bggeo0-4"})(m||(m=n.__makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: 0;\n"],["\n list-style: none;\n margin: 0;\n padding: 0;\n"]))),b=u.default.li.withConfig({displayName:"InfoList__Content",componentId:"sc-1bggeo0-5"})(c||(c=n.__makeTemplateObject(["\n display: -ms-grid;\n display: grid;\n margin: 0;\n\n -ms-grid-columns: min-content 1fr;\n grid-template-columns: min-content 1fr;\n -ms-grid-rows: min-content 1fr;\n grid-auto-rows: min-content 1fr;\n\n & + & {\n margin-top: ","px;\n }\n\n & > * + * {\n margin-left: ","px;\n }\n"],["\n display: -ms-grid;\n display: grid;\n margin: 0;\n\n -ms-grid-columns: min-content 1fr;\n grid-template-columns: min-content 1fr;\n -ms-grid-rows: min-content 1fr;\n grid-auto-rows: min-content 1fr;\n\n & + & {\n margin-top: ","px;\n }\n\n & > * + * {\n margin-left: ","px;\n }\n"])),2*l.spacings.nudge,2*l.spacings.nudge),h=u.default(e.Copy).withConfig({displayName:"InfoList__Icon",componentId:"sc-1bggeo0-6"})(g||(g=n.__makeTemplateObject(["\n height: 20px;\n width: 20px;\n\n & > * {\n height: 20px;\n width: 20px;\n }\n"],["\n height: 20px;\n width: 20px;\n\n & > * {\n height: 20px;\n width: 20px;\n }\n"])));exports.InfoList=function(n){var t=n.isInverted,i=n.items,l=n.className;return f.default.createElement(x,{className:l},f.default.createElement(y,null,null==i?void 0:i.map((function(n,i){var l,o=(null===(l=null==n?void 0:n.items)||void 0===l?void 0:l.filter((function(n){return n.text})))||[],r=a.isValidArray(o,!1);return f.default.createElement(_,{key:i},n.title&&f.default.createElement(w,{size:"small",type:"copy-b",renderAs:"span",isInverted:t},n.title),r&&f.default.createElement(I,null,o.map((function(n,i){return f.default.createElement(b,{key:i},f.default.createElement(h,{isInverted:t},n.icon&&n.icon(t)),n.text&&f.default.createElement(e.Copy,{size:"small",isInverted:t,innerHTML:n.text,allowLinkIcons:!1}))}))))}))))};
2
- //# sourceMappingURL=InfoList-e416058c.js.map
1
+ "use strict";var n=require("./Filter-89286db9.js"),e=require("./Copy-2a9d4b5d.js"),t=require("react"),i=require("styled-components"),a=require("./arrays-c272ed59.js"),l=require("./styles-13e5d9ac.js");function o(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var r,s,d,p,m,g,c,f=o(t),u=o(i),x=u.default.div.withConfig({displayName:"InfoList__View",componentId:"sc-1bggeo0-0"})(r||(r=n.__makeTemplateObject([""],[""]))),y=u.default.ul.withConfig({displayName:"InfoList__Container",componentId:"sc-1bggeo0-1"})(s||(s=n.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin: 0;\n padding: 0;\n margin-left: -","px;\n margin-top: -","px;\n list-style: none;\n"],["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin: 0;\n padding: 0;\n margin-left: -","px;\n margin-top: -","px;\n list-style: none;\n"])),l.spacings.spacer,5*l.spacings.nudge),_=u.default.li.withConfig({displayName:"InfoList__Item",componentId:"sc-1bggeo0-2"})(d||(d=n.__makeTemplateObject(["\n flex: 1 1 100%;\n padding-left: ","px;\n padding-top: ","px;\n\n @media "," {\n flex: 1 1 300px;\n }\n"],["\n flex: 1 1 100%;\n padding-left: ","px;\n padding-top: ","px;\n\n @media "," {\n flex: 1 1 300px;\n }\n"])),l.spacings.spacer,5*l.spacings.nudge,l.mq.medium),w=u.default(e.Copy).withConfig({displayName:"InfoList__Title",componentId:"sc-1bggeo0-3"})(p||(p=n.__makeTemplateObject(["\n display: block;\n margin-bottom: ","px;\n"],["\n display: block;\n margin-bottom: ","px;\n"])),3*l.spacings.nudge),I=u.default.ul.withConfig({displayName:"InfoList__Infos",componentId:"sc-1bggeo0-4"})(m||(m=n.__makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: 0;\n"],["\n list-style: none;\n margin: 0;\n padding: 0;\n"]))),b=u.default.li.withConfig({displayName:"InfoList__Content",componentId:"sc-1bggeo0-5"})(g||(g=n.__makeTemplateObject(["\n display: -ms-grid;\n display: grid;\n margin: 0;\n\n -ms-grid-columns: min-content 1fr;\n grid-template-columns: min-content 1fr;\n -ms-grid-rows: min-content 1fr;\n grid-auto-rows: min-content 1fr;\n\n & + & {\n margin-top: ","px;\n }\n\n & > * + * {\n margin-left: ","px;\n }\n"],["\n display: -ms-grid;\n display: grid;\n margin: 0;\n\n -ms-grid-columns: min-content 1fr;\n grid-template-columns: min-content 1fr;\n -ms-grid-rows: min-content 1fr;\n grid-auto-rows: min-content 1fr;\n\n & + & {\n margin-top: ","px;\n }\n\n & > * + * {\n margin-left: ","px;\n }\n"])),2*l.spacings.nudge,2*l.spacings.nudge),h=u.default(e.Copy).withConfig({displayName:"InfoList__Icon",componentId:"sc-1bggeo0-6"})(c||(c=n.__makeTemplateObject(["\n height: 20px;\n width: 20px;\n\n & > * {\n height: 20px;\n width: 20px;\n }\n"],["\n height: 20px;\n width: 20px;\n\n & > * {\n height: 20px;\n width: 20px;\n }\n"])));exports.InfoList=function(n){var t=n.isInverted,i=n.items,l=n.className;return f.default.createElement(x,{className:l},f.default.createElement(y,null,null==i?void 0:i.map((function(n,i){var l,o=(null===(l=null==n?void 0:n.items)||void 0===l?void 0:l.filter((function(n){return n.text})))||[],r=a.isValidArray(o,!1);return f.default.createElement(_,{key:i},n.title&&f.default.createElement(w,{size:"small",type:"copy-b",renderAs:"span",isInverted:t},n.title),r&&f.default.createElement(I,null,o.map((function(n,i){return f.default.createElement(b,{key:i},f.default.createElement(h,{isInverted:t},n.icon&&n.icon(t)),n.text&&f.default.createElement(e.Copy,{size:"small",isInverted:t,innerHTML:n.text,allowLinkIcons:!1}))}))))}))))};
2
+ //# sourceMappingURL=InfoList-f040b8fb.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InfoList-e416058c.js","sources":["../src/components/blocks/InfoList.tsx"],"sourcesContent":["import Copy from 'components/typography/Copy';\nimport React, { FC } from 'react';\nimport styled from 'styled-components';\nimport { isValidArray } from 'utils/arrays';\n\nimport { mq, spacings } from 'utils/styles';\n\nconst View = styled.div``;\n\nconst Container = styled.ul`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin: 0;\n padding: 0;\n margin-left: -${spacings.spacer}px;\n margin-top: -${spacings.nudge * 5}px;\n list-style: none;\n`;\n\nconst Item = styled.li`\n flex: 1 1 100%;\n padding-left: ${spacings.spacer}px;\n padding-top: ${spacings.nudge * 5}px;\n\n @media ${mq.medium} {\n flex: 1 1 300px;\n }\n`;\n\nconst Title = styled(Copy)`\n display: block;\n margin-bottom: ${spacings.nudge * 3}px;\n`;\n\nconst Infos = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nconst Content = styled.li`\n display: -ms-grid;\n display: grid;\n margin: 0;\n\n -ms-grid-columns: min-content 1fr;\n grid-template-columns: min-content 1fr;\n -ms-grid-rows: min-content 1fr;\n grid-auto-rows: min-content 1fr;\n\n & + & {\n margin-top: ${spacings.nudge * 2}px;\n }\n\n & > * + * {\n margin-left: ${spacings.nudge * 2}px;\n }\n`;\n\nconst Icon = styled(Copy)`\n height: 20px;\n width: 20px;\n\n & > * {\n height: 20px;\n width: 20px;\n }\n`;\n\nexport interface InfoGroup {\n title?: string;\n items: Info[];\n}\n\nexport interface Info {\n /** icon injection function */\n icon?: (isInverted?: boolean) => React.ReactNode;\n /** info text (richtText) */\n text?: string;\n}\n\nconst InfoList: FC<{\n /** Invert text and icon color for dark backgrounds */\n isInverted?: boolean;\n\n /** Array of info groups */\n items?: InfoGroup[];\n\n className?: string;\n}> = ({ isInverted, items, className }) => {\n return (\n <View className={className}>\n <Container>\n {items?.map((group, i) => {\n const groupItems =\n group?.items?.filter((item) => item.text) || [];\n const hasItems = isValidArray(groupItems, false);\n\n return (\n <Item key={i}>\n {group.title && (\n <Title\n size=\"small\"\n type=\"copy-b\"\n renderAs=\"span\"\n isInverted={isInverted}\n >\n {group.title}\n </Title>\n )}\n {hasItems && (\n <Infos>\n {groupItems.map((info, ii) => (\n <Content key={ii}>\n <Icon isInverted={isInverted}>\n {info.icon &&\n info.icon(isInverted)}\n </Icon>\n {info.text && (\n <Copy\n size=\"small\"\n isInverted={isInverted}\n innerHTML={info.text}\n allowLinkIcons={false}\n />\n )}\n </Content>\n ))}\n </Infos>\n )}\n </Item>\n );\n })}\n </Container>\n </View>\n );\n};\n\nexport default InfoList;\n"],"names":["View","styled","div","withConfig","displayName","componentId","templateObject_1","__makeTemplateObject","Container","ul","templateObject_2","spacings","spacer","nudge","Item","li","templateObject_3","mq","medium","Title","Copy","templateObject_4","Infos","templateObject_5","Content","Icon","templateObject_7","_a","isInverted","items","className","React","createElement","map","group","i","groupItems","filter","item","text","hasItems","isValidArray","key","title","size","type","renderAs","info","ii","icon","innerHTML","allowLinkIcons"],"mappings":"iTAOMA,EAAOC,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,iBAAAC,YAAA,gBAAGJ,CAAUK,IAAAA,EAAAC,uBAAA,CAAA,IAAA,CAAA,OAEjBC,EAAYP,EAAAA,QAAOQ,GAAVN,WAAA,CAAAC,YAAA,sBAAAC,YAAA,gBAAGJ,CAASS,IAAAA,EAAAH,EAAAA,qBAAA,CAAA,8HAAA,yBAAA,gCAAA,CAAA,8HAOQ,yBACE,kCADjBI,EAAQA,SAACC,OACO,EAAjBD,WAASE,OAItBC,EAAOb,EAAAA,QAAOc,GAAVZ,WAAA,CAAAC,YAAA,iBAAAC,YAAA,gBAAGJ,CAASe,IAAAA,EAAAT,EAAAA,qBAAA,CAAA,4CAAA,yBAAA,qBAAA,yCAAA,CAAA,4CAEa,yBACE,qBAEf,2CAHFI,EAAAA,SAASC,OACO,EAAjBD,WAASE,MAEfI,KAAGC,QAKVC,EAAQlB,EAAM,QAACmB,QAAVjB,WAAA,CAAAC,YAAA,kBAAAC,YAAA,gBAAGJ,CAAYoB,IAAAA,EAAAd,EAAAA,qBAAA,CAAA,6CAAA,SAAA,CAAA,6CAEa,WAAD,EAAjBI,EAAQA,SAACE,OAGxBS,EAAQrB,EAAAA,QAAOQ,GAAVN,WAAA,CAAAC,YAAA,kBAAAC,YAAA,gBAAGJ,CAASsB,IAAAA,EAAAhB,uBAAA,CAAA,8DAAA,CAAA,iEAMjBiB,EAAUvB,EAAAA,QAAOc,GAAVZ,WAAA,CAAAC,YAAA,oBAAAC,YAAA,gBAAGJ,6WAAS,sQAWe,uDAIC,kBAJF,EAAjBU,WAASE,MAIS,EAAjBF,EAAQA,SAACE,OAI1BY,EAAOxB,EAAM,QAACmB,QAAVjB,WAAA,CAAAC,YAAA,iBAAAC,YAAA,gBAAGJ,CAAYyB,IAAAA,EAAAnB,uBAAA,CAAA,8GAAA,CAAA,kIA8BpB,SAACoB,GAAE,IAAAC,eAAYC,EAAKF,EAAAE,MAAEC,EAASH,EAAAG,UAChC,OACIC,EAAC,QAAAC,cAAAhC,EAAK,CAAA8B,UAAWA,GACbC,EAAAA,QAAAC,cAACxB,EAAS,KACLqB,MAAAA,OAAK,EAALA,EAAOI,KAAI,SAACC,EAAOC,SACVC,GACY,QAAdT,EAAAO,MAAAA,OAAA,EAAAA,EAAOL,aAAO,IAAAF,OAAA,EAAAA,EAAAU,QAAO,SAACC,GAASA,OAAAA,EAAKC,UAAS,GAC3CC,EAAWC,EAAAA,aAAaL,GAAY,GAE1C,OACIL,EAAC,QAAAC,cAAAlB,EAAK,CAAA4B,IAAKP,GACND,EAAMS,OACHZ,UAAAC,cAACb,EAAK,CACFyB,KAAK,QACLC,KAAK,SACLC,SAAS,OACTlB,WAAYA,GAEXM,EAAMS,OAGdH,GACGT,EAAC,QAAAC,cAAAV,OACIc,EAAWH,KAAI,SAACc,EAAMC,GAAO,OAC1BjB,wBAACP,EAAO,CAACkB,IAAKM,GACVjB,EAAC,QAAAC,cAAAP,GAAKG,WAAYA,GACbmB,EAAKE,MACFF,EAAKE,KAAKrB,IAEjBmB,EAAKR,MACFR,wBAACX,EAAAA,KAAI,CACDwB,KAAK,QACLhB,WAAYA,EACZsB,UAAWH,EAAKR,KAChBY,gBAAgB"}
1
+ {"version":3,"file":"InfoList-f040b8fb.js","sources":["../src/components/blocks/InfoList.tsx"],"sourcesContent":["import Copy from 'components/typography/Copy';\nimport React, { FC } from 'react';\nimport styled from 'styled-components';\nimport { isValidArray } from 'utils/arrays';\n\nimport { mq, spacings } from 'utils/styles';\n\nconst View = styled.div``;\n\nconst Container = styled.ul`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n margin: 0;\n padding: 0;\n margin-left: -${spacings.spacer}px;\n margin-top: -${spacings.nudge * 5}px;\n list-style: none;\n`;\n\nconst Item = styled.li`\n flex: 1 1 100%;\n padding-left: ${spacings.spacer}px;\n padding-top: ${spacings.nudge * 5}px;\n\n @media ${mq.medium} {\n flex: 1 1 300px;\n }\n`;\n\nconst Title = styled(Copy)`\n display: block;\n margin-bottom: ${spacings.nudge * 3}px;\n`;\n\nconst Infos = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nconst Content = styled.li`\n display: -ms-grid;\n display: grid;\n margin: 0;\n\n -ms-grid-columns: min-content 1fr;\n grid-template-columns: min-content 1fr;\n -ms-grid-rows: min-content 1fr;\n grid-auto-rows: min-content 1fr;\n\n & + & {\n margin-top: ${spacings.nudge * 2}px;\n }\n\n & > * + * {\n margin-left: ${spacings.nudge * 2}px;\n }\n`;\n\nconst Icon = styled(Copy)`\n height: 20px;\n width: 20px;\n\n & > * {\n height: 20px;\n width: 20px;\n }\n`;\n\nexport interface InfoGroup {\n title?: string;\n items: Info[];\n}\n\nexport interface Info {\n /** icon injection function */\n icon?: (isInverted?: boolean) => React.ReactNode;\n /** info text (richtText) */\n text?: string;\n}\n\nconst InfoList: FC<{\n /** Invert text and icon color for dark backgrounds */\n isInverted?: boolean;\n\n /** Array of info groups */\n items?: InfoGroup[];\n\n className?: string;\n}> = ({ isInverted, items, className }) => {\n return (\n <View className={className}>\n <Container>\n {items?.map((group, i) => {\n const groupItems =\n group?.items?.filter((item) => item.text) || [];\n const hasItems = isValidArray(groupItems, false);\n\n return (\n <Item key={i}>\n {group.title && (\n <Title\n size=\"small\"\n type=\"copy-b\"\n renderAs=\"span\"\n isInverted={isInverted}\n >\n {group.title}\n </Title>\n )}\n {hasItems && (\n <Infos>\n {groupItems.map((info, ii) => (\n <Content key={ii}>\n <Icon isInverted={isInverted}>\n {info.icon &&\n info.icon(isInverted)}\n </Icon>\n {info.text && (\n <Copy\n size=\"small\"\n isInverted={isInverted}\n innerHTML={info.text}\n allowLinkIcons={false}\n />\n )}\n </Content>\n ))}\n </Infos>\n )}\n </Item>\n );\n })}\n </Container>\n </View>\n );\n};\n\nexport default InfoList;\n"],"names":["View","styled","div","withConfig","displayName","componentId","templateObject_1","__makeTemplateObject","Container","ul","templateObject_2","spacings","spacer","nudge","Item","li","templateObject_3","mq","medium","Title","Copy","templateObject_4","Infos","templateObject_5","Content","Icon","templateObject_7","_a","isInverted","items","className","React","createElement","map","group","i","groupItems","filter","item","text","hasItems","isValidArray","key","title","size","type","renderAs","info","ii","icon","innerHTML","allowLinkIcons"],"mappings":"iTAOMA,EAAOC,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,iBAAAC,YAAA,gBAAGJ,CAAUK,IAAAA,EAAAC,uBAAA,CAAA,IAAA,CAAA,OAEjBC,EAAYP,EAAAA,QAAOQ,GAAVN,WAAA,CAAAC,YAAA,sBAAAC,YAAA,gBAAGJ,CAASS,IAAAA,EAAAH,EAAAA,qBAAA,CAAA,8HAAA,yBAAA,gCAAA,CAAA,8HAOQ,yBACE,kCADjBI,EAAQA,SAACC,OACO,EAAjBD,WAASE,OAItBC,EAAOb,EAAAA,QAAOc,GAAVZ,WAAA,CAAAC,YAAA,iBAAAC,YAAA,gBAAGJ,CAASe,IAAAA,EAAAT,EAAAA,qBAAA,CAAA,4CAAA,yBAAA,qBAAA,yCAAA,CAAA,4CAEa,yBACE,qBAEf,2CAHFI,EAAAA,SAASC,OACO,EAAjBD,WAASE,MAEfI,KAAGC,QAKVC,EAAQlB,EAAM,QAACmB,QAAVjB,WAAA,CAAAC,YAAA,kBAAAC,YAAA,gBAAGJ,CAAYoB,IAAAA,EAAAd,EAAAA,qBAAA,CAAA,6CAAA,SAAA,CAAA,6CAEa,WAAD,EAAjBI,EAAQA,SAACE,OAGxBS,EAAQrB,EAAAA,QAAOQ,GAAVN,WAAA,CAAAC,YAAA,kBAAAC,YAAA,gBAAGJ,CAASsB,IAAAA,EAAAhB,uBAAA,CAAA,8DAAA,CAAA,iEAMjBiB,EAAUvB,EAAAA,QAAOc,GAAVZ,WAAA,CAAAC,YAAA,oBAAAC,YAAA,gBAAGJ,6WAAS,sQAWe,uDAIC,kBAJF,EAAjBU,WAASE,MAIS,EAAjBF,EAAQA,SAACE,OAI1BY,EAAOxB,EAAM,QAACmB,QAAVjB,WAAA,CAAAC,YAAA,iBAAAC,YAAA,gBAAGJ,CAAYyB,IAAAA,EAAAnB,uBAAA,CAAA,8GAAA,CAAA,kIA8BpB,SAACoB,GAAE,IAAAC,eAAYC,EAAKF,EAAAE,MAAEC,EAASH,EAAAG,UAChC,OACIC,EAAC,QAAAC,cAAAhC,EAAK,CAAA8B,UAAWA,GACbC,EAAAA,QAAAC,cAACxB,EAAS,KACLqB,MAAAA,OAAK,EAALA,EAAOI,KAAI,SAACC,EAAOC,SACVC,GACY,QAAdT,EAAAO,MAAAA,OAAA,EAAAA,EAAOL,aAAO,IAAAF,OAAA,EAAAA,EAAAU,QAAO,SAACC,GAASA,OAAAA,EAAKC,UAAS,GAC3CC,EAAWC,EAAAA,aAAaL,GAAY,GAE1C,OACIL,EAAC,QAAAC,cAAAlB,EAAK,CAAA4B,IAAKP,GACND,EAAMS,OACHZ,UAAAC,cAACb,EAAK,CACFyB,KAAK,QACLC,KAAK,SACLC,SAAS,OACTlB,WAAYA,GAEXM,EAAMS,OAGdH,GACGT,EAAC,QAAAC,cAAAV,OACIc,EAAWH,KAAI,SAACc,EAAMC,GAAO,OAC1BjB,wBAACP,EAAO,CAACkB,IAAKM,GACVjB,EAAC,QAAAC,cAAAP,GAAKG,WAAYA,GACbmB,EAAKE,MACFF,EAAKE,KAAKrB,IAEjBmB,EAAKR,MACFR,wBAACX,EAAAA,KAAI,CACDwB,KAAK,QACLhB,WAAYA,EACZsB,UAAWH,EAAKR,KAChBY,gBAAgB"}
@@ -1,2 +1,2 @@
1
- "use strict";var n=require("./Filter-89286db9.js"),e=require("react"),t=require("styled-components"),i=require("./Link-8951180c.js"),o=require("./styles-13e5d9ac.js"),r=require("./Copy-a0bc570d.js");function a(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var l,c,d,s,u=a(e),g=a(t),p=g.default.div.withConfig({displayName:"LanguageSwitcher__View",componentId:"sc-16ygxbi-0"})(l||(l=n.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & > * + * {\n margin-left: ","px;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & > * + * {\n margin-left: ","px;\n }\n"])),o.spacings.nudge/2),f=g.default.div.withConfig({displayName:"LanguageSwitcher__Icon",componentId:"sc-16ygxbi-1"})(c||(c=n.__makeTemplateObject(["\n color: ",";\n\n & > * {\n margin-right: ","px;\n }\n"],["\n color: ",";\n\n & > * {\n margin-right: ","px;\n }\n"])),(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default}),o.spacings.nudge),m=g.default.div.withConfig({displayName:"LanguageSwitcher__SelectView",componentId:"sc-16ygxbi-2"})(d||(d=n.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n margin: 0 -","px;\n\n & > * + * {\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 3px;\n left: 0;\n height: 1em;\n width: 2px;\n background-color: ",";\n\n transition: background-color 0.2s ease-in-out;\n }\n }\n"],["\n display: inline-flex;\n align-items: center;\n margin: 0 -","px;\n\n & > * + * {\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 3px;\n left: 0;\n height: 1em;\n width: 2px;\n background-color: ",";\n\n transition: background-color 0.2s ease-in-out;\n }\n }\n"])),o.spacings.nudge,(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default})),v=g.default(i.Link).withConfig({displayName:"LanguageSwitcher__LanguageLink",componentId:"sc-16ygxbi-3"})(s||(s=n.__makeTemplateObject(["\n display: inline-block;\n position: relative;\n padding: 0 ","px;\n\n ","\n font-weight: ",";\n\n color: ",";\n text-decoration: none;\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: ",";\n text-decoration: underline;\n }\n }\n"],["\n display: inline-block;\n position: relative;\n padding: 0 ","px;\n\n ","\n font-weight: ",";\n\n color: ",";\n text-decoration: none;\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: ",";\n text-decoration: underline;\n }\n }\n"])),o.spacings.nudge,(function(n){var e=n.size;return r.copyStyle("copy",e||"medium")}),(function(n){return n.isActive&&"700"}),(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default}),(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default}));exports.LanguageSwitcher=function(e){var t=e.langs,i=e.isInverted,o=e.languageIcon,r=e.textSize,a=void 0===r?"medium":r;return u.default.createElement(p,null,o&&u.default.createElement(f,{isInverted:i},o(i)),u.default.createElement(m,{isInverted:i},null==t?void 0:t.map((function(e,t){return u.default.createElement(v,n.__assign({key:t},e.link,{isInverted:i,isActive:e.isActive,size:a}),e.label)}))))};
2
- //# sourceMappingURL=LanguageSwitcher-aa96cc7d.js.map
1
+ "use strict";var n=require("./Filter-89286db9.js"),e=require("react"),t=require("styled-components"),i=require("./Link-8951180c.js"),o=require("./styles-13e5d9ac.js"),r=require("./Copy-2a9d4b5d.js");function a(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var l,d,c,s,u=a(e),g=a(t),p=g.default.div.withConfig({displayName:"LanguageSwitcher__View",componentId:"sc-16ygxbi-0"})(l||(l=n.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & > * + * {\n margin-left: ","px;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & > * + * {\n margin-left: ","px;\n }\n"])),o.spacings.nudge/2),f=g.default.div.withConfig({displayName:"LanguageSwitcher__Icon",componentId:"sc-16ygxbi-1"})(d||(d=n.__makeTemplateObject(["\n color: ",";\n\n & > * {\n margin-right: ","px;\n }\n"],["\n color: ",";\n\n & > * {\n margin-right: ","px;\n }\n"])),(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default}),o.spacings.nudge),m=g.default.div.withConfig({displayName:"LanguageSwitcher__SelectView",componentId:"sc-16ygxbi-2"})(c||(c=n.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n margin: 0 -","px;\n\n & > * + * {\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 3px;\n left: 0;\n height: 1em;\n width: 2px;\n background-color: ",";\n\n transition: background-color 0.2s ease-in-out;\n }\n }\n"],["\n display: inline-flex;\n align-items: center;\n margin: 0 -","px;\n\n & > * + * {\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 3px;\n left: 0;\n height: 1em;\n width: 2px;\n background-color: ",";\n\n transition: background-color 0.2s ease-in-out;\n }\n }\n"])),o.spacings.nudge,(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default})),v=g.default(i.Link).withConfig({displayName:"LanguageSwitcher__LanguageLink",componentId:"sc-16ygxbi-3"})(s||(s=n.__makeTemplateObject(["\n display: inline-block;\n position: relative;\n padding: 0 ","px;\n\n ","\n font-weight: ",";\n\n color: ",";\n text-decoration: none;\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: ",";\n text-decoration: underline;\n }\n }\n"],["\n display: inline-block;\n position: relative;\n padding: 0 ","px;\n\n ","\n font-weight: ",";\n\n color: ",";\n text-decoration: none;\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: ",";\n text-decoration: underline;\n }\n }\n"])),o.spacings.nudge,(function(n){var e=n.size;return r.copyStyle("copy",e||"medium")}),(function(n){return n.isActive&&"700"}),(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default}),(function(n){var e=n.isInverted,t=n.theme;return e?o.getColors(t).text.inverted:o.getColors(t).text.default}));exports.LanguageSwitcher=function(e){var t=e.langs,i=e.isInverted,o=e.languageIcon,r=e.textSize,a=void 0===r?"medium":r;return u.default.createElement(p,null,o&&u.default.createElement(f,{isInverted:i},o(i)),u.default.createElement(m,{isInverted:i},null==t?void 0:t.map((function(e,t){return u.default.createElement(v,n.__assign({key:t},e.link,{isInverted:i,isActive:e.isActive,size:a}),e.label)}))))};
2
+ //# sourceMappingURL=LanguageSwitcher-c6fd04df.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"LanguageSwitcher-aa96cc7d.js","sources":["../src/components/blocks/LanguageSwitcher.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Link, { LinkProps } from 'components/typography/Link';\nimport { spacings, getColors as color, FontOptions } from 'utils/styles';\nimport { copyStyle } from 'components/typography/Copy';\n\nconst View = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & > * + * {\n margin-left: ${spacings.nudge / 2}px;\n }\n`;\n\nconst Icon = styled.div<{ isInverted?: boolean }>`\n color: ${({ isInverted, theme }) =>\n isInverted ? color(theme).text.inverted : color(theme).text.default};\n\n & > * {\n margin-right: ${spacings.nudge}px;\n }\n`;\n\nconst SelectView = styled.div<{ isInverted?: boolean }>`\n display: inline-flex;\n align-items: center;\n margin: 0 -${spacings.nudge}px;\n\n & > * + * {\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 3px;\n left: 0;\n height: 1em;\n width: 2px;\n background-color: ${({ isInverted, theme }) =>\n isInverted\n ? color(theme).text.inverted\n : color(theme).text.default};\n\n transition: background-color 0.2s ease-in-out;\n }\n }\n`;\n\nconst LanguageLink = styled(Link)<{\n isInverted?: boolean;\n isActive?: boolean;\n size?: keyof FontOptions;\n}>`\n display: inline-block;\n position: relative;\n padding: 0 ${spacings.nudge}px;\n\n ${({ size }) => copyStyle('copy', size || 'medium')}\n font-weight: ${({ isActive }) => isActive && '700'};\n\n color: ${({ isInverted, theme }) =>\n isInverted ? color(theme).text.inverted : color(theme).text.default};\n text-decoration: none;\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: ${({ isInverted, theme }) =>\n isInverted\n ? color(theme).text.inverted\n : color(theme).text.default};\n text-decoration: underline;\n }\n }\n`;\n\nexport interface Language {\n isActive?: boolean;\n label: string;\n link: LinkProps;\n}\n\nconst LanguageSwitcher: FC<{\n langs?: Language[];\n isInverted?: boolean;\n languageIcon?: (isInverted?: boolean) => React.ReactNode;\n textSize?: keyof FontOptions;\n}> = ({ langs, isInverted, languageIcon, textSize = 'medium' }) => {\n return (\n <View>\n {languageIcon && (\n <Icon isInverted={isInverted}>{languageIcon(isInverted)}</Icon>\n )}\n <SelectView isInverted={isInverted}>\n {langs?.map((lang, i) => (\n <LanguageLink\n key={i}\n {...lang.link}\n isInverted={isInverted}\n isActive={lang.isActive}\n size={textSize}\n >\n {lang.label}\n </LanguageLink>\n ))}\n </SelectView>\n </View>\n );\n};\n\nexport default LanguageSwitcher;\n"],"names":["View","styled","div","withConfig","displayName","componentId","spacings","nudge","Icon","templateObject_2","__makeTemplateObject","_a","isInverted","theme","color","text","inverted","default","SelectView","LanguageLink","Link","templateObject_4","size","copyStyle","isActive","langs","languageIcon","_b","textSize","React","createElement","map","lang","i","__assign","key","link","label"],"mappings":"ySAOMA,EAAOC,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,gBAAGJ,qKAAU,qHAMkB,kBAAlBK,EAAQA,SAACC,MAAQ,GAIlCC,EAAOP,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,gBAAGJ,CAAUQ,IAAAA,EAAAC,EAAAA,qBAAA,CAAA,gBAAA,2CAAA,gBAAA,CAA0B,gBAE0B,2CAGrC,mBAJzB,SAACC,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACzB,OAAAD,EAAaE,EAAAA,UAAMD,GAAOE,KAAKC,SAAWF,EAAAA,UAAMD,GAAOE,KAAKE,UAG5CX,EAAAA,SAASC,OAI3BW,EAAajB,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,gBAAGJ,qcAAoC,yEAGxB,qQAcgB,yFAd9BK,EAAAA,SAASC,OAWM,SAACI,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACpC,OAAAD,EACME,EAAAA,UAAMD,GAAOE,KAAKC,SAClBF,EAAAA,UAAMD,GAAOE,KAAKE,WAOlCE,EAAelB,EAAM,QAACmB,QAAVjB,WAAA,CAAAC,YAAA,iCAAAC,YAAA,gBAAGJ,CAInBoB,IAAAA,EAAAX,EAAAA,qBAAA,CAAA,yEAAA,cAAA,sBAAA,mBAAA,2HAAA,kEAAA,CAAA,yEAG6B,cAEwB,sBACD,mBAGqB,2HAQ5B,oEAd9BJ,EAAQA,SAACC,OAEpB,SAACI,GAAE,IAAAW,EAAIX,EAAAW,KAAO,OAAAC,YAAU,OAAQD,GAAQ,aAC3B,SAACX,GAAiBa,OAAPb,EAAAa,UAAmB,SAEpC,SAACb,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACzB,OAAAD,EAAaE,EAAAA,UAAMD,GAAOE,KAAKC,SAAWF,EAAAA,UAAMD,GAAOE,KAAKE,WAK/C,SAACN,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACzB,OAAAD,EACME,EAAAA,UAAMD,GAAOE,KAAKC,SAClBF,EAAAA,UAAMD,GAAOE,KAAKE,oCAiBnC,SAACN,GAAE,IAAAc,EAAKd,EAAAc,MAAEb,EAAUD,EAAAC,WAAEc,EAAYf,EAAAe,aAAEC,EAAmBhB,EAAAiB,SAAnBA,OAAQ,IAAAD,EAAG,SAAQA,EACxD,OACIE,wBAAC7B,EAAI,KACA0B,GACGG,EAAC,QAAAC,cAAAtB,GAAKI,WAAYA,GAAac,EAAad,IAEhDiB,EAAAA,QAACC,cAAAZ,EAAW,CAAAN,WAAYA,GACnBa,MAAAA,OAAA,EAAAA,EAAOM,KAAI,SAACC,EAAMC,GAAM,OACrBJ,UAAAC,cAACX,EAAYe,WAAA,CACTC,IAAKF,GACDD,EAAKI,KACT,CAAAxB,WAAYA,EACZY,SAAUQ,EAAKR,SACfF,KAAMM,IAELI,EAAKK"}
1
+ {"version":3,"file":"LanguageSwitcher-c6fd04df.js","sources":["../src/components/blocks/LanguageSwitcher.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Link, { LinkProps } from 'components/typography/Link';\nimport { spacings, getColors as color, FontOptions } from 'utils/styles';\nimport { copyStyle } from 'components/typography/Copy';\n\nconst View = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & > * + * {\n margin-left: ${spacings.nudge / 2}px;\n }\n`;\n\nconst Icon = styled.div<{ isInverted?: boolean }>`\n color: ${({ isInverted, theme }) =>\n isInverted ? color(theme).text.inverted : color(theme).text.default};\n\n & > * {\n margin-right: ${spacings.nudge}px;\n }\n`;\n\nconst SelectView = styled.div<{ isInverted?: boolean }>`\n display: inline-flex;\n align-items: center;\n margin: 0 -${spacings.nudge}px;\n\n & > * + * {\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 3px;\n left: 0;\n height: 1em;\n width: 2px;\n background-color: ${({ isInverted, theme }) =>\n isInverted\n ? color(theme).text.inverted\n : color(theme).text.default};\n\n transition: background-color 0.2s ease-in-out;\n }\n }\n`;\n\nconst LanguageLink = styled(Link)<{\n isInverted?: boolean;\n isActive?: boolean;\n size?: keyof FontOptions;\n}>`\n display: inline-block;\n position: relative;\n padding: 0 ${spacings.nudge}px;\n\n ${({ size }) => copyStyle('copy', size || 'medium')}\n font-weight: ${({ isActive }) => isActive && '700'};\n\n color: ${({ isInverted, theme }) =>\n isInverted ? color(theme).text.inverted : color(theme).text.default};\n text-decoration: none;\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: ${({ isInverted, theme }) =>\n isInverted\n ? color(theme).text.inverted\n : color(theme).text.default};\n text-decoration: underline;\n }\n }\n`;\n\nexport interface Language {\n isActive?: boolean;\n label: string;\n link: LinkProps;\n}\n\nconst LanguageSwitcher: FC<{\n langs?: Language[];\n isInverted?: boolean;\n languageIcon?: (isInverted?: boolean) => React.ReactNode;\n textSize?: keyof FontOptions;\n}> = ({ langs, isInverted, languageIcon, textSize = 'medium' }) => {\n return (\n <View>\n {languageIcon && (\n <Icon isInverted={isInverted}>{languageIcon(isInverted)}</Icon>\n )}\n <SelectView isInverted={isInverted}>\n {langs?.map((lang, i) => (\n <LanguageLink\n key={i}\n {...lang.link}\n isInverted={isInverted}\n isActive={lang.isActive}\n size={textSize}\n >\n {lang.label}\n </LanguageLink>\n ))}\n </SelectView>\n </View>\n );\n};\n\nexport default LanguageSwitcher;\n"],"names":["View","styled","div","withConfig","displayName","componentId","spacings","nudge","Icon","templateObject_2","__makeTemplateObject","_a","isInverted","theme","color","text","inverted","default","SelectView","LanguageLink","Link","templateObject_4","size","copyStyle","isActive","langs","languageIcon","_b","textSize","React","createElement","map","lang","i","__assign","key","link","label"],"mappings":"ySAOMA,EAAOC,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,gBAAGJ,qKAAU,qHAMkB,kBAAlBK,EAAQA,SAACC,MAAQ,GAIlCC,EAAOP,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,gBAAGJ,CAAUQ,IAAAA,EAAAC,EAAAA,qBAAA,CAAA,gBAAA,2CAAA,gBAAA,CAA0B,gBAE0B,2CAGrC,mBAJzB,SAACC,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACzB,OAAAD,EAAaE,EAAAA,UAAMD,GAAOE,KAAKC,SAAWF,EAAAA,UAAMD,GAAOE,KAAKE,UAG5CX,EAAAA,SAASC,OAI3BW,EAAajB,EAAAA,QAAOC,IAAVC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,gBAAGJ,qcAAoC,yEAGxB,qQAcgB,yFAd9BK,EAAAA,SAASC,OAWM,SAACI,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACpC,OAAAD,EACME,EAAAA,UAAMD,GAAOE,KAAKC,SAClBF,EAAAA,UAAMD,GAAOE,KAAKE,WAOlCE,EAAelB,EAAM,QAACmB,QAAVjB,WAAA,CAAAC,YAAA,iCAAAC,YAAA,gBAAGJ,CAInBoB,IAAAA,EAAAX,EAAAA,qBAAA,CAAA,yEAAA,cAAA,sBAAA,mBAAA,2HAAA,kEAAA,CAAA,yEAG6B,cAEwB,sBACD,mBAGqB,2HAQ5B,oEAd9BJ,EAAQA,SAACC,OAEpB,SAACI,GAAE,IAAAW,EAAIX,EAAAW,KAAO,OAAAC,YAAU,OAAQD,GAAQ,aAC3B,SAACX,GAAiBa,OAAPb,EAAAa,UAAmB,SAEpC,SAACb,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACzB,OAAAD,EAAaE,EAAAA,UAAMD,GAAOE,KAAKC,SAAWF,EAAAA,UAAMD,GAAOE,KAAKE,WAK/C,SAACN,OAAEC,EAAUD,EAAAC,WAAEC,EAAKF,EAAAE,MACzB,OAAAD,EACME,EAAAA,UAAMD,GAAOE,KAAKC,SAClBF,EAAAA,UAAMD,GAAOE,KAAKE,oCAiBnC,SAACN,GAAE,IAAAc,EAAKd,EAAAc,MAAEb,EAAUD,EAAAC,WAAEc,EAAYf,EAAAe,aAAEC,EAAmBhB,EAAAiB,SAAnBA,OAAQ,IAAAD,EAAG,SAAQA,EACxD,OACIE,wBAAC7B,EAAI,KACA0B,GACGG,EAAC,QAAAC,cAAAtB,GAAKI,WAAYA,GAAac,EAAad,IAEhDiB,EAAAA,QAACC,cAAAZ,EAAW,CAAAN,WAAYA,GACnBa,MAAAA,OAAA,EAAAA,EAAOM,KAAI,SAACC,EAAMC,GAAM,OACrBJ,UAAAC,cAACX,EAAYe,WAAA,CACTC,IAAKF,GACDD,EAAKI,KACT,CAAAxB,WAAYA,EACZY,SAAUQ,EAAKR,SACfF,KAAMM,IAELI,EAAKK"}