@skodaflow/web-library 7.15.0 → 7.16.0

package/components/carousel/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/carousel/pagination.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo, useState, useRef } from 'react';\nimport { Box, BoxProps, Button, ButtonProps, Slider, SliderProps, LinearProgressProps, CSSObject } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { SliderContainer } from '@/src/materialui/slider/sliderContainer';\n\nexport interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' | 'position'> {\n  /**\n   * Carousel instance from useCarousel hook\n   */\n  carousel: CarouselInstance;\n}\nexport interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {\n  variant?: 'dots';\n  /**\n   * Properties applied to wrapper of dots\n   */\n  dotsWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to each dot\n   */\n  dotProps?: BoxProps<ElementType>;\n}\nexport interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {\n  variant?: 'fraction';\n  /**\n   * Properties applied to button used to render text\n   */\n  buttonProps?: ButtonProps;\n}\nexport interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {\n  variant?: 'lines';\n  /**\n   * Properties applied to each line\n   */\n  linesProps?: ButtonProps;\n  /**\n   * Show progress in active line instead\n   */\n  lineProgress?: number;\n  /**\n   * Properties applied to active line progress\n   */\n  lineProgressProps?: BoxProps<ElementType>;\n}\n/**\n * @deprecated use `slider` variant instead\n */\nexport interface CarouselPaginationProgressProps extends CarouselPaginationVariantProps {\n  variant?: 'progress';\n  /**\n   * @deprecated\n   */\n  progressProps?: LinearProgressProps;\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {\n  variant?: 'slider';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {\n  variant?: 'scrollbar';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationBaseProps {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Append style to wrapper box to change position of control\n   * @default outside\n   */\n  position?: 'outside' | 'inside';\n}\nexport type CarouselPaginationProps = CarouselPaginationBaseProps &\n  (\n    | Omit<CarouselPaginationDotsProps, 'carousel'>\n    | Omit<CarouselPaginationFractionProps, 'carousel'>\n    | Omit<CarouselPaginationLinesProps, 'carousel'>\n    | Omit<CarouselPaginationProgressProps, 'carousel'>\n    | Omit<CarouselPaginationSliderProps, 'carousel'>\n    | Omit<CarouselPaginationScrollbarProps, 'carousel'>\n  );\n\n/**\n * Pagination controls\n */\nexport const CarouselPagination: React.FC<CarouselPaginationProps> = forwardRef(\n  ({ carousel: carouselProp, position, variant, sx: rawSx, ...rest }, ref) => {\n    const carouselHook = useCarousel();\n    const carousel = carouselProp || carouselHook;\n    // decide on component used\n    const VariantComponent = useMemo(() => {\n      switch (variant) {\n        case 'scrollbar':\n          return ScrollbarVariant;\n        case 'slider':\n        case 'progress':\n          return SliderVariant;\n        case 'fraction':\n          return FractionVariant;\n        case 'lines':\n          return LinesVariant;\n        case 'dots':\n          return DotsVariant;\n        default:\n          return DotsVariant;\n      }\n    }, [variant]);\n    // position extra styling applied to wrapper\n    const sx = useMemo<CSSObject | BoxProps['sx']>(() => {\n      if (position === 'inside') {\n        return {\n          position: 'absolute',\n          zIndex: '90',\n          bottom: '0',\n          left: '0',\n          right: '0',\n          ...rawSx,\n        };\n      } else {\n        return rawSx;\n      }\n    }, [position, JSON.stringify(rawSx)]);\n\n    return <VariantComponent carousel={carousel} sx={sx} ref={ref} position={position} {...rest} />;\n  },\n);\n\n/**\n * Dots variant (...)\n */\nexport const DotsVariant: React.FC<CarouselPaginationDotsProps> = forwardRef(\n  ({ carousel, dotsWrapperProps, dotProps, position, sx, ...rest }, ref) => {\n    const { sx: dotsWrapperSx, ...restDotsWrapper } = dotsWrapperProps ?? {};\n    const { sx: dotSx, ...restDot } = dotProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          p: 2,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            borderRadius: '1000px',\n            py: 0.5,\n            px: 1,\n            gap: 0.5,\n            // ensure width does not change during transition\n            //  dots width space + gap space + extra active dot space + padding\n            width: `${(carousel?.slides.length || 0) * 12 + ((carousel?.slides.length || 1) - 1) * 4 + 4 + 16}px`,\n            // on image variant from Figma\n            ...(position === 'inside' && {\n              backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'surface.primary' : 'transparent.backdrop'),\n            }),\n            ...dotsWrapperSx,\n          }}\n          {...restDotsWrapper}\n        >\n          {[...Array(carousel?.slides.length || 0)].map((_, idx) => (\n            <Box\n              key={idx}\n              className={\n                !carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1\n                  ? 'active'\n                  : (!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex\n                    ? 'active'\n                    : undefined\n              }\n              sx={{\n                p: '0',\n                width: '12px',\n                height: '12px',\n                // scale to 8px\n                transform: 'scale(0.6667)',\n                borderRadius: '100%',\n                backgroundColor: 'onSurface.os500',\n                transition: 'transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out',\n                '&.active': {\n                  transform: 'scale(1)',\n                  backgroundColor: 'text.primary',\n                  margin: '0 2px',\n                },\n                ...dotSx,\n              }}\n              {...restDot}\n            />\n          ))}\n        </Box>\n      </Box>\n    );\n  },\n);\n\n/**\n * Fraction variant (text 1/3)\n */\nexport const FractionVariant: React.FC<CarouselPaginationFractionProps> = forwardRef(\n  ({ carousel, buttonProps, position, sx, ...rest }, ref) => {\n    const { sx: buttonSx, ...restButton } = buttonProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Button\n          variant=\"text\"\n          aria-controls=\"carousel\"\n          sx={{\n            px: 2,\n            py: 0.25,\n            borderRadius: '4px',\n            // custom typography according to Figma (Pagination/Compact)\n            fontSize: '18px',\n            lineHeight: '28px',\n            letterSpacing: '0.02em',\n            ...getInteractiveStyle(\n              {\n                backgroundColor: 'transparent.backdrop',\n              },\n              {\n                backgroundColor: 'onSurface.os100',\n              },\n            ),\n            ...buttonSx,\n          }}\n          onClick={() =>\n            // at the end, slide to beginning\n            carousel?.isEnd && !carousel.originalParams.loop ? carousel?.slideTo(0) : carousel?.slideNext()\n          }\n          {...restButton}\n        >\n          <Box component=\"span\">\n            <Box component=\"span\" sx={{ fontWeight: '700', color: 'onSurface.os900' }}>\n              {`${(carousel?.realIndex || 0) + 1}`}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '400', mx: 0.5 }}>\n              {' / '}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '300' }}>\n              {`${carousel?.slides.length || 0}`}\n            </Box>\n          </Box>\n        </Button>\n      </Box>\n    );\n  },\n);\n\n/**\n * Lines variant (- - -)\n */\nexport const LinesVariant: React.FC<CarouselPaginationLinesProps> = forwardRef(\n  ({ carousel, sx, linesProps, lineProgress, lineProgressProps, position, ...rest }, ref) => {\n    const { sx: lineSx, ...lineRest } = linesProps ?? {};\n    const { sx: lineProgressSx, ...lineProgressRest } = lineProgressProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: { xs: 'stretch', md: 'center' },\n          flexGrow: { xs: '1', md: 0 },\n          gap: 1,\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {[...Array(carousel?.slides.length || 0)].map((_, idx) => {\n          const active =\n            (!carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1) ||\n            ((!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex);\n          const seen = idx <= (carousel?.realIndex || 0);\n\n          return (\n            <Button\n              key={idx}\n              color=\"inherit\"\n              className={active ? 'active' : undefined}\n              sx={{\n                p: 0,\n                minHeight: '0',\n                height: active || seen ? '8px' : '4px',\n                borderRadius: active || seen ? '4px' : '2px',\n                width: { xs: '100%', md: '56px' },\n                justifyContent: 'flex-start',\n                ...getInteractiveStyle(\n                  {\n                    backgroundColor: 'surface.primary',\n                    '& .progress-line': {\n                      backgroundColor: 'brand.secondary',\n                    },\n                  },\n                  {\n                    backgroundColor: 'surface.secondary',\n                    '& .progress-line': {\n                      backgroundColor: 'brandHover.secondary',\n                    },\n                  },\n                ),\n                ...lineSx,\n              }}\n              aria-controls=\"carousel\"\n              onClick={() => carousel?.[carousel.originalParams.loop ? 'slideToLoop' : 'slideTo'](idx)}\n              {...lineRest}\n            >\n              <Box\n                sx={{\n                  // invisible hitbox expanding clickable area\n                  position: 'absolute',\n                  top: '50%',\n                  left: '0',\n                  right: '0',\n                  height: '24px', // Minimum a11y click area\n                  transform: 'translateY(-50%)',\n                  pointerEvents: 'auto',\n                }}\n              />\n              <Box sx={{ borderRadius: '4px', height: '100%', width: '100%', overflow: 'hidden' }}>\n                <Box\n                  className=\"progress-line\"\n                  role={active ? 'progress' : undefined} // Only the active one gets a role\n                  aria-valuenow={active ? lineProgress : undefined}\n                  aria-valuemin={0}\n                  aria-valuemax={100}\n                  sx={{\n                    opacity: lineProgress !== undefined || seen ? '1' : '0',\n                    width: '100%',\n                    backgroundColor: 'brand.secondary',\n                    height: '100%',\n                    transformOrigin: 'left',\n                    transform: `scaleX(${lineProgress !== undefined && active ? lineProgress / 100 : seen ? 1 : 0})`,\n                    transition: `${lineProgress !== undefined ? 'transform 300ms ease-in-out, ' : ''}opacity 300ms ease-out, background-color 300ms ease-out`,\n                    ...lineProgressSx,\n                  }}\n                  {...lineProgressRest}\n                />\n              </Box>\n            </Button>\n          );\n        })}\n      </Box>\n    );\n  },\n);\n\n/**\n * Slider variant (___)\n */\nexport const SliderVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, sx, progressProps: __, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // slider current value that might not match carousel progress\n    const [value, setValue] = useState<number>(Math.round((carousel?.progress || 0) * 100));\n    // watch user manipulating slider\n    const dragging = useRef<boolean>(false);\n    const [, setRerender] = useState({});\n    // monitor carousel progress to update slider value\n    useEffect(() => {\n      if (!dragging.current) {\n        setValue(Math.round((carousel?.progress || 0) * 100));\n      }\n    }, [carousel?.progress]);\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleMove = () => {\n          if (!dragging.current) {\n            setRerender({});\n          }\n        };\n\n        // monitor of movement to immediately move thumb\n        carousel.on('sliderMove', handleMove);\n\n        return () => {\n          carousel.off('sliderMove', handleMove);\n        };\n      }\n    }, [carousel]);\n\n    return (\n      <Box sx={{ my: 2, ...sx }} ref={ref} {...rest}>\n        <Slider\n          value={value}\n          min={0}\n          max={100}\n          onChange={(_, newValue: number) => {\n            // prevent value updates from carousel progress\n            dragging.current = true;\n            // smoothly move carousel\n            carousel?.setProgress(newValue / 100, 150);\n            // update slider value\n            setValue(newValue);\n          }}\n          onChangeCommitted={() => {\n            // make sure to slide to correct position after user stop touching slider\n            carousel?.slideToClosest(300);\n            // enable changing value from carousel progress\n            dragging.current = false;\n          }}\n          sx={{\n            display: 'block',\n            height: '4px',\n            // restyle to less prominent variant\n            '.MuiSlider-rail': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-track': {\n              color: 'onSurface.os500',\n              // match transition speed of carousel\n              transitionDuration: `${carousel?.originalParams.speed ?? 300}ms`,\n            },\n            // hide control thumb\n            '.MuiSlider-thumb': {\n              display: 'none',\n            },\n            ...sliderSx,\n          }}\n          aria-controls=\"carousel\"\n          {...restSlider}\n        />\n      </Box>\n    );\n  },\n);\n\n/**\n * Scrollbar variant (_--)\n */\nexport const ScrollbarVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // watch states\n    const [carouselDragging, setCarouselDragging] = useState<boolean>(false);\n    const [, setRerender] = useState({});\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleDragStart = () => setCarouselDragging(true);\n        const handleDragEnd = () => setCarouselDragging(false);\n        const handleResize = () => setRerender({});\n\n        // monitor of dragging to remove thumb transition for immediate feedback\n        carousel.on('touchStart', handleDragStart);\n        carousel.on('touchEnd', handleDragEnd);\n        // monitor resize to change size of the thumb\n        carousel.on('resize', handleResize);\n\n        return () => {\n          carousel.off('touchStart', handleDragStart);\n          carousel.off('touchEnd', handleDragEnd);\n          carousel.off('resize', handleResize);\n        };\n      }\n    }, [carousel]);\n    // calculate size of the thumb based on the visible content and full content\n    const thumbSize = useMemo<number>(() => {\n      if (carousel?.wrapperEl?.scrollWidth && carousel?.width) {\n        const size = Math.ceil(carousel?.width ** 2 / carousel?.wrapperEl?.scrollWidth);\n        return Math.max(size, 40);\n      }\n      return 40;\n    }, [carousel?.wrapperEl?.scrollWidth, carousel?.width]);\n\n    return (\n      <SliderVariant\n        ref={ref}\n        carousel={carousel}\n        component={SliderContainer}\n        thumbSize={thumbSize}\n        sliderProps={{\n          // prevent selection via keyboard, Carousel can be already controlled with Keyboard and we are not showing focus ring\n          tabIndex: -1,\n          // remove valueLabel tooltip above thumb\n          valueLabelDisplay: 'off',\n          sx: {\n            display: 'block',\n            height: '4px',\n            // restyle to match scrollbar\n            '.MuiSlider-rail, .MuiSlider-track': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-thumb': {\n              display: 'flex',\n              width: `${thumbSize}px`,\n              height: '4px',\n              border: 'none',\n              backgroundColor: 'onSurface.os500',\n              // match transition speed of carousel\n              ...(!carouselDragging && {\n                transition: `left ${carousel?.originalParams.speed ?? 300}ms ease-out`,\n              }),\n              // remove focus style\n              '&.Mui-focusVisible': {\n                boxShadow: 'none',\n                '&:before': {\n                  content: 'none',\n                },\n              },\n            },\n            ...sliderSx,\n          },\n          ...restSlider,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["CarouselPagination","forwardRef","_a","ref","carousel","carouselProp","position","variant","sx","rawSx","rest","__rest","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","Object","assign","zIndex","bottom","left","right","JSON","stringify","_jsx","dotsWrapperProps","dotProps","_b","dotsWrapperSx","restDotsWrapper","_c","dotSx","restDot","Box","p","display","alignItems","justifyContent","children","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","Array","map","_","idx","className","originalParams","loop","isEnd","realIndex","undefined","height","transform","transition","margin","buttonProps","buttonSx","restButton","Button","fontSize","lineHeight","letterSpacing","getInteractiveStyle","onClick","slideTo","slideNext","_jsxs","component","fontWeight","color","mx","linesProps","lineProgress","lineProgressProps","lineSx","lineRest","lineProgressSx","lineProgressRest","xs","md","flexGrow","active","seen","minHeight","top","pointerEvents","overflow","role","opacity","transformOrigin","sliderProps","progressProps","__","sliderSx","restSlider","value","setValue","useState","Math","round","progress","dragging","useRef","setRerender","useEffect","current","handleMove","on","off","my","Slider","min","max","onChange","newValue","setProgress","onChangeCommitted","slideToClosest","transitionDuration","speed","_d","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","border","boxShadow","content"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../src/components/carousel/pagination.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo, useState, useRef } from 'react';\nimport { Box, BoxProps, Button, ButtonProps, Slider, SliderProps, LinearProgressProps, CSSObject } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { SliderContainer } from '@/src/materialui/slider/sliderContainer';\n\nexport interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' | 'position'> {\n  /**\n   * Carousel instance from useCarousel hook\n   */\n  carousel: CarouselInstance;\n}\nexport interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {\n  variant?: 'dots';\n  /**\n   * Properties applied to wrapper of dots\n   */\n  dotsWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to each dot\n   */\n  dotProps?: BoxProps<ElementType>;\n}\nexport interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {\n  variant?: 'fraction';\n  /**\n   * Properties applied to button used to render text\n   */\n  buttonProps?: ButtonProps;\n}\nexport interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {\n  variant?: 'lines';\n  /**\n   * Properties applied to each line\n   */\n  linesProps?: ButtonProps;\n  /**\n   * Show progress in active line instead\n   */\n  lineProgress?: number;\n  /**\n   * Properties applied to active line progress\n   */\n  lineProgressProps?: BoxProps<ElementType>;\n}\n/**\n * @deprecated use `slider` variant instead\n */\nexport interface CarouselPaginationProgressProps extends CarouselPaginationVariantProps {\n  variant?: 'progress';\n  /**\n   * @deprecated\n   */\n  progressProps?: LinearProgressProps;\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {\n  variant?: 'slider';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {\n  variant?: 'scrollbar';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationBaseProps {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Append style to wrapper box to change position of control\n   * @default outside\n   */\n  position?: 'outside' | 'inside';\n}\nexport type CarouselPaginationProps = CarouselPaginationBaseProps &\n  (\n    | Omit<CarouselPaginationDotsProps, 'carousel'>\n    | Omit<CarouselPaginationFractionProps, 'carousel'>\n    | Omit<CarouselPaginationLinesProps, 'carousel'>\n    | Omit<CarouselPaginationProgressProps, 'carousel'>\n    | Omit<CarouselPaginationSliderProps, 'carousel'>\n    | Omit<CarouselPaginationScrollbarProps, 'carousel'>\n  );\n\n/**\n * Pagination controls\n */\nexport const CarouselPagination: React.FC<CarouselPaginationProps> = forwardRef(\n  ({ carousel: carouselProp, position, variant, sx: rawSx, ...rest }, ref) => {\n    const carouselHook = useCarousel();\n    const carousel = carouselProp || carouselHook;\n    // decide on component used\n    const VariantComponent = useMemo(() => {\n      switch (variant) {\n        case 'scrollbar':\n          return ScrollbarVariant;\n        case 'slider':\n        case 'progress':\n          return SliderVariant;\n        case 'fraction':\n          return FractionVariant;\n        case 'lines':\n          return LinesVariant;\n        case 'dots':\n          return DotsVariant;\n        default:\n          return DotsVariant;\n      }\n    }, [variant]);\n    // position extra styling applied to wrapper\n    const sx = useMemo<CSSObject | BoxProps['sx']>(() => {\n      if (position === 'inside') {\n        return {\n          position: 'absolute',\n          zIndex: '90',\n          bottom: '0',\n          left: '0',\n          right: '0',\n          ...rawSx,\n        };\n      } else {\n        return rawSx;\n      }\n    }, [position, JSON.stringify(rawSx)]);\n\n    return <VariantComponent carousel={carousel} sx={sx} ref={ref} position={position} {...rest} />;\n  },\n);\n\n/**\n * Dots variant (...)\n */\nexport const DotsVariant: React.FC<CarouselPaginationDotsProps> = forwardRef(\n  ({ carousel, dotsWrapperProps, dotProps, position, sx, ...rest }, ref) => {\n    const { sx: dotsWrapperSx, ...restDotsWrapper } = dotsWrapperProps ?? {};\n    const { sx: dotSx, ...restDot } = dotProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          p: 2,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            borderRadius: '1000px',\n            py: 0.5,\n            px: 1,\n            gap: 0.5,\n            // ensure width does not change during transition\n            //  dots width space + gap space + extra active dot space + padding\n            width: `${(carousel?.slides.length || 0) * 12 + ((carousel?.slides.length || 1) - 1) * 4 + 4 + 16}px`,\n            // on image variant from Figma\n            ...(position === 'inside' && {\n              backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'surface.primary' : 'transparent.backdrop'),\n            }),\n            ...dotsWrapperSx,\n          }}\n          {...restDotsWrapper}\n        >\n          {[...Array(carousel?.slides.length || 0)].map((_, idx) => (\n            <Box\n              key={idx}\n              className={\n                !carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1\n                  ? 'active'\n                  : (!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex\n                    ? 'active'\n                    : undefined\n              }\n              sx={{\n                p: '0',\n                width: '12px',\n                height: '12px',\n                // scale to 8px\n                transform: 'scale(0.6667)',\n                borderRadius: '100%',\n                backgroundColor: 'onSurface.os500',\n                transition: 'transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out',\n                '&.active': {\n                  transform: 'scale(1)',\n                  backgroundColor: 'text.primary',\n                  margin: '0 2px',\n                },\n                ...dotSx,\n              }}\n              {...restDot}\n            />\n          ))}\n        </Box>\n      </Box>\n    );\n  },\n);\n\n/**\n * Fraction variant (text 1/3)\n */\nexport const FractionVariant: React.FC<CarouselPaginationFractionProps> = forwardRef(\n  ({ carousel, buttonProps, position, sx, ...rest }, ref) => {\n    const { sx: buttonSx, ...restButton } = buttonProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Button\n          variant=\"text\"\n          aria-controls=\"carousel\"\n          sx={{\n            px: 2,\n            py: 0.25,\n            borderRadius: '4px',\n            // custom typography according to Figma (Pagination/Compact)\n            fontSize: '18px',\n            lineHeight: '28px',\n            letterSpacing: '0.02em',\n            ...getInteractiveStyle(\n              {\n                backgroundColor: 'transparent.backdrop',\n              },\n              {\n                backgroundColor: 'onSurface.os100',\n              },\n            ),\n            ...buttonSx,\n          }}\n          onClick={() =>\n            // at the end, slide to beginning\n            carousel?.isEnd && !carousel.originalParams.loop ? carousel?.slideTo(0) : carousel?.slideNext()\n          }\n          {...restButton}\n        >\n          <Box component=\"span\">\n            <Box component=\"span\" sx={{ fontWeight: '700', color: 'onSurface.os900' }}>\n              {`${(carousel?.realIndex || 0) + 1}`}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '400', mx: 0.5 }}>\n              {' / '}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '300' }}>\n              {`${carousel?.slides.length || 0}`}\n            </Box>\n          </Box>\n        </Button>\n      </Box>\n    );\n  },\n);\n\n/**\n * Lines variant (- - -)\n */\nexport const LinesVariant: React.FC<CarouselPaginationLinesProps> = forwardRef(\n  ({ carousel, sx, linesProps, lineProgress, lineProgressProps, position, ...rest }, ref) => {\n    const { sx: lineSx, ...lineRest } = linesProps ?? {};\n    const { sx: lineProgressSx, ...lineProgressRest } = lineProgressProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: { xs: 'stretch', md: 'center' },\n          flexGrow: { xs: '1', md: 0 },\n          gap: 1,\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {[...Array(carousel?.slides.length || 0)].map((_, idx) => {\n          const active =\n            (!carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1) ||\n            ((!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex);\n          const seen = idx <= (carousel?.realIndex || 0);\n\n          return (\n            <Button\n              key={idx}\n              color=\"inherit\"\n              className={active ? 'active' : undefined}\n              sx={{\n                p: 0,\n                minHeight: '0',\n                height: active || seen ? '8px' : '4px',\n                borderRadius: active || seen ? '4px' : '2px',\n                width: { xs: '100%', md: '56px' },\n                justifyContent: 'flex-start',\n                ...getInteractiveStyle(\n                  {\n                    backgroundColor: 'surface.primary',\n                    '& .progress-line': {\n                      backgroundColor: 'brand.secondary',\n                    },\n                  },\n                  {\n                    backgroundColor: 'surface.secondary',\n                    '& .progress-line': {\n                      backgroundColor: 'brandHover.secondary',\n                    },\n                  },\n                ),\n                ...lineSx,\n              }}\n              aria-controls=\"carousel\"\n              onClick={() => carousel?.[carousel.originalParams.loop ? 'slideToLoop' : 'slideTo'](idx)}\n              {...lineRest}\n            >\n              <Box\n                sx={{\n                  // invisible hitbox expanding clickable area\n                  position: 'absolute',\n                  top: '50%',\n                  left: '0',\n                  right: '0',\n                  height: '24px', // Minimum a11y click area\n                  transform: 'translateY(-50%)',\n                  pointerEvents: 'auto',\n                }}\n              />\n              <Box sx={{ borderRadius: '4px', height: '100%', width: '100%', overflow: 'hidden' }}>\n                <Box\n                  className=\"progress-line\"\n                  role={active ? 'progress' : undefined} // Only the active one gets a role\n                  aria-valuenow={active ? lineProgress : undefined}\n                  aria-valuemin={0}\n                  aria-valuemax={100}\n                  sx={{\n                    opacity: lineProgress !== undefined || seen ? '1' : '0',\n                    width: '100%',\n                    backgroundColor: 'brand.secondary',\n                    height: '100%',\n                    transformOrigin: 'left',\n                    transform: `scaleX(${lineProgress !== undefined && active ? lineProgress / 100 : seen ? 1 : 0})`,\n                    transition: `${lineProgress !== undefined ? 'transform 300ms ease-in-out, ' : ''}opacity 300ms ease-out, background-color 300ms ease-out`,\n                    ...lineProgressSx,\n                  }}\n                  {...lineProgressRest}\n                />\n              </Box>\n            </Button>\n          );\n        })}\n      </Box>\n    );\n  },\n);\n\n/**\n * Slider variant (___)\n */\nexport const SliderVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, sx, progressProps: __, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // slider current value that might not match carousel progress\n    const [value, setValue] = useState<number>(Math.round((carousel?.progress || 0) * 100));\n    // watch user manipulating slider\n    const dragging = useRef<boolean>(false);\n    const [, setRerender] = useState({});\n    // monitor carousel progress to update slider value\n    useEffect(() => {\n      if (!dragging.current) {\n        setValue(Math.round((carousel?.progress || 0) * 100));\n      }\n    }, [carousel?.progress]);\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleMove = () => {\n          if (!dragging.current) {\n            setRerender({});\n          }\n        };\n\n        // monitor of movement to immediately move thumb\n        carousel.on('sliderMove', handleMove);\n\n        return () => {\n          carousel.off('sliderMove', handleMove);\n        };\n      }\n    }, [carousel]);\n\n    return (\n      <Box sx={{ my: 2, ...sx }} ref={ref} {...rest}>\n        <Slider\n          value={value}\n          min={0}\n          max={100}\n          onChange={(_, newValue: number) => {\n            // prevent value updates from carousel progress\n            dragging.current = true;\n            // smoothly move carousel\n            carousel?.setProgress(newValue / 100, 150);\n            // update slider value\n            setValue(newValue);\n          }}\n          onChangeCommitted={() => {\n            // make sure to slide to correct position after user stop touching slider\n            carousel?.slideToClosest(300);\n            // enable changing value from carousel progress\n            dragging.current = false;\n          }}\n          sx={{\n            display: 'block',\n            height: '4px',\n            // restyle to less prominent variant\n            '.MuiSlider-rail': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-track': {\n              color: 'onSurface.os500',\n              // match transition speed of carousel\n              transitionDuration: `${carousel?.originalParams.speed ?? 300}ms`,\n            },\n            // hide control thumb\n            '.MuiSlider-thumb': {\n              display: 'none',\n            },\n            ...sliderSx,\n          }}\n          aria-controls=\"carousel\"\n          {...restSlider}\n        />\n      </Box>\n    );\n  },\n);\n\n/**\n * Scrollbar variant (_--)\n */\nexport const ScrollbarVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // watch states\n    const [carouselDragging, setCarouselDragging] = useState<boolean>(false);\n    const [, setRerender] = useState({});\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleDragStart = () => setCarouselDragging(true);\n        const handleDragEnd = () => setCarouselDragging(false);\n        const handleResize = () => setRerender({});\n\n        // monitor of dragging to remove thumb transition for immediate feedback\n        carousel.on('touchStart', handleDragStart);\n        carousel.on('touchEnd', handleDragEnd);\n        // monitor resize to change size of the thumb\n        carousel.on('resize', handleResize);\n\n        return () => {\n          carousel.off('touchStart', handleDragStart);\n          carousel.off('touchEnd', handleDragEnd);\n          carousel.off('resize', handleResize);\n        };\n      }\n    }, [carousel]);\n    // calculate size of the thumb based on the visible content and full content\n    const thumbSize = useMemo<number>(() => {\n      if (carousel?.wrapperEl?.scrollWidth && carousel?.width) {\n        const size = Math.ceil(carousel?.width ** 2 / carousel?.wrapperEl?.scrollWidth);\n        return Math.max(size, 40);\n      }\n      return 40;\n    }, [carousel?.wrapperEl?.scrollWidth, carousel?.width]);\n\n    return (\n      <SliderVariant\n        ref={ref}\n        carousel={carousel}\n        component={SliderContainer}\n        thumbSize={thumbSize}\n        sliderProps={{\n          // prevent selection via keyboard, Carousel can be already controlled with Keyboard and we are not showing focus ring\n          tabIndex: -1,\n          // remove valueLabel tooltip above thumb\n          valueLabelDisplay: 'off',\n          sx: {\n            display: 'block',\n            height: '4px',\n            // restyle to match scrollbar\n            '.MuiSlider-rail, .MuiSlider-track': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-thumb': {\n              display: 'flex',\n              width: `${thumbSize}px`,\n              height: '4px',\n              border: 'none',\n              backgroundColor: 'onSurface.os500',\n              // match transition speed of carousel\n              ...(!carouselDragging && {\n                transition: `left ${carousel?.originalParams.speed ?? 300}ms ease-out`,\n              }),\n              // remove focus style\n              '&.Mui-focusVisible': {\n                boxShadow: 'none',\n                '&:before': {\n                  content: 'none',\n                },\n              },\n            },\n            ...sliderSx,\n          },\n          ...restSlider,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["CarouselPagination","forwardRef","_a","ref","carousel","carouselProp","position","variant","sx","rawSx","rest","__rest","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","Object","assign","zIndex","bottom","left","right","JSON","stringify","_jsx","dotsWrapperProps","dotProps","_b","dotsWrapperSx","restDotsWrapper","_c","dotSx","restDot","Box","p","display","alignItems","justifyContent","children","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","Array","map","_","idx","className","originalParams","loop","isEnd","realIndex","undefined","height","transform","transition","margin","buttonProps","buttonSx","restButton","Button","fontSize","lineHeight","letterSpacing","getInteractiveStyle","onClick","slideTo","slideNext","_jsxs","component","fontWeight","color","mx","linesProps","lineProgress","lineProgressProps","lineSx","lineRest","lineProgressSx","lineProgressRest","xs","md","flexGrow","active","seen","minHeight","top","pointerEvents","overflow","role","opacity","transformOrigin","sliderProps","progressProps","__","sliderSx","restSlider","value","setValue","useState","Math","round","progress","dragging","useRef","setRerender","useEffect","current","handleMove","on","off","my","Slider","min","max","onChange","newValue","setProgress","onChangeCommitted","slideToClosest","transitionDuration","speed","_d","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","border","boxShadow","content"],"mappings":"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"}

package/components/carousel/slide.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as e}from"@mui/material";import{useSwiper as o,SwiperSlide as a}from"swiper/react";const s=i(((i,s)=>{var{children:m,sx:n}=i,l=r(i,["children","sx"]);const{originalParams:p}=o();return t(e,Object.assign({component:a,ref:s},l,{sx:Object.assign({display:"block",width:"auto"===p.slidesPerView?"auto":"100%",height:p.autoHeight?"auto":"100%",position:"relative",zIndex:"50",transform:"translate3d(0px, 0, 0)",flexShrink:"0",transitionProperty:"fade"===p.effect?"opacity":"transform","& img":{display:"block",maxWidth:"100%"}},n),children:m}))}));s.displayName="SwiperSlide";export{s as CarouselSlide};
+import{__rest as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as e}from"@mui/material";import{useSwiper as o,SwiperSlide as a}from"swiper/react";const s=i((i,s)=>{var{children:m,sx:n}=i,l=r(i,["children","sx"]);const{originalParams:p}=o();return t(e,Object.assign({component:a,ref:s},l,{sx:Object.assign({display:"block",width:"auto"===p.slidesPerView?"auto":"100%",height:p.autoHeight?"auto":"100%",position:"relative",zIndex:"50",transform:"translate3d(0px, 0, 0)",flexShrink:"0",transitionProperty:"fade"===p.effect?"opacity":"transform","& img":{display:"block",maxWidth:"100%"}},n),children:m}))});s.displayName="SwiperSlide";export{s as CarouselSlide};
 //# sourceMappingURL=slide.js.map

