@elliemae/ds-basic 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/form/InputMask/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/InputMask";
-import { default as default2 } from "@elliemae/ds-form/InputMask";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/InputMask';
+export { default } from '@elliemae/ds-form/InputMask';

package/esm/form/InputProtected/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/InputProtected";
-import { default as default2 } from "@elliemae/ds-form/InputProtected";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/InputProtected';
+export { default } from '@elliemae/ds-form/InputProtected';

package/esm/form/LargeInputText/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/LargeInputText";
-import { default as default2 } from "@elliemae/ds-form/LargeInputText";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/LargeInputText';
+export { default } from '@elliemae/ds-form/LargeInputText';

package/esm/form/Radio/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/Radio";
-import { default as default2 } from "@elliemae/ds-form/Radio";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/Radio';
+export { default } from '@elliemae/ds-form/Radio';

package/esm/form/RadioGroup/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/RadioGroup";
-import { default as default2 } from "@elliemae/ds-form/RadioGroup";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/RadioGroup';
+export { default } from '@elliemae/ds-form/RadioGroup';

package/esm/form/RequiredMark/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/RequiredMark";
-import { default as default2 } from "@elliemae/ds-form/RequiredMark";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/RequiredMark';
+export { default } from '@elliemae/ds-form/RequiredMark';

package/esm/form/SearchBox/index.js

@@ -1,18 +1,3 @@
-import * as React from "react";
-import { default as default2 } from "@elliemae/ds-form/SearchBox/SearchBoxToggle";
-import {
-  default as default3,
-  SearchBoxWithSchema
-} from "@elliemae/ds-form/SearchBox/DSSearchBox";
-import {
-  NavSearchBox,
-  DSNavSearchBoxWithSchema
-} from "@elliemae/ds-form/SearchBox/NavSearchBox";
-export {
-  NavSearchBox as DSNavSearchBox,
-  DSNavSearchBoxWithSchema,
-  default2 as SearchBoxToggle,
-  SearchBoxWithSchema,
-  default3 as default
-};
-//# sourceMappingURL=index.js.map
+export { default as SearchBoxToggle } from '@elliemae/ds-form/SearchBox/SearchBoxToggle';
+export { SearchBoxWithSchema, default } from '@elliemae/ds-form/SearchBox/DSSearchBox';
+export { NavSearchBox as DSNavSearchBox, DSNavSearchBoxWithSchema } from '@elliemae/ds-form/SearchBox/NavSearchBox';

package/esm/form/TextBox/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/TextBox";
-import { default as default2 } from "@elliemae/ds-form/TextBox";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/TextBox';
+export { default } from '@elliemae/ds-form/TextBox';

package/esm/form/TimeInput/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/TimeInput";
-import { default as default2 } from "@elliemae/ds-form/TimeInput";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/TimeInput';
+export { default } from '@elliemae/ds-form/TimeInput';

package/esm/form/Toggle/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-export * from "@elliemae/ds-form/Toggle";
-import { default as default2 } from "@elliemae/ds-form/Toggle";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form/Toggle';
+export { default } from '@elliemae/ds-form/Toggle';

package/esm/form/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "@elliemae/ds-form";
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-form';

package/esm/index.js

