@razorpay/blade 11.39.0 → 12.0.0

package/build/lib/web/development/tokens/global/motion.js

@@ -4,41 +4,35 @@ import { makeBezier } from '../../utils/makeBezier/makeBezier.web.js';
 // similar to EasingFactoryFn of `react-native-reanimated`
 
 var delay = {
-  '2xshort': 70,
-  xshort: 120,
-  "short": 180,
-  "long": 3000,
-  xlong: 5000
+  '2xquick': 80,
+  xquick: 160,
+  moderate: 280,
+  gentle: 480,
+  xgentle: 960,
+  "long": 2000,
+  xlong: 3000,
+  '2xlong': 5000
 };
 var duration = {
-  '2xquick': 70,
-  xquick: 150,
+  '2xquick': 80,
+  xquick: 160,
   quick: 200,
-  moderate: 250,
-  xmoderate: 300,
-  gentle: 400,
-  xgentle: 600,
-  '2xgentle': 900
+  moderate: 280,
+  xmoderate: 360,
+  gentle: 480,
+  xgentle: 640,
+  '2xgentle': 960
 };
 
 /* makeBezier returns a string of `cubic-bezier()` for web & a react-native-reanimated Easing Function of type `EasingFactoryFn` for native */
 var easing = {
-  standard: {
-    attentive: makeBezier(0.5, 0, 0.3, 1.5),
-    effective: makeBezier(0.3, 0, 0.2, 1),
-    revealing: makeBezier(0.5, 0, 0, 1),
-    wary: makeBezier(1, 0.5, 0, 0.5)
-  },
-  entrance: {
-    attentive: makeBezier(0.5, 0, 0.3, 1.5),
-    effective: makeBezier(0, 0, 0.2, 1),
-    revealing: makeBezier(0, 0, 0, 1)
-  },
-  exit: {
-    attentive: makeBezier(0.7, 0, 0.5, 1),
-    effective: makeBezier(0.17, 0, 1, 1),
-    revealing: makeBezier(0.5, 0, 1, 1)
-  }
+  linear: makeBezier(0, 0, 0, 0),
+  entrance: makeBezier(0, 0, 0.2, 1),
+  exit: makeBezier(0.17, 0, 1, 1),
+  standard: makeBezier(0.3, 0, 0.2, 1),
+  emphasized: makeBezier(0.5, 0, 0, 1),
+  overshoot: makeBezier(0.5, 0, 0.3, 1.5),
+  shake: makeBezier(1, 0.5, 0, 0.5)
 };
 var motion = {
   delay: delay,

package/build/lib/web/development/tokens/global/motion.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion.js","sources":["../../../../../../src/tokens/global/motion.ts"],"sourcesContent":["import type { DotNotationMotionStringToken } from '~utils/types';\nimport type { Platform } from '~utils';\nimport { makeBezier } from '~utils/makeBezier';\n\ntype Duration = {\n  /** `70` milliseconds */\n  '2xquick': 70;\n  /** `150` milliseconds */\n  xquick: 150;\n  /** `200` milliseconds */\n  quick: 200;\n  /** `250` milliseconds */\n  moderate: 250;\n  /** `300` milliseconds */\n  xmoderate: 300;\n  /** `400` milliseconds */\n  gentle: 400;\n  /** `600` milliseconds */\n  xgentle: 600;\n  /** `900` milliseconds */\n  '2xgentle': 900;\n};\n\ntype Delay = {\n  /** `70` milliseconds */\n  '2xshort': 70;\n  /** `120` milliseconds */\n  xshort: 120;\n  /** `180` milliseconds */\n  short: 180;\n  /** `3000` milliseconds */\n  long: 3000;\n  /** `5000` milliseconds */\n  xlong: 5000;\n};\n\nexport type EasingFactoryFn = { factory: () => (value: number) => number }; // similar to EasingFactoryFn of `react-native-reanimated`\nexport type EasingType<Value extends string> = Platform.Select<{\n  web: Value;\n  native: EasingFactoryFn;\n}>;\n\ntype Easing = {\n  /** Easings for all standard animations*/\n  standard: {\n    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;\n    /** `cubic-bezier(0.3, 0, 0.2, 1)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;\n    /** `cubic-bezier(0.5, 0, 0, 1)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;\n    /** `cubic-bezier(1, 0.5, 0, 0.5)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;\n  };\n  /** Easings for all entrance animations*/\n  entrance: {\n    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;\n    /** `cubic-bezier(0, 0, 0.2, 1)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;\n    /** `cubic-bezier(0, 0, 0, 1)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;\n  };\n  /** Easings for all exit animations*/\n  exit: {\n    /** `cubic-bezier(0.7, 0, 0.5, 1)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;\n    /** `cubic-bezier(0.17, 0, 1, 1)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;\n    /** `cubic-bezier(0.5, 0, 1, 1)`\n     *\n     *  Returns a `string` of `\"cubic-bezier(...)\"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */\n    revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;\n  };\n};\n\nexport type Motion = Readonly<{\n  delay: Delay;\n  duration: Duration;\n  easing: Easing;\n}>;\n\nexport type EasingString = `easing.${DotNotationMotionStringToken<Easing>}`;\nexport type DurationString = `duration.${keyof Duration}`;\nexport type DelayString = `delay.${keyof Delay}`;\n\nconst delay: Delay = {\n  '2xshort': 70,\n  xshort: 120,\n  short: 180,\n  long: 3000,\n  xlong: 5000,\n};\n\nconst duration: Duration = {\n  '2xquick': 70,\n  xquick: 150,\n  quick: 200,\n  moderate: 250,\n  xmoderate: 300,\n  gentle: 400,\n  xgentle: 600,\n  '2xgentle': 900,\n};\n\n/* makeBezier returns a string of `cubic-bezier()` for web & a react-native-reanimated Easing Function of type `EasingFactoryFn` for native */\nconst easing: Easing = {\n  standard: {\n    attentive: makeBezier(0.5, 0, 0.3, 1.5),\n    effective: makeBezier(0.3, 0, 0.2, 1),\n    revealing: makeBezier(0.5, 0, 0, 1),\n    wary: makeBezier(1, 0.5, 0, 0.5),\n  },\n  entrance: {\n    attentive: makeBezier(0.5, 0, 0.3, 1.5),\n    effective: makeBezier(0, 0, 0.2, 1),\n    revealing: makeBezier(0, 0, 0, 1),\n  },\n  exit: {\n    attentive: makeBezier(0.7, 0, 0.5, 1),\n    effective: makeBezier(0.17, 0, 1, 1),\n    revealing: makeBezier(0.5, 0, 1, 1),\n  },\n};\n\nexport const motion: Motion = {\n  delay,\n  duration,\n  easing,\n};\n"],"names":["delay","xshort","xlong","duration","xquick","quick","moderate","xmoderate","gentle","xgentle","easing","standard","attentive","makeBezier","effective","revealing","wary","entrance","exit","motion"],"mappings":";;;AAoC4E;;AAoE5E,IAAMA,KAAY,GAAG;AACnB,EAAA,SAAS,EAAE,EAAE;AACbC,EAAAA,MAAM,EAAE,GAAG;AACX,EAAA,OAAA,EAAO,GAAG;AACV,EAAA,MAAA,EAAM,IAAI;AACVC,EAAAA,KAAK,EAAE,IAAA;AACT,CAAC,CAAA;AAED,IAAMC,QAAkB,GAAG;AACzB,EAAA,SAAS,EAAE,EAAE;AACbC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,KAAK,EAAE,GAAG;AACVC,EAAAA,QAAQ,EAAE,GAAG;AACbC,EAAAA,SAAS,EAAE,GAAG;AACdC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,OAAO,EAAE,GAAG;AACZ,EAAA,UAAU,EAAE,GAAA;AACd,CAAC,CAAA;;AAED;AACA,IAAMC,MAAc,GAAG;AACrBC,EAAAA,QAAQ,EAAE;IACRC,SAAS,EAAEC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC;IACvCC,SAAS,EAAED,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACrCE,SAAS,EAAEF,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnCG,IAAI,EAAEH,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,CAAA;GAChC;AACDI,EAAAA,QAAQ,EAAE;IACRL,SAAS,EAAEC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC;IACvCC,SAAS,EAAED,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACnCE,SAAS,EAAEF,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;GACjC;AACDK,EAAAA,IAAI,EAAE;IACJN,SAAS,EAAEC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACrCC,SAAS,EAAED,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACpCE,SAAS,EAAEF,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;AACpC,GAAA;AACF,CAAC,CAAA;AAEM,IAAMM,MAAc,GAAG;AAC5BnB,EAAAA,KAAK,EAALA,KAAK;AACLG,EAAAA,QAAQ,EAARA,QAAQ;AACRO,EAAAA,MAAM,EAANA,MAAAA;AACF;;;;"}
+{"version":3,"file":"motion.js","sources":["../../../../../../src/tokens/global/motion.ts"],"sourcesContent":["import type { Platform } from '~utils';\nimport { makeBezier } from '~utils/makeBezier';\n\ntype Duration = {\n  /** `80` milliseconds */\n  '2xquick': 80;\n  /** `160` milliseconds */\n  xquick: 160;\n  /** `200` milliseconds */\n  quick: 200;\n  /** `280` milliseconds */\n  moderate: 280;\n  /** `360` milliseconds */\n  xmoderate: 360;\n  /** `480` milliseconds */\n  gentle: 480;\n  /** `640` milliseconds */\n  xgentle: 640;\n  /** `960` milliseconds */\n  '2xgentle': 960;\n};\n\nexport type Delay = {\n  /** `80` milliseconds */\n  '2xquick': 80;\n  /** `160` milliseconds */\n  xquick: 160;\n  /** `280` milliseconds */\n  moderate: 280;\n  /** `480` milliseconds */\n  gentle: 480;\n  /** `960` milliseconds */\n  xgentle: 960;\n  /** `2000` milliseconds */\n  long: 2000;\n  /** `3000` milliseconds */\n  xlong: 3000;\n  /** `5000` milliseconds */\n  '2xlong': 5000;\n};\n\nexport type EasingFactoryFn = { factory: () => (value: number) => number }; // similar to EasingFactoryFn of `react-native-reanimated`\nexport type EasingType<Value extends string> = Platform.Select<{\n  web: Value;\n  native: EasingFactoryFn;\n}>;\n\ntype Easing = {\n  /**\n   * Linear Easing\n   *\n   * Use Case: Marquee, Progress Bar, etc\n   *\n   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native\n   */\n  linear: EasingType<'cubic-bezier(0, 0, 0, 0)'>;\n\n  /**\n   * Entrance Animation Easing\n   *\n   * Use Case: Entry of modals, drawer, dropdown, etc\n   *\n   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native\n   */\n  entrance: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;\n\n  /**\n   * Exit Animation Easing\n   *\n   * Use Case: Exit of modals, drawer, dropdown, etc\n   *\n   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native\n   */\n  exit: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;\n\n  /**\n   * Standard Easing\n   *\n   * Use Case: Morph\n   *\n   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native\n   */\n  standard: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;\n\n  /**\n   * Emphasized Easing\n   *\n   * Use Case: Hover states of interactive items\n   *\n   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native\n   */\n  emphasized: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;\n\n  /**\n   * Overshoot Easing\n   *\n   * Use Case: Toast notifications\n   *\n   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native\n   */\n  overshoot: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;\n\n  /**\n   * Error Easing\n   *\n   * Use Case: Error States\n   *\n   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native\n   */\n  shake: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;\n};\n\nexport type Motion = Readonly<{\n  delay: Delay;\n  duration: Duration;\n  easing: Easing;\n}>;\n\nexport type EasingString = `easing.${keyof Easing}`;\nexport type DurationString = `duration.${keyof Duration}`;\nexport type DelayString = `delay.${keyof Delay}`;\n\nconst delay: Delay = {\n  '2xquick': 80,\n  xquick: 160,\n  moderate: 280,\n  gentle: 480,\n  xgentle: 960,\n  long: 2000,\n  xlong: 3000,\n  '2xlong': 5000,\n};\n\nconst duration: Duration = {\n  '2xquick': 80,\n  xquick: 160,\n  quick: 200,\n  moderate: 280,\n  xmoderate: 360,\n  gentle: 480,\n  xgentle: 640,\n  '2xgentle': 960,\n};\n\n/* makeBezier returns a string of `cubic-bezier()` for web & a react-native-reanimated Easing Function of type `EasingFactoryFn` for native */\nconst easing: Easing = {\n  linear: makeBezier(0, 0, 0, 0),\n  entrance: makeBezier(0, 0, 0.2, 1),\n  exit: makeBezier(0.17, 0, 1, 1),\n  standard: makeBezier(0.3, 0, 0.2, 1),\n  emphasized: makeBezier(0.5, 0, 0, 1),\n  overshoot: makeBezier(0.5, 0, 0.3, 1.5),\n  shake: makeBezier(1, 0.5, 0, 0.5),\n};\n\nexport const motion: Motion = {\n  delay,\n  duration,\n  easing,\n};\n"],"names":["delay","xquick","moderate","gentle","xgentle","xlong","duration","quick","xmoderate","easing","linear","makeBezier","entrance","exit","standard","emphasized","overshoot","shake","motion"],"mappings":";;;AAyC4E;;AAiF5E,IAAMA,KAAY,GAAG;AACnB,EAAA,SAAS,EAAE,EAAE;AACbC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,QAAQ,EAAE,GAAG;AACbC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,OAAO,EAAE,GAAG;AACZ,EAAA,MAAA,EAAM,IAAI;AACVC,EAAAA,KAAK,EAAE,IAAI;AACX,EAAA,QAAQ,EAAE,IAAA;AACZ,CAAC,CAAA;AAED,IAAMC,QAAkB,GAAG;AACzB,EAAA,SAAS,EAAE,EAAE;AACbL,EAAAA,MAAM,EAAE,GAAG;AACXM,EAAAA,KAAK,EAAE,GAAG;AACVL,EAAAA,QAAQ,EAAE,GAAG;AACbM,EAAAA,SAAS,EAAE,GAAG;AACdL,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,OAAO,EAAE,GAAG;AACZ,EAAA,UAAU,EAAE,GAAA;AACd,CAAC,CAAA;;AAED;AACA,IAAMK,MAAc,GAAG;EACrBC,MAAM,EAAEC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;EAC9BC,QAAQ,EAAED,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;EAClCE,IAAI,EAAEF,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;EAC/BG,QAAQ,EAAEH,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;EACpCI,UAAU,EAAEJ,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;EACpCK,SAAS,EAAEL,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC;EACvCM,KAAK,EAAEN,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,CAAA;AAClC,CAAC,CAAA;AAEM,IAAMO,MAAc,GAAG;AAC5BlB,EAAAA,KAAK,EAALA,KAAK;AACLM,EAAAA,QAAQ,EAARA,QAAQ;AACRG,EAAAA,MAAM,EAANA,MAAAA;AACF;;;;"}

package/build/lib/web/development/utils/cssBezierToArray.js

@@ -0,0 +1,12 @@
+var cssBezierToArray = function cssBezierToArray(cssCubicBezierString) {
+  var indexOfFirstBracket = cssCubicBezierString.indexOf('(');
+  var indexOfLastBracket = cssCubicBezierString.lastIndexOf(')');
+  var bezierValuesString = cssCubicBezierString.slice(indexOfFirstBracket + 1, indexOfLastBracket);
+  var bezierValuesArray = bezierValuesString.split(',').map(function (val) {
+    return Number(val);
+  });
+  return bezierValuesArray;
+};
+
+export { cssBezierToArray };
+//# sourceMappingURL=cssBezierToArray.js.map

package/build/lib/web/development/utils/cssBezierToArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssBezierToArray.js","sources":["../../../../../src/utils/cssBezierToArray.ts"],"sourcesContent":["const cssBezierToArray = <\n  X1 extends number,\n  Y1 extends number,\n  X2 extends number,\n  Y2 extends number\n>(\n  cssCubicBezierString: `cubic-bezier(${X1}, ${Y1}, ${X2}, ${Y2})`,\n): [X1, Y1, X2, Y2] => {\n  const indexOfFirstBracket = cssCubicBezierString.indexOf('(');\n  const indexOfLastBracket = cssCubicBezierString.lastIndexOf(')');\n  const bezierValuesString = cssCubicBezierString.slice(\n    indexOfFirstBracket + 1,\n    indexOfLastBracket,\n  );\n  const bezierValuesArray = bezierValuesString.split(',').map((val) => Number(val)) as [\n    X1,\n    Y1,\n    X2,\n    Y2,\n  ];\n  return bezierValuesArray;\n};\n\nexport { cssBezierToArray };\n"],"names":["cssBezierToArray","cssCubicBezierString","indexOfFirstBracket","indexOf","indexOfLastBracket","lastIndexOf","bezierValuesString","slice","bezierValuesArray","split","map","val","Number"],"mappings":"AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAMpBC,oBAAgE,EAC3C;AACrB,EAAA,IAAMC,mBAAmB,GAAGD,oBAAoB,CAACE,OAAO,CAAC,GAAG,CAAC,CAAA;AAC7D,EAAA,IAAMC,kBAAkB,GAAGH,oBAAoB,CAACI,WAAW,CAAC,GAAG,CAAC,CAAA;EAChE,IAAMC,kBAAkB,GAAGL,oBAAoB,CAACM,KAAK,CACnDL,mBAAmB,GAAG,CAAC,EACvBE,kBACF,CAAC,CAAA;AACD,EAAA,IAAMI,iBAAiB,GAAGF,kBAAkB,CAACG,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,UAACC,GAAG,EAAA;IAAA,OAAKC,MAAM,CAACD,GAAG,CAAC,CAAA;GAK/E,CAAA,CAAA;AACD,EAAA,OAAOH,iBAAiB,CAAA;AAC1B;;;;"}

package/build/lib/web/development/utils/getFocusRingStyles/getFocusRingStyles.web.js

@@ -22,7 +22,7 @@ function getFocusRingStyles(_ref) {
     outlineOffset: "".concat(negativeOffset ? '-4px' : '1px').concat(important),
     transitionProperty: 'outline-width',
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),
-    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective)
+    transitionTimingFunction: castWebType(theme.motion.easing.standard)
   };
 }
 

