@guardian/stand 0.0.14 → 0.0.16

package/dist/components/menu/styles.js

@@ -0,0 +1,88 @@
+import { css } from '@emotion/react';
+import { componentMenu } from '../../styleD/build/typescript/component/menu.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultMenuTheme = componentMenu.menu;
+const menuStyles = (theme) => css`
+	display: ${theme.shared.display};
+	flex-direction: ${theme.shared["flex-direction"]};
+	border: ${theme.shared.border};
+	background: ${theme.shared["background-color"]};
+`;
+const defaultMenuSectionTheme = componentMenu.menuSection;
+const menuSectionHeaderStyles = (theme, { size }) => css`
+	display: ${theme.header.shared.display};
+	align-items: ${theme.header.shared["align-items"]};
+	padding: ${theme.header.shared.padding.top}
+		${theme.header.shared.padding.right} ${theme.header.shared.padding.bottom}
+		${theme.header.shared.padding.left};
+	height: ${theme.header[size].height};
+	background: ${theme.header.shared["background-color"]};
+	color: ${theme.header.shared.color};
+	${convertTypographyToEmotionStringStyle(theme.header[size].typography)}
+`;
+const defaultMenuItemTheme = componentMenu.menuItem;
+const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
+	display: ${theme.shared.display};
+	grid-template-columns: ${theme.shared["grid-template-columns"]};
+	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
+	gap: ${theme.shared.gap};
+	align-items: ${theme.shared["align-items"]};
+	padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+		${theme.shared.padding.bottom} ${theme.shared.padding.left};
+	border-bottom: ${theme.shared["border-bottom"]};
+	&:last-child {
+		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
+	}
+	&[data-hovered],
+	&:hover {
+		background: ${theme.shared[":hover"]["background-color"]};
+	}
+	${isFocusVisible ? css`
+				outline: ${theme.shared[":focus-visible"]["outline"]};
+				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+				background: ${theme.shared[":hover"]["background-color"]};
+			` : css`
+				outline: none;
+			`}
+`;
+const menuItemIconStyles = (theme, { size }) => css`
+	grid-area: ${theme.shared.icon["grid-area"]};
+	align-self: ${theme.shared.icon["align-self"]};
+	color: ${theme.shared.icon.color};
+	/* Ensure the line-height matches the font line-height of the label for alignment */
+	line-height: ${theme[size].icon["line-height"]};
+`;
+const menuItemLabelStyles = (theme) => css`
+	grid-area: ${theme.shared.label["grid-area"]};
+	color: ${theme.shared.label.color};
+	${convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
+	)}
+`;
+const menuItemDescriptionStyles = (theme) => css`
+	grid-area: ${theme.shared.description["grid-area"]};
+	color: ${theme.shared.description.color};
+	${convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
+`;
+const menuItemAsideStyles = (theme) => css`
+	grid-area: ${theme.shared.aside["grid-area"]};
+	justify-self: ${theme.shared.aside["justify-self"]};
+	align-self: ${theme.shared.aside["align-self"]};
+	color: ${theme.shared.aside.color};
+	${convertTypographyToEmotionStringStyle(theme.shared.aside.typography)}
+`;
+const defaultMenuSeparatorTheme = componentMenu.menuSeparator;
+const menuSeparatorStyles = (theme) => css`
+	background-color: ${theme.shared["background-color"]};
+	height: ${theme.shared.height};
+	width: ${theme.shared.width};
+`;
+const defaultMenuPopoverTheme = componentMenu.menuPopover;
+const menuPopoverStyles = (theme, { size }) => css`
+	overflow: ${theme.shared.overflow};
+	max-width: ${theme[size]["max-width"]};
+	width: ${theme[size].width};
+	box-shadow: ${theme.shared.shadow};
+`;
+
+export { defaultMenuItemTheme, defaultMenuPopoverTheme, defaultMenuSectionTheme, defaultMenuSeparatorTheme, defaultMenuTheme, menuItemAsideStyles, menuItemDescriptionStyles, menuItemIconStyles, menuItemLabelStyles, menuItemStyles, menuPopoverStyles, menuSectionHeaderStyles, menuSeparatorStyles, menuStyles };

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

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react$1 = require('@emotion/react');
-var react = require('react');
+var react = require('@emotion/react');
+var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var styles = require('./styles.cjs');
 
@@ -28,10 +28,10 @@ function TagTable({
   cssOverrides
 }) {
   const canDrag = !!onReorder;
-  const [localRows, setLocalRows] = react.useState(() => [...rows]);
-  const localRowsRef = react.useRef(localRows);
+  const [localRows, setLocalRows] = React.useState(() => [...rows]);
+  const localRowsRef = React.useRef(localRows);
   localRowsRef.current = localRows;
-  react.useEffect(() => {
+  React.useEffect(() => {
     setLocalRows([...rows]);
   }, [rows]);
   const filtered = localRows.filter(filterRows);
@@ -99,7 +99,7 @@ function TagTable({
                   reactAriaComponents.Cell,
                   {
                     css: [
-                      react$1.css`
+                      react.css`
 											width: 1%;
 										`
                     ],
