@prismicio/editor-ui 0.3.1 → 0.4.0

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

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
+import { Sprinkles } from "../../theme/sprinkles.css";
 interface Props {
     children: OnlyChild;
-    animationDuration?: "standard" | "tabChangeTransition";
+    animationDuration?: Sprinkles["animationDuration"];
 }
 /**
  * Animates a single element in & out based on whether it's currently rendered.

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

@@ -1,8 +1,8 @@
 export declare const container: string;
 export declare const containerDirection: Record<"horizontal" | "vertical", string>;
 export declare const item: string;
-export declare const entering: Record<"tabChangeTransition" | "standard", string>;
+export declare const entering: string;
 export declare const enteringDelay: string;
 export declare const present: string;
-export declare const exiting: Record<"tabChangeTransition" | "standard", string>;
+export declare const exiting: string;
 export declare const gaps: Record<0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80, string>;

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

@@ -1,4 +1,5 @@
 import { Key, ReactElement, ReactNode } from "react";
+import { Sprinkles } from "../../theme/sprinkles.css";
 import * as styles from "./AnimatedList.css";
 interface AnimatedListProps<ITEM> {
     gap?: keyof typeof styles.gaps;
@@ -6,6 +7,7 @@ interface AnimatedListProps<ITEM> {
     items: readonly ITEM[];
     getItemKey: (item: ITEM) => Key;
     children: (item: ITEM, index: number) => ReactNode;
+    animationDuration?: Sprinkles["animationDuration"];
 }
 export declare function AnimatedList<ITEM>(props: AnimatedListProps<ITEM>): ReactElement;
 export {};

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

@@ -1,7 +1,12 @@
 export declare const root: string;
 export declare const color: {
     grey: string;
+    green: string;
+    amber: string;
+    purple: string;
+    tomato: string;
 };
 export declare const size: {
     large: string;
+    medium: string;
 };

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

@@ -1,12 +1,12 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
-    color?: "grey" | undefined;
-    size?: "large" | undefined;
+    color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
+    size?: "medium" | "large" | undefined;
 }>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
-    color?: "grey" | undefined;
-    size?: "large" | undefined;
+    color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
+    size?: "medium" | "large" | undefined;
 }>>>;

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

@@ -14,6 +14,7 @@ declare type BoxProps = {
     maxHeight?: Sprinkles["maxHeight"] | number | string;
     padding?: Padding;
     border?: Border;
+    borderRadius?: Sprinkles["borderRadius"];
     backgroundColor?: ThemeColor;
     overflowY?: "auto";
 } & DisplayProps;

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

@@ -24,7 +24,8 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
         left?: boolean | undefined;
         right?: boolean | undefined;
     }) | undefined;
-    backgroundColor?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    borderRadius?: 0 | 1 | 2 | "100%" | 4 | 6 | 8 | 10 | 12 | undefined;
+    backgroundColor?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
     overflowY?: "auto" | undefined;
 } & ({
     gap?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
@@ -64,7 +65,8 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
         left?: boolean | undefined;
         right?: boolean | undefined;
     }) | undefined;
-    backgroundColor?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    borderRadius?: 0 | 1 | 2 | "100%" | 4 | 6 | 8 | 10 | 12 | undefined;
+    backgroundColor?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
     overflowY?: "auto" | undefined;
 } & ({
     gap?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;

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

@@ -10,3 +10,6 @@ export declare const iconVariant: {
 export declare const startIcon: string;
 export declare const text: string;
 export declare const endIcon: string;
+export declare const dim: string;
+export declare const hidden: string;
+export declare const progressCircle: string;

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

@@ -4,6 +4,7 @@ export declare const Button: import("react").ForwardRefExoticComponent<Readonly<
     className?: string | undefined;
     disabled?: boolean | undefined;
     endIcon?: ReactNode;
+    loading?: boolean | undefined;
     onClick?: ((event: MouseEvent) => void) | undefined;
     size?: "medium" | "large" | "small" | undefined;
     startIcon?: ReactNode;

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

@@ -4,6 +4,7 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     className?: string | undefined;
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
+    loading?: boolean | undefined;
     onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;
@@ -15,6 +16,7 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
     className?: string | undefined;
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
+    loading?: boolean | undefined;
     onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;

package/dist/components/ColorInput/ColorArea.css.d.ts

@@ -0,0 +1,2 @@
+export declare const colorAreaSize: string;
+export declare const thumb: string;

package/dist/components/ColorInput/ColorArea.d.ts

@@ -0,0 +1,2 @@
+import { ColorAreaProps } from "@react-stately/color";
+export declare const ColorArea: (props: ColorAreaProps) => JSX.Element;

package/dist/components/ColorInput/ColorInput.css.d.ts

@@ -0,0 +1,7 @@
+export declare const container: string;
+export declare const input: string;
+export declare const colorSquare: string;
+export declare const emptyColorSquare: string;
+export declare const areaContainer: string;
+export declare const header: string;
+export declare const footer: string;

package/dist/components/ColorInput/ColorInput.d.ts

@@ -0,0 +1,8 @@
+declare type Props = {
+    value?: string;
+    onValueChange: (value?: string) => void;
+    "aria-labelledby": string;
+    placeholder?: string;
+};
+export declare const ColorInput: ({ value, onValueChange, ...props }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+declare const _default: ComponentMeta<({ value, onValueChange, ...props }: {
+    value?: string | undefined;
+    onValueChange: (value?: string | undefined) => void;
+    "aria-labelledby": string;
+    placeholder?: string | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStoryFn<({ value, onValueChange, ...props }: {
+    value?: string | undefined;
+    onValueChange: (value?: string | undefined) => void;
+    "aria-labelledby": string;
+    placeholder?: string | undefined;
+}) => JSX.Element>;

package/dist/components/ColorInput/ColorSlider.css.d.ts

@@ -0,0 +1,3 @@
+export declare const root: string;
+export declare const track: string;
+export declare const thumb: string;

package/dist/components/ColorInput/ColorSlider.d.ts

@@ -0,0 +1,2 @@
+import { ColorSliderStateOptions } from "@react-stately/color";
+export declare const ColorSlider: (props: Omit<ColorSliderStateOptions, "locale" | "channel">) => JSX.Element;

package/dist/components/ColorInput/index.d.ts

@@ -0,0 +1 @@
+export { ColorInput } from "./ColorInput";

package/dist/components/Dialog/Dialog.css.d.ts

@@ -1,6 +1,5 @@
 export declare const overlay: string;
 export declare const container: string;
 export declare const header: string;
-export declare const headerIcon: string;
 export declare const closeButton: string;
 export declare const content: string;

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

@@ -3,6 +3,7 @@ import { type IconName } from "../Icon";
 export interface DialogProps {
     trigger?: ReactNode;
     children?: ReactNode;
+    fullscreen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     onAnimationEnd?: () => void;
@@ -11,7 +12,7 @@ export interface DialogProps {
  * A Dialog rendered in document.body.
  * The first focusable child will automatically be focused.
  */
