@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-Q5EQC7NL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport MuiSwitch from '@mui/material/Switch/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { switchSx } from './Switch.styles';\nimport type { SwitchFlags } from './Switch.styles';\nimport type { SwitchProps } from './Switch.types';\n\nconst StyledSwitch = styled(MuiSwitch, {\n  shouldForwardProp: (prop) =>\n    ![\n      'customVariant',\n      'customColor',\n      'customSize',\n      'glow',\n      'glass',\n      'gradient',\n      'trackWidth',\n      'trackHeight',\n      'onText',\n      'offText',\n      'loading',\n      'ripple',\n      'pulse',\n    ].includes(prop as string),\n})<SwitchFlags>(({ theme, ...flags }) => ({ ...switchSx(theme, flags) }));\n\n/**\n * A top or bottom label stacks and aligns to the start; start/end sit the label\n * beside the control and centre it.\n */\nconst StyledLabelContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['labelPosition', 'error'].includes(prop as string),\n})<{ labelPosition?: string; error?: boolean }>(({ theme, labelPosition, error }) => {\n  const stacked = labelPosition === 'top' || labelPosition === 'bottom';\n\n  return {\n    display: 'flex',\n    alignItems: stacked ? 'flex-start' : 'center',\n    flexDirection:\n      labelPosition === 'top' ? 'column' : labelPosition === 'bottom' ? 'column-reverse' : 'row',\n    gap: theme.spacing(stacked ? 1 : 2),\n    width: '100%',\n    ...(error && { '& .MuiTypography-root': { color: theme.palette.error.main } }),\n  };\n});\n\n/**\n * A plain wrapper over the styled row. Exporting the styled component itself\n * needs a @mui/system reference tsc calls unportable (TS2742).\n */\nexport const LabelContainer: React.FC<{\n  labelPosition?: string;\n  error?: boolean;\n  children: React.ReactNode;\n}> = ({ labelPosition, error, children }) => (\n  <StyledLabelContainer labelPosition={labelPosition} error={error}>\n    {children}\n  </StyledLabelContainer>\n);\n\nconst ICON_SIZES: Record<string, number> = { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 };\n\nexport interface SwitchIconProps {\n  icon: React.ReactNode;\n  /** True when this icon is the one the current state should show. */\n  shown: boolean;\n  animated: boolean;\n  size: string;\n  side: 'on' | 'off';\n}\n\n/**\n * One of the two icons overlaid on the track. The on icon slides to the left\n * edge when checked and the off icon to the right when unchecked; they are\n * mirror images, so they share this component rather than being written twice.\n */\nexport const SwitchIcon: React.FC<SwitchIconProps> = ({ icon, shown, animated, size, side }) => {\n  const isOn = side === 'on';\n  const translate = isOn ? 'translate(-50%, -50%)' : 'translate(50%, -50%)';\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        ...(isOn ? { left: shown ? 4 : '50%' } : { right: shown ? 4 : '50%' }),\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n        opacity: shown ? 1 : 0,\n        transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,\n        pointerEvents: 'none',\n        zIndex: 2,\n        color: isOn ? '#fff' : 'text.secondary',\n        fontSize: ICON_SIZES[size] ?? ICON_SIZES.md,\n      }}\n    >\n      {icon}\n    </Box>\n  );\n};\n\nexport interface SwitchControlProps extends SwitchFlags {\n  checked?: boolean;\n  onChange?: SwitchProps['onChange'];\n  onIcon?: React.ReactNode;\n  offIcon?: React.ReactNode;\n  animated: boolean;\n  size: string;\n  dataTestId?: string;\n  switchRef?: React.Ref<HTMLButtonElement>;\n  rest: Record<string, unknown>;\n}\n\n/** The control itself: the track, and the two icons that may sit over it. */\nexport const SwitchControl: React.FC<SwitchControlProps> = ({\n  checked,\n  onChange,\n  onIcon,\n  offIcon,\n  animated,\n  size,\n  dataTestId,\n  switchRef,\n  rest,\n  ...flags\n}) => {\n  const props = rest as Record<string, unknown> & {\n    disabled?: boolean;\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  };\n\n  return (\n    <Box sx={{ position: 'relative', display: 'inline-flex' }}>\n      <StyledSwitch\n        ref={switchRef}\n        {...flags}\n        checked={checked}\n        onChange={onChange}\n        disabled={Boolean(flags.loading) || props.disabled}\n        inputProps={\n          {\n            'aria-label': props['aria-label'],\n            'aria-describedby': props['aria-describedby'],\n            ...props.inputProps,\n            'data-testid': dataTestId || 'switch',\n          } as React.InputHTMLAttributes<HTMLInputElement>\n        }\n        {...props}\n      />\n\n      {onIcon && (\n        <SwitchIcon\n          icon={onIcon}\n          shown={Boolean(checked)}\n          animated={animated}\n          size={size}\n          side=\"on\"\n        />\n      )}\n      {offIcon && (\n        <SwitchIcon\n          icon={offIcon}\n          shown={!checked}\n          animated={animated}\n          size={size}\n          side=\"off\"\n        />\n      )}\n    </Box>\n  );\n};\n\nexport const SwitchHelper: React.FC<{\n  helperText?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n}> = ({ helperText, error, dataTestId }) =>\n  helperText ? (\n    <FormHelperText\n      error={error}\n      sx={{ mt: 1 }}\n      data-testid={dataTestId ? `${dataTestId}-helper` : 'switch-helper'}\n    >\n      {helperText}\n    </FormHelperText>\n  ) : null;\n\nexport const SwitchLabel: React.FC<{\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n}> = ({ label, description, error, dataTestId }) => (\n  <Box sx={{ flex: 1 }}>\n    <Typography\n      variant=\"body2\"\n      fontWeight={500}\n      color={error ? 'error.main' : 'text.primary'}\n      data-testid={dataTestId ? `${dataTestId}-label` : 'switch-label'}\n    >\n      {label}\n    </Typography>\n    {description && (\n      <Typography\n        variant=\"caption\"\n        color={error ? 'error.main' : 'text.secondary'}\n        sx={{ display: 'block', mt: 0.5 }}\n      >\n        {description}\n      </Typography>\n    )}\n  </Box>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-Q5GXVDXL.js

