From 72e155817515c2de799910a89479496ccf49f108 Mon Sep 17 00:00:00 2001
From: Nauman <mnaumanali94@gmail.com>
Date: Tue, 28 Jul 2020 05:52:57 +0500
Subject: [PATCH] feat: add select option to toc component (#177)

* feat(toc): adds select to toc

* chore: add 72 space increment

* chore: removes redundant flex

Co-authored-by: Nauman Ali <nauman@Muhammads-MacBook-Pro.local>
Co-authored-by: Marc MacLeod <marc@stoplight.io>
---
 src/TableOfContents/index.tsx          |  72 ++-
 src/styles/tailwind/_base.scss         | 760 +++++++++++++++++++++++++
 src/styles/tailwind/tailwind.config.js |   1 +
 3 files changed, 821 insertions(+), 12 deletions(-)

diff --git a/src/TableOfContents/index.tsx b/src/TableOfContents/index.tsx
index 072323a1..0c7b4f99 100644
--- a/src/TableOfContents/index.tsx
+++ b/src/TableOfContents/index.tsx
@@ -1,10 +1,11 @@
-import { Button, Drawer, InputGroup } from '@blueprintjs/core';
+import { Button, Drawer, InputGroup, MenuItem } from '@blueprintjs/core';
 import cn from 'classnames';
 import { flatMap, range } from 'lodash';
 import * as React from 'react';
 
 import { FAIcon, FAIconProp } from '../FAIcon';
 import { ScrollContainer } from '../ScrollContainer';
+import { ItemRenderer, Select } from '../Select';
 
 export type TableOfContentsItem = {
   name: React.ReactNode;
@@ -30,6 +31,12 @@ export type TableOfContentsItem = {
   };
 };
 
+export type SelectItem = {
+  name: React.ReactNode;
+  value: string;
+  label?: string;
+};
+
 export type ITableOfContentsLink = TableOfContentsItem & {
   to?: string;
   exact?: boolean;
@@ -77,6 +84,14 @@ export interface ITableOfContents<T extends TableOfContentsItem = TableOfContent
   // provide filter and onChangeFilter to enable filtering. this will render a filter input at the top of the TOC.
   filter?: string;
   onChangeFilter?: (filter: string) => void;
+
+  // provide filter and onChangeFilter to enable filtering.
+  selectFilter?: {
+    items: SelectItem[];
+    onSelect: (value: SelectItem) => void;
+    activeItem?: SelectItem;
+    initialContent?: string;
+  };
 }
 
 // This is to avoid "mismatch" when rendering during SSR, since we render without scroll container in SSR
@@ -159,6 +174,7 @@ export function TableOfContents<T extends TableOfContentsItem = TableOfContentsI
   withScroller,
   filter,
   onChangeFilter,
+  selectFilter,
   ...innerProps
 }: ITableOfContents<T>) {
   useRenderWithScroll();
@@ -167,22 +183,54 @@ export function TableOfContents<T extends TableOfContentsItem = TableOfContentsI
 
   const hasFilter = filter !== undefined && onChangeFilter;
 
+  const SelectGroup = Select.ofType<SelectItem>();
+
   const toc = <TableOfContentsInner className={cn(hasFilter ? `pb-${padding}` : `py-${padding}`)} {...innerProps} />;
 
+  const renderSelect: ItemRenderer<SelectItem> = (item, { handleClick, modifiers }) => {
+    if (!modifiers.matchesPredicate) {
+      return null;
+    }
+    return (
+      <MenuItem key={item.value} text={item.name} label={item.label} active={modifiers.active} onClick={handleClick} />
+    );
+  };
+
+  function getActiveItem() {
+    return selectFilter?.activeItem;
+  }
+
   const containerClassName = cn('TableOfContents', className);
   const comp = (
     <>
-      {hasFilter && (
-        <InputGroup
-          leftIcon="filter"
-          placeholder="Filter..."
-          className={`m-${padding}`}
-          value={filter}
-          autoFocus
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChangeFilter?.(event.currentTarget.value)}
-        />
-      )}
-
+      <div className="flex">
+        {selectFilter != undefined && (
+          <SelectGroup
+            items={selectFilter.items}
+            onItemSelect={selectFilter.onSelect}
+            itemRenderer={renderSelect}
+            filterable={false}
+            activeItem={getActiveItem()}
+            className={cn(`m-${padding}`, { 'mr-0': hasFilter })}
+          >
+            <Button
+              text={getActiveItem()?.name ?? selectFilter.initialContent ?? 'Fetching...'}
+              alignText="left"
+              rightIcon="caret-down"
+            />
+          </SelectGroup>
+        )}
+        {hasFilter && (
+          <InputGroup
+            leftIcon="search"
+            placeholder="Search..."
+            className={`m-${padding} w-full`}
+            value={filter}
+            autoFocus
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChangeFilter?.(event.currentTarget.value)}
+          />
+        )}
+      </div>
       <div className={containerClassName} data-test={dataTest}>
         {renderWithScroll && withScroller ? <ScrollContainer>{toc}</ScrollContainer> : toc}
       </div>
diff --git a/src/styles/tailwind/_base.scss b/src/styles/tailwind/_base.scss
index c88189ee..c66918d6 100644
--- a/src/styles/tailwind/_base.scss
+++ b/src/styles/tailwind/_base.scss
@@ -243,6 +243,18 @@
   margin-left: calc(16rem * calc(1 - var(--space-x-reverse)));
 }
 
