npm - @razorpay/blade - Versions diffs - 11.6.3 → 11.8.0 - Mend

@razorpay/blade 11.6.3 → 11.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/build/lib/web/development/components/ButtonGroup/ButtonGroup.web.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ButtonGroup.web.js","sources":["../../../../../../src/components/ButtonGroup/ButtonGroup.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { ButtonGroupProps } from './types';\nimport { StyledButtonGroup } from './StyledButtonGroup';\nimport { ButtonGroupProvider } from './ButtonGroupContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeBorderSize } from '~utils';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport getIn from '~utils/lodashButBetter/get';\nimport { getBackgroundColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { Theme } from '~components/BladeProvider';\nimport { throwBladeError } from '~utils/logger';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\n\nconst getDividerColorToken = ({\n color,\n variant,\n isDisabled,\n}: Pick<ButtonGroupProps, 'color' | 'isDisabled' | 'variant'>): DotNotationToken<\n Theme['colors']\n> => {\n if (variant === 'primary') {\n return 'surface.border.gray.subtle';\n }\n\n if (variant === 'secondary') {\n return getBackgroundColorToken({\n property: 'border',\n variant,\n color,\n state: isDisabled ? 'disabled' : 'default',\n });\n }\n\n return 'surface.border.gray.muted';\n};\n\nconst StyledDivider = styled(BaseBox)<Pick<ButtonGroupProps, 'color' | 'isDisabled' | 'variant'>>(\n ({ theme, color, variant, isDisabled }) => {\n return {\n borderWidth: 0,\n borderLeftStyle: 'solid',\n borderLeftWidth: makeBorderSize(theme.border.width.thin),\n alignSelf: 'stretch',\n color: getIn(theme.colors, getDividerColorToken({ color, variant, isDisabled })),\n };\n },\n);\n\nconst _ButtonGroup = ({\n children,\n isDisabled = false,\n size = 'medium',\n color = 'primary',\n variant = 'primary',\n isFullWidth = false,\n testID,\n ...styledProps\n}: ButtonGroupProps): React.ReactElement => {\n const contextValue = {\n isDisabled,\n size,\n color,\n variant,\n isFullWidth,\n };\n\n return (\n <ButtonGroupProvider value={contextValue}>\n <StyledButtonGroup\n color={color}\n variant={variant}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\n {...metaAttribute({ name: MetaConstants.ButtonGroup, testID })}\n {...getStyledProps(styledProps)}\n role=\"group\"\n >\n {React.Children.map(children, (child, index) => {\n if (__DEV__) {\n // throw error if child is not a button or dropdown with button trigger\n /* eslint-disable no-restricted-properties */\n if (\n !isValidAllowedChildren(child, 'Button') &&\n !(\n isValidAllowedChildren(child, 'Dropdown') &&\n (child as ReactElement).props.children.some((c: ReactElement) =>\n isValidAllowedChildren(c, 'DropdownButton'),\n )\n )\n ) {\n throwBladeError({\n moduleName: 'ButtonGroup',\n message: `Only \"Button\" or \"Dropdown\" component with Button trigger are allowed as children.`,\n });\n }\n /* eslint-enable no-restricted-properties */\n }\n\n return (\n <>\n {child}\n {React.Children.count(children) - 1 !== index && (\n <StyledDivider variant={variant} color={color} isDisabled={isDisabled} />\n )}\n </>\n );\n })}\n </StyledButtonGroup>\n </ButtonGroupProvider>\n );\n};\n\n/**\n * ### ButtonGroup Component\n * \n * The ButtonGroup component is used to group related buttons together.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n const App = () => {\n return (\n <ButtonGroup>\n <Button icon={RefreshIcon}>Sync</Button>\n <Button icon={ShareIcon}>Share</Button>\n <Button icon={DownloadIcon}>Download</Button>\n </ButtonGroup>\n );\n }\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-buttongroup FileUpload Documentation}\n * \n */\nconst ButtonGroup = assignWithoutSideEffects(_ButtonGroup, {\n displayName: 'ButtonGroup',\n componentId: 'ButtonGroup',\n});\n\nexport { ButtonGroup };\nexport type { ButtonGroupProps };\n"],"names":["getDividerColorToken","_ref","color","variant","isDisabled","getBackgroundColorToken","property","state","StyledDivider","styled","BaseBox","withConfig","displayName","componentId","_ref2","theme","borderWidth","borderLeftStyle","borderLeftWidth","makeBorderSize","border","width","thin","alignSelf","getIn","colors","_ButtonGroup","_ref3","children","_ref3$isDisabled","_ref3$size","size","_ref3$color","_ref3$variant","_ref3$isFullWidth","isFullWidth","testID","styledProps","_objectWithoutProperties","_excluded","contextValue","_jsx","ButtonGroupProvider","value","StyledButtonGroup","_objectSpread","metaAttribute","name","MetaConstants","ButtonGroup","getStyledProps","role","React","Children","map","child","index","isValidAllowedChildren","props","some","c","throwBladeError","moduleName","message","_jsxs","_Fragment","count","assignWithoutSideEffects"],"mappings":"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"}

package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React__default from 'react';
+var ButtonGroupContext = /*#__PURE__*/React__default.createContext({});
+var ButtonGroupProvider = ButtonGroupContext.Provider;
+var useButtonGroupContext = function useButtonGroupContext() {
+  var context = React__default.useContext(ButtonGroupContext);
+  return context;
+};
+export { ButtonGroupProvider, useButtonGroupContext };
+//# sourceMappingURL=ButtonGroupContext.js.map

package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ButtonGroupContext.js","sources":["../../../../../../src/components/ButtonGroup/ButtonGroupContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { ButtonGroupContextType } from './types';\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType>({});\nconst ButtonGroupProvider = ButtonGroupContext.Provider;\n\nconst useButtonGroupContext = (): ButtonGroupContextType => {\n const context = React.useContext(ButtonGroupContext);\n return context;\n};\n\nexport { useButtonGroupContext, ButtonGroupProvider };\n"],"names":["ButtonGroupContext","React","createContext","ButtonGroupProvider","Provider","useButtonGroupContext","context","useContext"],"mappings":";;AAGA,IAAMA,kBAAkB,gBAAGC,cAAK,CAACC,aAAa,CAAyB,EAAE,CAAC,CAAA;AAC1E,IAAMC,mBAAmB,GAAGH,kBAAkB,CAACI,SAAQ;AAEvD,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,GAAiC;AAC1D,EAAA,IAAMC,OAAO,GAAGL,cAAK,CAACM,UAAU,CAACP,kBAAkB,CAAC,CAAA;AACpD,EAAA,OAAOM,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js ADDED Viewed

@@ -0,0 +1,47 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import styled from 'styled-components';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import { getBackgroundColorToken } from '../Button/BaseButton/BaseButton.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.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 StyledButtonGroup = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "StyledButtonGroup",
+  componentId: "gr4xbj-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    isDisabled = _ref.isDisabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    color = _ref.color,
+    isFullWidth = _ref.isFullWidth;
+  return _objectSpread(_objectSpread({
+    display: 'flex',
+    width: isFullWidth ? '100%' : 'fit-content',
+    overflow: 'hidden',
+    borderRadius: makeBorderSize(theme.border.radius.medium)
+  }, variant === 'secondary' && {
+    borderColor: getIn(theme.colors, getBackgroundColorToken({
+      property: 'border',
+      variant: variant,
+      color: color,
+      state: isDisabled ? 'disabled' : 'default'
+    })),
+    borderStyle: 'solid',
+    borderWidth: makeBorderSize(theme.border.width.thin)
+  }), {}, {
+    'button[role="button"]': {
+      borderRadius: 0,
+      border: 'none',
+      width: 'max-content',
+      flex: isFullWidth ? 1 : 'auto'
+    }
+  });
+});
+export { StyledButtonGroup };
+//# sourceMappingURL=StyledButtonGroup.js.map