@@ -0,0 +1,225 @@
+import {
+  RAIL_GAP_PX
+} from "./chunk-T4JGNZAR.js";
+import {
+  DescriptionItem
+} from "./chunk-TCAB2ERD.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DataViews/base-list-card-slots.tsx
+import { Fragment } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var META_BREAK = 520;
+var STACK_BREAK = 360;
+var TABULAR = { fontVariantNumeric: "tabular-nums" };
+var CLAMP = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function ListCardCaption({
+  title,
+  subtitle,
+  href,
+  target,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(default2, { "data-slot": "caption", sx: { minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(Text, { variant: "heading", size: "sm", weight: "bold", as: "p", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        ...href ? { component: "a", href, target } : { component: "span" },
+        "data-testid": testId,
+        sx: {
+          display: "block",
+          lineHeight: 1.2,
+          fontSize: "0.9rem",
+          color: "inherit",
+          textDecoration: "none",
+          ...CLAMP,
+          ...href ? {
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              // Under the checkbox, drag grip, actions and menu, which
+              // all raise themselves to 1.
+              zIndex: 0
+            },
+            "&:hover": { textDecoration: "underline" }
+          } : {}
+        },
+        children: title
+      }
+    ) }),
+    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", ...CLAMP }, children: subtitle }) })
+  ] });
+}
+function MetaRule() {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      "aria-hidden": true,
+      sx: {
+        flex: "0 0 auto",
+        color: "text.disabled",
+        opacity: 0.5,
+        userSelect: "none",
+        fontSize: "0.875rem",
+        // A cancelled row strikes the whole meta cluster, and a struck `|` is a
+        // dagger. The rule is punctuation, not data — nothing to void.
+        textDecoration: "none"
+      },
+      children: "|"
+    }
+  );
+}
+function ListCardMeta({
+  meta,
+  metaSlot,
+  trailingRule
+}) {
+  const items = meta ?? [];
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-slot": "meta",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-evenly",
+        // A FLOOR, not the spacing itself: `space-evenly` supplies the rest, and
+        // this is only what keeps a rail with no room to spare from running the
+        // date straight into the rule.
+        gap: 1,
+        whiteSpace: "nowrap",
+        ...TABULAR,
+        // Rung 1 of the ladder.
+        [`@container (max-width: ${META_BREAK}px)`]: { display: "none" }
+      },
+      children: [
+        items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(MetaRule, {}),
+          /* @__PURE__ */ jsx(
+            default2,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: 0,
+                // Sized to the pair, so the gaps either side of it are free space
+                // that `space-evenly` can equalise.
+                flex: "0 0 auto"
+              },
+              children: /* @__PURE__ */ jsx(DescriptionItem, { orientation: "vertical", align: "center", ...item })
+            }
+          )
+        ] }, `${item.label}-${index}`)),
+        metaSlot,
+        trailingRule && items.length > 0 && /* @__PURE__ */ jsx(MetaRule, {})
+      ]
+    }
+  );
+}
+var VALUE_FLUSH = {
+  marginLeft: `-${RAIL_GAP_PX}px`,
+  [`@container (max-width: ${META_BREAK}px)`]: { marginLeft: 0 }
+};
+function ListCardValue({ value }) {
+  return /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "medium", as: "span", children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      sx: { fontSize: "0.875rem", whiteSpace: "nowrap", ...TABULAR },
+      children: value
+    }
+  ) });
+}
+function ListCardActions({
+  actions,
+  alwaysVisible,
+  menu,
+  testId
+}) {
+  if (actions == null && menu == null) return null;
+  return (
+    // z-index 1: above the stretched link, so these stay clickable.
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        "data-slot": "actions",
+        sx: { display: "flex", alignItems: "center", gap: 0.5, position: "relative", zIndex: 1 },
+        children: [
+          actions && /* @__PURE__ */ jsx(
+            default2,
+            {
+              "data-testid": testId("actions"),
+              onClick: (event) => event.stopPropagation(),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                ...alwaysVisible ? {} : {
+                  visibility: "hidden",
+                  ".MuiPaper-root:hover &, .MuiPaper-root:focus-within &": {
+                    visibility: "visible"
+                  }
+                }
+              },
+              children: actions
+            }
+          ),
+          menu && /* @__PURE__ */ jsx(default2, { "data-testid": testId("menu"), onClick: (event) => event.stopPropagation(), children: menu })
+        ]
+      }
+    )
+  );
+}
+function ListCardTail({
+  value,
+  separated,
+  actions,
+  actionsAlwaysVisible,
+  menu,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-slot": "value",
+        sx: {
+          textAlign: "right",
+          ...separated && value != null ? VALUE_FLUSH : {}
+        },
+        "data-testid": testId("value"),
+        children: value != null && /* @__PURE__ */ jsx(ListCardValue, { value })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ListCardActions,
+      {
+        actions,
+        alwaysVisible: actionsAlwaysVisible,
+        menu,
+        testId
+      }
+    )
+  ] });
+}
+
+export {
+  META_BREAK,
+  STACK_BREAK,
+  ListCardCaption,
+  ListCardMeta,
+  ListCardActions,
+  ListCardTail
+};
+//# sourceMappingURL=chunk-Q5GXVDXL.js.map

