@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-BB2IVF76.js

@@ -0,0 +1,69 @@
+import {
+  scaleFor
+} from "./chunk-Z6TIAVEG.js";
+
+// src/components/navigation/Pagination/PaginationParts.tsx
+import Box from "@mui/material/Box/index.js";
+import FormControl from "@mui/material/FormControl/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Select from "@mui/material/Select/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ItemsPerPageContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+var PageInfoContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+var ItemsPerPageSelect = ({
+  pageSizeLabel,
+  value,
+  options,
+  size,
+  disabled,
+  testId,
+  onChange
+}) => /* @__PURE__ */ jsxs(ItemsPerPageContainer, { children: [
+  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: pageSizeLabel }),
+  /* @__PURE__ */ jsx(FormControl, { size: "small", sx: { minWidth: 80 }, children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      value,
+      onChange: (event) => onChange(event.target.value),
+      disabled,
+      "data-testid": testId,
+      sx: {
+        "& .MuiSelect-select": {
+          fontSize: scaleFor(size, ["0.875rem", "1rem", "1.125rem"]),
+          py: scaleFor(size, [0.5, 1, 1.5])
+        }
+      },
+      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, option))
+    }
+  ) })
+] });
+var PageInfo = ({
+  size,
+  testId,
+  children
+}) => /* @__PURE__ */ jsx(PageInfoContainer, { children: /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: "body2",
+    color: "text.secondary",
+    fontSize: scaleFor(size, ["0.75rem", "0.875rem", "1rem"]),
+    "data-testid": testId,
+    children
+  }
+) });
+
+export {
+  ItemsPerPageSelect,
+  PageInfo
+};
+//# sourceMappingURL=chunk-BB2IVF76.js.map

package/dist/chunk-BB2IVF76.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Pagination/PaginationParts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormControl from '@mui/material/FormControl/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Select from '@mui/material/Select/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { scaleFor } from './Pagination.helpers';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst ItemsPerPageContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst PageInfoContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nexport interface ItemsPerPageSelectProps {\n  /** The label in front of the select. REQUIRED — it was `\"Show:\"`. */\n  pageSizeLabel: string;\n  value: number;\n  options: number[];\n  size: string;\n  disabled: boolean;\n  testId: string;\n  onChange: (value: number) => void;\n}\n\nexport const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({\n  pageSizeLabel,\n  value,\n  options,\n  size,\n  disabled,\n  testId,\n  onChange,\n}) => (\n  <ItemsPerPageContainer>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      {pageSizeLabel}\n    </Typography>\n    <FormControl size=\"small\" sx={{ minWidth: 80 }}>\n      <Select\n        value={value}\n        onChange={(event) => onChange(event.target.value as number)}\n        disabled={disabled}\n        data-testid={testId}\n        sx={{\n          '& .MuiSelect-select': {\n            fontSize: scaleFor(size, ['0.875rem', '1rem', '1.125rem']),\n            py: scaleFor(size, [0.5, 1, 1.5]),\n          },\n        }}\n      >\n        {options.map((option) => (\n          <MenuItem key={option} value={option}>\n            {option}\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  </ItemsPerPageContainer>\n);\n\nexport const PageInfo: FC<{ size: string; testId: string; children: React.ReactNode }> = ({\n  size,\n  testId,\n  children,\n}) => (\n  <PageInfoContainer>\n    <Typography\n      variant=\"body2\"\n      color=\"text.secondary\"\n      fontSize={scaleFor(size, ['0.75rem', '0.875rem', '1rem'])}\n      data-testid={testId}\n    >\n      {children}\n    </Typography>\n  </PageInfoContainer>\n);\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,OAAO,iBAAiB;AACxB,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,OAAO,gBAAgB;AACvB,SAAS,cAAc;AAwCrB,SACE,KADF;AAhCF,IAAM,wBAAwB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACxD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,IAAM,oBAAoB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACpD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAaK,IAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,yBACC;AAAA,sBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,yBACH;AAAA,EACA,oBAAC,eAAY,MAAK,SAAQ,IAAI,EAAE,UAAU,GAAG,GAC3C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAe;AAAA,MAC1D;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,uBAAuB;AAAA,UACrB,UAAU,SAAS,MAAM,CAAC,YAAY,QAAQ,UAAU,CAAC;AAAA,UACzD,IAAI,SAAS,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,QAClC;AAAA,MACF;AAAA,MAEC,kBAAQ,IAAI,CAAC,WACZ,oBAAC,YAAsB,OAAO,QAC3B,oBADY,MAEf,CACD;AAAA;AAAA,EACH,GACF;AAAA,GACF;AAGK,IAAM,WAA4E,CAAC;AAAA,EACxF;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC,qBACC;AAAA,EAAC;AAAA;AAAA,IACC,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,UAAU,SAAS,MAAM,CAAC,WAAW,YAAY,MAAM,CAAC;AAAA,IACxD,eAAa;AAAA,IAEZ;AAAA;AACH,GACF;","names":[]}

