@okshaun/components 0.5.8 → 1.0.1

package/dist/styles/utilities.css

@@ -0,0 +1,1694 @@
+@layer utilities {
+  @layer compositions {
+
+    .oks-textStyle_mono\.sm {
+      font-family: var(--oks-fonts-mono);
+      font-weight: var(--oks-font-weights-normal);
+      color: var(--oks-colors-text-subtlest);
+      line-height: var(--oks-line-heights-default);
+      font-size: var(--oks-font-sizes-14);
+}
+
+    .oks-textStyle_heading\.xs {
+      font-family: var(--oks-fonts-sans);
+      font-weight: var(--oks-font-weights-bold);
+      color: var(--oks-colors-text);
+      line-height: var(--oks-line-heights-default);
+      font-size: var(--oks-font-sizes-20);
+}
+
+    .oks-textStyle_mono\.xs {
+      font-family: var(--oks-fonts-mono);
+      font-size: var(--oks-font-sizes-12);
+}
+
+    .oks-textStyle_mono\.xs,.oks-textStyle_body\.md {
+      font-weight: var(--oks-font-weights-normal);
+      color: var(--oks-colors-text-subtlest);
+      line-height: var(--oks-line-heights-default);
+}
+
+    .oks-textStyle_body\.md {
+      font-family: var(--oks-fonts-serif);
+      font-size: var(--oks-font-sizes-16);
+}
+
+    .oks-textStyle_body\.sm {
+      font-size: var(--oks-font-sizes-14);
+}
+
+    .oks-textStyle_body\.sm,.oks-textStyle_body\.xs {
+      font-family: var(--oks-fonts-serif);
+      font-weight: var(--oks-font-weights-normal);
+      color: var(--oks-colors-text-subtlest);
+      line-height: var(--oks-line-heights-default);
+}
+
+    .oks-textStyle_body\.xs {
+      font-size: var(--oks-font-sizes-12);
+}
+
+    .oks-textStyle_mono\.md {
+      font-family: var(--oks-fonts-mono);
+      font-weight: var(--oks-font-weights-normal);
+      color: var(--oks-colors-text-subtlest);
+      line-height: var(--oks-line-heights-default);
+      font-size: var(--oks-font-sizes-16);
+}
+
+    .oks-textStyle_body\.lg {
+      font-family: var(--oks-fonts-serif);
+}
+
+    .oks-textStyle_body\.lg,.oks-textStyle_mono\.lg {
+      font-weight: var(--oks-font-weights-normal);
+      color: var(--oks-colors-text-subtlest);
+      line-height: var(--oks-line-heights-default);
+      font-size: var(--oks-font-sizes-20);
+}
+
+    .oks-textStyle_mono\.lg {
+      font-family: var(--oks-fonts-mono);
+}
+}
+
+  .oks-bg_surface {
+    background: var(--oks-colors-surface);
+}
+
+  .oks-p_16 {
+    padding: var(--oks-spacing-16);
+}
+
+  .oks-bg_bg\.neutral {
+    background: var(--oks-colors-bg-neutral);
+}
+
+  .oks-bg_bg\.neutral\.boldest {
+    background: var(--oks-colors-bg-neutral-boldest);
+}
+
+  .oks-bg_red\.20 {
+    background: var(--oks-colors-red-20);
+}
+
+  .oks-bg_red\.60 {
+    background: var(--oks-colors-red-60);
+}
+
+  .oks-bg_orange\.20 {
+    background: var(--oks-colors-orange-20);
+}
+
+  .oks-bg_orange\.60 {
+    background: var(--oks-colors-orange-60);
+}
+
+  .oks-bg_yellow\.20 {
+    background: var(--oks-colors-yellow-20);
+}
+
+  .oks-bg_yellow\.40 {
+    background: var(--oks-colors-yellow-40);
+}
+
+  .oks-bg_lime\.20 {
+    background: var(--oks-colors-lime-20);
+}
+
+  .oks-bg_lime\.60 {
+    background: var(--oks-colors-lime-60);
+}
+
+  .oks-bg_green\.20 {
+    background: var(--oks-colors-green-20);
+}
+
+  .oks-bg_green\.70 {
+    background: var(--oks-colors-green-70);
+}
+
+  .oks-bg_teal\.20 {
+    background: var(--oks-colors-teal-20);
+}
+
+  .oks-bg_teal\.60 {
+    background: var(--oks-colors-teal-60);
+}
+
+  .oks-bg_blue\.20 {
+    background: var(--oks-colors-blue-20);
+}
+
+  .oks-bg_blue\.50 {
+    background: var(--oks-colors-blue-50);
+}
+
+  .oks-bg_indigo\.20 {
+    background: var(--oks-colors-indigo-20);
+}
+
+  .oks-bg_indigo\.60 {
+    background: var(--oks-colors-indigo-60);
+}
+
+  .oks-bg_purple\.20 {
+    background: var(--oks-colors-purple-20);
+}
+
+  .oks-bg_purple\.60 {
+    background: var(--oks-colors-purple-60);
+}
+
+  .oks-bg_magenta\.20 {
+    background: var(--oks-colors-magenta-20);
+}
+
+  .oks-bg_magenta\.70 {
+    background: var(--oks-colors-magenta-70);
+}
+
+  .oks-bg_tan\.20 {
+    background: var(--oks-colors-tan-20);
+}
+
+  .oks-bg_tan\.60 {
+    background: var(--oks-colors-tan-60);
+}
+
+  .oks-p_12 {
+    padding: var(--oks-spacing-12);
+}
+
+  .oks-bg_surface\.sunken {
+    background: var(--oks-colors-surface-sunken);
+}
+
+  .oks-bg_bg\.success\.bold {
+    background: var(--oks-colors-bg-success-bold);
+}
+
+  .oks-bg_bg\.danger\.bold {
+    background: var(--oks-colors-bg-danger-bold);
+}
+
+  .oks-bg_bg\.neutral\.bold {
+    background: var(--oks-colors-bg-neutral-bold);
+}
+
+  .oks-bg_bg\.brand\.bold {
+    background: var(--oks-colors-bg-brand-bold);
+}
+
+  .oks-p_40 {
+    padding: var(--oks-spacing-40);
+}
+
+  .oks-bg_blue\.60 {
+    background: var(--oks-colors-blue-60);
+}
+
+  .oks-bg_transparent {
+    background: var(--oks-colors-transparent);
+}
+
+  .oks-p_80 {
+    padding: var(--oks-spacing-80);
+}
+
+  .oks-font_mono {
+    font: mono;
+}
+
+  .oks-bd_default {
+    border: var(--oks-borders-default);
+}
+
+  .oks-p_2 {
+    padding: var(--oks-spacing-2);
+}
+
+  .oks-bg_bg\.neutral\.subtle {
+    background: var(--oks-colors-bg-neutral-subtle);
+}
+
+  .oks-bg_bg\.accent\.blue {
+    background: var(--oks-colors-bg-accent-blue);
+}
+
+  .oks-p_24 {
+    padding: var(--oks-spacing-24);
+}
+
+  .oks-bg_bg\.surface\.subtle {
+    background: bg.surface.subtle;
+}
+
+  .oks-bg_bg\.warning {
+    background: var(--oks-colors-bg-warning);
+}
+
+  .oks-bg_surface\.raised {
+    background: var(--oks-colors-surface-raised);
+}
+
+  .oks-bg_bg\.accent\.neutral\.subtlest {
+    background: var(--oks-colors-bg-accent-neutral-subtlest);
+}
+
+  .oks-gap_16 {
+    gap: var(--oks-spacing-16);
+}
+
+  .oks-gap_40 {
+    gap: var(--oks-spacing-40);
+}
+
+  .oks-bd-c_border {
+    border-color: var(--oks-colors-border);
+}
+
+  .oks-py_24 {
+    padding-block: var(--oks-spacing-24);
+}
+
+  .oks-gap_24 {
+    gap: var(--oks-spacing-24);
+}
+
+  .oks-gap_8 {
+    gap: var(--oks-spacing-8);
+}
+
+  .oks-gap_8px {
+    gap: 8px;
+}
+
+  .oks-border-style_solid {
+    border-style: solid;
+}
+
+  .oks-py_4 {
+    padding-block: var(--oks-spacing-4);
+}
+
+  .oks-gap_4 {
+    gap: var(--oks-spacing-4);
+}
+
+  .oks-mx_auto {
+    margin-inline: var(--oks-spacing-auto);
+}
+
+  .oks-px_24 {
+    padding-inline: var(--oks-spacing-24);
+}
+
+  .oks-grid-c_1_\/_-1 {
+    grid-column: 1 / -1;
+}
+
+  .oks-trs_all {
+    transition-property: var(--transition-prop, all);
+    transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--transition-duration, 150ms);
+}
+
+  .oks-bdr_8 {
+    border-radius: var(--oks-radii-8);
+}
+
+  .oks-gap_6 {
+    gap: var(--oks-spacing-6);
+}
+
+  .oks-gap_2 {
+    gap: var(--oks-spacing-2);
+}
+
+  .oks-gap_3 {
+    gap: var(--oks-spacing-3);
+}
+
+  .oks-bd-c_var\(--colors-bg\) {
+    border-color: var(--colors-bg);
+}
+
+  .oks-gap_12 {
+    gap: var(--oks-spacing-12);
+}
+
+  .oks-mx_16 {
+    margin-inline: var(--oks-spacing-16);
+}
+
+  .oks-gap_1 {
+    gap: var(--oks-spacing-1);
+}
+
+  .oks-place-items_center {
+    place-items: center;
+}
+
+  .oks-gap_0 {
+    gap: var(--oks-spacing-0);
+}
+
+  .oks-ov_hidden {
+    overflow: hidden;
+}
+
+  .oks-bdr_full {
+    border-radius: full;
+}
+
+  .oks-offset_4 {
+    offset: 4px;
+}
+
+  .oks-place-content_center {
+    place-content: center;
+}
+
+  .oks-bdr_4 {
+    border-radius: var(--oks-radii-4);
+}
+
+  .oks-bd-w_1 {
+    border-width: var(--oks-border-widths-1);
+}
+
+  .oks-bd-c_blue\.60 {
+    border-color: var(--oks-colors-blue-60);
+}
+
+  .oks-bdr_2 {
+    border-radius: var(--oks-radii-2);
+}
+
+  .oks-py_2 {
+    padding-block: var(--oks-spacing-2);
+}
+
+  .oks-px_4 {
+    padding-inline: var(--oks-spacing-4);
+}
+
+  .oks-bd-c_transparent {
+    border-color: var(--oks-colors-transparent);
+}
+
+  .oks-border-style_dashed {
+    border-style: dashed;
+}
+
+  .oks-my_32 {
+    margin-block: var(--oks-spacing-32);
+}
+
+  .oks-bdr_16 {
+    border-radius: var(--oks-radii-16);
+}
+
+  .oks-my_48 {
+    margin-block: var(--oks-spacing-48);
+}
+
+  .oks-my_8 {
+    margin-block: var(--oks-spacing-8);
+}
+
+  .oks-my_16 {
+    margin-block: var(--oks-spacing-16);
+}
+
+  .oks-py_8 {
+    padding-block: var(--oks-spacing-8);
+}
+
+  .oks-px_16 {
+    padding-inline: var(--oks-spacing-16);
+}
+
+  .oks-grid-c_span_3 {
+    grid-column: span 3;
+}
+
+  .oks-my_12 {
+    margin-block: var(--oks-spacing-12);
+}
+
+  .oks-grid-c_2_\/_-1 {
+    grid-column: 2 / -1;
+}
+
+  .oks-grid-r_1_\/_-1 {
+    grid-row: 1 / -1;
+}
+
+  .oks-py_16 {
+    padding-block: var(--oks-spacing-16);
+}
+
+  .oks-ov_visible {
+    overflow: visible;
+}
+
+  .oks-d_grid {
+    display: grid;
+}
+
+  .oks-grid-tc_repeat\(auto-fill\,_minmax\(200px\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+  .oks-grid-tc_1fr_3fr {
+    grid-template-columns: 1fr 3fr;
+}
+
+  .oks-grid-tc_minmax\(auto\,_1fr\)_1fr {
+    grid-template-columns: minmax(auto, 1fr) 1fr;
+}
+
+  .oks-ai_center {
+    align-items: center;
+}
+
+  .oks-grid-tc_repeat\(13\,_auto\) {
+    grid-template-columns: repeat(13, auto);
+}
+
+  .oks-grid-tc_repeat\(3\,_1fr\) {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+  .oks-grid-tc_1fr_1fr {
+    grid-template-columns: 1fr 1fr;
+}
+
+  .oks-grid-tc_repeat\(4\,_auto\) {
+    grid-template-columns: repeat(4, auto);
+}
+
+  .oks-ai_flex-start {
+    align-items: flex-start;
+}
+
+  .oks-d_flex {
+    display: flex;
+}
+
+  .oks-flex-d_row {
+    flex-direction: row;
+}
+
+  .oks-c_blue\.60 {
+    color: var(--oks-colors-blue-60);
+}
+
+  .oks-jc_space-between {
+    justify-content: space-between;
+}
+
+  .oks-ai_flex-end {
+    align-items: flex-end;
+}
+
+  .oks-fs_14 {
+    font-size: var(--oks-font-sizes-14);
+}
+
+  .oks-fs_16 {
+    font-size: var(--oks-font-sizes-16);
+}
+
+  .oks-ls_widest {
+    letter-spacing: var(--oks-letter-spacings-widest);
+}
+
+  .oks-tt_uppercase {
+    text-transform: uppercase;
+}
+
+  .oks-fw_bold {
+    font-weight: var(--oks-font-weights-bold);
+}
+
+  .oks-c_text\.bold {
+    color: var(--oks-colors-text-bold);
+}
+
+  .oks-ps_3 {
+    padding-inline-start: var(--oks-spacing-3);
+}
+
+  .oks-pe_3 {
+    padding-inline-end: var(--oks-spacing-3);
+}
+
+  .oks-ps_2 {
+    padding-inline-start: var(--oks-spacing-2);
+}
+
+  .oks-pe_2 {
+    padding-inline-end: var(--oks-spacing-2);
+}
+
+  .oks-ps_5 {
+    padding-inline-start: var(--oks-spacing-5);
+}
+
+  .oks-pe_5 {
+    padding-inline-end: var(--oks-spacing-5);
+}
+
+  .oks-ps_7 {
+    padding-inline-start: var(--oks-spacing-7);
+}
+
+  .oks-pe_7 {
+    padding-inline-end: var(--oks-spacing-7);
+}
+
+  .oks-flex-d_column {
+    flex-direction: column;
+}
+
+  .oks-pos_sticky {
+    position: sticky;
+}
+
+  .oks-z_100 {
+    z-index: 100;
+}
+
+  .oks-pos_relative {
+    position: relative;
+}
+
+  .oks-c_gold\.40 {
+    color: gold.40;
+}
+
+  .oks-c_text\.subtle {
+    color: var(--oks-colors-text-subtle);
+}
+
+  .oks-c_text\.inverse {
+    color: var(--oks-colors-text-inverse);
+}
+
+  .oks-c_red\.70 {
+    color: var(--oks-colors-red-70);
+}
+
+  .oks-c_red\.10 {
+    color: var(--oks-colors-red-10);
+}
+
+  .oks-c_orange\.70 {
+    color: var(--oks-colors-orange-70);
+}
+
+  .oks-c_orange\.10 {
+    color: var(--oks-colors-orange-10);
+}
+
+  .oks-c_yellow\.80 {
+    color: var(--oks-colors-yellow-80);
+}
+
+  .oks-c_yellow\.100 {
+    color: var(--oks-colors-yellow-100);
+}
+
+  .oks-c_lime\.70 {
+    color: var(--oks-colors-lime-70);
+}
+
+  .oks-c_lime\.10 {
+    color: var(--oks-colors-lime-10);
+}
+
+  .oks-c_green\.70 {
+    color: var(--oks-colors-green-70);
+}
+
+  .oks-c_gray\.10 {
+    color: var(--oks-colors-gray-10);
+}
+
+  .oks-c_teal\.80 {
+    color: var(--oks-colors-teal-80);
+}
+
+  .oks-c_teal\.10 {
+    color: var(--oks-colors-teal-10);
+}
+
+  .oks-c_blue\.70 {
+    color: var(--oks-colors-blue-70);
+}
+
+  .oks-c_blue\.10 {
+    color: var(--oks-colors-blue-10);
+}
+
+  .oks-c_indigo\.70 {
+    color: var(--oks-colors-indigo-70);
+}
+
+  .oks-c_indigo\.10 {
+    color: var(--oks-colors-indigo-10);
+}
+
+  .oks-c_purple\.70 {
+    color: var(--oks-colors-purple-70);
+}
+
+  .oks-c_purple\.10 {
+    color: var(--oks-colors-purple-10);
+}
+
+  .oks-c_magenta\.80 {
+    color: var(--oks-colors-magenta-80);
+}
+
+  .oks-c_magenta\.10 {
+    color: var(--oks-colors-magenta-10);
+}
+
+  .oks-c_tan\.70 {
+    color: var(--oks-colors-tan-70);
+}
+
+  .oks-cursor_pointer {
+    cursor: pointer;
+}
+
+  .oks-c_yellow\.60 {
+    color: var(--oks-colors-yellow-60);
+}
+
+  .oks-c_text\.subtlest {
+    color: var(--oks-colors-text-subtlest);
+}
+
+  .oks-c_text\.brand {
+    color: text.brand;
+}
+
+  .oks-fw_medium {
+    font-weight: var(--oks-font-weights-medium);
+}
+
+  .oks-z_0 {
+    z-index: 0;
+}
+
+  .oks-fw_500 {
+    font-weight: 500;
+}
+
+  .oks-fw_600 {
+    font-weight: 600;
+}
+
+  .oks-fs_12 {
+    font-size: var(--oks-font-sizes-12);
+}
+
+  .oks-c_icon\.inverse {
+    color: var(--oks-colors-icon-inverse);
+}
+
+  .oks-flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .oks-c_text\.muted {
+    color: text.muted;
+}
+
+  .oks-grid-tc_auto_auto_auto {
+    grid-template-columns: auto auto auto;
+}
+
+  .oks-anim-n_badgePop {
+    animation-name: badgePop;
+}
+
+  .oks-anim-dur_normal {
+    animation-duration: var(--oks-durations-normal);
+}
+
+  .oks-anim-tmf_default {
+    animation-timing-function: var(--oks-easings-default);
+}
+
+  .oks-anim-n_badgePopStandalone {
+    animation-name: badgePopStandalone;
+}
+
+  .oks-jc_flex-end {
+    justify-content: flex-end;
+}
+
+  .oks-tt_capitalize {
+    text-transform: capitalize;
+}
+
+  .oks-op_0 {
+    opacity: 0;
+}
+
+  .oks-op_1 {
+    opacity: 1;
+}
+
+  .oks-pos_absolute {
+    position: absolute;
+}
+
+  .oks-jc_center {
+    justify-content: center;
+}
+
+  .oks-c_blue\.50 {
+    color: var(--oks-colors-blue-50);
+}
+
+  .oks-asp_wide {
+    aspect-ratio: var(--oks-aspect-ratios-wide);
+}
+
+  .oks-flex-sh_0 {
+    flex-shrink: 0;
+}
+
+  .oks-fill_icon\.inverse {
+    fill: var(--oks-colors-icon-inverse);
+}
+
+  .oks-ps_4 {
+    padding-inline-start: var(--oks-spacing-4);
+}
+
+  .oks-pe_4 {
+    padding-inline-end: var(--oks-spacing-4);
+}
+
+  .oks-transition-property_transform {
+    transition-property: transform;
+}
+
+  .oks-trs-dur_normal {
+    --transition-duration: var(--oks-durations-normal);
+    transition-duration: var(--oks-durations-normal);
+}
+
+  .oks-trs-tmf_default {
+    --transition-easing: var(--oks-easings-default);
+    transition-timing-function: var(--oks-easings-default);
+}
+
+  .oks-c_text\.error {
+    color: text.error;
+}
+
+  .oks-fill_icon\.decorative {
+    fill: var(--oks-colors-icon-decorative);
+}
+
+  .oks-ap_subtle {
+    appearance: subtle;
+    -webkit-appearance: subtle;
+}
+
+  .oks-ap_primary {
+    appearance: primary;
+    -webkit-appearance: primary;
+}
+
+  .oks-c_gray\.90 {
+    color: var(--oks-colors-gray-90);
+}
+
+  .oks-c_gold\.50 {
+    color: gold.50;
+}
+
+  .oks-fw_semibold {
+    font-weight: semibold;
+}
+
+  .oks-fs_18 {
+    font-size: 18px;
+}
+
+  .oks-c_text {
+    color: var(--oks-colors-text);
+}
+
+  .oks-c_text\.disabled {
+    color: var(--oks-colors-text-disabled);
+}
+
+  .oks-lh_none {
+    line-height: var(--oks-line-heights-none);
+}
+
+  .oks-bg-c_blue\.50 {
+    background-color: var(--oks-colors-blue-50);
+}
+
+  .oks-bdr-l_3 {
+    border-top-left-radius: var(--oks-radii-3);
+    border-bottom-left-radius: var(--oks-radii-3);
+}
+
+  .oks-bdr-r_3 {
+    border-top-right-radius: var(--oks-radii-3);
+    border-bottom-right-radius: var(--oks-radii-3);
+}
+
+  .oks-lh_tight {
+    line-height: var(--oks-line-heights-tight);
+}
+
+  .oks-hy_auto {
+    hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
+  .oks-ai_baseline {
+    align-items: baseline;
+}
+
+  .oks-white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .oks-grid-tc_auto {
+    grid-template-columns: auto;
+}
+
+  .oks-cg_16 {
+    column-gap: var(--oks-spacing-16);
+}
+
+  .oks-rg_0 {
+    row-gap: var(--oks-spacing-0);
+}
+
+  .oks-grid-af_column {
+    grid-auto-flow: column;
+}
+
+  .oks-grid-tr_auto {
+    grid-template-rows: auto;
+}
+
+  .oks-d_inline-block {
+    display: inline-block;
+}
+
+  .oks-ff_mono {
+    font-family: var(--oks-fonts-mono);
+}
+
+  .oks-white-space_pre-wrap {
+    white-space: pre-wrap;
+}
+
+  .oks-c_border {
+    color: var(--oks-colors-border);
+}
+
+  .oks-grid-tc_repeat\(1\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+  .oks-grid-tc_auto_1fr {
+    grid-template-columns: auto 1fr;
+}
+
+  .oks-fill_icon\.info {
+    fill: var(--oks-colors-icon-info);
+}
+
+  .oks-c_transparent {
+    color: var(--oks-colors-transparent);
+}
+
+  .oks-c_border\.disabled {
+    color: var(--oks-colors-border-disabled);
+}
+
+  .oks-grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+  .oks-grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+  .oks-grid-tc_auto_auto {
+    grid-template-columns: auto auto;
+}
+
+  .oks-c_text\.warning {
+    color: var(--oks-colors-text-warning);
+}
+
+  .oks-grid-tc_auto_auto_1fr {
+    grid-template-columns: auto auto 1fr;
+}
+
+  .oks-rg_16 {
+    row-gap: var(--oks-spacing-16);
+}
+
+  .oks-grid-tc_minmax\(auto\,_120px\)_repeat\(auto-fill\,_minmax\(min\(220px\,_100\%\)\,_1fr\)\) {
+    grid-template-columns: minmax(auto, 120px) repeat(auto-fill, minmax(min(220px, 100%), 1fr));
+}
+
+  .oks-cg_40 {
+    column-gap: var(--oks-spacing-40);
+}
+
+  .oks-grid-ar_auto {
+    grid-auto-rows: auto;
+}
+
+  .oks-grid-tc_subgrid {
+    grid-template-columns: subgrid;
+}
+
+  .oks-ai_start {
+    align-items: start;
+}
+
+  .oks-grid-cs_2 {
+    grid-column-start: 2;
+}
+
+  .oks-ta_right {
+    text-align: right;
+}
+
+  .oks-cq-t_inline-size {
+    container-type: inline-size;
+}
+
+  .oks-cg_0 {
+    column-gap: var(--oks-spacing-0);
+}
+
+  .oks-rg_40 {
+    row-gap: var(--oks-spacing-40);
+}
+
+  .oks-grid-tr_repeat\(5\,_auto\) {
+    grid-template-rows: repeat(5, auto);
+}
+
+  .oks-grid-tr_subgrid {
+    grid-template-rows: subgrid;
+}
+
+  .oks-bdr-l_16 {
+    border-top-left-radius: var(--oks-radii-16);
+    border-bottom-left-radius: var(--oks-radii-16);
+}
+
+  .oks-bx-sh_zero {
+    box-shadow: var(--oks-shadows-zero);
+}
+
+  .oks-bx-sh_raised {
+    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-bdr-r_16 {
+    border-top-right-radius: var(--oks-radii-16);
+    border-bottom-right-radius: var(--oks-radii-16);
+}
+
+  .oks-bx-sh_overflow {
+    box-shadow: var(--oks-shadows-overflow);
+}
+
+  .oks-z_1 {
+    z-index: 1;
+}
+
+  .oks-grid-tc_repeat\(3\,_auto\) {
+    grid-template-columns: repeat(3, auto);
+}
+
+  .oks-rg_8 {
+    row-gap: var(--oks-spacing-8);
+}
+
+  .oks-grid-tr_repeat\(8\,_1fr\) {
+    grid-template-rows: repeat(8, 1fr);
+}
+
+  .oks-flex-g_0 {
+    flex-grow: 0;
+}
+
+  .oks-fs_20 {
+    font-size: var(--oks-font-sizes-20);
+}
+
+  .oks-fs_24 {
+    font-size: var(--oks-font-sizes-24);
+}
+
+  .oks-fs_32 {
+    font-size: var(--oks-font-sizes-32);
+}
+
+  .oks-fs_40 {
+    font-size: var(--oks-font-sizes-40);
+}
+
+  .oks-fs_48 {
+    font-size: var(--oks-font-sizes-48);
+}
+
+  .oks-fs_64 {
+    font-size: var(--oks-font-sizes-64);
+}
+
+  .oks-fs_72 {
+    font-size: var(--oks-font-sizes-72);
+}
+
+  .oks-fs_80 {
+    font-size: var(--oks-font-sizes-80);
+}
+
+  .oks-fs_96 {
+    font-size: var(--oks-font-sizes-96);
+}
+
+  .oks-fw_light {
+    font-weight: var(--oks-font-weights-light);
+}
+
+  .oks-fw_normal {
+    font-weight: var(--oks-font-weights-normal);
+}
+
+  .oks-fw_black {
+    font-weight: var(--oks-font-weights-black);
+}
+
+  .oks-lh_default {
+    line-height: var(--oks-line-heights-default);
+}
+
+  .oks-lh_loose {
+    line-height: var(--oks-line-heights-loose);
+}
+
+  .oks-ls_tighter {
+    letter-spacing: var(--oks-letter-spacings-tighter);
+}
+
+  .oks-ls_tight {
+    letter-spacing: var(--oks-letter-spacings-tight);
+}
+
+  .oks-ls_normal {
+    letter-spacing: var(--oks-letter-spacings-normal);
+}
+
+  .oks-ls_wide {
+    letter-spacing: var(--oks-letter-spacings-wide);
+}
+
+  .oks-ls_wider {
+    letter-spacing: var(--oks-letter-spacings-wider);
+}
+
+  .oks-cg_12 {
+    column-gap: var(--oks-spacing-12);
+}
+
+  .oks-rg_32 {
+    row-gap: var(--oks-spacing-32);
+}
+
+  .oks-w_full {
+    width: var(--oks-sizes-full);
+}
+
+  .oks-bd-t-w_1 {
+    border-top-width: var(--oks-border-widths-1);
+}
+
+  .oks-border-top-style_solid {
+    border-top-style: solid;
+}
+
+  .oks-pb_96 {
+    padding-bottom: var(--oks-spacing-96);
+}
+
+  .oks-min-w_lg {
+    min-width: var(--oks-sizes-lg);
+}
+
+  .oks-bd-b-w_1 {
+    border-bottom-width: var(--oks-border-widths-1);
+}
+
+  .oks-h_80 {
+    height: var(--oks-sizes-80);
+}
+
+  .oks-ml_8 {
+    margin-left: var(--oks-spacing-8);
+}
+
+  .oks-max-w_xs {
+    max-width: var(--oks-sizes-xs);
+}
+
+  .oks-mb_56 {
+    margin-bottom: var(--oks-spacing-56);
+}
+
+  .oks-top_0 {
+    top: var(--oks-spacing-0);
+}
+
+  .oks-w_100\% {
+    width: 100%;
+}
+
+  .oks-max-w_5xl {
+    max-width: var(--oks-sizes-5xl);
+}
+
+  .oks-mt_32 {
+    margin-top: var(--oks-spacing-32);
+}
+
+  .oks-mb_12 {
+    margin-bottom: var(--oks-spacing-12);
+}
+
+  .oks-mb_8 {
+    margin-bottom: var(--oks-spacing-8);
+}
+
+  .oks-mt_12 {
+    margin-top: var(--oks-spacing-12);
+}
+
+  .oks-mt_8 {
+    margin-top: var(--oks-spacing-8);
+}
+
+  .oks-mr_12 {
+    margin-right: var(--oks-spacing-12);
+}
+
+  .oks-mr_8 {
+    margin-right: var(--oks-spacing-8);
+}
+
+  .oks-ml_12 {
+    margin-left: var(--oks-spacing-12);
+}
+
+  .oks-w_280 {
+    width: var(--oks-sizes-280);
+}
+
+  .oks-w_xs {
+    width: var(--oks-sizes-xs);
+}
+
+  .oks-w_80 {
+    width: var(--oks-sizes-80);
+}
+
+  .oks-w_12 {
+    width: var(--oks-sizes-12);
+}
+
+  .oks-h_12 {
+    height: var(--oks-sizes-12);
+}
+
+  .oks-min-w_16 {
+    min-width: var(--oks-sizes-16);
+}
+
+  .oks-h_fit {
+    height: var(--oks-sizes-fit);
+}
+
+  .oks-min-w_20 {
+    min-width: var(--oks-sizes-20);
+}
+
+  .oks-min-w_24 {
+    min-width: var(--oks-sizes-24);
+}
+
+  .oks-w_24 {
+    width: var(--oks-sizes-24);
+}
+
+  .oks-h_24 {
+    height: var(--oks-sizes-24);
+}
+
+  .oks-w_20 {
+    width: var(--oks-sizes-20);
+}
+
+  .oks-h_20 {
+    height: var(--oks-sizes-20);
+}
+
+  .oks-w_32 {
+    width: var(--oks-sizes-32);
+}
+
+  .oks-h_32 {
+    height: var(--oks-sizes-32);
+}
+
+  .oks-w_fit {
+    width: var(--oks-sizes-fit);
+}
+
+  .oks-mb_2 {
+    margin-bottom: var(--oks-spacing-2);
+}
+
+  .oks-left_0 {
+    left: var(--oks-spacing-0);
+}
+
+  .oks-right_0 {
+    right: var(--oks-spacing-0);
+}
+
+  .oks-bottom_0 {
+    bottom: var(--oks-spacing-0);
+}
+
+  .oks-w_4xl {
+    width: var(--oks-sizes-4xl);
+}
+
+  .oks-w_64 {
+    width: var(--oks-sizes-64);
+}
+
+  .oks-h_64 {
+    height: var(--oks-sizes-64);
+}
+
+  .oks-mt_16 {
+    margin-top: var(--oks-spacing-16);
+}
+
+  .oks-ml_24 {
+    margin-left: var(--oks-spacing-24);
+}
+
+  .oks-w_100 {
+    width: 100px;
+}
+
+  .oks-max-w_lg {
+    max-width: var(--oks-sizes-lg);
+}
+
+  .oks-mt_4 {
+    margin-top: var(--oks-spacing-4);
+}
+
+  .oks-min-w_xl {
+    min-width: var(--oks-sizes-xl);
+}
+
+  .oks-max-w_full {
+    max-width: var(--oks-sizes-full);
+}
+
+  .oks-max-w_3xl {
+    max-width: var(--oks-sizes-3xl);
+}
+
+  .oks-h_8 {
+    height: var(--oks-sizes-8);
+}
+
+  .oks-mb_4 {
+    margin-bottom: var(--oks-spacing-4);
+}
+
+  .oks-mb_16 {
+    margin-bottom: var(--oks-spacing-16);
+}
+
+  .oks-w_16 {
+    width: var(--oks-sizes-16);
+}
+
+  .oks-h_16 {
+    height: var(--oks-sizes-16);
+}
+
+  .oks-max-w_prose {
+    max-width: var(--oks-sizes-prose);
+}
+
+  .oks-mb_32 {
+    margin-bottom: var(--oks-spacing-32);
+}
+
+  .oks-mb_48 {
+    margin-bottom: var(--oks-spacing-48);
+}
+
+  .oks-bd-l-w_4 {
+    border-left-width: var(--oks-border-widths-4);
+}
+
+  .oks-bd-l-c_slate\.20 {
+    border-left-color: var(--oks-colors-slate-20);
+}
+
+  .oks-border-left-style_solid {
+    border-left-style: solid;
+}
+
+  .oks-w_fit-content {
+    width: fit-content;
+}
+
+  .oks-min-h_120 {
+    min-height: var(--oks-sizes-120);
+}
+
+  .oks-max-h_240 {
+    max-height: var(--oks-sizes-240);
+}
+
+  .oks-ov-y_auto {
+    overflow-y: auto;
+}
+
+  .oks-w_auto {
+    width: var(--oks-sizes-auto);
+}
+
+  .oks-max-w_4xl {
+    max-width: var(--oks-sizes-4xl);
+}
+
+  .oks-w_half {
+    width: var(--oks-sizes-half);
+}
+
+  .oks-w_min {
+    width: var(--oks-sizes-min);
+}
+
+  .oks-w_max {
+    width: var(--oks-sizes-max);
+}
+
+  .oks-w_prose {
+    width: var(--oks-sizes-prose);
+}
+
+  .dark .dark\:oks-bg_red\.100,.dark\:oks-bg_red\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_red\.100 {
+    background: var(--oks-colors-red-100);
+}
+
+  .dark .dark\:oks-bg_red\.40,.dark\:oks-bg_red\.40:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_red\.40 {
+    background: var(--oks-colors-red-40);
+}
+
+  .dark .dark\:oks-bg_orange\.100,.dark\:oks-bg_orange\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_orange\.100 {
+    background: var(--oks-colors-orange-100);
+}
+
+  .dark .dark\:oks-bg_orange\.50,.dark\:oks-bg_orange\.50:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_orange\.50 {
+    background: var(--oks-colors-orange-50);
+}
+
+  .dark .dark\:oks-bg_yellow\.90,.dark\:oks-bg_yellow\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_yellow\.90 {
+    background: var(--oks-colors-yellow-90);
+}
+
+  .dark .dark\:oks-bg_yellow\.60,.dark\:oks-bg_yellow\.60:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_yellow\.60 {
+    background: var(--oks-colors-yellow-60);
+}
+
+  .dark .dark\:oks-bg_lime\.90,.dark\:oks-bg_lime\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_lime\.90 {
+    background: var(--oks-colors-lime-90);
+}
+
+  .dark .dark\:oks-bg_lime\.40,.dark\:oks-bg_lime\.40:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_lime\.40 {
+    background: var(--oks-colors-lime-40);
+}
+
+  .dark .dark\:oks-bg_green\.90,.dark\:oks-bg_green\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_green\.90 {
+    background: var(--oks-colors-green-90);
+}
+
+  .dark .dark\:oks-bg_green\.40,.dark\:oks-bg_green\.40:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_green\.40 {
+    background: var(--oks-colors-green-40);
+}
+
+  .dark .dark\:oks-bg_teal\.90,.dark\:oks-bg_teal\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_teal\.90 {
+    background: var(--oks-colors-teal-90);
+}
+
+  .dark .dark\:oks-bg_teal\.50,.dark\:oks-bg_teal\.50:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_teal\.50 {
+    background: var(--oks-colors-teal-50);
+}
+
+  .dark .dark\:oks-bg_blue\.90,.dark\:oks-bg_blue\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_blue\.90 {
+    background: var(--oks-colors-blue-90);
+}
+
+  .dark .dark\:oks-bg_blue\.70,.dark\:oks-bg_blue\.70:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_blue\.70 {
+    background: var(--oks-colors-blue-70);
+}
+
+  .dark .dark\:oks-bg_indigo\.90,.dark\:oks-bg_indigo\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_indigo\.90 {
+    background: var(--oks-colors-indigo-90);
+}
+
+  .dark .dark\:oks-bg_indigo\.70,.dark\:oks-bg_indigo\.70:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_indigo\.70 {
+    background: var(--oks-colors-indigo-70);
+}
+
+  .dark .dark\:oks-bg_purple\.90,.dark\:oks-bg_purple\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_purple\.90 {
+    background: var(--oks-colors-purple-90);
+}
+
+  .dark .dark\:oks-bg_purple\.80,.dark\:oks-bg_purple\.80:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_purple\.80 {
+    background: var(--oks-colors-purple-80);
+}
+
+  .dark .dark\:oks-bg_magenta\.90,.dark\:oks-bg_magenta\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_magenta\.90 {
+    background: var(--oks-colors-magenta-90);
+}
+
+  .dark .dark\:oks-bg_magenta\.70,.dark\:oks-bg_magenta\.70:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_magenta\.70 {
+    background: var(--oks-colors-magenta-70);
+}
+
+  .dark .dark\:oks-bg_tan\.80,.dark\:oks-bg_tan\.80:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_tan\.80 {
+    background: var(--oks-colors-tan-80);
+}
+
+  .dark .dark\:oks-bg_tan\.40,.dark\:oks-bg_tan\.40:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-bg_tan\.40 {
+    background: var(--oks-colors-tan-40);
+}
+
+  .utility\:oks-bg_bg\.accent\.neutral\.subtlest[data-utility=true] {
+    background: var(--oks-colors-bg-accent-neutral-subtlest);
+}
+
+  .utility\:oks-bd-c_border[data-utility=true] {
+    border-color: var(--oks-colors-border);
+}
+
+  .dark .dark\:oks-c_blue\.40,.dark\:oks-c_blue\.40:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_blue\.40 {
+    color: var(--oks-colors-blue-40);
+}
+
+  .dark .dark\:oks-c_red\.20,.dark\:oks-c_red\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_red\.20 {
+    color: var(--oks-colors-red-20);
+}
+
+  .dark .dark\:oks-c_red\.100,.dark\:oks-c_red\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_red\.100 {
+    color: var(--oks-colors-red-100);
+}
+
+  .dark .dark\:oks-c_orange\.20,.dark\:oks-c_orange\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_orange\.20 {
+    color: var(--oks-colors-orange-20);
+}
+
+  .dark .dark\:oks-c_orange\.100,.dark\:oks-c_orange\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_orange\.100 {
+    color: var(--oks-colors-orange-100);
+}
+
+  .dark .dark\:oks-c_yellow\.50,.dark\:oks-c_yellow\.50:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_yellow\.50 {
+    color: var(--oks-colors-yellow-50);
+}
+
+  .dark .dark\:oks-c_yellow\.100,.dark\:oks-c_yellow\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_yellow\.100 {
+    color: var(--oks-colors-yellow-100);
+}
+
+  .dark .dark\:oks-c_lime\.20,.dark\:oks-c_lime\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_lime\.20 {
+    color: var(--oks-colors-lime-20);
+}
+
+  .dark .dark\:oks-c_lime\.100,.dark\:oks-c_lime\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_lime\.100 {
+    color: var(--oks-colors-lime-100);
+}
+
+  .dark .dark\:oks-c_green\.20,.dark\:oks-c_green\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_green\.20 {
+    color: var(--oks-colors-green-20);
+}
+
+  .dark .dark\:oks-c_green\.100,.dark\:oks-c_green\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_green\.100 {
+    color: var(--oks-colors-green-100);
+}
+
+  .dark .dark\:oks-c_teal\.20,.dark\:oks-c_teal\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_teal\.20 {
+    color: var(--oks-colors-teal-20);
+}
+
+  .dark .dark\:oks-c_teal\.100,.dark\:oks-c_teal\.100:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_teal\.100 {
+    color: var(--oks-colors-teal-100);
+}
+
+  .dark .dark\:oks-c_blue\.20,.dark\:oks-c_blue\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_blue\.20 {
+    color: var(--oks-colors-blue-20);
+}
+
+  .dark .dark\:oks-c_blue\.10,.dark\:oks-c_blue\.10:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_blue\.10 {
+    color: var(--oks-colors-blue-10);
+}
+
+  .dark .dark\:oks-c_indigo\.20,.dark\:oks-c_indigo\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_indigo\.20 {
+    color: var(--oks-colors-indigo-20);
+}
+
+  .dark .dark\:oks-c_indigo\.10,.dark\:oks-c_indigo\.10:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_indigo\.10 {
+    color: var(--oks-colors-indigo-10);
+}
+
+  .dark .dark\:oks-c_purple\.20,.dark\:oks-c_purple\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_purple\.20 {
+    color: var(--oks-colors-purple-20);
+}
+
+  .dark .dark\:oks-c_purple\.10,.dark\:oks-c_purple\.10:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_purple\.10 {
+    color: var(--oks-colors-purple-10);
+}
+
+  .dark .dark\:oks-c_magenta\.20,.dark\:oks-c_magenta\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_magenta\.20 {
+    color: var(--oks-colors-magenta-20);
+}
+
+  .dark .dark\:oks-c_magenta\.10,.dark\:oks-c_magenta\.10:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_magenta\.10 {
+    color: var(--oks-colors-magenta-10);
+}
+
+  .dark .dark\:oks-c_tan\.20,.dark\:oks-c_tan\.20:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_tan\.20 {
+    color: var(--oks-colors-tan-20);
+}
+
+  .dark .dark\:oks-c_tan\.90,.dark\:oks-c_tan\.90:is([data-color-mode=dark] *),[data-color-mode=dark] .dark\:oks-c_tan\.90 {
+    color: var(--oks-colors-tan-90);
+}
+
+  .\[\&\[data-open\=\"true\"\]\]\:oks-trf_rotate\(180deg\)[data-open="true"] {
+    transform: rotate(180deg);
+}
+
+  .focusVisible\:oks-bg_surface:is(:focus-visible, [data-focus-visible=true]) {
+    background: var(--oks-colors-surface);
+}
+
+  .focusVisible\:oks-bd-w_1:is(:focus-visible, [data-focus-visible=true]) {
+    border-width: var(--oks-border-widths-1);
+}
+
+  .focusVisible\:oks-bd-c_border\.focused:is(:focus-visible, [data-focus-visible=true]) {
+    border-color: var(--oks-colors-border-focused);
+}
+
+  .focusVisible\:oks-bx-sh_elevated:is(:focus-visible, [data-focus-visible=true]) {
+    box-shadow: var(--oks-shadows-elevated);
+}
+
+  .focusVisible\:oks-ring-c_border\.focused:is(:focus-visible, [data-focus-visible=true]) {
+    outline-color: var(--oks-colors-border-focused);
+}
+
+  .hover\:oks-bg_surface:is(:hover, [data-hover=true]) {
+    background: var(--oks-colors-surface);
+}
+
+  .hover\:oks-bx-sh_elevated:is(:hover, [data-hover=true]) {
+    box-shadow: var(--oks-shadows-elevated);
+}
+
+  .disabled\:hover\:oks-bx-sh_raised:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover=true]) {
+    box-shadow: var(--oks-shadows-raised);
+}
+
+  .disabled\:hover\:oks-bx-sh_none:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover=true]) {
+    box-shadow: none;
+}
+
+  @container  (min-width: 42rem) {
+    .\@\/2xl\:oks-grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+
+  @media screen and (min-width: 48rem) {
+    .md\:oks-px_32 {
+      padding-inline: var(--oks-spacing-32);
+}
+    .md\:oks-grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+
+  @media screen and (min-width: 64rem) {
+    .lg\:oks-px_48 {
+      padding-inline: var(--oks-spacing-48);
+}
+}
+}