@razorpay/blade 11.6.3 → 11.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { useAccordion } from './AccordionContext';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   */\n  title: string;\n\n  /**\n   * Body text content\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst BLANK_SPACE = ' ';\n\n/**\n * On React Native if the `AccordionItem` has a lengthy description which renders a `Text` spanning multiple lines,\n * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).\n * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.\n *\n * Rendering a blank `Text` at the end seems to fix all this 🤯\n */\nconst reactNativeMultilineTextOverflowFix = (\n  // make this hidden from screen readers\n  <BaseBox {...makeAccessible({ hidden: true })}>\n    <Text>{BLANK_SPACE}</Text>\n  </BaseBox>\n);\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const { expandedIndex, onExpandChange, defaultExpandedIndex } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n\n  const _description = description && (\n    <Text color=\"interactive.text.gray.subtle\">{description}</Text>\n  );\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  const collapsibleBodyContent = isReactNative() ? (\n    <BaseBox marginX=\"spacing.5\">\n      {_description}\n      <BaseBox marginTop={description && children ? 'spacing.5' : 'spacing.0'}>{children}</BaseBox>\n      {reactNativeMultilineTextOverflowFix}\n    </BaseBox>\n  ) : (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"spacing.5\"\n      marginBottom=\"spacing.5\"\n      marginX=\"spacing.5\"\n    >\n      {_description}\n      {children}\n    </BaseBox>\n  );\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n      <Collapsible\n        isExpanded={isExpanded}\n        defaultIsExpanded={isDefaultExpanded}\n        onExpandChange={handleExpandChange}\n        // Accordion has its own width restrictions\n        _shouldApplyWidthRestrictions={false}\n      >\n        <AccordionButton index={_index} icon={icon}>\n          {title}\n        </AccordionButton>\n        <CollapsibleBody\n          // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n          width={isReactNative() ? '100%' : undefined}\n        >\n          {collapsibleBodyContent}\n        </CollapsibleBody>\n      </Collapsible>\n      <Divider />\n    </BaseBox>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["BLANK_SPACE","reactNativeMultilineTextOverflowFix","_jsx","BaseBox","_objectSpread","makeAccessible","hidden","children","Text","AccordionItem","_ref","title","description","icon","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","isExpanded","isDefaultExpanded","_description","color","handleExpandChange","_ref2","collapsibleBodyContent","isReactNative","_jsxs","marginX","marginTop","display","flexDirection","gap","marginBottom","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","AccordionButton","index","CollapsibleBody","width","undefined","Divider"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { AccordionItemContext, useAccordion } from './AccordionContext';\nimport { AccordionItemBody } from './AccordionItemBody';\nimport { componentIds } from './componentIds';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   *\n   * @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  title?: string;\n\n  /**\n   * Body text content\n   *\n   *  @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   *\n   * @deprecated Use `leading={<StarIcon size=\"large\" />}` on AccordionItemHeader instead\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode | ReactNode[];\n\n  /**\n   * Disabled state of the item\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  isDisabled,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const {\n    expandedIndex,\n    onExpandChange,\n    defaultExpandedIndex,\n    variant,\n    numberOfItems,\n  } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n  const isDeprecatedAPI = Boolean(title) || Boolean(description) || Boolean(icon);\n  const [header, body] = React.Children.toArray(children);\n\n  if (!isDeprecatedAPI) {\n    // Only doing validation in new API. Deprecated API allows everything as AccordionItem children\n    const headerComponentId = getComponentId(header);\n    const bodyComponentId = getComponentId(body);\n\n    if (\n      headerComponentId !== componentIds.AccordionItemHeader &&\n      bodyComponentId !== componentIds.AccordionItemBody\n    ) {\n      throwBladeError({\n        message:\n          'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',\n        moduleName: 'AccordionItem',\n      });\n    }\n  }\n\n  const isLastItem = _index !== undefined && _index < numberOfItems - 1;\n\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  return (\n    <AccordionItemContext.Provider\n      value={{\n        index: _index,\n        isDisabled,\n      }}\n    >\n      <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n        <Collapsible\n          isExpanded={isExpanded}\n          defaultIsExpanded={isDefaultExpanded}\n          onExpandChange={handleExpandChange}\n          // Accordion has its own width restrictions\n          _shouldApplyWidthRestrictions={false}\n        >\n          <AccordionButton\n            index={_index}\n            icon={icon}\n            title={title}\n            header={header}\n            isDisabled={isDisabled}\n            isDeprecatedAPI={isDeprecatedAPI}\n          />\n          <CollapsibleBody\n            // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n            // In new API, AccordionItemBody takes 100% width to avoid issues like this - https://github.com/razorpay/blade/pull/1814\n            width={isReactNative() || !isDeprecatedAPI ? '100%' : undefined}\n          >\n            {isDeprecatedAPI ? (\n              <AccordionItemBody _description={description}>{children}</AccordionItemBody>\n            ) : (\n              body\n            )}\n          </CollapsibleBody>\n        </Collapsible>\n        {isLastItem || variant === 'transparent' ? <Divider /> : null}\n      </BaseBox>\n    </AccordionItemContext.Provider>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["AccordionItem","_ref","title","description","icon","children","isDisabled","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","variant","numberOfItems","isExpanded","isDefaultExpanded","isDeprecatedAPI","Boolean","_React$Children$toArr","React","Children","toArray","_React$Children$toArr2","_slicedToArray","header","body","headerComponentId","getComponentId","bodyComponentId","componentIds","AccordionItemHeader","AccordionItemBody","throwBladeError","message","moduleName","isLastItem","undefined","handleExpandChange","_ref2","_jsx","AccordionItemContext","Provider","value","index","_jsxs","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","AccordionButton","CollapsibleBody","width","isReactNative","_description","Divider"],"mappings":"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"}

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":";;;"}