santosp-rslib-project 1.0.1

package/dist/index.css

@@ -0,0 +1,832 @@
+@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap);
+@layer reset {
+  html, :host {
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--global-font-body, var(--font-fallback));
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  *, :before, :after, ::backdrop {
+    border-style: solid;
+    border-width: 0;
+    border-color: var(--global-color-border, currentcolor);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::file-selector-button {
+    border-style: solid;
+    border-width: 0;
+    border-color: var(--global-color-border, currentcolor);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  hr {
+    color: inherit;
+    border-top-width: 1px;
+    height: 0;
+  }
+
+  body {
+    line-height: inherit;
+    height: 100%;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    vertical-align: middle;
+    display: block;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+
+  ol, ul, menu {
+    list-style: none;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  button, input, optgroup, select, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    background: none;
+  }
+
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    background: none;
+  }
+
+  ::placeholder {
+    --placeholder-fallback: #00000080;
+    opacity: 1;
+    color: var(--global-color-placeholder, var(--placeholder-fallback));
+  }
+
+  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      --placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  ::selection {
+    background-color: var(--global-color-selection, #0073ff4d);
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  table {
+    border-color: inherit;
+    text-indent: 0;
+    border-collapse: collapse;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -.25em;
+  }
+
+  sup {
+    top: -.5em;
+  }
+
+  dialog {
+    padding: 0;
+  }
+
+  a {
+    text-decoration: inherit;
+    color: inherit;
+  }
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
+    font-family: var(--global-font-mono, var(--font-mono-fallback));
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+
+@layer base {
+  :root {
+    --made-with-panda: "🐼";
+  }
+
+  *, :before, :after, ::backdrop {
+    --blur:   ;
+    --brightness:   ;
+    --contrast:   ;
+    --grayscale:   ;
+    --hue-rotate:   ;
+    --invert:   ;
+    --saturate:   ;
+    --sepia:   ;
+    --drop-shadow:   ;
+    --backdrop-blur:   ;
+    --backdrop-brightness:   ;
+    --backdrop-contrast:   ;
+    --backdrop-grayscale:   ;
+    --backdrop-hue-rotate:   ;
+    --backdrop-invert:   ;
+    --backdrop-opacity:   ;
+    --backdrop-saturate:   ;
+    --backdrop-sepia:   ;
+    --gradient-from-position:   ;
+    --gradient-to-position:   ;
+    --gradient-via-position:   ;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --rotate-x: 0;
+    --rotate-y: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1;
+  }
+}
+
+@layer tokens {
+  :where(:root, :host) {
+    --leve-colors-dark: #000;
+    --leve-colors-light: #fff;
+    --leve-colors-neutral-100: #f3f4f6;
+    --leve-colors-neutral-200: #e5e7eb;
+    --leve-colors-neutral-300: #d1d5db;
+    --leve-colors-neutral-400: #9ca3af;
+    --leve-colors-neutral-500: #6b7280;
+    --leve-colors-neutral-600: #4b5563;
+    --leve-colors-neutral-700: #374151;
+    --leve-colors-neutral-800: #1f2937;
+    --leve-colors-neutral-900: #111827;
+    --leve-colors-purple-100: #f3e8ff;
+    --leve-colors-purple-200: #e9d5ff;
+    --leve-colors-purple-300: #d8b4fe;
+    --leve-colors-purple-400: #c084fc;
+    --leve-colors-purple-500: #a855f7;
+    --leve-colors-purple-600: #9333ea;
+    --leve-colors-purple-700: #7e22ce;
+    --leve-colors-purple-800: #6b21a8;
+    --leve-colors-purple-900: #581c87;
+    --leve-colors-red-100: #fee2e2;
+    --leve-colors-red-200: #fecaca;
+    --leve-colors-red-300: #fca5a5;
+    --leve-colors-red-400: #f87171;
+    --leve-colors-red-500: #ef4444;
+    --leve-colors-red-600: #dc2626;
+    --leve-colors-red-700: #b91c1c;
+    --leve-colors-red-800: #991b1b;
+    --leve-colors-red-900: #7f1d1d;
+    --leve-colors-orange-100: #fdcab4;
+    --leve-colors-orange-200: #fe9467;
+    --leve-colors-orange-300: #fe824e;
+    --leve-colors-orange-400: #fd7035;
+    --leve-colors-orange-500: #fc4c02;
+    --leve-colors-orange-600: #e44502;
+    --leve-colors-orange-700: #ca3d02;
+    --leve-colors-orange-800: #b13501;
+    --leve-colors-orange-900: #982e01;
+    --leve-colors-yellow-100: #fef9c3;
+    --leve-colors-yellow-200: #fef08a;
+    --leve-colors-yellow-300: #fde047;
+    --leve-colors-yellow-400: #facc15;
+    --leve-colors-yellow-500: #eab308;
+    --leve-colors-yellow-600: #ca8a04;
+    --leve-colors-yellow-700: #a16207;
+    --leve-colors-yellow-800: #854d0e;
+    --leve-colors-yellow-900: #713f12;
+    --leve-colors-sand-100: #fdf4e7;
+    --leve-colors-sand-200: #fae9cf;
+    --leve-colors-sand-300: #f2d5b0;
+    --leve-colors-sand-400: #e9c091;
+    --leve-colors-sand-500: #d4a373;
+    --leve-colors-sand-600: #b78f5c;
+    --leve-colors-sand-700: #9a7b45;
+    --leve-colors-sand-800: #7d672e;
+    --leve-colors-sand-900: #605317;
+    --leve-colors-green-100: #dcfce7;
+    --leve-colors-green-200: #bbf7d0;
+    --leve-colors-green-300: #86efac;
+    --leve-colors-green-400: #4ade80;
+    --leve-colors-green-500: #22c55e;
+    --leve-colors-green-600: #16a34a;
+    --leve-colors-green-700: #15803d;
+    --leve-colors-green-800: #166534;
+    --leve-colors-green-900: #14532d;
+    --leve-colors-petrol-100: #e0f2f1;
+    --leve-colors-petrol-200: #b2dfdb;
+    --leve-colors-petrol-300: #80cbc4;
+    --leve-colors-petrol-400: #4db6ac;
+    --leve-colors-petrol-500: #26a69a;
+    --leve-colors-petrol-600: #009688;
+    --leve-colors-petrol-700: #00796b;
+    --leve-colors-petrol-800: #00695c;
+    --leve-colors-petrol-900: #004d40;
+    --leve-colors-olive-100: #f2f8f4;
+    --leve-colors-olive-200: #eaf3ee;
+    --leve-colors-olive-300: #dfece5;
+    --leve-colors-olive-400: #cee3d8;
+    --leve-colors-olive-500: #bedaca;
+    --leve-colors-olive-600: #aed1bd;
+    --leve-colors-olive-700: #9ec7b0;
+    --leve-colors-olive-800: #8dbea3;
+    --leve-colors-olive-900: #7db596;
+    --leve-colors-lead-100: #f1f5f9;
+    --leve-colors-lead-200: #e2e8f0;
+    --leve-colors-lead-300: #cbd5e1;
+    --leve-colors-lead-400: #94a3b8;
+    --leve-colors-lead-500: #64748b;
+    --leve-colors-lead-600: #475569;
+    --leve-colors-lead-700: #3f4a4f;
+    --leve-colors-lead-800: #2e3940;
+    --leve-colors-lead-900: #1e2937;
+    --leve-colors-pink-100: #fce7f3;
+    --leve-colors-pink-200: #fbcfe8;
+    --leve-colors-pink-300: #f9a8d4;
+    --leve-colors-pink-400: #f472b6;
+    --leve-colors-pink-500: #ec4899;
+    --leve-colors-pink-600: #db2777;
+    --leve-colors-pink-700: #e93e7d;
+    --leve-colors-pink-800: #c21b5e;
+    --leve-colors-pink-900: #9d174d;
+    --leve-font-sizes-xxs: .625rem;
+    --leve-font-sizes-xs: .75rem;
+    --leve-font-sizes-sm: .875rem;
+    --leve-font-sizes-md: 1rem;
+    --leve-font-sizes-lg: 1.25rem;
+    --leve-font-sizes-h6: 1.5rem;
+    --leve-font-sizes-h5: 2rem;
+    --leve-font-sizes-h4: 2.5rem;
+    --leve-font-sizes-h3: 3rem;
+    --leve-font-sizes-h2: 3.75rem;
+    --leve-font-sizes-h1: 4.5rem;
+    --leve-font-weights-normal: 400;
+    --leve-font-weights-medium: 500;
+    --leve-font-weights-bold: 700;
+    --leve-fonts-sans: Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    --leve-fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --leve-line-heights-xxs: .875rem;
+    --leve-line-heights-xs: 1rem;
+    --leve-line-heights-sm: 1.25rem;
+    --leve-line-heights-md: 1.375rem;
+    --leve-line-heights-lg: 1.75rem;
+    --leve-line-heights-h6: 2rem;
+    --leve-line-heights-h5: 2.75rem;
+    --leve-line-heights-h4: 3.5rem;
+    --leve-line-heights-h3: 4.5rem;
+    --leve-line-heights-h2: 5.25rem;
+    --leve-line-heights-h1: 6.25rem;
+    --leve-spacing-2: 2px;
+    --leve-spacing-4: 4px;
+    --leve-spacing-8: 8px;
+    --leve-spacing-12: 12px;
+    --leve-spacing-16: 16px;
+    --leve-spacing-24: 24px;
+    --leve-spacing-32: 32px;
+    --leve-spacing-40: 40px;
+    --leve-spacing-48: 48px;
+    --leve-spacing-56: 56px;
+    --leve-border-widths-thin: 1px;
+    --leve-border-widths-medium: 2px;
+    --leve-border-widths-thick: 3px;
+    --leve-border-widths-large: 5px;
+    --leve-radii-4: 4px;
+    --leve-radii-8: 8px;
+    --leve-radii-16: 16px;
+    --leve-radii-24: 24px;
+    --leve-radii-32: 32px;
+    --leve-radii-40: 40px;
+    --leve-radii-48: 48px;
+    --leve-radii-56: 56px;
+    --leve-shadows-xs: 0 8px 8px 0 #54545433;
+    --leve-shadows-sm: 0 8px 16px 0 #54545433;
+    --leve-shadows-md: 0 12px 24px 0 #54545433;
+    --leve-shadows-lg: 0 12px 32px 0 #54545433;
+    --leve-shadows-xl: 0 20px 64px 0 #54545433;
+    --leve-breakpoints-sm: 640px;
+    --leve-breakpoints-md: 768px;
+    --leve-breakpoints-lg: 1024px;
+    --leve-breakpoints-xl: 1280px;
+    --leve-breakpoints-2xl: 1536px;
+    --leve-sizes-breakpoint-sm: 640px;
+    --leve-sizes-breakpoint-md: 768px;
+    --leve-sizes-breakpoint-lg: 1024px;
+    --leve-sizes-breakpoint-xl: 1280px;
+    --leve-sizes-breakpoint-2xl: 1536px;
+    --leve-colors-primary: var(--leve-colors-orange-500);
+    --leve-colors-secondary: var(--leve-colors-purple-500);
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ping {
+    75%, 100% {
+      opacity: 0;
+      transform: scale(2);
+    }
+  }
+
+  @keyframes pulse {
+    50% {
+      opacity: .5;
+    }
+  }
+
+  @keyframes bounce {
+    0%, 100% {
+      animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+      transform: translateY(-25%);
+    }
+
+    50% {
+      animation-timing-function: cubic-bezier(0, 0, .2, 1);
+      transform: none;
+    }
+  }
+}
+
+@layer recipes {
+  @layer _base {
+    .leve-leve-button {
+      border-radius: var(--leve-radii-24);
+      padding-inline: var(--leve-spacing-24);
+      padding-block: var(--leve-spacing-12);
+      gap: var(--leve-spacing-2);
+      color: var(--leve-colors-light);
+      font-weight: var(--leve-font-weights-bold);
+      justify-content: center;
+      align-items: center;
+      transition: all .2s linear;
+      display: flex;
+    }
+
+    .leve-leve-button:is(:disabled, [disabled], [data-disabled], [aria-disabled="true"]) {
+      opacity: .4;
+      pointer-events: none;
+    }
+
+    .leve-leve-button :where(svg) {
+      width: 24px;
+      height: 24px;
+    }
+
+    .leve-leve-button:is(:focus, [data-focus]) {
+      outline-style: solid;
+      outline-width: var(--leve-border-widths-large);
+      outline-offset: 0;
+      --mix-outlineColor: color-mix(in srgb, var(--btn-color) 30%, transparent);
+      outline-color: var(--mix-outlineColor, var(--btn-color));
+    }
+
+    .leve-leve-button:is(:hover, [data-hover]) {
+      cursor: pointer;
+    }
+
+    .leve-leve-button:is(:active, [data-active]) {
+      filter: brightness(.75);
+    }
+
+    .leve-leve-link {
+      gap: var(--leve-spacing-2);
+      font-weight: var(--leve-font-weights-bold);
+      --transition-easing: linear;
+      transition: all .2s linear;
+      display: flex;
+    }
+
+    .leve-leve-link:is([aria-pressed="true"], [data-pressed]) {
+      filter: brightness(.75);
+    }
+
+    .leve-leve-link:focus {
+      outline-width: 4px;
+      outline-color: currentColor;
+    }
+
+    .leve-leve-link:hover {
+      filter: brightness(.875);
+    }
+  }
+
+  .leve-leve-button--variant_solid {
+    background-color: var(--btn-color);
+  }
+
+  .leve-leve-button--variant_solid:is(:hover, [data-hover]) {
+    background-color: color-mix(in srgb, var(--btn-color), black 20%);
+  }
+
+  .leve-leve-button--color_primary {
+    --btn-color: var(--leve-colors-primary);
+  }
+
+  .leve-leve-button--size_md {
+    font-size: var(--leve-font-sizes-md);
+    height: 48px;
+  }
+
+  .leve-leve-button--variant_outline {
+    border-width: var(--leve-border-widths-medium);
+    border-color: var(--btn-color);
+    color: var(--btn-color);
+    background-color: #0000;
+  }
+
+  .leve-leve-button--variant_outline:is(:hover, [data-hover]) {
+    border-color: color-mix(in srgb, var(--btn-color), black 20%);
+    color: color-mix(in srgb, var(--btn-color), black 20%);
+  }
+
+  .leve-leve-button--variant_ghost {
+    color: var(--btn-color);
+  }
+
+  .leve-leve-button--variant_ghost:is(:hover, [data-hover]) {
+    color: color-mix(in srgb, var(--btn-color), black 20%);
+    --mix-backgroundColor: color-mix(in srgb, var(--btn-color) 10%, transparent);
+    background-color: var(--mix-backgroundColor, var(--btn-color));
+  }
+
+  .leve-leve-button--size_sm {
+    padding-block: var(--leve-spacing-8);
+    font-size: var(--leve-font-sizes-sm);
+    height: 40px;
+  }
+
+  .leve-leve-button--color_secondary {
+    --btn-color: var(--leve-colors-secondary);
+  }
+
+  .leve-leve-button--color_dark {
+    --btn-color: var(--leve-colors-dark);
+  }
+
+  .leve-leve-button--color_light {
+    --btn-color: var(--leve-colors-light);
+  }
+
+  .leve-leve-button--color_purple {
+    --btn-color: var(--leve-colors-purple-500);
+  }
+
+  .leve-leve-button--color_orange {
+    --btn-color: var(--leve-colors-orange-500);
+  }
+
+  .leve-leve-button--color_red {
+    --btn-color: var(--leve-colors-red-500);
+  }
+
+  .leve-leve-button--color_yellow {
+    --btn-color: var(--leve-colors-yellow-500);
+  }
+
+  .leve-leve-button--color_sand {
+    --btn-color: var(--leve-colors-sand-500);
+  }
+
+  .leve-leve-button--color_petrol {
+    --btn-color: var(--leve-colors-petrol-500);
+  }
+
+  .leve-leve-button--color_olive {
+    --btn-color: var(--leve-colors-olive-500);
+  }
+
+  .leve-leve-button--color_lead {
+    --btn-color: var(--leve-colors-lead-500);
+  }
+
+  .leve-leve-button--color_pink {
+    --btn-color: var(--leve-colors-pink-500);
+  }
+
+  .leve-leve-button--color_neutral {
+    --btn-color: var(--leve-colors-neutral-500);
+  }
+
+  .leve-leve-button--color_green {
+    --btn-color: var(--leve-colors-green-500);
+  }
+
+  .leve-leve-button--icon_true {
+    border-radius: 100px;
+    padding: 0;
+  }
+
+  .leve-leve-link--color_primary {
+    color: var(--leve-colors-primary);
+  }
+
+  .leve-leve-link--color_secondary {
+    color: var(--leve-colors-secondary);
+  }
+
+  .leve-leve-link--color_dark {
+    color: var(--leve-colors-dark);
+  }
+
+  .leve-leve-link--color_light {
+    color: var(--leve-colors-light);
+  }
+
+  .leve-leve-link--color_purple {
+    color: var(--leve-colors-purple-500);
+  }
+
+  .leve-leve-link--color_orange {
+    color: var(--leve-colors-orange-500);
+  }
+
+  .leve-leve-link--color_red {
+    color: var(--leve-colors-red-500);
+  }
+
+  .leve-leve-link--color_yellow {
+    color: var(--leve-colors-yellow-500);
+  }
+
+  .leve-leve-link--color_sand {
+    color: var(--leve-colors-sand-500);
+  }
+
+  .leve-leve-link--color_petrol {
+    color: var(--leve-colors-petrol-500);
+  }
+
+  .leve-leve-link--color_olive {
+    color: var(--leve-colors-olive-500);
+  }
+
+  .leve-leve-link--color_lead {
+    color: var(--leve-colors-lead-500);
+  }
+
+  .leve-leve-link--color_pink {
+    color: var(--leve-colors-pink-500);
+  }
+
+  .leve-leve-link--color_neutral {
+    color: var(--leve-colors-neutral-500);
+  }
+
+  .leve-leve-link--color_green {
+    color: var(--leve-colors-green-500);
+  }
+
+  .leve-leve-link--disabled_true {
+    opacity: .5;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .leve-leve-text--color_dark {
+    color: var(--leve-colors-dark);
+  }
+
+  .leve-leve-text--size_h6 {
+    font-size: var(--leve-font-sizes-h6);
+  }
+
+  .leve-leve-text--bold_false {
+    font-weight: var(--leve-font-weights-normal);
+  }
+
+  .leve-leve-text--color_primary {
+    color: var(--leve-colors-primary);
+  }
+
+  .leve-leve-text--color_secondary {
+    color: var(--leve-colors-secondary);
+  }
+
+  .leve-leve-text--color_light {
+    color: var(--leve-colors-light);
+  }
+
+  .leve-leve-text--color_purple {
+    color: var(--leve-colors-purple-500);
+  }
+
+  .leve-leve-text--color_orange {
+    color: var(--leve-colors-orange-500);
+  }
+
+  .leve-leve-text--color_red {
+    color: var(--leve-colors-red-500);
+  }
+
+  .leve-leve-text--color_yellow {
+    color: var(--leve-colors-yellow-500);
+  }
+
+  .leve-leve-text--color_sand {
+    color: var(--leve-colors-sand-500);
+  }
+
+  .leve-leve-text--color_petrol {
+    color: var(--leve-colors-petrol-500);
+  }
+
+  .leve-leve-text--color_olive {
+    color: var(--leve-colors-olive-500);
+  }
+
+  .leve-leve-text--color_lead {
+    color: var(--leve-colors-lead-500);
+  }
+
+  .leve-leve-text--color_pink {
+    color: var(--leve-colors-pink-500);
+  }
+
+  .leve-leve-text--color_neutral {
+    color: var(--leve-colors-neutral-500);
+  }
+
+  .leve-leve-text--color_green {
+    color: var(--leve-colors-green-500);
+  }
+
+  .leve-leve-text--size_xxs {
+    font-size: var(--leve-font-sizes-xxs);
+  }
+
+  .leve-leve-text--size_xs {
+    font-size: var(--leve-font-sizes-xs);
+  }
+
+  .leve-leve-text--size_sm {
+    font-size: var(--leve-font-sizes-sm);
+  }
+
+  .leve-leve-text--size_md {
+    font-size: var(--leve-font-sizes-md);
+  }
+
+  .leve-leve-text--size_lg {
+    font-size: var(--leve-font-sizes-lg);
+  }
+
+  .leve-leve-text--size_h5 {
+    font-size: var(--leve-font-sizes-h5);
+  }
+
+  .leve-leve-text--size_h4 {
+    font-size: var(--leve-font-sizes-h4);
+  }
+
+  .leve-leve-text--size_h3 {
+    font-size: var(--leve-font-sizes-h3);
+  }
+
+  .leve-leve-text--size_h2 {
+    font-size: var(--leve-font-sizes-h2);
+  }
+
+  .leve-leve-text--size_h1 {
+    font-size: var(--leve-font-sizes-h1);
+  }
+
+  .leve-leve-text--bold_true {
+    font-weight: var(--leve-font-weights-bold);
+  }
+
+  .leve-leve-text--truncate_true {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+@layer utilities {
+  .leve-gap_8px {
+    gap: 8px;
+  }
+
+  .leve-d_flex {
+    display: flex;
+  }
+
+  .leve-d_grid {
+    display: grid;
+  }
+
+  .leve-w_40px {
+    width: 40px;
+  }
+
+  .leve-w_48px {
+    width: 48px;
+  }
+
+  .icon\:leve-w_30px :where(svg) {
+    width: 30px;
+  }
+
+  .icon\:leve-h_30px :where(svg) {
+    height: 30px;
+  }
+}
+