@skodaflow/web-library 7.16.1 → 8.0.0

package/cjs/utils/useDebounce/useDebounce.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.default=function(t,r,u={instantClear:!1}){const[n,s]=e.useState(t),a=e.useRef(null);return e.useEffect(()=>(!t&&u.instantClear?s(t):a.current=setTimeout(()=>{s(t)},r),()=>{a.current&&clearTimeout(a.current)}),[t,r,u.instantClear]),n};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.default=function(t,r,u){const[c,s]=e.useState(t),n=e.useRef(null);return e.useEffect(()=>(n.current=setTimeout(()=>{s(t)},r),()=>{n.current&&clearTimeout(n.current)}),[t,r,void 0]),c};
 //# sourceMappingURL=useDebounce.js.map

package/cjs/utils/useDebounce/useDebounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDebounce.js","sources":["../../../../../src/utils/useDebounce/useDebounce.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Returns value after a specified time period has passed without any further changes\n *\n * @param {T} value - value to be debounced\n * @param {number} delay - wait time before updating debounce value\n * @param {object} options - set of options to tweak behavior\n * @param {boolean} options.instantClear - with !value, instantly update debouncedValue\n * @returns {T} debouncedValue\n */\nexport default function useDebounce<T>(\n  value: T,\n  delay: number,\n  options: { instantClear: boolean } = { instantClear: false },\n): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  const timeout = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (!value && options.instantClear) {\n      setDebouncedValue(value);\n    } else {\n      timeout.current = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n    }\n\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n    };\n  }, [value, delay, options.instantClear]);\n\n  return debouncedValue;\n}\n"],"names":["value","delay","options","instantClear","debouncedValue","setDebouncedValue","useState","timeout","useRef","useEffect","current","setTimeout","clearTimeout"],"mappings":"2GAWc,SACZA,EACAC,EACAC,EAAqC,CAAEC,cAAc,IAErD,MAAOC,EAAgBC,GAAqBC,EAAAA,SAASN,GAC/CO,EAAUC,EAAAA,OAA8B,MAkB9C,OAhBAC,EAAAA,UAAU,MACHT,GAASE,EAAQC,aACpBE,EAAkBL,GAElBO,EAAQG,QAAUC,WAAW,KAC3BN,EAAkBL,IACjBC,GAGE,KACDM,EAAQG,SACVE,aAAaL,EAAQG,WAGxB,CAACV,EAAOC,EAAOC,EAAQC,eAEnBC,CACT"}
+{"version":3,"file":"useDebounce.js","sources":["../../../../../src/utils/useDebounce/useDebounce.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Returns value after a specified time period has passed without any further changes\n *\n * @param {T} value - value to be debounced\n * @param {number} delay - wait time before updating debounce value\n * @param {object} options - set of options to tweak behavior\n * @param {boolean} options.instantClear - with !value, instantly update debouncedValue\n * @returns {T} debouncedValue\n */\nexport default function useDebounce<T>(value: T, delay: number, options?: { instantClear?: boolean }): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  const timeout = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (!value && options?.instantClear) {\n      setDebouncedValue(value);\n    } else {\n      timeout.current = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n    }\n\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n    };\n  }, [value, delay, options?.instantClear]);\n\n  return debouncedValue;\n}\n"],"names":["value","delay","options","debouncedValue","setDebouncedValue","useState","timeout","useRef","useEffect","current","setTimeout","clearTimeout"],"mappings":"2GAWc,SAAyBA,EAAUC,EAAeC,GAC9D,MAAOC,EAAgBC,GAAqBC,EAAAA,SAASL,GAC/CM,EAAUC,EAAAA,OAA8B,MAkB9C,OAhBAC,EAAAA,UAAU,KAINF,EAAQG,QAAUC,WAAW,KAC3BN,EAAkBJ,IACjBC,GAGE,KACDK,EAAQG,SACVE,aAAaL,EAAQG,WAGxB,CAACT,EAAOC,WAEJE,CACT"}

package/components/advancedTable/agGrid.d.ts

