@dnanpm/styleguide 3.3.1 → 3.5.0

package/build/es/build/assets/fonts/fonts.css

@@ -1,129 +1,129 @@
-/* "DNA Text" font definition */
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-/* "DNA Heading" font definition */
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-/* "DNA Numerals" font definition */
-@font-face {
-    font-family: 'DNA Numerals';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
-
-/* Direct definitons of DNA fonts */
-@font-face {
-    font-family: 'DNA Text Regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Medium';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Demi Bold';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Black';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Numerals Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
+/* "DNA Text" font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* "DNA Heading" font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+/* "DNA Numerals" font definition */
+@font-face {
+    font-family: 'DNA Numerals';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}
+
+/* Direct definitons of DNA fonts */
+@font-face {
+    font-family: 'DNA Text Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Medium';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Demi Bold';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Black';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Numerals Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}

package/build/es/components/Accordion/Accordion.d.ts

@@ -1,21 +1,21 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
-interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
-    /**
-     * Content of Accordion
-     *
-     * @type AccordionItem
-     */
-    children: ReactNode;
-    /**
-     * Allows only one AccordionItem to be opened when set to true
-     *
-     * @default false
-     */
-    autoCollapsible?: boolean;
-}
-/** @visibleName Accordion */
-declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => React.JSX.Element | null;
-/** @component */
-export default Accordion;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
+interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
+    /**
+     * Content of Accordion
+     *
+     * @type AccordionItem
+     */
+    children: ReactNode;
+    /**
+     * Allows only one AccordionItem to be opened when set to true
+     *
+     * @default false
+     */
+    autoCollapsible?: boolean;
+}
+/** @visibleName Accordion */
+declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Accordion;

package/build/es/components/Accordion/Accordion.js

@@ -6,7 +6,7 @@ import { getMultipliedSize } from '../../utils/styledUtils.js';
 import AccordionItem from '../AccordionItem/AccordionItem.js';
 
 const AccordionContainer = styled__default.div `
-    ${p => p.type === 'box' &&
+    ${p => p.type === 'box' &&
     css `
             & > * {
                 margin: ${getMultipliedSize(theme.base.baseHeight, 1)} 0;
@@ -20,48 +20,48 @@ const AccordionContainer = styled__default.div `
                 margin-bottom: 0;
             }
         `}
