@razorpay/blade 12.95.0 → 12.95.2

package/build/lib/web/development/components/Input/BaseInput/baseInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"baseInputStyles.js","sources":["../../../../../../../src/components/Input/BaseInput/baseInputStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { BaseInputProps } from './BaseInput';\nimport { getBaseInputBorderStyles } from './getBaseInputBorderStyles';\nimport {\n  baseInputBackgroundColor,\n  baseInputBorderColor,\n  baseInputBorderRadius,\n  baseInputBorderWidth,\n  baseInputBorderlessBackgroundColor,\n  baseInputCounterInputPaddingTokens,\n  baseInputHeight,\n  baseInputPaddingTokens,\n  baseInputWrapperMaxHeight,\n} from './baseInputTokens';\nimport { getInputVisualsToBeRendered } from './BaseInputVisuals';\nimport type { BaseInputWrapperProps } from './types';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { getPlatformType } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeSpace } from '~utils/makeSpace';\nimport getHeadingStyles from '~components/Typography/Heading/getHeadingStyles';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\n\ntype GetInputStyles = Pick<\n  BaseInputProps,\n  | 'isDisabled'\n  | 'validationState'\n  | 'leadingIcon'\n  | 'prefix'\n  | 'trailingInteractionElement'\n  | 'leadingInteractionElement'\n  | 'suffix'\n  | 'trailingIcon'\n  | 'textAlign'\n  | 'isDropdownTrigger'\n  | 'valueComponentType'\n> & {\n  isHovered?: boolean;\n  isFocused?: boolean;\n  isTextArea?: boolean;\n  hasTags?: boolean;\n  theme: Theme;\n  size: NonNullable<BaseInputProps['size']>;\n  padding?: BaseInputProps['padding'];\n  borderRadius?: BaseInputProps['borderRadius'];\n  isTableInputCell: NonNullable<BaseInputProps['isTableInputCell']>;\n  hasLeadingDropdown?: boolean;\n  color?: BaseTextProps['color'];\n  disabledColor?: BaseTextProps['color'];\n  isInsideCounterInput?: boolean;\n};\n\nexport const getBaseInputState = ({\n  isFocused,\n  isHovered,\n  isDisabled,\n}: {\n  isFocused?: boolean;\n  isHovered?: boolean;\n  isDisabled?: boolean;\n}): 'focused' | 'hovered' | 'disabled' | 'default' => {\n  if (isDisabled) {\n    return 'disabled';\n  } else if (isFocused) {\n    return 'focused';\n  } else if (isHovered) {\n    return 'hovered';\n  } else {\n    return 'default';\n  }\n};\n\nexport const getInputBackgroundAndBorderStyles = ({\n  theme,\n  isHovered,\n  isFocused,\n  isDisabled,\n  validationState,\n  isTextArea,\n  isDropdownTrigger,\n  isTableInputCell,\n  size = 'medium',\n  borderRadius,\n}: Pick<\n  GetInputStyles,\n  | 'theme'\n  | 'isFocused'\n  | 'isDisabled'\n  | 'validationState'\n  | 'isHovered'\n  | 'isTextArea'\n  | 'isDropdownTrigger'\n  | 'isTableInputCell'\n  | 'size'\n  | 'borderRadius'\n>): CSSObject => {\n  // normal state\n  const backgroundColorTokens = isTableInputCell\n    ? baseInputBorderlessBackgroundColor\n    : baseInputBackgroundColor;\n  let backgroundColor = getIn(theme.colors, backgroundColorTokens.default);\n  let borderColor = isTableInputCell\n    ? theme.colors.transparent\n    : getIn(theme.colors, baseInputBorderColor.default);\n  let borderWidth = getIn(theme.border.width, baseInputBorderWidth.default);\n  let zIndex: number | undefined;\n\n  const baseInputState = getBaseInputState({ isFocused, isHovered, isDisabled });\n\n  backgroundColor = getIn(theme.colors, backgroundColorTokens[baseInputState]);\n  borderColor =\n    isTableInputCell && baseInputState !== 'focused'\n      ? theme.colors.transparent\n      : getIn(theme.colors, baseInputBorderColor[baseInputState]);\n  borderWidth = getIn(theme.border.width, baseInputBorderWidth[baseInputState]);\n\n  if (!isTableInputCell && validationState && validationState !== 'none') {\n    borderColor = getIn(theme.colors, baseInputBorderColor[validationState]);\n    borderWidth = getIn(theme.border.width, baseInputBorderWidth[validationState]);\n    zIndex = 1; // Prevent validation ring clipping by adjacent inputs in InputGroup\n  } else if (validationState && validationState !== 'none') {\n    backgroundColor = getIn(theme.colors, baseInputBorderlessBackgroundColor[validationState]);\n  }\n  return {\n    backgroundColor,\n    borderRadius: makeBorderSize(\n      isTableInputCell\n        ? theme.border.radius.none\n        : theme.border.radius[borderRadius ?? baseInputBorderRadius[size]],\n    ),\n    borderStyle: 'solid',\n    display: 'flex',\n    flexDirection: 'row',\n    width: '100%',\n    alignItems: isTextArea ? 'flex-start' : 'center',\n    position: 'relative',\n    height: isDropdownTrigger && !isTextArea ? 'auto' : undefined,\n    border: 'none',\n    zIndex,\n    ...getBaseInputBorderStyles({ theme, borderColor, borderWidth, isFocused }),\n  };\n};\n\nconst getLeftPadding = ({\n  theme,\n  isDropdownTrigger,\n  hasLeadingIcon,\n  hasPrefix,\n  size,\n  hasLeadingDropdown,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  hasLeadingIcon: boolean;\n  hasPrefix: boolean;\n  isDropdownTrigger: GetInputStyles['isDropdownTrigger'];\n  size: GetInputStyles['size'];\n  hasLeadingDropdown: boolean;\n  isInsideCounterInput?: boolean;\n}): number => {\n  if (isDropdownTrigger) {\n    return theme.spacing[0];\n  }\n\n  if (hasLeadingIcon || hasPrefix || hasLeadingDropdown) {\n    return theme.spacing[3];\n  }\n\n  /**\n   * CounterInput uses tighter padding (4px vs 8-12px) for compact design\n   */\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.left[size]];\n  }\n\n  return theme.spacing[baseInputPaddingTokens.left[size]];\n};\n\nconst getRightPadding = ({\n  theme,\n  hasTrailingInteractionElement,\n  hasSuffix,\n  hasTrailingIcon,\n  size,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  hasTrailingInteractionElement: boolean;\n  hasSuffix: boolean;\n  hasTrailingIcon: boolean;\n  size: GetInputStyles['size'];\n  isInsideCounterInput?: boolean;\n}): number => {\n  if (hasTrailingInteractionElement || hasSuffix || hasTrailingIcon) {\n    return theme.spacing[3];\n  }\n\n  // CounterInput uses compact padding\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.right[size]];\n  }\n  return theme.spacing[baseInputPaddingTokens.right[size]];\n};\n\nconst getTopPadding = ({\n  theme,\n  size,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  size: GetInputStyles['size'];\n  isInsideCounterInput?: boolean;\n}): number => {\n  // CounterInput uses compact padding\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.top[size]];\n  }\n  return theme.spacing[baseInputPaddingTokens.top[size]];\n};\n\nconst getBottomPadding = ({\n  theme,\n  size,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  size: GetInputStyles['size'];\n  isInsideCounterInput?: boolean;\n}): number => {\n  // CounterInput uses compact padding\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.top[size]];\n  }\n  return theme.spacing[baseInputPaddingTokens.bottom[size]];\n};\n\nexport const getBaseInputStyles = ({\n  theme,\n  isDisabled,\n  leadingIcon,\n  prefix,\n  trailingInteractionElement,\n  leadingInteractionElement,\n  suffix,\n  trailingIcon,\n  textAlign,\n  isTextArea,\n  hasTags,\n  isDropdownTrigger,\n  size,\n  padding,\n  valueComponentType,\n  hasLeadingDropdown = false,\n  color,\n  disabledColor,\n  isInsideCounterInput,\n}: GetInputStyles): CSSObject => {\n  const {\n    hasLeadingIcon,\n    hasPrefix,\n    hasTrailingInteractionElement,\n    hasSuffix,\n    hasTrailingIcon,\n  } = getInputVisualsToBeRendered({\n    leadingIcon,\n    prefix,\n    trailingInteractionElement,\n    leadingInteractionElement,\n    suffix,\n    trailingIcon,\n    size,\n  });\n\n  const isDropdownWithTags = isDropdownTrigger && hasTags;\n  const isReactNative = getPlatformType() === 'react-native';\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n  const shouldHaveFlexibleHeight = isTextArea || isDropdownWithTags;\n\n  return {\n    ...(valueComponentType === 'heading'\n      ? getHeadingStyles({\n          size: size === 'xsmall' ? 'small' : size,\n          weight: 'regular',\n          color: isDisabled ? 'surface.text.gray.disabled' : 'interactive.text.gray.normal',\n          theme,\n        })\n      : getTextStyles({\n          /**\n           * CounterInput: uses 'small' size for xsmall and 'semibold' weight for prominence\n           */\n          size: isInsideCounterInput && size === 'xsmall' ? 'small' : size,\n          variant: 'body',\n          weight: isInsideCounterInput ? 'semibold' : 'regular',\n          color: isDisabled\n            ? disabledColor ?? 'surface.text.gray.disabled'\n            : color ?? 'interactive.text.gray.normal',\n          theme,\n        })),\n\n    // take the full available width of parent container for input field\n    flex: 1,\n    backgroundColor: theme.colors.transparent,\n\n    paddingTop: padding ?? makeSpace(getTopPadding({ theme, size, isInsideCounterInput })),\n    paddingBottom: padding ?? makeSpace(getBottomPadding({ theme, size, isInsideCounterInput })),\n    paddingLeft:\n      padding ??\n      makeSpace(\n        getLeftPadding({\n          theme,\n          isDropdownTrigger,\n          hasLeadingIcon,\n          hasPrefix,\n          size,\n          hasLeadingDropdown,\n          isInsideCounterInput,\n        }),\n      ),\n    paddingRight:\n      padding ??\n      getRightPadding({\n        theme,\n        hasTrailingInteractionElement,\n        hasSuffix,\n        hasTrailingIcon,\n        size,\n        isInsideCounterInput,\n      }),\n\n    textAlign,\n    width: '100%',\n    height: shouldHaveFlexibleHeight ? undefined : makeSpace(baseInputHeight[size]),\n    minHeight: shouldHaveFlexibleHeight ? undefined : makeSpace(baseInputHeight[size]),\n    ...(isReactNative ? {} : { resize: 'none', boxSizing: 'border-box' }),\n  };\n};\n\nexport const getAnimatedBaseInputWrapperMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n  size,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags' | 'size'>): number => {\n  if (maxTagRows === 'single') {\n    return baseInputHeight[size];\n  }\n\n  if (maxTagRows === 'multiple') {\n    return baseInputWrapperMaxHeight[size];\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? baseInputWrapperMaxHeight[size] : baseInputHeight[size];\n};\n"],"names":["getBaseInputState","_ref","isFocused","isHovered","isDisabled","getInputBackgroundAndBorderStyles","_ref2","theme","validationState","isTextArea","isDropdownTrigger","isTableInputCell","_ref2$size","size","borderRadius","backgroundColorTokens","baseInputBorderlessBackgroundColor","baseInputBackgroundColor","backgroundColor","getIn","colors","borderColor","transparent","baseInputBorderColor","borderWidth","border","width","baseInputBorderWidth","zIndex","baseInputState","_objectSpread","makeBorderSize","radius","none","baseInputBorderRadius","borderStyle","display","flexDirection","alignItems","position","height","undefined","getBaseInputBorderStyles","getLeftPadding","_ref3","hasLeadingIcon","hasPrefix","hasLeadingDropdown","isInsideCounterInput","spacing","baseInputCounterInputPaddingTokens","left","baseInputPaddingTokens","getRightPadding","_ref4","hasTrailingInteractionElement","hasSuffix","hasTrailingIcon","right","getTopPadding","_ref5","top","getBottomPadding","_ref6","bottom","getBaseInputStyles","_ref7","leadingIcon","prefix","trailingInteractionElement","leadingInteractionElement","suffix","trailingIcon","textAlign","hasTags","padding","valueComponentType","_ref7$hasLeadingDropd","color","disabledColor","_getInputVisualsToBeR","getInputVisualsToBeRendered","isDropdownWithTags","isReactNative","getPlatformType","shouldHaveFlexibleHeight","getHeadingStyles","weight","getTextStyles","variant","flex","paddingTop","makeSpace","paddingBottom","paddingLeft","paddingRight","baseInputHeight","minHeight","resize","boxSizing","getAnimatedBaseInputWrapperMaxHeight","_ref8","maxTagRows","showAllTags","baseInputWrapperMaxHeight"],"mappings":"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"}
+{"version":3,"file":"baseInputStyles.js","sources":["../../../../../../../src/components/Input/BaseInput/baseInputStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { BaseInputProps } from './BaseInput';\nimport { getBaseInputBorderStyles } from './getBaseInputBorderStyles';\nimport {\n  baseInputBackgroundColor,\n  baseInputBorderColor,\n  baseInputBorderRadius,\n  baseInputBorderWidth,\n  baseInputBorderlessBackgroundColor,\n  baseInputCounterInputPaddingTokens,\n  baseInputHeight,\n  baseInputPaddingTokens,\n  baseInputWrapperMaxHeight,\n} from './baseInputTokens';\nimport { getInputVisualsToBeRendered } from './BaseInputVisuals';\nimport type { BaseInputWrapperProps } from './types';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { getPlatformType } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeSpace } from '~utils/makeSpace';\nimport getHeadingStyles from '~components/Typography/Heading/getHeadingStyles';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\n\ntype GetInputStyles = Pick<\n  BaseInputProps,\n  | 'isDisabled'\n  | 'validationState'\n  | 'leadingIcon'\n  | 'prefix'\n  | 'trailingInteractionElement'\n  | 'leadingInteractionElement'\n  | 'suffix'\n  | 'trailingIcon'\n  | 'textAlign'\n  | 'isDropdownTrigger'\n  | 'valueComponentType'\n> & {\n  isHovered?: boolean;\n  isFocused?: boolean;\n  isTextArea?: boolean;\n  hasTags?: boolean;\n  theme: Theme;\n  size: NonNullable<BaseInputProps['size']>;\n  padding?: BaseInputProps['padding'];\n  borderRadius?: BaseInputProps['borderRadius'];\n  isTableInputCell: NonNullable<BaseInputProps['isTableInputCell']>;\n  hasLeadingDropdown?: boolean;\n  color?: BaseTextProps['color'];\n  disabledColor?: BaseTextProps['color'];\n  isInsideCounterInput?: boolean;\n};\n\nexport const getBaseInputState = ({\n  isFocused,\n  isHovered,\n  isDisabled,\n}: {\n  isFocused?: boolean;\n  isHovered?: boolean;\n  isDisabled?: boolean;\n}): 'focused' | 'hovered' | 'disabled' | 'default' => {\n  if (isDisabled) {\n    return 'disabled';\n  } else if (isFocused) {\n    return 'focused';\n  } else if (isHovered) {\n    return 'hovered';\n  } else {\n    return 'default';\n  }\n};\n\nexport const getInputBackgroundAndBorderStyles = ({\n  theme,\n  isHovered,\n  isFocused,\n  isDisabled,\n  validationState,\n  isTextArea,\n  isDropdownTrigger,\n  isTableInputCell,\n  size = 'medium',\n  borderRadius,\n}: Pick<\n  GetInputStyles,\n  | 'theme'\n  | 'isFocused'\n  | 'isDisabled'\n  | 'validationState'\n  | 'isHovered'\n  | 'isTextArea'\n  | 'isDropdownTrigger'\n  | 'isTableInputCell'\n  | 'size'\n  | 'borderRadius'\n>): CSSObject => {\n  // normal state\n  const backgroundColorTokens = isTableInputCell\n    ? baseInputBorderlessBackgroundColor\n    : baseInputBackgroundColor;\n  let backgroundColor = getIn(theme.colors, backgroundColorTokens.default);\n  let borderColor = isTableInputCell\n    ? theme.colors.transparent\n    : getIn(theme.colors, baseInputBorderColor.default);\n  let borderWidth = getIn(theme.border.width, baseInputBorderWidth.default);\n  let zIndex: number | undefined;\n\n  const baseInputState = getBaseInputState({ isFocused, isHovered, isDisabled });\n\n  backgroundColor = getIn(theme.colors, backgroundColorTokens[baseInputState]);\n  borderColor =\n    isTableInputCell && baseInputState !== 'focused'\n      ? theme.colors.transparent\n      : getIn(theme.colors, baseInputBorderColor[baseInputState]);\n  borderWidth = getIn(theme.border.width, baseInputBorderWidth[baseInputState]);\n\n  if (!isTableInputCell && validationState && validationState !== 'none') {\n    borderColor = getIn(theme.colors, baseInputBorderColor[validationState]);\n    borderWidth = getIn(theme.border.width, baseInputBorderWidth[validationState]);\n    zIndex = 1; // Prevent validation ring clipping by adjacent inputs in InputGroup\n  } else if (validationState && validationState !== 'none') {\n    backgroundColor = getIn(theme.colors, baseInputBorderlessBackgroundColor[validationState]);\n  }\n  return {\n    backgroundColor,\n    borderRadius: makeBorderSize(\n      isTableInputCell\n        ? theme.border.radius.none\n        : theme.border.radius[borderRadius ?? baseInputBorderRadius[size]],\n    ),\n    overflow: 'hidden',\n    borderStyle: 'solid',\n    display: 'flex',\n    flexDirection: 'row',\n    width: '100%',\n    alignItems: isTextArea ? 'flex-start' : 'center',\n    position: 'relative',\n    height: isDropdownTrigger && !isTextArea ? 'auto' : undefined,\n    border: 'none',\n    zIndex,\n    ...getBaseInputBorderStyles({ theme, borderColor, borderWidth, isFocused }),\n  };\n};\n\nconst getLeftPadding = ({\n  theme,\n  isDropdownTrigger,\n  hasLeadingIcon,\n  hasPrefix,\n  size,\n  hasLeadingDropdown,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  hasLeadingIcon: boolean;\n  hasPrefix: boolean;\n  isDropdownTrigger: GetInputStyles['isDropdownTrigger'];\n  size: GetInputStyles['size'];\n  hasLeadingDropdown: boolean;\n  isInsideCounterInput?: boolean;\n}): number => {\n  if (isDropdownTrigger) {\n    return theme.spacing[0];\n  }\n\n  if (hasLeadingIcon || hasPrefix || hasLeadingDropdown) {\n    return theme.spacing[3];\n  }\n\n  /**\n   * CounterInput uses tighter padding (4px vs 8-12px) for compact design\n   */\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.left[size]];\n  }\n\n  return theme.spacing[baseInputPaddingTokens.left[size]];\n};\n\nconst getRightPadding = ({\n  theme,\n  hasTrailingInteractionElement,\n  hasSuffix,\n  hasTrailingIcon,\n  size,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  hasTrailingInteractionElement: boolean;\n  hasSuffix: boolean;\n  hasTrailingIcon: boolean;\n  size: GetInputStyles['size'];\n  isInsideCounterInput?: boolean;\n}): number => {\n  if (hasTrailingInteractionElement || hasSuffix || hasTrailingIcon) {\n    return theme.spacing[3];\n  }\n\n  // CounterInput uses compact padding\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.right[size]];\n  }\n  return theme.spacing[baseInputPaddingTokens.right[size]];\n};\n\nconst getTopPadding = ({\n  theme,\n  size,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  size: GetInputStyles['size'];\n  isInsideCounterInput?: boolean;\n}): number => {\n  // CounterInput uses compact padding\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.top[size]];\n  }\n  return theme.spacing[baseInputPaddingTokens.top[size]];\n};\n\nconst getBottomPadding = ({\n  theme,\n  size,\n  isInsideCounterInput,\n}: {\n  theme: Theme;\n  size: GetInputStyles['size'];\n  isInsideCounterInput?: boolean;\n}): number => {\n  // CounterInput uses compact padding\n  if (isInsideCounterInput) {\n    return theme.spacing[baseInputCounterInputPaddingTokens.top[size]];\n  }\n  return theme.spacing[baseInputPaddingTokens.bottom[size]];\n};\n\nexport const getBaseInputStyles = ({\n  theme,\n  isDisabled,\n  leadingIcon,\n  prefix,\n  trailingInteractionElement,\n  leadingInteractionElement,\n  suffix,\n  trailingIcon,\n  textAlign,\n  isTextArea,\n  hasTags,\n  isDropdownTrigger,\n  size,\n  padding,\n  valueComponentType,\n  hasLeadingDropdown = false,\n  color,\n  disabledColor,\n  isInsideCounterInput,\n}: GetInputStyles): CSSObject => {\n  const {\n    hasLeadingIcon,\n    hasPrefix,\n    hasTrailingInteractionElement,\n    hasSuffix,\n    hasTrailingIcon,\n  } = getInputVisualsToBeRendered({\n    leadingIcon,\n    prefix,\n    trailingInteractionElement,\n    leadingInteractionElement,\n    suffix,\n    trailingIcon,\n    size,\n  });\n\n  const isDropdownWithTags = isDropdownTrigger && hasTags;\n  const isReactNative = getPlatformType() === 'react-native';\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n  const shouldHaveFlexibleHeight = isTextArea || isDropdownWithTags;\n\n  return {\n    ...(valueComponentType === 'heading'\n      ? getHeadingStyles({\n          size: size === 'xsmall' ? 'small' : size,\n          weight: 'regular',\n          color: isDisabled ? 'surface.text.gray.disabled' : 'interactive.text.gray.normal',\n          theme,\n        })\n      : getTextStyles({\n          /**\n           * CounterInput: uses 'small' size for xsmall and 'semibold' weight for prominence\n           */\n          size: isInsideCounterInput && size === 'xsmall' ? 'small' : size,\n          variant: 'body',\n          weight: isInsideCounterInput ? 'semibold' : 'regular',\n          color: isDisabled\n            ? disabledColor ?? 'surface.text.gray.disabled'\n            : color ?? 'interactive.text.gray.normal',\n          theme,\n        })),\n\n    // take the full available width of parent container for input field\n    flex: 1,\n    backgroundColor: theme.colors.transparent,\n\n    paddingTop: padding ?? makeSpace(getTopPadding({ theme, size, isInsideCounterInput })),\n    paddingBottom: padding ?? makeSpace(getBottomPadding({ theme, size, isInsideCounterInput })),\n    paddingLeft:\n      padding ??\n      makeSpace(\n        getLeftPadding({\n          theme,\n          isDropdownTrigger,\n          hasLeadingIcon,\n          hasPrefix,\n          size,\n          hasLeadingDropdown,\n          isInsideCounterInput,\n        }),\n      ),\n    paddingRight:\n      padding ??\n      getRightPadding({\n        theme,\n        hasTrailingInteractionElement,\n        hasSuffix,\n        hasTrailingIcon,\n        size,\n        isInsideCounterInput,\n      }),\n\n    textAlign,\n    width: '100%',\n    height: shouldHaveFlexibleHeight ? undefined : makeSpace(baseInputHeight[size]),\n    minHeight: shouldHaveFlexibleHeight ? undefined : makeSpace(baseInputHeight[size]),\n    ...(isReactNative ? {} : { resize: 'none', boxSizing: 'border-box' }),\n  };\n};\n\nexport const getAnimatedBaseInputWrapperMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n  size,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags' | 'size'>): number => {\n  if (maxTagRows === 'single') {\n    return baseInputHeight[size];\n  }\n\n  if (maxTagRows === 'multiple') {\n    return baseInputWrapperMaxHeight[size];\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? baseInputWrapperMaxHeight[size] : baseInputHeight[size];\n};\n"],"names":["getBaseInputState","_ref","isFocused","isHovered","isDisabled","getInputBackgroundAndBorderStyles","_ref2","theme","validationState","isTextArea","isDropdownTrigger","isTableInputCell","_ref2$size","size","borderRadius","backgroundColorTokens","baseInputBorderlessBackgroundColor","baseInputBackgroundColor","backgroundColor","getIn","colors","borderColor","transparent","baseInputBorderColor","borderWidth","border","width","baseInputBorderWidth","zIndex","baseInputState","_objectSpread","makeBorderSize","radius","none","baseInputBorderRadius","overflow","borderStyle","display","flexDirection","alignItems","position","height","undefined","getBaseInputBorderStyles","getLeftPadding","_ref3","hasLeadingIcon","hasPrefix","hasLeadingDropdown","isInsideCounterInput","spacing","baseInputCounterInputPaddingTokens","left","baseInputPaddingTokens","getRightPadding","_ref4","hasTrailingInteractionElement","hasSuffix","hasTrailingIcon","right","getTopPadding","_ref5","top","getBottomPadding","_ref6","bottom","getBaseInputStyles","_ref7","leadingIcon","prefix","trailingInteractionElement","leadingInteractionElement","suffix","trailingIcon","textAlign","hasTags","padding","valueComponentType","_ref7$hasLeadingDropd","color","disabledColor","_getInputVisualsToBeR","getInputVisualsToBeRendered","isDropdownWithTags","isReactNative","getPlatformType","shouldHaveFlexibleHeight","getHeadingStyles","weight","getTextStyles","variant","flex","paddingTop","makeSpace","paddingBottom","paddingLeft","paddingRight","baseInputHeight","minHeight","resize","boxSizing","getAnimatedBaseInputWrapperMaxHeight","_ref8","maxTagRows","showAllTags","baseInputWrapperMaxHeight"],"mappings":"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"}

