@okshaun/components 2.0.0 → 2.0.1

package/dist/styles.css

@@ -503,21 +503,19 @@
     --oks-radii-999: 999px;
     --oks-shadows-zero-shadow: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-transparent), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-transparent);
     --oks-shadows-raised-light: var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light);
+    --oks-shadows-raised-light-up: var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light);
     --oks-shadows-raised-dark: var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark);
+    --oks-shadows-raised-dark-up: var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark);
     --oks-shadows-elevated-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light);
+    --oks-shadows-elevated-light-up: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light);
     --oks-shadows-elevated-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark);
+    --oks-shadows-elevated-dark-up: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark);
     --oks-shadows-overlay-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light);
-    --oks-shadows-overlay-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark);
+    --oks-shadows-overlay-light-up: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light);
+    --oks-shadows-overlay-dark: var(--oks-shadows-overlay-dark);
+    --oks-shadows-overlay-dark-up: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark);
     --oks-shadows-overflow-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-colors-shadow-overflow-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-light);
     --oks-shadows-overflow-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-12) var(--oks-colors-shadow-overflow-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-dark);
-    --oks-shadows-low-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(30, 30, 30, 0.2);
-    --oks-shadows-low-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(0, 0, 0, 0.4);
-    --oks-shadows-medium-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(30, 30, 30, 0.2);
-    --oks-shadows-medium-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(0, 0, 0, 0.4);
-    --oks-shadows-high-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(30, 30, 30, 0.2);
-    --oks-shadows-high-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(0, 0, 0, 0.4);
-    --oks-shadows-inset-light: inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(30, 30, 30, 0.2);
-    --oks-shadows-inset-dark: inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(0, 0, 0, 0.4);
     --oks-sizes-0: 0;
     --oks-sizes-1: 0.0625rem;
     --oks-sizes-2: 0.125rem;
@@ -882,13 +880,11 @@
     --oks-colors-text-accent-tan-bold: var(--oks-colors-tan-60);
     --oks-shadows-zero: var(--oks-shadows-zero-shadow);
     --oks-shadows-raised: var(--oks-shadows-raised-light);
+    --oks-shadows-raised-up: var(--oks-shadows-raised-light-up);
     --oks-shadows-elevated: var(--oks-shadows-elevated-light);
+    --oks-shadows-elevated-up: var(--oks-shadows-elevated-light-up);
     --oks-shadows-overlay: var(--oks-shadows-overlay-light);
     --oks-shadows-overflow: var(--oks-shadows-overflow-light);
-    --oks-shadows-low: var(--oks-shadows-low-light);
-    --oks-shadows-medium: var(--oks-shadows-medium-light);
-    --oks-shadows-high: var(--oks-shadows-high-light);
-    --oks-shadows-inset: var(--oks-shadows-inset-light);
     --oks-z-index-base: var(--oks-z-index-0);
     --oks-z-index-raised: var(--oks-z-index-1);
     --oks-z-index-elevated: var(--oks-z-index-1000);
@@ -1094,13 +1090,12 @@
     --oks-colors-text-accent-tan-bold: var(--oks-colors-tan-20);
     --oks-shadows-zero: var(--oks-shadows-zero-shadow);
     --oks-shadows-raised: var(--oks-shadows-raised-dark);
+    --oks-shadows-raised-up: var(--oks-shadows-raised-dark-up);
     --oks-shadows-elevated: var(--oks-shadows-elevated-dark);
+    --oks-shadows-elevated-up: var(--oks-shadows-elevated-dark-up);
     --oks-shadows-overlay: var(--oks-shadows-overlay-dark);
-    --oks-shadows-overflow: var(--oks-shadows-overflow-dark);
-    --oks-shadows-low: var(--oks-shadows-low-dark);
-    --oks-shadows-medium: var(--oks-shadows-medium-dark);
-    --oks-shadows-high: var(--oks-shadows-high-dark);
-    --oks-shadows-inset: var(--oks-shadows-inset-dark)
+    --oks-shadows-overlay-dark: var(--oks-shadows-overlay-light);
+    --oks-shadows-overflow: var(--oks-shadows-overflow-dark)
 }
 
   @keyframes spin {
@@ -1349,6 +1344,10 @@
       width: fit-content;
 }
 