package/dist/chunk-Q5GXVDXL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-slots.tsx"],"sourcesContent":["\"use client\";\n\nimport { Fragment, type ReactNode } from \"react\";\n\nimport { DescriptionItem, type DescriptionItemProps } from \"../DescriptionItem\";\nimport { RAIL_GAP_PX } from \"./list-card-rails\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\n/**\n * WHAT SITS IN EACH RAIL.\n *\n * Split from `base-list-card` at the size gate: that module is the shell, the\n * rails and the states; this is the content of each column.\n */\n\n/** Below this the row drops its middle columns. */\nexport const META_BREAK = 520;\n/** …and below this it leaves the shared rails and goes two-line. */\nexport const STACK_BREAK = 360;\n\n/** Money and dates line up only if their digits are the same width. */\nconst TABULAR = { fontVariantNumeric: \"tabular-nums\" } as const;\n\nconst CLAMP = {\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n} as const;\n\n/**\n * Title over subtitle — and, when the row navigates, the anchor that covers it.\n *\n * The link is a real `<a>` stretched by `::after` over the whole card rather\n * than a click handler on a `<div>`. That buys cmd-click, middle-click, \"copy\n * link address\", the status bar preview and correct tab order, and it stops the\n * buttons elsewhere in the row from being interactive elements nested inside a\n * clickable one.\n */\nexport function ListCardCaption({\n  title,\n  subtitle,\n  href,\n  target,\n  testId,\n}: {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  href?: string;\n  target?: string;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box data-slot=\"caption\" sx={{ minWidth: 0 }}>\n      {title != null && (\n        <Text variant=\"heading\" size=\"sm\" weight=\"bold\" as=\"p\">\n          <Box\n            {...(href ? { component: \"a\", href, target } : { component: \"span\" })}\n            data-testid={testId}\n            sx={{\n              display: \"block\",\n              lineHeight: 1.2,\n              fontSize: \"0.9rem\",\n              color: \"inherit\",\n              textDecoration: \"none\",\n              ...CLAMP,\n              ...(href\n                ? {\n                    \"&::after\": {\n                      content: '\"\"',\n                      position: \"absolute\",\n                      inset: 0,\n                      // Under the checkbox, drag grip, actions and menu, which\n                      // all raise themselves to 1.\n                      zIndex: 0,\n                    },\n                    \"&:hover\": { textDecoration: \"underline\" },\n                  }\n                : {}),\n            }}\n          >\n            {title}\n          </Box>\n        </Text>\n      )}\n      {subtitle != null && (\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          <Box component=\"span\" sx={{ display: \"block\", ...CLAMP }}>\n            {subtitle}\n          </Box>\n        </Text>\n      )}\n    </Box>\n  );\n}\n\n/** One rule between two columns. Shared, so every gap gets the same mark. */\nfunction MetaRule(): React.JSX.Element {\n  return (\n    <Box\n      aria-hidden\n      sx={{\n        flex: \"0 0 auto\",\n        color: \"text.disabled\",\n        opacity: 0.5,\n        userSelect: \"none\",\n        fontSize: \"0.875rem\",\n        // A cancelled row strikes the whole meta cluster, and a struck `|` is a\n        // dagger. The rule is punctuation, not data — nothing to void.\n        textDecoration: \"none\",\n      }}\n    >\n      |\n    </Box>\n  );\n}\n\n/**\n * The middle columns: stacked label-over-value pairs, separated by a rule.\n *\n * Stacked rather than side by side because `DATA 05/08/2026` inline spends the\n * horizontal room the value rail needs, and the separator is what stops two\n * adjacent pairs reading as one four-word phrase.\n *\n * EVEN GAPS, NOT EVEN BOXES. The rail takes a share of the row's spare width\n * per pair (see `metaRail`), and the obvious way to spend it — give every pair\n * an equal-width box and centre its content — puts the separator on the BOX\n * boundary, which is only the visual midpoint when both pairs are the same\n * width. They never are: `05/08/2026, 13:45` reaches almost to the edge of its\n * box while `PIX` stops well short of its own, so the rule ends up crowded\n * against the date and adrift from the method.\n *\n * So the pairs are sized to their content and the SPARE space is what gets\n * divided evenly. `space-evenly` gives every gap — including the two either\n * side of each separator — the same width, which puts each rule exactly halfway\n * between the two labels it separates, whatever they happen to say.\n */\nexport function ListCardMeta({\n  meta,\n  metaSlot,\n  trailingRule,\n}: {\n  meta?: DescriptionItemProps[];\n  metaSlot?: ReactNode;\n  /** Close the run with a rule, dividing the last pair from the value. */\n  trailingRule?: boolean;\n}): React.JSX.Element {\n  const items = meta ?? [];\n  return (\n    <Box\n      data-slot=\"meta\"\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-evenly\",\n        // A FLOOR, not the spacing itself: `space-evenly` supplies the rest, and\n        // this is only what keeps a rail with no room to spare from running the\n        // date straight into the rule.\n        gap: 1,\n        whiteSpace: \"nowrap\",\n        ...TABULAR,\n        // Rung 1 of the ladder.\n        [`@container (max-width: ${META_BREAK}px)`]: { display: \"none\" },\n      }}\n    >\n      {items.map((item, index) => (\n        <Fragment key={`${item.label}-${index}`}>\n          {/* ITS OWN ITEM, not the first child of the pair that follows it.\n              Nested inside, the rule travelled with that pair's centred content\n              and came to rest nearer one label than the other — a separator\n              visibly closer to MÉTODO than to DATA reads as belonging to it. */}\n          {index > 0 && <MetaRule />}\n          {/* Centred: a stacked pair sitting in its own column reads as one\n              unit only when the label is over the value rather than flush left\n              of a value shorter than it — `MÉTODO` above `PIX` was visibly\n              unhinged from it. Overridable per item. */}\n          <Box\n            sx={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              minWidth: 0,\n              // Sized to the pair, so the gaps either side of it are free space\n              // that `space-evenly` can equalise.\n              flex: \"0 0 auto\",\n            }}\n          >\n            <DescriptionItem orientation=\"vertical\" align=\"center\" {...item} />\n          </Box>\n        </Fragment>\n      ))}\n      {metaSlot}\n      {trailingRule && items.length > 0 && <MetaRule />}\n    </Box>\n  );\n}\n\n/**\n * The value sits flush against the meta rail, with no gap of its own.\n *\n * Its divider is now the LAST ITEM OF THE META CLUSTER, placed by the same\n * `space-evenly` that places the rules between the pairs — so it is equidistant\n * from `PIX` and from `R$ 13,90` for free, which a rule centred in the rail gap\n * could never be: the cluster's content stops well short of the rail's right\n * edge, leaving that rule 150px from the method and 12px from the money.\n *\n * Cancelling this one gap is what makes the two distances equal. Below\n * `META_BREAK` the cluster (and its rule) are gone, so the gap comes back —\n * otherwise the value would sit straight against the title.\n */\nconst VALUE_FLUSH = {\n  marginLeft: `-${RAIL_GAP_PX}px`,\n  [`@container (max-width: ${META_BREAK}px)`]: { marginLeft: 0 },\n} as const;\n\n/** The value, on its own rail, never truncated and never shunted by the chip. */\nfunction ListCardValue({ value }: { value: ReactNode }): React.JSX.Element {\n  return (\n    <Text variant=\"body\" size=\"sm\" weight=\"medium\" as=\"span\">\n      <Box\n        component=\"span\"\n        sx={{ fontSize: \"0.875rem\", whiteSpace: \"nowrap\", ...TABULAR }}\n      >\n        {value}\n      </Box>\n    </Text>\n  );\n}\n\n/**\n * The actions and the menu, at the end of the row.\n *\n * Actions are revealed on hover and `:focus-within` — always-visible buttons on\n * every row of fifty is a lot of chrome for something used on one of them.\n * `:focus-within` is what keeps them reachable by keyboard, and `visibility`\n * rather than `display` keeps their space reserved so nothing shifts.\n */\nexport function ListCardActions({\n  actions,\n  alwaysVisible,\n  menu,\n  testId,\n}: {\n  actions?: ReactNode;\n  alwaysVisible?: boolean;\n  menu?: ReactNode;\n  testId: (slot: string) => string | undefined;\n}): React.JSX.Element | null {\n  if (actions == null && menu == null) return null;\n  return (\n    // z-index 1: above the stretched link, so these stay clickable.\n    <Box\n      data-slot=\"actions\"\n      sx={{ display: \"flex\", alignItems: \"center\", gap: 0.5, position: \"relative\", zIndex: 1 }}\n    >\n      {actions && (\n        <Box\n          data-testid={testId(\"actions\")}\n          onClick={(event) => event.stopPropagation()}\n          sx={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 0.5,\n            ...(alwaysVisible\n              ? {}\n              : {\n                  visibility: \"hidden\",\n                  \".MuiPaper-root:hover &, .MuiPaper-root:focus-within &\": {\n                    visibility: \"visible\",\n                  },\n                }),\n          }}\n        >\n          {actions}\n        </Box>\n      )}\n      {menu && (\n        <Box data-testid={testId(\"menu\")} onClick={(event) => event.stopPropagation()}>\n          {menu}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/** Value and actions — separate rails, not one flex run. */\nexport function ListCardTail({\n  value,\n  separated,\n  actions,\n  actionsAlwaysVisible,\n  menu,\n  testId,\n}: {\n  value?: ReactNode;\n  /** Whether a meta cluster precedes the value and wants dividing from it. */\n  separated?: boolean;\n  actions?: ReactNode;\n  actionsAlwaysVisible?: boolean;\n  menu?: ReactNode;\n  testId: (slot: string) => string | undefined;\n}): React.JSX.Element {\n  return (\n    <>\n      <Box\n        data-slot=\"value\"\n        sx={{\n          textAlign: \"right\",\n          ...(separated && value != null ? VALUE_FLUSH : {}),\n        }}\n        data-testid={testId(\"value\")}\n      >\n        {value != null && <ListCardValue value={value} />}\n      </Box>\n      <ListCardActions\n        actions={actions}\n        alwaysVisible={actionsAlwaysVisible}\n        menu={menu}\n        testId={testId}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAEA,SAAS,gBAAgC;AAmDrC,SA0PA,YAAAA,WAvPM,KAHN;AApCG,IAAM,aAAa;AAEnB,IAAM,cAAc;AAG3B,IAAM,UAAU,EAAE,oBAAoB,eAAe;AAErD,IAAM,QAAQ;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAWO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMsB;AACpB,SACE,qBAACC,UAAA,EAAI,aAAU,WAAU,IAAI,EAAE,UAAU,EAAE,GACxC;AAAA,aAAS,QACR,oBAAC,QAAK,SAAQ,WAAU,MAAK,MAAK,QAAO,QAAO,IAAG,KACjD;AAAA,MAACA;AAAA,MAAA;AAAA,QACE,GAAI,OAAO,EAAE,WAAW,KAAK,MAAM,OAAO,IAAI,EAAE,WAAW,OAAO;AAAA,QACnE,eAAa;AAAA,QACb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,OAAO;AAAA,UACP,gBAAgB;AAAA,UAChB,GAAG;AAAA,UACH,GAAI,OACA;AAAA,YACE,YAAY;AAAA,cACV,SAAS;AAAA,cACT,UAAU;AAAA,cACV,OAAO;AAAA;AAAA;AAAA,cAGP,QAAQ;AAAA,YACV;AAAA,YACA,WAAW,EAAE,gBAAgB,YAAY;AAAA,UAC3C,IACA,CAAC;AAAA,QACP;AAAA,QAEC;AAAA;AAAA,IACH,GACF;AAAA,IAED,YAAY,QACX,oBAAC,QAAK,SAAQ,WAAU,MAAK,MAAK,OAAM,aAAY,IAAG,KACrD,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,SAAS,SAAS,GAAG,MAAM,GACpD,oBACH,GACF;AAAA,KAEJ;AAEJ;AAGA,SAAS,WAA8B;AACrC,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,IAAI;AAAA,QACF,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA;AAAA;AAAA,QAGV,gBAAgB;AAAA,MAClB;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;AAsBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAKsB;AACpB,QAAM,QAAQ,QAAQ,CAAC;AACvB,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA,QAIhB,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,GAAG;AAAA;AAAA,QAEH,CAAC,0BAA0B,UAAU,KAAK,GAAG,EAAE,SAAS,OAAO;AAAA,MACjE;AAAA,MAEC;AAAA,cAAM,IAAI,CAAC,MAAM,UAChB,qBAAC,YAKE;AAAA,kBAAQ,KAAK,oBAAC,YAAS;AAAA,UAKxB;AAAA,YAACA;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,UAAU;AAAA;AAAA;AAAA,gBAGV,MAAM;AAAA,cACR;AAAA,cAEA,8BAAC,mBAAgB,aAAY,YAAW,OAAM,UAAU,GAAG,MAAM;AAAA;AAAA,UACnE;AAAA,aAtBa,GAAG,KAAK,KAAK,IAAI,KAAK,EAuBrC,CACD;AAAA,QACA;AAAA,QACA,gBAAgB,MAAM,SAAS,KAAK,oBAAC,YAAS;AAAA;AAAA;AAAA,EACjD;AAEJ;AAeA,IAAM,cAAc;AAAA,EAClB,YAAY,IAAI,WAAW;AAAA,EAC3B,CAAC,0BAA0B,UAAU,KAAK,GAAG,EAAE,YAAY,EAAE;AAC/D;AAGA,SAAS,cAAc,EAAE,MAAM,GAA4C;AACzE,SACE,oBAAC,QAAK,SAAQ,QAAO,MAAK,MAAK,QAAO,UAAS,IAAG,QAChD;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI,EAAE,UAAU,YAAY,YAAY,UAAU,GAAG,QAAQ;AAAA,MAE5D;AAAA;AAAA,EACH,GACF;AAEJ;AAUO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK6B;AAC3B,MAAI,WAAW,QAAQ,QAAQ,KAAM,QAAO;AAC5C;AAAA;AAAA,IAEE;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,KAAK,UAAU,YAAY,QAAQ,EAAE;AAAA,QAEtF;AAAA,qBACC;AAAA,YAACA;AAAA,YAAA;AAAA,cACC,eAAa,OAAO,SAAS;AAAA,cAC7B,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,cAC1C,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,KAAK;AAAA,gBACL,GAAI,gBACA,CAAC,IACD;AAAA,kBACE,YAAY;AAAA,kBACZ,yDAAyD;AAAA,oBACvD,YAAY;AAAA,kBACd;AAAA,gBACF;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UAED,QACC,oBAACA,UAAA,EAAI,eAAa,OAAO,MAAM,GAAG,SAAS,CAAC,UAAU,MAAM,gBAAgB,GACzE,gBACH;AAAA;AAAA;AAAA,IAEJ;AAAA;AAEJ;AAGO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,SACE,qBAAAD,WAAA,EACE;AAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI;AAAA,UACF,WAAW;AAAA,UACX,GAAI,aAAa,SAAS,OAAO,cAAc,CAAC;AAAA,QAClD;AAAA,QACA,eAAa,OAAO,OAAO;AAAA,QAE1B,mBAAS,QAAQ,oBAAC,iBAAc,OAAc;AAAA;AAAA,IACjD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":["Fragment","default"]}

