@kaizen/components 1.73.2 → 1.73.4

package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -86,7 +86,8 @@ var ConfirmationModal = function (_a) {
     confirmWorking = _a.confirmWorking,
     propsOnDismiss = _a.onDismiss,
     children = _a.children,
-    props = tslib.__rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "variant", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
+    className = _a.className,
+    props = tslib.__rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "variant", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children", "className"]);
   var variantName = variant !== null && variant !== undefined ? variant : mood;
   var onDismiss = confirmWorking ? undefined : propsOnDismiss;
   var footerActions = [];
@@ -112,7 +113,8 @@ var ConfirmationModal = function (_a) {
     onEscapeKeyup: onDismiss,
     onOutsideModalClick: onDismiss,
     onAfterLeave: onAfterLeave,
-    onAfterEnter: onAfterEnter
+    onAfterEnter: onAfterEnter,
+    className: className
   }, React__default.default.createElement("div", tslib.__assign({
     className: ConfirmationModal_module.modal,
     "data-modal": true

package/dist/cjs/Modal/ContextModal/ContextModal.cjs

@@ -44,7 +44,8 @@ var ContextModal = function (_a) {
     image = _a.image,
     secondaryLabel = _a.secondaryLabel,
     onSecondaryAction = _a.onSecondaryAction,
-    props = tslib.__rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
+    className = _a.className,
+    props = tslib.__rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction", "className"]);
   var onDismiss = confirmWorking ? undefined : propsOnDismiss;
   var footerActions = [];
   var workingProps = confirmWorking ? {
@@ -71,7 +72,8 @@ var ContextModal = function (_a) {
     onEscapeKeyup: onDismiss,
     onOutsideModalClick: onDismiss,
     onAfterLeave: onAfterLeave,
-    onAfterEnter: onAfterEnter
+    onAfterEnter: onAfterEnter,
+    className: className
   }, React__default.default.createElement("div", tslib.__assign({
     className: ContextModal_module.modal,
     "data-modal": true

package/dist/cjs/Modal/GenericModal/GenericModal.cjs

@@ -23,7 +23,8 @@ var GenericModal = function (_a) {
     onEscapeKeyup = _a.onEscapeKeyup,
     onOutsideModalClick = _a.onOutsideModalClick,
     onAfterEnter = _a.onAfterEnter,
-    propsOnAfterLeave = _a.onAfterLeave;
+    propsOnAfterLeave = _a.onAfterLeave,
+    className = _a.className;
   var reactId = React.useId();
   var id = propsId !== null && propsId !== undefined ? propsId : reactId;
   var labelledByID = React.useId();
@@ -119,7 +120,8 @@ var GenericModal = function (_a) {
     "data-generic-modal-transition-wrapper": true,
     onClick: function (e) {
       return e.stopPropagation();
-    }
+    },
+    className: className
   }, React__default.default.createElement(FocusLock__default.default, {
     disabled: focusLockDisabled,
     returnFocus: true,

package/dist/cjs/Modal/InputEditModal/InputEditModal.cjs

@@ -31,20 +31,19 @@ var InputEditModal = function (_a) {
     onSubmit = _a.onSubmit,
     onSecondaryAction = _a.onSecondaryAction,
     onAfterLeave = _a.onAfterLeave,
-    _b = _a.localeDirection,
-    localeDirection = _b === undefined ? 'ltr' : _b,
-    _c = _a.submitLabel,
-    submitLabel = _c === undefined ? 'Submit' : _c,
-    _d = _a.dismissLabel,
-    dismissLabel = _d === undefined ? 'Cancel' : _d,
+    _b = _a.submitLabel,
+    submitLabel = _b === undefined ? 'Submit' : _b,
+    _c = _a.dismissLabel,
+    dismissLabel = _c === undefined ? 'Cancel' : _c,
     secondaryLabel = _a.secondaryLabel,
     submitWorking = _a.submitWorking,
     children = _a.children,
-    _e = _a.unpadded,
-    unpadded = _e === undefined ? false : _e,
+    _d = _a.unpadded,
+    unpadded = _d === undefined ? false : _d,
     propsOnDismiss = _a.onDismiss,
     onAfterEnter = _a.onAfterEnter,
-    props = tslib.__rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter"]);
+    className = _a.className,
+    props = tslib.__rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter", "className"]);
   var onDismiss = submitWorking ? undefined : propsOnDismiss;
   var submitAction = {
     label: submitLabel,
@@ -65,21 +64,20 @@ var InputEditModal = function (_a) {
     isOpen: isOpen,
     onEscapeKeyup: onDismiss,
     onAfterLeave: onAfterLeave,
-    onAfterEnter: onAfterEnter
+    onAfterEnter: onAfterEnter,
+    className: className
   }, React__default.default.createElement("div", tslib.__assign({
     className: InputEditModal_module.modal,
-    dir: localeDirection,
     "data-modal": true
   }, props), React__default.default.createElement(ModalHeader.ModalHeader, {
     onDismiss: onDismiss
   }, React__default.default.createElement("div", {
-    className: classnames__default.default(InputEditModal_module.header, localeDirection === 'rtl' && InputEditModal_module.textAlignRTL, !unpadded && InputEditModal_module.padded)
+    className: classnames__default.default(InputEditModal_module.header, !unpadded && InputEditModal_module.padded)
   }, React__default.default.createElement(ModalAccessibleLabel.ModalAccessibleLabel, null, React__default.default.createElement(Heading.Heading, {
     tag: "h2",
     variant: "heading-2"
   }, title)))), React__default.default.createElement(ModalBody.ModalBody, null, React__default.default.createElement("div", {
-    className: classnames__default.default(InputEditModal_module.body, !unpadded && InputEditModal_module.padded),
-    dir: localeDirection
+    className: classnames__default.default(InputEditModal_module.body, !unpadded && InputEditModal_module.padded)
   }, children)), React__default.default.createElement(ModalFooter.ModalFooter, {
     actions: footerActions,
     appearance: mood === 'destructive' ? 'destructive' : 'primary',

package/dist/cjs/Modal/InputEditModal/InputEditModal.module.scss.cjs

@@ -18,7 +18,6 @@ var styles = {
   "custom-5": "InputEditModal-module_custom-5__trORr",
   "custom-7": "InputEditModal-module_custom-7__-98CZ",
   "header": "InputEditModal-module_header__nivTf",
-  "textAlignRTL": "InputEditModal-module_textAlignRTL__5QQP8",
   "padded": "InputEditModal-module_padded__ZdEIS",
   "body": "InputEditModal-module_body__LyxBE"
 };

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -78,7 +78,8 @@ const ConfirmationModal = /*#__PURE__*/function () {
       confirmWorking = _a.confirmWorking,
       propsOnDismiss = _a.onDismiss,
       children = _a.children,
-      props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "variant", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
+      className = _a.className,
+      props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "variant", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children", "className"]);
     var variantName = variant !== null && variant !== undefined ? variant : mood;
     var onDismiss = confirmWorking ? undefined : propsOnDismiss;
     var footerActions = [];
@@ -104,7 +105,8 @@ const ConfirmationModal = /*#__PURE__*/function () {
       onEscapeKeyup: onDismiss,
       onOutsideModalClick: onDismiss,
       onAfterLeave: onAfterLeave,
-      onAfterEnter: onAfterEnter
+      onAfterEnter: onAfterEnter,
+      className: className
     }, /*#__PURE__*/React.createElement("div", __assign({
       className: styles.modal,
       "data-modal": true

package/dist/esm/Modal/ContextModal/ContextModal.mjs

@@ -36,7 +36,8 @@ const ContextModal = /*#__PURE__*/function () {
       image = _a.image,
       secondaryLabel = _a.secondaryLabel,
       onSecondaryAction = _a.onSecondaryAction,
-      props = __rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
+      className = _a.className,
+      props = __rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction", "className"]);
     var onDismiss = confirmWorking ? undefined : propsOnDismiss;
     var footerActions = [];
     var workingProps = confirmWorking ? {
@@ -63,7 +64,8 @@ const ContextModal = /*#__PURE__*/function () {
       onEscapeKeyup: onDismiss,
       onOutsideModalClick: onDismiss,
       onAfterLeave: onAfterLeave,
-      onAfterEnter: onAfterEnter
+      onAfterEnter: onAfterEnter,
+      className: className
     }, /*#__PURE__*/React.createElement("div", __assign({
       className: styles.modal,
       "data-modal": true

package/dist/esm/Modal/GenericModal/GenericModal.mjs

@@ -15,7 +15,8 @@ const GenericModal = /*#__PURE__*/function () {
       onEscapeKeyup = _a.onEscapeKeyup,
       onOutsideModalClick = _a.onOutsideModalClick,
       onAfterEnter = _a.onAfterEnter,
-      propsOnAfterLeave = _a.onAfterLeave;
+      propsOnAfterLeave = _a.onAfterLeave,
+      className = _a.className;
     var reactId = useId();
     var id = propsId !== null && propsId !== undefined ? propsId : reactId;
     var labelledByID = useId();
@@ -111,7 +112,8 @@ const GenericModal = /*#__PURE__*/function () {
       "data-generic-modal-transition-wrapper": true,
       onClick: function (e) {
         return e.stopPropagation();
-      }
+      },
+      className: className
     }, /*#__PURE__*/React.createElement(FocusLock, {
       disabled: focusLockDisabled,
       returnFocus: true,

package/dist/esm/Modal/InputEditModal/InputEditModal.mjs

@@ -23,20 +23,19 @@ const InputEditModal = /*#__PURE__*/function () {
       onSubmit = _a.onSubmit,
       onSecondaryAction = _a.onSecondaryAction,
       onAfterLeave = _a.onAfterLeave,
-      _b = _a.localeDirection,
-      localeDirection = _b === undefined ? 'ltr' : _b,
-      _c = _a.submitLabel,
-      submitLabel = _c === undefined ? 'Submit' : _c,
-      _d = _a.dismissLabel,
-      dismissLabel = _d === undefined ? 'Cancel' : _d,
+      _b = _a.submitLabel,
+      submitLabel = _b === undefined ? 'Submit' : _b,
+      _c = _a.dismissLabel,
+      dismissLabel = _c === undefined ? 'Cancel' : _c,
       secondaryLabel = _a.secondaryLabel,
       submitWorking = _a.submitWorking,
       children = _a.children,
-      _e = _a.unpadded,
-      unpadded = _e === undefined ? false : _e,
+      _d = _a.unpadded,
+      unpadded = _d === undefined ? false : _d,
       propsOnDismiss = _a.onDismiss,
       onAfterEnter = _a.onAfterEnter,
-      props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter"]);
+      className = _a.className,
+      props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter", "className"]);
     var onDismiss = submitWorking ? undefined : propsOnDismiss;
     var submitAction = {
       label: submitLabel,
@@ -57,21 +56,20 @@ const InputEditModal = /*#__PURE__*/function () {
       isOpen: isOpen,
       onEscapeKeyup: onDismiss,
       onAfterLeave: onAfterLeave,
-      onAfterEnter: onAfterEnter
+      onAfterEnter: onAfterEnter,
+      className: className
     }, /*#__PURE__*/React.createElement("div", __assign({
       className: styles.modal,
-      dir: localeDirection,
       "data-modal": true
     }, props), /*#__PURE__*/React.createElement(ModalHeader, {
       onDismiss: onDismiss
     }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles.header, localeDirection === 'rtl' && styles.textAlignRTL, !unpadded && styles.padded)
+      className: classnames(styles.header, !unpadded && styles.padded)
     }, /*#__PURE__*/React.createElement(ModalAccessibleLabel, null, /*#__PURE__*/React.createElement(Heading, {
       tag: "h2",
       variant: "heading-2"
     }, title)))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles.body, !unpadded && styles.padded),
-      dir: localeDirection
+      className: classnames(styles.body, !unpadded && styles.padded)
     }, children)), /*#__PURE__*/React.createElement(ModalFooter, {
       actions: footerActions,
       appearance: mood === 'destructive' ? 'destructive' : 'primary',

package/dist/esm/Modal/InputEditModal/InputEditModal.module.scss.mjs

@@ -16,7 +16,6 @@ var styles = {
   "custom-5": "InputEditModal-module_custom-5__trORr",
   "custom-7": "InputEditModal-module_custom-7__-98CZ",
   "header": "InputEditModal-module_header__nivTf",
-  "textAlignRTL": "InputEditModal-module_textAlignRTL__5QQP8",
   "padded": "InputEditModal-module_padded__ZdEIS",
   "body": "InputEditModal-module_body__LyxBE"
 };

package/dist/styles.css

@@ -6409,7 +6409,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .GenericModal-module_pseudoScrollbar__BhRqh {
   /* Tech debt - this !important existed before Stylelint rules */
-  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
+  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .GenericModal-module_hide__SK9PI {
@@ -6460,11 +6460,11 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 
 .ModalFooter-module_actionButton__YD4vG + .ModalFooter-module_actionButton__YD4vG {
-  margin-right: var(--spacing-sm, 0.75rem);
+  margin-inline-end: var(--spacing-sm, 0.75rem);
 }
 @media (max-width: calc(768px - 1px)) {
   .ModalFooter-module_actionButton__YD4vG + .ModalFooter-module_actionButton__YD4vG {
-    margin-top: var(--spacing-sm, 0.75rem);
+    margin-block-start: var(--spacing-sm, 0.75rem);
   }
 }
 
@@ -6480,7 +6480,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 
 .ModalFooter-module_border__jj-Zy {
-  border-top: 1px solid var(--border-solid-border-color, #e1e2ea);
+  border-block-start: 1px solid var(--border-solid-border-color, #e1e2ea);
 }
 
 .ModalFooter-module_start__0GJno {
@@ -6495,8 +6495,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .ModalFooter-module_fixed__mV5fZ {
   position: absolute;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
 }
 
 .ModalFooter-module_filler__kElGb {
@@ -6531,8 +6531,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .ModalHeader-module_fixed__JEeic {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .ModalHeader-module_filler__w1MCN {
@@ -6555,7 +6555,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 .ModalAccessibleLabel-module_modalLabel__CQAIs.ModalAccessibleLabel-module_prominent__WEPnY {
   grid-column-start: 2;
-  text-align: left;
+  text-align: start;
 }
 .ModalAccessibleLabel-module_modalLabel__CQAIs:focus {
   outline: none;
@@ -6798,7 +6798,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .ConfirmationModal-module_pseudoScrollbar__NqMuT {
   /* Tech debt - this !important existed before Stylelint rules */
-  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
+  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .ConfirmationModal-module_hide__jOdWV {
@@ -6819,7 +6819,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   grid-template-columns: 0.2fr 2fr;
   align-items: center;
   color: var(--color-white, #ffffff);
-  text-align: left;
+  text-align: start;
   border-radius: var(--border-solid-border-radius, 7px) var(--border-solid-border-radius, 7px) 0 0;
 }
 .ConfirmationModal-module_header__Ooy23.ConfirmationModal-module_padded__nGa2- {
@@ -6850,9 +6850,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 @media (max-width: 768px) {
   .ConfirmationModal-module_iconContainer__QjdGa .ConfirmationModal-module_spotIcon__rFSHQ {
-    margin-right: 0.9375rem;
+    margin-inline-end: 0.9375rem;
     position: relative;
-    top: 0.125rem;
+    inset-block-start: 0.125rem;
   }
 }
 
@@ -6872,13 +6872,13 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 .ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa {
   position: absolute;
-  top: 8%;
+  inset-block-start: 8%;
 }
 @media (max-width: 768px) {
   .ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_iconContainer__QjdGa {
     position: relative;
-    top: 0;
-    margin-bottom: var(--spacing-sm, 0.75rem);
+    inset-block-start: 0;
+    margin-block-end: var(--spacing-sm, 0.75rem);
   }
 }
 .ConfirmationModal-module_prominent__8-gkP .ConfirmationModal-module_spotIcon__rFSHQ {
@@ -7153,7 +7153,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .ContextModal-module_pseudoScrollbar__6RfHj {
   /* Tech debt - this !important existed before Stylelint rules */
-  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
+  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .ContextModal-module_hide__Sdnsg {
@@ -7228,7 +7228,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 
 .ContextModal-module_footerWithSecondaryAction__-5sq8 {
-  margin-left: calc(-1 * var(--spacing-sm, 0.75rem));
+  margin-inline-start: calc(-1 * var(--spacing-sm, 0.75rem));
 }
 
 .ContextModal-module_emptyFooter__UHWc- {
@@ -7268,7 +7268,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   justify-content: center;
 }
 .ContextModal-module_landscapeContentlayout__IFqQN .ContextModal-module_content__-KrFF {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 @media (min-width: 768px) {
   .ContextModal-module_landscapeContentlayout__IFqQN .ContextModal-module_content__-KrFF {
@@ -7476,7 +7476,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .InputEditModal-module_pseudoScrollbar__WCHmn {
   /* Tech debt - this !important existed before Stylelint rules */
-  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
+  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .InputEditModal-module_hide__N88RW {
@@ -7525,10 +7525,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .InputEditModal-module_header__nivTf {
   color: var(--color-purple-800, #2f2438);
-  text-align: left;
-}
-.InputEditModal-module_header__nivTf.InputEditModal-module_textAlignRTL__5QQP8 {
-  text-align: right;
+  text-align: start;
 }
 .InputEditModal-module_header__nivTf.InputEditModal-module_padded__ZdEIS {
   padding: var(--spacing-md, 1.5rem) var(--spacing-lg, 2.25rem);

package/dist/types/Modal/ConfirmationModal/ConfirmationModal.d.ts

@@ -53,7 +53,7 @@ export type ConfirmationModalProps = BaseConfirmationModalProps & (ConfirmationM
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}
  */
 export declare const ConfirmationModal: {
-    ({ isOpen, isProminent, unpadded, mood, variant, title, onConfirm, onAfterLeave, onAfterEnter, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, ...props }: ConfirmationModalProps): JSX.Element;
+    ({ isOpen, isProminent, unpadded, mood, variant, title, onConfirm, onAfterLeave, onAfterEnter, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, className, ...props }: ConfirmationModalProps): JSX.Element;
     displayName: string;
 };
 export {};

package/dist/types/Modal/ContextModal/ContextModal.d.ts

@@ -39,6 +39,6 @@ export type ContextModalProps = Readonly<{
  * {@link https://cultureamp.design/?path=/docs/components-modals--contextmodal--docs Storybook}
  */
 export declare const ContextModal: {
-    ({ isOpen, unpadded, layout, title, onConfirm, onDismiss: propsOnDismiss, onAfterLeave, onAfterEnter, confirmLabel, confirmWorking, renderBackground, children, contentHeader, image, secondaryLabel, onSecondaryAction, ...props }: ContextModalProps): JSX.Element;
+    ({ isOpen, unpadded, layout, title, onConfirm, onDismiss: propsOnDismiss, onAfterLeave, onAfterEnter, confirmLabel, confirmWorking, renderBackground, children, contentHeader, image, secondaryLabel, onSecondaryAction, className, ...props }: ContextModalProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Modal/GenericModal/GenericModal.d.ts

@@ -10,8 +10,9 @@ export type GenericModalProps = {
     onAfterEnter?: () => void;
     /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
+    className?: string;
 };
 export declare const GenericModal: {
-    ({ id: propsId, children, isOpen, focusLockDisabled, onEscapeKeyup, onOutsideModalClick, onAfterEnter, onAfterLeave: propsOnAfterLeave, }: GenericModalProps): JSX.Element;
+    ({ id: propsId, children, isOpen, focusLockDisabled, onEscapeKeyup, onOutsideModalClick, onAfterEnter, onAfterLeave: propsOnAfterLeave, className, }: GenericModalProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Modal/InputEditModal/InputEditModal.d.ts

@@ -14,7 +14,6 @@ export type InputEditModalProps = {
     onAfterEnter?: () => void;
     /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
-    localeDirection?: 'rtl' | 'ltr';
     submitLabel?: string;
     dismissLabel?: string;
     secondaryLabel?: string;
@@ -33,6 +32,6 @@ export type InputEditModalProps = {
  * {@link https://cultureamp.design/?path=/docs/components-modals-inputeditmodal--docs Storybook}
  */
 export declare const InputEditModal: {
-    ({ isOpen, mood, title, onSubmit, onSecondaryAction, onAfterLeave, localeDirection, submitLabel, dismissLabel, secondaryLabel, submitWorking, children, unpadded, onDismiss: propsOnDismiss, onAfterEnter, ...props }: InputEditModalProps): JSX.Element;
+    ({ isOpen, mood, title, onSubmit, onSecondaryAction, onAfterLeave, submitLabel, dismissLabel, secondaryLabel, submitWorking, children, unpadded, onDismiss: propsOnDismiss, onAfterEnter, className, ...props }: InputEditModalProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.73.2",
+  "version": "1.73.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -185,8 +185,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/package-bundler": "2.0.4",
-    "@kaizen/design-tokens": "10.8.7"
+    "@kaizen/design-tokens": "10.8.7",
+    "@kaizen/package-bundler": "2.0.4"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Modal/ConfirmationModal/ConfirmationModal.module.scss

@@ -21,7 +21,7 @@
   grid-template-columns: 0.2fr 2fr;
   align-items: center;
   color: $color-white;
-  text-align: left;
+  text-align: start;
   border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
 
   &.padded {
@@ -53,9 +53,9 @@
     height: 30px;
 
     @media (max-width: $layout-breakpoints-medium) {
-      margin-right: 0.9375rem;
+      margin-inline-end: 0.9375rem;
       position: relative;
-      top: 0.125rem;
+      inset-block-start: 0.125rem;
     }
   }
 }
@@ -75,12 +75,12 @@
 
   .iconContainer {
     position: absolute;
-    top: 8%;
+    inset-block-start: 8%;
 
     @media (max-width: $layout-breakpoints-medium) {
       position: relative;
-      top: 0;
-      margin-bottom: $spacing-sm;
+      inset-block-start: 0;
+      margin-block-end: $spacing-sm;
     }
   }
 

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -124,6 +124,7 @@ export const ConfirmationModal = ({
   confirmWorking,
   onDismiss: propsOnDismiss,
   children,
+  className,
   ...props
 }: ConfirmationModalProps): JSX.Element => {
   const variantName = variant ?? mood
@@ -158,6 +159,7 @@ export const ConfirmationModal = ({
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
       onAfterEnter={onAfterEnter}
+      className={className}
     >
       <div className={styles.modal} data-modal {...props}>
         <ModalHeader onDismiss={onDismiss}>

package/src/Modal/ContextModal/ContextModal.module.scss

@@ -58,7 +58,7 @@
 .footerWithSecondaryAction {
   @extend %footer;
 
-  margin-left: calc(-1 * #{$spacing-sm});
+  margin-inline-start: calc(-1 * #{$spacing-sm});
 }
 
 .emptyFooter {
@@ -97,7 +97,7 @@
   }
 
   .content {
-    padding-left: 0;
+    padding-inline-start: 0;
 
     @media (min-width: $layout-breakpoints-medium) {
       max-width: 100%;

package/src/Modal/ContextModal/ContextModal.tsx

@@ -71,6 +71,7 @@ export const ContextModal = ({
   image,
   secondaryLabel,
   onSecondaryAction,
+  className,
   ...props
 }: ContextModalProps): JSX.Element => {
   const onDismiss = confirmWorking ? undefined : propsOnDismiss
@@ -105,6 +106,7 @@ export const ContextModal = ({
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
       onAfterEnter={onAfterEnter}
+      className={className}
     >
       <div className={styles.modal} data-modal {...props}>
         {renderBackground?.()}

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -115,7 +115,7 @@
 
 .pseudoScrollbar {
   /* Tech debt - this !important existed before Stylelint rules */
-  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
+  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .hide {

package/src/Modal/GenericModal/GenericModal.tsx

@@ -17,6 +17,7 @@ export type GenericModalProps = {
   onAfterEnter?: () => void
   /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
+  className?: string
 }
 
 export const GenericModal = ({
@@ -28,6 +29,7 @@ export const GenericModal = ({
   onOutsideModalClick,
   onAfterEnter,
   onAfterLeave: propsOnAfterLeave,
+  className,
 }: GenericModalProps): JSX.Element => {
   const reactId = useId()
   const id = propsId ?? reactId
@@ -137,6 +139,7 @@ export const GenericModal = ({
       afterLeave={onAfterLeaveHandler}
       data-generic-modal-transition-wrapper
       onClick={(e: React.MouseEvent): void => e.stopPropagation()}
+      className={className}
     >
       <FocusLock
         disabled={focusLockDisabled}

package/src/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.module.scss

@@ -27,7 +27,7 @@ $ca-breakpoint-small-mobile: 375px;
 
   &.prominent {
     grid-column-start: 2;
-    text-align: left;
+    text-align: start;
   }
 
   &:focus {

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.module.scss

@@ -32,10 +32,10 @@
 }
 
 .actionButton + .actionButton {
-  margin-right: $spacing-sm;
+  margin-inline-end: $spacing-sm;
 
   @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
-    margin-top: $spacing-sm;
+    margin-block-start: $spacing-sm;
   }
 }
 
@@ -51,7 +51,7 @@
 }
 
 .border {
-  border-top: 1px solid $border-solid-border-color;
+  border-block-start: 1px solid $border-solid-border-color;
 }
 
 .start {
@@ -66,8 +66,8 @@
 
 .fixed {
   position: absolute;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
 }
 
 .filler {

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss

@@ -15,8 +15,8 @@
 
 .fixed {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .filler {

package/src/Modal/InputEditModal/InputEditModal.module.scss

@@ -28,11 +28,7 @@
 
 .header {
   color: $color-purple-800;
-  text-align: left;
-
-  &.textAlignRTL {
-    text-align: right;
-  }
+  text-align: start;
 
   &.padded {
     padding: $spacing-md $spacing-lg;

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -26,7 +26,6 @@ export type InputEditModalProps = {
   onAfterEnter?: () => void
   /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
-  localeDirection?: 'rtl' | 'ltr'
   submitLabel?: string
   dismissLabel?: string
   secondaryLabel?: string
@@ -49,7 +48,6 @@ export const InputEditModal = ({
   onSubmit,
   onSecondaryAction,
   onAfterLeave,
-  localeDirection = 'ltr',
   submitLabel = 'Submit',
   dismissLabel = 'Cancel',
   secondaryLabel,
@@ -58,6 +56,7 @@ export const InputEditModal = ({
   unpadded = false,
   onDismiss: propsOnDismiss,
   onAfterEnter,
+  className,
   ...props
 }: InputEditModalProps): JSX.Element => {
   const onDismiss = submitWorking ? undefined : propsOnDismiss
@@ -87,16 +86,11 @@ export const InputEditModal = ({
       onEscapeKeyup={onDismiss}
       onAfterLeave={onAfterLeave}
       onAfterEnter={onAfterEnter}
+      className={className}
     >
-      <div className={styles.modal} dir={localeDirection} data-modal {...props}>
+      <div className={styles.modal} data-modal {...props}>
         <ModalHeader onDismiss={onDismiss}>
-          <div
-            className={classnames(
-              styles.header,
-              localeDirection === 'rtl' && styles.textAlignRTL,
-              !unpadded && styles.padded,
-            )}
-          >
+          <div className={classnames(styles.header, !unpadded && styles.padded)}>
             <ModalAccessibleLabel>
               <Heading tag="h2" variant="heading-2">
                 {title}
@@ -105,12 +99,7 @@ export const InputEditModal = ({
           </div>
         </ModalHeader>
         <ModalBody>
-          <div
-            className={classnames(styles.body, !unpadded && styles.padded)}
-            dir={localeDirection}
-          >
-            {children}
-          </div>
+          <div className={classnames(styles.body, !unpadded && styles.padded)}>{children}</div>
         </ModalBody>
         <ModalFooter
           actions={footerActions}