@misoto22/kioku-ui 0.0.0 → 0.2.0

package/src/tokens/contracts.ts

@@ -18,7 +18,8 @@ type ColorRole =
   | 'overlayActive'
   | 'disabledSurface'
   | 'disabledText'
-  | 'focus';
+  | 'focus'
+  | 'scrim';
 type BorderRole =
   'default' | 'strong' | 'interactive' | 'disabled' | 'width' | 'style';
 type StatusRole =
@@ -47,7 +48,13 @@ type TypographyRole =
   | 'fontWeightMedium'
   | 'fontWeightStrong'
   | 'lineHeightBody'
-  | 'lineHeightHeading';
+  | 'lineHeightHeading'
+  | 'letterSpacingTitle'
+  | 'letterSpacingHeading'
+  | 'letterSpacingBody'
+  | 'letterSpacingLabel'
+  | 'letterSpacingEyebrow'
+  | 'letterSpacingMono';
 type SpacingRole = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type RadiusRole = 'inner' | 'element' | 'container' | 'page' | 'full';
 type SizeRole = 'controlSm' | 'controlMd' | 'controlLg' | 'hitTarget';
@@ -92,6 +99,7 @@ export const tokenContract = {
     disabledSurface: 'color.disabledSurface',
     disabledText: 'color.disabledText',
     focus: 'color.focus',
+    scrim: 'color.scrim',
   },
   border: {
     default: 'border.default',
@@ -132,6 +140,12 @@ export const tokenContract = {
     fontWeightStrong: 'typography.fontWeightStrong',
     lineHeightBody: 'typography.lineHeightBody',
     lineHeightHeading: 'typography.lineHeightHeading',
+    letterSpacingTitle: 'typography.letterSpacingTitle',
+    letterSpacingHeading: 'typography.letterSpacingHeading',
+    letterSpacingBody: 'typography.letterSpacingBody',
+    letterSpacingLabel: 'typography.letterSpacingLabel',
+    letterSpacingEyebrow: 'typography.letterSpacingEyebrow',
+    letterSpacingMono: 'typography.letterSpacingMono',
   },
   spacing: {
     xs: 'spacing.xs',

package/src/utils/clamp.ts

@@ -0,0 +1,4 @@
+/** Holds a number inside an inclusive range. */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export {clamp} from './clamp.js';
+export {mergeIds} from './mergeIds.js';
+export {resolveInvalid} from './resolveInvalid.js';

package/src/utils/mergeIds.ts

@@ -0,0 +1,11 @@
+/**
+ * Joins ids for an ARIA relationship attribute, dropping empty ones. Returns
+ * `undefined` rather than an empty string, because `aria-describedby=""`
+ * points at nothing and confuses some screen readers.
+ */
+export function mergeIds(
+  ...ids: readonly (string | undefined | false | null)[]
+): string | undefined {
+  const joined = ids.filter(Boolean).join(' ');
+  return joined === '' ? undefined : joined;
+}

package/src/utils/resolveInvalid.ts

@@ -0,0 +1,10 @@
+/**
+ * Reads an `aria-invalid` value as a boolean. The attribute accepts strings,
+ * and the string `"false"` means valid — a plain truthiness check would read
+ * it as invalid.
+ */
+export function resolveInvalid(
+  value: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined,
+): boolean {
+  return value !== undefined && value !== false && value !== 'false';
+}

package/dist/components/Alert.d.ts

@@ -1,7 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import type { StatusTone } from './Badge.js';
-export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'role'> {
-    readonly icon?: ReactNode;
-    readonly tone?: StatusTone;
-}
-export declare function Alert({ children, icon, tone, ...props }: AlertProps): import("react").JSX.Element;

package/dist/components/Alert.doc.js

@@ -1,15 +0,0 @@
-import "../styles/stylex.css";
-export const alertDoc = {
-  name: 'Alert',
-  description: 'Announces feedback with a quiet status boundary and polite or assertive live semantics.',
-  props: [{
-    name: 'icon',
-    description: 'Overrides the tone-specific decorative status icon without adding an announcement.'
-  }, {
-    name: 'tone',
-    description: 'Selects the semantic status tone and live behavior.'
-  }],
-  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className and role'],
-  example: '<Alert tone="danger">Unable to save.</Alert>',
-  storyId: 'core-alert--default'
-};

package/dist/components/Alert.js

@@ -1,149 +0,0 @@
-import * as stylex from '@stylexjs/stylex';
-import { semanticTokens } from '../authoring.stylex.js';
-import "../styles/stylex.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  base: {
-    kGNEyG: "x1cy8zhl",
-    kaIpWk: "x8kq9my",
-    ksu8eU: "x1jnjmdy",
-    kMzoRj: "xpxnlqs",
-    k1xSpc: "x78zum5",
-    kMv6JI: "xj0sio9",
-    kGuDYH: "x1ti3rys",
-    kOIVth: "xtl099x",
-    kLWn49: "x1ezks3f",
-    kmVPX3: "x14rluyd",
-    $$css: true
-  },
-  info: {
-    kWkggS: "x1760qql",
-    kVAM5u: "x124ze02",
-    kMwMTN: "x1ursi0k",
-    $$css: true
-  },
-  success: {
-    kWkggS: "xjdu3ya",
-    kVAM5u: "x86rt86",
-    kMwMTN: "xw2tli",
-    $$css: true
-  },
-  warning: {
-    kWkggS: "xqpqlc7",
-    kVAM5u: "xkfpxyo",
-    kMwMTN: "x6rqny5",
-    $$css: true
-  },
-  danger: {
-    kWkggS: "x12uiudv",
-    kVAM5u: "xcf5wgx",
-    kMwMTN: "x8bm3zx",
-    $$css: true
-  },
-  icon: {
-    kGNEyG: "x6s0dn4",
-    k1xSpc: "x78zum5",
-    kmuXW: "x2lah0s",
-    kZKoxP: "x7s8d8b",
-    kjj79g: "xl56j7k",
-    kzqmXN: "x1psh5v9",
-    $$css: true
-  },
-  content: {
-    kUk6DE: "x98rzlu",
-    k7Eaqz: "xeuugli",
-    $$css: true
-  }
-};
-function DefaultAlertIcon({
-  tone
-}) {
-  const sharedProps = {
-    fill: 'none',
-    height: '100%',
-    stroke: 'currentColor',
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    strokeWidth: 2,
-    viewBox: '0 0 20 20',
-    width: '100%'
-  };
-  if (tone === 'success') {
-    return /*#__PURE__*/_jsxs("svg", {
-      ...sharedProps,
-      children: [/*#__PURE__*/_jsx("circle", {
-        cx: "10",
-        cy: "10",
-        r: "8"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "m6.5 10 2.2 2.2 4.8-5"
-      })]
-    });
-  }
-  if (tone === 'warning') {
-    return /*#__PURE__*/_jsxs("svg", {
-      ...sharedProps,
-      children: [/*#__PURE__*/_jsx("path", {
-        d: "M10 2.5 18 17H2L10 2.5Z"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M10 7v4"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M10 14h.01"
-      })]
-    });
-  }
-  if (tone === 'danger') {
-    return /*#__PURE__*/_jsxs("svg", {
-      ...sharedProps,
-      children: [/*#__PURE__*/_jsx("circle", {
-        cx: "10",
-        cy: "10",
-        r: "8"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "m7 7 6 6M13 7l-6 6"
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs("svg", {
-    ...sharedProps,
-    children: [/*#__PURE__*/_jsx("circle", {
-      cx: "10",
-      cy: "10",
-      r: "8"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M10 9v5"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M10 6h.01"
-    })]
-  });
-}
-export function Alert({
-  children,
-  icon,
-  tone = 'info',
-  ...props
-}) {
-  const isDanger = tone === 'danger';
-  const hasCustomIcon = icon !== undefined && icon !== null && icon !== false;
-  return /*#__PURE__*/_jsxs("div", {
-    ...props,
-    "aria-live": isDanger ? 'assertive' : 'polite',
-    role: isDanger ? 'alert' : 'status',
-    ...stylex.props(styles.base, styles[tone]),
-    children: [/*#__PURE__*/_jsx("span", {
-      "aria-hidden": "true",
-      "data-alert-icon": hasCustomIcon ? 'custom' : tone,
-      ...{
-        className: "x6s0dn4 x78zum5 x2lah0s x7s8d8b xl56j7k x1psh5v9"
-      },
-      children: hasCustomIcon ? icon : /*#__PURE__*/_jsx(DefaultAlertIcon, {
-        tone: tone
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      ...{
-        className: "x98rzlu xeuugli"
-      },
-      children: children
-    })]
-  });
-}

package/dist/components/AsyncState.d.ts

@@ -1,30 +0,0 @@
-import type { ReactNode } from 'react';
-export type AsyncStateValue<T> = {
-    readonly kind: 'loading';
-    readonly label?: string;
-} | {
-    readonly kind: 'empty';
-    readonly title: ReactNode;
-    readonly detail?: ReactNode;
-    readonly action?: ReactNode;
-} | {
-    readonly kind: 'error';
-    readonly title: ReactNode;
-    readonly detail?: ReactNode;
-    readonly retry?: ReactNode;
-} | {
-    readonly kind: 'ready';
-    readonly data: T;
-};
-type PendingAsyncStateValue<T> = Exclude<AsyncStateValue<T>, {
-    kind: 'ready';
-}>;
-export type AsyncStateProps<T> = {
-    readonly children: (data: T) => ReactNode;
-    readonly state: AsyncStateValue<T>;
-} | {
-    readonly children?: never;
-    readonly state: PendingAsyncStateValue<T>;
-};
-export declare function AsyncState<T>({ children, state }: AsyncStateProps<T>): import("react").JSX.Element;
-export {};

package/dist/components/AsyncState.doc.js

@@ -1,16 +0,0 @@
-import "../styles/stylex.css";
-export const asyncStateDoc = {
-  name: 'AsyncState',
-  description: 'Renders distinct loading, empty, error, and ready states.',
-  props: [{
-    name: 'children',
-    description: 'Renders ready data and is required for the ready state.'
-  }, {
-    name: 'state',
-    description: 'Provides the current discriminated async state.',
-    required: true
-  }],
-  inheritedProps: ['No inherited DOM attributes'],
-  example: '<AsyncState state={{kind: "ready", data}}>{renderData}</AsyncState>',
-  storyId: 'core-async-state--default'
-};

package/dist/components/AsyncState.js

@@ -1,36 +0,0 @@
-import { Alert } from './Alert.js';
-import { EmptyStateContent } from './EmptyState.js';
-import { SpinnerVisual } from './Spinner.js';
-import "../styles/stylex.css";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export function AsyncState({
-  children,
-  state
-}) {
-  if (state.kind === 'ready' && !children) {
-    throw new Error('AsyncState requires a renderer for ready data');
-  }
-  const loadingLabel = state.kind === 'loading' ? state.label ?? 'Loading' : undefined;
-  const statusContent = state.kind === 'loading' ? /*#__PURE__*/_jsx(SpinnerVisual, {}) : state.kind === 'empty' ? /*#__PURE__*/_jsx(EmptyStateContent, {
-    action: state.action,
-    detail: state.detail,
-    title: state.title
-  }) : state.kind === 'ready' ? children(state.data) : null;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      "aria-atomic": "true",
-      "aria-busy": state.kind === 'loading',
-      "aria-label": loadingLabel,
-      "aria-live": "polite",
-      role: "status",
-      children: statusContent
-    }), state.kind === 'error' ? /*#__PURE__*/_jsxs(Alert, {
-      tone: "danger",
-      children: [/*#__PURE__*/_jsx("div", {
-        children: state.title
-      }), state.detail ? /*#__PURE__*/_jsx("div", {
-        children: state.detail
-      }) : null, state.retry]
-    }) : null]
-  });
-}

package/dist/components/Badge.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-/** Semantic feedback tones shared by status components. */
-export type StatusTone = 'info' | 'success' | 'warning' | 'danger';
-/** Compact badge tones, including a non-status neutral treatment. */
-export type BadgeTone = 'neutral' | StatusTone;
-/** Props for compact status or category text. */
-export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
-    readonly tone?: BadgeTone;
-}
-export declare function Badge({ children, tone, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/components/Badge.doc.js

@@ -1,12 +0,0 @@
-import "../styles/stylex.css";
-export const badgeDoc = {
-  name: 'Badge',
-  description: 'Displays compact, non-live status or category text.',
-  props: [{
-    name: 'tone',
-    description: 'Selects the neutral default or a semantic status tone.'
-  }],
-  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except className'],
-  example: '<Badge tone="success">Available</Badge>',
-  storyId: 'core-badge--default'
-};

package/dist/components/Badge.js

@@ -1,58 +0,0 @@
-import * as stylex from '@stylexjs/stylex';
-import { semanticTokens } from '../authoring.stylex.js';
-
-/** Semantic feedback tones shared by status components. */
-import "../styles/stylex.css";
-/** Compact badge tones, including a non-status neutral treatment. */
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  base: {
-    kaIpWk: "xnpwncj",
-    k1xSpc: "x3nfvp2",
-    kMv6JI: "xj0sio9",
-    kGuDYH: "xltg2ad",
-    k63SB2: "x1m30uz7",
-    k8WAf4: "x10y07nz",
-    kg3NbH: "x1qtbwip",
-    $$css: true
-  },
-  neutral: {
-    kWkggS: "xavu78a",
-    kMwMTN: "x17y7oyd",
-    $$css: true
-  },
-  info: {
-    kWkggS: "x1760qql",
-    kMwMTN: "x1ursi0k",
-    $$css: true
-  },
-  success: {
-    kWkggS: "xjdu3ya",
-    kMwMTN: "xw2tli",
-    $$css: true
-  },
-  warning: {
-    kWkggS: "xqpqlc7",
-    kMwMTN: "x6rqny5",
-    $$css: true
-  },
-  danger: {
-    kWkggS: "x12uiudv",
-    kMwMTN: "x8bm3zx",
-    $$css: true
-  }
-};
-
-/** Props for compact status or category text. */
-
-export function Badge({
-  children,
-  tone = 'neutral',
-  ...props
-}) {
-  return /*#__PURE__*/_jsx("span", {
-    ...props,
-    ...stylex.props(styles.base, styles[tone]),
-    children: children
-  });
-}

package/dist/components/Button.d.ts

@@ -1,18 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-/** Visual sizes shared by native action controls. */
-export type ControlSize = 'sm' | 'md' | 'lg';
-/** Semantic emphasis variants shared by native action controls. */
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
-/** Props for a text-labelled native action button. */
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
-    readonly loading?: boolean;
-    readonly size?: ControlSize;
-    readonly variant?: ButtonVariant;
-}
-interface ActionControlProps extends ButtonProps {
-    readonly iconOnly?: boolean;
-}
-/** @internal Shared native implementation for Button and IconButton. */
-export declare function ActionControl({ 'aria-busy': ariaBusy, children, disabled, iconOnly, loading, size, type, variant, ...props }: ActionControlProps): import("react").JSX.Element;
-export declare function Button(props: ButtonProps): import("react").JSX.Element;
-export {};

package/dist/components/Button.doc.js

@@ -1,18 +0,0 @@
-import "../styles/stylex.css";
-export const buttonDoc = {
-  name: 'Button',
-  description: 'Triggers an action through native button semantics.',
-  props: [{
-    name: 'loading',
-    description: 'Shows progress and disables native activation.'
-  }, {
-    name: 'size',
-    description: 'Selects the fixed control height.'
-  }, {
-    name: 'variant',
-    description: 'Selects a semantic visual emphasis.'
-  }],
-  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except className'],
-  example: '<Button onClick={save}>Save</Button>',
-  storyId: 'core-button--default'
-};

package/dist/components/Button.js

@@ -1,151 +0,0 @@
-import * as stylex from '@stylexjs/stylex';
-import { semanticTokens } from '../authoring.stylex.js';
-import { SpinnerVisual } from './Spinner.js';
-import "../styles/stylex.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  base: {
-    kGNEyG: "x6s0dn4",
-    kB7OPa: "x9f619",
-    kaIpWk: "x8kq9my",
-    ksu8eU: "x1jnjmdy",
-    kMzoRj: "xpxnlqs",
-    k1xSpc: "x3nfvp2",
-    kMv6JI: "xj0sio9",
-    k63SB2: "x1m30uz7",
-    kOIVth: "x1ap6kct",
-    kjj79g: "xl56j7k",
-    kLWn49: "x1ezks3f",
-    kVAEAm: "x1n2onr6",
-    kD2jPA: "x48zea8",
-    kdODIN: "x1oulntk",
-    kWC4TW: "x609gy3",
-    kZs9gx: "x15meki4",
-    kiEn40: "xz32tfx",
-    k7shQP: "x1p22nma",
-    kPJHz1: "x17lds6u",
-    $$css: true
-  },
-  sm: {
-    kGuDYH: "xltg2ad",
-    kZKoxP: "x1vbl8lt",
-    kg3NbH: "x1qtbwip",
-    $$css: true
-  },
-  md: {
-    kGuDYH: "x1ti3rys",
-    kZKoxP: "xr8hsnb",
-    kg3NbH: "x1wkw8jr",
-    $$css: true
-  },
-  lg: {
-    kGuDYH: "x1ti3rys",
-    kZKoxP: "xscltuj",
-    kg3NbH: "x1q83fih",
-    $$css: true
-  },
-  primary: {
-    kWkggS: "x1j40q36",
-    kVAM5u: "x10ghty7",
-    kMwMTN: "x8ect3v",
-    ktLb98: "xahjstz",
-    ksVfMn: "xx21tl2",
-    kDKVdO: "xzpaccd",
-    kRIasW: "x6v1che",
-    $$css: true
-  },
-  secondary: {
-    kWkggS: "x1ixvsy6",
-    kVAM5u: "x1wxkff4",
-    kMwMTN: "x1y4yzzg",
-    ktLb98: "x1975ut4",
-    ksVfMn: "x1be0cy8",
-    kDKVdO: "xbo0ryh",
-    kRIasW: "x1u44if6",
-    $$css: true
-  },
-  ghost: {
-    kWkggS: "xjbqb8w",
-    kVAM5u: "x9r1u3d",
-    kMwMTN: "x1y4yzzg",
-    ktLb98: "x1975ut4",
-    kDKVdO: "xbo0ryh",
-    $$css: true
-  },
-  destructive: {
-    kWkggS: "x12uiudv",
-    kVAM5u: "xcf5wgx",
-    kMwMTN: "x8bm3zx",
-    k90Bq6: "xuc1b5w",
-    kFepIV: "x1pg383a",
-    $$css: true
-  },
-  loading: {
-    kkrTdU: "x19v85br",
-    $$css: true
-  },
-  iconOnly: {
-    kg3NbH: "xnjsko4",
-    $$css: true
-  },
-  iconSm: {
-    kzqmXN: "x9mi25i",
-    $$css: true
-  },
-  iconMd: {
-    kzqmXN: "x4ml2zf",
-    $$css: true
-  },
-  iconLg: {
-    kzqmXN: "x1089um4",
-    $$css: true
-  },
-  iconHitTarget: {
-    kgeoSG: "x1cpjm7i",
-    kgzTxl: "x17f96yv",
-    k96MEf: "x1knuo7r",
-    kSJ0CW: "xfbisj7",
-    kEoFBp: "x1hmns74",
-    kcTAPf: "xbnewub",
-    kOlAkY: "x1o8qpxl",
-    $$css: true
-  }
-};
-const iconSizes = {
-  sm: styles.iconSm,
-  md: styles.iconMd,
-  lg: styles.iconLg
-};
-
-/** Visual sizes shared by native action controls. */
-
-/** Semantic emphasis variants shared by native action controls. */
-
-/** Props for a text-labelled native action button. */
-
-/** @internal Shared native implementation for Button and IconButton. */
-export function ActionControl({
-  'aria-busy': ariaBusy,
-  children,
-  disabled,
-  iconOnly = false,
-  loading = false,
-  size = 'md',
-  type = 'button',
-  variant = 'primary',
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs("button", {
-    ...props,
-    "aria-busy": loading ? 'true' : ariaBusy,
-    disabled: disabled || loading,
-    ...stylex.props(styles.base, styles[size], styles[variant], loading && styles.loading, iconOnly && styles.iconOnly, iconOnly && iconSizes[size], iconOnly && styles.iconHitTarget),
-    type: type,
-    children: [loading ? /*#__PURE__*/_jsx(SpinnerVisual, {}) : null, iconOnly && loading ? null : children]
-  });
-}
-export function Button(props) {
-  return /*#__PURE__*/_jsx(ActionControl, {
-    ...props
-  });
-}

package/dist/components/Card.d.ts

@@ -1,6 +0,0 @@
-import type { HTMLAttributes } from 'react';
-export type CardElevation = 'none' | 'low' | 'medium';
-export interface CardProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
-    readonly elevation?: CardElevation;
-}
-export declare function Card({ children, elevation, ...props }: CardProps): import("react").JSX.Element;

