prime-ui-kit 0.6.0 → 0.7.2

package/dist/components/index.css

@@ -5469,51 +5469,9 @@
 }
 
 /* src/components/dropdown/Dropdown.module.css */
-.Dropdown_inset2 {
-  --dd-inset-pad-block: var(--prime-sys-spacing-x2);
-  --dd-inset-pad-inline: var(--prime-sys-spacing-x2);
-  --dd-inset-gap: var(--prime-sys-spacing-x3);
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  flex-direction: column;
-  margin: 0;
-  box-sizing: border-box;
-  padding-block: var(--dd-inset-pad-block);
-  padding-inline: var(--dd-inset-pad-inline);
-  gap: var(--dd-inset-gap);
-}
-.Dropdown_inset2[data-inset-padding=none] {
-  --dd-inset-pad-block: 0;
-  --dd-inset-pad-inline: 0;
-}
-.Dropdown_inset2[data-inset-padding=x1] {
-  --dd-inset-pad-block: var(--prime-sys-spacing-x1);
-  --dd-inset-pad-inline: var(--prime-sys-spacing-x1);
-}
-.Dropdown_inset2[data-inset-padding=x2] {
-  --dd-inset-pad-block: var(--prime-sys-spacing-x2);
-  --dd-inset-pad-inline: var(--prime-sys-spacing-x2);
-}
-.Dropdown_inset2[data-inset-padding=x3] {
-  --dd-inset-pad-block: var(--prime-sys-spacing-x3);
-  --dd-inset-pad-inline: var(--prime-sys-spacing-x3);
-}
-.Dropdown_inset2[data-inset-gap=none] {
-  --dd-inset-gap: 0;
-}
-.Dropdown_inset2[data-inset-gap=x2] {
-  --dd-inset-gap: var(--prime-sys-spacing-x2);
-}
-.Dropdown_inset2[data-inset-gap=x3] {
-  --dd-inset-gap: var(--prime-sys-spacing-x3);
-}
-.Dropdown_inset2[data-inset-gap=x4] {
-  --dd-inset-gap: var(--prime-sys-spacing-x4);
-}
 .Dropdown_content2 {
   --dropdown-separator-mix: 40%;
-  --dd-pad: var(--prime-sys-spacing-x2);
+  --dd-pad: var(--prime-sys-spacing-x3);
   --dd-min-w: var(--prime-sys-unit-11rem);
   --dd-item-gap: var(--prime-sys-size-control-m-gap);
   --dd-item-height: var(--prime-sys-size-control-m-height);
@@ -5530,17 +5488,20 @@
   --dd-header-pad-block: var(--prime-sys-spacing-x3);
   --dd-header-desc-font: var(--prime-sys-size-control-s-supportText);
   --dd-separator-stack-pad: var(--prime-sys-spacing-x2);
+  --po-inset-extra: 0px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   position: fixed;
   width: max-content;
   max-width: min(var(--prime-sys-unit-20rem), 100vw);
+  margin: 0;
   background: var(--prime-sys-color-surface-elevated);
   border: none;
   border-radius: var(--prime-sys-shape-radius-l);
   box-shadow: var(--prime-sys-elevation-shadow-surface), var(--prime-sys-elevation-shadow-modal);
-  padding: var(--dd-pad);
+  padding: calc(var(--dd-pad) + var(--po-inset-extra));
   min-width: var(--dd-min-w);
   transform-origin: top center;
 }
