react-restyle-components 0.4.39 → 0.4.40

package/lib/index.js

@@ -1 +1,3 @@
-"use strict";export*from"./src/core-components";export*from"./src/core-utils";export*from"./src/core-hooks";
+export * from './src/core-components';
+export * from './src/core-utils';
+export * from './src/core-hooks';

package/lib/src/core-components/index.js

@@ -1 +1 @@
-"use strict";export*from"./src/components";
+export * from './src/components';

package/lib/src/core-components/src/components/Accordion/AccordionSection/Accordion.js

@@ -1 +1,15 @@
-"use strict";"use client";import{jsx as o}from"react/jsx-runtime";import t from"react";import d from"./AccordionContext";import{AccordionElement as l}from"./elements";import{usePropDeprecation as m}from"../../../utils";export const Accordion=t.forwardRef(({ariaLabel:i="",variant:r="inline",numbered:e=!1,children:n,...a},c)=>(m({name:"numbered",version:"5.0.0",alternative:"AccordionSection.Header.Leading and  AccordionSection.Header.Trailing",value:e}),o(d.Provider,{value:{variant:r,numbered:e},children:o(l,{"data-aui":"accordion","aria-label":i,ref:c,$variant:r,...a,children:n})})));
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import AccordionContext from './AccordionContext';
+import { AccordionElement } from './elements';
+import { usePropDeprecation } from '../../../utils';
+export const Accordion = React.forwardRef(({ ariaLabel = '', variant = 'inline', numbered = false, children, ...props }, fRef) => {
+    usePropDeprecation({
+        name: 'numbered',
+        version: '5.0.0',
+        alternative: 'AccordionSection.Header.Leading and  AccordionSection.Header.Trailing',
+        value: numbered,
+    });
+    return (_jsx(AccordionContext.Provider, { value: { variant, numbered }, children: _jsx(AccordionElement, { "data-aui": "accordion", "aria-label": ariaLabel, ref: fRef, "$variant": variant, ...props, children: children }) }));
+});

package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionContext.js

@@ -1 +1,6 @@
-"use strict";import{createContext as e}from"react";const t=e({variant:"inline",numbered:!1});export default t;
+import { createContext } from 'react';
+const AccordionContext = createContext({
+    variant: 'inline',
+    numbered: false,
+});
+export default AccordionContext;

package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.js