@@ -1,49 +1,43 @@
-import * as React from "react";
-export * from "./Accordion";
-export * from "./AppPicker";
-export * from "./Backdrop";
-export * from "./Breadcrumb";
-export * from "./Button";
-export * from "./ButtonGroup";
-export * from "./Card";
-export * from "./CircularProgressIndicator";
-export * from "./form";
-export * from "./Grid";
-export * from "./GroupBox";
-export * from "./Header";
-export * from "./Hidden";
-export * from "./Icon";
-export * from "./IndeterminateProgressIndicator";
-export * from "./LabelValue";
-export * from "./ListSectionHeader";
-export * from "./LoadingIndicator";
-export * from "./Menu";
-export * from "./Overlay";
-export * from "./PageHeader";
-export * from "./PageNumber";
-export * from "./Pills";
-export * from "./Popover";
-export * from "./Popper";
-export * from "./Portal";
-export * from "./ProgressIndicator";
-export * from "./ReadMore";
-export * from "./ResizableContainer";
-export * from "./Separator";
-export * from "./SidePanel";
-export * from "./Slider";
-export * from "./Spinner";
-export * from "./Tabs";
-export * from "./TextWrapper";
-import { DSTimePicker, DSTimePickerMenu } from "./TimePicker";
-export * from "./Toast";
-export * from "./Toolbar";
-export * from "./Tooltip";
-export * from "./TruncatedExpandableText";
-export * from "./TruncatedTooltipText";
-export * from "./ZipCodeSearch";
-export * from "./Zoom";
-export {
-  DSTimePicker,
-  DSTimePickerMenu
-};
-//# sourceMappingURL=index.js.map
+export * from '@elliemae/ds-accordion';
+export * from '@elliemae/ds-app-picker';
+export * from '@elliemae/ds-backdrop';
+export * from '@elliemae/ds-breadcrumb';
+export * from '@elliemae/ds-button';
+export * from '@elliemae/ds-button-group';
+export * from '@elliemae/ds-card';
+export * from '@elliemae/ds-circular-progress-indicator';
+export * from '@elliemae/ds-form';
+export * from '@elliemae/ds-grid';
+export * from '@elliemae/ds-group-box';
+export * from '@elliemae/ds-header';
+export * from '@elliemae/ds-hidden';
+export * from '@elliemae/ds-icon';
+export * from '@elliemae/ds-indeterminate-progress-indicator';
+export * from '@elliemae/ds-label-value';
+export * from '@elliemae/ds-list-section-header';
+export * from '@elliemae/ds-loading-indicator';
+export * from '@elliemae/ds-menu';
+export * from '@elliemae/ds-overlay';
+export * from '@elliemae/ds-page-header';
+export * from '@elliemae/ds-page-number';
+export * from '@elliemae/ds-pills';
+export * from '@elliemae/ds-popover';
+export * from '@elliemae/ds-popper';
+export * from '@elliemae/ds-portal';
+export * from '@elliemae/ds-progress-indicator';
+export * from '@elliemae/ds-read-more';
+export * from '@elliemae/ds-resizeable-container';
+export * from '@elliemae/ds-separator';
+export * from '@elliemae/ds-side-panel';
+export * from '@elliemae/ds-slider';
+export * from '@elliemae/ds-spinner';
+export * from '@elliemae/ds-tabs';
+export * from '@elliemae/ds-text-wrapper';
+export { DSTimePicker, DSTimePickerMenu } from '@elliemae/ds-time-picker';
+export * from '@elliemae/ds-toast';
+export * from '@elliemae/ds-toolbar';
+export * from '@elliemae/ds-tooltip';
+export * from '@elliemae/ds-truncated-expandable-text';
+export * from '@elliemae/ds-truncated-tooltip-text';
+export * from '@elliemae/ds-zipcode-search';
+export * from '@elliemae/ds-zoom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-basic",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-beta.0",
   "license": "MIT",
   "description": "EllieMae UI Design System Library",
   "module": "./esm/index.js",
