npm - @skodaflow/web-library - Versions diffs - 8.1.0 → 8.3.0 - Mend

@skodaflow/web-library 8.1.0 → 8.3.0

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 (490) hide show

package/components/promptBar/PromptAttachments.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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};
2	+ //# sourceMappingURL=PromptAttachments.js.map

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

@@ -0,0 +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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"}

package/components/promptBar/PromptBar.d.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import { ComponentType, FC, ReactNode } from 'react';
+import { IconButtonProps, InputAdornmentProps, OutlinedTextFieldProps, SvgIconProps } from '@mui/material';
+import { PromptSubmitIconButtonProps } from './PromptSubmitIconButton';
+import { PromptAttachment, PromptAttachmentsProps } from './PromptAttachments';
+export interface PromptBarProps extends Omit<OutlinedTextFieldProps, 'label' | 'variant' | 'size'> {
+    /**
+     * Forces a specific layout variant. `small` uses the compact mobile style, `medium` uses the
+     * spacious desktop style. When omitted the layout switches automatically.
+     */
+    size?: 'auto' | 'small' | 'medium';
+    /**
+     * Indicates that a request is being processed. Changes the submit button icon to a stop icon.
+     */
+    processing?: boolean;
+    /**
+     * Indicates that voice recording is in progress.
+     */
+    recording?: boolean;
+    /**
+     * List of attachments displayed above the text input.
+     */
+    attachments?: PromptAttachment[];
+    /**
+     * Callback to update the attachments list.
+     */
+    setAttachments?: (attachments: PromptAttachment[]) => void;
+    /**
+     * Properties passed to the PromptAttachments component.
+     */
+    promptAttachmentsProps?: Omit<PromptAttachmentsProps, 'attachments' | 'setAttachments'>;
+    /**
+     * Hides the add button for attachments
+     */
+    disableAdd?: boolean;
+    /**
+     * Properties passed to the add icon button at the start of the input
+     */
+    addIconButtonProps?: IconButtonProps;
+    /**
+     * Custom component to be used for the add icon
+     */
+    AddIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Extra buttons rendered inside the start adornment, after the add button.
+     */
+    startAdornmentButtons?: ReactNode;
+    /**
+     * Properties applied to the start InputAdornment wrapper
+     */
+    startAdornmentProps?: Omit<InputAdornmentProps, 'position'>;
+    /**
+     * Do not show voice button, use when speech input is not available or not supported.
+     */
+    disableVoice?: boolean;
+    /**
+     * Properties passed to the submit icon button
+     */
+    submitIconButtonProps?: PromptSubmitIconButtonProps;
+    /**
+     * Extra buttons rendered inside the end adornment, alongside the submit button.
+     */
+    endAdornmentButtons?: ReactNode;
+    /**
+     * Properties applied to the toolbar InputAdornment wrapper
+     */
+    endAdornmentProps?: Omit<InputAdornmentProps, 'position'>;
+}
+/**
+ * Input field for natural language AI-powered requests
+ */
+export declare const PromptBar: FC<PromptBarProps>;

package/components/promptBar/PromptBar.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as o,useState as n,useCallback as i,useRef as s,useEffect as l}from"react";import{TextField as a,Box as d,InputAdornment as p,IconButton as u}from"@mui/material";import{PlusIcon as m}from"../icon/stroke/PlusIcon.js";import{sxOverride as c}from"../../utils/sxOverride/sxOverride.js";import{PromptSubmitIconButton as h}from"./PromptSubmitIconButton.js";import{PromptAttachments as x}from"./PromptAttachments.js";const g=o(({sx:o,disabled:g,value:f,onChange:b,slotProps:v,addIconButtonProps:w,AddIconComponent:A,startAdornmentProps:M,submitIconButtonProps:S,processing:I,recording:B,endAdornmentProps:C,disableAdd:P,disableVoice:R,placeholder:F,attachments:y,setAttachments:O,promptAttachmentsProps:N,startAdornmentButtons:W,endAdornmentButtons:j,size:k,...z},H)=>{const{sx:E,...V}=w??{},{sx:G,...L}=N??{},{sx:$,...T}=M??{},{sx:q,...D}=C??{},{input:J,...K}=v??{},{sx:Q,startAdornment:U,...X}=J??{},Y=(e,t)=>({xs:"medium"===k?t:e,md:"small"===k?e:t}),[Z,_]=n(""),ee=void 0===f?Z:f,te=i(e=>{_(e.target.value),b?.(e)},[b]),re=i(e=>{te({target:{value:e}})},[te]),oe=A\|\|m,[ne,ie]=n(!1),se=ne\|\|ee.includes("\n"),le=s(null),ae=s(null),de=s(null),[pe,ue]=n(0),[me,ce]=n(0);return l(()=>{const e=le.current,t=ae.current,r=de.current,o=new ResizeObserver(()=>{if(e){const t=Number.parseFloat(getComputedStyle(e).lineHeight);ie(e.clientHeight>t)}if(t){const e=getComputedStyle(t.parentElement),r=getComputedStyle(t);ue(t.offsetWidth+Number.parseFloat(r.marginRight)+Number.parseFloat(e.paddingLeft))}if(r){const e=getComputedStyle(r.parentElement),t=getComputedStyle(r);ce(r.offsetWidth+Number.parseFloat(t.marginLeft)+Number.parseFloat(e.paddingRight))}});return e&&o.observe(e),t&&o.observe(t),r&&o.observe(r),()=>o.disconnect()},[]),e(a,{ref:H,minRows:1,maxRows:4,multiline:!0,disabled:g,fullWidth:!0,value:ee,placeholder:F,onChange:te,sx:c({borderRadius:Y(se\|\|y?.length?"16px":"1000px","16px"),"&:not(.Flow-NoFocusRing):has(.Mui-focused):has(.MuiFormHelperText-root)":{"&&:before":{borderRadius:"16px"}}},o),slotProps:{input:{sx:c({borderRadius:"inherit",padding:Y("6px 8px","12px"),flexWrap:Y(se\|\|y?.length?"wrap":"nowrap","wrap"),"&, &.Mui-focused":{"& .MuiOutlinedInput-notchedOutline":{"&, &:not(.Mui-error)":{borderColor:"onSurface.os500",borderWidth:"1px"}},"&.Mui-error:not(.Mui-focused) .MuiOutlinedInput-notchedOutline":{borderColor:"error.main"}},"& textarea":{pl:Y(se\|\|y?.length?1:0,0),...P&&!U&&!W&&{pl:1},pr:Y(se\|\|y?.length?1:0,0)}},Q),startAdornment:t(r,{children:[!!y?.length&&e(x,{attachments:y,setAttachments:O,sx:c({order:-1,flexBasis:"100%",...1===y?.length&&y[0].src&&{ml:1}},G),...L}),U??(!P&&t(p,{ref:ae,position:"start",sx:c({order:Y(se\|\|y?.length?"1":"0","1"),mt:Y(se\|\|y?.length?1:0,1),mr:1,"& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root":{fontSize:"17px"}},$),...T,children:[e(u,{"aria-label":"Add attachment",size:"small",disabled:g,sx:c({},E),...V,children:e(oe,{})}),W]})),e(d,{ref:le,component:"span","aria-hidden":!0,sx:{display:Y("block","none"),position:"absolute",left:"0",visibility:"hidden",pointerEvents:"none",whiteSpace:"pre-wrap",wordBreak:"break-word",overflowWrap:"break-word",pl:`${pe\|\|16}px`,pr:`${me+1}px`,flexGrow:"1",maxHeight:"3em",overflow:"hidden"},children:ee\|\|F\|\|""})]}),endAdornment:t(r,{children:[e(d,{sx:{order:"2",flexGrow:"1",flexBasis:"1px"}}),t(p,{ref:de,position:"end",sx:c({order:"3",gap:Y(.5,1),mt:Y(se\|\|y?.length?1:0,1),ml:1,"& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root":{fontSize:"17px"}},q),...D,children:[j,e(h,{value:ee,setValue:re,attachments:y,disabled:g,processing:I,recording:B,disableVoice:R,...S})]})]}),...X},...K},...z,variant:"outlined",label:null})});export{g as PromptBar};
2	+ //# sourceMappingURL=PromptBar.js.map

