@lightspeed/design-system-css 1.2.0 → 2.0.0

package/README.md

@@ -1,4 +1,4 @@
-# Lightspeed Design System in CSS
+# Helios CSS
 
 [![npm version](https://img.shields.io/npm/v/@lightspeed/design-system-css.svg?style=flat)](https://www.npmjs.com/package/@lightspeed/design-system-css)
 
@@ -9,7 +9,7 @@ CSS component library for building Lightspeed products.
 To use these components, you would typically add the following to your package's root `index.tsx`:
 
 ```ts
-import '@lightspeed/design-system-css'
+import '@lightspeed/design-system-css';
 ```
 
 You have access to both the `.css` dist files and the `.scss` src files. The design system CSS files are broken down per component, so you can just use what you need (i.e. `DatePicker.css`).
@@ -28,43 +28,6 @@ importing:
 - `build` - Build the dist `.css` files
 - `build:themes` - Converts the JS themes to SCSS maps
 
-## Publishing
-
-This package is published publicly on NPM under the `@lightspeed` organization. We use the [changesets](https://github.com/atlassian/changesets/blob/main/docs/detailed-explanation.md)'s workflow to release new versions.
-
-### 1. Add a changeset
-
-1. Run the command line script `yarn changeset`
-2. Select an appropriate bump type for the changes made
-3. Your final prompt will be to provide a message to go alongside the changeset. This will be written into the changelog when the next release occurs.
-
-After this, a new changeset will be added which is a markdown file with YAML front matter.
-
-```
--| .changeset/
--|-| UNIQUE_ID.md
-```
-
-The message you typed can be found in the markdown file. If you want to expand on it, you can write as much markdown as you want, which will all be added to the changelog on publish. If you want to add more packages or change the bump types of any packages, that's also fine.
-
-While not every changeset is going to need a huge amount of detail, a good idea of what should be in a changeset is:
-
-- WHAT the change is
-- WHY the change was made
-- HOW a consumer should update their code
-
-4. Once you are happy with the changeset, commit the file to your branch.
-
-### 2. Merge your PR, and review the automated release PR
-
-After merging your PR with changesets, a Github workflow will create a PR that will turn the changesets into the changelog and bump the version.
-
-Review this PR and wait for checks to pass, you can then merge it.
-
-### 3. You are done!
-
-After merging the automated release PR, the same Github workflow will create a Github release based on your changesets and publish the package on NPM.
-
 ## License
 
 Source code is under a [custom license](./LICENSE.md) based on MIT.

package/dist/index.css

@@ -32,13 +32,13 @@
     --vd-colour--keyline: #37353A;
     --vd-colour--framing-inverse: #E7E5E8;
     --vd-colour--keyline-inverse: #C9C7CA;
-    --vd-colour--golden-sand: #E6B03D;
-    --vd-colour--tacao: #ED6B44;
-    --vd-colour--new-york-pink: #DE3CEC;
-    --vd-colour--gothic: #A02FB6;
-    --vd-colour--lavender-purple: #501897;
-    --vd-colour--sinbad: #6952F6;
-    --vd-colour--shuttle-gray: #5D5D5D;
+    --vd-colour--solar: #E6B03D;
+    --vd-colour--mars: #ED6B44;
+    --vd-colour--farout-pink: #DE3CEC;
+    --vd-colour--galaxy: #A02FB6;
+    --vd-colour--deep-purple: #501897;
+    --vd-colour--neptune: #6952F6;
+    --vd-colour--shuttle-grey: #5D5D5D;
     --vd-colour--nav-top: #0B0B0B;
     --vd-colour--nav-top-rgb: 11, 11, 11;
     --vd-colour--nav-side-tabs: #27252A;
@@ -93,13 +93,13 @@
   --vd-colour--keyline: #C9C7CA;
   --vd-colour--framing-inverse: #27252A;
   --vd-colour--keyline-inverse: #37353A;
-  --vd-colour--golden-sand: #E6B03D;
-  --vd-colour--tacao: #ED6B44;
-  --vd-colour--new-york-pink: #DE3CEC;
-  --vd-colour--gothic: #A02FB6;
-  --vd-colour--lavender-purple: #501897;
-  --vd-colour--sinbad: #6952F6;
-  --vd-colour--shuttle-gray: #5D5D5D;
+  --vd-colour--solar: #E6B03D;
+  --vd-colour--mars: #ED6B44;
+  --vd-colour--farout-pink: #DE3CEC;
+  --vd-colour--galaxy: #A02FB6;
+  --vd-colour--deep-purple: #501897;
+  --vd-colour--neptune: #6952F6;
+  --vd-colour--shuttle-grey: #5D5D5D;
   --vd-colour--nav-top: #0B0B0B;
   --vd-colour--nav-top-rgb: 11, 11, 11;
   --vd-colour--nav-side-tabs: #E7E5E8;
@@ -153,13 +153,13 @@
   --vd-colour--keyline: #37353A;
   --vd-colour--framing-inverse: #E7E5E8;
   --vd-colour--keyline-inverse: #C9C7CA;
-  --vd-colour--golden-sand: #E6B03D;
-  --vd-colour--tacao: #ED6B44;
-  --vd-colour--new-york-pink: #DE3CEC;
-  --vd-colour--gothic: #A02FB6;
-  --vd-colour--lavender-purple: #501897;
-  --vd-colour--sinbad: #6952F6;
-  --vd-colour--shuttle-gray: #5D5D5D;
+  --vd-colour--solar: #E6B03D;
+  --vd-colour--mars: #ED6B44;
+  --vd-colour--farout-pink: #DE3CEC;
+  --vd-colour--galaxy: #A02FB6;
+  --vd-colour--deep-purple: #501897;
+  --vd-colour--neptune: #6952F6;
+  --vd-colour--shuttle-grey: #5D5D5D;
   --vd-colour--nav-top: #0B0B0B;
   --vd-colour--nav-top-rgb: 11, 11, 11;
   --vd-colour--nav-side-tabs: #27252A;
@@ -198,7 +198,14 @@ a:link {
   text-decoration: none;
 }
 
-a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
+a,
+button,
+input,
+textarea,
+select,
+details,
+[ng-click],
+.vd-fast-tap {
   touch-action: manipulation;
 }
 
@@ -1234,7 +1241,8 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   display: flex;
   align-items: center;
 }
-.vd-select-group > .vd-select, .vd-select-group .vd-select-container {
+.vd-select-group > .vd-select,
+.vd-select-group .vd-select-container {
   width: auto;
 }
 .vd-select-group .vd-input {
@@ -1242,13 +1250,16 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   margin-right: 0;
   flex: 1;
 }
-.vd-select-group .vd-input, .vd-select-group .vd-select {
+.vd-select-group .vd-input,
+.vd-select-group .vd-select {
   position: relative;
 }
-.vd-select-group .vd-input:focus, .vd-select-group .vd-select:focus {
+.vd-select-group .vd-input:focus,
+.vd-select-group .vd-select:focus {
   z-index: 103;
 }
-.vd-select-group .vd-input:not(:first-child), .vd-select-group .vd-select:not(:first-child) {
+.vd-select-group .vd-input:not(:first-child),
+.vd-select-group .vd-select:not(:first-child) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -2px;
@@ -1260,12 +1271,15 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.vd-select-group .vd-input:not(:last-child), .vd-select-group .vd-select:not(:last-child),
+.vd-select-group .vd-input:not(:last-child),
+.vd-select-group .vd-select:not(:last-child),
 .vd-select-group .vd-select-container:not(:last-child) .vd-select {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.vd-select-group .vd-input.vd-error, .vd-select-group .vd-select.vd-error, .vd-select-group .vd-select-container:not(:last-child).vd-error {
+.vd-select-group .vd-input.vd-error,
+.vd-select-group .vd-select.vd-error,
+.vd-select-group .vd-select-container:not(:last-child).vd-error {
   z-index: 102;
 }
 
@@ -1640,25 +1654,25 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   font-weight: 700;
 }
 .vd-avatar--initials.vd-avatar--initials-1 {
-  background-color: var(--vd-colour--new-york-pink);
+  background-color: var(--vd-colour--farout-pink);
 }
 .vd-avatar--initials.vd-avatar--initials-2 {
-  background-color: var(--vd-colour--tacao);
+  background-color: var(--vd-colour--mars);
 }
 .vd-avatar--initials.vd-avatar--initials-3 {
-  background-color: var(--vd-colour--golden-sand);
+  background-color: var(--vd-colour--solar);
 }
 .vd-avatar--initials.vd-avatar--initials-4 {
-  background-color: var(--vd-colour--gothic);
+  background-color: var(--vd-colour--galaxy);
 }
 .vd-avatar--initials.vd-avatar--initials-5 {
-  background-color: var(--vd-colour--sinbad);
+  background-color: var(--vd-colour--neptune);
 }
 .vd-avatar--initials.vd-avatar--initials-6 {
-  background-color: var(--vd-colour--lavender-purple);
+  background-color: var(--vd-colour--deep-purple);
 }
 .vd-avatar--initials.vd-avatar--initials-7 {
-  background-color: var(--vd-colour--shuttle-gray);
+  background-color: var(--vd-colour--shuttle-grey);
 }
 
 .vd-avatar-multi {
@@ -2261,7 +2275,8 @@ a.vd-btn.disabled {
 /* When buttons are disabled they don't trigger onMouseOver / onMouseOut events but the event will bubble
   up from child elements. `vd-btn-hover-assist` occupies all of the space within the button so mouse events are
   consistently triggered. */
-.vd-btn:disabled:hover > .vd-btn-hover-assist, .vd-tab-button:disabled:hover > .vd-btn-hover-assist {
+.vd-btn:disabled:hover > .vd-btn-hover-assist,
+.vd-tab-button:disabled:hover > .vd-btn-hover-assist {
   position: absolute;
   top: 0;
   right: 0;
@@ -2274,9 +2289,6 @@ a.vd-btn.disabled {
   background-color: var(--vd-colour--box);
   border-radius: 5px;
 }
-.vd-card + .vd-card {
-  margin-left: 5px;
-}
 .vd-card.vd-card--active {
   position: relative;
 }
@@ -2674,7 +2686,15 @@ vd-carousel-frame {
   color: var(--vd-colour--text);
   font-size: 15px;
 }
-.vd-datepicker table, .vd-datepicker caption, .vd-datepicker tbody, .vd-datepicker tfoot, .vd-datepicker thead, .vd-datepicker tr, .vd-datepicker th, .vd-datepicker td, .vd-datepicker abbr,
+.vd-datepicker table,
+.vd-datepicker caption,
+.vd-datepicker tbody,
+.vd-datepicker tfoot,
+.vd-datepicker thead,
+.vd-datepicker tr,
+.vd-datepicker th,
+.vd-datepicker td,
+.vd-datepicker abbr,
 .vd-datepicker-range table,
 .vd-datepicker-range caption,
 .vd-datepicker-range tbody,
@@ -3001,10 +3021,12 @@ vd-carousel-frame {
   border: none;
 }
 
-.vd-datepicker-range-no-end .is-startrange .pika-button, .vd-datepicker-range-no-end .is-endrange .pika-button {
+.vd-datepicker-range-no-end .is-startrange .pika-button,
+.vd-datepicker-range-no-end .is-endrange .pika-button {
   border: none;
 }
-.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button, .vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
+.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button,
+.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
   background: var(--vd-colour--do-highlight);
   color: var(--vd-colour--text);
   font-weight: normal;
@@ -3346,7 +3368,8 @@ vd-carousel-frame {
   }
 }
 
-vd-dott, .vd-dott {
+vd-dott,
+.vd-dott {
   display: inline-block;
   width: 32px;
   height: 32px;
@@ -4891,42 +4914,55 @@ vd-dott, .vd-dott {
     --vd-section-padding-v: 16px;
   }
 }
-vd-section, .vd-section {
+vd-section,
+.vd-section {
   display: block;
   position: relative;
   font-size: 15px;
   padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
 }
-vd-section .vd-section-wrap, .vd-section .vd-section-wrap {
+vd-section .vd-section-wrap,
+.vd-section .vd-section-wrap {
   display: block;
   margin: 0 auto;
   max-width: 1100px;
 }
-vd-section .vd-section-container, .vd-section .vd-section-container {
+vd-section .vd-section-container,
+.vd-section .vd-section-container {
   margin: calc(var(--vd-section-padding-v) * -1) calc(var(--vd-section-padding-h) * -1);
   padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
 }
-vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-section .vd-section {
+vd-section vd-section,
+vd-section .vd-section,
+.vd-section vd-section,
+.vd-section .vd-section {
   padding: var(--vd-section-padding-v) 0;
 }
 @supports not (--a: 0) {
-  vd-section, .vd-section {
+  vd-section,
+.vd-section {
     padding: 24px 48px;
   }
-  vd-section .vd-section-container, .vd-section .vd-section-container {
+  vd-section .vd-section-container,
+.vd-section .vd-section-container {
     margin: -24px -48px;
     padding: 24px 48px;
   }
-  vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-section .vd-section {
+  vd-section vd-section,
+vd-section .vd-section,
+.vd-section vd-section,
+.vd-section .vd-section {
     padding: 24px 0;
   }
 }
 
-.vd-section--secondary, .vd-section--secondary .vd-section-container {
+.vd-section--secondary,
+.vd-section--secondary .vd-section-container {
   background-color: var(--vd-colour--framing);
 }
 
-.vd-section--tertiary, .vd-section--tertiary .vd-section-container {
+.vd-section--tertiary,
+.vd-section--tertiary .vd-section-container {
   background-color: var(--vd-colour--box);
 }
 
@@ -4966,7 +5002,8 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   opacity: 0;
 }
 
-.vd-section--action-bar, .vd-section--action-bar .vd-section-container {
+.vd-section--action-bar,
+.vd-section--action-bar .vd-section-container {
   background-color: var(--vd-colour--framing);
 }
 .vd-section--action-bar .vd-section-wrap {
@@ -5354,7 +5391,9 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   font-size: 12px;
   font-weight: 700;
 }
-.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider,
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander,
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
   display: none;
 }
 .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer {
@@ -5382,7 +5421,8 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
 .vd-sidebar.vd-sidebar--new .vd-sidebar-tabs .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
   display: none;
 }
-.vd-sidebar.vd-sidebar--new .vd-sidebar-expander, .vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
+.vd-sidebar.vd-sidebar--new .vd-sidebar-expander,
+.vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
   display: block !important;
 }
 
@@ -5796,46 +5836,66 @@ table {
 .vd-table td {
   vertical-align: middle;
 }
-.vd-table td, .vd-table th {
+.vd-table td,
+.vd-table th {
   padding: 20px 40px;
   position: relative;
   white-space: normal;
   word-break: break-word;
 }
-.vd-table td.vd-tight, .vd-table th.vd-tight {
+.vd-table td.vd-tight,
+.vd-table th.vd-tight {
   white-space: nowrap;
   width: 1%;
 }
-.vd-table td.vd-truncate, .vd-table td.vd-truncate *, .vd-table th.vd-truncate, .vd-table th.vd-truncate * {
+.vd-table td.vd-truncate,
+.vd-table td.vd-truncate *,
+.vd-table th.vd-truncate,
+.vd-table th.vd-truncate * {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
-.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l, .vd-table th.vd-sml-pad-h, .vd-table th.vd-sml-pad-l {
+.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l,
+.vd-table th.vd-sml-pad-h,
+.vd-table th.vd-sml-pad-l {
   padding-left: 8px;
 }
-.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r, .vd-table th.vd-sml-pad-h, .vd-table th.vd-sml-pad-r {
+.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r,
+.vd-table th.vd-sml-pad-h,
+.vd-table th.vd-sml-pad-r {
   padding-right: 8px;
 }
-.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l, .vd-table th.vd-no-pad-h, .vd-table th.vd-no-pad-l {
+.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l,
+.vd-table th.vd-no-pad-h,
+.vd-table th.vd-no-pad-l {
   padding-left: 0;
 }
-.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r, .vd-table th.vd-no-pad-h, .vd-table th.vd-no-pad-r {
+.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r,
+.vd-table th.vd-no-pad-h,
+.vd-table th.vd-no-pad-r {
   padding-right: 0;
 }
-.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b, .vd-table th.vd-no-pad-v, .vd-table th.vd-no-pad-b {
+.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b,
+.vd-table th.vd-no-pad-v,
+.vd-table th.vd-no-pad-b {
   padding-bottom: 0;
 }
-.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t, .vd-table th.vd-no-pad-v, .vd-table th.vd-no-pad-t {
+.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t,
+.vd-table th.vd-no-pad-v,
+.vd-table th.vd-no-pad-t {
   padding-top: 0;
 }
-.vd-table td.vd-valign-t, .vd-table th.vd-valign-t {
+.vd-table td.vd-valign-t,
+.vd-table th.vd-valign-t {
   vertical-align: top;
 }
-.vd-table td.vd-valign-m, .vd-table th.vd-valign-m {
+.vd-table td.vd-valign-m,
+.vd-table th.vd-valign-m {
   vertical-align: middle;
 }
-.vd-table td.vd-valign-b, .vd-table th.vd-valign-b {
+.vd-table td.vd-valign-b,
+.vd-table th.vd-valign-b {
   vertical-align: bottom;
 }
 .vd-table.vd-table--data {
@@ -7329,21 +7389,21 @@ td.vd-hide-print {
 }
 .vd-bar-chart-container .y.axis text {
   font-size: 14px;
-  fill: #76A27B;
+  fill: #76a27b;
 }
 .vd-bar-chart-container .bar {
-  fill: #009D12;
+  fill: #009d12;
   opacity: 0.15;
 }
 .vd-bar-chart-container .top {
-  fill: #009D12;
+  fill: #009d12;
 }
 .vd-bar-chart-container .bar-label {
   font-size: 13px;
   fill: #959595;
 }
 .vd-bar-chart-container .bar-chart-background {
-  fill: #F2F2F2;
+  fill: #f2f2f2;
 }
 
 .vd-currency-input-container {
@@ -7678,10 +7738,14 @@ td.vd-hide-print {
 
 /* stylelint-disable vend/use-colour-function */
 /* stylelint-enable vend/use-colour-function */
-.vd-line-graph-container .vd-grid.vd-y .domain, .vd-line-graph-container .vd-axis.vd-y .domain, .vd-line-graph-container .vd-axis.vd-x .domain {
+.vd-line-graph-container .vd-grid.vd-y .domain,
+.vd-line-graph-container .vd-axis.vd-y .domain,
+.vd-line-graph-container .vd-axis.vd-x .domain {
   display: none;
 }
-.vd-line-graph-container .vd-grid.vd-y .tick line, .vd-line-graph-container .vd-axis.vd-y .tick line, .vd-line-graph-container .vd-axis.vd-x .tick line {
+.vd-line-graph-container .vd-grid.vd-y .tick line,
+.vd-line-graph-container .vd-axis.vd-y .tick line,
+.vd-line-graph-container .vd-axis.vd-x .tick line {
   stroke: var(--vd-colour--framing);
   stroke-width: 1px;
   fill: transparent;
@@ -7704,10 +7768,10 @@ td.vd-hide-print {
 .vd-line-graph-container .vd-line-with-fill {
   fill: transparent;
   stroke-width: 2px;
-  stroke: #009D12;
+  stroke: #009d12;
 }
 .vd-line-graph-container .vd-line-fill {
-  fill: #009D12;
+  fill: #009d12;
   opacity: 0.1;
   stroke-width: 0;
 }
@@ -7717,7 +7781,7 @@ td.vd-hide-print {
   stroke-width: 2px;
 }
 .vd-line-graph-container .vd-plot-point-with-fill {
-  fill: #009D12;
+  fill: #009d12;
   stroke: #fff;
 }
 .vd-line-graph-container .vd-plot-point-hidden {
@@ -7851,14 +7915,20 @@ td.vd-hide-print {
 .vd-modal-inner-container > .vd-g-row {
   width: 100%;
 }
-.vd-modal-inner-container .vd-breadcrumb, .vd-modal-inner-container .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content, .vd-modal-inner-container .vd-dialog-actions {
+.vd-modal-inner-container .vd-breadcrumb,
+.vd-modal-inner-container .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content,
+.vd-modal-inner-container .vd-dialog-actions {
   margin-left: var(--vd-dialog-spacing);
   margin-right: var(--vd-dialog-spacing);
 }
-.vd-modal-inner-container .vd-breadcrumb:first-child, .vd-modal-inner-container .vd-dialog-header:first-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:first-child, .vd-modal-inner-container .vd-dialog-actions:first-child {
+.vd-modal-inner-container .vd-breadcrumb:first-child,
+.vd-modal-inner-container .vd-dialog-header:first-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:first-child,
+.vd-modal-inner-container .vd-dialog-actions:first-child {
   margin-top: var(--vd-dialog-spacing);
 }
-.vd-modal-inner-container .vd-breadcrumb:last-child, .vd-modal-inner-container .vd-dialog-header:last-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:last-child, .vd-modal-inner-container .vd-dialog-actions:last-child {
+.vd-modal-inner-container .vd-breadcrumb:last-child,
+.vd-modal-inner-container .vd-dialog-header:last-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:last-child,
+.vd-modal-inner-container .vd-dialog-actions:last-child {
   margin-bottom: var(--vd-dialog-spacing);
 }
 .vd-modal-inner-container .vd-breadcrumb + .vd-dialog-header, .vd-modal-inner-container .vd-breadcrumb + .vd-modal-content, .vd-modal-inner-container .vd-breadcrumb + .vd-dialog-actions {
@@ -7992,7 +8062,8 @@ td.vd-hide-print {
   padding-right: 0;
   padding-left: 6px;
 }
-.vd-table-list-cell--toggle + .vd-table-list-cell, .vd-table-list-cell--toggle + .vd-table-list-head-cell {
+.vd-table-list-cell--toggle + .vd-table-list-cell,
+.vd-table-list-cell--toggle + .vd-table-list-head-cell {
   padding-left: 0;
 }
 .vd-table-list-cell--toggle .vd-table-list-toggle-icon {