package/dist/chunk-BBC4KT5G.js

@@ -0,0 +1,231 @@
+import {
+  CustomTabPanel
+} from "./chunk-7UZ2TFIK.js";
+import {
+  tabsRootStyles
+} from "./chunk-EWSGWLHN.js";
+
+// src/components/navigation/Tabs/Tabs.tsx
+import Close from "@mui/icons-material/Close";
+import Badge from "@mui/material/Badge/index.js";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import MuiTab from "@mui/material/Tab/index.js";
+import MuiTabs from "@mui/material/Tabs/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledTabs = styled(MuiTabs, {
+  shouldForwardProp: (prop) => !["customVariant", "size", "showDividers"].includes(prop)
+})(
+  ({ theme, customVariant, size, showDividers }) => ({
+    ...tabsRootStyles({ theme, customVariant, size, showDividers })
+  })
+);
+var CloseButton = styled(Box)(({ theme }) => ({
+  marginLeft: theme.spacing(0.5),
+  padding: theme.spacing(0.25),
+  width: 20,
+  height: 20,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  borderRadius: "50%",
+  color: theme.palette.action.active,
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.error.main, 0.1),
+    color: theme.palette.error.main
+  }
+}));
+var BadgeWrapper = styled(Badge)(() => ({
+  "& .MuiBadge-badge": {
+    right: -6,
+    top: 4,
+    fontSize: "0.75rem",
+    minWidth: 16,
+    height: 16,
+    padding: 0
+  }
+}));
+var TABS_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  fullWidth: false,
+  orientation: "horizontal",
+  showDividers: false,
+  centered: false,
+  scrollable: false,
+  scrollButtons: "auto",
+  sticky: false,
+  stickyOffset: 0,
+  animateContent: false,
+  animationDuration: 300,
+  persistContent: false,
+  disabled: false,
+  loading: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveScrollButtons = (scrollable) => scrollable ? "auto" : false;
+var buildTabsSx = ({
+  fullWidth,
+  sticky,
+  stickyOffset,
+  indicatorColor,
+  disabled
+}) => ({
+  ...fullWidth && { width: "100%" },
+  // Pin the tab list while panels scroll beneath it. Opaque background + bottom
+  // divider so scrolled content does not show through.
+  ...sticky && {
+    position: "sticky",
+    top: stickyOffset,
+    zIndex: 2,
+    backgroundColor: "background.default",
+    borderBottom: 1,
+    borderColor: "divider"
+  },
+  ...indicatorColor && {
+    "& .MuiTabs-indicator": { backgroundColor: indicatorColor }
+  },
+  ...disabled && { opacity: 0.6, pointerEvents: "none" }
+});
+var TabLabel = ({ item, closeTabLabel, onClose }) => {
+  const content = /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.closable && /* @__PURE__ */ jsx(
+      CloseButton,
+      {
+        onClick: (e) => onClose(e, item.id),
+        role: "button",
+        tabIndex: 0,
+        "aria-label": closeTabLabel,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          onClose(e, item.id);
+        },
+        children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+      }
+    )
+  ] });
+  if (item.badge === void 0) return content;
+  return /* @__PURE__ */ jsx(BadgeWrapper, { badgeContent: item.badge, color: "error", children: content });
+};
+var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => /* @__PURE__ */ jsx(
+  StyledTabs,
+  {
+    ...rest,
+    value,
+    onChange,
+    customVariant: p.variant,
+    size: p.size,
+    showDividers: p.showDividers,
+    orientation: p.orientation,
+    centered: p.centered,
+    variant: p.scrollable ? "scrollable" : "standard",
+    "data-testid": dataTestId ? `${dataTestId}-list` : "tabs-list",
+    scrollButtons: resolveScrollButtons(p.scrollable),
+    allowScrollButtonsMobile: p.scrollable,
+    textColor: p.color,
+    indicatorColor: p.color,
+    sx: buildTabsSx({
+      fullWidth: p.fullWidth,
+      sticky: p.sticky,
+      stickyOffset: p.stickyOffset,
+      indicatorColor: p.indicatorColor,
+      disabled: p.disabled
+    }),
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      MuiTab,
+      {
+        value: item.id,
+        label: /* @__PURE__ */ jsx(TabLabel, { closeTabLabel: p.closeTabLabel, item, onClose: onCloseTab }),
+        disabled: item.disabled || p.disabled,
+        className: item.className,
+        id: `tab-${item.id}`,
+        "aria-controls": `tabpanel-${item.id}`,
+        "aria-disabled": item.disabled || p.disabled,
+        "data-testid": dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`
+      },
+      item.id
+    ))
+  }
+);
+var TabsPanels = ({
+  items,
+  value,
+  variant,
+  animateContent,
+  animationDuration,
+  persistContent,
+  loading,
+  loadingComponent,
+  tabPanelProps,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Box, { sx: { mt: variant === "enclosed" ? 0 : 2 }, children: items.map((item, index) => /* @__PURE__ */ jsx(
+  CustomTabPanel,
+  {
+    id: item.id,
+    value,
+    animate: animateContent,
+    animationDuration,
+    persist: persistContent,
+    loading,
+    loadingComponent,
+    className: tabPanelProps?.className,
+    dataTestId,
+    index,
+    children: item.content
+  },
+  item.id
+)) });
+var Tabs = React.forwardRef(
+  (tabsProps, ref) => {
+    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) };
+    const {
+      // Destructured only to keep it OUT of `rest`, which is spread onto the
+      // DOM node — `{...resolved}` below is what actually carries it to
+      // `TabsBar`. Same reason as `value` on the next line.
+      closeTabLabel: _closeTabLabel,
+      value: _value,
+      onChange,
+      onTabClose,
+      className,
+      disabled,
+      showDividers,
+      variant,
+      dataTestId,
+      ...rest
+    } = resolved;
+    const handleChange = (event, newValue) => {
+      if (!disabled) onChange(event, newValue);
+    };
+    const handleTabClose = (event, tabId) => {
+      event.stopPropagation();
+      onTabClose?.(tabId);
+    };
+    return /* @__PURE__ */ jsxs(Box, { className, ref, "data-testid": dataTestId || "tabs", children: [
+      /* @__PURE__ */ jsx(
+        TabsBar,
+        {
+          ...resolved,
+          rest,
+          onChange: handleChange,
+          onCloseTab: handleTabClose
+        }
+      ),
+      showDividers && variant !== "enclosed" && /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TabsPanels, { ...resolved })
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-BBC4KT5G.js.map

package/dist/chunk-BBC4KT5G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport Badge from '@mui/material/Badge/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport MuiTab from '@mui/material/Tab/index.js';\nimport MuiTabs from '@mui/material/Tabs/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { CustomTabPanel } from './TabsPanel';\nimport { tabsRootStyles } from './Tabs.styles';\nimport type { TabItem, TabsProps } from './Tabs.types';\n\nconst StyledTabs = styled(MuiTabs, {\n  shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(\n  ({ theme, customVariant, size, showDividers }) => ({\n    ...tabsRootStyles({ theme, customVariant, size, showDividers }) }),\n);\n\nconst CloseButton = styled(Box)(({ theme }) => ({\n  marginLeft: theme.spacing(0.5),\n  padding: theme.spacing(0.25),\n  width: 20,\n  height: 20,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  cursor: 'pointer',\n  borderRadius: '50%',\n  color: theme.palette.action.active,\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.error.main, 0.1),\n    color: theme.palette.error.main } }));\n\nconst BadgeWrapper = styled(Badge)(() => ({\n  '& .MuiBadge-badge': {\n    right: -6,\n    top: 4,\n    fontSize: '0.75rem',\n    minWidth: 16,\n    height: 16,\n    padding: 0 } }));\n\nconst TABS_DEFAULTS: Partial<TabsProps> = {\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  fullWidth: false,\n  orientation: 'horizontal',\n  showDividers: false,\n  centered: false,\n  scrollable: false,\n  scrollButtons: 'auto',\n  sticky: false,\n  stickyOffset: 0,\n  animateContent: false,\n  animationDuration: 300,\n  persistContent: false,\n  disabled: false,\n  loading: false };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TabsProps): Partial<TabsProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TabsProps>;\n\n// Once the row is scrollable every accepted scrollButtons value ends up as\n// MUI's 'auto'. That is exactly what the previous nested ternary did — it mapped\n// 'on'/'off'/'desktop' to 'auto', and its remaining branch could only ever be\n// 'auto' anyway — so the behaviour is preserved here rather than quietly\n// changed. Worth knowing that scrollButtons=\"off\" therefore still shows buttons.\nconst resolveScrollButtons = (scrollable?: boolean): 'auto' | false =>\n  scrollable ? 'auto' : false;\n\nconst buildTabsSx = ({\n  fullWidth,\n  sticky,\n  stickyOffset,\n  indicatorColor,\n  disabled }: {\n  fullWidth?: boolean;\n  sticky?: boolean;\n  stickyOffset?: number;\n  indicatorColor?: string;\n  disabled?: boolean;\n}) => ({\n  ...(fullWidth && { width: '100%' }),\n  // Pin the tab list while panels scroll beneath it. Opaque background + bottom\n  // divider so scrolled content does not show through.\n  ...(sticky && {\n    position: 'sticky',\n    top: stickyOffset,\n    zIndex: 2,\n    backgroundColor: 'background.default',\n    borderBottom: 1,\n    borderColor: 'divider' }),\n  ...(indicatorColor && {\n    '& .MuiTabs-indicator': { backgroundColor: indicatorColor } }),\n  ...(disabled && { opacity: 0.6, pointerEvents: 'none' }) });\n\n// A tab's label: icon, text, optional close affordance, optionally badged.\nconst TabLabel: React.FC<{\n  item: TabItem;\n  closeTabLabel: string;\n  onClose: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n}> = ({ item, closeTabLabel, onClose }) => {\n  const content = (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n      {item.icon}\n      <span>{item.label}</span>\n      {item.closable && (\n        <CloseButton\n          onClick={(e) => onClose(e, item.id)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={closeTabLabel}\n          onKeyDown={(e) => {\n            if (e.key !== 'Enter' && e.key !== ' ') return;\n            onClose(e, item.id);\n          }}\n        >\n          <Close fontSize=\"inherit\" />\n        </CloseButton>\n      )}\n    </Box>\n  );\n\n  if (item.badge === undefined) return content;\n\n  return (\n    <BadgeWrapper badgeContent={item.badge} color=\"error\">\n      {content}\n    </BadgeWrapper>\n  );\n};\n\ntype ResolvedTabs = TabsProps;\n\n// The tab strip. Kept in this file because StyledTabs cannot cross a module\n// boundary (TS2742).\nconst TabsBar: React.FC<\n  ResolvedTabs & {\n    rest: Record<string, unknown>;\n    onChange: (event: React.SyntheticEvent, newValue: string) => void;\n    onCloseTab: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n  }\n> = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => (\n  <StyledTabs\n    {...rest}\n    value={value}\n    onChange={onChange}\n    customVariant={p.variant}\n    size={p.size}\n    showDividers={p.showDividers}\n    orientation={p.orientation}\n    centered={p.centered}\n    // MUI only scrolls when its own `variant` is `scrollable`; map our\n    // `scrollable` flag onto it so overflowing tab rows actually scroll.\n    variant={p.scrollable ? 'scrollable' : 'standard'}\n    data-testid={dataTestId ? `${dataTestId}-list` : 'tabs-list'}\n    scrollButtons={resolveScrollButtons(p.scrollable)}\n    allowScrollButtonsMobile={p.scrollable}\n    textColor={p.color}\n    indicatorColor={p.color}\n    sx={buildTabsSx({\n      fullWidth: p.fullWidth,\n      sticky: p.sticky,\n      stickyOffset: p.stickyOffset,\n      indicatorColor: p.indicatorColor,\n      disabled: p.disabled })}\n  >\n    {items.map((item, index) => (\n      <MuiTab\n        key={item.id}\n        value={item.id}\n        label={<TabLabel closeTabLabel={p.closeTabLabel} item={item} onClose={onCloseTab} />}\n        disabled={item.disabled || p.disabled}\n        className={item.className}\n        id={`tab-${item.id}`}\n        aria-controls={`tabpanel-${item.id}`}\n        aria-disabled={item.disabled || p.disabled}\n        data-testid={dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`}\n      />\n    ))}\n  </StyledTabs>\n);\n\nconst TabsPanels: React.FC<ResolvedTabs> = ({\n  items,\n  value,\n  variant,\n  animateContent,\n  animationDuration,\n  persistContent,\n  loading,\n  loadingComponent,\n  tabPanelProps,\n  dataTestId }) => (\n  <Box sx={{ mt: variant === 'enclosed' ? 0 : 2 }}>\n    {items.map((item, index) => (\n      <CustomTabPanel\n        key={item.id}\n        id={item.id}\n        value={value}\n        animate={animateContent}\n        animationDuration={animationDuration}\n        persist={persistContent}\n        loading={loading}\n        loadingComponent={loadingComponent}\n        className={tabPanelProps?.className}\n        dataTestId={dataTestId}\n        index={index}\n      >\n        {item.content}\n      </CustomTabPanel>\n    ))}\n  </Box>\n);\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  (tabsProps, ref) => {\n    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) } as TabsProps;\n    const {\n      // Destructured only to keep it OUT of `rest`, which is spread onto the\n      // DOM node — `{...resolved}` below is what actually carries it to\n      // `TabsBar`. Same reason as `value` on the next line.\n      closeTabLabel: _closeTabLabel,\n      value: _value,\n      onChange,\n      onTabClose,\n      className,\n      disabled,\n      showDividers,\n      variant,\n      dataTestId,\n      ...rest\n    } = resolved;\n\n    const handleChange = (event: React.SyntheticEvent, newValue: string) => {\n      if (!disabled) onChange(event, newValue);\n    };\n\n    const handleTabClose = (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => {\n      event.stopPropagation();\n      onTabClose?.(tabId);\n    };\n\n    return (\n      <Box className={className} ref={ref} data-testid={dataTestId || 'tabs'}>\n        <TabsBar\n          {...resolved}\n          rest={rest as unknown as Record<string, unknown>}\n          onChange={handleChange}\n          onCloseTab={handleTabClose}\n        />\n\n        {showDividers && variant !== 'enclosed' && <Divider />}\n\n        <TabsPanels {...resolved} />\n      </Box>\n    );\n  },\n);\n\nTabs.displayName = 'Tabs';\n"],"mappings":"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","names":[]}

package/dist/chunk-BGYLL467.js

@@ -0,0 +1,108 @@
+import {
+  detectCountryFromNumber,
+  formatPhoneNumber,
+  validatePhoneNumber
+} from "./chunk-5P6OV64V.js";
+import {
+  countries
+} from "./chunk-3JDP5OUR.js";
+
+// src/components/form/PhoneInput/PhoneInput.hooks.ts
+import { useEffect, useRef, useState } from "react";
+var usePhoneInput = ({
+  defaultValue,
+  initialCountryCode,
+  onChange
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [selectedCountry, setSelectedCountry] = useState(
+    countries.find((c) => c.code === initialCountryCode) || countries[0]
+  );
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [isValid, setIsValid] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const onChangeRef = useRef(onChange);
+  const isInitialMountRef = useRef(true);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    if (!selectedCountry) return;
+    const valid = validatePhoneNumber(value, selectedCountry.code);
+    setIsValid(valid);
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
+    if (onChangeRef.current) {
+      onChangeRef.current(value, valid, selectedCountry.code);
+    }
+  }, [value, selectedCountry]);
+  const handlers = usePhoneHandlers({
+    value,
+    setValue,
+    selectedCountry,
+    setSelectedCountry,
+    setAnchorEl,
+    setIsFocused
+  });
+  return {
+    value,
+    selectedCountry,
+    anchorEl,
+    isValid,
+    isFocused,
+    setIsFocused,
+    setAnchorEl,
+    ...handlers
+  };
+};
+var usePhoneHandlers = ({
+  value,
+  setValue,
+  selectedCountry,
+  setSelectedCountry,
+  setAnchorEl,
+  setIsFocused
+}) => {
+  const handleCountryClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCountryClose = () => {
+    setAnchorEl(null);
+  };
+  const handleCountrySelect = (country) => {
+    setSelectedCountry(country);
+    handleCountryClose();
+    if (value) {
+      const formatted = formatPhoneNumber(value, country.code);
+      setValue(formatted);
+    }
+  };
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (newValue.startsWith("+")) {
+      const detectedCountry = detectCountryFromNumber(newValue);
+      if (detectedCountry) {
+        const detectedCountryData = countries.find((c) => c.code === detectedCountry);
+        if (detectedCountryData && detectedCountryData.code !== selectedCountry?.code) {
+          setSelectedCountry(detectedCountryData);
+        }
+      }
+    }
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (value && selectedCountry) {
+      const formatted = formatPhoneNumber(value, selectedCountry.code);
+      setValue(formatted);
+    }
+  };
+  return { handleCountryClick, handleCountryClose, handleCountrySelect, handleChange, handleBlur };
+};
+
+export {
+  usePhoneInput
+};
+//# sourceMappingURL=chunk-BGYLL467.js.map

