@ebscn/ui 1.0.0 → 1.0.1-beta.1

package/es/components/picker-view/picker-view.js

@@ -0,0 +1,86 @@
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { Wheel } from './wheel';
+import { useColumnsExtend } from './columns-extend';
+import { withNativeProps } from '../../utils/native-props';
+import { useDebounceEffect } from 'ahooks';
+import { defaultRenderLabel } from '../picker/picker-utils';
+var classPrefix = "ebscn-picker-view";
+var defaultProps = {
+  defaultValue: [],
+  renderLabel: defaultRenderLabel,
+  mouseWheel: false,
+  loadingContent: React.createElement(React.Fragment, null)
+};
+export var PickerView = memo(function (p) {
+  var props = mergeProps(defaultProps, p);
+  var _a = useState(props.value === undefined ? props.defaultValue : props.value),
+    innerValue = _a[0],
+    setInnerValue = _a[1];
+  // Sync `value` to `innerValue`
+  useEffect(function () {
+    if (props.value === undefined) return; // Uncontrolled mode
+    if (props.value === innerValue) return;
+    setInnerValue(props.value);
+  }, [props.value]);
+  useEffect(function () {
+    if (props.value === innerValue) return;
+    var timeout = window.setTimeout(function () {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return function () {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
+  var extend = useColumnsExtend(props.columns, innerValue);
+  var columns = extend.columns;
+  useDebounceEffect(function () {
+    var _a;
+    if (props.value === innerValue) return;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, extend);
+  }, [innerValue], {
+    wait: 0,
+    leading: false,
+    trailing: true
+  });
+  var handleSelect = useCallback(function (val, index) {
+    setInnerValue(function (prev) {
+      var next = __spreadArray([], prev, true);
+      next[index] = val;
+      return next;
+    });
+  }, []);
+  return withNativeProps(props, React.createElement("div", {
+    className: "".concat(classPrefix)
+  }, props.loading ? props.loadingContent : React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    return React.createElement(Wheel, {
+      key: index,
+      index: index,
+      column: column,
+      value: innerValue[index],
+      onSelect: handleSelect,
+      renderLabel: props.renderLabel,
+      mouseWheel: props.mouseWheel
+    });
+  }), React.createElement("div", {
+    className: "".concat(classPrefix, "-mask")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-mask-top")
+  }), React.createElement("div", {
+    className: "".concat(classPrefix, "-mask-middle")
+  }), React.createElement("div", {
+    className: "".concat(classPrefix, "-mask-bottom")
+  })))));
+});
+PickerView.displayName = 'PickerView';

package/es/components/picker-view/wheel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+type Props = {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+    renderLabel: (item: PickerColumnItem) => ReactNode;
+    mouseWheel: boolean;
+};
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};

package/es/components/picker-view/wheel.js