package/components/carousel/slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide.js","sources":["../../../src/components/carousel/slide.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { SwiperSlide, SwiperSlideProps, useSwiper } from 'swiper/react';\n\nexport interface CarouselSlideProps\n  extends Omit<SwiperSlideProps, 'children'>,\n    Omit<BoxProps, keyof SwiperSlideProps | 'component'> {\n  children?: BoxProps['children'];\n}\n\n/**\n * One slide in the carousel\n */\nexport const CarouselSlide: React.FC<CarouselSlideProps> = forwardRef(({ children, sx, ...rest }, ref) => {\n  const { originalParams: swiperOptions } = useSwiper();\n\n  return (\n    <Box\n      component={SwiperSlide}\n      ref={ref}\n      {...rest}\n      sx={{\n        display: 'block',\n        width: swiperOptions.slidesPerView === 'auto' ? 'auto' : '100%',\n        height: swiperOptions.autoHeight ? 'auto' : '100%',\n        position: 'relative',\n        zIndex: '50',\n        transform: 'translate3d(0px, 0, 0)',\n        flexShrink: '0',\n        transitionProperty: swiperOptions.effect === 'fade' ? 'opacity' : 'transform',\n        '& img': {\n          display: 'block',\n          maxWidth: '100%',\n        },\n        ...sx,\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\nCarouselSlide.displayName = 'SwiperSlide';\n"],"names":["CarouselSlide","forwardRef","_a","ref","children","sx","rest","__rest","originalParams","swiperOptions","useSwiper","_jsx","Box","Object","assign","component","SwiperSlide","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"wMAaa,MAAAA,EAA8CC,GAAW,CAACC,EAA2BC,SAA3BC,SAAEA,EAAQC,GAAEA,GAAEH,EAAKI,EAAIC,EAAAL,EAAvB,mBACrE,MAAQM,eAAgBC,GAAkBC,IAE1C,OACEC,EAACC,EACCC,OAAAC,OAAA,CAAAC,UAAWC,EACXb,IAAKA,GACDG,GACJD,GAAEQ,OAAAC,OAAA,CACAG,QAAS,QACTC,MAAuC,SAAhCT,EAAcU,cAA2B,OAAS,OACzDC,OAAQX,EAAcY,WAAa,OAAS,OAC5CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA6C,SAAzBjB,EAAckB,OAAoB,UAAY,YAClE,QAAS,CACPV,QAAS,QACTW,SAAU,SAETvB,GAAED,SAGNA,IACG,IAGVJ,EAAc6B,YAAc"}
+{"version":3,"file":"slide.js","sources":["../../../src/components/carousel/slide.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { SwiperSlide, SwiperSlideProps, useSwiper } from 'swiper/react';\n\nexport interface CarouselSlideProps\n  extends Omit<SwiperSlideProps, 'children'>,\n    Omit<BoxProps, keyof SwiperSlideProps | 'component'> {\n  children?: BoxProps['children'];\n}\n\n/**\n * One slide in the carousel\n */\nexport const CarouselSlide: React.FC<CarouselSlideProps> = forwardRef(({ children, sx, ...rest }, ref) => {\n  const { originalParams: swiperOptions } = useSwiper();\n\n  return (\n    <Box\n      component={SwiperSlide}\n      ref={ref}\n      {...rest}\n      sx={{\n        display: 'block',\n        width: swiperOptions.slidesPerView === 'auto' ? 'auto' : '100%',\n        height: swiperOptions.autoHeight ? 'auto' : '100%',\n        position: 'relative',\n        zIndex: '50',\n        transform: 'translate3d(0px, 0, 0)',\n        flexShrink: '0',\n        transitionProperty: swiperOptions.effect === 'fade' ? 'opacity' : 'transform',\n        '& img': {\n          display: 'block',\n          maxWidth: '100%',\n        },\n        ...sx,\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\nCarouselSlide.displayName = 'SwiperSlide';\n"],"names":["CarouselSlide","forwardRef","_a","ref","children","sx","rest","__rest","originalParams","swiperOptions","useSwiper","_jsx","Box","Object","assign","component","SwiperSlide","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"wMAaO,MAAMA,EAA8CC,EAAW,CAACC,EAA2BC,SAA3BC,SAAEA,EAAQC,GAAEA,GAAEH,EAAKI,EAAIC,EAAAL,EAAvB,mBACrE,MAAQM,eAAgBC,GAAkBC,IAE1C,OACEC,EAACC,EAAGC,OAAAC,OAAA,CACFC,UAAWC,EACXb,IAAKA,GACDG,GACJD,GAAEQ,OAAAC,OAAA,CACAG,QAAS,QACTC,MAAuC,SAAhCT,EAAcU,cAA2B,OAAS,OACzDC,OAAQX,EAAcY,WAAa,OAAS,OAC5CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA6C,SAAzBjB,EAAckB,OAAoB,UAAY,YAClE,QAAS,CACPV,QAAS,QACTW,SAAU,SAETvB,GAAED,SAGNA,OAIPJ,EAAc6B,YAAc"}

package/components/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsx as e}from"react/jsx-runtime";import{forwardRef as o,useState as t}from"react";import{styled as i,Checkbox as a,FormGroup as n}from"@mui/material";import d from"../common/styled/formControlLabelStyled.js";const l=o(((o,i)=>{var{error:l}=o,m=r(o,["error"]);const{label:s,defaultChecked:f,indeterminate:h,onChange:p,disabled:b}=m,[u,g]=t(f||!1),y=e(c,{children:e(a,Object.assign({},m,{defaultChecked:f,indeterminate:h&&u,disabled:b,color:l?"error":void 0,ref:i,onChange:r=>{g(r.target.checked),"function"==typeof p&&p(r,r.target.checked)}}))});return e(n,{children:e(d,{control:y,label:s,disabled:b,error:l})})})),c=i("div",{shouldForwardProp:r=>"error"!==r&&"disabled"!==r})((()=>{let r={};return r={display:"flex","& + .MuiTypography-root":{"& a":{color:"inherit",textDecoration:"underline",fontWeight:"700"},"& *":{margin:0}}},r}));export{l as Checkbox};
+import{__rest as r}from"tslib";import{jsx as e}from"react/jsx-runtime";import{forwardRef as o,useState as t}from"react";import{styled as i,Checkbox as a,FormGroup as n}from"@mui/material";import d from"../common/styled/formControlLabelStyled.js";const l=o((o,i)=>{var{error:l}=o,m=r(o,["error"]);const{label:s,defaultChecked:f,indeterminate:h,onChange:p,disabled:b}=m,[u,g]=t(f||!1),y=e(c,{children:e(a,Object.assign({},m,{defaultChecked:f,indeterminate:h&&u,disabled:b,color:l?"error":void 0,ref:i,onChange:r=>{g(r.target.checked),"function"==typeof p&&p(r,r.target.checked)}}))});return e(n,{children:e(d,{control:y,label:s,disabled:b,error:l})})}),c=i("div",{shouldForwardProp:r=>"error"!==r&&"disabled"!==r})(()=>{let r={};return r={display:"flex","& + .MuiTypography-root":{"& a":{color:"inherit",textDecoration:"underline",fontWeight:"700"},"& *":{margin:0}}},r});export{l as Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import React, { ReactNode, ChangeEvent, useState, forwardRef, HTMLAttributes } from 'react';\nimport { Checkbox as MuiCheckbox, styled, FormGroup } from '@mui/material';\nimport FormControlLabelStyled from '../common/styled/formControlLabelStyled';\n\n/**\n * @interface CheckboxProps\n * @description Base definition of SkodaFlow Checkbox independent on core implementation.\n * Properties are inherited from HTML Button element\n */\nexport interface CheckboxProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'color'> {\n  /**\n   *  Indeterminate state of checkbox, half checked.\n   */\n  indeterminate?: boolean;\n\n  /**\n   *  Disabled state, not changeable.\n   */\n  disabled?: boolean;\n\n  /**\n   *  Uncontrolled component. Set initial value. Do not use with \"checked\" together.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Controlled component. Set current value. Do not use with \"defaultChecked\" together.\n   */\n  checked?: boolean;\n\n  /**\n   * Error state of checkbox.\n   */\n  error?: boolean;\n\n  /**\n   * Is checkbox required field in form?\n   */\n  required?: boolean;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  value?: string;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  label?: string | ReactNode;\n\n  customNode?: ReactNode;\n\n  /**\n   * @description Triggered when element is changed.\n   * @param e React original event object\n   * @param value Current changed value\n   */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: boolean) => void;\n}\n\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props CheckboxProps\n * @returns React Functional Component\n * @deprecated Use Checkbox component from '@mui/material' module instead.\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(({ error, ...props }, ref) => {\n  const { label, defaultChecked, indeterminate, onChange, disabled } = props;\n  const [_checkState, setCheck] = useState(defaultChecked || false);\n\n  const _checkStateChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setCheck(e.target.checked);\n    typeof onChange === 'function' && onChange(e, e.target.checked);\n  };\n\n  const _checkbox = (\n    <CheckboxStyled>\n      <MuiCheckbox\n        {...props}\n        defaultChecked={defaultChecked}\n        indeterminate={indeterminate && _checkState}\n        disabled={disabled}\n        color={error ? 'error' : undefined}\n        ref={ref}\n        onChange={_checkStateChange}\n      />\n    </CheckboxStyled>\n  );\n\n  return (\n    <FormGroup>\n      <FormControlLabelStyled control={_checkbox} label={label} disabled={disabled} error={error} />\n    </FormGroup>\n  );\n});\n\n/**\n * @description Checkbox styling definition based on props\n */\n\nconst CheckboxStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'error' && prop !== 'disabled',\n})<{ theme?: any; disabled?: boolean; error?: boolean }>(() => {\n  let styles = {};\n  styles = {\n    display: 'flex',\n    '& + .MuiTypography-root': {\n      '& a': {\n        color: 'inherit',\n        textDecoration: 'underline',\n        fontWeight: '700',\n      },\n      '& *': {\n        margin: 0,\n      },\n    },\n  };\n  return styles;\n});\n"],"names":["Checkbox","forwardRef","_a","ref","error","props","__rest","label","defaultChecked","indeterminate","onChange","disabled","_checkState","setCheck","useState","_checkbox","_jsx","CheckboxStyled","children","MuiCheckbox","Object","assign","color","undefined","e","target","checked","FormGroup","FormControlLabelStyled","control","styled","shouldForwardProp","prop","styles","display","textDecoration","fontWeight","margin"],"mappings":"sPAmEa,MAAAA,EAAWC,GAA6C,CAACC,EAAqBC,KAArB,IAAAC,MAAEA,GAAiBF,EAAPG,EAAKC,EAAAJ,EAAjB,WACpE,MAAMK,MAAEA,EAAKC,eAAEA,EAAcC,cAAEA,EAAaC,SAAEA,EAAQC,SAAEA,GAAaN,GAC9DO,EAAaC,GAAYC,EAASN,IAAkB,GAOrDO,EACJC,EAACC,EACC,CAAAC,SAAAF,EAACG,EACKC,OAAAC,OAAA,CAAA,EAAAhB,GACJG,eAAgBA,EAChBC,cAAeA,GAAiBG,EAChCD,SAAUA,EACVW,MAAOlB,EAAQ,aAAUmB,EACzBpB,IAAKA,EACLO,SAdqBc,IACzBX,EAASW,EAAEC,OAAOC,SACE,mBAAbhB,GAA2BA,EAASc,EAAGA,EAAEC,OAAOC,QAAQ,OAiBjE,OACEV,EAACW,EACC,CAAAT,SAAAF,EAACY,EAAuB,CAAAC,QAASd,EAAWR,MAAOA,EAAOI,SAAUA,EAAUP,MAAOA,KAC3E,IAQVa,EAAiBa,EAAO,MAAO,CACnCC,kBAAoBC,GAAkB,UAATA,GAA6B,aAATA,GAD5BF,EAEkC,KACvD,IAAIG,EAAS,CAAE,EAcf,OAbAA,EAAS,CACPC,QAAS,OACT,0BAA2B,CACzB,MAAO,CACLZ,MAAO,UACPa,eAAgB,YAChBC,WAAY,OAEd,MAAO,CACLC,OAAQ,KAIPJ,CAAM"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import React, { ReactNode, ChangeEvent, useState, forwardRef, HTMLAttributes } from 'react';\nimport { Checkbox as MuiCheckbox, styled, FormGroup } from '@mui/material';\nimport FormControlLabelStyled from '../common/styled/formControlLabelStyled';\n\n/**\n * @interface CheckboxProps\n * @description Base definition of SkodaFlow Checkbox independent on core implementation.\n * Properties are inherited from HTML Button element\n */\nexport interface CheckboxProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'color'> {\n  /**\n   *  Indeterminate state of checkbox, half checked.\n   */\n  indeterminate?: boolean;\n\n  /**\n   *  Disabled state, not changeable.\n   */\n  disabled?: boolean;\n\n  /**\n   *  Uncontrolled component. Set initial value. Do not use with \"checked\" together.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Controlled component. Set current value. Do not use with \"defaultChecked\" together.\n   */\n  checked?: boolean;\n\n  /**\n   * Error state of checkbox.\n   */\n  error?: boolean;\n\n  /**\n   * Is checkbox required field in form?\n   */\n  required?: boolean;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  value?: string;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  label?: string | ReactNode;\n\n  customNode?: ReactNode;\n\n  /**\n   * @description Triggered when element is changed.\n   * @param e React original event object\n   * @param value Current changed value\n   */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: boolean) => void;\n}\n\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props CheckboxProps\n * @returns React Functional Component\n * @deprecated Use Checkbox component from '@mui/material' module instead.\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(({ error, ...props }, ref) => {\n  const { label, defaultChecked, indeterminate, onChange, disabled } = props;\n  const [_checkState, setCheck] = useState(defaultChecked || false);\n\n  const _checkStateChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setCheck(e.target.checked);\n    typeof onChange === 'function' && onChange(e, e.target.checked);\n  };\n\n  const _checkbox = (\n    <CheckboxStyled>\n      <MuiCheckbox\n        {...props}\n        defaultChecked={defaultChecked}\n        indeterminate={indeterminate && _checkState}\n        disabled={disabled}\n        color={error ? 'error' : undefined}\n        ref={ref}\n        onChange={_checkStateChange}\n      />\n    </CheckboxStyled>\n  );\n\n  return (\n    <FormGroup>\n      <FormControlLabelStyled control={_checkbox} label={label} disabled={disabled} error={error} />\n    </FormGroup>\n  );\n});\n\n/**\n * @description Checkbox styling definition based on props\n */\n\nconst CheckboxStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'error' && prop !== 'disabled',\n})<{ theme?: any; disabled?: boolean; error?: boolean }>(() => {\n  let styles = {};\n  styles = {\n    display: 'flex',\n    '& + .MuiTypography-root': {\n      '& a': {\n        color: 'inherit',\n        textDecoration: 'underline',\n        fontWeight: '700',\n      },\n      '& *': {\n        margin: 0,\n      },\n    },\n  };\n  return styles;\n});\n"],"names":["Checkbox","forwardRef","_a","ref","error","props","__rest","label","defaultChecked","indeterminate","onChange","disabled","_checkState","setCheck","useState","_checkbox","_jsx","CheckboxStyled","children","MuiCheckbox","Object","assign","color","undefined","e","target","checked","FormGroup","FormControlLabelStyled","control","styled","shouldForwardProp","prop","styles","display","textDecoration","fontWeight","margin"],"mappings":"sPAmEO,MAAMA,EAAWC,EAA6C,CAACC,EAAqBC,KAArB,IAAAC,MAAEA,GAAKF,EAAKG,EAAKC,EAAAJ,EAAjB,WACpE,MAAMK,MAAEA,EAAKC,eAAEA,EAAcC,cAAEA,EAAaC,SAAEA,EAAQC,SAAEA,GAAaN,GAC9DO,EAAaC,GAAYC,EAASN,IAAkB,GAOrDO,EACJC,EAACC,EAAc,CAAAC,SACbF,EAACG,EAAWC,OAAAC,OAAA,CAAA,EACNhB,GACJG,eAAgBA,EAChBC,cAAeA,GAAiBG,EAChCD,SAAUA,EACVW,MAAOlB,EAAQ,aAAUmB,EACzBpB,IAAKA,EACLO,SAdqBc,IACzBX,EAASW,EAAEC,OAAOC,SACE,mBAAbhB,GAA2BA,EAASc,EAAGA,EAAEC,OAAOC,eAiBzD,OACEV,EAACW,EAAS,CAAAT,SACRF,EAACY,EAAsB,CAACC,QAASd,EAAWR,MAAOA,EAAOI,SAAUA,EAAUP,MAAOA,QASrFa,EAAiBa,EAAO,MAAO,CACnCC,kBAAoBC,GAAkB,UAATA,GAA6B,aAATA,GAD5BF,CAEkC,KACvD,IAAIG,EAAS,CAAA,EAcb,OAbAA,EAAS,CACPC,QAAS,OACT,0BAA2B,CACzB,MAAO,CACLZ,MAAO,UACPa,eAAgB,YAChBC,WAAY,OAEd,MAAO,CACLC,OAAQ,KAIPJ"}

