@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/forms/select/Select.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import { Button } from '../../button/Button';
+import { ClearButton } from '../../clear-button/ClearButton';
+import { Menu } from '../../menu/Menu';
+import { Popover } from '../../popover/Popover';
+import { InputContainer } from '../input-container/InputContainer';
+export function Select({ 
+// InputContainer props
+label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, 
+// ✅ tooltip props
+tooltip, tooltipPlacement = 'right', 
+// Select props
+id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const describedById = `${controlId}-desc`;
+    const popoverRef = useRef(null);
+    const optionRefs = useRef([]);
+    const selectedIndex = options.findIndex(o => o.value === selectedValue);
+    const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    useEffect(() => {
+        var _a;
+        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex]);
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                setActiveIndex(i => Math.min(i + 1, options.length - 1));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setActiveIndex(i => Math.max(i - 1, 0));
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                const opt = options[activeIndex];
+                if (opt) {
+                    onChange(opt.value);
+                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.close();
+                break;
+            }
+        }
+    };
+    const selected = options.find(o => o.value === selectedValue);
+    // Tooltip trigger props (anchor to the Button)
+    const tooltipEnabled = Boolean(tooltip);
+    const { triggerProps, id: tooltipId } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    // If you want BOTH tooltip + error/helpText describedby:
+    // merge describedby ids (keeping existing describedById)
+    const describedBy = (() => {
+        const ids = [];
+        if (error || helpText)
+            ids.push(describedById);
+        if (tooltipEnabled)
+            ids.push(tooltipId);
+        return ids.length ? ids.join(' ') : undefined;
+    })();
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button
+                // IMPORTANT: keep triggerProps last for events, but let our aria-describedby win
+                // We'll spread triggerProps and then override aria-describedby to include both.
+                , { ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+                        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+                        onClick(e);
+                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                        const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
+                            ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
+                            : opt.value === selectedValue;
+                        const isActive = index === activeIndex;
+                        return (_jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
+                                    var _a;
+                                    onChange(opt.value);
+                                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                                }, onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, String(opt.value)));
+                    }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
+}

package/dist/components/forms/text-area/Textarea.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'disabled'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    value: string;
+    inputChanged: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    disabled?: boolean;
+    loading?: React.ReactNode;
+    rows?: number;
+    showCount?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    showTooltip?: boolean;
+    adjustHeight?: boolean;
+    placeholder?: string;
+    id?: string;
+};
+export declare const Textarea: React.FC<TextareaProps>;

package/dist/components/forms/text-area/Textarea.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useId, useMemo } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Textarea.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, 
+// InputContainer props
+label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
+// Native textarea props
+className, ...rest }) {
+    const generatedId = useId();
+    const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
+    const onInput = useCallback((e) => {
+        const textarea = e.currentTarget;
+        if (adjustHeight) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+        inputChanged(e);
+    }, [inputChanged, adjustHeight]);
+    const inputField = useMemo(() => (_jsx("textarea", { ...rest, id: textareaId, className: [styles.textarea, className].filter(Boolean).join(' '), placeholder: placeholder, rows: rows, value: value, onChange: onInput, disabled: disabled, "aria-invalid": Boolean(error) || undefined })), [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]);
+    // Enable tooltip if tooltip exists, and if showTooltip is either true or undefined.
+    // (So you can deprecate showTooltip later without breaking callers.)
+    const tooltipEnabled = Boolean(tooltip) && (showTooltip !== null && showTooltip !== void 0 ? showTooltip : true);
+    const { triggerProps } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    return (_jsx(InputContainer, { label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
+};
+Textarea.displayName = 'Textarea';

package/dist/components/forms/text-area/Textarea.module.css

@@ -0,0 +1,26 @@
+.container {
+  flex-grow: 1;
+}
+.container textarea {
+  width: 100%;
+  padding: var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-sm);
+  font-family: var(--font-family);
+}
+
+.internalCount {
+  text-align: right;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-subtle);
+}
+
+.container textarea:hover {
+  border-color: var(--color-border-strong);
+}
+
+.container textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}

package/dist/components/headline/Headline.d.ts

@@ -1,5 +1,6 @@
 import React, { JSX, PropsWithChildren } from 'react';
 import { Severity } from '../../constants/severity.types';