@@ -0,0 +1,243 @@
+import React, { memo, useRef } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag, useWheel } from '@use-gesture/react';
+import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
+import { bound } from '../../utils/bound';
+import isEqual from 'react-fast-compare';
+import { useIsomorphicLayoutEffect } from 'ahooks';
+import { measureCSSLength } from '../../utils/measure-css-length';
+import { supportsPassive } from '../../utils/supports-passive';
+var classPrefix = "ebscn-picker-view";
+export var Wheel = memo(function (props) {
+  var value = props.value,
+    column = props.column,
+    renderLabel = props.renderLabel;
+  function onSelect(val) {
+    props.onSelect(val, props.index);
+  }
+  var _a = useSpring(function () {
+      return {
+        from: {
+          y: 0
+        },
+        config: {
+          tension: 400,
+          mass: 0.8
+        }
+      };
+    }),
+    y = _a[0].y,
+    api = _a[1];
+  var draggingRef = useRef(false);
+  var rootRef = useRef(null);
+  var itemHeightMeasureRef = useRef(null);
+  var itemHeight = useRef(34);
+  useIsomorphicLayoutEffect(function () {
+    var itemHeightMeasure = itemHeightMeasureRef.current;
+    if (!itemHeightMeasure) return;
+    itemHeight.current = measureCSSLength(window.getComputedStyle(itemHeightMeasure).getPropertyValue('height'));
+  });
+  useIsomorphicLayoutEffect(function () {
+    if (draggingRef.current) return;
+    if (value === null) return;
+    var targetIndex = column.findIndex(function (item) {
+      return item.value === value;
+    });
+    if (targetIndex < 0) return;
+    var finalPosition = targetIndex * -itemHeight.current;
+    api.start({
+      y: finalPosition,
+      immediate: y.goal !== finalPosition
+    });
+  }, [value, column]);
+  useIsomorphicLayoutEffect(function () {
+    if (column.length === 0) {
+      if (value !== null) {
+        onSelect(null);
+      }
+    } else {
+      if (!column.some(function (item) {
+        return item.value === value;
+      })) {
+        var firstItem = column[0];
+        onSelect(firstItem.value);
+      }
+    }
+  }, [column, value]);
+  function scrollSelect(index) {
+    var finalPosition = index * -itemHeight.current;
+    api.start({
+      y: finalPosition
+    });
+    var item = column[index];
+    if (!item) return;
+    onSelect(item.value);
+  }
+  var handleGestureState = function (state) {
+    var _a = state.direction,
+      direction = _a[1],
+      _b = state.distance,
+      distance = _b[1],
+      _c = state.velocity,
+      velocity = _c[1],
+      _d = state.offset,
+      offset = _d[1],
+      last = state.last;
+    return {
+      direction: direction,
+      distance: distance,
+      velocity: velocity,
+      offset: offset,
+      last: last
+    };
+  };
+  var handleDrag = function (state) {
+    draggingRef.current = true;
+    var min = -((column.length - 1) * itemHeight.current);
+    var max = 0;
+    var _a = handleGestureState(state),
+      direction = _a.direction,
+      last = _a.last,
+      velocity = _a.velocity,
+      offset = _a.offset;
+    if (last) {
+      draggingRef.current = false;
+      var position = offset + velocity * direction * 50;
+      var boundNum = bound(position, min, max);
+      var targetIndex = -Math.round(boundNum / itemHeight.current);
+      scrollSelect(targetIndex);
+    } else {
+      var position = offset;
+      api.start({
+        y: rubberbandIfOutOfBounds(position, min, max, itemHeight.current * 50, 0.2)
+      });
+    }
+  };
+  var handleWheel = function (state) {
+    draggingRef.current = true;
+    var min = -((column.length - 1) * itemHeight.current);
+    var max = 0;
+    var _a = handleGestureState(state),
+      direction = _a.direction,
+      last = _a.last,
+      velocity = _a.velocity,
+      distance = _a.distance;
+    var whellDir = -direction; // 取反
+    var scrollY = y.get();
+    if (last) {
+      draggingRef.current = false;
+      var speed = velocity * whellDir * 50;
+      var position = scrollY + distance * whellDir + speed;
+      var boundNum = bound(position, min, max);
+      var targetIndex = -Math.round(boundNum / itemHeight.current);
+      scrollSelect(targetIndex);
+    } else {
+      var position = scrollY + distance * whellDir;
+      api.start({
+        y: rubberbandIfOutOfBounds(position, min, max, itemHeight.current * 50, 0.2)
+      });
+    }
+  };
+  useDrag(function (state) {
+    state.event.stopPropagation();
+    handleDrag(state);
+  }, {
+    axis: 'y',
+    from: function () {
+      return [0, y.get()];
+    },
+    filterTaps: true,
+    pointer: {
+      touch: true
+    },
+    target: rootRef
+  });
+  useWheel(function (state) {
+    state.event.stopPropagation();
+    handleWheel(state);
+  }, {
+    target: props.mouseWheel ? rootRef : undefined,
+    axis: 'y',
+    from: function () {
+      return [0, y.get()];
+    },
+    preventDefault: true,
+    eventOptions: supportsPassive ? {
+      passive: false
+    } : undefined
+  });
+  var selectedIndex = null;
+  function renderAccessible() {
+    if (selectedIndex === null) {
+      return null;
+    }
+    var current = column[selectedIndex];
+    var previousIndex = selectedIndex - 1;
+    var nextIndex = selectedIndex + 1;
+    var previous = column[previousIndex];
+    var next = column[nextIndex];
+    return React.createElement("div", {
+      className: "".concat(classPrefix, "-column-accessible")
+    }, React.createElement("div", {
+      className: "".concat(classPrefix, "-column-accessible-current"),
+      role: 'button',
+      "aria-label": current ? "\u5F53\u524D\u9009\u62E9\u7684\u662F\uFF1A".concat(current.label) : '当前未选择'
+    }, "-"), React.createElement("div", {
+      className: "".concat(classPrefix, "-column-accessible-button"),
+      onClick: function () {
+        if (!previous) return;
+        scrollSelect(previousIndex);
+      },
+      role: previous ? 'button' : 'text',
+      "aria-label": !previous ? '没有上一项' : "\u9009\u62E9\u4E0A\u4E00\u9879\uFF1A".concat(previous.label)
+    }, "-"), React.createElement("div", {
+      className: "".concat(classPrefix, "-column-accessible-button"),
+      onClick: function () {
+        if (!next) return;
+        scrollSelect(nextIndex);
+      },
+      role: next ? 'button' : 'text',
+      "aria-label": !next ? '没有下一项' : "\u9009\u62E9\u4E0B\u4E00\u9879\uFF1A".concat(next.label)
+    }, "-"));
+  }
+  return React.createElement("div", {
+    className: "".concat(classPrefix, "-column")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-item-height-measure"),
+    ref: itemHeightMeasureRef
+  }), React.createElement(animated.div, {
+    ref: rootRef,
+    style: {
+      translateY: y
+    },
+    className: "".concat(classPrefix, "-column-wheel"),
+    "aria-hidden": true
+  }, column.map(function (item, index) {
+    var _a;
+    var selected = props.value === item.value;
+    if (selected) selectedIndex = index;
+    function handleClick() {
+      draggingRef.current = false;
+      scrollSelect(index);
+    }
+    return React.createElement("div", {
+      key: (_a = item.key) !== null && _a !== void 0 ? _a : item.value,
+      "data-selected": item.value === value,
+      className: "".concat(classPrefix, "-column-item"),
+      onClick: handleClick,
+      "aria-hidden": !selected,
+      "aria-label": selected ? 'active' : ''
+    }, React.createElement("div", {
+      className: "".concat(classPrefix, "-column-item-label")
+    }, renderLabel(item)));
+  })), renderAccessible());
+}, function (prev, next) {
+  if (prev.index !== next.index) return false;
+  if (prev.value !== next.value) return false;
+  if (prev.onSelect !== next.onSelect) return false;
+  if (prev.renderLabel !== next.renderLabel) return false;
+  if (prev.mouseWheel !== next.mouseWheel) return false;
+  if (!isEqual(prev.column, next.column)) return false;
+  return true;
+});
+Wheel.displayName = 'Wheel';