package/build/lib/web/development/components/Modal/Modal.web.js

@@ -19,6 +19,7 @@ import '../../utils/makeAccessible/index.js';
 import '../../utils/logger/index.js';
 import { componentZIndices } from '../../utils/componentZIndices.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import { TopNavOverlayThemeOverride } from '../TopNav/TopNavOverlayThemeOverride.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
@@ -113,34 +114,36 @@ var Modal = function Modal(_ref2) {
         initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : defaultInitialFocusRef,
         context: context,
         modal: true,
-        children: /*#__PURE__*/jsxs(Box, {
-          zIndex: zIndex,
-          position: "fixed",
-          testID: "modal-wrapper",
-          children: [/*#__PURE__*/jsx(ModalBackdrop, {}), /*#__PURE__*/jsx(ModalContent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
-            name: MetaConstants.Modal
-          })), makeAccessible({
-            role: 'dialog',
-            modal: true,
-            label: accessibilityLabel
-          })), makeAnalyticsAttribute(rest)), {}, {
-            maxWidth: size === 'full' ? '100%' : makeSize(modalMaxWidth[size]),
-            minWidth: makeSize(modalMinWidth),
-            maxHeight: modalMaxHeight[size],
-            width: size === 'full' ? "calc(100vw - ".concat(makeSize(modalMargin[size] * 2), ")") : "calc(100vw - ".concat(makeSize(modalResponsiveScreenGap), ")"),
-            borderRadius: modalBorderRadius,
-            backgroundColor: "popup.background.gray.subtle",
-            display: "flex",
-            flexDirection: "column",
-            top: "50%",
-            left: "50%",
-            onKeyDown: handleKeyDown,
-            isVisible: isVisible,
-            size: size,
-            ref: refs.setFloating,
-            overflow: "hidden",
-            children: children
-          }))]
+        children: /*#__PURE__*/jsx(TopNavOverlayThemeOverride, {
+          children: /*#__PURE__*/jsxs(Box, {
+            zIndex: zIndex,
+            position: "fixed",
+            testID: "modal-wrapper",
+            children: [/*#__PURE__*/jsx(ModalBackdrop, {}), /*#__PURE__*/jsx(ModalContent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+              name: MetaConstants.Modal
+            })), makeAccessible({
+              role: 'dialog',
+              modal: true,
+              label: accessibilityLabel
+            })), makeAnalyticsAttribute(rest)), {}, {
+              maxWidth: size === 'full' ? '100%' : makeSize(modalMaxWidth[size]),
+              minWidth: makeSize(modalMinWidth),
+              maxHeight: modalMaxHeight[size],
+              width: size === 'full' ? "calc(100vw - ".concat(makeSize(modalMargin[size] * 2), ")") : "calc(100vw - ".concat(makeSize(modalResponsiveScreenGap), ")"),
+              borderRadius: modalBorderRadius,
+              backgroundColor: "popup.background.gray.subtle",
+              display: "flex",
+              flexDirection: "column",
+              top: "50%",
+              left: "50%",
+              onKeyDown: handleKeyDown,
+              isVisible: isVisible,
+              size: size,
+              ref: refs.setFloating,
+              overflow: "hidden",
+              children: children
+            }))]
+          })
         })
       }) : null
     })

