@skodaflow/web-library 8.3.0 → 8.3.2

package/cjs/components/header/HeaderNavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuList,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      onClick,\n      extend,\n      menuItems,\n      menuProps,\n      collapseProps,\n      clickAwayListenerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef(null);\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\n            sx,\n          )}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {mobile ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n                setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={sxOverride(\n                {\n                  // style menu items inside\n                  '& .MuiMenuItem-root': {\n                    ...getInteractiveStyle(\n                      {\n                        background: 'none',\n                        fontWeight: '300',\n                        color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                      },\n                      {\n                        background: 'none',\n                        fontWeight: '700',\n                        color: 'currentColor',\n                      },\n                    ),\n                  },\n                },\n                collapseSx,\n              )}\n              {...restCollapse}\n            >\n              <MenuList>\n                {children || menuItems}\n              </MenuList>\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n            {children || menuItems}\n          </Menu>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","children","sx","label","icon","onClick","extend","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","ref","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","mobile","undefined","collapseSx","restCollapse","_jsxs","_Fragment","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","MenuList","Menu","open","anchorEl","onClose"],"mappings":"0RAwCO,MAAMA,EAAsDC,EAAAA,WACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,SACAC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAAA,OAAO,OAClBC,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAQC,EAAAA,WACRC,EAASC,EAAAA,cAAqBH,EAAMI,YAAYC,KAAK,OACrDC,OAAoBC,IAAXnB,EAAuBc,EAASd,GACvCJ,GAAIwB,KAAeC,GAAiBlB,GAAiB,CAAA,EAE7D,OACEmB,EAAAA,KAAAC,EAAAA,SAAA,CAAA5B,SAAA,CACE6B,MAACC,EAAAA,qBAAoB,CACnBC,SAAUjB,EACVT,OAAQA,EACRF,KACEA,GACE0B,MAACG,EAAAA,gBAAe,CACd/B,GAAI,CAEF,MAAO,CACLgC,cAAqBT,IAAXnB,EAAuB,CAAE6B,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAU9B,IAEnF+B,WACaZ,IAAXnB,EACI,CACE6B,GAA2B,SAAvBjB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBlB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpEjC,GAEVkC,UAAW,UAAUzB,EAAS,MAAQ,UACtC0B,gBACahB,IAAXnB,EACI,CACE6B,GAAIjB,EAAMwB,YAAYC,OAAO,YAAa,CACxCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACElB,EAAMwB,YAAYC,OAAO,YAAa,CACpCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvC,UACEvC,MAKlBD,QAAUyC,IACRzC,IAAUyC,GACV9B,EAAW+B,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjC9C,GAAI+C,aACF,CACEC,oBACazB,IAAXnB,EACI,CAAE6B,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgB9B,IAE1CJ,GAEFU,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIV,SAEPE,IAEFqB,EACCM,EAAAA,IAACqB,EAAAA,kBAAiB,CAChBC,YAAcN,MACTlC,GAA8CC,IAAYwC,SAASC,SAASR,GAAGS,SAChFvC,EAAU,UAEVN,EAAsBT,SAE1B6B,MAAC0B,EAAAA,SAAQ,CACPC,KAAM1C,EACNb,GAAI+C,EAAAA,WACF,CAEE,sBAAuB,IAClBS,sBACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,WAEJG,EAAAA,IAAC+B,EAAAA,SAAQ,CAAA5D,SACNA,GAAYM,QAKnBuB,EAAAA,IAACgC,OAAI,CAACC,OAAQhD,EAAQiD,SAAUjD,EAAQkD,QAAS,IAAMjD,EAAU,SAAWR,EAASP,SAClFA,GAAYM"}
+{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuList,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { useHeaderContext } from './HeaderContext';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      onClick,\n      extend: propExtend,\n      menuItems,\n      menuProps,\n      collapseProps,\n      clickAwayListenerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef(null);\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\n    // media query fallback only for standalone usage outside of Header\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\n            sx,\n          )}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {mobile ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n                setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={sxOverride(\n                {\n                  // style menu items inside\n                  '& .MuiMenuItem-root': {\n                    ...getInteractiveStyle(\n                      {\n                        background: 'none',\n                        fontWeight: '300',\n                        color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                      },\n                      {\n                        background: 'none',\n                        fontWeight: '700',\n                        color: 'currentColor',\n                      },\n                    ),\n                  },\n                },\n                collapseSx,\n              )}\n              {...restCollapse}\n            >\n              <MenuList>{children || menuItems}</MenuList>\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n            {children || menuItems}\n          </Menu>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","children","sx","label","icon","onClick","extend","propExtend","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","ref","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","headerContext","useHeaderContext","downLg","useMediaQuery","breakpoints","down","mobile","undefined","collapseSx","restCollapse","_jsxs","_Fragment","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","MenuList","Menu","open","anchorEl","onClose"],"mappings":"0TAyCO,MAAMA,EAAsDC,EAAAA,WACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,OAAQC,EACRC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAAA,OAAO,OAClBC,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAQC,EAAAA,WACRC,EAAgBC,EAAAA,mBAChBhB,EAASC,GAAcc,GAAef,OAEtCiB,EAASC,EAAAA,cAAqBL,EAAMM,YAAYC,KAAK,OACrDC,OAAoBC,IAAXtB,EAAuBiB,EAASjB,GACvCJ,GAAI2B,KAAeC,GAAiBpB,GAAiB,CAAA,EAE7D,OACEqB,EAAAA,KAAAC,EAAAA,SAAA,CAAA/B,SAAA,CACEgC,MAACC,EAAAA,qBAAoB,CACnBC,SAAUnB,EACVV,OAAQA,EACRF,KACEA,GACE6B,MAACG,EAAAA,gBAAe,CACdlC,GAAI,CAEF,MAAO,CACLmC,cAAqBT,IAAXtB,EAAuB,CAAEgC,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAUjC,IAEnFkC,WACaZ,IAAXtB,EACI,CACEgC,GAA2B,SAAvBnB,EAAMsB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBpB,EAAMsB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpEpC,GAEVqC,UAAW,UAAU3B,EAAS,MAAQ,UACtC4B,gBACahB,IAAXtB,EACI,CACEgC,GAAInB,EAAM0B,YAAYC,OAAO,YAAa,CACxCC,SAAU5B,EAAM0B,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACEpB,EAAM0B,YAAYC,OAAO,YAAa,CACpCC,SAAU5B,EAAM0B,YAAYE,SAASC,WAEvC,UACE1C,MAKlBD,QAAU4C,IACR5C,IAAU4C,GACVhC,EAAWiC,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjCjD,GAAIkD,aACF,CACEC,oBACazB,IAAXtB,EACI,CAAEgC,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgBjC,IAE1CJ,GAEFW,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIX,SAEPE,IAEFwB,EACCM,EAAAA,IAACqB,EAAAA,kBAAiB,CAChBC,YAAcN,MACTpC,GAA8CC,IAAY0C,SAASC,SAASR,GAAGS,SAChFzC,EAAU,UAEVN,EAAsBV,SAE1BgC,MAAC0B,EAAAA,SAAQ,CACPC,KAAM5C,EACNd,GAAIkD,EAAAA,WACF,CAEE,sBAAuB,IAClBS,sBACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBrB,EAAMsB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,WAEJG,EAAAA,IAAC+B,EAAAA,SAAQ,CAAA/D,SAAEA,GAAYO,QAI3ByB,EAAAA,IAACgC,OAAI,CAACC,OAAQlD,EAAQmD,SAAUnD,EAAQoD,QAAS,IAAMnD,EAAU,SAAWR,EAASR,SAClFA,GAAYO"}

package/cjs/components/header/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Header';
+export * from './HeaderContext';
 export * from './HeaderLogo';
 export * from './HeaderButton';
 export * from './HeaderLanguageSelect';

package/cjs/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './banner';
 export * from './bottomSheet';
 export * from './bypassBlock';
 export * from './carousel';
+export * from './code';
 export * from './errorContent';
 export * from './flag';
 export * from './focusring';

package/cjs/components/label/Label.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("react"),o=require("@mui/material"),a=require("../icon/stroke/CircleExclamationIcon.js"),n=require("../icon/stroke/CircleInformationIcon.js"),t=require("../focusring/focusring.js"),s=require("../../materialui/button/interactive.js"),i=require("../../utils/sxOverride/sxOverride.js");const l={display:"inline-flex",alignItems:"center",justifyContent:"flex-start",flexWrap:"nowrap",flexShrink:"0",fontSize:"11px",lineHeight:"12px",letterSpacing:"3px",textTransform:"uppercase",fontWeight:"900",whiteSpace:"nowrap",textRendering:"geometricPrecision"},d=e.forwardRef(({type:e,label:a,children:n,sx:t,...s},d)=>r.jsx(o.Box,{ref:d,"data-testid":"Label-general",sx:i.sxOverride({...l,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},t),...s,children:a||n})),c=e.forwardRef(({type:e,label:a,children:n,sx:t,...s},d)=>r.jsx(o.Box,{ref:d,"data-testid":"Label-simple",sx:i.sxOverride(r=>({...l,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),t),...s,children:a||n})),x=e.forwardRef(({type:e,label:a,children:n,variant:t="primary",sx:s,...d},c)=>r.jsx(o.Box,{ref:c,"data-testid":`Label-feature${t}`,sx:i.sxOverride({...l,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===t&&{backgroundColor:"onSurface.os600"},..."discount"===t&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===t&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(t)&&{backgroundColor:"error.main"},..."info"===t&&{backgroundColor:"info.main"},..."warning"===t&&{backgroundColor:"warning.dark"},..."success"===t&&{backgroundColor:"brand.primary"}},s),...d,children:a||n}));function p(r,e){return{...r,"&.MuiButtonBase-root":{...s.getInteractiveStyle(r,e)}}}const u=e.forwardRef(({type:s,label:d,children:c,variant:x="positive",sx:u,iconProps:b,IconComponent:g,onClick:f,...m},C)=>{const{sx:y,...h}=b||{},k=e.useMemo(()=>{switch(x){case"alert":case"error":case"warning":return a.CircleExclamationIcon;default:return n.CircleInformationIcon}},[x]),w=g||k,v=o.useTheme();return r.jsxs(o.Box,{ref:C,"data-testid":`Label-semantic${x}`,sx:i.sxOverride({...l,gap:"6px",padding:"2px 8px 2px 4px",borderRadius:"4px",border:1,borderColor:"currentColor",transition:"transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out","&&.MuiButtonBase-root":{...t.getFocusRingStyle(v,!0,1)},...p({color:"brand.primary",backgroundColor:"transparent.transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(x)&&{...p({color:"error.main",backgroundColor:"transparent.transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===x&&{...p({color:"warning.dark",backgroundColor:"transparent.transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===x&&{...p({color:"info.main",backgroundColor:"transparent.transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},u),onClick:f,...m,children:[r.jsx(w,{"data-testid":`icon-${x}`,sx:i.sxOverride({fontSize:"18px"},y),...h}),d||c]})}),b=e.forwardRef(({type:e,label:a,children:n,variant:t="positive",labelPlacement:s="end",dotProps:d,sx:c,...x},p)=>{const{sx:u,...b}=d||{};return r.jsxs(o.Box,{ref:p,"data-testid":`Label-status${t}`,sx:i.sxOverride(r=>({...l,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[s]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===t&&{disabled:!0,tabIndex:-1},...x,children:[r.jsx(o.Box,{sx:i.sxOverride({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===t&&{backgroundColor:"warning.dark"},...["alert","error"].includes(t)&&{backgroundColor:"error.main"},..."neutral"===t&&{backgroundColor:"onSurface.os500"},..."disabled"===t&&{backgroundColor:"disabled.secondary"}},u),...b}),a||n]})}),g=e.forwardRef(({type:a,label:n,children:t,variant:s="A+++",size:d="large",sx:c,labelBoxProps:x,labelNextProps:p,...u},b)=>{const g=e.useMemo(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>g[r]||"#016703",{sx:m,...C}=x||{},{sx:y,...h}=p||{};return r.jsxs(o.Box,{ref:b,"data-testid":`Label-CO2${s}`,sx:i.sxOverride({...l},c),...u,children:[r.jsx(o.Box,{component:"span",sx:i.sxOverride({alignItems:"center",backgroundColor:f(s),boxSizing:"border-box",color:"surface.tertiary",display:"inline-flex",justifyContent:"flex-start",fontWeight:"700",height:{xs:"20px",xl:"22px"},fontSize:{xs:"12px",xl:"14px"},..."small"===d&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},m),...C,children:n||t||s}),r.jsx(o.Box,{sx:i.sxOverride({content:'""',display:"block",width:"0",height:"0",borderStyle:"solid",borderColor:`transparent transparent transparent ${f(s)}`,borderWidth:{xs:"10px 0 10px 7px",lg:"11px 0 11px 8px"},..."small"===d&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...h})]})}),f=e.forwardRef((o,a)=>{const n=e.useMemo(()=>{switch(o.type){case"simple":return c;case"feature":return x;case"semantic":return u;case"status":case"indicator":return b;case"CO2":return g;default:return d}},[o.type]);return r.jsx(n,{component:"span",...o,ref:a})});exports.Label=f;
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),o=require("@mui/material"),a=require("../icon/stroke/CircleExclamationIcon.js"),n=require("../icon/stroke/CircleInformationIcon.js"),t=require("../focusring/focusring.js"),i=require("../../materialui/button/interactive.js"),s=require("../../utils/sxOverride/sxOverride.js");const l={display:"inline-flex",alignItems:"center",justifyContent:"flex-start",flexWrap:"nowrap",flexShrink:"0",fontSize:"11px",lineHeight:"12px",letterSpacing:"3px",textTransform:"uppercase",fontWeight:"900",whiteSpace:"nowrap",textRendering:"geometricPrecision"},d=e.forwardRef(({type:e,label:a,children:n,sx:t,...i},d)=>r.jsx(o.Box,{ref:d,"data-testid":"Label-general",sx:s.sxOverride({...l,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},t),...i,children:a||n})),c=e.forwardRef(({type:e,label:a,children:n,sx:t,...i},d)=>r.jsx(o.Box,{ref:d,"data-testid":"Label-simple",sx:s.sxOverride(r=>({...l,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),t),...i,children:a||n})),x=e.forwardRef(({type:e,label:a,children:n,variant:t="primary",sx:i,...d},c)=>r.jsx(o.Box,{ref:c,"data-testid":`Label-feature${t}`,sx:s.sxOverride({...l,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===t&&{backgroundColor:"onSurface.os600"},..."discount"===t&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===t&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(t)&&{backgroundColor:"error.main"},..."info"===t&&{backgroundColor:"info.main"},..."warning"===t&&{backgroundColor:"warning.dark"},..."success"===t&&{backgroundColor:"brand.primary"}},i),...d,children:a||n}));function p(r,e){return{...r,"&.MuiButtonBase-root":{...i.getInteractiveStyle(r,e)}}}const u=e.forwardRef(({type:i,label:d,children:c,variant:x="positive",sx:u,iconProps:b,IconComponent:g,onClick:f,...m},C)=>{const{sx:y,...h}=b||{},k=e.useMemo(()=>{switch(x){case"alert":case"error":case"warning":return a.CircleExclamationIcon;default:return n.CircleInformationIcon}},[x]),w=g||k,v=o.useTheme();return r.jsxs(o.Box,{ref:C,"data-testid":`Label-semantic${x}`,sx:s.sxOverride({...l,gap:"6px",padding:"2px 8px 2px 4px",borderRadius:"4px",border:1,borderColor:"currentColor",transition:"transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out","&&.MuiButtonBase-root":{...t.getFocusRingStyle(v,!0,1)},...p({color:"brand.primary",backgroundColor:"transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(x)&&{...p({color:"error.main",backgroundColor:"transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===x&&{...p({color:"warning.dark",backgroundColor:"transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===x&&{...p({color:"info.main",backgroundColor:"transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},u),onClick:f,...m,children:[r.jsx(w,{"data-testid":`icon-${x}`,sx:s.sxOverride({fontSize:"18px"},y),...h}),d||c]})}),b=e.forwardRef(({type:e,label:a,children:n,variant:t="positive",labelPlacement:i="end",dotProps:d,sx:c,...x},p)=>{const{sx:u,...b}=d||{};return r.jsxs(o.Box,{ref:p,"data-testid":`Label-status${t}`,sx:s.sxOverride(r=>({...l,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[i]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===t&&{disabled:!0,tabIndex:-1},...x,children:[r.jsx(o.Box,{sx:s.sxOverride({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===t&&{backgroundColor:"warning.dark"},...["alert","error"].includes(t)&&{backgroundColor:"error.main"},..."neutral"===t&&{backgroundColor:"onSurface.os500"},..."disabled"===t&&{backgroundColor:"disabled.secondary"}},u),...b}),a||n]})}),g=e.forwardRef(({type:a,label:n,children:t,variant:i="A+++",size:d="large",sx:c,labelBoxProps:x,labelNextProps:p,...u},b)=>{const g=e.useMemo(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>g[r]||"#016703",{sx:m,...C}=x||{},{sx:y,...h}=p||{};return r.jsxs(o.Box,{ref:b,"data-testid":`Label-CO2${i}`,sx:s.sxOverride({...l},c),...u,children:[r.jsx(o.Box,{component:"span",sx:s.sxOverride({alignItems:"center",backgroundColor:f(i),boxSizing:"border-box",color:"surface.tertiary",display:"inline-flex",justifyContent:"flex-start",fontWeight:"700",height:{xs:"20px",xl:"22px"},fontSize:{xs:"12px",xl:"14px"},..."small"===d&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},m),...C,children:n||t||i}),r.jsx(o.Box,{sx:s.sxOverride({content:'""',display:"block",width:"0",height:"0",borderStyle:"solid",borderColor:`transparent transparent transparent ${f(i)}`,borderWidth:{xs:"10px 0 10px 7px",lg:"11px 0 11px 8px"},..."small"===d&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...h})]})}),f=e.forwardRef((o,a)=>{const n=e.useMemo(()=>{switch(o.type){case"simple":return c;case"feature":return x;case"semantic":return u;case"status":case"indicator":return b;case"CO2":return g;default:return d}},[o.type]);return r.jsx(n,{component:"span",...o,ref:a})});exports.Label=f;
 //# sourceMappingURL=Label.js.map

package/cjs/components/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../../../src/components/label/Label.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, forwardRef, ElementType, ComponentType } from 'react';\nimport { Box, BoxProps, CSSObject, SvgIconProps, useTheme } from '@mui/material';\nimport { CircleExclamationIcon } from '@/src/components/icon/stroke/CircleExclamationIcon';\nimport { CircleInformationIcon } from '@/src/components/icon/stroke/CircleInformationIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LabelBaseProps extends BoxProps<ElementType> {\n  /**\n   * Content to be rendered inside Label, alternatively children are used\n   */\n  label?: ReactNode;\n}\n\nexport interface GeneralLabelProps extends LabelBaseProps {\n  type?: 'general';\n}\n\nexport interface SimpleLabelProps extends LabelBaseProps {\n  type: 'simple';\n}\n\nexport type FeatureVariants =\n  | 'primary'\n  | 'neutral'\n  | 'secondary'\n  | 'discount'\n  | 'alert'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning';\nexport interface FeatureLabelProps extends LabelBaseProps {\n  type: 'feature';\n  variant?: FeatureVariants;\n}\n\nexport type SemanticVariants = 'positive' | 'info' | 'warning' | 'alert' | 'error';\nexport interface SemanticLabelProps extends LabelBaseProps {\n  type: 'semantic';\n  variant?: SemanticVariants;\n  iconProps?: SvgIconProps;\n  IconComponent?: ComponentType<SvgIconProps>;\n}\n\nexport type StatusVariants = 'positive' | 'warning' | 'alert' | 'error' | 'neutral' | 'disabled';\nexport interface StatusLabelProps extends LabelBaseProps {\n  type: 'status' | 'indicator';\n  variant?: StatusVariants;\n  dotProps?: BoxProps<ElementType>;\n  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';\n}\n\nexport type CO2Variants = 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';\nexport interface CO2LabelProps extends LabelBaseProps {\n  type: 'CO2';\n  variant?: CO2Variants;\n  size?: 'small' | 'large';\n  labelBoxProps?: BoxProps<ElementType>;\n  labelNextProps?: BoxProps<ElementType>;\n}\n\nexport type LabelProps =\n  | SimpleLabelProps\n  | FeatureLabelProps\n  | SemanticLabelProps\n  | StatusLabelProps\n  | CO2LabelProps\n  | GeneralLabelProps;\n\n// Shared style for all variants\nconst baseSx: CSSObject = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  flexWrap: 'nowrap',\n  flexShrink: '0',\n  // font\n  fontSize: '11px',\n  lineHeight: '12px',\n  letterSpacing: '3px',\n  textTransform: 'uppercase',\n  fontWeight: '900',\n  whiteSpace: 'nowrap',\n  textRendering: 'geometricPrecision',\n};\n\nconst GeneralVariant: React.FC<GeneralLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-general\"\n    sx={sxOverride(\n      {\n        ...baseSx,\n        color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os600'),\n      },\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst SimpleVariant: React.FC<SimpleLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-simple\"\n    sx={sxOverride(\n      (theme) => ({\n        ...baseSx,\n        ...theme.typography.list,\n        backgroundColor: 'transparent.primary',\n        color: 'text.primary',\n        p: '2px 10px',\n      }),\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst FeatureVariant: React.FC<FeatureLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'primary', sx, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-testid={`Label-feature${variant}`}\n      sx={sxOverride(\n        {\n          ...baseSx,\n          color: 'onSurface.os0',\n          backgroundColor: 'brand.tertiary',\n          padding: '5px 7px 5px 10px',\n          borderRadius: '2px',\n          ...(variant === 'neutral' && {\n            backgroundColor: 'onSurface.os600',\n          }),\n          ...(variant === 'discount' && {\n            color: 'brand.secondary',\n            backgroundColor: 'brand.tertiary',\n          }),\n          // dark mode\n          ...(variant === 'secondary' && {\n            backgroundColor: 'brand.secondary',\n            color: 'brand.tertiary',\n          }),\n          // semantic labels\n          ...(['alert', 'error'].includes(variant) && {\n            backgroundColor: 'error.main',\n          }),\n          ...(variant === 'info' && {\n            backgroundColor: 'info.main',\n          }),\n          ...(variant === 'warning' && {\n            backgroundColor: 'warning.dark',\n          }),\n          ...(variant === 'success' && {\n            backgroundColor: 'brand.primary',\n          }),\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      {label || children}\n    </Box>\n  ),\n);\n\n/**\n * Wrapper around getInteractiveStyle() function to provide interactive style\n *  only for label that is actually a button\n */\nfunction getLabelInteractiveStyle(defaultStyle: CSSObject, hoverStyle: CSSObject): CSSObject {\n  return {\n    ...defaultStyle,\n    '&.MuiButtonBase-root': {\n      ...getInteractiveStyle(defaultStyle, hoverStyle),\n    },\n  };\n}\n\nconst SemanticVariant: React.FC<SemanticLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'positive', sx, iconProps, IconComponent, onClick, ...rest }, ref) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const VariantIconComponent = useMemo(() => {\n      switch (variant) {\n        case 'alert':\n        case 'error':\n        case 'warning':\n          return CircleExclamationIcon;\n        case 'info':\n        case 'positive':\n        default:\n          return CircleInformationIcon;\n      }\n    }, [variant]);\n    const SemanticIcon = IconComponent || VariantIconComponent;\n    const theme = useTheme();\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-semantic${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n            gap: '6px',\n            padding: '2px 8px 2px 4px',\n            borderRadius: '4px',\n            border: 1,\n            borderColor: 'currentColor',\n            transition:\n              'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n            // clickable style\n            '&&.MuiButtonBase-root': {\n              // focused style\n              ...getFocusRingStyle(theme, true, 1),\n            },\n            // default, positive\n            ...getLabelInteractiveStyle(\n              {\n                color: 'brand.primary',\n                backgroundColor: 'transparent.transparent',\n              },\n              {\n                color: 'brandHover.primary',\n                backgroundColor: 'transparent.primary',\n              },\n            ),\n            ...(['alert', 'error'].includes(variant) && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'error.main',\n                  backgroundColor: 'transparent.transparent',\n                },\n                {\n                  color: 'error.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'warning' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.transparent',\n                },\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'info' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'info.main',\n                  backgroundColor: 'transparent.transparent',\n                },\n                {\n                  color: 'info.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n          },\n          sx,\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        <SemanticIcon\n          data-testid={`icon-${variant}`}\n          sx={sxOverride({ fontSize: '18px' }, iconSx)}\n          {...restIconProps}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst StatusVariant: React.FC<StatusLabelProps> = forwardRef(\n  ({ type, label, children, variant = 'positive', labelPlacement = 'end', dotProps, sx, ...rest }, ref) => {\n    const { sx: dotSx, ...restDot } = dotProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-status${variant}`}\n        sx={sxOverride(\n          (theme) => ({\n            ...baseSx,\n            color: 'text.primary',\n            flexDirection: { start: 'row-reverse', top: 'column-reverse', bottom: 'column' }[labelPlacement] ?? 'row',\n            gap: 1,\n            ...(type === 'indicator' && theme.typography.disclaimer1),\n          }),\n          sx,\n        )}\n        {...(variant === 'disabled' && {\n          disabled: true,\n          tabIndex: -1,\n        })}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              width: '10px',\n              height: '10px',\n              ...(type === 'indicator' && {\n                width: '14px',\n                height: '14px',\n              }),\n              borderRadius: '50%',\n              backgroundColor: 'success.main',\n              ...(variant === 'warning' && {\n                backgroundColor: 'warning.dark',\n              }),\n              ...(['alert', 'error'].includes(variant) && {\n                backgroundColor: 'error.main',\n              }),\n              ...(variant === 'neutral' && {\n                backgroundColor: 'onSurface.os500',\n              }),\n              ...(variant === 'disabled' && {\n                backgroundColor: 'disabled.secondary',\n              }),\n            },\n            dotSx,\n          )}\n          {...restDot}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst CO2Variant: React.FC<CO2LabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'A+++', size = 'large', sx, labelBoxProps, labelNextProps, ...rest }, ref) => {\n    const colorMap = useMemo(\n      () => ({\n        B: '#019A01',\n        C: '#69CC00',\n        D: '#FFCC01',\n        E: '#F99601',\n        F: '#FE6501',\n        G: '#FF3100',\n        H: '#2A78CD',\n      }),\n      [],\n    );\n    const getColor = (_variant: string) => colorMap[_variant] || '#016703';\n\n    const { sx: labelBoxSx, ...restLabelBox } = labelBoxProps || {};\n    const { sx: labelNextSx, ...restLabelNext } = labelNextProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-CO2${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          component=\"span\"\n          sx={sxOverride(\n            {\n              alignItems: 'center',\n              backgroundColor: getColor(variant),\n              boxSizing: 'border-box',\n              color: 'surface.tertiary',\n              display: 'inline-flex',\n              justifyContent: 'flex-start',\n              fontWeight: '700',\n              height: { xs: '20px', xl: '22px' },\n              fontSize: { xs: '12px', xl: '14px' },\n              ...(size === 'small' && {\n                fontSize: { xs: '10px', xl: '12px' },\n                height: { xs: '16px', xl: '18px' },\n              }),\n              padding: '0 5px',\n              position: 'relative',\n              letterSpacing: '1px',\n            },\n            labelBoxSx,\n          )}\n          {...restLabelBox}\n        >\n          {label || children || variant}\n        </Box>\n        <Box\n          sx={sxOverride(\n            {\n              content: '\"\"',\n              display: 'block',\n              width: '0',\n              height: '0',\n              borderStyle: 'solid',\n              borderColor: `transparent transparent transparent ${getColor(variant)}`,\n              borderWidth: {\n                xs: `10px 0 10px 7px`,\n                lg: `11px 0 11px 8px`,\n              },\n              ...(size === 'small' && {\n                borderWidth: {\n                  xs: '8px 0 8px 5px',\n                  lg: '9px 0 9px 7px',\n                },\n              }),\n            },\n            labelNextSx,\n          )}\n          {...restLabelNext}\n        />\n      </Box>\n    );\n  },\n);\n\nexport const Label: React.FC<LabelProps> = forwardRef((props, ref) => {\n  const LabelComponent = useMemo<React.FC<LabelProps>>(() => {\n    switch (props.type) {\n      case 'simple':\n        return SimpleVariant;\n      case 'feature':\n        return FeatureVariant;\n      case 'semantic':\n        return SemanticVariant;\n      case 'status':\n      case 'indicator':\n        return StatusVariant;\n      case 'CO2':\n        return CO2Variant;\n      case 'general':\n      default:\n        return GeneralVariant;\n    }\n  }, [props.type]);\n\n  return <LabelComponent component=\"span\" {...props} ref={ref} />;\n});\n"],"names":["baseSx","display","alignItems","justifyContent","flexWrap","flexShrink","fontSize","lineHeight","letterSpacing","textTransform","fontWeight","whiteSpace","textRendering","GeneralVariant","forwardRef","type","_","label","children","sx","rest","ref","_jsx","Box","sxOverride","color","theme","palette","mode","SimpleVariant","typography","list","backgroundColor","p","FeatureVariant","variant","padding","borderRadius","includes","getLabelInteractiveStyle","defaultStyle","hoverStyle","getInteractiveStyle","SemanticVariant","iconProps","IconComponent","onClick","iconSx","restIconProps","VariantIconComponent","useMemo","CircleExclamationIcon","CircleInformationIcon","SemanticIcon","useTheme","_jsxs","gap","border","borderColor","transition","getFocusRingStyle","StatusVariant","labelPlacement","dotProps","dotSx","restDot","flexDirection","start","top","bottom","disclaimer1","disabled","tabIndex","width","height","CO2Variant","size","labelBoxProps","labelNextProps","colorMap","B","C","D","E","F","G","H","getColor","_variant","labelBoxSx","restLabelBox","labelNextSx","restLabelNext","component","boxSizing","xs","xl","position","content","borderStyle","borderWidth","lg","Label","props","LabelComponent"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../../../../../src/components/label/Label.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, forwardRef, ElementType, ComponentType } from 'react';\nimport { Box, BoxProps, CSSObject, SvgIconProps, useTheme } from '@mui/material';\nimport { CircleExclamationIcon } from '@/src/components/icon/stroke/CircleExclamationIcon';\nimport { CircleInformationIcon } from '@/src/components/icon/stroke/CircleInformationIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LabelBaseProps extends BoxProps<ElementType> {\n  /**\n   * Content to be rendered inside Label, alternatively children are used\n   */\n  label?: ReactNode;\n}\n\nexport interface GeneralLabelProps extends LabelBaseProps {\n  type?: 'general';\n}\n\nexport interface SimpleLabelProps extends LabelBaseProps {\n  type: 'simple';\n}\n\nexport type FeatureVariants =\n  | 'primary'\n  | 'neutral'\n  | 'secondary'\n  | 'discount'\n  | 'alert'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning';\nexport interface FeatureLabelProps extends LabelBaseProps {\n  type: 'feature';\n  variant?: FeatureVariants;\n}\n\nexport type SemanticVariants = 'positive' | 'info' | 'warning' | 'alert' | 'error';\nexport interface SemanticLabelProps extends LabelBaseProps {\n  type: 'semantic';\n  variant?: SemanticVariants;\n  iconProps?: SvgIconProps;\n  IconComponent?: ComponentType<SvgIconProps>;\n}\n\nexport type StatusVariants = 'positive' | 'warning' | 'alert' | 'error' | 'neutral' | 'disabled';\nexport interface StatusLabelProps extends LabelBaseProps {\n  type: 'status' | 'indicator';\n  variant?: StatusVariants;\n  dotProps?: BoxProps<ElementType>;\n  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';\n}\n\nexport type CO2Variants = 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';\nexport interface CO2LabelProps extends LabelBaseProps {\n  type: 'CO2';\n  variant?: CO2Variants;\n  size?: 'small' | 'large';\n  labelBoxProps?: BoxProps<ElementType>;\n  labelNextProps?: BoxProps<ElementType>;\n}\n\nexport type LabelProps =\n  | SimpleLabelProps\n  | FeatureLabelProps\n  | SemanticLabelProps\n  | StatusLabelProps\n  | CO2LabelProps\n  | GeneralLabelProps;\n\n// Shared style for all variants\nconst baseSx: CSSObject = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  flexWrap: 'nowrap',\n  flexShrink: '0',\n  // font\n  fontSize: '11px',\n  lineHeight: '12px',\n  letterSpacing: '3px',\n  textTransform: 'uppercase',\n  fontWeight: '900',\n  whiteSpace: 'nowrap',\n  textRendering: 'geometricPrecision',\n};\n\nconst GeneralVariant: React.FC<GeneralLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-general\"\n    sx={sxOverride(\n      {\n        ...baseSx,\n        color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os600'),\n      },\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst SimpleVariant: React.FC<SimpleLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-simple\"\n    sx={sxOverride(\n      (theme) => ({\n        ...baseSx,\n        ...theme.typography.list,\n        backgroundColor: 'transparent.primary',\n        color: 'text.primary',\n        p: '2px 10px',\n      }),\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst FeatureVariant: React.FC<FeatureLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'primary', sx, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-testid={`Label-feature${variant}`}\n      sx={sxOverride(\n        {\n          ...baseSx,\n          color: 'onSurface.os0',\n          backgroundColor: 'brand.tertiary',\n          padding: '5px 7px 5px 10px',\n          borderRadius: '2px',\n          ...(variant === 'neutral' && {\n            backgroundColor: 'onSurface.os600',\n          }),\n          ...(variant === 'discount' && {\n            color: 'brand.secondary',\n            backgroundColor: 'brand.tertiary',\n          }),\n          // dark mode\n          ...(variant === 'secondary' && {\n            backgroundColor: 'brand.secondary',\n            color: 'brand.tertiary',\n          }),\n          // semantic labels\n          ...(['alert', 'error'].includes(variant) && {\n            backgroundColor: 'error.main',\n          }),\n          ...(variant === 'info' && {\n            backgroundColor: 'info.main',\n          }),\n          ...(variant === 'warning' && {\n            backgroundColor: 'warning.dark',\n          }),\n          ...(variant === 'success' && {\n            backgroundColor: 'brand.primary',\n          }),\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      {label || children}\n    </Box>\n  ),\n);\n\n/**\n * Wrapper around getInteractiveStyle() function to provide interactive style\n *  only for label that is actually a button\n */\nfunction getLabelInteractiveStyle(defaultStyle: CSSObject, hoverStyle: CSSObject): CSSObject {\n  return {\n    ...defaultStyle,\n    '&.MuiButtonBase-root': {\n      ...getInteractiveStyle(defaultStyle, hoverStyle),\n    },\n  };\n}\n\nconst SemanticVariant: React.FC<SemanticLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'positive', sx, iconProps, IconComponent, onClick, ...rest }, ref) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const VariantIconComponent = useMemo(() => {\n      switch (variant) {\n        case 'alert':\n        case 'error':\n        case 'warning':\n          return CircleExclamationIcon;\n        case 'info':\n        case 'positive':\n        default:\n          return CircleInformationIcon;\n      }\n    }, [variant]);\n    const SemanticIcon = IconComponent || VariantIconComponent;\n    const theme = useTheme();\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-semantic${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n            gap: '6px',\n            padding: '2px 8px 2px 4px',\n            borderRadius: '4px',\n            border: 1,\n            borderColor: 'currentColor',\n            transition:\n              'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n            // clickable style\n            '&&.MuiButtonBase-root': {\n              // focused style\n              ...getFocusRingStyle(theme, true, 1),\n            },\n            // default, positive\n            ...getLabelInteractiveStyle(\n              {\n                color: 'brand.primary',\n                backgroundColor: 'transparent',\n              },\n              {\n                color: 'brandHover.primary',\n                backgroundColor: 'transparent.primary',\n              },\n            ),\n            ...(['alert', 'error'].includes(variant) && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'error.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'error.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'warning' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'info' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'info.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'info.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n          },\n          sx,\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        <SemanticIcon\n          data-testid={`icon-${variant}`}\n          sx={sxOverride({ fontSize: '18px' }, iconSx)}\n          {...restIconProps}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst StatusVariant: React.FC<StatusLabelProps> = forwardRef(\n  ({ type, label, children, variant = 'positive', labelPlacement = 'end', dotProps, sx, ...rest }, ref) => {\n    const { sx: dotSx, ...restDot } = dotProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-status${variant}`}\n        sx={sxOverride(\n          (theme) => ({\n            ...baseSx,\n            color: 'text.primary',\n            flexDirection: { start: 'row-reverse', top: 'column-reverse', bottom: 'column' }[labelPlacement] ?? 'row',\n            gap: 1,\n            ...(type === 'indicator' && theme.typography.disclaimer1),\n          }),\n          sx,\n        )}\n        {...(variant === 'disabled' && {\n          disabled: true,\n          tabIndex: -1,\n        })}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              width: '10px',\n              height: '10px',\n              ...(type === 'indicator' && {\n                width: '14px',\n                height: '14px',\n              }),\n              borderRadius: '50%',\n              backgroundColor: 'success.main',\n              ...(variant === 'warning' && {\n                backgroundColor: 'warning.dark',\n              }),\n              ...(['alert', 'error'].includes(variant) && {\n                backgroundColor: 'error.main',\n              }),\n              ...(variant === 'neutral' && {\n                backgroundColor: 'onSurface.os500',\n              }),\n              ...(variant === 'disabled' && {\n                backgroundColor: 'disabled.secondary',\n              }),\n            },\n            dotSx,\n          )}\n          {...restDot}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst CO2Variant: React.FC<CO2LabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'A+++', size = 'large', sx, labelBoxProps, labelNextProps, ...rest }, ref) => {\n    const colorMap = useMemo(\n      () => ({\n        B: '#019A01',\n        C: '#69CC00',\n        D: '#FFCC01',\n        E: '#F99601',\n        F: '#FE6501',\n        G: '#FF3100',\n        H: '#2A78CD',\n      }),\n      [],\n    );\n    const getColor = (_variant: string) => colorMap[_variant] || '#016703';\n\n    const { sx: labelBoxSx, ...restLabelBox } = labelBoxProps || {};\n    const { sx: labelNextSx, ...restLabelNext } = labelNextProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-CO2${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          component=\"span\"\n          sx={sxOverride(\n            {\n              alignItems: 'center',\n              backgroundColor: getColor(variant),\n              boxSizing: 'border-box',\n              color: 'surface.tertiary',\n              display: 'inline-flex',\n              justifyContent: 'flex-start',\n              fontWeight: '700',\n              height: { xs: '20px', xl: '22px' },\n              fontSize: { xs: '12px', xl: '14px' },\n              ...(size === 'small' && {\n                fontSize: { xs: '10px', xl: '12px' },\n                height: { xs: '16px', xl: '18px' },\n              }),\n              padding: '0 5px',\n              position: 'relative',\n              letterSpacing: '1px',\n            },\n            labelBoxSx,\n          )}\n          {...restLabelBox}\n        >\n          {label || children || variant}\n        </Box>\n        <Box\n          sx={sxOverride(\n            {\n              content: '\"\"',\n              display: 'block',\n              width: '0',\n              height: '0',\n              borderStyle: 'solid',\n              borderColor: `transparent transparent transparent ${getColor(variant)}`,\n              borderWidth: {\n                xs: `10px 0 10px 7px`,\n                lg: `11px 0 11px 8px`,\n              },\n              ...(size === 'small' && {\n                borderWidth: {\n                  xs: '8px 0 8px 5px',\n                  lg: '9px 0 9px 7px',\n                },\n              }),\n            },\n            labelNextSx,\n          )}\n          {...restLabelNext}\n        />\n      </Box>\n    );\n  },\n);\n\nexport const Label: React.FC<LabelProps> = forwardRef((props, ref) => {\n  const LabelComponent = useMemo<React.FC<LabelProps>>(() => {\n    switch (props.type) {\n      case 'simple':\n        return SimpleVariant;\n      case 'feature':\n        return FeatureVariant;\n      case 'semantic':\n        return SemanticVariant;\n      case 'status':\n      case 'indicator':\n        return StatusVariant;\n      case 'CO2':\n        return CO2Variant;\n      case 'general':\n      default:\n        return GeneralVariant;\n    }\n  }, [props.type]);\n\n  return <LabelComponent component=\"span\" {...props} ref={ref} />;\n});\n"],"names":["baseSx","display","alignItems","justifyContent","flexWrap","flexShrink","fontSize","lineHeight","letterSpacing","textTransform","fontWeight","whiteSpace","textRendering","GeneralVariant","forwardRef","type","_","label","children","sx","rest","ref","_jsx","Box","sxOverride","color","theme","palette","mode","SimpleVariant","typography","list","backgroundColor","p","FeatureVariant","variant","padding","borderRadius","includes","getLabelInteractiveStyle","defaultStyle","hoverStyle","getInteractiveStyle","SemanticVariant","iconProps","IconComponent","onClick","iconSx","restIconProps","VariantIconComponent","useMemo","CircleExclamationIcon","CircleInformationIcon","SemanticIcon","useTheme","_jsxs","gap","border","borderColor","transition","getFocusRingStyle","StatusVariant","labelPlacement","dotProps","dotSx","restDot","flexDirection","start","top","bottom","disclaimer1","disabled","tabIndex","width","height","CO2Variant","size","labelBoxProps","labelNextProps","colorMap","B","C","D","E","F","G","H","getColor","_variant","labelBoxSx","restLabelBox","labelNextSx","restLabelNext","component","boxSizing","xs","xl","position","content","borderStyle","borderWidth","lg","Label","props","LabelComponent"],"mappings":"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"}

package/cjs/components/notification/NotificationCenterHeaderButton.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { HeaderButtonProps } from '@/src/components/header/HeaderButton';
+import { HeaderButtonProps } from '../header/HeaderButton';
 import { ClickAwayListenerProps, PopperProps, FadeProps } from '@mui/material';
 import { NotificationCenterProps } from './NotificationCenter';
 export interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {

package/cjs/components/playPauseButton/PlayPauseButton.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentType, ElementType } from 'react';
 import { BoxProps, IconButtonProps, SvgIconProps } from '@mui/material';
-import { SpinnerProps } from '@/src/components/progress/Spinner';
+import { SpinnerProps } from '../progress/Spinner';
 export interface PlayPauseButtonProps extends BoxProps<ElementType> {
     /**
      * Boolean to indicate if the media is currently playing

package/cjs/components/promptBar/PromptAttachments.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),i=require("../focusring/focusring.js"),s=require("../icon/filled/CircleCloseFilledIcon.js"),n=require("../icon/stroke/FileIcon.js"),a=require("../../materialui/button/interactive.js");const c=r.forwardRef(({attachments:r,setAttachments:c,IconComponent:x,iconWrapperProps:p,iconProps:l,textProps:d,removeIconProps:u,removeIconWrapperProps:g,imageProps:f,buttonBaseProps:m,sx:b,...h},v)=>{const{sx:y,...j}=p??{},{sx:I,...C}=d??{},{sx:k,...S}=u??{},{sx:O,...w}=g??{},{sx:z,...P}=f??{},{sx:q,...R}=m??{},B=x??n.FileIcon;return e.jsx(o.Box,{ref:v,sx:t.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-start",overflow:"auto",gap:.5,mb:1},b),...h,children:r.map((n,x)=>e.jsxs(o.ButtonBase,{"aria-label":n.name,disabled:!c,sx:t.sxOverride(e=>({position:"relative",borderRadius:"8px","&.Mui-disabled":{pointerEvents:"all",cursor:"text",userSelect:"text"},...n.src?{":after":{display:"block",content:'""',position:"absolute",inset:"0",borderRadius:"inherit",backgroundColor:e.palette.transparent.primary,transition:"opacity 0.3s ease-out",opacity:"0",zIndex:"10"}}:{padding:"6px 8px",gap:1,display:"flex",alignItems:"center",justifyContent:"flex-start"},backgroundColor:"surface.primary",...i.getFocusRingStyle(e,!0,"2px"),"&&:before":{zIndex:"20"},...c&&{...a.getInteractiveStyle({...n.src?{"&:after":{opacity:"0"}}:{backgroundColor:"surface.primary"}},{...n.src?{"&:after":{opacity:"1"}}:{backgroundColor:"surface.secondary"}})}}),q),onClick:()=>c?.(r.filter((e,r)=>r!==x)),...R,children:[n.src?e.jsx(o.Box,{sx:t.sxOverride({borderRadius:"inherit",backgroundImage:`url(${n.src})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center",width:"40px",height:"40px",...1===r.length&&{width:"72px",height:"72px"}},z),...P}):e.jsxs(e.Fragment,{children:[e.jsx(o.Box,{sx:t.sxOverride({display:"flex",borderRadius:"4px",padding:"6px",backgroundColor:"transparent.primary",color:"onSurface.os700","& .MuiSvgIcon-root":{fontSize:"16px"}},y),...j,children:e.jsx(B,{...l})}),e.jsx(o.Typography,{component:"span",sx:t.sxOverride({fontWeight:{xs:"400"},fontSize:{xs:"14px"},lineHeight:{xs:"20px"},letterSpacing:{xs:"0.02em"},color:"#000",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"120px"},I),...C,children:n.name})]}),c&&e.jsx(o.Box,{component:"span",sx:t.sxOverride({display:"flex",alignItems:"center",justifyContent:"center",color:"onSurface.os900",zIndex:"30",...n.src?{position:"absolute",top:"3px",right:"3px"}:{position:"relative",top:"-10px",right:"-7px",mr:"2px"},"&:after":{position:"absolute",zIndex:"10",inset:"0",margin:"2px",display:"block",content:'""',borderRadius:"50%",backgroundColor:"common.white"}},O),...w,children:e.jsx(s.CircleCloseFilledIcon,{sx:t.sxOverride({position:"relative",zIndex:"20",fontSize:"14px"},k),...S})})]},x))})});exports.PromptAttachments=c;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),o=require("../../utils/sxOverride/sxOverride.js"),i=require("../focusring/focusring.js"),s=require("../icon/filled/CircleCloseFilledIcon.js"),n=require("../icon/stroke/FileIcon.js"),a=require("../../materialui/button/interactive.js");const c=r.forwardRef(({attachments:r,setAttachments:c,IconComponent:x,iconWrapperProps:p,iconProps:l,textProps:d,removeIconProps:u,removeIconWrapperProps:g,imageProps:m,buttonBaseProps:f,sx:b,...h},v)=>{const{sx:y,...j}=p??{},{sx:I,...C}=d??{},{sx:k,...S}=u??{},{sx:O,...w}=g??{},{sx:z,...P}=m??{},{sx:q,...R}=f??{},B=x??n.FileIcon;return e.jsx(t.Box,{ref:v,sx:o.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-start",overflow:"auto",gap:.5,mb:1},b),...h,children:r.map((n,x)=>e.jsxs(t.ButtonBase,{"aria-label":n.name,disabled:!c,sx:o.sxOverride(e=>({position:"relative",borderRadius:"8px","&.Mui-disabled":{pointerEvents:"all",cursor:"text",userSelect:"text"},...n.src?{":after":{display:"block",content:'""',position:"absolute",inset:"0",borderRadius:"inherit",backgroundColor:e.palette.transparent.primary,transition:"opacity 0.3s ease-out",opacity:"0",zIndex:"10"}}:{padding:"6px 8px",gap:1,display:"flex",alignItems:"center",justifyContent:"flex-start"},backgroundColor:"surface.primary",...i.getFocusRingStyle(e,!0,"2px"),"&&:before":{zIndex:"20"},...c&&{...a.getInteractiveStyle({...n.src?{"&:after":{opacity:"0"}}:{backgroundColor:"surface.primary"}},{...n.src?{"&:after":{opacity:"1"}}:{backgroundColor:"surface.secondary"}})}}),q),onClick:()=>c?.(r.filter((e,r)=>r!==x)),...R,children:[n.src?e.jsx(t.Box,{sx:o.sxOverride({borderRadius:"inherit",backgroundImage:`url(${n.src})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center",width:"40px",height:"40px",...1===r.length&&{width:"72px",height:"72px"}},z),...P}):e.jsxs(e.Fragment,{children:[e.jsx(t.Box,{sx:o.sxOverride({display:"flex",borderRadius:"4px",padding:"6px",backgroundColor:"transparent.primary",color:"onSurface.os700","& .MuiSvgIcon-root":{fontSize:"16px"}},y),...j,children:e.jsx(B,{...l})}),e.jsx(t.Typography,{component:"span",sx:o.sxOverride({fontWeight:{xs:"400"},fontSize:{xs:"14px"},lineHeight:{xs:"20px"},letterSpacing:{xs:"0.02em"},color:"text.primary",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"120px"},I),...C,children:n.name})]}),c&&e.jsx(t.Box,{component:"span",sx:o.sxOverride({display:"flex",alignItems:"center",justifyContent:"center",color:"onSurface.os900",zIndex:"30",...n.src?{position:"absolute",top:"3px",right:"3px"}:{position:"relative",top:"-10px",right:"-7px",mr:"2px"},"&:after":{position:"absolute",zIndex:"10",inset:"0",margin:"2px",display:"block",content:'""',borderRadius:"50%",backgroundColor:"common.white"}},O),...w,children:e.jsx(s.CircleCloseFilledIcon,{sx:o.sxOverride({position:"relative",zIndex:"20",fontSize:"14px"},k),...S})})]},x))})});exports.PromptAttachments=c;
 //# sourceMappingURL=PromptAttachments.js.map

package/cjs/components/promptBar/PromptAttachments.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptAttachments.js","sources":["../../../../../src/components/promptBar/PromptAttachments.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, ButtonBase, ButtonBaseProps, SvgIconProps, Typography } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { CircleCloseFilledIcon } from '@/src/components/icon/filled/CircleCloseFilledIcon';\nimport { FileIcon } from '@/src/components/icon/stroke/FileIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface PromptAttachment {\n  /**\n   * Display name of the attachment.\n   */\n  name: string;\n  /**\n   * URL of the attachment image.\n   */\n  src?: string;\n}\n\nexport interface PromptAttachmentsProps extends BoxProps<ElementType> {\n  /**\n   * List of attachments to display.\n   */\n  attachments: PromptAttachment[];\n  /**\n   * Callback to update the attachments list.\n   */\n  setAttachments?: (attachments: PromptAttachment[]) => void;\n  /**\n   * Custom component to be used for the file icon.\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to the icon wrapper Box.\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the file icon.\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Properties applied to the text wrapper Box.\n   */\n  textProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the remove icon.\n   */\n  removeIconProps?: SvgIconProps;\n  /**\n   * Properties applied to the remove icon wrapper Box.\n   */\n  removeIconWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the image preview Box (rendered when attachment has src).\n   */\n  imageProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the ButtonBase wrapping each attachment item.\n   */\n  buttonBaseProps?: ButtonBaseProps;\n}\n\n/**\n * Shows list of attachments in PromptBar\n */\nexport const PromptAttachments: React.FC<PromptAttachmentsProps> = forwardRef(\n  (\n    {\n      attachments,\n      setAttachments,\n      IconComponent,\n      iconWrapperProps,\n      iconProps,\n      textProps,\n      removeIconProps,\n      removeIconWrapperProps,\n      imageProps,\n      buttonBaseProps,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const { sx: textSx, ...restText } = textProps ?? {};\n    const { sx: removeIconSx, ...restRemoveIcon } = removeIconProps ?? {};\n    const { sx: removeIconWrapperSx, ...restRemoveIconWrapper } = removeIconWrapperProps ?? {};\n    const { sx: imageSx, ...restImage } = imageProps ?? {};\n    const { sx: buttonBaseSx, ...restButtonBase } = buttonBaseProps ?? {};\n    const AttachmentFileIcon = IconComponent ?? FileIcon;\n\n    return (\n      <Box\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            overflow: 'auto',\n            gap: 0.5,\n            mb: 1,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {attachments.map((attachment: PromptAttachment, idx: number) => (\n          <ButtonBase\n            aria-label={attachment.name}\n            key={idx}\n            disabled={!setAttachments}\n            sx={sxOverride(\n              (theme) => ({\n                position: 'relative',\n                borderRadius: '8px',\n                '&.Mui-disabled': {\n                  pointerEvents: 'all',\n                  cursor: 'text',\n                  userSelect: 'text',\n                },\n                ...(attachment.src\n                  ? {\n                      // pseudo background for hover\n                      ':after': {\n                        display: 'block',\n                        content: '\"\"',\n                        position: 'absolute',\n                        inset: '0',\n                        borderRadius: 'inherit',\n                        backgroundColor: theme.palette.transparent.primary,\n                        transition: 'opacity 0.3s ease-out',\n                        opacity: '0',\n                        zIndex: '10',\n                      },\n                    }\n                  : {\n                      padding: '6px 8px',\n                      gap: 1,\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-start',\n                    }),\n                backgroundColor: 'surface.primary',\n                ...getFocusRingStyle(theme, true, '2px'),\n                '&&:before': {\n                  zIndex: '20',\n                },\n                ...(setAttachments && {\n                  ...getInteractiveStyle(\n                    {\n                      ...(attachment.src\n                        ? {\n                            '&:after': {\n                              opacity: '0',\n                            },\n                          }\n                        : {\n                            backgroundColor: 'surface.primary',\n                          }),\n                    },\n                    {\n                      ...(attachment.src\n                        ? {\n                            '&:after': {\n                              opacity: '1',\n                            },\n                          }\n                        : {\n                            backgroundColor: 'surface.secondary',\n                          }),\n                    },\n                  ),\n                }),\n              }),\n              buttonBaseSx,\n            )}\n            onClick={() => setAttachments?.(attachments.filter((_: PromptAttachment, i: number) => i !== idx))}\n            {...restButtonBase}\n          >\n            {attachment.src ? (\n              <Box\n                sx={sxOverride(\n                  {\n                    borderRadius: 'inherit',\n                    backgroundImage: `url(${attachment.src})`,\n                    backgroundSize: 'cover',\n                    backgroundRepeat: 'no-repeat',\n                    backgroundPosition: 'center',\n                    width: '40px',\n                    height: '40px',\n                    ...(attachments.length === 1 && {\n                      width: '72px',\n                      height: '72px',\n                    }),\n                  },\n                  imageSx,\n                )}\n                {...restImage}\n              />\n            ) : (\n              <>\n                <Box\n                  sx={sxOverride(\n                    {\n                      display: 'flex',\n                      borderRadius: '4px',\n                      padding: '6px',\n                      backgroundColor: 'transparent.primary',\n                      color: 'onSurface.os700',\n                      '& .MuiSvgIcon-root': {\n                        fontSize: '16px',\n                      },\n                    },\n                    iconWrapperSx,\n                  )}\n                  {...restIconWrapper}\n                >\n                  <AttachmentFileIcon {...iconProps} />\n                </Box>\n                <Typography\n                  component=\"span\"\n                  sx={sxOverride(\n                    {\n                      fontWeight: { xs: '400' },\n                      fontSize: { xs: '14px' },\n                      lineHeight: { xs: '20px' },\n                      letterSpacing: { xs: '0.02em' },\n                      color: '#000',\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      maxWidth: '120px',\n                    },\n                    textSx,\n                  )}\n                  {...restText}\n                >\n                  {attachment.name}\n                </Typography>\n              </>\n            )}\n            {setAttachments && (\n              <Box\n                component=\"span\"\n                sx={sxOverride(\n                  {\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    color: 'onSurface.os900',\n                    zIndex: '30',\n                    ...(attachment.src\n                      ? {\n                          position: 'absolute',\n                          top: '3px',\n                          right: '3px',\n                        }\n                      : {\n                          position: 'relative',\n                          top: '-10px',\n                          right: '-7px',\n                          mr: '2px',\n                        }),\n                    // fill of the 'x' inside the icon\n                    '&:after': {\n                      position: 'absolute',\n                      zIndex: '10',\n                      inset: '0',\n                      margin: '2px',\n                      display: 'block',\n                      content: '\"\"',\n                      borderRadius: '50%',\n                      backgroundColor: 'common.white',\n                    },\n                  },\n                  removeIconWrapperSx,\n                )}\n                {...restRemoveIconWrapper}\n              >\n                <CircleCloseFilledIcon\n                  sx={sxOverride(\n                    {\n                      position: 'relative',\n                      zIndex: '20',\n                      fontSize: '14px',\n                    },\n                    removeIconSx,\n                  )}\n                  {...restRemoveIcon}\n                />\n              </Box>\n            )}\n          </ButtonBase>\n        ))}\n      </Box>\n    );\n  },\n);\n"],"names":["PromptAttachments","forwardRef","attachments","setAttachments","IconComponent","iconWrapperProps","iconProps","textProps","removeIconProps","removeIconWrapperProps","imageProps","buttonBaseProps","sx","rest","ref","iconWrapperSx","restIconWrapper","textSx","restText","removeIconSx","restRemoveIcon","removeIconWrapperSx","restRemoveIconWrapper","imageSx","restImage","buttonBaseSx","restButtonBase","AttachmentFileIcon","FileIcon","_jsx","Box","sxOverride","display","alignItems","justifyContent","overflow","gap","mb","children","map","attachment","idx","_jsxs","ButtonBase","name","disabled","theme","position","borderRadius","pointerEvents","cursor","userSelect","src","content","inset","backgroundColor","palette","transparent","primary","transition","opacity","zIndex","padding","getFocusRingStyle","getInteractiveStyle","onClick","filter","_","i","backgroundImage","backgroundSize","backgroundRepeat","backgroundPosition","width","height","length","color","fontSize","Typography","component","fontWeight","xs","lineHeight","letterSpacing","whiteSpace","textOverflow","maxWidth","top","right","mr","margin","CircleCloseFilledIcon"],"mappings":"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"}
+{"version":3,"file":"PromptAttachments.js","sources":["../../../../../src/components/promptBar/PromptAttachments.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, ButtonBase, ButtonBaseProps, SvgIconProps, Typography } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { CircleCloseFilledIcon } from '@/src/components/icon/filled/CircleCloseFilledIcon';\nimport { FileIcon } from '@/src/components/icon/stroke/FileIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface PromptAttachment {\n  /**\n   * Display name of the attachment.\n   */\n  name: string;\n  /**\n   * URL of the attachment image.\n   */\n  src?: string;\n}\n\nexport interface PromptAttachmentsProps extends BoxProps<ElementType> {\n  /**\n   * List of attachments to display.\n   */\n  attachments: PromptAttachment[];\n  /**\n   * Callback to update the attachments list.\n   */\n  setAttachments?: (attachments: PromptAttachment[]) => void;\n  /**\n   * Custom component to be used for the file icon.\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to the icon wrapper Box.\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the file icon.\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Properties applied to the text wrapper Box.\n   */\n  textProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the remove icon.\n   */\n  removeIconProps?: SvgIconProps;\n  /**\n   * Properties applied to the remove icon wrapper Box.\n   */\n  removeIconWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the image preview Box (rendered when attachment has src).\n   */\n  imageProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the ButtonBase wrapping each attachment item.\n   */\n  buttonBaseProps?: ButtonBaseProps;\n}\n\n/**\n * Shows list of attachments in PromptBar\n */\nexport const PromptAttachments: React.FC<PromptAttachmentsProps> = forwardRef(\n  (\n    {\n      attachments,\n      setAttachments,\n      IconComponent,\n      iconWrapperProps,\n      iconProps,\n      textProps,\n      removeIconProps,\n      removeIconWrapperProps,\n      imageProps,\n      buttonBaseProps,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const { sx: textSx, ...restText } = textProps ?? {};\n    const { sx: removeIconSx, ...restRemoveIcon } = removeIconProps ?? {};\n    const { sx: removeIconWrapperSx, ...restRemoveIconWrapper } = removeIconWrapperProps ?? {};\n    const { sx: imageSx, ...restImage } = imageProps ?? {};\n    const { sx: buttonBaseSx, ...restButtonBase } = buttonBaseProps ?? {};\n    const AttachmentFileIcon = IconComponent ?? FileIcon;\n\n    return (\n      <Box\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            overflow: 'auto',\n            gap: 0.5,\n            mb: 1,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {attachments.map((attachment: PromptAttachment, idx: number) => (\n          <ButtonBase\n            aria-label={attachment.name}\n            key={idx}\n            disabled={!setAttachments}\n            sx={sxOverride(\n              (theme) => ({\n                position: 'relative',\n                borderRadius: '8px',\n                '&.Mui-disabled': {\n                  pointerEvents: 'all',\n                  cursor: 'text',\n                  userSelect: 'text',\n                },\n                ...(attachment.src\n                  ? {\n                      // pseudo background for hover\n                      ':after': {\n                        display: 'block',\n                        content: '\"\"',\n                        position: 'absolute',\n                        inset: '0',\n                        borderRadius: 'inherit',\n                        backgroundColor: theme.palette.transparent.primary,\n                        transition: 'opacity 0.3s ease-out',\n                        opacity: '0',\n                        zIndex: '10',\n                      },\n                    }\n                  : {\n                      padding: '6px 8px',\n                      gap: 1,\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-start',\n                    }),\n                backgroundColor: 'surface.primary',\n                ...getFocusRingStyle(theme, true, '2px'),\n                '&&:before': {\n                  zIndex: '20',\n                },\n                ...(setAttachments && {\n                  ...getInteractiveStyle(\n                    {\n                      ...(attachment.src\n                        ? {\n                            '&:after': {\n                              opacity: '0',\n                            },\n                          }\n                        : {\n                            backgroundColor: 'surface.primary',\n                          }),\n                    },\n                    {\n                      ...(attachment.src\n                        ? {\n                            '&:after': {\n                              opacity: '1',\n                            },\n                          }\n                        : {\n                            backgroundColor: 'surface.secondary',\n                          }),\n                    },\n                  ),\n                }),\n              }),\n              buttonBaseSx,\n            )}\n            onClick={() => setAttachments?.(attachments.filter((_: PromptAttachment, i: number) => i !== idx))}\n            {...restButtonBase}\n          >\n            {attachment.src ? (\n              <Box\n                sx={sxOverride(\n                  {\n                    borderRadius: 'inherit',\n                    backgroundImage: `url(${attachment.src})`,\n                    backgroundSize: 'cover',\n                    backgroundRepeat: 'no-repeat',\n                    backgroundPosition: 'center',\n                    width: '40px',\n                    height: '40px',\n                    ...(attachments.length === 1 && {\n                      width: '72px',\n                      height: '72px',\n                    }),\n                  },\n                  imageSx,\n                )}\n                {...restImage}\n              />\n            ) : (\n              <>\n                <Box\n                  sx={sxOverride(\n                    {\n                      display: 'flex',\n                      borderRadius: '4px',\n                      padding: '6px',\n                      backgroundColor: 'transparent.primary',\n                      color: 'onSurface.os700',\n                      '& .MuiSvgIcon-root': {\n                        fontSize: '16px',\n                      },\n                    },\n                    iconWrapperSx,\n                  )}\n                  {...restIconWrapper}\n                >\n                  <AttachmentFileIcon {...iconProps} />\n                </Box>\n                <Typography\n                  component=\"span\"\n                  sx={sxOverride(\n                    {\n                      fontWeight: { xs: '400' },\n                      fontSize: { xs: '14px' },\n                      lineHeight: { xs: '20px' },\n                      letterSpacing: { xs: '0.02em' },\n                      color: 'text.primary',\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      maxWidth: '120px',\n                    },\n                    textSx,\n                  )}\n                  {...restText}\n                >\n                  {attachment.name}\n                </Typography>\n              </>\n            )}\n            {setAttachments && (\n              <Box\n                component=\"span\"\n                sx={sxOverride(\n                  {\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    color: 'onSurface.os900',\n                    zIndex: '30',\n                    ...(attachment.src\n                      ? {\n                          position: 'absolute',\n                          top: '3px',\n                          right: '3px',\n                        }\n                      : {\n                          position: 'relative',\n                          top: '-10px',\n                          right: '-7px',\n                          mr: '2px',\n                        }),\n                    // fill of the 'x' inside the icon\n                    '&:after': {\n                      position: 'absolute',\n                      zIndex: '10',\n                      inset: '0',\n                      margin: '2px',\n                      display: 'block',\n                      content: '\"\"',\n                      borderRadius: '50%',\n                      backgroundColor: 'common.white',\n                    },\n                  },\n                  removeIconWrapperSx,\n                )}\n                {...restRemoveIconWrapper}\n              >\n                <CircleCloseFilledIcon\n                  sx={sxOverride(\n                    {\n                      position: 'relative',\n                      zIndex: '20',\n                      fontSize: '14px',\n                    },\n                    removeIconSx,\n                  )}\n                  {...restRemoveIcon}\n                />\n              </Box>\n            )}\n          </ButtonBase>\n        ))}\n      </Box>\n    );\n  },\n);\n"],"names":["PromptAttachments","forwardRef","attachments","setAttachments","IconComponent","iconWrapperProps","iconProps","textProps","removeIconProps","removeIconWrapperProps","imageProps","buttonBaseProps","sx","rest","ref","iconWrapperSx","restIconWrapper","textSx","restText","removeIconSx","restRemoveIcon","removeIconWrapperSx","restRemoveIconWrapper","imageSx","restImage","buttonBaseSx","restButtonBase","AttachmentFileIcon","FileIcon","_jsx","Box","sxOverride","display","alignItems","justifyContent","overflow","gap","mb","children","map","attachment","idx","_jsxs","ButtonBase","name","disabled","theme","position","borderRadius","pointerEvents","cursor","userSelect","src","content","inset","backgroundColor","palette","transparent","primary","transition","opacity","zIndex","padding","getFocusRingStyle","getInteractiveStyle","onClick","filter","_","i","backgroundImage","backgroundSize","backgroundRepeat","backgroundPosition","width","height","length","color","fontSize","Typography","component","fontWeight","xs","lineHeight","letterSpacing","whiteSpace","textOverflow","maxWidth","top","right","mr","margin","CircleCloseFilledIcon"],"mappings":"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"}

package/cjs/components/promptBar/PromptSubmitIconButton.d.ts

@@ -1,6 +1,6 @@
 import { FC, ComponentType, ReactNode } from 'react';
 import { IconButtonProps, SvgIconProps } from '@mui/material';
-import { PromptAttachment } from '@/src';
+import { PromptAttachment } from './PromptAttachments';
 export interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {
     /**
      * Current input value. Switches the button from voice to submit variant.

package/cjs/components/promptBar/PromptSubmitIconButton.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),n=require("@mui/material"),o=require("../icon/stroke/SendIcon.js"),a=require("../icon/stroke/SoundwaveIcon.js"),i=require("../icon/filled/ShapeSquareFilledIcon.js"),s=require("../../utils/sxOverride/sxOverride.js");const t=r.forwardRef(({value:t,setValue:l,attachments:c,processing:u,recording:m,label:d,disableVoice:f,SendIconComponent:p,VoiceIconComponent:b,ProcessingIconComponent:g,RecordingIconComponent:I,sx:S,disabled:v,...h},w)=>{const x=b??a.SoundwaveIcon,q=p??o.SendIcon,j=I??a.SoundwaveIcon,y=g??i.ShapeSquareFilledIcon,Y=r.useMemo(()=>u?"processing":m?"recording":f||t||c?.length?"submit":"voice",[u,m,t,f,c?.length]),k=r.useMemo(()=>d?n.Button:n.IconButton,[d]),C=r.useMemo(()=>{switch(Y){case"processing":return y;case"recording":return j;case"submit":return q;default:return x}},[Y,y,j,q,x]);return e.jsx(k,{ref:w,color:"primary",size:"small",disabled:v,...d?{variant:"contained",startIcon:e.jsx(C,{})}:{variant:"filled"},..."voice"===Y&&{"aria-label":"Voice input",color:"surface"},..."submit"===Y&&{"aria-label":"Submit",...void 0===v&&f&&!t&&!c?.length&&{disabled:!0}},..."recording"===Y&&{"aria-label":"Stop recording"},..."processing"===Y&&{"aria-label":"Stop"},...h,sx:s.sxOverride({..."recording"===Y&&!I&&{"@keyframes flow-soundbar-small":{"0%":{transform:"scaleY(1)"},"25%":{transform:"scaleY(3.15)"},"50%, 100%":{transform:"scaleY(1)"}},"@keyframes flow-soundbar-large":{"0%":{transform:"scaleY(0.35)"},"25%":{transform:"scaleY(1)"},"50%, 100%":{transform:"scaleY(0.35)"}},"& .MuiSvgIcon-root":{path:{transformOrigin:"center 60%",transition:"transform 0.3s ease-out","&:nth-of-type(1)":{animation:"1.2s linear infinite flow-soundbar-small"},"&:nth-of-type(2)":{transform:"scaleY(0.35)",animation:"1.2s linear infinite flow-soundbar-large",animationDelay:"0.2s"},"&:nth-of-type(3)":{animation:"1.2s linear infinite flow-soundbar-small",animationDelay:"0.4s"}}}}},S),children:d??e.jsx(C,{})},Y)});exports.PromptSubmitIconButton=t;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),n=require("@mui/material"),o=require("../icon/stroke/SendIcon.js"),a=require("../icon/stroke/SoundwaveIcon.js"),i=require("../icon/filled/ShapeSquareFilledIcon.js"),s=require("../../utils/sxOverride/sxOverride.js");const t=r.forwardRef(({value:t,setValue:l,attachments:c,processing:u,recording:m,label:d,disableVoice:f,SendIconComponent:p,VoiceIconComponent:b,ProcessingIconComponent:g,RecordingIconComponent:I,sx:S,disabled:v,...h},w)=>{const x=b??a.SoundwaveIcon,q=p??o.SendIcon,j=I??a.SoundwaveIcon,y=g??i.ShapeSquareFilledIcon,Y=r.useMemo(()=>u?"processing":m?"recording":f||t||c?.length?"submit":"voice",[u,m,t,f,c?.length]),k=r.useMemo(()=>d?n.Button:n.IconButton,[d]),C=r.useMemo(()=>{switch(Y){case"processing":return y;case"recording":return j;case"submit":return q;default:return x}},[Y,y,j,q,x]);return e.jsx(k,{ref:w,color:"primary",size:"small",disabled:v,...d?{variant:"contained",startIcon:e.jsx(C,{})}:{variant:"filled"},..."voice"===Y&&{"aria-label":"Voice input",color:"surface"},..."submit"===Y&&{"aria-label":"Submit",...void 0===v&&f&&!t&&!c?.length&&{disabled:!0}},..."recording"===Y&&{"aria-label":"Stop recording"},..."processing"===Y&&{"aria-label":"Stop"},...h,sx:s.sxOverride({..."recording"===Y&&!I&&{"@keyframes flow-soundbar-small":{"0%":{transform:"scaleY(1)"},"25%":{transform:"scaleY(3.15)"},"50%, 100%":{transform:"scaleY(1)"}},"@keyframes flow-soundbar-large":{"0%":{transform:"scaleY(0.35)"},"25%":{transform:"scaleY(1)"},"50%, 100%":{transform:"scaleY(0.35)"}},"& .MuiSvgIcon-root":{path:{transformOrigin:"center 60%",transition:"transform 0.3s ease-out","&:nth-of-type(1)":{animation:"1.2s linear infinite flow-soundbar-small"},"&:nth-of-type(2)":{transform:"scaleY(0.35)",animation:"1.2s linear infinite flow-soundbar-large",animationDelay:"0.2s"},"&:nth-of-type(3)":{animation:"1.2s linear infinite flow-soundbar-small",animationDelay:"0.4s"}}}}},S),children:d||e.jsx(C,{})},Y)});exports.PromptSubmitIconButton=t;
 //# sourceMappingURL=PromptSubmitIconButton.js.map

package/cjs/components/promptBar/PromptSubmitIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptSubmitIconButton.js","sources":["../../../../../src/components/promptBar/PromptSubmitIconButton.tsx"],"sourcesContent":["import { FC, ComponentType, forwardRef, useMemo, ReactNode } from 'react';\nimport { Button, ButtonBaseProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { SendIcon } from '@/src/components/icon/stroke/SendIcon';\nimport { SoundwaveIcon } from '@/src/components/icon/stroke/SoundwaveIcon';\nimport { ShapeSquareFilledIcon } from '@/src/components/icon/filled/ShapeSquareFilledIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { PromptAttachment } from '@/src';\n\nexport interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {\n  /**\n   * Current input value. Switches the button from voice to submit variant.\n   */\n  value?: string;\n  /**\n   * Setter for the input value.\n   */\n  setValue?: (value: string) => void;\n  /**\n   * List of attachments displayed above the text input.\n   */\n  attachments?: PromptAttachment[];\n  /**\n   * Indicates that a request is being processed. Shows the processing (stop) icon.\n   */\n  processing?: boolean;\n  /**\n   * Indicates that voice recording is in progress.\n   */\n  recording?: boolean;\n  /**\n   * Label that changes IconButton to Button.\n   */\n  label?: ReactNode;\n  /**\n   * Do not show voice button. Use when speech input is unavailable or unsupported.\n   */\n  disableVoice?: boolean;\n  /**\n   * Custom component for the send icon, shown in submit state.\n   */\n  SendIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the voice icon, shown when input is empty and not recording.\n   */\n  VoiceIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the processing icon, shown while a request is processing.\n   */\n  ProcessingIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the recording icon, shown as startIcon on the recording stop button.\n   */\n  RecordingIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * Submit button for the PromptBar. Switches between voice and submit variants\n * depending on the current state.\n */\nexport const PromptSubmitIconButton: FC<PromptSubmitIconButtonProps> = forwardRef(\n  (\n    {\n      value,\n      setValue,\n      attachments,\n      processing,\n      recording,\n      label,\n      disableVoice,\n      SendIconComponent,\n      VoiceIconComponent,\n      ProcessingIconComponent,\n      RecordingIconComponent,\n      sx,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) => {\n    const VoiceIcon = VoiceIconComponent ?? SoundwaveIcon;\n    const SubmitIcon = SendIconComponent ?? SendIcon;\n    const RecordingIcon = RecordingIconComponent ?? SoundwaveIcon;\n    const ProcessingIcon = ProcessingIconComponent ?? ShapeSquareFilledIcon;\n\n    const state = useMemo<'voice' | 'recording' | 'submit' | 'processing'>(() => {\n      if (processing) return 'processing';\n      if (recording) return 'recording';\n      if (disableVoice || value || attachments?.length) return 'submit';\n      return 'voice';\n    }, [processing, recording, value, disableVoice, attachments?.length]);\n\n    const Component = useMemo<ComponentType<ButtonBaseProps>>(() => {\n      if (label) {\n        return Button;\n      }\n      return IconButton;\n    }, [label]);\n\n    const Icon = useMemo(() => {\n      switch (state) {\n        case 'processing':\n          return ProcessingIcon;\n        case 'recording':\n          return RecordingIcon;\n        case 'submit':\n          return SubmitIcon;\n        case 'voice':\n        default:\n          return VoiceIcon;\n      }\n    }, [state, ProcessingIcon, RecordingIcon, SubmitIcon, VoiceIcon]);\n\n    return (\n      <Component\n        ref={ref}\n        key={state}\n        color=\"primary\"\n        size=\"small\"\n        disabled={disabled}\n        {...(label ? { variant: 'contained', startIcon: <Icon /> } : { variant: 'filled' })}\n        {...(state === 'voice' && { 'aria-label': 'Voice input', color: 'surface' })}\n        {...(state === 'submit' && {\n          'aria-label': 'Submit',\n          ...(disabled === undefined && disableVoice && !value && !attachments?.length && { disabled: true }),\n        })}\n        {...(state === 'recording' && { 'aria-label': 'Stop recording' })}\n        {...(state === 'processing' && { 'aria-label': 'Stop' })}\n        {...rest}\n        sx={sxOverride(\n          {\n            // soundwave animation during voice recordin\n            ...(state === 'recording' &&\n              !RecordingIconComponent && {\n                '@keyframes flow-soundbar-small': {\n                  '0%': { transform: 'scaleY(1)' },\n                  '25%': { transform: 'scaleY(3.15)' },\n                  '50%, 100%': { transform: 'scaleY(1)' },\n                },\n                '@keyframes flow-soundbar-large': {\n                  '0%': { transform: 'scaleY(0.35)' },\n                  '25%': { transform: 'scaleY(1)' },\n                  '50%, 100%': { transform: 'scaleY(0.35)' },\n                },\n                '& .MuiSvgIcon-root': {\n                  path: {\n                    transformOrigin: 'center 60%',\n                    transition: 'transform 0.3s ease-out',\n                    '&:nth-of-type(1)': { animation: '1.2s linear infinite flow-soundbar-small' },\n                    '&:nth-of-type(2)': {\n                      transform: 'scaleY(0.35)',\n                      animation: '1.2s linear infinite flow-soundbar-large',\n                      animationDelay: '0.2s',\n                    },\n                    '&:nth-of-type(3)': {\n                      animation: '1.2s linear infinite flow-soundbar-small',\n                      animationDelay: '0.4s',\n                    },\n                  },\n                },\n              }),\n          },\n          sx,\n        )}\n      >\n        {label ?? <Icon />}\n      </Component>\n    );\n  },\n);\n"],"names":["PromptSubmitIconButton","forwardRef","value","setValue","attachments","processing","recording","label","disableVoice","SendIconComponent","VoiceIconComponent","ProcessingIconComponent","RecordingIconComponent","sx","disabled","rest","ref","VoiceIcon","SoundwaveIcon","SubmitIcon","SendIcon","RecordingIcon","ProcessingIcon","ShapeSquareFilledIcon","state","useMemo","length","Component","Button","IconButton","Icon","_jsx","color","size","variant","startIcon","undefined","sxOverride","transform","path","transformOrigin","transition","animation","animationDelay","children"],"mappings":"0RA2DO,MAAMA,EAA0DC,EAAAA,WACrE,EAEIC,QACAC,WACAC,cACAC,aACAC,YACAC,QACAC,eACAC,oBACAC,qBACAC,0BACAC,yBACAC,KACAC,cACGC,GAELC,KAEA,MAAMC,EAAYP,GAAsBQ,EAAAA,cAClCC,EAAaV,GAAqBW,EAAAA,SAClCC,EAAgBT,GAA0BM,EAAAA,cAC1CI,EAAiBX,GAA2BY,EAAAA,sBAE5CC,EAAQC,EAAAA,QAAyD,IACjEpB,EAAmB,aACnBC,EAAkB,YAClBE,GAAgBN,GAASE,GAAasB,OAAe,SAClD,QACN,CAACrB,EAAYC,EAAWJ,EAAOM,EAAcJ,GAAasB,SAEvDC,EAAYF,EAAAA,QAAwC,IACpDlB,EACKqB,EAAAA,OAEFC,EAAAA,WACN,CAACtB,IAEEuB,EAAOL,EAAAA,QAAQ,KACnB,OAAQD,GACN,IAAK,aACH,OAAOF,EACT,IAAK,YACH,OAAOD,EACT,IAAK,SACH,OAAOF,EAET,QACE,OAAOF,IAEV,CAACO,EAAOF,EAAgBD,EAAeF,EAAYF,IAEtD,OACEc,EAAAA,IAACJ,EAAS,CACRX,IAAKA,EAELgB,MAAM,UACNC,KAAK,QACLnB,SAAUA,KACLP,EAAQ,CAAE2B,QAAS,YAAaC,UAAWJ,EAAAA,IAACD,EAAI,CAAA,IAAQ,CAAEI,QAAS,aACzD,UAAVV,GAAqB,CAAE,aAAc,cAAeQ,MAAO,cACjD,WAAVR,GAAsB,CACzB,aAAc,iBACGY,IAAbtB,GAA0BN,IAAiBN,IAAUE,GAAasB,QAAU,CAAEZ,UAAU,OAE/E,cAAVU,GAAyB,CAAE,aAAc,qBAC/B,eAAVA,GAA0B,CAAE,aAAc,WAC3CT,EACJF,GAAIwB,aACF,IAEgB,cAAVb,IACDZ,GAA0B,CACzB,iCAAkC,CAChC,KAAM,CAAE0B,UAAW,aACnB,MAAO,CAAEA,UAAW,gBACpB,YAAa,CAAEA,UAAW,cAE5B,iCAAkC,CAChC,KAAM,CAAEA,UAAW,gBACnB,MAAO,CAAEA,UAAW,aACpB,YAAa,CAAEA,UAAW,iBAE5B,qBAAsB,CACpBC,KAAM,CACJC,gBAAiB,aACjBC,WAAY,0BACZ,mBAAoB,CAAEC,UAAW,4CACjC,mBAAoB,CAClBJ,UAAW,eACXI,UAAW,2CACXC,eAAgB,QAElB,mBAAoB,CAClBD,UAAW,2CACXC,eAAgB,YAM5B9B,GACD+B,SAEArC,GAASwB,EAAAA,IAACD,EAAI,CAAA,IAjDVN"}
+{"version":3,"file":"PromptSubmitIconButton.js","sources":["../../../../../src/components/promptBar/PromptSubmitIconButton.tsx"],"sourcesContent":["import { FC, ComponentType, forwardRef, useMemo, ReactNode } from 'react';\nimport { Button, ButtonBaseProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { SendIcon } from '@/src/components/icon/stroke/SendIcon';\nimport { SoundwaveIcon } from '@/src/components/icon/stroke/SoundwaveIcon';\nimport { ShapeSquareFilledIcon } from '@/src/components/icon/filled/ShapeSquareFilledIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { PromptAttachment } from './PromptAttachments';\n\nexport interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {\n  /**\n   * Current input value. Switches the button from voice to submit variant.\n   */\n  value?: string;\n  /**\n   * Setter for the input value.\n   */\n  setValue?: (value: string) => void;\n  /**\n   * List of attachments displayed above the text input.\n   */\n  attachments?: PromptAttachment[];\n  /**\n   * Indicates that a request is being processed. Shows the processing (stop) icon.\n   */\n  processing?: boolean;\n  /**\n   * Indicates that voice recording is in progress.\n   */\n  recording?: boolean;\n  /**\n   * Label that changes IconButton to Button.\n   */\n  label?: ReactNode;\n  /**\n   * Do not show voice button. Use when speech input is unavailable or unsupported.\n   */\n  disableVoice?: boolean;\n  /**\n   * Custom component for the send icon, shown in submit state.\n   */\n  SendIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the voice icon, shown when input is empty and not recording.\n   */\n  VoiceIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the processing icon, shown while a request is processing.\n   */\n  ProcessingIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the recording icon, shown as startIcon on the recording stop button.\n   */\n  RecordingIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * Submit button for the PromptBar. Switches between voice and submit variants\n * depending on the current state.\n */\nexport const PromptSubmitIconButton: FC<PromptSubmitIconButtonProps> = forwardRef(\n  (\n    {\n      value,\n      setValue,\n      attachments,\n      processing,\n      recording,\n      label,\n      disableVoice,\n      SendIconComponent,\n      VoiceIconComponent,\n      ProcessingIconComponent,\n      RecordingIconComponent,\n      sx,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) => {\n    const VoiceIcon = VoiceIconComponent ?? SoundwaveIcon;\n    const SubmitIcon = SendIconComponent ?? SendIcon;\n    const RecordingIcon = RecordingIconComponent ?? SoundwaveIcon;\n    const ProcessingIcon = ProcessingIconComponent ?? ShapeSquareFilledIcon;\n\n    const state = useMemo<'voice' | 'recording' | 'submit' | 'processing'>(() => {\n      if (processing) return 'processing';\n      if (recording) return 'recording';\n      if (disableVoice || value || attachments?.length) return 'submit';\n      return 'voice';\n    }, [processing, recording, value, disableVoice, attachments?.length]);\n\n    const Component = useMemo<ComponentType<ButtonBaseProps>>(() => {\n      if (label) {\n        return Button;\n      }\n      return IconButton;\n    }, [label]);\n\n    const Icon = useMemo(() => {\n      switch (state) {\n        case 'processing':\n          return ProcessingIcon;\n        case 'recording':\n          return RecordingIcon;\n        case 'submit':\n          return SubmitIcon;\n        case 'voice':\n        default:\n          return VoiceIcon;\n      }\n    }, [state, ProcessingIcon, RecordingIcon, SubmitIcon, VoiceIcon]);\n\n    return (\n      <Component\n        ref={ref}\n        key={state}\n        color=\"primary\"\n        size=\"small\"\n        disabled={disabled}\n        {...(label ? { variant: 'contained', startIcon: <Icon /> } : { variant: 'filled' })}\n        {...(state === 'voice' && { 'aria-label': 'Voice input', color: 'surface' })}\n        {...(state === 'submit' && {\n          'aria-label': 'Submit',\n          ...(disabled === undefined && disableVoice && !value && !attachments?.length && { disabled: true }),\n        })}\n        {...(state === 'recording' && { 'aria-label': 'Stop recording' })}\n        {...(state === 'processing' && { 'aria-label': 'Stop' })}\n        {...rest}\n        sx={sxOverride(\n          {\n            // soundwave animation during voice recordin\n            ...(state === 'recording' &&\n              !RecordingIconComponent && {\n                '@keyframes flow-soundbar-small': {\n                  '0%': { transform: 'scaleY(1)' },\n                  '25%': { transform: 'scaleY(3.15)' },\n                  '50%, 100%': { transform: 'scaleY(1)' },\n                },\n                '@keyframes flow-soundbar-large': {\n                  '0%': { transform: 'scaleY(0.35)' },\n                  '25%': { transform: 'scaleY(1)' },\n                  '50%, 100%': { transform: 'scaleY(0.35)' },\n                },\n                '& .MuiSvgIcon-root': {\n                  path: {\n                    transformOrigin: 'center 60%',\n                    transition: 'transform 0.3s ease-out',\n                    '&:nth-of-type(1)': { animation: '1.2s linear infinite flow-soundbar-small' },\n                    '&:nth-of-type(2)': {\n                      transform: 'scaleY(0.35)',\n                      animation: '1.2s linear infinite flow-soundbar-large',\n                      animationDelay: '0.2s',\n                    },\n                    '&:nth-of-type(3)': {\n                      animation: '1.2s linear infinite flow-soundbar-small',\n                      animationDelay: '0.4s',\n                    },\n                  },\n                },\n              }),\n          },\n          sx,\n        )}\n      >\n        {label || <Icon />}\n      </Component>\n    );\n  },\n);\n"],"names":["PromptSubmitIconButton","forwardRef","value","setValue","attachments","processing","recording","label","disableVoice","SendIconComponent","VoiceIconComponent","ProcessingIconComponent","RecordingIconComponent","sx","disabled","rest","ref","VoiceIcon","SoundwaveIcon","SubmitIcon","SendIcon","RecordingIcon","ProcessingIcon","ShapeSquareFilledIcon","state","useMemo","length","Component","Button","IconButton","Icon","_jsx","color","size","variant","startIcon","undefined","sxOverride","transform","path","transformOrigin","transition","animation","animationDelay","children"],"mappings":"0RA2DO,MAAMA,EAA0DC,EAAAA,WACrE,EAEIC,QACAC,WACAC,cACAC,aACAC,YACAC,QACAC,eACAC,oBACAC,qBACAC,0BACAC,yBACAC,KACAC,cACGC,GAELC,KAEA,MAAMC,EAAYP,GAAsBQ,EAAAA,cAClCC,EAAaV,GAAqBW,EAAAA,SAClCC,EAAgBT,GAA0BM,EAAAA,cAC1CI,EAAiBX,GAA2BY,EAAAA,sBAE5CC,EAAQC,EAAAA,QAAyD,IACjEpB,EAAmB,aACnBC,EAAkB,YAClBE,GAAgBN,GAASE,GAAasB,OAAe,SAClD,QACN,CAACrB,EAAYC,EAAWJ,EAAOM,EAAcJ,GAAasB,SAEvDC,EAAYF,EAAAA,QAAwC,IACpDlB,EACKqB,EAAAA,OAEFC,EAAAA,WACN,CAACtB,IAEEuB,EAAOL,EAAAA,QAAQ,KACnB,OAAQD,GACN,IAAK,aACH,OAAOF,EACT,IAAK,YACH,OAAOD,EACT,IAAK,SACH,OAAOF,EAET,QACE,OAAOF,IAEV,CAACO,EAAOF,EAAgBD,EAAeF,EAAYF,IAEtD,OACEc,EAAAA,IAACJ,EAAS,CACRX,IAAKA,EAELgB,MAAM,UACNC,KAAK,QACLnB,SAAUA,KACLP,EAAQ,CAAE2B,QAAS,YAAaC,UAAWJ,EAAAA,IAACD,EAAI,CAAA,IAAQ,CAAEI,QAAS,aACzD,UAAVV,GAAqB,CAAE,aAAc,cAAeQ,MAAO,cACjD,WAAVR,GAAsB,CACzB,aAAc,iBACGY,IAAbtB,GAA0BN,IAAiBN,IAAUE,GAAasB,QAAU,CAAEZ,UAAU,OAE/E,cAAVU,GAAyB,CAAE,aAAc,qBAC/B,eAAVA,GAA0B,CAAE,aAAc,WAC3CT,EACJF,GAAIwB,aACF,IAEgB,cAAVb,IACDZ,GAA0B,CACzB,iCAAkC,CAChC,KAAM,CAAE0B,UAAW,aACnB,MAAO,CAAEA,UAAW,gBACpB,YAAa,CAAEA,UAAW,cAE5B,iCAAkC,CAChC,KAAM,CAAEA,UAAW,gBACnB,MAAO,CAAEA,UAAW,aACpB,YAAa,CAAEA,UAAW,iBAE5B,qBAAsB,CACpBC,KAAM,CACJC,gBAAiB,aACjBC,WAAY,0BACZ,mBAAoB,CAAEC,UAAW,4CACjC,mBAAoB,CAClBJ,UAAW,eACXI,UAAW,2CACXC,eAAgB,QAElB,mBAAoB,CAClBD,UAAW,2CACXC,eAAgB,YAM5B9B,GACD+B,SAEArC,GAASwB,EAAAA,IAACD,EAAI,CAAA,IAjDVN"}

package/cjs/components/quickLink/QuickLink.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),t=require("react"),e=require("@mui/material"),i=require("../../utils/sxOverride/sxOverride.js"),o=require("../icon/stroke/ArrowRightIcon.js"),s=require("../../materialui/button/interactive.js");const n=t.forwardRef(({IconComponent:t,iconProps:n,title:a,titleTypographyProps:x,subtitle:d,subtitleTypographyProps:p,dividerWrapperProps:c,dividerProps:l,contentWrapperProps:u,titleWrapperProps:m,buttonTitle:h,buttonProps:k,buttonIconProps:g,onClick:b,sx:f,...v},y)=>{const{sx:j,...B}=n||{},{sx:I,...O}=c||{},{sx:P,...w}=l||{},{sx:C,...L}=u||{},{sx:Q,...q}=m||{},{sx:M,...S}=x||{},{sx:T,...W}=p||{};return r.jsxs(e.Box,{sx:i.sxOverride({display:"flex",flexDirection:"column",alignItems:"flex-start",minWidth:"0",cursor:"pointer",color:"inherit",textDecoration:"unset",gap:{xs:"8px",md:"16px"},...s.getInteractiveStyle({hr:{backgroundColor:"text.primary",height:"1px"},".MuiButton-navigation":{backgroundColor:"transparent",color:r=>"dark"===r.palette.mode?"onSurface.os0":"onSurface.os900","& .MuiButton-startIcon":{transform:"translateX(0px)"},"& .MuiButton-endIcon":{transform:"translateX(0px)"}}},{hr:{backgroundColor:r=>"dark"===r.palette.mode?"brand.secondary":"brand.primary",height:"2px"},".MuiButton-navigation":{backgroundColor:"transparent",color:r=>"dark"===r.palette.mode?"onSurface.os300":"onSurface.os700",".MuiButton-startIcon":{transform:"translateX(-8px)"},".MuiButton-endIcon":{transform:"translateX(8px)"}}})},f),"data-testid":"QuickLink",ref:y,...b&&{onClick:b,role:"button"},tabIndex:-1,...v,children:[r.jsx(e.Box,{sx:i.sxOverride({position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:t?0:2}}},I),...O,children:r.jsx(e.Box,{component:"hr",sx:i.sxOverride({border:"none",position:"absolute",inset:"0",m:0},P),...w})}),r.jsxs(e.Box,{sx:i.sxOverride({width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"}},C),...L,children:[r.jsxs(e.Box,{sx:i.sxOverride({display:"flex",flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0}},Q),...q,children:[t&&r.jsx(t,{sx:i.sxOverride({display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"}},j),"data-testid":"QuickLink.icon",...B}),a&&r.jsx(e.Typography,{variant:"h4","data-testid":"QuickLink.title",sx:i.sxOverride({display:"block",mb:{xs:0,md:.5}},M),...S,children:a})]}),d&&r.jsx(e.Typography,{variant:"disclaimer1","data-testid":"QuickLink.subtitle",sx:i.sxOverride({display:"block"},T),...W,children:d})]}),h&&r.jsx(e.Button,{variant:"navigation",color:"secondary",endIcon:r.jsx(o.ArrowRightIcon,{}),"data-testid":"QuickLink.button",...k,children:h})]})}),a=t.forwardRef(({sx:t,children:o,...s},n)=>r.jsx(e.Box,{sx:i.sxOverride({display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3},t),ref:n,"data-testid":"QuickLink.wrapper",...s,children:o}));exports.QuickLink=n,exports.QuickLinkWrapper=a;
+"use strict";var r=require("react/jsx-runtime"),t=require("react"),e=require("@mui/material"),i=require("../../utils/sxOverride/sxOverride.js"),s=require("../icon/stroke/ArrowRightIcon.js"),o=require("../../materialui/button/interactive.js");const n=t.forwardRef(({IconComponent:t,iconProps:n,title:a,titleTypographyProps:x,subtitle:d,subtitleTypographyProps:p,dividerWrapperProps:c,dividerProps:l,contentWrapperProps:u,titleWrapperProps:m,buttonTitle:h,buttonProps:k,onClick:g,sx:b,...f},v)=>{const{sx:y,...j}=n||{},{sx:B,...I}=c||{},{sx:O,...w}=l||{},{sx:C,...L}=u||{},{sx:P,...Q}=m||{},{sx:q,...M}=x||{},{sx:S,...T}=p||{};return r.jsxs(e.Box,{sx:i.sxOverride({display:"flex",flexDirection:"column",alignItems:"flex-start",minWidth:"0",cursor:"pointer",color:"inherit",textDecoration:"unset",gap:{xs:"8px",md:"16px"},...o.getInteractiveStyle({hr:{backgroundColor:"text.primary",height:"1px"},".MuiButton-navigation":{backgroundColor:"transparent",color:r=>"dark"===r.palette.mode?"onSurface.os0":"onSurface.os900","& .MuiButton-startIcon":{transform:"translateX(0px)"},"& .MuiButton-endIcon":{transform:"translateX(0px)"}}},{hr:{backgroundColor:r=>"dark"===r.palette.mode?"brand.secondary":"brand.primary",height:"2px"},".MuiButton-navigation":{backgroundColor:"transparent",color:r=>"dark"===r.palette.mode?"onSurface.os300":"onSurface.os700",".MuiButton-startIcon":{transform:"translateX(-8px)"},".MuiButton-endIcon":{transform:"translateX(8px)"}}})},b),"data-testid":"QuickLink",ref:v,...g&&{onClick:g,role:"button"},tabIndex:-1,...f,children:[r.jsx(e.Box,{sx:i.sxOverride({position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:t?0:2}}},B),...I,children:r.jsx(e.Box,{component:"hr",sx:i.sxOverride({border:"none",position:"absolute",inset:"0",m:0},O),...w})}),r.jsxs(e.Box,{sx:i.sxOverride({width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"}},C),...L,children:[r.jsxs(e.Box,{sx:i.sxOverride({display:"flex",flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0}},P),...Q,children:[t&&r.jsx(t,{sx:i.sxOverride({display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"}},y),"data-testid":"QuickLink.icon",...j}),a&&r.jsx(e.Typography,{variant:"h4","data-testid":"QuickLink.title",sx:i.sxOverride({display:"block",mb:{xs:0,md:.5}},q),...M,children:a})]}),d&&r.jsx(e.Typography,{variant:"disclaimer1","data-testid":"QuickLink.subtitle",sx:i.sxOverride({display:"block"},S),...T,children:d})]}),h&&r.jsx(e.Button,{variant:"navigation",color:"secondary",endIcon:r.jsx(s.ArrowRightIcon,{}),"data-testid":"QuickLink.button",...k,children:h})]})}),a=t.forwardRef(({sx:t,children:s,...o},n)=>r.jsx(e.Box,{sx:i.sxOverride({display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3},t),ref:n,"data-testid":"QuickLink.wrapper",...o,children:s}));exports.QuickLink=n,exports.QuickLinkWrapper=a;
 //# sourceMappingURL=QuickLink.js.map

package/cjs/components/quickLink/QuickLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickLink.js","sources":["../../../../../src/components/quickLink/QuickLink.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef, ForwardedRef, ComponentType } from 'react';\nimport { Box, Button, Typography, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface QuickLinkProps extends Omit<BoxProps<ElementType>, 'title'> {\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Props applied to Icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Title text\n   */\n  title?: ReactNode;\n  /**\n   * Props applied to title Typography wrapper component\n   */\n  titleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Subtitle text\n   */\n  subtitle?: ReactNode;\n  /**\n   * Props applied to subtitle Typography wrapper component\n   */\n  subtitleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Props applied to wrapper of divider component\n   */\n  dividerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to divider component\n   */\n  dividerProps?: BoxProps<ElementType>;\n  /**\n   * Content wrapper\n   */\n  contentWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Icon and Title wrapper that changes on the mobile\n   */\n  titleWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Button text\n   */\n  buttonTitle?: ReactNode;\n  /**\n   * Props applied to Button component\n   */\n  buttonProps?: ButtonProps;\n}\n\n/**\n * Quick Links are used to provide immediate access to the most relevant and\n * frequently used actions related to a product or service.\n *\n * Composition of title, subtitle, icon, and button\n */\nexport const QuickLink: React.FC<QuickLinkProps> = forwardRef(\n  (\n    {\n      IconComponent,\n      iconProps,\n      title,\n      titleTypographyProps,\n      subtitle,\n      subtitleTypographyProps,\n      dividerWrapperProps,\n      dividerProps,\n      contentWrapperProps,\n      titleWrapperProps,\n      buttonTitle,\n      buttonProps,\n      buttonIconProps,\n      onClick,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const { sx: dividerWrapperSx, ...restDividerWrapperProps } = dividerWrapperProps || {};\n    const { sx: dividerSx, ...restDividerProps } = dividerProps || {};\n    const { sx: contentWrapperSx, ...restContentWrapperProps } = contentWrapperProps || {};\n    const { sx: titleWrapperSx, ...restTitleWrapperProps } = titleWrapperProps || {};\n    const { sx: titleSx, ...restTitleTypographyProps } = titleTypographyProps || {};\n    const { sx: subtitleSx, ...restSubtitleTypographyProps } = subtitleTypographyProps || {};\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            minWidth: '0',\n            cursor: 'pointer',\n            color: 'inherit',\n            textDecoration: 'unset',\n            gap: { xs: '8px', md: '16px' },\n            ...getInteractiveStyle(\n              {\n                hr: {\n                  backgroundColor: 'text.primary',\n                  height: '1px',\n                },\n                // interactive style from button.theme\n                '.MuiButton-navigation': {\n                  backgroundColor: 'transparent',\n                  color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os0' : 'onSurface.os900'),\n                  '& .MuiButton-startIcon': {\n                    transform: 'translateX(0px)',\n                  },\n                  '& .MuiButton-endIcon': {\n                    transform: 'translateX(0px)',\n                  },\n                },\n              },\n              {\n                hr: {\n                  backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n                  height: '2px',\n                },\n                '.MuiButton-navigation': {\n                  backgroundColor: 'transparent',\n                  color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700'),\n                  '.MuiButton-startIcon': {\n                    transform: 'translateX(-8px)',\n                  },\n                  '.MuiButton-endIcon': {\n                    transform: 'translateX(8px)',\n                  },\n                },\n              },\n            ),\n          },\n          sx,\n        )}\n        data-testid=\"QuickLink\"\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        {...(onClick && {\n          onClick: onClick,\n          role: 'button',\n        })}\n        tabIndex={-1}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              position: 'relative',\n              width: '100%',\n              height: '2px',\n              // 32px gap from top if icon is hidden\n              '&&': { mb: { xs: 0, md: IconComponent ? 0 : 2 } },\n            },\n            dividerWrapperSx,\n          )}\n          {...restDividerWrapperProps}\n        >\n          <Box\n            component=\"hr\"\n            sx={sxOverride(\n              {\n                border: 'none',\n                position: 'absolute',\n                inset: '0',\n                m: 0,\n                // style is set via interactive parent\n              },\n              dividerSx,\n            )}\n            {...restDividerProps}\n          />\n        </Box>\n        <Box\n          sx={sxOverride({ width: '480px', maxWidth: '100%', pr: 3, pt: { xs: '8px', md: '0px' } }, contentWrapperSx)}\n          {...restContentWrapperProps}\n        >\n          <Box\n            sx={sxOverride(\n              {\n                display: 'flex',\n                flexDirection: { xs: 'row', md: 'column' },\n                alignItems: { xs: 'center', md: 'flex-start' },\n                gap: { xs: '4px', md: '18px' },\n                mb: { xs: '4px', md: 0 },\n              },\n              titleWrapperSx,\n            )}\n            {...restTitleWrapperProps}\n          >\n            {IconComponent && (\n              <IconComponent\n                sx={sxOverride(\n                  {\n                    display: 'block',\n                    fontSize: { xs: '20px', md: '35px' },\n                    mx: { xs: '2px', md: '0px' },\n                    my: { xs: '0px', md: '2px' },\n                  },\n                  iconSx,\n                )}\n                data-testid=\"QuickLink.icon\"\n                {...restIconProps}\n              />\n            )}\n            {title && (\n              <Typography\n                variant=\"h4\"\n                data-testid=\"QuickLink.title\"\n                sx={sxOverride({ display: 'block', mb: { xs: 0, md: 0.5 } }, titleSx)}\n                {...restTitleTypographyProps}\n              >\n                {title}\n              </Typography>\n            )}\n          </Box>\n          {subtitle && (\n            <Typography\n              variant=\"disclaimer1\"\n              data-testid=\"QuickLink.subtitle\"\n              sx={sxOverride({ display: 'block' }, subtitleSx)}\n              {...restSubtitleTypographyProps}\n            >\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {buttonTitle && (\n          <Button\n            variant=\"navigation\"\n            color=\"secondary\"\n            endIcon={<ArrowRightIcon />}\n            data-testid=\"QuickLink.button\"\n            {...buttonProps}\n          >\n            {buttonTitle}\n          </Button>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport interface QuickLinkWrapperProps extends BoxProps<ElementType> {}\n\n/**\n * Wrapper container for 3 QuickLinks\n */\nexport const QuickLinkWrapper: React.FC<QuickLinkWrapperProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={sxOverride(\n        {\n          display: 'grid',\n          gridTemplateColumns: { xs: '1fr', lg: 'repeat(3, 1fr)' },\n          gap: 3,\n        },\n        sx,\n      )}\n      ref={ref}\n      data-testid=\"QuickLink.wrapper\"\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["QuickLink","forwardRef","IconComponent","iconProps","title","titleTypographyProps","subtitle","subtitleTypographyProps","dividerWrapperProps","dividerProps","contentWrapperProps","titleWrapperProps","buttonTitle","buttonProps","buttonIconProps","onClick","sx","rest","ref","iconSx","restIconProps","dividerWrapperSx","restDividerWrapperProps","dividerSx","restDividerProps","contentWrapperSx","restContentWrapperProps","titleWrapperSx","restTitleWrapperProps","titleSx","restTitleTypographyProps","subtitleSx","restSubtitleTypographyProps","_jsxs","Box","sxOverride","display","flexDirection","alignItems","minWidth","cursor","color","textDecoration","gap","xs","md","getInteractiveStyle","hr","backgroundColor","height","theme","palette","mode","transform","role","tabIndex","children","_jsx","position","width","mb","component","border","inset","m","maxWidth","pr","pt","fontSize","mx","my","Typography","variant","Button","endIcon","ArrowRightIcon","QuickLinkWrapper","gridTemplateColumns","lg"],"mappings":"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"}
+{"version":3,"file":"QuickLink.js","sources":["../../../../../src/components/quickLink/QuickLink.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef, ForwardedRef, ComponentType } from 'react';\nimport { Box, Button, Typography, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface QuickLinkProps extends Omit<BoxProps<ElementType>, 'title'> {\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Props applied to Icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Title text\n   */\n  title?: ReactNode;\n  /**\n   * Props applied to title Typography wrapper component\n   */\n  titleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Subtitle text\n   */\n  subtitle?: ReactNode;\n  /**\n   * Props applied to subtitle Typography wrapper component\n   */\n  subtitleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Props applied to wrapper of divider component\n   */\n  dividerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to divider component\n   */\n  dividerProps?: BoxProps<ElementType>;\n  /**\n   * Content wrapper\n   */\n  contentWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Icon and Title wrapper that changes on the mobile\n   */\n  titleWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Button text\n   */\n  buttonTitle?: ReactNode;\n  /**\n   * Props applied to Button component\n   */\n  buttonProps?: ButtonProps;\n}\n\n/**\n * Quick Links are used to provide immediate access to the most relevant and\n * frequently used actions related to a product or service.\n *\n * Composition of title, subtitle, icon, and button\n */\nexport const QuickLink: React.FC<QuickLinkProps> = forwardRef(\n  (\n    {\n      IconComponent,\n      iconProps,\n      title,\n      titleTypographyProps,\n      subtitle,\n      subtitleTypographyProps,\n      dividerWrapperProps,\n      dividerProps,\n      contentWrapperProps,\n      titleWrapperProps,\n      buttonTitle,\n      buttonProps,\n      onClick,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const { sx: dividerWrapperSx, ...restDividerWrapperProps } = dividerWrapperProps || {};\n    const { sx: dividerSx, ...restDividerProps } = dividerProps || {};\n    const { sx: contentWrapperSx, ...restContentWrapperProps } = contentWrapperProps || {};\n    const { sx: titleWrapperSx, ...restTitleWrapperProps } = titleWrapperProps || {};\n    const { sx: titleSx, ...restTitleTypographyProps } = titleTypographyProps || {};\n    const { sx: subtitleSx, ...restSubtitleTypographyProps } = subtitleTypographyProps || {};\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            minWidth: '0',\n            cursor: 'pointer',\n            color: 'inherit',\n            textDecoration: 'unset',\n            gap: { xs: '8px', md: '16px' },\n            ...getInteractiveStyle(\n              {\n                hr: {\n                  backgroundColor: 'text.primary',\n                  height: '1px',\n                },\n                // interactive style from button.theme\n                '.MuiButton-navigation': {\n                  backgroundColor: 'transparent',\n                  color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os0' : 'onSurface.os900'),\n                  '& .MuiButton-startIcon': {\n                    transform: 'translateX(0px)',\n                  },\n                  '& .MuiButton-endIcon': {\n                    transform: 'translateX(0px)',\n                  },\n                },\n              },\n              {\n                hr: {\n                  backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n                  height: '2px',\n                },\n                '.MuiButton-navigation': {\n                  backgroundColor: 'transparent',\n                  color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700'),\n                  '.MuiButton-startIcon': {\n                    transform: 'translateX(-8px)',\n                  },\n                  '.MuiButton-endIcon': {\n                    transform: 'translateX(8px)',\n                  },\n                },\n              },\n            ),\n          },\n          sx,\n        )}\n        data-testid=\"QuickLink\"\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        {...(onClick && {\n          onClick: onClick,\n          role: 'button',\n        })}\n        tabIndex={-1}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              position: 'relative',\n              width: '100%',\n              height: '2px',\n              // 32px gap from top if icon is hidden\n              '&&': { mb: { xs: 0, md: IconComponent ? 0 : 2 } },\n            },\n            dividerWrapperSx,\n          )}\n          {...restDividerWrapperProps}\n        >\n          <Box\n            component=\"hr\"\n            sx={sxOverride(\n              {\n                border: 'none',\n                position: 'absolute',\n                inset: '0',\n                m: 0,\n                // style is set via interactive parent\n              },\n              dividerSx,\n            )}\n            {...restDividerProps}\n          />\n        </Box>\n        <Box\n          sx={sxOverride({ width: '480px', maxWidth: '100%', pr: 3, pt: { xs: '8px', md: '0px' } }, contentWrapperSx)}\n          {...restContentWrapperProps}\n        >\n          <Box\n            sx={sxOverride(\n              {\n                display: 'flex',\n                flexDirection: { xs: 'row', md: 'column' },\n                alignItems: { xs: 'center', md: 'flex-start' },\n                gap: { xs: '4px', md: '18px' },\n                mb: { xs: '4px', md: 0 },\n              },\n              titleWrapperSx,\n            )}\n            {...restTitleWrapperProps}\n          >\n            {IconComponent && (\n              <IconComponent\n                sx={sxOverride(\n                  {\n                    display: 'block',\n                    fontSize: { xs: '20px', md: '35px' },\n                    mx: { xs: '2px', md: '0px' },\n                    my: { xs: '0px', md: '2px' },\n                  },\n                  iconSx,\n                )}\n                data-testid=\"QuickLink.icon\"\n                {...restIconProps}\n              />\n            )}\n            {title && (\n              <Typography\n                variant=\"h4\"\n                data-testid=\"QuickLink.title\"\n                sx={sxOverride({ display: 'block', mb: { xs: 0, md: 0.5 } }, titleSx)}\n                {...restTitleTypographyProps}\n              >\n                {title}\n              </Typography>\n            )}\n          </Box>\n          {subtitle && (\n            <Typography\n              variant=\"disclaimer1\"\n              data-testid=\"QuickLink.subtitle\"\n              sx={sxOverride({ display: 'block' }, subtitleSx)}\n              {...restSubtitleTypographyProps}\n            >\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {buttonTitle && (\n          <Button\n            variant=\"navigation\"\n            color=\"secondary\"\n            endIcon={<ArrowRightIcon />}\n            data-testid=\"QuickLink.button\"\n            {...buttonProps}\n          >\n            {buttonTitle}\n          </Button>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport interface QuickLinkWrapperProps extends BoxProps<ElementType> {}\n\n/**\n * Wrapper container for 3 QuickLinks\n */\nexport const QuickLinkWrapper: React.FC<QuickLinkWrapperProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={sxOverride(\n        {\n          display: 'grid',\n          gridTemplateColumns: { xs: '1fr', lg: 'repeat(3, 1fr)' },\n          gap: 3,\n        },\n        sx,\n      )}\n      ref={ref}\n      data-testid=\"QuickLink.wrapper\"\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["QuickLink","forwardRef","IconComponent","iconProps","title","titleTypographyProps","subtitle","subtitleTypographyProps","dividerWrapperProps","dividerProps","contentWrapperProps","titleWrapperProps","buttonTitle","buttonProps","onClick","sx","rest","ref","iconSx","restIconProps","dividerWrapperSx","restDividerWrapperProps","dividerSx","restDividerProps","contentWrapperSx","restContentWrapperProps","titleWrapperSx","restTitleWrapperProps","titleSx","restTitleTypographyProps","subtitleSx","restSubtitleTypographyProps","_jsxs","Box","sxOverride","display","flexDirection","alignItems","minWidth","cursor","color","textDecoration","gap","xs","md","getInteractiveStyle","hr","backgroundColor","height","theme","palette","mode","transform","role","tabIndex","children","_jsx","position","width","mb","component","border","inset","m","maxWidth","pr","pt","fontSize","mx","my","Typography","variant","Button","endIcon","ArrowRightIcon","QuickLinkWrapper","gridTemplateColumns","lg"],"mappings":"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"}

package/cjs/components/search/Search.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../icon/stroke/CloseIcon.js"),t=require("../icon/stroke/SearchIcon.js"),a=require("@mui/material"),n=require("../../utils/sxOverride/sxOverride.js"),s=require("react"),o=require("../../utils/useDebounce/useDebounce.js"),i=require("../focusring/focusring.js"),l=require("../../materialui/button/interactive.js");const u=s.forwardRef(({debounce:u=0,defaultValue:c="",cancelIconProps:d={},cancelIconButtonProps:p,CancelIconComponent:x,disableInput:b,onCancel:h,onSearch:m,onChange:f,searchIconProps:g={},searchIconButtonProps:v,SearchIconComponent:I,slotProps:S,sx:C,value:j="",variant:y,...P},k)=>{const w=I||t.SearchIcon,q=x||r.CloseIcon,[O,R]=s.useState(c||j),A=s.useDeferredValue(O),B=o.default(O,u),{sx:D,...F}=g,{sx:M,...z}=v??{},{sx:V,...E}=p??{},{input:N={},...T}=S||{},U=s.useMemo(()=>{switch(y){case"transparent":return{bgcolor:"transparent.primary"};case"mapShadow":return{bgcolor:"onSurface.os0",boxShadow:e=>e.flowShadows.l};default:return{bgcolor:"surface.primary"}}},[y]);s.useEffect(()=>{f?.(u<=0?A:B)},[u<=0?A:B]);const G=s.useCallback(e=>{e.preventDefault(),e.stopPropagation(),m?.(O)},[O]);return e.jsx(a.TextField,{onChange:e=>R(e.target.value),ref:k,sx:n.sxOverride({position:"relative",borderRadius:"200px",border:1,borderColor:P?.disabled?"disabled.primary":"onSurface.os500",py:"5px",pl:"14px",pr:"4px",mb:0,"&&&":{...i.updateFocusRingStyle(1,!1,"&:has(.Mui-focused)")},...U},C),...P,value:O,variant:"standard",slotProps:{...N,input:{className:""+(""!==O?"filled":""),disabled:b||P?.disabled,inputProps:{..."inputProps"in N&&{...N.inputProps},sx:n.sxOverride({p:0,ml:1,color:"text.primary","&::-webkit-input-placeholder":{color:"onSurface.os700"},"&.Mui-disabled":{"&, &::-webkit-input-placeholder":{color:"disabled.tertiary"}}},"inputProps"in N&&"sx"in N.inputProps?N.inputProps.sx:void 0)},disableUnderline:!0,startAdornment:e.jsx(a.InputAdornment,{position:"start",sx:{transition:"all .4s ease",mr:"0"},children:e.jsx(a.IconButton,{disabled:P?.disabled,tabIndex:m?0:-1,onClick:G,size:"medium","aria-label":"Search",...z,sx:n.sxOverride({width:"34px",height:"34px",...i.updateFocusRingStyle("0px"),...l.getInteractiveStyle({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})},M),children:e.jsx(w,{sx:n.sxOverride({transition:"all .5s ease"},D),...F})})}),endAdornment:e.jsx(a.InputAdornment,{position:"end",sx:{opacity:""!==O?"1":"0",transition:"opacity .3s ease"},children:e.jsx(a.IconButton,{disabled:""===O||P?.disabled,onClick:()=>{R(""),h?.()},size:"medium",tabIndex:b?-1:0,"aria-label":"Clear search",...E,sx:n.sxOverride({cursor:""!==O?"pointer":"default",width:"34px",height:"34px",...i.updateFocusRingStyle("0px"),...l.getInteractiveStyle({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})},V),children:e.jsx(q,{...d})})})},...T}})});exports.Search=u;
+"use strict";var e=require("react/jsx-runtime"),r=require("../icon/stroke/CloseIcon.js"),o=require("../icon/stroke/SearchIcon.js"),s=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),a=require("react"),n=require("../../utils/useDebounce/useDebounce.js"),i=require("../focusring/focusring.js"),l=require("../../materialui/button/interactive.js");const u=a.forwardRef(({debounce:u=0,defaultValue:c="",cancelIconProps:d={},cancelIconButtonProps:p,CancelIconComponent:x,disableInput:b,onCancel:h,onSearch:m,onChange:f,searchIconProps:g={},searchIconButtonProps:v,SearchIconComponent:I,slotProps:S,sx:C,value:j="",variant:y,...P},k)=>{const w=I||o.SearchIcon,q=x||r.CloseIcon,[O,R]=a.useState(c||j),A=a.useDeferredValue(O),B=n.default(O,u),{sx:D,...F}=g,{sx:M,...z}=v??{},{sx:V,...E}=p??{},{input:N={},...T}=S||{},U=a.useMemo(()=>{switch(y){case"transparent":return{bgcolor:"transparent.primary"};case"mapShadow":return{bgcolor:"onSurface.os0",boxShadow:e=>e.flowShadows.l};default:return{bgcolor:"surface.primary"}}},[y]);a.useEffect(()=>{f?.(u<=0?A:B)},[u<=0?A:B]);const G=a.useCallback(e=>{e.preventDefault(),e.stopPropagation(),m?.(O)},[O]);return e.jsx(s.TextField,{onChange:e=>R(e.target.value),ref:k,sx:t.sxOverride({position:"relative",borderRadius:"200px",border:1,borderColor:P?.disabled?"disabled.primary":"onSurface.os500",py:"5px",pl:"14px",pr:"4px",mb:0,"&&&":{...i.updateFocusRingStyle(1,!1,"&:has(.Mui-focused)")},...U},C),...P,value:O,variant:"standard",slotProps:{...N,input:{className:""+(""!==O?"filled":""),disabled:b||P?.disabled,inputProps:{..."inputProps"in N&&{...N.inputProps},sx:t.sxOverride({p:0,ml:1,color:"text.primary","&::-webkit-input-placeholder":{color:"onSurface.os700"},"&.Mui-disabled":{"&, &::-webkit-input-placeholder":{color:"disabled.tertiary"}}},"inputProps"in N&&"sx"in N.inputProps?N.inputProps.sx:void 0)},disableUnderline:!0,startAdornment:e.jsx(s.InputAdornment,{position:"start",sx:{transition:"all .4s ease",mr:"0"},children:e.jsx(s.IconButton,{disabled:P?.disabled,tabIndex:m?0:-1,onClick:G,size:"medium","aria-label":"Search",...z,sx:t.sxOverride({width:"34px",height:"34px",...i.updateFocusRingStyle("0px"),...l.getInteractiveStyle({backgroundColor:"transparent"},{backgroundColor:"transparent"})},M),children:e.jsx(w,{sx:t.sxOverride({transition:"all .5s ease"},D),...F})})}),endAdornment:e.jsx(s.InputAdornment,{position:"end",sx:{opacity:""!==O?"1":"0",transition:"opacity .3s ease"},children:e.jsx(s.IconButton,{disabled:""===O||P?.disabled,onClick:()=>{R(""),h?.()},size:"medium",tabIndex:b?-1:0,"aria-label":"Clear search",...E,sx:t.sxOverride({cursor:""!==O?"pointer":"default",width:"34px",height:"34px",...i.updateFocusRingStyle("0px"),...l.getInteractiveStyle({backgroundColor:"transparent"},{backgroundColor:"transparent"})},V),children:e.jsx(q,{...d})})})},...T}})});exports.Search=u;
 //# sourceMappingURL=Search.js.map