@layerfi/components 0.1.115 → 0.1.116-alpha

package/dist/index.css

@@ -4118,94 +4118,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);
@@ -7092,181 +7004,6 @@ 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;
@@ -7596,6 +7333,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;
@@ -8708,7 +8620,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",
   "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",