+.space-y-72 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(18rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(18rem * var(--space-y-reverse));
+}
+
+.space-x-72 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(18rem * var(--space-x-reverse));
+  margin-left: calc(18rem * calc(1 - var(--space-x-reverse)));
+}
+
 .space-y-80 > :not(template) ~ :not(template) {
   --space-y-reverse: 0;
   margin-top: calc(20rem * calc(1 - var(--space-y-reverse)));
@@ -519,6 +531,18 @@
   margin-left: calc(-16rem * calc(1 - var(--space-x-reverse)));
 }
 
+.-space-y-72 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(-18rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(-18rem * var(--space-y-reverse));
+}
+
+.-space-x-72 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(-18rem * var(--space-x-reverse));
+  margin-left: calc(-18rem * calc(1 - var(--space-x-reverse)));
+}
+
 .-space-y-80 > :not(template) ~ :not(template) {
   --space-y-reverse: 0;
   margin-top: calc(-20rem * calc(1 - var(--space-y-reverse)));
@@ -6861,6 +6885,10 @@
   height: 16rem;
 }
 
+.h-72 {
+  height: 18rem;
+}
+
 .h-80 {
   height: 20rem;
 }
@@ -7053,6 +7081,10 @@
   margin: 16rem;
 }
 
+.m-72 {
+  margin: 18rem;
+}
+
 .m-80 {
   margin: 20rem;
 }
@@ -7345,6 +7377,16 @@
   margin-right: 16rem;
 }
 
+.my-72 {
+  margin-top: 18rem;
+  margin-bottom: 18rem;
+}
+
+.mx-72 {
+  margin-left: 18rem;
+  margin-right: 18rem;
+}
+
 .my-80 {
   margin-top: 20rem;
   margin-bottom: 20rem;
@@ -7895,6 +7937,22 @@
   margin-left: 16rem;
 }
 
+.mt-72 {
+  margin-top: 18rem;
+}
+
+.mr-72 {
+  margin-right: 18rem;
+}
+
+.mb-72 {
+  margin-bottom: 18rem;
+}
+
+.ml-72 {
+  margin-left: 18rem;
+}
+
 .mt-80 {
   margin-top: 20rem;
 }
@@ -8343,6 +8401,10 @@
   margin: 16rem;
 }
 
+.group:hover .group-hover\:m-72 {
+  margin: 18rem;
+}
+
 .group:hover .group-hover\:m-80 {
   margin: 20rem;
 }
@@ -8635,6 +8697,16 @@
   margin-right: 16rem;
 }
 
+.group:hover .group-hover\:my-72 {
+  margin-top: 18rem;
+  margin-bottom: 18rem;
+}
+
+.group:hover .group-hover\:mx-72 {
+  margin-left: 18rem;
+  margin-right: 18rem;
+}
+
 .group:hover .group-hover\:my-80 {
   margin-top: 20rem;
   margin-bottom: 20rem;
@@ -9185,6 +9257,22 @@
   margin-left: 16rem;
 }
 
+.group:hover .group-hover\:mt-72 {
+  margin-top: 18rem;
+}
+
+.group:hover .group-hover\:mr-72 {
+  margin-right: 18rem;
+}
+
+.group:hover .group-hover\:mb-72 {
+  margin-bottom: 18rem;
+}
+
+.group:hover .group-hover\:ml-72 {
+  margin-left: 18rem;
+}
+
 .group:hover .group-hover\:mt-80 {
   margin-top: 20rem;
 }
@@ -9919,6 +10007,10 @@
   padding: 16rem;
 }
 
+.p-72 {
+  padding: 18rem;
+}
+
 .p-80 {
   padding: 20rem;
 }
@@ -10135,6 +10227,16 @@
   padding-right: 16rem;
 }
 
+.py-72 {
+  padding-top: 18rem;
+  padding-bottom: 18rem;
+}
+
+.px-72 {
+  padding-left: 18rem;
+  padding-right: 18rem;
+}
+
 .py-80 {
   padding-top: 20rem;
   padding-bottom: 20rem;
@@ -10495,6 +10597,22 @@
   padding-left: 16rem;
 }
 
+.pt-72 {
+  padding-top: 18rem;
+}
+
+.pr-72 {
+  padding-right: 18rem;
+}
+
+.pb-72 {
+  padding-bottom: 18rem;
+}
+
+.pl-72 {
+  padding-left: 18rem;
+}
+
 .pt-80 {
   padding-top: 20rem;
 }
@@ -16851,6 +16969,10 @@
   width: 16rem;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
 .w-80 {
   width: 20rem;
 }
@@ -17003,6 +17125,10 @@
   width: 16rem;
 }
 
+.hover\:w-72:hover {
+  width: 18rem;
+}
+
 .hover\:w-80:hover {
   width: 20rem;
 }
@@ -17231,6 +17357,11 @@
   gap: 16rem;
 }
 
+.gap-72 {
+  grid-gap: 18rem;
+  gap: 18rem;
+}
+
 .gap-80 {
   grid-gap: 20rem;
   gap: 20rem;
@@ -17371,6 +17502,12 @@
        column-gap: 16rem;
 }
 
+.col-gap-72 {
+  grid-column-gap: 18rem;
+  -moz-column-gap: 18rem;
+       column-gap: 18rem;
+}
+
 .col-gap-80 {
   grid-column-gap: 20rem;
   -moz-column-gap: 20rem;
@@ -17495,6 +17632,11 @@
   row-gap: 16rem;
 }
 
