@baseline-ui/core 0.11.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -37,9 +37,10 @@ interface BlockProps {
37
37
  /**
38
38
  * The unique identifier for the block. This is used to identify the block in
39
39
  * the DOM and in the block map. It is added as a data attribute
40
- * `data-blockid` to the root element of the block if a DOM node is rendered.
40
+ * `data-block-id` to the root element of the block if a DOM node is
41
+ * rendered.
41
42
  */
42
- "data-blockid"?: Key;
43
+ "data-block-id"?: Key;
43
44
  }
44
45
 
45
46
  interface StylingProps extends BlockProps {
@@ -1149,6 +1150,11 @@ interface FreehandCanvasProps extends StylingProps, AriaLabelingProps {
1149
1150
  onChangeEnd?: (points: number[][][]) => void;
1150
1151
  /** The default points to render. */
1151
1152
  defaultValue?: number[][][];
1153
+ /**
1154
+ * The value of the canvas. This can be used to make the canvas a controlled
1155
+ * component.
1156
+ */
1157
+ value?: number[][][];
1152
1158
  /** The label for the canvas. */
1153
1159
  label?: string;
1154
1160
  /**
@@ -1202,7 +1208,7 @@ type TextProps<T extends keyof React.JSX.IntrinsicElements = "span"> = StylingPr
1202
1208
  elementType?: React.ElementType;
1203
1209
  };
1204
1210
 
1205
- declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, "children" | "autoFocus" | "onFocus" | "onBlur" | "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onDrop" | "onDragStart" | "onDragEnd" | "className" | "style" | "data-blockid" | "type" | "color" | "size" | "content" | "translate" | "hidden" | "elementType" | "role" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
1211
+ declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, "children" | "autoFocus" | "onFocus" | "onBlur" | "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onDrop" | "onDragStart" | "onDragEnd" | "className" | "style" | "data-block-id" | "type" | "color" | "size" | "content" | "translate" | "hidden" | "elementType" | "role" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
1206
1212
 
1207
1213
  type TransformProps = {
1208
1214
  /** The `className` property assigned to the root element of the component. */
@@ -1313,13 +1319,13 @@ interface ImageDropZoneProps extends Omit<SharedFileUploadProps, "label" | "vari
1313
1319
  * The initial image to display. This will be used as the `src` attribute of
1314
1320
  * the `<img>` element. You will be able to choose a new image.
1315
1321
  */
1316
- defaultImageSrc?: string;
1322
+ defaultImageSrc?: string | File;
1317
1323
  /**
1318
1324
  * The image to display. This will be used as the `src` attribute of the
1319
1325
  * `<img>` element and will not be able to be changed from within the
1320
1326
  * component. Basically, this makes the component controlled.
1321
1327
  */
1322
- imageSrc?: string;
1328
+ imageSrc?: string | File;
1323
1329
  /**
1324
1330
  * The alt text to display for the image. This will be used as the `alt`
1325
1331
  * attribute of the `<img>`. element. If no `imageAlt` is provided, the
@@ -1390,6 +1396,18 @@ interface PreviewProps extends StylingProps, AriaLabelingProps {
1390
1396
  deleteAriaLabel?: string;
1391
1397
  /** The callback to be called when the preview is clicked. */
1392
1398
  addAriaLabel?: string;
1399
+ /**
1400
+ * The accent variable represents the type of accent color used in the
1401
+ * application. It can have one of the following values:
1402
+ *
1403
+ * - "theme": Represents the accent color defined by the current application
1404
+ * theme.
1405
+ * - "positive": Represents a positive accent color that doesn't change with
1406
+ * theme.
1407
+ *
1408
+ * @default "theme"
1409
+ */
1410
+ accent?: "theme" | "positive";
1393
1411
  }
1394
1412
 
1395
1413
  declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
@@ -1555,7 +1573,7 @@ interface GroupProps extends StylingProps, AriaLabelingProps {
1555
1573
  declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
1556
1574
 
1557
1575
  type SprinkleProps = Parameters<Sprinkles>[0];
1558
- interface BoxProps extends Pick<StylingProps, "data-blockid">, Omit<React.ComponentPropsWithoutRef<"div">, "color">, SprinkleProps {
1576
+ interface BoxProps extends Pick<StylingProps, "data-block-id">, Omit<React.ComponentPropsWithoutRef<"div">, "color">, SprinkleProps {
1559
1577
  /**
1560
1578
  * The HTML element to use for the box.
1561
1579
  *
@@ -1592,8 +1610,15 @@ interface ToggleIconButtonProps extends StylingProps, Omit<ToggleProps, "childre
1592
1610
  size?: "xxs" | "xs" | "sm" | "md" | "lg";
1593
1611
  /** Represents the variant of a component. */
1594
1612
  variant?: "primary" | "secondary" | "tertiary" | "toolbar";
1595
- /** The icon to be displayed on the button. */
1596
- icon: React.FC<IconProps>;
1613
+ /**
1614
+ * The icon to be displayed on the button. You can pass an object with
1615
+ * `selected` and `unselected` keys to display different icons based on the
1616
+ * state of the button.
1617
+ */
1618
+ icon: React.FC<IconProps> | {
1619
+ selected: React.FC<IconProps>;
1620
+ unselected: React.FC<IconProps>;
1621
+ };
1597
1622
  }
1598
1623
 
1599
1624
  declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
package/dist/index.d.ts CHANGED
@@ -37,9 +37,10 @@ interface BlockProps {
37
37
  /**
38
38
  * The unique identifier for the block. This is used to identify the block in
39
39
  * the DOM and in the block map. It is added as a data attribute
40
- * `data-blockid` to the root element of the block if a DOM node is rendered.
40
+ * `data-block-id` to the root element of the block if a DOM node is
41
+ * rendered.
41
42
  */
42
- "data-blockid"?: Key;
43
+ "data-block-id"?: Key;
43
44
  }
44
45
 
45
46
  interface StylingProps extends BlockProps {
@@ -1149,6 +1150,11 @@ interface FreehandCanvasProps extends StylingProps, AriaLabelingProps {
1149
1150
  onChangeEnd?: (points: number[][][]) => void;
1150
1151
  /** The default points to render. */
1151
1152
  defaultValue?: number[][][];
1153
+ /**
1154
+ * The value of the canvas. This can be used to make the canvas a controlled
1155
+ * component.
1156
+ */
1157
+ value?: number[][][];
1152
1158
  /** The label for the canvas. */
1153
1159
  label?: string;
1154
1160
  /**
@@ -1202,7 +1208,7 @@ type TextProps<T extends keyof React.JSX.IntrinsicElements = "span"> = StylingPr
1202
1208
  elementType?: React.ElementType;
1203
1209
  };
1204
1210
 
1205
- declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, "children" | "autoFocus" | "onFocus" | "onBlur" | "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onDrop" | "onDragStart" | "onDragEnd" | "className" | "style" | "data-blockid" | "type" | "color" | "size" | "content" | "translate" | "hidden" | "elementType" | "role" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
1211
+ declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, "children" | "autoFocus" | "onFocus" | "onBlur" | "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onDrop" | "onDragStart" | "onDragEnd" | "className" | "style" | "data-block-id" | "type" | "color" | "size" | "content" | "translate" | "hidden" | "elementType" | "role" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
1206
1212
 
1207
1213
  type TransformProps = {
1208
1214
  /** The `className` property assigned to the root element of the component. */
@@ -1313,13 +1319,13 @@ interface ImageDropZoneProps extends Omit<SharedFileUploadProps, "label" | "vari
1313
1319
  * The initial image to display. This will be used as the `src` attribute of
1314
1320
  * the `<img>` element. You will be able to choose a new image.
1315
1321
  */
1316
- defaultImageSrc?: string;
1322
+ defaultImageSrc?: string | File;
1317
1323
  /**
1318
1324
  * The image to display. This will be used as the `src` attribute of the
1319
1325
  * `<img>` element and will not be able to be changed from within the
1320
1326
  * component. Basically, this makes the component controlled.
1321
1327
  */
1322
- imageSrc?: string;
1328
+ imageSrc?: string | File;
1323
1329
  /**
1324
1330
  * The alt text to display for the image. This will be used as the `alt`
1325
1331
  * attribute of the `<img>`. element. If no `imageAlt` is provided, the
@@ -1390,6 +1396,18 @@ interface PreviewProps extends StylingProps, AriaLabelingProps {
1390
1396
  deleteAriaLabel?: string;
1391
1397
  /** The callback to be called when the preview is clicked. */
1392
1398
  addAriaLabel?: string;
1399
+ /**
1400
+ * The accent variable represents the type of accent color used in the
1401
+ * application. It can have one of the following values:
1402
+ *
1403
+ * - "theme": Represents the accent color defined by the current application
1404
+ * theme.
1405
+ * - "positive": Represents a positive accent color that doesn't change with
1406
+ * theme.
1407
+ *
1408
+ * @default "theme"
1409
+ */
1410
+ accent?: "theme" | "positive";
1393
1411
  }
1394
1412
 
1395
1413
  declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
@@ -1555,7 +1573,7 @@ interface GroupProps extends StylingProps, AriaLabelingProps {
1555
1573
  declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
1556
1574
 
1557
1575
  type SprinkleProps = Parameters<Sprinkles>[0];
1558
- interface BoxProps extends Pick<StylingProps, "data-blockid">, Omit<React.ComponentPropsWithoutRef<"div">, "color">, SprinkleProps {
1576
+ interface BoxProps extends Pick<StylingProps, "data-block-id">, Omit<React.ComponentPropsWithoutRef<"div">, "color">, SprinkleProps {
1559
1577
  /**
1560
1578
  * The HTML element to use for the box.
1561
1579
  *
@@ -1592,8 +1610,15 @@ interface ToggleIconButtonProps extends StylingProps, Omit<ToggleProps, "childre
1592
1610
  size?: "xxs" | "xs" | "sm" | "md" | "lg";
1593
1611
  /** Represents the variant of a component. */
1594
1612
  variant?: "primary" | "secondary" | "tertiary" | "toolbar";
1595
- /** The icon to be displayed on the button. */
1596
- icon: React.FC<IconProps>;
1613
+ /**
1614
+ * The icon to be displayed on the button. You can pass an object with
1615
+ * `selected` and `unselected` keys to display different icons based on the
1616
+ * state of the button.
1617
+ */
1618
+ icon: React.FC<IconProps> | {
1619
+ selected: React.FC<IconProps>;
1620
+ unselected: React.FC<IconProps>;
1621
+ };
1597
1622
  }
1598
1623
 
1599
1624
  declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;