package/components/chip/chipDropdownChildren/chipDropdownChildren.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"tslib";import{jsxs as r,Fragment as o,jsx as n}from"react/jsx-runtime";import{forwardRef as e,useState as a,useCallback as s,useMemo as t}from"react";import{ClickAwayListener as l,styled as m,Chip as c}from"@mui/material";import d from"../chipFocusVisibleStyled.js";import p from"../../common/menuContainer.js";import{Icon as f}from"../../icon/icon.js";import"../../icon/icon.definitions.js";const h=e(((e,m)=>{var{variant:c}=e,h=i(e,["variant"]);const[b,v]=a(!1),[w,O]=a(!1),g=s((()=>{O(!1)}),[]),j=t((()=>r(o,{children:[h.label,n(f,{name:"chevron-down",className:w?"isOpen":"",fontSize:"small"})]})),[w,h.label]),x=s((()=>{v(!0)}),[]),C=s((i=>{v(!1),h.onBlur&&h.onBlur(i)}),[h]);return n(l,{onClickAway:g,children:r("span",{children:[n("div",{children:n(d,{focusVisible:b,variant:c,children:n(u,{className:"shadow"===c&&"MuiChip-shadow",ref:m,variant:"filled",icon:h.icon?n(f,{className:h.icon}):void 0,disabled:h.disabled,label:j,onClick:()=>O(!w),onFocusVisible:x,onBlur:C,isOpen:w})})}),n(p,{isOpen:w,marginTop:14,isEmptyMenu:!0,children:h.children})]})})})),u=m(c,{shouldForwardProp:i=>"isOpen"!==i})((()=>({"& .chevron-down":{marginLeft:"8px",transform:"rotate(0deg)",top:"4px",transition:"transform 0.6s","&.isOpen":{transform:"rotate(180deg) translateY(2px)",transformOrigin:"50%"}}})));export{h as ChipDropdownChildren};
+import{__rest as o}from"tslib";import{jsxs as i,Fragment as n,jsx as l}from"react/jsx-runtime";import{forwardRef as e,useState as r,useCallback as c,useMemo as t}from"react";import{ClickAwayListener as s,styled as p,Chip as d}from"@mui/material";import m from"../chipFocusVisibleStyled.js";import I from"../../common/menuContainer.js";import{Icon as j}from"../../icon/Icon.js";import"../../icon/FlowIcon.js";import"../../icon/icon.definitions.js";import"../../icon/filled/ATMFilledIcon.js";import"../../icon/filled/AddFilledIcon.js";import"../../icon/filled/AirFilterFilledIcon.js";import"../../icon/filled/AISuggestionFilledIcon.js";import"../../icon/filled/ArchiveFilledIcon.js";import"../../icon/filled/ArrowBottomLeftFilledIcon.js";import"../../icon/filled/ArrowBottomRightFilledIcon.js";import"../../icon/filled/ArrowCircleBottomLeftFilledIcon.js";import"../../icon/filled/ArrowCircleBottomRightFilledIcon.js";import"../../icon/filled/ArrowCircleDownFilledIcon.js";import"../../icon/filled/ArrowCircleLeftFilledIcon.js";import"../../icon/filled/ArrowCircleRightFilledIcon.js";import"../../icon/filled/ArrowCircleTopLeftFilledIcon.js";import"../../icon/filled/ArrowCircleTopRightFilledIcon.js";import"../../icon/filled/ArrowCircleUpFilledIcon.js";import"../../icon/filled/ArrowCurvedDownFilledIcon.js";import"../../icon/filled/ArrowCurvedDownFlippedFilledIcon.js";import"../../icon/filled/ArrowCurvedLeftFilledIcon.js";import"../../icon/filled/ArrowCurvedLeftFlippedFilledIcon.js";import"../../icon/filled/ArrowCurvedRightFilledIcon.js";import"../../icon/filled/ArrowCurvedRightFlippedFilledIcon.js";import"../../icon/filled/ArrowCurvedUpFilledIcon.js";import"../../icon/filled/ArrowCurvedUpFlippedFilledIcon.js";import"../../icon/filled/ArrowDownFilledIcon.js";import"../../icon/filled/ArrowLeftFilledIcon.js";import"../../icon/filled/ArrowRightFilledIcon.js";import"../../icon/filled/ArrowTopLeftFilledIcon.js";import"../../icon/filled/ArrowTopRightFilledIcon.js";import"../../icon/filled/ArrowUpFilledIcon.js";import"../../icon/filled/ArtboardFilledIcon.js";import"../../icon/filled/AssistanceFilledIcon.js";import"../../icon/filled/AudioMidFilledIcon.js";import"../../icon/filled/AudioMuteFilledIcon.js";import"../../icon/filled/AudioOffFilledIcon.js";import"../../icon/filled/AudioOnFilledIcon.js";import"../../icon/filled/BackToParentFilledIcon.js";import"../../icon/filled/BadgeFilledIcon.js";import"../../icon/filled/BalloonFilledIcon.js";import"../../icon/filled/BarFilledIcon.js";import"../../icon/filled/BarCodeFilledIcon.js";import"../../icon/filled/Battery0FilledIcon.js";import"../../icon/filled/Battery10FilledIcon.js";import"../../icon/filled/Battery100FilledIcon.js";import"../../icon/filled/Battery20FilledIcon.js";import"../../icon/filled/Battery30FilledIcon.js";import"../../icon/filled/Battery40FilledIcon.js";import"../../icon/filled/Battery50FilledIcon.js";import"../../icon/filled/Battery60FilledIcon.js";import"../../icon/filled/Battery70FilledIcon.js";import"../../icon/filled/Battery80FilledIcon.js";import"../../icon/filled/Battery90FilledIcon.js";import"../../icon/filled/BatteryChargingFilledIcon.js";import"../../icon/filled/BatteryDischargeFilledIcon.js";import"../../icon/filled/BatteryEmptyFilledIcon.js";import"../../icon/filled/BatteryErrorFilledIcon.js";import"../../icon/filled/BatteryFullFilledIcon.js";import"../../icon/filled/BatteryHighVoltageFilledIcon.js";import"../../icon/filled/BatteryOneThirdFilledIcon.js";import"../../icon/filled/BatteryTwoThirdsFilledIcon.js";import"../../icon/filled/BatteryFilledIcon.js";import"../../icon/filled/BellFilledIcon.js";import"../../icon/filled/BicycleFilledIcon.js";import"../../icon/filled/BoltDischargeFilledIcon.js";import"../../icon/filled/BoltFilledIcon.js";import"../../icon/filled/BoltMotionFilledIcon.js";import"../../icon/filled/BoltOffFilledIcon.js";import"../../icon/filled/BonnetClosedFilledIcon.js";import"../../icon/filled/BonnetOpenFilledIcon.js";import"../../icon/filled/BookmarkFilledIcon.js";import"../../icon/filled/BootClosedFilledIcon.js";import"../../icon/filled/BootOpenFilledIcon.js";import"../../icon/filled/BoxFilledIcon.js";import"../../icon/filled/BrakeFluidFilledIcon.js";import"../../icon/filled/BrakesFilledIcon.js";import"../../icon/filled/BrightnessFilledIcon.js";import"../../icon/filled/BuildingFilledIcon.js";import"../../icon/filled/CalculatorFilledIcon.js";import"../../icon/filled/CalendarCalendarFilledIcon.js";import"../../icon/filled/CalendarCheckFilledIcon.js";import"../../icon/filled/CalendarPointFilledIcon.js";import"../../icon/filled/CameraFilledIcon.js";import"../../icon/filled/CampingFilledIcon.js";import"../../icon/filled/CarAccidentFilledIcon.js";import"../../icon/filled/CarBackFilledIcon.js";import"../../icon/filled/CarComparisonFilledIcon.js";import"../../icon/filled/CarHandFilledIcon.js";import"../../icon/filled/CarInfoFilledIcon.js";import"../../icon/filled/CarMagnifierFilledIcon.js";import"../../icon/filled/CarSeatFilledIcon.js";import"../../icon/filled/CarSendFilledIcon.js";import"../../icon/filled/CarSideFilledIcon.js";import"../../icon/filled/CarStarFilledIcon.js";import"../../icon/filled/CarTechnicalInfoFilledIcon.js";import"../../icon/filled/CareMobilityFilledIcon.js";import"../../icon/filled/CarFilledIcon.js";import"../../icon/filled/CarDoorFilledIcon.js";import"../../icon/filled/CarStatusFilledIcon.js";import"../../icon/filled/CardFilledIcon.js";import"../../icon/filled/ChangeOrderFilledIcon.js";import"../../icon/filled/ChatFilledIcon.js";import"../../icon/filled/CheckFilledIcon.js";import"../../icon/filled/ChevronCircleDownFilledIcon.js";import"../../icon/filled/ChevronCircleLeftFilledIcon.js";import"../../icon/filled/ChevronCircleRightFilledIcon.js";import"../../icon/filled/ChevronCircleUpFilledIcon.js";import"../../icon/filled/ChevronDoubleDownFilledIcon.js";import"../../icon/filled/ChevronDoubleLeftFilledIcon.js";import"../../icon/filled/ChevronDoubleRightFilledIcon.js";import"../../icon/filled/ChevronDoubleUpFilledIcon.js";import"../../icon/filled/ChevronDownFilledIcon.js";import"../../icon/filled/ChevronLeftFilledIcon.js";import"../../icon/filled/ChevronNextFilledIcon.js";import"../../icon/filled/ChevronPreviousFilledIcon.js";import"../../icon/filled/ChevronRightFilledIcon.js";import"../../icon/filled/ChevronUpFilledIcon.js";import"../../icon/filled/CircleBluetoothFilledIcon.js";import"../../icon/filled/CircleCheckFilledIcon.js";import"../../icon/filled/CircleCloseFilledIcon.js";import"../../icon/filled/CircleDownloadFilledIcon.js";import"../../icon/filled/CircleExclamationFilledIcon.js";import"../../icon/filled/CircleInformationFilledIcon.js";import"../../icon/filled/CircleMinusFilledIcon.js";import"../../icon/filled/CirclePlusFilledIcon.js";import"../../icon/filled/CircleQuestionFilledIcon.js";import"../../icon/filled/CircleSlashFilledIcon.js";import"../../icon/filled/CircleUploadFilledIcon.js";import"../../icon/filled/ClipFilledIcon.js";import"../../icon/filled/ClockFilledIcon.js";import"../../icon/filled/CloseFilledIcon.js";import"../../icon/filled/ClosedcaptionsFilledIcon.js";import"../../icon/filled/CloudCO2FilledIcon.js";import"../../icon/filled/CloudDownloadFilledIcon.js";import"../../icon/filled/CloudUploadFilledIcon.js";import"../../icon/filled/ColoursFilledIcon.js";import"../../icon/filled/ComfortFilledIcon.js";import"../../icon/filled/ContrastFilledIcon.js";import"../../icon/filled/ControlsForwardFilledIcon.js";import"../../icon/filled/ControlsPauseFilledIcon.js";import"../../icon/filled/ControlsPlayFilledIcon.js";import"../../icon/filled/ControlsRecordFilledIcon.js";import"../../icon/filled/ControlsReverseFilledIcon.js";import"../../icon/filled/ControlsRewindFilledIcon.js";import"../../icon/filled/ControlsSkipNextFilledIcon.js";import"../../icon/filled/ControlsSkipPreviousFilledIcon.js";import"../../icon/filled/ControlsStopFilledIcon.js";import"../../icon/filled/CookieFilledIcon.js";import"../../icon/filled/CultureFilledIcon.js";import"../../icon/filled/CopyFilledIcon.js";import"../../icon/filled/CutFilledIcon.js";import"../../icon/filled/DealerFilledIcon.js";import"../../icon/filled/DealershipServiceFilledIcon.js";import"../../icon/filled/DeliveryFilledIcon.js";import"../../icon/filled/DetailsFilledIcon.js";import"../../icon/filled/DeviceSmartphoneFilledIcon.js";import"../../icon/filled/DoorsClosedFilledIcon.js";import"../../icon/filled/DoorsOpenFilledIcon.js";import"../../icon/filled/DownloadFilledIcon.js";import"../../icon/filled/DraghandleFilledIcon.js";import"../../icon/filled/EditFilledIcon.js";import"../../icon/filled/ElectricChargerFilledIcon.js";import"../../icon/filled/ElectricChargerOffFilledIcon.js";import"../../icon/filled/EmptystateFilledIcon.js";import"../../icon/filled/EngineFilledIcon.js";import"../../icon/filled/EngineOilFilledIcon.js";import"../../icon/filled/EntertainmentFilledIcon.js";import"../../icon/filled/EqualsignFilledIcon.js";import"../../icon/filled/ExportFilledIcon.js";import"../../icon/filled/ExternalLinkFilledIcon.js";import"../../icon/filled/FacebookFilledIcon.js";import"../../icon/filled/FactoryFilledIcon.js";import"../../icon/filled/FanFilledIcon.js";import"../../icon/filled/FeedbackFilledIcon.js";import"../../icon/filled/FileFilledIcon.js";import"../../icon/filled/FileMissingFilledIcon.js";import"../../icon/filled/FileNewFilledIcon.js";import"../../icon/filled/FilterFilledIcon.js";import"../../icon/filled/FiltersFilledIcon.js";import"../../icon/filled/FingerPrintFilledIcon.js";import"../../icon/filled/FirstAidFilledIcon.js";import"../../icon/filled/FlashFilledIcon.js";import"../../icon/filled/FolderFilledIcon.js";import"../../icon/filled/FolderShareFilledIcon.js";import"../../icon/filled/FoodFilledIcon.js";import"../../icon/filled/FourwheeldriveFilledIcon.js";import"../../icon/filled/FrontaxleFilledIcon.js";import"../../icon/filled/FuelSavingsFilledIcon.js";import"../../icon/filled/FullscreenEnterFilledIcon.js";import"../../icon/filled/FullscreenExitFilledIcon.js";import"../../icon/filled/GarageFilledIcon.js";import"../../icon/filled/GaugeFilledIcon.js";import"../../icon/filled/GlobeFilledIcon.js";import"../../icon/filled/GroupFilledIcon.js";import"../../icon/filled/HandkeyFilledIcon.js";import"../../icon/filled/HealthScanFilledIcon.js";import"../../icon/filled/HeartFilledIcon.js";import"../../icon/filled/HideFilledIcon.js";import"../../icon/filled/HistoryFilledIcon.js";import"../../icon/filled/HomeFilledIcon.js";import"../../icon/filled/HonkFilledIcon.js";import"../../icon/filled/HotelFilledIcon.js";import"../../icon/filled/HybridFilledIcon.js";import"../../icon/filled/IDCardFilledIcon.js";import"../../icon/filled/ImportFilledIcon.js";import"../../icon/filled/InboxFilledIcon.js";import"../../icon/filled/InstagramFilledIcon.js";import"../../icon/filled/LightsFilledIcon.js";import"../../icon/filled/LightsOffFilledIcon.js";import"../../icon/filled/LinkedInFilledIcon.js";import"../../icon/filled/ListFilledIcon.js";import"../../icon/filled/LockClosedFilledIcon.js";import"../../icon/filled/LockOpenedFilledIcon.js";import"../../icon/filled/LockOpenedAltFilledIcon.js";import"../../icon/filled/LockedSteeringWheelFilledIcon.js";import"../../icon/filled/LoginFilledIcon.js";import"../../icon/filled/LogoutFilledIcon.js";import"../../icon/filled/MaintenanceFilledIcon.js";import"../../icon/filled/ManualFilledIcon.js";import"../../icon/filled/MapCenterFilledIcon.js";import"../../icon/filled/MapCompassFilledIcon.js";import"../../icon/filled/MapFlagFilledIcon.js";import"../../icon/filled/MapLocationFilledIcon.js";import"../../icon/filled/MapFilledIcon.js";import"../../icon/filled/MapMarkerFilledIcon.js";import"../../icon/filled/MapMarkerLBOFilledIcon.js";import"../../icon/filled/MapPinFilledIcon.js";import"../../icon/filled/MapViewFilledIcon.js";import"../../icon/filled/MenuWaffleFilledIcon.js";import"../../icon/filled/MenuFilledIcon.js";import"../../icon/filled/MessageFilledIcon.js";import"../../icon/filled/MicrophoneFilledIcon.js";import"../../icon/filled/MinusFilledIcon.js";import"../../icon/filled/MoreHorizontalFilledIcon.js";import"../../icon/filled/MoreVerticalFilledIcon.js";import"../../icon/filled/MotionFilledIcon.js";import"../../icon/filled/MusicalNoteFilledIcon.js";import"../../icon/filled/MuteFilledIcon.js";import"../../icon/filled/NewsFilledIcon.js";import"../../icon/filled/NewspaperFilledIcon.js";import"../../icon/filled/OilFilledIcon.js";import"../../icon/filled/ParkingFilledIcon.js";import"../../icon/filled/PasteFilledIcon.js";import"../../icon/filled/PercentageFilledIcon.js";import"../../icon/filled/PetFilledIcon.js";import"../../icon/filled/PhoneFilledIcon.js";import"../../icon/filled/PictureFilledIcon.js";import"../../icon/filled/PiggybankFilledIcon.js";import"../../icon/filled/PlugCCSType1FilledIcon.js";import"../../icon/filled/PlugCCSType2FilledIcon.js";import"../../icon/filled/PlugCHAdeMOFilledIcon.js";import"../../icon/filled/PlugType1FilledIcon.js";import"../../icon/filled/PlugType2FilledIcon.js";import"../../icon/filled/PlugFilledIcon.js";import"../../icon/filled/PlusFilledIcon.js";import"../../icon/filled/PremiumLFilledIcon.js";import"../../icon/filled/PremiumMFilledIcon.js";import"../../icon/filled/PremiumSFilledIcon.js";import"../../icon/filled/PriceTagFilledIcon.js";import"../../icon/filled/PrintFilledIcon.js";import"../../icon/filled/ProductionFilledIcon.js";import"../../icon/filled/PublicplaceFilledIcon.js";import"../../icon/filled/PumpFilledIcon.js";import"../../icon/filled/PumpCNGFilledIcon.js";import"../../icon/filled/PumpLPGFilledIcon.js";import"../../icon/filled/QRCodeFilledIcon.js";import"../../icon/filled/QualityFilledIcon.js";import"../../icon/filled/QualityMedalFilledIcon.js";import"../../icon/filled/RadarFilledIcon.js";import"../../icon/filled/RefreshFilledIcon.js";import"../../icon/filled/ReloadFilledIcon.js";import"../../icon/filled/RevertFilledIcon.js";import"../../icon/filled/RoadBlockFilledIcon.js";import"../../icon/filled/SaveFilledIcon.js";import"../../icon/filled/SearchMinusFilledIcon.js";import"../../icon/filled/SearchPlusFilledIcon.js";import"../../icon/filled/SearchFilledIcon.js";import"../../icon/filled/SeatheaterFilledIcon.js";import"../../icon/filled/SelectFilledIcon.js";import"../../icon/filled/SelectAllFilledIcon.js";import"../../icon/filled/SendFilledIcon.js";import"../../icon/filled/SettingsFilledIcon.js";import"../../icon/filled/ShapeCircleFilledIcon.js";import"../../icon/filled/ShapeDropFilledIcon.js";import"../../icon/filled/ShapeRectangleHorizontalFilledIcon.js";import"../../icon/filled/ShapeRectangleRoundedFilledIcon.js";import"../../icon/filled/ShapeRectangleVerticalFilledIcon.js";import"../../icon/filled/ShapeRhombusFilledIcon.js";import"../../icon/filled/ShapeShapesFilledIcon.js";import"../../icon/filled/ShapeSquareFilledIcon.js";import"../../icon/filled/ShapeStarFilledIcon.js";import"../../icon/filled/ShapeStarhalfFilledIcon.js";import"../../icon/filled/ShapeTriangleFilledIcon.js";import"../../icon/filled/ShareFilledIcon.js";import"../../icon/filled/ShareSquareFilledIcon.js";import"../../icon/filled/ShieldCheckFilledIcon.js";import"../../icon/filled/ShieldEmptyFilledIcon.js";import"../../icon/filled/ShoppingBagFilledIcon.js";import"../../icon/filled/ShoppingCartFilledIcon.js";import"../../icon/filled/ShowFilledIcon.js";import"../../icon/filled/ShuffleFilledIcon.js";import"../../icon/filled/SignalFilledIcon.js";import"../../icon/filled/SortDownFilledIcon.js";import"../../icon/filled/SortUpFilledIcon.js";import"../../icon/filled/SoundwaveFilledIcon.js";import"../../icon/filled/SparkplugFilledIcon.js";import"../../icon/filled/SportFilledIcon.js";import"../../icon/filled/StatsFilledIcon.js";import"../../icon/filled/SteeringWheelFilledIcon.js";import"../../icon/filled/StopwatchFilledIcon.js";import"../../icon/filled/SubtractFilledIcon.js";import"../../icon/filled/SuitcaseFilledIcon.js";import"../../icon/filled/SunroofFilledIcon.js";import"../../icon/filled/TaskDoneFilledIcon.js";import"../../icon/filled/TaskNoneFilledIcon.js";import"../../icon/filled/TaskScheduledFilledIcon.js";import"../../icon/filled/TechnicalInfoFilledIcon.js";import"../../icon/filled/TelegramFilledIcon.js";import"../../icon/filled/ThumbDownFilledIcon.js";import"../../icon/filled/ThumbUpFilledIcon.js";import"../../icon/filled/TicketFilledIcon.js";import"../../icon/filled/TikTokFilledIcon.js";import"../../icon/filled/ToiletsFilledIcon.js";import"../../icon/filled/TransmissionAutomaticFilledIcon.js";import"../../icon/filled/TransmissionManualFilledIcon.js";import"../../icon/filled/TrashcanFilledIcon.js";import"../../icon/filled/TripCyclicFilledIcon.js";import"../../icon/filled/TripLongTermFilledIcon.js";import"../../icon/filled/TripSingleFilledIcon.js";import"../../icon/filled/TrophyFilledIcon.js";import"../../icon/filled/TwitterFilledIcon.js";import"../../icon/filled/TyreRepairFilledIcon.js";import"../../icon/filled/TyreTracksFilledIcon.js";import"../../icon/filled/TyresFilledIcon.js";import"../../icon/filled/UploadFilledIcon.js";import"../../icon/filled/UserFilledIcon.js";import"../../icon/filled/VentilationFilledIcon.js";import"../../icon/filled/VentilationOffFilledIcon.js";import"../../icon/filled/WalkFilledIcon.js";import"../../icon/filled/WallboxFilledIcon.js";import"../../icon/filled/WalletFilledIcon.js";import"../../icon/filled/WandFilledIcon.js";import"../../icon/filled/WarningFilledIcon.js";import"../../icon/filled/WeatherRainyFilledIcon.js";import"../../icon/filled/WeatherSnowFilledIcon.js";import"../../icon/filled/WellnessFilledIcon.js";import"../../icon/filled/WhatsAppFilledIcon.js";import"../../icon/filled/WheelchairFilledIcon.js";import"../../icon/filled/WheelsFilledIcon.js";import"../../icon/filled/WifiDisabledFilledIcon.js";import"../../icon/filled/WifiHighFilledIcon.js";import"../../icon/filled/WifiLowFilledIcon.js";import"../../icon/filled/WifiMediumFilledIcon.js";import"../../icon/filled/WifiNoSignalFilledIcon.js";import"../../icon/filled/WindowFilledIcon.js";import"../../icon/filled/WindowheaterFilledIcon.js";import"../../icon/filled/WindowsClosedFilledIcon.js";import"../../icon/filled/WindowsOpenFilledIcon.js";import"../../icon/filled/WindscreenWiperFilledIcon.js";import"../../icon/filled/WriteFilledIcon.js";import"../../icon/filled/XFilledIcon.js";import"../../icon/filled/YouTubeFilledIcon.js";import"../../icon/stroke/ATMIcon.js";import"../../icon/stroke/AddIcon.js";import"../../icon/stroke/AirFilterIcon.js";import"../../icon/stroke/AISuggestionIcon.js";import"../../icon/stroke/ArchiveIcon.js";import"../../icon/stroke/ArrowBottomLeftIcon.js";import"../../icon/stroke/ArrowBottomRightIcon.js";import"../../icon/stroke/ArrowCircleBottomLeftIcon.js";import"../../icon/stroke/ArrowCircleBottomRightIcon.js";import"../../icon/stroke/ArrowCircleDownIcon.js";import"../../icon/stroke/ArrowCircleLeftIcon.js";import"../../icon/stroke/ArrowCircleRightIcon.js";import"../../icon/stroke/ArrowCircleTopLeftIcon.js";import"../../icon/stroke/ArrowCircleTopRightIcon.js";import"../../icon/stroke/ArrowCircleUpIcon.js";import"../../icon/stroke/ArrowCurvedDownIcon.js";import"../../icon/stroke/ArrowCurvedDownFlippedIcon.js";import"../../icon/stroke/ArrowCurvedLeftIcon.js";import"../../icon/stroke/ArrowCurvedLeftFlippedIcon.js";import"../../icon/stroke/ArrowCurvedRightIcon.js";import"../../icon/stroke/ArrowCurvedRightFlippedIcon.js";import"../../icon/stroke/ArrowCurvedUpIcon.js";import"../../icon/stroke/ArrowCurvedUpFlippedIcon.js";import"../../icon/stroke/ArrowDownIcon.js";import"../../icon/stroke/ArrowLeftIcon.js";import"../../icon/stroke/ArrowRightIcon.js";import"../../icon/stroke/ArrowTopLeftIcon.js";import"../../icon/stroke/ArrowTopRightIcon.js";import"../../icon/stroke/ArrowUpIcon.js";import"../../icon/stroke/ArtboardIcon.js";import"../../icon/stroke/AssistanceIcon.js";import"../../icon/stroke/AudioMidIcon.js";import"../../icon/stroke/AudioMuteIcon.js";import"../../icon/stroke/AudioOffIcon.js";import"../../icon/stroke/AudioOnIcon.js";import"../../icon/stroke/BadgeIcon.js";import"../../icon/stroke/BackToParentIcon.js";import"../../icon/stroke/BalloonIcon.js";import"../../icon/stroke/BarIcon.js";import"../../icon/stroke/BarCodeIcon.js";import"../../icon/stroke/Battery0Icon.js";import"../../icon/stroke/Battery10Icon.js";import"../../icon/stroke/Battery100Icon.js";import"../../icon/stroke/Battery20Icon.js";import"../../icon/stroke/Battery30Icon.js";import"../../icon/stroke/Battery40Icon.js";import"../../icon/stroke/Battery50Icon.js";import"../../icon/stroke/Battery60Icon.js";import"../../icon/stroke/Battery70Icon.js";import"../../icon/stroke/Battery80Icon.js";import"../../icon/stroke/Battery90Icon.js";import"../../icon/stroke/BatteryEmptyIcon.js";import"../../icon/stroke/BatteryFullIcon.js";import"../../icon/stroke/BatteryHighVoltageIcon.js";import"../../icon/stroke/BatteryOneThirdIcon.js";import"../../icon/stroke/BatteryTwoThirdsIcon.js";import"../../icon/stroke/BatteryChargingIcon.js";import"../../icon/stroke/BatteryDischargeIcon.js";import"../../icon/stroke/BatteryErrorIcon.js";import"../../icon/stroke/BatteryIcon.js";import"../../icon/stroke/BellIcon.js";import"../../icon/stroke/BicycleIcon.js";import"../../icon/stroke/BoltDischargeIcon.js";import"../../icon/stroke/BoltIcon.js";import"../../icon/stroke/BoltMotionIcon.js";import"../../icon/stroke/BoltOffIcon.js";import"../../icon/stroke/BonnetClosedIcon.js";import"../../icon/stroke/BonnetOpenIcon.js";import"../../icon/stroke/BookmarkIcon.js";import"../../icon/stroke/BootClosedIcon.js";import"../../icon/stroke/BootOpenIcon.js";import"../../icon/stroke/BoxIcon.js";import"../../icon/stroke/BrakeFluidIcon.js";import"../../icon/stroke/BrakesIcon.js";import"../../icon/stroke/BrightnessIcon.js";import"../../icon/stroke/BuildingIcon.js";import"../../icon/stroke/CalculatorIcon.js";import"../../icon/stroke/CalendarCalendarIcon.js";import"../../icon/stroke/CalendarCheckIcon.js";import"../../icon/stroke/CalendarPointIcon.js";import"../../icon/stroke/CameraIcon.js";import"../../icon/stroke/CampingIcon.js";import"../../icon/stroke/CarAccidentIcon.js";import"../../icon/stroke/CarBackIcon.js";import"../../icon/stroke/CarComparisonIcon.js";import"../../icon/stroke/CarHandIcon.js";import"../../icon/stroke/CarInfoIcon.js";import"../../icon/stroke/CarMagnifierIcon.js";import"../../icon/stroke/CarSeatIcon.js";import"../../icon/stroke/CarSendIcon.js";import"../../icon/stroke/CarSideIcon.js";import"../../icon/stroke/CarStarIcon.js";import"../../icon/stroke/CarTechnicalInfoIcon.js";import"../../icon/stroke/CareMobilityIcon.js";import"../../icon/stroke/CarIcon.js";import"../../icon/stroke/CarDoorIcon.js";import"../../icon/stroke/CarStatusIcon.js";import"../../icon/stroke/CardIcon.js";import"../../icon/stroke/ChangeOrderIcon.js";import"../../icon/stroke/ChatIcon.js";import"../../icon/stroke/CheckIcon.js";import"../../icon/stroke/ChevronCircleDownIcon.js";import"../../icon/stroke/ChevronCircleLeftIcon.js";import"../../icon/stroke/ChevronCircleRightIcon.js";import"../../icon/stroke/ChevronCircleUpIcon.js";import"../../icon/stroke/ChevronDoubleDownIcon.js";import"../../icon/stroke/ChevronDoubleLeftIcon.js";import"../../icon/stroke/ChevronDoubleRightIcon.js";import"../../icon/stroke/ChevronDoubleUpIcon.js";import"../../icon/stroke/ChevronDownIcon.js";import"../../icon/stroke/ChevronLeftIcon.js";import"../../icon/stroke/ChevronNextIcon.js";import"../../icon/stroke/ChevronPreviousIcon.js";import"../../icon/stroke/ChevronRightIcon.js";import"../../icon/stroke/ChevronUpIcon.js";import"../../icon/stroke/CircleBluetoothIcon.js";import"../../icon/stroke/CircleCheckIcon.js";import"../../icon/stroke/CircleCloseIcon.js";import"../../icon/stroke/CircleDownloadIcon.js";import"../../icon/stroke/CircleExclamationIcon.js";import"../../icon/stroke/CircleInformationIcon.js";import"../../icon/stroke/CircleMinusIcon.js";import"../../icon/stroke/CirclePlusIcon.js";import"../../icon/stroke/CircleQuestionIcon.js";import"../../icon/stroke/CircleSlashIcon.js";import"../../icon/stroke/CircleUploadIcon.js";import"../../icon/stroke/ClipIcon.js";import"../../icon/stroke/ClockIcon.js";import"../../icon/stroke/CloseIcon.js";import"../../icon/stroke/ClosedcaptionsIcon.js";import"../../icon/stroke/CloudCO2Icon.js";import"../../icon/stroke/CloudDownloadIcon.js";import"../../icon/stroke/CloudUploadIcon.js";import"../../icon/stroke/ColoursIcon.js";import"../../icon/stroke/ComfortIcon.js";import"../../icon/stroke/ContrastIcon.js";import"../../icon/stroke/ControlsForwardIcon.js";import"../../icon/stroke/ControlsPauseIcon.js";import"../../icon/stroke/ControlsPlayIcon.js";import"../../icon/stroke/ControlsRecordIcon.js";import"../../icon/stroke/ControlsReverseIcon.js";import"../../icon/stroke/ControlsRewindIcon.js";import"../../icon/stroke/ControlsSkipNextIcon.js";import"../../icon/stroke/ControlsSkipPreviousIcon.js";import"../../icon/stroke/ControlsStopIcon.js";import"../../icon/stroke/CookieIcon.js";import"../../icon/stroke/CopyIcon.js";import"../../icon/stroke/CultureIcon.js";import"../../icon/stroke/CutIcon.js";import"../../icon/stroke/DealerIcon.js";import"../../icon/stroke/DealershipServiceIcon.js";import"../../icon/stroke/DeliveryIcon.js";import"../../icon/stroke/DetailsIcon.js";import"../../icon/stroke/DeviceSmartphoneIcon.js";import"../../icon/stroke/DoorsClosedIcon.js";import"../../icon/stroke/DoorsOpenIcon.js";import"../../icon/stroke/DownloadIcon.js";import"../../icon/stroke/DraghandleIcon.js";import"../../icon/stroke/EditIcon.js";import"../../icon/stroke/ElectricChargerIcon.js";import"../../icon/stroke/ElectricChargerOffIcon.js";import"../../icon/stroke/EmptystateIcon.js";import"../../icon/stroke/EngineIcon.js";import"../../icon/stroke/EngineOilIcon.js";import"../../icon/stroke/EntertainmentIcon.js";import"../../icon/stroke/EqualsignIcon.js";import"../../icon/stroke/ExportIcon.js";import"../../icon/stroke/ExternalLinkIcon.js";import"../../icon/stroke/FacebookIcon.js";import"../../icon/stroke/FactoryIcon.js";import"../../icon/stroke/FanIcon.js";import"../../icon/stroke/FeedbackIcon.js";import"../../icon/stroke/FileIcon.js";import"../../icon/stroke/FileMissingIcon.js";import"../../icon/stroke/FileNewIcon.js";import"../../icon/stroke/FilterIcon.js";import"../../icon/stroke/FiltersIcon.js";import"../../icon/stroke/FingerPrintIcon.js";import"../../icon/stroke/FirstAidIcon.js";import"../../icon/stroke/FlashIcon.js";import"../../icon/stroke/FolderIcon.js";import"../../icon/stroke/FolderShareIcon.js";import"../../icon/stroke/FoodIcon.js";import"../../icon/stroke/FourwheeldriveIcon.js";import"../../icon/stroke/FrontaxleIcon.js";import"../../icon/stroke/FuelSavingsIcon.js";import"../../icon/stroke/FullscreenEnterIcon.js";import"../../icon/stroke/FullscreenExitIcon.js";import"../../icon/stroke/GarageIcon.js";import"../../icon/stroke/GaugeIcon.js";import"../../icon/stroke/GlobeIcon.js";import"../../icon/stroke/GroupIcon.js";import"../../icon/stroke/HandkeyIcon.js";import"../../icon/stroke/HealthScanIcon.js";import"../../icon/stroke/HeartIcon.js";import"../../icon/stroke/HideIcon.js";import"../../icon/stroke/HistoryIcon.js";import"../../icon/stroke/HomeIcon.js";import"../../icon/stroke/HonkIcon.js";import"../../icon/stroke/HotelIcon.js";import"../../icon/stroke/HybridIcon.js";import"../../icon/stroke/IDCardIcon.js";import"../../icon/stroke/ImportIcon.js";import"../../icon/stroke/InboxIcon.js";import"../../icon/stroke/InstagramIcon.js";import"../../icon/stroke/LightsIcon.js";import"../../icon/stroke/LightsOffIcon.js";import"../../icon/stroke/LinkedInIcon.js";import"../../icon/stroke/ListIcon.js";import"../../icon/stroke/LockClosedIcon.js";import"../../icon/stroke/LockOpenedIcon.js";import"../../icon/stroke/LockOpenedAltIcon.js";import"../../icon/stroke/LockedSteeringWheelIcon.js";import"../../icon/stroke/LoginIcon.js";import"../../icon/stroke/LogoutIcon.js";import"../../icon/stroke/MaintenanceIcon.js";import"../../icon/stroke/ManualIcon.js";import"../../icon/stroke/MapCenterIcon.js";import"../../icon/stroke/MapCompassIcon.js";import"../../icon/stroke/MapFlagIcon.js";import"../../icon/stroke/MapLocationIcon.js";import"../../icon/stroke/MapIcon.js";import"../../icon/stroke/MapMarkerIcon.js";import"../../icon/stroke/MapMarkerLBOIcon.js";import"../../icon/stroke/MapPinIcon.js";import"../../icon/stroke/MapViewIcon.js";import"../../icon/stroke/MenuWaffleIcon.js";import"../../icon/stroke/MenuIcon.js";import"../../icon/stroke/MessageIcon.js";import"../../icon/stroke/MicrophoneIcon.js";import"../../icon/stroke/MinusIcon.js";import"../../icon/stroke/MoreHorizontalIcon.js";import"../../icon/stroke/MoreVerticalIcon.js";import"../../icon/stroke/MotionIcon.js";import"../../icon/stroke/MusicalNoteIcon.js";import"../../icon/stroke/MuteIcon.js";import"../../icon/stroke/NewsIcon.js";import"../../icon/stroke/NewspaperIcon.js";import"../../icon/stroke/OilIcon.js";import"../../icon/stroke/ParkingIcon.js";import"../../icon/stroke/PasteIcon.js";import"../../icon/stroke/PercentageIcon.js";import"../../icon/stroke/PetIcon.js";import"../../icon/stroke/PhoneIcon.js";import"../../icon/stroke/PictureIcon.js";import"../../icon/stroke/PiggybankIcon.js";import"../../icon/stroke/PlugCCSType1Icon.js";import"../../icon/stroke/PlugCCSType2Icon.js";import"../../icon/stroke/PlugCHAdeMOIcon.js";import"../../icon/stroke/PlugType1Icon.js";import"../../icon/stroke/PlugType2Icon.js";import"../../icon/stroke/PlugIcon.js";import"../../icon/stroke/PlusIcon.js";import"../../icon/stroke/PremiumLIcon.js";import"../../icon/stroke/PremiumMIcon.js";import"../../icon/stroke/PremiumSIcon.js";import"../../icon/stroke/PriceTagIcon.js";import"../../icon/stroke/PrintIcon.js";import"../../icon/stroke/ProductionIcon.js";import"../../icon/stroke/PublicplaceIcon.js";import"../../icon/stroke/PumpIcon.js";import"../../icon/stroke/PumpCNGIcon.js";import"../../icon/stroke/PumpLPGIcon.js";import"../../icon/stroke/QRCodeIcon.js";import"../../icon/stroke/QualityIcon.js";import"../../icon/stroke/QualityMedalIcon.js";import"../../icon/stroke/RadarIcon.js";import"../../icon/stroke/RefreshIcon.js";import"../../icon/stroke/ReloadIcon.js";import"../../icon/stroke/RevertIcon.js";import"../../icon/stroke/RoadBlockIcon.js";import"../../icon/stroke/SaveIcon.js";import"../../icon/stroke/SearchMinusIcon.js";import"../../icon/stroke/SearchPlusIcon.js";import"../../icon/stroke/SearchIcon.js";import"../../icon/stroke/SeatheaterIcon.js";import"../../icon/stroke/SelectIcon.js";import"../../icon/stroke/SelectAllIcon.js";import"../../icon/stroke/SendIcon.js";import"../../icon/stroke/SettingsIcon.js";import"../../icon/stroke/ShapeCircleIcon.js";import"../../icon/stroke/ShapeDropIcon.js";import"../../icon/stroke/ShapeRectangleHorizontalIcon.js";import"../../icon/stroke/ShapeRectangleRoundedIcon.js";import"../../icon/stroke/ShapeRectangleVerticalIcon.js";import"../../icon/stroke/ShapeRhombusIcon.js";import"../../icon/stroke/ShapeShapesIcon.js";import"../../icon/stroke/ShapeSquareIcon.js";import"../../icon/stroke/ShapeStarIcon.js";import"../../icon/stroke/ShapeStarhalfIcon.js";import"../../icon/stroke/ShapeTriangleIcon.js";import"../../icon/stroke/ShareIcon.js";import"../../icon/stroke/ShareSquareIcon.js";import"../../icon/stroke/ShieldCheckIcon.js";import"../../icon/stroke/ShieldEmptyIcon.js";import"../../icon/stroke/ShoppingBagIcon.js";import"../../icon/stroke/ShoppingCartIcon.js";import"../../icon/stroke/ShowIcon.js";import"../../icon/stroke/ShuffleIcon.js";import"../../icon/stroke/SignalIcon.js";import"../../icon/stroke/SortDownIcon.js";import"../../icon/stroke/SortUpIcon.js";import"../../icon/stroke/SoundwaveIcon.js";import"../../icon/stroke/SparkplugIcon.js";import"../../icon/stroke/SportIcon.js";import"../../icon/stroke/StatsIcon.js";import"../../icon/stroke/SteeringWheelIcon.js";import"../../icon/stroke/StopwatchIcon.js";import"../../icon/stroke/SubtractIcon.js";import"../../icon/stroke/SuitcaseIcon.js";import"../../icon/stroke/SunroofIcon.js";import"../../icon/stroke/TaskDoneIcon.js";import"../../icon/stroke/TaskNoneIcon.js";import"../../icon/stroke/TaskScheduledIcon.js";import"../../icon/stroke/TechnicalInfoIcon.js";import"../../icon/stroke/TelegramIcon.js";import"../../icon/stroke/ThumbDownIcon.js";import"../../icon/stroke/ThumbUpIcon.js";import"../../icon/stroke/TicketIcon.js";import"../../icon/stroke/TikTokIcon.js";import"../../icon/stroke/ToiletsIcon.js";import"../../icon/stroke/TransmissionAutomaticIcon.js";import"../../icon/stroke/TransmissionManualIcon.js";import"../../icon/stroke/TrashcanIcon.js";import"../../icon/stroke/TripCyclicIcon.js";import"../../icon/stroke/TripLongTermIcon.js";import"../../icon/stroke/TripSingleIcon.js";import"../../icon/stroke/TrophyIcon.js";import"../../icon/stroke/TwitterIcon.js";import"../../icon/stroke/TyreRepairIcon.js";import"../../icon/stroke/TyreTracksIcon.js";import"../../icon/stroke/TyresIcon.js";import"../../icon/stroke/UploadIcon.js";import"../../icon/stroke/UserIcon.js";import"../../icon/stroke/VentilationIcon.js";import"../../icon/stroke/VentilationOffIcon.js";import"../../icon/stroke/WalkIcon.js";import"../../icon/stroke/WallboxIcon.js";import"../../icon/stroke/WalletIcon.js";import"../../icon/stroke/WandIcon.js";import"../../icon/stroke/WarningIcon.js";import"../../icon/stroke/WeatherRainyIcon.js";import"../../icon/stroke/WeatherSnowIcon.js";import"../../icon/stroke/WellnessIcon.js";import"../../icon/stroke/WhatsAppIcon.js";import"../../icon/stroke/WheelchairIcon.js";import"../../icon/stroke/WheelsIcon.js";import"../../icon/stroke/WifiDisabledIcon.js";import"../../icon/stroke/WifiHighIcon.js";import"../../icon/stroke/WifiLowIcon.js";import"../../icon/stroke/WifiMediumIcon.js";import"../../icon/stroke/WifiNoSignalIcon.js";import"../../icon/stroke/WindowIcon.js";import"../../icon/stroke/WindowheaterIcon.js";import"../../icon/stroke/WindowsClosedIcon.js";import"../../icon/stroke/WindowsOpenIcon.js";import"../../icon/stroke/WindscreenWiperIcon.js";import"../../icon/stroke/WriteIcon.js";import"../../icon/stroke/XIcon.js";import"../../icon/stroke/YouTubeIcon.js";const a=e((e,p)=>{var{variant:d}=e,a=o(e,["variant"]);const[k,F]=r(!1),[C,h]=r(!1),u=c(()=>{h(!1)},[]),g=t(()=>i(n,{children:[a.label,l(j,{name:"chevron-down",className:C?"isOpen":"",fontSize:"small"})]}),[C,a.label]),S=c(()=>{F(!0)},[]),w=c(o=>{F(!1),a.onBlur&&a.onBlur(o)},[a]);return l(s,{onClickAway:u,children:i("span",{children:[l("div",{children:l(m,{focusVisible:k,variant:d,children:l(f,{className:"shadow"===d&&"MuiChip-shadow",ref:p,variant:"filled",icon:a.icon?l(j,{className:a.icon}):void 0,disabled:a.disabled,label:g,onClick:()=>h(!C),onFocusVisible:S,onBlur:w,isOpen:C})})}),l(I,{isOpen:C,marginTop:14,isEmptyMenu:!0,children:a.children})]})})}),f=p(d,{shouldForwardProp:o=>"isOpen"!==o})(()=>({"& .chevron-down":{marginLeft:"8px",transform:"rotate(0deg)",top:"4px",transition:"transform 0.6s","&.isOpen":{transform:"rotate(180deg) translateY(2px)",transformOrigin:"50%"}}}));export{a as ChipDropdownChildren};
 //# sourceMappingURL=chipDropdownChildren.js.map

package/components/chip/chipDropdownChildren/chipDropdownChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"chipDropdownChildren.js","sources":["../../../../src/components/chip/chipDropdownChildren/chipDropdownChildren.tsx"],"sourcesContent":["import React, { useState, useCallback, useMemo, forwardRef, HTMLAttributes } from 'react';\nimport { ClickAwayListener, Chip as MuiChip, ChipProps as MuiChipProps, styled } from '@mui/material';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\nimport MenuContainer from '../../common/menuContainer';\nimport { Icon } from '../../icon';\n\n/**\n * @interface ChipProps\n * @description Base definition of SkodaFlow Chip independent on core implementation.\n * Properties are inherited from HTML div element\n */\nexport interface ChipDropdownChildrenProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The label referenced to the text field\n   */\n  label?: string;\n\n  /**\n   * Disabled, not clickable chip\n   */\n  disabled?: boolean;\n\n  /**\n   * Icon name. For example \"check\". If no prefix is defined, default SKODA icon font is used\n   */\n  icon?: string;\n\n  /**\n   * Variant of chip defines different look and style\n   */\n  variant?: 'solid' | 'transparent' | 'shadow';\n}\n\n/**\n * @deprecated This component is deprecated. Use themed Chip Component from @mui/material instead.\n */\nexport const ChipDropdownChildren = forwardRef<HTMLDivElement, ChipDropdownChildrenProps>(\n  ({ variant, ...props }, ref) => {\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleClickAway = useCallback(() => {\n      setIsOpen(false);\n    }, []);\n\n    const renderLabel = useMemo(() => {\n      return (\n        <>\n          {props.label}\n          <Icon name=\"chevron-down\" className={isOpen ? 'isOpen' : ''} fontSize=\"small\" />\n        </>\n      );\n    }, [isOpen, props.label]);\n\n    const onFocusVisibleHandler = useCallback(() => {\n      setFocusVisible(true);\n    }, []);\n\n    const onBlur = useCallback(\n      (e: any) => {\n        setFocusVisible(false);\n        if (props.onBlur) props.onBlur(e);\n      },\n      [props],\n    );\n\n    return (\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <span>\n          <div>\n            <ChipFocusVisibleStyled focusVisible={focusVisibled} variant={variant}>\n              <ChipDropdownChildrenStyled\n                className={variant === 'shadow' && 'MuiChip-shadow'}\n                ref={ref}\n                variant={'filled'}\n                icon={props.icon ? <Icon className={props.icon} /> : undefined}\n                disabled={props.disabled}\n                label={renderLabel}\n                onClick={() => setIsOpen(!isOpen)}\n                onFocusVisible={onFocusVisibleHandler}\n                onBlur={onBlur}\n                isOpen={isOpen}\n              />\n            </ChipFocusVisibleStyled>\n          </div>\n          <MenuContainer isOpen={isOpen} marginTop={14} isEmptyMenu>\n            {props.children}\n          </MenuContainer>\n        </span>\n      </ClickAwayListener>\n    );\n  },\n);\n\n/**\n * @description Chip styling definition based on props\n */\nconst ChipDropdownChildrenStyled = styled(MuiChip, {\n  shouldForwardProp: (prop) => prop !== 'isOpen',\n})<MuiChipProps & { isOpen: boolean } & { onFocusVisible: React.FocusEventHandler<any> }>(() => ({\n  '& .chevron-down': {\n    marginLeft: '8px',\n    transform: 'rotate(0deg)',\n    top: '4px',\n    transition: 'transform 0.6s',\n    '&.isOpen': {\n      transform: 'rotate(180deg) translateY(2px)',\n      transformOrigin: '50%',\n    },\n  },\n}));\n"],"names":["ChipDropdownChildren","forwardRef","_a","ref","variant","props","__rest","focusVisibled","setFocusVisible","useState","isOpen","setIsOpen","handleClickAway","useCallback","renderLabel","useMemo","_jsxs","_Fragment","children","label","_jsx","Icon","name","className","fontSize","onFocusVisibleHandler","onBlur","e","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","focusVisible","ChipDropdownChildrenStyled","icon","undefined","disabled","onClick","onFocusVisible","MenuContainer","marginTop","isEmptyMenu","styled","MuiChip","shouldForwardProp","prop","marginLeft","transform","top","transition","transformOrigin"],"mappings":"gaAoCa,MAAAA,EAAuBC,GAClC,CAACC,EAAuBC,KAAvB,IAAAC,QAAEA,GAAmBF,EAAPG,EAAKC,EAAAJ,EAAnB,aACC,MAAOK,EAAeC,GAAmBC,GAAS,IAC3CC,EAAQC,GAAaF,GAAS,GAE/BG,EAAkBC,GAAY,KAClCF,GAAU,EAAM,GACf,IAEGG,EAAcC,GAAQ,IAExBC,EAAAC,EAAA,CAAAC,SAAA,CACGb,EAAMc,MACPC,EAACC,EAAK,CAAAC,KAAK,eAAeC,UAAWb,EAAS,SAAW,GAAIc,SAAS,cAGzE,CAACd,EAAQL,EAAMc,QAEZM,EAAwBZ,GAAY,KACxCL,GAAgB,EAAK,GACpB,IAEGkB,EAASb,GACZc,IACCnB,GAAgB,GACZH,EAAMqB,QAAQrB,EAAMqB,OAAOC,EAAE,GAEnC,CAACtB,IAGH,OACEe,EAACQ,EAAkB,CAAAC,YAAajB,EAC9BM,SAAAF,EAAA,OAAA,CAAAE,SAAA,CACEE,EACE,MAAA,CAAAF,SAAAE,EAACU,EAAsB,CAACC,aAAcxB,EAAeH,QAASA,EAC5Dc,SAAAE,EAACY,EAA0B,CACzBT,UAAuB,WAAZnB,GAAwB,iBACnCD,IAAKA,EACLC,QAAS,SACT6B,KAAM5B,EAAM4B,KAAOb,EAACC,EAAI,CAACE,UAAWlB,EAAM4B,YAAWC,EACrDC,SAAU9B,EAAM8B,SAChBhB,MAAOL,EACPsB,QAAS,IAAMzB,GAAWD,GAC1B2B,eAAgBZ,EAChBC,OAAQA,EACRhB,OAAQA,QAIdU,EAACkB,EAAc,CAAA5B,OAAQA,EAAQ6B,UAAW,GAAIC,aAC3C,EAAAtB,SAAAb,EAAMa,eAGO,IAQpBc,EAA6BS,EAAOC,EAAS,CACjDC,kBAAoBC,GAAkB,WAATA,GADIH,EAEuD,KAAO,CAC/F,kBAAmB,CACjBI,WAAY,MACZC,UAAW,eACXC,IAAK,MACLC,WAAY,iBACZ,WAAY,CACVF,UAAW,iCACXG,gBAAiB"}
+{"version":3,"file":"chipDropdownChildren.js","sources":["../../../../src/components/chip/chipDropdownChildren/chipDropdownChildren.tsx"],"sourcesContent":["import React, { useState, useCallback, useMemo, forwardRef, HTMLAttributes } from 'react';\nimport { ClickAwayListener, Chip as MuiChip, ChipProps as MuiChipProps, styled } from '@mui/material';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\nimport MenuContainer from '../../common/menuContainer';\nimport { Icon } from '../../icon';\n\n/**\n * @interface ChipProps\n * @description Base definition of SkodaFlow Chip independent on core implementation.\n * Properties are inherited from HTML div element\n */\nexport interface ChipDropdownChildrenProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The label referenced to the text field\n   */\n  label?: string;\n\n  /**\n   * Disabled, not clickable chip\n   */\n  disabled?: boolean;\n\n  /**\n   * Icon name. For example \"check\". If no prefix is defined, default SKODA icon font is used\n   */\n  icon?: string;\n\n  /**\n   * Variant of chip defines different look and style\n   */\n  variant?: 'solid' | 'transparent' | 'shadow';\n}\n\n/**\n * @deprecated This component is deprecated. Use themed Chip Component from @mui/material instead.\n */\nexport const ChipDropdownChildren = forwardRef<HTMLDivElement, ChipDropdownChildrenProps>(\n  ({ variant, ...props }, ref) => {\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleClickAway = useCallback(() => {\n      setIsOpen(false);\n    }, []);\n\n    const renderLabel = useMemo(() => {\n      return (\n        <>\n          {props.label}\n          <Icon name=\"chevron-down\" className={isOpen ? 'isOpen' : ''} fontSize=\"small\" />\n        </>\n      );\n    }, [isOpen, props.label]);\n\n    const onFocusVisibleHandler = useCallback(() => {\n      setFocusVisible(true);\n    }, []);\n\n    const onBlur = useCallback(\n      (e: any) => {\n        setFocusVisible(false);\n        if (props.onBlur) props.onBlur(e);\n      },\n      [props],\n    );\n\n    return (\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <span>\n          <div>\n            <ChipFocusVisibleStyled focusVisible={focusVisibled} variant={variant}>\n              <ChipDropdownChildrenStyled\n                className={variant === 'shadow' && 'MuiChip-shadow'}\n                ref={ref}\n                variant={'filled'}\n                icon={props.icon ? <Icon className={props.icon} /> : undefined}\n                disabled={props.disabled}\n                label={renderLabel}\n                onClick={() => setIsOpen(!isOpen)}\n                onFocusVisible={onFocusVisibleHandler}\n                onBlur={onBlur}\n                isOpen={isOpen}\n              />\n            </ChipFocusVisibleStyled>\n          </div>\n          <MenuContainer isOpen={isOpen} marginTop={14} isEmptyMenu>\n            {props.children}\n          </MenuContainer>\n        </span>\n      </ClickAwayListener>\n    );\n  },\n);\n\n/**\n * @description Chip styling definition based on props\n */\nconst ChipDropdownChildrenStyled = styled(MuiChip, {\n  shouldForwardProp: (prop) => prop !== 'isOpen',\n})<MuiChipProps & { isOpen: boolean } & { onFocusVisible: React.FocusEventHandler<any> }>(() => ({\n  '& .chevron-down': {\n    marginLeft: '8px',\n    transform: 'rotate(0deg)',\n    top: '4px',\n    transition: 'transform 0.6s',\n    '&.isOpen': {\n      transform: 'rotate(180deg) translateY(2px)',\n      transformOrigin: '50%',\n    },\n  },\n}));\n"],"names":["ChipDropdownChildren","forwardRef","_a","ref","variant","props","__rest","focusVisibled","setFocusVisible","useState","isOpen","setIsOpen","handleClickAway","useCallback","renderLabel","useMemo","_jsxs","_Fragment","children","label","_jsx","Icon","name","className","fontSize","onFocusVisibleHandler","onBlur","e","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","focusVisible","ChipDropdownChildrenStyled","icon","undefined","disabled","onClick","onFocusVisible","MenuContainer","marginTop","isEmptyMenu","styled","MuiChip","shouldForwardProp","prop","marginLeft","transform","top","transition","transformOrigin"],"mappings":"+siCAoCO,MAAMA,EAAuBC,EAClC,CAACC,EAAuBC,KAAvB,IAAAC,QAAEA,GAAOF,EAAKG,EAAKC,EAAAJ,EAAnB,aACC,MAAOK,EAAeC,GAAmBC,GAAS,IAC3CC,EAAQC,GAAaF,GAAS,GAE/BG,EAAkBC,EAAY,KAClCF,GAAU,IACT,IAEGG,EAAcC,EAAQ,IAExBC,EAAAC,EAAA,CAAAC,SAAA,CACGb,EAAMc,MACPC,EAACC,EAAI,CAACC,KAAK,eAAeC,UAAWb,EAAS,SAAW,GAAIc,SAAS,aAGzE,CAACd,EAAQL,EAAMc,QAEZM,EAAwBZ,EAAY,KACxCL,GAAgB,IACf,IAEGkB,EAASb,EACZc,IACCnB,GAAgB,GACZH,EAAMqB,QAAQrB,EAAMqB,OAAOC,IAEjC,CAACtB,IAGH,OACEe,EAACQ,EAAiB,CAACC,YAAajB,EAAeM,SAC7CF,EAAA,OAAA,CAAAE,SAAA,CACEE,EAAA,MAAA,CAAAF,SACEE,EAACU,EAAsB,CAACC,aAAcxB,EAAeH,QAASA,EAAOc,SACnEE,EAACY,EAA0B,CACzBT,UAAuB,WAAZnB,GAAwB,iBACnCD,IAAKA,EACLC,QAAS,SACT6B,KAAM5B,EAAM4B,KAAOb,EAACC,EAAI,CAACE,UAAWlB,EAAM4B,YAAWC,EACrDC,SAAU9B,EAAM8B,SAChBhB,MAAOL,EACPsB,QAAS,IAAMzB,GAAWD,GAC1B2B,eAAgBZ,EAChBC,OAAQA,EACRhB,OAAQA,QAIdU,EAACkB,EAAa,CAAC5B,OAAQA,EAAQ6B,UAAW,GAAIC,aAAW,EAAAtB,SACtDb,EAAMa,kBAWbc,EAA6BS,EAAOC,EAAS,CACjDC,kBAAoBC,GAAkB,WAATA,GADIH,CAEuD,KAAA,CACxF,kBAAmB,CACjBI,WAAY,MACZC,UAAW,eACXC,IAAK,MACLC,WAAY,iBACZ,WAAY,CACVF,UAAW,iCACXG,gBAAiB"}

