@kaizen/components 1.73.3 → 1.73.4

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

@@ -31,21 +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,
     className = _a.className,
-    props = tslib.__rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter", "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,
@@ -70,18 +68,16 @@ var InputEditModal = function (_a) {
     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/InputEditModal/InputEditModal.mjs

@@ -23,21 +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,
       className = _a.className,
-      props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter", "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,
@@ -62,18 +60,16 @@ const InputEditModal = /*#__PURE__*/function () {
       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/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, className, ...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.3",
+  "version": "1.73.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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/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/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/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,
@@ -90,15 +88,9 @@ export const InputEditModal = ({
       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}
@@ -107,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}