@elliemae/ds-basic 3.22.0-next.8 → 3.22.0-rc.1

package/dist/styles/components/packages/ds-basic/index.scss

@@ -1,49 +1,49 @@
 // form
-@import '../../ds-common/src/ComboBox/DSComboBox';
-@import '../../ds-form/src/ExpandableInput/DSExpandableInput';
-@import '../../ds-common/src/SearchBox/DSSearchBox';
-@import '../../ds-form/src/TimeInput/DSTimeInput';
-@import '../../ds-form/src/InputGroup/DSInputGroup';
-@import '../../ds-common/src/Checkbox/DSCheckbox';
-@import '../../ds-form/src/FormItem/Error/DSError';
-@import '../../ds-form/src/FormItem/Label/DSLabel';
-@import '../../ds-form/src/FormItem/DSFormItemLayout';
-@import '../../ds-form/src/Input/DSInput';
-@import '../../ds-form/src/DateInput/DSDateInput';
-@import '../../ds-form/src/Input/InputAddonWrapper';
-@import '../../ds-form/src/Toggle/DSToggle';
-@import '../../ds-form/src/FloatingLabelInput/DSFloatingLabelInput';
-@import '../../ds-form/src/InputMask/DSInputMask';
-@import '../../ds-form/src/LargeInputText/DSLargeInputText';
-@import '../../ds-form/src/Radio/DSRadio';
-@import '../../ds-form/src/RadioGroup/DSRadioGroup';
-@import '../../ds-form/src/CheckboxGroup/DSCheckboxGroup';
-@import '../../ds-form/src/RequiredMark/RequiredMark';
-@import '../../ds-form/src/InputProtected/DSInputProtected';
+@import '../../../legacy/ds-common/src/ComboBox/DSComboBox';
+@import '../../../legacy/ds-form/src/ExpandableInput/DSExpandableInput';
+@import '../../../legacy/ds-common/src/SearchBox/DSSearchBox';
+@import '../../../legacy/ds-form/src/TimeInput/DSTimeInput';
+@import '../../../legacy/ds-form/src/InputGroup/DSInputGroup';
+@import '../../../legacy/ds-common/src/Checkbox/DSCheckbox';
+@import '../../../legacy/ds-form/src/FormItem/Error/DSError';
+@import '../../../legacy/ds-form/src/FormItem/Label/DSLabel';
+@import '../../../legacy/ds-form/src/FormItem/DSFormItemLayout';
+@import '../../../legacy/ds-form/src/Input/DSInput';
+@import '../../../legacy/ds-form/src/DateInput/DSDateInput';
+@import '../../../legacy/ds-form/src/Input/InputAddonWrapper';
+@import '../../../legacy/ds-form/src/Toggle/DSToggle';
+@import '../../../legacy/ds-form/src/FloatingLabelInput/DSFloatingLabelInput';
+@import '../../../legacy/ds-form/src/InputMask/DSInputMask';
+@import '../../../legacy/ds-form/src/LargeInputText/DSLargeInputText';
+@import '../../../legacy/ds-form/src/Radio/DSRadio';
+@import '../../../legacy/ds-form/src/RadioGroup/DSRadioGroup';
+@import '../../../legacy/ds-form/src/CheckboxGroup/DSCheckboxGroup';
+@import '../../../legacy/ds-form/src/RequiredMark/RequiredMark';
+@import '../../../legacy/ds-form/src/InputProtected/DSInputProtected';
 
