@cambly/syntax-core 4.5.0 → 4.7.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React$1, { ReactNode, AriaRole, ReactElement } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, AriaRole, ReactElement } from 'react';
 
 /**
  * Avatar is a circular image that represents a user.
@@ -26,10 +27,8 @@ declare const Avatar: ({ src, accessibilityLabel, size, }: {
     size?: "sm" | "md" | "lg" | "xl" | undefined;
 }) => JSX.Element;
 
-declare const colors: readonly ["black", "destructive100", "destructive200", "destructive300", "destructive700", "destructive800", "destructive900", "gray10", "gray100", "gray200", "gray30", "gray60", "gray300", "gray700", "gray80", "gray800", "gray900", "orange100", "orange200", "orange300", "orange700", "orange800", "orange900", "primary100", "primary200", "primary300", "primary700", "primary800", "primary900", "purple100", "purple200", "purple300", "purple700", "purple800", "purple900", "success100", "success200", "success300", "success700", "success800", "success900", "white", "yellow100", "yellow200", "yellow300", "yellow700", "yellow800", "yellow900"];
-
 type AlignItems = "baseline" | "center" | "end" | "start" | "stretch";
-type As = "article" | "aside" | "caption" | "details" | "div" | "figcaption" | "figure" | "footer" | "header" | "main" | "nav" | "section" | "summary";
+type As = "article" | "aside" | "caption" | "div" | "figcaption" | "figure" | "footer" | "header" | "main" | "nav" | "section" | "summary";
 type Dimension = number | string;
 type Direction = "row" | "column";
 type Display = "none" | "flex" | "block" | "inlineBlock" | "visuallyHidden";
@@ -44,7 +43,7 @@ type Padding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  *  * `aria-*`
  *  * `data-testid`
  */
