@razorpay/blade 10.23.5 → 11.0.0

package/build/lib/native/tokens/theme/overrideTheme.js

@@ -1,11 +1,11 @@
-import paymentTheme from './paymentTheme.js';
-import cloneDeep from '../../utils/lodashButBetter/cloneDeep.js';
+import bladeTheme from './bladeTheme.js';
 import merge from 'ts-deepmerge';
+import cloneDeep from '../../utils/lodashButBetter/cloneDeep.js';
 import { hasSameObjectStructure } from '../../utils/hasSameObjectStructure/hasSameObjectStructure.js';
 import { isPartialMatchObjectKeys } from '../../utils/isPartialMatchObjectKeys/isPartialMatchObjectKeys.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 
-var overrideTheme=function overrideTheme(_ref){var baseThemeTokens=_ref.baseThemeTokens,overrides=_ref.overrides;if(__DEV__){if(!hasSameObjectStructure(baseThemeTokens,paymentTheme)){throwBladeError({message:'The base theme provided is not a valid Blade theme',moduleName:'overrideTheme'});}if(!isPartialMatchObjectKeys({objectToMatch:overrides,objectToInspect:baseThemeTokens})){throwBladeError({message:'The overrides object is not valid',moduleName:'overrideTheme'});}}return merge(cloneDeep(baseThemeTokens),overrides);};
+var overrideTheme=function overrideTheme(_ref){var baseThemeTokens=_ref.baseThemeTokens,overrides=_ref.overrides;if(__DEV__){if(!hasSameObjectStructure(baseThemeTokens,bladeTheme)){throwBladeError({message:'The base theme provided is not a valid Blade theme',moduleName:'overrideTheme'});}if(!isPartialMatchObjectKeys({objectToMatch:overrides,objectToInspect:baseThemeTokens})){throwBladeError({message:'The overrides object is not valid',moduleName:'overrideTheme'});}}return merge(cloneDeep(baseThemeTokens),overrides);};
 
 export { overrideTheme as default };
 //# sourceMappingURL=overrideTheme.js.map

package/build/lib/native/tokens/theme/overrideTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"overrideTheme.js","sources":["../../../../../src/tokens/theme/overrideTheme.ts"],"sourcesContent":["import paymentTheme from './paymentTheme';\nimport type { ThemeTokens } from './theme';\nimport cloneDeep from '~utils/lodashButBetter/cloneDeep';\nimport merge from '~utils/lodashButBetter/merge';\nimport { hasSameObjectStructure } from '~utils/hasSameObjectStructure';\nimport type { ObjectWithKeys } from '~utils/hasSameObjectStructure';\nimport { isPartialMatchObjectKeys } from '~utils/isPartialMatchObjectKeys';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\nimport { throwBladeError } from '~utils/logger';\n\ntype OverrideTheme = {\n  /**\n   * base tokens\n   */\n  baseThemeTokens: ThemeTokens;\n  /**\n   * partial theme tokens\n   */\n  overrides: DeepPartial<ThemeTokens>;\n};\n\n/**\n * @deprecated Use `createTheme` from `@razorpay/blade/tokens` instead\n *\n * @description\n *\n * `overrideTheme` merges the `baseThemeTokens` and `overrides` and returns a new ThemeTokens object,\n * which you can pass into BladeProvider.\n *\n * @example\n * ```tsx\n * const customTheme = overrideTheme({\n *   baseThemeTokens: paymentTheme, // theme to override\n *   overrides: {\n *     colors: {\n *       onLight: {\n *         brand: {\n *           primary: {\n *             '500': 'hsla(222, 100%, 96%, 1)',\n *           },\n *         },\n *       },\n *     },\n *   },\n * });\n *\n * <BladeProvider themeTokens={customTheme} />\n * ```\n */\nconst overrideTheme = ({ baseThemeTokens, overrides }: OverrideTheme): ThemeTokens => {\n  if (__DEV__) {\n    if (\n      !hasSameObjectStructure(\n        (baseThemeTokens as unknown) as ObjectWithKeys,\n        (paymentTheme as unknown) as ObjectWithKeys,\n      )\n    ) {\n      throwBladeError({\n        message: 'The base theme provided is not a valid Blade theme',\n        moduleName: 'overrideTheme',\n      });\n    }\n\n    if (\n      !isPartialMatchObjectKeys<ThemeTokens>({\n        objectToMatch: overrides,\n        objectToInspect: baseThemeTokens,\n      })\n    ) {\n      throwBladeError({\n        message: 'The overrides object is not valid',\n        moduleName: 'overrideTheme',\n      });\n    }\n  }\n\n  // Need to clone before merging since merge changes/mutates the actual object\n  return merge(cloneDeep(baseThemeTokens), overrides) as ThemeTokens;\n};\n\nexport default overrideTheme;\n"],"names":["overrideTheme","_ref","baseThemeTokens","overrides","__DEV__","hasSameObjectStructure","paymentTheme","throwBladeError","message","moduleName","isPartialMatchObjectKeys","objectToMatch","objectToInspect","merge","cloneDeep"],"mappings":";;;;;;;AAiDM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAAmE,CAAA,IAA7DC,eAAe,CAAAD,IAAA,CAAfC,eAAe,CAAEC,SAAS,CAAAF,IAAA,CAATE,SAAS,CACjD,GAAIC,OAAO,CAAE,CACX,GACE,CAACC,sBAAsB,CACpBH,eAAe,CACfI,YACH,CAAC,CACD,CACAC,eAAe,CAAC,CACdC,OAAO,CAAE,oDAAoD,CAC7DC,UAAU,CAAE,eACd,CAAC,CAAC,CACJ,CAEA,GACE,CAACC,wBAAwB,CAAc,CACrCC,aAAa,CAAER,SAAS,CACxBS,eAAe,CAAEV,eACnB,CAAC,CAAC,CACF,CACAK,eAAe,CAAC,CACdC,OAAO,CAAE,mCAAmC,CAC5CC,UAAU,CAAE,eACd,CAAC,CAAC,CACJ,CACF,CAGA,OAAOI,KAAK,CAACC,SAAS,CAACZ,eAAe,CAAC,CAAEC,SAAS,CAAC,CACrD;;;;"}
+{"version":3,"file":"overrideTheme.js","sources":["../../../../../src/tokens/theme/overrideTheme.ts"],"sourcesContent":["import bladeTheme from './bladeTheme';\nimport type { ThemeTokens } from './theme';\nimport merge from '~utils/lodashButBetter/merge';\nimport cloneDeep from '~utils/lodashButBetter/cloneDeep';\nimport { hasSameObjectStructure } from '~utils/hasSameObjectStructure';\nimport type { ObjectWithKeys } from '~utils/hasSameObjectStructure';\nimport { isPartialMatchObjectKeys } from '~utils/isPartialMatchObjectKeys';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\nimport { throwBladeError } from '~utils/logger';\n\ntype OverrideTheme = {\n  /**\n   * base tokens\n   */\n  baseThemeTokens: ThemeTokens;\n  /**\n   * partial theme tokens\n   */\n  overrides: DeepPartial<ThemeTokens>;\n};\n\n/**\n * @deprecated Use `createTheme` from `@razorpay/blade/tokens` instead\n *\n * @description\n *\n * `overrideTheme` merges the `baseThemeTokens` and `overrides` and returns a new ThemeTokens object,\n * which you can pass into BladeProvider.\n *\n * @example\n * ```tsx\n * const customTheme = overrideTheme({\n *   baseThemeTokens: bladeTheme, // theme to override\n *   overrides: {\n *     colors: {\n *       onLight: {\n *         brand: {\n *           primary: {\n *             '500': 'hsla(222, 100%, 96%, 1)',\n *           },\n *         },\n *       },\n *     },\n *   },\n * });\n *\n * <BladeProvider themeTokens={customTheme} />\n * ```\n */\nconst overrideTheme = ({ baseThemeTokens, overrides }: OverrideTheme): ThemeTokens => {\n  if (__DEV__) {\n    if (\n      !hasSameObjectStructure(\n        (baseThemeTokens as unknown) as ObjectWithKeys,\n        (bladeTheme as unknown) as ObjectWithKeys,\n      )\n    ) {\n      throwBladeError({\n        message: 'The base theme provided is not a valid Blade theme',\n        moduleName: 'overrideTheme',\n      });\n    }\n\n    if (\n      !isPartialMatchObjectKeys<ThemeTokens>({\n        objectToMatch: overrides,\n        objectToInspect: baseThemeTokens,\n      })\n    ) {\n      throwBladeError({\n        message: 'The overrides object is not valid',\n        moduleName: 'overrideTheme',\n      });\n    }\n  }\n\n  // Need to clone before merging since merge changes/mutates the actual object\n  return merge(cloneDeep(baseThemeTokens), overrides) as ThemeTokens;\n};\n\nexport default overrideTheme;\n"],"names":["overrideTheme","_ref","baseThemeTokens","overrides","__DEV__","hasSameObjectStructure","bladeTheme","throwBladeError","message","moduleName","isPartialMatchObjectKeys","objectToMatch","objectToInspect","merge","cloneDeep"],"mappings":";;;;;;;AAiDM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAAmE,CAAA,IAA7DC,eAAe,CAAAD,IAAA,CAAfC,eAAe,CAAEC,SAAS,CAAAF,IAAA,CAATE,SAAS,CACjD,GAAIC,OAAO,CAAE,CACX,GACE,CAACC,sBAAsB,CACpBH,eAAe,CACfI,UACH,CAAC,CACD,CACAC,eAAe,CAAC,CACdC,OAAO,CAAE,oDAAoD,CAC7DC,UAAU,CAAE,eACd,CAAC,CAAC,CACJ,CAEA,GACE,CAACC,wBAAwB,CAAc,CACrCC,aAAa,CAAER,SAAS,CACxBS,eAAe,CAAEV,eACnB,CAAC,CAAC,CACF,CACAK,eAAe,CAAC,CACdC,OAAO,CAAE,mCAAmC,CAC5CC,UAAU,CAAE,eACd,CAAC,CAAC,CACJ,CACF,CAGA,OAAOI,KAAK,CAACC,SAAS,CAACZ,eAAe,CAAC,CAAEC,SAAS,CAAC,CACrD;;;;"}