+    p .oks-link {
+      background-image: linear-gradient(90deg, currentColor 0% 100%);
+}
+
     .oks-link:is(:focus-visible, [data-focus-visible=true]) {
       border-radius: var(--oks-sizes-4);
       outline-color: var(--oks-colors-border-focused);
@@ -1545,6 +1544,10 @@
     font-size: var(--oks-sizes-16);
 }
 
+  .oks-text--family_inherit {
+    font-family: inherit;
+}
+
   .oks-text--allCaps_true {
     text-transform: uppercase;
     font-weight: var(--oks-font-weights-bold);
@@ -1653,6 +1656,10 @@
     cursor: pointer;
 }
 
+  .oks-link--family_inherit {
+    font-family: inherit;
+}
+
   .oks-link--family_body {
     font-family: var(--oks-fonts-body);
 }
@@ -1822,13 +1829,6 @@
       height: var(--oks-sizes-fit);
 }
 
-    .oks-button__container:is([aria-selected=true], [data-selected=true]) {
-      background: var(--oks-colors-bg-selected);
-      border-color: var(--oks-colors-transparent);
-      color: var(--oks-colors-text-selected);
-      fill: var(--oks-colors-icon-selected);
-}
-
     .oks-button__container:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
       cursor: not-allowed;
       opacity: 0.3;
@@ -1886,13 +1886,6 @@
       height: var(--oks-sizes-fit);
 }
 
-    .oks-iconButton__container:is([aria-selected=true], [data-selected=true]) {
-      background: var(--oks-colors-bg-selected);
-      border-color: var(--oks-colors-transparent);
-      color: var(--oks-colors-text-selected);
-      fill: var(--oks-colors-icon-selected);
-}
-
     .oks-iconButton__container:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
       cursor: not-allowed;
       opacity: 0.3;
@@ -2467,19 +2460,24 @@
 }
 
     .oks-datePicker__input:is([data-error], [data-error=true]) {
+      background: var(--oks-colors-bg-danger);
       border-color: var(--oks-colors-border-danger);
+      color: var(--oks-colors-text-danger);
 }
 
     .oks-datePicker__input:is([data-error], [data-error=true]):is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-bg-danger-hovered);
       border-color: var(--oks-colors-border-danger);
 }
 
     .oks-datePicker__input:is([data-error], [data-error=true]):focus-within {
+      background: var(--oks-colors-bg-danger);
       border-color: var(--oks-colors-border-danger);
       outline-color: var(--oks-colors-border-danger);
 }
 
     .oks-datePicker__input:is([data-error], [data-error=true]):is([open], [data-open], [data-state="open"], :popover-open) {
+      background: var(--oks-colors-bg-danger);
       border-color: var(--oks-colors-border-danger);
       outline-color: var(--oks-colors-border-danger);
 }
@@ -3282,16 +3280,16 @@
 }
 
   .oks-button__container--variant_primary {
-    background: var(--oks-colors-bg-neutral-boldest);
+    background: var(--oks-colors-bg-brand-boldest);
     color: var(--oks-colors-text-inverse);
 }
 
   .oks-button__container--variant_primary:is(:hover, [data-hover=true]) {
-    background: var(--oks-colors-bg-neutral-bold-hovered);
+    background: var(--oks-colors-bg-brand-boldest-hovered);
 }
 
   .oks-button__container--variant_primary:is(:active, [data-active=true]) {
-    background: var(--oks-colors-bg-neutral-bold-pressed);
+    background: var(--oks-colors-bg-brand-boldest-pressed);
 }
 
   .oks-button__icon--variant_primary {
@@ -3362,6 +3360,10 @@
     color: var(--oks-colors-text);
 }
 
