@nattstack/ui 0.0.30 → 0.0.31

package/dist/components/style.css

@@ -0,0 +1,727 @@
+.Eu3QVW_button_spinner {
+  width: var(--size);
+  height: var(--size);
+  animation: 1s steps(12, end) infinite Eu3QVW_spinner;
+  position: relative;
+  scale: -1 1;
+}
+
+@keyframes Eu3QVW_spinner {
+  to {
+    rotate: 1turn;
+  }
+}
+
+.Eu3QVW_button_spinner > div {
+  width: calc(var(--size) / 2);
+  height: calc(var(--size) / 12);
+  pointer-events: none;
+  transform-origin: 0;
+  transition: all .15s;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  translate: 0 -50%;
+}
+
+.Eu3QVW_button_spinner > div:after {
+  content: "";
+  background-color: currentColor;
+  border-radius: 9999px;
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  right: 0;
+}
+
+.Eu3QVW_button_spinner > div:first-child {
+  opacity: 1;
+  rotate: 0deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(2) {
+  opacity: .925;
+  rotate: 30deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(3) {
+  opacity: .85;
+  rotate: 60deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(4) {
+  opacity: .775;
+  rotate: 90deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(5) {
+  opacity: .7;
+  rotate: 120deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(6) {
+  opacity: .625;
+  rotate: 150deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(7) {
+  opacity: .55;
+  rotate: 180deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(8) {
+  opacity: .475;
+  rotate: 210deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(9) {
+  opacity: .4;
+  rotate: 240deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(10) {
+  opacity: .325;
+  rotate: 270deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(11) {
+  opacity: .25;
+  rotate: 300deg;
+}
+
+.Eu3QVW_button_spinner > div:nth-child(12) {
+  opacity: .15;
+  rotate: 330deg;
+}
+._9qaCYq_button {
+  cursor: pointer;
+  font-family: var(--font-body);
+  height: var(--size-button);
+  outline-color: var(--color-primary-9);
+  outline-offset: 2px;
+  user-select: none;
+  border-style: none;
+  outline-width: 0;
+  outline-style: solid;
+  flex-shrink: 0;
+  justify-content: safe center;
+  align-items: safe center;
+  column-gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  transition-property: background-color, opacity, translate;
+  transition-duration: .15s;
+  display: flex;
+  overflow: hidden;
+}
+
+._9qaCYq_button:active:not(:disabled), ._9qaCYq_button[aria-pressed="true"]:not(:disabled) {
+  translate: 0 1px;
+}
+
+._9qaCYq_button:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+._9qaCYq_button:focus-visible {
+  outline-width: 2px;
+}
+
+._9qaCYq_button > svg {
+  --size-icon: 20px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+
+._9qaCYq_button__icon_only {
+  width: var(--size-button) !important;
+  padding: 0 !important;
+}
+
+._9qaCYq_button__rounded_base {
+  border-radius: 12px;
+}
+
+._9qaCYq_button__rounded_full {
+  border-radius: 9999px !important;
+}
+
+._9qaCYq_button__size_32 {
+  --size-button: 32px;
+  border-radius: 6px;
+  padding: 0 10px;
+}
+
+._9qaCYq_button__size_36 {
+  --size-button: 36px;
+  border-radius: 8px;
+  padding: 0 12px;
+}
+
+._9qaCYq_button__size_40 {
+  --size-button: 40px;
+  border-radius: 10px;
+  padding: 0 14px;
+}
+
+._9qaCYq_button__size_44 {
+  --size-button: 44px;
+  border-radius: 12px;
+  padding: 0 16px;
+}
+
+._9qaCYq_button__size_48 {
+  --size-button: 48px;
+  border-radius: 14px;
+  padding: 0 18px;
+}
+
+._9qaCYq_button__variant_ghost {
+  color: #000;
+  background-color: #0000;
+}
+
+._9qaCYq_button__variant_ghost:active:not(:disabled), ._9qaCYq_button__variant_ghost:hover:not(:disabled), ._9qaCYq_button__variant_ghost[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--color-gray-3);
+}
+
+.dark ._9qaCYq_button__variant_ghost {
+  color: #fff;
+}
+
+._9qaCYq_button__variant_primary {
+  color: #fff;
+  background-color: var(--color-primary-9);
+  background-image: linear-gradient(oklab(100% 0 5.96046e-8 / .0476191) 50%, oklab(0% 0 0 / 0) 50%);
+}
+
+._9qaCYq_button__variant_primary:active:not(:disabled), ._9qaCYq_button__variant_primary:hover:not(:disabled), ._9qaCYq_button__variant_primary[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-primary-9) 100%, #fff 10%);
+}
+
+.dark ._9qaCYq_button__variant_primary {
+  background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0476191) 50%);
+}
+
+._9qaCYq_button__variant_secondary {
+  color: #000;
+  background-color: var(--color-gray-2);
+  box-shadow: 0 0 0 1px var(--color-gray-4) inset;
+  background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0196078) 50%);
+}
+
+._9qaCYq_button__variant_secondary:active:not(:disabled), ._9qaCYq_button__variant_secondary:hover:not(:disabled), ._9qaCYq_button__variant_secondary[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--color-gray-3);
+}
+
+.dark ._9qaCYq_button__variant_secondary {
+  color: #fff;
+  background-image: linear-gradient(oklab(100% 0 5.96046e-8 / .00990099) 50%, oklab(0% 0 0 / 0) 50%);
+}
+
+._9qaCYq_button__width_base {
+  width: max-content;
+}
+
+._9qaCYq_button__width_full {
+  width: 100%;
+}
+._1ANk3W_column {
+  flex-direction: column;
+  display: flex;
+}
+.eSc3Ma_dialog_responsive_backdrop {
+  --backdrop-opacity: .25;
+  opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
+  outline-color: var(--color-primary-9);
+  background-color: #000;
+  transition-property: opacity;
+  transition-duration: .15s;
+  position: fixed;
+  inset: 0;
+}
+
+.eSc3Ma_dialog_responsive_backdrop[data-ending-style], .eSc3Ma_dialog_responsive_backdrop[data-starting-style] {
+  opacity: 0;
+}
+
+.eSc3Ma_dialog_responsive_backdrop[data-ending-style] {
+  transition-duration: calc(var(--drawer-swipe-strength) * .4s);
+}
+
+.eSc3Ma_dialog_responsive_backdrop[data-swiping] {
+  transition-duration: 0s;
+}
+
+.dark .eSc3Ma_dialog_responsive_backdrop {
+  --backdrop-opacity: .75;
+}
+.jTrvVq_dialog_responsive_bar {
+  background-color: var(--color-gray-4);
+  border-radius: 9999px;
+  width: 48px;
+  height: 4px;
+  margin: 12px auto;
+  display: none;
+}
+
+@media (width <= 640px) {
+  .jTrvVq_dialog_responsive_bar {
+    display: block;
+  }
+}
+._5Oatkq_dialog_responsive_portal {
+  isolation: isolate;
+  z-index: 30;
+  position: relative;
+}
+.xMwQyW_dialog_responsive_viewport {
+  cursor: pointer;
+  justify-content: safe center;
+  align-items: safe center;
+  padding: 24px;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+@media (width <= 640px) {
+  .xMwQyW_dialog_responsive_viewport {
+    align-items: safe flex-end;
+    padding: 48px 0 0;
+  }
+}
+._G8xla_dialog_responsive_popup {
+  background-color: var(--color-gray-1);
+  cursor: auto;
+  outline-color: var(--color-primary-9);
+  outline-offset: -4px;
+  will-change: opacity, transform;
+  border-radius: 16px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-direction: column;
+  width: 100%;
+  max-width: 640px;
+  padding: 16px;
+  transition-property: opacity, transform;
+  transition-duration: .15s;
+  display: flex;
+}
+
+._G8xla_dialog_responsive_popup:focus-visible {
+  outline-width: 2px;
+}
+
+._G8xla_dialog_responsive_popup[data-ending-style], ._G8xla_dialog_responsive_popup[data-starting-style] {
+  opacity: 0;
+  transform: scale(.975);
+}
+
+._G8xla_dialog_responsive_popup[data-swiping] {
+  user-select: none;
+}
+
+@media (width <= 640px) {
+  ._G8xla_dialog_responsive_popup {
+    --radius-mobile: 24px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: var(--radius-mobile);
+    border-top-right-radius: var(--radius-mobile);
+    transform: translateY(var(--drawer-swipe-movement-y));
+    padding-top: 0;
+    transition-property: transform;
+    transition-duration: .45s;
+    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
+  }
+
+  ._G8xla_dialog_responsive_popup[data-ending-style], ._G8xla_dialog_responsive_popup[data-starting-style] {
+    opacity: 1;
+    transform: scale(1) translateY(100%);
+  }
+
+  ._G8xla_dialog_responsive_popup[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * .3s);
+  }
+}
+.dWvcHW_input {
+  appearance: none;
+  background-color: var(--color-bg-primary);
+  box-shadow: 0 0 0 1px var(--color-border) inset;
+  color: var(--color-text-primary);
+  cursor: text;
+  font-family: var(--font-body);
+  outline-offset: -2px;
+  border-style: none;
+  outline: 2px solid #0000;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-decoration: none;
+  transition-property: box-shadow, opacity;
+  transition-duration: .15s;
+}
+
+.dWvcHW_input::placeholder {
+  color: var(--color-gray-9);
+  user-select: none;
+}
+
+.dWvcHW_input:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.dWvcHW_input:enabled:active, .dWvcHW_input:enabled:focus, .dWvcHW_input:enabled:hover, .dWvcHW_input:enabled[data-is-active="true"] {
+  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
+}
+
+.dWvcHW_input[data-is-valid="true"] {
+  outline-color: #30a46c;
+}
+
+.dWvcHW_input[data-is-invalid="true"] {
+  outline-color: #e5484d;
+}
+
+.dWvcHW_input:focus-visible {
+  outline-color: var(--color-outline);
+}
+
+.dWvcHW_input__rounded_base {
+  border-radius: 12px;
+}
+
+.dWvcHW_input__rounded_full {
+  border-radius: 9999px;
+}
+
+.dWvcHW_input__size_32 {
+  border-radius: 8px;
+  min-height: 32px;
+  padding: 0 8px;
+}
+
+.dWvcHW_input__size_36 {
+  border-radius: 10px;
+  min-height: 36px;
+  padding: 0 10px;
+}
+
+.dWvcHW_input__size_40 {
+  border-radius: 12px;
+  min-height: 40px;
+  padding: 0 12px;
+}
+
+.dWvcHW_input__size_44 {
+  border-radius: 14px;
+  min-height: 44px;
+  padding: 0 14px;
+}
+
+.dWvcHW_input__size_48 {
+  border-radius: 16px;
+  min-height: 48px;
+  padding: 0 16px;
+}
+.x4PeXa_label {
+  color: var(--color-text-secondary);
+  width: fit-content;
+  font-size: 14px;
+}
+.sYCFIW_row {
+  flex-direction: row;
+  display: flex;
+}
+.nFLKVq_spacer {
+  flex-shrink: 0;
+}
+.R3gLLG_switch {
+  background-color: var(--color-gray-6);
+  cursor: pointer;
+  outline-color: var(--color-primary-9);
+  outline-offset: 2px;
+  border-radius: 9999px;
+  outline-width: 0;
+  outline-style: solid;
+  padding: 2px;
+  transition-property: background-color;
+  transition-duration: .15s;
+  display: flex;
+  overflow: hidden;
+}
+
+.R3gLLG_switch:focus-visible {
+  outline-width: 2px;
+}
+
+.R3gLLG_switch[data-checked] {
+  background-color: var(--color-primary-9);
+}
+
+.R3gLLG_switch[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.R3gLLG_switch__thumb {
+  aspect-ratio: 1;
+  background-color: #fff;
+  border-radius: 9999px;
+  height: 100%;
+  transition-property: transform;
+  transition-duration: .15s;
+}
+
+.R3gLLG_switch__thumb[data-checked] {
+  transform: translateX(var(--translateX));
+}
+
+.R3gLLG_switch__size_18 {
+  --translateX: 12px;
+  width: 30px;
+  height: 18px;
+}
+
+.R3gLLG_switch__size_24 {
+  --translateX: 16px;
+  width: 40px;
+  height: 24px;
+}
+.Dg56ja_tabs_pill_indicator {
+  background-color: var(--color-gray-12);
+  height: var(--active-tab-height);
+  left: var(--active-tab-left);
+  top: var(--active-tab-top);
+  width: var(--active-tab-width);
+  z-index: -1;
+  border-radius: 12px;
+  transition-property: left, width;
+  transition-duration: .15s;
+  position: absolute;
+}
+.I12aAq_tabs_pill_list {
+  isolation: isolate;
+  column-gap: 8px;
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+}
+.ABaxVG_tabs_pill_tab {
+  border-radius: var(--border-radius);
+  color: #000;
+  cursor: pointer;
+  outline-color: var(--color-primary-9);
+  outline-offset: -4px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  column-gap: 8px;
+  height: 40px;
+  padding: 0 14px;
+  font-size: 14px;
+  font-weight: 500;
+  transition-property: background-color, color;
+  transition-duration: .15s;
+  display: flex;
+}
+
+.ABaxVG_tabs_pill_tab:focus-visible {
+  outline-width: 2px;
+}
+
+.ABaxVG_tabs_pill_tab:hover {
+  background-color: var(--color-gray-4);
+}
+
+.ABaxVG_tabs_pill_tab[data-active] {
+  color: #fff;
+  background-color: #0000;
+}
+
+.dark .ABaxVG_tabs_pill_tab {
+  color: #fff;
+}
+
+.dark .ABaxVG_tabs_pill_tab[data-active] {
+  color: #000;
+}
+
+.ABaxVG_tabs_pill_tab > svg {
+  --size-icon: 16px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+
+.ABaxVG_tabs_pill_tab_wrapper {
+  --border-radius: 12px;
+  border-radius: var(--border-radius);
+  flex-shrink: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.ABaxVG_tabs_pill_tab_background {
+  background-color: var(--color-gray-3);
+  z-index: -2;
+  position: absolute;
+  inset: 0;
+}
+.wVi_Qq_tabs_segmented_indicator {
+  background-color: var(--color-gray-1);
+  height: var(--active-tab-height);
+  left: var(--active-tab-left);
+  top: var(--active-tab-top);
+  width: var(--active-tab-width);
+  z-index: -1;
+  border-radius: 10px;
+  transition-property: left, width;
+  transition-duration: .15s;
+  position: absolute;
+}
+.AZApxW_tabs_segmented_list {
+  background-color: var(--color-gray-3);
+  isolation: isolate;
+  border-radius: 12px;
+  width: fit-content;
+  height: 40px;
+  padding: 2px;
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+}
+.MWdXWq_tabs_segmented_tab {
+  color: var(--color-gray-11);
+  cursor: pointer;
+  outline-color: var(--color-primary-9);
+  outline-offset: -4px;
+  border-radius: 10px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  column-gap: 8px;
+  height: 100%;
+  padding: 0 14px;
+  font-size: 14px;
+  font-weight: 500;
+  transition-property: color;
+  transition-duration: .15s;
+  display: flex;
+}
+
+.MWdXWq_tabs_segmented_tab:focus-visible {
+  outline-width: 2px;
+}
+
+.MWdXWq_tabs_segmented_tab:hover, .MWdXWq_tabs_segmented_tab[data-active] {
+  color: var(--color-gray-12);
+}
+
+.MWdXWq_tabs_segmented_tab > svg {
+  --size-icon: 16px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+.Y_MyBG_tabs_underline_indicator {
+  background-color: var(--color-primary-9);
+  height: 2px;
+  bottom: 0;
+  left: var(--active-tab-left);
+  width: var(--active-tab-width);
+  transition-property: left, width;
+  transition-duration: .15s;
+  position: absolute;
+}
+.z1YTsW_tabs_underline_list {
+  border-bottom-color: var(--color-gray-4);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+}
+.RxaKNW_tabs_underline_tab {
+  color: var(--color-gray-11);
+  cursor: pointer;
+  outline-color: var(--color-primary-9);
+  outline-offset: -2px;
+  border-radius: 8px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-shrink: 0;
+  align-items: center;
+  column-gap: 8px;
+  margin-bottom: 6px;
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  transition-property: color;
+  transition-duration: .15s;
+  display: flex;
+}
+
+.RxaKNW_tabs_underline_tab:focus-visible {
+  outline-width: 2px;
+}
+
+.RxaKNW_tabs_underline_tab:hover, .RxaKNW_tabs_underline_tab[data-active] {
+  color: var(--color-gray-12);
+}
+
+.RxaKNW_tabs_underline_tab > svg {
+  --size-icon: 16px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+.Zs0xEq_tabs {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+.dWZGWq_tabs_panel {
+  outline-color: var(--color-primary-9);
+  outline-offset: -2px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-direction: column;
+  display: flex;
+}
+
+.dWZGWq_tabs_panel:focus-visible {
+  outline-width: 2px;
+}
+.JqpxFq_textarea {
+  resize: vertical;
+  height: auto;
+  min-height: 66px;
+  max-height: none;
+  padding: 12px !important;
+}
+.j-Z8kW_tooltip_content {
+  background-color: var(--color-gray-dark-1);
+  color: var(--color-gray-dark-12);
+  border-radius: 8px;
+  padding: 4px 8px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.j-Z8kW_tooltip_content_positioner {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.dark .j-Z8kW_tooltip_content {
+  background-color: var(--color-gray-light-1);
+  color: var(--color-gray-light-12);
+}