hds-web 0.1.4 → 0.1.6

package/src/styles/tailwind.css

@@ -42,7 +42,7 @@ html {
   /* 3 */
   tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   -webkit-font-feature-settings: normal;
           font-feature-settings: normal;
@@ -747,6 +747,12 @@ select {
   }
 }
 
+@media (min-width: 905px) {
+  .container {
+    max-width: 905px;
+  }
+}
+
 @media (min-width: 1024px) {
   .container {
     max-width: 1024px;
@@ -771,6 +777,12 @@ select {
   }
 }
 
+@media (min-width: 2560px) {
+  .container {
+    max-width: 2560px;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1116,6 +1128,14 @@ select {
   margin-top: -1rem;
 }
 
+.-mt-5 {
+  margin-top: -1.25rem;
+}
+
+.-mt-6 {
+  margin-top: -1.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1288,6 +1308,10 @@ select {
   height: 1.25rem;
 }
 
+.h-52 {
+  height: 13rem;
+}
+
 .h-6 {
   height: 1.5rem;
 }
@@ -1813,6 +1837,10 @@ select {
   white-space: pre-line;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2013,121 +2041,6 @@ select {
   background-color: rgb(51 51 51 / var(--tw-bg-opacity));
 }
 
-.bg-amber-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(184 88 0 / var(--tw-bg-opacity));
-}
-
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 244 255 / var(--tw-bg-opacity));
-}
-
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(223 232 255 / var(--tw-bg-opacity));
-}
-
-.bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(128 163 255 / var(--tw-bg-opacity));
-}
-
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(57 112 253 / var(--tw-bg-opacity));
-}
-
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 86 227 / var(--tw-bg-opacity));
-}
-
-.bg-blue-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 40 142 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(4 117 141 / var(--tw-bg-opacity));
-}
-
-.bg-green-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(218 255 244 / var(--tw-bg-opacity));
-}
-
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(57 218 170 / var(--tw-bg-opacity));
-}
-
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(2 125 89 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-0 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(108 115 127 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(77 87 97 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 25 39 / var(--tw-bg-opacity));
-}
-
-.bg-pink-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(246 119 170 / var(--tw-bg-opacity));
-}
-
-.bg-pink-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(194 30 95 / var(--tw-bg-opacity));
-}
-
-.bg-purple-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(140 73 250 / var(--tw-bg-opacity));
-}
-
-.bg-purple-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(113 43 227 / var(--tw-bg-opacity));
-}
-
-.bg-storybook-default-heading {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 27 41 / var(--tw-bg-opacity));
-}
-
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 243 212 / var(--tw-bg-opacity));
@@ -2153,6 +2066,11 @@ select {
   background-color: rgb(224 121 0 / var(--tw-bg-opacity));
 }
 
+.bg-amber-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(184 88 0 / var(--tw-bg-opacity));
+}
+
 .bg-amber-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(153 55 0 / var(--tw-bg-opacity));
@@ -2178,16 +2096,46 @@ select {
   background-color: rgb(0 6 21 / var(--tw-bg-opacity));
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 244 255 / var(--tw-bg-opacity));
+}
+
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 232 255 / var(--tw-bg-opacity));
+}
+
 .bg-blue-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(198 214 255 / var(--tw-bg-opacity));
 }
 
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(128 163 255 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(57 112 253 / var(--tw-bg-opacity));
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 86 227 / var(--tw-bg-opacity));
+}
+
 .bg-blue-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(13 65 198 / var(--tw-bg-opacity));
 }
 
+.bg-blue-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 40 142 / var(--tw-bg-opacity));
+}
+
 .bg-blue-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 28 99 / var(--tw-bg-opacity));
@@ -2218,6 +2166,11 @@ select {
   background-color: rgb(14 150 178 / var(--tw-bg-opacity));
 }
 