+.row-gap-72 {
+  grid-row-gap: 18rem;
+  row-gap: 18rem;
+}
+
 .row-gap-80 {
   grid-row-gap: 20rem;
   row-gap: 20rem;
@@ -18472,6 +18614,10 @@
   --transform-translate-x: 16rem;
 }
 
+.translate-x-72 {
+  --transform-translate-x: 18rem;
+}
+
 .translate-x-80 {
   --transform-translate-x: 20rem;
 }
@@ -18564,6 +18710,10 @@
   --transform-translate-x: -16rem;
 }
 
+.-translate-x-72 {
+  --transform-translate-x: -18rem;
+}
+
 .-translate-x-80 {
   --transform-translate-x: -20rem;
 }
@@ -18676,6 +18826,10 @@
   --transform-translate-y: 16rem;
 }
 
+.translate-y-72 {
+  --transform-translate-y: 18rem;
+}
+
 .translate-y-80 {
   --transform-translate-y: 20rem;
 }
@@ -18768,6 +18922,10 @@
   --transform-translate-y: -16rem;
 }
 
+.-translate-y-72 {
+  --transform-translate-y: -18rem;
+}
+
 .-translate-y-80 {
   --transform-translate-y: -20rem;
 }
@@ -18880,6 +19038,10 @@
   --transform-translate-x: 16rem;
 }
 
+.hover\:translate-x-72:hover {
+  --transform-translate-x: 18rem;
+}
+
 .hover\:translate-x-80:hover {
   --transform-translate-x: 20rem;
 }
@@ -18972,6 +19134,10 @@
   --transform-translate-x: -16rem;
 }
 
+.hover\:-translate-x-72:hover {
+  --transform-translate-x: -18rem;
+}
+
 .hover\:-translate-x-80:hover {
   --transform-translate-x: -20rem;
 }
@@ -19084,6 +19250,10 @@
   --transform-translate-y: 16rem;
 }
 
+.hover\:translate-y-72:hover {
+  --transform-translate-y: 18rem;
+}
+
 .hover\:translate-y-80:hover {
   --transform-translate-y: 20rem;
 }
@@ -19176,6 +19346,10 @@
   --transform-translate-y: -16rem;
 }
 
+.hover\:-translate-y-72:hover {
+  --transform-translate-y: -18rem;
+}
+
 .hover\:-translate-y-80:hover {
   --transform-translate-y: -20rem;
 }
@@ -19288,6 +19462,10 @@
   --transform-translate-x: 16rem;
 }
 
+.focus\:translate-x-72:focus {
+  --transform-translate-x: 18rem;
+}
+
 .focus\:translate-x-80:focus {
   --transform-translate-x: 20rem;
 }
@@ -19380,6 +19558,10 @@
   --transform-translate-x: -16rem;
 }
 
+.focus\:-translate-x-72:focus {
+  --transform-translate-x: -18rem;
+}
+
 .focus\:-translate-x-80:focus {
   --transform-translate-x: -20rem;
 }
@@ -19492,6 +19674,10 @@
   --transform-translate-y: 16rem;
 }
 
+.focus\:translate-y-72:focus {
+  --transform-translate-y: 18rem;
+}
+
 .focus\:translate-y-80:focus {
   --transform-translate-y: 20rem;
 }
@@ -19584,6 +19770,10 @@
   --transform-translate-y: -16rem;
 }
 
+.focus\:-translate-y-72:focus {
+  --transform-translate-y: -18rem;
+}
+
 .focus\:-translate-y-80:focus {
   --transform-translate-y: -20rem;
 }
@@ -20734,6 +20924,18 @@ video {
     margin-left: calc(16rem * calc(1 - var(--space-x-reverse)));
   }
 