@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material';
-import { BoxProps, CSSObject } from '@mui/system';
+import { BoxProps, CSSObject, Theme } from '@mui/material';
 import React from 'react';
 export declare const agGridStyles: (theme: Theme) => CSSObject;
 interface SkodaAgGridProviderProps extends BoxProps {

package/components/advancedTable/agGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"agGrid.js","sources":["../../../src/components/advancedTable/agGrid.tsx"],"sourcesContent":["import { Box, Theme } from '@mui/material';\nimport { BoxProps, CSSObject } from '@mui/system';\nimport React, { forwardRef } from 'react';\nimport { agGridVariables } from './agGridVariables';\nimport { skodaAgThemeParams } from './agGridSkodaTheme';\nimport { agGridCssIcons, agGridIconsDefinition } from './agGridIcons';\n\nexport const agGridStyles = (theme: Theme): CSSObject => {\n  const agTheme = skodaAgThemeParams(theme);\n\n  return {\n    width: '100%',\n    // Apply CSS variables only for non-themed tables of the old versions of ag grid (old versions of ag-grid, <v33, themes does not have ag-theme-params-* class)\n    '&:not(:has([class*=\"ag-theme-params-\"])),&.ag-theme-material': {\n      ...agGridVariables(theme),\n    },\n\n    '.ag-row-last': { borderBottom: 'none' },\n    '.ag-column-last .ag-header-cell-resize': { display: 'none' },\n\n    // Row lines full width\n    '.ag-center-cols-container': {\n      minWidth: '100%',\n    },\n\n    '.ag-center-cols-viewport': {\n      // reduce to 1 row from default 150px\n      minHeight: '56px',\n    },\n\n    // # Header styles\n    '& .ag-header-cell .ag-header-cell-text': {\n      fontWeight: `${agTheme.headerFontWeight}`,\n    },\n\n    // # Header Separators (only when column resizing is not activated and not for the last column)\n    '& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden': {\n      display: 'block !important',\n      cursor: 'initial',\n    },\n\n    // # Horizontal Scrollbar\n    '& .ag-body-horizontal-scroll': {\n      alignItems: 'center',\n      px: '22px',\n      borderTop: '1px solid',\n      borderTopColor: theme.palette.surface.secondary,\n      maxHeight: 'none !important',\n      height: 'auto !important',\n    },\n    '& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport': {\n      mt: '16px',\n      mb: '23px',\n    },\n    '& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport': {\n      my: 0,\n    },\n\n    // # Pagination styles\n    '& .ag-paging-panel': {\n      justifyContent: 'center',\n      px: '24px',\n    },\n\n    // Pagination layout - rows per page centered, arrows right-aligned\n    '& .ag-paging-panel .ag-paging-page-size': {\n      position: 'absolute',\n    },\n    '& .ag-paging-panel .ag-paging-page-summary-panel': {\n      marginLeft: 'auto',\n    },\n\n    // Disable pagination summary\n    '& .ag-paging-row-summary-panel': {\n      display: 'none',\n    },\n\n    // Text styling within pagination arrows\n    '& .ag-paging-description': {\n      fontSize: '18px',\n      px: '18px',\n    },\n    '& .ag-paging-panel .ag-paging-description span': {\n      color: 'text.primary',\n      px: '2px',\n    },\n    '& .ag-paging-panel .ag-paging-description .ag-paging-number': {\n      fontWeight: '700',\n    },\n    '& .ag-paging-panel .ag-paging-description span:last-child': {\n      fontWeight: '300',\n    },\n\n    // Disable AG-grid pagination icons - start, end\n    '& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last': {\n      display: 'none',\n    },\n\n    // Pagination - rows per page\n    '& .ag-paging-panel .ag-picker-field-wrapper': {\n      border: 'none',\n      px: '0',\n      cursor: 'pointer',\n      minWidth: 'auto',\n    },\n    '& .ag-paging-panel .ag-picker-field-display': {\n      minWidth: '28px',\n      width: 'auto',\n      pr: '6px',\n      fontSize: '18px',\n      fontWeight: '700',\n      textAlign: 'center',\n    },\n    '& .ag-paging-panel .ag-label': {\n      mr: '6px',\n      fontSize: '18px',\n    },\n\n    '& .ag-popup > *': {\n      backgroundColor: 'onSurface.os0',\n      cursor: 'pointer',\n      borderRadius: '0px',\n    },\n\n    // # Opt-in className=\"skoda-ag-pointer\"\n    '& .skoda-ag-row-pointer .ag-row:hover': {\n      cursor: 'pointer',\n    },\n\n    // Additional icons\n    ...agGridCssIcons,\n\n    // Show icons according to the SkodaFlow design\n    '& .ag-icon-asc, & .ag-icon-desc': {\n      color: theme.palette.onSurface.os600,\n    },\n    '& .ag-icon-asc:hover, & .ag-icon-desc:hover': {\n      color: theme.palette.text.primary,\n    },\n    '& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)':\n      {\n        display: 'inline-block !important', // Ag grid also uses !important so we have to override it\n      },\n\n    '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before': {\n      content: '\"\"',\n      display: 'flex',\n      width: '17px',\n      height: '17px',\n      maskSize: 'contain',\n      maskRepeat: 'no-repeat',\n      maskPosition: 'center',\n      verticalAlign: 'middle',\n      maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.ascHover.svg)})`,\n    },\n    '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before': {\n      maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.asc.svg)})`,\n    },\n\n    // Legacy class approach, no theme\n    fontFamily: agTheme.fontFamily,\n  };\n};\n\ninterface SkodaAgGridProviderProps extends BoxProps {}\n\n/**\n * A provider wrapper that applies Skoda AG Grid theming via sx.\n */\nexport const SkodaAgGridProvider: React.FC<SkodaAgGridProviderProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={(theme) => ({\n        ...agGridStyles(theme),\n        ...sx,\n      })}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["agGridStyles","theme","agTheme","skodaAgThemeParams","Object","assign","width","agGridVariables","borderBottom","display","minWidth","minHeight","fontWeight","headerFontWeight","cursor","alignItems","px","borderTop","borderTopColor","palette","surface","secondary","maxHeight","height","mt","mb","my","justifyContent","position","marginLeft","fontSize","color","border","pr","textAlign","mr","backgroundColor","borderRadius","agGridCssIcons","onSurface","os600","text","primary","content","maskSize","maskRepeat","maskPosition","verticalAlign","maskImage","encodeURIComponent","agGridIconsDefinition","ascHover","svg","asc","fontFamily","SkodaAgGridProvider","forwardRef","_a","ref","sx","children","rest","__rest","_jsx","Box"],"mappings":"6UAOO,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAmBF,GAEnC,OAAAG,OAAAC,OAAAD,OAAAC,OAAA,CACEC,MAAO,OAEP,+DAA8DF,OAAAC,OAAA,CAAA,EACzDE,EAAgBN,IAGrB,eAAgB,CAAEO,aAAc,QAChC,yCAA0C,CAAEC,QAAS,QAGrD,4BAA6B,CAC3BC,SAAU,QAGZ,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,GAAGV,EAAQW,oBAIzB,4EAA6E,CAC3EJ,QAAS,mBACTK,OAAQ,WAIV,+BAAgC,CAC9BC,WAAY,SACZC,GAAI,OACJC,UAAW,YACXC,eAAgBjB,EAAMkB,QAAQC,QAAQC,UACtCC,UAAW,kBACXC,OAAQ,mBAEV,mEAAoE,CAClEC,GAAI,OACJC,GAAI,QAEN,gFAAiF,CAC/EC,GAAI,GAIN,qBAAsB,CACpBC,eAAgB,SAChBX,GAAI,QAIN,0CAA2C,CACzCY,SAAU,YAEZ,mDAAoD,CAClDC,WAAY,QAId,iCAAkC,CAChCpB,QAAS,QAIX,2BAA4B,CAC1BqB,SAAU,OACVd,GAAI,QAEN,iDAAkD,CAChDe,MAAO,eACPf,GAAI,OAEN,8DAA+D,CAC7DJ,WAAY,OAEd,4DAA6D,CAC3DA,WAAY,OAId,sEAAuE,CACrEH,QAAS,QAIX,8CAA+C,CAC7CuB,OAAQ,OACRhB,GAAI,IACJF,OAAQ,UACRJ,SAAU,QAEZ,8CAA+C,CAC7CA,SAAU,OACVJ,MAAO,OACP2B,GAAI,MACJH,SAAU,OACVlB,WAAY,MACZsB,UAAW,UAEb,+BAAgC,CAC9BC,GAAI,MACJL,SAAU,QAGZ,kBAAmB,CACjBM,gBAAiB,gBACjBtB,OAAQ,UACRuB,aAAc,OAIhB,wCAAyC,CACvCvB,OAAQ,YAIPwB,GAAc,CAGjB,kCAAmC,CACjCP,MAAO9B,EAAMkB,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,MAAO9B,EAAMkB,QAAQsB,KAAKC,SAE5B,+HACE,CACEjC,QAAS,2BAGb,6DAA8D,CAC5DkC,QAAS,KACTlC,QAAS,OACTH,MAAO,OACPiB,OAAQ,OACRqB,SAAU,UACVC,WAAY,YACZC,aAAc,SACdC,cAAe,SACfC,UAAW,+BAA+BC,mBAAmBC,EAAsBC,SAASC,SAE9F,mEAAoE,CAClEJ,UAAW,+BAA+BC,mBAAmBC,EAAsBG,IAAID,SAIzFE,WAAYpD,EAAQoD,cASXC,EAA0DC,EAAW,CAACC,EAA2BC,SAA3BC,GAAEA,EAAEC,SAAEA,GAAQH,EAAKI,EAAIC,EAAAL,EAAvB,mBACjF,OACEM,EAACC,EAAG5D,OAAAC,OAAA,CACFsD,GAAK1D,GAAUG,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,EAAaC,IACb0D,GAELD,IAAKA,GACDG,EAAI,CAAAD,SAEPA"}
+{"version":3,"file":"agGrid.js","sources":["../../../src/components/advancedTable/agGrid.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject, Theme } from '@mui/material';\nimport React, { forwardRef } from 'react';\nimport { agGridVariables } from './agGridVariables';\nimport { skodaAgThemeParams } from './agGridSkodaTheme';\nimport { agGridCssIcons, agGridIconsDefinition } from './agGridIcons';\n\nexport const agGridStyles = (theme: Theme): CSSObject => {\n  const agTheme = skodaAgThemeParams(theme);\n\n  return {\n    width: '100%',\n    // Apply CSS variables only for non-themed tables of the old versions of ag grid (old versions of ag-grid, <v33, themes does not have ag-theme-params-* class)\n    '&:not(:has([class*=\"ag-theme-params-\"])),&.ag-theme-material': {\n      ...agGridVariables(theme),\n    },\n\n    '.ag-row-last': { borderBottom: 'none' },\n    '.ag-column-last .ag-header-cell-resize': { display: 'none' },\n\n    // Row lines full width\n    '.ag-center-cols-container': {\n      minWidth: '100%',\n    },\n\n    '.ag-center-cols-viewport': {\n      // reduce to 1 row from default 150px\n      minHeight: '56px',\n    },\n\n    // # Header styles\n    '& .ag-header-cell .ag-header-cell-text': {\n      fontWeight: `${agTheme.headerFontWeight}`,\n    },\n\n    // # Header Separators (only when column resizing is not activated and not for the last column)\n    '& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden': {\n      display: 'block !important',\n      cursor: 'initial',\n    },\n\n    // # Horizontal Scrollbar\n    '& .ag-body-horizontal-scroll': {\n      alignItems: 'center',\n      px: '22px',\n      borderTop: '1px solid',\n      borderTopColor: theme.palette.surface.secondary,\n      maxHeight: 'none !important',\n      height: 'auto !important',\n    },\n    '& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport': {\n      mt: '16px',\n      mb: '23px',\n    },\n    '& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport': {\n      my: 0,\n    },\n\n    // # Pagination styles\n    '& .ag-paging-panel': {\n      justifyContent: 'center',\n      px: '24px',\n    },\n\n    // Pagination layout - rows per page centered, arrows right-aligned\n    '& .ag-paging-panel .ag-paging-page-size': {\n      position: 'absolute',\n    },\n    '& .ag-paging-panel .ag-paging-page-summary-panel': {\n      marginLeft: 'auto',\n    },\n\n    // Disable pagination summary\n    '& .ag-paging-row-summary-panel': {\n      display: 'none',\n    },\n\n    // Text styling within pagination arrows\n    '& .ag-paging-description': {\n      fontSize: '18px',\n      px: '18px',\n    },\n    '& .ag-paging-panel .ag-paging-description span': {\n      color: 'text.primary',\n      px: '2px',\n    },\n    '& .ag-paging-panel .ag-paging-description .ag-paging-number': {\n      fontWeight: '700',\n    },\n    '& .ag-paging-panel .ag-paging-description span:last-child': {\n      fontWeight: '300',\n    },\n\n    // Disable AG-grid pagination icons - start, end\n    '& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last': {\n      display: 'none',\n    },\n\n    // Pagination - rows per page\n    '& .ag-paging-panel .ag-picker-field-wrapper': {\n      border: 'none',\n      px: '0',\n      cursor: 'pointer',\n      minWidth: 'auto',\n    },\n    '& .ag-paging-panel .ag-picker-field-display': {\n      minWidth: '28px',\n      width: 'auto',\n      pr: '6px',\n      fontSize: '18px',\n      fontWeight: '700',\n      textAlign: 'center',\n    },\n    '& .ag-paging-panel .ag-label': {\n      mr: '6px',\n      fontSize: '18px',\n    },\n\n    '& .ag-popup > *': {\n      backgroundColor: 'onSurface.os0',\n      cursor: 'pointer',\n      borderRadius: '0px',\n    },\n\n    // # Opt-in className=\"skoda-ag-pointer\"\n    '& .skoda-ag-row-pointer .ag-row:hover': {\n      cursor: 'pointer',\n    },\n\n    // Additional icons\n    ...agGridCssIcons,\n\n    // Show icons according to the SkodaFlow design\n    '& .ag-icon-asc, & .ag-icon-desc': {\n      color: theme.palette.onSurface.os600,\n    },\n    '& .ag-icon-asc:hover, & .ag-icon-desc:hover': {\n      color: theme.palette.text.primary,\n    },\n    '& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)':\n      {\n        display: 'inline-block !important', // Ag grid also uses !important so we have to override it\n      },\n\n    '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before': {\n      content: '\"\"',\n      display: 'flex',\n      width: '17px',\n      height: '17px',\n      maskSize: 'contain',\n      maskRepeat: 'no-repeat',\n      maskPosition: 'center',\n      verticalAlign: 'middle',\n      maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.ascHover.svg)})`,\n    },\n    '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before': {\n      maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.asc.svg)})`,\n    },\n\n    // Legacy class approach, no theme\n    fontFamily: agTheme.fontFamily,\n  };\n};\n\ninterface SkodaAgGridProviderProps extends BoxProps {}\n\n/**\n * A provider wrapper that applies Skoda AG Grid theming via sx.\n */\nexport const SkodaAgGridProvider: React.FC<SkodaAgGridProviderProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={(theme) => ({\n        ...agGridStyles(theme),\n        ...sx,\n      })}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["agGridStyles","theme","agTheme","skodaAgThemeParams","Object","assign","width","agGridVariables","borderBottom","display","minWidth","minHeight","fontWeight","headerFontWeight","cursor","alignItems","px","borderTop","borderTopColor","palette","surface","secondary","maxHeight","height","mt","mb","my","justifyContent","position","marginLeft","fontSize","color","border","pr","textAlign","mr","backgroundColor","borderRadius","agGridCssIcons","onSurface","os600","text","primary","content","maskSize","maskRepeat","maskPosition","verticalAlign","maskImage","encodeURIComponent","agGridIconsDefinition","ascHover","svg","asc","fontFamily","SkodaAgGridProvider","forwardRef","_a","ref","sx","children","rest","__rest","_jsx","Box"],"mappings":"6UAMO,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAmBF,GAEnC,OAAAG,OAAAC,OAAAD,OAAAC,OAAA,CACEC,MAAO,OAEP,+DAA8DF,OAAAC,OAAA,CAAA,EACzDE,EAAgBN,IAGrB,eAAgB,CAAEO,aAAc,QAChC,yCAA0C,CAAEC,QAAS,QAGrD,4BAA6B,CAC3BC,SAAU,QAGZ,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,GAAGV,EAAQW,oBAIzB,4EAA6E,CAC3EJ,QAAS,mBACTK,OAAQ,WAIV,+BAAgC,CAC9BC,WAAY,SACZC,GAAI,OACJC,UAAW,YACXC,eAAgBjB,EAAMkB,QAAQC,QAAQC,UACtCC,UAAW,kBACXC,OAAQ,mBAEV,mEAAoE,CAClEC,GAAI,OACJC,GAAI,QAEN,gFAAiF,CAC/EC,GAAI,GAIN,qBAAsB,CACpBC,eAAgB,SAChBX,GAAI,QAIN,0CAA2C,CACzCY,SAAU,YAEZ,mDAAoD,CAClDC,WAAY,QAId,iCAAkC,CAChCpB,QAAS,QAIX,2BAA4B,CAC1BqB,SAAU,OACVd,GAAI,QAEN,iDAAkD,CAChDe,MAAO,eACPf,GAAI,OAEN,8DAA+D,CAC7DJ,WAAY,OAEd,4DAA6D,CAC3DA,WAAY,OAId,sEAAuE,CACrEH,QAAS,QAIX,8CAA+C,CAC7CuB,OAAQ,OACRhB,GAAI,IACJF,OAAQ,UACRJ,SAAU,QAEZ,8CAA+C,CAC7CA,SAAU,OACVJ,MAAO,OACP2B,GAAI,MACJH,SAAU,OACVlB,WAAY,MACZsB,UAAW,UAEb,+BAAgC,CAC9BC,GAAI,MACJL,SAAU,QAGZ,kBAAmB,CACjBM,gBAAiB,gBACjBtB,OAAQ,UACRuB,aAAc,OAIhB,wCAAyC,CACvCvB,OAAQ,YAIPwB,GAAc,CAGjB,kCAAmC,CACjCP,MAAO9B,EAAMkB,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,MAAO9B,EAAMkB,QAAQsB,KAAKC,SAE5B,+HACE,CACEjC,QAAS,2BAGb,6DAA8D,CAC5DkC,QAAS,KACTlC,QAAS,OACTH,MAAO,OACPiB,OAAQ,OACRqB,SAAU,UACVC,WAAY,YACZC,aAAc,SACdC,cAAe,SACfC,UAAW,+BAA+BC,mBAAmBC,EAAsBC,SAASC,SAE9F,mEAAoE,CAClEJ,UAAW,+BAA+BC,mBAAmBC,EAAsBG,IAAID,SAIzFE,WAAYpD,EAAQoD,cASXC,EAA0DC,EAAW,CAACC,EAA2BC,SAA3BC,GAAEA,EAAEC,SAAEA,GAAQH,EAAKI,EAAIC,EAAAL,EAAvB,mBACjF,OACEM,EAACC,EAAG5D,OAAAC,OAAA,CACFsD,GAAK1D,GAAUG,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,EAAaC,IACb0D,GAELD,IAAKA,GACDG,EAAI,CAAAD,SAEPA"}

package/components/alert/index.d.ts

@@ -1,3 +1,2 @@
-export * from './Alert';
 export * from './AlertButton';
 export * from './AlertNotificationButton';

package/components/banner/Banner.d.ts

@@ -0,0 +1,42 @@
+import { BoxProps, SvgIconProps, TypographyProps } from '@mui/material';
+import React, { ElementType, ComponentType, ReactNode } from 'react';
+export interface BannerProps extends BoxProps<ElementType> {
+    /**
+     * Defines which variant of Banner component should be rendered
+     * @default info
+     */
+    variant?: 'info' | 'warning' | 'error';
+    /**
+     * Set the proportions
+     * @default large
+     */
+    size?: 'large' | 'small';
+    /**
+     * Properties passed to indicator icon
+     */
+    iconProps?: SvgIconProps;
+    /**
+     * Icon node to be used
+     */
+    IconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Properties passed to wrapper of children
+     */
+    typographyProps?: TypographyProps<ElementType>;
+    /**
+     * Properties applied to wrapper of content (Icon and Typography)
+     */
+    wrapperProps?: BoxProps<ElementType>;
+    /**
+     * ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment
+     */
+    buttons?: ReactNode;
+    /**
+     * Properties applied to wrapper element of buttons
+     */
+    buttonsWrapperProps?: BoxProps<ElementType>;
+}
+/**
+ * Alert notification banner
+ */
+export declare const Banner: React.FC<BannerProps>;

package/components/banner/Banner.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"tslib";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{CircleExclamationFilledIcon as n}from"../icon/filled/CircleExclamationFilledIcon.js";import{CircleInformationFilledIcon as i}from"../icon/filled/CircleInformationFilledIcon.js";import{WarningFilledIcon as s}from"../icon/filled/WarningFilledIcon.js";import{useTheme as o,Box as a,Typography as l}from"@mui/material";import{forwardRef as c,useMemo as p}from"react";import{getFocusRingStyle as x}from"../focusring/focusring.js";const m=c((c,m)=>{var{children:f,variant:d="info",size:g="large",sx:u,iconProps:b,IconComponent:j,typographyProps:h,wrapperProps:w,buttons:y,buttonsWrapperProps:C,onClick:O}=c,I=e(c,["children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick"]);const P=o(),k=null!=b?b:{},{sx:v}=k,B=e(k,["sx"]),S=null!=h?h:{},{sx:z}=S,F=e(S,["sx"]),W=null!=w?w:{},{sx:G}=W,A=e(W,["sx"]),D=null!=C?C:{},{sx:E}=D,H=e(D,["sx"]),[L,q,J]=p(()=>{switch(d){case"error":return["error.main","error.light",s];case"warning":return["warning.main","warning.light",n];default:return["info.main","info.light",i]}},[d]),K=null!=j?j:J;return r(a,Object.assign({"data-testid":"Banner",role:"alert","aria-atomic":"true","aria-live":"assertive",onClick:O,sx:Object.assign(Object.assign({display:"flex",width:"100%",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},justifyContent:"space-between",px:2,py:"small"===g?1:{xs:2,md:1},gap:1,borderLeft:6,borderColor:L,backgroundColor:"dark"===P.palette.mode?"onSurface.os900":q,textAlign:"left"},O&&Object.assign({position:"relative",cursor:"pointer"},x(P,!0,"2px"))),u),ref:m},I,{children:[r(a,Object.assign({"data-testid":"Banner.wrapper",sx:Object.assign({flexGrow:"1",display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gap:1,py:.5},G)},A,{children:[t(K,Object.assign({"data-testid":"Banner.icon",sx:Object.assign({color:L},v)},B)),t(l,Object.assign({"data-testid":"Banner.text",sx:Object.assign({color:"text.primary",flexGrow:"1",fontSize:{xl:"16px"},lineHeight:{xl:"24px"}},z)},F,{children:f}))]})),y&&t(a,Object.assign({"data-testid":"Banner.buttons",sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,flexShrink:"0",ml:{xs:4,md:0},alignSelf:"flex-end"},E)},H,{children:y}))]}))});export{m as Banner};
+//# sourceMappingURL=Banner.js.map

package/components/banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { CircleExclamationFilledIcon } from '@/src/components/icon/filled/CircleExclamationFilledIcon';\nimport { CircleInformationFilledIcon } from '@/src/components/icon/filled/CircleInformationFilledIcon';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { Box, BoxProps, SvgIconProps, Typography, TypographyProps, useTheme } from '@mui/material';\nimport React, { ElementType, ComponentType, forwardRef, ReactNode, useMemo } from 'react';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BannerProps extends BoxProps<ElementType> {\n  /**\n   * Defines which variant of Banner component should be rendered\n   * @default info\n   */\n  variant?: 'info' | 'warning' | 'error';\n  /**\n   * Set the proportions\n   * @default large\n   */\n  size?: 'large' | 'small';\n  /**\n   * Properties passed to indicator icon\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties passed to wrapper of children\n   */\n  typographyProps?: TypographyProps<ElementType>;\n  /**\n   * Properties applied to wrapper of content (Icon and Typography)\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment\n   */\n  buttons?: ReactNode;\n  /**\n   * Properties applied to wrapper element of buttons\n   */\n  buttonsWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Alert notification banner\n */\nexport const Banner: React.FC<BannerProps> = forwardRef(\n  (\n    {\n      children,\n      variant = 'info',\n      size = 'large',\n      sx,\n      iconProps,\n      IconComponent,\n      typographyProps,\n      wrapperProps,\n      buttons,\n      buttonsWrapperProps,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    const { sx: typographySx, ...restTypography } = typographyProps ?? {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: buttonsWrapperSx, ...restButtonsWrapper } = buttonsWrapperProps ?? {};\n\n    const [borderColor, backgroundColor, IconVariantComponent] = useMemo(() => {\n      switch (variant) {\n        case 'error':\n          return ['error.main', 'error.light', WarningFilledIcon];\n        case 'warning':\n          return ['warning.main', 'warning.light', CircleExclamationFilledIcon];\n        case 'info':\n        default:\n          return ['info.main', 'info.light', CircleInformationFilledIcon];\n      }\n    }, [variant]);\n    const BannerIcon = IconComponent ?? IconVariantComponent;\n\n    return (\n      <Box\n        data-testid=\"Banner\"\n        role=\"alert\"\n        aria-atomic=\"true\"\n        aria-live=\"assertive\"\n        onClick={onClick}\n        sx={{\n          display: 'flex',\n          width: '100%',\n          // on mobile content and button bellow each other\n          flexDirection: { xs: 'column', md: 'row' },\n          alignItems: { xs: 'flex-start', md: 'center' },\n          justifyContent: 'space-between',\n          // proportions\n          px: 2,\n          py: size === 'small' ? 1 : { xs: 2, md: 1 },\n          gap: 1,\n          // style\n          borderLeft: 6,\n          borderColor: borderColor,\n          backgroundColor: theme.palette.mode === 'dark' ? 'onSurface.os900' : backgroundColor,\n          textAlign: 'left',\n          // clickable style\n          ...(onClick && {\n            position: 'relative',\n            cursor: 'pointer',\n            // focused style\n            ...getFocusRingStyle(theme, true, '2px'),\n          }),\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          data-testid=\"Banner.wrapper\"\n          sx={{\n            // align icon and content\n            flexGrow: '1',\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'flex-start',\n            gap: 1,\n            py: 0.5,\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <BannerIcon\n            data-testid=\"Banner.icon\"\n            sx={{\n              color: borderColor,\n              ...iconSx,\n            }}\n            {...restIcon}\n          />\n          <Typography\n            data-testid=\"Banner.text\"\n            sx={{\n              color: 'text.primary',\n              flexGrow: '1',\n              // custom font according to Figma\n              fontSize: { xl: '16px' },\n              lineHeight: { xl: '24px' },\n              ...typographySx,\n            }}\n            {...restTypography}\n          >\n            {children}\n          </Typography>\n        </Box>\n        {buttons && (\n          <Box\n            data-testid=\"Banner.buttons\"\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              gap: 1,\n              // always show buttons next to each other\n              flexShrink: '0',\n              // on mobile align with text\n              ml: { xs: 4, md: 0 },\n              // on mobile move to the right side\n              alignSelf: 'flex-end',\n              ...buttonsWrapperSx,\n            }}\n            {...restButtonsWrapper}\n          >\n            {buttons}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Banner","forwardRef","_a","ref","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","__rest","theme","useTheme","_b","iconSx","restIcon","_c","typographySx","restTypography","_d","wrapperSx","restWrapper","_e","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","Object","assign","role","display","width","flexDirection","xs","md","alignItems","justifyContent","px","py","gap","borderLeft","palette","mode","textAlign","position","cursor","getFocusRingStyle","flexGrow","_jsx","color","Typography","fontSize","xl","lineHeight","flexShrink","ml","alignSelf"],"mappings":"igBA+CO,MAAMA,EAAgCC,EAC3C,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,QACRA,EAAU,OAAMC,KAChBA,EAAO,QAAOC,GACdA,EAAEC,UACFA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,aACfA,EAAYC,QACZA,EAAOC,oBACPA,EAAmBC,QACnBA,GAAOZ,EACJa,EAAIC,EAAAd,EAZT,2IAgBA,MAAMe,EAAQC,IACRC,EAA8BX,QAAAA,EAAa,IAAzCD,GAAIa,GAAMD,EAAKE,EAAQL,EAAAG,EAAzB,CAAA,OACAG,EAA0CZ,QAAAA,EAAmB,IAA3DH,GAAIgB,GAAYD,EAAKE,EAAcR,EAAAM,EAArC,CAAA,OACAG,EAAoCd,QAAAA,EAAgB,IAAlDJ,GAAImB,GAASD,EAAKE,EAAWX,EAAAS,EAA/B,CAAA,OACAG,EAAkDf,QAAAA,EAAuB,IAAvEN,GAAIsB,GAAgBD,EAAKE,EAAkBd,EAAAY,EAA7C,CAAA,QAECG,EAAaC,EAAiBC,GAAwBC,EAAQ,KACnE,OAAQ7B,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe8B,GACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,GAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,KAEtC,CAAChC,IACEiC,EAAa7B,QAAAA,EAAiBwB,EAEpC,OACEM,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,SACZC,KAAK,QAAO,cACA,OAAM,YACR,YACV7B,QAASA,EACTP,GAAEkC,OAAAC,OAAAD,OAAAC,OAAA,CACAE,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,UAAT9C,EAAmB,EAAI,CAAEyC,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,EACZvB,YAAaA,EACbC,gBAAwC,SAAvBf,EAAMsC,QAAQC,KAAkB,kBAAoBxB,EACrEyB,UAAW,QAEP3C,GAAO2B,OAAAC,OAAA,CACTgB,SAAU,WACVC,OAAQ,WAELC,EAAkB3C,GAAO,EAAM,SAEjCV,GAELJ,IAAKA,GACDY,EAAI,CAAAX,SAAA,CAERmC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GAAEkC,OAAAC,OAAA,CAEAmB,SAAU,IACVjB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,IACD1B,IAEDC,EAAW,CAAAvB,SAAA,CAEf0D,EAACxB,EAAUG,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAqB,MAAOhC,GACJX,IAEDC,IAENyC,EAACE,EAAUvB,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAqB,MAAO,eACPF,SAAU,IAEVI,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,SACf3C,IAEDC,EAAc,CAAApB,SAEjBA,SAGJQ,GACCkD,EAACtB,EAAGC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GAAEkC,OAAAC,OAAA,CACAE,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELe,WAAY,IAEZC,GAAI,CAAEtB,GAAI,EAAGC,GAAI,GAEjBsB,UAAW,YACRzC,IAEDC,EAAkB,CAAA1B,SAErBQ"}

package/components/banner/index.d.ts

@@ -1,3 +1,3 @@
-export * from './banner';
+export * from './Banner';
 export * from './BannerButton';
 export * from './BannerDismissButton';

package/components/bottomSheet/BottomSheet.d.ts

@@ -0,0 +1,74 @@
+import React, { ComponentType, ElementType } from 'react';
+import { BoxProps, IconButtonProps, SwipeableDrawerProps, TypographyProps, SvgIconProps } from '@mui/material';
+export interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' | 'onOpen' | 'title'> {
+    /**
+     * Open state component flag
+     */
+    open: boolean;
+    /**
+     * Open state component function
+     */
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Flag for displaying close button
+     */
+    closeButton?: boolean;
+    /**
+     * Props applied to closeButton IconButton
+     */
+    closeButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Props applied to Icon in closeButton
+     */
+    closeButtonIconProps?: SvgIconProps;
+    /**
+     * Icon node to be used
+     */
+    CloseButtonIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Flag for displaying bar that visualizes pulling function
+     */
+    puller?: boolean;
+    /**
+     * Props applied to wrapper of puller
+     */
+    pullerWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Props applied to puller
+     */
+    pullerProps?: BoxProps<ElementType>;
+    /**
+     * Footer children slot
+     */
+    footerSlot?: React.ReactNode;
+    /**
+     * Text in header
+     */
+    title?: React.ReactNode;
+    /**
+     * Text props
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Max height of whole component in percentages
+     * @default 60
+     */
+    maxHeight?: number;
+    /**
+     * Wrapper of header
+     */
+    headerWrapper?: BoxProps<ElementType>;
+    /**
+     * Wrapper of title and close button
+     */
+    titleWrapper?: BoxProps<ElementType>;
+    /**
+     * Wrapper of content
+     */
+    contentWrapper?: BoxProps<ElementType>;
+    /**
+     * Wrapper of footer
+     */
+    footerWrapper?: BoxProps<ElementType>;
+}
+export declare const BottomSheet: React.FC<BottomSheetProps>;

package/components/bottomSheet/BottomSheet.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"tslib";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{forwardRef as s}from"react";import{useTheme as r,SwipeableDrawer as n,Box as l,Typography as i,IconButton as a}from"@mui/material";import{CloseIcon as p}from"../icon/stroke/CloseIcon.js";import{useElementScrollable as c}from"../../utils/useElementScrollable/useElementScrollable.js";import{getFocusRingBoxShadow as d}from"../focusring/focusring.js";const x=s((s,x)=>{var u,{children:m,open:b,setOpen:g,slotProps:h,puller:f,pullerWrapperProps:j,pullerProps:O,closeButton:B,closeButtonProps:S,closeButtonIconProps:P,CloseButtonIconComponent:C,footerSlot:W,title:v,titleProps:y={},headerWrapper:I,titleWrapper:w,contentWrapper:R,footerWrapper:k,maxHeight:T=60}=s,H=e(s,["children","open","setOpen","slotProps","puller","pullerWrapperProps","pullerProps","closeButton","closeButtonProps","closeButtonIconProps","CloseButtonIconComponent","footerSlot","title","titleProps","headerWrapper","titleWrapper","contentWrapper","footerWrapper","maxHeight"]);const D=null!=I?I:{},{sx:E}=D,M=e(D,["sx"]),z=null!=w?w:{},{sx:L}=z,$=e(z,["sx"]),q=null!=y?y:{},{sx:A}=q,F=e(q,["sx"]),G=null!=j?j:{},{sx:J}=G,K=e(G,["sx"]),N=null!=O?O:{},{sx:Q}=N,U=e(N,["sx"]),V=null!=S?S:{},{sx:X}=V,Y=e(V,["sx"]),Z=null!=R?R:{},{sx:_}=Z,ee=e(Z,["sx"]),te=null!=k?k:{},{sx:oe}=te,se=e(te,["sx"]),re=r(),ne=C||p,{isScrollable:le,elementRef:ie}=c("y");return t(n,Object.assign({dir:re.direction,anchor:"bottom",open:b,onClose:()=>g(!1),onOpen:()=>g(!0),disableSwipeToOpen:!0,ModalProps:{keepMounted:!0},"data-testid":"BottomSheet",slotProps:Object.assign(Object.assign({},h),{paper:Object.assign(Object.assign({},null==h?void 0:h.paper),{sx:Object.assign({boxShadow:"none",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",maxHeight:`${T}%`},null===(u=null==h?void 0:h.paper)||void 0===u?void 0:u.sx)})}),ref:x},H,{children:[(v||B||f)&&t(l,Object.assign({sx:Object.assign({px:2},E),"data-testid":"BottomSheet-header"},M,{children:[f&&o(l,Object.assign({sx:Object.assign({position:"relative",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},J)},K,{children:o(l,Object.assign({"data-testid":"BottomSheet-puller",sx:Object.assign({width:"28px",height:"4px",backgroundColor:"onSurface.os500",mt:1,mb:1.5,borderRadius:"8px"},Q)},U))})),(v||B&&!f)&&t(l,Object.assign({sx:Object.assign({display:"flex",justifyContent:v?"space-between":"flex-end",alignItems:"flex-start",gap:1,pt:le&&f?1:0},L)},$,{children:[v&&o(i,Object.assign({"data-testid":"BottomSheet-title",variant:"h4",component:"h2",sx:Object.assign({mt:f?0:2,mb:le?2:0},A)},F,{children:v})),B&&!f&&o(a,Object.assign({"data-testid":"BottomSheet-closeButton",size:"medium",onClick:()=>g(!1),"aria-label":"Close bottom sheet",sx:Object.assign({my:"4px",mr:"-6px"},X)},Y,{children:o(ne,Object.assign({},P))}))]}))]})),o(l,Object.assign({"data-testid":"BottomSheet-content",ref:ie,sx:Object.assign({overflow:"auto",borderTop:le?1:0,borderBottom:le&&W?1:0,borderColor:"surface.secondary",p:2,"&:focus-visible":{outline:"none",boxShadow:d(re,!0)}},_)},ee,{children:m})),W&&o(l,Object.assign({"data-testid":"BottomSheet-footer",sx:Object.assign({px:2,pt:3,pb:2,display:"flex",justifyContent:"flex-start",alignItems:"stretch",flexDirection:"column",gap:"16px"},oe)},se,{children:W}))]}))});export{x as BottomSheet};
+//# sourceMappingURL=BottomSheet.js.map

package/components/bottomSheet/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  IconButtonProps,\n  SwipeableDrawer,\n  SwipeableDrawerProps,\n  IconButton,\n  Typography,\n  TypographyProps,\n  useTheme,\n  SvgIconProps,\n  PaperProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingBoxShadow } from '@/src/components/focusring/focusring';\n\nexport interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' | 'onOpen' | 'title'> {\n  /**\n   * Open state component flag\n   */\n  open: boolean;\n  /**\n   * Open state component function\n   */\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  /**\n   * Flag for displaying close button\n   */\n  closeButton?: boolean;\n  /**\n   * Props applied to closeButton IconButton\n   */\n  closeButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Props applied to Icon in closeButton\n   */\n  closeButtonIconProps?: SvgIconProps;\n  /**\n   * Icon node to be used\n   */\n  CloseButtonIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Flag for displaying bar that visualizes pulling function\n   */\n  puller?: boolean;\n  /**\n   * Props applied to wrapper of puller\n   */\n  pullerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to puller\n   */\n  pullerProps?: BoxProps<ElementType>;\n  /**\n   * Footer children slot\n   */\n  footerSlot?: React.ReactNode;\n  /**\n   * Text in header\n   */\n  title?: React.ReactNode;\n  /**\n   * Text props\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Max height of whole component in percentages\n   * @default 60\n   */\n  maxHeight?: number;\n  /**\n   * Wrapper of header\n   */\n  headerWrapper?: BoxProps<ElementType>;\n  /**\n   * Wrapper of title and close button\n   */\n  titleWrapper?: BoxProps<ElementType>;\n  /**\n   * Wrapper of content\n   */\n  contentWrapper?: BoxProps<ElementType>;\n  /**\n   * Wrapper of footer\n   */\n  footerWrapper?: BoxProps<ElementType>;\n}\n\nexport const BottomSheet: React.FC<BottomSheetProps> = forwardRef(\n  (\n    {\n      children,\n      open,\n      setOpen,\n      slotProps,\n      puller,\n      pullerWrapperProps,\n      pullerProps,\n      closeButton,\n      closeButtonProps,\n      closeButtonIconProps,\n      CloseButtonIconComponent,\n      footerSlot,\n      title,\n      titleProps = {},\n      headerWrapper,\n      titleWrapper,\n      contentWrapper,\n      footerWrapper,\n      maxHeight = 60,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerWrapper ?? {};\n    const { sx: titleWrapperSx, ...restTitleWrapper } = titleWrapper ?? {};\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: pullerWrapperSx, ...restPullerWrapper } = pullerWrapperProps ?? {};\n    const { sx: pullerSx, ...restPuller } = pullerProps ?? {};\n    const { sx: closeButtonSx, ...restCloseButton } = closeButtonProps ?? {};\n    const { sx: contentSx, ...restContent } = contentWrapper ?? {};\n    const { sx: footerSx, ...restFooter } = footerWrapper ?? {};\n    const theme = useTheme();\n    const BottomSheetCloseButtonIcon = CloseButtonIconComponent || CloseIcon;\n\n    const { isScrollable, elementRef } = useElementScrollable('y');\n\n    return (\n      <SwipeableDrawer\n        dir={theme.direction}\n        anchor=\"bottom\"\n        open={open}\n        onClose={() => setOpen(false)}\n        onOpen={() => setOpen(true)}\n        disableSwipeToOpen\n        ModalProps={{\n          keepMounted: true,\n        }}\n        data-testid=\"BottomSheet\"\n        slotProps={{\n          ...slotProps,\n          paper: {\n            ...slotProps?.paper,\n            sx: {\n              boxShadow: 'none',\n              borderTopLeftRadius: '16px',\n              borderTopRightRadius: '16px',\n              maxHeight: `${maxHeight}%`,\n              ...(slotProps?.paper as PaperProps)?.sx,\n            },\n          },\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {(title || closeButton || puller) && (\n          <Box sx={{ px: 2, ...headerSx }} data-testid=\"BottomSheet-header\" {...restHeader}>\n            {puller && (\n              <Box\n                sx={{\n                  position: 'relative',\n                  display: 'flex',\n                  flexDirection: 'row',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                  ...pullerWrapperSx,\n                }}\n                {...restPullerWrapper}\n              >\n                <Box\n                  data-testid=\"BottomSheet-puller\"\n                  sx={{\n                    width: '28px',\n                    height: '4px',\n                    backgroundColor: 'onSurface.os500',\n                    mt: 1,\n                    mb: 1.5,\n                    borderRadius: '8px',\n                    ...pullerSx,\n                  }}\n                  {...restPuller}\n                />\n              </Box>\n            )}\n            {(title || (closeButton && !puller)) && (\n              <Box\n                sx={{\n                  display: 'flex',\n                  justifyContent: title ? 'space-between' : 'flex-end',\n                  alignItems: 'flex-start',\n                  gap: 1,\n                  pt: isScrollable && puller ? 1 : 0,\n                  ...titleWrapperSx,\n                }}\n                {...restTitleWrapper}\n              >\n                {title && (\n                  <Typography\n                    data-testid=\"BottomSheet-title\"\n                    variant=\"h4\"\n                    component=\"h2\"\n                    sx={{\n                      mt: puller ? 0 : 2,\n                      mb: isScrollable ? 2 : 0,\n                      ...titleSx,\n                    }}\n                    {...restTitle}\n                  >\n                    {title}\n                  </Typography>\n                )}\n                {closeButton && !puller && (\n                  <IconButton\n                    data-testid=\"BottomSheet-closeButton\"\n                    size=\"medium\"\n                    onClick={() => setOpen(false)}\n                    aria-label=\"Close bottom sheet\"\n                    sx={{\n                      my: '4px',\n                      mr: '-6px',\n                      ...closeButtonSx,\n                    }}\n                    {...restCloseButton}\n                  >\n                    <BottomSheetCloseButtonIcon {...closeButtonIconProps} />\n                  </IconButton>\n                )}\n              </Box>\n            )}\n          </Box>\n        )}\n        <Box\n          data-testid=\"BottomSheet-content\"\n          ref={elementRef}\n          sx={{\n            overflow: 'auto',\n            borderTop: isScrollable ? 1 : 0,\n            borderBottom: isScrollable && footerSlot ? 1 : 0,\n            borderColor: 'surface.secondary',\n            p: 2,\n            // can be focused since scrollable\n            '&:focus-visible': {\n              outline: 'none',\n              boxShadow: getFocusRingBoxShadow(theme, true),\n            },\n            ...contentSx,\n          }}\n          {...restContent}\n        >\n          {children}\n        </Box>\n        {footerSlot && (\n          <Box\n            data-testid=\"BottomSheet-footer\"\n            sx={{\n              px: 2,\n              pt: 3,\n              pb: 2,\n              display: 'flex',\n              justifyContent: 'flex-start',\n              alignItems: 'stretch',\n              flexDirection: 'column',\n              gap: '16px',\n              ...footerSx,\n            }}\n            {...restFooter}\n          >\n            {footerSlot}\n          </Box>\n        )}\n      </SwipeableDrawer>\n    );\n  },\n);\n"],"names":["BottomSheet","forwardRef","_a","ref","children","open","setOpen","slotProps","puller","pullerWrapperProps","pullerProps","closeButton","closeButtonProps","closeButtonIconProps","CloseButtonIconComponent","footerSlot","title","titleProps","headerWrapper","titleWrapper","contentWrapper","footerWrapper","maxHeight","rest","__rest","_c","sx","headerSx","restHeader","_d","titleWrapperSx","restTitleWrapper","_e","titleSx","restTitle","_f","pullerWrapperSx","restPullerWrapper","_g","pullerSx","restPuller","_h","closeButtonSx","restCloseButton","_j","contentSx","restContent","_k","footerSx","restFooter","theme","useTheme","BottomSheetCloseButtonIcon","CloseIcon","isScrollable","elementRef","useElementScrollable","_jsxs","SwipeableDrawer","dir","direction","anchor","onClose","onOpen","disableSwipeToOpen","ModalProps","keepMounted","paper","Object","assign","boxShadow","borderTopLeftRadius","borderTopRightRadius","_b","Box","px","_jsx","position","display","flexDirection","justifyContent","alignItems","width","height","backgroundColor","mt","mb","borderRadius","gap","pt","Typography","variant","component","IconButton","size","onClick","my","mr","overflow","borderTop","borderBottom","borderColor","p","outline","getFocusRingBoxShadow","pb"],"mappings":"qbA0FO,MAAMA,EAA0CC,EACrD,CACEC,EAsBAC,YAtBAC,SACEA,EAAQC,KACRA,EAAIC,QACJA,EAAOC,UACPA,EAASC,OACTA,EAAMC,mBACNA,EAAkBC,YAClBA,EAAWC,YACXA,EAAWC,iBACXA,EAAgBC,qBAChBA,EAAoBC,yBACpBA,EAAwBC,WACxBA,EAAUC,MACVA,EAAKC,WACLA,EAAa,CAAA,EAAEC,cACfA,EAAaC,aACbA,EAAYC,eACZA,EAAcC,cACdA,EAAaC,UACbA,EAAY,MACTC,EAAIC,EAAAtB,EApBT,CAAA,WAAA,OAAA,UAAA,YAAA,SAAA,qBAAA,cAAA,cAAA,mBAAA,uBAAA,2BAAA,aAAA,QAAA,aAAA,gBAAA,eAAA,iBAAA,gBAAA,cAwBA,MAAMuB,EAAkCP,QAAAA,EAAiB,IAAjDQ,GAAIC,GAAQF,EAAKG,EAAUJ,EAAAC,EAA7B,CAAA,OACAI,EAA8CV,QAAAA,EAAgB,IAA5DO,GAAII,GAAcD,EAAKE,EAAgBP,EAAAK,EAAzC,CAAA,OACAG,EAAgCf,QAAAA,EAAc,IAA5CS,GAAIO,GAAOD,EAAKE,EAASV,EAAAQ,EAA3B,CAAA,OACAG,EAAgD1B,QAAAA,EAAsB,IAApEiB,GAAIU,GAAeD,EAAKE,EAAiBb,EAAAW,EAA3C,CAAA,OACAG,EAAkC5B,QAAAA,EAAe,IAA/CgB,GAAIa,GAAQD,EAAKE,EAAUhB,EAAAc,EAA7B,CAAA,OACAG,EAA4C7B,QAAAA,EAAoB,IAA9Dc,GAAIgB,GAAaD,EAAKE,EAAenB,EAAAiB,EAAvC,CAAA,OACAG,EAAoCxB,QAAAA,EAAkB,IAApDM,GAAImB,GAASD,EAAKE,GAAWtB,EAAAoB,EAA/B,CAAA,OACAG,GAAkC1B,QAAAA,EAAiB,IAAjDK,GAAIsB,IAAQD,GAAKE,GAAUzB,EAAAuB,GAA7B,CAAA,OACAG,GAAQC,IACRC,GAA6BtC,GAA4BuC,GAEzDC,aAAEA,GAAYC,WAAEA,IAAeC,EAAqB,KAE1D,OACEC,EAACC,iBACCC,IAAKT,GAAMU,UACXC,OAAO,SACPxD,KAAMA,EACNyD,QAAS,IAAMxD,GAAQ,GACvByD,OAAQ,IAAMzD,GAAQ,GACtB0D,oBAAkB,EAClBC,WAAY,CACVC,aAAa,GACd,cACW,cACZ3D,yCACKA,GAAS,CACZ4D,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACA9D,eAAAA,EAAW4D,OAAK,CACnBzC,kBACE4C,UAAW,OACXC,oBAAqB,OACrBC,qBAAsB,OACtBlD,UAAW,GAAGA,MACqB,QAAhCmD,EAAClE,eAAAA,EAAW4D,aAAoB,IAAAM,OAAA,EAAAA,EAAE/C,QAI3CvB,IAAKA,GACDoB,EAAI,CAAAnB,SAAA,EAENY,GAASL,GAAeH,IACxBiD,EAACiB,EAAGN,OAAAC,OAAA,CAAC3C,GAAE0C,OAAAC,OAAA,CAAIM,GAAI,GAAMhD,GAAQ,cAAgB,sBAAyBC,aACnEpB,GACCoE,EAACF,iBACChD,GAAE0C,OAAAC,OAAA,CACAQ,SAAU,WACVC,QAAS,OACTC,cAAe,MACfC,eAAgB,SAChBC,WAAY,UACT7C,IAEDC,EAAiB,CAAAjC,SAErBwE,EAACF,EAAGN,OAAAC,OAAA,CAAA,cACU,qBACZ3C,kBACEwD,MAAO,OACPC,OAAQ,MACRC,gBAAiB,kBACjBC,GAAI,EACJC,GAAI,IACJC,aAAc,OACXhD,IAEDC,QAIRxB,GAAUL,IAAgBH,IAC1BiD,EAACiB,EAAGN,OAAAC,OAAA,CACF3C,kBACEoD,QAAS,OACTE,eAAgBhE,EAAQ,gBAAkB,WAC1CiE,WAAY,aACZO,IAAK,EACLC,GAAInC,IAAgB9C,EAAS,EAAI,GAC9BsB,IAEDC,aAEHf,GACC4D,EAACc,+BACa,oBACZC,QAAQ,KACRC,UAAU,KACVlE,GAAE0C,OAAAC,OAAA,CACAgB,GAAI7E,EAAS,EAAI,EACjB8E,GAAIhC,GAAe,EAAI,GACpBrB,IAEDC,EAAS,CAAA9B,SAEZY,KAGJL,IAAgBH,GACfoE,EAACiB,EAAUzB,OAAAC,OAAA,CAAA,cACG,0BACZyB,KAAK,SACLC,QAAS,IAAMzF,GAAQ,GAAM,aAClB,qBACXoB,kBACEsE,GAAI,MACJC,GAAI,QACDvD,IAEDC,EAAe,CAAAvC,SAEnBwE,EAACxB,GAA0BgB,OAAAC,OAAA,CAAA,EAAKxD,eAO5C+D,EAACF,EAAGN,OAAAC,OAAA,CAAA,cACU,sBACZlE,IAAKoD,GACL7B,GAAE0C,OAAAC,OAAA,CACA6B,SAAU,OACVC,UAAW7C,GAAe,EAAI,EAC9B8C,aAAc9C,IAAgBvC,EAAa,EAAI,EAC/CsF,YAAa,oBACbC,EAAG,EAEH,kBAAmB,CACjBC,QAAS,OACTjC,UAAWkC,EAAsBtD,IAAO,KAEvCL,IAEDC,GAAW,CAAA1C,SAEdA,KAEFW,GACC6D,EAACF,EAAGN,OAAAC,OAAA,CAAA,cACU,qBACZ3C,GAAE0C,OAAAC,OAAA,CACAM,GAAI,EACJc,GAAI,EACJgB,GAAI,EACJ3B,QAAS,OACTE,eAAgB,aAChBC,WAAY,UACZF,cAAe,SACfS,IAAK,QACFxC,KAEDC,GAAU,CAAA7C,SAEbW"}

package/components/bottomSheet/index.d.ts

@@ -1 +1 @@
-export * from './bottomSheet';
+export * from './BottomSheet';

package/components/bypassBlock/BypassBlock.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{forwardRef as t,useState as n,useEffect as i}from"react";import{createPortal as r}from"react-dom";import{useTheme as c,ButtonBase as l}from"@mui/material";import{getFocusRingStyle as a}from"../focusring/focusring.js";const s=t((t,n)=>{var{children:i,className:r,href:s="#",sx:p,replace:u=!1,active:m=!1,onClick:f,portalProps:b}=t,g=e(t,["children","className","href","sx","replace","active","onClick","portalProps"]);const v=c();return o(d,Object.assign({disablePortal:!0},b,{children:o(l,Object.assign({tabIndex:0,component:"a",href:s,onClick:e=>{var o;null==f||f(e),u&&(e.preventDefault(),null===(o=null===document||void 0===document?void 0:document.getElementById(null==s?void 0:s.replace("#","")))||void 0===o||o.scrollIntoView(!0))},className:m?["Mui-focusVisible",r].filter(Boolean).join(" "):r,sx:Object.assign(Object.assign(Object.assign({position:"absolute",zIndex:`${v.zIndex.tooltip+100}`,top:"10px",width:"1px",height:"1px",margin:"-1px",clip:"rect(0 0 0 0)",overflow:"hidden",padding:"0",border:"none",whiteSpace:"nowrap",backgroundColor:"onSurface.os900",color:"onSurface.os0",borderRadius:"4px"},v.typography.body),{"&.Mui-focusVisible":Object.assign(Object.assign({},a(v,!1)),{padding:"8px 24px",width:"auto",height:"auto",overflow:"visible",clip:"unset",margin:"0",left:"10px"})}),p),ref:n},g,{children:i}))}))});function d({children:e,container:o,disablePortal:t}){const[c]=n(()=>null===document||void 0===document?void 0:document.createElement("div"));return i(()=>{const e=("function"==typeof o?o():o)||(null===document||void 0===document?void 0:document.body);return e&&c&&!t&&e.prepend(c),()=>{c&&!t&&c.remove()}},[]),c&&!t?r(e,c):e}export{s as BypassBlock};
+//# sourceMappingURL=BypassBlock.js.map

package/components/bypassBlock/BypassBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BypassBlock.js","sources":["../../../src/components/bypassBlock/BypassBlock.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ButtonBase, ButtonBaseProps, PortalProps, useTheme } from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BypassBlockProps extends ButtonBaseProps<'a'> {\n  /**\n   * Button label, e.g. 'Skip to content'\n   */\n  children: ReactNode;\n  /**\n   * ID of content section, e.g. '#content'\n   * @default '#'\n   */\n  href: string;\n  /**\n   * Prevent push of new link into history stack\n   * @default false\n   */\n  replace?: boolean;\n  /**\n   * Programmatically control if button should be visible\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * props applied to portal moving the button at the top\n   */\n  portalProps?: PortalProps;\n}\n\n/**\n * Accessibility button to quickly scroll into the content area.\n *  - first focusable element on the page\n *  - only visible when focused\n */\nexport const BypassBlock: React.FC<BypassBlockProps> = forwardRef(\n  ({ children, className, href = '#', sx, replace = false, active = false, onClick, portalProps, ...rest }, ref) => {\n    const theme = useTheme();\n\n    return (\n      <PrependPortal disablePortal={true} {...portalProps}>\n        <ButtonBase\n          tabIndex={0}\n          component=\"a\"\n          href={href}\n          onClick={(e) => {\n            onClick?.(e);\n            if (replace) {\n              // prevent push of # into url\n              e.preventDefault();\n              // use js to scroll into element\n              document?.getElementById(href?.replace('#', ''))?.scrollIntoView(true);\n            }\n          }}\n          className={active ? [`Mui-focusVisible`, className].filter(Boolean).join(' ') : className}\n          sx={{\n            position: 'absolute',\n            zIndex: `${theme.zIndex.tooltip + 100}`,\n            top: '10px',\n            // hidden by default, still have to be at least 1px for the Safari focus\n            width: '1px',\n            height: '1px',\n            margin: '-1px',\n            clip: 'rect(0 0 0 0)',\n            overflow: 'hidden',\n            padding: '0',\n            border: 'none',\n            whiteSpace: 'nowrap',\n            // style\n            backgroundColor: 'onSurface.os900',\n            color: 'onSurface.os0',\n            borderRadius: '4px',\n            ...theme.typography.body,\n            // focus\n            '&.Mui-focusVisible': {\n              ...getFocusRingStyle(theme, false),\n              padding: '8px 24px',\n              width: 'auto',\n              height: 'auto',\n              overflow: 'visible',\n              clip: 'unset',\n              margin: '0',\n              left: '10px',\n            },\n            ...sx,\n          }}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </ButtonBase>\n      </PrependPortal>\n    );\n  },\n);\n\n/**\n * Portal component that create extra div prepended instead of appended to the container.\n * This way element can be placed at the begging of container instead of at the end.\n */\nfunction PrependPortal({ children, container, disablePortal }: PortalProps) {\n  const [portalContainer] = useState(() => document?.createElement('div'));\n\n  useEffect(() => {\n    // obtain proper container for placement (default body tag)\n    const body = (typeof container === 'function' ? container() : container) || document?.body;\n\n    // prepend (add into begging) extra div into body\n    body && portalContainer && !disablePortal && body.prepend(portalContainer);\n    return () => {\n      // remove div with unmount\n      portalContainer && !disablePortal && portalContainer.remove();\n    };\n  }, []);\n\n  // utilize createPortal to place children into container at the begging of body\n  return portalContainer && !disablePortal ? createPortal(children, portalContainer) : children;\n}\n"],"names":["BypassBlock","forwardRef","_a","ref","children","className","href","sx","replace","active","onClick","portalProps","rest","__rest","theme","useTheme","_jsx","PrependPortal","Object","assign","disablePortal","ButtonBase","tabIndex","component","e","preventDefault","document","getElementById","scrollIntoView","filter","Boolean","join","position","zIndex","tooltip","top","width","height","margin","clip","overflow","padding","border","whiteSpace","backgroundColor","color","borderRadius","typography","body","getFocusRingStyle","left","container","portalContainer","useState","createElement","useEffect","prepend","remove","createPortal"],"mappings":"uSAoCO,MAAMA,EAA0CC,EACrD,CAACC,EAAyGC,SAAzGC,SAAEA,EAAQC,UAAEA,EAASC,KAAEA,EAAO,IAAGC,GAAEA,EAAEC,QAAEA,GAAU,EAAKC,OAAEA,GAAS,EAAKC,QAAEA,EAAOC,YAAEA,GAAWT,EAAKU,EAAIC,EAAAX,EAArG,CAAA,WAAA,YAAA,OAAA,KAAA,UAAA,SAAA,UAAA,gBACC,MAAMY,EAAQC,IAEd,OACEC,EAACC,EAAaC,OAAAC,OAAA,CAACC,eAAe,GAAUT,EAAW,CAAAP,SACjDY,EAACK,iBACCC,SAAU,EACVC,UAAU,IACVjB,KAAMA,EACNI,QAAUc,UACRd,SAAAA,EAAUc,GACNhB,IAEFgB,EAAEC,iBAE8C,QAAhDvB,EAAQ,OAARwB,eAAQ,IAARA,cAAQ,EAARA,SAAUC,eAAerB,aAAI,EAAJA,EAAME,QAAQ,IAAK,YAAI,IAAAN,GAAAA,EAAE0B,gBAAe,KAGrEvB,UAAWI,EAAS,CAAC,mBAAoBJ,GAAWwB,OAAOC,SAASC,KAAK,KAAO1B,EAChFE,GAAEW,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACAa,SAAU,WACVC,OAAQ,GAAGnB,EAAMmB,OAAOC,QAAU,MAClCC,IAAK,OAELC,MAAO,MACPC,OAAQ,MACRC,OAAQ,OACRC,KAAM,gBACNC,SAAU,SACVC,QAAS,IACTC,OAAQ,OACRC,WAAY,SAEZC,gBAAiB,kBACjBC,MAAO,gBACPC,aAAc,OACXhC,EAAMiC,WAAWC,MAAI,CAExB,qBAAoB9B,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACf8B,EAAkBnC,GAAO,IAAM,CAClC2B,QAAS,WACTL,MAAO,OACPC,OAAQ,OACRG,SAAU,UACVD,KAAM,QACND,OAAQ,IACRY,KAAM,WAEL3C,GAELJ,IAAKA,GACDS,YAEHR,UAWX,SAASa,GAAcb,SAAEA,EAAQ+C,UAAEA,EAAS/B,cAAEA,IAC5C,MAAOgC,GAAmBC,EAAS,WAAM3B,eAAQ,IAARA,cAAQ,EAARA,SAAU4B,cAAc,QAejE,OAbAC,EAAU,KAER,MAAMP,GAA6B,mBAAdG,EAA2BA,IAAcA,KAAsB,OAARzB,eAAQ,IAARA,cAAQ,EAARA,SAAUsB,MAItF,OADAA,GAAQI,IAAoBhC,GAAiB4B,EAAKQ,QAAQJ,GACnD,KAELA,IAAoBhC,GAAiBgC,EAAgBK,WAEtD,IAGIL,IAAoBhC,EAAgBsC,EAAatD,EAAUgD,GAAmBhD,CACvF"}

package/components/bypassBlock/index.d.ts

@@ -1 +1 @@
-export * from './bypassBlock';
+export * from './BypassBlock';

package/components/carousel/Autoplay.js

@@ -0,0 +1,2 @@
+import{__rest as o}from"tslib";import{jsx as a}from"react/jsx-runtime";import{Box as t}from"@mui/material";import{useCarousel as i}from"./hooks.js";import{useSwiper as r}from"swiper/react";import{useState as s,useMemo as l,useEffect as n}from"react";import{PlayPauseButton as u}from"../playPauseButton/PlayPauseButton.js";import{Spinner as e}from"../progress/Spinner.js";const p=i=>{var{carousel:u,sx:p,spinnerProps:d,position:m="outside"}=i,c=o(i,["carousel","sx","spinnerProps","position"]);const[y,v]=s(0),f=r(),g=u||f,b=l(()=>"inside"===m?Object.assign({position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0",m:2},p):p,[m,JSON.stringify(p)]);return n(()=>{(null==g?void 0:g.autoplay)&&g.on("autoplayTimeLeft",(o,a,t)=>{v(o.autoplay.paused?0:Math.round(100-100*t))})},[!!g]),a(t,Object.assign({sx:Object.assign({position:"relative",display:"flex",m:2},b),"data-testid":"CarouselAutoplayProgress"},c,{children:a(e,Object.assign({value:y},d))}))};function d(t){var r,l,{carousel:e}=t,p=o(t,["carousel"]);const d=i(),m=e||d,[c,y]=s(0);return n(()=>{(null==m?void 0:m.autoplay)&&m.on("autoplayTimeLeft",(o,a,t)=>{y(o.autoplay.paused?0:Math.round(100-100*t))})},[!!m]),a(u,Object.assign({"aria-label":(null===(r=null==m?void 0:m.autoplay)||void 0===r?void 0:r.running)?"Pause carousel autoplay":"Play carousel autoplay",isPlaying:!!(null===(l=null==m?void 0:m.autoplay)||void 0===l?void 0:l.running),progress:c,onClick:()=>{var o,a;null===(o=null==m?void 0:m.autoplay)||void 0===o||o[(null===(a=null==m?void 0:m.autoplay)||void 0===a?void 0:a.running)?"stop":"start"]()}},p))}export{d as CarouselAutoplayIconButton,p as CarouselAutoplayProgress};
+//# sourceMappingURL=Autoplay.js.map

package/components/carousel/Autoplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autoplay.js","sources":["../../../src/components/carousel/Autoplay.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState, useMemo } from 'react';\nimport { PlayPauseButton, PlayPauseButtonProps } from '@/src/components/playPauseButton/PlayPauseButton';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\n\nexport interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' | 'position'> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Progress Props\n   */\n  spinnerProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Append style to wrapper box to change position of component\n   */\n  position?: 'outside' | 'inside';\n}\n\n/**\n * Spinner with autoplay progress value\n */\nexport const CarouselAutoplayProgress = ({\n  carousel: carouselProp,\n  sx: rawSx,\n  spinnerProps,\n  position = 'outside',\n  ...rest\n}: CarouselAutoplayProgressProps) => {\n  const [value, setValue] = useState<number>(0);\n  const carouselHook = useSwiper();\n  const carousel = carouselProp || carouselHook;\n\n  // position extra styling applied to wrapper\n  const sx = useMemo<CSSObject | BoxProps['sx']>(() => {\n    if (position === 'inside') {\n      return {\n        position: 'absolute',\n        zIndex: '90',\n        bottom: '0',\n        left: '0',\n        right: '0',\n        m: 2,\n        ...rawSx,\n      };\n    } else {\n      return rawSx;\n    }\n  }, [position, JSON.stringify(rawSx)]);\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel?.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <Box sx={{ position: 'relative', display: 'flex', m: 2, ...sx }} data-testid=\"CarouselAutoplayProgress\" {...rest}>\n      <Spinner value={value} {...spinnerProps} />\n    </Box>\n  );\n};\n\nexport interface CarouselAutoplayIconButtonProps extends Partial<PlayPauseButtonProps> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n}\n\n/**\n * IconButton controlling play/paused state of the autoplay\n */\nexport function CarouselAutoplayIconButton({ carousel: carouselProp, ...rest }: CarouselAutoplayIconButtonProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const [value, setValue] = useState<number>(0);\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel?.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <PlayPauseButton\n      aria-label={carousel?.autoplay?.running ? 'Pause carousel autoplay' : 'Play carousel autoplay'}\n      isPlaying={!!carousel?.autoplay?.running}\n      progress={value}\n      onClick={() => {\n        carousel?.autoplay?.[carousel?.autoplay?.running ? 'stop' : 'start']();\n      }}\n      {...rest}\n    />\n  );\n}\n"],"names":["CarouselAutoplayProgress","_a","carousel","carouselProp","sx","rawSx","spinnerProps","position","rest","__rest","value","setValue","useState","carouselHook","useSwiper","useMemo","Object","assign","zIndex","bottom","left","right","m","JSON","stringify","useEffect","autoplay","on","instance","_timeLeft","percentage","paused","Math","round","_jsx","Box","display","children","Spinner","CarouselAutoplayIconButton","useCarousel","PlayPauseButton","_b","running","isPlaying","_c","progress","onClick"],"mappings":"mXA0BO,MAAMA,EAA4BC,IAAA,IACvCC,SAAUC,EACVC,GAAIC,EAAKC,aACTA,EAAYC,SACZA,EAAW,WAASN,EACjBO,EAAIC,EAAAR,EALgC,6CAOvC,MAAOS,EAAOC,GAAYC,EAAiB,GACrCC,EAAeC,IACfZ,EAAWC,GAAgBU,EAG3BT,EAAKW,EAAoC,IAC5B,WAAbR,EACFS,OAAAC,OAAA,CACEV,SAAU,WACVW,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPC,EAAG,GACAjB,GAGEA,EAER,CAACE,EAAUgB,KAAKC,UAAUnB,KAW7B,OATAoB,EAAU,MAEJvB,aAAQ,EAARA,EAAUwB,WACZxB,EAASyB,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDnB,EAASiB,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAG5B,IAGJgC,EAACC,EAAGnB,OAAAC,OAAA,CAACb,GAAEY,OAAAC,OAAA,CAAIV,SAAU,WAAY6B,QAAS,OAAQd,EAAG,GAAMlB,iBAAkB,4BAA+BI,EAAI,CAAA6B,SAC9GH,EAACI,EAAOtB,OAAAC,OAAA,CAACP,MAAOA,GAAWJ,QAe3B,SAAUiC,EAA2BtC,YAAEC,SAAUC,GAAYF,EAAKO,EAAIC,EAAAR,EAAjC,cACzC,MAAMY,EAAe2B,IACftC,EAAWC,GAAgBU,GAC1BH,EAAOC,GAAYC,EAAiB,GAW3C,OATAa,EAAU,MAEJvB,aAAQ,EAARA,EAAUwB,WACZxB,EAASyB,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDnB,EAASiB,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAG5B,IAGJgC,EAACO,EAAezB,OAAAC,OAAA,CAAA,cACgB,QAAlByB,EAAAxC,aAAQ,EAARA,EAAUwB,gBAAQ,IAAAgB,OAAA,EAAAA,EAAEC,SAAU,0BAA4B,yBACtEC,qBAAaC,EAAA3C,aAAQ,EAARA,EAAUwB,+BAAUiB,SACjCG,SAAUpC,EACVqC,QAAS,aACW,QAAlB9C,EAAAC,aAAQ,EAARA,EAAUwB,gBAAQ,IAAAzB,GAAAA,GAAqB,QAAlByC,EAAAxC,aAAQ,EAARA,EAAUwB,gBAAQ,IAAAgB,OAAA,EAAAA,EAAEC,SAAU,OAAS,aAE1DnC,GAGV"}

package/components/carousel/Carousel.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"tslib";import{jsx as i}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as r}from"@mui/material";import{Swiper as a}from"swiper/react";import{Keyboard as n,EffectFade as p,Autoplay as o,Parallax as s}from"swiper/modules";const l=t((t,l)=>{var{children:c,sx:d,onInit:m,effect:f,autoplay:w,parallax:h,peekDistance:u=100,peekSpeed:x=150}=t,b=e(t,["children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed"]);return i(r,Object.assign({component:a,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[n,..."fade"===f?[p]:[],...w?[o]:[],...h?[s]:[]],parallax:h,effect:f,autoplay:w,ref:l},b,{onSwiper:m,"data-peekspeed":x,sx:Object.assign(Object.assign(Object.assign({display:"block",ml:"auto",mr:"auto",p:"0",maxWidth:"100%",position:"relative",zIndex:"50",overflow:"hidden",listStyle:"none","&.swiper-horizontal":{touchAction:"pan-y"},"&.swiper-vertical":{touchAction:"pan-x","& > .swiper-wrapper":{flexDirection:"column"}},"&.swiper-autoheight":{height:"auto","& > .swiper-wrapper":{alignItems:"flex-start",transitionProperty:"transform, height"}},"& .swiper-wrapper":{position:"relative",width:"100%",height:"100%",zIndex:"50",display:"flex",transitionProperty:"transform",transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)",boxSizing:"content-box",transform:"translate3d(0px, 0, 0)"}},"fade"!==f&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${x}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"":"-"}${u}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"-":""}${u}px, 0, 0)`}}),{".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}}),d),children:c}))});export{l as Carousel};
+//# sourceMappingURL=Carousel.js.map

package/components/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { Swiper, SwiperProps } from 'swiper/react';\nimport { Keyboard, EffectFade, Autoplay, Parallax } from 'swiper/modules';\n\nexport interface CarouselProps\n  // `cssMode` not supported\n  // instead of `navigation` use <CarouselNavigation />\n  // instead of `pagination` use <CarouselPagination />\n  // instead of `onSwiper` use `onInit`\n  extends Omit<SwiperProps, 'children' | 'cssMode' | 'navigation' | 'pagination' | 'onSwiper'>,\n    Omit<BoxProps, keyof Omit<SwiperProps, 'children'> | 'component'> {\n  /**\n   * Callback that receives Swiper instance\n   */\n  onInit?: SwiperProps['onSwiper'];\n  /**\n   * Travelled distance in px for peek effect\n   * @default 100\n   */\n  peekDistance?: number;\n  /**\n   * Speed of peek effect\n   * @default 150 (half of default Carousel's speed)\n   */\n  peekSpeed?: number;\n}\n\n/**\n * Modern mobile friendly carousel for slideshows, built with Swiper\n */\nexport const Carousel: React.FC<CarouselProps> = forwardRef(\n  ({ children, sx, onInit, effect, autoplay, parallax, peekDistance = 100, peekSpeed = 150, ...rest }, ref) => {\n    return (\n      <Box\n        component={Swiper}\n        spaceBetween={0}\n        autoHeight\n        loop\n        keyboard={{\n          enabled: true,\n        }}\n        modules={[\n          Keyboard,\n          ...(effect === 'fade' ? [EffectFade] : []),\n          ...(autoplay ? [Autoplay] : []),\n          ...(parallax ? [Parallax] : []),\n        ]}\n        parallax={parallax}\n        effect={effect}\n        autoplay={autoplay}\n        ref={ref}\n        {...rest}\n        onSwiper={onInit}\n        data-peekspeed={peekSpeed}\n        sx={{\n          // generic root styling, based on the `import 'swiper/css'`\n          display: 'block',\n          ml: 'auto',\n          mr: 'auto',\n          p: '0',\n          maxWidth: '100%',\n          // ensure correct position\n          position: 'relative',\n          zIndex: '50',\n          overflow: 'hidden',\n          // support for ul-type\n          listStyle: 'none',\n          // variants\n          '&.swiper-horizontal': {\n            touchAction: 'pan-y',\n          },\n          '&.swiper-vertical': {\n            touchAction: 'pan-x',\n            '& > .swiper-wrapper': {\n              flexDirection: 'column',\n            },\n          },\n          '&.swiper-autoheight': {\n            height: 'auto',\n            '& > .swiper-wrapper': {\n              alignItems: 'flex-start',\n              transitionProperty: 'transform, height',\n            },\n          },\n          // wrapper of all slides\n          '& .swiper-wrapper': {\n            position: 'relative',\n            width: '100%',\n            height: '100%',\n            zIndex: '50',\n            display: 'flex',\n            transitionProperty: 'transform',\n            transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n            boxSizing: 'content-box',\n            transform: 'translate3d(0px, 0, 0)',\n          },\n          // peek effect\n          ...(effect !== 'fade' && {\n            '&.peeking .swiper-wrapper > .swiper-slide': {\n              transitionProperty: 'transform',\n              transitionDuration: `${peekSpeed}ms`,\n              transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n            },\n            '&.peek-next .swiper-wrapper > .swiper-slide': {\n              transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '' : '-'}${peekDistance}px, 0, 0)`,\n            },\n            '&.peek-prev .swiper-wrapper > .swiper-slide': {\n              transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '-' : ''}${peekDistance}px, 0, 0)`,\n            },\n          }),\n          // swiper internal\n          '.swiper-slide-invisible-blank': {\n            visibility: 'hidden',\n          },\n          '.swiper-backface-hidden .swiper-slide': {\n            transform: 'translateZ(0)',\n            WebkitBackfaceVisibility: 'hidden',\n            backfaceVisibility: 'hidden',\n          },\n          // does not include CSS Mode, 3D Shadows, lazy loading\n          ...sx,\n        }}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\n"],"names":["Carousel","forwardRef","_a","ref","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","__rest","_jsx","Box","Object","assign","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","Keyboard","EffectFade","Autoplay","Parallax","onSwiper","display","ml","mr","p","maxWidth","position","zIndex","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","theme","direction","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"0QA+BO,MAAMA,EAAoCC,EAC/C,CAACC,EAAoGC,SAApGC,SAAEA,EAAQC,GAAEA,EAAEC,OAAEA,EAAMC,OAAEA,EAAMC,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,EAAe,IAAGC,UAAEA,EAAY,OAAQC,EAAIC,EAAAX,EAAhG,CAAA,WAAA,KAAA,SAAA,SAAA,WAAA,WAAA,eAAA,cACC,OACEY,EAACC,EAAGC,OAAAC,OAAA,CACFC,UAAWC,EACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,KACe,SAAXnB,EAAoB,CAACoB,GAAc,MACnCnB,EAAW,CAACoB,GAAY,MACxBnB,EAAW,CAACoB,GAAY,IAE9BpB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVL,IAAKA,GACDS,EAAI,CACRkB,SAAUxB,EAAM,iBACAK,EAChBN,GAAEW,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAEAc,QAAS,QACTC,GAAI,OACJC,GAAI,OACJC,EAAG,IACHC,SAAU,OAEVC,SAAU,WACVC,OAAQ,KACRC,SAAU,SAEVC,UAAW,OAEX,sBAAuB,CACrBC,YAAa,SAEf,oBAAqB,CACnBA,YAAa,QACb,sBAAuB,CACrBC,cAAe,WAGnB,sBAAuB,CACrBC,OAAQ,OACR,sBAAuB,CACrBC,WAAY,aACZC,mBAAoB,sBAIxB,oBAAqB,CACnBR,SAAU,WACVS,MAAO,OACPH,OAAQ,OACRL,OAAQ,KACRN,QAAS,OACTa,mBAAoB,YACpBE,yBAA0B,4DAC1BC,UAAW,cACXC,UAAW,2BAGE,SAAXzC,GAAqB,CACvB,4CAA6C,CAC3CqC,mBAAoB,YACpBK,mBAAoB,GAAGtC,MACvBmC,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYE,GAAU,eAAmC,QAApBA,EAAMC,UAAsB,GAAK,MAAMzC,cAE9E,8CAA+C,CAC7CsC,UAAYE,GAAU,eAAmC,QAApBA,EAAMC,UAAsB,IAAM,KAAKzC,gBAE9E,CAEF,gCAAiC,CAC/B0C,WAAY,UAEd,wCAAyC,CACvCJ,UAAW,gBACXK,yBAA0B,SAC1BC,mBAAoB,YAGnBjD,GAAED,SAGNA"}

package/components/carousel/Navigation.d.ts

@@ -0,0 +1,57 @@
+import { ComponentType } from 'react';
+import { IconButtonProps, SvgIconProps } from '@mui/material';
+import type { Swiper as CarouselInstance } from 'swiper';
+export interface CarouselNavigationProps {
+    /**
+     * Optional Carousel instance from useCarouselInstance hook
+     */
+    carousel?: CarouselInstance;
+    /**
+     * Enable/disable peek effect on hover
+     * @default: false
+     */
+    peekEffect?: boolean;
+    /**
+     * Previous Slide IconButton
+     */
+    prevButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Previous icon props
+     */
+    prevIconProps?: SvgIconProps;
+    /**
+     * Previous icon node
+     */
+    PrevIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Next Slide IconButton
+     */
+    nextButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Previous icon props
+     */
+    nextIconProps?: SvgIconProps;
+    /**
+     * Next icon node
+     */
+    NextIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Replaces Chevrons with Arrows
+     * @default true
+     */
+    arrows?: boolean;
+    /**
+     * Enable if placing on a plain background (not on top of an image/video)
+     * @default false
+     */
+    onBackground?: boolean;
+    /**
+     * Hide navigation buttons on case there are not enough slides for sliding
+     * @default false
+     */
+    autoHideNavigation?: boolean;
+}
+/**
+ * Left & Right navigation arrows
+ */
+export declare function CarouselNavigation({ carousel: carouselProp, peekEffect: propPeekEffect, prevButtonProps, prevIconProps, PrevIconComponent, nextButtonProps, nextIconProps, NextIconComponent, arrows, onBackground, autoHideNavigation, }: CarouselNavigationProps): import("react/jsx-runtime").JSX.Element;

package/components/carousel/Navigation.js

@@ -0,0 +1,2 @@
+import{__rest as r}from"tslib";import{jsxs as o,Fragment as e,jsx as n}from"react/jsx-runtime";import{useMemo as s}from"react";import{useCarousel as t,useCarouselPeekEffect as i}from"./hooks.js";import{useTheme as a,useMediaQuery as c,IconButton as l}from"@mui/material";import{ChevronLeftIcon as p}from"../icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as d}from"../icon/stroke/ChevronRightIcon.js";import{ArrowLeftIcon as m}from"../icon/stroke/ArrowLeftIcon.js";import{ArrowRightIcon as x}from"../icon/stroke/ArrowRightIcon.js";import{getInteractiveStyle as u}from"../../materialui/button/interactive.js";function b({carousel:b,peekEffect:g=!1,prevButtonProps:f,prevIconProps:j,PrevIconComponent:v,nextButtonProps:k,nextIconProps:O,NextIconComponent:I,arrows:h=!0,onBackground:C=!1,autoHideNavigation:P=!1}){const y=t(),M=b||y,E="fade"!==(null==M?void 0:M.originalParams.effect)&&g,L=a(),w=c(L.breakpoints.up("md")),B=f||{},{sx:N}=B,S=r(B,["sx"]),z=k||{},{sx:A}=z,R=r(z,["sx"]),[H,q]=i(M),D=v||(h?m:p),F=I||(h?x:d),G=s(()=>Object.assign(Object.assign({position:"absolute",zIndex:"100",top:"50%",width:{xs:"32px",md:"40px",xl:"44px"},height:{xs:"32px",md:"40px",xl:"44px"},mt:{xs:"-16px",md:"-20px",xl:"-22px"},"& .MuiSvgIcon-root":{fontSize:{xs:"17px",xl:"20px"}}},u({color:"text.primary",borderColor:C?"transparent.transparent":"onSurface.os100",backgroundColor:C?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"})),{"&.Mui-disabled":{color:"disabled.tertiary",borderColor:C?"transparent.transparent":"disabled.secondary",backgroundColor:C?"transparent.transparent":"disabled.secondary"}}),[]);return P&&(null==M?void 0:M.isLocked)?null:o(e,{children:[n(l,Object.assign({disabled:M&&!M.originalParams.loop&&M.isBeginning,onClick:()=>{null==M||M.slidePrev(),E&&H&&q("reset")},onMouseEnter:()=>w&&E&&q("prev"),onMouseLeave:()=>E&&H&&q("reset"),sx:Object.assign(Object.assign(Object.assign({},G),{insetInlineStart:"16px"}),N),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium"},S,{children:"rtl"===L.direction?n(F,Object.assign({},j)):n(D,Object.assign({},j))})),n(l,Object.assign({disabled:M&&!M.originalParams.loop&&M.isEnd,onClick:()=>{null==M||M.slideNext(),E&&H&&q("reset")},onMouseEnter:()=>w&&E&&q("next"),onMouseLeave:()=>E&&H&&q("reset"),sx:Object.assign(Object.assign(Object.assign({},G),{insetInlineEnd:"16px"}),A),"aria-label":"Next slide","aria-controls":"carousel",color:"surface"},R,{children:"rtl"===L.direction?n(D,Object.assign({},O)):n(F,Object.assign({},O))}))]})}export{b as CarouselNavigation};
+//# sourceMappingURL=Navigation.js.map

package/components/carousel/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface CarouselNavigationProps {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Enable/disable peek effect on hover\n   * @default: false\n   */\n  peekEffect?: boolean;\n  /**\n   * Previous Slide IconButton\n   */\n  prevButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Previous icon props\n   */\n  prevIconProps?: SvgIconProps;\n  /**\n   * Previous icon node\n   */\n  PrevIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Next Slide IconButton\n   */\n  nextButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Previous icon props\n   */\n  nextIconProps?: SvgIconProps;\n  /**\n   * Next icon node\n   */\n  NextIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Replaces Chevrons with Arrows\n   * @default true\n   */\n  arrows?: boolean;\n  /**\n   * Enable if placing on a plain background (not on top of an image/video)\n   * @default false\n   */\n  onBackground?: boolean;\n  /**\n   * Hide navigation buttons on case there are not enough slides for sliding\n   * @default false\n   */\n  autoHideNavigation?: boolean;\n}\n\n/**\n * Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n  carousel: carouselProp,\n  peekEffect: propPeekEffect = false,\n  prevButtonProps,\n  prevIconProps,\n  PrevIconComponent,\n  nextButtonProps,\n  nextIconProps,\n  NextIconComponent,\n  arrows = true,\n  onBackground = false,\n  autoHideNavigation = false,\n}: CarouselNavigationProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const peekEffect = carousel?.originalParams.effect !== 'fade' && propPeekEffect;\n  const theme = useTheme();\n  const upMD = useMediaQuery(theme.breakpoints.up('md'));\n  const { sx: prevSx, ...restPrev } = prevButtonProps || {};\n  const { sx: nextSx, ...restNext } = nextButtonProps || {};\n  const [peek, setPeek] = useCarouselPeekEffect(carousel);\n  const PrevIcon = PrevIconComponent || (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n  const NextIcon = NextIconComponent || (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n  // shared style between buttons\n  const sharedSx = useMemo(\n    () => ({\n      // absolute inside the carousel position\n      position: 'absolute',\n      zIndex: '100',\n      top: '50%',\n      // responsive\n      width: { xs: '32px', md: '40px', xl: '44px' },\n      height: { xs: '32px', md: '40px', xl: '44px' },\n      // manual v-align, half the icon size\n      mt: { xs: '-16px', md: '-20px', xl: '-22px' },\n      '& .MuiSvgIcon-root': {\n        fontSize: { xs: '17px', xl: '20px' },\n      },\n      // highlight border\n      ...getInteractiveStyle(\n        {\n          color: 'text.primary',\n          borderColor: onBackground ? 'transparent.transparent' : 'onSurface.os100',\n          backgroundColor: onBackground ? 'transparent.transparent' : 'surface.primary',\n        },\n        {\n          backgroundColor: 'surface.secondary',\n        },\n      ),\n      // disabled state\n      '&.Mui-disabled': {\n        color: 'disabled.tertiary',\n        borderColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n        backgroundColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n      },\n    }),\n    [],\n  );\n\n  // hide navigation when not needed\n  if (autoHideNavigation && carousel?.isLocked) {\n    return null;\n  }\n  return (\n    <>\n      <IconButton\n        disabled={carousel && !carousel.originalParams.loop && carousel.isBeginning}\n        onClick={() => {\n          carousel?.slidePrev();\n          peekEffect && peek && setPeek('reset');\n        }}\n        onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n        onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n        sx={{\n          ...sharedSx,\n          insetInlineStart: '16px',\n          ...prevSx,\n        }}\n        aria-label=\"Previous slide\"\n        aria-controls=\"carousel\"\n        color=\"surface\"\n        size=\"medium\"\n        {...restPrev}\n      >\n        {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n      </IconButton>\n      <IconButton\n        disabled={carousel && !carousel.originalParams.loop && carousel.isEnd}\n        onClick={() => {\n          carousel?.slideNext();\n          peekEffect && peek && setPeek('reset');\n        }}\n        onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n        onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n        sx={{\n          ...sharedSx,\n          insetInlineEnd: '16px',\n          ...nextSx,\n        }}\n        aria-label=\"Next slide\"\n        aria-controls=\"carousel\"\n        color=\"surface\"\n        {...restNext}\n      >\n        {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n      </IconButton>\n    </>\n  );\n}\n"],"names":["CarouselNavigation","carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","originalParams","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","_a","sx","prevSx","restPrev","__rest","_b","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","Object","assign","position","zIndex","top","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"inBAgEgBA,GACdC,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,IACfd,EAAWC,GAAgBY,EAC3BX,EAAiD,UAApCF,aAAQ,EAARA,EAAUe,eAAeC,SAAqBb,EAC3Dc,EAAQC,IACRC,EAAOC,EAAcH,EAAMI,YAAYC,GAAG,OAC1CC,EAA8BnB,GAAmB,IAA/CoB,GAAIC,KAAWC,EAAQC,EAAAJ,EAAzB,CAAA,OACAK,EAA8BrB,GAAmB,IAA/CiB,GAAIK,KAAWC,EAAQH,EAAAC,EAAzB,CAAA,QACCG,EAAMC,GAAWC,EAAsBjC,GACxCkC,EAAW5B,IAAsBI,EAASyB,EAAgBC,GAC1DC,EAAW5B,IAAsBC,EAAS4B,EAAiBC,GAG3DC,EAAWC,EACf,IAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAEJC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,UAG3BI,EACD,CACEC,MAAO,eACPC,YAAa7C,EAAe,0BAA4B,kBACxD8C,gBAAiB9C,EAAe,0BAA4B,mBAE9D,CACE8C,gBAAiB,uBAEpB,CAED,iBAAkB,CAChBF,MAAO,oBACPC,YAAa7C,EAAe,0BAA4B,qBACxD8C,gBAAiB9C,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,IAAsBZ,aAAQ,EAARA,EAAU0D,UAC3B,KAGPC,eACEC,EAACC,iBACCC,SAAU9D,IAAaA,EAASe,eAAegD,MAAQ/D,EAASgE,YAChEC,QAAS,KACPjE,SAAAA,EAAUkE,YACVhE,GAAc6B,GAAQC,EAAQ,UAEhCmC,aAAc,IAAMhD,GAAQjB,GAAc8B,EAAQ,QAClDoC,aAAc,IAAMlE,GAAc6B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACGH,IACH6B,iBAAkB,SACf5C,gBAEM,iBAAgB,gBACb,WACd8B,MAAM,UACNe,KAAK,UACD5C,EAAQ,CAAA6C,SAES,QAApBtD,EAAMuD,UAAsBZ,EAACvB,mBAAahC,IAAoBuD,EAAC1B,EAAQQ,OAAAC,OAAA,CAAA,EAAKtC,OAE/EuD,EAACC,EAAUnB,OAAAC,OAAA,CACTmB,SAAU9D,IAAaA,EAASe,eAAegD,MAAQ/D,EAASyE,MAChER,QAAS,KACPjE,SAAAA,EAAU0E,YACVxE,GAAc6B,GAAQC,EAAQ,UAEhCmC,aAAc,IAAMhD,GAAQjB,GAAc8B,EAAQ,QAClDoC,aAAc,IAAMlE,GAAc6B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACGH,GAAQ,CACXmC,eAAgB,SACb9C,GAAM,aAEA,aAAY,gBACT,WACd0B,MAAM,WACFzB,EAAQ,CAAAyC,SAES,QAApBtD,EAAMuD,UAAsBZ,EAAC1B,EAAQQ,OAAAC,OAAA,CAAA,EAAKnC,IAAoBoD,EAACvB,mBAAa7B,SAIrF"}

package/components/carousel/Pagination.d.ts

@@ -0,0 +1,92 @@
+import React, { ElementType } from 'react';
+import { BoxProps, ButtonProps, SliderProps } from '@mui/material';
+import type { Swiper as CarouselInstance } from 'swiper';
+export interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' | 'position'> {
+    /**
+     * Carousel instance from useCarousel hook
+     */
+    carousel: CarouselInstance;
+}
+export interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {
+    variant?: 'dots';
+    /**
+     * Properties applied to wrapper of dots
+     */
+    dotsWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to each dot
+     */
+    dotProps?: BoxProps<ElementType>;
+}
+export interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {
+    variant?: 'fraction';
+    /**
+     * Properties applied to button used to render text
+     */
+    buttonProps?: ButtonProps;
+}
+export interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {
+    variant?: 'lines';
+    /**
+     * Properties applied to each line
+     */
+    linesProps?: ButtonProps;
+    /**
+     * Show progress in active line instead
+     */
+    lineProgress?: number;
+    /**
+     * Properties applied to active line progress
+     */
+    lineProgressProps?: BoxProps<ElementType>;
+}
+export interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {
+    variant?: 'slider';
+    /**
+     * Properties applied to Slider
+     */
+    sliderProps?: SliderProps;
+}
+export interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {
+    variant?: 'scrollbar';
+    /**
+     * Properties applied to Slider
+     */
+    sliderProps?: SliderProps;
+}
+export interface CarouselPaginationBaseProps {
+    /**
+     * Optional Carousel instance from useCarouselInstance hook
+     */
+    carousel?: CarouselInstance;
+    /**
+     * Append style to wrapper box to change position of control
+     * @default outside
+     */
+    position?: 'outside' | 'inside';
+}
+export type CarouselPaginationProps = CarouselPaginationBaseProps & (Omit<CarouselPaginationDotsProps, 'carousel'> | Omit<CarouselPaginationFractionProps, 'carousel'> | Omit<CarouselPaginationLinesProps, 'carousel'> | Omit<CarouselPaginationSliderProps, 'carousel'> | Omit<CarouselPaginationScrollbarProps, 'carousel'>);
+/**
+ * Pagination controls
+ */
+export declare const CarouselPagination: React.FC<CarouselPaginationProps>;
+/**
+ * Dots variant (...)
+ */
+export declare const DotsVariant: React.FC<CarouselPaginationDotsProps>;
+/**
+ * Fraction variant (text 1/3)
+ */
+export declare const FractionVariant: React.FC<CarouselPaginationFractionProps>;
+/**
+ * Lines variant (- - -)
+ */
+export declare const LinesVariant: React.FC<CarouselPaginationLinesProps>;
+/**
+ * Slider variant (___)
+ */
+export declare const SliderVariant: React.FC<CarouselPaginationSliderProps>;
+/**
+ * Scrollbar variant (_--)
+ */
+export declare const ScrollbarVariant: React.FC<CarouselPaginationSliderProps>;

package/components/carousel/Pagination.js

@@ -0,0 +1,2 @@
+import{__rest as o}from"tslib";import{jsx as s,jsxs as r}from"react/jsx-runtime";import{forwardRef as e,useMemo as i,useState as n,useRef as l,useEffect as t}from"react";import{Box as a,Button as d,Slider as c}from"@mui/material";import{useCarousel as u}from"./hooks.js";import{getInteractiveStyle as p}from"../../materialui/button/interactive.js";import{SliderContainer as g}from"../../materialui/slider/SliderContainer.js";const x=e((r,e)=>{var{carousel:n,position:l,variant:t,sx:a}=r,d=o(r,["carousel","position","variant","sx"]);const c=u(),p=n||c,g=i(()=>{switch(t){case"scrollbar":return v;case"slider":return f;case"fraction":return h;case"lines":return b;default:return m}},[t]),x=i(()=>"inside"===l?Object.assign({position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0"},a):a,[l,JSON.stringify(a)]);return s(g,Object.assign({carousel:p,sx:x,ref:e,position:l},d))}),m=e((r,e)=>{var{carousel:i,dotsWrapperProps:n,dotProps:l,position:t,sx:d}=r,c=o(r,["carousel","dotsWrapperProps","dotProps","position","sx"]);const u=null!=n?n:{},{sx:p}=u,g=o(u,["sx"]),x=null!=l?l:{},{sx:m}=x,h=o(x,["sx"]);return s(a,Object.assign({sx:Object.assign({p:2,display:"flex",alignItems:"center",justifyContent:"center"},d),ref:e},c,{children:s(a,Object.assign({sx:Object.assign(Object.assign({display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"1000px",py:.5,px:1,gap:.5,width:12*((null==i?void 0:i.slides.length)||0)+4*(((null==i?void 0:i.slides.length)||1)-1)+4+16+"px"},"inside"===t&&{backgroundColor:o=>"dark"===o.palette.mode?"surface.primary":"transparent.backdrop"}),p)},g,{children:[...new Array((null==i?void 0:i.slides.length)||0)].map((o,r)=>s(a,Object.assign({className:!(null==i?void 0:i.originalParams.loop)&&(null==i?void 0:i.isEnd)&&r===((null==i?void 0:i.slides.length)||0)-1?"active":(null==i?void 0:i.isEnd)&&!i.originalParams.loop||r!==(null==i?void 0:i.realIndex)?void 0:"active",sx:Object.assign({p:"0",width:"12px",height:"12px",transform:"scale(0.6667)",borderRadius:"100%",backgroundColor:"onSurface.os500",transition:"transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out","&.active":{transform:"scale(1)",backgroundColor:"text.primary",margin:"0 2px"}},m)},h),r))}))}))}),h=e((e,i)=>{var{carousel:n,buttonProps:l,position:t,sx:c}=e,u=o(e,["carousel","buttonProps","position","sx"]);const g=null!=l?l:{},{sx:x}=g,m=o(g,["sx"]);return s(a,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"center",p:2},c),ref:i},u,{children:s(d,Object.assign({variant:"text","aria-controls":"carousel",sx:Object.assign(Object.assign({px:2,py:.25,borderRadius:"4px",fontSize:"18px",lineHeight:"28px",letterSpacing:"0.02em"},p({backgroundColor:"transparent.backdrop"},{backgroundColor:"onSurface.os100"})),x),onClick:()=>(null==n?void 0:n.isEnd)&&!n.originalParams.loop?null==n?void 0:n.slideTo(0):null==n?void 0:n.slideNext()},m,{children:r(a,{component:"span",children:[s(a,{component:"span",sx:{fontWeight:"700",color:"onSurface.os900"},children:`${((null==n?void 0:n.realIndex)||0)+1}`}),s(a,{component:"span",sx:{color:"onSurface.os700",fontWeight:"400",mx:.5},children:" / "}),s(a,{component:"span",sx:{color:"onSurface.os700",fontWeight:"300"},children:`${(null==n?void 0:n.slides.length)||0}`})]})}))}))}),b=e((e,i)=>{var{carousel:n,sx:l,linesProps:t,lineProgress:c,lineProgressProps:u,position:g}=e,x=o(e,["carousel","sx","linesProps","lineProgress","lineProgressProps","position"]);const m=null!=t?t:{},{sx:h}=m,b=o(m,["sx"]),f=null!=u?u:{},{sx:v}=f,j=o(f,["sx"]);return s(a,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:{xs:"stretch",md:"center"},flexGrow:{xs:"1",md:"0"},gap:1,p:2},l),ref:i},x,{children:[...new Array((null==n?void 0:n.slides.length)||0)].map((o,e)=>{const i=!(null==n?void 0:n.originalParams.loop)&&(null==n?void 0:n.isEnd)&&e===((null==n?void 0:n.slides.length)||0)-1||(!(null==n?void 0:n.isEnd)||n.originalParams.loop)&&e===(null==n?void 0:n.realIndex),l=e<=((null==n?void 0:n.realIndex)||0);return r(d,Object.assign({color:"inherit",className:i?"active":void 0,sx:Object.assign(Object.assign({p:0,minHeight:"0",height:i||l?"8px":"4px",borderRadius:i||l?"4px":"2px",width:{xs:"auto",md:"56px"},flexGrow:{xs:"1",md:"0"},justifyContent:"flex-start"},p({backgroundColor:"surface.primary","& .progress-line":{backgroundColor:"brand.secondary"}},{backgroundColor:"surface.secondary","& .progress-line":{backgroundColor:"brandHover.secondary"}})),h),"aria-controls":"carousel",onClick:()=>null==n?void 0:n[n.originalParams.loop?"slideToLoop":"slideTo"](e)},b,{children:[s(a,{sx:{position:"absolute",top:"50%",left:"0",right:"0",height:"24px",transform:"translateY(-50%)",pointerEvents:"auto"}}),s(a,{sx:{borderRadius:"4px",height:"100%",width:"100%",overflow:"hidden"},children:s(a,Object.assign({className:"progress-line",role:i?"progress":void 0,"aria-valuenow":i?c:void 0,"aria-valuemin":0,"aria-valuemax":100,sx:Object.assign({opacity:void 0!==c||l?"1":"0",width:"100%",backgroundColor:"brand.secondary",height:"100%",transformOrigin:"left",transform:`scaleX(${void 0!==c&&i?c/100:l?1:0})`,transition:(void 0!==c?"transform 300ms ease-in-out, ":"")+"opacity 300ms ease-out, background-color 300ms ease-out"},v)},j))})]}),e)})}))}),f=e((r,e)=>{var i,{carousel:d,sliderProps:u,sx:p,progressProps:g,position:x}=r,m=o(r,["carousel","sliderProps","sx","progressProps","position"]);const h=null!=u?u:{},{sx:b}=h,f=o(h,["sx"]),[v,j]=n(Math.round(100*((null==d?void 0:d.progress)||0))),O=l(!1),[,y]=n({});return t(()=>{O.current||j(Math.round(100*((null==d?void 0:d.progress)||0)))},[null==d?void 0:d.progress]),t(()=>{if(d){const o=()=>{O.current||y({})};return d.on("sliderMove",o),()=>{d.off("sliderMove",o)}}},[d]),s(a,Object.assign({sx:Object.assign({my:2},p),ref:e},m,{children:s(c,Object.assign({value:v,min:0,max:100,onChange:(o,s)=>{O.current=!0,null==d||d.setProgress(s/100,150),j(s)},onChangeCommitted:()=>{null==d||d.slideToClosest(300),O.current=!1},sx:Object.assign({display:"block",height:"4px",".MuiSlider-rail":{color:"surface.primary"},".MuiSlider-track":{color:"onSurface.os500",transitionDuration:`${null!==(i=null==d?void 0:d.originalParams.speed)&&void 0!==i?i:300}ms`},".MuiSlider-thumb":{display:"none"}},b),"aria-controls":"carousel"},f))}))}),v=e((r,e)=>{var l,a,{carousel:d,sliderProps:c,position:u}=r,p=o(r,["carousel","sliderProps","position"]);const x=null!=c?c:{},{sx:m}=x,h=o(x,["sx"]),[b,v]=n(!1),[,j]=n({});t(()=>{if(d){const o=()=>v(!0),s=()=>v(!1),r=()=>j({});return d.on("touchStart",o),d.on("touchEnd",s),d.on("resize",r),()=>{d.off("touchStart",o),d.off("touchEnd",s),d.off("resize",r)}}},[d]);const O=i(()=>{var o,s;if((null===(o=null==d?void 0:d.wrapperEl)||void 0===o?void 0:o.scrollWidth)&&(null==d?void 0:d.width)){const o=Math.ceil((null==d?void 0:d.width)**2/(null===(s=null==d?void 0:d.wrapperEl)||void 0===s?void 0:s.scrollWidth));return Math.max(o,40)}return 40},[null===(l=null==d?void 0:d.wrapperEl)||void 0===l?void 0:l.scrollWidth,null==d?void 0:d.width]);return s(f,Object.assign({ref:e,carousel:d,component:g,thumbSize:O,sliderProps:Object.assign({tabIndex:-1,valueLabelDisplay:"off",sx:Object.assign({display:"block",height:"4px",".MuiSlider-rail, .MuiSlider-track":{color:"surface.primary"},".MuiSlider-thumb":Object.assign(Object.assign({display:"flex",width:`${O}px`,height:"4px",border:"none",backgroundColor:"onSurface.os500"},!b&&{transition:`left ${null!==(a=null==d?void 0:d.originalParams.speed)&&void 0!==a?a:300}ms ease-out`}),{"&.Mui-focusVisible":{boxShadow:"none","&:before":{content:"none"}}})},m)},h)},p))});export{x as CarouselPagination,m as DotsVariant,h as FractionVariant,b as LinesVariant,v as ScrollbarVariant,f as SliderVariant};
+//# sourceMappingURL=Pagination.js.map