@sheinx/shineout-style 3.0.0-alpha.1

package/esm/input/input-border.js

@@ -0,0 +1,112 @@
+"use strict";
+
+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 _default = function _default(name) {
+  var _$concat, _$concat2, _$concat3, _ref;
+  var token = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return _ref = {}, (0, _defineProperty2.default)(_ref, name, {
+    boxSizing: 'border-box',
+    borderRadius: token.borderRadius,
+    background: token.backgroundColor,
+    border: "1px solid ".concat(token.borderColor),
+    color: token.fontColor,
+    lineHeight: token.lineHeight,
+    fontSize: token.fontSize,
+    transition: "border-color .15s ease-in-out,box-shadow .15s ease-in-out;",
+    '&:hover': {
+      borderColor: token.hoverBorderColor
+    },
+    '[data-soui-type="input-group"] &': {
+      borderWidth: 0,
+      borderRadius: 0,
+      boxShadow: 'none',
+      backgroundColor: 'transparent',
+      flex: 1,
+      minWidth: 0
+    },
+    '[data-soui-type="input-group"] [data-soui-type="input"] + &': {
+      borderLeftWidth: '1px'
+    }
+  }), (0, _defineProperty2.default)(_ref, "".concat(name, "PaddingBox"), (_$concat = {
+    borderRadius: token.borderRadius
+  }, (0, _defineProperty2.default)(_$concat, "$".concat(name, ":not($").concat(name, "InnerTitle) &"), {
+    padding: "".concat(token.paddingY, " ").concat(token.paddingX)
+  }), (0, _defineProperty2.default)(_$concat, "$".concat(name, "Small:not($").concat(name, "InnerTitle) &"), {
+    padding: "".concat(token.smallPaddingY, " ").concat(token.smallPaddingX)
+  }), (0, _defineProperty2.default)(_$concat, "$".concat(name, "Large:not($").concat(name, "InnerTitle) &"), {
+    padding: "".concat(token.largePaddingY, " ").concat(token.largePaddingX)
+  }), _$concat)), (0, _defineProperty2.default)(_ref, "".concat(name, "InnerTitle"), {}), (0, _defineProperty2.default)(_ref, "".concat(name, "InnerTitleTop"), (_$concat2 = {}, (0, _defineProperty2.default)(_$concat2, "$".concat(name, "InnerTitle &"), {
+    paddingTop: token.innerTitlePaddingY,
+    paddingLeft: token.innerTitlePaddingX,
+    paddingRight: token.innerTitlePaddingX
+  }), (0, _defineProperty2.default)(_$concat2, "$".concat(name, "Small$").concat(name, "InnerTitle &"), {
+    paddingTop: token.smallInnerTitlePaddingY,
+    paddingLeft: token.smallInnerTitlePaddingX,
+    paddingRight: token.smallInnerTitlePaddingX
+  }), (0, _defineProperty2.default)(_$concat2, "$".concat(name, "Large$").concat(name, "InnerTitle &"), {
+    paddingTop: token.largeInnerTitlePaddingY,
+    paddingLeft: token.largeInnerTitlePaddingX,
+    paddingRight: token.largeInnerTitlePaddingX
+  }), _$concat2)), (0, _defineProperty2.default)(_ref, "".concat(name, "InnerTitleBottom"), (_$concat3 = {}, (0, _defineProperty2.default)(_$concat3, "$".concat(name, "InnerTitle &"), {
+    paddingBottom: token.innerTitlePaddingY,
+    paddingLeft: token.innerTitlePaddingX,
+    paddingRight: token.innerTitlePaddingX
+  }), (0, _defineProperty2.default)(_$concat3, "$".concat(name, "Small$").concat(name, "InnerTitle &"), {
+    paddingBottom: token.smallInnerTitlePaddingY,
+    paddingLeft: token.smallInnerTitlePaddingX,
+    paddingRight: token.smallInnerTitlePaddingX
+  }), (0, _defineProperty2.default)(_$concat3, "$".concat(name, "Large$").concat(name, "InnerTitle &"), {
+    paddingBottom: token.largeInnerTitlePaddingY,
+    paddingLeft: token.largeInnerTitlePaddingX,
+    paddingRight: token.largeInnerTitlePaddingX
+  }), _$concat3)), (0, _defineProperty2.default)(_ref, "".concat(name, "Small"), {
+    fontSize: token.smallFontSize
+  }), (0, _defineProperty2.default)(_ref, "".concat(name, "Large"), {
+    fontSize: token.largeFontSize
+  }), (0, _defineProperty2.default)(_ref, "".concat(name, "Focus"), {
+    borderColor: token.focusBorderColor,
+    boxShadow: "0 0 0 2px ".concat(token.focusShadow),
+    '&:hover': {
+      borderColor: token.focusBorderColor
+    }
+  }), (0, _defineProperty2.default)(_ref, "".concat(name, "Error"), (0, _defineProperty2.default)({
+    borderColor: token.errorBorderColor,
+    '&:hover': {
+      borderColor: token.errorBorderColor
+    }
+  }, "&$".concat(name, "Focus"), {
+    boxShadow: "0 0 0 2px ".concat(token.errorFocusShadow)
+  })), (0, _defineProperty2.default)(_ref, "".concat(name, "Disabled"), {
+    color: token.disabledFontColor,
+    backgroundColor: token.disabledBackgroundColor,
+    borderColor: token.disabledBorderColor,
+    boxShadow: 'none',
+    cursor: 'not-allowed',
+    '&:hover': {
+      borderColor: token.disabledBorderColor
+    },
+    '& *': {
+      cursor: 'not-allowed'
+    }
+  }), (0, _defineProperty2.default)(_ref, "".concat(name, "Underline"), {
+    '&&': {
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderTopColor: 'transparent',
+      borderRadius: 0,
+      boxShadow: 'none'
+    }
+  }), (0, _defineProperty2.default)(_ref, "".concat(name, "NoBorder"), {
+    '&&': {
+      borderColor: 'transparent',
+      boxShadow: 'none'
+    }
+  }), _ref;
+};
+exports.default = _default;

