@sheinx/shineout-style 3.0.0-alpha.1

package/esm/date-picker/date-picker.js

@@ -0,0 +1,581 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var _inputBorder = _interopRequireDefault(require("../input/input-border"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var inputBorderToken = {
+  lineHeight: _theme.default.lineHeightDynamic,
+  borderRadius: _theme.default.datePickerBorderRadius,
+  fontSize: _theme.default.datePickerFontSize,
+  smallFontSize: _theme.default.datePickerSmallFontSize,
+  largeFontSize: _theme.default.datePickerLargeFontSize,
+  paddingY: _theme.default.datePickerPaddingY,
+  smallPaddingY: _theme.default.datePickerSmallPaddingY,
+  largePaddingY: _theme.default.datePickerLargePaddingY,
+  paddingX: _theme.default.datePickerPaddingX,
+  smallPaddingX: _theme.default.datePickerSmallPaddingX,
+  largePaddingX: _theme.default.datePickerLargePaddingX,
+  borderColor: _theme.default.datePickerBorderColor,
+  focusBorderColor: _theme.default.datePickerFocusBorderColor,
+  hoverBorderColor: _theme.default.datePickerHoverBorderColor,
+  disabledBorderColor: _theme.default.datePickerDisabledBorderColor,
+  errorBorderColor: _theme.default.datePickerErrorBorderColor,
+  fontColor: _theme.default.datePickerFontColor,
+  disabledFontColor: _theme.default.datePickerDisabledFontColor,
+  backgroundColor: _theme.default.datePickerBackgroundColor,
+  disabledBackgroundColor: _theme.default.datePickerDisabledBackgroundColor,
+  focusShadow: _theme.default.datePickerFocusShadow,
+  errorFocusShadow: _theme.default.datePickerErrorFocusShadow,
+  innerTitlePaddingY: _theme.default.inputInnerPaddingY,
+  innerTitlePaddingX: _theme.default.inputInnerPaddingX,
+  smallInnerTitlePaddingY: _theme.default.inputInnerSmallPaddingY,
+  smallInnerTitlePaddingX: _theme.default.inputInnerSmallPaddingX,
+  largeInnerTitlePaddingY: _theme.default.inputInnerLargePaddingY,
+  largeInnerTitlePaddingX: _theme.default.inputInnerLargePaddingX
+};
+var inputBorder = (0, _inputBorder.default)('wrapper', inputBorderToken);
+var wrapper = inputBorder.wrapper,
+  wrapperDisabled = inputBorder.wrapperDisabled,
+  resetWrapper = (0, _objectWithoutProperties2.default)(inputBorder, ["wrapper", "wrapperDisabled"]);
+var datePickerStyle = _objectSpread(_objectSpread({
+  wrapper: _objectSpread({
+    display: 'inline-block',
+    position: 'relative',
+    width: _theme.default.datePickerDateWidth,
+    '&[data-soui-type="datetime"]': {
+      width: _theme.default.datePickerDatetimeWidth
+    }
+  }, wrapper),
+  wrapperDisabled: _objectSpread(_objectSpread({}, wrapperDisabled), {}, {
+    '& $icon': {
+      color: _theme.default.datePickerDisabledFontColor
+    }
+  }),
+  wrapperRange: {
+    width: _theme.default.datePickerDateRangeWidth,
+    '&[data-soui-type="datetime"]': {
+      width: _theme.default.datePickerDatetimeRangeWidth
+    }
+  }
+}, resetWrapper), {}, {
+  resultWrapper: {
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    position: 'relative',
+    outline: 'none',
+    '&:hover': {
+      '& $clear': {
+        display: 'inline-flex'
+      },
+      '& $clear + $icon': {
+        display: 'none'
+      }
+    }
+  },
+  result: {
+    display: 'flex',
+    flex: '1',
+    minWidth: 0,
+    alignItems: 'center',
+    lineHeight: _theme.default.lineHeightDynamic
+  },
+  resultTextWrapper: {
+    display: 'flex',
+    flex: '1',
+    minWidth: 0,
+    textAlign: 'left'
+  },
+  resultAlignLeft: {
+    '& $resultTextWrapper': {
+      textAlign: 'left'
+    }
+  },
+  resultAlignRight: {
+    '& $resultTextWrapper': {
+      textAlign: 'right'
+    }
+  },
+  resultAlignCenter: {
+    '& $resultTextWrapper': {
+      textAlign: 'center'
+    }
+  },
+  resultText: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    position: 'relative',
+    flex: '1',
+    minWidth: 0,
+    '&::before': {
+      content: '""',
+      display: 'inline-block'
+    }
+  },
+  resultTextPadding: {
+    position: 'absolute',
+    padding: "0 ".concat(_theme.default.datePickerResultTextPaddingX),
+    left: "calc(-1 * ".concat(_theme.default.datePickerResultTextPaddingX, ")"),
+    right: "calc(-1 * ".concat(_theme.default.datePickerResultTextPaddingX, ")"),
+    top: '0',
+    bottom: '0',
+    borderRadius: _theme.default.datePickerResultTextBorderRadius,
+    '& > input': {
+      color: 'inherit',
+      padding: '0',
+      border: '0',
+      outline: '0',
+      fontSize: 'inherit',
+      lineHeight: _theme.default.lineHeightDynamic,
+      backgroundColor: 'transparent',
+      width: '100%',
+      '&::placeholder': {
+        color: _theme.default.datePickerPlaceholderColor
+      }
+    }
+  },
+  resultTextActive: {
+    '& $resultTextPadding': {
+      backgroundColor: _theme.default.datePickerResultTextActiveBackgroundColor
+    }
+  },
+  resultTextDisabled: {
+    color: _theme.default.datePickerDisabledFontColor,
+    cursor: 'not-allowed'
+  },
+  placeholder: {
+    color: _theme.default.datePickerPlaceholderColor
+  },
+  resultSeparator: {
+    display: 'inline-block',
+    padding: '0 8px'
+  },
+  icon: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: _theme.default.datePickerIconColor,
+    '& svg': {
+      width: _theme.default.datePickerIconSize,
+      height: _theme.default.datePickerIconSize
+    },
+    // todo 暂时写死
+    marginLeft: '8px'
+  },
+  clear: {
+    display: 'none',
+    color: _theme.default.datePickerClearColor,
+    '&: hover': {
+      color: _theme.default.datePickerHoverClearColor
+    },
+    cursor: 'pointer'
+  },
+  pickerWrapper: {
+    position: 'absolute',
+    backgroundColor: _theme.default.datePickerPanelBackgroundColor,
+    boxShadow: _theme.default.datePickerPanelShadow,
+    borderRadius: _theme.default.datePickerPanelRadius
+  },
+  pickerBox: {
+    display: 'flex'
+  },
+  picker: {
+    '&:not(:first-child):last-child': {
+      '& $pickerHeader,& $pickerBody,& $pickerFooter, & $pickerTitle': {
+        marginLeft: _theme.default.datePickerPanelMargin
+      },
+      '& $pickerHeader': {
+        position: 'relative',
+        '&::before': {
+          width: _theme.default.datePickerPanelMargin,
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          bottom: '-1px',
+          left: '0',
+          transform: 'translateX(-100%)',
+          borderBottom: "1px solid ".concat(_theme.default.datePickerPanelHeaderBorderColor)
+        }
+      },
+      '& $pickerFooter': {
+        position: 'relative',
+        '&::before': {
+          width: _theme.default.datePickerPanelMargin,
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          top: '-1px',
+          left: '0',
+          transform: 'translateX(-100%)',
+          borderBottom: "1px solid ".concat(_theme.default.datePickerPanelHeaderBorderColor)
+        }
+      }
+    }
+  },
+  pickerWrapperOpen: {},
+  pickerTitle: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontSize: _theme.default.datePickerPanelTitleFontSize,
+    paddingTop: _theme.default.datePickerPanelTitlePaddingTop,
+    textAlign: 'center'
+  },
+  pickerHeader: {
+    padding: "".concat(_theme.default.datePickerPanelHeaderPaddingY, " ").concat(_theme.default.datePickerPanelHeaderPaddingX),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottom: "1px solid ".concat(_theme.default.datePickerPanelHeaderBorderColor)
+  },
+  pickerHeaderRight: {},
+  pickerHeaderLeft: {
+    '&, $pickerHeaderRight': {
+      display: 'flex'
+    }
+  },
+  pickerHeaderIcon: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    width: _theme.default.datePickerPanelHeaderIconHotWidth,
+    height: _theme.default.datePickerPanelHeaderIconHotWidth,
+    borderRadius: '50%',
+    '& svg': {
+      width: _theme.default.datePickerPanelHeaderIconWidth,
+      height: _theme.default.datePickerPanelHeaderIconWidth
+    },
+    '&:hover': {
+      backgroundColor: _theme.default.datePickerPanelHeaderIconHoverBackgroundColor
+    }
+  },
+  pickerHeaderMid: {
+    display: 'flex',
+    alignItems: 'center',
+    '& > span': {
+      padding: "0 ".concat(_theme.default.datePickerPanelHeaderTitlePaddingX),
+      fontSize: _theme.default.datePickerPanelHeaderFontSize
+    }
+  },
+  pickerHeaderInfo: {
+    cursor: 'pointer',
+    borderRadius: '2px',
+    '&:hover': {
+      backgroundColor: _theme.default.datePickerPanelHeaderIconHoverBackgroundColor
+    }
+  },
+  pickerBody: {
+    fontSize: _theme.default.datePickerPanelBodyFontSize,
+    padding: "".concat(_theme.default.datePickerPanelBodyPaddingY, " ").concat(_theme.default.datePickerPanelBodyPaddingX),
+    '& table': {
+      textAlign: 'center',
+      borderCollapse: 'collapse',
+      border: '0',
+      tableLayout: 'fixed',
+      boxSizing: 'border-box'
+    },
+    '& th, & td': {
+      boxSizing: 'border-box',
+      padding: '0',
+      fontWeight: 'normal'
+    },
+    '& th': {
+      color: _theme.default.datePickerCellHeaderColor,
+      height: _theme.default.datePickerCellHeight
+    }
+  },
+  pickerFooter: {
+    borderTop: "1px solid ".concat(_theme.default.datePickerPanelHeaderBorderColor),
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  pickerFooterLeft: {
+    padding: "".concat(_theme.default.datePickerPanelFooterPaddingY, " ").concat(_theme.default.datePickerPanelFooterPaddingX)
+  },
+  pickerFooterRight: {
+    padding: "".concat(_theme.default.datePickerPanelFooterPaddingY, " ").concat(_theme.default.datePickerPanelFooterPaddingX),
+    '&:only-child': {
+      width: '100%',
+      textAlign: 'center'
+    }
+  },
+  pickerRow: {},
+  pickerRowWeek: {
+    '& $pickerCell:nth-child(2)': {
+      '& $pickerCellContent': {
+        paddingLeft: _theme.default.datePickerCellMarginY
+      }
+    },
+    '& $pickerCell:nth-child(8)': {
+      '& $pickerCellContent': {
+        paddingRight: _theme.default.datePickerCellMarginY
+      }
+    },
+    '& $pickerCell:not(:nth-child(2))': {
+      '& $pickerCellContent >span': {
+        borderTopLeftRadius: '0',
+        borderBottomLeftRadius: '0'
+      }
+    },
+    '& $pickerCell:not(:nth-child(8))': {
+      '& $pickerCellContent >span': {
+        borderTopRightRadius: '0',
+        borderBottomRightRadius: '0'
+      }
+    },
+    '& $pickerCellContent > span': {
+      width: '100%'
+    },
+    '&:hover': {
+      '& :not($pickerCellActive):not($pickerCellDisabled) $pickerCellContent > span': {
+        backgroundColor: _theme.default.datePickerCellHoverBackgroundColor,
+        color: _theme.default.datePickerCellHoverColor
+      },
+      '& $pickerCellInRange:not($pickerCellActive):not($pickerCellDisabled) $pickerCellContent > span': {
+        backgroundColor: _theme.default.datePickerCellActiveHoverBackgroundColor
+      },
+      '& :not($pickerCellDisabled)$pickerCellActive $pickerCellContent': {
+        backgroundColor: _theme.default.datePickerCellActiveHoverBackgroundColor
+      }
+    }
+  },
+  pickerCell: {
+    color: _theme.default.datePickerCellColor,
+    '&$pickerCellBound': {
+      color: _theme.default.datePickerCellOtherColor
+    },
+    '&:not($pickerCellDisabled):not($pickerCellActive):hover': {
+      '&  span': {
+        backgroundColor: _theme.default.datePickerCellHoverBackgroundColor,
+        color: _theme.default.datePickerCellHoverColor
+      }
+    },
+    '&$pickerCellInRange:not($pickerCellActive):not($pickerCellDisabled):hover': {
+      '&  span': {
+        backgroundColor: _theme.default.datePickerCellActiveHoverBackgroundColor
+      }
+    },
+    '&$pickerCellActive:not($pickerCellDisabled):hover $pickerCellContent': {
+      backgroundColor: _theme.default.datePickerCellActiveHoverBackgroundColor
+    }
+  },
+  pickerCellContent: {
+    marginTop: _theme.default.datePickerCellMarginY,
+    cursor: 'pointer',
+    position: 'relative',
+    height: _theme.default.datePickerCellHeight,
+    lineHeight: _theme.default.datePickerCellHeight,
+    '& span': {
+      display: 'inline-block',
+      minWidth: _theme.default.datePickerCellHotHeight,
+      height: _theme.default.datePickerCellHotHeight,
+      lineHeight: _theme.default.datePickerCellHotHeight,
+      borderRadius: _theme.default.datePickerCellHotHeight
+    }
+  },
+  pickerCellBound: {},
+  pickerCellToday: {
+    '& $pickerCellContent::before': {
+      content: '""',
+      width: _theme.default.datePickerCellMarginY,
+      height: _theme.default.datePickerCellMarginY,
+      bottom: '0',
+      left: '0',
+      right: '0',
+      margin: 'auto',
+      borderRadius: '50%',
+      position: 'absolute',
+      transform: 'translateY(100%)',
+      backgroundColor: _theme.default.datePickerCellActiveBackgroundColor
+    }
+  },
+  pickerCellActive: {
+    '& $pickerCellContent > span': {
+      color: _theme.default.datePickerCellActiveColor,
+      backgroundColor: _theme.default.datePickerCellActiveBackgroundColor
+    }
+  },
+  pickerCellInRange: {
+    '& > $pickerCellContent': {
+      backgroundColor: _theme.default.datePickerCellRangeBackgroundColor
+    }
+  },
+  pickerCellInRangeStart: {
+    '& > $pickerCellContent': {
+      borderTopLeftRadius: _theme.default.datePickerCellHeight,
+      borderBottomLeftRadius: _theme.default.datePickerCellHeight
+    }
+  },
+  pickerCellInRangeEnd: {
+    '& > $pickerCellContent': {
+      borderTopRightRadius: _theme.default.datePickerCellHeight,
+      borderBottomRightRadius: _theme.default.datePickerCellHeight
+    }
+  },
+  pickerCellDisabled: {
+    color: _theme.default.datePickerCellDisabledColor,
+    '& > $pickerCellContent': {
+      backgroundColor: _theme.default.datePickerCellDisabledBackgroundColor,
+      cursor: 'not-allowed'
+    }
+  },
+  dayPicker: {
+    '& table': {
+      width: _theme.default.datePickerDayPanelWidth
+    }
+  },
+  yearPicker: {
+    '& table': {
+      width: _theme.default.datePickerYearPanelWidth
+    },
+    '& $pickerCellContent span': {
+      minWidth: _theme.default.datePickerYearCellHotWidth
+    }
+  },
+  monthPicker: {
+    '& table': {
+      width: _theme.default.datePickerMonthPanelWidth
+    },
+    '& $pickerCellContent span': {
+      minWidth: _theme.default.datePickerMonthCellHotWidth
+    }
+  },
+  quarterPicker: {
+    '& table': {
+      width: _theme.default.datePickerQuarterPanelWidth
+    },
+    '& $pickerCellContent span': {
+      minWidth: _theme.default.datePickerQuarterCellHotWidth
+    }
+  },
+  weekPicker: {
+    '& table': {
+      width: _theme.default.datePickerWeekPanelWidth
+    }
+  },
+  timePicker: {
+    '& $pickerBody': {
+      display: 'flex',
+      width: _theme.default.datePickerTimePanelWidth,
+      padding: "".concat(_theme.default.datePickerTimePanelPaddingY, " ").concat(_theme.default.datePickerTimePanelPaddingX, " "),
+      boxSizing: 'border-box',
+      position: 'relative'
+    }
+  },
+  timeList: {
+    '&:not(:first-child)': {
+      marginLeft: _theme.default.datePickerTimeListGap
+    },
+    display: 'flex',
+    flex: '1',
+    flexDirection: 'column',
+    height: "calc(".concat(_theme.default.datePickerTimeItemHeight, " * 9)"),
+    paddingTop: "calc(".concat(_theme.default.datePickerTimeItemHeight, " * 4)"),
+    paddingBottom: "calc(".concat(_theme.default.datePickerTimeItemHeight, " * 4)"),
+    overflow: 'auto',
+    boxSizing: 'border-box',
+    textAlign: 'center',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
+  },
+  timeItem: {
+    position: 'relative',
+    minHeight: _theme.default.datePickerTimeItemHeight,
+    boxSizing: 'border-box',
+    lineHeight: _theme.default.datePickerTimeItemHeight,
+    cursor: 'pointer'
+  },
+  timeItemActive: {
+    fontWeight: 'bold'
+  },
+  timeItemDisabled: {
+    color: _theme.default.datePickerTimeItemDisabledColor,
+    cursor: 'not-allowed'
+  },
+  timeBase: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: _theme.default.datePickerTimePanelPaddingX,
+    right: _theme.default.datePickerTimePanelPaddingX,
+    margin: 'auto',
+    display: 'flex',
+    height: _theme.default.datePickerTimeItemHeight
+  },
+  timeBaseItem: {
+    '&:not(:first-child)': {
+      marginLeft: _theme.default.datePickerTimeListGap
+    },
+    flex: '1',
+    height: '100%',
+    background: _theme.default.datePickerTimeItemActiveBackgroundColor,
+    borderRadius: '4px'
+  },
+  datetime: {
+    fontSize: _theme.default.datePickerPanelBodyFontSize,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: _theme.default.lineHeightDynamic,
+    '& > span': {
+      lineHeight: '0',
+      marginRight: '8px',
+      '& > svg': {
+        width: _theme.default.datePickerIconSize,
+        height: _theme.default.datePickerIconSize,
+        color: _theme.default.datePickerIconColor
+      }
+    },
+    '& $timePicker': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      transform: 'translateY(-100%)',
+      backgroundColor: _theme.default.datePickerPanelBackgroundColor,
+      boxShadow: _theme.default.datePickerPanelShadow,
+      opacity: '0',
+      zIndex: '-1',
+      visibility: 'hidden'
+    },
+    '&:hover $timePicker': {
+      zIndex: '1',
+      opacity: '1',
+      visibility: 'visible'
+    }
+  },
+  quickPicker: {
+    padding: "".concat(_theme.default.datePickerQuickPanelPaddingY, " ").concat(_theme.default.datePickerQuickPanelPaddingX),
+    display: 'flex',
+    flexDirection: 'column',
+    borderRight: "1px solid ".concat(_theme.default.datePickerPanelHeaderBorderColor)
+  },
+  quickPickerItem: {
+    '&:not(:first-child)': {
+      marginTop: _theme.default.datePickerQuickPanelGap
+    },
+    whiteSpace: 'nowrap',
+    textAlign: 'left',
+    fontSize: _theme.default.datePickerQuickPanelItemFontSize,
+    padding: "".concat(_theme.default.datePickerQuickPanelItemPaddingY, " ").concat(_theme.default.datePickerQuickPanelItemPaddingX),
+    lineHeight: _theme.default.lineHeightDynamic,
+    borderRadius: '4px',
+    '&:hover': {
+      backgroundColor: _theme.default.datePickerQuickPanelItemHoverBackgroundColor,
+      cursor: 'pointer'
+    }
+  },
+  pickerFooterBtn: {}
+});
+var _default = datePickerStyle;
+exports.default = _default;

