@razorpay/blade 11.3.1 → 11.5.0

package/build/lib/web/development/components/Button/BaseButton/buttonTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTokens.js","sources":["../../../../../../../src/components/Button/BaseButton/buttonTokens.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport type { BaseButtonProps } from './BaseButton';\nimport type { Theme } from '~components/BladeProvider';\nimport type { IconSize } from '~components/Icons';\nimport type { SpinnerProps } from '~components/Spinner';\nimport type { Size } from '~tokens/global';\nimport { size } from '~tokens/global';\nimport type { FeedbackColors } from '~tokens/theme/theme';\n\nexport type ButtonMinHeight = Size[28] | Size[32] | Size[36] | Size[48];\n\nexport type ButtonTypography = {\n  fonts: {\n    size: Record<NonNullable<BaseButtonProps['size']>, keyof Theme['typography']['fonts']['size']>;\n  };\n  lineHeights: Record<\n    NonNullable<BaseButtonProps['size']>,\n    keyof Theme['typography']['lineHeights']\n  >;\n};\n\nconst backgroundColor = (property: 'background' | 'border') => {\n  const isBorder = property === 'border';\n  return {\n    base: {\n      primary: {\n        default: `interactive.${property}.primary.default`,\n        highlighted: `interactive.${property}.primary.highlighted`,\n        disabled: `interactive.${property}.primary.disabled`,\n      },\n      secondary: {\n        default: isBorder ? 'interactive.border.primary.default' : 'transparent',\n        highlighted: isBorder\n          ? `interactive.border.primary.default`\n          : `interactive.background.primary.faded`,\n        disabled: isBorder ? `interactive.border.primary.disabled` : `transparent`,\n      },\n      tertiary: {\n        default: `interactive.${property}.gray.default`,\n        highlighted: `interactive.${property}.gray.highlighted`,\n        disabled: `interactive.${property}.gray.disabled`,\n      },\n    },\n    white: {\n      primary: {\n        default: `interactive.${property}.staticWhite.default`,\n        highlighted: `interactive.${property}.staticWhite.highlighted`,\n        disabled: `interactive.${property}.staticWhite.disabled`,\n      },\n      secondary: {\n        default: isBorder ? 'interactive.border.staticWhite.highlighted' : 'transparent',\n        highlighted: isBorder\n          ? 'interactive.border.staticWhite.highlighted'\n          : 'interactive.background.staticWhite.faded',\n        disabled: isBorder ? `interactive.border.staticWhite.disabled` : 'transparent',\n      },\n      tertiary: {\n        default: `interactive.background.staticWhite.faded`,\n        highlighted: `interactive.background.staticWhite.fadedHighlighted`,\n        disabled: `interactive.background.staticWhite.disabled`,\n      },\n    },\n    color: (color: FeedbackColors) => {\n      return {\n        primary: {\n          default: `interactive.${property}.${color}.default`,\n          highlighted: `interactive.${property}.${color}.highlighted`,\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n        secondary: {\n          default: isBorder\n            ? (`interactive.border.${color}.default` as const)\n            : (`interactive.background.${color}.faded` as const),\n          highlighted: isBorder\n            ? (`interactive.border.${color}.default` as const)\n            : (`interactive.background.${color}.fadedHighlighted` as const),\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n      } as const;\n    },\n  } as const;\n};\n\nconst textColor = (property: 'icon' | 'text') => {\n  return {\n    base: {\n      primary: {\n        default: `interactive.${property}.onPrimary.normal`,\n        highlighted: `interactive.${property}.onPrimary.normal`,\n        disabled: `interactive.${property}.primary.disabled`,\n      },\n      secondary: {\n        default: `interactive.${property}.primary.subtle`,\n        highlighted: `interactive.${property}.primary.subtle`,\n        disabled: `interactive.${property}.primary.disabled`,\n      },\n      tertiary: {\n        default: `interactive.${property}.gray.normal`,\n        highlighted: `interactive.${property}.gray.normal`,\n        disabled: `interactive.${property}.gray.disabled`,\n      },\n    },\n    white: {\n      primary: {\n        default: `interactive.${property}.staticBlack.muted`,\n        highlighted: `interactive.${property}.staticBlack.muted`,\n        disabled: `interactive.${property}.staticBlack.disabled`,\n      },\n      secondary: {\n        default: `interactive.${property}.staticWhite.normal`,\n        highlighted: `interactive.${property}.staticWhite.normal`,\n        disabled: `interactive.${property}.staticWhite.disabled`,\n      },\n      tertiary: {\n        default: `interactive.${property}.staticWhite.normal`,\n        highlighted: `interactive.${property}.staticWhite.normal`,\n        disabled: `interactive.${property}.staticWhite.disabled`,\n      },\n    },\n    color: (color: FeedbackColors) => {\n      return {\n        primary: {\n          default: `interactive.${property}.staticWhite.normal`,\n          highlighted: `interactive.${property}.staticWhite.normal`,\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n        secondary: {\n          default: `interactive.${property}.${color}.normal`,\n          highlighted: `interactive.${property}.${color}.normal`,\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n      } as const;\n    },\n  } as const;\n};\n\nconst typography: ButtonTypography = {\n  fonts: {\n    size: {\n      xsmall: 50,\n      small: 50,\n      medium: 100,\n      large: 200,\n    },\n  },\n  lineHeights: {\n    xsmall: 75,\n    small: 75,\n    medium: 100,\n    large: 200,\n  },\n};\n\nconst minHeight: Record<NonNullable<BaseButtonProps['size']>, ButtonMinHeight> = {\n  xsmall: size[28],\n  small: size[32],\n  medium: size[36],\n  large: size[48],\n};\n\nconst buttonPadding: Record<\n  NonNullable<BaseButtonProps['size']>,\n  Record<'top' | 'bottom' | 'left' | 'right', keyof Theme['spacing']>\n> = {\n  xsmall: {\n    top: 0,\n    bottom: 0,\n    left: 3,\n    right: 3,\n  },\n  small: {\n    top: 0,\n    bottom: 0,\n    left: 4,\n    right: 4,\n  },\n  medium: {\n    top: 0,\n    bottom: 0,\n    left: 6,\n    right: 6,\n  },\n  large: {\n    top: 0,\n    bottom: 0,\n    left: 6,\n    right: 6,\n  },\n};\n\nconst buttonIconOnlyPadding: Record<\n  NonNullable<BaseButtonProps['size']>,\n  Record<'top' | 'bottom' | 'left' | 'right', keyof Theme['spacing']>\n> = {\n  xsmall: {\n    top: 0,\n    bottom: 0,\n    left: 4, // should be `6px` as per design but we're making it `8px` since `6px` is not available as a spacing token\n    right: 4, // should be `6px` as per design but we're making it `8px` since `6px` is not available as a spacing token\n  },\n  small: {\n    top: 0,\n    bottom: 0,\n    left: 3,\n    right: 3,\n  },\n  medium: {\n    top: 0,\n    bottom: 0,\n    left: 3,\n    right: 3,\n  },\n  large: {\n    top: 0,\n    bottom: 0,\n    left: 2,\n    right: 2,\n  },\n};\n\nconst buttonSizeToIconSizeMap: Record<NonNullable<BaseButtonProps['size']>, IconSize> = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'medium',\n  large: 'medium',\n};\n\nconst buttonIconOnlySizeToIconSizeMap: Record<NonNullable<BaseButtonProps['size']>, IconSize> = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'medium',\n  large: 'medium',\n};\n\nconst buttonSizeToSpinnerSizeMap: Record<\n  NonNullable<BaseButtonProps['size']>,\n  SpinnerProps['size']\n> = {\n  xsmall: 'medium',\n  small: 'large',\n  medium: 'large',\n  large: 'xlarge',\n};\n\nconst buttonIconPadding: Record<NonNullable<BaseButtonProps['size']>, keyof Theme['spacing']> = {\n  xsmall: 1,\n  small: 1,\n  medium: 2,\n  large: 2,\n};\n\nexport {\n  backgroundColor,\n  textColor,\n  typography,\n  minHeight,\n  buttonSizeToIconSizeMap,\n  buttonIconOnlySizeToIconSizeMap,\n  buttonSizeToSpinnerSizeMap,\n  buttonIconPadding,\n  buttonPadding,\n  buttonIconOnlyPadding,\n};\n"],"names":["backgroundColor","property","isBorder","base","primary","concat","highlighted","disabled","secondary","tertiary","white","color","textColor","typography","fonts","size","xsmall","small","medium","large","lineHeights","minHeight","buttonPadding","top","bottom","left","right","buttonIconOnlyPadding","buttonSizeToIconSizeMap","buttonIconOnlySizeToIconSizeMap","buttonSizeToSpinnerSizeMap","buttonIconPadding"],"mappings":";;;AAAA;;AAqBA,IAAMA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAiC,EAAK;AAC7D,EAAA,IAAMC,QAAQ,GAAGD,QAAQ,KAAK,QAAQ,CAAA;EACtC,OAAO;AACLE,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE;QACP,SAAAC,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAkB,kBAAA,CAAA;AAClDK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAsB,sBAAA,CAAA;QAC1DM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,mBAAA,CAAA;OAClC;AACDO,MAAAA,SAAS,EAAE;AACT,QAAA,SAAA,EAASN,QAAQ,GAAG,oCAAoC,GAAG,aAAa;QACxEI,WAAW,EAAEJ,QAAQ,GAEqB,oCAAA,GAAA,sCAAA;AAC1CK,QAAAA,QAAQ,EAAEL,QAAQ,GAAA,qCAAA,GAAA,aAAA;OACnB;AACDO,MAAAA,QAAQ,EAAE;QACR,SAAAJ,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAe,eAAA,CAAA;AAC/CK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAmB,mBAAA,CAAA;QACvDM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,gBAAA,CAAA;AACnC,OAAA;KACD;AACDS,IAAAA,KAAK,EAAE;AACLN,MAAAA,OAAO,EAAE;QACP,SAAAC,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAsB,sBAAA,CAAA;AACtDK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAA0B,0BAAA,CAAA;QAC9DM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,uBAAA,CAAA;OAClC;AACDO,MAAAA,SAAS,EAAE;AACT,QAAA,SAAA,EAASN,QAAQ,GAAG,4CAA4C,GAAG,aAAa;AAChFI,QAAAA,WAAW,EAAEJ,QAAQ,GACjB,4CAA4C,GAC5C,0CAA0C;QAC9CK,QAAQ,EAAEL,QAAQ,GAA+C,yCAAA,GAAA,aAAA;OAClE;AACDO,MAAAA,QAAQ,EAAE;QACR,SAAmD,EAAA,0CAAA;AACnDH,QAAAA,WAAW,EAAuD,qDAAA;QAClEC,QAAQ,EAAA,6CAAA;AACV,OAAA;KACD;AACDI,IAAAA,KAAK,EAAE,SAAAA,KAACA,CAAAA,MAAqB,EAAK;MAChC,OAAO;AACLP,QAAAA,OAAO,EAAE;AACP,UAAA,SAAA,EAAA,cAAA,CAAAC,MAAA,CAAwBJ,QAAQ,OAAAI,MAAA,CAAIM,MAAK,EAAU,UAAA,CAAA;UACnDL,WAAW,EAAA,cAAA,CAAAD,MAAA,CAAiBJ,QAAQ,OAAAI,MAAA,CAAIM,MAAK,EAAc,cAAA,CAAA;AAC3DJ,UAAAA,QAAQ,iBAAAF,MAAA,CAAiBJ,QAAQ,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIM,MAAK,EAAA,WAAA,CAAA;SAC3C;AACDH,QAAAA,SAAS,EAAE;UACT,SAASN,EAAAA,QAAQ,yBAAAG,MAAA,CACUM,MAAK,EAAAN,UAAAA,CAAAA,GAAAA,yBAAAA,CAAAA,MAAA,CACDM,MAAK,EAAkB,QAAA,CAAA;UACtDL,WAAW,EAAEJ,QAAQ,GAAA,qBAAA,CAAAG,MAAA,CACMM,MAAK,EAAAN,UAAAA,CAAAA,GAAAA,yBAAAA,CAAAA,MAAA,CACDM,MAAK,EAA6B,mBAAA,CAAA;AACjEJ,UAAAA,QAAQ,iBAAAF,MAAA,CAAiBJ,QAAQ,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIM,MAAK,EAAA,WAAA,CAAA;AAC5C,SAAA;OACD,CAAA;AACH,KAAA;GACD,CAAA;AACH,EAAC;AAED,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIX,QAAyB,EAAK;EAC/C,OAAO;AACLE,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE;QACP,SAAAC,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAmB,mBAAA,CAAA;AACnDK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAmB,mBAAA,CAAA;QACvDM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,mBAAA,CAAA;OAClC;AACDO,MAAAA,SAAS,EAAE;QACT,SAAAH,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAiB,iBAAA,CAAA;AACjDK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAiB,iBAAA,CAAA;QACrDM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,mBAAA,CAAA;OAClC;AACDQ,MAAAA,QAAQ,EAAE;QACR,SAAAJ,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAc,cAAA,CAAA;AAC9CK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAc,cAAA,CAAA;QAClDM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,gBAAA,CAAA;AACnC,OAAA;KACD;AACDS,IAAAA,KAAK,EAAE;AACLN,MAAAA,OAAO,EAAE;QACP,SAAAC,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAoB,oBAAA,CAAA;AACpDK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAoB,oBAAA,CAAA;QACxDM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,uBAAA,CAAA;OAClC;AACDO,MAAAA,SAAS,EAAE;QACT,SAAAH,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAqB,qBAAA,CAAA;AACrDK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAqB,qBAAA,CAAA;QACzDM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,uBAAA,CAAA;OAClC;AACDQ,MAAAA,QAAQ,EAAE;QACR,SAAAJ,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAqB,qBAAA,CAAA;AACrDK,QAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAqB,qBAAA,CAAA;QACzDM,QAAQ,EAAA,cAAA,CAAAF,MAAA,CAAiBJ,QAAQ,EAAA,uBAAA,CAAA;AACnC,OAAA;KACD;AACDU,IAAAA,KAAK,EAAE,SAAAA,KAACA,CAAAA,OAAqB,EAAK;MAChC,OAAO;AACLP,QAAAA,OAAO,EAAE;UACP,SAAAC,EAAAA,cAAAA,CAAAA,MAAA,CAAwBJ,QAAQ,EAAqB,qBAAA,CAAA;AACrDK,UAAAA,WAAW,EAAAD,cAAAA,CAAAA,MAAA,CAAiBJ,QAAQ,EAAqB,qBAAA,CAAA;AACzDM,UAAAA,QAAQ,iBAAAF,MAAA,CAAiBJ,QAAQ,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIM,OAAK,EAAA,WAAA,CAAA;SAC3C;AACDH,QAAAA,SAAS,EAAE;AACT,UAAA,SAAA,EAAA,cAAA,CAAAH,MAAA,CAAwBJ,QAAQ,OAAAI,MAAA,CAAIM,OAAK,EAAS,SAAA,CAAA;UAClDL,WAAW,EAAA,cAAA,CAAAD,MAAA,CAAiBJ,QAAQ,OAAAI,MAAA,CAAIM,OAAK,EAAS,SAAA,CAAA;AACtDJ,UAAAA,QAAQ,iBAAAF,MAAA,CAAiBJ,QAAQ,EAAAI,GAAAA,CAAAA,CAAAA,MAAA,CAAIM,OAAK,EAAA,WAAA,CAAA;AAC5C,SAAA;OACD,CAAA;AACH,KAAA;GACD,CAAA;AACH,EAAC;AAED,IAAME,UAA4B,GAAG;AACnCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,MAAM,EAAE,EAAE;AACVC,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,MAAM,EAAE,GAAG;AACXC,MAAAA,KAAK,EAAE,GAAA;AACT,KAAA;GACD;AACDC,EAAAA,WAAW,EAAE;AACXJ,IAAAA,MAAM,EAAE,EAAE;AACVC,IAAAA,KAAK,EAAE,EAAE;AACTC,IAAAA,MAAM,EAAE,GAAG;AACXC,IAAAA,KAAK,EAAE,GAAA;AACT,GAAA;AACF,EAAC;AAED,IAAME,SAAwE,GAAG;AAC/EL,EAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;AAChBE,EAAAA,KAAK,EAAEF,IAAI,CAAC,EAAE,CAAC;AACfG,EAAAA,MAAM,EAAEH,IAAI,CAAC,EAAE,CAAC;EAChBI,KAAK,EAAEJ,IAAI,CAAC,EAAE,CAAA;AAChB,EAAC;AAED,IAAMO,aAGL,GAAG;AACFN,EAAAA,MAAM,EAAE;AACNO,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AACPC,IAAAA,KAAK,EAAE,CAAA;GACR;AACDT,EAAAA,KAAK,EAAE;AACLM,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AACPC,IAAAA,KAAK,EAAE,CAAA;GACR;AACDR,EAAAA,MAAM,EAAE;AACNK,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AACPC,IAAAA,KAAK,EAAE,CAAA;GACR;AACDP,EAAAA,KAAK,EAAE;AACLI,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AACPC,IAAAA,KAAK,EAAE,CAAA;AACT,GAAA;AACF,EAAC;AAED,IAAMC,qBAGL,GAAG;AACFX,EAAAA,MAAM,EAAE;AACNO,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AAAE;IACTC,KAAK,EAAE,CAAC;GACT;;AACDT,EAAAA,KAAK,EAAE;AACLM,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AACPC,IAAAA,KAAK,EAAE,CAAA;GACR;AACDR,EAAAA,MAAM,EAAE;AACNK,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AACPC,IAAAA,KAAK,EAAE,CAAA;GACR;AACDP,EAAAA,KAAK,EAAE;AACLI,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,IAAI,EAAE,CAAC;AACPC,IAAAA,KAAK,EAAE,CAAA;AACT,GAAA;AACF,EAAC;AAED,IAAME,uBAA+E,GAAG;AACtFZ,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAC;AAED,IAAMU,+BAAuF,GAAG;AAC9Fb,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAC;AAED,IAAMW,0BAGL,GAAG;AACFd,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAC;AAED,IAAMY,iBAAuF,GAAG;AAC9Ff,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,KAAK,EAAE,CAAC;AACRC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,KAAK,EAAE,CAAA;AACT;;;;"}
+{"version":3,"file":"buttonTokens.js","sources":["../../../../../../../src/components/Button/BaseButton/buttonTokens.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport type { BaseButtonProps } from './BaseButton';\nimport type { Theme } from '~components/BladeProvider';\nimport type { IconSize } from '~components/Icons';\nimport type { SpinnerProps } from '~components/Spinner';\nimport type { Size } from '~tokens/global';\nimport { size } from '~tokens/global';\nimport type { FeedbackColors } from '~tokens/theme/theme';\n\nexport type ButtonMinHeight = Size[28] | Size[32] | Size[36] | Size[48];\n\nexport type ButtonTypography = {\n  fonts: {\n    size: Record<NonNullable<BaseButtonProps['size']>, keyof Theme['typography']['fonts']['size']>;\n  };\n  lineHeights: Record<\n    NonNullable<BaseButtonProps['size']>,\n    keyof Theme['typography']['lineHeights']\n  >;\n};\n\nconst backgroundColor = (property: 'background' | 'border') => {\n  const isBorder = property === 'border';\n  return {\n    base: {\n      primary: {\n        default: `interactive.${property}.primary.default`,\n        highlighted: `interactive.${property}.primary.highlighted`,\n        disabled: `interactive.${property}.primary.disabled`,\n      },\n      secondary: {\n        default: isBorder ? 'interactive.border.primary.default' : 'transparent',\n        highlighted: isBorder\n          ? `interactive.border.primary.default`\n          : `interactive.background.primary.faded`,\n        disabled: isBorder ? `interactive.border.primary.disabled` : `transparent`,\n      },\n      tertiary: {\n        default: `interactive.${property}.gray.default`,\n        highlighted: `interactive.${property}.gray.highlighted`,\n        disabled: `interactive.${property}.gray.disabled`,\n      },\n    },\n    white: {\n      primary: {\n        default: `interactive.${property}.staticWhite.default`,\n        highlighted: `interactive.${property}.staticWhite.highlighted`,\n        disabled: `interactive.${property}.staticWhite.disabled`,\n      },\n      secondary: {\n        default: isBorder ? 'interactive.border.staticWhite.highlighted' : 'transparent',\n        highlighted: isBorder\n          ? 'interactive.border.staticWhite.highlighted'\n          : 'interactive.background.staticWhite.faded',\n        disabled: isBorder ? `interactive.border.staticWhite.disabled` : 'transparent',\n      },\n      tertiary: {\n        default: `interactive.background.staticWhite.faded`,\n        highlighted: `interactive.background.staticWhite.fadedHighlighted`,\n        disabled: `interactive.background.staticWhite.disabled`,\n      },\n    },\n    color: (color: FeedbackColors) => {\n      return {\n        primary: {\n          default: `interactive.${property}.${color}.default`,\n          highlighted: `interactive.${property}.${color}.highlighted`,\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n        secondary: {\n          default: isBorder\n            ? (`interactive.border.${color}.default` as const)\n            : (`interactive.background.${color}.faded` as const),\n          highlighted: isBorder\n            ? (`interactive.border.${color}.default` as const)\n            : (`interactive.background.${color}.fadedHighlighted` as const),\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n      } as const;\n    },\n  } as const;\n};\n\nconst textColor = (property: 'icon' | 'text') => {\n  return {\n    base: {\n      primary: {\n        default: `interactive.${property}.onPrimary.normal`,\n        highlighted: `interactive.${property}.onPrimary.normal`,\n        disabled: `interactive.${property}.primary.disabled`,\n      },\n      secondary: {\n        default: `interactive.${property}.primary.subtle`,\n        highlighted: `interactive.${property}.primary.subtle`,\n        disabled: `interactive.${property}.primary.disabled`,\n      },\n      tertiary: {\n        default: `interactive.${property}.gray.normal`,\n        highlighted: `interactive.${property}.gray.normal`,\n        disabled: `interactive.${property}.gray.disabled`,\n      },\n    },\n    white: {\n      primary: {\n        default: `interactive.${property}.staticBlack.muted`,\n        highlighted: `interactive.${property}.staticBlack.muted`,\n        disabled: `interactive.${property}.staticBlack.disabled`,\n      },\n      secondary: {\n        default: `interactive.${property}.staticWhite.normal`,\n        highlighted: `interactive.${property}.staticWhite.normal`,\n        disabled: `interactive.${property}.staticWhite.disabled`,\n      },\n      tertiary: {\n        default: `interactive.${property}.staticWhite.normal`,\n        highlighted: `interactive.${property}.staticWhite.normal`,\n        disabled: `interactive.${property}.staticWhite.disabled`,\n      },\n    },\n    color: (color: FeedbackColors) => {\n      return {\n        primary: {\n          default: `interactive.${property}.staticWhite.normal`,\n          highlighted: `interactive.${property}.staticWhite.normal`,\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n        secondary: {\n          default: `interactive.${property}.${color}.normal`,\n          highlighted: `interactive.${property}.${color}.normal`,\n          disabled: `interactive.${property}.${color}.disabled`,\n        },\n      } as const;\n    },\n  } as const;\n};\n\nconst typography: ButtonTypography = {\n  fonts: {\n    size: {\n      xsmall: 50,\n      small: 50,\n      medium: 100,\n      large: 200,\n    },\n  },\n  lineHeights: {\n    xsmall: 75,\n    small: 75,\n    medium: 100,\n    large: 200,\n  },\n};\n\nconst minHeight: Record<NonNullable<BaseButtonProps['size']>, ButtonMinHeight> = {\n  xsmall: size[28],\n  small: size[32],\n  medium: size[36],\n  large: size[48],\n};\n\nconst buttonPadding: Record<\n  NonNullable<BaseButtonProps['size']>,\n  Record<'top' | 'bottom' | 'left' | 'right', keyof Theme['spacing']>\n> = {\n  xsmall: {\n    top: 0,\n    bottom: 0,\n    left: 3,\n    right: 3,\n  },\n  small: {\n    top: 0,\n    bottom: 0,\n    left: 4,\n    right: 4,\n  },\n  medium: {\n    top: 0,\n    bottom: 0,\n    left: 6,\n    right: 6,\n  },\n  large: {\n    top: 0,\n    bottom: 0,\n    left: 6,\n    right: 6,\n  },\n};\n\nconst buttonIconOnlyPadding: Record<\n  NonNullable<BaseButtonProps['size']>,\n  Record<'top' | 'bottom' | 'left' | 'right', keyof Theme['spacing']>\n> = {\n  xsmall: {\n    top: 0,\n    bottom: 0,\n    left: 3, // should be `6px` as per design but we're making it `8px` since `6px` is not available as a spacing token\n    right: 3, // should be `6px` as per design but we're making it `8px` since `6px` is not available as a spacing token\n  },\n  small: {\n    top: 0,\n    bottom: 0,\n    left: 3,\n    right: 3,\n  },\n  medium: {\n    top: 0,\n    bottom: 0,\n    left: 3,\n    right: 3,\n  },\n  large: {\n    top: 0,\n    bottom: 0,\n    left: 2,\n    right: 2,\n  },\n};\n\nconst buttonSizeToIconSizeMap: Record<NonNullable<BaseButtonProps['size']>, IconSize> = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'medium',\n  large: 'medium',\n};\n\nconst buttonIconOnlySizeToIconSizeMap: Record<NonNullable<BaseButtonProps['size']>, IconSize> = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'medium',\n  large: 'medium',\n};\n\nconst buttonSizeToSpinnerSizeMap: Record<\n  NonNullable<BaseButtonProps['size']>,\n  SpinnerProps['size']\n> = {\n  xsmall: 'medium',\n  small: 'large',\n  medium: 'large',\n  large: 'xlarge',\n};\n\nconst buttonIconPadding: Record<NonNullable<BaseButtonProps['size']>, keyof Theme['spacing']> = {\n  xsmall: 1,\n  small: 1,\n  medium: 2,\n  large: 2,\n};\n\nexport {\n  backgroundColor,\n  textColor,\n  typography,\n  minHeight,\n  buttonSizeToIconSizeMap,\n  buttonIconOnlySizeToIconSizeMap,\n  buttonSizeToSpinnerSizeMap,\n  buttonIconPadding,\n  buttonPadding,\n  buttonIconOnlyPadding,\n};\n"],"names":["backgroundColor","property","isBorder","base","primary","concat","highlighted","disabled","secondary","tertiary","white","color","textColor","typography","fonts","size","xsmall","small","medium","large","lineHeights","minHeight","buttonPadding","top","bottom","left","right","buttonIconOnlyPadding","buttonSizeToIconSizeMap","buttonIconOnlySizeToIconSizeMap","buttonSizeToSpinnerSizeMap","buttonIconPadding"],"mappings":"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"}

package/build/lib/web/development/components/Button/Button/index.js

@@ -1,2 +1,2 @@
-export { default } from './Button.js';
+export { default as Button } from './Button.js';
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,229 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { FloatingOverlay, useFloating, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import React__default from 'react';
+import styled from 'styled-components';
+import usePresence from 'use-presence';
+import { drawerComponentIds } from './drawerComponentIds.js';
+import { DrawerContext } from './DrawerContext.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
+import { useDrawerStack } from './StackProvider.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/metaAttribute/index.js';
+import { useId } from '../../utils/useId.js';
+import '../../utils/useVerifyAllowedChildren/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.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; }
+var SHOW_DRAWER = 'show-drawer';
+var AnimatedDrawerContainer = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "Drawerweb__AnimatedDrawerContainer",
+  componentId: "sc-15ixhgr-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    isFirstDrawerInStack = _ref.isFirstDrawerInStack,
+    isVisible = _ref.isVisible;
+  var entranceTransition = "all ".concat(castWebType(castWebType(makeMotionTime(theme.motion.duration.gentle))), " ").concat(castWebType(theme.motion.easing.entrance.revealing));
+  var exitTransition = "all\n  ".concat(castWebType(makeMotionTime(theme.motion.duration.xmoderate)), "\n  ").concat(castWebType(theme.motion.easing.exit.revealing));
+  return {
+    opacity: isVisible ? 1 : 0,
+    transform: isVisible ? isFirstDrawerInStack ? 'translateX(calc(-100% - 16px))' : 'translateX(-100%)' : 'translateX(0%)',
+    transition: isVisible ? entranceTransition : exitTransition,
+    animationFillMode: 'initial'
+  };
+});
+var DrawerOverlay = /*#__PURE__*/styled(FloatingOverlay).withConfig({
+  displayName: "Drawerweb__DrawerOverlay",
+  componentId: "sc-15ixhgr-1"
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return _defineProperty({
+    opacity: 0,
+    transition: "opacity\n      ".concat(makeMotionTime(theme.motion.duration.xmoderate), "\n      ").concat(castWebType(theme.motion.easing.exit.revealing)),
+    backgroundColor: theme.colors.overlay.background.subtle
+  }, "&.".concat(SHOW_DRAWER), {
+    opacity: 1,
+    transition: "opacity ".concat(makeMotionTime(theme.motion.duration.gentle), " ").concat(castWebType(theme.motion.easing.entrance.revealing))
+  });
+});
+var _Drawer = function _Drawer(_ref4) {
+  var isOpen = _ref4.isOpen,
+    onDismiss = _ref4.onDismiss,
+    _ref4$zIndex = _ref4.zIndex,
+    zIndex = _ref4$zIndex === void 0 ? componentZIndices.drawer : _ref4$zIndex,
+    children = _ref4.children,
+    accessibilityLabel = _ref4.accessibilityLabel,
+    _ref4$showOverlay = _ref4.showOverlay,
+    showOverlay = _ref4$showOverlay === void 0 ? true : _ref4$showOverlay,
+    initialFocusRef = _ref4.initialFocusRef,
+    testID = _ref4.testID;
+  var closeButtonRef = React__default.useRef(null);
+  var _React$useState = React__default.useState(zIndex),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    zIndexState = _React$useState2[0],
+    setZIndexState = _React$useState2[1];
+  useVerifyAllowedChildren({
+    children: children,
+    componentName: 'Drawer',
+    allowedComponents: [drawerComponentIds.DrawerHeader, drawerComponentIds.DrawerBody]
+  });
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var drawerId = useId('drawer');
+  var _useDrawerStack = useDrawerStack(),
+    drawerStack = _useDrawerStack.drawerStack,
+    addToDrawerStack = _useDrawerStack.addToDrawerStack,
+    removeFromDrawerStack = _useDrawerStack.removeFromDrawerStack;
+  var _usePresence = usePresence(isOpen, {
+      enterTransitionDuration: theme.motion.duration.gentle,
+      exitTransitionDuration: theme.motion.duration.xmoderate,
+      initialEnter: true
+    }),
+    isMounted = _usePresence.isMounted,
+    isVisible = _usePresence.isVisible;
+  var _React$useMemo = React__default.useMemo(function () {
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+      var level = drawerStack.indexOf(drawerId) + 1;
+      return {
+        stackingLevel: level,
+        isFirstDrawerInStack: level === 1 && drawerStack.length > 1
+      };
+    }, [drawerId, drawerStack]),
+    stackingLevel = _React$useMemo.stackingLevel,
+    isFirstDrawerInStack = _React$useMemo.isFirstDrawerInStack;
+  var _useFloating = useFloating({
+      open: isMounted
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  React__default.useEffect(function () {
+    if (isOpen) {
+      addToDrawerStack(drawerId);
+    } else {
+      removeFromDrawerStack(drawerId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  // When z-index is not defined by user, we use default drawer z index and add stackingLevel to ensure
+  // new drawer that opens, always opens on top of previous one.
+  React__default.useEffect(function () {
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    setZIndexState(zIndex + stackingLevel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMounted]);
+  return /*#__PURE__*/jsx(DrawerContext.Provider, {
+    value: {
+      close: onDismiss,
+      closeButtonRef: closeButtonRef
+    },
+    children: /*#__PURE__*/jsx(FloatingPortal, {
+      children: isMounted ? /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : closeButtonRef,
+        children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
+          position: "fixed"
+        }, metaAttribute({
+          name: MetaConstants.Drawer,
+          testID: testID
+        })), {}, {
+          zIndex: zIndexState,
+          children: [showOverlay || stackingLevel === 2 ? /*#__PURE__*/jsx(DrawerOverlay, _objectSpread({
+            onClick: function onClick() {
+              onDismiss();
+            },
+            className: isVisible ? SHOW_DRAWER : '',
+            lockScroll: true
+          }, metaAttribute({
+            testID: 'drawer-overlay'
+          }))) : null, /*#__PURE__*/jsx(AnimatedDrawerContainer, _objectSpread(_objectSpread({
+            isVisible: isVisible,
+            isFirstDrawerInStack: isFirstDrawerInStack,
+            width: {
+              base: '90%',
+              s: '375px',
+              m: '420px'
+            }
+          }, makeAccessible({
+            role: 'dialog',
+            modal: true,
+            label: accessibilityLabel
+          })), {}, {
+            position: "fixed",
+            top: "spacing.0",
+            left: "100%",
+            backgroundColor: "popup.background.subtle",
+            elevation: "highRaised",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            ref: refs.setFloating,
+            onKeyDown: function onKeyDown(event) {
+              if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape' || (event === null || event === void 0 ? void 0 : event.code) === 'Escape') {
+                onDismiss();
+              }
+            },
+            children: children
+          }))]
+        }))
+      }) : null
+    })
+  });
+};
+
+/**
+ * ### Drawer Component
+ * 
+ * A drawer is a panel that slides in mostly from right side of the screen over the existing content in the viewport. 
+ * It helps in providing additional details or context and can also be used to promote product features or new products.
+ * 
+ * ---
+ * 
+ * #### Usage
+ * 
+ * ```jsx
+  const MyDrawer = () => {
+    const [showDrawer, setShowDrawer] = React.useState(false);
+    return (
+      <Box>
+        <Button onClick={() => setShowDrawer(true)}>Open Drawer</Button>
+        <Drawer
+          isOpen={showDrawer}
+          onDismiss={() => setShowDrawer(false)}
+        >
+          <DrawerHeader title="Announcements" />
+          <DrawerBody>
+            <FTXAnnouncement />
+            <CatPictures />
+          </DrawerBody>
+        <Drawer>
+      </Box>
+    )
+  }
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-drawer Drawer Documentation}
+ * 
+ * 
+ */
+var Drawer = /*#__PURE__*/assignWithoutSideEffects(_Drawer, {
+  componentId: drawerComponentIds.Drawer
+});
+
+export { Drawer };
+//# sourceMappingURL=Drawer.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.web.js","sources":["../../../../../../src/components/Drawer/Drawer.web.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useFloating,\n} from '@floating-ui/react';\nimport type { CSSProperties } from 'react';\nimport React from 'react';\nimport styled from 'styled-components';\nimport usePresence from 'use-presence';\nimport { drawerComponentIds } from './drawerComponentIds';\nimport { DrawerContext } from './DrawerContext';\nimport type { DrawerProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { useDrawerStack } from '~components/Drawer/StackProvider';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useId } from '~utils/useId';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren';\n\nconst SHOW_DRAWER = 'show-drawer';\n\nconst AnimatedDrawerContainer = styled(BaseBox)<{\n  isFirstDrawerInStack: boolean;\n  isVisible: boolean;\n}>(({ theme, isFirstDrawerInStack, isVisible }) => {\n  const entranceTransition: CSSProperties['transition'] = `all ${castWebType(\n    castWebType(makeMotionTime(theme.motion.duration.gentle)),\n  )} ${castWebType(theme.motion.easing.entrance.revealing)}`;\n\n  const exitTransition: CSSProperties['transition'] = `all\n  ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n  ${castWebType(theme.motion.easing.exit.revealing)}`;\n\n  return {\n    opacity: isVisible ? 1 : 0,\n    transform: isVisible\n      ? isFirstDrawerInStack\n        ? 'translateX(calc(-100% - 16px))'\n        : 'translateX(-100%)'\n      : 'translateX(0%)',\n    transition: isVisible ? entranceTransition : exitTransition,\n    animationFillMode: 'initial',\n  };\n});\n\nconst DrawerOverlay = styled(FloatingOverlay)(({ theme }) => {\n  return {\n    opacity: 0,\n    transition: `opacity\n      ${makeMotionTime(theme.motion.duration.xmoderate)}\n      ${castWebType(theme.motion.easing.exit.revealing)}`,\n    backgroundColor: theme.colors.overlay.background.subtle,\n\n    [`&.${SHOW_DRAWER}`]: {\n      opacity: 1,\n      transition: `opacity ${makeMotionTime(theme.motion.duration.gentle)} ${castWebType(\n        theme.motion.easing.entrance.revealing,\n      )}`,\n    },\n  };\n});\n\nconst _Drawer = ({\n  isOpen,\n  onDismiss,\n  zIndex = componentZIndices.drawer,\n  children,\n  accessibilityLabel,\n  showOverlay = true,\n  initialFocusRef,\n  testID,\n}: DrawerProps): React.ReactElement => {\n  const closeButtonRef = React.useRef<HTMLDivElement>(null);\n  const [zIndexState, setZIndexState] = React.useState<number>(zIndex);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Drawer',\n    allowedComponents: [drawerComponentIds.DrawerHeader, drawerComponentIds.DrawerBody],\n  });\n\n  const { theme } = useTheme();\n  const drawerId = useId('drawer');\n  const { drawerStack, addToDrawerStack, removeFromDrawerStack } = useDrawerStack();\n\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    enterTransitionDuration: theme.motion.duration.gentle,\n    exitTransitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  const { stackingLevel, isFirstDrawerInStack } = React.useMemo(() => {\n    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    const level = drawerStack.indexOf(drawerId) + 1;\n    return {\n      stackingLevel: level,\n      isFirstDrawerInStack: level === 1 && drawerStack.length > 1,\n    };\n  }, [drawerId, drawerStack]);\n\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  React.useEffect(() => {\n    if (isOpen) {\n      addToDrawerStack(drawerId);\n    } else {\n      removeFromDrawerStack(drawerId);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  // When z-index is not defined by user, we use default drawer z index and add stackingLevel to ensure\n  // new drawer that opens, always opens on top of previous one.\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    setZIndexState(zIndex + stackingLevel);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMounted]);\n\n  return (\n    <DrawerContext.Provider value={{ close: onDismiss, closeButtonRef }}>\n      <FloatingPortal>\n        {isMounted ? (\n          <FloatingFocusManager context={context} initialFocus={initialFocusRef ?? closeButtonRef}>\n            <BaseBox\n              position=\"fixed\"\n              {...metaAttribute({\n                name: MetaConstants.Drawer,\n                testID,\n              })}\n              zIndex={zIndexState}\n            >\n              {showOverlay || stackingLevel === 2 ? (\n                <DrawerOverlay\n                  onClick={() => {\n                    onDismiss();\n                  }}\n                  className={isVisible ? SHOW_DRAWER : ''}\n                  lockScroll={true}\n                  {...metaAttribute({\n                    testID: 'drawer-overlay',\n                  })}\n                />\n              ) : null}\n              <AnimatedDrawerContainer\n                isVisible={isVisible}\n                isFirstDrawerInStack={isFirstDrawerInStack}\n                width={{ base: '90%', s: '375px', m: '420px' }}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                position=\"fixed\"\n                top=\"spacing.0\"\n                left=\"100%\"\n                backgroundColor=\"popup.background.subtle\"\n                elevation=\"highRaised\"\n                height=\"100%\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                ref={refs.setFloating}\n                onKeyDown={(event) => {\n                  if (event?.key === 'Escape' || event?.code === 'Escape') {\n                    onDismiss();\n                  }\n                }}\n              >\n                {children}\n              </AnimatedDrawerContainer>\n            </BaseBox>\n          </FloatingFocusManager>\n        ) : null}\n      </FloatingPortal>\n    </DrawerContext.Provider>\n  );\n};\n\n/**\n * ### Drawer Component\n * \n * A drawer is a panel that slides in mostly from right side of the screen over the existing content in the viewport. \n * It helps in providing additional details or context and can also be used to promote product features or new products.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n  const MyDrawer = () => {\n    const [showDrawer, setShowDrawer] = React.useState(false);\n    return (\n      <Box>\n        <Button onClick={() => setShowDrawer(true)}>Open Drawer</Button>\n        <Drawer\n          isOpen={showDrawer}\n          onDismiss={() => setShowDrawer(false)}\n        >\n          <DrawerHeader title=\"Announcements\" />\n          <DrawerBody>\n            <FTXAnnouncement />\n            <CatPictures />\n          </DrawerBody>\n        <Drawer>\n      </Box>\n    )\n  }\n * ```\n *\n *  ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-drawer Drawer Documentation}\n * \n * \n */\nconst Drawer = assignWithoutSideEffects(_Drawer, {\n  componentId: drawerComponentIds.Drawer,\n});\n\nexport { Drawer };\n"],"names":["SHOW_DRAWER","AnimatedDrawerContainer","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","isFirstDrawerInStack","isVisible","entranceTransition","concat","castWebType","makeMotionTime","motion","duration","gentle","easing","entrance","revealing","exitTransition","xmoderate","exit","opacity","transform","transition","animationFillMode","DrawerOverlay","FloatingOverlay","_ref2","_defineProperty","backgroundColor","colors","overlay","background","subtle","_Drawer","_ref4","isOpen","onDismiss","_ref4$zIndex","zIndex","componentZIndices","drawer","children","accessibilityLabel","_ref4$showOverlay","showOverlay","initialFocusRef","testID","closeButtonRef","React","useRef","_React$useState","useState","_React$useState2","_slicedToArray","zIndexState","setZIndexState","useVerifyAllowedChildren","componentName","allowedComponents","drawerComponentIds","DrawerHeader","DrawerBody","_useTheme","useTheme","drawerId","useId","_useDrawerStack","useDrawerStack","drawerStack","addToDrawerStack","removeFromDrawerStack","_usePresence","usePresence","enterTransitionDuration","exitTransitionDuration","initialEnter","isMounted","_React$useMemo","useMemo","level","indexOf","stackingLevel","length","_useFloating","useFloating","open","refs","context","useEffect","_jsx","DrawerContext","Provider","value","close","FloatingPortal","FloatingFocusManager","initialFocus","_jsxs","_objectSpread","position","metaAttribute","name","MetaConstants","Drawer","onClick","className","lockScroll","width","base","s","m","makeAccessible","role","modal","label","top","left","elevation","height","display","flexDirection","ref","setFloating","onKeyDown","event","key","code","assignWithoutSideEffects"],"mappings":"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"}

package/build/lib/web/development/components/Drawer/DrawerContext.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var DrawerContext = /*#__PURE__*/React__default.createContext({
+  close: function close() {}
+});
+
+export { DrawerContext };
+//# sourceMappingURL=DrawerContext.js.map

package/build/lib/web/development/components/Drawer/DrawerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContext.js","sources":["../../../../../../src/components/Drawer/DrawerContext.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\n\nconst DrawerContext = React.createContext<{\n  close: () => void;\n  closeButtonRef?: React.MutableRefObject<any>;\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n}>({ close: () => {} });\n\nexport { DrawerContext };\n"],"names":["DrawerContext","React","createContext","close"],"mappings":";;AAAA;AAGA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAItC;AAAEC,EAAAA,KAAK,EAAE,SAAAA,KAAA,GAAM,EAAC;AAAE,CAAC;;;;"}

package/build/lib/web/development/components/Drawer/DrawerSubcomponents.web.js

@@ -0,0 +1,65 @@
+import React__default from 'react';
+import { drawerComponentIds } from './drawerComponentIds.js';
+import { DrawerContext } from './DrawerContext.js';
+import { BaseHeader } from '../BaseHeaderFooter/BaseHeader.js';
+import '../Box/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { Box } from '../Box/Box.js';
+
+var _DrawerHeader = function _DrawerHeader(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    leading = _ref.leading,
+    trailing = _ref.trailing,
+    titleSuffix = _ref.titleSuffix;
+  var _React$useContext = React__default.useContext(DrawerContext),
+    close = _React$useContext.close,
+    closeButtonRef = _React$useContext.closeButtonRef;
+  return /*#__PURE__*/jsx(BaseHeader, {
+    showCloseButton: true,
+    closeButtonRef: closeButtonRef,
+    onCloseButtonClick: function onCloseButtonClick() {
+      return close();
+    },
+    title: title,
+    titleSuffix: titleSuffix,
+    subtitle: subtitle,
+    leading: leading,
+    trailing: trailing
+  });
+};
+
+/**
+ * #### Usage
+ *
+ * ```jsx
+ * <DrawerHeader
+ *  title="Announcements"
+ *  subtitle="Checkout what's new in Razorpay"
+ *  titleSuffix={<DrawerHeaderBadge>New</DrawerHeaderBadge>}
+ *  leading={<DrawerHeaderIcon icon={AnnouncementIcon} />}
+ *  trailing={<Button icon={DownloadIcon} />}
+ * />
+ * ```
+ *
+ */
+var DrawerHeader = /*#__PURE__*/assignWithoutSideEffects(_DrawerHeader, {
+  componentId: drawerComponentIds.DrawerHeader
+});
+var _DrawerBody = function _DrawerBody(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/jsx(Box, {
+    padding: "spacing.6",
+    overflow: "auto",
+    flex: "1",
+    children: children
+  });
+};
+var DrawerBody = /*#__PURE__*/assignWithoutSideEffects(_DrawerBody, {
+  componentId: drawerComponentIds.DrawerBody
+});
+
+export { DrawerBody, DrawerHeader };
+//# sourceMappingURL=DrawerSubcomponents.web.js.map

package/build/lib/web/development/components/Drawer/DrawerSubcomponents.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSubcomponents.web.js","sources":["../../../../../../src/components/Drawer/DrawerSubcomponents.web.tsx"],"sourcesContent":["import React from 'react';\nimport { drawerComponentIds } from './drawerComponentIds';\nimport { DrawerContext } from './DrawerContext';\nimport type { DrawerHeaderProps } from './types';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { Box } from '~components/Box';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\nconst _DrawerHeader = ({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  titleSuffix,\n}: DrawerHeaderProps): React.ReactElement => {\n  const { close, closeButtonRef } = React.useContext(DrawerContext);\n\n  return (\n    <BaseHeader\n      showCloseButton={true}\n      closeButtonRef={closeButtonRef}\n      onCloseButtonClick={() => close()}\n      title={title}\n      titleSuffix={titleSuffix}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n    />\n  );\n};\n\n/**\n * #### Usage\n *\n * ```jsx\n * <DrawerHeader\n *  title=\"Announcements\"\n *  subtitle=\"Checkout what's new in Razorpay\"\n *  titleSuffix={<DrawerHeaderBadge>New</DrawerHeaderBadge>}\n *  leading={<DrawerHeaderIcon icon={AnnouncementIcon} />}\n *  trailing={<Button icon={DownloadIcon} />}\n * />\n * ```\n *\n */\nconst DrawerHeader = assignWithoutSideEffects(_DrawerHeader, {\n  componentId: drawerComponentIds.DrawerHeader,\n});\n\nconst _DrawerBody = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <Box padding=\"spacing.6\" overflow=\"auto\" flex=\"1\">\n      {children}\n    </Box>\n  );\n};\nconst DrawerBody = assignWithoutSideEffects(_DrawerBody, {\n  componentId: drawerComponentIds.DrawerBody,\n});\n\nexport { DrawerHeader, DrawerBody };\n"],"names":["_DrawerHeader","_ref","title","subtitle","leading","trailing","titleSuffix","_React$useContext","React","useContext","DrawerContext","close","closeButtonRef","_jsx","BaseHeader","showCloseButton","onCloseButtonClick","DrawerHeader","assignWithoutSideEffects","componentId","drawerComponentIds","_DrawerBody","_ref2","children","Box","padding","overflow","flex","DrawerBody"],"mappings":";;;;;;;;;;AAQA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL3CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,WAAW,GAAAL,IAAA,CAAXK,WAAW,CAAA;AAEX,EAAA,IAAAC,iBAAA,GAAkCC,cAAK,CAACC,UAAU,CAACC,aAAa,CAAC;IAAzDC,KAAK,GAAAJ,iBAAA,CAALI,KAAK;IAAEC,cAAc,GAAAL,iBAAA,CAAdK,cAAc,CAAA;EAE7B,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,eAAe,EAAE,IAAK;AACtBH,IAAAA,cAAc,EAAEA,cAAe;IAC/BI,kBAAkB,EAAE,SAAAA,kBAAA,GAAA;MAAA,OAAML,KAAK,EAAE,CAAA;KAAC;AAClCT,IAAAA,KAAK,EAAEA,KAAM;AACbI,IAAAA,WAAW,EAAEA,WAAY;AACzBH,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GACpB,CAAC,CAAA;AAEN,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMY,YAAY,gBAAGC,wBAAwB,CAAClB,aAAa,EAAE;EAC3DmB,WAAW,EAAEC,kBAAkB,CAACH,YAAAA;AAClC,CAAC,EAAC;AAEF,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAwE;AAAA,EAAA,IAAlEC,QAAQ,GAAAD,KAAA,CAARC,QAAQ,CAAA;EAC7B,oBACEV,GAAA,CAACW,GAAG,EAAA;AAACC,IAAAA,OAAO,EAAC,WAAW;AAACC,IAAAA,QAAQ,EAAC,MAAM;AAACC,IAAAA,IAAI,EAAC,GAAG;AAAAJ,IAAAA,QAAA,EAC9CA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV,CAAC,CAAA;AACD,IAAMK,UAAU,gBAAGV,wBAAwB,CAACG,WAAW,EAAE;EACvDF,WAAW,EAAEC,kBAAkB,CAACQ,UAAAA;AAClC,CAAC;;;;"}

package/build/lib/web/development/components/Drawer/StackProvider.js

@@ -0,0 +1,57 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var StackingContext = /*#__PURE__*/React__default.createContext({
+  drawerStack: [],
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  addToDrawerStack: function addToDrawerStack() {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  removeFromDrawerStack: function removeFromDrawerStack() {}
+});
+var useStacking = function useStacking() {
+  var _React$useState = React__default.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    stack = _React$useState2[0],
+    setStack = _React$useState2[1];
+  var addToStack = function addToStack(elementId) {
+    if (stack.includes(elementId)) {
+      return;
+    }
+    setStack([].concat(_toConsumableArray(stack), [elementId]));
+  };
+  var removeFromStack = function removeFromStack(elementId) {
+    setStack(stack.filter(function (stackElementId) {
+      return stackElementId !== elementId;
+    }));
+  };
+  return [stack, addToStack, removeFromStack];
+};
+var DrawerStackProvider = function DrawerStackProvider(_ref) {
+  var children = _ref.children;
+  var _useStacking = useStacking(),
+    _useStacking2 = _slicedToArray(_useStacking, 3),
+    drawerStack = _useStacking2[0],
+    addToDrawerStack = _useStacking2[1],
+    removeFromDrawerStack = _useStacking2[2];
+  var contextValue = React__default.useMemo(function () {
+    return {
+      drawerStack: drawerStack,
+      addToDrawerStack: addToDrawerStack,
+      removeFromDrawerStack: removeFromDrawerStack
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [drawerStack]);
+  return /*#__PURE__*/jsx(StackingContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+var useDrawerStack = function useDrawerStack() {
+  return React__default.useContext(StackingContext);
+};
+
+export { DrawerStackProvider, useDrawerStack };
+//# sourceMappingURL=StackProvider.js.map

package/build/lib/web/development/components/Drawer/StackProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackProvider.js","sources":["../../../../../../src/components/Drawer/StackProvider.tsx"],"sourcesContent":["import React from 'react';\n\ntype StackActionType = (elementId: string) => void;\n\ntype GlobalStackStateType = {\n  drawerStack: string[];\n  addToDrawerStack: StackActionType;\n  removeFromDrawerStack: StackActionType;\n};\n\nconst StackingContext = React.createContext<GlobalStackStateType>({\n  drawerStack: [],\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  addToDrawerStack: () => {},\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  removeFromDrawerStack: () => {},\n});\n\nconst useStacking = (): [string[], StackActionType, StackActionType] => {\n  const [stack, setStack] = React.useState<string[]>([]);\n\n  const addToStack = (elementId: string): void => {\n    if (stack.includes(elementId)) {\n      return;\n    }\n\n    setStack([...stack, elementId]);\n  };\n\n  const removeFromStack = (elementId: string): void => {\n    setStack(stack.filter((stackElementId) => stackElementId !== elementId));\n  };\n\n  return [stack, addToStack, removeFromStack];\n};\n\nconst DrawerStackProvider = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  const [drawerStack, addToDrawerStack, removeFromDrawerStack] = useStacking();\n\n  const contextValue = React.useMemo<GlobalStackStateType>(\n    () => ({\n      drawerStack,\n      addToDrawerStack,\n      removeFromDrawerStack,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [drawerStack],\n  );\n\n  return <StackingContext.Provider value={contextValue}>{children}</StackingContext.Provider>;\n};\n\nconst useDrawerStack = (): GlobalStackStateType => {\n  return React.useContext(StackingContext);\n};\n\nexport { DrawerStackProvider, useDrawerStack };\n"],"names":["StackingContext","React","createContext","drawerStack","addToDrawerStack","removeFromDrawerStack","useStacking","_React$useState","useState","_React$useState2","_slicedToArray","stack","setStack","addToStack","elementId","includes","concat","_toConsumableArray","removeFromStack","filter","stackElementId","DrawerStackProvider","_ref","children","_useStacking","_useStacking2","contextValue","useMemo","_jsx","Provider","value","useDrawerStack","useContext"],"mappings":";;;;;AAUA,IAAMA,eAAe,gBAAGC,cAAK,CAACC,aAAa,CAAuB;AAChEC,EAAAA,WAAW,EAAE,EAAE;AACf;AACAC,EAAAA,gBAAgB,EAAE,SAAAA,gBAAA,GAAM,EAAE;AAC1B;AACAC,EAAAA,qBAAqB,EAAE,SAAAA,qBAAA,GAAM,EAAC;AAChC,CAAC,CAAC,CAAA;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,GAAuD;AACtE,EAAA,IAAAC,eAAA,GAA0BN,cAAK,CAACO,QAAQ,CAAW,EAAE,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAA/CI,IAAAA,KAAK,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,QAAQ,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AAEtB,EAAA,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAIC,SAAiB,EAAW;AAC9C,IAAA,IAAIH,KAAK,CAACI,QAAQ,CAACD,SAAS,CAAC,EAAE;AAC7B,MAAA,OAAA;AACF,KAAA;IAEAF,QAAQ,CAAA,EAAA,CAAAI,MAAA,CAAAC,kBAAA,CAAKN,KAAK,CAAA,EAAA,CAAEG,SAAS,CAAA,CAAC,CAAC,CAAA;GAChC,CAAA;AAED,EAAA,IAAMI,eAAe,GAAG,SAAlBA,eAAeA,CAAIJ,SAAiB,EAAW;AACnDF,IAAAA,QAAQ,CAACD,KAAK,CAACQ,MAAM,CAAC,UAACC,cAAc,EAAA;MAAA,OAAKA,cAAc,KAAKN,SAAS,CAAA;AAAA,KAAA,CAAC,CAAC,CAAA;GACzE,CAAA;AAED,EAAA,OAAO,CAACH,KAAK,EAAEE,UAAU,EAAEK,eAAe,CAAC,CAAA;AAC7C,CAAC,CAAA;AAED,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAwE;AAAA,EAAA,IAAlEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;AACrC,EAAA,IAAAC,YAAA,GAA+DlB,WAAW,EAAE;IAAAmB,aAAA,GAAAf,cAAA,CAAAc,YAAA,EAAA,CAAA,CAAA;AAArErB,IAAAA,WAAW,GAAAsB,aAAA,CAAA,CAAA,CAAA;AAAErB,IAAAA,gBAAgB,GAAAqB,aAAA,CAAA,CAAA,CAAA;AAAEpB,IAAAA,qBAAqB,GAAAoB,aAAA,CAAA,CAAA,CAAA,CAAA;AAE3D,EAAA,IAAMC,YAAY,GAAGzB,cAAK,CAAC0B,OAAO,CAChC,YAAA;IAAA,OAAO;AACLxB,MAAAA,WAAW,EAAXA,WAAW;AACXC,MAAAA,gBAAgB,EAAhBA,gBAAgB;AAChBC,MAAAA,qBAAqB,EAArBA,qBAAAA;KACD,CAAA;GAAC;AACF;EACA,CAACF,WAAW,CACd,CAAC,CAAA;AAED,EAAA,oBAAOyB,GAAA,CAAC5B,eAAe,CAAC6B,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;AAAAH,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAA2B,CAAC,CAAA;AAC7F,EAAC;AAED,IAAMQ,cAAc,GAAG,SAAjBA,cAAcA,GAA+B;AACjD,EAAA,OAAO9B,cAAK,CAAC+B,UAAU,CAAChC,eAAe,CAAC,CAAA;AAC1C;;;;"}

package/build/lib/web/development/components/Drawer/drawerComponentIds.js

@@ -0,0 +1,8 @@
+var drawerComponentIds = {
+  DrawerHeader: 'DrawerHeader',
+  DrawerBody: 'DrawerBody',
+  Drawer: 'Drawer'
+};
+
+export { drawerComponentIds };
+//# sourceMappingURL=drawerComponentIds.js.map

package/build/lib/web/development/components/Drawer/drawerComponentIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawerComponentIds.js","sources":["../../../../../../src/components/Drawer/drawerComponentIds.ts"],"sourcesContent":["export const drawerComponentIds = {\n  DrawerHeader: 'DrawerHeader',\n  DrawerBody: 'DrawerBody',\n  Drawer: 'Drawer',\n};\n"],"names":["drawerComponentIds","DrawerHeader","DrawerBody","Drawer"],"mappings":"AAAO,IAAMA,kBAAkB,GAAG;AAChCC,EAAAA,YAAY,EAAE,cAAc;AAC5BC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,MAAM,EAAE,QAAA;AACV;;;;"}

package/build/lib/web/development/components/Drawer/index.js

@@ -0,0 +1,4 @@
+export { Drawer } from './Drawer.web.js';
+export { DrawerBody, DrawerHeader } from './DrawerSubcomponents.web.js';
+import './types.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/components/Drawer/index.js.map

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

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

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

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

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

package/build/lib/web/development/components/Dropdown/DropdownOverlay.web.js

@@ -11,6 +11,7 @@ import '../../utils/metaAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import { useBottomSheetAndDropdownGlue } from '../BottomSheet/BottomSheetContext.js';
 import '../Box/BaseBox/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
 import { jsx } from 'react/jsx-runtime';
 import { size } from '../../tokens/global/size.js';
 import useTheme from '../BladeProvider/useTheme.js';
@@ -24,7 +25,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 OVERLAY_OFFSET = size['8'];
 var OVERLAY_PADDING = size['12']; // doesn't have to be exact. Just rough padding for floating ui to decide to show overlay on top or bottom
-var OVERLAY_ZINDEX = 1001;
 
 /**
  * Overlay of dropdown
@@ -36,7 +36,7 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
   var children = _ref.children,
     testID = _ref.testID,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? OVERLAY_ZINDEX : _ref$zIndex,
+    zIndex = _ref$zIndex === void 0 ? componentZIndices.dropdownOverlay : _ref$zIndex,
     width = _ref.width;
   var _useDropdown = useDropdown(),
     isOpen = _useDropdown.isOpen,

package/build/lib/web/development/components/Dropdown/DropdownOverlay.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOverlay.web.js","sources":["../../../../../../src/components/Dropdown/DropdownOverlay.web.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  autoUpdate,\n  offset,\n  size as sizeMiddleware,\n  useFloating,\n  useTransitionStyles,\n  flip,\n} from '@floating-ui/react';\nimport { useDropdown } from './useDropdown';\nimport { StyledDropdownOverlay } from './StyledDropdownOverlay';\nimport type { DropdownOverlayProps } from './types';\nimport { dropdownComponentIds } from './dropdownComponentIds';\nimport { useTheme } from '~components/BladeProvider';\n// Reading directly because its not possible to get theme object on top level to be used in keyframes\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useBottomSheetAndDropdownGlue } from '~components/BottomSheet/BottomSheetContext';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst OVERLAY_OFFSET: number = size['8'];\nconst OVERLAY_PADDING: number = size['12']; // doesn't have to be exact. Just rough padding for floating ui to decide to show overlay on top or bottom\nconst OVERLAY_ZINDEX = 1001;\n\n/**\n * Overlay of dropdown\n *\n * Wrap your ActionList within this component\n */\nconst _DropdownOverlay = ({\n  children,\n  testID,\n  zIndex = OVERLAY_ZINDEX,\n  width,\n}: DropdownOverlayProps): React.ReactElement | null => {\n  const { isOpen, triggererRef, triggererWrapperRef, dropdownTriggerer, setIsOpen } = useDropdown();\n  const { theme } = useTheme();\n  const bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();\n\n  const isMenu =\n    dropdownTriggerer !== dropdownComponentIds.triggers.SelectInput &&\n    dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete;\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    strategy: 'fixed',\n    placement: 'bottom-start',\n    elements: {\n      // Input triggers have their ref on internal input element but we want width height of overall visible input hence wrapperRef is needed\n      // We fallback to use `triggererRef` for triggers like button and link where wrapper is not needed\n      // Checkout: https://github.com/razorpay/blade/pull/1559#discussion_r1305438920\n      reference: triggererWrapperRef.current ?? triggererRef.current,\n    },\n    middleware: [\n      offset({\n        mainAxis: OVERLAY_OFFSET,\n      }),\n      flip({\n        padding: OVERLAY_OFFSET + OVERLAY_PADDING,\n      }),\n      sizeMiddleware({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, {\n            // in menu, we have flexible width between min and max\n            // in input triggers, we just take width of trigger\n            width: isMenu ? undefined : makeSize(rects.reference.width),\n            minWidth: isMenu ? makeSize(size['240']) : undefined,\n            maxWidth: isMenu ? makeSize(size['400']) : undefined,\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: () => ({\n      transform: `translateY(-${makeSize(size['8'])})`,\n      opacity: 0,\n    }),\n  });\n\n  React.useEffect(() => {\n    if (isOpen) {\n      // On Safari clicking on a non input element doesn't focuses it https://bugs.webkit.org/show_bug.cgi?id=22261\n      triggererRef.current?.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  return (\n    <BaseBox\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={refs.setFloating as any}\n      style={floatingStyles}\n      zIndex={zIndex}\n      display={isMounted ? 'flex' : 'none'}\n    >\n      <StyledDropdownOverlay\n        isInBottomSheet={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet}\n        elevation={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet ? undefined : 'midRaised'}\n        style={{ ...styles }}\n        width={width ? width : '100%'}\n        {...metaAttribute({ name: MetaConstants.DropdownOverlay, testID })}\n      >\n        {children}\n      </StyledDropdownOverlay>\n    </BaseBox>\n  );\n};\n\nconst DropdownOverlay = assignWithoutSideEffects(_DropdownOverlay, {\n  componentId: dropdownComponentIds.DropdownOverlay,\n});\n\nexport { DropdownOverlay };\n"],"names":["OVERLAY_OFFSET","size","OVERLAY_PADDING","OVERLAY_ZINDEX","_DropdownOverlay","_ref","_triggererWrapperRef$","children","testID","_ref$zIndex","zIndex","width","_useDropdown","useDropdown","isOpen","triggererRef","triggererWrapperRef","dropdownTriggerer","setIsOpen","_useTheme","useTheme","theme","bottomSheetAndDropdownGlue","useBottomSheetAndDropdownGlue","isMenu","dropdownComponentIds","triggers","SelectInput","AutoComplete","_useFloating","useFloating","open","onOpenChange","strategy","placement","elements","reference","current","middleware","offset","mainAxis","flip","padding","sizeMiddleware","apply","_ref2","rects","Object","assign","floating","style","undefined","makeSize","minWidth","maxWidth","whileElementsMounted","autoUpdate","refs","floatingStyles","context","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","transform","concat","opacity","isMounted","styles","React","useEffect","_triggererRef$current","focus","_jsx","BaseBox","ref","setFloating","display","StyledDropdownOverlay","_objectSpread","isInBottomSheet","dropdownHasBottomSheet","elevation","metaAttribute","name","MetaConstants","DropdownOverlay","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"DropdownOverlay.web.js","sources":["../../../../../../src/components/Dropdown/DropdownOverlay.web.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  autoUpdate,\n  offset,\n  size as sizeMiddleware,\n  useFloating,\n  useTransitionStyles,\n  flip,\n} from '@floating-ui/react';\nimport { useDropdown } from './useDropdown';\nimport { StyledDropdownOverlay } from './StyledDropdownOverlay';\nimport type { DropdownOverlayProps } from './types';\nimport { dropdownComponentIds } from './dropdownComponentIds';\nimport { useTheme } from '~components/BladeProvider';\n// Reading directly because its not possible to get theme object on top level to be used in keyframes\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useBottomSheetAndDropdownGlue } from '~components/BottomSheet/BottomSheetContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst OVERLAY_OFFSET: number = size['8'];\nconst OVERLAY_PADDING: number = size['12']; // doesn't have to be exact. Just rough padding for floating ui to decide to show overlay on top or bottom\n\n/**\n * Overlay of dropdown\n *\n * Wrap your ActionList within this component\n */\nconst _DropdownOverlay = ({\n  children,\n  testID,\n  zIndex = componentZIndices.dropdownOverlay,\n  width,\n}: DropdownOverlayProps): React.ReactElement | null => {\n  const { isOpen, triggererRef, triggererWrapperRef, dropdownTriggerer, setIsOpen } = useDropdown();\n  const { theme } = useTheme();\n  const bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();\n\n  const isMenu =\n    dropdownTriggerer !== dropdownComponentIds.triggers.SelectInput &&\n    dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete;\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    strategy: 'fixed',\n    placement: 'bottom-start',\n    elements: {\n      // Input triggers have their ref on internal input element but we want width height of overall visible input hence wrapperRef is needed\n      // We fallback to use `triggererRef` for triggers like button and link where wrapper is not needed\n      // Checkout: https://github.com/razorpay/blade/pull/1559#discussion_r1305438920\n      reference: triggererWrapperRef.current ?? triggererRef.current,\n    },\n    middleware: [\n      offset({\n        mainAxis: OVERLAY_OFFSET,\n      }),\n      flip({\n        padding: OVERLAY_OFFSET + OVERLAY_PADDING,\n      }),\n      sizeMiddleware({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, {\n            // in menu, we have flexible width between min and max\n            // in input triggers, we just take width of trigger\n            width: isMenu ? undefined : makeSize(rects.reference.width),\n            minWidth: isMenu ? makeSize(size['240']) : undefined,\n            maxWidth: isMenu ? makeSize(size['400']) : undefined,\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: () => ({\n      transform: `translateY(-${makeSize(size['8'])})`,\n      opacity: 0,\n    }),\n  });\n\n  React.useEffect(() => {\n    if (isOpen) {\n      // On Safari clicking on a non input element doesn't focuses it https://bugs.webkit.org/show_bug.cgi?id=22261\n      triggererRef.current?.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  return (\n    <BaseBox\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={refs.setFloating as any}\n      style={floatingStyles}\n      zIndex={zIndex}\n      display={isMounted ? 'flex' : 'none'}\n    >\n      <StyledDropdownOverlay\n        isInBottomSheet={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet}\n        elevation={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet ? undefined : 'midRaised'}\n        style={{ ...styles }}\n        width={width ? width : '100%'}\n        {...metaAttribute({ name: MetaConstants.DropdownOverlay, testID })}\n      >\n        {children}\n      </StyledDropdownOverlay>\n    </BaseBox>\n  );\n};\n\nconst DropdownOverlay = assignWithoutSideEffects(_DropdownOverlay, {\n  componentId: dropdownComponentIds.DropdownOverlay,\n});\n\nexport { DropdownOverlay };\n"],"names":["OVERLAY_OFFSET","size","OVERLAY_PADDING","_DropdownOverlay","_ref","_triggererWrapperRef$","children","testID","_ref$zIndex","zIndex","componentZIndices","dropdownOverlay","width","_useDropdown","useDropdown","isOpen","triggererRef","triggererWrapperRef","dropdownTriggerer","setIsOpen","_useTheme","useTheme","theme","bottomSheetAndDropdownGlue","useBottomSheetAndDropdownGlue","isMenu","dropdownComponentIds","triggers","SelectInput","AutoComplete","_useFloating","useFloating","open","onOpenChange","strategy","placement","elements","reference","current","middleware","offset","mainAxis","flip","padding","sizeMiddleware","apply","_ref2","rects","Object","assign","floating","style","undefined","makeSize","minWidth","maxWidth","whileElementsMounted","autoUpdate","refs","floatingStyles","context","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","transform","concat","opacity","isMounted","styles","React","useEffect","_triggererRef$current","focus","_jsx","BaseBox","ref","setFloating","display","StyledDropdownOverlay","_objectSpread","isInBottomSheet","dropdownHasBottomSheet","elevation","metaAttribute","name","MetaConstants","DropdownOverlay","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAMA,cAAsB,GAAGC,IAAI,CAAC,GAAG,CAAC,CAAA;AACxC,IAAMC,eAAuB,GAAGD,IAAI,CAAC,IAAI,CAAC,CAAC;;AAE3C;AACA;AACA;AACA;AACA;AACA,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAKiC;AAAA,EAAA,IAAAC,qBAAA,CAAA;AAAA,EAAA,IAJrDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAAC,WAAA,GAAAJ,IAAA,CACNK,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,KAAA,CAAA,GAAGE,iBAAiB,CAACC,eAAe,GAAAH,WAAA;IAC1CI,KAAK,GAAAR,IAAA,CAALQ,KAAK,CAAA;AAEL,EAAA,IAAAC,YAAA,GAAoFC,WAAW,EAAE;IAAzFC,MAAM,GAAAF,YAAA,CAANE,MAAM;IAAEC,YAAY,GAAAH,YAAA,CAAZG,YAAY;IAAEC,mBAAmB,GAAAJ,YAAA,CAAnBI,mBAAmB;IAAEC,iBAAiB,GAAAL,YAAA,CAAjBK,iBAAiB;IAAEC,SAAS,GAAAN,YAAA,CAATM,SAAS,CAAA;AAC/E,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,0BAA0B,GAAGC,6BAA6B,EAAE,CAAA;AAElE,EAAA,IAAMC,MAAM,GACVP,iBAAiB,KAAKQ,oBAAoB,CAACC,QAAQ,CAACC,WAAW,IAC/DV,iBAAiB,KAAKQ,oBAAoB,CAACC,QAAQ,CAACE,YAAY,CAAA;EAElE,IAAAC,YAAA,GAA0CC,WAAW,CAAC;AACpDC,MAAAA,IAAI,EAAEjB,MAAM;AACZkB,MAAAA,YAAY,EAAEd,SAAS;AACvBe,MAAAA,QAAQ,EAAE,OAAO;AACjBC,MAAAA,SAAS,EAAE,cAAc;AACzBC,MAAAA,QAAQ,EAAE;AACR;AACA;AACA;AACAC,QAAAA,SAAS,EAAAhC,CAAAA,qBAAA,GAAEY,mBAAmB,CAACqB,OAAO,MAAAjC,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAIW,YAAY,CAACsB,OAAAA;OACxD;MACDC,UAAU,EAAE,CACVC,MAAM,CAAC;AACLC,QAAAA,QAAQ,EAAEzC,cAAAA;OACX,CAAC,EACF0C,IAAI,CAAC;QACHC,OAAO,EAAE3C,cAAc,GAAGE,eAAAA;OAC3B,CAAC,EACF0C,MAAc,CAAC;QACbC,KAAK,EAAA,SAAAA,KAAAC,CAAAA,KAAA,EAAsB;AAAA,UAAA,IAAnBC,KAAK,GAAAD,KAAA,CAALC,KAAK;YAAEX,QAAQ,GAAAU,KAAA,CAARV,QAAQ,CAAA;UACrBY,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACc,QAAQ,CAACC,KAAK,EAAE;AACrC;AACA;AACAvC,YAAAA,KAAK,EAAEa,MAAM,GAAG2B,SAAS,GAAGC,QAAQ,CAACN,KAAK,CAACV,SAAS,CAACzB,KAAK,CAAC;YAC3D0C,QAAQ,EAAE7B,MAAM,GAAG4B,QAAQ,CAACpD,IAAI,CAAC,KAAK,CAAC,CAAC,GAAGmD,SAAS;YACpDG,QAAQ,EAAE9B,MAAM,GAAG4B,QAAQ,CAACpD,IAAI,CAAC,KAAK,CAAC,CAAC,GAAGmD,SAAAA;AAC7C,WAAC,CAAC,CAAA;AACJ,SAAA;AACF,OAAC,CAAC,CACH;AACDI,MAAAA,oBAAoB,EAAEC,UAAAA;AACxB,KAAC,CAAC;IA/BMC,IAAI,GAAA5B,YAAA,CAAJ4B,IAAI;IAAEC,cAAc,GAAA7B,YAAA,CAAd6B,cAAc;IAAEC,OAAO,GAAA9B,YAAA,CAAP8B,OAAO,CAAA;AAiCrC,EAAA,IAAAC,oBAAA,GAA8BC,mBAAmB,CAACF,OAAO,EAAE;AACzDG,MAAAA,QAAQ,EAAEzC,KAAK,CAAC0C,MAAM,CAACD,QAAQ,CAACE,KAAK;MACrCC,OAAO,EAAE,SAAAA,OAAA,GAAA;QAAA,OAAO;UACdC,SAAS,EAAA,cAAA,CAAAC,MAAA,CAAiBf,QAAQ,CAACpD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,GAAA,CAAA;AAChDoE,UAAAA,OAAO,EAAE,CAAA;SACV,CAAA;AAAA,OAAA;AACH,KAAC,CAAC;IANMC,SAAS,GAAAT,oBAAA,CAATS,SAAS;IAAEC,MAAM,GAAAV,oBAAA,CAANU,MAAM,CAAA;EAQzBC,cAAK,CAACC,SAAS,CAAC,YAAM;AACpB,IAAA,IAAI1D,MAAM,EAAE;AAAA,MAAA,IAAA2D,qBAAA,CAAA;AACV;AACA,MAAA,CAAAA,qBAAA,GAAA1D,YAAY,CAACsB,OAAO,MAAA,IAAA,IAAAoC,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApBA,qBAAA,CAAsBC,KAAK,EAAE,CAAA;AAC/B,KAAA;AACA;AACF,GAAC,EAAE,CAAC5D,MAAM,CAAC,CAAC,CAAA;AAEZ,EAAA,oBACE6D,GAAA,CAACC,OAAAA;AACC;AAAA,IAAA;IACAC,GAAG,EAAEpB,IAAI,CAACqB,WAAmB;AAC7B5B,IAAAA,KAAK,EAAEQ,cAAe;AACtBlD,IAAAA,MAAM,EAAEA,MAAO;AACfuE,IAAAA,OAAO,EAAEV,SAAS,GAAG,MAAM,GAAG,MAAO;AAAAhE,IAAAA,QAAA,eAErCsE,GAAA,CAACK,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACpBC,MAAAA,eAAe,EAAE5D,0BAA0B,KAAA,IAAA,IAA1BA,0BAA0B,KAA1BA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,0BAA0B,CAAE6D,sBAAuB;MACpEC,SAAS,EAAE9D,0BAA0B,KAAA,IAAA,IAA1BA,0BAA0B,KAAA,KAAA,CAAA,IAA1BA,0BAA0B,CAAE6D,sBAAsB,GAAGhC,SAAS,GAAG,WAAY;AACxFD,MAAAA,KAAK,EAAA+B,aAAA,CAAOX,EAAAA,EAAAA,MAAM,CAAG;AACrB3D,MAAAA,KAAK,EAAEA,KAAK,GAAGA,KAAK,GAAG,MAAA;AAAO,KAAA,EAC1B0E,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACC,eAAe;AAAElF,MAAAA,MAAM,EAANA,MAAAA;AAAO,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAD,MAAAA,QAAA,EAEjEA,QAAAA;KACoB,CAAA,CAAA;AAAC,GACjB,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMmF,eAAe,gBAAGC,wBAAwB,CAACvF,gBAAgB,EAAE;EACjEwF,WAAW,EAAEjE,oBAAoB,CAAC+D,eAAAA;AACpC,CAAC;;;;"}