package/build/lib/web/development/utils/getFocusRingStyles/getFocusRingStyles.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFocusRingStyles.web.js","sources":["../../../../../../src/utils/getFocusRingStyles/getFocusRingStyles.web.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport type { GetFocusRingArgs } from './types';\nimport { castWebType, makeMotionTime } from '~utils';\n\n/**\n * @param props.theme Blade Theme Object\n * @param props.negativeOffset if set the outline offset will be set to -4px, this is useful\n * in table component where the outline will get cutoff by the table border\n */\nfunction getFocusRingStyles({\n  theme,\n  negativeOffset = false,\n  isImportant = false,\n}: GetFocusRingArgs) {\n  const important = `${isImportant ? ' !important' : ''}`;\n  return {\n    outline: `4px solid ${theme.colors.surface.border.primary.muted}${important}`,\n    outlineOffset: `${negativeOffset ? '-4px' : '1px'}${important}`,\n    transitionProperty: 'outline-width',\n    transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),\n    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),\n  } as const;\n}\n\nexport { getFocusRingStyles };\n"],"names":["getFocusRingStyles","_ref","theme","_ref$negativeOffset","negativeOffset","_ref$isImportant","isImportant","important","concat","outline","colors","surface","border","primary","muted","outlineOffset","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","transitionTimingFunction","easing","standard","effective"],"mappings":";;;;AAAA;;;AAIA;AACA;AACA;AACA;AACA;AACA,SAASA,kBAAkBA,CAAAC,IAAA,EAIN;AAAA,EAAA,IAHnBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,mBAAA,GAAAF,IAAA,CACLG,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,mBAAA;IAAAE,gBAAA,GAAAJ,IAAA,CACtBK,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,gBAAA,CAAA;EAEnB,IAAME,SAAS,MAAAC,MAAA,CAAMF,WAAW,GAAG,aAAa,GAAG,EAAE,CAAE,CAAA;EACvD,OAAO;AACLG,IAAAA,OAAO,eAAAD,MAAA,CAAeN,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACC,KAAK,EAAAN,MAAA,CAAGD,SAAS,CAAE;AAC7EQ,IAAAA,aAAa,EAAAP,EAAAA,CAAAA,MAAA,CAAKJ,cAAc,GAAG,MAAM,GAAG,KAAK,CAAAI,CAAAA,MAAA,CAAGD,SAAS,CAAE;AAC/DS,IAAAA,kBAAkB,EAAE,eAAe;AACnCC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACjB,KAAK,CAACkB,MAAM,CAACC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;IACjFC,wBAAwB,EAAEJ,WAAW,CAAChB,KAAK,CAACkB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA;GAC7E,CAAA;AACH;;;;"}
+{"version":3,"file":"getFocusRingStyles.web.js","sources":["../../../../../../src/utils/getFocusRingStyles/getFocusRingStyles.web.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport type { GetFocusRingArgs } from './types';\nimport { castWebType, makeMotionTime } from '~utils';\n\n/**\n * @param props.theme Blade Theme Object\n * @param props.negativeOffset if set the outline offset will be set to -4px, this is useful\n * in table component where the outline will get cutoff by the table border\n */\nfunction getFocusRingStyles({\n  theme,\n  negativeOffset = false,\n  isImportant = false,\n}: GetFocusRingArgs) {\n  const important = `${isImportant ? ' !important' : ''}`;\n  return {\n    outline: `4px solid ${theme.colors.surface.border.primary.muted}${important}`,\n    outlineOffset: `${negativeOffset ? '-4px' : '1px'}${important}`,\n    transitionProperty: 'outline-width',\n    transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),\n    transitionTimingFunction: castWebType(theme.motion.easing.standard),\n  } as const;\n}\n\nexport { getFocusRingStyles };\n"],"names":["getFocusRingStyles","_ref","theme","_ref$negativeOffset","negativeOffset","_ref$isImportant","isImportant","important","concat","outline","colors","surface","border","primary","muted","outlineOffset","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","transitionTimingFunction","easing","standard"],"mappings":";;;;AAAA;;;AAIA;AACA;AACA;AACA;AACA;AACA,SAASA,kBAAkBA,CAAAC,IAAA,EAIN;AAAA,EAAA,IAHnBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,mBAAA,GAAAF,IAAA,CACLG,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,mBAAA;IAAAE,gBAAA,GAAAJ,IAAA,CACtBK,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,gBAAA,CAAA;EAEnB,IAAME,SAAS,MAAAC,MAAA,CAAMF,WAAW,GAAG,aAAa,GAAG,EAAE,CAAE,CAAA;EACvD,OAAO;AACLG,IAAAA,OAAO,eAAAD,MAAA,CAAeN,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACC,KAAK,EAAAN,MAAA,CAAGD,SAAS,CAAE;AAC7EQ,IAAAA,aAAa,EAAAP,EAAAA,CAAAA,MAAA,CAAKJ,cAAc,GAAG,MAAM,GAAG,KAAK,CAAAI,CAAAA,MAAA,CAAGD,SAAS,CAAE;AAC/DS,IAAAA,kBAAkB,EAAE,eAAe;AACnCC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACjB,KAAK,CAACkB,MAAM,CAACC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;IACjFC,wBAAwB,EAAEJ,WAAW,CAAChB,KAAK,CAACkB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;GACnE,CAAA;AACH;;;;"}