package/build/lib/web/development/components/Modal/Modal.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n  modalMargin,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger } from '~utils/logger';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean; size: NonNullable<ModalProps['size']> }>(\n  ({ isVisible, theme, size }) => {\n    const scale = isVisible ? 1 : 0.9;\n    const transform = size !== 'full' ? `translate(-50%, -50%) scale(${scale})` : ``;\n\n    return css`\n      box-shadow: ${theme.elevation.highRaised};\n      opacity: ${isVisible ? 1 : 0};\n      position: fixed;\n      transform: ${transform};\n      transition-property: opacity, transform;\n      transition-duration: ${castWebType(makeMotionTime(theme.motion.duration.moderate))};\n      transition-timing-function: ${isVisible\n        ? castWebType(theme.motion.easing.entrance)\n        : castWebType(theme.motion.easing.exit)};\n\n      ${size === 'full' &&\n      css`\n        top: ${makeSize(modalMargin[size])};\n        left: ${makeSize(modalMargin[size])};\n        right: ${makeSize(modalMargin[size])};\n        bottom: ${makeSize(modalMargin[size])};\n      `}\n    `;\n  },\n);\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  isDismissible = true,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = componentZIndices.modal,\n  ...rest\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.moderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      isDismissible,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, isDismissible, defaultInitialFocusRef, isVisible],\n  );\n\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press only if dismissible\n    if (isDismissible && (event?.key === 'Escape' || event?.code === 'Escape')) {\n      onDismiss?.();\n    }\n  };\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                {...makeAnalyticsAttribute(rest)}\n                maxWidth={size === 'full' ? '100%' : makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight[size]}\n                width={\n                  size === 'full'\n                    ? `calc(100vw - ${makeSize(modalMargin[size] * 2)})`\n                    : `calc(100vw - ${makeSize(modalResponsiveScreenGap)})`\n                }\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.gray.subtle\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                size={size}\n                ref={refs.setFloating}\n                overflow=\"hidden\"\n              >\n                {children}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","size","scale","transform","concat","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","moderate","easing","entrance","exit","makeSize","modalMargin","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","_ref2$isDismissible","isDismissible","initialFocusRef","_ref2$size","accessibilityLabel","_ref2$zIndex","zIndex","componentZIndices","modal","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","MetaConstants","makeAccessible","role","label","makeAnalyticsAttribute","maxWidth","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating","overflow"],"mappings":"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"}
+{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n  modalMargin,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger } from '~utils/logger';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { TopNavOverlayThemeOverride } from '~components/TopNav/TopNavOverlayThemeOverride';\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean; size: NonNullable<ModalProps['size']> }>(\n  ({ isVisible, theme, size }) => {\n    const scale = isVisible ? 1 : 0.9;\n    const transform = size !== 'full' ? `translate(-50%, -50%) scale(${scale})` : ``;\n\n    return css`\n      box-shadow: ${theme.elevation.highRaised};\n      opacity: ${isVisible ? 1 : 0};\n      position: fixed;\n      transform: ${transform};\n      transition-property: opacity, transform;\n      transition-duration: ${castWebType(makeMotionTime(theme.motion.duration.moderate))};\n      transition-timing-function: ${isVisible\n        ? castWebType(theme.motion.easing.entrance)\n        : castWebType(theme.motion.easing.exit)};\n\n      ${size === 'full' &&\n      css`\n        top: ${makeSize(modalMargin[size])};\n        left: ${makeSize(modalMargin[size])};\n        right: ${makeSize(modalMargin[size])};\n        bottom: ${makeSize(modalMargin[size])};\n      `}\n    `;\n  },\n);\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  isDismissible = true,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = componentZIndices.modal,\n  ...rest\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.moderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      isDismissible,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, isDismissible, defaultInitialFocusRef, isVisible],\n  );\n\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press only if dismissible\n    if (isDismissible && (event?.key === 'Escape' || event?.code === 'Escape')) {\n      onDismiss?.();\n    }\n  };\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <TopNavOverlayThemeOverride>\n              <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n                <ModalBackdrop />\n                <ModalContent\n                  {...metaAttribute({\n                    name: MetaConstants.Modal,\n                  })}\n                  {...makeAccessible({\n                    role: 'dialog',\n                    modal: true,\n                    label: accessibilityLabel,\n                  })}\n                  {...makeAnalyticsAttribute(rest)}\n                  maxWidth={size === 'full' ? '100%' : makeSize(modalMaxWidth[size])}\n                  minWidth={makeSize(modalMinWidth)}\n                  maxHeight={modalMaxHeight[size]}\n                  width={\n                    size === 'full'\n                      ? `calc(100vw - ${makeSize(modalMargin[size] * 2)})`\n                      : `calc(100vw - ${makeSize(modalResponsiveScreenGap)})`\n                  }\n                  borderRadius={modalBorderRadius}\n                  backgroundColor=\"popup.background.gray.subtle\"\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  top=\"50%\"\n                  left=\"50%\"\n                  onKeyDown={handleKeyDown}\n                  isVisible={isVisible}\n                  size={size}\n                  ref={refs.setFloating}\n                  overflow=\"hidden\"\n                >\n                  {children}\n                </ModalContent>\n              </Box>\n            </TopNavOverlayThemeOverride>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","size","scale","transform","concat","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","moderate","easing","entrance","exit","makeSize","modalMargin","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","_ref2$isDismissible","isDismissible","initialFocusRef","_ref2$size","accessibilityLabel","_ref2$zIndex","zIndex","componentZIndices","modal","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","TopNavOverlayThemeOverride","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","MetaConstants","makeAccessible","role","label","makeAnalyticsAttribute","maxWidth","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating","overflow"],"mappings":"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"}