@@ -5557,7 +5518,7 @@
   z-index: var(--prime-sys-elevation-zIndex-dropdownInDrawerInModal);
 }
 .Dropdown_content2[data-size=s] {
-  --dd-pad: var(--prime-sys-spacing-x2);
+  --dd-pad: calc((var(--prime-sys-spacing-x2) + var(--prime-sys-spacing-x3)) / 2);
   --dd-min-w: var(--prime-sys-unit-9p5rem);
   --dd-item-gap: var(--prime-sys-size-control-s-gap);
   --dd-item-height: var(--prime-sys-size-control-s-height);
@@ -5574,7 +5535,7 @@
   --dd-header-pad-block: var(--prime-sys-spacing-x3);
 }
 .Dropdown_content2[data-size=l] {
-  --dd-pad: var(--prime-sys-spacing-x3);
+  --dd-pad: var(--prime-sys-spacing-x4);
   --dd-min-w: var(--prime-sys-unit-12p5rem);
   --dd-item-gap: var(--prime-sys-size-control-l-gap);
   --dd-item-height: var(--prime-sys-size-control-l-height);
@@ -5592,7 +5553,7 @@
   --dd-separator-stack-pad: var(--prime-sys-spacing-x3);
 }
 .Dropdown_content2[data-size=xl] {
-  --dd-pad: var(--prime-sys-spacing-x4);
+  --dd-pad: var(--prime-sys-spacing-x5);
   --dd-min-w: var(--prime-sys-unit-14rem);
   --dd-item-gap: var(--prime-sys-size-control-xl-gap);
   --dd-item-height: var(--prime-sys-size-control-xl-height);
@@ -5783,7 +5744,7 @@
   background-color: color-mix(in srgb, var(--prime-sys-color-border-subtle) var(--dropdown-separator-mix), var(--prime-sys-color-surface-elevated));
 }
 .Dropdown_content2 > * + * {
-  margin-top: var(--prime-sys-spacing-x1);
+  margin-top: var(--dd-pad);
 }
 .Dropdown_content2 > .Dropdown_item2 + .Dropdown_item2 {
   margin-top: 0;
@@ -5807,6 +5768,148 @@
   background-color: color-mix(in srgb, var(--prime-sys-color-border-subtle) var(--dropdown-separator-mix), var(--prime-sys-color-surface-raised));
 }
 
