twntyx-css 1.0.0

package/styles/progress.css

@@ -0,0 +1,209 @@
+/*----------------------------*/
+/* PROGRESS */
+/*----------------------------*/
+
+/* Wrapper for consistent spacing */
+@utility progress-wrapper {
+  --value: 0;
+  --size: 96px;
+  --thickness: 6px;
+  @apply inline-flex 
+  m-auto 
+  rounded-full
+  shadow-[inset_0_0_0_calc(var(--thickness)*2)_var(--raw-color-border-highlight)]
+  dark:shadow-[inset_0_0_0_calc(var(--thickness)*2)_var(--raw-color-border-highlight-dark)]
+  text-background-brand;
+}
+
+@utility progress-radial {
+    @apply inline-flex overflow-hidden relative justify-center items-center rounded-full transition-all duration-75 include-transition;
+
+    width: var(--size);
+    height: var(--size);
+
+    /* Create the radial progress background */
+    background:
+      radial-gradient(farthest-side, currentColor 98%, transparent) top/var(--thickness) var(--thickness) no-repeat,
+      conic-gradient(currentColor calc(var(--value) * 1%), transparent 0);
+
+    /* Progress indicator dot */
+    &::after {
+      @apply absolute 
+      rounded-full 
+      bg-current
+      content-['']
+      transition-transform
+      include-transition duration-75;
+      width: var(--thickness);
+      height: var(--thickness);
+      inset: calc(50% - var(--thickness) / 2);
+      transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
+    }
+
+    /* Inner circle */
+    .progress-inner {
+      @apply absolute rounded-full bg-background-surface;
+      inset: var(--thickness);
+    }
+
+  /* Value text */
+  .progress-value {
+    @apply relative z-10 text-text-default;
+  }
+}
+
+/* Size variants */
+@utility progress-xs {
+    --size: 44px;
+    --thickness: 2px;
+  @apply text-xs;
+}
+
+@utility progress-sm {
+    --size: 64px;
+    --thickness: 3px;
+  @apply text-sm;
+}
+
+@utility progress-md {
+    --size: 96px;
+    --thickness: 4px;
+  @apply text-base;
+}
+
+@utility progress-lg {
+    --size: 128px;
+    --thickness: 6px;
+  @apply text-xl;
+}
+
+@utility progress-xl {
+    --size: 160px;
+    --thickness: 8px;
+  @apply text-2xl;
+}
+
+/* Linear progress */
+@utility progress-linear {
+    --thickness: 6px;
+    @apply relative w-full rounded-full bg-line-highlight text-background-brand h-(--thickness);
+
+    /* Progress bar */
+    &::after {
+      @apply content-[''] absolute inset-0 bg-current rounded-full transition-all duration-300 ease-out-quart;
+      width: var(--value, 0%);
+    }
+
+    /* Size variants */
+    &.progress-xs {
+      --thickness: 2px;
+    }
+
+    &.progress-sm {
+      --thickness: 4px;
+    }
+
+    &.progress-md {
+      --thickness: 6px;
+    }
+
+    &.progress-lg {
+      --thickness: 10px;
+    }
+
+    &.progress-xl {
+      --thickness: 12px;
+    }
+
+  .progress-label {
+    @apply text-xs text-text-tertiary whitespace-nowrap inline absolute bottom-2.5 -translate-x-full left-[calc(var(--value))];
+  }
+}
+
+/* Bullet progress */
+@utility progress-bullet {
+    --thickness: 8px;
+    @apply flex gap-[calc(var(--thickness)/1.75)] text-brand-default;
+
+    &:not(:has(.is-active)) li,
+    li.is-active ~ li {
+      &::after {
+        @apply translate-y-full;
+      }
+    }
+
+    li {
+      @apply overflow-hidden relative rounded-full size-2 bg-line-highlight h-(--thickness) w-(--thickness);
+
+      &::after {
+        @apply content-[''] absolute inset-0 rounded-full transition-transform duration-0 ease-out-cubic translate-y-0 bg-current;
+      }
+    }
+
+    li.is-active {
+      &::after {
+        @apply bg-current duration-500;
+      }
+    }
+
+    &.progress-xs {
+      --thickness: 4px;
+    }
+
+    &.progress-sm {
+      --thickness: 6px;
+    }
+
+    &.progress-md {
+      --thickness: 8px;
+    }
+
+    &.progress-lg {
+      --thickness: 10px;
+    }
+
+    &.progress-xl {
+      --thickness: 12px;
+    }
+
+    /* Full width variant */
+    &.progress-full {
+      --thickness: 4px;
+      @apply w-full;
+
+      li {
+        @apply flex-1 h-(--thickness);
+
+        &::after {
+          @apply w-full opacity-100 translate-x-0 translate-y-0;
+        }
+      }
+
+      &:not(:has(.is-active)) li,
+      li.is-active ~ li {
+        &::after {
+          @apply -translate-x-[calc(100%+2px)] translate-y-0;
+        }
+      }
+
+      &.progress-xs {
+        --thickness: 1px;
+      }
+
+      &.progress-sm {
+        --thickness: 2px;
+      }
+
+      &.progress-md {
+        --thickness: 4px;
+      }
+
+      &.progress-lg {
+        --thickness: 6px;
+      }
+
+    &.progress-xl {
+      --thickness: 8px;
+    }
+  }
+}

