@razorpay/blade 11.25.0 → 11.26.0

package/build/lib/web/production/tokens/theme/createTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n  level: 'AAA',\n  size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n  return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n  const baseColor = tinycolor(baseColorInput);\n  const baseColorHslString = baseColor.toHslString();\n  if (__DEV__) {\n    if (!baseColor.isValid()) {\n      throwBladeError({\n        message: 'Invalid brandColor passed',\n        moduleName: 'createTheme',\n      });\n    }\n  }\n\n  const palette = [baseColorHslString]; // Include the original color\n  const brightness = tinycolor(baseColor).getBrightness();\n  // Determine how much to lighten or darken the colors depending on the brightness of the base color\n  const lightnessFactor = brightness > 150 ? 3 : 6;\n  const darknessFactor = brightness < 50 ? 3 : 5;\n\n  let currentColor = baseColor;\n\n  // Generate shades lighter\n  for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n    currentColor = currentColor.brighten(lightnessFactor);\n    palette.push(currentColor.toHslString());\n  }\n\n  currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n  // Generate shades darker\n  for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n    currentColor = currentColor.darken(darknessFactor);\n    palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n  }\n\n  const colorPalette = palette.reverse();\n  const brandPrimaryColor = colorPalette[6];\n\n  const brandColors: ColorChromaticScale = {\n    '50': colorPalette[0],\n    '100': colorPalette[1],\n    '200': colorPalette[2],\n    '300': colorPalette[3],\n    '400': colorPalette[4],\n    '500': colorPalette[5],\n    '600': brandPrimaryColor,\n    '700': colorPalette[7],\n    '800': colorPalette[8],\n    '900': colorPalette[9],\n    '1000': colorPalette[10],\n    a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n    a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n  };\n\n  return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayLight[50],\n    brandColors[600],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[600]\n    : globalColors.neutral.blueGrayLight[1100];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the light theme with the brand colors passed in\n  const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n      text: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayDark[1100],\n    brandColors[400],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[400]\n    : globalColors.neutral.blueGrayDark[0];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the dark theme with the brand colors passed in\n  const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const theme = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({ brandColor }: { brandColor: ColorInput }): ThemeTokens => {\n  const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n  // Get onLight overrides\n  const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n  // Get onDark overrides\n  const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n  // Override the payment theme with the brand colors\n  const brandedThemeTokens = overrideTheme({\n    baseThemeTokens: bladeTheme,\n    overrides: {\n      name: `custom-${tinycolor(brandColor).toHex()}`,\n      colors: {\n        onLight: {\n          ...brandedLightTheme,\n        },\n        onDark: {\n          ...brandedDarkTheme,\n        },\n      },\n    },\n  });\n\n  return brandedThemeTokens;\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark"],"mappings":"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"}
+{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n  level: 'AAA',\n  size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n  return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n  const baseColor = tinycolor(baseColorInput);\n  const baseColorHslString = baseColor.toHslString();\n  if (__DEV__) {\n    if (!baseColor.isValid()) {\n      throwBladeError({\n        message: 'Invalid brandColor passed',\n        moduleName: 'createTheme',\n      });\n    }\n  }\n\n  const palette = [baseColorHslString]; // Include the original color\n  const brightness = tinycolor(baseColor).getBrightness();\n  // Determine how much to lighten or darken the colors depending on the brightness of the base color\n  const lightnessFactor = brightness > 150 ? 3 : 6;\n  const darknessFactor = brightness < 50 ? 3 : 5;\n\n  let currentColor = baseColor;\n\n  // Generate shades lighter\n  for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n    currentColor = currentColor.brighten(lightnessFactor);\n    palette.push(currentColor.toHslString());\n  }\n\n  currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n  // Generate shades darker\n  for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n    currentColor = currentColor.darken(darknessFactor);\n    palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n  }\n\n  const colorPalette = palette.reverse();\n  const brandPrimaryColor = colorPalette[6];\n\n  const brandColors: ColorChromaticScale = {\n    '50': colorPalette[0],\n    '100': colorPalette[1],\n    '200': colorPalette[2],\n    '300': colorPalette[3],\n    '400': colorPalette[4],\n    '500': colorPalette[5],\n    '600': brandPrimaryColor,\n    '700': colorPalette[7],\n    '800': colorPalette[8],\n    '900': colorPalette[9],\n    '1000': colorPalette[10],\n    a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n    a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n  };\n\n  return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayLight[50],\n    brandColors[600],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[600]\n    : globalColors.neutral.blueGrayLight[1100];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the light theme with the brand colors passed in\n  const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n      text: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayDark[1100],\n    brandColors[400],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[400]\n    : globalColors.neutral.blueGrayDark[0];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the dark theme with the brand colors passed in\n  const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n  brandColor,\n}: {\n  brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n  const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n  // Get onLight overrides\n  const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n  // Get onDark overrides\n  const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n  // Override the payment theme with the brand colors\n  const brandedThemeTokens = overrideTheme({\n    baseThemeTokens: bladeTheme,\n    overrides: {\n      name: `custom-${tinycolor(brandColor).toHex()}`,\n      colors: {\n        onLight: {\n          ...brandedLightTheme,\n        },\n        onDark: {\n          ...brandedDarkTheme,\n        },\n      },\n    },\n  });\n\n  return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark","theme"],"mappings":"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"}

package/build/types/components/index.d.ts

@@ -7204,6 +7204,10 @@ type BaseInputCommonProps = FormInputLabelProps & FormInputValidationProps & {
      * @default true
      **/
     isTableInputCell?: boolean;
+    /**
+     * Hides the form hints and shows them as tooltip of trailing
+     */
+    showHintsAsTooltip?: boolean;
 } & TestID & Platform.Select<{
     native: {
         /**
@@ -8075,6 +8079,12 @@ type DropdownProps = {
     onOpenChange?: (isOpen: boolean) => void;
     selectionType?: 'single' | 'multiple';
     children: React__default.ReactNode[];
+    /**
+     * @private
+     *
+     * width prop for outer relative container of Dropdown. Use width prop on DropdownOverlay to change width of menu
+     */
+    _width?: BoxProps['width'];
 } & TestID & StyledPropsBlade;
 type DropdownOverlayProps = {
     children: React__default.ReactElement[] | React__default.ReactElement;
@@ -8117,7 +8127,7 @@ type DropdownOverlayProps = {
     defaultPlacement?: Placement;
 } & TestID;
 
-declare const Dropdown: ({ children, isOpen: isOpenControlled, onOpenChange, selectionType, testID, ...styledProps }: DropdownProps) => React__default.ReactElement;
+declare const Dropdown: ({ children, isOpen: isOpenControlled, onOpenChange, selectionType, testID, _width, ...styledProps }: DropdownProps) => React__default.ReactElement;
 
 declare const DropdownOverlay: ({ children, testID, zIndex, width, minWidth, maxWidth, referenceRef, defaultPlacement, }: DropdownOverlayProps) => React__default.ReactElement | null;
 
@@ -12536,7 +12546,6 @@ type TableNode<Item> = Item & {
 type TableData<Item> = {
     nodes: TableNode<Item>[];
 };
-type TableBackgroundColors = `surface.background.gray.${DotNotationToken<Theme['colors']['surface']['background']['gray']>}`;
 type TableHeaderProps = {
     /**
      * The children of TableHeader should be TableHeaderRow
@@ -12767,6 +12776,7 @@ type TableCellProps = {
 type TableEditableCellProps = Pick<BaseInputProps, 'validationState' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'leadingIcon' | 'trailingButton' | 'errorText' | 'successText'> & {
     accessibilityLabel: NonNullable<BaseInputProps['accessibilityLabel']>;
 };
+type TableEditableDropdownCellProps = Pick<DropdownProps, 'children' | 'isOpen' | 'onOpenChange' | 'selectionType' | 'zIndex'>;
 type TableFooterProps = {
     /**
      * The children of TableFooter should be TableFooterRow
@@ -12907,7 +12917,6 @@ declare const TableHeaderRow: ({ children, rowDensity }: TableHeaderRowProps) =>
 
 declare const TableBody: ({ children }: TableBodyProps) => React__default.ReactElement;
 declare const TableCell: ({ children }: TableCellProps) => React__default.ReactElement;
-declare const TableEditableCell: ({ validationState, accessibilityLabel, autoCapitalize, autoCompleteSuggestionType, autoFocus, defaultValue, isDisabled, isRequired, keyboardReturnKeyType, leadingIcon, maxCharacters, name, onBlur, onChange, onClick, onFocus, onSubmit, placeholder, prefix, suffix, value, testID, trailingButton, errorText, successText, }: TableEditableCellProps) => React__default.ReactElement;
 declare const TableRow: <Item>({ children, item, isDisabled, onHover, onClick, }: TableRowProps<Item>) => React__default.ReactElement;
 
 declare const TableFooter: ({ children }: TableFooterProps) => React__default.ReactElement;
@@ -12919,6 +12928,9 @@ declare const TablePagination: ({ currentPage: controlledCurrentPage, onPageChan
 declare const TableToolbarActions: ({ children, ...styledProps }: TableToolbarActionsProps) => React__default.ReactElement;
 declare const TableToolbar: ({ children, title, selectedTitle: controlledSelectedTitle, }: TableToolbarProps) => React__default.ReactElement;
 
+declare const TableEditableDropdownCell: (dropdownProps: TableEditableDropdownCellProps) => React.ReactElement;
+declare const TableEditableCell: ({ validationState, accessibilityLabel, autoCapitalize, autoCompleteSuggestionType, autoFocus, defaultValue, isDisabled, isRequired, keyboardReturnKeyType, leadingIcon, maxCharacters, name, onBlur, onChange, onClick, onFocus, onSubmit, placeholder, prefix, suffix, value, testID, trailingButton, errorText, successText, }: TableEditableCellProps) => React.ReactElement;
+
 type TabsProps = {
     /**
      * The content of the component, accepts `TabsList` and `TabsPanel` components.
@@ -13895,4 +13907,4 @@ declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => Rea
  */
 declare const screenReaderStyles: CSSObject;
 
-export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeFile, BladeFileList, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DatePicker, DatePickerProps, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, Menu, MenuDivider, MenuDotsIcon, MenuFooter, MenuFooterProps, MenuHeader, MenuHeaderProps, MenuIcon, MenuItem, MenuItemProps, MenuOverlay, MenuOverlayProps, MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PettyCashBudgetIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SideNav, SideNavBody, SideNavFooter, SideNavFooterProps, SideNavItem, SideNavItemProps, SideNavLevel, SideNavLink, SideNavLinkProps, SideNavProps, SideNavSection, SideNavSectionProps, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabNav, TabNavItem, TabNavItemProps, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableEditableCell, TableEditableCellProps, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TopNav, TopNavActions, TopNavBrand, TopNavContent, TopNavProps, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TrustedBadgeIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, drawerPadding, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };
+export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeFile, BladeFileList, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DatePicker, DatePickerProps, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, Menu, MenuDivider, MenuDotsIcon, MenuFooter, MenuFooterProps, MenuHeader, MenuHeaderProps, MenuIcon, MenuItem, MenuItemProps, MenuOverlay, MenuOverlayProps, MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PettyCashBudgetIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SideNav, SideNavBody, SideNavFooter, SideNavFooterProps, SideNavItem, SideNavItemProps, SideNavLevel, SideNavLink, SideNavLinkProps, SideNavProps, SideNavSection, SideNavSectionProps, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabNav, TabNavItem, TabNavItemProps, TabPanel, TabPanelProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableEditableCell, TableEditableCellProps, TableEditableDropdownCell, TableEditableDropdownCellProps, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationProps, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TopNav, TopNavActions, TopNavBrand, TopNavContent, TopNavProps, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TrustedBadgeIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, drawerPadding, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };

package/build/types/components/index.native.d.ts

@@ -5852,6 +5852,10 @@ type BaseInputCommonProps = FormInputLabelProps & FormInputValidationProps & {
      * @default true
      **/
     isTableInputCell?: boolean;
+    /**
+     * Hides the form hints and shows them as tooltip of trailing
+     */
+    showHintsAsTooltip?: boolean;
 } & TestID & Platform.Select<{
     native: {
         /**
@@ -6139,6 +6143,12 @@ type DropdownProps = {
     onOpenChange?: (isOpen: boolean) => void;
     selectionType?: 'single' | 'multiple';
     children: React__default.ReactNode[];
+    /**
+     * @private
+     *
+     * width prop for outer relative container of Dropdown. Use width prop on DropdownOverlay to change width of menu
+     */
+    _width?: BoxProps['width'];
 } & TestID & StyledPropsBlade;
 type DropdownOverlayProps = {
     children: React__default.ReactElement[] | React__default.ReactElement;
@@ -6181,7 +6191,7 @@ type DropdownOverlayProps = {
     defaultPlacement?: Placement;
 } & TestID;
 
-declare const Dropdown: ({ children, isOpen: isOpenControlled, onOpenChange, selectionType, testID, ...styledProps }: DropdownProps) => React__default.ReactElement;
+declare const Dropdown: ({ children, isOpen: isOpenControlled, onOpenChange, selectionType, testID, _width, ...styledProps }: DropdownProps) => React__default.ReactElement;
 
 declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => React__default.ReactElement;
 
@@ -8673,7 +8683,6 @@ type TableNode<Item> = Item & {
 type TableData<Item> = {
     nodes: TableNode<Item>[];
 };
-type TableBackgroundColors = `surface.background.gray.${DotNotationToken<Theme['colors']['surface']['background']['gray']>}`;
 type TableHeaderProps = {
     /**
      * The children of TableHeader should be TableHeaderRow
@@ -8904,6 +8913,7 @@ type TableCellProps = {
 type TableEditableCellProps = Pick<BaseInputProps, 'validationState' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'leadingIcon' | 'trailingButton' | 'errorText' | 'successText'> & {
     accessibilityLabel: NonNullable<BaseInputProps['accessibilityLabel']>;
 };
+type TableEditableDropdownCellProps = Pick<DropdownProps, 'children' | 'isOpen' | 'onOpenChange' | 'selectionType' | 'zIndex'>;
 type TableFooterProps = {
     /**
      * The children of TableFooter should be TableFooterRow
@@ -9045,17 +9055,19 @@ declare const TableHeaderCell: (props: TableHeaderCellProps) => React__default.R
 declare const TableBody: (props: TableBodyProps) => React__default.ReactElement;
 declare const TableRow: (props: TableRowProps<unknown>) => React__default.ReactElement;
 declare const TableCell: (props: TableCellProps) => React__default.ReactElement;
-declare const TableEditableCell: (props: TableEditableCellProps) => React__default.ReactElement;
 
 declare const TableFooter: (props: unknown) => React__default.ReactElement;
 declare const TableFooterRow: (props: unknown) => React__default.ReactElement;
 declare const TableFooterCell: (props: unknown) => React__default.ReactElement;
 
+type TablePaginationProps = unknown;
+declare const TablePagination: (props: TablePaginationProps) => React__default.ReactElement;
+
 declare const TableToolbar: (props: unknown) => React__default.ReactElement;
 declare const TableToolbarActions: (props: unknown) => React__default.ReactElement;
 
-type TablePaginationProps = unknown;
-declare const TablePagination: (props: TablePaginationProps) => React__default.ReactElement;
+declare const TableEditableCell: (props: TableEditableCellProps) => React.ReactElement;
+declare const TableEditableDropdownCell: (props: TableEditableDropdownCellProps) => React.ReactElement;
 
 type TabsProps = {
     /**
@@ -9402,4 +9414,4 @@ declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => Rea
  */
 declare const screenReaderStyles: CSSObject;
 
-export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DatePicker, DatePickerProps, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, Menu, MenuDivider, MenuDotsIcon, MenuFooter, MenuFooterProps, MenuHeader, MenuHeaderProps, MenuIcon, MenuItem, MenuItemProps, MenuOverlay, MenuOverlayProps, MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PettyCashBudgetIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SideNav, SideNavBody, SideNavFooter, SideNavFooterProps, SideNavItem, SideNavItemProps, SideNavLevel, SideNavLink, SideNavLinkProps, SideNavProps, SideNavSection, SideNavSectionProps, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabNav, TabNavItem, TabNavItemProps, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableEditableCell, TableEditableCellProps, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps$1 as TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TopNav, Tour, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TrustedBadgeIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };
+export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DatePicker, DatePickerProps, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, Menu, MenuDivider, MenuDotsIcon, MenuFooter, MenuFooterProps, MenuHeader, MenuHeaderProps, MenuIcon, MenuItem, MenuItemProps, MenuOverlay, MenuOverlayProps, MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PettyCashBudgetIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SideNav, SideNavBody, SideNavFooter, SideNavFooterProps, SideNavItem, SideNavItemProps, SideNavLevel, SideNavLink, SideNavLinkProps, SideNavProps, SideNavSection, SideNavSectionProps, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabNav, TabNavItem, TabNavItemProps, TabPanel, TabPanelProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableEditableCell, TableEditableCellProps, TableEditableDropdownCell, TableEditableDropdownCellProps, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationProps$1 as TablePaginationProps, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TopNav, Tour, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TrustedBadgeIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };

package/build/types/tokens/index.d.ts

@@ -569,11 +569,14 @@ declare const overrideTheme: ({ baseThemeTokens, overrides }: OverrideTheme) =>
  * Creates a Blade Theme based on the custom brand color
  * @returns The Theme Tokens with the custom brand colors
  * @example
- * const theme = createTheme({ brandColor: '#19BEA2'})
+ * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})
  **/
-declare const createTheme: ({ brandColor }: {
+declare const createTheme: ({ brandColor, }: {
     brandColor: ColorInput;
-}) => ThemeTokens;
+}) => {
+    theme: ThemeTokens;
+    brandColors: ColorChromaticScale;
+};
 
 /**
  * Brands a type making them act as nominal

package/build/types/tokens/index.native.d.ts

@@ -569,11 +569,14 @@ declare const overrideTheme: ({ baseThemeTokens, overrides }: OverrideTheme) =>
  * Creates a Blade Theme based on the custom brand color
  * @returns The Theme Tokens with the custom brand colors
  * @example
- * const theme = createTheme({ brandColor: '#19BEA2'})
+ * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})
  **/
-declare const createTheme: ({ brandColor }: {
+declare const createTheme: ({ brandColor, }: {
     brandColor: ColorInput;
-}) => ThemeTokens;
+}) => {
+    theme: ThemeTokens;
+    brandColors: ColorChromaticScale;
+};
 
 /**
  * Brands a type making them act as nominal

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.25.0",
+  "version": "11.26.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"

package/build/lib/web/development/components/Table/types.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.js.map

package/build/lib/web/development/components/Table/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/production/components/Table/types.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.js.map

package/build/lib/web/production/components/Table/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}