package/components/promptBar/PromptBar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PromptBar.js","sources":["../../../src/components/promptBar/PromptBar.tsx"],"sourcesContent":["import { ComponentType, ChangeEvent, FC, ReactNode, forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { ResponsiveStyleValue } from '@mui/system';\nimport {\n Box,\n IconButton,\n IconButtonProps,\n InputAdornment,\n InputAdornmentProps,\n OutlinedInputProps,\n OutlinedTextFieldProps,\n SvgIconProps,\n TextField,\n} from '@mui/material';\nimport { PlusIcon } from '@/src/components/icon/stroke/PlusIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { PromptSubmitIconButton, PromptSubmitIconButtonProps } from './PromptSubmitIconButton';\nimport { PromptAttachment, PromptAttachments, PromptAttachmentsProps } from './PromptAttachments';\n\nexport interface PromptBarProps extends Omit<OutlinedTextFieldProps, 'label' | 'variant' | 'size'> {\n /**\n * Forces a specific layout variant. `small` uses the compact mobile style, `medium` uses the\n * spacious desktop style. When omitted the layout switches automatically.\n */\n size?: 'auto' | 'small' | 'medium';\n /**\n * Indicates that a request is being processed. Changes the submit button icon to a stop icon.\n */\n processing?: boolean;\n /**\n * Indicates that voice recording is in progress.\n */\n recording?: boolean;\n /**\n * List of attachments displayed above the text input.\n */\n attachments?: PromptAttachment[];\n /**\n * Callback to update the attachments list.\n */\n setAttachments?: (attachments: PromptAttachment[]) => void;\n /**\n * Properties passed to the PromptAttachments component.\n */\n promptAttachmentsProps?: Omit<PromptAttachmentsProps, 'attachments' | 'setAttachments'>;\n /**\n * Hides the add button for attachments\n */\n disableAdd?: boolean;\n /**\n * Properties passed to the add icon button at the start of the input\n */\n addIconButtonProps?: IconButtonProps;\n /**\n * Custom component to be used for the add icon\n */\n AddIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Extra buttons rendered inside the start adornment, after the add button.\n */\n startAdornmentButtons?: ReactNode;\n /**\n * Properties applied to the start InputAdornment wrapper\n */\n startAdornmentProps?: Omit<InputAdornmentProps, 'position'>;\n /**\n * Do not show voice button, use when speech input is not available or not supported.\n */\n disableVoice?: boolean;\n /**\n * Properties passed to the submit icon button\n */\n submitIconButtonProps?: PromptSubmitIconButtonProps;\n /**\n * Extra buttons rendered inside the end adornment, alongside the submit button.\n */\n endAdornmentButtons?: ReactNode;\n /**\n * Properties applied to the toolbar InputAdornment wrapper\n */\n endAdornmentProps?: Omit<InputAdornmentProps, 'position'>;\n}\n\n/**\n * Input field for natural language AI-powered requests\n */\nexport const PromptBar: FC<PromptBarProps> = forwardRef(\n (\n {\n sx,\n disabled,\n value,\n onChange,\n slotProps,\n addIconButtonProps,\n AddIconComponent,\n startAdornmentProps,\n submitIconButtonProps,\n processing,\n recording,\n endAdornmentProps,\n disableAdd,\n disableVoice,\n placeholder,\n attachments,\n setAttachments,\n promptAttachmentsProps,\n startAdornmentButtons,\n endAdornmentButtons,\n size,\n ...rest\n },\n ref,\n ) => {\n const { sx: addIconButtonSx, ...restAddIconButton } = addIconButtonProps ?? {};\n const { sx: promptAttachmentsSx, ...restPromptAttachments } = promptAttachmentsProps ?? {};\n const { sx: startAdornmentSx, ...restStartAdornment } = startAdornmentProps ?? {};\n const { sx: endAdornmentSx, ...restEndAdornment } = endAdornmentProps ?? {};\n const { input: inputSlotProps, ...restSlotProps } = (slotProps ?? {}) as PromptBarProps['slotProps'];\n const {\n sx: inputSx,\n startAdornment: startAdornmentOverride,\n ...restInputSlotProps\n } = (inputSlotProps ?? {}) as OutlinedInputProps;\n\n // handle responsive styling of compact and desktop variants\n const responsive = <T,>(xs: T, md: T): ResponsiveStyleValue<T> => ({\n xs: size === 'medium' ? md : xs,\n md: size === 'small' ? xs : md,\n });\n\n // manage internal and provided value, determines which icon will be shown\n const [internalValue, setInternalValue] = useState('');\n const currentValue = (value === undefined ? internalValue : value) as string;\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInternalValue(e.target.value);\n onChange?.(e);\n },\n [onChange],\n );\n const handleSetValue = useCallback(\n (v: string) => {\n handleChange({ target: { value: v } } as ChangeEvent<HTMLInputElement>);\n },\n [handleChange],\n );\n\n const AddIcon = AddIconComponent || PlusIcon;\n\n // detect multirow to update style\n const [isWrapped, setIsWrapped] = useState(false);\n const isMultirow = isWrapped || currentValue.includes('\\n');\n const shadowRef = useRef<HTMLSpanElement>(null);\n const internalStartRef = useRef<HTMLDivElement>(null);\n const internalEndRef = useRef<HTMLDivElement>(null);\n const [startWidth, setStartWidth] = useState(0);\n const [endWidth, setEndWidth] = useState(0);\n useEffect(() => {\n const shadowEl = shadowRef.current;\n const startEl = internalStartRef.current;\n const endEl = internalEndRef.current;\n\n const observer = new ResizeObserver(() => {\n if (shadowEl) {\n const lineHeight = Number.parseFloat(getComputedStyle(shadowEl).lineHeight);\n setIsWrapped(shadowEl.clientHeight > lineHeight);\n }\n if (startEl) {\n const containerStyle = getComputedStyle(startEl.parentElement);\n const adornmentStyle = getComputedStyle(startEl);\n setStartWidth(\n startEl.offsetWidth +\n Number.parseFloat(adornmentStyle.marginRight) +\n Number.parseFloat(containerStyle.paddingLeft),\n );\n }\n if (endEl) {\n const containerStyle = getComputedStyle(endEl.parentElement);\n const adornmentStyle = getComputedStyle(endEl);\n setEndWidth(\n endEl.offsetWidth +\n Number.parseFloat(adornmentStyle.marginLeft) +\n Number.parseFloat(containerStyle.paddingRight),\n );\n }\n });\n\n if (shadowEl) observer.observe(shadowEl);\n if (startEl) observer.observe(startEl);\n if (endEl) observer.observe(endEl);\n return () => observer.disconnect();\n }, []);\n\n return (\n <TextField\n ref={ref}\n minRows={1}\n maxRows={4}\n multiline\n disabled={disabled}\n fullWidth\n value={currentValue}\n placeholder={placeholder}\n onChange={handleChange}\n sx={sxOverride(\n {\n borderRadius: responsive(isMultirow || attachments?.length ? '16px' : '1000px', '16px'),\n // correct focus ring for small variant with helperText\n '&:not(.Flow-NoFocusRing):has(.Mui-focused):has(.MuiFormHelperText-root)': {\n '&&:before': {\n borderRadius: '16px',\n },\n },\n },\n sx,\n )}\n slotProps={{\n input: {\n sx: sxOverride(\n {\n borderRadius: 'inherit',\n padding: responsive('6px 8px', '12px'),\n // allow placing toolbar on the second row\n flexWrap: responsive(isMultirow || attachments?.length ? 'wrap' : 'nowrap', 'wrap'),\n '&, &.Mui-focused': {\n '& .MuiOutlinedInput-notchedOutline': {\n '&, &:not(.Mui-error)': {\n borderColor: 'onSurface.os500',\n borderWidth: '1px',\n },\n },\n '&.Mui-error:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': {\n borderColor: 'error.main',\n },\n },\n '& textarea': {\n pl: responsive(isMultirow || attachments?.length ? 1 : 0, 0),\n ...(disableAdd &&\n !startAdornmentOverride &&\n !startAdornmentButtons && {\n pl: 1,\n }),\n pr: responsive(isMultirow || attachments?.length ? 1 : 0, 0),\n },\n },\n inputSx,\n ),\n startAdornment: (\n <>\n {!!attachments?.length && (\n <PromptAttachments\n attachments={attachments}\n setAttachments={setAttachments}\n sx={sxOverride(\n {\n order: -1,\n flexBasis: '100%',\n ...(attachments?.length === 1 && attachments[0].src && { ml: 1 }),\n },\n promptAttachmentsSx,\n )}\n {...restPromptAttachments}\n />\n )}\n {startAdornmentOverride ??\n (!disableAdd && (\n <InputAdornment\n ref={internalStartRef}\n position=\"start\"\n sx={sxOverride(\n {\n // move to second row, start\n order: responsive(isMultirow || attachments?.length ? '1' : '0', '1'),\n // space between text and input in large variant\n mt: responsive(isMultirow || attachments?.length ? 1 : 0, 1),\n // space between text and buttons in compact variant\n mr: 1,\n // style of icon buttons\n '& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root': {\n fontSize: '17px',\n },\n },\n startAdornmentSx,\n )}\n {...restStartAdornment}\n >\n <IconButton\n aria-label=\"Add attachment\"\n size=\"small\"\n disabled={disabled}\n sx={sxOverride({}, addIconButtonSx)}\n {...restAddIconButton}\n >\n <AddIcon />\n </IconButton>\n {startAdornmentButtons}\n </InputAdornment>\n ))}\n <Box\n ref={shadowRef}\n component=\"span\"\n aria-hidden\n sx={{\n display: responsive('block', 'none'),\n position: 'absolute',\n left: '0',\n visibility: 'hidden',\n pointerEvents: 'none',\n // correctly wrap as in textarea\n whiteSpace: 'pre-wrap',\n wordBreak: 'break-word',\n overflowWrap: 'break-word',\n pl: `${startWidth || 16}px`,\n pr: `${endWidth + 1}px`, // 1px to fix possible rounding error\n flexGrow: '1',\n maxHeight: '3em',\n overflow: 'hidden',\n }}\n >\n {currentValue || placeholder || ''}\n </Box>\n </>\n ),\n endAdornment: (\n <>\n <Box sx={{ order: '2', flexGrow: '1', flexBasis: '1px' }} />\n <InputAdornment\n ref={internalEndRef}\n position=\"end\"\n sx={sxOverride(\n {\n // move to second row, end\n order: '3',\n // space between multiple buttons\n gap: responsive(0.5, 1),\n // space between text and input in large variant\n mt: responsive(isMultirow || attachments?.length ? 1 : 0, 1),\n // space between text and buttons in compact variant\n ml: 1,\n // style of icon buttons\n '& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root': {\n fontSize: '17px',\n },\n },\n endAdornmentSx,\n )}\n {...restEndAdornment}\n >\n {endAdornmentButtons}\n <PromptSubmitIconButton\n value={currentValue}\n setValue={handleSetValue}\n attachments={attachments}\n disabled={disabled}\n processing={processing}\n recording={recording}\n disableVoice={disableVoice}\n {...submitIconButtonProps}\n />\n </InputAdornment>\n </>\n ),\n ...restInputSlotProps,\n },\n ...restSlotProps,\n }}\n {...rest}\n variant=\"outlined\"\n label={null}\n />\n );\n },\n);\n"],"names":["PromptBar","forwardRef","sx","disabled","value","onChange","slotProps","addIconButtonProps","AddIconComponent","startAdornmentProps","submitIconButtonProps","processing","recording","endAdornmentProps","disableAdd","disableVoice","placeholder","attachments","setAttachments","promptAttachmentsProps","startAdornmentButtons","endAdornmentButtons","size","rest","ref","addIconButtonSx","restAddIconButton","promptAttachmentsSx","restPromptAttachments","startAdornmentSx","restStartAdornment","endAdornmentSx","restEndAdornment","input","inputSlotProps","restSlotProps","inputSx","startAdornment","startAdornmentOverride","restInputSlotProps","responsive","xs","md","internalValue","setInternalValue","useState","currentValue","undefined","handleChange","useCallback","e","target","handleSetValue","v","AddIcon","PlusIcon","isWrapped","setIsWrapped","isMultirow","includes","shadowRef","useRef","internalStartRef","internalEndRef","startWidth","setStartWidth","endWidth","setEndWidth","useEffect","shadowEl","current","startEl","endEl","observer","ResizeObserver","lineHeight","Number","parseFloat","getComputedStyle","clientHeight","containerStyle","parentElement","adornmentStyle","offsetWidth","marginRight","paddingLeft","marginLeft","paddingRight","observe","disconnect","_jsx","TextField","minRows","maxRows","multiline","fullWidth","sxOverride","borderRadius","length","padding","flexWrap","borderColor","borderWidth","pl","pr","_jsxs","_Fragment","children","PromptAttachments","order","flexBasis","src","ml","InputAdornment","position","mt","mr","fontSize","IconButton","Box","component","display","left","visibility","pointerEvents","whiteSpace","wordBreak","overflowWrap","flexGrow","maxHeight","overflow","endAdornment","gap","PromptSubmitIconButton","setValue","variant","label"],"mappings":"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"}

package/components/promptBar/PromptSubmitIconButton.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import { FC, ComponentType, ReactNode } from 'react';
+import { IconButtonProps, SvgIconProps } from '@mui/material';
+import { PromptAttachment } from '@/src';
+export interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {
+    /**
+     * Current input value. Switches the button from voice to submit variant.
+     */
+    value?: string;
+    /**
+     * Setter for the input value.
+     */
+    setValue?: (value: string) => void;
+    /**
+     * List of attachments displayed above the text input.
+     */
+    attachments?: PromptAttachment[];
+    /**
+     * Indicates that a request is being processed. Shows the processing (stop) icon.
+     */
+    processing?: boolean;
+    /**
+     * Indicates that voice recording is in progress.
+     */
+    recording?: boolean;
+    /**
+     * Label that changes IconButton to Button.
+     */
+    label?: ReactNode;
+    /**
+     * Do not show voice button. Use when speech input is unavailable or unsupported.
+     */
+    disableVoice?: boolean;
+    /**
+     * Custom component for the send icon, shown in submit state.
+     */
+    SendIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the voice icon, shown when input is empty and not recording.
+     */
+    VoiceIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the processing icon, shown while a request is processing.
+     */
+    ProcessingIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the recording icon, shown as startIcon on the recording stop button.
+     */
+    RecordingIconComponent?: ComponentType<SvgIconProps>;
+}
+/**
+ * Submit button for the PromptBar. Switches between voice and submit variants
+ * depending on the current state.
+ */
+export declare const PromptSubmitIconButton: FC<PromptSubmitIconButtonProps>;

package/components/promptBar/PromptSubmitIconButton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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};
2	+ //# sourceMappingURL=PromptSubmitIconButton.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"PromptSubmitIconButton.js","sources":["../../../src/components/promptBar/PromptSubmitIconButton.tsx"],"sourcesContent":["import { FC, ComponentType, forwardRef, useMemo, ReactNode } from 'react';\nimport { Button, ButtonBaseProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { SendIcon } from '@/src/components/icon/stroke/SendIcon';\nimport { SoundwaveIcon } from '@/src/components/icon/stroke/SoundwaveIcon';\nimport { ShapeSquareFilledIcon } from '@/src/components/icon/filled/ShapeSquareFilledIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { PromptAttachment } from '@/src';\n\nexport interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {\n /**\n * Current input value. Switches the button from voice to submit variant.\n */\n value?: string;\n /**\n * Setter for the input value.\n */\n setValue?: (value: string) => void;\n /**\n * List of attachments displayed above the text input.\n */\n attachments?: PromptAttachment[];\n /**\n * Indicates that a request is being processed. Shows the processing (stop) icon.\n */\n processing?: boolean;\n /**\n * Indicates that voice recording is in progress.\n */\n recording?: boolean;\n /**\n * Label that changes IconButton to Button.\n */\n label?: ReactNode;\n /**\n * Do not show voice button. Use when speech input is unavailable or unsupported.\n */\n disableVoice?: boolean;\n /**\n * Custom component for the send icon, shown in submit state.\n */\n SendIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Custom component for the voice icon, shown when input is empty and not recording.\n */\n VoiceIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Custom component for the processing icon, shown while a request is processing.\n */\n ProcessingIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Custom component for the recording icon, shown as startIcon on the recording stop button.\n */\n RecordingIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * Submit button for the PromptBar. Switches between voice and submit variants\n * depending on the current state.\n */\nexport const PromptSubmitIconButton: FC<PromptSubmitIconButtonProps> = forwardRef(\n (\n {\n value,\n setValue,\n attachments,\n processing,\n recording,\n label,\n disableVoice,\n SendIconComponent,\n VoiceIconComponent,\n ProcessingIconComponent,\n RecordingIconComponent,\n sx,\n disabled,\n ...rest\n },\n ref,\n ) => {\n const VoiceIcon = VoiceIconComponent ?? SoundwaveIcon;\n const SubmitIcon = SendIconComponent ?? SendIcon;\n const RecordingIcon = RecordingIconComponent ?? SoundwaveIcon;\n const ProcessingIcon = ProcessingIconComponent ?? ShapeSquareFilledIcon;\n\n const state = useMemo<'voice' | 'recording' | 'submit' | 'processing'>(() => {\n if (processing) return 'processing';\n if (recording) return 'recording';\n if (disableVoice || value || attachments?.length) return 'submit';\n return 'voice';\n }, [processing, recording, value, disableVoice, attachments?.length]);\n\n const Component = useMemo<ComponentType<ButtonBaseProps>>(() => {\n if (label) {\n return Button;\n }\n return IconButton;\n }, [label]);\n\n const Icon = useMemo(() => {\n switch (state) {\n case 'processing':\n return ProcessingIcon;\n case 'recording':\n return RecordingIcon;\n case 'submit':\n return SubmitIcon;\n case 'voice':\n default:\n return VoiceIcon;\n }\n }, [state, ProcessingIcon, RecordingIcon, SubmitIcon, VoiceIcon]);\n\n return (\n <Component\n ref={ref}\n key={state}\n color=\"primary\"\n size=\"small\"\n disabled={disabled}\n {...(label ? { variant: 'contained', startIcon: <Icon /> } : { variant: 'filled' })}\n {...(state === 'voice' && { 'aria-label': 'Voice input', color: 'surface' })}\n {...(state === 'submit' && {\n 'aria-label': 'Submit',\n ...(disabled === undefined && disableVoice && !value && !attachments?.length && { disabled: true }),\n })}\n {...(state === 'recording' && { 'aria-label': 'Stop recording' })}\n {...(state === 'processing' && { 'aria-label': 'Stop' })}\n {...rest}\n sx={sxOverride(\n {\n // soundwave animation during voice recordin\n ...(state === 'recording' &&\n !RecordingIconComponent && {\n '@keyframes flow-soundbar-small': {\n '0%': { transform: 'scaleY(1)' },\n '25%': { transform: 'scaleY(3.15)' },\n '50%, 100%': { transform: 'scaleY(1)' },\n },\n '@keyframes flow-soundbar-large': {\n '0%': { transform: 'scaleY(0.35)' },\n '25%': { transform: 'scaleY(1)' },\n '50%, 100%': { transform: 'scaleY(0.35)' },\n },\n '& .MuiSvgIcon-root': {\n path: {\n transformOrigin: 'center 60%',\n transition: 'transform 0.3s ease-out',\n '&:nth-of-type(1)': { animation: '1.2s linear infinite flow-soundbar-small' },\n '&:nth-of-type(2)': {\n transform: 'scaleY(0.35)',\n animation: '1.2s linear infinite flow-soundbar-large',\n animationDelay: '0.2s',\n },\n '&:nth-of-type(3)': {\n animation: '1.2s linear infinite flow-soundbar-small',\n animationDelay: '0.4s',\n },\n },\n },\n }),\n },\n sx,\n )}\n >\n {label ?? <Icon />}\n </Component>\n );\n },\n);\n"],"names":["PromptSubmitIconButton","forwardRef","value","setValue","attachments","processing","recording","label","disableVoice","SendIconComponent","VoiceIconComponent","ProcessingIconComponent","RecordingIconComponent","sx","disabled","rest","ref","VoiceIcon","SoundwaveIcon","SubmitIcon","SendIcon","RecordingIcon","ProcessingIcon","ShapeSquareFilledIcon","state","useMemo","length","Component","Button","IconButton","Icon","_jsx","color","size","variant","startIcon","undefined","sxOverride","transform","path","transformOrigin","transition","animation","animationDelay","children"],"mappings":"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/promptBar/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './PromptBar';
+export * from './PromptSubmitIconButton';
+export * from './PromptAttachments';