package/build/lib/web/development/utils/getMotionRefs.js

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * ## What are `getOuterMotionRef` and `getInnerMotionRef` functions?
+ *
+ * - Motion react requires refs on outermost element to animate components
+ * - But we have certain components like input where we already pass refs on inner elements with certain expectation (e.g. in input to focus on the input)
+ *
+ * Using these 2 utility functions, we can use 2 refs from same forwardRef. One on outer element and one on inner element
+ *
+ * ---
+ *
+ * ### Examples
+ *
+ * ```jsx
+ *
+ * const MyComponent = ({ _motionMeta }: MotionMetaProp, ref: React.Ref<BladeElementRef>) => {
+ *
+ *  return (
+ *   <BaseBox ref={getOuterMotionRef({ _motionMeta, ref })}>
+ *    <Text>Something something</Text>
+ *    <BaseInput ref={getInnerMotionRef({ _motionMeta, ref })} />
+ *  </BaseBox>
+ *  )
+ * }
+ * ```
+ *
+ * ### What does it internally do?
+ *
+ * - On BaseMotion.tsx, we inject _motionMeta prop with ref that is passed to child.
+ * - i.e. we pick the `ref` prop of child, and pass it as `_motionMeta.innerRef`. This way in our components, we have access to both the refs. The motion/react ref that we get from forwardRef, and `_motionMeta.innerRef` (ref that you pass on child component of motion)
+ * - Both `getOuterMotionRef` and `getInnerMotionRef` are simple one line utility functions to use the correct ref on correct element.
+ *
+ * ### When to use this?
+ *
+ * - When you want to forward ref to component on inner element instead of outer element (e.g. passing down the ref to input in checkbox)
+ */
+var getOuterMotionRef = function getOuterMotionRef(_ref) {
+  var _motionMeta = _ref._motionMeta,
+    ref = _ref.ref;
+  return _motionMeta !== null && _motionMeta !== void 0 && _motionMeta.isEnhanced ? ref : null;
+};
+
+/**
+ * ## What are `getOuterMotionRef` and `getInnerMotionRef` functions?
+ *
+ * - Motion react requires refs on outermost element to animate components
+ * - But we have certain components like input where we already pass refs on inner elements with certain expectation (e.g. in input to focus on the input)
+ *
+ * Using these 2 utility functions, we can use 2 refs from same forwardRef. One on outer element and one on inner element
+ *
+ * ---
+ *
+ * ### Examples
+ *
+ * ```jsx
+ *
+ * const MyComponent = ({ _motionMeta }: MotionMetaProp, ref: React.Ref<BladeElementRef>) => {
+ *
+ *  return (
+ *   <BaseBox ref={getOuterMotionRef({ _motionMeta, ref })}>
+ *    <Text>Something something</Text>
+ *    <BaseInput ref={getInnerMotionRef({ _motionMeta, ref })} />
+ *  </BaseBox>
+ *  )
+ * }
+ * ```
+ *
+ * ### What does it internally do?
+ *
+ * - On BaseMotion.tsx, we inject _motionMeta prop with ref that is passed to child.
+ * - i.e. we pick the `ref` prop of child, and pass it as `_motionMeta.innerRef`. This way in our components, we have access to both the refs. The motion/react ref that we get from forwardRef, and `_motionMeta.innerRef` (ref that you pass on child component of motion)
+ * - Both `getOuterMotionRef` and `getInnerMotionRef` are simple one line utility functions to use the correct ref on correct element.
+ *
+ * ### When to use this?
+ *
+ * - When you want to forward ref to component on inner element instead of outer element (e.g. passing down the ref to input in checkbox)
+ */
+var getInnerMotionRef = function getInnerMotionRef(_ref2) {
+  var _motionMeta = _ref2._motionMeta,
+    ref = _ref2.ref;
+  return _motionMeta !== null && _motionMeta !== void 0 && _motionMeta.isEnhanced ? _motionMeta.innerRef : ref;
+};
+
+export { getInnerMotionRef, getOuterMotionRef };
+//# sourceMappingURL=getMotionRefs.js.map