@@ -111,7 +111,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											position: relative;
 											width: 15%;
 										`
@@ -124,7 +124,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 										width: 50%;
 									`
                     ],
@@ -137,7 +137,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											width: 20%;
 										`
                     ],
@@ -149,7 +149,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											text-align: center;
 											width: 10%;
 										`
@@ -172,7 +172,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											text-align: center;
 											width: 10%;
 										`

package/dist/components/topbar/toolName/TopBarToolName.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var mergeDeep = require('../../../util/mergeDeep.cjs');
+var Favicon = require('../../favicon/Favicon.cjs');
+var Icon = require('../../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+const TopBarToolName = ({
+  name,
+  favicon,
+  subsection,
+  subsectionIcon,
+  theme = {},
+  cssOverrides
+}) => {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme)], children: name }),
+    subsection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.dividerStyles(mergedTheme), children: "\xA0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.subsectionStyles(mergedTheme), children: [
+        subsectionIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "sm", children: subsectionIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.subsectionTypography(mergedTheme), children: subsection })
+      ] })
+    ] })
+  ] });
+};
+
+exports.TopBarToolName = TopBarToolName;

package/dist/components/topbar/toolName/TopBarToolName.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../../util/mergeDeep.js';
+import { Favicon } from '../../favicon/Favicon.js';
+import { Icon } from '../../icon/Icon.js';
+import { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
+
+const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
+  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
+  return jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme)], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] });
+};
+
+export { TopBarToolName };

package/dist/components/topbar/toolName/styles.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var react = require('@emotion/react');
+var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+var typography = require('../../../styleD/utils/semantic/typography.cjs');
+
+const defaultToolNameTheme = TopBar.componentTopBar.ToolName;
+const toolNameStyles = (theme) => {
+  return react.css`
+		display: ${theme.display};
+		align-items: ${theme["align-items"]};
+		gap: ${theme.gap};
+	`;
+};
+const toolNameTypography = (theme) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(theme.typography)}
+	`;
+};
+const dividerStyles = (theme) => {
+  return react.css`
+		border-right: ${theme.divider.border};
+		height: ${theme.divider.height};
+	`;
+};
+const subsectionStyles = (theme) => {
+  return react.css`
+		display: ${theme.display};
+		align-items: ${theme["align-items"]};
+		gap: ${theme.subsection.gap};
+	`;
+};
+const subsectionTypography = (theme) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(theme.subsection.typography)}
+	`;
+};
+
+exports.defaultToolNameTheme = defaultToolNameTheme;
+exports.dividerStyles = dividerStyles;
+exports.subsectionStyles = subsectionStyles;
+exports.subsectionTypography = subsectionTypography;
+exports.toolNameStyles = toolNameStyles;
+exports.toolNameTypography = toolNameTypography;

package/dist/components/topbar/toolName/styles.js

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
+
+const defaultToolNameTheme = componentTopBar.ToolName;
+const toolNameStyles = (theme) => {
+  return css`
+		display: ${theme.display};
+		align-items: ${theme["align-items"]};
+		gap: ${theme.gap};
+	`;
+};
+const toolNameTypography = (theme) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme.typography)}
+	`;
+};
+const dividerStyles = (theme) => {
+  return css`
+		border-right: ${theme.divider.border};
+		height: ${theme.divider.height};
+	`;
+};
+const subsectionStyles = (theme) => {
+  return css`
+		display: ${theme.display};
+		align-items: ${theme["align-items"]};
+		gap: ${theme.subsection.gap};
+	`;
+};
+const subsectionTypography = (theme) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme.subsection.typography)}
+	`;
+};
+
+export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameStyles, toolNameTypography };

package/dist/index.cjs

@@ -9,6 +9,8 @@ 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 favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var menu = require('./styleD/build/typescript/component/menu.cjs');
+var TopBar = require('./styleD/build/typescript/component/TopBar.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');
@@ -17,6 +19,7 @@ var radius = require('./styleD/build/typescript/base/radius.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');
+var shadow = require('./styleD/build/typescript/semantic/shadow.cjs');
 
 
 
@@ -29,6 +32,8 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentMenu = menu.componentMenu;
+exports.componentTopBar = TopBar.componentTopBar;
 exports.baseColors = colors.baseColors;
 exports.baseTypography = typography.baseTypography;
 exports.baseSpacing = spacing.baseSpacing;
@@ -37,3 +42,4 @@ exports.baseRadius = radius.baseRadius;
 exports.semanticColors = colors$1.semanticColors;
 exports.semanticTypography = typography$2.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;
+exports.semanticShadow = shadow.semanticShadow;

package/dist/index.js

@@ -7,6 +7,8 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentMenu } from './styleD/build/typescript/component/menu.js';
+export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
@@ -15,3 +17,4 @@ export { baseRadius } from './styleD/build/typescript/base/radius.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
+export { semanticShadow } from './styleD/build/typescript/semantic/shadow.js';

package/dist/menu.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var Menu = require('./components/menu/Menu.cjs');
+var menu = require('./styleD/build/typescript/component/menu.cjs');
+
+
+
+exports.Menu = Menu.Menu;
+exports.MenuItem = Menu.MenuItem;
+exports.MenuSection = Menu.MenuSection;
+exports.MenuSeparator = Menu.MenuSeparator;
+exports.MenuToggle = Menu.MenuToggle;
+exports.componentMenu = menu.componentMenu;

package/dist/menu.js

@@ -0,0 +1,2 @@
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle } from './components/menu/Menu.js';
+export { componentMenu } from './styleD/build/typescript/component/menu.js';

package/dist/styleD/build/css/component/TopBar.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-top-bar-tool-name-display: flex;
+	--component-top-bar-tool-name-align-items: center;
+	--component-top-bar-tool-name-gap: 8px;
+	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
+		'GH Guardian Headline';
+	--component-top-bar-tool-name-typography-letter-spacing: 0rem;
+	--component-top-bar-tool-name-typography-font-width: 100;
+	--component-top-bar-tool-name-divider-border: 0.0625rem solid #cccccc;
+	--component-top-bar-tool-name-divider-height: 2rem;
+	--component-top-bar-tool-name-subsection-gap: 2px;
+	--component-top-bar-tool-name-subsection-typography-font: normal 700 1rem/1.15
+		'Open Sans';
+	--component-top-bar-tool-name-subsection-typography-letter-spacing: -0.0125rem;
+	--component-top-bar-tool-name-subsection-typography-font-width: 88;
+}

package/dist/styleD/build/css/component/menu.css

@@ -0,0 +1,82 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-menu-menu-shared-display: flex;
+	--component-menu-menu-shared-flex-direction: column;
+	--component-menu-menu-shared-background-color: #ffffff;
+	--component-menu-menu-shared-border: 0.0625rem solid #cccccc;
+	--component-menu-menu-section-header-shared-display: flex;
+	--component-menu-menu-section-header-shared-align-items: center;
+	--component-menu-menu-section-header-shared-padding-top: 0;
+	--component-menu-menu-section-header-shared-padding-right: 0.5rem;
+	--component-menu-menu-section-header-shared-padding-bottom: 0;
+	--component-menu-menu-section-header-shared-padding-left: 0.5rem;
+	--component-menu-menu-section-header-shared-background-color: #ededed;
+	--component-menu-menu-section-header-shared-color: #000000;
+	--component-menu-menu-section-header-sm-height: 1.5rem;
+	--component-menu-menu-section-header-sm-typography-font: normal 700 0.875rem/1
+		'Open Sans';
+	--component-menu-menu-section-header-sm-typography-letter-spacing: -0.0125rem;
+	--component-menu-menu-section-header-sm-typography-font-width: 95;
+	--component-menu-menu-section-header-md-height: 2rem;
+	--component-menu-menu-section-header-md-typography-font: normal 700 1rem/1
+		'Open Sans';
+	--component-menu-menu-section-header-md-typography-letter-spacing: -0.0125rem;
+	--component-menu-menu-section-header-md-typography-font-width: 95;
+	--component-menu-menu-item-shared-display: grid;
+	--component-menu-menu-item-shared-grid-template-areas: 'icon label aside';
+	--component-menu-menu-item-shared-grid-template-areas-with-description: 'icon label aside'
+		'. description .';
+	--component-menu-menu-item-shared-grid-template-columns: auto 6fr 1fr;
+	--component-menu-menu-item-shared-gap: 0.25rem;
+	--component-menu-menu-item-shared-align-items: center;
+	--component-menu-menu-item-shared-padding-top: 0.75rem;
+	--component-menu-menu-item-shared-padding-right: 1rem;
+	--component-menu-menu-item-shared-padding-bottom: 0.75rem;
+	--component-menu-menu-item-shared-padding-left: 1rem;
+	--component-menu-menu-item-shared-border-bottom: 0.0625rem solid #cccccc;
+	--component-menu-menu-item-shared-icon-grid-area: icon;
+	--component-menu-menu-item-shared-icon-align-self: start;
+	--component-menu-menu-item-shared-icon-color: #545454;
+	--component-menu-menu-item-shared-label-grid-area: label;
+	--component-menu-menu-item-shared-label-color: #000000;
+	--component-menu-menu-item-shared-label-typography-font: normal 460 1rem/1.3
+		'Open Sans';
+	--component-menu-menu-item-shared-label-typography-letter-spacing: 0rem;
+	--component-menu-menu-item-shared-label-typography-font-width: 95;
+	--component-menu-menu-item-shared-description-grid-area: description;
+	--component-menu-menu-item-shared-description-color: #545454;
+	--component-menu-menu-item-shared-description-typography-font: normal 460
+		0.875rem/1.3 'Open Sans';
+	--component-menu-menu-item-shared-description-typography-letter-spacing: 0rem;
+	--component-menu-menu-item-shared-description-typography-font-width: 95;
+	--component-menu-menu-item-shared-aside-grid-area: aside;
+	--component-menu-menu-item-shared-aside-justify-self: end;
+	--component-menu-menu-item-shared-aside-align-self: start;
+	--component-menu-menu-item-shared-aside-color: #000000;
+	--component-menu-menu-item-shared-aside-typography-font: normal 460 1rem/1.3
+		'Open Sans';
+	--component-menu-menu-item-shared-aside-typography-letter-spacing: 0rem;
+	--component-menu-menu-item-shared-aside-typography-font-width: 95;
+	--component-menu-menu-item-shared-last-child-border-bottom: none;
+	--component-menu-menu-item-shared-hover-background-color: #ededed;
+	--component-menu-menu-item-shared-focus-visible-outline: 0.125rem solid
+		#0072a9;
+	--component-menu-menu-item-shared-focus-visible-outline-offset: -0.125rem;
+	--component-menu-menu-item-sm-icon-size: 1.125rem;
+	--component-menu-menu-item-sm-icon-line-height: 1.3;
+	--component-menu-menu-item-md-icon-size: 1.25rem;
+	--component-menu-menu-item-md-icon-line-height: 1.3;
+	--component-menu-menu-separator-shared-background-color: #ededed;
+	--component-menu-menu-separator-shared-height: 0.5rem;
+	--component-menu-menu-separator-shared-width: 100%;
+	--component-menu-menu-popover-shared-overflow: auto;
+	--component-menu-menu-popover-shared-shadow: 0 0.125rem 0.375rem 0
+		rgb(0% 0% 0% / 0.3);
+	--component-menu-menu-popover-sm-max-width: 200px;
+	--component-menu-menu-popover-sm-width: 100%;
+	--component-menu-menu-popover-md-max-width: 320px;
+	--component-menu-menu-popover-md-width: 100%;
+}

package/dist/styleD/build/css/semantic/shadow.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-shadow-raised: 0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3);
+}

package/dist/styleD/build/typescript/component/TopBar.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+const componentTopBar = {
+  ToolName: {
+    display: "flex",
+    "align-items": "center",
+    gap: "8px",
+    typography: {
+      font: "normal 700 1.25rem/1.15 GH Guardian Headline",
+      letterSpacing: "0rem",
+      fontWidth: 100
+    },
+    divider: {
+      border: "0.0625rem solid #cccccc",
+      height: "2rem"
+    },
+    subsection: {
+      gap: "2px",
+      typography: {
+        font: "normal 700 1rem/1.15 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 88
+      }
+    }
+  }
+};
+
+exports.componentTopBar = componentTopBar;

package/dist/styleD/build/typescript/component/TopBar.js

@@ -0,0 +1,26 @@
+const componentTopBar = {
+  ToolName: {
+    display: "flex",
+    "align-items": "center",
+    gap: "8px",
+    typography: {
+      font: "normal 700 1.25rem/1.15 GH Guardian Headline",
+      letterSpacing: "0rem",
+      fontWidth: 100
+    },
+    divider: {
+      border: "0.0625rem solid #cccccc",
+      height: "2rem"
+    },
+    subsection: {
+      gap: "2px",
+      typography: {
+        font: "normal 700 1rem/1.15 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 88
+      }
+    }
+  }
+};
+
+export { componentTopBar };

package/dist/styleD/build/typescript/component/menu.cjs

@@ -0,0 +1,140 @@
+'use strict';
+
+const componentMenu = {
+  menu: {
+    shared: {
+      display: "flex",
+      "flex-direction": "column",
+      "background-color": "#ffffff",
+      border: "0.0625rem solid #cccccc"
+    }
+  },
+  menuSection: {
+    header: {
+      shared: {
+        display: "flex",
+        "align-items": "center",
+        padding: {
+          top: "0",
+          right: "0.5rem",
+          bottom: "0",
+          left: "0.5rem"
+        },
+        "background-color": "#ededed",
+        color: "#000000"
+      },
+      sm: {
+        height: "1.5rem",
+        typography: {
+          font: "normal 700 0.875rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      },
+      md: {
+        height: "2rem",
+        typography: {
+          font: "normal 700 1rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      }
+    }
+  },
+  menuItem: {
+    shared: {
+      display: "grid",
+      "grid-template-areas": "'icon label aside'",
+      "grid-template-areas-with-description": "'icon label aside' '. description .'",
+      "grid-template-columns": "auto 6fr 1fr",
+      gap: "0.25rem",
+      "align-items": "center",
+      padding: {
+        top: "0.75rem",
+        right: "1rem",
+        bottom: "0.75rem",
+        left: "1rem"
+      },
+      "border-bottom": "0.0625rem solid #cccccc",
+      icon: {
+        "grid-area": "icon",
+        "align-self": "start",
+        color: "#545454"
+      },
+      label: {
+        "grid-area": "label",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      description: {
+        "grid-area": "description",
+        color: "#545454",
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      aside: {
+        "grid-area": "aside",
+        "justify-self": "end",
+        "align-self": "start",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      ":last-child": {
+        "border-bottom": "none"
+      },
+      ":hover": {
+        "background-color": "#ededed"
+      },
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.125rem"
+      }
+    },
+    sm: {
+      icon: {
+        size: "1.125rem",
+        "line-height": 1.3
+      }
+    },
+    md: {
+      icon: {
+        size: "1.25rem",
+        "line-height": 1.3
+      }
+    }
+  },
+  menuSeparator: {
+    shared: {
+      "background-color": "#ededed",
+      height: "0.5rem",
+      width: "100%"
+    }
+  },
+  menuPopover: {
+    shared: {
+      overflow: "auto",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    },
+    sm: {
+      "max-width": "200px",
+      width: "100%"
+    },
+    md: {
+      "max-width": "320px",
+      width: "100%"
+    }
+  }
+};
+
+exports.componentMenu = componentMenu;