@payfit/unity-components 2.46.16 → 2.46.17

package/dist/esm/components/action-bar/parts/ActionBarIconButton.d.ts

@@ -1,61 +0,0 @@
-import { UnityIcon } from '@payfit/unity-icons';
-import { IconButtonProps } from '../../icon-button/IconButton.js';
-export interface ActionBarIconButtonProps {
-    /**
-     * The icon to display inside the button.
-     */
-    icon: UnityIcon;
-    /**
-     * The label for accessibility. This is used as the aria-label and shown in a tooltip.
-     */
-    label: string;
-    /**
-     * The visual variant of the button.
-     * @default 'secondary'
-     */
-    variant?: 'primary' | 'secondary';
-    /**
-     * Callback fired when the button is pressed.
-     */
-    onPress?: IconButtonProps['onPress'];
-    /**
-     * Whether the button is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the button is in a loading state.
-     * @default false
-     */
-    isLoading?: boolean;
-}
-/**
- * The ActionBarIconButton component represents an icon-only button action within an ActionBar.
- * It renders as an icon button with appropriate styling for the inverted ActionBar context.
- * @param {ActionBarIconButtonProps} props - Props for the icon button.
- * @example
- * ```tsx
- * import { ActionBarIconButton } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <ActionBarIconButton
- *       icon="TrashOutlined"
- *       label="Delete items"
- *       variant="primary"
- *       onPress={() => console.log('Delete clicked')}
- *     />
- *   )
- * }
- * ```
- * @remarks
- * - Automatically uses inverted icon button variants to work on dark ActionBar background
- * - The label prop is required for accessibility and is shown in a tooltip on hover
- * - Secondary icon buttons are hidden on mobile viewports (overflow menu handles them)
- * - Primary icon buttons remain visible on all screen sizes
- * @see {@link ActionBarIconButtonProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
- */
-declare const ActionBarIconButton: import('react').ForwardRefExoticComponent<ActionBarIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-export { ActionBarIconButton };

package/dist/esm/components/action-bar/parts/ActionBarIconButton.js

@@ -1,41 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { IconButton as f } from "../../icon-button/IconButton.js";
-const l = m(
-  ({
-    icon: r,
-    label: t,
-    variant: n = "secondary",
-    onPress: a,
-    isDisabled: i = !1,
-    isLoading: c = !1
-  }, e) => {
-    const o = {
-      primary: {
-        variant: "primary",
-        color: "inverted"
-      },
-      secondary: {
-        variant: "ghost",
-        color: "inverted"
-      }
-    }[n];
-    return /* @__PURE__ */ s(
-      f,
-      {
-        ref: e,
-        icon: r,
-        label: t,
-        variant: o.variant,
-        color: o.color,
-        onPress: a,
-        isDisabled: i,
-        isLoading: c
-      }
-    );
-  }
-);
-l.displayName = "ActionBarIconButton";
-export {
-  l as ActionBarIconButton
-};

package/dist/esm/components/action-bar/parts/ActionBarOverflowMenu.d.ts

@@ -1,10 +0,0 @@
-import { ActionBarButtonActionItem } from '../ActionBar.types.js';
-interface ActionBarOverflowMenuProps {
-    actions: ActionBarButtonActionItem[];
-}
-/**
- * Mobile overflow menu for non-primary actions
- * @internal
- */
-export declare const ActionBarOverflowMenu: ({ actions, }: ActionBarOverflowMenuProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/components/action-bar/parts/ActionBarOverflowMenu.js

@@ -1,45 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useIntl as s } from "react-intl";
-import { IconButton as m } from "../../icon-button/IconButton.js";
-import { Icon as c } from "../../icon/Icon.js";
-import { Menu as a } from "../../menu/Menu.js";
-import { MenuContent as l } from "../../menu/parts/MenuContent.js";
-import { MenuTrigger as d } from "../../menu/parts/MenuTrigger.js";
-import { RawMenuItem as u } from "../../menu/parts/RawMenuItem.js";
-const v = ({
-  actions: i
-}) => {
-  const n = s();
-  return /* @__PURE__ */ e("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ t(a, { children: [
-    /* @__PURE__ */ e(d, { asChild: !0, children: /* @__PURE__ */ e(
-      m,
-      {
-        icon: "DotsThreeOutlined",
-        label: n.formatMessage({
-          id: "unity:component:action-bar:actions:more-actions",
-          defaultMessage: "More actions"
-        }),
-        variant: "ghost",
-        color: "inverted"
-      }
-    ) }),
-    /* @__PURE__ */ e(l, { children: i.map((r) => {
-      const o = r.meta;
-      return /* @__PURE__ */ e(
-        u,
-        {
-          isDisabled: o?.isDisabled,
-          onAction: () => {
-            o?.onPress?.({});
-          },
-          prefix: o?.prefixIcon ? /* @__PURE__ */ e(c, { src: o.prefixIcon, size: 20 }) : void 0,
-          children: r.label
-        },
-        r.id
-      );
-    }) })
-  ] }) });
-};
-export {
-  v as ActionBarOverflowMenu
-};

