cetec-design-system 4.9.0-0 → 4.10.0-0

package/dist/index.js

@@ -974,7 +974,7 @@ const spinnerVariantKeys = [
   "inverse",
   "centered"
 ];
-const getVariantProps$z = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const getVariantProps$A = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
 const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   __recipe__: false,
   __name__: "spinner",
@@ -999,7 +999,7 @@ const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, spinnerVariantKeys);
   },
-  getVariantProps: getVariantProps$z
+  getVariantProps: getVariantProps$A
 });
 const tagFn = /* @__PURE__ */ createRecipe("tag", {
   "variant": "default",
@@ -1667,7 +1667,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps$y = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$z = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1678,7 +1678,7 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: getVariantProps$y
+  getVariantProps: getVariantProps$z
 });
 const alertDefaultVariants = {
   "tone": "info"
@@ -1721,7 +1721,7 @@ const alertFn = memo((props = {}) => {
 const alertVariantKeys = [
   "tone"
 ];
-const getVariantProps$x = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
+const getVariantProps$y = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
 const alert = /* @__PURE__ */ Object.assign(alertFn, {
   __recipe__: false,
   __name__: "alert",
@@ -1740,7 +1740,7 @@ const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps$1(props, alertVariantKeys);
   },
-  getVariantProps: getVariantProps$x
+  getVariantProps: getVariantProps$y
 });
 const autocompleteDefaultVariants = {
   "size": "md",
@@ -1797,7 +1797,7 @@ const autocompleteVariantKeys = [
   "layer",
   "size"
 ];
-const getVariantProps$w = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
+const getVariantProps$x = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
 const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   __recipe__: false,
   __name__: "autocomplete",
@@ -1819,7 +1819,7 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, autocompleteVariantKeys);
   },
-  getVariantProps: getVariantProps$w
+  getVariantProps: getVariantProps$x
 });
 const avatarDefaultVariants = {
   "size": "md",
@@ -1856,7 +1856,7 @@ const avatarVariantKeys = [
   "size",
   "shape"
 ];
-const getVariantProps$v = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const getVariantProps$w = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
 const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
   __name__: "avatar",
@@ -1881,7 +1881,7 @@ const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: getVariantProps$v
+  getVariantProps: getVariantProps$w
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1908,7 +1908,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$u = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$v = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1944,7 +1944,7 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$u
+  getVariantProps: getVariantProps$v
 });
 const breadcrumbsDefaultVariants = {};
 const breadcrumbsCompoundVariants = [];
@@ -1971,7 +1971,7 @@ const breadcrumbsFn = memo((props = {}) => {
   return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const breadcrumbsVariantKeys = [];
-const getVariantProps$t = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const getVariantProps$u = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
 const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   __recipe__: false,
   __name__: "breadcrumbs",
@@ -1982,7 +1982,7 @@ const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, breadcrumbsVariantKeys);
   },
-  getVariantProps: getVariantProps$t
+  getVariantProps: getVariantProps$u
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -2013,7 +2013,7 @@ const buttonVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$s = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$t = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -2047,7 +2047,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$s
+  getVariantProps: getVariantProps$t
 });
 const calendarDefaultVariants = {
   "type": "days"
@@ -2086,7 +2086,7 @@ const calendarFn = memo((props = {}) => {
 const calendarVariantKeys = [
   "type"
 ];
-const getVariantProps$r = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
+const getVariantProps$s = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
 const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   __recipe__: false,
   __name__: "calendar",
@@ -2103,7 +2103,7 @@ const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, calendarVariantKeys);
   },
-  getVariantProps: getVariantProps$r
+  getVariantProps: getVariantProps$s
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -2130,7 +2130,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$q = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$r = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -2141,7 +2141,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$q
+  getVariantProps: getVariantProps$r
 });
 const chipDefaultVariants = {
   "size": "md"
@@ -2179,7 +2179,7 @@ const chipVariantKeys = [
   "after",
   "dismissable"
 ];
-const getVariantProps$p = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const getVariantProps$q = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
 const chip = /* @__PURE__ */ Object.assign(chipFn, {
   __recipe__: false,
   __name__: "chip",
@@ -2206,7 +2206,7 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, chipVariantKeys);
   },
-  getVariantProps: getVariantProps$p
+  getVariantProps: getVariantProps$q
 });
 const codeBlockDefaultVariants = {
   "tone": "default",
@@ -2275,7 +2275,7 @@ const codeBlockVariantKeys = [
   "collapsed",
   "actionGutter"
 ];
-const getVariantProps$o = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
+const getVariantProps$p = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
 const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   __recipe__: false,
   __name__: "codeBlock",
@@ -2311,7 +2311,7 @@ const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   splitVariantProps(props) {
     return splitProps$1(props, codeBlockVariantKeys);
   },
-  getVariantProps: getVariantProps$o
+  getVariantProps: getVariantProps$p
 });
 const dateMenusDefaultVariants = {};
 const dateMenusCompoundVariants = [];
