@cleartrip/ct-design-accordion 4.0.0 → 5.0.0

package/README.md

@@ -0,0 +1,79 @@
+# Accordion
+
+A collapsible content container that allows users to expand and collapse sections.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-accordion
+# or
+pnpm add @cleartrip/ct-design-accordion
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { Accordion } from '@cleartrip/ct-design-accordion';
+
+function Example() {
+  return (
+    <Accordion>
+      {/* Basic usage */}
+    </Accordion>
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `disabled` | `boolean` | `false` | No | Disables interaction with the accordion. |
+| `expanded` | `boolean` | `false` | No | Whether the accordion is currently expanded. |
+| `label` | `ReactNode` | — | ✅ Yes | The accordion header/label content (always visible). |
+| `onClick` | `() => void` | — | No | Click handler fired when the label row is tapped. On web it receives the |
+| `children` | `ReactNode` | — | ✅ Yes | Collapsible content that is revealed when `expanded` is true. |
+| `expandIcon` | `ReactNode` | — | No | Optional indicative icon rendered next to the label; rotated 180° when |
+| `styleConfig` | `IAccordionStyleConfig` | — | No | Style configuration overrides for each internal container. |
+| `isWrappedInAccordionGroup` | `boolean` | `false` | No | Internal flag used by AccordionGroup — should not be set by consumers. |
+| `onAccordionGroupClick` | `() => void` | — | No | Internal callback used by AccordionGroup when an item is toggled — should |
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { Accordion } from 'yagami/core/components';
++ import { Accordion } from '@cleartrip/ct-design-accordion';
+```

package/dist/Accordion.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { AccordionProps } from './type';
-declare const Accordion: React.FC<AccordionProps>;
+import { ContainerRef } from '@cleartrip/ct-design-container';
+import type { IAccordionProps } from './type';
+declare const Accordion: import("react").ForwardRefExoticComponent<IAccordionProps & import("react").RefAttributes<ContainerRef>>;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../packages/components/Accordion/src/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGxC,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../packages/components/Accordion/src/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAIzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAI9C,QAAA,MAAM,SAAS,0GAmFd,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/dist/Accordion.native.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ContainerRef } from '@cleartrip/ct-design-container';
+import type { IAccordionProps } from './type';
+declare const AccordionV2: React.ForwardRefExoticComponent<IAccordionProps & React.RefAttributes<ContainerRef>>;
+export default AccordionV2;
+//# sourceMappingURL=Accordion.native.d.ts.map

package/dist/Accordion.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.native.d.ts","sourceRoot":"","sources":["../packages/components/Accordion/src/Accordion.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAa,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAM9C,QAAA,MAAM,WAAW,sFA0FhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/dist/ct-design-accordion.browser.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var s=require("tslib"),e=require("react/jsx-runtime"),i=require("react"),n=require("@cleartrip/ct-design-icons"),r=require("@cleartrip/ct-design-container"),o=require("@cleartrip/ct-design-transition"),t=require("@cleartrip/ct-design-typography"),a=require("styled-components"),l=require("classnames");function d(s){return s&&s.__esModule?s:{default:s}}var c=d(i),u=d(a),g=d(l),h=u.default.div((function(e){var i=e.theme,n=e.showBorders,r=e.css,o=void 0===r?{}:r;return s.__assign(s.__assign({},function(e){var i=e.theme,n=e.showBorders?{borderColor:i.color.border.default,borderWidth:i.border.width.sm,borderStyle:i.border.style.solid}:{};return s.__assign(s.__assign({},n),{paddingLeft:i.spacing[6],paddingRight:i.spacing[6],paddingTop:i.spacing[6],paddingBottom:i.spacing[6],backgroundColor:i.color.background.neutral,display:"flex ",flexDirection:"column",boxSizing:"border-box",width:"100%"})}({theme:i,showBorders:n})),o)})),v=u.default.div((function(e){var i=e.theme,n=e.height,r=e.css;return s.__assign(s.__assign({},function(s){var e=s.theme,i=s.height;return{paddingTop:e.spacing[4],height:"auto",transition:"".concat(i," 2s ease-in-out"),overflow:"hidden"}}({theme:i,height:n})),r)})),_=u.default.div((function(e){var i=e.transform,n=e.css,r=void 0===n?{}:n;return s.__assign(s.__assign({},function(s){return{display:"flex",height:"100%",marginLeft:"auto",transition:"transform 0.2s ease-in-out",transform:s.transform,cursor:"pointer"}}({transform:i})),r)}));exports.Accordion=function(i){var a=i.children,l=void 0===a?null:a,d=i.isOpen,u=void 0!==d&&d,f=i.title,p=void 0===f?"":f,m=i.onClick,x=void 0===m?function(){}:m,b=i.showBorders,y=void 0===b||b,C=i.titleVariant,w=void 0===C?"L1":C,N=i.subtitle,j=void 0===N?"":N,q=i.disableTransition,B=void 0!==q&&q,T=i.styleConfig,k=void 0===T?{}:T,D=function(s){return s.isOpen?{transform:"rotate(-180deg)"}:{transform:"rotate(0deg)"}}({isOpen:u}),L=k.root,O=k.headerContainer,S=k.titleContainer,V=k.title,z=k.subTitle,A=k.arrow,E=k.childrenContainer,G=k.childrenContentContainer,I=k.arrowIcon;return e.jsxs(h,s.__assign({showBorders:y,className:null==L?void 0:L.className,css:null==L?void 0:L.css},{children:[e.jsxs(r.Container,s.__assign({className:null==O?void 0:O.className,css:null==O?void 0:O.css,display:"flex",flexDirection:"row",onClick:x},{children:[e.jsxs(r.Container,s.__assign({className:g.default("flex flex-column",null==S?void 0:S.className),rowGap:"4px",css:null==S?void 0:S.css},{children:[e.jsx(t.Typography,s.__assign({variant:w,styleConfig:V},{children:p})),j&&!u&&e.jsx(t.Typography,s.__assign({variant:"B2",color:"subheading",styleConfig:z},{children:j}))]})),e.jsx(_,s.__assign({},D,{className:null==A?void 0:A.className,css:null==A?void 0:A.css},{children:e.jsx(n.ChevronDown,s.__assign({},I))}))]})),e.jsx(r.Container,s.__assign({className:null==E?void 0:E.className,css:null==E?void 0:E.css},{children:u&&e.jsx(v,s.__assign({height:u?"auto":"0px",className:null==G?void 0:G.className,css:null==G?void 0:G.css},{children:!B&&c.default.isValidElement(l)?e.jsx(o.Transition,s.__assign({type:"slide",in:u,timeout:{appear:200,enter:200,exit:200}},{children:l})):l}))}))]}))};
+"use strict";var e=require("react/jsx-runtime"),n=require("react"),o=require("@cleartrip/ct-design-container"),t=require("@cleartrip/ct-design-use-isomorphic-effect"),r=require("@cleartrip/ct-design-style-manager"),i=require("@emotion/css");function c(e){return e&&e.__esModule?e:{default:e}}var a=c(t);const s=r.makeStyles(e=>({root:{},labelRow:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between"},iconContainer:{display:"flex",justifyContent:"center",alignItems:"center",marginLeft:e.spacing[4]},animatedAccordionRoot:{overflow:"hidden"},accordionContentRoot:{overflow:"hidden"}})),l={iconTransition:i.css({transition:"transform 0.3s"}),contentTransition:i.css({transition:"max-height 0.3s ease-in-out"})},d=n.forwardRef(({expanded:t=!1,label:i,onClick:c,children:d,expandIcon:u,disabled:f=!1,styleConfig:g,isWrappedInAccordionGroup:m=!1,onAccordionGroupClick:C},h)=>{const{childrenContainer:p=[],icon:x=[],label:y=[],root:b=[]}=g||{},[v,R]=n.useState(t),w=n.useRef(null);a.default(()=>{R(t)},[t]);const j=r.useStyles(()=>{var e,n;const o=null!==(n=null===(e=w.current)||void 0===e?void 0:e.scrollHeight)&&void 0!==n?n:0;return{labelRow:{},iconTransform:{transform:v?"rotate(180deg)":"rotate(0deg)"},contentMaxHeight:{maxHeight:v?o:0}}},[v,f]),T=r.useWebMergeStyles([s.iconContainer,l.iconTransition,j.iconTransform,...x],[s.iconContainer,j.iconTransform,x]),q=r.useWebMergeStyles([s.accordionContentRoot,l.contentTransition,j.contentMaxHeight,...p],[s.accordionContentRoot,j.contentMaxHeight,p]);return e.jsxs(o.Container,{styleConfig:{root:b},children:[e.jsxs(o.Container,{ref:h,onClick:()=>{f||(m?null==C||C():R(e=>!e),null==c||c())},styleConfig:{root:[s.labelRow,j.labelRow,...y]},children:[i,u&&e.jsx("div",{className:T,children:u})]}),e.jsx("div",{ref:w,className:q,children:d})]})});d.displayName="Accordion",exports.Accordion=d;
 //# sourceMappingURL=ct-design-accordion.browser.cjs.js.map

package/dist/ct-design-accordion.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-accordion.browser.cjs.js","sources":["../packages/components/Accordion/src/StyledAccordion/StyledAccordion.tsx","../packages/components/Accordion/src/StyledAccordion/style.ts","../packages/components/Accordion/src/Accordion.tsx","../packages/components/Accordion/src/style.ts"],"sourcesContent":[null,null,null,null],"names":["StyledAccordionWrapper","styled","default","div","_a","theme","showBorders","_b","css","__assign","borderStyles","borderColor","color","border","borderWidth","width","sm","borderStyle","style","solid","paddingLeft","spacing","paddingRight","paddingTop","paddingBottom","backgroundColor","background","neutral","display","flexDirection","boxSizing","getStyledAccordionStyles","StyledAccordionContent","height","transition","concat","overflow","getStyledAccordionContentStyles","StyledAccordionArrow","transform","marginLeft","cursor","getStyledAccordionArrowStyles","children","_c","isOpen","_d","title","_e","onClick","_f","_g","titleVariant","_h","subtitle","_j","disableTransition","_k","styleConfig","accordionArrowStyles","getAccordionArrowStyles","root","headerContainer","titleContainer","titleProp","subTitleProp","subTitle","arrow","childrenContainer","childrenContentContainer","arrowIcon","_jsxs","className","jsxs","Container","classNames","rowGap","_jsx","jsx","Typography","variant","ChevronDown","React","isValidElement","Transition","type","in","timeout","appear","enter","exit"],"mappings":"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"}
+{"version":3,"file":"ct-design-accordion.browser.cjs.js","sources":["../packages/components/Accordion/src/style.ts","../packages/components/Accordion/src/webStyle.ts","../packages/components/Accordion/src/Accordion.tsx"],"sourcesContent":[null,null,null],"names":["accordionStaticStyles","makeStyles","theme","root","labelRow","display","flexDirection","alignItems","justifyContent","iconContainer","marginLeft","spacing","animatedAccordionRoot","overflow","accordionContentRoot","webStaticStyles","iconTransition","css","transition","contentTransition","Accordion","forwardRef","expanded","label","onClick","children","expandIcon","disabled","styleConfig","isWrappedInAccordionGroup","onAccordionGroupClick","forwardedRef","childrenContainer","icon","labelStyle","isExpanded","setIsExpanded","useState","accordionContentRef","useRef","useIsomorphicEffect","dynamicStyles","useStyles","contentScrollHeight","_b","_a","current","scrollHeight","iconTransform","transform","contentMaxHeight","maxHeight","mergedIconClassName","useWebMergeStyles","staticStyles","mergedContentClassName","_jsxs","Container","ref","previouslyExpanded","_jsx","className","displayName"],"mappings":"+SAQA,MAAMA,EAAwBC,EAAAA,WAAYC,IAAW,CACnDC,KAAM,CAEL,EACDC,SAAU,CACRC,QAAS,OACTC,cAAe,MACfC,WAAY,SACZC,eAAgB,iBAElBC,cAAe,CACbJ,QAAS,OACTG,eAAgB,SAChBD,WAAY,SACZG,WAAYR,EAAMS,QAAQ,IAE5BC,sBAAuB,CACrBC,SAAU,UAEZC,qBAAsB,CACpBD,SAAU,aCjBRE,EAAkB,CACtBC,eAAgBC,EAAAA,IAAI,CAClBC,WAAY,mBAEdC,kBAAmBF,EAAAA,IAAI,CACrBC,WAAY,iCCNVE,EAAYC,EAAUA,WAC1B,EAEIC,YAAW,EACXC,QACAC,UACAC,WACAC,aACAC,YAAW,EACXC,cACAC,6BAA4B,EAC5BC,yBAEFC,KAEA,MAAMC,kBAAEA,EAAoB,GAAEC,KAAEA,EAAO,GAAIV,MAAOW,EAAa,GAAE/B,KAAEA,EAAO,IAAOyB,GAAe,CAAA,GAEzFO,EAAYC,GAAiBC,EAAQA,SAAUf,GAChDgB,EAAsBC,SAAuB,MAEnDC,EAAAA,QAAoB,KAClBJ,EAAcd,IACb,CAACA,IAEJ,MAaMmB,EAAgBC,EAAAA,UAAU,aAC9B,MAAMC,EAAmE,QAA7CC,EAA6B,QAA7BC,EAAAP,EAAoBQ,eAAS,IAAAD,OAAA,EAAAA,EAAAE,oBAAgB,IAAAH,EAAAA,EAAA,EACzE,MAAO,CACLxC,SAAU,CAET,EACD4C,cAAe,CACbC,UAAWd,EAAa,iBAAmB,gBAE7Ce,iBAAkB,CAChBC,UAAWhB,EAAaQ,EAAsB,KAGjD,CAACR,EAAYR,IAEVyB,EAAsBC,EAAAA,kBAC1B,CAACC,EAAa7C,cAAeM,EAAgBC,eAAgByB,EAAcO,iBAAkBf,GAC7F,CAACqB,EAAa7C,cAAegC,EAAcO,cAAef,IAGtDsB,EAAyBF,EAAAA,kBAC7B,CACEC,EAAaxC,qBACbC,EAAgBI,kBAChBsB,EAAcS,oBACXlB,GAEL,CAACsB,EAAaxC,qBAAsB2B,EAAcS,iBAAkBlB,IAGtE,OACEwB,OAACC,EAAAA,UAAS,CAAC7B,YAAa,CAAEzB,QAAMsB,SAAA,CAC9B+B,EAAAA,KAACC,EAASA,WACRC,IAAK3B,EACLP,QA/CmB,KACnBG,IAEAE,EACFC,SAAAA,IAEAM,EAAeuB,IAAwBA,GAEzCnC,SAAAA,MAwCII,YAAa,CAAEzB,KAAM,CAACmD,EAAalD,SAAUqC,EAAcrC,YAAa8B,IAEvET,SAAA,CAAAF,EACAG,GAAckC,EAAAA,IAAA,MAAA,CAAKC,UAAWT,EAAsB3B,SAAAC,OAEvDkC,EAAAA,IAAA,MAAA,CAAKF,IAAKpB,EAAqBuB,UAAWN,EACvC9B,SAAAA,SAOXL,EAAU0C,YAAc"}

package/dist/ct-design-accordion.browser.esm.js

@@ -1,2 +1,2 @@
-import{__assign as r}from"tslib";import{jsxs as i,jsx as o}from"react/jsx-runtime";import e from"react";import{ChevronDown as n}from"@cleartrip/ct-design-icons";import{Container as t}from"@cleartrip/ct-design-container";import{Transition as s}from"@cleartrip/ct-design-transition";import{Typography as a}from"@cleartrip/ct-design-typography";import l from"styled-components";import d from"classnames";var c=l.div((function(i){var o=i.theme,e=i.showBorders,n=i.css,t=void 0===n?{}:n;return r(r({},function(i){var o=i.theme,e=i.showBorders?{borderColor:o.color.border.default,borderWidth:o.border.width.sm,borderStyle:o.border.style.solid}:{};return r(r({},e),{paddingLeft:o.spacing[6],paddingRight:o.spacing[6],paddingTop:o.spacing[6],paddingBottom:o.spacing[6],backgroundColor:o.color.background.neutral,display:"flex ",flexDirection:"column",boxSizing:"border-box",width:"100%"})}({theme:o,showBorders:e})),t)})),m=l.div((function(i){var o=i.theme,e=i.height,n=i.css;return r(r({},function(r){var i=r.theme,o=r.height;return{paddingTop:i.spacing[4],height:"auto",transition:"".concat(o," 2s ease-in-out"),overflow:"hidden"}}({theme:o,height:e})),n)})),u=l.div((function(i){var o=i.transform,e=i.css,n=void 0===e?{}:e;return r(r({},function(r){return{display:"flex",height:"100%",marginLeft:"auto",transition:"transform 0.2s ease-in-out",transform:r.transform,cursor:"pointer"}}({transform:o})),n)})),h=function(l){var h=l.children,p=void 0===h?null:h,f=l.isOpen,v=void 0!==f&&f,g=l.title,b=void 0===g?"":g,x=l.onClick,w=void 0===x?function(){}:x,y=l.showBorders,C=void 0===y||y,N=l.titleVariant,B=void 0===N?"L1":N,k=l.subtitle,T=void 0===k?"":k,L=l.disableTransition,O=void 0!==L&&L,D=l.styleConfig,S=void 0===D?{}:D,V=function(r){return r.isOpen?{transform:"rotate(-180deg)"}:{transform:"rotate(0deg)"}}({isOpen:v}),j=S.root,z=S.headerContainer,E=S.titleContainer,G=S.title,I=S.subTitle,R=S.arrow,W=S.childrenContainer,q=S.childrenContentContainer,A=S.arrowIcon;return i(c,r({showBorders:C,className:null==j?void 0:j.className,css:null==j?void 0:j.css},{children:[i(t,r({className:null==z?void 0:z.className,css:null==z?void 0:z.css,display:"flex",flexDirection:"row",onClick:w},{children:[i(t,r({className:d("flex flex-column",null==E?void 0:E.className),rowGap:"4px",css:null==E?void 0:E.css},{children:[o(a,r({variant:B,styleConfig:G},{children:b})),T&&!v&&o(a,r({variant:"B2",color:"subheading",styleConfig:I},{children:T}))]})),o(u,r({},V,{className:null==R?void 0:R.className,css:null==R?void 0:R.css},{children:o(n,r({},A))}))]})),o(t,r({className:null==W?void 0:W.className,css:null==W?void 0:W.css},{children:v&&o(m,r({height:v?"auto":"0px",className:null==q?void 0:q.className,css:null==q?void 0:q.css},{children:!O&&e.isValidElement(p)?o(s,r({type:"slide",in:v,timeout:{appear:200,enter:200,exit:200}},{children:p})):p}))}))]}))};export{h as Accordion};
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{forwardRef as t,useState as e,useRef as i}from"react";import{Container as r}from"@cleartrip/ct-design-container";import c from"@cleartrip/ct-design-use-isomorphic-effect";import{makeStyles as a,useStyles as l,useWebMergeStyles as s}from"@cleartrip/ct-design-style-manager";import{css as d}from"@emotion/css";const m=a(o=>({root:{},labelRow:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between"},iconContainer:{display:"flex",justifyContent:"center",alignItems:"center",marginLeft:o.spacing[4]},animatedAccordionRoot:{overflow:"hidden"},accordionContentRoot:{overflow:"hidden"}})),f={iconTransition:d({transition:"transform 0.3s"}),contentTransition:d({transition:"max-height 0.3s ease-in-out"})},p=t(({expanded:t=!1,label:a,onClick:d,children:p,expandIcon:g,disabled:h=!1,styleConfig:u,isWrappedInAccordionGroup:C=!1,onAccordionGroupClick:x},y)=>{const{childrenContainer:b=[],icon:v=[],label:w=[],root:R=[]}=u||{},[T,H]=e(t),A=i(null);c(()=>{H(t)},[t]);const I=l(()=>{var o,n;const t=null!==(n=null===(o=A.current)||void 0===o?void 0:o.scrollHeight)&&void 0!==n?n:0;return{labelRow:{},iconTransform:{transform:T?"rotate(180deg)":"rotate(0deg)"},contentMaxHeight:{maxHeight:T?t:0}}},[T,h]),j=s([m.iconContainer,f.iconTransition,I.iconTransform,...v],[m.iconContainer,I.iconTransform,v]),k=s([m.accordionContentRoot,f.contentTransition,I.contentMaxHeight,...b],[m.accordionContentRoot,I.contentMaxHeight,b]);return o(r,{styleConfig:{root:R},children:[o(r,{ref:y,onClick:()=>{h||(C?null==x||x():H(o=>!o),null==d||d())},styleConfig:{root:[m.labelRow,I.labelRow,...w]},children:[a,g&&n("div",{className:j,children:g})]}),n("div",{ref:A,className:k,children:p})]})});p.displayName="Accordion";export{p as Accordion};
 //# sourceMappingURL=ct-design-accordion.browser.esm.js.map

package/dist/ct-design-accordion.browser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-accordion.browser.esm.js","sources":["../packages/components/Accordion/src/style.ts","../packages/components/Accordion/src/StyledAccordion/StyledAccordion.tsx","../packages/components/Accordion/src/StyledAccordion/style.ts","../packages/components/Accordion/src/Accordion.tsx"],"sourcesContent":[null,null,null,null],"names":["StyledAccordionWrapper","styled","div","_a","theme","showBorders","_b","css","__assign","borderStyles","borderColor","color","border","default","borderWidth","width","sm","borderStyle","style","solid","paddingLeft","spacing","paddingRight","paddingTop","paddingBottom","backgroundColor","background","neutral","display","flexDirection","boxSizing","getStyledAccordionStyles","StyledAccordionContent","height","transition","concat","overflow","getStyledAccordionContentStyles","StyledAccordionArrow","transform","marginLeft","cursor","getStyledAccordionArrowStyles","Accordion","children","_c","isOpen","_d","title","_e","onClick","_f","_g","titleVariant","_h","subtitle","_j","disableTransition","_k","styleConfig","accordionArrowStyles","getAccordionArrowStyles","root","headerContainer","titleContainer","titleProp","subTitleProp","subTitle","arrow","childrenContainer","childrenContentContainer","arrowIcon","_jsxs","className","Container","classNames","rowGap","_jsx","Typography","variant","ChevronDown","React","isValidElement","Transition","type","in","timeout","appear","enter","exit"],"mappings":"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"}
+{"version":3,"file":"ct-design-accordion.browser.esm.js","sources":["../packages/components/Accordion/src/style.ts","../packages/components/Accordion/src/webStyle.ts","../packages/components/Accordion/src/Accordion.tsx"],"sourcesContent":[null,null,null],"names":["accordionStaticStyles","makeStyles","theme","root","labelRow","display","flexDirection","alignItems","justifyContent","iconContainer","marginLeft","spacing","animatedAccordionRoot","overflow","accordionContentRoot","webStaticStyles","iconTransition","css","transition","contentTransition","Accordion","forwardRef","expanded","label","onClick","children","expandIcon","disabled","styleConfig","isWrappedInAccordionGroup","onAccordionGroupClick","forwardedRef","childrenContainer","icon","labelStyle","isExpanded","setIsExpanded","useState","accordionContentRef","useRef","useIsomorphicEffect","dynamicStyles","useStyles","contentScrollHeight","_b","_a","current","scrollHeight","iconTransform","transform","contentMaxHeight","maxHeight","mergedIconClassName","useWebMergeStyles","staticStyles","mergedContentClassName","_jsxs","Container","ref","previouslyExpanded","_jsx","className","displayName"],"mappings":"6WAQA,MAAMA,EAAwBC,EAAYC,IAAW,CACnDC,KAAM,CAEL,EACDC,SAAU,CACRC,QAAS,OACTC,cAAe,MACfC,WAAY,SACZC,eAAgB,iBAElBC,cAAe,CACbJ,QAAS,OACTG,eAAgB,SAChBD,WAAY,SACZG,WAAYR,EAAMS,QAAQ,IAE5BC,sBAAuB,CACrBC,SAAU,UAEZC,qBAAsB,CACpBD,SAAU,aCjBRE,EAAkB,CACtBC,eAAgBC,EAAI,CAClBC,WAAY,mBAEdC,kBAAmBF,EAAI,CACrBC,WAAY,iCCNVE,EAAYC,EAChB,EAEIC,YAAW,EACXC,QACAC,UACAC,WACAC,aACAC,YAAW,EACXC,cACAC,6BAA4B,EAC5BC,yBAEFC,KAEA,MAAMC,kBAAEA,EAAoB,GAAEC,KAAEA,EAAO,GAAIV,MAAOW,EAAa,GAAE/B,KAAEA,EAAO,IAAOyB,GAAe,CAAA,GAEzFO,EAAYC,GAAiBC,EAAkBf,GAChDgB,EAAsBC,EAAuB,MAEnDC,EAAoB,KAClBJ,EAAcd,IACb,CAACA,IAEJ,MAaMmB,EAAgBC,EAAU,aAC9B,MAAMC,EAAmE,QAA7CC,EAA6B,QAA7BC,EAAAP,EAAoBQ,eAAS,IAAAD,OAAA,EAAAA,EAAAE,oBAAgB,IAAAH,EAAAA,EAAA,EACzE,MAAO,CACLxC,SAAU,CAET,EACD4C,cAAe,CACbC,UAAWd,EAAa,iBAAmB,gBAE7Ce,iBAAkB,CAChBC,UAAWhB,EAAaQ,EAAsB,KAGjD,CAACR,EAAYR,IAEVyB,EAAsBC,EAC1B,CAACC,EAAa7C,cAAeM,EAAgBC,eAAgByB,EAAcO,iBAAkBf,GAC7F,CAACqB,EAAa7C,cAAegC,EAAcO,cAAef,IAGtDsB,EAAyBF,EAC7B,CACEC,EAAaxC,qBACbC,EAAgBI,kBAChBsB,EAAcS,oBACXlB,GAEL,CAACsB,EAAaxC,qBAAsB2B,EAAcS,iBAAkBlB,IAGtE,OACEwB,EAACC,EAAS,CAAC7B,YAAa,CAAEzB,QAAMsB,SAAA,CAC9B+B,EAACC,GACCC,IAAK3B,EACLP,QA/CmB,KACnBG,IAEAE,EACFC,SAAAA,IAEAM,EAAeuB,IAAwBA,GAEzCnC,SAAAA,MAwCII,YAAa,CAAEzB,KAAM,CAACmD,EAAalD,SAAUqC,EAAcrC,YAAa8B,IAEvET,SAAA,CAAAF,EACAG,GAAckC,EAAA,MAAA,CAAKC,UAAWT,EAAsB3B,SAAAC,OAEvDkC,EAAA,MAAA,CAAKF,IAAKpB,EAAqBuB,UAAWN,EACvC9B,SAAAA,SAOXL,EAAU0C,YAAc"}

package/dist/ct-design-accordion.cjs.js

@@ -1,92 +1,88 @@
 'use strict';
 
-var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ctDesignIcons = require('@cleartrip/ct-design-icons');
+var react = require('react');
 var ctDesignContainer = require('@cleartrip/ct-design-container');
-var ctDesignTransition = require('@cleartrip/ct-design-transition');
-var ctDesignTypography = require('@cleartrip/ct-design-typography');
-var styled = require('styled-components');
-var classNames = require('classnames');
+var useIsomorphicEffect = require('@cleartrip/ct-design-use-isomorphic-effect');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+var css = require('@emotion/css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var useIsomorphicEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicEffect);
 
-var getAccordionArrowStyles = function (_a) {
-    var isOpen = _a.isOpen;
-    if (isOpen)
-        return {
-            transform: 'rotate(-180deg)',
-        };
-    return {
-        transform: 'rotate(0deg)',
-    };
+const accordionStaticStyles = ctDesignStyleManager.makeStyles((theme) => ({
+    root: {},
+    labelRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    iconContainer: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: theme.spacing[4],
+    },
+    animatedAccordionRoot: {
+        overflow: 'hidden',
+    },
+    accordionContentRoot: {
+        overflow: 'hidden',
+    },
+}));
+
+const webStaticStyles = {
+    iconTransition: css.css({
+        transition: 'transform 0.3s',
+    }),
+    contentTransition: css.css({
+        transition: 'max-height 0.3s ease-in-out',
+    }),
 };
 
-var getStyledAccordionStyles = function (_a) {
-    var theme = _a.theme, showBorders = _a.showBorders;
-    var borderStyles = showBorders
-        ? {
-            borderColor: theme.color.border.default,
-            borderWidth: theme.border.width.sm,
-            borderStyle: theme.border.style.solid,
+const Accordion = react.forwardRef(({ expanded = false, label, onClick, children, expandIcon, disabled = false, styleConfig, isWrappedInAccordionGroup = false, onAccordionGroupClick, }, forwardedRef) => {
+    const { childrenContainer = [], icon = [], label: labelStyle = [], root = [] } = styleConfig || {};
+    const [isExpanded, setIsExpanded] = react.useState(expanded);
+    const accordionContentRef = react.useRef(null);
+    useIsomorphicEffect__default.default(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    const onAccordionClick = () => {
+        if (disabled)
+            return;
+        if (isWrappedInAccordionGroup) {
+            onAccordionGroupClick === null || onAccordionGroupClick === void 0 ? void 0 : onAccordionGroupClick();
         }
-        : {};
-    return tslib.__assign(tslib.__assign({}, borderStyles), { paddingLeft: theme.spacing[6], paddingRight: theme.spacing[6], paddingTop: theme.spacing[6], paddingBottom: theme.spacing[6], backgroundColor: theme.color.background.neutral, display: 'flex ', flexDirection: 'column', boxSizing: 'border-box', width: '100%' });
-};
-var getStyledAccordionContentStyles = function (_a) {
-    var theme = _a.theme, height = _a.height;
-    return {
-        paddingTop: theme.spacing[4],
-        height: 'auto',
-        transition: "".concat(height, " 2s ease-in-out"),
-        overflow: 'hidden',
-    };
-};
-var getStyledAccordionArrowStyles = function (_a) {
-    var transform = _a.transform;
-    return {
-        display: 'flex',
-        height: '100%',
-        marginLeft: 'auto',
-        transition: 'transform 0.2s ease-in-out',
-        transform: transform,
-        cursor: 'pointer',
+        else {
+            setIsExpanded((previouslyExpanded) => !previouslyExpanded);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-};
-
-var StyledAccordionWrapper = styled__default.default.div(function (_a) {
-    var theme = _a.theme, showBorders = _a.showBorders, _b = _a.css, css = _b === void 0 ? {} : _b;
-    return (tslib.__assign(tslib.__assign({}, getStyledAccordionStyles({ theme: theme, showBorders: showBorders })), css));
-});
-var StyledAccordionContent = styled__default.default.div(function (_a) {
-    var theme = _a.theme, height = _a.height, css = _a.css;
-    return (tslib.__assign(tslib.__assign({}, getStyledAccordionContentStyles({
-        theme: theme,
-        height: height,
-    })), css));
-});
-var StyledAccordionArrow = styled__default.default.div(function (_a) {
-    var transform = _a.transform, _b = _a.css, css = _b === void 0 ? {} : _b;
-    return (tslib.__assign(tslib.__assign({}, getStyledAccordionArrowStyles({ transform: transform })), css));
+    const dynamicStyles = ctDesignStyleManager.useStyles(() => {
+        var _a, _b;
+        const contentScrollHeight = (_b = (_a = accordionContentRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
+        return {
+            labelRow: {},
+            iconTransform: {
+                transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+            },
+            contentMaxHeight: {
+                maxHeight: isExpanded ? contentScrollHeight : 0,
+            },
+        };
+    }, [isExpanded, disabled]);
+    const mergedIconClassName = ctDesignStyleManager.useWebMergeStyles([accordionStaticStyles.iconContainer, webStaticStyles.iconTransition, dynamicStyles.iconTransform, ...icon], [accordionStaticStyles.iconContainer, dynamicStyles.iconTransform, icon]);
+    const mergedContentClassName = ctDesignStyleManager.useWebMergeStyles([
+        accordionStaticStyles.accordionContentRoot,
+        webStaticStyles.contentTransition,
+        dynamicStyles.contentMaxHeight,
+        ...childrenContainer,
+    ], [accordionStaticStyles.accordionContentRoot, dynamicStyles.contentMaxHeight, childrenContainer]);
+    return (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root }, children: [jsxRuntime.jsxs(ctDesignContainer.Container, { ref: forwardedRef, onClick: onAccordionClick, styleConfig: { root: [accordionStaticStyles.labelRow, dynamicStyles.labelRow, ...labelStyle] }, children: [label, expandIcon && jsxRuntime.jsx("div", { className: mergedIconClassName, children: expandIcon })] }), jsxRuntime.jsx("div", { ref: accordionContentRef, className: mergedContentClassName, children: children })] }));
 });
-
-var Accordion = function (_a) {
-    var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, _d = _a.title, title = _d === void 0 ? '' : _d, _e = _a.onClick, onClick = _e === void 0 ? function () { } : _e, _f = _a.showBorders, showBorders = _f === void 0 ? true : _f, _g = _a.titleVariant, titleVariant = _g === void 0 ? 'L1' : _g, _h = _a.subtitle, subtitle = _h === void 0 ? '' : _h, _j = _a.disableTransition, disableTransition = _j === void 0 ? false : _j, _k = _a.styleConfig, styleConfig = _k === void 0 ? {} : _k;
-    var accordionArrowStyles = getAccordionArrowStyles({
-        isOpen: isOpen,
-    });
-    var root = styleConfig.root, headerContainer = styleConfig.headerContainer, titleContainer = styleConfig.titleContainer, titleProp = styleConfig.title, subTitleProp = styleConfig.subTitle, arrow = styleConfig.arrow, childrenContainer = styleConfig.childrenContainer, childrenContentContainer = styleConfig.childrenContentContainer, arrowIcon = styleConfig.arrowIcon;
-    return (jsxRuntime.jsxs(StyledAccordionWrapper, tslib.__assign({ showBorders: showBorders, className: root === null || root === void 0 ? void 0 : root.className, css: root === null || root === void 0 ? void 0 : root.css }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.className, css: headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.css, display: 'flex', flexDirection: 'row', onClick: onClick }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: classNames__default.default('flex flex-column', titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.className), rowGap: '4px', css: titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.css }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: titleVariant, styleConfig: titleProp }, { children: title })), subtitle && !isOpen && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', color: 'subheading', styleConfig: subTitleProp }, { children: subtitle })))] })), jsxRuntime.jsx(StyledAccordionArrow, tslib.__assign({}, accordionArrowStyles, { className: arrow === null || arrow === void 0 ? void 0 : arrow.className, css: arrow === null || arrow === void 0 ? void 0 : arrow.css }, { children: jsxRuntime.jsx(ctDesignIcons.ChevronDown, tslib.__assign({}, arrowIcon)) }))] })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.className, css: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.css }, { children: isOpen && (jsxRuntime.jsx(StyledAccordionContent, tslib.__assign({ height: !isOpen ? '0px' : 'auto', className: childrenContentContainer === null || childrenContentContainer === void 0 ? void 0 : childrenContentContainer.className, css: childrenContentContainer === null || childrenContentContainer === void 0 ? void 0 : childrenContentContainer.css }, { children: !disableTransition && React__default.default.isValidElement(children) ? (jsxRuntime.jsx(ctDesignTransition.Transition, tslib.__assign({ type: 'slide', in: isOpen, timeout: {
-                            appear: 200,
-                            enter: 200,
-                            exit: 200,
-                        } }, { children: children }))) : (children) }))) }))] })));
-};
+Accordion.displayName = 'Accordion';
 
 exports.Accordion = Accordion;
 //# sourceMappingURL=ct-design-accordion.cjs.js.map

package/dist/ct-design-accordion.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-accordion.cjs.js","sources":["../packages/components/Accordion/src/style.ts","../packages/components/Accordion/src/StyledAccordion/style.ts","../packages/components/Accordion/src/StyledAccordion/StyledAccordion.tsx","../packages/components/Accordion/src/Accordion.tsx"],"sourcesContent":[null,null,null,null],"names":["__assign","styled","_jsxs","Container","classNames","_jsx","Typography","ChevronDown","React","Transition"],"mappings":"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"}
+{"version":3,"file":"ct-design-accordion.cjs.js","sources":["../packages/components/Accordion/src/style.ts","../packages/components/Accordion/src/webStyle.ts","../packages/components/Accordion/src/Accordion.tsx"],"sourcesContent":[null,null,null],"names":["makeStyles","css","forwardRef","useState","useRef","useIsomorphicEffect","useStyles","useWebMergeStyles","staticStyles","_jsxs","Container","_jsx"],"mappings":"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"}

package/dist/ct-design-accordion.esm.js

@@ -1,84 +1,82 @@
-import { __assign } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { ChevronDown } from '@cleartrip/ct-design-icons';
+import { forwardRef, useState, useRef } from 'react';
 import { Container } from '@cleartrip/ct-design-container';
-import { Transition } from '@cleartrip/ct-design-transition';
-import { Typography } from '@cleartrip/ct-design-typography';
-import styled from 'styled-components';
-import classNames from 'classnames';
+import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
 
-var getAccordionArrowStyles = function (_a) {
-    var isOpen = _a.isOpen;
-    if (isOpen)
-        return {
-            transform: 'rotate(-180deg)',
-        };
-    return {
-        transform: 'rotate(0deg)',
-    };
+const accordionStaticStyles = makeStyles((theme) => ({
+    root: {},
+    labelRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    iconContainer: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: theme.spacing[4],
+    },
+    animatedAccordionRoot: {
+        overflow: 'hidden',
+    },
+    accordionContentRoot: {
+        overflow: 'hidden',
+    },
+}));
+
+const webStaticStyles = {
+    iconTransition: css({
+        transition: 'transform 0.3s',
+    }),
+    contentTransition: css({
+        transition: 'max-height 0.3s ease-in-out',
+    }),
 };
 
-var getStyledAccordionStyles = function (_a) {
-    var theme = _a.theme, showBorders = _a.showBorders;
-    var borderStyles = showBorders
-        ? {
-            borderColor: theme.color.border.default,
-            borderWidth: theme.border.width.sm,
-            borderStyle: theme.border.style.solid,
+const Accordion = forwardRef(({ expanded = false, label, onClick, children, expandIcon, disabled = false, styleConfig, isWrappedInAccordionGroup = false, onAccordionGroupClick, }, forwardedRef) => {
+    const { childrenContainer = [], icon = [], label: labelStyle = [], root = [] } = styleConfig || {};
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const accordionContentRef = useRef(null);
+    useIsomorphicEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    const onAccordionClick = () => {
+        if (disabled)
+            return;
+        if (isWrappedInAccordionGroup) {
+            onAccordionGroupClick === null || onAccordionGroupClick === void 0 ? void 0 : onAccordionGroupClick();
         }
-        : {};
-    return __assign(__assign({}, borderStyles), { paddingLeft: theme.spacing[6], paddingRight: theme.spacing[6], paddingTop: theme.spacing[6], paddingBottom: theme.spacing[6], backgroundColor: theme.color.background.neutral, display: 'flex ', flexDirection: 'column', boxSizing: 'border-box', width: '100%' });
-};
-var getStyledAccordionContentStyles = function (_a) {
-    var theme = _a.theme, height = _a.height;
-    return {
-        paddingTop: theme.spacing[4],
-        height: 'auto',
-        transition: "".concat(height, " 2s ease-in-out"),
-        overflow: 'hidden',
-    };
-};
-var getStyledAccordionArrowStyles = function (_a) {
-    var transform = _a.transform;
-    return {
-        display: 'flex',
-        height: '100%',
-        marginLeft: 'auto',
-        transition: 'transform 0.2s ease-in-out',
-        transform: transform,
-        cursor: 'pointer',
+        else {
+            setIsExpanded((previouslyExpanded) => !previouslyExpanded);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-};
-
-var StyledAccordionWrapper = styled.div(function (_a) {
-    var theme = _a.theme, showBorders = _a.showBorders, _b = _a.css, css = _b === void 0 ? {} : _b;
-    return (__assign(__assign({}, getStyledAccordionStyles({ theme: theme, showBorders: showBorders })), css));
-});
-var StyledAccordionContent = styled.div(function (_a) {
-    var theme = _a.theme, height = _a.height, css = _a.css;
-    return (__assign(__assign({}, getStyledAccordionContentStyles({
-        theme: theme,
-        height: height,
-    })), css));
-});
-var StyledAccordionArrow = styled.div(function (_a) {
-    var transform = _a.transform, _b = _a.css, css = _b === void 0 ? {} : _b;
-    return (__assign(__assign({}, getStyledAccordionArrowStyles({ transform: transform })), css));
+    const dynamicStyles = useStyles(() => {
+        var _a, _b;
+        const contentScrollHeight = (_b = (_a = accordionContentRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
+        return {
+            labelRow: {},
+            iconTransform: {
+                transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+            },
+            contentMaxHeight: {
+                maxHeight: isExpanded ? contentScrollHeight : 0,
+            },
+        };
+    }, [isExpanded, disabled]);
+    const mergedIconClassName = useWebMergeStyles([accordionStaticStyles.iconContainer, webStaticStyles.iconTransition, dynamicStyles.iconTransform, ...icon], [accordionStaticStyles.iconContainer, dynamicStyles.iconTransform, icon]);
+    const mergedContentClassName = useWebMergeStyles([
+        accordionStaticStyles.accordionContentRoot,
+        webStaticStyles.contentTransition,
+        dynamicStyles.contentMaxHeight,
+        ...childrenContainer,
+    ], [accordionStaticStyles.accordionContentRoot, dynamicStyles.contentMaxHeight, childrenContainer]);
+    return (jsxs(Container, { styleConfig: { root }, children: [jsxs(Container, { ref: forwardedRef, onClick: onAccordionClick, styleConfig: { root: [accordionStaticStyles.labelRow, dynamicStyles.labelRow, ...labelStyle] }, children: [label, expandIcon && jsx("div", { className: mergedIconClassName, children: expandIcon })] }), jsx("div", { ref: accordionContentRef, className: mergedContentClassName, children: children })] }));
 });
-
-var Accordion = function (_a) {
-    var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, _d = _a.title, title = _d === void 0 ? '' : _d, _e = _a.onClick, onClick = _e === void 0 ? function () { } : _e, _f = _a.showBorders, showBorders = _f === void 0 ? true : _f, _g = _a.titleVariant, titleVariant = _g === void 0 ? 'L1' : _g, _h = _a.subtitle, subtitle = _h === void 0 ? '' : _h, _j = _a.disableTransition, disableTransition = _j === void 0 ? false : _j, _k = _a.styleConfig, styleConfig = _k === void 0 ? {} : _k;
-    var accordionArrowStyles = getAccordionArrowStyles({
-        isOpen: isOpen,
-    });
-    var root = styleConfig.root, headerContainer = styleConfig.headerContainer, titleContainer = styleConfig.titleContainer, titleProp = styleConfig.title, subTitleProp = styleConfig.subTitle, arrow = styleConfig.arrow, childrenContainer = styleConfig.childrenContainer, childrenContentContainer = styleConfig.childrenContentContainer, arrowIcon = styleConfig.arrowIcon;
-    return (jsxs(StyledAccordionWrapper, __assign({ showBorders: showBorders, className: root === null || root === void 0 ? void 0 : root.className, css: root === null || root === void 0 ? void 0 : root.css }, { children: [jsxs(Container, __assign({ className: headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.className, css: headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.css, display: 'flex', flexDirection: 'row', onClick: onClick }, { children: [jsxs(Container, __assign({ className: classNames('flex flex-column', titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.className), rowGap: '4px', css: titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.css }, { children: [jsx(Typography, __assign({ variant: titleVariant, styleConfig: titleProp }, { children: title })), subtitle && !isOpen && (jsx(Typography, __assign({ variant: 'B2', color: 'subheading', styleConfig: subTitleProp }, { children: subtitle })))] })), jsx(StyledAccordionArrow, __assign({}, accordionArrowStyles, { className: arrow === null || arrow === void 0 ? void 0 : arrow.className, css: arrow === null || arrow === void 0 ? void 0 : arrow.css }, { children: jsx(ChevronDown, __assign({}, arrowIcon)) }))] })), jsx(Container, __assign({ className: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.className, css: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.css }, { children: isOpen && (jsx(StyledAccordionContent, __assign({ height: !isOpen ? '0px' : 'auto', className: childrenContentContainer === null || childrenContentContainer === void 0 ? void 0 : childrenContentContainer.className, css: childrenContentContainer === null || childrenContentContainer === void 0 ? void 0 : childrenContentContainer.css }, { children: !disableTransition && React.isValidElement(children) ? (jsx(Transition, __assign({ type: 'slide', in: isOpen, timeout: {
-                            appear: 200,
-                            enter: 200,
-                            exit: 200,
-                        } }, { children: children }))) : (children) }))) }))] })));
-};
+Accordion.displayName = 'Accordion';
 
 export { Accordion };
 //# sourceMappingURL=ct-design-accordion.esm.js.map