package/build/lib/web/development/components/SideNav/SideNavItems/SideNavItem.web.js

@@ -70,7 +70,7 @@ var SideNavItem = function SideNavItem(_ref) {
           className: classes.HIDE_WHEN_COLLAPSED,
           children: /*#__PURE__*/jsx(Text, {
             truncateAfterLines: 1,
-            weight: "medium",
+            weight: "regular",
             size: "medium",
             color: "surface.text.gray.subtle",
             children: title

package/build/lib/web/development/components/SideNav/SideNavItems/SideNavItem.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.web.js","sources":["../../../../../../../src/components/SideNav/SideNavItems/SideNavItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { classes, getNavItemTransition, NAV_ITEM_HEIGHT } from '../tokens';\nimport type { SideNavItemProps } from '../types';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { TooltipifyComponent } from '~utils/TooltipifyComponent';\nimport type { IconComponent } from '~components/Icons';\nimport { isIconComponent } from '~utils/isIconComponent';\n\nconst SideNavItemContainer = styled(BaseBox)((props) => {\n  return {\n    transition: getNavItemTransition(props.theme),\n  };\n});\n\nconst SideNavItem = ({\n  leading,\n  trailing,\n  title,\n  backgroundColor,\n  tooltip,\n  as = 'div',\n  ...rest\n}: SideNavItemProps): React.ReactElement => {\n  const isIcon = typeof leading === 'function' && isIconComponent(leading);\n  const Icon: IconComponent | undefined = isIcon ? leading : undefined;\n\n  return (\n    <TooltipifyComponent tooltip={tooltip}>\n      <SideNavItemContainer\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        paddingX=\"spacing.3\"\n        height={makeSize(NAV_ITEM_HEIGHT)}\n        backgroundColor={backgroundColor}\n        borderRadius=\"small\"\n        as={as}\n        cursor={as === 'label' ? 'pointer' : undefined}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <Box display=\"inline-flex\" alignItems=\"center\" gap=\"spacing.3\">\n          {Icon ? (\n            <BaseBox display=\"flex\" alignItems=\"center\" paddingX=\"spacing.2\">\n              <Icon size=\"medium\" color=\"interactive.icon.gray.subtle\" />\n            </BaseBox>\n          ) : (\n            (leading as React.ReactNode)\n          )}\n          <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>\n            <Text\n              truncateAfterLines={1}\n              weight=\"medium\"\n              size=\"medium\"\n              color=\"surface.text.gray.subtle\"\n            >\n              {title}\n            </Text>\n          </BaseBox>\n        </Box>\n        <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>{trailing}</BaseBox>\n      </SideNavItemContainer>\n    </TooltipifyComponent>\n  );\n};\n\nexport { SideNavItem };\n"],"names":["SideNavItemContainer","styled","BaseBox","withConfig","displayName","componentId","props","transition","getNavItemTransition","theme","SideNavItem","_ref","leading","trailing","title","backgroundColor","tooltip","_ref$as","as","rest","_objectWithoutProperties","_excluded","isIcon","isIconComponent","Icon","undefined","_jsx","TooltipifyComponent","children","_jsxs","_objectSpread","display","flexDirection","justifyContent","alignItems","paddingX","height","makeSize","NAV_ITEM_HEIGHT","borderRadius","cursor","makeAnalyticsAttribute","Box","gap","size","color","className","classes","HIDE_WHEN_COLLAPSED","Text","truncateAfterLines","weight"],"mappings":"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"}
+{"version":3,"file":"SideNavItem.web.js","sources":["../../../../../../../src/components/SideNav/SideNavItems/SideNavItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { classes, getNavItemTransition, NAV_ITEM_HEIGHT } from '../tokens';\nimport type { SideNavItemProps } from '../types';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { TooltipifyComponent } from '~utils/TooltipifyComponent';\nimport type { IconComponent } from '~components/Icons';\nimport { isIconComponent } from '~utils/isIconComponent';\n\nconst SideNavItemContainer = styled(BaseBox)((props) => {\n  return {\n    transition: getNavItemTransition(props.theme),\n  };\n});\n\nconst SideNavItem = ({\n  leading,\n  trailing,\n  title,\n  backgroundColor,\n  tooltip,\n  as = 'div',\n  ...rest\n}: SideNavItemProps): React.ReactElement => {\n  const isIcon = typeof leading === 'function' && isIconComponent(leading);\n  const Icon: IconComponent | undefined = isIcon ? leading : undefined;\n\n  return (\n    <TooltipifyComponent tooltip={tooltip}>\n      <SideNavItemContainer\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        paddingX=\"spacing.3\"\n        height={makeSize(NAV_ITEM_HEIGHT)}\n        backgroundColor={backgroundColor}\n        borderRadius=\"small\"\n        as={as}\n        cursor={as === 'label' ? 'pointer' : undefined}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <Box display=\"inline-flex\" alignItems=\"center\" gap=\"spacing.3\">\n          {Icon ? (\n            <BaseBox display=\"flex\" alignItems=\"center\" paddingX=\"spacing.2\">\n              <Icon size=\"medium\" color=\"interactive.icon.gray.subtle\" />\n            </BaseBox>\n          ) : (\n            (leading as React.ReactNode)\n          )}\n          <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>\n            <Text\n              truncateAfterLines={1}\n              weight=\"regular\"\n              size=\"medium\"\n              color=\"surface.text.gray.subtle\"\n            >\n              {title}\n            </Text>\n          </BaseBox>\n        </Box>\n        <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>{trailing}</BaseBox>\n      </SideNavItemContainer>\n    </TooltipifyComponent>\n  );\n};\n\nexport { SideNavItem };\n"],"names":["SideNavItemContainer","styled","BaseBox","withConfig","displayName","componentId","props","transition","getNavItemTransition","theme","SideNavItem","_ref","leading","trailing","title","backgroundColor","tooltip","_ref$as","as","rest","_objectWithoutProperties","_excluded","isIcon","isIconComponent","Icon","undefined","_jsx","TooltipifyComponent","children","_jsxs","_objectSpread","display","flexDirection","justifyContent","alignItems","paddingX","height","makeSize","NAV_ITEM_HEIGHT","borderRadius","cursor","makeAnalyticsAttribute","Box","gap","size","color","className","classes","HIDE_WHEN_COLLAPSED","Text","truncateAfterLines","weight"],"mappings":"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"}

package/build/lib/web/development/components/Spark/RazorSenseGradient/shader.js

@@ -12,7 +12,7 @@ var FLUID_GRADIENT_LOOP = 12.0;
 // vec3 c3 = vec3(0.08, 0.30, 0.78); // deep royal blue
 // vec3 c4 = vec3(0.10, 0.28, 0.72); // deep blue (not black)
 
-var fragmentShader = /* glsl */"\nprecision mediump float;\n\nuniform float uTime;    // pre-wrapped: mod(raw, LOOP)\nuniform vec2  iResolution;\nuniform vec2  uOrigin;  // gradient origin in UV space (0,0)=top-left (1,1)=bottom-right\nvarying vec2 vUv;\n\n// Cubic smoothstep inside each segment \u2014 no kink at stop boundaries\nvec3 gradientColor(float t) {\n  t = clamp(t, 0.0, 1.0);\n  vec3 c0 = vec3(0.682, 0.957, 0.831);  // 174, 244, 212\n  vec3 c1 = vec3(0.310, 0.882, 0.620);  //  79, 225, 158\n  vec3 c2 = vec3(0.306, 0.973, 0.910);  //  78, 248, 232\n  vec3 c3 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  vec3 c4 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  float s;\n  if (t < 0.25) { s = smoothstep(0.0,1.0, t/0.25);         return mix(c0,c1,s); }\n  if (t < 0.55) { s = smoothstep(0.0,1.0,(t-0.25)/0.30);   return mix(c1,c2,s); }\n  if (t < 0.80) { s = smoothstep(0.0,1.0,(t-0.55)/0.25);   return mix(c2,c3,s); }\n                  s = smoothstep(0.0,1.0,(t-0.80)/0.20);   return mix(c3,c4,s);\n}\n\n// Value noise\nfloat hash(vec2 p) { return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }\nfloat vnoise(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  vec2 u = f*f*(3.0-2.0*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);\n}\n\nvoid main() {\n  vec2 uv = vUv - uOrigin;\n  float angle = atan(uv.y, uv.x);\n  float r = length(uv);\n\n  // Warp: traces a circle in noise space \u2192 exactly periodic in LOOP seconds.\n  // speed = 2\u03C0 * n / LOOP  (n integer \u2192 1 full orbit per loop)\n  float ws = 6.2832 / 12.0;   // 2\u03C0/LOOP \u2014 1 orbit in LOOP s\n  float ws2 = ws * 2.0;       // 2 orbits in LOOP s\n  float warp =\n    vnoise(vec2(cos(angle)*1.4 + sin(uTime*ws )*2.0, sin(angle)*1.4 + cos(uTime*ws )*2.0)) * 0.50 +\n    vnoise(vec2(cos(angle)*2.6 + sin(uTime*ws2)*1.2, sin(angle)*2.6 + cos(uTime*ws2)*1.2)) * 0.25;\n  float organicR = r + (warp - 0.45) * 0.04;\n\n  // Three wave sines \u2014 speeds are 2\u03C0*n/LOOP (n=3,2,1) \u2192 integer cycles in LOOP s.\n  // Spatial frequencies are irrational ratios so they never phase-lock into\n  // distinct bands; the result is one broad, shifting swell.\n  float s1 = 6.2832 * 3.0 / 12.0;  // 3 cycles in LOOP s\n  float s2 = 6.2832 * 2.0 / 12.0;  // 2 cycles\n  float s3 = 6.2832 * 1.0 / 12.0;  // 1 cycle\n  float w =\n    sin(organicR * 4.80 - uTime * s1) * 0.55 +\n    sin(organicR * 2.55 - uTime * s2) * 0.30 +\n    sin(organicR * 1.45 - uTime * s3) * 0.15;\n\n  float phase = w * 0.5 + 0.5;\n  vec3 color = gradientColor(phase);\n\n  float envelope  = smoothstep(0.75, 0.42, r);\n  float centerFill = smoothstep(0.06, 0.0, r);\n  color = mix(color * envelope, gradientColor(0.0), centerFill);\n\n  gl_FragColor = vec4(color, 1.0);\n}\n";
+var fragmentShader = /* glsl */"\nprecision mediump float;\n\nuniform float uTime;    // pre-wrapped: mod(raw, LOOP)\nuniform vec2  iResolution;\nuniform vec2  uOrigin;  // gradient origin in UV space (0,0)=top-left (1,1)=bottom-right\nvarying vec2 vUv;\n\n// Cubic smoothstep inside each segment \u2014 no kink at stop boundaries\nvec3 gradientColor(float t) {\n  t = clamp(t, 0.0, 1.0);\n  vec3 c0 = vec3(0.682, 0.957, 0.831);  // 174, 244, 212\n  vec3 c1 = vec3(0.310, 0.882, 0.620);  //  79, 225, 158\n  vec3 c2 = vec3(0.306, 0.973, 0.910);  //  78, 248, 232\n  vec3 c3 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  vec3 c4 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  float s;\n  if (t < 0.25) { s = smoothstep(0.0,1.0, t/0.25);         return mix(c0,c1,s); }\n  if (t < 0.55) { s = smoothstep(0.0,1.0,(t-0.25)/0.30);   return mix(c1,c2,s); }\n  if (t < 0.80) { s = smoothstep(0.0,1.0,(t-0.55)/0.25);   return mix(c2,c3,s); }\n                  s = smoothstep(0.0,1.0,(t-0.80)/0.20);   return mix(c3,c4,s);\n}\n\n// Value noise\nfloat hash(vec2 p) { return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }\nfloat vnoise(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  vec2 u = f*f*(3.0-2.0*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);\n}\n\nvoid main() {\n  // Envelope controls: how the gradient fades from center outward\n  const float FADE_OUTER_EDGE = 1.4;   // distance where gradient fully fades to black\n  const float FADE_INNER_EDGE = 0.4;  // distance where gradient is at full opacity\n\n  vec2 uv = vUv - uOrigin;\n  float angle = atan(uv.y, uv.x);\n  float r = length(uv);\n\n  // Warp: traces a circle in noise space \u2192 exactly periodic in LOOP seconds.\n  // speed = 2\u03C0 * n / LOOP  (n integer \u2192 1 full orbit per loop)\n  float ws = 6.2832 / 12.0;   // 2\u03C0/LOOP \u2014 1 orbit in LOOP s\n  float ws2 = ws * 2.0;       // 2 orbits in LOOP s\n  float warp =\n    vnoise(vec2(cos(angle)*1.4 + sin(uTime*ws )*2.0, sin(angle)*1.4 + cos(uTime*ws )*2.0)) * 0.50 +\n    vnoise(vec2(cos(angle)*2.6 + sin(uTime*ws2)*1.2, sin(angle)*2.6 + cos(uTime*ws2)*1.2)) * 0.25;\n  float organicR = r + (warp - 0.45) * 0.04;\n\n  // Three wave sines \u2014 speeds are 2\u03C0*n/LOOP (n=3,2,1) \u2192 integer cycles in LOOP s.\n  // Spatial frequencies are irrational ratios so they never phase-lock into\n  // distinct bands; the result is one broad, shifting swell.\n  float s1 = 6.2832 * 3.0 / 12.0;  // 3 cycles in LOOP s\n  float s2 = 6.2832 * 2.0 / 12.0;  // 2 cycles\n  float s3 = 6.2832 * 1.0 / 12.0;  // 1 cycle\n  float w =\n    sin(organicR * 4.80 - uTime * s1) * 0.55 +\n    sin(organicR * 2.55 - uTime * s2) * 0.30 +\n    sin(organicR * 1.45 - uTime * s3) * 0.15;\n\n  float phase = w * 0.5 + 0.5;\n  vec3 color = gradientColor(phase);\n\n  float envelope = smoothstep(FADE_OUTER_EDGE, FADE_INNER_EDGE, r);\n  color = color * envelope;\n\n  // Film grain effect\n  float grain = hash(vUv * 500.0 + fract(uTime * 0.5)) * 2.0 - 1.0;\n  color += grain * 0.0002;\n\n  gl_FragColor = vec4(color, 1.0);\n}\n";
 
 export { FLUID_GRADIENT_LOOP, fragmentShader };
 //# sourceMappingURL=shader.js.map

package/build/lib/web/development/components/Spark/RazorSenseGradient/shader.js.map

@@ -1 +1 @@
-{"version":3,"file":"shader.js","sources":["../../../../../../../src/components/Spark/RazorSenseGradient/shader.ts"],"sourcesContent":["export const FLUID_GRADIENT_LOOP = 12.0;\n\n// vec3 c0 = vec3(0.55, 0.95, 0.75);\n// vec3 c1 = vec3(0.35, 0.90, 0.65);\n// vec3 c2 = vec3(0.20, 0.88, 0.70);\n// vec3 c3 = vec3(0.08, 0.82, 0.48);\n// vec3 c4 = vec3(0.04, 0.68, 0.30);\n\n// vec3 c0 = vec3(0.72, 0.92, 1.00); // light sky blue\n// vec3 c1 = vec3(0.38, 0.72, 0.98); // cornflower blue\n// vec3 c2 = vec3(0.16, 0.50, 0.92); // medium blue\n// vec3 c3 = vec3(0.08, 0.30, 0.78); // deep royal blue\n// vec3 c4 = vec3(0.10, 0.28, 0.72); // deep blue (not black)\n\nexport const fragmentShader = /* glsl */ `\nprecision mediump float;\n\nuniform float uTime;    // pre-wrapped: mod(raw, LOOP)\nuniform vec2  iResolution;\nuniform vec2  uOrigin;  // gradient origin in UV space (0,0)=top-left (1,1)=bottom-right\nvarying vec2 vUv;\n\n// Cubic smoothstep inside each segment — no kink at stop boundaries\nvec3 gradientColor(float t) {\n  t = clamp(t, 0.0, 1.0);\n  vec3 c0 = vec3(0.682, 0.957, 0.831);  // 174, 244, 212\n  vec3 c1 = vec3(0.310, 0.882, 0.620);  //  79, 225, 158\n  vec3 c2 = vec3(0.306, 0.973, 0.910);  //  78, 248, 232\n  vec3 c3 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  vec3 c4 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  float s;\n  if (t < 0.25) { s = smoothstep(0.0,1.0, t/0.25);         return mix(c0,c1,s); }\n  if (t < 0.55) { s = smoothstep(0.0,1.0,(t-0.25)/0.30);   return mix(c1,c2,s); }\n  if (t < 0.80) { s = smoothstep(0.0,1.0,(t-0.55)/0.25);   return mix(c2,c3,s); }\n                  s = smoothstep(0.0,1.0,(t-0.80)/0.20);   return mix(c3,c4,s);\n}\n\n// Value noise\nfloat hash(vec2 p) { return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }\nfloat vnoise(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  vec2 u = f*f*(3.0-2.0*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);\n}\n\nvoid main() {\n  vec2 uv = vUv - uOrigin;\n  float angle = atan(uv.y, uv.x);\n  float r = length(uv);\n\n  // Warp: traces a circle in noise space → exactly periodic in LOOP seconds.\n  // speed = 2π * n / LOOP  (n integer → 1 full orbit per loop)\n  float ws = 6.2832 / 12.0;   // 2π/LOOP — 1 orbit in LOOP s\n  float ws2 = ws * 2.0;       // 2 orbits in LOOP s\n  float warp =\n    vnoise(vec2(cos(angle)*1.4 + sin(uTime*ws )*2.0, sin(angle)*1.4 + cos(uTime*ws )*2.0)) * 0.50 +\n    vnoise(vec2(cos(angle)*2.6 + sin(uTime*ws2)*1.2, sin(angle)*2.6 + cos(uTime*ws2)*1.2)) * 0.25;\n  float organicR = r + (warp - 0.45) * 0.04;\n\n  // Three wave sines — speeds are 2π*n/LOOP (n=3,2,1) → integer cycles in LOOP s.\n  // Spatial frequencies are irrational ratios so they never phase-lock into\n  // distinct bands; the result is one broad, shifting swell.\n  float s1 = 6.2832 * 3.0 / 12.0;  // 3 cycles in LOOP s\n  float s2 = 6.2832 * 2.0 / 12.0;  // 2 cycles\n  float s3 = 6.2832 * 1.0 / 12.0;  // 1 cycle\n  float w =\n    sin(organicR * 4.80 - uTime * s1) * 0.55 +\n    sin(organicR * 2.55 - uTime * s2) * 0.30 +\n    sin(organicR * 1.45 - uTime * s3) * 0.15;\n\n  float phase = w * 0.5 + 0.5;\n  vec3 color = gradientColor(phase);\n\n  float envelope  = smoothstep(0.75, 0.42, r);\n  float centerFill = smoothstep(0.06, 0.0, r);\n  color = mix(color * envelope, gradientColor(0.0), centerFill);\n\n  gl_FragColor = vec4(color, 1.0);\n}\n`;\n"],"names":["FLUID_GRADIENT_LOOP","fragmentShader"],"mappings":"AAAO,IAAMA,mBAAmB,GAAG,KAAI;;AAEvC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEO,IAAMC,cAAc,aAiE1B;;;;"}
+{"version":3,"file":"shader.js","sources":["../../../../../../../src/components/Spark/RazorSenseGradient/shader.ts"],"sourcesContent":["export const FLUID_GRADIENT_LOOP = 12.0;\n\n// vec3 c0 = vec3(0.55, 0.95, 0.75);\n// vec3 c1 = vec3(0.35, 0.90, 0.65);\n// vec3 c2 = vec3(0.20, 0.88, 0.70);\n// vec3 c3 = vec3(0.08, 0.82, 0.48);\n// vec3 c4 = vec3(0.04, 0.68, 0.30);\n\n// vec3 c0 = vec3(0.72, 0.92, 1.00); // light sky blue\n// vec3 c1 = vec3(0.38, 0.72, 0.98); // cornflower blue\n// vec3 c2 = vec3(0.16, 0.50, 0.92); // medium blue\n// vec3 c3 = vec3(0.08, 0.30, 0.78); // deep royal blue\n// vec3 c4 = vec3(0.10, 0.28, 0.72); // deep blue (not black)\n\nexport const fragmentShader = /* glsl */ `\nprecision mediump float;\n\nuniform float uTime;    // pre-wrapped: mod(raw, LOOP)\nuniform vec2  iResolution;\nuniform vec2  uOrigin;  // gradient origin in UV space (0,0)=top-left (1,1)=bottom-right\nvarying vec2 vUv;\n\n// Cubic smoothstep inside each segment — no kink at stop boundaries\nvec3 gradientColor(float t) {\n  t = clamp(t, 0.0, 1.0);\n  vec3 c0 = vec3(0.682, 0.957, 0.831);  // 174, 244, 212\n  vec3 c1 = vec3(0.310, 0.882, 0.620);  //  79, 225, 158\n  vec3 c2 = vec3(0.306, 0.973, 0.910);  //  78, 248, 232\n  vec3 c3 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  vec3 c4 = vec3(0.004, 0.753, 0.443);  //   1, 192, 113\n  float s;\n  if (t < 0.25) { s = smoothstep(0.0,1.0, t/0.25);         return mix(c0,c1,s); }\n  if (t < 0.55) { s = smoothstep(0.0,1.0,(t-0.25)/0.30);   return mix(c1,c2,s); }\n  if (t < 0.80) { s = smoothstep(0.0,1.0,(t-0.55)/0.25);   return mix(c2,c3,s); }\n                  s = smoothstep(0.0,1.0,(t-0.80)/0.20);   return mix(c3,c4,s);\n}\n\n// Value noise\nfloat hash(vec2 p) { return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }\nfloat vnoise(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  vec2 u = f*f*(3.0-2.0*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);\n}\n\nvoid main() {\n  // Envelope controls: how the gradient fades from center outward\n  const float FADE_OUTER_EDGE = 1.4;   // distance where gradient fully fades to black\n  const float FADE_INNER_EDGE = 0.4;  // distance where gradient is at full opacity\n\n  vec2 uv = vUv - uOrigin;\n  float angle = atan(uv.y, uv.x);\n  float r = length(uv);\n\n  // Warp: traces a circle in noise space → exactly periodic in LOOP seconds.\n  // speed = 2π * n / LOOP  (n integer → 1 full orbit per loop)\n  float ws = 6.2832 / 12.0;   // 2π/LOOP — 1 orbit in LOOP s\n  float ws2 = ws * 2.0;       // 2 orbits in LOOP s\n  float warp =\n    vnoise(vec2(cos(angle)*1.4 + sin(uTime*ws )*2.0, sin(angle)*1.4 + cos(uTime*ws )*2.0)) * 0.50 +\n    vnoise(vec2(cos(angle)*2.6 + sin(uTime*ws2)*1.2, sin(angle)*2.6 + cos(uTime*ws2)*1.2)) * 0.25;\n  float organicR = r + (warp - 0.45) * 0.04;\n\n  // Three wave sines — speeds are 2π*n/LOOP (n=3,2,1) → integer cycles in LOOP s.\n  // Spatial frequencies are irrational ratios so they never phase-lock into\n  // distinct bands; the result is one broad, shifting swell.\n  float s1 = 6.2832 * 3.0 / 12.0;  // 3 cycles in LOOP s\n  float s2 = 6.2832 * 2.0 / 12.0;  // 2 cycles\n  float s3 = 6.2832 * 1.0 / 12.0;  // 1 cycle\n  float w =\n    sin(organicR * 4.80 - uTime * s1) * 0.55 +\n    sin(organicR * 2.55 - uTime * s2) * 0.30 +\n    sin(organicR * 1.45 - uTime * s3) * 0.15;\n\n  float phase = w * 0.5 + 0.5;\n  vec3 color = gradientColor(phase);\n\n  float envelope = smoothstep(FADE_OUTER_EDGE, FADE_INNER_EDGE, r);\n  color = color * envelope;\n\n  // Film grain effect\n  float grain = hash(vUv * 500.0 + fract(uTime * 0.5)) * 2.0 - 1.0;\n  color += grain * 0.0002;\n\n  gl_FragColor = vec4(color, 1.0);\n}\n`;\n"],"names":["FLUID_GRADIENT_LOOP","fragmentShader"],"mappings":"AAAO,IAAMA,mBAAmB,GAAG,KAAI;;AAEvC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEO,IAAMC,cAAc,aAwE1B;;;;"}

package/build/lib/web/development/components/Spark/RzpGlass/RzpGlass.js

@@ -1,110 +1,21 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { useCallback, forwardRef, useState, useRef, useEffect } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { RzpGlassMount } from './RzpGlassMount.js';
-import { getPresets } from './presets.js';
+import { DEFAULT_CDN_PATH, getDefaultAssets, getPresetAssets, resolveConfig } from './utils.js';
+import { useMergeRefs } from '../../../utils/useMergeRefs.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["width", "height", "className", "style", "onLoad", "onError", "preset", "assetsPath", "gradientMapSrc", "gradientMap2Src", "gradientMapCanvas", "imageSrc"],
-  _excluded2 = ["width", "height", "className", "style", "onLoad", "onError", "assetsPath", "gradientMapCanvas", "gradientMapSrc", "gradientMap2Src", "imageSrc"];
+var _excluded = ["width", "height", "className", "style", "onLoad", "onError", "assetsPath", "gradientMapCanvas", "gradientMapSrc", "gradientMap2Src", "imageSrc"];
 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; }
-// Duration of the component's built-in fade-in transition.
-// The video is kept paused during this window so one-shot animations
-// (e.g. circleSlideUp) don't "waste" frames while the canvas is invisible.
 var FADE_IN_MS = 200;
-var DEFAULT_CDN_PATH = 'https://cdn.jsdelivr.net/npm/@razorpay/blade/assets/spark';
-var getDefaultAssets = function getDefaultAssets(assetsPath) {
-  return {
-    videoSrc: "".concat(assetsPath, "/spark-base-video.mp4"),
-    imageSrc: "".concat(assetsPath, "/bottom-frame.jpg"),
-    gradientMapSrc: "".concat(assetsPath, "/colorama-gradient-map-green.jpg"),
-    gradientMap2Src: "".concat(assetsPath, "/colorama-gradient-map-blue.jpg"),
-    centerGradientMapSrc: "".concat(assetsPath, "/colorama-center-gradient-map.jpg")
-  };
-};
-
-/**
- * Hook to merge multiple refs into one
- */
-function useMergeRefs(refs) {
-  return useCallback(function (value) {
-    refs.forEach(function (ref) {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    });
-  }, [refs]);
-}
-
-/**
- * Extract config from props (exclude non-config props).
- * Strips undefined values so they don't clobber preset defaults.
- */
-function extractConfig(props) {
-  var _width = props.width,
-    _height = props.height,
-    _className = props.className,
-    _style = props.style,
-    _onLoad = props.onLoad,
-    _onError = props.onError,
-    _preset = props.preset,
-    _assetsPath = props.assetsPath,
-    _gradientMapSrc = props.gradientMapSrc,
-    _gradientMap2Src = props.gradientMap2Src,
-    _gradientMapCanvas = props.gradientMapCanvas,
-    _imageSrc = props.imageSrc,
-    config = _objectWithoutProperties(props, _excluded);
-
-  // Drop keys with undefined values so preset config isn't overridden by unset props
-  return Object.fromEntries(
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  Object.entries(config).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      v = _ref2[1];
-    return v !== undefined;
-  }));
-}
-var ASSET_KEYS = new Set(['videoSrc', 'imageSrc', 'gradientMapSrc', 'gradientMap2Src', 'centerGradientMapSrc']);
-
-/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
-function getPresetDefinition(preset, assetsPath) {
-  var presets = getPresets(assetsPath);
-  if (preset && preset in presets) return _objectSpread({}, presets[preset]);
-  return {};
-}
-function getPresetConfig(preset, assetsPath) {
-  var def = getPresetDefinition(preset, assetsPath);
-  return Object.fromEntries(Object.entries(def).filter(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-      k = _ref4[0];
-    return !ASSET_KEYS.has(k);
-  }));
-}
-function getPresetAssets(preset, assetsPath) {
-  var def = getPresetDefinition(preset, assetsPath);
-  return Object.fromEntries(Object.entries(def).filter(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 1),
-      k = _ref6[0];
-    return ASSET_KEYS.has(k);
-  }));
-}
-
-/**
- * Merge preset config with user-provided config.
- * Preset values are used as base; any explicit prop overrides them.
- */
-function resolveConfig(props, assetsPath) {
-  return _objectSpread(_objectSpread({}, getPresetConfig(props.preset, assetsPath)), extractConfig(props));
-}
 var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