package/esm/input/input.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type InputClass = 'wrapper' | 'wrapperSmall' | 'wrapperLarge' | 'wrapperFocus' | 'wrapperError' | 'wrapperDisabled' | 'wrapperUnderline' | 'wrapperNoBorder' | 'wrapperInnerTitle' | 'wrapperInnerTitleTop' | 'wrapperInnerTitleBottom' | 'wrapperPaddingBox' | 'clearWrapper' | 'content' | 'input' | 'clear' | 'group' | 'groupSmall' | 'groupLarge' | 'groupFocus' | 'groupError' | 'groupDisabled' | 'groupUnderline' | 'wrapperNumber' | 'numberStep' | 'passwordToggle' | 'info' | 'infoError';
+declare const input: JsStyles<InputClass>;
+export default input;

package/esm/input/input.js

@@ -0,0 +1,244 @@
+"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-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 inputBorderToken = {
+  lineHeight: _theme.default.lineHeightDynamic,
+  borderRadius: _theme.default.inputBorderRadius,
+  fontSize: _theme.default.inputFontSize,
+  smallFontSize: _theme.default.inputSmallFontSize,
+  largeFontSize: _theme.default.inputLargeFontSize,
+  paddingY: _theme.default.inputPaddingY,
+  smallPaddingY: _theme.default.inputSmallPaddingY,
+  largePaddingY: _theme.default.inputLargePaddingY,
+  paddingX: _theme.default.inputPaddingX,
+  smallPaddingX: _theme.default.inputSmallPaddingX,
+  largePaddingX: _theme.default.inputLargePaddingX,
+  borderColor: _theme.default.inputBorderColor,
+  focusBorderColor: _theme.default.inputFocusBorderColor,
+  hoverBorderColor: _theme.default.inputHoverBorderColor,
+  disabledBorderColor: _theme.default.inputDisabledBorderColor,
+  errorBorderColor: _theme.default.inputErrorBorderColor,
+  fontColor: _theme.default.inputFontColor,
+  disabledFontColor: _theme.default.inputDisabledFontColor,
+  backgroundColor: _theme.default.inputBackgroundColor,
+  disabledBackgroundColor: _theme.default.inputDisabledBackgroundColor,
+  focusShadow: _theme.default.inputFocusShadow,
+  errorFocusShadow: _theme.default.inputErrorFocusShadow,
+  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 groupBorder = (0, _inputBorder.default)('group', inputBorderToken);
+var wrapper = inputBorder.wrapper,
+  resetWrapper = (0, _objectWithoutProperties2.default)(inputBorder, ["wrapper"]);
+var group = groupBorder.group,
+  groupSmall = groupBorder.groupSmall,
+  groupLarge = groupBorder.groupLarge,
+  resetGroup = (0, _objectWithoutProperties2.default)(groupBorder, ["group", "groupSmall", "groupLarge"]);
+var groupSpace = function groupSpace(gap) {
+  return {
+    '& > i:first-child, & > span:first-child': {
+      paddingLeft: gap
+    },
+    '& > i:last-child, & > span:last-child': {
+      paddingRight: gap
+    },
+    '& > b': {
+      padding: "0 ".concat(gap),
+      display: 'flex',
+      alignItems: 'center',
+      border: "1px solid ".concat(_theme.default.inputBorderColor),
+      borderWidth: '0 1px',
+      background: _theme.default.inputDisabledBackgroundColor,
+      fontWeight: 'normal',
+      '&:first-child': {
+        borderTopLeftRadius: _theme.default.inputBorderRadius,
+        borderBottomLeftRadius: _theme.default.inputBorderRadius,
+        borderLeftColor: 'inherit',
+        marginLeft: '-1px'
+      },
+      '&:last-child': {
+        borderTopRightRadius: _theme.default.inputBorderRadius,
+        borderBottomRightRadius: _theme.default.inputBorderRadius,
+        borderRightColor: 'inherit',
+        marginRight: '-1px'
+      }
+    }
+  };
+};
+var input = _objectSpread(_objectSpread(_objectSpread({
+  wrapper: _objectSpread({
+    display: 'inline-flex',
+    width: '100%',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    position: 'relative'
+  }, wrapper)
+}, resetWrapper), {}, {
+  wrapperNumber: {},
+  content: {
+    display: 'flex',
+    flex: 1,
+    minWidth: '0',
+    alignItems: 'center'
+  },
+  input: {
+    width: '100%',
+    background: 'transparent',
+    fontFamily: 'inherit',
+    padding: '0',
+    border: '0',
+    margin: '0',
+    lineHeight: 'inherit',
+    color: 'inherit',
+    fontSize: 'inherit',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    boxSizing: 'border-box',
+    '&::placeholder': {
+      color: _theme.default.inputPlaceholderColor,
+      fontSize: 'inherit'
+    }
+  },
+  clearWrapper: {
+    position: 'relative',
+    flexBasis: "calc(".concat(_theme.default.inputIconSize, " + 2px)"),
+    flexShrink: 0,
+    display: 'none',
+    '$wrapper:hover &, $wrapperFocus &': {
+      display: 'flex'
+    }
+  },
+  clear: {
+    position: 'absolute',
+    top: '0',
+    bottom: '0',
+    margin: 'auto',
+    width: _theme.default.inputIconSize,
+    height: _theme.default.inputIconSize,
+    boxSizing: 'border-box',
+    display: 'flex',
+    cursor: 'pointer',
+    color: _theme.default.inputClearColor,
+    '&:hover svg': {
+      color: _theme.default.inputHoverClearColor
+    },
+    right: '0'
+  },
+  group: _objectSpread(_objectSpread({}, group), {}, {
+    display: 'flex',
+    boxSizing: 'border-box',
+    alignItems: 'stretch',
+    padding: '0',
+    '& > i, & > span': {
+      display: 'block',
+      margin: 'auto 0',
+      background: 'transparent'
+    }
+  }, groupSpace(_theme.default.inputPaddingX)),
+  groupSmall: _objectSpread(_objectSpread({}, groupSmall), groupSpace(_theme.default.inputSmallPaddingX)),
+  groupLarge: _objectSpread(_objectSpread({}, groupLarge), groupSpace(_theme.default.inputLargePaddingX))
+}, resetGroup), {}, {
+  numberStep: {
+    display: 'flex',
+    alignSelf: 'stretch',
+    boxSizing: 'border-box',
+    flexFlow: 'column noWrap',
+    '& > span': {
+      display: 'block',
+      minHeight: '0',
+      flexGrow: '1',
+      boxSizing: 'border-box',
+      cursor: 'pointer',
+      width: '18px',
+      padding: '0 4px',
+      borderLeft: "1px solid ".concat(_theme.default.inputDisabledBorderColor),
+      lineHeight: '1',
+      color: _theme.default.inputDisabledFontColor,
+      '&:hover': {
+        '$wrapper:not($wrapperDisabled) &': {
+          color: _theme.default.inputHoverBorderColor
+        }
+      },
+      '&:first-child': {
+        borderBottom: "1px solid ".concat(_theme.default.inputDisabledBorderColor)
+      },
+      '& svg': {
+        transform: 'rotate(-90deg)'
+      }
+    }
+  },
+  passwordToggle: {
+    display: 'flex',
+    alignItems: 'center',
+    width: _theme.default.inputIconSize,
+    height: _theme.default.inputIconSize,
+    color: _theme.default.inputToggleColor,
+    cursor: 'pointer',
+    '& > svg': {
+      width: _theme.default.inputIconSize,
+      height: _theme.default.inputIconSize,
+      cursor: 'pointer',
+      pointerEvents: 'none'
+    },
+    '&:hover svg': {
+      color: _theme.default.inputHoverToggleColor
+    },
+    marginRight: _theme.default.inputPaddingX
+  },
+  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.inputInfoBackgroundColor,
+    borderRadius: _theme.default.inputBorderRadius,
+    boxShadow: "0 0 0 1px ".concat(_theme.default.inputBorderColor),
+    fontSize: '12px',
+    color: _theme.default.inputInfoFontColor,
+    '&::before': {
+      display: 'block',
+      position: 'absolute',
+      right: '4px',
+      bottom: '100%',
+      transform: 'rotate(45deg) translateY(3px)',
+      width: '6px',
+      height: '6px',
+      border: "1px solid ".concat(_theme.default.inputBorderColor),
+      borderWidth: '1px 0 0 1px',
+      background: 'inherit',
+      content: "'  '"
+    }
+  },
+  infoError: {
+    boxShadow: "0 0 0 1px ".concat(_theme.default.inputInfoErrorBorderColor),
+    color: _theme.default.inputInfoErrorFontColor,
+    background: _theme.default.inputInfoErrorBackgroundColor,
+    '&::before': {
+      borderColor: _theme.default.inputInfoErrorBorderColor
+    }
+  }
+});
+var _default = input;
+exports.default = _default;

