@takaro/lib-components 0.0.1

package/src/hooks/useFocus.tsx

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+
+export const useFocus = () => {
+  const htmlElRef = useRef<HTMLElement>(null);
+  const setFocus = () => {
+    htmlElRef.current && htmlElRef.current.focus();
+  };
+
+  return [htmlElRef, setFocus];
+};

package/src/hooks/useLocalStorage.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [error, setError] = useState<DOMException | null>(null);
+
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error reading the local storage value', e);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((prevValue: T) => T)): void => {
+    try {
+      setStoredValue((prevValue) => {
+        const valueToStore = value instanceof Function ? value(prevValue) : value;
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        return valueToStore;
+      });
+    } catch (e) {
+      // DOMException code 22 for QuotaExceededError
+      if (e instanceof DOMException && e.name === 'QuotaExceededError') {
+        // eslint-disable-next-line no-console
+        console.error('LocalStorage quota exceeded', e);
+        setError(e);
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('Error setting the local storage value', e);
+      }
+    }
+  };
+
+  return { storedValue, setValue, error };
+}

package/src/hooks/useLockScroll.ts

@@ -0,0 +1,26 @@
+import { useLayoutEffect } from 'react';
+
+export function useLockBodyScroll(lock = true): void {
+  useLayoutEffect(() => {
+    if (lock) {
+      const originalStyle = window.getComputedStyle(document.body).overflowY;
+      document.body.style.overflowY = 'hidden';
+      // Re-enable scrolling when component unmounts.
+      return (): void => {
+        document.body.style.overflowY = originalStyle;
+      };
+    }
+  }, []); // Empty array ensures effect is only run on mount and unmount.
+}
+
+export function useLockRefScroll(ref: React.MutableRefObject<HTMLElement>): void {
+  useLayoutEffect(() => {
+    if (ref) {
+      const originalStyle = ref.current.style.overflow;
+      ref.current.style.overflow = 'hidden';
+      return (): any => {
+        ref.current.style.overflow = originalStyle;
+      };
+    }
+  }, [ref]);
+}

package/src/hooks/useOnScreen.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+export function useOnScreen(ref: React.RefObject<any>, rootMargin = '0px'): boolean {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+      }
+    );
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return (): void => {
+      observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return isIntersecting;
+}

package/src/hooks/useOutsideAlerter.tsx