@@ -296,49 +296,49 @@
     "dev": "node ../../scripts/build/build.js -w"
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "2.2.0-alpha.2",
-    "@elliemae/ds-app-picker": "2.2.0-alpha.2",
-    "@elliemae/ds-backdrop": "2.2.0-alpha.2",
-    "@elliemae/ds-breadcrumb": "2.2.0-alpha.2",
-    "@elliemae/ds-button": "2.2.0-alpha.2",
-    "@elliemae/ds-button-group": "2.2.0-alpha.2",
-    "@elliemae/ds-card": "2.2.0-alpha.2",
-    "@elliemae/ds-circular-progress-indicator": "2.2.0-alpha.2",
-    "@elliemae/ds-form": "2.2.0-alpha.2",
-    "@elliemae/ds-grid": "2.2.0-alpha.2",
-    "@elliemae/ds-group-box": "2.2.0-alpha.2",
-    "@elliemae/ds-header": "2.2.0-alpha.2",
-    "@elliemae/ds-hidden": "2.2.0-alpha.2",
-    "@elliemae/ds-icon": "2.2.0-alpha.2",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.2.0-alpha.2",
-    "@elliemae/ds-label-value": "2.2.0-alpha.2",
-    "@elliemae/ds-list-section-header": "2.2.0-alpha.2",
-    "@elliemae/ds-loading-indicator": "2.2.0-alpha.2",
-    "@elliemae/ds-menu": "2.2.0-alpha.2",
-    "@elliemae/ds-overlay": "2.2.0-alpha.2",
-    "@elliemae/ds-page-header": "2.2.0-alpha.2",
-    "@elliemae/ds-page-number": "2.2.0-alpha.2",
-    "@elliemae/ds-pills": "2.2.0-alpha.2",
-    "@elliemae/ds-popover": "2.2.0-alpha.2",
-    "@elliemae/ds-popper": "2.2.0-alpha.2",
-    "@elliemae/ds-portal": "2.2.0-alpha.2",
-    "@elliemae/ds-progress-indicator": "2.2.0-alpha.2",
-    "@elliemae/ds-read-more": "2.2.0-alpha.2",
-    "@elliemae/ds-resizeable-container": "2.2.0-alpha.2",
-    "@elliemae/ds-separator": "2.2.0-alpha.2",
-    "@elliemae/ds-side-panel": "2.2.0-alpha.2",
-    "@elliemae/ds-slider": "2.2.0-alpha.2",
-    "@elliemae/ds-spinner": "2.2.0-alpha.2",
-    "@elliemae/ds-tabs": "2.2.0-alpha.2",
-    "@elliemae/ds-text-wrapper": "2.2.0-alpha.2",
-    "@elliemae/ds-time-picker": "2.2.0-alpha.2",
-    "@elliemae/ds-toast": "2.2.0-alpha.2",
-    "@elliemae/ds-toolbar": "2.2.0-alpha.2",
-    "@elliemae/ds-tooltip": "2.2.0-alpha.2",
-    "@elliemae/ds-truncated-expandable-text": "2.2.0-alpha.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.2",
-    "@elliemae/ds-zipcode-search": "2.2.0-alpha.2",
-    "@elliemae/ds-zoom": "2.2.0-alpha.2"
+    "@elliemae/ds-accordion": "2.2.0-beta.0",
+    "@elliemae/ds-app-picker": "2.2.0-beta.0",
+    "@elliemae/ds-backdrop": "2.2.0-beta.0",
+    "@elliemae/ds-breadcrumb": "2.2.0-beta.0",
+    "@elliemae/ds-button": "2.2.0-beta.0",
+    "@elliemae/ds-button-group": "2.2.0-beta.0",
+    "@elliemae/ds-card": "2.2.0-beta.0",
+    "@elliemae/ds-circular-progress-indicator": "2.2.0-beta.0",
+    "@elliemae/ds-form": "2.2.0-beta.0",
+    "@elliemae/ds-grid": "2.2.0-beta.0",
+    "@elliemae/ds-group-box": "2.2.0-beta.0",
+    "@elliemae/ds-header": "2.2.0-beta.0",
+    "@elliemae/ds-hidden": "2.2.0-beta.0",
+    "@elliemae/ds-icon": "2.2.0-beta.0",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.2.0-beta.0",
+    "@elliemae/ds-label-value": "2.2.0-beta.0",
+    "@elliemae/ds-list-section-header": "2.2.0-beta.0",
+    "@elliemae/ds-loading-indicator": "2.2.0-beta.0",
+    "@elliemae/ds-menu": "2.2.0-beta.0",
+    "@elliemae/ds-overlay": "2.2.0-beta.0",
+    "@elliemae/ds-page-header": "2.2.0-beta.0",
+    "@elliemae/ds-page-number": "2.2.0-beta.0",
+    "@elliemae/ds-pills": "2.2.0-beta.0",
+    "@elliemae/ds-popover": "2.2.0-beta.0",
+    "@elliemae/ds-popper": "2.2.0-beta.0",
+    "@elliemae/ds-portal": "2.2.0-beta.0",
+    "@elliemae/ds-progress-indicator": "2.2.0-beta.0",
+    "@elliemae/ds-read-more": "2.2.0-beta.0",
+    "@elliemae/ds-resizeable-container": "2.2.0-beta.0",
+    "@elliemae/ds-separator": "2.2.0-beta.0",
+    "@elliemae/ds-side-panel": "2.2.0-beta.0",
+    "@elliemae/ds-slider": "2.2.0-beta.0",
+    "@elliemae/ds-spinner": "2.2.0-beta.0",
+    "@elliemae/ds-tabs": "2.2.0-beta.0",
+    "@elliemae/ds-text-wrapper": "2.2.0-beta.0",
+    "@elliemae/ds-time-picker": "2.2.0-beta.0",
+    "@elliemae/ds-toast": "2.2.0-beta.0",
+    "@elliemae/ds-toolbar": "2.2.0-beta.0",
+    "@elliemae/ds-tooltip": "2.2.0-beta.0",
+    "@elliemae/ds-truncated-expandable-text": "2.2.0-beta.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.0-beta.0",
+    "@elliemae/ds-zipcode-search": "2.2.0-beta.0",
+    "@elliemae/ds-zoom": "2.2.0-beta.0"
   },
   "devDependencies": {
     "gulp": "~4.0.2",

package/styles/components/packages/ds-button/DSButton.scss

@@ -52,7 +52,7 @@ $text-disabled: #5c6574;
   position: relative;
 
   &:after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -288,7 +288,7 @@ div.#{$btn-el} {
 
 // ********************************************
 // Secondary
-.#{$btn-el-secondary} {
+.#{$btn-el-secondary}{
   color: color(brand-primary, 600);
   background-color: color(neutral, 000);
   border: $border-type color(neutral, 400);
@@ -393,10 +393,10 @@ div.#{$btn-el} {
 }
 
 $intent-colors: (
-  'success': color('success', 900),
-  'danger': color('danger', 900),
-  'warning': color('warning', 900),
-  'info': color('brand-primary', 600),
+  "success": color("success", 900),
+  "danger": color("danger", 900),
+  "warning": color("warning", 900),
+  "info": color("brand-primary", 600),
 );
 
 @each $intent, $color in $intent-colors {
@@ -425,7 +425,7 @@ $intent-colors: (
     &:hover:not([disabled]),
     &.#{$btn-el-vhover} {
       color: $color;
-
+      
       span.label-wrapper.no-icon {
         &:before {
           background-color: transparent;

package/styles/components/packages/ds-date-picker/components/DatePickerPicker/DatePickerPicker.scss

@@ -2,7 +2,7 @@
   @include border-radius(0 $radius $radius 0);
   padding: 0 calc(#{space(xxs)} * 0.5);
 
-  &:hover:not([disabled]) {
+  &:hover:not([disabled]) {    
     border: $border-type color(brand-primary, 600);
   }
 

package/styles/components/packages/ds-form/FormItem/DSFormItemLayout.scss

@@ -6,7 +6,7 @@ $el-container-disabled: #{$el-container}--disabled;
 $el-container-read-only: #{$el-container}--readonly;
 $el-container-fit-content: #{$el-container}--fit-content;
 $el-container-with-highlight: #{$el-container}--with-highlight;
-$input-controller:  #{$prefix}-input;
+$input-controller: #{$prefix}-input;
 $el-container-left-label: #{$el-container}--with-left-label;
 
 $checkbox-group: #{$prefix}-checkbox-group;
@@ -16,7 +16,7 @@ $checkbox-group-element: #{$prefix}-form-element-checkbox;
 // elements
 $el-feedback: #{$el-container}__feedback;
 
-.#{$el-container}{
+.#{$el-container} {
   margin-bottom: space(xs);
   position: relative;
   z-index: 0;
@@ -28,7 +28,7 @@ $el-feedback: #{$el-container}__feedback;
   }
 }
 
-fieldset.#{$el-container}-content{
+fieldset.#{$el-container}-content {
   display: block;
   margin-inline-start: unset;
   margin-inline-end: unset;
@@ -44,19 +44,18 @@ fieldset.#{$el-container}-content{
   padding: unset;
 }
 
-.#{$el-container-left-label}{
-  
-  .#{$el-container}-content{
+.#{$el-container-left-label} {
+  .#{$el-container}-content {
     display: flex;
     flex-direction: row;
     width: 100%;
   }
   label {
-    padding-right:  space(xxs);
+    padding-right: space(xxs);
     display: inline-flex;
     align-items: center;
   }
-  .#{$el-container}__feedback{
+  .#{$el-container}__feedback {
     display: flex;
     margin-left: auto;
     width: 80%;
@@ -66,12 +65,11 @@ fieldset.#{$el-container}-content{
   }
 }
 