+/* src/components/empty-page/EmptyPage.module.css */
+.EmptyPage_root2 {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  text-align: center;
+}
+.EmptyPage_root2[data-layout=fill] {
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-height: 0;
+}
+.EmptyPage_iconWrap2 {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background: var(--prime-sys-color-status-error-background);
+  color: var(--prime-sys-color-status-error-foreground);
+}
+.EmptyPage_iconWrap2 svg {
+  display: block;
+  flex-shrink: 0;
+}
+.EmptyPage_title2 {
+  margin: 0;
+  max-width: min(100%, var(--prime-sys-unit-40rem));
+  font-weight: var(--prime-sys-typography-weight-medium);
+  line-height: 1.25;
+  color: var(--prime-sys-color-content-primary);
+}
+.EmptyPage_description2 {
+  margin: 0;
+  max-width: min(100%, var(--prime-sys-unit-40rem));
+  line-height: 1.45;
+  color: var(--prime-sys-color-content-secondary);
+}
+.EmptyPage_actions2 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+.EmptyPage_root2[data-size=s] {
+  gap: var(--prime-sys-size-control-s-gap);
+  padding-block: var(--prime-sys-spacing-xl);
+  padding-inline: var(--prime-sys-spacing-m);
+}
+.EmptyPage_root2[data-size=s] .EmptyPage_iconWrap2 {
+  width: calc(var(--prime-sys-size-control-s-icon) * 2 + var(--prime-sys-spacing-m));
+  height: calc(var(--prime-sys-size-control-s-icon) * 2 + var(--prime-sys-spacing-m));
+  border-radius: var(--prime-sys-size-control-s-radius);
+}
+.EmptyPage_root2[data-size=s] .EmptyPage_iconWrap2 svg {
+  width: var(--prime-sys-size-control-s-icon);
+  height: var(--prime-sys-size-control-s-icon);
+}
+.EmptyPage_root2[data-size=s] .EmptyPage_title2 {
+  font-size: var(--prime-sys-size-control-s-text);
+}
+.EmptyPage_root2[data-size=s] .EmptyPage_description2 {
+  font-size: var(--prime-sys-size-control-s-supportText);
+}
+.EmptyPage_root2[data-size=s] .EmptyPage_actions2 {
+  gap: var(--prime-sys-size-control-s-gap);
+}
+.EmptyPage_root2[data-size=m] {
+  gap: var(--prime-sys-size-control-m-gap);
+  padding-block: var(--prime-sys-spacing-2xl);
+  padding-inline: var(--prime-sys-spacing-l);
+}
+.EmptyPage_root2[data-size=m] .EmptyPage_iconWrap2 {
+  width: calc(var(--prime-sys-size-control-m-icon) * 2 + var(--prime-sys-spacing-m));
+  height: calc(var(--prime-sys-size-control-m-icon) * 2 + var(--prime-sys-spacing-m));
+  border-radius: var(--prime-sys-size-control-m-radius);
+}
+.EmptyPage_root2[data-size=m] .EmptyPage_iconWrap2 svg {
+  width: var(--prime-sys-size-control-m-icon);
+  height: var(--prime-sys-size-control-m-icon);
+}
+.EmptyPage_root2[data-size=m] .EmptyPage_title2 {
+  font-size: var(--prime-sys-size-control-m-text);
+}
+.EmptyPage_root2[data-size=m] .EmptyPage_description2 {
+  font-size: var(--prime-sys-size-control-m-supportText);
+}
+.EmptyPage_root2[data-size=m] .EmptyPage_actions2 {
+  gap: var(--prime-sys-size-control-m-gap);
+}
+.EmptyPage_root2[data-size=l] {
+  gap: var(--prime-sys-size-control-l-gap);
+  padding-block: var(--prime-sys-spacing-3xl);
+  padding-inline: var(--prime-sys-spacing-xl);
+}
+.EmptyPage_root2[data-size=l] .EmptyPage_iconWrap2 {
+  width: calc(var(--prime-sys-size-control-l-icon) * 2 + var(--prime-sys-spacing-m));
+  height: calc(var(--prime-sys-size-control-l-icon) * 2 + var(--prime-sys-spacing-m));
+  border-radius: var(--prime-sys-size-control-l-radius);
+}
+.EmptyPage_root2[data-size=l] .EmptyPage_iconWrap2 svg {
+  width: var(--prime-sys-size-control-l-icon);
+  height: var(--prime-sys-size-control-l-icon);
+}
+.EmptyPage_root2[data-size=l] .EmptyPage_title2 {
+  font-size: var(--prime-sys-size-control-l-text);
+}
+.EmptyPage_root2[data-size=l] .EmptyPage_description2 {
+  font-size: var(--prime-sys-size-control-l-supportText);
+}
+.EmptyPage_root2[data-size=l] .EmptyPage_actions2 {
+  gap: var(--prime-sys-size-control-l-gap);
+}
+.EmptyPage_root2[data-size=xl] {
+  gap: var(--prime-sys-size-control-xl-gap);
+  padding-block: var(--prime-sys-spacing-4xl);
+  padding-inline: var(--prime-sys-spacing-2xl);
+}
+.EmptyPage_root2[data-size=xl] .EmptyPage_iconWrap2 {
+  width: calc(var(--prime-sys-size-control-xl-icon) * 2 + var(--prime-sys-spacing-l));
+  height: calc(var(--prime-sys-size-control-xl-icon) * 2 + var(--prime-sys-spacing-l));
+  border-radius: var(--prime-sys-size-control-xl-radius);
+}
+.EmptyPage_root2[data-size=xl] .EmptyPage_iconWrap2 svg {
+  width: var(--prime-sys-size-control-xl-icon);
+  height: var(--prime-sys-size-control-xl-icon);
+}
+.EmptyPage_root2[data-size=xl] .EmptyPage_title2 {
+  font-size: var(--prime-sys-size-control-xl-text);
+}
+.EmptyPage_root2[data-size=xl] .EmptyPage_description2 {
+  font-size: var(--prime-sys-size-control-xl-supportText);
+}
+.EmptyPage_root2[data-size=xl] .EmptyPage_actions2 {
+  gap: var(--prime-sys-size-control-xl-gap);
+}
+
 /* src/components/segmented-control/SegmentedControl.module.css */
 .SegmentedControl_root2 {
   isolation: isolate;
@@ -7141,96 +7244,144 @@
 }
 
 /* src/components/popover/Popover.module.css */