package/esm/date-picker/index.d.ts

@@ -0,0 +1,4 @@
+import datePickerStyle from './date-picker';
+declare const useDatePickerStyle: (data?: undefined) => import("jss").Classes<import("./date-picker").DatePickerClass>;
+export { datePickerStyle, useDatePickerStyle };
+export default useDatePickerStyle;

package/esm/date-picker/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "datePickerStyle", {
+  enumerable: true,
+  get: function get() {
+    return _datePicker.default;
+  }
+});
+exports.useDatePickerStyle = exports.default = void 0;
+var _jssStyle = require("../jss-style");
+var _datePicker = _interopRequireDefault(require("./date-picker"));
+var useDatePickerStyle = (0, _jssStyle.styled)(_datePicker.default, 'datePicker');
+exports.useDatePickerStyle = useDatePickerStyle;
+var _default = useDatePickerStyle;
+exports.default = _default;

package/esm/divider/divider.d.ts

@@ -0,0 +1,14 @@
+import { JsStyles } from '../jss-style';
+export interface DividerClasses {
+    wrapper: string;
+    vertical: string;
+    horizontal: string;
+    withText: string;
+    withTextCenter: string;
+    withTextLeft: string;
+    withTextRight: string;
+    innerText: string;
+}
+export declare type DividerClassesKeys = keyof DividerClasses;
+declare const dividerStyle: JsStyles<DividerClassesKeys>;
+export default dividerStyle;