+type HeadlineTone = 'dark' | 'light';
 interface HeadlineProps extends React.AriaAttributes {
     size?: 1 | 2 | 3 | 4 | 5 | 6;
     marker?: boolean;
@@ -9,6 +10,13 @@ interface HeadlineProps extends React.AriaAttributes {
     subHeadline?: string | JSX.Element;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
+    /**
+     * Optional visual tone override:
+     * - dark: force normal foreground colours
+     * - light: force on-strong/light text
+     * If omitted, the headline simply inherits its colour from its parent.
+     */
+    tone?: HeadlineTone;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
 export {};

package/dist/components/headline/Headline.js

@@ -1,41 +1,22 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-
-function Headline({
-  size = 2,
-  marker,
-  disableMargin,
-  children,
-  severity,
-  weight = 600,
-  subHeadline,
-  addition,
-  icon
-}) {
-  const Tag = `h${size}`;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    " ",
-    /* @__PURE__ */ jsxs("div", { className: styles.headlineContainer, children: [
-      /* @__PURE__ */ jsxs(
-        Tag,
-        {
-          style: {
-            "--font-weight": weight,
-            "--marker-color": severity ? SeverityBgColor[severity] : void 0
-          },
-          className: ` ${styles.headline} ${disableMargin ? styles.noMargin : void 0} ${marker ? `${styles.marker} ` : void 0}`,
-          children: [
-            icon || severity && !marker ? /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) : null,
-            children
-          ]
-        }
-      ),
-      addition
-    ] }),
-    subHeadline && /* @__PURE__ */ jsx("div", { className: styles.subHeadline, children: subHeadline })
-  ] });
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, }) {
+    const Tag = `h${size}`;
+    const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
+        .filter(Boolean)
+        .join(' ');
+    const headlineClassName = [
+        styles.headline,
+        disableMargin ? styles.noMargin : '',
+        marker ? styles.marker : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsxs(Tag, { style: {
+                            '--font-weight': weight,
+                            '--marker-color': severity ? SeverityBgColor[severity] : undefined,
+                        }, className: headlineClassName, children: [icon || (severity && !marker) ? _jsx(Icon, { customIcon: icon, severity: severity }) : null, children] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
 }
-
-export { Headline };

package/dist/components/headline/Headline.module.css

@@ -5,30 +5,55 @@
   flex-wrap: wrap;
 }
 
+/* Base headline: inherit colour from parent surface */
 .headline {
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-sm);
-  font-weight: var(--font-weight-bold);
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
   letter-spacing: var(--letter-spacing-tight);
-  color: var(--color-text);
+  color: inherit;
   line-height: var(--line-height-tight);
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
+/* Optional tone overrides for special cases (hero sections, etc.) */
+
+.tone-dark .headline {
+  color: var(--color-fg-default);
+}
+
+.tone-light .headline {
+  color: var(--color-fg-on-strong);
+}
+
 .noMargin {
   margin: 0;
 }
 
-.marker {
-  border-inline-start: var(--border-width-thick) solid var(--marker-color);
-  padding-inline-start: var(--spacing-sm);
+.headline.marker {
+  padding-inline-start: calc(var(--border-width-thick) + var(--spacing-sm));
+}
+
+.headline.marker::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: var(--border-width-thick);
+  background-color: var(--marker-color, var(--color-brand));
   border-start-start-radius: var(--border-radius-default);
   border-end-start-radius: var(--border-radius-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
+  pointer-events: none;
 }
 
+/* Subheadline inherits colour but is slightly softened,
+   so it works on both light and dark text surfaces. */
 .subHeadline {
-  color: var(--color-text-muted);
+  color: inherit;
+  opacity: 0.85;
   font-size: var(--font-size-md);
   margin-block-start: calc(var(--spacing-2xs) * -1);
   line-height: var(--line-height-normal);

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface HyperlinkProps {
+    component: React.ReactElement;
+    className?: string;
+    icon?: React.ReactNode;
+    disableIcon?: boolean;
+}
+export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
+export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styles from './Hyperlink.module.css';
+export function Hyperlink({ component, icon }) {
+    const originalProps = component.props;
+    return React.cloneElement(component, {
+        ...originalProps,
+        className: styles.link,
+        onClick: (e) => e.stopPropagation(),
+    }, _jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: originalProps.children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+}

package/dist/components/hyperlink/Hyperlink.module.css

@@ -0,0 +1,23 @@
+.link {
+  display: inline-flex;
+  gap: var(--spacing-xs);
+  position: relative;
+  text-decoration: none;
+  color: var(--color-brand);
+  font-size: inherit;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-brand);
+}
+
+.link svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}

package/dist/components/icon/Icon.d.ts

@@ -1,8 +1,9 @@
-import { Severity } from '@/constants/severity.types';
-export declare const SeverityIcon: Record<Severity, React.ReactNode>;
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+export declare const SeverityIcon: Record<Severity, ReactNode>;
 interface IconProps {
     severity?: Severity;
-    customIcon?: React.ReactNode;
+    customIcon?: ReactNode;
     label?: string;
 }
 export declare function Icon({ severity, label, customIcon }: IconProps): JSX.Element;

package/dist/components/icon/Icon.js

@@ -1,20 +1,14 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Building2, CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react';
 import styles from './Icon.module.css';
-
-const SeverityIcon = {
-  neutral: /* @__PURE__ */ jsx(CircleCheck, {}),
-  success: /* @__PURE__ */ jsx(CircleCheck, {}),
-  error: /* @__PURE__ */ jsx(CircleX, {}),
-  info: /* @__PURE__ */ jsx(Info, {}),
-  warning: /* @__PURE__ */ jsx(CircleAlert, {}),
-  brand: /* @__PURE__ */ jsx(Building2, {})
+export const SeverityIcon = {
+    neutral: _jsx(CircleCheck, {}),
+    success: _jsx(CircleCheck, {}),
+    error: _jsx(CircleX, {}),
+    info: _jsx(Info, {}),
+    warning: _jsx(CircleAlert, {}),
+    brand: _jsx(Building2, {}),
 };
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsx("span", { children: label })
-  ] });
+export function Icon({ severity, label, customIcon }) {
+    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ''} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }), label && _jsx("span", { children: label })] }));
 }