package/dist/chunk-Q6HJMJBH.js

@@ -0,0 +1,202 @@
+// src/components/form/Select/Select.tsx
+import FormControl from "@mui/material/FormControl/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import InputLabel from "@mui/material/InputLabel/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import MuiSelect from "@mui/material/Select/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 10px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var glowStyles = (theme) => ({
+  "& .MuiOutlinedInput-root": {
+    boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,
+    "&.Mui-focused": {
+      boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`
+    }
+  }
+});
+var pulseStyles = (theme) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "0",
+    right: "0",
+    height: "56px",
+    transform: "translateY(-50%)",
+    borderRadius: theme.spacing(0.5),
+    backgroundColor: theme.palette.primary.main,
+    opacity: 0.3,
+    animation: `${pulseAnimation} 2s infinite`,
+    pointerEvents: "none",
+    zIndex: -1
+  }
+});
+var glassVariant = (theme) => ({
+  backgroundColor: alpha(theme.palette.background.paper, 0.1),
+  backdropFilter: "blur(20px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  "& fieldset": { border: "none" },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.background.paper, 0.15),
+    borderColor: alpha(theme.palette.primary.main, 0.3)
+  },
+  "&.Mui-focused": {
+    backgroundColor: alpha(theme.palette.background.paper, 0.2),
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`
+  }
+});
+var gradientVariant = (theme) => ({
+  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
+  border: `2px solid transparent`,
+  backgroundOrigin: "border-box",
+  backgroundClip: "padding-box, border-box",
+  position: "relative",
+  "& fieldset": { border: "none" },
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: "inherit",
+    background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+    padding: "2px",
+    zIndex: -1
+  },
+  "&:hover": {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`
+  },
+  "&.Mui-focused": {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,
+    "&::before": {
+      background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`
+    }
+  }
+});
+var defaultVariant = (theme) => ({
+  "& fieldset": { borderColor: alpha(theme.palette.divider, 0.23) },
+  "&:hover fieldset": { borderColor: theme.palette.primary.main },
+  "&.Mui-focused fieldset": { borderColor: theme.palette.primary.main, borderWidth: 2 },
+  "&.Mui-error fieldset": { borderColor: theme.palette.error.main }
+});
+var variantStyles = (theme, variant) => {
+  if (variant === "glass") return glassVariant(theme);
+  if (variant === "gradient") return gradientVariant(theme);
+  return defaultVariant(theme);
+};
+var StyledFormControl = styled(FormControl, {
+  shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "glow" && prop !== "pulse"
+})(({ theme, customVariant, glow, pulse }) => ({
+  position: "relative",
+  ...glow ? glowStyles(theme) : {},
+  ...pulse ? pulseStyles(theme) : {},
+  "& .MuiOutlinedInput-root": {
+    transition: "all 0.3s ease",
+    ...variantStyles(theme, customVariant)
+  }
+}));
+function renderMenuItems(options, placeholder, dataTestId) {
+  const optionTestId = (value) => dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;
+  const items = options.map((option) => /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      value: option.value,
+      disabled: option.disabled,
+      "data-testid": optionTestId(option.value),
+      children: option.label
+    },
+    option.value
+  ));
+  if (placeholder) {
+    items.unshift(
+      /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, children: placeholder }, "__placeholder__")
+    );
+  }
+  return items;
+}
+var formControlSize = (size) => {
+  if (size === void 0) return void 0;
+  return size === "sm" ? "small" : "medium";
+};
+var Select = React.forwardRef(
+  ({
+    // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined
+    // resolves to the default variant, MUI's medium size, and no glow/pulse —
+    // keeping this render function under the complexity budget.
+    variant,
+    options,
+    label,
+    helperText,
+    fullWidth = true,
+    size,
+    error,
+    placeholder,
+    glow,
+    pulse,
+    "data-testid": dataTestId,
+    value,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const labelId = React.useId();
+    const helperTextId = React.useId();
+    const selectId = React.useId();
+    return /* @__PURE__ */ jsxs(
+      StyledFormControl,
+      {
+        fullWidth,
+        size: formControlSize(size),
+        error,
+        customVariant: variant,
+        glow,
+        pulse,
+        ref,
+        "data-testid": dataTestId,
+        children: [
+          label && /* @__PURE__ */ jsx(InputLabel, { id: labelId, htmlFor: selectId, children: label }),
+          /* @__PURE__ */ jsx(
+            MuiSelect,
+            {
+              id: selectId,
+              labelId: label ? labelId : void 0,
+              label,
+              displayEmpty: Boolean(placeholder),
+              "aria-describedby": helperText ? helperTextId : void 0,
+              "data-testid": dataTestId ? `${dataTestId}-select` : "select",
+              value: value ?? "",
+              ...props,
+              SelectDisplayProps: ariaLabel === void 0 ? void 0 : { "aria-label": ariaLabel, "aria-labelledby": void 0 },
+              children: renderMenuItems(options, placeholder, dataTestId)
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx(FormHelperText, { id: helperTextId, error, children: helperText })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+export {
+  Select
+};
+//# sourceMappingURL=chunk-Q6HJMJBH.js.map

package/dist/chunk-Q6HJMJBH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Select/Select.tsx"],"sourcesContent":["import FormControl from '@mui/material/FormControl/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport MuiSelect from '@mui/material/Select/index.js';\nimport { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { SelectProps } from './Select.types';\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 10px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Glow ring on the outlined input, keyed off the `glow` prop. */\nconst glowStyles = (theme: Theme): CSSObject => ({\n  '& .MuiOutlinedInput-root': {\n    boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,\n    '&.Mui-focused': {\n      boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`,\n    },\n  },\n});\n\n/** Pulsing halo behind the control, keyed off the `pulse` prop. */\nconst pulseStyles = (theme: Theme): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '0',\n    right: '0',\n    height: '56px',\n    transform: 'translateY(-50%)',\n    borderRadius: theme.spacing(0.5),\n    backgroundColor: theme.palette.primary.main,\n    opacity: 0.3,\n    animation: `${pulseAnimation} 2s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\n/** `glass` variant: translucent, blurred background. */\nconst glassVariant = (theme: Theme): CSSObject => ({\n  backgroundColor: alpha(theme.palette.background.paper, 0.1),\n  backdropFilter: 'blur(20px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  '& fieldset': { border: 'none' },\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.background.paper, 0.15),\n    borderColor: alpha(theme.palette.primary.main, 0.3),\n  },\n  '&.Mui-focused': {\n    backgroundColor: alpha(theme.palette.background.paper, 0.2),\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,\n  },\n});\n\n/** `gradient` variant: gradient fill with a masked gradient border. */\nconst gradientVariant = (theme: Theme): CSSObject => ({\n  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n  border: `2px solid transparent`,\n  backgroundOrigin: 'border-box',\n  backgroundClip: 'padding-box, border-box',\n  position: 'relative',\n  '& fieldset': { border: 'none' },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    borderRadius: 'inherit',\n    background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n    maskComposite: 'exclude',\n    padding: '2px',\n    zIndex: -1,\n  },\n  '&:hover': {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`,\n  },\n  '&.Mui-focused': {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,\n    '&::before': {\n      background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,\n    },\n  },\n});\n\n/** `default` variant: standard outlined borders with hover/focus/error states. */\nconst defaultVariant = (theme: Theme): CSSObject => ({\n  '& fieldset': { borderColor: alpha(theme.palette.divider, 0.23) },\n  '&:hover fieldset': { borderColor: theme.palette.primary.main },\n  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: 2 },\n  '&.Mui-error fieldset': { borderColor: theme.palette.error.main },\n});\n\n/** Pick the variant style block for the outlined input. */\nconst variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject => {\n  if (variant === 'glass') return glassVariant(theme);\n  if (variant === 'gradient') return gradientVariant(theme);\n  return defaultVariant(theme);\n};\n\nconst StyledFormControl = styled(FormControl, {\n  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'glow' && prop !== 'pulse',\n})<{\n  customVariant?: SelectProps['variant'];\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, glow, pulse }) => ({\n  position: 'relative',\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme) : {}),\n  '& .MuiOutlinedInput-root': {\n    transition: 'all 0.3s ease',\n    ...variantStyles(theme, customVariant),\n  },\n}));\n\n/**\n * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY\n * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,\n * which does not descend into Fragments — a Fragment would hide every option.\n */\nfunction renderMenuItems(\n  options: SelectProps['options'],\n  placeholder: string | undefined,\n  dataTestId: string | undefined,\n): React.ReactNode[] {\n  const optionTestId = (value: string | number): string =>\n    dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;\n  const items = options.map((option) => (\n    <MenuItem\n      key={option.value}\n      value={option.value}\n      disabled={option.disabled}\n      data-testid={optionTestId(option.value)}\n    >\n      {option.label}\n    </MenuItem>\n  ));\n  if (placeholder) {\n    items.unshift(\n      <MenuItem key=\"__placeholder__\" value=\"\" disabled>\n        {placeholder}\n      </MenuItem>,\n    );\n  }\n  return items;\n}\n\n/**\n * The house scale as a FormControl size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two. This component's scale is already narrowed to `sm | md`, so the map\n * is exact rather than lossy.\n */\nconst formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {\n  if (size === undefined) return undefined;\n  return size === 'sm' ? 'small' : 'medium';\n};\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined\n      // resolves to the default variant, MUI's medium size, and no glow/pulse —\n      // keeping this render function under the complexity budget.\n      variant,\n      options,\n      label,\n      helperText,\n      fullWidth = true,\n      size,\n      error,\n      placeholder,\n      glow,\n      pulse,\n      'data-testid': dataTestId,\n      value,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelId = React.useId();\n    const helperTextId = React.useId();\n    const selectId = React.useId();\n\n    return (\n      <StyledFormControl\n        fullWidth={fullWidth}\n        size={formControlSize(size)}\n        error={error}\n        customVariant={variant}\n        glow={glow}\n        pulse={pulse}\n        ref={ref}\n        data-testid={dataTestId}\n      >\n        {label && (\n          <InputLabel id={labelId} htmlFor={selectId}>\n            {label}\n          </InputLabel>\n        )}\n        <MuiSelect\n          id={selectId}\n          labelId={label ? labelId : undefined}\n          label={label}\n          displayEmpty={Boolean(placeholder)}\n          aria-describedby={helperText ? helperTextId : undefined}\n          data-testid={dataTestId ? `${dataTestId}-select` : 'select'}\n          value={value ?? ''}\n          {...props}\n          /*\n           * `role=\"combobox\"` sits on MUI's display DIV, not on the hidden\n           * native input that `{...props}` reaches — so an `aria-label` passed\n           * to this component never landed on the element carrying the role,\n           * and MUI's `aria-labelledby` then fell back to that div's OWN id.\n           * The control announced as its current value: a filter's field\n           * select read \"Status\" instead of \"Filtro 1 — campo\".\n           *\n           * Forwarding it here names the right element. The explicit\n           * `undefined` clears that self-referential `aria-labelledby`, which\n           * would otherwise win — a labelledby always beats a label in the\n           * accessible-name computation.\n           */\n          SelectDisplayProps={\n            ariaLabel === undefined\n              ? undefined\n              : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }\n          }\n        >\n          {renderMenuItems(options, placeholder, dataTestId)}\n        </MuiSelect>\n        {helperText && (\n          <FormHelperText id={helperTextId} error={error}>\n            {helperText}\n          </FormHelperText>\n        )}\n      </StyledFormControl>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":"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","names":[]}

package/dist/chunk-Q725MACF.js

@@ -0,0 +1,78 @@
+import {
+  thumbnailStripSx
+} from "./chunk-56SJYTIT.js";
+
+// src/components/data-display/Lightbox/LightboxThumbnails.tsx
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import Box from "@mui/material/Box/index.js";
+import { jsx } from "react/jsx-runtime";
+var THUMB_WIDTH = 60;
+var THUMB_HEIGHT = 40;
+var VideoThumbnail = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      width: "100%",
+      height: "100%",
+      background: "rgba(255, 255, 255, 0.1)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsx(PlayIcon, { sx: { color: "white", fontSize: 16 } })
+  }
+);
+var LightboxThumbnails = ({
+  items,
+  currentIndex,
+  testId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      ...thumbnailStripSx,
+      position: "absolute",
+      bottom: 16,
+      left: "50%",
+      transform: "translateX(-50%)",
+      display: "flex",
+      gap: 1,
+      maxWidth: "90vw",
+      overflowX: "auto",
+      padding: 1
+    },
+    "data-testid": testId("thumbnails"),
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        onClick: () => onSelect(index),
+        sx: {
+          width: THUMB_WIDTH,
+          height: THUMB_HEIGHT,
+          cursor: "pointer",
+          border: currentIndex === index ? "2px solid white" : "2px solid transparent",
+          borderRadius: 0.5,
+          overflow: "hidden",
+          flexShrink: 0,
+          "&:hover": { border: "2px solid rgba(255, 255, 255, 0.7)" }
+        },
+        "data-testid": testId(`thumbnail-${index}`),
+        children: item.type === "video" ? /* @__PURE__ */ jsx(VideoThumbnail, {}) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.src,
+            alt: item.alt || `Thumbnail ${index + 1}`,
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        )
+      },
+      `${item.src}-${index}`
+    ))
+  }
+);
+
+export {
+  LightboxThumbnails
+};
+//# sourceMappingURL=chunk-Q725MACF.js.map