package/es/components/popup/index.d.ts

@@ -0,0 +1,4 @@
+import './popup.less';
+import { Popup } from './popup';
+export type { PopupProps } from './popup';
+export default Popup;

package/es/components/popup/index.js

@@ -0,0 +1,3 @@
+import "./popup.css";
+import { Popup } from './popup';
+export default Popup;

package/es/components/popup/popup-base-props.d.ts

@@ -0,0 +1,51 @@
+import type { CSSProperties, ReactNode } from 'react';
+import React from 'react';
+import { GetContainer } from '../../utils/render-to-container';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { NativeProps } from '@ebscn/ui/utils/native-props';
+type MaskProps = {
+    visible?: boolean;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    destroyOnClose?: boolean;
+    forceRender?: boolean;
+    disableBodyScroll?: boolean;
+    color?: 'white' | 'black' | (string & {});
+    opacity?: 'default' | 'thin' | 'thick' | number;
+    getContainer?: GetContainer;
+    afterShow?: () => void;
+    afterClose?: () => void;
+    stopPropagation?: PropagationEvent[];
+    children?: ReactNode;
+} & NativeProps<'--z-index'>;
+export type PopupBaseProps = {
+    afterClose?: () => void;
+    afterShow?: () => void;
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    closeOnMaskClick?: boolean;
+    destroyOnClose?: boolean;
+    disableBodyScroll?: boolean;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    mask?: boolean;
+    maskClassName?: string;
+    maskStyle?: MaskProps['style'];
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClose?: () => void;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    showCloseButton?: boolean;
+    stopPropagation?: PropagationEvent[];
+    visible?: boolean;
+};
+export declare const defaultPopupBaseProps: {
+    closeOnMaskClick: boolean;
+    destroyOnClose: boolean;
+    disableBodyScroll: boolean;
+    forceRender: boolean;
+    getContainer: () => HTMLElement;
+    mask: boolean;
+    showCloseButton: boolean;
+    stopPropagation: string[];
+    visible: boolean;
+};
+export {};