package/dist/chunk-BGYLL467.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PhoneInput/PhoneInput.hooks.ts"],"sourcesContent":["import type { CountryCode } from 'libphonenumber-js';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { countries } from './countries';\nimport { detectCountryFromNumber, formatPhoneNumber, validatePhoneNumber } from './phone';\nimport type { CountryData } from './PhoneInput.types';\n\n// Value, selected country, menu anchor and validity, plus the handlers that move\n// between them. Kept out of the component so its body is markup.\nexport const usePhoneInput = ({\n  defaultValue,\n  initialCountryCode,\n  onChange,\n}: {\n  defaultValue: string;\n  initialCountryCode: CountryCode;\n  onChange?: (value: string, isValid: boolean, country: CountryCode) => void;\n}) => {\nconst [value, setValue] = useState(defaultValue);\nconst [selectedCountry, setSelectedCountry] = useState(\n  countries.find((c) => c.code === initialCountryCode) || countries[0],\n);\nconst [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\nconst [isValid, setIsValid] = useState(false);\nconst [isFocused, setIsFocused] = useState(false);\nconst onChangeRef = useRef(onChange);\nconst isInitialMountRef = useRef(true);\n\n// Update ref when onChange changes\nuseEffect(() => {\n  onChangeRef.current = onChange;\n}, [onChange]);\n\nuseEffect(() => {\n  if (!selectedCountry) return;\n\n  const valid = validatePhoneNumber(value, selectedCountry.code);\n  setIsValid(valid);\n\n  // Skip onChange call on initial mount\n  if (isInitialMountRef.current) {\n    isInitialMountRef.current = false;\n    return;\n  }\n\n  // Call onChange for all value/country changes after initial mount\n  if (onChangeRef.current) {\n    onChangeRef.current(value, valid, selectedCountry.code);\n  }\n}, [value, selectedCountry]);\n\n  const handlers = usePhoneHandlers({\n    value,\n    setValue,\n    selectedCountry,\n    setSelectedCountry,\n    setAnchorEl,\n    setIsFocused,\n  });\n\n  return {\n    value,\n    selectedCountry,\n    anchorEl,\n    isValid,\n    isFocused,\n    setIsFocused,\n    setAnchorEl,\n    ...handlers,\n  };\n};\n\n// Opening and closing the country menu, picking a country, typing, and\n// reformatting on blur.\nconst usePhoneHandlers = ({\n  value,\n  setValue,\n  selectedCountry,\n  setSelectedCountry,\n  setAnchorEl,\n  setIsFocused,\n}: {\n  value: string;\n  setValue: React.Dispatch<React.SetStateAction<string>>;\n  selectedCountry?: CountryData;\n  setSelectedCountry: React.Dispatch<React.SetStateAction<CountryData | undefined>>;\n  setAnchorEl: React.Dispatch<React.SetStateAction<null | HTMLElement>>;\n  setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;\n}) => {\n  const handleCountryClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleCountryClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleCountrySelect = (country: CountryData) => {\n    setSelectedCountry(country);\n    handleCountryClose();\n\n    // Reformat number with new country code\n    if (value) {\n      const formatted = formatPhoneNumber(value, country.code);\n      setValue(formatted);\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    setValue(newValue);\n\n    // Auto-detect country if user types international format\n    if (newValue.startsWith('+')) {\n      const detectedCountry = detectCountryFromNumber(newValue);\n      if (detectedCountry) {\n        const detectedCountryData = countries.find((c) => c.code === detectedCountry);\n        if (detectedCountryData && detectedCountryData.code !== selectedCountry?.code) {\n          setSelectedCountry(detectedCountryData);\n        }\n      }\n    }\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n    if (value && selectedCountry) {\n      const formatted = formatPhoneNumber(value, selectedCountry.code);\n      setValue(formatted);\n    }\n  };\n\n  return { handleCountryClick, handleCountryClose, handleCountrySelect, handleChange, handleBlur };\n};\n"],"mappings":";;;;;;;;;;AACA,SAAgB,WAAW,QAAQ,gBAAgB;AAQ5C,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACN,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,kBAAkB,KAAK,UAAU,CAAC;AAAA,EACrE;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,cAAc,OAAO,QAAQ;AACnC,QAAM,oBAAoB,OAAO,IAAI;AAGrC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,QAAI,CAAC,gBAAiB;AAEtB,UAAM,QAAQ,oBAAoB,OAAO,gBAAgB,IAAI;AAC7D,eAAW,KAAK;AAGhB,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,UAAU;AAC5B;AAAA,IACF;AAGA,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,OAAO,OAAO,gBAAgB,IAAI;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,OAAO,eAAe,CAAC;AAEzB,QAAM,WAAW,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAIA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAOM;AACJ,QAAM,qBAAqB,CAAC,UAAyC;AACnE,gBAAY,MAAM,aAAa;AAAA,EACjC;AAEA,QAAM,qBAAqB,MAAM;AAC/B,gBAAY,IAAI;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,YAAyB;AACpD,uBAAmB,OAAO;AAC1B,uBAAmB;AAGnB,QAAI,OAAO;AACT,YAAM,YAAY,kBAAkB,OAAO,QAAQ,IAAI;AACvD,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,UAA+C;AACnE,UAAM,WAAW,MAAM,OAAO;AAC9B,aAAS,QAAQ;AAGjB,QAAI,SAAS,WAAW,GAAG,GAAG;AAC5B,YAAM,kBAAkB,wBAAwB,QAAQ;AACxD,UAAI,iBAAiB;AACnB,cAAM,sBAAsB,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,eAAe;AAC5E,YAAI,uBAAuB,oBAAoB,SAAS,iBAAiB,MAAM;AAC7E,6BAAmB,mBAAmB;AAAA,QACxC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,iBAAa,KAAK;AAClB,QAAI,SAAS,iBAAiB;AAC5B,YAAM,YAAY,kBAAkB,OAAO,gBAAgB,IAAI;AAC/D,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AAEA,SAAO,EAAE,oBAAoB,oBAAoB,qBAAqB,cAAc,WAAW;AACjG;","names":[]}