@@ -2334,7 +2334,7 @@ const dateMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateMenusVariantKeys = [];
-const getVariantProps$n = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$o = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
 const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   __recipe__: false,
   __name__: "dateMenus",
@@ -2345,7 +2345,7 @@ const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$n
+  getVariantProps: getVariantProps$o
 });
 const dateTimeMenusDefaultVariants = {};
 const dateTimeMenusCompoundVariants = [];
@@ -2368,7 +2368,7 @@ const dateTimeMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateTimeMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateTimeMenusVariantKeys = [];
-const getVariantProps$m = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$n = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
 const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   __recipe__: false,
   __name__: "dateTimeMenus",
@@ -2379,7 +2379,7 @@ const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateTimeMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$m
+  getVariantProps: getVariantProps$n
 });
 const drawerDefaultVariants = {
   "side": "right",
@@ -2426,7 +2426,7 @@ const drawerVariantKeys = [
   "size",
   "scrollable"
 ];
-const getVariantProps$l = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
+const getVariantProps$m = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
 const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   __recipe__: false,
   __name__: "drawer",
@@ -2453,7 +2453,7 @@ const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, drawerVariantKeys);
   },
-  getVariantProps: getVariantProps$l
+  getVariantProps: getVariantProps$m
 });
 const filterFieldDefaultVariants = {};
 const filterFieldCompoundVariants = [];