package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StyledButtonGroup.js","sources":["../../../../../../src/components/ButtonGroup/StyledButtonGroup.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledButtonGroupProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize } from '~utils';\nimport { getBackgroundColorToken } from '~components/Button/BaseButton/BaseButton';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst StyledButtonGroup = styled(BaseBox)<StyledButtonGroupProps>(\n ({ theme, isDisabled, variant = 'primary', color, isFullWidth }) => {\n return {\n display: 'flex',\n width: isFullWidth ? '100%' : 'fit-content',\n overflow: 'hidden',\n borderRadius: makeBorderSize(theme.border.radius.medium),\n\n ...(variant === 'secondary' && {\n borderColor: getIn(\n theme.colors,\n getBackgroundColorToken({\n property: 'border',\n variant,\n color,\n state: isDisabled ? 'disabled' : 'default',\n }),\n ),\n borderStyle: 'solid',\n borderWidth: makeBorderSize(theme.border.width.thin),\n }),\n\n 'button[role=\"button\"]': {\n borderRadius: 0,\n border: 'none',\n width: 'max-content',\n flex: isFullWidth ? 1 : 'auto',\n },\n };\n },\n);\n\nexport { StyledButtonGroup };\n"],"names":["StyledButtonGroup","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","isDisabled","_ref$variant","variant","color","isFullWidth","_objectSpread","display","width","overflow","borderRadius","makeBorderSize","border","radius","medium","borderColor","getIn","colors","getBackgroundColorToken","property","state","borderStyle","borderWidth","thin","flex"],"mappings":";;;;;;;;;;;AAOA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mBAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CACvC,CAAA,CAAA,UAAAC,IAAA,EAAoE;AAAA,EAAA,IAAjEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAAC,YAAA,GAAAH,IAAA,CAAEI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,YAAA;IAAEE,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,WAAW,GAAAN,IAAA,CAAXM,WAAW,CAAA;EAC3D,OAAAC,aAAA,CAAAA,aAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,KAAK,EAAEH,WAAW,GAAG,MAAM,GAAG,aAAa;AAC3CI,IAAAA,QAAQ,EAAE,QAAQ;IAClBC,YAAY,EAAEC,cAAc,CAACX,KAAK,CAACY,MAAM,CAACC,MAAM,CAACC,MAAM,CAAA;GAEnDX,EAAAA,OAAO,KAAK,WAAW,IAAI;IAC7BY,WAAW,EAAEC,KAAK,CAChBhB,KAAK,CAACiB,MAAM,EACZC,uBAAuB,CAAC;AACtBC,MAAAA,QAAQ,EAAE,QAAQ;AAClBhB,MAAAA,OAAO,EAAPA,OAAO;AACPC,MAAAA,KAAK,EAALA,KAAK;AACLgB,MAAAA,KAAK,EAAEnB,UAAU,GAAG,UAAU,GAAG,SAAA;AACnC,KAAC,CACH,CAAC;AACDoB,IAAAA,WAAW,EAAE,OAAO;IACpBC,WAAW,EAAEX,cAAc,CAACX,KAAK,CAACY,MAAM,CAACJ,KAAK,CAACe,IAAI,CAAA;GACpD,CAAA,EAAA,EAAA,EAAA;AAED,IAAA,uBAAuB,EAAE;AACvBb,MAAAA,YAAY,EAAE,CAAC;AACfE,MAAAA,MAAM,EAAE,MAAM;AACdJ,MAAAA,KAAK,EAAE,aAAa;AACpBgB,MAAAA,IAAI,EAAEnB,WAAW,GAAG,CAAC,GAAG,MAAA;AAC1B,KAAA;AAAC,GAAA,CAAA,CAAA;AAEL,CAAC;;;;"}

package/build/lib/web/development/components/ButtonGroup/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { ButtonGroup } from './ButtonGroup.web.js';
2	+ //# sourceMappingURL=index.js.map

package/build/lib/web/development/components/ButtonGroup/index.js.map ADDED Viewed

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

package/build/lib/web/development/components/Collapsible/CollapsibleBodyContent.web.js CHANGED Viewed

