@layerfi/components 0.1.99-alpha-1 → 0.1.99-alpha.3

package/dist/index.css

@@ -507,6 +507,9 @@
 .Layer__btn.Layer__btn--with-primary-icon .Layer__btn-text {
   padding: 0 var(--spacing-md);
 }
+.Layer__btn.Layer__btn--with-primary-icon .Layer__btn-content {
+  column-gap: 0;
+}
 .Layer__btn .Layer__btn-content {
   display: flex;
   justify-content: center;
@@ -516,9 +519,6 @@
 .Layer__btn .Layer__btn-content.Layer__justify--space-between {
   justify-content: space-between;
 }
-.Layer__btn.Layer__btn--with-primary-icon .Layer__btn-content {
-  column-gap: 0;
-}
 .Layer__btn .Layer__btn-icon {
   color: var(--btn-color-icon);
   background: transparent;
@@ -537,11 +537,6 @@
   width: 32px;
   height: 32px;
 }
-.Layer__btn .Layer__btn-icon.Layer__btn-icon--primary {
-  background: var(--btn-bg-color-icon);
-  width: 32px;
-  height: 32px;
-}
 .Layer__btn:hover {
   box-shadow: 0 0 0 1px var(--color-base-300), 0 1px 2px 0 var(--base-transparent-6);
 }
@@ -602,6 +597,9 @@
 .Layer__btn--primary.Layer__btn--active:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-inactive {
   display: none;
 }
+.Layer__btn--primary > .Layer__btn-content > .Layer__btn-text {
+  color: var(--btn-color-primary);
+}
 .Layer__btn--primary:not(.Layer__btn--with-primary-icon) .Layer__btn-icon {
   color: var(--btn-color-primary);
 }
@@ -685,14 +683,6 @@
 .Layer__icon-btn.Layer__icon-btn--active:hover {
   background-color: var(--color-base-300);
 }
-.Layer__icon-btn.Layer__icon-btn--border {
-  box-shadow:
-    0 4px 5px 0 var(--base-transparent-1),
-    0 3px 4px 0 var(--base-transparent-2),
-    0 2px 3px 0 var(--base-transparent-4),
-    0 1px 1px 0 var(--base-transparent-4),
-    0 0 0 1px var(--color-base-300);
-}
 .Layer__text-btn {
   outline: none;
   box-shadow: none;
@@ -718,10 +708,6 @@
 }
 .Layer__retry-btn.Layer__btn--processing .Layer__btn-icon {
   animation: rotating-ccw 2s linear infinite;
-  animation: rotating-ccw 2s linear infinite;
-  animation: rotating-ccw 2s linear infinite;
-  animation: rotating-ccw 2s linear infinite;
-  animation: rotating-ccw 2s linear infinite;
 }
 .Layer__unsaved-info {
   color: var(--color-danger);
@@ -753,7 +739,7 @@
   text-decoration: none;
 }
 .Layer__switch__container .Layer__switch__button:focus,
-.Layer__switch__container .Layer__switch__button :active {
+.Layer__switch__container .Layer__switch__button:active {
   box-shadow: 0 0 0 1px var(--color-base-0), 0 0 0 3px var(--color-base-0);
   outline: var(--color-base-0);
 }
@@ -3208,16 +3194,16 @@
   flex-direction: column;
 }
 .Layer__input-group.Layer__input-group--inline {
+  flex: 1;
   flex-direction: row;
+  gap: var(--spacing-sm);
   align-items: center;
   width: 100%;
-  flex: 1;
-  gap: var(--spacing-sm);
 }
 .Layer__input-group.Layer__input-group--inline label {
-  width: 33%;
-  flex: 1 1 auto;
   display: flex;
+  flex: 1 1 auto;
+  width: 33%;
 }
 .Layer__input-group.Layer__input-group--inline input {
   flex: 3 3 auto;
@@ -3237,19 +3223,20 @@
   text-align: right;
 }
 .Layer__textarea {
-  width: 100%;
-  resize: none;
   box-sizing: border-box;
-  box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
-  border: 1px solid var(--border-color);
+  width: 100%;
+  min-height: 100px;
+  padding: var(--spacing-xs);
   border-radius: var(--input-border-radius);
+  border: 1px solid var(--border-color);
   border-width: 0;
-  min-height: 100px;
+  box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
   margin: 1px;
-  padding: var(--spacing-xs);
-  font-family: var(--font-family);
+  background-color: var(--color-base-0);
   font-size: var(--input-font-size);
   line-height: 140%;
+  font-family: var(--font-family);
+  resize: none;
 }
 .Layer__textarea.Layer__textarea--error {
   box-shadow: 0 0 0 1px var(--color-base-300), 0 0 0 2px var(--color-danger);
@@ -3265,17 +3252,17 @@
   outline: none;
 }
 .Layer__input {
-  padding: 8px;
   box-sizing: border-box;
   position: relative;
-  border: 1px solid var(--border-color);
+  padding: 8px;
   border-radius: var(--input-border-radius);
+  border: 1px solid var(--border-color);
   border-width: 0;
   box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
   margin: 1px;
-  font-family: var(--font-family);
   font-size: var(--input-font-size);
   line-height: 140%;
+  font-family: var(--font-family);
 }
 .Layer__input.Layer__input--error {
   box-shadow: 0 0 0 1px var(--color-base-300), 0 0 0 2px var(--color-danger);
@@ -3294,36 +3281,36 @@
   padding-left: 60px;
 }
 .Layer__input-left-text {
+  box-sizing: border-box;
   position: absolute;
+  top: 0;
+  left: 0;
   display: flex;
   align-items: center;
   height: 100%;
-  left: 0;
-  top: 0;
   padding: var(--spacing-xs);
   padding-right: var(--spacing-sm);
-  box-sizing: border-box;
   border-right: 1px solid var(--input-border-color);
-  color: var(--color-base-700);
   font-size: var(--text-sm);
+  color: var(--color-base-700);
 }
 .Layer__input-tooltip {
-  flex: 0;
   position: relative;
+  flex: 0;
 }
 .Layer__toggle {
+  box-sizing: border-box;
+  position: relative;
   display: flex;
-  width: max-content;
   align-items: center;
-  box-sizing: border-box;
-  border-radius: 52px;
-  padding: 2px;
+  width: max-content;
   height: 38px;
-  background: var(--color-base-100);
+  padding: 2px;
+  border-radius: 52px;
   box-shadow: 0 0 0 1px var(--color-base-300);
   margin: 1px;
+  background: var(--color-base-100);
   cursor: pointer;
-  position: relative;
   isolation: isolate;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -3331,8 +3318,8 @@
 }
 .Layer__toggle .Layer__toggle-option-content {
   display: flex;
-  align-items: center;
   gap: var(--spacing-xs);
+  align-items: center;
 }
 .Layer__toggle-option__icon {
   line-height: 11px;
@@ -3358,8 +3345,8 @@
 }
 .Layer__toggle-option {
   position: relative;
-  cursor: pointer;
   z-index: 2;
+  cursor: pointer;
 }
 .Layer__toggle-option input {
   position: absolute;
@@ -3368,15 +3355,15 @@
 }
 .Layer__toggle-option input + span {
   box-sizing: border-box;
-  padding: 8px 16px;
+  justify-content: center;
   height: 36px;
+  padding: 8px 16px;
   border-radius: 52px;
-  color: var(--text-color-secondary);
-  font-family: var(--font-family);
-  font-size: var(--btn-font-size);
   cursor: pointer;
+  font-size: var(--btn-font-size);
+  font-family: var(--font-family);
+  color: var(--text-color-secondary);
   transition: color var(--transition-speed) ease-in-out, background-color 150ms ease-in-out;
-  justify-content: center;
 }
 .Layer__toggle-option input + span:hover {
   color: var(--text-color-primary);
@@ -3400,22 +3387,22 @@
   border-radius: 6px;
 }
 .Layer__toggle__thumb {
+  box-sizing: border-box;
   position: absolute;
-  width: 100px;
-  left: 0;
-  top: 1px;
   z-index: 1;
-  box-sizing: border-box;
-  padding: 8px 16px;
+  top: 1px;
+  left: 0;
+  width: 100px;
   height: 36px;
+  padding: 8px 16px;
   border-radius: 52px;
-  background: var(--color-white);
   box-shadow:
     0 0 0 1px var(--color-base-300),
     0 1px 1px 0 rgba(0, 0, 0, 0.04),
     0 2px 3px 0 rgba(0, 0, 0, 0.04),
     0 3px 4px 0 rgba(0, 0, 0, 0.02),
     0 4px 5px 0 rgba(0, 0, 0, 0.01);
+  background: var(--color-white);
 }
 .Layer__toggle.Layer__toggle--small .Layer__toggle__thumb {
   height: 34px;
@@ -3425,9 +3412,11 @@
   transition: left 150ms ease, width 150ms ease;
 }
 .Layer__select {
+  width: 100%;
   border-width: 0;
-  font-family: var(--font-family);
   font-size: var(--input-font-size);
+  line-height: 140%;
+  font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
@@ -3435,15 +3424,13 @@
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  line-height: 140%;
-  width: 100%;
 }
 .Layer__select .Layer__select__control {
-  border-width: 0;
+  min-height: 36px;
   border-radius: var(--input-border-radius);
+  border-width: 0;
   box-shadow: 0 0 0 1px var(--color-base-300);
   margin: 1px;
-  min-height: 36px;
 }
 .Layer__select .Layer__select__control--is-focused {
   box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08), 0 0 0 1px var(--color-base-700);
@@ -3458,17 +3445,17 @@
 }
 .Layer__select .Layer__select__multi-value .Layer__select__multi-value__remove:hover {
   background: #f3b9b9;
-  color: var(--color-danger);
   cursor: pointer;
+  color: var(--color-danger);
 }
 .Layer__select .Layer__select__multi-all-placeholder-badge {
+  box-sizing: border-box;
+  height: 24px;
+  padding: var(--spacing-2xs) var(--spacing-sm);
   border-radius: var(--border-radius-3xs);
   background-color: var(--color-base-100);
-  color: var(--color-base-700);
-  padding: var(--spacing-2xs) var(--spacing-sm);
   line-height: 120%;
-  height: 24px;
-  box-sizing: border-box;
+  color: var(--color-base-700);
 }
 .Layer__select .Layer__select__menu-notice {
   white-space: nowrap;
@@ -3481,9 +3468,11 @@
   padding: 7px;
 }
 .Layer__select .Layer__select__placeholder {
-  color: var(--color-base-500);
+  overflow: hidden;
+  max-width: 100%;
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
+  color: var(--color-base-500);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -3492,32 +3481,30 @@
     "ss03" on;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: 100%;
-  overflow: hidden;
 }
 .Layer__select .Layer__select__option-label {
   display: flex;
-  align-items: center;
   gap: var(--spacing-2xs);
+  align-items: center;
 }
 .Layer__select__menu-portal {
-  font-family: var(--font-family);
   font-size: var(--input-font-size);
   line-height: 140%;
+  font-family: var(--font-family);
 }
 .Layer__select__menu-portal .Layer__select__group-heading {
-  color: var(--color-base-500);
-  font-size: var(--text-xs);
   padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--text-xs);
