lookbook 1.0.8 → 1.1.0

data/public/lookbook-assets/css/lookbook.css

@@ -217,7 +217,7 @@ input::placeholder, textarea::placeholder {
 }
 
 select {
-  color-adjust: exact;
+  print-color-adjust: exact;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right .5rem center;
   background-repeat: no-repeat;
@@ -230,14 +230,15 @@ select {
   background-position: initial;
   background-repeat: unset;
   background-size: initial;
-  color-adjust: unset;
+  print-color-adjust: unset;
   padding-right: .75rem;
 }
 
 [type="checkbox"], [type="radio"] {
   appearance: none;
-  color-adjust: exact;
+  print-color-adjust: exact;
   vertical-align: middle;
+  -webkit-user-select: none;
   user-select: none;
   height: 1rem;
   width: 1rem;
@@ -318,6 +319,7 @@ select {
 }
 
 [type="file"]:focus {
+  outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
 
@@ -420,6 +422,49 @@ pre[class*="language-"] {
   --tw-backdrop-sepia: ;
 }
 
+.form-input, .form-textarea, .form-select, .form-multiselect {
+  appearance: none;
+  --tw-shadow: 0 0 #0000;
+  background-color: #fff;
+  border-width: 1px;
+  border-color: #6b7280;
+  border-radius: 0;
+  padding: .5rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty, );
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #2563eb;
+  outline: 2px solid #0000;
+}
+
+.form-input::placeholder, .form-textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.form-input::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+.form-input::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+.form-input::-webkit-datetime-edit, .form-input::-webkit-datetime-edit-year-field, .form-input::-webkit-datetime-edit-month-field, .form-input::-webkit-datetime-edit-day-field, .form-input::-webkit-datetime-edit-hour-field, .form-input::-webkit-datetime-edit-minute-field, .form-input::-webkit-datetime-edit-second-field, .form-input::-webkit-datetime-edit-millisecond-field, .form-input::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .prose {
   color: var(--tw-prose-body);
   max-width: 65ch;
@@ -1606,6 +1651,7 @@ pre[class*="language-"] {
   width: min-content;
   z-index: 10;
   height: 100%;
+  -webkit-user-select: none;
   user-select: none;
   border-style: dashed;
   border-right-width: 1px;
@@ -1648,7 +1694,7 @@ pre[class*="language-"] {
 [data-component="icon"] {
   flex: none;
   line-height: 1;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   display: block;
@@ -1669,6 +1715,85 @@ pre[class*="language-"] {
   padding: 1rem;
 }
 
+[data-component="params-editor"] table:not(.linear) thead tr {
+  --tw-border-opacity: 1;
+  border-bottom-width: 1px;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+[data-component="params-editor"] table:not(.linear) thead th {
+  text-align: left;
+  vertical-align: middle;
+  padding: 1rem;
+  font-weight: 700;
+}
+
+[data-component="params-editor"] table:not(.linear) thead th.param-label {
+  width: 18%;
+}
+
+[data-component="params-editor"] table:not(.linear) thead th.param-input {
+  width: 45%;
+}
+
+[data-component="params-editor"] table:not(.linear) tbody tr + tr td {
+  --tw-border-opacity: 1;
+  border-top-width: 1px;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+[data-component="params-editor"] table:not(.linear) tbody td {
+  vertical-align: middle;
+  padding: 1rem;
+}
+
+[data-component="params-editor"] table:not(.linear) tbody td.param-label {
+  font-weight: 700;
+}
+
+[data-component="params-editor"] table:not(.linear) tbody .param-input-wrapper {
+  min-height: 38px;
+}
+
+[data-component="params-editor"] table.linear table, [data-component="params-editor"] table.linear tr, [data-component="params-editor"] table.linear td {
+  display: block;
+}
+
+[data-component="params-editor"] table.linear thead, [data-component="params-editor"] table.linear th {
+  display: none;
+}
+
+[data-component="params-editor"] table.linear tr:not(:last-child) {
+  --tw-border-opacity: 1;
+  border-bottom-width: 1px;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+[data-component="params-editor"] table.linear tr > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)) );
+  margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
+}
+
+[data-component="params-editor"] table.linear tr {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+[data-component="params-editor"] table.linear td {
+  vertical-align: middle;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+[data-component="params-editor"] table.linear td.param-label {
+  font-weight: 700;
+}
+
+[data-component="params-editor"] table.linear td.param-description-empty {
+  display: none;
+}
+
 [data-component="prose"] [data-component="code"] {
   border-width: 1px;
   border-color: var(--lookbook-divider);
@@ -1725,15 +1850,16 @@ pre[class*="language-"] {
 }
 
 [data-component="viewport"] .resize-handle:hover {
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+  background-color: var(--lookbook-draggable-hint);
   --tw-bg-opacity: .2;
 }
 
 [data-component="viewport"] .resize-handle {
   touch-action: none;
+  -webkit-user-select: none;
   user-select: none;
   color: var(--lookbook-viewport-handle-icon-stroke);
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -1742,30 +1868,95 @@ pre[class*="language-"] {
   color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
-.form-input {
+[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], textarea, select {
   color: var(--lookbook-input-text);
 }
 
-.form-input::placeholder {
+[type="text"]::placeholder, [type="email"]::placeholder, [type="url"]::placeholder, [type="password"]::placeholder, [type="number"]::placeholder, [type="date"]::placeholder, [type="datetime-local"]::placeholder, [type="month"]::placeholder, [type="search"]::placeholder, [type="tel"]::placeholder, [type="time"]::placeholder, [type="week"]::placeholder, textarea::placeholder, select::placeholder {
   color: var(--lookbook-input-text-placeholder);
   font-style: italic;
 }
 
-.form-input {
+[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], textarea, select {
   border-color: var(--lookbook-input-border);
 }
 
-.form-input:focus {
+[type="text"]:focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="week"]:focus, textarea:focus, select:focus {
   border-color: var(--lookbook-input-border-focus);
   --tw-ring-color: var(--lookbook-input-border-focus);
 }
 
-.form-input {
+[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], textarea, select {
   width: 100%;
   background-color: var(--lookbook-input-bg);
   border-radius: .375rem;
   font-size: .875rem;
   line-height: 1.25rem;
+  display: block;
+}
+
+input[type="range"] {
+  appearance: none;
+  cursor: pointer;
+  width: 100%;
+  background: none;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  background-color: var(--lookbook-input-toggle);
+  height: .5rem;
+  border-radius: .5rem;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  background-color: var(--lookbook-input-toggle-active);
+  height: 1rem;
+  width: 1rem;
+  border-radius: .5rem;
+  margin-top: -4px;
+}
+
+input[type="range"]::-moz-range-track {
+  background-color: var(--lookbook-input-toggle);
+  height: .5rem;
+  border-radius: .5rem;
+}
+
+input[type="range"]::-moz-range-thumb {
+  background-color: var(--lookbook-input-toggle-active);
+  height: 1rem;
+  width: 1rem;
+  border: none;
+  border-radius: .5rem;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb, input[type="range"]:focus::-moz-range-thumb {
+  outline-offset: 2px;
+  outline-width: 1px;
+  outline-color: var(--lookbook-input-toggle-active);
+}
+
+input[type="color"] {
+  -webkit-appearance: none;
+  width: 46px;
+  cursor: pointer;
+  border-width: 1px;
+  border-color: var(--lookbook-input-border);
+  border-radius: .5rem;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+  border-width: 0;
+  border-radius: .5rem;
 }
 
 .pointer-events-none {
@@ -1832,6 +2023,10 @@ pre[class*="language-"] {
   right: .75rem;
 }
 
+.right-\[18px\] {
+  right: 18px;
+}
+
 .-top-px {
   top: -1px;
 }
@@ -1844,6 +2039,10 @@ pre[class*="language-"] {
   left: -1rem;
 }
 
+.top-\[2px\] {
+  top: 2px;
+}
+
 .-bottom-px {
   bottom: -1px;
 }
@@ -1922,14 +2121,6 @@ pre[class*="language-"] {
   margin-bottom: 1rem;
 }
 
-.mb-\[-2px\] {
-  margin-bottom: -2px;
-}
-
-.mt-1 {
-  margin-top: .25rem;
-}
-
 .mr-1 {
   margin-right: .25rem;
 }
@@ -1938,6 +2129,14 @@ pre[class*="language-"] {
   margin-right: 1.5rem;
 }
 
+.mb-\[-2px\] {
+  margin-bottom: -2px;
+}
+
+.mt-1 {
+  margin-top: .25rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1958,6 +2157,14 @@ pre[class*="language-"] {
   margin-right: .375rem;
 }
 
+.mr-0\.5 {
+  margin-right: .125rem;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
 .block {
   display: block;
 }
@@ -1982,6 +2189,10 @@ pre[class*="language-"] {
   display: inline-flex;
 }
 
+.table {
+  display: table;
+}
+
 .grid {
   display: grid;
 }
@@ -2014,16 +2225,12 @@ pre[class*="language-"] {
   height: calc(100vh - 40px);
 }
 
-.h-\[9px\] {
-  height: 9px;
-}
-
-.h-10 {
-  height: 2.5rem;
+.h-6 {
+  height: 1.5rem;
 }
 
-.h-4 {
-  height: 1rem;
+.h-5 {
+  height: 1.25rem;
 }
 
 .h-3\.5 {
@@ -2034,12 +2241,16 @@ pre[class*="language-"] {
   height: .75rem;
 }
 
-.h-6 {
-  height: 1.5rem;
+.h-\[9px\] {
+  height: 9px;
 }
 
-.h-5 {
-  height: 1.25rem;
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-4 {
+  height: 1rem;
 }
 
 .\!h-auto {
@@ -2062,12 +2273,12 @@ pre[class*="language-"] {
   width: 100vw;
 }
 
-.w-\[9px\] {
-  width: 9px;
+.w-11 {
+  width: 2.75rem;
 }
 
-.w-4 {
-  width: 1rem;
+.w-5 {
+  width: 1.25rem;
 }
 
 .w-3\.5 {
@@ -2078,20 +2289,12 @@ pre[class*="language-"] {
   width: .75rem;
 }
 
-.w-\[140px\] {
-  width: 140px;
-}
-
-.w-11 {
-  width: 2.75rem;
-}
-
-.w-5 {
-  width: 1.25rem;
+.w-\[9px\] {
+  width: 9px;
 }
 
-.min-w-\[140px\] {
-  min-width: 140px;
+.w-4 {
+  width: 1rem;
 }
 
 .min-w-\[180px\] {
@@ -2122,10 +2325,6 @@ pre[class*="language-"] {
   max-width: 20rem;
 }
 
-.max-w-\[800px\] {
-  max-width: 800px;
-}
-
 .flex-none {
   flex: none;
 }
@@ -2134,8 +2333,8 @@ pre[class*="language-"] {
   flex-shrink: 0;
 }
 
-.flex-grow {
-  flex-grow: 1;
+.border-collapse {
+  border-collapse: collapse;
 }
 
 .translate-x-0 {
@@ -2148,6 +2347,11 @@ pre[class*="language-"] {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-x-5 {
+  --tw-translate-x: 1.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2158,11 +2362,6 @@ pre[class*="language-"] {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-5 {
-  --tw-translate-x: 1.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2185,13 +2384,17 @@ pre[class*="language-"] {
 }
 
 .animate-spin {
-  animation: spin 1s linear infinite;
+  animation: 1s linear infinite spin;
 }
 
 .\!cursor-default {
   cursor: default !important;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .cursor-\[not-allowed\] {
   cursor: not-allowed;
 }
@@ -2208,11 +2411,12 @@ pre[class*="language-"] {
   cursor: nwse-resize;
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.cursor-help {
+  cursor: help;
 }
 
 .select-none {
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -2248,10 +2452,6 @@ pre[class*="language-"] {
   flex-direction: column;
 }
 
-.items-start {
-  align-items: flex-start;
-}
-
 .items-center {
   align-items: center;
 }
@@ -2268,12 +2468,6 @@ pre[class*="language-"] {
   justify-content: space-between;
 }
 
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)) );
-}
-
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)) );
@@ -2286,6 +2480,12 @@ pre[class*="language-"] {
   margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)) );
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)) );
+}
+
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -2298,6 +2498,12 @@ pre[class*="language-"] {
   margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)) );
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)) );
+  margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)) );
@@ -2328,6 +2534,10 @@ pre[class*="language-"] {
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .overflow-y-hidden {
   overflow-y: hidden;
 }
@@ -2350,6 +2560,10 @@ pre[class*="language-"] {
   white-space: pre-wrap;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-sm {
   border-radius: .125rem;
 }
@@ -2358,14 +2572,14 @@ pre[class*="language-"] {
   border-radius: .375rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded-bl-md {
   border-bottom-left-radius: .375rem;
 }
 
+.rounded-tl-sm {
+  border-top-left-radius: .125rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2424,6 +2638,10 @@ pre[class*="language-"] {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: #0000;
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -2433,10 +2651,6 @@ pre[class*="language-"] {
   border-color: var(--lookbook-header-border) !important;
 }
 
-.border-transparent {
-  border-color: #0000;
-}
-
 .border-lookbook-tabs-border-active {
   border-color: var(--lookbook-tabs-border-active);
 }
@@ -2477,12 +2691,16 @@ pre[class*="language-"] {
   background-color: var(--lookbook-drawer-bg);
 }
 
-.bg-lookbook-prose-bg {
-  background-color: var(--lookbook-prose-bg);
+.bg-lookbook-input-toggle-active {
+  background-color: var(--lookbook-input-toggle-active);
 }
 
-.\!bg-lookbook-header-bg {
-  background-color: var(--lookbook-header-bg) !important;
+.bg-lookbook-input-toggle {
+  background-color: var(--lookbook-input-toggle);
+}
+
+.bg-lookbook-prose-bg {
+  background-color: var(--lookbook-prose-bg);
 }
 
 .bg-zinc-50 {
@@ -2490,6 +2708,10 @@ pre[class*="language-"] {
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
+.\!bg-lookbook-header-bg {
+  background-color: var(--lookbook-header-bg) !important;
+}
+
 .bg-lookbook-divider {
   background-color: var(--lookbook-divider);
 }
@@ -2502,16 +2724,12 @@ pre[class*="language-"] {
   background-color: var(--lookbook-viewport-handle);
 }
 
-.\!bg-lookbook-nav-item-active {
-  background-color: var(--lookbook-nav-item-active) !important;
-}
-
-.bg-lookbook-input-toggle-active {
-  background-color: var(--lookbook-input-toggle-active);
+.bg-gray-100\/80 {
+  background-color: #f3f4f6cc;
 }
 
-.bg-lookbook-input-toggle {
-  background-color: var(--lookbook-input-toggle);
+.\!bg-lookbook-nav-item-active {
+  background-color: var(--lookbook-nav-item-active) !important;
 }
 
 .stroke-current {
@@ -2566,9 +2784,9 @@ pre[class*="language-"] {
   padding-bottom: .5rem;
 }
 
-.py-3 {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
+.px-2 {
+  padding-left: .5rem;
+  padding-right: .5rem;
 }
 
 .px-3 {
@@ -2576,21 +2794,26 @@ pre[class*="language-"] {
   padding-right: .75rem;
 }
 
+.py-3 {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+}
+
 .py-1 {
   padding-top: .25rem;
   padding-bottom: .25rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .px-1 {
   padding-left: .25rem;
   padding-right: .25rem;
 }
 
-.px-2 {
-  padding-left: .5rem;
-  padding-right: .5rem;
-}
-
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -2631,6 +2854,10 @@ pre[class*="language-"] {
   padding-bottom: 3rem;
 }
 
+.pt-2 {
+  padding-top: .5rem;
+}
+
 .pt-\[4px\] {
   padding-top: 4px;
 }
@@ -2639,8 +2866,16 @@ pre[class*="language-"] {
   padding-bottom: 0;
 }
 
-.pr-2 {
-  padding-right: .5rem;
+.pr-1 {
+  padding-right: .25rem;
+}
+
+.pl-2 {
+  padding-left: .5rem;
+}
+
+.pt-1\.5 {
+  padding-top: .375rem;
 }
 
 .pt-2\.5 {
@@ -2651,10 +2886,6 @@ pre[class*="language-"] {
   padding-bottom: .375rem;
 }
 
-.pt-2 {
-  padding-top: .5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2663,6 +2894,10 @@ pre[class*="language-"] {
   text-align: center;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .font-mono {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
 }
@@ -2761,6 +2996,11 @@ pre[class*="language-"] {
   color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
 .\!text-lookbook-header-text {
   color: var(--lookbook-header-text) !important;
 }
@@ -2769,9 +3009,8 @@ pre[class*="language-"] {
   color: var(--lookbook-branding-text);
 }
 
-.text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
+.text-lookbook-header-text {
+  color: var(--lookbook-header-text);
 }
 
 .text-lookbook-prose-text {
@@ -2794,6 +3033,11 @@ pre[class*="language-"] {
   color: var(--lookbook-nav-icon-stroke);
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-lookbook-tabs-text {
   color: var(--lookbook-tabs-text);
 }
@@ -2830,24 +3074,28 @@ pre[class*="language-"] {
   opacity: .9;
 }
 
-.opacity-30 {
-  opacity: .3;
-}
-
 .opacity-40 {
   opacity: .4;
 }
 
-.\!opacity-100 {
-  opacity: 1 !important;
+.opacity-80 {
+  opacity: .8;
 }
 
 .opacity-70 {
   opacity: .7;
 }
 
-.opacity-80 {
-  opacity: .8;
+.\!opacity-100 {
+  opacity: 1 !important;
+}
+
+.opacity-25 {
+  opacity: .25;
+}
+
+.opacity-75 {
+  opacity: .75;
 }
 
 .shadow {
@@ -2878,7 +3126,7 @@ pre[class*="language-"] {
 }
 
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -3117,11 +3365,6 @@ pre[class*="language-"] {
   background-color: var(--lookbook-draggable-hint);
 }
 
-.hover\:bg-indigo-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-lookbook-nav-item-hover:hover {
   background-color: var(--lookbook-nav-item-hover);
 }
@@ -3161,15 +3404,15 @@ pre[class*="language-"] {
   outline: 2px solid #0000;
 }
 
-.focus\:ring-0:focus {
+.focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-2:focus {
+.focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }