forstok-ui-lib 5.13.18 → 6.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.13.18",
+  "version": "6.0.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -48,7 +48,6 @@
     "react": "^19.0.0",
     "react-content-loader": "^7.0.2",
     "react-datepicker": "^8.0.0",
-    "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
     "react-select": "^5.10.0",
     "rollup-plugin-dts": "^6.1.1",

package/src/assets/images/icons/check-blue.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='100%' height='100%'><path fill='none' stroke='#7eb6ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L7 17l-5-5m20-2l-7.5 7.5L13 16'/></svg>

package/src/assets/images/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='100%' height='100%'><path fill='none' stroke='#60646c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L7 17l-5-5m20-2l-7.5 7.5L13 16'/></svg>

package/src/components/icon/styles.ts

@@ -7,6 +7,8 @@ import IconBack from '../../assets/images/icons/back.svg';
 import IconDashboardLeftNav from '../../assets/images/navs/left/dashboard.svg';
 import IconProductLeftNav from '../../assets/images/navs/left/products.svg';
 import IconWarningChat from '../../assets/images/icons/warning-agent.svg';
+import IconCheckChat from '../../assets/images/icons/check.svg';
+import IconCheckChatBlue from '../../assets/images/icons/check-blue.svg';
 
 const NotificationStyled = css`
   width: 44px;
@@ -299,6 +301,20 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break;
+    case 'check-chat': 
+      style += `
+        &:before { 
+          content: url(${IconCheckChat}); 
+        }
+      `
+      break; 
+    case 'check-chat-blue': 
+      style += `
+        &:before { 
+          content: url(${IconCheckChatBlue}); 
+        }
+      `
+      break;   
     default: 
       break;
   }

package/src/components/index.ts

@@ -8,7 +8,6 @@ export { default as ButtonComponent } from './button';
 export { default as LabelComponent } from './label';
 export { default as IconComponent } from './icon';
 export { default as LoadingComponent } from './loading';
-export { default as DropDownComponent } from './dropdown';
 export { default as MessageComponent } from './message';
 export { default as MessageQuestionComponent } from './message/question'; 
 export { default as PopupComponent } from './popup';
@@ -26,9 +25,7 @@ export { default as RadioComponent } from './radio';
 export { default as SwitchComponent } from './switch';
 export { default as MasterTableComponent } from './masterTable';
 export { default as ListComponent } from './list';
-export { default as ListTableComponent } from './listTable';
 
-export * from './dropdown/typed';
 export * from './message/typed';
 export * from './popup/typed';
 export * from './select/typed';

package/src/typeds/shares.typed.ts

@@ -1,11 +1,11 @@
 import { Dispatch, JSX } from 'react';
 import { TChangeEvent, TMouseEvent, TObject, TPage, TState } from './base.typed';
-import { TCloseDropdownFunction } from '../components/dropdown/typed';
 import { TCustomField, TAutoCopy } from '../components/masterTable/typed';
 import { TMessageFunction, TMessageQuestionFunction } from '../components/message/typed';
 import { TPopupFunction, TPopupOpenFunction } from '../components/popup/typed';
 import { TOption } from '../components/select/typed';
 
+export type TCloseDropdownFunction = (currentTarget: EventTarget & HTMLElement) => void;
 export type TUser = {
   profile_id: number,
   profile_name: string,

package/src/components/dropdown/index.tsx

@@ -1,261 +0,0 @@
-import { useEffect, useRef, isValidElement } from 'react';
-import ReactPortalComponent from '../portal';
-import { DropDownContainer, DropDownTitle, DropDownSubTitle, DropDownWrapper, DropDownOverlayWrapper, DropDownControl, DropDownBody, DropDownAction, DropdownControlWrapper, DropdownPortalContainer } from './styles';
-import type { TMouseEvent } from '../../typeds/base.typed';
-import type { TDropdown } from './typed';
-
-const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externalMinWidth, $internalWidth, $area, $openPosition, $placement, $top, onClick, $alias, type, portalId, $bottom, ...props }: TDropdown) => {
-  const buttonRef = useRef<HTMLElement>(null);
-
-  const evScrollDropdown = () => {
-    const containerEl = document.getElementsByClassName('_refContainer is-shown')[0] as HTMLElement;
-    if (containerEl) {
-      const offsetPos = containerEl.getBoundingClientRect();
-      const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-      if (portalContainerRef) {
-        const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
-        const value = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width;
-        portalContainerRef.style.left = (value > 0 ? value : offsetPos.left) + 'px';
-        portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
-      }
-    }
-  }
-
-  const evResetDropdown = () => {
-    const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
-    const bodyEl = document.getElementsByTagName('BODY')[0] as HTMLBodyElement;
-    if (containerRef.length) {
-      bodyEl.classList.remove('is-immuned');
-      for (let i = 0; i < containerRef.length; i++) {
-        const overlayEl = containerRef[i].querySelector(`._refDropdownOverlay`) as HTMLDivElement;
-        overlayEl.style.display = 'none';
-        containerRef[i].classList.remove('is-shown');
-      }
-    } 
-    const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
-    refScrollContainerEl && refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
-    setTimeout(() => {
-      if (portalId) {
-        const portalContainerRef = document.getElementsByClassName('_refDropdownPortal is-shown') as HTMLCollectionOf<HTMLElement>;
-        if (portalContainerRef.length) {
-          for (let i = 0; i < portalContainerRef.length; i++) {
-            portalContainerRef[i].style.left = '0';
-            portalContainerRef[i].style.top = '0';
-            portalContainerRef[i].classList.remove('is-shown');
-          }
-        } 
-      }
-    },10);
-  }
-
-  const evToogleDropdown: TMouseEvent = e => {
-    const currRefEl = buttonRef.current;
-    if (currRefEl) {
-      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`); 
-      if (!buttonEl) {
-        return;
-      }
-      const containerEl = buttonEl.closest('._refContainer') as HTMLElement;
-      const bodyEl = document.getElementsByTagName('BODY')[0] as HTMLBodyElement;
-      if (containerEl) {
-        const overlayEl = containerEl.querySelector(`._refDropdownOverlay`) as HTMLDivElement;
-        const isCurOpen = containerEl.classList.contains('is-shown');
-        const offsetPos = containerEl.getBoundingClientRect();
-
-        if (!isCurOpen) {
-          evResetDropdown();  
-          overlayEl.style.display = 'block';
-          bodyEl.classList.add('is-immuned');
-          containerEl.classList.add('is-shown');
-          setTimeout(() => {
-            if (portalId) {
-              const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-              const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
-              const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
-              if (portalContainerRef) {
-                if (offsetPos) {
-                  if (wrapperRef) {
-                    setTimeout(() => {
-                      wrapperRef.style.right = 'auto';
-                      const value = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width;
-                      portalContainerRef.style.left = (value > 0 ? value : offsetPos.left) + 'px';
-                      portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
-                      portalContainerRef.style.zIndex = '8';
-                      refScrollContainerEl && refScrollContainerEl.addEventListener('scroll', evScrollDropdown, true);
-                    }, 10);
-                  } else {
-                    portalContainerRef.style.left = offsetPos.left + ((parseInt($internalWidth || '0') + offsetPos.width) / 2) + 'px'; 
-                    portalContainerRef.style.top = (offsetPos.top + offsetPos.height) + 'px'; 
-                  }
-                }
-                portalContainerRef.classList.add('is-shown');
-              }
-            }
-          }, 10);
-          onClick && onClick(e);
-        } else {
-          overlayEl.style.display = 'none';
-          bodyEl.classList.remove('is-immuned');
-          containerEl.classList.remove('is-shown');
-          setTimeout(() => {
-            if (portalId) {
-              const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-              const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
-              const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
-              if (portalContainerRef) {
-                portalContainerRef.classList.remove('is-shown');
-                portalContainerRef.style.left = '0px';
-                portalContainerRef.style.top = '0px';
-                if (wrapperRef) {
-                  refScrollContainerEl && refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
-                }
-              }
-            }
-          }, 10);
-        }
-      }
-    }
-  }
-
-  const evMouseEnter: TMouseEvent = e => {
-    const currRefEl = buttonRef.current;
-    if (currRefEl) {
-      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`);
-      if (!buttonEl) {
-        return;
-      }
-      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal`) as NodeListOf<HTMLElement>;
-      for (const portalContainerRef of portalContainerRefs) {
-        portalContainerRef.classList.remove('is-shown');
-        portalContainerRef.style.left = '0';
-        portalContainerRef.style.top = '0';
-      }
-      const containerEl = buttonEl.closest('._refContainer') as HTMLElement;  
-      if (containerEl) {
-        const offsetPos = containerEl.getBoundingClientRect();
-        const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-        if (portalContainerRef) {
-          if (offsetPos) {
-            portalContainerRef.style.left = offsetPos.left + ((parseInt($internalWidth || '0') + offsetPos.width) / 2) + 'px';
-            let currentTop = offsetPos.top + offsetPos.height;
-            const dropdownWrapperEl = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
-            if (dropdownWrapperEl) {
-              dropdownWrapperEl.style.display = 'block';
-              if ((currentTop + dropdownWrapperEl.clientHeight) >= document.body.clientHeight) {
-                currentTop = offsetPos.top - dropdownWrapperEl.clientHeight - 10;
-              }
-            }
-            portalContainerRef.style.top = currentTop + 'px';
-          }
-          portalContainerRef.classList.add('is-shown'); 
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    setTimeout(() => {
-      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal._refHover`) as NodeListOf<HTMLElement>;
-      for (let portalContainerRef of portalContainerRefs) {
-        portalContainerRef && portalContainerRef.addEventListener('mouseenter', (event) => {
-          const el = event.target as HTMLElement;
-          el.classList.add('is-shown');   
-          el.classList.add('unhiddenable');
-        })
-        portalContainerRef && portalContainerRef.addEventListener('mouseleave', (event) => {
-          const el = event.target as HTMLElement; 
-          el.classList.remove('is-shown');
-          el.classList.remove('unhiddenable');
-          el.style.left = '0';
-          el.style.top = '0';
-        })
-      }
-    }, 1);
-    return () => {
-      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal._refHover`) as NodeListOf<HTMLElement>;
-      for (let portalContainerRef of portalContainerRefs) {
-        portalContainerRef && portalContainerRef.removeEventListener('mouseenter', (event) => {
-          const el = event.target as HTMLElement;
-          el.classList.add('is-shown');
-          el.classList.add('unhiddenable');
-        }, true)
-        portalContainerRef && portalContainerRef.removeEventListener('mouseleave', (event) => {
-          const el = event.target as HTMLElement;
-          el.classList.remove('is-shown');
-          el.classList.remove('unhiddenable');
-          el.style.left = '0';
-          el.style.top = '0';
-        }, true)
-      }
-    };
-  }, [portalId])
-
-  const evMouseLeave: TMouseEvent = e => {
-    const currRefEl = buttonRef.current;
-    if (currRefEl) {
-      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`); 
-      if (!buttonEl) {
-        return;
-      }
-      setTimeout(() => {
-        const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-        if (portalContainerRef && !portalContainerRef.classList.contains('unhiddenable')) {
-          portalContainerRef.classList.remove('is-shown');
-          portalContainerRef.style.left = '0';
-          portalContainerRef.style.top = '0';
-        }
-      }, 150);
-    }
-  }
-
-  const evCloseDropdown = () => {
-    evResetDropdown();
-  }
-
-  const DropDownSubTitleEl = (subTitle) ? <DropDownSubTitle>{subTitle}</DropDownSubTitle> : null;
-  const DropDownTitleEl = (title) ? <DropDownTitle>{title} {DropDownSubTitleEl}</DropDownTitle> : null;
-  const ControlChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'control') : null);
-  const DropDownControlEl = (ControlChildrenFilter && isValidElement(ControlChildrenFilter[0])) ? 
-    type === 'hover' ? (
-      <DropdownControlWrapper>
-        <DropDownControl className='_refDropdownControl' {...portalId && { onMouseEnter: evMouseEnter, onMouseLeave: evMouseLeave }}>{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
-        <DropDownControl className='_refDropdownControlMobile' ref={buttonRef} onClick={evToogleDropdown}>{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
-      </DropdownControlWrapper>
-    ) : <DropDownControl ref={buttonRef} onClick={evToogleDropdown} >{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
-  : null
-  const BodyChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'body') : null)
-  const DropDownBodyEl = (BodyChildrenFilter && isValidElement(BodyChildrenFilter[0])) ? <DropDownBody $area={$area}>{(BodyChildrenFilter[0].props as any).children}</DropDownBody> : null
-  const ActionChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'action') : null)
-  const DropDownActionEl = (ActionChildrenFilter && isValidElement(ActionChildrenFilter[0])) ? <DropDownAction $position={(ActionChildrenFilter[0].props as any)['data-position']} className={(ActionChildrenFilter[0].props as any).className}>{(ActionChildrenFilter[0].props as any).children}</DropDownAction> : null
-
-  const dropdownWrapperEl = <DropDownWrapper 
-                              className='_refDropdownWrapper'
-                              {...$internalWidth && { $internalWidth: $internalWidth }}
-                              {...$top && { $top: $top }}
-                              {...$openPosition && { $openPosition: $openPosition }}
-                              {...$placement && { $placement: $placement }}
-                              {...$bottom && { $bottom: $bottom }}>
-                              {DropDownTitleEl}
-                              {DropDownBodyEl}
-                              {DropDownActionEl}
-                            </DropDownWrapper>  
-  return (
-    <DropDownContainer 
-      className={`_refContainer ${type ? `_refContainer${type}` : ``}`}
-      {...$externalWidth && { $externalWidth: $externalWidth }}
-      {...$externalMinWidth && { $externalMinWidth: $externalMinWidth }}
-      {...$area && { $area: $area }}
-      {...$top && { $top: $top }}
-      {...$alias && { $alias: $alias }}
-      {...$openPosition && { $openPosition: $openPosition }}
-      {...$placement && { $placement: $placement }}
-      {...$bottom && { $bottom: $bottom }}
-      {...props}>
-      {DropDownControlEl}
-      <DropDownOverlayWrapper className='_refDropdownOverlay' onClick={evCloseDropdown} />
-      { portalId ? <ReactPortalComponent wrapperId={portalId}><DropdownPortalContainer className={`_refDropdownPortal ${type === 'hover' ? '_refHover' : ''}`}>{dropdownWrapperEl}</DropdownPortalContainer></ReactPortalComponent> : dropdownWrapperEl }
-    </DropDownContainer>
-  );
-}
-
-export default DropDownComponent;

package/src/components/dropdown/styles.ts

@@ -1,333 +0,0 @@
-import styled from 'styled-components';
-import { buttonActiveShadowStyle, buttonActiveStyle } from '../../assets/stylesheets/bases.styles';
-import type { TDropdown } from './typed';
-
-type TDropdownChild = Pick<TDropdown, '$internalWidth' | '$openPosition' | '$placement' | '$bottom' | '$top'>
-type TDropdownParent = Pick<TDropdown, '$openPosition' | '$placement' | '$bottom' | '$top' | '$alias' | '$externalWidth' | '$externalMinWidth' | '$area'>
-
-const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias, $openPosition, $externalWidth, $externalMinWidth, $area }: TDropdownParent) => {
-  const axTop = $top ? (parseInt($top) + 5)+'px' : '40px'
-  let style = `
-    @keyframes droptodown {
-      90% {
-        top: ${axTop}; 
-      }
-      100% { 
-        top: ${$top || '35px'}; 
-      }
-    }
-    @keyframes droptoup {
-      50% { 
-        bottom: -100px; 
-      }
-      50% { 
-        bottom: -50px; 
-      }
-      100% { 
-        bottom: 0px; 
-      }
-    }
-    @keyframes dropgodown {
-      90% { 
-        bottom: ${axTop}; 
-      }
-      100% {
-        bottom: ${$bottom || '35px'}; 
-      }
-    }
-    @keyframse dropgoup {
-      50% { 
-        top: -100px; 
-      }
-      50% { 
-        top: -50px; 
-      }
-      100% { 
-        top: 0px; 
-      }
-    }
-    & ${DropDownWrapper} { 
-      display: none;
-    }
-    &.is-shown {
-      & ${DropDownControl} button { 
-        &._refNoActive {
-          ${buttonActiveShadowStyle}
-        }
-        &:not(._refNoActive) {
-          ${buttonActiveStyle}
-        }
-      }
-      @media only screen and (max-width: 767px) {
-        & ${DropDownWrapper} { 
-          display: grid; 
-          left: 0; 
-          bottom:0; 
-          ${$placement === 'top' ? 'animation: dropgoup .075s;' : 'animation: droptoup .075s;'}
-          overflow-x: hidden; 
-        }
-        & ${DropDownBody} {
-          ._refFilterDropdown a { 
-            text-align: left !important; 
-          }
-        }
-      }
-      @media only screen and (min-width: 768px) {
-        & ${DropDownWrapper} { 
-          display: grid; 
-          ${$placement === 'top' ? `animation: dropgodown .075s linear; bottom: ${$bottom || '35px'}; top: auto;` : `animation: droptodown .075s linear; top: ${$top || '35px'};`}
-          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '100%': $openPosition === 'left' ? '0' : 'auto'};
-        }
-      }
-      @media only screen and (min-width: 1024px) {
-        & ${DropDownWrapper} { 
-          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '30%': $openPosition === 'left' ? '0' : 'auto'}; 
-        }
-      }
-      @media only screen and (min-width: 1280px) {
-        & ${DropDownWrapper} { 
-          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '0': $openPosition === 'left' ? '0' : 'auto'}; 
-        }
-      }
-    }
-  `
-  if ($alias === '_dropdownFilterContainer') {
-    style += `
-      margin-top: 4px;
-      ${DropDownControl} {
-        margin-top: -4px;
-      }
-    `
-  }
-  if ($externalWidth) {
-    style += `
-      width: ${$externalWidth}
-    `
-  }
-  if ($externalMinWidth) {
-    style += `
-      min-width: ${$externalMinWidth}
-    `
-  }
-  if ($area === 'mobile') {
-    style += `
-      @media (min-width: 320px) and (max-width: 480px) {
-        ${DropDownWrapper} { 
-          width: 100%;
-          align-content: start;
-          z-index: 88;
-        }
-      }
-    `
-  }
-  return style
-}
-
-const getDropDownWrapperModifiedStyled = ({ $internalWidth, $openPosition, $placement, $bottom, $top }: TDropdownChild) => {
-  let style = ''
-  if ($internalWidth) {
-    style += `
-      width: ${$internalWidth};
-    `
-  } else {
-    style +=`
-      width: auto;
-      white-space: nowrap;
-      ${DropDownBody} {
-        overflow: unset;
-      }
-    `
-  }
-  if ($openPosition === 'left') {
-    style += `
-      left: 0;
-      right: auto;
-    `
-  } else if ($openPosition === 'center') { 
-    style += `
-      left: 50%;
-      right: auto;
-      transform: translateX(-50%);
-    `
-  }
-  if ($placement === 'top' && $bottom) {
-    style += `
-      top: unset; bottom: ${$bottom}
-    `
-  } else if ($top) {
-    style += `
-      top: ${$top};
-    `
-  }
-  return style
-}
-
-const getDropDownBodyModifiedStyled = ({ $area }:{ $area?: string }) => {
-  let style = ''
-  if ($area === 'promotion') {
-    style += `
-      max-height: 347px;
-      overflow-y: auto;
-    `
-  }
-  return style
-}
-
-const getDropDownActionModifiedStyled = ({ $position }:{ $position?: string }) => {
-  let style = `
-    justify-self: end;
-  `
-  if ($position === 'middle') {
-    style += `
-      width: 100%; 
-      text-align: center;
-    `
-  } else if ($position === 'left') {
-    style += `  
-      width: 100%;
-    `
-  } else if ($position === 'end') {
-    style += `
-      width: 100%; 
-      text-align: end
-    `
-  }
-  return style
-}
-
-export const DropDownWrapper = styled.section<TDropdownChild>`
-  background-color: var(--pri-clr-bg);
-  border: 1px solid var(--sec-clr-ln);
-  position: fixed;
-  width: 100vw; 
-  z-index: 102;
-  display: none;
-  border-radius: 10px 10px 0px 0px;
-  > div, 
-  > section {
-    padding: 1em;
-  }
-  @media only screen and (min-width: 768px) {
-    position: absolute; 
-    min-width: 110px;
-    width: 100vw;
-    top: 40px;
-    right: 0;
-    z-index: 10;
-    border: none;
-    border-radius: .75rem;
-    box-shadow: 0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06);
-    > div, 
-    > section {
-      padding: 1em;
-      ._refFilterDropdown {
-        > * {
-          margin-left: -1em;
-          margin-right: -1em;
-          &:first-child {
-            margin-top: -1em;
-          }
-          &:last-child {
-            margin-bottom: -1em;
-          }
-        }
-        > article {
-          padding: 1em;
-          width: calc(100% + 2em);
-        }
-      }
-    }
-    ${getDropDownWrapperModifiedStyled}
-  }
-`
-
-export const DropDownOverlayWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  background-color: rgba(0, 0, 0, .1);
-  display: none;
-  @media only screen and (min-width: 768px) {
-    display: none !important;
-  }
-`
-
-export const DropDownControl = styled.section`
-  display: block;
-`
-
-export const DropdownControlWrapper = styled.div`
-  ._refDropdownControl {
-    display: none;
-  }
-  ._refDropdownControlMobile {
-    display: block;
-  }
-  @media only screen and (min-width: 1024px) {
-    ._refDropdownControl {
-      display: block;
-    }
-    ._refDropdownControlMobile {
-      display: none;
-    }
-  }
-`
-
-export const DropDownContainer = styled.section<{ $area?: string }>`
-  position: relative;
-  ${getDropDownContainerModifiedStyled}
-  @media only screen and (min-width: 1024px) {
-    &._refContainerhover:hover {
-      ${DropDownWrapper} {
-        display: grid;
-        animation: droptodown .075s linear;
-        top: '35px';
-      }
-    }
-  }
-`
-
-export const DropDownTitle = styled.div`
-  font-weight: 600;
-  border-bottom: 1px solid var(--sec-clr-ln);
-`
-
-export const DropDownSubTitle = styled.p`
-  color: var(--mt-clr);
-  margin-top: 4px;
-  margin-bottom: 0;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: normal;
-`
-
-export const DropDownBody = styled.section<{ $area?: string }>`
-  overflow-y: auto;
-  max-height: 75vh;
-  overflow-x: hidden;
-  @media (max-width: 767px) {
-    max-height: 65vh;
-  }
-  ${getDropDownBodyModifiedStyled}
-`
-
-export const DropDownAction = styled.section<{ $position?: string }>`
-  border-top: 1px solid var(--sec-clr-ln);
-  ${getDropDownActionModifiedStyled}
-`
-
-export const DropdownPortalContainer = styled.div`
-  display: inline-block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  &.is-shown {
-    & ${DropDownWrapper} {
-      display: block;
-    }
-  }
-`