npm - @chayns-components/core - Versions diffs - 5.3.9 → 5.3.11-alpha.0 - Mend

@chayns-components/core 5.3.9 → 5.3.11-alpha.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 (495) hide show

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js CHANGED Viewed

@@ -7,6 +7,7 @@ exports.StyledMotionFilterButtonItemBackground = exports.StyledFilterButtonItemL
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _filterButtons = require("../../../types/filterButtons");
+var _keyboardFocusHighlighting = require("../../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponents.default.div`
     position: relative;
@@ -34,6 +35,16 @@ const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponent
                 opacity: 0.2;
             `}
     }
+    ${({
+  $shouldShowKeyboardHighlighting,
+  $shape
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
+                border-radius: ${$shape === _filterButtons.FilterButtonItemShape.Round ? 100 : 3}px;
+            }
+        `}
 `;
 const StyledFilterButtonItemLabel = exports.StyledFilterButtonItemLabel = _styledComponents.default.div`
     display: flex;

package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_filterButtons","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilterButtonItem","exports","styled","div","$isDisabled","$size","FilterButtonSize","Normal","$isSelected","css","~~StyledFilterButtonItemLabel~~","~~StyledFilterButtonItemLabelText~~","p","~~theme~~","~~text~~","~~StyledFilterButtonItemLabelCount~~","~~StyledFilterButtonItemBorder~~","~~$shape~~","~~FilterButtonItemShape~~","~~Round~~","$color","headline","StyledMotionFilterButtonItemBackground","motion"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n $size: FilterButtonSize;\n $isSelected: boolean;\n $isDisabled?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n line-height: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n &:hover > div:last-child {\n ${({ $isSelected, $isDisabled }) =>\n !$isSelected &&\n !$isDisabled &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;~~AAAuF~~,SAAAE,~~wBAAAE~~,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAJ~~,uBAAA,YAAAA,~~CAAAE~~,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAShF~~,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA,eAAe,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAKC,+BAAgB,CAACC,MAAM,GAAG,UAAU,GAAG,SAAU;AAC1F;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,IAAI,GAAG,GAAI;AAC9D;AACA;AACA,UAAU,CAAC;EAAEI,WAAW;EAAEJ;AAAY,CAAC,KAC3B,CAACI,WAAW,IACZ,CAACJ,WAAW,IACZ,IAAAK,qBAAG;AACf;AACA,aAAa;AACb;AACA,CAAC;AAEM,MAAMC,2BAA2B,~~GAAAT~~,OAAA,~~CAAAS~~,2BAAA,~~GAAGR~~,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,~~MAAMQ~~,+BAA+B,~~GAAAV~~,OAAA,~~CAAAU~~,+BAAA,~~GAAGT~~,yBAAM,~~CAACU~~,CAAuC;AAC7F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA,CAAC;AAIM,MAAMC,gCAAgC,~~GAAAd~~,OAAA,~~CAAAc~~,gCAAA,~~GAAGb~~,yBAAM,~~CAACU~~,CAAwC;AAC/F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA;AACA,CAAC;AAQM,MAAME,4BAA4B,~~GAAAf~~,OAAA,~~CAAAe~~,4BAAA,~~GAAGd~~,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;~~EAAEc~~;AAAO,CAAC,KAAMA,MAAM,~~KAAKC~~,oCAAqB,CAACC,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF;AACA,MAAM,CAAC;~~EAAEC~~,MAAM;~~EAAEP~~,KAAK;~~EAAEL~~;AAA+C,CAAC,KAChE,CAACA,WAAW,IACZ,IAAAC,qBAAG;AACX;AACA;AACA,~~4BAA4BW~~,MAAM,~~IAAIP~~,KAAK,~~CAACQ~~,QAAQ;AACpD,SAAS;AACT,CAAC;AAQM,MAAMC,sCAAsC,~~GAAArB~~,OAAA,~~CAAAqB~~,sCAAA,GAAG,~~IAAApB~~,yBAAM,~~EACxDqB~~,aAAM,~~CAACpB~~,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEK;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,qBAAqB,CAAC;~~EAAES~~;AAAO,CAAC,KAAMA,MAAM,~~KAAKC~~,oCAAqB,CAACC,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF,wBAAwB,CAAC;~~EAAEC~~,MAAM;~~EAAEP~~;AAA6C,CAAC,~~KACzEO~~,MAAM,~~IAAIP~~,KAAK,~~CAACQ~~,QAAQ;AAChC,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"FilterButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_filterButtons","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilterButtonItem","exports","styled","div","$isDisabled","$size","FilterButtonSize","Normal","$isSelected","css","$shouldShowKeyboardHighlighting","$shape","keyboardFocusHighlightingRingCss","FilterButtonItemShape","Round","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$color","headline","StyledMotionFilterButtonItemBackground","motion"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n $size: FilterButtonSize;\n $shape: FilterButtonItemShape;\n $isSelected: boolean;\n $isDisabled?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n line-height: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n &:hover > div:last-child {\n ${({ $isSelected, $isDisabled }) =>\n !$isSelected &&\n !$isDisabled &&\n css`\n opacity: 0.2;\n `}\n }\n\n ${({ $shouldShowKeyboardHighlighting, $shape }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss};\n border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;\n }\n `}\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grid-image/GridImage.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _GridImage = require("./GridImage.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const GridImage = ({
@@ -12,11 +13,24 @@ const GridImage = ({
   images,
   shouldShowRoundImage,
   size,
-  onClick
+  onClick,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [hasLoadedLeftImage, setHasLoadedLeftImage] = (0, _react.useState)(false);
   const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = (0, _react.useState)(false);
   const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = (0, _react.useState)(false);
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick === null || onClick === void 0 || onClick(event);
+    }
+  }, [isClickable, onClick]);
   const handleLeftImageLoaded = (0, _react.useCallback)(() => setHasLoadedLeftImage(true), []);
   const handleTopRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedTopRightImage(true), []);
   const handleBottomRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedBottomRightImage(true), []);
