@contentful/f36-accordion 4.15.1 → 4.18.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Change Log
 
+## 4.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-collapse@4.18.0
+  - @contentful/f36-icons@4.18.0
+  - @contentful/f36-typography@4.18.0
+  - @contentful/f36-core@4.18.0
+
+## 4.17.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-collapse@4.17.0
+  - @contentful/f36-icons@4.17.0
+  - @contentful/f36-typography@4.17.0
+  - @contentful/f36-core@4.17.0
+
+## 4.16.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-collapse@4.16.0
+  - @contentful/f36-icons@4.16.0
+  - @contentful/f36-typography@4.16.0
+  - @contentful/f36-core@4.16.0
+
 ## 4.15.1
 
 ### Patch Changes

package/dist/{types.d.ts → index.d.ts}

@@ -1,7 +1,8 @@
-import React, { FC } from "react";
-import { CommonProps, ExpandProps } from "@contentful/f36-core";
-import { HeadingElement } from "@contentful/f36-typography";
-export interface AccordionProps extends CommonProps {
+import React, { FC } from 'react';
+import { CommonProps, ExpandProps } from '@contentful/f36-core';
+import { HeadingElement } from '@contentful/f36-typography';
+
+interface AccordionProps extends CommonProps {
     /**
      * Specify the alignment of the chevron inside the accordion header
      * @default end
@@ -12,39 +13,55 @@ export interface AccordionProps extends CommonProps {
      */
     children?: React.ReactNode;
 }
-declare const _Accordion1: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLUListElement>>;
-export interface AccordionHeaderProps extends CommonProps {
+declare const Accordion$1: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLUListElement>>;
+
+interface AccordionItemProps extends CommonProps {
     /**
-     * Child nodes to be rendered in the component
+     * The accordion title
      */
-    children?: React.ReactNode;
+    title?: React.ReactNode;
     /**
-     * The function that will be called once the user clicks on the accordion title
+     * The heading element that will be used by the AccordionHeader
      */
-    onClick: VoidFunction;
+    titleElement?: HeadingElement;
     /**
-     * A boolean that tells if the accordion should be expanded or collapsed
+     * The children of the AccordionItem are in fact the content of the accordion
      */
-    isExpanded: boolean;
+    children?: React.ReactNode;
     /**
-     * An unique id that is necessary for the aria roles and properties
+     * A function to be called when the accordion item is opened
      */
-    ariaId: string;
+    onExpand?: () => void;
     /**
-     * The heading element that will be used by the Subheading component
+     * A function to be called when the accordion item is closed
      */
-    element?: HeadingElement;
+    onCollapse?: () => void;
     /**
      * Specify the alignment of the chevron inside the accordion header
      */
     align?: 'start' | 'end';
+    /**
+     * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
+     * But you can make it controlled by providing boolean
+     */
+    isExpanded?: boolean;
 }
-export const AccordionHeader: ({ children, onClick, isExpanded, ariaId, element, align, testId, ...rest }: AccordionHeaderProps) => JSX.Element;
-export interface AccordionPanelProps extends CommonProps {
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
+
+declare type CompoundAccordion = typeof Accordion$1 & {
+    Item: typeof AccordionItem;
+};
+declare const Accordion: CompoundAccordion;
+
+interface AccordionHeaderProps extends CommonProps {
     /**
      * Child nodes to be rendered in the component
      */
     children?: React.ReactNode;
+    /**
+     * The function that will be called once the user clicks on the accordion title
+     */
+    onClick: VoidFunction;
     /**
      * A boolean that tells if the accordion should be expanded or collapsed
      */
@@ -53,43 +70,31 @@ export interface AccordionPanelProps extends CommonProps {
      * An unique id that is necessary for the aria roles and properties
      */
     ariaId: string;
-}
-export const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
-export interface AccordionItemProps extends CommonProps {
     /**
-     * The accordion title
+     * The heading element that will be used by the Subheading component
      */
-    title?: React.ReactNode;
+    element?: HeadingElement;
     /**
-     * The heading element that will be used by the AccordionHeader
+     * Specify the alignment of the chevron inside the accordion header
      */
-    titleElement?: HeadingElement;
+    align?: 'start' | 'end';
+}
+declare const AccordionHeader: ({ children, onClick, isExpanded, ariaId, element, align, testId, ...rest }: AccordionHeaderProps) => JSX.Element;
+
+interface AccordionPanelProps extends CommonProps {
     /**
-     * The children of the AccordionItem are in fact the content of the accordion
+     * Child nodes to be rendered in the component
      */
     children?: React.ReactNode;
     /**
-     * A function to be called when the accordion item is opened
-     */
-    onExpand?: () => void;
-    /**
-     * A function to be called when the accordion item is closed
-     */
-    onCollapse?: () => void;
-    /**
-     * Specify the alignment of the chevron inside the accordion header
+     * A boolean that tells if the accordion should be expanded or collapsed
      */
-    align?: 'start' | 'end';
+    isExpanded: boolean;
     /**
-     * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
-     * But you can make it controlled by providing boolean
+     * An unique id that is necessary for the aria roles and properties
      */
-    isExpanded?: boolean;
+    ariaId: string;
 }
-export const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
-type CompoundAccordion = typeof _Accordion1 & {
-    Item: typeof AccordionItem;
-};
-export const Accordion: CompoundAccordion;
+declare const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
 
-//# sourceMappingURL=types.d.ts.map
+export { Accordion, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps };

package/dist/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var g = require('react');
+var f36Core = require('@contentful/f36-core');
+var emotion = require('emotion');
+var n = require('@contentful/f36-tokens');
+var f36Typography = require('@contentful/f36-typography');
+var f36Icons = require('@contentful/f36-icons');
+var f36Collapse = require('@contentful/f36-collapse');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var g__default = /*#__PURE__*/_interopDefaultLegacy(g);
+var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
+
+var _=Object.defineProperty,j=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var R=(o,e,r)=>e in o?_(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,a=(o,e)=>{for(var r in e||(e={}))$.call(e,r)&&R(o,r,e[r]);if(y)for(var r of y(e))k.call(e,r)&&R(o,r,e[r]);return o},l=(o,e)=>j(o,U(e));var d=(o,e)=>{var r={};for(var t in o)$.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(o!=null&&y)for(var t of y(o))e.indexOf(t)<0&&k.call(o,t)&&(r[t]=o[t]);return r};var w=({className:o})=>({accordion:emotion.cx(emotion.css({boxSizing:"border-box",padding:"0",margin:"0",listStyle:"none","&:first-child":{borderTop:`1px solid ${n__default["default"].gray300}`}}),o)});var K=(p,m)=>{var i=p,{align:o="end",children:e,className:r,testId:t="cf-ui-accordion"}=i,s=d(i,["align","children","className","testId"]);let x=w({className:r});return g__default["default"].createElement(f36Core.Box,l(a({as:"ul",className:x.accordion,testId:t},s),{ref:m}),g__default["default"].Children.map(e,c=>g__default["default"].isValidElement(c)?g__default["default"].cloneElement(c,{align:o}):c))},D=g__default["default"].forwardRef(K);var Q=({align:o})=>emotion.cx(emotion.css({display:"flex",flexDirection:"row",alignItems:"center",border:"0",padding:n__default["default"].spacingM,backgroundColor:"transparent",fontFamily:n__default["default"].fontStackPrimary,fontSize:n__default["default"].fontSizeL,fontWeight:n__default["default"].fontWeightDemiBold,lineHeight:n__default["default"].lineHeightL,color:n__default["default"].gray800,width:"100%",minWidth:"9px",cursor:"pointer",transition:`background-color ${n__default["default"].transitionDurationDefault} ${n__default["default"].transitionEasingDefault},
+        box-shadow ${n__default["default"].transitionDurationShort} ${n__default["default"].transitionEasingDefault}`,"&:hover":{backgroundColor:n__default["default"].gray100},"&:focus":{backgroundColor:n__default["default"].gray100,borderRadius:n__default["default"].borderRadiusMedium,boxShadow:n__default["default"].glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{backgroundColor:"transparent",borderRadius:"unset",boxShadow:"unset"},"&:focus-visible":{backgroundColor:n__default["default"].gray100,borderRadius:n__default["default"].borderRadiusMedium,boxShadow:n__default["default"].glowPrimary}}),o==="end"&&emotion.css({flexDirection:"row-reverse",justifyContent:"space-between"})),Y=({align:o,isExpanded:e})=>emotion.cx(emotion.css({transform:"rotate(0deg)",transition:`transform ${n__default["default"].transitionDurationDefault} ${n__default["default"].transitionEasingDefault}`}),o==="end"&&emotion.css({marginLeft:n__default["default"].spacingM}),o==="start"&&emotion.css({marginRight:n__default["default"].spacingM}),e&&emotion.css({transform:"rotate(180deg)"})),M=o=>({accordionHeader:Q(o),accordionHeaderIcon:Y(o)});var h=x=>{var c=x,{children:o,onClick:e,isExpanded:r=!1,ariaId:t,element:s="h2",align:m="end",testId:p="cf-ui-accordion-header"}=c,i=d(c,["children","onClick","isExpanded","ariaId","element","align","testId"]);let u=M({align:m,isExpanded:r});return g__default["default"].createElement(f36Typography.Subheading,l(a({},i),{testId:p,marginBottom:"none",as:s}),g__default["default"].createElement("button",{type:"button","aria-expanded":r,"aria-controls":`accordion-panel--${t}`,id:`accordion--${t}`,className:u.accordionHeader,onClick:e},g__default["default"].createElement(f36Icons.ChevronDownTrimmedIcon,{className:u.accordionHeaderIcon,variant:"secondary"}),o))};var v=()=>({accordionPanelContent:emotion.css({width:"100%",padding:`${n__default["default"].spacingXs} ${n__default["default"].spacingM} ${n__default["default"].spacingM}`})});var E=m=>{var p=m,{children:o,isExpanded:e=!1,ariaId:r,testId:t="cf-ui-accordion-panel"}=p,s=d(p,["children","isExpanded","ariaId","testId"]);let i=v();return g__default["default"].createElement(f36Collapse.Collapse,a({"data-test-id":t,"aria-labelledby":`accordion--${r}`,isExpanded:e},s),g__default["default"].createElement("div",{className:i.accordionPanelContent},o))};var O=({className:o})=>({accordionItem:emotion.cx(emotion.css({padding:"0",margin:"0",borderBottom:`1px solid ${n__default["default"].colorElementMid}`,"&:first-child":{borderTop:`1px solid ${n__default["default"].colorElementMid}`}}),o)});var so=(po,u)=>{var H=po,{title:o="Accordion Title",titleElement:e="h2",testId:r="cf-ui-accordion-item",onExpand:t,onCollapse:s,children:m,align:p="end",className:i,isExpanded:x}=H,c=d(H,["title","titleElement","testId","onExpand","onCollapse","children","align","className","isExpanded"]);let F=O({className:i}),P=f36Core.useId(),{isOpen:b,handleOpen:z,handleClose:W}=f36Core.useControllableState({isOpen:x,onOpen:t,onClose:s}),V=()=>{b?W():z();};return g__default["default"].createElement(f36Core.Box,l(a({as:"li",className:F.accordionItem,testId:`${r}-${P}`},c),{ref:u}),g__default["default"].createElement(h,{onClick:V,isExpanded:b,element:e,ariaId:P,align:p},o),g__default["default"].createElement(E,{ariaId:P,isExpanded:b},m))},S=g__default["default"].forwardRef(so);var T=D;T.Item=S;
+
+exports.Accordion = T;
+exports.AccordionHeader = h;
+exports.AccordionItem = S;
+exports.AccordionPanel = E;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Accordion.tsx","../src/Accordion.styles.ts","../src/AccordionItem/AccordionItem.tsx","../src/AccordionHeader/AccordionHeader.tsx","../src/AccordionHeader/AccordionHeader.styles.ts","../src/AccordionPanel/AccordionPanel.tsx","../src/AccordionPanel/AccordionPanel.styles.ts","../src/AccordionItem/AccordionItem.styles.ts","../src/CompoundAccordion.tsx"],"names":["React","Box","css","cx","tokens","getAccordionStyles","className","_Accordion","_a","ref","_b","align","children","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","child","Accordion","useId","useControllableState","Subheading","ChevronDownTrimmedIcon","getHeaderStyles","getIconStyles","isExpanded","getAccordionHeaderStyles","props","AccordionHeader","onClick","ariaId","element","rest","Collapse","getAccordionPanelStyles","AccordionPanel","getAccordionItemStyles","_AccordionItem","title","titleElement","onExpand","onCollapse","id","isOpen","handleOpen","handleClose","handleOnClick","AccordionItem"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,OAAAC,MAA+C,uBCDxD,OAAS,OAAAC,EAAK,MAAAC,MAAU,UACxB,OAAOC,MAAY,yBAEZ,IAAMC,EAAqB,CAAC,CAAE,UAAAC,CAAU,KAA+B,CAC5E,UAAWH,EACTD,EAAI,CACF,UAAW,aACX,QAAS,IACT,OAAQ,IACR,UAAW,OACX,gBAAiB,CACf,UAAW,aAAaE,EAAO,SACjC,CACF,CAAC,EACDE,CACF,CACF,GDCA,IAAMC,EAAa,CACjBC,EAOAC,IACG,CARH,IAAAC,EAAAF,EACE,OAAAG,EAAQ,MACR,SAAAC,EACA,UAAAN,EACA,OAAAO,EAAS,iBAtBb,EAkBEH,EAKKI,EAAAC,EALLL,EAKK,CAJH,QACA,WACA,YACA,WAKF,IAAMM,EAASX,EAAmB,CAAE,UAAAC,CAAU,CAAC,EAC/C,OACEN,EAAA,cAACC,EAAAgB,EAAAC,EAAA,CACC,GAAG,KACH,UAAWF,EAAO,UAClB,OAAQH,GACJC,GAJL,CAKC,IAAKL,IAEJT,EAAM,SAAS,IAAIY,EAAWO,GACzBnB,EAAM,eAAemB,CAAK,EACrBnB,EAAM,aAAamB,EAAO,CAC/B,MAAAR,CACF,CAAC,EAEIQ,CACR,CACH,CAEJ,EAEaC,EAAYpB,EAAM,WAAWO,CAAU,EEhDpD,OAAOP,MAAW,QAElB,OACE,SAAAqB,GACA,OAAApB,GACA,wBAAAqB,OAGK,uBCRP,OAAOtB,MAAW,QAClB,OAAS,cAAAuB,MAAuC,6BAChD,OAAS,0BAAAC,OAA8B,wBCFvC,OAAS,OAAAtB,EAAK,MAAAC,MAAU,UACxB,OAAOC,MAAY,yBAOnB,IAAMqB,EAAkB,CAAC,CAAE,MAAAd,CAAM,IAC/BR,EACED,EAAI,CACF,QAAS,OACT,cAAe,MACf,WAAY,SACZ,OAAQ,IACR,QAASE,EAAO,SAChB,gBAAiB,cACjB,WAAYA,EAAO,iBACnB,SAAUA,EAAO,UACjB,WAAYA,EAAO,mBACnB,WAAYA,EAAO,YACnB,MAAOA,EAAO,QACd,MAAO,OACP,SAAU,MACV,OAAQ,UACR,WAAY,oBAAoBA,EAAO,6BAA6BA,EAAO;AAAA,qBAC5DA,EAAO,2BAA2BA,EAAO,0BACxD,UAAW,CACT,gBAAiBA,EAAO,OAC1B,EACA,UAAW,CACT,gBAAiBA,EAAO,QACxB,aAAcA,EAAO,mBACrB,UAAWA,EAAO,YAClB,QAAS,MACX,EACA,8BAA+B,CAC7B,gBAAiB,cACjB,aAAc,QACd,UAAW,OACb,EACA,kBAAmB,CACjB,gBAAiBA,EAAO,QACxB,aAAcA,EAAO,mBACrB,UAAWA,EAAO,WACpB,CACF,CAAC,EACDO,IAAU,OACRT,EAAI,CACF,cAAe,cACf,eAAgB,eAClB,CAAC,CACL,EAEIwB,EAAgB,CAAC,CAAE,MAAAf,EAAO,WAAAgB,CAAW,IACzCxB,EACED,EAAI,CACF,UAAW,eACX,WAAY,aAAaE,EAAO,6BAA6BA,EAAO,yBACtE,CAAC,EACDO,IAAU,OAAST,EAAI,CAAE,WAAYE,EAAO,QAAS,CAAC,EACtDO,IAAU,SAAWT,EAAI,CAAE,YAAaE,EAAO,QAAS,CAAC,EACzDuB,GACEzB,EAAI,CACF,UAAW,gBACb,CAAC,CACL,EAEW0B,EAA4BC,IAAuB,CAC9D,gBAAiBJ,EAAgBI,CAAK,EACtC,oBAAqBH,EAAcG,CAAK,CAC1C,GDrCO,IAAMC,EAAmBtB,GASJ,CATI,IAAAE,EAAAF,EAC9B,UAAAI,EACA,QAAAmB,EACA,WAAAJ,EAAa,GACb,OAAAK,EACA,QAAAC,EAAU,KACV,MAAAtB,EAAQ,MACR,OAAAE,EAAS,wBAzCX,EAkCgCH,EAQ3BwB,EAAAnB,EAR2BL,EAQ3B,CAPH,WACA,UACA,aACA,SACA,UACA,QACA,WAGA,IAAMM,EAASY,EAAyB,CAAE,MAAAjB,EAAO,WAAAgB,CAAW,CAAC,EAE7D,OACE3B,EAAA,cAACuB,EAAAN,EAAAC,EAAA,GAAegB,GAAf,CAAqB,OAAQrB,EAAQ,aAAa,OAAO,GAAIoB,IAC5DjC,EAAA,cAAC,UACC,KAAK,SACL,gBAAe2B,EACf,gBAAe,oBAAoBK,IACnC,GAAI,cAAcA,IAClB,UAAWhB,EAAO,gBAClB,QAASe,GAET/B,EAAA,cAACwB,GAAA,CACC,UAAWR,EAAO,oBAClB,QAAQ,YACV,EACCJ,CACH,CACF,CAEJ,EEhEA,OAAOZ,MAAmB,QAE1B,OAAS,YAAAmC,OAAgB,2BCFzB,OAAS,OAAAjC,OAAW,UACpB,OAAOE,MAAY,yBAEZ,IAAMgC,EAA0B,KAC9B,CACL,sBAAuBlC,GAAI,CACzB,MAAO,OACP,QAAS,GAAGE,EAAO,aAAaA,EAAO,YAAYA,EAAO,UAC5D,CAAC,CACH,GDYK,IAAMiC,EAAwD7B,GAM1C,CAN0C,IAAAE,EAAAF,EACnE,UAAAI,EACA,WAAAe,EAAa,GACb,OAAAK,EACA,OAAAnB,EAAS,uBAzBX,EAqBqEH,EAKhEI,EAAAC,EALgEL,EAKhE,CAJH,WACA,aACA,SACA,WAGA,IAAMM,EAASoB,EAAwB,EAEvC,OACEpC,EAAA,cAACmC,GAAAjB,EAAA,CACC,eAAcL,EACd,kBAAiB,cAAcmB,IAC/B,WAAYL,GACRb,GAEJd,EAAA,cAAC,OAAI,UAAWgB,EAAO,uBAAwBJ,CAAS,CAC1D,CAEJ,EExCA,OAAS,OAAAV,GAAK,MAAAC,OAAU,UACxB,OAAOC,MAAY,yBAEZ,IAAMkC,EAAyB,CAAC,CACrC,UAAAhC,CACF,KAEO,CACL,cAAeH,GACbD,GAAI,CACF,QAAS,IACT,OAAQ,IACR,aAAc,aAAaE,EAAO,kBAClC,gBAAiB,CACf,UAAW,aAAaA,EAAO,iBACjC,CACF,CAAC,EACDE,CACF,CACF,GL4BA,IAAMiC,GAAiB,CACrB/B,GAYAC,IACG,CAbH,IAAAC,EAAAF,GACE,OAAAgC,EAAQ,kBACR,aAAAC,EAAe,KACf,OAAA5B,EAAS,uBACT,SAAA6B,EACA,WAAAC,EACA,SAAA/B,EACA,MAAAD,EAAQ,MACR,UAAAL,EACA,WAAAqB,CAzDJ,EAgDEjB,EAUKI,EAAAC,EAVLL,EAUK,CATH,QACA,eACA,SACA,WACA,aACA,WACA,QACA,YACA,eAKF,IAAMM,EAASsB,EAAuB,CAAE,UAAAhC,CAAU,CAAC,EAC7CsC,EAAKvB,GAAM,EACX,CAAE,OAAAwB,EAAQ,WAAAC,EAAY,YAAAC,CAAY,EAAIzB,GAAqB,CAC/D,OAAQK,EACR,OAAQe,EACR,QAASC,CACX,CAAC,EAEKK,EAAgB,IAAM,CACtBH,EACFE,EAAY,EAEZD,EAAW,CAEf,EAEA,OACE9C,EAAA,cAACC,GAAAgB,EAAAC,EAAA,CACC,GAAG,KACH,UAAWF,EAAO,cAClB,OAAQ,GAAGH,KAAU+B,KACjB9B,GAJL,CAKC,IAAKL,IAELT,EAAA,cAAC8B,EAAA,CACC,QAASkB,EACT,WAAYH,EACZ,QAASJ,EACT,OAAQG,EACR,MAAOjC,GAEN6B,CACH,EAEAxC,EAAA,cAACqC,EAAA,CAAe,OAAQO,EAAI,WAAYC,GACrCjC,CACH,CACF,CAEJ,EAEaqC,EAAgBjD,EAAM,WAAWuC,EAAc,EMhGrD,IAAMnB,EAAYA,EACzBA,EAAU,KAAO6B","sourcesContent":["import React from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   * @default end\n   */\n  align?: 'start' | 'end';\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n}\n\nconst _Accordion = (\n  {\n    align = 'end',\n    children,\n    className,\n    testId = 'cf-ui-accordion',\n    ...otherProps\n  }: ExpandProps<AccordionProps>,\n  ref: React.Ref<HTMLUListElement>,\n) => {\n  const styles = getAccordionStyles({ className });\n  return (\n    <Box\n      as=\"ul\"\n      className={styles.accordion}\n      testId={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            align,\n          });\n        }\n        return child;\n      })}\n    </Box>\n  );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n  accordion: cx(\n    css({\n      boxSizing: 'border-box',\n      padding: '0',\n      margin: '0',\n      listStyle: 'none',\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.gray300}`,\n      },\n    }),\n    className,\n  ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport {\n  useId,\n  Box,\n  useControllableState,\n  type CommonProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n  /**\n   * The accordion title\n   */\n  title?: React.ReactNode;\n  /**\n   * The heading element that will be used by the AccordionHeader\n   */\n  titleElement?: HeadingElement;\n  /**\n   * The children of the AccordionItem are in fact the content of the accordion\n   */\n  children?: React.ReactNode;\n  /**\n   * A function to be called when the accordion item is opened\n   */\n  onExpand?: () => void;\n  /**\n   * A function to be called when the accordion item is closed\n   */\n  onCollapse?: () => void;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n\n  /**\n   * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n   * But you can make it controlled by providing boolean\n   */\n  isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n  {\n    title = 'Accordion Title',\n    titleElement = 'h2',\n    testId = 'cf-ui-accordion-item',\n    onExpand,\n    onCollapse,\n    children,\n    align = 'end',\n    className,\n    isExpanded,\n    ...otherProps\n  }: ExpandProps<AccordionItemProps>,\n  ref: React.Ref<HTMLLIElement>,\n) => {\n  const styles = getAccordionItemStyles({ className });\n  const id = useId();\n  const { isOpen, handleOpen, handleClose } = useControllableState({\n    isOpen: isExpanded,\n    onOpen: onExpand,\n    onClose: onCollapse,\n  });\n\n  const handleOnClick = () => {\n    if (isOpen) {\n      handleClose();\n    } else {\n      handleOpen();\n    }\n  };\n\n  return (\n    <Box\n      as=\"li\"\n      className={styles.accordionItem}\n      testId={`${testId}-${id}`}\n      {...otherProps}\n      ref={ref}\n    >\n      <AccordionHeader\n        onClick={handleOnClick}\n        isExpanded={isOpen}\n        element={titleElement}\n        ariaId={id}\n        align={align}\n      >\n        {title}\n      </AccordionHeader>\n\n      <AccordionPanel ariaId={id} isExpanded={isOpen}>\n        {children}\n      </AccordionPanel>\n    </Box>\n  );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading, type HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * The function that will be called once the user clicks on the accordion title\n   */\n  onClick: VoidFunction;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n  /**\n   * The heading element that will be used by the Subheading component\n   */\n  element?: HeadingElement;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n  children,\n  onClick,\n  isExpanded = false,\n  ariaId,\n  element = 'h2',\n  align = 'end',\n  testId = 'cf-ui-accordion-header',\n  ...rest\n}: AccordionHeaderProps) => {\n  const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n  return (\n    <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n      <button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-controls={`accordion-panel--${ariaId}`}\n        id={`accordion--${ariaId}`}\n        className={styles.accordionHeader}\n        onClick={onClick}\n      >\n        <ChevronDownTrimmedIcon\n          className={styles.accordionHeaderIcon}\n          variant=\"secondary\"\n        />\n        {children}\n      </button>\n    </Subheading>\n  );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n  align: 'start' | 'end';\n  isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n  cx(\n    css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      border: '0',\n      padding: tokens.spacingM,\n      backgroundColor: 'transparent',\n      fontFamily: tokens.fontStackPrimary,\n      fontSize: tokens.fontSizeL,\n      fontWeight: tokens.fontWeightDemiBold,\n      lineHeight: tokens.lineHeightL,\n      color: tokens.gray800,\n      width: '100%',\n      minWidth: '9px',\n      cursor: 'pointer',\n      transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n        box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n      },\n      '&:focus': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n        outline: 'none',\n      },\n      '&:focus:not(:focus-visible)': {\n        backgroundColor: 'transparent',\n        borderRadius: 'unset',\n        boxShadow: 'unset',\n      },\n      '&:focus-visible': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n      },\n    }),\n    align === 'end' &&\n      css({\n        flexDirection: 'row-reverse',\n        justifyContent: 'space-between',\n      }),\n  );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n  cx(\n    css({\n      transform: 'rotate(0deg)',\n      transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n    }),\n    align === 'end' && css({ marginLeft: tokens.spacingM }),\n    align === 'start' && css({ marginRight: tokens.spacingM }),\n    isExpanded &&\n      css({\n        transform: 'rotate(180deg)',\n      }),\n  );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n  accordionHeader: getHeaderStyles(props),\n  accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n  children,\n  isExpanded = false,\n  ariaId,\n  testId = 'cf-ui-accordion-panel',\n  ...otherProps\n}: AccordionPanelProps) => {\n  const styles = getAccordionPanelStyles();\n\n  return (\n    <Collapse\n      data-test-id={testId}\n      aria-labelledby={`accordion--${ariaId}`}\n      isExpanded={isExpanded}\n      {...otherProps}\n    >\n      <div className={styles.accordionPanelContent}>{children}</div>\n    </Collapse>\n  );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n  return {\n    accordionPanelContent: css({\n      width: '100%',\n      padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n    }),\n  };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n  className,\n}: {\n  className?: string;\n}) => ({\n  accordionItem: cx(\n    css({\n      padding: '0',\n      margin: '0',\n      borderBottom: `1px solid ${tokens.colorElementMid}`,\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.colorElementMid}`,\n      },\n    }),\n    className,\n  ),\n});\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n  Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n"]}

package/dist/index.mjs

@@ -0,0 +1,13 @@
+import g from 'react';
+import { Box, useId, useControllableState } from '@contentful/f36-core';
+import { cx, css } from 'emotion';
+import n from '@contentful/f36-tokens';
+import { Subheading } from '@contentful/f36-typography';
+import { ChevronDownTrimmedIcon } from '@contentful/f36-icons';
+import { Collapse } from '@contentful/f36-collapse';
+
+var _=Object.defineProperty,j=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var R=(o,e,r)=>e in o?_(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,a=(o,e)=>{for(var r in e||(e={}))$.call(e,r)&&R(o,r,e[r]);if(y)for(var r of y(e))k.call(e,r)&&R(o,r,e[r]);return o},l=(o,e)=>j(o,U(e));var d=(o,e)=>{var r={};for(var t in o)$.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(o!=null&&y)for(var t of y(o))e.indexOf(t)<0&&k.call(o,t)&&(r[t]=o[t]);return r};var w=({className:o})=>({accordion:cx(css({boxSizing:"border-box",padding:"0",margin:"0",listStyle:"none","&:first-child":{borderTop:`1px solid ${n.gray300}`}}),o)});var K=(p,m)=>{var i=p,{align:o="end",children:e,className:r,testId:t="cf-ui-accordion"}=i,s=d(i,["align","children","className","testId"]);let x=w({className:r});return g.createElement(Box,l(a({as:"ul",className:x.accordion,testId:t},s),{ref:m}),g.Children.map(e,c=>g.isValidElement(c)?g.cloneElement(c,{align:o}):c))},D=g.forwardRef(K);var Q=({align:o})=>cx(css({display:"flex",flexDirection:"row",alignItems:"center",border:"0",padding:n.spacingM,backgroundColor:"transparent",fontFamily:n.fontStackPrimary,fontSize:n.fontSizeL,fontWeight:n.fontWeightDemiBold,lineHeight:n.lineHeightL,color:n.gray800,width:"100%",minWidth:"9px",cursor:"pointer",transition:`background-color ${n.transitionDurationDefault} ${n.transitionEasingDefault},
+        box-shadow ${n.transitionDurationShort} ${n.transitionEasingDefault}`,"&:hover":{backgroundColor:n.gray100},"&:focus":{backgroundColor:n.gray100,borderRadius:n.borderRadiusMedium,boxShadow:n.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{backgroundColor:"transparent",borderRadius:"unset",boxShadow:"unset"},"&:focus-visible":{backgroundColor:n.gray100,borderRadius:n.borderRadiusMedium,boxShadow:n.glowPrimary}}),o==="end"&&css({flexDirection:"row-reverse",justifyContent:"space-between"})),Y=({align:o,isExpanded:e})=>cx(css({transform:"rotate(0deg)",transition:`transform ${n.transitionDurationDefault} ${n.transitionEasingDefault}`}),o==="end"&&css({marginLeft:n.spacingM}),o==="start"&&css({marginRight:n.spacingM}),e&&css({transform:"rotate(180deg)"})),M=o=>({accordionHeader:Q(o),accordionHeaderIcon:Y(o)});var h=x=>{var c=x,{children:o,onClick:e,isExpanded:r=!1,ariaId:t,element:s="h2",align:m="end",testId:p="cf-ui-accordion-header"}=c,i=d(c,["children","onClick","isExpanded","ariaId","element","align","testId"]);let u=M({align:m,isExpanded:r});return g.createElement(Subheading,l(a({},i),{testId:p,marginBottom:"none",as:s}),g.createElement("button",{type:"button","aria-expanded":r,"aria-controls":`accordion-panel--${t}`,id:`accordion--${t}`,className:u.accordionHeader,onClick:e},g.createElement(ChevronDownTrimmedIcon,{className:u.accordionHeaderIcon,variant:"secondary"}),o))};var v=()=>({accordionPanelContent:css({width:"100%",padding:`${n.spacingXs} ${n.spacingM} ${n.spacingM}`})});var E=m=>{var p=m,{children:o,isExpanded:e=!1,ariaId:r,testId:t="cf-ui-accordion-panel"}=p,s=d(p,["children","isExpanded","ariaId","testId"]);let i=v();return g.createElement(Collapse,a({"data-test-id":t,"aria-labelledby":`accordion--${r}`,isExpanded:e},s),g.createElement("div",{className:i.accordionPanelContent},o))};var O=({className:o})=>({accordionItem:cx(css({padding:"0",margin:"0",borderBottom:`1px solid ${n.colorElementMid}`,"&:first-child":{borderTop:`1px solid ${n.colorElementMid}`}}),o)});var so=(po,u)=>{var H=po,{title:o="Accordion Title",titleElement:e="h2",testId:r="cf-ui-accordion-item",onExpand:t,onCollapse:s,children:m,align:p="end",className:i,isExpanded:x}=H,c=d(H,["title","titleElement","testId","onExpand","onCollapse","children","align","className","isExpanded"]);let F=O({className:i}),P=useId(),{isOpen:b,handleOpen:z,handleClose:W}=useControllableState({isOpen:x,onOpen:t,onClose:s}),V=()=>{b?W():z();};return g.createElement(Box,l(a({as:"li",className:F.accordionItem,testId:`${r}-${P}`},c),{ref:u}),g.createElement(h,{onClick:V,isExpanded:b,element:e,ariaId:P,align:p},o),g.createElement(E,{ariaId:P,isExpanded:b},m))},S=g.forwardRef(so);var T=D;T.Item=S;
+
+export { T as Accordion, h as AccordionHeader, S as AccordionItem, E as AccordionPanel };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Accordion.tsx","../src/Accordion.styles.ts","../src/AccordionItem/AccordionItem.tsx","../src/AccordionHeader/AccordionHeader.tsx","../src/AccordionHeader/AccordionHeader.styles.ts","../src/AccordionPanel/AccordionPanel.tsx","../src/AccordionPanel/AccordionPanel.styles.ts","../src/AccordionItem/AccordionItem.styles.ts","../src/CompoundAccordion.tsx"],"names":["React","Box","css","cx","tokens","getAccordionStyles","className","_Accordion","_a","ref","_b","align","children","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","child","Accordion","useId","useControllableState","Subheading","ChevronDownTrimmedIcon","getHeaderStyles","getIconStyles","isExpanded","getAccordionHeaderStyles","props","AccordionHeader","onClick","ariaId","element","rest","Collapse","getAccordionPanelStyles","AccordionPanel","getAccordionItemStyles","_AccordionItem","title","titleElement","onExpand","onCollapse","id","isOpen","handleOpen","handleClose","handleOnClick","AccordionItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   * @default end\n   */\n  align?: 'start' | 'end';\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n}\n\nconst _Accordion = (\n  {\n    align = 'end',\n    children,\n    className,\n    testId = 'cf-ui-accordion',\n    ...otherProps\n  }: ExpandProps<AccordionProps>,\n  ref: React.Ref<HTMLUListElement>,\n) => {\n  const styles = getAccordionStyles({ className });\n  return (\n    <Box\n      as=\"ul\"\n      className={styles.accordion}\n      testId={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            align,\n          });\n        }\n        return child;\n      })}\n    </Box>\n  );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n  accordion: cx(\n    css({\n      boxSizing: 'border-box',\n      padding: '0',\n      margin: '0',\n      listStyle: 'none',\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.gray300}`,\n      },\n    }),\n    className,\n  ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport {\n  useId,\n  Box,\n  useControllableState,\n  type CommonProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n  /**\n   * The accordion title\n   */\n  title?: React.ReactNode;\n  /**\n   * The heading element that will be used by the AccordionHeader\n   */\n  titleElement?: HeadingElement;\n  /**\n   * The children of the AccordionItem are in fact the content of the accordion\n   */\n  children?: React.ReactNode;\n  /**\n   * A function to be called when the accordion item is opened\n   */\n  onExpand?: () => void;\n  /**\n   * A function to be called when the accordion item is closed\n   */\n  onCollapse?: () => void;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n\n  /**\n   * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n   * But you can make it controlled by providing boolean\n   */\n  isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n  {\n    title = 'Accordion Title',\n    titleElement = 'h2',\n    testId = 'cf-ui-accordion-item',\n    onExpand,\n    onCollapse,\n    children,\n    align = 'end',\n    className,\n    isExpanded,\n    ...otherProps\n  }: ExpandProps<AccordionItemProps>,\n  ref: React.Ref<HTMLLIElement>,\n) => {\n  const styles = getAccordionItemStyles({ className });\n  const id = useId();\n  const { isOpen, handleOpen, handleClose } = useControllableState({\n    isOpen: isExpanded,\n    onOpen: onExpand,\n    onClose: onCollapse,\n  });\n\n  const handleOnClick = () => {\n    if (isOpen) {\n      handleClose();\n    } else {\n      handleOpen();\n    }\n  };\n\n  return (\n    <Box\n      as=\"li\"\n      className={styles.accordionItem}\n      testId={`${testId}-${id}`}\n      {...otherProps}\n      ref={ref}\n    >\n      <AccordionHeader\n        onClick={handleOnClick}\n        isExpanded={isOpen}\n        element={titleElement}\n        ariaId={id}\n        align={align}\n      >\n        {title}\n      </AccordionHeader>\n\n      <AccordionPanel ariaId={id} isExpanded={isOpen}>\n        {children}\n      </AccordionPanel>\n    </Box>\n  );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading, type HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * The function that will be called once the user clicks on the accordion title\n   */\n  onClick: VoidFunction;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n  /**\n   * The heading element that will be used by the Subheading component\n   */\n  element?: HeadingElement;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n  children,\n  onClick,\n  isExpanded = false,\n  ariaId,\n  element = 'h2',\n  align = 'end',\n  testId = 'cf-ui-accordion-header',\n  ...rest\n}: AccordionHeaderProps) => {\n  const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n  return (\n    <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n      <button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-controls={`accordion-panel--${ariaId}`}\n        id={`accordion--${ariaId}`}\n        className={styles.accordionHeader}\n        onClick={onClick}\n      >\n        <ChevronDownTrimmedIcon\n          className={styles.accordionHeaderIcon}\n          variant=\"secondary\"\n        />\n        {children}\n      </button>\n    </Subheading>\n  );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n  align: 'start' | 'end';\n  isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n  cx(\n    css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      border: '0',\n      padding: tokens.spacingM,\n      backgroundColor: 'transparent',\n      fontFamily: tokens.fontStackPrimary,\n      fontSize: tokens.fontSizeL,\n      fontWeight: tokens.fontWeightDemiBold,\n      lineHeight: tokens.lineHeightL,\n      color: tokens.gray800,\n      width: '100%',\n      minWidth: '9px',\n      cursor: 'pointer',\n      transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n        box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n      },\n      '&:focus': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n        outline: 'none',\n      },\n      '&:focus:not(:focus-visible)': {\n        backgroundColor: 'transparent',\n        borderRadius: 'unset',\n        boxShadow: 'unset',\n      },\n      '&:focus-visible': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n      },\n    }),\n    align === 'end' &&\n      css({\n        flexDirection: 'row-reverse',\n        justifyContent: 'space-between',\n      }),\n  );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n  cx(\n    css({\n      transform: 'rotate(0deg)',\n      transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n    }),\n    align === 'end' && css({ marginLeft: tokens.spacingM }),\n    align === 'start' && css({ marginRight: tokens.spacingM }),\n    isExpanded &&\n      css({\n        transform: 'rotate(180deg)',\n      }),\n  );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n  accordionHeader: getHeaderStyles(props),\n  accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n  children,\n  isExpanded = false,\n  ariaId,\n  testId = 'cf-ui-accordion-panel',\n  ...otherProps\n}: AccordionPanelProps) => {\n  const styles = getAccordionPanelStyles();\n\n  return (\n    <Collapse\n      data-test-id={testId}\n      aria-labelledby={`accordion--${ariaId}`}\n      isExpanded={isExpanded}\n      {...otherProps}\n    >\n      <div className={styles.accordionPanelContent}>{children}</div>\n    </Collapse>\n  );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n  return {\n    accordionPanelContent: css({\n      width: '100%',\n      padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n    }),\n  };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n  className,\n}: {\n  className?: string;\n}) => ({\n  accordionItem: cx(\n    css({\n      padding: '0',\n      margin: '0',\n      borderBottom: `1px solid ${tokens.colorElementMid}`,\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.colorElementMid}`,\n      },\n    }),\n    className,\n  ),\n});\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n  Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n"]}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@contentful/f36-accordion",
-  "version": "4.15.1",
+  "version": "4.18.0",
   "description": "Forma 36: Accordion React Component",
   "license": "MIT",
   "files": [
     "dist"
   ],
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
   "browserslist": "extends @contentful/browserslist-config",
@@ -17,15 +17,15 @@
     "url": "https://github.com/contentful/forma-36"
   },
   "scripts": {
-    "build": "parcel build"
+    "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-collapse": "^4.15.1",
-    "@contentful/f36-core": "^4.15.1",
-    "@contentful/f36-icons": "^4.15.1",
+    "@contentful/f36-collapse": "^4.18.0",
+    "@contentful/f36-core": "^4.18.0",
+    "@contentful/f36-icons": "^4.18.0",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-typography": "^4.15.1",
+    "@contentful/f36-typography": "^4.18.0",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {

package/dist/main.js

@@ -1,232 +0,0 @@
-var $9pthv$react = require("react");
-var $9pthv$contentfulf36core = require("@contentful/f36-core");
-var $9pthv$emotion = require("emotion");
-var $9pthv$contentfulf36tokens = require("@contentful/f36-tokens");
-var $9pthv$contentfulf36typography = require("@contentful/f36-typography");
-var $9pthv$contentfulf36icons = require("@contentful/f36-icons");
-var $9pthv$contentfulf36collapse = require("@contentful/f36-collapse");
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "Accordion", () => $485e20d95dcb1fa7$export$a766cd26d0d69044);
-$parcel$export(module.exports, "AccordionHeader", () => $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41);
-$parcel$export(module.exports, "AccordionItem", () => $b9a3851e41efa019$export$d99097c13d4dac9f);
-$parcel$export(module.exports, "AccordionPanel", () => $dc0312cfa0956395$export$7cad6f17fd6e117b);
-
-
-
-
-
-const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className  })=>({
-        accordion: (0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
-            boxSizing: "border-box",
-            padding: "0",
-            margin: "0",
-            listStyle: "none",
-            "&:first-child": {
-                borderTop: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray300}`
-            }
-        }), className)
-    });
-
-
-const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = "end" , children: children , className: className , testId: testId = "cf-ui-accordion" , ...otherProps }, ref)=>{
-    const styles = (0, $b2e2219a9d74caf2$export$af90c4d6702a6ca7)({
-        className: className
-    });
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36core.Box), {
-        as: "ul",
-        className: styles.accordion,
-        testId: testId,
-        ...otherProps,
-        ref: ref
-    }, (0, ($parcel$interopDefault($9pthv$react))).Children.map(children, (child)=>{
-        if (/*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).isValidElement(child)) return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).cloneElement(child, {
-            align: align
-        });
-        return child;
-    }));
-};
-const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
-
-
-
-
-
-
-
-
-
-
-const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align  })=>(0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        border: "0",
-        padding: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM,
-        backgroundColor: "transparent",
-        fontFamily: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontStackPrimary,
-        fontSize: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontSizeL,
-        fontWeight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontWeightDemiBold,
-        lineHeight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).lineHeightL,
-        color: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray800,
-        width: "100%",
-        minWidth: "9px",
-        cursor: "pointer",
-        transition: `background-color ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault},
-        box-shadow ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationShort} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault}`,
-        "&:hover": {
-            backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100
-        },
-        "&:focus": {
-            backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100,
-            borderRadius: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).borderRadiusMedium,
-            boxShadow: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).glowPrimary,
-            outline: "none"
-        },
-        "&:focus:not(:focus-visible)": {
-            backgroundColor: "transparent",
-            borderRadius: "unset",
-            boxShadow: "unset"
-        },
-        "&:focus-visible": {
-            backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100,
-            borderRadius: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).borderRadiusMedium,
-            boxShadow: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).glowPrimary
-        }
-    }), align === "end" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
-        name: "1tvf3d0",
-        styles: "flex-direction:row-reverse;justify-content:space-between;"
-    }));
-const $cc0727a9cc62031c$var$getIconStyles = ({ align: align , isExpanded: isExpanded  })=>(0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
-        transform: "rotate(0deg)",
-        transition: `transform ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault}`
-    }), align === "end" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
-        marginLeft: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM
-    }), align === "start" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
-        marginRight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM
-    }), isExpanded && /*#__PURE__*/ (0, $9pthv$emotion.css)({
-        name: "4ky835",
-        styles: "transform:rotate(180deg);"
-    }));
-const $cc0727a9cc62031c$export$b6b01239d0041103 = (props)=>({
-        accordionHeader: $cc0727a9cc62031c$var$getHeaderStyles(props),
-        accordionHeaderIcon: $cc0727a9cc62031c$var$getIconStyles(props)
-    });
-
-
-const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = "h2" , align: align = "end" , testId: testId = "cf-ui-accordion-header" , ...rest })=>{
-    const styles = (0, $cc0727a9cc62031c$export$b6b01239d0041103)({
-        align: align,
-        isExpanded: isExpanded
-    });
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36typography.Subheading), {
-        ...rest,
-        testId: testId,
-        marginBottom: "none",
-        as: element
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement("button", {
-        type: "button",
-        "aria-expanded": isExpanded,
-        "aria-controls": `accordion-panel--${ariaId}`,
-        id: `accordion--${ariaId}`,
-        className: styles.accordionHeader,
-        onClick: onClick
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36icons.ChevronDownTrimmedIcon), {
-        className: styles.accordionHeaderIcon,
-        variant: "secondary"
-    }), children));
-};
-
-
-
-
-
-
-const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
-    return {
-        accordionPanelContent: /*#__PURE__*/ (0, $9pthv$emotion.css)({
-            width: "100%",
-            padding: `${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingXs} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM}`
-        })
-    };
-};
-
-
-const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = "cf-ui-accordion-panel" , ...otherProps })=>{
-    const styles = (0, $1911a31b860eeb50$export$2db50514b4b2c1ee)();
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36collapse.Collapse), {
-        "data-test-id": testId,
-        "aria-labelledby": `accordion--${ariaId}`,
-        isExpanded: isExpanded,
-        ...otherProps
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement("div", {
-        className: styles.accordionPanelContent
-    }, children));
-};
-
-
-
-
-
-const $b70a2de4b5faa5c1$export$c4864364a487dfa = ({ className: className  })=>({
-        accordionItem: (0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
-            padding: "0",
-            margin: "0",
-            borderBottom: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).colorElementMid}`,
-            "&:first-child": {
-                borderTop: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).colorElementMid}`
-            }
-        }), className)
-    });
-
-
-const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = "Accordion Title" , titleElement: titleElement = "h2" , testId: testId = "cf-ui-accordion-item" , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = "end" , className: className , isExpanded: isExpanded , ...otherProps }, ref)=>{
-    const styles = (0, $b70a2de4b5faa5c1$export$c4864364a487dfa)({
-        className: className
-    });
-    const id = (0, $9pthv$contentfulf36core.useId)();
-    const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose  } = (0, $9pthv$contentfulf36core.useControllableState)({
-        isOpen: isExpanded,
-        onOpen: onExpand,
-        onClose: onCollapse
-    });
-    const handleOnClick = ()=>{
-        if (isOpen) handleClose();
-        else handleOpen();
-    };
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36core.Box), {
-        as: "li",
-        className: styles.accordionItem,
-        testId: `${testId}-${id}`,
-        ...otherProps,
-        ref: ref
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41), {
-        onClick: handleOnClick,
-        isExpanded: isOpen,
-        element: titleElement,
-        ariaId: id,
-        align: align
-    }, title), /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $dc0312cfa0956395$export$7cad6f17fd6e117b), {
-        ariaId: id,
-        isExpanded: isOpen
-    }, children));
-};
-const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).forwardRef($b9a3851e41efa019$var$_AccordionItem);
-
-
-const $485e20d95dcb1fa7$export$a766cd26d0d69044 = (0, $6b1aad2dfaf9ce0d$export$a766cd26d0d69044);
-$485e20d95dcb1fa7$export$a766cd26d0d69044.Item = (0, $b9a3851e41efa019$export$d99097c13d4dac9f);
-
-
-
-
-
-
-
-//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n  Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   * @default end\n   */\n  align?: 'start' | 'end';\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n}\n\nconst _Accordion = (\n  {\n    align = 'end',\n    children,\n    className,\n    testId = 'cf-ui-accordion',\n    ...otherProps\n  }: ExpandProps<AccordionProps>,\n  ref: React.Ref<HTMLUListElement>,\n) => {\n  const styles = getAccordionStyles({ className });\n  return (\n    <Box\n      as=\"ul\"\n      className={styles.accordion}\n      testId={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            align,\n          });\n        }\n        return child;\n      })}\n    </Box>\n  );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n  accordion: cx(\n    css({\n      boxSizing: 'border-box',\n      padding: '0',\n      margin: '0',\n      listStyle: 'none',\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.gray300}`,\n      },\n    }),\n    className,\n  ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n  /**\n   * The accordion title\n   */\n  title?: React.ReactNode;\n  /**\n   * The heading element that will be used by the AccordionHeader\n   */\n  titleElement?: HeadingElement;\n  /**\n   * The children of the AccordionItem are in fact the content of the accordion\n   */\n  children?: React.ReactNode;\n  /**\n   * A function to be called when the accordion item is opened\n   */\n  onExpand?: () => void;\n  /**\n   * A function to be called when the accordion item is closed\n   */\n  onCollapse?: () => void;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n\n  /**\n   * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n   * But you can make it controlled by providing boolean\n   */\n  isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n  {\n    title = 'Accordion Title',\n    titleElement = 'h2',\n    testId = 'cf-ui-accordion-item',\n    onExpand,\n    onCollapse,\n    children,\n    align = 'end',\n    className,\n    isExpanded,\n    ...otherProps\n  }: ExpandProps<AccordionItemProps>,\n  ref: React.Ref<HTMLLIElement>,\n) => {\n  const styles = getAccordionItemStyles({ className });\n  const id = useId();\n  const { isOpen, handleOpen, handleClose } = useControllableState({\n    isOpen: isExpanded,\n    onOpen: onExpand,\n    onClose: onCollapse,\n  });\n\n  const handleOnClick = () => {\n    if (isOpen) {\n      handleClose();\n    } else {\n      handleOpen();\n    }\n  };\n\n  return (\n    <Box\n      as=\"li\"\n      className={styles.accordionItem}\n      testId={`${testId}-${id}`}\n      {...otherProps}\n      ref={ref}\n    >\n      <AccordionHeader\n        onClick={handleOnClick}\n        isExpanded={isOpen}\n        element={titleElement}\n        ariaId={id}\n        align={align}\n      >\n        {title}\n      </AccordionHeader>\n\n      <AccordionPanel ariaId={id} isExpanded={isOpen}>\n        {children}\n      </AccordionPanel>\n    </Box>\n  );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * The function that will be called once the user clicks on the accordion title\n   */\n  onClick: VoidFunction;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n  /**\n   * The heading element that will be used by the Subheading component\n   */\n  element?: HeadingElement;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n  children,\n  onClick,\n  isExpanded = false,\n  ariaId,\n  element = 'h2',\n  align = 'end',\n  testId = 'cf-ui-accordion-header',\n  ...rest\n}: AccordionHeaderProps) => {\n  const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n  return (\n    <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n      <button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-controls={`accordion-panel--${ariaId}`}\n        id={`accordion--${ariaId}`}\n        className={styles.accordionHeader}\n        onClick={onClick}\n      >\n        <ChevronDownTrimmedIcon\n          className={styles.accordionHeaderIcon}\n          variant=\"secondary\"\n        />\n        {children}\n      </button>\n    </Subheading>\n  );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n  align: 'start' | 'end';\n  isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n  cx(\n    css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      border: '0',\n      padding: tokens.spacingM,\n      backgroundColor: 'transparent',\n      fontFamily: tokens.fontStackPrimary,\n      fontSize: tokens.fontSizeL,\n      fontWeight: tokens.fontWeightDemiBold,\n      lineHeight: tokens.lineHeightL,\n      color: tokens.gray800,\n      width: '100%',\n      minWidth: '9px',\n      cursor: 'pointer',\n      transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n        box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n      },\n      '&:focus': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n        outline: 'none',\n      },\n      '&:focus:not(:focus-visible)': {\n        backgroundColor: 'transparent',\n        borderRadius: 'unset',\n        boxShadow: 'unset',\n      },\n      '&:focus-visible': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n      },\n    }),\n    align === 'end' &&\n      css({\n        flexDirection: 'row-reverse',\n        justifyContent: 'space-between',\n      }),\n  );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n  cx(\n    css({\n      transform: 'rotate(0deg)',\n      transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n    }),\n    align === 'end' && css({ marginLeft: tokens.spacingM }),\n    align === 'start' && css({ marginRight: tokens.spacingM }),\n    isExpanded &&\n      css({\n        transform: 'rotate(180deg)',\n      }),\n  );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n  accordionHeader: getHeaderStyles(props),\n  accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n  children,\n  isExpanded = false,\n  ariaId,\n  testId = 'cf-ui-accordion-panel',\n  ...otherProps\n}: AccordionPanelProps) => {\n  const styles = getAccordionPanelStyles();\n\n  return (\n    <Collapse\n      data-test-id={testId}\n      aria-labelledby={`accordion--${ariaId}`}\n      isExpanded={isExpanded}\n      {...otherProps}\n    >\n      <div className={styles.accordionPanelContent}>{children}</div>\n    </Collapse>\n  );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n  return {\n    accordionPanelContent: css({\n      width: '100%',\n      padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n    }),\n  };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n  className,\n}: {\n  className?: string;\n}) => ({\n  accordionItem: cx(\n    css({\n      padding: '0',\n      margin: '0',\n      borderBottom: `1px solid ${tokens.colorElementMid}`,\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.colorElementMid}`,\n      },\n    }),\n    className,\n  ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,222 +0,0 @@
-import $jACei$react from "react";
-import {Box as $jACei$Box, useId as $jACei$useId, useControllableState as $jACei$useControllableState} from "@contentful/f36-core";
-import {cx as $jACei$cx, css as $jACei$css} from "emotion";
-import $jACei$contentfulf36tokens from "@contentful/f36-tokens";
-import {Subheading as $jACei$Subheading} from "@contentful/f36-typography";
-import {ChevronDownTrimmedIcon as $jACei$ChevronDownTrimmedIcon} from "@contentful/f36-icons";
-import {Collapse as $jACei$Collapse} from "@contentful/f36-collapse";
-
-
-
-
-
-
-const $d678e0ec669f4067$export$af90c4d6702a6ca7 = ({ className: className  })=>({
-        accordion: (0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
-            boxSizing: "border-box",
-            padding: "0",
-            margin: "0",
-            listStyle: "none",
-            "&:first-child": {
-                borderTop: `1px solid ${(0, $jACei$contentfulf36tokens).gray300}`
-            }
-        }), className)
-    });
-
-
-const $a517c4a963657a24$var$_Accordion = ({ align: align = "end" , children: children , className: className , testId: testId = "cf-ui-accordion" , ...otherProps }, ref)=>{
-    const styles = (0, $d678e0ec669f4067$export$af90c4d6702a6ca7)({
-        className: className
-    });
-    return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Box), {
-        as: "ul",
-        className: styles.accordion,
-        testId: testId,
-        ...otherProps,
-        ref: ref
-    }, (0, $jACei$react).Children.map(children, (child)=>{
-        if (/*#__PURE__*/ (0, $jACei$react).isValidElement(child)) return /*#__PURE__*/ (0, $jACei$react).cloneElement(child, {
-            align: align
-        });
-        return child;
-    }));
-};
-const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $jACei$react).forwardRef($a517c4a963657a24$var$_Accordion);
-
-
-
-
-
-
-
-
-
-
-const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align  })=>(0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        border: "0",
-        padding: (0, $jACei$contentfulf36tokens).spacingM,
-        backgroundColor: "transparent",
-        fontFamily: (0, $jACei$contentfulf36tokens).fontStackPrimary,
-        fontSize: (0, $jACei$contentfulf36tokens).fontSizeL,
-        fontWeight: (0, $jACei$contentfulf36tokens).fontWeightDemiBold,
-        lineHeight: (0, $jACei$contentfulf36tokens).lineHeightL,
-        color: (0, $jACei$contentfulf36tokens).gray800,
-        width: "100%",
-        minWidth: "9px",
-        cursor: "pointer",
-        transition: `background-color ${(0, $jACei$contentfulf36tokens).transitionDurationDefault} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault},
-        box-shadow ${(0, $jACei$contentfulf36tokens).transitionDurationShort} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault}`,
-        "&:hover": {
-            backgroundColor: (0, $jACei$contentfulf36tokens).gray100
-        },
-        "&:focus": {
-            backgroundColor: (0, $jACei$contentfulf36tokens).gray100,
-            borderRadius: (0, $jACei$contentfulf36tokens).borderRadiusMedium,
-            boxShadow: (0, $jACei$contentfulf36tokens).glowPrimary,
-            outline: "none"
-        },
-        "&:focus:not(:focus-visible)": {
-            backgroundColor: "transparent",
-            borderRadius: "unset",
-            boxShadow: "unset"
-        },
-        "&:focus-visible": {
-            backgroundColor: (0, $jACei$contentfulf36tokens).gray100,
-            borderRadius: (0, $jACei$contentfulf36tokens).borderRadiusMedium,
-            boxShadow: (0, $jACei$contentfulf36tokens).glowPrimary
-        }
-    }), align === "end" && /*#__PURE__*/ (0, $jACei$css)({
-        name: "1tvf3d0",
-        styles: "flex-direction:row-reverse;justify-content:space-between;"
-    }));
-const $d95c2a37e890ef38$var$getIconStyles = ({ align: align , isExpanded: isExpanded  })=>(0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
-        transform: "rotate(0deg)",
-        transition: `transform ${(0, $jACei$contentfulf36tokens).transitionDurationDefault} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault}`
-    }), align === "end" && /*#__PURE__*/ (0, $jACei$css)({
-        marginLeft: (0, $jACei$contentfulf36tokens).spacingM
-    }), align === "start" && /*#__PURE__*/ (0, $jACei$css)({
-        marginRight: (0, $jACei$contentfulf36tokens).spacingM
-    }), isExpanded && /*#__PURE__*/ (0, $jACei$css)({
-        name: "4ky835",
-        styles: "transform:rotate(180deg);"
-    }));
-const $d95c2a37e890ef38$export$b6b01239d0041103 = (props)=>({
-        accordionHeader: $d95c2a37e890ef38$var$getHeaderStyles(props),
-        accordionHeaderIcon: $d95c2a37e890ef38$var$getIconStyles(props)
-    });
-
-
-const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = "h2" , align: align = "end" , testId: testId = "cf-ui-accordion-header" , ...rest })=>{
-    const styles = (0, $d95c2a37e890ef38$export$b6b01239d0041103)({
-        align: align,
-        isExpanded: isExpanded
-    });
-    return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Subheading), {
-        ...rest,
-        testId: testId,
-        marginBottom: "none",
-        as: element
-    }, /*#__PURE__*/ (0, $jACei$react).createElement("button", {
-        type: "button",
-        "aria-expanded": isExpanded,
-        "aria-controls": `accordion-panel--${ariaId}`,
-        id: `accordion--${ariaId}`,
-        className: styles.accordionHeader,
-        onClick: onClick
-    }, /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$ChevronDownTrimmedIcon), {
-        className: styles.accordionHeaderIcon,
-        variant: "secondary"
-    }), children));
-};
-
-
-
-
-
-
-const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
-    return {
-        accordionPanelContent: /*#__PURE__*/ (0, $jACei$css)({
-            width: "100%",
-            padding: `${(0, $jACei$contentfulf36tokens).spacingXs} ${(0, $jACei$contentfulf36tokens).spacingM} ${(0, $jACei$contentfulf36tokens).spacingM}`
-        })
-    };
-};
-
-
-const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = "cf-ui-accordion-panel" , ...otherProps })=>{
-    const styles = (0, $3ba27b87c168e14d$export$2db50514b4b2c1ee)();
-    return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Collapse), {
-        "data-test-id": testId,
-        "aria-labelledby": `accordion--${ariaId}`,
-        isExpanded: isExpanded,
-        ...otherProps
-    }, /*#__PURE__*/ (0, $jACei$react).createElement("div", {
-        className: styles.accordionPanelContent
-    }, children));
-};
-
-
-
-
-
-const $10647792993fae18$export$c4864364a487dfa = ({ className: className  })=>({
-        accordionItem: (0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
-            padding: "0",
-            margin: "0",
-            borderBottom: `1px solid ${(0, $jACei$contentfulf36tokens).colorElementMid}`,
-            "&:first-child": {
-                borderTop: `1px solid ${(0, $jACei$contentfulf36tokens).colorElementMid}`
-            }
-        }), className)
-    });
-
-
-const $b6120c67649da348$var$_AccordionItem = ({ title: title = "Accordion Title" , titleElement: titleElement = "h2" , testId: testId = "cf-ui-accordion-item" , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = "end" , className: className , isExpanded: isExpanded , ...otherProps }, ref)=>{
-    const styles = (0, $10647792993fae18$export$c4864364a487dfa)({
-        className: className
-    });
-    const id = (0, $jACei$useId)();
-    const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose  } = (0, $jACei$useControllableState)({
-        isOpen: isExpanded,
-        onOpen: onExpand,
-        onClose: onCollapse
-    });
-    const handleOnClick = ()=>{
-        if (isOpen) handleClose();
-        else handleOpen();
-    };
-    return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Box), {
-        as: "li",
-        className: styles.accordionItem,
-        testId: `${testId}-${id}`,
-        ...otherProps,
-        ref: ref
-    }, /*#__PURE__*/ (0, $jACei$react).createElement((0, $01f1d19e673d71a7$export$5e3e5deaaf81ee41), {
-        onClick: handleOnClick,
-        isExpanded: isOpen,
-        element: titleElement,
-        ariaId: id,
-        align: align
-    }, title), /*#__PURE__*/ (0, $jACei$react).createElement((0, $0c5bba33d6cffbcc$export$7cad6f17fd6e117b), {
-        ariaId: id,
-        isExpanded: isOpen
-    }, children));
-};
-const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ (0, $jACei$react).forwardRef($b6120c67649da348$var$_AccordionItem);
-
-
-const $9e55ae7143081c67$export$a766cd26d0d69044 = (0, $a517c4a963657a24$export$a766cd26d0d69044);
-$9e55ae7143081c67$export$a766cd26d0d69044.Item = (0, $b6120c67649da348$export$d99097c13d4dac9f);
-
-
-
-
-
-
-
-export {$9e55ae7143081c67$export$a766cd26d0d69044 as Accordion, $01f1d19e673d71a7$export$5e3e5deaaf81ee41 as AccordionHeader, $b6120c67649da348$export$d99097c13d4dac9f as AccordionItem, $0c5bba33d6cffbcc$export$7cad6f17fd6e117b as AccordionPanel};
-//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n  Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   * @default end\n   */\n  align?: 'start' | 'end';\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n}\n\nconst _Accordion = (\n  {\n    align = 'end',\n    children,\n    className,\n    testId = 'cf-ui-accordion',\n    ...otherProps\n  }: ExpandProps<AccordionProps>,\n  ref: React.Ref<HTMLUListElement>,\n) => {\n  const styles = getAccordionStyles({ className });\n  return (\n    <Box\n      as=\"ul\"\n      className={styles.accordion}\n      testId={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            align,\n          });\n        }\n        return child;\n      })}\n    </Box>\n  );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n  accordion: cx(\n    css({\n      boxSizing: 'border-box',\n      padding: '0',\n      margin: '0',\n      listStyle: 'none',\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.gray300}`,\n      },\n    }),\n    className,\n  ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n  /**\n   * The accordion title\n   */\n  title?: React.ReactNode;\n  /**\n   * The heading element that will be used by the AccordionHeader\n   */\n  titleElement?: HeadingElement;\n  /**\n   * The children of the AccordionItem are in fact the content of the accordion\n   */\n  children?: React.ReactNode;\n  /**\n   * A function to be called when the accordion item is opened\n   */\n  onExpand?: () => void;\n  /**\n   * A function to be called when the accordion item is closed\n   */\n  onCollapse?: () => void;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n\n  /**\n   * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n   * But you can make it controlled by providing boolean\n   */\n  isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n  {\n    title = 'Accordion Title',\n    titleElement = 'h2',\n    testId = 'cf-ui-accordion-item',\n    onExpand,\n    onCollapse,\n    children,\n    align = 'end',\n    className,\n    isExpanded,\n    ...otherProps\n  }: ExpandProps<AccordionItemProps>,\n  ref: React.Ref<HTMLLIElement>,\n) => {\n  const styles = getAccordionItemStyles({ className });\n  const id = useId();\n  const { isOpen, handleOpen, handleClose } = useControllableState({\n    isOpen: isExpanded,\n    onOpen: onExpand,\n    onClose: onCollapse,\n  });\n\n  const handleOnClick = () => {\n    if (isOpen) {\n      handleClose();\n    } else {\n      handleOpen();\n    }\n  };\n\n  return (\n    <Box\n      as=\"li\"\n      className={styles.accordionItem}\n      testId={`${testId}-${id}`}\n      {...otherProps}\n      ref={ref}\n    >\n      <AccordionHeader\n        onClick={handleOnClick}\n        isExpanded={isOpen}\n        element={titleElement}\n        ariaId={id}\n        align={align}\n      >\n        {title}\n      </AccordionHeader>\n\n      <AccordionPanel ariaId={id} isExpanded={isOpen}>\n        {children}\n      </AccordionPanel>\n    </Box>\n  );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * The function that will be called once the user clicks on the accordion title\n   */\n  onClick: VoidFunction;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n  /**\n   * The heading element that will be used by the Subheading component\n   */\n  element?: HeadingElement;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n  children,\n  onClick,\n  isExpanded = false,\n  ariaId,\n  element = 'h2',\n  align = 'end',\n  testId = 'cf-ui-accordion-header',\n  ...rest\n}: AccordionHeaderProps) => {\n  const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n  return (\n    <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n      <button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-controls={`accordion-panel--${ariaId}`}\n        id={`accordion--${ariaId}`}\n        className={styles.accordionHeader}\n        onClick={onClick}\n      >\n        <ChevronDownTrimmedIcon\n          className={styles.accordionHeaderIcon}\n          variant=\"secondary\"\n        />\n        {children}\n      </button>\n    </Subheading>\n  );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n  align: 'start' | 'end';\n  isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n  cx(\n    css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      border: '0',\n      padding: tokens.spacingM,\n      backgroundColor: 'transparent',\n      fontFamily: tokens.fontStackPrimary,\n      fontSize: tokens.fontSizeL,\n      fontWeight: tokens.fontWeightDemiBold,\n      lineHeight: tokens.lineHeightL,\n      color: tokens.gray800,\n      width: '100%',\n      minWidth: '9px',\n      cursor: 'pointer',\n      transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n        box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n      },\n      '&:focus': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n        outline: 'none',\n      },\n      '&:focus:not(:focus-visible)': {\n        backgroundColor: 'transparent',\n        borderRadius: 'unset',\n        boxShadow: 'unset',\n      },\n      '&:focus-visible': {\n        backgroundColor: tokens.gray100,\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.glowPrimary,\n      },\n    }),\n    align === 'end' &&\n      css({\n        flexDirection: 'row-reverse',\n        justifyContent: 'space-between',\n      }),\n  );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n  cx(\n    css({\n      transform: 'rotate(0deg)',\n      transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n    }),\n    align === 'end' && css({ marginLeft: tokens.spacingM }),\n    align === 'start' && css({ marginRight: tokens.spacingM }),\n    isExpanded &&\n      css({\n        transform: 'rotate(180deg)',\n      }),\n  );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n  accordionHeader: getHeaderStyles(props),\n  accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n  children,\n  isExpanded = false,\n  ariaId,\n  testId = 'cf-ui-accordion-panel',\n  ...otherProps\n}: AccordionPanelProps) => {\n  const styles = getAccordionPanelStyles();\n\n  return (\n    <Collapse\n      data-test-id={testId}\n      aria-labelledby={`accordion--${ariaId}`}\n      isExpanded={isExpanded}\n      {...otherProps}\n    >\n      <div className={styles.accordionPanelContent}>{children}</div>\n    </Collapse>\n  );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n  return {\n    accordionPanelContent: css({\n      width: '100%',\n      padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n    }),\n  };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n  className,\n}: {\n  className?: string;\n}) => ({\n  accordionItem: cx(\n    css({\n      padding: '0',\n      margin: '0',\n      borderBottom: `1px solid ${tokens.colorElementMid}`,\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.colorElementMid}`,\n      },\n    }),\n    className,\n  ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":";;;ACMA,+BAAgC,SAAQ,WAAW;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAiCD,QAAO,MAAM,oGAAwC,CAAC;AEzCtD,qCAAsC,SAAQ,WAAW;IACvD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,OAAO,MAAM,8FASV,oBAAoB,gBAqBtB,CAAC;AE3DF,oCAAqC,SAAQ,WAAW;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,MAAM,gBAAgB,GAAG,YAAY,mBAAmB,CAAC,CAmB/D,CAAC;AE9BF,mCAAoC,SAAQ,WAAW;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA0DD,OAAO,MAAM,uGAAgD,CAAC;AChG9D,yBAAyB,kBAAwB,GAAG;IAClD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,OAAO,MAAM,4BAAkD,CAAC","sources":["packages/components/accordion/src/src/Accordion.styles.ts","packages/components/accordion/src/src/Accordion.tsx","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/src/AccordionItem/AccordionItem.styles.ts","packages/components/accordion/src/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/src/CompoundAccordion.tsx","packages/components/accordion/src/src/index.ts","packages/components/accordion/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n"],"names":[],"version":3,"file":"types.d.ts.map"}