+  .oks-button__container--variant_hollow:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    border-color: var(--oks-colors-border-disabled);
+}
+
   .oks-button__container--variant_hollow:is(:hover, [data-hover=true]) {
     background: var(--oks-colors-bg-neutral-subtle-hovered);
 }
@@ -3389,15 +3391,17 @@
 
   .oks-button__container--variant_ghost {
     background: var(--oks-colors-bg-neutral-subtle);
-    color: var(--oks-colors-text);
+    color: var(--oks-colors-text-subtle);
 }
 
   .oks-button__container--variant_ghost:is(:hover, [data-hover=true]) {
     background: var(--oks-colors-bg-neutral-subtle-hovered);
+    color: var(--oks-colors-text);
 }
 
   .oks-button__container--variant_ghost:is(:active, [data-active=true]) {
     background: var(--oks-colors-bg-neutral-subtle-pressed);
+    color: var(--oks-colors-text);
 }
 
   .oks-button__icon--variant_ghost {
@@ -3420,19 +3424,16 @@
   .oks-button__container--variant_selected {
     background: var(--oks-colors-bg-selected);
     color: var(--oks-colors-text-selected);
-    fill: var(--oks-colors-icon-selected);
 }
 
   .oks-button__container--variant_selected:is(:hover, [data-hover=true]) {
     background: var(--oks-colors-bg-selected-hovered);
     color: text.selected.hovered;
-    fill: var(--oks-colors-icon-selected);
 }
 
   .oks-button__container--variant_selected:is(:active, [data-active=true]) {
     background: var(--oks-colors-bg-selected-pressed);
     color: var(--oks-colors-text-selected);
-    fill: var(--oks-colors-icon-selected);
 }
 
   .oks-button__icon--variant_selected {
@@ -3474,6 +3475,10 @@
     mix-blend-mode: screen;
 }
 
+  .dark .oks-button__icon--variant_danger,.oks-button__icon--variant_danger:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-button__icon--variant_danger {
+    mix-blend-mode: multiply;
+}
+
   .group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) .oks-button__icon--variant_danger {
     fill: var(--oks-colors-icon-decorative-inverse);
 }
@@ -3508,6 +3513,17 @@
     height: var(--oks-sizes-22);
 }
 
+  .oks-button__container--size_xl {
+    padding-block: var(--oks-spacing-9);
+    padding-inline: var(--oks-spacing-16);
+    font-size: var(--oks-font-sizes-20);
+}
+
+  .oks-button__icon--size_xl {
+    width: var(--oks-sizes-28);
+    height: var(--oks-sizes-28);
+}
+
   .oks-button__container--variant_selectedBold {
     background: var(--oks-colors-bg-selected-bold);
     color: var(--oks-colors-text-inverse);
@@ -3544,15 +3560,17 @@
 
   .oks-iconButton__container--variant_ghost {
     background: var(--oks-colors-bg-neutral-subtle);
-    color: var(--oks-colors-text);
+    color: var(--oks-colors-text-subtle);
 }
 
   .oks-iconButton__container--variant_ghost:is(:hover, [data-hover=true]) {
     background: var(--oks-colors-bg-neutral-subtle-hovered);
+    color: var(--oks-colors-text);
 }
 
   .oks-iconButton__container--variant_ghost:is(:active, [data-active=true]) {
     background: var(--oks-colors-bg-neutral-subtle-pressed);
+    color: var(--oks-colors-text);
 }
 
   .oks-iconButton__icon--variant_ghost {
@@ -3583,16 +3601,16 @@
 }
 
   .oks-iconButton__container--variant_primary {
-    background: var(--oks-colors-bg-neutral-boldest);
+    background: var(--oks-colors-bg-brand-boldest);
     color: var(--oks-colors-text-inverse);
 }
 
   .oks-iconButton__container--variant_primary:is(:hover, [data-hover=true]) {
-    background: var(--oks-colors-bg-neutral-bold-hovered);
+    background: var(--oks-colors-bg-brand-boldest-hovered);
 }
 
   .oks-iconButton__container--variant_primary:is(:active, [data-active=true]) {
-    background: var(--oks-colors-bg-neutral-bold-pressed);
+    background: var(--oks-colors-bg-brand-boldest-pressed);
 }
 
   .oks-iconButton__icon--variant_primary {
@@ -3632,6 +3650,10 @@
     color: var(--oks-colors-text);
 }
 
+  .oks-iconButton__container--variant_hollow:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    border-color: var(--oks-colors-border-disabled);
+}
+
   .oks-iconButton__container--variant_hollow:is(:hover, [data-hover=true]) {
     background: var(--oks-colors-bg-neutral-subtle-hovered);
 }