package/esm/jss-style/handleStyle.d.ts

@@ -0,0 +1,5 @@
+interface ObjectType {
+    [key: string]: any;
+}
+declare const handleStyle: <T extends ObjectType>(style: T) => T;
+export default handleStyle;

package/esm/jss-style/handleStyle.js

@@ -0,0 +1,95 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.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.regexp.exec.js");
+require("core-js/modules/es.string.match.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.array.index-of.js");
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+function flexGapSupport() {
+  var flex = document.createElement('div');
+  flex.style.display = 'flex';
+  flex.style.flexDirection = 'column';
+  flex.style.rowGap = '1px';
+  flex.appendChild(document.createElement('div'));
+  flex.appendChild(document.createElement('div'));
+  document.body.appendChild(flex);
+  var isSupported = flex.scrollHeight === 1;
+  if (flex.parentNode) flex.parentNode.removeChild(flex);
+  return isSupported;
+}
+var isSupportGap = null;
+var handleRule = function handleRule(key, rule, target) {
+  if (key === 'gap') {
+    if (isSupportGap === null) {
+      isSupportGap = flexGapSupport();
+    }
+    var valueArr = rule.split(' ');
+    valueArr[1] = valueArr[1] || valueArr[0];
+    if (isSupportGap) {
+      target[key] = rule;
+    } else {
+      target['& > *'] = _objectSpread(_objectSpread({}, (target === null || target === void 0 ? void 0 : target['& > *']) || {}), {}, {
+        marginRight: valueArr[1],
+        marginBottom: valueArr[0]
+      });
+    }
+    return;
+  }
+  var reg = /^(margin|padding|border)(Left|Right)/;
+  if (reg.test(key)) {
+    var _ref = key.match(reg),
+      _ref2 = (0, _slicedToArray2.default)(_ref, 4),
+      _ = _ref2[0],
+      kind = _ref2[1],
+      direction = _ref2[2],
+      end = _ref2[3];
+    var newKey = "".concat(kind).concat(direction === 'Left' ? 'InlineStart' : 'InlineEnd').concat(end || '');
+    var condition = "@supports (margin-inline-start: 1px)";
+    var condition2 = "@supports not (margin-inline-start: 1px)";
+    target["".concat(condition)] = _objectSpread(_objectSpread({}, target["".concat(condition)] || {}), {}, (0, _defineProperty2.default)({}, newKey, rule));
+    target["".concat(condition2)] = _objectSpread(_objectSpread({}, target["".concat(condition2)] || {}), {}, (0, _defineProperty2.default)({}, key, rule));
+    return;
+  }
+  if ('text-align'.indexOf(key) > -1 && (rule === 'left' || rule === 'right')) {
+    var _condition = "@supports (text-align: start)";
+    var _condition2 = "@supports not (text-align: start)";
+    target["".concat(_condition)] = _objectSpread(_objectSpread({}, target["".concat(_condition)] || {}), {}, {
+      'text-align': rule === 'left' ? 'start' : 'end'
+    });
+    target["".concat(_condition2)] = _objectSpread(_objectSpread({}, target["".concat(_condition2)] || {}), {}, {
+      'text-align': rule
+    });
+    return;
+  }
+  target[key] = rule;
+};
+var mapStyle = function mapStyle(style, cloneStyle) {
+  Object.keys(style).forEach(function (key) {
+    var value = style[key];
+    if ((0, _typeof2.default)(value) === 'object' && key.indexOf('@') === -1) {
+      cloneStyle[key] = {};
+      mapStyle(value, cloneStyle[key]);
+    } else {
+      handleRule(key, value, cloneStyle);
+    }
+  });
+};
+var handleStyle = function handleStyle(style) {
+  var cloneStyle = {};
+  mapStyle(style, cloneStyle);
+  return cloneStyle;
+};
+var _default = handleStyle;
+exports.default = _default;