-@import '../../ds-progress-indicator/src/DSProgressIndicator';
-@import '../../ds-page-header/src/DSPageHeader';
-@import '../../ds-truncated-tooltip-text/src/DSTruncatedTooltipText';
-@import '../../ds-toolbar/src/DSToolbar';
-@import '../../ds-time-picker/src/DSTimePicker';
-@import '../../ds-spinner/src/DSSpinner';
-@import '../../ds-loading-indicator/src/DSLoadingIndicator';
-@import '../../ds-tooltip/src/v1/DSTooltip';
-@import '../../ds-popover/src/DSPopover';
-@import '../../ds-overlay/src/DSOverlay';
-@import '../../ds-portal/src/DSPortal';
-@import '../../ds-button-v1/src/DSButton';
-@import '../../ds-separator/src/DSSeparator';
-@import '../../ds-label-value/src/DSLabelValue';
-@import '../../ds-group-box/src/DSGroupBox';
-@import '../../ds-text-wrapper/src/DSTextWrapper';
-@import '../../ds-card/src/DSCard';
-@import '../../ds-button-group/src//DSButtonGroup';
-@import '../../ds-dropdownmenu/src/DSDropdownMenu';
-@import '../../ds-menu/src/Menu';
-@import '../../ds-pills/src/DSPills';
-@import '../../ds-zoom/src/DSZoom';
-@import '../../ds-indeterminate-progress-indicator/src/DSIndeterminateProgressIndicator';
-@import '../../ds-page-number/src/DSPageNumber';
-@import '../../ds-zipcode-search/src/DSZipCodeSearch';
-@import '../../ds-circular-progress-indicator/src/DSCircularProgressIndicator';
+@import '../../../atom/ds-progress-indicator/src/DSProgressIndicator';
+@import '../../../legacy/ds-page-header-v1/src/DSPageHeader';
+@import '../../../legacy/ds-truncated-tooltip-text/src/DSTruncatedTooltipText';
+@import '../../../legacy/ds-toolbar-v1/src/DSToolbar';
+@import '../../../legacy/ds-time-picker/src/DSTimePicker';
+@import '../../../legacy/ds-spinner/src/DSSpinner';
+@import '../../../legacy/ds-loading-indicator/src/DSLoadingIndicator';
+@import '../../../atom/ds-tooltip/src/v1/DSTooltip';
+@import '../../../legacy/ds-popover/src/DSPopover';
+@import '../../../legacy/ds-overlay/src/DSOverlay';
+@import '../../../legacy/ds-portal/src/DSPortal';
+@import '../../../legacy/ds-button-v1/src/DSButton';
+@import '../../../atom/ds-separator/src/DSSeparator';
+@import '../../../legacy/ds-label-value/src/DSLabelValue';
+@import '../../../legacy/ds-group-box/src/DSGroupBox';
+@import '../../../legacy/ds-text-wrapper/src/DSTextWrapper';
+@import '../../../legacy/ds-card/src/DSCard';
+@import '../../../legacy/ds-button-group/src//DSButtonGroup';
+@import '../../../layout/ds-dropdownmenu/src/DSDropdownMenu';
+@import '../../../legacy/ds-menu/src/Menu';
+@import '../../../legacy/ds-pills/src/DSPills';
+@import '../../../legacy/ds-zoom/src/DSZoom';
+@import '../../../atom/ds-indeterminate-progress-indicator/src/DSIndeterminateProgressIndicator';
+@import '../../../legacy/ds-page-number/src/DSPageNumber';
+@import '../../../legacy/ds-zipcode-search/src/DSZipCodeSearch';
+@import '../../../atom/ds-circular-progress-indicator/src/DSCircularProgressIndicator';

package/dist/styles/components/packages/ds-basic/styles/components/index.scss

@@ -7,22 +7,22 @@
 // we need to rethink how the styles are imported, maybe using css modules
 // or even styled component so we have styles more modularized
 @import '~react-dates/lib/css/_datepicker.css';