@@ -3700,19 +3722,16 @@
   .oks-iconButton__container--variant_selected {
     background: var(--oks-colors-bg-selected);
     color: var(--oks-colors-text-selected);
-    fill: var(--oks-colors-icon-selected);
 }
 
   .oks-iconButton__container--variant_selected:is(:hover, [data-hover=true]) {
     background: var(--oks-colors-bg-selected-hovered);
     color: text.selected.hovered;
-    fill: var(--oks-colors-icon-selected);
 }
 
   .oks-iconButton__container--variant_selected:is(:active, [data-active=true]) {
     background: var(--oks-colors-bg-selected-pressed);
     color: var(--oks-colors-text-selected);
-    fill: var(--oks-colors-icon-selected);
 }
 
   .oks-iconButton__icon--variant_selected {
@@ -3754,6 +3773,10 @@
     mix-blend-mode: screen;
 }
 
+  .dark .oks-iconButton__icon--variant_danger,.oks-iconButton__icon--variant_danger:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-iconButton__icon--variant_danger {
+    mix-blend-mode: multiply;
+}
+
   .group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) .oks-iconButton__icon--variant_danger {
     fill: var(--oks-colors-icon-decorative-inverse);
 }
@@ -12910,26 +12933,50 @@
     box-shadow: var(--oks-shadows-raised-light);
 }
 
+  .oks-bx-sh_raisedLightUp {
+    box-shadow: var(--oks-shadows-raised-light-up);
+}
+
   .oks-bx-sh_raisedDark {
     box-shadow: var(--oks-shadows-raised-dark);
 }
 
+  .oks-bx-sh_raisedDarkUp {
+    box-shadow: var(--oks-shadows-raised-dark-up);
+}
+
   .oks-bx-sh_elevatedLight {
     box-shadow: var(--oks-shadows-elevated-light);
 }
 
+  .oks-bx-sh_elevatedLightUp {
+    box-shadow: var(--oks-shadows-elevated-light-up);
+}
+
   .oks-bx-sh_elevatedDark {
     box-shadow: var(--oks-shadows-elevated-dark);
 }
 
+  .oks-bx-sh_elevatedDarkUp {
+    box-shadow: var(--oks-shadows-elevated-dark-up);
+}
+
   .oks-bx-sh_overlayLight {
     box-shadow: var(--oks-shadows-overlay-light);
 }
 
+  .oks-bx-sh_overlayLightUp {
+    box-shadow: var(--oks-shadows-overlay-light-up);
+}
+
   .oks-bx-sh_overlayDark {
     box-shadow: var(--oks-shadows-overlay-dark);
 }
 
+  .oks-bx-sh_overlayDarkUp {
+    box-shadow: var(--oks-shadows-overlay-dark-up);
+}
+
   .oks-bx-sh_overflowLight {
     box-shadow: var(--oks-shadows-overflow-light);
 }
@@ -12938,38 +12985,6 @@
     box-shadow: var(--oks-shadows-overflow-dark);
 }
 
