@dhis2-ui/button 9.2.0 → 9.3.0-alpha.1

package/build/cjs/button/button.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.IconOnlySmall = exports.IconOnly = exports.Icon = exports.Disabled = exports.DestructiveSecondary = exports.Destructive = exports.Basic = void 0;
+exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.IconRTL = exports.IconOnlySmall = exports.IconOnly = exports.Icon = exports.Disabled = exports.DestructiveSecondary = exports.Destructive = exports.Basic = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -239,6 +239,17 @@ Icon.parameters = {
     }
   }
 };
+
+const IconRTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_button.Button, args));
+
+exports.IconRTL = IconRTL;
+IconRTL.args = {
+  icon: DemoIcon24,
+  name: 'RTL icon button',
+  children: 'RTL text'
+};
 const IconOnly = Template.bind({});
 exports.IconOnly = IconOnly;
 IconOnly.args = {

package/build/cjs/button/button.styles.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-const _defaultExport = ["button.jsx-2860941869{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(_uiConstants.colors.grey900, ";height:36px;padding:0 ").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(_uiConstants.colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-2860941869:disabled{cursor:not-allowed;}", "button.jsx-2860941869:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-2860941869:focus.jsx-2860941869:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:active.jsx-2860941869:focus,button.jsx-2860941869:disabled.jsx-2860941869:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:hover{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";}"), "button.jsx-2860941869:active,button.jsx-2860941869:active.jsx-2860941869:focus{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-2860941869:focus{background-color:#f9fafb;}", "button.jsx-2860941869:disabled{border-color:".concat(_uiConstants.colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".small.jsx-2860941869{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-2860941869{height:43px;padding:0 ".concat(_uiConstants.spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-2860941869{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".primary.jsx-2860941869:hover{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-2860941869:active,.primary.jsx-2860941869:active.jsx-2860941869:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-2860941869:focus{background:".concat(_uiConstants.colors.blue800, ";border-color:").concat(_uiConstants.colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-2860941869:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-2860941869:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-2860941869:active,.secondary.jsx-2860941869:active.jsx-2860941869:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-2860941869:focus{background-color:transparent;}", ".secondary.jsx-2860941869:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".destructive.jsx-2860941869{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".destructive.jsx-2860941869:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-2860941869:active,.destructive.jsx-2860941869:active.jsx-2860941869:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-2860941869:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-2860941869:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".destructive.secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-2860941869:hover{border-color:".concat(_uiConstants.colors.red600, ";background:").concat(_uiConstants.colors.red050, ";color:").concat(_uiConstants.colors.red800, ";fill:").concat(_uiConstants.colors.red800, ";}"), ".destructive.secondary.jsx-2860941869:active,.destructive.secondary.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(_uiConstants.colors.red100, ";border-color:").concat(_uiConstants.colors.red700, ";box-shadow:none;}"), ".destructive.secondary.jsx-2860941869:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-2860941869{padding:0 0 0 5px;}", ".button-icon.jsx-2860941869{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:5px;}", ".small.icon-only.jsx-2860941869{padding:0 4px 0 5px;}", ".small.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:2px;}", ".small.icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:1px;}", ".toggled.jsx-2860941869{background:".concat(_uiConstants.colors.grey700, ";border:1px solid ").concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".toggled.jsx-2860941869:focus{background:".concat(_uiConstants.colors.grey800, ";}"), ".toggled.jsx-2860941869:hover{background:".concat(_uiConstants.colors.grey800, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-2860941869:active,.toggled.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(_uiConstants.colors.grey900, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-2860941869:disabled{background:".concat(_uiConstants.colors.grey500, ";border-color:").concat(_uiConstants.colors.grey600, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".loader.jsx-2860941869{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-2860941869+.button-icon.jsx-2860941869{display:none;}", ".icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 8px 0 4px;}", ".small.icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 4px;}"];
-_defaultExport.__hash = "2860941869";
+const _defaultExport = ["button.jsx-1796590446{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(_uiConstants.colors.grey900, ";height:36px;padding:0 ").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(_uiConstants.colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-1796590446:disabled{cursor:not-allowed;}", "button.jsx-1796590446:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-1796590446:focus.jsx-1796590446:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-1796590446:active.jsx-1796590446:focus,button.jsx-1796590446:disabled.jsx-1796590446:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-1796590446:hover{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";}"), "button.jsx-1796590446:active,button.jsx-1796590446:active.jsx-1796590446:focus{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-1796590446:focus{background-color:#f9fafb;}", "button.jsx-1796590446:disabled{border-color:".concat(_uiConstants.colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".small.jsx-1796590446{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-1796590446{height:43px;padding:0 ".concat(_uiConstants.spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-1796590446{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".primary.jsx-1796590446:hover{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-1796590446:active,.primary.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-1796590446:focus{background:".concat(_uiConstants.colors.blue800, ";border-color:").concat(_uiConstants.colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-1796590446:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-1796590446:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-1796590446:active,.secondary.jsx-1796590446:active.jsx-1796590446:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-1796590446:focus{background-color:transparent;}", ".secondary.jsx-1796590446:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".destructive.jsx-1796590446{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".destructive.jsx-1796590446:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-1796590446:active,.destructive.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-1796590446:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-1796590446:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".destructive.secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-1796590446:hover{border-color:".concat(_uiConstants.colors.red600, ";background:").concat(_uiConstants.colors.red050, ";color:").concat(_uiConstants.colors.red800, ";fill:").concat(_uiConstants.colors.red800, ";}"), ".destructive.secondary.jsx-1796590446:active,.destructive.secondary.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(_uiConstants.colors.red100, ";border-color:").concat(_uiConstants.colors.red700, ";box-shadow:none;}"), ".destructive.secondary.jsx-1796590446:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-1796590446{padding:0 0 0 5px;}", ".button-icon.jsx-1796590446{margin-inline-end:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:5px;}", ".small.icon-only.jsx-1796590446{padding-block:0;padding-inline-start:5px;padding-inline-end:4px;}", ".small.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:2px;}", ".small.icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:1px;}", ".toggled.jsx-1796590446{background:".concat(_uiConstants.colors.grey700, ";border:1px solid ").concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".toggled.jsx-1796590446:focus{background:".concat(_uiConstants.colors.grey800, ";}"), ".toggled.jsx-1796590446:hover{background:".concat(_uiConstants.colors.grey800, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-1796590446:active,.toggled.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(_uiConstants.colors.grey900, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-1796590446:disabled{background:".concat(_uiConstants.colors.grey500, ";border-color:").concat(_uiConstants.colors.grey600, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".loader.jsx-1796590446{width:16px;height:16px;margin-inline-end:8px;}", ".loader.jsx-1796590446+.button-icon.jsx-1796590446{display:none;}", ".icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 8px 0 4px;margin-inline-start:4px;margin-inline-end:8px;}", ".small.icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 4px;}"];
+_defaultExport.__hash = "1796590446";
 var _default = _defaultExport;
 exports.default = _default;

package/build/cjs/button-strip/button-strip.js

@@ -33,17 +33,17 @@ const ButtonStrip = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["1268901109", [_uiConstants.spacers.dp8]]]) + " " + ((0, _classnames.default)(className, {
+    className: _style.default.dynamic([["3148822533", [_uiConstants.spacers.dp8]]]) + " " + ((0, _classnames.default)(className, {
       start: !middle && !end,
       middle,
       end
     }) || "")
   }, _react.Children.map(children, child => /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["1268901109", [_uiConstants.spacers.dp8]]]) + " " + "box"
+    className: _style.default.dynamic([["3148822533", [_uiConstants.spacers.dp8]]]) + " " + "box"
   }, child)), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1268901109",
+    id: "3148822533",
     dynamic: [_uiConstants.spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".box.__jsx-style-dynamic-selector{margin-left:".concat(_uiConstants.spacers.dp8, ";}"), ".box.__jsx-style-dynamic-selector:first-child{margin-left:0;}"]));
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".box.__jsx-style-dynamic-selector{margin-inline-start:".concat(_uiConstants.spacers.dp8, ";}"), ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
 };
 
 exports.ButtonStrip = ButtonStrip;