package/build/lib/native/tokens/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../../../src/tokens/theme/theme.ts"],"sourcesContent":["import type { StringWithAutocomplete } from '~utils/types';\nimport type {\n  Border,\n  Breakpoints,\n  Motion,\n  Spacing,\n  TypographyWithPlatforms,\n  ElevationWithColorModes,\n} from '~tokens/global';\n\nexport type ColorSchemeNames = 'dark' | 'light';\nexport type ColorSchemeNamesInput = ColorSchemeNames | 'system';\n\nexport type ColorSchemeModes = 'onDark' | 'onLight';\n\nexport type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';\n\nexport type ColorContrastTypes = 'low' | 'high';\n\nexport type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';\n\nexport type ColorContrast = {\n  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;\n};\n\n// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens\nexport type SurfaceLevels = 1 | 2 | 3;\n\nexport type ActionStates = {\n  default: string;\n  hover: string;\n  focus: string;\n  active: string;\n  disabled: string;\n};\n\nexport type LinkActionStates = ActionStates & {\n  visited: string;\n};\n\nexport type ActionStatesWithContrast = {\n  default: ColorContrast;\n  hover: ColorContrast;\n  focus: ColorContrast;\n  active: ColorContrast;\n  disabled: ColorContrast;\n};\n\nexport type ActionStatesWithLowContrast = {\n  default: Pick<ColorContrast, 'lowContrast'>;\n  hover: Pick<ColorContrast, 'lowContrast'>;\n  focus: Pick<ColorContrast, 'lowContrast'>;\n  active: Pick<ColorContrast, 'lowContrast'>;\n  disabled: Pick<ColorContrast, 'lowContrast'>;\n};\n\nexport type LinkActionStatesWithContrast = ActionStatesWithContrast & {\n  visited: ColorContrast;\n};\n\nexport type ActionVariants = {\n  primary: ActionStates;\n  secondary: ActionStates;\n  tertiary: ActionStates;\n  link: LinkActionStates;\n};\n\nexport type ActionVariantsWithContrast = {\n  primary: ActionStatesWithContrast;\n  secondary: ActionStatesWithContrast;\n  tertiary: ActionStatesWithContrast;\n  link: ActionStatesWithContrast;\n};\n\nexport type SecondaryFeedbackActionStatesWithContrast = {\n  secondary: {\n    default: Pick<ColorContrast, 'lowContrast'>;\n    hover: Pick<ColorContrast, 'lowContrast'>;\n    focus: Pick<ColorContrast, 'lowContrast'>;\n    active: Pick<ColorContrast, 'lowContrast'>;\n    disabled: Pick<ColorContrast, 'lowContrast'>;\n  };\n};\n\n// export type ActionProperties = {\n//   background: ActionVariants;\n//   border: ActionVariants;\n//   text: ActionVariants;\n//   icon: ActionVariants;\n// };\n\nexport type FeedbackActions = {\n  action: {\n    background: {\n      primary: ActionStatesWithContrast;\n      secondary: ActionStatesWithLowContrast;\n    };\n    border: {\n      primary: ActionStatesWithContrast;\n      secondary: ActionStatesWithLowContrast;\n    };\n    text: {\n      link: ActionStatesWithContrast;\n      primary: ActionStatesWithContrast;\n      secondary: ActionStatesWithLowContrast;\n    };\n    icon: {\n      link: ActionStatesWithContrast;\n      primary: ActionStatesWithContrast;\n      secondary: ActionStatesWithLowContrast;\n    };\n  };\n};\n\nexport type WhiteColors = {\n  background: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;\n  border: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;\n  text: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;\n  icon: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;\n};\n\nexport type Colors = {\n  brand: {\n    primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;\n    secondary: Record<500, string>;\n    gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;\n  };\n  feedback: {\n    background: Record<Feedback, ColorContrast>;\n    border: Record<Feedback, ColorContrast>;\n    text: Record<Feedback, ColorContrast>;\n    icon: Record<Feedback, ColorContrast>;\n    positive: FeedbackActions;\n    negative: FeedbackActions;\n    information: FeedbackActions;\n    notice: FeedbackActions;\n    neutral: FeedbackActions;\n  };\n  surface: {\n    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;\n    border: Record<'normal' | 'subtle', ColorContrast>;\n    text: Record<TextTypes, ColorContrast>;\n    action: {\n      icon: ActionStatesWithContrast;\n    };\n    overlay: Record<'background', Record<400 | 800, string>>;\n    popup: Record<'background', string>;\n  };\n  action: {\n    background: Omit<ActionVariants, 'link'>;\n    border: Omit<ActionVariants, 'link'>;\n    text: ActionVariants;\n    icon: ActionVariants;\n  };\n  badge: {\n    background: {\n      blue: ColorContrast;\n    };\n    border: {\n      blue: ColorContrast;\n    };\n    text: {\n      blue: ColorContrast;\n    };\n    icon: {\n      blue: ColorContrast;\n    };\n  };\n  static: {\n    white: string;\n  };\n  white: {\n    action: WhiteColors;\n  };\n};\n\nexport type ColorsWithModes = Record<ColorSchemeModes, Colors>;\n\nexport type ThemeTokens = {\n  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object\n  border: Border;\n  breakpoints: Breakpoints;\n  colors: ColorsWithModes;\n  motion: Motion;\n  elevation: ElevationWithColorModes;\n  spacing: Spacing;\n  typography: TypographyWithPlatforms;\n};\n\nexport type SpacingValues = `${Spacing[keyof Spacing]}px`;\nexport type BorderWidthValues = `${Border['width'][keyof Border['width']]}px`;\nexport type BorderRadiusValues =\n  | `${Border['radius'][Exclude<keyof Border['radius'], 'round'>]}px`\n  | `${Border['radius'][Extract<keyof Border['radius'], 'round'>]}`;\n\nexport const colorSchemeNamesInput: ColorSchemeNamesInput[] = ['light', 'dark', 'system'];\n"],"names":["colorSchemeNamesInput"],"mappings":"AAmMa,IAAAA,qBAA8C,CAAG,CAAC,OAAO,CAAE,MAAM,CAAE,QAAQ;;;;"}
+{"version":3,"file":"theme.js","sources":["../../../../../src/tokens/theme/theme.ts"],"sourcesContent":["import type { StringWithAutocomplete } from '~utils/types';\nimport type {\n  Border,\n  Breakpoints,\n  Motion,\n  Spacing,\n  TypographyWithPlatforms,\n  ElevationWithColorModes,\n} from '~tokens/global';\n\nexport type ColorSchemeNames = 'dark' | 'light';\nexport type ColorSchemeNamesInput = ColorSchemeNames | 'system';\n\nexport type ColorSchemeModes = 'onDark' | 'onLight';\n\nexport type FeedbackColors = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';\n\nexport type Emphasis = {\n  subtle: string;\n  moderate: string;\n  intense: string;\n  normal: string;\n  muted: string;\n  disabled: string;\n};\n\ntype SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;\n// Exporting this for usage in other components\nexport type SubtleOrIntense = keyof SubtleOrIntenseEmphasis;\ntype InteractiveStates = {\n  default: string;\n  highlighted: string;\n  disabled: string;\n  faded: string;\n};\n\ntype OnEmphasis = {\n  onSubtle: string;\n  onIntense: string;\n};\n\ntype ColorCategories = {\n  staticBlack: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;\n  staticWhite: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;\n  gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;\n  onSea: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;\n  onCloud: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;\n  primary: Pick<Emphasis, 'normal'>;\n};\n\ntype InteractiveColorKeys = FeedbackColors | Exclude<keyof ColorCategories, 'onSea' | 'onCloud'>;\n\nexport type Colors = {\n  interactive: {\n    background: Record<InteractiveColorKeys, InteractiveStates & { fadedHighlighted: string }>;\n    border: Record<InteractiveColorKeys, InteractiveStates>;\n    text: Record<\n      InteractiveColorKeys | 'onPrimary',\n      Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>\n    >;\n    icon: Record<\n      InteractiveColorKeys | 'onPrimary',\n      Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>\n    >;\n  };\n  feedback: {\n    background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;\n    border: Record<FeedbackColors, SubtleOrIntenseEmphasis>;\n    text: Record<FeedbackColors, SubtleOrIntenseEmphasis>;\n    icon: Record<FeedbackColors, SubtleOrIntenseEmphasis>;\n  };\n  surface: {\n    background: {\n      gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;\n      primary: SubtleOrIntenseEmphasis;\n      sea: SubtleOrIntenseEmphasis;\n      cloud: SubtleOrIntenseEmphasis;\n    };\n    border: {\n      gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;\n      primary: Pick<Emphasis, 'normal' | 'muted'>;\n    };\n    text: ColorCategories;\n    icon: ColorCategories;\n  };\n  overlay: {\n    background: Pick<Emphasis, 'moderate' | 'subtle'>;\n  };\n  popup: {\n    background: SubtleOrIntenseEmphasis;\n    border: SubtleOrIntenseEmphasis;\n  };\n  transparent: string;\n};\n\nexport type ColorsWithModes = Record<ColorSchemeModes, Colors>;\n\nexport type ThemeTokens = {\n  name: 'bladeTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object\n  border: Border;\n  breakpoints: Breakpoints;\n  colors: ColorsWithModes;\n  motion: Motion;\n  elevation: ElevationWithColorModes;\n  spacing: Spacing;\n  typography: TypographyWithPlatforms;\n};\n\nexport type SpacingValues = `${Spacing[keyof Spacing]}px`;\nexport type BorderWidthValues = `${Border['width'][keyof Border['width']]}px`;\nexport type BorderRadiusValues =\n  | `${Border['radius'][Exclude<keyof Border['radius'], 'round'>]}px`\n  | `${Border['radius'][Extract<keyof Border['radius'], 'round'>]}`;\n\nexport const colorSchemeNamesInput: ColorSchemeNamesInput[] = ['light', 'dark', 'system'];\n"],"names":["colorSchemeNamesInput"],"mappings":"AAkHa,IAAAA,qBAA8C,CAAG,CAAC,OAAO,CAAE,MAAM,CAAE,QAAQ;;;;"}

package/build/lib/native/utils/getFocusRingStyles/getFocusRingStyles.native.js

@@ -0,0 +1,4 @@
+function getFocusRingStyles(_){return {};}
+
+export { getFocusRingStyles };
+//# sourceMappingURL=getFocusRingStyles.native.js.map

