@prismicio/editor-ui 0.4.18 → 0.4.20

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.
Files changed (119) hide show
  1. package/dist/components/ActionList/ActionList.d.ts +1 -1
  2. package/dist/components/Alert/Alert.d.ts +3 -6
  3. package/dist/components/Alert/Alert.stories.d.ts +2 -2
  4. package/dist/components/Alert/AlertContext.d.ts +17 -3
  5. package/dist/components/Alert/index.d.ts +1 -1
  6. package/dist/components/AnimatedElement/AnimatedElement.d.ts +1 -1
  7. package/dist/components/AnimatedList/AnimatedList.d.ts +10 -1
  8. package/dist/components/Badge/Badge.d.ts +2 -2
  9. package/dist/components/Badge/Badge.stories.d.ts +2 -2
  10. package/dist/components/BaseInput/BaseInput.d.ts +16 -9
  11. package/dist/components/BlankSlate/BlankSlate.d.ts +29 -14
  12. package/dist/components/Box/Box.d.ts +2 -1
  13. package/dist/components/Button/Button.d.ts +2 -1
  14. package/dist/components/Button/Button.stories.d.ts +6 -5
  15. package/dist/components/ButtonGroup/ButtonGroup.d.ts +1 -1
  16. package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +2 -2
  17. package/dist/components/Card/Card.d.ts +1 -1
  18. package/dist/components/ColorInput/ColorInput.d.ts +5 -6
  19. package/dist/components/ColorInput/ColorInput.stories.d.ts +2 -12
  20. package/dist/components/Cropper/Cropper.stories.d.ts +6 -6
  21. package/dist/components/DateInput/DateInput.d.ts +2 -2
  22. package/dist/components/Dialog/Dialog.d.ts +4 -0
  23. package/dist/components/Dialog/Options/DialogOptions.d.ts +1 -1
  24. package/dist/components/DocumentCard/DocumentCard.d.ts +6 -21
  25. package/dist/components/DocumentCard/DocumentCard.stories.d.ts +29 -5
  26. package/dist/components/Dot/Dot.d.ts +6 -0
  27. package/dist/components/Dot/Dot.stories.d.ts +20 -0
  28. package/dist/components/Dot/index.d.ts +1 -0
  29. package/dist/components/DropdownMenu/DropdownMenu.d.ts +2 -2
  30. package/dist/components/EditableText/EditableText.d.ts +1 -0
  31. package/dist/components/ErrorBoundary/DefaultErrorMessage.d.ts +2 -0
  32. package/dist/components/Field/Field.d.ts +6 -7
  33. package/dist/components/Field/Field.stories.d.ts +1 -1
  34. package/dist/components/FileUpload/FileDropZone/FileDropZone.d.ts +1 -0
  35. package/dist/components/FileUpload/FileUpload.stories.d.ts +2 -2
  36. package/dist/components/FileUpload/index.d.ts +0 -1
  37. package/dist/components/FileUploadButton/FileUploadButton.d.ts +19 -0
  38. package/dist/components/FileUploadButton/index.d.ts +1 -0
  39. package/dist/components/Form/Form.d.ts +1 -1
  40. package/dist/components/Form/FormDateInput.d.ts +2 -1
  41. package/dist/components/Form/FormField.d.ts +1 -1
  42. package/dist/components/Form/FormInput.d.ts +4 -1
  43. package/dist/components/Form/FormSearchInput.d.ts +11 -0
  44. package/dist/components/Form/index.d.ts +2 -0
  45. package/dist/components/Gradient/Gradient.d.ts +1 -1
  46. package/dist/components/Group/Group.d.ts +3 -2
  47. package/dist/components/Group/Group.stories.d.ts +6 -10
  48. package/dist/components/HairlineButton/HairlineButton.d.ts +1 -1
  49. package/dist/components/Icon/Icon.d.ts +1 -2
  50. package/dist/components/Icon/iconNames.d.ts +1 -1
  51. package/dist/components/IconButton/IconButton.d.ts +1 -0
  52. package/dist/components/Image/Image.d.ts +3 -2
  53. package/dist/components/Line/Line.d.ts +6 -0
  54. package/dist/components/Line/Line.stories.d.ts +20 -0
  55. package/dist/components/Line/index.d.ts +1 -0
  56. package/dist/components/List/UnorderedList.d.ts +1 -1
  57. package/dist/components/List/UnorderedList.stories.d.ts +1 -1
  58. package/dist/components/MediaCard/MediaCard.d.ts +1 -1
  59. package/dist/components/MediaCard/MediaCard.stories.d.ts +1 -1
  60. package/dist/components/NumberInput/NumberInput.d.ts +4 -2
  61. package/dist/components/Portal/Portal.d.ts +9 -0
  62. package/dist/components/Portal/index.d.ts +1 -0
  63. package/dist/components/Radio/RadioGroup.d.ts +1 -1
  64. package/dist/components/ScrollArea/ScrollArea.d.ts +2 -2
  65. package/dist/components/ScrollArea/ScrollArea.stories.d.ts +3 -3
  66. package/dist/components/SearchInput/SearchInput.d.ts +1 -1
  67. package/dist/components/Select/Select.css.d.ts +2 -1
  68. package/dist/components/Select/Select.d.ts +1 -1
  69. package/dist/components/Separator/Separator.d.ts +1 -1
  70. package/dist/components/Separator/Separator.stories.d.ts +1 -1
  71. package/dist/components/Skeleton/Skeleton.d.ts +12 -13
  72. package/dist/components/Slider/Slider.stories.d.ts +2 -2
  73. package/dist/components/Switch/Switch.d.ts +3 -1
  74. package/dist/components/Tab/Tab.d.ts +4 -0
  75. package/dist/components/Text/Text.css.d.ts +1 -1
  76. package/dist/components/Text/Text.d.ts +1 -1
  77. package/dist/components/TextArea/TextArea.d.ts +4 -1
  78. package/dist/components/TextInput/TextInput.d.ts +6 -6
  79. package/dist/components/TextInput/index.d.ts +1 -1
  80. package/dist/components/Toast/Toast.d.ts +4 -0
  81. package/dist/components/Toast/Toast.stories.d.ts +2 -2
  82. package/dist/components/ToggleButton/ToggleButton.stories.d.ts +2 -2
  83. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +2 -2
  84. package/dist/components/Toolbar/Toolbar.d.ts +1 -1
  85. package/dist/components/Tooltip/Tooltip.d.ts +1 -1
  86. package/dist/components/Video/Video.d.ts +1 -1
  87. package/dist/components/Video/Video.stories.d.ts +1 -1
  88. package/dist/index.cjs.js +384 -0
  89. package/dist/index.d.ts +9 -6
  90. package/dist/index.es.js +10051 -9711
  91. package/dist/style.css +1 -1
  92. package/dist/theme/mode.css.d.ts +1 -1
  93. package/dist/theme/new/index.d.ts +3 -0
  94. package/dist/theme/new/sx.d.ts +13 -13
  95. package/dist/theme/new/theme.d.ts +9 -11
  96. package/dist/theme/new/utils.d.ts +1 -1
  97. package/dist/theme/selectors.d.ts +20 -20
  98. package/dist/theme/sprinkles.css.d.ts +558 -558
  99. package/package.json +6 -3
  100. package/dist/components/Alert/Alert.css.d.ts +0 -6
  101. package/dist/components/AnimatedList/AnimatedList.css.d.ts +0 -13
  102. package/dist/components/BaseInput/BaseInput.css.d.ts +0 -15
  103. package/dist/components/BlankSlate/BlankSlate.css.d.ts +0 -10
  104. package/dist/components/DocumentStatusBar/DocumentStatusBar.css.d.ts +0 -1
  105. package/dist/components/DocumentStatusBar/DocumentStatusBar.d.ts +0 -5
  106. package/dist/components/DocumentStatusBar/DocumentStatusBar.stories.d.ts +0 -10
  107. package/dist/components/DocumentStatusBar/index.d.ts +0 -1
  108. package/dist/components/DocumentStatusDot/DocumentStatusDot.css.d.ts +0 -1
  109. package/dist/components/DocumentStatusDot/DocumentStatusDot.d.ts +0 -5
  110. package/dist/components/DocumentStatusDot/DocumentStatusDot.stories.d.ts +0 -10
  111. package/dist/components/DocumentStatusDot/index.d.ts +0 -1
  112. package/dist/components/EditableText/EditableText.css.d.ts +0 -2
  113. package/dist/components/Field/Field.css.d.ts +0 -9
  114. package/dist/components/FileUpload/FileDropZone/FileDropZone.css.d.ts +0 -4
  115. package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.css.d.ts +0 -3
  116. package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.d.ts +0 -10
  117. package/dist/components/Tab/Tab.css.d.ts +0 -5
  118. package/dist/components/TextArea/TextArea.css.d.ts +0 -4
  119. package/dist/components/Tooltip/Tooltip.css.d.ts +0 -6
