amotify 0.0.4 → 0.0.5

package/src/Global/styleConverter.tsx

@@ -1,435 +0,0 @@
-import {
-  useStore
-} from '@global';
-
-type StyleType = '¥' | '¥_h' | '¥_f' | '¥_a' | '¥bk';
-
-const FNs = {
-  toConcreteBorderRadius: ( br?: amotify.UniStyles.Borders.RadiusParams ) => {
-    let roundness = amotify.config.roundness | 0;
-
-    if ( br == '1.tone.primary' ) {
-      br = [ 0,2,3,4,5,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams;
-    } else if ( br == '2.tone.secondary' ) {
-      br = [ 0,1,2,3,4,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams;
-    } else if ( br == '3.tone.tertiary' ) {
-      br = [ 0,'1/3','2/3',1,2,3 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams;
-    }
-    return br;
-  },
-  ev: ( v: any ) => $.is.nullish( v ),
-  ClassNames: ( type: StyleType,params: amotifyUniStyleParams ) => {
-    let CLS = [];
-
-    let {
-      gap,
-
-      display: disp,
-      position,
-      overflow,
-      fontColor,fontSize,fontWeight,
-      backgroundColor: bgc,
-      textAlign,
-      boxShadow,
-
-      margin: mrg,
-      marginTop: mrgT,
-      marginRight: mrgR,
-      marginBottom: mrgB,
-      marginLeft: mrgL,
-
-      padding: pd,
-      paddingTop: pdT,
-      paddingRight: pdR,
-      paddingBottom: pdB,
-      paddingLeft: pdL,
-
-      top: T,
-      right: R,
-      bottom: B,
-      left: L,
-
-      border: b,
-      borderTop: bT,
-      borderRight: bR,
-      borderBottom: bB,
-      borderLeft: bL,
-
-      borderWidth: bWidth,
-      // borderTopWidth: bTWidth,
-      // borderRightWidth: bRWidth,
-      // borderBottomWidth: bBWidth,
-      // borderLeftWidth: bLWidth,
-
-      borderColor: bColor,
-      // borderTopColor: bTColor,
-      // borderRightColor: bRColor,
-      // borderBottomColor: bBColor,
-      // borderLeftColor: bLColor,
-
-      borderStyle: bStyle,
-      // borderTopStyle: bTStyle,
-      // borderRightStyle: bRStyle,
-      // borderBottomStyle: bBStyle,
-      // borderLeftStyle: bLStyle,
-
-      borderRadius: br,
-      borderTopLeftRadius: brTL,
-      borderTopRightRadius: brTR,
-      borderBottomLeftRadius: brBL,
-      borderBottomRightRadius: brBR,
-
-
-
-      flexSizing,
-      flexWrap,
-      flexType,
-      flexChilds,
-      flexGrid,
-      horizontalAlign,
-      verticalAlign,
-
-      transition,
-
-      gridCenter,
-      gridCols,
-      maxHeight,minHeight,maxWidth,minWidth,
-      width,height,
-      unitHeight,unitWidth,
-
-      opacity,
-
-      ...others
-    } = params;
-
-    {
-      FNs.ev( disp ) || CLS.push( 'dsp' + disp );
-
-      if ( overflow ) {
-        let arr = $.flatArray( overflow );
-        CLS.push( 'ovfl-x-' + arr[ 0 ] );
-        CLS.push( 'ovfl-y-' + ( arr[ 1 ] || arr[ 0 ] ) );
-      }
-
-      FNs.ev( position ) || ( CLS.push( 'ps' + position ) );
-      FNs.ev( textAlign ) || ( CLS.push( 'txalg' + textAlign ) );
-
-      FNs.ev( fontColor ) || ( CLS.push( 'ftcl' + String( fontColor )?.replace( /\..*/,'' ) ) );
-
-      FNs.ev( fontSize ) || ( CLS.push( 'ftsz' + String( fontSize )?.replace( /\..*/,'' ) ) );
-      FNs.ev( fontWeight ) || ( CLS.push( 'ftwt' + fontWeight?.replace( /\..*/,'' ) ) );
-
-      FNs.ev( bgc ) || CLS.push( 'bgc' + String( bgc )?.replace( /\..*/,'' ) );
-
-      FNs.ev( boxShadow ) || ( CLS.push( 'bs' + boxShadow ) );
-
-      let _mrgT,_mrgR,_mrgB,_mrgL;
-      if ( $.is.exist( mrg ) ) {
-        if ( $.is.array( mrg ) ) {
-          if ( mrg.length == 2 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = [ ...mrg,...mrg ];
-          else if ( mrg.length == 4 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = mrg;
-        } else _mrgT = _mrgR = _mrgB = _mrgL = mrg;
-        mrgT = mrgT ?? _mrgT;
-        mrgR = mrgR ?? _mrgR;
-        mrgB = mrgB ?? _mrgB;
-        mrgL = mrgL ?? _mrgL;
-      }
-      FNs.ev( mrgT ) || ( CLS.push( 'mrgt' + mrgT ) );
-      FNs.ev( mrgR ) || ( CLS.push( 'mrgr' + mrgR ) );
-      FNs.ev( mrgB ) || ( CLS.push( 'mrgb' + mrgB ) );
-      FNs.ev( mrgL ) || ( CLS.push( 'mrgl' + mrgL ) );
-
-      let _pdT,_pdR,_pdB,_pdL;
-      if ( $.is.exist( pd ) ) {
-        if ( $.is.array( pd ) ) {
-          if ( pd.length == 2 ) [ _pdT,_pdR,_pdB,_pdL ] = [ ...pd,...pd ];
-          else if ( pd.length == 4 ) [ _pdT,_pdR,_pdB,_pdL ] = pd;
-        } else _pdT = _pdR = _pdB = _pdL = pd;
-        pdT = pdT ?? _pdT;
-        pdR = pdR ?? _pdR;
-        pdB = pdB ?? _pdB;
-        pdL = pdL ?? _pdL;
-      }
-      FNs.ev( pdT ) || ( CLS.push( 'pdt' + pdT ) );
-      FNs.ev( pdR ) || ( CLS.push( 'pdr' + pdR ) );
-      FNs.ev( pdB ) || ( CLS.push( 'pdb' + pdB ) );
-      FNs.ev( pdL ) || ( CLS.push( 'pdl' + pdL ) );
-
-      FNs.ev( T ) || ( CLS.push( 'pstt' + T ) );
-      FNs.ev( R ) || ( CLS.push( 'pstr' + R ) );
-      FNs.ev( B ) || ( CLS.push( 'pstb' + B ) );
-      FNs.ev( L ) || ( CLS.push( 'pstl' + L ) );
-
-      {
-        {
-          if ( $.is.exist( b ) ) {
-            bT = bT ?? b;
-            bR = bR ?? b;
-            bB = bB ?? b;
-            bL = bL ?? b;
-          }
-          if ( $.is.boolean( bT ) ) bT = [ 'unset','2.normal' ][ Number( bT ) ] as amotify.UniStyles.Borders.BorderParams;
-          if ( $.is.boolean( bR ) ) bR = [ 'unset','2.normal' ][ Number( bR ) ] as amotify.UniStyles.Borders.BorderParams;
-          if ( $.is.boolean( bB ) ) bB = [ 'unset','2.normal' ][ Number( bB ) ] as amotify.UniStyles.Borders.BorderParams;
-          if ( $.is.boolean( bL ) ) bL = [ 'unset','2.normal' ][ Number( bL ) ] as amotify.UniStyles.Borders.BorderParams;
-          FNs.ev( bT ) || ( CLS.push( 'b_t_ss' + String( bT )?.replace( /\..*/,'' ) ) );
-          FNs.ev( bR ) || ( CLS.push( 'b_r_ss' + String( bR )?.replace( /\..*/,'' ) ) );
-          FNs.ev( bB ) || ( CLS.push( 'b_b_ss' + String( bB )?.replace( /\..*/,'' ) ) );
-          FNs.ev( bL ) || ( CLS.push( 'b_l_ss' + String( bL )?.replace( /\..*/,'' ) ) );
-        }
-        if ( $.is.exist( bWidth ) ) CLS.push( 'b_wth' + String( bWidth ) );
-        if ( $.is.exist( bColor ) ) CLS.push( 'b_cl' + String( bColor ) );
-        if ( $.is.exist( bStyle ) ) CLS.push( 'b_st' + String( bStyle ) );
-
-        {
-          let _brTL,_brTR,_brBL,_brBR;
-          if ( $.is.exist( br ) ) {
-            if ( $.is.array( br ) ) {
-              if ( br.length == 4 ) [ _brTL,_brTR,_brBR,_brBL ] = br;
-            } else {
-              _brTL = _brTR = _brBL = _brBR = br;
-            }
-            brTL = brTL ?? _brTL;
-            brTR = brTR ?? _brTR;
-            brBL = brBL ?? _brBL;
-            brBR = brBR ?? _brBR;
-          }
-        }
-        FNs.ev( brTL ) || ( CLS.push( 'br_tl' + FNs.toConcreteBorderRadius( brTL ) ) );
-        FNs.ev( brTR ) || ( CLS.push( 'br_tr' + FNs.toConcreteBorderRadius( brTR ) ) );
-        FNs.ev( brBL ) || ( CLS.push( 'br_bl' + FNs.toConcreteBorderRadius( brBL ) ) );
-        FNs.ev( brBR ) || ( CLS.push( 'br_br' + FNs.toConcreteBorderRadius( brBR ) ) );
-      }
-
-      FNs.ev( opacity ) || ( CLS.push( 'op' + opacity ) );
-
-      if ( $.is.exist( gap ) ) {
-        let gapRow,gapCol;
-        if ( $.is.array( gap ) ) gapRow = gap[ 0 ],gapCol = gap[ 1 ];
-        else gapRow = gapCol = gap;
-        CLS.push( ...[ 'gapRow' + gapRow,'gapCol' + gapCol ] );
-      }
-
-      FNs.ev( flexSizing ) || ( CLS.push( 'flsz' + flexSizing ) );
-      FNs.ev( flexWrap ) || ( CLS.push( 'flwrp' + flexWrap ) );
-      FNs.ev( flexType ) || ( CLS.push( 'fltyp' + flexType ) );
-      FNs.ev( flexChilds ) || ( CLS.push( 'flchld' + flexChilds ) );
-      FNs.ev( flexGrid ) || ( CLS.push( 'flgrid' + flexGrid ) );
-      FNs.ev( verticalAlign ) || ( CLS.push( 'flvrt' + verticalAlign ) );
-      FNs.ev( horizontalAlign ) || ( CLS.push( 'flhrz' + horizontalAlign ) );
-
-      FNs.ev( gridCenter ) || ( CLS.push( 'grcnt' + gridCenter ) );
-      FNs.ev( gridCols ) || ( CLS.push( 'grcol' + gridCols ) );
-
-      FNs.ev( height ) || ( CLS.push( 'hgt' + height ) );
-      FNs.ev( width ) || ( CLS.push( 'wdt' + width ) );
-
-      FNs.ev( unitHeight ) || ( CLS.push( 'unthgt' + unitHeight ) );
-      FNs.ev( unitWidth ) || ( CLS.push( 'untwdt' + unitWidth ) );
-
-      FNs.ev( transition ) || ( CLS.push( 'trnst' + transition ) );
-
-      FNs.ev( maxHeight ) || ( CLS.push( 'maxh' + maxHeight ) );
-      FNs.ev( minHeight ) || ( CLS.push( 'minh' + minHeight ) );
-      FNs.ev( maxWidth ) || ( CLS.push( 'maxw' + maxWidth ) );
-      FNs.ev( minWidth ) || ( CLS.push( 'minw' + minWidth ) );
-    }
-
-    return {
-      otherParams: others,
-      className: CLS.length ? type + CLS.join( ' ' + type ) : ''
-    }
-  }
-}
-
-export const ReadStyleSet: amotify.glob.StyleConverter.ReadStyleSet = ( rawParams ) => {
-  let params: amotifyBasicElement = { ...rawParams } as any;
-  let {
-    gradients,
-    ssCardBox,
-    ssSphere,
-    ssSquare,
-    ssPushable,
-    ssAbsoluteCovered,
-    ssTextEllipsis,
-    flexCenter,
-    flexNewLine,
-
-    isBoldFont,
-    isRounded,
-    ...ReturnParams
-  } = params;
-
-  if ( gradients ) {
-    let {
-      deg,
-      colors
-    } = gradients;
-
-    ReturnParams = {
-      ...ReturnParams,
-      freeCSS: {
-        background: `linear-gradient(${ deg }deg,${ colors.join( ',' ) })`,
-      }
-    }
-  }
-  if ( ssCardBox ) {
-    if ( ssCardBox === true ) {
-      ssCardBox = 'border';
-      if ( amotify.config.tone == 'flat' ) ssCardBox = 'cloud';
-    }
-
-    let exStyles: amotifyUniStyleParams = {
-      backgroundColor: '1.layer.base',
-      borderRadius: '1.tone.primary',
-      boxShadow: 0,
-      freeCSS: {
-        zIndex: 1
-      }
-    }
-
-    if ( ssCardBox == 'border' ) {
-      exStyles.border = true;
-    } else if ( ssCardBox == 'layer' ) {
-      exStyles.backgroundColor = '1.layer.base';
-    } else if ( ssCardBox == 'cloud' ) {
-      exStyles.backgroundColor = 'cloud';
-    } else if ( ssCardBox == 'shadow' ) {
-      exStyles.boxShadow = 1;
-    }
-
-    if ( [ 'dim','dark' ].includes( amotify.config.darkMode ) ) exStyles.boxShadow = 2;
-    ReturnParams = $.deepMerge( exStyles,ReturnParams );
-  }
-  if ( ssSphere ) {
-    flexCenter = flexCenter ?? true;
-    ReturnParams = {
-      padding: 0,
-      unitWidth: ssSphere,
-      unitHeight: ssSphere,
-      borderRadius: 'sphere',
-      flexSizing: 'none',
-      ...ReturnParams,
-    }
-  }
-  if ( ssSquare ) {
-    flexCenter = flexCenter ?? true;
-    ReturnParams = {
-      padding: 0,
-      unitWidth: ssSquare,
-      unitHeight: ssSquare,
-      flexSizing: 'none',
-      ...ReturnParams,
-    }
-  }
-
-  !ssPushable || ( ReturnParams = {
-    transition: 'middle',
-    ...ReturnParams,
-    className: [
-      ReturnParams.className,
-      'ssPushable'
-    ].join( ' ' )
-  } );
-
-  !ssAbsoluteCovered || ( ReturnParams = {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    ...ReturnParams
-  } );
-  !ssTextEllipsis || ( ReturnParams = {
-    overflow: 'hidden',
-    ...ReturnParams,
-    freeCSS: {
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      ...ReturnParams.freeCSS
-    }
-  } );
-  !flexNewLine || ( ReturnParams = {
-    width: 1,
-    flexSizing: 'none',
-    ...ReturnParams
-  } )
-  !flexCenter || ( ReturnParams = {
-    display: 'flex',
-    horizontalAlign: 'center',
-    verticalAlign: 'center',
-    ...ReturnParams
-  } );
-  !isBoldFont || ( ReturnParams = {
-    ...ReturnParams,
-    fontWeight: '3.bold',
-  } );
-  !isRounded || ( ReturnParams = {
-    ...ReturnParams,
-    borderRadius: 'sphere'
-  } );
-
-  return ReturnParams as any;
-}
-export const ToClassName: amotify.glob.StyleConverter.ToClassName = ( rawParams ) => {
-  let params = ReadStyleSet( rawParams ) as amotifyBasicElement;
-
-  let {
-    componentID,
-    UnderBreakPointStyles = {},
-    hoverStyles = {},
-    focusStyles = {},
-    activeStyles = {},
-
-    className = '',
-
-    freeCSS = {},
-
-    ssEffectsOnActive,
-    ssLastChildLossBorder,
-    ...others
-  } = params;
-
-  let ClassNames = [ className ];
-
-  if ( ssLastChildLossBorder ) {
-    ClassNames.push( 'ssLastChildLossBorder_' + ssLastChildLossBorder );
-  }
-
-  if ( ssEffectsOnActive ) {
-    ssEffectsOnActive = $.flatArray( ssEffectsOnActive );
-    for ( let effect of ssEffectsOnActive as any[] ) ClassNames.push( ...[ 'eff_' + effect,'eff_' + effect.split( '.' )[ 0 ] ] );
-  }
-
-  {
-    let result = FNs.ClassNames( '¥',others );
-
-    ClassNames.push( result.className );
-    others = result.otherParams;
-  }
-  if ( UnderBreakPointStyles ) ClassNames.push( FNs.ClassNames( '¥bk',UnderBreakPointStyles ).className );
-  if ( hoverStyles ) ClassNames.push( FNs.ClassNames( '¥_h',hoverStyles ).className );
-  if ( focusStyles ) ClassNames.push( FNs.ClassNames( '¥_f',focusStyles ).className );
-  if ( activeStyles ) ClassNames.push( FNs.ClassNames( '¥_a',activeStyles ).className );
-
-  let states = { ...others } as any
-  if ( freeCSS ) states.style = {
-    ...freeCSS,
-    ...states.style
-  }
-
-  if ( componentID || states[ 'data-component-id' ] ) {
-    states[ 'data-component-id' ] = states[ 'data-component-id' ] || componentID;
-  }
-
-  if ( ClassNames.length ) {
-    states.className = ClassNames.join( ' ' )
-      .trim()
-      .replace( /%/ig,'P' )
-      .replace( /\d+px/ig,'PIX' )
-      .replace( /\s+/ig,' ' )
-      .replace( /\//ig,'_' )
-      .replace( /\./ig,'-' );
-  }
-  return states;
-}

package/src/Molecules/@export.tsx

@@ -1,95 +0,0 @@
-import {
-  Span,
-  Box,
-  Flex
-} from '@atoms';
-import { List } from './List';
-import { Accordion } from './Accordion/parts';
-import { LinkifyText } from './LinkifyText/parts';
-
-const Text = {
-  Title: ( params: amotify.atoms.BoxInput ) => ( <Box
-    fontSize='6.title'
-    fontWeight='3.bold'
-    { ...params }
-  /> ),
-  SubTitle: ( params: amotify.atoms.BoxInput ) => ( <Box
-    fontSize='5.subTitle'
-    fontWeight='3.bold'
-    { ...params }
-  /> ),
-  ThirdTitle: ( params: amotify.atoms.BoxInput ) => ( <Box
-    fontSize='4.thirdTitle'
-    fontWeight='3.bold'
-    { ...params }
-  /> ),
-  Paragraph: ( params: amotify.atoms.BoxInput ) => ( <Box
-    fontSize='3.paragraph'
-    fontWeight='3.bold'
-    { ...params }
-  /> ),
-  Normal: ( params: amotify.atoms.BoxInput ) => ( <Box
-    { ...params }
-  /> ),
-  Description: ( params: amotify.atoms.BoxInput ) => ( <Box
-    { ...params }
-    freeCSS={ {
-      whiteSpace: 'pre-wrap',
-      ...params.freeCSS
-    } }
-  /> ),
-  Supplement: ( params: amotify.atoms.BoxInput ) => ( <Box
-    fontSize='1.mini'
-    { ...params }
-  /> ),
-  NowrapSpan: ( params: amotify.atoms.SpanProps ) => ( <Span
-    { ...params }
-    freeCSS={ {
-      whiteSpace: 'nowrap',
-      ...params.freeCSS
-    } }
-  /> )
-}
-const Row = {
-  Center: ( params: amotify.atoms.FlexProps ) => ( <Flex
-    horizontalAlign='center'
-    verticalAlign='center'
-    flexWrap={ false }
-    gap={ 1 }
-    { ...params }
-  /> ),
-  Left: ( params: amotify.atoms.FlexProps ) => ( <Flex
-    horizontalAlign='left'
-    verticalAlign='center'
-    flexWrap={ false }
-    gap={ 1 }
-    { ...params }
-  /> ),
-  Right: ( params: amotify.atoms.FlexProps ) => ( <Flex
-    horizontalAlign='right'
-    verticalAlign='center'
-    flexWrap={ false }
-    gap={ 1 }
-    { ...params }
-  /> ),
-  Separate: ( params: amotify.atoms.FlexProps ) => ( <Flex
-    horizontalAlign='between'
-    verticalAlign='center'
-    flexWrap={ false }
-    gap={ 1 }
-    { ...params }
-  /> ),
-}
-const Column = ( params: amotify.atoms.FlexProps ) => ( <Flex
-  flexType='col'
-  gap={ 1 }
-  { ...params }
-/> );
-export {
-  List,
-  Accordion,
-  LinkifyText,
-  Text,
-  Column,
-  Row
-}

package/src/Molecules/Accordion/parts.tsx

@@ -1,146 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global';
-import {
-  Box
-} from '@atoms';
-const {
-  useEffect,
-  useState,
-} = React;
-
-import style from './style.module.scss';
-
-const Component: FNC<amotify.mols.Accordion.Params> = ( params ) => {
-  let {
-    accordionID = '',
-    slideAnimation = 'fast',
-    open = false,
-    ...others
-  } = params;
-
-  let [ val_wrapID ] = useState( $.uuidGen() );
-  let [ val_contentID ] = useState( $.uuidGen() );
-  let [ val_open,set_open ] = useState( open );
-
-  if ( val_open != open ) set_open( open );
-
-  let Query = '[data-accordion-content-id="' + val_contentID + '"]';
-
-  const mounted = React.useRef( false );
-  useEffect( () => {
-    let Content = $( Query )[ 0 ];
-    if ( Content ) {
-      let contentHeight = Content.offsetHeight;
-      let transitionTime = 0;
-      if ( slideAnimation == 'fast' ) {
-        transitionTime = contentHeight / 1000;
-        transitionTime = Math.max( transitionTime,.2 );
-      } else if ( slideAnimation == 'slow' ) {
-        transitionTime = contentHeight / 300;
-      }
-      $( '#' + val_wrapID ).css( {
-        transition: transitionTime + 's'
-      } )
-    }
-  },[] );
-  useEffect( () => {
-    let Wrap = $( '#' + val_wrapID );
-    let Content = $( Query )[ 0 ];
-    if ( mounted.current ) {
-      if ( Content ) {
-        let contentHeight = Content.offsetHeight;
-        if ( $.is.exist( contentHeight ) ) {
-          if ( val_open ) {
-            Wrap.css( {
-              maxHeight: ( contentHeight + 1 ) + 'px',
-            } ).await( 200 ).css( {
-              maxHeight: 'unset',
-              overflow: ( params.overflow as any ) || 'unset'
-            } );
-          } else {
-            Wrap.css( {
-              maxHeight: ( contentHeight + 1 ) + 'px',
-            } ).await( 100 ).css( {
-              maxHeight: 0 + 'px',
-              overflow: 'hidden'
-            } );
-          }
-        }
-      }
-    } else {
-      mounted.current = true;
-      if ( Content ) {
-        let contentHeight = Content.offsetHeight;
-        if ( $.is.exist( contentHeight ) ) {
-          if ( val_open ) {
-            Wrap.css( {
-              maxHeight: ( contentHeight + 1 ) + 'px',
-            } ).await( 200 ).css( {
-              maxHeight: 'unset',
-              overflow: ( params.overflow as any ) || 'unset'
-            } );
-          } else {
-            Wrap
-              .css( {
-                maxHeight: 0 + 'px',
-                overflow: 'hidden'
-              } );
-          }
-        }
-      }
-    }
-  },[ val_open ] );
-
-  if ( accordionID ) {
-    useStore.set( {
-      key: 'Accordion-' + accordionID,
-      value: {
-        open: () => {
-          set_open( true );
-          params.open = true;
-        },
-        close: () => {
-          set_open( false );
-          params.open = false;
-        },
-        toggle: () => {
-          set_open( !val_open );
-          params.open = !val_open;
-        }
-      }
-    } );
-  }
-
-  return ( <Box
-    className={ [
-      style.Wrap,
-      style[ 'Open_' + val_open ]
-    ].join( ' ' ) }
-    id={ val_wrapID }
-  >
-    <Box
-      data-accordion-content-id={ val_contentID }
-      { ...others }
-    />
-  </Box> );
-}
-
-const Accordion: amotify.mols.Accordion.SetParams = Component as any
-Accordion.fn = {
-  open: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id );
-    !component || component.open();
-  },
-  close: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id );
-    !component || component.close();
-  },
-  toggle: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id );
-    !component || component.toggle();
-  }
-}
-
-export { Accordion }

package/src/Molecules/Accordion/style.module.scss

@@ -1,13 +0,0 @@
-@use '@uniVar' as *;
-.Wrap {
-  &.Open_true {
-    opacity: 1;
-  }
-  &.Open_false {
-    opacity: 0 !important;
-    pointer-events: none !important;
-    * {
-      pointer-events: none !important;
-    }
-  }
-}