package/esm/jss-style/index.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { JssStyle } from 'jss';
+export declare const StyleProvider: FC<{
+    children?: any;
+    prefix?: string;
+}>;
+export declare type JsStyles<Name extends string = string> = Record<Name, JssStyle<undefined> | string>;
+export declare type ClassStyle<K extends Record<string, any>> = {
+    [P in keyof K]: Record<string, any>;
+};
+export declare const styled: <C extends string>(style: JsStyles<C>, ns: string) => (data?: undefined) => import("jss").Classes<C>;

package/esm/jss-style/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styled = exports.StyleProvider = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.array.concat.js");
+var _reactJss = require("react-jss");
+var _handleStyle = _interopRequireDefault(require("./handleStyle"));
+var _jsxRuntime = require("react/jsx-runtime");
+function camelToDash(str) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+var createClassname = function createClassname(rule, sheet) {
+  var ns = sheet.options.classNamePrefix;
+  if (!ns) {
+    console.warn('[sheinx/base]: styled should give namespace');
+  }
+  var prefix = 'so-';
+  return "".concat(prefix).concat(ns).concat(camelToDash(rule.key));
+};
+var StyleProvider = function StyleProvider(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactJss.JssProvider, {
+    generateId: createClassname,
+    children: children
+  });
+};
+exports.StyleProvider = StyleProvider;
+var styled = function styled(style, ns) {
+  var hoc = (0, _reactJss.createUseStyles)((0, _handleStyle.default)(style), {
+    name: ns,
+    generateId: createClassname
+  });
+  return hoc;
+};
+exports.styled = styled;