-.#{$el-container-fit-content}{
+.#{$el-container-fit-content} {
   width: fit-content;
 }
 
-
-.#{$el-container-with-highlight}{
+.#{$el-container-with-highlight} {
   $separation: 8;
 
   &::after {
@@ -82,32 +80,29 @@ fieldset.#{$el-container}-content{
     z-index: -1;
     width: calc(100% + #{$separation * 2}px);
     height: calc(100% + #{$separation}px);
-    background-color: #FEFBEE;
-    border : 1px solid #8F6326;
-    border-radius : 4px;
-    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);
-    }
-    &:hover, 
-    &:focus-within {
-      &::after {
-        position: absolute;
-        content: '';
-        left: -#{$separation}px;
-        top: -#{$separation / 2}px;
-        z-index: -1;
-        width: calc(100% + #{$separation * 2}px);
-        height: calc(100% + #{$separation}px);
-        background-color: #FFF9D3;
-        border : 1px solid #8F6326;
-        border-radius : 4px;
-        box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);
-      }
+    background-color: #fefbee;
+    border: 1px solid #8f6326;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
+  }
+  &:hover,
+  &:focus-within {
+    &::after {
+      position: absolute;
+      content: '';
+      left: -#{$separation}px;
+      top: -#{$separation / 2}px;
+      z-index: -1;
+      width: calc(100% + #{$separation * 2}px);
+      height: calc(100% + #{$separation}px);
+      background-color: #fff9d3;
+      border: 2px solid #8f6326;
+      border-radius: 4px;
+      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
     }
+  }
 }
 
-
-
-
 .#{$el-feedback} {
   @include body-micro-text-style;
   color: color(neutral, 500);
@@ -133,4 +128,4 @@ fieldset.#{$el-container}-content{
   .#{$el-feedback} {
     font-size: toMobile(font-size(400));
   }
-}
+}

