zartui 0.1.113 → 3.0.1

package/es/password-input/PasswordInput.d.ts

@@ -0,0 +1,63 @@
+import { type ExtractPropTypes } from 'vue';
+declare const passwordInputProps: {
+    info: StringConstructor;
+    mask: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    value: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    focused: BooleanConstructor;
+    errorInfo: StringConstructor;
+};
+export declare type PasswordInputProps = ExtractPropTypes<typeof passwordInputProps>;
+declare const _default: import("vue").DefineComponent<{
+    info: StringConstructor;
+    mask: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    value: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    focused: BooleanConstructor;
+    errorInfo: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "focus"[], "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    info: StringConstructor;
+    mask: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    value: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    focused: BooleanConstructor;
+    errorInfo: StringConstructor;
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+}, {
+    length: string | number;
+    mask: boolean;
+    value: string;
+    focused: boolean;
+}>;
+export default _default;

package/es/password-input/PasswordInput.mjs

@@ -0,0 +1,78 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { addUnit, truthProp, numericProp, BORDER_LEFT, makeStringProp, BORDER_SURROUND, createNamespace, makeNumericProp } from "../utils/index.mjs";
+const [name, bem] = createNamespace("password-input");
+const passwordInputProps = {
+  info: String,
+  mask: truthProp,
+  value: makeStringProp(""),
+  gutter: numericProp,
+  length: makeNumericProp(6),
+  focused: Boolean,
+  errorInfo: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: passwordInputProps,
+  emits: ["focus"],
+  setup(props, {
+    emit
+  }) {
+    const onTouchStart = (event) => {
+      event.stopPropagation();
+      emit("focus", event);
+    };
+    const renderPoints = () => {
+      const Points = [];
+      const {
+        mask,
+        value,
+        length,
+        gutter,
+        focused
+      } = props;
+      for (let i = 0; i < length; i++) {
+        const char = value[i];
+        const showBorder = i !== 0 && !gutter;
+        const showCursor = focused && i === value.length;
+        let style;
+        if (i !== 0 && gutter) {
+          style = {
+            marginLeft: addUnit(gutter)
+          };
+        }
+        Points.push(_createVNode("li", {
+          "class": [{
+            [BORDER_LEFT]: showBorder
+          }, bem("item", {
+            focus: showCursor
+          })],
+          "style": style
+        }, [mask ? _createVNode("i", {
+          "style": {
+            visibility: char ? "visible" : "hidden"
+          }
+        }, null) : char, showCursor && _createVNode("div", {
+          "class": bem("cursor")
+        }, null)]));
+      }
+      return Points;
+    };
+    return () => {
+      const info = props.errorInfo || props.info;
+      return _createVNode("div", {
+        "class": bem()
+      }, [_createVNode("ul", {
+        "class": [bem("security"), {
+          [BORDER_SURROUND]: !props.gutter
+        }],
+        "onTouchstart": onTouchStart
+      }, [renderPoints()]), info && _createVNode("div", {
+        "class": bem(props.errorInfo ? "error-info" : "info")
+      }, [info])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/password-input/index.css

@@ -1 +1 @@
-.zt-password-input{position:relative;margin:0 16px;-webkit-user-select:none;user-select:none}.zt-password-input__error-info,.zt-password-input__info{margin-top:16px;font-size:14px;text-align:center}.zt-password-input__info{color:#969799}.zt-password-input__error-info{color:#e62314}.zt-password-input__security{display:-webkit-box;display:-webkit-flex;display:flex;width:100%;height:50px;cursor:pointer}.zt-password-input__security::after{border-radius:6px}.zt-password-input__security li{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;font-size:20px;line-height:1.2;background-color:#fff}.zt-password-input__security i{position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:#000;border-radius:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);visibility:hidden}.zt-password-input__cursor{position:absolute;top:50%;left:50%;width:1px;height:40%;background-color:rgba(0,0,0,.6);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation:1s zt-cursor-flicker infinite;animation:1s zt-cursor-flicker infinite}@-webkit-keyframes zt-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes zt-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}
+body{--zt-password-input-height: 48px;--zt-password-input-margin: 0 var(--zt-padding-md);--zt-password-input-font-size: 20px;--zt-password-input-radius: 6px;--zt-password-input-background: var(--zt-background-2);--zt-password-input-info-color: var(--zt-text-color-2);--zt-password-input-info-font-size: var(--zt-font-size-md);--zt-password-input-error-info-color: var(--zt-danger-color);--zt-password-input-dot-size: 8px;--zt-password-input-dot-color: var(--zt-text-color);--zt-password-input-text-color: var(--zt-text-color);--zt-password-input-cursor-color: #0091fa;--zt-password-input-cursor-width: 1px;--zt-password-input-cursor-height: 40%;--zt-password-input-cursor-duration: 1s}.zt-password-input{position:relative;margin:var(--zt-password-input-margin);-webkit-user-select:none;user-select:none}.zt-password-input__info,.zt-password-input__error-info{margin-top:var(--zt-padding-md);font-size:var(--zt-password-input-info-font-size);text-align:center}.zt-password-input__info{color:var(--zt-password-input-info-color)}.zt-password-input__error-info{color:var(--zt-password-input-error-info-color)}.zt-password-input__security{display:flex;width:100%;height:var(--zt-password-input-height);cursor:pointer}.zt-password-input__security:after{border-radius:var(--zt-password-input-radius)}.zt-password-input__security li:last-child{border-radius:0 4px 4px 0}.zt-password-input__security li:first-child{border-radius:0 4px 4px 0}.zt-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--zt-password-input-text-color);font-size:var(--zt-password-input-font-size);background:var(--zt-password-input-background);border:0 solid rgba(45,75,115,.2)}.zt-password-input__security i{position:absolute;top:50%;left:50%;width:var(--zt-password-input-dot-size);height:var(--zt-password-input-dot-size);background:var(--zt-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.zt-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--zt-password-input-cursor-width);height:var(--zt-password-input-cursor-height);background:var(--zt-password-input-cursor-color);width:1px;height:24px;transform:translate(-50%,-50%);animation:var(--zt-password-input-cursor-duration) zt-cursor-flicker infinite}@keyframes zt-cursor-flicker{0%{opacity:0}50%{opacity:1}to{opacity:0}}

package/es/password-input/index.d.ts

@@ -0,0 +1,49 @@
+export declare const PasswordInput: import("../utils").WithInstall<import("vue").DefineComponent<{
+    info: StringConstructor;
+    mask: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    value: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    focused: BooleanConstructor;
+    errorInfo: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "focus"[], "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    info: StringConstructor;
+    mask: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    value: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    focused: BooleanConstructor;
+    errorInfo: StringConstructor;
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+}, {
+    length: string | number;
+    mask: boolean;
+    value: string;
+    focused: boolean;
+}>>;
+export default PasswordInput;
+export type { PasswordInputProps } from './PasswordInput';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtPasswordInput: typeof PasswordInput;
+    }
+}

package/es/password-input/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _PasswordInput from "./PasswordInput.mjs";
+const PasswordInput = withInstall(_PasswordInput);
+var stdin_default = PasswordInput;
+export {
+  PasswordInput,
+  stdin_default as default
+};

package/es/password-input/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/password-input/style/index.mjs

@@ -0,0 +1,2 @@
+import "../../style/base.css";
+import "../index.css";

package/es/popup/Popup.d.ts

@@ -0,0 +1,165 @@
+import { CSSProperties, ExtractPropTypes } from 'vue';
+import type { PopupPosition, PopupCloseIconPosition } from './types';
+declare const popupProps: {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    round: BooleanConstructor;
+    position: {
+        type: import("vue").PropType<PopupPosition>;
+        default: PopupPosition;
+    };
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    closeable: BooleanConstructor;
+    transition: StringConstructor;
+    iconPrefix: StringConstructor;
+    closeOnPopstate: BooleanConstructor;
+    closeIconPosition: {
+        type: import("vue").PropType<PopupCloseIconPosition>;
+        default: PopupCloseIconPosition;
+    };
+    safeAreaInsetTop: BooleanConstructor;
+    safeAreaInsetBottom: BooleanConstructor;
+};
+export declare type PopupProps = ExtractPropTypes<typeof popupProps>;
+declare const _default: import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    round: BooleanConstructor;
+    position: {
+        type: import("vue").PropType<PopupPosition>;
+        default: PopupPosition;
+    };
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    closeable: BooleanConstructor;
+    transition: StringConstructor;
+    iconPrefix: StringConstructor;
+    closeOnPopstate: BooleanConstructor;
+    closeIconPosition: {
+        type: import("vue").PropType<PopupCloseIconPosition>;
+        default: PopupCloseIconPosition;
+    };
+    safeAreaInsetTop: BooleanConstructor;
+    safeAreaInsetBottom: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    round: BooleanConstructor;
+    position: {
+        type: import("vue").PropType<PopupPosition>;
+        default: PopupPosition;
+    };
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    closeable: BooleanConstructor;
+    transition: StringConstructor;
+    iconPrefix: StringConstructor;
+    closeOnPopstate: BooleanConstructor;
+    closeIconPosition: {
+        type: import("vue").PropType<PopupCloseIconPosition>;
+        default: PopupCloseIconPosition;
+    };
+    safeAreaInsetTop: BooleanConstructor;
+    safeAreaInsetBottom: BooleanConstructor;
+}>> & {
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onOpened?: ((...args: any[]) => any) | undefined;
+    onClosed?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onClickOverlay?: ((...args: any[]) => any) | undefined;
+    onClickCloseIcon?: ((...args: any[]) => any) | undefined;
+}, {
+    position: PopupPosition;
+    round: boolean;
+    overlay: boolean;
+    show: boolean;
+    closeable: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+    closeIcon: string;
+    closeOnPopstate: boolean;
+    closeIconPosition: PopupCloseIconPosition;
+    safeAreaInsetTop: boolean;
+    safeAreaInsetBottom: boolean;
+}>;
+export default _default;

package/es/popup/Popup.mjs

@@ -0,0 +1,205 @@
+import { Fragment as _Fragment, withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, provide, Teleport, nextTick, computed, onMounted, Transition, onActivated, onDeactivated, defineComponent } from "vue";
+import { popupSharedProps } from "./shared.mjs";
+import { isDef, extend, makeStringProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { useEventListener } from "@zartui/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { useLockScroll } from "../composables/use-lock-scroll.mjs";
+import { useLazyRender } from "../composables/use-lazy-render.mjs";
+import { POPUP_TOGGLE_KEY } from "../composables/on-popup-reopen.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Overlay } from "../overlay/index.mjs";
+const popupProps = extend({}, popupSharedProps, {
+  round: Boolean,
+  position: makeStringProp("center"),
+  closeIcon: makeStringProp("cross"),
+  closeable: Boolean,
+  transition: String,
+  iconPrefix: String,
+  closeOnPopstate: Boolean,
+  closeIconPosition: makeStringProp("top-right"),
+  safeAreaInsetTop: Boolean,
+  safeAreaInsetBottom: Boolean
+});
+const [name, bem] = createNamespace("popup");
+let globalZIndex = 2e3;
+var stdin_default = defineComponent({
+  name,
+  inheritAttrs: false,
+  props: popupProps,
+  emits: ["open", "close", "opened", "closed", "keydown", "update:show", "clickOverlay", "clickCloseIcon"],
+  setup(props, {
+    emit,
+    attrs,
+    slots
+  }) {
+    let opened;
+    let shouldReopen;
+    const zIndex = ref();
+    const popupRef = ref();
+    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
+    const style = computed(() => {
+      const style2 = {
+        zIndex: zIndex.value
+      };
+      if (isDef(props.duration)) {
+        const key = props.position === "center" ? "animationDuration" : "transitionDuration";
+        style2[key] = `${props.duration}s`;
+      }
+      return style2;
+    });
+    const open = () => {
+      if (!opened) {
+        if (props.zIndex !== void 0) {
+          globalZIndex = +props.zIndex;
+        }
+        opened = true;
+        zIndex.value = ++globalZIndex;
+        emit("open");
+      }
+    };
+    const close = () => {
+      if (opened) {
+        callInterceptor(props.beforeClose, {
+          done() {
+            opened = false;
+            emit("close");
+            emit("update:show", false);
+          }
+        });
+      }
+    };
+    const onClickOverlay = (event) => {
+      emit("clickOverlay", event);
+      if (props.closeOnClickOverlay) {
+        close();
+      }
+    };
+    const renderOverlay = () => {
+      if (props.overlay) {
+        return _createVNode(Overlay, {
+          "show": props.show,
+          "class": props.overlayClass,
+          "zIndex": zIndex.value,
+          "duration": props.duration,
+          "customStyle": props.overlayStyle,
+          "onClick": onClickOverlay
+        }, {
+          default: slots["overlay-content"]
+        });
+      }
+    };
+    const onClickCloseIcon = (event) => {
+      emit("clickCloseIcon", event);
+      close();
+    };
+    const renderCloseIcon = () => {
+      if (props.closeable) {
+        return _createVNode(Icon, {
+          "role": "button",
+          "tabindex": 0,
+          "name": props.closeIcon,
+          "class": [bem("close-icon", props.closeIconPosition), HAPTICS_FEEDBACK],
+          "classPrefix": props.iconPrefix,
+          "onClick": onClickCloseIcon
+        }, null);
+      }
+    };
+    const onOpened = () => emit("opened");
+    const onClosed = () => emit("closed");
+    const onKeydown = (event) => emit("keydown", event);
+    const renderPopup = lazyRender(() => {
+      var _a;
+      const {
+        round,
+        position,
+        safeAreaInsetTop,
+        safeAreaInsetBottom
+      } = props;
+      return _withDirectives(_createVNode("div", _mergeProps({
+        "ref": popupRef,
+        "style": style.value,
+        "class": [bem({
+          round,
+          [position]: position
+        }), {
+          "zt-safe-area-top": safeAreaInsetTop,
+          "zt-safe-area-bottom": safeAreaInsetBottom
+        }],
+        "onKeydown": onKeydown
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[_vShow, props.show]]);
+    });
+    const renderTransition = () => {
+      const {
+        position,
+        transition,
+        transitionAppear
+      } = props;
+      const name2 = position === "center" ? "zt-fade" : `zt-popup-slide-${position}`;
+      return _createVNode(Transition, {
+        "name": transition || name2,
+        "appear": transitionAppear,
+        "onAfterEnter": onOpened,
+        "onAfterLeave": onClosed
+      }, {
+        default: renderPopup
+      });
+    };
+    watch(() => props.show, (show) => {
+      if (show && !opened) {
+        open();
+        if (attrs.tabindex === 0) {
+          nextTick(() => {
+            var _a;
+            (_a = popupRef.value) == null ? void 0 : _a.focus();
+          });
+        }
+      }
+      if (!show && opened) {
+        opened = false;
+        emit("close");
+      }
+    });
+    useExpose({
+      popupRef
+    });
+    useLockScroll(popupRef, () => props.show && props.lockScroll);
+    useEventListener("popstate", () => {
+      if (props.closeOnPopstate) {
+        close();
+        shouldReopen = false;
+      }
+    });
+    onMounted(() => {
+      if (props.show) {
+        open();
+      }
+    });
+    onActivated(() => {
+      if (shouldReopen) {
+        emit("update:show", true);
+        shouldReopen = false;
+      }
+    });
+    onDeactivated(() => {
+      if (props.show && props.teleport) {
+        close();
+        shouldReopen = true;
+      }
+    });
+    provide(POPUP_TOGGLE_KEY, () => props.show);
+    return () => {
+      if (props.teleport) {
+        return _createVNode(Teleport, {
+          "to": props.teleport
+        }, {
+          default: () => [renderOverlay(), renderTransition()]
+        });
+      }
+      return _createVNode(_Fragment, null, [renderOverlay(), renderTransition()]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/popup/index.css

@@ -1 +1 @@
-.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:#fff;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-overflow-scrolling:touch}.zt-popup--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:8px}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 8px 8px}.zt-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:8px 0 0 8px}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:8px 8px 0 0}.zt-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 8px 8px 0}.zt-popup--safe-area-inset-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.zt-popup-slide-bottom-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-top-enter-active{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.zt-popup-slide-bottom-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-top-leave-active{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.zt-popup-slide-top-enter,.zt-popup-slide-top-leave-active{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter,.zt-popup-slide-right-leave-active{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter,.zt-popup-slide-bottom-leave-active{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter,.zt-popup-slide-left-leave-active{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.zt-popup__close-icon{position:absolute;z-index:1;color:#c8c9cc;font-size:20px;cursor:pointer}.zt-popup__close-icon:active{color:#969799}.zt-popup__close-icon--top-left{top:16px;left:16px}.zt-popup__close-icon--top-right{top:16px;right:16px}.zt-popup__close-icon--bottom-left{bottom:16px;left:16px}.zt-popup__close-icon--bottom-right{right:16px;bottom:16px}
+body{--zt-popup-background: var(--zt-background-2);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-size: 22px;--zt-popup-close-icon-color: var(--zt-gray-5);--zt-popup-close-icon-margin: 16px;--zt-popup-close-icon-z-index: 1}.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--zt-popup-background);transition:var(--zt-popup-transition);-webkit-overflow-scrolling:touch}.zt-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:var(--zt-popup-round-radius)}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 var(--zt-popup-round-radius) var(--zt-popup-round-radius)}.zt-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:var(--zt-popup-round-radius) 0 0 var(--zt-popup-round-radius)}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0 0}.zt-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0}.zt-popup-slide-top-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-bottom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popup-slide-top-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-bottom-leave-active{transition-timing-function:var(--zt-ease-in)}.zt-popup-slide-top-enter-from,.zt-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter-from,.zt-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter-from,.zt-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter-from,.zt-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.zt-popup__close-icon{position:absolute;z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size)}.zt-popup__close-icon--top-left{top:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--top-right{top:var(--zt-popup-close-icon-margin);right:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-left{bottom:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-right{right:var(--zt-popup-close-icon-margin);bottom:var(--zt-popup-close-icon-margin)}