@aglyn/shared-ui-jsx 1.0.0-beta.263 → 1.0.0-beta.266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/shared-ui-jsx",
-  "version": "1.0.0-beta.263",
+  "version": "1.0.0-beta.266",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,10 +25,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/shared-data-mdi": "1.0.0-beta.263",
-    "@aglyn/shared-ui-theme": "1.0.0-beta.263",
-    "@aglyn/shared-util-tools": "1.0.0-beta.263",
-    "@aglyn/shared-util-vendor": "1.0.0-beta.263",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.266",
+    "@aglyn/shared-ui-theme": "1.0.0-beta.266",
+    "@aglyn/shared-util-tools": "1.0.0-beta.266",
+    "@aglyn/shared-util-vendor": "1.0.0-beta.266",
     "@mdi/js": "^7.4.47",
     "@swc/helpers": "0.5.23",
     "change-case": "^5.4.4",

package/src/lib/components/option-card-grid.component.d.ts

@@ -14,6 +14,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A picture across the top of an {@link OptionCard} (AGL-3898): a real
+ * example of the choice, at a fixed size so the grid does not shift while it
+ * loads, and loaded lazily, since a grid of them is mostly below the fold.
+ */
+export interface OptionCardImage {
+    src: string;
+    /** What the picture shows, for a reader who cannot see it. */
+    alt: string;
+    width: number;
+    height: number;
+}
 /** One choice in an {@link OptionCardGrid}. */
 export interface OptionCard<T extends string = string> {
     id: T;
@@ -21,6 +33,8 @@ export interface OptionCard<T extends string = string> {
     description?: string;
     /** An SVG path, such as an MDI icon's. */
     icon?: string;
+    /** A picture of the choice, drawn above its title. */
+    image?: OptionCardImage;
 }
 export interface OptionCardGridProps<T extends string = string> {
     /** What the group is, for assistive technology. */
@@ -35,12 +49,15 @@ export interface OptionCardGridProps<T extends string = string> {
         sm?: number;
         md?: number;
     };
+    /** `data-*` attributes for the grid's root, such as a page's own marker for where clicks land. */
+    [data: `data-${string}`]: string | undefined;
 }
 /**
  * A grid of cards to pick one from (AGL-3660): a radio group drawn as cards,
- * each with an icon, a title and a line under it. The selected card carries
- * the primary color and a check; the arrow keys move between cards and pick,
- * as a radio group's do, and only the picked card is in the tab order.
+ * each with an icon or a picture (AGL-3898), a title and a line under it. The
+ * selected card carries the primary color, and a picture card a check over
+ * its picture; the arrow keys move between cards and pick, as a radio group's
+ * do, and only the picked card is in the tab order.
  */
-export declare function OptionCardGrid<T extends string = string>({ label, options, value, onChange, columns, }: OptionCardGridProps<T>): import("react").JSX.Element;
+export declare function OptionCardGrid<T extends string = string>({ label, options, value, onChange, columns, ...rest }: OptionCardGridProps<T>): import("react").JSX.Element;
 export default OptionCardGrid;

package/src/lib/components/option-card-grid.component.js

@@ -1,3 +1,5 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @license
@@ -14,20 +16,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { Box, Card, CardActionArea, Stack, Typography } from "@mui/material";
+ */ import { mdiCheckCircle } from "@aglyn/shared-data-mdi";
+import { Box, Card, CardActionArea, Stack, Typography } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import { useRef } from "react";
 import { MdiIcon } from "./mdi-icon/mdi-icon.js";
 /**
  * A grid of cards to pick one from (AGL-3660): a radio group drawn as cards,
- * each with an icon, a title and a line under it. The selected card carries
- * the primary color and a check; the arrow keys move between cards and pick,
- * as a radio group's do, and only the picked card is in the tab order.
- */ export function OptionCardGrid({ label, options, value, onChange, columns = {
-    xs: 1,
-    sm: 2,
-    md: 3
-} }) {
+ * each with an icon or a picture (AGL-3898), a title and a line under it. The
+ * selected card carries the primary color, and a picture card a check over
+ * its picture; the arrow keys move between cards and pick, as a radio group's
+ * do, and only the picked card is in the tab order.
+ */ export function OptionCardGrid(_0) {
+    let { label, options, value, onChange, columns = {
+        xs: 1,
+        sm: 2,
+        md: 3
+    } } = _0, rest = _object_without_properties_loose(_0, [
+        "label",
+        "options",
+        "value",
+        "onChange",
+        "columns"
+    ]);
     var _columns_xs;
     const refs = useRef([]);
     const selectedIndex = options.findIndex((option)=>option.id === value);
@@ -42,9 +53,10 @@ import { MdiIcon } from "./mdi-icon/mdi-icon.js";
         onChange(options[next].id);
     };
     const template = (count)=>count ? `repeat(${count}, minmax(0, 1fr))` : undefined;
-    return /*#__PURE__*/ _jsx(Box, {
+    return /*#__PURE__*/ _jsx(Box, _extends({
         role: "radiogroup",
-        "aria-label": label,
+        "aria-label": label
+    }, rest, {
         sx: {
             display: 'grid',
             gap: 1.5,
@@ -63,7 +75,7 @@ import { MdiIcon } from "./mdi-icon/mdi-icon.js";
                         borderColor: selected ? 'primary.main' : 'divider',
                         bgcolor: selected ? alpha(theme.palette.primary.main, 0.08) : 'transparent'
                     }),
-                children: /*#__PURE__*/ _jsx(CardActionArea, {
+                children: /*#__PURE__*/ _jsxs(CardActionArea, {
                     ref: (node)=>{
                         refs.current[index] = node;
                     },
@@ -74,65 +86,117 @@ import { MdiIcon } from "./mdi-icon/mdi-icon.js";
                     onClick: ()=>onChange(option.id),
                     onKeyDown: (event)=>onKeyDown(event, index),
                     sx: {
-                        p: 2,
+                        p: option.image ? 0 : 2,
                         height: '100%',
                         minHeight: 44,
                         display: 'flex',
-                        alignItems: 'flex-start'
+                        flexDirection: option.image ? 'column' : 'row',
+                        alignItems: option.image ? 'stretch' : 'flex-start',
+                        justifyContent: 'flex-start'
                     },
-                    children: /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        spacing: 1.5,
-                        sx: {
-                            alignItems: 'flex-start',
-                            width: '100%'
-                        },
-                        children: [
-                            option.icon && /*#__PURE__*/ _jsx(Box, {
-                                sx: {
-                                    color: selected ? 'primary.main' : 'text.secondary',
-                                    display: 'flex',
-                                    pt: 0.25
-                                },
-                                "aria-hidden": true,
-                                children: /*#__PURE__*/ _jsx(MdiIcon, {
-                                    path: option.icon,
+                    children: [
+                        option.image && /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                position: 'relative',
+                                width: '100%'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    component: "img",
+                                    src: option.image.src,
+                                    alt: option.image.alt,
+                                    width: option.image.width,
+                                    height: option.image.height,
+                                    loading: "lazy",
+                                    decoding: "async",
                                     sx: {
-                                        fontSize: 22
+                                        display: 'block',
+                                        width: '100%',
+                                        height: 'auto',
+                                        aspectRatio: `${option.image.width} / ${option.image.height}`,
+                                        objectFit: 'cover',
+                                        objectPosition: 'top',
+                                        borderBottom: 1,
+                                        borderColor: 'divider',
+                                        bgcolor: 'action.hover'
                                     }
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs(Box, {
-                                sx: {
-                                    flex: 1,
-                                    minWidth: 0
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "subtitle2",
-                                        component: "span",
+                                }),
+                                selected && /*#__PURE__*/ _jsx(Box, {
+                                    "aria-hidden": true,
+                                    sx: {
+                                        position: 'absolute',
+                                        top: 8,
+                                        right: 8,
+                                        display: 'flex',
+                                        borderRadius: '50%',
+                                        bgcolor: 'background.paper',
+                                        color: 'primary.main',
+                                        boxShadow: 2
+                                    },
+                                    children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                        path: mdiCheckCircle.path,
                                         sx: {
-                                            display: 'block'
-                                        },
-                                        children: option.title
-                                    }),
-                                    option.description && /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "body2",
-                                        color: "text.secondary",
-                                        component: "span",
+                                            fontSize: 24
+                                        }
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1.5,
+                            sx: {
+                                alignItems: 'flex-start',
+                                width: '100%',
+                                p: option.image ? 1.5 : 0
+                            },
+                            children: [
+                                option.icon && /*#__PURE__*/ _jsx(Box, {
+                                    sx: {
+                                        color: selected ? 'primary.main' : 'text.secondary',
+                                        display: 'flex',
+                                        pt: 0.25
+                                    },
+                                    "aria-hidden": true,
+                                    children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                        path: option.icon,
                                         sx: {
-                                            display: 'block'
-                                        },
-                                        children: option.description
+                                            fontSize: 22
+                                        }
                                     })
-                                ]
-                            })
-                        ]
-                    })
+                                }),
+                                /*#__PURE__*/ _jsxs(Box, {
+                                    sx: {
+                                        flex: 1,
+                                        minWidth: 0
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "subtitle2",
+                                            component: "span",
+                                            sx: {
+                                                display: 'block'
+                                            },
+                                            children: option.title
+                                        }),
+                                        option.description && /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            color: "text.secondary",
+                                            component: "span",
+                                            sx: {
+                                                display: 'block'
+                                            },
+                                            children: option.description
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
                 })
             }, option.id);
         })
-    });
+    }));
 }
 export default OptionCardGrid;
 