@@ -1 +1,39 @@
-"use strict";"use client";import{jsxs as i,jsx as e}from"react/jsx-runtime";import h,{useContext as T,useRef as b,useState as B,useEffect as D}from"react";import{ButtonElement as E,AccordionSectionWrapper as k,AccordionSectionContent as w,AccordionDivider as z,AccordionSectionContentWrapper as F,AccordionFade as W}from"./elements";import{Header as o}from"./Header";import{Icon as _}from"../../Icon/Icon";import{useCurrentAccordionIndex as P}from"./hooks/useCurrentAccordionIndex";import q from"./AccordionContext";import{StateLayer as G}from"../../../core-components";import{attachSubComponents as J,separateChildrenByType as K,usePropDeprecation as M}from"../../../utils";import{tokens as Q}from"../../../utils/designTokens";export const AccordionSection=J("AccordionSection",h.forwardRef(({buttonClassName:S="",headerClassName:$="",subheaderClassName:x="",iconWrapperClassName:A="",ariaLabel:v="",icons:r,children:C,header:g,subheader:a,startOpen:d=!1,transitionDuration:t=".3s",transitionTimingFunction:s="ease-in",onClick:I,onOpenStateChange:H,isOpen:c,...L},N)=>{M({name:"iconSrc",version:"5.0.0",alternative:"AccordionSection.Header.Leading and  AccordionSection.Header.Trailing",value:r});const{numbered:m,variant:l}=T(q),p=b(null),j=P(p),[n,f]=B(c??d);D(()=>{f(c??d)},[c]);const[u,y]=K(C,o),O=h.Children.count(u)!==0?u:i(o,{children:[m?e(o.Leading,{children:i(o.Number,{children:[j,"."]})}):r&&e(o.Leading,{alignment:"center",className:A,children:e(_,{nameIcon:r.nameIcon,propsIcon:{size:24,color:Q.white,...r.propsIcon||{}}})}),e(o.Heading,{className:$,children:g}),a&&e(o.SupportiveText,{className:x,children:a})]});return i(k,{$variant:l,$isOpen:n,"data-aui":"accordion.section",ref:p,children:[i(E,{ref:N,className:S,"aria-label":v,"aria-expanded":n,$variant:l,$isOpen:n,onClick:R=>{I?.(R),H?.(!n),f(!n)},...L,children:[e(G,{}),O]}),i(F,{$isOpen:n,$transitionDuration:t,$transitionTimingFunction:s,children:[e(w,{"aria-hidden":!n,$isOpen:n,$hasLeader:!!r||m,$transitionDuration:t,children:e("div",{style:{zIndex:-1,paddingBottom:10},children:y})}),e(W,{$isOpen:n,$transitionDuration:t,$transitionTimingFunction:s})]}),e(z,{})]})}),{Header:o});
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext, useRef, useState, useEffect } from 'react';
+import { ButtonElement, AccordionSectionWrapper, AccordionSectionContent, AccordionDivider, AccordionSectionContentWrapper, AccordionFade, } from './elements';
+import { Header } from './Header';
+import { Icon } from '../../Icon/Icon';
+import { useCurrentAccordionIndex } from './hooks/useCurrentAccordionIndex';
+import AccordionContext from './AccordionContext';
+import { StateLayer } from '../../../core-components';
+import { attachSubComponents, separateChildrenByType, usePropDeprecation, } from '../../../utils';
+import { tokens } from '../../../utils/designTokens';
+export const AccordionSection = attachSubComponents('AccordionSection', React.forwardRef(({ buttonClassName = '', headerClassName = '', subheaderClassName = '', iconWrapperClassName = '', ariaLabel = '', icons, children, header, subheader, startOpen = false, transitionDuration = '.3s', transitionTimingFunction = 'ease-in', onClick, onOpenStateChange, isOpen, ...rest }, fRef) => {
+    usePropDeprecation({
+        name: 'iconSrc',
+        version: '5.0.0',
+        alternative: 'AccordionSection.Header.Leading and  AccordionSection.Header.Trailing',
+        value: icons,
+    });
+    const { numbered, variant } = useContext(AccordionContext);
+    const accordionRef = useRef(null);
+    const accordionIndex = useCurrentAccordionIndex(accordionRef);
+    const [accordionOpen, setAccordionOpenState] = useState(isOpen ?? startOpen);
+    useEffect(() => {
+        setAccordionOpenState(isOpen ?? startOpen);
+    }, [isOpen]);
+    const [headerElements, content] = separateChildrenByType(children, Header);
+    const sectionHeader = React.Children.count(headerElements) !== 0 ? (headerElements) : (_jsxs(Header, { children: [numbered ? (_jsx(Header.Leading, { children: _jsxs(Header.Number, { children: [accordionIndex, "."] }) })) : (icons && (_jsx(Header.Leading, { alignment: "center", className: iconWrapperClassName, children: _jsx(Icon, { nameIcon: icons.nameIcon, propsIcon: {
+                        size: 24,
+                        color: tokens.white,
+                        ...(icons.propsIcon || {})
+                    } }) }))), _jsx(Header.Heading, { className: headerClassName, children: header }), subheader && (_jsx(Header.SupportiveText, { className: subheaderClassName, children: subheader }))] }));
+    return (_jsxs(AccordionSectionWrapper, { "$variant": variant, "$isOpen": accordionOpen, "data-aui": "accordion.section", ref: accordionRef, children: [_jsxs(ButtonElement, { ref: fRef, className: buttonClassName, "aria-label": ariaLabel, "aria-expanded": accordionOpen, "$variant": variant, "$isOpen": accordionOpen, onClick: (e) => {
+                    onClick?.(e);
+                    onOpenStateChange?.(!accordionOpen);
+                    setAccordionOpenState(!accordionOpen);
+                }, ...rest, children: [_jsx(StateLayer, {}), sectionHeader] }), _jsxs(AccordionSectionContentWrapper, { "$isOpen": accordionOpen, "$transitionDuration": transitionDuration, "$transitionTimingFunction": transitionTimingFunction, children: [_jsx(AccordionSectionContent, { "aria-hidden": !accordionOpen, "$isOpen": accordionOpen, "$hasLeader": !!icons || numbered, "$transitionDuration": transitionDuration, children: _jsx("div", { style: { zIndex: -1, paddingBottom: 10 }, children: content }) }), _jsx(AccordionFade, { "$isOpen": accordionOpen, "$transitionDuration": transitionDuration, "$transitionTimingFunction": transitionTimingFunction })] }), _jsx(AccordionDivider, {})] }));
+}), {
+    Header,
+});