package/styles/scrollbar.css

@@ -0,0 +1,17 @@
+/*----------------------------*/
+/* SCROLLBAR */
+/*----------------------------*/
+
+@utility scrollbar {
+  @apply [&::-webkit-scrollbar]:w-2
+  [&::-webkit-scrollbar]:h-2
+  [&::-webkit-scrollbar-track]:bg-core-ui-100
+  dark:[&::-webkit-scrollbar-track]:bg-core-ui-700
+  [&::-webkit-scrollbar-thumb]:bg-core-ui-300
+  [&::-webkit-scrollbar-thumb]:transition-colors
+  [&::-webkit-scrollbar-thumb:hover]:bg-core-ui-400/50
+  dark:[&::-webkit-scrollbar-thumb]:bg-core-ui-500
+  dark:[&::-webkit-scrollbar-thumb:hover]:bg-core-ui-400/75
+  [&::-webkit-scrollbar-track]:rounded-full
+  [&::-webkit-scrollbar-thumb]:rounded-full;
+}

package/styles/shadow.css

@@ -0,0 +1,25 @@
+/*----------------------------*/
+/* SHADOW */
+/*----------------------------*/
+
+:root.dark {
+  .shadow-sm {
+    @apply shadow-dark-sm!;
+  }
+  .shadow-md {
+    @apply shadow-dark-md!;
+  }
+  .shadow-lg {
+    @apply shadow-dark-lg!;
+  }
+  .shadow-xl {
+    @apply shadow-dark-xl!;
+  }
+}
+
+@theme {
+  --shadow-rest: 0 12px 24px 0 rgba(255, 255, 255, 0.03) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.06) inset, 0 0.25px 0.25px 0 rgba(255, 255, 255, 0.12) inset;
+  --shadow-hover: 0 12px 24px 0 rgba(255, 255, 255, 0.05) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.06) inset, 0 0.25px 0.25px 0 rgba(255, 255, 255, 0.12) inset;
+  --shadow-slider-rest: 0 4px 8px 0 rgba(255, 255, 255, 0.03) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.06) inset, 0 0.25px 0.25px 0 rgba(255, 255, 255, 0.12) inset;
+  --shadow-slider-hover: 0 4px 8px 0 rgba(255, 255, 255, 0.05) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.06) inset, 0 0.25px 0.25px 0 rgba(255, 255, 255, 0.12) inset;
+}

package/styles/shared.css

