deepsea-components 1.3.3 → 2.0.0

package/dist/index.js

@@ -1,816 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { css } from "@emotion/css";
-import clsx from "clsx";
-import { drawArc, setFrameInterval } from "deepsea-tools";
-import React, { Fragment, forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
-import SmoothScrollBar from "smooth-scrollbar";
-import { read, utils, writeFile } from "xlsx";
-export async function getFileData(file, type) {
-  const fileReader = new FileReader();
-  switch (type) {
-    case "arrayBuffer":
-      fileReader.readAsArrayBuffer(file);
-      break;
-    case "binary":
-      fileReader.readAsBinaryString(file);
-      break;
-    case "base64":
-      fileReader.readAsDataURL(file);
-      break;
-    case "text":
-      fileReader.readAsText(file);
-      break;
-    default:
-      return file;
-  }
-  return new Promise(resolve => {
-    fileReader.addEventListener("load", () => {
-      resolve(fileReader.result);
-    });
-  });
-}
-
-/** 专用与读取文件的组件 */
-export const InputFile = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    multiple = false,
-    type = "file",
-    onChange,
-    disabled: inputDisabled,
-    ...others
-  } = props;
-  const [disabled, setDisabled] = useState(false);
-  async function onInputChange(e) {
-    const input = e.target;
-    const {
-      files
-    } = input;
-    if (!files || files.length === 0) return;
-    setDisabled(true);
-    try {
-      if (multiple) {
-        const result = [];
-        for (const file of files) {
-          result.push({
-            result: await getFileData(file, type),
-            file
-          });
-        }
-        onChange?.(result);
-      } else {
-        onChange?.({
-          result: await getFileData(files[0], type),
-          file: files[0]
-        });
-      }
-      setDisabled(false);
-      input.value = "";
-    } catch (error) {
-      setDisabled(false);
-      input.value = "";
-      throw error;
-    }
-  }
-  return /*#__PURE__*/React.createElement("input", _extends({
-    disabled: disabled && inputDisabled,
-    ref: ref,
-    type: "file",
-    multiple: multiple,
-    onChange: onInputChange
-  }, others));
-});
-/** 专门用于读取 excel 的组件 */
-export const ImportExcel = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onChange,
-    ...others
-  } = props;
-  function onInputChange(data) {
-    const wb = read(data.result);
-    const result = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
-    if (typeof result === "object") {
-      const $ = result.map(it => {
-        const _ = {};
-        Object.keys(it).filter(key => key !== "__rowNum__").forEach(key => _[key] = String(it[key]));
-        return _;
-      });
-      onChange?.($);
-    }
-  }
-  return /*#__PURE__*/React.createElement(InputFile, _extends({
-    ref: ref,
-    accept: ".xlsx",
-    type: "arrayBuffer",
-    onChange: onInputChange
-  }, others));
-});
-
-/** 手动导出 excel */
-export function exportExcel(data, name) {
-  const workSheet = utils.json_to_sheet(data);
-  const workBook = utils.book_new();
-  utils.book_append_sheet(workBook, workSheet);
-  writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
-}
-/** 导出 excel 的 button 组件 */
-export const ExportExcel = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    data,
-    fileName,
-    onClick,
-    ...others
-  } = props;
-  function onButtonClick(e) {
-    exportExcel(data, fileName);
-    onClick?.(e);
-  }
-  return /*#__PURE__*/React.createElement("button", _extends({
-    ref: ref,
-    onClick: onButtonClick
-  }, others));
-});
-/** 尺寸渐变的组件 */
-export const TransitionBox = props => {
-  const {
-    style,
-    containerClassName,
-    containerStyle,
-    children,
-    vertical = true,
-    horizontal = true,
-    time = 3000,
-    ...others
-  } = props;
-  const box = useRef(null);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const [count, setCount] = useState(0);
-  useEffect(() => {
-    const observer = new ResizeObserver(entries => {
-      const {
-        width: currentWidth,
-        height: currentHeight
-      } = entries[0].contentRect;
-      setWidth(currentWidth);
-      setHeight(currentHeight);
-    });
-    observer.observe(box.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-  useEffect(() => {
-    setCount(count => Math.min(count + 1, 3));
-  }, [width, height]);
-  const outerStyle = {
-    transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : undefined,
-    transitionDuration: count === 3 ? `${time}ms` : undefined,
-    width,
-    height,
-    overflow: "hidden",
-    position: "relative",
-    ...style
-  };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    style: outerStyle
-  }, others), /*#__PURE__*/React.createElement("div", {
-    className: containerClassName,
-    style: {
-      position: "absolute",
-      ...containerStyle
-    },
-    ref: box
-  }, children));
-};
-/** 雷达组件 */
-export const SeaRadar = props => {
-  const {
-    unitRadius = 50,
-    circleCount = 4,
-    circleWidth = 1,
-    circleColor,
-    directionCount = 36,
-    directionWidth = 1,
-    directionColor,
-    backgroundColor,
-    scanColor,
-    scanAngle = Math.PI / 6,
-    period = 8,
-    targets,
-    showGraduationLine,
-    showGraduationText,
-    showCircle,
-    showDirection
-  } = props;
-  const style = {
-    "--unit-radius": `${unitRadius}px`,
-    "--circle-count": circleCount,
-    "--circle-width": `${circleWidth}px`,
-    "--circle-color": circleColor,
-    "--direction-count": directionCount,
-    "--direction-width": `${directionWidth}px`,
-    "--direction-color": directionColor,
-    "--background-color": backgroundColor,
-    "--scan-color": scanColor,
-    "--period": `${period}s`
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar-wrapper",
-    style: style
-  }, Array(180).fill(0).map((_, index) => /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar-little-graduation",
-    style: {
-      transform: `rotateZ(${2 * index}deg)`,
-      display: showGraduationLine ? "block" : "none"
-    }
-  })), Array(36).fill(0).map((_, index) => /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar-graduation",
-    style: {
-      transform: `rotateZ(${10 * index}deg)`,
-      display: showGraduationLine ? "block" : "none"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "sea-radar-graduation-text",
-    style: {
-      display: showGraduationText ? "block" : "none"
-    }
-  }, String(index * 10).padStart(3, "0")))), /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar-scan",
-    style: {
-      height: `${unitRadius * circleCount * Math.tan(scanAngle)}px`,
-      clipPath: `polygon(0 0, 0 100%, 100% 100%)`
-    }
-  }), showCircle && Array(circleCount).fill(0).map((_, index) => /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar-circle",
-    style: {
-      width: `${unitRadius * 2 * (index + 1)}px`,
-      height: `${unitRadius * 2 * (index + 1)}px`
-    }
-  })), showDirection && Array(directionCount).fill(0).map((_, index) => /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar-direction",
-    style: {
-      transform: `rotateZ(${360 / directionCount * index}deg)`
-    }
-  })), targets?.map(it => /*#__PURE__*/React.createElement("div", {
-    className: "sea-radar-target",
-    style: {
-      left: `${unitRadius * circleCount + it.radius * Math.cos(it.angle)}px`,
-      bottom: `${unitRadius * circleCount + it.radius * Math.sin(it.angle)}px`
-    }
-  }, it.element))));
-};
-/** 忘了什么组件 */
-export const Ring = props => {
-  const {
-    outerWidth,
-    innerWidth,
-    style,
-    ...leftProps
-  } = props;
-  const outerRadius = outerWidth / 2;
-  const innerRadius = innerWidth / 2;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    style: {
-      ...style,
-      width: `${outerWidth}px`,
-      height: `${outerWidth}px`,
-      clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")`
-    }
-  }, leftProps));
-};
-export function getGapRange(gap) {
-  if (typeof gap === "number") return [gap, gap];
-  if (Array.isArray(gap)) return [gap[0] || 0, gap[1]];
-  return [0, null];
-}
-export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
-  const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
-  if (count === 1) return [count, 0];
-  const averageGap = (width - itemWidth * count) / (count - 1);
-  if (averageGap < minGap) return [count, minGap];
-  if (maxGap !== null && averageGap > maxGap) return [count, maxGap];
-  return [count, averageGap];
-}
-
-/** 自适应浮动组件 */
-export function Flow(props) {
-  const {
-    itemWidth,
-    itemHeight,
-    columnGap,
-    rowGap = 0,
-    maxRows,
-    data,
-    render,
-    keyExactor,
-    className,
-    style,
-    containerClassName,
-    containerStyle,
-    throttle,
-    transitionDuration,
-    onSizeChange,
-    ...others
-  } = props;
-  const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
-  const [width, setWidth] = useState(0);
-  const [columnCount, setColumnCount] = useState(1);
-  const [columnGapSize, setColumnGapSize] = useState(minColumnGap);
-  const [showItems, setShowItems] = useState(false);
-  const ele = useRef(null);
-  const contentRows = Math.ceil(data.length / columnCount);
-  const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
-  const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
-  function getPosition(index) {
-    const y = Math.floor(index / columnCount);
-    const x = index - y * columnCount;
-    return {
-      left: x * (itemWidth + columnGapSize),
-      top: y * (itemHeight + rowGap)
-    };
-  }
-  function getHidden(index) {
-    if (typeof maxRows !== "number") return false;
-    return index >= maxRows * columnCount;
-  }
-  useEffect(() => {
-    let timeout;
-    const observer = new ResizeObserver(entries => {
-      clearTimeout(timeout);
-      function task() {
-        const {
-          inlineSize: width
-        } = entries[0].borderBoxSize[0];
-        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
-        setShowItems(true);
-        setWidth(width);
-        setColumnCount(newColumnCount);
-        setColumnGapSize(newColumnGapSize);
-      }
-      if (throttle === null) {
-        task();
-      } else {
-        timeout = window.setTimeout(task, throttle || 200);
-      }
-    });
-    observer.observe(ele.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [itemWidth, throttle, columnGap]);
-  useEffect(() => {
-    onSizeChange?.({
-      width,
-      height,
-      itemWidth,
-      itemHeight,
-      columnGap: columnGapSize,
-      columnCount,
-      rowGap,
-      rowCount: contentShownRows,
-      overflow: data.length > contentShownRows * columnCount,
-      itemCount: data.length,
-      maxRows: maxRows ?? null
-    });
-  }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ele,
-    className: className,
-    style: {
-      position: "relative",
-      boxSizing: "border-box",
-      height,
-      ...style
-    }
-  }, others), showItems && data.map((it, idx) => /*#__PURE__*/React.createElement("div", {
-    key: keyExactor?.(it, idx) || idx,
-    className: containerClassName,
-    style: {
-      position: "absolute",
-      width: itemWidth,
-      height: itemHeight,
-      transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,
-      ...getPosition(idx)
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: itemWidth,
-      height: itemHeight,
-      display: maxRows && idx >= maxRows * columnCount ? "none" : "block",
-      ...containerStyle
-    }
-  }, render(it, idx, getHidden(idx))))));
-}
-/** 梯形组件 */
-export const Trapezium = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    top,
-    bottom,
-    height,
-    borderRadius,
-    style,
-    ...other
-  } = props;
-  const diff = (bottom - top) / 2;
-  const a = Math.atan(height / diff) / 2;
-  const b = borderRadius / Math.tan(a);
-  const c = b * Math.cos(a * 2);
-  const d = b * Math.sin(a * 2);
-  const e = Math.PI / 2 - a;
-  const f = borderRadius / Math.tan(e);
-  const g = f * Math.cos(a * 2);
-  const h = f * Math.sin(a * 2);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    style: {
-      width: bottom,
-      height,
-      clipPath: `path("M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z")`,
-      ...style
-    }
-  }, other));
-});
-/** 循环播放组件 */
-export function LoopSwiper(props) {
-  const {
-    data,
-    render,
-    keyExactor,
-    size,
-    gap = 0,
-    start = 0,
-    speed,
-    paused = false,
-    className = "",
-    direction = "x"
-  } = props;
-  if (!(size > 0 && (speed > 0 || speed < 0))) {
-    throw new RangeError("size 必须是正数，speed 必须非0");
-  }
-  const keys = data.map((it, idx, arr) => keyExactor ? keyExactor(it, idx, arr) : String(idx));
-  const keysRef = useRef(keys);
-  const cache = useRef({
-    size,
-    gap,
-    speed,
-    keys,
-    paused,
-    className,
-    direction
-  });
-  cache.current = {
-    size,
-    gap,
-    speed,
-    keys,
-    paused,
-    className,
-    direction
-  };
-  const eles = useRef(keys.map((key, idx) => ({
-    key,
-    dom: null,
-    offset: idx * (size + gap) + start
-  })));
-  if (keysRef.current.length !== keys.length || keysRef.current.some((it, idx) => it !== keys[idx])) {
-    keysRef.current = keys;
-    eles.current = keys.map((key, idx) => ({
-      key,
-      dom: null,
-      offset: idx * (size + gap) + start
-    }));
-  }
-  function setStyles() {
-    const {
-      size,
-      speed,
-      className,
-      direction
-    } = cache.current;
-    eles.current.forEach(it => {
-      it.dom.className = className;
-      it.dom.style.setProperty("position", `absolute`);
-      it.dom.style.setProperty("width", `${size}px`);
-      direction === "x" && speed < 0 ? it.dom.style.setProperty("right", `0`) : it.dom.style.setProperty("left", `0`);
-      direction === "y" && speed < 0 ? it.dom.style.setProperty("bottom", `0`) : it.dom.style.setProperty("top", `0`);
-      it.dom.style.setProperty("transform", `translate${direction.toUpperCase()}(${it.offset * (speed > 0 ? 1 : -1)}px)`);
-    });
-  }
-  useEffect(() => {
-    setStyles();
-  }, []);
-  useEffect(() => {
-    const stop = setFrameInterval(() => {
-      const {
-        size,
-        gap,
-        speed,
-        keys,
-        paused
-      } = cache.current;
-      if (paused) return;
-      eles.current.length = keys.length;
-      let minIndex = 0;
-      eles.current.forEach((it, idx) => {
-        if (it.offset < eles.current[minIndex].offset) {
-          minIndex = idx;
-        }
-      });
-      const minOffset = eles.current[minIndex].offset;
-      eles.current.forEach((it, idx) => {
-        let index = idx;
-        if (idx < minIndex) index = eles.current.length + idx;
-        it.offset = minOffset + (index - minIndex) * (size + gap);
-        let newOffset = it.offset - Math.abs(speed);
-        if (newOffset + size + gap <= 0) {
-          newOffset += eles.current.length * (size + gap);
-        }
-        it.offset = newOffset;
-      });
-      setStyles();
-    }, 1);
-    return stop;
-  }, []);
-  function ref(dom, index) {
-    if (!eles.current[index]) return;
-    eles.current[index].dom = dom;
-  }
-  return /*#__PURE__*/React.createElement(Fragment, null, data.map((it, idx, arr) => /*#__PURE__*/React.createElement("div", {
-    key: keys[idx],
-    ref: dom => ref(dom, idx)
-  }, render(it, idx, arr))));
-}
-export const SectionRing = props => {
-  const {
-    outerRadius: o,
-    innerRadius: i,
-    count: c,
-    angel: a,
-    style,
-    ...others
-  } = props;
-  const s = Math.PI * 2 / c - a;
-  function arc(radius, startAngle, endAngle, options = {}) {
-    return drawArc(o, o, radius, startAngle, endAngle, options);
-  }
-  return /*#__PURE__*/React.createElement("div", _extends({
-    style: {
-      ...style,
-      width: o * 2,
-      height: o * 2,
-      clipPath: `path("${Array(c).fill(0).map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), {
-        line: true,
-        anticlockwise: true
-      })}`).join(" ")} Z")`
-    }
-  }, others));
-};
-/** 渐变数字组件 */
-export const TransitionNum = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children: num,
-    period,
-    numToStr,
-    ...others
-  } = props;
-  if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
-    throw new RangeError("目标数字必须是整数，周期必须是正整数");
-  }
-  const ele = useRef(null);
-  const cache = useRef({
-    num,
-    period,
-    numToStr,
-    show: num
-  });
-  cache.current = {
-    ...cache.current,
-    num,
-    period,
-    numToStr
-  };
-  useImperativeHandle(ref, () => ({
-    get: () => cache.current.show
-  }), []);
-  useEffect(() => {
-    const {
-      num,
-      period,
-      show,
-      numToStr
-    } = cache.current;
-    ele.current.innerText = (numToStr || String)(show);
-    if (num === show) return;
-    const div = ele.current;
-    const speed = (num - show) / period;
-    const cancel = setFrameInterval(() => {
-      const {
-        num,
-        numToStr
-      } = cache.current;
-      cache.current.show += speed;
-      if (speed > 0 && cache.current.show > num || speed < 0 && cache.current.show < num) {
-        cancel();
-        cache.current.show = num;
-      }
-      div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show));
-    }, 1);
-    return cancel;
-  }, [num]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ele
-  }, others));
-});
-/** 环形文字 */
-export const CircleText = props => {
-  const {
-    width,
-    height,
-    radius,
-    startAngel = 0,
-    gapAngel = 0,
-    align = "center",
-    style,
-    direction = "outer",
-    reverse = false,
-    separator,
-    children,
-    ...others
-  } = props;
-  const unitAngle = Math.atan(width / 2 / radius) * 2;
-  const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
-  const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2;
-  function getTransform(idx) {
-    const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
-    const x = (radius + height / 2) * Math.cos(angle) - width / 2;
-    const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
-    const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0);
-    return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
-  }
-  const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "");
-  if (reverse) words.reverse();
-  return /*#__PURE__*/React.createElement(Fragment, null, words.map((w, idx) => /*#__PURE__*/React.createElement("span", _extends({
-    key: idx,
-    style: {
-      position: "absolute",
-      ...style,
-      transform: getTransform(idx),
-      textAlign: "center",
-      width,
-      lineHeight: `${height}px`,
-      height: height
-    }
-  }, others), w)));
-};
-/**
- * 滚动条组件
- * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上
- */
-export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children,
-    containerClassName,
-    containerStyle,
-    options,
-    className,
-    ...others
-  } = props;
-  const {
-    thumbWidth,
-    ...scrollbarOptions
-  } = options || {};
-  const id = useId();
-  useEffect(() => {
-    SmoothScrollBar.init(document.querySelector(`[data-scroll-id="${id}"]`), scrollbarOptions);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(!!thumbWidth && css`
-                        .scrollbar-track.scrollbar-track-x {
-                            height: ${thumbWidth}px;
-                        }
-
-                        .scrollbar-thumb.scrollbar-thumb-x {
-                            height: ${thumbWidth}px;
-                        }
-
-                        .scrollbar-track.scrollbar-track-y {
-                            width: ${thumbWidth}px;
-                        }
-
-                        .scrollbar-thumb.scrollbar-thumb-y {
-                            width: ${thumbWidth}px;
-                        }
-                    `, className),
-    "data-scroll-id": id
-  }, others), /*#__PURE__*/React.createElement("div", {
-    className: containerClassName,
-    style: containerStyle
-  }, children));
-});
-export const X = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    display: flex;
-                `, className)
-  }, others));
-});
-export const Y = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    display: flex;
-                    flex-direction: column;
-                `, className)
-  }, others));
-});
-export const Auto = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    flex: auto;
-                `, className)
-  }, others));
-});
-export const None = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    flex: none;
-                `, className)
-  }, others));
-});
-export const XAuto = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    display: flex;
-                    flex: auto;
-                `, className)
-  }, others));
-});
-export const YAuto = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    display: flex;
-                    flex-direction: column;
-                    flex: auto;
-                `, className)
-  }, others));
-});
-export const XNone = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    display: flex;
-                    flex: none;
-                `, className)
-  }, others));
-});
-export const YNone = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    ...others
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(css`
-                    display: flex;
-                    flex-direction: column;
-                    flex: none;
-                `, className)
-  }, others));
-});
-//# sourceMappingURL=index.js.map