@cambly/syntax-core 5.3.0 → 5.4.0

package/dist/index.d.ts

@@ -442,6 +442,10 @@ type ButtonType = {
      * The tooltip to be displayed when the user hovers over the button
      */
     tooltip?: string;
+    /**
+     * The type you want to set for the primitive <button/>
+     */
+    type?: "button" | "submit" | "reset";
 };
 declare const Button: React__default.ForwardRefExoticComponent<ButtonType & React__default.RefAttributes<HTMLButtonElement>>;
 
@@ -471,15 +475,30 @@ declare const ButtonGroup: ({ orientation, size, children, }: {
     children?: ReactNode;
 }) => ReactElement;
 
+declare const CardSizes: readonly ["sm", "lg"];
 /**
  * Card is a basic container component to apply consistent styling and render child components.
  */
-declare const Card: ({ children, }: {
+type CardType = {
+    /**
+     * Test id for the button
+     */
+    "data-testid"?: string;
     /**
      * The child components to render within Card.
      */
     children: JSX.Element;
-}) => JSX.Element;
+    /**
+     * The size of the card
+     *
+     * `sm`: 352px
+     * `lg`: 744px
+     *
+     * @defaultValue sm
+     */
+    size?: (typeof CardSizes)[number];
+};
+declare const Card: ({ children, size, "data-testid": dataTestId, }: CardType) => JSX.Element;
 
 /**
  * Divider is a thin horizontal line to group content in lists and layouts.

package/dist/index.js

@@ -528,7 +528,8 @@ var Button = (0, import_react2.forwardRef)(
     startIcon: StartIcon,
     endIcon: EndIcon,
     onClick,
-    tooltip
+    tooltip,
+    type = "button"
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
@@ -536,7 +537,7 @@ var Button = (0, import_react2.forwardRef)(
         "data-testid": dataTestId,
         ref,
         "aria-label": accessibilityLabel,
-        type: "button",
+        type,
         title: tooltip,
         disabled: disabled || loading,
         onClick,
@@ -611,8 +612,28 @@ var ButtonGroup_default = ButtonGroup;
 // src/Card/Card.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Card = ({
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box_default, { rounding: "xl", padding: 7, smPadding: 9, backgroundColor: "white", children });
+  children,
+  size = "sm",
+  "data-testid": dataTestId
+}) => {
+  const sizeWidth = {
+    sm: 352,
+    lg: 744
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Box_default,
+    {
+      rounding: "xl",
+      padding: 7,
+      smPadding: 9,
+      maxWidth: sizeWidth[size],
+      width: "100%",
+      backgroundColor: "white",
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
 var Card_default = Card;
 
 // css-module:./Divider.module.css#css-module