timvir 0.2.50 → 0.2.52

package/blocks/Cover/Cover.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+import type * as React from "react";
 /**
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     metadata: {
         width: number;
         height: number;
@@ -16,5 +16,5 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
         type: string;
     }>;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Cover(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Cover/index.d.ts

@@ -1 +1 @@
-export { default as Cover } from "./Cover";
+export { Cover } from "./Cover";

package/blocks/Cover/index.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function cx(...args) {
@@ -177,7 +176,7 @@ const layoutStyles = {
 };
 
 const Root = "div";
-function Cover(props$1, ref) {
+function Cover(props$1) {
   const {
     metadata,
     img: img1,
@@ -186,7 +185,6 @@ function Cover(props$1, ref) {
   } = props$1;
   const rootStyleProps = props(layoutStyles.block, layoutStyles.fullWidth);
   return /*#__PURE__*/jsx(Root, {
-    ref: ref,
     ...rest,
     ...rootStyleProps,
     className: cx(rest.className, rootStyleProps.className),
@@ -201,6 +199,5 @@ function Cover(props$1, ref) {
     })
   });
 }
-var Cover_default = /*#__PURE__*/React.forwardRef(Cover);
 
-export { Cover_default as Cover };
+export { Cover };

package/blocks/Cover/styles.css

