jaci-ui 0.6.3 → 0.8.0

package/dist/styles.css

@@ -5,6 +5,10 @@
     --made-with-panda: '🐼';
 }
 
+  :where([data-slot="bottom-navigation"]),:where([data-slot="sidebar"]) {
+    display: flex;
+}
+
   [data-jaci-theme] {
     background-color: var(--jaci-colors-surface-canvas);
     color: var(--jaci-colors-fg-default);
@@ -593,6 +597,21 @@
 @layer recipes{
   @layer _base{
 
+    .jaci-aspectRatioBox {
+      overflow: hidden;
+      box-sizing: border-box;
+      display: block;
+      position: relative;
+      width: 100%;
+}
+
+    .jaci-aspectRatioBox > * {
+      inset: var(--jaci-spacing-0);
+      position: absolute;
+      height: 100%;
+      width: 100%;
+}
+
     .jaci-spinner {
       animation: var(--jaci-animations-spin);
       border-color: var(--jaci-colors-transparent);
@@ -644,6 +663,21 @@
       transform: translateY(0);
 }
 
+    .jaci-code {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      background-color: var(--jaci-colors-surface-subtle);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: var(--jaci-font-sizes-sm);
+      max-width: 100%;
+}
+
+    .jaci-code,.jaci-input {
+      color: var(--jaci-colors-fg-default);
+}
+
     .jaci-input {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-lg);
@@ -652,7 +686,6 @@
       outline: var(--jaci-borders-none);
       background-color: var(--jaci-colors-transparent);
       box-sizing: border-box;
-      color: var(--jaci-colors-fg-default);
       font-family: system-ui, sans-serif;
       --transition-duration: var(--jaci-durations-slow);
       transition-duration: var(--jaci-durations-slow);
@@ -788,6 +821,17 @@
       outline-offset: 2px;
 }
 
+    .jaci-kbd {
+      border-radius: var(--jaci-radii-md);
+      align-items: center;
+      display: inline-flex;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-weight: 600;
+      justify-content: center;
+      line-height: 1;
+      white-space: nowrap;
+}
+
     .jaci-stack {
       display: flex;
 }
@@ -803,12 +847,53 @@
       flex-shrink: 0;
 }
 
+    .jaci-quote {
+      border-inline-start: 4px solid;
+      gap: var(--jaci-spacing-3);
+      margin-inline: var(--jaci-spacing-0);
+      padding-block: var(--jaci-spacing-3);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      display: grid;
+      overflow-wrap: anywhere;
+      padding-inline-end: var(--jaci-spacing-4);
+      padding-inline-start: var(--jaci-spacing-5);
+      font-style: italic;
+      line-height: 1.6;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-quote > [data-slot='quote-footer'] {
+      gap: var(--jaci-spacing-2);
+      align-items: baseline;
+      color: var(--jaci-colors-fg-muted);
+      display: flex;
+      flex-wrap: wrap;
+      font-size: var(--jaci-font-sizes-sm);
+      font-style: normal;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-quote > [data-slot='quote-author'] {
+      font-weight: 600;
+}
+
+    .jaci-quote > [data-slot='quote-source'] {
+      overflow-wrap: anywhere;
+}
+
     .jaci-skeleton {
       overflow: hidden;
       background-color: var(--jaci-colors-surface-subtle);
       display: block;
 }
 
+    .jaci-statGroup {
+      display: grid;
+      min-width: var(--jaci-sizes-0);
+}
+
     .jaci-toggle {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-md);
@@ -1033,6 +1118,30 @@
     width: 100%;
 }
 
+  .jaci-code--variant_inline {
+    padding-inline: var(--jaci-spacing-1);
+    padding-block: var(--jaci-spacing-0\.5);
+    display: inline;
+}
+
+  .jaci-code--variant_block {
+    padding: var(--jaci-spacing-4);
+    display: block;
+    white-space: pre;
+    overflow-x: auto;
+}
+
+  .jaci-code--wrap_true {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+  .jaci-code--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
   .jaci-input--size_md {
     min-height: var(--jaci-sizes-10);
 }
@@ -1066,31 +1175,96 @@
     font-size: var(--jaci-font-sizes-lg);
 }
 
-  .jaci-badge--tone_neutral {
+  .jaci-badge--tone_neutral-solid {
     background: var(--jaci-colors-neutral-600);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_accent {
+  .jaci-badge--tone_accent-solid {
     background: var(--jaci-colors-accent-default);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_success {
+  .jaci-badge--tone_success-solid {
     background: var(--jaci-colors-success);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_warning {
+  .jaci-badge--tone_warning-solid {
     background: var(--jaci-colors-warning);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_danger {
+  .jaci-badge--tone_danger-solid {
     background: var(--jaci-colors-danger);
     color: var(--jaci-colors-fg-on-accent);
 }
 
+  .jaci-badge--tone_neutral-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-badge--tone_accent-soft {
+    background-color: var(--jaci-colors-selected);
+    color: var(--jaci-colors-accent-default);
+}
+
+  .jaci-badge--tone_success-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-badge--tone_warning-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-warning);
+}
+
+  .jaci-badge--tone_danger-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-danger);
+}
+
+  .jaci-badge--tone_neutral-outline {
+    border-color: var(--jaci-colors-border-strong);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-badge--tone_accent-outline {
+    border-color: var(--jaci-colors-accent-default);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-accent-default);
+}
+
+  .jaci-badge--tone_success-outline {
+    border-color: var(--jaci-colors-success);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-badge--tone_warning-outline {
+    border-color: var(--jaci-colors-warning);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-warning);
+}
+
+  .jaci-badge--tone_danger-outline {
+    border-color: var(--jaci-colors-danger);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-danger);
+}
+
   .jaci-iconButton--variant_outline {
     background-color: var(--jaci-colors-transparent);
     color: var(--jaci-colors-fg-default);
@@ -1150,6 +1324,41 @@
     width: var(--jaci-sizes-12);
 }
 
+  .jaci-kbd--size_md {
+    padding-inline: var(--jaci-spacing-2);
+    font-size: var(--jaci-font-sizes-sm);
+    min-height: var(--jaci-sizes-6);
+}
+
+  .jaci-kbd--variant_subtle {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-kbd--size_sm {
+    padding-inline: var(--jaci-spacing-1\.5);
+    font-size: var(--jaci-font-sizes-xs);
+    min-height: var(--jaci-sizes-5);
+}
+
+  .jaci-kbd--size_lg {
+    padding-inline: var(--jaci-spacing-2\.5);
+    font-size: var(--jaci-font-sizes-md);
+    min-height: var(--jaci-sizes-8);
+}
+
+  .jaci-kbd--variant_solid {
+    background-color: var(--jaci-colors-fg-default);
+    color: var(--jaci-colors-surface-canvas);
+}
+
+  .jaci-kbd--variant_outline {
+    border-color: var(--jaci-colors-border-strong);
+    border-style: solid;
+    border-width: 1px;
+    color: var(--jaci-colors-fg-default);
+}
+
   .jaci-stack--direction_vertical {
     flex-direction: column;
 }
@@ -1257,6 +1466,33 @@
     height: 100%;
 }
 
+  .jaci-quote--size_md {
+    font-size: var(--jaci-font-sizes-md);
+}
+
+  .jaci-quote--variant_default {
+    border-color: var(--jaci-colors-border-default);
+    background-color: var(--jaci-colors-surface-raised);
+}
+
+  .jaci-quote--variant_accent {
+    border-color: var(--jaci-colors-accent-default);
+    background-color: var(--jaci-colors-selected);
+}
+
+  .jaci-quote--variant_subtle {
+    border-color: var(--jaci-colors-border-strong);
+    background-color: var(--jaci-colors-surface-subtle);
+}
+
+  .jaci-quote--size_sm {
+    font-size: var(--jaci-font-sizes-sm);
+}
+
+  .jaci-quote--size_lg {
+    font-size: var(--jaci-font-sizes-lg);
+}
+
   .jaci-skeleton--animated_true {
     animation: jaciSkeletonPulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -1279,6 +1515,26 @@
     width: var(--jaci-sizes-10);
 }
 
+  .jaci-statGroup--columns_3 {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+  .jaci-statGroup--gap_md {
+    gap: var(--jaci-spacing-4);
+}
+
+  .jaci-statGroup--columns_1,.jaci-statGroup--columns_2,.jaci-statGroup--columns_4 {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+  .jaci-statGroup--gap_sm {
+    gap: var(--jaci-spacing-2);
+}
+
+  .jaci-statGroup--gap_lg {
+    gap: var(--jaci-spacing-6);
+}
+
   .jaci-toggle--size_md {
     padding-inline: var(--jaci-spacing-3);
     font-size: var(--jaci-font-sizes-sm);
@@ -1310,14 +1566,77 @@
     min-height: var(--jaci-sizes-11);
 }
 
+  .jaci-heading--weight_bold {
+    font-weight: 700;
+}
+
   .jaci-heading--size_xl {
     font-size: var(--jaci-font-sizes-2xl);
 }
 
+  .jaci-heading--width_auto {
+    width: auto;
+}
+
   .jaci-heading--size_md {
     font-size: var(--jaci-font-sizes-lg);
 }
 
+  .jaci-heading--weight_normal {
+    font-weight: 400;
+}
+
+  .jaci-heading--weight_medium {
+    font-weight: 500;
+}
+
+  .jaci-heading--weight_semibold {
+    font-weight: 600;
+}
+
+  .jaci-heading--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+  .jaci-heading--lineClamp_1 {
+    -webkit-line-clamp: 1;
+}
+
+  .jaci-heading--lineClamp_1,.jaci-heading--lineClamp_2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-heading--lineClamp_2 {
+    -webkit-line-clamp: 2;
+}
+
+  .jaci-heading--lineClamp_3 {
+    -webkit-line-clamp: 3;
+}
+
+  .jaci-heading--lineClamp_3,.jaci-heading--lineClamp_4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-heading--lineClamp_4 {
+    -webkit-line-clamp: 4;
+}
+
+  .jaci-heading--width_fit {
+    width: fit-content;
+}
+
+  .jaci-heading--width_full {
+    min-width: var(--jaci-sizes-0);
+    width: 100%;
+}
+
   .jaci-heading--size_xs,.jaci-heading--size_sm {
     font-size: var(--jaci-font-sizes-md);
 }
@@ -1340,60 +1659,189 @@
     color: var(--jaci-colors-accent-hover);
 }
 
-  .jaci-text--size_md {
-    font-size: var(--jaci-font-sizes-md);
+  .jaci-paragraph--weight_normal {
+    font-weight: 400;
 }
 
-  .jaci-text--tone_default {
-    color: var(--jaci-colors-fg-default);
+  .jaci-paragraph--width_auto {
+    width: auto;
 }
 
-  .jaci-text--size_sm {
-    font-size: var(--jaci-font-sizes-sm);
+  .jaci-paragraph--weight_medium {
+    font-weight: 500;
 }
 
-  .jaci-text--size_lg {
-    font-size: var(--jaci-font-sizes-lg);
+  .jaci-paragraph--weight_semibold {
+    font-weight: 600;
 }
 
-  .jaci-text--tone_muted {
-    color: var(--jaci-colors-fg-muted);
+  .jaci-paragraph--weight_bold {
+    font-weight: 700;
 }
 
-  .jaci-control--kind_checkbox {
-    border-radius: var(--jaci-radii-sm);
+  .jaci-paragraph--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-  .jaci-control--kind_radio {
-    border-radius: var(--jaci-radii-full);
+  .jaci-paragraph--lineClamp_1 {
+    -webkit-line-clamp: 1;
 }
 
-  @media screen and (min-width: 40rem) {
-    .jaci-grid--columns_4 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+  .jaci-paragraph--lineClamp_1,.jaci-paragraph--lineClamp_2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
 }
+
+  .jaci-paragraph--lineClamp_2 {
+    -webkit-line-clamp: 2;
 }
 
-  @media screen and (min-width: 48rem) {
-    .jaci-grid--columns_3,.jaci-grid--columns_2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+  .jaci-paragraph--lineClamp_3 {
+    -webkit-line-clamp: 3;
 }
-    .jaci-grid--columns_4 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  .jaci-paragraph--lineClamp_3,.jaci-paragraph--lineClamp_4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
 }
-    .jaci-heading--size_xl {
-      font-size: var(--jaci-font-sizes-3xl);
+
+  .jaci-paragraph--lineClamp_4 {
+    -webkit-line-clamp: 4;
 }
-    .jaci-heading--size_md {
-      font-size: var(--jaci-font-sizes-xl);
+
+  .jaci-paragraph--width_fit {
+    width: fit-content;
 }
-    .jaci-heading--size_xs {
-      font-size: var(--jaci-font-sizes-md);
+
+  .jaci-paragraph--width_full {
+    min-width: var(--jaci-sizes-0);
+    width: 100%;
 }
-    .jaci-heading--size_sm {
-      font-size: var(--jaci-font-sizes-lg);
+
+  .jaci-text--weight_normal {
+    font-weight: 400;
 }
-    .jaci-heading--size_lg {
+
+  .jaci-text--size_md {
+    font-size: var(--jaci-font-sizes-md);
+}
+
+  .jaci-text--tone_default {
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-text--width_auto {
+    width: auto;
+}
+
+  .jaci-text--weight_medium {
+    font-weight: 500;
+}
+
+  .jaci-text--weight_semibold {
+    font-weight: 600;
+}
+
+  .jaci-text--weight_bold {
+    font-weight: 700;
+}
+
+  .jaci-text--size_sm {
+    font-size: var(--jaci-font-sizes-sm);
+}
+
+  .jaci-text--size_lg {
+    font-size: var(--jaci-font-sizes-lg);
+}
+
+  .jaci-text--tone_muted {
+    color: var(--jaci-colors-fg-muted);
+}
+
+  .jaci-text--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+  .jaci-text--lineClamp_1 {
+    -webkit-line-clamp: 1;
+}
+
+  .jaci-text--lineClamp_1,.jaci-text--lineClamp_2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-text--lineClamp_2 {
+    -webkit-line-clamp: 2;
+}
+
+  .jaci-text--lineClamp_3 {
+    -webkit-line-clamp: 3;
+}
+
+  .jaci-text--lineClamp_3,.jaci-text--lineClamp_4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-text--lineClamp_4 {
+    -webkit-line-clamp: 4;
+}
+
+  .jaci-text--width_fit {
+    width: fit-content;
+}
+
+  .jaci-text--width_full {
+    min-width: var(--jaci-sizes-0);
+    width: 100%;
+}
+
+  .jaci-control--kind_checkbox {
+    border-radius: var(--jaci-radii-sm);
+}
+
+  .jaci-control--kind_radio {
+    border-radius: var(--jaci-radii-full);
+}
+
+  @media screen and (min-width: 40rem) {
+    .jaci-grid--columns_4,.jaci-statGroup--columns_4 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+
+  @media screen and (min-width: 48rem) {
+    .jaci-grid--columns_3,.jaci-grid--columns_2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+    .jaci-grid--columns_4 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+    .jaci-statGroup--columns_3,.jaci-statGroup--columns_2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+    .jaci-heading--size_xl {
+      font-size: var(--jaci-font-sizes-3xl);
+}
+    .jaci-heading--size_md {
+      font-size: var(--jaci-font-sizes-xl);
+}
+    .jaci-heading--size_xs {
+      font-size: var(--jaci-font-sizes-md);
+}
+    .jaci-heading--size_sm {
+      font-size: var(--jaci-font-sizes-lg);
+}
+    .jaci-heading--size_lg {
       font-size: var(--jaci-font-sizes-2xl);
 }
     .jaci-heading--size_2xl {
@@ -1413,6 +1861,12 @@
 }
     .jaci-grid--columns_4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+    .jaci-statGroup--columns_3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+    .jaci-statGroup--columns_4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
 }
     .jaci-heading--size_xl {
       font-size: var(--jaci-font-sizes-4xl);
@@ -1585,6 +2039,15 @@
       margin-top: var(--jaci-spacing-1);
 }
 
+    .jaci-alert__actions {
+      gap: var(--jaci-spacing-2);
+      grid-column: 2;
+      display: flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+      margin-top: var(--jaci-spacing-2);
+}
+
     .jaci-dialog__trigger {
       border-color: var(--jaci-colors-border-interactive);
       border-radius: var(--jaci-radii-lg);
@@ -2162,6 +2625,7 @@
       transition-property: background-color, border-color, box-shadow, transform;
       --transition-easing: var(--jaci-easings-standard);
       transition-timing-function: var(--jaci-easings-standard);
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-card__root:is(:hover, [data-hover]) {
@@ -2172,6 +2636,8 @@
     .jaci-card__header {
       padding-inline: var(--jaci-spacing-6);
       flex-direction: column;
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
       padding-top: var(--jaci-spacing-6);
 }
 
@@ -2189,13 +2655,18 @@
 
     .jaci-card__content {
       flex: 1 1 0%;
-      padding-inline: var(--jaci-spacing-6);
       padding-block: var(--jaci-spacing-6);
+      overflow-wrap: anywhere;
+}
+
+    .jaci-card__content,.jaci-card__footer {
+      padding-inline: var(--jaci-spacing-6);
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-card__footer {
       gap: var(--jaci-spacing-2);
-      padding-inline: var(--jaci-spacing-6);
+      flex-wrap: wrap;
       margin-top: auto;
       padding-bottom: var(--jaci-spacing-6);
       padding-top: var(--jaci-spacing-2);
@@ -4696,93 +5167,409 @@
       opacity: 0.5;
 }
 
-    .jaci-drawer__action:is(:focus-visible, [data-focus-visible]) {
-      outline: 2px solid;
-      outline-color: var(--jaci-colors-accent-default);
-      outline-offset: 2px;
+    .jaci-drawer__action:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 2px;
+}
+
+    .jaci-drawer__action:is(:hover, [data-hover]) {
+      border-color: var(--jaci-colors-fg-muted);
+      background-color: var(--jaci-colors-surface-subtle);
+      box-shadow: var(--jaci-shadows-xl);
+      transform: translateY(-1px);
+}
+
+    .jaci-drawer__action:is(:active, [data-active]) {
+      transform: translateY(0);
+}
+
+    .jaci-emptyState__root {
+      padding: var(--jaci-spacing-8);
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-2xl);
+      border-style: dashed;
+      border-width: 1px;
+      gap: var(--jaci-spacing-3);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-default);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      max-width: 100%;
+      min-height: var(--jaci-sizes-32);
+}
+
+    .jaci-emptyState__icon {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-2xl);
+      line-height: 1;
+}
+
+    .jaci-emptyState__title {
+      font-size: var(--jaci-font-sizes-lg);
+      font-weight: 700;
+}
+
+    .jaci-emptyState__description {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      max-width: var(--jaci-sizes-prose);
+}
+
+    .jaci-emptyState__action {
+      gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      max-width: 100%;
+}
+
+    .jaci-fieldset__root {
+      border: 0;
+      margin: var(--jaci-spacing-0);
+      padding: var(--jaci-spacing-0);
+      gap: var(--jaci-spacing-3);
+      display: flex;
+      flex-direction: column;
+      min-inline-size: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-fieldset__legend {
+      padding: var(--jaci-spacing-0);
+      color: var(--jaci-colors-fg-default);
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-md);
+      font-weight: 700;
+      margin-block-end: var(--jaci-spacing-1);
+}
+
+    .jaci-fieldset__description {
+      margin: var(--jaci-spacing-0);
+      color: var(--jaci-colors-fg-muted);
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      line-height: 1.5;
+}
+
+    .jaci-image__root {
+      border-radius: var(--jaci-radii-xl);
+      overflow: hidden;
+      display: inline-flex;
+      position: relative;
+      vertical-align: middle;
+      max-width: 100%;
+}
+
+    .jaci-image__image {
+      display: block;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: opacity;
+      transition-property: opacity;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      max-width: 100%;
+}
+
+    .jaci-image__fallback {
+      inset: var(--jaci-spacing-0);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-fg-muted);
+      display: flex;
+      justify-content: center;
+      overflow-wrap: anywhere;
+      position: absolute;
+      text-align: center;
+      min-height: var(--jaci-sizes-12);
+}
+
+    .jaci-image__trigger {
+      border: 0;
+      padding: var(--jaci-spacing-0);
+      border-radius: var(--jaci-radii-xl);
+      overflow: hidden;
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-transparent);
+      cursor: zoom-in;
+      display: inline-flex;
+      max-width: 100%;
+}
+
+    .jaci-image__trigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 3px;
+}
+
+    .jaci-image__backdrop {
+      inset: var(--jaci-spacing-0);
+      --backdrop-blur: blur(var(--jaci-blurs-md));
+      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      background-color: var(--jaci-colors-surface-overlay);
+      position: fixed;
+      z-index: 60;
+      min-height: 100dvh;
+}
+
+    .jaci-image__backdrop[data-ending-style],.jaci-image__backdrop[data-starting-style] {
+      opacity: 0;
+}
+
+    .jaci-image__viewport {
+      inset: var(--jaci-spacing-0);
+      padding: var(--jaci-spacing-4);
+      justify-content: center;
+      position: fixed;
+      z-index: 60;
+}
+
+    .jaci-image__viewport,.jaci-image__popup {
+      overflow: auto;
+      align-items: center;
+      display: flex;
+}
+
+    .jaci-image__popup {
+      gap: var(--jaci-spacing-2);
+      background-color: var(--jaci-colors-transparent);
+      flex-direction: column;
+      position: relative;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: opacity, transform;
+      transition-property: opacity, transform;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      max-height: calc(100dvh - 2rem);
+      max-width: calc(100vw - 2rem);
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-image__popup[data-ending-style],.jaci-image__popup[data-starting-style] {
+      opacity: 0;
+      transform: scale(0.98);
+}
+
+    .jaci-image__lightboxImage {
+      border-radius: var(--jaci-radii-xl);
+      display: block;
+      object-fit: contain;
+      max-height: calc(100dvh - 8rem);
+      max-width: calc(100vw - 4rem);
+}
+
+    .jaci-image__closeRow {
+      align-items: center;
+      display: flex;
+      justify-content: flex-end;
+      min-height: 2rem;
+      width: 100%;
+}
+
+    .jaci-image__close {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-full);
+      border-style: solid;
+      border-width: 1px;
+      align-items: center;
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-surface-raised);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      flex-shrink: 0;
+      justify-content: center;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-image__close:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 2px;
+}
+
+    .jaci-image__close:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-image__title {
+      overflow: hidden;
+      position: absolute;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      width: 1px;
+      height: 1px;
+}
+
+    .jaci-figure__root {
+      margin: var(--jaci-spacing-0);
+      gap: var(--jaci-spacing-2);
+      display: grid;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-figure__image {
+      border-radius: var(--jaci-radii-xl);
+      display: block;
+      max-width: 100%;
+}
+
+    .jaci-figure__caption {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      line-height: 1.5;
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-figure__trigger {
+      border: 0;
+      padding: var(--jaci-spacing-0);
+      border-radius: var(--jaci-radii-xl);
+      overflow: hidden;
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-transparent);
+      cursor: zoom-in;
+      display: inline-flex;
+      max-width: 100%;
+}
+
+    .jaci-figure__trigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 3px;
+}
+
+    .jaci-figure__backdrop {
+      inset: var(--jaci-spacing-0);
+      --backdrop-blur: blur(var(--jaci-blurs-md));
+      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      background-color: var(--jaci-colors-surface-overlay);
+      position: fixed;
+      z-index: 60;
+      min-height: 100dvh;
+}
+
+    .jaci-figure__backdrop[data-ending-style],.jaci-figure__backdrop[data-starting-style] {
+      opacity: 0;
 }
 
-    .jaci-drawer__action:is(:hover, [data-hover]) {
-      border-color: var(--jaci-colors-fg-muted);
-      background-color: var(--jaci-colors-surface-subtle);
-      box-shadow: var(--jaci-shadows-xl);
-      transform: translateY(-1px);
+    .jaci-figure__viewport {
+      inset: var(--jaci-spacing-0);
+      padding: var(--jaci-spacing-4);
+      justify-content: center;
+      position: fixed;
+      z-index: 60;
 }
 
-    .jaci-drawer__action:is(:active, [data-active]) {
-      transform: translateY(0);
+    .jaci-figure__viewport,.jaci-figure__popup {
+      overflow: auto;
+      align-items: center;
+      display: flex;
 }
 
-    .jaci-emptyState__root {
-      padding: var(--jaci-spacing-8);
-      border-color: var(--jaci-colors-border-default);
-      border-radius: var(--jaci-radii-2xl);
-      border-style: dashed;
-      border-width: 1px;
+    .jaci-figure__popup {
       gap: var(--jaci-spacing-3);
-      align-items: center;
-      background-color: var(--jaci-colors-surface-default);
-      box-sizing: border-box;
-      color: var(--jaci-colors-fg-default);
-      display: flex;
+      background-color: var(--jaci-colors-transparent);
       flex-direction: column;
-      justify-content: center;
-      text-align: center;
-      max-width: 100%;
-      min-height: var(--jaci-sizes-32);
+      position: relative;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: opacity, transform;
+      transition-property: opacity, transform;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      max-height: calc(100dvh - 2rem);
+      max-width: calc(100vw - 2rem);
+      min-width: var(--jaci-sizes-0);
 }
 
-    .jaci-emptyState__icon {
-      color: var(--jaci-colors-fg-muted);
-      font-size: var(--jaci-font-sizes-2xl);
-      line-height: 1;
+    .jaci-figure__popup[data-ending-style],.jaci-figure__popup[data-starting-style] {
+      opacity: 0;
+      transform: scale(0.98);
 }
 
-    .jaci-emptyState__title {
-      font-size: var(--jaci-font-sizes-lg);
-      font-weight: 700;
+    .jaci-figure__lightboxImage {
+      border-radius: var(--jaci-radii-xl);
+      display: block;
+      object-fit: contain;
+      max-height: calc(100dvh - 8rem);
+      max-width: calc(100vw - 4rem);
 }
 
-    .jaci-emptyState__description {
-      color: var(--jaci-colors-fg-muted);
+    .jaci-figure__lightboxCaption {
+      padding: var(--jaci-spacing-3);
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      background-color: var(--jaci-colors-surface-canvas);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
       font-size: var(--jaci-font-sizes-sm);
-      max-width: var(--jaci-sizes-prose);
+      line-height: 1.5;
+      overflow-wrap: anywhere;
+      text-align: center;
+      max-width: min(48rem, calc(100vw - 4rem));
+      width: 100%;
 }
 
-    .jaci-emptyState__action {
-      gap: var(--jaci-spacing-2);
+    .jaci-figure__closeRow {
+      align-items: center;
       display: flex;
-      flex-wrap: wrap;
+      justify-content: flex-end;
+      min-height: 2rem;
+      width: 100%;
+}
+
+    .jaci-figure__close {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-full);
+      border-style: solid;
+      border-width: 1px;
+      align-items: center;
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-surface-raised);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      flex-shrink: 0;
       justify-content: center;
-      max-width: 100%;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
 }
 
-    .jaci-fieldset__root {
-      border: 0;
-      margin: var(--jaci-spacing-0);
-      padding: var(--jaci-spacing-0);
-      gap: var(--jaci-spacing-3);
-      display: flex;
-      flex-direction: column;
-      min-inline-size: var(--jaci-sizes-0);
-      width: 100%;
+    .jaci-figure__close:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 2px;
 }
 
-    .jaci-fieldset__legend {
-      padding: var(--jaci-spacing-0);
-      color: var(--jaci-colors-fg-default);
-      font-family: system-ui, sans-serif;
-      font-size: var(--jaci-font-sizes-md);
-      font-weight: 700;
-      margin-block-end: var(--jaci-spacing-1);
+    .jaci-figure__close:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
 }
 
-    .jaci-fieldset__description {
-      margin: var(--jaci-spacing-0);
-      color: var(--jaci-colors-fg-muted);
-      font-family: system-ui, sans-serif;
-      font-size: var(--jaci-font-sizes-sm);
-      line-height: 1.5;
+    .jaci-figure__title {
+      overflow: hidden;
+      position: absolute;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      width: 1px;
+      height: 1px;
 }
 
     .jaci-list__root {
@@ -5247,7 +6034,6 @@
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
-      display: flex;
       position: fixed;
       transform: translateX(-50%);
       -webkit-user-select: none;
@@ -5369,7 +6155,7 @@
       overflow-wrap: anywhere;
       max-width: calc(100vw - 2rem);
       min-width: var(--jaci-sizes-0);
-      width: min(32rem, calc(100vw - 2rem));
+      width: max-content;
 }
 
     .jaci-navigation-menu__link {
@@ -5440,6 +6226,7 @@
       overflow-wrap: anywhere;
       max-width: calc(100vw - 2rem);
       min-width: var(--jaci-sizes-0);
+      width: max-content;
 }
 
     .jaci-navigation-menu__backdrop {
@@ -6010,6 +6797,13 @@
       line-height: 1.5;
 }
 
+    .jaci-progress__value {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      font-variant-numeric: tabular-nums;
+      margin-inline-start: auto;
+}
+
     .jaci-progress__track {
       border-radius: var(--jaci-radii-full);
       overflow: hidden;
@@ -6493,7 +7287,6 @@
     .jaci-sidebar__root {
       background-color: var(--jaci-colors-surface-canvas);
       color: var(--jaci-colors-fg-default);
-      display: flex;
       flex-direction: column;
       flex-shrink: 0;
       position: relative;
@@ -6799,6 +7592,61 @@
       box-shadow: var(--jaci-shadows-lg);
 }
 
+    .jaci-stat__root {
+      padding: var(--jaci-spacing-4);
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-xl);
+      border-style: solid;
+      border-width: 1px;
+      gap: var(--jaci-spacing-1);
+      overflow: hidden;
+      background-color: var(--jaci-colors-surface-raised);
+      display: grid;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stat__icon {
+      border-radius: var(--jaci-radii-lg);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-accent-default);
+      display: inline-flex;
+      justify-content: center;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-stat__label {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stat__value {
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-2xl);
+      font-variant-numeric: tabular-nums;
+      font-weight: 700;
+      line-height: 1.2;
+}
+
+    .jaci-stat__value,.jaci-stat__description {
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stat__description {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-stat__trend {
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 700;
+      min-width: var(--jaci-sizes-0);
+}
+
     .jaci-stepper__root {
       gap: var(--jaci-spacing-4);
       color: var(--jaci-colors-fg-default);
@@ -8396,6 +9244,9 @@
 }
 
     @media screen and (min-width: 40rem) {
+      .jaci-card__footer {
+        flex-direction: row;
+}
       .jaci-data-view__root[data-layout='grid'][data-columns='4'] [data-slot='data-view-content'] {
         grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -8446,6 +9297,9 @@
 }
       .jaci-drawer__footer {
         padding: var(--jaci-spacing-6);
+}
+      .jaci-image__viewport,.jaci-figure__viewport {
+        padding: var(--jaci-spacing-8);
 }
       .jaci-navbar__bar {
         padding: var(--jaci-spacing-4);
@@ -8470,6 +9324,9 @@
         font-size: var(--jaci-font-sizes-md);
         min-height: var(--jaci-sizes-10);
         min-width: var(--jaci-sizes-10);
+}
+      .jaci-stat__value {
+        font-size: var(--jaci-font-sizes-3xl);
 }
       .jaci-table__head[data-hide-below=md],.jaci-table__cell[data-hide-below=md] {
         display: table-cell;
@@ -8516,7 +9373,7 @@
 }
 
     @media (prefers-reduced-motion: reduce) {
-      .jaci-dialog__popup,.jaci-menu__popup,.jaci-drawer__popup,.jaci-menubar__trigger,.jaci-popover__popup,.jaci-select__popup {
+      .jaci-dialog__popup,.jaci-menu__popup,.jaci-drawer__popup,.jaci-image__popup,.jaci-figure__popup,.jaci-menubar__trigger,.jaci-popover__popup,.jaci-select__popup {
         --transition-duration: 0ms;
         transition-duration: 0ms;
         --transition-prop: none;
@@ -8669,6 +9526,29 @@
     font-size: var(--jaci-font-sizes-lg);
 }
 
+  .jaci-command__root--mode_dropdown {
+    overflow: visible;
+    position: relative;
+}
+
+  .jaci-command__list--mode_dropdown {
+    border-color: var(--jaci-colors-border-default);
+    border-radius: var(--jaci-radii-lg);
+    border-style: solid;
+    border-width: 1px;
+    --backdrop-blur: blur(var(--jaci-blurs-md));
+    backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+    -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+    background-color: var(--jaci-colors-surface-overlay);
+    box-shadow: var(--jaci-shadows-lg);
+    position: absolute;
+    z-index: 50;
+    left: var(--jaci-spacing-0);
+    max-width: calc(100vw - 2rem);
+    top: calc(100% + 0.5rem);
+    width: min(100%, calc(100vw - 2rem));
+}
+
   .jaci-toggleSwitch__root--checked_true {
     background-color: var(--jaci-colors-accent-default);
 }
@@ -8739,6 +9619,30 @@
     opacity: 0.65;
 }
 
+  .jaci-image__image--fit_cover {
+    object-fit: cover;
+}
+
+  .jaci-image__image--status_loading {
+    opacity: 0;
+}
+
+  .jaci-image__image--fit_contain {
+    object-fit: contain;
+}
+
+  .jaci-image__image--fit_fill {
+    object-fit: fill;
+}
+
+  .jaci-image__image--fit_none {
+    object-fit: none;
+}
+
+  .jaci-image__image--status_loaded {
+    opacity: 1;
+}
+
   .jaci-list__root--gap_md {
     gap: var(--jaci-spacing-2);
 }
@@ -9062,6 +9966,50 @@
     width: var(--jaci-sizes-6);
 }
 
+  .jaci-stat__trend--tone_neutral,.jaci-stat__trend--direction_neutral {
+    color: var(--jaci-colors-fg-muted);
+}
+
+  .jaci-stat__trend--tone_accent {
+    color: var(--jaci-colors-accent-default);
+}
+
+  .jaci-stat__trend--tone_success {
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-stat__trend--tone_warning {
+    color: var(--jaci-colors-warning);
+}
+
+  .jaci-stat__trend--tone_danger {
+    color: var(--jaci-colors-danger);
+}
+
+  .jaci-stat__root--size_sm {
+    padding: var(--jaci-spacing-3);
+}
+
+  .jaci-stat__value--size_sm {
+    font-size: var(--jaci-font-sizes-xl);
+}
+
+  .jaci-stat__root--size_lg {
+    padding: var(--jaci-spacing-6);
+}
+
+  .jaci-stat__value--size_lg {
+    font-size: var(--jaci-font-sizes-3xl);
+}
+
+  .jaci-stat__trend--direction_up {
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-stat__trend--direction_down {
+    color: var(--jaci-colors-danger);
+}
+
   .jaci-stepper__list--orientation_horizontal {
     align-items: flex-start;
     flex-direction: row;
@@ -9147,27 +10095,23 @@
 }
 
   .jaci-toast__root--tone_info {
-    border-color: var(--jaci-colors-accent-hover);
-    background-color: var(--jaci-colors-accent-default);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-info);
+    background-color: color-mix(in srgb, var(--jaci-colors-info) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toast__root--tone_success {
-    border-color: var(--jaci-colors-green-700);
-    background-color: var(--jaci-colors-success);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-success);
+    background-color: color-mix(in srgb, var(--jaci-colors-success) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toast__root--tone_warning {
-    border-color: var(--jaci-colors-amber-700);
-    background-color: var(--jaci-colors-warning);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-warning);
+    background-color: color-mix(in srgb, var(--jaci-colors-warning) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toast__root--tone_danger {
-    border-color: var(--jaci-colors-red-600);
-    background-color: var(--jaci-colors-danger);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-danger);
+    background-color: color-mix(in srgb, var(--jaci-colors-danger) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toggle-group__item--size_md {
@@ -9270,6 +10214,9 @@
 }
     .jaci-sidebar__root--open_false {
       width: var(--jaci-sizes-20);
+}
+    .jaci-stat__value--size_lg {
+      font-size: var(--jaci-font-sizes-4xl);
 }
 }