@@ -0,0 +1,226 @@
+html,
+body {
+  @apply w-full min-h-screen;
+}
+
+/* Interactive states */
+@utility include-transition {
+  @apply duration-200 ease-out-cubic;
+}
+
+@utility include-transition-semilong {
+  @apply duration-300 ease-out-cubic;
+}
+
+@utility include-transition-long {
+  @apply duration-500 ease-out-cubic;
+}
+
+@utility include-interactive {
+  @apply hover:include-transition hover:transition-[border-color,background-color] hover:ease-out-cubic active:duration-0 include-focus-visible;
+}
+
+@utility interactive-base {
+  @apply outline outline-2 -outline-offset-1 ring-line-brand;
+}
+
+@utility include-active {
+  @apply outline outline-1 outline-offset-2 outline-text-default/0 active:outline-brand-moderate;
+}
+
+@utility include-focus-visible {
+  @apply include-active focus-visible:outline-line-focus focus-visible:outline-dashed;
+}
+
+@utility include-interactive-secondary {
+  @apply interactive-base outline-transparent hover:outline-transparent active:outline-transparent active:opacity-75 focus-visible:outline-line-brand active:transition-none active:duration-0 focus-visible:ring-0 disabled:cursor-not-allowed;
+}
+
+@utility inverted {
+  color-scheme: dark;
+  .inverted {
+    color-scheme: light;
+  }
+}
+
+:is(html.dark, body.dark) .inverted {
+  color-scheme: light;
+
+  .inverted {
+    color-scheme: dark;
+  }
+}
+
+/* Masks */
+@utility mask {
+  mask-position: center;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}
+
+@utility mask-carat {
+  @apply mask;
+  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22current%22%3E%3Cpath%20d%3D%22M480-372.92q-7.23%200-13.46-2.31t-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57%208.5-21.27%208.7-8.69%2021.08-8.69%2012.38%200%2021.08%208.69L480-442.15l162.92-162.93q8.31-8.3%2020.89-8.5%2012.57-.19%2021.27%208.5%208.69%208.7%208.69%2021.08%200%2012.38-8.69%2021.08L505.31-383.15q-5.62%205.61-11.85%207.92-6.23%202.31-13.46%202.31Z%22%2F%3E%3C%2Fsvg%3E");
+}
+
+@utility mask-close {
+  @apply mask;
+  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M480-437.85%20277.08-234.92q-8.31%208.3-20.89%208.5-12.57.19-21.27-8.5-8.69-8.7-8.69-21.08%200-12.38%208.69-21.08L437.85-480%20234.92-682.92q-8.3-8.31-8.5-20.89-.19-12.57%208.5-21.27%208.7-8.69%2021.08-8.69%2012.38%200%2021.08%208.69L480-522.15l202.92-202.93q8.31-8.3%2020.89-8.5%2012.57-.19%2021.27%208.5%208.69%208.7%208.69%2021.08%200%2012.38-8.69%2021.08L522.15-480l202.93%20202.92q8.3%208.31%208.5%2020.89.19%2012.57-8.5%2021.27-8.7%208.69-21.08%208.69-12.38%200-21.08-8.69L480-437.85Z%22%2F%3E%3C%2Fsvg%3E");
+}
+
+@utility mask-check {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M9.54976%2015.5155L18.1883%206.87702C18.3369%206.72819%2018.5109%206.65219%2018.7103%206.64902C18.9096%206.64585%2019.0868%206.72185%2019.242%206.87702C19.3972%207.03219%2019.4748%207.21035%2019.4748%207.41152C19.4748%207.61285%2019.3972%207.7911%2019.242%207.94627L10.1825%2017.0213C10.0017%2017.2019%209.79076%2017.2923%209.54976%2017.2923C9.30876%2017.2923%209.09785%2017.2019%208.91701%2017.0213L4.74201%2012.8463C4.59335%2012.6974%204.52001%2012.5208%204.52201%2012.3163C4.52385%2012.1119%204.60235%2011.9322%204.75751%2011.777C4.91268%2011.6219%205.09085%2011.5443%205.29201%2011.5443C5.49335%2011.5443%205.6716%2011.6219%205.82676%2011.777L9.54976%2015.5155Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-exclamation {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M11.9997%2014.0386C11.7871%2014.0386%2011.609%2013.9667%2011.4655%2013.8228C11.3218%2013.6792%2011.25%2013.5011%2011.25%2013.2886V6.28857C11.25%206.07607%2011.3219%205.89791%2011.4658%205.75407C11.6096%205.61041%2011.7878%205.53857%2012.0003%205.53857C12.2129%205.53857%2012.391%205.61041%2012.5345%205.75407C12.6782%205.89791%2012.75%206.07607%2012.75%206.28857V13.2886C12.75%2013.5011%2012.6781%2013.6792%2012.5342%2013.8228C12.3904%2013.9667%2012.2122%2014.0386%2011.9997%2014.0386ZM11.9997%2018.4616C11.7871%2018.4616%2011.609%2018.3897%2011.4655%2018.2458C11.3218%2018.102%2011.25%2017.9238%2011.25%2017.7113C11.25%2017.4987%2011.3219%2017.3206%2011.4658%2017.1771C11.6096%2017.0334%2011.7878%2016.9616%2012.0003%2016.9616C12.2129%2016.9616%2012.391%2017.0335%2012.5345%2017.1773C12.6782%2017.3212%2012.75%2017.4993%2012.75%2017.7118C12.75%2017.9245%2012.6781%2018.1026%2012.5342%2018.2461C12.3904%2018.3897%2012.2122%2018.4616%2011.9997%2018.4616Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-triangle-filled-down {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M7.5559%208.5L16.4444%208.5C16.7084%208.5%2016.9251%208.59058%2017.0944%208.77175C17.2636%208.95292%2017.3481%209.16433%2017.3481%209.406C17.3481%209.4815%2017.3372%209.56067%2017.3154%209.6435C17.2937%209.72633%2017.2611%209.80542%2017.2174%209.88075L12.7636%2016.8768C12.67%2017.0141%2012.5578%2017.117%2012.4271%2017.1855C12.2963%2017.2542%2012.154%2017.2885%2012.0001%2017.2885C11.8463%2017.2885%2011.704%2017.2542%2011.5731%2017.1855C11.4425%2017.117%2011.3303%2017.0141%2011.2366%2016.8768L6.78289%209.88075C6.73923%209.80525%206.70656%209.72592%206.6849%209.64275C6.66306%209.55975%206.65214%209.4805%206.65214%209.405C6.65214%209.16317%206.73673%208.95192%206.9059%208.77125C7.07523%208.59042%207.2919%208.5%207.5559%208.5Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-info {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.0003%2016.75C12.2129%2016.75%2012.391%2016.6781%2012.5345%2016.5343C12.6782%2016.3906%2012.75%2016.2125%2012.75%2016V11.75C12.75%2011.5375%2012.6781%2011.3593%2012.5343%2011.2155C12.3904%2011.0718%2012.2122%2011%2011.9997%2011C11.7871%2011%2011.609%2011.0718%2011.4655%2011.2155C11.3218%2011.3593%2011.25%2011.5375%2011.25%2011.75V16C11.25%2016.2125%2011.3219%2016.3906%2011.4658%2016.5343C11.6096%2016.6781%2011.7878%2016.75%2012.0003%2016.75ZM12%209.2885C12.2288%209.2885%2012.4207%209.21108%2012.5755%209.05625C12.7303%208.90142%2012.8078%208.70958%2012.8078%208.48075C12.8078%208.25192%2012.7303%208.06008%2012.5755%207.90525C12.4207%207.75058%2012.2288%207.67325%2012%207.67325C11.7712%207.67325%2011.5793%207.75058%2011.4245%207.90525C11.2697%208.06008%2011.1923%208.25192%2011.1923%208.48075C11.1923%208.70958%2011.2697%208.90142%2011.4245%209.05625C11.5793%209.21108%2011.7712%209.2885%2012%209.2885ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5ZM12%2020C14.2333%2020%2016.125%2019.225%2017.675%2017.675C19.225%2016.125%2020%2014.2333%2020%2012C20%209.76667%2019.225%207.875%2017.675%206.325C16.125%204.775%2014.2333%204%2012%204C9.76667%204%207.875%204.775%206.325%206.325C4.775%207.875%204%209.76667%204%2012C4%2014.2333%204.775%2016.125%206.325%2017.675C7.875%2019.225%209.76667%2020%2012%2020Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-check-circle {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M10.5808%2014.1463L8.25775%2011.823C8.11925%2011.6847%207.94517%2011.6138%207.7355%2011.6105C7.526%2011.6073%207.34875%2011.6782%207.20375%2011.823C7.05892%2011.968%206.9865%2012.1437%206.9865%2012.35C6.9865%2012.5563%207.05892%2012.732%207.20375%2012.877L9.948%2015.6212C10.1288%2015.8019%2010.3398%2015.8923%2010.5808%2015.8923C10.8218%2015.8923%2011.0327%2015.8019%2011.2135%2015.6212L16.777%2010.0578C16.9153%209.91925%2016.9862%209.74517%2016.9895%209.5355C16.9927%209.326%2016.9218%209.14875%2016.777%209.00375C16.632%208.85892%2016.4563%208.7865%2016.25%208.7865C16.0437%208.7865%2015.868%208.85892%2015.723%209.00375L10.5808%2014.1463ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5ZM12%2020C14.2333%2020%2016.125%2019.225%2017.675%2017.675C19.225%2016.125%2020%2014.2333%2020%2012C20%209.76667%2019.225%207.875%2017.675%206.325C16.125%204.775%2014.2333%204%2012%204C9.76667%204%207.875%204.775%206.325%206.325C4.775%207.875%204%209.76667%204%2012C4%2014.2333%204.775%2016.125%206.325%2017.675C7.875%2019.225%209.76667%2020%2012%2020Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-report {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12%2016.7115C12.2288%2016.7115%2012.4207%2016.6341%2012.5755%2016.4793C12.7303%2016.3244%2012.8078%2016.1326%2012.8078%2015.9038C12.8078%2015.6749%2012.7303%2015.4831%2012.5755%2015.3283C12.4207%2015.1736%2012.2288%2015.0963%2012%2015.0963C11.7712%2015.0963%2011.5793%2015.1736%2011.4245%2015.3283C11.2697%2015.4831%2011.1923%2015.6749%2011.1923%2015.9038C11.1923%2016.1326%2011.2697%2016.3244%2011.4245%2016.4793C11.5793%2016.6341%2011.7712%2016.7115%2012%2016.7115ZM12.0003%2013.2308C12.2129%2013.2308%2012.391%2013.1589%2012.5345%2013.0152C12.6782%2012.8714%2012.75%2012.6933%2012.75%2012.4808V7.94225C12.75%207.72975%2012.6781%207.55167%2012.5343%207.408C12.3904%207.26417%2012.2122%207.19225%2011.9997%207.19225C11.7871%207.19225%2011.609%207.26417%2011.4655%207.408C11.3218%207.55167%2011.25%207.72975%2011.25%207.94225V12.4808C11.25%2012.6933%2011.3219%2012.8714%2011.4658%2013.0152C11.6096%2013.1589%2011.7878%2013.2308%2012.0003%2013.2308ZM9.20975%2020.5C8.96575%2020.5%208.73325%2020.4532%208.51225%2020.3595C8.29125%2020.266%208.09875%2020.1372%207.93475%2019.973L4.027%2016.0652C3.86283%2015.9012%203.734%2015.7088%203.6405%2015.4878C3.54683%2015.2668%203.5%2015.0342%203.5%2014.7902V9.20975C3.5%208.96575%203.54683%208.73325%203.6405%208.51225C3.734%208.29125%203.86283%208.09875%204.027%207.93475L7.93475%204.027C8.09875%203.86283%208.29125%203.734%208.51225%203.6405C8.73325%203.54683%208.96575%203.5%209.20975%203.5H14.7902C15.0342%203.5%2015.2668%203.54683%2015.4878%203.6405C15.7088%203.734%2015.9012%203.86283%2016.0652%204.027L19.973%207.93475C20.1372%208.09875%2020.266%208.29125%2020.3595%208.51225C20.4532%208.73325%2020.5%208.96575%2020.5%209.20975V14.7902C20.5%2015.0342%2020.4532%2015.2668%2020.3595%2015.4878C20.266%2015.7088%2020.1372%2015.9012%2019.973%2016.0652L16.0652%2019.973C15.9012%2020.1372%2015.7088%2020.266%2015.4878%2020.3595C15.2668%2020.4532%2015.0342%2020.5%2014.7902%2020.5H9.20975ZM9.1%2019H14.9L19%2014.9V9.1L14.9%205H9.1L5%209.1V14.9L9.1%2019Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-warning {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M3.42558%2020.4998C3.25608%2020.4998%203.10383%2020.4584%202.96883%2020.3756C2.83383%2020.2927%202.72891%2020.1835%202.65408%2020.0478C2.57608%2019.9131%202.53316%2019.7673%202.52533%2019.6103C2.5175%2019.4533%202.55983%2019.2978%202.65233%2019.1438L11.2131%204.35581C11.3057%204.20181%2011.4216%204.08798%2011.5606%204.01431C11.6997%203.94064%2011.8462%203.90381%2012.0001%203.90381C12.1539%203.90381%2012.3004%203.94064%2012.4396%204.01431C12.5786%204.08798%2012.6944%204.20181%2012.7871%204.35581L21.3478%2019.1438C21.4403%2019.2978%2021.4827%2019.4533%2021.4748%2019.6103C21.467%2019.7673%2021.4241%2019.9131%2021.3461%2020.0478C21.2712%2020.1835%2021.1663%2020.2927%2021.0313%2020.3756C20.8963%2020.4584%2020.7441%2020.4998%2020.5746%2020.4998H3.42558ZM4.45008%2018.9998H19.5501L12.0001%205.99981L4.45008%2018.9998ZM12.0001%2017.8076C12.2289%2017.8076%2012.4207%2017.7301%2012.5756%2017.5753C12.7304%2017.4205%2012.8078%2017.2286%2012.8078%2016.9998C12.8078%2016.771%2012.7304%2016.5791%2012.5756%2016.4243C12.4207%2016.2695%2012.2289%2016.1921%2012.0001%2016.1921C11.7712%2016.1921%2011.5794%2016.2695%2011.4246%2016.4243C11.2697%2016.5791%2011.1923%2016.771%2011.1923%2016.9998C11.1923%2017.2286%2011.2697%2017.4205%2011.4246%2017.5753C11.5794%2017.7301%2011.7712%2017.8076%2012.0001%2017.8076ZM12.0003%2015.1921C12.213%2015.1921%2012.3911%2015.1202%2012.5346%2014.9766C12.6782%2014.8327%2012.7501%2014.6546%2012.7501%2014.4421V10.9421C12.7501%2010.7296%2012.6782%2010.5515%2012.5343%2010.4078C12.3905%2010.264%2012.2123%2010.1921%2011.9998%2010.1921C11.7872%2010.1921%2011.6091%2010.264%2011.4656%2010.4078C11.3219%2010.5515%2011.2501%2010.7296%2011.2501%2010.9421V14.4421C11.2501%2014.6546%2011.322%2014.8327%2011.4658%2014.9766C11.6097%2015.1202%2011.7878%2015.1921%2012.0003%2015.1921Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-info-filled {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.0003%2016.75C12.2129%2016.75%2012.391%2016.6781%2012.5345%2016.5343C12.6782%2016.3906%2012.75%2016.2125%2012.75%2016V11.75C12.75%2011.5375%2012.6781%2011.3593%2012.5343%2011.2155C12.3904%2011.0718%2012.2122%2011%2011.9997%2011C11.7871%2011%2011.609%2011.0718%2011.4655%2011.2155C11.3218%2011.3593%2011.25%2011.5375%2011.25%2011.75V16C11.25%2016.2125%2011.3219%2016.3906%2011.4658%2016.5343C11.6096%2016.6781%2011.7878%2016.75%2012.0003%2016.75ZM12%209.2885C12.2288%209.2885%2012.4207%209.21108%2012.5755%209.05625C12.7303%208.90142%2012.8078%208.70958%2012.8078%208.48075C12.8078%208.25192%2012.7303%208.06008%2012.5755%207.90525C12.4207%207.75058%2012.2288%207.67325%2012%207.67325C11.7712%207.67325%2011.5793%207.75058%2011.4245%207.90525C11.2697%208.06008%2011.1923%208.25192%2011.1923%208.48075C11.1923%208.70958%2011.2697%208.90142%2011.4245%209.05625C11.5793%209.21108%2011.7712%209.2885%2012%209.2885ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-check-circle-filled {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M10.5808%2016.2538L17.3038%209.53075L16.25%208.477L10.5808%2014.1463L7.73075%2011.2963L6.677%2012.35L10.5808%2016.2538ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-report-filled {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12%2016.7115C12.2288%2016.7115%2012.4207%2016.6341%2012.5755%2016.4793C12.7303%2016.3244%2012.8078%2016.1326%2012.8078%2015.9038C12.8078%2015.6749%2012.7303%2015.4831%2012.5755%2015.3283C12.4207%2015.1736%2012.2288%2015.0963%2012%2015.0963C11.7712%2015.0963%2011.5793%2015.1736%2011.4245%2015.3283C11.2697%2015.4831%2011.1923%2015.6749%2011.1923%2015.9038C11.1923%2016.1326%2011.2697%2016.3244%2011.4245%2016.4793C11.5793%2016.6341%2011.7712%2016.7115%2012%2016.7115ZM12.0003%2013.2308C12.2129%2013.2308%2012.391%2013.1589%2012.5345%2013.0152C12.6782%2012.8714%2012.75%2012.6933%2012.75%2012.4808V7.94225C12.75%207.72975%2012.6781%207.55167%2012.5343%207.408C12.3904%207.26417%2012.2122%207.19225%2011.9997%207.19225C11.7871%207.19225%2011.609%207.26417%2011.4655%207.408C11.3218%207.55167%2011.25%207.72975%2011.25%207.94225V12.4808C11.25%2012.6933%2011.3219%2012.8714%2011.4658%2013.0152C11.6096%2013.1589%2011.7878%2013.2308%2012.0003%2013.2308ZM9.20975%2020.5C8.96575%2020.5%208.73325%2020.4532%208.51225%2020.3595C8.29125%2020.266%208.09875%2020.1372%207.93475%2019.973L4.027%2016.0652C3.86283%2015.9012%203.734%2015.7088%203.6405%2015.4878C3.54683%2015.2668%203.5%2015.0342%203.5%2014.7902V9.20975C3.5%208.96575%203.54683%208.73325%203.6405%208.51225C3.734%208.29125%203.86283%208.09875%204.027%207.93475L7.93475%204.027C8.09875%203.86283%208.29125%203.734%208.51225%203.6405C8.73325%203.54683%208.96575%203.5%209.20975%203.5H14.7902C15.0342%203.5%2015.2668%203.54683%2015.4878%203.6405C15.7088%203.734%2015.9012%203.86283%2016.0652%204.027L19.973%207.93475C20.1372%208.09875%2020.266%208.29125%2020.3595%208.51225C20.4532%208.73325%2020.5%208.96575%2020.5%209.20975V14.7902C20.5%2015.0342%2020.4532%2015.2668%2020.3595%2015.4878C20.266%2015.7088%2020.1372%2015.9012%2019.973%2016.0652L16.0652%2019.973C15.9012%2020.1372%2015.7088%2020.266%2015.4878%2020.3595C15.2668%2020.4532%2015.0342%2020.5%2014.7902%2020.5H9.20975Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-warning-filled {
+  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M3.42558%2020.4998C3.25608%2020.4998%203.10383%2020.4584%202.96883%2020.3756C2.83383%2020.2927%202.72891%2020.1835%202.65408%2020.0478C2.57608%2019.9131%202.53316%2019.7673%202.52533%2019.6103C2.5175%2019.4533%202.55983%2019.2978%202.65233%2019.1438L11.2131%204.35581C11.3057%204.20181%2011.4216%204.08798%2011.5606%204.01431C11.6997%203.94064%2011.8462%203.90381%2012.0001%203.90381C12.1539%203.90381%2012.3004%203.94064%2012.4396%204.01431C12.5786%204.08798%2012.6944%204.20181%2012.7871%204.35581L21.3478%2019.1438C21.4403%2019.2978%2021.4827%2019.4533%2021.4748%2019.6103C21.467%2019.7673%2021.4241%2019.9131%2021.3461%2020.0478C21.2712%2020.1835%2021.1663%2020.2927%2021.0313%2020.3756C20.8963%2020.4584%2020.7441%2020.4998%2020.5746%2020.4998H3.42558ZM12.0001%2017.8076C12.2289%2017.8076%2012.4207%2017.7301%2012.5756%2017.5753C12.7304%2017.4205%2012.8078%2017.2286%2012.8078%2016.9998C12.8078%2016.771%2012.7304%2016.5791%2012.5756%2016.4243C12.4207%2016.2695%2012.2289%2016.1921%2012.0001%2016.1921C11.7712%2016.1921%2011.5794%2016.2695%2011.4246%2016.4243C11.2697%2016.5791%2011.1923%2016.771%2011.1923%2016.9998C11.1923%2017.2286%2011.2697%2017.4205%2011.4246%2017.5753C11.5794%2017.7301%2011.7712%2017.8076%2012.0001%2017.8076ZM12.0003%2015.1921C12.213%2015.1921%2012.3911%2015.1202%2012.5346%2014.9766C12.6782%2014.8327%2012.7501%2014.6546%2012.7501%2014.4421V10.9421C12.7501%2010.7296%2012.6782%2010.5515%2012.5343%2010.4078C12.3905%2010.264%2012.2123%2010.1921%2011.9998%2010.1921C11.7872%2010.1921%2011.6091%2010.264%2011.4656%2010.4078C11.3219%2010.5515%2011.2501%2010.7296%2011.2501%2010.9421V14.4421C11.2501%2014.6546%2011.322%2014.8327%2011.4658%2014.9766C11.6097%2015.1202%2011.7878%2015.1921%2012.0003%2015.1921Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+@utility mask-squircle {
+  mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
+}
+
+@utility mask-circle {
+  mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='100' cy='100' r='100'/%3e%3c/svg%3e");
+}
+
+/* Hover states & effects */
+@utility include-border-secondary {
+  @apply border border-line-highlight hover:border-line-strong disabled:border-line-default;
+}
+
+@utility include-border-bg-secondary {
+  @apply backdrop-blur include-border-secondary bg-background-surface active:bg-background-surface-elevated;
+}
+
+@utility include-border-destructive {
+  @apply border backdrop-blur bg-background-surface border-line-error/50 hover:border-line-error disabled:border-line-default active:bg-background-surface-elevated;
+}
+
+@utility include-hover-primary-active {
+  &::before {
+    @apply content-[''] opacity-100 scale-y-100 translate-y-0 bg-brand-default/10;
+  }
+}
+
+@utility include-hover-primary-active-filled {
+  @apply font-medium text-text-inverted;
+  &::before {
+    @apply content-[''] opacity-100 scale-y-100 translate-y-0 bg-brand-default;
+  }
+}
+
+@utility include-hover-primary-hover {
+  &::before {
+    @apply content-[''] opacity-100 scale-y-100 translate-y-0;
+  }
+}
+
+@utility include-hover-primary {
+  @apply relative;
+  > * {
+    @apply relative z-10;
+  }
+  &::before {
+    @apply content-[''] rounded-[inherit] absolute z-0 inset-0 scale-y-0 translate-y-2 transition-[scale,translate,opacity] duration-75 opacity-0 bg-brand-default/10 ease-out-expo;
+  }
+  &:hover {
+    @apply include-hover-primary-hover;
+  }
+  &:active::before {
+    @apply opacity-75;
+  }
+}
+
+/* Loading */
+/* .include-loading {
+  @apply absolute content-[''] size-5 animate-spin bg-contain bg-center;
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M12%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022Z%22%20stroke%3D%22currentColor%22%20stroke-opacity%3D%220.2%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%209.87827%204.84285%207.84344%206.34315%206.34315C7.84344%204.84285%209.87827%204%2012%204V0C5.373%200%200%205.373%200%2012H4ZM6%2017.291C4.70821%2015.8316%203.99661%2013.949%204%2012H0C0%2015.042%201.135%2017.824%203%2019.938L6%2017.291Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+} */
+
+/* 
+@layer components {
+  :where(.button, .badge, .checkbox, .radio, .switch, .tooltip, .tab-item) {
+    @apply interactive;
+  }
+} */
+
+.stepper,
+.countdown {
+  --height: 16px;
+  > * {
+    @apply h-(--height)!;
+  }
+
+  > span {
+    mask-size: cover;
+    mask-repeat: repeat-x;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjI1MCIgdmlld0JveD0iMCAwIDI1MCAyNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTAiIGhlaWdodD0iMjUwIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzQyXzMxMjcpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMzQyXzMxMjciIHgxPSIxMjUiIHkxPSIwIiB4Mj0iMTI1IiB5Mj0iMjUwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIvPgo8c3RvcCBvZmZzZXQ9IjAuMDkiLz4KPHN0b3Agb2Zmc2V0PSIwLjg4NSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
+  }
+  &.text-7xl {
+    --height: 72px;
+  }
+  &.text-6xl {
+    --height: 60px;
+  }
+  &.text-5xl {
+    --height: 48px;
+  }
+  &.text-4xl {
+    --height: 36px;
+  }
+  &.text-3xl {
+    --height: 30px;
+  }
+  &.text-2xl {
+    --height: 24px;
+  }
+  &.text-xl {
+    --height: 20px;
+  }
+  &.text-lg {
+    --height: 18px;
+  }
+  &.text-sm {
+    --height: 14px;
+  }
+  &.text-xs {
+    --height: 12px;
+  }
+}

package/styles/skeleton.css

@@ -0,0 +1,34 @@
+/*----------------------------*/
+/* SKELETON */
+/*----------------------------*/
+
+@utility skeleton {
+  @apply relative overflow-clip bg-transparent!;
+  > * {
+    @apply opacity-0 pointer-events-none;
+  }
+  &::before {
+    --tw-gradient-stops: var(--tw-gradient-from) 40%, var(--tw-gradient-to) 50% var(--tw-gradient-via-position),
+      var(--tw-gradient-from) 60% !important;
+    @apply content-[''] 
+    absolute inset-0
+    overflow-hidden
+    bg-text-default/0
+    from-text-default/5
+    to-text-default/10
+    bg-[linear-gradient(280deg,var(--tw-gradient-stops))]
+    bg-size-[800px_100%]
+    bg-position-[-200%_center]
+    bg-repeat
+    animate-[skeleton-loading_4s_linear_infinite];
+  }
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: -800px 0;
+  }
+  100% {
+    background-position: 800px 0;
+  }
+}

package/styles/state.css

@@ -0,0 +1,150 @@
+/*----------------------------*/
+/* STATE */
+/*----------------------------*/
+
+@property --state-progress {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: calc(0 * 1%);
+}
+
+@utility state {
+    @apply py-12 mx-auto max-w-md text-center;
+
+    /* Alignment variants */
+    &.state-left {
+      @apply text-left;
+      .state-icon {
+        @apply mx-0;
+      }
+      .state-actions {
+        @apply justify-start mx-0;
+      }
+    }
+    &.state-right {
+      @apply text-right;
+      .state-icon {
+        @apply mx-0;
+      }
+      .state-actions {
+        @apply justify-end mx-0;
+      }
+    }
+
+    /* Icon container */
+    .state-icon {
+      @apply inline-flex relative justify-center items-center mx-0 mb-4 rounded-full size-24;
+
+      &::before {
+        @apply content-[''] absolute inset-0 rounded-full mask;
+      }
+
+      /* Center alignment */
+      .state-center & {
+        @apply mx-auto;
+      }
+      /* Icon image */
+      img {
+        @apply w-full aspect-square;
+      }
+    }
+    /* Animated variant */
+    &.has-animation {
+      .state-icon {
+        @apply border-none;
+
+        &::before {
+          @apply content-[''] absolute z-10 inset-0 rounded-full;
+          background: conic-gradient(currentColor var(--state-progress), transparent 0);
+          mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff 0);
+          animation: circle-progress 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards;
+        }
+
+        img {
+          @apply animate-fire-in;
+          animation-delay: 850ms;
+        }
+        &::after {
+          @apply content-[''] absolute z-0 inset-0 rounded-full border border-line-default animate-ripple-out;
+          animation-delay: 1350ms;
+        }
+      }
+
+      > *:not(.state-icon) {
+        @apply animate-success-in-top;
+        &:nth-child(1) {
+          animation-delay: 200ms;
+        }
+        &:nth-child(2) {
+          animation-delay: 600ms;
+        }
+        &:nth-child(3) {
+          animation-delay: 800ms;
+        }
+        &:nth-child(4) {
+          animation-delay: 1000ms;
+        }
+      }
+    }
+
+    /* Variants */
+    &.state-success {
+      .state-icon {
+        @apply surface-success;
+        &::before {
+          @apply text-line-success;
+        }
+      }
+    }
+
+    &.state-error {
+      .state-icon {
+        @apply surface-error;
+        &::before {
+          @apply text-line-error;
+        }
+      }
+    }
+
+    &.state-info {
+      .state-icon {
+        @apply bg-brand-soft;
+        &::before {
+          @apply text-brand-default;
+        }
+      }
+    }
+
+    &.state-warning {
+      .state-icon {
+        @apply surface-warning;
+        &::before {
+          @apply text-line-warning;
+        }
+      }
+    }
+
+    /* Title */
+    .state-title {
+      @apply mb-2 h3 text-balance font-heading font-bold;
+    }
+
+    /* Description */
+    .state-description {
+      @apply mb-4 p2 text-balance;
+    }
+
+    /* Actions */
+  .state-actions {
+    @apply flex flex-col gap-2 justify-center mx-auto mt-4 md:flex-row;
+  }
+}
+
+@keyframes circle-progress {
+  from {
+    --state-progress: 0%;
+  }
+  to {
+    --state-progress: 100%;
+  }
+}