@razorpay/blade 11.6.2 → 11.7.0

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

@@ -0,0 +1,84 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useAccordion } from './AccordionContext.js';
+import { componentIds } from './componentIds.js';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
+import '../../utils/index.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../../utils/metaAttribute/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { Text } from '../Typography/Text/Text.js';
+import { isReactNative } from '../../utils/platform/isReactNative.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.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 BLANK_SPACE = ' ';
+
+/**
+ * On React Native if the `AccordionItem` has a lengthy description which renders a `Text` spanning multiple lines,
+ * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).
+ * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.
+ *
+ * Rendering a blank `Text` at the end seems to fix all this 🤯
+ */
+var reactNativeMultilineTextOverflowFix =
+/*#__PURE__*/
+// make this hidden from screen readers
+jsx(BaseBox, _objectSpread(_objectSpread({}, makeAccessible({
+  hidden: true
+})), {}, {
+  children: /*#__PURE__*/jsx(Text, {
+    children: BLANK_SPACE
+  })
+}));
+var descriptionSizeToken = {
+  large: 'medium',
+  medium: 'small'
+};
+var _AccordionItemBody = function _AccordionItemBody(_ref) {
+  var children = _ref.children,
+    _description = _ref._description;
+  var _useAccordion = useAccordion(),
+    size = _useAccordion.size;
+  var childrenElement = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/jsx(Text, {
+    size: descriptionSizeToken[size],
+    color: "surface.text.gray.subtle",
+    children: children
+  }) : children;
+  var descriptionElement = _description && /*#__PURE__*/jsx(Text, {
+    size: descriptionSizeToken[size],
+    color: "surface.text.gray.subtle",
+    children: _description
+  });
+  var collapsibleBodyContent = isReactNative() ? /*#__PURE__*/jsxs(BaseBox, {
+    marginX: "spacing.5",
+    children: [descriptionElement, /*#__PURE__*/jsx(BaseBox, {
+      marginTop: _description && children ? 'spacing.5' : 'spacing.0',
+      children: childrenElement
+    }), reactNativeMultilineTextOverflowFix]
+  }) : /*#__PURE__*/jsxs(BaseBox, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "spacing.5",
+    marginBottom: "spacing.5",
+    marginX: "spacing.5",
+    children: [descriptionElement, childrenElement]
+  });
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
+    name: MetaConstants.AccordionItemBody
+  })), {}, {
+    children: collapsibleBodyContent
+  }));
+};
+var AccordionItemBody = /*#__PURE__*/assignWithoutSideEffects(_AccordionItemBody, {
+  componentId: componentIds.AccordionItemBody
+});
+
+export { AccordionItemBody };
+//# sourceMappingURL=AccordionItemBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItemBody.js","sources":["../../../../../../src/components/Accordion/AccordionItemBody.tsx"],"sourcesContent":["import { useAccordion } from './AccordionContext';\nimport { componentIds } from './componentIds';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { isReactNative } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { StringChildrenType } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\n\nconst BLANK_SPACE = ' ';\n\n/**\n * On React Native if the `AccordionItem` has a lengthy description which renders a `Text` spanning multiple lines,\n * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).\n * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.\n *\n * Rendering a blank `Text` at the end seems to fix all this 🤯\n */\nconst reactNativeMultilineTextOverflowFix = (\n  // make this hidden from screen readers\n  <BaseBox {...makeAccessible({ hidden: true })}>\n    <Text>{BLANK_SPACE}</Text>\n  </BaseBox>\n);\n\nconst descriptionSizeToken = {\n  large: 'medium',\n  medium: 'small',\n} as const;\n\nconst _AccordionItemBody = ({\n  children,\n  _description,\n}: {\n  children?: React.ReactNode | StringChildrenType;\n  _description?: string;\n}): React.ReactElement => {\n  const { size } = useAccordion();\n\n  const childrenElement =\n    typeof children === 'string' || typeof children === 'number' ? (\n      <Text size={descriptionSizeToken[size]} color=\"surface.text.gray.subtle\">\n        {children}\n      </Text>\n    ) : (\n      children\n    );\n\n  const descriptionElement = _description && (\n    <Text size={descriptionSizeToken[size]} color=\"surface.text.gray.subtle\">\n      {_description}\n    </Text>\n  );\n\n  const collapsibleBodyContent = isReactNative() ? (\n    <BaseBox marginX=\"spacing.5\">\n      {descriptionElement}\n      <BaseBox marginTop={_description && children ? 'spacing.5' : 'spacing.0'}>\n        {childrenElement}\n      </BaseBox>\n      {reactNativeMultilineTextOverflowFix}\n    </BaseBox>\n  ) : (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"spacing.5\"\n      marginBottom=\"spacing.5\"\n      marginX=\"spacing.5\"\n    >\n      {descriptionElement}\n      {childrenElement}\n    </BaseBox>\n  );\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItemBody })}>\n      {collapsibleBodyContent}\n    </BaseBox>\n  );\n};\n\nconst AccordionItemBody = assignWithoutSideEffects(_AccordionItemBody, {\n  componentId: componentIds.AccordionItemBody,\n});\n\nexport { AccordionItemBody };\n"],"names":["BLANK_SPACE","reactNativeMultilineTextOverflowFix","_jsx","BaseBox","_objectSpread","makeAccessible","hidden","children","Text","descriptionSizeToken","large","medium","_AccordionItemBody","_ref","_description","_useAccordion","useAccordion","size","childrenElement","color","descriptionElement","collapsibleBodyContent","isReactNative","_jsxs","marginX","marginTop","display","flexDirection","gap","marginBottom","metaAttribute","name","MetaConstants","AccordionItemBody","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,WAAW,GAAG,GAAG,CAAA;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,mCAAmC;AAAA;AACvC;AACAC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAKC,cAAc,CAAC;AAAEC,EAAAA,MAAM,EAAE,IAAA;AAAK,CAAC,CAAC,CAAA,EAAA,EAAA,EAAA;EAAAC,QAAA,eAC3CL,GAAA,CAACM,IAAI,EAAA;AAAAD,IAAAA,QAAA,EAAEP,WAAAA;GAAkB,CAAA;AAAC,CAAA,CACnB,CACV,CAAA;AAED,IAAMS,oBAAoB,GAAG;AAC3BC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,OAAA;AACV,CAAU,CAAA;AAEV,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAME;AAAA,EAAA,IALxBN,QAAQ,GAAAM,IAAA,CAARN,QAAQ;IACRO,YAAY,GAAAD,IAAA,CAAZC,YAAY,CAAA;AAKZ,EAAA,IAAAC,aAAA,GAAiBC,YAAY,EAAE;IAAvBC,IAAI,GAAAF,aAAA,CAAJE,IAAI,CAAA;AAEZ,EAAA,IAAMC,eAAe,GACnB,OAAOX,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,gBAC1DL,GAAA,CAACM,IAAI,EAAA;AAACS,IAAAA,IAAI,EAAER,oBAAoB,CAACQ,IAAI,CAAE;AAACE,IAAAA,KAAK,EAAC,0BAA0B;AAAAZ,IAAAA,QAAA,EACrEA,QAAAA;GACG,CAAC,GAEPA,QACD,CAAA;AAEH,EAAA,IAAMa,kBAAkB,GAAGN,YAAY,iBACrCZ,GAAA,CAACM,IAAI,EAAA;AAACS,IAAAA,IAAI,EAAER,oBAAoB,CAACQ,IAAI,CAAE;AAACE,IAAAA,KAAK,EAAC,0BAA0B;AAAAZ,IAAAA,QAAA,EACrEO,YAAAA;AAAY,GACT,CACP,CAAA;EAED,IAAMO,sBAAsB,GAAGC,aAAa,EAAE,gBAC5CC,IAAA,CAACpB,OAAO,EAAA;AAACqB,IAAAA,OAAO,EAAC,WAAW;AAAAjB,IAAAA,QAAA,EACzBa,CAAAA,kBAAkB,eACnBlB,GAAA,CAACC,OAAO,EAAA;AAACsB,MAAAA,SAAS,EAAEX,YAAY,IAAIP,QAAQ,GAAG,WAAW,GAAG,WAAY;AAAAA,MAAAA,QAAA,EACtEW,eAAAA;KACM,CAAC,EACTjB,mCAAmC,CAAA;AAAA,GAC7B,CAAC,gBAEVsB,IAAA,CAACpB,OAAO,EAAA;AACNuB,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,YAAY,EAAC,WAAW;AACxBL,IAAAA,OAAO,EAAC,WAAW;IAAAjB,QAAA,EAAA,CAElBa,kBAAkB,EAClBF,eAAe,CAAA;AAAA,GACT,CACV,CAAA;EAED,oBACEhB,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAK0B,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,iBAAAA;AAAkB,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAA1B,IAAAA,QAAA,EAClEc,sBAAAA;AAAsB,GAAA,CAChB,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMY,iBAAiB,gBAAGC,wBAAwB,CAACtB,kBAAkB,EAAE;EACrEuB,WAAW,EAAEC,YAAY,CAACH,iBAAAA;AAC5B,CAAC;;;;"}

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