-  .oks-bx-sh_lowLight {
-    box-shadow: var(--oks-shadows-low-light);
-}
-
-  .oks-bx-sh_lowDark {
-    box-shadow: var(--oks-shadows-low-dark);
-}
-
-  .oks-bx-sh_mediumLight {
-    box-shadow: var(--oks-shadows-medium-light);
-}
-
-  .oks-bx-sh_mediumDark {
-    box-shadow: var(--oks-shadows-medium-dark);
-}
-
-  .oks-bx-sh_highLight {
-    box-shadow: var(--oks-shadows-high-light);
-}
-
-  .oks-bx-sh_highDark {
-    box-shadow: var(--oks-shadows-high-dark);
-}
-
-  .oks-bx-sh_insetLight {
-    box-shadow: var(--oks-shadows-inset-light);
-}
-
-  .oks-bx-sh_insetDark {
-    box-shadow: var(--oks-shadows-inset-dark);
-}
-
   .oks-bx-sh_zero {
     box-shadow: var(--oks-shadows-zero);
 }
@@ -12978,32 +12993,28 @@
     box-shadow: var(--oks-shadows-raised);
 }
 
-  .oks-bx-sh_elevated {
-    box-shadow: var(--oks-shadows-elevated);
-}
-
-  .oks-bx-sh_overlay {
-    box-shadow: var(--oks-shadows-overlay);
+  .oks-bx-sh_raised\.up {
+    box-shadow: var(--oks-shadows-raised-up);
 }
 
-  .oks-bx-sh_overflow {
-    box-shadow: var(--oks-shadows-overflow);
+  .oks-bx-sh_elevated {
+    box-shadow: var(--oks-shadows-elevated);
 }
 
-  .oks-bx-sh_low {
-    box-shadow: var(--oks-shadows-low);
+  .oks-bx-sh_elevated\.up {
+    box-shadow: var(--oks-shadows-elevated-up);
 }
 
-  .oks-bx-sh_medium {
-    box-shadow: var(--oks-shadows-medium);
+  .oks-bx-sh_overlay {
+    box-shadow: var(--oks-shadows-overlay);
 }
 
-  .oks-bx-sh_high {
-    box-shadow: var(--oks-shadows-high);
+  .oks-bx-sh_overlay\.dark {
+    box-shadow: var(--oks-shadows-overlay-dark);
 }
 
-  .oks-bx-sh_inset {
-    box-shadow: var(--oks-shadows-inset);
+  .oks-bx-sh_overflow {
+    box-shadow: var(--oks-shadows-overflow);
 }
 
   .oks-ff_heading {
@@ -13323,6 +13334,10 @@
     -webkit-appearance: bold;
 }
 
+  .oks-jc_flex-end {
+    justify-content: flex-end;
+}
+
   .oks-grid-tc_auto_1fr {
     grid-template-columns: auto 1fr;
 }
@@ -13335,10 +13350,6 @@
     row-gap: var(--oks-spacing-32);
 }
 
-  .oks-jc_flex-end {
-    justify-content: flex-end;
-}
-
   .oks-jc_center {
     justify-content: center;
 }
@@ -31663,6 +31674,14 @@
     box-shadow: var(--oks-shadows-raised-light);
 }
 
+  .light .light\:oks-bx-sh_raisedLightUp,.light\:oks-bx-sh_raisedLightUp:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_raisedLightUp {
+    box-shadow: var(--oks-shadows-raised-light-up);
+}
+
+  .dark .dark\:oks-bx-sh_raisedLightUp,.dark\:oks-bx-sh_raisedLightUp:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_raisedLightUp {
+    box-shadow: var(--oks-shadows-raised-light-up);
+}
+
   .light .light\:oks-bx-sh_raisedDark,.light\:oks-bx-sh_raisedDark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_raisedDark {
     box-shadow: var(--oks-shadows-raised-dark);
 }
@@ -31671,6 +31690,14 @@
     box-shadow: var(--oks-shadows-raised-dark);
 }
 
+  .light .light\:oks-bx-sh_raisedDarkUp,.light\:oks-bx-sh_raisedDarkUp:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_raisedDarkUp {
+    box-shadow: var(--oks-shadows-raised-dark-up);
+}
+
+  .dark .dark\:oks-bx-sh_raisedDarkUp,.dark\:oks-bx-sh_raisedDarkUp:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_raisedDarkUp {
+    box-shadow: var(--oks-shadows-raised-dark-up);
+}
+
   .light .light\:oks-bx-sh_elevatedLight,.light\:oks-bx-sh_elevatedLight:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_elevatedLight {
     box-shadow: var(--oks-shadows-elevated-light);
 }
@@ -31679,6 +31706,14 @@
     box-shadow: var(--oks-shadows-elevated-light);
 }
 
+  .light .light\:oks-bx-sh_elevatedLightUp,.light\:oks-bx-sh_elevatedLightUp:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_elevatedLightUp {
+    box-shadow: var(--oks-shadows-elevated-light-up);
+}
+
+  .dark .dark\:oks-bx-sh_elevatedLightUp,.dark\:oks-bx-sh_elevatedLightUp:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_elevatedLightUp {
+    box-shadow: var(--oks-shadows-elevated-light-up);
+}
+
   .light .light\:oks-bx-sh_elevatedDark,.light\:oks-bx-sh_elevatedDark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_elevatedDark {
     box-shadow: var(--oks-shadows-elevated-dark);
 }
@@ -31687,6 +31722,14 @@
     box-shadow: var(--oks-shadows-elevated-dark);
 }
 
+  .light .light\:oks-bx-sh_elevatedDarkUp,.light\:oks-bx-sh_elevatedDarkUp:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_elevatedDarkUp {
+    box-shadow: var(--oks-shadows-elevated-dark-up);
+}
+
+  .dark .dark\:oks-bx-sh_elevatedDarkUp,.dark\:oks-bx-sh_elevatedDarkUp:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_elevatedDarkUp {
+    box-shadow: var(--oks-shadows-elevated-dark-up);
+}
+
   .light .light\:oks-bx-sh_overlayLight,.light\:oks-bx-sh_overlayLight:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overlayLight {
     box-shadow: var(--oks-shadows-overlay-light);
 }
@@ -31695,6 +31738,14 @@
     box-shadow: var(--oks-shadows-overlay-light);
 }
 