package/build/cjs/button-strip/button-strip.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DefaultAlignedRight = exports.DefaultAlignedMiddle = exports.Default = void 0;
+exports.default = exports.DefaultRTL = exports.DefaultAlignedRight = exports.DefaultAlignedMiddle = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -72,4 +72,11 @@ exports.DefaultAlignedRight = DefaultAlignedRight;
 DefaultAlignedRight.args = {
   end: true
 };
-DefaultAlignedRight.storyName = 'Default - aligned right';
+DefaultAlignedRight.storyName = 'Default - aligned right';
+
+const DefaultRTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_index2.ButtonStrip, args, /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save")));
+
+exports.DefaultRTL = DefaultRTL;
+DefaultRTL.storyName = 'Default - RTL';

package/build/cjs/dropdown-button/dropdown-button.js

@@ -71,9 +71,9 @@ ArrowUp.propTypes = {
 };
 const arrow = {
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "736002830"
-  }, [".jsx-736002830{margin-left:".concat(_uiConstants.spacers.dp12, ";}")]),
-  className: "jsx-736002830"
+    id: "1035250400"
+  }, [".jsx-1035250400{margin-inline-start:".concat(_uiConstants.spacers.dp12, ";}")]),
+  className: "jsx-1035250400"
 };
 
 class DropdownButton extends _react.Component {

package/build/cjs/dropdown-button/dropdown-button.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithMenu = exports.WithClick = exports.Small = exports.Secondary = exports.Primary = exports.Open = exports.ManualControl = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
+exports.default = exports.WithMenu = exports.WithClick = exports.Small = exports.Secondary = exports.RTL = exports.Primary = exports.Open = exports.ManualControl = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
 
 var _menu = require("@dhis2-ui/menu");
 
@@ -168,4 +168,13 @@ const ManualControlTemplate = args => {
 
 const ManualControl = ManualControlTemplate.bind({});
 exports.ManualControl = ManualControl;
-ManualControl.args = {};
+ManualControl.args = {};
+
+const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_index.DropdownButton, args));
+
+exports.RTL = RTL;
+RTL.args = {
+  children: 'RTL text'
+};