package/components/quickLink/QuickLink.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { ReactNode, ElementType, ComponentType } from 'react';
-import { StackProps, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';
-export interface QuickLinkProps extends Omit<StackProps<ElementType>, 'title'> {
+import { TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';
+export interface QuickLinkProps extends Omit<BoxProps<ElementType>, 'title'> {
     /**
      * Icon node to be used
      */
@@ -40,7 +40,7 @@ export interface QuickLinkProps extends Omit<StackProps<ElementType>, 'title'> {
     /**
      * Icon and Title wrapper that changes on the mobile
      */
-    titleWrapperProps?: StackProps<ElementType>;
+    titleWrapperProps?: BoxProps<ElementType>;
     /**
      * Button text
      */

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{Stack as i,Box as n,Typography as e,Button as a}from"@mui/material";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:c,titleTypographyProps:x,subtitle:l,subtitleTypographyProps:m,dividerWrapperProps:u,dividerProps:h,contentWrapperProps:k,titleWrapperProps:b,buttonTitle:f,buttonProps:g,buttonIconProps:y,onClick:I,sx:v,...P},C)=>{const{sx:B,...L}=d||{},{sx:M,...Q}=u||{},{sx:w,...S}=h||{},{sx:W,...T}=k||{},{sx:X,...j}=b||{};return t(i,{direction:"column",alignItems:"flex-start",sx:{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,...I&&{onClick:I,role:"button"},tabIndex:-1,...P,children:[r(n,{sx:{position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:o?0:2}},...M},...Q,children:r(n,{component:"hr",sx:{border:"none",position:"absolute",inset:"0",m:0,...w},...S})}),t(n,{sx:{width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"},...W},...T,children:[t(i,{sx:{flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0},...X},...j,children:[o&&r(o,{sx:{display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"},...B},"data-testid":"QuickLink.icon",...L}),c&&r(e,{variant:"h4",display:"block","data-testid":"QuickLink.title",sx:{mb:{xs:0,md:.5}},...x,children:c})]}),l&&r(e,{variant:"disclaimer1",display:"block","data-testid":"QuickLink.subtitle",...m,children:l})]}),f&&r(a,{variant:"navigation",color:"secondary",endIcon:r(s,{}),"data-testid":"QuickLink.button",...g,children:f})]})}),c=o(({sx:t,children:o,...i},e)=>r(n,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3,...t},ref:e,"data-testid":"QuickLink.wrapper",...i,children:o}));export{d as QuickLink,c 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,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};
 //# 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 {\n Stack,\n Box,\n Button,\n Typography,\n StackProps,\n TypographyProps,\n ButtonProps,\n BoxProps,\n SvgIconProps,\n} from '@mui/material';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface QuickLinkProps extends Omit<StackProps<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?: StackProps<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\n return (\n <Stack\n direction=\"column\"\n alignItems=\"flex-start\"\n sx={{\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 ...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={{\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 ...dividerWrapperSx,\n }}\n {...restDividerWrapperProps}\n >\n <Box\n component=\"hr\"\n sx={{\n border: 'none',\n position: 'absolute',\n inset: '0',\n m: 0,\n // style is set via interactive parent\n ...dividerSx,\n }}\n {...restDividerProps}\n />\n </Box>\n <Box\n sx={{ width: '480px', maxWidth: '100%', pr: 3, pt: { xs: '8px', md: '0px' }, ...contentWrapperSx }}\n {...restContentWrapperProps}\n >\n <Stack\n sx={{\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 ...titleWrapperSx,\n }}\n {...restTitleWrapperProps}\n >\n {IconComponent && (\n <IconComponent\n sx={{\n display: 'block',\n fontSize: { xs: '20px', md: '35px' },\n mx: { xs: '2px', md: '0px' },\n my: { xs: '0px', md: '2px' },\n ...iconSx,\n }}\n data-testid=\"QuickLink.icon\"\n {...restIconProps}\n />\n )}\n {title && (\n <Typography\n variant=\"h4\"\n display=\"block\"\n data-testid=\"QuickLink.title\"\n sx={{ mb: { xs: 0, md: 0.5 } }}\n {...titleTypographyProps}\n >\n {title}\n </Typography>\n )}\n </Stack>\n {subtitle && (\n <Typography\n variant=\"disclaimer1\"\n display=\"block\"\n data-testid=\"QuickLink.subtitle\"\n {...subtitleTypographyProps}\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 </Stack>\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={{\n display: 'grid',\n gridTemplateColumns: { xs: '1fr', lg: 'repeat(3, 1fr)' },\n gap: 3,\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","_jsxs","Stack","direction","alignItems","minWidth","cursor","color","textDecoration","gap","xs","md","getInteractiveStyle","hr","backgroundColor","height","theme","palette","mode","transform","role","tabIndex","children","_jsx","Box","position","width","mb","component","border","inset","m","maxWidth","pr","pt","flexDirection","display","fontSize","mx","my","Typography","variant","Button","endIcon","ArrowRightIcon","QuickLinkWrapper","gridTemplateColumns","lg"],"mappings":"qTAwEaA,EAAsCC,EACjD,EAEIC,gBACAC,YACAC,QACAC,uBACAC,WACAC,0BACAC,sBACAC,eACAC,sBACAC,oBACAC,cACAC,cACAC,kBACAC,UACAC,QACGC,GAELC,KAEA,MAAQF,GAAIG,KAAWC,GAAkBjB,GAAa,CAAA,GAC9Ca,GAAIK,KAAqBC,GAA4Bd,GAAuB,CAAA,GAC5EQ,GAAIO,KAAcC,GAAqBf,GAAgB,CAAA,GACvDO,GAAIS,KAAqBC,GAA4BhB,GAAuB,CAAA,GAC5EM,GAAIW,KAAmBC,GAA0BjB,GAAqB,CAAA,EAE9E,OACEkB,EAACC,EAAK,CACJC,UAAU,SACVC,WAAW,aACXhB,GAAI,CACFiB,SAAU,IACVC,OAAQ,UACRC,MAAO,UACPC,eAAgB,QAChBC,IAAK,CAAEC,GAAI,MAAOC,GAAI,WACnBC,EACD,CACEC,GAAI,CACFC,gBAAiB,eACjBC,OAAQ,OAGV,wBAAyB,CACvBD,gBAAiB,cACjBP,MAAQS,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,gBAAkB,kBACrE,yBAA0B,CACxBC,UAAW,mBAEb,uBAAwB,CACtBA,UAAW,qBAIjB,CACEN,GAAI,CACFC,gBAAkBE,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,gBACjFH,OAAQ,OAEV,wBAAyB,CACvBD,gBAAiB,cACjBP,MAAQS,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,kBACvE,uBAAwB,CACtBC,UAAW,oBAEb,qBAAsB,CACpBA,UAAW,yBAKhB/B,GACJ,cACW,YACZE,IAAKA,KACAH,GAAW,CACdA,QAASA,EACTiC,KAAM,UAERC,UAAU,KACNhC,EAAIiC,SAAA,CAERC,EAACC,EAAG,CACFpC,GAAI,CACFqC,SAAU,WACVC,MAAO,OACPX,OAAQ,MAER,KAAM,CAAEY,GAAI,CAAEjB,GAAI,EAAGC,GAAIrC,EAAgB,EAAI,OAC1CmB,MAEDC,EAAuB4B,SAE3BC,EAACC,EAAG,CACFI,UAAU,KACVxC,GAAI,CACFyC,OAAQ,OACRJ,SAAU,WACVK,MAAO,IACPC,EAAG,KAEApC,MAEDC,MAGRK,EAACuB,EAAG,CACFpC,GAAI,CAAEsC,MAAO,QAASM,SAAU,OAAQC,GAAI,EAAGC,GAAI,CAAExB,GAAI,MAAOC,GAAI,UAAYd,MAC5EC,EAAuBwB,SAAA,CAE3BrB,EAACC,EAAK,CACJd,GAAI,CACF+C,cAAe,CAAEzB,GAAI,MAAOC,GAAI,UAChCP,WAAY,CAAEM,GAAI,SAAUC,GAAI,cAChCF,IAAK,CAAEC,GAAI,MAAOC,GAAI,QACtBgB,GAAI,CAAEjB,GAAI,MAAOC,GAAI,MAClBZ,MAEDC,YAEH1B,GACCiD,EAACjD,EAAa,CACZc,GAAI,CACFgD,QAAS,QACTC,SAAU,CAAE3B,GAAI,OAAQC,GAAI,QAC5B2B,GAAI,CAAE5B,GAAI,MAAOC,GAAI,OACrB4B,GAAI,CAAE7B,GAAI,MAAOC,GAAI,UAClBpB,GACJ,cACW,oBACRC,IAGPhB,GACC+C,EAACiB,EAAU,CACTC,QAAQ,KACRL,QAAQ,QAAO,cACH,kBACZhD,GAAI,CAAEuC,GAAI,CAAEjB,GAAI,EAAGC,GAAI,QACnBlC,EAAoB6C,SAEvB9C,OAINE,GACC6C,EAACiB,EAAU,CACTC,QAAQ,cACRL,QAAQ,QAAO,cACH,wBACRzD,EAAuB2C,SAE1B5C,OAINM,GACCuC,EAACmB,GACCD,QAAQ,aACRlC,MAAM,YACNoC,QAASpB,EAACqB,MAAiB,cACf,sBACR3D,EAAWqC,SAEdtC,SAaA6D,EAAoDxE,EAAW,EAAGe,KAAIkC,cAAajC,GAAQC,IAEpGiC,EAACC,EAAG,CACFpC,GAAI,CACFgD,QAAS,OACTU,oBAAqB,CAAEpC,GAAI,MAAOqC,GAAI,kBACtCtC,IAAK,KACFrB,GAELE,IAAKA,EAAG,cACI,uBACRD,EAAIiC,SAEPA"}
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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"}