package/src/lib/components/option-card-grid.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/option-card-grid.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Box, Card, CardActionArea, Stack, Typography } from '@mui/material'\nimport { alpha, type Theme } from '@mui/material/styles'\nimport { useRef, type KeyboardEvent } from 'react'\nimport { MdiIcon } from './mdi-icon/mdi-icon'\n\n/** One choice in an {@link OptionCardGrid}. */\nexport interface OptionCard<T extends string = string> {\n  id: T\n  title: string\n  description?: string\n  /** An SVG path, such as an MDI icon's. */\n  icon?: string\n}\n\nexport interface OptionCardGridProps<T extends string = string> {\n  /** What the group is, for assistive technology. */\n  label: string\n  options: readonly OptionCard<T>[]\n  /** The selected option, or `null` for none. */\n  value: T | null\n  onChange: (value: T) => void\n  /** Columns at each breakpoint. */\n  columns?: { xs?: number; sm?: number; md?: number }\n}\n\n/**\n * A grid of cards to pick one from (AGL-3660): a radio group drawn as cards,\n * each with an icon, a title and a line under it. The selected card carries\n * the primary color and a check; the arrow keys move between cards and pick,\n * as a radio group's do, and only the picked card is in the tab order.\n */\nexport function OptionCardGrid<T extends string = string>({\n  label,\n  options,\n  value,\n  onChange,\n  columns = { xs: 1, sm: 2, md: 3 },\n}: OptionCardGridProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([])\n  const selectedIndex = options.findIndex((option) => option.id === value)\n  const focusable = selectedIndex === -1 ? 0 : selectedIndex\n\n  const onKeyDown = (event: KeyboardEvent, index: number) => {\n    const step =\n      event.key === 'ArrowRight' || event.key === 'ArrowDown'\n        ? 1\n        : event.key === 'ArrowLeft' || event.key === 'ArrowUp'\n          ? -1\n          : 0\n    if (!step) return\n    event.preventDefault()\n    const next = (index + step + options.length) % options.length\n    refs.current[next]?.focus()\n    onChange(options[next].id)\n  }\n\n  const template = (count?: number) => (count ? `repeat(${count}, minmax(0, 1fr))` : undefined)\n  return (\n    <Box\n      role=\"radiogroup\"\n      aria-label={label}\n      sx={{\n        display: 'grid',\n        gap: 1.5,\n        gridTemplateColumns: {\n          xs: template(columns.xs ?? 1),\n          sm: template(columns.sm),\n          md: template(columns.md),\n        },\n      }}\n    >\n      {options.map((option, index) => {\n        const selected = option.id === value\n        return (\n          <Card\n            key={option.id}\n            variant=\"outlined\"\n            sx={(theme: Theme) => ({\n              borderRadius: 2,\n              borderColor: selected ? 'primary.main' : 'divider',\n              bgcolor: selected ? alpha(theme.palette.primary.main, 0.08) : 'transparent',\n            })}\n          >\n            <CardActionArea\n              ref={(node: HTMLButtonElement | null) => {\n                refs.current[index] = node\n              }}\n              role=\"radio\"\n              aria-checked={selected}\n              aria-label={option.description ? `${option.title}: ${option.description}` : option.title}\n              tabIndex={index === focusable ? 0 : -1}\n              onClick={() => onChange(option.id)}\n              onKeyDown={(event) => onKeyDown(event, index)}\n              sx={{ p: 2, height: '100%', minHeight: 44, display: 'flex', alignItems: 'flex-start' }}\n            >\n              <Stack direction=\"row\" spacing={1.5} sx={{ alignItems: 'flex-start', width: '100%' }}>\n                {option.icon && (\n                  <Box sx={{ color: selected ? 'primary.main' : 'text.secondary', display: 'flex', pt: 0.25 }} aria-hidden>\n                    <MdiIcon path={option.icon} sx={{ fontSize: 22 }} />\n                  </Box>\n                )}\n                <Box sx={{ flex: 1, minWidth: 0 }}>\n                  <Typography variant=\"subtitle2\" component=\"span\" sx={{ display: 'block' }}>\n                    {option.title}\n                  </Typography>\n                  {option.description && (\n                    <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={{ display: 'block' }}>\n                      {option.description}\n                    </Typography>\n                  )}\n                </Box>\n              </Stack>\n            </CardActionArea>\n          </Card>\n        )\n      })}\n    </Box>\n  )\n}\n\nexport default OptionCardGrid\n"],"names":["Box","Card","CardActionArea","Stack","Typography","alpha","useRef","MdiIcon","OptionCardGrid","label","options","value","onChange","columns","xs","sm","md","refs","selectedIndex","findIndex","option","id","focusable","onKeyDown","event","index","step","key","preventDefault","next","length","current","focus","template","count","undefined","role","aria-label","sx","display","gap","gridTemplateColumns","map","selected","variant","theme","borderRadius","borderColor","bgcolor","palette","primary","main","ref","node","aria-checked","description","title","tabIndex","onClick","p","height","minHeight","alignItems","direction","spacing","width","icon","color","pt","aria-hidden","path","fontSize","flex","minWidth","component"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/option-card-grid.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { mdiCheckCircle } from '@aglyn/shared-data-mdi'\nimport { Box, Card, CardActionArea, Stack, Typography } from '@mui/material'\nimport { alpha, type Theme } from '@mui/material/styles'\nimport { useRef, type KeyboardEvent } from 'react'\nimport { MdiIcon } from './mdi-icon/mdi-icon'\n\n/**\n * A picture across the top of an {@link OptionCard} (AGL-3898): a real\n * example of the choice, at a fixed size so the grid does not shift while it\n * loads, and loaded lazily, since a grid of them is mostly below the fold.\n */\nexport interface OptionCardImage {\n  src: string\n  /** What the picture shows, for a reader who cannot see it. */\n  alt: string\n  width: number\n  height: number\n}\n\n/** One choice in an {@link OptionCardGrid}. */\nexport interface OptionCard<T extends string = string> {\n  id: T\n  title: string\n  description?: string\n  /** An SVG path, such as an MDI icon's. */\n  icon?: string\n  /** A picture of the choice, drawn above its title. */\n  image?: OptionCardImage\n}\n\nexport interface OptionCardGridProps<T extends string = string> {\n  /** What the group is, for assistive technology. */\n  label: string\n  options: readonly OptionCard<T>[]\n  /** The selected option, or `null` for none. */\n  value: T | null\n  onChange: (value: T) => void\n  /** Columns at each breakpoint. */\n  columns?: { xs?: number; sm?: number; md?: number }\n  /** `data-*` attributes for the grid's root, such as a page's own marker for where clicks land. */\n  [data: `data-${string}`]: string | undefined\n}\n\n/**\n * A grid of cards to pick one from (AGL-3660): a radio group drawn as cards,\n * each with an icon or a picture (AGL-3898), a title and a line under it. The\n * selected card carries the primary color, and a picture card a check over\n * its picture; the arrow keys move between cards and pick, as a radio group's\n * do, and only the picked card is in the tab order.\n */\nexport function OptionCardGrid<T extends string = string>({\n  label,\n  options,\n  value,\n  onChange,\n  columns = { xs: 1, sm: 2, md: 3 },\n  ...rest\n}: OptionCardGridProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([])\n  const selectedIndex = options.findIndex((option) => option.id === value)\n  const focusable = selectedIndex === -1 ? 0 : selectedIndex\n\n  const onKeyDown = (event: KeyboardEvent, index: number) => {\n    const step =\n      event.key === 'ArrowRight' || event.key === 'ArrowDown'\n        ? 1\n        : event.key === 'ArrowLeft' || event.key === 'ArrowUp'\n          ? -1\n          : 0\n    if (!step) return\n    event.preventDefault()\n    const next = (index + step + options.length) % options.length\n    refs.current[next]?.focus()\n    onChange(options[next].id)\n  }\n\n  const template = (count?: number) => (count ? `repeat(${count}, minmax(0, 1fr))` : undefined)\n  return (\n    <Box\n      role=\"radiogroup\"\n      aria-label={label}\n      {...rest}\n      sx={{\n        display: 'grid',\n        gap: 1.5,\n        gridTemplateColumns: {\n          xs: template(columns.xs ?? 1),\n          sm: template(columns.sm),\n          md: template(columns.md),\n        },\n      }}\n    >\n      {options.map((option, index) => {\n        const selected = option.id === value\n        return (\n          <Card\n            key={option.id}\n            variant=\"outlined\"\n            sx={(theme: Theme) => ({\n              borderRadius: 2,\n              borderColor: selected ? 'primary.main' : 'divider',\n              bgcolor: selected ? alpha(theme.palette.primary.main, 0.08) : 'transparent',\n            })}\n          >\n            <CardActionArea\n              ref={(node: HTMLButtonElement | null) => {\n                refs.current[index] = node\n              }}\n              role=\"radio\"\n              aria-checked={selected}\n              aria-label={option.description ? `${option.title}: ${option.description}` : option.title}\n              tabIndex={index === focusable ? 0 : -1}\n              onClick={() => onChange(option.id)}\n              onKeyDown={(event) => onKeyDown(event, index)}\n              sx={{\n                p: option.image ? 0 : 2,\n                height: '100%',\n                minHeight: 44,\n                display: 'flex',\n                flexDirection: option.image ? 'column' : 'row',\n                alignItems: option.image ? 'stretch' : 'flex-start',\n                justifyContent: 'flex-start',\n              }}\n            >\n              {option.image && (\n                <Box sx={{ position: 'relative', width: '100%' }}>\n                  <Box\n                    component=\"img\"\n                    src={option.image.src}\n                    alt={option.image.alt}\n                    width={option.image.width}\n                    height={option.image.height}\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                    sx={{\n                      display: 'block',\n                      width: '100%',\n                      height: 'auto',\n                      aspectRatio: `${option.image.width} / ${option.image.height}`,\n                      objectFit: 'cover',\n                      objectPosition: 'top',\n                      borderBottom: 1,\n                      borderColor: 'divider',\n                      bgcolor: 'action.hover',\n                    }}\n                  />\n                  {selected && (\n                    <Box\n                      aria-hidden\n                      sx={{\n                        position: 'absolute',\n                        top: 8,\n                        right: 8,\n                        display: 'flex',\n                        borderRadius: '50%',\n                        bgcolor: 'background.paper',\n                        color: 'primary.main',\n                        boxShadow: 2,\n                      }}\n                    >\n                      <MdiIcon path={mdiCheckCircle.path} sx={{ fontSize: 24 }} />\n                    </Box>\n                  )}\n                </Box>\n              )}\n              <Stack direction=\"row\" spacing={1.5} sx={{ alignItems: 'flex-start', width: '100%', p: option.image ? 1.5 : 0 }}>\n                {option.icon && (\n                  <Box sx={{ color: selected ? 'primary.main' : 'text.secondary', display: 'flex', pt: 0.25 }} aria-hidden>\n                    <MdiIcon path={option.icon} sx={{ fontSize: 22 }} />\n                  </Box>\n                )}\n                <Box sx={{ flex: 1, minWidth: 0 }}>\n                  <Typography variant=\"subtitle2\" component=\"span\" sx={{ display: 'block' }}>\n                    {option.title}\n                  </Typography>\n                  {option.description && (\n                    <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={{ display: 'block' }}>\n                      {option.description}\n                    </Typography>\n                  )}\n                </Box>\n              </Stack>\n            </CardActionArea>\n          </Card>\n        )\n      })}\n    </Box>\n  )\n}\n\nexport default OptionCardGrid\n"],"names":["mdiCheckCircle","Box","Card","CardActionArea","Stack","Typography","alpha","useRef","MdiIcon","OptionCardGrid","label","options","value","onChange","columns","xs","sm","md","rest","refs","selectedIndex","findIndex","option","id","focusable","onKeyDown","event","index","step","key","preventDefault","next","length","current","focus","template","count","undefined","role","aria-label","sx","display","gap","gridTemplateColumns","map","selected","variant","theme","borderRadius","borderColor","bgcolor","palette","primary","main","ref","node","aria-checked","description","title","tabIndex","onClick","p","image","height","minHeight","flexDirection","alignItems","justifyContent","position","width","component","src","alt","loading","decoding","aspectRatio","objectFit","objectPosition","borderBottom","aria-hidden","top","right","color","boxShadow","path","fontSize","direction","spacing","icon","pt","flex","minWidth"],"mappings":"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"}