@sheinx/shineout-style 3.1.0-rc.2 → 3.1.0

package/cjs/image/image.js

@@ -237,7 +237,6 @@ var ImageStyle = _objectSpread(_objectSpread({}, animation), {}, {
   close: {
     position: 'absolute',
     top: -15,
-    right: -15,
     zIndex: 1,
     cursor: 'pointer',
     outline: 'none',
@@ -247,6 +246,12 @@ var ImageStyle = _objectSpread(_objectSpread({}, animation), {}, {
     // hover
     '&:hover': {
       color: '#666C7C'
+    },
+    '&[dir=ltr]': {
+      right: -15
+    },
+    '&[dir=rtl]': {
+      left: -15
     }
   },
   // gallery
@@ -287,23 +292,43 @@ var ImageStyle = _objectSpread(_objectSpread({}, animation), {}, {
       left: '50%'
     },
     '&$galleryForward': {
-      animation: '$keyframe-f2c 0.5s ease-in-out'
+      '&[dir=ltr]': {
+        animation: '$keyframe-f2c 0.5s ease-in-out'
+      },
+      '&[dir=rtl]': {
+        animation: '$keyframe-b2c 0.5s ease-in-out'
+      }
     },
     '&$galleryBackward': {
-      animation: '$keyframe-b2c 0.5s ease-in-out'
+      '&[dir=ltr]': {
+        animation: '$keyframe-b2c 0.5s ease-in-out'
+      },
+      '&[dir=rtl]': {
+        animation: '$keyframe-f2c 0.5s ease-in-out'
+      }
     }
   },
   galleryLeft: {
-    marginRight: '-80px',
     opacity: 0.4,
-    transform: 'translateY(-50%)',
     display: 'flex',
     position: 'absolute',
     zIndex: 1100,
-    right: '100%',
+    transform: 'translateY(-50%)',
+    marginRight: '-80px',
     top: '50%',
+    '&[dir=ltr]': {
+      right: '100%'
+    },
+    '&[dir=rtl]': {
+      left: '100%'
+    },
     '&$galleryForward': {
-      animation: '$keyframe-c2b 0.5s ease-in-out'
+      '&[dir=ltr]': {
+        animation: '$keyframe-c2b 0.5s ease-in-out'
+      },
+      '&[dir=rtl]': {
+        animation: '$keyframe-c2f 0.5s ease-in-out'
+      }
     }
   },
   galleryRight: {
@@ -313,10 +338,20 @@ var ImageStyle = _objectSpread(_objectSpread({}, animation), {}, {
     display: 'flex',
     position: 'absolute',
     zIndex: 1100,
-    left: '100%',
     top: '50%',
+    '&[dir=ltr]': {
+      left: '100%'
+    },
+    '&[dir=rtl]': {
+      right: '100%'
+    },
     '&$galleryBackward': {
-      animation: '$keyframe-c2f 0.5s ease-in-out'
+      '&[dir=ltr]': {
+        animation: '$keyframe-c2f 0.5s ease-in-out'
+      },
+      '&[dir=rtl]': {
+        animation: '$keyframe-c2b 0.5s ease-in-out'
+      }
     }
   },
   // group

package/cjs/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AA8E5C,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,YAAY,CAsLvC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AA8F5C,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,YAAY,CAsMvC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/cjs/input/input.js

@@ -70,17 +70,33 @@ var groupSpace = function groupSpace(gap) {
       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'
       }
+    },
+    '&[dir=ltr] > b': {
+      '&:first-child': {
+        borderTopLeftRadius: _theme.default.inputBorderRadius,
+        borderBottomLeftRadius: _theme.default.inputBorderRadius
+      },
+      '&:last-child': {
+        borderTopRightRadius: _theme.default.inputBorderRadius,
+        borderBottomRightRadius: _theme.default.inputBorderRadius
+      }
+    },
+    '&[dir=rtl] > b': {
+      '&:first-child': {
+        borderTopRightRadius: _theme.default.inputBorderRadius,
+        borderBottomRightRadius: _theme.default.inputBorderRadius
+      },
+      '&:last-child': {
+        borderTopLeftRadius: _theme.default.inputBorderRadius,
+        borderBottomLeftRadius: _theme.default.inputBorderRadius
+      }
     }
   };
 };
@@ -153,7 +169,12 @@ var input = _objectSpread(_objectSpread(_objectSpread({
     '&:hover svg': {
       color: _theme.default.inputHoverClearColor
     },
-    right: '0'
+    '&[dir=ltr]': {
+      right: '0'
+    },
+    '&[dir=rtl]': {
+      left: '0'
+    }
   },
   group: _objectSpread(_objectSpread({}, group), {}, {
     display: 'flex',
@@ -220,7 +241,12 @@ var input = _objectSpread(_objectSpread(_objectSpread({
   },
   info: {
     position: 'absolute',
-    right: '0',
+    '&[dir=ltr]': {
+      right: '0'
+    },
+    '&[dir=rtl]': {
+      left: '0'
+    },
     top: '100%',
     transformOrigin: '100% 0',
     marginTop: '10px',
@@ -235,7 +261,6 @@ var input = _objectSpread(_objectSpread(_objectSpread({
     '&::before': {
       display: 'block',
       position: 'absolute',
-      right: '4px',
       bottom: '100%',
       transform: 'rotate(45deg) translateY(3px)',
       width: '6px',
@@ -244,6 +269,12 @@ var input = _objectSpread(_objectSpread(_objectSpread({
       borderWidth: '1px 0 0 1px',
       background: 'inherit',
       content: "'  '"
+    },
+    '&[dir=ltr]::before': {
+      right: '4px'
+    },
+    '&[dir=rtl]::before': {
+      left: '8px'
     }
   },
   infoError: {

package/cjs/jss-style/handleStyle.js

@@ -62,14 +62,14 @@ var handleRule = function handleRule(key, rule, target) {
     target["".concat(condition2)] = _objectSpread(_objectSpread({}, target["".concat(condition2)] || {}), {}, _defineProperty({}, key, rule));
     return;
   }
-  if ('text-align'.indexOf(key) > -1 && (rule === 'left' || rule === 'right')) {
+  if ('textAlign'.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'
+      'textAlign': rule === 'left' ? 'start' : 'end'
     });
     target["".concat(_condition2)] = _objectSpread(_objectSpread({}, target["".concat(_condition2)] || {}), {}, {
-      'text-align': rule
+      'textAlign': rule
     });
     return;
   }

package/cjs/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAY9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAiWtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAY9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA6WtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/menu/menu.js

@@ -96,8 +96,14 @@ var menuStyle = {
     '$wrapperVertical &': {
       position: 'absolute',
       top: 0,
-      right: '-6px',
-      transform: 'translateX(100%)',
+      '&[dir=ltr]': {
+        right: '-6px',
+        transform: 'translateX(100%)'
+      },
+      '&[dir=rtl]': {
+        left: '-6px',
+        transform: 'translateX(-100%)'
+      },
       minWidth: 'auto',
       borderRadius: '4px',
       '& > :first-child > $itemContent': {
@@ -302,7 +308,12 @@ var menuStyle = {
       }
     },
     '$wrapperVertical &': {
-      transform: 'rotate(-90deg)'
+      '&[dir=ltr]': {
+        transform: 'rotate(-90deg)'
+      },
+      '&[dir=rtl]': {
+        transform: 'rotate(90deg)'
+      }
     }
   },
   icon: {},
@@ -350,7 +361,11 @@ var menuStyle = {
     bottom: 0,
     width: '16px',
     boxSizing: 'border-box',
-    borderWidth: '0 1px'
+    borderWidth: '0 1px',
+    '&[dir=rtl]': {
+      left: 0,
+      right: 'auto'
+    }
   },
   scrolbarHandler: {
     position: 'absolute',

package/cjs/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAuJhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAgRxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAqJhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAkRxC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/modal/modal.js

@@ -147,11 +147,9 @@ var hoverAfterStyles = {
   content: '""',
   position: 'absolute',
   top: -4,
-  right: 0,
-  bottom: 0,
+  right: -4,
+  bottom: -4,
   left: -4,
-  width: 24,
-  height: 24,
   borderRadius: '50%'
 };
 var modalStyle = _objectSpread(_objectSpread({}, animationStyle), {}, {
@@ -161,6 +159,7 @@ var modalStyle = _objectSpread(_objectSpread({}, animationStyle), {}, {
     top: 0,
     left: 0,
     // overflow: 'auto',
+    wordWrap: 'break-word',
     width: '100%',
     boxSizing: 'border-box',
     height: '100%',
@@ -258,7 +257,8 @@ var modalStyle = _objectSpread(_objectSpread({}, animationStyle), {}, {
         marginBottom: 0
       },
       '& $body': {
-        padding: "".concat(_theme.default.modalDrawerBodyPaddingY, " ").concat(_theme.default.modalDrawerBodyPaddingX)
+        padding: "".concat(_theme.default.modalDrawerBodyPaddingY, " ").concat(_theme.default.modalDrawerBodyPaddingX),
+        overflow: 'auto'
       },
       '& $bodyWithIcon': {
         paddingLeft: _theme.default.modalDrawerBodyPaddingX

package/cjs/normalize.js

@@ -14,14 +14,14 @@ var token = {
   color: 'var(--common-body-color, #141737)',
   fontSize: 'var(--font-size-base, 14px)',
   lineHeight: 'var(--common-line-heigh, 1.42857143)',
-  linkColor: _theme.Token['Brand-6'],
+  linkColor: _theme.CommonToken['Brand-6'],
   linkHoverDecoration: 'none',
-  linkDisabledColor: _theme.Token['Brand-3'],
+  linkDisabledColor: _theme.CommonToken['Brand-3'],
   headingsColor: 'inherit',
   headingsFontFamily: 'inherit',
   headingsFontWeight: 'bold',
   headingsLineHeight: '1.1',
-  headingsSmallColor: '123'
+  headingsSmallColor: '#adb5bd'
 };
 var lineHeightComputed = '20px';
 var lineHeightComputed2 = '10px';

package/cjs/pagination/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,KAAK,eAAe,GAAG,MAAM,iBAAiB,CAAC;AAE/C,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,eAAe,CAmE9C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,KAAK,eAAe,GAAG,MAAM,iBAAiB,CAAC;AAE/C,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,eAAe,CA0D9C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/pagination/pagination.js

@@ -54,24 +54,15 @@ var PaginationStyle = {
   small: {
     '& $icon': {
       width: _theme.default.paginationSmallFontSize
-    },
-    '& $sectionSize': {
-      padding: 0
     }
   },
   large: {
     '& $icon': {
       width: _theme.default.paginationLargeFontSize
-    },
-    '& $sectionSize': {
-      padding: 0
     }
   },
   buttonItem: {
     transition: 'none'
-  },
-  sectionSize: {
-    padding: 0
   }
 };
 var _default = exports.default = PaginationStyle;

package/cjs/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,MAAM,cAAc,CAAC;AAKpD,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CA6J5C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,MAAM,cAAc,CAAC;AAKpD,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CA+J5C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/cjs/popover/popover.js

@@ -17,6 +17,7 @@ var popoverStyle = {
     backgroundColor: _theme.default.popoverBackgroundColor,
     borderRadius: _theme.default.popoverRadius,
     border: "1px solid ".concat(_theme.default.popoverBorderColor),
+    wordWrap: 'break-word',
     '& $arrow': {
       'z-index': 1,
       position: 'absolute',
@@ -27,7 +28,6 @@ var popoverStyle = {
       height: '8.4px',
       boxSizing: 'content-box',
       background: 'inherit',
-      borderLeft: 'none',
       borderBottom: 'none'
     },
     '&[data-soui-position^="bottom"]': {
@@ -69,7 +69,12 @@ var popoverStyle = {
       }
     },
     '&[data-soui-position^="left"]': {
-      marginLeft: (arrowGap - 2) * -1,
+      '&[dir=ltr]': {
+        marginLeft: (arrowGap - 2) * -1
+      },
+      '&[dir=rtl]': {
+        marginRight: (arrowGap - 2) * -1
+      },
       '& $arrow': {
         right: _theme.default.popoverBorderWidth,
         transform: 'translate(50%, 0) rotate(45deg)',
@@ -88,7 +93,12 @@ var popoverStyle = {
       }
     },
     '&[data-soui-position^="right"]': {
-      marginLeft: arrowGap - 2,
+      '&[dir=ltr]': {
+        marginLeft: arrowGap - 2
+      },
+      '&[dir=rtl]': {
+        marginRight: arrowGap - 2
+      },
       '& $arrow': {
         left: '0',
         transform: 'translate(-50%, 0) rotate(-135deg)',

package/cjs/rate/rate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rate.d.ts","sourceRoot":"","sources":["rate.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAoB9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAkFtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"rate.d.ts","sourceRoot":"","sources":["rate.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAoB9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAmFtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/rate/rate.js

@@ -73,7 +73,12 @@ var rateStyle = {
   itemHalf: {
     position: 'absolute',
     top: 0,
-    left: 0,
+    '&[dir=ltr]': {
+      left: 0
+    },
+    '&[dir=rtl]': {
+      right: 0
+    },
     bottom: 0,
     overflow: 'hidden',
     width: '50%',

package/cjs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AA8ClD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAke1C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AA8ClD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CA2d1C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/select/select.js

@@ -90,18 +90,12 @@ var selectStyle = _objectSpread(_objectSpread({
       '& $placeholder,$ellipsis,$space,input': {
         marginTop: 0,
         marginBottom: 0
-      },
-      '& $clearIcon': {
-        right: _theme.default.selectSmallPaddingX
       }
     },
     '&$wrapperLarge': {
       '& $placeholder,$ellipsis,$space,input': {
         marginTop: _theme.default.selectLargePlaceholderMarginY,
         marginBottom: _theme.default.selectLargePlaceholderMarginY
-      },
-      '& $clearIcon': {
-        right: _theme.default.selectLargePaddingX
       }
     },
     '&:hover': {
@@ -342,7 +336,12 @@ var selectStyle = _objectSpread(_objectSpread({
     justifyContent: 'center'
   },
   checkedIcon: {
-    right: 8,
+    '&[dir=ltr]': {
+      right: 8
+    },
+    '&[dir=rtl]': {
+      left: 8
+    },
     top: "calc(50% - 1em/2)",
     position: 'absolute',
     display: 'inline-flex',

package/cjs/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAqO1C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAwR1C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/slider/slider.js

@@ -49,7 +49,12 @@ var sliderStyle = {
     '$vertical &': {
       width: '100%',
       height: 'unset',
-      left: 0,
+      '&[dir=ltr]': {
+        left: 0
+      },
+      '&[dir=rtl]': {
+        right: 0
+      },
       bottom: '100%'
     },
     '$disabled &': {
@@ -92,26 +97,50 @@ var sliderStyle = {
   indicatorHover: {},
   indicatorStart: {
     '$wrapper:not($vertical) &': {
-      left: 0,
       top: '50%',
-      transform: 'translate(-50%, -50%)'
+      '&[dir=ltr]': {
+        left: 0,
+        transform: 'translate(-50%, -50%)'
+      },
+      '&[dir=rtl]': {
+        right: 0,
+        transform: 'translate(50%, -50%)'
+      }
     },
     '$vertical &': {
-      left: '50%',
       bottom: 0,
-      transform: 'translate(-50%, 50%)'
+      '&[dir=ltr]': {
+        left: '50%',
+        transform: 'translate(-50%, 50%)'
+      },
+      '&[dir=rtl]': {
+        right: '50%',
+        transform: 'translate(50%, 50%)'
+      }
     }
   },
   indicatorEnd: {
     '$wrapper:not($vertical) &': {
-      right: 0,
       top: '50%',
-      transform: 'translate(50%, -50%)'
+      '&[dir=ltr]': {
+        right: 0,
+        transform: 'translate(50%, -50%)'
+      },
+      '&[dir=rtl]': {
+        left: 0,
+        transform: 'translate(-50%, -50%)'
+      }
     },
     '$vertical &': {
-      left: '50%',
       top: 0,
-      transform: 'translate(-50%, -50%)'
+      '&[dir=ltr]': {
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      },
+      '&[dir=rtl]': {
+        right: '50%',
+        transform: 'translate(50%, -50%)'
+      }
     }
   },
   value: {
@@ -126,28 +155,52 @@ var sliderStyle = {
   },
   startValue: {
     '$wrapper:not($vertical) &': {
-      left: 0,
       bottom: '100%',
-      transform: 'translate(-50%, -10px)'
+      '&[dir=ltr]': {
+        left: 0,
+        transform: 'translate(-50%, 10px)'
+      },
+      '&[dir=rtl]': {
+        right: 0,
+        transform: 'translate(50%, -10px)'
+      }
     },
     '$vertical &': {
       bottom: 0,
-      left: '100%',
-      transform: 'translate(10px, 50%)',
-      padding: '1px 4px'
+      padding: '1px 4px',
+      '&[dir=ltr]': {
+        left: '100%',
+        transform: 'translate(10px, 50%)'
+      },
+      '&[dir=rtl]': {
+        right: '100%',
+        transform: 'translate(-10px, 50%)'
+      }
     }
   },
   endValue: {
     '$wrapper:not($vertical) &': {
-      right: 0,
       bottom: '100%',
-      transform: 'translate(50%, -10px)'
+      '&[dir=ltr]': {
+        right: 0,
+        transform: 'translate(50%, -10px)'
+      },
+      '&[dir=rtl]': {
+        left: 0,
+        transform: 'translate(-50%, -10px)'
+      }
     },
     '$vertical &': {
       top: 0,
-      left: '100%',
-      transform: 'translate(10px, -50%)',
-      padding: '1px 4px'
+      padding: '1px 4px',
+      '&[dir=ltr]': {
+        left: '100%',
+        transform: 'translate(10px, -50%)'
+      },
+      '&[dir=rtl]': {
+        right: '100%',
+        transform: 'translate(-10px, -50%)'
+      }
     }
   },
   valueHover: {
@@ -223,14 +276,25 @@ var sliderStyle = {
     userSelect: 'none',
     color: _theme.default.sliderScaleFontColor,
     '$wrapper:not($vertical) &': {
-      transform: 'translate(-50%)',
+      '&[dir=ltr]': {
+        transform: 'translate(-50%)'
+      },
+      '&[dir=rtl]': {
+        transform: 'translate(50%)'
+      },
       lineHeight: _theme.default.lineHeightDynamic
     },
     '$vertical &': {
       top: 0,
-      left: '100%',
       lineHeight: 1,
-      transform: 'translate(4px, -50%)'
+      '&[dir=ltr]': {
+        left: '100%',
+        transform: 'translate(4px, -50%)'
+      },
+      '&[dir=rtl]': {
+        right: '100%',
+        transform: 'translate(-4px, -50%)'
+      }
     }
   }
 };

package/cjs/spin/spin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spin.d.ts","sourceRoot":"","sources":["spin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAkB3C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA4E1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"spin.d.ts","sourceRoot":"","sources":["spin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAkB3C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA8E1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/spin/spin.js

@@ -43,7 +43,9 @@ var spinStyle = _objectSpread(_objectSpread({}, _animation.default), {}, {
   wave: _wave.default,
   chasingRing: _chasingRing.default,
   fade: {},
-  spin: {},
+  spin: {
+    margin: 'auto'
+  },
   content: {
     margin: 'auto',
     display: 'flex',

package/cjs/steps/steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAqnBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAmpBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}