package/es/components/popup/popup-base-props.js

@@ -0,0 +1,13 @@
+export var defaultPopupBaseProps = {
+  closeOnMaskClick: false,
+  destroyOnClose: false,
+  disableBodyScroll: true,
+  forceRender: false,
+  getContainer: function () {
+    return document.body;
+  },
+  mask: true,
+  showCloseButton: false,
+  stopPropagation: ['click'],
+  visible: false
+};

package/es/components/popup/popup.css

@@ -0,0 +1,57 @@
+.ebscn-popup {
+  --z-index: var(--ebscn-popup-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.ebscn-popup-body {
+  position: fixed;
+  background-color: var(--ebscn-color-background);
+  z-index: calc(var(--z-index) + 10);
+}
+.ebscn-popup-body .ebscn-popup-close-icon {
+  position: absolute;
+  z-index: 100;
+}
+.ebscn-popup-body-position-bottom {
+  width: 100%;
+  bottom: 0;
+  left: 0;
+}
+.ebscn-popup-body-position-bottom .ebscn-popup-close-icon {
+  left: 8px;
+  top: 8px;
+}
+.ebscn-popup-body-position-top {
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.ebscn-popup-body-position-top .ebscn-popup-close-icon {
+  left: 8px;
+  bottom: 8px;
+}
+.ebscn-popup-body-position-left {
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.ebscn-popup-body-position-left .ebscn-popup-close-icon {
+  left: 8px;
+  top: 8px;
+}
+.ebscn-popup-body-position-right {
+  height: 100%;
+  top: 0;
+  right: 0;
+}
+.ebscn-popup-body-position-right .ebscn-popup-close-icon {
+  left: 8px;
+  top: 8px;
+}
+.ebscn-popup-close-icon {
+  cursor: pointer;
+  padding: 4px;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--ebscn-color-weak);
+}

package/es/components/popup/popup.d.ts

@@ -0,0 +1,8 @@
+import type { FC, PropsWithChildren } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PopupBaseProps } from './popup-base-props';
+export type PopupProps = PopupBaseProps & PropsWithChildren<{
+    position?: 'bottom' | 'top' | 'left' | 'right';
+    closeOnSwipe?: boolean;
+}> & NativeProps<'--z-index'>;
+export declare const Popup: FC<PopupProps>;

package/es/components/popup/popup.js

@@ -0,0 +1,135 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
+import Mask from '../mask';
+import { CloseOutline } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import React, { useRef, useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { renderToContainer } from '../../utils/render-to-container';
+import { ShouldRender } from '../../utils/should-render';
+import { useInnerVisible } from '../../utils/use-inner-visible';
+import { useLockScroll } from '../../utils/use-lock-scroll';
+import { mergeProps } from '../../utils/with-default-props';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
+import { defaultPopupBaseProps } from './popup-base-props';
+var classPrefix = "ebscn-popup";
+var defaultProps = __assign(__assign({}, defaultPopupBaseProps), {
+  closeOnSwipe: false,
+  position: 'bottom'
+});
+export var Popup = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var bodyCls = classNames("".concat(classPrefix, "-body"), props.bodyClassName, "".concat(classPrefix, "-body-position-").concat(props.position));
+  var _a = useState(props.visible),
+    active = _a[0],
+    setActive = _a[1];
+  var ref = useRef(null);
+  useLockScroll(ref, props.disableBodyScroll && active ? 'strict' : false);
+  useIsomorphicLayoutEffect(function () {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  var unmountedRef = useUnmountedRef();
+  var percent = useSpring({
+    percent: props.visible ? 0 : 100,
+    config: {
+      precision: 0.1,
+      mass: 0.4,
+      tension: 300,
+      friction: 30
+    },
+    onRest: function () {
+      var _a, _b;
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    }
+  }).percent;
+  var bind = useDrag(function (_a) {
+    var _b;
+    var _c = _a.swipe,
+      swipeY = _c[1];
+    if (!props.closeOnSwipe) return;
+    if (swipeY === 1 && props.position === 'bottom' || swipeY === -1 && props.position === 'top') {
+      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+    }
+  }, {
+    axis: 'y',
+    enabled: ['top', 'bottom'].includes(props.position)
+  });
+  var maskVisible = useInnerVisible(active && props.visible);
+  var node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", __assign({
+    className: classPrefix,
+    onClick: props.onClick,
+    style: {
+      display: active ? undefined : 'none',
+      touchAction: ['top', 'bottom'].includes(props.position) ? 'none' : 'auto'
+    }
+  }, bind()), props.mask && React.createElement(Mask, {
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: function (e) {
+      var _a, _b;
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
+    className: props.maskClassName,
+    style: props.maskStyle,
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
+  }), React.createElement(animated.div, {
+    className: bodyCls,
+    style: __assign(__assign({}, props.bodyStyle), {
+      pointerEvents: percent.to(function (v) {
+        return v === 0 ? 'unset' : 'none';
+      }),
+      transform: percent.to(function (v) {
+        if (props.position === 'bottom') {
+          return "translate(0, ".concat(v, "%)");
+        }
+        if (props.position === 'top') {
+          return "translate(0, -".concat(v, "%)");
+        }
+        if (props.position === 'left') {
+          return "translate(-".concat(v, "%, 0)");
+        }
+        if (props.position === 'right') {
+          return "translate(".concat(v, "%, 0)");
+        }
+        return 'none';
+      })
+    }),
+    ref: ref
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames("".concat(classPrefix, "-close-icon"), 'ebscn-plain-anchor'),
+    onClick: function () {
+      var _a;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    },
+    role: "button"
+  }, React.createElement(CloseOutline, null)), props.children))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
+};

package/es/components/pro-selector/index.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import './pro-selector.less';
+export type { ProSelectorProps } from './pro-selector';
+declare const _default: (<V extends string | number>(props: {
+    defaultValue?: V[] | undefined;
+    label?: import("react").ReactNode;
+    head?: import("react").ReactNode;
+    value?: V[] | undefined;
+    options: import("../selector").SelectorOption<V>[];
+    fieldNames?: import("../../hooks").FieldNamesType | undefined;
+    multiple?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selectorButtonProps?: import("../button").SelectorButtonProps | undefined;
+    selectorProps?: Pick<import("../selector").SelectorProps<V>, "className" | "style" | "showCheckMark"> | undefined;
+    checkBoxProps?: Pick<import("../checkbox").CheckboxProps, "className" | "style" | "size" | "icon"> | undefined;
+    radioProps?: Pick<import("../radio").RadioProps, "className" | "style" | "size" | "icon"> | undefined;
+    popupProps?: import("../popup").PopupProps | undefined;
+    onChange?: ((v: V[], extend: {
+        items: import("../selector").SelectorOption<V>[];
+    }) => void) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & {
+    onClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => unknown) | undefined;
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    Body: <T extends string | number>(p: import("./pro-selector").ProSelectorProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};
+export default _default;

package/es/components/pro-selector/index.js

@@ -0,0 +1,6 @@
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Body, ProSelector } from './pro-selector';
+import "./pro-selector.css";
+export default attachPropertiesToComponent(ProSelector, {
+  Body: Body
+});

package/es/components/pro-selector/pro-selector.css

@@ -0,0 +1,11 @@
+.ebscn-pro-selector-option-line:not(:last-child) {
+  border-bottom: 1px solid var(--ebscn-color-split-line);
+}
+.ebscn-pro-selector-head {
+  text-align: center;
+}
+.ebscn-pro-selector-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}