+.bg-cyan-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 117 141 / var(--tw-bg-opacity));
+}
+
 .bg-cyan-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 90 108 / var(--tw-bg-opacity));
@@ -2233,6 +2186,11 @@ select {
   background-color: rgb(0 35 43 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(218 255 244 / var(--tw-bg-opacity));
+}
+
 .bg-green-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(184 251 231 / var(--tw-bg-opacity));
@@ -2243,11 +2201,21 @@ select {
   background-color: rgb(145 245 215 / var(--tw-bg-opacity));
 }
 
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(57 218 170 / var(--tw-bg-opacity));
+}
+
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(14 165 120 / var(--tw-bg-opacity));
 }
 
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 125 89 / var(--tw-bg-opacity));
+}
+
 .bg-green-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 96 67 / var(--tw-bg-opacity));
@@ -2263,6 +2231,16 @@ select {
   background-color: rgb(0 40 29 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-0 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .bg-neutral-1000 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 6 21 / var(--tw-bg-opacity));
@@ -2273,6 +2251,11 @@ select {
   background-color: rgb(236 237 240 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-neutral-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(210 214 219 / var(--tw-bg-opacity));
@@ -2283,6 +2266,21 @@ select {
   background-color: rgb(157 164 174 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(108 115 127 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(77 87 97 / var(--tw-bg-opacity));
+}
+
 .bg-neutral-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(56 66 80 / var(--tw-bg-opacity));
@@ -2298,6 +2296,11 @@ select {
   background-color: rgb(24 34 47 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 25 39 / var(--tw-bg-opacity));
+}
+
 .bg-neutral-950 {
   --tw-bg-opacity: 1;
   background-color: rgb(13 20 32 / var(--tw-bg-opacity));
@@ -2358,11 +2361,21 @@ select {
   background-color: rgb(255 188 214 / var(--tw-bg-opacity));
 }
 
+.bg-pink-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(246 119 170 / var(--tw-bg-opacity));
+}
+
 .bg-pink-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 58 124 / var(--tw-bg-opacity));
 }
 
+.bg-pink-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 30 95 / var(--tw-bg-opacity));
+}
+
 .bg-pink-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(165 10 72 / var(--tw-bg-opacity));
@@ -2398,6 +2411,16 @@ select {
   background-color: rgb(180 135 255 / var(--tw-bg-opacity));
 }
 
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(140 73 250 / var(--tw-bg-opacity));
+}
+
+.bg-purple-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(113 43 227 / var(--tw-bg-opacity));
+}
+
 .bg-purple-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(94 19 215 / var(--tw-bg-opacity));
@@ -2453,6 +2476,11 @@ select {
   background-color: rgb(152 26 30 / var(--tw-bg-opacity));
 }
 