package/build/cjs/split-button/split-button.js

@@ -89,7 +89,7 @@ class SplitButton extends _react.Component {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.anchorRef,
       "data-test": dataTest,
-      className: "jsx-4268400365"
+      className: "jsx-2116647326"
     }, /*#__PURE__*/_react.default.createElement(_index.Button, {
       name: name,
       value: value,
@@ -128,8 +128,8 @@ class SplitButton extends _react.Component {
       placement: "bottom-end",
       reference: this.anchorRef
     }, component)), rightButton.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
-      id: "4268400365"
-    }, ["div.jsx-4268400365{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-4268400365>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;}", "div.jsx-4268400365>button:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}"]));
+      id: "2116647326"
+    }, ["div.jsx-2116647326{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-2116647326>button:first-child{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0;}", "div.jsx-2116647326>button:last-child{border-start-start-radius:0;border-end-start-radius:0;}"]));
   }
 
 }

package/build/cjs/split-button/split-button.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithIcon = exports.Small = exports.Secondary = exports.Primary = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
+exports.default = exports.WithIcon = exports.Small = exports.Secondary = exports.RTL = exports.Primary = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -116,4 +116,13 @@ WithIcon.args = {
   children: 'Children',
   component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
   icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon")
+};
+
+const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, args));
+
+exports.RTL = RTL;
+RTL.args = {
+  children: 'RTL text'
 };

package/build/es/button/button.stories.js

@@ -210,6 +210,14 @@ Icon.parameters = {
     }
   }
 };