package/components/search/CollapsableSearch.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{Box as i,Collapse as o}from"@mui/material";import{Search as e}from"./Search.js";const r=({isCollapsed:r,searchProps:n,collapseProps:s,...a})=>{const{sx:l,...p}=a||{},{sx:d,...c}=s||{};return t(i,{sx:{width:"fit-content",...l},...p,children:t(o,{in:!r,orientation:"horizontal",collapsedSize:"44px",sx:{borderRadius:"200px",display:"flex",justifyContent:"flex-end",width:"fit-content","& input":{width:"auto"},...d},...c,children:t(e,{disableInput:r,...n})})})};export{r as CollapsableSearch};
+import{jsx as t}from"react/jsx-runtime";import{Box as i,Collapse as r}from"@mui/material";import{Search as e}from"./Search.js";import{sxOverride as o}from"../../utils/sxOverride/sxOverride.js";const s=({isCollapsed:s,searchProps:n,collapseProps:l,...p})=>{const{sx:a,...d}=p||{},{sx:x,...c}=l||{};return t(i,{sx:o({width:"fit-content"},a),...d,children:t(r,{in:!s,orientation:"horizontal",collapsedSize:"44px",sx:o({borderRadius:"200px",display:"flex",justifyContent:"flex-end",width:"fit-content","& input":{width:"auto"}},x),...c,children:t(e,{disableInput:s,...n})})})};export{s as CollapsableSearch};
 //# sourceMappingURL=CollapsableSearch.js.map