+  .sm\:space-y-72 > :not(template) ~ :not(template) {
+    --space-y-reverse: 0;
+    margin-top: calc(18rem * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(18rem * var(--space-y-reverse));
+  }
+
+  .sm\:space-x-72 > :not(template) ~ :not(template) {
+    --space-x-reverse: 0;
+    margin-right: calc(18rem * var(--space-x-reverse));
+    margin-left: calc(18rem * calc(1 - var(--space-x-reverse)));
+  }
+
   .sm\:space-y-80 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
     margin-top: calc(20rem * calc(1 - var(--space-y-reverse)));
@@ -21010,6 +21212,18 @@ video {
     margin-left: calc(-16rem * calc(1 - var(--space-x-reverse)));
   }
 
+  .sm\:-space-y-72 > :not(template) ~ :not(template) {
+    --space-y-reverse: 0;
+    margin-top: calc(-18rem * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(-18rem * var(--space-y-reverse));
+  }
+
+  .sm\:-space-x-72 > :not(template) ~ :not(template) {
+    --space-x-reverse: 0;
+    margin-right: calc(-18rem * var(--space-x-reverse));
+    margin-left: calc(-18rem * calc(1 - var(--space-x-reverse)));
+  }
+
   .sm\:-space-y-80 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
     margin-top: calc(-20rem * calc(1 - var(--space-y-reverse)));
@@ -21936,6 +22150,10 @@ video {
     height: 16rem;
   }
 
+  .sm\:h-72 {
+    height: 18rem;
+  }
+
   .sm\:h-80 {
     height: 20rem;
   }
@@ -22084,6 +22302,10 @@ video {
     margin: 16rem;
   }
 
+  .sm\:m-72 {
+    margin: 18rem;
+  }
+
   .sm\:m-80 {
     margin: 20rem;
   }
@@ -22376,6 +22598,16 @@ video {
     margin-right: 16rem;
   }
 
+  .sm\:my-72 {
+    margin-top: 18rem;
+    margin-bottom: 18rem;
+  }
+
+  .sm\:mx-72 {
+    margin-left: 18rem;
+    margin-right: 18rem;
+  }
+
   .sm\:my-80 {
     margin-top: 20rem;
     margin-bottom: 20rem;
@@ -22926,6 +23158,22 @@ video {
     margin-left: 16rem;
   }
 
+  .sm\:mt-72 {
+    margin-top: 18rem;
+  }
+
+  .sm\:mr-72 {
+    margin-right: 18rem;
+  }
+
+  .sm\:mb-72 {
+    margin-bottom: 18rem;
+  }
+
+  .sm\:ml-72 {
+    margin-left: 18rem;
+  }
+
   .sm\:mt-80 {
     margin-top: 20rem;
   }
@@ -23374,6 +23622,10 @@ video {
     margin: 16rem;
   }
 
+  .group:hover .sm\:group-hover\:m-72 {
+    margin: 18rem;
+  }
+
   .group:hover .sm\:group-hover\:m-80 {
     margin: 20rem;
   }
@@ -23666,6 +23918,16 @@ video {
     margin-right: 16rem;
   }
 
+  .group:hover .sm\:group-hover\:my-72 {
+    margin-top: 18rem;
+    margin-bottom: 18rem;
+  }
+
+  .group:hover .sm\:group-hover\:mx-72 {
+    margin-left: 18rem;
+    margin-right: 18rem;
+  }
+
   .group:hover .sm\:group-hover\:my-80 {
     margin-top: 20rem;
     margin-bottom: 20rem;
@@ -24216,6 +24478,22 @@ video {
     margin-left: 16rem;
   }
 
+  .group:hover .sm\:group-hover\:mt-72 {
+    margin-top: 18rem;
+  }
+
+  .group:hover .sm\:group-hover\:mr-72 {
+    margin-right: 18rem;
+  }
+
+  .group:hover .sm\:group-hover\:mb-72 {
+    margin-bottom: 18rem;
+  }
+
+  .group:hover .sm\:group-hover\:ml-72 {
+    margin-left: 18rem;
+  }
+
   .group:hover .sm\:group-hover\:mt-80 {
     margin-top: 20rem;
   }
@@ -24720,6 +24998,10 @@ video {
     padding: 16rem;
   }
 
+  .sm\:p-72 {
+    padding: 18rem;
+  }
+
   .sm\:p-80 {
     padding: 20rem;
   }
@@ -24936,6 +25218,16 @@ video {
     padding-right: 16rem;
   }
 
+  .sm\:py-72 {
+    padding-top: 18rem;
+    padding-bottom: 18rem;
+  }
+
+  .sm\:px-72 {
+    padding-left: 18rem;
+    padding-right: 18rem;
+  }
+
   .sm\:py-80 {
     padding-top: 20rem;
     padding-bottom: 20rem;
@@ -25296,6 +25588,22 @@ video {
     padding-left: 16rem;
   }
 
+  .sm\:pt-72 {
+    padding-top: 18rem;
+  }
+
+  .sm\:pr-72 {
+    padding-right: 18rem;
+  }
+
+  .sm\:pb-72 {
+    padding-bottom: 18rem;
+  }
+
+  .sm\:pl-72 {
+    padding-left: 18rem;
+  }
+
   .sm\:pt-80 {
     padding-top: 20rem;
   }
@@ -29144,6 +29452,10 @@ video {
     width: 16rem;
   }
 
+  .sm\:w-72 {
+    width: 18rem;
+  }
+
   .sm\:w-80 {
     width: 20rem;
   }
@@ -29296,6 +29608,10 @@ video {
     width: 16rem;
   }
 
+  .sm\:hover\:w-72:hover {
+    width: 18rem;
+  }
+
   .sm\:hover\:w-80:hover {
     width: 20rem;
   }
@@ -29468,6 +29784,11 @@ video {
     gap: 16rem;
   }
 
+  .sm\:gap-72 {
+    grid-gap: 18rem;
+    gap: 18rem;
+  }
+
   .sm\:gap-80 {
     grid-gap: 20rem;
     gap: 20rem;
@@ -29608,6 +29929,12 @@ video {
          column-gap: 16rem;
   }
 
+  .sm\:col-gap-72 {
+    grid-column-gap: 18rem;
+    -moz-column-gap: 18rem;
+         column-gap: 18rem;
+  }
+
   .sm\:col-gap-80 {
     grid-column-gap: 20rem;
     -moz-column-gap: 20rem;
@@ -29732,6 +30059,11 @@ video {
     row-gap: 16rem;
   }
 
+  .sm\:row-gap-72 {
+    grid-row-gap: 18rem;
+    row-gap: 18rem;
+  }
+
   .sm\:row-gap-80 {
     grid-row-gap: 20rem;
     row-gap: 20rem;
@@ -30709,6 +31041,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .sm\:translate-x-72 {
+    --transform-translate-x: 18rem;
+  }
+
   .sm\:translate-x-80 {
     --transform-translate-x: 20rem;
   }
@@ -30801,6 +31137,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .sm\:-translate-x-72 {
+    --transform-translate-x: -18rem;
+  }
+
   .sm\:-translate-x-80 {
     --transform-translate-x: -20rem;
   }
@@ -30913,6 +31253,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .sm\:translate-y-72 {
+    --transform-translate-y: 18rem;
+  }
+
   .sm\:translate-y-80 {
     --transform-translate-y: 20rem;
   }
@@ -31005,6 +31349,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .sm\:-translate-y-72 {
+    --transform-translate-y: -18rem;
+  }
+
   .sm\:-translate-y-80 {
     --transform-translate-y: -20rem;
   }
@@ -31117,6 +31465,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .sm\:hover\:translate-x-72:hover {
+    --transform-translate-x: 18rem;
+  }
+
   .sm\:hover\:translate-x-80:hover {
     --transform-translate-x: 20rem;
   }
@@ -31209,6 +31561,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .sm\:hover\:-translate-x-72:hover {
+    --transform-translate-x: -18rem;
+  }
+
   .sm\:hover\:-translate-x-80:hover {
     --transform-translate-x: -20rem;
   }
@@ -31321,6 +31677,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .sm\:hover\:translate-y-72:hover {
+    --transform-translate-y: 18rem;
+  }
+
   .sm\:hover\:translate-y-80:hover {
     --transform-translate-y: 20rem;
   }
@@ -31413,6 +31773,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .sm\:hover\:-translate-y-72:hover {
+    --transform-translate-y: -18rem;
+  }
+
   .sm\:hover\:-translate-y-80:hover {
     --transform-translate-y: -20rem;
   }
@@ -31525,6 +31889,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .sm\:focus\:translate-x-72:focus {
+    --transform-translate-x: 18rem;
+  }
+
   .sm\:focus\:translate-x-80:focus {
     --transform-translate-x: 20rem;
   }
@@ -31617,6 +31985,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .sm\:focus\:-translate-x-72:focus {
+    --transform-translate-x: -18rem;
+  }
+
   .sm\:focus\:-translate-x-80:focus {
     --transform-translate-x: -20rem;
   }
@@ -31729,6 +32101,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .sm\:focus\:translate-y-72:focus {
+    --transform-translate-y: 18rem;
+  }
+
   .sm\:focus\:translate-y-80:focus {
     --transform-translate-y: 20rem;
   }
@@ -31821,6 +32197,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .sm\:focus\:-translate-y-72:focus {
+    --transform-translate-y: -18rem;
+  }
+
   .sm\:focus\:-translate-y-80:focus {
     --transform-translate-y: -20rem;
   }
@@ -32371,6 +32751,18 @@ video {
     margin-left: calc(16rem * calc(1 - var(--space-x-reverse)));
   }
 
+  .md\:space-y-72 > :not(template) ~ :not(template) {
+    --space-y-reverse: 0;
+    margin-top: calc(18rem * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(18rem * var(--space-y-reverse));
+  }
+
+  .md\:space-x-72 > :not(template) ~ :not(template) {
+    --space-x-reverse: 0;
+    margin-right: calc(18rem * var(--space-x-reverse));
+    margin-left: calc(18rem * calc(1 - var(--space-x-reverse)));
+  }
+
   .md\:space-y-80 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
     margin-top: calc(20rem * calc(1 - var(--space-y-reverse)));
@@ -32647,6 +33039,18 @@ video {
     margin-left: calc(-16rem * calc(1 - var(--space-x-reverse)));
   }
 
+  .md\:-space-y-72 > :not(template) ~ :not(template) {
+    --space-y-reverse: 0;
+    margin-top: calc(-18rem * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(-18rem * var(--space-y-reverse));
+  }
+
+  .md\:-space-x-72 > :not(template) ~ :not(template) {
+    --space-x-reverse: 0;
+    margin-right: calc(-18rem * var(--space-x-reverse));
+    margin-left: calc(-18rem * calc(1 - var(--space-x-reverse)));
+  }
+
   .md\:-space-y-80 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
     margin-top: calc(-20rem * calc(1 - var(--space-y-reverse)));
@@ -33573,6 +33977,10 @@ video {
     height: 16rem;
   }
 
+  .md\:h-72 {
+    height: 18rem;
+  }
+
   .md\:h-80 {
     height: 20rem;
   }
@@ -33721,6 +34129,10 @@ video {
     margin: 16rem;
   }
 
+  .md\:m-72 {
+    margin: 18rem;
+  }
+
   .md\:m-80 {
     margin: 20rem;
   }
@@ -34013,6 +34425,16 @@ video {
     margin-right: 16rem;
   }
 
+  .md\:my-72 {
+    margin-top: 18rem;
+    margin-bottom: 18rem;
+  }
+
+  .md\:mx-72 {
+    margin-left: 18rem;
+    margin-right: 18rem;
+  }
+
   .md\:my-80 {
     margin-top: 20rem;
     margin-bottom: 20rem;
@@ -34563,6 +34985,22 @@ video {
     margin-left: 16rem;
   }
 
+  .md\:mt-72 {
+    margin-top: 18rem;
+  }
+
+  .md\:mr-72 {
+    margin-right: 18rem;
+  }
+
+  .md\:mb-72 {
+    margin-bottom: 18rem;
+  }
+
+  .md\:ml-72 {
+    margin-left: 18rem;
+  }
+
   .md\:mt-80 {
     margin-top: 20rem;
   }
@@ -35011,6 +35449,10 @@ video {
     margin: 16rem;
   }
 
+  .group:hover .md\:group-hover\:m-72 {
+    margin: 18rem;
+  }
+
   .group:hover .md\:group-hover\:m-80 {
     margin: 20rem;
   }
@@ -35303,6 +35745,16 @@ video {
     margin-right: 16rem;
   }
 
+  .group:hover .md\:group-hover\:my-72 {
+    margin-top: 18rem;
+    margin-bottom: 18rem;
+  }
+
+  .group:hover .md\:group-hover\:mx-72 {
+    margin-left: 18rem;
+    margin-right: 18rem;
+  }
+
   .group:hover .md\:group-hover\:my-80 {
     margin-top: 20rem;
     margin-bottom: 20rem;
@@ -35853,6 +36305,22 @@ video {
     margin-left: 16rem;
   }
 
+  .group:hover .md\:group-hover\:mt-72 {
+    margin-top: 18rem;
+  }
+
+  .group:hover .md\:group-hover\:mr-72 {
+    margin-right: 18rem;
+  }
+
+  .group:hover .md\:group-hover\:mb-72 {
+    margin-bottom: 18rem;
+  }
+
+  .group:hover .md\:group-hover\:ml-72 {
+    margin-left: 18rem;
+  }
+
   .group:hover .md\:group-hover\:mt-80 {
     margin-top: 20rem;
   }
@@ -36357,6 +36825,10 @@ video {
     padding: 16rem;
   }
 
+  .md\:p-72 {
+    padding: 18rem;
+  }
+
   .md\:p-80 {
     padding: 20rem;
   }
@@ -36573,6 +37045,16 @@ video {
     padding-right: 16rem;
   }
 
+  .md\:py-72 {
+    padding-top: 18rem;
+    padding-bottom: 18rem;
+  }
+
+  .md\:px-72 {
+    padding-left: 18rem;
+    padding-right: 18rem;
+  }
+
   .md\:py-80 {
     padding-top: 20rem;
     padding-bottom: 20rem;
@@ -36933,6 +37415,22 @@ video {
     padding-left: 16rem;
   }
 
+  .md\:pt-72 {
+    padding-top: 18rem;
+  }
+
+  .md\:pr-72 {
+    padding-right: 18rem;
+  }
+
+  .md\:pb-72 {
+    padding-bottom: 18rem;
+  }
+
+  .md\:pl-72 {
+    padding-left: 18rem;
+  }
+
   .md\:pt-80 {
     padding-top: 20rem;
   }
@@ -40781,6 +41279,10 @@ video {
     width: 16rem;
   }
 
+  .md\:w-72 {
+    width: 18rem;
+  }
+
   .md\:w-80 {
     width: 20rem;
   }
@@ -40933,6 +41435,10 @@ video {
     width: 16rem;
   }
 
+  .md\:hover\:w-72:hover {
+    width: 18rem;
+  }
+
   .md\:hover\:w-80:hover {
     width: 20rem;
   }
@@ -41105,6 +41611,11 @@ video {
     gap: 16rem;
   }
 
+  .md\:gap-72 {
+    grid-gap: 18rem;
+    gap: 18rem;
+  }
+
   .md\:gap-80 {
     grid-gap: 20rem;
     gap: 20rem;
@@ -41245,6 +41756,12 @@ video {
          column-gap: 16rem;
   }
 
+  .md\:col-gap-72 {
+    grid-column-gap: 18rem;
+    -moz-column-gap: 18rem;
+         column-gap: 18rem;
+  }
+
   .md\:col-gap-80 {
     grid-column-gap: 20rem;
     -moz-column-gap: 20rem;
@@ -41369,6 +41886,11 @@ video {
     row-gap: 16rem;
   }
 
+  .md\:row-gap-72 {
+    grid-row-gap: 18rem;
+    row-gap: 18rem;
+  }
+
   .md\:row-gap-80 {
     grid-row-gap: 20rem;
     row-gap: 20rem;
@@ -42346,6 +42868,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .md\:translate-x-72 {
+    --transform-translate-x: 18rem;
+  }
+
   .md\:translate-x-80 {
     --transform-translate-x: 20rem;
   }
@@ -42438,6 +42964,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .md\:-translate-x-72 {
+    --transform-translate-x: -18rem;
+  }
+
   .md\:-translate-x-80 {
     --transform-translate-x: -20rem;
   }
@@ -42550,6 +43080,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .md\:translate-y-72 {
+    --transform-translate-y: 18rem;
+  }
+
   .md\:translate-y-80 {
     --transform-translate-y: 20rem;
   }
@@ -42642,6 +43176,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .md\:-translate-y-72 {
+    --transform-translate-y: -18rem;
+  }
+
   .md\:-translate-y-80 {
     --transform-translate-y: -20rem;
   }
@@ -42754,6 +43292,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .md\:hover\:translate-x-72:hover {
+    --transform-translate-x: 18rem;
+  }
+
   .md\:hover\:translate-x-80:hover {
     --transform-translate-x: 20rem;
   }
@@ -42846,6 +43388,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .md\:hover\:-translate-x-72:hover {
+    --transform-translate-x: -18rem;
+  }
+
   .md\:hover\:-translate-x-80:hover {
     --transform-translate-x: -20rem;
   }
@@ -42958,6 +43504,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .md\:hover\:translate-y-72:hover {
+    --transform-translate-y: 18rem;
+  }
+
   .md\:hover\:translate-y-80:hover {
     --transform-translate-y: 20rem;
   }
@@ -43050,6 +43600,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .md\:hover\:-translate-y-72:hover {
+    --transform-translate-y: -18rem;
+  }
+
   .md\:hover\:-translate-y-80:hover {
     --transform-translate-y: -20rem;
   }
@@ -43162,6 +43716,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .md\:focus\:translate-x-72:focus {
+    --transform-translate-x: 18rem;
+  }
+
   .md\:focus\:translate-x-80:focus {
     --transform-translate-x: 20rem;
   }
@@ -43254,6 +43812,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .md\:focus\:-translate-x-72:focus {
+    --transform-translate-x: -18rem;
+  }
+
   .md\:focus\:-translate-x-80:focus {
     --transform-translate-x: -20rem;
   }
@@ -43366,6 +43928,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .md\:focus\:translate-y-72:focus {
+    --transform-translate-y: 18rem;
+  }
+
   .md\:focus\:translate-y-80:focus {
     --transform-translate-y: 20rem;
   }
@@ -43458,6 +44024,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .md\:focus\:-translate-y-72:focus {
+    --transform-translate-y: -18rem;
+  }
+
   .md\:focus\:-translate-y-80:focus {
     --transform-translate-y: -20rem;
   }
@@ -44008,6 +44578,18 @@ video {
     margin-left: calc(16rem * calc(1 - var(--space-x-reverse)));
   }
 
+  .print\:space-y-72 > :not(template) ~ :not(template) {
+    --space-y-reverse: 0;
+    margin-top: calc(18rem * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(18rem * var(--space-y-reverse));
+  }
+
+  .print\:space-x-72 > :not(template) ~ :not(template) {
+    --space-x-reverse: 0;
+    margin-right: calc(18rem * var(--space-x-reverse));
+    margin-left: calc(18rem * calc(1 - var(--space-x-reverse)));
+  }
+
   .print\:space-y-80 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
     margin-top: calc(20rem * calc(1 - var(--space-y-reverse)));
@@ -44284,6 +44866,18 @@ video {
     margin-left: calc(-16rem * calc(1 - var(--space-x-reverse)));
   }
 
+  .print\:-space-y-72 > :not(template) ~ :not(template) {
+    --space-y-reverse: 0;
+    margin-top: calc(-18rem * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(-18rem * var(--space-y-reverse));
+  }
+
+  .print\:-space-x-72 > :not(template) ~ :not(template) {
+    --space-x-reverse: 0;
+    margin-right: calc(-18rem * var(--space-x-reverse));
+    margin-left: calc(-18rem * calc(1 - var(--space-x-reverse)));
+  }
+
   .print\:-space-y-80 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
     margin-top: calc(-20rem * calc(1 - var(--space-y-reverse)));
@@ -45210,6 +45804,10 @@ video {
     height: 16rem;
   }
 
+  .print\:h-72 {
+    height: 18rem;
+  }
+
   .print\:h-80 {
     height: 20rem;
   }
@@ -45358,6 +45956,10 @@ video {
     margin: 16rem;
   }
 
+  .print\:m-72 {
+    margin: 18rem;
+  }
+
   .print\:m-80 {
     margin: 20rem;
   }
@@ -45650,6 +46252,16 @@ video {
     margin-right: 16rem;
   }
 
+  .print\:my-72 {
+    margin-top: 18rem;
+    margin-bottom: 18rem;
+  }
+
+  .print\:mx-72 {
+    margin-left: 18rem;
+    margin-right: 18rem;
+  }
+
   .print\:my-80 {
     margin-top: 20rem;
     margin-bottom: 20rem;
@@ -46200,6 +46812,22 @@ video {
     margin-left: 16rem;
   }
 
+  .print\:mt-72 {
+    margin-top: 18rem;
+  }
+
+  .print\:mr-72 {
+    margin-right: 18rem;
+  }
+
+  .print\:mb-72 {
+    margin-bottom: 18rem;
+  }
+
+  .print\:ml-72 {
+    margin-left: 18rem;
+  }
+
   .print\:mt-80 {
     margin-top: 20rem;
   }
@@ -46648,6 +47276,10 @@ video {
     margin: 16rem;
   }
 
+  .group:hover .print\:group-hover\:m-72 {
+    margin: 18rem;
+  }
+
   .group:hover .print\:group-hover\:m-80 {
     margin: 20rem;
   }
@@ -46940,6 +47572,16 @@ video {
     margin-right: 16rem;
   }
 
+  .group:hover .print\:group-hover\:my-72 {
+    margin-top: 18rem;
+    margin-bottom: 18rem;
+  }
+
+  .group:hover .print\:group-hover\:mx-72 {
+    margin-left: 18rem;
+    margin-right: 18rem;
+  }
+
   .group:hover .print\:group-hover\:my-80 {
     margin-top: 20rem;
     margin-bottom: 20rem;
@@ -47490,6 +48132,22 @@ video {
     margin-left: 16rem;
   }
 
+  .group:hover .print\:group-hover\:mt-72 {
+    margin-top: 18rem;
+  }
+
+  .group:hover .print\:group-hover\:mr-72 {
+    margin-right: 18rem;
+  }
+
+  .group:hover .print\:group-hover\:mb-72 {
+    margin-bottom: 18rem;
+  }
+
+  .group:hover .print\:group-hover\:ml-72 {
+    margin-left: 18rem;
+  }
+
   .group:hover .print\:group-hover\:mt-80 {
     margin-top: 20rem;
   }
@@ -47994,6 +48652,10 @@ video {
     padding: 16rem;
   }
 
+  .print\:p-72 {
+    padding: 18rem;
+  }
+
   .print\:p-80 {
     padding: 20rem;
   }
@@ -48210,6 +48872,16 @@ video {
     padding-right: 16rem;
   }
 
+  .print\:py-72 {
+    padding-top: 18rem;
+    padding-bottom: 18rem;
+  }
+
+  .print\:px-72 {
+    padding-left: 18rem;
+    padding-right: 18rem;
+  }
+
   .print\:py-80 {
     padding-top: 20rem;
     padding-bottom: 20rem;
@@ -48570,6 +49242,22 @@ video {
     padding-left: 16rem;
   }
 
+  .print\:pt-72 {
+    padding-top: 18rem;
+  }
+
+  .print\:pr-72 {
+    padding-right: 18rem;
+  }
+
+  .print\:pb-72 {
+    padding-bottom: 18rem;
+  }
+
+  .print\:pl-72 {
+    padding-left: 18rem;
+  }
+
   .print\:pt-80 {
     padding-top: 20rem;
   }
@@ -52418,6 +53106,10 @@ video {
     width: 16rem;
   }
 
+  .print\:w-72 {
+    width: 18rem;
+  }
+
   .print\:w-80 {
     width: 20rem;
   }
@@ -52570,6 +53262,10 @@ video {
     width: 16rem;
   }
 
+  .print\:hover\:w-72:hover {
+    width: 18rem;
+  }
+
   .print\:hover\:w-80:hover {
     width: 20rem;
   }
@@ -52742,6 +53438,11 @@ video {
     gap: 16rem;
   }
 
+  .print\:gap-72 {
+    grid-gap: 18rem;
+    gap: 18rem;
+  }
+
   .print\:gap-80 {
     grid-gap: 20rem;
     gap: 20rem;
@@ -52882,6 +53583,12 @@ video {
          column-gap: 16rem;
   }
 
+  .print\:col-gap-72 {
+    grid-column-gap: 18rem;
+    -moz-column-gap: 18rem;
+         column-gap: 18rem;
+  }
+
   .print\:col-gap-80 {
     grid-column-gap: 20rem;
     -moz-column-gap: 20rem;
@@ -53006,6 +53713,11 @@ video {
     row-gap: 16rem;
   }
 
+  .print\:row-gap-72 {
+    grid-row-gap: 18rem;
+    row-gap: 18rem;
+  }
+
   .print\:row-gap-80 {
     grid-row-gap: 20rem;
     row-gap: 20rem;
@@ -53983,6 +54695,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .print\:translate-x-72 {
+    --transform-translate-x: 18rem;
+  }
+
   .print\:translate-x-80 {
     --transform-translate-x: 20rem;
   }
@@ -54075,6 +54791,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .print\:-translate-x-72 {
+    --transform-translate-x: -18rem;
+  }
+
   .print\:-translate-x-80 {
     --transform-translate-x: -20rem;
   }
@@ -54187,6 +54907,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .print\:translate-y-72 {
+    --transform-translate-y: 18rem;
+  }
+
   .print\:translate-y-80 {
     --transform-translate-y: 20rem;
   }
@@ -54279,6 +55003,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .print\:-translate-y-72 {
+    --transform-translate-y: -18rem;
+  }
+
   .print\:-translate-y-80 {
     --transform-translate-y: -20rem;
   }
@@ -54391,6 +55119,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .print\:hover\:translate-x-72:hover {
+    --transform-translate-x: 18rem;
+  }
+
   .print\:hover\:translate-x-80:hover {
     --transform-translate-x: 20rem;
   }
@@ -54483,6 +55215,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .print\:hover\:-translate-x-72:hover {
+    --transform-translate-x: -18rem;
+  }
+
   .print\:hover\:-translate-x-80:hover {
     --transform-translate-x: -20rem;
   }
@@ -54595,6 +55331,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .print\:hover\:translate-y-72:hover {
+    --transform-translate-y: 18rem;
+  }
+
   .print\:hover\:translate-y-80:hover {
     --transform-translate-y: 20rem;
   }
@@ -54687,6 +55427,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .print\:hover\:-translate-y-72:hover {
+    --transform-translate-y: -18rem;
+  }
+
   .print\:hover\:-translate-y-80:hover {
     --transform-translate-y: -20rem;
   }
@@ -54799,6 +55543,10 @@ video {
     --transform-translate-x: 16rem;
   }
 
+  .print\:focus\:translate-x-72:focus {
+    --transform-translate-x: 18rem;
+  }
+
   .print\:focus\:translate-x-80:focus {
     --transform-translate-x: 20rem;
   }
@@ -54891,6 +55639,10 @@ video {
     --transform-translate-x: -16rem;
   }
 
+  .print\:focus\:-translate-x-72:focus {
+    --transform-translate-x: -18rem;
+  }
+
   .print\:focus\:-translate-x-80:focus {
     --transform-translate-x: -20rem;
   }
@@ -55003,6 +55755,10 @@ video {
     --transform-translate-y: 16rem;
   }
 
+  .print\:focus\:translate-y-72:focus {
+    --transform-translate-y: 18rem;
+  }
+
   .print\:focus\:translate-y-80:focus {
     --transform-translate-y: 20rem;
   }
@@ -55095,6 +55851,10 @@ video {
     --transform-translate-y: -16rem;
   }
 
+  .print\:focus\:-translate-y-72:focus {
+    --transform-translate-y: -18rem;
+  }
+
   .print\:focus\:-translate-y-80:focus {
     --transform-translate-y: -20rem;
   }
diff --git a/src/styles/tailwind/tailwind.config.js b/src/styles/tailwind/tailwind.config.js
index 3161b14c..e9fd2ba4 100644
--- a/src/styles/tailwind/tailwind.config.js
+++ b/src/styles/tailwind/tailwind.config.js
@@ -68,6 +68,7 @@ module.exports = {
       '48': '12rem',
       '56': '14rem',
       '64': '16rem',
+      '72': '18rem',
       '80': '20rem',
       '96': '24rem',
       '128': '32rem',