package/esm/divider/divider.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var dividerStyle = {
+  wrapper: {
+    margin: 0,
+    padding: 0,
+    borderTop: "".concat(_theme.default.dividerBorderWidth, " solid ").concat(_theme.default.dividerBorderColor)
+  },
+  vertical: {
+    position: 'relative',
+    top: '-0.06em',
+    display: 'inline-block',
+    height: '0.9em',
+    margin: "0 ".concat(_theme.default.dividerVerticalMarginX),
+    verticalAlign: 'middle',
+    borderTop: 0,
+    borderLeft: "".concat(_theme.default.dividerBorderWidth, " solid ").concat(_theme.default.dividerBorderColor)
+  },
+  horizontal: {
+    display: 'flex',
+    clear: 'both',
+    width: '100%',
+    minWidth: '100%',
+    margin: "".concat(_theme.default.dividerHorizontalMarginY, " 0")
+  },
+  withText: {
+    display: 'flex',
+    margin: "".concat(_theme.default.dividerHorizontalTextMarginY, " 0"),
+    whiteSpace: 'nowrap',
+    textAlign: 'center',
+    borderTopWidth: 0,
+    '&::before, &::after': {
+      position: 'relative',
+      top: '50%',
+      width: '50%',
+      borderTop: "".concat(_theme.default.dividerBorderWidth, " solid transparent"),
+      borderTopColor: 'inherit',
+      borderBottom: 0,
+      transform: 'translateY(50%)',
+      content: '""'
+    }
+  },
+  withTextCenter: {
+    '&::before': {
+      width: '50%'
+    },
+    '&::after': {
+      width: '50%'
+    }
+  },
+  withTextLeft: {
+    '&::before': {
+      width: '5%'
+    },
+    '&::after': {
+      width: '95%'
+    }
+  },
+  withTextRight: {
+    '&::before': {
+      width: '95%'
+    },
+    '&::after': {
+      width: '5%'
+    }
+  },
+  innerText: {
+    display: 'inline-block',
+    padding: "0  ".concat(_theme.default.dividerTextPaddingX),
+    fontSize: _theme.default.dividerFontSize,
+    color: _theme.default.dividerFontColor
+  }
+};
+var _default = dividerStyle;
+exports.default = _default;