package/build/lib/native/utils/getFocusRingStyles/getFocusRingStyles.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFocusRingStyles.native.js","sources":["../../../../../src/utils/getFocusRingStyles/getFocusRingStyles.native.ts"],"sourcesContent":["import type { CSSProperties } from 'styled-components';\nimport type { Theme } from '../../components/BladeProvider';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction getFocusRingStyles(_: { theme: Theme; negativeOffset?: boolean }): CSSProperties {\n  // React Native does not need focus rings\n  return {};\n}\n\nexport { getFocusRingStyles };\n"],"names":["getFocusRingStyles","_"],"mappings":"AAIA,SAASA,kBAAkBA,CAACC,CAA6C,CAAiB,CAExF,OAAO,EAAE,CACX;;;;"}

package/build/lib/native/utils/lodashButBetter/get.js.map

@@ -1 +1 @@
-{"version":3,"file":"get.js","sources":["../../../../../src/utils/lodashButBetter/get.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nfunction getIn(obj: Record<string, any>, path: string, defaultValue?: any): any {\n  if (!path) {\n    return defaultValue;\n  }\n\n  const keys = path.split('.');\n  let result = obj;\n\n  for (const key of keys) {\n    result = result?.[key];\n    if (result === undefined) {\n      return defaultValue;\n    }\n  }\n\n  return result !== undefined ? result : defaultValue;\n}\n\nexport default getIn;\n"],"names":["getIn","obj","path","defaultValue","keys","split","result","key","_result","undefined"],"mappings":"AACA,SAASA,KAAKA,CAACC,GAAwB,CAAEC,IAAY,CAAEC,YAAkB,CAAO,CAC9E,GAAI,CAACD,IAAI,CAAE,CACT,OAAOC,YAAY,CACrB,CAEA,IAAMC,IAAI,CAAGF,IAAI,CAACG,KAAK,CAAC,GAAG,CAAC,CAC5B,IAAIC,MAAM,CAAGL,GAAG,CAEhB,IAAK,IAAMM,GAAG,IAAIH,IAAI,CAAE,CAAAI,IAAAA,OAAA,CACtBF,MAAM,CAAA,CAAAE,OAAA,CAAGF,MAAM,GAANE,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,OAAA,CAASD,GAAG,CAAC,CACtB,GAAID,MAAM,GAAKG,SAAS,CAAE,CACxB,OAAON,YAAY,CACrB,CACF,CAEA,OAAOG,MAAM,GAAKG,SAAS,CAAGH,MAAM,CAAGH,YAAY,CACrD;;;;"}
+{"version":3,"file":"get.js","sources":["../../../../../src/utils/lodashButBetter/get.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */\nimport type { ElevationStyles } from '~tokens/global/elevation';\nimport type { EasingType } from '~tokens/global/motion';\n\n/**\n * @template TokenType token type generic\n * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`\n */\nexport type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = {\n  [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles\n    ? `${Extract<K, number | string>}`\n    : `${Extract<K, number | string>}.${TokenType[K] extends Record<\n        string,\n        string | number | boolean | EasingType<string>\n      >\n        ? Extract<keyof TokenType[K], number | string>\n        : DotNotationToken<TokenType[K]>}`;\n}[keyof TokenType];\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nfunction getIn<\n  T extends Record<string, any>,\n  K extends DotNotationToken<T>,\n  Default extends any = any\n>(obj: T, path: K, defaultValue?: Default): any {\n  if (!path) {\n    return defaultValue;\n  }\n\n  const keys = path.split('.');\n  let result = obj;\n\n  for (const key of keys) {\n    result = result?.[key];\n    if (result === undefined) {\n      return defaultValue;\n    }\n  }\n\n  return result !== undefined ? result : defaultValue;\n}\n\nexport default getIn;\n"],"names":["getIn","obj","path","defaultValue","keys","split","result","key","_result","undefined"],"mappings":"AAqBA,SAASA,KAAKA,CAIZC,GAAM,CAAEC,IAAO,CAAEC,YAAsB,CAAO,CAC9C,GAAI,CAACD,IAAI,CAAE,CACT,OAAOC,YAAY,CACrB,CAEA,IAAMC,IAAI,CAAGF,IAAI,CAACG,KAAK,CAAC,GAAG,CAAC,CAC5B,IAAIC,MAAM,CAAGL,GAAG,CAEhB,IAAK,IAAMM,GAAG,IAAIH,IAAI,CAAE,CAAAI,IAAAA,OAAA,CACtBF,MAAM,CAAA,CAAAE,OAAA,CAAGF,MAAM,GAANE,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,OAAA,CAASD,GAAG,CAAC,CACtB,GAAID,MAAM,GAAKG,SAAS,CAAE,CACxB,OAAON,YAAY,CACrB,CACF,CAEA,OAAOG,MAAM,GAAKG,SAAS,CAAGH,MAAM,CAAGH,YAAY,CACrD;;;;"}

package/build/lib/native/utils/lodashButBetter/isEmpty.js.map

@@ -1 +1 @@
-{"version":3,"file":"isEmpty.js","sources":["../../../../../src/utils/lodashButBetter/isEmpty.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\ntype Collection =\n  | Record<string, any>\n  | any[]\n  | Set<any>\n  | Map<any, any>\n  | string\n  | number\n  | boolean\n  | null\n  | undefined;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default function isEmpty(value: Collection): boolean {\n  // Check if the value is null or undefined\n  if (value == null) {\n    return true;\n  }\n\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n\n  // Check if the value is a collection, map, or set and has zero size\n  if (value instanceof Map || value instanceof Set) {\n    return value.size === 0;\n  }\n\n  // Check if the value is an object and has no own enumerable properties\n  if (typeof value === 'object' && Object.keys(value).length === 0) {\n    return true;\n  }\n\n  // Check if the value is a string and has zero length\n  if (typeof value === 'string' && value.length === 0) {\n    return true;\n  }\n\n  // https://github.com/lodash/lodash/issues/496#issuecomment-37692727\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return true;\n  }\n\n  return false;\n}\n"],"names":["isEmpty","value","Array","isArray","length","Map","Set","size","Object","keys"],"mappings":"AAae,SAASA,OAAOA,CAACC,KAAiB,CAAW,CAE1D,GAAIA,KAAK,EAAI,IAAI,CAAE,CACjB,OAAW,IAAA,CACb,CAEA,GAAIC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,CAAE,CACxB,OAAOA,KAAK,CAACG,MAAM,GAAK,CAAC,CAC3B,CAGA,GAAIH,KAAK,YAAYI,GAAG,EAAIJ,KAAK,YAAYK,GAAG,CAAE,CAChD,OAAOL,KAAK,CAACM,IAAI,GAAK,CAAC,CACzB,CAGA,GAAI,OAAON,KAAK,GAAK,QAAQ,EAAIO,MAAM,CAACC,IAAI,CAACR,KAAK,CAAC,CAACG,MAAM,GAAK,CAAC,CAAE,CAChE,OAAW,IAAA,CACb,CAGA,GAAI,OAAOH,KAAK,GAAK,QAAQ,EAAIA,KAAK,CAACG,MAAM,GAAK,CAAC,CAAE,CACnD,OAAO,IAAI,CACb,CAGA,GAAI,OAAOH,KAAK,GAAK,QAAQ,EAAI,OAAOA,KAAK,GAAK,SAAS,CAAE,CAC3D,OAAO,IAAI,CACb,CAEA,OAAO,KAAK,CACd;;;;"}
+{"version":3,"file":"isEmpty.js","sources":["../../../../../src/utils/lodashButBetter/isEmpty.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\ntype Collection =\n  | Record<string, any>\n  | any[]\n  | Set<any>\n  | Map<any, any>\n  | string\n  | number\n  | boolean\n  | null\n  | undefined;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default function isEmpty(value: Collection): value is null | undefined {\n  // Check if the value is null or undefined\n  if (value == null) {\n    return true;\n  }\n\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n\n  // Check if the value is a collection, map, or set and has zero size\n  if (value instanceof Map || value instanceof Set) {\n    return value.size === 0;\n  }\n\n  // Check if the value is an object and has no own enumerable properties\n  if (typeof value === 'object' && Object.keys(value).length === 0) {\n    return true;\n  }\n\n  // Check if the value is a string and has zero length\n  if (typeof value === 'string' && value.length === 0) {\n    return true;\n  }\n\n  // https://github.com/lodash/lodash/issues/496#issuecomment-37692727\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return true;\n  }\n\n  return false;\n}\n"],"names":["isEmpty","value","Array","isArray","length","Map","Set","size","Object","keys"],"mappings":"AAae,SAASA,OAAOA,CAACC,KAAiB,CAA6B,CAE5E,GAAIA,KAAK,EAAI,IAAI,CAAE,CACjB,OAAW,IAAA,CACb,CAEA,GAAIC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,CAAE,CACxB,OAAOA,KAAK,CAACG,MAAM,GAAK,CAAC,CAC3B,CAGA,GAAIH,KAAK,YAAYI,GAAG,EAAIJ,KAAK,YAAYK,GAAG,CAAE,CAChD,OAAOL,KAAK,CAACM,IAAI,GAAK,CAAC,CACzB,CAGA,GAAI,OAAON,KAAK,GAAK,QAAQ,EAAIO,MAAM,CAACC,IAAI,CAACR,KAAK,CAAC,CAACG,MAAM,GAAK,CAAC,CAAE,CAChE,OAAW,IAAA,CACb,CAGA,GAAI,OAAOH,KAAK,GAAK,QAAQ,EAAIA,KAAK,CAACG,MAAM,GAAK,CAAC,CAAE,CACnD,OAAO,IAAI,CACb,CAGA,GAAI,OAAOH,KAAK,GAAK,QAAQ,EAAI,OAAOA,KAAK,GAAK,SAAS,CAAE,CAC3D,OAAO,IAAI,CACb,CAEA,OAAO,KAAK,CACd;;;;"}

package/build/lib/native/utils/makeLetterSpacing/makeLetterSpacing.js

@@ -0,0 +1,4 @@
+var makeLetterSpacing=function makeLetterSpacing(letterSpacing,fontSize){return `${fontSize*(letterSpacing/100)}px`;};
+
+export { makeLetterSpacing };
+//# sourceMappingURL=makeLetterSpacing.js.map

package/build/lib/native/utils/makeLetterSpacing/makeLetterSpacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeLetterSpacing.js","sources":["../../../../../src/utils/makeLetterSpacing/makeLetterSpacing.ts"],"sourcesContent":["export const makeLetterSpacing = (letterSpacing: number, fontSize: number): `${number}px` => {\n  // Calculating a px letter-spacing from % letter spacing\n  return `${fontSize * (letterSpacing / 100)}px`;\n};\n"],"names":["makeLetterSpacing","letterSpacing","fontSize"],"mappings":"AAAa,IAAAA,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAIC,aAAqB,CAAEC,QAAgB,CAAoB,CAE3F,OAAQ,CAAEA,EAAAA,QAAQ,EAAID,aAAa,CAAG,GAAG,CAAE,CAAG,EAAA,CAAA,CAChD;;;;"}

package/build/lib/native/utils/objectKeysWithType.js

@@ -0,0 +1,4 @@
+function objectKeysWithType(obj){return Object.keys(obj);}
+
+export { objectKeysWithType };
+//# sourceMappingURL=objectKeysWithType.js.map

package/build/lib/native/utils/objectKeysWithType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"objectKeysWithType.js","sources":["../../../../src/utils/objectKeysWithType.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction objectKeysWithType<T extends Record<any, any>>(obj: T): (keyof T)[] {\n  return Object.keys(obj) as (keyof T)[];\n}\n\nexport { objectKeysWithType };\n"],"names":["objectKeysWithType","obj","Object","keys"],"mappings":"AACA,SAASA,kBAAkBA,CAA6BC,GAAM,CAAe,CAC3E,OAAOC,MAAM,CAACC,IAAI,CAACF,GAAG,CAAC,CACzB;;;;"}

package/build/lib/native/utils/useInteraction.js

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState } from 'react';
 
-var useInteraction=function useInteraction(){var _useState=useState('default'),_useState2=_slicedToArray(_useState,2),currentInteraction=_useState2[0],setCurrentInteraction=_useState2[1];var onMouseEnter=function onMouseEnter(){if(currentInteraction!=='active')setCurrentInteraction('hover');};var onMouseLeave=function onMouseLeave(){if(currentInteraction!=='active')setCurrentInteraction('default');};var onFocus=function onFocus(){setCurrentInteraction('active');};var onBlur=function onBlur(){setCurrentInteraction('default');};return {onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onFocus:onFocus,onBlur:onBlur,currentInteraction:currentInteraction,setCurrentInteraction:setCurrentInteraction};};
+var useInteraction=function useInteraction(){var _useState=useState('default'),_useState2=_slicedToArray(_useState,2),currentInteraction=_useState2[0],setCurrentInteraction=_useState2[1];var onMouseEnter=function onMouseEnter(){if(currentInteraction!=='focus')setCurrentInteraction('hover');};var onMouseLeave=function onMouseLeave(){if(currentInteraction!=='focus')setCurrentInteraction('default');};var onFocus=function onFocus(){setCurrentInteraction('focus');};var onBlur=function onBlur(){setCurrentInteraction('default');};return {onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onFocus:onFocus,onBlur:onBlur,currentInteraction:currentInteraction,setCurrentInteraction:setCurrentInteraction};};
 
 export { useInteraction as default };
 //# sourceMappingURL=useInteraction.js.map

package/build/lib/native/utils/useInteraction.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInteraction.js","sources":["../../../../src/utils/useInteraction.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useState } from 'react';\nimport type { ActionStates } from '~tokens/theme/theme';\n\nconst useInteraction = (): {\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n  onFocus: () => void;\n  onBlur: () => void;\n  currentInteraction: keyof ActionStates;\n  setCurrentInteraction: Dispatch<SetStateAction<keyof ActionStates>>;\n} => {\n  const [currentInteraction, setCurrentInteraction] = useState<keyof ActionStates>('default');\n\n  const onMouseEnter = (): void => {\n    if (currentInteraction !== 'active') setCurrentInteraction('hover');\n  };\n  const onMouseLeave = (): void => {\n    if (currentInteraction !== 'active') setCurrentInteraction('default');\n  };\n  const onFocus = (): void => {\n    setCurrentInteraction('active');\n  };\n  const onBlur = (): void => {\n    setCurrentInteraction('default');\n  };\n\n  return {\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    currentInteraction,\n    setCurrentInteraction,\n  };\n};\n\nexport default useInteraction;\n"],"names":["useInteraction","_useState","useState","_useState2","_slicedToArray","currentInteraction","setCurrentInteraction","onMouseEnter","onMouseLeave","onFocus","onBlur"],"mappings":";;;AAIM,IAAAA,cAAc,CAAG,SAAjBA,cAAcA,EAOf,CACH,IAAAC,SAAA,CAAoDC,QAAQ,CAAqB,SAAS,CAAC,CAAAC,UAAA,CAAAC,cAAA,CAAAH,SAAA,IAApFI,kBAAkB,CAAAF,UAAA,CAAA,CAAA,CAAA,CAAEG,qBAAqB,CAAAH,UAAA,CAEhD,CAAA,CAAA,CAAA,IAAMI,YAAY,CAAG,SAAfA,YAAYA,EAAe,CAC/B,GAAIF,kBAAkB,GAAK,QAAQ,CAAEC,qBAAqB,CAAC,OAAO,CAAC,CACrE,CAAC,CACD,IAAME,YAAY,CAAG,SAAfA,YAAYA,EAAe,CAC/B,GAAIH,kBAAkB,GAAK,QAAQ,CAAEC,qBAAqB,CAAC,SAAS,CAAC,CACvE,CAAC,CACD,IAAMG,OAAO,CAAG,SAAVA,OAAOA,EAAe,CAC1BH,qBAAqB,CAAC,QAAQ,CAAC,CACjC,CAAC,CACD,IAAMI,MAAM,CAAG,SAATA,MAAMA,EAAe,CACzBJ,qBAAqB,CAAC,SAAS,CAAC,CAClC,CAAC,CAED,OAAO,CACLC,YAAY,CAAZA,YAAY,CACZC,YAAY,CAAZA,YAAY,CACZC,OAAO,CAAPA,OAAO,CACPC,MAAM,CAANA,MAAM,CACNL,kBAAkB,CAAlBA,kBAAkB,CAClBC,qBAAqB,CAArBA,qBACF,CAAC,CACH;;;;"}
+{"version":3,"file":"useInteraction.js","sources":["../../../../src/utils/useInteraction.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useState } from 'react';\n\nexport type ActionStates = 'default' | 'hover' | 'focus' | 'disabled';\nconst useInteraction = (): {\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n  onFocus: () => void;\n  onBlur: () => void;\n  currentInteraction: ActionStates;\n  setCurrentInteraction: Dispatch<SetStateAction<ActionStates>>;\n} => {\n  const [currentInteraction, setCurrentInteraction] = useState<ActionStates>('default');\n\n  const onMouseEnter = (): void => {\n    if (currentInteraction !== 'focus') setCurrentInteraction('hover');\n  };\n  const onMouseLeave = (): void => {\n    if (currentInteraction !== 'focus') setCurrentInteraction('default');\n  };\n  const onFocus = (): void => {\n    setCurrentInteraction('focus');\n  };\n  const onBlur = (): void => {\n    setCurrentInteraction('default');\n  };\n\n  return {\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    currentInteraction,\n    setCurrentInteraction,\n  };\n};\n\nexport default useInteraction;\n"],"names":["useInteraction","_useState","useState","_useState2","_slicedToArray","currentInteraction","setCurrentInteraction","onMouseEnter","onMouseLeave","onFocus","onBlur"],"mappings":";;;AAIM,IAAAA,cAAc,CAAG,SAAjBA,cAAcA,EAOf,CACH,IAAAC,SAAA,CAAoDC,QAAQ,CAAe,SAAS,CAAC,CAAAC,UAAA,CAAAC,cAAA,CAAAH,SAAA,IAA9EI,kBAAkB,CAAAF,UAAA,CAAA,CAAA,CAAA,CAAEG,qBAAqB,CAAAH,UAAA,CAEhD,CAAA,CAAA,CAAA,IAAMI,YAAY,CAAG,SAAfA,YAAYA,EAAe,CAC/B,GAAIF,kBAAkB,GAAK,OAAO,CAAEC,qBAAqB,CAAC,OAAO,CAAC,CACpE,CAAC,CACD,IAAME,YAAY,CAAG,SAAfA,YAAYA,EAAe,CAC/B,GAAIH,kBAAkB,GAAK,OAAO,CAAEC,qBAAqB,CAAC,SAAS,CAAC,CACtE,CAAC,CACD,IAAMG,OAAO,CAAG,SAAVA,OAAOA,EAAe,CAC1BH,qBAAqB,CAAC,OAAO,CAAC,CAChC,CAAC,CACD,IAAMI,MAAM,CAAG,SAATA,MAAMA,EAAe,CACzBJ,qBAAqB,CAAC,SAAS,CAAC,CAClC,CAAC,CAED,OAAO,CACLC,YAAY,CAAZA,YAAY,CACZC,YAAY,CAAZA,YAAY,CACZC,OAAO,CAAPA,OAAO,CACPC,MAAM,CAANA,MAAM,CACNL,kBAAkB,CAAlBA,kBAAkB,CAClBC,qBAAqB,CAArBA,qBACF,CAAC,CACH;;;;"}

package/build/lib/web/development/components/Accordion/AccordionButton.web.js