-  var _presetAssets$videoSr, _ref7, _ref8, _presetAssets$centerG, _configProps$edgeFeat;
+  var _presetAssets$videoSr, _ref, _ref2, _presetAssets$centerG, _configProps$edgeFeat;
   var _props$width = props.width,
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
@@ -118,7 +29,7 @@ var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
     gradientMapSrcProp = props.gradientMapSrc,
     gradientMap2SrcProp = props.gradientMap2Src,
     imageSrcProp = props.imageSrc,
-    configProps = _objectWithoutProperties(props, _excluded2);
+    configProps = _objectWithoutProperties(props, _excluded);
 
   // Get default assets based on assetsPath
   var assetsPath = assetsPathProp !== null && assetsPathProp !== void 0 ? assetsPathProp : DEFAULT_CDN_PATH;
@@ -128,8 +39,8 @@ var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
   var presetAssets = getPresetAssets(props.preset, assetsPath);
   var imageSrc = imageSrcProp !== null && imageSrcProp !== void 0 ? imageSrcProp : presetAssets.imageSrc;
   var videoSrc = imageSrc ? undefined : (_presetAssets$videoSr = presetAssets.videoSrc) !== null && _presetAssets$videoSr !== void 0 ? _presetAssets$videoSr : defaultAssets.videoSrc;
