@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/funnel-layout/parts/FunnelPageHeader.d.ts

@@ -0,0 +1,77 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const funnelPageHeader: import('tailwind-variants').TVReturnType<{
+    gradient: {
+        default: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    hgroup: string;
+    figure: string;
+    figcaption: string;
+}, undefined, {
+    gradient: {
+        default: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    hgroup: string;
+    figure: string;
+    figcaption: string;
+}, import('tailwind-variants').TVReturnType<{
+    gradient: {
+        default: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    hgroup: string;
+    figure: string;
+    figcaption: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface FunnelPageHeaderProps extends PropsWithChildren<VariantProps<typeof funnelPageHeader>> {
+    title: string;
+    subtitle: string;
+    style?: VariantProps<typeof funnelPageHeader>['gradient'];
+    imageSlot?: React.ReactNode;
+    imageSlotAltText?: string;
+}
+/**
+ * The `FunnelPageHeader` component provides the header section of a funnel page with title, subtitle, and optional image.
+ * It displays the page title and subtitle in a structured layout with a responsive design that adapts to different screen sizes.
+ * You can control the gradient appearance using the `gradient` prop to indicate different states or contexts.
+ * @param {FunnelPageHeaderProps} props - The props for the `FunnelPageHeader` component
+ * @example
+ * ```tsx
+ * import { FunnelPageHeader } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelPageHeader
+ *       title="Page Title"
+ *       subtitle="Page Subtitle"
+ *       style="warning"
+ *       imageSlot={<img src="image.jpg" alt="description" />}
+ *       imageSlotAltText="Image description"
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically provides accessibility attributes for screen readers
+ * - Supports different gradient styles for visual context
+ * - Responsive image display that adapts to screen size
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
+ * @see {@link FunnelPageHeaderProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpageheader--docs unity-components.payfit.io}
+ */
+declare const FunnelPageHeader: import('react').ForwardRefExoticComponent<FunnelPageHeaderProps & import('react').RefAttributes<HTMLElement>>;
+export { FunnelPageHeader };

package/dist/esm/components/funnel-layout/parts/FunnelPageHeader.js

@@ -0,0 +1,55 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { uyTv as h } from "@payfit/unity-themes";
+import { Text as n } from "../../text/Text.js";
+import { useFunnelLayoutContext as x } from "../FunnelLayout.context.js";
+const b = h({
+  slots: {
+    base: "uy:flex uy:flex-col uy:justify-between uy:p-300 uy:md:p-600 uy:md:flex-row uy:md:items-center uy:md:rounded-t-300",
+    hgroup: "uy:space-y-100",
+    figure: "uy:hidden uy:lg:block uy:lg:h-full uy:lg:max-h-[160px] uy:lg:ml-800 uy:lg:mr-150 uy:shrink-0",
+    figcaption: "uy:sr-only"
+  },
+  variants: {
+    gradient: {
+      default: {
+        base: "uy:md:bg-gradient-to-b uy:md:from-blue-l1/30 uy:md:to-grayscale-L0"
+      }
+    }
+  },
+  defaultVariants: {
+    gradient: "default"
+  }
+}), v = p(
+  ({ title: t, subtitle: u, imageSlot: r, imageSlotAltText: l, children: d, style: i, ...o }, s) => {
+    const { ids: y } = x(), { base: m, hgroup: c, figure: f, figcaption: g } = b({
+      gradient: i
+    });
+    return /* @__PURE__ */ e(
+      "header",
+      {
+        ref: s,
+        className: m(),
+        "data-unity-component": "FunnelPageHeader",
+        "data-dd-privacy": "allow",
+        ...o,
+        children: [
+          /* @__PURE__ */ e("hgroup", { className: c(), id: y.funnelDescriptionId, children: [
+            /* @__PURE__ */ a(n, { asElement: "h2", variant: "h1", children: t }),
+            /* @__PURE__ */ a(n, { asElement: "h3", variant: "subtitle", color: "content.neutral.low", children: u }),
+            d
+          ] }),
+          r && /* @__PURE__ */ e("figure", { className: f(), "aria-hidden": "true", children: [
+            r,
+            /* @__PURE__ */ a("figcaption", { className: g(), children: l })
+          ] })
+        ]
+      }
+    );
+  }
+);
+v.displayName = "FunnelPageHeader";
+export {
+  v as FunnelPageHeader,
+  b as funnelPageHeader
+};

package/dist/esm/components/funnel-layout/parts/FunnelProgressBar.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+declare const progressBar: import('tailwind-variants').TVReturnType<{
+    isFull: {
+        true: {
+            meter: string;
+        };
+        false: {
+            meter: string;
+        };
+    };
+}, {
+    base: string[];
+    meter: string[];
+}, undefined, {
+    isFull: {
+        true: {
+            meter: string;
+        };
+        false: {
+            meter: string;
+        };
+    };
+}, {
+    base: string[];
+    meter: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isFull: {
+        true: {
+            meter: string;
+        };
+        false: {
+            meter: string;
+        };
+    };
+}, {
+    base: string[];
+    meter: string[];
+}, undefined, unknown, unknown, undefined>>;
+interface ProgressBarProps extends Omit<VariantProps<typeof progressBar>, 'isFull'> {
+    /** the value of the progression */
+    value: number;
+}
+declare const FunnelProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export { FunnelProgressBar };

package/dist/esm/components/funnel-layout/parts/FunnelProgressBar.js

@@ -0,0 +1,50 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { ProgressBar as d } from "react-aria-components";
+const y = n({
+  slots: {
+    base: ["uy:bg-surface-neutral-disabled", "uy:w-full uy:h-50"],
+    meter: [
+      "uy:h-full uy:w-[var(--uy-progressbar-value)] uy:transition-all uy:duration-200 uy:ease-linear",
+      "uy:bg-surface-primary",
+      "uy:rounded-r-pill"
+    ]
+  },
+  variants: {
+    isFull: {
+      true: { meter: "uy:rounded-r-0" },
+      false: { meter: "uy:rounded-r-pill" }
+    }
+  },
+  defaultVariants: {
+    isFull: !1
+  }
+}), m = i(
+  ({ value: e, ...a }, s) => {
+    const l = e >= 100, { base: u, meter: o } = y({ isFull: l });
+    return /* @__PURE__ */ r(
+      d,
+      {
+        ref: s,
+        value: e,
+        "aria-label": "progress bar",
+        "data-dd-privacy": "allow",
+        ...a,
+        children: ({ percentage: t }) => /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: o(),
+            style: {
+              "--uy-progressbar-value": `${t}%`
+            }
+          }
+        ) })
+      }
+    );
+  }
+);
+m.displayName = "FunnelProgressBar";
+export {
+  m as FunnelProgressBar
+};

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.d.ts