+.bg-storybook-default-heading {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 27 41 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 249 199 / var(--tw-bg-opacity));
@@ -2493,6 +2521,10 @@ select {
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
+.stroke-\[1\.5px\] {
+  stroke-width: 1.5px;
+}
+
 .object-contain {
   object-fit: contain;
 }
@@ -2944,193 +2976,78 @@ select {
   letter-spacing: -0.02em;
   font-weight: 700;
 }
-
-.text-hds-m-h4 {
-  font-size: 1.25rem;
-  line-height: 2rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-.text-hds-m-h5 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-.text-hds-m-h6 {
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  letter-spacing: 0.08em;
-  font-weight: 700;
-}
-
-.text-hds-m-quote {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.01em;
-  font-weight: 400;
-}
-
-.text-hds-m-sub1 {
-  font-size: 1.25rem;
-  line-height: 2rem;
-  letter-spacing: -0.01em;
-  font-weight: 400;
-}
-
-.text-hds-m-sub2 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.01em;
-  font-weight: 400;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.font-medium {
-  font-weight: 500;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.not-italic {
-  font-style: normal;
-}
-
-.text-amber-800 {
-  --tw-text-opacity: 1;
-  color: rgb(120 36 0 / var(--tw-text-opacity));
-}
-
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(128 163 255 / var(--tw-text-opacity));
-}
-
-.text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(57 112 253 / var(--tw-text-opacity));
-}
-
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(30 86 227 / var(--tw-text-opacity));
-}
-
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(13 65 198 / var(--tw-text-opacity));
-}
-
-.text-blue-800 {
-  --tw-text-opacity: 1;
-  color: rgb(0 40 142 / var(--tw-text-opacity));
-}
-
-.text-cyan-800 {
-  --tw-text-opacity: 1;
-  color: rgb(0 57 69 / var(--tw-text-opacity));
-}
-
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgb(0 60 43 / var(--tw-text-opacity));
-}
-
-.text-neutral-0 {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.text-neutral-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
-.text-neutral-300 {
-  --tw-text-opacity: 1;
-  color: rgb(210 214 219 / var(--tw-text-opacity));
+
+.text-hds-m-h4 {
+  font-size: 1.25rem;
+  line-height: 2rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
 }
 
-.text-neutral-400 {
-  --tw-text-opacity: 1;
-  color: rgb(157 164 174 / var(--tw-text-opacity));
+.text-hds-m-h5 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
 }
 
-.text-neutral-500 {
-  --tw-text-opacity: 1;
-  color: rgb(108 115 127 / var(--tw-text-opacity));
+.text-hds-m-h6 {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.08em;
+  font-weight: 700;
 }
 
-.text-neutral-600 {
-  --tw-text-opacity: 1;
-  color: rgb(77 87 97 / var(--tw-text-opacity));
+.text-hds-m-quote {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.01em;
+  font-weight: 400;
 }
 
-.text-neutral-700 {
-  --tw-text-opacity: 1;
-  color: rgb(56 66 80 / var(--tw-text-opacity));
+.text-hds-m-sub1 {
+  font-size: 1.25rem;
+  line-height: 2rem;
+  letter-spacing: -0.01em;
+  font-weight: 400;
 }
 
-.text-neutral-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 42 55 / var(--tw-text-opacity));
+.text-hds-m-sub2 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.01em;
+  font-weight: 400;
 }
 
-.text-neutral-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 25 39 / var(--tw-text-opacity));
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
-.text-pink-400 {
-  --tw-text-opacity: 1;
-  color: rgb(246 119 170 / var(--tw-text-opacity));
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
-.text-pink-600 {
-  --tw-text-opacity: 1;
-  color: rgb(194 30 95 / var(--tw-text-opacity));
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
-.text-pink-800 {
-  --tw-text-opacity: 1;
-  color: rgb(113 0 44 / var(--tw-text-opacity));
+.font-medium {
+  font-weight: 500;
 }
 
-.text-purple-500 {
-  --tw-text-opacity: 1;
-  color: rgb(140 73 250 / var(--tw-text-opacity));
+.font-semibold {
+  font-weight: 600;
 }
 
-.text-purple-800 {
-  --tw-text-opacity: 1;
-  color: rgb(63 1 166 / var(--tw-text-opacity));
+.italic {
+  font-style: italic;
 }
 
-.text-storybook-default-heading {
-  --tw-text-opacity: 1;
-  color: rgb(17 27 41 / var(--tw-text-opacity));
+.not-italic {
+  font-style: normal;
 }
 
 .text-amber-100 {
@@ -3168,6 +3085,11 @@ select {
   color: rgb(153 55 0 / var(--tw-text-opacity));
 }
 
+.text-amber-800 {
+  --tw-text-opacity: 1;
+  color: rgb(120 36 0 / var(--tw-text-opacity));
+}
+
 .text-amber-900 {
   --tw-text-opacity: 1;
   color: rgb(71 21 0 / var(--tw-text-opacity));
@@ -3198,6 +3120,31 @@ select {
   color: rgb(198 214 255 / var(--tw-text-opacity));
 }
 
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(128 163 255 / var(--tw-text-opacity));
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(57 112 253 / var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(30 86 227 / var(--tw-text-opacity));
+}
+
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(13 65 198 / var(--tw-text-opacity));
+}
+
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(0 40 142 / var(--tw-text-opacity));
+}
+
 .text-blue-900 {
   --tw-text-opacity: 1;
   color: rgb(0 28 99 / var(--tw-text-opacity));
@@ -3238,6 +3185,11 @@ select {
   color: rgb(0 90 108 / var(--tw-text-opacity));
 }
 
+.text-cyan-800 {
+  --tw-text-opacity: 1;
+  color: rgb(0 57 69 / var(--tw-text-opacity));
+}
+
 .text-cyan-900 {
   --tw-text-opacity: 1;
   color: rgb(0 35 43 / var(--tw-text-opacity));
@@ -3278,11 +3230,26 @@ select {
   color: rgb(0 96 67 / var(--tw-text-opacity));
 }
 
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(0 60 43 / var(--tw-text-opacity));
+}
+
 .text-green-900 {
   --tw-text-opacity: 1;
   color: rgb(0 40 29 / var(--tw-text-opacity));
 }
 
+.text-neutral-0 {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-neutral-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .text-neutral-1000 {
   --tw-text-opacity: 1;
   color: rgb(0 6 21 / var(--tw-text-opacity));
@@ -3298,16 +3265,51 @@ select {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.text-neutral-300 {
+  --tw-text-opacity: 1;
+  color: rgb(210 214 219 / var(--tw-text-opacity));
+}
+
+.text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgb(157 164 174 / var(--tw-text-opacity));
+}
+
 .text-neutral-50 {
   --tw-text-opacity: 1;
   color: rgb(249 250 251 / var(--tw-text-opacity));
 }
 
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(108 115 127 / var(--tw-text-opacity));
+}
+
+.text-neutral-600 {
+  --tw-text-opacity: 1;
+  color: rgb(77 87 97 / var(--tw-text-opacity));
+}
+
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgb(56 66 80 / var(--tw-text-opacity));
+}
+
+.text-neutral-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 42 55 / var(--tw-text-opacity));
+}
+
 .text-neutral-850 {
   --tw-text-opacity: 1;
   color: rgb(24 34 47 / var(--tw-text-opacity));
 }
 
+.text-neutral-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 25 39 / var(--tw-text-opacity));
+}
+
 .text-neutral-950 {
   --tw-text-opacity: 1;
   color: rgb(13 20 32 / var(--tw-text-opacity));
@@ -3368,16 +3370,31 @@ select {
   color: rgb(255 188 214 / var(--tw-text-opacity));
 }
 
+.text-pink-400 {
+  --tw-text-opacity: 1;
+  color: rgb(246 119 170 / var(--tw-text-opacity));
+}
+
 .text-pink-500 {
   --tw-text-opacity: 1;
   color: rgb(225 58 124 / var(--tw-text-opacity));
 }
 
+.text-pink-600 {
+  --tw-text-opacity: 1;
+  color: rgb(194 30 95 / var(--tw-text-opacity));
+}
+
 .text-pink-700 {
   --tw-text-opacity: 1;
   color: rgb(165 10 72 / var(--tw-text-opacity));
 }
 
+.text-pink-800 {
+  --tw-text-opacity: 1;
+  color: rgb(113 0 44 / var(--tw-text-opacity));
+}
+
 .text-pink-900 {
   --tw-text-opacity: 1;
   color: rgb(73 0 29 / var(--tw-text-opacity));
@@ -3403,6 +3420,11 @@ select {
   color: rgb(180 135 255 / var(--tw-text-opacity));
 }
 
+.text-purple-500 {
+  --tw-text-opacity: 1;
+  color: rgb(140 73 250 / var(--tw-text-opacity));
+}
+
 .text-purple-600 {
   --tw-text-opacity: 1;
   color: rgb(113 43 227 / var(--tw-text-opacity));
@@ -3413,6 +3435,11 @@ select {
   color: rgb(94 19 215 / var(--tw-text-opacity));
 }
 
+.text-purple-800 {
+  --tw-text-opacity: 1;
+  color: rgb(63 1 166 / var(--tw-text-opacity));
+}
+
 .text-purple-900 {
   --tw-text-opacity: 1;
   color: rgb(41 0 107 / var(--tw-text-opacity));
@@ -3458,6 +3485,11 @@ select {
   color: rgb(152 26 30 / var(--tw-text-opacity));
 }
 
+.text-storybook-default-heading {
+  --tw-text-opacity: 1;
+  color: rgb(17 27 41 / var(--tw-text-opacity));
+}
+
 .text-yellow-100 {
   --tw-text-opacity: 1;
   color: rgb(255 249 199 / var(--tw-text-opacity));
@@ -3684,6 +3716,10 @@ select {
   transition-duration: 200ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .duration-500 {
   transition-duration: 500ms;
 }
@@ -4769,8 +4805,8 @@ select {
   display: block;
 }
 
-.group:hover .group-hover\:translate-x-\[0\.098rem\] {
-  --tw-translate-x: 0.098rem;
+.group:hover .group-hover\:translate-x-\[0\.15rem\] {
+  --tw-translate-x: 0.15rem;
   -webkit-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));
           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));
 }
@@ -4909,259 +4945,291 @@ select {
 }
 
 @media (min-width: 600px) {
-  .tab\:block {
-    display: block;
+  .tb\:visible {
+    visibility: visible;
+  }
+
+  .tb\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .tb\:flex {
+    display: flex;
+  }
+
+  .tb\:inline-flex {
+    display: inline-flex;
   }
 
-  .tab\:hidden {
+  .tb\:hidden {
     display: none;
   }
 
-  .tab\:w-fit {
+  .tb\:w-fit {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
   }
 
-  .tab\:text-hds-t-body1 {
+  .tb\:min-w-\[18rem\] {
+    min-width: 18rem;
+  }
+
+  .tb\:flex-col {
+    flex-direction: column;
+  }
+
+  .tb\:items-center {
+    align-items: center;
+  }
+
+  .tb\:rounded-2xl {
+    border-radius: 1rem;
+  }
+
+  .tb\:p-8 {
+    padding: 2rem;
+  }
+
+  .tb\:text-hds-t-body1 {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-body1-bold {
+  .tb\:text-hds-t-body1-bold {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-body1-medium {
+  .tb\:text-hds-t-body1-medium {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .tab\:text-hds-t-body1-semi-bold {
+  .tb\:text-hds-t-body1-semi-bold {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-body1c {
+  .tb\:text-hds-t-body1c {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-body1c-bold {
+  .tb\:text-hds-t-body1c-bold {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-body1c-medium {
+  .tb\:text-hds-t-body1c-medium {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .tab\:text-hds-t-body1c-semi-bold {
+  .tb\:text-hds-t-body1c-semi-bold {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-body2 {
+  .tb\:text-hds-t-body2 {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-body2-bold {
+  .tb\:text-hds-t-body2-bold {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-body2-medium {
+  .tb\:text-hds-t-body2-medium {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .tab\:text-hds-t-body2-semi-bold {
+  .tb\:text-hds-t-body2-semi-bold {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-body2c {
+  .tb\:text-hds-t-body2c {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-body2c-bold {
+  .tb\:text-hds-t-body2c-bold {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-body2c-medium {
+  .tb\:text-hds-t-body2c-medium {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .tab\:text-hds-t-body2c-semi-bold {
+  .tb\:text-hds-t-body2c-semi-bold {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-body3 {
+  .tb\:text-hds-t-body3 {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-body3-bold {
+  .tb\:text-hds-t-body3-bold {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-body3-medium {
+  .tb\:text-hds-t-body3-medium {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 500;
   }
 
-  .tab\:text-hds-t-body3-semi-bold {
+  .tb\:text-hds-t-body3-semi-bold {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-body3c {
+  .tb\:text-hds-t-body3c {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-body3c-bold {
+  .tb\:text-hds-t-body3c-bold {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-body3c-medium {
+  .tb\:text-hds-t-body3c-medium {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 500;
   }
 
-  .tab\:text-hds-t-body3c-semi-bold {
+  .tb\:text-hds-t-body3c-semi-bold {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-code1 {
+  .tb\:text-hds-t-code1 {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-code2 {
+  .tb\:text-hds-t-code2 {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-h1 {
+  .tb\:text-hds-t-h1 {
     font-size: 3rem;
     line-height: 1.25;
     letter-spacing: -0.02em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-h2 {
+  .tb\:text-hds-t-h2 {
     font-size: 2.25rem;
     line-height: 3rem;
     letter-spacing: -0.02em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-h3 {
+  .tb\:text-hds-t-h3 {
     font-size: 1.875rem;
     line-height: 2.5rem;
     letter-spacing: -0.02em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-h4 {
+  .tb\:text-hds-t-h4 {
     font-size: 1.25rem;
     line-height: 2rem;
     letter-spacing: -0.02em;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-h5 {
+  .tb\:text-hds-t-h5 {
     font-size: 1.125rem;
     line-height: 1.75rem;
     letter-spacing: -0.02em;
     font-weight: 600;
   }
 
-  .tab\:text-hds-t-h6 {
+  .tb\:text-hds-t-h6 {
     font-size: 0.75rem;
     line-height: 1.25rem;
     letter-spacing: 0.08em;
     font-weight: 700;
   }
 
-  .tab\:text-hds-t-quote {
+  .tb\:text-hds-t-quote {
     font-size: 1.125rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-sub1 {
+  .tb\:text-hds-t-sub1 {
     font-size: 1.25rem;
     line-height: 2rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .tab\:text-hds-t-sub2 {
+  .tb\:text-hds-t-sub2 {
     font-size: 1.125rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
@@ -5170,10 +5238,6 @@ select {
 }
 
 @media (min-width: 640px) {
-  .sm\:visible {
-    visibility: visible;
-  }
-
   .sm\:-mx-0 {
     margin-left: -0px;
     margin-right: -0px;
@@ -5219,10 +5283,6 @@ select {
     width: 3rem;
   }
 
-  .sm\:w-52 {
-    width: 13rem;
-  }
-
   .sm\:max-w-sm {
     max-width: 24rem;
   }
@@ -5388,291 +5448,259 @@ select {
 }
 
 @media (min-width: 1240px) {
-  .desk\:-left-5 {
+  .db\:-left-5 {
     left: -1.25rem;
   }
 
-  .desk\:-right-5 {
+  .db\:-right-5 {
     right: -1.25rem;
   }
 
-  .desk\:ml-0 {
-    margin-left: 0px;
-  }
-
-  .desk\:flex {
-    display: flex;
-  }
-
-  .desk\:inline-flex {
-    display: inline-flex;
-  }
-
-  .desk\:w-fit {
+  .db\:w-fit {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
   }
 
-  .desk\:min-w-\[18rem\] {
-    min-width: 18rem;
-  }
-
-  .desk\:flex-col {
-    flex-direction: column;
-  }
-
-  .desk\:items-center {
-    align-items: center;
-  }
-
-  .desk\:rounded-2xl {
-    border-radius: 1rem;
-  }
-
-  .desk\:p-8 {
-    padding: 2rem;
-  }
-
-  .desk\:text-hds-d-body1 {
+  .db\:text-hds-d-body1 {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-body1-bold {
+  .db\:text-hds-d-body1-bold {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-body1-medium {
+  .db\:text-hds-d-body1-medium {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .desk\:text-hds-d-body1-semi-bold {
+  .db\:text-hds-d-body1-semi-bold {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-body1c {
+  .db\:text-hds-d-body1c {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-body1c-bold {
+  .db\:text-hds-d-body1c-bold {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-body1c-medium {
+  .db\:text-hds-d-body1c-medium {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .desk\:text-hds-d-body1c-semi-bold {
+  .db\:text-hds-d-body1c-semi-bold {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-body2 {
+  .db\:text-hds-d-body2 {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-body2-bold {
+  .db\:text-hds-d-body2-bold {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-body2-medium {
+  .db\:text-hds-d-body2-medium {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .desk\:text-hds-d-body2-semi-bold {
+  .db\:text-hds-d-body2-semi-bold {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-body2c {
+  .db\:text-hds-d-body2c {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-body2c-bold {
+  .db\:text-hds-d-body2c-bold {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-body2c-medium {
+  .db\:text-hds-d-body2c-medium {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 500;
   }
 
-  .desk\:text-hds-d-body2c-semi-bold {
+  .db\:text-hds-d-body2c-semi-bold {
     font-size: 0.938rem;
     line-height: 1.375rem;
     letter-spacing: -0.01em;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-body3 {
+  .db\:text-hds-d-body3 {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-body3-bold {
+  .db\:text-hds-d-body3-bold {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-body3-medium {
+  .db\:text-hds-d-body3-medium {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 500;
   }
 
-  .desk\:text-hds-d-body3-semi-bold {
+  .db\:text-hds-d-body3-semi-bold {
     font-size: 0.875rem;
     line-height: 1.5rem;
     letter-spacing: ;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-body3c {
+  .db\:text-hds-d-body3c {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-body3c-bold {
+  .db\:text-hds-d-body3c-bold {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-body3c-medium {
+  .db\:text-hds-d-body3c-medium {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 500;
   }
 
-  .desk\:text-hds-d-body3c-semi-bold {
+  .db\:text-hds-d-body3c-semi-bold {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: ;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-code1 {
+  .db\:text-hds-d-code1 {
     font-size: 1rem;
     line-height: 1.75rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-code2 {
+  .db\:text-hds-d-code2 {
     font-size: 0.938rem;
     line-height: 1.625rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-h1 {
+  .db\:text-hds-d-h1 {
     font-size: 4rem;
     line-height: 1.125;
     letter-spacing: -0.02em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-h2 {
+  .db\:text-hds-d-h2 {
     font-size: 3rem;
     line-height: 1.25;
     letter-spacing: -0.02em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-h3 {
+  .db\:text-hds-d-h3 {
     font-size: 2.25rem;
     line-height: 3rem;
     letter-spacing: -0.02em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-h4 {
+  .db\:text-hds-d-h4 {
     font-size: 1.5rem;
     line-height: 2.25rem;
     letter-spacing: -0.02em;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-h5 {
+  .db\:text-hds-d-h5 {
     font-size: 1.25rem;
     line-height: 2rem;
     letter-spacing: -0.02em;
     font-weight: 600;
   }
 
-  .desk\:text-hds-d-h6 {
+  .db\:text-hds-d-h6 {
     font-size: 0.875;
     line-height: 1.25;
     letter-spacing: 0.08em;
     font-weight: 700;
   }
 
-  .desk\:text-hds-d-quote {
+  .db\:text-hds-d-quote {
     font-size: 1.5rem;
     line-height: 2.25rem;
     letter-spacing: -0.01em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-sub1 {
+  .db\:text-hds-d-sub1 {
     font-size: 1.5rem;
     line-height: 2.25rem;
     letter-spacing: -0.02em;
     font-weight: 400;
   }
 
-  .desk\:text-hds-d-sub2 {
+  .db\:text-hds-d-sub2 {
     font-size: 1.25rem;
     line-height: 2rem;
     letter-spacing: -0.01em;