@skodaflow/web-library 8.0.1 → 8.1.0

package/components/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../../src/components/logo/Logo.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, Breakpoint, useTheme } from '@mui/material';\n\ninterface LogoBaseProps extends Omit<SvgIconProps, 'color'> {\n  /**\n   * Specifies which color should be used\n   * @default emerald in light mode, electric in dark mode\n   */\n  color?: 'emerald' | 'electric' | 'white' | 'black' | string;\n  /**\n   * Width of the logo. Specify in px for subbrand to work properly\n   * @default 120px\n   */\n  width?: number | string;\n  /**\n   * Height of the logo\n   */\n  height?: number | string;\n}\n\ninterface LogoComponentProps extends LogoBaseProps {\n  variant?: 'horizontal' | 'vertical' | 'symbol' | 'separated';\n}\n\ninterface HorizontalLogoProps extends LogoBaseProps {\n  variant?: 'horizontal';\n  /**\n   * Subbrand text next to the logo\n   */\n  subbrandText?: string;\n  /**\n   * Defines if subbrand should render next to the logo\n   * @default horizontal\n   */\n  subbrandVariant?: 'horizontal' | 'vertical';\n  /**\n   * Properties applied to wrapper of subbrandText\n   */\n  subbrandProps?: BoxProps<ElementType>;\n  /**\n   * Breakpoint for hiding the Subbrand variant\n   */\n  breakpoint?: Breakpoint;\n  /**\n   * Properties applied to wrapper of logo with subrandText\n   */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\ninterface VerticalLogoProps extends LogoBaseProps {\n  variant: 'vertical';\n}\n\ninterface SymbolLogoProps extends LogoBaseProps {\n  variant: 'symbol';\n}\n\ninterface SeparatedLogoProps extends LogoBaseProps {\n  variant: 'separated';\n  /**\n   * Change spacing size between letter\n   * @default 100\n   */\n  spacing?: number;\n}\n\nexport type LogoProps = HorizontalLogoProps | VerticalLogoProps | SymbolLogoProps | SeparatedLogoProps;\n\n/**\n * Logo of Škoda Auto a.s.\n */\nexport const Logo: React.FC<LogoProps> = forwardRef((props, ref) => {\n  const Component = useMemo(() => {\n    switch (props.variant) {\n      case 'separated':\n        return SeparatedLogo;\n      case 'symbol':\n      case 'vertical':\n        return LogoComponent;\n      default:\n        return HorizontalLogo;\n    }\n  }, [props.variant]);\n\n  return <Component ref={ref} {...props} />;\n});\n\nconst HorizontalLogo: React.FC<HorizontalLogoProps> = forwardRef(\n  (\n    {\n      subbrandText,\n      subbrandProps,\n      subbrandVariant = 'horizontal',\n      wrapperProps,\n      breakpoint,\n      width = '120px',\n      height,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: subbrandSx, ...restSubbrand } = subbrandProps ?? {};\n\n    // obtain font size for he subbrand text based on the width\n    const [subbrandFontSize, subbrandSpacing] = useMemo(() => {\n      if (!width && !height) {\n        return [0, 0];\n      }\n      // split value to number and unit, e.g. \"100px\" => [100, \"px\"]\n      const processValue = (value: string | number): [number, string] => {\n        const number = Number.parseFloat(`${value}`);\n        const unit = `${value}`.replace(`${number}`, '') || 'px';\n        return [number, unit];\n      };\n      // obtain height and width value and units\n      let widthNumber: number, widthUnit: string, heightNumber: number, heightUnit: string;\n      if (width) {\n        [widthNumber, widthUnit] = processValue(width);\n        // obtain height from width (15:2 ratio)\n        [heightNumber, heightUnit] = processValue(`${widthNumber / 7.5}${widthUnit}`);\n      } else {\n        [heightNumber, heightUnit] = processValue(height);\n        // obtain width from height (2:15 ratio)\n        [widthNumber, widthUnit] = processValue(`${heightNumber * 7.5}${heightUnit}`);\n      }\n      // calculate subbrand font size and space\n      return [\n        // magic number making sure the capitalized letter is aligned with logo height\n        `${(widthNumber / 5.29).toFixed(2)}${widthUnit}`,\n        // 1/2 of height or 1/4 of height\n        `${(heightNumber / (subbrandVariant === 'vertical' ? 4 : 2)).toFixed(2)}${heightUnit}`,\n      ];\n    }, [width, height, subbrandVariant]);\n\n    if (subbrandText && subbrandFontSize) {\n      return (\n        <Box\n          sx={{\n            display: 'inline-flex',\n            justifyContent: 'flex-start',\n            alignItems: subbrandVariant === 'vertical' ? 'flex-start' : 'baseline',\n            flexDirection: subbrandVariant === 'vertical' ? 'column' : 'row',\n            ...wrapperSx,\n          }}\n          data-testid=\"Logo\"\n          {...restWrapper}\n        >\n          <LogoComponent width={width} height={height} ref={ref} {...rest} />\n          <Box\n            sx={{\n              userSelect: 'none',\n              whiteSpace: 'nowrap',\n              fontWeight: '300',\n              letterSpacing: '0.02em',\n              fontSize: subbrandFontSize,\n              ...(subbrandVariant === 'vertical'\n                ? {\n                    mt: subbrandSpacing,\n                    lineHeight: '1',\n                  }\n                : {\n                    ml: subbrandSpacing,\n                    // do not increase height of the logo\n                    lineHeight: '0px',\n                  }),\n              // hide subbrand with breakpoint\n              ...(breakpoint && {\n                display: { xs: 'none', [breakpoint]: 'inline' },\n              }),\n              ...subbrandSx,\n            }}\n            component=\"span\"\n            data-testid=\"Logo.subbrand\"\n            {...restSubbrand}\n          >\n            {subbrandText}\n          </Box>\n        </Box>\n      );\n    } else {\n      return <LogoComponent width={width} height={height} ref={ref} {...rest} />;\n    }\n  },\n);\n\nconst SeparatedLogo: React.FC<SeparatedLogoProps> = forwardRef(({ sx, spacing = 100, ...rest }, ref) => {\n  // function to get proper transform for each path, rounded to one decimal\n  const getTranslateX = useCallback(\n    (i: number, sp: number) =>\n      // values were manually mapped for each letter\n      `translateX(${Math.round(([0, -44.1667, -22.5, 0, 24.5, 46.5][i] || 0) * (sp / 100 - 1) * 100) / 100}%)`,\n    [],\n  );\n\n  return (\n    <LogoComponent\n      sx={{\n        transition: 'opacity 1s ease-in-out',\n        '& path': {\n          transform: 'translateZ(0, 0, 0)',\n          transition: 'transform 1s ease-in-out',\n        },\n        // \"s\" letter\n        '& path:nth-of-type(1)': { transform: getTranslateX(1, spacing) },\n        // \"k\" letter\n        '& path:nth-of-type(2)': { transform: getTranslateX(2, spacing) },\n        // \"o\" never moves\n        // \"d\" letter\n        '& path:nth-of-type(4)': { transform: getTranslateX(4, spacing) },\n        // \"a\" letter\n        '& path:nth-of-type(5)': { transform: getTranslateX(5, spacing) },\n        ...sx,\n      }}\n      ref={ref}\n      {...rest}\n    />\n  );\n});\n\nconst LogoComponent: React.FC<LogoComponentProps> = forwardRef(\n  ({ sx, width = '120px', height, color, variant = 'horizontal', ...rest }, ref) => {\n    const theme = useTheme();\n    // obtain component based on the variant\n    const Component = useMemo(() => {\n      switch (variant) {\n        case 'symbol':\n          return SymbolLogoComponent;\n        case 'vertical':\n          return VerticalLogoComponent;\n        case 'separated':\n          return SeparatedHorizontalLogoComponent;\n        default:\n          return HorizontalLogoComponent;\n      }\n    }, [variant]);\n    // obtain color\n    const logoColor = useMemo(() => {\n      switch (color) {\n        case undefined:\n          return theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary';\n        case 'emerald':\n          return 'brand.tertiary';\n        case 'electric':\n          return 'brand.secondary';\n        case 'white':\n          return '#fff';\n        case 'black':\n          return '#000';\n        default:\n          return color;\n      }\n    }, [theme.palette.mode, color]);\n\n    return (\n      <Component\n        sx={{\n          width: width || 'unset',\n          height: height || 'unset',\n          fontSize: 'unset',\n          '&, & + span': {\n            color: logoColor,\n          },\n          ...sx,\n        }}\n        data-testid={`Logo.${variant || 'horizontal'}`}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n\nconst SymbolLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 32 32\" ref={ref} {...props}>\n      <path d=\"M16 0C7.16345 0 0 7.16345 0 16C0 24.8366 7.16345 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16345 24.8366 0 16 0ZM16 30.6181C7.92664 30.6181 1.38188 24.0734 1.38188 16C1.38188 7.92664 7.92664 1.38188 16 1.38188C24.0734 1.38188 30.6181 7.92664 30.6181 16C30.6181 24.0734 24.0734 30.6181 16 30.6181ZM22.9186 20.9748L22.5599 21.9432H21.2481C21.5987 20.998 26.0191 10.4529 17.3331 3.30067C15.5096 3.10748 13.666 3.31141 11.9289 3.89843C12.2186 4.1318 15.2275 6.60184 16.6453 9.65167L16.2293 9.76367C15.4478 8.91211 12.6085 5.78599 9.90293 4.7799C8.44709 5.57356 7.15898 6.64201 6.10992 7.92608C7.3806 8.57612 10.7008 10.5592 11.9627 12.0997C11.8904 12.1322 11.6067 12.285 11.6067 12.285C9.29207 10.5258 5.18018 9.61266 4.97001 9.56732C4.1056 11.0449 3.54923 12.6821 3.33443 14.3804C9.70223 15.6621 11.4168 18.6091 11.7101 21.9432H10.504L8.43136 21.0398C8.32338 20.9993 8.2099 20.9754 8.09477 20.9689H4.23562C4.84653 22.4112 5.7173 23.7288 6.80453 24.8563H8.44907C8.59079 24.8563 8.7148 24.8386 8.8388 24.7677L10.504 23.9174H22.5599L22.9186 24.8859C24.4165 24.7132 25.8066 24.0213 26.8475 22.9303C25.8066 21.8394 24.4165 21.1475 22.9186 20.9748ZM18.2763 20.4696C17.9639 20.4696 17.6585 20.3769 17.3987 20.2033C17.1389 20.0298 16.9365 19.7831 16.8169 19.4944C16.6974 19.2058 16.6661 18.8881 16.727 18.5817C16.788 18.2753 16.9384 17.9938 17.1593 17.7729C17.3803 17.552 17.6617 17.4015 17.9682 17.3406C18.2746 17.2796 18.5922 17.3109 18.8808 17.4305C19.1695 17.55 19.4162 17.7525 19.5898 18.0123C19.7634 18.2721 19.856 18.5775 19.856 18.8899C19.856 19.3088 19.6896 19.7106 19.3933 20.0069C19.0971 20.3031 18.6953 20.4696 18.2763 20.4696Z\" />\n    </SvgIcon>\n  );\n});\n\nconst VerticalLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 138 130\" ref={ref} {...props}>\n      <path d=\"M66 21C51.6406 21 40 32.6406 40 47C40 61.3594 51.6406 73 66 73C80.3594 73 92 61.3594 92 47C92 32.6406 80.3594 21 66 21ZM66 70.7544C52.8808 70.7544 42.2456 60.1192 42.2456 47C42.2456 33.8808 52.8808 23.2456 66 23.2456C79.1192 23.2456 89.7544 33.8808 89.7544 47C89.7544 60.1192 79.1192 70.7544 66 70.7544ZM77.2427 55.084L76.6598 56.6578H74.5282C75.0979 55.1218 82.281 37.9859 68.1662 26.3636C65.2032 26.0497 62.2073 26.381 59.3845 27.335C59.8553 27.7142 64.7448 31.728 67.0487 36.684L66.3727 36.866C65.1026 35.4822 60.4889 30.4023 56.0923 28.7673C53.7265 30.057 51.6333 31.7933 49.9286 33.8799C51.9935 34.9361 57.3888 38.1586 59.4393 40.6619C59.3219 40.7147 58.8608 40.9631 58.8608 40.9631C55.0996 38.1043 48.4178 36.6205 48.0763 36.5469C46.6716 38.9479 45.7675 41.6084 45.4184 44.3681C55.7661 46.4509 58.5524 51.2397 59.0289 56.6578H57.069L53.701 55.1897C53.5255 55.1239 53.3411 55.0851 53.154 55.0745H46.8829C47.8756 57.4181 49.2906 59.5594 51.0574 61.3915H53.7297C53.95 61.4023 54.1691 61.3525 54.363 61.2476L57.069 59.8658H76.6598L77.2427 61.4396C79.6768 61.1589 81.9357 60.0345 83.6271 58.2618C81.9357 56.4891 79.6768 55.3647 77.2427 55.084ZM69.699 54.263C69.1913 54.263 68.695 54.1125 68.2729 53.8304C67.8508 53.5483 67.5218 53.1474 67.3275 52.6784C67.1332 52.2093 67.0824 51.6932 67.1814 51.1953C67.2805 50.6973 67.5249 50.24 67.8839 49.881C68.2429 49.522 68.7003 49.2775 69.1982 49.1785C69.6962 49.0794 70.2123 49.1302 70.6814 49.3245C71.1504 49.5188 71.5513 49.8478 71.8334 50.27C72.1154 50.6921 72.266 51.1884 72.266 51.6961C72.266 52.3769 71.9955 53.0298 71.5141 53.5112C71.0327 53.9926 70.3798 54.263 69.699 54.263H69.699Z\" />\n      <path d=\"M10 101L12.1675 97.6125H24.739C25.4511 97.6125 25.9156 97.1587 25.9156 96.4631V94.4971H15.1091C11.8888 94.4971 10.4645 93.1059 10.4645 90.0208V88.69C10.4645 86.3913 11.8579 85 14.0563 85H14.304V89.9603C14.304 90.6559 14.7685 91.1096 15.4807 91.1096H25.9466C28.3308 91.1096 29.7552 92.5009 29.7552 94.7694V96.5236C29.7552 99.5179 28.2379 101 25.1105 101L10 101ZM85.3338 97.552H95.0565C96.6666 97.552 97.6885 96.5841 97.6885 95.0718V90.9282C97.6885 89.4159 96.6666 88.448 95.0565 88.448H85.3338V97.552ZM81.4323 101V85H95.1494C99.2367 85 101.59 87.2987 101.59 91.1096V94.8903C101.59 98.7013 99.2367 101 95.1494 101H81.4323ZM62.5252 97.552H70.7308C72.217 97.552 73.1769 96.6446 73.1769 95.2231V90.7769C73.1769 89.3554 72.217 88.448 70.7308 88.448H62.5252C61.039 88.448 60.0791 89.3554 60.0791 90.7769V95.223C60.0791 96.6446 61.039 97.552 62.5252 97.552ZM70.8236 101H62.4324C58.469 101 56.1776 98.7618 56.1776 95.0416V90.9584C56.1776 87.2382 58.4689 85 62.4324 85H70.8236C74.787 85 77.0784 87.2382 77.0784 90.9584V95.0416C77.0784 98.7618 74.7871 101 70.8236 101ZM103.189 101L112.385 85H117.804L127 101H122.541L120.962 98.2476H113.128L111.022 94.9811L107.554 101H103.189ZM111.115 94.7996H118.98L115.048 87.9943L111.115 94.7996ZM18.1436 88.327L15.9142 85H29.3836L27.2161 88.327H18.1436ZM34.0483 101V85H37.9498V91.2306H43.1208L49.8401 85H55.0111L46.465 92.9546L55.1659 101H49.6852L42.966 94.6786H37.9498V101H34.0483Z\" />\n    </SvgIcon>\n  );\n});\n\nconst HorizontalLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 120 16\" ref={ref} {...props}>\n      <path d=\"M0 16L2.22307 12.6125H15.1169C15.8473 12.6125 16.3237 12.1587 16.3237 11.4631V9.49713H5.24009C1.93724 9.49713 0.4764 8.10585 0.4764 5.02078V3.68997C0.4764 1.3913 1.90549 0 4.16032 0H4.41438V4.96029C4.41438 5.65595 4.89078 6.10964 5.6212 6.10964H16.3554C18.8008 6.10964 20.2617 7.50094 20.2617 9.76936V11.5236C20.2617 14.5179 18.7055 16 15.498 16L0 16ZM77.2654 12.552H87.2374C88.8889 12.552 89.9369 11.5841 89.9369 10.0718V5.92816C89.9369 4.41587 88.8889 3.44801 87.2374 3.44801H77.2654V12.552ZM73.2639 16V0H87.3328C91.5248 0 93.9385 2.29867 93.9385 6.10964V9.89034C93.9385 13.7013 91.5248 16 87.3328 16H73.2639ZM53.872 12.552H62.288C63.8123 12.552 64.7968 11.6446 64.7968 10.2231V5.77693C64.7968 4.35538 63.8123 3.44801 62.288 3.44801H53.872C52.3477 3.44801 51.3632 4.35538 51.3632 5.77693V10.223C51.3632 11.6446 52.3477 12.552 53.872 12.552ZM62.3832 16H53.7768C49.7118 16 47.3616 13.7618 47.3616 10.0416V5.9584C47.3616 2.23818 49.7117 0 53.7768 0H62.3832C66.4482 0 68.7984 2.23818 68.7984 5.9584V10.0416C68.7984 13.7618 66.4483 16 62.3832 16ZM95.578 16L105.01 0H110.568L120 16H115.427L113.807 13.2476H105.772L103.613 9.98108L100.056 16H95.578ZM103.708 9.79961H111.775L107.741 2.99428L103.708 9.79961ZM8.3524 3.32702L6.06581 0H19.8806L17.6575 3.32702H8.3524ZM24.6649 16V0H28.6665V6.23062H33.9701L40.8616 0H46.1652L37.4 7.95462L46.324 16H40.7028L33.8113 9.67863H28.6665V16H24.6649Z\" />\n    </SvgIcon>\n  );\n});\n\nconst SeparatedHorizontalLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 120 16\" ref={ref} {...props}>\n      <path d=\"m0 16 2.2231-3.3875h12.894c0.7304 0 1.2068-0.4538 1.2068-1.1494v-1.966h-11.084c-3.3028 0-4.7637-1.3913-4.7637-4.4764v-1.3308c0-2.2987 1.4291-3.69 3.6839-3.69h0.25406v4.9603c0 0.69566 0.4764 1.1494 1.2068 1.1494h10.734c2.4454 0 3.9063 1.3913 3.9063 3.6597v1.7542c0 2.9943-1.5562 4.4764-4.7637 4.4764zm8.3524-12.673-2.2866-3.327h13.815l-2.2231 3.327z\" />\n      <path d=\"m24.665 16v-16h4.0016v6.2306h5.3036l6.8915-6.2306h5.3036l-8.7652 7.9546 8.924 8.0454h-5.6212l-6.8915-6.3214h-5.1448v6.3214z\" />\n      <path d=\"m53.872 12.552h8.416c1.5243 0 2.5088-0.9074 2.5088-2.3289v-4.4462c0-1.4216-0.9845-2.3289-2.5088-2.3289h-8.416c-1.5243 0-2.5088 0.90737-2.5088 2.3289v4.4461c0 1.4216 0.9845 2.329 2.5088 2.329zm8.5112 3.448h-8.6064c-4.065 0-6.4152-2.2382-6.4152-5.9584v-4.0832c0-3.7202 2.3501-5.9584 6.4152-5.9584h8.6064c4.065 0 6.4152 2.2382 6.4152 5.9584v4.0832c0 3.7202-2.3501 5.9584-6.4152 5.9584z\" />\n      <path d=\"m77.265 12.552h9.972c1.6515 0 2.6995-0.9679 2.6995-2.4802v-4.1436c0-1.5123-1.048-2.4802-2.6995-2.4802h-9.972zm-4.0015 3.448v-16h14.069c4.192 0 6.6057 2.2987 6.6057 6.1096v3.7807c0 3.811-2.4137 6.1097-6.6057 6.1097z\" />\n      <path d=\"m95.578 16 9.432-16h5.558l9.432 16h-4.573l-1.62-2.7524h-8.035l-2.159-3.2665-3.557 6.0189zm8.13-6.2004h8.067l-4.034-6.8053z\" />\n    </SvgIcon>\n  );\n});\n"],"names":["Logo","forwardRef","props","ref","Component","useMemo","variant","SeparatedLogo","LogoComponent","HorizontalLogo","_jsx","Object","assign","_a","subbrandText","subbrandProps","subbrandVariant","wrapperProps","breakpoint","width","height","rest","__rest","_b","sx","wrapperSx","restWrapper","_c","subbrandSx","restSubbrand","subbrandFontSize","subbrandSpacing","processValue","value","number","Number","parseFloat","replace","widthNumber","widthUnit","heightNumber","heightUnit","toFixed","_jsxs","Box","display","justifyContent","alignItems","flexDirection","userSelect","whiteSpace","fontWeight","letterSpacing","fontSize","mt","lineHeight","ml","xs","component","children","spacing","getTranslateX","useCallback","i","sp","Math","round","transition","transform","color","theme","useTheme","SymbolLogoComponent","VerticalLogoComponent","SeparatedHorizontalLogoComponent","HorizontalLogoComponent","logoColor","undefined","palette","mode","SvgIcon","viewBox","d"],"mappings":"iNAuEO,MAAMA,EAA4BC,EAAW,CAACC,EAAOC,KAC1D,MAAMC,EAAYC,EAAQ,KACxB,OAAQH,EAAMI,SACZ,IAAK,YACH,OAAOC,EACT,IAAK,SACL,IAAK,WACH,OAAOC,EACT,QACE,OAAOC,IAEV,CAACP,EAAMI,UAEV,OAAOI,EAACN,EAASO,OAAAC,OAAA,CAACT,IAAKA,GAASD,MAG5BO,EAAgDR,EACpD,CACEY,EAUAV,SAVAW,aACEA,EAAYC,cACZA,EAAaC,gBACbA,EAAkB,aAAYC,aAC9BA,EAAYC,WACZA,EAAUC,MACVA,EAAQ,QAAOC,OACfA,KACGC,EAAIC,EAAAT,EART,CAAA,eAAA,gBAAA,kBAAA,eAAA,aAAA,QAAA,WAYA,MAAMU,EAAoCN,QAAAA,EAAgB,IAAlDO,GAAIC,GAASF,EAAKG,EAAWJ,EAAAC,EAA/B,CAAA,OACAI,EAAsCZ,QAAAA,EAAiB,IAArDS,GAAII,GAAUD,EAAKE,EAAYP,EAAAK,EAAjC,CAAA,QAGCG,EAAkBC,GAAmB1B,EAAQ,KAClD,IAAKc,IAAUC,EACb,MAAO,CAAC,EAAG,GAGb,MAAMY,EAAgBC,IACpB,MAAMC,EAASC,OAAOC,WAAW,GAAGH,KAEpC,MAAO,CAACC,EADK,GAAGD,IAAQI,QAAQ,GAAGH,IAAU,KAAO,OAItD,IAAII,EAAqBC,EAAmBC,EAAsBC,EAWlE,OAVItB,IACDmB,EAAaC,GAAaP,EAAab,IAEvCqB,EAAcC,GAAcT,EAAa,GAAGM,EAAc,MAAMC,QAEhEC,EAAcC,GAAcT,EAAaZ,IAEzCkB,EAAaC,GAAaP,EAAa,GAAkB,IAAfQ,IAAqBC,MAG3D,CAEL,IAAIH,EAAc,MAAMI,QAAQ,KAAKH,IAErC,IAAIC,GAAoC,aAApBxB,EAAiC,EAAI,IAAI0B,QAAQ,KAAKD,MAE3E,CAACtB,EAAOC,EAAQJ,IAEnB,OAAIF,GAAgBgB,EAEhBa,EAACC,EAAGjC,OAAAC,OAAA,CACFY,GAAEb,OAAAC,OAAA,CACAiC,QAAS,cACTC,eAAgB,aAChBC,WAAgC,aAApB/B,EAAiC,aAAe,WAC5DgC,cAAmC,aAApBhC,EAAiC,SAAW,OACxDS,GAAS,cAEF,QACRC,aAEJhB,EAACF,iBAAcW,MAAOA,EAAOC,OAAQA,EAAQjB,IAAKA,GAASkB,IAC3DX,EAACkC,iBACCpB,GAAEb,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACAqC,WAAY,OACZC,WAAY,SACZC,WAAY,MACZC,cAAe,SACfC,SAAUvB,GACc,aAApBd,EACA,CACEsC,GAAIvB,EACJwB,WAAY,KAEd,CACEC,GAAIzB,EAEJwB,WAAY,QAGdrC,GAAc,CAChB2B,QAAS,CAAEY,GAAI,OAAQvC,CAACA,GAAa,YAEpCU,GAEL8B,UAAU,OAAM,cACJ,iBACR7B,EAAY,CAAA8B,SAEf7C,SAKAJ,EAACF,EAAaG,OAAAC,OAAA,CAACO,MAAOA,EAAOC,OAAQA,EAAQjB,IAAKA,GAASkB,MAKlEd,EAA8CN,EAAW,CAACY,EAAgCV,SAAhCqB,GAAEA,EAAEoC,QAAEA,EAAU,OAAQvC,EAAIC,EAAAT,EAA5B,CAAA,KAAA,YAE9D,MAAMgD,EAAgBC,EACpB,CAACC,EAAWC,IAEV,cAAcC,KAAKC,OAAO,CAAC,GAAG,SAAU,KAAO,EAAG,KAAM,MAAMH,IAAM,IAAMC,EAAK,IAAM,GAAK,KAAO,QACnG,IAGF,OACEtD,EAACF,EAAaG,OAAAC,OAAA,CACZY,GAAEb,OAAAC,OAAA,CACAuD,WAAY,yBACZ,SAAU,CACRC,UAAW,sBACXD,WAAY,4BAGd,wBAAyB,CAAEC,UAAWP,EAAc,EAAGD,IAEvD,wBAAyB,CAAEQ,UAAWP,EAAc,EAAGD,IAGvD,wBAAyB,CAAEQ,UAAWP,EAAc,EAAGD,IAEvD,wBAAyB,CAAEQ,UAAWP,EAAc,EAAGD,KACpDpC,GAELrB,IAAKA,GACDkB,MAKJb,EAA8CP,EAClD,CAACY,EAAyEV,KAAzE,IAAAqB,GAAEA,EAAEL,MAAEA,EAAQ,QAAOC,OAAEA,EAAMiD,MAAEA,EAAK/D,QAAEA,EAAU,cAAYO,EAAKQ,EAAIC,EAAAT,EAArE,2CACC,MAAMyD,EAAQC,IAERnE,EAAYC,EAAQ,KACxB,OAAQC,GACN,IAAK,SACH,OAAOkE,EACT,IAAK,WACH,OAAOC,EACT,IAAK,YACH,OAAOC,EACT,QACE,OAAOC,IAEV,CAACrE,IAEEsE,EAAYvE,EAAQ,KACxB,OAAQgE,GACN,UAAKQ,EACH,MAA8B,SAAvBP,EAAMQ,QAAQC,KAAkB,kBAAoB,iBAC7D,IAAK,UACH,MAAO,iBACT,IAAK,WACH,MAAO,kBACT,IAAK,QACH,MAAO,OACT,IAAK,QACH,MAAO,OACT,QACE,OAAOV,IAEV,CAACC,EAAMQ,QAAQC,KAAMV,IAExB,OACE3D,EAACN,EAASO,OAAAC,OAAA,CACRY,GAAEb,OAAAC,OAAA,CACAO,MAAOA,GAAS,QAChBC,OAAQA,GAAU,QAClBiC,SAAU,QACV,cAAe,CACbgB,MAAOO,IAENpD,GAAE,cAEM,QAAQlB,GAAW,eAChCH,IAAKA,GACDkB,MAMNmD,EAA8CvE,EAAW,CAACC,EAAOC,IAEnEO,EAACsE,EAAOrE,OAAAC,OAAA,CAACqE,QAAQ,YAAY9E,IAAKA,GAASD,YACzCQ,EAAA,OAAA,CAAMwE,EAAE,qmDAKRT,EAAgDxE,EAAW,CAACC,EAAOC,IAErEwC,EAACqC,EAAOrE,OAAAC,OAAA,CAACqE,QAAQ,cAAc9E,IAAKA,GAASD,EAAK,CAAAyD,SAAA,CAChDjD,EAAA,OAAA,CAAMwE,EAAE,qmDACRxE,EAAA,OAAA,CAAMwE,EAAE,04CAKRP,EAAkD1E,EAAW,CAACC,EAAOC,IAEvEO,EAACsE,EAAOrE,OAAAC,OAAA,CAACqE,QAAQ,aAAa9E,IAAKA,GAASD,YAC1CQ,EAAA,OAAA,CAAMwE,EAAE,62CAKRR,EAA2DzE,EAAW,CAACC,EAAOC,IAEhFwC,EAACqC,EAAOrE,OAAAC,OAAA,CAACqE,QAAQ,aAAa9E,IAAKA,GAASD,aAC1CQ,EAAA,OAAA,CAAMwE,EAAE,iWACRxE,EAAA,OAAA,CAAMwE,EAAE,gIACRxE,EAAA,OAAA,CAAMwE,EAAE,mYACRxE,EAAA,OAAA,CAAMwE,EAAE,2NACRxE,EAAA,OAAA,CAAMwE,EAAE"}
+{"version":3,"file":"Logo.js","sources":["../../../src/components/logo/Logo.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, Breakpoint, useTheme } from '@mui/material';\n\ninterface LogoBaseProps extends Omit<SvgIconProps, 'color'> {\n  /**\n   * Specifies which color should be used\n   * @default emerald in light mode, electric in dark mode\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n  color?: 'emerald' | 'electric' | 'white' | 'black' | string;\n  /**\n   * Width of the logo. Specify in px for subbrand to work properly\n   * @default 120px\n   */\n  width?: number | string;\n  /**\n   * Height of the logo\n   */\n  height?: number | string;\n}\n\ninterface LogoComponentProps extends LogoBaseProps {\n  variant?: 'horizontal' | 'vertical' | 'symbol' | 'separated';\n}\n\ninterface HorizontalLogoProps extends LogoBaseProps {\n  variant?: 'horizontal';\n  /**\n   * Subbrand text next to the logo\n   */\n  subbrandText?: string;\n  /**\n   * Defines if subbrand should render next to the logo\n   * @default horizontal\n   */\n  subbrandVariant?: 'horizontal' | 'vertical';\n  /**\n   * Properties applied to wrapper of subbrandText\n   */\n  subbrandProps?: BoxProps<ElementType>;\n  /**\n   * Breakpoint for hiding the Subbrand variant\n   */\n  breakpoint?: Breakpoint;\n  /**\n   * Properties applied to the wrapper of logo with subrandText\n   */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\ninterface VerticalLogoProps extends LogoBaseProps {\n  variant: 'vertical';\n}\n\ninterface SymbolLogoProps extends LogoBaseProps {\n  variant: 'symbol';\n}\n\ninterface SeparatedLogoProps extends LogoBaseProps {\n  variant: 'separated';\n  /**\n   * Change spacing size between letter\n   * @default 100\n   */\n  spacing?: number;\n}\n\nexport type LogoProps = HorizontalLogoProps | VerticalLogoProps | SymbolLogoProps | SeparatedLogoProps;\n\n/**\n * Logo of Škoda Auto a.s.\n */\nexport const Logo: React.FC<LogoProps> = forwardRef((props, ref) => {\n  const Component = useMemo<React.FC<LogoProps>>(() => {\n    switch (props.variant) {\n      case 'separated':\n        return SeparatedLogo;\n      case 'symbol':\n      case 'vertical':\n        return LogoComponent;\n      default:\n        return HorizontalLogo;\n    }\n  }, [props.variant]);\n\n  return <Component ref={ref} {...props} />;\n});\n\nconst HorizontalLogo: React.FC<HorizontalLogoProps> = forwardRef(\n  (\n    {\n      subbrandText,\n      subbrandProps,\n      subbrandVariant = 'horizontal',\n      wrapperProps,\n      breakpoint,\n      width = '120px',\n      height,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: subbrandSx, ...restSubbrand } = subbrandProps ?? {};\n\n    // obtain font size for he subbrand text based on the width\n    const [subbrandFontSize, subbrandSpacing] = useMemo(() => {\n      if (!width && !height) {\n        return [0, 0];\n      }\n      // split value to number and unit, e.g. \"100px\" => [100, \"px\"]\n      const processValue = (value: string | number): [number, string] => {\n        const number = Number.parseFloat(`${value}`);\n        const unit = `${value}`.replace(`${number}`, '') || 'px';\n        return [number, unit];\n      };\n      // obtain height and width value and units\n      let widthNumber: number, widthUnit: string, heightNumber: number, heightUnit: string;\n      if (width) {\n        [widthNumber, widthUnit] = processValue(width);\n        // obtain height from width (15:2 ratio)\n        [heightNumber, heightUnit] = processValue(`${widthNumber / 7.5}${widthUnit}`);\n      } else {\n        [heightNumber, heightUnit] = processValue(height);\n        // obtain width from height (2:15 ratio)\n        [widthNumber, widthUnit] = processValue(`${heightNumber * 7.5}${heightUnit}`);\n      }\n      // calculate subbrand font size and space\n      return [\n        // magic number making sure the capitalized letter is aligned with logo height\n        `${(widthNumber / 5.29).toFixed(2)}${widthUnit}`,\n        // 1/2 of height or 1/4 of height\n        `${(heightNumber / (subbrandVariant === 'vertical' ? 4 : 2)).toFixed(2)}${heightUnit}`,\n      ];\n    }, [width, height, subbrandVariant]);\n\n    if (subbrandText && subbrandFontSize) {\n      return (\n        <Box\n          sx={{\n            display: 'inline-flex',\n            justifyContent: 'flex-start',\n            alignItems: subbrandVariant === 'vertical' ? 'flex-start' : 'baseline',\n            flexDirection: subbrandVariant === 'vertical' ? 'column' : 'row',\n            ...wrapperSx,\n          }}\n          data-testid=\"Logo\"\n          {...restWrapper}\n        >\n          <LogoComponent width={width} height={height} ref={ref} {...rest} />\n          <Box\n            sx={{\n              userSelect: 'none',\n              whiteSpace: 'nowrap',\n              fontWeight: '300',\n              letterSpacing: '0.02em',\n              fontSize: subbrandFontSize,\n              ...(subbrandVariant === 'vertical'\n                ? {\n                    mt: subbrandSpacing,\n                    lineHeight: '1',\n                  }\n                : {\n                    ml: subbrandSpacing,\n                    // do not increase height of the logo\n                    lineHeight: '0px',\n                  }),\n              // hide subbrand with breakpoint\n              ...(breakpoint && {\n                display: { xs: 'none', [breakpoint]: 'inline' },\n              }),\n              ...subbrandSx,\n            }}\n            component=\"span\"\n            data-testid=\"Logo.subbrand\"\n            {...restSubbrand}\n          >\n            {subbrandText}\n          </Box>\n        </Box>\n      );\n    } else {\n      return <LogoComponent width={width} height={height} ref={ref} {...rest} />;\n    }\n  },\n);\n\nconst SeparatedLogo: React.FC<SeparatedLogoProps> = forwardRef(({ sx, spacing = 100, ...rest }, ref) => {\n  // function to get proper transform for each path, rounded to one decimal\n  const getTranslateX = useCallback(\n    (i: number, sp: number) =>\n      // values were manually mapped for each letter\n      `translateX(${Math.round(([0, -44.1667, -22.5, 0, 24.5, 46.5][i] || 0) * (sp / 100 - 1) * 100) / 100}%)`,\n    [],\n  );\n\n  return (\n    <LogoComponent\n      sx={{\n        transition: 'opacity 1s ease-in-out',\n        '& path': {\n          transform: 'translateZ(0, 0, 0)',\n          transition: 'transform 1s ease-in-out',\n        },\n        // \"s\" letter\n        '& path:nth-of-type(1)': { transform: getTranslateX(1, spacing) },\n        // \"k\" letter\n        '& path:nth-of-type(2)': { transform: getTranslateX(2, spacing) },\n        // \"o\" never moves\n        // \"d\" letter\n        '& path:nth-of-type(4)': { transform: getTranslateX(4, spacing) },\n        // \"a\" letter\n        '& path:nth-of-type(5)': { transform: getTranslateX(5, spacing) },\n        ...sx,\n      }}\n      ref={ref}\n      {...rest}\n    />\n  );\n});\n\nconst LogoComponent: React.FC<LogoComponentProps> = forwardRef(\n  ({ sx, width = '120px', height, color, variant = 'horizontal', ...rest }, ref) => {\n    const theme = useTheme();\n    // obtain component based on the variant\n    const Component = useMemo(() => {\n      switch (variant) {\n        case 'symbol':\n          return SymbolLogoComponent;\n        case 'vertical':\n          return VerticalLogoComponent;\n        case 'separated':\n          return SeparatedHorizontalLogoComponent;\n        default:\n          return HorizontalLogoComponent;\n      }\n    }, [variant]);\n    // obtain color\n    const logoColor = useMemo(() => {\n      switch (color) {\n        case undefined:\n          return theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary';\n        case 'emerald':\n          return 'brand.tertiary';\n        case 'electric':\n          return 'brand.secondary';\n        case 'white':\n          return '#fff';\n        case 'black':\n          return '#000';\n        default:\n          return color;\n      }\n    }, [theme.palette.mode, color]);\n\n    return (\n      <Component\n        sx={{\n          width: width || 'unset',\n          height: height || 'unset',\n          fontSize: 'unset',\n          '&, & + span': {\n            color: logoColor,\n          },\n          ...sx,\n        }}\n        data-testid={`Logo.${variant || 'horizontal'}`}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n\nconst SymbolLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 32 32\" ref={ref} {...props}>\n      <path d=\"M16 0C7.16345 0 0 7.16345 0 16C0 24.8366 7.16345 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16345 24.8366 0 16 0ZM16 30.6181C7.92664 30.6181 1.38188 24.0734 1.38188 16C1.38188 7.92664 7.92664 1.38188 16 1.38188C24.0734 1.38188 30.6181 7.92664 30.6181 16C30.6181 24.0734 24.0734 30.6181 16 30.6181ZM22.9186 20.9748L22.5599 21.9432H21.2481C21.5987 20.998 26.0191 10.4529 17.3331 3.30067C15.5096 3.10748 13.666 3.31141 11.9289 3.89843C12.2186 4.1318 15.2275 6.60184 16.6453 9.65167L16.2293 9.76367C15.4478 8.91211 12.6085 5.78599 9.90293 4.7799C8.44709 5.57356 7.15898 6.64201 6.10992 7.92608C7.3806 8.57612 10.7008 10.5592 11.9627 12.0997C11.8904 12.1322 11.6067 12.285 11.6067 12.285C9.29207 10.5258 5.18018 9.61266 4.97001 9.56732C4.1056 11.0449 3.54923 12.6821 3.33443 14.3804C9.70223 15.6621 11.4168 18.6091 11.7101 21.9432H10.504L8.43136 21.0398C8.32338 20.9993 8.2099 20.9754 8.09477 20.9689H4.23562C4.84653 22.4112 5.7173 23.7288 6.80453 24.8563H8.44907C8.59079 24.8563 8.7148 24.8386 8.8388 24.7677L10.504 23.9174H22.5599L22.9186 24.8859C24.4165 24.7132 25.8066 24.0213 26.8475 22.9303C25.8066 21.8394 24.4165 21.1475 22.9186 20.9748ZM18.2763 20.4696C17.9639 20.4696 17.6585 20.3769 17.3987 20.2033C17.1389 20.0298 16.9365 19.7831 16.8169 19.4944C16.6974 19.2058 16.6661 18.8881 16.727 18.5817C16.788 18.2753 16.9384 17.9938 17.1593 17.7729C17.3803 17.552 17.6617 17.4015 17.9682 17.3406C18.2746 17.2796 18.5922 17.3109 18.8808 17.4305C19.1695 17.55 19.4162 17.7525 19.5898 18.0123C19.7634 18.2721 19.856 18.5775 19.856 18.8899C19.856 19.3088 19.6896 19.7106 19.3933 20.0069C19.0971 20.3031 18.6953 20.4696 18.2763 20.4696Z\" />\n    </SvgIcon>\n  );\n});\n\nconst VerticalLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 138 130\" ref={ref} {...props}>\n      <path d=\"M66 21C51.6406 21 40 32.6406 40 47C40 61.3594 51.6406 73 66 73C80.3594 73 92 61.3594 92 47C92 32.6406 80.3594 21 66 21ZM66 70.7544C52.8808 70.7544 42.2456 60.1192 42.2456 47C42.2456 33.8808 52.8808 23.2456 66 23.2456C79.1192 23.2456 89.7544 33.8808 89.7544 47C89.7544 60.1192 79.1192 70.7544 66 70.7544ZM77.2427 55.084L76.6598 56.6578H74.5282C75.0979 55.1218 82.281 37.9859 68.1662 26.3636C65.2032 26.0497 62.2073 26.381 59.3845 27.335C59.8553 27.7142 64.7448 31.728 67.0487 36.684L66.3727 36.866C65.1026 35.4822 60.4889 30.4023 56.0923 28.7673C53.7265 30.057 51.6333 31.7933 49.9286 33.8799C51.9935 34.9361 57.3888 38.1586 59.4393 40.6619C59.3219 40.7147 58.8608 40.9631 58.8608 40.9631C55.0996 38.1043 48.4178 36.6205 48.0763 36.5469C46.6716 38.9479 45.7675 41.6084 45.4184 44.3681C55.7661 46.4509 58.5524 51.2397 59.0289 56.6578H57.069L53.701 55.1897C53.5255 55.1239 53.3411 55.0851 53.154 55.0745H46.8829C47.8756 57.4181 49.2906 59.5594 51.0574 61.3915H53.7297C53.95 61.4023 54.1691 61.3525 54.363 61.2476L57.069 59.8658H76.6598L77.2427 61.4396C79.6768 61.1589 81.9357 60.0345 83.6271 58.2618C81.9357 56.4891 79.6768 55.3647 77.2427 55.084ZM69.699 54.263C69.1913 54.263 68.695 54.1125 68.2729 53.8304C67.8508 53.5483 67.5218 53.1474 67.3275 52.6784C67.1332 52.2093 67.0824 51.6932 67.1814 51.1953C67.2805 50.6973 67.5249 50.24 67.8839 49.881C68.2429 49.522 68.7003 49.2775 69.1982 49.1785C69.6962 49.0794 70.2123 49.1302 70.6814 49.3245C71.1504 49.5188 71.5513 49.8478 71.8334 50.27C72.1154 50.6921 72.266 51.1884 72.266 51.6961C72.266 52.3769 71.9955 53.0298 71.5141 53.5112C71.0327 53.9926 70.3798 54.263 69.699 54.263H69.699Z\" />\n      <path d=\"M10 101L12.1675 97.6125H24.739C25.4511 97.6125 25.9156 97.1587 25.9156 96.4631V94.4971H15.1091C11.8888 94.4971 10.4645 93.1059 10.4645 90.0208V88.69C10.4645 86.3913 11.8579 85 14.0563 85H14.304V89.9603C14.304 90.6559 14.7685 91.1096 15.4807 91.1096H25.9466C28.3308 91.1096 29.7552 92.5009 29.7552 94.7694V96.5236C29.7552 99.5179 28.2379 101 25.1105 101L10 101ZM85.3338 97.552H95.0565C96.6666 97.552 97.6885 96.5841 97.6885 95.0718V90.9282C97.6885 89.4159 96.6666 88.448 95.0565 88.448H85.3338V97.552ZM81.4323 101V85H95.1494C99.2367 85 101.59 87.2987 101.59 91.1096V94.8903C101.59 98.7013 99.2367 101 95.1494 101H81.4323ZM62.5252 97.552H70.7308C72.217 97.552 73.1769 96.6446 73.1769 95.2231V90.7769C73.1769 89.3554 72.217 88.448 70.7308 88.448H62.5252C61.039 88.448 60.0791 89.3554 60.0791 90.7769V95.223C60.0791 96.6446 61.039 97.552 62.5252 97.552ZM70.8236 101H62.4324C58.469 101 56.1776 98.7618 56.1776 95.0416V90.9584C56.1776 87.2382 58.4689 85 62.4324 85H70.8236C74.787 85 77.0784 87.2382 77.0784 90.9584V95.0416C77.0784 98.7618 74.7871 101 70.8236 101ZM103.189 101L112.385 85H117.804L127 101H122.541L120.962 98.2476H113.128L111.022 94.9811L107.554 101H103.189ZM111.115 94.7996H118.98L115.048 87.9943L111.115 94.7996ZM18.1436 88.327L15.9142 85H29.3836L27.2161 88.327H18.1436ZM34.0483 101V85H37.9498V91.2306H43.1208L49.8401 85H55.0111L46.465 92.9546L55.1659 101H49.6852L42.966 94.6786H37.9498V101H34.0483Z\" />\n    </SvgIcon>\n  );\n});\n\nconst HorizontalLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 120 16\" ref={ref} {...props}>\n      <path d=\"M0 16L2.22307 12.6125H15.1169C15.8473 12.6125 16.3237 12.1587 16.3237 11.4631V9.49713H5.24009C1.93724 9.49713 0.4764 8.10585 0.4764 5.02078V3.68997C0.4764 1.3913 1.90549 0 4.16032 0H4.41438V4.96029C4.41438 5.65595 4.89078 6.10964 5.6212 6.10964H16.3554C18.8008 6.10964 20.2617 7.50094 20.2617 9.76936V11.5236C20.2617 14.5179 18.7055 16 15.498 16L0 16ZM77.2654 12.552H87.2374C88.8889 12.552 89.9369 11.5841 89.9369 10.0718V5.92816C89.9369 4.41587 88.8889 3.44801 87.2374 3.44801H77.2654V12.552ZM73.2639 16V0H87.3328C91.5248 0 93.9385 2.29867 93.9385 6.10964V9.89034C93.9385 13.7013 91.5248 16 87.3328 16H73.2639ZM53.872 12.552H62.288C63.8123 12.552 64.7968 11.6446 64.7968 10.2231V5.77693C64.7968 4.35538 63.8123 3.44801 62.288 3.44801H53.872C52.3477 3.44801 51.3632 4.35538 51.3632 5.77693V10.223C51.3632 11.6446 52.3477 12.552 53.872 12.552ZM62.3832 16H53.7768C49.7118 16 47.3616 13.7618 47.3616 10.0416V5.9584C47.3616 2.23818 49.7117 0 53.7768 0H62.3832C66.4482 0 68.7984 2.23818 68.7984 5.9584V10.0416C68.7984 13.7618 66.4483 16 62.3832 16ZM95.578 16L105.01 0H110.568L120 16H115.427L113.807 13.2476H105.772L103.613 9.98108L100.056 16H95.578ZM103.708 9.79961H111.775L107.741 2.99428L103.708 9.79961ZM8.3524 3.32702L6.06581 0H19.8806L17.6575 3.32702H8.3524ZM24.6649 16V0H28.6665V6.23062H33.9701L40.8616 0H46.1652L37.4 7.95462L46.324 16H40.7028L33.8113 9.67863H28.6665V16H24.6649Z\" />\n    </SvgIcon>\n  );\n});\n\nconst SeparatedHorizontalLogoComponent: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 120 16\" ref={ref} {...props}>\n      <path d=\"m0 16 2.2231-3.3875h12.894c0.7304 0 1.2068-0.4538 1.2068-1.1494v-1.966h-11.084c-3.3028 0-4.7637-1.3913-4.7637-4.4764v-1.3308c0-2.2987 1.4291-3.69 3.6839-3.69h0.25406v4.9603c0 0.69566 0.4764 1.1494 1.2068 1.1494h10.734c2.4454 0 3.9063 1.3913 3.9063 3.6597v1.7542c0 2.9943-1.5562 4.4764-4.7637 4.4764zm8.3524-12.673-2.2866-3.327h13.815l-2.2231 3.327z\" />\n      <path d=\"m24.665 16v-16h4.0016v6.2306h5.3036l6.8915-6.2306h5.3036l-8.7652 7.9546 8.924 8.0454h-5.6212l-6.8915-6.3214h-5.1448v6.3214z\" />\n      <path d=\"m53.872 12.552h8.416c1.5243 0 2.5088-0.9074 2.5088-2.3289v-4.4462c0-1.4216-0.9845-2.3289-2.5088-2.3289h-8.416c-1.5243 0-2.5088 0.90737-2.5088 2.3289v4.4461c0 1.4216 0.9845 2.329 2.5088 2.329zm8.5112 3.448h-8.6064c-4.065 0-6.4152-2.2382-6.4152-5.9584v-4.0832c0-3.7202 2.3501-5.9584 6.4152-5.9584h8.6064c4.065 0 6.4152 2.2382 6.4152 5.9584v4.0832c0 3.7202-2.3501 5.9584-6.4152 5.9584z\" />\n      <path d=\"m77.265 12.552h9.972c1.6515 0 2.6995-0.9679 2.6995-2.4802v-4.1436c0-1.5123-1.048-2.4802-2.6995-2.4802h-9.972zm-4.0015 3.448v-16h14.069c4.192 0 6.6057 2.2987 6.6057 6.1096v3.7807c0 3.811-2.4137 6.1097-6.6057 6.1097z\" />\n      <path d=\"m95.578 16 9.432-16h5.558l9.432 16h-4.573l-1.62-2.7524h-8.035l-2.159-3.2665-3.557 6.0189zm8.13-6.2004h8.067l-4.034-6.8053z\" />\n    </SvgIcon>\n  );\n});\n"],"names":["Logo","forwardRef","props","ref","Component","useMemo","variant","SeparatedLogo","LogoComponent","HorizontalLogo","_jsx","subbrandText","subbrandProps","subbrandVariant","wrapperProps","breakpoint","width","height","rest","sx","wrapperSx","restWrapper","subbrandSx","restSubbrand","subbrandFontSize","subbrandSpacing","processValue","value","number","Number","parseFloat","replace","widthNumber","widthUnit","heightNumber","heightUnit","toFixed","_jsxs","Box","display","justifyContent","alignItems","flexDirection","children","userSelect","whiteSpace","fontWeight","letterSpacing","fontSize","mt","lineHeight","ml","xs","component","spacing","getTranslateX","useCallback","i","sp","Math","round","transition","transform","color","theme","useTheme","SymbolLogoComponent","VerticalLogoComponent","SeparatedHorizontalLogoComponent","HorizontalLogoComponent","logoColor","undefined","palette","mode","SvgIcon","viewBox","d"],"mappings":"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"}

package/components/notification/Notification.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"tslib";import{jsxs as s,jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as o,Typography as r,IconButton as n,Stack as a}from"@mui/material";import{Label as c}from"../label/Label.js";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const p=e((e,p)=>{var{sx:d,headline:x,titleProps:f,titleWrapperProps:m,descriptionProps:b,descriptionWrapperProps:g,wrapperProps:h,color:u,isNew:j,headerProps:O,icon:P,iconProps:w,footer:v,buttons:y,buttonsProps:N,footerProps:k,onDismiss:I,closeIconButtonProps:W,closeIconProps:C,children:D}=e,S=i(e,["sx","headline","titleProps","titleWrapperProps","descriptionProps","descriptionWrapperProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children"]);const B=null!=h?h:{},{sx:z}=B,L=i(B,["sx"]),M=null!=O?O:{},{sx:F}=M,G=i(M,["sx"]),R=null!=N?N:{},{sx:V}=R,q=i(R,["sx"]),A=null!=b?b:{},{sx:E}=A,H=i(A,["sx"]),J=null!=f?f:{},{sx:K}=J,Q=i(J,["sx"]),T=null!=W?W:{},{sx:U}=T,X=i(T,["sx"]),Y=null!=w?w:{},{sx:Z}=Y,$=i(Y,["sx"]);return s(o,Object.assign({ref:p,sx:Object.assign({backgroundColor:"grey"===u?"surface.primary":"background.primary",padding:"16px 16px 24px",display:"flex",flexDirection:"row",gap:2,position:"relative"},d),"data-testid":"Notification"},S,{children:[P&&t(o,Object.assign({sx:Object.assign({display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:{xs:"32px",md:"56px"},height:{xs:"32px",md:"56px"},backgroundColor:"transparent.backdrop",flexShrink:"0",overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover"},"& .MuiSvgIcon-root":{width:{xs:"22px",md:"32px"},height:{xs:"22px",md:"32px"}}},Z),"data-testid":"Notification.icon"},$,{children:P})),s(o,Object.assign({sx:Object.assign({width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"4px",flexDirection:"column",padding:"4px","&:hover .notification-dismiss":{opacity:"1"}},z)},L,{children:[s(o,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1},F)},G,{children:[j&&t(c,{type:"indicator",variant:"neutral"}),t(r,Object.assign({variant:"subheadline",sx:Object.assign({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flexGrow:"1",minWidth:"0"},K),"data-testid":"Notification.headline"},Q,{children:x})),I&&t(n,Object.assign({"aria-label":"Dismiss notification",onClick:I,size:"small",className:"notification-dismiss",sx:Object.assign({padding:"2px",opacity:{xs:"1",md:"0"},"&.Mui-focusVisible":{opacity:"1"}},U),"data-testid":"Notification.dismiss"},X,{children:t(l,Object.assign({fontSize:"small",className:"ballotx",name:"close"},C))}))]})),t(o,Object.assign({"data-testid":"Notification.description"},g,{children:"string"==typeof D?t(r,Object.assign({sx:Object.assign({overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},E),variant:"disclaimer1"},H,{children:D})):D})),v&&t(r,Object.assign({variant:"disclaimer1",color:"onSurface.os600","data-testid":"Notification.footer"},k,{children:v})),y&&t(a,Object.assign({direction:"row",sx:Object.assign({mt:1.5},V),spacing:1,"data-testid":"Notification.buttons"},q,{children:y}))]}))]}))});export{p as Notification};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as e,Typography as r,IconButton as s,Stack as a}from"@mui/material";import{Label as n}from"../label/Label.js";import{CloseIcon as d}from"../icon/stroke/CloseIcon.js";const l=o(({sx:o,headline:l,titleProps:c,titleWrapperProps:p,descriptionProps:x,descriptionWrapperProps:f,wrapperProps:m,color:h,isNew:u,headerProps:b,icon:g,iconProps:w,footer:v,buttons:y,buttonsProps:P,footerProps:k,onDismiss:N,closeIconButtonProps:C,closeIconProps:j,children:I,...W},S)=>{const{sx:D,...O}=m??{},{sx:z,...B}=b??{},{sx:L,...M}=P??{},{sx:F,...G}=x??{},{sx:R,...V}=c??{},{sx:q,...A}=C??{},{sx:E,...H}=w??{};return i(e,{ref:S,sx:{backgroundColor:"grey"===h?"surface.primary":"background.primary",padding:"16px 16px 24px",display:"flex",flexDirection:"row",gap:2,position:"relative",...o},"data-testid":"Notification",...W,children:[g&&t(e,{sx:{display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:{xs:"32px",md:"56px"},height:{xs:"32px",md:"56px"},backgroundColor:"transparent.backdrop",flexShrink:"0",overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover"},"& .MuiSvgIcon-root":{width:{xs:"22px",md:"32px"},height:{xs:"22px",md:"32px"}},...E},"data-testid":"Notification.icon",...H,children:g}),i(e,{sx:{width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"4px",flexDirection:"column",padding:"4px","&:hover .notification-dismiss":{opacity:"1"},...D},...O,children:[i(e,{sx:{display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1,...z},...B,children:[u&&t(n,{type:"indicator",variant:"neutral"}),t(r,{variant:"subheadline",sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flexGrow:"1",minWidth:"0",...R},"data-testid":"Notification.headline",...V,children:l}),N&&t(s,{"aria-label":"Dismiss notification",onClick:N,size:"small",className:"notification-dismiss",sx:{padding:"2px",opacity:{xs:"1",md:"0"},"&.Mui-focusVisible":{opacity:"1"},...q},"data-testid":"Notification.dismiss",...A,children:t(d,{fontSize:"small",className:"ballotx",name:"close",...j})})]}),t(e,{"data-testid":"Notification.description",...f,children:"string"==typeof I?t(r,{sx:{overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical",...F},variant:"disclaimer1",...G,children:I}):I}),v&&t(r,{variant:"disclaimer1",color:"onSurface.os600","data-testid":"Notification.footer",...k,children:v}),y&&t(a,{direction:"row",sx:{mt:1.5,...L},spacing:1,"data-testid":"Notification.buttons",...M,children:y})]})]})});export{l as Notification};
 //# sourceMappingURL=Notification.js.map

package/components/notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  Typography,\n  TypographyProps,\n  Stack,\n  IconButton,\n  StackProps,\n  IconButtonProps,\n  IconProps,\n} from '@mui/material';\nimport { Label } from '@/src/components/label/Label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationProps extends BoxProps<ElementType> {\n  /**\n   * headline of the notification\n   */\n  headline?: React.ReactNode;\n  /**\n   * Custom props for the headline\n   */\n  headlineProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the description typography\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for description wrapper\n   */\n  descriptionWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the wrapper container\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Different color options for the notification\n   */\n  color?: 'white' | 'grey';\n  /**\n   * Indicates if the notification is new\n   */\n  isNew?: boolean;\n  /**\n   * Custom props for the header container\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Icon to display in the notification\n   */\n  icon?: React.ReactNode;\n  /**\n   * Custom props for the icon container\n   */\n  iconProps?: BoxProps<ElementType>;\n  /**\n   * Footer text for the notification\n   */\n  footer?: React.ReactNode;\n  /**\n   * Control Buttons to display in the notification\n   */\n  buttons?: React.ReactNode;\n  /**\n   * Custom props for the buttons container\n   */\n  buttonsProps?: StackProps<ElementType>;\n  /**\n   * Custom props for the footer container\n   */\n  footerProps?: TypographyProps<ElementType>;\n  /**\n   * Callback function when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom props for the close icon container\n   */\n  closeIconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  closeIconProps?: IconProps<ElementType>;\n}\n\n/**\n * Component that renders a notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n  (\n    {\n      sx,\n      headline,\n      titleProps,\n      titleWrapperProps,\n      descriptionProps,\n      descriptionWrapperProps,\n      wrapperProps,\n      color,\n      isNew,\n      headerProps,\n      icon,\n      iconProps,\n      footer,\n      buttons,\n      buttonsProps,\n      footerProps,\n      onDismiss,\n      closeIconButtonProps,\n      closeIconProps,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n          padding: '16px 16px 24px',\n          display: 'flex',\n          flexDirection: 'row',\n          gap: 2,\n          position: 'relative',\n          ...sx,\n        }}\n        data-testid=\"Notification\"\n        {...rest}\n      >\n        {icon && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              borderRadius: '50%',\n              width: { xs: '32px', md: '56px' },\n              height: { xs: '32px', md: '56px' },\n              backgroundColor: 'transparent.backdrop',\n              flexShrink: '0',\n              overflow: 'hidden',\n              '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n              '& .MuiSvgIcon-root': {\n                width: { xs: '22px', md: '32px' },\n                height: { xs: '22px', md: '32px' },\n              },\n              ...iconSx,\n            }}\n            data-testid=\"Notification.icon\"\n            {...restIcon}\n          >\n            {icon}\n          </Box>\n        )}\n        <Box\n          sx={{\n            width: '100%',\n            maxWidth: '100%',\n            overflow: 'hidden',\n            display: 'flex',\n            gap: '4px',\n            flexDirection: 'column',\n            // Small padding to prevent focus ring trimming\n            padding: '4px',\n            // show dismiss button on hover Desktop + Tablet\n            '&:hover .notification-dismiss': {\n              opacity: '1',\n            },\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n            {...restHeader}\n          >\n            {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n            <Typography\n              variant=\"subheadline\"\n              sx={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                flexGrow: '1',\n                minWidth: '0',\n                ...titleSx,\n              }}\n              data-testid=\"Notification.headline\"\n              {...restTitle}\n            >\n              {headline}\n            </Typography>\n            {onDismiss && (\n              <IconButton\n                aria-label=\"Dismiss notification\"\n                onClick={onDismiss}\n                size=\"small\"\n                className=\"notification-dismiss\"\n                sx={{\n                  padding: '2px',\n                  // hide dismiss button Desktop + Tablet, keep on mobile\n                  opacity: { xs: '1', md: '0' },\n                  // show dismiss button on focus\n                  '&.Mui-focusVisible': {\n                    opacity: '1',\n                  },\n                  ...closeIconButtonSx,\n                }}\n                data-testid=\"Notification.dismiss\"\n                {...restCloseIconButton}\n              >\n                <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n              </IconButton>\n            )}\n          </Box>\n          <Box data-testid=\"Notification.description\" {...descriptionWrapperProps}>\n            {typeof children === 'string' ? (\n              <Typography\n                sx={{\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitLineClamp: '2',\n                  WebkitBoxOrient: 'vertical',\n                  ...descriptionSx,\n                }}\n                variant=\"disclaimer1\"\n                {...restDescription}\n              >\n                {children}\n              </Typography>\n            ) : (\n              children\n            )}\n          </Box>\n          {footer && (\n            <Typography\n              variant=\"disclaimer1\"\n              color={'onSurface.os600'}\n              data-testid=\"Notification.footer\"\n              {...footerProps}\n            >\n              {footer}\n            </Typography>\n          )}\n          {buttons && (\n            <Stack\n              direction=\"row\"\n              sx={{ mt: 1.5, ...buttonsSx }}\n              spacing={1}\n              data-testid=\"Notification.buttons\"\n              {...restButtons}\n            >\n              {buttons}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["Notification","forwardRef","_a","ref","sx","headline","titleProps","titleWrapperProps","descriptionProps","descriptionWrapperProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","__rest","_b","wrapperSx","restWrapper","_c","headerSx","restHeader","_d","buttonsSx","restButtons","_e","descriptionSx","restDescription","_f","titleSx","restTitle","_g","closeIconButtonSx","restCloseIconButton","_h","iconSx","restIcon","_jsxs","Box","Object","assign","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  Typography,\n  TypographyProps,\n  Stack,\n  IconButton,\n  StackProps,\n  IconButtonProps,\n  IconProps,\n} from '@mui/material';\nimport { Label } from '@/src/components/label/Label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationProps extends BoxProps<ElementType> {\n  /**\n   * headline of the notification\n   */\n  headline?: React.ReactNode;\n  /**\n   * Custom props for the headline\n   */\n  headlineProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the description typography\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for description wrapper\n   */\n  descriptionWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the wrapper container\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Different color options for the notification\n   */\n  color?: 'white' | 'grey';\n  /**\n   * Indicates if the notification is new\n   */\n  isNew?: boolean;\n  /**\n   * Custom props for the header container\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Icon to display in the notification\n   */\n  icon?: React.ReactNode;\n  /**\n   * Custom props for the icon container\n   */\n  iconProps?: BoxProps<ElementType>;\n  /**\n   * Footer text for the notification\n   */\n  footer?: React.ReactNode;\n  /**\n   * Control Buttons to display in the notification\n   */\n  buttons?: React.ReactNode;\n  /**\n   * Custom props for the buttons container\n   */\n  buttonsProps?: StackProps<ElementType>;\n  /**\n   * Custom props for the footer container\n   */\n  footerProps?: TypographyProps<ElementType>;\n  /**\n   * Callback function when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom props for the close icon container\n   */\n  closeIconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  closeIconProps?: IconProps<ElementType>;\n}\n\n/**\n * Component that renders a notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n  (\n    {\n      sx,\n      headline,\n      titleProps,\n      titleWrapperProps,\n      descriptionProps,\n      descriptionWrapperProps,\n      wrapperProps,\n      color,\n      isNew,\n      headerProps,\n      icon,\n      iconProps,\n      footer,\n      buttons,\n      buttonsProps,\n      footerProps,\n      onDismiss,\n      closeIconButtonProps,\n      closeIconProps,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n          padding: '16px 16px 24px',\n          display: 'flex',\n          flexDirection: 'row',\n          gap: 2,\n          position: 'relative',\n          ...sx,\n        }}\n        data-testid=\"Notification\"\n        {...rest}\n      >\n        {icon && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              borderRadius: '50%',\n              width: { xs: '32px', md: '56px' },\n              height: { xs: '32px', md: '56px' },\n              backgroundColor: 'transparent.backdrop',\n              flexShrink: '0',\n              overflow: 'hidden',\n              '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n              '& .MuiSvgIcon-root': {\n                width: { xs: '22px', md: '32px' },\n                height: { xs: '22px', md: '32px' },\n              },\n              ...iconSx,\n            }}\n            data-testid=\"Notification.icon\"\n            {...restIcon}\n          >\n            {icon}\n          </Box>\n        )}\n        <Box\n          sx={{\n            width: '100%',\n            maxWidth: '100%',\n            overflow: 'hidden',\n            display: 'flex',\n            gap: '4px',\n            flexDirection: 'column',\n            // Small padding to prevent focus ring trimming\n            padding: '4px',\n            // show dismiss button on hover Desktop + Tablet\n            '&:hover .notification-dismiss': {\n              opacity: '1',\n            },\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n            {...restHeader}\n          >\n            {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n            <Typography\n              variant=\"subheadline\"\n              sx={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                flexGrow: '1',\n                minWidth: '0',\n                ...titleSx,\n              }}\n              data-testid=\"Notification.headline\"\n              {...restTitle}\n            >\n              {headline}\n            </Typography>\n            {onDismiss && (\n              <IconButton\n                aria-label=\"Dismiss notification\"\n                onClick={onDismiss}\n                size=\"small\"\n                className=\"notification-dismiss\"\n                sx={{\n                  padding: '2px',\n                  // hide dismiss button Desktop + Tablet, keep on mobile\n                  opacity: { xs: '1', md: '0' },\n                  // show dismiss button on focus\n                  '&.Mui-focusVisible': {\n                    opacity: '1',\n                  },\n                  ...closeIconButtonSx,\n                }}\n                data-testid=\"Notification.dismiss\"\n                {...restCloseIconButton}\n              >\n                <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n              </IconButton>\n            )}\n          </Box>\n          <Box data-testid=\"Notification.description\" {...descriptionWrapperProps}>\n            {typeof children === 'string' ? (\n              <Typography\n                sx={{\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitLineClamp: '2',\n                  WebkitBoxOrient: 'vertical',\n                  ...descriptionSx,\n                }}\n                variant=\"disclaimer1\"\n                {...restDescription}\n              >\n                {children}\n              </Typography>\n            ) : (\n              children\n            )}\n          </Box>\n          {footer && (\n            <Typography\n              variant=\"disclaimer1\"\n              color={'onSurface.os600'}\n              data-testid=\"Notification.footer\"\n              {...footerProps}\n            >\n              {footer}\n            </Typography>\n          )}\n          {buttons && (\n            <Stack\n              direction=\"row\"\n              sx={{ mt: 1.5, ...buttonsSx }}\n              spacing={1}\n              data-testid=\"Notification.buttons\"\n              {...restButtons}\n            >\n              {buttons}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["Notification","forwardRef","sx","headline","titleProps","titleWrapperProps","descriptionProps","descriptionWrapperProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","ref","wrapperSx","restWrapper","headerSx","restHeader","buttonsSx","restButtons","descriptionSx","restDescription","titleSx","restTitle","closeIconButtonSx","restCloseIconButton","iconSx","restIcon","_jsxs","Box","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"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"}

package/components/notification/NotificationButton.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Button as t}from"@mui/material";const e=o((o,e)=>r(t,Object.assign({ref:e,variant:"outlined",size:"small",color:"secondary"},o)));export{e as NotificationButton};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Button as t}from"@mui/material";const m=o((o,m)=>r(t,{ref:m,variant:"outlined",size:"small",color:"secondary",...o}));export{m as NotificationButton};
 //# sourceMappingURL=NotificationButton.js.map

package/components/notification/NotificationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationButton.js","sources":["../../../src/components/notification/NotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface NotificationButtonProps extends ButtonProps {}\n\n/**\n * NotificationButton is a proxy component to <Button variant=\"outline\" size=\"small\" color=\"secondary\" />\n */\nexport const NotificationButton: React.FC<NotificationButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"outlined\" size=\"small\" color=\"secondary\" {...props} />;\n});\n"],"names":["NotificationButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","size","color"],"mappings":"kHAQO,MAAMA,EAAwDC,EAAW,CAACC,EAAOC,IAC/EC,EAACC,EAAMC,OAAAC,OAAA,CAACJ,IAAKA,EAAKK,QAAQ,WAAWC,KAAK,QAAQC,MAAM,aAAgBR"}
+{"version":3,"file":"NotificationButton.js","sources":["../../../src/components/notification/NotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface NotificationButtonProps extends ButtonProps {}\n\n/**\n * NotificationButton is a proxy component to <Button variant=\"outline\" size=\"small\" color=\"secondary\" />\n */\nexport const NotificationButton: React.FC<NotificationButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"outlined\" size=\"small\" color=\"secondary\" {...props} />;\n});\n"],"names":["NotificationButton","forwardRef","props","ref","_jsx","Button","variant","size","color"],"mappings":"kHAQO,MAAMA,EAAwDC,EAAW,CAACC,EAAOC,IAC/EC,EAACC,EAAM,CAACF,IAAKA,EAAKG,QAAQ,WAAWC,KAAK,QAAQC,MAAM,eAAgBN"}

package/components/notification/NotificationCenter.js

@@ -1,2 +1,2 @@
-import{__rest as s}from"tslib";import{jsxs as i,jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as e,Typography as n,IconButton as r,Button as a}from"@mui/material";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const c=o((o,c)=>{var{children:d,sx:x,title:p="Notifications",headerProps:m,titleProps:f,dismissAllText:b="Dismiss All",onDismissAll:g,onClose:u,iconButtonProps:h,iconProps:C,containerProps:j,dismissBoxProps:P,dismissButtonProps:O,height:y=556}=o,N=s(o,["children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height"]);const B=null!=m?m:{},{sx:v}=B,k=s(B,["sx"]),w=null!=j?j:{},{sx:A}=w,D=s(w,["sx"]),z=null!=P?P:{},{sx:S}=z,T=s(z,["sx"]),H=null!=h?h:{},{sx:I}=H,R=s(H,["sx"]);return i(e,Object.assign({ref:c,sx:Object.assign({display:"flex",flexDirection:"column",width:{xs:"100%",sm:"360px",md:"440px"},borderRadius:{xs:"0px",sm:"8px"},backgroundColor:"background.primary",color:"text.primary",boxShadow:"0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)",overflow:"hidden",maxHeight:(Y=y,"string"==typeof Y&&Y.includes("px")?Y:`${Y}px`)},x),"data-testid":"NotificationCenter"},N,{children:[i(e,Object.assign({sx:Object.assign({padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between"},v)},k,{children:[t(n,Object.assign({variant:"h4",component:"span","data-testid":"NotificationCenter.title"},f,{children:p})),u&&t(r,Object.assign({"aria-label":"onClose notificationCenter",onClick:u,size:"medium",className:"notificationCenter-onClose",sx:Object.assign({padding:"4px"},I),"data-testid":"NotificationCenter.onClose"},R,{children:t(l,Object.assign({fontSize:"medium",className:"ballotx"},C))}))]})),g&&t(e,Object.assign({sx:Object.assign({padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end"},S)},T,{children:t(a,Object.assign({onClick:g,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss"},O,{children:b}))})),t(e,Object.assign({sx:Object.assign({overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"}},A),"data-testid":"NotificationCenter.content"},D,{children:d}))]}));var Y});export{c as NotificationCenter};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as e,Typography as s,IconButton as n,Button as r}from"@mui/material";import{CloseIcon as a}from"../icon/stroke/CloseIcon.js";const d=o(({children:o,sx:d,title:l="Notifications",headerProps:x,titleProps:p,dismissAllText:c="Dismiss All",onDismissAll:m,onClose:f,iconButtonProps:C,iconProps:h,containerProps:u,dismissBoxProps:b,dismissButtonProps:g,height:y=556,...N},P)=>{const{sx:k,...v}=x??{},{sx:w,...j}=u??{},{sx:B,...z}=b??{},{sx:A,...D}=C??{};return i(e,{ref:P,sx:{display:"flex",flexDirection:"column",width:{xs:"100%",sm:"360px",md:"440px"},borderRadius:{xs:"0px",sm:"8px"},backgroundColor:"background.primary",color:"text.primary",boxShadow:"0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)",overflow:"hidden",maxHeight:(S=y,"string"==typeof S&&S.includes("px")?S:`${S}px`),...d},"data-testid":"NotificationCenter",...N,children:[i(e,{sx:{padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between",...k},...v,children:[t(s,{variant:"h4",component:"span","data-testid":"NotificationCenter.title",...p,children:l}),f&&t(n,{"aria-label":"onClose notificationCenter",onClick:f,size:"medium",className:"notificationCenter-onClose",sx:{padding:"4px",...A},"data-testid":"NotificationCenter.onClose",...D,children:t(a,{fontSize:"medium",className:"ballotx",...h})})]}),m&&t(e,{sx:{padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end",...B},...z,children:t(r,{onClick:m,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss",...g,children:c})}),t(e,{sx:{overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"},...w},"data-testid":"NotificationCenter.content",...j,children:o})]});var S});export{d as NotificationCenter};
 //# sourceMappingURL=NotificationCenter.js.map

package/components/notification/NotificationCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.js","sources":["../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          width: { xs: '100%', sm: '360px', md: '440px' },\n          borderRadius: { xs: '0px', sm: '8px' },\n          backgroundColor: 'background.primary',\n          color: 'text.primary',\n          boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n          overflow: 'hidden',\n          maxHeight: formatHeight(height),\n          ...sx,\n        }}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={{\n            padding: '16px 8px 16px 16px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            ...headerSx,\n          }}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={{\n                padding: '4px',\n                ...iconButtonSx,\n              }}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={{\n              padding: '0 8px 4px 16px',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              ...dismissBoxSx,\n            }}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={{\n            overflowY: 'auto',\n            // add divider between notifications\n            '& [data-testid=\"Notification\"]:not(:last-child)': {\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            ...containerSx,\n          }}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","_a","ref","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","__rest","_b","headerSx","restHeader","_c","containerSx","restContainer","_d","dismissBoxSx","restDismissBox","_e","iconButtonSx","restIconButton","_jsxs","Box","Object","assign","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"4PAiEO,MAAMA,EAAkDC,EAC7D,CACEC,EAiBAC,KAjBA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,MACFA,EAAQ,gBAAeC,YACvBA,EAAWC,WACXA,EAAUC,eACVA,EAAiB,cAAaC,aAC9BA,EAAYC,QACZA,EAAOC,gBACPA,EAAeC,UACfA,EAASC,eACTA,EAAcC,gBACdA,EAAeC,mBACfA,EAAkBC,OAClBA,EAAS,KAAGf,EACTgB,EAAIC,EAAAjB,EAfT,+LAmBA,MAAMkB,EAAkCb,QAAAA,EAAe,IAA/CF,GAAIgB,GAAQD,EAAKE,EAAUH,EAAAC,EAA7B,CAAA,OACAG,EAAwCT,QAAAA,EAAkB,IAAxDT,GAAImB,GAAWD,EAAKE,EAAaN,EAAAI,EAAnC,CAAA,OACAG,EAA0CX,QAAAA,EAAmB,IAA3DV,GAAIsB,GAAYD,EAAKE,EAAcT,EAAAO,EAArC,CAAA,OACAG,EAA0CjB,QAAAA,EAAmB,IAA3DP,GAAIyB,GAAYD,EAAKE,EAAcZ,EAAAU,EAArC,CAAA,OAUN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CACFhC,IAAKA,EACLE,GAAE6B,OAAAC,OAAA,CACAC,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WApBgBC,EAoBQ/B,EAnBD,iBAAhB+B,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,QAgBH3C,GAAE,cAEK,sBACRa,EAAI,CAAAd,SAAA,CAER4B,EAACC,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBACb9B,IAEDC,EAAU,CAAAlB,SAAA,CAEdgD,EAACC,EAAUnB,OAAAC,OAAA,CAACmB,QAAQ,KAAKC,UAAU,OAAM,cAAa,4BAA+B/C,EAAU,CAAAJ,SAC5FE,KAEFK,GACCyC,EAACI,EAAUtB,OAAAC,OAAA,CAAA,aACE,6BACXsB,QAAS9C,EACT+C,KAAK,SACLC,UAAU,6BACVtD,GAAE6B,OAAAC,OAAA,CACAe,QAAS,OACNpB,GAAY,cAEL,8BACRC,EAAc,CAAA3B,SAElBgD,EAACQ,EAAS1B,OAAAC,OAAA,CAAC0B,SAAS,SAASF,UAAU,WAAc9C,WAK1DH,GACC0C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YACbxB,IAEDC,EAAc,CAAAxB,SAElBgD,EAACU,EAAM5B,OAAAC,OAAA,CACLsB,QAAS/C,EACTgD,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,8BACRtC,YAEHP,QAIP2C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACA4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAEZzC,GAAW,cAEJ,8BACRC,YAEHrB,SA3Fc,IAAC4C"}
+{"version":3,"file":"NotificationCenter.js","sources":["../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          width: { xs: '100%', sm: '360px', md: '440px' },\n          borderRadius: { xs: '0px', sm: '8px' },\n          backgroundColor: 'background.primary',\n          color: 'text.primary',\n          boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n          overflow: 'hidden',\n          maxHeight: formatHeight(height),\n          ...sx,\n        }}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={{\n            padding: '16px 8px 16px 16px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            ...headerSx,\n          }}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={{\n                padding: '4px',\n                ...iconButtonSx,\n              }}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={{\n              padding: '0 8px 4px 16px',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              ...dismissBoxSx,\n            }}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={{\n            overflowY: 'auto',\n            // add divider between notifications\n            '& [data-testid=\"Notification\"]:not(:last-child)': {\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            ...containerSx,\n          }}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","ref","headerSx","restHeader","containerSx","restContainer","dismissBoxSx","restDismissBox","iconButtonSx","restIconButton","_jsxs","Box","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"mOAiEaA,EAAkDC,EAC7D,EAEIC,WACAC,KACAC,QAAQ,gBACRC,cACAC,aACAC,iBAAiB,cACjBC,eACAC,UACAC,kBACAC,YACAC,iBACAC,kBACAC,qBACAC,SAAS,OACNC,GAELC,KAEA,MAAQd,GAAIe,KAAaC,GAAed,GAAe,CAAA,GAC/CF,GAAIiB,KAAgBC,GAAkBT,GAAkB,CAAA,GACxDT,GAAImB,KAAiBC,GAAmBV,GAAmB,CAAA,GAC3DV,GAAIqB,KAAiBC,GAAmBf,GAAmB,CAAA,EAUnE,OACEgB,EAACC,EAAG,CACFV,IAAKA,EACLd,GAAI,CACFyB,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WApBgBC,EAoBQzB,EAnBD,iBAAhByB,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,UAgBHrC,GACJ,cACW,wBACRa,EAAId,SAAA,CAERwB,EAACC,EAAG,CACFxB,GAAI,CACFuC,QAAS,qBACTd,QAAS,OACTe,eAAgB,mBACbzB,MAEDC,EAAUjB,SAAA,CAEd0C,EAACC,EAAU,CAACC,QAAQ,KAAKC,UAAU,OAAM,cAAa,8BAA+BzC,EAAUJ,SAC5FE,IAEFK,GACCmC,EAACI,gBACY,6BACXC,QAASxC,EACTyC,KAAK,SACLC,UAAU,6BACVhD,GAAI,CACFuC,QAAS,SACNlB,GACJ,cACW,gCACRC,EAAcvB,SAElB0C,EAACQ,EAAS,CAACC,SAAS,SAASF,UAAU,aAAcxC,SAK1DH,GACCoC,EAACjB,EAAG,CACFxB,GAAI,CACFuC,QAAS,iBACTd,QAAS,OACTe,eAAgB,cACbrB,MAEDC,EAAcrB,SAElB0C,EAACU,GACCL,QAASzC,EACT0C,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,gCACRhC,EAAkBZ,SAErBK,MAIPqC,EAACjB,EAAG,CACFxB,GAAI,CACFoD,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,wBAEZrC,GACJ,cACW,gCACRC,EAAanB,SAEhBA,OA3Fc,IAACsC"}

package/components/notification/NotificationCenterCategory.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as o,Typography as a}from"@mui/material";const n=i((i,n)=>{var{title:s,headerProps:c,titleProps:l,containerProps:d,children:p}=i,m=t(i,["title","headerProps","titleProps","containerProps","children"]);const b=null!=l?l:{},{sx:f}=b,g=t(b,["sx"]);return r(o,Object.assign({"data-testid":"NotificationCenterCategory"},m,{ref:n,children:[e(a,Object.assign({variant:"caption2",sx:Object.assign({pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary"},f),"data-testid":"NotificationCenterCategory.title"},g,{children:s})),e(o,Object.assign({"data-testid":"NotificationCenterCategory.content"},d,{children:p}))]}))});export{n as NotificationCenterCategory};
+import{jsxs as t,jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as o,Typography as i}from"@mui/material";const a=e(({title:e,headerProps:a,titleProps:n,containerProps:c,children:d,...s},l)=>{const{sx:p,...m}=n??{};return t(o,{"data-testid":"NotificationCenterCategory",...s,ref:l,children:[r(i,{variant:"caption2",sx:{pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary",...p},"data-testid":"NotificationCenterCategory.title",...m,children:e}),r(o,{"data-testid":"NotificationCenterCategory.content",...c,children:d})]})});export{a as NotificationCenterCategory};
 //# sourceMappingURL=NotificationCenterCategory.js.map

package/components/notification/NotificationCenterCategory.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={{\n            pl: 1,\n            pt: 2,\n            pb: 1,\n            display: 'block',\n            borderBottom: 1,\n            borderColor: 'surface.secondary',\n            ...titleSx,\n          }}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","_a","ref","title","headerProps","titleProps","containerProps","children","rest","__rest","_b","sx","titleSx","restTitle","_jsxs","Box","Object","assign","_jsx","Typography","variant","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"wKAyBO,MAAMA,EAAkEC,EAC7E,CAACC,EAAuEC,KAAvE,IAAAC,MAAEA,EAAKC,YAAEA,EAAWC,WAAEA,EAAUC,eAAEA,EAAcC,SAAEA,GAAQN,EAAKO,EAAIC,EAAAR,EAAnE,kEACC,MAAMS,EAAgCL,QAAAA,EAAc,IAA5CM,GAAIC,GAAOF,EAAKG,EAASJ,EAAAC,EAA3B,CAAA,OAEN,OACEI,EAACC,EAAGC,OAAAC,OAAA,CAAA,cAAa,8BAAiCT,EAAI,CAAEN,IAAKA,EAAGK,SAAA,CAC9DW,EAACC,EAAUH,OAAAC,OAAA,CACTG,QAAQ,WACRT,GAAEK,OAAAC,OAAA,CACAI,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,qBACVd,iBAEO,oCACRC,EAAS,CAAAN,SAEZJ,KAEHe,EAACH,EAAGC,OAAAC,OAAA,CAAA,cAAa,sCAAyCX,EAAc,CAAAC,SACrEA"}
+{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={{\n            pl: 1,\n            pt: 2,\n            pb: 1,\n            display: 'block',\n            borderBottom: 1,\n            borderColor: 'surface.secondary',\n            ...titleSx,\n          }}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","title","headerProps","titleProps","containerProps","children","rest","ref","sx","titleSx","restTitle","_jsxs","Box","_jsx","Typography","variant","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"yIAyBO,MAAMA,EAAkEC,EAC7E,EAAGC,QAAOC,cAAaC,aAAYC,iBAAgBC,cAAaC,GAAQC,KACtE,MAAQC,GAAIC,KAAYC,GAAcP,GAAc,CAAA,EAEpD,OACEQ,EAACC,EAAG,CAAA,cAAa,gCAAiCN,EAAMC,IAAKA,EAAGF,SAAA,CAC9DQ,EAACC,EAAU,CACTC,QAAQ,WACRP,GAAI,CACFQ,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,uBACVZ,GACJ,cACW,sCACRC,WAEHT,IAEHY,EAACD,EAAG,CAAA,cAAa,wCAAyCR,EAAcC,SACrEA"}

package/components/notification/NotificationCenterHeaderButton.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{forwardRef as n,useState as i}from"react";import{HeaderButton as s}from"../header/HeaderButton.js";import{BellIcon as a}from"../icon/stroke/BellIcon.js";import{Popper as p,ClickAwayListener as l,Fade as c}from"@mui/material";import{NotificationCenter as d}from"./NotificationCenter.js";const m=n((n,m)=>{var{popperProps:f,clickAwayListenerProps:b,fadeProps:P,label:u="Notifications",extend:g,tooltipProps:j,badgeProps:x,headerButtonProps:h,icon:O,onClick:k}=n,B=o(n,["popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick"]);const[C,w]=i(null),y=null!=f?f:{},{sx:A}=y,I=o(y,["sx"]);return e(t,{children:[r(s,Object.assign({label:u,extend:null!=g&&g,tooltipProps:Object.assign(Object.assign({},C&&{open:!1}),j),badgeProps:x,onClick:o=>{null==k||k(o),w(o.currentTarget)},ref:m,"data-testid":"NotificationCenterHeaderButton"},h,{children:O||r(a,{})})),r(p,Object.assign({open:!!C,anchorEl:C,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,18]}}],transition:!0,sx:Object.assign({zIndex:o=>o.zIndex.appBar+10},A)},I,{children:({TransitionProps:o})=>r(l,Object.assign({onClickAway:()=>w(null)},b,{children:r(c,Object.assign({},o,P,{children:r(d,Object.assign({},B,{ref:void 0}))}))}))}))]})});export{m as NotificationCenterHeaderButton};
+import{jsxs as o,Fragment as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as n}from"react";import{HeaderButton as i}from"../header/HeaderButton.js";import{BellIcon as a}from"../icon/stroke/BellIcon.js";import{Popper as p,ClickAwayListener as s,Fade as l}from"@mui/material";import{NotificationCenter as c}from"./NotificationCenter.js";const d=t(({popperProps:t,clickAwayListenerProps:d,fadeProps:m,label:f="Notifications",extend:u,tooltipProps:P,badgeProps:h,headerButtonProps:x,icon:b,onClick:k,...B},C)=>{const[j,g]=n(null),{sx:I,...N}=t??{};return o(e,{children:[r(i,{label:f,extend:u??!1,tooltipProps:{...j&&{open:!1},...P},badgeProps:h,onClick:o=>{k?.(o),g(o.currentTarget)},ref:C,"data-testid":"NotificationCenterHeaderButton",...x,children:b||r(a,{})}),r(p,{open:!!j,anchorEl:j,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,18]}}],transition:!0,sx:{zIndex:o=>o.zIndex.appBar+10,...I},...N,children:({TransitionProps:o})=>r(s,{onClickAway:()=>g(null),...d,children:r(l,{...o,...m,children:r(c,{...B,ref:void 0})})})})]})});export{d as NotificationCenterHeaderButton};
 //# sourceMappingURL=NotificationCenterHeaderButton.js.map

package/components/notification/NotificationCenterHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","Object","assign","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"oYAiDO,MAAMA,EAA0EC,EACrF,CACEC,EAaAC,SAbAC,YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,kBACVA,EAAiBC,KACjBA,EAAIC,QACJA,GAAOX,EACJY,EAAIC,EAAAb,EAXT,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,oBAAA,OAAA,YAeA,MAAOc,EAAQC,GAAaC,EAAS,MAC/BC,EAAkCf,QAAAA,EAAe,IAA/CgB,GAAIC,GAAQF,EAAKG,EAAUP,EAAAI,EAA7B,CAAA,OAEN,OACEI,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,EAAYC,OAAAC,OAAA,CACXtB,MAAOA,EACPC,OAAQA,SAAAA,EACRC,aAAYmB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACNb,GAAU,CAAEc,MAAM,IACnBrB,GAELC,WAAYA,EACZG,QAAUkB,IACRlB,SAAAA,EAAUkB,GACVd,EAAUc,EAAEC,gBAEd7B,IAAKA,gBACO,kCACRQ,EAAiB,CAAAc,SAEpBb,GAAQc,EAACO,EAAQ,CAAA,MAEpBP,EAACQ,EAAMN,OAAAC,OAAA,CACLC,OAAQd,EACRmB,SAAUnB,EACVoB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVrB,GAAEQ,OAAAC,OAAA,CACAa,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtCvB,IAEDC,YAEH,EAAGuB,qBACFnB,EAACoB,EAAiBlB,OAAAC,OAAA,CAACkB,YAAa,IAAM9B,EAAU,OAAWZ,EAAsB,CAAAoB,SAC/EC,EAACsB,EAAIpB,OAAAC,OAAA,CAAA,EAAKgB,EAAqBvC,EAAS,CAAAmB,SACtCC,EAACuB,EAAkBrB,OAAAC,OAAA,CAAA,EAAKf,EAAI,CAAEX,SAAK+C"}
+{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","ref","anchor","setAnchor","useState","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"qWAiDO,MAAMA,EAA0EC,EACrF,EAEIC,cACAC,yBACAC,YACAC,QAAQ,gBACRC,SACAC,eACAC,aACAC,oBACAC,OACAC,aACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAS,OAC7BC,GAAIC,KAAaC,GAAejB,GAAe,CAAA,EAEvD,OACEkB,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,EAAY,CACXnB,MAAOA,EACPC,OAAQA,IAAU,EAClBC,aAAc,IACRO,GAAU,CAAEW,MAAM,MACnBlB,GAELC,WAAYA,EACZG,QAAUe,IACRf,IAAUe,GACVX,EAAUW,EAAEC,gBAEdd,IAAKA,gBACO,oCACRJ,EAAiBa,SAEpBZ,GAAQa,EAACK,EAAQ,CAAA,KAEpBL,EAACM,EAAM,CACLJ,OAAQX,EACRgB,SAAUhB,EACViB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVnB,GAAI,CACFoB,OAASC,GAAUA,EAAMD,OAAOE,OAAS,MACtCrB,MAEDC,WAEH,EAAGqB,qBACFjB,EAACkB,EAAiB,CAACC,YAAa,IAAM3B,EAAU,SAAWZ,EAAsBmB,SAC/EC,EAACoB,EAAI,IAAKH,KAAqBpC,EAASkB,SACtCC,EAACqB,EAAkB,IAAKhC,EAAMC,SAAKgC"}

package/components/overlay/Overlay.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsxs as a,jsx as e}from"react/jsx-runtime";import{Box as t}from"@mui/material";const i=i=>{var{wrapperProps:n,sx:s,overlayContent:o,variant:g,children:d}=i,l=r(i,["wrapperProps","sx","overlayContent","variant","children"]);const b=n||{},{sx:p}=b,c=r(b,["sx"]);return a(t,Object.assign({"data-testid":"Overlay-wrapper",sx:Object.assign({position:"relative",maxWidth:"100%",maxHeight:"100%"},p)},c,{children:[o,e(t,Object.assign({"data-testid":"Overlay-overlay",sx:Object.assign({position:"absolute",inset:"0",zIndex:"100",background:"hero"===g?"linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)":"linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"},s)},l,{children:d}))]}))};export{i as Overlay};
+import{jsxs as r,jsx as a}from"react/jsx-runtime";import{Box as e}from"@mui/material";const t=({wrapperProps:t,sx:i,overlayContent:n,variant:o,children:d,...g})=>{const{sx:s,...l}=t||{};return r(e,{"data-testid":"Overlay-wrapper",sx:{position:"relative",maxWidth:"100%",maxHeight:"100%",...s},...l,children:[n,a(e,{"data-testid":"Overlay-overlay",sx:{position:"absolute",inset:"0",zIndex:"100",background:"hero"===o?"linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)":"linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))",...i},...g,children:d})]})};export{t as Overlay};
 //# sourceMappingURL=Overlay.js.map

package/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={{ position: 'relative', maxWidth: '100%', maxHeight: '100%', ...wrapperSx }}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={{\n          position: 'absolute',\n          inset: '0',\n          zIndex: '100',\n          background:\n            variant === 'hero'\n              ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n              : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Overlay","_a","wrapperProps","sx","overlayContent","variant","children","rest","__rest","_b","wrapperSx","restWrapper","_jsxs","Box","Object","assign","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"qHAkBO,MAAMA,EAAmCC,IAAA,IAAAC,aAAEA,EAAYC,GAAEA,EAAEC,eAAEA,EAAcC,QAAEA,EAAOC,SAAEA,GAAQL,EAAKM,EAAIC,EAAAP,EAA9D,6DAC9C,MAAMQ,EAAoCP,GAAgB,IAAlDC,GAAIO,KAAcC,EAAWH,EAAAC,EAA/B,CAAA,OAEN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CAAIC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAWR,IAChEC,EAAW,CAAAL,SAAA,CAEdF,EACDe,EAACN,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CACAC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZjB,EACI,8KACA,6DACHF,IAEDI,EAAI,CAAAD,SAEPA"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={{ position: 'relative', maxWidth: '100%', maxHeight: '100%', ...wrapperSx }}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={{\n          position: 'absolute',\n          inset: '0',\n          zIndex: '100',\n          background:\n            variant === 'hero'\n              ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n              : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Overlay","wrapperProps","sx","overlayContent","variant","children","rest","wrapperSx","restWrapper","_jsxs","Box","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"4FAkBaA,EAAkC,EAAGC,eAAcC,KAAIC,iBAAgBC,UAASC,cAAaC,MACxG,MAAQJ,GAAIK,KAAcC,GAAgBP,GAAgB,CAAA,EAE1D,OACEQ,EAACC,EAAG,CAAA,cACU,kBACZR,GAAI,CAAES,SAAU,WAAYC,SAAU,OAAQC,UAAW,UAAWN,MAChEC,EAAWH,SAAA,CAEdF,EACDW,EAACJ,EAAG,CAAA,cACU,kBACZR,GAAI,CACFS,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZb,EACI,8KACA,+DACHF,MAEDI,EAAID,SAEPA"}

package/components/pageLayout/PageLayout.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useState as i,useCallback as o}from"react";import{useTheme as s,useScrollTrigger as n,Box as d,Slide as c,Container as h}from"@mui/material";const p=a((a,p)=>{var{children:l,sx:m,header:g,footer:x,headerPosition:f="static",headerSlideThreshold:b=250,wrapContent:P=!1,headerProps:j,headerContainerProps:u,headerWrapperProps:O,contentProps:w,footerProps:y}=a,C=e(a,["children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps"]);const v=s(),L=null!=O?O:{},{sx:N}=L,W=e(L,["sx"]),z=null!=u?u:{},{sx:B,className:H}=z,S=e(z,["sx","className"]),[T,I]=i(Number.parseFloat(String(v.mixins.toolbar.minHeight))),R=o(e=>{"static"!==f&&e&&new ResizeObserver(()=>{I(e.offsetHeight)}).observe(e)},["static"!==f]),k=n({target:window,threshold:b});return t(d,Object.assign({sx:Object.assign({position:"relative",minHeight:"100vh",backgroundColor:"surface.primary",display:"grid",gridTemplateRows:[g&&"max-content","auto",x&&"max-content"].filter(Boolean).join(" ")},m),"data-testid":"PageLayout",ref:p},C,{children:[g&&r(d,Object.assign({sx:Object.assign(Object.assign({},"static"!==f&&T&&{height:T}),N),"data-testid":"PageLayout.headerWrapper"},W,{children:r(d,Object.assign({},"slide"===f&&{component:c,appear:!1,direction:"down",in:!k},{sx:Object.assign(Object.assign({},"static"!==f&&{position:"fixed",top:"0",left:"0",right:"0",zIndex:v.zIndex.appBar}),B),className:["static"!==f?"mui-fixed":"",H].filter(Boolean).join(" ")},S,{children:r(d,Object.assign({ref:R,"data-testid":"PageLayout.header"},j,{children:g}))}))})),r(d,Object.assign({},P&&{component:h,maxWidth:"xl"},{"data-testid":"Container"},w,{children:l})),x&&r(d,Object.assign({"data-testid":"PageLayout.footer"},y,{children:x}))]}))});export{p as PageLayout};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as a,useCallback as i}from"react";import{useTheme as o,useScrollTrigger as n,Box as s,Slide as d,Container as c}from"@mui/material";const h=r(({children:r,sx:h,header:p,footer:l,headerPosition:m="static",headerSlideThreshold:x=250,wrapContent:f=!1,headerProps:g,headerContainerProps:u,headerWrapperProps:P,contentProps:w,footerProps:y,...b},v)=>{const C=o(),{sx:L,...j}=P??{},{sx:z,className:B,...H}=u??{},[N,W]=a(Number.parseFloat(String(C.mixins.toolbar.minHeight))),I=i(e=>{"static"!==m&&e&&new ResizeObserver(()=>{W(e.offsetHeight)}).observe(e)},["static"!==m]),R=n({target:window,threshold:x});return e(s,{sx:{position:"relative",minHeight:"100vh",backgroundColor:"surface.primary",display:"grid",gridTemplateRows:[p&&"max-content","auto",l&&"max-content"].filter(Boolean).join(" "),...h},"data-testid":"PageLayout",ref:v,...b,children:[p&&t(s,{sx:{..."static"!==m&&N&&{height:N},...L},"data-testid":"PageLayout.headerWrapper",...j,children:t(s,{..."slide"===m&&{component:d,appear:!1,direction:"down",in:!R},sx:{..."static"!==m&&{position:"fixed",top:"0",left:"0",right:"0",zIndex:C.zIndex.appBar},...z},className:["static"!==m?"mui-fixed":"",B].filter(Boolean).join(" "),...H,children:t(s,{ref:I,"data-testid":"PageLayout.header",...g,children:p})})}),t(s,{...f&&{component:c,maxWidth:"xl"},"data-testid":"Container",...w,children:r}),l&&t(s,{"data-testid":"PageLayout.footer",...y,children:l})]})});export{h as PageLayout};
 //# sourceMappingURL=PageLayout.js.map

package/components/pageLayout/PageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","sources":["../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","_a","ref","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","__rest","theme","useTheme","_b","headerWrapperSx","restHeaderWrapper","_c","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","Object","assign","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"qPAoDO,MAAMA,EAAwCC,EACnD,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,OACFA,EAAMC,OACNA,EAAMC,eACNA,EAAiB,SAAQC,qBACzBA,EAAuB,IAAGC,YAC1BA,GAAc,EAAKC,YACnBA,EAAWC,qBACXA,EAAoBC,mBACpBA,EAAkBC,aAClBA,EAAYC,YACZA,GAAWb,EACRc,EAAIC,EAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,IACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAeD,EAAKE,EAAiBL,EAAAG,EAA3C,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAM,EAHlB,CAAA,KAAA,eAMCK,EAAcC,GAAmBC,EAAiBC,OAAOC,WAAWC,OAAOf,EAAMgB,OAAOC,QAAQC,aACjGC,EAAqBC,EACxBC,IACwB,WAAnB/B,GAAgC+B,GAGpC,IAAIC,eAAe,KACjBX,EAAgBU,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB/B,IAGGmC,EAAeC,EAAiB,CACpCC,OAAQC,OACRC,UAAWtC,IAGb,OACEuC,EAACC,iBACC5C,GAAE6C,OAAAC,OAAA,CACAC,SAAU,WACVhB,UAAW,QACXiB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAACjD,GAAU,cAAe,OAAQC,GAAU,eAAeiD,OAAOC,SAASC,KAAK,MAC/FrD,GAAE,cAEK,aACZF,IAAKA,GACDa,EAAI,CAAAZ,SAAA,CAEPE,GACCqD,EAACV,EAAGC,OAAAC,OAAA,CACF9C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAEgC,OAAQhC,IAC1DP,GAAe,cAER,4BACRC,EAAiB,CAAAlB,SAErBuD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB3C,GAA8B,CACjCqD,UAAWC,EACXC,QAAQ,EACRC,UAAW,OACXC,IAAKtB,IAEPtC,GAAE6C,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACuB,WAAnB3C,GAA+B,CACjC4C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQnD,EAAMmD,OAAOC,SAEpB9C,GAELC,UAAW,CAAoB,WAAnBjB,EAA8B,YAAc,GAAIkB,GACzD8B,OAAOC,SACPC,KAAK,MACJ/B,EAAmB,CAAAvB,SAEvBuD,EAACV,EAAGC,OAAAC,OAAA,CAAChD,IAAKkC,EAAkB,cAAc,qBAAwB1B,EAAW,CAAAP,SAC1EE,WAKTqD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EAAMzC,GAAe,CAAEmD,UAAWU,EAAWC,SAAU,MAAO,CAAA,cAAc,aAAgB1D,EAAY,CAAAV,SACzGA,KAEFG,GACCoD,EAACV,EAAGC,OAAAC,OAAA,CAAA,cAAa,qBAAwBpC,EAAW,CAAAX,SACjDG"}
+{"version":3,"file":"PageLayout.js","sources":["../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","ref","theme","useTheme","headerWrapperSx","restHeaderWrapper","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"4NAoDaA,EAAwCC,EACnD,EAEIC,WACAC,KACAC,SACAC,SACAC,iBAAiB,SACjBC,uBAAuB,IACvBC,eAAc,EACdC,cACAC,uBACAC,qBACAC,eACAC,iBACGC,GAELC,KAEA,MAAMC,EAAQC,KACNd,GAAIe,KAAoBC,GAAsBR,GAAsB,CAAA,GAE1ER,GAAIiB,EACJC,UAAWC,KACRC,GACDb,GAAwB,CAAA,GAErBc,EAAcC,GAAmBC,EAAiBC,OAAOC,WAAWC,OAAOb,EAAMc,OAAOC,QAAQC,aACjGC,EAAqBC,EACxBC,IACwB,WAAnB7B,GAAgC6B,GAGpC,IAAIC,eAAe,KACjBX,EAAgBU,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB7B,IAGGiC,EAAeC,EAAiB,CACpCC,OAAQC,OACRC,UAAWpC,IAGb,OACEqC,EAACC,EAAG,CACF1C,GAAI,CACF2C,SAAU,WACVd,UAAW,QACXe,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAC7C,GAAU,cAAe,OAAQC,GAAU,eAAe6C,OAAOC,SAASC,KAAK,QAC/FjD,GACJ,cACW,aACZY,IAAKA,KACDD,EAAIZ,SAAA,CAEPE,GACCiD,EAACR,EAAG,CACF1C,GAAI,IACqB,WAAnBG,GAA+BkB,GAAgB,CAAE8B,OAAQ9B,MAC1DN,GACJ,cACW,8BACRC,EAAiBjB,SAErBmD,EAACR,EAAG,IACsB,UAAnBvC,GAA8B,CACjCiD,UAAWC,EACXC,QAAQ,EACRC,UAAW,OACXC,IAAKpB,GAEPpC,GAAI,IACqB,WAAnBG,GAA+B,CACjCwC,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQ/C,EAAM+C,OAAOC,WAEpB5C,GAELC,UAAW,CAAoB,WAAnBf,EAA8B,YAAc,GAAIgB,GACzD4B,OAAOC,SACPC,KAAK,QACJ7B,EAAmBrB,SAEvBmD,EAACR,EAAG,CAAC9B,IAAKkB,EAAkB,cAAc,uBAAwBxB,EAAWP,SAC1EE,QAKTiD,EAACR,EAAG,IAAMrC,GAAe,CAAE+C,UAAWU,EAAWC,SAAU,MAAO,cAAc,eAAgBtD,EAAYV,SACzGA,IAEFG,GACCgD,EAACR,EAAG,CAAA,cAAa,uBAAwBhC,EAAWX,SACjDG"}

package/components/passwordField/PasswordField.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsx as t}from"react/jsx-runtime";import{forwardRef as i,useState as s}from"react";import{TextField as r,InputAdornment as e,IconButton as n}from"@mui/material";import{HideIcon as l}from"../icon/stroke/HideIcon.js";import{ShowIcon as p}from"../icon/stroke/ShowIcon.js";const c=i((i,c)=>{var{slotProps:m,iconButtonProps:a,visible:b,setVisible:u}=i,d=o(i,["slotProps","iconButtonProps","visible","setVisible"]);const f=m||{},{input:j}=f,g=o(f,["input"]),[P,v]=s(!1),w=null!=b?b:P,O=null!=u?u:v;return t(r,Object.assign({ref:c,type:w?"text":"password",autoComplete:"new-password",slotProps:Object.assign({input:Object.assign({endAdornment:t(e,{position:"end",children:t(n,Object.assign({onClick:()=>O(!w),"aria-label":"Toggle visibility"},a,{children:t(w?l:p,{})}))})},j)},g)},d))});export{c as PasswordField};
+import{jsx as o}from"react/jsx-runtime";import{forwardRef as t,useState as r}from"react";import{TextField as i,InputAdornment as e,IconButton as n}from"@mui/material";import{HideIcon as s}from"../icon/stroke/HideIcon.js";import{ShowIcon as p}from"../icon/stroke/ShowIcon.js";const m=t(({slotProps:t,iconButtonProps:m,visible:l,setVisible:c,...a},d)=>{const{input:u,...f}=t||{},[b,w]=r(!1),h=l??b,j=c??w;return o(i,{ref:d,type:h?"text":"password",autoComplete:"new-password",slotProps:{input:{endAdornment:o(e,{position:"end",children:o(n,{onClick:()=>j(!h),"aria-label":"Toggle visibility",...m,children:o(h?s:p,{})})}),...u},...f},...a})});export{m as PasswordField};
 //# sourceMappingURL=PasswordField.js.map

package/components/passwordField/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sources":["../../../src/components/passwordField/PasswordField.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { IconButton, InputAdornment, TextField, TextFieldProps, IconButtonProps } from '@mui/material';\nimport { HideIcon } from '@/src/components/icon/stroke/HideIcon';\nimport { ShowIcon } from '@/src/components/icon/stroke/ShowIcon';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type'> {\n  /**\n   * Tell browser how it should behave to password field\n   * @default new-password\n   */\n  autoComplete?: 'new-password' | 'current-password' | string;\n  /**\n   * Properties provided to button toggling visibility. Can be used to change aria-label.\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Optional flag if password is visible\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Optional function to toggle visibility\n   */\n  setVisible?: (visible: boolean) => void;\n}\n\n/**\n * TextField adding extra logic to toggle into the password field via show/hide IconButton\n */\nexport const PasswordField: React.FC<PasswordFieldProps> = forwardRef(\n  ({ slotProps, iconButtonProps, visible: propsVisible, setVisible: setPropsVisible, ...rest }, ref) => {\n    const { input: inputSlotProps, ...restSlotProps } = slotProps || {};\n    const [rawVisible, setRawVisible] = useState<boolean>(false);\n    const visible = propsVisible ?? rawVisible;\n    const setVisible = setPropsVisible ?? setRawVisible;\n\n    return (\n      <TextField\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        autoComplete=\"new-password\"\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\">\n                <IconButton onClick={() => setVisible(!visible)} aria-label=\"Toggle visibility\" {...iconButtonProps}>\n                  {visible ? <HideIcon /> : <ShowIcon />}\n                </IconButton>\n              </InputAdornment>\n            ),\n            ...inputSlotProps,\n          },\n          ...restSlotProps,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","_a","ref","slotProps","iconButtonProps","visible","propsVisible","setVisible","setPropsVisible","rest","__rest","_b","input","inputSlotProps","restSlotProps","rawVisible","setRawVisible","useState","_jsx","TextField","Object","assign","type","autoComplete","endAdornment","InputAdornment","position","IconButton","onClick","HideIcon","ShowIcon"],"mappings":"kTA6BO,MAAMA,EAA8CC,EACzD,CAACC,EAA6FC,KAA7F,IAAAC,UAAEA,EAASC,gBAAEA,EAAiBC,QAASC,EAAcC,WAAYC,GAAeP,EAAKQ,EAAIC,EAAAT,EAAzF,wDACC,MAAMU,EAA8CR,GAAa,IAAzDS,MAAOC,KAAmBC,EAAaJ,EAAAC,EAAzC,CAAA,WACCI,EAAYC,GAAiBC,GAAkB,GAChDZ,EAAUC,QAAAA,EAAgBS,EAC1BR,EAAaC,QAAAA,EAAmBQ,EAEtC,OACEE,EAACC,EAASC,OAAAC,OAAA,CACRnB,IAAKA,EACLoB,KAAMjB,EAAU,OAAS,WACzBkB,aAAa,eACbpB,UAASiB,OAAAC,OAAA,CACPT,MAAKQ,OAAAC,OAAA,CACHG,aACEN,EAACO,EAAc,CAACC,SAAS,eACvBR,EAACS,EAAUP,OAAAC,OAAA,CAACO,QAAS,IAAMrB,GAAYF,GAAQ,aAAa,qBAAwBD,YACvEc,EAAVb,EAAWwB,EAAeC,EAAP,CAAA,SAIvBjB,IAEFC,IAEDL"}
+{"version":3,"file":"PasswordField.js","sources":["../../../src/components/passwordField/PasswordField.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { IconButton, InputAdornment, TextField, TextFieldProps, IconButtonProps } from '@mui/material';\nimport { HideIcon } from '@/src/components/icon/stroke/HideIcon';\nimport { ShowIcon } from '@/src/components/icon/stroke/ShowIcon';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type'> {\n  /**\n   * Tell browser how it should behave to password field\n   * @default new-password\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n  autoComplete?: 'new-password' | 'current-password' | string;\n  /**\n   * Properties provided to button toggling visibility. Can be used to change aria-label.\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Optional flag if password is visible\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Optional function to toggle visibility\n   */\n  setVisible?: (visible: boolean) => void;\n}\n\n/**\n * TextField adding extra logic to toggle into the password field via show/hide IconButton\n */\nexport const PasswordField: React.FC<PasswordFieldProps> = forwardRef(\n  ({ slotProps, iconButtonProps, visible: propsVisible, setVisible: setPropsVisible, ...rest }, ref) => {\n    const { input: inputSlotProps, ...restSlotProps } = slotProps || {};\n    const [rawVisible, setRawVisible] = useState<boolean>(false);\n    const visible = propsVisible ?? rawVisible;\n    const setVisible = setPropsVisible ?? setRawVisible;\n\n    return (\n      <TextField\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        autoComplete=\"new-password\"\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\">\n                <IconButton onClick={() => setVisible(!visible)} aria-label=\"Toggle visibility\" {...iconButtonProps}>\n                  {visible ? <HideIcon /> : <ShowIcon />}\n                </IconButton>\n              </InputAdornment>\n            ),\n            ...inputSlotProps,\n          },\n          ...restSlotProps,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","slotProps","iconButtonProps","visible","propsVisible","setVisible","setPropsVisible","rest","ref","input","inputSlotProps","restSlotProps","rawVisible","setRawVisible","useState","_jsx","TextField","type","autoComplete","endAdornment","InputAdornment","position","children","IconButton","onClick","HideIcon","ShowIcon"],"mappings":"mRA8BO,MAAMA,EAA8CC,EACzD,EAAGC,YAAWC,kBAAiBC,QAASC,EAAcC,WAAYC,KAAoBC,GAAQC,KAC5F,MAAQC,MAAOC,KAAmBC,GAAkBV,GAAa,CAAA,GAC1DW,EAAYC,GAAiBC,GAAkB,GAChDX,EAAUC,GAAgBQ,EAC1BP,EAAaC,GAAmBO,EAEtC,OACEE,EAACC,EAAS,CACRR,IAAKA,EACLS,KAAMd,EAAU,OAAS,WACzBe,aAAa,eACbjB,UAAW,CACTQ,MAAO,CACLU,aACEJ,EAACK,EAAc,CAACC,SAAS,MAAKC,SAC5BP,EAACQ,EAAU,CAACC,QAAS,IAAMnB,GAAYF,GAAQ,aAAa,uBAAwBD,WACvEa,EAAVZ,EAAWsB,EAAeC,EAAP,WAIvBhB,MAEFC,MAEDJ"}

package/components/playPauseButton/PlayPauseButton.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsxs as s,jsx as e}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as n,IconButton as i}from"@mui/material";import{Spinner as r}from"../progress/Spinner.js";import{ControlsPlayIcon as a}from"../icon/stroke/ControlsPlayIcon.js";import{ControlsPauseIcon as c}from"../icon/stroke/ControlsPauseIcon.js";const p=t((t,p)=>{var{progress:l=0,isPlaying:d,onClick:m,progressProps:P,iconButtonProps:I,pauseIconProps:u,PauseIconComponent:x,playIconProps:g,PlayIconComponent:y,children:b,sx:j}=t,h=o(t,["progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx"]);const f=P||{},{sx:k}=f,C=o(f,["sx"]),O=I||{},{sx:v}=O,w=o(O,["sx"]),z=x||c,B=y||a;return s(n,Object.assign({"data-testid":"PlayPauseIndicator",sx:Object.assign({display:"inline-flex",position:"relative",zIndex:"150",width:"44px",height:"44px"},j),ref:p},h,{children:[e(r,Object.assign({value:l,size:44,thickness:6,sx:Object.assign({position:"absolute",inset:"0",zIndex:"20",transform:"rotate(-90deg)","& .FlowSpinner-circle-primary":{stroke:o=>o.palette.brand.secondary},"& .FlowSpinner-circle-secondary":{stroke:o=>o.palette.common.white,strokeWidth:"4px"}},k)},C)),e(i,Object.assign({"data-testid":"IndicatorIconButton",onClick:m,color:"white",size:"medium",sx:Object.assign({position:"absolute",inset:"0",zIndex:"30"},v),"aria-label":d?"Pause video":"Play video"},w,{children:d?e(z,Object.assign({"data-testid":"IndicatorPauseIcon"},u)):e(B,Object.assign({"data-testid":"IndicatorPlayIcon"},g))}))]}))});export{p as PlayPauseButton};
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as r,IconButton as i}from"@mui/material";import{Spinner as n}from"../progress/Spinner.js";import{ControlsPlayIcon as s}from"../icon/stroke/ControlsPlayIcon.js";import{ControlsPauseIcon as a}from"../icon/stroke/ControlsPauseIcon.js";const c=t(({progress:t=0,isPlaying:c,onClick:l,progressProps:p,iconButtonProps:d,pauseIconProps:m,PauseIconComponent:I,playIconProps:u,PlayIconComponent:x,children:P,sx:y,...h},f)=>{const{sx:k,...g}=p||{},{sx:C,...w}=d||{},z=I||a,b=x||s;return o(r,{"data-testid":"PlayPauseIndicator",sx:{display:"inline-flex",position:"relative",zIndex:"150",width:"44px",height:"44px",...y},ref:f,...h,children:[e(n,{value:t,size:44,thickness:6,sx:{position:"absolute",inset:"0",zIndex:"20",transform:"rotate(-90deg)","& .FlowSpinner-circle-primary":{stroke:o=>o.palette.brand.secondary},"& .FlowSpinner-circle-secondary":{stroke:o=>o.palette.common.white,strokeWidth:"4px"},...k},...g}),e(i,{"data-testid":"IndicatorIconButton",onClick:l,color:"white",size:"medium",sx:{position:"absolute",inset:"0",zIndex:"30",...C},"aria-label":c?"Pause video":"Play video",...w,children:c?e(z,{"data-testid":"IndicatorPauseIcon",...m}):e(b,{"data-testid":"IndicatorPlayIcon",...u})})]})});export{c as PlayPauseButton};
 //# sourceMappingURL=PlayPauseButton.js.map

package/components/playPauseButton/PlayPauseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: BoxProps<ElementType>['onClick'];\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /**\n   * Properties applied to Spinner progress\n   */\n  progressProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Properties applied to IconButton\n   */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Properties applied to Pause Icon component\n   */\n  pauseIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PauseIcon\n   */\n  PauseIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to Play Icon component\n   */\n  playIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PlayIcon\n   */\n  PlayIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      progressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: progressSx, ...restProgress } = progressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          display: 'inline-flex',\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={{\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            // start from 12'clock instead of 3'\n            transform: 'rotate(-90deg)',\n            // recolor\n            '& .FlowSpinner-circle-primary': {\n              stroke: (theme) => theme.palette.brand.secondary,\n            },\n            '& .FlowSpinner-circle-secondary': {\n              stroke: (theme) => theme.palette.common.white,\n              // main line is thicker than second one\n              strokeWidth: '4px',\n            },\n            ...progressSx,\n          }}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n"],"names":["PlayPauseButton","forwardRef","_a","ref","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","__rest","_b","progressSx","restProgress","_c","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","Object","assign","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"],"mappings":"uWAiDO,MAAMA,EAAkDC,EAC7D,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,cACPA,EAAaC,gBACbA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAAEZ,EACCa,EAAIC,EAAAd,EAZT,CAAA,WAAA,YAAA,UAAA,gBAAA,kBAAA,iBAAA,qBAAA,gBAAA,oBAAA,WAAA,OAgBA,MAAMe,EAAsCV,GAAiB,IAArDO,GAAII,KAAeC,EAAYH,EAAAC,EAAjC,CAAA,OACAG,EAA0CZ,GAAmB,IAA3DM,GAAIO,KAAiBC,EAAcN,EAAAI,EAArC,CAAA,OACAG,EAAYb,GAAsBc,EAClCC,EAAWb,GAAqBc,EAEtC,OACEC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,qBACZhB,GAAEe,OAAAC,OAAA,CACAC,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLrB,GAELX,IAAKA,GACDY,EAAI,CAAAF,SAAA,CAERuB,EAACC,EAAOR,OAAAC,OAAA,CACNQ,MAAOlC,EACPmC,KAAM,GACNC,UAAW,EACX1B,GAAEe,OAAAC,OAAA,CACAE,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,QAEZhC,IAEDC,IAENiB,EAACe,EAAUtB,OAAAC,OAAA,CAAA,cACG,sBACZxB,QAASA,EACT8C,MAAM,QACNb,KAAK,SACLzB,GAAEe,OAAAC,OAAA,CAAIE,SAAU,WAAYS,MAAO,IAAKR,OAAQ,MAASZ,GAAY,aACzDhB,EAAY,cAAgB,cACpCiB,EAAc,CAAAT,SAEjBR,EACC+B,EAACb,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBrB,IAEhD2B,EAACX,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBnB"}
+{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: BoxProps<ElementType>['onClick'];\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /**\n   * Properties applied to Spinner progress\n   */\n  progressProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Properties applied to IconButton\n   */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Properties applied to Pause Icon component\n   */\n  pauseIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PauseIcon\n   */\n  PauseIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to Play Icon component\n   */\n  playIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PlayIcon\n   */\n  PlayIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      progressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: progressSx, ...restProgress } = progressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          display: 'inline-flex',\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={{\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            // start from 12'clock instead of 3'\n            transform: 'rotate(-90deg)',\n            // recolor\n            '& .FlowSpinner-circle-primary': {\n              stroke: (theme) => theme.palette.brand.secondary,\n            },\n            '& .FlowSpinner-circle-secondary': {\n              stroke: (theme) => theme.palette.common.white,\n              // main line is thicker than second one\n              strokeWidth: '4px',\n            },\n            ...progressSx,\n          }}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n"],"names":["PlayPauseButton","forwardRef","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","ref","progressSx","restProgress","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"],"mappings":"wUAiDO,MAAMA,EAAkDC,EAC7D,EAEIC,WAAW,EACXC,YACAC,UACAC,gBACAC,kBACAC,iBACAC,qBACAC,gBACAC,oBACAC,WACAC,QACGC,GAELC,KAEA,MAAQF,GAAIG,KAAeC,GAAiBX,GAAiB,CAAA,GACrDO,GAAIK,KAAiBC,GAAmBZ,GAAmB,CAAA,EAC7Da,EAAYX,GAAsBY,EAClCC,EAAWX,GAAqBY,EAEtC,OACEC,EAACC,iBACa,qBACZZ,GAAI,CACFa,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,UACLjB,GAELE,IAAKA,KACDD,EAAIF,SAAA,CAERmB,EAACC,EAAO,CACNC,MAAO9B,EACP+B,KAAM,GACNC,UAAW,EACXtB,GAAI,CACFc,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,UAEZ7B,MAEDC,IAENc,EAACe,iBACa,sBACZzC,QAASA,EACT0C,MAAM,QACNb,KAAK,SACLrB,GAAI,CAAEc,SAAU,WAAYS,MAAO,IAAKR,OAAQ,QAASV,GAAc,aAC3Dd,EAAY,cAAgB,gBACpCe,EAAcP,SAEjBR,EACC2B,EAACX,EAAS,CAAA,cAAa,wBAAyBZ,IAEhDuB,EAACT,EAAQ,CAAA,cAAa,uBAAwBZ"}

package/components/progress/Loader.js

@@ -1,2 +1,2 @@
-import{__rest as a}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as i,LinearProgress as o}from"@mui/material";import{LoadingText as s}from"./LoadingText.js";const l=t((t,l)=>{var{className:n,value:m,size:c,barProps:d,label:p,loadingTextProps:b}=t,u=a(t,["className","value","size","barProps","label","loadingTextProps"]);const v=null!=d?d:{},{sx:g}=v,x=a(v,["sx"]);return e(i,Object.assign({"data-testid":"Loader",className:["FlowLoader-root",n].filter(Boolean).join(" "),ref:l},u,{children:[void 0!==m&&r(s,Object.assign({"data-testid":"Loader.percentage",value:m,label:p},b)),r(o,Object.assign({value:m,sx:Object.assign(Object.assign({},"number"==typeof c&&{height:`${c}px`}),g)},"number"!=typeof c&&{size:c},void 0!==m&&{variant:"determinate","aria-valuenow":m,"aria-valuemin":0,"aria-valuemax":100},x))]}))});export{l as Loader};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as o,LinearProgress as t}from"@mui/material";import{LoadingText as i}from"./LoadingText.js";const l=r(({className:r,value:l,size:m,barProps:n,label:s,loadingTextProps:d,...p},u)=>{const{sx:v,...c}=n??{};return e(o,{"data-testid":"Loader",className:["FlowLoader-root",r].filter(Boolean).join(" "),ref:u,...p,children:[void 0!==l&&a(i,{"data-testid":"Loader.percentage",value:l,label:s,...d}),a(t,{value:l,sx:{..."number"==typeof m&&{height:`${m}px`},...v},..."number"!=typeof m&&{size:m},...void 0!==l&&{variant:"determinate","aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":100},...c})]})});export{l as Loader};
 //# sourceMappingURL=Loader.js.map