@stack-spot/portal-layout 0.0.3 → 0.0.5

package/src/components/{Menu → menu}/MenuSections.tsx

@@ -16,7 +16,8 @@ function hideOverlay() {
   hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
 }
 
-function hideOverlayImmediately() {
+// eslint-disable-next-line react-refresh/only-export-components
+export function hideOverlayImmediately() {
   document.getElementById(MENU_OVERLAY_ID)?.classList.remove('visible')
 }
 
@@ -45,11 +46,18 @@ const Section = ({
   onOpen,
   setCurrentOverlay,
   id,
-}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void }) => {
+  hasContent,
+}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean }) => {
   const contentToRender = typeof content === 'function' ? content() : content
 
   function shouldShowOverlay() {
-    return !!contentToRender && (!active || !isMenuContentVisible())
+    /* The overlay should appear if:
+     * 1. The section has some content to render OR:
+     *   1.1 The section is active and there is a contextual menu for the active page.
+     * 2. The section is inactive OR:
+     *   2.1. The contextual menu is hidden.
+     */
+    return (!!contentToRender || (hasContent && active)) && (!active || !isMenuContentVisible())
   }
 
   function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
@@ -106,7 +114,7 @@ export const MenuSections = ({ sections, ...props }: MenuProps) => {
   const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
   
   const sectionItems = useMemo(
-    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay} />),
+    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay} hasContent={!!props.content} />),
     [sections],
   )
 