package/styles/components/packages/ds-shuttle/DSShuttle.scss

@@ -11,7 +11,6 @@ $shuttle-footer: #{$shuttle}-footer;
 $shuttle-searchbox: #{$shuttle}-search-box;
 $shuttle-infinte-scroll-indicator: #{$shuttle}-infinite-scroll-indicator;
 
-
 // ********************************************
 // dimsum component classes
 $DSBreadcrumb: #{$prefix}-breadcrumb;
@@ -29,17 +28,16 @@ $shuttle-searchbox-height: space(m) * 1.2;
 
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 0 color(brand-primary, 600)
+    box-shadow: 0 0 0 0 color(brand-primary, 600);
   }
   50% {
-    box-shadow: 0 0 5px 0 color(brand-primary, 600)
+    box-shadow: 0 0 5px 0 color(brand-primary, 600);
   }
   100% {
-    box-shadow: 0 0 0 0 color(brand-primary, 600)
+    box-shadow: 0 0 0 0 color(brand-primary, 600);
   }
 }
 
-
 @mixin link-button {
   color: color(brand-primary, 600);
   background-color: transparent;
@@ -58,7 +56,6 @@ $shuttle-searchbox-height: space(m) * 1.2;
 // elements definition
 $move-all-panel-el: #{$shuttle}__move-all-panel;
 
-
 $list-width: space(xxl) * 4.6875;
 $list-height: space(xxl) * 4.65;
 $searchbox-height: space(m) * 1.2;
@@ -79,7 +76,7 @@ $border-style: $theme-base-border-style color(neutral, 100);
   height: 100%;
   @include center();
   span {
-    color: color(neutral, 300)
+    color: color(neutral, 300);
   }
 }
 