@@ -1,6 +1,6 @@
1
1
  import { type MouseEvent, type PropsWithChildren, type ReactNode } from "react";
2
2
  import { type IconName } from "../Icon";
3
- export type ActionListVariants = "Borderless" | "Bordered";
3
+ export type ActionListVariants = "borderless" | "bordered";
4
4
  export interface ActionListProps extends PropsWithChildren {
5
5
  variant?: ActionListVariants;
6
6
  }
@@ -1,12 +1,9 @@
1
+ import type { ReactNode } from "react";
1
2
  type Props = {
2
3
  title: string;
3
- subtitle?: string;
4
- footerButtons?: React.ReactNode;
4
+ subtitle?: ReactNode;
5
+ footerButtons?: ReactNode;
5
6
  onClose?: () => void;
6
7
  };
7
8
  export declare function Alert({ title, subtitle, footerButtons, onClose }: Props): JSX.Element;
8
- export declare const AlertButton: ({ title, onClick }: {
9
- title: string;
10
- onClick: () => void;
11
- }) => JSX.Element;
12
9
  export {};
@@ -1,6 +1,6 @@
1
1
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
2
2
  title: string;
3
- subtitle?: string | undefined;
3
+ subtitle?: import("react").ReactNode;
4
4
  footerButtons?: import("react").ReactNode;