-@import '../../../ds-shuttle/src/DSShuttle.scss';
-@import '../../../ds-filterbar/src/DSFilterBar.scss';
-@import '../../../ds-modal/src/DSModal.scss';
-@import '../../../ds-modal-slide/src/DSModalSlide.scss';
-@import '../../../ds-datagrids/src/DataGrids.scss';
-@import '../../../ds-treeview/src/Tree';
-@import '../../../ds-query-builder/src/DSQueryBuilder.scss';
-@import '../../../ds-search-field/src/DSSearchField.scss';
-@import '../../../ds-date-time-recurrence-picker/src/DSDateTimeRecurrenceSelector.scss';
-@import '../../../ds-number-range-field/src/DSNumberRangeField.scss';
-@import '../../../ds-date-picker/src/DSDatePicker.scss';
-@import '../../../ds-date-time-picker/src/DSDateTimePicker.scss';
-@import '../../../ds-date-range-picker/src/DSDateRangePicker.scss';
-@import '../../../ds-date-range-selector/src/DSDateRangeSelector.scss';
-@import '../../../ds-codeeditor/src/DSCodeEditor.scss';
-@import '../../../ds-wysiwygeditor/src/DSWYSIWYGEditor.scss';
-@import '../../../ds-imagelibrarymodal/src/DSImageLibraryModal.scss';
-@import '../../../ds-ribbon/src/DSRibbon.scss';
-@import '../../../ds-card-array/src/DSCardArray.scss';
+@import '../../../../legacy/ds-shuttle/src/DSShuttle.scss';
+@import '../../../../legacy/ds-filterbar/src/DSFilterBar.scss';
+@import '../../../../legacy/ds-modal/src/DSModal.scss';
+@import '../../../../layout/ds-modal-slide/src/DSModalSlide.scss';
+@import '../../../../legacy/ds-datagrids/src/DataGrids.scss';
+@import '../../../../data/ds-treeview/src/Tree';
+@import '../../../../data/ds-query-builder/src/DSQueryBuilder.scss';
+@import '../../../../legacy/ds-search-field/src/DSSearchField.scss';
+@import '../../../../legacy/ds-date-time-recurrence-picker/src/DSDateTimeRecurrenceSelector.scss';
+@import '../../../../legacy/ds-number-range-field/src/DSNumberRangeField.scss';
+@import '../../../../legacy/ds-date-picker/src/DSDatePicker.scss';
+@import '../../../../legacy/ds-date-time-picker/src/DSDateTimePicker.scss';
+@import '../../../../legacy/ds-date-range-picker/src/DSDateRangePicker.scss';
+@import '../../../../legacy/ds-date-range-selector/src/DSDateRangeSelector.scss';
+@import '../../../../legacy/ds-codeeditor/src/DSCodeEditor.scss';
+@import '../../../../legacy/ds-wysiwygeditor/src/DSWYSIWYGEditor.scss';
+@import '../../../../legacy/ds-imagelibrarymodal/src/DSImageLibraryModal.scss';
+@import '../../../../layout/ds-ribbon/src/DSRibbon.scss';
+@import '../../../../legacy/ds-card-array/src/DSCardArray.scss';

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

@@ -13,7 +13,6 @@ $btn-el-s: #{$btn-el}--s;
 $btn-el-m: #{$btn-el}--m;
 $btn-el-l: #{$btn-el}--l;
 $btn-el-fluid: #{$btn-el}--fluid-width;
-
 $btn-el-primary: #{$btn-el}--primary;
 $btn-el-text: #{$btn-el}--text;
 $btn-el-secondary: #{$btn-el}--secondary;
@@ -33,7 +32,6 @@ $button-height: space(m) * 1.17;
 $button-border-radius: $theme-base-border-radius;
 $button-width: space(l) * 1.3;
 $button-padding: 0 space(s);
-
 $s-size: space(s) * 1.125; //18px;
 $m-size: space(m) * 1.17; //28px
 $l-size: space(l) * 1.25; //40px;
@@ -44,14 +42,13 @@ $l-font: font-size(600); //16px;
 
 $border-type: solid border-size(xs);
 $border-type-2: solid border-size(m);
-
 $text-disabled: #5c6574;
 
 @mixin withFocus($color: color(brand-primary, 600)) {
   outline: none;
   position: relative;
 
-  &:after {
+  &::after {
     content: '';
     position: absolute;
     top: 0;
@@ -59,6 +56,7 @@ $text-disabled: #5c6574;
     width: 100%;
     height: 100%;
     pointer-events: none;
+
     @include dsFocus($color);
   }
 }
@@ -68,12 +66,13 @@ $text-disabled: #5c6574;
 }
 
 div.#{$btn-el} {
-  -webkit-appearance: initial;
+  appearance: initial;
 }
 
 .#{$btn-el} {
   @include body-text-style(semibold);