@@ -0,0 +1,71 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useAccordion, useAccordionItemIndex } from './AccordionContext.js';
+import { componentIds } from './componentIds.js';
+import { BaseHeader } from '../BaseHeaderFooter/BaseHeader.js';
+import '../Typography/index.js';
+import '../Box/BaseBox/index.js';
+import { CollapsibleChevronIcon } from '../Collapsible/CollapsibleChevronIcon.web.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../../utils/metaAttribute/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { Text } from '../Typography/Text/Text.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 _AccordionItemHeader = function _AccordionItemHeader(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    leading = _ref.leading,
+    children = _ref.children,
+    trailing = _ref.trailing,
+    titleSuffix = _ref.titleSuffix;
+  var _useAccordion = useAccordion(),
+    size = _useAccordion.size,
+    showNumberPrefix = _useAccordion.showNumberPrefix;
+  var _useAccordionItemInde = useAccordionItemIndex(),
+    index = _useAccordionItemInde.index,
+    isDisabled = _useAccordionItemInde.isDisabled;
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
+    name: MetaConstants.AccordionItemHeader
+  })), {}, {
+    flex: "1",
+    children: /*#__PURE__*/jsx(BaseHeader, {
+      leading: showNumberPrefix && typeof index === 'number' ?
+      /*#__PURE__*/
+      // we have to add -2px margin to align the number with title of BaseHeader
+      jsxs(Text, {
+        size: size,
+        weight: "semibold",
+        marginTop: "-2px",
+        as: "span",
+        children: [index + 1, "."]
+      }) : leading,
+      title: title,
+      subtitle: subtitle,
+      trailing: trailing,
+      titleSuffix: titleSuffix,
+      isDisabled: isDisabled,
+      showBackButton: false,
+      showCloseButton: false,
+      showDivider: false,
+      paddingX: "spacing.5",
+      marginY: "spacing.5",
+      size: size,
+      trailingInteractionElement: /*#__PURE__*/jsx(CollapsibleChevronIcon, {
+        color: isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted',
+        size: "large"
+      }),
+      children: children
+    })
+  }));
+};
+var AccordionItemHeader = /*#__PURE__*/assignWithoutSideEffects(_AccordionItemHeader, {
+  componentId: componentIds.AccordionItemHeader
+});
+
+export { AccordionItemHeader };
+//# sourceMappingURL=AccordionItemHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItemHeader.js","sources":["../../../../../../src/components/Accordion/AccordionItemHeader.tsx"],"sourcesContent":["import { useAccordion, useAccordionItemIndex } from './AccordionContext';\nimport { componentIds } from './componentIds';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { Text } from '~components/Typography';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst _AccordionItemHeader = ({\n  title,\n  subtitle,\n  leading,\n  children,\n  trailing,\n  titleSuffix,\n}: Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'\n>): React.ReactElement => {\n  const { size, showNumberPrefix } = useAccordion();\n  const { index, isDisabled } = useAccordionItemIndex();\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItemHeader })} flex=\"1\">\n      <BaseHeader\n        leading={\n          showNumberPrefix && typeof index === 'number' ? (\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          ) : (\n            leading\n          )\n        }\n        title={title}\n        subtitle={subtitle}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        isDisabled={isDisabled}\n        showBackButton={false}\n        showCloseButton={false}\n        showDivider={false}\n        paddingX=\"spacing.5\"\n        marginY=\"spacing.5\"\n        size={size}\n        trailingInteractionElement={\n          <CollapsibleChevronIcon\n            color={isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'}\n            size=\"large\"\n          />\n        }\n      >\n        {children}\n      </BaseHeader>\n    </BaseBox>\n  );\n};\n\nconst AccordionItemHeader = assignWithoutSideEffects(_AccordionItemHeader, {\n  componentId: componentIds.AccordionItemHeader,\n});\n\nexport { AccordionItemHeader };\n"],"names":["_AccordionItemHeader","_ref","title","subtitle","leading","children","trailing","titleSuffix","_useAccordion","useAccordion","size","showNumberPrefix","_useAccordionItemInde","useAccordionItemIndex","index","isDisabled","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","AccordionItemHeader","flex","BaseHeader","_jsxs","Text","weight","marginTop","as","showBackButton","showCloseButton","showDivider","paddingX","marginY","trailingInteractionElement","CollapsibleChevronIcon","color","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAUA;AAAA,EAAA,IATxBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,WAAW,GAAAN,IAAA,CAAXM,WAAW,CAAA;AAKX,EAAA,IAAAC,aAAA,GAAmCC,YAAY,EAAE;IAAzCC,IAAI,GAAAF,aAAA,CAAJE,IAAI;IAAEC,gBAAgB,GAAAH,aAAA,CAAhBG,gBAAgB,CAAA;AAC9B,EAAA,IAAAC,qBAAA,GAA8BC,qBAAqB,EAAE;IAA7CC,KAAK,GAAAF,qBAAA,CAALE,KAAK;IAAEC,UAAU,GAAAH,qBAAA,CAAVG,UAAU,CAAA;EAEzB,oBACEC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAKC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,mBAAAA;AAAoB,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAEC,IAAAA,IAAI,EAAC,GAAG;IAAAlB,QAAA,eAC/EW,GAAA,CAACQ,UAAU,EAAA;AACTpB,MAAAA,OAAO,EACLO,gBAAgB,IAAI,OAAOG,KAAK,KAAK,QAAQ;AAAA;AAC3C;AACAW,MAAAA,IAAA,CAACC,IAAI,EAAA;AAAChB,QAAAA,IAAI,EAAEA,IAAK;AAACiB,QAAAA,MAAM,EAAC,UAAU;AAACC,QAAAA,SAAS,EAAC,MAAM;AAACC,QAAAA,EAAE,EAAC,MAAM;AAAAxB,QAAAA,QAAA,EAC3DS,CAAAA,KAAK,GAAG,CAAC,EAAC,GACb,CAAA;OAAM,CAAC,GAEPV,OAEH;AACDF,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,WAAW,EAAEA,WAAY;AACzBQ,MAAAA,UAAU,EAAEA,UAAW;AACvBe,MAAAA,cAAc,EAAE,KAAM;AACtBC,MAAAA,eAAe,EAAE,KAAM;AACvBC,MAAAA,WAAW,EAAE,KAAM;AACnBC,MAAAA,QAAQ,EAAC,WAAW;AACpBC,MAAAA,OAAO,EAAC,WAAW;AACnBxB,MAAAA,IAAI,EAAEA,IAAK;MACXyB,0BAA0B,eACxBnB,GAAA,CAACoB,sBAAsB,EAAA;AACrBC,QAAAA,KAAK,EAAEtB,UAAU,GAAG,gCAAgC,GAAG,6BAA8B;AACrFL,QAAAA,IAAI,EAAC,OAAA;AAAO,OACb,CACF;AAAAL,MAAAA,QAAA,EAEAA,QAAAA;KACS,CAAA;AAAC,GAAA,CACN,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMiB,mBAAmB,gBAAGgB,wBAAwB,CAACtC,oBAAoB,EAAE;EACzEuC,WAAW,EAAEC,YAAY,CAAClB,mBAAAA;AAC5B,CAAC;;;;"}

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