package/build/lib/web/development/utils/getMotionRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMotionRefs.js","sources":["../../../../../src/utils/getMotionRefs.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from 'react';\nimport type { BladeElementRef } from './types';\nimport type { MotionMetaProp } from '~components/BaseMotion';\n\ntype MotionRefsType = {\n  ref: React.Ref<BladeElementRef>;\n} & MotionMetaProp;\n\n/**\n * ## What are `getOuterMotionRef` and `getInnerMotionRef` functions?\n *\n * - Motion react requires refs on outermost element to animate components\n * - But we have certain components like input where we already pass refs on inner elements with certain expectation (e.g. in input to focus on the input)\n *\n * Using these 2 utility functions, we can use 2 refs from same forwardRef. One on outer element and one on inner element\n *\n * ---\n *\n * ### Examples\n *\n * ```jsx\n *\n * const MyComponent = ({ _motionMeta }: MotionMetaProp, ref: React.Ref<BladeElementRef>) => {\n *\n *  return (\n *   <BaseBox ref={getOuterMotionRef({ _motionMeta, ref })}>\n *    <Text>Something something</Text>\n *    <BaseInput ref={getInnerMotionRef({ _motionMeta, ref })} />\n *  </BaseBox>\n *  )\n * }\n * ```\n *\n * ### What does it internally do?\n *\n * - On BaseMotion.tsx, we inject _motionMeta prop with ref that is passed to child.\n * - i.e. we pick the `ref` prop of child, and pass it as `_motionMeta.innerRef`. This way in our components, we have access to both the refs. The motion/react ref that we get from forwardRef, and `_motionMeta.innerRef` (ref that you pass on child component of motion)\n * - Both `getOuterMotionRef` and `getInnerMotionRef` are simple one line utility functions to use the correct ref on correct element.\n *\n * ### When to use this?\n *\n * - When you want to forward ref to component on inner element instead of outer element (e.g. passing down the ref to input in checkbox)\n */\nconst getOuterMotionRef = ({ _motionMeta, ref }: MotionRefsType): any => {\n  return _motionMeta?.isEnhanced ? ref : null;\n};\n\n/**\n * ## What are `getOuterMotionRef` and `getInnerMotionRef` functions?\n *\n * - Motion react requires refs on outermost element to animate components\n * - But we have certain components like input where we already pass refs on inner elements with certain expectation (e.g. in input to focus on the input)\n *\n * Using these 2 utility functions, we can use 2 refs from same forwardRef. One on outer element and one on inner element\n *\n * ---\n *\n * ### Examples\n *\n * ```jsx\n *\n * const MyComponent = ({ _motionMeta }: MotionMetaProp, ref: React.Ref<BladeElementRef>) => {\n *\n *  return (\n *   <BaseBox ref={getOuterMotionRef({ _motionMeta, ref })}>\n *    <Text>Something something</Text>\n *    <BaseInput ref={getInnerMotionRef({ _motionMeta, ref })} />\n *  </BaseBox>\n *  )\n * }\n * ```\n *\n * ### What does it internally do?\n *\n * - On BaseMotion.tsx, we inject _motionMeta prop with ref that is passed to child.\n * - i.e. we pick the `ref` prop of child, and pass it as `_motionMeta.innerRef`. This way in our components, we have access to both the refs. The motion/react ref that we get from forwardRef, and `_motionMeta.innerRef` (ref that you pass on child component of motion)\n * - Both `getOuterMotionRef` and `getInnerMotionRef` are simple one line utility functions to use the correct ref on correct element.\n *\n * ### When to use this?\n *\n * - When you want to forward ref to component on inner element instead of outer element (e.g. passing down the ref to input in checkbox)\n */\nconst getInnerMotionRef = ({ _motionMeta, ref }: MotionRefsType): any => {\n  return _motionMeta?.isEnhanced ? _motionMeta.innerRef : ref;\n};\n\nexport { getOuterMotionRef, getInnerMotionRef };\n"],"names":["getOuterMotionRef","_ref","_motionMeta","ref","isEnhanced","getInnerMotionRef","_ref2","innerRef"],"mappings":"AAAA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAAkD;AAAA,EAAA,IAA5CC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG,CAAA;EAC3C,OAAOD,WAAW,KAAXA,IAAAA,IAAAA,WAAW,KAAXA,KAAAA,CAAAA,IAAAA,WAAW,CAAEE,UAAU,GAAGD,GAAG,GAAG,IAAI,CAAA;AAC7C,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAME,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,KAAA,EAAkD;AAAA,EAAA,IAA5CJ,WAAW,GAAAI,KAAA,CAAXJ,WAAW;IAAEC,GAAG,GAAAG,KAAA,CAAHH,GAAG,CAAA;AAC3C,EAAA,OAAOD,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAA,KAAA,CAAA,IAAXA,WAAW,CAAEE,UAAU,GAAGF,WAAW,CAACK,QAAQ,GAAGJ,GAAG,CAAA;AAC7D;;;;"}

package/build/lib/web/development/utils/msToSeconds.js

@@ -0,0 +1,6 @@
+var msToSeconds = function msToSeconds(durationInMS) {
+  return durationInMS / 1000;
+};
+
+export { msToSeconds };
+//# sourceMappingURL=msToSeconds.js.map

package/build/lib/web/development/utils/msToSeconds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"msToSeconds.js","sources":["../../../../../src/utils/msToSeconds.ts"],"sourcesContent":["const msToSeconds = (durationInMS: number): number => {\n  return durationInMS / 1000;\n};\n\nexport { msToSeconds };\n"],"names":["msToSeconds","durationInMS"],"mappings":"AAAA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAIC,YAAoB,EAAa;EACpD,OAAOA,YAAY,GAAG,IAAI,CAAA;AAC5B;;;;"}

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

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, Children, useCallback, useMemo, cloneElement } from 'react';
+import React__default, { useState, Children, useCallback, useMemo, cloneElement } from 'react';
 import { AccordionContext } from './AccordionContext.js';
 import { MAX_WIDTH } from './styles.web.js';
 import '../Box/BaseBox/index.js';
@@ -70,7 +70,7 @@ var getVariantStyles = function getVariantStyles(variant) {
  * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs
  *
  */
-var Accordion = function Accordion(_ref) {
+var _Accordion = function _Accordion(_ref, ref) {
   var defaultExpandedIndex = _ref.defaultExpandedIndex,
     expandedIndex = _ref.expandedIndex,
     onExpandChange = _ref.onExpandChange,
@@ -116,7 +116,9 @@ var Accordion = function Accordion(_ref) {
   }, [expandedAccordionItemIndex, handleExpandChange, expandedIndex, showNumberPrefix, defaultExpandedIndex, variant, numberOfItems, size]);
   return /*#__PURE__*/jsx(AccordionContext.Provider, {
     value: accordionContext,
-    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      ref: ref
+    }, metaAttribute({
       name: MetaConstants.Accordion,
       testID: testID
     })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
@@ -134,6 +136,7 @@ var Accordion = function Accordion(_ref) {
     }))
   });
 };