@@ -0,0 +1,15 @@
+import { useEffect, RefObject, MutableRefObject } from 'react';
+
+export function useOutsideAlerter(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>, f: () => void): void {
+  useEffect(() => {
+    function handleClickOutside(event: any): void {
+      if (ref.current && !ref.current.contains(event.target)) {
+        f();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return (): void => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}

package/src/hooks/useTableActions.ts

@@ -0,0 +1,56 @@
+import { PaginationState, SortingState, RowSelectionState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { APIOutput } from '@takaro/apiclient';
+
+interface ExtendedAPIOutput<T> extends APIOutput {
+  data: T[];
+}
+
+export interface PageOptions {
+  // amount of pages items are spread across
+  pageCount: number;
+  // total amount of items
+  total: number;
+}
+
+interface TableActionOptions {
+  pageIndex: number;
+  pageSize: number;
+}
+
+export interface ColumnFilter {
+  id: string;
+  value: string[];
+}
+
+export function useTableActions<T>({ pageIndex, pageSize }: TableActionOptions = { pageIndex: 0, pageSize: 9 }) {
+  const [paginationState, setPaginationState] = useState<PaginationState>({
+    pageIndex,
+    pageSize,
+  });
+  const [columnFiltersState, setColumnFiltersState] = useState<ColumnFilter[]>([]);
+  const [columnSearchState, setColumnSearchState] = useState<ColumnFilter[]>([]);
+  const [sortingState, setSortingState] = useState<SortingState>([]);
+  const [rowSelectionState, setRowSelectionState] = useState<RowSelectionState>({});
+
+  function getPageOptions(data: ExtendedAPIOutput<T>): PageOptions {
+    // we can use page 0 here because that data is the same for all pages
+    const limit = data.meta.limit!;
+    const total = data.meta.total!;
+
+    const pageCount = data.meta.total ? Math.ceil(total / limit) : Math.ceil(data.data.length / limit);
+
+    return {
+      pageCount,
+      total,
+    };
+  }
+
+  return {
+    pagination: { paginationState, setPaginationState, getPageOptions },
+    columnFilters: { columnFiltersState, setColumnFiltersState },
+    columnSearch: { columnSearchState, setColumnSearchState },
+    sorting: { sortingState, setSortingState },
+    rowSelection: { rowSelectionState, setRowSelectionState },
+  };
+}

package/src/hooks/useTheme.tsx

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import type { ThemeType } from '../styled/theme';
+import { ThemeContext } from 'styled-components';
+
+export const useTheme = (): ThemeType => {
+  return useContext<ThemeType>(ThemeContext);
+};

package/src/images/company-icon-primary.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path fill="#664DE5" d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z"/>
+</svg>

package/src/images/company-icon-secondary.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path fill="#030917" d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z"/>
+</svg>

package/src/images/index.ts

@@ -0,0 +1,4 @@
+import CompanyIconPrimary from './company-icon-primary.svg';
+import CompanyIconSecondary from './company-icon-secondary.svg';
+
+export { CompanyIconPrimary, CompanyIconSecondary };

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './styled';
+export * from './hooks';
+export * from './helpers';
+export * from './views';
+export * as errors from './errors';
+export * from './types';
+export * from './images';
+export * as testing from './test/testUtils';

package/src/stories/Colors.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+import { styled } from '../styled';
+import { darkTheme as theme } from '../styled/theme';
+
+<Meta title="Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem title="theme.colors.primary" colors={[theme.colors.primary]} />
+  <ColorItem title="theme.colors.secondary" colors={[theme.colors.secondary]} />
+
+## Alert colors
+
+<ColorItem title="theme.colors.info" colors={[theme.colors.info]} />
+<ColorItem title="theme.colors.success" colors={[theme.colors.success]} />
+<ColorItem title="theme.colors.warning" colors={[theme.colors.warning]} />
+<ColorItem title="theme.colors.error" colors={[theme.colors.error]} />
+
+## backgrounds
+
+<ColorItem title="theme.colors.background" colors={[theme.colors.background]} />
+<ColorItem title="theme.colors.backgroundAlt" colors={[theme.colors.backgroundAlt]} />
+<ColorItem title="theme.colors.backgroundAccent" colors={[theme.colors.backgroundAccent]} />
+<ColorItem title="theme.colors.placeholder" colors={[theme.colors.placeholder]} />
+<ColorItem title="theme.colors.placeholderHighlight" colors={[theme.colors.placeholderHighlight]} />
+
+
+## Text
+
+<ColorItem title="theme.colors.text" colors={[theme.colors.text]} />
+<ColorItem title="theme.colors.textAlt" colors={[theme.colors.textAlt]} />
+<ColorItem title="theme.colors.disabled" colors={[theme.colors.disabled]} />
+
+</ColorPalette>

package/src/stories/Elevation.stories.mdx

@@ -0,0 +1,56 @@
+import { Meta } from '@storybook/addon-docs';
+
+
+<Meta title="Elevation" />
+
+## Surface and Elevation
+
+Elevation styles are used to create separation between surfaces. 6 elevation styles are avilable in a range of depths.
+In default mode, elevation is created through shadows and elevation design tokens. In dark mode, on surfaces with elevation (i.e. Cards),
+an additional transparent overlay is used to lighten the surface color and creat the visual effect of an elevated surface.
+
+### Elevation styles
+
+
+
+Elevation styles are used to create separation between surfaces. Six elevation styles are avilable in a range of depths.
+
+<div>
+
+</div>
+
+### Examples
+
+Some elevation styles are used on specific components within the Design System:
+
+<table>
+  <tr>
+    <th>Depth level</th>
+    <th>Uses</th>
+  </tr>
+
+  <tr>
+    <td>Elevation 00</td>
+    <td>Background</td>
+  </tr>
+  <tr>
+    <td>Elevation 01</td>
+    <td>Cards Minimal, Tooltips</td>
+  </tr>
+  <tr>
+    <td>Elevation 02</td>
+    <td>Panels, Cards Subtle</td>
+  </tr>
+  <tr>
+    <td>Elevation 03</td>
+    <td>Panels, Navigation Bars, Cards Bold, Dialogs</td>
+  </tr>
+  <tr>
+    <td>Elevation 04</td>
+    <td>Notifications, Menus</td>
+  </tr>
+  <tr>
+    <td>Elevation 05</td>
+    <td>No specific purpose</td>
+  </tr>
+</table>

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+<style>{``}</style>
+
+# Takaro UI library
+
+Takaro UI is a component library custom made to used within the Takaro ecosystem.
+
+## Roadmap
+
+You can see what we have in mind at our projects page.
+
+## Development
+
+If you'd like to help us out with the project, we welcome contributions of all types! Check out our Contributing.md for more details on how you can help make Takaro UI even better!

package/src/stories/Spacing.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/addon-docs';
+import { spacing } from '../styled/spacing';
+
+<Meta title="Spacing" />
+
+# Spacing
+Cosistent spacing of width, height, margins and padding maintain visual balance in the design system.
+
+## Spacing tokens
+The design system provides spacers that can be used vertically and horizontally. The smaller spacers should be used on more detailed spacing of elements within reusable components.
+The larger spacers should be used on layout spacing. **These spacing tokens should be used for all possible spacings!**
+
+<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', marginTop: '20px' }}>
+  {Object.entries(spacing)
+    .sort((a, b) => parseFloat(a[0].replace('_', '.')) - parseFloat(b[0].replace('_', '.')))
+    .map(([key, value]) => (
+      <div key={key} style={{ margin: '10px', textAlign: 'center' }}>
+        <div style={{ backgroundColor: '#333', width: '50px', height: value, marginBottom: '5px' }}></div>
+        {key.replace('_', '.')}
+      </div>
+    ))}
+</div>
+
+
+

package/src/styled/GlobalStyle.ts

@@ -0,0 +1,207 @@
+import { createGlobalStyle, keyframes } from 'styled-components';
+import { ThemeType } from './theme';
+import { SnackBarStyles } from './Snackbar';
+
+const skeletonLoading = keyframes`
+  0% { transform: translateX(-100%); }
+  40%, 100% { transform: translateX(100%); }
+`;
+
+export const GlobalStyle = createGlobalStyle<{ theme: ThemeType }>`
+
+  *::selection {
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: white;
+  }
+
+  :root {
+    font-size: 62.5%; /* (62.5/100) * 16px = 10px */
+    box-sizing: border-box;
+  }
+
+  #takaro-root {
+    margin: 0 auto;
+    overflow-x: hidden;
+  }
+
+
+  html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+    line-height: 1.5;
+    font-family: 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: ${({ theme }) => theme.colors.background};
+
+    @supports (scrollbar-gutter: stable) {
+      scrollbar-gutter: stable;
+    }
+  }
+
+  body{
+    transition: background-color 0.2s linear;
+    overflow: hidden;
+  }
+
+  a, p, div, ul, li, h1, h2, h3, h4, h5, h6, header, footer, fieldset, legend, dl, dt{
+    transition: background-color 0.2s linear;
+    transition: box-shadow 0.125s linear;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: ${({ theme }) => theme.colors.text};
+  }
+  
+  span {
+    letter-spacing: normal;
+  }
+
+  h1 {
+    font-size: ${({ theme }) => theme.fontSize.large};
+    font-weight: 600;
+  }
+  h2 {
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    font-weight: 600;
+  }
+  h3 {
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    font-weight: 500;
+  }
+
+
+  strong {
+    padding: ${({ theme }) => `0 ${theme.spacing['0_25']}`};
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    font-weight: 400;
+    white-space: no-wrap;
+  }
+
+  form {
+    display: block;
+    width: 100%;
+    fieldset {
+      border: none;
+    }
+  }
+
+  input, textarea {
+    box-sizing: border-box;
+    margin: 0;
+    outline: 0;
+    padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+    border-width: 0.1rem;
+    border-radius: ${({ theme }) => theme.borderRadius.medium};
+    font-size: ${({ theme }) => theme.fontSize.small};
+    border-color: transparent;
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    color: ${({ theme }) => theme.colors.text};
+    font-family: inherit;
+    &[readOnly]{
+      cursor: default;
+      &:focus {
+        border-color: none!important;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      &:focus {
+        border-color: none!important;
+      }
+    }
+
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  textarea {
+    resize: vertical;
+    width: calc(100% - ${({ theme }) => theme.spacing[1]} * 2);
+  }
+
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  button {
+    display: block;
+    padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['2_5']}`};
+    border-radius: ${({ theme }) => theme.borderRadius.medium};
+    border: none;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  a.underline {
+    text-decoration: underline;
+    text-decoration-color: inherit;
+    text-decoration-thickness: 1px;
+  }
+
+  a, button {
+    cursor: pointer;
+    text-decoration: none;
+    background-position: -100px;
+    &:active, &:focus{
+      outline: 0;
+      outline-style: none;
+      -moz-outline-style: none;
+    }
+  }
+
+.placeholder {
+    overflow: hidden;
+    position: relative;
+    border-radius: ${({ theme }): string => theme.borderRadius.large};
+    background-color: ${({ theme }): string => theme.colors.placeholder};
+    border: 1px solid ${({ theme }): string => theme.colors.backgroundAccent};
+    &::before {
+      content: '';
+      width: 100%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+        90deg, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}d3 0, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}4d 20%, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}66 60%, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}d3
+      );
+      animation: ${skeletonLoading} 2.5s infinite ease-in-out;
+    }
+  }
+
+  .simplebar-mask {
+    &:focus-visible {
+      border: none;
+    }
+  }
+
+  /* notistack snackbar styling */
+  ${SnackBarStyles}
+
+  `;

package/src/styled/Snackbar.tsx

@@ -0,0 +1,42 @@
+import { css } from 'styled-components';
+import { ThemeType } from './theme';
+
+export const SnackBarStyles = css<{ theme: ThemeType }>`
+  /* Snackbar snack colors for every type */
+  .mui-snackbar {
+    color: white;
+  }
+  .MuiSnackbarContent-root {
+    background-color: ${({ theme }): string => theme.colors.primary};
+    color: white;
+  }
+  #notistack-snackbar {
+    font-weight: 600;
+    font-family: 'Lato', sans-serif;
+    color: ${({ theme }) => theme.colors.text};
+    font-size: 1.5rem;
+    padding: 2rem;
+  }
+
+  div.SnackbarContent-root {
+    border: 1px solid ${({ theme }) => theme.colors.background};
+    box-shadow: ${({ theme }): string => theme.elevation[4]}!important;
+  }
+
+  /* info */
+  div.SnackbarItem-variantInfo {
+    background-color: ${({ theme }): string => theme.colors.white}!important;
+  }
+  /* success */
+  div.SnackbarItem-variantSuccess {
+    background-color: ${({ theme }): string => theme.colors.white}!important;
+  }
+  /* warning */
+  div.SnackbarItem-variantWarning {
+    background-color: ${({ theme }): string => theme.colors.white}!important;
+  }
+  /* error */
+  div.SnackbarItem-variantError {
+    background-color: ${({ theme }): string => theme.colors.background}!important;
+  }
+`;

package/src/styled/animations.ts

@@ -0,0 +1,36 @@
+import { keyframes } from 'styled-components';
+
+export const pulseAnimation = (color: string) => keyframes`
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 ${color}B3;
+  }
+  30% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(0,0,0,0.0);
+  }
+  45% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0,0,0,0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0,0,0,0);
+  }
+`;
+
+export const shakeAnimation = keyframes`
+  2.5%, 22.5% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  5%, 20% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  7.5%, 12.5%, 17.5% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  10%, 15% {
+    transform: translate3d(4px, 0, 0);
+  }
+`;

package/src/styled/breakpoint.ts

@@ -0,0 +1,7 @@
+export const breakpoint = {
+  tiny: '640px',
+  small: '768px',
+  medium: '1024px',
+  large: '1280px',
+  huge: '1536px',
+} as const;

package/src/styled/device.ts

@@ -0,0 +1,10 @@
+export const device = {
+  // We see everything bigger as the default.
+  xxl: '(max-width: 1921px)',
+  xl: '(max-width: 1500px)',
+  lg: '(max-width: 1200px)',
+  md: '(max-width: 992px)',
+  sm: '(max-width: 768px)',
+  xs: '(max-width: 576px)',
+  xxs: '(max-width: 450px)',
+};

package/src/styled/elevation.ts

@@ -0,0 +1,20 @@
+export type Elevation = 0 | 1 | 2 | 3 | 4 | 5;
+
+// TODO: add link to docs
+export const elevationLight: Record<Elevation, string> = {
+  0: '0 1px 4px -1px hsla(214, 45%, 20%, 0.52)',
+  1: '0 2px 4px -1px hsla(214, 53%, 23%, 0.16), 0 3px 12px -1px hsla(214, 50%, 22%, 0.26)',
+  2: '0 2px 6px -1px hsla(214, 53%, 23%, 0.16), 0 8px 24px -4px hsla(214, 47%, 21%, 0.38)',
+  3: '0 3px 18px -2px hsla(214, 53%, 23%, 0.16), 0 12px 48px -6px hsla(214, 47%, 21%, 0.38)',
+  4: '0 4px 24px -3px hsla(214, 53%, 23%, 0.16), 0 18px 64px -8px hsla(214, 47%, 21%, 0.38)',
+  5: '0 5px 32px -4px hsla(214, 53%, 23%, 0.16), 0 24px 70px -12px hsla(214, 47%, 21%, 0.38)',
+};
+
+export const elevationDark: Record<Elevation, string> = {
+  0: '0 1px 4px -1px hsla(0, 0%, 0%, 0.52)',
+  1: '0 2px 4px -1px hsla(0, 0%, 0%, 0.16), 0 3px 12px -1px hsla(0, 0%, 0%, 0.26)',
+  2: '0 2px 6px -1px hsla(0, 0%, 0%, 0.16), 0 8px 24px -4px hsla(0, 0%, 0%, 0.38)',
+  3: '0 3px 18px -2px hsla(0, 0%, 0%, 0.16), 0 12px 48px -6px hsla(0, 0%, 0%, 0.38)',
+  4: '0 4px 24px -3px hsla(0, 0%, 0%, 0.16), 0 18px 64px -8px hsla(0, 0%, 0%, 0.38)',
+  5: '0 5px 32px -4px hsla(0, 0%, 0%, 0.16), 0 24px 70px -12px hsla(0, 0%, 0%, 0.38)',
+};