@ogcio/design-system-react 1.32.0 → 1.33.0

package/dist/button/helpers.d.ts

@@ -1,3 +1,4 @@
+import { IconButtonProps } from '../icon-button/icon-button.js';
 import { ButtonAppearance, ButtonVariant, ButtonSize } from './types.js';
 export declare const getVariantAppearanceClass: ({ disabled, variant, appearance, }: {
     disabled?: boolean;
@@ -5,7 +6,7 @@ export declare const getVariantAppearanceClass: ({ disabled, variant, appearance
     appearance?: ButtonAppearance;
 }) => string | undefined;
 export declare const getSizeClass: (size?: ButtonSize) => "gi-btn-small" | "gi-btn-large" | "gi-btn-regular";
-export declare const getButtonIconSizeClass: (size?: ButtonSize) => "gi-icon-btn-small" | "gi-icon-btn-large" | "gi-icon-btn-extra-large" | "gi-icon-btn-regular";
+export declare const getButtonIconSizeClass: (size?: IconButtonProps["size"]) => "gi-icon-btn-small" | "gi-icon-btn-large" | "gi-icon-btn-extra-large" | "gi-icon-btn-regular";
 export declare const isButtonDisabled: ({ disabled, variant, appearance, }: {
     disabled?: boolean;
     variant?: ButtonVariant;

package/dist/button/types.d.ts

@@ -1,13 +1,30 @@
+import { Props as GiButtonProps } from '../atoms/Button.js';
+import * as React from 'react';
 export declare const ButtonVariants: readonly ["primary", "secondary", "flat"];
 export type ButtonVariant = (typeof ButtonVariants)[number];
 export type ButtonAppearance = 'default' | 'dark' | 'light';
-export type ButtonSize = 'medium' | 'small' | 'large' | 'extraLarge';
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: ButtonVariant;
-    appearance?: ButtonAppearance;
-    size?: ButtonSize;
-    form?: string;
-    value?: string;
-    className?: string;
+export type ButtonSize = 'medium' | 'small' | 'large';
+export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-checked' | 'aria-pressed' | 'aria-expanded' | 'aria-controls' | 'aria-haspopup' | 'aria-busy'> & GiButtonProps & {
+    /** @deprecated Use dataTestId instead */
     dataTestid?: string;
+    /** @deprecated Use dataTestId instead */
+    'data-testid'?: string;
+    /** @deprecated Use ariaLabel instead */
+    'aria-label'?: string;
+    /** @deprecated Use ariaLabelledBy instead */
+    'aria-labelledby'?: string;
+    /** @deprecated Use ariaDescribedBy instead */
+    'aria-describedby'?: string;
+    /** @deprecated Use ariaChecked instead */
+    'aria-checked'?: boolean | 'true' | 'false' | 'mixed';
+    /** @deprecated Use ariaPressed instead */
+    'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
+    /** @deprecated Use ariaExpanded instead */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** @deprecated Use ariaControls instead */
+    'aria-controls'?: string;
+    /** @deprecated Use ariaHasPopup instead */
+    'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** @deprecated Use ariaBusy instead */
+    'aria-busy'?: boolean | 'true' | 'false';
 };

package/dist/button-group/button-group.js

@@ -1,95 +1,93 @@
 "use client";
-import { jsx as x } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { createContext as G, useState as V, useEffect as k, useContext as w } from "react";
-import { Button as S } from "../button/button.js";
+import S from "../atoms/Button.js";
 import { cn as g } from "../cn.js";
 import { useDomId as j } from "../hooks/use-dom-id.js";
-const I = G(
+const y = G(
   void 0
 ), D = ({
-  value: r,
+  value: o,
   children: s,
   role: d,
   "aria-checked": e,
-  "aria-label": a,
-  ...t
+  "aria-label": n
 }) => {
-  const c = w(I);
-  if (!c)
+  const t = w(y);
+  if (!t)
     throw new Error("ButtonGroupItem must be used within a ButtonGroup");
   const {
-    selectedValue: n,
-    setSelectedValue: l,
-    size: u,
-    onChange: o,
+    selectedValue: a,
+    setSelectedValue: u,
+    size: l,
+    onChange: r,
     groupId: m,
     appearance: p
-  } = c, i = n === r, b = () => {
-    l(r), o == null || o(r);
-  }, f = `${m}-${r}`;
-  return /* @__PURE__ */ x(
+  } = t, i = a === o, c = () => {
+    u(o), r == null || r(o);
+  }, b = `${m}-${o}`;
+  return /* @__PURE__ */ f(
     S,
     {
       variant: i ? "primary" : "secondary",
-      size: u,
+      size: l,
       appearance: p,
-      onClick: b,
-      id: f,
+      onClick: c,
+      id: b,
       role: d || "radio",
-      "aria-checked": e === void 0 ? i : e,
-      "aria-label": a,
+      ariaChecked: e === void 0 ? i : e,
+      ariaLabel: n,
       type: "button",
-      ...t,
       children: s
     }
   );
 }, N = ({
-  name: r,
+  name: o,
   size: s = "medium",
   appearance: d = "dark",
   onChange: e,
-  defaultValue: a,
+  defaultValue: n,
   value: t,
-  children: c,
-  role: n,
+  children: a,
+  role: u,
   "aria-labelledby": l,
-  "aria-describedby": u,
-  className: o,
-  ...m
+  "aria-describedby": r,
+  className: m,
+  ...p
 }) => {
-  const [p, i] = V(
-    a
-  ), b = t === void 0 ? p : t;
+  const [i, c] = V(
+    n
+  ), b = t === void 0 ? i : t;
   k(() => {
-    t !== void 0 && i(t);
+    t !== void 0 && c(t);
   }, [t]);
-  const f = (y) => {
-    t === void 0 && i(y), e == null || e(y);
+  const I = (x) => {
+    t === void 0 && c(x), e == null || e(x);
   }, B = j();
-  return /* @__PURE__ */ x(
-    I.Provider,
+  return /* @__PURE__ */ f(
+    y.Provider,
     {
       value: {
         selectedValue: b,
-        setSelectedValue: f,
-        name: r,
+        setSelectedValue: I,
+        name: o,
         size: s,
         onChange: e,
         groupId: B,
         appearance: d,
-        ...m
+        ...p
       },
-      children: /* @__PURE__ */ x(
+      children: /* @__PURE__ */ f(
         "div",
         {
           className: g(
             "gi-flex gi-flex-wrap gi-gap-3 [&_button]:gi-min-w-12 [&_button]:gi-justify-center",
-            o
+            m
           ),
-          role: n || "radiogroup",
+          role: u || "radiogroup",
           "aria-labelledby": l,
-          "aria-describedby": u,
-          children: c
+          "aria-describedby": r,
+          children: a
         }
       )
     }

package/dist/button-group/types.d.ts

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
-import { ButtonAppearance, ButtonSize } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 export type ButtonGroupProps = PropsWithChildren<{
     name: string;
-    size?: ButtonSize;
-    appearance?: ButtonAppearance;
+    size?: ButtonProps['size'];
+    appearance?: ButtonProps['appearance'];
     onChange?: (value: string) => void;
     defaultValue?: string;
     value?: string;
@@ -22,8 +22,8 @@ export type ButtonGroupContextType = {
     selectedValue?: string;
     setSelectedValue: (value: string) => void;
     name: string;
-    size: ButtonSize;
-    appearance?: ButtonAppearance;
+    size: ButtonProps['size'];
+    appearance?: ButtonProps['appearance'];
     onChange?: (value: string) => void;
     groupId: string;
 };

package/dist/card/card-legacy.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Button as k } from "../button/button.js";
+import k from "../atoms/Button.js";
 import { translate as c } from "../i18n/utility.js";
 import { Link as u } from "../link/link.js";
 import { CardNext as b, CardMedia as L, CardContainer as T, CardHeader as V, CardTitle as $, CardSubtitle as j, CardTag as A, CardDescription as B, CardAction as H } from "./card-next.js";

package/dist/card/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { IconProps } from '../icon/icon.js';
 import { LinkProps } from '../link/link.js';
 import { TagProps } from '../tag/tag.js';

package/dist/combo-box/dropdown-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import { useState as u, useId as j, useEffect as q } from "react";
-import { Button as B } from "../button/button.js";
+import B from "../atoms/Button.js";
 import { cn as x } from "../cn.js";
 import { translate as N } from "../i18n/utility.js";
 import { Icon as D } from "../icon/icon.js";

package/dist/cookie-banner/cookie-banner.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { LinkProps } from '../link/link.js';
 export type CookieBannerProps = {
     showConsent: boolean;

package/dist/data-table/data-table-header.js

@@ -1,7 +1,7 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import { useMemo as A, Children as L, isValidElement as O } from "react";
 import { c as P } from "../index-CB-zPpNk.js";
-import { Button as w } from "../button/button.js";
+import w from "../atoms/Button.js";
 import { Chip as S } from "../chip/chip.js";
 import { cn as n } from "../cn.js";
 import { translate as x } from "../i18n/utility.js";

package/dist/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
 import { Fragment, ReactElement } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { ModalProps, ModalWrapperProps } from '../modal/types.js';
 type DrawerChildren = Array<ReactElement<typeof DrawerBody | typeof DrawerBody>> | ReactElement<typeof Fragment>;
 export type DrawerPosition = 'left' | 'right' | 'bottom';

package/dist/drawer/drawer.js

@@ -3,7 +3,7 @@ import { jsx as a, jsxs as x, Fragment as C } from "react/jsx-runtime";
 import { useState as D, cloneElement as O } from "react";
 import { cn as l } from "../cn.js";
 import { ModalBody as u, ModalFooter as j, ModalWrapper as v } from "../modal/modal.js";
-const h = ({
+const T = ({
   children: o,
   className: e,
   ...r
@@ -15,29 +15,29 @@ const h = ({
     ...r,
     children: o
   }
-), k = ({
+), h = ({
   children: o,
   triggerButton: e,
   startsOpen: r,
-  closeButtonLabel: p,
+  closeButtonLabel: i,
   position: t = "right",
   className: f
 }) => {
   const [d, s] = D(!!r), m = () => s(!0), w = () => s(!1), b = O(e, {
-    "data-testid": "drawer-trigger-button-container",
+    dataTestId: "drawer-trigger-button-container",
     onClick: (y) => {
-      var c, i;
-      const n = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (i = e == null ? void 0 : e.props) == null ? void 0 : i.onClick : void 0;
+      var c, p;
+      const n = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (p = e == null ? void 0 : e.props) == null ? void 0 : p.onClick : void 0;
       n && n(y), m();
     }
   });
   return /* @__PURE__ */ x(C, { children: [
     b,
     /* @__PURE__ */ a(
-      h,
+      T,
       {
         children: o,
-        closeButtonLabel: p,
+        closeButtonLabel: i,
         position: t,
         className: f,
         isOpen: d,
@@ -46,12 +46,12 @@ const h = ({
     )
   ] });
 };
-Object.defineProperty(k, "componentType", {
+Object.defineProperty(h, "componentType", {
   value: "Drawer",
   writable: !1,
   enumerable: !1
 });
-const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
+const k = ({ children: o, className: e }) => /* @__PURE__ */ a(
   u,
   {
     includeModalClass: !1,
@@ -62,24 +62,24 @@ const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
     children: o
   }
 );
-Object.defineProperty(F, "componentType", {
+Object.defineProperty(k, "componentType", {
   value: "DrawerBody",
   writable: !1,
   enumerable: !1
 });
-const M = ({
+const F = ({
   children: o,
   className: e,
   stacked: r
 }) => /* @__PURE__ */ a(j, { stacked: r, className: l("gi-drawer-footer", e), children: o });
-Object.defineProperty(M, "componentType", {
+Object.defineProperty(F, "componentType", {
   value: "DrawerFooter",
   writable: !1,
   enumerable: !1
 });
 export {
-  k as Drawer,
-  F as DrawerBody,
-  M as DrawerFooter,
-  h as DrawerWrapper
+  h as Drawer,
+  k as DrawerBody,
+  F as DrawerFooter,
+  T as DrawerWrapper
 };

package/dist/error-text/error-text.js

@@ -1,40 +1,41 @@
-import { jsx as a } from "react/jsx-runtime";
-import { c as m } from "../index-CB-zPpNk.js";
-const d = {
+import { jsx as m } from "react/jsx-runtime";
+import { c as s } from "../index-CB-zPpNk.js";
+const l = {
   Small: "sm",
   Medium: "md",
   Large: "lg"
-}, l = m({
-  base: "gi-error-text",
-  variants: {
-    size: {
-      sm: "gi-error-text-sm",
-      md: "gi-error-text-md",
-      lg: "gi-error-text-lg"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), x = ({
-  text: r,
+}, d = ({
+  text: t,
   className: e,
-  size: t = d.Medium,
+  size: r = l.Medium,
   dataTestid: i,
-  children: o,
-  ...s
-}) => /* @__PURE__ */ a(
+  children: a,
+  ...o
+}) => /* @__PURE__ */ m(
   "div",
   {
     role: "alert",
-    className: l({ size: t, className: e }),
+    className: n({ size: r, className: e }),
     "data-testid": i,
-    ...s,
-    children: o ?? r
+    ...o,
+    children: a ?? t
   }
 );
-x.displayName = "ErrorText";
+d.displayName = "ErrorText";
+const n = s({
+  base: "gi-font-normal gi-text-color-text-intent-error-default",
+  variants: {
+    size: {
+      sm: "gi-text-sm",
+      md: "gi-text-md",
+      lg: "gi-text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 export {
-  d as ErrorSize,
-  x as ErrorText
+  l as ErrorSize,
+  d as ErrorText
 };

package/dist/forms/form-field/form-field.js

@@ -1,19 +1,19 @@
 "use client";
-import { jsx as l, jsxs as m, Fragment as x } from "react/jsx-runtime";
+import { jsx as l, jsxs as d, Fragment as x } from "react/jsx-runtime";
 import { S as p } from "../../index-D_wwt4P0.js";
-import { createContext as N, useContext as v, Children as C } from "react";
-import { cn as d } from "../../cn.js";
+import { createContext as v, useContext as N, Children as C } from "react";
+import { cn as s } from "../../cn.js";
 import { ErrorText as L } from "../../error-text/error-text.js";
 import { HintText as E } from "../../hint-text/hint-text.js";
 import { Label as H, styles as P } from "../../label/label.js";
 import { getSpecialComponentType as F, isSpecialComponent as w } from "../../utils/utilities.js";
-const f = N(null);
+const f = v(null);
 function b(e) {
-  v(f) || console.error(`[${e}] must be used within a <FormField>.`);
+  N(f) || console.error(`[${e}] must be used within a <FormField>.`);
 }
 const U = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
   "[FormField] Using legacy props. Please migrate to the new composable API."
-), /* @__PURE__ */ l(f.Provider, { value: !0, children: /* @__PURE__ */ m(y, { ...e, children: [
+), /* @__PURE__ */ l(f.Provider, { value: !0, children: /* @__PURE__ */ d(y, { ...e, children: [
   e.label && /* @__PURE__ */ l(u, { ...e.label }),
   e.hint && /* @__PURE__ */ l(h, { ...e.hint }),
   e.error && /* @__PURE__ */ l(g, { ...e.error }),
@@ -25,31 +25,31 @@ const U = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
 }) => {
   const r = C.toArray(e), n = r.find(
     (t) => F(t) === "FormFieldLabel"
-  ), c = r.find(
+  ), m = r.find(
     (t) => F(t) === "FormFieldHint"
   ), a = r.find(
     (t) => F(t) === "FormFieldError"
-  ), s = r.filter(
+  ), c = r.filter(
     (t) => !w(t, [
       "FormFieldLabel",
       "FormFieldHint",
       "FormFieldError"
     ])
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ d(
     "fieldset",
     {
-      className: d({ "gi-error-state": !!a }, i),
+      className: s({ "gi-error-state": !!a }, i),
       ...o,
       children: [
-        /* @__PURE__ */ m("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
-          /* @__PURE__ */ m("div", { children: [
+        /* @__PURE__ */ d("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+          /* @__PURE__ */ d("div", { children: [
             n,
-            c
+            m
           ] }),
           a
         ] }),
-        /* @__PURE__ */ l(p, { children: s })
+        /* @__PURE__ */ l(p, { children: c })
       ]
     }
   );
@@ -59,32 +59,31 @@ const U = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
   size: o,
   htmlFor: r,
   className: n,
-  secondaryLabel: c,
+  secondaryLabel: m,
   ...a
 }) => {
   b("FormFieldLabel");
-  const s = /* @__PURE__ */ m(x, { children: [
+  const c = /* @__PURE__ */ d(x, { children: [
     i ?? e,
-    c ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: c }) : null
+    m ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: m }) : null
   ] });
   return r ? /* @__PURE__ */ l(
     H,
     {
       size: o,
       htmlFor: r,
-      className: d("gi-font-bold", n),
+      className: s("gi-font-bold", n),
       ...a,
-      children: s
+      children: c
     }
   ) : /* @__PURE__ */ l(
     "legend",
     {
-      className: P({
-        size: o,
-        className: d("gi-font-bold", n)
+      className: P({ size: o }).base({
+        className: s("gi-font-bold", n)
       }),
       ...a,
-      children: s
+      children: c
     }
   );
 };
@@ -94,7 +93,7 @@ Object.defineProperty(u, "componentType", {
   enumerable: !1
 });
 u.displayName = "FormFieldLabel";
-const h = ({ children: e, text: i, size: o, className: r }) => (b("FormFieldHint"), /* @__PURE__ */ l(E, { text: i, size: o, className: d("gi-mb-1", r), children: e }));
+const h = ({ children: e, text: i, size: o, className: r }) => (b("FormFieldHint"), /* @__PURE__ */ l(E, { text: i, size: o, className: r, children: e }));
 Object.defineProperty(h, "componentType", {
   value: "FormFieldHint",
   writable: !1,
@@ -112,7 +111,7 @@ const g = ({
   {
     text: i,
     size: o,
-    className: d("gi-mb-1", r),
+    className: s("gi-mb-1", r),
     ...n,
     children: e
   }

package/dist/header/components/header-search.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import c from "../../Heading.js";
-import { Button as h } from "../../button/button.js";
+import h from "../../atoms/Button.js";
 import { translate as a } from "../../i18n/utility.js";
 import { IconButton as d } from "../../icon-button/icon-button.js";
 import { InputText as m } from "../../input-text/input-text.js";
@@ -35,7 +35,7 @@ function b({
           /* @__PURE__ */ e("div", { className: "gi-ml-1 gi-flex-none gi-hidden md:gi-block", children: /* @__PURE__ */ e(
             h,
             {
-              "aria-label": a("header.submitSearch", {
+              ariaLabel: a("header.submitSearch", {
                 defaultValue: "Submit Search"
               }),
               children: a("header.search", { defaultValue: "Search" })

package/dist/hint-text/hint-text.js

@@ -1,30 +1,36 @@
-import { jsx as n } from "react/jsx-runtime";
-import { c as a } from "../index-CB-zPpNk.js";
-const d = {
+import { jsx as a } from "react/jsx-runtime";
+import { c as o } from "../index-CB-zPpNk.js";
+const n = {
   Small: "sm",
   Medium: "md",
   Large: "lg"
-}, l = a({
-  base: "gi-hint-text",
+}, r = ({
+  text: t,
+  children: e,
+  className: i,
+  size: m = n.Medium,
+  ...s
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: l({ size: m, className: i }),
+    "data-testid": "hint-text",
+    ...s,
+    children: e ?? t
+  }
+);
+r.displayName = "HintText";
+const l = o({
+  base: "gi-font-normal gi-text-color-text-system-neutral-muted gi-stroke-color-text-system-neutral-muted gi-mb-0",
   variants: {
     size: {
-      sm: "gi-hint-text-sm",
-      md: "gi-hint-text-md",
-      lg: "gi-hint-text-lg"
+      sm: "gi-text-sm",
+      md: "gi-text-md",
+      lg: "gi-text-lg"
     }
-  },
-  defaultVariants: {
-    size: "md"
   }
-}), r = ({
-  text: t,
-  children: i,
-  className: e,
-  size: m = d.Medium,
-  ...s
-}) => /* @__PURE__ */ n("div", { className: l({ size: m, className: e }), ...s, children: i ?? t });
-r.displayName = "HintText";
+});
 export {
-  d as HintSize,
+  n as HintSize,
   r as HintText
 };

package/dist/icon-button/icon-button.d.ts

@@ -1,10 +1,8 @@
 import { ButtonProps } from '../button/types.js';
 import { IconProps } from '../icon/icon.js';
-export type IconButtonProps = Omit<ButtonProps, 'children'> & {
+export type IconButtonProps = Omit<ButtonProps, 'children' | 'size'> & {
     icon: Omit<IconProps, 'size'>;
     className?: string;
+    size?: 'medium' | 'small' | 'large' | 'extraLarge';
 };
-export declare const IconButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "children"> & {
-    icon: Omit<IconProps, "size">;
-    className?: string;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { type BreadcrumbLinkProps, type BreadcrumbProps, } from './breadcrumbs/t
 export { ButtonGroup, ButtonGroupItem } from './button-group/button-group.js';
 export * from './button-group/types.js';
 export { Button } from './button/button.js';
-export { type ButtonProps } from './button/types.js';
+export type { ButtonProps } from './button/types';
 export { CardAction, CardContainer, CardDescription, CardHeader, CardMedia, CardSubtitle, CardTag, CardTitle, } from './card/card-next.js';
 export { Card } from './card/card.js';
 export type { CardActionProps, CardContainerProps, CardDescriptionProps, CardHeaderProps, CardMediaProps, CardProps, } from './card/types.js';