@@ -0,0 +1,55 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const funnelSidebar: import('tailwind-variants').TVReturnType<{
+    isSticky: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:top-600 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0", {
+    isSticky: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isSticky: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:top-600 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0", unknown, unknown, undefined>>;
+export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeof funnelSidebar>> {
+    'aria-label'?: string;
+}
+/**
+ * The `FunnelSidebar` component provides an optional sidebar area in the funnel layout.
+ * It displays process steps or additional navigation content with proper accessibility
+ * attributes and responsive sizing that adapts to the layout structure.
+ * @param {FunnelSidebarProps} props - The props for the `FunnelSidebar` component
+ * @example
+ * ```tsx
+ * import { FunnelSidebar } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelSidebar>
+ *       <TaskMenu>
+ *         <Task>
+ *           <TaskTitle>Task 1</TaskTitle>
+ *         </Task>
+ *       </TaskMenu>
+ *     </FunnelSidebar>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically receives accessibility attributes from FunnelLayout context
+ * - Supports sticky positioning for better navigation experience
+ * - Provides responsive sizing that adapts to content and screen size
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
+ * @see {@link FunnelSidebarProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelsidebar--docs unity-components.payfit.io}
+ */
+declare const FunnelSidebar: import('react').ForwardRefExoticComponent<FunnelSidebarProps & import('react').RefAttributes<HTMLElement>>;
+export { FunnelSidebar };

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { useIntl as o } from "react-intl";
+import { useFunnelLayoutContext as y } from "../FunnelLayout.context.js";
+const m = d({
+  base: "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:top-600 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0",
+  variants: {
+    isSticky: {
+      true: "uy:sticky uy:top-0 uy:z-9",
+      false: "uy:static"
+    }
+  },
+  defaultVariants: {
+    isSticky: !0
+  }
+}), f = l(
+  ({ children: e, isSticky: t, "aria-label": s, ...i }, r) => {
+    const { ids: a } = y(), u = o();
+    return /* @__PURE__ */ n(
+      "aside",
+      {
+        ref: r,
+        "aria-label": s ?? u.formatMessage({
+          id: "unity:layout:funnel:sidebar:aria-label",
+          defaultMessage: "Process steps"
+        }),
+        "aria-describedby": a.funnelTitleId,
+        className: m({ isSticky: t }),
+        id: a.asideId,
+        tabIndex: -1,
+        "data-unity-component": "FunnelSidebar",
+        "data-dd-privacy": "allow",
+        ...i,
+        children: e
+      }
+    );
+  }
+);
+f.displayName = "FunnelSidebar";
+export {
+  f as FunnelSidebar,
+  m as funnelSidebar
+};

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.d.ts

@@ -0,0 +1,91 @@
+import { VariantProps } from '@payfit/unity-themes';
+export declare const funnelTopBar: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            titleWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            titleWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    titleWrapper: string[];
+    title: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            titleWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    titleWrapper: string[];
+    title: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    titleWrapper: string[];
+    title: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface FunnelTopBarProps extends VariantProps<typeof funnelTopBar> {
+    /** The title text to display in the funnel top bar */
+    title: string;
+    /** Label for the back button. */
+    backButtonLabel: string;
+    /** Callback function to be called when the back button is pressed */
+    onBackButtonPress: () => void;
+    /** Optional actions slot to display in the top bar */
+    actions?: React.ReactNode;
+    /** Optional flag to show or hide the progress indicator. Defaults to false */
+    showProgress?: boolean;
+    /** The current progress in the funnel */
+    progressValue?: number;
+    /** Custom progress announcement for screen readers. */
+    progressAnnouncement?: string;
+    /** current task description */
+    currentTaskDescription?: string;
+}
+/**
+ * The `FunnelTopBar` component provides the header navigation for funnel layouts with back button, title, and optional progress indicator.
+ * It creates a responsive top bar that displays the funnel title, navigation controls, and progress status with proper accessibility attributes.
+ * You can control the progress display and customize the back button behavior to guide users through multi-step processes.
+ * @param {FunnelTopBarProps} props - The props for the `FunnelTopBar` component
+ * @example
+ * ```tsx
+ * import { FunnelTopBar } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelTopBar
+ *       title="Setup Process"
+ *       backButtonLabel="Back"
+ *       onBackButtonPress={handleBack}
+ *       showProgress={true}
+ *       progressValue={75}
+ *       progressAnnouncement="2 out of 3 tasks completed"
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically adapts back button display based on screen size
+ * - Provides live progress announcements for screen readers
+ * - Supports optional global actions in the top bar
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
+ * @see {@link FunnelTopBarProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funneltopbar--docs unity-components.payfit.io}
+ */
+declare const FunnelTopBar: import('react').ForwardRefExoticComponent<FunnelTopBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FunnelTopBar };

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.js