@@ -98,11 +95,12 @@ $border-style: $theme-base-border-style color(neutral, 100);
       overflow: hidden;
       align-self: center;
       flex: 1;
+      padding: 4px 0;
 
       .#{$DSBreadcrumb} {
         width: 100%;
         ol {
-          margin: 0
+          margin: 0;
         }
       }
     }
@@ -163,11 +161,11 @@ $border-style: $theme-base-border-style color(neutral, 100);
       -moz-animation: fadeIn ease 1s;
       -o-animation: fadeIn ease 1s;
       -ms-animation: fadeIn ease 1s;
-    }  
+    }
     &__loading-list {
       top: 0;
       position: absolute;
-      width: 100%; 
+      width: 100%;
       height: 100%;
       pointer-events: none;
     }
@@ -184,10 +182,10 @@ $border-style: $theme-base-border-style color(neutral, 100);
 
     @keyframes fadeIn {
       0% {
-        opacity:0;
+        opacity: 0;
       }
       100% {
-        opacity:1;
+        opacity: 1;
       }
     }
   }
@@ -212,15 +210,15 @@ $border-style: $theme-base-border-style color(neutral, 100);
   }
 }
 
-
 .#{$shuttle-list-item} {
-  display: flex;
-  justify-content: flex-start;
+  display: grid;
+  grid-template-columns: auto min-content;
   align-items: center;
   overflow: hidden;
   position: relative;
   border-bottom: $border-style;
   background-color: color(neutral, 000);
+  z-index: 999;
 
   &.drag-helper {
     border: $border-style;
@@ -228,20 +226,19 @@ $border-style: $theme-base-border-style color(neutral, 100);
 
   &__parent-helper-text {
     margin-left: space(xs);
-    color: color(brand-primary, 700)
+    color: color(brand-primary, 700);
   }
 
   &__content {
-    display: flex;
+    display: grid;
     align-items: center;
-    flex: 1 0 auto;
+    grid-template-columns: min-content minmax(0px, min-content) auto;
     height: space(l) * 1.125;
     padding-left: space(xs);
     padding-right: space(xs);
     border-left: 4px solid color(neutral, 100);
     cursor: default;
     pointer-events: none;
-    max-width: calc(100% - 72px);
     span.shuttle-tooltip-text {
       cursor: pointer;
       pointer-events: all;
@@ -256,7 +253,6 @@ $border-style: $theme-base-border-style color(neutral, 100);
       border-left-color: color(brand-primary, 600);
     }
 
-
     &--can-hover {
       cursor: pointer;
       pointer-events: all;
@@ -266,7 +262,7 @@ $border-style: $theme-base-border-style color(neutral, 100);
     }
   }
 
-  &__icon-wrapper {
+  &__icon-wrapper > span {
     margin-right: space(xs);
   }
 
@@ -279,7 +275,8 @@ $border-style: $theme-base-border-style color(neutral, 100);
       width: $item-list-height;
       border-left: $border-style;
 
-      svg, svg:not([fill]) {
+      svg,
+      svg:not([fill]) {
         fill: color(brand-primary, 600);
       }