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

package/esm/steps/steps.js

@@ -56,7 +56,12 @@ var stepsStyle = {
     '&$default': {
       '&$horizontal': {
         '& $tail': {
-          left: 94,
+          '&[dir=ltr]': {
+            left: 94
+          },
+          '&[dir=rtl]': {
+            right: 94
+          },
           top: "calc(".concat(Token.stepsSmallIconWidth, "/2)"),
           width: "calc(100% - 20px)",
           '&:after': {
@@ -70,7 +75,12 @@ var stepsStyle = {
         },
         '& $tail': {
           paddingTop: 28,
-          left: 12
+          '&[dir=ltr]': {
+            left: 12
+          },
+          '&[dir=rtl]': {
+            right: 12
+          }
         }
       },
       '& $verticalLabel': {
@@ -134,7 +144,12 @@ var stepsStyle = {
       },
       '&$horizontal': {
         '& $tail': {
-          left: 102,
+          '&[dir=ltr]': {
+            left: 102
+          },
+          '&[dir=rtl]': {
+            right: 102
+          },
           top: "calc(".concat(Token.stepsLargeIconWidth, "/2)"),
           '&:after': {
             width: "calc(100% - ".concat(Token.stepsLargeIconWidth, " + 4px)")
@@ -143,7 +158,12 @@ var stepsStyle = {
       },
       '&$vertical': {
         '& $tail': {
-          left: 16,
+          '&[dir=ltr]': {
+            left: 16
+          },
+          '&[dir=rtl]': {
+            right: 16
+          },
           paddingTop: 36
         }
       },
@@ -171,7 +191,12 @@ var stepsStyle = {
     '& $tail': {
       width: 1,
       height: '100%',
-      left: 13,
+      '&[dir=ltr]': {
+        left: 13
+      },
+      '&[dir=rtl]': {
+        right: 13
+      },
       '&:after': {
         position: 'relative',
         width: 1,
@@ -200,16 +225,21 @@ var stepsStyle = {
     '& $horizontalLabel': {
       '& $description': {},
       '& $title': {
-        '&:after': {
+        '&::after': {
           content: '""',
           display: 'block',
           background: Token.stepsTailBackgroundColor,
           height: 1,
-          left: '100%',
           marginLeft: 12,
           top: '50%',
           width: 999,
           position: 'absolute'
+        },
+        '&[dir=ltr]::after': {
+          left: '100%'
+        },
+        '&[dir=rtl]::after': {
+          right: '100%'
         }
       }
     }
@@ -371,7 +401,12 @@ var stepsStyle = {
         marginLeft: 76
       },
       '& $tail': {
-        left: 88,
+        '&[dir=ltr]': {
+          left: 88
+        },
+        '&[dir=rtl]': {
+          right: 88
+        },
         overflow: 'hidden',
         width: 'calc(100% - 8px)',
         '&:after': {
@@ -439,25 +474,35 @@ var stepsStyle = {
         position: 'absolute',
         width: 0,
         height: 0,
-        left: 0,
         top: 0,
         borderLeftWidth: 16,
         borderTopWidth: 20,
         borderBottomWidth: 20,
         borderLeftColor: '#ffffff'
       },
+      '&[dir=ltr]:before': {
+        left: 0
+      },
+      '&[dir=rtl]:before': {
+        right: 0
+      },
       // after
       '&:after': {
         content: '""',
         position: 'absolute',
         width: 0,
         height: 0,
-        right: -16,
         top: 0,
         zIndex: 1,
         borderLeftWidth: 16,
         borderTopWidth: 20,
         borderBottomWidth: 20
+      },
+      '&[dir=ltr]:after': {
+        right: -16
+      },
+      '&[dir=rtl]:after': {
+        left: -16
       }
     },
     '&$horizontal': {
@@ -474,8 +519,13 @@ var stepsStyle = {
         '&:after': {
           borderLeftWidth: 26,
           borderTopWidth: 32,
-          borderBottomWidth: 32,
+          borderBottomWidth: 32
+        },
+        '&[dir=ltr]:after': {
           right: -26
+        },
+        '&[dir=rtl]:after': {
+          left: -26
         }
       }
     },
@@ -524,11 +574,16 @@ var stepsStyle = {
         color: Token.stepsProcessFontColor
       },
       '&:after': {
-        right: -16,
         borderLeft: "16px solid ".concat(Token.stepsProcessBackgroundColor),
         borderTop: "20px solid transparent",
         borderBottom: "20px solid transparent"
       },
+      '&[dir=ltr]:after': {
+        right: -16
+      },
+      '&[dir=rtl]:after': {
+        left: -16
+      },
       '&:before': {
         borderLeft: "16px solid #ffffff",
         borderTop: "20px solid transparent",
@@ -561,9 +616,14 @@ var stepsStyle = {
         '&:after': {
           borderLeftWidth: 26,
           borderTopWidth: 32,
-          borderBottomWidth: 32,
+          borderBottomWidth: 32
+        },
+        '&[dir=ltr]:after': {
           right: -26
         },
+        '&[dir=rtl]:after': {
+          left: -26
+        },
         '&:before': {
           borderLeftWidth: 26,
           borderTopWidth: 32,
@@ -587,7 +647,12 @@ var stepsStyle = {
     '&$horizontal': {
       '& $tail': {
         // left: `calc(50% + ${Token.stepsIconWidth}/2 + 4px)`,
-        left: 98,
+        '&[dir=ltr]': {
+          left: 98
+        },
+        '&[dir=rtl]': {
+          right: 98
+        },
         top: 13,
         '&:after': {
           width: "calc(100% - ".concat(Token.stepsIconWidth, " + 4px)")

package/esm/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CAgI9C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CAmJ9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/switch/switch.js

@@ -77,22 +77,45 @@ var switchStyle = _objectSpread(_objectSpread({}, animation), {}, {
   indicator: {
     width: token.switchCircleSize,
     height: token.switchCircleSize,
-    left: token.switchPaddingX,
+    '&[dir=ltr]': {
+      left: token.switchPaddingX
+    },
+    '&[dir=rtl]': {
+      right: token.switchPaddingX
+    },
     top: token.switchPaddingY,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     color: 'red',
     '$wrapperChecked &': {
-      right: token.switchPaddingX,
-      left: "calc(100% - ".concat(token.switchCircleSize, " - ").concat(token.switchPaddingX, ")"),
+      '&[dir=ltr]': {
+        right: token.switchPaddingX,
+        left: "calc(100% - ".concat(token.switchCircleSize, " - ").concat(token.switchPaddingX, ")")
+      },
+      '&[dir=rtl]': {
+        left: token.switchPaddingX,
+        right: "calc(100% - ".concat(token.switchCircleSize, " - ").concat(token.switchPaddingX, ")")
+      },
       '$wrapperSmall&': {
-        right: token.switchSmallPaddingX,
-        left: "calc(100% - ".concat(token.switchSmallCircleSize, " - ").concat(token.switchSmallPaddingX, ")")
+        '&[dir=ltr]': {
+          right: token.switchSmallPaddingX,
+          left: "calc(100% - ".concat(token.switchSmallCircleSize, " - ").concat(token.switchSmallPaddingX, ")")
+        },
+        '&[dir=rtl]': {
+          left: token.switchSmallPaddingX,
+          right: "calc(100% - ".concat(token.switchSmallCircleSize, " - ").concat(token.switchSmallPaddingX, ")")
+        }
       },
       '$wrapperLarge&': {
-        right: token.switchLargePaddingX,
-        left: "calc(100% - ".concat(token.switchLargeCircleSize, " - ").concat(token.switchLargePaddingX, ")")
+        '&[dir=ltr]': {
+          right: token.switchLargePaddingX,
+          left: "calc(100% - ".concat(token.switchLargeCircleSize, " - ").concat(token.switchLargePaddingX, ")")
+        },
+        '&[dir=rtl]': {
+          left: token.switchLargePaddingX,
+          right: "calc(100% - ".concat(token.switchLargeCircleSize, " - ").concat(token.switchLargePaddingX, ")")
+        }
       }
     },
     '$wrapperSmall &': {

package/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAoNxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CAub1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAsSxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA6b1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/tabs/tabs.js

@@ -30,38 +30,86 @@ var getHeaderPositionStyle = function getHeaderPositionStyle(position, options)
 };
 var getCardStyle = function getCardStyle() {
   return {
-    '&[data-soui-position^="left-"][data-soui-shape="card"]': _objectSpread({
+    '&[data-soui-position^="left-"][data-soui-shape="card"]': {
       '& $tab,& $next,& $prev': {
-        borderRadius: "".concat(Token.tabsTabBorderRadius, " 0 0 ").concat(Token.tabsTabBorderRadius)
+        '&[dir=ltr]': {
+          borderRadius: "".concat(Token.tabsTabBorderRadius, " 0 0 ").concat(Token.tabsTabBorderRadius)
+        },
+        '&[dir=rtl]': {
+          borderRadius: "0 ".concat(Token.tabsTabBorderRadius, " ").concat(Token.tabsTabBorderRadius, " 0")
+        }
       },
-      '& $hr': {
-        right: 0,
+      '&[dir=ltr]': _objectSpread({
+        '& $cardHr': {
+          '&:after': {
+            right: 0,
+            width: '1px',
+            height: '100%'
+          }
+        }
+      }, active({
+        top: 0,
+        bottom: 0,
+        right: -1,
         width: 1,
-        height: '100%'
-      }
-    }, active({
-      top: 0,
-      bottom: 0,
-      right: -1,
-      width: 1,
-      background: '#FFFFFF'
-    })),
-    '&[data-soui-position^="right-"][data-soui-shape="card"]': _objectSpread({
+        background: '#FFFFFF'
+      })),
+      '&[dir=rtl]': _objectSpread(_objectSpread({}, active({
+        top: 0,
+        bottom: 0,
+        left: -1,
+        width: 1,
+        background: '#FFFFFF'
+      })), {}, {
+        '& $cardHr': {
+          '&:after': {
+            left: 0,
+            width: 1,
+            height: '100%'
+          }
+        }
+      })
+    },
+    '&[data-soui-position^="right-"][data-soui-shape="card"]': {
       '& $tab,& $next,& $prev': {
-        borderRadius: "0 ".concat(Token.tabsTabBorderRadius, " ").concat(Token.tabsTabBorderRadius, " 0")
+        '&[dir=ltr]': {
+          borderRadius: "0 ".concat(Token.tabsTabBorderRadius, " ").concat(Token.tabsTabBorderRadius, " 0")
+        },
+        '&[dir=rtl]': {
+          borderRadius: "".concat(Token.tabsTabBorderRadius, " 0 0 ").concat(Token.tabsTabBorderRadius)
+        }
       },
-      '& $hr': {
-        left: 0,
+      '&[dir=ltr]': _objectSpread({
+        '& $cardHr': {
+          '&:after': {
+            left: 0,
+            width: 1,
+            height: '100%'
+          }
+        }
+      }, active({
+        top: 0,
+        bottom: 0,
+        left: -1,
         width: 1,
-        height: '100%'
-      }
-    }, active({
-      top: 0,
-      bottom: 0,
-      left: -1,
-      width: 1,
-      background: '#FFFFFF'
-    })),
+        background: '#FFFFFF'
+      })),
+      '&[dir=rtl]': _objectSpread({
+        '& $cardHr': {
+          '&:after': {
+            right: 0,
+            width: 1,
+            height: '100%'
+          }
+        }
+      }, active({
+        top: 0,
+        bottom: 0,
+        right: -1,
+        width: 1,
+        background: '#FFFFFF'
+      }))
+    },
     '&[data-soui-position^="top-"][data-soui-shape="card"]': _objectSpread({
       '& $tab,& $next,& $prev': {
         borderRadius: "".concat(Token.tabsTabBorderRadius, " ").concat(Token.tabsTabBorderRadius, " 0 0")
@@ -104,42 +152,68 @@ var getCardStyle = function getCardStyle() {
 };
 var getLineStyle = function getLineStyle() {
   return {
-    '&[data-soui-position^="left-"][data-soui-shape="line"]': _objectSpread(_objectSpread({
-      '& $hr': {
+    '&[data-soui-position^="left-"][data-soui-shape="line"]': {
+      '&[dir=ltr]': _objectSpread({
+        '& $hr': {
+          right: 0,
+          width: 1,
+          height: '100%'
+        }
+      }, active({
+        top: 0,
+        bottom: 0,
         right: 0,
-        width: 1,
-        height: '100%'
-      }
-    }, active({
-      top: 0,
-      bottom: 0,
-      right: 0,
-      width: 2
-    })), {}, {
+        width: 2
+      })),
+      '&[dir=rtl]': _objectSpread({
+        '& $hr': {
+          left: 0,
+          width: 1,
+          height: '100%'
+        }
+      }, active({
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: 2
+      })),
       '& :not([data-soui-state="active"])$tab': {
         '&:after': {
           display: 'none'
         }
       }
-    }),
-    '&[data-soui-position^="right-"][data-soui-shape="line"]': _objectSpread(_objectSpread({
-      '& $hr': {
+    },
+    '&[data-soui-position^="right-"][data-soui-shape="line"]': {
+      '&[dir=ltr]': _objectSpread({
+        '& $hr': {
+          left: 0,
+          width: 1,
+          height: '100%'
+        }
+      }, active({
+        top: 0,
+        bottom: 0,
         left: 0,
-        width: 1,
-        height: '100%'
-      }
-    }, active({
-      top: 0,
-      bottom: 0,
-      left: 0,
-      width: 2
-    })), {}, {
+        width: 2
+      })),
+      '&[dir=rtl]': _objectSpread({
+        '& $hr': {
+          right: 0,
+          width: 1,
+          height: '100%'
+        }
+      }, active({
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: 2
+      })),
       '& :not([data-soui-state="active"])$tab': {
         '&:after': {
           display: 'none'
         }
       }
-    }),
+    },
     '&[data-soui-position^="top-"][data-soui-shape="line"]': _objectSpread({
       '& $hr': {
         bottom: 0,
@@ -174,18 +248,34 @@ var getLineStyle = function getLineStyle() {
 };
 var getDashStyle = function getDashStyle() {
   return {
-    '&[data-soui-position^="left-"][data-soui-shape="dash"]': _objectSpread({}, active({
-      top: "calc(50% - 12px)",
-      width: 2,
-      height: 24,
-      right: 0
-    })),
-    '&[data-soui-position^="right-"][data-soui-shape="dash"]': _objectSpread({}, active({
-      top: "calc(50% - 12px)",
-      width: 2,
-      height: 24,
-      left: 0
-    })),
+    '&[data-soui-position^="left-"][data-soui-shape="dash"]': {
+      '&[dir=ltr]': _objectSpread({}, active({
+        top: "calc(50% - 12px)",
+        width: 2,
+        height: 24,
+        right: 0
+      })),
+      '&[dir=rtl]': _objectSpread({}, active({
+        top: "calc(50% - 12px)",
+        width: 2,
+        height: 24,
+        left: 0
+      }))
+    },
+    '&[data-soui-position^="right-"][data-soui-shape="dash"]': {
+      '&[dir=ltr]': _objectSpread({}, active({
+        top: "calc(50% - 12px)",
+        width: 2,
+        height: 24,
+        left: 0
+      })),
+      '&[dir=rtl]': _objectSpread({}, active({
+        top: "calc(50% - 12px)",
+        width: 2,
+        height: 24,
+        right: 0
+      }))
+    },
     '&[data-soui-position^="top-"][data-soui-shape="dash"]': _objectSpread({}, active({
       bottom: 0,
       left: "calc(50% - 12px)",
@@ -211,7 +301,6 @@ var getFillStyle = function getFillStyle() {
           }
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $fillInner': {
-          // background: Token.tabsHoverBackgroundColor,
           background: Token.tabsExtraFillHoverBackgroundColor
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $fillInner': {
@@ -220,12 +309,17 @@ var getFillStyle = function getFillStyle() {
         '&:before': {
           content: '""',
           position: 'absolute',
-          left: 0,
           top: 'calc(50% - 7px)',
           width: 1,
           height: 14,
           background: 'transparent',
           transition: 'background .15s ease-out'
+        },
+        '&[dir=ltr]::before': {
+          left: 0
+        },
+        '&[dir=rtl]::before': {
+          right: 0
         }
       },
       '& $tab:not([data-soui-state="active"]):not(:hover) + $tab:not([data-soui-state="active"]):not(:hover)': {
@@ -270,15 +364,24 @@ var getHeaderStyle = function getHeaderStyle() {
     '&[data-soui-shape="fill"] $header': {
       '& $tab': {
         background: Token.tabsBackgroundColor,
-        // padding: `${Token.tabsFillPaddingY} ${Token.tabsFillPaddingX}`,
         padding: "".concat(Token.tabsFillPaddingY, " 0")
       },
       '& $tab:first-child': {
-        borderRadius: "".concat(Token.tabsTabBorderRadius, " 0 0 ").concat(Token.tabsTabBorderRadius),
+        '&[dir=ltr]': {
+          borderRadius: "".concat(Token.tabsTabBorderRadius, " 0 0 ").concat(Token.tabsTabBorderRadius)
+        },
+        '&[dir=rtl]': {
+          borderRadius: "0 ".concat(Token.tabsTabBorderRadius, " ").concat(Token.tabsTabBorderRadius, " 0")
+        },
         paddingLeft: Token.tabsFillPaddingX
       },
       '& $tab:last-child': {
-        borderRadius: "0 ".concat(Token.tabsTabBorderRadius, " ").concat(Token.tabsTabBorderRadius, " 0"),
+        '&[dir=rtl]': {
+          borderRadius: "".concat(Token.tabsTabBorderRadius, " 0 0 ").concat(Token.tabsTabBorderRadius)
+        },
+        '&[dir=ltr]': {
+          borderRadius: "0 ".concat(Token.tabsTabBorderRadius, " ").concat(Token.tabsTabBorderRadius, " 0")
+        },
         paddingRight: Token.tabsFillPaddingX
       }
     },
@@ -672,12 +775,18 @@ var tabsStyle = {
   prev: {
     textAlign: 'center',
     color: Token.tabsArrowFontColor,
-    lineHeight: Token.lineHeightDynamic
+    lineHeight: Token.lineHeightDynamic,
+    '&[dir=rtl] svg': {
+      transform: 'rotate(180deg)'
+    }
   },
   next: {
     textAlign: 'center',
     color: Token.tabsArrowFontColor,
-    lineHeight: Token.lineHeightDynamic
+    lineHeight: Token.lineHeightDynamic,
+    '&[dir=rtl] svg': {
+      transform: 'rotate(180deg)'
+    }
   },
   extra: {},
   collapsible: {

package/esm/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AA6CxC,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,eAAe,CAqF1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AA6CxC,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,eAAe,CA4F1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/textarea/textarea.js

@@ -76,7 +76,12 @@ var input = _objectSpread(_objectSpread(_objectSpread({}, inputBorder), {}, {
   },
   info: {
     position: 'absolute',
-    right: '0',
+    '&[dir=ltr]': {
+      right: '0'
+    },
+    '&[dir=rtl]': {
+      left: '0'
+    },
     top: '100%',
     transformOrigin: '100% 0',
     marginTop: '10px',
@@ -91,7 +96,6 @@ var input = _objectSpread(_objectSpread(_objectSpread({}, inputBorder), {}, {
     '&::before': {
       display: 'block',
       position: 'absolute',
-      right: '4px',
       bottom: '100%',
       transform: 'rotate(45deg) translateY(3px)',
       width: '6px',
@@ -100,6 +104,12 @@ var input = _objectSpread(_objectSpread(_objectSpread({}, inputBorder), {}, {
       borderWidth: '1px 0 0 1px',
       background: 'inherit',
       content: "'  '"
+    },
+    '&[dir=ltr]::before': {
+      right: '4px'
+    },
+    '&[dir=rtl]::before': {
+      left: '8px'
     }
   },
   infoError: {

package/esm/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA+C9C,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,cAAc,CAoJhD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA+C9C,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,cAAc,CAuJhD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/esm/tooltip/tooltip.js

@@ -90,7 +90,6 @@ var tooltipStyle = _objectSpread(_objectSpread({}, animation), {}, {
       height: '8.4px',
       boxSizing: 'content-box',
       background: 'inherit',
-      borderLeft: 'none',
       borderBottom: 'none'
     },
     '&[data-soui-position^="bottom"]': {
@@ -133,6 +132,12 @@ var tooltipStyle = _objectSpread(_objectSpread({}, animation), {}, {
     },
     '&[data-soui-position^="left"]': {
       marginLeft: (arrowGap - 2) * -1,
+      '&[dir=ltr]': {
+        marginLeft: (arrowGap - 2) * -1
+      },
+      '&[dir=rtl]': {
+        marginRight: (arrowGap - 2) * -1
+      },
       '&::before': {
         right: 0,
         transform: 'translate(50%, 0) rotate(45deg)',
@@ -152,6 +157,12 @@ var tooltipStyle = _objectSpread(_objectSpread({}, animation), {}, {
     },
     '&[data-soui-position^="right"]': {
       marginLeft: arrowGap - 2,
+      '&[dir=ltr]': {
+        marginLeft: arrowGap - 2
+      },
+      '&[dir=rtl]': {
+        marginRight: arrowGap - 2
+      },
       '&::before': {
         left: '0',
         transform: 'translate(-50%, 0) rotate(-135deg)',

package/esm/tree/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.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;AAE9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA8LtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.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;AAE9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAmMtC,CAAC;AAEF,eAAe,SAAS,CAAC"}