@typlog/ui 0.11.7 → 0.12.0

package/{dist/addons.css → addons.css}

@@ -1,4 +1,42 @@
 
+.ui-SocialButton:where(.r-variant-classic) {
+  background-color: var(--social-button-background-color);
+  color: var(--social-button-text-color);
+  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
+  --social-button-background-color: black;
+  --social-button-text-color: white;
+  --social-button-hover-filter: brightness(0.92) saturate(1.1);
+}
+@media (hover: hover) {
+.ui-SocialButton:where(:hover) {
+    filter: var(--social-button-hover-filter);
+}
+}
+.ui-SocialButton:where(.r-brand-google) {
+  --social-button-background-color: var(--color-background);
+  --social-button-text-color: var(--gray-12);
+}
+.ui-SocialButton:where(.r-brand-facebook) {
+  --social-button-background-color: #1877F2;
+}
+.ui-SocialButton:where(.r-brand-github) {
+  --social-button-background-color: #333;
+}
+.ui-SocialButton:where(.r-variant-classic):where(.r-brand-slack) {
+  --social-button-background-color: #611f69;
+}
+.ui-SocialButton:where(.r-variant-classic):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-SocialButton:where(.r-variant-classic):where(:active) {
+  box-shadow: var(--shadow-1);
+}
+.ui-SocialButton:where(.r-variant-classic):where([data-disabled]) {
+  color: var(--gray-a10);
+  background-color: var(--gray-a2);
+}
+
 .ui-IconifySample {
   display: flex;
   gap: var(--space-4);
@@ -111,3 +149,28 @@
 .ui-IconifyCollectionIconGrid button:hover {
   background-color: var(--gray-a4);
 }
+
+.ui-SpinnerIcon {
+  color: var(--gray-10);
+}
+.ui-SpinnerIcon:where(.r-size-1) {
+  font-size: var(--space-3);
+}
+.ui-SpinnerIcon:where(.r-size-2) {
+  font-size: var(--space-4);
+}
+.ui-SpinnerIcon:where(.r-size-3) {
+  font-size: calc(1.25 * var(--space-4));
+}
+
+.ui-Turnstile {
+  background: var(--gray-a3);
+}
+.ui-Turnstile:where(.r-size-normal) {
+  width: 300px;
+  height: 65px;
+}
+.ui-Turnstile:where(.r-size-compact) {
+  width: 150px;
+  height: 140px;
+}

package/addons.d.ts

@@ -0,0 +1,101 @@
+import { AsTag } from 'reka-ui';
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PrimitiveProps } from 'reka-ui';
+import { PublicProps } from 'vue';
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type BrandType = 'google' | 'facebook' | 'x' | 'github' | 'apple' | 'slack' | 'figma';
+
+export declare const IconifyCollection: DefineComponent<IconifyCollectionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+select: (icon: string) => any;
+}, string, PublicProps, Readonly<IconifyCollectionProps> & Readonly<{
+onSelect?: ((icon: string) => any) | undefined;
+}>, {
+perpage: number;
+iconSize: string | number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare interface IconifyCollectionProps {
+    prefix?: string;
+    search?: string;
+    perpage?: number;
+    iconSize?: string | number;
+}
+
+declare type RadiusType = 'none' | 'small' | 'medium' | 'large' | 'full';
+
+export declare const SocialButton: __VLS_WithTemplateSlots<DefineComponent<SocialButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SocialButtonProps> & Readonly<{}>, {
+as: AsTag | Component;
+size: "1" | "2" | "3" | "4";
+variant: "classic" | "solid" | "soft" | "surface" | "outline";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+
+export declare interface SocialButtonProps extends PrimitiveProps {
+    brand: BrandType;
+    variant?: 'classic' | 'solid' | 'soft' | 'surface' | 'outline';
+    radius?: RadiusType;
+    /**
+     * Control the size of the social button.
+     * @default "2"
+     */
+    size?: '1' | '2' | '3' | '4';
+    disabled?: boolean;
+}
+
+export declare const SpinnerIcon: DefineComponent<SpinnerIconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SpinnerIconProps> & Readonly<{}>, {
+size: "1" | "2" | "3";
+icon: SpinnerIcon_2;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type SpinnerIcon_2 = '12-dots-scale-rotate' | '180-ring' | '180-ring-with-bg' | '270-ring' | '270-ring-with-bg' | '3-dots-bounce' | '3-dots-fade' | '3-dots-move' | '3-dots-rotate' | '3-dots-scale' | '3-dots-scale-middle' | '6-dots-rotate' | '6-dots-scale' | '6-dots-scale-middle' | '8-dots-rotate' | '90-ring' | '90-ring-with-bg' | 'bars-fade' | 'bars-rotate-fade' | 'bars-scale' | 'bars-scale-fade' | 'bars-scale-middle' | 'blocks-scale' | 'blocks-shuffle-2' | 'blocks-shuffle-3' | 'blocks-wave' | 'bouncing-ball' | 'clock' | 'dot-revolve' | 'eclipse' | 'eclipse-half' | 'gooey-balls-1' | 'gooey-balls-2' | 'pulse' | 'pulse-2' | 'pulse-3' | 'pulse-multiple' | 'pulse-ring' | 'pulse-rings-2' | 'pulse-rings-3' | 'pulse-rings-multiple' | 'ring-resize' | 'tadpole' | 'wifi' | 'wifi-fade' | 'wind-toy';
+
+export declare interface SpinnerIconProps {
+    /**
+     * Icon name of the spinner.
+     * @default "180-ring"
+     */
+    icon?: SpinnerIcon_2;
+    /**
+     * Control size of the spinner.
+     * @default "2"
+     */
+    size?: '1' | '2' | '3';
+}
+
+export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (args_0: string) => any;
+}, string, PublicProps, Readonly<TurnstileProps> & Readonly<{
+"onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+}>, {
+size: "normal" | "compact";
+theme: "light" | "dark" | "auto";
+action: string;
+resetInterval: number;
+appearance: "always" | "execute" | "interaction-only";
+renderOnMount: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+element: HTMLDivElement;
+}, HTMLDivElement>;
+
+export declare interface TurnstileProps {
+    sitekey: string;
+    modelValue?: string;
+    resetInterval?: number;
+    size?: 'normal' | 'compact';
+    theme?: 'light' | 'dark' | 'auto';
+    action?: string;
+    appearance?: 'always' | 'execute' | 'interaction-only';
+    renderOnMount?: boolean;
+}
+
+export { }

package/{dist/addons.js → addons.js}

@@ -1,13 +1,60 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, toDisplayString, Fragment, renderList, createVNode, unref, ref, computed, onMounted, withDirectives, createCommentVNode, withKeys, createBlock, mergeProps, withModifiers, vShow, withCtx, createTextVNode, normalizeStyle, useTemplateRef, onBeforeUnmount } from "vue";
+import { defineComponent, computed, createBlock, openBlock, unref, normalizeClass, withCtx, createCommentVNode, renderSlot, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, createVNode, ref, onMounted, withDirectives, withKeys, mergeProps, withModifiers, vShow, createTextVNode, normalizeStyle, useTemplateRef, onBeforeUnmount } from "vue";
+import { Primitive, injectDialogRootContext } from "reka-ui";
 import { Icon } from "@iconify/vue";
-import { TextField, Button, Tooltip, Pagination } from "./components";
+import { buildPropsClass, TextField, Button, Tooltip, Pagination } from "./components";
+const BRAND_ICONS = {
+  google: "logos:google-icon",
+  facebook: "simple-icons:facebook",
+  x: "simple-icons:x",
+  github: "simple-icons:github",
+  apple: "simple-icons:apple",
+  slack: "logos:slack-icon",
+  figma: "logos:figma"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "SocialButton",
+  props: {
+    brand: {},
+    variant: { default: "classic" },
+    radius: {},
+    size: { default: "2" },
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "button" }
+  },
+  setup(__props) {
+    const props = __props;
+    const resetClass = buildPropsClass(props, ["size", "brand", "variant"]);
+    const brandIcon = computed(() => {
+      return BRAND_ICONS[props.brand];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        class: normalizeClass(["ui-Button ui-SocialButton", unref(resetClass)]),
+        "as-child": props.asChild,
+        as: props.as,
+        "data-radius": props.radius,
+        "data-disabled": props.disabled ? true : void 0
+      }, {
+        default: withCtx(() => [
+          brandIcon.value ? (openBlock(), createBlock(unref(Icon), {
+            key: 0,
+            icon: brandIcon.value
+          }, null, 8, ["icon"])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "as-child", "as", "data-radius", "data-disabled"]);
+    };
+  }
+});
 const _hoisted_1$1 = {
   type: "button",
   class: "ui-IconifySample"
 };
 const _hoisted_2$1 = { class: "ui-IconifySampleInfo" };
 const _hoisted_3$1 = { class: "ui-IconifySampleIcons" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "IconifySample",
   props: {
     prefix: {},
@@ -105,7 +152,7 @@ const filterIcons = (names, query, suffix) => {
     return match;
   });
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "IconifyCollection",
   props: {
     prefix: {},
@@ -117,6 +164,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
+    const dialogContext = injectDialogRootContext(null);
     const shouldDisplay = ref("all");
     const groupCollections = ref([]);
     const collectionFilter = ref("");
@@ -137,6 +185,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const onSelectIcon = (icon) => {
       emits("select", icon);
+      if (dialogContext) {
+        dialogContext.onOpenChange(false);
+      }
     };
     const onSearch = async () => {
       if (searchQuery.value) {
@@ -253,7 +304,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               createElementVNode("div", _hoisted_8, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(collection.items, (item) => {
-                  return openBlock(), createBlock(_sfc_main$2, mergeProps({
+                  return openBlock(), createBlock(_sfc_main$3, mergeProps({
                     key: item.prefix
                   }, { ref_for: true }, item, {
                     onClick: withModifiers(($event) => onSelectPrefix(item.prefix), ["prevent"])
@@ -274,7 +325,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               onClick: withModifiers(reset, ["prevent"])
             }, {
               default: withCtx(() => _cache[5] || (_cache[5] = [
-                createTextVNode(" Back ")
+                createTextVNode(" Back ", -1)
               ])),
               _: 1,
               __: [5]
@@ -344,6 +395,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "SpinnerIcon",
+  props: {
+    icon: { default: "180-ring" },
+    size: { default: "2" }
+  },
+  setup(__props) {
+    const props = __props;
+    const iconName = computed(() => {
+      return `svg-spinners:${props.icon}`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Icon), {
+        class: normalizeClass(["ui-SpinnerIcon", `r-size-${_ctx.size}`]),
+        icon: iconName.value
+      }, null, 8, ["class", "icon"]);
+    };
+  }
+});
 const turnstileSrc = "https://challenges.cloudflare.com/turnstile/v0/api.js";
 const turnstileLoadFunction = "cfTurnstileOnLoad";
 let turnstileState = typeof window !== "undefined" ? window.turnstile !== void 0 ? "ready" : "unloaded" : "unloaded";
@@ -431,12 +501,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "element",
         ref: element,
-        class: "ui-Turnstile"
-      }, null, 512);
+        class: normalizeClass(["ui-Turnstile", `r-size-${_ctx.size}`])
+      }, null, 2);
     };
   }
 });
 export {
-  _sfc_main$1 as IconifyCollection,
+  _sfc_main$2 as IconifyCollection,
+  _sfc_main$4 as SocialButton,
+  _sfc_main$1 as SpinnerIcon,
   _sfc_main as Turnstile
 };

package/{dist/base.css → base.css}

@@ -6427,66 +6427,6 @@
   --scaling: 1.2;
 }
 
-html.light {
-  --light-0: white;
-  --light-a1: var(--white-a1);
-  --light-a2: var(--white-a2);
-  --light-a3: var(--white-a3);
-  --light-a4: var(--white-a4);
-  --light-a5: var(--white-a5);
-  --light-a6: var(--white-a6);
-  --light-a7: var(--white-a7);
-  --light-a8: var(--white-a8);
-  --light-a9: var(--white-a9);
-  --light-a10: var(--white-a10);
-  --light-a11: var(--white-a11);
-  --light-a12: var(--white-a12);
-  --dark-0: black;
-  --dark-a1: var(--black-a1);
-  --dark-a2: var(--black-a2);
-  --dark-a3: var(--black-a3);
-  --dark-a4: var(--black-a4);
-  --dark-a5: var(--black-a5);
-  --dark-a6: var(--black-a6);
-  --dark-a7: var(--black-a7);
-  --dark-a8: var(--black-a8);
-  --dark-a9: var(--black-a9);
-  --dark-a10: var(--black-a10);
-  --dark-a11: var(--black-a11);
-  --dark-a12: var(--black-a12);
-  --light-surface: white;
-}
-
-html.dark {
-  --light-0: black;
-  --light-a1: var(--black-a1);
-  --light-a2: var(--black-a2);
-  --light-a3: var(--black-a3);
-  --light-a4: var(--black-a4);
-  --light-a5: var(--black-a5);
-  --light-a6: var(--black-a6);
-  --light-a7: var(--black-a7);
-  --light-a8: var(--black-a8);
-  --light-a9: var(--black-a9);
-  --light-a10: var(--black-a10);
-  --light-a11: var(--black-a11);
-  --light-a12: var(--black-a12);
-  --dark-0: white;
-  --dark-a1: var(--white-a1);
-  --dark-a2: var(--white-a2);
-  --dark-a3: var(--white-a3);
-  --dark-a4: var(--white-a4);
-  --dark-a5: var(--white-a5);
-  --dark-a6: var(--white-a6);
-  --dark-a7: var(--white-a7);
-  --dark-a8: var(--white-a8);
-  --dark-a9: var(--white-a9);
-  --dark-a10: var(--white-a10);
-  --dark-a11: var(--white-a11);
-  --dark-a12: var(--white-a12);
-  --light-surface: var(--slate-a1);
-}
-
 [data-radius] {
   --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
   --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
@@ -6790,6 +6730,15 @@ html.dark {
   }
 }
 
+@keyframes ui-spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .ui-root {
   --font-size-1: calc(12px * var(--scaling));
   --font-size-2: calc(14px * var(--scaling));
@@ -6836,3 +6785,10 @@ html.dark {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.ui-root {
+  --tab-active-letter-spacing: -0.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+}

package/{dist/components → components}/badge.css

@@ -9,6 +9,8 @@
   line-height: 1;
   height: -moz-fit-content;
   height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .ui-Badge:where(.r-size-1) {
   font-size: var(--font-size-1);
@@ -18,6 +20,9 @@
   gap: calc(var(--space-1) * 1.5);
   border-radius: max(var(--radius-1), var(--radius-full));
 }
+.ui-Badge:where(.r-size-1):where([data-radius="full"]) {
+  padding: calc(var(--space-1) * 0.5) var(--space-2);
+}
 .ui-Badge:where(.r-size-2) {
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
@@ -26,6 +31,9 @@
   gap: calc(var(--space-1) * 1.5);
   border-radius: max(var(--radius-2), var(--radius-full));
 }
+.ui-Badge:where(.r-size-2):where([data-radius="full"]) {
+  padding: var(--space-1) calc(var(--space-2) * 1.25);
+}
 .ui-Badge:where(.r-size-3) {
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
@@ -34,6 +42,9 @@
   gap: var(--space-2);
   border-radius: max(var(--radius-2), var(--radius-full));
 }
+.ui-Badge:where(.r-size-3):where([data-radius="full"]) {
+  padding: var(--space-1) calc(var(--space-2) * 1.5);
+}
 .ui-Badge:where(.r-variant-solid) {
   background-color: var(--accent-9);
   color: var(--accent-contrast);

package/{dist/components → components}/button.css

@@ -1,4 +1,3 @@
-
 .ui-Button {
   display: inline-flex;
   align-items: center;
@@ -130,10 +129,6 @@
 .ui-Button:where(.r-variant-soft, .r-variant-ghost):where(.r-high-contrast) {
   color: var(--accent-12);
 }
-.ui-Button:where(.r-variant-soft):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-}
 .ui-Button:where(.r-variant-soft) {
   background-color: var(--accent-a3);
 }
@@ -262,41 +257,3 @@
   width: var(--button-height);
   padding: 0;
 }
-
-.ui-SocialButton {
-  background-color: var(--social-button-background-color);
-  color: var(--social-button-text-color);
-  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
-  --social-button-background-color: black;
-  --social-button-text-color: white;
-  --social-button-hover-filter: brightness(0.92) saturate(1.1);
-}
-@media (hover: hover) {
-.ui-SocialButton:where(:hover) {
-    filter: var(--social-button-hover-filter);
-}
-}
-.ui-SocialButton:where(.r-brand-google) {
-  background-color: var(--color-background);
-  --social-button-text-color: var(--gray-12);
-}
-.ui-SocialButton:where(.r-brand-facebook) {
-  --social-button-background-color: #1877F2;
-}
-.ui-SocialButton:where(.r-brand-github) {
-  --social-button-background-color: #333;
-}
-.ui-SocialButton:where(.r-brand-slack) {
-  --social-button-background-color: #611f69;
-}
-.ui-SocialButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-SocialButton:where(:active) {
-  box-shadow: var(--shadow-1);
-}
-.ui-SocialButton:where([data-disabled]) {
-  color: var(--gray-a10);
-  background-color: var(--gray-a2);
-}

package/components/card.css

@@ -0,0 +1,31 @@
+
+.ui-Card:where(.r-size-1) {
+  --card-padding: var(--space-3);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-Card:where(.r-size-2) {
+  --card-padding: var(--space-4);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-Card:where(.r-size-3) {
+  --card-padding: var(--space-5);
+  --card-border-radius: max(var(--radius-5), var(--radius-full));
+}
+.ui-Card:where(.r-size-4) {
+  --card-padding: var(--space-6);
+  --card-border-radius: max(var(--radius-5), var(--radius-full));
+}
+.ui-Card:where(.r-size-5) {
+  --card-padding: var(--space-8);
+  --card-border-radius: max(var(--radius-6), var(--radius-full));
+}
+.ui-Card:where(.r-variant-soft) {
+  border-color: var(--gray-2);
+  background-color: var(--gray-2);
+}
+.ui-Card:where(.r-variant-soft):where(:-moz-any-link, button, label):where(:hover) {
+  border-color: var(--gray-a5);
+}
+.ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
+  border-color: var(--gray-a5);
+}

package/components/dialog.css

@@ -0,0 +1,155 @@
+
+.ui-DialogTitle {
+  font-size: var(--font-size-4);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-4);
+}
+
+.ui-DialogDescription {
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-2);
+  color: var(--gray-11);
+}
+.ui-DialogTitle + .ui-DialogDescription {
+  margin-top: var(--space-2);
+}
+.ui-DialogOverlay {
+  position: fixed;
+  inset: 0;
+}
+.ui-DialogOverlay::before {
+  position: fixed;
+  content: '';
+  inset: 0;
+  background-color: var(--color-overlay);
+}
+.ui-DialogWrapper {
+  display: flex;
+  overflow: hidden;
+  position: absolute;
+  inset: 0;
+}
+.ui-DialogContainer {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: var(--space-6);
+}
+.ui-DialogPopup {
+  width: 100%;
+  max-height: calc(100vh - var(--space-6) * 2);
+  position: relative;
+  box-sizing: border-box;
+  overflow: auto;
+  text-align: left;
+  box-sizing: border-box;
+  background-color: var(--color-panel-solid);
+  outline: none;
+  border-top-left-radius: var(--dialog-popup-radius);
+  border-top-right-radius: var(--dialog-popup-radius);
+  max-width: var(--dialog-popup-max-width);
+  max-height: var(--dialog-popup-max-height);
+  padding: var(--dialog-popup-padding);
+}
+.ui-DialogPopup:where(.r-size-1) {
+  --dialog-popup-padding: var(--space-3);
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 450px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-2) {
+  --dialog-popup-padding: var(--space-4);
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 600px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-3) {
+  --dialog-popup-padding: var(--space-5);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: 860px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-4) {
+  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: 1200px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-5) {
+  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: none;
+  --dialog-popup-max-height: calc(100vh - 64px);
+}
+
+/* special handle for tailwindcss p-0, when css priority doesn't work */
+.ui-DialogPopup:where(.p-0) {
+  --dialog-popup-padding: 0;
+}
+@media (min-width: 450px) {
+.ui-DialogContainer {
+    justify-content: center;
+    padding-bottom: max(var(--space-6), 6vh);
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+.ui-DialogPopup {
+    box-shadow: var(--shadow-6);
+    border-bottom-left-radius: var(--dialog-popup-radius);
+    border-bottom-right-radius: var(--dialog-popup-radius);
+}
+}
+@media (prefers-reduced-motion: no-preference) {
+@keyframes ui-dialog-overlay-no-op {
+from {
+      opacity: 1;
+}
+to {
+      opacity: 1;
+}
+}
+@keyframes ui-dialog-content-show {
+from {
+      opacity: 0.1;
+      transform: translate3d(0, var(--space-6), 0);
+}
+to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+}
+}
+@keyframes ui-dialog-content-hide {
+from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+}
+to {
+      opacity: 1;
+      transform: translate3d(0, var(--space-5), 0);
+}
+}
+.ui-DialogOverlay[data-state='closed'] {
+    animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogOverlay[data-state='open']::before {
+    animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogOverlay[data-state='closed']::before {
+    animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogPopup:where([data-state="open"]) {
+    animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogPopup:where([data-state="closed"]) {
+    animation: ui-dialog-content-hide 100ms linear;
+}
+}
+
+.ui-AlertPopup {
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 450px;
+}