package/dist/chunk-BH5GSBR3.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-BH5GSBR3.js.map

package/dist/chunk-BH5GSBR3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-BJ3J6FTN.js

@@ -0,0 +1,163 @@
+import {
+  makeTestId,
+  resolveCheckboxProps
+} from "./chunk-JD364H3Y.js";
+
+// src/components/form/Checkbox/Checkbox.tsx
+import MuiCheckbox from "@mui/material/Checkbox/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
+  }
+`;
+var glow = keyframes`
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(25, 118, 210, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(25, 118, 210, 0.8);
+  }
+`;
+var StyledCheckbox = styled(MuiCheckbox, {
+  shouldForwardProp: (prop) => !["customVariant", "ripple", "glow", "pulse"].includes(prop)
+})(
+  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({
+    ...customVariant === "rounded" && {
+      "& .MuiSvgIcon-root": {
+        borderRadius: "50%"
+      }
+    },
+    ...customVariant === "toggle" && {
+      "& .MuiSvgIcon-root": {
+        borderRadius: "12px",
+        transform: "scale(1.2)"
+      }
+    },
+    "&.MuiCheckbox-root": {
+      transition: "all 0.3s ease",
+      ...ripple === false && {
+        "& .MuiTouchRipple-root": {
+          display: "none"
+        }
+      },
+      ...glowProp && {
+        animation: `${glow} 2s ease-in-out infinite`
+      },
+      ...pulseProp && {
+        animation: `${pulse} 2s infinite`
+      },
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.primary.main, 0.1)
+      }
+    },
+    "&.Mui-checked": {
+      color: theme.palette.primary.main
+    },
+    "&.MuiCheckbox-indeterminate": {
+      color: theme.palette.primary.main
+    }
+  })
+);
+var StyledFormControlLabel = styled(FormControlLabel, {
+  shouldForwardProp: (prop) => prop !== "error"
+})(
+  ({ theme, error }) => ({
+    marginLeft: 0,
+    "& .MuiFormControlLabel-label": {
+      color: error ? theme.palette.error.main : theme.palette.text.primary,
+      fontSize: "0.875rem"
+    }
+  })
+);
+var StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({
+  marginLeft: theme.spacing(4),
+  marginTop: theme.spacing(0.5)
+}));
+var Checkbox = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      label,
+      error,
+      helperText,
+      loading,
+      ripple,
+      glow: glow2,
+      pulse: pulse2,
+      disabled,
+      "data-testid": dataTestId,
+      ...props
+    } = resolveCheckboxProps(rawProps);
+    const isDisabled = disabled || loading;
+    const testId = makeTestId(dataTestId);
+    const checkbox = /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-flex" }, children: [
+      /* @__PURE__ */ jsx(
+        StyledCheckbox,
+        {
+          ref,
+          customVariant: variant,
+          ripple,
+          glow: glow2,
+          pulse: pulse2,
+          disabled: isDisabled,
+          "data-testid": dataTestId || "checkbox",
+          ...props
+        }
+      ),
+      loading && /* @__PURE__ */ jsx(
+        CircularProgress,
+        {
+          size: 20,
+          sx: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            marginTop: "-10px",
+            marginLeft: "-10px",
+            color: "primary.main"
+          }
+        }
+      )
+    ] });
+    if (label) {
+      return /* @__PURE__ */ jsxs("div", { "data-testid": testId("container"), children: [
+        /* @__PURE__ */ jsx(
+          StyledFormControlLabel,
+          {
+            control: checkbox,
+            label,
+            error,
+            disabled: isDisabled
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(
+          StyledFormHelperText,
+          {
+            error,
+            "data-testid": testId("helper"),
+            children: helperText
+          }
+        )
+      ] });
+    }
+    return checkbox;
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-BJ3J6FTN.js.map

package/dist/chunk-BJ3J6FTN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["import MuiCheckbox from '@mui/material/Checkbox/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst pulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.7);\n  }\n  70% {\n    box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);\n  }\n`;\n\nconst glow = keyframes`\n  0%, 100% {\n    box-shadow: 0 0 5px rgba(25, 118, 210, 0.5);\n  }\n  50% {\n    box-shadow: 0 0 20px rgba(25, 118, 210, 0.8);\n  }\n`;\n\nconst StyledCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: CheckboxProps['variant'];\n  ripple?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n}>(\n  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({\n    ...(customVariant === 'rounded' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: '50%',\n      },\n    }),\n    \n    ...(customVariant === 'toggle' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: '12px',\n        transform: 'scale(1.2)',\n      },\n    }),\n    \n    '&.MuiCheckbox-root': {\n      transition: 'all 0.3s ease',\n      ...(ripple === false && {\n        '& .MuiTouchRipple-root': {\n          display: 'none',\n        },\n      }),\n      ...(glowProp && {\n        animation: `${glow} 2s ease-in-out infinite`,\n      }),\n      ...(pulseProp && {\n        animation: `${pulse} 2s infinite`,\n      }),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.1),\n      },\n    },\n    \n    '&.Mui-checked': {\n      color: theme.palette.primary.main,\n    },\n    \n    '&.MuiCheckbox-indeterminate': {\n      color: theme.palette.primary.main,\n    },\n  })\n);\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(\n  ({ theme, error }) => ({\n    marginLeft: 0,\n    '& .MuiFormControlLabel-label': {\n      color: error ? theme.palette.error.main : theme.palette.text.primary,\n      fontSize: '0.875rem',\n    },\n  })\n);\n\nconst StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({\n  marginLeft: theme.spacing(4),\n  marginTop: theme.spacing(0.5),\n}));\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      label,\n      error,\n      helperText,\n      loading,\n      ripple,\n      glow,\n      pulse,\n      disabled,\n      'data-testid': dataTestId,\n      ...props\n    } = resolveCheckboxProps(rawProps);\n    const isDisabled = disabled || loading;\n    const testId = makeTestId(dataTestId);\n\n    const checkbox = (\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <StyledCheckbox\n          ref={ref}\n          customVariant={variant}\n          ripple={ripple}\n          glow={glow}\n          pulse={pulse}\n          disabled={isDisabled}\n          data-testid={dataTestId || 'checkbox'}\n          {...props}\n        />\n        {loading && (\n          <CircularProgress\n            size={20}\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              marginTop: '-10px',\n              marginLeft: '-10px',\n              color: 'primary.main',\n            }}\n          />\n        )}\n      </div>\n    );\n    \n    if (label) {\n      return (\n        <div data-testid={testId('container')}>\n          <StyledFormControlLabel\n            control={checkbox}\n            label={label}\n            error={error}\n            disabled={isDisabled}\n          />\n          {helperText && (\n            <StyledFormHelperText \n              error={error}\n              data-testid={testId('helper')}\n            >\n              {helperText}\n            </StyledFormHelperText>\n          )}\n        </div>\n      );\n    }\n    \n    return checkbox;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"mappings":"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","names":["glow","pulse"]}