package/components/search/CollapsableSearch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CollapsableSearch.js","sources":["../../../src/components/search/CollapsableSearch.tsx"],"sourcesContent":["import { Box, BoxProps, Collapse, CollapseProps } from '@mui/material';\nimport React from 'react';\nimport { Search, SearchProps } from './Search';\n\nexport interface CollapsableSearchProps extends BoxProps {\n /*\n Defines whether the search should be collapsed or not\n /\n isCollapsed: boolean;\n /\n Properties of Search component\n \n @see Search\n /\n searchProps?: SearchProps;\n /\n Properties of Mui Collapse component\n \n @see Collapse https://mui.com/material-ui/api/collapse/\n */\n collapseProps?: CollapseProps;\n}\n\nexport const CollapsableSearch: React.FC<CollapsableSearchProps> = ({\n isCollapsed,\n searchProps,\n collapseProps,\n ...boxProps\n}) => {\n const { sx: boxSx, ...restBoxProps } = boxProps \|\| {};\n const { sx: collapseSx, ...restCollapseProps } = collapseProps \|\| {};\n\n return (\n <Box sx={{ width: 'fit-content', ~~...~~boxSx }} {...restBoxProps}>\n <Collapse\n in={!isCollapsed}\n orientation=\"horizontal\"\n collapsedSize=\"44px\"\n sx={{\n borderRadius: '200px',\n display: 'flex',\n justifyContent: 'flex-end',\n width: 'fit-content',\n '& input': {\n width: 'auto',\n },\n ~~...~~collapseSx,\n }}\n {...restCollapseProps}\n >\n <Search disableInput={isCollapsed} {...searchProps} />\n </Collapse>\n </Box>\n );\n};\n"],"names":["CollapsableSearch","isCollapsed","searchProps","collapseProps","boxProps","sx","boxSx","restBoxProps","collapseSx","restCollapseProps","_jsx","Box","width","children","Collapse","in","orientation","collapsedSize","borderRadius","display","justifyContent","Search","disableInput"],"mappings":"~~+HAuBO~~,MAAMA,EAAsD,EACjEC,cACAC,cACAC,mBACGC,MAEH,MAAQC,GAAIC,KAAUC,GAAiBH,GAAY,CAAA,GAC3CC,GAAIG,KAAeC,GAAsBN,GAAiB,CAAA,EAElE,OACEO,EAACC,EAAG,CAACN,~~GAAI~~,~~CAAEO~~,MAAO,~~iBAAkBN~~,~~MAAaC~~,~~EAAYM~~,~~SAC3DH~~,~~EAACI~~,~~EAAQ~~,~~CACPC~~,~~IAAKd~~,~~EACLe,~~YAAY,aACZC,cAAc,~~OACdZ~~,~~GAAI~~,~~CACFa~~,aAAc,QACdC,QAAS,OACTC,eAAgB,WAChBR,MAAO,cACP,UAAW,CACTA,MAAO,~~WAENJ~~,~~MAEDC~~,~~EAAiBI~~,~~SAErBH~~,~~EAACW~~,~~GAAOC~~,~~aAAcrB~~,KAAiBC"}
1	+ {"version":3,"file":"CollapsableSearch.js","sources":["../../../src/components/search/CollapsableSearch.tsx"],"sourcesContent":["import { Box, BoxProps, Collapse, CollapseProps } from '@mui/material';\nimport React from 'react';\nimport { Search, SearchProps } from './Search';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface CollapsableSearchProps extends BoxProps {\n /*\n Defines whether the search should be collapsed or not\n /\n isCollapsed: boolean;\n /\n Properties of Search component\n \n @see Search\n /\n searchProps?: SearchProps;\n /\n Properties of Mui Collapse component\n \n @see Collapse https://mui.com/material-ui/api/collapse/\n */\n collapseProps?: CollapseProps;\n}\n\nexport const CollapsableSearch: React.FC<CollapsableSearchProps> = ({\n isCollapsed,\n searchProps,\n collapseProps,\n ...boxProps\n}) => {\n const { sx: boxSx, ...restBoxProps } = boxProps \|\| {};\n const { sx: collapseSx, ...restCollapseProps } = collapseProps \|\| {};\n\n return (\n <Box sx={sxOverride({ width: 'fit-content' }, boxSx)} {...restBoxProps}>\n <Collapse\n in={!isCollapsed}\n orientation=\"horizontal\"\n collapsedSize=\"44px\"\n sx={sxOverride(\n {\n borderRadius: '200px',\n display: 'flex',\n justifyContent: 'flex-end',\n width: 'fit-content',\n '& input': {\n width: 'auto',\n },\n },\n collapseSx,\n )}\n {...restCollapseProps}\n >\n <Search disableInput={isCollapsed} {...searchProps} />\n </Collapse>\n </Box>\n );\n};\n"],"names":["CollapsableSearch","isCollapsed","searchProps","collapseProps","boxProps","sx","boxSx","restBoxProps","collapseSx","restCollapseProps","_jsx","Box","sxOverride","width","children","Collapse","in","orientation","collapsedSize","borderRadius","display","justifyContent","Search","disableInput"],"mappings":"iMAwBO,MAAMA,EAAsD,EACjEC,cACAC,cACAC,mBACGC,MAEH,MAAQC,GAAIC,KAAUC,GAAiBH,GAAY,CAAA,GAC3CC,GAAIG,KAAeC,GAAsBN,GAAiB,CAAA,EAElE,OACEO,EAACC,EAAG,CAACN,GAAIO,EAAW,CAAEC,MAAO,eAAiBP,MAAYC,EAAYO,SACpEJ,EAACK,GACCC,IAAKf,EACLgB,YAAY,aACZC,cAAc,OACdb,GAAIO,EACF,CACEO,aAAc,QACdC,QAAS,OACTC,eAAgB,WAChBR,MAAO,cACP,UAAW,CACTA,MAAO,SAGXL,MAEEC,EAAiBK,SAErBJ,EAACY,EAAM,CAACC,aAActB,KAAiBC"}

package/components/search/Search.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { StandardTextFieldProps, SvgIconProps } from '@mui/material';
+import { IconButtonProps, StandardTextFieldProps, SvgIconProps } from '@mui/material';
 import React, { ComponentType } from 'react';
 export type SearchProps = Omit<StandardTextFieldProps, 'onChange' | 'variant' | 'value' | 'size'> & {
     /**
@@ -67,5 +67,13 @@ export type SearchProps = Omit<StandardTextFieldProps, 'onChange' | 'variant' |
      * Node for search icon
      */
     CancelIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Properties passed to the search icon button
+     */
+    searchIconButtonProps?: IconButtonProps;
+    /**
+     * Properties passed to the cancel icon button
+     */
+    cancelIconButtonProps?: IconButtonProps;
 };
 export declare const Search: React.FC<SearchProps>;

package/components/search/Search.js CHANGED Viewed

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

package/components/search/Search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Search.js","sources":["../../../src/components/search/Search.tsx"],"sourcesContent":["import { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { SearchIcon as FlowSearchIcon } from '@/src/components/icon/stroke/SearchIcon';\nimport { IconButton, InputAdornment, StandardTextFieldProps, SvgIconProps, TextField } from '@mui/material';\nimport React, {\n forwardRef,\n MouseEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useState,\n useDeferredValue,\n ComponentType,\n} from 'react';\nimport useDebounce from '../../utils/useDebounce/useDebounce';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport type SearchProps = Omit<StandardTextFieldProps, 'onChange' \| 'variant' \| 'value' \| 'size'> & {\n /*\n Defines whether the input is disabled or not\n /\n disableInput?: boolean;\n /\n Defines the time (ms) of debounce for the onChange effect\n * When debounce is 0, Search uses useDeferredValue instead.\n \n @see useDeferedValue\n * @default 0\n /\n debounce?: number;\n /\n Click handler for the cancel button\n /\n onCancel?: () => void;\n /\n Click handler for the search button\n \n @param value the current value of search input\n /\n onSearch?: (value: string) => void \| boolean;\n /\n Function that will bed called on every change of value, can be debounced by debounce value\n * If debounce is set to 0, the onChange is being called when deferred value changes\n \n @see debounce\n \n @param value current value of searchbar\n /\n onChange?: (value: string) => void;\n /\n Defines which variant of Searchbar component should be rendered\n * @default solid\n /\n variant?: 'solid' \| 'transparent' \| 'mapShadow';\n /\n Defines default value in the initial render\n * If set along with `value` property the `defaultValue` field takes precedence\n \n @see value\n /\n defaultValue?: string;\n /\n Overrides TextField value property so it can be string only\n * If set along with `defaultValue` property the `defaultValue` field takes precedence\n \n @see defaultValue\n /\n value?: string;\n /\n Properties passed to the search icon\n /\n searchIconProps?: SvgIconProps;\n /\n Node for search icon\n /\n SearchIconComponent?: ComponentType<SvgIconProps>;\n /\n Properties passed to the cancel icon\n /\n cancelIconProps?: SvgIconProps;\n /\n Node for search icon\n */\n CancelIconComponent?: ComponentType<SvgIconProps>;\n};\n\nexport const Search: React.FC<SearchProps> = forwardRef(\n (\n {\n debounce = 0,\n defaultValue = '',\n cancelIconProps = {},\n CancelIconComponent,\n disableInput,\n onCancel,\n onSearch,\n onChange,\n searchIconProps = {},\n SearchIconComponent,\n slotProps,\n sx,\n value = '',\n variant,\n ...rest\n },\n ref,\n ) => {\n const SearchIcon = SearchIconComponent \|\| FlowSearchIcon;\n const CancelIcon = CancelIconComponent \|\| CloseIcon;\n\n const [search, setSearch] = useState(defaultValue \|\| value);\n\n const deferredValue = useDeferredValue(search);\n const debouncedValue = useDebounce(search, debounce);\n\n const { sx: searchIconSx, ...restSearchIconProps } = searchIconProps;\n const { input: slotPropsInput = {}, ...restSlot } = slotProps \|\| {};\n\n const variantStyle = useMemo(() => {\n switch (variant) {\n case 'transparent':\n return { bgcolor: 'transparent.primary' };\n case 'mapShadow':\n return { bgcolor: 'onSurface.os0', boxShadow: (theme) => theme.flowShadows.l };\n default: // solid\n return { bgcolor: 'surface.primary' };\n }\n }, [variant]);\n\n // if debounce is set use debouncedValue otherwise use deferredValue as dependency and as value\n useEffect(() => {\n onChange?.(debounce <= 0 ? deferredValue : debouncedValue);\n }, [debounce <= 0 ? deferredValue : debouncedValue]);\n\n // this handler is assigned to the magnifier button\n const handleSearchIconClick: MouseEventHandler = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n onSearch?.(search);\n },\n [search],\n );\n\n // this handler is assigned to 'X' button\n const handleCancelIconClick = () => {\n setSearch('');\n onCancel?.();\n };\n\n return (\n <TextField\n onChange={(e) => setSearch(e.target.value)}\n ref={ref}\n sx={{\n position: 'relative',\n borderRadius: '200px',\n border: 1,\n borderColor: rest?.disabled ? 'disabled.primary' : 'onSurface.os500',\n py: '5px',\n pl: '14px',\n pr: '4px',\n mb: 0,\n // focus ring\n '&&&': {\n ...updateFocusRingStyle(1, false, '&:has(.Mui-focused)'),\n },\n ...variantStyle,\n ...sx,\n }}\n {...rest}\n value={search}\n variant=\"standard\"\n slotProps={{\n ...slotPropsInput,\n input: {\n className: `${search !== '' ? 'filled' : ''}`,\n disabled: disableInput \|\| rest?.disabled,\n inputProps: {\n ...('inputProps' in slotPropsInput && { ...slotPropsInput.inputProps }),\n sx: {\n p: 0,\n ml: 1,\n color: 'text.primary',\n '&::-webkit-input-placeholder': {\n color: 'onSurface.os700',\n },\n '&.Mui-disabled': {\n '&, &::-webkit-input-placeholder': {\n color: 'disabled.tertiary',\n },\n },\n ...('inputProps' in slotPropsInput &&\n 'sx' in slotPropsInput.inputProps && { ...slotPropsInput.inputProps.sx }),\n },\n },\n disableUnderline: true,\n startAdornment: (\n <InputAdornment\n position=\"start\"\n sx={{\n transition: 'all .4s ease',\n mr: '0',\n }}\n >\n <IconButton\n disabled={rest?.disabled}\n tabIndex={!onSearch ? -1 : 0}\n onClick={handleSearchIconClick}\n size=\"medium\"\n aria-label=\"Search\"\n sx={{\n width: '34px',\n height: '34px',\n ...updateFocusRingStyle('0px'),\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent.transparent',\n },\n {\n backgroundColor: 'transparent.transparent',\n },\n ),\n }}\n >\n <SearchIcon\n sx={{\n transition: 'all .5s ease',\n ...searchIconSx,\n }}\n {...restSearchIconProps}\n />\n </IconButton>\n </InputAdornment>\n ),\n endAdornment: (\n <InputAdornment\n position=\"end\"\n sx={{\n opacity: search !== '' ? '1' : '0',\n transition: 'opacity .3s ease',\n }}\n >\n <IconButton\n disabled={search === '' \|\| rest?.disabled}\n onClick={handleCancelIconClick}\n size=\"medium\"\n tabIndex={disableInput ? -1 : 0}\n aria-label=\"Clear search\"\n sx={{\n cursor: search !== '' ? 'pointer' : 'default',\n width: '34px',\n height: '34px',\n ...updateFocusRingStyle('0px'),\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent.transparent',\n },\n {\n backgroundColor: 'transparent.transparent',\n },\n ),\n }}\n >\n <CancelIcon {...cancelIconProps} />\n </IconButton>\n </InputAdornment>\n ),\n },\n ...restSlot,\n }}\n />\n );\n },\n);\n"],"names":["Search","forwardRef","debounce","defaultValue","cancelIconProps","CancelIconComponent","disableInput","onCancel","onSearch","onChange","searchIconProps","SearchIconComponent","slotProps","sx","value","variant","rest","ref","SearchIcon","FlowSearchIcon","CancelIcon","CloseIcon","search","setSearch","useState","deferredValue","useDeferredValue","debouncedValue","useDebounce","searchIconSx","restSearchIconProps","input","slotPropsInput","restSlot","variantStyle","useMemo","bgcolor","boxShadow","theme","flowShadows","l","useEffect","handleSearchIconClick","useCallback","e","preventDefault","stopPropagation","_jsx","TextField","target","position","borderRadius","border","borderColor","disabled","py","pl","pr","mb","updateFocusRingStyle","className","inputProps","p","ml","color","disableUnderline","startAdornment","InputAdornment","transition","mr","children","IconButton","tabIndex","onClick","size","width","height","getInteractiveStyle","backgroundColor","endAdornment","opacity","cursor"],"mappings":"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"}
1	+ {"version":3,"file":"Search.js","sources":["../../../src/components/search/Search.tsx"],"sourcesContent":["import { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { SearchIcon as FlowSearchIcon } from '@/src/components/icon/stroke/SearchIcon';\nimport { IconButton, IconButtonProps, InputAdornment, StandardTextFieldProps, SvgIconProps, TextField } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport React, {\n forwardRef,\n MouseEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useState,\n useDeferredValue,\n ComponentType,\n} from 'react';\nimport useDebounce from '../../utils/useDebounce/useDebounce';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport type SearchProps = Omit<StandardTextFieldProps, 'onChange' \| 'variant' \| 'value' \| 'size'> & {\n /*\n Defines whether the input is disabled or not\n /\n disableInput?: boolean;\n /\n Defines the time (ms) of debounce for the onChange effect\n * When debounce is 0, Search uses useDeferredValue instead.\n \n @see useDeferedValue\n * @default 0\n /\n debounce?: number;\n /\n Click handler for the cancel button\n /\n onCancel?: () => void;\n /\n Click handler for the search button\n \n @param value the current value of search input\n /\n onSearch?: (value: string) => void \| boolean;\n /\n Function that will bed called on every change of value, can be debounced by debounce value\n * If debounce is set to 0, the onChange is being called when deferred value changes\n \n @see debounce\n \n @param value current value of searchbar\n /\n onChange?: (value: string) => void;\n /\n Defines which variant of Searchbar component should be rendered\n * @default solid\n /\n variant?: 'solid' \| 'transparent' \| 'mapShadow';\n /\n Defines default value in the initial render\n * If set along with `value` property the `defaultValue` field takes precedence\n \n @see value\n /\n defaultValue?: string;\n /\n Overrides TextField value property so it can be string only\n * If set along with `defaultValue` property the `defaultValue` field takes precedence\n \n @see defaultValue\n /\n value?: string;\n /\n Properties passed to the search icon\n /\n searchIconProps?: SvgIconProps;\n /\n Node for search icon\n /\n SearchIconComponent?: ComponentType<SvgIconProps>;\n /\n Properties passed to the cancel icon\n /\n cancelIconProps?: SvgIconProps;\n /\n Node for search icon\n /\n CancelIconComponent?: ComponentType<SvgIconProps>;\n /\n Properties passed to the search icon button\n /\n searchIconButtonProps?: IconButtonProps;\n /\n Properties passed to the cancel icon button\n */\n cancelIconButtonProps?: IconButtonProps;\n};\n\nexport const Search: React.FC<SearchProps> = forwardRef(\n (\n {\n debounce = 0,\n defaultValue = '',\n cancelIconProps = {},\n cancelIconButtonProps,\n CancelIconComponent,\n disableInput,\n onCancel,\n onSearch,\n onChange,\n searchIconProps = {},\n searchIconButtonProps,\n SearchIconComponent,\n slotProps,\n sx,\n value = '',\n variant,\n ...rest\n },\n ref,\n ) => {\n const SearchIcon = SearchIconComponent \|\| FlowSearchIcon;\n const CancelIcon = CancelIconComponent \|\| CloseIcon;\n\n const [search, setSearch] = useState(defaultValue \|\| value);\n\n const deferredValue = useDeferredValue(search);\n const debouncedValue = useDebounce(search, debounce);\n\n const { sx: searchIconSx, ...restSearchIconProps } = searchIconProps;\n const { sx: searchIconButtonSx, ...restSearchIconButtonProps } = searchIconButtonProps ?? {};\n const { sx: cancelIconButtonSx, ...restCancelIconButtonProps } = cancelIconButtonProps ?? {};\n const { input: slotPropsInput = {}, ...restSlot } = slotProps \|\| {};\n\n const variantStyle = useMemo(() => {\n switch (variant) {\n case 'transparent':\n return { bgcolor: 'transparent.primary' };\n case 'mapShadow':\n return { bgcolor: 'onSurface.os0', boxShadow: (theme) => theme.flowShadows.l };\n default: // solid\n return { bgcolor: 'surface.primary' };\n }\n }, [variant]);\n\n // if debounce is set use debouncedValue otherwise use deferredValue as dependency and as value\n useEffect(() => {\n onChange?.(debounce <= 0 ? deferredValue : debouncedValue);\n }, [debounce <= 0 ? deferredValue : debouncedValue]);\n\n // this handler is assigned to the magnifier button\n const handleSearchIconClick: MouseEventHandler = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n onSearch?.(search);\n },\n [search],\n );\n\n // this handler is assigned to 'X' button\n const handleCancelIconClick = () => {\n setSearch('');\n onCancel?.();\n };\n\n return (\n <TextField\n onChange={(e) => setSearch(e.target.value)}\n ref={ref}\n sx={sxOverride(\n {\n position: 'relative',\n borderRadius: '200px',\n border: 1,\n borderColor: rest?.disabled ? 'disabled.primary' : 'onSurface.os500',\n py: '5px',\n pl: '14px',\n pr: '4px',\n mb: 0,\n // focus ring\n '&&&': {\n ...updateFocusRingStyle(1, false, '&:has(.Mui-focused)'),\n },\n ...variantStyle,\n },\n sx,\n )}\n {...rest}\n value={search}\n variant=\"standard\"\n slotProps={{\n ...slotPropsInput,\n input: {\n className: `${search !== '' ? 'filled' : ''}`,\n disabled: disableInput \|\| rest?.disabled,\n inputProps: {\n ...('inputProps' in slotPropsInput && { ...slotPropsInput.inputProps }),\n sx: sxOverride(\n {\n p: 0,\n ml: 1,\n color: 'text.primary',\n '&::-webkit-input-placeholder': {\n color: 'onSurface.os700',\n },\n '&.Mui-disabled': {\n '&, &::-webkit-input-placeholder': {\n color: 'disabled.tertiary',\n },\n },\n },\n 'inputProps' in slotPropsInput && 'sx' in slotPropsInput.inputProps\n ? slotPropsInput.inputProps.sx\n : undefined,\n ),\n },\n disableUnderline: true,\n startAdornment: (\n <InputAdornment\n position=\"start\"\n sx={{\n transition: 'all .4s ease',\n mr: '0',\n }}\n >\n <IconButton\n disabled={rest?.disabled}\n tabIndex={!onSearch ? -1 : 0}\n onClick={handleSearchIconClick}\n size=\"medium\"\n aria-label=\"Search\"\n {...restSearchIconButtonProps}\n sx={sxOverride(\n {\n width: '34px',\n height: '34px',\n ...updateFocusRingStyle('0px'),\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent.transparent',\n },\n {\n backgroundColor: 'transparent.transparent',\n },\n ),\n },\n searchIconButtonSx,\n )}\n >\n <SearchIcon\n sx={sxOverride(\n {\n transition: 'all .5s ease',\n },\n searchIconSx,\n )}\n {...restSearchIconProps}\n />\n </IconButton>\n </InputAdornment>\n ),\n endAdornment: (\n <InputAdornment\n position=\"end\"\n sx={{\n opacity: search !== '' ? '1' : '0',\n transition: 'opacity .3s ease',\n }}\n >\n <IconButton\n disabled={search === '' \|\| rest?.disabled}\n onClick={handleCancelIconClick}\n size=\"medium\"\n tabIndex={disableInput ? -1 : 0}\n aria-label=\"Clear search\"\n {...restCancelIconButtonProps}\n sx={sxOverride(\n {\n cursor: search !== '' ? 'pointer' : 'default',\n width: '34px',\n height: '34px',\n ...updateFocusRingStyle('0px'),\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent.transparent',\n },\n {\n backgroundColor: 'transparent.transparent',\n },\n ),\n },\n cancelIconButtonSx,\n )}\n >\n <CancelIcon {...cancelIconProps} />\n </IconButton>\n </InputAdornment>\n ),\n },\n ...restSlot,\n }}\n />\n );\n },\n);\n"],"names":["Search","forwardRef","debounce","defaultValue","cancelIconProps","cancelIconButtonProps","CancelIconComponent","disableInput","onCancel","onSearch","onChange","searchIconProps","searchIconButtonProps","SearchIconComponent","slotProps","sx","value","variant","rest","ref","SearchIcon","FlowSearchIcon","CancelIcon","CloseIcon","search","setSearch","useState","deferredValue","useDeferredValue","debouncedValue","useDebounce","searchIconSx","restSearchIconProps","searchIconButtonSx","restSearchIconButtonProps","cancelIconButtonSx","restCancelIconButtonProps","input","slotPropsInput","restSlot","variantStyle","useMemo","bgcolor","boxShadow","theme","flowShadows","l","useEffect","handleSearchIconClick","useCallback","e","preventDefault","stopPropagation","_jsx","TextField","target","sxOverride","position","borderRadius","border","borderColor","disabled","py","pl","pr","mb","updateFocusRingStyle","className","inputProps","p","ml","color","undefined","disableUnderline","startAdornment","InputAdornment","transition","mr","children","IconButton","tabIndex","onClick","size","width","height","getInteractiveStyle","backgroundColor","endAdornment","opacity","cursor"],"mappings":"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"}

package/components/secondaryNavigation/SecondaryNavigation.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as a,useState as r,useMemo as n,Children as i,Fragment as o}from"react";import{AppBar as l,Toolbar as s,Typography as x,Tabs as d,Box as p}from"@mui/material";const c=a(({children:a,sx:c,title:g,buttons:f,inContainer:h=!1,toolbarProps:u,titleProps:m,contentProps:y,buttonsProps:v,...S},b)=>{const{sx:w,...N}=m??{},{sx:C,...G}=u??{},{sx:P,...j}=y??{},{sx:k,...B}=v??{},[I,z]=r(0),E=n(()=>function t(e){const a=[];return i.forEach(e,e=>{e?.type===o?a.push(...t(e.props.children)):a.push(e)}),a}(a),[a]);return t(l,{sx:{zIndex:t=>t.zIndex.appBar-20,...c},ref:b,"data-testid":"SecondaryNavigation","aria-label":"Secondary Navigation",role:"group",...S,children:e(s,{sx:{...!!E?.length&&{flexWrap:{xs:"wrap",lg:"nowrap"},pt:{xs:2,lg:0}},...C},disableGutters:!h,"data-testid":"SecondaryNavigation.wrapper",...G,children:[g&&t(x,{"data-testid":"SecondaryNavigation.title",variant:"subheadline",sx:{display:"block",flexGrow:{xs:"1",lg:"0"},flexShrink:"0",...w},...N,children:g}),!!E?.length&&t(d,{value:I,onChange:(t,e)=>z(e),template:"navigation",sx:{flexGrow:"1",flexBasis:{xs:"100%",lg:"auto"},order:{xs:"3",lg:"0"},justifyContent:{xs:"center",lg:"flex-start"},alignSelf:{xs:"flex-end",lg:"center"},...g&&{pl:{lg:4}},marginTop:{xs:"-10px",lg:"0"},marginBottom:"-1px",...P},"data-testid":"SecondaryNavigation.items",...j,children:E}),f&&t(p,{sx:{flexShrink:"0",flexGrow:"1",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,...k},"data-testid":"SecondaryNavigation.cta",...B,children:f})]})})});export{c as SecondaryNavigation};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as r,useState as a,useMemo as n,Children as i,Fragment as o}from"react";import{AppBar as s,Toolbar as l,Typography as x,Tabs as d,Box as p}from"@mui/material";import{sxOverride as c}from"../../utils/sxOverride/sxOverride.js";const g=r(({children:r,sx:g,title:f,buttons:m,inContainer:u=!1,toolbarProps:h,titleProps:v,contentProps:y,buttonsProps:S,...b},w)=>{const{sx:N,...j}=v??{},{sx:C,...G}=h??{},{sx:P,...k}=y??{},{sx:B,...I}=S??{},[z,O]=a(0),E=n(()=>function t(e){const r=[];return i.forEach(e,e=>{e?.type===o?r.push(...t(e.props.children)):r.push(e)}),r}(r),[r]);return t(s,{sx:c({zIndex:t=>t.zIndex.appBar-20},g),ref:w,"data-testid":"SecondaryNavigation","aria-label":"Secondary Navigation",role:"group",...b,children:e(l,{sx:c({...!!E?.length&&{flexWrap:{xs:"wrap",lg:"nowrap"},pt:{xs:2,lg:0}}},C),disableGutters:!u,"data-testid":"SecondaryNavigation.wrapper",...G,children:[f&&t(x,{"data-testid":"SecondaryNavigation.title",variant:"subheadline",sx:c({display:"block",flexGrow:{xs:"1",lg:"0"},flexShrink:"0"},N),...j,children:f}),!!E?.length&&t(d,{value:z,onChange:(t,e)=>O(e),template:"navigation",sx:c({flexGrow:"1",flexBasis:{xs:"100%",lg:"auto"},order:{xs:"3",lg:"0"},justifyContent:{xs:"center",lg:"flex-start"},alignSelf:{xs:"flex-end",lg:"center"},...f&&{pl:{lg:4}},marginTop:{xs:"-10px",lg:"0"},marginBottom:"-1px"},P),"data-testid":"SecondaryNavigation.items",...k,children:E}),m&&t(p,{sx:c({flexShrink:"0",flexGrow:"1",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25},B),"data-testid":"SecondaryNavigation.cta",...I,children:m})]})})});export{g as SecondaryNavigation};
 //# sourceMappingURL=SecondaryNavigation.js.map

package/components/secondaryNavigation/SecondaryNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SecondaryNavigation.js","sources":["../../../src/components/secondaryNavigation/SecondaryNavigation.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ElementType, Fragment, useMemo, useState, Children } from 'react';\nimport {\n AppBar,\n AppBarProps,\n Tabs,\n TabsProps,\n Box,\n BoxProps,\n Toolbar,\n ToolbarProps,\n Typography,\n TypographyProps,\n} from '@mui/material';\n\nexport interface SecondaryNavigationProps extends Omit<AppBarProps, 'color' \| 'title'> {\n /*\n Headline\n /\n title?: ReactNode;\n /\n Wrap the navigation into container\n * @default false\n /\n inContainer?: boolean;\n /\n ActionButtons on the right side\n /\n buttons?: ReactNode;\n /\n Properties applied to toolbar container\n /\n toolbarProps?: ToolbarProps<ElementType>;\n /\n Properties applied to title\n /\n titleProps?: TypographyProps<ElementType>;\n /\n Properties applied to content wrapper\n /\n contentProps?: TabsProps;\n /\n Properties applied to button wrapper\n /\n buttonsProps?: BoxProps<ElementType>;\n}\n\n/\n Additional navigation intended to be shown bellow the Header\n /\nexport const SecondaryNavigation: FC<SecondaryNavigationProps> = forwardRef(\n (\n {\n children,\n sx,\n title,\n buttons,\n inContainer = false,\n toolbarProps,\n titleProps,\n contentProps,\n buttonsProps,\n ...rest\n },\n ref,\n ) => {\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: toolbarSx, ...restToolbar } = toolbarProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const [activeNav, setActiveNav] = useState(0);\n\n /\n Process children/navigationItems and remove any React.Fragments as Tabs requires direct elements\n */\n const navigation = useMemo(() => {\n function flatten(nodes) {\n const result = [];\n Children.forEach(nodes, (child) => {\n if (child?.type === Fragment) {\n result.push(...flatten(child.props.children));\n } else {\n result.push(child);\n }\n });\n return result;\n }\n return flatten(children);\n }, [children]);\n\n return (\n <AppBar\n sx={{\n // bellow Header, also defined in appbar.theme.ts\n zIndex: (theme) => theme.zIndex.appBar - 20,\n ~~...~~sx,\n }}\n ref={ref}\n data-testid=\"SecondaryNavigation\"\n aria-label=\"Secondary Navigation\"\n role=\"group\"\n {...rest}\n >\n <Toolbar\n sx={{\n ...(!!navigation?.length && {\n flexWrap: { xs: 'wrap', lg: 'nowrap' },\n pt: { xs: 2, lg: 0 },\n }),\n ~~...~~toolbarSx,\n }}\n disableGutters={!inContainer}\n data-testid=\"SecondaryNavigation.wrapper\"\n {...restToolbar}\n >\n {title && (\n <Typography\n data-testid=\"SecondaryNavigation.title\"\n variant=\"subheadline\"\n sx={{\n display: 'block',\n // on mobile push the button to the right side\n flexGrow: { xs: '1', lg: '0' },\n flexShrink: '0',\n ~~...~~titleSx,\n }}\n {...restTitle}\n >\n {title}\n </Typography>\n )}\n {!!navigation?.length && (\n <Tabs\n value={activeNav}\n onChange={(_, v) => setActiveNav(v)}\n template=\"navigation\"\n sx={{\n flexGrow: '1',\n // on mobile move to 2nd row\n flexBasis: { xs: '100%', lg: 'auto' },\n order: { xs: '3', lg: '0' },\n // center on mobile\n justifyContent: { xs: 'center', lg: 'flex-start' },\n alignSelf: { xs: 'flex-end', lg: 'center' },\n ...(title && {\n // increase size between title and nav\n pl: { lg: 4 },\n }),\n marginTop: { xs: '-10px', lg: '0' },\n // move directly into border\n marginBottom: '-1px',\n ~~...~~contentSx,\n }}\n data-testid=\"SecondaryNavigation.items\"\n {...restContent}\n >\n {navigation}\n </Tabs>\n )}\n {buttons && (\n <Box\n sx={{\n flexShrink: '0',\n flexGrow: '1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 0.25,\n ~~...~~buttonsSx,\n }}\n data-testid=\"SecondaryNavigation.cta\"\n {...restButtons}\n >\n {buttons}\n </Box>\n )}\n </Toolbar>\n </AppBar>\n );\n },\n);\n"],"names":["SecondaryNavigation","forwardRef","children","sx","title","buttons","inContainer","toolbarProps","titleProps","contentProps","buttonsProps","rest","ref","titleSx","restTitle","toolbarSx","restToolbar","contentSx","restContent","buttonsSx","restButtons","activeNav","setActiveNav","useState","navigation","useMemo","flatten","nodes","result","Children","forEach","child","type","Fragment","push","props","_jsx","AppBar","zIndex","theme","appBar","role","_jsxs","Toolbar","length","flexWrap","xs","lg","pt","disableGutters","Typography","variant","display","flexGrow","flexShrink","Tabs","value","onChange","_","v","template","flexBasis","order","justifyContent","alignSelf","pl","marginTop","marginBottom","Box","alignItems","gap"],"mappings":"~~mOAiDO~~,MAAMA,EAAoDC,EAC/D,EAEIC,WACAC,KACAC,QACAC,UACAC,eAAc,EACdC,eACAC,aACAC,eACAC,kBACGC,GAELC,KAEA,MAAQT,GAAIU,KAAYC,GAAcN,GAAc,CAAA,GAC5CL,GAAIY,KAAcC,GAAgBT,GAAgB,CAAA,GAClDJ,GAAIc,KAAcC,GAAgBT,GAAgB,CAAA,GAClDN,GAAIgB,KAAcC,GAAgBV,GAAgB,CAAA,GACnDW,EAAWC,GAAgBC,EAAS,GAKrCC,EAAaC,EAAQ,IACzB,SAASC,EAAQC,GACf,MAAMC,EAAS,GAQf,OAPAC,EAASC,QAAQH,EAAQI,IACnBA,GAAOC,OAASC,EAClBL,EAAOM,QAAQR,EAAQK,EAAMI,MAAMjC,WAEnC0B,EAAOM,KAAKH,KAGTH,CACT,CACOF,CAAQxB,GACd,CAACA,IAEJ,OACEkC,EAACC,~~EAAM~~,~~CACLlC~~,~~GAAI~~,~~CAEFmC~~,OAASC,GAAUA,EAAMD,OAAOE,OAAS,~~MACtCrC~~,~~GAELS~~,IAAKA,~~gBACO~~,sBAAqB,aACtB,~~uBACX6B~~,KAAK,~~WACD9B~~,EAAIT,~~SAERwC~~,EAACC,EAAO,~~CACNxC~~,~~GAAI~~,~~MACIqB~~,~~GAAYoB~~,QAAU,CAC1BC,SAAU,CAAEC,GAAI,OAAQC,GAAI,UAC5BC,GAAI,CAAEF,GAAI,EAAGC,GAAI,~~OAEhBhC~~,~~GAELkC~~,~~gBAAiB3C~~,~~gBACL~~,iCACRU,EAAWd,SAAA,CAEdE,GACCgC,~~EAACc~~,~~iBACa~~,4BACZC,QAAQ,~~cACRhD~~,~~GAAI~~,~~CACFiD~~,QAAS,QAETC,SAAU,CAAEP,GAAI,IAAKC,GAAI,KACzBO,WAAY,~~OACTzC~~,~~MAEDC~~,~~EAASZ~~,~~SAEZE,~~MAGFoB,~~GAAYoB~~,~~QACbR~~,~~EAACmB~~,EAAI,CACHC,~~MAAOnC~~,~~EACPoC~~,SAAU,CAACC,EAAGC,~~IAAMrC~~,~~EAAaqC~~,GACjCC,SAAS,~~aACTzD~~,~~GAAI~~,~~CACFkD~~,SAAU,IAEVQ,UAAW,CAAEf,GAAI,OAAQC,GAAI,QAC7Be,MAAO,CAAEhB,GAAI,IAAKC,GAAI,KAEtBgB,eAAgB,CAAEjB,GAAI,SAAUC,GAAI,cACpCiB,UAAW,CAAElB,GAAI,WAAYC,GAAI,~~aAC7B3C~~,GAAS,~~CAEX6D~~,GAAI,CAAElB,GAAI,IAEZmB,UAAW,CAAEpB,GAAI,QAASC,GAAI,KAE9BoB,aAAc,~~UACXlD~~,~~GACJ~~,cACW,+BACRC,EAAWhB,SAEdsB,IAGJnB,GACC+B,~~EAACgC~~,~~EAAG~~,~~CACFjE~~,~~GAAI~~,~~CACFmD~~,WAAY,IACZD,SAAU,IACVD,QAAS,OACTiB,WAAY,SACZN,eAAgB,WAChBO,IAAK,~~OACFnD~~,~~GACJ~~,cACW,6BACRC,EAAWlB,SAEdG"}
1	+ {"version":3,"file":"SecondaryNavigation.js","sources":["../../../src/components/secondaryNavigation/SecondaryNavigation.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ElementType, Fragment, useMemo, useState, Children } from 'react';\nimport {\n AppBar,\n AppBarProps,\n Tabs,\n TabsProps,\n Box,\n BoxProps,\n Toolbar,\n ToolbarProps,\n Typography,\n TypographyProps,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface SecondaryNavigationProps extends Omit<AppBarProps, 'color' \| 'title'> {\n /*\n Headline\n /\n title?: ReactNode;\n /\n Wrap the navigation into container\n * @default false\n /\n inContainer?: boolean;\n /\n ActionButtons on the right side\n /\n buttons?: ReactNode;\n /\n Properties applied to toolbar container\n /\n toolbarProps?: ToolbarProps<ElementType>;\n /\n Properties applied to title\n /\n titleProps?: TypographyProps<ElementType>;\n /\n Properties applied to content wrapper\n /\n contentProps?: TabsProps;\n /\n Properties applied to button wrapper\n /\n buttonsProps?: BoxProps<ElementType>;\n}\n\n/\n Additional navigation intended to be shown bellow the Header\n /\nexport const SecondaryNavigation: FC<SecondaryNavigationProps> = forwardRef(\n (\n {\n children,\n sx,\n title,\n buttons,\n inContainer = false,\n toolbarProps,\n titleProps,\n contentProps,\n buttonsProps,\n ...rest\n },\n ref,\n ) => {\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: toolbarSx, ...restToolbar } = toolbarProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const [activeNav, setActiveNav] = useState(0);\n\n /\n Process children/navigationItems and remove any React.Fragments as Tabs requires direct elements\n */\n const navigation = useMemo(() => {\n function flatten(nodes) {\n const result = [];\n Children.forEach(nodes, (child) => {\n if (child?.type === Fragment) {\n result.push(...flatten(child.props.children));\n } else {\n result.push(child);\n }\n });\n return result;\n }\n return flatten(children);\n }, [children]);\n\n return (\n <AppBar\n sx={sxOverride(\n {\n // bellow Header, also defined in appbar.theme.ts\n zIndex: (theme) => theme.zIndex.appBar - 20,\n },\n sx,\n )}\n ref={ref}\n data-testid=\"SecondaryNavigation\"\n aria-label=\"Secondary Navigation\"\n role=\"group\"\n {...rest}\n >\n <Toolbar\n sx={sxOverride(\n {\n ...(!!navigation?.length && {\n flexWrap: { xs: 'wrap', lg: 'nowrap' },\n pt: { xs: 2, lg: 0 },\n }),\n },\n toolbarSx,\n )}\n disableGutters={!inContainer}\n data-testid=\"SecondaryNavigation.wrapper\"\n {...restToolbar}\n >\n {title && (\n <Typography\n data-testid=\"SecondaryNavigation.title\"\n variant=\"subheadline\"\n sx={sxOverride(\n {\n display: 'block',\n // on mobile push the button to the right side\n flexGrow: { xs: '1', lg: '0' },\n flexShrink: '0',\n },\n titleSx,\n )}\n {...restTitle}\n >\n {title}\n </Typography>\n )}\n {!!navigation?.length && (\n <Tabs\n value={activeNav}\n onChange={(_, v) => setActiveNav(v)}\n template=\"navigation\"\n sx={sxOverride(\n {\n flexGrow: '1',\n // on mobile move to 2nd row\n flexBasis: { xs: '100%', lg: 'auto' },\n order: { xs: '3', lg: '0' },\n // center on mobile\n justifyContent: { xs: 'center', lg: 'flex-start' },\n alignSelf: { xs: 'flex-end', lg: 'center' },\n ...(title && {\n // increase size between title and nav\n pl: { lg: 4 },\n }),\n marginTop: { xs: '-10px', lg: '0' },\n // move directly into border\n marginBottom: '-1px',\n },\n contentSx,\n )}\n data-testid=\"SecondaryNavigation.items\"\n {...restContent}\n >\n {navigation}\n </Tabs>\n )}\n {buttons && (\n <Box\n sx={sxOverride(\n {\n flexShrink: '0',\n flexGrow: '1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 0.25,\n },\n buttonsSx,\n )}\n data-testid=\"SecondaryNavigation.cta\"\n {...restButtons}\n >\n {buttons}\n </Box>\n )}\n </Toolbar>\n </AppBar>\n );\n },\n);\n"],"names":["SecondaryNavigation","forwardRef","children","sx","title","buttons","inContainer","toolbarProps","titleProps","contentProps","buttonsProps","rest","ref","titleSx","restTitle","toolbarSx","restToolbar","contentSx","restContent","buttonsSx","restButtons","activeNav","setActiveNav","useState","navigation","useMemo","flatten","nodes","result","Children","forEach","child","type","Fragment","push","props","_jsx","AppBar","sxOverride","zIndex","theme","appBar","role","_jsxs","Toolbar","length","flexWrap","xs","lg","pt","disableGutters","Typography","variant","display","flexGrow","flexShrink","Tabs","value","onChange","_","v","template","flexBasis","order","justifyContent","alignSelf","pl","marginTop","marginBottom","Box","alignItems","gap"],"mappings":"qSAkDO,MAAMA,EAAoDC,EAC/D,EAEIC,WACAC,KACAC,QACAC,UACAC,eAAc,EACdC,eACAC,aACAC,eACAC,kBACGC,GAELC,KAEA,MAAQT,GAAIU,KAAYC,GAAcN,GAAc,CAAA,GAC5CL,GAAIY,KAAcC,GAAgBT,GAAgB,CAAA,GAClDJ,GAAIc,KAAcC,GAAgBT,GAAgB,CAAA,GAClDN,GAAIgB,KAAcC,GAAgBV,GAAgB,CAAA,GACnDW,EAAWC,GAAgBC,EAAS,GAKrCC,EAAaC,EAAQ,IACzB,SAASC,EAAQC,GACf,MAAMC,EAAS,GAQf,OAPAC,EAASC,QAAQH,EAAQI,IACnBA,GAAOC,OAASC,EAClBL,EAAOM,QAAQR,EAAQK,EAAMI,MAAMjC,WAEnC0B,EAAOM,KAAKH,KAGTH,CACT,CACOF,CAAQxB,GACd,CAACA,IAEJ,OACEkC,EAACC,GACClC,GAAImC,EACF,CAEEC,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IAE3CtC,GAEFS,IAAKA,EAAG,cACI,sBAAqB,aACtB,uBACX8B,KAAK,WACD/B,EAAIT,SAERyC,EAACC,EAAO,CACNzC,GAAImC,EACF,MACQd,GAAYqB,QAAU,CAC1BC,SAAU,CAAEC,GAAI,OAAQC,GAAI,UAC5BC,GAAI,CAAEF,GAAI,EAAGC,GAAI,KAGrBjC,GAEFmC,gBAAiB5C,EAAW,cAChB,iCACRU,EAAWd,SAAA,CAEdE,GACCgC,EAACe,EAAU,CAAA,cACG,4BACZC,QAAQ,cACRjD,GAAImC,EACF,CACEe,QAAS,QAETC,SAAU,CAAEP,GAAI,IAAKC,GAAI,KACzBO,WAAY,KAEd1C,MAEEC,WAEHV,MAGFoB,GAAYqB,QACbT,EAACoB,EAAI,CACHC,MAAOpC,EACPqC,SAAU,CAACC,EAAGC,IAAMtC,EAAasC,GACjCC,SAAS,aACT1D,GAAImC,EACF,CACEgB,SAAU,IAEVQ,UAAW,CAAEf,GAAI,OAAQC,GAAI,QAC7Be,MAAO,CAAEhB,GAAI,IAAKC,GAAI,KAEtBgB,eAAgB,CAAEjB,GAAI,SAAUC,GAAI,cACpCiB,UAAW,CAAElB,GAAI,WAAYC,GAAI,aAC7B5C,GAAS,CAEX8D,GAAI,CAAElB,GAAI,IAEZmB,UAAW,CAAEpB,GAAI,QAASC,GAAI,KAE9BoB,aAAc,QAEhBnD,GACD,cACW,+BACRC,EAAWhB,SAEdsB,IAGJnB,GACC+B,EAACiC,GACClE,GAAImC,EACF,CACEiB,WAAY,IACZD,SAAU,IACVD,QAAS,OACTiB,WAAY,SACZN,eAAgB,WAChBO,IAAK,KAEPpD,GACD,cACW,6BACRC,EAAWlB,SAEdG"}