package/dist/esm/components/action-bar/parts/ActionBarPrefixArea.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-interface ActionBarPrefixAreaProps {
-    children: ReactNode;
-    ariaKeyshortcuts?: string;
-}
-/**
- * Prefix content area with optional keyboard shortcut announcement
- * @internal
- */
-export declare const ActionBarPrefixArea: ({ children, ariaKeyshortcuts, }: ActionBarPrefixAreaProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/components/action-bar/parts/ActionBarPrefixArea.js

@@ -1,35 +0,0 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { Group as n } from "react-aria-components/Group";
-import { useIntl as i } from "react-intl";
-import { actionBar as c } from "../ActionBar.variants.js";
-const p = ({
-  children: r,
-  ariaKeyshortcuts: o
-}) => {
-  const t = i(), { prefixArea: e } = c();
-  return /* @__PURE__ */ a(
-    n,
-    {
-      className: e(),
-      "aria-label": t.formatMessage({
-        id: "unity:component:action-bar:group:label",
-        defaultMessage: "Toolbar information"
-      }),
-      children: [
-        r,
-        o && /* @__PURE__ */ s("span", { className: "uy:sr-only", children: t.formatMessage(
-          {
-            id: "unity:component:action-bar:key-shortcuts-text",
-            defaultMessage: "Use {keyShortcuts} to focus the action bar"
-          },
-          {
-            keyShortcuts: o
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  p as ActionBarPrefixArea
-};

package/dist/esm/components/action-bar/parts/ActionBarRoot.d.ts

@@ -1,67 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare const actionBarRoot: import('tailwind-variants').TVReturnType<{
-    isVisible: {
-        true: string[];
-        false: string[];
-    };
-    position: {
-        absolute: string[];
-        fixed: string[];
-    };
-}, undefined, string[], {
-    isVisible: {
-        true: string[];
-        false: string[];
-    };
-    position: {
-        absolute: string[];
-        fixed: string[];
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isVisible: {
-        true: string[];
-        false: string[];
-    };
-    position: {
-        absolute: string[];
-        fixed: string[];
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export interface ActionBarRootProps extends PropsWithChildren {
-    /** Offset from the bottom of the table. It uses Unity's standard spacing tokens. */
-    offsetBottom?: '$25' | '$50' | '$75' | '$100' | '$125' | '$200' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000' | number;
-    /**
-     * Control the visibility of the Action bar root, which will in turn hide and show the action bar
-     * @default false
-     */
-    isVisible?: boolean;
-    /**
-     * The positioning mode to use:
-     * - `absolute` will place the root at the bottom-center of the closest parent with `position: relative`
-     * - `fixed` will place the root at the bottom-center of the viewport
-     * @default "absolute"
-     */
-    position?: 'absolute' | 'fixed';
-}
-/**
- * The ActionBarRoot component provides positioning context for ActionBar components.
- * It positions the ActionBar absolutely within a table container.
- * @param {ActionBarRootProps} props - The props for the ActionBarRoot component
- * @example
- * ```tsx
- * import { ActionBarRoot, ActionBar } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <ActionBarRoot>
- *       <ActionBar selectionCount={2} onClearSelection={handleClear}>
- *       </ActionBar>
- *     </ActionBarRoot>
- *   )
- * }
- * ```
- * @see {@link ActionBarRootProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
- */
-declare const ActionBarRoot: import('react').ForwardRefExoticComponent<ActionBarRootProps & import('react').RefAttributes<HTMLDivElement>>;
-export { ActionBarRoot };

package/dist/esm/components/action-bar/parts/ActionBarRoot.js

@@ -1,56 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as c } from "@payfit/unity-themes";
-const l = c({
-  base: [
-    "uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
-    "uy:duration-200 uy:ease-out",
-    "uy:bottom-[calc(var(--uy-spacing-200)+var(--uy-spacing-offset-bottom))]",
-    "uy:starting:opacity-0"
-  ],
-  variants: {
-    isVisible: {
-      true: ["uy:animate-slide-up-fade-in"],
-      false: [
-        // Use transform instead of changing bottom position
-        "uy:animate-slide-down-fade-out",
-        "uy:pointer-events-none",
-        "uy:opacity-0",
-        "uy:translate-y-10"
-      ]
-    },
-    position: {
-      absolute: ["uy:absolute"],
-      fixed: ["uy:fixed"]
-    }
-  }
-}), p = y(
-  ({
-    children: o,
-    offsetBottom: a = 0,
-    isVisible: t = !1,
-    position: u = "absolute",
-    ...n
-  }, i) => {
-    const e = typeof a == "number" ? a : a.replace("$", ""), s = typeof a == "number" ? `calc(var(--uy-spacing)*${e})` : `var(--uy-spacing-${e})`;
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: i,
-        className: l({ isVisible: t, position: u }),
-        ...n,
-        style: {
-          "--uy-spacing-offset-bottom": s
-        },
-        tabIndex: -1,
-        inert: t ? void 0 : "",
-        children: o
-      }
-    );
-  }
-);
-p.displayName = "ActionBarRoot";
-export {
-  p as ActionBarRoot,
-  l as actionBarRoot
-};

package/dist/esm/components/action-bar/utils/action-bar-helpers.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-import { ActionBarActionItem, ActionBarButtonActionItem, ActionBarIconButtonActionItem } from '../ActionBar.types.js';
-/**
- * Helper function to check if an action is an icon-button type
- */
-export declare const isIconButtonAction: (action: ActionBarActionItem) => action is ActionBarIconButtonActionItem;
-/**
- * Extract non-primary actions from dynamic actions array for mobile overflow
- */
-export declare const extractMobileActionsFromArray: (actions: ActionBarActionItem[]) => ActionBarButtonActionItem[];
-/**
- * Extract non-primary actions from static children for mobile overflow
- */
-export declare const extractMobileActionsFromChildren: (children: ReactNode) => ActionBarButtonActionItem[];

package/dist/esm/components/action-bar/utils/action-bar-helpers.js

@@ -1,29 +0,0 @@
-import c, { isValidElement as s } from "react";
-import { ActionBarButton as p } from "../parts/ActionBarButton.js";
-import { ActionBarIconButton as n } from "../parts/ActionBarIconButton.js";
-const u = (e) => e.filter(
-  (o) => o.variant !== "primary"
-), y = (e) => {
-  const o = [];
-  return c.Children.forEach(e, (t) => {
-    if (!s(t) || t.type !== p && t.type !== n)
-      return;
-    const r = t.props;
-    if (r.variant === "primary") return;
-    const i = t.type === n ? r.label : r.children, a = t.type === n ? r.icon : r.prefixIcon;
-    o.push({
-      //eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
-      id: t.key ?? r.id,
-      label: i,
-      variant: r.variant,
-      meta: {
-        onPress: r.onPress,
-        prefixIcon: a
-      }
-    });
-  }), o;
-};
-export {
-  u as extractMobileActionsFromArray,
-  y as extractMobileActionsFromChildren
-};

package/dist/esm/components/actionable/Actionable.d.ts

@@ -1,61 +0,0 @@
-import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
-export interface ActionableProps extends AriaButtonProps {
-    /** Additional class names to apply to the actionable */
-    className?: string;
-    /** set to true to remove the Actionable's base styles */
-    isUnstyled?: boolean;
-    /** The HTML element to render the actionable as. */
-    asElement?: 'span' | 'div' | 'button';
-}
-/**
- * Actionable primitive creates interactive surfaces that behave like buttons while allowing complete control over appearance and content.
- * Use this component when you need to build complex interactive elements that require custom styling or dynamic content based on interaction states, and when standard Unity button components are insufficient for your use case.
- * @param {ActionableProps} props - Button behavior props from React Aria, plus styling and element configuration
- * @example
- * ```tsx
- * // Basic usage with custom styling
- * import { Actionable } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <Actionable
- *       className="uy:p-100 uy:rounded-100 uy:border uy:border-border-neutral uy:hover:bg-surface-neutral-hover"
- *       onPress={() => console.log('Pressed!')}
- *     >
- *       Click me
- *     </Actionable>
- *   )
- * }
- * ```
- * @example
- * ```tsx
- * // Dynamic content based on interaction state
- * import { Actionable, Icon } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <Actionable asElement="button" className="uy:p-100 uy:flex uy:items-center uy:gap-100">
- *       {({ isHovered, isPressed }) => (
- *         <>
- *           <Icon src={isHovered || isPressed ? 'CakeFilled' : 'CakeOutlined'} />
- *           <span>Interactive content</span>
- *         </>
- *       )}
- *     </Actionable>
- *   )
- * }
- * ```
- * @remarks
- * - Provides button-like interaction behavior using React Aria hooks for accessibility
- * - Supports rendering as `div`, `span`, or `button` elements via the `asElement` prop
- * - Includes built-in state management for hover, focus, and press interactions
- * - Automatically applies appropriate ARIA attributes and keyboard navigation
- * - Supports both static children and render prop pattern for dynamic content
- * - Use data attributes (`data-hovered`, `data-pressed`, `data-focused`, `data-disabled`, `data-focus-visible`) for styling non-button elements
- * - Marked as `uy:group` for styling child elements based on parent state
- * @see {@link ActionableProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/actionable GitHub}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/primitives-actionable--docs unity-components.payfit.io}
- */
-declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLSpanElement | HTMLButtonElement | HTMLDivElement>>;
-export { Actionable };

package/dist/esm/components/actionable/Actionable.js

@@ -1,83 +0,0 @@
-import { jsx as H } from "react/jsx-runtime";
-import { forwardRef as k, useState as F, useMemo as E } from "react";
-import { uyTv as N } from "@payfit/unity-themes";
-import { useObjectRef as x, useFocusVisible as S, useHover as U, useFocus as V, mergeProps as f } from "react-aria";
-import { useButton as j } from "react-aria/useButton";
-const w = N({
-  base: "uy:group",
-  variants: {
-    isUnstyled: {
-      true: "",
-      false: [
-        "uy:cursor-pointer",
-        "uy:aria-disabled:cursor-not-allowed",
-        "uy:aria-disabled:text-content-neutral-disabled"
-      ]
-    }
-  },
-  defaultVariants: {
-    isUnstyled: !1
-  }
-}), A = k((v, e) => {
-  const {
-    asElement: l = "div",
-    isUnstyled: d = !1,
-    className: c,
-    children: o,
-    ...s
-  } = v;
-  e = x(e);
-  const { isFocusVisible: a } = S(), { isHovered: i, hoverProps: u } = U({
-    onHoverStart: s.onHoverStart,
-    onHoverEnd: s.onHoverEnd,
-    onHoverChange: s.onHoverChange,
-    isDisabled: s.isDisabled
-  }), [t, D] = F(!1), { focusProps: b } = V({
-    onFocusChange: D,
-    isDisabled: s.isDisabled
-  }), { buttonProps: p, isPressed: n } = j(
-    {
-      ...s,
-      isDisabled: s.isDisabled,
-      elementType: l
-    },
-    e
-  ), y = E(
-    () => w({ isUnstyled: d, className: c }),
-    [c, d]
-  ), g = l, C = (r) => {
-    if (s.isDisabled) {
-      r.preventDefault(), r.stopPropagation();
-      return;
-    }
-    const m = f(p, u, b);
-    m.onClick && m.onClick(r);
-  }, P = f(p, u, b), { onClick: M, ...h } = P;
-  return /* @__PURE__ */ H(
-    g,
-    {
-      ...h,
-      onClick: C,
-      className: y,
-      ...n && { "data-pressed": n },
-      ...t && { "data-focused": t },
-      ...i && { "data-hovered": i },
-      ...s.isDisabled && { "data-disabled": s.isDisabled },
-      ...a && { "data-focus-visible": a },
-      ref: e,
-      children: typeof o == "function" ? o({
-        isHovered: i,
-        isPressed: n,
-        isFocused: t,
-        isDisabled: !!s.isDisabled,
-        isFocusVisible: a,
-        isPending: !1,
-        defaultChildren: null
-      }) : o
-    }
-  );
-});
-A.displayName = "Actionable";
-export {
-  A as Actionable
-};

package/dist/esm/components/alert/Alert.d.ts

@@ -1,55 +0,0 @@
-import { PropsWithChildren } from 'react';
-type BaseAlertProps = PropsWithChildren;
-type DismissableConfig = {
-    /**
-     * Whether the alert is dismissable by the user, and should render a close button.
-     * @default false
-     */
-    isDismissable?: false;
-    onDismiss?: never;
-    dismissButtonLabel?: never;
-} | {
-    /**
-     * Whether the alert is dismissable by the user, and should render a close button.
-     * @default false
-     */
-    isDismissable: true;
-    /**
-     * Callback function to handle the alert's dismissal behavior.
-     */
-    onDismiss: () => void;
-    /**
-     * Label for the close button.
-     */
-    dismissButtonLabel: string;
-};
-type VariantConfig = {
-    /**
-     * The alert's variant, which determines its visual style.
-     * Each variant has a fixed icon:
-     * - info: InfoFilled
-     * - warning: WarningFilled
-     * - success: CheckCircleFilled
-     * - danger: WarningCircleFilled
-     * - insight: LightbulbFilamentFilled
-     */
-    variant?: 'info' | 'warning' | 'success' | 'danger' | 'insight';
-};
-export type AlertProps = BaseAlertProps & DismissableConfig & VariantConfig;
-/**
- * Alerts display brief messages for the user without interrupting their use of the app.
- * They can provide feedback, confirmations, warnings, errors, or educational insights.
- * @example
- * <Alert variant="info">
- *   <AlertTitle>Information</AlertTitle>
- *   <AlertContent>This is an informational message.</AlertContent>
- * </Alert>
- * @example
- * // Insight variant for tips and guidance
- * <Alert variant="insight">
- *   <AlertTitle>Pro Tip</AlertTitle>
- *   <AlertContent>Use keyboard shortcuts to navigate faster.</AlertContent>
- * </Alert>
- */
-declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Alert };

package/dist/esm/components/alert/Alert.js

@@ -1,99 +0,0 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { CircularIconButton as a } from "../icon-button/CircularIconButton.js";
-import { Icon as w } from "../icon/Icon.js";
-const p = b({
-  slots: {
-    base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
-    content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200 uy:[&>*:first-child:not(header)]:sm:pt-50",
-    icon: "uy:sm:mt-50 uy:flex uy:justify-between uy:items-center uy:sm:items-start"
-  },
-  variants: {
-    variant: {
-      info: {
-        base: "uy:bg-surface-info-lowest uy:border-border-info-lowest",
-        icon: "uy:text-content-info"
-      },
-      warning: {
-        base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest",
-        icon: "uy:text-content-warning"
-      },
-      success: {
-        base: "uy:bg-surface-success-lowest uy:border-border-success-lowest",
-        icon: "uy:text-content-success"
-      },
-      danger: {
-        base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest",
-        icon: "uy:text-content-danger"
-      },
-      insight: {
-        base: "uy:bg-surface-neutral-lowest uy:border-surface-neutral-lowest",
-        icon: "uy:text-content-neutral-lowest"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "info"
-  }
-}), x = {
-  info: "InfoFilled",
-  warning: "WarningFilled",
-  success: "CheckCircleFilled",
-  danger: "WarningCircleFilled",
-  insight: "LightbulbFilamentFilled"
-}, h = g(
-  ({
-    children: l,
-    variant: e = "info",
-    isDismissable: o = !1,
-    onDismiss: n,
-    dismissButtonLabel: r,
-    ...i
-  }, u) => {
-    const { base: c, content: d, icon: y } = p({ variant: e }), f = x[e], m = {
-      role: e === "danger" ? "alert" : "status",
-      "aria-live": e === "danger" ? "assertive" : "polite",
-      "aria-atomic": !0,
-      "aria-relevant": "additions removals"
-    };
-    return /* @__PURE__ */ s(
-      "div",
-      {
-        ...i,
-        "data-dd-privacy": "mask",
-        ref: u,
-        className: c(),
-        ...m,
-        children: [
-          /* @__PURE__ */ s("div", { className: y(), children: [
-            /* @__PURE__ */ t(w, { src: f, size: 24, role: "presentation" }),
-            o && r && /* @__PURE__ */ t(
-              a,
-              {
-                title: r,
-                icon: "CloseOutlined",
-                onPress: n,
-                className: "uy:sm:hidden"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ t("section", { className: d(), children: l }),
-          o && r && /* @__PURE__ */ t(
-            a,
-            {
-              title: r,
-              icon: "CloseOutlined",
-              onPress: n,
-              className: "uy:hidden uy:sm:flex"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-h.displayName = "Alert";
-export {
-  h as Alert
-};