@phillips/seldon 1.171.0 → 1.172.0

package/dist/components/Carousel/CarouselDot.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-interface Props extends ComponentProps<'button'> {
+export interface CarouselDotProps extends ComponentProps<'button'> {
     /** Whether the dot is selected */
     isSelected: boolean;
     /** Callback function when the dot is clicked */
@@ -11,5 +11,4 @@ interface Props extends ComponentProps<'button'> {
     /** Variant of the dot */
     variant?: 'sm' | 'md';
 }
-export declare const CarouselDot: ({ isSelected, onClick, scrollableContainerRef, onInViewChange, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const CarouselDot: ({ isSelected, onClick, scrollableContainerRef, onInViewChange, variant, ...props }: CarouselDotProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/CarouselKeyboardNavigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ComposedModal/ComposedModal.js

@@ -1,20 +1,20 @@
-import { jsxs as s, jsx as i, Fragment as $ } from "react/jsx-runtime";
-import C from "../../node_modules/classnames/index.js";
-import { forwardRef as g } from "react";
-import { getCommonProps as x, noOp as k } from "../../utils/index.js";
+import { jsxs as s, jsx as i, Fragment as C } from "react/jsx-runtime";
+import g from "../../node_modules/classnames/index.js";
+import { forwardRef as x } from "react";
+import { getCommonProps as k, noOp as M } from "../../utils/index.js";
 import d from "../Button/Button.js";
 import { ButtonVariants as t } from "../Button/types.js";
-import M from "../Divider/Divider.js";
-import y from "../Modal/Modal.js";
+import y from "../Divider/Divider.js";
+import j from "../Modal/Modal.js";
 import { TextVariants as n } from "../Text/types.js";
 import c from "../Text/Text.js";
-const j = g(
+const L = x(
   ({
     children: p,
     className: f,
-    overlayClassName: L,
+    overlayClassName: P,
     isOpen: h = !1,
-    onClose: v = k,
+    onClose: v = M,
     maxHeightValue: b = "60vh",
     title: N,
     footerContent: o,
@@ -22,21 +22,22 @@ const j = g(
     primaryButton: e,
     id: m,
     ...l
-  }) => {
+  }, _) => {
     const {
       className: a,
-      "data-testid": P,
-      ..._
-    } = x({ id: m, ...l }, "ComposedModal");
+      "data-testid": T,
+      ...$
+    } = k({ id: m, ...l }, "ComposedModal");
     return /* @__PURE__ */ s(
-      y,
+      j,
       {
         isOpen: h,
         onClose: v,
         ...l,
-        ..._,
-        className: C(`${a}`, f),
+        ...$,
+        className: g(`${a}`, f),
         id: m,
+        ref: _,
         children: [
           /* @__PURE__ */ i(c, { variant: n.heading3, className: `${a}__title`, children: N }),
           /* @__PURE__ */ i(
@@ -47,8 +48,8 @@ const j = g(
               children: p
             }
           ),
-          (r || e || o) && /* @__PURE__ */ s($, { children: [
-            /* @__PURE__ */ i(M, { className: `${a}__divider`, id: `${m}-divider` }),
+          (r || e || o) && /* @__PURE__ */ s(C, { children: [
+            /* @__PURE__ */ i(y, { className: `${a}__divider`, id: `${m}-divider` }),
             /* @__PURE__ */ s("div", { className: `${a}__btns-group`, children: [
               r && /* @__PURE__ */ i(d, { id: `${m}-secondary-btn`, variant: t.secondary, onClick: r.onClick, children: r.buttonLabel }),
               e && /* @__PURE__ */ i(d, { id: `${m}-primary-btn`, variant: t.primary, onClick: e.onClick, children: e.buttonLabel })
@@ -60,7 +61,7 @@ const j = g(
     );
   }
 );
-j.displayName = "ComposedModal";
+L.displayName = "ComposedModal";
 export {
-  j as default
+  L as default
 };

package/dist/components/Drawer/Drawer.d.ts

@@ -12,14 +12,33 @@ export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
      * The content of the drawer
      */
     children?: React.ReactNode;
+    /**
+     * A string to be displayed center at the top of the drawer, up with the close button.
+     * Its presence also triggers the horizontal rule below the header to be rendered.
+     */
+    headerText?: string;
+    /**
+     * Used as the accessibility label for the drawer, used for screen readers.
+     * Defaults to the headerText if that's provided, otherwise an empty string.
+     */
+    title?: string;
+    /**
+     * Used as the accessibility description for the drawer, used for screen readers.
+     * Defaults to the title if that's provided, otherwise an empty string.
+     */
+    description?: string;
     /**
      * Which side the drawer opens from: left, right, or bottom
      */
     drawerOpenSide?: 'left' | 'right' | 'bottom';
     /**
-     * Optional label for the bottom content area
+     * Older designs for left/right drawers have more padding around the content.
+     * This value is in rem, and must be an integer under 3.
+     *
+     * Default is 2 if null or undefined, or 1 if headingText is supplied. This is silly
+     * but aligns with design and allows this prop to be left out most of the time.
      */
-    bottomContentLabel?: string;
+    paddingLevel?: 0 | 1 | 2;
 }
 /**
  * ## Overview
@@ -27,5 +46,5 @@ export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
  * A component for displaying a drawer.
  *
  */
-declare const Drawer: ({ className, isOpen, onClose, children, drawerOpenSide, bottomContentLabel, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/dist/components/Drawer/Drawer.js

@@ -1,80 +1,87 @@
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-import { Root as u, Portal as N, Overlay as v, Content as $, Title as x, Description as y, Close as n } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
-import a from "../../node_modules/classnames/index.js";
-import { getCommonProps as g, noOp as w } from "../../utils/index.js";
-import { ButtonVariants as c } from "../Button/types.js";
-import m from "../Icon/Icon.js";
-import d from "../IconButton/IconButton.js";
-import k from "../Text/Text.js";
-import { TextVariants as B } from "../Text/types.js";
-const q = ({
-  className: h,
-  isOpen: p = !1,
-  onClose: r = w,
-  children: C,
-  drawerOpenSide: i = "right",
-  bottomContentLabel: f,
-  ...l
-}) => {
-  const { className: t, ..._ } = g(l, "Drawer"), s = i === "bottom";
-  return /* @__PURE__ */ o(
-    u,
-    {
-      open: p,
-      onOpenChange: (b) => {
-        b || r();
-      },
-      children: /* @__PURE__ */ e(N, { children: [
-        /* @__PURE__ */ o(
-          v,
-          {
-            onClick: r,
-            className: a(`${t}__overlay`),
-            "data-testid": "drawer-overlay"
-          }
-        ),
-        /* @__PURE__ */ e(
-          $,
-          {
-            className: a(t, h, { [`${t}--bottom`]: s }),
-            "data-side": i,
-            id: l.id,
-            ..._,
-            children: [
-              /* @__PURE__ */ o(x, {}),
-              /* @__PURE__ */ o(y, {}),
-              s ? /* @__PURE__ */ e("div", { className: `${t}__bottom-content`, children: [
-                /* @__PURE__ */ o(n, { asChild: !0, children: /* @__PURE__ */ o(
-                  d,
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import s from "../../node_modules/classnames/index.js";
+import { Root as $, Portal as w, Overlay as D, Content as b, Title as v, Description as B, Close as P } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { VisuallyHidden as n } from "../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { getCommonProps as j, noOp as k } from "../../utils/index.js";
+import H from "./DrawerHeader.js";
+import I from "../IconButton/IconButton.js";
+import { ButtonVariants as R } from "../Button/types.js";
+import V from "../Icon/Icon.js";
+const g = y(
+  ({
+    isOpen: d,
+    onClose: t = k,
+    headerText: a,
+    title: m,
+    description: f = m,
+    drawerOpenSide: e = "right",
+    paddingLevel: i,
+    className: h,
+    children: p,
+    ...l
+  }, C) => {
+    const { className: o, ...u } = j(l, "Drawer"), N = e === "bottom";
+    return i ?? (i = a ? 1 : 2), /* @__PURE__ */ r(
+      $,
+      {
+        open: d,
+        onOpenChange: (_) => {
+          _ || t();
+        },
+        children: /* @__PURE__ */ c(w, { children: [
+          /* @__PURE__ */ r(D, { onClick: t, className: `${o}__overlay`, "data-testid": "drawer-overlay" }),
+          /* @__PURE__ */ c(
+            b,
+            {
+              className: s(o, h, {
+                [`${o}--bottom`]: N
+              }),
+              "data-side": e,
+              id: l.id,
+              ref: C,
+              ...u,
+              children: [
+                /* @__PURE__ */ r(n, { asChild: !0, children: /* @__PURE__ */ r(v, { children: m }) }),
+                /* @__PURE__ */ r(n, { asChild: !0, children: /* @__PURE__ */ r(B, { children: f }) }),
+                a ? /* @__PURE__ */ r(
+                  H,
                   {
-                    onClick: r,
-                    className: a(`${t}__close--bottom`),
+                    baseClassName: o,
+                    headerText: a,
+                    onClose: t,
+                    drawerOpenSide: e
+                  }
+                ) : /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
+                  I,
+                  {
+                    onClick: t,
+                    className: s(`${o}__close`),
                     "aria-label": "Close",
                     "data-testid": "drawer-close",
-                    variant: c.tertiary,
-                    children: /* @__PURE__ */ o(m, { icon: "CloseX", color: "currentColor" })
+                    variant: R.tertiary,
+                    children: /* @__PURE__ */ r(V, { icon: "CloseX", color: "currentColor" })
                   }
                 ) }),
-                /* @__PURE__ */ o(k, { variant: B.string1, className: `${t}__bottom-content--label`, children: f })
-              ] }) : /* @__PURE__ */ o(n, { asChild: !0, children: /* @__PURE__ */ o(
-                d,
-                {
-                  onClick: r,
-                  className: a(`${t}__close`),
-                  "aria-label": "Close",
-                  "data-testid": "drawer-close",
-                  variant: c.tertiary,
-                  children: /* @__PURE__ */ o(m, { icon: "CloseX", color: "currentColor" })
-                }
-              ) }),
-              C
-            ]
-          }
-        )
-      ] })
-    }
-  );
-};
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: s(
+                      `${o}__content`,
+                      i < 3 && `${o}__content--ep${i}`
+                    ),
+                    children: p
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+g.displayName = "Drawer";
 export {
-  q as default
+  g as default
 };

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

@@ -1,7 +1,7 @@
 import { DrawerProps } from './Drawer';
 declare const meta: {
     title: string;
-    component: ({ className, isOpen, onClose, children, drawerOpenSide, bottomContentLabel, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+    component: import('react').ForwardRefExoticComponent<DrawerProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export default meta;
 export declare const Playground: {
@@ -9,6 +9,101 @@ export declare const Playground: {
     args: {
         children: string;
         isOpen: boolean;
+        headerText: string;
+        title: undefined;
+        drawerOpenSide: string;
+        paddingLevel: number;
+    };
+    argTypes: {
+        isOpen: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onClose: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        headerText: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        drawerOpenSide: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        paddingLevel: {
+            control: {
+                type: string;
+            };
+            options: (number | undefined)[];
+            description: string;
+            defaultValue: undefined;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
-    argTypes: {};
 };

package/dist/components/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { DrawerProps } from './Drawer';
+type CommonProps = ComponentProps<'div'> & {
+    baseClassName: string;
+    drawerOpenSide: DrawerProps['drawerOpenSide'];
+    onClose: () => void;
+};
+export type DrawerHeaderProps = CommonProps & {
+    headerText?: string;
+};
+declare const DrawerHeader: import('react').ForwardRefExoticComponent<Omit<DrawerHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default DrawerHeader;

package/dist/components/Drawer/DrawerHeader.js

@@ -0,0 +1,34 @@
+import { jsxs as i, Fragment as c, jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Close as d } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import f from "../IconButton/IconButton.js";
+import { ButtonVariants as h } from "../Button/types.js";
+import b from "../Icon/Icon.js";
+const n = ({ baseClassName: a, drawerOpenSide: t, onClose: l, bookendSide: e, ...s }) => {
+  const r = t === "bottom" && e === "left" || t !== "bottom" && e === "right";
+  return /* @__PURE__ */ o("div", { className: `${a}__bookend ${a}__bookend-${e}`, ...s, children: r && /* @__PURE__ */ o(d, { asChild: !0, children: /* @__PURE__ */ o(f, { onClick: l, "aria-label": "Close", "data-testid": "drawer-close", variant: h.tertiary, children: /* @__PURE__ */ o(b, { icon: "CloseX", color: "currentColor" }) }) }) });
+}, _ = m(
+  ({ baseClassName: a, headerText: t, drawerOpenSide: l, onClose: e }, s) => {
+    const r = `${a}-header`;
+    return /* @__PURE__ */ i(c, { children: [
+      /* @__PURE__ */ i("div", { className: r, children: [
+        /* @__PURE__ */ o(n, { baseClassName: r, onClose: e, drawerOpenSide: l, bookendSide: "left" }),
+        /* @__PURE__ */ o("h3", { className: `${r}__title`, children: t }),
+        /* @__PURE__ */ o(
+          n,
+          {
+            baseClassName: r,
+            onClose: e,
+            drawerOpenSide: l,
+            bookendSide: "right"
+          }
+        )
+      ] }),
+      t && /* @__PURE__ */ o("div", { className: `${r}__hr` })
+    ] });
+  }
+);
+_.displayName = "DrawerHeader";
+export {
+  _ as default
+};

package/dist/components/Drawer/DrawerHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { DropdownItem } from './types';
 import * as DropdownSelect from '@radix-ui/react-select';
 export interface DropdownProps extends Omit<DropdownSelect.SelectProps, 'defaultValue' | 'dir'>, ComponentPropsWithoutRef<'div'> {
@@ -32,5 +32,5 @@ export interface DropdownProps extends Omit<DropdownSelect.SelectProps, 'default
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-dropdown--overview)
  */
-declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.js

@@ -1,16 +1,16 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import d, { useState as C } from "react";
+import { forwardRef as p, useState as C } from "react";
 import { getCommonProps as D } from "../../utils/index.js";
 import i from "../../node_modules/classnames/index.js";
-import { Root as $, Trigger as v, Value as I, Icon as b, Portal as x, Content as R, ScrollUpButton as S, Viewport as O, ScrollDownButton as P, Item as V, ItemText as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
+import { Root as $, Trigger as v, Value as I, Icon as b, Portal as x, Content as S, ScrollUpButton as O, Viewport as P, ScrollDownButton as R, Item as V, ItemText as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
 import c from "../Icon/Icon.js";
-const y = d.forwardRef(
-  ({ options: n, value: a, onValueChange: l, label: s, className: h, id: m, disabled: _, ...f }, w) => {
-    const { className: o, ...u } = D({ id: m }, "Dropdown"), [N, g] = C(!1);
-    return /* @__PURE__ */ e("div", { className: i(o, h), id: m, ...u, ...f, children: /* @__PURE__ */ t(
+const y = p(
+  ({ options: a, value: n, onValueChange: l, label: s, className: h, id: m, disabled: _, ...w }, N) => {
+    const { className: o, ...u } = D({ id: m }, "Dropdown"), [f, g] = C(!1);
+    return /* @__PURE__ */ e("div", { className: i(o, h), id: m, ...u, ...w, children: /* @__PURE__ */ t(
       $,
       {
-        value: a,
+        value: n,
         onValueChange: (r) => {
           l(r);
         },
@@ -21,15 +21,15 @@ const y = d.forwardRef(
             {
               className: `${o}__trigger`,
               "aria-label": s,
-              ref: w,
+              ref: N,
               disabled: _,
               children: [
-                /* @__PURE__ */ e(I, { placeholder: a }),
+                /* @__PURE__ */ e(I, { placeholder: n }),
                 /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
                   c,
                   {
                     icon: "ChevronDown",
-                    className: i({ [`${o}__trigger-icon-expanded`]: N }),
+                    className: i({ [`${o}__trigger-icon-expanded`]: f }),
                     height: "1rem",
                     width: "1rem"
                   }
@@ -37,19 +37,19 @@ const y = d.forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ e(x, { children: /* @__PURE__ */ t(R, { className: `${o}__content`, position: "popper", children: [
-            /* @__PURE__ */ e(S, { className: `${o}__scroll-button__up`, children: /* @__PURE__ */ e(c, { icon: "ChevronDown" }) }),
-            /* @__PURE__ */ e(O, { className: `${o}__viewport`, children: n.map((r) => /* @__PURE__ */ e(
-              p,
+          /* @__PURE__ */ e(x, { children: /* @__PURE__ */ t(S, { className: `${o}__content`, position: "popper", children: [
+            /* @__PURE__ */ e(O, { className: `${o}__scroll-button__up`, children: /* @__PURE__ */ e(c, { icon: "ChevronDown" }) }),
+            /* @__PURE__ */ e(P, { className: `${o}__viewport`, children: a.map((r) => /* @__PURE__ */ e(
+              d,
               {
                 value: r.value,
-                disabled: r.value === a,
+                disabled: r.value === n,
                 className: o,
                 children: r.label
               },
               r.value
             )) }),
-            /* @__PURE__ */ e(P, { className: `${o}__scroll-button`, children: /* @__PURE__ */ e(c, { icon: "ChevronDown" }) })
+            /* @__PURE__ */ e(R, { className: `${o}__scroll-button`, children: /* @__PURE__ */ e(c, { icon: "ChevronDown" }) })
           ] }) })
         ]
       }
@@ -57,10 +57,10 @@ const y = d.forwardRef(
   }
 );
 y.displayName = "Dropdown";
-const p = d.forwardRef(
-  ({ children: n, className: a, ...l }, s) => /* @__PURE__ */ e(V, { className: `${a}__item`, ...l, ref: s, children: /* @__PURE__ */ e(j, { children: n }) })
+const d = p(
+  ({ children: a, className: n, ...l }, s) => /* @__PURE__ */ e(V, { className: `${n}__item`, ...l, ref: s, children: /* @__PURE__ */ e(j, { children: a }) })
 );
-p.displayName = "DropdownSelectItem";
+d.displayName = "DropdownSelectItem";
 export {
   y as default
 };

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

@@ -1,5 +1,5 @@
 import { SpacingTokens } from '../../utils';
-export interface GridProps<ElementType = HTMLElement> extends React.HTMLAttributes<ElementType> {
+export interface GridProps<GridElementType = HTMLElement> extends React.HTMLAttributes<GridElementType> {
     /**
      * A Grid must have children
      */
@@ -7,7 +7,7 @@ export interface GridProps<ElementType = HTMLElement> extends React.HTMLAttribut
     /**
      * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to 'section'.
      */
-    element?: React.ElementType<GridProps<ElementType>>;
+    element?: React.ElementType;
     /**
      * The gap between the rows in the grid.  Defaults to 'md'.
      */
@@ -26,5 +26,8 @@ export interface GridProps<ElementType = HTMLElement> extends React.HTMLAttribut
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-layouts-grid--overview)
  */
-export declare function Grid({ children, className, element: Element, columnGap, rowGap, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+type GridComponent = <T extends HTMLElement = HTMLElement>(props: GridProps<T> & {
+    ref?: React.Ref<T>;
+}) => React.ReactElement | null;
+declare const Grid: GridComponent;
 export default Grid;

package/dist/components/Grid/Grid.js

@@ -1,27 +1,29 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import l from "../../node_modules/classnames/index.js";
-import { getCommonProps as d, SpacingTokens as e } from "../../utils/index.js";
+import { getCommonProps as p, SpacingTokens as m } from "../../utils/index.js";
 import { determineGridClassName as f } from "./utils.js";
-function C({
+import { forwardRef as G } from "react";
+const N = ({
   children: o,
-  className: s,
-  element: r = "section",
-  columnGap: a = e.md,
-  rowGap: t = e.lg,
-  ...m
-}) {
-  const { className: n, ...i } = d(m, "Grid");
-  return /* @__PURE__ */ c(
-    r,
+  className: r,
+  element: s = "section",
+  columnGap: a = m.md,
+  rowGap: t = m.lg,
+  ...e
+}, n) => {
+  const { className: i, ...c } = p(e, "Grid");
+  return /* @__PURE__ */ d(
+    s,
     {
-      ...i,
-      className: l(f(n, a, t), s),
-      ...m,
+      ...c,
+      className: l(f(i, a, t), r),
+      ...e,
+      ref: n,
       children: o
     }
   );
-}
+}, g = G(N);
+g.displayName = "Grid";
 export {
-  C as Grid,
-  C as default
+  g as default
 };