@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-5W4BLTDI.js

@@ -0,0 +1,266 @@
+import {
+  breadcrumbLinkStyles
+} from "./chunk-6CTPDNNX.js";
+import {
+  sheen,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx
+import Home from "@mui/icons-material/Home";
+import MoreHoriz from "@mui/icons-material/MoreHoriz";
+import Box from "@mui/material/Box/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Link from "@mui/material/Link/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BreadcrumbLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "active" && prop !== "visualStyle"
+})(
+  ({ theme, size, active, visualStyle }) => ({
+    ...breadcrumbLinkStyles({ theme, size, active, visualStyle })
+  })
+);
+var BreadcrumbText = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "visualStyle"
+})(({ theme, size, visualStyle }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  fontSize: rem(theme, size === "sm" ? 14 : size === "lg" ? 18 : 16),
+  fontWeight: 600,
+  color: theme.palette.primary.main,
+  padding: theme.spacing(0.5, 0.75),
+  borderRadius: theme.spacing(0.75),
+  position: "relative",
+  ...visualStyle === "glass" && {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    backdropFilter: "blur(4px)",
+    border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+  },
+  "& .breadcrumb-icon": {
+    color: theme.palette.primary.main
+  },
+  // Mobile responsiveness
+  [theme.breakpoints.down("sm")]: {
+    fontSize: rem(theme, size === "lg" ? 16 : size === "sm" ? 12 : 14),
+    padding: theme.spacing(0.375, 0.5)
+  }
+}));
+var CollapsedItemsPopover = ({ open, items, dataTestId, onSelect }) => /* @__PURE__ */ jsx(Fade, { in: open, children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      background: (theme) => theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.95) : sheen(theme, 0.95),
+      backdropFilter: "blur(10px)",
+      borderRadius: 1,
+      boxShadow: 3,
+      p: 1,
+      minWidth: 150
+    },
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "a",
+        href: item.href || "#",
+        onClick: (e) => {
+          onSelect();
+          item.onClick?.(e);
+        },
+        sx: {
+          display: "block",
+          px: 2,
+          py: 1,
+          color: "text.secondary",
+          textDecoration: "none",
+          borderRadius: 0.5,
+          transition: "all 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover",
+            color: "primary.main"
+          }
+        },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-item-${index}` : `breadcrumbs-collapsed-item-${index}`,
+        children: item.label
+      },
+      index
+    ))
+  }
+) });
+var CollapsedMenu = ({
+  items,
+  size,
+  visualStyle,
+  copy,
+  dataTestId
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: copy.showMore, arrow: true, children: /* @__PURE__ */ jsx(
+      BreadcrumbLink,
+      {
+        onClick: handleClick,
+        size,
+        visualStyle,
+        sx: { cursor: "pointer" },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-menu` : "breadcrumbs-collapsed-menu",
+        children: /* @__PURE__ */ jsx(MoreHoriz, { className: "breadcrumb-icon" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          mt: 1,
+          display: open ? "block" : "none",
+          zIndex: 1e3
+        },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-menu-items` : "breadcrumbs-collapsed-menu-items",
+        children: /* @__PURE__ */ jsx(
+          CollapsedItemsPopover,
+          {
+            open,
+            items,
+            size,
+            visualStyle,
+            dataTestId,
+            onSelect: handleClose
+          }
+        )
+      }
+    )
+  ] });
+};
+var crumbIcon = ({
+  item,
+  isFirst,
+  showHomeIcon,
+  iconSize
+}) => {
+  if (isFirst && showHomeIcon && !item.icon) {
+    return /* @__PURE__ */ jsx(Home, { className: "breadcrumb-icon", fontSize: iconSize });
+  }
+  if (!item.icon) return null;
+  return /* @__PURE__ */ jsx(Box, { component: "span", className: "breadcrumb-icon", sx: { display: "flex", alignItems: "center" }, children: item.icon });
+};
+var EllipsisCrumb = ({
+  label,
+  copy,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Tooltip, { title: copy.moreItems, arrow: true, children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      px: 1,
+      color: "text.disabled",
+      cursor: "default",
+      userSelect: "none"
+    },
+    "data-testid": dataTestId ? `${dataTestId}-ellipsis` : "breadcrumbs-ellipsis",
+    children: label
+  }
+) });
+var makeTestId = (dataTestId) => (suffix, own) => own ?? (dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`);
+var ClickableCrumb = ({ item, index, icon, size, variant, isActive, testId }) => /* @__PURE__ */ jsx(Tooltip, { title: item.tooltip || item.label, arrow: true, disableHoverListener: !item.tooltip, children: /* @__PURE__ */ jsxs(
+  BreadcrumbLink,
+  {
+    href: item.href || "#",
+    onClick: item.onClick,
+    size,
+    visualStyle: variant,
+    active: isActive,
+    underline: "none",
+    "aria-label": item.ariaLabel || item.label,
+    "data-testid": testId(`link-${index}`, item.dataTestId),
+    children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ]
+  }
+) });
+var BreadcrumbEntry = ({
+  item,
+  index,
+  itemCount,
+  collapsedItems,
+  collapseBehavior,
+  separator,
+  showHomeIcon,
+  iconSize,
+  size,
+  variant,
+  copy,
+  dataTestId
+}) => {
+  const testId = makeTestId(dataTestId);
+  const isLast = index === itemCount - 1;
+  const isActive = item.active || isLast && !item.isEllipsis;
+  const isCollapsePoint = index === 1 && collapsedItems.length > 0 && collapseBehavior === "menu";
+  if (isCollapsePoint) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CollapsedMenu,
+        {
+          copy,
+          items: collapsedItems,
+          size,
+          visualStyle: variant,
+          dataTestId
+        }
+      ),
+      separator
+    ] });
+  }
+  if (item.isEllipsis) {
+    return /* @__PURE__ */ jsx(EllipsisCrumb, { copy, label: item.label, dataTestId });
+  }
+  const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });
+  if (isActive) {
+    return /* @__PURE__ */ jsxs(
+      BreadcrumbText,
+      {
+        size,
+        visualStyle: variant,
+        "aria-current": "page",
+        "data-testid": testId(`item-${index}`, item.dataTestId),
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ClickableCrumb,
+    {
+      item,
+      index,
+      icon,
+      size,
+      variant,
+      isActive,
+      testId
+    }
+  );
+};
+
+export {
+  BreadcrumbEntry
+};
+//# sourceMappingURL=chunk-5W4BLTDI.js.map

package/dist/chunk-62UAI62O.js

@@ -0,0 +1,157 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  fieldHeight,
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-search.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SEARCH_DEBOUNCE_MS = 350;
+function boxWidth(theme, fill) {
+  return { flex: 1, minWidth: fill ? 0 : rem(theme, 200), maxWidth: fill ? "none" : rem(theme, 384) };
+}
+function useKeywordDraft(value, onChange) {
+  const [draft, setDraft] = useState(value);
+  const prev = useRef(value);
+  if (prev.current !== value) {
+    prev.current = value;
+    if (draft !== value) setDraft(value);
+  }
+  const commit = useRef(onChange);
+  useEffect(() => {
+    commit.current = onChange;
+  });
+  useEffect(() => {
+    if (draft === value) return void 0;
+    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [draft, value]);
+  const commitNow = useCallback(
+    (typed) => {
+      setDraft(typed);
+      if (typed !== value) commit.current(typed);
+    },
+    [value]
+  );
+  return { draft, setDraft, commitNow };
+}
+function InlineKeyword({
+  value,
+  onChange,
+  testId,
+  autoFocus,
+  onEscape,
+  fill = false
+}) {
+  const copy = useDataViewsCopy();
+  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      value: draft,
+      autoFocus,
+      onChange: (event) => setDraft(event.target.value),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (draft === "") onEscape?.();
+          setDraft("");
+          return;
+        }
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);
+      },
+      placeholder: copy.search.placeholder,
+      inputProps: { "aria-label": copy.search.allColumnsLabel, "data-testid": testId },
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(16), color: "text.secondary" } }) }),
+        endAdornment: draft ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "aria-label": copy.search.clear,
+            "data-testid": testId ? `${testId}-clear` : void 0,
+            onClick: () => setDraft(""),
+            sx: { p: 0.25 },
+            children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: sxRem(14) } })
+          }
+        ) }) : void 0
+      },
+      sx: (theme) => ({ ...boxWidth(theme, fill), ...fieldTextFieldStyles(theme) })
+    }
+  );
+}
+function CollapsedSearch({
+  active,
+  onOpen,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    IconButton,
+    {
+      size: "small",
+      onClick: onOpen,
+      "aria-label": copy.search.open,
+      "aria-expanded": false,
+      "data-testid": testId ? `${testId}-collapsed` : void 0,
+      sx: {
+        position: "relative",
+        width: fieldHeight,
+        height: fieldHeight,
+        border: 1,
+        borderRadius: fieldRadiusPx,
+        borderColor: (theme) => active ? theme.palette.primary.main : fieldEdge(theme),
+        color: active ? "primary.main" : "text.secondary",
+        bgcolor: active ? "action.selected" : "background.paper"
+      },
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(18) } }),
+        active && /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              top: sxRem(2),
+              right: sxRem(2),
+              width: sxRem(6),
+              height: sxRem(6),
+              borderRadius: "50%",
+              bgcolor: "primary.main"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  InlineKeyword,
+  CollapsedSearch
+};
+//# sourceMappingURL=chunk-62UAI62O.js.map