-export declare const Dialog: FC<DialogProps>;
+export declare function Dialog(props: DialogProps): JSX.Element;
 interface DialogHeaderProps {
     icon: IconName;
     title: string;

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

@@ -1,5 +1,6 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+import { Dialog } from "./";
 export declare const DialogOptionsStory: ComponentStoryFn<({ value, onValueChange, children }: import("./Options/DialogOptions").DialogOptionsProps) => JSX.Element>;
-declare const _default: ComponentMeta<import("react").FC<import("./Dialog").DialogProps>>;
+declare const _default: ComponentMeta<typeof Dialog>;
 export default _default;
-export declare const Default: ComponentStoryFn<import("react").FC<import("./Dialog").DialogProps>>;
+export declare const Default: ComponentStoryFn<typeof Dialog>;

package/dist/components/Dialog/FullscreenDialog.css.d.ts

@@ -0,0 +1 @@
+export declare const container: string;

package/dist/components/Dialog/FullscreenDialog.d.ts

@@ -0,0 +1,6 @@
+import type { DialogProps } from "./Dialog";
+declare type Props = {
+    onEscapeKeyDown: (evt: KeyboardEvent) => void;
+} & Pick<DialogProps, "open" | "onOpenChange" | "trigger" | "children" | "onAnimationEnd">;
+export declare function FullscreenDialog(props: Props): JSX.Element;
+export {};

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

@@ -1,4 +1,8 @@
 export declare const root: string;
 export declare const item: string;
+export declare const itemInlinePadding: {
+    withIcon: string;
+    withoutIcon: string;
+};
 export declare const itemIcon: string;
 export declare const itemTexts: string;

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

@@ -8,7 +8,7 @@ export interface DialogOptionsProps {
 export declare const DialogOptions: ({ value, onValueChange, children }: DialogOptionsProps) => JSX.Element;
 interface DialogOptionsItemProps {
     value: string;
-    icon: IconName;
+    icon?: IconName;
     title: string;
     subtitle: string;
 }

package/dist/components/DocumentStatusBar/DocumentStatusBar.css.d.ts

@@ -0,0 +1 @@
+export declare const root: Record<"published" | "release" | "archived" | "unclassified", string>;

package/dist/components/DocumentStatusBar/DocumentStatusBar.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    status: "published" | "release" | "archived" | "unclassified";
+};
+export declare const DocumentStatusBar: ({ status }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+declare const _default: ComponentMeta<({ status }: {
+    status: "published" | "release" | "archived" | "unclassified";
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStoryFn<({ status }: {
+    status: "published" | "release" | "archived" | "unclassified";
+}) => JSX.Element>;

package/dist/components/DocumentStatusBar/index.d.ts

@@ -0,0 +1 @@
+export { DocumentStatusBar } from "./DocumentStatusBar";

package/dist/components/DocumentVersions/DocumentVersions.css.d.ts

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const section: string;
+export declare const header: string;
+export declare const icon: string;
+export declare const card: Record<"default" | "selected", string>;

package/dist/components/DocumentVersions/DocumentVersions.d.ts

@@ -0,0 +1,15 @@
+declare type Section = {
+    header: string;
+    title: string;
+    subtitle: string;
+    selected: boolean;
+    onSelect: () => void;
+};
+declare type Props = {
+    local?: Omit<Section, "subtitle">;
+    unclassified?: Section;
+    published?: Section;
+};
+export declare const DocumentVersions: ({ local, unclassified, published }: Props) => JSX.Element;
+declare const Section: ({ children }: React.PropsWithChildren) => JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+declare const _default: ComponentMeta<({ local, unclassified, published }: {
+    local?: Omit<{
+        header: string;
+        title: string;
+        subtitle: string;
+        selected: boolean;
+        onSelect: () => void;
+    }, "subtitle"> | undefined;
+    unclassified?: {
+        header: string;
+        title: string;
+        subtitle: string;
+        selected: boolean;
+        onSelect: () => void;
+    } | undefined;
+    published?: {
+        header: string;
+        title: string;
+        subtitle: string;
+        selected: boolean;
+        onSelect: () => void;
+    } | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStoryFn<({ local, unclassified, published }: {
+    local?: Omit<{
+        header: string;
+        title: string;
+        subtitle: string;
+        selected: boolean;
+        onSelect: () => void;
+    }, "subtitle"> | undefined;
+    unclassified?: {
+        header: string;
+        title: string;
+        subtitle: string;
+        selected: boolean;
+        onSelect: () => void;
+    } | undefined;
+    published?: {
+        header: string;
+        title: string;
+        subtitle: string;
+        selected: boolean;
+        onSelect: () => void;
+    } | undefined;
+}) => JSX.Element>;

package/dist/components/DocumentVersions/index.d.ts

@@ -0,0 +1 @@
+export { DocumentVersions } from "./DocumentVersions";

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

@@ -1,7 +1,7 @@
 import type { IconName } from "./iconNames";
 export declare const Icon: import("react").ForwardRefExoticComponent<Readonly<{
     className?: string | undefined;
-    color?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
     name: IconName;
     size?: "medium" | "large" | "small" | "xs" | undefined;
 }> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,14 +1,14 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Readonly<{
     className?: string | undefined;
-    color?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
-    name: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
+    color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    name: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
     size?: "medium" | "large" | "small" | "xs" | undefined;
 }> & import("react").RefAttributes<SVGSVGElement>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<Readonly<{
     className?: string | undefined;
-    color?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
-    name: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
+    color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    name: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
     size?: "medium" | "large" | "small" | "xs" | undefined;
 }> & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -1,2 +1,2 @@
-export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "close", "cloud", "cloudUpload", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "dateRange", "delete", "desktopWindows", "dragIndicator", "event", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "imageSearch", "keyboardArrowDown", "keyboardArrowUp", "link", "linkOff", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "notes", "phoneIphone", "photo", "pin", "public", "schedule", "search", "tabletMac", "textFields", "toggleOff", "unfoldMore", "viewDay", "zoomOutMap"];
+export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "close", "cloud", "cloudUpload", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "edit", "event", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "imageSearch", "keyboardArrowDown", "keyboardArrowUp", "link", "linkOff", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "notes", "phoneIphone", "photo", "pin", "public", "schedule", "search", "tabletMac", "textFields", "toggleOff", "unfoldMore", "viewDay", "zoomOutMap"];
 export declare type IconName = typeof iconNames[number];

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

@@ -6,6 +6,7 @@ export declare type ImageProps = Readonly<{
     decoding?: "async" | "auto" | "sync";
     sizing?: "contain" | "cover" | "none";
     borderRadius?: 0 | 4;
+    boxShadow?: "3";
     animateOnLoad?: boolean;
     onLoad?: () => void;
 }>;

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

@@ -6,6 +6,7 @@ declare const _default: ComponentMeta<import("react").FC<Readonly<{
     decoding?: "auto" | "async" | "sync" | undefined;
     sizing?: "contain" | "none" | "cover" | undefined;
     borderRadius?: 0 | 4 | undefined;
+    boxShadow?: "3" | undefined;
     animateOnLoad?: boolean | undefined;
     onLoad?: (() => void) | undefined;
 }>>>;
@@ -17,6 +18,7 @@ export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
     decoding?: "auto" | "async" | "sync" | undefined;
     sizing?: "contain" | "none" | "cover" | undefined;
     borderRadius?: 0 | 4 | undefined;
+    boxShadow?: "3" | undefined;
     animateOnLoad?: boolean | undefined;
     onLoad?: (() => void) | undefined;
 }>>>;

package/dist/components/ProgressCircle/ProgressCircle.css.d.ts

@@ -0,0 +1,2 @@
+export declare const root: string;
+export declare const circle: string;

package/dist/components/ProgressCircle/ProgressCircle.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ProgressCircle.
+ *
+ * The ProgressCircle component displays the progress status for tasks
+ * that take a long time.
+ *
+ * Follow MUI animation.
+ * See: https://github.com/mui/material-ui/tree/b4c2e4ecb8dfec0432f9f55778cd90e10c5be5d7/packages/mui-material/src/CircularProgress
+ */
+export declare function ProgressCircle(): JSX.Element;

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

@@ -0,0 +1,5 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+import { ProgressCircle } from "./ProgressCircle";
+declare const _default: ComponentMeta<typeof ProgressCircle>;
+export default _default;
+export declare const Default: ComponentStoryFn<typeof ProgressCircle>;

package/dist/components/ProgressCircle/index.d.ts

@@ -0,0 +1 @@
+export { ProgressCircle } from "./ProgressCircle";

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

@@ -1,4 +1,4 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
-declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-separator").SeparatorProps, "className" | "decorative" | "orientation">>>>;
+declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-separator").SeparatorProps, "className" | "orientation" | "decorative">>>>;
 export default _default;
-export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-separator").SeparatorProps, "className" | "decorative" | "orientation">>>>;
+export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-separator").SeparatorProps, "className" | "orientation" | "decorative">>>>;

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

@@ -0,0 +1,9 @@
+import type { ComponentStoryFn } from "@storybook/react";
+import { SliceCard } from "./SliceCard";
+import { SliceVariationCard } from "./SliceVariationCard";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const SliceCardStory: ComponentStoryFn<typeof SliceCard>;
+export declare const SliceVariationCardStory: ComponentStoryFn<typeof SliceVariationCard>;

package/dist/components/{SliceCard → Slice}/SliceCard.css.d.ts

@@ -7,3 +7,4 @@ export declare const state: {
 export declare const outerContent: string;
 export declare const main: string;
 export declare const footer: string;
+export declare const texts: string;

package/dist/components/Slice/SliceVariationCard.css.d.ts

@@ -0,0 +1,5 @@
+export declare const card: string;
+export declare const innerContent: string;
+export declare const text: string;
+export declare const children: string;
+export declare const plusIcon: string;

package/dist/components/Slice/SliceVariationCard.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+interface Props {
+    slice: string;
+    variation: string;
+    children: ReactNode;
+    onClick: () => void;
+}
+export declare function SliceVariationCard(props: Props): JSX.Element;
+export {};

package/dist/components/Slice/index.d.ts

@@ -0,0 +1,2 @@
+export { SliceCard } from "./SliceCard";
+export { SliceVariationCard } from "./SliceVariationCard";

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

@@ -1,4 +1,4 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
-declare const _default: ComponentMeta<({ value, ...props }: Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "onValueChange" | "min" | "max" | "step">>) => JSX.Element>;
+declare const _default: ComponentMeta<({ value, ...props }: Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "step" | "onValueChange" | "min" | "max">>) => JSX.Element>;
 export default _default;
-export declare const Default: ComponentStoryFn<({ value, ...props }: Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "onValueChange" | "min" | "max" | "step">>) => JSX.Element>;
+export declare const Default: ComponentStoryFn<({ value, ...props }: Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "step" | "onValueChange" | "min" | "max">>) => JSX.Element>;

package/dist/components/Text/Text.css.d.ts

@@ -1,5 +1,5 @@
 export declare const root: string;
-export declare const variant: Record<"inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h4" | "smallBold" | "extraSmall" | "emphasized", string>;
+export declare const variant: Record<"inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h3" | "h4" | "smallBold" | "extraSmall" | "emphasized", string>;
 export declare const align: {
     start: string;
     center: string;

package/dist/components/Text/Text.d.ts

@@ -17,10 +17,10 @@ export declare const Text: import("react").ForwardRefExoticComponent<Readonly<{
     align?: "inherit" | "center" | "end" | "start" | undefined;
     children?: ReactNode;
     className?: string | undefined;
-    color?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
     component?: Component | undefined;
     inField?: boolean | undefined;
     noWrap?: boolean | undefined;
-    variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
+    variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h3" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
 }> & import("react").RefAttributes<HTMLElement>>;
 export {};

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

@@ -3,20 +3,20 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     align?: "inherit" | "center" | "end" | "start" | undefined;
     children?: import("react").ReactNode;
     className?: string | undefined;
-    color?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
     component?: ("pre" | "code" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
     inField?: boolean | undefined;
     noWrap?: boolean | undefined;
-    variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
+    variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h3" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
 }> & import("react").RefAttributes<HTMLElement>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<Readonly<{
     align?: "inherit" | "center" | "end" | "start" | undefined;
     children?: import("react").ReactNode;
     className?: string | undefined;
-    color?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
     component?: ("pre" | "code" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
     inField?: boolean | undefined;
     noWrap?: boolean | undefined;
-    variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
+    variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h3" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
 }> & import("react").RefAttributes<HTMLElement>>>;