@prismicio/editor-ui 0.4.28 → 0.4.29

package/README.md

@@ -5,10 +5,6 @@
 - When passing a React Node as children to a radix primitive that has the `asChild` prop, you must spread all unused props into that React Node, even if at the type level there doesn't seem to be any remaining props. This is because radix secretly set a lot of extra props on the React Node you gave it. For an example of this, see BaseInput's `otherProps`.
   We favor using `asChild` to reduce the number of DOM nodes and make it easy to size children.
 
-## vanilla-extract GOTCHAS
-
-- You can not reference a parent selector that is made of ONLY `sprinkles` generated classNames. See Field.css.ts -> labelPosition to see a workaround: An empty object is passed to `styleVariant` which is equivalent to having an empty className generated with `style({})`.
-
 ## How to add a new SVG icon
 
 1. Export the SVG icon from [Figma](https://www.figma.com/file/V5pub1BwPMJGY52YHmhTmX/Prismic---Design-System?node-id=46%3A2811). It should always be the variant with a viewbox of 24x24.

package/dist/components/AnimatedElement/AnimatedElement.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from "react";
-import { type SX, type ThemeKeys } from "../../theme/new";
+import { type SX, type ThemeKeys } from "../../theme";
 export interface AnimatedElementProps {
     children: OnlyChild;
     animation?: {

package/dist/components/AnimatedElement/AnimatedElement.stories.d.ts

@@ -16,7 +16,7 @@ export declare const Default: {
         } | undefined;
         enterDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
         exitDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
-        sx?: import("../../theme/new").SX | undefined;
+        sx?: import("../../theme").SX | undefined;
     }) => JSX.Element;
     args: {
         children: null;

package/dist/components/AnimatedList/AnimatedList.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type ThemeKeys } from "../../theme/new";
+import { type ThemeKeys } from "../../theme";
 import { type RenderDragPreview, type RenderDropIndicator } from "./dnd";
 import { type State } from "./layout";
 export interface AnimatedListProps<ITEM> {

package/dist/components/AnimatedList/AnimatedList.stories.d.ts

@@ -8,7 +8,7 @@ export default meta;
 export declare const Default: {
     render: (args: {
         ariaLabel: string;
-        gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
         direction?: "horizontal" | "vertical" | undefined;
         items: unknown[];
         getItemKey: (item: unknown) => string;

package/dist/components/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { type MouseEvent, type ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 import { type IconName } from "../Icon";
 export interface BadgeProps {
     title: ReactNode;
@@ -14,6 +14,6 @@ export interface BadgeProps {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     /** Makes the badge content editable, fires onBlur when the value has changed */
-    onEdit?: (newTitle: string) => void;
+    onEdit?: (newTitle: string) => void | Promise<void>;
 }
 export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/BaseInput/BaseInput.d.ts

@@ -1,5 +1,5 @@
 import { type AriaRole, type ClipboardEventHandler, type FocusEvent, type KeyboardEvent, type ReactNode } from "react";
-import type { SX, ThemeKeys } from "../../theme/new";
+import type { SX, ThemeKeys } from "../../theme";
 /**
  * Flexible base Input, provided with no height or block padding.
  */

package/dist/components/BlankSlate/BlankSlate.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-import { type ThemeKeys } from "../../theme/new";
+import { type ThemeKeys } from "../../theme";
 import { type IconName } from "../Icon";
 export interface BlankSlateProps {
     style?: CSSProperties;

package/dist/components/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode } from "react";
-import { type ThemeKeys } from "../../theme/new";
+import { type ThemeKeys } from "../../theme";
 export type BoxProps = {
     as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | "form" | "span";
     children?: ReactNode;

package/dist/components/Box/Box.stories.d.ts

@@ -13,7 +13,7 @@ declare const meta: {
 export default meta;
 export declare const Default: {
     render: (args: {
-        as?: "div" | "form" | "nav" | "ol" | "span" | "ul" | "article" | "header" | undefined;
+        as?: "article" | "div" | "form" | "header" | "nav" | "ol" | "span" | "ul" | undefined;
         children?: import("react").ReactNode;
         position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
         top?: string | number | undefined;
@@ -38,13 +38,13 @@ export declare const Default: {
             duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
             delay?: string | undefined;
         } | undefined;
-        padding?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
-            block?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            inline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        padding?: (0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
+            block?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            inline?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            top?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            bottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            left?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            right?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
         }) | undefined;
         border?: (boolean | {
             top?: boolean | undefined;
@@ -52,24 +52,24 @@ export declare const Default: {
             left?: boolean | undefined;
             right?: boolean | undefined;
         }) | undefined;
-        borderRadius?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | {
-            topLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
-            topRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
-            bottomLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
-            bottomRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
+        borderRadius?: (0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | {
+            topLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            topRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            bottomLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
         }) | undefined;
         borderStyle?: "none" | "dashed" | "solid" | undefined;
         borderColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
-        boxShadow?: "none" | "1" | "2" | "4" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
+        boxShadow?: "1" | "2" | "4" | "none" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
         backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
         opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
         visibility?: "hidden" | "visible" | undefined;
-        overflowY?: "hidden" | "auto" | undefined;
+        overflowY?: "auto" | "hidden" | undefined;
         overflow?: "hidden" | undefined;
         gridColumn?: string | undefined;
         gridRow?: string | undefined;
         transform?: import("csstype").Property.Transform | undefined;
-        gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
         alignItems?: "center" | "flex-start" | undefined;
         justifyContent?: "center" | "end" | "space-between" | undefined;
         display: "grid";
@@ -79,7 +79,7 @@ export declare const Default: {
         ref?: import("react").Ref<HTMLElement> | undefined;
         key?: import("react").Key | null | undefined;
     } | {
-        as?: "div" | "form" | "nav" | "ol" | "span" | "ul" | "article" | "header" | undefined;
+        as?: "article" | "div" | "form" | "header" | "nav" | "ol" | "span" | "ul" | undefined;
         children?: import("react").ReactNode;
         position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
         top?: string | number | undefined;
@@ -104,13 +104,13 @@ export declare const Default: {
             duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
             delay?: string | undefined;
         } | undefined;
-        padding?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
-            block?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            inline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-            right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        padding?: (0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
+            block?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            inline?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            top?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            bottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            left?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            right?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
         }) | undefined;
         border?: (boolean | {
             top?: boolean | undefined;
@@ -118,28 +118,28 @@ export declare const Default: {
             left?: boolean | undefined;
             right?: boolean | undefined;
         }) | undefined;
-        borderRadius?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | {
-            topLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
-            topRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
-            bottomLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
-            bottomRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
+        borderRadius?: (0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | {
+            topLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            topRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            bottomLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
         }) | undefined;
         borderStyle?: "none" | "dashed" | "solid" | undefined;
         borderColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
-        boxShadow?: "none" | "1" | "2" | "4" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
+        boxShadow?: "1" | "2" | "4" | "none" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
         backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
         opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
         visibility?: "hidden" | "visible" | undefined;
-        overflowY?: "hidden" | "auto" | undefined;
+        overflowY?: "auto" | "hidden" | undefined;
         overflow?: "hidden" | undefined;
         gridColumn?: string | undefined;
         gridRow?: string | undefined;
         transform?: import("csstype").Property.Transform | undefined;
-        gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
         alignItems?: "center" | "flex-start" | undefined;
         justifyContent?: "center" | "end" | "space-between" | undefined;
         display?: "flex" | "inline-flex" | undefined;
-        flexDirection?: "row" | "column" | undefined;
+        flexDirection?: "column" | "row" | undefined;
         gridTemplateColumns?: undefined;
         gridTemplateRows?: undefined;
         ref?: import("react").Ref<HTMLElement> | undefined;

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { type MouseEvent, type ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 import { type IconName } from "../Icon";
 export interface ButtonProps {
     children?: ReactNode;

package/dist/components/Button/Button.stories.d.ts

@@ -23,9 +23,9 @@ export declare const Default: {
         textColor?: "placeholder" | undefined;
         flexContent?: boolean | undefined;
         textWeight?: "bold" | "normal" | undefined;
-        sx?: import("../../theme/new").SX | undefined;
-        startIcon?: "label" | "code" | "link" | "image" | "search" | "alert" | "visibility" | "description" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
-        endIcon?: "label" | "code" | "link" | "image" | "search" | "alert" | "visibility" | "description" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
+        sx?: import("../../theme").SX | undefined;
+        startIcon?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
+        endIcon?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
         renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
         renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
         onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export interface ButtonGroupProps {
     children?: ReactNode;
     disabled?: boolean;

package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts

@@ -36,7 +36,7 @@ export declare const Default: {
         size?: "small" | "medium" | "large" | undefined;
         color?: "dark" | "grey" | "purple" | undefined;
         density?: "regular" | "compact" | undefined;
-        sx?: import("../../theme/new").SX | undefined;
+        sx?: import("../../theme").SX | undefined;
         ref?: import("react").Ref<HTMLDivElement> | undefined;
         key?: import("react").Key | null | undefined;
     }) => JSX.Element;

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import type { KeyboardEvent, MouseEvent, ReactNode } from "react";
-import { type SX } from "../../theme/new";
+import { type SX } from "../../theme";
 import { type TextProps } from "../Text";
 export interface CardProps {
     children?: ReactNode;

package/dist/components/Card/Card.stories.d.ts

@@ -39,7 +39,7 @@ export declare const Default: {
         paddingBlock?: 0 | 8 | 16 | 28 | undefined;
         paddingInline?: 16 | 24 | undefined;
         onSelect?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
-        sx?: import("../../theme/new").SX | undefined;
+        sx?: import("../../theme").SX | undefined;
     }) => JSX.Element;
     args: {
         color: "grey1";

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -8,9 +8,9 @@ export declare const Default: import("@storybook/types").StoryAnnotations<import
     onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     tabIndex?: number | undefined;
 }, {
-    tabIndex?: number | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     disabled?: boolean | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    tabIndex?: number | undefined;
     checked?: boolean | undefined;
     onCheckedChange?: ((checked: boolean) => void) | undefined;
 }>;

package/dist/components/ComboBox/ComboBox.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 type Variant = "attached" | "detached";
 export interface ComboBoxProps {
     children: ReactNode;
@@ -17,9 +17,10 @@ interface ComboBoxContentProps {
 }
 export declare const ComboBoxContent: import("react").ForwardRefExoticComponent<ComboBoxContentProps & import("react").RefAttributes<HTMLDivElement>>;
 type ComboBoxItemProps = {
-    onSelect: () => void;
+    value: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
-    selected?: boolean;
     children: ReactNode;
 };
 export declare const ComboBoxItem: import("react").ForwardRefExoticComponent<ComboBoxItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ComboBox/useComboBox.d.ts

@@ -17,5 +17,16 @@ export declare function useInternalSelection(props: UseInternalSelectionProps):
     onItemPicked: () => void;
     cleanupInternalState: () => void;
 };
+export declare function getValidItems(contentInnerRef: RefObject<HTMLDivElement>): Element[];
 export declare function getSelectedItem(contentInnerRef: RefObject<HTMLDivElement>): Element | null | undefined;
+interface UseSelectFirstArgs {
+    listIsOpen: boolean;
+    contentInnerRef: RefObject<HTMLDivElement>;
+    onChangeInternalSelection: (value: string | undefined) => void;
+}
+/**
+ * Selects first option if there is no selected option or the selected option is not available anymore
+ * @private
+ */
+export declare function useSelectFirst(args: UseSelectFirstArgs): void;
 export {};

package/dist/components/Cropper/Cropper.stories.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
-    image?: string | undefined;
     zoom: number;
     crop: import("react-easy-crop").Point;
+    image?: string | undefined;
     aspect: number;
     onZoomChange?: ((zoom: number) => void) | undefined;
     onCropChange: (location: import("react-easy-crop").Point) => void;
@@ -11,9 +11,9 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const Default: {
     render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
-        image?: string | undefined;
         zoom: number;
         crop: import("react-easy-crop").Point;
+        image?: string | undefined;
         aspect: number;
         onZoomChange?: ((zoom: number) => void) | undefined;
         onCropChange: (location: import("react-easy-crop").Point) => void;

package/dist/components/DateInput/DateInput.d.ts

@@ -1,5 +1,5 @@
 import { Time } from "@internationalized/date";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export type DateInputProps = {
     value?: Date;
     mode: Mode;

package/dist/components/DateInput/DateInput.stories.d.ts

@@ -24,7 +24,7 @@ export declare const Default: {
         disabled?: boolean | undefined;
         minValue?: "today" | undefined;
         "aria-labelledby": string;
-        sx?: import("../../theme/new").SX | undefined;
+        sx?: import("../../theme").SX | undefined;
         onValueChange: (value?: Date | undefined) => void;
     }) => JSX.Element;
     args: {

package/dist/components/Dialog/Options/DialogOptions.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { SX } from "../../../theme/new";
+import type { SX } from "../../../theme";
 import { type IconName } from "../../Icon";
 export interface DialogOptionsProps {
     value?: string;

package/dist/components/EditableText/EditableText.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeKeys } from "../../theme/new";
+import { type ThemeKeys } from "../../theme";
 import { textVariantMapping } from "../Text";
 export interface EditableTextProps {
     "aria-label": string;

package/dist/components/ErrorBoundary/DefaultErrorMessage.d.ts

@@ -1,4 +1,4 @@
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export interface DefaultErrorMessageProps {
     title: string;
     description?: string;

package/dist/components/Form/Form.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export interface FormProps {
     children?: ReactNode;
     sx?: SX;

package/dist/components/Form/Form.stories.d.ts

@@ -15,7 +15,7 @@ export default meta;
 export declare const Default: {
     render: (args: {
         children?: import("react").ReactNode;
-        sx?: import("../../theme/new").SX | undefined;
+        sx?: import("../../theme").SX | undefined;
         onSubmit: () => void;
     }) => JSX.Element;
     args: {};

package/dist/components/Form/FormDateInput.d.ts

@@ -1,5 +1,5 @@
 import { Time } from "@internationalized/date";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 import type { DateInputProps } from "../DateInput/DateInput";
 export interface FormDateInputProps {
     label: string;

package/dist/components/Form/FormField.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export type FormFieldProps = {
     children?: ReactNode;
     disabled?: boolean;

package/dist/components/Form/FormInput.d.ts

@@ -1,5 +1,5 @@
 import { type ClipboardEventHandler, type KeyboardEvent, type ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 import { type IconName } from "../Icon";
 export interface FormInputProps {
     type?: "text" | "email" | "password" | "number";

package/dist/components/Form/FormSearchInput.d.ts

@@ -1,5 +1,5 @@
 import { type AriaRole, type FocusEvent } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export interface FormSearchInputProps {
     label?: string;
     placeholder?: string;
@@ -13,5 +13,6 @@ export interface FormSearchInputProps {
     onFocus?: (event: FocusEvent<HTMLInputElement, Element>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
     endAdornment?: boolean;
+    autoFocus?: boolean;
 }
 export declare const FormSearchInput: import("react").ForwardRefExoticComponent<FormSearchInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Gradient/Gradient.d.ts

@@ -1,4 +1,4 @@
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export interface GradientProps {
     sx?: SX;
 }

package/dist/components/Group/Group.d.ts

@@ -1,13 +1,11 @@
 import type { ReactNode } from "react";
-import { type AccordionProps } from "../Accordion";
-export type GroupProps<ITEM> = {
+export interface GroupProps<ITEM> {
     items: ITEM[];
     title?: string;
     addItemButtonTitle?: string;
     maxItems?: number;
-    accordionType: AccordionProps["type"];
     getItemKey: (item: ITEM) => string;
     children: (item: ITEM, index: number) => ReactNode;
     onAddItem?: () => void;
-} & Pick<AccordionProps, "expanded" | "onExpandedChange">;
+}
 export declare function Group<ITEM>(props: GroupProps<ITEM>): JSX.Element;

package/dist/components/Group/Group.stories.d.ts

@@ -1,34 +1,6 @@
-import type { StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Group } from "./Group";
 type Story = StoryObj<typeof meta>;
-declare const meta: {
-    title: string;
-    component: typeof Group;
-    argTypes: {
-        children: {};
-        items: {
-            control: {
-                disable: boolean;
-            };
-        };
-        expanded: {
-            control: {
-                disable: boolean;
-            };
-        };
-        accordionType: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-        addItemButtonTitle: {
-            control: {
-                type: string;
-            };
-        };
-        onAddItem: {};
-    };
-};
+declare const meta: Meta<typeof Group>;
 export default meta;
 export declare const Default: Story;

package/dist/components/Group/GroupItem.d.ts

@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 interface Props {
     index?: number;
     title?: string;
-    accordionValue: string;
     onMove?: (params: {
         index: number;
         offset: number;

package/dist/components/HairlineButton/HairlineButton.d.ts

@@ -1,5 +1,5 @@
 import { type MouseEvent } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 import { type IconName } from "../Icon";
 export interface HairlineButtonProps {
     icon: IconName;

package/dist/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type SX, type ThemeKeys } from "../../theme/new";
+import { type SX, type ThemeKeys } from "../../theme";
 import type { IconName } from "./iconNames";
 export interface IconProps {
     className?: string;

package/dist/components/Image/Image.d.ts

@@ -1,4 +1,4 @@
-import { type SX } from "../../theme/new";
+import { type SX } from "../../theme";
 export interface ImageProps {
     "aria-label"?: string;
     src: string;

package/dist/components/LazyRender/LazyRender.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type ThemeKeys } from "../../theme/new";
+import { type ThemeKeys } from "../../theme";
 /**
  * Lazily renders a child the first time it intersects with the viewport.
  * Works with any vertical scrolling ancestor (direct or not).

package/dist/components/List/UnorderedList.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import type { SX } from "../../theme";
 export interface UnorderedListProps {
     children?: ReactNode;
     sx?: SX;

package/dist/components/List/UnorderedList.stories.d.ts

@@ -16,7 +16,7 @@ export declare const Default: {
     name: string;
     render: (args: {
         children?: import("react").ReactNode;
-        sx?: import("../../theme/new").SX | undefined;
+        sx?: import("../../theme").SX | undefined;
     }) => JSX.Element;
     args: {
         children: JSX.Element;