@skodaflow/web-library 8.1.0 → 8.3.0

package/cjs/components/progress/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loadingTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>(null);\n    const rafRef = useRef<number>(null);\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={{\n            // size is also applied in ProgressState and LoadingText\n            ...(size === 'small' && {\n              width: `16px`,\n              height: `16px`,\n            }),\n            ...(size === 'medium' && {\n              width: `24px`,\n              height: `24px`,\n            }),\n            ...(typeof size === 'number' && {\n              width: `${size}px`,\n              height: `${size}px`,\n            }),\n            color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            // extra animation if value is not provided\n            ...(value === undefined && {\n              '@keyframes flow-spinner-indeterminate': {\n                '0%': { transform: 'rotateZ(0)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-group': {\n                '0%, 25%': { transform: 'rotateZ(0)' },\n                '70%': { transform: 'rotateZ(45deg)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-primary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-group-secondary': {\n                '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n              },\n              // assign animation to elements\n              animation: '2s linear infinite flow-spinner-indeterminate',\n              '& > g': {\n                animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                transformOrigin: '50% 50%',\n                '& circle': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                },\n                '& g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                  },\n                },\n              },\n            }),\n            ...svgIconSx,\n          }}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            {...loadingTextProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","sx","className","children","size","thickness","value","svgIconProps","loadingTextProps","label","state","successMessage","errorMessage","progressStateProps","rest","ref","theme","useTheme","svgIconSx","restSvgIcon","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","_jsxs","Box","role","filter","Boolean","join","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}
+{"version":3,"file":"Spinner.js","sources":["../../../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loadingTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>(null);\n    const rafRef = useRef<number>(null);\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: 1,\n          },\n          sx,\n        )}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={sxOverride(\n            {\n              // size is also applied in ProgressState and LoadingText\n              ...(size === 'small' && {\n                width: `16px`,\n                height: `16px`,\n              }),\n              ...(size === 'medium' && {\n                width: `24px`,\n                height: `24px`,\n              }),\n              ...(typeof size === 'number' && {\n                width: `${size}px`,\n                height: `${size}px`,\n              }),\n              color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n              // extra animation if value is not provided\n              ...(value === undefined && {\n                '@keyframes flow-spinner-indeterminate': {\n                  '0%': { transform: 'rotateZ(0)' },\n                  '100%': { transform: 'rotateZ(360deg)' },\n                },\n                '@keyframes flow-spinner-indeterminate-group': {\n                  '0%, 25%': { transform: 'rotateZ(0)' },\n                  '70%': { transform: 'rotateZ(45deg)' },\n                  '100%': { transform: 'rotateZ(360deg)' },\n                },\n                '@keyframes flow-spinner-indeterminate-circle-primary': {\n                  '0%, 25%, 100%': {\n                    strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                    strokeDashOffset: valuesSmall.dashOffset,\n                  },\n                  '70%': {\n                    strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                    strokeDashOffset: valuesLarge.dashOffset,\n                  },\n                },\n                '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                  '0%, 25%, 100%': {\n                    strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                    strokeDashOffset: valuesSmall.dashOffset,\n                  },\n                  '70%': {\n                    strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                    strokeDashOffset: valuesLarge.dashOffset,\n                  },\n                },\n                '@keyframes flow-spinner-indeterminate-group-secondary': {\n                  '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                  '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n                },\n                // assign animation to elements\n                animation: '2s linear infinite flow-spinner-indeterminate',\n                '& > g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                  transformOrigin: '50% 50%',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                  },\n                  '& g': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                    '& circle': {\n                      animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                    },\n                  },\n                },\n              }),\n            },\n            svgIconSx,\n          )}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            {...loadingTextProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","sx","className","children","size","thickness","value","svgIconProps","loadingTextProps","label","state","successMessage","errorMessage","progressStateProps","rest","ref","theme","useTheme","svgIconSx","restSvgIcon","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","_jsxs","Box","role","filter","Boolean","join","sxOverride","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}

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

@@ -0,0 +1,58 @@
+import React, { ComponentType, ElementType } from 'react';
+import { BoxProps, ButtonBaseProps, SvgIconProps } from '@mui/material';
+export interface PromptAttachment {
+    /**
+     * Display name of the attachment.
+     */
+    name: string;
+    /**
+     * URL of the attachment image.
+     */
+    src?: string;
+}
+export interface PromptAttachmentsProps extends BoxProps<ElementType> {
+    /**
+     * List of attachments to display.
+     */
+    attachments: PromptAttachment[];
+    /**
+     * Callback to update the attachments list.
+     */
+    setAttachments?: (attachments: PromptAttachment[]) => void;
+    /**
+     * Custom component to be used for the file icon.
+     */
+    IconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Properties applied to the icon wrapper Box.
+     */
+    iconWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the file icon.
+     */
+    iconProps?: SvgIconProps;
+    /**
+     * Properties applied to the text wrapper Box.
+     */
+    textProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the remove icon.
+     */
+    removeIconProps?: SvgIconProps;
+    /**
+     * Properties applied to the remove icon wrapper Box.
+     */
+    removeIconWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the image preview Box (rendered when attachment has src).
+     */
+    imageProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the ButtonBase wrapping each attachment item.
+     */
+    buttonBaseProps?: ButtonBaseProps;
+}
+/**
+ * Shows list of attachments in PromptBar
+ */
+export declare const PromptAttachments: React.FC<PromptAttachmentsProps>;

package/cjs/components/promptBar/PromptAttachments.js

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

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

@@ -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/cjs/components/promptBar/PromptBar.d.ts

@@ -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/cjs/components/promptBar/PromptBar.js

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

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

@@ -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/cjs/components/promptBar/PromptSubmitIconButton.d.ts

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

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

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

@@ -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":"0RA2DO,MAAMA,EAA0DC,EAAAA,WACrE,EAEIC,QACAC,WACAC,cACAC,aACAC,YACAC,QACAC,eACAC,oBACAC,qBACAC,0BACAC,yBACAC,KACAC,cACGC,GAELC,KAEA,MAAMC,EAAYP,GAAsBQ,EAAAA,cAClCC,EAAaV,GAAqBW,EAAAA,SAClCC,EAAgBT,GAA0BM,EAAAA,cAC1CI,EAAiBX,GAA2BY,EAAAA,sBAE5CC,EAAQC,EAAAA,QAAyD,IACjEpB,EAAmB,aACnBC,EAAkB,YAClBE,GAAgBN,GAASE,GAAasB,OAAe,SAClD,QACN,CAACrB,EAAYC,EAAWJ,EAAOM,EAAcJ,GAAasB,SAEvDC,EAAYF,EAAAA,QAAwC,IACpDlB,EACKqB,EAAAA,OAEFC,EAAAA,WACN,CAACtB,IAEEuB,EAAOL,EAAAA,QAAQ,KACnB,OAAQD,GACN,IAAK,aACH,OAAOF,EACT,IAAK,YACH,OAAOD,EACT,IAAK,SACH,OAAOF,EAET,QACE,OAAOF,IAEV,CAACO,EAAOF,EAAgBD,EAAeF,EAAYF,IAEtD,OACEc,EAAAA,IAACJ,EAAS,CACRX,IAAKA,EAELgB,MAAM,UACNC,KAAK,QACLnB,SAAUA,KACLP,EAAQ,CAAE2B,QAAS,YAAaC,UAAWJ,EAAAA,IAACD,EAAI,CAAA,IAAQ,CAAEI,QAAS,aACzD,UAAVV,GAAqB,CAAE,aAAc,cAAeQ,MAAO,cACjD,WAAVR,GAAsB,CACzB,aAAc,iBACGY,IAAbtB,GAA0BN,IAAiBN,IAAUE,GAAasB,QAAU,CAAEZ,UAAU,OAE/E,cAAVU,GAAyB,CAAE,aAAc,qBAC/B,eAAVA,GAA0B,CAAE,aAAc,WAC3CT,EACJF,GAAIwB,aACF,IAEgB,cAAVb,IACDZ,GAA0B,CACzB,iCAAkC,CAChC,KAAM,CAAE0B,UAAW,aACnB,MAAO,CAAEA,UAAW,gBACpB,YAAa,CAAEA,UAAW,cAE5B,iCAAkC,CAChC,KAAM,CAAEA,UAAW,gBACnB,MAAO,CAAEA,UAAW,aACpB,YAAa,CAAEA,UAAW,iBAE5B,qBAAsB,CACpBC,KAAM,CACJC,gBAAiB,aACjBC,WAAY,0BACZ,mBAAoB,CAAEC,UAAW,4CACjC,mBAAoB,CAClBJ,UAAW,eACXI,UAAW,2CACXC,eAAgB,QAElB,mBAAoB,CAClBD,UAAW,2CACXC,eAAgB,YAM5B9B,GACD+B,SAEArC,GAASwB,EAAAA,IAACD,EAAI,CAAA,IAjDVN"}

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

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

package/cjs/components/quickLink/QuickLink.d.ts

@@ -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/cjs/components/quickLink/QuickLink.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"QuickLink.js","sources":["../../../../../src/components/quickLink/QuickLink.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef, ForwardedRef, ComponentType } from 'react';\nimport {\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":"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"}
+{"version":3,"file":"QuickLink.js","sources":["../../../../../src/components/quickLink/QuickLink.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef, ForwardedRef, ComponentType } from 'react';\nimport { Box, Button, Typography, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface QuickLinkProps extends Omit<BoxProps<ElementType>, 'title'> {\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Props applied to Icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Title text\n   */\n  title?: ReactNode;\n  /**\n   * Props applied to title Typography wrapper component\n   */\n  titleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Subtitle text\n   */\n  subtitle?: ReactNode;\n  /**\n   * Props applied to subtitle Typography wrapper component\n   */\n  subtitleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Props applied to wrapper of divider component\n   */\n  dividerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to divider component\n   */\n  dividerProps?: BoxProps<ElementType>;\n  /**\n   * Content wrapper\n   */\n  contentWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Icon and Title wrapper that changes on the mobile\n   */\n  titleWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Button text\n   */\n  buttonTitle?: ReactNode;\n  /**\n   * Props applied to Button component\n   */\n  buttonProps?: ButtonProps;\n}\n\n/**\n * Quick Links are used to provide immediate access to the most relevant and\n * frequently used actions related to a product or service.\n *\n * Composition of title, subtitle, icon, and button\n */\nexport const QuickLink: React.FC<QuickLinkProps> = forwardRef(\n  (\n    {\n      IconComponent,\n      iconProps,\n      title,\n      titleTypographyProps,\n      subtitle,\n      subtitleTypographyProps,\n      dividerWrapperProps,\n      dividerProps,\n      contentWrapperProps,\n      titleWrapperProps,\n      buttonTitle,\n      buttonProps,\n      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/cjs/components/search/CollapsableSearch.js

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

package/cjs/components/search/CollapsableSearch.js.map

@@ -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":["isCollapsed","searchProps","collapseProps","boxProps","sx","boxSx","restBoxProps","collapseSx","restCollapseProps","_jsx","Box","width","children","Collapse","in","orientation","collapsedSize","borderRadius","display","justifyContent","Search","disableInput"],"mappings":"8HAuBmE,EACjEA,cACAC,cACAC,mBACGC,MAEH,MAAQC,GAAIC,KAAUC,GAAiBH,GAAY,CAAA,GAC3CC,GAAIG,KAAeC,GAAsBN,GAAiB,CAAA,EAElE,OACEO,EAAAA,IAACC,MAAG,CAACN,GAAI,CAAEO,MAAO,iBAAkBN,MAAaC,EAAYM,SAC3DH,MAACI,EAAAA,SAAQ,CACPC,IAAKd,EACLe,YAAY,aACZC,cAAc,OACdZ,GAAI,CACFa,aAAc,QACdC,QAAS,OACTC,eAAgB,WAChBR,MAAO,cACP,UAAW,CACTA,MAAO,WAENJ,MAEDC,EAAiBI,SAErBH,EAAAA,IAACW,EAAAA,QAAOC,aAAcrB,KAAiBC"}
+{"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":["isCollapsed","searchProps","collapseProps","boxProps","sx","boxSx","restBoxProps","collapseSx","restCollapseProps","_jsx","Box","sxOverride","width","children","Collapse","in","orientation","collapsedSize","borderRadius","display","justifyContent","Search","disableInput"],"mappings":"gLAwBmE,EACjEA,cACAC,cACAC,mBACGC,MAEH,MAAQC,GAAIC,KAAUC,GAAiBH,GAAY,CAAA,GAC3CC,GAAIG,KAAeC,GAAsBN,GAAiB,CAAA,EAElE,OACEO,MAACC,EAAAA,IAAG,CAACN,GAAIO,EAAAA,WAAW,CAAEC,MAAO,eAAiBP,MAAYC,EAAYO,SACpEJ,EAAAA,IAACK,EAAAA,UACCC,IAAKf,EACLgB,YAAY,aACZC,cAAc,OACdb,GAAIO,EAAAA,WACF,CACEO,aAAc,QACdC,QAAS,OACTC,eAAgB,WAChBR,MAAO,cACP,UAAW,CACTA,MAAO,SAGXL,MAEEC,EAAiBK,SAErBJ,EAAAA,IAACY,EAAAA,OAAM,CAACC,aAActB,KAAiBC"}

package/cjs/components/search/Search.d.ts

@@ -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>;