5
5
  onClose?: (() => void) | undefined;
6
6
  }>;
@@ -8,7 +8,7 @@ export default _default;
8
8
  export declare const Default: {
9
9
  render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
10
10
  title: string;
11
- subtitle?: string | undefined;
11
+ subtitle?: import("react").ReactNode;
12
12
  footerButtons?: import("react").ReactNode;
13
13
  onClose?: (() => void) | undefined;
14
14
  }>;
@@ -1,13 +1,27 @@
1
- import { type PropsWithChildren } from "react";
1
+ import { type ReactNode, type RefObject } from "react";
2
+ import type { IconName } from "../Icon";
2
3
  export interface AlertConfig {
4
+ id?: string;
3
5
  title: string;
4
- subtitle: string;
6
+ subtitle: ReactNode;
7
+ buttons?: {
8
+ text: string;
9
+ onClick: () => void;
10
+ icon?: IconName;
11
+ }[];
5
12
  onRetry?: () => void;
6
13
  }
7
14
  interface AlertContext {
8
15
  showAlert: (config: AlertConfig) => void;
16
+ /** Useful to ignore click events when interacting with the alerts.
17
+ *
18
+ * E.g. if you don't want to close a dialog when dismissing an alert. */
19
+ containerRef: RefObject<HTMLDivElement> | null;
9
20
  }
10
21
  declare const AlertContext: import("react").Context<AlertContext>;
11
- export declare function AlertProvider(props: PropsWithChildren): JSX.Element;
22
+ interface AlertProviderProps {
23
+ children: ReactNode;
24
+ }
25
+ export declare function AlertProvider(props: AlertProviderProps): JSX.Element;
12
26
  export declare function useAlert(): AlertContext;
13
27
  export {};
@@ -1,2 +1,2 @@
1
- export { Alert, AlertButton } from "./Alert";
1
+ export { Alert } from "./Alert";
2
2
  export { type AlertConfig, AlertProvider, useAlert } from "./AlertContext";
@@ -1,5 +1,5 @@
1
1
  import { type ReactElement } from "react";
2
- import type { SX } from "../../theme/new/sx";
2
+ import type { SX } from "../../theme/new";
3
3
  import { type Sprinkles } from "../../theme/sprinkles.css";
4
4
  export interface AnimatedElementProps {
5
5
  children: OnlyChild;
@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
2
2
  import { type Sprinkles } from "../../theme/sprinkles.css";
3
3
  import type { tokens } from "../../theme/vars.css";
4
4
  import { type RenderDragPreview, type RenderDropIndicator } from "./dnd";
5
+ import { type State } from "./layout";
5
6
  export interface AnimatedListProps<ITEM> {
6
7
  ariaLabel: string;
7
8
  gap?: keyof typeof tokens.space;
@@ -13,7 +14,15 @@ export interface AnimatedListProps<ITEM> {
13
14
  renderDragPreview?: RenderDragPreview;
14
15
  renderDropIndicator?: RenderDropIndicator;
15
16
  onReorder?: (items: ITEM[]) => void;
17
+ stacked?: {
18
+ /** Offset between stacked items */
19
+ offset: number;
20
+ /** Scaling factor between items */
21
+ scaleFactor: number;
22
+ /** Maximum number of items to stack, others will be hidden */
23
+ maxDepth: number;
24
+ };
16
25
  }
17
26
  export declare function AnimatedList<ITEM>(props: AnimatedListProps<ITEM>): JSX.Element;
18
- type ChildrenFunction<ITEM> = (item: ITEM, index: number) => ReactNode;
27
+ type ChildrenFunction<ITEM> = (item: ITEM, index: number, state: State<ITEM>["state"]) => ReactNode;
19
28
  export {};
@@ -1,11 +1,11 @@
1
1
  import { type ReactNode } from "react";
2
2
  export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
3
3
  title: ReactNode;
4
- color?: "grey" | "tomato" | "green" | "purple" | "amber" | undefined;
4
+ color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
5
5
  size?: "medium" | "large" | undefined;
6
6
  maxWidth?: 150 | 250 | undefined;
7
7
  onClose?: (() => void) | undefined;
8
- icon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
8
+ icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "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" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
9
9
  onClick?: (() => void) | undefined;
10
10
  selected?: boolean | undefined;
11
11
  onMouseEnter?: (() => void) | undefined;
@@ -1,10 +1,10 @@
1
1
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<{
2
2
  title: import("react").ReactNode;
3
- color?: "grey" | "tomato" | "green" | "purple" | "amber" | undefined;
3
+ color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
4
4
  size?: "medium" | "large" | undefined;
5
5
  maxWidth?: 150 | 250 | undefined;
6
6
  onClose?: (() => void) | undefined;
7
- icon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
7
+ icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "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" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
8
8
  onClick?: (() => void) | undefined;
9
9
  selected?: boolean | undefined;
10
10
  onMouseEnter?: (() => void) | undefined;
@@ -1,9 +1,7 @@
1
1
  import { type KeyboardEvent, type ReactNode } from "react";
2
- import type { SX } from "../../theme/new/sx";
3
- import * as styles from "./BaseInput.css";
2
+ import type { SX, ThemeKeys } from "../../theme/new";
4
3
  export interface BaseInputProps {
5
4
  autoComplete?: string;
6
- className?: string;
7
5
  id?: string;
8
6
  inputMode?: "decimal" | "text";
9
7
  name?: string;
@@ -11,15 +9,24 @@ export interface BaseInputProps {
11
9
  readOnly?: boolean;
12
10
  startAdornment?: ReactNode;
13
11
  endAdornment?: ReactNode;
12
+ padding?: Padding;
14
13
  value: string;
15
- variant?: keyof typeof styles.inputColorVariant;
14
+ variant?: "normal" | "link" | "success";
15
+ cursor?: "text" | "pointer";
16
+ maxLength?: number;
17
+ sx?: SX;
16
18
  onFocus?: () => void;
17
19
  onBlur?: () => void;
18
- onChange?: (value: string) => void;
19
- cursor?: keyof typeof styles.cursor;
20
+ onValueChange?: (value: string) => void;
20
21
  onKeyDown?: (event: KeyboardEvent) => void;
21
- border?: "none";
22
- maxLength?: number;
23
- sx?: SX;
22
+ }
23
+ interface Padding {
24
+ input?: {
25
+ inline: ThemeKeys<"space">;
26
+ };
27
+ adornment?: {
28
+ inline: ThemeKeys<"space">;
29
+ };
24
30
  }
25
31
  export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
32
+ export {};
@@ -1,25 +1,40 @@
1
- import type { CSSProperties, FC, PropsWithChildren } from "react";
2
- import { type ThemeKeys } from "../../theme/new/theme";
1
+ import type { CSSProperties, ReactNode } from "react";
2
+ import { type ThemeKeys } from "../../theme/new";
3
3
  import { type IconName } from "../Icon";
4
- import * as styles from "./BlankSlate.css";
5
- export interface BlankSlateProps extends PropsWithChildren {
4
+ export interface BlankSlateProps {
6
5
  style?: CSSProperties;
6
+ children?: ReactNode;
7
7
  }
8
- export declare const BlankSlate: FC<BlankSlateProps>;
9
- type BlankSlateIconProps = Readonly<{
8
+ export declare function BlankSlate(props: BlankSlateProps): JSX.Element;
9
+ interface BlankSlateIconProps {
10
10
  name: IconName;
11
11
  lineColor?: ThemeKeys<"color">;
12
12
  backgroundColor?: ThemeKeys<"color">;
13
- }>;
14
- export declare const BlankSlateIcon: FC<BlankSlateIconProps>;
15
- export interface BlankSlateTitleProps extends PropsWithChildren {
16
- size?: keyof typeof styles.titleSizeVariant;
13
+ borderColor?: ThemeKeys<"color">;
14
+ borderStyle?: CSSProperties["borderStyle"];
15
+ size?: "medium" | "large";
17
16
  }
18
- export declare const BlankSlateTitle: FC<BlankSlateTitleProps>;
19
- export declare const BlankSlateDescription: FC<PropsWithChildren>;
20
- interface BlankSlateImageProps extends PropsWithChildren {
17
+ export declare function BlankSlateIcon(props: BlankSlateIconProps): JSX.Element;
18
+ declare const titleSizeVariant: {
19
+ readonly regular: "normal";
20
+ readonly big: "h2";
21
+ };
22
+ export interface BlankSlateTitleProps {
23
+ size?: keyof typeof titleSizeVariant;
24
+ children?: ReactNode;
25
+ }
26
+ export declare function BlankSlateTitle(props: BlankSlateTitleProps): JSX.Element;
27
+ interface BlankSlateDescriptionProps {
28
+ width?: number;
29
+ children?: ReactNode;
30
+ }
31
+ export declare function BlankSlateDescription(props: BlankSlateDescriptionProps): JSX.Element;
32
+ interface BlankSlateImageProps {
21
33
  fixedHeight?: boolean;
34
+ children?: ReactNode;
22
35
  }
23
36
  export declare function BlankSlateImage(props: BlankSlateImageProps): JSX.Element;
24
- export declare const BlankSlateActions: FC<PropsWithChildren>;
37
+ export declare function BlankSlateActions(props: {
38
+ children: ReactNode;
39
+ }): JSX.Element;
25
40
  export {};
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from "react";
1
+ import { type CSSProperties, type ReactNode } from "react";
2
2
  import { type ThemeColor } from "../../theme/colors";
3
3
  import { type Sprinkles } from "../../theme/sprinkles.css";
4
4
  export type BoxProps = {
@@ -32,6 +32,7 @@ export type BoxProps = {
32
32
  overflow?: Sprinkles["overflow"];
33
33
  gridColumn?: string;
34
34
  gridRow?: string;
35
+ transform?: CSSProperties["transform"];
35
36
  } & DisplayProps;
36
37
  type DisplayProps = {
37
38
  gap?: Sprinkles["gap"];
@@ -1,5 +1,5 @@
1
1
  import { type MouseEvent, type ReactNode } from "react";
2
- import type { SX } from "../../theme/new/sx";
2
+ import type { SX } from "../../theme/new";
3
3
  import { type IconName } from "../Icon";
4
4
  export interface ButtonProps {
5
5
  children?: ReactNode;
@@ -7,6 +7,7 @@ export interface ButtonProps {
7
7
  size?: "small" | "medium" | "large";
8
8
  disabled?: boolean;
9
9
  loading?: boolean;
10
+ textColor?: "placeholder";
10
11
  /**
11
12
  * Whether to make the text (children) content of the Button take all the available space.
12
13
  * This can be useful when the Button's width is set from the outside instead of being "auto".
@@ -7,7 +7,7 @@ declare const meta: {
7
7
  control: {
8
8
  type: string;
9
9
  };
10
- options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
10
+ options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
11
11
  };
12
12
  };
13
13
  };
@@ -15,15 +15,16 @@ export default meta;
15
15
  export declare const Default: {
16
16
  render: (args: {
17
17
  children?: import("react").ReactNode;
18
- color?: "grey" | "tomato" | "dark" | "green" | "purple" | "amber" | undefined;
18
+ color?: "dark" | "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
19
19
  size?: "small" | "medium" | "large" | undefined;
20
20
  disabled?: boolean | undefined;
21
21
  loading?: boolean | undefined;
22
+ textColor?: "placeholder" | undefined;
22
23
  flexContent?: boolean | undefined;
23
24
  textWeight?: "bold" | "normal" | undefined;
24
- sx?: import("../../theme/new/sx").SX | undefined;
25
- startIcon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
26
- endIcon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
25
+ sx?: import("../../theme/new").SX | undefined;
26
+ startIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "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" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
27
+ endIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "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" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
27
28
  renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
28
29
  renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
29
30
  onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -1,5 +1,5 @@
1
1
  import { type ReactNode } from "react";
2
- import type { SX } from "../../theme/new/sx";
2
+ import type { SX } from "../../theme/new";
3
3
  export interface ButtonGroupProps {
4
4
  children?: ReactNode;
5
5
  disabled?: boolean;
@@ -33,9 +33,9 @@ export declare const Default: {
33
33
  children?: import("react").ReactNode;
34
34
  disabled?: boolean | undefined;
35
35
  size?: "small" | "medium" | "large" | undefined;
36
- color?: "grey" | "dark" | "purple" | undefined;
36
+ color?: "dark" | "grey" | "purple" | undefined;
37
37
  density?: "compact" | "regular" | undefined;
38
- sx?: import("../../theme/new/sx").SX | undefined;
38
+ sx?: import("../../theme/new").SX | undefined;
39
39
  ref?: import("react").Ref<HTMLDivElement> | undefined;
40
40
  key?: import("react").Key | null | undefined;
41
41
  }) => JSX.Element;
@@ -1,5 +1,5 @@
1
1
  import type { PropsWithChildren, ReactNode } from "react";
2
- import type { SX } from "../../theme/new/sx";
2
+ import type { SX } from "../../theme/new";
3
3
  import { type TextProps } from "../Text";
4
4
  export interface CardProps {
5
5
  children?: ReactNode;
@@ -1,8 +1,7 @@
1
- type Props = {
1
+ export interface ColorInputProps {
2
2
  value?: string;
3
- onValueChange: (value?: string) => void;
4
- "aria-labelledby": string;
5
3
  placeholder?: string;
6
- };
7
- export declare const ColorInput: ({ value, onValueChange, ...props }: Props) => JSX.Element;
8
- export {};
4
+ "aria-labelledby": string;
5
+ onValueChange: (value?: string) => void;
6
+ }
7
+ export declare function ColorInput(props: ColorInputProps): JSX.Element;
@@ -1,17 +1,7 @@
1
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
2
- value?: string | undefined;
3
- onValueChange: (value?: string | undefined) => void;
4
- "aria-labelledby": string;
5
- placeholder?: string | undefined;
6
- }>;
1
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ColorInput").ColorInputProps>;
7
2
  export default _default;
8
3
  export declare const Default: {
9
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
10
- value?: string | undefined;
11
- onValueChange: (value?: string | undefined) => void;
12
- "aria-labelledby": string;
13
- placeholder?: string | undefined;
14
- }>;
4
+ render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ColorInput").ColorInputProps>;
15
5
  args: {
16
6
  value: string;
17
7
  };
@@ -1,23 +1,23 @@
1
1
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
2
+ zoom: number;
2
3
  crop: import("react-easy-crop").Point;
3
4
  image?: string | undefined;
4
- zoom: number;
5
- onCropChange: (location: import("react-easy-crop").Point) => void;
5
+ aspect: number;
6
6
  onZoomChange?: ((zoom: number) => void) | undefined;
7
+ onCropChange: (location: import("react-easy-crop").Point) => void;
7
8
  onCropAreaChange?: ((croppedArea: import("react-easy-crop").Area, croppedAreaPixels: import("react-easy-crop").Area) => void) | undefined;
8
- aspect: number;
9
9
  initialCroppedAreaPixels?: import("react-easy-crop").Area | undefined;
10
10
  }>;
11
11
  export default _default;
12
12
  export declare const Default: {
13
13
  render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
14
+ zoom: number;
14
15
  crop: import("react-easy-crop").Point;
15
16
  image?: string | undefined;
16
- zoom: number;
17
- onCropChange: (location: import("react-easy-crop").Point) => void;
17
+ aspect: number;
18
18
  onZoomChange?: ((zoom: number) => void) | undefined;
19
+ onCropChange: (location: import("react-easy-crop").Point) => void;
19
20
  onCropAreaChange?: ((croppedArea: import("react-easy-crop").Area, croppedAreaPixels: import("react-easy-crop").Area) => void) | undefined;
20
- aspect: number;
21
21
  initialCroppedAreaPixels?: import("react-easy-crop").Area | undefined;
22
22
  }>;
23
23
  args: {
@@ -1,10 +1,10 @@
1
1
  import { Time } from "@internationalized/date";
2
- import type { SX } from "../../theme/new/sx";
2
+ import type { SX } from "../../theme/new";
3
3
  export type DateInputProps = {
4
4
  value?: Date;
5
5
  mode: Mode;
6
6
  defaultTime?: Time;
7
- readOnly?: boolean;
7
+ disabled?: boolean;
8
8
  /**
9
9
  * The minimum allowed date that a user may select.
10
10
  */
@@ -1,3 +1,4 @@
1
+ import { type DialogContentProps } from "@radix-ui/react-dialog";
1
2
  import type { FC, PropsWithChildren, ReactNode } from "react";
2
3
  import { type IconName } from "../Icon";
3
4
  export interface Custom {
@@ -8,12 +9,14 @@ export interface DialogProps {
8
9
  modal?: boolean;
9
10
  trigger?: ReactNode;
10
11
  children?: ReactNode;
12
+ renderTooltip?: (trigger: ReactNode) => ReactNode;
11
13
  open?: boolean;
12
14
  onOpenChange?: (open: boolean) => void;
13
15
  onAnimationEnd?: () => void;
14
16
  hasClose?: boolean;
15
17
  size?: "small" | "large" | "fullscreen" | Custom;
16
18
  position?: "center" | "bottomRight";
19
+ onPointerDownOutside?: DialogContentProps["onPointerDownOutside"];
17
20
  }
18
21
  /**
19
22
  * A Dialog rendered in document.body.
@@ -33,6 +36,7 @@ type ActionsProps = {
33
36
  onClick: () => void;
34
37
  loading?: boolean;
35
38
  disabled?: boolean;
39
+ disabledTooltip?: string;
36
40
  };
37
41
  cancel?: {
38
42
  text: string;
@@ -1,5 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
- import type { SX } from "../../../theme/new/sx";
2
+ import type { SX } from "../../../theme/new";
3
3
  import { type IconName } from "../../Icon";
4
4
  export interface DialogOptionsProps {
5
5
  value?: string;
@@ -1,29 +1,14 @@
1
1
  import type { FilterOption } from "../FilterField";
2
- export interface DocumentCardProps extends DocumentTypeBadgeProps, TitleProps, DescriptionProps, PreviewImageProps, FooterProps {
3
- onSelect: () => void;
4
- documentURL: string;
5
- }
6
- export declare function DocumentCard(props: DocumentCardProps): JSX.Element;
7
- interface DocumentTypeBadgeProps {
2
+ export interface DocumentCardProps {
8
3
  documentType: string;
9
- loading?: boolean;
10
- }
11
- interface TitleProps {
4
+ documentURL: string;
12
5
  title: string;
13
- loading?: boolean;
14
- status?: "published" | "release" | "archived" | "unclassified";
15
- }
16
- interface DescriptionProps {
17
- description?: string;
18
- loading?: boolean;
19
- }
20
- interface PreviewImageProps {
6
+ statusColor: "grey" | "green" | "amber" | "purple";
21
7
  previewImageUrl?: string;
8
+ description?: string;
22
9
  loading?: boolean;
23
- }
24
- interface FooterProps {
25
10
  tags: string[];
26
- loading?: boolean;
27
11
  tagsFilter?: Set<FilterOption>;
12
+ onSelect: () => void;
28
13
  }
29
- export {};
14
+ export declare function DocumentCard(props: DocumentCardProps): JSX.Element;
@@ -1,16 +1,40 @@
1
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./DocumentCard").DocumentCardProps>;
2
- export default _default;
1
+ import { DocumentCard } from "./DocumentCard";
2
+ declare const meta: {
3
+ title: string;
4
+ component: typeof DocumentCard;
5
+ argTypes: {
6
+ statusColor: {
7
+ control: {
8
+ type: string;
9
+ };
10
+ options: string[];
11
+ };
12
+ };
13
+ };
14
+ export default meta;
3
15
  export declare const Default: {
4
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./DocumentCard").DocumentCardProps>;
16
+ render: (args: {
17
+ documentType: string;
18
+ documentURL: string;
19
+ title: string;
20
+ statusColor: "green" | "grey" | "purple" | "amber";
21
+ previewImageUrl?: string | undefined;
22
+ description?: string | undefined;
23
+ loading?: boolean | undefined;
24
+ tags: string[];
25
+ tagsFilter?: Set<import("../FilterField").FilterOption> | undefined;
26
+ onSelect: () => void;
27
+ }) => JSX.Element;
5
28
  args: {
6
29
  documentType: string;
30
+ documentURL: string;
7
31
  title: string;
8
32
  description: string;
9
33
  tags: string[];
10
34
  previewImageUrl: string;
11
35
  onSelect: () => undefined;
12
- loading: boolean;
13
- status: string;
36
+ loading: false;
37
+ statusColor: "green";
14
38
  };
15
39
  name: string;
16
40
  };
@@ -0,0 +1,6 @@
1
+ import type { AriaRole } from "react";
2
+ export interface DotProps {
3
+ color: "grey" | "green" | "amber" | "purple";
4
+ role?: AriaRole;
5
+ }
6
+ export declare function Dot(props: DotProps): JSX.Element;
@@ -0,0 +1,20 @@
1
+ import { Dot } from "./Dot";
2
+ declare const meta: {
3
+ title: string;
4
+ component: typeof Dot;
5
+ argTypes: {
6
+ color: {
7
+ control: {
8
+ type: string;
9
+ };
10
+ options: string[];
11
+ };
12
+ };
13
+ };
14
+ export default meta;
15
+ export declare const Default: {
16
+ name: string;
17
+ args: {
18
+ color: "green";
19
+ };
20
+ };
@@ -0,0 +1 @@
1
+ export { Dot } from "./Dot";
@@ -1,4 +1,4 @@
1
- import { type MutableRefObject, type ReactNode } from "react";
1
+ import { type ReactNode } from "react";
2
2
  export interface DropdownMenuProps {
3
3
  modal?: boolean;
4
4
  children: ReactNode;
@@ -14,7 +14,7 @@ export interface DropdownMenuContentProps {
14
14
  side?: "bottom" | "left" | "right" | "top";
15
15
  minWidth?: 128 | 256;
16
16
  children: ReactNode;
17
- containerRef?: MutableRefObject<null>;
17
+ asPortal?: boolean;
18
18
  maxHeight?: 256;
19
19
  }
20
20
  export declare function DropdownMenuContent(props: DropdownMenuContentProps): JSX.Element;
@@ -8,5 +8,6 @@ export interface EditableTextProps {
8
8
  onChange?: (value: string) => void;
9
9
  color?: keyof typeof colors;
10
10
  variant?: keyof typeof textVariants;
11
+ disabled?: boolean;
11
12
  }
12
13
  export declare function EditableText(props: EditableTextProps): JSX.Element;