@razorpay/blade 12.91.0 → 12.92.0

package/build/lib/web/production/components/ChatInput/useChatInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChatInput.js","sources":["../../../../../../src/components/ChatInput/useChatInput.ts"],"sourcesContent":["import React from 'react';\nimport type { ChatInputProps } from './types';\nimport { chatInputMaxTextAreaHeight } from './chatInputTokens';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeFile, BladeFileList } from '~components/FileUpload/types';\nimport { isFileAccepted } from '~components/FileUpload/isFileAccepted';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { useMergeRefs } from '~utils/useMergeRefs';\n\ntype UseChatInputProps = Pick<\n  ChatInputProps,\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onSubmit'\n  | 'isDisabled'\n  | 'isGenerating'\n  | 'onStop'\n  | 'fileList'\n  | 'onFileChange'\n  | 'onFileRemove'\n  | 'accept'\n  | 'suggestions'\n  | 'onSuggestionAccept'\n>;\n\nconst useChatInput = (\n  {\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    onSubmit,\n    fileList: controlledFileList,\n    onFileChange,\n    onFileRemove,\n    accept,\n    suggestions,\n    onSuggestionAccept,\n  }: UseChatInputProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): {\n  fileInputRef: React.RefObject<HTMLInputElement>;\n  mergedRef: React.RefCallback<BladeElementRef>;\n  textValue: string;\n  files: BladeFileList;\n  activeSuggestionIndex: number;\n  setActiveSuggestionIndex: React.Dispatch<React.SetStateAction<number>>;\n  hasText: boolean;\n  hasFiles: boolean;\n  isSubmitDisabled: boolean;\n  showGhostSuggestion: boolean;\n  handleTextChange: (args: { name?: string; value?: string }) => void;\n  handleSubmit: () => void;\n  handleKeyDown: (args: {\n    name?: string;\n    key?: string;\n    code?: string;\n    event: React.KeyboardEvent<HTMLInputElement>;\n  }) => void;\n  handleUploadClick: () => void;\n  handleFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  handleFileRemove: (file: BladeFile) => void;\n  handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n} => {\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const textareaRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, textareaRef);\n\n  const [textValue, setTextValue] = useControllableState({\n    value: controlledValue,\n    defaultValue: defaultValue ?? '',\n    onChange: (newValue) => {\n      onChange?.({ value: newValue });\n    },\n  });\n\n  const [files, setFiles] = useControllableState<BladeFileList>({\n    value: controlledFileList,\n    defaultValue: controlledFileList ?? [],\n  });\n\n  const [activeSuggestionIndex, setActiveSuggestionIndex] = React.useState(0);\n\n  const isMobile = useIsMobile();\n\n  const hasText = textValue.trim().length > 0;\n  const hasFiles = files.length > 0;\n  const isSubmitDisabled = !hasText && !hasFiles;\n  const showGhostSuggestion = !hasText && Boolean(suggestions?.length) && !isMobile;\n\n  const adjustTextareaHeight = React.useCallback(() => {\n    const textarea = textareaRef.current;\n    if (textarea && textarea instanceof HTMLTextAreaElement) {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${Math.min(textarea.scrollHeight, chatInputMaxTextAreaHeight)}px`;\n    }\n  }, []);\n\n  React.useEffect(() => {\n    adjustTextareaHeight();\n  }, [textValue, adjustTextareaHeight]);\n\n  const handleTextChange = React.useCallback(\n    ({ value: newValue }: { name?: string; value?: string }) => {\n      setTextValue(() => newValue ?? '');\n    },\n    [setTextValue],\n  );\n\n  const handleSubmit = React.useCallback(() => {\n    if (isSubmitDisabled) return;\n    onSubmit?.({ value: textValue, fileList: files });\n  }, [isSubmitDisabled, onSubmit, textValue, files]);\n\n  const handleKeyDown = React.useCallback(\n    ({\n      event,\n    }: {\n      name?: string;\n      key?: string;\n      code?: string;\n      event: React.KeyboardEvent<HTMLInputElement>;\n    }) => {\n      if (!event) return;\n\n      if (event.key === 'Enter' && !event.shiftKey) {\n        event.preventDefault();\n        handleSubmit();\n        return;\n      }\n\n      if (event.key === 'Tab' && showGhostSuggestion && suggestions?.length) {\n        event.preventDefault();\n        const currentSuggestion = suggestions[activeSuggestionIndex];\n        setTextValue(() => currentSuggestion);\n        onSuggestionAccept?.({ suggestion: currentSuggestion });\n      }\n    },\n    [\n      handleSubmit,\n      showGhostSuggestion,\n      suggestions,\n      activeSuggestionIndex,\n      setTextValue,\n      onSuggestionAccept,\n    ],\n  );\n\n  const handleUploadClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const inputFiles = Array.from(event.target.files ?? []) as BladeFileList;\n\n      const validFiles = inputFiles.filter((file) => {\n        if (accept && !isFileAccepted(file, accept)) return false;\n        return true;\n      });\n\n      for (const file of validFiles) {\n        if (!file.id) {\n          file.id = `${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n        }\n      }\n\n      if (validFiles.length > 0) {\n        const newFileList = [...files, ...validFiles];\n        setFiles(() => newFileList);\n        onFileChange?.({ fileList: newFileList });\n      }\n\n      event.target.value = '';\n    },\n    [accept, files, setFiles, onFileChange],\n  );\n\n  const handleFileRemove = React.useCallback(\n    (file: BladeFile) => {\n      const newFileList = files.filter((f) => f.id !== file.id);\n      setFiles(() => newFileList);\n      onFileRemove?.({ file });\n    },\n    [files, setFiles, onFileRemove],\n  );\n\n  const handlePaste = React.useCallback(\n    (event: React.ClipboardEvent<HTMLInputElement>) => {\n      const clipboardFiles = Array.from(event.clipboardData?.files ?? []);\n      if (clipboardFiles.length === 0) return;\n\n      event.preventDefault();\n\n      for (const file of clipboardFiles) {\n        if (!(file as BladeFile).id) {\n          (file as BladeFile).id = `${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n        }\n      }\n\n      if (clipboardFiles.length > 0) {\n        const newFileList = [...files, ...clipboardFiles] as BladeFileList;\n        setFiles(() => newFileList);\n        onFileChange?.({ fileList: newFileList });\n      }\n    },\n    [files, setFiles, onFileChange],\n  );\n\n  return {\n    fileInputRef,\n    mergedRef,\n    textValue,\n    files,\n    activeSuggestionIndex,\n    setActiveSuggestionIndex,\n    hasText,\n    hasFiles,\n    isSubmitDisabled,\n    showGhostSuggestion,\n    handleTextChange,\n    handleSubmit,\n    handleKeyDown,\n    handleUploadClick,\n    handleFileInputChange,\n    handleFileRemove,\n    handlePaste,\n  };\n};\n\nexport { useChatInput };\nexport type { UseChatInputProps };\n"],"names":["useChatInput","_ref","ref","controlledValue","value","defaultValue","onChange","onSubmit","controlledFileList","fileList","onFileChange","onFileRemove","accept","suggestions","onSuggestionAccept","fileInputRef","React","useRef","textareaRef","mergedRef","useMergeRefs","_useControllableState","useControllableState","newValue","_useControllableState2","_slicedToArray","textValue","setTextValue","_useControllableState3","_useControllableState4","files","setFiles","_React$useState","useState","_React$useState2","activeSuggestionIndex","setActiveSuggestionIndex","isMobile","useIsMobile","hasText","trim","length","hasFiles","isSubmitDisabled","showGhostSuggestion","Boolean","adjustTextareaHeight","useCallback","textarea","current","HTMLTextAreaElement","style","height","concat","Math","min","scrollHeight","chatInputMaxTextAreaHeight","useEffect","handleTextChange","_ref2","handleSubmit","handleKeyDown","_ref3","event","key","shiftKey","preventDefault","currentSuggestion","suggestion","handleUploadClick","_fileInputRef$current","click","handleFileInputChange","_event$target$files","inputFiles","Array","from","target","validFiles","filter","file","isFileAccepted","_iterator","_createForOfIteratorHelper","_step","s","n","done","id","Date","now","floor","random","err","e","f","newFileList","_toConsumableArray","handleFileRemove","handlePaste","_event$clipboardData$","_event$clipboardData","clipboardFiles","clipboardData","_i","_clipboardFiles"],"mappings":"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"}
+{"version":3,"file":"useChatInput.js","sources":["../../../../../../src/components/ChatInput/useChatInput.ts"],"sourcesContent":["import React from 'react';\nimport type { ChatInputProps } from './types';\nimport { chatInputMaxTextAreaHeight } from './chatInputTokens';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeFile, BladeFileList } from '~components/FileUpload/types';\nimport { isFileAccepted } from '~components/FileUpload/isFileAccepted';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { useMergeRefs } from '~utils/useMergeRefs';\n\ntype UseChatInputProps = Pick<\n  ChatInputProps,\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onSubmit'\n  | 'isDisabled'\n  | 'isGenerating'\n  | 'onStop'\n  | 'fileList'\n  | 'onFileChange'\n  | 'onFileRemove'\n  | 'accept'\n  | 'suggestions'\n  | 'onSuggestionAccept'\n>;\n\nconst useChatInput = (\n  {\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    onSubmit,\n    fileList: controlledFileList,\n    onFileChange,\n    onFileRemove,\n    accept,\n    suggestions,\n    onSuggestionAccept,\n  }: UseChatInputProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): {\n  fileInputRef: React.RefObject<HTMLInputElement>;\n  mergedRef: React.RefCallback<BladeElementRef>;\n  textValue: string;\n  files: BladeFileList;\n  activeSuggestionIndex: number;\n  setActiveSuggestionIndex: React.Dispatch<React.SetStateAction<number>>;\n  hasText: boolean;\n  hasFiles: boolean;\n  isSubmitDisabled: boolean;\n  showGhostSuggestion: boolean;\n  handleTextChange: (args: { name?: string; value?: string }) => void;\n  handleSubmit: () => void;\n  handleKeyDown: (args: {\n    name?: string;\n    key?: string;\n    code?: string;\n    event: React.KeyboardEvent<HTMLInputElement>;\n  }) => void;\n  handleUploadClick: () => void;\n  handleFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  handleFileRemove: (file: BladeFile) => void;\n  handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n  handleInnerMouseDownCapture: (event: React.MouseEvent) => void;\n} => {\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const textareaRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, textareaRef);\n\n  const [textValue, setTextValue] = useControllableState({\n    value: controlledValue,\n    defaultValue: defaultValue ?? '',\n    onChange: (newValue) => {\n      onChange?.({ value: newValue });\n    },\n  });\n\n  const [files, setFiles] = useControllableState<BladeFileList>({\n    value: controlledFileList,\n    defaultValue: controlledFileList ?? [],\n  });\n\n  const [activeSuggestionIndex, setActiveSuggestionIndex] = React.useState(0);\n\n  const isMobile = useIsMobile();\n\n  const hasText = textValue.trim().length > 0;\n  const hasFiles = files.length > 0;\n  const isSubmitDisabled = !hasText && !hasFiles;\n  const showGhostSuggestion = !hasText && Boolean(suggestions?.length) && !isMobile;\n\n  const adjustTextareaHeight = React.useCallback(() => {\n    const textarea = textareaRef.current;\n    if (textarea && textarea instanceof HTMLTextAreaElement) {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${Math.min(textarea.scrollHeight, chatInputMaxTextAreaHeight)}px`;\n    }\n  }, []);\n\n  React.useEffect(() => {\n    adjustTextareaHeight();\n  }, [textValue, adjustTextareaHeight]);\n\n  const handleTextChange = React.useCallback(\n    ({ value: newValue }: { name?: string; value?: string }) => {\n      setTextValue(() => newValue ?? '');\n    },\n    [setTextValue],\n  );\n\n  const handleSubmit = React.useCallback(() => {\n    if (isSubmitDisabled) return;\n    onSubmit?.({ value: textValue, fileList: files });\n  }, [isSubmitDisabled, onSubmit, textValue, files]);\n\n  const handleKeyDown = React.useCallback(\n    ({\n      event,\n    }: {\n      name?: string;\n      key?: string;\n      code?: string;\n      event: React.KeyboardEvent<HTMLInputElement>;\n    }) => {\n      if (!event) return;\n\n      if (event.key === 'Enter' && !event.shiftKey) {\n        event.preventDefault();\n        handleSubmit();\n        return;\n      }\n\n      if (event.key === 'Tab' && showGhostSuggestion && suggestions?.length) {\n        event.preventDefault();\n        const currentSuggestion = suggestions[activeSuggestionIndex];\n        setTextValue(() => currentSuggestion);\n        onSuggestionAccept?.({ suggestion: currentSuggestion });\n      }\n    },\n    [\n      handleSubmit,\n      showGhostSuggestion,\n      suggestions,\n      activeSuggestionIndex,\n      setTextValue,\n      onSuggestionAccept,\n    ],\n  );\n\n  const handleUploadClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const inputFiles = Array.from(event.target.files ?? []) as BladeFileList;\n\n      const validFiles = inputFiles.filter((file) => {\n        if (accept && !isFileAccepted(file, accept)) return false;\n        return true;\n      });\n\n      for (const file of validFiles) {\n        if (!file.id) {\n          file.id = `${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n        }\n      }\n\n      if (validFiles.length > 0) {\n        const newFileList = [...files, ...validFiles];\n        setFiles(() => newFileList);\n        onFileChange?.({ fileList: newFileList });\n      }\n\n      event.target.value = '';\n    },\n    [accept, files, setFiles, onFileChange],\n  );\n\n  const handleFileRemove = React.useCallback(\n    (file: BladeFile) => {\n      const newFileList = files.filter((f) => f.id !== file.id);\n      setFiles(() => newFileList);\n      onFileRemove?.({ file });\n    },\n    [files, setFiles, onFileRemove],\n  );\n\n  const handlePaste = React.useCallback(\n    (event: React.ClipboardEvent<HTMLInputElement>) => {\n      const clipboardFiles = Array.from(event.clipboardData?.files ?? []);\n      if (clipboardFiles.length === 0) return;\n\n      event.preventDefault();\n\n      for (const file of clipboardFiles) {\n        if (!(file as BladeFile).id) {\n          (file as BladeFile).id = `${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n        }\n      }\n\n      if (clipboardFiles.length > 0) {\n        const newFileList = [...files, ...clipboardFiles] as BladeFileList;\n        setFiles(() => newFileList);\n        onFileChange?.({ fileList: newFileList });\n      }\n    },\n    [files, setFiles, onFileChange],\n  );\n\n  const handleInnerMouseDownCapture = React.useCallback((event: React.MouseEvent): void => {\n    const target = event.target as HTMLElement | null;\n    if (!target) return;\n\n    // Allow normal behavior when clicking directly inside textarea.\n    if (target.closest('textarea')) return;\n\n    // Prevent focus from moving to internal controls (submit/upload/file actions).\n    event.preventDefault();\n  }, []);\n\n  return {\n    fileInputRef,\n    mergedRef,\n    textValue,\n    files,\n    activeSuggestionIndex,\n    setActiveSuggestionIndex,\n    hasText,\n    hasFiles,\n    isSubmitDisabled,\n    showGhostSuggestion,\n    handleTextChange,\n    handleSubmit,\n    handleKeyDown,\n    handleUploadClick,\n    handleFileInputChange,\n    handleFileRemove,\n    handlePaste,\n    handleInnerMouseDownCapture,\n  };\n};\n\nexport { useChatInput };\nexport type { UseChatInputProps };\n"],"names":["useChatInput","_ref","ref","controlledValue","value","defaultValue","onChange","onSubmit","controlledFileList","fileList","onFileChange","onFileRemove","accept","suggestions","onSuggestionAccept","fileInputRef","React","useRef","textareaRef","mergedRef","useMergeRefs","_useControllableState","useControllableState","newValue","_useControllableState2","_slicedToArray","textValue","setTextValue","_useControllableState3","_useControllableState4","files","setFiles","_React$useState","useState","_React$useState2","activeSuggestionIndex","setActiveSuggestionIndex","isMobile","useIsMobile","hasText","trim","length","hasFiles","isSubmitDisabled","showGhostSuggestion","Boolean","adjustTextareaHeight","useCallback","textarea","current","HTMLTextAreaElement","style","height","concat","Math","min","scrollHeight","chatInputMaxTextAreaHeight","useEffect","handleTextChange","_ref2","handleSubmit","handleKeyDown","_ref3","event","key","shiftKey","preventDefault","currentSuggestion","suggestion","handleUploadClick","_fileInputRef$current","click","handleFileInputChange","_event$target$files","inputFiles","Array","from","target","validFiles","filter","file","isFileAccepted","_iterator","_createForOfIteratorHelper","_step","s","n","done","id","Date","now","floor","random","err","e","f","newFileList","_toConsumableArray","handleFileRemove","handlePaste","_event$clipboardData$","_event$clipboardData","clipboardFiles","clipboardData","_i","_clipboardFiles","handleInnerMouseDownCapture","closest"],"mappings":"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"}