-declare function Box(props: {
+declare const _default: React$1.ForwardRefExoticComponent<{
     /**
      * The alignment of the box on the cross axis.
      *
@@ -52,21 +51,21 @@ declare function Box(props: {
      * * `smAlignItems`
      * * `lgAlignItems`
      */
-    alignItems?: AlignItems;
+    alignItems?: AlignItems | undefined;
     /**
      * Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
      */
-    alignSelf?: "auto" | "start" | "end" | "center" | "baseline" | "stretch";
+    alignSelf?: "baseline" | "center" | "end" | "start" | "stretch" | "auto" | undefined;
     /**
      * The underlying DOM element usually set for accessibility or SEO reasons.
      *
      * @defaultValue "div"
      */
-    as?: As;
+    as?: As | undefined;
     /**
      * The background color of the box.
      */
-    backgroundColor?: (typeof colors)[number];
+    backgroundColor?: "black" | "destructive100" | "destructive200" | "destructive300" | "destructive700" | "destructive800" | "destructive900" | "gray10" | "gray100" | "gray200" | "gray30" | "gray60" | "gray300" | "gray700" | "gray80" | "gray800" | "gray900" | "orange100" | "orange200" | "orange300" | "orange700" | "orange800" | "orange900" | "primary100" | "primary200" | "primary300" | "primary700" | "primary800" | "primary900" | "purple100" | "purple200" | "purple300" | "purple700" | "purple800" | "purple900" | "success100" | "success200" | "success300" | "success700" | "success800" | "success900" | "white" | "yellow100" | "yellow200" | "yellow300" | "yellow700" | "yellow800" | "yellow900" | undefined;
     /**
      * The children to be rendered inside the box.
      */
@@ -78,7 +77,7 @@ declare function Box(props: {
      */
     dangerouslySetInlineStyle?: {
         __style: Record<string, string | number | null>;
-    };
+    } | undefined;
     /**
      * The flex direction of the box.
      *
@@ -88,7 +87,7 @@ declare function Box(props: {
      *
      * @defaultValue `row`
      */
-    direction?: Direction;
+    direction?: Direction | undefined;
     /**
      * The display property specifies the display behavior (the type of rendering box) of an element.
      *
@@ -98,74 +97,74 @@ declare function Box(props: {
      *
      * @defaultValue `block`
      */
-    display?: Display;
+    display?: Display | undefined;
     /**
      *  If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink
      *
      */
-    flexShrink?: number;
+    flexShrink?: number | undefined;
     /**
      * By default, flex items will all try to fit onto one line. But if you specify `flexWrap="wrap"`, the flex items will wrap onto multiple lines.
      *
      * @defaultValue `nowrap`
      */
-    flexWrap?: "wrap" | "nowrap";
+    flexWrap?: "wrap" | "nowrap" | undefined;
     /**
      * The gap between the children of the box.
      */
-    gap?: Gap;
+    gap?: Gap | undefined;
     /**
      * The id of the element.
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The alignment of the box on the cross axis on lg (960px) or larger viewports.
      */
-    lgAlignItems?: AlignItems;
+    lgAlignItems?: AlignItems | undefined;
     /**
      * The flex direction on lg (960px) or larger viewports.
      */
-    lgDirection?: Direction;
+    lgDirection?: Direction | undefined;
     /**
      * The display style on lg (960px) or larger viewports.
      */
-    lgDisplay?: Display;
+    lgDisplay?: Display | undefined;
     /**
      * The alignment of the box on the cross axis on lg (960px) or larger viewports.
      */
-    lgJustifyContent?: JustifyContent;
+    lgJustifyContent?: JustifyContent | undefined;
     /**
      * Margin on lg (960px) or larger viewports.
      */
-    lgMargin?: Margin;
+    lgMargin?: Margin | undefined;
     /**
      * Bottom margin on lg (960px) or larger viewports.
      */
-    lgMarginBottom?: Margin;
+    lgMarginBottom?: Margin | undefined;
     /**
      * Margin to the right in left-to-right languages, and to the left in right-to-left languages on lg (960px) or larger viewports.
      */
-    lgMarginEnd?: Margin;
+    lgMarginEnd?: Margin | undefined;
     /**
      * Margin to the left in left-to-right languages, and to the right in right-to-left languages on lg (960px) or larger viewports.
      */
-    lgMarginStart?: Margin;
+    lgMarginStart?: Margin | undefined;
     /**
      * Top margin on lg (960px) or larger viewports.
      */
-    lgMarginTop?: Margin;
+    lgMarginTop?: Margin | undefined;
     /**
      * The padding of the box on lg (960px) or larger viewports.
      */
-    lgPadding?: Padding;
+    lgPadding?: Padding | undefined;
     /**
      * The padding of the box on the x-axis on lg (960px) or larger viewports.
      */
-    lgPaddingX?: Padding;
+    lgPaddingX?: Padding | undefined;
     /**
      * The padding of the box on the y-axis on lg (960px) or larger viewports.
      */
-    lgPaddingY?: Padding;
+    lgPaddingY?: Padding | undefined;
     /**
      * The margin of the box.
      *
@@ -175,7 +174,7 @@ declare function Box(props: {
      *
      * @defaultValue 0
      */
-    margin?: Margin;
+    margin?: Margin | undefined;
     /**
      * Bottom margin of the box.
      *
@@ -184,7 +183,7 @@ declare function Box(props: {
      * * `lgMarginBottom`
      *
      */
-    marginBottom?: Margin;
+    marginBottom?: Margin | undefined;
     /**
      * Margin to the right in left-to-right languages, and to the left in right-to-left languages.
      *
@@ -193,7 +192,7 @@ declare function Box(props: {
      * * `lgMarginEnd`
      *
      */
-    marginEnd?: Margin;
+    marginEnd?: Margin | undefined;
     /**
      * Margin to the left in left-to-right languages, and to the right in right-to-left languages.
      *
@@ -202,7 +201,7 @@ declare function Box(props: {
      * * `lgMarginStart`
      *
      */
-    marginStart?: Margin;
+    marginStart?: Margin | undefined;
     /**
      * Top margin of the box.
      *
@@ -211,27 +210,27 @@ declare function Box(props: {
      * * `lgMarginTop`
      *
      */
-    marginTop?: Margin;
+    marginTop?: Margin | undefined;
     /**
      * The maximum height of the box.
      */
-    maxHeight?: Dimension;
+    maxHeight?: Dimension | undefined;
     /**
      * The maximum width of the box.
      */
-    maxWidth?: Dimension;
+    maxWidth?: Dimension | undefined;
     /**
      * The minimum height of the box.
      */
-    minHeight?: Dimension;
+    minHeight?: Dimension | undefined;
     /**
      * The minimum width of the box.
      */
-    minWidth?: Dimension;
+    minWidth?: Dimension | undefined;
     /**
      * The height of the box.
      */
-    height?: Dimension;
+    height?: Dimension | undefined;
     /**
      * The alignment of the box on the main axis.
      *
@@ -241,7 +240,7 @@ declare function Box(props: {
      *
      * @defaultValue "start"
      */
-    justifyContent?: JustifyContent;
+    justifyContent?: JustifyContent | undefined;
     /**
      * The padding of the box.
      *
@@ -251,7 +250,7 @@ declare function Box(props: {
      *
      * @defaultValue 0
      */
-    padding?: Padding;
+    padding?: Padding | undefined;
     /**
      * The padding of the box on the x-axis.
      *
@@ -260,7 +259,7 @@ declare function Box(props: {
      * * `lgPaddingX`
      *
      */
-    paddingX?: Padding;
+    paddingX?: Padding | undefined;
     /**
      * The padding of the box on the y-axis.
      *
@@ -268,19 +267,19 @@ declare function Box(props: {
      * * `smPaddingY`
      * * `lgPaddingY`
      */
-    paddingY?: Padding;
+    paddingY?: Padding | undefined;
     /**
      * The position of the box.
      *
      * @defaultValue "static"
      */
-    position?: "absolute" | "fixed" | "relative" | "static" | "sticky";
+    position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
     /**
      * The role attribute of the box.
      *
      * See [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the list of valid roles.
      */
-    role?: AriaRole;
+    role?: AriaRole | undefined;
     /**
      * Border radius of the box.
      *
@@ -293,60 +292,60 @@ declare function Box(props: {
      *
      * @defaultValue "none"
      */
-    rounding?: "xl" | "lg" | "md" | "sm" | "full" | "none";
+    rounding?: "sm" | "md" | "lg" | "xl" | "none" | "full" | undefined;
     /**
      * The alignment of the box on the cross axis on sm (480px) or larger viewports.
      */
-    smAlignItems?: AlignItems;
+    smAlignItems?: AlignItems | undefined;
     /**
      * The flex direction on sm (480px) or larger viewports.
      */
-    smDirection?: Direction;
+    smDirection?: Direction | undefined;
     /**
      * The display style on sm (480px) or larger viewports.
      */
-    smDisplay?: Display;
+    smDisplay?: Display | undefined;
     /**
      * The alignment of the box on the main axis on sm (480px) or larger viewports.
      */
-    smJustifyContent?: JustifyContent;
+    smJustifyContent?: JustifyContent | undefined;
     /**
      * Margin on sm (480px) or larger viewports.
      */
-    smMargin?: Margin;
+    smMargin?: Margin | undefined;
     /**
      * Bottom margin on sm (480px) or larger viewports.
      */
-    smMarginBottom?: Margin;
+    smMarginBottom?: Margin | undefined;
     /**
      * Margin to the right in left-to-right languages, and to the left in right-to-left languages on sm (480px) or larger viewports.
      */
-    smMarginEnd?: Margin;
+    smMarginEnd?: Margin | undefined;
     /**
      * Margin to the left in left-to-right languages, and to the right in right-to-left languages on sm (480px) or larger viewports.
      */
-    smMarginStart?: Margin;
+    smMarginStart?: Margin | undefined;
     /**
      * Top margin on sm (480px) or larger viewports.
      */
-    smMarginTop?: Margin;
+    smMarginTop?: Margin | undefined;
     /**
      * The padding of the box on sm (480px) or larger viewports.
      */
-    smPadding?: Padding;
+    smPadding?: Padding | undefined;
     /**
      * The padding of the box on the x-axis on sm (480px) or larger viewports.
      */
-    smPaddingX?: Padding;
+    smPaddingX?: Padding | undefined;
     /**
      * The padding of the box on the y-axis on sm (480px) or larger viewports.
      */
-    smPaddingY?: Padding;
+    smPaddingY?: Padding | undefined;
     /**
      * The width of the box.
      */
-    width?: Dimension;
-}): ReactElement;
+    width?: Dimension | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Button is a clickable element that is used to perform an action.
@@ -365,7 +364,7 @@ declare const Button: ({ text, loadingText, color, size, accessibilityLabel, dis
      *
      * @defaultValue "primary"
      */
-    color?: "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "gray200" | "gray700" | "gray800" | "gray900" | "white" | "inherit" | undefined;
+    color?: "gray200" | "gray700" | "gray800" | "gray900" | "white" | "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "inherit" | undefined;
     /**
      * The size of the button
      *
@@ -401,19 +400,19 @@ declare const Button: ({ text, loadingText, color, size, accessibilityLabel, dis
     /**
      * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
-    startIcon?: React$1.ComponentType<{
+    startIcon?: React__default.ComponentType<{
         className: string;
     }> | undefined;
     /**
      * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
-    endIcon?: React$1.ComponentType<{
+    endIcon?: React__default.ComponentType<{
         className: string;
     }> | undefined;
     /**
      * The callback to be called when the button is clicked
      */
-    onClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    onClick: React__default.MouseEventHandler<HTMLButtonElement>;
     /**
      * The tooltip to be displayed when the user hovers over the button
      */
@@ -475,7 +474,7 @@ declare const Heading: ({ align, as, children, color, size, }: {
      *
      * @defaultValue "start"
      */
-    align?: "start" | "end" | "forceLeft" | "center" | "forceRight" | undefined;
+    align?: "center" | "end" | "start" | "forceLeft" | "forceRight" | undefined;
     /**
      * DOM element to render as.
      *
@@ -491,7 +490,7 @@ declare const Heading: ({ align, as, children, color, size, }: {
      *
      * @defaultValue "gray900"
      */
-    color?: "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "gray200" | "gray700" | "gray800" | "gray900" | "white" | "inherit" | undefined;
+    color?: "gray200" | "gray700" | "gray800" | "gray900" | "white" | "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "inherit" | undefined;
     /**
      * Size of the text.
      *
@@ -514,7 +513,7 @@ declare const IconButton: ({ accessibilityLabel, color, disabled, icon: Icon, si
      *
      * @defaultValue "primary"
      */
-    color?: "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "gray200" | "gray700" | "gray800" | "gray900" | "white" | "inherit" | undefined;
+    color?: "gray200" | "gray700" | "gray800" | "gray900" | "white" | "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "inherit" | undefined;
     /**
      * The size of the button
      *
@@ -532,7 +531,7 @@ declare const IconButton: ({ accessibilityLabel, color, disabled, icon: Icon, si
     /**
      * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
      */
-    icon: React$1.ComponentType<{
+    icon: React__default.ComponentType<{
         className: string;
     }>;
     /**
@@ -544,7 +543,7 @@ declare const IconButton: ({ accessibilityLabel, color, disabled, icon: Icon, si
     /**
      * The callback to be called when the button is clicked
      */
-    onClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    onClick: React__default.MouseEventHandler<HTMLButtonElement>;
     /**
      * The tooltip to be displayed when the user hovers over the button
      */
@@ -564,7 +563,7 @@ declare const Checkbox: ({ checked, disabled, size, label, error, onChange, }: {
     /**
      * The callback to be called when the checkbox value changes
      */
-    onChange: React$1.ChangeEventHandler<HTMLInputElement>;
+    onChange: React__default.ChangeEventHandler<HTMLInputElement>;
     /**
      * Whether or not the box is disabled
      *
@@ -635,7 +634,7 @@ declare const RadioButton: ({ checked, disabled, error, label, name, onChange, s
     /**
      * The callback to be called when the radio button is clicked
      */
-    onChange: React$1.ChangeEventHandler<HTMLInputElement>;
+    onChange: React__default.ChangeEventHandler<HTMLInputElement>;
     /**
      * Size of the components
      *
@@ -678,7 +677,7 @@ declare const SelectList: {
         /**
          * The callback to be called when an option is selected
          */
-        onChange: React$1.ChangeEventHandler<HTMLSelectElement>;
+        onChange: React__default.ChangeEventHandler<HTMLSelectElement>;
         /**
          * Text showing in select box if no option has been chosen.
          * We should always have a placeholder unless there is a default option selected
@@ -702,7 +701,7 @@ declare const SelectList: {
         value: string;
         label: string;
         disabled?: boolean | undefined;
-    }) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
+    }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>;
 };
 
 /**
@@ -716,13 +715,13 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
      *
      * @defaultValue "start"
      */
-    align?: "start" | "end" | "forceLeft" | "center" | "forceRight" | undefined;
+    align?: "center" | "end" | "start" | "forceLeft" | "forceRight" | undefined;
     /**
      * DOM element to render as.
      *
      * @defaultValue "div"
      */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | undefined;
+    as?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**
      * The text to be rendered
      */
@@ -732,7 +731,7 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
      *
      * @defaultValue "gray900"
      */
-    color?: "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "gray200" | "gray700" | "gray800" | "gray900" | "white" | "inherit" | undefined;
+    color?: "gray200" | "gray700" | "gray800" | "gray900" | "white" | "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "inherit" | undefined;
     /**
      * Whether the text should flow inline with other elements.
      *
@@ -781,4 +780,4 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
     weight?: "regular" | "semiBold" | "bold" | "heavy" | undefined;
 }) => ReactElement;
 
-export { Avatar, Box, Button, ButtonGroup, Card, Checkbox, Divider, Heading, IconButton, MiniActionCard, RadioButton, SelectList, Typography };
+export { Avatar, _default as Box, Button, ButtonGroup, Card, Checkbox, Divider, Heading, IconButton, MiniActionCard, RadioButton, SelectList, Typography };

package/dist/index.js

@@ -114,7 +114,7 @@ var require_classnames = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   Avatar: () => Avatar_default,
-  Box: () => Box,
+  Box: () => Box_default,
   Button: () => Button_default,
   ButtonGroup: () => ButtonGroup_default,
   Card: () => Card_default,
@@ -169,8 +169,9 @@ var padding_module_default = { "paddingX0": "_paddingX0_1aqye_2", "paddingX1": "
 var colors_module_default = { "inheritColor": "_inheritColor_11wj3_2", "destructive700Color": "_destructive700Color_11wj3_6", "gray700Color": "_gray700Color_11wj3_10", "gray900Color": "_gray900Color_11wj3_14", "primary700Color": "_primary700Color_11wj3_18", "whiteColor": "_whiteColor_11wj3_22", "blackBackgroundColor": "_blackBackgroundColor_11wj3_27", "destructive100BackgroundColor": "_destructive100BackgroundColor_11wj3_31", "destructive200BackgroundColor": "_destructive200BackgroundColor_11wj3_35", "destructive300BackgroundColor": "_destructive300BackgroundColor_11wj3_39", "destructive700BackgroundColor": "_destructive700BackgroundColor_11wj3_43", "destructive800BackgroundColor": "_destructive800BackgroundColor_11wj3_47", "destructive900BackgroundColor": "_destructive900BackgroundColor_11wj3_51", "gray10BackgroundColor": "_gray10BackgroundColor_11wj3_55", "gray30BackgroundColor": "_gray30BackgroundColor_11wj3_59", "gray60BackgroundColor": "_gray60BackgroundColor_11wj3_63", "gray80BackgroundColor": "_gray80BackgroundColor_11wj3_67", "gray100BackgroundColor": "_gray100BackgroundColor_11wj3_71", "gray200BackgroundColor": "_gray200BackgroundColor_11wj3_75", "gray300BackgroundColor": "_gray300BackgroundColor_11wj3_79", "gray700BackgroundColor": "_gray700BackgroundColor_11wj3_83", "gray800BackgroundColor": "_gray800BackgroundColor_11wj3_87", "gray900BackgroundColor": "_gray900BackgroundColor_11wj3_91", "orange100BackgroundColor": "_orange100BackgroundColor_11wj3_95", "orange200BackgroundColor": "_orange200BackgroundColor_11wj3_99", "orange300BackgroundColor": "_orange300BackgroundColor_11wj3_103", "orange700BackgroundColor": "_orange700BackgroundColor_11wj3_107", "orange800BackgroundColor": "_orange800BackgroundColor_11wj3_111", "orange900BackgroundColor": "_orange900BackgroundColor_11wj3_115", "primary100BackgroundColor": "_primary100BackgroundColor_11wj3_119", "primary200BackgroundColor": "_primary200BackgroundColor_11wj3_123", "primary300BackgroundColor": "_primary300BackgroundColor_11wj3_127", "primary700BackgroundColor": "_primary700BackgroundColor_11wj3_131", "primary800BackgroundColor": "_primary800BackgroundColor_11wj3_135", "primary900BackgroundColor": "_primary900BackgroundColor_11wj3_139", "success100BackgroundColor": "_success100BackgroundColor_11wj3_143", "success200BackgroundColor": "_success200BackgroundColor_11wj3_147", "success300BackgroundColor": "_success300BackgroundColor_11wj3_151", "success700BackgroundColor": "_success700BackgroundColor_11wj3_155", "success800BackgroundColor": "_success800BackgroundColor_11wj3_159", "success900BackgroundColor": "_success900BackgroundColor_11wj3_163", "purple100BackgroundColor": "_purple100BackgroundColor_11wj3_167", "purple200BackgroundColor": "_purple200BackgroundColor_11wj3_171", "purple300BackgroundColor": "_purple300BackgroundColor_11wj3_175", "purple700BackgroundColor": "_purple700BackgroundColor_11wj3_179", "purple800BackgroundColor": "_purple800BackgroundColor_11wj3_183", "purple900BackgroundColor": "_purple900BackgroundColor_11wj3_187", "whiteBackgroundColor": "_whiteBackgroundColor_11wj3_191", "yellow100BackgroundColor": "_yellow100BackgroundColor_11wj3_195", "yellow200BackgroundColor": "_yellow200BackgroundColor_11wj3_199", "yellow300BackgroundColor": "_yellow300BackgroundColor_11wj3_203", "yellow700BackgroundColor": "_yellow700BackgroundColor_11wj3_207", "yellow800BackgroundColor": "_yellow800BackgroundColor_11wj3_211", "yellow900BackgroundColor": "_yellow900BackgroundColor_11wj3_215" };
 
 // src/Box/Box.tsx
+var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Box(props) {
+var Box_default = (0, import_react.forwardRef)(function Box(props, ref) {
   var _c;
   const _a = props, { as: BoxElement = "div", children } = _a, boxProps = __objRest(_a, ["as", "children"]);
   const _b = boxProps, {
@@ -354,8 +355,8 @@ function Box(props) {
     }
     return acc;
   }, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxElement, __spreadProps(__spreadValues(__spreadValues({}, parsedProps), passthroughProps), { children }));
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxElement, __spreadProps(__spreadValues(__spreadValues({}, parsedProps), passthroughProps), { ref, children }));
+});
 
 // src/Button/Button.tsx
 var import_classnames3 = __toESM(require_classnames());
@@ -648,16 +649,22 @@ var IconButton = ({
 var IconButton_default = IconButton;
 
 // src/Checkbox/Checkbox.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
 // src/useFocusVisible.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var hasSetupGlobalListeners = false;
 var currentModality = null;
 var changeHandlers = /* @__PURE__ */ new Set();
 var hasEventBeforeFocus = false;
-var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
+var isMac = (
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  typeof window !== "undefined" && window.navigator != null ? (
+    // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
+    /^Mac/.test(window.navigator.platform)
+  ) : false
+);
 function isValidKey(e) {
   return !(e.metaKey || !isMac && e.altKey || e.ctrlKey);
 }
@@ -722,8 +729,8 @@ function setupGlobalFocusEvents() {
 }
 function useFocusVisible() {
   setupGlobalFocusEvents();
-  const [isFocusVisibleState, setFocusVisible] = (0, import_react.useState)(isFocusVisible());
-  (0, import_react.useEffect)(() => {
+  const [isFocusVisibleState, setFocusVisible] = (0, import_react2.useState)(isFocusVisible());
+  (0, import_react2.useEffect)(() => {
     const handler = () => {
       setFocusVisible(isFocusVisible());
     };
@@ -759,7 +766,7 @@ var Checkbox = ({
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const checkboxStyling = (0, import_classnames7.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
   const uncheckedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
@@ -821,7 +828,7 @@ var MiniActionCard = ({
 var MiniActionCard_default = MiniActionCard;
 
 // src/RadioButton/RadioButton.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_classnames8 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
@@ -839,7 +846,7 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const sharedStyles = (0, import_classnames8.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
@@ -899,7 +906,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_classnames9 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
@@ -944,9 +951,9 @@ var SelectList = ({
   selectedValue = "",
   size = "md"
 }) => {
-  const id = (0, import_react4.useId)();
+  const id = (0, import_react5.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {