@layerfi/components 0.1.115 → 0.1.116-alpha.1

package/dist/index.css

@@ -181,6 +181,20 @@
   font-weight: var(--font-weight-normal);
   font-feature-settings: "cv10" on, "cv01" on, "cv05" on, "cv08" on, "ss03" on;
 }
+@media (width <= 768px) {
+  .Layer__component,
+  .Layer__Portal,
+  .Layer__view,
+  .Layer__select__menu-portal,
+  .Layer__tooltip,
+  .Layer__UI__tooltip,
+  .Layer__toasts-container,
+  .Layer__drawer,
+  .Layer__variables,
+  .Layer__tasks-component {
+    --text-heading: 20px;
+  }
+}
 .Layer__view,
 .Layer__component,
 .Layer__Portal,
@@ -231,6 +245,9 @@
 .Layer__component *::-webkit-scrollbar-thumb:hover {
   background: #999;
 }
+.Layer__sortable-col.value-col {
+  text-align: right;
+}
 .Layer__sortable-col .Layer__sort-arrows .desc-arrow,
 .Layer__sortable-col .Layer__sort-arrows .asc-arrow {
   stroke: var(--color-base-500);
@@ -4118,94 +4135,6 @@ tbody .Layer__table__empty-row:first-child {
     width: 12px;
   }
 }
-.Layer__bank-transactions__notifications {
-  position: absolute;
-  z-index: 1;
-  bottom: var(--spacing-2xs);
-  left: calc(100% - 340px - var(--spacing-2xs));
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  transition: all var(--transition-speed) ease-in-out;
-}
-.Layer__bank-transactions__notifications .Layer__bank-transactions__notification {
-  overflow: hidden;
-  height: 56px;
-  padding: 12px;
-  margin: 0;
-  margin-top: -12px;
-  cursor: pointer;
-  transition: all var(--transition-speed) ease-in-out;
-}
-.Layer__bank-transactions__notifications .Layer__bank-transactions__notification:hover .Layer__bank-transactions__notification-content {
-  box-shadow: 0 0 3px 0 var(--base-transparent-12), 0 0 0 1px var(--color-base-200);
-}
-.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-content {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-  padding: var(--spacing-xs);
-  padding-right: var(--spacing-md);
-  border-radius: var(--border-radius-3xs);
-  box-shadow: 0 0 12px 0 var(--base-transparent-12), 0 0 0 1px var(--color-base-200);
-  background: var(--color-base-0);
-}
-.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-icon {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: var(--spacing-3xl);
-  width: var(--spacing-3xl);
-  border-radius: var(--border-radius-3xs);
-  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
-  background: var(--color-base-0);
-  color: var(--color-danger);
-}
-.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-text {
-  display: flex;
-  flex-direction: column;
-}
-.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-title {
-  font-size: var(--text-md);
-  color: var(--color-base-1000);
-}
-.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-message {
-  font-size: var(--text-sm);
-  color: var(--color-base-700);
-}
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes fade-out {
-  from {
-    height: 56px;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    height: 0;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    opacity: 0;
-    transform: scale(0.8);
-  }
-}
-.notification-enter {
-  animation: fade-in var(--transition-speed) forwards;
-}
-.notification-exit {
-  animation: fade-out var(--transition-speed) forwards;
-}
 .Layer__expanded-bank-transaction-row__splits-inputs + .Layer__text--error {
   padding: var(--spacing-2xs) 0;
   padding-bottom: var(--spacing-md);
@@ -5683,10 +5612,10 @@ tbody .Layer__table__empty-row:first-child {
 #layer-pie-dots-pattern rect.bg {
   fill: var(--color-base-100);
 }
-#layer-pie-dots-pattern-legend rect {
+.Layer__charts__dots-pattern-legend__dot {
   fill: var(--color-base-500);
 }
-#layer-pie-dots-pattern-bg {
+.Layer__charts__dots-pattern-legend__bg {
   fill: var(--color-base-100);
 }
 @container (min-width: 1024px) {
@@ -5862,10 +5791,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-bottom: var(--spacing-lg);
   padding-left: var(--spacing-md);
 }
-@container (max-width: 280px) {
-  .Layer__profit-and-loss-detailed-charts .chart-container {
-    width: 100%;
-  }
+.Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__empty-chart {
+  box-sizing: border-box;
+  height: 280px;
+  width: 100%;
+  padding-top: var(--spacing-2xl);
+  padding-right: var(--spacing-md);
+  padding-bottom: var(--spacing-lg);
+  padding-left: var(--spacing-md);
+}
+.Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__empty-chart-content {
+  height: 100%;
+}
+.Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__empty-chart-icon {
+  color: var(--color-base-400);
 }
 .Layer__profit-and-loss-detailed-charts .recharts-responsive-container {
   box-shadow: none;
@@ -5896,11 +5835,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding: var(--spacing-2xs) var(--spacing-xs);
   font-size: 12px;
   text-align: left;
-  transition: color 150ms ease-out;
 }
-.Layer__profit-and-loss-detailed-charts .details-container table th:last-child, .Layer__profit-and-loss-detailed-charts .details-container table th.value-col,
-.Layer__profit-and-loss-detailed-charts .details-container table td:last-child,
-.Layer__profit-and-loss-detailed-charts .details-container table td.value-col {
+.Layer__profit-and-loss-detailed-charts .details-container table th:first-child,
+.Layer__profit-and-loss-detailed-charts .details-container table td:first-child {
+  width: 20px;
+  padding-right: 0;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th:last-child,
+.Layer__profit-and-loss-detailed-charts .details-container table td:last-child {
+  text-align: right;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th.percent-col,
+.Layer__profit-and-loss-detailed-charts .details-container table td.percent-col {
+  width: 4ch;
+  padding-left: 0;
   text-align: right;
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th {
@@ -5910,6 +5858,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   color: var(--color-base-500);
   transition: color 150ms ease-out;
 }
+.Layer__profit-and-loss-detailed-charts .details-container table th:first-child {
+  cursor: default;
+}
 .Layer__profit-and-loss-detailed-charts .details-container table th:hover {
   color: var(--color-base-800);
 }
@@ -5920,22 +5871,18 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   position: relative;
   top: 1px;
 }
-.Layer__profit-and-loss-detailed-charts .details-container .share-cell-content {
-  display: flex;
-  gap: var(--spacing-2xs);
-  align-items: center;
-  justify-content: flex-end;
-}
-.Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .share-icon {
+.Layer__profit-and-loss-detailed-charts .details-container .color-col .share-icon {
   height: 12px;
   width: 12px;
   border-radius: 2px;
 }
-.Layer__profit-and-loss .Layer__panel__sidebar .Layer__panel__sidebar-content {
-  width: 100%;
+.Layer__profit-and-loss-detailed-charts .details-container .percent-col .share-text {
+  font-size: var(--text-sm);
+  line-height: 140%;
+  color: var(--color-base-600);
 }
-.Layer__profit-and-loss .Layer__panel__sidebar .Layer__profit-and-loss-detailed-charts {
-  width: 100%;
+.Layer__profit-and-loss-detailed-charts .details-container tbody tr {
+  height: 2.5rem;
 }
 .Layer__profit-and-loss-detailed-table__row {
   border-radius: 2px;
@@ -5947,7 +5894,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   color: var(--text-color-primary);
 }
 .Layer__profit-and-loss-detailed-table__row .type-col,
-.Layer__profit-and-loss-detailed-table__row .share-col {
+.Layer__profit-and-loss-detailed-table__row .percent-col {
   color: var(--color-base-500);
 }
 .Layer__profit-and-loss-detailed-table__row.active {
@@ -5956,7 +5903,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-table__row.active .category-col,
 .Layer__profit-and-loss-detailed-table__row.active .value-col,
 .Layer__profit-and-loss-detailed-table__row.active .type-col,
-.Layer__profit-and-loss-detailed-table__row.active .share-col {
+.Layer__profit-and-loss-detailed-table__row.active .percent-col {
   color: var(--color-base-1000);
 }
 .Layer__profit-and-loss-detailed-charts__pie {
@@ -5988,6 +5935,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-container {
     max-width: 300px;
   }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .Layer__profit-and-loss-detailed-charts__empty-chart {
+    max-width: 300px;
+  }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
     display: flex;
     flex: 1;
@@ -6014,6 +5964,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
     width: 100%;
+    padding-inline: var(--spacing-md);
+  }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper .Layer__Span {
+    margin: 0 1rem;
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .date {
     display: none;
@@ -7092,187 +7046,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
    * A `label` is an inline element by default. This change allows us to apply padding.
    */
   display: inline-block;
-}.Layer__ComboBoxContainer {
-  display: grid;
-}
-
-.Layer__ComboBoxControl {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  --block-size: 2.25rem;
-  block-size: var(--block-size);
-  border-radius: var(--input-border-radius);
-  border: 1px solid var(--color-base-300);
-  background-color: var(--color-base-0);
-}
-.Layer__ComboBoxControl--focused {
-  border-color: var(--outline-active);
-}
-.Layer__ComboBoxControl--disabled {
-  cursor: not-allowed;
-}
-.Layer__ComboBoxControl--readonly {
-  background-color: var(--bg-muted);
-}
-
-.Layer__ComboBoxContainer > .Layer__ComboBoxControl {
-  /*
-   * This is intentional.
-   *
-   * The "unstyled" variant of react-select still forces a min-height on the control of 38 px.
-   */
-  block-size: var(--block-size);
-  min-block-size: var(--block-size);
-}
-.Layer__ComboBoxContainer > .Layer__ComboBoxControl--focused {
-  /*
-   * This seems like the only workaround when the "unstyled" variant
-   * includes a (malicious) `outline: 0 !important`.
-   *
-   * @see {https://github.com/JedWatson/react-select/blob/2a913698ad3d7759fb8e6bc5dd8a7d839227da2f/packages/react-select/src/components/Control.tsx#L49}
-   */
-  outline: 2px solid var(--outline-default) !important;
-}
-
-.Layer__ComboBoxValueContainer {
-  padding-inline-start: var(--spacing-xs);
-  cursor: text;
-  font-size: var(--input-font-size);
-}
-
-.Layer__ComboBoxIndicatorsContainer {
-  padding-inline-end: var(--spacing-3xs);
-}
-.Layer__ComboBoxIndicatorsContainer--readonly {
-  visibility: hidden;
-}
-
-.Layer__ComboBoxClearIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  --size: 1.25rem;
-  block-size: var(--size);
-  inline-size: var(--size);
-  cursor: pointer;
-}
-
-.Layer__ComboBoxLoadingIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  --size: 1.25rem;
-  block-size: var(--size);
-  inline-size: var(--size);
-  cursor: default;
-}
-
-.Layer__ComboBoxDropdownIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  block-size: var(--size);
-  inline-size: var(--size);
-  cursor: pointer;
-  color: var(--color-base-600);
-  --size: 1.25rem;
-}
-
-.Layer__ComboBoxMenu {
-  overflow: hidden;
-  border-radius: var(--border-radius-xs);
-  border: 1px solid var(--border-color);
-  margin-block-start: var(--spacing-2xs);
-  background-color: var(--color-base-0);
-}
-
-.Layer__ComboBoxMenuList {
-  overflow-y: auto;
-}
-.Layer__ComboBoxMenuList .Layer__ComboBoxOption {
-  /*
-   * This is intentionally done indirectly to increase specificity.
-   *
-   * `react-select` explicitly sets 'block'
-   */
-  display: grid;
-  /*
-   * This is intentionally done indirectly to increase specificity.
-   *
-   * `react-select` explicitly sets 'default'
-   */
-  cursor: pointer;
-}
-.Layer__ComboBoxMenuList .Layer__ComboBoxOption--disabled {
-  cursor: not-allowed;
-}
-.Layer__ComboBoxMenuList .Layer__ComboBoxOption--hidden {
-  display: none;
-}
-
-.Layer__ComboBoxGroup {
-  padding-block: var(--spacing-xs);
-}
-.Layer__ComboBoxGroup > .Layer__ComboBoxGroupHeading {
-  padding-block-start: var(--spacing-3xs);
-  padding-block-end: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
-}
-.Layer__ComboBoxGroup > div > .Layer__ComboBoxOption {
-  padding-inline: var(--spacing-sm);
-}
-
-.Layer__ComboBoxOption {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-3xs);
-  border: 2px solid transparent;
-}
-.Layer__ComboBoxOption--focused {
-  background-color: var(--color-base-100);
-}
-.Layer__ComboBoxOption .Layer__ComboBoxOptionCheckIcon {
-  visibility: hidden;
-}
-.Layer__ComboBoxOption--selected {
-  background-color: var(--color-base-100);
-}
-.Layer__ComboBoxOption--selected .Layer__ComboBoxOptionCheckIcon {
-  visibility: visible;
-}
-.Layer__ComboBoxOption--disabled {
-  color: var(--color-base-500);
-}
-
-.Layer__ComboBoxNoOptionsMessage {
-  padding-block: var(--spacing-sm);
-}.Layer__MoneySpan[data-positive]::before {
-  content: "$";
-}
-.Layer__MoneySpan[data-negative]::before {
-  content: "-$";
-}
-.Layer__MoneySpan[data-display-plus-sign]::before {
-  content: "+$";
-}.Layer__datetime {
-  display: inline-flex;
-  gap: var(--spacing-md);
-  align-items: center;
-}.Layer__BankTransactionCategoryComboBox__LoadingSuggestionsOption {
-  color: var(--color-base-900);
-}
-
-.Layer__BankTransactionCategoryComboBox__CustomGroupHeading {
-  /* style the parent .Layer__ComboBoxGroupHeading of this element */
-}
-:is(.Layer__ComboBoxGroupHeading:has(.Layer__BankTransactionCategoryComboBox__CustomGroupHeading)) {
-  border-bottom: 1px solid var(--border-color);
-  margin-block-end: var(--spacing-3xs);
 }.Layer__ModalOverlay {
   position: fixed;
   z-index: 100;
   inset: 0;
   display: grid;
-  height: var(--visual-viewport-height);
   background: rgba(0, 0, 0, 0.5);
   place-items: center;
 }
@@ -7596,6 +7374,181 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__ModalActions {
   margin-block-start: var(--spacing-3xl);
+}.Layer__ComboBoxContainer {
+  display: grid;
+}
+
+.Layer__ComboBoxControl {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  --block-size: 2.25rem;
+  block-size: var(--block-size);
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--color-base-300);
+  background-color: var(--color-base-0);
+}
+.Layer__ComboBoxControl--focused {
+  border-color: var(--outline-active);
+}
+.Layer__ComboBoxControl--disabled {
+  cursor: not-allowed;
+}
+.Layer__ComboBoxControl--readonly {
+  background-color: var(--bg-muted);
+}
+
+.Layer__ComboBoxContainer > .Layer__ComboBoxControl {
+  /*
+   * This is intentional.
+   *
+   * The "unstyled" variant of react-select still forces a min-height on the control of 38 px.
+   */
+  block-size: var(--block-size);
+  min-block-size: var(--block-size);
+}
+.Layer__ComboBoxContainer > .Layer__ComboBoxControl--focused {
+  /*
+   * This seems like the only workaround when the "unstyled" variant
+   * includes a (malicious) `outline: 0 !important`.
+   *
+   * @see {https://github.com/JedWatson/react-select/blob/2a913698ad3d7759fb8e6bc5dd8a7d839227da2f/packages/react-select/src/components/Control.tsx#L49}
+   */
+  outline: 2px solid var(--outline-default) !important;
+}
+
+.Layer__ComboBoxValueContainer {
+  padding-inline-start: var(--spacing-xs);
+  cursor: text;
+  font-size: var(--input-font-size);
+}
+
+.Layer__ComboBoxIndicatorsContainer {
+  padding-inline-end: var(--spacing-3xs);
+}
+.Layer__ComboBoxIndicatorsContainer--readonly {
+  visibility: hidden;
+}
+
+.Layer__ComboBoxClearIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --size: 1.25rem;
+  block-size: var(--size);
+  inline-size: var(--size);
+  cursor: pointer;
+}
+
+.Layer__ComboBoxLoadingIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --size: 1.25rem;
+  block-size: var(--size);
+  inline-size: var(--size);
+  cursor: default;
+}
+
+.Layer__ComboBoxDropdownIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--size);
+  inline-size: var(--size);
+  cursor: pointer;
+  color: var(--color-base-600);
+  --size: 1.25rem;
+}
+
+.Layer__ComboBoxMenu {
+  overflow: hidden;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  margin-block-start: var(--spacing-2xs);
+  background-color: var(--color-base-0);
+}
+
+.Layer__ComboBoxMenuList {
+  overflow-y: auto;
+}
+.Layer__ComboBoxMenuList .Layer__ComboBoxOption {
+  /*
+   * This is intentionally done indirectly to increase specificity.
+   *
+   * `react-select` explicitly sets 'block'
+   */
+  display: grid;
+  /*
+   * This is intentionally done indirectly to increase specificity.
+   *
+   * `react-select` explicitly sets 'default'
+   */
+  cursor: pointer;
+}
+.Layer__ComboBoxMenuList .Layer__ComboBoxOption--disabled {
+  cursor: not-allowed;
+}
+.Layer__ComboBoxMenuList .Layer__ComboBoxOption--hidden {
+  display: none;
+}
+
+.Layer__ComboBoxGroup {
+  padding-block: var(--spacing-xs);
+}
+.Layer__ComboBoxGroup > .Layer__ComboBoxGroupHeading {
+  padding-block-start: var(--spacing-3xs);
+  padding-block-end: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+.Layer__ComboBoxGroup > div > .Layer__ComboBoxOption {
+  padding-inline: var(--spacing-sm);
+}
+
+.Layer__ComboBoxOption {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-3xs);
+  border: 2px solid transparent;
+}
+.Layer__ComboBoxOption--focused {
+  background-color: var(--color-base-100);
+}
+.Layer__ComboBoxOption .Layer__ComboBoxOptionCheckIcon {
+  visibility: hidden;
+}
+.Layer__ComboBoxOption--selected {
+  background-color: var(--color-base-100);
+}
+.Layer__ComboBoxOption--selected .Layer__ComboBoxOptionCheckIcon {
+  visibility: visible;
+}
+.Layer__ComboBoxOption--disabled {
+  color: var(--color-base-500);
+}
+
+.Layer__ComboBoxNoOptionsMessage {
+  padding-block: var(--spacing-sm);
+}.Layer__MoneySpan[data-positive]::before {
+  content: "$";
+}
+.Layer__MoneySpan[data-negative]::before {
+  content: "-$";
+}
+.Layer__MoneySpan[data-display-plus-sign]::before {
+  content: "+$";
+}.Layer__datetime {
+  display: inline-flex;
+  gap: var(--spacing-md);
+  align-items: center;
+}.Layer__BankTransactionCategoryComboBox__LoadingSuggestionsOption {
+  color: var(--color-base-900);
+}
+
+.Layer__BankTransactionCategoryComboBox__CustomGroupHeading {
+  /* style the parent .Layer__ComboBoxGroupHeading of this element */
+}
+:is(.Layer__ComboBoxGroupHeading:has(.Layer__BankTransactionCategoryComboBox__CustomGroupHeading)) {
+  border-bottom: 1px solid var(--border-color);
+  margin-block-end: var(--spacing-3xs);
 }.Layer__actionable-list {
   padding: 0;
   margin: 0;
@@ -8356,6 +8309,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__MonthPicker__InputGroup {
   inline-size: 12rem;
+}
+.Layer__MonthPicker__InputGroup--mobile {
+  inline-size: 12ch;
 }.Layer__NewToggle {
   box-sizing: border-box;
   position: relative;
@@ -8708,7 +8664,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 @container (max-width: 760px) {
   .Layer__ExpandedBankTransactionRow__Description {
-    width: 95%;
+    width: 100%;
+    padding-inline-end: var(--spacing-md);
   }
 }.Layer__bank-transaction-row__category-hstack {
   max-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.115",
+  "version": "0.1.116-alpha.1",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -25,6 +25,7 @@
     "dev": "vite build --config vite/vite.config.ts --mode esm --watch",
     "prepack": "npm run typecheck && npm run build:clean",
     "lint": "eslint . && stylelint '**/*.{css,scss}'",
+    "lint:fix": "eslint . --fix && stylelint '**/*.{css,scss}' --fix",
     "lint:eslint": "eslint .",
     "lint:stylelint": "stylelint '**/*.{css,scss}'",
     "clear:react": "rm -rf ./node_modules/react && rm -rf ./node_modules/react-dom",