package/dist/components/Card.doc.js

@@ -1,15 +0,0 @@
-import "../styles/stylex.css";
-export const cardDoc = {
-  name: 'Card',
-  description: 'Groups self-contained content in a token-backed article surface.',
-  props: [{
-    name: 'children',
-    description: 'The self-contained article content.'
-  }, {
-    name: 'elevation',
-    description: 'Optional boundary treatment: "none" uses a border; "low" and "medium" use only the matching elevation.'
-  }],
-  inheritedProps: ['HTMLAttributes<HTMLElement> except className and children'],
-  example: '<Card aria-label="Summary" elevation="none"><Text>Content</Text></Card>',
-  storyId: 'core-card--default'
-};

package/dist/components/Card.js

@@ -1,41 +0,0 @@
-import * as stylex from '@stylexjs/stylex';
-import { semanticTokens } from '../authoring.stylex.js';
-import "../styles/stylex.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  base: {
-    kWkggS: "x1ixvsy6",
-    kaIpWk: "x7xrhi9",
-    kMwMTN: "x1y4yzzg",
-    kmVPX3: "x167l562",
-    $$css: true
-  },
-  none: {
-    kVAM5u: "xilcjya",
-    ksu8eU: "x1jnjmdy",
-    kMzoRj: "xpxnlqs",
-    kGVxlE: "x1gnnqk1",
-    $$css: true
-  },
-  low: {
-    ksu8eU: "xng3xce",
-    kGVxlE: "x1elh21b",
-    $$css: true
-  },
-  medium: {
-    ksu8eU: "xng3xce",
-    kGVxlE: "x165nt33",
-    $$css: true
-  }
-};
-export function Card({
-  children,
-  elevation = 'none',
-  ...props
-}) {
-  return /*#__PURE__*/_jsx("article", {
-    ...props,
-    ...stylex.props(styles.base, styles[elevation]),
-    children: children
-  });
-}