@@ -10,7 +10,7 @@ import '../../utils/makeAccessible/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/logger/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Heading } from '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
@@ -37,15 +37,16 @@ var _AccordionButton = function _AccordionButton(_ref) {
   var onClick = function onClick() {
     return toggleCollapse();
   };
-  var _index = typeof index === 'number' && showNumberPrefix ? /*#__PURE__*/jsxs(Heading, {
-    size: "small",
+  var _index = typeof index === 'number' && showNumberPrefix ? /*#__PURE__*/jsxs(Text, {
+    size: "large",
+    weight: "semibold",
     marginRight: "spacing.2",
     as: "span",
     children: [index + 1, "."]
   }) : null;
   var _icon = Icon && /*#__PURE__*/jsx(Icon, {
     size: "medium",
-    color: "currentColor",
+    color: "surface.icon.gray.muted",
     marginRight: "spacing.3",
     marginY: "spacing.2"
   });
@@ -79,8 +80,9 @@ var _AccordionButton = function _AccordionButton(_ref) {
         flexDirection: "row",
         alignItems: "flex-start",
         marginRight: "spacing.4",
-        children: [_index, _icon, /*#__PURE__*/jsx(Heading, {
-          size: "small",
+        children: [_index, _icon, /*#__PURE__*/jsx(Text, {
+          size: "large",
+          weight: "semibold",
           as: "span",
           children: children
         })]

package/build/lib/web/development/components/Accordion/AccordionButton.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Heading } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n  const { showNumberPrefix, expandedIndex } = useAccordion();\n\n  const toggleCollapse = (): void => onExpandChange(!isExpanded);\n  const onClick = (): void => toggleCollapse();\n\n  const _index =\n    typeof index === 'number' && showNumberPrefix ? (\n      <Heading size=\"small\" marginRight=\"spacing.2\" as=\"span\">\n        {index + 1}.\n      </Heading>\n    ) : null;\n\n  const _icon = Icon && (\n    <Icon size=\"medium\" color=\"currentColor\" marginRight=\"spacing.3\" marginY=\"spacing.2\" />\n  );\n\n  if (__DEV__) {\n    if (_index && _icon) {\n      throwBladeError({\n        message: \"showNumberPrefix and icon shouldn't be used together\",\n        moduleName: 'Accordion',\n      });\n    }\n  }\n\n  const isItemExpanded = expandedIndex === index;\n\n  return (\n    <BaseBox\n      // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n      {...makeAccessible({ role: 'heading', level: 3 })}\n      width=\"100%\"\n    >\n      <StyledAccordionButton\n        isExpanded={isItemExpanded}\n        onClick={onClick}\n        {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n        {...metaAttribute({ name: MetaConstants.AccordionButton })}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"flex-start\" marginRight=\"spacing.4\">\n          {_index}\n          {_icon}\n          <Heading size=\"small\" as=\"span\">\n            {children}\n          </Heading>\n        </BaseBox>\n        <CollapsibleChevronIcon color=\"currentColor\" size=\"large\" />\n      </StyledAccordionButton>\n    </BaseBox>\n  );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n  componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","children","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","toggleCollapse","onClick","_index","_jsxs","Heading","size","marginRight","as","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","width","StyledAccordionButton","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","display","flexDirection","alignItems","CollapsibleChevronIcon","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n  const { showNumberPrefix, expandedIndex } = useAccordion();\n\n  const toggleCollapse = (): void => onExpandChange(!isExpanded);\n  const onClick = (): void => toggleCollapse();\n\n  const _index =\n    typeof index === 'number' && showNumberPrefix ? (\n      <Text size=\"large\" weight=\"semibold\" marginRight=\"spacing.2\" as=\"span\">\n        {index + 1}.\n      </Text>\n    ) : null;\n\n  const _icon = Icon && (\n    <Icon\n      size=\"medium\"\n      color=\"surface.icon.gray.muted\"\n      marginRight=\"spacing.3\"\n      marginY=\"spacing.2\"\n    />\n  );\n\n  if (__DEV__) {\n    if (_index && _icon) {\n      throwBladeError({\n        message: \"showNumberPrefix and icon shouldn't be used together\",\n        moduleName: 'Accordion',\n      });\n    }\n  }\n\n  const isItemExpanded = expandedIndex === index;\n\n  return (\n    <BaseBox\n      // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n      {...makeAccessible({ role: 'heading', level: 3 })}\n      width=\"100%\"\n    >\n      <StyledAccordionButton\n        isExpanded={isItemExpanded}\n        onClick={onClick}\n        {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n        {...metaAttribute({ name: MetaConstants.AccordionButton })}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"flex-start\" marginRight=\"spacing.4\">\n          {_index}\n          {_icon}\n          <Text size=\"large\" weight=\"semibold\" as=\"span\">\n            {children}\n          </Text>\n        </BaseBox>\n        <CollapsibleChevronIcon color=\"currentColor\" size=\"large\" />\n      </StyledAccordionButton>\n    </BaseBox>\n  );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n  componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","children","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","toggleCollapse","onClick","_index","_jsxs","Text","size","weight","marginRight","as","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","width","StyledAccordionButton","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","display","flexDirection","alignItems","CollapsibleChevronIcon","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/development/components/Accordion/AccordionItem.js

@@ -54,7 +54,7 @@ var AccordionItem = function AccordionItem(_ref) {
   var isExpanded = expandedIndex === _index;
   var isDefaultExpanded = defaultExpandedIndex === _index;
   var _description = description && /*#__PURE__*/jsx(Text, {
-    type: "subtle",
+    color: "interactive.text.gray.subtle",
     children: description
   });
   var handleExpandChange = function handleExpandChange(_ref2) {

package/build/lib/web/development/components/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { useAccordion } from './AccordionContext';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   */\n  title: string;\n\n  /**\n   * Body text content\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst BLANK_SPACE = ' ';\n\n/**\n * On React Native if the `AccordionItem` has a lengthy description which renders a `Text` spanning multiple lines,\n * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).\n * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.\n *\n * Rendering a blank `Text` at the end seems to fix all this 🤯\n */\nconst reactNativeMultilineTextOverflowFix = (\n  // make this hidden from screen readers\n  <BaseBox {...makeAccessible({ hidden: true })}>\n    <Text>{BLANK_SPACE}</Text>\n  </BaseBox>\n);\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const { expandedIndex, onExpandChange, defaultExpandedIndex } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n\n  const _description = description && <Text type=\"subtle\">{description}</Text>;\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  const collapsibleBodyContent = isReactNative() ? (\n    <BaseBox marginX=\"spacing.5\">\n      {_description}\n      <BaseBox marginTop={description && children ? 'spacing.5' : 'spacing.0'}>{children}</BaseBox>\n      {reactNativeMultilineTextOverflowFix}\n    </BaseBox>\n  ) : (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"spacing.5\"\n      marginBottom=\"spacing.5\"\n      marginX=\"spacing.5\"\n    >\n      {_description}\n      {children}\n    </BaseBox>\n  );\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n      <Collapsible\n        isExpanded={isExpanded}\n        defaultIsExpanded={isDefaultExpanded}\n        onExpandChange={handleExpandChange}\n        // Accordion has its own width restrictions\n        _shouldApplyWidthRestrictions={false}\n      >\n        <AccordionButton index={_index} icon={icon}>\n          {title}\n        </AccordionButton>\n        <CollapsibleBody\n          // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n          width={isReactNative() ? '100%' : undefined}\n        >\n          {collapsibleBodyContent}\n        </CollapsibleBody>\n      </Collapsible>\n      <Divider />\n    </BaseBox>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["BLANK_SPACE","reactNativeMultilineTextOverflowFix","_jsx","BaseBox","_objectSpread","makeAccessible","hidden","children","Text","AccordionItem","_ref","title","description","icon","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","isExpanded","isDefaultExpanded","_description","type","handleExpandChange","_ref2","collapsibleBodyContent","isReactNative","_jsxs","marginX","marginTop","display","flexDirection","gap","marginBottom","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","AccordionButton","index","CollapsibleBody","width","undefined","Divider"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { useAccordion } from './AccordionContext';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   */\n  title: string;\n\n  /**\n   * Body text content\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst BLANK_SPACE = ' ';\n\n/**\n * On React Native if the `AccordionItem` has a lengthy description which renders a `Text` spanning multiple lines,\n * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).\n * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.\n *\n * Rendering a blank `Text` at the end seems to fix all this 🤯\n */\nconst reactNativeMultilineTextOverflowFix = (\n  // make this hidden from screen readers\n  <BaseBox {...makeAccessible({ hidden: true })}>\n    <Text>{BLANK_SPACE}</Text>\n  </BaseBox>\n);\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const { expandedIndex, onExpandChange, defaultExpandedIndex } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n\n  const _description = description && (\n    <Text color=\"interactive.text.gray.subtle\">{description}</Text>\n  );\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  const collapsibleBodyContent = isReactNative() ? (\n    <BaseBox marginX=\"spacing.5\">\n      {_description}\n      <BaseBox marginTop={description && children ? 'spacing.5' : 'spacing.0'}>{children}</BaseBox>\n      {reactNativeMultilineTextOverflowFix}\n    </BaseBox>\n  ) : (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"spacing.5\"\n      marginBottom=\"spacing.5\"\n      marginX=\"spacing.5\"\n    >\n      {_description}\n      {children}\n    </BaseBox>\n  );\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n      <Collapsible\n        isExpanded={isExpanded}\n        defaultIsExpanded={isDefaultExpanded}\n        onExpandChange={handleExpandChange}\n        // Accordion has its own width restrictions\n        _shouldApplyWidthRestrictions={false}\n      >\n        <AccordionButton index={_index} icon={icon}>\n          {title}\n        </AccordionButton>\n        <CollapsibleBody\n          // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n          width={isReactNative() ? '100%' : undefined}\n        >\n          {collapsibleBodyContent}\n        </CollapsibleBody>\n      </Collapsible>\n      <Divider />\n    </BaseBox>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["BLANK_SPACE","reactNativeMultilineTextOverflowFix","_jsx","BaseBox","_objectSpread","makeAccessible","hidden","children","Text","AccordionItem","_ref","title","description","icon","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","isExpanded","isDefaultExpanded","_description","color","handleExpandChange","_ref2","collapsibleBodyContent","isReactNative","_jsxs","marginX","marginTop","display","flexDirection","gap","marginBottom","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","AccordionButton","index","CollapsibleBody","width","undefined","Divider"],"mappings":"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"}

package/build/lib/web/development/components/Accordion/StyledAccordionButton.web.js

@@ -2,7 +2,9 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
 import { getCommonAccordionButtonStyles, getBackgroundColor, getTransitionDuration, getTransitionEasing } from './commonStyles.js';
 import '../../utils/index.js';
+import '../../utils/getFocusRingStyles/index.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
+import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -23,7 +25,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
     transitionDuration: castWebType(getTransitionDuration(theme)),
     transitionTimingFunction: castWebType(getTransitionEasing(theme)),
     cursor: 'pointer',
-    color: theme.colors.surface.action.icon["default"].lowContrast,
+    color: theme.colors.interactive.icon.gray[isExpanded ? 'subtle' : 'muted'],
     width: '100%',
     border: 'none',
     textAlign: 'left',
@@ -32,18 +34,15 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
         theme: theme,
         isExpanded: isExpanded,
         isActive: true
-      })
+      }),
+      color: theme.colors.interactive.icon.gray.subtle
     },
-    '&:hover': {
-      color: theme.colors.surface.action.icon.hover.lowContrast
-    },
-    '&:focus-visible': {
-      outline: 'none',
-      boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
+    '&:focus-visible': _objectSpread(_objectSpread({}, getFocusRingStyles({
+      theme: theme
+    })), {}, {
       // only need border radius on the focus ring
-      borderRadius: theme.border.radius.small,
-      color: theme.colors.surface.action.icon.focus.lowContrast
-    }
+      borderRadius: theme.border.radius.small
+    })
   });
 });
 

package/build/lib/web/development/components/Accordion/StyledAccordionButton.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledAccordionButton.web.js","sources":["../../../../../../src/components/Accordion/StyledAccordionButton.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAccordionButtonProps } from './types';\nimport {\n  getBackgroundColor,\n  getCommonAccordionButtonStyles,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { castWebType } from '~utils';\n\nconst StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props) => {\n  const { theme, isExpanded } = props;\n  const commonStyles = getCommonAccordionButtonStyles(props);\n  return {\n    ...commonStyles,\n    backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: false }),\n    transitionProperty: 'background-color, box-shadow, border-radius, color',\n    transitionDuration: castWebType(getTransitionDuration(theme)),\n    transitionTimingFunction: castWebType(getTransitionEasing(theme)),\n    cursor: 'pointer',\n    color: theme.colors.surface.action.icon.default.lowContrast,\n    width: '100%',\n    border: 'none',\n    textAlign: 'left',\n\n    '&:hover, &:focus-visible': {\n      backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: true }),\n    },\n\n    '&:hover': {\n      color: theme.colors.surface.action.icon.hover.lowContrast,\n    },\n\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,\n      // only need border radius on the focus ring\n      borderRadius: theme.border.radius.small,\n      color: theme.colors.surface.action.icon.focus.lowContrast,\n    },\n  };\n});\n\nexport { StyledAccordionButton };\n"],"names":["StyledAccordionButton","styled","button","withConfig","displayName","componentId","props","theme","isExpanded","commonStyles","getCommonAccordionButtonStyles","_objectSpread","backgroundColor","getBackgroundColor","isActive","transitionProperty","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","cursor","color","colors","surface","action","icon","lowContrast","width","border","textAlign","hover","outline","boxShadow","concat","brand","primary","borderRadius","radius","small","focus"],"mappings":";;;;;;;;AAUA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAA6B,CAAA,CAAA,UAACC,KAAK,EAAK;AACjF,EAAA,IAAQC,KAAK,GAAiBD,KAAK,CAA3BC,KAAK;IAAEC,UAAU,GAAKF,KAAK,CAApBE,UAAU,CAAA;AACzB,EAAA,IAAMC,YAAY,GAAGC,8BAA8B,CAACJ,KAAK,CAAC,CAAA;AAC1D,EAAA,OAAAK,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKF,YAAY,CAAA,EAAA,EAAA,EAAA;IACfG,eAAe,EAAEC,kBAAkB,CAAC;AAAEN,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,UAAU,EAAVA,UAAU;AAAEM,MAAAA,QAAQ,EAAE,KAAA;AAAM,KAAC,CAAC;AAC3EC,IAAAA,kBAAkB,EAAE,oDAAoD;AACxEC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,qBAAqB,CAACX,KAAK,CAAC,CAAC;AAC7DY,IAAAA,wBAAwB,EAAEF,WAAW,CAACG,mBAAmB,CAACb,KAAK,CAAC,CAAC;AACjEc,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAAQ,SAAA,CAAA,CAACC,WAAW;AAC3DC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,SAAS,EAAE,MAAM;AAEjB,IAAA,0BAA0B,EAAE;MAC1BlB,eAAe,EAAEC,kBAAkB,CAAC;AAAEN,QAAAA,KAAK,EAALA,KAAK;AAAEC,QAAAA,UAAU,EAAVA,UAAU;AAAEM,QAAAA,QAAQ,EAAE,IAAA;OAAM,CAAA;KAC1E;AAED,IAAA,SAAS,EAAE;AACTQ,MAAAA,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACK,KAAK,CAACJ,WAAAA;KAC/C;AAED,IAAA,iBAAiB,EAAE;AACjBK,MAAAA,OAAO,EAAE,MAAM;AACfC,MAAAA,SAAS,EAAAC,kBAAAA,CAAAA,MAAA,CAAqB3B,KAAK,CAACgB,MAAM,CAACY,KAAK,CAACC,OAAO,CAAC,GAAG,CAAC,CAAE;AAC/D;AACAC,MAAAA,YAAY,EAAE9B,KAAK,CAACsB,MAAM,CAACS,MAAM,CAACC,KAAK;AACvCjB,MAAAA,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACc,KAAK,CAACb,WAAAA;AAChD,KAAA;AAAC,GAAA,CAAA,CAAA;AAEL,CAAC;;;;"}
+{"version":3,"file":"StyledAccordionButton.web.js","sources":["../../../../../../src/components/Accordion/StyledAccordionButton.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAccordionButtonProps } from './types';\nimport {\n  getBackgroundColor,\n  getCommonAccordionButtonStyles,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { castWebType } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props) => {\n  const { theme, isExpanded } = props;\n  const commonStyles = getCommonAccordionButtonStyles(props);\n  return {\n    ...commonStyles,\n    backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: false }),\n    transitionProperty: 'background-color, box-shadow, border-radius, color',\n    transitionDuration: castWebType(getTransitionDuration(theme)),\n    transitionTimingFunction: castWebType(getTransitionEasing(theme)),\n    cursor: 'pointer',\n    color: theme.colors.interactive.icon.gray[isExpanded ? 'subtle' : 'muted'],\n    width: '100%',\n    border: 'none',\n    textAlign: 'left',\n\n    '&:hover, &:focus-visible': {\n      backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: true }),\n      color: theme.colors.interactive.icon.gray.subtle,\n    },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      // only need border radius on the focus ring\n      borderRadius: theme.border.radius.small,\n    },\n  };\n});\n\nexport { StyledAccordionButton };\n"],"names":["StyledAccordionButton","styled","button","withConfig","displayName","componentId","props","theme","isExpanded","commonStyles","getCommonAccordionButtonStyles","_objectSpread","backgroundColor","getBackgroundColor","isActive","transitionProperty","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","cursor","color","colors","interactive","icon","gray","width","border","textAlign","subtle","getFocusRingStyles","borderRadius","radius","small"],"mappings":";;;;;;;;;;AAWA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAA6B,CAAA,CAAA,UAACC,KAAK,EAAK;AACjF,EAAA,IAAQC,KAAK,GAAiBD,KAAK,CAA3BC,KAAK;IAAEC,UAAU,GAAKF,KAAK,CAApBE,UAAU,CAAA;AACzB,EAAA,IAAMC,YAAY,GAAGC,8BAA8B,CAACJ,KAAK,CAAC,CAAA;AAC1D,EAAA,OAAAK,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKF,YAAY,CAAA,EAAA,EAAA,EAAA;IACfG,eAAe,EAAEC,kBAAkB,CAAC;AAAEN,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,UAAU,EAAVA,UAAU;AAAEM,MAAAA,QAAQ,EAAE,KAAA;AAAM,KAAC,CAAC;AAC3EC,IAAAA,kBAAkB,EAAE,oDAAoD;AACxEC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,qBAAqB,CAACX,KAAK,CAAC,CAAC;AAC7DY,IAAAA,wBAAwB,EAAEF,WAAW,CAACG,mBAAmB,CAACb,KAAK,CAAC,CAAC;AACjEc,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,IAAI,CAACC,IAAI,CAAClB,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1EmB,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,SAAS,EAAE,MAAM;AAEjB,IAAA,0BAA0B,EAAE;MAC1BjB,eAAe,EAAEC,kBAAkB,CAAC;AAAEN,QAAAA,KAAK,EAALA,KAAK;AAAEC,QAAAA,UAAU,EAAVA,UAAU;AAAEM,QAAAA,QAAQ,EAAE,IAAA;AAAK,OAAC,CAAC;MAC1EQ,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,IAAI,CAACC,IAAI,CAACI,MAAAA;KAC3C;AACD,IAAA,iBAAiB,EAAAnB,aAAA,CAAAA,aAAA,CAAA,EAAA,EACZoB,kBAAkB,CAAC;AAAExB,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAChC;AACAyB,MAAAA,YAAY,EAAEzB,KAAK,CAACqB,MAAM,CAACK,MAAM,CAACC,KAAAA;AAAK,KAAA,CAAA;AACxC,GAAA,CAAA,CAAA;AAEL,CAAC;;;;"}