package/esm/list/index.d.ts

@@ -0,0 +1,4 @@
+import listStyle from './list';
+declare const useListStyle: (data?: undefined) => import("jss").Classes<keyof import("./list").ListClasses>;
+export { listStyle, useListStyle };
+export default useListStyle;

package/esm/list/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, "listStyle", {
+  enumerable: true,
+  get: function get() {
+    return _list.default;
+  }
+});
+exports.useListStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _list = _interopRequireDefault(require("./list"));
+var useListStyle = (0, _jssStyle.styled)(_list.default, 'list');
+exports.useListStyle = useListStyle;
+var _default = useListStyle;
+exports.default = _default;

package/esm/list/list.d.ts

@@ -0,0 +1,31 @@
+import { JsStyles } from '../jss-style';
+export declare type ListClasses = {
+    wrapper: string;
+    wrapperSmall: string;
+    wrapperLarge: string;
+    wrapperBordered: string;
+    wrapperStriped: string;
+    scrollContainer: string;
+    row: string;
+    item: string;
+    checkContent: string;
+    pagination: string;
+    loading: string;
+    empty: string;
+    footer: string;
+    baseItem: string;
+    baseItemMeta: string;
+    baseItemMetaIncludes: string;
+    baseItemMetaContainer: string;
+    baseItemMetaMeta: string;
+    baseItemMetaAvatar: string;
+    baseItemMetaTitle: string;
+    baseItemMetaDesc: string;
+    baseItemMetaCenter: string;
+    baseItemMetaContent: string;
+    baseItemExtra: string;
+    baseItemExtraSplit: string;
+};
+export declare type ListClassType = keyof ListClasses;
+declare const listStyle: JsStyles<ListClassType>;
+export default listStyle;