@npm_leadtech/legal-lib-components 7.23.51 → 7.25.0

package/dist/images/componentsSvg/CloseIcon.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface Close24Props {
+    className?: string;
+}
+export declare const CloseIcon: FC<Close24Props>;
+export {};

package/dist/images/componentsSvg/CloseIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CloseIcon = ({ className }) => (_jsx("svg", { className: className, width: 20, height: 20, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z', fill: '#B5BABD' }) }));

package/dist/images/componentsSvg/CloseIcon.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+
+interface Close24Props {
+  className?: string
+}
+
+export const CloseIcon: FC<Close24Props> = ({ className }: Close24Props): React.ReactElement => (
+  <svg className={className} width={20} height={20} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z'
+      fill='#B5BABD'
+    />
+  </svg>
+)

package/dist/images/svg/close-grey-24px.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z" fill="#B5BABD"/>
+</svg>

package/dist/images/svg/search_24px.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.83105 13.9947C6.10828 13.9947 4.65024 13.3981 3.45694 12.2048C2.26364 11.0115 1.66699 9.55346 1.66699 7.83069C1.66699 6.10791 2.26364 4.64987 3.45694 3.45657C4.65024 2.26328 6.10828 1.66663 7.83105 1.66663C9.55383 1.66663 11.0119 2.26328 12.2052 3.45657C13.3985 4.64987 13.9951 6.10791 13.9951 7.83069C13.9951 8.52612 13.8845 9.18204 13.6632 9.79844C13.4419 10.4148 13.1416 10.9601 12.7623 11.4343L18.0729 16.7449C18.2467 16.9187 18.3337 17.14 18.3337 17.4087C18.3337 17.6774 18.2467 17.8986 18.0729 18.0725C17.899 18.2464 17.6777 18.3333 17.4091 18.3333C17.1404 18.3333 16.9191 18.2464 16.7452 18.0725L11.4347 12.7619C10.9605 13.1413 10.4152 13.4416 9.79881 13.6628C9.1824 13.8841 8.52648 13.9947 7.83105 13.9947ZM7.83105 12.0981C9.01645 12.0981 10.024 11.6832 10.8538 10.8534C11.6836 10.0237 12.0985 9.01608 12.0985 7.83069C12.0985 6.64529 11.6836 5.6377 10.8538 4.80793C10.024 3.97815 9.01645 3.56326 7.83105 3.56326C6.64566 3.56326 5.63807 3.97815 4.80829 4.80793C3.97851 5.6377 3.56363 6.64529 3.56363 7.83069C3.56363 9.01608 3.97851 10.0237 4.80829 10.8534C5.63807 11.6832 6.64566 12.0981 7.83105 12.0981Z" fill="#078080"/>
+</svg>

package/dist/src/components/atoms/DropdownInput/DropdownInput.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DropdownInputProps } from './DropdownInputProps.types';
-export declare const DropdownInput: React.FC<DropdownInputProps>;
+export declare const DropdownInput: React.ForwardRefExoticComponent<DropdownInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/atoms/DropdownInput/DropdownInput.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { DropdownInputStyled } from './DropdownInput.styled';
-export const DropdownInput = ({ onChange, results, className = '', name, icon, placeholder }) => {
+export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
     const [searchTerm, setSearchTerm] = useState('');
     const updateInput = (e) => {
         setSearchTerm(e.target.value);
@@ -11,14 +12,15 @@ export const DropdownInput = ({ onChange, results, className = '', name, icon, p
     const resetInput = () => {
         setSearchTerm('');
     };
-    return (_jsxs(DropdownInputStyled, { className: `dropdown_input ${className}`, children: [_jsxs("div", { className: 'dropdown_input__container', children: [_jsx("input", { className: `dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`, type: 'text', name: `dropdown_input_${name}`, placeholder: placeholder, value: searchTerm, onChange: (e) => {
+    return (_jsxs(DropdownInputStyled, { className: `dropdown_input ${className}`, children: [_jsxs("div", { className: 'dropdown_input__container', children: [_jsx("input", { ref: ref, className: `dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`, type: 'text', name: `dropdown_input_${name}`, placeholder: placeholder, value: searchTerm, onChange: (e) => {
                             updateInput(e);
-                        } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, children: [icon &&
+                        } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, onClick: onClose, children: [icon &&
                                 React.cloneElement(icon, {
                                     className: 'dropdown_input__container__icon__main'
                                 }), searchTerm && (_jsx("div", { className: 'icon-cross main-color dropdown_input__container__icon__clear', onClick: () => {
                                     resetInput();
                                 }, onKeyDown: () => {
                                     resetInput();
-                                } }))] })] }), searchTerm && !!results?.length && _jsx("ul", { className: 'dropdown_input__results', children: results })] }));
-};
+                                } }))] })] }), searchTerm && !!results?.length && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'dropdown_input__separator' }), _jsx("ul", { className: 'dropdown_input__results', children: results })] }))] }));
+});
+DropdownInput.displayName = 'DropdownInput';