+  .light .light\:oks-bx-sh_overlayLightUp,.light\:oks-bx-sh_overlayLightUp:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overlayLightUp {
+    box-shadow: var(--oks-shadows-overlay-light-up);
+}
+
+  .dark .dark\:oks-bx-sh_overlayLightUp,.dark\:oks-bx-sh_overlayLightUp:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_overlayLightUp {
+    box-shadow: var(--oks-shadows-overlay-light-up);
+}
+
   .light .light\:oks-bx-sh_overlayDark,.light\:oks-bx-sh_overlayDark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overlayDark {
     box-shadow: var(--oks-shadows-overlay-dark);
 }
@@ -31703,6 +31754,14 @@
     box-shadow: var(--oks-shadows-overlay-dark);
 }
 
+  .light .light\:oks-bx-sh_overlayDarkUp,.light\:oks-bx-sh_overlayDarkUp:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overlayDarkUp {
+    box-shadow: var(--oks-shadows-overlay-dark-up);
+}
+
+  .dark .dark\:oks-bx-sh_overlayDarkUp,.dark\:oks-bx-sh_overlayDarkUp:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_overlayDarkUp {
+    box-shadow: var(--oks-shadows-overlay-dark-up);
+}
+
   .light .light\:oks-bx-sh_overflowLight,.light\:oks-bx-sh_overflowLight:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overflowLight {
     box-shadow: var(--oks-shadows-overflow-light);
 }
@@ -31719,70 +31778,6 @@
     box-shadow: var(--oks-shadows-overflow-dark);
 }
 
