@guardian/stand 0.0.29 → 0.0.31

package/dist/components/tag-picker/Autocomplete.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var reactAriaComponents = require('react-aria-components');
+var styles = require('./styles.cjs');
+
+function Autocomplete({
+  addSelection,
+  loading,
+  onTextInputChange,
+  options,
+  label,
+  placeholder,
+  disabled,
+  value,
+  "data-testid": dataTestId,
+  loadingIcon,
+  theme,
+  cssOverrides
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      css: [
+        react.css`
+					position: relative;
+				`,
+        cssOverrides
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        reactAriaComponents.ComboBox,
+        {
+          "aria-label": label,
+          inputValue: value,
+          onInputChange: onTextInputChange,
+          onChange: (key) => {
+            const tag = options.find((t) => t.id === key);
+            if (tag) {
+              addSelection(tag);
+              onTextInputChange("");
+            }
+          },
+          allowsEmptyCollection: true,
+          items: options,
+          allowsCustomValue: true,
+          menuTrigger: "focus",
+          shouldFocusWrap: true,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactAriaComponents.Input,
+              {
+                css: styles.autocompleteInputStyles(theme),
+                placeholder,
+                disabled,
+                "data-testid": dataTestId
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactAriaComponents.Popover,
+              {
+                placement: "bottom",
+                css: react.css`
+						width: var(--trigger-width);
+					`,
+                offset: 0,
+                shouldFlip: false,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactAriaComponents.ListBox,
+                  {
+                    css: (value || options.length || loading) && styles.listboxStyles(theme),
+                    autoFocus: "first",
+                    renderEmptyState: () => (
+                      // Only show a "no results" box if user has typed
+                      value && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.listboxInfoStyles(theme), children: "No results" })
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: options, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(
+                        reactAriaComponents.ListBoxItem,
+                        {
+                          css: styles.listboxItemStyles(theme),
+                          value: item,
+                          children: item.name
+                        },
+                        item.id
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactAriaComponents.ListBoxLoadMoreItem,
+                        {
+                          css: styles.listboxInfoStyles(theme),
+                          isLoading: loading,
+                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.Autocomplete = Autocomplete;

package/dist/components/tag-picker/Autocomplete.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { ComboBox, Input, Popover, ListBox, Collection, ListBoxItem, ListBoxLoadMoreItem } from 'react-aria-components';
+import { autocompleteInputStyles, listboxItemStyles, listboxInfoStyles, listboxStyles } from './styles.js';
+
+function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
+  return jsx("div", { css: [
+    css`
+					position: relative;
+				`,
+    cssOverrides
+  ], children: jsxs(ComboBox, { "aria-label": label, inputValue: value, onInputChange: onTextInputChange, onChange: (key) => {
+    const tag = options.find((t) => t.id === key);
+    if (tag) {
+      addSelection(tag);
+      onTextInputChange("");
+    }
+  }, allowsEmptyCollection: true, items: options, allowsCustomValue: true, menuTrigger: "focus", shouldFocusWrap: true, children: [jsx(Input, { css: autocompleteInputStyles(theme), placeholder, disabled, "data-testid": dataTestId }), jsx(Popover, { placement: "bottom", css: css`
+						width: var(--trigger-width);
+					`, offset: 0, shouldFlip: false, children: jsxs(ListBox, { css: (value || options.length || loading) && listboxStyles(theme), autoFocus: "first", renderEmptyState: () => (
+    // Only show a "no results" box if user has typed
+    value && !loading && jsx("div", { css: listboxInfoStyles(theme), children: "No results" })
+  ), children: [jsx(Collection, { items: options, children: (item) => jsx(ListBoxItem, { css: listboxItemStyles(theme), value: item, children: item.name }, item.id) }), jsx(ListBoxLoadMoreItem, { css: listboxInfoStyles(theme), isLoading: loading, children: jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." }) })] }) })] }) });
+}
+
+export { Autocomplete };

package/dist/components/tag-picker/TagAutocomplete.cjs

@@ -1,14 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('@emotion/react');
-var reactAriaComponents = require('react-aria-components');
-var styles = require('./styles.cjs');
+var Autocomplete = require('./Autocomplete.cjs');
 
 function TagAutocomplete({
   addTag,
   loading,
-  onChange,
+  onTextInputChange,
   options,
   label,
   placeholder,
@@ -20,86 +18,20 @@ function TagAutocomplete({
   cssOverrides
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Autocomplete.Autocomplete,
     {
-      css: [
-        react.css`
-					position: relative;
-				`,
-        cssOverrides
-      ],
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        reactAriaComponents.ComboBox,
-        {
-          "aria-label": label,
-          inputValue: value,
-          onInputChange: onChange,
-          onSelectionChange: (key) => {
-            const tag = options.find((t) => t.id === key);
-            if (tag) {
-              addTag(tag);
-              onChange("");
-            }
-          },
-          allowsEmptyCollection: true,
-          items: options,
-          allowsCustomValue: true,
-          menuTrigger: "focus",
-          shouldFocusWrap: true,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactAriaComponents.Input,
-              {
-                css: styles.tagAutocompleteInputStyles(theme),
-                placeholder,
-                disabled,
-                "data-testid": dataTestId
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactAriaComponents.Popover,
-              {
-                placement: "bottom",
-                css: react.css`
-						width: var(--trigger-width);
-					`,
-                offset: 0,
-                shouldFlip: false,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  reactAriaComponents.ListBox,
-                  {
-                    css: (value || options.length || loading) && styles.listboxStyles(theme),
-                    autoFocus: "first",
-                    renderEmptyState: () => (
-                      // Only show a "no results" box if user has typed
-                      value && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.listboxInfoStyles(theme), children: "No results" })
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: options, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(
-                        reactAriaComponents.ListBoxItem,
-                        {
-                          css: styles.listboxItemStyles(theme),
-                          value: item,
-                          children: item.internalName
-                        },
-                        item.id
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        reactAriaComponents.ListBoxLoadMoreItem,
-                        {
-                          css: styles.listboxInfoStyles(theme),
-                          isLoading: loading,
-                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." })
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
+      onTextInputChange,
+      options,
+      label,
+      addSelection: addTag,
+      loading,
+      placeholder,
+      disabled,
+      value,
+      "data-testid": dataTestId,
+      loadingIcon,
+      theme,
+      cssOverrides
     }
   );
 }

package/dist/components/tag-picker/TagAutocomplete.js

@@ -1,26 +1,8 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { ComboBox, Input, Popover, ListBox, Collection, ListBoxItem, ListBoxLoadMoreItem } from 'react-aria-components';
-import { tagAutocompleteInputStyles, listboxItemStyles, listboxInfoStyles, listboxStyles } from './styles.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Autocomplete } from './Autocomplete.js';
 
-function TagAutocomplete({ addTag, loading, onChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
-  return jsx("div", { css: [
-    css`
-					position: relative;
-				`,
-    cssOverrides
-  ], children: jsxs(ComboBox, { "aria-label": label, inputValue: value, onInputChange: onChange, onSelectionChange: (key) => {
-    const tag = options.find((t) => t.id === key);
-    if (tag) {
-      addTag(tag);
-      onChange("");
-    }
-  }, allowsEmptyCollection: true, items: options, allowsCustomValue: true, menuTrigger: "focus", shouldFocusWrap: true, children: [jsx(Input, { css: tagAutocompleteInputStyles(theme), placeholder, disabled, "data-testid": dataTestId }), jsx(Popover, { placement: "bottom", css: css`
-						width: var(--trigger-width);
-					`, offset: 0, shouldFlip: false, children: jsxs(ListBox, { css: (value || options.length || loading) && listboxStyles(theme), autoFocus: "first", renderEmptyState: () => (
-    // Only show a "no results" box if user has typed
-    value && !loading && jsx("div", { css: listboxInfoStyles(theme), children: "No results" })
-  ), children: [jsx(Collection, { items: options, children: (item) => jsx(ListBoxItem, { css: listboxItemStyles(theme), value: item, children: item.internalName }, item.id) }), jsx(ListBoxLoadMoreItem, { css: listboxInfoStyles(theme), isLoading: loading, children: jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." }) })] }) })] }) });
+function TagAutocomplete({ addTag, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
+  return jsx(Autocomplete, { onTextInputChange, options, label, addSelection: addTag, loading, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides });
 }
 
 export { TagAutocomplete };

package/dist/components/tag-picker/TagTable.cjs

@@ -93,7 +93,7 @@ function TagTable({
             {
               id: rowToTag(item).id,
               css: styles.tagTableRowStyles(canDrag, theme),
-              textValue: rowToTag(item).internalName,
+              textValue: rowToTag(item).name,
               children: [
                 onReorder && /* @__PURE__ */ jsxRuntime.jsx(
                   reactAriaComponents.Cell,
@@ -129,7 +129,7 @@ function TagTable({
 									`
                     ],
                     "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
-                    children: rowToTag(item).internalName
+                    children: rowToTag(item).name
                   }
                 ),
                 showTagSectionName && /* @__PURE__ */ jsxRuntime.jsx(
@@ -141,7 +141,7 @@ function TagTable({
 											width: 20%;
 										`
                     ],
-                    children: rowToTag(item).section.name
+                    children: rowToTag(item).sectionName
                   }
                 ),
                 removeTag && /* @__PURE__ */ jsxRuntime.jsx(
@@ -161,7 +161,7 @@ function TagTable({
                         onPress: () => {
                           removeTag(item);
                         },
-                        "aria-label": `Remove ${rowToTag(item).internalName}`,
+                        "aria-label": `Remove ${rowToTag(item).name}`,
                         children: removeIcon ?? "Remove"
                       }
                     )
@@ -184,7 +184,7 @@ function TagTable({
                         onPress: () => {
                           addTag(item);
                         },
-                        "aria-label": `Add ${rowToTag(item).internalName}`,
+                        "aria-label": `Add ${rowToTag(item).name}`,
                         children: "Add"
                       }
                     )

package/dist/components/tag-picker/TagTable.js

@@ -49,7 +49,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
   if (filtered.length === 0) {
     return null;
   }
-  return jsxs("div", { css: cssOverrides, children: [heading && jsx("div", { css: tagTableHeadingStyles(theme), children: heading }), jsxs(Table, { css: tagTableStyles(!!removeTag, theme), "aria-label": "Tag Table", "data-testid": dataTestId, dragAndDropHooks: onReorder && dragAndDropHooks, children: [jsxs(TableHeader, { hidden: true, children: [onReorder && jsx(Column, {}), showTagType && jsx(Column, { children: "Type" }), jsx(Column, { isRowHeader: true, children: "Name" }), showTagSectionName && jsx(Column, { children: "Section" }), removeTag && jsx(Column, {}), addTag && jsx(Column, {})] }), jsx(TableBody, { items: filtered, dependencies: [localRows], children: (item) => jsxs(Row, { id: rowToTag(item).id, css: tagTableRowStyles(canDrag, theme), textValue: rowToTag(item).internalName, children: [onReorder && jsx(Cell, { css: [
+  return jsxs("div", { css: cssOverrides, children: [heading && jsx("div", { css: tagTableHeadingStyles(theme), children: heading }), jsxs(Table, { css: tagTableStyles(!!removeTag, theme), "aria-label": "Tag Table", "data-testid": dataTestId, dragAndDropHooks: onReorder && dragAndDropHooks, children: [jsxs(TableHeader, { hidden: true, children: [onReorder && jsx(Column, {}), showTagType && jsx(Column, { children: "Type" }), jsx(Column, { isRowHeader: true, children: "Name" }), showTagSectionName && jsx(Column, { children: "Section" }), removeTag && jsx(Column, {}), addTag && jsx(Column, {})] }), jsx(TableBody, { items: filtered, dependencies: [localRows], children: (item) => jsxs(Row, { id: rowToTag(item).id, css: tagTableRowStyles(canDrag, theme), textValue: rowToTag(item).name, children: [onReorder && jsx(Cell, { css: [
     css`
 											width: 1%;
 										`
@@ -64,12 +64,12 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
     css`
 										width: 50%;
 									`
-  ], "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`, children: rowToTag(item).internalName }), showTagSectionName && jsx(Cell, { css: [
+  ], "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`, children: rowToTag(item).name }), showTagSectionName && jsx(Cell, { css: [
     tagTableCellStyles(theme),
     css`
 											width: 20%;
 										`
-  ], children: rowToTag(item).section.name }), removeTag && jsx(Cell, { css: [
+  ], children: rowToTag(item).sectionName }), removeTag && jsx(Cell, { css: [
     tagTableCellStyles(theme),
     css`
 											text-align: center;
@@ -77,7 +77,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 										`
   ], children: canRemove(item) && jsx(Button, { css: tagTableRemoveButtonStyles, onPress: () => {
     removeTag(item);
-  }, "aria-label": `Remove ${rowToTag(item).internalName}`, children: removeIcon ?? "Remove" }) }), addTag && jsx(Cell, { css: [
+  }, "aria-label": `Remove ${rowToTag(item).name}`, children: removeIcon ?? "Remove" }) }), addTag && jsx(Cell, { css: [
     tagTableCellStyles(theme),
     css`
 											text-align: center;
@@ -85,7 +85,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 										`
   ], children: jsx(Button, { css: tagTableAddButtonStyles(theme), onPress: () => {
     addTag(item);
-  }, "aria-label": `Add ${rowToTag(item).internalName}`, children: "Add" }) })] }, rowToTag(item).id) })] })] });
+  }, "aria-label": `Add ${rowToTag(item).name}`, children: "Add" }) })] }, rowToTag(item).id) })] })] });
 }
 
 export { TagTable };

package/dist/components/tag-picker/styles.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 var react = require('@emotion/react');
-var tagAutocomplete = require('../../styleD/build/typescript/component/tagAutocomplete.cjs');
+var autocomplete = require('../../styleD/build/typescript/component/autocomplete.cjs');
 var tagTable = require('../../styleD/build/typescript/component/tagTable.cjs');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 
-const tagAutocompleteInputStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+const autocompleteInputStyles = (partialTheme = {}) => {
+  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
   return react.css`
 		width: 100%;
 		box-sizing: border-box;
@@ -23,7 +23,7 @@ const tagAutocompleteInputStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
 		max-height: 320px;
@@ -35,20 +35,23 @@ const listboxStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxItemStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 		cursor: pointer;
+		color: ${theme.listbox.item.color};
 		&:hover {
 			background-color: ${theme.listbox.item.backgroundHoverColor};
+			color: ${theme.listbox.item.colorHover};
 		}
 		&[data-focused] {
 			background-color: ${theme.listbox.item.backgroundFocusedColor};
+			color: ${theme.listbox.item.colorFocused};
 		}
 	`;
 };
 const listboxInfoStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
@@ -184,10 +187,10 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
 	`;
 };
 
+exports.autocompleteInputStyles = autocompleteInputStyles;
 exports.listboxInfoStyles = listboxInfoStyles;
 exports.listboxItemStyles = listboxItemStyles;
 exports.listboxStyles = listboxStyles;
-exports.tagAutocompleteInputStyles = tagAutocompleteInputStyles;
 exports.tagTableAddButtonStyles = tagTableAddButtonStyles;
 exports.tagTableCellStyles = tagTableCellStyles;
 exports.tagTableDragButtonStyles = tagTableDragButtonStyles;

package/dist/components/tag-picker/styles.js

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
-import { componentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete.js';
+import { componentAutocomplete } from '../../styleD/build/typescript/component/autocomplete.js';
 import { componentTagTable } from '../../styleD/build/typescript/component/tagTable.js';
 import { mergeDeep } from '../../util/mergeDeep.js';
 
-const tagAutocompleteInputStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+const autocompleteInputStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentAutocomplete, partialTheme);
   return css`
 		width: 100%;
 		box-sizing: border-box;
@@ -21,7 +21,7 @@ const tagAutocompleteInputStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep(componentAutocomplete, partialTheme);
   return css`
 		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
 		max-height: 320px;
@@ -33,20 +33,23 @@ const listboxStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxItemStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep(componentAutocomplete, partialTheme);
   return css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 		cursor: pointer;
+		color: ${theme.listbox.item.color};
 		&:hover {
 			background-color: ${theme.listbox.item.backgroundHoverColor};
+			color: ${theme.listbox.item.colorHover};
 		}
 		&[data-focused] {
 			background-color: ${theme.listbox.item.backgroundFocusedColor};
+			color: ${theme.listbox.item.colorFocused};
 		}
 	`;
 };
 const listboxInfoStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep(componentAutocomplete, partialTheme);
   return css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
@@ -182,4 +185,4 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
 	`;
 };
 
-export { listboxInfoStyles, listboxItemStyles, listboxStyles, tagAutocompleteInputStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };
+export { autocompleteInputStyles, listboxInfoStyles, listboxItemStyles, listboxStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };

package/dist/components/topbar/TopBar.cjs

@@ -172,7 +172,14 @@ function TopBar({
                           size: "sm",
                           theme: mergedTheme.Item,
                           "aria-label": "Navigation Menu",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "lg", children: menuOpen ? "close" : "menu" })
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Icon.Icon,
+                            {
+                              fill: mergedTheme.collapsedNavMenu.button.color,
+                              size: "lg",
+                              children: menuOpen ? "close" : "menu"
+                            }
+                          )
                         }
                       )
                     }

package/dist/components/topbar/TopBar.js

@@ -100,7 +100,7 @@ function TopBar({ children, collapseBelow = {
     showUntil: collapseBelow.containerLeft
   }), children: jsxs(DialogTrigger, { isOpen: menuOpen, onOpenChange: (isOpen) => {
     setMenuOpen(isOpen);
-  }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
+  }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { fill: mergedTheme.collapsedNavMenu.button.color, size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
     collapseBelow: collapseBelow.containerLeft
   }), children: leftSide }), jsx("div", { css: [
     topBarSpacerStyles(mergedTheme),

package/dist/components/topbar/styles.cjs

@@ -9,7 +9,10 @@ const topBarStyles = (theme) => {
   return react.css`
 		background-color: ${theme["background-color"]};
 		height: ${theme.height};
-		border: ${theme.border};
+		border-top: ${theme["border-top"]};
+		border-right: ${theme["border-right"]};
+		border-bottom: ${theme["border-bottom"]};
+		border-left: ${theme["border-left"]};
 		display: ${theme.display};
 		justify-content: ${theme["justify-content"]};
 	`;

package/dist/components/topbar/styles.js

@@ -7,7 +7,10 @@ const topBarStyles = (theme) => {
   return css`
 		background-color: ${theme["background-color"]};
 		height: ${theme.height};
-		border: ${theme.border};
+		border-top: ${theme["border-top"]};
+		border-right: ${theme["border-right"]};
+		border-bottom: ${theme["border-bottom"]};
+		border-left: ${theme["border-left"]};
 		display: ${theme.display};
 		justify-content: ${theme["justify-content"]};
 	`;

package/dist/index.cjs

@@ -1,29 +1,29 @@
 'use strict';
 
+var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs');
 var byline = require('./styleD/build/typescript/component/byline.cjs');
-var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
 var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
 var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
+var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var avatar = require('./styleD/build/typescript/component/avatar.cjs');
 var button = require('./styleD/build/typescript/component/button.cjs');
-var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
-var icon = require('./styleD/build/typescript/component/icon.cjs');
+var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
-var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
+var form = require('./styleD/build/typescript/component/form.cjs');
+var icon = require('./styleD/build/typescript/component/icon.cjs');
+var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
+var menu = require('./styleD/build/typescript/component/menu.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
-var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
+var select = require('./styleD/build/typescript/component/select.cjs');
 var textArea = require('./styleD/build/typescript/component/textArea.cjs');
 var textInput = require('./styleD/build/typescript/component/textInput.cjs');
-var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
-var select = require('./styleD/build/typescript/component/select.cjs');
-var menu = require('./styleD/build/typescript/component/menu.cjs');
 var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
-var form = require('./styleD/build/typescript/component/form.cjs');
+var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
-var typography = require('./styleD/build/typescript/base/typography.cjs');
-var spacing = require('./styleD/build/typescript/base/spacing.cjs');
-var sizing = require('./styleD/build/typescript/base/sizing.cjs');
 var radius = require('./styleD/build/typescript/base/radius.cjs');
+var sizing = require('./styleD/build/typescript/base/sizing.cjs');
+var spacing = require('./styleD/build/typescript/base/spacing.cjs');
+var typography = require('./styleD/build/typescript/base/typography.cjs');
 var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
 var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
 var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
@@ -32,30 +32,30 @@ var breakpoints = require('./styleD/build/typescript/semantic/breakpoints.cjs');
 
 
 
+exports.componentAutocomplete = autocomplete.componentAutocomplete;
 exports.componentByline = byline.componentByline;
-exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;
 exports.componentTagTable = tagTable.componentTagTable;
 exports.componentUserMenu = userMenu.componentUserMenu;
+exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentAvatar = avatar.componentAvatar;
 exports.componentButton = button.componentButton;
-exports.componentTypography = typography$1.componentTypography;
-exports.componentIcon = icon.componentIcon;
+exports.componentCheckbox = checkbox.componentCheckbox;
 exports.componentFavicon = favicon.componentFavicon;
-exports.componentAlertBanner = alertBanner.componentAlertBanner;
+exports.componentForm = form.componentForm;
+exports.componentIcon = icon.componentIcon;
+exports.componentInlineMessage = inlineMessage.componentInlineMessage;
+exports.componentMenu = menu.componentMenu;
 exports.componentRadioGroup = radioGroup.componentRadioGroup;
-exports.componentCheckbox = checkbox.componentCheckbox;
+exports.componentSelect = select.componentSelect;
 exports.componentTextArea = textArea.componentTextArea;
 exports.componentTextInput = textInput.componentTextInput;
-exports.componentInlineMessage = inlineMessage.componentInlineMessage;
-exports.componentSelect = select.componentSelect;
-exports.componentMenu = menu.componentMenu;
 exports.componentTopBar = TopBar.componentTopBar;
-exports.componentForm = form.componentForm;
+exports.componentTypography = typography$1.componentTypography;
 exports.baseColors = colors.baseColors;
-exports.baseTypography = typography.baseTypography;
-exports.baseSpacing = spacing.baseSpacing;
-exports.baseSizing = sizing.baseSizing;
 exports.baseRadius = radius.baseRadius;
+exports.baseSizing = sizing.baseSizing;
+exports.baseSpacing = spacing.baseSpacing;
+exports.baseTypography = typography.baseTypography;
 exports.semanticColors = colors$1.semanticColors;
 exports.semanticTypography = typography$2.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;