@ndlib/component-library 0.0.45 → 0.0.47

package/dist/components/composites/NavMenu/demo.js

@@ -85,5 +85,4 @@ const demoMenu = {
         },
     ],
 };
-// This is needed because NavMenu doesn't control rendering of top-level menu items
 export const DemoMenuImplementation = () => (_jsx(MenuProvider, Object.assign({ menu: demoMenu }, { children: ({ menu, getMenuProps, getMenuItemProps }) => (_jsxs(_Fragment, { children: [_jsx(Row, Object.assign({}, getMenuProps(), { children: menu.items.map((menuItem) => (_createElement(Button, Object.assign({}, getMenuItemProps([menuItem.id]), { sx: { m: 1 }, key: menuItem.id }), menuItem.label))) })), _jsx(NavMenu, {})] })) })));

package/dist/components/composites/NavMenu/index.js

@@ -9,7 +9,6 @@ import { Link } from '../../elements/Link';
 import { LINE_HEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
 import { importedDefaultComponentShim } from '../../../utils/misc';
-// import { Column, HEADING_SIZE, Heading, LINE_HEIGHT, Link, Row } from "../../.."
 const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
 export const NavMenu = (props) => {
     const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();

package/dist/components/elements/Alerts/Alerts.test.js

@@ -8,7 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-// import { fireEvent } from '@testing-library/react'
 import { vi } from 'vitest';
 import { render } from '../../../utils/test';
 import { useAlerts } from '../../providers/alerts';

package/dist/components/elements/Alerts/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { ALERT_TYPE } from '../../providers/alerts';
 import { StyledElementProps } from '../../../theme';

package/dist/components/elements/ArrowLink/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/** @jsxImportSource theme-ui */
 import { StyledElementProps } from '../../../theme';
 type ArrowLinkProps = StyledElementProps<HTMLLinkElement, {
     to: string;

package/dist/components/elements/Button/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../theme';
 import { COLOR } from '../../../theme/colors';

package/dist/components/elements/Button/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { useTheme } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
@@ -49,7 +48,6 @@ export var BUTTON_TYPE;
     BUTTON_TYPE["DEFAULT"] = "default";
     BUTTON_TYPE["TEXT"] = "text";
     BUTTON_TYPE["OUTLINE"] = "outline";
-    // ARROW
 })(BUTTON_TYPE || (BUTTON_TYPE = {}));
 export const Button = React.forwardRef((_a, ref) => {
     var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading, disableFocusStyles } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading", "disableFocusStyles"]);

package/dist/components/elements/Fields/Checkbox/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 type CheckboxProps = StyledElementProps<HTMLInputElement, {

package/dist/components/elements/Fields/CheckboxGroup/index.js

@@ -22,7 +22,6 @@ export const CheckboxGroup = (_a) => {
     var { options, checkedOptions, columns: columnsProp, columnStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "onChange"]);
     const columns = columnsProp || 1;
     const optionsByColumn = useMemo(() => {
-        // place first i/n items into first column, next i/n items into second column, etc.
         const optionsByColumn = [];
         for (let i = 0; i < options.length; i++) {
             const maxPerColumn = Math.ceil(options.length / columns);

package/dist/components/elements/Fields/DatePicker/index.js

@@ -19,8 +19,6 @@ import { Box } from '../../layout/Box';
 import { importedDefaultComponentShim } from '../../../../utils/misc';
 const CalendarIcon = importedDefaultComponentShim(_CalendarIcon);
 const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
-// Need to do this to allow passing props to TextInput
-// react-datepicker will overwrite all props passed to customInput
 export const InputWrapper = React.forwardRef(({ onChange, value, children, onClick }, ref) => {
     return React.cloneElement(children, {
         value: value,

package/dist/components/elements/Fields/Radio/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 type RadioProps = StyledElementProps<HTMLInputElement, {

package/dist/components/elements/Fields/Select/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 import { INPUT_SIZE } from '../TextInput';

package/dist/components/elements/Fields/Select/index.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import { useMemo, useState } from 'react';
 import _ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
@@ -159,23 +158,16 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
                     px: 1,
                     top: labelOffsetMap[size],
-                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, 
-                // A11y attributes
-                role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
+                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
                     ? getOptionId(stagedOptionValue)
-                    : undefined, 
-                // Style config
-                type: BUTTON_TYPE.OUTLINE, size: buttonSize, onBlur: () => close(), onFocus: () => open(), onKeyDown: onKeyDown, onMouseDown: () => {
+                    : undefined, type: BUTTON_TYPE.OUTLINE, size: buttonSize, onBlur: () => close(), onFocus: () => open(), onKeyDown: onKeyDown, onMouseDown: () => {
                     if (!isOpen) {
                         open();
                     }
                     else {
                         close();
                     }
-                }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', 
-                    // borderColor: COLOR.GRAY,
-                    // borderRadius: '4px',
-                    flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {

package/dist/components/elements/Fields/TextInput/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 import { StyledElementProps } from '../../../../theme';

package/dist/components/elements/Fields/TextInput/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../../theme/typography';
 import { useTheme } from '../../../../theme';

package/dist/components/elements/Group/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../theme';
 type GroupContextType = {

package/dist/components/elements/Group/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useEnvironment } from '../../providers/env';
 export var GROUP_TYPE;

package/dist/components/elements/Icon/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { COLOR } from '../../../theme/colors';
 import { StyledElementProps } from '../../../theme';

package/dist/components/elements/Icon/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { COLOR, colors } from '../../../theme/colors';
 import { useEnvironment } from '../../providers/env';

package/dist/components/elements/Link/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../theme';
 type LinkProps = StyledElementProps<HTMLSpanElement, {

package/dist/components/elements/List/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../theme';
 import { COLOR } from '../../..';

package/dist/components/elements/List/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import _CircleIcon from '@mui/icons-material/Circle';
 import _CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';

package/dist/components/elements/ListBox/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React, { Key } from 'react';
 import { StyledElementProps } from '../../../theme';
 import { BasicOption, RenderOption } from '../Fields/option';

package/dist/components/elements/ListBox/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { COLOR } from '../../..';
 import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';

package/dist/components/elements/Markdown/index.js

@@ -63,7 +63,6 @@ export const Markdown = (_a) => {
                 h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 6 }))),
                 ol: (props) => _jsx(List, Object.assign({}, props, { ordered: true, sx: { mt: 4 } })),
                 ul: (props) => _jsx(List, Object.assign({}, props, { sx: { mt: 4 } })),
-                // eslint-disable-next-line
                 li: (_a) => {
                     var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
                     return (_jsx(ListItem, Object.assign({ index: index }, props)));

package/dist/components/elements/Pill/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { COLOR } from '../../../theme/colors';
 export declare enum PILL_SIZE {

package/dist/components/elements/Pill/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React, { useState } from 'react';
 import { useTheme } from '../../../theme';
 import { COLOR, colors } from '../../../theme/colors';

package/dist/components/elements/Spinner/Spinner.stories.js

@@ -3,12 +3,9 @@ import { Column, Group, HEADING_SIZE, Heading } from '../../..';
 import { SPINNER_SIZE, Spinner } from '.';
 import { GROUP_TYPE } from '../Group';
 import { COLOR } from '../../../theme/colors';
-// import { HEADING_SIZE, Heading } from '.'
-// import { COLOR } from '../../../../theme/colors'
 const meta = {
     title: 'Elements/Spinner',
     component: Spinner,
-    //👇 Enables auto-generated documentation for the component story
     tags: ['autodocs'],
 };
 export default meta;

package/dist/components/elements/Spinner/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import { keyframes } from '@emotion/react';
 import { useTheme } from '../../../theme';
 import { COLOR } from '../../../theme/colors';

package/dist/components/elements/layout/Box.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/** @jsxImportSource theme-ui */
 import { StyledElementProps } from '../../../theme';
 export type BoxProps = StyledElementProps<HTMLDivElement>;
 export declare const Box: React.FC<BoxProps>;

package/dist/components/elements/layout/Column.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/** @jsxImportSource theme-ui */
 import { StyledElementProps } from '../../../theme';
 import { FlexHelperProps } from './Row';
 type ColumnProps = StyledElementProps<HTMLDivElement, FlexHelperProps>;

package/dist/components/elements/layout/Row.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/** @jsxImportSource theme-ui */
 import { CSSProperties, ThemeUICSSProperties } from 'theme-ui';
 import { StyledElementProps } from '../../../theme';
 export declare const convertFlexHelperProps: (props: FlexHelperProps) => ThemeUICSSProperties;

package/dist/components/elements/layout/Row.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-// Putting shared utils and types here so autodocs can pick them up
 export const convertFlexHelperProps = (props) => {
     const styleObject = {};
     if (props.grow) {

package/dist/components/elements/text/Heading/Heading.stories.js

@@ -6,7 +6,6 @@ import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/Heading',
     component: Heading,
-    //👇 Enables auto-generated documentation for the component story
     tags: ['autodocs'],
 };
 export default meta;

package/dist/components/elements/text/Heading/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 import { StyledElementProps } from '../../../../theme';

package/dist/components/elements/text/Heading/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import { useEffect } from 'react';
 import { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
 import { GROUP_TYPE, useGroup } from '../../Group';
@@ -41,7 +40,6 @@ export const Heading = (_a) => {
     var { sx, size, standalone, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "typography", "level"]);
     const { level: groupLevel, labelId, type, trackHeadingRendered } = useGroup();
     const { flagInDevelopment } = useEnvironment();
-    // should prioritize explicitly passed level, eg if coming from markdown
     const level = levelParam || groupLevel;
     useEffect(() => {
         trackHeadingRendered();

package/dist/components/elements/text/Inline/Inline.stories.js

@@ -4,7 +4,6 @@ import { Paragraph } from '../Paragraph';
 const meta = {
     title: 'Elements/Inline',
     component: Bold,
-    //👇 Enables auto-generated documentation for the component story
     tags: ['autodocs'],
 };
 export default meta;

package/dist/components/elements/text/Inline/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 type InlineProps = StyledElementProps<HTMLSpanElement>;

package/dist/components/elements/text/Label/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 import { StyledElementProps } from '../../../../theme';

package/dist/components/elements/text/Paragraph/Paragraph.stories.js

@@ -7,7 +7,6 @@ import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/Paragraph',
     component: Paragraph,
-    //👇 Enables auto-generated documentation for the component story
     tags: ['autodocs'],
 };
 export default meta;

package/dist/components/elements/text/Paragraph/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 import { StyledElementProps } from '../../../../theme';

package/dist/components/elements/text/ReadMore/ReadMore.stories.js

@@ -6,7 +6,6 @@ import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/ReadMore',
     component: ReadMore,
-    //👇 Enables auto-generated documentation for the component story
     tags: ['autodocs'],
 };
 export default meta;

package/dist/components/elements/text/ReadMore/index.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';

package/dist/components/elements/text/ReadMore/index.js

@@ -10,14 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
 import React, { useState } from 'react';
 import { useTheme } from '../../../../theme';
 import { COLOR, colors } from '../../../../theme/colors';
 import { getTypographyStyles, } from '../../../../theme/typography';
 import { useMediaQuery } from '../../../providers/media';
 const ReadMoreLink = (props) => {
-    // const theme = useTheme()
     const bg = colors[props.bg || COLOR.BACKGROUND];
     const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
     return (_jsx("div", Object.assign({ css: {
@@ -38,16 +36,10 @@ export const useLinesHeight = (args) => {
     const styles = getTypographyStyles(args.typography);
     const fontSize = styles.fontSize;
     const fontSizeRem = theme.fontSizes[fontSize];
-    // slice of the 'rem' from end of fontSize string and convert to number
     const fontSizeNumber = Number(fontSizeRem.slice(0, fontSizeRem.length - 3));
-    // Multiply the fontSize by the lineHeight ratio and the number of lines
     const linesHeight = fontSizeNumber * theme.lineHeights[styles.lineHeight] * args.lines;
     return `${linesHeight}rem`;
 };
-// A react component that accepts text content and truncates it 3 lines. If the content
-// exceeds the alloted space, an ellipsis will be placed at the end of the last line.
-// This component does not use the css property `text-overflow: ellipsis`
-// because it does not work with multiple lines of text.
 export const ReadMore = (_a) => {
     var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);
     const ref = React.useRef(null);
@@ -57,7 +49,6 @@ export const ReadMore = (_a) => {
     const { color, bg } = sx || {};
     React.useEffect(() => {
         if (ref.current) {
-            // Check if the content exceeds the alloted space
             if (fixedHeight) {
                 ref.current.style.height = wrapperHeight;
             }

package/dist/components/providers/componentConfig.js

@@ -32,7 +32,6 @@ const defaultComponentConfig = {
 export const ComponentConfigContext = createContext(defaultComponentConfig);
 export const useComponentConfig = () => useContext(ComponentConfigContext);
 export const ComponentConfigProvider = ({ config: configParam, children }) => {
-    const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), [] // eslint-disable-line
-    );
+    const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), []);
     return (_jsx(ComponentConfigContext.Provider, Object.assign({ value: config }, { children: children })));
 };

package/dist/components/providers/media.js

@@ -23,7 +23,7 @@ export const MediaSizeProvider = ({ children, }) => {
             screenSize,
             breakpoint,
         };
-    }, [renderCount, breakpoints]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [renderCount, breakpoints]);
     useEffect(() => {
         if (typeof window === 'undefined')
             return;

package/dist/components/providers/menu.js

@@ -232,17 +232,12 @@ export const MenuProvider = ({ menu, children, }) => {
         const isTopLevel = path.length === 1;
         const isActivePath = equals(path, activePath);
         return Object.assign(Object.assign({}, checkMidclickProps), { role: 'menuitem', 'aria-roledescription': getAriaRoleDescription(activeParentMenu.orientation), id: getItemId(path), onKeyDown: equals(path, activePath) ? onKeyDown : undefined, tabIndex: -1, onFocus: () => {
-                // Screen readers will send focus to buttons without firing keydown or click
-                // Call setActivePath to sync
                 if (!isMidClick) {
                     setActivePath(path);
                 }
             }, onMouseDown: () => {
                 checkMidclickProps.onMouseDown();
                 const menuItem = getMenuItem(path);
-                // Because blurring will close the dropdown menu, link navigation should be
-                // triggered before that happened. Mousedown is used instead of click because
-                // it is triggered before blur event
                 if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.LINK) {
                     window.location.href = menuItem.action.to;
                 }
@@ -250,25 +245,18 @@ export const MenuProvider = ({ menu, children, }) => {
                 const menuItem = getMenuItem(path);
                 const isSubmenu = (menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.SUBMENU;
                 if (!isSubmenu) {
-                    // Link menu items should not trigger navigation because that is handled by mousedown listener
                     e.preventDefault();
                 }
-                // If user is using a mouse, clicking the top level menu that is open
-                // should close the menu
                 if (isSubmenu &&
                     isActivePath &&
                     isTopLevel &&
                     !usingKeyboard &&
                     isOpen) {
                     close();
-                    // Clicking a top level menu that is closed or not the active menu should
-                    // open that menu
                 }
                 else if (isSubmenu && isTopLevel && !usingKeyboard && !isOpen) {
                     setActivePath(path);
                     open();
-                    // If user is using a mouse, or if the menu is a link, handle the same way
-                    // as enter key press
                 }
                 else {
                     onKeyDown({

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elem
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
-export { Group, useGroup } from './components/elements/Group';
+export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
 export { Markdown } from './components/elements/Markdown';
 export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';

package/dist/index.js

@@ -9,7 +9,7 @@ export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elem
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
-export { Group, useGroup } from './components/elements/Group';
+export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
 export { Markdown } from './components/elements/Markdown';
 export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';

package/dist/theme/Typography.stories.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import type { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta;
 export default meta;

package/dist/theme/custom.js

@@ -1,4 +1,3 @@
-// Values in these files aren't part of theme-ui / sx spec and need to be pulled from theme directly
 export var BOX_SHADOW;
 (function (BOX_SHADOW) {
     BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";

package/dist/theme/typography.js

@@ -69,10 +69,6 @@ export const fontStyles = {
         [FONT_WEIGHT.HEADING]: 600,
         [FONT_WEIGHT.BOLD]: 700,
     },
-    // letterSpacings: {
-    //   [LETTER_SPACING.NORMAL]: 'none',
-    //   [LETTER_SPACING.EXTRA]: '0.5px'
-    // }
 };
 export var TYPOGRAPHY_TYPE;
 (function (TYPOGRAPHY_TYPE) {

package/dist/utils/misc.js

@@ -1,8 +1,3 @@
-// :first-child can cause problems with emotion because styles tags are sometimes added before
-// nodes, which can throw off :first-child selector. Not sure if this will actually be an issue
-// for us, but it does create noisy warnings.
-//
-// This work-around mimics :first-child behavior in a way that plays nice with emotion
 export const firstChildAltSelector = ':first-of-type:not(style):not(:first-of-type ~ *),style + *';
 export var KEY_CODES;
 (function (KEY_CODES) {
@@ -14,10 +9,6 @@ export var KEY_CODES;
     KEY_CODES["ESCAPE"] = "Escape";
 })(KEY_CODES || (KEY_CODES = {}));
 export const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b);
-// @mui/material-icons and react-datepicker dependencies exports
-// their modules as { default: Component } with is causing problems
-// when included in downstream apps. This shim prevents issues by
-// resolving ambiguity on how to handle the imports explicitly
 export function importedDefaultComponentShim(component) {
     if (component && typeof component === 'object' && 'default' in component) {
         return component.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "type": "module",
   "sideEffects": false,
   "files": [