@openmrs/esm-form-builder-app 2.5.1-pre.1042 → 2.5.1-pre.1049

package/dist/openmrs-esm-form-builder-app.js.buildmanifest.json

@@ -5,9 +5,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 3346,
+      "size": 15067,
       "sizes": {
-        "javascript": 3346
+        "javascript": 15067
       },
       "names": [],
       "idHints": [],
@@ -21,7 +21,7 @@
       "auxiliaryFiles": [
         "9.js.map"
       ],
-      "hash": "de94f31efaa9d604",
+      "hash": "d6e677d6f78823b6",
       "childrenByOrder": {}
     },
     {
@@ -290,9 +290,9 @@
       "entry": false,
       "recorded": false,
       "reason": "reused as split chunk (cache group: default)",
-      "size": 55614,
+      "size": 56551,
       "sizes": {
-        "javascript": 55614
+        "javascript": 56551
       },
       "names": [],
       "idHints": [],
@@ -306,7 +306,7 @@
       "auxiliaryFiles": [
         "228.js.map"
       ],
-      "hash": "f503f29bf8b2f1d6",
+      "hash": "2a315f8e00a7c014",
       "childrenByOrder": {}
     },
     {
@@ -341,9 +341,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1852,
+      "size": 13573,
       "sizes": {
-        "javascript": 1852
+        "javascript": 13573
       },
       "names": [],
       "idHints": [],
@@ -357,7 +357,7 @@
       "auxiliaryFiles": [
         "292.js.map"
       ],
-      "hash": "7908b68dc84142a0",
+      "hash": "90458660d6e443cd",
       "childrenByOrder": {}
     },
     {
@@ -485,9 +485,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1362,
+      "size": 13083,
       "sizes": {
-        "javascript": 1362
+        "javascript": 13083
       },
       "names": [],
       "idHints": [],
@@ -501,7 +501,7 @@
       "auxiliaryFiles": [
         "429.js.map"
       ],
-      "hash": "a5ddc22bae3f51f0",
+      "hash": "6ff7e4fd7740fe85",
       "childrenByOrder": {}
     },
     {
@@ -509,9 +509,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 5949,
+      "size": 17670,
       "sizes": {
-        "javascript": 5949
+        "javascript": 17670
       },
       "names": [],
       "idHints": [],
@@ -525,7 +525,7 @@
       "auxiliaryFiles": [
         "431.js.map"
       ],
-      "hash": "a1439e7933261cba",
+      "hash": "6539be911ed92208",
       "childrenByOrder": {}
     },
     {
@@ -578,9 +578,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 61363,
+      "size": 61402,
       "sizes": {
-        "javascript": 61363
+        "javascript": 61402
       },
       "names": [],
       "idHints": [],
@@ -594,7 +594,7 @@
       "auxiliaryFiles": [
         "505.js.map"
       ],
-      "hash": "f60b4bd4c41848f2",
+      "hash": "29ee94836b7b04ff",
       "childrenByOrder": {}
     },
     {
@@ -648,9 +648,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 12704,
+      "size": 13584,
       "sizes": {
-        "javascript": 12704
+        "javascript": 13584
       },
       "names": [],
       "idHints": [],
@@ -664,7 +664,7 @@
       "auxiliaryFiles": [
         "601.js.map"
       ],
-      "hash": "9de6c74081cad66f",
+      "hash": "7b73e36749a42850",
       "childrenByOrder": {}
     },
     {
@@ -1190,9 +1190,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 3231,
+      "size": 14952,
       "sizes": {
-        "javascript": 3231
+        "javascript": 14952
       },
       "names": [],
       "idHints": [],
@@ -1206,7 +1206,7 @@
       "auxiliaryFiles": [
         "789.js.map"
       ],
-      "hash": "376013eac2c1e41d",
+      "hash": "225af068d4947fdf",
       "childrenByOrder": {}
     },
     {
@@ -1242,9 +1242,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 5555,
+      "size": 17276,
       "sizes": {
-        "javascript": 5555
+        "javascript": 17276
       },
       "names": [],
       "idHints": [],
@@ -1258,7 +1258,7 @@
       "auxiliaryFiles": [
         "835.js.map"
       ],
-      "hash": "24beac9d083404bf",
+      "hash": "9b1c6c22947bb9aa",
       "childrenByOrder": {}
     },
     {
@@ -1266,9 +1266,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 4225,
+      "size": 15946,
       "sizes": {
-        "javascript": 4225
+        "javascript": 15946
       },
       "names": [],
       "idHints": [],
@@ -1282,7 +1282,7 @@
       "auxiliaryFiles": [
         "852.js.map"
       ],
-      "hash": "05f9a0b77800d239",
+      "hash": "2d0fa8e8f0912b82",
       "childrenByOrder": {}
     },
     {
@@ -1290,9 +1290,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 281419,
+      "size": 282461,
       "sizes": {
-        "javascript": 281335,
+        "javascript": 282377,
         "consume-shared": 84
       },
       "names": [],
@@ -1307,7 +1307,7 @@
       "auxiliaryFiles": [
         "916.js.map"
       ],
-      "hash": "dab308e40b62fbf4",
+      "hash": "0f2c9ac8ac14e1d5",
       "childrenByOrder": {}
     },
     {
@@ -1342,9 +1342,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 6299,
+      "size": 18020,
       "sizes": {
-        "javascript": 6299
+        "javascript": 18020
       },
       "names": [],
       "idHints": [],
@@ -1358,7 +1358,7 @@
       "auxiliaryFiles": [
         "963.js.map"
       ],
-      "hash": "c7efced49d95e248",
+      "hash": "30ca25e9115c160f",
       "childrenByOrder": {}
     }
   ]

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"add-question-modal","component":"addQuestionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"}],"version":"2.5.1-pre.1042"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"add-question-modal","component":"addQuestionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"}],"version":"2.5.1-pre.1049"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "2.5.1-pre.1042",
+  "version": "2.5.1-pre.1049",
   "license": "MPL-2.0",
   "description": "Form Builder for O3",
   "browser": "dist/openmrs-esm-form-builder-app.js",