package/dist/chunk-62UAI62O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-search.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE INLINE BAR'S SEARCH — the one control on the toolbar that cannot be\n * guessed from an icon's position, which is why it is the LAST thing the\n * degradation ladder takes away. See `data-views-overflow.ts`.\n */\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\nimport InputAdornment from \"@mui/material/InputAdornment/index.js\";\nimport TextField from \"@mui/material/TextField/index.js\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { fieldRadiusPx } from \"../../../tokens/field-radius\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { fieldHeight, fieldTextFieldStyles } from \"../../../tokens/field-height\";\nimport { fieldEdge } from \"../../../tokens/field-edge\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/** How long the box waits after the last keystroke before it queries. */\nconst SEARCH_DEBOUNCE_MS = 350;\n\n/**\n * How wide the keyword box is allowed to be.\n *\n * The 200px floor is right while the box shares the row: a search you cannot\n * read six characters in is not a search. It is WRONG once the box has been\n * expanded out of its collapsed state on a narrow screen, where the cluster was\n * sized for a magnifier — the floor cannot be met there, so the row scrolled\n * sideways instead (154px of overhang at 320px). In that mode the box shrinks,\n * and if what is left would still be unreadable the bar hands it the whole\n * cluster instead (`searchTakeover`).\n */\nfunction boxWidth(theme: Theme, fill: boolean): { flex: number; minWidth: number | string; maxWidth: string } {\n  return { flex: 1, minWidth: fill ? 0 : rem(theme, 200), maxWidth: fill ? \"none\" : rem(theme, 384) };\n}\n\n/**\n * The box's own draft, and the two ways it reaches `onChange`.\n *\n * Extracted from {@link InlineKeyword} so the commit policy reads in one place\n * rather than split across a render body — and because it is where both halves\n * of a defect that lost searches outright had to be fixed.\n *\n * ## The debounce must not be keyed on the handler's identity\n *\n * Every caller builds `onChange` inline — the grid's own bar passes\n * `(value) => c.patch({ search: value })`, rebuilt on each render. Keying the\n * effect on it re-armed the timer on every render, and a busy admin page\n * re-renders more often than every 350ms as its queries land, so the timer\n * never survived to fire and the term was NEVER committed: measured in one\n * adopter as a dead `?q=` on a server-mode grid, where a 15-second loop pressed\n * Enter over and over and the URL never moved. So the handler is read through a\n * ref and the effect depends on `[draft, value]` alone.\n *\n * ## An immediate commit must read the BOX, not the draft\n *\n * A keystroke can land before React has processed the edit before it — a fast\n * typist, and every Playwright `fill()` followed by `press('Enter')`. `draft` is\n * then still the value from before the edit, and comparing THAT to `value` said\n * \"nothing changed\" and dropped the keystroke, leaving the term on screen with\n * an unfiltered list behind it. `commitNow` takes what the caller read off the\n * element and syncs the draft to it, which also keeps the box from being reset\n * to a stale draft by the next render when a host ignores the commit.\n */\nfunction useKeywordDraft(\n  value: string,\n  onChange: (next: string) => void,\n): { draft: string; setDraft: (next: string) => void; commitNow: (typed: string) => void } {\n  const [draft, setDraft] = useState(value);\n  const prev = useRef(value);\n  // An external change (a saved view, the URL, \"Limpar\") wins over the draft.\n  if (prev.current !== value) {\n    prev.current = value;\n    if (draft !== value) setDraft(value);\n  }\n  const commit = useRef(onChange);\n  useEffect(() => {\n    commit.current = onChange;\n  });\n  useEffect(() => {\n    if (draft === value) return undefined;\n    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [draft, value]);\n  const commitNow = useCallback(\n    (typed: string) => {\n      setDraft(typed);\n      if (typed !== value) commit.current(typed);\n    },\n    [value],\n  );\n  return { draft, setDraft, commitNow };\n}\n\n/**\n * The bar's keyword box.\n *\n * DEBOUNCED rather than committed on Enter/blur. In server mode every commit is\n * a round trip, and a box that only fires on blur makes the operator press a\n * key they were not told about to see any result at all — they type, nothing\n * happens, and the list looks broken. 350ms is long enough that a word costs\n * one query, short enough to feel like live search.\n *\n * `Escape` clears; the X clears without leaving the box. Both exist because\n * clearing by selecting-and-deleting is three gestures for the most common\n * thing anyone does to a search box.\n */\nexport function InlineKeyword({\n  value,\n  onChange,\n  testId,\n  autoFocus,\n  onEscape,\n  fill = false,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  testId?: string;\n  autoFocus?: boolean;\n  /** Called on Escape with the box already empty — the collapsed bar closes it. */\n  onEscape?: () => void;\n  /** Take whatever width there is, with no minimum — see {@link boxWidth}. */\n  fill?: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);\n\n  return (\n    <TextField\n      size=\"small\"\n      value={draft}\n      autoFocus={autoFocus}\n      onChange={(event) => setDraft(event.target.value)}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          if (draft === \"\") onEscape?.();\n          setDraft(\"\");\n          return;\n        }\n        // Enter still commits IMMEDIATELY, ahead of the debounce — someone who\n        // presses it has decided, and waiting out the timer reads as a stall.\n        if (event.key !== \"Enter\") return;\n        event.preventDefault();\n        // The BOX, not `draft` — see {@link useKeywordDraft}.\n        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);\n      }}\n      placeholder={copy.search.placeholder}\n      inputProps={{ \"aria-label\": copy.search.allColumnsLabel, \"data-testid\": testId }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon sx={{ fontSize: sxRem(16), color: \"text.secondary\" }} />\n          </InputAdornment>\n        ),\n        endAdornment: draft ? (\n          <InputAdornment position=\"end\">\n            <IconButton\n              size=\"small\"\n              aria-label={copy.search.clear}\n              data-testid={testId ? `${testId}-clear` : undefined}\n              onClick={() => setDraft(\"\")}\n              sx={{ p: 0.25 }}\n            >\n              <CloseIcon sx={{ fontSize: sxRem(14) }} />\n            </IconButton>\n          </InputAdornment>\n        ) : undefined,\n      }}\n      // Takes the free space and gives it up first — step 3 of the ladder,\n      // which needs no flag because flex does it (see `computeSplit`). The\n      // corner is the theme's field radius, so the box matches the pills beside it.\n      sx={(theme) => ({ ...boxWidth(theme, fill), ...fieldTextFieldStyles(theme) })}\n    />\n  );\n}\n\n/**\n * Step 4 of the ladder: the search as a magnifier.\n *\n * Carries a dot when a search is APPLIED. Collapsing a control that is\n * currently filtering the list, with nothing saying so, is how an operator ends\n * up staring at 3 rows of 214 and reading it as missing data.\n */\nexport function CollapsedSearch({\n  active,\n  onOpen,\n  testId,\n}: {\n  active: boolean;\n  onOpen: () => void;\n  testId?: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onOpen}\n      aria-label={copy.search.open}\n      aria-expanded={false}\n      data-testid={testId ? `${testId}-collapsed` : undefined}\n      sx={{\n        position: \"relative\",\n        width: fieldHeight,\n        height: fieldHeight,\n        border: 1,\n        borderRadius: fieldRadiusPx,\n        borderColor: (theme) => (active ? theme.palette.primary.main : fieldEdge(theme)),\n        color: active ? \"primary.main\" : \"text.secondary\",\n        bgcolor: active ? \"action.selected\" : \"background.paper\",\n      }}\n    >\n      <SearchIcon sx={{ fontSize: sxRem(18) }} />\n      {active && (\n        <Box\n          component=\"span\"\n          sx={{\n            position: \"absolute\",\n            top: sxRem(2),\n            right: sxRem(2),\n            width: sxRem(6),\n            height: sxRem(6),\n            borderRadius: \"50%\",\n            bgcolor: \"primary.main\",\n          }}\n        />\n      )}\n    </IconButton>\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/chunk-67O4GPJJ.js