-  .light .light\:oks-bx-sh_lowLight,.light\:oks-bx-sh_lowLight:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_lowLight {
-    box-shadow: var(--oks-shadows-low-light);
-}
-
-  .dark .dark\:oks-bx-sh_lowLight,.dark\:oks-bx-sh_lowLight:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_lowLight {
-    box-shadow: var(--oks-shadows-low-light);
-}
-
-  .light .light\:oks-bx-sh_lowDark,.light\:oks-bx-sh_lowDark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_lowDark {
-    box-shadow: var(--oks-shadows-low-dark);
-}
-
-  .dark .dark\:oks-bx-sh_lowDark,.dark\:oks-bx-sh_lowDark:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_lowDark {
-    box-shadow: var(--oks-shadows-low-dark);
-}
-
-  .light .light\:oks-bx-sh_mediumLight,.light\:oks-bx-sh_mediumLight:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_mediumLight {
-    box-shadow: var(--oks-shadows-medium-light);
-}
-
-  .dark .dark\:oks-bx-sh_mediumLight,.dark\:oks-bx-sh_mediumLight:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_mediumLight {
-    box-shadow: var(--oks-shadows-medium-light);
-}
-
-  .light .light\:oks-bx-sh_mediumDark,.light\:oks-bx-sh_mediumDark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_mediumDark {
-    box-shadow: var(--oks-shadows-medium-dark);
-}
-
-  .dark .dark\:oks-bx-sh_mediumDark,.dark\:oks-bx-sh_mediumDark:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_mediumDark {
-    box-shadow: var(--oks-shadows-medium-dark);
-}
-
-  .light .light\:oks-bx-sh_highLight,.light\:oks-bx-sh_highLight:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_highLight {
-    box-shadow: var(--oks-shadows-high-light);
-}
-
-  .dark .dark\:oks-bx-sh_highLight,.dark\:oks-bx-sh_highLight:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_highLight {
-    box-shadow: var(--oks-shadows-high-light);
-}
-
-  .light .light\:oks-bx-sh_highDark,.light\:oks-bx-sh_highDark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_highDark {
-    box-shadow: var(--oks-shadows-high-dark);
-}
-
-  .dark .dark\:oks-bx-sh_highDark,.dark\:oks-bx-sh_highDark:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_highDark {
-    box-shadow: var(--oks-shadows-high-dark);
-}
-
-  .light .light\:oks-bx-sh_insetLight,.light\:oks-bx-sh_insetLight:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_insetLight {
-    box-shadow: var(--oks-shadows-inset-light);
-}
-
-  .dark .dark\:oks-bx-sh_insetLight,.dark\:oks-bx-sh_insetLight:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_insetLight {
-    box-shadow: var(--oks-shadows-inset-light);
-}
-
-  .light .light\:oks-bx-sh_insetDark,.light\:oks-bx-sh_insetDark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_insetDark {
-    box-shadow: var(--oks-shadows-inset-dark);
-}
-
-  .dark .dark\:oks-bx-sh_insetDark,.dark\:oks-bx-sh_insetDark:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_insetDark {
-    box-shadow: var(--oks-shadows-inset-dark);
-}
-
   .light .light\:oks-bx-sh_zero,.light\:oks-bx-sh_zero:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_zero {
     box-shadow: var(--oks-shadows-zero);
 }
@@ -31799,60 +31794,52 @@
     box-shadow: var(--oks-shadows-raised);
 }
 