+  color: var(--color-base-500);
 }
 .Layer__select__menu-portal .Layer__select__option {
-  font-family: var(--font-family);
+  padding: var(--spacing-xs) var(--spacing-md);
+  background: var(--color-white);
+  cursor: pointer;
   font-size: var(--text-md);
+  font-family: var(--font-family);
   color: var(--color-base-900);
-  cursor: pointer;
   transition: all 200ms ease-out;
-  background: var(--color-white);
-  padding: var(--spacing-xs) var(--spacing-md);
 }
 .Layer__select__menu-portal .Layer__select__option.Layer__select__option--is-selected {
   color: var(--text-color-primary);
@@ -3529,38 +3516,38 @@
 .Layer__select__menu-portal .Layer__select__option:active,
 .Layer__select__menu-portal .Layer__select__option:focus-visible,
 .Layer__select__menu-portal .Layer__select__option:focus-within {
-  color: var(--text-color-primary);
   background: var(--color-base-100);
+  color: var(--text-color-primary);
 }
 .Layer__select__menu-portal .Layer__select__menu-notice {
-  font-family: var(--font-family);
   font-size: 12px;
+  font-family: var(--font-family);
   color: #999;
 }
 .Layer__select__menu-portal .Layer__select__option-menu-content {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 .Layer__select__menu-portal .Layer__select__option-menu-content .Layer__select__option-menu--name {
   display: flex;
-  align-items: center;
   gap: var(--spacing-2xs);
+  align-items: center;
 }
 .Layer__select__menu-portal .Layer__select__option-menu-content-check {
   margin-top: 2px;
 }
 .Layer__select__menu-portal .Layer__select__group-heading--main {
-  font-size: var(--text-xs);
-  color: var(--color-base-700);
   padding: var(--spacing-xs) var(--spacing-md);
   border-bottom: 1px solid var(--color-base-200);
-}
-.Layer__select__menu-portal .Layer__select__option--separator {
   font-size: var(--text-xs);
   color: var(--color-base-700);
+}
+.Layer__select__menu-portal .Layer__select__option--separator {
   padding: var(--spacing-xs);
   padding-top: var(--spacing-md);
+  font-size: var(--text-xs);
+  color: var(--color-base-700);
 }
 .Layer__select__menu-portal .Layer__select__option--hidden {
   display: none;
@@ -3572,8 +3559,8 @@
 }
 .Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__main-row {
   display: flex;
-  gap: var(--spacing-3xs);
   flex-direction: column;
+  gap: var(--spacing-3xs);
 }
 .Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__date {
   font-size: var(--text-sm);
@@ -3589,50 +3576,50 @@
 }
 .Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__amount {
   font-size: var(--text-sm);
-  color: var(--color-base-900);
   font-weight: var(--font-weight-bold);
+  color: var(--color-base-900);
 }
 .Layer__select__menu.Layer__select__menu--lg {
   width: calc(100% + 60px);
   margin-left: -30px;
 }
 .Layer__category-menu.Layer__category-menu--full {
+  flex: 1;
   width: 100%;
   max-width: 100%;
-  flex: 1;
 }
 .Layer__category-menu__drawer-btn {
+  box-sizing: border-box;
+  position: relative;
   display: flex;
   flex: 1;
+  align-items: center;
   width: 100%;
-  color: var(--color-base-500);
+  min-height: 36px;
   padding: 8px;
-  box-sizing: border-box;
-  position: relative;
-  border: 1px solid var(--border-color);
   border-radius: var(--input-border-radius);
+  border: 1px solid var(--border-color);
   border-width: 0;
   box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
   margin: 1px;
-  font-family: var(--font-family);
-  font-size: var(--input-font-size);
-  line-height: 140%;
   background-color: var(--color-base-0);
-  min-height: 36px;
-  align-items: center;
   cursor: pointer;
+  font-size: var(--input-font-size);
+  line-height: 140%;
+  font-family: var(--font-family);
+  color: var(--color-base-500);
 }
 .Layer__category-menu__drawer-btn:hover {
-  color: var(--text-color-primary);
   background-color: var(--color-base-50);
+  color: var(--text-color-primary);
 }
 .Layer__category-menu__drawer-btn.Layer__category-menu__drawer-btn--selected {
   color: var(--text-color-primary);
 }
 .Layer__category-menu__drawer-btn .Layer__category-menu__drawer-btn__arrow {
   position: absolute;
-  right: 12px;
   top: 12px;
+  right: 12px;
 }
 @media screen and (width <= 400px) {
   .Layer__select__menu-portal .Layer__select__option {
@@ -3640,29 +3627,29 @@
   }
 }
 .Layer__profit-and-loss-date-picker {
-  width: 210px;
-  font-size: 14px;
-  padding: 0.25rem;
-  border: 1px solid var(--input-border-color);
-  border-radius: var(--input-border-radius);
-  overflow: hidden;
   position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  z-index: 1;
+  overflow: hidden;
+  width: 210px;
+  padding: 0.25rem;
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--input-border-color);
+  font-size: 14px;
 }
 .Layer__profit-and-loss-date-picker__button {
-  padding: 0.25rem;
+  position: relative;
+  z-index: 3;
   display: flex;
-  justify-content: center;
   align-items: center;
-  text-align: center;
-  background-color: var(--color-base-0);
-  border: 0;
+  justify-content: center;
+  padding: 0.25rem;
   border-radius: var(--input-border-radius);
-  z-index: 3;
-  position: relative;
+  border: 0;
+  background-color: var(--color-base-0);
+  text-align: center;
 }
 .Layer__profit-and-loss-date-picker__button:active {
   background-color: var(--color-base-0);
@@ -3671,45 +3658,45 @@
   stroke: var(--text-color);
 }
 .Layer__profit-and-loss-date-picker__label {
-  flex: 1;
-  font-size: 14px;
+  position: relative;
   display: flex;
-  justify-content: flex-start;
+  flex: 1;
   align-items: center;
-  text-align: center;
-  padding: 0 var(--spacing-xs);
-  transition: opacity 0.7s ease-in-out, transform 0.4s ease-in-out;
+  justify-content: flex-start;
   width: 33%;
-  position: relative;
+  padding: 0 var(--spacing-xs);
   padding-left: 20px;
+  font-size: 14px;
+  text-align: center;
+  transition: opacity 0.7s ease-in-out, transform 0.4s ease-in-out;
 }
 .Layer__profit-and-loss-date-picker__labels-container {
+  position: absolute;
   display: flex;
   width: 660px;
-  position: absolute;
 }
 .Layer__profit-and-loss-date-picker__effect-blur {
-  width: 120px;
-  height: 100%;
   position: absolute;
+  z-index: 2;
   right: -10px;
   bottom: 1px;
+  width: 120px;
+  height: 100%;
   background:
     linear-gradient(
       -90deg,
       #fff 50%,
       rgba(255, 255, 255, 0) 100%);
-  z-index: 2;
 }
 .Layer__input-with-badge {
+  position: relative;
   display: flex;
   align-items: center;
-  position: relative;
 }
 .Layer__input-with-badge .Layer__badge {
   position: absolute;
-  right: 8px;
   z-index: 1;
+  right: 8px;
 }
 .Layer__compare__options .Layer__select {
   width: max-content;
@@ -3727,8 +3714,8 @@
   .Layer__Portal .Layer__textarea,
   .Layer__Portal .Layer__select__control,
   .Layer__Portal .Layer__input {
-    font-size: 16px;
     min-height: 36px;
+    font-size: 16px;
   }
   .Layer__view .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control,
   .Layer__component .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control,
@@ -10037,7 +10024,7 @@ tbody .Layer__table__empty-row:first-child {
   align-items: flex-start;
   padding: var(--spacing-xl);
   padding-bottom: var(--spacing-lg);
-  box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
+  box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
 }
 .Layer__profit-and-loss-detailed-charts__header--tablet button.Layer__btn.Layer__btn--icon-only,
 .Layer__profit-and-loss-detailed-charts__header button.Layer__btn.Layer__btn--icon-only {
@@ -10116,7 +10103,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   font-size: 14px;
 }
 .Layer__profit-and-loss-detailed-charts .filters {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   margin: 0 var(--spacing-md);
   padding: var(--spacing-2xs) var(--spacing-xs);
@@ -10238,7 +10226,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   background-image:
     repeating-linear-gradient(
       -45deg,
-      var(--color-base-200) 0px,
+      var(--color-base-200) 0,
       var(--color-base-200) 2px,
       var(--color-base-500) 2px,
       var(--color-base-500) 3.5px,
@@ -10282,10 +10270,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .header--tablet {
   display: none;
 }
-.Layer__profit-and-loss-detailed-charts .chart-field {
-  display: flex;
-  flex-direction: column;
-}
 @container (max-width: 1023px) {
   .Layer__profit-and-loss-detailed-charts {
     width: 100%;
@@ -10299,6 +10283,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     justify-content: space-between;
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-field {
+    display: flex;
+    flex-direction: column;
     max-width: 300px;
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-container {