@@ -13,7 +13,8 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1qxmqda-0"
 })(function (props) {
   var theme = props.theme,
-    isExpanded = props.isExpanded;
+    isExpanded = props.isExpanded,
+    disabled = props.disabled;
   var commonStyles = getCommonAccordionButtonStyles(props);
   return _objectSpread(_objectSpread({}, commonStyles), {}, {
     backgroundColor: getBackgroundColor({
@@ -24,7 +25,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
     transitionProperty: 'background-color, box-shadow, border-radius, color',
     transitionDuration: castWebType(getTransitionDuration(theme)),
     transitionTimingFunction: castWebType(getTransitionEasing(theme)),
-    cursor: 'pointer',
+    cursor: disabled ? 'not-allowed' : 'pointer',
     color: theme.colors.interactive.icon.gray[isExpanded ? 'subtle' : 'muted'],
     width: '100%',
     border: 'none',

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

@@ -1 +1 @@
-{"version":3,"file":"StyledAccordionButton.web.js","sources":["../../../../../../src/components/Accordion/StyledAccordionButton.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAccordionButtonProps } from './types';\nimport {\n  getBackgroundColor,\n  getCommonAccordionButtonStyles,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { castWebType } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props) => {\n  const { theme, isExpanded } = props;\n  const commonStyles = getCommonAccordionButtonStyles(props);\n  return {\n    ...commonStyles,\n    backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: false }),\n    transitionProperty: 'background-color, box-shadow, border-radius, color',\n    transitionDuration: castWebType(getTransitionDuration(theme)),\n    transitionTimingFunction: castWebType(getTransitionEasing(theme)),\n    cursor: 'pointer',\n    color: theme.colors.interactive.icon.gray[isExpanded ? 'subtle' : 'muted'],\n    width: '100%',\n    border: 'none',\n    textAlign: 'left',\n\n    '&:hover, &:focus-visible': {\n      backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: true }),\n      color: theme.colors.interactive.icon.gray.subtle,\n    },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      // only need border radius on the focus ring\n      borderRadius: theme.border.radius.small,\n    },\n  };\n});\n\nexport { StyledAccordionButton };\n"],"names":["StyledAccordionButton","styled","button","withConfig","displayName","componentId","props","theme","isExpanded","commonStyles","getCommonAccordionButtonStyles","_objectSpread","backgroundColor","getBackgroundColor","isActive","transitionProperty","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","cursor","color","colors","interactive","icon","gray","width","border","textAlign","subtle","getFocusRingStyles","borderRadius","radius","small"],"mappings":";;;;;;;;;;AAWA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAA6B,CAAA,CAAA,UAACC,KAAK,EAAK;AACjF,EAAA,IAAQC,KAAK,GAAiBD,KAAK,CAA3BC,KAAK;IAAEC,UAAU,GAAKF,KAAK,CAApBE,UAAU,CAAA;AACzB,EAAA,IAAMC,YAAY,GAAGC,8BAA8B,CAACJ,KAAK,CAAC,CAAA;AAC1D,EAAA,OAAAK,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKF,YAAY,CAAA,EAAA,EAAA,EAAA;IACfG,eAAe,EAAEC,kBAAkB,CAAC;AAAEN,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,UAAU,EAAVA,UAAU;AAAEM,MAAAA,QAAQ,EAAE,KAAA;AAAM,KAAC,CAAC;AAC3EC,IAAAA,kBAAkB,EAAE,oDAAoD;AACxEC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,qBAAqB,CAACX,KAAK,CAAC,CAAC;AAC7DY,IAAAA,wBAAwB,EAAEF,WAAW,CAACG,mBAAmB,CAACb,KAAK,CAAC,CAAC;AACjEc,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,IAAI,CAACC,IAAI,CAAClB,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1EmB,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,SAAS,EAAE,MAAM;AAEjB,IAAA,0BAA0B,EAAE;MAC1BjB,eAAe,EAAEC,kBAAkB,CAAC;AAAEN,QAAAA,KAAK,EAALA,KAAK;AAAEC,QAAAA,UAAU,EAAVA,UAAU;AAAEM,QAAAA,QAAQ,EAAE,IAAA;AAAK,OAAC,CAAC;MAC1EQ,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,IAAI,CAACC,IAAI,CAACI,MAAAA;KAC3C;AACD,IAAA,iBAAiB,EAAAnB,aAAA,CAAAA,aAAA,CAAA,EAAA,EACZoB,kBAAkB,CAAC;AAAExB,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAChC;AACAyB,MAAAA,YAAY,EAAEzB,KAAK,CAACqB,MAAM,CAACK,MAAM,CAACC,KAAAA;AAAK,KAAA,CAAA;AACxC,GAAA,CAAA,CAAA;AAEL,CAAC;;;;"}
+{"version":3,"file":"StyledAccordionButton.web.js","sources":["../../../../../../src/components/Accordion/StyledAccordionButton.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAccordionButtonProps } from './types';\nimport {\n  getBackgroundColor,\n  getCommonAccordionButtonStyles,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { castWebType } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props) => {\n  const { theme, isExpanded, disabled } = props;\n  const commonStyles = getCommonAccordionButtonStyles(props);\n  return {\n    ...commonStyles,\n    backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: false }),\n    transitionProperty: 'background-color, box-shadow, border-radius, color',\n    transitionDuration: castWebType(getTransitionDuration(theme)),\n    transitionTimingFunction: castWebType(getTransitionEasing(theme)),\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    color: theme.colors.interactive.icon.gray[isExpanded ? 'subtle' : 'muted'],\n    width: '100%',\n    border: 'none',\n    textAlign: 'left',\n\n    '&:hover, &:focus-visible': {\n      backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: true }),\n      color: theme.colors.interactive.icon.gray.subtle,\n    },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      // only need border radius on the focus ring\n      borderRadius: theme.border.radius.small,\n    },\n  };\n});\n\nexport { StyledAccordionButton };\n"],"names":["StyledAccordionButton","styled","button","withConfig","displayName","componentId","props","theme","isExpanded","disabled","commonStyles","getCommonAccordionButtonStyles","_objectSpread","backgroundColor","getBackgroundColor","isActive","transitionProperty","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","cursor","color","colors","interactive","icon","gray","width","border","textAlign","subtle","getFocusRingStyles","borderRadius","radius","small"],"mappings":";;;;;;;;;;AAWA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAA6B,CAAA,CAAA,UAACC,KAAK,EAAK;AACjF,EAAA,IAAQC,KAAK,GAA2BD,KAAK,CAArCC,KAAK;IAAEC,UAAU,GAAeF,KAAK,CAA9BE,UAAU;IAAEC,QAAQ,GAAKH,KAAK,CAAlBG,QAAQ,CAAA;AACnC,EAAA,IAAMC,YAAY,GAAGC,8BAA8B,CAACL,KAAK,CAAC,CAAA;AAC1D,EAAA,OAAAM,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKF,YAAY,CAAA,EAAA,EAAA,EAAA;IACfG,eAAe,EAAEC,kBAAkB,CAAC;AAAEP,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,UAAU,EAAVA,UAAU;AAAEO,MAAAA,QAAQ,EAAE,KAAA;AAAM,KAAC,CAAC;AAC3EC,IAAAA,kBAAkB,EAAE,oDAAoD;AACxEC,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,qBAAqB,CAACZ,KAAK,CAAC,CAAC;AAC7Da,IAAAA,wBAAwB,EAAEF,WAAW,CAACG,mBAAmB,CAACd,KAAK,CAAC,CAAC;AACjEe,IAAAA,MAAM,EAAEb,QAAQ,GAAG,aAAa,GAAG,SAAS;AAC5Cc,IAAAA,KAAK,EAAEhB,KAAK,CAACiB,MAAM,CAACC,WAAW,CAACC,IAAI,CAACC,IAAI,CAACnB,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1EoB,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,SAAS,EAAE,MAAM;AAEjB,IAAA,0BAA0B,EAAE;MAC1BjB,eAAe,EAAEC,kBAAkB,CAAC;AAAEP,QAAAA,KAAK,EAALA,KAAK;AAAEC,QAAAA,UAAU,EAAVA,UAAU;AAAEO,QAAAA,QAAQ,EAAE,IAAA;AAAK,OAAC,CAAC;MAC1EQ,KAAK,EAAEhB,KAAK,CAACiB,MAAM,CAACC,WAAW,CAACC,IAAI,CAACC,IAAI,CAACI,MAAAA;KAC3C;AACD,IAAA,iBAAiB,EAAAnB,aAAA,CAAAA,aAAA,CAAA,EAAA,EACZoB,kBAAkB,CAAC;AAAEzB,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAChC;AACA0B,MAAAA,YAAY,EAAE1B,KAAK,CAACsB,MAAM,CAACK,MAAM,CAACC,KAAAA;AAAK,KAAA,CAAA;AACxC,GAAA,CAAA,CAAA;AAEL,CAAC;;;;"}

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

@@ -15,19 +15,21 @@ var getBackgroundColor = function getBackgroundColor(_ref) {
     isExpanded = _ref.isExpanded,
     isActive = _ref.isActive;
   var gray = theme.colors.interactive.background.gray;
-  if (isActive) {
+  if (isExpanded) {
+    if (isActive) {
+      return gray.fadedHighlighted;
+    }
     return gray.faded;
   }
-  if (isExpanded) {
-    return gray["default"];
+  if (isActive) {
+    return gray.faded;
   }
-  var TRANSPARENT = 'hsla(0, 0%, 100%, 0)';
-  return TRANSPARENT;
+  return theme.colors.transparent;
 };
 var getCommonAccordionButtonStyles = function getCommonAccordionButtonStyles(props) {
   var theme = props.theme;
   return {
-    padding: theme.spacing[5],
+    padding: theme.spacing[0],
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

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

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

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

@@ -0,0 +1,8 @@
+var componentIds = {
+  AccordionItemHeader: 'AccordionItemHeader',
+  AccordionItemBody: 'AccordionItemBody',
+  AccordionItem: 'AccordionItem'
+};
+
+export { componentIds };
+//# sourceMappingURL=componentIds.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentIds.js","sources":["../../../../../../src/components/Accordion/componentIds.ts"],"sourcesContent":["export const componentIds = {\n  AccordionItemHeader: 'AccordionItemHeader',\n  AccordionItemBody: 'AccordionItemBody',\n  AccordionItem: 'AccordionItem',\n};\n"],"names":["componentIds","AccordionItemHeader","AccordionItemBody","AccordionItem"],"mappings":"AAAO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,mBAAmB,EAAE,qBAAqB;AAC1CC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,aAAa,EAAE,eAAA;AACjB;;;;"}

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

@@ -1,3 +1,5 @@
 export { Accordion } from './Accordion.js';
+export { AccordionItemHeader } from './AccordionItemHeader.js';
+export { AccordionItemBody } from './AccordionItemBody.js';
 export { AccordionItem } from './AccordionItem.js';
 //# sourceMappingURL=index.js.map

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

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

package/build/lib/web/development/components/BaseHeaderFooter/BaseHeader.js

@@ -1,5 +1,5 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import '../Divider/index.js';
 import '../Box/BaseBox/index.js';
@@ -31,39 +31,78 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var centerBoxProps = {
+var commonCenterBoxProps = {
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
-  // We want to align title, icon, titleSuffix, trailing, closeButton to baseline
-  // But we also want to keep them center aligned to each other
-  // So we add a virtual Box around these slots with 28px and center align them to that box
-  // We have done similar thing in figma as well (which is where this 28px comes from)
-  height: '28px'
+  justifyContent: 'center'
+};
+var centerBoxProps = {
+  large: _objectSpread(_objectSpread({}, commonCenterBoxProps), {}, {
+    // We want to align title, icon, titleSuffix, trailing, closeButton to baseline
+    // But we also want to keep them center aligned to each other
+    // So we add a virtual Box around these slots with 28px and center align them to that box
+    // We have done similar thing in figma as well (which is where this 28px comes from)
+    height: '28px'
+  }),
+  medium: _objectSpread(_objectSpread({}, commonCenterBoxProps), {}, {
+    height: '20px'
+  })
+};
+var sizeTokensMapping = {
+  large: {
+    title: 'large'
+  },
+  medium: {
+    title: 'medium'
+  }
 };
 
 // prop restriction map for corresponding sub components
 var propRestrictionMap = {
-  Button: {
-    size: 'xsmall',
-    variant: 'tertiary'
-  },
-  Badge: {
-    size: 'medium'
-  },
-  Link: {
-    size: 'medium'
-  },
-  Text: {
-    size: 'medium',
-    variant: 'body'
+  large: {
+    Button: {
+      size: 'xsmall',
+      variant: 'tertiary'
+    },
+    Badge: {
+      size: 'medium'
+    },
+    Link: {
+      size: 'medium'
+    },
+    Text: {
+      size: 'medium',
+      variant: 'body'
+    },
+    Amount: {
+      type: 'body',
+      size: 'medium'
+    }
   },
-  Amount: {
-    type: 'body',
-    size: 'medium'
+  medium: {
+    Button: {
+      size: 'xsmall',
+      variant: 'tertiary'
+    },
+    Badge: {
+      size: 'small'
+    },
+    Link: {
+      size: 'small'
+    },
+    Text: {
+      size: 'small',
+      variant: 'body'
+    },
+    Amount: {
+      type: 'body',
+      size: 'small'
+    }
   }
 };
-var useTrailingRestriction = function useTrailingRestriction(trailing) {
+var useTrailingRestriction = function useTrailingRestriction(_ref) {
+  var trailing = _ref.trailing,
+    size = _ref.size;
   var _React$useState = React__default.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     validatedTrailingComponent = _React$useState2[0],
@@ -73,8 +112,8 @@ var useTrailingRestriction = function useTrailingRestriction(trailing) {
   React__default.useEffect(function () {
     if ( /*#__PURE__*/React__default.isValidElement(trailing)) {
       var trailingComponentType = getComponentId(trailing);
-      var restrictedProps = propRestrictionMap[trailingComponentType];
-      var allowedComponents = Object.keys(propRestrictionMap);
+      var restrictedProps = propRestrictionMap[size][trailingComponentType];
+      var allowedComponents = Object.keys(propRestrictionMap[size]);
       if (true) {
         if (!restrictedProps) {
           throwBladeError({
@@ -83,7 +122,7 @@ var useTrailingRestriction = function useTrailingRestriction(trailing) {
           });
         }
       }
-      var restrictedPropKeys = Object.keys(propRestrictionMap[trailingComponentType]);
+      var restrictedPropKeys = Object.keys(propRestrictionMap[size][trailingComponentType]);
       for (var _i = 0, _restrictedPropKeys = restrictedPropKeys; _i < _restrictedPropKeys.length; _i++) {
         var _trailing$props;
         var prop = _restrictedPropKeys[_i];
@@ -97,37 +136,46 @@ var useTrailingRestriction = function useTrailingRestriction(trailing) {
       }
       setValidatedTrailingComponent( /*#__PURE__*/React__default.cloneElement(trailing, restrictedProps));
     }
-  }, [trailing]);
+  }, [trailing, size]);
   return validatedTrailingComponent;
 };
-var _BaseHeader = function _BaseHeader(_ref) {
-  var title = _ref.title,
-    subtitle = _ref.subtitle,
-    leading = _ref.leading,
-    titleSuffix = _ref.titleSuffix,
-    trailing = _ref.trailing,
-    _ref$showDivider = _ref.showDivider,
-    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
-    _ref$showBackButton = _ref.showBackButton,
-    showBackButton = _ref$showBackButton === void 0 ? false : _ref$showBackButton,
-    _ref$showCloseButton = _ref.showCloseButton,
-    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
-    onBackButtonClick = _ref.onBackButtonClick,
-    onCloseButtonClick = _ref.onCloseButtonClick,
-    closeButtonRef = _ref.closeButtonRef,
-    backButtonRef = _ref.backButtonRef,
-    testID = _ref.testID,
-    onClickCapture = _ref.onClickCapture,
-    onKeyDown = _ref.onKeyDown,
-    onKeyUp = _ref.onKeyUp,
-    onLostPointerCapture = _ref.onLostPointerCapture,
-    onPointerCancel = _ref.onPointerCancel,
-    onPointerDown = _ref.onPointerDown,
-    onPointerMove = _ref.onPointerMove,
-    onPointerUp = _ref.onPointerUp,
-    metaComponentName = _ref.metaComponentName,
-    children = _ref.children;
-  var validatedTrailingComponent = useTrailingRestriction(trailing);
+var _BaseHeader = function _BaseHeader(_ref2) {
+  var title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    leading = _ref2.leading,
+    titleSuffix = _ref2.titleSuffix,
+    trailing = _ref2.trailing,
+    _ref2$showDivider = _ref2.showDivider,
+    showDivider = _ref2$showDivider === void 0 ? true : _ref2$showDivider,
+    _ref2$showBackButton = _ref2.showBackButton,
+    showBackButton = _ref2$showBackButton === void 0 ? false : _ref2$showBackButton,
+    _ref2$showCloseButton = _ref2.showCloseButton,
+    showCloseButton = _ref2$showCloseButton === void 0 ? true : _ref2$showCloseButton,
+    onBackButtonClick = _ref2.onBackButtonClick,
+    onCloseButtonClick = _ref2.onCloseButtonClick,
+    closeButtonRef = _ref2.closeButtonRef,
+    backButtonRef = _ref2.backButtonRef,
+    testID = _ref2.testID,
+    onClickCapture = _ref2.onClickCapture,
+    onKeyDown = _ref2.onKeyDown,
+    onKeyUp = _ref2.onKeyUp,
+    onLostPointerCapture = _ref2.onLostPointerCapture,
+    onPointerCancel = _ref2.onPointerCancel,
+    onPointerDown = _ref2.onPointerDown,
+    onPointerMove = _ref2.onPointerMove,
+    onPointerUp = _ref2.onPointerUp,
+    metaComponentName = _ref2.metaComponentName,
+    paddingX = _ref2.paddingX,
+    marginY = _ref2.marginY,
+    _ref2$size = _ref2.size,
+    size$1 = _ref2$size === void 0 ? 'large' : _ref2$size,
+    isDisabled = _ref2.isDisabled,
+    children = _ref2.children,
+    trailingInteractionElement = _ref2.trailingInteractionElement;
+  var validatedTrailingComponent = useTrailingRestriction({
+    trailing: trailing,
+    size: size$1
+  });
   var shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;
   var webOnlyEventHandlers = isReactNative() ? {} : {
     onClickCapture: onClickCapture,
@@ -144,11 +192,11 @@ var _BaseHeader = function _BaseHeader(_ref) {
     testID: testID
   })), {}, {
     children: [/*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
-      marginY: {
+      marginY: marginY !== null && marginY !== void 0 ? marginY : {
         base: 'spacing.5',
         m: 'spacing.6'
       },
-      paddingX: {
+      paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : {
         base: 'spacing.5',
         m: 'spacing.6'
       },
@@ -161,7 +209,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
         children: [showBackButton ? /*#__PURE__*/jsx(BaseBox, {
           overflow: "visible",
           marginRight: "spacing.5",
-          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
             children: /*#__PURE__*/jsx(IconButton, {
               ref: backButtonRef,
               size: "large",
@@ -181,7 +229,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
           alignItems: "flex-start",
           children: [leading ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
             marginRight: "spacing.3"
-          }, centerBoxProps), {}, {
+          }, centerBoxProps[size$1]), {}, {
             children: leading
           })) : null, /*#__PURE__*/jsxs(BaseBox, {
             flex: "auto",
@@ -195,14 +243,14 @@ var _BaseHeader = function _BaseHeader(_ref) {
               display: "flex",
               flexDirection: "row",
               children: [title ? /*#__PURE__*/jsx(Text, {
-                size: "large",
+                size: sizeTokensMapping[size$1].title,
                 marginTop: makeSize(size['1']),
                 weight: "semibold",
-                color: "surface.text.gray.normal",
+                color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal',
                 children: title
               }) : null, titleSuffix && /*#__PURE__*/jsx(BaseBox, {
                 marginLeft: "spacing.3",
-                children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+                children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
                   children: titleSuffix
                 }))
               })]
@@ -210,16 +258,16 @@ var _BaseHeader = function _BaseHeader(_ref) {
               variant: "body",
               size: "small",
               weight: "regular",
-              color: "surface.text.gray.muted",
+              color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted',
               children: subtitle
             }) : null]
           })]
         }), validatedTrailingComponent ? /*#__PURE__*/jsx(BaseBox, {
           marginRight: "spacing.5",
-          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
             children: validatedTrailingComponent
           }))
-        }) : null, showCloseButton ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+        }) : null, showCloseButton ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
           children: /*#__PURE__*/jsx(IconButton, {
             ref: closeButtonRef,
             size: "large",
@@ -229,8 +277,23 @@ var _BaseHeader = function _BaseHeader(_ref) {
               return onCloseButtonClick === null || onCloseButtonClick === void 0 ? void 0 : onCloseButtonClick();
             }
           })
+        })) : null, trailingInteractionElement && !children ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
+          children: trailingInteractionElement
+        })) : null]
+      }), /*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/jsx(Box, {
+          children: children
+        }), trailingInteractionElement && children ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
+          alignSelf: "flex-start"
+        }, centerBoxProps[size$1]), {}, {
+          children: trailingInteractionElement
         })) : null]
-      }), children]
+      })]
     })), showDivider ? /*#__PURE__*/jsx(Divider, {}) : null]
   }));
 };