@sheinx/shineout-style 3.0.0-alpha.1

package/esm/tag/tag.js

@@ -0,0 +1,203 @@
+"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;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.concat.js");
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+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 tag = function tag(type) {
+  return {
+    // bright 亮色风格
+    '&$bright': {
+      color: _theme.default["tag".concat(type, "FontColor")],
+      backgroundColor: _theme.default["tag".concat(type, "BackgroundColor")],
+      border: "1px solid ".concat(_theme.default["tag".concat(type, "BorderColor")]),
+      '& $closeIconWrapper': {
+        '&:hover': {
+          backgroundColor: _theme.default["tag".concat(type, "IconHoverBackgroundColor")]
+        }
+      },
+      '&$disabled': {
+        color: _theme.default["tag".concat(type, "DisabledFontColor")],
+        backgroundColor: _theme.default["tag".concat(type, "DisabledBackgroundColor")],
+        border: "1px solid ".concat(_theme.default["tag".concat(type, "DisabledBorderColor")]),
+        '& $closeIconWrapper': {
+          fill: _theme.default["tag".concat(type, "IconDisabledFontColor")],
+          '&:hover': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    },
+    '&$fill': {
+      color: _theme.default["tag".concat(type, "FillFontColor")],
+      backgroundColor: _theme.default["tag".concat(type, "FillBackgroundColor")],
+      border: "1px solid ".concat(_theme.default["tag".concat(type, "FillBorderColor")]),
+      '& $closeIconWrapper': {
+        fill: _theme.default["tag".concat(type, "FillFontColor")],
+        '&:hover': {
+          fill: _theme.default["tag".concat(type, "FontColor")],
+          backgroundColor: _theme.default["tag".concat(type, "IconHoverBackgroundColor")]
+        }
+      },
+      '& $closeIcon': {
+        fill: _theme.default["tag".concat(type, "FillFontColor")]
+      },
+      '&$disabled': {
+        color: _theme.default["tag".concat(type, "FillDisabledFontColor")],
+        backgroundColor: _theme.default["tag".concat(type, "FillDisabledBackgroundColor")],
+        border: "1px solid ".concat(_theme.default["tag".concat(type, "FillDisabledBorderColor")]),
+        '& $closeIconWrapper': {
+          fill: _theme.default["tag".concat(type, "FillFontColor")],
+          '&:hover': {
+            fill: _theme.default["tag".concat(type, "FillFontColor")],
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    },
+    // outline 边框风格
+    '&$outline': {
+      background: '#fff',
+      color: _theme.default["tag".concat(type, "FontColor")],
+      border: "1px solid ".concat(_theme.default["tag".concat(type, "OutlineBorderColor")]),
+      '& $closeIconWrapper': {
+        // hover
+        '&:hover': {
+          backgroundColor: _theme.default["tag".concat(type, "BackgroundColor")]
+        }
+      },
+      '&$disabled': {
+        color: _theme.default["tag".concat(type, "OutlineDisabledFontColor")],
+        backgroundColor: _theme.default["tag".concat(type, "OutlineDisabledBackgroundColor")],
+        border: "1px solid ".concat(_theme.default["tag".concat(type, "OutlineDisabledBorderColor")]),
+        '& $closeIconWrapper': {
+          fill: _theme.default["tag".concat(type, "DisabledFontColor")],
+          '&:hover': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    },
+    // brightOutline 亮色边框风格
+    '&$brightOutline': {
+      color: _theme.default["tag".concat(type, "FontColor")],
+      backgroundColor: _theme.default["tag".concat(type, "BackgroundColor")],
+      border: "1px solid ".concat(_theme.default["tag".concat(type, "OutlineBorderColor")]),
+      '& $closeIconWrapper': {
+        '&:hover': {
+          backgroundColor: _theme.default["tag".concat(type, "IconHoverBackgroundColor")]
+        }
+      },
+      '&$disabled': {
+        color: _theme.default["tag".concat(type, "DisabledFontColor")],
+        backgroundColor: _theme.default["tag".concat(type, "DisabledBackgroundColor")],
+        border: "1px solid ".concat(_theme.default["tag".concat(type, "OutlineDisabledBorderColor")]),
+        '& $closeIconWrapper': {
+          fill: _theme.default["tag".concat(type, "IconDisabledFontColor")],
+          '&:hover': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    },
+    '& $closeIcon': {
+      fill: _theme.default["tag".concat(type, "FontColor")]
+    }
+  };
+};
+var TagStyle = {
+  tag: {
+    display: 'inline-block',
+    height: _theme.default.tagHeight,
+    padding: "".concat(_theme.default.tagPaddingY, " ").concat(_theme.default.tagPaddingX),
+    fontSize: _theme.default.tagFontSize,
+    borderRadius: _theme.default.tagBorderRadius,
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    lineHeight: "calc(".concat(_theme.default.tagFontSize, " + 6px)"),
+    '& + &': {
+      marginLeft: 8
+    }
+  },
+  input: {
+    '&[data-soui-type="input"]': {
+      width: 100,
+      '& input': {
+        padding: "0 ".concat(_theme.default.tagInputPaddingX)
+      }
+    }
+  },
+  inline: {
+    display: 'inline-block',
+    verticalAlign: 'top'
+  },
+  large: {
+    height: _theme.default.tagLargeHeight,
+    fontSize: _theme.default.tagLargeFontSize,
+    lineHeight: "calc(".concat(_theme.default.tagLargeFontSize, " + 8px)"),
+    padding: "".concat(_theme.default.tagLargePaddingY, " ").concat(_theme.default.tagLargePaddingX),
+    '& $closeIconWrapper': {
+      width: 16,
+      height: 16
+    }
+  },
+  small: {
+    height: _theme.default.tagSmallHeight,
+    lineHeight: "calc(".concat(_theme.default.tagSmallFontSize, " + 6px)"),
+    padding: "0 ".concat(_theme.default.tagSmallPaddingX),
+    '& $closeIconWrapper': {
+      width: 14,
+      height: 14
+    }
+  },
+  disabled: {
+    cursor: 'not-allowed'
+  },
+  closeIcon: {
+    marginLeft: 4,
+    alignItems: 'center',
+    height: '100%',
+    display: 'inline-flex',
+    '& span': {
+      width: 14,
+      height: 14
+    }
+  },
+  closeIconWrapper: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: '50%',
+    justifyContent: 'center'
+  },
+  info: _objectSpread({}, tag('Info')),
+  default: _objectSpread({}, tag('Default')),
+  success: _objectSpread({}, tag('Success')),
+  warning: _objectSpread({}, tag('Warning')),
+  danger: _objectSpread({}, tag('Danger')),
+  orange: _objectSpread({}, tag('Orange')),
+  magenta: _objectSpread({}, tag('Magenta')),
+  purple: _objectSpread({}, tag('Purple')),
+  indigo: _objectSpread({}, tag('Indigo')),
+  cyan: _objectSpread({}, tag('Cyan')),
+  neon: _objectSpread({}, tag('Neon')),
+  lemon: _objectSpread({}, tag('Lemon')),
+  tangerine: _objectSpread({}, tag('Tangerine')),
+  fill: {},
+  bright: {},
+  outline: {},
+  brightOutline: {},
+  rounded: {
+    borderRadius: _theme.default.buttonRoundBorderRadius
+  }
+};
+var _default = TagStyle;
+exports.default = _default;

package/esm/textarea/index.d.ts

@@ -0,0 +1,4 @@
+import textareaStyle from './textarea';
+declare const useTextareaStyle: (data?: undefined) => import("jss").Classes<import("./textarea").InputClass>;
+export { textareaStyle, useTextareaStyle };
+export default useTextareaStyle;

package/esm/textarea/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "textareaStyle", {
+  enumerable: true,
+  get: function get() {
+    return _textarea.default;
+  }
+});
+exports.useTextareaStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _textarea = _interopRequireDefault(require("./textarea"));
+var useTextareaStyle = (0, _jssStyle.styled)(_textarea.default, 'textarea');
+exports.useTextareaStyle = useTextareaStyle;
+var _default = useTextareaStyle;
+exports.default = _default;

package/esm/textarea/textarea.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type InputClass = 'wrapper' | 'wrapperSmall' | 'wrapperLarge' | 'wrapperFocus' | 'wrapperError' | 'wrapperDisabled' | 'wrapperUnderline' | 'wrapperNoBorder' | 'wrapperPaddingBox' | 'wrapperInnerTitle' | 'wrapperInnerTitleTop' | 'wrapperInnerTitleBottom' | 'textarea' | 'resize' | 'shadow' | 'info' | 'infoError' | 'footer';
+declare const input: JsStyles<InputClass>;
+export default input;

package/esm/textarea/textarea.js

@@ -0,0 +1,134 @@
+"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;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _inputBorder = _interopRequireDefault(require("../input/input-border"));
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+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 inputBorder = (0, _inputBorder.default)('wrapper', {
+  lineHeight: _theme.default.lineHeightDynamic,
+  borderRadius: _theme.default.textareaBorderRadius,
+  fontSize: _theme.default.textareaFontSize,
+  smallFontSize: _theme.default.textareaSmallFontSize,
+  largeFontSize: _theme.default.textareaLargeFontSize,
+  paddingY: _theme.default.textareaPaddingY,
+  smallPaddingY: _theme.default.textareaSmallPaddingY,
+  largePaddingY: _theme.default.textareaLargePaddingY,
+  paddingX: _theme.default.textareaPaddingX,
+  smallPaddingX: _theme.default.textareaSmallPaddingX,
+  largePaddingX: _theme.default.textareaLargePaddingX,
+  borderColor: _theme.default.textareaBorderColor,
+  focusBorderColor: _theme.default.textareaFocusBorderColor,
+  hoverBorderColor: _theme.default.textareaHoverBorderColor,
+  disabledBorderColor: _theme.default.textareaDisabledBorderColor,
+  errorBorderColor: _theme.default.textareaErrorBorderColor,
+  fontColor: _theme.default.textareaFontColor,
+  disabledFontColor: _theme.default.textareaDisabledFontColor,
+  backgroundColor: _theme.default.textareaBackgroundColor,
+  disabledBackgroundColor: _theme.default.textareaDisabledBackgroundColor,
+  focusShadow: _theme.default.textareaFocusShadow,
+  errorFocusShadow: _theme.default.textareaErrorFocusShadow,
+  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 wrapper = inputBorder.wrapper,
+  resetWrapper = (0, _objectWithoutProperties2.default)(inputBorder, ["wrapper"]);
+var input = _objectSpread(_objectSpread(_objectSpread({}, inputBorder), {}, {
+  wrapper: _objectSpread({
+    display: 'inline-flex',
+    flexDirection: 'column',
+    width: '100%',
+    boxSizing: 'border-box',
+    position: 'relative',
+    flexWrap: 'wrap'
+  }, wrapper)
+}, resetWrapper), {}, {
+  textarea: {
+    padding: 0,
+    '&::placeholder': {
+      color: _theme.default.textareaPlaceholderColor
+    },
+    width: '100%',
+    background: 'transparent',
+    border: '0',
+    margin: '0',
+    lineHeight: 'inherit',
+    color: 'inherit',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    resize: 'none',
+    boxSizing: 'border-box',
+    '&$resize': {
+      resize: 'vertical'
+    }
+  },
+  resize: {
+    resize: 'vertical'
+  },
+  info: {
+    position: 'absolute',
+    right: '0',
+    top: '100%',
+    transformOrigin: '100% 0',
+    marginTop: '10px',
+    animation: 'so-input-fade .16s ease-in',
+    maxWidth: '400px',
+    padding: '5px 8px',
+    background: _theme.default.textareaInfoBackgroundColor,
+    borderRadius: _theme.default.textareaBorderRadius,
+    boxShadow: "0 0 0 1px ".concat(_theme.default.textareaBorderColor),
+    fontSize: '12px',
+    color: _theme.default.textareaInfoFontColor,
+    '&::before': {
+      display: 'block',
+      position: 'absolute',
+      right: '4px',
+      bottom: '100%',
+      transform: 'rotate(45deg) translateY(3px)',
+      width: '6px',
+      height: '6px',
+      border: "1px solid ".concat(_theme.default.textareaBorderColor),
+      borderWidth: '1px 0 0 1px',
+      background: 'inherit',
+      content: "'  '"
+    }
+  },
+  infoError: {
+    boxShadow: "0 0 0 1px ".concat(_theme.default.textareaInfoErrorBorderColor),
+    color: _theme.default.textareaInfoErrorFontColor,
+    background: _theme.default.textareaInfoErrorBackgroundColor,
+    '&::before': {
+      borderColor: _theme.default.textareaInfoErrorBorderColor
+    }
+  },
+  shadow: {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    zIndex: 0,
+    visibility: 'hidden'
+  },
+  footer: {
+    borderTop: "1px solid ".concat(_theme.default.textareaBorderColor),
+    borderRadius: 0,
+    width: '100%',
+    boxSizing: 'border-box'
+  }
+});
+var _default = input;
+exports.default = _default;

package/esm/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import tooltipStyle from './tooltip';
+declare const useTooltipStyle: (data?: undefined) => import("jss").Classes<import("./tooltip").TooltipClass>;
+export { tooltipStyle, useTooltipStyle };
+export default useTooltipStyle;

package/esm/tooltip/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "tooltipStyle", {
+  enumerable: true,
+  get: function get() {
+    return _tooltip.default;
+  }
+});
+exports.useTooltipStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _tooltip = _interopRequireDefault(require("./tooltip"));
+var useTooltipStyle = (0, _jssStyle.styled)(_tooltip.default, 'tooltip');
+exports.useTooltipStyle = useTooltipStyle;
+var _default = useTooltipStyle;
+exports.default = _default;

package/esm/tooltip/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type TooltipClass = 'wrapper' | 'wrapperOpen' | 'content' | 'target';
+declare const tooltipStyle: JsStyles<TooltipClass>;
+export default tooltipStyle;

package/esm/tooltip/tooltip.js

@@ -0,0 +1,220 @@
+"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 _theme = _interopRequireDefault(require("@sheinx/theme"));
+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 arrowGap = 12;
+var arrowMargin = '8px';
+var animation = {
+  '@keyframes fadeIn': {
+    '0%': {
+      opacity: '0'
+    },
+    '100%': {
+      opacity: '1'
+    }
+  },
+  '@keyframes moveRight': {
+    '0%': {
+      marginLeft: '0'
+    },
+    '100%': {
+      marginLeft: '9px'
+    }
+  },
+  '@keyframes moveLeft': {
+    '0%': {
+      marginLeft: '0'
+    },
+    '100%': {
+      marginLeft: '-9px'
+    }
+  },
+  '@keyframes moveTop': {
+    '0%': {
+      marginTop: '0'
+    },
+    '100%': {
+      marginTop: '-9px'
+    }
+  },
+  '@keyframes moveBottom': {
+    '0%': {
+      marginTop: '0'
+    },
+    '100%': {
+      marginTop: '9px'
+    }
+  }
+};
+var tooltipStyle = _objectSpread(_objectSpread({}, animation), {}, {
+  wrapper: {
+    display: 'none',
+    cursor: 'pointer',
+    position: 'absolute',
+    backgroundColor: _theme.default.tooltipBackgroundColor,
+    borderRadius: _theme.default.tooltipBorderRadius,
+    boxShadow: _theme.default.tooltipShadow,
+    color: _theme.default.tooltipColor,
+    '&[data-soui-type^="light"]': {
+      backgroundColor: _theme.default.tooltipLightBackgroundColor,
+      color: _theme.default.tooltipLightColor,
+      border: "1px solid ".concat(_theme.default.tooltipLightBorderColor)
+    },
+    '&[data-soui-type^="primary"]': {
+      backgroundColor: _theme.default.tooltipPrimaryBackgroundColor,
+      color: _theme.default.tooltipPrimaryColor
+    },
+    '&[data-soui-type^="success"]': {
+      backgroundColor: _theme.default.tooltipSuccessBackgroundColor,
+      color: _theme.default.tooltipSuccessColor
+    },
+    '&[data-soui-type^="warning"]': {
+      backgroundColor: _theme.default.tooltipWarningBackgroundColor,
+      color: _theme.default.tooltipWarningColor
+    },
+    '&[data-soui-type^="danger"]': {
+      backgroundColor: _theme.default.tooltipDangerBackgroundColor,
+      color: _theme.default.tooltipDangerColor
+    },
+    '&::before': {
+      'z-index': 1,
+      position: 'absolute',
+      content: '" "',
+      display: 'block',
+      border: "inherit",
+      width: '8.4px',
+      height: '8.4px',
+      boxSizing: 'content-box',
+      background: 'inherit',
+      borderLeft: 'none',
+      borderBottom: 'none'
+    },
+    '&[data-soui-position^="bottom"]': {
+      marginTop: arrowGap - 2,
+      '&::before': {
+        top: '0',
+        transform: 'translate(0, -50%) rotate(-45deg)',
+        left: '0',
+        right: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        top: arrowGap * -1,
+        left: '0',
+        right: '0',
+        content: '" "',
+        display: 'block',
+        height: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&[data-soui-position^="top"]': {
+      marginTop: (arrowGap - 2) * -1,
+      '&::before': {
+        bottom: '0',
+        transform: 'translate(0, 50%) rotate(135deg)',
+        left: '0',
+        right: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        bottom: arrowGap * -1,
+        left: '0',
+        right: '0',
+        content: '" "',
+        display: 'block',
+        height: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&[data-soui-position^="left"]': {
+      marginLeft: (arrowGap - 2) * -1,
+      '&::before': {
+        right: 0,
+        transform: 'translate(50%, 0) rotate(45deg)',
+        top: '0',
+        bottom: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        left: arrowGap * -1,
+        top: '0',
+        bottom: '0',
+        content: '" "',
+        display: 'block',
+        width: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&[data-soui-position^="right"]': {
+      marginLeft: arrowGap - 2,
+      '&::before': {
+        left: '0',
+        transform: 'translate(-50%, 0) rotate(-135deg)',
+        top: '0',
+        bottom: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        left: arrowGap * -1,
+        top: '0',
+        bottom: '0',
+        content: '" "',
+        display: 'block',
+        width: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&&[data-soui-position$="-left"]::before': {
+      left: arrowMargin,
+      right: 'auto'
+    },
+    '&&[data-soui-position$="-right"]::before': {
+      right: arrowMargin,
+      left: 'auto'
+    },
+    '&&[data-soui-position$="-top"]::before': {
+      top: arrowMargin,
+      bottom: 'auto'
+    },
+    '&&[data-soui-position$="-bottom"]::before': {
+      bottom: arrowMargin,
+      top: 'auto'
+    }
+  },
+  wrapperOpen: {
+    display: 'block',
+    '&[data-soui-position^="bottom"]': {
+      animation: '$fadeIn .3s ease, $moveBottom .3s cubic-bezier(.71,1.7,.77,1.24);'
+    },
+    '&[data-soui-position^="top"]': {
+      animation: '$fadeIn .3s ease, $moveTop .3s cubic-bezier(.71,1.7,.77,1.24);'
+    },
+    '&[data-soui-position^="left"]': {
+      animation: '$fadeIn .3s ease, $moveLeft .3s cubic-bezier(.71,1.7,.77,1.24);'
+    },
+    '&[data-soui-position^="right"]': {
+      animation: '$fadeIn .3s ease, $moveRight .3s cubic-bezier(.71,1.7,.77,1.24);'
+    }
+  },
+  target: {
+    display: 'inline-block'
+  },
+  content: {
+    padding: "".concat(_theme.default.tooltipPaddingY, " ").concat(_theme.default.tooltipPaddingX),
+    fontSize: _theme.default.tooltipFontSize
+  }
+});
+var _default = tooltipStyle;
+exports.default = _default;

package/esm/transfer/index.d.ts

@@ -0,0 +1,4 @@
+import transferStyle from './transfer';
+declare const useTransferStyle: (data?: undefined) => import("jss").Classes<"footer" | "header" | "input" | "small" | "source" | "title" | "left" | "right" | "view" | "checkbox" | "large" | "disabled" | "close" | "item" | "list" | "empty" | "simple" | "target" | "transfer" | "removeAll" | "simpleTarget" | "operations" | "count" | "itemWrapper">;
+export { transferStyle, useTransferStyle };
+export default useTransferStyle;

package/esm/transfer/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "transferStyle", {
+  enumerable: true,
+  get: function get() {
+    return _transfer.default;
+  }
+});
+exports.useTransferStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _transfer = _interopRequireDefault(require("./transfer"));
+var useTransferStyle = (0, _jssStyle.styled)(_transfer.default, 'transfer');
+exports.useTransferStyle = useTransferStyle;
+var _default = useTransferStyle;
+exports.default = _default;

package/esm/transfer/transfer.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+declare type TransferClass = 'transfer' | 'small' | 'large' | 'simple' | 'view' | 'source' | 'target' | 'close' | 'removeAll' | 'simpleTarget' | 'operations' | 'input' | 'left' | 'right' | 'header' | 'title' | 'count' | 'list' | 'item' | 'disabled' | 'checkbox' | 'itemWrapper' | 'footer' | 'empty';
+declare const TransferStyle: JsStyles<TransferClass>;
+export default TransferStyle;