package/src/components/action-buttons/action-buttons.scss

@@ -4,7 +4,7 @@
   justify-content: flex-end;
   margin: 1rem 0;
 
-  button {
+  > button {
     margin-left: 1rem
   }
 }

package/src/components/action-buttons/unpublish-form.modal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
+import styles from '../modals.scss';
 
 interface UnpublishModalProps {
   closeModal: () => void;
@@ -13,6 +14,7 @@ const UnpublishFormModal: React.FC<UnpublishModalProps> = ({ closeModal, onUnpub
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         title={t('unpublishConfirmation', 'Are you sure you want to unpublish this form?')}
       />

package/src/components/dashboard/delete-form.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 .spinner {
   &:global(.cds--inline-loading) {
     min-height: 1rem;
@@ -7,3 +9,31 @@
     font-size: unset;
   }
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

package/src/components/form-editor/form-editor.component.tsx

@@ -77,13 +77,22 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
   const [publishedWithErrors, setPublishedWithErrors] = useState(false);
   const [errors, setErrors] = useState<Array<MarkerProps>>([]);
   const [validationOn, setValidationOn] = useState(false);
+  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState('');
 
   const isLoadingFormOrSchema = Boolean(formUuid) && (isLoadingClobdata || isLoadingForm);
 
-  const handleSchemaChange = useCallback((updatedSchema: string) => {
-    setStringifiedSchema(updatedSchema);
+  const resetErrorMessage = useCallback(() => {
+    setInvalidJsonErrorMessage('');
   }, []);
 
+  const handleSchemaChange = useCallback(
+    (updatedSchema: string) => {
+      resetErrorMessage();
+      setStringifiedSchema(updatedSchema);
+    },
+    [resetErrorMessage],
+  );
+
   const launchRestoreDraftSchemaModal = useCallback(() => {
     const dispose = showModal('restore-draft-schema-modal', {
       closeModal: () => dispose(),
@@ -199,12 +208,6 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
     updateSchema({ ...dummySchema });
   }, [updateSchema]);
 
-  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState('');
-
-  const resetErrorMessage = useCallback(() => {
-    setInvalidJsonErrorMessage('');
-  }, []);
-
   const renderSchemaChanges = useCallback(() => {
     resetErrorMessage();
     {

package/src/components/form-editor/restore-draft-schema.modal.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
 import { type Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface RestoreDraftSchemaModalProps {
   closeModal: () => void;
@@ -24,7 +25,11 @@ const RestoreDraftSchemaModal: React.FC<RestoreDraftSchemaModalProps> = ({ close
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('schemaNotFound', 'Schema not found')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('schemaNotFound', 'Schema not found')}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <p>

package/src/components/interactive-builder/add-question.modal.tsx

@@ -7,9 +7,9 @@ import {
   Form,
   FormGroup,
   FormLabel,
-  Layer,
   InlineLoading,
   InlineNotification,
+  Layer,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -19,11 +19,11 @@ import {
   Search,
   Select,
   SelectItem,
+  SelectSkeleton,
   Stack,
   Tag,
   TextInput,
   Tile,
-  SelectSkeleton,
 } from '@carbon/react';
 import { ArrowUpRight } from '@carbon/react/icons';
 import { showSnackbar, useConfig, useDebounce } from '@openmrs/esm-framework';
@@ -46,8 +46,8 @@ import type {
 import { useConceptLookup } from '../../hooks/useConceptLookup';
 import { usePatientIdentifierTypes } from '../../hooks/usePatientIdentifierTypes';
 import { usePersonAttributeTypes } from '../../hooks/usePersonAttributeTypes';
-import styles from './question-modal.scss';
 import { useProgramWorkStates, usePrograms } from '../../hooks/useProgramStates';
+import styles from './question-modal.scss';
 
 interface AddQuestionModalProps {
   closeModal: () => void;
@@ -303,7 +303,11 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
 
   return (
     <>
-      <ModalHeader title={t('createNewQuestion', 'Create a new question')} closeModal={closeModal} />
+      <ModalHeader
+        className={styles.modalHeader}
+        title={t('createNewQuestion', 'Create a new question')}
+        closeModal={closeModal}
+      />
       <Form className={styles.form} onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody hasScrollingContent>
           <FormGroup legendText={''}>
@@ -701,8 +705,8 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                   name="datePickerType"
                   legendText={t('datePickerType', 'The type of date picker to show ')}
                 >
-                  {/** Filters out the date picker types based on the selected concept's data type. 
-                       If no concept is selected, all date picker types are shown. 
+                  {/** Filters out the date picker types based on the selected concept's data type.
+                       If no concept is selected, all date picker types are shown.
                   */}
                   {selectedConcept && selectedConcept.datatype
                     ? datePickerTypeOptions[selectedConcept.datatype.name.toLowerCase()].map((type) => (

package/src/components/interactive-builder/delete-page.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface DeletePageModalProps {
   closeModal: () => void;
@@ -40,6 +41,7 @@ const DeletePageModal: React.FC<DeletePageModalProps> = ({ onSchemaChange, pageI
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         title={t('deletePageConfirmation', 'Are you sure you want to delete this page?')}
         closeModal={closeModal}
       />

package/src/components/interactive-builder/delete-question.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Question, Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface DeleteQuestionModal {
   closeModal: () => void;
@@ -68,6 +69,7 @@ const DeleteQuestionModal: React.FC<DeleteQuestionModal> = ({
   return (
     <div>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         title={t('deleteQuestionConfirmation', 'Are you sure you want to delete this question? ')}
       />

package/src/components/interactive-builder/delete-section.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface DeleteSectionModal {
   closeModal: () => void;
@@ -47,6 +48,7 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         title={t('deleteSectionConfirmation', 'Are you sure you want to delete this section?')}
         closeModal={closeModal}
       />

package/src/components/interactive-builder/edit-question.modal.tsx

@@ -52,8 +52,8 @@ import { usePersonAttributeLookup } from '../../hooks/usePersonAttributeLookup';
 import { usePersonAttributeName } from '../../hooks/usePersonAttributeName';
 import { usePersonAttributeTypes } from '../../hooks/usePersonAttributeTypes';
 import { usePrograms, useProgramWorkStates } from '../../hooks/useProgramStates';
-import styles from './question-modal.scss';
 import { getDatePickerType } from './add-question.modal';
+import styles from './question-modal.scss';
 
 interface EditQuestionModalProps {
   closeModal: () => void;
@@ -357,7 +357,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('editQuestion', 'Edit question')} />
+      <ModalHeader className={styles.modalHeader} closeModal={closeModal} title={t('editQuestion', 'Edit question')} />
       <Form className={styles.form} onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody hasScrollingContent>
           <Stack gap={5}>
@@ -832,8 +832,8 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                 name="datePickerType"
                 legendText={t('datePickerType', 'The type of date picker to show')}
               >
-                {/** Filters out the date picker types based on the selected concept's data type. 
-                     If no concept is selected, all date picker types are shown. 
+                {/** Filters out the date picker types based on the selected concept's data type.
+                     If no concept is selected, all date picker types are shown.
                 */}
                 {selectedConcept && selectedConcept.datatype
                   ? datePickerTypeOptions[selectedConcept.datatype.name.toLowerCase()].map((type) => (

package/src/components/interactive-builder/new-form.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, Stack, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface NewFormModalProps {
   schema: Schema;
@@ -50,7 +51,11 @@ const NewFormModal: React.FC<NewFormModalProps> = ({ schema, onSchemaChange, clo
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('createNewForm', 'Create a new form')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('createNewForm', 'Create a new form')}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <Stack gap={5}>

package/src/components/interactive-builder/page.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface PageModalProps {
   closeModal: () => void;
@@ -49,7 +50,11 @@ const PageModal: React.FC<PageModalProps> = ({ closeModal, schema, onSchemaChang
 
   return (
     <>
-      <ModalHeader title={t('createNewPage', 'Create a new page')} closeModal={closeModal} />
+      <ModalHeader
+        className={styles.modalHeader}
+        title={t('createNewPage', 'Create a new page')}
+        closeModal={closeModal}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <FormGroup legendText={''}>

package/src/components/interactive-builder/question-modal.scss

@@ -1,4 +1,5 @@
 @use '@carbon/colors';
+@use '@carbon/layout';
 @use "@carbon/type";
 
 .label {
@@ -126,3 +127,31 @@
   color: colors.$red-60;
   margin-left: 0.125rem;
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

package/src/components/interactive-builder/section.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface SectionModalProps {
   closeModal: () => void;
@@ -49,7 +50,11 @@ const SectionModal: React.FC<SectionModalProps> = ({ closeModal, schema, onSchem
 
   return (
     <>
-      <ModalHeader title={t('createNewSection', 'Create a new section')} closeModal={closeModal} />
+      <ModalHeader
+        className={styles.modalHeader}
+        title={t('createNewSection', 'Create a new section')}
+        closeModal={closeModal}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <FormGroup legendText={''}>

package/src/components/modals/save-form-modal.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 .spinner {
   &:global(.cds--inline-loading) {
     min-height: 1rem;
@@ -12,3 +14,31 @@
   max-height: 75vh;
   overflow-y: auto;
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}