@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/atoms/AILabel/AILabel.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type AILabelKind = 'suggested' | 'removal';
+export type AILabelSize = 'small' | 'medium';
+export interface AILabelProps {
+    /**
+     * What the agent proposes for the item: a change or addition ("Suggested"), or its removal
+     * ("Will be removed"). The wording is fixed so it reads the same in every product (decision 0046).
+     * @default 'suggested'
+     */
+    kind?: AILabelKind;
+    /**
+     * Size on the label scale (decision 0018): small (20px) for dense lists, medium (24px) elsewhere.
+     * @default 'medium'
+     */
+    size?: AILabelSize;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+export declare const AILabel: React.FC<AILabelProps>;

package/dist/components/atoms/AILabel/AILabel.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type AILabelKind = 'suggested' | 'removal';
+export type AILabelSize = 'small' | 'medium';
+export interface AILabelProps {
+    /**
+     * What the agent proposes for the item: a change or addition ("Suggested"), or its removal
+     * ("Will be removed"). The wording is fixed so it reads the same in every product (decision 0046).
+     * @default 'suggested'
+     */
+    kind?: AILabelKind;
+    /**
+     * Size on the label scale (decision 0018): small (20px) for dense lists, medium (24px) elsewhere.
+     * @default 'medium'
+     */
+    size?: AILabelSize;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+export declare const AILabel: React.FC<AILabelProps>;

package/dist/components/atoms/AILabel/AILabel.mjs

@@ -0,0 +1,94 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color,
+  typography = semantic.typography,
+  size = semantic.size;
+var labels = {
+  suggested: 'Suggested',
+  removal: 'Will be removed'
+};
+var sizeConfig = {
+  small: {
+    font: typography.caption,
+    gap: semantic.space[100],
+    icon: 'xs'
+  },
+  medium: {
+    font: typography.small,
+    gap: semantic.space[200],
+    icon: 'sm'
+  }
+};
+var StyledAILabel = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AILabel__StyledAILabel",
+  componentId: "sc-qknkn-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+  var $size = _a.$size;
+  return size.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].gap;
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].font;
+}, color.text.ai);
+var StyledIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "AILabel__StyledIcon",
+  componentId: "sc-qknkn-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  color: ", ";\n"
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */])), color.icon.ai);
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+var AILabel = function AILabel(_a) {
+  var _b = _a.kind,
+    kind = _b === void 0 ? 'suggested' : _b,
+    _c = _a.size,
+    labelSize = _c === void 0 ? 'medium' : _c,
+    dataTestId = _a["data-testid"];
+  return jsxs(StyledAILabel, {
+    "$size": labelSize,
+    "data-testid": dataTestId,
+    children: [jsx(StyledIcon, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: "ai",
+        size: sizeConfig[labelSize].icon,
+        iconColor: "inherit"
+      })
+    }), labels[kind]]
+  });
+};
+AILabel.displayName = 'AILabel';
+var templateObject_1, templateObject_2;
+
+export { AILabel };
+//# sourceMappingURL=AILabel.mjs.map

package/dist/components/atoms/AILabel/AILabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AILabel.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/AILabel/index.d.mts

@@ -0,0 +1 @@
+export * from './AILabel.mjs';

package/dist/components/atoms/AILabel/index.d.ts

@@ -0,0 +1 @@
+export * from './AILabel';

