@okshaun/components 1.0.1 → 2.0.0

package/dist/styles/utilities.css

@@ -1,1694 +0,0 @@
-@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);
-}
-}
-}