-`;
-/** @visibleName Accordion */
-const Accordion = (_a) => {
-    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
-    const initialItemList = {};
-    const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
-    if (props.isExpanded) {
-        Children.map(props.children, (child, index) => {
-            if (isValidElement(child) && child.type === AccordionItem) {
-                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
-            }
-        });
-    }
-    const [itemList, setItemList] = useState(initialItemList);
-    const toggleExpanded = (currentItemId) => {
-        if (currentItemId) {
-            const currentItemState = itemList[currentItemId];
-            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
-        }
-    };
-    const handleClick = (e) => {
-        var _a, _b;
-        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
-    };
-    const handleKeyDown = (e) => {
-        var _a, _b;
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
-        }
-    };
-    const accordionItems = Children.map(props.children, (child, index) => {
-        if (isValidElement(child) && child.type === AccordionItem) {
-            const id = getAccordionItemId(index, child.props.title);
-            return (React__default.createElement(AccordionItem, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
-        }
-        return null;
-    });
-    if (!accordionItems) {
-        return null;
-    }
-    return (React__default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
+`;
+/** @visibleName Accordion */
+const Accordion = (_a) => {
+    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
+    const initialItemList = {};
+    const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
+    if (props.isExpanded) {
+        Children.map(props.children, (child, index) => {
+            if (isValidElement(child) && child.type === AccordionItem) {
+                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
+            }
+        });
+    }
+    const [itemList, setItemList] = useState(initialItemList);
+    const toggleExpanded = (currentItemId) => {
+        if (currentItemId) {
+            const currentItemState = itemList[currentItemId];
+            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
+        }
+    };
+    const handleClick = (e) => {
+        var _a, _b;
+        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
+    };
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
+        }
+    };
+    const accordionItems = Children.map(props.children, (child, index) => {
+        if (isValidElement(child) && child.type === AccordionItem) {
+            const id = getAccordionItemId(index, child.props.title);
+            return (React__default.createElement(AccordionItem, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
+        }
+        return null;
+    });
+    if (!accordionItems) {
+        return null;
+    }
+    return (React__default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
 export { Accordion as default };

package/build/es/components/AccordionItem/AccordionItem.d.ts

@@ -1,72 +1,72 @@
-import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import React from 'react';
-type AccordionItemType = 'box' | 'panel';
-export interface Props {
-    /**
-     * Accordion item title
-     */
-    title: string;
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Allows to change the styling of component
-     *
-     * @param {AccordionItemType} box Styled as Box component with level set to `none`
-     * @param {AccordionItemType} panel With transparent background and line as separation
-     *
-     * @default 'box'
-     */
-    type?: AccordionItemType;
-    /**
-     * Content of Accordion Item
-     */
-    children?: ReactNode;
-    /**
-     * Allows to expand or collapse the component
-     *
-     * @default false
-     */
-    isExpanded?: boolean;
-    /**
-     * Allows to set item title highlight of Accordion Item when it is in expanded state.
-     * Affects also highlight of CSS :hover and :active states
-     *
-     * @default true For `panel` type
-     * @default false For `box` type
-     */
-    highlightSelected?: boolean;
-    /**
-     * Display close button in the item content
-     *
-     * @default false
-     */
-    hasCloseButton?: boolean;
-    /**
-     * Label to show for the open icon for accessibility
-     */
-    openLabel?: string;
-    /**
-     * Label to show for the close button in the content
-     */
-    closeLabel?: string;
-    /**
-     * On component title and close button mouse click callback
-     * Use `e.currentTarget.parentElement` to get AccordionItem element
-     */
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * On component title and close button keyboard key down callback
-     * Use `e.currentTarget.parentElement` to get AccordionItem element
-     */
-    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-/** @visibleName Accordion Item */
-declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default AccordionItem;
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type AccordionItemType = 'box' | 'panel';
+export interface Props {
+    /**
+     * Accordion item title
+     */
+    title: string;
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {AccordionItemType} box Styled as Box component with level set to `none`
+     * @param {AccordionItemType} panel With transparent background and line as separation
+     *
+     * @default 'box'
+     */
+    type?: AccordionItemType;
+    /**
+     * Content of Accordion Item
+     */
+    children?: ReactNode;
+    /**
+     * Allows to expand or collapse the component
+     *
+     * @default false
+     */
+    isExpanded?: boolean;
+    /**
+     * Allows to set item title highlight of Accordion Item when it is in expanded state.
+     * Affects also highlight of CSS :hover and :active states
+     *
+     * @default true For `panel` type
+     * @default false For `box` type
+     */
+    highlightSelected?: boolean;
+    /**
+     * Display close button in the item content
+     *
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Label to show for the open icon for accessibility
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+    /**
+     * On component title and close button mouse click callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * On component title and close button keyboard key down callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Accordion Item */
+declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default AccordionItem;

package/build/es/components/AccordionItem/AccordionItem.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { ChevronUp, ChevronDown, Close } from '@dnanpm/icons';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import styled__default, { css } from 'styled-components';
 import useResizeObserver from '../../hooks/useResizeObserver.js';
 import theme from '../../themes/theme.js';
@@ -9,11 +9,11 @@ import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
 
 const AccordionItemContainer = styled__default.div `
-    ${p => p.type === 'panel' &&
+    ${p => p.type === 'panel' &&
     css `
             border-bottom: 1px solid ${theme.color.line.L02};
         `}
-`;
+`;
 const AccordionItemTitle = styled__default.div `
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
@@ -26,7 +26,7 @@ const AccordionItemTitle = styled__default.div `
         ${getMultipliedSize(theme.base.baseHeight, 2)};
     color: ${p => p.isExpanded && p.highlightSelected ? theme.color.default.pink : theme.color.default.black};
     transition: color 0.2s;
-    ${p => p.highlightSelected &&
+    ${p => p.highlightSelected &&
     css `
             &:hover,
             &:active {
@@ -34,17 +34,17 @@ const AccordionItemTitle = styled__default.div `
                 text-decoration: none;
             }
         `}
-`;
+`;
 const AccordionItemContentWrapper = styled__default.div `
     overflow: hidden;
     transition: all 0.2s ease;
     height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
     padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
     visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
-`;
+`;
 const AccordionItemContent = styled__default.div `
     padding-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-`;
+`;
 const AccordionItemCloseButton = styled__default.div `
     display: flex;
     justify-content: flex-end;
@@ -53,22 +53,23 @@ const AccordionItemCloseButton = styled__default.div `
     padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
     gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
     cursor: pointer;
-`;
-/** @visibleName Accordion Item */
-const AccordionItem = (_a) => {
-    var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
-    // Get height when element dimensions change
-    const { height: contentHeight, ref: contentRef } = useResizeObserver();
-    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
-        React__default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
-            props.title,
-            props.isExpanded ? (React__default.createElement(Icon, { icon: ChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: ChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
-        React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
-            React__default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
-            React__default.createElement("span", null, props.closeLabel),
-            React__default.createElement(Icon, { icon: Close })))));
-    return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
+`;
+/** @visibleName Accordion Item */
+const AccordionItem = (_a) => {
+    var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
+    const contentRef = useRef(null);
+    // Get height when element dimensions change
+    const { height: contentHeight } = useResizeObserver(contentRef);
+    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
+        React__default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
+            props.title,
+            props.isExpanded ? (React__default.createElement(Icon, { icon: ChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: ChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
+        React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
+            React__default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+            React__default.createElement("span", null, props.closeLabel),
+            React__default.createElement(Icon, { icon: Close })))));
+    return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
 };
 
 export { AccordionItem as default };