@povio/ui 0.0.4 → 0.0.6

package/{src/components/inputs/Toggle/toggle.cva.ts → dist/components/inputs/Toggle/toggle.cva.js}

@@ -1,13 +1,10 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-import { uiGroupOutlineClass } from "#ui/components/outline.clsx";
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-import { compoundMapper } from "#ui/utils/compoundMapper";
-
-export const toggle = cva(
+import { cva } from "class-variance-authority";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const toggle = cva(
   [
     "h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4",
-    uiGroupOutlineClass,
+    uiGroupOutlineClass
   ],
   {
     variants: {
@@ -26,23 +23,22 @@ export const toggle = cva(
           "group-disabled:before:bg-interactive-contained-secondary-on-disabled",
           "group-selected:before:bg-interactive-contained-primary-on-idle",
           "group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
-          "group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
-        ],
-      },
+          "group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed"
+        ]
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
-  },
+      variant: "default"
+    }
+  }
 );
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface ToggleVariantProps extends VariantProps<typeof toggle> {}
-
-export const toggleTypography = compoundMapper<TypographyVariantProps, ToggleVariantProps>({
+const toggleTypography = compoundMapper({
   default: {
     size: "label-1",
-    variant: "default",
-  },
+    variant: "default"
+  }
 });
+export {
+  toggle,
+  toggleTypography
+};

package/dist/components/inputs/shared/CheckContent.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+interface CheckContentProps {
+    typography?: TypographyVariantProps;
+}
+export declare const CheckContent: ({ children, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/CheckContent.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const CheckContent = ({ children, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const typographyCva = uiStyle?.typography?.cva ?? typography;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: typographyCva({
+        size: "label-1",
+        variant: "default",
+        ...props.typography,
+        className: "text-text-default-2"
+      }),
+      children
+    }
+  );
+};
+export {
+  CheckContent
+};

package/dist/components/inputs/shared/InputClear.d.ts

@@ -0,0 +1,6 @@
+interface InputClearProps {
+    onClear: () => void;
+    className?: string;
+}
+export declare const InputClear: ({ onClear, className }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/InputClear.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../config/i18n.js";
+const InputClear = ({ onClear, className }) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsx(
+    InlineIconButton,
+    {
+      color: "secondary",
+      className: clsx(
+        "group-hover/date-picker-content:!flex group-hover/select-content:!flex hidden items-center group-focus-within:flex group-hover:flex",
+        className
+      ),
+      label: t(($) => $.ui.clearAlt),
+      icon: CloseIcon,
+      onPress: onClear,
+      excludeFromTabOrder: true
+    }
+  );
+};
+export {
+  InputClear
+};

package/dist/components/inputs/shared/form.types.d.ts

@@ -0,0 +1,12 @@
+import { Control, FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
+export type ControlKeys<TProps, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = TValueProp | "onChange" | "onBlur";
+export interface FormControl<TFieldValues extends FieldValues, TType> {
+    control: Control<TFieldValues>;
+    name: {
+        [K in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, K> extends TType ? K : never;
+    }[FieldPath<TFieldValues>];
+}
+export type FormControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
+    formControl: FormControl<TFieldValues, TProps[TValueProp] | null>;
+} & Omit<TProps, ControlKeys<TProps, TValueProp>> & Partial<Record<ControlKeys<TProps, TValueProp>, never>>;
+export type ControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;

package/dist/components/inputs/shared/input.cva.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
+export declare const inputBase: (props?: ({
+    variant?: "outlined" | "filled" | null | undefined;
+    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputBaseProps extends VariantProps<typeof inputBase> {
+}
+export declare const inputSize: (props?: ({
+    size?: "default" | "small" | "extra-small" | "large" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputSizeProps extends VariantProps<typeof inputSize> {
+}
+export declare const inputSide: (props?: ({
+    size?: "default" | "small" | "extra-small" | "large" | null | undefined;
+    type?: "left" | "right" | "var" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputSideProps extends VariantProps<typeof inputSide> {
+}
+export interface InputVariantProps extends InputBaseProps, InputSizeProps {
+}
+export declare const useInputCva: () => ({ className, ...rest }: InputVariantProps & ClassProp) => string;

package/{src/components/inputs/shared/input.cva.ts → dist/components/inputs/shared/input.cva.js}

@@ -1,14 +1,11 @@
-import { type VariantProps, cva, cx } from "class-variance-authority";
-import type { ClassProp } from "class-variance-authority/types";
-
-import { uiOutlineClass } from "#ui/components/outline.clsx";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-export const inputBase = cva([uiOutlineClass, "flex w-full"], {
+import { cx, cva } from "class-variance-authority";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const inputBase = cva([uiOutlineClass, "flex w-full"], {
   variants: {
     variant: {
       outlined: "",
-      filled: "",
+      filled: ""
     },
     as: {
       default: "rounded-input-rounding-default",
@@ -20,9 +17,9 @@ export const inputBase = cva([uiOutlineClass, "flex w-full"], {
         "hover:border-input-outlined-outline-hover",
         "focus:border-input-outlined-outline-active",
         "invalid:border-input-outlined-outline-error",
-        "disabled:hover:border-transparent",
-      ],
-    },
+        "disabled:hover:border-transparent"
+      ]
+    }
   },
   compoundVariants: [
     {
@@ -35,8 +32,8 @@ export const inputBase = cva([uiOutlineClass, "flex w-full"], {
         "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
         "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
-        "focus-visible:outline-interactive-contained-primary-focus",
-      ],
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
     },
     {
       variant: "filled",
@@ -48,8 +45,8 @@ export const inputBase = cva([uiOutlineClass, "flex w-full"], {
         "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
         "disabled:bg-input-filled-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
-        "focus-visible:outline-interactive-contained-primary-focus",
-      ],
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
     },
     {
       variant: "outlined",
@@ -61,8 +58,8 @@ export const inputBase = cva([uiOutlineClass, "flex w-full"], {
         "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
         "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
-        "focus-visible:outline-interactive-contained-primary-focus",
-      ],
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
     },
     {
       variant: "filled",
@@ -74,8 +71,8 @@ export const inputBase = cva([uiOutlineClass, "flex w-full"], {
         "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
         "disabled:bg-input-filled-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
-        "focus-visible:outline-interactive-contained-primary-focus",
-      ],
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
     },
     {
       variant: "outlined",
@@ -87,8 +84,8 @@ export const inputBase = cva([uiOutlineClass, "flex w-full"], {
         "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
         "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
-        "focus-visible:outline-interactive-contained-primary-focus",
-      ],
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
     },
     {
       variant: "outlined",
@@ -100,51 +97,41 @@ export const inputBase = cva([uiOutlineClass, "flex w-full"], {
         "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
         "disabled:bg-input-filled-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
-        "focus-visible:outline-interactive-contained-primary-focus",
-      ],
-    },
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
+    }
   ],
   defaultVariants: {
     variant: "outlined",
-    as: "default",
-  },
+    as: "default"
+  }
 });
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface InputBaseProps extends VariantProps<typeof inputBase> {}
-
-export const inputSize = cva("", {
+const inputSize = cva("", {
   variants: {
     size: {
       "extra-small": "px-input-side-xs py-input-height-extra-small text-label-1",
       small: "px-input-side-s py-input-height-small text-label-1",
       default: "px-input-side-m py-input-height-default text-label-1",
-      large: "px-input-side-l py-input-height-large text-label-1",
-    },
+      large: "px-input-side-l py-input-height-large text-label-1"
+    }
   },
   defaultVariants: {
-    size: "default",
-  },
+    size: "default"
+  }
 });
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface InputSizeProps extends VariantProps<typeof inputSize> {}
-
-export const inputSide = cva("", {
+const inputSide = cva("", {
   variants: {
     size: {
       "extra-small": "",
       small: "",
       default: "",
-      large: "",
+      large: ""
     },
     type: {
       left: "",
       right: "",
-      var: "",
-    },
+      var: ""
+    }
   },
   compoundVariants: [
     { type: "left", size: "extra-small", className: "left-input-side-xs" },
@@ -158,25 +145,23 @@ export const inputSide = cva("", {
     { type: "var", size: "default", className: "--spacing-input-side-m" },
     { type: "left", size: "large", className: "left-input-side-l" },
     { type: "right", size: "large", className: "right-input-side-l" },
-    { type: "var", size: "large", className: "--spacing-input-side-l" },
+    { type: "var", size: "large", className: "--spacing-input-side-l" }
   ],
   defaultVariants: {
-    size: "default",
-  },
+    size: "default"
+  }
 });
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface InputSideProps extends VariantProps<typeof inputSide> {}
-
-export interface InputVariantProps extends InputBaseProps, InputSizeProps {}
-
-export const useInputCva = () => {
+const useInputCva = () => {
   const uiStyle = UIStyle.useConfig();
-  const inputBaseCva = (uiStyle?.input?.baseCva ?? inputBase) as unknown as UIStyle.Cva<InputBaseProps>;
-  const inputSizeCva = (uiStyle?.input?.sizeCva ?? inputSize) as unknown as UIStyle.Cva<InputSizeProps>;
-
-  return ({ className, ...rest }: InputVariantProps & ClassProp) => {
+  const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  return ({ className, ...rest }) => {
     return cx(inputBaseCva(rest), inputSizeCva(rest), className);
   };
 };
+export {
+  inputBase,
+  inputSide,
+  inputSize,
+  useInputCva
+};

package/dist/components/inputs/shared/label.cva.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+export declare const labelBase: (props?: ({
+    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface LabelBaseProps extends VariantProps<typeof labelBase> {
+}
+export declare const labelTypography: (props: {
+    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
+}) => TypographyVariantProps | undefined;

package/{src/components/inputs/shared/label.cva.ts → dist/components/inputs/shared/label.cva.js}

@@ -1,9 +1,6 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-import { compoundMapper } from "#ui/utils/compoundMapper";
-
-export const labelBase = cva([], {
+import { cva } from "class-variance-authority";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const labelBase = cva([], {
   variants: {
     as: {
       default: ["flex items-start gap-1"],
@@ -12,13 +9,11 @@ export const labelBase = cva([], {
       floating: [
         "absolute left-input-side-default transition-all duration-75",
         "-translate-y-1/2 top-1/2",
-
         "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
         "group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
         "group-disabled/text-editor:text-interactive-text-secondary-disabled",
         "group-has-[input:disabled]/select-content:text-interactive-text-secondary-disabled",
         "group-has-[textarea:disabled]/text-area:text-interactive-text-secondary-disabled",
-
         // TextArea default positioning
         "group-data-[text-area]/text-area:top-5 group-data-[text-area]/text-area:translate-y-0",
         // TextEditor default positioning
@@ -27,26 +22,21 @@ export const labelBase = cva([], {
         "group-focus/input-content:top-1 group-focus/input-content:translate-y-0",
         "group-focus-within/input-content:top-1 group-focus-within/input-content:translate-y-0",
         "group-has-[input:not(:placeholder-shown)]/input-content:top-1 group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
-
         // TextArea
         "group-focus/text-area:top-1 group-focus/text-area:translate-y-0",
         "group-focus-within/text-area:top-1 group-focus-within/text-area:translate-y-0",
         "group-has-[textarea:not(:placeholder-shown)]/text-area:top-1 group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
-
         // TextEditor
         "group-focus/text-editor:top-1 group-focus/text-editor:translate-y-0",
         "group-focus-within/text-editor:top-1 group-focus-within/text-editor:translate-y-0",
         "group-data-[is-filled=true]/text-editor:top-1 group-data-[is-filled=true]/text-editor:translate-y-0",
-
         // Date and Time Picker
         "group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
         "group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
-
         // Select and Autocomplete
         "group-data-[has-selection]/select-content:top-1 group-data-[has-selection]/select-content:translate-y-0",
         "group-data-[searchable-focus-within]/select-content:top-1 group-data-[searchable-focus-within]/select-content:translate-y-0",
         "group-data-[has-search]/select-content:top-1 group-data-[has-search]/select-content:translate-y-0",
-
         // Text and Number Input
         "group-has-[input:placeholder-shown]/input-content:text-text-default-3",
         "group-has-[input:placeholder-shown]/input-content:!font-medium",
@@ -56,7 +46,6 @@ export const labelBase = cva([], {
         "group-focus-within/input-content:!text-text-default-1",
         "group-focus-within/input-content:text-label-3",
         "group-has-[input:focus-within]/input-content:!font-semibold",
-
         // TextArea
         "group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
         "group-has-[textarea:placeholder-shown]/text-area:!font-medium",
@@ -66,7 +55,6 @@ export const labelBase = cva([], {
         "group-focus-within/text-area:!text-text-default-1",
         "group-focus-within/text-area:text-label-3",
         "group-has-[textarea:focus-within]/text-area:!font-semibold",
-
         // TextEditor
         "group-has-[data-text-editor:placeholder-shown]/text-editor:text-text-default-3",
         "group-has-[data-text-editor:placeholder-shown]/text-editor:!font-medium",
@@ -76,7 +64,6 @@ export const labelBase = cva([], {
         "group-focus-within/text-editor:!text-text-default-1",
         "group-focus-within/text-editor:text-label-3",
         "group-has-[data-text-editor:focus-within]/text-editor:!font-semibold",
-
         // DatePicker, TimePicker focus-within
         "group-data-[has-selection]/date-picker-content:!font-semibold",
         "group-data-[has-selection]/date-picker-content:!text-label-3",
@@ -84,7 +71,6 @@ export const labelBase = cva([], {
         "group-focus-within/date-picker-content:!font-semibold",
         "group-focus-within/date-picker-content:!text-label-3",
         "group-focus-within/date-picker-content:text-text-default-1",
-
         // Select focused state
         "group-data-[has-selection]/select-content:!font-semibold",
         "group-data-[has-selection]/select-content:!text-label-3",
@@ -94,53 +80,54 @@ export const labelBase = cva([], {
         "group-data-[searchable-focus-within]/select-content:text-text-default-1",
         "group-data-[has-search]/select-content:!font-semibold",
         "group-data-[has-search]/select-content:!text-label-3",
-        "group-data-[has-search]/select-content:text-text-default-1",
-      ],
-    },
+        "group-data-[has-search]/select-content:text-text-default-1"
+      ]
+    }
   },
   defaultVariants: {
-    as: "default",
-  },
+    as: "default"
+  }
 });
-
-export interface LabelBaseProps extends VariantProps<typeof labelBase> {}
-
-export const labelTypography = compoundMapper<TypographyVariantProps, LabelBaseProps>({
+const labelTypography = compoundMapper({
   compoundVariants: [
     {
       as: "default",
       value: {
         size: "label-2",
-        variant: "prominent-1",
-      },
+        variant: "prominent-1"
+      }
     },
     {
       as: "filter",
       value: {
         size: "label-1",
-        variant: "default",
-      },
+        variant: "default"
+      }
     },
     {
       as: "inline",
       value: {
         size: "label-2",
-        variant: "prominent-1",
-      },
+        variant: "prominent-1"
+      }
     },
     {
       as: "floating",
       value: {
         size: "label-1",
-        variant: "default",
-      },
-    },
+        variant: "default"
+      }
+    }
   ],
   default: {
     size: "label-2",
-    variant: "prominent-1",
+    variant: "prominent-1"
   },
   defaultVariants: {
-    as: "default",
-  },
+    as: "default"
+  }
 });
+export {
+  labelBase,
+  labelTypography
+};

package/dist/components/outline.clsx.d.ts

@@ -0,0 +1,2 @@
+export declare const uiOutlineClass: string;
+export declare const uiGroupOutlineClass: string;

package/{src/components/outline.clsx.ts → dist/components/outline.clsx.js}

@@ -1,9 +1,11 @@
 import { clsx } from "clsx";
-
-export const uiOutlineClass = clsx(
-  "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2",
+const uiOutlineClass = clsx(
+  "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2"
 );
-
-export const uiGroupOutlineClass = clsx(
-  "group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2",
+const uiGroupOutlineClass = clsx(
+  "group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2"
 );
+export {
+  uiGroupOutlineClass,
+  uiOutlineClass
+};

package/dist/components/overlays/ActionModal/ActionModal.d.ts

@@ -0,0 +1,19 @@
+import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+import { ModalProps } from '#ui/components/overlays/Modal/Modal';
+interface ActionModalAction {
+    label: string;
+    onPress: () => void;
+    className?: string;
+    variant?: ButtonVariantProps["variant"];
+    color?: ButtonVariantProps["color"];
+}
+export interface ActionModalProps extends ModalProps {
+    heading: string;
+    description: string;
+    primaryAction: ActionModalAction;
+    secondaryAction?: ActionModalAction;
+    buttonSize?: ButtonVariantProps["size"];
+    textAlign?: "left" | "center" | "right";
+}
+export declare const ActionModal: ({ heading, description, primaryAction, secondaryAction, buttonSize, textAlign, modalClassName, ...modalProps }: ActionModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "../../buttons/Button/Button.js";
+import { Modal } from "../Modal/Modal.js";
+import { Typography } from "../../text/Typography/Typography.js";
+const textAlignClassMap = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+const ActionModal = ({
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  buttonSize = "m",
+  textAlign = "left",
+  modalClassName,
+  ...modalProps
+}) => {
+  const textAlignClass = textAlignClassMap[textAlign];
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      modalClassName: clsx("w-modal", modalClassName),
+      ...modalProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-modal-gap-text", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              size: "title-5",
+              variant: "prominent-1",
+              as: "h2",
+              className: textAlignClass,
+              children: heading
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              size: "body-3",
+              className: textAlignClass,
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1", children: [
+          secondaryAction && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: secondaryAction?.variant ?? "contained",
+              size: buttonSize,
+              color: secondaryAction?.color ?? "secondary",
+              width: "fill",
+              onPress: secondaryAction?.onPress,
+              className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
+              children: secondaryAction?.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: primaryAction?.variant ?? "contained",
+              size: buttonSize,
+              color: primaryAction?.color ?? "primary",
+              width: "fill",
+              onPress: primaryAction.onPress,
+              className: clsx("min-w-40 flex-1 shrink-0", primaryAction?.className),
+              children: primaryAction.label
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  ActionModal
+};