package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.js

@@ -2,32 +2,14 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const DropdownInputStyled = styled.div `
   position: relative;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+  padding: 1.5rem;
 
-  a {
-    text-decoration: none;
+  @media ${device['landscape-tablets']} {
+    padding: 16px 24px;
   }
 
-  &:focus-within {
-    @media ${device['landscape-tablets']} {
-      .dropdown_input__container {
-        border-bottom: 2px var(--neutral-neutral-4) solid;
-      }
-
-      .dropdown_input__results {
-        opacity: 1;
-      }
-    }
-
-    .dropdown_input__container__icon {
-      color: var(--primary-main);
-
-      svg {
-        fill: var(--primary-main);
-        stroke: var(--primary-main);
-      }
-    }
+  a {
+    text-decoration: none;
   }
 
   .dropdown_input__container {
@@ -38,7 +20,24 @@ export const DropdownInputStyled = styled.div `
 
     @media ${device['landscape-tablets']} {
       border-top: 2px solid transparent;
-      border-bottom: 2px solid transparent;
+      border-bottom: none;
+    }
+
+    &:focus-within {
+      border-bottom: 2px var(--neutral-neutral-4) solid;
+
+      @media ${device['landscape-tablets']} {
+        border-bottom: none;
+      }
+
+      .dropdown_input__container__icon {
+        color: var(--neutral-neutral-3);
+
+        svg {
+          fill: var(--neutral-neutral-3);
+          stroke: var(--neutral-neutral-3);
+        }
+      }
     }
 
     .dropdown_input__container__text_input {
@@ -55,7 +54,7 @@ export const DropdownInputStyled = styled.div `
         color: var(--neutral-neutral-3);
       }
 
-      .dropdown_input__container__text_input.with-icon {
+      &.with-icon {
         padding-right: 2rem;
       }
     }
@@ -68,10 +67,10 @@ export const DropdownInputStyled = styled.div `
       top: 0;
       height: 100%;
       color: var(--neutral-neutral-3);
-      fill: currentColor;
+      fill: var(--neutral-neutral-3);
 
       @media ${device['landscape-tablets']} {
-        pointer-events: none;
+        cursor: pointer;
       }
 
       .dropdown_input__container__icon__main {
@@ -79,9 +78,11 @@ export const DropdownInputStyled = styled.div `
         height: 1.5rem;
         opacity: 1;
         margin-right: 0.25rem;
+        cursor: pointer;
 
         path {
           transition: all 0.25s;
+          fill: var(--neutral-neutral-3);
         }
       }
 
@@ -112,24 +113,36 @@ export const DropdownInputStyled = styled.div `
     }
   }
 