package/dist/chunk-Q725MACF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxThumbnails.tsx"],"sourcesContent":["import PlayIcon from '@mui/icons-material/PlayArrow';\nimport Box from '@mui/material/Box/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { thumbnailStripSx } from './Lightbox.constants';\nimport type { LightboxItem } from './Lightbox.types';\n\nconst THUMB_WIDTH = 60;\nconst THUMB_HEIGHT = 40;\n\nconst VideoThumbnail: FC = () => (\n  <Box\n    sx={{\n      width: '100%',\n      height: '100%',\n      background: 'rgba(255, 255, 255, 0.1)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n    }}\n  >\n    <PlayIcon sx={{ color: 'white', fontSize: 16 }} />\n  </Box>\n);\n\nexport interface LightboxThumbnailsProps {\n  items: LightboxItem[];\n  currentIndex: number;\n  testId: (suffix: string) => string;\n  onSelect: (index: number) => void;\n}\n\nexport const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({\n  items,\n  currentIndex,\n  testId,\n  onSelect,\n}) => (\n  <Box\n    sx={{\n      ...thumbnailStripSx,\n      position: 'absolute',\n      bottom: 16,\n      left: '50%',\n      transform: 'translateX(-50%)',\n      display: 'flex',\n      gap: 1,\n      maxWidth: '90vw',\n      overflowX: 'auto',\n      padding: 1,\n    }}\n    data-testid={testId('thumbnails')}\n  >\n    {items.map((item, index) => (\n      <Box\n        key={`${item.src}-${index}`}\n        onClick={() => onSelect(index)}\n        sx={{\n          width: THUMB_WIDTH,\n          height: THUMB_HEIGHT,\n          cursor: 'pointer',\n          border: currentIndex === index ? '2px solid white' : '2px solid transparent',\n          borderRadius: 0.5,\n          overflow: 'hidden',\n          flexShrink: 0,\n          '&:hover': { border: '2px solid rgba(255, 255, 255, 0.7)' },\n        }}\n        data-testid={testId(`thumbnail-${index}`)}\n      >\n        {item.type === 'video' ? (\n          <VideoThumbnail />\n        ) : (\n          <img\n            src={item.src}\n            alt={item.alt || `Thumbnail ${index + 1}`}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n          />\n        )}\n      </Box>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;AAAA,OAAO,cAAc;AACrB,OAAO,SAAS;AAqBZ;AAdJ,IAAM,cAAc;AACpB,IAAM,eAAe;AAErB,IAAM,iBAAqB,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IAEA,8BAAC,YAAS,IAAI,EAAE,OAAO,SAAS,UAAU,GAAG,GAAG;AAAA;AAClD;AAUK,IAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,GAAG;AAAA,MACH,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,MACX,SAAS;AAAA,MACT,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,eAAa,OAAO,YAAY;AAAA,IAE/B,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,MAAM,SAAS,KAAK;AAAA,QAC7B,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ,iBAAiB,QAAQ,oBAAoB;AAAA,UACrD,cAAc;AAAA,UACd,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,WAAW,EAAE,QAAQ,qCAAqC;AAAA,QAC5D;AAAA,QACA,eAAa,OAAO,aAAa,KAAK,EAAE;AAAA,QAEvC,eAAK,SAAS,UACb,oBAAC,kBAAe,IAEhB;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,KAAK;AAAA,YACV,KAAK,KAAK,OAAO,aAAa,QAAQ,CAAC;AAAA,YACvC,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAQ;AAAA;AAAA,QAC7D;AAAA;AAAA,MArBG,GAAG,KAAK,GAAG,IAAI,KAAK;AAAA,IAuB3B,CACD;AAAA;AACH;","names":[]}

package/dist/chunk-QBJVRPTF.js

@@ -0,0 +1,55 @@
+import {
+  handleCategoryKeyDown
+} from "./chunk-GCC66ZSD.js";
+
+// src/components/form/CategorySelect/useCategoryKeyHandler.ts
+import { useCallback } from "react";
+function useCategoryKeyHandler({
+  state,
+  single,
+  allowParentSelection,
+  actions
+}) {
+  const { isExpanded, toggleExpanded } = state;
+  const expand = useCallback(
+    (id) => {
+      if (!isExpanded(id)) toggleExpanded(id);
+    },
+    [isExpanded, toggleExpanded]
+  );
+  const collapse = useCallback(
+    (id) => {
+      if (isExpanded(id)) toggleExpanded(id);
+    },
+    [isExpanded, toggleExpanded]
+  );
+  return useCallback(
+    (event) => {
+      const inSearchField = event.target?.tagName === "INPUT";
+      const editingText = inSearchField && state.query.length > 0;
+      const consumed = handleCategoryKeyDown(event.key, editingText, {
+        rows: state.rows,
+        activeIndex: state.activeIndex,
+        groups: state.visibleGroups,
+        single,
+        allowParentSelection,
+        setActiveIndex: state.setActiveIndex,
+        toggleExpanded,
+        expand,
+        collapse,
+        toggleCategory: state.toggleCategory,
+        toggleSubcategory: state.toggleSubcategory,
+        commit: actions.commit,
+        cancel: actions.cancel,
+        pick: actions.pick
+      });
+      if (consumed) event.preventDefault();
+    },
+    [state, single, allowParentSelection, toggleExpanded, expand, collapse, actions]
+  );
+}
+
+export {
+  useCategoryKeyHandler
+};
+//# sourceMappingURL=chunk-QBJVRPTF.js.map