+export const IconRTL = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(Button, args));
+IconRTL.args = {
+  icon: DemoIcon24,
+  name: 'RTL icon button',
+  children: 'RTL text'
+};
 export const IconOnly = Template.bind({});
 IconOnly.args = {
   icon: DemoIcon24,

package/build/es/button/button.styles.js

@@ -1,4 +1,4 @@
 import { colors, theme, spacers } from '@dhis2/ui-constants';
-const _defaultExport = ["button.jsx-2860941869{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(colors.grey900, ";height:36px;padding:0 ").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-2860941869:disabled{cursor:not-allowed;}", "button.jsx-2860941869:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-2860941869:focus.jsx-2860941869:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:active.jsx-2860941869:focus,button.jsx-2860941869:disabled.jsx-2860941869:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:hover{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";}"), "button.jsx-2860941869:active,button.jsx-2860941869:active.jsx-2860941869:focus{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-2860941869:focus{background-color:#f9fafb;}", "button.jsx-2860941869:disabled{border-color:".concat(colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".small.jsx-2860941869{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-2860941869{height:43px;padding:0 ".concat(spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-2860941869{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".primary.jsx-2860941869:hover{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-2860941869:active,.primary.jsx-2860941869:active.jsx-2860941869:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-2860941869:focus{background:".concat(colors.blue800, ";border-color:").concat(colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-2860941869:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-2860941869:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-2860941869:active,.secondary.jsx-2860941869:active.jsx-2860941869:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-2860941869:focus{background-color:transparent;}", ".secondary.jsx-2860941869:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".destructive.jsx-2860941869{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".destructive.jsx-2860941869:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-2860941869:active,.destructive.jsx-2860941869:active.jsx-2860941869:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-2860941869:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-2860941869:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".destructive.secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(colors.red700, ";fill:").concat(colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-2860941869:hover{border-color:".concat(colors.red600, ";background:").concat(colors.red050, ";color:").concat(colors.red800, ";fill:").concat(colors.red800, ";}"), ".destructive.secondary.jsx-2860941869:active,.destructive.secondary.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(colors.red100, ";border-color:").concat(colors.red700, ";box-shadow:none;}"), ".destructive.secondary.jsx-2860941869:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-2860941869{padding:0 0 0 5px;}", ".button-icon.jsx-2860941869{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:5px;}", ".small.icon-only.jsx-2860941869{padding:0 4px 0 5px;}", ".small.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:2px;}", ".small.icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:1px;}", ".toggled.jsx-2860941869{background:".concat(colors.grey700, ";border:1px solid ").concat(colors.grey900, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".toggled.jsx-2860941869:focus{background:".concat(colors.grey800, ";}"), ".toggled.jsx-2860941869:hover{background:".concat(colors.grey800, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-2860941869:active,.toggled.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(colors.grey900, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-2860941869:disabled{background:".concat(colors.grey500, ";border-color:").concat(colors.grey600, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".loader.jsx-2860941869{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-2860941869+.button-icon.jsx-2860941869{display:none;}", ".icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 8px 0 4px;}", ".small.icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 4px;}"];
-_defaultExport.__hash = "2860941869";
+const _defaultExport = ["button.jsx-1796590446{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(colors.grey900, ";height:36px;padding:0 ").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-1796590446:disabled{cursor:not-allowed;}", "button.jsx-1796590446:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-1796590446:focus.jsx-1796590446:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-1796590446:active.jsx-1796590446:focus,button.jsx-1796590446:disabled.jsx-1796590446:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-1796590446:hover{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";}"), "button.jsx-1796590446:active,button.jsx-1796590446:active.jsx-1796590446:focus{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-1796590446:focus{background-color:#f9fafb;}", "button.jsx-1796590446:disabled{border-color:".concat(colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".small.jsx-1796590446{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-1796590446{height:43px;padding:0 ".concat(spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-1796590446{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".primary.jsx-1796590446:hover{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-1796590446:active,.primary.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-1796590446:focus{background:".concat(colors.blue800, ";border-color:").concat(colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-1796590446:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-1796590446:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-1796590446:active,.secondary.jsx-1796590446:active.jsx-1796590446:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-1796590446:focus{background-color:transparent;}", ".secondary.jsx-1796590446:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".destructive.jsx-1796590446{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".destructive.jsx-1796590446:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-1796590446:active,.destructive.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-1796590446:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-1796590446:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".destructive.secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(colors.red700, ";fill:").concat(colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-1796590446:hover{border-color:".concat(colors.red600, ";background:").concat(colors.red050, ";color:").concat(colors.red800, ";fill:").concat(colors.red800, ";}"), ".destructive.secondary.jsx-1796590446:active,.destructive.secondary.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(colors.red100, ";border-color:").concat(colors.red700, ";box-shadow:none;}"), ".destructive.secondary.jsx-1796590446:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-1796590446{padding:0 0 0 5px;}", ".button-icon.jsx-1796590446{margin-inline-end:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:5px;}", ".small.icon-only.jsx-1796590446{padding-block:0;padding-inline-start:5px;padding-inline-end:4px;}", ".small.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:2px;}", ".small.icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:1px;}", ".toggled.jsx-1796590446{background:".concat(colors.grey700, ";border:1px solid ").concat(colors.grey900, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".toggled.jsx-1796590446:focus{background:".concat(colors.grey800, ";}"), ".toggled.jsx-1796590446:hover{background:".concat(colors.grey800, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-1796590446:active,.toggled.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(colors.grey900, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-1796590446:disabled{background:".concat(colors.grey500, ";border-color:").concat(colors.grey600, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".loader.jsx-1796590446{width:16px;height:16px;margin-inline-end:8px;}", ".loader.jsx-1796590446+.button-icon.jsx-1796590446{display:none;}", ".icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 8px 0 4px;margin-inline-start:4px;margin-inline-end:8px;}", ".small.icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 4px;}"];
+_defaultExport.__hash = "1796590446";
 export default _defaultExport;

package/build/es/button-strip/button-strip.js

@@ -15,17 +15,17 @@ const ButtonStrip = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["1268901109", [spacers.dp8]]]) + " " + (cx(className, {
+    className: _JSXStyle.dynamic([["3148822533", [spacers.dp8]]]) + " " + (cx(className, {
       start: !middle && !end,
       middle,
       end
     }) || "")
   }, Children.map(children, child => /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1268901109", [spacers.dp8]]]) + " " + "box"
+    className: _JSXStyle.dynamic([["3148822533", [spacers.dp8]]]) + " " + "box"
   }, child)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1268901109",
+    id: "3148822533",
     dynamic: [spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".box.__jsx-style-dynamic-selector{margin-left:".concat(spacers.dp8, ";}"), ".box.__jsx-style-dynamic-selector:first-child{margin-left:0;}"]));
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".box.__jsx-style-dynamic-selector{margin-inline-start:".concat(spacers.dp8, ";}"), ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
 };
 
 const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool);

