@nattstack/ui 0.0.30 → 0.0.32

package/dist/components/style.css

@@ -0,0 +1,727 @@
+.button-spinner-module_button_spinner_Eu3QVW {
+  width: var(--size);
+  height: var(--size);
+  animation: 1s steps(12, end) infinite button-spinner-module_spinner_Eu3QVW;
+  position: relative;
+  scale: -1 1;
+}
+
+@keyframes button-spinner-module_spinner_Eu3QVW {
+  to {
+    rotate: 1turn;
+  }
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > 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%;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:after {
+  content: "";
+  background-color: currentColor;
+  border-radius: 9999px;
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  right: 0;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:first-child {
+  opacity: 1;
+  rotate: 0deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(2) {
+  opacity: .925;
+  rotate: 30deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(3) {
+  opacity: .85;
+  rotate: 60deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(4) {
+  opacity: .775;
+  rotate: 90deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(5) {
+  opacity: .7;
+  rotate: 120deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(6) {
+  opacity: .625;
+  rotate: 150deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(7) {
+  opacity: .55;
+  rotate: 180deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(8) {
+  opacity: .475;
+  rotate: 210deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(9) {
+  opacity: .4;
+  rotate: 240deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(10) {
+  opacity: .325;
+  rotate: 270deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(11) {
+  opacity: .25;
+  rotate: 300deg;
+}
+
+.button-spinner-module_button_spinner_Eu3QVW > div:nth-child(12) {
+  opacity: .15;
+  rotate: 330deg;
+}
+.button-module_button_9qaCYq {
+  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;
+}
+
+.button-module_button_9qaCYq:active:not(:disabled), .button-module_button_9qaCYq[aria-pressed="true"]:not(:disabled) {
+  translate: 0 1px;
+}
+
+.button-module_button_9qaCYq:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.button-module_button_9qaCYq:focus-visible {
+  outline-width: 2px;
+}
+
+.button-module_button_9qaCYq > svg {
+  --size-icon: 20px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+
+.button-module_button__icon_only_9qaCYq {
+  width: var(--size-button) !important;
+  padding: 0 !important;
+}
+
+.button-module_button__rounded_base_9qaCYq {
+  border-radius: 12px;
+}
+
+.button-module_button__rounded_full_9qaCYq {
+  border-radius: 9999px !important;
+}
+
+.button-module_button__size_32_9qaCYq {
+  --size-button: 32px;
+  border-radius: 6px;
+  padding: 0 10px;
+}
+
+.button-module_button__size_36_9qaCYq {
+  --size-button: 36px;
+  border-radius: 8px;
+  padding: 0 12px;
+}
+
+.button-module_button__size_40_9qaCYq {
+  --size-button: 40px;
+  border-radius: 10px;
+  padding: 0 14px;
+}
+
+.button-module_button__size_44_9qaCYq {
+  --size-button: 44px;
+  border-radius: 12px;
+  padding: 0 16px;
+}
+
+.button-module_button__size_48_9qaCYq {
+  --size-button: 48px;
+  border-radius: 14px;
+  padding: 0 18px;
+}
+
+.button-module_button__variant_ghost_9qaCYq {
+  color: #000;
+  background-color: #0000;
+}
+
+.button-module_button__variant_ghost_9qaCYq:active:not(:disabled), .button-module_button__variant_ghost_9qaCYq:hover:not(:disabled), .button-module_button__variant_ghost_9qaCYq[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--color-gray-3);
+}
+
+.dark .button-module_button__variant_ghost_9qaCYq {
+  color: #fff;
+}
+
+.button-module_button__variant_primary_9qaCYq {
+  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%);
+}
+
+.button-module_button__variant_primary_9qaCYq:active:not(:disabled), .button-module_button__variant_primary_9qaCYq:hover:not(:disabled), .button-module_button__variant_primary_9qaCYq[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-primary-9) 100%, #fff 10%);
+}
+
+.dark .button-module_button__variant_primary_9qaCYq {
+  background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0476191) 50%);
+}
+
+.button-module_button__variant_secondary_9qaCYq {
+  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%);
+}
+
+.button-module_button__variant_secondary_9qaCYq:active:not(:disabled), .button-module_button__variant_secondary_9qaCYq:hover:not(:disabled), .button-module_button__variant_secondary_9qaCYq[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--color-gray-3);
+}
+
+.dark .button-module_button__variant_secondary_9qaCYq {
+  color: #fff;
+  background-image: linear-gradient(oklab(100% 0 5.96046e-8 / .00990099) 50%, oklab(0% 0 0 / 0) 50%);
+}
+
+.button-module_button__width_base_9qaCYq {
+  width: max-content;
+}
+
+.button-module_button__width_full_9qaCYq {
+  width: 100%;
+}
+.column-module_column_1ANk3W {
+  flex-direction: column;
+  display: flex;
+}
+.dialog-responsive-backdrop-module_dialog_responsive_backdrop_eSc3Ma {
+  --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;
+}
+
+.dialog-responsive-backdrop-module_dialog_responsive_backdrop_eSc3Ma[data-ending-style], .dialog-responsive-backdrop-module_dialog_responsive_backdrop_eSc3Ma[data-starting-style] {
+  opacity: 0;
+}
+
+.dialog-responsive-backdrop-module_dialog_responsive_backdrop_eSc3Ma[data-ending-style] {
+  transition-duration: calc(var(--drawer-swipe-strength) * .4s);
+}
+
+.dialog-responsive-backdrop-module_dialog_responsive_backdrop_eSc3Ma[data-swiping] {
+  transition-duration: 0s;
+}
+
+.dark .dialog-responsive-backdrop-module_dialog_responsive_backdrop_eSc3Ma {
+  --backdrop-opacity: .75;
+}
+.dialog-responsive-bar-module_dialog_responsive_bar_jTrvVq {
+  background-color: var(--color-gray-4);
+  border-radius: 9999px;
+  width: 48px;
+  height: 4px;
+  margin: 12px auto;
+  display: none;
+}
+
+@media (width <= 640px) {
+  .dialog-responsive-bar-module_dialog_responsive_bar_jTrvVq {
+    display: block;
+  }
+}
+.dialog-responsive-portal-module_dialog_responsive_portal_5Oatkq {
+  isolation: isolate;
+  z-index: 30;
+  position: relative;
+}
+.dialog-responsive-viewport-module_dialog_responsive_viewport_xMwQyW {
+  cursor: pointer;
+  justify-content: safe center;
+  align-items: safe center;
+  padding: 24px;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+@media (width <= 640px) {
+  .dialog-responsive-viewport-module_dialog_responsive_viewport_xMwQyW {
+    align-items: safe flex-end;
+    padding: 48px 0 0;
+  }
+}
+.dialog-responsive-popup-module_dialog_responsive_popup__G8xla {
+  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;
+}
+
+.dialog-responsive-popup-module_dialog_responsive_popup__G8xla:focus-visible {
+  outline-width: 2px;
+}
+
+.dialog-responsive-popup-module_dialog_responsive_popup__G8xla[data-ending-style], .dialog-responsive-popup-module_dialog_responsive_popup__G8xla[data-starting-style] {
+  opacity: 0;
+  transform: scale(.975);
+}
+
+.dialog-responsive-popup-module_dialog_responsive_popup__G8xla[data-swiping] {
+  user-select: none;
+}
+
+@media (width <= 640px) {
+  .dialog-responsive-popup-module_dialog_responsive_popup__G8xla {
+    --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);
+  }
+
+  .dialog-responsive-popup-module_dialog_responsive_popup__G8xla[data-ending-style], .dialog-responsive-popup-module_dialog_responsive_popup__G8xla[data-starting-style] {
+    opacity: 1;
+    transform: scale(1) translateY(100%);
+  }
+
+  .dialog-responsive-popup-module_dialog_responsive_popup__G8xla[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * .3s);
+  }
+}
+.input-module_input_dWvcHW {
+  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;
+}
+
+.input-module_input_dWvcHW::placeholder {
+  color: var(--color-gray-9);
+  user-select: none;
+}
+
+.input-module_input_dWvcHW:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.input-module_input_dWvcHW:enabled:active, .input-module_input_dWvcHW:enabled:focus, .input-module_input_dWvcHW:enabled:hover, .input-module_input_dWvcHW:enabled[data-is-active="true"] {
+  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
+}
+
+.input-module_input_dWvcHW[data-is-valid="true"] {
+  outline-color: #30a46c;
+}
+
+.input-module_input_dWvcHW[data-is-invalid="true"] {
+  outline-color: #e5484d;
+}
+
+.input-module_input_dWvcHW:focus-visible {
+  outline-color: var(--color-outline);
+}
+
+.input-module_input__rounded_base_dWvcHW {
+  border-radius: 12px;
+}
+
+.input-module_input__rounded_full_dWvcHW {
+  border-radius: 9999px;
+}
+
+.input-module_input__size_32_dWvcHW {
+  border-radius: 8px;
+  min-height: 32px;
+  padding: 0 8px;
+}
+
+.input-module_input__size_36_dWvcHW {
+  border-radius: 10px;
+  min-height: 36px;
+  padding: 0 10px;
+}
+
+.input-module_input__size_40_dWvcHW {
+  border-radius: 12px;
+  min-height: 40px;
+  padding: 0 12px;
+}
+
+.input-module_input__size_44_dWvcHW {
+  border-radius: 14px;
+  min-height: 44px;
+  padding: 0 14px;
+}
+
+.input-module_input__size_48_dWvcHW {
+  border-radius: 16px;
+  min-height: 48px;
+  padding: 0 16px;
+}
+.label-module_label_x4PeXa {
+  color: var(--color-text-secondary);
+  width: fit-content;
+  font-size: 14px;
+}
+.row-module_row_sYCFIW {
+  flex-direction: row;
+  display: flex;
+}
+.spacer-module_spacer_nFLKVq {
+  flex-shrink: 0;
+}
+.switch-module_switch_R3gLLG {
+  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;
+}
+
+.switch-module_switch_R3gLLG:focus-visible {
+  outline-width: 2px;
+}
+
+.switch-module_switch_R3gLLG[data-checked] {
+  background-color: var(--color-primary-9);
+}
+
+.switch-module_switch_R3gLLG[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.switch-module_switch__thumb_R3gLLG {
+  aspect-ratio: 1;
+  background-color: #fff;
+  border-radius: 9999px;
+  height: 100%;
+  transition-property: transform;
+  transition-duration: .15s;
+}
+
+.switch-module_switch__thumb_R3gLLG[data-checked] {
+  transform: translateX(var(--translateX));
+}
+
+.switch-module_switch__size_18_R3gLLG {
+  --translateX: 12px;
+  width: 30px;
+  height: 18px;
+}
+
+.switch-module_switch__size_24_R3gLLG {
+  --translateX: 16px;
+  width: 40px;
+  height: 24px;
+}
+.tabs-pill-indicator-module_tabs_pill_indicator_Dg56ja {
+  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;
+}
+.tabs-pill-list-module_tabs_pill_list_I12aAq {
+  isolation: isolate;
+  column-gap: 8px;
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+}
+.tabs-pill-tab-module_tabs_pill_tab_ABaxVG {
+  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;
+}
+
+.tabs-pill-tab-module_tabs_pill_tab_ABaxVG:focus-visible {
+  outline-width: 2px;
+}
+
+.tabs-pill-tab-module_tabs_pill_tab_ABaxVG:hover {
+  background-color: var(--color-gray-4);
+}
+
+.tabs-pill-tab-module_tabs_pill_tab_ABaxVG[data-active] {
+  color: #fff;
+  background-color: #0000;
+}
+
+.dark .tabs-pill-tab-module_tabs_pill_tab_ABaxVG {
+  color: #fff;
+}
+
+.dark .tabs-pill-tab-module_tabs_pill_tab_ABaxVG[data-active] {
+  color: #000;
+}
+
+.tabs-pill-tab-module_tabs_pill_tab_ABaxVG > svg {
+  --size-icon: 16px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+
+.tabs-pill-tab-module_tabs_pill_tab_wrapper_ABaxVG {
+  --border-radius: 12px;
+  border-radius: var(--border-radius);
+  flex-shrink: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.tabs-pill-tab-module_tabs_pill_tab_background_ABaxVG {
+  background-color: var(--color-gray-3);
+  z-index: -2;
+  position: absolute;
+  inset: 0;
+}
+.tabs-segmented-indicator-module_tabs_segmented_indicator_wVi_Qq {
+  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;
+}
+.tabs-segmented-list-module_tabs_segmented_list_AZApxW {
+  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;
+}
+.tabs-segmented-tab-module_tabs_segmented_tab_MWdXWq {
+  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;
+}
+
+.tabs-segmented-tab-module_tabs_segmented_tab_MWdXWq:focus-visible {
+  outline-width: 2px;
+}
+
+.tabs-segmented-tab-module_tabs_segmented_tab_MWdXWq:hover, .tabs-segmented-tab-module_tabs_segmented_tab_MWdXWq[data-active] {
+  color: var(--color-gray-12);
+}
+
+.tabs-segmented-tab-module_tabs_segmented_tab_MWdXWq > svg {
+  --size-icon: 16px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+.tabs-underline-indicator-module_tabs_underline_indicator_Y_MyBG {
+  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;
+}
+.tabs-underline-list-module_tabs_underline_list_z1YTsW {
+  border-bottom-color: var(--color-gray-4);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+}
+.tabs-underline-tab-module_tabs_underline_tab_RxaKNW {
+  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;
+}
+
+.tabs-underline-tab-module_tabs_underline_tab_RxaKNW:focus-visible {
+  outline-width: 2px;
+}
+
+.tabs-underline-tab-module_tabs_underline_tab_RxaKNW:hover, .tabs-underline-tab-module_tabs_underline_tab_RxaKNW[data-active] {
+  color: var(--color-gray-12);
+}
+
+.tabs-underline-tab-module_tabs_underline_tab_RxaKNW > svg {
+  --size-icon: 16px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+.tabs-module_tabs_Zs0xEq {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+.tabs-panel-module_tabs_panel_dWZGWq {
+  outline-color: var(--color-primary-9);
+  outline-offset: -2px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-direction: column;
+  display: flex;
+}
+
+.tabs-panel-module_tabs_panel_dWZGWq:focus-visible {
+  outline-width: 2px;
+}
+.textarea-module_textarea_JqpxFq {
+  resize: vertical;
+  height: auto;
+  min-height: 66px;
+  max-height: none;
+  padding: 12px !important;
+}
+.tooltip-content-module_tooltip_content_j-Z8kW {
+  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;
+}
+
+.tooltip-content-module_tooltip_content_positioner_j-Z8kW {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.dark .tooltip-content-module_tooltip_content_j-Z8kW {
+  background-color: var(--color-gray-light-1);
+  color: var(--color-gray-light-12);
+}