package/lib/src/core-components/src/components/Accordion/AccordionSection/Header.js

@@ -1 +1,39 @@
-"use strict";import{jsx as r,Fragment as h,jsxs as m}from"react/jsx-runtime";import{attachSubComponents as p,DefaultsProvider as u,separateChildrenByType as f}from"../../../utils";import{AccordionSectionText as x,StyledLeadingTrailing as y}from"./elements";import{tokens as S}from"../../../utils/designTokens";const o=({size:e,weight:n,color:t,children:i,...g})=>{const a={1:"0.875rem",2:"1rem",3:"1.25rem",4:"1.5rem"},s={regular:400,medium:500,heavy:700};return r("span",{style:{fontSize:a[e]||a[2],fontWeight:s[n]||s.regular,color:t||S.white},...g,children:i})},c=({children:e,...n})=>r(y,{...n,children:r(u,{value:{iconSize:"large"},children:e})}),l=e=>r(c,{...e}),d=e=>r(c,{...e}),T=({children:e,...n})=>r(o,{size:2,weight:"heavy",...n,children:e}),v=({children:e,...n})=>r(o,{size:2,weight:"heavy",...n,children:e}),z=({children:e,...n})=>r(o,{size:1,...n,children:e});export const Header=p("Header",({children:e})=>{const[n,t,i]=f(e,l,d);return m(h,{children:[n,r(x,{children:i}),t]})},{Heading:v,Leading:l,Number:T,SupportiveText:z,Trailing:d});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { attachSubComponents, DefaultsProvider, separateChildrenByType, } from '../../../utils';
+import { AccordionSectionText, StyledLeadingTrailing } from './elements';
+import { tokens } from '../../../utils/designTokens';
+// import {Text, TextProps} from '../Text';
+const Text = ({ size, weight, color, children, ...props }) => {
+    const fontSizeMap = {
+        1: '0.875rem',
+        2: '1rem',
+        3: '1.25rem',
+        4: '1.5rem',
+    };
+    const fontWeightMap = {
+        regular: 400,
+        medium: 500,
+        heavy: 700,
+    };
+    return (_jsx("span", { style: {
+            fontSize: fontSizeMap[size] || fontSizeMap[2],
+            fontWeight: fontWeightMap[weight] || fontWeightMap['regular'],
+            color: color || tokens.white,
+        }, ...props, children: children }));
+};
+const LeadingTrailing = ({ children, ...props }) => (_jsx(StyledLeadingTrailing, { ...props, children: _jsx(DefaultsProvider, { value: { iconSize: 'large' }, children: children }) }));
+const Leading = (props) => _jsx(LeadingTrailing, { ...props });
+const Trailing = (props) => _jsx(LeadingTrailing, { ...props });
+const Number = ({ children, ...props }) => (_jsx(Text, { size: 2, weight: "heavy", ...props, children: children }));
+const Heading = ({ children, ...props }) => (_jsx(Text, { size: 2, weight: "heavy", ...props, children: children }));
+const SupportiveText = ({ children, ...props }) => (_jsx(Text, { size: 1, ...props, children: children }));
+export const Header = attachSubComponents('Header', ({ children }) => {
+    const [leading, trailing, content] = separateChildrenByType(children, Leading, Trailing);
+    return (_jsxs(_Fragment, { children: [leading, _jsx(AccordionSectionText, { children: content }), trailing] }));
+}, {
+    Heading,
+    Leading,
+    Number,
+    SupportiveText,
+    Trailing,
+});