package/build/lib/web/development/components/Accordion/commonStyles.js

@@ -14,15 +14,12 @@ var getBackgroundColor = function getBackgroundColor(_ref) {
   var theme = _ref.theme,
     isExpanded = _ref.isExpanded,
     isActive = _ref.isActive;
-  var gray = theme.colors.brand.gray;
+  var gray = theme.colors.interactive.background.gray;
   if (isActive) {
-    if (isExpanded) {
-      return gray.a100.lowContrast;
-    }
-    return gray.a50.lowContrast;
+    return gray.faded;
   }
   if (isExpanded) {
-    return gray.a50.lowContrast;
+    return gray["default"];
   }
   var TRANSPARENT = 'hsla(0, 0%, 100%, 0)';
   return TRANSPARENT;

package/build/lib/web/development/components/Accordion/commonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"commonStyles.js","sources":["../../../../../../src/components/Accordion/commonStyles.ts"],"sourcesContent":["import type { CSSObject, StyledProps } from 'styled-components';\nimport type { StyledAccordionButtonProps } from './types';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionDuration = (theme: Theme) => makeMotionTime(theme.motion.duration['2xquick']);\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionEasing = (theme: Theme) => theme.motion.easing.standard.effective;\n\nconst getBackgroundColor = ({\n  theme,\n  isExpanded,\n  isActive,\n}: {\n  theme: Theme;\n  isExpanded: boolean;\n  isActive: boolean;\n}): string => {\n  const { gray } = theme.colors.brand;\n\n  if (isActive) {\n    if (isExpanded) {\n      return gray.a100.lowContrast;\n    }\n    return gray.a50.lowContrast;\n  }\n\n  if (isExpanded) {\n    return gray.a50.lowContrast;\n  }\n\n  const TRANSPARENT = 'hsla(0, 0%, 100%, 0)';\n  return TRANSPARENT;\n};\n\nconst getCommonAccordionButtonStyles = (\n  props: StyledProps<StyledAccordionButtonProps>,\n): CSSObject => {\n  const { theme } = props;\n\n  return {\n    padding: theme.spacing[5],\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  };\n};\n\nexport {\n  getTransitionDuration,\n  getTransitionEasing,\n  getBackgroundColor,\n  getCommonAccordionButtonStyles,\n};\n"],"names":["getTransitionDuration","theme","makeMotionTime","motion","duration","getTransitionEasing","easing","standard","effective","getBackgroundColor","_ref","isExpanded","isActive","gray","colors","brand","a100","lowContrast","a50","TRANSPARENT","getCommonAccordionButtonStyles","props","padding","spacing","display","flexDirection","alignItems","justifyContent"],"mappings":";;;AAKA;AACA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,KAAY,EAAA;EAAA,OAAKC,cAAc,CAACD,KAAK,CAACE,MAAM,CAACC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAA;AAAA,EAAA;;AAEhG;AACA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIJ,KAAY,EAAA;EAAA,OAAKA,KAAK,CAACE,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA;AAAA,EAAA;AAEpF,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAQV;AAAA,EAAA,IAPZT,KAAK,GAAAS,IAAA,CAALT,KAAK;IACLU,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAA;EAMR,IAAQC,IAAI,GAAKZ,KAAK,CAACa,MAAM,CAACC,KAAK,CAA3BF,IAAI,CAAA;AAEZ,EAAA,IAAID,QAAQ,EAAE;AACZ,IAAA,IAAID,UAAU,EAAE;AACd,MAAA,OAAOE,IAAI,CAACG,IAAI,CAACC,WAAW,CAAA;AAC9B,KAAA;AACA,IAAA,OAAOJ,IAAI,CAACK,GAAG,CAACD,WAAW,CAAA;AAC7B,GAAA;AAEA,EAAA,IAAIN,UAAU,EAAE;AACd,IAAA,OAAOE,IAAI,CAACK,GAAG,CAACD,WAAW,CAAA;AAC7B,GAAA;EAEA,IAAME,WAAW,GAAG,sBAAsB,CAAA;AAC1C,EAAA,OAAOA,WAAW,CAAA;AACpB,EAAC;AAED,IAAMC,8BAA8B,GAAG,SAAjCA,8BAA8BA,CAClCC,KAA8C,EAChC;AACd,EAAA,IAAQpB,KAAK,GAAKoB,KAAK,CAAfpB,KAAK,CAAA;EAEb,OAAO;AACLqB,IAAAA,OAAO,EAAErB,KAAK,CAACsB,OAAO,CAAC,CAAC,CAAC;AACzBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,aAAa,EAAE,KAAK;AACpBC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,eAAA;GACjB,CAAA;AACH;;;;"}
+{"version":3,"file":"commonStyles.js","sources":["../../../../../../src/components/Accordion/commonStyles.ts"],"sourcesContent":["import type { CSSObject, StyledProps } from 'styled-components';\nimport type { StyledAccordionButtonProps } from './types';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionDuration = (theme: Theme) => makeMotionTime(theme.motion.duration['2xquick']);\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionEasing = (theme: Theme) => theme.motion.easing.standard.effective;\n\nconst getBackgroundColor = ({\n  theme,\n  isExpanded,\n  isActive,\n}: {\n  theme: Theme;\n  isExpanded: boolean;\n  isActive: boolean;\n}): string => {\n  const { gray } = theme.colors.interactive.background;\n\n  if (isActive) {\n    return gray.faded;\n  }\n\n  if (isExpanded) {\n    return gray.default;\n  }\n\n  const TRANSPARENT = 'hsla(0, 0%, 100%, 0)';\n  return TRANSPARENT;\n};\n\nconst getCommonAccordionButtonStyles = (\n  props: StyledProps<StyledAccordionButtonProps>,\n): CSSObject => {\n  const { theme } = props;\n\n  return {\n    padding: theme.spacing[5],\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  };\n};\n\nexport {\n  getTransitionDuration,\n  getTransitionEasing,\n  getBackgroundColor,\n  getCommonAccordionButtonStyles,\n};\n"],"names":["getTransitionDuration","theme","makeMotionTime","motion","duration","getTransitionEasing","easing","standard","effective","getBackgroundColor","_ref","isExpanded","isActive","gray","colors","interactive","background","faded","TRANSPARENT","getCommonAccordionButtonStyles","props","padding","spacing","display","flexDirection","alignItems","justifyContent"],"mappings":";;;AAKA;AACA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,KAAY,EAAA;EAAA,OAAKC,cAAc,CAACD,KAAK,CAACE,MAAM,CAACC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAA;AAAA,EAAA;;AAEhG;AACA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIJ,KAAY,EAAA;EAAA,OAAKA,KAAK,CAACE,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA;AAAA,EAAA;AAEpF,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAQV;AAAA,EAAA,IAPZT,KAAK,GAAAS,IAAA,CAALT,KAAK;IACLU,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAA;EAMR,IAAQC,IAAI,GAAKZ,KAAK,CAACa,MAAM,CAACC,WAAW,CAACC,UAAU,CAA5CH,IAAI,CAAA;AAEZ,EAAA,IAAID,QAAQ,EAAE;IACZ,OAAOC,IAAI,CAACI,KAAK,CAAA;AACnB,GAAA;AAEA,EAAA,IAAIN,UAAU,EAAE;AACd,IAAA,OAAOE,IAAI,CAAQ,SAAA,CAAA,CAAA;AACrB,GAAA;EAEA,IAAMK,WAAW,GAAG,sBAAsB,CAAA;AAC1C,EAAA,OAAOA,WAAW,CAAA;AACpB,EAAC;AAED,IAAMC,8BAA8B,GAAG,SAAjCA,8BAA8BA,CAClCC,KAA8C,EAChC;AACd,EAAA,IAAQnB,KAAK,GAAKmB,KAAK,CAAfnB,KAAK,CAAA;EAEb,OAAO;AACLoB,IAAAA,OAAO,EAAEpB,KAAK,CAACqB,OAAO,CAAC,CAAC,CAAC;AACzBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,aAAa,EAAE,KAAK;AACpBC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,eAAA;GACjB,CAAA;AACH;;;;"}

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

