npm - @skodaflow/web-library - Versions diffs - 8.2.0 → 8.3.1 - Mend

@skodaflow/web-library 8.2.0 → 8.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (285) hide show

package/components/icon/stroke/PictureErrorIcon.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{SvgIcon as L}from"@mui/material";const m=t((t,m)=>r(L,{viewBox:"2 2 20 20",ref:m,...t,children:r("path",{d:"M22.0459 3.03418L2.9707 22.1094L1.69727 20.8369L4.12012 18.4141V4.0791H18.4551L20.7725 1.76172L22.0459 3.03418ZM19.8799 19.8389H7.78711L9.42676 18.1992H18.2402V9.38574L19.8799 7.74609V19.8389ZM5.75977 16.7744L16.8154 5.71875H5.75977V16.7744ZM17.7803 16.4395H11.1865L14.6338 12.9912L17.7803 16.4395ZM9.28027 7.81934C10.0201 7.81942 10.6599 8.43894 10.6602 9.17871C10.6602 9.91866 10.0202 10.539 9.28027 10.5391C8.54027 10.5391 7.90039 9.91871 7.90039 9.17871C7.90062 8.43888 8.5404 7.81934 9.28027 7.81934Z"})}));export{m as PictureErrorIcon};
2	+ //# sourceMappingURL=PictureErrorIcon.js.map

package/components/icon/stroke/PictureErrorIcon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PictureErrorIcon.js","sources":["../../../../src/components/icon/stroke/PictureErrorIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const PictureErrorIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n return (\n <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n <path d=\"M22.0459 3.03418L2.9707 22.1094L1.69727 20.8369L4.12012 18.4141V4.0791H18.4551L20.7725 1.76172L22.0459 3.03418ZM19.8799 19.8389H7.78711L9.42676 18.1992H18.2402V9.38574L19.8799 7.74609V19.8389ZM5.75977 16.7744L16.8154 5.71875H5.75977V16.7744ZM17.7803 16.4395H11.1865L14.6338 12.9912L17.7803 16.4395ZM9.28027 7.81934C10.0201 7.81942 10.6599 8.43894 10.6602 9.17871C10.6602 9.91866 10.0202 10.539 9.28027 10.5391C8.54027 10.5391 7.90039 9.91871 7.90039 9.17871C7.90062 8.43888 8.5404 7.81934 9.28027 7.81934Z\" />\n </SvgIcon>\n );\n});\n"],"names":["PictureErrorIcon","forwardRef","props","ref","_jsx","SvgIcon","viewBox","d"],"mappings":"mHAMO,MAAMA,EAA2CC,EAAW,CAACC,EAAOC,IAEvEC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,WACzCE,EAAA,OAAA,CAAMG,EAAE"}

package/components/icon/stroke/PowerpassIcon.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SvgIconProps } from '@mui/material';
+/**
+ * Flow brand exclusive icon
+ */
+export declare const PowerpassIcon: React.FC<SvgIconProps>;

package/components/icon/stroke/PowerpassIcon.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{SvgIcon as m}from"@mui/material";const o=t((t,o)=>r(m,{viewBox:"2 2 20 20",ref:o,...t,children:r("path",{d:"M11.6046 6.75L17.25 12.3449L11.6035 17.9914H6.75L12.0906 12.6507L12.3992 12.3421L12.0893 12.0349L6.7567 6.75H11.6046Z"})}));export{o as PowerpassIcon};
2	+ //# sourceMappingURL=PowerpassIcon.js.map

package/components/icon/stroke/PowerpassIcon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PowerpassIcon.js","sources":["../../../../src/components/icon/stroke/PowerpassIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const PowerpassIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n return (\n <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n <path d=\"M11.6046 6.75L17.25 12.3449L11.6035 17.9914H6.75L12.0906 12.6507L12.3992 12.3421L12.0893 12.0349L6.7567 6.75H11.6046Z\" />\n </SvgIcon>\n );\n});\n"],"names":["PowerpassIcon","forwardRef","props","ref","_jsx","SvgIcon","viewBox","d"],"mappings":"mHAMO,MAAMA,EAAwCC,EAAW,CAACC,EAAOC,IAEpEC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,WACzCE,EAAA,OAAA,CAAMG,EAAE"}

