@contentful/f36-accordion 4.16.0 → 4.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.19.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @contentful/f36-collapse@4.19.0
9
+ - @contentful/f36-icons@4.19.0
10
+ - @contentful/f36-typography@4.19.0
11
+ - @contentful/f36-core@4.19.0
12
+
13
+ ## 4.18.0
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies []:
18
+ - @contentful/f36-collapse@4.18.0
19
+ - @contentful/f36-icons@4.18.0
20
+ - @contentful/f36-typography@4.18.0
21
+ - @contentful/f36-core@4.18.0
22
+
23
+ ## 4.17.0
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies []:
28
+ - @contentful/f36-collapse@4.17.0
29
+ - @contentful/f36-icons@4.17.0
30
+ - @contentful/f36-typography@4.17.0
31
+ - @contentful/f36-core@4.17.0
32
+
3
33
  ## 4.16.0
4
34
 
5
35
  ### Patch Changes
@@ -1,7 +1,8 @@
1
- import React, { FC } from "react";
2
- import { CommonProps, ExpandProps } from "@contentful/f36-core";
3
- import { HeadingElement } from "@contentful/f36-typography";
4
- export interface AccordionProps extends CommonProps {
1
+ import React, { FC } from 'react';
2
+ import { CommonProps, ExpandProps } from '@contentful/f36-core';
3
+ import { HeadingElement } from '@contentful/f36-typography';
4
+
5
+ interface AccordionProps extends CommonProps {
5
6
  /**
6
7
  * Specify the alignment of the chevron inside the accordion header
7
8
  * @default end
@@ -12,39 +13,55 @@ export interface AccordionProps extends CommonProps {
12
13
  */
13
14
  children?: React.ReactNode;
14
15
  }
15
- declare const _Accordion1: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLUListElement>>;
16
- export interface AccordionHeaderProps extends CommonProps {
16
+ declare const Accordion$1: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLUListElement>>;
17
+
18
+ interface AccordionItemProps extends CommonProps {
17
19
  /**
18
- * Child nodes to be rendered in the component
20
+ * The accordion title
19
21
  */
20
- children?: React.ReactNode;
22
+ title?: React.ReactNode;
21
23
  /**
22
- * The function that will be called once the user clicks on the accordion title
24
+ * The heading element that will be used by the AccordionHeader
23
25
  */
24
- onClick: VoidFunction;
26
+ titleElement?: HeadingElement;
25
27
  /**
26
- * A boolean that tells if the accordion should be expanded or collapsed
28
+ * The children of the AccordionItem are in fact the content of the accordion
27
29
  */
28
- isExpanded: boolean;
30
+ children?: React.ReactNode;
29
31
  /**
30
- * An unique id that is necessary for the aria roles and properties
32
+ * A function to be called when the accordion item is opened
31
33
  */
32
- ariaId: string;
34
+ onExpand?: () => void;
33
35
  /**
34
- * The heading element that will be used by the Subheading component
36
+ * A function to be called when the accordion item is closed
35
37
  */
36
- element?: HeadingElement;
38
+ onCollapse?: () => void;
37
39
  /**
38
40
  * Specify the alignment of the chevron inside the accordion header
39
41
  */
40
42
  align?: 'start' | 'end';
43
+ /**
44
+ * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
45
+ * But you can make it controlled by providing boolean
46
+ */
47
+ isExpanded?: boolean;
41
48
  }
42
- export const AccordionHeader: ({ children, onClick, isExpanded, ariaId, element, align, testId, ...rest }: AccordionHeaderProps) => JSX.Element;
43
- export interface AccordionPanelProps extends CommonProps {
49
+ declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
50
+
51
+ declare type CompoundAccordion = typeof Accordion$1 & {
52
+ Item: typeof AccordionItem;
53
+ };
54
+ declare const Accordion: CompoundAccordion;
55
+
56
+ interface AccordionHeaderProps extends CommonProps {
44
57
  /**
45
58
  * Child nodes to be rendered in the component
46
59
  */
47
60
  children?: React.ReactNode;
61
+ /**
62
+ * The function that will be called once the user clicks on the accordion title
63
+ */
64
+ onClick: VoidFunction;
48
65
  /**
49
66
  * A boolean that tells if the accordion should be expanded or collapsed
50
67
  */
@@ -53,43 +70,31 @@ export interface AccordionPanelProps extends CommonProps {
53
70
  * An unique id that is necessary for the aria roles and properties
54
71
  */
55
72
  ariaId: string;
56
- }
57
- export const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
58
- export interface AccordionItemProps extends CommonProps {
59
73
  /**
60
- * The accordion title
74
+ * The heading element that will be used by the Subheading component
61
75
  */
62
- title?: React.ReactNode;
76
+ element?: HeadingElement;
63
77
  /**
64
- * The heading element that will be used by the AccordionHeader
78
+ * Specify the alignment of the chevron inside the accordion header
65
79
  */
66
- titleElement?: HeadingElement;
80
+ align?: 'start' | 'end';
81
+ }
82
+ declare const AccordionHeader: ({ children, onClick, isExpanded, ariaId, element, align, testId, ...rest }: AccordionHeaderProps) => JSX.Element;
83
+
84
+ interface AccordionPanelProps extends CommonProps {
67
85
  /**
68
- * The children of the AccordionItem are in fact the content of the accordion
86
+ * Child nodes to be rendered in the component
69
87
  */
70
88
  children?: React.ReactNode;
71
89
  /**
72
- * A function to be called when the accordion item is opened
73
- */
74
- onExpand?: () => void;
75
- /**
76
- * A function to be called when the accordion item is closed
77
- */
78
- onCollapse?: () => void;
79
- /**
80
- * Specify the alignment of the chevron inside the accordion header
90
+ * A boolean that tells if the accordion should be expanded or collapsed
81
91
  */
82
- align?: 'start' | 'end';
92
+ isExpanded: boolean;
83
93
  /**
84
- * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
85
- * But you can make it controlled by providing boolean
94
+ * An unique id that is necessary for the aria roles and properties
86
95
  */
87
- isExpanded?: boolean;
96
+ ariaId: string;
88
97
  }
89
- export const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
90
- type CompoundAccordion = typeof _Accordion1 & {
91
- Item: typeof AccordionItem;
92
- };
93
- export const Accordion: CompoundAccordion;
98
+ declare const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
94
99
 
95
- //# sourceMappingURL=types.d.ts.map
100
+ export { Accordion, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps };
package/dist/index.js ADDED
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var g = require('react');
6
+ var f36Core = require('@contentful/f36-core');
7
+ var emotion = require('emotion');
8
+ var n = require('@contentful/f36-tokens');
9
+ var f36Typography = require('@contentful/f36-typography');
10
+ var f36Icons = require('@contentful/f36-icons');
11
+ var f36Collapse = require('@contentful/f36-collapse');
12
+
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var g__default = /*#__PURE__*/_interopDefaultLegacy(g);
16
+ var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
17
+
18
+ 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},
19
+ 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;
20
+
21
+ exports.Accordion = T;
22
+ exports.AccordionHeader = h;
23
+ exports.AccordionItem = S;
24
+ exports.AccordionPanel = E;
25
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
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/dist/index.mjs ADDED
@@ -0,0 +1,13 @@
1
+ import g from 'react';
2
+ import { Box, useId, useControllableState } from '@contentful/f36-core';
3
+ import { cx, css } from 'emotion';
4
+ import n from '@contentful/f36-tokens';
5
+ import { Subheading } from '@contentful/f36-typography';
6
+ import { ChevronDownTrimmedIcon } from '@contentful/f36-icons';
7
+ import { Collapse } from '@contentful/f36-collapse';
8
+
9
+ 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},
10
+ 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;
11
+
12
+ export { T as Accordion, h as AccordionHeader, S as AccordionItem, E as AccordionPanel };
13
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
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 CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@contentful/f36-accordion",
3
- "version": "4.16.0",
3
+ "version": "4.19.0",
4
4
  "description": "Forma 36: Accordion React Component",
5
5
  "license": "MIT",
6
6
  "files": [
7
7
  "dist"
8
8
  ],
9
- "main": "dist/main.js",
10
- "module": "dist/module.js",
11
- "types": "dist/types.d.ts",
9
+ "main": "dist/index.js",
10
+ "module": "dist/index.mjs",
11
+ "types": "dist/index.d.ts",
12
12
  "source": "src/index.ts",
13
13
  "sideEffects": false,
14
14
  "browserslist": "extends @contentful/browserslist-config",
@@ -17,15 +17,15 @@
17
17
  "url": "https://github.com/contentful/forma-36"
18
18
  },
19
19
  "scripts": {
20
- "build": "parcel build"
20
+ "build": "tsup"
21
21
  },
22
22
  "dependencies": {
23
23
  "@babel/runtime": "^7.6.2",
24
- "@contentful/f36-collapse": "^4.16.0",
25
- "@contentful/f36-core": "^4.16.0",
26
- "@contentful/f36-icons": "^4.16.0",
24
+ "@contentful/f36-collapse": "^4.19.0",
25
+ "@contentful/f36-core": "^4.19.0",
26
+ "@contentful/f36-icons": "^4.19.0",
27
27
  "@contentful/f36-tokens": "^4.0.1",
28
- "@contentful/f36-typography": "^4.16.0",
28
+ "@contentful/f36-typography": "^4.19.0",
29
29
  "emotion": "^10.0.17"
30
30
  },
31
31
  "peerDependencies": {
package/dist/main.js DELETED
@@ -1,232 +0,0 @@
1
- var $9pthv$react = require("react");
2
- var $9pthv$contentfulf36core = require("@contentful/f36-core");
3
- var $9pthv$emotion = require("emotion");
4
- var $9pthv$contentfulf36tokens = require("@contentful/f36-tokens");
5
- var $9pthv$contentfulf36typography = require("@contentful/f36-typography");
6
- var $9pthv$contentfulf36icons = require("@contentful/f36-icons");
7
- var $9pthv$contentfulf36collapse = require("@contentful/f36-collapse");
8
-
9
- function $parcel$export(e, n, v, s) {
10
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
11
- }
12
- function $parcel$interopDefault(a) {
13
- return a && a.__esModule ? a.default : a;
14
- }
15
-
16
- $parcel$export(module.exports, "Accordion", () => $485e20d95dcb1fa7$export$a766cd26d0d69044);
17
- $parcel$export(module.exports, "AccordionHeader", () => $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41);
18
- $parcel$export(module.exports, "AccordionItem", () => $b9a3851e41efa019$export$d99097c13d4dac9f);
19
- $parcel$export(module.exports, "AccordionPanel", () => $dc0312cfa0956395$export$7cad6f17fd6e117b);
20
-
21
-
22
-
23
-
24
-
25
- const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className })=>({
26
- accordion: (0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
27
- boxSizing: "border-box",
28
- padding: "0",
29
- margin: "0",
30
- listStyle: "none",
31
- "&:first-child": {
32
- borderTop: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray300}`
33
- }
34
- }), className)
35
- });
36
-
37
-
38
- const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = "end" , children: children , className: className , testId: testId = "cf-ui-accordion" , ...otherProps }, ref)=>{
39
- const styles = (0, $b2e2219a9d74caf2$export$af90c4d6702a6ca7)({
40
- className: className
41
- });
42
- return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36core.Box), {
43
- as: "ul",
44
- className: styles.accordion,
45
- testId: testId,
46
- ...otherProps,
47
- ref: ref
48
- }, (0, ($parcel$interopDefault($9pthv$react))).Children.map(children, (child)=>{
49
- if (/*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).isValidElement(child)) return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).cloneElement(child, {
50
- align: align
51
- });
52
- return child;
53
- }));
54
- };
55
- const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
- const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>(0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
67
- display: "flex",
68
- flexDirection: "row",
69
- alignItems: "center",
70
- border: "0",
71
- padding: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM,
72
- backgroundColor: "transparent",
73
- fontFamily: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontStackPrimary,
74
- fontSize: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontSizeL,
75
- fontWeight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontWeightDemiBold,
76
- lineHeight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).lineHeightL,
77
- color: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray800,
78
- width: "100%",
79
- minWidth: "9px",
80
- cursor: "pointer",
81
- transition: `background-color ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault},
82
- box-shadow ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationShort} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault}`,
83
- "&:hover": {
84
- backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100
85
- },
86
- "&:focus": {
87
- backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100,
88
- borderRadius: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).borderRadiusMedium,
89
- boxShadow: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).glowPrimary,
90
- outline: "none"
91
- },
92
- "&:focus:not(:focus-visible)": {
93
- backgroundColor: "transparent",
94
- borderRadius: "unset",
95
- boxShadow: "unset"
96
- },
97
- "&:focus-visible": {
98
- backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100,
99
- borderRadius: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).borderRadiusMedium,
100
- boxShadow: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).glowPrimary
101
- }
102
- }), align === "end" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
103
- name: "1tvf3d0",
104
- styles: "flex-direction:row-reverse;justify-content:space-between;"
105
- }));
106
- const $cc0727a9cc62031c$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>(0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
107
- transform: "rotate(0deg)",
108
- transition: `transform ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault}`
109
- }), align === "end" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
110
- marginLeft: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM
111
- }), align === "start" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
112
- marginRight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM
113
- }), isExpanded && /*#__PURE__*/ (0, $9pthv$emotion.css)({
114
- name: "4ky835",
115
- styles: "transform:rotate(180deg);"
116
- }));
117
- const $cc0727a9cc62031c$export$b6b01239d0041103 = (props)=>({
118
- accordionHeader: $cc0727a9cc62031c$var$getHeaderStyles(props),
119
- accordionHeaderIcon: $cc0727a9cc62031c$var$getIconStyles(props)
120
- });
121
-
122
-
123
- 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 })=>{
124
- const styles = (0, $cc0727a9cc62031c$export$b6b01239d0041103)({
125
- align: align,
126
- isExpanded: isExpanded
127
- });
128
- return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36typography.Subheading), {
129
- ...rest,
130
- testId: testId,
131
- marginBottom: "none",
132
- as: element
133
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement("button", {
134
- type: "button",
135
- "aria-expanded": isExpanded,
136
- "aria-controls": `accordion-panel--${ariaId}`,
137
- id: `accordion--${ariaId}`,
138
- className: styles.accordionHeader,
139
- onClick: onClick
140
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36icons.ChevronDownTrimmedIcon), {
141
- className: styles.accordionHeaderIcon,
142
- variant: "secondary"
143
- }), children));
144
- };
145
-
146
-
147
-
148
-
149
-
150
-
151
- const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
152
- return {
153
- accordionPanelContent: /*#__PURE__*/ (0, $9pthv$emotion.css)({
154
- width: "100%",
155
- padding: `${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingXs} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM}`
156
- })
157
- };
158
- };
159
-
160
-
161
- const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = "cf-ui-accordion-panel" , ...otherProps })=>{
162
- const styles = (0, $1911a31b860eeb50$export$2db50514b4b2c1ee)();
163
- return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36collapse.Collapse), {
164
- "data-test-id": testId,
165
- "aria-labelledby": `accordion--${ariaId}`,
166
- isExpanded: isExpanded,
167
- ...otherProps
168
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement("div", {
169
- className: styles.accordionPanelContent
170
- }, children));
171
- };
172
-
173
-
174
-
175
-
176
-
177
- const $b70a2de4b5faa5c1$export$c4864364a487dfa = ({ className: className })=>({
178
- accordionItem: (0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
179
- padding: "0",
180
- margin: "0",
181
- borderBottom: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).colorElementMid}`,
182
- "&:first-child": {
183
- borderTop: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).colorElementMid}`
184
- }
185
- }), className)
186
- });
187
-
188
-
189
- 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)=>{
190
- const styles = (0, $b70a2de4b5faa5c1$export$c4864364a487dfa)({
191
- className: className
192
- });
193
- const id = (0, $9pthv$contentfulf36core.useId)();
194
- const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose } = (0, $9pthv$contentfulf36core.useControllableState)({
195
- isOpen: isExpanded,
196
- onOpen: onExpand,
197
- onClose: onCollapse
198
- });
199
- const handleOnClick = ()=>{
200
- if (isOpen) handleClose();
201
- else handleOpen();
202
- };
203
- return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36core.Box), {
204
- as: "li",
205
- className: styles.accordionItem,
206
- testId: `${testId}-${id}`,
207
- ...otherProps,
208
- ref: ref
209
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41), {
210
- onClick: handleOnClick,
211
- isExpanded: isOpen,
212
- element: titleElement,
213
- ariaId: id,
214
- align: align
215
- }, title), /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $dc0312cfa0956395$export$7cad6f17fd6e117b), {
216
- ariaId: id,
217
- isExpanded: isOpen
218
- }, children));
219
- };
220
- const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).forwardRef($b9a3851e41efa019$var$_AccordionItem);
221
-
222
-
223
- const $485e20d95dcb1fa7$export$a766cd26d0d69044 = (0, $6b1aad2dfaf9ce0d$export$a766cd26d0d69044);
224
- $485e20d95dcb1fa7$export$a766cd26d0d69044.Item = (0, $b9a3851e41efa019$export$d99097c13d4dac9f);
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
- //# sourceMappingURL=main.js.map
package/dist/main.js.map DELETED
@@ -1 +0,0 @@
1
- {"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, 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"],"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 DELETED
@@ -1,222 +0,0 @@
1
- import $jACei$react from "react";
2
- import {Box as $jACei$Box, useId as $jACei$useId, useControllableState as $jACei$useControllableState} from "@contentful/f36-core";
3
- import {cx as $jACei$cx, css as $jACei$css} from "emotion";
4
- import $jACei$contentfulf36tokens from "@contentful/f36-tokens";
5
- import {Subheading as $jACei$Subheading} from "@contentful/f36-typography";
6
- import {ChevronDownTrimmedIcon as $jACei$ChevronDownTrimmedIcon} from "@contentful/f36-icons";
7
- import {Collapse as $jACei$Collapse} from "@contentful/f36-collapse";
8
-
9
-
10
-
11
-
12
-
13
-
14
- const $d678e0ec669f4067$export$af90c4d6702a6ca7 = ({ className: className })=>({
15
- accordion: (0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
16
- boxSizing: "border-box",
17
- padding: "0",
18
- margin: "0",
19
- listStyle: "none",
20
- "&:first-child": {
21
- borderTop: `1px solid ${(0, $jACei$contentfulf36tokens).gray300}`
22
- }
23
- }), className)
24
- });
25
-
26
-
27
- const $a517c4a963657a24$var$_Accordion = ({ align: align = "end" , children: children , className: className , testId: testId = "cf-ui-accordion" , ...otherProps }, ref)=>{
28
- const styles = (0, $d678e0ec669f4067$export$af90c4d6702a6ca7)({
29
- className: className
30
- });
31
- return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Box), {
32
- as: "ul",
33
- className: styles.accordion,
34
- testId: testId,
35
- ...otherProps,
36
- ref: ref
37
- }, (0, $jACei$react).Children.map(children, (child)=>{
38
- if (/*#__PURE__*/ (0, $jACei$react).isValidElement(child)) return /*#__PURE__*/ (0, $jACei$react).cloneElement(child, {
39
- align: align
40
- });
41
- return child;
42
- }));
43
- };
44
- const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $jACei$react).forwardRef($a517c4a963657a24$var$_Accordion);
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
- const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align })=>(0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
56
- display: "flex",
57
- flexDirection: "row",
58
- alignItems: "center",
59
- border: "0",
60
- padding: (0, $jACei$contentfulf36tokens).spacingM,
61
- backgroundColor: "transparent",
62
- fontFamily: (0, $jACei$contentfulf36tokens).fontStackPrimary,
63
- fontSize: (0, $jACei$contentfulf36tokens).fontSizeL,
64
- fontWeight: (0, $jACei$contentfulf36tokens).fontWeightDemiBold,
65
- lineHeight: (0, $jACei$contentfulf36tokens).lineHeightL,
66
- color: (0, $jACei$contentfulf36tokens).gray800,
67
- width: "100%",
68
- minWidth: "9px",
69
- cursor: "pointer",
70
- transition: `background-color ${(0, $jACei$contentfulf36tokens).transitionDurationDefault} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault},
71
- box-shadow ${(0, $jACei$contentfulf36tokens).transitionDurationShort} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault}`,
72
- "&:hover": {
73
- backgroundColor: (0, $jACei$contentfulf36tokens).gray100
74
- },
75
- "&:focus": {
76
- backgroundColor: (0, $jACei$contentfulf36tokens).gray100,
77
- borderRadius: (0, $jACei$contentfulf36tokens).borderRadiusMedium,
78
- boxShadow: (0, $jACei$contentfulf36tokens).glowPrimary,
79
- outline: "none"
80
- },
81
- "&:focus:not(:focus-visible)": {
82
- backgroundColor: "transparent",
83
- borderRadius: "unset",
84
- boxShadow: "unset"
85
- },
86
- "&:focus-visible": {
87
- backgroundColor: (0, $jACei$contentfulf36tokens).gray100,
88
- borderRadius: (0, $jACei$contentfulf36tokens).borderRadiusMedium,
89
- boxShadow: (0, $jACei$contentfulf36tokens).glowPrimary
90
- }
91
- }), align === "end" && /*#__PURE__*/ (0, $jACei$css)({
92
- name: "1tvf3d0",
93
- styles: "flex-direction:row-reverse;justify-content:space-between;"
94
- }));
95
- const $d95c2a37e890ef38$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>(0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
96
- transform: "rotate(0deg)",
97
- transition: `transform ${(0, $jACei$contentfulf36tokens).transitionDurationDefault} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault}`
98
- }), align === "end" && /*#__PURE__*/ (0, $jACei$css)({
99
- marginLeft: (0, $jACei$contentfulf36tokens).spacingM
100
- }), align === "start" && /*#__PURE__*/ (0, $jACei$css)({
101
- marginRight: (0, $jACei$contentfulf36tokens).spacingM
102
- }), isExpanded && /*#__PURE__*/ (0, $jACei$css)({
103
- name: "4ky835",
104
- styles: "transform:rotate(180deg);"
105
- }));
106
- const $d95c2a37e890ef38$export$b6b01239d0041103 = (props)=>({
107
- accordionHeader: $d95c2a37e890ef38$var$getHeaderStyles(props),
108
- accordionHeaderIcon: $d95c2a37e890ef38$var$getIconStyles(props)
109
- });
110
-
111
-
112
- 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 })=>{
113
- const styles = (0, $d95c2a37e890ef38$export$b6b01239d0041103)({
114
- align: align,
115
- isExpanded: isExpanded
116
- });
117
- return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Subheading), {
118
- ...rest,
119
- testId: testId,
120
- marginBottom: "none",
121
- as: element
122
- }, /*#__PURE__*/ (0, $jACei$react).createElement("button", {
123
- type: "button",
124
- "aria-expanded": isExpanded,
125
- "aria-controls": `accordion-panel--${ariaId}`,
126
- id: `accordion--${ariaId}`,
127
- className: styles.accordionHeader,
128
- onClick: onClick
129
- }, /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$ChevronDownTrimmedIcon), {
130
- className: styles.accordionHeaderIcon,
131
- variant: "secondary"
132
- }), children));
133
- };
134
-
135
-
136
-
137
-
138
-
139
-
140
- const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
141
- return {
142
- accordionPanelContent: /*#__PURE__*/ (0, $jACei$css)({
143
- width: "100%",
144
- padding: `${(0, $jACei$contentfulf36tokens).spacingXs} ${(0, $jACei$contentfulf36tokens).spacingM} ${(0, $jACei$contentfulf36tokens).spacingM}`
145
- })
146
- };
147
- };
148
-
149
-
150
- const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = "cf-ui-accordion-panel" , ...otherProps })=>{
151
- const styles = (0, $3ba27b87c168e14d$export$2db50514b4b2c1ee)();
152
- return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Collapse), {
153
- "data-test-id": testId,
154
- "aria-labelledby": `accordion--${ariaId}`,
155
- isExpanded: isExpanded,
156
- ...otherProps
157
- }, /*#__PURE__*/ (0, $jACei$react).createElement("div", {
158
- className: styles.accordionPanelContent
159
- }, children));
160
- };
161
-
162
-
163
-
164
-
165
-
166
- const $10647792993fae18$export$c4864364a487dfa = ({ className: className })=>({
167
- accordionItem: (0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
168
- padding: "0",
169
- margin: "0",
170
- borderBottom: `1px solid ${(0, $jACei$contentfulf36tokens).colorElementMid}`,
171
- "&:first-child": {
172
- borderTop: `1px solid ${(0, $jACei$contentfulf36tokens).colorElementMid}`
173
- }
174
- }), className)
175
- });
176
-
177
-
178
- 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)=>{
179
- const styles = (0, $10647792993fae18$export$c4864364a487dfa)({
180
- className: className
181
- });
182
- const id = (0, $jACei$useId)();
183
- const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose } = (0, $jACei$useControllableState)({
184
- isOpen: isExpanded,
185
- onOpen: onExpand,
186
- onClose: onCollapse
187
- });
188
- const handleOnClick = ()=>{
189
- if (isOpen) handleClose();
190
- else handleOpen();
191
- };
192
- return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Box), {
193
- as: "li",
194
- className: styles.accordionItem,
195
- testId: `${testId}-${id}`,
196
- ...otherProps,
197
- ref: ref
198
- }, /*#__PURE__*/ (0, $jACei$react).createElement((0, $01f1d19e673d71a7$export$5e3e5deaaf81ee41), {
199
- onClick: handleOnClick,
200
- isExpanded: isOpen,
201
- element: titleElement,
202
- ariaId: id,
203
- align: align
204
- }, title), /*#__PURE__*/ (0, $jACei$react).createElement((0, $0c5bba33d6cffbcc$export$7cad6f17fd6e117b), {
205
- ariaId: id,
206
- isExpanded: isOpen
207
- }, children));
208
- };
209
- const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ (0, $jACei$react).forwardRef($b6120c67649da348$var$_AccordionItem);
210
-
211
-
212
- const $9e55ae7143081c67$export$a766cd26d0d69044 = (0, $a517c4a963657a24$export$a766cd26d0d69044);
213
- $9e55ae7143081c67$export$a766cd26d0d69044.Item = (0, $b6120c67649da348$export$d99097c13d4dac9f);
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
- export {$9e55ae7143081c67$export$a766cd26d0d69044 as Accordion, $01f1d19e673d71a7$export$5e3e5deaaf81ee41 as AccordionHeader, $b6120c67649da348$export$d99097c13d4dac9f as AccordionItem, $0c5bba33d6cffbcc$export$7cad6f17fd6e117b as AccordionPanel};
222
- //# sourceMappingURL=module.js.map
@@ -1 +0,0 @@
1
- {"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, 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"],"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"}
@@ -1 +0,0 @@
1
- {"mappings":";;;ACKA,+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;AE1DF,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;AE1BF,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;ACpG9D,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"}