package/components/chip/chipFocusVisibleStyled.d.ts

@@ -1,4 +1,4 @@
-declare const ChipFocusVisibleStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+declare const ChipFocusVisibleStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     focusVisible: boolean;
     variant: any;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/chip/chipFocusVisibleStyled.js

@@ -1,2 +1,2 @@
-import{styled as e}from"@mui/material/styles";const i=e("div")((({theme:e,focusVisible:i,variant:a})=>({display:"inline-flex",borderRadius:"image"===a?6:50,transition:"none",boxShadow:i?`0 0 0 2px ${e.palette.onSurface.os900}`:void 0})));export{i as default};
+import{styled as e}from"@mui/material/styles";const i=e("div")(({theme:e,focusVisible:i,variant:a})=>({display:"inline-flex",borderRadius:"image"===a?6:50,transition:"none",boxShadow:i?`0 0 0 2px ${e.palette.onSurface.os900}`:void 0}));export{i as default};
 //# sourceMappingURL=chipFocusVisibleStyled.js.map

package/components/chip/chipFocusVisibleStyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"chipFocusVisibleStyled.js","sources":["../../../src/components/chip/chipFocusVisibleStyled.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\n\nconst ChipFocusVisibleStyled = styled('div')<{ focusVisible: boolean; variant: any }>(({\n  theme,\n  focusVisible,\n  variant,\n}) => {\n  return {\n    display: 'inline-flex',\n    borderRadius: variant === 'image' ? 6 : 50,\n    transition: 'none',\n    boxShadow: focusVisible ? `0 0 0 2px ${theme.palette.onSurface.os900}` : undefined,\n  };\n});\n\nexport default ChipFocusVisibleStyled;\n"],"names":["ChipFocusVisibleStyled","styled","theme","focusVisible","variant","display","borderRadius","transition","boxShadow","palette","onSurface","os900","undefined"],"mappings":"8CAEA,MAAMA,EAAyBC,EAAO,MAAPA,EAAuD,EACpFC,QACAC,eACAC,cAEO,CACLC,QAAS,cACTC,aAA0B,UAAZF,EAAsB,EAAI,GACxCG,WAAY,OACZC,UAAWL,EAAe,aAAaD,EAAMO,QAAQC,UAAUC,aAAUC"}
+{"version":3,"file":"chipFocusVisibleStyled.js","sources":["../../../src/components/chip/chipFocusVisibleStyled.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\n\nconst ChipFocusVisibleStyled = styled('div')<{ focusVisible: boolean; variant: any }>(({\n  theme,\n  focusVisible,\n  variant,\n}) => {\n  return {\n    display: 'inline-flex',\n    borderRadius: variant === 'image' ? 6 : 50,\n    transition: 'none',\n    boxShadow: focusVisible ? `0 0 0 2px ${theme.palette.onSurface.os900}` : undefined,\n  };\n});\n\nexport default ChipFocusVisibleStyled;\n"],"names":["ChipFocusVisibleStyled","styled","theme","focusVisible","variant","display","borderRadius","transition","boxShadow","palette","onSurface","os900","undefined"],"mappings":"8CAEA,MAAMA,EAAyBC,EAAO,MAAPA,CAAuD,EACpFC,QACAC,eACAC,cAEO,CACLC,QAAS,cACTC,aAA0B,UAAZF,EAAsB,EAAI,GACxCG,WAAY,OACZC,UAAWL,EAAe,aAAaD,EAAMO,QAAQC,UAAUC,aAAUC"}