-  .light .light\:oks-bx-sh_elevated,.light\:oks-bx-sh_elevated:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_elevated {
-    box-shadow: var(--oks-shadows-elevated);
-}
-
-  .dark .dark\:oks-bx-sh_elevated,.dark\:oks-bx-sh_elevated:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_elevated {
-    box-shadow: var(--oks-shadows-elevated);
-}
-
-  .light .light\:oks-bx-sh_overlay,.light\:oks-bx-sh_overlay:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overlay {
-    box-shadow: var(--oks-shadows-overlay);
+  .light .light\:oks-bx-sh_raised\.up,.light\:oks-bx-sh_raised\.up:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_raised\.up {
+    box-shadow: var(--oks-shadows-raised-up);
 }
 
-  .dark .dark\:oks-bx-sh_overlay,.dark\:oks-bx-sh_overlay:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_overlay {
-    box-shadow: var(--oks-shadows-overlay);
+  .dark .dark\:oks-bx-sh_raised\.up,.dark\:oks-bx-sh_raised\.up:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_raised\.up {
+    box-shadow: var(--oks-shadows-raised-up);
 }
 
-  .light .light\:oks-bx-sh_overflow,.light\:oks-bx-sh_overflow:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overflow {
-    box-shadow: var(--oks-shadows-overflow);
+  .light .light\:oks-bx-sh_elevated,.light\:oks-bx-sh_elevated:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_elevated {
+    box-shadow: var(--oks-shadows-elevated);
 }
 
-  .dark .dark\:oks-bx-sh_overflow,.dark\:oks-bx-sh_overflow:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_overflow {
-    box-shadow: var(--oks-shadows-overflow);
+  .dark .dark\:oks-bx-sh_elevated,.dark\:oks-bx-sh_elevated:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_elevated {
+    box-shadow: var(--oks-shadows-elevated);
 }
 
-  .light .light\:oks-bx-sh_low,.light\:oks-bx-sh_low:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_low {
-    box-shadow: var(--oks-shadows-low);
+  .light .light\:oks-bx-sh_elevated\.up,.light\:oks-bx-sh_elevated\.up:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_elevated\.up {
+    box-shadow: var(--oks-shadows-elevated-up);
 }
 
-  .dark .dark\:oks-bx-sh_low,.dark\:oks-bx-sh_low:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_low {
-    box-shadow: var(--oks-shadows-low);
+  .dark .dark\:oks-bx-sh_elevated\.up,.dark\:oks-bx-sh_elevated\.up:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_elevated\.up {
+    box-shadow: var(--oks-shadows-elevated-up);
 }
 
-  .light .light\:oks-bx-sh_medium,.light\:oks-bx-sh_medium:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_medium {
-    box-shadow: var(--oks-shadows-medium);
+  .light .light\:oks-bx-sh_overlay,.light\:oks-bx-sh_overlay:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overlay {
+    box-shadow: var(--oks-shadows-overlay);
 }
 
-  .dark .dark\:oks-bx-sh_medium,.dark\:oks-bx-sh_medium:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_medium {
-    box-shadow: var(--oks-shadows-medium);
+  .dark .dark\:oks-bx-sh_overlay,.dark\:oks-bx-sh_overlay:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_overlay {
+    box-shadow: var(--oks-shadows-overlay);
 }
 
-  .light .light\:oks-bx-sh_high,.light\:oks-bx-sh_high:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_high {
-    box-shadow: var(--oks-shadows-high);
+  .light .light\:oks-bx-sh_overlay\.dark,.light\:oks-bx-sh_overlay\.dark:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overlay\.dark {
+    box-shadow: var(--oks-shadows-overlay-dark);
 }
 
-  .dark .dark\:oks-bx-sh_high,.dark\:oks-bx-sh_high:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_high {
-    box-shadow: var(--oks-shadows-high);
+  .dark .dark\:oks-bx-sh_overlay\.dark,.dark\:oks-bx-sh_overlay\.dark:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_overlay\.dark {
+    box-shadow: var(--oks-shadows-overlay-dark);
 }
 
-  .light .light\:oks-bx-sh_inset,.light\:oks-bx-sh_inset:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_inset {
-    box-shadow: var(--oks-shadows-inset);
+  .light .light\:oks-bx-sh_overflow,.light\:oks-bx-sh_overflow:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-bx-sh_overflow {
+    box-shadow: var(--oks-shadows-overflow);
 }
 
-  .dark .dark\:oks-bx-sh_inset,.dark\:oks-bx-sh_inset:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_inset {
-    box-shadow: var(--oks-shadows-inset);
+  .dark .dark\:oks-bx-sh_overflow,.dark\:oks-bx-sh_overflow:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bx-sh_overflow {
+    box-shadow: var(--oks-shadows-overflow);
 }
 
   .light .light\:oks-ff_heading,.light\:oks-ff_heading:is([data-color-mode=light] *),[data-color-mode=light] .light\:oks-ff_heading {