@@ -0,0 +1,86 @@
+import {
+  baseStyles,
+  effectStyles,
+  getColorFromTheme,
+  variantStyles
+} from "./chunk-FNRPQE2D.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Toggle/Toggle.tsx
+import ToggleButton from "@mui/material/ToggleButton/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledToggle = styled(ToggleButton, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient
+}) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    ...baseStyles(theme, colorPalette, customSize),
+    ...variantStyles(theme, customVariant, colorPalette),
+    ...effectStyles(theme, colorPalette, { glass, gradient, glow })
+  };
+});
+var Toggle = forwardRef(
+  ({
+    variant = "default",
+    color = "primary",
+    size = "md",
+    icon,
+    glow = false,
+    glass = false,
+    gradient = false,
+    dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const theme = useTheme();
+    const testIds = {
+      container: dataTestId,
+      icon: dataTestId ? `${dataTestId}-icon` : void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledToggle,
+      {
+        ref,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        "data-testid": testIds.container,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { marginRight: children ? rem(theme, 8) : "0" },
+              "data-testid": testIds.icon,
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+export {
+  Toggle
+};
+//# sourceMappingURL=chunk-67O4GPJJ.js.map

package/dist/chunk-67O4GPJJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Toggle/Toggle.tsx"],"sourcesContent":["import ToggleButton from '@mui/material/ToggleButton/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport {\n  baseStyles,\n  effectStyles,\n  getColorFromTheme,\n  variantStyles,\n} from './Toggle.styles';\nimport type { ToggleProps } from './Toggle.types';\n\nimport { rem } from '../../../tokens/relative';\n\nconst StyledToggle = styled(ToggleButton, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient'].includes(\n      prop as string,\n    ),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n}>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n}) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...baseStyles(theme, colorPalette, customSize),\n    ...variantStyles(theme, customVariant, colorPalette),\n    ...effectStyles(theme, colorPalette, { glass, gradient, glow }),\n  };\n});\n\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      size = 'md',\n      icon,\n      glow = false,\n      glass = false,\n      gradient = false,\n      dataTestId,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const testIds = {\n      container: dataTestId,\n      icon: dataTestId ? `${dataTestId}-icon` : undefined,\n    };\n\n    return (\n      <StyledToggle\n        ref={ref}\n        customVariant={variant}\n        customColor={color}\n        customSize={size}\n        glow={glow}\n        glass={glass}\n        gradient={gradient}\n        data-testid={testIds.container}\n        {...props}\n      >\n        {icon && (\n          <span\n            style={{ marginRight: children ? rem(theme, 8) : '0' }}\n            data-testid={testIds.icon}\n          >\n            {icon}\n          </span>\n        )}\n        {children}\n      </StyledToggle>\n    );\n  },\n);\n\nToggle.displayName = 'Toggle';\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,kBAAkB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAgB,kBAAkB;AAiE5B,SAYI,KAZJ;AArDN,IAAM,eAAe,OAAO,cAAc;AAAA,EACxC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,cAAc,QAAQ,SAAS,UAAU,EAAE;AAAA,IAC3E;AAAA,EACF;AACJ,CAAC,EAOE,CAAC;AAAA,EACF;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,kBAAkB,OAAO,WAAW;AAEzD,SAAO;AAAA,IACL,GAAG,WAAW,OAAO,cAAc,UAAU;AAAA,IAC7C,GAAG,cAAc,OAAO,eAAe,YAAY;AAAA,IACnD,GAAG,aAAa,OAAO,cAAc,EAAE,OAAO,UAAU,KAAK,CAAC;AAAA,EAChE;AACF,CAAC;AAEM,IAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,QAAQ,SAAS;AACvB,UAAM,UAAU;AAAA,MACd,WAAW;AAAA,MACX,MAAM,aAAa,GAAG,UAAU,UAAU;AAAA,IAC5C;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,QAAQ;AAAA,QACpB,GAAG;AAAA,QAEH;AAAA,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,EAAE,aAAa,WAAW,IAAI,OAAO,CAAC,IAAI,IAAI;AAAA,cACrD,eAAa,QAAQ;AAAA,cAEpB;AAAA;AAAA,UACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}