package/build/lib/web/production/components/ChatMessage/SelfMessageBubble.web.js

@@ -29,7 +29,7 @@ var SelfMessageBubble = function SelfMessageBubble(_ref) {
     flexDirection: "column",
     children: [/*#__PURE__*/jsx(StyledSelfMessageBubble, {
       backgroundColor: chatMessageToken.self.backgroundColor["default"],
-      padding: isChildText ? 'spacing.5' : 'spacing.0',
+      padding: isChildText ? 'spacing.4' : 'spacing.0',
       borderRadius: "large",
       width: "fit-content",
       height: "auto",

package/build/lib/web/production/components/ChatMessage/SelfMessageBubble.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelfMessageBubble.web.js","sources":["../../../../../../src/components/ChatMessage/SelfMessageBubble.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { CommonChatMessageProps } from './types';\nimport { chatMessageToken } from './token';\nimport { getMessageBubbleBoxShadow } from './utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form/FormHint';\nimport { useTheme } from '~utils';\n\nconst StyledSelfMessageBubble = styled(BaseBox)(() => {\n  const { colorScheme } = useTheme();\n  return getMessageBubbleBoxShadow(colorScheme);\n});\n\nconst SelfMessageBubble = ({\n  children,\n  validationState,\n  errorText = 'Message not sent. Tap to retry.',\n  isChildText,\n}: Pick<CommonChatMessageProps, 'children' | 'validationState' | 'errorText'> & {\n  // is child is text then only add padding otherwise no need to add padding\n  isChildText: boolean;\n}): React.ReactElement => {\n  const isError = validationState === 'error';\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\">\n      <StyledSelfMessageBubble\n        backgroundColor={chatMessageToken.self.backgroundColor.default}\n        padding={isChildText ? 'spacing.5' : 'spacing.0'}\n        borderRadius=\"large\"\n        width=\"fit-content\"\n        height=\"auto\"\n        alignSelf=\"flex-end\"\n        border=\"thin\"\n        borderColor=\"surface.border.gray.muted\"\n      >\n        {children}\n      </StyledSelfMessageBubble>\n      <BaseBox alignSelf=\"flex-end\">\n        {isError && <FormHint type=\"error\" errorText={errorText} size=\"small\" />}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { SelfMessageBubble };\n"],"names":["StyledSelfMessageBubble","styled","BaseBox","withConfig","displayName","componentId","_useTheme","useTheme","colorScheme","getMessageBubbleBoxShadow","SelfMessageBubble","_ref","children","validationState","_ref$errorText","errorText","isChildText","isError","_jsxs","display","flexDirection","_jsx","backgroundColor","chatMessageToken","self","padding","borderRadius","width","height","alignSelf","border","borderColor","FormHint","type","size"],"mappings":";;;;;;;;;;;AASA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAC,YAAM;AACpD,EAAA,IAAAC,SAAA,GAAwBC,QAAQ,EAAE;IAA1BC,WAAW,GAAAF,SAAA,CAAXE,WAAW,CAAA;EACnB,OAAOC,yBAAyB,CAACD,WAAW,CAAC,CAAA;AAC/C,CAAC,CAAC,CAAA;AAEF,IAAME,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAQG;AAAA,EAAA,IAPxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAAC,cAAA,GAAAH,IAAA,CACfI,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,iCAAiC,GAAAA,cAAA;IAC7CE,WAAW,GAAAL,IAAA,CAAXK,WAAW,CAAA;AAKX,EAAA,IAAMC,OAAO,GAAGJ,eAAe,KAAK,OAAO,CAAA;EAE3C,oBACEK,IAAA,CAAChB,OAAO,EAAA;AAACiB,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAAR,QAAA,EAAA,cAC5CS,GAAA,CAACrB,uBAAuB,EAAA;AACtBsB,MAAAA,eAAe,EAAEC,gBAAgB,CAACC,IAAI,CAACF,eAAe,CAAS,SAAA,CAAA;AAC/DG,MAAAA,OAAO,EAAET,WAAW,GAAG,WAAW,GAAG,WAAY;AACjDU,MAAAA,YAAY,EAAC,OAAO;AACpBC,MAAAA,KAAK,EAAC,aAAa;AACnBC,MAAAA,MAAM,EAAC,MAAM;AACbC,MAAAA,SAAS,EAAC,UAAU;AACpBC,MAAAA,MAAM,EAAC,MAAM;AACbC,MAAAA,WAAW,EAAC,2BAA2B;AAAAnB,MAAAA,QAAA,EAEtCA,QAAAA;AAAQ,KACc,CAAC,eAC1BS,GAAA,CAACnB,OAAO,EAAA;AAAC2B,MAAAA,SAAS,EAAC,UAAU;AAAAjB,MAAAA,QAAA,EAC1BK,OAAO,iBAAII,GAAA,CAACW,QAAQ,EAAA;AAACC,QAAAA,IAAI,EAAC,OAAO;AAAClB,QAAAA,SAAS,EAAEA,SAAU;AAACmB,QAAAA,IAAI,EAAC,OAAA;OAAS,CAAA;AAAC,KACjE,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"SelfMessageBubble.web.js","sources":["../../../../../../src/components/ChatMessage/SelfMessageBubble.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { CommonChatMessageProps } from './types';\nimport { chatMessageToken } from './token';\nimport { getMessageBubbleBoxShadow } from './utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form/FormHint';\nimport { useTheme } from '~utils';\n\nconst StyledSelfMessageBubble = styled(BaseBox)(() => {\n  const { colorScheme } = useTheme();\n  return getMessageBubbleBoxShadow(colorScheme);\n});\n\nconst SelfMessageBubble = ({\n  children,\n  validationState,\n  errorText = 'Message not sent. Tap to retry.',\n  isChildText,\n}: Pick<CommonChatMessageProps, 'children' | 'validationState' | 'errorText'> & {\n  // is child is text then only add padding otherwise no need to add padding\n  isChildText: boolean;\n}): React.ReactElement => {\n  const isError = validationState === 'error';\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\">\n      <StyledSelfMessageBubble\n        backgroundColor={chatMessageToken.self.backgroundColor.default}\n        padding={isChildText ? 'spacing.4' : 'spacing.0'}\n        borderRadius=\"large\"\n        width=\"fit-content\"\n        height=\"auto\"\n        alignSelf=\"flex-end\"\n        border=\"thin\"\n        borderColor=\"surface.border.gray.muted\"\n      >\n        {children}\n      </StyledSelfMessageBubble>\n      <BaseBox alignSelf=\"flex-end\">\n        {isError && <FormHint type=\"error\" errorText={errorText} size=\"small\" />}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { SelfMessageBubble };\n"],"names":["StyledSelfMessageBubble","styled","BaseBox","withConfig","displayName","componentId","_useTheme","useTheme","colorScheme","getMessageBubbleBoxShadow","SelfMessageBubble","_ref","children","validationState","_ref$errorText","errorText","isChildText","isError","_jsxs","display","flexDirection","_jsx","backgroundColor","chatMessageToken","self","padding","borderRadius","width","height","alignSelf","border","borderColor","FormHint","type","size"],"mappings":";;;;;;;;;;;AASA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAC,YAAM;AACpD,EAAA,IAAAC,SAAA,GAAwBC,QAAQ,EAAE;IAA1BC,WAAW,GAAAF,SAAA,CAAXE,WAAW,CAAA;EACnB,OAAOC,yBAAyB,CAACD,WAAW,CAAC,CAAA;AAC/C,CAAC,CAAC,CAAA;AAEF,IAAME,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAQG;AAAA,EAAA,IAPxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAAC,cAAA,GAAAH,IAAA,CACfI,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,iCAAiC,GAAAA,cAAA;IAC7CE,WAAW,GAAAL,IAAA,CAAXK,WAAW,CAAA;AAKX,EAAA,IAAMC,OAAO,GAAGJ,eAAe,KAAK,OAAO,CAAA;EAE3C,oBACEK,IAAA,CAAChB,OAAO,EAAA;AAACiB,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAAR,QAAA,EAAA,cAC5CS,GAAA,CAACrB,uBAAuB,EAAA;AACtBsB,MAAAA,eAAe,EAAEC,gBAAgB,CAACC,IAAI,CAACF,eAAe,CAAS,SAAA,CAAA;AAC/DG,MAAAA,OAAO,EAAET,WAAW,GAAG,WAAW,GAAG,WAAY;AACjDU,MAAAA,YAAY,EAAC,OAAO;AACpBC,MAAAA,KAAK,EAAC,aAAa;AACnBC,MAAAA,MAAM,EAAC,MAAM;AACbC,MAAAA,SAAS,EAAC,UAAU;AACpBC,MAAAA,MAAM,EAAC,MAAM;AACbC,MAAAA,WAAW,EAAC,2BAA2B;AAAAnB,MAAAA,QAAA,EAEtCA,QAAAA;AAAQ,KACc,CAAC,eAC1BS,GAAA,CAACnB,OAAO,EAAA;AAAC2B,MAAAA,SAAS,EAAC,UAAU;AAAAjB,MAAAA,QAAA,EAC1BK,OAAO,iBAAII,GAAA,CAACW,QAAQ,EAAA;AAACC,QAAAA,IAAI,EAAC,OAAO;AAAClB,QAAAA,SAAS,EAAEA,SAAU;AAACmB,QAAAA,IAAI,EAAC,OAAA;OAAS,CAAA;AAAC,KACjE,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/production/components/SideNav/SideNav.web.js

@@ -4,21 +4,21 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import styled from 'styled-components';
 import { SideNavContext } from './SideNavContext.js';
-import { classes, COLLAPSED_L1_WIDTH, TRANSITION_CLEANUP_DELAY, HOVER_AGAIN_DELAY, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL, L1_EXIT_HOVER_DELAY, SKIP_NAV_ID } from './tokens.js';
-import '../Box/BaseBox/index.js';
+import { classes, COLLAPSED_L1_WIDTH, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL, TRANSITION_CLEANUP_DELAY, HOVER_AGAIN_DELAY, L1_EXIT_HOVER_DELAY, SKIP_NAV_ID } from './tokens.js';
+import '../../tokens/global/index.js';
 import '../../utils/index.js';
-import '../Drawer/index.js';
-import { SkipNavLink, SkipNavContent } from '../SkipNav/SkipNav.web.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/metaAttribute/index.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
+import '../Box/BaseBox/index.js';
 import '../Box/styledProps/index.js';
-import '../../utils/metaAttribute/index.js';
-import '../../utils/makeAnalyticsAttribute/index.js';
-import '../../tokens/global/index.js';
+import '../Drawer/index.js';
+import { SkipNavLink, SkipNavContent } from '../SkipNav/SkipNav.web.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
-import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
 import { size } from '../../tokens/global/size.js';
 import { Drawer } from '../Drawer/Drawer.web.js';
@@ -28,12 +28,12 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded = ["children", "isOpen", "onDismiss", "onVisibleLevelChange", "banner", "testID"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded = ["children", "isOpen", "onDismiss", "onVisibleLevelChange", "onExpandChange", "onExpandTransitionEnd", "banner", "backgroundColor", "testID", "isExpanded"];
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var COLLAPSED = classes.COLLAPSED,
   SHOW_WHEN_COLLAPSED = classes.SHOW_WHEN_COLLAPSED,
   HIDE_WHEN_COLLAPSED = classes.HIDE_WHEN_COLLAPSED,
@@ -56,12 +56,7 @@ var StyledL1Menu = /*#__PURE__*/styled(BaseBox).withConfig({
   var easing = props.theme.motion.easing;
   var l1Expand = "width ".concat(xmoderate, " ").concat(easing.entrance);
   var l1Collapse = "width ".concat(quick, " ").concat(easing.exit);
-  return _defineProperty(_defineProperty(_defineProperty({
-    width: '100%',
-    transition: l1Expand
-  }, "& > .".concat(L1_ITEM_WRAPPER), {
-    padding: makeSpace(props.theme.spacing[3])
-  }), ".".concat(SHOW_WHEN_COLLAPSED), {
+  var textVisibilityProps = props.$isSideNavExpandable ? {} : _defineProperty(_defineProperty({}, ".".concat(SHOW_WHEN_COLLAPSED), {
     display: 'none'
   }), "&.".concat(COLLAPSED), _defineProperty(_defineProperty(_defineProperty({
     width: makeSize(COLLAPSED_L1_WIDTH),
@@ -73,10 +68,52 @@ var StyledL1Menu = /*#__PURE__*/styled(BaseBox).withConfig({
   }), "&:not(.".concat(TRANSITIONING, ") .").concat(SHOW_WHEN_COLLAPSED), {
     display: 'initial'
   }));
+  return _objectSpread(_defineProperty({
+    width: '100%',
+    // the overall sidenav expands and collapses in this case. No need transition here
+    transition: props.$isSideNavExpandable ? 'none' : l1Expand
+  }, "& > .".concat(L1_ITEM_WRAPPER), {
+    padding: makeSpace(props.theme.spacing[3])
+  }), textVisibilityProps);
+});
+var StyledSideNavContainer = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavweb__StyledSideNavContainer",
+  componentId: "sc-1obm5ij-2"
+})(function (props) {
+  var quick = makeMotionTime(props.theme.motion.duration.quick);
+  var xmoderate = makeMotionTime(props.theme.motion.duration.xmoderate);
+  var easing = props.theme.motion.easing;
+  var sideNavExpand = "width ".concat(xmoderate, " ").concat(easing.entrance);
+  var sideNavCollapse = "width ".concat(quick, " ").concat(easing.exit);
+  if (!props.$isSideNavExpandable) {
+    return {};
+  }
+  return _defineProperty(_defineProperty(_defineProperty({
+    transition: sideNavExpand
+  }, "&.".concat(COLLAPSED), _defineProperty(_defineProperty({
+    width: makeSize(COLLAPSED_L1_WIDTH),
+    transition: sideNavCollapse
+  }, "&:not(.".concat(TRANSITIONING, ") .").concat(HIDE_WHEN_COLLAPSED), {
+    opacity: '0',
+    pointerEvents: 'none',
+    transition: "opacity ".concat(quick, " ").concat(easing.exit)
+  }), "&:not(.".concat(TRANSITIONING, ") .").concat(SHOW_WHEN_COLLAPSED), {
+    opacity: '1',
+    pointerEvents: 'auto',
+    transition: "opacity ".concat(quick, " ").concat(easing.entrance)
+  })), ".".concat(SHOW_WHEN_COLLAPSED), {
+    opacity: '0',
+    pointerEvents: 'none',
+    transition: "opacity ".concat(quick, " ").concat(easing.exit)
+  }), ".".concat(HIDE_WHEN_COLLAPSED), {
+    opacity: '1',
+    pointerEvents: 'auto',
+    transition: "opacity ".concat(quick, " ").concat(easing.entrance)
+  });
 });
 var StyledL2PortalContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "SideNavweb__StyledL2PortalContainer",
-  componentId: "sc-1obm5ij-2"
+  componentId: "sc-1obm5ij-3"
 })(function () {
   return {
     // This ensures that the portal node has 100% height when it has items
@@ -85,10 +122,10 @@ var StyledL2PortalContainer = /*#__PURE__*/styled(BaseBox).withConfig({
     }
   };
 });
-var getL1MenuClassName = function getL1MenuClassName(_ref3) {
-  var isL1Collapsed = _ref3.isL1Collapsed,
-    isL1Hovered = _ref3.isL1Hovered,
-    isTransitioning = _ref3.isTransitioning;
+var getL1MenuClassName = function getL1MenuClassName(_ref4) {
+  var isL1Collapsed = _ref4.isL1Collapsed,
+    isL1Hovered = _ref4.isL1Hovered,
+    isTransitioning = _ref4.isTransitioning;
   var isMenuCollapsed = isL1Collapsed && !isL1Hovered;
   if (isMenuCollapsed) {
     if (isTransitioning) {
@@ -100,7 +137,7 @@ var getL1MenuClassName = function getL1MenuClassName(_ref3) {
 };
 var BannerContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "SideNavweb__BannerContainer",
-  componentId: "sc-1obm5ij-3"
+  componentId: "sc-1obm5ij-4"
 })(function (props) {
   return {
     '&:not(:empty)': {
@@ -129,18 +166,24 @@ var BannerContainer = /*#__PURE__*/styled(BaseBox).withConfig({
  * SideNav requires handling active state with React Router, Checkout Usage with React Router v6 at - [SideNav Documentation](https://blade.razorpay.com/?path=/docs/components-sidenav--docs)
  *
  */
-var _SideNav = function _SideNav(_ref4, ref) {
-  var children = _ref4.children,
-    isOpen = _ref4.isOpen,
-    onDismiss = _ref4.onDismiss,
-    onVisibleLevelChange = _ref4.onVisibleLevelChange,
-    banner = _ref4.banner,
-    testID = _ref4.testID,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+var _SideNav = function _SideNav(_ref5, ref) {
+  var children = _ref5.children,
+    isOpen = _ref5.isOpen,
+    onDismiss = _ref5.onDismiss,
+    onVisibleLevelChange = _ref5.onVisibleLevelChange,
+    onExpandChange = _ref5.onExpandChange,
+    onExpandTransitionEnd = _ref5.onExpandTransitionEnd,
+    banner = _ref5.banner,
+    _ref5$backgroundColor = _ref5.backgroundColor,
+    backgroundColor = _ref5$backgroundColor === void 0 ? 'surface.background.gray.moderate' : _ref5$backgroundColor,
+    testID = _ref5.testID,
+    _isExpanded = _ref5.isExpanded,
+    rest = _objectWithoutProperties(_ref5, _excluded);
   var l2PortalContainerRef = React__default.useRef(null);
   var l1ContainerRef = React__default.useRef(null);
   var timeoutIdsRef = React__default.useRef([]);
   var mouseOverTimeoutRef = React__default.useRef();
+  var prevIsSideNavFullyCollapsedRef = React__default.useRef();
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isL1Collapsed = _React$useState2[0],
@@ -166,6 +209,13 @@ var _SideNav = function _SideNav(_ref4, ref) {
     l2DrawerTitle = _React$useState10[0],
     setL2DrawerTitle = _React$useState10[1];
   var isMobile = useIsMobile();
+  var isSideNavFullyCollapsed = _isExpanded === false;
+  var effectiveIsL1Collapsed = isMobile ? isMobileL2Open : isSideNavFullyCollapsed || isL1Collapsed;
+  var effectiveIsL1Hovered = isSideNavFullyCollapsed ? false : isL1Hovered;
+  var sideNavWidth = isSideNavFullyCollapsed ? makeSize(COLLAPSED_L1_WIDTH) : {
+    base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),
+    xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL)
+  };
   var closeMobileNav = function closeMobileNav() {
     if (isMobile) {
       setIsMobileL2Open(false);
@@ -175,14 +225,18 @@ var _SideNav = function _SideNav(_ref4, ref) {
       });
     }
   };
-  var cleanupTransition = function cleanupTransition() {
+  var cleanupTransition = React__default.useCallback(function () {
     var clearTransitionTimeout = setTimeout(function () {
-      if (isTransitioning) {
-        setIsTransitioning(false);
-      }
+      setIsTransitioning(function (isCurrentlyTransitioning) {
+        return isCurrentlyTransitioning ? false : isCurrentlyTransitioning;
+      });
     }, TRANSITION_CLEANUP_DELAY);
     timeoutIdsRef.current.push(clearTransitionTimeout);
-  };
+  }, []);
+  var startL1Transition = React__default.useCallback(function () {
+    setIsTransitioning(true);
+    cleanupTransition();
+  }, [cleanupTransition]);
   var collapseL1 = function collapseL1(title) {
     if (isMobile) {
       setL2DrawerTitle(title);
@@ -207,6 +261,10 @@ var _SideNav = function _SideNav(_ref4, ref) {
       });
       return;
     }
+    if (isSideNavFullyCollapsed) {
+      return;
+    }
+
     // Ensures that if Normal L1 item is clicked, the L1 stays expanded
     if (isL1Collapsed) {
       setIsL1Collapsed(false);
@@ -231,8 +289,7 @@ var _SideNav = function _SideNav(_ref4, ref) {
 
         // `args.isFirstRender` checks if the item that triggered this change, triggered it during first render or during subsequent change
         if (!args.isFirstRender) {
-          setIsTransitioning(true);
-          cleanupTransition();
+          startL1Transition();
           setIsL1Hovered(false);
           setIsHoverAgainEnabled(false);
           // For some delay, we disable hover to expand behaviour to avoid buggy flicker when cursor is on L1 while its trying to close
@@ -252,13 +309,14 @@ var _SideNav = function _SideNav(_ref4, ref) {
       l2PortalContainerRef: l2PortalContainerRef,
       onLinkActiveChange: onLinkActiveChange,
       closeMobileNav: closeMobileNav,
-      isL1Collapsed: isMobile ? isMobileL2Open : isL1Collapsed,
+      isL1Collapsed: effectiveIsL1Collapsed,
       setIsL1Collapsed: setIsL1Collapsed,
-      isL1Hovered: isL1Hovered
+      isL1Hovered: effectiveIsL1Hovered,
+      isSideNavFullyCollapsed: isSideNavFullyCollapsed
     };
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isL1Collapsed, isMobile, isMobileL2Open, isL1Hovered]);
+  [effectiveIsL1Collapsed, effectiveIsL1Hovered, isSideNavFullyCollapsed]);
   React__default.useEffect(function () {
     return function () {
       var _iterator = _createForOfIteratorHelper(timeoutIdsRef.current),
@@ -276,6 +334,24 @@ var _SideNav = function _SideNav(_ref4, ref) {
       timeoutIdsRef.current = [];
     };
   }, []);
+  React__default.useEffect(function () {
+    if (!isMobile && isSideNavFullyCollapsed && isL1Hovered) {
+      setIsL1Hovered(false);
+    }
+  }, [isMobile, isSideNavFullyCollapsed, isL1Hovered]);
+  React__default.useEffect(function () {
+    var prevIsSideNavFullyCollapsed = prevIsSideNavFullyCollapsedRef.current;
+    prevIsSideNavFullyCollapsedRef.current = isSideNavFullyCollapsed;
+    if (isMobile || prevIsSideNavFullyCollapsed === undefined) {
+      return;
+    }
+    if (prevIsSideNavFullyCollapsed !== isSideNavFullyCollapsed) {
+      startL1Transition();
+      onExpandChange === null || onExpandChange === void 0 || onExpandChange({
+        isExpanded: !isSideNavFullyCollapsed
+      });
+    }
+  }, [isMobile, isSideNavFullyCollapsed, onExpandChange, startL1Transition]);
   return /*#__PURE__*/jsx(SideNavContext.Provider, {
     value: contextValue,
     children: isMobile && onDismiss ? /*#__PURE__*/jsxs(Fragment, {
@@ -312,10 +388,12 @@ var _SideNav = function _SideNav(_ref4, ref) {
           })
         })]
       })]
-    }) : /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    }) : /*#__PURE__*/jsxs(StyledSideNavContainer, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      $isSideNavExpandable: typeof _isExpanded !== 'undefined',
       ref: ref,
+      className: isSideNavFullyCollapsed ? COLLAPSED : '',
       position: "fixed",
-      backgroundColor: "surface.background.gray.moderate",
+      backgroundColor: backgroundColor,
       height: "100%",
       top: "spacing.0",
       left: "spacing.0",
@@ -324,15 +402,20 @@ var _SideNav = function _SideNav(_ref4, ref) {
         m: 'flex'
       },
       flexDirection: "column",
-      width: {
-        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),
-        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL)
-      },
+      width: sideNavWidth,
       as: "nav"
     }, metaAttribute({
       name: MetaConstants.SideNav,
       testID: testID
     })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
+      onTransitionEnd: function onTransitionEnd(e) {
+        if (e.target !== e.currentTarget || e.propertyName !== 'width' || isMobile) {
+          return;
+        }
+        onExpandTransitionEnd === null || onExpandTransitionEnd === void 0 || onExpandTransitionEnd({
+          isExpanded: !isSideNavFullyCollapsed
+        });
+      },
       children: [banner ? /*#__PURE__*/jsx(BannerContainer, {
         children: banner
       }) : null, /*#__PURE__*/jsxs(BaseBox, {
@@ -342,7 +425,8 @@ var _SideNav = function _SideNav(_ref4, ref) {
         width: "100%",
         children: [/*#__PURE__*/jsx(StyledL2PortalContainer, {
           position: "absolute",
-          backgroundColor: "surface.background.gray.moderate",
+          display: isSideNavFullyCollapsed ? 'none' : 'block',
+          backgroundColor: backgroundColor,
           height: "100%",
           width: "100%",
           top: "spacing.0",
@@ -355,15 +439,16 @@ var _SideNav = function _SideNav(_ref4, ref) {
           ref: l1ContainerRef,
           id: "blade-sidenav-l1",
           className: getL1MenuClassName({
-            isL1Collapsed: isL1Collapsed,
-            isL1Hovered: isL1Hovered,
+            isL1Collapsed: effectiveIsL1Collapsed,
+            isL1Hovered: effectiveIsL1Hovered,
             isTransitioning: isTransitioning
           }),
+          $isSideNavExpandable: typeof _isExpanded !== 'undefined',
           position: "absolute",
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between",
-          backgroundColor: "surface.background.gray.moderate",
+          backgroundColor: backgroundColor,
           height: "100%",
           overflow: "hidden",
           top: "spacing.0",
@@ -389,6 +474,9 @@ var _SideNav = function _SideNav(_ref4, ref) {
           // 6. But in case of unhover/leave, we don't want to trigger mouseOut for all child components individually. We want 1 hover out of L1 menu. Thus we use `onMouseLeave`
           ,
           onMouseOver: function onMouseOver() {
+            if (!isMobile && isSideNavFullyCollapsed) {
+              return;
+            }
             if (mouseOverTimeoutRef.current) {
               clearTimeout(mouseOverTimeoutRef.current);
             }
@@ -400,11 +488,13 @@ var _SideNav = function _SideNav(_ref4, ref) {
             }
           },
           onMouseLeave: function onMouseLeave() {
+            if (!isMobile && isSideNavFullyCollapsed) {
+              return;
+            }
             if (isL1Collapsed && isL1Hovered) {
               mouseOverTimeoutRef.current = setTimeout(function () {
                 setIsL1Hovered(false);
-                setIsTransitioning(true);
-                cleanupTransition();
+                startL1Transition();
                 onVisibleLevelChange === null || onVisibleLevelChange === void 0 || onVisibleLevelChange({
                   visibleLevel: 2
                 });