package/components/icon/stroke/index.d.ts CHANGED Viewed

@@ -82,6 +82,7 @@ export * from './CameraIcon';
 export * from './CampingIcon';
 export * from './CarAccidentIcon';
 export * from './CarBackIcon';
+export * from './CarChargingIcon';
 export * from './CarComparisonIcon';
 export * from './CarHandIcon';
 export * from './CarInfoIcon';
@@ -159,6 +160,7 @@ export * from './DraghandleIcon';
 export * from './EditIcon';
 export * from './ElectricChargerIcon';
 export * from './ElectricChargerOffIcon';
+export * from './EmissionLabelIcon';
 export * from './EmptystateIcon';
 export * from './EngineIcon';
 export * from './EngineOilIcon';
@@ -242,6 +244,7 @@ export * from './PasteIcon';
 export * from './PercentageIcon';
 export * from './PetIcon';
 export * from './PhoneIcon';
+export * from './PictureErrorIcon';
 export * from './PictureIcon';
 export * from './PiggybankIcon';
 export * from './PlugCCSType1Icon';
@@ -251,6 +254,7 @@ export * from './PlugType1Icon';
 export * from './PlugType2Icon';
 export * from './PlugIcon';
 export * from './PlusIcon';
+export * from './PowerpassIcon';
 export * from './PremiumLIcon';
 export * from './PremiumMIcon';
 export * from './PremiumSIcon';

package/components/index.d.ts CHANGED Viewed