package/components/chip/chipImage/chipImage.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as i,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useState as t,useRef as o,useCallback as n}from"react";import{styled as l,Chip as c}from"@mui/material";import p from"../chipFocusVisibleStyled.js";const d=a(((l,c)=>{const{onBlur:d,children:m,label:h,disabled:u,variant:f="image",imageUrl:g,imageAlt:b,isChecked:x,onChange:y,name:v,id:C=`chip-image-${Date.now()}`}=l,[k,w]=t(!1),j=o(),S=e=>{y&&y(e,!x)},M=n((e=>{w(!1),d&&d(e)}),[d]),B=n((()=>{j&&j.current.click()}),[]),F=n((()=>{w(!0)}),[]),V=a(((a,t)=>{var{onChange:o}=a,n=e(a,["onChange"]);return i("div",Object.assign({},n,{ref:t,children:[r("input",{ref:j,onChange:S,type:"checkbox",id:C,name:v,value:C,checked:x,readOnly:!0}),r("img",{src:g,alt:b}),r("div",{children:r("span",{children:m||h})})]}))}));return r(p,{focusVisible:k,variant:f,children:r(s,{ref:c,component:V,label:h,disabled:u,onClick:B,className:x?"Mui-checked":"",onFocusVisible:F,onBlur:M,variant:"filled",color:x?"primary":"default"})})})),s=l(c)((({theme:e})=>({"& div":{width:"100%",whiteSpace:"pre-wrap"},"&.MuiChip-root":{backgroundColor:e.palette.surface.primary,borderRadius:"4px",height:"auto",width:"120px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",padding:"11px 0 13px 0",overflow:"hidden","&:hover":{span:{color:e.palette.onSurface.os600}},"&.Mui-checked":{backgroundColor:e.palette.brand.quarternary,span:{color:e.palette.brand.primary},"&:hover":{span:{color:e.palette.brandHover.primary}}},"&.Mui-disabled":{backgroundColor:e.palette.surface.primary,span:{color:e.palette.disabled.primary}},"&:active":{boxShadow:"none"},"& > input":{display:"none"},div:{display:"flex",flexGrow:1},span:{display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",fontSize:"14px",lineHeight:"16px",fontWeight:"400",color:e.palette.onSurface.os800,width:"100%",padding:"0 10px"},"& img":{width:"100%",height:"68px",objectFit:"cover",marginBottom:"2px"}}})));export{d as ChipImage};
+import{__rest as e}from"tslib";import{jsxs as i,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useState as t,useRef as o,useCallback as n}from"react";import{styled as l,Chip as c}from"@mui/material";import p from"../chipFocusVisibleStyled.js";const d=a((l,c)=>{const{onBlur:d,children:m,label:h,disabled:u,variant:f="image",imageUrl:g,imageAlt:b,isChecked:x,onChange:y,name:v,id:C=`chip-image-${Date.now()}`}=l,[k,w]=t(!1),j=o(),S=e=>{y&&y(e,!x)},M=n(e=>{w(!1),d&&d(e)},[d]),B=n(()=>{j&&j.current.click()},[]),F=n(()=>{w(!0)},[]),V=a((a,t)=>{var{onChange:o}=a,n=e(a,["onChange"]);return i("div",Object.assign({},n,{ref:t,children:[r("input",{ref:j,onChange:S,type:"checkbox",id:C,name:v,value:C,checked:x,readOnly:!0}),r("img",{src:g,alt:b}),r("div",{children:r("span",{children:m||h})})]}))});return r(p,{focusVisible:k,variant:f,children:r(s,{ref:c,component:V,label:h,disabled:u,onClick:B,className:x?"Mui-checked":"",onFocusVisible:F,onBlur:M,variant:"filled",color:x?"primary":"default"})})}),s=l(c)(({theme:e})=>({"& div":{width:"100%",whiteSpace:"pre-wrap"},"&.MuiChip-root":{backgroundColor:e.palette.surface.primary,borderRadius:"4px",height:"auto",width:"120px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",padding:"11px 0 13px 0",overflow:"hidden","&:hover":{span:{color:e.palette.onSurface.os600}},"&.Mui-checked":{backgroundColor:e.palette.brand.quarternary,span:{color:e.palette.brand.primary},"&:hover":{span:{color:e.palette.brandHover.primary}}},"&.Mui-disabled":{backgroundColor:e.palette.surface.primary,span:{color:e.palette.disabled.primary}},"&:active":{boxShadow:"none"},"& > input":{display:"none"},div:{display:"flex",flexGrow:1},span:{display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",fontSize:"14px",lineHeight:"16px",fontWeight:"400",color:e.palette.onSurface.os800,width:"100%",padding:"0 10px"},"& img":{width:"100%",height:"68px",objectFit:"cover",marginBottom:"2px"}}}));export{d as ChipImage};
 //# sourceMappingURL=chipImage.js.map

package/components/chip/chipImage/chipImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"chipImage.js","sources":["../../../../src/components/chip/chipImage/chipImage.tsx"],"sourcesContent":["import React, { useCallback, useState, useRef, forwardRef, HTMLAttributes } from 'react';\nimport { ChipProps as MuiChipProps, Chip as MuiChip, styled } from '@mui/material';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\n\n/**\n * @interface ChipProps\n * @description Base definition of SkodaFlow Chip independent on core implementation.\n * Properties are inherited from HTML div element\n */\nexport interface ChipImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * The label referenced to the text field.\n   */\n  label?: string;\n  /**\n   * Disabled, not clickable chip.\n   */\n  disabled?: boolean;\n  /**\n   * Image of a chip to display.\n   */\n  component?: any;\n  /**\n   * Variant of a chip.\n   */\n  variant?: 'image' | 'multiselect';\n  /**\n   * The url of the image.\n   */\n  imageUrl: string;\n  /**\n   * The alt attribute of the image.\n   */\n  imageAlt: string;\n  /**\n   * State of the chip image. If true the chip image is checked.\n   */\n  isChecked?: boolean;\n  /**\n   * Event triggered whenever the chip image is clicked.\n   */\n  onChange?(e: React.ChangeEvent<HTMLInputElement>, checked: boolean): void;\n  /**\n   * Name attribute of the component.\n   */\n  name?: string;\n  /**\n   * id attribute of the component, defaults to chip-image-{current UNIX date}.\n   */\n  id?: string;\n\n  debug?: boolean;\n}\n\n/**\n * @deprecated This component is deprecated. Use themed Chip Component from @mui/material instead.\n */\nexport const ChipImage = forwardRef<HTMLDivElement, ChipImageProps>((props, ref) => {\n  const {\n    onBlur,\n    children,\n    label,\n    disabled,\n    variant = 'image',\n    imageUrl,\n    imageAlt,\n    isChecked,\n    onChange,\n    name,\n    id = `chip-image-${Date.now()}`,\n  } = props;\n  const [_focusVisibled, _setFocusVisible] = useState(false);\n  const _checkboxComponent = useRef<HTMLInputElement>();\n\n  const _onChangeTrigger = (evt: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) {\n      onChange(evt, !isChecked);\n    }\n  };\n\n  const _onBlurHandler = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      _setFocusVisible(false);\n      if (onBlur) {\n        onBlur(e);\n      }\n    },\n    [onBlur],\n  );\n\n  const _onClickHandler = useCallback(() => {\n    if (_checkboxComponent) {\n      _checkboxComponent.current.click();\n    }\n  }, []);\n\n  const _onFocusVisibleHandler = useCallback(() => {\n    _setFocusVisible(true);\n  }, []);\n\n  const ImageComponent = forwardRef<HTMLDivElement, ChipImageProps>(\n    ({ onChange: _onChange, ...componentProps }, _ref) => (\n      <div {...componentProps} ref={_ref as any}>\n        <input\n          ref={_checkboxComponent}\n          onChange={_onChangeTrigger}\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          value={id}\n          checked={isChecked}\n          readOnly\n        />\n        <img src={imageUrl} alt={imageAlt} />\n        <div>\n          <span>{children || label}</span>\n        </div>\n      </div>\n    ),\n  );\n\n  return (\n    <ChipFocusVisibleStyled focusVisible={_focusVisibled} variant={variant}>\n      <ChipImageStyled\n        ref={ref}\n        component={ImageComponent as any}\n        label={label}\n        disabled={disabled}\n        onClick={_onClickHandler}\n        className={isChecked ? 'Mui-checked' : ''}\n        onFocusVisible={_onFocusVisibleHandler}\n        onBlur={_onBlurHandler}\n        variant={'filled'}\n        color={isChecked ? 'primary' : 'default'}\n      />\n    </ChipFocusVisibleStyled>\n  );\n});\n\n/**\n * @description Chip styling definition based on props\n */\nconst ChipImageStyled = styled(MuiChip)<\n  MuiChipProps & { onFocusVisible?: React.FocusEventHandler<any>; component?: any }\n>(({ theme }) => ({\n  '& div': {\n    width: '100%',\n    whiteSpace: 'pre-wrap',\n  },\n  '&.MuiChip-root': {\n    backgroundColor: theme.palette.surface.primary,\n    borderRadius: '4px',\n    height: 'auto',\n    width: '120px',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    padding: '11px 0 13px 0',\n    overflow: 'hidden',\n    '&:hover': {\n      span: {\n        color: theme.palette.onSurface.os600,\n      },\n    },\n    '&.Mui-checked': {\n      backgroundColor: theme.palette.brand.quarternary,\n      span: {\n        color: theme.palette.brand.primary,\n      },\n      '&:hover': {\n        span: {\n          color: theme.palette.brandHover.primary,\n        },\n      },\n    },\n    '&.Mui-disabled': {\n      backgroundColor: theme.palette.surface.primary,\n      span: {\n        color: theme.palette.disabled.primary,\n      },\n    },\n    '&:active': {\n      boxShadow: 'none',\n    },\n    '& > input': {\n      display: 'none',\n    },\n    div: {\n      display: 'flex',\n      flexGrow: 1,\n    },\n    span: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      textAlign: 'center',\n      fontSize: '14px',\n      lineHeight: '16px',\n      fontWeight: '400',\n      color: theme.palette.onSurface.os800,\n      width: '100%',\n      padding: '0 10px',\n    },\n    '& img': {\n      width: '100%',\n      height: '68px',\n      objectFit: 'cover',\n      marginBottom: '2px',\n    },\n  },\n}));\n"],"names":["ChipImage","forwardRef","props","ref","onBlur","children","label","disabled","variant","imageUrl","imageAlt","isChecked","onChange","name","id","Date","now","_focusVisibled","_setFocusVisible","useState","_checkboxComponent","useRef","_onChangeTrigger","evt","_onBlurHandler","useCallback","e","_onClickHandler","current","click","_onFocusVisibleHandler","ImageComponent","_a","_ref","_onChange","componentProps","__rest","_jsxs","Object","assign","_jsx","type","value","checked","readOnly","src","alt","ChipFocusVisibleStyled","focusVisible","ChipImageStyled","component","onClick","className","onFocusVisible","color","styled","MuiChip","theme","width","whiteSpace","backgroundColor","palette","surface","primary","borderRadius","height","display","flexDirection","alignItems","justifyContent","padding","overflow","span","onSurface","os600","brand","quarternary","brandHover","boxShadow","div","flexGrow","textAlign","fontSize","lineHeight","fontWeight","os800","objectFit","marginBottom"],"mappings":"4PAyDa,MAAAA,EAAYC,GAA2C,CAACC,EAAOC,KAC1E,MAAMC,OACJA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAU,QAAOC,SACjBA,EAAQC,SACRA,EAAQC,UACRA,EAASC,SACTA,EAAQC,KACRA,EAAIC,GACJA,EAAK,cAAcC,KAAKC,SACtBd,GACGe,EAAgBC,GAAoBC,GAAS,GAC9CC,EAAqBC,IAErBC,EAAoBC,IACpBX,GACFA,EAASW,GAAMZ,IAIba,EAAiBC,GACpBC,IACCR,GAAiB,GACbd,GACFA,EAAOsB,KAGX,CAACtB,IAGGuB,EAAkBF,GAAY,KAC9BL,GACFA,EAAmBQ,QAAQC,UAE5B,IAEGC,EAAyBL,GAAY,KACzCP,GAAiB,EAAK,GACrB,IAEGa,EAAiB9B,GACrB,CAAC+B,EAA4CC,SAA1CrB,SAAUsB,GAASF,EAAKG,EAAcC,EAAAJ,EAAxC,cAAqD,OACpDK,EAAS,MAAAC,OAAAC,OAAA,CAAA,EAAAJ,EAAgB,CAAAhC,IAAK8B,EAC5B5B,SAAA,CAAAmC,EAAA,QAAA,CACErC,IAAKiB,EACLR,SAAUU,EACVmB,KAAK,WACL3B,GAAIA,EACJD,KAAMA,EACN6B,MAAO5B,EACP6B,QAAShC,EACTiC,UAAQ,IAEVJ,EAAA,MAAA,CAAKK,IAAKpC,EAAUqC,IAAKpC,IACzB8B,EAAA,MAAA,CAAAnC,SACEmC,EAAO,OAAA,CAAAnC,SAAAA,GAAYC,SAEjB,IAIV,OACEkC,EAACO,EAAsB,CAACC,aAAc/B,EAAgBT,QAASA,EAAOH,SACpEmC,EAACS,GACC9C,IAAKA,EACL+C,UAAWnB,EACXzB,MAAOA,EACPC,SAAUA,EACV4C,QAASxB,EACTyB,UAAWzC,EAAY,cAAgB,GACvC0C,eAAgBvB,EAChB1B,OAAQoB,EACRhB,QAAS,SACT8C,MAAO3C,EAAY,UAAY,aAEV,IAOvBsC,EAAkBM,EAAOC,EAAPD,EAEtB,EAAGE,YAAa,CAChB,QAAS,CACPC,MAAO,OACPC,WAAY,YAEd,iBAAkB,CAChBC,gBAAiBH,EAAMI,QAAQC,QAAQC,QACvCC,aAAc,MACdC,OAAQ,OACRP,MAAO,QACPQ,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,eAAgB,aAChBC,QAAS,gBACTC,SAAU,SACV,UAAW,CACTC,KAAM,CACJlB,MAAOG,EAAMI,QAAQY,UAAUC,QAGnC,gBAAiB,CACfd,gBAAiBH,EAAMI,QAAQc,MAAMC,YACrCJ,KAAM,CACJlB,MAAOG,EAAMI,QAAQc,MAAMZ,SAE7B,UAAW,CACTS,KAAM,CACJlB,MAAOG,EAAMI,QAAQgB,WAAWd,WAItC,iBAAkB,CAChBH,gBAAiBH,EAAMI,QAAQC,QAAQC,QACvCS,KAAM,CACJlB,MAAOG,EAAMI,QAAQtD,SAASwD,UAGlC,WAAY,CACVe,UAAW,QAEb,YAAa,CACXZ,QAAS,QAEXa,IAAK,CACHb,QAAS,OACTc,SAAU,GAEZR,KAAM,CACJN,QAAS,cACTE,WAAY,SACZC,eAAgB,SAChBY,UAAW,SACXC,SAAU,OACVC,WAAY,OACZC,WAAY,MACZ9B,MAAOG,EAAMI,QAAQY,UAAUY,MAC/B3B,MAAO,OACPY,QAAS,UAEX,QAAS,CACPZ,MAAO,OACPO,OAAQ,OACRqB,UAAW,QACXC,aAAc"}
+{"version":3,"file":"chipImage.js","sources":["../../../../src/components/chip/chipImage/chipImage.tsx"],"sourcesContent":["import React, { useCallback, useState, useRef, forwardRef, HTMLAttributes } from 'react';\nimport { ChipProps as MuiChipProps, Chip as MuiChip, styled } from '@mui/material';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\n\n/**\n * @interface ChipProps\n * @description Base definition of SkodaFlow Chip independent on core implementation.\n * Properties are inherited from HTML div element\n */\nexport interface ChipImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * The label referenced to the text field.\n   */\n  label?: string;\n  /**\n   * Disabled, not clickable chip.\n   */\n  disabled?: boolean;\n  /**\n   * Image of a chip to display.\n   */\n  component?: any;\n  /**\n   * Variant of a chip.\n   */\n  variant?: 'image' | 'multiselect';\n  /**\n   * The url of the image.\n   */\n  imageUrl: string;\n  /**\n   * The alt attribute of the image.\n   */\n  imageAlt: string;\n  /**\n   * State of the chip image. If true the chip image is checked.\n   */\n  isChecked?: boolean;\n  /**\n   * Event triggered whenever the chip image is clicked.\n   */\n  onChange?(e: React.ChangeEvent<HTMLInputElement>, checked: boolean): void;\n  /**\n   * Name attribute of the component.\n   */\n  name?: string;\n  /**\n   * id attribute of the component, defaults to chip-image-{current UNIX date}.\n   */\n  id?: string;\n\n  debug?: boolean;\n}\n\n/**\n * @deprecated This component is deprecated. Use themed Chip Component from @mui/material instead.\n */\nexport const ChipImage = forwardRef<HTMLDivElement, ChipImageProps>((props, ref) => {\n  const {\n    onBlur,\n    children,\n    label,\n    disabled,\n    variant = 'image',\n    imageUrl,\n    imageAlt,\n    isChecked,\n    onChange,\n    name,\n    id = `chip-image-${Date.now()}`,\n  } = props;\n  const [_focusVisibled, _setFocusVisible] = useState(false);\n  const _checkboxComponent = useRef<HTMLInputElement>();\n\n  const _onChangeTrigger = (evt: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) {\n      onChange(evt, !isChecked);\n    }\n  };\n\n  const _onBlurHandler = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      _setFocusVisible(false);\n      if (onBlur) {\n        onBlur(e);\n      }\n    },\n    [onBlur],\n  );\n\n  const _onClickHandler = useCallback(() => {\n    if (_checkboxComponent) {\n      _checkboxComponent.current.click();\n    }\n  }, []);\n\n  const _onFocusVisibleHandler = useCallback(() => {\n    _setFocusVisible(true);\n  }, []);\n\n  const ImageComponent = forwardRef<HTMLDivElement, ChipImageProps>(\n    ({ onChange: _onChange, ...componentProps }, _ref) => (\n      <div {...componentProps} ref={_ref as any}>\n        <input\n          ref={_checkboxComponent}\n          onChange={_onChangeTrigger}\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          value={id}\n          checked={isChecked}\n          readOnly\n        />\n        <img src={imageUrl} alt={imageAlt} />\n        <div>\n          <span>{children || label}</span>\n        </div>\n      </div>\n    ),\n  );\n\n  return (\n    <ChipFocusVisibleStyled focusVisible={_focusVisibled} variant={variant}>\n      <ChipImageStyled\n        ref={ref}\n        component={ImageComponent as any}\n        label={label}\n        disabled={disabled}\n        onClick={_onClickHandler}\n        className={isChecked ? 'Mui-checked' : ''}\n        onFocusVisible={_onFocusVisibleHandler}\n        onBlur={_onBlurHandler}\n        variant={'filled'}\n        color={isChecked ? 'primary' : 'default'}\n      />\n    </ChipFocusVisibleStyled>\n  );\n});\n\n/**\n * @description Chip styling definition based on props\n */\nconst ChipImageStyled = styled(MuiChip)<\n  MuiChipProps & { onFocusVisible?: React.FocusEventHandler<any>; component?: any }\n>(({ theme }) => ({\n  '& div': {\n    width: '100%',\n    whiteSpace: 'pre-wrap',\n  },\n  '&.MuiChip-root': {\n    backgroundColor: theme.palette.surface.primary,\n    borderRadius: '4px',\n    height: 'auto',\n    width: '120px',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    padding: '11px 0 13px 0',\n    overflow: 'hidden',\n    '&:hover': {\n      span: {\n        color: theme.palette.onSurface.os600,\n      },\n    },\n    '&.Mui-checked': {\n      backgroundColor: theme.palette.brand.quarternary,\n      span: {\n        color: theme.palette.brand.primary,\n      },\n      '&:hover': {\n        span: {\n          color: theme.palette.brandHover.primary,\n        },\n      },\n    },\n    '&.Mui-disabled': {\n      backgroundColor: theme.palette.surface.primary,\n      span: {\n        color: theme.palette.disabled.primary,\n      },\n    },\n    '&:active': {\n      boxShadow: 'none',\n    },\n    '& > input': {\n      display: 'none',\n    },\n    div: {\n      display: 'flex',\n      flexGrow: 1,\n    },\n    span: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      textAlign: 'center',\n      fontSize: '14px',\n      lineHeight: '16px',\n      fontWeight: '400',\n      color: theme.palette.onSurface.os800,\n      width: '100%',\n      padding: '0 10px',\n    },\n    '& img': {\n      width: '100%',\n      height: '68px',\n      objectFit: 'cover',\n      marginBottom: '2px',\n    },\n  },\n}));\n"],"names":["ChipImage","forwardRef","props","ref","onBlur","children","label","disabled","variant","imageUrl","imageAlt","isChecked","onChange","name","id","Date","now","_focusVisibled","_setFocusVisible","useState","_checkboxComponent","useRef","_onChangeTrigger","evt","_onBlurHandler","useCallback","e","_onClickHandler","current","click","_onFocusVisibleHandler","ImageComponent","_a","_ref","_onChange","componentProps","__rest","_jsxs","Object","assign","_jsx","type","value","checked","readOnly","src","alt","ChipFocusVisibleStyled","focusVisible","ChipImageStyled","component","onClick","className","onFocusVisible","color","styled","MuiChip","theme","width","whiteSpace","backgroundColor","palette","surface","primary","borderRadius","height","display","flexDirection","alignItems","justifyContent","padding","overflow","span","onSurface","os600","brand","quarternary","brandHover","boxShadow","div","flexGrow","textAlign","fontSize","lineHeight","fontWeight","os800","objectFit","marginBottom"],"mappings":"4PAyDO,MAAMA,EAAYC,EAA2C,CAACC,EAAOC,KAC1E,MAAMC,OACJA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAU,QAAOC,SACjBA,EAAQC,SACRA,EAAQC,UACRA,EAASC,SACTA,EAAQC,KACRA,EAAIC,GACJA,EAAK,cAAcC,KAAKC,SACtBd,GACGe,EAAgBC,GAAoBC,GAAS,GAC9CC,EAAqBC,IAErBC,EAAoBC,IACpBX,GACFA,EAASW,GAAMZ,IAIba,EAAiBC,EACpBC,IACCR,GAAiB,GACbd,GACFA,EAAOsB,IAGX,CAACtB,IAGGuB,EAAkBF,EAAY,KAC9BL,GACFA,EAAmBQ,QAAQC,SAE5B,IAEGC,EAAyBL,EAAY,KACzCP,GAAiB,IAChB,IAEGa,EAAiB9B,EACrB,CAAC+B,EAA4CC,SAA1CrB,SAAUsB,GAASF,EAAKG,EAAcC,EAAAJ,EAAxC,cAAqD,OACpDK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,EAAc,CAAEhC,IAAK8B,EAAW5B,SAAA,CACvCmC,EAAA,QAAA,CACErC,IAAKiB,EACLR,SAAUU,EACVmB,KAAK,WACL3B,GAAIA,EACJD,KAAMA,EACN6B,MAAO5B,EACP6B,QAAShC,EACTiC,UAAQ,IAEVJ,EAAA,MAAA,CAAKK,IAAKpC,EAAUqC,IAAKpC,IACzB8B,EAAA,MAAA,CAAAnC,SACEmC,EAAA,OAAA,CAAAnC,SAAOA,GAAYC,YAM3B,OACEkC,EAACO,EAAsB,CAACC,aAAc/B,EAAgBT,QAASA,EAAOH,SACpEmC,EAACS,GACC9C,IAAKA,EACL+C,UAAWnB,EACXzB,MAAOA,EACPC,SAAUA,EACV4C,QAASxB,EACTyB,UAAWzC,EAAY,cAAgB,GACvC0C,eAAgBvB,EAChB1B,OAAQoB,EACRhB,QAAS,SACT8C,MAAO3C,EAAY,UAAY,gBASjCsC,EAAkBM,EAAOC,EAAPD,CAEtB,EAAGE,YAAO,CACV,QAAS,CACPC,MAAO,OACPC,WAAY,YAEd,iBAAkB,CAChBC,gBAAiBH,EAAMI,QAAQC,QAAQC,QACvCC,aAAc,MACdC,OAAQ,OACRP,MAAO,QACPQ,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,eAAgB,aAChBC,QAAS,gBACTC,SAAU,SACV,UAAW,CACTC,KAAM,CACJlB,MAAOG,EAAMI,QAAQY,UAAUC,QAGnC,gBAAiB,CACfd,gBAAiBH,EAAMI,QAAQc,MAAMC,YACrCJ,KAAM,CACJlB,MAAOG,EAAMI,QAAQc,MAAMZ,SAE7B,UAAW,CACTS,KAAM,CACJlB,MAAOG,EAAMI,QAAQgB,WAAWd,WAItC,iBAAkB,CAChBH,gBAAiBH,EAAMI,QAAQC,QAAQC,QACvCS,KAAM,CACJlB,MAAOG,EAAMI,QAAQtD,SAASwD,UAGlC,WAAY,CACVe,UAAW,QAEb,YAAa,CACXZ,QAAS,QAEXa,IAAK,CACHb,QAAS,OACTc,SAAU,GAEZR,KAAM,CACJN,QAAS,cACTE,WAAY,SACZC,eAAgB,SAChBY,UAAW,SACXC,SAAU,OACVC,WAAY,OACZC,WAAY,MACZ9B,MAAOG,EAAMI,QAAQY,UAAUY,MAC/B3B,MAAO,OACPY,QAAS,UAEX,QAAS,CACPZ,MAAO,OACPO,OAAQ,OACRqB,UAAW,QACXC,aAAc"}