-
-export { Icon, SeverityIcon };

package/dist/components/icon/Icon.module.css

@@ -1,8 +1,9 @@
 .container {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  color: var(--color-secondary);
+  vertical-align: middle;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
 }
 
 .icon {
@@ -10,25 +11,25 @@
 }
 
 .icon svg {
-  height: var(--icon-size);
+  height: var(--icon-size-md);
 }
 
 .success {
-  color: var(--color-success);
+  color: var(--color-status-success);
 }
 
 .error {
-  color: var(--color-error);
+  color: var(--color-status-error);
 }
 
 .warning {
-  color: var(--color-warning);
+  color: var(--color-status-warning);
 }
 
 .info {
-  color: var(--color-info);
+  color: var(--color-status-info);
 }
 
 .brand {
-  color: var(--color-text-on-primary);
+  color: var(--color-fg-on-brand);
 }

package/dist/components/menu/Menu.js

@@ -1,71 +1,29 @@
-import { jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Menu.module.css';
-
-const MenuBase = React.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref,
-      role: "menu",
-      className: [styles.container, className].filter(Boolean).join(" "),
-      ...props,
-      children
-    }
-  )
-);
-MenuBase.displayName = "Menu";
-const isInteractiveEl = (el) => React.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
-const MenuItem = React.forwardRef(
-  ({ children, active, disabled, className, ...liProps }, ref) => {
+const MenuBase = React.forwardRef(({ children, className, ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
+MenuBase.displayName = 'Menu';
+const isInteractiveEl = (el) => React.isValidElement(el) &&
+    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true); // allow custom/Next Link components
+const MenuItem = React.forwardRef(({ children, active, disabled, className, ...liProps }, ref) => {
+    // If child is interactive (a/button/NextLink), clone it and style it.
     if (isInteractiveEl(children)) {
-      const child = children;
-      const childClass = [styles.item, active ? styles.active : ""].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsx(
-        "li",
-        {
-          ref,
-          role: "none",
-          className: [styles.row, className].filter(Boolean).join(" "),
-          ...liProps,
-          children: React.cloneElement(child, {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [child.props.className, styles.interactive, childClass].filter(Boolean).join(" ")
-          })
-        }
-      );
+        const child = children;
+        const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
+        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: React.cloneElement(child, {
+                role: 'menuitem',
+                tabIndex: -1,
+                'aria-selected': active || undefined,
+                'aria-disabled': disabled || undefined,
+                className: [child.props.className, styles.interactive, childClass]
+                    .filter(Boolean)
+                    .join(' '),
+            }) }));
     }
-    return /* @__PURE__ */ jsx(
-      "li",
-      {
-        ref,
-        role: "none",
-        className: [styles.row, className].filter(Boolean).join(" "),
-        ...liProps,
-        children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [styles.interactive, styles.item, active ? styles.active : ""].filter(Boolean).join(" "),
-            type: "button",
-            disabled,
-            children
-          }
-        )
-      }
-    );
-  }
-);
-MenuItem.displayName = "Menu.Item";
-const Menu = Object.assign(
-  MenuBase,
-  { Item: MenuItem }
-);
-
-export { Menu };
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: "menuitem", tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
+                .filter(Boolean)
+                .join(' '), type: "button", disabled: disabled, children: children }) }));
+});
+MenuItem.displayName = 'Menu.Item';
+export const Menu = Object.assign(MenuBase, { Item: MenuItem });