@@ -2500,7 +2500,7 @@ const filterFieldFn = memo((props = {}) => {
   return Object.fromEntries(filterFieldSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const filterFieldVariantKeys = [];
-const getVariantProps$k = (variants) => ({ ...filterFieldDefaultVariants, ...compact(variants) });
+const getVariantProps$l = (variants) => ({ ...filterFieldDefaultVariants, ...compact(variants) });
 const filterField = /* @__PURE__ */ Object.assign(filterFieldFn, {
   __recipe__: false,
   __name__: "filterField",
@@ -2511,7 +2511,7 @@ const filterField = /* @__PURE__ */ Object.assign(filterFieldFn, {
   splitVariantProps(props) {
     return splitProps$1(props, filterFieldVariantKeys);
   },
-  getVariantProps: getVariantProps$k
+  getVariantProps: getVariantProps$l
 });
 const filterMenuDefaultVariants = {
   "layer": "elevated"
@@ -2550,7 +2550,7 @@ const filterMenuFn = memo((props = {}) => {
 const filterMenuVariantKeys = [
   "layer"
 ];
-const getVariantProps$j = (variants) => ({ ...filterMenuDefaultVariants, ...compact(variants) });
+const getVariantProps$k = (variants) => ({ ...filterMenuDefaultVariants, ...compact(variants) });
 const filterMenu = /* @__PURE__ */ Object.assign(filterMenuFn, {
   __recipe__: false,
   __name__: "filterMenu",
@@ -2566,7 +2566,7 @@ const filterMenu = /* @__PURE__ */ Object.assign(filterMenuFn, {
   splitVariantProps(props) {
     return splitProps$1(props, filterMenuVariantKeys);
   },
-  getVariantProps: getVariantProps$j
+  getVariantProps: getVariantProps$k
 });
 const filterTokenDefaultVariants = {};
 const filterTokenCompoundVariants = [];
@@ -2613,7 +2613,7 @@ const filterTokenFn = memo((props = {}) => {
   return Object.fromEntries(filterTokenSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const filterTokenVariantKeys = [];
-const getVariantProps$i = (variants) => ({ ...filterTokenDefaultVariants, ...compact(variants) });
+const getVariantProps$j = (variants) => ({ ...filterTokenDefaultVariants, ...compact(variants) });
 const filterToken = /* @__PURE__ */ Object.assign(filterTokenFn, {
   __recipe__: false,
   __name__: "filterToken",
@@ -2624,7 +2624,7 @@ const filterToken = /* @__PURE__ */ Object.assign(filterTokenFn, {
   splitVariantProps(props) {
     return splitProps$1(props, filterTokenVariantKeys);
   },
-  getVariantProps: getVariantProps$i
+  getVariantProps: getVariantProps$j
 });
 const formFieldDefaultVariants = {
   "layout": "default",
@@ -2653,7 +2653,7 @@ const formFieldVariantKeys = [
   "layout",
   "size"
 ];
-const getVariantProps$h = (variants) => ({ ...formFieldDefaultVariants, ...compact(variants) });
+const getVariantProps$i = (variants) => ({ ...formFieldDefaultVariants, ...compact(variants) });
 const formField = /* @__PURE__ */ Object.assign(formFieldFn, {
   __recipe__: false,
   __name__: "formField",
@@ -2675,7 +2675,7 @@ const formField = /* @__PURE__ */ Object.assign(formFieldFn, {
   splitVariantProps(props) {
     return splitProps$1(props, formFieldVariantKeys);
   },
-  getVariantProps: getVariantProps$h
+  getVariantProps: getVariantProps$i
 });
 const iconButtonDefaultVariants = {
   "variant": "standard",
@@ -2704,7 +2704,7 @@ const iconButtonVariantKeys = [
   "variant",
   "size"
 ];
-const getVariantProps$g = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
+const getVariantProps$h = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
 const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
   __recipe__: false,
   __name__: "iconButton",
@@ -2732,7 +2732,7 @@ const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, iconButtonVariantKeys);
   },
-  getVariantProps: getVariantProps$g
+  getVariantProps: getVariantProps$h
 });
 const inlineNoteDefaultVariants = {
   "tone": "info"
@@ -2759,7 +2759,7 @@ const inlineNoteFn = memo((props = {}) => {
 const inlineNoteVariantKeys = [
   "tone"
 ];
-const getVariantProps$f = (variants) => ({ ...inlineNoteDefaultVariants, ...compact(variants) });
+const getVariantProps$g = (variants) => ({ ...inlineNoteDefaultVariants, ...compact(variants) });
 const inlineNote = /* @__PURE__ */ Object.assign(inlineNoteFn, {
   __recipe__: false,
   __name__: "inlineNote",
@@ -2778,7 +2778,7 @@ const inlineNote = /* @__PURE__ */ Object.assign(inlineNoteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, inlineNoteVariantKeys);
   },
-  getVariantProps: getVariantProps$f
+  getVariantProps: getVariantProps$g
 });
 const kbdDefaultVariants = {
   "variant": "default"
@@ -2801,7 +2801,7 @@ const kbdFn = memo((props = {}) => {
 const kbdVariantKeys = [
   "variant"
 ];
-const getVariantProps$e = (variants) => ({ ...kbdDefaultVariants, ...compact(variants) });
+const getVariantProps$f = (variants) => ({ ...kbdDefaultVariants, ...compact(variants) });
 const kbd = /* @__PURE__ */ Object.assign(kbdFn, {
   __recipe__: false,
   __name__: "kbd",
@@ -2817,7 +2817,7 @@ const kbd = /* @__PURE__ */ Object.assign(kbdFn, {
   splitVariantProps(props) {
     return splitProps$1(props, kbdVariantKeys);
   },
-  getVariantProps: getVariantProps$e
+  getVariantProps: getVariantProps$f
 });
 const listItemGroupDefaultVariants = {
   "density": "compact"
@@ -2844,7 +2844,7 @@ const listItemGroupFn = memo((props = {}) => {
 const listItemGroupVariantKeys = [
   "density"
 ];
-const getVariantProps$d = (variants) => ({ ...listItemGroupDefaultVariants, ...compact(variants) });
+const getVariantProps$e = (variants) => ({ ...listItemGroupDefaultVariants, ...compact(variants) });
 const listItemGroup = /* @__PURE__ */ Object.assign(listItemGroupFn, {
   __recipe__: false,
   __name__: "listItemGroup",
@@ -2861,7 +2861,7 @@ const listItemGroup = /* @__PURE__ */ Object.assign(listItemGroupFn, {
   splitVariantProps(props) {
     return splitProps$1(props, listItemGroupVariantKeys);
   },
-  getVariantProps: getVariantProps$d
+  getVariantProps: getVariantProps$e
 });
 const listItemDefaultVariants = {
   "variant": "default",
@@ -2921,7 +2921,7 @@ const listItemVariantKeys = [
   "iconBefore",
   "iconAfter"
 ];
-const getVariantProps$c = (variants) => ({ ...listItemDefaultVariants, ...compact(variants) });
+const getVariantProps$d = (variants) => ({ ...listItemDefaultVariants, ...compact(variants) });
 const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
   __recipe__: false,
   __name__: "listItem",
@@ -2956,7 +2956,7 @@ const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
   splitVariantProps(props) {
     return splitProps$1(props, listItemVariantKeys);
   },
-  getVariantProps: getVariantProps$c
+  getVariantProps: getVariantProps$d
 });
 const menuDefaultVariants = {
   "density": "compact",
@@ -3003,7 +3003,7 @@ const menuVariantKeys = [
   "panel",
   "scrollable"
 ];
-const getVariantProps$b = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
+const getVariantProps$c = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
 const menu = /* @__PURE__ */ Object.assign(menuFn, {
   __recipe__: false,
   __name__: "menu",
@@ -3030,7 +3030,7 @@ const menu = /* @__PURE__ */ Object.assign(menuFn, {
   splitVariantProps(props) {
     return splitProps$1(props, menuVariantKeys);
   },
-  getVariantProps: getVariantProps$b
+  getVariantProps: getVariantProps$c
 });
 const modalDefaultVariants = {
   "size": "md",
@@ -3079,7 +3079,7 @@ const modalVariantKeys = [
   "size",
   "position"
 ];
-const getVariantProps$a = (variants) => ({ ...modalDefaultVariants, ...compact(variants) });
+const getVariantProps$b = (variants) => ({ ...modalDefaultVariants, ...compact(variants) });
 const modal = /* @__PURE__ */ Object.assign(modalFn, {
   __recipe__: false,
   __name__: "modal",
@@ -3103,7 +3103,7 @@ const modal = /* @__PURE__ */ Object.assign(modalFn, {
   splitVariantProps(props) {
     return splitProps$1(props, modalVariantKeys);
   },
-  getVariantProps: getVariantProps$a
+  getVariantProps: getVariantProps$b
 });
 const pageBannerDefaultVariants = {
   "tone": "info"
@@ -3138,7 +3138,7 @@ const pageBannerFn = memo((props = {}) => {
 const pageBannerVariantKeys = [
   "tone"
 ];
-const getVariantProps$9 = (variants) => ({ ...pageBannerDefaultVariants, ...compact(variants) });
+const getVariantProps$a = (variants) => ({ ...pageBannerDefaultVariants, ...compact(variants) });
 const pageBanner = /* @__PURE__ */ Object.assign(pageBannerFn, {
   __recipe__: false,
   __name__: "pageBanner",
@@ -3157,6 +3157,98 @@ const pageBanner = /* @__PURE__ */ Object.assign(pageBannerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, pageBannerVariantKeys);
   },
+  getVariantProps: getVariantProps$a
+});
+const popoverDefaultVariants = {
+  "size": "md",
+  "interaction": "rich",
+  "layer": "elevated"
+};
+const popoverCompoundVariants = [];
+const popoverSlotNames = [
+  [
+    "content",
+    "popover__content"
+  ],
+  [
+    "header",
+    "popover__header"
+  ],
+  [
+    "title",
+    "popover__title"
+  ],
+  [
+    "titleIcon",
+    "popover__titleIcon"
+  ],
+  [
+    "description",
+    "popover__description"
+  ],
+  [
+    "body",
+    "popover__body"
+  ],
+  [
+    "media",
+    "popover__media"
+  ],
+  [
+    "footer",
+    "popover__footer"
+  ],
+  [
+    "close",
+    "popover__close"
+  ],
+  [
+    "trigger",
+    "popover__trigger"
+  ]
+];
+const popoverSlotFns = /* @__PURE__ */ popoverSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, popoverDefaultVariants, getSlotCompoundVariant(popoverCompoundVariants, slotName))]);
+const popoverFn = memo((props = {}) => {
+  return Object.fromEntries(popoverSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const popoverVariantKeys = [
+  "interaction",
+  "layer",
+  "size",
+  "tone"
+];
+const getVariantProps$9 = (variants) => ({ ...popoverDefaultVariants, ...compact(variants) });
+const popover = /* @__PURE__ */ Object.assign(popoverFn, {
+  __recipe__: false,
+  __name__: "popover",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: popoverVariantKeys,
+  variantMap: {
+    "interaction": [
+      "definition",
+      "rich"
+    ],
+    "layer": [
+      "elevated",
+      "modalFloating"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "tone": [
+      "note",
+      "tip",
+      "warning",
+      "important",
+      "caution"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, popoverVariantKeys);
+  },
   getVariantProps: getVariantProps$9
 });
 const radioDefaultVariants = {};
@@ -15364,10 +15456,10 @@ function tokenVar(path, fallback) {
 }
 token.var = tokenVar;
 const createOverlayMiddleware = (options = {}) => {
-  const { offset: offset$12 = 4, shiftPadding = 8, extras = [] } = options;
+  const { offset: offset$12 = 4, shiftPadding = 8, flipOptions, extras = [] } = options;
   return [
     offset(offset$12),
-    flip(),
+    flip(flipOptions),
     shift({ padding: shiftPadding }),
     ...extras
   ];
@@ -15638,6 +15730,7 @@ const defaultLocaleLabels = {
   dismiss: "Dismiss",
   closeDialog: "Close dialog",
   closeDrawer: "Close drawer",
+  closePopover: "Close",
   removeItem: (item) => `Remove ${item}`,
   removeFilter: (filter) => `Remove filter: ${filter}`,
   switchToTheme: (nextTheme) => `Switch to ${nextTheme} theme`,
@@ -15712,14 +15805,14 @@ const LocaleContext = createContext({
 function useLocale() {
   return useContext(LocaleContext);
 }
-const toneIconNames$3 = {
+const toneIconNames$4 = {
   info: "info",
   success: "success",
   warning: "warning",
   danger: "error",
   neutral: "info"
 };
-const toneIconColors$2 = {
+const toneIconColors$3 = {
   info: "icon.info",
   success: "icon.success",
   warning: "icon.warning",
@@ -15741,7 +15834,7 @@ const Alert = (props) => {
   } = props;
   const [className, otherProps] = splitProps(rest);
   const classes = alert({ tone });
-  const iconName = toneIconNames$3[tone];
+  const iconName = toneIconNames$4[tone];
   const hasActions = Boolean(primaryAction ?? secondaryAction);
   return /* @__PURE__ */ jsxs(
     Box,
@@ -15756,7 +15849,7 @@ const Alert = (props) => {
           {
             name: iconName,
             size: "20",
-            fill: toneIconColors$2[tone],
+            fill: toneIconColors$3[tone],
             "aria-hidden": "true"
           }
         ) }),
@@ -23505,14 +23598,14 @@ const FormField = (props) => {
     }
   );
 };
-const toneIconNames$2 = {
+const toneIconNames$3 = {
   info: "info",
   success: "success",
   warning: "warning",
   danger: "error",
   neutral: "info"
 };
-const toneIconColors$1 = {
+const toneIconColors$2 = {
   info: "icon.info",
   success: "icon.success",
   warning: "icon.warning",
@@ -23530,7 +23623,7 @@ const InlineNote = (props) => {
   const { tone = "info", children, ...rest } = props;
   const [className, otherProps] = splitProps(rest);
   const classes = inlineNote({ tone });
-  const iconName = toneIconNames$2[tone];
+  const iconName = toneIconNames$3[tone];
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -23543,7 +23636,7 @@ const InlineNote = (props) => {
           {
             name: iconName,
             size: "16",
-            fill: toneIconColors$1[tone],
+            fill: toneIconColors$2[tone],
             "aria-hidden": "true"
           }
         ) }),
@@ -23896,7 +23989,7 @@ const ConfirmationModal = (props) => {
     }
   );
 };
-const toneIconNames$1 = {
+const toneIconNames$2 = {
   info: "info",
   success: "success",
   warning: "warning",
@@ -23922,7 +24015,7 @@ const PageBanner = (props) => {
   const [className, otherProps] = splitProps(rest);
   const classes = pageBanner({ tone });
   const isBold = emphasis === "bold";
-  const iconName = toneIconNames$1[tone];
+  const iconName = toneIconNames$2[tone];
   const iconColor = isBold ? "icon.inverse" : subtleIconColors[tone];
   const textColor = isBold ? "text.inverse" : "text";
   const hasActions = Boolean(primaryAction ?? secondaryAction);
@@ -26433,14 +26526,14 @@ const ThemeSwitcher = () => {
     }
   );
 };
-const toneIconNames = {
+const toneIconNames$1 = {
   info: "info",
   success: "success",
   warning: "warning",
   danger: "error",
   neutral: "info"
 };
-const toneIconColors = {
+const toneIconColors$1 = {
   info: "icon.info",
   success: "icon.success",
   warning: "icon.warning",
@@ -26496,7 +26589,7 @@ const Toast = (props) => {
       );
     };
   }, [duration, paused, state]);
-  const iconName = toneIconNames[tone];
+  const iconName = toneIconNames$1[tone];
   const hasActions = Boolean(primaryAction ?? secondaryAction);
   return /* @__PURE__ */ jsxs(
     Box,
@@ -26533,7 +26626,7 @@ const Toast = (props) => {
           {
             name: iconName,
             size: "20",
-            fill: toneIconColors[tone],
+            fill: toneIconColors$1[tone],
             "aria-hidden": "true"
           }
         ) }),
@@ -26799,6 +26892,413 @@ const Skeleton = (props) => {
     }
   );
 };
+const PopoverContext = createContext(null);
+const usePopoverContext = () => {
+  const context2 = useContext(PopoverContext);
+  if (!context2) {
+    throw new Error("Popover components must be used within a <Popover> root");
+  }
+  return context2;
+};
+const Popover = (props) => {
+  const {
+    children,
+    interaction = "rich",
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    placement = "bottom",
+    offset: offset2 = 8,
+    showArrow = true,
+    size: size2 = "md",
+    tone
+  } = props;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = useCallback(
+    (nextOpen) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  const arrowRef = useRef(null);
+  const [titleId, setTitleId] = useState();
+  const [descriptionId, setDescriptionId] = useState();
+  const [hasAnchor, setHasAnchor] = useState(false);
+  const isDefinition = interaction === "definition";
+  const { refs, elements, floatingStyles, context: context2 } = useOverlayFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    middleware: createOverlayMiddleware({
+      offset: offset2,
+      flipOptions: { fallbackAxisSideDirection: "end" },
+      extras: [arrow({ element: arrowRef })]
+    })
+  });
+  const hover = useHover(context2, {
+    enabled: isDefinition,
+    move: false,
+    delay: { open: 200, close: 150 },
+    handleClose: safePolygon({ requireIntent: false })
+  });
+  const focus = useFocus(context2, { enabled: isDefinition });
+  const click = useClick(context2, { enabled: !isDefinition });
+  const dismiss = useDismiss(context2);
+  const role = useRole(context2, {
+    role: isDefinition ? "tooltip" : "dialog"
+  });
+  const { domReference } = elements;
+  const { setReference } = refs;
+  useEffect(() => {
+    if (!hasAnchor && domReference) {
+      setReference(domReference);
+    }
+  }, [hasAnchor, domReference, setReference]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    click,
+    dismiss,
+    role
+  ]);
+  const setReferenceRef = useCallback(
+    (node) => {
+      refs.setReference(node);
+    },
+    [refs]
+  );
+  const setFloatingRef = useCallback(
+    (node) => {
+      refs.setFloating(node);
+    },
+    [refs]
+  );
+  const contextValue = useMemo(
+    () => ({
+      open,
+      setOpen,
+      interaction,
+      placement,
+      offset: offset2,
+      showArrow,
+      size: size2,
+      tone,
+      floatingContext: context2,
+      refs: {
+        setReference: refs.setReference,
+        setFloating: refs.setFloating,
+        setPositionReference: refs.setPositionReference
+      },
+      floatingStyles,
+      domReference: elements.domReference,
+      getReferenceProps: (userProps) => getReferenceProps(userProps),
+      getFloatingProps: (userProps) => getFloatingProps(userProps),
+      arrowRef,
+      titleId,
+      setTitleId,
+      descriptionId,
+      setDescriptionId,
+      hasAnchor,
+      setHasAnchor,
+      setReferenceRef,
+      setFloatingRef
+    }),
+    [
+      open,
+      setOpen,
+      interaction,
+      placement,
+      offset2,
+      showArrow,
+      size2,
+      tone,
+      context2,
+      refs.setReference,
+      refs.setFloating,
+      refs.setPositionReference,
+      floatingStyles,
+      elements.domReference,
+      getReferenceProps,
+      getFloatingProps,
+      titleId,
+      descriptionId,
+      hasAnchor,
+      setReferenceRef,
+      setFloatingRef
+    ]
+  );
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: contextValue, children });
+};
+const PopoverTrigger = (props) => {
+  const { children, ref, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const { interaction, getReferenceProps, setReferenceRef } = usePopoverContext();
+  const classes = popover({ interaction });
+  const childArray = Children.toArray(children);
+  const onlyChild = childArray.length === 1 ? childArray[0] : null;
+  const childRefProp = isValidElement(onlyChild) ? onlyChild.props.ref : void 0;
+  const mergedRef = useMergeRefs([childRefProp, ref, setReferenceRef]);
+  if (isValidElement(onlyChild)) {
+    const child = onlyChild;
+    const referenceProps = getReferenceProps({
+      ...otherProps,
+      ...child.props
+    });
+    return cloneElement(child, {
+      ...referenceProps,
+      ref: mergedRef,
+      className: cx(child.props.className, className) || void 0
+    });
+  }
+  if (interaction === "rich") {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "button",
+        type: "button",
+        ref: mergedRef,
+        className: cx(classes.trigger, className),
+        ...getReferenceProps(otherProps),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "span",
+      ref: mergedRef,
+      tabIndex: 0,
+      className: cx(classes.trigger, className),
+      ...getReferenceProps(otherProps),
+      children
+    }
+  );
+};
+const PopoverAnchor = (props) => {
+  const {
+    children,
+    ref: consumerRef,
+    ...rest
+  } = props;
+  const { refs, setHasAnchor } = usePopoverContext();
+  useEffect(() => {
+    setHasAnchor(true);
+    return () => setHasAnchor(false);
+  }, [setHasAnchor]);
+  const childArray = Children.toArray(children);
+  const onlyChild = childArray.length === 1 ? childArray[0] : null;
+  const childRefProp = isValidElement(onlyChild) ? onlyChild.props.ref : void 0;
+  const mergedRef = useMergeRefs([
+    consumerRef,
+    childRefProp,
+    refs.setPositionReference
+  ]);
+  if (isValidElement(onlyChild)) {
+    const child = onlyChild;
+    return cloneElement(child, {
+      ...rest,
+      ref: mergedRef
+    });
+  }
+  return /* @__PURE__ */ jsx(Box, { as: "span", display: "inline", ...rest, ref: mergedRef, children });
+};
+const PopoverContent = (props) => {
+  const { children, ref, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const {
+    open,
+    interaction,
+    showArrow,
+    size: size2,
+    tone,
+    floatingContext,
+    floatingStyles,
+    domReference,
+    getFloatingProps,
+    setFloatingRef,
+    arrowRef,
+    titleId,
+    descriptionId
+  } = usePopoverContext();
+  const floatingLayer = useFloatingLayer();
+  const mergedRef = useMergeRefs([ref, setFloatingRef]);
+  const classes = popover({ size: size2, tone, layer: floatingLayer });
+  const isRich = interaction === "rich";
+  if (!open) {
+    return null;
+  }
+  const arrowFill = token.var("colors.surface.overlay");
+  const panel = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...dsComponent("PopoverContent"),
+      ref: mergedRef,
+      className: cx(classes.content, className),
+      "aria-labelledby": titleId,
+      "aria-describedby": descriptionId,
+      ...getFloatingProps(otherProps),
+      style: floatingStyles,
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ jsx(
+          FloatingArrow,
+          {
+            ref: arrowRef,
+            context: floatingContext,
+            fill: arrowFill,
+            stroke: token.var("colors.border"),
+            strokeWidth: 1
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: domReference, children: isRich ? /* @__PURE__ */ jsx(
+    FloatingFocusManager,
+    {
+      context: floatingContext,
+      modal: true,
+      returnFocus: true,
+      children: panel
+    }
+  ) : panel }) });
+};
+const PopoverClose = (props) => {
+  const { labels } = useLocale();
+  const { altText = labels.closePopover, onClick, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const { setOpen } = usePopoverContext();
+  const classes = popover();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      variant: "ghost",
+      size: "sm",
+      iconName: "x",
+      altText,
+      "aria-label": altText,
+      className: cx(classes.close, className),
+      onClick: (event) => {
+        onClick == null ? void 0 : onClick(event);
+        setOpen(false);
+      },
+      ...otherProps
+    }
+  );
+};
+const PopoverHeader = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = popover();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.header, className), ...otherProps, children });
+};
+const toneIconNames = {
+  note: "note",
+  tip: "info",
+  warning: "warning",
+  important: "flag",
+  caution: "warning"
+};
+const toneIconColors = {
+  note: "icon.subtle",
+  tip: "icon.info",
+  warning: "icon.warning",
+  important: "icon.danger",
+  caution: "icon.warning"
+};
+const PopoverTitle = (props) => {
+  const { children, showToneIcon = true, id: idProp, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const { tone, size: size2, setTitleId } = usePopoverContext();
+  const generatedId = useId$1();
+  const titleId = idProp ?? generatedId;
+  const classes = popover({ size: size2, tone });
+  useEffect(() => {
+    setTitleId(titleId);
+    return () => setTitleId(void 0);
+  }, [setTitleId, titleId]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "div",
+      id: titleId,
+      className: cx(classes.title, className),
+      ...otherProps,
+      children: [
+        showToneIcon && tone && /* @__PURE__ */ jsx(Box, { className: classes.titleIcon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: toneIconNames[tone],
+            size: "16",
+            fill: toneIconColors[tone]
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+};
+const PopoverDescription = (props) => {
+  const { children, id: idProp, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const { size: size2, setDescriptionId } = usePopoverContext();
+  const generatedId = useId$1();
+  const descriptionId = idProp ?? generatedId;
+  const classes = popover({ size: size2 });
+  useEffect(() => {
+    setDescriptionId(descriptionId);
+    return () => setDescriptionId(void 0);
+  }, [descriptionId, setDescriptionId]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "div",
+      id: descriptionId,
+      className: cx(classes.description, className),
+      ...otherProps,
+      children
+    }
+  );
+};
+const PopoverBody = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const { size: size2 } = usePopoverContext();
+  const classes = popover({ size: size2 });
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.body, className), ...otherProps, children });
+};
+const PopoverMedia = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = popover();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.media, className), ...otherProps, children });
+};
+const PopoverFooter = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = popover();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
+};
+const PopoverArrow = (props) => {
+  const { fill, stroke } = props;
+  const { floatingContext, arrowRef } = usePopoverContext();
+  return /* @__PURE__ */ jsx(
+    FloatingArrow,
+    {
+      ref: arrowRef,
+      context: floatingContext,
+      fill: fill ?? token.var("colors.surface.overlay"),
+      stroke: stroke ?? token.var("colors.border"),
+      strokeWidth: 1
+    }
+  );
+};
 const useToast = () => useToastApi();
 export {
   Alert,
@@ -26863,6 +27363,18 @@ export {
   ModalWrapper,
   Option,
   PageBanner,
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverMedia,
+  PopoverTitle,
+  PopoverTrigger,
   Radio,
   RadioGroup,
   RadioInput,
@@ -26917,6 +27429,7 @@ export {
   useMenuRootContext,
   useModalWrapperContext,
   useOverflowItems,
+  usePopoverContext,
   useTabPanelActive,
   useTabsContext,
   useTheme,