package/dist/components/atoms/Avatar/Avatar.d.mts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface AvatarProps {
+    name: string;
+    picture?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    'data-testid'?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/atoms/Avatar/Avatar.mjs

@@ -0,0 +1,103 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+// Destructure tokens
+var semantic = tokens.semantic;
+var initials = tokens.component.avatar.initials;
+var color = semantic.color,
+  size = semantic.size;
+var radius = semantic.radius;
+var AvatarContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Avatar__AvatarContainer",
+  componentId: "sc-ezn4ax-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+  var $size = _a.$size;
+  return size.avatar[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return size.avatar[$size];
+}, radius.full, color.fill.muted);
+var AvatarImage = /*#__PURE__*/styled.img.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Avatar__AvatarImage",
+  componentId: "sc-ezn4ax-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius.full);
+var AvatarInitials = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Avatar__AvatarInitials",
+  componentId: "sc-ezn4ax-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"
+// Helper function to get initials from name
+])), initials.fontFamily, initials.fontWeight, function (_a) {
+  var $size = _a.$size;
+  return initials.fontSize[$size];
+}, color.text["default"], initials.lineHeight);
+// Helper function to get initials from name
+var getInitials = function getInitials(name) {
+  return name.split(' ').map(function (word) {
+    return word.charAt(0);
+  }).join('').slice(0, 2).toUpperCase();
+};
+var Avatar = function Avatar(_a) {
+  var name = _a.name,
+    picture = _a.picture,
+    _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    dataTestId = _a["data-testid"],
+    props = __rest(_a, ["name", "picture", "size", 'data-testid']);
+  // Remove styled-only props from the rest
+  var _c = props;
+    _c.$size;
+    var htmlProps = __rest(_c, ["$size"]);
+  var _d = useState(false),
+    imageError = _d[0],
+    setImageError = _d[1];
+  var _e = useState(false),
+    imageLoaded = _e[0],
+    setImageLoaded = _e[1];
+  var handleImageError = function handleImageError() {
+    setImageError(true);
+  };
+  var handleImageLoad = function handleImageLoad() {
+    setImageLoaded(true);
+  };
+  var showImage = picture && !imageError;
+  var initials = getInitials(name);
+  return jsx(AvatarContainer, __assign({
+    "$size": size,
+    "data-testid": dataTestId,
+    "data-size": size,
+    role: "img",
+    "aria-label": "Avatar for ".concat(name)
+  }, htmlProps, {
+    children: showImage ? jsx(AvatarImage, {
+      "$size": size,
+      src: picture,
+      alt: "Avatar of ".concat(name),
+      onError: handleImageError,
+      onLoad: handleImageLoad,
+      "data-state": imageLoaded ? 'loaded' : 'loading'
+    }) : jsx(AvatarInitials, {
+      "$size": size,
+      "data-initials": initials,
+      "aria-hidden": "true",
+      children: initials
+    })
+  }));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { Avatar };
+//# sourceMappingURL=Avatar.mjs.map

package/dist/components/atoms/Avatar/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Avatar/index.d.mts

@@ -0,0 +1 @@
+export * from './Avatar.mjs';

package/dist/components/atoms/Badge/Badge.d.mts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface BadgeProps {
+    /** Content to wrap with the badge */
+    children: React.ReactNode;
+    /** Number to display in the badge. If 0, badge is hidden */
+    count?: number;
+    /** Maximum number to display before showing "99+" */
+    max?: number;
+    /**
+     * Visual variant of the badge. `accent` is the blue highlight. `primary` is a deprecated alias
+     * for `accent`, because Button's `primary` is near-black (decision 0029). It keeps working
+     * until it is removed in 3.0.
+     * @default 'default'
+     */
+    variant?: 'default' | 'accent' | 'primary' | 'error' | 'warning' | 'success';
+    /** Show only a dot indicator instead of count */
+    dot?: boolean;
+    /** Screen reader label for the badge */
+    'aria-label'?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/atoms/Badge/Badge.mjs

@@ -0,0 +1,98 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module, { keyframes } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { reducedMotion, forcedColors, visuallyHidden } from '../../../lib/styleUtils.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color;
+var radius = semantic.radius;
+var _a = tokens.component.badge,
+  dot = _a.dot,
+  count = _a.count,
+  ring = _a.ring;
+var scaleIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var BadgeWrapper = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Badge__BadgeWrapper",
+  componentId: "sc-tjz4pp-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
+var BadgeIndicator = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Badge__BadgeIndicator",
+  componentId: "sc-tjz4pp-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"])), function (props) {
+  return props.$isVisible ? 'flex' : 'none';
+}, function (props) {
+  return props.$isDot ? dot.size : count.minWidth;
+}, function (props) {
+  return props.$isDot ? dot.size : count.height;
+}, function (props) {
+  return props.$isDot ? '0' : "0 ".concat(semantic.space.inset.xs);
+}, radius.full, count.lineHeight, ring.width, semantic.surface.base, scaleIn, semantic.motion.duration.moderate, semantic.motion.easing.decelerate, reducedMotion, function (props) {
+  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic.border.width.thin, " solid currentColor; }");
+}, function (props) {
+  switch (props.$variant) {
+    case 'accent':
+    case 'primary':
+      // Deprecated alias for 'accent', removed in 3.0 (#169)
+      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+    case 'error':
+      return "\n          background-color: ".concat(color.fill.danger, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+    case 'warning':
+      return "\n          background-color: ".concat(color.fill.warning, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+    case 'success':
+      return "\n          background-color: ".concat(color.fill.success, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+    default:
+      return "\n          background-color: ".concat(color.fill.emphasis, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+  }
+});
+var ScreenReaderOnly = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Badge__ScreenReaderOnly",
+  componentId: "sc-tjz4pp-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+var Badge = function Badge(_a) {
+  var children = _a.children,
+    _b = _a.count,
+    count = _b === void 0 ? 0 : _b,
+    _c = _a.max,
+    max = _c === void 0 ? 99 : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'default' : _d,
+    _e = _a.dot,
+    dot = _e === void 0 ? false : _e,
+    ariaLabel = _a["aria-label"],
+    className = _a.className,
+    dataTestId = _a["data-testid"];
+  var isVisible = dot || count > 0;
+  var displayCount = count > max ? "".concat(max, "+") : count.toString();
+  // Generate default aria-label if not provided
+  var defaultAriaLabel = dot ? 'New notification indicator' : count === 1 ? '1 notification' : "".concat(count, " notifications");
+  var label = ariaLabel || defaultAriaLabel;
+  return jsxs(BadgeWrapper, {
+    className: className,
+    "data-testid": dataTestId,
+    children: [children, jsxs(BadgeIndicator, {
+      "$variant": variant,
+      "$isDot": dot,
+      "$isVisible": isVisible,
+      role: "status",
+      "aria-live": "polite",
+      children: [!dot && jsx(Typography, {
+        variant: "caption",
+        color: "inverse",
+        children: displayCount
+      }), jsx(ScreenReaderOnly, {
+        children: label
+      })]
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Badge };
+//# sourceMappingURL=Badge.mjs.map

package/dist/components/atoms/Badge/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Badge/index.d.mts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.mjs';
+export type { BadgeProps } from './Badge.mjs';

package/dist/components/atoms/Box/Box.d.mts

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { Tokens } from '../../../types/tokens.mjs';
+export interface BoxProps {
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    gap?: keyof Tokens['semantic']['spacing']['layout'];
+    m?: keyof Tokens['semantic']['spacing']['layout'];
+    mt?: keyof Tokens['semantic']['spacing']['layout'];
+    mr?: keyof Tokens['semantic']['spacing']['layout'];
+    mb?: keyof Tokens['semantic']['spacing']['layout'];
+    ml?: keyof Tokens['semantic']['spacing']['layout'];
+    mx?: keyof Tokens['semantic']['spacing']['layout'];
+    my?: keyof Tokens['semantic']['spacing']['layout'];
+    p?: keyof Tokens['semantic']['spacing']['layout'];
+    pt?: keyof Tokens['semantic']['spacing']['layout'];
+    pr?: keyof Tokens['semantic']['spacing']['layout'];
+    pb?: keyof Tokens['semantic']['spacing']['layout'];
+    pl?: keyof Tokens['semantic']['spacing']['layout'];
+    px?: keyof Tokens['semantic']['spacing']['layout'];
+    py?: keyof Tokens['semantic']['spacing']['layout'];
+    width?: string;
+    height?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    minHeight?: string;
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    borderRadius?: keyof Tokens['semantic']['border']['radius'];
+    border?: keyof Tokens['semantic']['color']['border'];
+    borderTop?: keyof Tokens['semantic']['color']['border'];
+    borderRight?: keyof Tokens['semantic']['color']['border'];
+    borderBottom?: keyof Tokens['semantic']['color']['border'];
+    borderLeft?: keyof Tokens['semantic']['color']['border'];
+    bg?: keyof Tokens['semantic']['color']['background'];
+    color?: keyof Tokens['semantic']['color']['text'];
+    shadow?: keyof Tokens['semantic']['elevation'];
+    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';
+    transition?: string;
+    hoverShadow?: keyof Tokens['semantic']['elevation'];
+    hoverTransform?: string;
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    as?: React.ElementType;
+    children?: React.ReactNode;
+    id?: string;
+    style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    tabIndex?: number;
+    role?: string;
+    'aria-label'?: string;
+    'data-testid'?: string;
+}
+export declare const Box: React.FC<BoxProps>;