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

package/CHANGELOG.md

@@ -1,22 +1,66 @@
 # braid-design-system
 
-## 33.12.0-grad-connection-20250729214441
+## 33.12.0
 
 ### Minor Changes
 
-- Add `Grad Connection` theme (ea7b71938c059baefe257a91862adc953a95c1e1)
+- **IconSocialTiktok:** Add component ([#1889](https://github.com/seek-oss/braid-design-system/pull/1889))
 
   **EXAMPLE USAGE:**
 
   ```jsx
-  import { BraidProvider } from 'braid-design-system';
-  import gradConnection from 'braid-design-system/themes/gradConnection';
+  <IconSocialTiktok />
+  ```
 
-  export const App = () => (
-    <BraidProvider theme={gradConnection}>...</BraidProvider>
-  );
+- **IconMicrophone:** Add component ([#1887](https://github.com/seek-oss/braid-design-system/pull/1887))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <IconMicrophone />
   ```
 
+### Patch Changes
+
+- **IconAttachment, IconLocation:** Update artworks to be more rounded and spacious, consistent with the latest design language ([#1887](https://github.com/seek-oss/braid-design-system/pull/1887))
+
+## 33.11.5
+
+### Patch Changes
+
+- **Button, ButtonIcon, ButtonLink:** Remove use of deprecated `outline` atoms value, in favour of CSS property ([#1871](https://github.com/seek-oss/braid-design-system/pull/1871))
+
+## 33.11.4
+
+### Patch Changes
+
+- **Button, ButtonIcon, ButtonLink:** Ensure active transition is correctly applied ([#1868](https://github.com/seek-oss/braid-design-system/pull/1868))
+
+## 33.11.3
+
+### Patch Changes
+
+- **Button, ButtonLink:** Ensure focus ring supports `bleed` layout ([#1866](https://github.com/seek-oss/braid-design-system/pull/1866))
+
+  Fixes the focus ring layout when combined with the `bleed` prop to ensure the outline wraps the visual boundary of the button.
+
+## 33.11.2
+
+### Patch Changes
+
+- **ButtonIcon:** Better match `Tooltip` text size with `size` prop ([#1864](https://github.com/seek-oss/braid-design-system/pull/1864))
+
+  When using a `small` `ButtonIcon`, the `Tooltip` text size is now set to `small`.
+  For other sizes, the text remains at the default `standard` size.
+
+## 33.11.1
+
+### Patch Changes
+
+- **Actions:** Ensure full width on mobile ([#1858](https://github.com/seek-oss/braid-design-system/pull/1858))
+
+  Ensure that the children of an `Action` component are always full width on mobile, including within a centred flex container.
+
 ## 33.11.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -137,6 +137,7 @@ const lib_components_icons_IconList_IconList_cjs = require("./lib/components/ico
 const lib_components_icons_IconLocation_IconLocation_cjs = require("./lib/components/icons/IconLocation/IconLocation.cjs");
 const lib_components_icons_IconMail_IconMail_cjs = require("./lib/components/icons/IconMail/IconMail.cjs");
 const lib_components_icons_IconMessage_IconMessage_cjs = require("./lib/components/icons/IconMessage/IconMessage.cjs");
+const lib_components_icons_IconMicrophone_IconMicrophone_cjs = require("./lib/components/icons/IconMicrophone/IconMicrophone.cjs");
 const lib_components_icons_IconMinus_IconMinus_cjs = require("./lib/components/icons/IconMinus/IconMinus.cjs");
 const lib_components_icons_IconMobile_IconMobile_cjs = require("./lib/components/icons/IconMobile/IconMobile.cjs");
 const lib_components_icons_IconMoney_IconMoney_cjs = require("./lib/components/icons/IconMoney/IconMoney.cjs");
@@ -174,6 +175,7 @@ const lib_components_icons_IconSocialGitHub_IconSocialGitHub_cjs = require("./li
 const lib_components_icons_IconSocialInstagram_IconSocialInstagram_cjs = require("./lib/components/icons/IconSocialInstagram/IconSocialInstagram.cjs");
 const lib_components_icons_IconSocialLinkedIn_IconSocialLinkedIn_cjs = require("./lib/components/icons/IconSocialLinkedIn/IconSocialLinkedIn.cjs");
 const lib_components_icons_IconSocialMedium_IconSocialMedium_cjs = require("./lib/components/icons/IconSocialMedium/IconSocialMedium.cjs");
+const lib_components_icons_IconSocialTiktok_IconSocialTiktok_cjs = require("./lib/components/icons/IconSocialTiktok/IconSocialTiktok.cjs");
 const lib_components_icons_IconSocialX_IconSocialX_cjs = require("./lib/components/icons/IconSocialX/IconSocialX.cjs");
 const lib_components_icons_IconSocialYouTube_IconSocialYouTube_cjs = require("./lib/components/icons/IconSocialYouTube/IconSocialYouTube.cjs");
 const lib_components_icons_IconSort_IconSort_cjs = require("./lib/components/icons/IconSort/IconSort.cjs");
@@ -333,6 +335,7 @@ exports.IconList = lib_components_icons_IconList_IconList_cjs.IconList;
 exports.IconLocation = lib_components_icons_IconLocation_IconLocation_cjs.IconLocation;
 exports.IconMail = lib_components_icons_IconMail_IconMail_cjs.IconMail;
 exports.IconMessage = lib_components_icons_IconMessage_IconMessage_cjs.IconMessage;
+exports.IconMicrophone = lib_components_icons_IconMicrophone_IconMicrophone_cjs.IconMicrophone;
 exports.IconMinus = lib_components_icons_IconMinus_IconMinus_cjs.IconMinus;
 exports.IconMobile = lib_components_icons_IconMobile_IconMobile_cjs.IconMobile;
 exports.IconMoney = lib_components_icons_IconMoney_IconMoney_cjs.IconMoney;
@@ -370,6 +373,7 @@ exports.IconSocialGitHub = lib_components_icons_IconSocialGitHub_IconSocialGitHu
 exports.IconSocialInstagram = lib_components_icons_IconSocialInstagram_IconSocialInstagram_cjs.IconSocialInstagram;
 exports.IconSocialLinkedIn = lib_components_icons_IconSocialLinkedIn_IconSocialLinkedIn_cjs.IconSocialLinkedIn;
 exports.IconSocialMedium = lib_components_icons_IconSocialMedium_IconSocialMedium_cjs.IconSocialMedium;
+exports.IconSocialTiktok = lib_components_icons_IconSocialTiktok_IconSocialTiktok_cjs.IconSocialTiktok;
 exports.IconSocialX = lib_components_icons_IconSocialX_IconSocialX_cjs.IconSocialX;
 exports.IconSocialYouTube = lib_components_icons_IconSocialYouTube_IconSocialYouTube_cjs.IconSocialYouTube;
 exports.IconSort = lib_components_icons_IconSort_IconSort_cjs.IconSort;

package/dist/index.d.mts

@@ -4191,6 +4191,9 @@ declare const IconMail: (props: IconMailProps) => react.JSX.Element;
 type IconMessageProps = IconContainerProps;
 declare const IconMessage: (props: IconMessageProps) => react.JSX.Element;
 
+type IconMicrophoneProps = IconContainerProps;
+declare const IconMicrophone: (props: IconMicrophoneProps) => react.JSX.Element;
+
 type IconMinusProps = IconContainerProps;
 declare const IconMinus: (props: IconMinusProps) => react.JSX.Element;
 
@@ -4305,6 +4308,9 @@ declare const IconSocialLinkedIn: (props: IconSocialLinkedInProps) => react.JSX.
 type IconSocialMediumProps = IconContainerProps;
 declare const IconSocialMedium: (props: IconSocialMediumProps) => react.JSX.Element;
 
+type IconSocialTiktokProps = IconContainerProps;
+declare const IconSocialTiktok: (props: IconSocialTiktokProps) => react.JSX.Element;
+
 type IconSocialXProps = IconContainerProps;
 declare const IconSocialX: (props: IconSocialXProps) => react.JSX.Element;
 
@@ -4541,105 +4547,6 @@ 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;
@@ -5137,12 +5044,11 @@ declare const _default$2: {
 
 declare namespace themes {
   export {
-    _default$7 as apac,
-    _default$3 as docs,
-    _default$2 as gradConnection,
-    _default$5 as seekBusiness,
-    _default$6 as seekJobs,
-    _default$4 as wireframe,
+    _default$6 as apac,
+    _default$2 as docs,
+    _default$4 as seekBusiness,
+    _default$5 as seekJobs,
+    _default$3 as wireframe,
   };
 }
 
@@ -5448,15 +5354,11 @@ declare function useScope(): {
     colorModeValue: (value: Record<"lightMode" | "darkMode", any>) => any;
 };
 
-declare const _default: ({
-    group: string;
-    name: string;
-    code: string;
-} | {
+declare const _default: {
     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$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 { 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, 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, 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 type { Breakpoint, LinkComponent };

package/dist/index.d.ts

@@ -4191,6 +4191,9 @@ declare const IconMail: (props: IconMailProps) => react.JSX.Element;
 type IconMessageProps = IconContainerProps;
 declare const IconMessage: (props: IconMessageProps) => react.JSX.Element;
 
+type IconMicrophoneProps = IconContainerProps;
+declare const IconMicrophone: (props: IconMicrophoneProps) => react.JSX.Element;
+
 type IconMinusProps = IconContainerProps;
 declare const IconMinus: (props: IconMinusProps) => react.JSX.Element;
 
@@ -4305,6 +4308,9 @@ declare const IconSocialLinkedIn: (props: IconSocialLinkedInProps) => react.JSX.
 type IconSocialMediumProps = IconContainerProps;
 declare const IconSocialMedium: (props: IconSocialMediumProps) => react.JSX.Element;
 
+type IconSocialTiktokProps = IconContainerProps;
+declare const IconSocialTiktok: (props: IconSocialTiktokProps) => react.JSX.Element;
+
 type IconSocialXProps = IconContainerProps;
 declare const IconSocialX: (props: IconSocialXProps) => react.JSX.Element;
 
@@ -4541,105 +4547,6 @@ 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;
@@ -5137,12 +5044,11 @@ declare const _default$2: {
 
 declare namespace themes {
   export {
-    _default$7 as apac,
-    _default$3 as docs,
-    _default$2 as gradConnection,
-    _default$5 as seekBusiness,
-    _default$6 as seekJobs,
-    _default$4 as wireframe,
+    _default$6 as apac,
+    _default$2 as docs,
+    _default$4 as seekBusiness,
+    _default$5 as seekJobs,
+    _default$3 as wireframe,
   };
 }
 
@@ -5448,15 +5354,11 @@ declare function useScope(): {
     colorModeValue: (value: Record<"lightMode" | "darkMode", any>) => any;
 };
 
-declare const _default: ({
-    group: string;
-    name: string;
-    code: string;
-} | {
+declare const _default: {
     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$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 { 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, 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, 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 type { Breakpoint, LinkComponent };

package/dist/index.mjs

@@ -135,6 +135,7 @@ import { IconList } from "./lib/components/icons/IconList/IconList.mjs";
 import { IconLocation } from "./lib/components/icons/IconLocation/IconLocation.mjs";
 import { IconMail } from "./lib/components/icons/IconMail/IconMail.mjs";
 import { IconMessage } from "./lib/components/icons/IconMessage/IconMessage.mjs";
+import { IconMicrophone } from "./lib/components/icons/IconMicrophone/IconMicrophone.mjs";
 import { IconMinus } from "./lib/components/icons/IconMinus/IconMinus.mjs";
 import { IconMobile } from "./lib/components/icons/IconMobile/IconMobile.mjs";
 import { IconMoney } from "./lib/components/icons/IconMoney/IconMoney.mjs";
@@ -172,6 +173,7 @@ import { IconSocialGitHub } from "./lib/components/icons/IconSocialGitHub/IconSo
 import { IconSocialInstagram } from "./lib/components/icons/IconSocialInstagram/IconSocialInstagram.mjs";
 import { IconSocialLinkedIn } from "./lib/components/icons/IconSocialLinkedIn/IconSocialLinkedIn.mjs";
 import { IconSocialMedium } from "./lib/components/icons/IconSocialMedium/IconSocialMedium.mjs";
+import { IconSocialTiktok } from "./lib/components/icons/IconSocialTiktok/IconSocialTiktok.mjs";
 import { IconSocialX } from "./lib/components/icons/IconSocialX/IconSocialX.mjs";
 import { IconSocialYouTube } from "./lib/components/icons/IconSocialYouTube/IconSocialYouTube.mjs";
 import { IconSort } from "./lib/components/icons/IconSort/IconSort.mjs";
@@ -275,6 +277,7 @@ export {
   IconLocation,
   IconMail,
   IconMessage,
+  IconMicrophone,
   IconMinus,
   IconMobile,
   IconMoney,
@@ -313,6 +316,7 @@ export {
   IconSocialInstagram,
   IconSocialLinkedIn,
   IconSocialMedium,
+  IconSocialTiktok,
   IconSocialX,
   IconSocialYouTube,
   IconSort,

package/dist/lib/components/Accordion/AccordionItem.cjs

@@ -63,9 +63,9 @@ const AccordionItem = ({
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component"
   );
-  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? lib_components_Accordion_Accordion_cjs.defaultSize;
-  const tone = (accordionContext == null ? void 0 : accordionContext.tone) ?? toneProp ?? "neutral";
-  const weight = (accordionContext == null ? void 0 : accordionContext.weight) ?? weightProp ?? "medium";
+  const size = accordionContext?.size ?? sizeProp ?? lib_components_Accordion_Accordion_cjs.defaultSize;
+  const tone = accordionContext?.tone ?? toneProp ?? "neutral";
+  const weight = accordionContext?.weight ?? weightProp ?? "medium";
   const itemSpace = itemSpaceForSize[size] ?? "none";
   assert__default.default(
     typeof label === "undefined" || typeof label === "string",

package/dist/lib/components/Accordion/AccordionItem.mjs

@@ -60,9 +60,9 @@ const AccordionItem = ({
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component"
   );
-  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? defaultSize;
-  const tone = (accordionContext == null ? void 0 : accordionContext.tone) ?? toneProp ?? "neutral";
-  const weight = (accordionContext == null ? void 0 : accordionContext.weight) ?? weightProp ?? "medium";
+  const size = accordionContext?.size ?? sizeProp ?? defaultSize;
+  const tone = accordionContext?.tone ?? toneProp ?? "neutral";
+  const weight = accordionContext?.weight ?? weightProp ?? "medium";
   const itemSpace = itemSpaceForSize[size] ?? "none";
   assert(
     typeof label === "undefined" || typeof label === "string",

package/dist/lib/components/Actions/Actions.cjs

@@ -1,11 +1,23 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const lib_components_Inline_Inline_cjs = require("../Inline/Inline.cjs");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_Actions_ActionsContext_cjs = require("./ActionsContext.cjs");
+const lib_components_Actions_Actions_css_cjs = require("./Actions.css.cjs");
 const actionsSpace = "xsmall";
 const Actions = ({ size, data, children }) => {
   const contextValue = react.useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Actions_ActionsContext_cjs.ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Inline_Inline_cjs.Inline, { collapseBelow: "tablet", space: actionsSpace, data, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Actions_ActionsContext_cjs.ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      display: "flex",
+      flexDirection: { mobile: "column", [lib_components_Actions_Actions_css_cjs.actionsBreakpoint]: "row" },
+      flexWrap: "wrap",
+      gap: actionsSpace,
+      className: lib_components_Actions_Actions_css_cjs.root,
+      data,
+      children
+    }
+  ) });
 };
 exports.Actions = Actions;

package/dist/lib/components/Actions/Actions.css.cjs

@@ -0,0 +1,21 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
+const lib_components_Inline_Inline_css_cjs = require("../Inline/Inline.css.cjs");
+fileScope.setFileScope("src/lib/components/Actions/Actions.css.ts", "braid-design-system");
+const actionsBreakpoint = "tablet";
+const root = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    alignSelf: "stretch"
+  },
+  [actionsBreakpoint]: {
+    alignSelf: "auto"
+  }
+}), "root");
+css.globalStyle(`${root} > *`, lib_css_responsiveStyle_cjs.responsiveStyle({
+  [actionsBreakpoint]: lib_components_Inline_Inline_css_cjs.fitContentStyleRule
+}));
+fileScope.endFileScope();
+exports.actionsBreakpoint = actionsBreakpoint;
+exports.root = root;

package/dist/lib/components/Actions/Actions.css.mjs

@@ -0,0 +1,22 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, globalStyle } from "@vanilla-extract/css";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { fitContentStyleRule } from "../Inline/Inline.css.mjs";
+setFileScope("src/lib/components/Actions/Actions.css.ts", "braid-design-system");
+const actionsBreakpoint = "tablet";
+const root = style(responsiveStyle({
+  mobile: {
+    alignSelf: "stretch"
+  },
+  [actionsBreakpoint]: {
+    alignSelf: "auto"
+  }
+}), "root");
+globalStyle(`${root} > *`, responsiveStyle({
+  [actionsBreakpoint]: fitContentStyleRule
+}));
+endFileScope();
+export {
+  actionsBreakpoint,
+  root
+};

package/dist/lib/components/Actions/Actions.mjs

@@ -1,11 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Inline } from "../Inline/Inline.mjs";
+import { Box } from "../Box/Box.mjs";
 import { ActionsContext } from "./ActionsContext.mjs";
+import { root, actionsBreakpoint } from "./Actions.css.mjs";
 const actionsSpace = "xsmall";
 const Actions = ({ size, data, children }) => {
   const contextValue = useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Inline, { collapseBelow: "tablet", space: actionsSpace, data, children }) });
+  return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "flex",
+      flexDirection: { mobile: "column", [actionsBreakpoint]: "row" },
+      flexWrap: "wrap",
+      gap: actionsSpace,
+      className: root,
+      data,
+      children
+    }
+  ) });
 };
 export {
   Actions

package/dist/lib/components/Autosuggest/Autosuggest.cjs

@@ -351,7 +351,7 @@ const Autosuggest = react.forwardRef(function({
   });
   const isOpen = showSuggestionsIfAvailable && hasItems;
   const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(lib_components_Autosuggest_createAccessibilityProps_cjs.getItemId(resolvedId, highlightedIndex)) : null;
-  highlightedItem == null ? void 0 : highlightedItem.scrollIntoView({ block: "nearest" });
+  highlightedItem?.scrollIntoView({ block: "nearest" });
   react.useEffect(() => {
     dispatch({
       type: HAS_SUGGESTIONS_CHANGED

package/dist/lib/components/Autosuggest/Autosuggest.mjs

@@ -346,7 +346,7 @@ const Autosuggest = forwardRef(function({
   });
   const isOpen = showSuggestionsIfAvailable && hasItems;
   const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(getItemId(resolvedId, highlightedIndex)) : null;
-  highlightedItem == null ? void 0 : highlightedItem.scrollIntoView({ block: "nearest" });
+  highlightedItem?.scrollIntoView({ block: "nearest" });
   useEffect(() => {
     dispatch({
       type: HAS_SUGGESTIONS_CHANGED

package/dist/lib/components/Autosuggest/Autosuggest.playroom.cjs

@@ -25,7 +25,7 @@ function Autosuggest({
       onChange: handleChange,
       onClear: () => {
         handleChange(blankValue);
-        onClear == null ? void 0 : onClear();
+        onClear?.();
       },
       tabIndex: lib_components_private_validateTabIndex_cjs.validTabIndexes.includes(tabIndex) ? tabIndex : void 0,
       ...restProps