package/build/es/button-strip/button-strip.stories.js

@@ -50,4 +50,8 @@ export const DefaultAlignedRight = args => /*#__PURE__*/React.createElement(Butt
 DefaultAlignedRight.args = {
   end: true
 };
-DefaultAlignedRight.storyName = 'Default - aligned right';
+DefaultAlignedRight.storyName = 'Default - aligned right';
+export const DefaultRTL = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(ButtonStrip, args, /*#__PURE__*/React.createElement(Button, null, "Save"), /*#__PURE__*/React.createElement(Button, null, "Save"), /*#__PURE__*/React.createElement(Button, null, "Save"), /*#__PURE__*/React.createElement(Button, null, "Save")));
+DefaultRTL.storyName = 'Default - RTL';

package/build/es/dropdown-button/dropdown-button.js

@@ -52,9 +52,9 @@ ArrowUp.propTypes = {
 };
 const arrow = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "736002830"
-  }, [".jsx-736002830{margin-left:".concat(spacers.dp12, ";}")]),
-  className: "jsx-736002830"
+    id: "1035250400"
+  }, [".jsx-1035250400{margin-inline-start:".concat(spacers.dp12, ";}")]),
+  className: "jsx-1035250400"
 };
 
 class DropdownButton extends Component {

package/build/es/dropdown-button/dropdown-button.stories.js

@@ -137,4 +137,10 @@ const ManualControlTemplate = args => {
 };
 
 export const ManualControl = ManualControlTemplate.bind({});
-ManualControl.args = {};
+ManualControl.args = {};
+export const RTL = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(DropdownButton, args));
+RTL.args = {
+  children: 'RTL text'
+};

package/build/es/split-button/split-button.js

@@ -68,7 +68,7 @@ class SplitButton extends Component {
     return /*#__PURE__*/React.createElement("div", {
       ref: this.anchorRef,
       "data-test": dataTest,
-      className: "jsx-4268400365"
+      className: "jsx-2116647326"
     }, /*#__PURE__*/React.createElement(Button, {
       name: name,
       value: value,
@@ -107,8 +107,8 @@ class SplitButton extends Component {
       placement: "bottom-end",
       reference: this.anchorRef
     }, component)), rightButton.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "4268400365"
-    }, ["div.jsx-4268400365{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-4268400365>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;}", "div.jsx-4268400365>button:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}"]));
+      id: "2116647326"
+    }, ["div.jsx-2116647326{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-2116647326>button:first-child{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0;}", "div.jsx-2116647326>button:last-child{border-start-start-radius:0;border-end-start-radius:0;}"]));
   }
 
 }

package/build/es/split-button/split-button.stories.js

@@ -93,4 +93,10 @@ WithIcon.args = {
   children: 'Children',
   component: /*#__PURE__*/React.createElement("div", null, "Component"),
   icon: /*#__PURE__*/React.createElement("div", null, "Icon")
+};
+export const RTL = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(SplitButton, args));
+RTL.args = {
+  children: 'RTL text'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "9.2.0",
+    "version": "9.3.0-alpha.1",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -33,11 +33,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "9.2.0",
-        "@dhis2-ui/loader": "9.2.0",
-        "@dhis2-ui/popper": "9.2.0",
-        "@dhis2/ui-constants": "9.2.0",
-        "@dhis2/ui-icons": "9.2.0",
+        "@dhis2-ui/layer": "9.3.0-alpha.1",
+        "@dhis2-ui/loader": "9.3.0-alpha.1",
+        "@dhis2-ui/popper": "9.3.0-alpha.1",
+        "@dhis2/ui-constants": "9.3.0-alpha.1",
+        "@dhis2/ui-icons": "9.3.0-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },