@simplybusiness/theme-core 7.1.1 → 7.1.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 7.1.3
+
+### Patch Changes
+
+- 3f02903: Upgrade dependencies
+- af09896: Update CSS imports to not import from outside their own package directory
+- 9c886ca: Change Popover bg colour
+- Updated dependencies [3f02903]
+- Updated dependencies [2973f98]
+- Updated dependencies [61d44d8]
+- Updated dependencies [af09896]
+- Updated dependencies [ffb1bbe]
+  - @simplybusiness/mobius@5.2.0
+
+## 7.1.2
+
+### Patch Changes
+
+- Updated dependencies [3af939c]
+  - @simplybusiness/mobius@5.1.2
+
 ## 7.1.1
 
 ### Patch Changes

package/dist/index.css

@@ -46,8 +46,7 @@
   text-underline-offset:6px;
 }
 
-.mobius-accordion__link:hover,
-  .mobius-accordion__link:active{
+.mobius-accordion__link:hover,.mobius-accordion__link:active{
     color:var(--color-secondary-hover);
   }
 
@@ -56,9 +55,18 @@
     box-shadow:var(--box-shadow-default);
   }
 
+h1.mobius-accordion__link-text,
+h2.mobius-accordion__link-text,
+h3.mobius-accordion__link-text,
+h4.mobius-accordion__link-text,
+h5.mobius-accordion__link-text,
+h6.mobius-accordion__link-text,
 .mobius-accordion__link-text{
+  margin:0;
   margin-right:var(--size-xs);
   line-height:var(--line-height-normal);
+  font-size:var(--font-size-regular);
+  font-weight:var(--font-weight-normal);
 }
 
 .mobius-accordion__link-icon{
@@ -142,8 +150,7 @@
   flex-wrap:wrap;
 }
 
-.mobius-breadcrumb ul,
-  .mobius-breadcrumb ol{
+.mobius-breadcrumb ul,.mobius-breadcrumb ol{
     box-sizing:border-box;
     display:flex;
     align-items:center;
@@ -220,8 +227,7 @@
     );
   }
 
-.mobius-button:where(.--variant-primary):where(:active),
-    .mobius-button:where(.--variant-primary):where(:hover){
+.mobius-button:where(.--variant-primary):where(:active),.mobius-button:where(.--variant-primary):where(:hover){
       background-color:var(--button-variant-primary-hover-color);
     }
 
@@ -241,8 +247,7 @@
     border-color:var(--color-secondary);
   }
 
-.mobius-button:where(.--variant-secondary):where(:active),
-    .mobius-button:where(.--variant-secondary):where(:hover){
+.mobius-button:where(.--variant-secondary):where(:active),.mobius-button:where(.--variant-secondary):where(:hover){
       --button-content-color:var(--color-text-inverted);
       background-color:var(--color-secondary-hover);
       border-color:var(--color-secondary-hover);
@@ -313,7 +318,7 @@
     color:transparent;
   }
 
-.mobius-button:where(.--is-success) > :not(.mobius-button__icon-wrapper){
+.mobius-button:where(.--is-success)  > :not(.mobius-button__icon-wrapper){
       opacity:0;
       visibility:hidden;
     }
@@ -346,7 +351,7 @@
     color:transparent;
   }
 
-.mobius-button:where(.--is-loading) > :not(.mobius-button__icon-wrapper){
+.mobius-button:where(.--is-loading)  > :not(.mobius-button__icon-wrapper){
       opacity:0;
       visibility:hidden;
     }
@@ -369,8 +374,7 @@
       text-decoration:underline;
     }
 
-.mobius-button:where(.--variant-link):hover,
-    .mobius-button:where(.--variant-link):active{
+.mobius-button:where(.--variant-link):hover,.mobius-button:where(.--variant-link):active{
       --button-content-color:var(--color-secondary-hover);
       cursor:pointer;
     }
@@ -477,8 +481,7 @@ a.mobius-button:focus-visible,
     color:var(--color-error);
   }
 
-.mobius-checkbox__label.--is-invalid:not(.--is-disabled):hover,
-    .mobius-checkbox__label.--is-invalid:not(.--is-disabled):focus-within{
+.mobius-checkbox__label.--is-invalid:not(.--is-disabled):hover,.mobius-checkbox__label.--is-invalid:not(.--is-disabled):focus-within{
       background-color:var(--color-error-background);
     }
 
@@ -513,8 +516,7 @@ a.mobius-button:focus-visible,
     margin-bottom:var(--size-sm);
   }
 
-.mobius-checkbox-group .mobius-checkbox,
-  .mobius-checkbox-group .mobius-checkbox-group__wrapper{
+.mobius-checkbox-group .mobius-checkbox,.mobius-checkbox-group .mobius-checkbox-group__wrapper{
     margin-bottom:0;
   }
 
@@ -604,7 +606,7 @@ a.mobius-button:focus-visible,
     transition:opacity var(--drawer-transition-duration) ease-in-out;
   }
 
-.mobius-drawer + .backdrop{
+.mobius-drawer  + .backdrop{
     position:fixed;
     top:0;
     right:0;
@@ -614,7 +616,7 @@ a.mobius-button:focus-visible,
     opacity:0.3;
   }
 
-:is(.mobius-drawer + .backdrop) + ._dialog_overlay{
+:is(.mobius-drawer + .backdrop)  + ._dialog_overlay{
       position:fixed;
       top:0;
       right:0;
@@ -622,8 +624,7 @@ a.mobius-button:focus-visible,
       left:0;
     }
 
-.mobius-drawer.--top,
-  .mobius-drawer.--bottom{
+.mobius-drawer.--top,.mobius-drawer.--bottom{
     width:100vw;
     max-width:100vw;
     height:var(--drawer-height);
@@ -631,8 +632,7 @@ a.mobius-button:focus-visible,
     transition:transform var(--drawer-transition-duration) ease-in-out;
   }
 
-.mobius-drawer.--left,
-  .mobius-drawer.--right{
+.mobius-drawer.--left,.mobius-drawer.--right{
     bottom:0;
     width:100%;
     max-width:var(--drawer-width);
@@ -907,8 +907,7 @@ a.mobius-button:focus-visible,
   border-radius:var(--radius-1);
 }
 
-.mobius-link:hover,
-  .mobius-link:active{
+.mobius-link:hover,.mobius-link:active{
     -webkit-text-decoration:underline;
     text-decoration:underline;
     cursor:pointer;
@@ -1008,8 +1007,8 @@ a.mobius-button:focus-visible,
   position:fixed;
   display:flex;
   flex-direction:column;
-  width:50%;
-  max-height:80%;
+  width:min(90%, 600px);
+  max-height:90%;
   padding:0;
   margin:auto;
   background-color:var(--color-background);
@@ -1018,6 +1017,13 @@ a.mobius-button:focus-visible,
   overflow:hidden;
 }
 
+@media (min-width: 768px){
+
+.mobius-modal{
+    max-height:80%;
+}
+  }
+
 .mobius-modal:not([open]){
     display:none;
   }
@@ -1032,7 +1038,7 @@ a.mobius-button:focus-visible,
     transition:opacity var(--modal-transition-duration) ease-in-out;
   }
 
-.mobius-modal + .backdrop{
+.mobius-modal  + .backdrop{
     position:fixed;
     top:0;
     right:0;
@@ -1042,7 +1048,7 @@ a.mobius-button:focus-visible,
     opacity:0.3;
   }
 
-:is(.mobius-modal + .backdrop) + ._dialog_overlay{
+:is(.mobius-modal + .backdrop)  + ._dialog_overlay{
       position:fixed;
       top:0;
       right:0;
@@ -1109,15 +1115,32 @@ a.mobius-button:focus-visible,
   display:grid;
   grid-template-columns:1fr auto;
   justify-content:space-between;
-  gap:var(--size-sm);
-  align-items:center;
+  gap:var(--size-md);
+  align-items:start;
   padding:var(--size-xs);
   padding-left:var(--size-sm);
+  padding-right:var(--size-sm);
   font-family:var(--font-family);
-  font-size:var(--font-size-small-title);
+  font-size:var(--font-size-4);
   margin:0;
 }
 
+@media (min-width: 768px){
+
+.mobius-modal__header{
+    padding:var(--size-sm);
+    padding-left:var(--size-md);
+    padding-right:var(--size-md);
+    font-size:var(--font-size-5);
+}
+  }
+
+.mobius-modal__close{
+  padding:calc(var(--size-sm) * -1);
+  font-size:var(--font-size-4);
+  flex-shrink:0;
+}
+
 .mobius-modal__content{
   flex-grow:1;
   padding:0 var(--size-sm);
@@ -1126,6 +1149,14 @@ a.mobius-button:focus-visible,
   overflow-y:auto;
 }
 
+@media (min-width: 768px){
+
+.mobius-modal__content{
+    padding:0 var(--size-md);
+    margin:var(--size-md) 0;
+}
+  }
+
 :root,
 :host{
   --number-input-max-width:none;
@@ -1208,12 +1239,12 @@ a.mobius-button:focus-visible,
     user-select:none;
   }
 
-.mobius-password-field :where(.mobius-password-field__show-button):focus-visible{
+:is(.mobius-password-field :where(.mobius-password-field__show-button)):focus-visible{
       box-shadow:var(--box-shadow-default);
       outline:none;
     }
 
-.mobius-password-field :where(.mobius-password-field__show-button):hover{
+:is(.mobius-password-field :where(.mobius-password-field__show-button)):hover{
       background-color:var(--color-background-highlight);
     }
 
@@ -1390,7 +1421,7 @@ a.mobius-button:focus-visible,
       outline-color:var(--color-primary-light);
     }
 
-.mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input:checked::after{
+:is(.mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input):checked::after{
         background-color:var(--color-primary-light);
       }
 
@@ -1403,7 +1434,7 @@ a.mobius-button:focus-visible,
       outline-color:var(--color-primary);
     }
 
-.mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input:checked::after{
+:is(.mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input):checked::after{
         background-color:var(--color-primary);
       }
 
@@ -1420,7 +1451,7 @@ a.mobius-button:focus-visible,
         outline-color:var(--color-primary);
       }
 
-.mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input:checked::after{
+:is(.mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input):checked::after{
           background-color:var(--color-primary);
         }
 
@@ -1433,17 +1464,16 @@ a.mobius-button:focus-visible,
     color:var(--color-error);
   }
 
-.--is-invalid .mobius-radio__label:not(.--is-disabled):hover,
-    .--is-invalid .mobius-radio__label:not(.--is-disabled):focus-within{
+:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)):hover,:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)):focus-within{
       border-color:var(--color-error);
       background-color:var(--color-error-background);
     }
 
-.--is-invalid .mobius-radio__label:not(.--is-disabled) .mobius-radio__input{
+:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input{
       outline-color:var(--color-error);
     }
 
-.--is-invalid .mobius-radio__label:not(.--is-disabled) .mobius-radio__input:checked::after{
+:is(:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input):checked::after{
         background-color:var(--color-error);
       }
 
@@ -1480,33 +1510,27 @@ a.mobius-button:focus-visible,
     flex-direction:row;
   }
 
-.mobius-segment-group .mobius-segment-group.gap-size-xs,
-  .mobius-segment-group.gap-size-xs{
+.mobius-segment-group .mobius-segment-group.gap-size-xs,.mobius-segment-group.gap-size-xs{
     margin:var(--size-xs);
   }
 
-.mobius-segment-group .mobius-segment-group.gap-size-s,
-  .mobius-segment-group.gap-size-s{
+.mobius-segment-group .mobius-segment-group.gap-size-s,.mobius-segment-group.gap-size-s{
     margin:var(--size-sm);
   }
 
-.mobius-segment-group .mobius-segment-group.gap-size-m,
-  .mobius-segment-group.gap-size-m{
+.mobius-segment-group .mobius-segment-group.gap-size-m,.mobius-segment-group.gap-size-m{
     margin:var(--size-md);
   }
 
-.mobius-segment-group .mobius-segment-group.gap-size-l,
-  .mobius-segment-group.gap-size-l{
+.mobius-segment-group .mobius-segment-group.gap-size-l,.mobius-segment-group.gap-size-l{
     margin:var(--size-lm);
   }
 
-.mobius-segment-group .mobius-segment-group.gap-size-xl,
-  .mobius-segment-group.gap-size-xl{
+.mobius-segment-group .mobius-segment-group.gap-size-xl,.mobius-segment-group.gap-size-xl{
     margin:var(--size-xl);
   }
 
-.mobius-segment-group .mobius-segment-group.gap-size-xxl,
-  .mobius-segment-group.gap-size-xxl{
+.mobius-segment-group .mobius-segment-group.gap-size-xxl,.mobius-segment-group.gap-size-xxl{
     margin:var(--size-xxl);
   }
 
@@ -1515,30 +1539,28 @@ a.mobius-button:focus-visible,
     border-top:var(--segment-border);
   }
 
-.mobius-segment-group:not(.--is-horizontal) > .mobius-segment:first-child{
+:is(.mobius-segment-group:not(.--is-horizontal) > .mobius-segment):first-child{
         border-top:none;
         border-radius:var(--radius-2);
       }
 
-.mobius-segment-group:not(.--is-horizontal) > .mobius-segment:not(:first-child):not(:last-child){
+:is(.mobius-segment-group:not(.--is-horizontal) > .mobius-segment):not(:first-child):not(:last-child){
         border-radius:0;
         border-bottom:0;
       }
 
-.mobius-segment-group:not(.--is-horizontal) > .mobius-segment:last-child{
+:is(.mobius-segment-group:not(.--is-horizontal) > .mobius-segment):last-child{
         border-top-left-radius:0;
         border-top-right-radius:0;
       }
 
-.mobius-segment-group.--is-horizontal > .mobius-segment,
-    .mobius-segment-group.--is-horizontal > .mobius-segment-group{
+.mobius-segment-group.--is-horizontal > .mobius-segment,.mobius-segment-group.--is-horizontal > .mobius-segment-group{
       border:none;
       border-radius:0;
       border-left:var(--segment-border);
     }
 
-.mobius-segment-group.--is-horizontal > .mobius-segment:first-child,
-    .mobius-segment-group.--is-horizontal > .mobius-segment-group:first-child{
+.mobius-segment-group.--is-horizontal > .mobius-segment:first-child,.mobius-segment-group.--is-horizontal > .mobius-segment-group:first-child{
       border-left:0;
       border-top-right-radius:0;
       border-bottom-right-radius:0;
@@ -1561,16 +1583,14 @@ a.mobius-button:focus-visible,
     flex:1;
   }
 
-.mobius-segment-group .mobius-segment-group > .mobius-segment-group.--is-horizontal{
+:is(.mobius-segment-group .mobius-segment-group) > .mobius-segment-group.--is-horizontal{
       border-radius:0;
       border:0;
       border-top:var(--segment-border);
       margin:0;
     }
 
-.mobius-segment-group .mobius-segment-group:not(.--is-horizontal)
-      > .mobius-segment-group:not(.--is-horizontal)
-      .mobius-segment:first-child{
+:is(.mobius-segment-group .mobius-segment-group):not(.--is-horizontal) > .mobius-segment-group:not(.--is-horizontal) .mobius-segment:first-child{
       border-top:var(--segment-border);
     }
 
@@ -1585,19 +1605,11 @@ a.mobius-button:focus-visible,
   padding:var(--size-sm);
 }
 
-.mobius-segment .mobius-text,
-  .mobius-segment .mobius-text.--is-h1,
-  .mobius-segment .mobius-text.--is-h2,
-  .mobius-segment .mobius-text.--is-h3,
-  .mobius-segment .mobius-text.--is-h4{
+.mobius-segment .mobius-text,.mobius-segment .mobius-text.--is-h1,.mobius-segment .mobius-text.--is-h2,.mobius-segment .mobius-text.--is-h3,.mobius-segment .mobius-text.--is-h4{
     margin:0;
   }
 
-.mobius-segment h1,
-  .mobius-segment h2,
-  .mobius-segment h3,
-  .mobius-segment h4,
-  .mobius-segment p{
+.mobius-segment h1,.mobius-segment h2,.mobius-segment h3,.mobius-segment h4,.mobius-segment p{
     margin:0;
   }
 
@@ -1606,7 +1618,7 @@ a.mobius-button:focus-visible,
   }
 
 .mobius-segment.subtle{
-    background-color:var(--color-background-highlight);
+    background-color:var(--color-border-light);
   }
 
 .mobius-segment.grey{
@@ -1625,11 +1637,7 @@ a.mobius-button:focus-visible,
     color:var(--color-text-inverted);
   }
 
-.mobius-segment .mobius-text-field:last-child,
-  .mobius-segment .mobius-checkbox:last-child,
-  .mobius-segment .mobius-radio-group:last-child,
-  .mobius-segment .mobius-text-area:last-child,
-  .mobius-segment .mobius-select__outer:last-child{
+.mobius-segment .mobius-text-field:last-child,.mobius-segment .mobius-checkbox:last-child,.mobius-segment .mobius-radio-group:last-child,.mobius-segment .mobius-text-area:last-child,.mobius-segment .mobius-select__outer:last-child{
     margin-bottom:0 !important;
   }
 
@@ -1655,7 +1663,7 @@ a.mobius-button:focus-visible,
   width:100%;
 }
 
-.mobius-select__outer > :where(.mobius-label.--is-optional)::after{
+.mobius-select__outer  > :where(.mobius-label.--is-optional)::after{
     content:" (optional)";
   }
 
@@ -1956,6 +1964,7 @@ a.mobius-button:focus-visible,
     font-size:var(--font-size-regular);
     font-weight:var(--font-weight-normal);
     line-height:var(--line-height-normal);
+    text-wrap:pretty;
   }
 
 .mobius-text:where(.--is-h1){
@@ -1965,6 +1974,7 @@ a.mobius-button:focus-visible,
     font-weight:var(--font-weight-bold);
     line-height:1.25;
     margin:0.35em 0;
+    text-wrap:balance;
   }
 
 .mobius-text:where(.--is-h2){
@@ -1974,6 +1984,7 @@ a.mobius-button:focus-visible,
     font-weight:var(--font-weight-bold);
     line-height:var(--line-height-tight);
     margin:0.45em 0;
+    text-wrap:balance;
   }
 
 .mobius-text:where(.--is-h3){
@@ -1983,6 +1994,7 @@ a.mobius-button:focus-visible,
     font-weight:var(--font-weight-bold);
     line-height:1.2;
     margin:0.5em 0;
+    text-wrap:balance;
   }
 
 .mobius-text:where(.--is-h4){
@@ -1992,6 +2004,7 @@ a.mobius-button:focus-visible,
     font-weight:var(--font-weight-bold);
     line-height:var(--line-height-normal);
     margin:0.55em 0;
+    text-wrap:balance;
   }
 
 .mobius-text:where(.--is-span){
@@ -2103,7 +2116,7 @@ a.mobius-button:focus-visible,
   align-items:stretch;
 }
 
-.mobius-text-field__prefix-outside.mobius-text, .mobius-text-field__suffix-outside.mobius-text{
+.mobius-text:is(.mobius-text-field__prefix-outside,.mobius-text-field__suffix-outside){
     margin-top:0;
     margin-bottom:0;
     align-self:center;
@@ -2114,7 +2127,7 @@ a.mobius-button:focus-visible,
     border-bottom-right-radius:0;
   }
 
-.mobius-text-field__prefix-outside.mobius-button + .mobius-text-field__input-wrapper{
+.mobius-text-field__prefix-outside.mobius-button  + .mobius-text-field__input-wrapper{
       border-top-left-radius:0;
       border-bottom-left-radius:0;
     }
@@ -2138,13 +2151,13 @@ a.mobius-button:focus-visible,
   color:var(--color-primary-light);
 }
 
-.mobius-text-field__prefix-inside.mobius-button, .mobius-text-field__suffix-inside.mobius-button{
+.mobius-button:is(.mobius-text-field__prefix-inside,.mobius-text-field__suffix-inside){
     min-height:100%;
     border-radius:0;
     align-self:stretch;
   }
 
-.mobius-text-field__prefix-inside.mobius-text, .mobius-text-field__suffix-inside.mobius-text{
+.mobius-text:is(.mobius-text-field__prefix-inside,.mobius-text-field__suffix-inside){
     margin-top:0;
     margin-bottom:0;
   }
@@ -2171,7 +2184,7 @@ a.mobius-button:focus-visible,
     border:var(--border-default);
   }
 
-.mobius-text-field__input-wrapper:has(+ .mobius-button){
+.mobius-text-field__input-wrapper:has( + .mobius-button){
     border-top-right-radius:0;
     border-bottom-right-radius:0;
   }
@@ -2182,8 +2195,7 @@ a.mobius-button:focus-visible,
     box-shadow:var(--box-shadow-default);
   }
 
-.mobius-text-field__input-wrapper:focus-within .mobius-text-field__prefix-inside,
-    .mobius-text-field__input-wrapper:focus-within .mobius-text-field__suffix-inside{
+.mobius-text-field__input-wrapper:focus-within .mobius-text-field__prefix-inside,.mobius-text-field__input-wrapper:focus-within .mobius-text-field__suffix-inside{
       color:var(--color-primary);
     }
 
@@ -2192,8 +2204,7 @@ a.mobius-button:focus-visible,
     background-color:var(--color-background-input-active);
   }
 
-.mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__prefix-inside,
-    .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__suffix-inside{
+.mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__prefix-inside,.mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__suffix-inside{
       color:var(--color-primary);
     }
 
@@ -2794,7 +2805,7 @@ svg:not(:host).svg-inline--mobius-icon{
   --box-shadow-default:0 0 0 var(--size-focus-ring) var(--color-focus);
   --popover-max-width:260px;
   --popover-z-index:2147483647;
-  --color-background-popover:var(--color-neutral-700);
+  --color-background-popover:var(--color-azure-700);
   --color-text-popover:#fff;
 }
 
@@ -2802,9 +2813,7 @@ svg:not(:host).svg-inline--mobius-icon{
   font-family:var(--font-family);
 }
 
-.mobius *,
-  .mobius *::before,
-  .mobius *::after{
+.mobius *,.mobius *::before,.mobius *::after{
     box-sizing:border-box;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-core",
-  "version": "7.1.1",
+  "version": "7.1.3",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,21 +26,21 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^5.1.1"
+    "@simplybusiness/mobius": "^5.2.0"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.40",
-    "postcss-discard-comments": "^7.0.2",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss": "^8.4.47",
+    "postcss-discard-comments": "^7.0.3",
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
     "postcss-nested": "^6.2.0",
-    "postcss-preset-env": "^9.6.0",
+    "postcss-preset-env": "^10.0.5",
     "postcss-url": "^10.1.3",
     "resolve-url-loader": "^5.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   }

package/src/index.css

@@ -1,37 +1,37 @@
-@import "../../mobius/src/components/Accordion/Accordion.css";
-@import "../../mobius/src/components/Alert/Alert.css";
-@import "../../mobius/src/components/Box/Box.css";
-@import "../../mobius/src/components/Breadcrumbs/Breadcrumbs.css";
-@import "../../mobius/src/components/Button/Button.css";
-@import "../../mobius/src/components/Checkbox/Checkbox.css";
-@import "../../mobius/src/components/Checkbox/CheckboxGroup.css";
-@import "../../mobius/src/components/Container/Container.css";
-@import "../../mobius/src/components/Divider/Divider.css";
-@import "../../mobius/src/components/Drawer/Drawer.css";
-@import "../../mobius/src/components/DropdownMenu/DropdownMenu.css";
-@import "../../mobius/src/components/ErrorMessage/ErrorMessage.css";
-@import "../../mobius/src/components/Fieldset/Fieldset.css";
-@import "../../mobius/src/components/Flex/Flex.css";
-@import "../../mobius/src/components/Icon/Icon.css";
-@import "../../mobius/src/components/Label/Label.css";
-@import "../../mobius/src/components/Link/Link.css";
-@import "../../mobius/src/components/List/List.css";
-@import "../../mobius/src/components/LoadingIndicator/LoadingIndicator.css";
-@import "../../mobius/src/components/Modal/Modal.css";
-@import "../../mobius/src/components/NumberField/NumberField.css";
-@import "../../mobius/src/components/PasswordField/PasswordField.css";
-@import "../../mobius/src/components/Popover/Popover.css";
-@import "../../mobius/src/components/Progress/Progress.css";
-@import "../../mobius/src/components/Radio/Radio.css";
-@import "../../mobius/src/components/Segment/Segment.css";
-@import "../../mobius/src/components/Select/Select.css";
-@import "../../mobius/src/components/Slider/Slider.css";
-@import "../../mobius/src/components/Stack/Stack.css";
-@import "../../mobius/src/components/Table/Table.css";
-@import "../../mobius/src/components/Text/Text.css";
-@import "../../mobius/src/components/TextArea/TextArea.css";
-@import "../../mobius/src/components/TextField/TextField.css";
-@import "../../mobius/src/components/Title/Title.css";
+@import "@simplybusiness/mobius/src/components/Accordion/Accordion.css";
+@import "@simplybusiness/mobius/src/components/Alert/Alert.css";
+@import "@simplybusiness/mobius/src/components/Box/Box.css";
+@import "@simplybusiness/mobius/src/components/Breadcrumbs/Breadcrumbs.css";
+@import "@simplybusiness/mobius/src/components/Button/Button.css";
+@import "@simplybusiness/mobius/src/components/Checkbox/Checkbox.css";
+@import "@simplybusiness/mobius/src/components/Checkbox/CheckboxGroup.css";
+@import "@simplybusiness/mobius/src/components/Container/Container.css";
+@import "@simplybusiness/mobius/src/components/Divider/Divider.css";
+@import "@simplybusiness/mobius/src/components/Drawer/Drawer.css";
+@import "@simplybusiness/mobius/src/components/DropdownMenu/DropdownMenu.css";
+@import "@simplybusiness/mobius/src/components/ErrorMessage/ErrorMessage.css";
+@import "@simplybusiness/mobius/src/components/Fieldset/Fieldset.css";
+@import "@simplybusiness/mobius/src/components/Flex/Flex.css";
+@import "@simplybusiness/mobius/src/components/Icon/Icon.css";
+@import "@simplybusiness/mobius/src/components/Label/Label.css";
+@import "@simplybusiness/mobius/src/components/Link/Link.css";
+@import "@simplybusiness/mobius/src/components/List/List.css";
+@import "@simplybusiness/mobius/src/components/LoadingIndicator/LoadingIndicator.css";
+@import "@simplybusiness/mobius/src/components/Modal/Modal.css";
+@import "@simplybusiness/mobius/src/components/NumberField/NumberField.css";
+@import "@simplybusiness/mobius/src/components/PasswordField/PasswordField.css";
+@import "@simplybusiness/mobius/src/components/Popover/Popover.css";
+@import "@simplybusiness/mobius/src/components/Progress/Progress.css";
+@import "@simplybusiness/mobius/src/components/Radio/Radio.css";
+@import "@simplybusiness/mobius/src/components/Segment/Segment.css";
+@import "@simplybusiness/mobius/src/components/Select/Select.css";
+@import "@simplybusiness/mobius/src/components/Slider/Slider.css";
+@import "@simplybusiness/mobius/src/components/Stack/Stack.css";
+@import "@simplybusiness/mobius/src/components/Table/Table.css";
+@import "@simplybusiness/mobius/src/components/Text/Text.css";
+@import "@simplybusiness/mobius/src/components/TextArea/TextArea.css";
+@import "@simplybusiness/mobius/src/components/TextField/TextField.css";
+@import "@simplybusiness/mobius/src/components/Title/Title.css";
 
 @import "./icons.css"; /* Placing this at the top affects specificity */
 

package/src/variables.css

@@ -138,6 +138,6 @@
   /* Popover */
   --popover-max-width: 260px;
   --popover-z-index: 2147483647;
-  --color-background-popover: var(--color-neutral-700);
+  --color-background-popover: var(--color-azure-700);
   --color-text-popover: #fff;
 }