+  .dropdown_input__separator {
+    margin-top: 0.6rem;
+    border-top: 1.5px solid var(--neutral-neutral-4);
+  }
+
   .dropdown_input__results {
     transition: all 0.25s;
     display: flex;
-    position: relative;
     flex-direction: column;
     width: 100%;
-    border-radius: $s-border-radius;
-    margin-top: 1rem;
+    border-radius: 8px;
     background: var(--others-white);
-    min-width: 20rem;
+    width: 300px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background-color: var(--others-white);
+    border-top: none;
+    padding: 1rem 2rem;
 
     @media ${device['landscape-tablets']} {
-      position: absolute;
-      opacity: 0;
+      opacity: 1;
       left: 0;
       top: 100%;
-      box-shadow: $box-shadow-medium;
-      padding: 0.75rem 1rem;
+      width: 100%;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin-top: -15px;
+      border: none;
+      border-radius: 0 0 8px 8px;
     }
 
     & > li > * {
@@ -143,5 +156,9 @@ export const DropdownInputStyled = styled.div `
         background: var(--primary-main-light-5);
       }
     }
+
+    .dropdown_input__link--all {
+      font-weight: 700;
+    }
   }
 `;

package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.ts

@@ -1,35 +1,16 @@
 import { device } from '../../../globalStyles/breakpoints'
-
 import styled from 'styled-components'
 
 export const DropdownInputStyled = styled.div`
   position: relative;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+  padding: 1.5rem;
 
-  a {
-    text-decoration: none;
+  @media ${device['landscape-tablets']} {
+    padding: 16px 24px;
   }
 
-  &:focus-within {
-    @media ${device['landscape-tablets']} {
-      .dropdown_input__container {
-        border-bottom: 2px var(--neutral-neutral-4) solid;
-      }
-
-      .dropdown_input__results {
-        opacity: 1;
-      }
-    }
-
-    .dropdown_input__container__icon {
-      color: var(--primary-main);
-
-      svg {
-        fill: var(--primary-main);
-        stroke: var(--primary-main);
-      }
-    }
+  a {
+    text-decoration: none;
   }
 
   .dropdown_input__container {
@@ -40,7 +21,24 @@ export const DropdownInputStyled = styled.div`
 
     @media ${device['landscape-tablets']} {
       border-top: 2px solid transparent;
-      border-bottom: 2px solid transparent;
+      border-bottom: none;
+    }
+
+    &:focus-within {
+      border-bottom: 2px var(--neutral-neutral-4) solid;
+
+      @media ${device['landscape-tablets']} {
+        border-bottom: none;
+      }
+
+      .dropdown_input__container__icon {
+        color: var(--neutral-neutral-3);
+
+        svg {
+          fill: var(--neutral-neutral-3);
+          stroke: var(--neutral-neutral-3);
+        }
+      }
     }
 
     .dropdown_input__container__text_input {
@@ -57,7 +55,7 @@ export const DropdownInputStyled = styled.div`
         color: var(--neutral-neutral-3);
       }
 
-      .dropdown_input__container__text_input.with-icon {
+      &.with-icon {
         padding-right: 2rem;
       }
     }
@@ -70,10 +68,10 @@ export const DropdownInputStyled = styled.div`
       top: 0;
       height: 100%;
       color: var(--neutral-neutral-3);
-      fill: currentColor;
+      fill: var(--neutral-neutral-3);
 
       @media ${device['landscape-tablets']} {
-        pointer-events: none;
+        cursor: pointer;
       }
 
       .dropdown_input__container__icon__main {
@@ -81,9 +79,11 @@ export const DropdownInputStyled = styled.div`
         height: 1.5rem;
         opacity: 1;
         margin-right: 0.25rem;
+        cursor: pointer;
 
         path {
           transition: all 0.25s;
+          fill: var(--neutral-neutral-3);
         }
       }
 
@@ -114,24 +114,36 @@ export const DropdownInputStyled = styled.div`
     }
   }
 
+  .dropdown_input__separator {
+    margin-top: 0.6rem;
+    border-top: 1.5px solid var(--neutral-neutral-4);
+  }
+
   .dropdown_input__results {
     transition: all 0.25s;
     display: flex;
-    position: relative;
     flex-direction: column;
     width: 100%;
-    border-radius: $s-border-radius;
-    margin-top: 1rem;
+    border-radius: 8px;
     background: var(--others-white);
-    min-width: 20rem;
+    width: 300px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background-color: var(--others-white);
+    border-top: none;
+    padding: 1rem 2rem;
 
     @media ${device['landscape-tablets']} {
-      position: absolute;
-      opacity: 0;
+      opacity: 1;
       left: 0;
       top: 100%;
-      box-shadow: $box-shadow-medium;
-      padding: 0.75rem 1rem;
+      width: 100%;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin-top: -15px;
+      border: none;
+      border-radius: 0 0 8px 8px;
     }
 
     & > li > * {
@@ -145,5 +157,9 @@ export const DropdownInputStyled = styled.div`
         background: var(--primary-main-light-5);
       }
     }
+
+    .dropdown_input__link--all {
+      font-weight: 700;
+    }
   }
 `

package/dist/src/components/atoms/DropdownInput/DropdownInput.tsx

@@ -1,60 +1,64 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { forwardRef, useState } from 'react'
 
-import React, { useState } from 'react'
 import { DropdownInputProps } from './DropdownInputProps.types'
 import { DropdownInputStyled } from './DropdownInput.styled'
 
-export const DropdownInput: React.FC<DropdownInputProps> = ({
-  onChange,
-  results,
-  className = '',
-  name,
-  icon,
-  placeholder
-}) => {
-  const [searchTerm, setSearchTerm] = useState('')
+export const DropdownInput = forwardRef<HTMLInputElement, DropdownInputProps>(
+  ({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
+    const [searchTerm, setSearchTerm] = useState('')
 
-  const updateInput = (e): void => {
-    setSearchTerm(e.target.value)
-    onChange(e.target.value)
-  }
+    const updateInput = (e): void => {
+      setSearchTerm(e.target.value)
+      onChange(e.target.value)
+    }
 
-  const resetInput = (): void => {
-    setSearchTerm('')
-  }
+    const resetInput = (): void => {
+      setSearchTerm('')
+    }
 
-  return (
-    <DropdownInputStyled className={`dropdown_input ${className}`}>
-      <div className='dropdown_input__container'>
-        <input
-          className={`dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`}
-          type='text'
-          name={`dropdown_input_${name}`}
-          placeholder={placeholder}
-          value={searchTerm}
-          onChange={(e) => {
-            updateInput(e)
-          }}
-        />
-        <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`}>
-          {icon &&
-            React.cloneElement(icon, {
-              className: 'dropdown_input__container__icon__main'
-            })}
-          {searchTerm && (
-            <div
-              className='icon-cross main-color dropdown_input__container__icon__clear'
-              onClick={() => {
-                resetInput()
-              }}
-              onKeyDown={() => {
-                resetInput()
-              }}
-            ></div>
-          )}
+    return (
+      <DropdownInputStyled className={`dropdown_input ${className}`}>
+        <div className='dropdown_input__container'>
+          <input
+            ref={ref}
+            className={`dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`}
+            type='text'
+            name={`dropdown_input_${name}`}
+            placeholder={placeholder}
+            value={searchTerm}
+            onChange={(e) => {
+              updateInput(e)
+            }}
+          />
+          <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`} onClick={onClose}>
+            {icon &&
+              React.cloneElement(icon, {
+                className: 'dropdown_input__container__icon__main'
+              })}
+            {searchTerm && (
+              <div
+                className='icon-cross main-color dropdown_input__container__icon__clear'
+                onClick={() => {
+                  resetInput()
+                }}
+                onKeyDown={() => {
+                  resetInput()
+                }}
+              ></div>
+            )}
+          </div>
         </div>
-      </div>
-      {searchTerm && !!results?.length && <ul className='dropdown_input__results'>{results}</ul>}
-    </DropdownInputStyled>
-  )
-}
+        {searchTerm && !!results?.length && (
+          <>
+            <div className='dropdown_input__separator'></div>
+            <ul className='dropdown_input__results'>{results}</ul>
+          </>
+        )}
+      </DropdownInputStyled>
+    )
+  }
+)
+
+DropdownInput.displayName = 'DropdownInput'

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.d.ts

@@ -5,4 +5,5 @@ export interface DropdownInputProps {
     icon: any;
     onChange: (arg: string) => void;
     results: React.JSX.Element[];
+    onClose?: () => void;
 }

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.ts

@@ -7,4 +7,5 @@ export interface DropdownInputProps {
   icon: any
   onChange: (arg: string) => void
   results: React.JSX.Element[]
+  onClose?: () => void
 }

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type SearchBarProps } from '../SearchBar/SearchBarProps.types';
+interface DesktopSearchBarProps extends SearchBarProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const DesktopSearchBar: React.FC<DesktopSearchBarProps>;
+export {};

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon';
+import { DesktopSearchBarStyled } from './DesktopSearchBar.styled';
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
+import { useSearchFunction } from '../../../hooks/useSearchFunction';
+export const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick, isOpen, onClose }) => {
+    const { results, searchFunction } = useSearchFunction({
+        products,
+        searchBarTexts,
+        routes,
+        handleResultClick,
+        onClose
+    });
+    const searchInputRef = useRef(null);
+    const searchBarContainerRef = useRef(null);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        const handleClickOutside = (event) => {
+            if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.addEventListener('mousedown', handleClickOutside);
+            if (searchInputRef.current) {
+                searchInputRef.current.focus();
+            }
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsx(DesktopSearchBarStyled, { ref: searchBarContainerRef, className: 'modal_searchbar', children: _jsx("div", { className: 'modal_searchbar__content', children: _jsx(DropdownInput, { ref: searchInputRef, name: 'desktop-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(CloseIcon, {}), onChange: searchFunction, results: results, onClose: onClose }) }) }));
+};

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.styled.d.ts

@@ -0,0 +1 @@
+export declare const DesktopSearchBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.styled.js

@@ -0,0 +1,48 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const DesktopSearchBarStyled = styled.div `
+  display: none;
+
+  @media ${device['landscape-tablets']} {
+    display: block;
+    position: absolute;
+    top: 75px;
+    left: 0;
+    z-index: 10000;
+    width: 400px;
+    max-width: 90vw;
+    background: transparent;
+
+    .modal_searchbar__content {
+      background-color: var(--others-white);
+      border-radius: 8px;
+      width: 300px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+      @media ${device['laptop']} {
+        padding: 0;
+        width: 100%;
+      }
+    }
+
+    .modal_searchbar__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+
+    .modal_searchbar__title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: var(--others-black);
+    }
+
+    .dropdown_input {
+      .search {
+        width: 100%;
+        margin: 0;
+      }
+    }
+  }
+`;

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.styled.ts

@@ -0,0 +1,49 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DesktopSearchBarStyled = styled.div`
+  display: none;
+
+  @media ${device['landscape-tablets']} {
+    display: block;
+    position: absolute;
+    top: 75px;
+    left: 0;
+    z-index: 10000;
+    width: 400px;
+    max-width: 90vw;
+    background: transparent;
+
+    .modal_searchbar__content {
+      background-color: var(--others-white);
+      border-radius: 8px;
+      width: 300px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+      @media ${device['laptop']} {
+        padding: 0;
+        width: 100%;
+      }
+    }
+
+    .modal_searchbar__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+
+    .modal_searchbar__title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: var(--others-black);
+    }
+
+    .dropdown_input {
+      .search {
+        width: 100%;
+        margin: 0;
+      }
+    }
+  }
+`