@mason-ds/react 0.2.0

package/dist/index.cjs

@@ -0,0 +1,925 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Callout: () => Callout,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  Divider: () => Divider,
+  Link: () => Link,
+  MasonProvider: () => MasonProvider,
+  Select: () => Select,
+  Spinner: () => Spinner,
+  Stack: () => Stack,
+  Text: () => Text,
+  TextField: () => TextField
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function MasonProvider({ children, theme = "light" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-mason-provider": true, "data-mason-theme": theme, children });
+}
+
+// src/styles.ts
+var import_tokens = require("@mason-ds/tokens");
+function cssVar(path) {
+  return `var(${(0, import_tokens.getSemanticCssVar)(path)})`;
+}
+function spacingVar(axis, level) {
+  return cssVar(`spacing.${axis}.${level}`);
+}
+function radiusVar(level) {
+  return cssVar(`radius.${level}`);
+}
+function shadowVar(level) {
+  return cssVar(`shadow.${level}`);
+}
+function textColorVar(tone) {
+  return cssVar(`color.text.${tone}`);
+}
+function typographyStyle(variant) {
+  return {
+    fontFamily: cssVar(`font.${variant}.family`),
+    fontSize: cssVar(`font.${variant}.size`),
+    fontWeight: cssVar(`font.${variant}.weight`),
+    lineHeight: cssVar(`font.${variant}.lineHeight`),
+    letterSpacing: cssVar(`font.${variant}.letterSpacing`)
+  };
+}
+function mergeClassName(...parts) {
+  const merged = parts.filter(Boolean).join(" ");
+  return merged.length > 0 ? merged : void 0;
+}
+
+// src/textStyles.ts
+function textStyle({
+  variant = "body.md",
+  tone = "primary",
+  align,
+  truncate = false
+}) {
+  return {
+    margin: 0,
+    color: textColorVar(tone),
+    ...typographyStyle(variant),
+    ...align ? { textAlign: align } : null,
+    ...truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null
+  };
+}
+
+// src/Text.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Text({
+  as = "p",
+  variant = "body.md",
+  tone = "primary",
+  align,
+  truncate = false,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const Component = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      "data-mason-component": "text",
+      "data-variant": variant,
+      className: mergeClassName(className),
+      style: { ...textStyle({ variant, tone, align, truncate }), ...style },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/stackStyles.ts
+var FLEX_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var FLEX_JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+};
+function stackStyle({
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  inline = false
+}) {
+  return {
+    display: inline ? "inline-flex" : "flex",
+    flexDirection: direction,
+    gap: spacingVar(direction === "row" ? "inline" : "stack", gap),
+    flexWrap: wrap ? "wrap" : "nowrap",
+    minWidth: 0,
+    ...align ? { alignItems: FLEX_ALIGN[align] } : null,
+    ...justify ? { justifyContent: FLEX_JUSTIFY[justify] } : null
+  };
+}
+
+// src/Stack.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Stack({
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  inline = false,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-mason-component": "stack",
+      "data-direction": direction,
+      className: mergeClassName(className),
+      style: {
+        ...stackStyle({ direction, gap, align, justify, wrap, inline }),
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/cardStyles.ts
+var TONE_BG = {
+  surface: "color.bg.surface",
+  canvas: "color.bg.canvas",
+  elevated: "color.bg.elevated"
+};
+function cardStyle({
+  padding = "md",
+  elevation = "sm",
+  radius = "md",
+  tone = "surface",
+  bordered = true
+}) {
+  return {
+    display: "block",
+    padding: spacingVar("inset", padding),
+    backgroundColor: cssVar(TONE_BG[tone]),
+    color: cssVar("color.text.primary"),
+    border: bordered ? `1px solid ${cssVar("color.border.subtle")}` : "none",
+    borderRadius: radiusVar(radius),
+    boxShadow: shadowVar(elevation),
+    boxSizing: "border-box",
+    minWidth: 0
+  };
+}
+
+// src/Card.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Card({
+  padding = "md",
+  elevation = "sm",
+  radius = "md",
+  tone = "surface",
+  bordered = true,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-mason-component": "card",
+      "data-tone": tone,
+      className: mergeClassName(className),
+      style: {
+        ...cardStyle({ padding, elevation, radius, tone, bordered }),
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/dividerStyles.ts
+function dividerStyle(orientation = "horizontal") {
+  const line = `1px solid ${cssVar("color.border.subtle")}`;
+  if (orientation === "vertical") {
+    return {
+      alignSelf: "stretch",
+      width: 0,
+      minHeight: "1em",
+      margin: 0,
+      border: "none",
+      borderInlineStart: line
+    };
+  }
+  return {
+    width: "100%",
+    height: 0,
+    margin: 0,
+    border: "none",
+    borderBlockStart: line
+  };
+}
+
+// src/Divider.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Divider({
+  orientation = "horizontal",
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "hr",
+    {
+      "data-mason-component": "divider",
+      "data-orientation": orientation,
+      "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+      className: mergeClassName(className),
+      style: { ...dividerStyle(orientation), ...style },
+      ...rest
+    }
+  );
+}
+
+// src/linkStyles.ts
+function linkStyle({
+  tone = "link",
+  underline = "hover"
+}) {
+  return {
+    color: tone === "inherit" ? "inherit" : textColorVar("link"),
+    textDecoration: underline === "always" ? "underline" : "none",
+    textUnderlineOffset: "0.15em",
+    borderRadius: radiusVar("sm"),
+    cursor: "pointer"
+  };
+}
+
+// src/Link.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Link({
+  tone = "link",
+  underline = "hover",
+  external = false,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const externalProps = external ? { target: "_blank", rel: "noreferrer noopener" } : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "a",
+    {
+      "data-mason-component": "link",
+      "data-tone": tone,
+      "data-underline": underline,
+      className: mergeClassName(className),
+      style: { ...linkStyle({ tone, underline }), ...style },
+      ...externalProps,
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/spinnerStyles.ts
+var SIZE_DIMENSION = {
+  sm: cssVar("font.body.sm.size"),
+  md: cssVar("font.body.md.size"),
+  lg: cssVar("font.display.lg.size"),
+  inherit: "1em"
+};
+function spinnerStyle(size = "md") {
+  const dimension = SIZE_DIMENSION[size];
+  return {
+    width: dimension,
+    height: dimension,
+    border: "2px solid currentColor",
+    borderTopColor: "transparent",
+    borderRadius: "50%",
+    display: "inline-block",
+    flexShrink: 0
+  };
+}
+
+// src/Spinner.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Spinner({
+  size = "md",
+  label,
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      "data-mason-component": "spinner",
+      "data-size": size,
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: mergeClassName(className),
+      style: { ...spinnerStyle(size), ...style },
+      ...rest
+    }
+  );
+}
+
+// src/buttonStyles.ts
+function actionColors(variant) {
+  return {
+    bg: `color.action.${variant}.bg`,
+    text: `color.action.${variant}.text`,
+    border: `color.action.${variant}.border`
+  };
+}
+var sizeStyles = {
+  sm: {
+    paddingBlock: cssVar("spacing.inset.sm"),
+    paddingInline: cssVar("spacing.inset.md"),
+    gap: cssVar("spacing.inline.sm"),
+    radius: cssVar("radius.sm"),
+    font: "label.sm"
+  },
+  md: {
+    paddingBlock: cssVar("spacing.inset.md"),
+    paddingInline: cssVar("spacing.inset.lg"),
+    gap: cssVar("spacing.inline.md"),
+    radius: cssVar("radius.md"),
+    font: "label.md"
+  },
+  lg: {
+    paddingBlock: cssVar("spacing.inset.lg"),
+    paddingInline: `calc(${cssVar("spacing.inset.lg")} + ${cssVar("spacing.inset.md")})`,
+    gap: cssVar("spacing.inline.md"),
+    radius: cssVar("radius.lg"),
+    font: "label.lg"
+  }
+};
+function buttonStyle({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false
+}) {
+  const inactive = disabled || loading;
+  const colors = actionColors(inactive ? "disabled" : variant);
+  const sizing = sizeStyles[size];
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sizing.gap,
+    paddingBlock: sizing.paddingBlock,
+    paddingInline: sizing.paddingInline,
+    margin: 0,
+    backgroundColor: cssVar(colors.bg),
+    color: cssVar(colors.text),
+    border: `1px solid ${cssVar(colors.border)}`,
+    borderRadius: sizing.radius,
+    boxSizing: "border-box",
+    ...typographyStyle(sizing.font),
+    textDecoration: "none",
+    whiteSpace: "nowrap"
+  };
+}
+
+// src/Button.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Button({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  leadingSlot,
+  trailingSlot,
+  className,
+  style,
+  children,
+  type = "button",
+  ...rest
+}) {
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "button",
+    {
+      type,
+      "data-mason-component": "button",
+      "data-variant": variant,
+      "data-size": size,
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      className: mergeClassName(className),
+      style: {
+        ...buttonStyle({ variant, size, disabled, loading }),
+        ...style
+      },
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: "inherit", "data-mason-slot": "spinner" }) : leadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-mason-slot": "leading", children: leadingSlot }) : null,
+        children ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-mason-slot": "label", children }) : null,
+        trailingSlot && !loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-mason-slot": "trailing", children: trailingSlot }) : null
+      ]
+    }
+  );
+}
+
+// src/badgeStyles.ts
+function badgeStyle({
+  tone = "neutral",
+  size = "sm"
+}) {
+  const colors = tone === "neutral" ? {
+    bg: cssVar("color.bg.canvas"),
+    text: cssVar("color.text.secondary"),
+    border: cssVar("color.border.subtle")
+  } : {
+    bg: cssVar(`color.feedback.${tone}.bg`),
+    text: cssVar(`color.feedback.${tone}.text`),
+    border: cssVar(`color.feedback.${tone}.border`)
+  };
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: spacingVar("inline", "sm"),
+    paddingBlock: "0.125em",
+    paddingInline: spacingVar("inset", "sm"),
+    backgroundColor: colors.bg,
+    color: colors.text,
+    border: `1px solid ${colors.border}`,
+    borderRadius: radiusVar("full"),
+    ...typographyStyle(size === "sm" ? "label.sm" : "label.md"),
+    whiteSpace: "nowrap"
+  };
+}
+
+// src/Badge.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Badge({
+  tone = "neutral",
+  size = "sm",
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      "data-mason-component": "badge",
+      "data-tone": tone,
+      "data-size": size,
+      className: mergeClassName(className),
+      style: { ...badgeStyle({ tone, size }), ...style },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/calloutStyles.ts
+function calloutStyle(tone = "info") {
+  return {
+    display: "flex",
+    gap: spacingVar("inline", "md"),
+    padding: spacingVar("inset", "md"),
+    backgroundColor: cssVar(`color.feedback.${tone}.bg`),
+    color: cssVar(`color.feedback.${tone}.text`),
+    border: `1px solid ${cssVar(`color.feedback.${tone}.border`)}`,
+    borderRadius: radiusVar("md"),
+    boxSizing: "border-box",
+    ...typographyStyle("body.md")
+  };
+}
+function calloutContentStyle() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: 0
+  };
+}
+function calloutTitleStyle() {
+  return { margin: 0, ...typographyStyle("label.md") };
+}
+function calloutBodyStyle() {
+  return { margin: 0, ...typographyStyle("body.sm") };
+}
+
+// src/Callout.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Callout({
+  tone = "info",
+  title,
+  iconSlot,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      "data-mason-component": "callout",
+      "data-tone": tone,
+      className: mergeClassName(className),
+      style: { ...calloutStyle(tone), ...style },
+      ...rest,
+      children: [
+        iconSlot ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-mason-slot": "icon", "aria-hidden": "true", children: iconSlot }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-mason-slot": "content", style: calloutContentStyle(), children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { "data-mason-slot": "title", style: calloutTitleStyle(), children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-mason-slot": "body", style: calloutBodyStyle(), children }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/field.tsx
+var import_react = require("react");
+
+// src/fieldStyles.ts
+var CONTROL_FONT = {
+  sm: "body.sm",
+  md: "body.md",
+  lg: "body.lg"
+};
+var LABEL_FONT = {
+  sm: "label.sm",
+  md: "label.md",
+  lg: "label.lg"
+};
+var CONTROL_PADDING_BLOCK = { sm: "sm", md: "sm", lg: "md" };
+var CONTROL_PADDING_INLINE = { sm: "sm", md: "md", lg: "md" };
+function fieldRootStyle() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: 0
+  };
+}
+function fieldLabelStyle(size = "md") {
+  return {
+    color: cssVar("color.text.primary"),
+    ...typographyStyle(LABEL_FONT[size])
+  };
+}
+function fieldControlStyle({
+  size = "md",
+  invalid = false,
+  disabled = false
+}) {
+  return {
+    width: "100%",
+    boxSizing: "border-box",
+    margin: 0,
+    paddingBlock: spacingVar("inset", CONTROL_PADDING_BLOCK[size]),
+    paddingInline: spacingVar("inset", CONTROL_PADDING_INLINE[size]),
+    backgroundColor: disabled ? cssVar("color.action.disabled.bg") : cssVar("color.field.bg"),
+    color: disabled ? cssVar("color.text.disabled") : cssVar("color.field.text"),
+    border: `1px solid ${cssVar(
+      invalid ? "color.field.borderInvalid" : "color.field.border"
+    )}`,
+    borderRadius: radiusVar("md"),
+    ...typographyStyle(CONTROL_FONT[size])
+  };
+}
+function fieldDescriptionStyle() {
+  return {
+    margin: 0,
+    color: cssVar("color.text.secondary"),
+    ...typographyStyle("body.sm")
+  };
+}
+function fieldErrorStyle() {
+  return {
+    margin: 0,
+    color: cssVar("color.text.danger"),
+    ...typographyStyle("body.sm")
+  };
+}
+
+// src/field.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function useFieldIds({
+  id,
+  description,
+  error
+}) {
+  const generated = (0, import_react.useId)();
+  const controlId = id ?? `mason-field-${generated}`;
+  const descriptionId = `${controlId}-description`;
+  const errorId = `${controlId}-error`;
+  const describedBy = [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return { controlId, descriptionId, errorId, describedBy };
+}
+function FieldFrame({
+  component,
+  ids,
+  label,
+  description,
+  error,
+  size = "md",
+  invalid = false,
+  disabled = false,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      "data-mason-component": component,
+      "data-size": size,
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: mergeClassName(className),
+      style: { ...fieldRootStyle(), ...style },
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "label",
+          {
+            "data-mason-slot": "label",
+            htmlFor: ids.controlId,
+            style: fieldLabelStyle(size),
+            children: label
+          }
+        ) : null,
+        children,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "p",
+          {
+            "data-mason-slot": "description",
+            id: ids.descriptionId,
+            style: fieldDescriptionStyle(),
+            children: description
+          }
+        ) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "p",
+          {
+            "data-mason-slot": "error",
+            id: ids.errorId,
+            role: "alert",
+            style: fieldErrorStyle(),
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/TextField.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function TextField({
+  label,
+  description,
+  error,
+  size = "md",
+  invalid,
+  id,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) {
+  const ids = useFieldIds({ id, description, error });
+  const isInvalid = invalid ?? Boolean(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    FieldFrame,
+    {
+      component: "text-field",
+      ids,
+      label,
+      description,
+      error,
+      size,
+      invalid: isInvalid,
+      disabled,
+      className,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "input",
+        {
+          ...rest,
+          id: ids.controlId,
+          "data-mason-slot": "control",
+          disabled,
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": ids.describedBy,
+          style: fieldControlStyle({ size, invalid: isInvalid, disabled })
+        }
+      )
+    }
+  );
+}
+
+// src/Select.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Select({
+  label,
+  description,
+  error,
+  size = "md",
+  invalid,
+  placeholder,
+  id,
+  disabled = false,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const ids = useFieldIds({ id, description, error });
+  const isInvalid = invalid ?? Boolean(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    FieldFrame,
+    {
+      component: "select",
+      ids,
+      label,
+      description,
+      error,
+      size,
+      invalid: isInvalid,
+      disabled,
+      className,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "select",
+        {
+          ...rest,
+          id: ids.controlId,
+          "data-mason-slot": "control",
+          disabled,
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": ids.describedBy,
+          style: fieldControlStyle({ size, invalid: isInvalid, disabled }),
+          children: [
+            placeholder ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: placeholder }) : null,
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/checkboxStyles.ts
+function checkboxRootStyle() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: 0
+  };
+}
+function checkboxLabelStyle(disabled = false) {
+  return {
+    display: "inline-flex",
+    alignItems: "flex-start",
+    gap: spacingVar("inline", "sm"),
+    cursor: disabled ? "not-allowed" : "pointer",
+    color: disabled ? cssVar("color.text.disabled") : cssVar("color.text.primary"),
+    ...typographyStyle("body.md")
+  };
+}
+function checkboxControlStyle() {
+  return {
+    width: "1em",
+    height: "1em",
+    margin: 0,
+    marginBlockStart: "0.15em",
+    accentColor: cssVar("color.action.primary.bg"),
+    flexShrink: 0
+  };
+}
+
+// src/Checkbox.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Checkbox({
+  label,
+  description,
+  error,
+  invalid,
+  id,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) {
+  const ids = useFieldIds({ id, description, error });
+  const isInvalid = invalid ?? Boolean(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      "data-mason-component": "checkbox",
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: mergeClassName(className),
+      style: { ...checkboxRootStyle(), ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "label",
+          {
+            "data-mason-slot": "label",
+            htmlFor: ids.controlId,
+            style: checkboxLabelStyle(disabled),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "input",
+                {
+                  ...rest,
+                  type: "checkbox",
+                  id: ids.controlId,
+                  "data-mason-slot": "control",
+                  disabled,
+                  "aria-invalid": isInvalid || void 0,
+                  "aria-describedby": ids.describedBy,
+                  style: checkboxControlStyle()
+                }
+              ),
+              label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "data-mason-slot": "label-text", children: label }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "p",
+          {
+            "data-mason-slot": "description",
+            id: ids.descriptionId,
+            style: fieldDescriptionStyle(),
+            children: description
+          }
+        ) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "p",
+          {
+            "data-mason-slot": "error",
+            id: ids.errorId,
+            role: "alert",
+            style: fieldErrorStyle(),
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  Callout,
+  Card,
+  Checkbox,
+  Divider,
+  Link,
+  MasonProvider,
+  Select,
+  Spinner,
+  Stack,
+  Text,
+  TextField
+});
+//# sourceMappingURL=index.cjs.map