@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/esm/shortpassword.taro-f7292032.js

@@ -0,0 +1,146 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Tips } from "@nutui/icons-react-taro";
+import { c as cn } from "./bem-cdccae08.js";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  title: "",
+  description: "",
+  tips: "",
+  tipsIcon: null,
+  iconSize: 11,
+  visible: false,
+  modelValue: "",
+  errorMsg: "",
+  noButton: true,
+  closeOnClickOverlay: true,
+  length: 6,
+  className: "",
+  autoFocus: false,
+  onChange: (value) => {
+  },
+  onOk: (value) => {
+  },
+  onCancel: () => {
+  },
+  onClose: () => {
+  },
+  onTips: () => {
+  },
+  onComplete: (value) => {
+  }
+};
+const ShortPassword = (props) => {
+  const { locale } = useConfig();
+  const { title, description, tips, tipsIcon, iconSize, visible, modelValue, errorMsg, noButton, closeOnClickOverlay, length, style, className, onChange, onOk, onTips, onCancel, onClose, onComplete, autoFocus, ...reset } = props;
+  const b = cn("shortpassword");
+  const textInput = useRef(null);
+  const range = (val) => {
+    return Math.min(Math.max(4, val), 6);
+  };
+  const [innerVisible, setInnerVisible] = useState(visible);
+  const [comLen, setComLen] = useState(range(Number(length)));
+  const [inputValue, setInputValue] = useState("");
+  useEffect(() => {
+    setInnerVisible(visible);
+  }, [visible]);
+  useEffect(() => {
+    if (typeof modelValue !== "undefined") {
+      setInputValue(modelValue);
+    }
+  }, [modelValue]);
+  const changeValue = (e) => {
+    let inputValue2 = e.target.value;
+    if (String(inputValue2).length > comLen) {
+      inputValue2 = inputValue2.slice(0, comLen);
+    }
+    setInputValue(inputValue2);
+    if (String(inputValue2).length === comLen) {
+      onComplete && onComplete(inputValue2);
+    }
+    onChange && onChange(inputValue2);
+  };
+  const systemStyle = () => {
+    const u = navigator.userAgent;
+    const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
+    const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+    let style2 = {};
+    if (isIOS) {
+      style2 = {
+        paddingRight: "1200px"
+      };
+    }
+    if (isAndroid) {
+      style2 = {
+        opacity: 0,
+        zIndex: 10
+      };
+    }
+    return style2;
+  };
+  const focus = () => {
+    if (textInput.current) {
+      textInput.current.focus();
+    }
+  };
+  const sure = () => {
+    onOk && onOk(inputValue);
+  };
+  const renderIcon = (size = "11px") => {
+    return React.isValidElement(tipsIcon) ? React.cloneElement(tipsIcon, {
+      ...tipsIcon.props,
+      size
+    }) : React.createElement(Tips, { size });
+  };
+  return React.createElement(
+    "div",
+    null,
+    React.createElement(
+      Popup,
+      { style: {
+        padding: "32px 24px 28px 24px",
+        borderRadius: "12px",
+        textAlign: "center"
+      }, visible: innerVisible, closeable: true, "close-on-click-overlay": closeOnClickOverlay, onClickOverlay: onClose, onClickCloseIcon: onClose },
+      React.createElement(
+        "div",
+        { className: `${b()} ${className}`, style: { ...style }, ...reset },
+        React.createElement("div", { className: b("title") }, title || locale.shortpassword.title),
+        React.createElement("div", { className: b("subtitle") }, description || locale.shortpassword.description),
+        React.createElement(
+          "div",
+          { className: b("input") },
+          React.createElement("input", { ref: textInput, className: b("input-real"), type: "number", style: systemStyle(), maxLength: 6, value: inputValue, autoFocus, onChange: (e) => changeValue(e) }),
+          React.createElement("div", { className: b("input-site") }),
+          React.createElement("div", { className: b("input-fake"), onClick: () => focus() }, [...new Array(comLen).keys()].map((item, index) => {
+            return React.createElement("div", { className: b("input-fake__li"), key: index }, String(inputValue).length > index ? React.createElement("div", { className: b("input-fake__li__icon") }) : null);
+          }))
+        ),
+        React.createElement(
+          "div",
+          { className: b("message") },
+          React.createElement("div", { className: b("message__error") }, errorMsg),
+          tips || locale.shortpassword.tips ? React.createElement(
+            "div",
+            { className: b("message__forget") },
+            renderIcon(iconSize),
+            React.createElement("div", { className: b("message__forget-tips"), onClick: onTips }, tips || locale.shortpassword.tips)
+          ) : null
+        ),
+        !noButton ? React.createElement(
+          "div",
+          { className: b("footer") },
+          React.createElement("div", { className: b("footer__cancel"), onClick: onCancel }, locale.cancel),
+          React.createElement("div", { className: b("footer__sure"), onClick: () => sure() }, locale.confirm)
+        ) : null
+      )
+    )
+  );
+};
+ShortPassword.defaultProps = defaultProps;
+ShortPassword.displayName = "NutShortPassword";
+export {
+  ShortPassword as S
+};

package/dist/esm/sidenavbar.taro-9f210df4.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { O as OffsetContext } from "./offsetContext-f32a9246.js";
+const defaultProps = {
+  showhead: false,
+  position: "left",
+  width: "80%"
+};
+const SideNavBar = (props) => {
+  const { title, visible, width, position, children, className, showhead, onClose, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const offset = props.offset ? Number(props.offset) : 20;
+  const [sidenavbarShow, setSidenavbarShow] = useState(true);
+  const handleClick = () => {
+    setSidenavbarShow(!sidenavbarShow);
+  };
+  return React.createElement(
+    Popup,
+    { visible, style: { width, height: "100%" }, position, onClose },
+    React.createElement(
+      "div",
+      { className: className ? `${className} nut-sidenavbar` : "nut-sidenavbar", ...rest },
+      React.createElement(
+        "div",
+        { className: "nut-sidenavbar__content" },
+        React.createElement(
+          "div",
+          { className: `nut-sidenavbar__list ${sidenavbarShow ? "nutShow" : "nutHide"}`, onClick: handleClick },
+          React.createElement(
+            "div",
+            { className: "nut-sidenavbar__title border-bt ", style: { paddingLeft: `${offset}px` } },
+            title,
+            React.createElement("i", { className: `arrow-icon ${sidenavbarShow ? "arrow-up" : "arrow-down"}` })
+          ),
+          React.createElement(
+            OffsetContext.Provider,
+            { value: offset },
+            React.createElement("div", { className: "nut-sidenavbar__content" }, children)
+          )
+        )
+      )
+    )
+  );
+};
+SideNavBar.defaultProps = defaultProps;
+SideNavBar.displayName = "NutSideNavBar";
+export {
+  SideNavBar as S
+};

package/dist/esm/sidenavbaritem.taro-32a45ce6.js

@@ -0,0 +1,12 @@
+import React from "react";
+const SideNavBarItem = (props) => {
+  const { title, key, children, onClick, ...rest } = props;
+  const clickFn = (e) => {
+    e.stopPropagation();
+    onClick && onClick({ title, key });
+  };
+  return React.createElement("div", { className: "nut-subsidenavbar__item border-bt", onClick: clickFn, ...rest }, title);
+};
+export {
+  SideNavBarItem as S
+};

package/dist/esm/signature.taro-c57469aa.js

@@ -0,0 +1,146 @@
+import React, { useRef, useState, useEffect } from "react";
+import { getEnv, nextTick, createSelectorQuery, canvasToTempFilePath } from "@tarojs/taro";
+import { B as Button } from "./button.taro-01eae688.js";
+import { c as cn } from "./bem-cdccae08.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  canvasId: "spcanvas",
+  type: "png",
+  lineWidth: 2,
+  strokeStyle: "#000",
+  className: ""
+};
+const Signature = (props) => {
+  const { locale } = useConfig();
+  const { canvasId, type, lineWidth, strokeStyle, unSupportTpl, className, confirm, clear, onConfirm, onClear, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const b = cn("signature");
+  const canvasRef = useRef(null);
+  const wrapRef = useRef(null);
+  const [canvasHeight, setCanvasHeight] = useState(0);
+  const [canvasWidth, setCanvasWidth] = useState(0);
+  const ctx = useRef(null);
+  const [disalbeScroll] = useState("true");
+  const startEventHandler = (event) => {
+    if (ctx.current) {
+      ctx.current.beginPath();
+      ctx.current.lineWidth = lineWidth;
+      ctx.current.strokeStyle = strokeStyle;
+    }
+  };
+  const moveEventHandler = (event) => {
+    if (ctx.current) {
+      const evt = event.changedTouches[0];
+      let mouseX = evt.x || evt.clientX;
+      let mouseY = evt.y || evt.clientY;
+      if (getEnv() === "WEB" && canvasRef.current) {
+        const coverPos = canvasRef.current.getBoundingClientRect();
+        mouseX = evt.clientX - coverPos.left;
+        mouseY = evt.clientY - coverPos.top;
+      }
+      nextTick(() => {
+        var _a, _b;
+        (_a = ctx.current) == null ? void 0 : _a.lineTo(mouseX, mouseY);
+        (_b = ctx.current) == null ? void 0 : _b.stroke();
+      });
+    }
+  };
+  const endEventHandler = (event) => {
+  };
+  const handleClearBtn = () => {
+    if (ctx.current) {
+      ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
+      ctx.current.closePath();
+    }
+    clear && clear();
+    onClear && onClear();
+  };
+  const handleConfirmBtn = () => {
+    onSave();
+  };
+  const onSave = () => {
+    createSelectorQuery().select(`#${canvasId}`).fields({
+      node: true,
+      size: true
+    }).exec((res) => {
+      canvasToTempFilePath({
+        canvas: res[0].node,
+        fileType: props.type,
+        canvasId: `${canvasId}`,
+        success: (res2) => {
+          handleClearBtn();
+          confirm && confirm(res2.tempFilePath);
+          onConfirm && onConfirm(res2.tempFilePath);
+        },
+        fail: (res2) => {
+          console.log("保存失败");
+        }
+      });
+    });
+  };
+  const canvasSetting = (canvasDom, width, height) => {
+    const canvas = canvasDom;
+    canvas.current = canvas;
+    ctx.current = canvas.getContext("2d");
+    setCanvasWidth(width);
+    setCanvasHeight(height);
+    canvas.width = width;
+    canvas.height = height;
+    if (ctx.current) {
+      ctx.current.clearRect(0, 0, width, height);
+      ctx.current.beginPath();
+      ctx.current.lineWidth = lineWidth;
+      ctx.current.strokeStyle = strokeStyle;
+    }
+  };
+  const initCanvas = () => {
+    nextTick(() => {
+      setTimeout(() => {
+        if (getEnv() === "WEAPP" || getEnv() === "JD") {
+          createSelectorQuery().select(`#${canvasId}`).fields({
+            node: true,
+            size: true
+          }, (res) => {
+            const { node, width, height } = res;
+            canvasSetting(node, width, height);
+          }).exec();
+        } else {
+          const canvasDom = document.getElementById(`${canvasId}`);
+          let canvas = canvasDom;
+          if ((canvasDom == null ? void 0 : canvasDom.tagName) !== "CANVAS") {
+            canvas = canvasDom == null ? void 0 : canvasDom.getElementsByTagName("canvas")[0];
+          }
+          canvasSetting(canvas, canvasDom == null ? void 0 : canvasDom.offsetWidth, canvasDom == null ? void 0 : canvasDom.offsetHeight);
+        }
+      }, 1e3);
+    });
+  };
+  useEffect(() => {
+    initCanvas();
+  }, []);
+  return React.createElement(
+    "div",
+    { className: `${b()} ${className}`, ...rest },
+    React.createElement("div", { className: `${b("inner")} spcanvas_WEAPP`, ref: wrapRef }, getEnv() === "WEAPP" || getEnv() === "JD" ? React.createElement("canvas", {
+      id: canvasId,
+      ref: canvasRef,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      canvasId,
+      disalbeScroll: true,
+      type: "2d",
+      onTouchStart: startEventHandler,
+      onTouchMove: moveEventHandler,
+      onTouchEnd: endEventHandler
+    }) : React.createElement("canvas", { id: canvasId, ref: canvasRef, "canvas-id": canvasId, "disalbe-scroll": disalbeScroll, onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler, onTouchCancel: endEventHandler })),
+    React.createElement(Button, { className: `${b("btn")}`, type: "default", onClick: () => handleClearBtn() }, locale.signature.reSign),
+    React.createElement(Button, { className: `${b("btn")}`, type: "primary", onClick: () => handleConfirmBtn() }, locale.confirm)
+  );
+};
+Signature.defaultProps = defaultProps;
+Signature.displayName = "NutSignature";
+export {
+  Signature as S
+};

package/dist/esm/skeleton.taro-9ff9baf4.js

@@ -0,0 +1,71 @@
+import React from "react";
+import classNames from "classnames";
+import { A as Avatar } from "./avatar.taro-01536aff.js";
+import { c as cn } from "./bem-cdccae08.js";
+const defaultProps = {
+  width: "100px",
+  height: "100px",
+  row: 1,
+  animated: false,
+  title: false,
+  avatar: false,
+  round: false,
+  avatarSize: "50px",
+  loading: false,
+  avatarShape: "round"
+};
+const Skeleton = (props) => {
+  const { className, width, height, animated, row, title, avatar, avatarSize, round, loading, children, avatarShape, ...restProps } = {
+    ...defaultProps,
+    ...props
+  };
+  const b = cn("skeleton");
+  const classes = classNames(className, b());
+  const blockClass = classNames({
+    blockClass: true,
+    "blockClass--round": round
+  });
+  const avatarClass = classNames({
+    avatarClass: true,
+    [`avatarClass--${avatarShape}`]: avatarShape
+  });
+  const repeatLines = (num) => {
+    return Array.from({ length: num }, (v, i) => i);
+  };
+  const getStyle = () => {
+    if (avatarSize) {
+      return {
+        width: avatarSize,
+        height: avatarSize
+      };
+    }
+    return {
+      width: "50px",
+      height: "50px"
+    };
+  };
+  return React.createElement(React.Fragment, null, loading ? React.createElement("div", null, children) : React.createElement(
+    "div",
+    { className: classes, ...restProps },
+    animated && React.createElement("div", { className: "skeleton-animation" }),
+    React.createElement(
+      "div",
+      { className: "nut-skeleton-content" },
+      avatar && React.createElement(Avatar, { className: avatarClass, background: "rgb(239, 239, 239)", shape: avatarShape, style: getStyle() }),
+      row === 1 && React.createElement("div", { className: blockClass, style: { width, height } }),
+      React.createElement(
+        "div",
+        { className: "skeleton-content-line" },
+        title && React.createElement("div", { className: "skeleton-title" }),
+        repeatLines(row).map((item, index) => {
+          return React.createElement("div", { className: blockClass, key: index, style: { width, height } });
+        })
+      )
+    )
+  ));
+};
+Skeleton.defaultProps = defaultProps;
+Skeleton.displayName = "NutSkeleton";
+export {
+  Skeleton as S
+};

package/dist/esm/step.taro-2f55e4f2.js

@@ -0,0 +1,63 @@
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./context-ab42ba7f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  title: "",
+  description: "",
+  value: 0,
+  icon: null
+};
+const Step = (props) => {
+  const { children, title, description, value, icon, className, ...restProps } = {
+    ...defaultProps,
+    ...props
+  };
+  const parent = useContext(DataContext);
+  const dot = parent.propSteps.dot;
+  const getCurrentStatus = () => {
+    const index = value;
+    if (index < +parent.propSteps.value)
+      return "finish";
+    return index === +parent.propSteps.value ? "process" : "wait";
+  };
+  const handleClickStep = () => {
+    var _a, _b;
+    ((_a = parent.propSteps) == null ? void 0 : _a.onStepClick) && ((_b = parent.propSteps) == null ? void 0 : _b.onStepClick(value));
+  };
+  const classPrefix = `nut-step`;
+  const classes = classNames({
+    [`${classPrefix}-${getCurrentStatus()}`]: true
+  }, className, classPrefix);
+  const renderIconClass = () => {
+    if (icon) {
+      return `${classPrefix}-icon is-icon`;
+    }
+    if (!dot && !icon) {
+      return `${classPrefix}-icon is-text`;
+    }
+    return `${classPrefix}-icon`;
+  };
+  return React.createElement(
+    "div",
+    { className: classes, ...restProps, onClick: handleClickStep },
+    React.createElement(
+      "div",
+      { className: "nut-step-head" },
+      React.createElement("div", { className: "nut-step-line" }),
+      React.createElement("div", { className: renderIconClass() }, icon || !dot && React.createElement("span", { className: "nut-step-inner" }, value))
+    ),
+    React.createElement(
+      "div",
+      { className: "nut-step-main" },
+      React.createElement("span", { className: "nut-step-title" }, title),
+      description && React.createElement("span", { className: "nut-step-description" }, description)
+    )
+  );
+};
+Step.defaultProps = defaultProps;
+Step.displayName = "NutStep";
+export {
+  Step as S
+};