@@ -6,7 +6,9 @@ import { getTransitionDuration, getTransitionEasing, getOpacity, getCollapsibleB
 import '../../utils/index.js';
 import '../Box/index.js';
 import { useDidUpdate } from '../../utils/useDidUpdate.js';
+import '../Box/BaseBox/index.js';
 import { jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { Box } from '../Box/Box.js';
@@ -19,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var HEIGHT_EXPANDED = 'auto';
 var HEIGHT_COLLAPSED = '0px';
-var StyledCollapsibleBodyContent = /*#__PURE__*/styled.div.withConfig({
+var StyledCollapsibleBodyContent = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "CollapsibleBodyContentweb__StyledCollapsibleBodyContent",
   componentId: "sc-1oi3ngc-0"
 })(function (props) {

package/build/lib/web/development/components/Collapsible/CollapsibleBodyContent.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CollapsibleBodyContent.web.js","sources":["../../../../../../src/components/Collapsible/CollapsibleBodyContent.web.tsx"],"sourcesContent":["import type { ReactElement, TransitionEventHandler } from 'react';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport { useCollapsible } from './CollapsibleContext';\nimport type { CollapsibleBodyContentProps } from './types';\nimport {\n getCollapsibleBodyContentBoxProps,\n getOpacity,\n getTransitionDuration,\n getTransitionEasing,\n} from './commonStyles';\nimport { castWebType, makeSize } from '~utils';\nimport { Box } from '~components/Box';\nimport { useDidUpdate } from '~utils/useDidUpdate';\n\ntype StyledCollapsibleBodyContentProps = {\n defaultIsExpanded: boolean;\n isExpanded: boolean;\n};\n\n/*\n We can't animate to and from `auto` height, these are used for imperative css transitions.\n * Overall on expanding height will change as: 0px -> Actual height -> auto\n /\nconst HEIGHT_EXPANDED = 'auto';\nconst HEIGHT_COLLAPSED = '0px';\n\nconst StyledCollapsibleBodyContent = styled~~.div~~<StyledCollapsibleBodyContentProps>((props) => {\n const { theme, defaultIsExpanded, isExpanded } = props;\n const transitionDuration = castWebType(getTransitionDuration(theme));\n const transitionTimingFunction = castWebType(getTransitionEasing(theme));\n\n return {\n transitionDuration,\n transitionTimingFunction,\n transitionProperty: 'height, opacity',\n opacity: getOpacity({ isExpanded }),\n /\n We need height explicitly here for initial styles because the component might be rendered on server,\n * in which case for expanded items this should be `auto` because we don't know the actual pixel value.\n \n This is based on `defaultIsExpanded` rather than `isExpanded` because post initial render inline styles take over.\n * Otherwise, changing `height` both here and in inline styles sometimes causes animation flickers due to styles mismatch.\n /\n height: defaultIsExpanded ? HEIGHT_EXPANDED : HEIGHT_COLLAPSED,\n display: defaultIsExpanded ? 'block' : 'none',\n overflowY: 'hidden',\n };\n});\n\nconst CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): ReactElement => {\n const { isExpanded, defaultIsExpanded, direction } = useCollapsible();\n const collapsibleBodyContentRef = useRef<HTMLDivElement>(null);\n\n /\n This effect imperatively updates height to make css transitions work:\n * - for expanded items: auto height -> actual height -> 0px\n * - for collapsed items: 0px -> actual height -> auto height\n * - uses `requestAnimationFrame` to set the styles just before the next repaint\n /\n useDidUpdate(() => {\n const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n\n if (!collapsibleBodyContentElement) {\n return;\n }\n\n // In collapsed state display is set to none, change it back to block\n collapsibleBodyContentElement.style.display = 'block';\n const actualHeight = collapsibleBodyContentElement.scrollHeight;\n\n if (!isExpanded) {\n // collapse\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(0);\n });\n });\n } else {\n // expand\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(0);\n\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n /\n After this we want to wait for the animation to finish\n * before setting the height back to auto\n \n `onTransitionEnd` takes over\n /\n });\n });\n }\n }, [isExpanded]);\n\n /\n When expanding, waits for the animation to finish first.\n * Then sets the height of expanded item to auto from actual height.\n */\n const onTransitionEnd: TransitionEventHandler = ({ propertyName }) => {\n const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n if (propertyName === 'height' && collapsibleBodyContentElement) {\n if (isExpanded) {\n // Body content has expanded and finished animating at this point\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = HEIGHT_EXPANDED;\n });\n } else {\n // Body content has collapsed\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.display = 'none';\n });\n }\n }\n };\n\n return (\n <StyledCollapsibleBodyContent\n ref={collapsibleBodyContentRef}\n isExpanded={isExpanded}\n defaultIsExpanded={defaultIsExpanded}\n onTransitionEnd={onTransitionEnd}\n >\n <Box {...getCollapsibleBodyContentBoxProps({ direction })}>{children}</Box>\n </StyledCollapsibleBodyContent>\n );\n};\n\nexport { CollapsibleBodyContent };\n"],"names":["HEIGHT_EXPANDED","HEIGHT_COLLAPSED","StyledCollapsibleBodyContent","styled","~~div~~","withConfig","displayName","componentId","props","theme","defaultIsExpanded","isExpanded","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","transitionProperty","opacity","getOpacity","height","display","overflowY","CollapsibleBodyContent","_ref","children","_useCollapsible","useCollapsible","direction","collapsibleBodyContentRef","useRef","useDidUpdate","collapsibleBodyContentElement","current","style","actualHeight","scrollHeight","requestAnimationFrame","makeSize","onTransitionEnd","_ref2","propertyName","_jsx","ref","Box","_objectSpread","getCollapsibleBodyContentBoxProps"],"mappings":"~~;;;;;;;;;;;;;;;AAoBA~~;AACA;AACA;AACA;AACA,IAAMA,eAAe,GAAG,MAAM,CAAA;AAC9B,IAAMC,gBAAgB,GAAG,KAAK,CAAA;AAE9B,IAAMC,4BAA4B,gBAAGC,MAAM,CAACC,~~GAAG~~,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAoC,CAAA,CAAA,UAACC,KAAK,EAAK;~~AAC5F~~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"}
1	+ {"version":3,"file":"CollapsibleBodyContent.web.js","sources":["../../../../../../src/components/Collapsible/CollapsibleBodyContent.web.tsx"],"sourcesContent":["import type { ReactElement, TransitionEventHandler } from 'react';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport { useCollapsible } from './CollapsibleContext';\nimport type { CollapsibleBodyContentProps } from './types';\nimport {\n getCollapsibleBodyContentBoxProps,\n getOpacity,\n getTransitionDuration,\n getTransitionEasing,\n} from './commonStyles';\nimport { castWebType, makeSize } from '~utils';\nimport { Box } from '~components/Box';\nimport { useDidUpdate } from '~utils/useDidUpdate';\nimport BaseBox from '~components/Box/BaseBox';\n\ntype StyledCollapsibleBodyContentProps = {\n defaultIsExpanded: boolean;\n isExpanded: boolean;\n};\n\n/*\n We can't animate to and from `auto` height, these are used for imperative css transitions.\n * Overall on expanding height will change as: 0px -> Actual height -> auto\n /\nconst HEIGHT_EXPANDED = 'auto';\nconst HEIGHT_COLLAPSED = '0px';\n\nconst StyledCollapsibleBodyContent = styled(BaseBox)<StyledCollapsibleBodyContentProps>((props) => {\n const { theme, defaultIsExpanded, isExpanded } = props;\n const transitionDuration = castWebType(getTransitionDuration(theme));\n const transitionTimingFunction = castWebType(getTransitionEasing(theme));\n\n return {\n transitionDuration,\n transitionTimingFunction,\n transitionProperty: 'height, opacity',\n opacity: getOpacity({ isExpanded }),\n /\n We need height explicitly here for initial styles because the component might be rendered on server,\n * in which case for expanded items this should be `auto` because we don't know the actual pixel value.\n \n This is based on `defaultIsExpanded` rather than `isExpanded` because post initial render inline styles take over.\n * Otherwise, changing `height` both here and in inline styles sometimes causes animation flickers due to styles mismatch.\n /\n height: defaultIsExpanded ? HEIGHT_EXPANDED : HEIGHT_COLLAPSED,\n display: defaultIsExpanded ? 'block' : 'none',\n overflowY: 'hidden',\n };\n});\n\nconst CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): ReactElement => {\n const { isExpanded, defaultIsExpanded, direction } = useCollapsible();\n const collapsibleBodyContentRef = useRef<HTMLDivElement>(null);\n\n /\n This effect imperatively updates height to make css transitions work:\n * - for expanded items: auto height -> actual height -> 0px\n * - for collapsed items: 0px -> actual height -> auto height\n * - uses `requestAnimationFrame` to set the styles just before the next repaint\n /\n useDidUpdate(() => {\n const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n\n if (!collapsibleBodyContentElement) {\n return;\n }\n\n // In collapsed state display is set to none, change it back to block\n collapsibleBodyContentElement.style.display = 'block';\n const actualHeight = collapsibleBodyContentElement.scrollHeight;\n\n if (!isExpanded) {\n // collapse\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(0);\n });\n });\n } else {\n // expand\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(0);\n\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n /\n After this we want to wait for the animation to finish\n * before setting the height back to auto\n \n `onTransitionEnd` takes over\n /\n });\n });\n }\n }, [isExpanded]);\n\n /\n When expanding, waits for the animation to finish first.\n * Then sets the height of expanded item to auto from actual height.\n */\n const onTransitionEnd: TransitionEventHandler = ({ propertyName }) => {\n const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n if (propertyName === 'height' && collapsibleBodyContentElement) {\n if (isExpanded) {\n // Body content has expanded and finished animating at this point\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.height = HEIGHT_EXPANDED;\n });\n } else {\n // Body content has collapsed\n requestAnimationFrame(() => {\n collapsibleBodyContentElement.style.display = 'none';\n });\n }\n }\n };\n\n return (\n <StyledCollapsibleBodyContent\n ref={collapsibleBodyContentRef}\n isExpanded={isExpanded}\n defaultIsExpanded={defaultIsExpanded}\n onTransitionEnd={onTransitionEnd}\n >\n <Box {...getCollapsibleBodyContentBoxProps({ direction })}>{children}</Box>\n </StyledCollapsibleBodyContent>\n );\n};\n\nexport { CollapsibleBodyContent };\n"],"names":["HEIGHT_EXPANDED","HEIGHT_COLLAPSED","StyledCollapsibleBodyContent","styled","BaseBox","withConfig","displayName","componentId","props","theme","defaultIsExpanded","isExpanded","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","transitionProperty","opacity","getOpacity","height","display","overflowY","CollapsibleBodyContent","_ref","children","_useCollapsible","useCollapsible","direction","collapsibleBodyContentRef","useRef","useDidUpdate","collapsibleBodyContentElement","current","style","actualHeight","scrollHeight","requestAnimationFrame","makeSize","onTransitionEnd","_ref2","propertyName","_jsx","ref","Box","_objectSpread","getCollapsibleBodyContentBoxProps"],"mappings":"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"}

package/build/lib/web/development/components/index.js CHANGED Viewed

@@ -9,6 +9,7 @@ import './Breadcrumb/index.js';
 import './Box/index.js';
 import './Button/index.js';
 import './Button/IconButton/index.js';
+import './ButtonGroup/index.js';
 import './Card/index.js';
 import './Carousel/index.js';
 import './Checkbox/index.js';
@@ -47,6 +48,8 @@ import './types.js';
 import './Typography/index.js';
 import './VisuallyHidden/index.web.js';
 export { Accordion } from './Accordion/Accordion.js';
+export { AccordionItemHeader } from './Accordion/AccordionItemHeader.js';
+export { AccordionItemBody } from './Accordion/AccordionItemBody.js';
 export { AccordionItem } from './Accordion/AccordionItem.js';
 export { ActionList } from './ActionList/ActionList.js';
 export { ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection } from './ActionList/ActionListItem.js';
@@ -65,6 +68,7 @@ export { BreadcrumbItem } from './Breadcrumb/BreadcrumbItem.web.js';
 export { Box } from './Box/Box.js';
 export { default as Button } from './Button/Button/Button.js';
 export { IconButton } from './Button/IconButton/IconButton.js';
+export { ButtonGroup } from './ButtonGroup/ButtonGroup.web.js';
 export { Card, CardBody, ComponentIds } from './Card/Card.js';
 export { CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing } from './Card/CardHeader.js';
 export { CardFooter, CardFooterLeading, CardFooterTrailing } from './Card/CardFooter.js';

package/build/lib/web/development/components/index.js.map CHANGED Viewed

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

package/build/lib/web/development/utils/metaAttribute/metaConstants.js CHANGED Viewed

@@ -2,6 +2,8 @@ var MetaConstants = {
   Accordion: 'accordion',
   AccordionButton: 'accordion-button',
   AccordionItem: 'accordion-item',
+  AccordionItemHeader: 'accordion-item-header',
+  AccordionItemBody: 'accordion-item-body',
   ActionList: 'action-list',
   ActionListItem: 'action-list-item',
   ActionListSection: 'action-list-section',
@@ -13,6 +15,7 @@ var MetaConstants = {
   BaseBox: 'base-box',
   BaseText: 'base-text',
   Button: 'button',
+  ButtonGroup: 'button-group',
   Breadcrumb: 'breadcrumb',
   BreadcrumbItem: 'breadcrumb-item',
   Carousel: 'carousel',

package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"metaConstants.js","sources":["../../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n Accordion: 'accordion',\n AccordionButton: 'accordion-button',\n AccordionItem: 'accordion-item',\n ActionList: 'action-list',\n ActionListItem: 'action-list-item',\n ActionListSection: 'action-list-section',\n Alert: 'alert',\n Amount: 'amount',\n AutoComplete: 'autocomplete',\n Badge: 'badge',\n Box: 'box',\n BaseBox: 'base-box',\n BaseText: 'base-text',\n Button: 'button',\n Breadcrumb: 'breadcrumb',\n BreadcrumbItem: 'breadcrumb-item',\n Carousel: 'carousel',\n Checkbox: 'checkbox',\n CheckboxGroup: 'checkbox-group',\n CheckboxLabel: 'checkbox-label',\n Chip: 'chip',\n ChipGroup: 'chip-group',\n ChipLabel: 'chip-label',\n Code: 'code',\n Component: 'blade-component',\n Counter: 'counter',\n Display: 'display',\n Divider: 'divider',\n Drawer: 'drawer',\n Dropdown: 'dropdown',\n DropdownOverlay: 'dropdown-overlay',\n DropdownFooter: 'dropdown-footer',\n DropdownHeader: 'dropdown-header',\n FileUpload: 'file-upload',\n FileUploadItem: 'file-upload-item',\n FileUploadLabel: 'file-upload-label',\n Icon: 'icon',\n IconButton: 'icon-button',\n Indicator: 'indicator',\n Link: 'link',\n List: 'list',\n ListItem: 'list-item',\n ListItemCode: 'list-item-code',\n ListItemLink: 'list-item-link',\n ListItemText: 'list-item-text',\n OTPInput: 'otp-input',\n PasswordInput: 'password-input',\n TextArea: 'textarea',\n TextInput: 'textinput',\n Toast: 'toast',\n ToastContainer: 'toast-container',\n ProgressBar: 'progress-bar',\n Radio: 'radio',\n RadioGroup: 'radio-group',\n RadioLabel: 'radio-label',\n SkipNav: 'skipnav',\n Spinner: 'spinner',\n SelectInput: 'select-input',\n Tag: 'tag',\n Tooltip: 'tooltip',\n TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n Tabs: 'tabs',\n TabList: 'tab-list',\n TabItem: 'tab-item',\n TabPanel: 'tab-panel',\n TabIndicator: 'tab-indicator',\n Table: 'table',\n TableBody: 'table-body',\n TableRow: 'table-row',\n TableCell: 'table-cell',\n TableHeader: 'table-header',\n TableHeaderRow: 'table-header-row',\n TableHeaderCell: 'table-header-cell',\n TableFooter: 'table-footer',\n TableFooterRow: 'table-footer-row',\n TableFooterCell: 'table-footer-cell',\n TableElement: 'table-element',\n TourPopover: 'tour-popover',\n TourMask: 'tour-mask',\n Popover: 'popover',\n PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n BottomSheet: 'bottom-sheet',\n BottomSheetBody: 'bottom-sheet-body',\n BottomSheetHeader: 'bottom-sheet-header',\n BottomSheetFooter: 'bottom-sheet-footer',\n BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n Card: 'card',\n CardBody: 'card-body',\n CardHeader: 'card-header',\n CardFooter: 'card-footer',\n Collapsible: 'collapsible',\n CollapsibleBody: 'collapsible-body',\n CollapsibleButton: 'collapsible-button',\n CollapsibleLink: 'collapsible-link',\n Modal: 'modal',\n ModalBody: 'modal-body',\n ModalHeader: 'modal-header',\n ModalFooter: 'modal-footer',\n ModalBackdrop: 'modal-backdrop',\n ModalScrollOverlay: 'modal-scroll-overlay',\n VisuallyHidden: 'visually-hidden',\n FormLabel: 'form-label',\n Switch: 'switch',\n SwitchLabel: 'switch-label',\n StyledBaseInput: 'styled-base-input',\n Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Breadcrumb","BreadcrumbItem","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Drawer","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","FileUpload","FileUploadItem","FileUploadLabel","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}
1	+ {"version":3,"file":"metaConstants.js","sources":["../../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n Accordion: 'accordion',\n AccordionButton: 'accordion-button',\n AccordionItem: 'accordion-item',\n AccordionItemHeader: 'accordion-item-header',\n AccordionItemBody: 'accordion-item-body',\n ActionList: 'action-list',\n ActionListItem: 'action-list-item',\n ActionListSection: 'action-list-section',\n Alert: 'alert',\n Amount: 'amount',\n AutoComplete: 'autocomplete',\n Badge: 'badge',\n Box: 'box',\n BaseBox: 'base-box',\n BaseText: 'base-text',\n Button: 'button',\n ButtonGroup: 'button-group',\n Breadcrumb: 'breadcrumb',\n BreadcrumbItem: 'breadcrumb-item',\n Carousel: 'carousel',\n Checkbox: 'checkbox',\n CheckboxGroup: 'checkbox-group',\n CheckboxLabel: 'checkbox-label',\n Chip: 'chip',\n ChipGroup: 'chip-group',\n ChipLabel: 'chip-label',\n Code: 'code',\n Component: 'blade-component',\n Counter: 'counter',\n Display: 'display',\n Divider: 'divider',\n Drawer: 'drawer',\n Dropdown: 'dropdown',\n DropdownOverlay: 'dropdown-overlay',\n DropdownFooter: 'dropdown-footer',\n DropdownHeader: 'dropdown-header',\n FileUpload: 'file-upload',\n FileUploadItem: 'file-upload-item',\n FileUploadLabel: 'file-upload-label',\n Icon: 'icon',\n IconButton: 'icon-button',\n Indicator: 'indicator',\n Link: 'link',\n List: 'list',\n ListItem: 'list-item',\n ListItemCode: 'list-item-code',\n ListItemLink: 'list-item-link',\n ListItemText: 'list-item-text',\n OTPInput: 'otp-input',\n PasswordInput: 'password-input',\n TextArea: 'textarea',\n TextInput: 'textinput',\n Toast: 'toast',\n ToastContainer: 'toast-container',\n ProgressBar: 'progress-bar',\n Radio: 'radio',\n RadioGroup: 'radio-group',\n RadioLabel: 'radio-label',\n SkipNav: 'skipnav',\n Spinner: 'spinner',\n SelectInput: 'select-input',\n Tag: 'tag',\n Tooltip: 'tooltip',\n TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n Tabs: 'tabs',\n TabList: 'tab-list',\n TabItem: 'tab-item',\n TabPanel: 'tab-panel',\n TabIndicator: 'tab-indicator',\n Table: 'table',\n TableBody: 'table-body',\n TableRow: 'table-row',\n TableCell: 'table-cell',\n TableHeader: 'table-header',\n TableHeaderRow: 'table-header-row',\n TableHeaderCell: 'table-header-cell',\n TableFooter: 'table-footer',\n TableFooterRow: 'table-footer-row',\n TableFooterCell: 'table-footer-cell',\n TableElement: 'table-element',\n TourPopover: 'tour-popover',\n TourMask: 'tour-mask',\n Popover: 'popover',\n PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n BottomSheet: 'bottom-sheet',\n BottomSheetBody: 'bottom-sheet-body',\n BottomSheetHeader: 'bottom-sheet-header',\n BottomSheetFooter: 'bottom-sheet-footer',\n BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n Card: 'card',\n CardBody: 'card-body',\n CardHeader: 'card-header',\n CardFooter: 'card-footer',\n Collapsible: 'collapsible',\n CollapsibleBody: 'collapsible-body',\n CollapsibleButton: 'collapsible-button',\n CollapsibleLink: 'collapsible-link',\n Modal: 'modal',\n ModalBody: 'modal-body',\n ModalHeader: 'modal-header',\n ModalFooter: 'modal-footer',\n ModalBackdrop: 'modal-backdrop',\n ModalScrollOverlay: 'modal-scroll-overlay',\n VisuallyHidden: 'visually-hidden',\n FormLabel: 'form-label',\n Switch: 'switch',\n SwitchLabel: 'switch-label',\n StyledBaseInput: 'styled-base-input',\n Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","AccordionItemHeader","AccordionItemBody","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","ButtonGroup","Breadcrumb","BreadcrumbItem","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Drawer","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","FileUpload","FileUploadItem","FileUploadLabel","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}

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

@@ -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, useCallback, useMemo, Children, cloneElement } from 'react';
+import { useState, Children, useCallback, useMemo, cloneElement } from 'react';
 import { AccordionContext } from './AccordionContext.js';
 import { MAX_WIDTH } from './styles.web.js';
 import '../Box/BaseBox/index.js';
@@ -17,7 +17,7 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
-var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "testID"];
+var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "variant", "size", "testID"];
 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 MIN_WIDTH = {
@@ -25,6 +25,49 @@ var MIN_WIDTH = {
   m: makeSize(size[360]),
   l: makeSize(size[360])
 };
+var getVariantStyles = function getVariantStyles(variant) {
+  if (variant === 'transparent') {
+    return {};
+  }
+  return {
+    backgroundColor: 'surface.background.gray.intense',
+    borderRadius: 'medium',
+    borderWidth: 'thinner',
+    borderColor: 'surface.border.gray.subtle'
+  };
+};
+/**
+ * # Accordion
+ *
+ * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * <Accordion>
+ *  <AccordionItem>
+ *    <AccordionItemHeader title="Title" />
+ *    <AccordionItemBody>
+ *      <Text color="surface.text.gray.subtle">
+ *        Hello this is accordion body content
+ *        </Text>
+ *     </AccordionItemBody>
+ *  </AccordionItem>
+ *  <AccordionItem>
+ *    <AccordionItemHeader title="Title" />
+ *    <AccordionItemBody>
+ *      <Text color="surface.text.gray.subtle">
+ *         Hello this is accordion body content
+ *      </Text>
+ *    </AccordionItemBody>
+ *  </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs
+ *
+ */
 var Accordion = function Accordion(_ref) {
   var defaultExpandedIndex = _ref.defaultExpandedIndex,
     expandedIndex = _ref.expandedIndex,
@@ -32,12 +75,17 @@ var Accordion = function Accordion(_ref) {
     _ref$showNumberPrefix = _ref.showNumberPrefix,
     showNumberPrefix = _ref$showNumberPrefix === void 0 ? false : _ref$showNumberPrefix,
     children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'transparent' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultExpandedIndex),
     _useState2 = _slicedToArray(_useState, 2),
     expandedAccordionItemIndex = _useState2[0],
     setExpandedAccordionItemIndex = _useState2[1];
+  var numberOfItems = Children.count(children);
   var handleExpandChange = useCallback(function (nextExpandedIndex) {
     if (typeof expandedIndex !== 'undefined') {
       // controlled
@@ -57,16 +105,19 @@ var Accordion = function Accordion(_ref) {
       expandedIndex: expandedIndex !== null && expandedIndex !== void 0 ? expandedIndex : expandedAccordionItemIndex,
       defaultExpandedIndex: defaultExpandedIndex,
       onExpandChange: handleExpandChange,
-      showNumberPrefix: showNumberPrefix
+      showNumberPrefix: showNumberPrefix,
+      variant: variant,
+      numberOfItems: numberOfItems,
+      size: size
     };
-  }, [expandedAccordionItemIndex, handleExpandChange, expandedIndex, showNumberPrefix, defaultExpandedIndex]);
+  }, [expandedAccordionItemIndex, handleExpandChange, expandedIndex, showNumberPrefix, defaultExpandedIndex, variant, numberOfItems, size]);
   return /*#__PURE__*/jsx(AccordionContext.Provider, {
     value: accordionContext,
     children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
       name: MetaConstants.Accordion,
       testID: testID
     })), getStyledProps(styledProps)), {}, {
-      children: /*#__PURE__*/jsx(BaseBox, {
+      children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getVariantStyles(variant)), {}, {
         minWidth: MIN_WIDTH,
         maxWidth: MAX_WIDTH,
         width: "100%",
@@ -76,7 +127,7 @@ var Accordion = function Accordion(_ref) {
             key: index
           });
         })
-      })
+      }))
     }))
   });
 };

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

	@@ -1 +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 { ~~BaseBox~~ } from '~~~components/Box/BaseBox~~';\nimport ~~type~~ { ~~StyledPropsBlade~~ } from '~components/Box/~~styledProps~~';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { size } from '~tokens/global';\nimport ~~type~~ { ~~TestID } from '~utils/types';\nimport {~~ makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\~~ntype~~ ~~AccordionProps~~ = {\n ~~/*\~~n ~~Makes~~ ~~the~~ ~~passed~~ ~~item~~ ~~index~~ ~~expanded~~ by ~~default~~ (~~uncontrolled~~)\n /\n defaultExpandedIndex?: ~~number~~;\n\n ~~/\~~n ~~Expands~~ ~~the~~ ~~passed~~ ~~index (controlled), `-1` implies no expanded items\~~n /\n ~~expandedIndex?: number~~;\n\n /\n ~~Callback~~ ~~for~~ ~~change~~ in ~~any~~ ~~item's~~ ~~expanded~~ state,\n * ~~`-1`~~ ~~implies~~ no ~~expanded~~ ~~items\n /\n onExpandChange?:~~ ({ ~~expandedIndex~~ }: { ~~expandedIndex:~~ ~~number~~ }) => ~~void;\~~n\n ~~/\~~n ~~Adds~~ ~~numeric~~ ~~index~~ at ~~the~~ ~~beginning~~ of ~~items~~\n \n ~~@default~~ ~~false~~\n /\n ~~showNumberPrefix?:~~ ~~boolean;\~~n\n ~~/\~~n ~~Accepts~~ ~~`AccordionItem`~~ ~~child~~ ~~nodes~~\n */\n children: ~~ReactElement~~ \| ~~ReactElement[];\~~n} & ~~TestID~~ ~~&\n~~ ~~StyledPropsBlade;\~~n~~\nconst~~ ~~MIN_WIDTH:~~ ~~BoxProps['minWidth']~~ = {\n s: ~~makeSize(size[200]),\~~n m: ~~makeSize(size[360]),\~~n l: ~~makeSize(size[360]),\~~n~~};\n\~~nconst Accordion = ({\n defaultExpandedIndex,\n expandedIndex,\n onExpandChange,\n showNumberPrefix = false,\n children,\n testID,\n ...styledProps\n}: AccordionProps): ReactElement => {\n const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number \| undefined>(\n defaultExpandedIndex,\n );\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 }),\n [\n expandedAccordionItemIndex,\n handleExpandChange,\n expandedIndex,\n showNumberPrefix,\n defaultExpandedIndex,\n ],\n );\n\n return (\n <AccordionContext.Provider value={accordionContext}>\n <BaseBox\n {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n {...getStyledProps(styledProps)}\n >\n <BaseBox minWidth={MIN_WIDTH} maxWidth={MAX_WIDTH} width=\"100%\">\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 ~~type~~ { ~~AccordionProps };\nexport {~~ Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","~~size~~","m","l","Accordion","_ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","testID","styledProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","getStyledProps","minWidth","maxWidth","MAX_WIDTH","width","~~Children","~~map","child","index","cloneElement","_index","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;~~AA6CA~~,IAAMA,SAA+B,GAAG;AACtCC,EAAAA,CAAC,EAAEC,QAAQ,CAACC,~~IAAI~~,CAAC,GAAG,CAAC,CAAC;~~AACtBC~~,EAAAA,CAAC,EAAEF,QAAQ,CAACC,~~IAAI~~,CAAC,GAAG,CAAC,CAAC;~~AACtBE~~,EAAAA,CAAC,EAAEH,QAAQ,CAACC,~~IAAI~~,CAAC,GAAG,CAAC,CAAA;~~AACvB~~,CAAC,CAAA;AAED,IAAMG,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,~~EAQqB~~;AAAA,EAAA,~~IAPlCC~~,oBAAoB,GAAAD,IAAA,CAApBC,oBAAoB;IACpBC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IACbC,cAAc,GAAAH,IAAA,CAAdG,cAAc;IAAAC,qBAAA,GAAAJ,IAAA,CACdK,gBAAgB;AAAhBA,IAAAA,gBAAgB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;IACxBE,QAAQ,GAAAN,IAAA,CAARM,QAAQ;~~IACRC~~,~~MAAM~~,GAAAP,IAAA,~~CAANO~~,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,~~CAAAT~~,IAAA,~~EAAAU~~,SAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,SAAA,GAAoEC,QAAQ,~~CAC1EX~~,oBACF,CAAC;~~IAAAY~~,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAFMI,IAAAA,0BAA0B,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,6BAA6B,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAIhE,EAAA,IAAMI,kBAAkB,GAAGC,WAAW,CACpC,UAACC,iBAAyB,EAAK;AAC7B,IAAA,IAAI,~~OAAOjB~~,aAAa,KAAK,WAAW,EAAE;AACxC;AACAC,MAAAA,cAAc,KAAdA,IAAAA,IAAAA,cAAc,KAAdA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,cAAc,CAAG;AAAED,QAAAA,aAAa,~~EAAEiB~~,iBAAAA;AAAkB,OAAC,CAAC,CAAA;AACxD,KAAC,MAAM;AACL;~~MACAH~~,6BAA6B,~~CAACG~~,iBAAiB,CAAC,CAAA;~~AAChDhB~~,MAAAA,cAAc,KAAdA,IAAAA,IAAAA,cAAc,KAAdA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,cAAc,CAAG;AAAED,QAAAA,aAAa,~~EAAEiB~~,iBAAAA;AAAkB,OAAC,CAAC,CAAA;AACxD,KAAA;AACF,GAAC,EACD,~~CAAChB~~,cAAc,EAAED,aAAa,CAChC,CAAC,CAAA;EAED,~~IAAMkB~~,gBAAgB,GAAGC,OAAO,CAC9B,YAAA;IAAA,OAAO;~~AACLnB~~,MAAAA,aAAa,EAAEA,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,aAAa,~~GAAIa~~,0BAA0B;~~AAC1Dd~~,MAAAA,oBAAoB,EAApBA,oBAAoB;AACpBE,MAAAA,cAAc,~~EAAEc~~,kBAAkB;~~AAClCZ~~,MAAAA,gBAAgB,EAAhBA,~~gBAAAA~~;KACD,CAAA;AAAA,GAAC,EACF,~~CACEU~~,0BAA0B,~~EAC1BE~~,kBAAkB,~~EAClBf~~,aAAa,EACbG,gBAAgB,EAChBJ,oBAAoB,~~CAExB~~,CAAC,CAAA;AAED,EAAA,~~oBACEqB~~,GAAA,CAACC,gBAAgB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEL,gBAAiB;~~AAAAd~~,IAAAA,QAAA,~~eACjDgB~~,GAAA,CAACI,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,~~CAAC/B~~,SAAS;~~AAAEQ~~,MAAAA,MAAM,EAANA,MAAAA;AAAO,KAAC,CAAC,CAAA,~~EACxDwB~~,cAAc,~~CAACvB~~,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;~~MAAAF~~,QAAA,eAE/~~BgB~~,GAAA,CAACI,OAAO,EAAA;~~AAACM~~,QAAAA,QAAQ,~~EAAEvC~~,SAAU;~~AAACwC~~,QAAAA,QAAQ,EAAEC,SAAU;~~AAACC~~,QAAAA,KAAK,EAAC,MAAM;~~QAAA7B~~,QAAA,~~EAC5D8B~~,QAAQ,~~CAACC~~,GAAG,~~CAAC/B~~,QAAQ,EAAE,~~UAACgC~~,KAAK,EAAEC,KAAK,EAAA;UAAA,oBACnCC,YAAY,CAACF,KAAK,EAAE;AAAEG,YAAAA,MAAM,EAAEF,KAAK;AAAEG,YAAAA,GAAG,EAAEH,KAAAA;AAAM,WAAC,CAAC,CAAA;SACpD,CAAA;OACO,CAAA;KACF,CAAA,CAAA;AAAC,GACe,CAAC,CAAA;AAEhC;;;;"}
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';\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 testID,\n ...styledProps\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(styledProps)}\n >\n <BaseBox\n {...getVariantStyles(variant)}\n minWidth={MIN_WIDTH}\n 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","testID","styledProps","_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","minWidth","maxWidth","MAX_WIDTH","width","map","child","index","cloneElement","_index","key"],"mappings":"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"}

package/build/lib/web/production/components/Accordion/AccordionButton.web.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { StyledAccordionButton } from './StyledAccordionButton.web.js';
 import { useAccordion } from './AccordionContext.js';
+import { AccordionItemHeader } from './AccordionItemHeader.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../Typography/index.js';
 import { useCollapsible } from '../Collapsible/CollapsibleContext.js';
-import { CollapsibleChevronIcon } from '../Collapsible/CollapsibleChevronIcon.web.js';
 import '../../utils/makeAccessible/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/logger/index.js';
@@ -23,31 +23,37 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _AccordionButton = function _AccordionButton(_ref) {
   var index = _ref.index,
     Icon = _ref.icon,
-    children = _ref.children;
+    title = _ref.title,
+    isDeprecatedAPI = _ref.isDeprecatedAPI,
+    header = _ref.header,
+    isDisabled = _ref.isDisabled;
   var _useCollapsible = useCollapsible(),
     onExpandChange = _useCollapsible.onExpandChange,
     isExpanded = _useCollapsible.isExpanded,
     collapsibleBodyId = _useCollapsible.collapsibleBodyId;
   var _useAccordion = useAccordion(),
     showNumberPrefix = _useAccordion.showNumberPrefix,
-    expandedIndex = _useAccordion.expandedIndex;
+    expandedIndex = _useAccordion.expandedIndex,
+    size = _useAccordion.size;
   var toggleCollapse = function toggleCollapse() {
     return onExpandChange(!isExpanded);
   };
   var onClick = function onClick() {
     return toggleCollapse();
   };
-  var _index = typeof index === 'number' && showNumberPrefix ? /*#__PURE__*/jsxs(Text, {
-    size: "large",
+  var _index = typeof index === 'number' && showNumberPrefix ?
+  /*#__PURE__*/
+  // we have to add -2px margin to align the number with title of BaseHeader
+  jsxs(Text, {
+    size: size,
     weight: "semibold",
-    marginRight: "spacing.2",
+    marginTop: "-2px",
     as: "span",
     children: [index + 1, "."]
   }) : null;
   var _icon = Icon && /*#__PURE__*/jsx(Icon, {
-    size: "medium",
-    color: "surface.icon.gray.muted",
-    marginRight: "spacing.3",
+    size: size,
+    color: "surface.icon.gray.normal",
     marginY: "spacing.2"
   });
   if (false) {
@@ -66,8 +72,9 @@ var _AccordionButton = function _AccordionButton(_ref) {
     level: 3
   })), {}, {
     width: "100%",
-    children: /*#__PURE__*/jsxs(StyledAccordionButton, _objectSpread(_objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsx(StyledAccordionButton, _objectSpread(_objectSpread(_objectSpread({
       isExpanded: isItemExpanded,
+      disabled: isDisabled,
       onClick: onClick
     }, makeAccessible({
       expanded: isItemExpanded,
@@ -75,21 +82,10 @@ var _AccordionButton = function _AccordionButton(_ref) {
     })), metaAttribute({
       name: MetaConstants.AccordionButton
     })), {}, {
-      children: [/*#__PURE__*/jsxs(BaseBox, {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "flex-start",
-        marginRight: "spacing.4",
-        children: [_index, _icon, /*#__PURE__*/jsx(Text, {
-          size: "large",
-          weight: "semibold",
-          as: "span",
-          children: children
-        })]
-      }), /*#__PURE__*/jsx(CollapsibleChevronIcon, {
-        color: "currentColor",
-        size: "large"
-      })]
+      children: isDeprecatedAPI ? /*#__PURE__*/jsx(AccordionItemHeader, {
+        title: title,
+        leading: _icon !== null && _icon !== void 0 ? _icon : _index
+      }) : header
     }))
   }));
 };

package/build/lib/web/production/components/Accordion/AccordionButton.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { ~~CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport {~~ makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst _AccordionButton = ({ index, icon: Icon~~, children~~ }: AccordionButtonProps): ReactElement => {\n const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n const { showNumberPrefix, expandedIndex } = useAccordion();\n\n const toggleCollapse = (): void => onExpandChange(!isExpanded);\n const onClick = (): void => toggleCollapse();\n\n const _index =\n typeof index === 'number' && showNumberPrefix ? (\n <Text size~~=\"large\"~~ weight=\"semibold\" ~~marginRight~~=\"~~spacing.2~~\" as=\"span\">\n {index + 1}.\n </Text>\n ) : null;\n\n const _icon = Icon && ~~(\n~~ <Icon\n size~~=\"medium\"\n~~ color=\"surface.icon.gray.~~muted~~\"~~\n marginRight=\"spacing.3\"\n~~ marginY=\"spacing.2\"\n ~~/>\n );\n~~\n if (__DEV__) {\n if (_index && _icon) {\n throwBladeError({\n message: \"showNumberPrefix and icon shouldn't be used together\",\n moduleName: 'Accordion',\n });\n }\n }\n\n const isItemExpanded = expandedIndex === index;\n\n return (\n <BaseBox\n // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n {...makeAccessible({ role: 'heading', level: 3 })}\n width=\"100%\"\n >\n <StyledAccordionButton\n isExpanded={isItemExpanded}\n onClick={onClick}\n {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n {...metaAttribute({ name: MetaConstants.AccordionButton })}\n >\n ~~<BaseBox~~ ~~display=\"flex\"~~ ~~flexDirection=\"row\"~~ ~~alignItems=\"flex-start\" marginRight=\"spacing.4\">\n~~ {~~_index~~}\n {_icon}~~\n <Text~~ ~~size=\"large\"~~ ~~weight=\"semibold\"~~ ~~as=\"span\">\n {children~~}\n ~~</Text>\n </BaseBox>\n <CollapsibleChevronIcon color=\"currentColor\" size=\"large\" />\n~~ </StyledAccordionButton>\n </BaseBox>\n );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","~~children~~","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","toggleCollapse","onClick","_index","_jsxs","Text","~~size~~","~~weight~~","~~marginRight~~","as","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","width","StyledAccordionButton","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","~~display~~","~~flexDirection~~","~~alignItems","CollapsibleChevronIcon","~~assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,~~EAA4E~~;AAAA,EAAA,~~IAAtEC~~,KAAK,GAAAD,IAAA,CAALC,KAAK;~~IAAQC~~,IAAI,GAAAF,IAAA,CAAVG,IAAI;~~IAAQC~~,~~QAAQ~~,GAAAJ,IAAA,~~CAARI~~,~~QAAQ~~,CAAA;~~AACrD~~,EAAA,IAAAC,eAAA,GAA0DC,cAAc,EAAE;IAAlEC,cAAc,GAAAF,eAAA,CAAdE,cAAc;IAAEC,UAAU,GAAAH,eAAA,CAAVG,UAAU;IAAEC,iBAAiB,GAAAJ,eAAA,CAAjBI,iBAAiB,CAAA;AACrD,EAAA,IAAAC,aAAA,~~GAA4CC~~,YAAY,EAAE;~~IAAlDC~~,gBAAgB,GAAAF,aAAA,CAAhBE,gBAAgB;IAAEC,aAAa,GAAAH,aAAA,CAAbG,aAAa,CAAA;~~AAEvC~~,EAAA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,GAAA;AAAA,IAAA,~~OAAeP~~,cAAc,CAAC,CAACC,UAAU,CAAC,CAAA;AAAA,GAAA,CAAA;AAC9D,EAAA,~~IAAMO~~,OAAO,GAAG,SAAVA,OAAOA,GAAA;IAAA,OAAeD,cAAc,EAAE,CAAA;AAAA,GAAA,CAAA;~~EAE5C~~,IAAME,MAAM,GACV,~~OAAOf~~,KAAK,KAAK,QAAQ,~~IAAIW~~,gBAAgB,~~gBAC3CK~~,IAAA,CAACC,IAAI,EAAA;~~AAACC~~,IAAAA,IAAI,~~EAAC~~,~~OAAO~~;~~AAACC~~,IAAAA,MAAM,EAAC,UAAU;AAACC,IAAAA,~~WAAW~~,EAAC,~~WAAW~~;AAACC,IAAAA,EAAE,EAAC,MAAM;~~AAAAlB~~,IAAAA,QAAA,~~EACnEH~~,CAAAA,KAAK,GAAG,CAAC,EAAC,GACb,CAAA;GAAM,CAAC,GACL,IAAI,CAAA;AAEV,EAAA,~~IAAMsB~~,KAAK,~~GAAGrB~~,IAAI,~~iBAChBsB~~,GAAA,~~CAACtB~~,IAAI,EAAA;~~AACHiB~~,IAAAA,IAAI,~~EAAC~~,~~QAAQ~~;~~AACbM~~,IAAAA,KAAK,EAAC,~~yBAAyB~~;~~AAC/BJ~~,IAAAA,~~WAAW,EAAC,WAAW;AACvBK,IAAAA,~~OAAO,EAAC,WAAA;AAAW,~~GACpB~~,~~CACF~~,CAAA;~~AAED~~,EAAA,IAAI,KAAO,EAAE;IACX,IAAIV,MAAM,IAAIO,KAAK,EAAE;AACnBI,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,sDAAsD;AAC/DC,QAAAA,UAAU,EAAE,WAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AAEA,EAAA,IAAMC,cAAc,~~GAAGjB~~,aAAa,~~KAAKZ~~,KAAK,CAAA;AAE9C,EAAA,~~oBACEuB~~,GAAA,CAACO,OAAAA;AACC;AAAA,IAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACIC,cAAc,CAAC;AAAEC,IAAAA,IAAI,EAAE,SAAS;AAAEC,IAAAA,KAAK,EAAE,CAAA;AAAE,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACjDC,IAAAA,KAAK,EAAC,MAAM;~~IAAAhC~~,QAAA,~~eAEZa~~,~~IAAA~~,~~CAACoB~~,qBAAqB,EAAAL,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;~~AACpBxB~~,MAAAA,UAAU,~~EAAEsB~~,cAAe;~~AAC3Bf~~,MAAAA,OAAO,EAAEA,OAAAA;AAAQ,KAAA,EACbkB,cAAc,CAAC;~~AAAEK~~,MAAAA,QAAQ,~~EAAER~~,cAAc;~~AAAES~~,MAAAA,QAAQ,~~EAAE9B~~,iBAAAA;KAAmB,CAAC,~~CACzE+B~~,EAAAA,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACC,eAAAA;AAAgB,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;~~MAAAvC~~,QAAA,~~EAAA~~,~~cAE1Da~~,~~IAAA~~,~~CAACc~~,~~OAAO~~,EAAA;~~AAACa~~,QAAAA,~~OAAO~~,~~EAAC~~,~~MAAM~~;~~AAACC~~,QAAAA,~~aAAa~~,~~EAAC~~,KAAK~~;AAACC~~,~~QAAAA~~,~~UAAU~~,~~EAAC~~,~~YAAY;AAACzB,QAAAA,WAAW,EAAC,WAAW;AAAAjB,QAAAA,QAAA,GACxFY,MAAM,EACNO,~~KAAK,~~eACNC~~,~~GAAA~~,~~CAACN,IAAI,EAAA;AAACC,UAAAA,IAAI,EAAC,OAAO;AAACC,UAAAA,MAAM,EAAC,UAAU;AAACE,UAAAA,EAAE,EAAC,MAAM;AAAAlB,UAAAA,QAAA,EAC3CA,QAAAA;AAAQ,SACL,CAAC,~~CAAA~~;AAAA~~,~~OACA~~,~~CAAC,eACVoB,GAAA,CAACuB,sBAAsB,EAAA;AAACtB,QAAAA,~~KAAK,~~EAAC~~,~~cAAc~~;~~AAACN,QAAAA,IAAI,EAAC,OAAA;~~AAAO,OAAE,CAAC,~~CAAA~~;~~KACvC~~,CAAA,CAAA;AAAC,GAAA,CACjB,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,~~IAAMwB~~,eAAe,~~gBAAGK~~,wBAAwB,~~CAACjD~~,gBAAgB,EAAE;~~EACjEkD~~,WAAW,~~EAAEP~~,aAAa,CAACC,eAAAA;AAC7B,CAAC;;;;"}
1	+ {"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { AccordionItemHeader } from './AccordionItemHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst _AccordionButton = ({\n index,\n icon: Icon,\n title,\n isDeprecatedAPI,\n header,\n isDisabled,\n}: AccordionButtonProps): ReactElement => {\n const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n const { showNumberPrefix, expandedIndex, size } = useAccordion();\n\n const toggleCollapse = (): void => onExpandChange(!isExpanded);\n const onClick = (): void => toggleCollapse();\n\n const _index =\n typeof index === 'number' && showNumberPrefix ? (\n // we have to add -2px margin to align the number with title of BaseHeader\n <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n {index + 1}.\n </Text>\n ) : null;\n\n const _icon = Icon && <Icon size={size} color=\"surface.icon.gray.normal\" marginY=\"spacing.2\" />;\n\n if (__DEV__) {\n if (_index && _icon) {\n throwBladeError({\n message: \"showNumberPrefix and icon shouldn't be used together\",\n moduleName: 'Accordion',\n });\n }\n }\n\n const isItemExpanded = expandedIndex === index;\n\n return (\n <BaseBox\n // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n {...makeAccessible({ role: 'heading', level: 3 })}\n width=\"100%\"\n >\n <StyledAccordionButton\n isExpanded={isItemExpanded}\n disabled={isDisabled}\n onClick={onClick}\n {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n {...metaAttribute({ name: MetaConstants.AccordionButton })}\n >\n {isDeprecatedAPI ? <AccordionItemHeader title={title} leading={_icon ?? _index} /> : header}\n </StyledAccordionButton>\n </BaseBox>\n );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","title","isDeprecatedAPI","header","isDisabled","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","size","toggleCollapse","onClick","_index","_jsxs","Text","weight","marginTop","as","children","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","width","StyledAccordionButton","disabled","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","AccordionItemHeader","leading","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Accordion/AccordionContext.js CHANGED Viewed

@@ -3,6 +3,9 @@ import '../../utils/logger/index.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 var AccordionContext = /*#__PURE__*/createContext(null);
+var AccordionItemContext = /*#__PURE__*/createContext({
+  index: undefined
+});
 var useAccordion = function useAccordion() {
   var accordionContext = useContext(AccordionContext);
   if (false) {
@@ -15,6 +18,18 @@ var useAccordion = function useAccordion() {
   }
   return accordionContext;
 };
+var useAccordionItemIndex = function useAccordionItemIndex() {
+  var accordionItemContext = useContext(AccordionItemContext);
+  if (false) {
+    if (!accordionItemContext) {
+      throwBladeError({
+        message: 'AccordionItem* components should be only used within AccordionItem',
+        moduleName: 'AccordionContext'
+      });
+    }
+  }
+  return accordionItemContext;
+};
-export { AccordionContext, useAccordion };
+export { AccordionContext, AccordionItemContext, useAccordion, useAccordionItemIndex };
 //# sourceMappingURL=AccordionContext.js.map