-.Popover_content2 {
-  --po-pad: var(--prime-sys-spacing-x3);
-  --po-min-w: var(--prime-sys-unit-12rem);
-  --po-text-size: var(--prime-sys-size-control-m-supportText);
-  --po-inset-pad-block: 0;
-  --po-inset-pad-inline: 0;
-  --po-inset-gap: 0;
+.Popover_popoverScroll2 {
+  --dropdown-separator-mix: 40%;
+  --dd-pad: var(--prime-sys-spacing-x3);
+  --dd-min-w: var(--prime-sys-unit-11rem);
+  --dd-item-gap: var(--prime-sys-size-control-m-gap);
+  --dd-item-height: var(--prime-sys-size-control-m-height);
+  --dd-item-pad-x: var(--prime-sys-size-control-m-buttonPaddingX);
+  --dd-item-radius: var(--prime-sys-size-control-m-radius);
+  --dd-item-text: var(--prime-sys-size-control-m-text);
+  --dd-icon-size: var(--prime-sys-size-control-m-icon);
+  --dd-group-label-font: var(--prime-sys-size-control-s-supportText);
+  --dd-group-label-pt: var(--prime-sys-spacing-x2);
+  --dd-group-label-px: var(--prime-sys-spacing-x3);
+  --dd-group-label-pb: var(--prime-sys-spacing-x1);
+  --dd-header-gap: var(--prime-sys-spacing-x3);
+  --dd-header-pad-inline: var(--prime-sys-spacing-x2);
+  --dd-header-pad-block: var(--prime-sys-spacing-x3);
+  --dd-header-desc-font: var(--prime-sys-size-control-s-supportText);
+  --dd-separator-stack-pad: var(--prime-sys-spacing-x2);
+  --po-inset-extra: 0px;
+  --po-inset-gap: var(--dd-pad);
   display: flex;
   flex-direction: column;
   align-items: stretch;
   position: fixed;
   width: max-content;
-  max-width: min(var(--prime-sys-unit-24rem), 100vw);
+  max-width: min(var(--prime-sys-unit-20rem), 100vw);
   background: var(--prime-sys-color-surface-elevated);
   border: none;
   border-radius: var(--prime-sys-shape-radius-l);
   box-shadow: var(--prime-sys-elevation-shadow-surface), var(--prime-sys-elevation-shadow-modal);
+  padding: calc(var(--dd-pad) + var(--po-inset-extra));
+  min-width: var(--dd-min-w);
   box-sizing: border-box;
   margin: 0;
-  padding-block: calc(var(--po-pad) + var(--po-inset-pad-block));
-  padding-inline: calc(var(--po-pad) + var(--po-inset-pad-inline));
-  gap: var(--po-inset-gap);
-  min-width: var(--po-min-w);
   transform-origin: top center;
-  font-size: var(--po-text-size);
-  line-height: 1.35;
-  color: var(--prime-sys-color-content-secondary);
+  gap: var(--po-inset-gap);
+  font-size: var(--dd-item-text);
+  line-height: 1.25;
+  color: var(--prime-sys-color-content-primary);
 }
-.Popover_content2[data-inset-padding=none] {
-  --po-inset-pad-block: 0;
-  --po-inset-pad-inline: 0;
+.Popover_popoverScroll2[data-overlay-portal-layer=page] {
+  z-index: var(--prime-sys-elevation-zIndex-popover);
 }
-.Popover_content2[data-inset-padding=x1] {
-  --po-inset-pad-block: var(--prime-sys-spacing-x1);
-  --po-inset-pad-inline: var(--prime-sys-spacing-x1);
+.Popover_popoverScroll2[data-overlay-portal-layer=drawer] {
+  z-index: var(--prime-sys-elevation-zIndex-popoverInDrawer);
 }
-.Popover_content2[data-inset-padding=x2] {
-  --po-inset-pad-block: var(--prime-sys-spacing-x2);
-  --po-inset-pad-inline: var(--prime-sys-spacing-x2);
+.Popover_popoverScroll2[data-overlay-portal-layer=modal] {
+  z-index: var(--prime-sys-elevation-zIndex-popoverInModal);
 }
-.Popover_content2[data-inset-padding=x3] {
-  --po-inset-pad-block: var(--prime-sys-spacing-x3);
-  --po-inset-pad-inline: var(--prime-sys-spacing-x3);
+.Popover_popoverScroll2[data-overlay-portal-layer=drawerInModal] {
+  z-index: var(--prime-sys-elevation-zIndex-popoverInDrawerInModal);
 }
-.Popover_content2[data-inset-gap=none] {
-  --po-inset-gap: 0;
+.Popover_popoverScroll2[data-size=s] {
+  --dd-pad: calc((var(--prime-sys-spacing-x2) + var(--prime-sys-spacing-x3)) / 2);
+  --dd-min-w: var(--prime-sys-unit-9p5rem);
+  --dd-item-gap: var(--prime-sys-size-control-s-gap);
+  --dd-item-height: var(--prime-sys-size-control-s-height);
+  --dd-item-pad-x: var(--prime-sys-size-control-s-buttonPaddingX);
+  --dd-item-radius: var(--prime-sys-size-control-s-radius);
+  --dd-item-text: var(--prime-sys-size-control-s-text);
+  --dd-icon-size: var(--prime-sys-size-control-s-icon);
+  --dd-group-label-font: var(--prime-sys-size-control-s-supportText);
+  --dd-group-label-pt: var(--prime-sys-spacing-x1);
+  --dd-group-label-px: var(--prime-sys-spacing-x2);
+  --dd-group-label-pb: var(--prime-sys-spacing-x1);
+  --dd-header-gap: var(--prime-sys-spacing-x2);
+  --dd-header-pad-inline: var(--prime-sys-spacing-x2);
+  --dd-header-pad-block: var(--prime-sys-spacing-x3);
 }
-.Popover_content2[data-inset-gap=x2] {
-  --po-inset-gap: var(--prime-sys-spacing-x2);
+.Popover_popoverScroll2[data-size=l] {
+  --dd-pad: var(--prime-sys-spacing-x4);
+  --dd-min-w: var(--prime-sys-unit-12p5rem);
+  --dd-item-gap: var(--prime-sys-size-control-l-gap);
+  --dd-item-height: var(--prime-sys-size-control-l-height);
+  --dd-item-pad-x: var(--prime-sys-size-control-l-buttonPaddingX);
+  --dd-item-radius: var(--prime-sys-size-control-l-radius);
+  --dd-item-text: var(--prime-sys-size-control-l-text);
+  --dd-icon-size: var(--prime-sys-size-control-l-icon);
+  --dd-group-label-font: var(--prime-sys-size-control-l-supportText);
+  --dd-group-label-pt: var(--prime-sys-spacing-x2);
+  --dd-group-label-px: var(--prime-sys-spacing-x4);
+  --dd-group-label-pb: var(--prime-sys-spacing-x2);
+  --dd-header-desc-font: var(--prime-sys-size-control-m-supportText);
+  --dd-header-pad-inline: var(--prime-sys-spacing-x3);
+  --dd-header-pad-block: var(--prime-sys-spacing-x4);
+  --dd-separator-stack-pad: var(--prime-sys-spacing-x3);
 }
-.Popover_content2[data-inset-gap=x3] {
-  --po-inset-gap: var(--prime-sys-spacing-x3);
+.Popover_popoverScroll2[data-size=xl] {
+  --dd-pad: var(--prime-sys-spacing-x5);
+  --dd-min-w: var(--prime-sys-unit-14rem);
+  --dd-item-gap: var(--prime-sys-size-control-xl-gap);
+  --dd-item-height: var(--prime-sys-size-control-xl-height);
+  --dd-item-pad-x: var(--prime-sys-size-control-xl-buttonPaddingX);
+  --dd-item-radius: var(--prime-sys-size-control-xl-radius);
+  --dd-item-text: var(--prime-sys-size-control-xl-text);
+  --dd-icon-size: var(--prime-sys-size-control-xl-icon);
+  --dd-group-label-font: var(--prime-sys-size-control-xl-supportText);
+  --dd-group-label-pt: var(--prime-sys-spacing-x3);
+  --dd-group-label-px: var(--prime-sys-spacing-x4);
+  --dd-group-label-pb: var(--prime-sys-spacing-x2);
+  --dd-header-gap: var(--prime-sys-spacing-x3);
+  --dd-header-desc-font: var(--prime-sys-size-control-xl-supportText);
+  --dd-header-pad-inline: var(--prime-sys-spacing-x3);
+  --dd-header-pad-block: var(--prime-sys-spacing-x4);
+  --dd-separator-stack-pad: var(--prime-sys-spacing-x3);
 }
-.Popover_content2[data-inset-gap=x4] {
-  --po-inset-gap: var(--prime-sys-spacing-x4);
+.Popover_popoverScroll2[data-inset-padding=none] {
+  --po-inset-extra: 0px;
 }
-.Popover_content2[data-overlay-portal-layer=page] {
-  z-index: var(--prime-sys-elevation-zIndex-popover);
+.Popover_popoverScroll2[data-inset-padding=x1] {
+  --po-inset-extra: var(--prime-sys-spacing-x1);
 }
-.Popover_content2[data-overlay-portal-layer=drawer] {
-  z-index: var(--prime-sys-elevation-zIndex-popoverInDrawer);
+.Popover_popoverScroll2[data-inset-padding=x2] {
+  --po-inset-extra: var(--prime-sys-spacing-x2);
 }
-.Popover_content2[data-overlay-portal-layer=modal] {
-  z-index: var(--prime-sys-elevation-zIndex-popoverInModal);
+.Popover_popoverScroll2[data-inset-padding=x3] {
+  --po-inset-extra: var(--prime-sys-spacing-x3);
 }
-.Popover_content2[data-overlay-portal-layer=drawerInModal] {
-  z-index: var(--prime-sys-elevation-zIndex-popoverInDrawerInModal);
+.Popover_popoverScroll2[data-inset-gap=none] {
+  --po-inset-gap: 0;
 }
-.Popover_content2[data-size=s] {
-  --po-pad: var(--prime-sys-spacing-x2);
-  --po-min-w: var(--prime-sys-unit-10rem);
-  --po-text-size: var(--prime-sys-size-control-s-supportText);
+.Popover_popoverScroll2[data-inset-gap=x2] {
+  --po-inset-gap: var(--prime-sys-spacing-x2);
 }
-.Popover_content2[data-size=l] {
-  --po-pad: var(--prime-sys-spacing-x3);
-  --po-min-w: var(--prime-sys-unit-14rem);
-  --po-text-size: var(--prime-sys-size-control-l-supportText);
+.Popover_popoverScroll2[data-inset-gap=x3] {
+  --po-inset-gap: var(--prime-sys-spacing-x3);
 }
-.Popover_content2[data-size=xl] {
-  --po-pad: var(--prime-sys-spacing-x4);
-  --po-min-w: var(--prime-sys-unit-16rem);
-  --po-text-size: var(--prime-sys-size-control-xl-supportText);
+.Popover_popoverScroll2[data-inset-gap=x4] {
+  --po-inset-gap: var(--prime-sys-spacing-x4);
 }
-[data-theme=dark] .Popover_content2 {
+[data-theme=dark] .Popover_popoverScroll2 {
   background: var(--prime-sys-color-surface-raised);
 }
-.Popover_content2[data-side=bottom] {
+.Popover_popoverScroll2[data-side=bottom] {
   animation: Popover_popoverInBottom2 var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
 }
-.Popover_content2[data-side=top] {
+.Popover_popoverScroll2[data-side=top] {
   transform-origin: bottom center;
   animation: Popover_popoverInTop2 var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
 }
@@ -7255,8 +7406,8 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .Popover_content2[data-side=bottom],
-  .Popover_content2[data-side=top] {
+  .Popover_popoverScroll2[data-side=bottom],
+  .Popover_popoverScroll2[data-side=top] {
     animation: none;
   }
 }