@@ -24,8 +38,12 @@ const GridImage = ({
   return /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridImage, {
     $background: background,
     $shouldShowRoundImage: shouldShowRoundImage,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $size: size,
-    onClick: typeof onClick === 'function' ? onClick : undefined
+    onClick: isClickable ? onClick : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isClickable ? 'button' : undefined
   }, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,

package/lib/cjs/components/grid-image/GridImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","~~handleLeftImageLoaded~~","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","$background","$shouldShowRoundImage","$size","undefined","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n}) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={~~typeof~~ onClick ~~===~~ ~~'function'~~ ? ~~onClick~~ : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;~~AACA~~,IAAAC,~~UAAA~~,GAAAD,OAAA;AAK4B,SAAAD,~~wBAAAG~~,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAL~~,uBAAA,YAAAA,~~CAAAG~~,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAyB5B~~,MAAMkB,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACnE,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC3E,MAAM,CAACG,yBAAyB,EAAEC,4BAA4B,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EAEjF,MAAMK,~~qBAAqB~~,GAAG,IAAAC,kBAAW,EAAC,~~MAAMP~~,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,~~MAAMQ~~,yBAAyB,GAAG,~~IAAAD~~,kBAAW,EAAC,~~MAAMJ~~,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,~~MAAMM~~,4BAA4B,GAAG,~~IAAAF~~,kBAAW,EAAC,~~MAAMF~~,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,~~MAAMK~~,iBAAiB,GACnB,~~CAACX~~,kBAAkB,IAAI,CAACG,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,~~oBACIlC~~,MAAA,~~CAAAc~~,OAAA,~~CAAA2B~~,aAAA,~~CAACtC~~,UAAA,~~CAAAuC~~,eAAe;IACZC,WAAW,~~EAAEnB~~,UAAW;~~IACxBoB~~,qBAAqB,~~EAAElB~~,oBAAqB;~~IAC5CmB~~,KAAK,~~EAAElB~~,IAAK;IACZC,OAAO,~~EAAE~~,~~OAAOA~~,OAAO,~~KAAK~~,~~UAAU~~,~~GAAGA~~,~~OAAO~~,~~GAAGkB~~;EAAU,~~gBAE7D9C~~,MAAA,~~CAAAc~~,OAAA,~~CAAA2B~~,aAAA,~~CAACtC~~,UAAA,~~CAAA4C~~,mBAAmB;IAChBC,SAAS,~~EAAER~~,iBAAkB;~~IAC7BS~~,MAAM,~~EAAEb~~,qBAAsB;IAC9BS,KAAK,~~EAAElB~~,IAAK;~~IACZuB~~,GAAG,~~EAAEzB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFzB~~,MAAA,~~CAAAc~~,OAAA,~~CAAA2B~~,aAAA,~~CAACtC~~,UAAA,~~CAAAgD~~,uBAAuB;IACpBH,SAAS,~~EAAER~~,iBAAkB;~~IAC7BS~~,MAAM,~~EAAEX~~,yBAA0B;~~IAClCO~~,KAAK,~~EAAElB~~,IAAK;~~IACZuB~~,GAAG,~~EAAEzB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFzB~~,MAAA,~~CAAAc~~,OAAA,~~CAAA2B~~,aAAA,~~CAACtC~~,UAAA,~~CAAAiD~~,0BAA0B;IACvBJ,SAAS,~~EAAER~~,iBAAkB;~~IAC7BS~~,MAAM,~~EAAEV~~,4BAA6B;~~IACrCW~~,GAAG,~~EAAEzB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,~~CAAC8B~~,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAAzC~~,OAAA,GAErBS,SAAS","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_useKeyboardFocusHighlighting","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleKeyDown","useCallback","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","$background","$shouldShowRoundImage","$shouldShowKeyboardHighlighting","$size","undefined","onKeyDown","tabIndex","role","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n SyntheticEvent,\n useCallback,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n /\n size: number;\n /\n Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grid-image/GridImage.styles.js CHANGED Viewed

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
     background: ${({
   $background,
@@ -27,6 +28,14 @@ const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
   $size
 }) => $size}px;
     flex: 0 0 auto;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledGridLeftImage = exports.StyledGridLeftImage = _styledComponents.default.img`
     border-right: ${({

package/lib/cjs/components/grid-image/GridImage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.styles.js","names":["_styledComponents","~~_interopRequireDefault~~","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,~~sBAAA~~,CAAAC,OAAA;~~AAAuC~~,SAAAD,~~uBAAAE~~,CAAA,~~WAAAA~~,CAAA,IAAAA,CAAA,~~CAAAC~~,UAAA,~~GAAAD~~,CAAA,~~KAAAE~~,OAAA,~~EAAAF~~,CAAA;~~AAShC~~,~~MAAMG~~,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA,CAAC;AAOM,MAAMC,mBAAmB,~~GAAAR~~,OAAA,~~CAAAQ~~,mBAAA,~~GAAGP~~,yBAAM,~~CAACQ~~,GAA6B;AACvE,oBAAoB,CAAC;~~EAAEF~~;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;~~EAAEG~~;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,uBAAuB,~~GAAAX~~,OAAA,~~CAAAW~~,uBAAA,~~GAAGV~~,yBAAM,~~CAACQ~~,GAAiC;AAC/E,qBAAqB,CAAC;~~EAAEF~~;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;~~EAAEG~~;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAME,0BAA0B,~~GAAAZ~~,OAAA,~~CAAAY~~,0BAAA,~~GAAGX~~,yBAAM,~~CAACQ~~,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingRingCss","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grouped-image/GroupedImage.js CHANGED Viewed

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _GroupedImage = require("./GroupedImage.styles");
 var _CareOfClipPath = _interopRequireDefault(require("./clip-paths/CareOfClipPath"));
 var _uuid = require("../../hooks/uuid");
 var _SecondImageClipPath = _interopRequireDefault(require("./clip-paths/SecondImageClipPath"));
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const GroupedImage = ({
   cornerImage,
   height = 40,
@@ -19,12 +21,25 @@ const GroupedImage = ({
   shouldPreventBackground = false,
   shouldShowRoundImage = false,
   cornerElement,
-  onImageError
+  onImageError,
+  shouldEnableKeyboardHighlighting
 }) => {
   const hasCornerImage = Boolean(cornerImage);
   const hasCornerElement = Boolean(cornerElement);
   const hasMultipleImages = images.length > 1;
   const uuid = (0, _uuid.useUuid)();
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick === null || onClick === void 0 || onClick(event);
+    }
+  }, [isClickable, onClick]);
   const imageElements = images.slice(0, 2).map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupImageElement, {
     $background: imageBackground,
     $isSecondImage: index === 1,
@@ -51,8 +66,12 @@ const GroupedImage = ({
     onError: event => typeof onImageError === 'function' && onImageError(event, index)
   })))));
   return /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupedImage, {
-    onClick: onClick,
-    $height: height
+    onClick: isClickable ? onClick : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isClickable ? 'button' : undefined,
+    $height: height,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, hasCornerImage && /*#__PURE__*/_react.default.createElement(_CareOfClipPath.default, {
     height: height,
     uuid: uuid,

package/lib/cjs/components/grouped-image/GroupedImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireDefault","require","_GroupedImage","_CareOfClipPath","_uuid","_SecondImageClipPath","e","__esModule","default","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","useUuid","imageElements","slice","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","StyledGroupedImage","$height","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n}\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={src}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImage}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","_CareOfClipPath","_interopRequireDefault","_uuid","_SecondImageClipPath","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","shouldEnableKeyboardHighlighting","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","useUuid","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleKeyDown","useCallback","event","key","preventDefault","imageElements","slice","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","width","viewBox","xmlns","preserveAspectRatio","alt","onError","StyledGroupedImage","undefined","onKeyDown","tabIndex","role","$height","$shouldShowKeyboardHighlighting","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n useCallback,\n} from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Enables keyboard-only focus highlighting for clickable grouped images.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n shouldEnableKeyboardHighlighting,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={src}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n $height={height}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImage}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grouped-image/GroupedImage.styles.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledGroupedImage = exports.StyledGroupImageElement = exports.StyledCornerImage = exports.StyledCornerElement = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.default.div`
     flex: 0 0 auto;
@@ -15,6 +16,14 @@ const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.defaul
     width: ${({
   $height
 }) => $height}px;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.div.attrs(({
   $isSecondImage,

package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","~~css","~~$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n position: relative;\n width: ${({ $height }) => $height}px;\n`;\n\ntype StyledImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $isSecondImage?: boolean;\n $shouldPreventBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n $hasCornerImage: boolean;\n $hasMultipleImages: boolean;\n $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n let clipPath: string \| undefined;\n if (\n ($isSecondImage && $hasCornerImage) \|\|\n (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n ) {\n clipPath = `url(#care-of-mask--${$uuid})`;\n } else if (!$isSecondImage && $hasMultipleImages) {\n clipPath = `url(#second-image-mask--${$uuid})`;\n }\n\n return {\n style: {\n clipPath,\n },\n };\n },\n)`\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n position: absolute;\n overflow: hidden;\n\n ${({ $hasMultipleImages, $isSecondImage }) => {\n if (!$hasMultipleImages) {\n return css`\n height: 100%;\n `;\n }\n\n if ($isSecondImage) {\n return css`\n height: 80%;\n `;\n }\n\n return css`\n height: 76%;\n `;\n }}\n\n ${({ $isSecondImage }) =>\n $isSecondImage\n ? css`\n bottom: 0;\n right: 0;\n `\n : css`\n top: 0;\n left: 0;\n `}\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldPreventBackground?: boolean;\n $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n aspect-ratio: 1;\n bottom: 0;\n height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n position: absolute;\n right: 0;\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\nexport const StyledCornerElement = styled.span`\n height: 18px;\n width: 18px;\n position: absolute;\n bottom: 0;\n right: -5px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n max-height: 100%;\n max-width: 100%;\n display: block;\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;~~AAAgD~~,SAAAD,~~wBAAAE~~,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAJ~~,uBAAA,YAAAA,~~CAAAE~~,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAQzC~~,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAYM,MAAMC,uBAAuB,~~GAAAJ~~,OAAA,~~CAAAI~~,uBAAA,~~GAAGH~~,yBAAM,CAACC,GAAG,~~CAACG~~,KAAK,CACnD,CAAC;EAAEC,cAAc;EAAEC,kBAAkB;EAAEC,eAAe;EAAEC;AAAM,CAAC,KAAK;EAChE,IAAIC,QAA4B;EAChC,IACKJ,cAAc,IAAIE,eAAe,IACjC,CAACF,cAAc,IAAI,CAACC,kBAAkB,IAAIC,eAAgB,EAC7D;IACEE,QAAQ,GAAG,sBAAsBD,KAAK,GAAG;EAC7C,CAAC,MAAM,IAAI,CAACH,cAAc,IAAIC,kBAAkB,EAAE;IAC9CG,QAAQ,GAAG,2BAA2BD,KAAK,GAAG;EAClD;EAEA,OAAO;IACHE,KAAK,EAAE;MACHD;IACJ;EACJ,CAAC;AACL,CACJ,CAAC;AACD;AACA,qBAAqB,CAAC;EAAEE;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF;AACA;AACA;AACA,MAAM,CAAC;EAAEL,kBAAkB;EAAED;AAAe,CAAC,KAAK;EAC1C,IAAI,CAACC,kBAAkB,EAAE;IACrB,OAAO,~~IAAAM~~,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,~~IAAIP~~,cAAc,EAAE;IAChB,OAAO,~~IAAAO~~,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;~~EAAEP~~;AAAe,CAAC,KACjBA,cAAc,GACR,~~IAAAO~~,qBAAG;AACjB;AACA;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;~~EAAEC~~,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzB,~~IAAAF~~,qBAAG;AACX,~~0BAA0BC~~,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,iBAAiB,~~GAAAjB~~,OAAA,~~CAAAiB~~,iBAAA,~~GAAGhB~~,yBAAM,~~CAACiB~~,GAA2B;AACnE;AACA;AACA,cAAc,CAAC;~~EAAEX~~;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,KAAK,GAAG,KAAM;AAC9E;AACA;AACA;AACA,MAAM,CAAC;~~EAAEO~~,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzB,~~IAAAF~~,qBAAG;AACX,~~0BAA0BC~~,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAEM,MAAMG,mBAAmB,~~GAAAnB~~,OAAA,~~CAAAmB~~,mBAAA,~~GAAGlB~~,yBAAM,~~CAACmB~~,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingRingCss","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledGroupedImageProps = WithTheme<{\n $height: CSSProperties['height'];\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n position: relative;\n width: ${({ $height }) => $height}px;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $isSecondImage?: boolean;\n $shouldPreventBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n $hasCornerImage: boolean;\n $hasMultipleImages: boolean;\n $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n let clipPath: string \| undefined;\n if (\n ($isSecondImage && $hasCornerImage) \|\|\n (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n ) {\n clipPath = `url(#care-of-mask--${$uuid})`;\n } else if (!$isSecondImage && $hasMultipleImages) {\n clipPath = `url(#second-image-mask--${$uuid})`;\n }\n\n return {\n style: {\n clipPath,\n },\n };\n },\n)`\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n position: absolute;\n overflow: hidden;\n\n ${({ $hasMultipleImages, $isSecondImage }) => {\n if (!$hasMultipleImages) {\n return css`\n height: 100%;\n `;\n }\n\n if ($isSecondImage) {\n return css`\n height: 80%;\n `;\n }\n\n return css`\n height: 76%;\n `;\n }}\n\n ${({ $isSecondImage }) =>\n $isSecondImage\n ? css`\n bottom: 0;\n right: 0;\n `\n : css`\n top: 0;\n left: 0;\n `}\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldPreventBackground?: boolean;\n $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n aspect-ratio: 1;\n bottom: 0;\n height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n position: absolute;\n right: 0;\n\n ${({ $background, $shouldPreventBackground, theme }) =>\n !$shouldPreventBackground &&\n css`\n background: ${$background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\nexport const StyledCornerElement = styled.span`\n height: 18px;\n width: 18px;\n position: absolute;\n bottom: 0;\n right: -5px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n max-height: 100%;\n max-width: 100%;\n display: block;\n }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/highlight-slider/HighlightSlider.js CHANGED Viewed

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _HighlightSlider = require("./HighlightSlider.styles");
 var _HighlightSliderItem = _interopRequireDefault(require("./highlight-slider-item/HighlightSliderItem"));
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const DEFAULT_HIGHLIGHT_SLIDER_COLORS = {
@@ -18,8 +19,11 @@ const HighlightSlider = ({
   colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,
   onIndexChange,
   currentIndex,
-  duration = 10
+  duration = 10,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const isInteractive = typeof onIndexChange === 'function';
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && isInteractive);
   const handleFinish = (0, _react.useCallback)(index => {
     if (typeof onIndexChange === 'function') {
       onIndexChange(index >= count - 1 ? 0 : index + 1);
@@ -40,8 +44,11 @@ const HighlightSlider = ({
     isActive: currentIndex === index,
     isFinished: currentIndex > index,
     onClick: handleClick,
-    onFinish: handleFinish
-  })), [colors, count, currentIndex, duration, handleClick, handleFinish]);
+    onFinish: handleFinish,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    isInteractive: isInteractive
+  })), [colors, count, currentIndex, duration, handleClick, handleFinish, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting, isInteractive]);
   return /*#__PURE__*/_react.default.createElement(_HighlightSlider.StyledHighlightSlider, null, content);
 };
 HighlightSlider.displayName = 'HighlightSlider';

package/lib/cjs/components/highlight-slider/HighlightSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HighlightSlider.js","names":["_react","_interopRequireWildcard","require","_HighlightSlider","_HighlightSliderItem","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","handleFinish","useCallback","index","handleClick","content","useMemo","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","StyledHighlightSlider","displayName","_default","exports"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n backgroundColor: '#E0E0E0',\n fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n /*\n The Colors of the slider.\n /\n colors?: HighlightSliderItemColors;\n /\n The total number of sections, that should be displayed.\n /\n count: number;\n /\n The current index.\n /\n currentIndex: number;\n /\n The duration of the animation of a single item in seconds.\n /\n duration?: number;\n /\n Function to be executed if the index has changed.\n */\n onIndexChange?: (index: number) => void;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n count,\n colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n onIndexChange,\n currentIndex,\n duration = 10,\n}) => {\n const handleFinish = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index >= count - 1 ? 0 : index + 1);\n }\n },\n [count, onIndexChange],\n );\n\n const handleClick = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index);\n }\n },\n [onIndexChange],\n );\n\n const content = useMemo(\n () =>\n Array.from({ length: count }).map((value, index) => (\n <HighlightSliderItem\n key={`highlight-slider-item--${value as number}`}\n index={index}\n duration={duration}\n colors={colors}\n isActive={currentIndex === index}\n isFinished={currentIndex > index}\n onClick={handleClick}\n onFinish={handleFinish}\n />\n )),\n [colors, count, currentIndex, duration, handleClick, handleFinish],\n );\n\n return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAC,sBAAA,CAAAH,OAAA;~~AAEqD~~,SAAAG,~~uBAAAC~~,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,~~SAAAL~~,~~wBAAAK~~,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAT~~,uBAAA,YAAAA,~~CAAAK~~,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;~~AAErD~~,MAAMgB,+BAA0D,GAAG;EAC/DC,eAAe,EAAE,SAAS;EAC1BC,SAAS,EAAE;AACf,CAAC;~~AAyBD~~,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,MAAM,GAAGL,+BAA+B;EACxCM,aAAa;EACbC,YAAY;EACZC,QAAQ,GAAG;~~AACf~~,CAAC,KAAK;EACF,MAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC3BC,KAAa,IAAK;IACf,IAAI,~~OAAOL~~,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,~~CAACK~~,KAAK,~~IAAIP~~,KAAK,GAAG,CAAC,GAAG,CAAC,~~GAAGO~~,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,~~CAACP~~,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,~~MAAMM~~,WAAW,GAAG,IAAAF,kBAAW,EAC1BC,KAAa,IAAK;IACf,IAAI,~~OAAOL~~,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,~~CAACK~~,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,~~CAACL~~,aAAa,CAClB,CAAC;EAED,~~MAAMO~~,OAAO,GAAG,IAAAC,cAAO,EACnB,MACIC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,~~EAAEb~~;EAAM,CAAC,CAAC,~~CAACc~~,GAAG,CAAC,CAACC,KAAK,EAAER,KAAK,~~kBAC3CpC~~,MAAA,~~CAAAQ~~,OAAA,~~CAAAqC~~,aAAA,~~CAACzC~~,oBAAA,~~CAAAI~~,OAAmB;~~IAChBsC~~,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDR,KAAK,EAAEA,KAAM;~~IACbH~~,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;~~IACfiB~~,QAAQ,~~EAAEf~~,YAAY,~~KAAKI~~,KAAM;IACjCY,UAAU,~~EAAEhB~~,YAAY,~~GAAGI~~,KAAM;IACjCa,OAAO,EAAEZ,WAAY;IACrBa,QAAQ,EAAEhB;~~EAAa~~,~~CAC1B~~,CACJ,CAAC,EACN,~~CAACJ~~,MAAM,~~EAAED~~,KAAK,~~EAAEG~~,YAAY,~~EAAEC~~,QAAQ,~~EAAEI~~,WAAW,~~EAAEH~~,YAAY,~~CACrE~~,CAAC;EAED,~~oBAAOlC~~,MAAA,~~CAAAQ~~,OAAA,~~CAAAqC~~,aAAA,~~CAAC1C~~,gBAAA,~~CAAAgD~~,qBAAqB,QAAEb,OAA+B,CAAC;AACnE,CAAC;~~AAEDV~~,eAAe,~~CAACwB~~,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAA9C~~,OAAA,GAEjCoB,eAAe","ignoreList":[]}
1	+ {"version":3,"file":"HighlightSlider.js","names":["_react","_interopRequireWildcard","require","_HighlightSlider","_HighlightSliderItem","_interopRequireDefault","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","shouldEnableKeyboardHighlighting","isInteractive","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleFinish","useCallback","index","handleClick","content","useMemo","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","StyledHighlightSlider","displayName","_default","exports"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n backgroundColor: '#E0E0E0',\n fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n /*\n The Colors of the slider.\n /\n colors?: HighlightSliderItemColors;\n /\n The total number of sections, that should be displayed.\n /\n count: number;\n /\n The current index.\n /\n currentIndex: number;\n /\n The duration of the animation of a single item in seconds.\n /\n duration?: number;\n /\n Function to be executed if the index has changed.\n /\n onIndexChange?: (index: number) => void;\n /\n Enables keyboard-only focus highlighting for interactive slider items.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n count,\n colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n onIndexChange,\n currentIndex,\n duration = 10,\n shouldEnableKeyboardHighlighting,\n}) => {\n const isInteractive = typeof onIndexChange === 'function';\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && isInteractive,\n );\n\n const handleFinish = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index >= count - 1 ? 0 : index + 1);\n }\n },\n [count, onIndexChange],\n );\n\n const handleClick = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index);\n }\n },\n [onIndexChange],\n );\n\n const content = useMemo(\n () =>\n Array.from({ length: count }).map((value, index) => (\n <HighlightSliderItem\n key={`highlight-slider-item--${value as number}`}\n index={index}\n duration={duration}\n colors={colors}\n isActive={currentIndex === index}\n isFinished={currentIndex > index}\n onClick={handleClick}\n onFinish={handleFinish}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n isInteractive={isInteractive}\n />\n )),\n [\n colors,\n count,\n currentIndex,\n duration,\n handleClick,\n handleFinish,\n shouldEnableKeyboardHighlighting,\n shouldShowKeyboardHighlighting,\n isInteractive,\n ],\n );\n\n return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js CHANGED Viewed

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _HighlightSliderItem = require("./HighlightSliderItem.styles");
 var _ProgressBar = require("../../progress-bar/ProgressBar.styles");
 var _uuid = require("../../../hooks/uuid");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const HighlightSliderItem = ({
   colors,
   isActive,
@@ -16,11 +16,28 @@ const HighlightSliderItem = ({
   onFinish,
   index,
   onClick,
-  duration
+  duration,
+  isInteractive,
+  shouldEnableKeyboardHighlighting,
+  shouldShowKeyboardHighlighting = false
 }) => {
   const uuid = (0, _uuid.useUuid)();
+  const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (!isInteractive) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick(index);
+    }
+  }, [index, isInteractive, onClick]);
   return /*#__PURE__*/_react.default.createElement(_HighlightSliderItem.StyledHighlightSliderItem, {
-    onClick: () => onClick(index)
+    onClick: isInteractive ? () => onClick(index) : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isInteractive ? 'button' : undefined,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, isActive && /*#__PURE__*/_react.default.createElement(_HighlightSliderItem.StyledHighlightSliderItemProgress, {
     key: `highlight-slider-item-active--${uuid}`,
     initial: {

package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HighlightSliderItem.js","names":["_react","~~_interopRequireDefault~~","require","_HighlightSliderItem","_ProgressBar","_uuid","e","__esModule","default","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","uuid","useUuid","createElement","StyledHighlightSliderItem","~~StyledProgressBarProgressWrapper~~","~~StyledHighlightSliderItemProgress~~","~~key~~","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","StyledHighlightSliderItemBackground","backgroundColor","displayName","_default","exports"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n StyledHighlightSliderItem,\n StyledHighlightSliderItemBackground,\n StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n backgroundColor: string;\n fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n index: number;\n isActive: boolean;\n isFinished: boolean;\n onClick: (index: number) => void;\n onFinish: (index: number) => void;\n duration: number;\n colors: HighlightSliderItemColors;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n colors,\n isActive,\n isFinished,\n onFinish,\n index,\n onClick,\n duration,\n}) => {\n const uuid = useUuid();\n\n return (\n <StyledHighlightSliderItem onClick={() => onClick(index)}>\n <StyledProgressBarProgressWrapper>\n {isActive && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-active--${uuid}`}\n initial={{ width: '100%', left: '-100%' }}\n animate={{ width: '100%', left: '0%' }}\n exit={{ width: '100%', left: '0%' }}\n onAnimationComplete={() => onFinish(index)}\n $backgroundColor={colors.fillColor}\n transition={{\n ease: 'linear',\n duration,\n }}\n />\n )}\n {isFinished && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-finished--${uuid}`}\n style={{ width: '100%', left: '0%' }}\n $backgroundColor={colors.fillColor}\n />\n )}\n <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </StyledHighlightSliderItem>\n );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,~~sBAAA~~,CAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAA8C,SAAAD,~~uBAAAK~~,CAAA,~~WAAAA~~,CAAA,IAAAA,CAAA,~~CAAAC~~,UAAA,~~GAAAD~~,CAAA,~~KAAAE~~,OAAA,~~EAAAF~~,CAAA;~~AAiB9C~~,~~MAAMG~~,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC;~~AACJ~~,CAAC,KAAK;EACF,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;~~EAEtB~~,~~oBACIlB~~,MAAA,~~CAAAQ~~,OAAA,~~CAAAW~~,aAAA,~~CAAChB~~,oBAAA,~~CAAAiB~~,yBAAyB;~~IAACL~~,OAAO,~~EAAEA~~,~~CAAA~~,~~KAAMA~~,OAAO,CAACD,KAAK;~~EAAE~~,~~gBACrDd~~,MAAA,~~CAAAQ~~,OAAA,~~CAAAW~~,aAAA,~~CAACf~~,YAAA,~~CAAAiB~~,gCAAgC,~~QAC5BV~~,QAAQ,~~iBACLX~~,MAAA,~~CAAAQ~~,OAAA,~~CAAAW~~,aAAA,~~CAAChB~~,oBAAA,~~CAAAmB~~,iCAAiC;~~IAC9BC~~,GAAG,EAAE,iCAAiCN,IAAI,EAAG;~~IAC7CO~~,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,~~KAAMhB~~,QAAQ,CAACC,KAAK,CAAE;~~IAC3CgB~~,gBAAgB,~~EAAEpB~~,MAAM,~~CAACqB~~,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;~~MACdjB~~;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,~~iBACPZ~~,MAAA,~~CAAAQ~~,OAAA,~~CAAAW~~,aAAA,~~CAAChB~~,oBAAA,~~CAAAmB~~,iCAAiC;~~IAC9BC~~,GAAG,EAAE,mCAAmCN,IAAI,EAAG;IAC/~~CiB~~,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,~~EAAEpB~~,MAAM,~~CAACqB~~;EAAU,CACtC,CACJ,~~eACD/B~~,MAAA,~~CAAAQ~~,OAAA,~~CAAAW~~,aAAA,~~CAAChB~~,oBAAA,~~CAAAgC~~,mCAAmC;IAACL,gBAAgB,~~EAAEpB~~,MAAM,~~CAAC0B~~;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;~~AAED3B~~,mBAAmB,~~CAAC4B~~,WAAW,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAA/B~~,OAAA,~~GAEzCC~~,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"HighlightSliderItem.js","names":["_react","_interopRequireWildcard","require","_HighlightSliderItem","_ProgressBar","_uuid","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","isInteractive","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","uuid","useUuid","isKeyboardFocusable","handleKeyDown","useCallback","event","key","preventDefault","createElement","StyledHighlightSliderItem","undefined","onKeyDown","tabIndex","role","$shouldShowKeyboardHighlighting","StyledProgressBarProgressWrapper","StyledHighlightSliderItemProgress","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","StyledHighlightSliderItemBackground","backgroundColor","displayName","_default","exports"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback } from 'react';\nimport {\n StyledHighlightSliderItem,\n StyledHighlightSliderItemBackground,\n StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n backgroundColor: string;\n fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n index: number;\n isActive: boolean;\n isFinished: boolean;\n onClick: (index: number) => void;\n onFinish: (index: number) => void;\n duration: number;\n colors: HighlightSliderItemColors;\n isInteractive: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n shouldShowKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n colors,\n isActive,\n isFinished,\n onFinish,\n index,\n onClick,\n duration,\n isInteractive,\n shouldEnableKeyboardHighlighting,\n shouldShowKeyboardHighlighting = false,\n}) => {\n const uuid = useUuid();\n const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isInteractive) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick(index);\n }\n },\n [index, isInteractive, onClick],\n );\n\n return (\n <StyledHighlightSliderItem\n onClick={isInteractive ? () => onClick(index) : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isInteractive ? 'button' : undefined}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledProgressBarProgressWrapper>\n {isActive && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-active--${uuid}`}\n initial={{ width: '100%', left: '-100%' }}\n animate={{ width: '100%', left: '0%' }}\n exit={{ width: '100%', left: '0%' }}\n onAnimationComplete={() => onFinish(index)}\n $backgroundColor={colors.fillColor}\n transition={{\n ease: 'linear',\n duration,\n }}\n />\n )}\n {isFinished && (\n <StyledHighlightSliderItemProgress\n key={`highlight-slider-item-finished--${uuid}`}\n style={{ width: '100%', left: '0%' }}\n $backgroundColor={colors.fillColor}\n />\n )}\n <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </StyledHighlightSliderItem>\n );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js CHANGED Viewed

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledHighlightSliderItemProgress = exports.StyledHighlightSliderItemBackground = exports.StyledHighlightSliderItem = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = require("motion/react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _keyboardFocusHighlighting = require("../../../utils/keyboardFocusHighlighting.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledHighlightSliderItem = exports.StyledHighlightSliderItem = _styledComponents.default.div`
     overflow: hidden;
     position: relative;
@@ -14,6 +15,14 @@ const StyledHighlightSliderItem = exports.StyledHighlightSliderItem = _styledCom
     height: 4px;
     border-radius: 4px;
     cursor: pointer;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledHighlightSliderItemProgress = exports.StyledHighlightSliderItemProgress = (0, _styledComponents.default)(_react.motion.div)`
     height: 4px;

package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HighlightSliderItem.styles.js","names":["_styledComponents","~~_interopRequireDefault~~","require","_react","e","__esModule","default","StyledHighlightSliderItem","exports","styled","div","StyledHighlightSliderItemProgress","motion","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledHighlightSliderItem = styled.div`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 4px;\n border-radius: 4px;\n cursor: pointer;\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n height: 4px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n height: 4px;\n width: 100%;\n border-radius: 2px;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n $backgroundColor};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,~~sBAAA~~,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;~~AAAsC~~,SAAAD,~~uBAAAG~~,CAAA,~~WAAAA~~,CAAA,IAAAA,CAAA,~~CAAAC~~,UAAA,~~GAAAD~~,CAAA,~~KAAAE~~,OAAA,~~EAAAF~~,CAAA;~~AAG/B~~,~~MAAMG~~,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,~~GAAG~~;~~AACnD~~;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAGM,MAAMC,iCAAiC,~~GAAAH~~,OAAA,~~CAAAG~~,iCAAA,GAAG,~~IAAAF~~,yBAAM,~~EACnDG~~,aAAM,~~CAACF~~,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;~~EAAEG~~;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAIM,MAAMC,mCAAmC,~~GAAAN~~,OAAA,~~CAAAM~~,mCAAA,GAAG,~~IAAAL~~,yBAAM,~~EACrDG~~,aAAM,~~CAACF~~,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;~~EAAEG~~;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"HighlightSliderItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledHighlightSliderItem","exports","styled","div","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingRingCss","StyledHighlightSliderItemProgress","motion","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledHighlightSliderItemProps = {\n $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledHighlightSliderItem = styled.div<StyledHighlightSliderItemProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 4px;\n border-radius: 4px;\n cursor: pointer;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n height: 4px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n height: 4px;\n width: 100%;\n border-radius: 2px;\n background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n $backgroundColor};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,0BAAA,GAAAF,OAAA;AAAmG,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAM5F,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,GAAmC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAC,qBAAG;AACX;AACA,kBAAkBC,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAGM,MAAMC,iCAAiC,GAAAN,OAAA,CAAAM,iCAAA,GAAG,IAAAL,yBAAM,EACnDM,aAAM,CAACL,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEM;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAIM,MAAMC,mCAAmC,GAAAT,OAAA,CAAAS,mCAAA,GAAG,IAAAR,yBAAM,EACrDM,aAAM,CAACL,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEM;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}