+var Accordion = /*#__PURE__*/React__default.forwardRef(_Accordion);
 
 export { Accordion };
 //# sourceMappingURL=Accordion.js.map

package/build/lib/web/production/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState, cloneElement, Children } from 'react';\nimport type { AccordionContextState } from './AccordionContext';\nimport { AccordionContext } from './AccordionContext';\nimport { MAX_WIDTH } from './styles';\nimport type { AccordionProps } from './types';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { size as sizeTokens } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst MIN_WIDTH: BoxProps['minWidth'] = {\n  s: makeSize(sizeTokens[200]),\n  m: makeSize(sizeTokens[360]),\n  l: makeSize(sizeTokens[360]),\n};\n\nconst getVariantStyles = (variant: AccordionProps['variant']): BoxProps => {\n  if (variant === 'transparent') {\n    return {};\n  }\n\n  return {\n    backgroundColor: 'surface.background.gray.intense',\n    borderRadius: 'medium',\n    borderWidth: 'thinner',\n    borderColor: 'surface.border.gray.subtle',\n  };\n};\n\n/**\n * # Accordion\n *\n * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.\n *\n * ## Usage\n *\n * ```jsx\n * <Accordion>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *        Hello this is accordion body content\n *        </Text>\n *     </AccordionItemBody>\n *  </AccordionItem>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *         Hello this is accordion body content\n *      </Text>\n *    </AccordionItemBody>\n *  </AccordionItem>\n * </Accordion>\n * ```\n *\n * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs\n *\n */\nconst Accordion = ({\n  defaultExpandedIndex,\n  expandedIndex,\n  onExpandChange,\n  showNumberPrefix = false,\n  children,\n  variant = 'transparent',\n  size = 'large',\n  maxWidth,\n  testID,\n  ...rest\n}: AccordionProps): ReactElement => {\n  const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number | undefined>(\n    defaultExpandedIndex,\n  );\n\n  const numberOfItems = Children.count(children);\n\n  const handleExpandChange = useCallback(\n    (nextExpandedIndex: number) => {\n      if (typeof expandedIndex !== 'undefined') {\n        // controlled\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      } else {\n        // uncontrolled\n        setExpandedAccordionItemIndex(nextExpandedIndex);\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      }\n    },\n    [onExpandChange, expandedIndex],\n  );\n\n  const accordionContext = useMemo<AccordionContextState>(\n    () => ({\n      expandedIndex: expandedIndex ?? expandedAccordionItemIndex,\n      defaultExpandedIndex,\n      onExpandChange: handleExpandChange,\n      showNumberPrefix,\n      variant,\n      numberOfItems,\n      size,\n    }),\n    [\n      expandedAccordionItemIndex,\n      handleExpandChange,\n      expandedIndex,\n      showNumberPrefix,\n      defaultExpandedIndex,\n      variant,\n      numberOfItems,\n      size,\n    ],\n  );\n\n  return (\n    <AccordionContext.Provider value={accordionContext}>\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <BaseBox\n          {...getVariantStyles(variant)}\n          minWidth={MIN_WIDTH}\n          maxWidth={maxWidth ?? MAX_WIDTH}\n          width=\"100%\"\n        >\n          {Children.map(children, (child, index) =>\n            cloneElement(child, { _index: index, key: index }),\n          )}\n        </BaseBox>\n      </BaseBox>\n    </AccordionContext.Provider>\n  );\n};\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","Accordion","_ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","maxWidth","testID","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","getStyledProps","makeAnalyticsAttribute","minWidth","MAX_WIDTH","width","map","child","index","cloneElement","_index","key"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useCallback, useMemo, useState, cloneElement, Children } from 'react';\nimport type { AccordionContextState } from './AccordionContext';\nimport { AccordionContext } from './AccordionContext';\nimport { MAX_WIDTH } from './styles';\nimport type { AccordionProps } from './types';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { size as sizeTokens } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst MIN_WIDTH: BoxProps['minWidth'] = {\n  s: makeSize(sizeTokens[200]),\n  m: makeSize(sizeTokens[360]),\n  l: makeSize(sizeTokens[360]),\n};\n\nconst getVariantStyles = (variant: AccordionProps['variant']): BoxProps => {\n  if (variant === 'transparent') {\n    return {};\n  }\n\n  return {\n    backgroundColor: 'surface.background.gray.intense',\n    borderRadius: 'medium',\n    borderWidth: 'thinner',\n    borderColor: 'surface.border.gray.subtle',\n  };\n};\n\n/**\n * # Accordion\n *\n * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.\n *\n * ## Usage\n *\n * ```jsx\n * <Accordion>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *        Hello this is accordion body content\n *        </Text>\n *     </AccordionItemBody>\n *  </AccordionItem>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *         Hello this is accordion body content\n *      </Text>\n *    </AccordionItemBody>\n *  </AccordionItem>\n * </Accordion>\n * ```\n *\n * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs\n *\n */\nconst _Accordion = (\n  {\n    defaultExpandedIndex,\n    expandedIndex,\n    onExpandChange,\n    showNumberPrefix = false,\n    children,\n    variant = 'transparent',\n    size = 'large',\n    maxWidth,\n    testID,\n    ...rest\n  }: AccordionProps,\n  ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n  const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number | undefined>(\n    defaultExpandedIndex,\n  );\n\n  const numberOfItems = Children.count(children);\n\n  const handleExpandChange = useCallback(\n    (nextExpandedIndex: number) => {\n      if (typeof expandedIndex !== 'undefined') {\n        // controlled\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      } else {\n        // uncontrolled\n        setExpandedAccordionItemIndex(nextExpandedIndex);\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      }\n    },\n    [onExpandChange, expandedIndex],\n  );\n\n  const accordionContext = useMemo<AccordionContextState>(\n    () => ({\n      expandedIndex: expandedIndex ?? expandedAccordionItemIndex,\n      defaultExpandedIndex,\n      onExpandChange: handleExpandChange,\n      showNumberPrefix,\n      variant,\n      numberOfItems,\n      size,\n    }),\n    [\n      expandedAccordionItemIndex,\n      handleExpandChange,\n      expandedIndex,\n      showNumberPrefix,\n      defaultExpandedIndex,\n      variant,\n      numberOfItems,\n      size,\n    ],\n  );\n\n  return (\n    <AccordionContext.Provider value={accordionContext}>\n      <BaseBox\n        ref={ref as never}\n        {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <BaseBox\n          {...getVariantStyles(variant)}\n          minWidth={MIN_WIDTH}\n          maxWidth={maxWidth ?? MAX_WIDTH}\n          width=\"100%\"\n        >\n          {Children.map(children, (child, index) =>\n            cloneElement(child, { _index: index, key: index }),\n          )}\n        </BaseBox>\n      </BaseBox>\n    </AccordionContext.Provider>\n  );\n};\n\nconst Accordion = React.forwardRef(_Accordion);\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","_Accordion","_ref","ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","maxWidth","testID","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Accordion","getStyledProps","makeAnalyticsAttribute","minWidth","MAX_WIDTH","width","map","child","index","cloneElement","_index","key","React","forwardRef"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ var getTransitionDuration = function getTransitionDuration(theme) {
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 var getTransitionEasing = function getTransitionEasing(theme) {
-  return theme.motion.easing.standard.effective;
+  return theme.motion.easing.standard;
 };
 var getBackgroundColor = function getBackgroundColor(_ref) {
   var theme = _ref.theme,

package/build/lib/web/production/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.interactive.background;\n\n  if (isExpanded) {\n    if (isActive) {\n      return gray.fadedHighlighted;\n    }\n\n    return gray.faded;\n  }\n\n  if (isActive) {\n    return gray.faded;\n  }\n\n  return theme.colors.transparent;\n};\n\nconst getCommonAccordionButtonStyles = (\n  props: StyledProps<StyledAccordionButtonProps>,\n): CSSObject => {\n  const { theme } = props;\n\n  return {\n    padding: theme.spacing[0],\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","fadedHighlighted","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,IAAIF,UAAU,EAAE;AACd,IAAA,IAAIC,QAAQ,EAAE;MACZ,OAAOC,IAAI,CAACI,gBAAgB,CAAA;AAC9B,KAAA;IAEA,OAAOJ,IAAI,CAACK,KAAK,CAAA;AACnB,GAAA;AAEA,EAAA,IAAIN,QAAQ,EAAE;IACZ,OAAOC,IAAI,CAACK,KAAK,CAAA;AACnB,GAAA;AAEA,EAAA,OAAOjB,KAAK,CAACa,MAAM,CAACK,WAAW,CAAA;AACjC,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;\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 (isExpanded) {\n    if (isActive) {\n      return gray.fadedHighlighted;\n    }\n\n    return gray.faded;\n  }\n\n  if (isActive) {\n    return gray.faded;\n  }\n\n  return theme.colors.transparent;\n};\n\nconst getCommonAccordionButtonStyles = (\n  props: StyledProps<StyledAccordionButtonProps>,\n): CSSObject => {\n  const { theme } = props;\n\n  return {\n    padding: theme.spacing[0],\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","getBackgroundColor","_ref","isExpanded","isActive","gray","colors","interactive","background","fadedHighlighted","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;AAAA,EAAA,OAAKA,KAAK,CAACE,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AAAA,EAAA;AAE1E,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAQV;AAAA,EAAA,IAPZR,KAAK,GAAAQ,IAAA,CAALR,KAAK;IACLS,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAA;EAMR,IAAQC,IAAI,GAAKX,KAAK,CAACY,MAAM,CAACC,WAAW,CAACC,UAAU,CAA5CH,IAAI,CAAA;AAEZ,EAAA,IAAIF,UAAU,EAAE;AACd,IAAA,IAAIC,QAAQ,EAAE;MACZ,OAAOC,IAAI,CAACI,gBAAgB,CAAA;AAC9B,KAAA;IAEA,OAAOJ,IAAI,CAACK,KAAK,CAAA;AACnB,GAAA;AAEA,EAAA,IAAIN,QAAQ,EAAE;IACZ,OAAOC,IAAI,CAACK,KAAK,CAAA;AACnB,GAAA;AAEA,EAAA,OAAOhB,KAAK,CAACY,MAAM,CAACK,WAAW,CAAA;AACjC,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/production/components/ActionList/ActionList.js

@@ -45,6 +45,9 @@ var _ActionList = function _ActionList(_ref) {
     sectionData = _React$useMemo.sectionData,
     childrenWithId = _React$useMemo.childrenWithId,
     actionListOptions = _React$useMemo.actionListOptions;
+  console.log({
+    actionListOptions: actionListOptions
+  });
   React__default.useEffect(function () {
     setOptions(actionListOptions);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/build/lib/web/production/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 { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype ActionListProps = {\n  children: React.ReactNode[];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _ActionList = ({ children, testID, ...rest }: 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      {...makeAnalyticsAttribute(rest)}\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      {...makeAnalyticsAttribute(rest)}\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","rest","_objectWithoutProperties","_excluded","_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","_objectSpread","ref","makeAnalyticsAttribute","BaseBox","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 { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype ActionListProps = {\n  children: React.ReactNode[];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _ActionList = ({ children, testID, ...rest }: 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  console.log({ actionListOptions });\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      {...makeAnalyticsAttribute(rest)}\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      {...makeAnalyticsAttribute(rest)}\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","rest","_objectWithoutProperties","_excluded","_useDropdown","useDropdown","setOptions","actionListItemRef","selectionType","dropdownBaseId","dropdownTriggerer","hasFooterAction","filteredValues","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_React$useMemo","React","useMemo","getActionListProperties","sectionData","childrenWithId","actionListOptions","console","log","useEffect","length","dropdownComponentIds","triggers","AutoComplete","_jsx","ActionListNoResults","actionListContainerRole","getActionListContainerRole","actionListItemWrapperRole","getActionListItemWrapperRole","isMultiSelectable","ActionListBox","_objectSpread","ref","makeAnalyticsAttribute","BaseBox","id","concat","makeAccessible","role","multiSelectable","undefined","labelledBy","metaAttribute","name","MetaConstants","ActionList","assignWithoutSideEffects","memo","displayName","componentIds","componentId"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Fragment, useState } from 'react';
+import { Fragment, useState, forwardRef } from 'react';
 import { StyledAlert } from './StyledAlert.js';
 import '../Icons/index.js';
 import '../../utils/index.js';
@@ -50,7 +50,7 @@ var intentIconMap = {
   neutral: InfoIcon,
   notice: AlertTriangleIcon
 };
-var Alert = function Alert(_ref) {
+var _Alert = function _Alert(_ref, ref) {
   var description = _ref.description,
     title = _ref.title,
     _ref$isDismissible = _ref.isDismissible,
@@ -204,7 +204,9 @@ var Alert = function Alert(_ref) {
   if (!isVisible) {
     return null;
   }
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, a11yProps), metaAttribute({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref
+  }, a11yProps), metaAttribute({
     name: MetaConstants.Alert,
     testID: testID
   })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
@@ -223,6 +225,7 @@ var Alert = function Alert(_ref) {
     })
   }));
 };
+var Alert = /*#__PURE__*/forwardRef(_Alert);
 
 export { Alert };
 //# sourceMappingURL=Alert.js.map

package/build/lib/web/production/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ReactChild, ReactElement } from 'react';\nimport { Fragment, useState } from 'react';\n\nimport { StyledAlert } from './StyledAlert';\nimport type { IconComponent } from '~components/Icons';\nimport {\n  AlertOctagonIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoIcon,\n} from '~components/Icons';\nimport { castNativeType, castWebType, useBreakpoint, getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport BaseButton from '~components/Button/BaseButton';\nimport { BaseLink } from '~components/Link/BaseLink';\nimport type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, DotNotationSpacingStringToken, TestID } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype PrimaryAction = {\n  text: string;\n  onClick: () => void;\n};\n\ntype SecondaryActionButton = {\n  text: string;\n  onClick: () => void;\n};\n\ntype SecondaryActionLinkButton = {\n  text: string;\n  href: string;\n  onClick?: () => void;\n  target?: string;\n  /**\n   * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`\n   */\n  rel?: string;\n};\n\ntype SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;\n\ntype AlertProps = {\n  /**\n   * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.\n   */\n  description: ReactChild;\n\n  /**\n   * A brief heading\n   */\n  title?: string;\n\n  /**\n   * Shows a dismiss button\n   *\n   * @default true\n   */\n  isDismissible?: boolean;\n\n  /**\n   * A callback when the dismiss button is clicked\n   */\n  onDismiss?: () => void;\n\n  /**\n   * Can be used to render custom icon\n   */\n  icon?: IconComponent;\n\n  /**\n   * Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.\n   *\n   * @default subtle\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Makes the Alert span the entire container width, instead of the default max width of `584px`.\n   * This also makes the alert borderless, useful for creating full bleed layouts.\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n\n  /**\n   * Sets the color tone\n   */\n  color?: FeedbackColors;\n\n  /**\n   * Renders a primary action button and a secondary action link button\n   */\n  actions?: {\n    /**\n     * Renders a button (should **always** be present if `secondary` action is being used)\n     */\n    primary?: PrimaryAction;\n    /**\n     * Renders a Link button\n     */\n    secondary?: SecondaryAction;\n  };\n} & TestID &\n  StyledPropsBlade &\n  DataAnalyticsAttribute;\n\nconst isReactNative = getPlatformType() === 'react-native';\n\n// Need extra wrappers on React Native only for alignment\nconst CloseButtonWrapper = isReactNative ? BaseBox : Fragment;\n\nconst intentIconMap = {\n  positive: CheckCircleIcon,\n  negative: AlertOctagonIcon,\n  information: InfoIcon,\n  neutral: InfoIcon,\n  notice: AlertTriangleIcon,\n};\n\nconst Alert = ({\n  description,\n  title,\n  isDismissible = true,\n  onDismiss,\n  emphasis = 'subtle',\n  isFullWidth = false,\n  color = 'neutral',\n  actions,\n  testID,\n  icon,\n  ...rest\n}: AlertProps): ReactElement | null => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const [isVisible, setIsVisible] = useState(true);\n\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isMobile = !isDesktop;\n\n  const Icon = icon ?? intentIconMap[color];\n  let iconOffset: DotNotationSpacingStringToken = 'spacing.1';\n\n  // certain special cases below needs special care for near perfect alignment\n  if (isReactNative) {\n    if (isFullWidth && !title) {\n      iconOffset = 'spacing.1';\n    } else if (!isFullWidth && !title) {\n      iconOffset = 'spacing.0';\n    } else if (!isFullWidth && title) {\n      iconOffset = 'spacing.2';\n    }\n  } else if (isMobile) {\n    if (!isFullWidth && title) {\n      iconOffset = 'spacing.2';\n    } else if (isFullWidth && !title) {\n      iconOffset = 'spacing.2';\n    }\n  } else if (isFullWidth) {\n    iconOffset = 'spacing.1';\n  }\n\n  const shouldCenterAlign = isFullWidth && !title;\n  let alignment: 'center' | 'flex-start' = 'flex-start';\n  if (!isFullWidth) alignment = 'flex-start';\n  if (shouldCenterAlign) alignment = 'center';\n\n  const leadingIcon = (\n    <BaseBox display=\"flex\" alignSelf={alignment} marginTop={iconOffset}>\n      <Icon\n        color={\n          emphasis === 'intense'\n            ? 'surface.icon.staticWhite.normal'\n            : `feedback.icon.${color}.${emphasis === 'subtle' ? 'intense' : 'subtle'}`\n        }\n        size=\"medium\"\n      />\n    </BaseBox>\n  );\n\n  const textColor =\n    emphasis === 'intense' ? 'surface.text.staticWhite.normal' : 'surface.text.gray.subtle';\n  const _title = title ? (\n    <BaseBox marginBottom=\"spacing.2\">\n      <Text color={textColor} size=\"medium\" weight=\"semibold\">\n        {title}\n      </Text>\n    </BaseBox>\n  ) : null;\n\n  const _description = (\n    <BaseBox marginTop={title || isReactNative ? 'spacing.0' : 'spacing.1'}>\n      <Text color={textColor} size=\"small\">\n        {description}\n      </Text>\n    </BaseBox>\n  );\n\n  const primaryAction = actions?.primary ? (\n    <BaseBox\n      marginRight=\"spacing.5\"\n      display={isReactNative ? castNativeType('flex') : castWebType('inline-flex')}\n    >\n      <BaseButton\n        size=\"small\"\n        onClick={actions.primary.onClick}\n        color={emphasis === 'intense' ? 'white' : color}\n        variant=\"secondary\"\n      >\n        {actions.primary.text}\n      </BaseButton>\n    </BaseBox>\n  ) : null;\n\n  const secondaryActionParams: Partial<SecondaryActionLinkButton> | null = actions?.secondary\n    ? {\n        onClick: actions.secondary.onClick,\n      }\n    : null;\n\n  /**\n   * TS assumes only common properties to be present for `SecondaryAction` union type\n   * We add a type guard that checks if href is present on secondary action:\n   * - If yes, then TS can assume it to be `SecondaryActionLinkButton` (href being a required property)\n   * - If no, then it would be `SecondaryActionButton` (and link properties wouldn't be needed)\n   */\n  if (actions?.secondary && secondaryActionParams && 'href' in actions.secondary) {\n    secondaryActionParams.href = actions.secondary.href;\n    secondaryActionParams.target = actions.secondary.target;\n    secondaryActionParams.rel = actions.secondary.rel;\n  }\n\n  const secondaryAction = actions?.secondary ? (\n    <BaseBox marginRight=\"spacing.4\" display={(isReactNative ? 'flex' : 'inline-flex') as never}>\n      <BaseLink\n        size=\"small\"\n        color={emphasis === 'intense' ? 'white' : color}\n        {...secondaryActionParams}\n      >\n        {actions.secondary.text}\n      </BaseLink>\n    </BaseBox>\n  ) : null;\n\n  // For certain cases we wish to render actions inline with text content\n  const showActionsHorizontal = isFullWidth && isDesktop;\n\n  const actionsHorizontal =\n    showActionsHorizontal && (primaryAction || secondaryAction) ? (\n      <BaseBox flexDirection=\"row\" alignItems=\"center\">\n        {primaryAction}\n        {secondaryAction}\n      </BaseBox>\n    ) : null;\n\n  const actionsVertical =\n    !showActionsHorizontal && (primaryAction || secondaryAction) ? (\n      <BaseBox marginTop=\"spacing.4\" flexDirection=\"row\" alignItems=\"center\">\n        {primaryAction}\n        {secondaryAction}\n      </BaseBox>\n    ) : null;\n\n  const onClickDismiss = (): void => {\n    if (onDismiss) {\n      onDismiss();\n    }\n    setIsVisible(false);\n  };\n  const closeButton = isDismissible ? (\n    <CloseButtonWrapper>\n      <IconButton\n        accessibilityLabel=\"Dismiss alert\"\n        onClick={onClickDismiss}\n        emphasis={emphasis === 'intense' ? 'subtle' : 'intense'}\n        size=\"large\"\n        icon={CloseIcon}\n      />\n    </CloseButtonWrapper>\n  ) : null;\n\n  const a11yProps = makeAccessible({\n    // React Native doesn't has status as role\n    role: isReactNative || color === 'negative' || color === 'notice' ? 'alert' : 'status',\n    // override the implicit live region of role `alert`\n    ...(color === 'notice' && { liveRegion: 'polite' }),\n  });\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <BaseBox\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Alert, testID })}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <StyledAlert\n        color={color}\n        emphasis={emphasis}\n        isFullWidth={isFullWidth}\n        isDesktop={isDesktop}\n        textAlign={'left' as never}\n      >\n        {leadingIcon}\n        <BaseBox\n          flex={1}\n          paddingLeft={isFullWidth ? 'spacing.4' : 'spacing.3'}\n          paddingRight={showActionsHorizontal ? 'spacing.4' : 'spacing.2'}\n        >\n          {_title}\n          {_description}\n          {actionsVertical}\n        </BaseBox>\n        {actionsHorizontal}\n        {closeButton}\n      </StyledAlert>\n    </BaseBox>\n  );\n};\n\nexport type { AlertProps };\nexport { Alert };\n"],"names":["isReactNative","getPlatformType","CloseButtonWrapper","BaseBox","Fragment","intentIconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","Alert","_ref","description","title","_ref$isDismissible","isDismissible","onDismiss","_ref$emphasis","emphasis","_ref$isFullWidth","isFullWidth","_ref$color","color","actions","testID","icon","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","_useState","useState","_useState2","_slicedToArray","isVisible","setIsVisible","isDesktop","isMobile","Icon","iconOffset","shouldCenterAlign","alignment","leadingIcon","_jsx","display","alignSelf","marginTop","children","concat","size","textColor","_title","marginBottom","Text","weight","_description","primaryAction","primary","marginRight","castNativeType","castWebType","BaseButton","onClick","variant","text","secondaryActionParams","secondary","href","target","rel","secondaryAction","BaseLink","_objectSpread","showActionsHorizontal","actionsHorizontal","_jsxs","flexDirection","alignItems","actionsVertical","onClickDismiss","closeButton","IconButton","accessibilityLabel","CloseIcon","a11yProps","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getStyledProps","makeAnalyticsAttribute","StyledAlert","textAlign","flex","paddingLeft","paddingRight"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ReactChild, ReactElement } from 'react';\nimport React, { Fragment, useState, forwardRef } from 'react';\n\nimport { StyledAlert } from './StyledAlert';\nimport type { IconComponent } from '~components/Icons';\nimport {\n  AlertOctagonIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoIcon,\n} from '~components/Icons';\nimport { castNativeType, castWebType, useBreakpoint, getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport BaseButton from '~components/Button/BaseButton';\nimport { BaseLink } from '~components/Link/BaseLink';\nimport type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';\nimport { useTheme } from '~components/BladeProvider';\nimport type {\n  DataAnalyticsAttribute,\n  BladeElementRef,\n  DotNotationSpacingStringToken,\n  TestID,\n} from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype PrimaryAction = {\n  text: string;\n  onClick: () => void;\n};\n\ntype SecondaryActionButton = {\n  text: string;\n  onClick: () => void;\n};\n\ntype SecondaryActionLinkButton = {\n  text: string;\n  href: string;\n  onClick?: () => void;\n  target?: string;\n  /**\n   * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`\n   */\n  rel?: string;\n};\n\ntype SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;\n\ntype AlertProps = {\n  /**\n   * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.\n   */\n  description: ReactChild;\n\n  /**\n   * A brief heading\n   */\n  title?: string;\n\n  /**\n   * Shows a dismiss button\n   *\n   * @default true\n   */\n  isDismissible?: boolean;\n\n  /**\n   * A callback when the dismiss button is clicked\n   */\n  onDismiss?: () => void;\n\n  /**\n   * Can be used to render custom icon\n   */\n  icon?: IconComponent;\n\n  /**\n   * Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.\n   *\n   * @default subtle\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Makes the Alert span the entire container width, instead of the default max width of `584px`.\n   * This also makes the alert borderless, useful for creating full bleed layouts.\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n\n  /**\n   * Sets the color tone\n   */\n  color?: FeedbackColors;\n\n  /**\n   * Renders a primary action button and a secondary action link button\n   */\n  actions?: {\n    /**\n     * Renders a button (should **always** be present if `secondary` action is being used)\n     */\n    primary?: PrimaryAction;\n    /**\n     * Renders a Link button\n     */\n    secondary?: SecondaryAction;\n  };\n} & TestID &\n  StyledPropsBlade &\n  DataAnalyticsAttribute;\n\nconst isReactNative = getPlatformType() === 'react-native';\n\n// Need extra wrappers on React Native only for alignment\nconst CloseButtonWrapper = isReactNative ? BaseBox : Fragment;\n\nconst intentIconMap = {\n  positive: CheckCircleIcon,\n  negative: AlertOctagonIcon,\n  information: InfoIcon,\n  neutral: InfoIcon,\n  notice: AlertTriangleIcon,\n};\n\nconst _Alert = (\n  {\n    description,\n    title,\n    isDismissible = true,\n    onDismiss,\n    emphasis = 'subtle',\n    isFullWidth = false,\n    color = 'neutral',\n    actions,\n    testID,\n    icon,\n    ...rest\n  }: AlertProps,\n  ref: React.Ref<BladeElementRef>,\n): ReactElement | null => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const [isVisible, setIsVisible] = useState(true);\n\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isMobile = !isDesktop;\n\n  const Icon = icon ?? intentIconMap[color];\n  let iconOffset: DotNotationSpacingStringToken = 'spacing.1';\n\n  // certain special cases below needs special care for near perfect alignment\n  if (isReactNative) {\n    if (isFullWidth && !title) {\n      iconOffset = 'spacing.1';\n    } else if (!isFullWidth && !title) {\n      iconOffset = 'spacing.0';\n    } else if (!isFullWidth && title) {\n      iconOffset = 'spacing.2';\n    }\n  } else if (isMobile) {\n    if (!isFullWidth && title) {\n      iconOffset = 'spacing.2';\n    } else if (isFullWidth && !title) {\n      iconOffset = 'spacing.2';\n    }\n  } else if (isFullWidth) {\n    iconOffset = 'spacing.1';\n  }\n\n  const shouldCenterAlign = isFullWidth && !title;\n  let alignment: 'center' | 'flex-start' = 'flex-start';\n  if (!isFullWidth) alignment = 'flex-start';\n  if (shouldCenterAlign) alignment = 'center';\n\n  const leadingIcon = (\n    <BaseBox display=\"flex\" alignSelf={alignment} marginTop={iconOffset}>\n      <Icon\n        color={\n          emphasis === 'intense'\n            ? 'surface.icon.staticWhite.normal'\n            : `feedback.icon.${color}.${emphasis === 'subtle' ? 'intense' : 'subtle'}`\n        }\n        size=\"medium\"\n      />\n    </BaseBox>\n  );\n\n  const textColor =\n    emphasis === 'intense' ? 'surface.text.staticWhite.normal' : 'surface.text.gray.subtle';\n  const _title = title ? (\n    <BaseBox marginBottom=\"spacing.2\">\n      <Text color={textColor} size=\"medium\" weight=\"semibold\">\n        {title}\n      </Text>\n    </BaseBox>\n  ) : null;\n\n  const _description = (\n    <BaseBox marginTop={title || isReactNative ? 'spacing.0' : 'spacing.1'}>\n      <Text color={textColor} size=\"small\">\n        {description}\n      </Text>\n    </BaseBox>\n  );\n\n  const primaryAction = actions?.primary ? (\n    <BaseBox\n      marginRight=\"spacing.5\"\n      display={isReactNative ? castNativeType('flex') : castWebType('inline-flex')}\n    >\n      <BaseButton\n        size=\"small\"\n        onClick={actions.primary.onClick}\n        color={emphasis === 'intense' ? 'white' : color}\n        variant=\"secondary\"\n      >\n        {actions.primary.text}\n      </BaseButton>\n    </BaseBox>\n  ) : null;\n\n  const secondaryActionParams: Partial<SecondaryActionLinkButton> | null = actions?.secondary\n    ? {\n        onClick: actions.secondary.onClick,\n      }\n    : null;\n\n  /**\n   * TS assumes only common properties to be present for `SecondaryAction` union type\n   * We add a type guard that checks if href is present on secondary action:\n   * - If yes, then TS can assume it to be `SecondaryActionLinkButton` (href being a required property)\n   * - If no, then it would be `SecondaryActionButton` (and link properties wouldn't be needed)\n   */\n  if (actions?.secondary && secondaryActionParams && 'href' in actions.secondary) {\n    secondaryActionParams.href = actions.secondary.href;\n    secondaryActionParams.target = actions.secondary.target;\n    secondaryActionParams.rel = actions.secondary.rel;\n  }\n\n  const secondaryAction = actions?.secondary ? (\n    <BaseBox marginRight=\"spacing.4\" display={(isReactNative ? 'flex' : 'inline-flex') as never}>\n      <BaseLink\n        size=\"small\"\n        color={emphasis === 'intense' ? 'white' : color}\n        {...secondaryActionParams}\n      >\n        {actions.secondary.text}\n      </BaseLink>\n    </BaseBox>\n  ) : null;\n\n  // For certain cases we wish to render actions inline with text content\n  const showActionsHorizontal = isFullWidth && isDesktop;\n\n  const actionsHorizontal =\n    showActionsHorizontal && (primaryAction || secondaryAction) ? (\n      <BaseBox flexDirection=\"row\" alignItems=\"center\">\n        {primaryAction}\n        {secondaryAction}\n      </BaseBox>\n    ) : null;\n\n  const actionsVertical =\n    !showActionsHorizontal && (primaryAction || secondaryAction) ? (\n      <BaseBox marginTop=\"spacing.4\" flexDirection=\"row\" alignItems=\"center\">\n        {primaryAction}\n        {secondaryAction}\n      </BaseBox>\n    ) : null;\n\n  const onClickDismiss = (): void => {\n    if (onDismiss) {\n      onDismiss();\n    }\n    setIsVisible(false);\n  };\n  const closeButton = isDismissible ? (\n    <CloseButtonWrapper>\n      <IconButton\n        accessibilityLabel=\"Dismiss alert\"\n        onClick={onClickDismiss}\n        emphasis={emphasis === 'intense' ? 'subtle' : 'intense'}\n        size=\"large\"\n        icon={CloseIcon}\n      />\n    </CloseButtonWrapper>\n  ) : null;\n\n  const a11yProps = makeAccessible({\n    // React Native doesn't has status as role\n    role: isReactNative || color === 'negative' || color === 'notice' ? 'alert' : 'status',\n    // override the implicit live region of role `alert`\n    ...(color === 'notice' && { liveRegion: 'polite' }),\n  });\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <BaseBox\n      ref={ref as never}\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Alert, testID })}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <StyledAlert\n        color={color}\n        emphasis={emphasis}\n        isFullWidth={isFullWidth}\n        isDesktop={isDesktop}\n        textAlign={'left' as never}\n      >\n        {leadingIcon}\n        <BaseBox\n          flex={1}\n          paddingLeft={isFullWidth ? 'spacing.4' : 'spacing.3'}\n          paddingRight={showActionsHorizontal ? 'spacing.4' : 'spacing.2'}\n        >\n          {_title}\n          {_description}\n          {actionsVertical}\n        </BaseBox>\n        {actionsHorizontal}\n        {closeButton}\n      </StyledAlert>\n    </BaseBox>\n  );\n};\n\nconst Alert = forwardRef(_Alert);\n\nexport type { AlertProps };\nexport { Alert };\n"],"names":["isReactNative","getPlatformType","CloseButtonWrapper","BaseBox","Fragment","intentIconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","_Alert","_ref","ref","description","title","_ref$isDismissible","isDismissible","onDismiss","_ref$emphasis","emphasis","_ref$isFullWidth","isFullWidth","_ref$color","color","actions","testID","icon","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","_useState","useState","_useState2","_slicedToArray","isVisible","setIsVisible","isDesktop","isMobile","Icon","iconOffset","shouldCenterAlign","alignment","leadingIcon","_jsx","display","alignSelf","marginTop","children","concat","size","textColor","_title","marginBottom","Text","weight","_description","primaryAction","primary","marginRight","castNativeType","castWebType","BaseButton","onClick","variant","text","secondaryActionParams","secondary","href","target","rel","secondaryAction","BaseLink","_objectSpread","showActionsHorizontal","actionsHorizontal","_jsxs","flexDirection","alignItems","actionsVertical","onClickDismiss","closeButton","IconButton","accessibilityLabel","CloseIcon","a11yProps","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","Alert","getStyledProps","makeAnalyticsAttribute","StyledAlert","textAlign","flex","paddingLeft","paddingRight","forwardRef"],"mappings":"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"}