@@ -47,8 +47,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-l1xv1r {
@@ -56,14 +56,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Exhibit/Exhibit.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 /**
  * The underlying DOM element which is rendered by this component.
  */
@@ -11,7 +11,7 @@ interface Props extends React.ComponentProps<typeof Root> {
      * (can be inline or reference to a CSS variable).
      */
     bleed?: string | number;
-    BackdropProps?: React.ComponentPropsWithoutRef<"div">;
+    BackdropProps?: React.ComponentPropsWithRef<"div">;
     /**
      * Override the theme used for the background pattern. If not provided, the
      * Exhibit component will use the default from the context. If that is also
@@ -19,5 +19,5 @@ interface Props extends React.ComponentProps<typeof Root> {
      */
     theme?: "system" | "light" | "dark";
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Exhibit(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Exhibit/docs/index.mdx

@@ -1,22 +1,19 @@
-import { Grid } from "timvir/blocks";
+import { Code, Grid } from "timvir/blocks";
 
 # Exhibit
 
-The `<Exhibit>` is a block which presents something–usually a React component–in a nice way.
+> Presents a component on a checkered background with optional caption and controls.
 
-The presented element is placed on top of a checkered background.
-This helps illustrating which parts of the element are transparent, or if the element comes with a specific background color.
+<Sample variant="basic" />
 
-A bit of padding is included all around the presented element.
-Together with the checkered background, it makes the `<Exhibit>` block stand out next plain text or other blocks.
+The presented element is placed on a checkered background with padding all around.
+The checkered pattern makes transparency and background colors immediately visible, while the padding helps the block stand out from surrounding text or other blocks.
 You can tweak the bleed size, or disable the bleed altogether if you want to draw attention to the exact box size of the presented element itself.
 
 The caption, if provided, is placed below the block.
 Use it to explain what is being presented, or provide contex around it.
 Think of the `<Exhibit>` block as a `<figure>` + `<figcaption>` for React components.
 
-<Sample variant="basic" />
-
 ## Usage
 
 Import `Exhibit` from the `timvir/blocks` module, then use in a Timvir mdx page like so:
@@ -57,3 +54,9 @@ In those cases, you can force a light or dark theme with the `theme` prop.
     <Sample variant="theme" props={{ theme: "dark" }} />
   </div>
 </Grid>
+
+<Code language="jsx" caption="Use the theme prop to force a light or dark background, regardless of the user's color scheme preference.">
+  {`<Exhibit theme="light">
+  This component requires a light background.
+</Exhibit>`}
+</Code>

package/blocks/Exhibit/index.d.ts

@@ -1 +1 @@
-export { default as Exhibit } from "./Exhibit";
+export { Exhibit } from "./Exhibit";

package/blocks/Exhibit/index.js

@@ -1,6 +1,5 @@
 'use client';
 import { useContext, useBlock } from 'timvir/core';
-import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function cx(...args) {
@@ -174,7 +173,7 @@ const layoutStyles = {
   }};
 
 const Root = "div";
-function Exhibit(props$1, ref) {
+function Exhibit(props$1) {
   const {
     theme: defaultTheme
   } = useContext().blocks?.Exhibit ?? {};
@@ -195,7 +194,6 @@ function Exhibit(props$1, ref) {
   const rootStyleProps = props(layoutStyles.block, styles.root);
   const containerStyleProps = props(styles.container, bleed === 0 && styles.bleedZero, styles[`${theme}Theme`]);
   return /*#__PURE__*/jsxs(Root, {
-    ref: ref,
     "data-timvir-b-exhibit": true,
     ...rest,
     ...rootStyleProps,
@@ -225,7 +223,6 @@ function Exhibit(props$1, ref) {
     })]
   });
 }
-var Exhibit_default = /*#__PURE__*/React.forwardRef(Exhibit);
 const cssVariables = {
   bleed: "--timvir-b-Exhibit-bleed",
   borderColor: "--timvir-b-Exhibit-borderColor",
@@ -273,4 +270,4 @@ const styles = {
   }
 };
 
-export { Exhibit_default as Exhibit };
+export { Exhibit };

package/blocks/Exhibit/styles.css

@@ -66,7 +66,7 @@
   }
 
   .timvir-s-zqqpyx {
-    margin-inline: calc(-1 * var(--timvir-b-Exhibit-bleed));
+    margin-inline: calc(-1*var(--timvir-b-Exhibit-bleed));
   }
 }
 
@@ -103,8 +103,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-jkpybl {
@@ -112,14 +112,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Font/Font.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     name: string;
     font: {
         style?: React.CSSProperties;
@@ -11,5 +11,5 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
     };
     info?: React.ReactNode;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Font(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Font/index.d.ts

@@ -1 +1 @@
-export { default as Font } from "./Font";
+export { Font } from "./Font";

package/blocks/Font/index.js

@@ -194,7 +194,7 @@ const SvgInfo = props => /*#__PURE__*/jsxs("svg", {
 });
 
 const Root = "div";
-function Font(props$1, ref) {
+function Font(props$1) {
   const components = useArticleComponents();
   const {
     name,
@@ -229,7 +229,6 @@ function Font(props$1, ref) {
     className: "timvir-s-1a2a7pz timvir-s-1hx0egp timvir-s-126k92a timvir-s-1mzt3pk"
   };
   return /*#__PURE__*/jsxs(Root, {
-    ref: ref,
     ...rest,
     ...rootStyleProps,
     className: cx(rest.className, rootStyleProps.className),
@@ -303,6 +302,5 @@ function Font(props$1, ref) {
     })]
   });
 }
-var Font_default = /*#__PURE__*/React.forwardRef(Font);
 
-export { Font_default as Font };
+export { Font };

package/blocks/Font/styles.css

@@ -91,8 +91,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1mzt3pk {
@@ -104,6 +104,7 @@
   }
 
   .timvir-s-1hx0egp {
+    -webkit-user-select: text;
     user-select: text;
   }
 
@@ -120,14 +121,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Grid/Grid.d.ts

@@ -5,5 +5,5 @@ import * as React from "react";
 declare const Root = "div";
 interface Props extends React.ComponentProps<typeof Root> {
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Grid(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Grid/docs/index.mdx

@@ -4,7 +4,7 @@ import { fullWidth } from "timvir/core";
 
 # Grid
 
-> CSS grid with a predefined template (columns, gaps etc)
+> CSS grid with a predefined template (columns, gaps etc).
 
 ```
 <Grid>

package/blocks/Grid/index.d.ts

@@ -1 +1 @@
-export { default as Grid } from "./Grid";
+export { Grid } from "./Grid";

package/blocks/Grid/index.js

@@ -172,7 +172,7 @@ const layoutStyles = {
   }};
 
 const Root = "div";
-function Grid(props$1, ref) {
+function Grid(props$1) {
   const {
     children,
     className,
@@ -180,7 +180,6 @@ function Grid(props$1, ref) {
   } = props$1;
   const rootStyleProps = props(layoutStyles.block, styles.root);
   return /*#__PURE__*/jsx(Root, {
-    ref: ref,
     ...rest,
     ...rootStyleProps,
     style: {
@@ -207,7 +206,6 @@ function Grid(props$1, ref) {
     })
   });
 }
-var Grid_default = /*#__PURE__*/React.forwardRef(Grid);
 const styles = {
   root: {
     k1xSpc: "timvir-s-rvj5dj",
@@ -218,4 +216,4 @@ const styles = {
   }
 };
 
-export { Grid_default as Grid };
+export { Grid };

package/blocks/Grid/styles.css

@@ -51,8 +51,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1ayh3g3 {
@@ -60,14 +60,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 import type { Descriptor } from "./types";
 /**
  * The underlying DOM element which is rendered by this component.
@@ -7,5 +7,5 @@ declare const Root = "div";
 interface Props extends React.ComponentProps<typeof Root> {
     descriptor: Descriptor;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Icon/index.d.ts

@@ -1 +1 @@
-export { default as Icon } from "./Icon";
+export { Icon } from "./Icon";

package/blocks/Icon/index.js

@@ -1,6 +1,5 @@
 'use client';
 import { useResizeObserverEntry } from 'timvir/hooks';
-import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function cx(...args) {
@@ -101,7 +100,7 @@ function Grid({
 }
 
 const Root = "div";
-function Icon(props, ref) {
+function Icon(props) {
   const {
     descriptor,
     ...rest
@@ -112,7 +111,6 @@ function Icon(props, ref) {
     className: "timvir-s-1n2onr6 timvir-s-1vjfegm timvir-s-dtfvks timvir-s-d2wi23"
   };
   return /*#__PURE__*/jsx(Root, {
-    ref: ref,
     ...rest,
     ...rootStyleProps,
     className: cx(rest.className, rootStyleProps.className),
@@ -136,6 +134,5 @@ function Icon(props, ref) {
     })
   });
 }
-var Icon_default = /*#__PURE__*/React.forwardRef(Icon);
 
-export { Icon_default as Icon };
+export { Icon };

package/blocks/Icon/internal/Canvas.d.ts

@@ -5,5 +5,5 @@ interface Props {
     size: number;
     Component: React.ElementType;
 }
-declare function Canvas(props: Props): import("react/jsx-runtime").JSX.Element;
-export default Canvas;
+export declare function Canvas(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Icon/internal/index.d.ts

@@ -1 +1 @@
-export { default as Canvas } from "./Canvas";
+export { Canvas } from "./Canvas";

package/blocks/Icon/styles.css

@@ -88,6 +88,7 @@
   }
 
   .timvir-s-87ps6o {
+    -webkit-user-select: none;
     user-select: none;
   }
 

package/blocks/Message/Message.d.ts

@@ -3,8 +3,8 @@ import * as React from "react";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     variant?: "info" | "warning" | "alert";
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Message(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Message/docs/index.mdx

@@ -3,7 +3,7 @@ import { Code } from "../../Code";
 
 # Message
 
-The `<Message>` component is a simple container for messages.
+> A simple container for displaying messages with optional intent and icon.
 
 <Sample variant="basic" />
 

package/blocks/Message/index.d.ts

@@ -1 +1 @@
-export { default as Message } from "./Message";
+export { Message } from "./Message";

package/blocks/Message/index.js

@@ -213,14 +213,13 @@ const layoutStyles = {
   }};
 
 const Root = "div";
-function Message(props$1, ref) {
+function Message(props$1) {
   const {
     variant,
     children,
     ...rest
   } = props$1;
   return /*#__PURE__*/jsxs(Root, {
-    ref: ref,
     ...props(layoutStyles.block, styles.root, variant && styles[variant]),
     ...rest,
     children: [variant && {
@@ -257,7 +256,6 @@ function Message(props$1, ref) {
     })]
   });
 }
-var Message_default = /*#__PURE__*/React.forwardRef(Message);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
@@ -316,4 +314,4 @@ const styles = {
   }
 };
 
-export { Message_default as Message };
+export { Message };

package/blocks/Message/styles.css

@@ -127,8 +127,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1evy7pa {
@@ -140,14 +140,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Swatch/Swatch.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     /**
      * The CSS Color value of the swatch. Any CSS color definition is accepted.
      *
@@ -29,5 +29,5 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
      */
     ancestry?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Swatch(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Swatch/docs/index.mdx

@@ -4,8 +4,7 @@ import { Grid } from "../../Grid";
 
 # Swatch
 
-A `<Swatch>` is a colored block element.
-It highlights a particular color, and provides additional information to it.
+> A colored block element that highlights a particular color with additional information.
 
 <Swatch value="#FF00FF" />
 

package/blocks/Swatch/index.d.ts

@@ -1 +1 @@
-export { default as Swatch } from "./Swatch";
+export { Swatch } from "./Swatch";

package/blocks/Swatch/index.js

@@ -174,7 +174,7 @@ const layoutStyles = {
   }};
 
 const Root = "div";
-function Swatch(props$1, ref) {
+function Swatch(props$1) {
   const block = useBlock(props$1);
   const {
     value,
@@ -197,7 +197,6 @@ function Swatch(props$1, ref) {
   };
   return /*#__PURE__*/jsx(Root, {
     role: "button",
-    ref: ref,
     ...rest,
     ...rootStyleProps,
     className: cx(rootStyleProps.className, className),
@@ -236,7 +235,6 @@ function Swatch(props$1, ref) {
     })
   });
 }
-var Swatch_default = /*#__PURE__*/React.forwardRef(Swatch);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
@@ -244,4 +242,4 @@ const styles = {
   }
 };
 
-export { Swatch_default as Swatch };
+export { Swatch };