@layerfi/components 0.1.133 → 0.1.134-alpha.1

package/dist/index.css

@@ -5650,7 +5650,7 @@ tbody .Layer__table__empty-row:first-child {
   visibility: hidden;
 }
 .Layer__ComboBoxOption--selected {
-  background-color: var(--color-base-100);
+  background-color: var(--color-base-300);
 }
 .Layer__ComboBoxOption--selected .Layer__ComboBoxOptionCheckIcon {
   visibility: visible;
@@ -9362,6 +9362,19 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
   min-width: 15rem;
   max-width: 24rem;
+}
+.Layer__UnifiedReports__HeaderButtons--mobile {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+@container unified-reports (max-width: 500px) {
+  .Layer__UnifiedReports__HeaderButtons {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
 }.Layer__UI__Table__UnifiedReports {
   width: max-content;
   min-width: 100%;
@@ -9374,26 +9387,47 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 16rem;
 }.Layer__YearPicker {
   inline-size: 8rem;
-}.Layer__UnifiedReports__AdditionalControls {
-  display: grid;
-  gap: var(--spacing-xs);
+}.Layer__UnifiedReports__ReportingBasisControl__Container {
+  inline-size: 12rem;
+  max-inline-size: 12rem;
+}.Layer__UnifiedReports__TagControl__Container {
+  inline-size: 16rem;
 }
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] {
-  grid-template-columns: 1fr;
+.Layer__UnifiedReports__TagControl__Container .Layer__ComboBoxControl {
+  min-inline-size: 0;
+}
+.Layer__UnifiedReports__TagControl__Container .Layer__ComboBoxMultiValue {
+  flex: 1 1 auto;
+}.Layer__UnifiedReports__ControlsContainer {
+  container: unified-report-controls/inline-size;
 }
-.Layer__UnifiedReports__AdditionalControls[data-variant=medium] {
-  grid-template-columns: repeat(2, 1fr);
+
+.Layer__UnifiedReports__AdditionalControls {
+  display: grid;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  gap: var(--spacing-xs);
 }
-.Layer__UnifiedReports__AdditionalControls[data-variant=large] {
-  grid-template-columns: repeat(3, 1fr);
+
+@container unified-report-controls (max-width: 1200px) {
+  .Layer__UnifiedReports__Controls.Layer__Stack[data-direction=row] {
+    flex-direction: column;
+  }
+  .Layer__UnifiedReports__AdditionalControls {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-flow: row;
+  }
+  .Layer__UnifiedReports__AdditionalControls > *,
+  .Layer__UnifiedReports__AdditionalControls .Layer__DateGroupByComboBox__Container,
+  .Layer__UnifiedReports__AdditionalControls .Layer__YearPicker {
+    inline-size: 100%;
+    max-inline-size: none;
+  }
 }
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] > *,
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container,
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] .Layer__YearPicker, .Layer__UnifiedReports__AdditionalControls[data-variant=medium] > *,
-.Layer__UnifiedReports__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container,
-.Layer__UnifiedReports__AdditionalControls[data-variant=medium] .Layer__YearPicker {
-  inline-size: 100%;
-  max-inline-size: none;
+@container unified-report-controls (max-width: 560px) {
+  .Layer__UnifiedReports__AdditionalControls {
+    grid-template-columns: 1fr;
+  }
 }.Layer__UnifiedReports__BaseHeader {
   border-bottom: 1px solid var(--border-color);
 }.Layer__UI__Link {
@@ -9455,6 +9489,7 @@ tbody .Layer__table__empty-row:first-child {
 }.Layer__UnifiedReports__DetailHeader {
   border-bottom: 1px solid var(--border-color);
 }.Layer__view.Layer__UnifiedReports {
+  container: unified-reports/inline-size;
   overflow: hidden;
   max-height: 100vh;
   min-width: clamp(23rem, 100%, 1406px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.133",
+  "version": "0.1.134-alpha.1",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",