@@ -11,10 +11,8 @@ import '../../utils/makeAccessible/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
-import '../../utils/logger/index.js';
 import { dropdownComponentIds } from '../Dropdown/dropdownComponentIds.js';
 import { jsx } from 'react/jsx-runtime';
-import { throwBladeError } from '../../utils/logger/logger.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
@@ -23,25 +21,8 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ActionListContext = /*#__PURE__*/React__default.createContext({
-  surfaceLevel: 2
-});
-var useActionListContext = function useActionListContext() {
-  var context = React__default.useContext(ActionListContext);
-  if (true) {
-    if (!context) {
-      throwBladeError({
-        message: 'useActionListContext has to be called inside ActionListContext.Provider',
-        moduleName: 'ActionList'
-      });
-    }
-  }
-  return context;
-};
 var _ActionList = function _ActionList(_ref) {
   var children = _ref.children,
-    _ref$surfaceLevel = _ref.surfaceLevel,
-    surfaceLevel = _ref$surfaceLevel === void 0 ? 2 : _ref$surfaceLevel,
     testID = _ref.testID;
   var _useDropdown = useDropdown(),
     setOptions = _useDropdown.setOptions,
@@ -63,11 +44,6 @@ var _ActionList = function _ActionList(_ref) {
     setOptions(actionListOptions);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionListOptions]);
-  var actionListContextValue = React__default.useMemo(function () {
-    return {
-      surfaceLevel: surfaceLevel
-    };
-  }, [surfaceLevel]);
   if (filteredValues.length <= 0 && dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete) {
     return /*#__PURE__*/jsx(ActionListNoResults, {});
   }
