braid-design-system 33.12.2 → 33.12.4

package/dist/lib/components/private/Popover/Popover.mjs

@@ -1,34 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { offset, flip, size, shift, arrow, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import dedent from "dedent";
-import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from "react";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect.mjs";
+import { forwardRef, useRef, useImperativeHandle, useEffect, createContext } from "react";
 import { Box } from "../../Box/Box.mjs";
 import { BraidPortal } from "../../BraidPortal/BraidPortal.mjs";
+import { useResponsiveValue } from "../../useResponsiveValue/useResponsiveValue.mjs";
 import { useSpace } from "../../useSpace/useSpace.mjs";
 import { animationTimeout } from "../animationTimeout.mjs";
-import { transitionThreshold, triggerVars, backdrop, delayVisibility, invertPlacement, animation, popoverPosition, horizontalOffset } from "./Popover.css.mjs";
-const zIndex = "notification";
-const getPosition = (element) => {
-  if (!element) {
-    return void 0;
+import { backdrop, delayVisibility, invertPlacement, animation } from "./Popover.css.mjs";
+import { normalizeResponsiveValue } from "../../../css/atoms/sprinkles.css.mjs";
+const positionMap = {
+  top: {
+    left: "top-start",
+    center: "top",
+    right: "top-end"
+  },
+  bottom: {
+    left: "bottom-start",
+    center: "bottom",
+    right: "bottom-end"
   }
-  const rect = element.getBoundingClientRect();
-  const { top, bottom, left, right, width } = rect;
-  const { scrollX: scrollX2, scrollY, innerWidth } = window;
-  return {
-    // For `top`, we subtract this from the dynamic viewport height in `Popover.css.ts`
-    // which can't be accessed from Javascript.
-    top: top + scrollY,
-    bottom: bottom + scrollY,
-    left: left + scrollX2,
-    right: innerWidth - right - scrollX2,
-    width
-  };
 };
-function clamp(min, preferred, max) {
-  return Math.min(Math.max(preferred, min), max);
+function getFloatingUiPosition(placement, align) {
+  return positionMap[placement][align];
 }
+const zIndex = "notification";
+const PopoverContext = createContext(null);
 const PopoverContent = forwardRef(
   ({
     id,
@@ -42,18 +39,59 @@ const PopoverContent = forwardRef(
     modal = true,
     open,
     onClose,
+    onPlacementChange,
     triggerRef,
     enterFocusRef,
+    arrowRef,
     children
   }, forwardedRef) => {
-    const [triggerPosition, setTriggerPosition] = useState(void 0);
     const ref = useRef(null);
     useImperativeHandle(forwardedRef, () => ref.current);
-    const [horizontalOffset$1, setHorizontalOffset] = useState(0);
-    const [actualPlacement, setActualPlacement] = useState(placement);
-    const showPopover = open && triggerPosition;
-    const transitionThresholdInPx = useSpace().space[transitionThreshold];
-    const alignmentAnchor = align === "center" ? "left" : align;
+    const normalized = normalizeResponsiveValue(offsetSpace);
+    const mobile = normalized.mobile ?? "none";
+    const tablet = normalized.tablet ?? mobile;
+    const desktop = normalized.desktop ?? tablet;
+    const wide = normalized.wide ?? desktop;
+    const resolvedOffsetSpace = useResponsiveValue()({ mobile, tablet, desktop, wide }) ?? mobile;
+    const spaceScale = useSpace();
+    let offsetSpacePx = 0;
+    if (resolvedOffsetSpace !== "none") {
+      offsetSpacePx = spaceScale.space[resolvedOffsetSpace] * spaceScale.grid;
+    }
+    const floatingUiRequestedPosition = getFloatingUiPosition(placement, align);
+    const middleware = [
+      offset(offsetSpacePx),
+      !lockPlacement && flip(),
+      width === "full" ? size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      }) : shift({
+        crossAxis: align === "center"
+      }),
+      arrowRef && arrow({ element: arrowRef })
+    ].filter(Boolean);
+    const {
+      refs,
+      floatingStyles,
+      middlewareData,
+      placement: floatingUiEvaluatedPosition,
+      isPositioned
+    } = useFloating({
+      placement: floatingUiRequestedPosition,
+      middleware,
+      whileElementsMounted: autoUpdate
+    });
+    useEffect(() => {
+      refs.setReference(triggerRef.current);
+    }, [triggerRef, refs]);
+    useEffect(() => {
+      if (ref.current) {
+        refs.setFloating(ref.current);
+      }
+    }, [refs]);
     useEffect(() => {
       const handleKeydown = (event) => {
         if (event.key === "Escape" || event.key === "Tab") {
@@ -78,9 +116,6 @@ const PopoverContent = forwardRef(
         window.removeEventListener("keydown", handleKeydown);
       };
     }, [onClose, triggerRef]);
-    useEffect(() => {
-      setTriggerPosition(getPosition(triggerRef.current));
-    }, [triggerRef]);
     useEffect(() => {
       setTimeout(() => {
         if (!enterFocusRef) {
@@ -98,95 +133,24 @@ const PopoverContent = forwardRef(
           }
         }
       }, animationTimeout);
-    }, [open, enterFocusRef, triggerRef]);
+    }, [open, enterFocusRef]);
+    const resolvedPlacement = floatingUiEvaluatedPosition?.startsWith("top") ? "top" : "bottom";
     useEffect(() => {
-      const handleResize = () => {
-        setTriggerPosition(getPosition(triggerRef.current));
-      };
-      window.addEventListener("resize", handleResize);
-      const resizeObserver = new ResizeObserver(handleResize);
-      resizeObserver.observe(document.body);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        resizeObserver.disconnect();
-      };
-    }, [triggerRef]);
-    const handlePlacement = () => {
-      const popoverBoundingRect = ref?.current?.getBoundingClientRect();
-      if (!popoverBoundingRect) {
-        return;
-      }
-      const triggerBoundingRect = triggerRef.current?.getBoundingClientRect();
-      if (!triggerBoundingRect) {
-        return;
-      }
-      const { height: popoverHeight } = popoverBoundingRect;
-      const heightRequired = popoverHeight + transitionThresholdInPx;
-      const fitsAbove = triggerBoundingRect.top >= heightRequired;
-      const fitsBelow = window.innerHeight - triggerBoundingRect.bottom >= heightRequired;
-      if (!fitsAbove && fitsBelow) {
-        setActualPlacement("bottom");
-      } else if (!fitsBelow && fitsAbove) {
-        setActualPlacement("top");
-      } else {
-        setActualPlacement(placement);
+      if (onPlacementChange) {
+        onPlacementChange({
+          placement: resolvedPlacement,
+          arrow: middlewareData.arrow
+        });
       }
+    }, [resolvedPlacement, middlewareData.arrow, onPlacementChange]);
+    const combinedStyles = {
+      ...floatingStyles,
+      ...!isPositioned ? { opacity: 0, pointerEvents: "none" } : {}
     };
-    const handleHorizontalShift = () => {
-      if (!triggerPosition) {
-        return;
-      }
-      const popoverBoundingRect = ref?.current?.getBoundingClientRect();
-      if (!popoverBoundingRect) {
-        return;
-      }
-      const { width: popoverWidth } = popoverBoundingRect;
-      const triggerCenter = triggerPosition.width && triggerPosition.left + triggerPosition.width / 2;
-      const popoverLeft = align === "center" && triggerCenter ? triggerCenter - popoverWidth / 2 : triggerPosition.left;
-      const clampedPopoverLeft = clamp(
-        scrollX,
-        popoverLeft,
-        window.innerWidth + scrollX - popoverWidth
-      );
-      const triggerRightFromLeft = window.innerWidth - triggerPosition.right;
-      const clampedTriggerRightFromLeft = clamp(
-        scrollX + popoverWidth,
-        triggerRightFromLeft,
-        scrollX + window.innerWidth
-      );
-      if (alignmentAnchor === "right" && clampedTriggerRightFromLeft !== triggerPosition.right + horizontalOffset$1) {
-        setHorizontalOffset(
-          window.innerWidth - clampedTriggerRightFromLeft - triggerPosition.right
-        );
-      }
-      if (alignmentAnchor === "left" && clampedPopoverLeft !== triggerPosition.left + horizontalOffset$1) {
-        setHorizontalOffset(clampedPopoverLeft - triggerPosition.left);
-      }
-      return;
-    };
-    useIsomorphicLayoutEffect(() => {
-      if (!showPopover) {
-        return;
-      }
-      if (width !== "full") {
-        handleHorizontalShift();
-      }
-      if (!lockPlacement) {
-        handlePlacement();
-      }
-    }, [showPopover]);
-    const triggerPositionVars = triggerPosition && {
-      // Vertical positioning
-      [triggerVars[actualPlacement]]: `${triggerPosition[actualPlacement]}`,
-      // Horizontal positioning
-      [triggerVars.left]: width === "full" || alignmentAnchor === "left" ? `${triggerPosition?.left}` : void 0,
-      [triggerVars.right]: width === "full" || alignmentAnchor === "right" ? `${triggerPosition?.right}` : void 0,
-      // Horizontal scroll offset
-      [horizontalOffset]: width !== "full" ? `${horizontalOffset$1}` : "0"
+    const popoverContextValue = {
+      arrow: middlewareData.arrow,
+      resolvedPlacement
     };
-    if (!showPopover) {
-      return null;
-    }
     return /* @__PURE__ */ jsxs(BraidPortal, { children: [
       modal && /* @__PURE__ */ jsx(
         Box,
@@ -214,17 +178,18 @@ const PopoverContent = forwardRef(
           role: role || void 0,
           tabIndex: -1,
           zIndex,
-          position: "absolute",
-          marginTop: actualPlacement === "bottom" ? offsetSpace : void 0,
-          marginBottom: actualPlacement === "top" ? offsetSpace : void 0,
-          style: triggerPositionVars && assignInlineVars(triggerPositionVars),
-          className: {
-            [popoverPosition]: true,
-            [animation]: true,
-            [invertPlacement]: actualPlacement === "bottom",
-            [delayVisibility]: delayVisibility$1
-          },
-          children
+          style: combinedStyles,
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: {
+                [animation]: true,
+                [invertPlacement]: resolvedPlacement === "bottom",
+                [delayVisibility]: delayVisibility$1
+              },
+              children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: popoverContextValue, children })
+            }
+          )
         }
       )
     ] });

package/dist/lib/playroom/components.cjs

@@ -1 +1,7 @@
 "use strict";
+const BraidPortal = void 0;
+const BraidProvider = void 0;
+const makeLinkComponent = void 0;
+exports.BraidPortal = BraidPortal;
+exports.BraidProvider = BraidProvider;
+exports.makeLinkComponent = makeLinkComponent;

package/dist/lib/playroom/components.mjs

@@ -1 +1,8 @@
-
+const BraidPortal = void 0;
+const BraidProvider = void 0;
+const makeLinkComponent = void 0;
+export {
+  BraidPortal,
+  BraidProvider,
+  makeLinkComponent
+};

package/dist/playroom/components.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const dedent = require("dedent");
+const lib_playroom_components_cjs = require("../lib/playroom/components.cjs");
 const lib_components_Accordion_Accordion_playroom_cjs = require("../lib/components/Accordion/Accordion.playroom.cjs");
 const lib_components_Accordion_AccordionItem_playroom_cjs = require("../lib/components/Accordion/AccordionItem.playroom.cjs");
 const lib_components_Alert_Alert_playroom_cjs = require("../lib/components/Alert/Alert.playroom.cjs");
@@ -44,8 +45,6 @@ const lib_components_TextField_TextField_playroom_cjs = require("../lib/componen
 const lib_components_Tiles_Tiles_playroom_cjs = require("../lib/components/Tiles/Tiles.playroom.cjs");
 const lib_components_Toggle_Toggle_playroom_cjs = require("../lib/components/Toggle/Toggle.playroom.cjs");
 const lib_components_private_Placeholder_Placeholder_cjs = require("../lib/components/private/Placeholder/Placeholder.cjs");
-const lib_components_BraidProvider_BraidProvider_cjs = require("../lib/components/BraidProvider/BraidProvider.cjs");
-const lib_components_BraidPortal_BraidPortal_cjs = require("../lib/components/BraidPortal/BraidPortal.cjs");
 const lib_components_ThemeNameConsumer_ThemeNameConsumer_cjs = require("../lib/components/ThemeNameConsumer/ThemeNameConsumer.cjs");
 const lib_components_useThemeName_useThemeName_cjs = require("../lib/components/useThemeName/useThemeName.cjs");
 const lib_components_useSpace_useSpace_cjs = require("../lib/components/useSpace/useSpace.cjs");
@@ -209,6 +208,9 @@ if (global.__IS_PLAYROOM_ENVIRONMENT__ !== "clearly") {
     +import { Component } from 'braid-design-system';
   `);
 }
+exports.BraidPortal = lib_playroom_components_cjs.BraidPortal;
+exports.BraidProvider = lib_playroom_components_cjs.BraidProvider;
+exports.makeLinkComponent = lib_playroom_components_cjs.makeLinkComponent;
 exports.Accordion = lib_components_Accordion_Accordion_playroom_cjs.Accordion;
 exports.AccordionItem = lib_components_Accordion_AccordionItem_playroom_cjs.AccordionItem;
 exports.Alert = lib_components_Alert_Alert_playroom_cjs.Alert;
@@ -253,9 +255,6 @@ exports.TextField = lib_components_TextField_TextField_playroom_cjs.TextField;
 exports.Tiles = lib_components_Tiles_Tiles_playroom_cjs.Tiles;
 exports.Toggle = lib_components_Toggle_Toggle_playroom_cjs.Toggle;
 exports.Placeholder = lib_components_private_Placeholder_Placeholder_cjs.Placeholder;
-exports.BraidProvider = lib_components_BraidProvider_BraidProvider_cjs.BraidProvider;
-exports.makeLinkComponent = lib_components_BraidProvider_BraidProvider_cjs.makeLinkComponent;
-exports.BraidPortal = lib_components_BraidPortal_BraidPortal_cjs.BraidPortal;
 exports.ThemeNameConsumer = lib_components_ThemeNameConsumer_ThemeNameConsumer_cjs.ThemeNameConsumer;
 exports.useThemeName = lib_components_useThemeName_useThemeName_cjs.useThemeName;
 exports.useSpace = lib_components_useSpace_useSpace_cjs.useSpace;

package/dist/playroom/components.d.mts

@@ -1 +1 @@
-export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box$1 as Box, BoxRenderer, BraidPortal, BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Spread$1 as Spread, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../index.js';
+export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box$1 as Box, BoxRenderer, BraidPortal$1 as BraidPortal, BraidProvider$1 as BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Spread$1 as Spread, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent$1 as makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../index.js';

package/dist/playroom/components.d.ts

@@ -1 +1 @@
-export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box$1 as Box, BoxRenderer, BraidPortal, BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Spread$1 as Spread, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../index.js';
+export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box$1 as Box, BoxRenderer, BraidPortal$1 as BraidPortal, BraidProvider$1 as BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Spread$1 as Spread, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent$1 as makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../index.js';

package/dist/playroom/components.mjs

@@ -1,4 +1,5 @@
 import dedent from "dedent";
+import { BraidPortal, BraidProvider, makeLinkComponent } from "../lib/playroom/components.mjs";
 import { Accordion } from "../lib/components/Accordion/Accordion.playroom.mjs";
 import { AccordionItem } from "../lib/components/Accordion/AccordionItem.playroom.mjs";
 import { Alert } from "../lib/components/Alert/Alert.playroom.mjs";
@@ -42,8 +43,6 @@ import { TextField } from "../lib/components/TextField/TextField.playroom.mjs";
 import { Tiles } from "../lib/components/Tiles/Tiles.playroom.mjs";
 import { Toggle } from "../lib/components/Toggle/Toggle.playroom.mjs";
 import { Placeholder } from "../lib/components/private/Placeholder/Placeholder.mjs";
-import { BraidProvider, makeLinkComponent } from "../lib/components/BraidProvider/BraidProvider.mjs";
-import { BraidPortal } from "../lib/components/BraidPortal/BraidPortal.mjs";
 import { ThemeNameConsumer } from "../lib/components/ThemeNameConsumer/ThemeNameConsumer.mjs";
 import { useThemeName } from "../lib/components/useThemeName/useThemeName.mjs";
 import { useSpace } from "../lib/components/useSpace/useSpace.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.12.2",
+  "version": "33.12.4",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -163,7 +163,8 @@
   "dependencies": {
     "@capsizecss/core": "^4.1.2",
     "@capsizecss/metrics": "^3.0.0",
-    "@capsizecss/vanilla-extract": "^2.0.0",
+    "@capsizecss/vanilla-extract": "^2.0.4",
+    "@floating-ui/react-dom": "^2.1.6",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/dynamic": "^2.1.2",
@@ -217,7 +218,7 @@
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",
     "sanitize-html": "^2.12.1",
-    "sku": "15.3.0",
+    "sku": "15.4.0",
     "storybook": "9.0.15",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3",