@@ -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/components/label/Label.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as o}from"react/jsx-runtime";import{forwardRef as e,useMemo as a}from"react";import{Box as t,useTheme as n}from"@mui/material";import{CircleExclamationIcon as i}from"../icon/stroke/CircleExclamationIcon.js";import{CircleInformationIcon as s}from"../icon/stroke/CircleInformationIcon.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{getInteractiveStyle as c}from"../../materialui/button/interactive.js";import{sxOverride as d}from"../../utils/sxOverride/sxOverride.js";const p={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"},x=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-general",sx:d({...p,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},n),...i,children:e||a})),u=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-simple",sx:d(r=>({...p,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),n),...i,children:e||a})),b=e(({type:o,label:e,children:a,variant:n="primary",sx:i,...s},l)=>r(t,{ref:l,"data-testid":`Label-feature${n}`,sx:d({...p,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===n&&{backgroundColor:"onSurface.os600"},..."discount"===n&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===n&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(n)&&{backgroundColor:"error.main"},..."info"===n&&{backgroundColor:"info.main"},..."warning"===n&&{backgroundColor:"warning.dark"},..."success"===n&&{backgroundColor:"brand.primary"}},i),...s,children:e||a}));function g(r,o){return{...r,"&.MuiButtonBase-root":{...c(r,o)}}}const m=e(({type:e,label:c,children:x,variant:u="positive",sx:b,iconProps:m,IconComponent:f,onClick:C,...h},y)=>{const{sx:k,...w}=m||{},S=a(()=>{switch(u){case"alert":case"error":case"warning":return i;default:return s}},[u]),v=f||S,j=n();return o(t,{ref:y,"data-testid":`Label-semantic${u}`,sx:d({...p,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":{...l(j,!0,1)},...g({color:"brand.primary",backgroundColor:"transparent.transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(u)&&{...g({color:"error.main",backgroundColor:"transparent.transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===u&&{...g({color:"warning.dark",backgroundColor:"transparent.transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===u&&{...g({color:"info.main",backgroundColor:"transparent.transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},b),onClick:C,...h,children:[r(v,{"data-testid":`icon-${u}`,sx:d({fontSize:"18px"},k),...w}),c||x]})}),f=e(({type:e,label:a,children:n,variant:i="positive",labelPlacement:s="end",dotProps:l,sx:c,...x},u)=>{const{sx:b,...g}=l||{};return o(t,{ref:u,"data-testid":`Label-status${i}`,sx:d(r=>({...p,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[s]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===i&&{disabled:!0,tabIndex:-1},...x,children:[r(t,{sx:d({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===i&&{backgroundColor:"warning.dark"},...["alert","error"].includes(i)&&{backgroundColor:"error.main"},..."neutral"===i&&{backgroundColor:"onSurface.os500"},..."disabled"===i&&{backgroundColor:"disabled.secondary"}},b),...g}),a||n]})}),C=e(({type:e,label:n,children:i,variant:s="A+++",size:l="large",sx:c,labelBoxProps:x,labelNextProps:u,...b},g)=>{const m=a(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>m[r]||"#016703",{sx:C,...h}=x||{},{sx:y,...k}=u||{};return o(t,{ref:g,"data-testid":`Label-CO2${s}`,sx:d({...p},c),...b,children:[r(t,{component:"span",sx:d({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"===l&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},C),...h,children:n||i||s}),r(t,{sx:d({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"===l&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...k})]})}),h=e((o,e)=>{const t=a(()=>{switch(o.type){case"simple":return u;case"feature":return b;case"semantic":return m;case"status":case"indicator":return f;case"CO2":return C;default:return x}},[o.type]);return r(t,{component:"span",...o,ref:e})});export{h as Label};
+import{jsx as r,jsxs as o}from"react/jsx-runtime";import{forwardRef as e,useMemo as a}from"react";import{Box as t,useTheme as n}from"@mui/material";import{CircleExclamationIcon as i}from"../icon/stroke/CircleExclamationIcon.js";import{CircleInformationIcon as s}from"../icon/stroke/CircleInformationIcon.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{getInteractiveStyle as c}from"../../materialui/button/interactive.js";import{sxOverride as d}from"../../utils/sxOverride/sxOverride.js";const p={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"},x=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-general",sx:d({...p,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},n),...i,children:e||a})),u=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-simple",sx:d(r=>({...p,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),n),...i,children:e||a})),b=e(({type:o,label:e,children:a,variant:n="primary",sx:i,...s},l)=>r(t,{ref:l,"data-testid":`Label-feature${n}`,sx:d({...p,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===n&&{backgroundColor:"onSurface.os600"},..."discount"===n&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===n&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(n)&&{backgroundColor:"error.main"},..."info"===n&&{backgroundColor:"info.main"},..."warning"===n&&{backgroundColor:"warning.dark"},..."success"===n&&{backgroundColor:"brand.primary"}},i),...s,children:e||a}));function g(r,o){return{...r,"&.MuiButtonBase-root":{...c(r,o)}}}const m=e(({type:e,label:c,children:x,variant:u="positive",sx:b,iconProps:m,IconComponent:f,onClick:C,...h},y)=>{const{sx:k,...w}=m||{},S=a(()=>{switch(u){case"alert":case"error":case"warning":return i;default:return s}},[u]),v=f||S,j=n();return o(t,{ref:y,"data-testid":`Label-semantic${u}`,sx:d({...p,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":{...l(j,!0,1)},...g({color:"brand.primary",backgroundColor:"transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(u)&&{...g({color:"error.main",backgroundColor:"transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===u&&{...g({color:"warning.dark",backgroundColor:"transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===u&&{...g({color:"info.main",backgroundColor:"transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},b),onClick:C,...h,children:[r(v,{"data-testid":`icon-${u}`,sx:d({fontSize:"18px"},k),...w}),c||x]})}),f=e(({type:e,label:a,children:n,variant:i="positive",labelPlacement:s="end",dotProps:l,sx:c,...x},u)=>{const{sx:b,...g}=l||{};return o(t,{ref:u,"data-testid":`Label-status${i}`,sx:d(r=>({...p,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[s]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===i&&{disabled:!0,tabIndex:-1},...x,children:[r(t,{sx:d({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===i&&{backgroundColor:"warning.dark"},...["alert","error"].includes(i)&&{backgroundColor:"error.main"},..."neutral"===i&&{backgroundColor:"onSurface.os500"},..."disabled"===i&&{backgroundColor:"disabled.secondary"}},b),...g}),a||n]})}),C=e(({type:e,label:n,children:i,variant:s="A+++",size:l="large",sx:c,labelBoxProps:x,labelNextProps:u,...b},g)=>{const m=a(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>m[r]||"#016703",{sx:C,...h}=x||{},{sx:y,...k}=u||{};return o(t,{ref:g,"data-testid":`Label-CO2${s}`,sx:d({...p},c),...b,children:[r(t,{component:"span",sx:d({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"===l&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},C),...h,children:n||i||s}),r(t,{sx:d({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"===l&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...k})]})}),h=e((o,e)=>{const t=a(()=>{switch(o.type){case"simple":return u;case"feature":return b;case"semantic":return m;case"status":case"indicator":return f;case"CO2":return C;default:return x}},[o.type]);return r(t,{component:"span",...o,ref:e})});export{h as Label};
 //# sourceMappingURL=Label.js.map

package/components/label/Label.js.map CHANGED Viewed

	@@ -1 +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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"}
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',\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/components/notification/NotificationCenterHeaderButton.d.ts CHANGED Viewed

@@ -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/components/playPauseButton/PlayPauseButton.d.ts CHANGED Viewed

@@ -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/components/promptBar/PromptAttachments.js CHANGED Viewed

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

package/components/promptBar/PromptAttachments.js.map CHANGED Viewed

	@@ -1 +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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"}
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: '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/components/promptBar/PromptSubmitIconButton.d.ts CHANGED Viewed

@@ -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/components/promptBar/PromptSubmitIconButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useMemo as o}from"react";import{Button as n,IconButton as a}from"@mui/material";import{SendIcon as i}from"../icon/stroke/SendIcon.js";import{SoundwaveIcon as t}from"../icon/stroke/SoundwaveIcon.js";import{ShapeSquareFilledIcon as s}from"../icon/filled/ShapeSquareFilledIcon.js";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";const c=e(({value:e,setValue:c,attachments:m,processing:f,recording:d,label:u,disableVoice:p,SendIconComponent:g,VoiceIconComponent:b,ProcessingIconComponent:h,RecordingIconComponent:v,sx:I,disabled:S,...y},w)=>{const Y=b||t,x=g||i,j=v||t,k=h||s,C=o(()=>f?"processing":d?"recording":p||e||m?.length?"submit":"voice",[f,d,e,p,m?.length]),V=o(()=>u?n:a,[u]),O=o(()=>{switch(C){case"processing":return k;case"recording":return j;case"submit":return x;default:return Y}},[C,k,j,x,Y]);return r(V,{ref:w,color:"primary",size:"small",disabled:S,...u?{variant:"contained",startIcon:r(O,{})}:{variant:"filled"},..."voice"===C&&{"aria-label":"Voice input",color:"surface"},..."submit"===C&&{"aria-label":"Submit",...p&&!e&&!m?.length&&{disabled:!0}},..."recording"===C&&{"aria-label":"Stop recording"},..."processing"===C&&{"aria-label":"Stop"},...y,sx:l({..."recording"===C&&!v&&{"@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"}}}}},I),children:u||r(O,{})},C)});export{c as PromptSubmitIconButton};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useMemo as o}from"react";import{Button as n,IconButton as a}from"@mui/material";import{SendIcon as i}from"../icon/stroke/SendIcon.js";import{SoundwaveIcon as t}from"../icon/stroke/SoundwaveIcon.js";import{ShapeSquareFilledIcon as s}from"../icon/filled/ShapeSquareFilledIcon.js";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";const c=e(({value:e,setValue:c,attachments:m,processing:f,recording:d,label:u,disableVoice:p,SendIconComponent:g,VoiceIconComponent:b,ProcessingIconComponent:h,RecordingIconComponent:v,sx:I,disabled:S,...y},w)=>{const Y=b??t,x=g??i,j=v??t,k=h??s,C=o(()=>f?"processing":d?"recording":p||e||m?.length?"submit":"voice",[f,d,e,p,m?.length]),V=o(()=>u?n:a,[u]),O=o(()=>{switch(C){case"processing":return k;case"recording":return j;case"submit":return x;default:return Y}},[C,k,j,x,Y]);return r(V,{ref:w,color:"primary",size:"small",disabled:S,...u?{variant:"contained",startIcon:r(O,{})}:{variant:"filled"},..."voice"===C&&{"aria-label":"Voice input",color:"surface"},..."submit"===C&&{"aria-label":"Submit",...void 0===S&&p&&!e&&!m?.length&&{disabled:!0}},..."recording"===C&&{"aria-label":"Stop recording"},..."processing"===C&&{"aria-label":"Stop"},...y,sx:l({..."recording"===C&&!v&&{"@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"}}}}},I),children:u||r(O,{})},C)});export{c as PromptSubmitIconButton};
 //# sourceMappingURL=PromptSubmitIconButton.js.map

package/components/promptBar/PromptSubmitIconButton.js.map CHANGED Viewed

	@@ -1 +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 ...(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 ? ~~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","sxOverride","transform","path","transformOrigin","transition","animation","animationDelay","children"],"mappings":"uZA2DO,MAAMA,EAA0DC,EACrE,EAEIC,QACAC,WACAC,cACAC,aACAC,YACAC,QACAC,eACAC,oBACAC,qBACAC,0BACAC,yBACAC,KACAC,cACGC,GAELC,KAEA,MAAMC,EAAYP,GAAsBQ,EAClCC,EAAaV,GAAqBW,EAClCC,EAAgBT,GAA0BM,EAC1CI,EAAiBX,GAA2BY,EAE5CC,EAAQC,EAAyD,IACjEpB,EAAmB,aACnBC,EAAkB,YAClBE,GAAgBN,GAASE,GAAasB,OAAe,SAClD,QACN,CAACrB,EAAYC,EAAWJ,EAAOM,EAAcJ,GAAasB,SAEvDC,EAAYF,EAAwC,IACpDlB,EACKqB,EAEFC,EACN,CAACtB,IAEEuB,EAAOL,EAAQ,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,EAACJ,EAAS,CACRX,IAAKA,EAELgB,MAAM,UACNC,KAAK,QACLnB,SAAUA,KACLP,EAAQ,CAAE2B,QAAS,YAAaC,UAAWJ,EAACD,EAAI,CAAA,IAAQ,CAAEI,QAAS,aACzD,UAAVV,GAAqB,CAAE,aAAc,cAAeQ,MAAO,cACjD,WAAVR,GAAsB,CACzB,aAAc,~~YACVhB~~,IAAiBN,IAAUE,GAAasB,QAAU,CAAEZ,UAAU,~~OAErD~~,cAAVU,GAAyB,CAAE,aAAc,qBAC/B,eAAVA,GAA0B,CAAE,aAAc,WAC3CT,EACJF,~~GAAIuB~~,EACF,IAEgB,~~cAAVZ~~,IACDZ,GAA0B,CACzB,iCAAkC,CAChC,KAAM,~~CAAEyB~~,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,~~YAM5B7B~~,~~GACD8B~~,~~SAEApC~~,~~GAAgBwB~~,EAACD,EAAI,CAAA,~~IAjDjBN~~"}
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 './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":"uZA2DO,MAAMA,EAA0DC,EACrE,EAEIC,QACAC,WACAC,cACAC,aACAC,YACAC,QACAC,eACAC,oBACAC,qBACAC,0BACAC,yBACAC,KACAC,cACGC,GAELC,KAEA,MAAMC,EAAYP,GAAsBQ,EAClCC,EAAaV,GAAqBW,EAClCC,EAAgBT,GAA0BM,EAC1CI,EAAiBX,GAA2BY,EAE5CC,EAAQC,EAAyD,IACjEpB,EAAmB,aACnBC,EAAkB,YAClBE,GAAgBN,GAASE,GAAasB,OAAe,SAClD,QACN,CAACrB,EAAYC,EAAWJ,EAAOM,EAAcJ,GAAasB,SAEvDC,EAAYF,EAAwC,IACpDlB,EACKqB,EAEFC,EACN,CAACtB,IAEEuB,EAAOL,EAAQ,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,EAACJ,EAAS,CACRX,IAAKA,EAELgB,MAAM,UACNC,KAAK,QACLnB,SAAUA,KACLP,EAAQ,CAAE2B,QAAS,YAAaC,UAAWJ,EAACD,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,EACF,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,EAACD,EAAI,CAAA,IAjDVN"}

package/components/quickLink/QuickLink.js CHANGED Viewed

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

package/components/quickLink/QuickLink.js.map CHANGED Viewed

	@@ -1 +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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"}
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 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/components/search/Search.js CHANGED Viewed

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