@@ -80,35 +56,32 @@ var _ActionList = function _ActionList(_ref) {
   // 1. We don't render the box wrapper styles which includes shadows, padding, border etc
   // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside
   // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.
-  return /*#__PURE__*/jsx(ActionListContext.Provider, {
-    value: actionListContextValue,
-    children: isInBottomSheet ? /*#__PURE__*/jsx(ActionListBox, {
+  return isInBottomSheet ? /*#__PURE__*/jsx(ActionListBox, {
+    isInBottomSheet: isInBottomSheet,
+    actionListItemWrapperRole: actionListItemWrapperRole,
+    childrenWithId: childrenWithId,
+    sectionData: sectionData,
+    isMultiSelectable: isMultiSelectable,
+    ref: actionListItemRef
+  }) : /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    id: "".concat(dropdownBaseId, "-actionlist")
+  }, makeAccessible({
+    role: actionListContainerRole,
+    multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,
+    labelledBy: "".concat(dropdownBaseId, "-label")
+  })), metaAttribute({
+    name: MetaConstants.ActionList,
+    testID: testID
+  })), {}, {
+    children: /*#__PURE__*/jsx(ActionListBox, {
       isInBottomSheet: isInBottomSheet,
       actionListItemWrapperRole: actionListItemWrapperRole,
       childrenWithId: childrenWithId,
       sectionData: sectionData,
       isMultiSelectable: isMultiSelectable,
       ref: actionListItemRef
-    }) : /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
-      id: "".concat(dropdownBaseId, "-actionlist")
-    }, makeAccessible({
-      role: actionListContainerRole,
-      multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,
-      labelledBy: "".concat(dropdownBaseId, "-label")
-    })), metaAttribute({
-      name: MetaConstants.ActionList,
-      testID: testID
-    })), {}, {
-      children: /*#__PURE__*/jsx(ActionListBox, {
-        isInBottomSheet: isInBottomSheet,
-        actionListItemWrapperRole: actionListItemWrapperRole,
-        childrenWithId: childrenWithId,
-        sectionData: sectionData,
-        isMultiSelectable: isMultiSelectable,
-        ref: actionListItemRef
-      })
-    }))
-  });
+    })
+  }));
 };
 
 /**
@@ -147,5 +120,5 @@ var ActionList = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__defa
   componentId: componentIds.ActionList
 });
 
-export { ActionList, useActionListContext };
+export { ActionList };
 //# sourceMappingURL=ActionList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionList.js","sources":["../../../../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { getActionListContainerRole, getActionListItemWrapperRole } from './getA11yRoles';\nimport { getActionListProperties } from './actionListUtils';\nimport { ActionListBox } from './ActionListBox';\nimport { componentIds } from './componentIds';\nimport { ActionListNoResults } from './ActionListNoResults';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { TestID } from '~utils/types';\nimport type { SurfaceLevels } from '~tokens/theme/theme';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { throwBladeError } from '~utils/logger';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\n\ntype ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;\nconst ActionListContext = React.createContext<ActionListContextProp>({ surfaceLevel: 2 });\nconst useActionListContext = (): ActionListContextProp => {\n  const context = React.useContext(ActionListContext);\n\n  if (__DEV__) {\n    if (!context) {\n      throwBladeError({\n        message: 'useActionListContext has to be called inside ActionListContext.Provider',\n        moduleName: 'ActionList',\n      });\n    }\n  }\n  return context;\n};\n\ntype ActionListProps = {\n  children: React.ReactNode[];\n  /**\n   * Decides the backgroundColor of ActionList\n   */\n  surfaceLevel?: Exclude<SurfaceLevels, 1>;\n} & TestID;\n\nconst _ActionList = ({\n  children,\n  surfaceLevel = 2,\n  testID,\n}: ActionListProps): React.ReactElement => {\n  const {\n    setOptions,\n    actionListItemRef,\n    selectionType,\n    dropdownBaseId,\n    dropdownTriggerer,\n    hasFooterAction,\n    filteredValues,\n  } = useDropdown();\n\n  const { isInBottomSheet } = useBottomSheetContext();\n\n  const { sectionData, childrenWithId, actionListOptions } = React.useMemo(\n    () => getActionListProperties(children),\n    [children],\n  );\n\n  React.useEffect(() => {\n    setOptions(actionListOptions);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [actionListOptions]);\n  const actionListContextValue = React.useMemo(() => ({ surfaceLevel }), [surfaceLevel]);\n\n  if (\n    filteredValues.length <= 0 &&\n    dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete\n  ) {\n    return <ActionListNoResults />;\n  }\n\n  const actionListContainerRole = getActionListContainerRole(hasFooterAction, dropdownTriggerer);\n  const actionListItemWrapperRole = getActionListItemWrapperRole(\n    hasFooterAction,\n    dropdownTriggerer,\n  );\n  const isMultiSelectable = selectionType === 'multiple';\n\n  // If we are inside BottomSheet, we don't render The StyledActionList wrapper\n  // This is to ensure:\n  // 1. We don't render the box wrapper styles which includes shadows, padding, border etc\n  // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside\n  // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.\n  return (\n    <ActionListContext.Provider value={actionListContextValue}>\n      {isInBottomSheet ? (\n        <ActionListBox\n          isInBottomSheet={isInBottomSheet}\n          actionListItemWrapperRole={actionListItemWrapperRole}\n          childrenWithId={childrenWithId}\n          sectionData={sectionData}\n          isMultiSelectable={isMultiSelectable}\n          ref={actionListItemRef as any}\n        />\n      ) : (\n        <BaseBox\n          id={`${dropdownBaseId}-actionlist`}\n          {...makeAccessible({\n            role: actionListContainerRole,\n            multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,\n            labelledBy: `${dropdownBaseId}-label`,\n          })}\n          {...metaAttribute({ name: MetaConstants.ActionList, testID })}\n        >\n          <ActionListBox\n            isInBottomSheet={isInBottomSheet}\n            actionListItemWrapperRole={actionListItemWrapperRole}\n            childrenWithId={childrenWithId}\n            sectionData={sectionData}\n            isMultiSelectable={isMultiSelectable}\n            ref={actionListItemRef as any}\n          />\n        </BaseBox>\n      )}\n    </ActionListContext.Provider>\n  );\n};\n\n/**\n * ### ActionList\n *\n * List of multiple actionable items. Can be used as menu items inside `Dropdown`,\n * `BottomSheet` and as selectable items when combined with `SelectInput`\n *\n * #### Usage\n *\n * ```jsx\n * <Dropdown>\n *  <SelectInput label=\"Select Action\" />\n *  <DropdownOverlay>\n *    <DropdownHeader title=\"Header Title\" />\n *    <ActionList>\n *      <ActionListItem\n *        title=\"Home\"\n *        value=\"home\"\n *        leading={<ActionListItemIcon icon={HomeIcon} />}\n *      />\n *      <ActionListItem\n *        title=\"Pricing\"\n *        value=\"pricing\"\n *        leading={<ActionListItemAsset src=\"https://flagcdn.com/w20/in.png\" alt=\"India Flag\" />}\n *      />\n *    </ActionList>\n *    <DropdownFooter><Button>Apply</Button></DropdownFooter>\n *  </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n */\nconst ActionList = assignWithoutSideEffects(React.memo(_ActionList), {\n  displayName: componentIds.ActionList,\n  componentId: componentIds.ActionList,\n});\n\nexport type { ActionListProps };\nexport { ActionList, useActionListContext };\n"],"names":["ActionListContext","React","createContext","surfaceLevel","useActionListContext","context","useContext","throwBladeError","message","moduleName","_ActionList","_ref","children","_ref$surfaceLevel","testID","_useDropdown","useDropdown","setOptions","actionListItemRef","selectionType","dropdownBaseId","dropdownTriggerer","hasFooterAction","filteredValues","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_React$useMemo","useMemo","getActionListProperties","sectionData","childrenWithId","actionListOptions","useEffect","actionListContextValue","length","dropdownComponentIds","triggers","AutoComplete","_jsx","ActionListNoResults","actionListContainerRole","getActionListContainerRole","actionListItemWrapperRole","getActionListItemWrapperRole","isMultiSelectable","Provider","value","ActionListBox","ref","BaseBox","_objectSpread","id","concat","makeAccessible","role","multiSelectable","undefined","labelledBy","metaAttribute","name","MetaConstants","ActionList","assignWithoutSideEffects","memo","displayName","componentIds","componentId"],"mappings":"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"}
+{"version":3,"file":"ActionList.js","sources":["../../../../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { getActionListContainerRole, getActionListItemWrapperRole } from './getA11yRoles';\nimport { getActionListProperties } from './actionListUtils';\nimport { ActionListBox } from './ActionListBox';\nimport { componentIds } from './componentIds';\nimport { ActionListNoResults } from './ActionListNoResults';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { TestID } from '~utils/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\n\ntype ActionListProps = {\n  children: React.ReactNode[];\n} & TestID;\n\nconst _ActionList = ({ children, testID }: ActionListProps): React.ReactElement => {\n  const {\n    setOptions,\n    actionListItemRef,\n    selectionType,\n    dropdownBaseId,\n    dropdownTriggerer,\n    hasFooterAction,\n    filteredValues,\n  } = useDropdown();\n\n  const { isInBottomSheet } = useBottomSheetContext();\n\n  const { sectionData, childrenWithId, actionListOptions } = React.useMemo(\n    () => getActionListProperties(children),\n    [children],\n  );\n\n  React.useEffect(() => {\n    setOptions(actionListOptions);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [actionListOptions]);\n\n  if (\n    filteredValues.length <= 0 &&\n    dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete\n  ) {\n    return <ActionListNoResults />;\n  }\n\n  const actionListContainerRole = getActionListContainerRole(hasFooterAction, dropdownTriggerer);\n  const actionListItemWrapperRole = getActionListItemWrapperRole(\n    hasFooterAction,\n    dropdownTriggerer,\n  );\n  const isMultiSelectable = selectionType === 'multiple';\n\n  // If we are inside BottomSheet, we don't render The StyledActionList wrapper\n  // This is to ensure:\n  // 1. We don't render the box wrapper styles which includes shadows, padding, border etc\n  // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside\n  // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.\n  return isInBottomSheet ? (\n    <ActionListBox\n      isInBottomSheet={isInBottomSheet}\n      actionListItemWrapperRole={actionListItemWrapperRole}\n      childrenWithId={childrenWithId}\n      sectionData={sectionData}\n      isMultiSelectable={isMultiSelectable}\n      ref={actionListItemRef as any}\n    />\n  ) : (\n    <BaseBox\n      id={`${dropdownBaseId}-actionlist`}\n      {...makeAccessible({\n        role: actionListContainerRole,\n        multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,\n        labelledBy: `${dropdownBaseId}-label`,\n      })}\n      {...metaAttribute({ name: MetaConstants.ActionList, testID })}\n    >\n      <ActionListBox\n        isInBottomSheet={isInBottomSheet}\n        actionListItemWrapperRole={actionListItemWrapperRole}\n        childrenWithId={childrenWithId}\n        sectionData={sectionData}\n        isMultiSelectable={isMultiSelectable}\n        ref={actionListItemRef as any}\n      />\n    </BaseBox>\n  );\n};\n\n/**\n * ### ActionList\n *\n * List of multiple actionable items. Can be used as menu items inside `Dropdown`,\n * `BottomSheet` and as selectable items when combined with `SelectInput`\n *\n * #### Usage\n *\n * ```jsx\n * <Dropdown>\n *  <SelectInput label=\"Select Action\" />\n *  <DropdownOverlay>\n *    <DropdownHeader title=\"Header Title\" />\n *    <ActionList>\n *      <ActionListItem\n *        title=\"Home\"\n *        value=\"home\"\n *        leading={<ActionListItemIcon icon={HomeIcon} />}\n *      />\n *      <ActionListItem\n *        title=\"Pricing\"\n *        value=\"pricing\"\n *        leading={<ActionListItemAsset src=\"https://flagcdn.com/w20/in.png\" alt=\"India Flag\" />}\n *      />\n *    </ActionList>\n *    <DropdownFooter><Button>Apply</Button></DropdownFooter>\n *  </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n */\nconst ActionList = assignWithoutSideEffects(React.memo(_ActionList), {\n  displayName: componentIds.ActionList,\n  componentId: componentIds.ActionList,\n});\n\nexport type { ActionListProps };\nexport { ActionList };\n"],"names":["_ActionList","_ref","children","testID","_useDropdown","useDropdown","setOptions","actionListItemRef","selectionType","dropdownBaseId","dropdownTriggerer","hasFooterAction","filteredValues","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_React$useMemo","React","useMemo","getActionListProperties","sectionData","childrenWithId","actionListOptions","useEffect","length","dropdownComponentIds","triggers","AutoComplete","_jsx","ActionListNoResults","actionListContainerRole","getActionListContainerRole","actionListItemWrapperRole","getActionListItemWrapperRole","isMultiSelectable","ActionListBox","ref","BaseBox","_objectSpread","id","concat","makeAccessible","role","multiSelectable","undefined","labelledBy","metaAttribute","name","MetaConstants","ActionList","assignWithoutSideEffects","memo","displayName","componentIds","componentId"],"mappings":"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"}