braid-design-system 33.10.2 → 33.12.0-grad-connection-20250729214441

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # braid-design-system
 
+## 33.12.0-grad-connection-20250729214441
+
+### Minor Changes
+
+- Add `Grad Connection` theme (ea7b71938c059baefe257a91862adc953a95c1e1)
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  import { BraidProvider } from 'braid-design-system';
+  import gradConnection from 'braid-design-system/themes/gradConnection';
+
+  export const App = () => (
+    <BraidProvider theme={gradConnection}>...</BraidProvider>
+  );
+  ```
+
+## 33.11.0
+
+### Minor Changes
+
+- **useToast**: Improve layout of toasts when multiple toasts are shown ([#1782](https://github.com/seek-oss/braid-design-system/pull/1782))
+
+  When multiple toasts are shown simultaneously, they now visually stack in a collapsed format that expands on interaction.
+  This prevents toasts from obscuring page content while providing users with an easy way to manage and navigate through the recent toast history.
+
+### Patch Changes
+
+- **RadioGroup:** Ensure provided `id` is assigned to `fieldset` ([#1845](https://github.com/seek-oss/braid-design-system/pull/1845))
+
+  Fixes a bug where the provided `id` was not being passed through to the `fieldset` element.
+
+- **seekJobs, seekBusiness:** Update drop shadow palette ([#1847](https://github.com/seek-oss/braid-design-system/pull/1847))
+
+  Refine the drop shadow palette values of `small`, `medium`, and `large`.
+  The shadow values are now softer and more linear in their scale.
+
+- **TooltipRenderer:** Optimise performance by reducing unnecessary recalculations of the trigger position ([#1833](https://github.com/seek-oss/braid-design-system/pull/1833))
+
+- **seekJobs, seekBusiness:** Increase medium font weight ([#1843](https://github.com/seek-oss/braid-design-system/pull/1843))
+
+  The introduction of Traditional Chinese support means characters in this unicode range are rendered using the default `sans-serif` font.
+  The system fonts that handle these characters only cater for **regular** and **bold** weights, resulting in the `medium` weight of 500 falling back to 400 — resulting in loss of visual hierarchy.
+
+  By increasing the weight of `medium` to 600, it will now round up to 700 (`strong`) when the rendered font cannot satisfy `medium`.
+
+  This only affects `seekJobs` and `seekBusiness` themes rendering Traditional Chinese characters, all weights across other character sets remain unchanged.
+
 ## 33.10.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -3666,7 +3666,7 @@ type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseP
 type RadioGroupLabelProps = FieldLabelVariant;
 type RadioGroupProps<Value = NonNullable<string | number>> = RadioGroupBaseProps<Value> & RadioGroupLabelProps;
 declare const RadioGroup$1: {
-    ({ id, children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
+    ({ children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
     displayName: string;
 };
 
@@ -4541,6 +4541,105 @@ declare function atoms(props: Omit<Atoms, 'background'>): string;
  *
  * Use the `seekJobs` theme instead.
  */
+declare const _default$7: {
+    vanillaTheme: string;
+    name: string;
+    displayName: string;
+    legacy: boolean;
+    background: {
+        lightMode: string;
+        darkMode: string;
+    };
+    webFonts: {
+        linkTag: string;
+        href: string;
+    }[];
+    space: {
+        grid: number;
+        space: {
+            gutter: number;
+            xxsmall: number;
+            xsmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xlarge: number;
+            xxlarge: number;
+            xxxlarge: number;
+        };
+    };
+    color: {
+        foreground: {
+            brandAccentLight: string;
+            brandAccent: string;
+            cautionLight: string;
+            caution: string;
+            criticalLight: string;
+            critical: string;
+            formAccentLight: string;
+            formAccent: string;
+            infoLight: string;
+            info: string;
+            linkLight: string;
+            link: string;
+            linkHover: string;
+            linkVisited: string;
+            linkLightVisited: string;
+            neutral: string;
+            neutralInverted: string;
+            positiveLight: string;
+            positive: string;
+            promoteLight: string;
+            promote: string;
+            rating: string;
+            secondary: string;
+            secondaryInverted: string;
+        };
+        background: {
+            body: string;
+            bodyDark: string;
+            brand: string;
+            brandAccent: string;
+            brandAccentActive: string;
+            brandAccentHover: string;
+            brandAccentSoft: string;
+            brandAccentSoftActive: string;
+            brandAccentSoftHover: string;
+            caution: string;
+            cautionLight: string;
+            critical: string;
+            criticalActive: string;
+            criticalHover: string;
+            criticalLight: string;
+            criticalSoft: string;
+            criticalSoftActive: string;
+            criticalSoftHover: string;
+            formAccent: string;
+            formAccentActive: string;
+            formAccentHover: string;
+            formAccentSoft: string;
+            formAccentSoftActive: string;
+            formAccentSoftHover: string;
+            info: string;
+            infoLight: string;
+            neutral: string;
+            neutralActive: string;
+            neutralHover: string;
+            neutralLight: string;
+            neutralSoft: string;
+            neutralSoftActive: string;
+            neutralSoftHover: string;
+            positive: string;
+            positiveLight: string;
+            promote: string;
+            promoteLight: string;
+            surface: string;
+            surfaceDark: string;
+        };
+    };
+    backgroundLightness: Record<"body" | "bodyDark" | "brand" | "brandAccent" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "caution" | "cautionLight" | "critical" | "criticalActive" | "criticalHover" | "criticalLight" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccent" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "info" | "infoLight" | "neutral" | "neutralActive" | "neutralHover" | "neutralLight" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "positive" | "positiveLight" | "promote" | "promoteLight" | "surface" | "surfaceDark", "light" | "dark">;
+};
+
 declare const _default$6: {
     vanillaTheme: string;
     name: string;
@@ -5038,11 +5137,12 @@ declare const _default$2: {
 
 declare namespace themes {
   export {
-    _default$6 as apac,
-    _default$2 as docs,
-    _default$4 as seekBusiness,
-    _default$5 as seekJobs,
-    _default$3 as wireframe,
+    _default$7 as apac,
+    _default$3 as docs,
+    _default$2 as gradConnection,
+    _default$5 as seekBusiness,
+    _default$6 as seekJobs,
+    _default$4 as wireframe,
   };
 }
 
@@ -5348,11 +5448,15 @@ declare function useScope(): {
     colorModeValue: (value: Record<"lightMode" | "darkMode", any>) => any;
 };
 
-declare const _default: {
+declare const _default: ({
+    group: string;
+    name: string;
+    code: string;
+} | {
     group: string;
     name: string;
     code: string;
-}[];
+})[];
 
-export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, 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, 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, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
+export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, 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, 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, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$7 as _default$2, _default$3, _default$2 as _default$4, _default$5, _default$6, _default$4 as _default$7, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

package/dist/index.d.ts

@@ -3666,7 +3666,7 @@ type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseP
 type RadioGroupLabelProps = FieldLabelVariant;
 type RadioGroupProps<Value = NonNullable<string | number>> = RadioGroupBaseProps<Value> & RadioGroupLabelProps;
 declare const RadioGroup$1: {
-    ({ id, children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
+    ({ children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
     displayName: string;
 };
 
@@ -4541,6 +4541,105 @@ declare function atoms(props: Omit<Atoms, 'background'>): string;
  *
  * Use the `seekJobs` theme instead.
  */
+declare const _default$7: {
+    vanillaTheme: string;
+    name: string;
+    displayName: string;
+    legacy: boolean;
+    background: {
+        lightMode: string;
+        darkMode: string;
+    };
+    webFonts: {
+        linkTag: string;
+        href: string;
+    }[];
+    space: {
+        grid: number;
+        space: {
+            gutter: number;
+            xxsmall: number;
+            xsmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xlarge: number;
+            xxlarge: number;
+            xxxlarge: number;
+        };
+    };
+    color: {
+        foreground: {
+            brandAccentLight: string;
+            brandAccent: string;
+            cautionLight: string;
+            caution: string;
+            criticalLight: string;
+            critical: string;
+            formAccentLight: string;
+            formAccent: string;
+            infoLight: string;
+            info: string;
+            linkLight: string;
+            link: string;
+            linkHover: string;
+            linkVisited: string;
+            linkLightVisited: string;
+            neutral: string;
+            neutralInverted: string;
+            positiveLight: string;
+            positive: string;
+            promoteLight: string;
+            promote: string;
+            rating: string;
+            secondary: string;
+            secondaryInverted: string;
+        };
+        background: {
+            body: string;
+            bodyDark: string;
+            brand: string;
+            brandAccent: string;
+            brandAccentActive: string;
+            brandAccentHover: string;
+            brandAccentSoft: string;
+            brandAccentSoftActive: string;
+            brandAccentSoftHover: string;
+            caution: string;
+            cautionLight: string;
+            critical: string;
+            criticalActive: string;
+            criticalHover: string;
+            criticalLight: string;
+            criticalSoft: string;
+            criticalSoftActive: string;
+            criticalSoftHover: string;
+            formAccent: string;
+            formAccentActive: string;
+            formAccentHover: string;
+            formAccentSoft: string;
+            formAccentSoftActive: string;
+            formAccentSoftHover: string;
+            info: string;
+            infoLight: string;
+            neutral: string;
+            neutralActive: string;
+            neutralHover: string;
+            neutralLight: string;
+            neutralSoft: string;
+            neutralSoftActive: string;
+            neutralSoftHover: string;
+            positive: string;
+            positiveLight: string;
+            promote: string;
+            promoteLight: string;
+            surface: string;
+            surfaceDark: string;
+        };
+    };
+    backgroundLightness: Record<"body" | "bodyDark" | "brand" | "brandAccent" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "caution" | "cautionLight" | "critical" | "criticalActive" | "criticalHover" | "criticalLight" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccent" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "info" | "infoLight" | "neutral" | "neutralActive" | "neutralHover" | "neutralLight" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "positive" | "positiveLight" | "promote" | "promoteLight" | "surface" | "surfaceDark", "light" | "dark">;
+};
+
 declare const _default$6: {
     vanillaTheme: string;
     name: string;
@@ -5038,11 +5137,12 @@ declare const _default$2: {
 
 declare namespace themes {
   export {
-    _default$6 as apac,
-    _default$2 as docs,
-    _default$4 as seekBusiness,
-    _default$5 as seekJobs,
-    _default$3 as wireframe,
+    _default$7 as apac,
+    _default$3 as docs,
+    _default$2 as gradConnection,
+    _default$5 as seekBusiness,
+    _default$6 as seekJobs,
+    _default$4 as wireframe,
   };
 }
 
@@ -5348,11 +5448,15 @@ declare function useScope(): {
     colorModeValue: (value: Record<"lightMode" | "darkMode", any>) => any;
 };
 
-declare const _default: {
+declare const _default: ({
+    group: string;
+    name: string;
+    code: string;
+} | {
     group: string;
     name: string;
     code: string;
-}[];
+})[];
 
-export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, 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, 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, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
+export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, 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, 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, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$7 as _default$2, _default$3, _default$2 as _default$4, _default$5, _default$6, _default$4 as _default$7, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

package/dist/lib/components/PageBlock/PageBlock.cjs

@@ -3,6 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_ContentBlock_ContentBlock_cjs = require("../ContentBlock/ContentBlock.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_PageBlock_pageBlockGutters_cjs = require("./pageBlockGutters.cjs");
 const validPageBlockComponents = [
   "div",
   "article",
@@ -11,7 +12,6 @@ const validPageBlockComponents = [
   "section",
   "nav"
 ];
-const gutters = { mobile: "small", tablet: "gutter" };
 const PageBlock = ({
   children,
   width = "large",
@@ -25,11 +25,10 @@ const PageBlock = ({
     {
       width: "full",
       component,
-      paddingX: gutters,
+      paddingX: lib_components_PageBlock_pageBlockGutters_cjs.pageBlockGutters,
       ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
       children: width === "full" ? children : /* @__PURE__ */ jsxRuntime.jsx(lib_components_ContentBlock_ContentBlock_cjs.ContentBlock, { width, children })
     }
   );
 };
 exports.PageBlock = PageBlock;
-exports.gutters = gutters;

package/dist/lib/components/PageBlock/PageBlock.mjs

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Box } from "../Box/Box.mjs";
 import { ContentBlock } from "../ContentBlock/ContentBlock.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { pageBlockGutters } from "./pageBlockGutters.mjs";
 const validPageBlockComponents = [
   "div",
   "article",
@@ -10,7 +11,6 @@ const validPageBlockComponents = [
   "section",
   "nav"
 ];
-const gutters = { mobile: "small", tablet: "gutter" };
 const PageBlock = ({
   children,
   width = "large",
@@ -24,13 +24,12 @@ const PageBlock = ({
     {
       width: "full",
       component,
-      paddingX: gutters,
+      paddingX: pageBlockGutters,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: width === "full" ? children : /* @__PURE__ */ jsx(ContentBlock, { width, children })
     }
   );
 };
 export {
-  PageBlock,
-  gutters
+  PageBlock
 };

package/dist/lib/components/PageBlock/pageBlockGutters.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const pageBlockGutters = { mobile: "small", tablet: "gutter" };
+exports.pageBlockGutters = pageBlockGutters;

package/dist/lib/components/PageBlock/pageBlockGutters.mjs

@@ -0,0 +1,4 @@
+const pageBlockGutters = { mobile: "small", tablet: "gutter" };
+export {
+  pageBlockGutters
+};

package/dist/lib/components/RadioGroup/RadioGroup.cjs

@@ -14,7 +14,6 @@ const stackSpaceForSize = {
   standard: "small"
 };
 const RadioGroup = ({
-  id,
   children,
   value,
   name,

package/dist/lib/components/RadioGroup/RadioGroup.mjs

@@ -11,7 +11,6 @@ const stackSpaceForSize = {
   standard: "small"
 };
 const RadioGroup = ({
-  id,
   children,
   value,
   name,

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -80,6 +80,7 @@ const TooltipRenderer = ({
   const isStatic = react.useContext(StaticTooltipContext);
   const isMobileDevice = react.useRef(isMobile__default.default()).current;
   const onScreen = react.useRef(null);
+  const showTooltip = isStatic ? true : open;
   react.useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -135,18 +136,30 @@ const TooltipRenderer = ({
       }
     };
   }, [open, isMobileDevice]);
-  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+  const handleTooltipPosition = () => {
     const setPositions = () => {
-      var _a, _b;
-      setTooltipPosition((_a = tooltipRef.current) == null ? void 0 : _a.getBoundingClientRect());
-      setTriggerPosition((_b = triggerRef.current) == null ? void 0 : _b.getBoundingClientRect());
+      if (tooltipRef.current) {
+        setTooltipPosition(tooltipRef.current.getBoundingClientRect());
+      }
+      if (triggerRef.current) {
+        setTriggerPosition(triggerRef.current.getBoundingClientRect());
+      }
     };
-    const timeoutId = setTimeout(() => {
+    setTimeout(() => {
       const frameId = requestAnimationFrame(setPositions);
       return () => cancelAnimationFrame(frameId);
     }, lib_components_private_animationTimeout_cjs.animationTimeout / 2);
-    return () => clearTimeout(timeoutId);
-  });
+  };
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    if (!showTooltip) {
+      return;
+    }
+    handleTooltipPosition();
+    window.addEventListener("resize", handleTooltipPosition);
+    return () => {
+      window.removeEventListener("resize", handleTooltipPosition);
+    };
+  }, [showTooltip]);
   let inferredPlacement = placement;
   let arrowLeftOffset = 0;
   if (tooltipPosition && triggerPosition) {
@@ -177,7 +190,7 @@ const TooltipRenderer = ({
         lockPlacement: isStatic,
         delayVisibility: !isMobileDevice,
         modal: false,
-        open: isStatic ? true : open,
+        open: showTooltip,
         onClose: !isStatic ? () => setOpen(false) : void 0,
         triggerRef,
         children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -77,6 +77,7 @@ const TooltipRenderer = ({
   const isStatic = useContext(StaticTooltipContext);
   const isMobileDevice = useRef(isMobile()).current;
   const onScreen = useRef(null);
+  const showTooltip = isStatic ? true : open;
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -132,18 +133,30 @@ const TooltipRenderer = ({
       }
     };
   }, [open, isMobileDevice]);
-  useIsomorphicLayoutEffect(() => {
+  const handleTooltipPosition = () => {
     const setPositions = () => {
-      var _a, _b;
-      setTooltipPosition((_a = tooltipRef.current) == null ? void 0 : _a.getBoundingClientRect());
-      setTriggerPosition((_b = triggerRef.current) == null ? void 0 : _b.getBoundingClientRect());
+      if (tooltipRef.current) {
+        setTooltipPosition(tooltipRef.current.getBoundingClientRect());
+      }
+      if (triggerRef.current) {
+        setTriggerPosition(triggerRef.current.getBoundingClientRect());
+      }
     };
-    const timeoutId = setTimeout(() => {
+    setTimeout(() => {
       const frameId = requestAnimationFrame(setPositions);
       return () => cancelAnimationFrame(frameId);
     }, animationTimeout / 2);
-    return () => clearTimeout(timeoutId);
-  });
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (!showTooltip) {
+      return;
+    }
+    handleTooltipPosition();
+    window.addEventListener("resize", handleTooltipPosition);
+    return () => {
+      window.removeEventListener("resize", handleTooltipPosition);
+    };
+  }, [showTooltip]);
   let inferredPlacement = placement;
   let arrowLeftOffset = 0;
   if (tooltipPosition && triggerPosition) {
@@ -174,7 +187,7 @@ const TooltipRenderer = ({
         lockPlacement: isStatic,
         delayVisibility: !isMobileDevice,
         modal: false,
-        open: isStatic ? true : open,
+        open: showTooltip,
         onClose: !isStatic ? () => setOpen(false) : void 0,
         triggerRef,
         children: /* @__PURE__ */ jsx(

package/dist/lib/components/private/Modal/ModalContent.cjs

@@ -7,7 +7,7 @@ const lib_components_Bleed_Bleed_cjs = require("../../Bleed/Bleed.cjs");
 const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
 const lib_components_ButtonIcon_ButtonIcon_cjs = require("../../ButtonIcon/ButtonIcon.cjs");
 const lib_components_Heading_Heading_cjs = require("../../Heading/Heading.cjs");
-const lib_components_PageBlock_PageBlock_cjs = require("../../PageBlock/PageBlock.cjs");
+const lib_components_PageBlock_pageBlockGutters_cjs = require("../../PageBlock/pageBlockGutters.cjs");
 const lib_components_Stack_Stack_cjs = require("../../Stack/Stack.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
 const lib_components_private_normalizeKey_cjs = require("../normalizeKey.cjs");
@@ -120,7 +120,7 @@ const ModalContent = ({
                     width: width !== "content" ? "full" : void 0,
                     height: position === "right" || position === "left" ? "full" : void 0,
                     paddingY: modalPadding,
-                    paddingX: position !== "center" ? lib_components_PageBlock_PageBlock_cjs.gutters : modalPadding,
+                    paddingX: position !== "center" ? lib_components_PageBlock_pageBlockGutters_cjs.pageBlockGutters : modalPadding,
                     className: [
                       lib_components_private_Modal_Modal_css_cjs.pointerEventsAll,
                       position === "center" && lib_components_private_Modal_Modal_css_cjs.maxSize[position]
@@ -171,7 +171,7 @@ const ModalContent = ({
                 display: "flex",
                 justifyContent: "flexEnd",
                 paddingTop: modalPadding,
-                paddingRight: position !== "center" ? lib_components_PageBlock_PageBlock_cjs.gutters : modalPadding,
+                paddingRight: position !== "center" ? lib_components_PageBlock_pageBlockGutters_cjs.pageBlockGutters : modalPadding,
                 className: position === "center" && lib_components_private_Modal_Modal_css_cjs.maxSize[position],
                 children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Bleed_Bleed_cjs.Bleed, { space: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
                   lib_components_Box_Box_cjs.Box,

package/dist/lib/components/private/Modal/ModalContent.mjs

@@ -6,7 +6,7 @@ import { Bleed } from "../../Bleed/Bleed.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { ButtonIcon } from "../../ButtonIcon/ButtonIcon.mjs";
 import { Heading } from "../../Heading/Heading.mjs";
-import { gutters } from "../../PageBlock/PageBlock.mjs";
+import { pageBlockGutters } from "../../PageBlock/pageBlockGutters.mjs";
 import { Stack } from "../../Stack/Stack.mjs";
 import { buildDataAttributes } from "../buildDataAttributes.mjs";
 import { normalizeKey } from "../normalizeKey.mjs";
@@ -119,7 +119,7 @@ const ModalContent = ({
                     width: width !== "content" ? "full" : void 0,
                     height: position === "right" || position === "left" ? "full" : void 0,
                     paddingY: modalPadding,
-                    paddingX: position !== "center" ? gutters : modalPadding,
+                    paddingX: position !== "center" ? pageBlockGutters : modalPadding,
                     className: [
                       pointerEventsAll,
                       position === "center" && maxSize[position]
@@ -170,7 +170,7 @@ const ModalContent = ({
                 display: "flex",
                 justifyContent: "flexEnd",
                 paddingTop: modalPadding,
-                paddingRight: position !== "center" ? gutters : modalPadding,
+                paddingRight: position !== "center" ? pageBlockGutters : modalPadding,
                 className: position === "center" && maxSize[position],
                 children: /* @__PURE__ */ jsx(Bleed, { space: "xsmall", children: /* @__PURE__ */ jsx(
                   Box,