@@ -126,12 +134,12 @@ export const MenuSections = ({ sections, ...props }: MenuProps) => {
   return (
     <>
       <ul>{sectionItems}</ul>
-      <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
+      {!!props.content && <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
         <IconBox>
           <MenuIcon className="expand" />
           <ChevronLeft className="collapse" />
         </IconBox>
-      </button>
+      </button>}
       <div id="menuContentOverlay" onMouseEnter={showOverlay} onMouseLeave={hideOverlay}>
         {renderMenuOverlay()}
         <div className="arrow"></div>

package/src/components/{Menu → menu}/PageSelector.tsx

@@ -111,6 +111,7 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
               items={optionsWithIcon}
               onHide={() => setVisible(false)}
               after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
+              scroll
             />
           </>
         )

package/src/components/{Menu → menu}/types.ts

@@ -3,7 +3,14 @@ import { Action } from '../types'
 
 interface BaseMenuItem {
   hidden?: boolean,
+  /**
+   * React element on the left.
+   */
   icon?: React.ReactElement,
+  /**
+   * React element on the right.
+   */
+  badge?: React.ReactElement,
   /**
    * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
    * @default 'wrap'

package/src/dictionary.ts

@@ -0,0 +1,25 @@
+import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    close: 'Close',
+    validationLabel: 'Please, confirm the action by typing "$0" below:',
+    dismiss: 'Dismiss',
+    confirm: 'OK',
+    cancel: 'Cancel',
+  },
+  pt: {
+    close: 'Fechar',
+    validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
+    dismiss: 'Dispensar',
+    confirm: 'OK',
+    cancel: 'Cancelar',
+  },
+} satisfies Dictionary
+
+export const useDictionary = () => useTranslate(dictionary)
+
+export function getDictionary() {
+  const language = getLanguage()
+  return dictionary[language]
+}

package/src/index.ts

@@ -2,11 +2,12 @@ export { Layout } from './Layout'
 export { overlay } from './LayoutOverlayManager'
 export { Dialog } from './components/Dialog'
 export { Header, HeaderProps } from './components/Header'
-export { StackspotLogo } from './components/Logo'
-export { MenuContent } from './components/Menu/MenuContent'
-export { MenuSections } from './components/Menu/MenuSections'
-export * from './components/Menu/types'
 export { OverlayContent } from './components/OverlayContent'
 export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
+export { MenuContent } from './components/menu/MenuContent'
+export { MenuSections } from './components/menu/MenuSections'
+export * from './components/menu/types'
 export * from './components/types'
 export * from './errors'
+export { Logo as StackspotLogo } from './svg/Logo'
+

package/src/layout.css

@@ -68,20 +68,23 @@ body {
 }
 
 #page {
-  flex: 1;
+  position: absolute;
+  top: var(--header-height);
+  left: var(--menu-sections-width);
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   background-color: var(--light-300);
   border-top-left-radius: 0.5rem;
   align-items: center;
   padding: 24px;
-  margin-top: var(--header-height);
-  margin-left: var(--menu-sections-width);
-  transition: margin ease-in-out var(--menu-animation-duration);
+  transition: left ease-in-out var(--menu-animation-duration);
 }
 
 #layout.menu-content-visible #page {
-  margin-left: calc(var(--menu-sections-width) + var(--menu-content-width));
+  left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }
 
 #content {
@@ -330,7 +333,7 @@ body {
   bottom: -420px;
   left: 20px;
   height: 400px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
 }
 
 #bottomPanel.visible {
@@ -340,12 +343,23 @@ body {
 #bottomDialog {
   position: fixed;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   bottom: -80px;
   left: 0;
   right: 0;
   height: 80px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
+  background-color: var(--inverse-500);
+  color: var(--inverse-contrastText);
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+#bottomDialog .btn-group {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
 }
 
 #bottomDialog.visible {

package/src/svg/Forbidden.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable max-len */
+
+export const Forbidden = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="139" height="184" viewBox="0 0 139 184" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <path opacity="0.5" d="M137.542 39.2828C111.83 33.1463 88.3451 20.2506 69.3131 1.8737L69.3105 1.87109C50.3061 20.2445 26.8517 33.1502 1.16797 39.3089V109.156C1.16797 127.726 7.67061 139.787 19.7142 150.871C31.3876 161.613 48.6454 171.151 69.3551 182.846" stroke="url(#paint0_linear_3383_167720)" strokeWidth="2.23002" strokeLinecap="round" />
+    <path opacity="0.5" d="M108.14 138.552L108.14 138.553C99.2701 146.627 86.3099 153.859 70.5716 162.641C70.027 162.945 69.4791 163.251 68.928 163.559C68.3731 163.249 67.8215 162.941 67.2733 162.635C51.5416 153.856 38.5854 146.625 29.716 138.552C24.9439 134.209 21.3152 129.716 18.8732 124.53C16.4331 119.349 15.1502 113.419 15.1502 106.163V51.4287C35.3389 46.4852 53.802 36.4556 68.8924 22.278C84.0053 36.4594 102.493 46.482 122.706 51.4089V106.163C122.706 113.419 121.423 119.349 118.983 124.53C116.541 129.716 112.912 134.209 108.14 138.552Z" stroke="url(#paint1_linear_3383_167720)" strokeWidth="2.23002" strokeLinecap="round" />
+    <path opacity="0.16" d="M48.582 90.5586L69.2024 69.9383L89.8227 90.5586L69.2024 111.179L48.582 90.5586Z" fill="#FAFAFB" />
+    <path opacity="0.16" d="M43.9312 101.826C42.1031 99.9976 42.1031 97.0337 43.9312 95.2056L69.2005 69.9362L94.4698 95.2055C96.2979 97.0337 96.2979 99.9976 94.4698 101.826L72.5106 123.785C70.6825 125.613 67.7185 125.613 65.8904 123.785L43.9312 101.826Z" fill="#FAFAFB" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M65.4942 61.0508C59.8098 61.0508 55.2018 65.6588 55.2018 71.3432V83.9339L54.7227 84.413L69.2002 98.8906L83.6778 84.413L83.4734 84.2087H83.5059V71.3432C83.5059 65.6588 78.8978 61.0508 73.2135 61.0508H65.4942ZM78.3597 79.0949V71.3432C78.3597 68.501 76.0556 66.197 73.2135 66.197H65.4942C62.652 66.197 60.348 68.501 60.348 71.3432V78.7877L69.2002 69.9355L78.3597 79.0949Z" fill="#727275" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M65.8759 102.631C65.8759 100.788 67.3701 99.2938 69.2133 99.2938C71.0565 99.2938 72.5507 100.788 72.5507 102.631C72.5507 104.474 71.0565 105.969 69.2133 105.969C67.3701 105.969 65.8759 104.474 65.8759 102.631ZM69.2133 93.5352C64.1896 93.5352 60.1172 97.6076 60.1172 102.631C60.1172 106.673 62.7537 110.1 66.4008 111.284L66.4008 116.309C66.4008 117.899 67.69 119.188 69.2802 119.188C70.8704 119.188 72.1595 117.899 72.1595 116.309L72.1595 111.24C75.7371 110.015 78.3093 106.624 78.3093 102.631C78.3093 97.6076 74.2369 93.5352 69.2133 93.5352Z" fill="#77777C" />
+    <defs>
+      <linearGradient id="paint0_linear_3383_167720" x1="63.4371" y1="178.979" x2="232.609" y2="105.404" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09" />
+      </linearGradient>
+      <linearGradient id="paint1_linear_3383_167720" x1="64.1638" y1="161.757" x2="199.871" y2="102.082" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09" />
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/{components → svg}/Logo.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 
-export const StackspotLogo = ({ style, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+export const Logo = ({ style, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div style={{ display: 'flex', ...style }} {...props}>
     <svg width="155" height="32" viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clipPath="url(#clip0_151_102)">

package/src/svg/NotFound.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+export const NotFound = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="136" height="154" viewBox="0 0 136 154" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M54.3307 0.59375C53.716 0.59375 53.2178 1.092 53.2178 1.70662C53.2178 2.32123 53.716 2.81948 54.3307 2.81948C93.8 2.81948 125.796 34.8157 125.796 74.2851C125.796 93.0828 118.539 110.185 106.673 122.944L94.4411 110.712L94.4248 110.696C103.164 101.078 108.49 88.3032 108.49 74.2843C108.49 44.3719 84.2415 20.1231 54.3291 20.1231C24.4167 20.1231 0.167971 44.3719 0.167969 74.2843C0.167969 104.197 24.4167 128.445 54.3291 128.445C69.4218 128.445 83.0726 122.272 92.8942 112.313L105.132 124.55C92.1785 137.641 74.2017 145.751 54.3307 145.751C53.716 145.751 53.2178 146.249 53.2178 146.864C53.2178 147.478 53.716 147.976 54.3307 147.976C74.8163 147.976 93.3495 139.617 106.706 126.124L134.039 153.458C134.474 153.892 135.178 153.892 135.613 153.458C136.048 153.023 136.048 152.318 135.613 151.884L108.248 124.519C120.516 111.357 128.022 93.6974 128.022 74.2851C128.022 33.5865 95.0293 0.59375 54.3307 0.59375ZM106.265 74.2843C106.265 45.6011 83.0122 22.3489 54.3291 22.3489C25.646 22.3489 2.39371 45.6011 2.39371 74.2843C2.39371 102.967 25.646 126.22 54.3291 126.22C83.0122 126.22 106.265 102.967 106.265 74.2843Z" fill="url(#paint0_linear_3383_224507)" />
+    <circle opacity="0.16" cx="54.4578" cy="74.1883" r="41.5984" fill="#FAFAFB" />
+    <circle opacity="0.16" cx="54.0295" cy="74.6155" r="30.8772" fill="#FAFAFB" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M51.915 76.8282C51.9232 78.034 52.9074 79.0048 54.1131 78.9966C55.3189 78.9884 56.2897 78.0043 56.2815 76.7985L56.1278 64.0513C56.1196 62.8455 55.1355 61.8747 53.9297 61.8829C52.7239 61.8911 51.7531 62.8752 51.7613 64.081L51.915 76.8282ZM52.218 85.6913C52.7436 86.1712 53.3605 86.4111 54.0689 86.4111C54.8001 86.4111 55.4171 86.1597 55.9198 85.657C56.4453 85.1543 56.7081 84.5602 56.7081 83.8747C56.7081 83.1663 56.4453 82.5722 55.9198 82.0924C55.3942 81.5897 54.7658 81.3383 54.0346 81.3383C53.3263 81.3383 52.7093 81.5897 52.1838 82.0924C51.681 82.5951 51.4297 83.2006 51.4297 83.909C51.4297 84.5945 51.6925 85.1886 52.218 85.6913Z" fill="#14141A" />
+    <defs>
+      <linearGradient id="paint0_linear_3383_224507" x1="62.1628" y1="150.93" x2="211.15" y2="63.5124" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" stopOpacity="0.61" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/svg/ServerError.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable max-len */
+
+export const ServerError = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="187" height="115" viewBox="0 0 187 115" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <path opacity="0.1" d="M148.767 98.4641C148.767 79.4314 138.994 62.667 124.163 52.8555M38.5703 98.4641C38.5703 79.4314 48.343 62.667 63.174 52.8555" stroke="url(#paint0_linear_3383_197709)" strokeWidth="2.5731" />
+    <g opacity="0.5">
+      <mask id="path2-inside1_3383_197709" fill="white">
+        <path fillRule="evenodd" clipRule="evenodd" d="M18.1671 0.320312C14.2745 0.320312 11.1189 3.47587 11.1189 7.36846V52.3732V98.0428H7.77081C3.87822 98.0428 0.722656 101.198 0.722656 105.091V107.775C0.722656 111.667 3.87823 114.823 7.77082 114.823H179.562C183.454 114.823 186.61 111.667 186.61 107.775V105.091C186.61 101.198 183.454 98.0428 179.562 98.0428H176.907V7.36846C176.907 3.47588 173.752 0.320312 169.859 0.320312H18.1671ZM13.3446 7.36846C13.3446 4.70512 15.5037 2.54604 18.1671 2.54604H169.859C172.522 2.54604 174.681 4.70511 174.681 7.36846V98.042H13.3446V52.3732V7.36846ZM2.94839 105.091C2.94839 102.428 5.10746 100.269 7.77081 100.269H179.562C182.225 100.269 184.384 102.428 184.384 105.091V107.775C184.384 110.438 182.225 112.597 179.562 112.597H7.77082C5.10747 112.597 2.94839 110.438 2.94839 107.775V105.091Z" />
+      </mask>
+      <path d="M11.1189 98.0428V100.273H13.3489V98.0428H11.1189ZM176.907 98.0428H174.677V100.273H176.907V98.0428ZM174.681 98.042V100.272H176.912V98.042H174.681ZM13.3446 98.042H11.1146V100.272H13.3446V98.042ZM13.3489 7.36846C13.3489 4.70749 15.5061 2.55033 18.1671 2.55033V1.90971C13.0429 -1.90971 8.8889 2.24426 8.8889 7.36846H13.3489ZM13.3489 52.3732V7.36846H8.8889V52.3732H13.3489ZM13.3489 98.0428V52.3732H8.8889V98.0428H13.3489ZM7.77081 100.273H11.1189V95.8128H7.77081V100.273ZM2.95268 105.091C2.95268 102.43 5.10983 100.273 7.77081 100.273V95.8128C2.64661 95.8128 -1.50736 99.9668 -1.50736 105.091H2.95268ZM2.95268 107.775V105.091H1.50736V107.775H2.95268ZM7.77082 112.593C5.10984 112.593 2.95268 110.436 2.95268 107.775H1.50736C1.50736 112.899 2.64663 117.053 7.77082 117.053V112.593ZM179.562 112.593H7.77082V117.053H179.562V112.593ZM184.38 107.775C184.38 110.436 182.223 112.593 179.562 112.593V117.053C184.686 117.053 188.84 112.899 188.84 107.775H184.38ZM184.38 105.091V107.775H188.84V105.091H184.38ZM179.562 100.273C182.223 100.273 184.38 102.43 184.38 105.091H188.84C188.84 99.9668 184.686 95.8128 179.562 95.8128V100.273ZM176.907 100.273H179.562V95.8128H176.907V100.273ZM174.677 7.36846V98.0428H179.137V7.36846H174.677ZM169.859 2.55033C172.52 2.55033 174.677 4.70748 174.677 7.36846H179.137C179.137 2.24427 174.983 -1.90971 169.859 -1.90971V2.55033ZM18.1671 2.55033H169.859V1.90971H18.1671V2.55033ZM18.1671 0.316024C14.2721 0.316024 11.1146 3.47351 11.1146 7.36846H15.5747C15.5747 5.93673 16.7353 4.77606 18.1671 4.77606V0.316024ZM169.859 0.316024H18.1671V4.77606H169.859V0.316024ZM176.912 7.36846C176.912 3.47351 173.754 0.316024 169.859 0.316024V4.77606C171.291 4.77606 172.451 5.93672 172.451 7.36846H176.912ZM176.912 98.042V7.36846H172.451V98.042H176.912ZM13.3446 100.272H174.681V95.812H13.3446V100.272ZM11.1146 52.3732V98.042H15.5747V52.3732H11.1146ZM11.1146 7.36846V52.3732H15.5747V7.36846H11.1146ZM7.77081 98.0385C3.87585 98.0385 0.718369 101.196 0.718369 105.091H5.17841C5.17841 103.659 6.33906 102.499 7.77081 102.499V98.0385ZM179.562 98.0385H7.77081V102.499H179.562V98.0385ZM186.614 105.091C186.614 101.196 183.457 98.0385 179.562 98.0385V102.499C180.993 102.499 182.154 103.659 182.154 105.091H186.614ZM186.614 107.775V105.091H182.154V107.775H186.614ZM179.562 114.827C183.457 114.827 186.614 111.67 186.614 107.775H182.154C182.154 109.206 180.993 110.367 179.562 110.367V114.827ZM7.77082 114.827H179.562V110.367H7.77082V114.827ZM0.718369 107.775C0.718369 111.67 3.87587 114.827 7.77082 114.827V110.367C6.33907 110.367 5.17841 109.206 5.17841 107.775H0.718369ZM0.718369 105.091V107.775H5.17841V105.091H0.718369Z" fill="url(#paint1_linear_3383_197709)" mask="url(#path2-inside1_3383_197709)" />
+    </g>
+    <path opacity="0.1" d="M167.976 39.7734V98.097M19.5938 98.097V70.1762V39.7734" stroke="url(#paint2_linear_3383_197709)" strokeWidth="2.22573" />
+    <path opacity="0.16" d="M89.4439 19.7907C92.033 18.2959 95.223 18.2959 97.8121 19.7907L117.92 31.4003C120.51 32.8951 122.105 35.6577 122.105 38.6473V61.8665C122.105 64.8562 120.51 67.6187 117.92 69.1135L97.8121 80.7231C95.223 82.218 92.033 82.218 89.4439 80.7231L69.3355 69.1135C66.7464 67.6187 65.1514 64.8562 65.1514 61.8665V38.6473C65.1514 35.6577 66.7464 32.8951 69.3355 31.4003L89.4439 19.7907Z" fill="#FAFAFB" />
+    <path opacity="0.16" d="M89.4447 26.8376C92.0338 25.3427 95.2237 25.3427 97.8128 26.8376L111.819 34.9241C114.408 36.4189 116.003 39.1815 116.003 42.1711V58.3442C116.003 61.3339 114.408 64.0964 111.819 65.5912L97.8128 73.6778C95.2237 75.1726 92.0338 75.1726 89.4447 73.6778L75.4384 65.5912C72.8493 64.0964 71.2543 61.3338 71.2543 58.3442V42.1711C71.2543 39.1815 72.8493 36.4189 75.4384 34.9241L89.4447 26.8376Z" fill="#FAFAFB" />
+    <path opacity="0.16" d="M91.6031 34.1543C93.2213 33.2201 95.215 33.2201 96.8332 34.1543L107.367 40.236C108.985 41.1702 109.982 42.8968 109.982 44.7654V56.9287C109.982 58.7972 108.985 60.5238 107.367 61.4581L96.8332 67.5397C95.215 68.474 93.2213 68.474 91.6031 67.5397L81.0693 61.4581C79.4511 60.5238 78.4543 58.7972 78.4543 56.9286V44.7654C78.4543 42.8968 79.4511 41.1702 81.0694 40.236L91.6031 34.1543Z" fill="#FAFAFB" />
+    <path d="M100.941 43.7109L87.0802 57.5722" stroke="#14141A" strokeWidth="3.5491" strokeLinecap="round" />
+    <path d="M100.941 57.5703L87.0802 43.7091" stroke="#14141A" strokeWidth="3.5491" strokeLinecap="round" />
+    <defs>
+      <linearGradient id="paint0_linear_3383_197709" x1="93.6687" y1="43.7117" x2="93.6687" y2="98.4635" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" stopOpacity="0" />
+        <stop offset="1" stopColor="#BCBCCF" />
+      </linearGradient>
+      <linearGradient id="paint1_linear_3383_197709" x1="186.891" y1="111.975" x2="-6.87233" y2="-64.7069" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09" />
+      </linearGradient>
+      <linearGradient id="paint2_linear_3383_197709" x1="25.9349" y1="96.8508" x2="76.0716" y2="-32.8361" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09" />
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/svg/Unauthenticated.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+export const Unauthenticated = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="178" height="160" viewBox="0 0 178 160" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <circle opacity="0.16" cx="89.6761" cy="80.2113" r="31.5629" fill="#FAFAFB"/>
+    <ellipse opacity="0.16" cx="89.6721" cy="80.6057" rx="22.094" ry="21.6995" fill="#FAFAFB"/>
+    <ellipse opacity="0.16" cx="89.6759" cy="80.6056" rx="13.4142" ry="13.0197" fill="#FAFAFB"/>
+    <path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M44.7029 19.055C69.3231 -5.56521 109.24 -5.56521 133.861 19.055L177.651 62.8454C178.086 63.2808 178.086 63.9868 177.651 64.4222C177.215 64.8577 176.509 64.8577 176.074 64.4222L132.284 20.6319C108.534 -3.11747 70.0291 -3.11747 46.2798 20.6319C45.8443 21.0673 45.1383 21.0673 44.7029 20.6319C44.2675 20.1964 44.2675 19.4904 44.7029 19.055ZM161.243 79.8912L126.447 45.0949C105.747 24.3952 72.1863 24.3952 51.4866 45.0949L16.6903 79.8912L51.4866 114.687C72.1863 135.387 105.747 135.387 126.447 114.687L161.243 79.8912ZM128.024 43.518C106.453 21.9474 71.4803 21.9474 49.9097 43.5181L15.1135 78.3143L13.5366 79.8912L15.1135 81.468L49.9097 116.264C71.4803 137.835 106.453 137.835 128.024 116.264L162.82 81.468L164.397 79.8912L162.82 78.3143L128.024 43.518ZM44.7029 141.115C69.3231 165.736 109.24 165.736 133.861 141.115C134.296 140.68 134.296 139.974 133.861 139.538C133.425 139.103 132.719 139.103 132.284 139.538C108.534 163.288 70.0291 163.288 46.2798 139.538L2.48938 95.7481C2.05394 95.3126 1.34795 95.3126 0.912516 95.7481C0.477078 96.1835 0.477077 96.8895 0.912518 97.3249L44.7029 141.115Z" fill="url(#paint0_linear_3383_243082)"/>
+    <defs>
+      <linearGradient id="paint0_linear_3383_243082" x1="-3.35603" y1="94.0049" x2="89.5555" y2="212.99" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF"/>
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09"/>
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/citric.fix.d.ts

@@ -1,7 +0,0 @@
-import '../node_modules/styled-components/dist/index.d.ts'
-
-declare module 'styled-components' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  type StyledComponent<Tag = 'div', Theme = object, Props = object, Optional = never> = 
-    import('react').FunctionComponent<JSX.IntrinsicElements[Tag] & Props>
-}