-  var gradientMapSrc = (_ref7 = gradientMapSrcProp !== null && gradientMapSrcProp !== void 0 ? gradientMapSrcProp : presetAssets.gradientMapSrc) !== null && _ref7 !== void 0 ? _ref7 : defaultAssets.gradientMapSrc;
-  var gradientMap2Src = (_ref8 = gradientMap2SrcProp !== null && gradientMap2SrcProp !== void 0 ? gradientMap2SrcProp : presetAssets.gradientMap2Src) !== null && _ref8 !== void 0 ? _ref8 : defaultAssets.gradientMap2Src;
+  var gradientMapSrc = (_ref = gradientMapSrcProp !== null && gradientMapSrcProp !== void 0 ? gradientMapSrcProp : presetAssets.gradientMapSrc) !== null && _ref !== void 0 ? _ref : defaultAssets.gradientMapSrc;
+  var gradientMap2Src = (_ref2 = gradientMap2SrcProp !== null && gradientMap2SrcProp !== void 0 ? gradientMap2SrcProp : presetAssets.gradientMap2Src) !== null && _ref2 !== void 0 ? _ref2 : defaultAssets.gradientMap2Src;
   var centerGradientMapSrc = (_presetAssets$centerG = presetAssets.centerGradientMapSrc) !== null && _presetAssets$centerG !== void 0 ? _presetAssets$centerG : defaultAssets.centerGradientMapSrc;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -145,7 +56,7 @@ var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
   // Initialize on mount
   useEffect(function () {
     var init = /*#__PURE__*/function () {
-      var _ref9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _config$paused, config, userWantsPaused, _error, _t;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -200,7 +111,7 @@ var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
         }, _callee, null, [[1, 3]]);
       }));
       return function init() {
-        return _ref9.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }();
     void init();
@@ -246,7 +157,7 @@ var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
       mountRef.current.updateGradientMapTexture(gradientMapCanvas);
     }
   }, [isInitialized, gradientMapCanvas]);
-  var mergedRef = useMergeRefs([divRef, forwardedRef]);
+  var mergedRef = useMergeRefs(forwardedRef, divRef);
 
   // Convert width/height to string if number
   var widthStyle = typeof width === 'number' ? "".concat(width, "px") : width;
@@ -270,7 +181,7 @@ var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
       position: 'relative',
       overflow: 'hidden',
       backgroundColor: 'transparent',
-      transition: '2s opacity'
+      transition: "".concat(FADE_IN_MS, "ms opacity")
     }, isInitialized ? {
       opacity: 1
     } : {
@@ -279,5 +190,5 @@ var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
   });
 });
 
-export { RzpGlass, RzpGlass as default };
+export { RzpGlass };
 //# sourceMappingURL=RzpGlass.js.map