@@ -0,0 +1,125 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as x, useMemo as I } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { useIntl as w } from "react-intl";
+import { useBreakpointListener as M } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as P } from "../../button/Button.js";
+import { IconButton as T } from "../../icon-button/IconButton.js";
+import { useFunnelLayoutContext as B } from "../FunnelLayout.context.js";
+import { FunnelProgressBar as F } from "./FunnelProgressBar.js";
+const A = N({
+  slots: {
+    base: ["uy:bg-surface-neutral uy:shadow-raising"],
+    titleWrapper: [
+      "uy:px-200 uy:py-150 uy:md:px-500",
+      "uy:grid uy:grid-cols-[minmax(var(--uy-spacing-500),max-content)_1fr_minmax(var(--uy-spacing-500),max-content)] uy:items-center"
+    ],
+    title: [
+      "uy:text-content-neutral uy:typography-body-strong uy:sm:typography-h4 uy:text-center"
+    ]
+  }
+}), L = x(
+  ({
+    actions: r,
+    backButtonLabel: i,
+    currentTaskDescription: s,
+    onBackButtonPress: l,
+    progressAnnouncement: u,
+    progressValue: t,
+    showProgress: c = !0,
+    title: m,
+    ...p
+  }, y) => {
+    const a = w(), { ids: n } = B(), { base: f, titleWrapper: g, title: h } = A(), v = M(), b = !["xs", "sm"].includes(v), d = I(
+      () => ({
+        navigationDescription: a.formatMessage({
+          id: "unity:layout:funnel:top-bar:navigation-desc",
+          defaultMessage: "Process navigation"
+        }),
+        progressAnnouncement: u ?? a.formatMessage(
+          {
+            id: "unity:layout:funnel:top-bar:progress-announcement",
+            defaultMessage: t !== void 0 ? `Process is ${t}% complete` : "Progress status unavailable"
+          },
+          {
+            progress: t
+          }
+        )
+      }),
+      [a, u, t]
+    );
+    return /* @__PURE__ */ o(
+      "header",
+      {
+        ref: y,
+        id: n.topbarId,
+        className: f(),
+        role: "banner",
+        tabIndex: -1,
+        "aria-labelledby": n.funnelTitleId,
+        "aria-describedby": n.funnelStatusId,
+        "data-dd-privacy": "allow",
+        ...p,
+        children: [
+          /* @__PURE__ */ o(
+            "nav",
+            {
+              className: g(),
+              "aria-label": d.navigationDescription,
+              children: [
+                b ? /* @__PURE__ */ e(
+                  P,
+                  {
+                    variant: "ghost",
+                    color: "neutral",
+                    prefixIcon: "ArrowLeftOutlined",
+                    onPress: l,
+                    children: i
+                  }
+                ) : /* @__PURE__ */ e(
+                  T,
+                  {
+                    variant: "ghost",
+                    color: "neutral",
+                    icon: "ArrowLeftOutlined",
+                    label: i,
+                    onClick: l
+                  }
+                ),
+                /* @__PURE__ */ o("h1", { className: h(), id: n.funnelTitleId, children: [
+                  m,
+                  s && /* @__PURE__ */ e("span", { className: "uy:sr-only", children: s })
+                ] }),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    "aria-hidden": !r,
+                    role: r ? "group" : "presentation",
+                    children: r
+                  }
+                )
+              ]
+            }
+          ),
+          c && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(F, { value: t ?? 0 }) }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              id: n.funnelStatusId,
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "uy:sr-only",
+              children: d.progressAnnouncement
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+L.displayName = "FunnelTopBar";
+export {
+  L as FunnelTopBar,
+  A as funnelTopBar
+};

package/dist/esm/components/grid/Grid.d.ts

@@ -0,0 +1,54 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { grid } from './Grid.variants.js';
+export type GridContainerVariantProps = VariantProps<typeof grid>;
+type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
+export interface GridProps {
+    /** Render the grid container as a specific HTML element */
+    asElement?: ElementType;
+    /** Create an inline grid container instead of a block-level container */
+    inline?: GridContainerVariantProps['inline'];
+    /** Set the number of columns in the grid. Use 6 for small grids or 12 for larger ones */
+    cols?: GridContainerVariantProps['cols'];
+    /** Set the grid template rows. Use any valid syntax from CSS' grid-template-rows property */
+    rows?: string;
+    /** Set the grid template areas. Use any valid syntax from CSS' grid-template-areas property */
+    areas?: string;
+    /** Control how grid items flow. Use 'row', 'col', 'dense', 'row-dense', or 'col-dense' */
+    flow?: GridContainerVariantProps['flow'];
+    /** Align grid items along the inline axis within their cells. Use 'start', 'center', 'end', or 'stretch' */
+    justifyItems?: GridContainerVariantProps['justifyItems'];
+    /** Align grid items along the block axis within their cells. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
+    alignItems?: GridContainerVariantProps['alignItems'];
+    /** Add custom classes to the grid container */
+    className?: string;
+    /** The content to be laid out using CSS Grid */
+    children?: React.ReactNode;
+}
+/**
+ * The Grid component provides a powerful and intuitive way to create grid layouts using CSS Grid.
+ * Use it to create responsive grid layouts with precise control over item placement and alignment.
+ *
+ * Key features:
+ * - Create 6 or 12 column grids with the `cols` prop
+ * - Control item flow with the `flow` prop
+ * - Align items with `justifyItems` and `alignItems` props
+ * - Create inline grids with the `inline` prop
+ *
+ * Use GridItem components inside Grid to control individual item behavior.
+ * @example
+ * ```tsx
+ * // Create a basic 12-column grid
+ * <Grid cols={12}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Grid>
+ *
+ * // Create a grid with items aligned to center
+ * <Grid justifyItems="center" alignItems="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: import('react').ForwardRefExoticComponent<GridProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof GridProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/grid/Grid.js

@@ -0,0 +1,38 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { grid as f } from "./Grid.variants.js";
+const g = N(
+  ({
+    asElement: r = "div",
+    className: e,
+    children: a,
+    inline: t,
+    cols: m,
+    flow: o,
+    justifyItems: l,
+    alignItems: i,
+    rows: s,
+    areas: d,
+    ...c
+  }, p) => {
+    const u = {
+      "--uy-grid-template-rows": s,
+      gridTemplateAreas: d
+    }, n = f({
+      inline: t,
+      cols: m,
+      flow: o,
+      justifyItems: l,
+      alignItems: i,
+      className: [
+        s ? "uy:grid-rows-(--uy-grid-template-rows)" : "",
+        e
+      ]
+    });
+    return /* @__PURE__ */ y(r, { ref: p, className: n, style: u, ...c, children: a });
+  }
+);
+g.displayName = "Grid";
+export {
+  g as Grid
+};