package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.js

@@ -1,39 +1,50 @@
-"use strict";import{styled as t,css as r}from"styled-components";import{Icon as s}from"../../Icon/Icon";import{StateLayer as n}from"../../../core-components";import{tokens as e}from"../../../utils/designTokens";const d=t.hr`
+import { styled, css } from 'styled-components';
+import { Icon } from '../../Icon/Icon';
+import { StateLayer } from '../../../core-components';
+import { tokens } from '../../../utils/designTokens';
+const Divider = styled.hr `
   border: none;
   border-top: 1px solid;
   margin: 0;
   width: 100%;
-`;export const AccordionElement=t.div`
+`;
+export const AccordionElement = styled.div `
   display: flex;
   justify-content: flex-start;
   align-items: stretch;
   flex-direction: column;
-  gap: ${e.spacing050};
-  ${({$variant:i})=>i==="inline"&&r`
-      border: 1px solid ${e.outline};
-      border-radius: ${e.borderRadius100};
-      padding: ${e.spacing100};
-      background: ${e.surface||"#ffffff"};
+  gap: ${tokens.spacing050};
+  ${({ $variant }) => $variant === 'inline' &&
+    css `
+      border: 1px solid ${tokens.outline};
+      border-radius: ${tokens.borderRadius100};
+      padding: ${tokens.spacing100};
+      background: ${tokens.surface || '#ffffff'};
     `};
   overflow: hidden;
   width: 100%;
-  color: ${e.onSurface};
-`,AccordionSectionWrapper=t.div`
+  color: ${tokens.onSurface};
+`;
+export const AccordionSectionWrapper = styled.div `
   overflow: hidden;
   width: 100%;
   isolation: isolate;
   transition: all 0.3s ease;
 
-  ${({$variant:i,$isOpen:o})=>i==="inline"&&r`
-      border-radius: ${e.borderRadius100};
-      margin-bottom: ${o?e.spacing100:"0"};
-      box-shadow: ${o?"0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)":"none"};
+  ${({ $variant, $isOpen }) => $variant === 'inline' &&
+    css `
+      border-radius: ${tokens.borderRadius100};
+      margin-bottom: ${$isOpen ? tokens.spacing100 : '0'};
+      box-shadow: ${$isOpen
+        ? '0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)'
+        : 'none'};
 
       &:last-child ${AccordionDivider} {
         display: none;
       }
     `};
-`,ButtonElement=t.button`
+`;
+export const ButtonElement = styled.button `
   all: unset;
   box-sizing: border-box;
 
@@ -42,88 +53,112 @@
   cursor: pointer;
   width: 100%;
 
-  background: ${({$isOpen:i})=>i?`linear-gradient(135deg, ${e.darkGray||"#4a4a4a"} 0%, #3a3a3a 100%)`:e.darkGray||"#4a4a4a"} !important;
-  color: ${e.white||"#ffffff"} !important;
+  background: ${({ $isOpen }) => $isOpen
+    ? `linear-gradient(135deg, ${tokens.darkGray || '#4a4a4a'} 0%, #3a3a3a 100%)`
+    : tokens.darkGray || '#4a4a4a'} !important;
+  color: ${tokens.white || '#ffffff'} !important;
 
   display: flex;
-  gap: ${e.spacing100};
+  gap: ${tokens.spacing100};
   align-items: center;
-  padding: ${e.spacing200} ${e.spacing200};
+  padding: ${tokens.spacing200} ${tokens.spacing200};
 
   transition: all 0.25s ease;
 
-  ${({$variant:i,$isOpen:o})=>i==="inline"&&r`
-      border-radius: ${o?`${e.borderRadius100} ${e.borderRadius100} 0 0`:e.borderRadius100};
+  ${({ $variant, $isOpen }) => $variant === 'inline' &&
+    css `
+      border-radius: ${$isOpen
+        ? `${tokens.borderRadius100} ${tokens.borderRadius100} 0 0`
+        : tokens.borderRadius100};
     `}
 
   &:hover:not(:disabled) {
     background: linear-gradient(135deg, #555555 0%, #3f3f3f 100%) !important;
 
-    ${n} {
-      opacity: ${e.stateLayerHover};
+    ${StateLayer} {
+      opacity: ${tokens.stateLayerHover};
     }
   }
 
-  &:active:not(:disabled) ${n} {
-    opacity: ${e.stateLayerPress};
+  &:active:not(:disabled) ${StateLayer} {
+    opacity: ${tokens.stateLayerPress};
   }
 
   &:focus-visible {
-    outline: 2px solid ${e.primary||"#454cbf"};
+    outline: 2px solid ${tokens.primary || '#454cbf'};
     outline-offset: 2px;
   }
-`,AccordionSectionText=t.div`
+`;
+export const AccordionSectionText = styled.div `
   line-height: 1.4;
   flex-grow: 1;
-  padding-right: ${e.spacing100};
+  padding-right: ${tokens.spacing100};
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: ${e.spacing050};
-  color: ${e.white};
+  gap: ${tokens.spacing050};
+  color: ${tokens.white};
 
   /* Better text rendering */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-`,AccordionFade=t.div`
+`;
+export const AccordionFade = styled.div `
   z-index: 0;
   position: relative;
   background: linear-gradient(
     to bottom,
     transparent,
-    ${e.surface||"#ffffff"}
+    ${tokens.surface || '#ffffff'}
   );
   width: 100%;
-  height: ${e.spacing200};
-  margin-top: calc(${e.spacing200} * -1);
-  opacity: ${({$isOpen:i})=>i?1:0};
-  transition: opacity ${({$transitionDuration:i})=>i} ease;
+  height: ${tokens.spacing200};
+  margin-top: calc(${tokens.spacing200} * -1);
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  transition: opacity ${({ $transitionDuration }) => $transitionDuration} ease;
   pointer-events: none;
-`;const c=(i,o)=>i!=="ease-in"&&i!=="ease-out"?i:o?"ease-out":"ease-in";export const AccordionSectionContentWrapper=t.div`
+`;
+const getTransitionTimingFunction = (transitionTimingFunction, isOpen) => {
+    if (transitionTimingFunction !== 'ease-in' &&
+        transitionTimingFunction !== 'ease-out') {
+        return transitionTimingFunction;
+    }
+    if (isOpen) {
+        return 'ease-out';
+    }
+    return 'ease-in';
+};
+export const AccordionSectionContentWrapper = styled.div `
   z-index: -1;
   position: relative;
   display: grid;
-  grid-template-rows: ${({$isOpen:i})=>i?"1fr":"0fr"};
-  transition: ${({$transitionDuration:i,$transitionTimingFunction:o,$isOpen:a})=>`grid-template-rows ${i} ${c(o,a)}`};
-  background: ${({$isOpen:i})=>i?"linear-gradient(180deg, rgba(74, 74, 74, 0.05) 0%, transparent 100%)":"transparent"};
-  border-left: ${({$isOpen:i})=>i?`3px solid ${e.primary||"#454cbf"}`:"3px solid transparent"};
-  margin-left: ${({$isOpen:i})=>i?e.spacing100:"0"};
+  grid-template-rows: ${({ $isOpen }) => ($isOpen ? '1fr' : '0fr')};
+  transition: ${({ $transitionDuration, $transitionTimingFunction, $isOpen }) => `grid-template-rows ${$transitionDuration} ${getTransitionTimingFunction($transitionTimingFunction, $isOpen)}`};
+  background: ${({ $isOpen }) => $isOpen
+    ? `linear-gradient(180deg, rgba(74, 74, 74, 0.05) 0%, transparent 100%)`
+    : 'transparent'};
+  border-left: ${({ $isOpen }) => $isOpen
+    ? `3px solid ${tokens.primary || '#454cbf'}`
+    : '3px solid transparent'};
+  margin-left: ${({ $isOpen }) => ($isOpen ? tokens.spacing100 : '0')};
   transition: all 0.3s ease;
-`,AccordionSectionContent=t.div`
+`;
+export const AccordionSectionContent = styled.div `
   overflow-y: hidden;
-  transition: ${({$transitionDuration:i})=>`opacity ${i} linear, transform ${i} ease`};
+  transition: ${({ $transitionDuration }) => `opacity ${$transitionDuration} linear, transform ${$transitionDuration} ease`};
   line-height: 1.6;
-  opacity: ${({$isOpen:i})=>i?1:0};
-  transform: ${({$isOpen:i})=>i?"translateY(0)":"translateY(-8px)"};
-  padding-top: ${({$isOpen:i})=>i?e.spacing150:"0"};
-  padding-right: ${e.spacing200};
-  padding-left: ${({$hasLeader:i})=>i?e.spacing600:e.spacing200};
-`,StyledLeadingTrailing=t.div`
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : 'translateY(-8px)')};
+  padding-top: ${({ $isOpen }) => ($isOpen ? tokens.spacing150 : '0')};
+  padding-right: ${tokens.spacing200};
+  padding-left: ${({ $hasLeader }) => $hasLeader ? tokens.spacing600 : tokens.spacing200};
+`;
+export const StyledLeadingTrailing = styled.div `
   flex-shrink: 0;
-  min-width: ${e.spacing300};
+  min-width: ${tokens.spacing300};
   display: flex;
-  align-self: ${({alignment:i})=>i==="center"?"center":"flex-start"};
+  align-self: ${({ alignment }) => alignment === 'center' ? 'center' : 'flex-start'};
   position: relative;
   z-index: 1;
 
@@ -131,15 +166,17 @@
   picture {
     object-fit: contain;
   }
-`,AccordionDivider=t(d)`
-  border-color: ${e.outline};
+`;
+export const AccordionDivider = styled(Divider) `
+  border-color: ${tokens.outline};
   opacity: 0.5;
-  margin: ${e.spacing025} 0;
-`,RotatingIcon=t(s.SSR)`
+  margin: ${tokens.spacing025} 0;
+`;
+export const RotatingIcon = styled(Icon.SSR) `
   overflow: hidden;
   flex-shrink: 0;
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: ${({$rotateIcon:i})=>`rotate(${i?-180:0}deg)`};
+  transform: ${({ $rotateIcon }) => `rotate(${$rotateIcon ? -180 : 0}deg)`};
   opacity: 0.9;
 
   &:hover {

package/lib/src/core-components/src/components/Accordion/AccordionSection/hooks/useCurrentAccordionIndex.js

@@ -1 +1,13 @@
-"use strict";import{useEffect as u,useState as c}from"react";export const useCurrentAccordionIndex=n=>{const[r,o]=c(1);return u(()=>{let e=n.current,t=1;for(;e&&(e=e.previousElementSibling);)t++;o(t)},[]),r};
+import { useEffect, useState } from 'react';
+export const useCurrentAccordionIndex = (ref) => {
+    const [currentIndex, setCurrentIndex] = useState(1);
+    useEffect(() => {
+        let node = ref.current;
+        let index = 1;
+        while (node && (node = node.previousElementSibling)) {
+            index++;
+        }
+        setCurrentIndex(index);
+    }, []);
+    return currentIndex;
+};

package/lib/src/core-components/src/components/Accordion/AccordionSection/index.js

@@ -1 +1,3 @@
-"use strict";export*from"./Accordion";export*from"./AccordionSection";export*from"./types";
+export * from './Accordion';
+export * from './AccordionSection';
+export * from './types';

package/lib/src/core-components/src/components/Accordion/AccordionSection/types.js

@@ -1 +1,9 @@
-"use strict";export var AccordionVariant;(function(e){e.Inline="inline",e.FullPage="full-page"})(AccordionVariant||(AccordionVariant={}));export const LEADING_TRAILING_ALIGNMENTS=["center","top"];
+/** @deprecated */
+export var AccordionVariant;
+(function (AccordionVariant) {
+    /** @deprecated use 'inline' instead */
+    AccordionVariant["Inline"] = "inline";
+    /** @deprecated use 'full-page' instead */
+    AccordionVariant["FullPage"] = "full-page";
+})(AccordionVariant || (AccordionVariant = {}));
+export const LEADING_TRAILING_ALIGNMENTS = ['center', 'top'];