package/dist/esm/steps.taro-196c1f59.js

@@ -0,0 +1,31 @@
+import React from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./context-ab42ba7f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  value: 0,
+  direction: "horizontal",
+  dot: false
+};
+const Steps = (props) => {
+  const propSteps = { ...defaultProps, ...props };
+  const { children, value, direction, className, dot, onStepClick, ...restProps } = propSteps;
+  const parentSteps = {
+    propSteps
+  };
+  const classPrefix = `nut-steps`;
+  const classes = classNames({
+    [`${classPrefix}-${direction}`]: true,
+    [`${classPrefix}-dot`]: !!props.dot
+  }, className, classPrefix);
+  return React.createElement(DataContext.Provider, { value: parentSteps }, React.createElement("div", {
+    className: classes,
+    ...restProps
+  }, children));
+};
+Steps.defaultProps = defaultProps;
+Steps.displayName = "NutSteps";
+export {
+  Steps as S
+};

package/dist/esm/sticky.taro-f8ae8d5e.js

@@ -0,0 +1,154 @@
+import React, { useRef, useEffect, useState, useMemo, useCallback } from "react";
+import classNames from "classnames";
+import { getEnv, usePageScroll, getSystemInfoSync } from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
+function useWatch(dep, callback, config = { immediate: false }) {
+  const { immediate } = config;
+  const prev = useRef();
+  const inited = useRef(false);
+  const stop = useRef(false);
+  useEffect(() => {
+    const execute = () => callback(prev.current);
+    if (!stop.current) {
+      if (!inited.current) {
+        inited.current = true;
+        if (immediate) {
+          execute();
+        }
+      } else {
+        execute();
+      }
+      prev.current = dep;
+    }
+  }, [dep]);
+  return () => {
+    stop.current = true;
+  };
+}
+const defaultRoot = canUseDom ? window : void 0;
+const overflowStylePatterns = ["scroll", "auto", "overlay"];
+function isElement(node) {
+  const ELEMENT_NODE_TYPE = 1;
+  return node.nodeType === ELEMENT_NODE_TYPE;
+}
+function getScrollParent(el, root = defaultRoot) {
+  let node = el;
+  while (node && node !== root && isElement(node)) {
+    if (node === document.body) {
+      return root;
+    }
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowStylePatterns.includes(overflowY) && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return root;
+}
+const defaultProps = {
+  ...ComponentDefaults,
+  position: "top",
+  zIndex: 2e3
+};
+const classPrefix = "nut-sticky";
+const Sticky = (props) => {
+  const { position, zIndex, threshold, style, children, container, className, onChange, ...rest } = { ...defaultProps, ...props };
+  const stickyRef = useRef(null);
+  const rootRef = useRef(null);
+  const [rootRect, setRootRect] = useState({});
+  const [fixed, setFixed] = useState(false);
+  const [transform, setTransform] = useState(0);
+  useWatch(fixed, () => {
+    onChange && onChange(fixed);
+  });
+  const rootStyle = useMemo(() => {
+    if (!fixed) {
+      return {
+        height: "",
+        width: ""
+      };
+    }
+    const style2 = {};
+    if (rootRect.height) {
+      style2.height = rootRect.height;
+    }
+    if (rootRect.width) {
+      style2.width = rootRect.width;
+    }
+    return style2;
+  }, [fixed, rootRect.height, rootRect.width]);
+  const stickyStyle = useMemo(() => {
+    if (!fixed) {
+      return {
+        height: "",
+        width: "",
+        [position]: ""
+      };
+    }
+    const style2 = {};
+    if (rootRect.height)
+      style2.height = rootRect.height;
+    if (rootRect.width)
+      style2.width = rootRect.width;
+    style2.transform = `translate3d(0, ${transform}px, 0)`;
+    style2[position] = threshold;
+    style2.zIndex = zIndex;
+    return style2;
+  }, [fixed, rootRect.height, rootRect.width, transform, position]);
+  const handleScroll = async (scrollTop) => {
+    const curRootRect = await getRectByTaro(rootRef.current);
+    const stickyRect = await getRectByTaro(stickyRef.current);
+    if (curRootRect && stickyRect) {
+      setRootRect(curRootRect);
+      if (position === "top") {
+        if (container) {
+          const containerRect = await getRectByTaro(container.current);
+          const difference = containerRect.bottom - threshold - curRootRect.height;
+          const curTransform = difference < 0 ? difference : 0;
+          setTransform(curTransform);
+          const curFixed = threshold > curRootRect.top && containerRect.bottom > 0;
+          setFixed(curFixed);
+        } else {
+          setFixed(threshold > curRootRect.top);
+        }
+      } else {
+        const windowHeight = getSystemInfoSync().windowHeight;
+        setFixed(windowHeight - threshold < curRootRect.bottom);
+      }
+    } else {
+      console.log("getRectByTaro获取失败", { stickyRect, curRootRect });
+    }
+  };
+  const getElement = useCallback(() => {
+    return getScrollParent(rootRef.current);
+  }, []);
+  useEffect(() => {
+    if (getEnv() === "WEB" && getElement() !== window) {
+      window.addEventListener("touchmove", handleScroll, true);
+      window.addEventListener("scroll", handleScroll, true);
+      return () => {
+        window.removeEventListener("touchmove", handleScroll);
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, []);
+  usePageScroll((res) => {
+    if (getEnv() === "WEAPP") {
+      handleScroll(res.scrollTop);
+    }
+  });
+  return React.createElement(
+    "div",
+    { ref: rootRef, style: rootStyle, className: classNames(classPrefix, className), ...rest },
+    React.createElement("div", { className: classNames("nut-sticky--box", {
+      "nut-sticky--fixed": fixed
+    }), ref: stickyRef, style: stickyStyle }, children)
+  );
+};
+Sticky.defaultProps = defaultProps;
+Sticky.displayName = "NutSticky";
+export {
+  Sticky as S
+};