-  @include center();
+  @include center;
+
   min-width: $button-width;
   line-height: unset;
   border-radius: $button-border-radius;
@@ -105,6 +104,7 @@ div.#{$btn-el} {
       margin-right: space(xs);
       margin-left: space(xs) * -1;
     }
+
     &:last-child:not(:first-child) {
       margin-left: space(xs);
       margin-right: space(xs) * -1;
@@ -128,6 +128,7 @@ div.#{$btn-el} {
   &.#{$btn-el}--icon-only {
     width: $s-size;
   }
+
   // https://jira.elliemae.io/browse/PUI-6990
   // & .#{$btn-icon} {
   //   height: 12px;
@@ -141,6 +142,7 @@ div.#{$btn-el} {
   &.#{$btn-el}--icon-only {
     width: $m-size;
   }
+
   // https://jira.elliemae.io/browse/PUI-6990
   // & .#{$btn-icon} {
   //   height: 14px;
@@ -188,7 +190,8 @@ div.#{$btn-el} {
     color: $text-disabled;
     background-color: color(neutral, 100);
     border-color: color(neutral, 100);
-    @include withDisabled();
+
+    @include withDisabled;
 
     .#{$btn-icon} {
       @include icon-color($text-disabled);
@@ -263,7 +266,8 @@ div.#{$btn-el} {
   &.#{$btn-el-vdisabled} {
     color: color(neutral, 500);
     background: color(neutral, 000);
-    @include withDisabled();
+
+    @include withDisabled;
 
     .#{$btn-icon} {
       @include icon-color(color(neutral, 500));
@@ -327,7 +331,8 @@ div.#{$btn-el} {
   &.#{$btn-el-vdisabled} {
     color: color(neutral, 500);
     background-color: color(neutral, 000);
-    @include withDisabled();
+
+    @include withDisabled;
 
     .#{$btn-icon} {
       @include icon-color(color(neutral, 500));
@@ -352,7 +357,8 @@ div.#{$btn-el} {
 // ********************************************
 // link
 .#{$btn-el-link} {
-  @include link-text-style();
+  @include link-text-style;
+
   padding: 0;
   color: color(brand-primary, 600);
   border: none;
@@ -373,14 +379,16 @@ div.#{$btn-el} {
 
   &:disabled {
     color: color(neutral, 400);
-    @include withDisabled();
+
+    @include withDisabled;
   }
 
   &.#{$btn-el}--icon-only {
     &:focus,
     &.#{$btn-el-vfocus} {
       span.label-wrapper {
-        @include withFocus();
+        @include withFocus;
+
         &::after {
           top: -2px;
           left: -2px;
@@ -427,7 +435,7 @@ $intent-colors: (
       color: $color;
 
       span.label-wrapper.no-icon {
-        &:before {
+        &::before {
           background-color: transparent;
           border-radius: 2px;
         }
@@ -457,7 +465,7 @@ $intent-colors: (
   }
 
   .#{$btn-el-m} {
-    font-size: toMobile(font-size(600));
+    font-size: tomobile(font-size(600));
     height: calc(#{space(m)} * 1.085);
 
     &.#{$btn-el}--icon-only {
@@ -473,7 +481,7 @@ $intent-colors: (
   }
 
   .#{$btn-el-l} {
-    font-size: toMobile(font-size(600));
+    font-size: tomobile(font-size(600));
     height: calc(#{space(l)} * 1.016);
 
     &.#{$btn-el}--icon-only {

package/dist/styles/components/packages/{ds-page-header/v1 → ds-page-header-v1}/DSPageHeader.scss

@@ -9,7 +9,6 @@ $page-header-toolbar: #{$page-header}-toolbar;
 $page-header-breadcrumb: #{$page-header}-breadcrumb;
 $page-header-backarrow: #{$page-header}-backarrow;
 
-
 // DIMSUM components
 $btn-component: #{$prefix}-button;
 $toolbar-component: #{$prefix}-toolbar;
@@ -41,7 +40,8 @@ $border-style: border-size() solid;
   justify-content: flex-end;
 }
 
-_:-ms-fullscreen, :root .#{$page-header-toolbar}--ie-flex-basis-auto {
+_:-ms-fullscreen,
+:root .#{$page-header-toolbar}--ie-flex-basis-auto {
   flex-basis: auto;
 }
 
@@ -76,14 +76,14 @@ _:-ms-fullscreen, :root .#{$page-header-toolbar}--ie-flex-basis-auto {
     left: space(xs) * -1.1;
     width: 100%;
     height: fit-content;
-    @include h2-text-style()
+    @include h2-text-style();
   }
 
   &__title {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    @include h2-text-style()
+    @include h2-text-style();
   }
 
   &__subtitle {

package/dist/styles/components/packages/{ds-toolbar → ds-toolbar-v1}/DSToolbar.scss

@@ -8,7 +8,6 @@ $toolbar-group: #{$prefix}-toolbar-group;
 $divider-el: #{$prefix}-toolbar__divider;
 $toolbar-button-el: #{$prefix}-toolbar__button;
 
-
 .#{$toolbar-container} {
   display: inline-block;
   background: color(neutral, 000);
@@ -22,7 +21,7 @@ $toolbar-button-el: #{$prefix}-toolbar__button;
   }
 
   & > *:not(:last-child) {
-    margin-right: space(xs)
+    margin-right: space(xs);
   }
 
   &__button {
@@ -39,12 +38,11 @@ $toolbar-button-el: #{$prefix}-toolbar__button;
     justify-content: flex-start;
   }
 
-  &--compact{
+  &--compact {
     padding: 0;
     height: space(m) * 1.16666;
   }
 
-
   .toolbar-item {
     position: relative;
   }
@@ -59,7 +57,7 @@ $toolbar-button-el: #{$prefix}-toolbar__button;
 
   &--space-xs {
     & > *:not(:last-child) {
-      margin-right: space(xs)
+      margin-right: space(xs);
     }
   }
 }
@@ -67,4 +65,4 @@ $toolbar-button-el: #{$prefix}-toolbar__button;
 .#{$divider-el} {
   width: border-size(xs);
   height: 100%;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-basic",
-  "version": "3.22.0-next.8",
+  "version": "3.22.0-rc.1",
   "license": "MIT",
   "description": "EllieMae UI Design System Library",
   "files": [
@@ -33,10 +33,10 @@
     "indent": 4
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "~9.0.0-next.17",
+    "@elliemae/pui-cli": "~9.0.0-next.22",
     "gulp": "~4.0.2",
     "gulp-rename": "~2.0.0",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.8"
+    "@elliemae/ds-monorepo-devops": "3.22.0-rc.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -56,6 +56,6 @@
     "prebuild": "exit 0",
     "build": "pnpm run build:css",
     "dev": "exit 0",
-    "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
 }

package/dist/styles/components/packages/ds-circular-progress-indicator/DSCircularProgressIndicator.scss

@@ -1,81 +0,0 @@
-$circular-progress-indicator: #{$prefix}-circular-progress-indicator;
-$wrapper: #{$circular-progress-indicator}-wrapper;
-$track: #{$circular-progress-indicator}__track;
-$label: #{$circular-progress-indicator}__label;
-$arc-white: #{$circular-progress-indicator}__arc-white;
-$arc-gray: #{$circular-progress-indicator}__arc-gray;
-$arc-blue: #{$circular-progress-indicator}__arc-blue;
-
-
-.#{$wrapper} {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: fit-content;
-  margin: 0;
-}
-
-.#{$label} {
-  margin-top: space(s);
-}
-
-.#{$track} {
-  stroke: color(neutral, 100);
-}
-
-.#{$arc-blue} {
-  transform-origin: 33px 33px;
-  animation: rotation1 2.7s ease-out  infinite;
-}
-
-.#{$arc-white} {
-  transform-origin: 33px 33px;
-  animation: rotation2 2.7s ease-out infinite;
-}
-
-.#{$arc-gray} {
-  transform-origin: 33px 33px;
-  animation: rotation2 2.7s ease-out infinite;
-}
-
-@keyframes rotation1 {
-  0% {
-    stroke: url(#grad1);
-    transform: rotate(0deg);
-  }
-  49% {
-    stroke: url(#grad1);
-  }
-  50% {
-    stroke: #5594e2;
-    transform: rotate(450deg);
-  }
-  51% {
-    stroke: url(#grad2);
-  }
-  100% {
-    stroke: url(#grad2);
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes rotation2 {
-  0% {
-    transform: rotate(0deg);
-  }
-  20% {
-    transform: rotate(0deg);
-  }
-  40% {
-    transform: rotate(90deg);
-  }
-  60% {
-    transform: rotate(90deg);
-  }
-  80% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}

package/dist/styles/components/packages/ds-dropdownmenu/DSDropdownMenu.scss

@@ -1,128 +0,0 @@
-// ********************************************
-// container definition
-$menu-container: #{$prefix}-menu;
-$menu-select-container: #{$prefix}-menu-select;
-$item-container: #{$prefix}-menu-item;
-$backdrop-el: #{$prefix}-menu__backdrop;
-$select-container: #{$prefix}-selectbox;
-
-$border-radius: $theme-base-border-radius;
-
-.#{$backdrop-el} {
-  width: 100%;
-  height: 100%;
-  opacity: 0.5;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-.#{$menu-container}-s {
-  &--is-root {
-    margin: space(xxs) 0
-  }
-  border: 1px solid color(neutral, 200);
-  margin: 0;
-  display: inline-block;
-  padding: space(xs) 0;
-  background: color(neutral, 000);
-  color: color(neutral, 800);
-  list-style: none;
-  width: 100%;
-  min-width: space(xxl) * 2;
-  @include border-radius($border-radius);
-  @include box-shadow(depth(200));
-
-  .#{$select-container}__control {
-    margin: 0 space(xs)
-  }
-
-  .#{$select-container}__option {
-    // todo: we need a way to avoid doing arithmetic here
-    padding: space(xs) * 1.25 space(l) space(xs) * 1.25 space(s);
-  }
-}
-
-.#{$menu-container}__separator1 {
-  margin: space(xs) 0;
-  small {
-    padding: 0 space(s);
-    color: color(neutral, 500)
-  }
-  &:after {
-    content: '';
-    display: block;
-    height: 1px;
-    width: 100%;
-    background-color: color(neutral, 100);
-  }
-}
-
-.#{$item-container}s {
-  display: flex;
-  padding: space(xs) space(xs) * 1.5 space(xs) space(xs) * 1.5;
-  transition: background-color duration(fast) easing(base);
-  align-items: center;
-  height: space(l);
-
-  &__content {
-    cursor: pointer;
-    display: flex;
-    flex: 1;
-    align-items: center;
-  }
-
-  &__selectable-container {
-    padding-right: space(xs);
-    min-width: space(m);
-    svg, svg:not([fill]) {
-      @include icon(s, color(brand-primary, 600));
-    }
-  }
-
-  &:hover, &--active {
-    background-color: color(brand-primary, 200);
-  }
-
-  .menu-item-icon {
-    @include icon(s, color(neutral, 600));
-    margin-right: space(xs) * 1.5;
-  }
-
-  .drill-down-icon {
-    @include icon(s, color(brand-primary, 600));
-    margin-left: space(xs);
-    margin-right: space(xxs) * -1;
-  }
-
-  &__label {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    user-select: none;
-    margin-right: space(s);
-    margin-top: space(xxs) * 0.5;
-    flex: 1;
-  }
-
-  &--selected {
-    background: color(brand-primary, 600);
-    color: color(neutral, 000);
-    svg, svg:not([fill]) {
-      fill: color(neutral, 000);
-    }
-  }
-
-  &:active {
-    background-color: color(brand-primary, 600);
-    color: color(neutral, 000);
-    svg, svg:not([fill]) {
-      fill: color(neutral, 000);
-    }
-  }
-
-}
-
-.#{$menu-select-container} {
-  &__icon {
-    padding: 0 space(xxs) 0 space(xxs);
-  }
-}