@kimdw-rtk/ui 0.0.22 → 0.0.24

package/dist/assets/src/components/Navigation/NavigationBar.css.ts.vanilla-CIWo8PT9.css

@@ -0,0 +1,25 @@
+@layer components;
+@layer components {
+  .NavigationBar_layeredBase__x4q5x91 {
+    z-index: 20;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    border-bottom: 1px solid rgb(var(--color-border\.weak__n6e2fs4));
+    background-color: rgba(var(--color-background__n6e2fs1), 0.75);
+    backdrop-filter: blur(2rem) saturate(150%);
+    color: rgb(var(--color-border__n6e2fs3));
+    transition: border-bottom-color 0.2s ease;
+    container-type: inline-size;
+    container-name: NavigationBar_navigationBarContainer__x4q5x90;
+  }
+  .NavigationBar_styleWithLayer__x4q5x92 {
+    height: 4em;
+  }
+  .NavigationBar_styleWithLayer__x4q5x93 {
+    height: 5em;
+  }
+  .NavigationBar_styleWithLayer__x4q5x94 {
+    height: 6em;
+  }
+}

package/dist/assets/src/components/Navigation/NavigationContainer.css.ts.vanilla-D_Mh6uxB.css

@@ -0,0 +1,8 @@
+.NavigationContainer_container__1s3m4g70 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  height: 100%;
+  margin: 0 auto;
+}

package/dist/assets/src/components/Navigation/NavigationDrawer.css.ts.vanilla-C0bcZ6aX.css

@@ -0,0 +1,41 @@
+@layer components;
+@layer components {
+  .NavigationDrawer_styleWithLayer__1190lva0 {
+    display: none;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5em;
+    flex-grow: 1;
+  }
+  .NavigationDrawer_layeredBase__1190lva2 {
+    position: absolute;
+    top: 100%;
+    height: calc(100vh - 100%);
+    left: 0;
+    width: 100%;
+    z-index: 100;
+    max-height: 100vh;
+    padding: 0.75em;
+    border-bottom: 1px solid rgb(var(--color-border__n6e2fs3));
+    background-color: rgb(var(--color-background__n6e2fs1));
+    transition: opacity 0.2s ease;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva3 {
+    opacity: 1;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva4 {
+    opacity: 0;
+    pointer-events: none;
+  }
+  @container NavigationBar_navigationBarContainer__x4q5x90 (max-width: 800px) {
+    .NavigationDrawer_styleWithLayer__1190lva0 {
+      display: block;
+    }
+    .NavigationDrawer_styleWithLayer__1190lva1 {
+      display: none;
+    }
+  }
+}

package/dist/assets/src/components/Navigation/NavigationItem.css.ts.vanilla-B8sDhdDM.css

@@ -0,0 +1,25 @@
+@layer components;
+@layer components {
+  .NavigationItem_layeredBase__1epy0hz0 {
+    position: relative;
+    line-height: 0;
+    padding: 0.75em;
+    font-size: 0.9375em;
+    font-weight: 600;
+    transition: color 0.2s ease;
+    cursor: pointer;
+  }
+  .NavigationItem_layeredBase__1epy0hz0:hover {
+    color: rgb(var(--color-foreground__n6e2fs2));
+  }
+  .NavigationDrawer_styleWithLayer__1190lva0 .NavigationItem_layeredBase__1epy0hz0 {
+    padding: 1.5em 0.75em;
+    font-size: 1.125em;
+  }
+  .NavigationItem_styleWithLayer__1epy0hz1 {
+    color: rgb(var(--color-secondary-foreground__n6e2fsa));
+  }
+  .NavigationItem_styleWithLayer__1epy0hz2 {
+    color: rgba(var(--color-secondary-foreground__n6e2fsa), 0.5);
+  }
+}

package/dist/assets/src/components/Navigation/NavigationLogo.css.ts.vanilla-CDfEsRyO.css

@@ -0,0 +1,6 @@
+@layer components;
+@layer components {
+  .NavigationLogo_styleWithLayer__1u9v1830 {
+    margin-right: 0.5em;
+  }
+}

package/dist/assets/src/components/Navigation/NavigationMenu.css.ts.vanilla-DMG1nMNx.css

@@ -0,0 +1,16 @@
+@layer components;
+@layer components {
+  .NavigationMenu_styleWithLayer__rsojes0 {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+  .NavigationDrawer_styleWithLayer__1190lva0 .NavigationMenu_styleWithLayer__rsojes0 {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    width: 100%;
+    border-top: 1px solid rgb(var(--color-border\.weak__n6e2fs4));
+    padding-top: 0.5em;
+  }
+}

package/dist/assets/src/components/Range/Range.css.ts.vanilla-CuL4CEBH.css

@@ -0,0 +1,152 @@
+@layer components;
+@layer components {
+  .Range_styleWithLayer__biyxwo1 {
+    --backgroundVar__biyxwo0: var(--color-primary__n6e2fs7);
+  }
+  .Range_styleWithLayer__biyxwo2 {
+    --backgroundVar__biyxwo0: var(--color-secondary__n6e2fs9);
+  }
+  .Range_styleWithLayer__biyxwo3 {
+    --backgroundVar__biyxwo0: var(--color-muted__n6e2fsb);
+  }
+  .Range_styleWithLayer__biyxwo4 {
+    --backgroundVar__biyxwo0: var(--color-accent__n6e2fsd);
+  }
+  .Range_styleWithLayer__biyxwo5 {
+    --backgroundVar__biyxwo0: var(--color-card__n6e2fsf);
+  }
+  .Range_styleWithLayer__biyxwo6 {
+    --backgroundVar__biyxwo0: var(--color-danger__n6e2fsh);
+  }
+  .Range_styleWithLayer__biyxwo7 {
+    --backgroundVar__biyxwo0: var(--color-warning__n6e2fsj);
+  }
+  .Range_styleWithLayer__biyxwo8 {
+    --backgroundVar__biyxwo0: var(--color-success__n6e2fsl);
+  }
+  .Range_styleWithLayer__biyxwo9 {
+    --backgroundVar__biyxwo0: var(--color-red-100__n6e2fso);
+  }
+  .Range_styleWithLayer__biyxwoa {
+    --backgroundVar__biyxwo0: var(--color-orange-100__n6e2fsz);
+  }
+  .Range_styleWithLayer__biyxwob {
+    --backgroundVar__biyxwo0: var(--color-amber-100__n6e2fs1a);
+  }
+  .Range_styleWithLayer__biyxwoc {
+    --backgroundVar__biyxwo0: var(--color-yellow-100__n6e2fs1l);
+  }
+  .Range_styleWithLayer__biyxwod {
+    --backgroundVar__biyxwo0: var(--color-lime-100__n6e2fs1w);
+  }
+  .Range_styleWithLayer__biyxwoe {
+    --backgroundVar__biyxwo0: var(--color-green-100__n6e2fs27);
+  }
+  .Range_styleWithLayer__biyxwof {
+    --backgroundVar__biyxwo0: var(--color-emerald-100__n6e2fs2i);
+  }
+  .Range_styleWithLayer__biyxwog {
+    --backgroundVar__biyxwo0: var(--color-teal-100__n6e2fs2t);
+  }
+  .Range_styleWithLayer__biyxwoh {
+    --backgroundVar__biyxwo0: var(--color-cyan-100__n6e2fs34);
+  }
+  .Range_styleWithLayer__biyxwoi {
+    --backgroundVar__biyxwo0: var(--color-sky-100__n6e2fs3f);
+  }
+  .Range_styleWithLayer__biyxwoj {
+    --backgroundVar__biyxwo0: var(--color-blue-100__n6e2fs3q);
+  }
+  .Range_styleWithLayer__biyxwok {
+    --backgroundVar__biyxwo0: var(--color-indigo-100__n6e2fs41);
+  }
+  .Range_styleWithLayer__biyxwol {
+    --backgroundVar__biyxwo0: var(--color-violet-100__n6e2fs4c);
+  }
+  .Range_styleWithLayer__biyxwom {
+    --backgroundVar__biyxwo0: var(--color-purple-100__n6e2fs4n);
+  }
+  .Range_styleWithLayer__biyxwon {
+    --backgroundVar__biyxwo0: var(--color-fuchsia-100__n6e2fs4y);
+  }
+  .Range_styleWithLayer__biyxwoo {
+    --backgroundVar__biyxwo0: var(--color-pink-100__n6e2fs59);
+  }
+  .Range_styleWithLayer__biyxwop {
+    --backgroundVar__biyxwo0: var(--color-rose-100__n6e2fs5k);
+  }
+  .Range_styleWithLayer__biyxwoq {
+    --backgroundVar__biyxwo0: var(--color-slate-100__n6e2fs5v);
+  }
+  .Range_styleWithLayer__biyxwor {
+    --backgroundVar__biyxwo0: var(--color-gray-100__n6e2fs66);
+  }
+  .Range_styleWithLayer__biyxwos {
+    --backgroundVar__biyxwo0: var(--color-zinc-100__n6e2fs6h);
+  }
+  .Range_styleWithLayer__biyxwot {
+    --backgroundVar__biyxwo0: var(--color-neutral-100__n6e2fs6s);
+  }
+  .Range_styleWithLayer__biyxwou {
+    --backgroundVar__biyxwo0: var(--color-stone-100__n6e2fs73);
+  }
+  .Range_layeredBase__biyxwov {
+    position: relative;
+    width: 100%;
+    height: 2em;
+    user-select: none;
+  }
+  .Range_styleWithLayer__biyxwow {
+    font-size: 0.75em;
+  }
+  .Range_styleWithLayer__biyxwox {
+    font-size: 1em;
+  }
+  .Range_styleWithLayer__biyxwoy {
+    font-size: 1.25em;
+  }
+  .Range_styleWithLayer__biyxwo1x {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 50%;
+    box-shadow: 0 0 0.375em 0.125em rgba(var(--backgroundVar__biyxwo0), 0.33);
+    background-color: rgb(var(--backgroundVar__biyxwo0));
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+  }
+  .Range_styleWithLayer__biyxwo1x::before {
+    content: "";
+    position: absolute;
+    inset: -0.75em;
+  }
+  .Range_styleWithLayer__biyxwo1x::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0.5em 0.125em rgba(var(--backgroundVar__biyxwo0), 0.5);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  .Range_styleWithLayer__biyxwo1x:hover::after {
+    opacity: 1;
+  }
+  .Range_styleWithLayer__biyxwo1y {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background-color: rgb(var(--backgroundVar__biyxwo0));
+  }
+  .Range_styleWithLayer__biyxwo1z {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    height: 0.5em;
+    border-radius: var(--borderRadius__n6e2fs0);
+    background-color: rgb(var(--color-muted__n6e2fsb));
+    transform: translateY(-50%);
+  }
+}

package/dist/assets/src/components/ScrollArea/ScrollArea.css.ts.vanilla-Cj6CJqL6.css

@@ -0,0 +1,32 @@
+@layer components;
+.ScrollArea_maskLeft__m6lfro1 {
+  mask-image: linear-gradient(to left,
+black 0%,
+black calc(100% - 3rem),
+transparent 100%);
+}
+.ScrollArea_maskRight__m6lfro2 {
+  mask-image: linear-gradient(to right,
+black 0%,
+black calc(100% - 3rem),
+transparent 100%);
+}
+.ScrollArea_maskBoth__m6lfro3 {
+  mask-image: linear-gradient(to right,
+transparent 0%,
+black 3rem,
+black calc(100% - 3rem),
+transparent 100%);
+}
+.ScrollArea_wrapper__m6lfro4 {
+  width: max-content;
+}
+@layer components {
+  .ScrollArea_styleWithLayer__m6lfro0 {
+    width: 100%;
+    overflow-x: scroll;
+  }
+  .ScrollArea_styleWithLayer__m6lfro0::-webkit-scrollbar {
+    display: none;
+  }
+}

package/dist/assets/src/components/Select/Select.css.ts.vanilla-BaHmnuCn.css

@@ -0,0 +1,15 @@
+@layer components;
+@layer components {
+  .Select_layeredBase__7k9d9e0 {
+    position: relative;
+  }
+  .Select_styleWithLayer__7k9d9e1 {
+    font-size: 0.875em;
+  }
+  .Select_styleWithLayer__7k9d9e2 {
+    font-size: 1em;
+  }
+  .Select_styleWithLayer__7k9d9e3 {
+    font-size: 1.125em;
+  }
+}

package/dist/assets/src/components/Select/SelectOption.css.ts.vanilla-AyA2p0kJ.css

@@ -0,0 +1,11 @@
+@layer components;
+@layer components {
+  .SelectOption_styleWithLayer__16jsez30 {
+    padding: 0.75em 0.5em;
+    transition: background-color 0.2s ease;
+    cursor: default;
+  }
+  .SelectOption_styleWithLayer__16jsez30:hover {
+    background-color: rgb(var(--color-accent__n6e2fsd));
+  }
+}

package/dist/assets/src/components/Select/SelectOptionList.css.ts.vanilla-B4SUP6QX.css

@@ -0,0 +1,47 @@
+@keyframes SelectOptionList_fadeIn__yft69m0 {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@layer components;
+@layer components {
+  .SelectOptionList_layeredBase__yft69m1 {
+    overflow-y: auto;
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+    min-width: max-content;
+    border: 1px solid rgb(var(--color-border__n6e2fs3));
+    border-radius: var(--borderRadius__n6e2fs0);
+    margin: 0.5rem 0;
+    background-color: rgb(var(--color-background__n6e2fs1));
+    animation: SelectOptionList_fadeIn__yft69m0 0.3s ease 1;
+    transform-origin: 0 0;
+    user-select: none;
+  }
+  .SelectOptionList_layeredBase__yft69m1::-webkit-scrollbar {
+    width: 0.25rem;
+    height: 0.25rem;
+  }
+  .SelectOptionList_layeredBase__yft69m1::-webkit-scrollbar-thumb {
+    border-radius: 0.5rem;
+    background-color: rgb(var(--color-muted-foreground__n6e2fsc));
+  }
+  .SelectOptionList_styleWithLayer__yft69m2 {
+    display: block;
+  }
+  .SelectOptionList_styleWithLayer__yft69m3 {
+    display: none;
+  }
+  .SelectOptionList_styleWithLayer__yft69m4 {
+    top: 100%;
+  }
+  .SelectOptionList_styleWithLayer__yft69m5 {
+    bottom: 100%;
+  }
+}

package/dist/assets/src/components/Select/SelectTrigger.css.ts.vanilla-BsJygMMX.css

@@ -0,0 +1,42 @@
+.SelectTrigger_children__1uw63tl0 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.SelectTrigger_icon__1uw63tl1 {
+  flex-shrink: 0;
+  line-height: 0;
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+.SelectTrigger_icon_isActive_false__1uw63tl2 {
+  transform: rotate(0);
+}
+.SelectTrigger_icon_isActive_true__1uw63tl3 {
+  color: rgb(var(--color-primary__n6e2fs7));
+  transform: rotate(-180deg);
+}
+.SelectTrigger_selectTrigger__1uw63tl4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  justify-content: space-between;
+  width: 100%;
+  transition: border-color 0.2s ease;
+  cursor: pointer;
+  user-select: none;
+}
+.SelectTrigger_selectTrigger_isActive_true__1uw63tl5 {
+  border-color: rgb(var(--color-primary__n6e2fs7));
+}
+.SelectTrigger_selectTrigger_variant_contained__1uw63tl6 {
+  padding: 0.75em 0.75em;
+  border-radius: var(--borderRadius__n6e2fs0);
+  background-color: rgb(var(--color-secondary__n6e2fs9));
+}
+.SelectTrigger_selectTrigger_variant_outlined__1uw63tl7 {
+  padding: 0.75em 0.5em;
+  border: 1px solid;
+  border-color: rgb(var(--color-border__n6e2fs3));
+  border-radius: var(--borderRadius__n6e2fs0);
+  background-color: rgb(var(--color-background__n6e2fs1));
+}

package/dist/assets/src/components/Skeleton/Skeleton.css.ts.vanilla-CIMdGwKw.css

@@ -0,0 +1,19 @@
+@keyframes Skeleton_shimmer__a0ivc30 {
+  0% {
+    background-position: -300% 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}
+@layer components;
+@layer components {
+  .Skeleton_styleWithLayer__a0ivc31 {
+    display: block;
+    max-width: 100%;
+    border-radius: var(--borderRadius__n6e2fs0);
+    background: linear-gradient(90deg, rgba(var(--color-accent__n6e2fsd), 0.4) 30%, rgba(var(--color-accent__n6e2fsd), 0.2) 65%, rgba(var(--color-accent__n6e2fsd), 0.4));
+    background-size: 300% 100%;
+    animation: Skeleton_shimmer__a0ivc30 5s linear 0s infinite;
+  }
+}

package/dist/assets/src/components/Table/Table.css.ts.vanilla-D-ufMKzq.css

@@ -0,0 +1,8 @@
+@layer components;
+@layer components {
+  .Table_styleWithLayer__cuva6j0 {
+    width: 100%;
+    table-layout: fixed;
+    border-spacing: 0;
+  }
+}

package/dist/assets/src/components/Table/TableCell.css.ts.vanilla-Bj9LamuH.css

@@ -0,0 +1,29 @@
+@layer components;
+@layer components {
+  .TableCell_styleWithLayer__1a6tmtd0 {
+    padding: 0.5em;
+    transition: background-color 0.1s ease, color 0.1s ease;
+  }
+  .TableRow_styleWithLayer__1ntlunj0 > .TableCell_styleWithLayer__1a6tmtd0 {
+    cursor: pointer;
+  }
+  tr > .TableCell_styleWithLayer__1a6tmtd0:first-child {
+    border-top-left-radius: var(--borderRadius__n6e2fs0);
+    border-bottom-left-radius: var(--borderRadius__n6e2fs0);
+  }
+  tr > .TableCell_styleWithLayer__1a6tmtd0:last-child {
+    border-top-right-radius: var(--borderRadius__n6e2fs0);
+    border-bottom-right-radius: var(--borderRadius__n6e2fs0);
+  }
+  tbody > tr:hover > .TableCell_styleWithLayer__1a6tmtd0 {
+    background-color: rgb(var(--color-accent__n6e2fsd));
+    color: rgb(var(--color-accent-foreground__n6e2fse));
+  }
+  .Table_styleWithLayer__cuva6j1 > tbody > tr:nth-of-type(odd) > .TableCell_styleWithLayer__1a6tmtd0 {
+    background-color: rgb(var(--color-card__n6e2fsf));
+    color: rgb(var(--color-accent-foreground__n6e2fse));
+  }
+  .Table_styleWithLayer__cuva6j1 > tbody > tr:nth-of-type(odd):hover > .TableCell_styleWithLayer__1a6tmtd0 {
+    background-color: rgb(var(--color-accent__n6e2fsd));
+  }
+}

package/dist/assets/src/components/Table/TableHead.css.ts.vanilla-UQ-15lSo.css

@@ -0,0 +1,9 @@
+@layer components;
+@layer components {
+  .TableHead_styleWithLayer__1sk0un50 {
+    padding: 0.5em 0.625em;
+    color: rgb(var(--color-accent-foreground__n6e2fse));
+    font-size: 0.9375em;
+    font-weight: 500;
+  }
+}

package/dist/assets/src/components/Table/TableRow.css.ts.vanilla-C40POryZ.css

@@ -0,0 +1,4 @@
+@layer components;
+@layer components {
+
+}

package/dist/assets/src/components/Tabs/TabsList.css.ts.vanilla-ZS6oU-aI.css

@@ -0,0 +1,9 @@
+@layer components;
+@layer components {
+  .TabsList_styleWithLayer__9gciwt0 {
+    display: flex;
+    height: 2.5em;
+    box-shadow: inset 0 -0.125em 0 rgb(var(--color-muted__n6e2fsb));
+    background-color: rgb(var(--color-background__n6e2fs1));
+  }
+}

package/dist/assets/src/components/Tabs/TabsTrigger.css.ts.vanilla-BqYCvzGu.css

@@ -0,0 +1,24 @@
+@layer components;
+@layer components {
+  .TabsTrigger_layeredBase__rk5ejr0 {
+    overflow: hidden;
+    height: 100%;
+    padding: 0 0.75em;
+    border: 0;
+    border-bottom: 0.125rem solid;
+    background-color: transparent;
+    font-size: 1em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: border-bottom-color 0.15s ease, color 0.15s ease;
+    cursor: pointer;
+  }
+  .TabsTrigger_styleWithLayer__rk5ejr1 {
+    border-bottom-color: rgb(var(--color-foreground__n6e2fs2));
+    color: rgb(var(--color-foreground__n6e2fs2));
+  }
+  .TabsTrigger_styleWithLayer__rk5ejr2 {
+    border-bottom-color: transparent;
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+  }
+}

package/dist/assets/src/components/TextField/TextField.css.ts.vanilla-BfCzKhrn.css

@@ -0,0 +1,120 @@
+@layer components;
+@layer components {
+  .TextField_styleWithLayer__q8l7gt1 {
+    --backgroundVar__q8l7gt0: var(--color-primary__n6e2fs7);
+  }
+  .TextField_styleWithLayer__q8l7gt2 {
+    --backgroundVar__q8l7gt0: var(--color-secondary__n6e2fs9);
+  }
+  .TextField_styleWithLayer__q8l7gt3 {
+    --backgroundVar__q8l7gt0: var(--color-muted__n6e2fsb);
+  }
+  .TextField_styleWithLayer__q8l7gt4 {
+    --backgroundVar__q8l7gt0: var(--color-accent__n6e2fsd);
+  }
+  .TextField_styleWithLayer__q8l7gt5 {
+    --backgroundVar__q8l7gt0: var(--color-card__n6e2fsf);
+  }
+  .TextField_styleWithLayer__q8l7gt6 {
+    --backgroundVar__q8l7gt0: var(--color-danger__n6e2fsh);
+  }
+  .TextField_styleWithLayer__q8l7gt7 {
+    --backgroundVar__q8l7gt0: var(--color-warning__n6e2fsj);
+  }
+  .TextField_styleWithLayer__q8l7gt8 {
+    --backgroundVar__q8l7gt0: var(--color-success__n6e2fsl);
+  }
+  .TextField_styleWithLayer__q8l7gt9 {
+    --backgroundVar__q8l7gt0: var(--color-red-500__n6e2fss);
+  }
+  .TextField_styleWithLayer__q8l7gta {
+    --backgroundVar__q8l7gt0: var(--color-orange-500__n6e2fs13);
+  }
+  .TextField_styleWithLayer__q8l7gtb {
+    --backgroundVar__q8l7gt0: var(--color-amber-500__n6e2fs1e);
+  }
+  .TextField_styleWithLayer__q8l7gtc {
+    --backgroundVar__q8l7gt0: var(--color-yellow-500__n6e2fs1p);
+  }
+  .TextField_styleWithLayer__q8l7gtd {
+    --backgroundVar__q8l7gt0: var(--color-lime-500__n6e2fs20);
+  }
+  .TextField_styleWithLayer__q8l7gte {
+    --backgroundVar__q8l7gt0: var(--color-green-500__n6e2fs2b);
+  }
+  .TextField_styleWithLayer__q8l7gtf {
+    --backgroundVar__q8l7gt0: var(--color-emerald-500__n6e2fs2m);
+  }
+  .TextField_styleWithLayer__q8l7gtg {
+    --backgroundVar__q8l7gt0: var(--color-teal-500__n6e2fs2x);
+  }
+  .TextField_styleWithLayer__q8l7gth {
+    --backgroundVar__q8l7gt0: var(--color-cyan-500__n6e2fs38);
+  }
+  .TextField_styleWithLayer__q8l7gti {
+    --backgroundVar__q8l7gt0: var(--color-sky-500__n6e2fs3j);
+  }
+  .TextField_styleWithLayer__q8l7gtj {
+    --backgroundVar__q8l7gt0: var(--color-blue-500__n6e2fs3u);
+  }
+  .TextField_styleWithLayer__q8l7gtk {
+    --backgroundVar__q8l7gt0: var(--color-indigo-500__n6e2fs45);
+  }
+  .TextField_styleWithLayer__q8l7gtl {
+    --backgroundVar__q8l7gt0: var(--color-violet-500__n6e2fs4g);
+  }
+  .TextField_styleWithLayer__q8l7gtm {
+    --backgroundVar__q8l7gt0: var(--color-purple-500__n6e2fs4r);
+  }
+  .TextField_styleWithLayer__q8l7gtn {
+    --backgroundVar__q8l7gt0: var(--color-fuchsia-500__n6e2fs52);
+  }
+  .TextField_styleWithLayer__q8l7gto {
+    --backgroundVar__q8l7gt0: var(--color-pink-500__n6e2fs5d);
+  }
+  .TextField_styleWithLayer__q8l7gtp {
+    --backgroundVar__q8l7gt0: var(--color-rose-500__n6e2fs5o);
+  }
+  .TextField_styleWithLayer__q8l7gtq {
+    --backgroundVar__q8l7gt0: var(--color-slate-500__n6e2fs5z);
+  }
+  .TextField_styleWithLayer__q8l7gtr {
+    --backgroundVar__q8l7gt0: var(--color-gray-500__n6e2fs6a);
+  }
+  .TextField_styleWithLayer__q8l7gts {
+    --backgroundVar__q8l7gt0: var(--color-zinc-500__n6e2fs6l);
+  }
+  .TextField_styleWithLayer__q8l7gtt {
+    --backgroundVar__q8l7gt0: var(--color-neutral-500__n6e2fs6w);
+  }
+  .TextField_styleWithLayer__q8l7gtu {
+    --backgroundVar__q8l7gt0: var(--color-stone-500__n6e2fs77);
+  }
+  .TextField_layeredBase__q8l7gtv {
+    padding: 0.75em 0.5em;
+    border: 1px solid;
+    border-color:  rgb(var(--color-border__n6e2fs3));
+    background-color: rgb(var(--color-background__n6e2fs1));
+    color: rgb(var(--color-foreground__n6e2fs2));
+    transition: border-color 0.15s ease, color 0.15s ease;
+    outline: none;
+  }
+  .TextField_layeredBase__q8l7gtv:focus {
+    border-color: rgb(var(--backgroundVar__q8l7gt0));
+  }
+  .TextField_layeredBase__q8l7gtv:disabled {
+    color: rgb(var(--color-muted-foreground__n6e2fsc));
+  }
+  .TextField_styleWithLayer__q8l7gtw {
+    border-radius: var(--borderRadius__n6e2fs0);
+    font-size: 0.875em;
+  }
+  .TextField_styleWithLayer__q8l7gtx {
+    border-radius: var(--borderRadius__n6e2fs0);
+    font-size: 1em;
+  }
+  .TextField_styleWithLayer__q8l7gty {
+    border-radius: var(--borderRadius__n6e2fs0);
+    font-size: 1.125em;
+  }
+}