@mastra/playground-ui 51.4.0-alpha.9 → 52.0.0-alpha.11

package/README.md

@@ -0,0 +1,34 @@
+# @mastra/playground-ui
+
+Reusable React components, hooks, domains, and design tokens used by Mastra Studio. It provides the UI building blocks for logs, memory, metrics, traces, and agent management.
+
+## Installation
+
+```bash
+npm install @mastra/playground-ui
+```
+
+## Usage
+
+Import the package styles once in your React application.
+
+```tsx
+import '@mastra/playground-ui/style.css';
+import { Button } from '@mastra/playground-ui/components/Button';
+
+export function SaveButton() {
+  return <Button>Save</Button>;
+}
+```
+
+## Documentation
+
+This README is the package guide. Import the global stylesheet once, then use the package's explicit `components/*`, `domains/*`, `hooks/*`, `icons/*`, `primitives/*`, `store/*`, `tokens`, and `utils/*` entry points rather than a package-root import.
+
+## Changelog
+
+See the [package changelog](https://github.com/mastra-ai/mastra/blob/main/packages/playground-ui/CHANGELOG.md) for version history and release notes.
+
+## Support
+
+We have an [open community Discord](https://discord.gg/mastra-ai). Come and say hello and let us know if you have any questions or need any help getting things running.

package/dist/components/ListSearch.cjs.js

@@ -2,71 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const useDebounce = require('use-debounce');
-const searchFieldBlock = require('../search-field-block-CiinIsub.cjs');
-const keyboard_useKeydown = require('../keyboard/use-keydown.cjs.js');
+const listSearch = require('../list-search-DqDHI-tP.cjs');
 
-const ListSearch = ({
-  onSearch,
-  label,
-  placeholder,
-  debounceMs = 300,
-  size,
-  value: controlledValue,
-  variant = "outline",
-  shortcutDisabled = false
-}) => {
-  const id = React.useId();
-  const [internalValue, setInternalValue] = React.useState(controlledValue ?? "");
-  const inputRef = React.useRef(null);
-  keyboard_useKeydown.useKeydown({
-    "mod+shift+f": () => {
-      if (shortcutDisabled) return;
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }
-  });
-  const debouncedSearch = useDebounce.useDebouncedCallback((val) => {
-    onSearch(val);
-  }, debounceMs);
-  React.useEffect(() => {
-    if (controlledValue !== void 0) {
-      debouncedSearch.cancel();
-      setInternalValue(controlledValue);
-    }
-  }, [controlledValue, debouncedSearch]);
-  React.useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);
-  const handleChange = React.useCallback(
-    (e) => {
-      setInternalValue(e.target.value);
-      debouncedSearch(e.target.value);
-    },
-    [debouncedSearch]
-  );
-  const handleReset = React.useCallback(() => {
-    setInternalValue("");
-    onSearch("");
-    debouncedSearch.cancel();
-  }, [onSearch, debouncedSearch]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    searchFieldBlock.SearchFieldBlock,
-    {
-      name: id,
-      label,
-      labelIsHidden: true,
-      placeholder,
-      value: internalValue,
-      onChange: handleChange,
-      onReset: handleReset,
-      size,
-      variant,
-      inputRef,
-      className: "w-full max-w-120"
-    }
-  );
-};
 
-exports.ListSearch = ListSearch;
+
+exports.ListSearch = listSearch.ListSearch;
 //# sourceMappingURL=ListSearch.cjs.js.map

package/dist/components/ListSearch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListSearch.cjs.js","sources":["../../src/ds/components/ListSearch/list-search.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks/fields/search-field-block';\nimport type { InputProps } from '@/ds/components/Input';\nimport { useKeydown } from '@/lib/keyboard';\n\nexport type ListSearchProps = {\n  onSearch: (search: string) => void;\n  label: string;\n  placeholder: string;\n  debounceMs?: number;\n  size?: InputProps['size'];\n  /**\n   * Optional controlled value. When provided, ListSearch stays in sync with this\n   * prop — useful when the parent needs to clear the input programmatically\n   * (e.g. from a Reset button). If omitted, ListSearch manages its own state.\n   */\n  value?: string;\n  variant?: InputProps['variant'];\n  /**\n   * Opts out of the Cmd/Ctrl+Shift+F focus shortcut. Pass this on secondary\n   * instances so two search fields on the same page don't fight over focus.\n   */\n  shortcutDisabled?: boolean;\n};\n\nexport const ListSearch = ({\n  onSearch,\n  label,\n  placeholder,\n  debounceMs = 300,\n  size,\n  value: controlledValue,\n  variant = 'outline',\n  shortcutDisabled = false,\n}: ListSearchProps) => {\n  const id = useId();\n  const [internalValue, setInternalValue] = useState(controlledValue ?? '');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useKeydown({\n    'mod+shift+f': () => {\n      if (shortcutDisabled) return;\n      inputRef.current?.focus();\n      inputRef.current?.select();\n    },\n  });\n\n  const debouncedSearch = useDebouncedCallback((val: string) => {\n    onSearch(val);\n  }, debounceMs);\n\n  // Sync internal state with controlled value (e.g. parent Reset clears it to '').\n  // Also cancel any pending debounced callback so a stale handleChange call\n  // can't overwrite the newly-applied controlled value.\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      debouncedSearch.cancel();\n      setInternalValue(controlledValue);\n    }\n  }, [controlledValue, debouncedSearch]);\n\n  useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setInternalValue(e.target.value);\n      debouncedSearch(e.target.value);\n    },\n    [debouncedSearch],\n  );\n\n  const handleReset = useCallback(() => {\n    setInternalValue('');\n    onSearch('');\n    debouncedSearch.cancel();\n  }, [onSearch, debouncedSearch]);\n\n  return (\n    <SearchFieldBlock\n      name={id}\n      label={label}\n      labelIsHidden\n      placeholder={placeholder}\n      value={internalValue}\n      onChange={handleChange}\n      onReset={handleReset}\n      size={size}\n      variant={variant}\n      inputRef={inputRef}\n      className=\"w-full max-w-120\"\n    />\n  );\n};\n"],"names":["useId","useState","useRef","useKeydown","useDebouncedCallback","useEffect","useCallback","jsx","SearchFieldBlock"],"mappings":";;;;;;;;;;AA0BO,MAAM,aAAa,CAAC;AAAA,EACzB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA,GAAa,GAAA;AAAA,EACb,IAAA;AAAA,EACA,KAAA,EAAO,eAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,gBAAA,GAAmB;AACrB,CAAA,KAAuB;AACrB,EAAA,MAAM,KAAKA,WAAA,EAAM;AACjB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,cAAA,CAAS,mBAAmB,EAAE,CAAA;AACxE,EAAA,MAAM,QAAA,GAAWC,aAAyB,IAAI,CAAA;AAE9C,EAAAC,8BAAA,CAAW;AAAA,IACT,eAAe,MAAM;AACnB,MAAA,IAAI,gBAAA,EAAkB;AACtB,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AACxB,MAAA,QAAA,CAAS,SAAS,MAAA,EAAO;AAAA,IAC3B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAA,GAAkBC,gCAAA,CAAqB,CAAC,GAAA,KAAgB;AAC5D,IAAA,QAAA,CAAS,GAAG,CAAA;AAAA,EACd,GAAG,UAAU,CAAA;AAKb,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAoB,MAAA,EAAW;AACjC,MAAA,eAAA,CAAgB,MAAA,EAAO;AACvB,MAAA,gBAAA,CAAiB,eAAe,CAAA;AAAA,IAClC;AAAA,EACF,CAAA,EAAG,CAAC,eAAA,EAAiB,eAAe,CAAC,CAAA;AAErC,EAAAA,eAAA,CAAU,MAAM,MAAM,eAAA,CAAgB,QAAO,EAAG,CAAC,eAAe,CAAC,CAAA;AAEjE,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAAC,CAAA,KAA2C;AAC1C,MAAA,gBAAA,CAAiB,CAAA,CAAE,OAAO,KAAK,CAAA;AAC/B,MAAA,eAAA,CAAgB,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,eAAe;AAAA,GAClB;AAEA,EAAA,MAAM,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,gBAAA,CAAiB,EAAE,CAAA;AACnB,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,eAAA,CAAgB,MAAA,EAAO;AAAA,EACzB,CAAA,EAAG,CAAC,QAAA,EAAU,eAAe,CAAC,CAAA;AAE9B,EAAA,uBACEC,cAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,EAAA;AAAA,MACN,KAAA;AAAA,MACA,aAAA,EAAa,IAAA;AAAA,MACb,WAAA;AAAA,MACA,KAAA,EAAO,aAAA;AAAA,MACP,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MACT,IAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;;;;"}
+{"version":3,"file":"ListSearch.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ListSearch.es.js

@@ -1,68 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect, useCallback } from 'react';
-import { useDebouncedCallback } from 'use-debounce';
-import { S as SearchFieldBlock } from '../search-field-block-D51aN1d9.js';
-import { useKeydown } from '../keyboard/use-keydown.es.js';
-
-const ListSearch = ({
-  onSearch,
-  label,
-  placeholder,
-  debounceMs = 300,
-  size,
-  value: controlledValue,
-  variant = "outline",
-  shortcutDisabled = false
-}) => {
-  const id = useId();
-  const [internalValue, setInternalValue] = useState(controlledValue ?? "");
-  const inputRef = useRef(null);
-  useKeydown({
-    "mod+shift+f": () => {
-      if (shortcutDisabled) return;
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }
-  });
-  const debouncedSearch = useDebouncedCallback((val) => {
-    onSearch(val);
-  }, debounceMs);
-  useEffect(() => {
-    if (controlledValue !== void 0) {
-      debouncedSearch.cancel();
-      setInternalValue(controlledValue);
-    }
-  }, [controlledValue, debouncedSearch]);
-  useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);
-  const handleChange = useCallback(
-    (e) => {
-      setInternalValue(e.target.value);
-      debouncedSearch(e.target.value);
-    },
-    [debouncedSearch]
-  );
-  const handleReset = useCallback(() => {
-    setInternalValue("");
-    onSearch("");
-    debouncedSearch.cancel();
-  }, [onSearch, debouncedSearch]);
-  return /* @__PURE__ */ jsx(
-    SearchFieldBlock,
-    {
-      name: id,
-      label,
-      labelIsHidden: true,
-      placeholder,
-      value: internalValue,
-      onChange: handleChange,
-      onReset: handleReset,
-      size,
-      variant,
-      inputRef,
-      className: "w-full max-w-120"
-    }
-  );
-};
-
-export { ListSearch };
+export { L as ListSearch } from '../list-search-DpTXULK9.js';
 //# sourceMappingURL=ListSearch.es.js.map

package/dist/components/ListSearch.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListSearch.es.js","sources":["../../src/ds/components/ListSearch/list-search.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks/fields/search-field-block';\nimport type { InputProps } from '@/ds/components/Input';\nimport { useKeydown } from '@/lib/keyboard';\n\nexport type ListSearchProps = {\n  onSearch: (search: string) => void;\n  label: string;\n  placeholder: string;\n  debounceMs?: number;\n  size?: InputProps['size'];\n  /**\n   * Optional controlled value. When provided, ListSearch stays in sync with this\n   * prop — useful when the parent needs to clear the input programmatically\n   * (e.g. from a Reset button). If omitted, ListSearch manages its own state.\n   */\n  value?: string;\n  variant?: InputProps['variant'];\n  /**\n   * Opts out of the Cmd/Ctrl+Shift+F focus shortcut. Pass this on secondary\n   * instances so two search fields on the same page don't fight over focus.\n   */\n  shortcutDisabled?: boolean;\n};\n\nexport const ListSearch = ({\n  onSearch,\n  label,\n  placeholder,\n  debounceMs = 300,\n  size,\n  value: controlledValue,\n  variant = 'outline',\n  shortcutDisabled = false,\n}: ListSearchProps) => {\n  const id = useId();\n  const [internalValue, setInternalValue] = useState(controlledValue ?? '');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useKeydown({\n    'mod+shift+f': () => {\n      if (shortcutDisabled) return;\n      inputRef.current?.focus();\n      inputRef.current?.select();\n    },\n  });\n\n  const debouncedSearch = useDebouncedCallback((val: string) => {\n    onSearch(val);\n  }, debounceMs);\n\n  // Sync internal state with controlled value (e.g. parent Reset clears it to '').\n  // Also cancel any pending debounced callback so a stale handleChange call\n  // can't overwrite the newly-applied controlled value.\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      debouncedSearch.cancel();\n      setInternalValue(controlledValue);\n    }\n  }, [controlledValue, debouncedSearch]);\n\n  useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setInternalValue(e.target.value);\n      debouncedSearch(e.target.value);\n    },\n    [debouncedSearch],\n  );\n\n  const handleReset = useCallback(() => {\n    setInternalValue('');\n    onSearch('');\n    debouncedSearch.cancel();\n  }, [onSearch, debouncedSearch]);\n\n  return (\n    <SearchFieldBlock\n      name={id}\n      label={label}\n      labelIsHidden\n      placeholder={placeholder}\n      value={internalValue}\n      onChange={handleChange}\n      onReset={handleReset}\n      size={size}\n      variant={variant}\n      inputRef={inputRef}\n      className=\"w-full max-w-120\"\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,aAAa,CAAC;AAAA,EACzB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA,GAAa,GAAA;AAAA,EACb,IAAA;AAAA,EACA,KAAA,EAAO,eAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,gBAAA,GAAmB;AACrB,CAAA,KAAuB;AACrB,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAA,CAAS,mBAAmB,EAAE,CAAA;AACxE,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAE9C,EAAA,UAAA,CAAW;AAAA,IACT,eAAe,MAAM;AACnB,MAAA,IAAI,gBAAA,EAAkB;AACtB,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AACxB,MAAA,QAAA,CAAS,SAAS,MAAA,EAAO;AAAA,IAC3B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAA,GAAkB,oBAAA,CAAqB,CAAC,GAAA,KAAgB;AAC5D,IAAA,QAAA,CAAS,GAAG,CAAA;AAAA,EACd,GAAG,UAAU,CAAA;AAKb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAoB,MAAA,EAAW;AACjC,MAAA,eAAA,CAAgB,MAAA,EAAO;AACvB,MAAA,gBAAA,CAAiB,eAAe,CAAA;AAAA,IAClC;AAAA,EACF,CAAA,EAAG,CAAC,eAAA,EAAiB,eAAe,CAAC,CAAA;AAErC,EAAA,SAAA,CAAU,MAAM,MAAM,eAAA,CAAgB,QAAO,EAAG,CAAC,eAAe,CAAC,CAAA;AAEjE,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,CAAA,KAA2C;AAC1C,MAAA,gBAAA,CAAiB,CAAA,CAAE,OAAO,KAAK,CAAA;AAC/B,MAAA,eAAA,CAAgB,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,eAAe;AAAA,GAClB;AAEA,EAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,gBAAA,CAAiB,EAAE,CAAA;AACnB,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,eAAA,CAAgB,MAAA,EAAO;AAAA,EACzB,CAAA,EAAG,CAAC,QAAA,EAAU,eAAe,CAAC,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,EAAA;AAAA,MACN,KAAA;AAAA,MACA,aAAA,EAAa,IAAA;AAAA,MACb,WAAA;AAAA,MACA,KAAA,EAAO,aAAA;AAAA,MACP,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MACT,IAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;;;;"}
+{"version":3,"file":"ListSearch.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/PageLayout.cjs.js

@@ -2,107 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../cn-DCPcv4xv.cjs');
+const noDataPageLayout = require('../no-data-page-layout-CBJ50ULk.cjs');
 const pageHeadingContext = require('../page-heading-context-Du-CpxAx.cjs');
-const index = require('../index-BRtrE4oe.cjs');
 
-function PageLayoutColumn({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid content-start", className), children });
-}
 
-function PageLayoutMainArea({ children, className, isCentered = false }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: utils_cn.cn(
-        "overflow-auto",
-        {
-          "flex items-center justify-center": isCentered
-        },
-        className
-      ),
-      children
-    }
-  );
-}
-
-function PageLayoutRoot({
-  children,
-  className,
-  width = "default",
-  height = "default"
-}) {
-  const pageHeading = pageHeadingContext.usePageHeading();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "main",
-    {
-      className: utils_cn.cn(
-        "grid w-full grid-rows-[auto_auto] content-start p-6",
-        {
-          "max-w-screen-lg mx-auto pt-8": width === "narrow",
-          "h-full grid-rows-[auto_1fr] overflow-y-auto": height === "full"
-        },
-        className
-        //   'LAYOUT_ROOT border border-dashed border-orange-400',
-      ),
-      children: [
-        pageHeading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sr-only", children: pageHeading }),
-        children
-      ]
-    }
-  );
-}
-
-const pageLayoutRowVariants = index.cva("flex justify-between gap-3", {
-  variants: {
-    align: {
-      start: "items-start",
-      center: "items-center"
-    },
-    stack: {
-      horizontal: "flex-row",
-      responsive: "flex-col items-stretch sm:flex-row"
-    }
-  },
-  compoundVariants: [
-    {
-      stack: "responsive",
-      align: "start",
-      class: "sm:items-start"
-    },
-    {
-      stack: "responsive",
-      align: "center",
-      class: "sm:items-center"
-    }
-  ],
-  defaultVariants: {
-    align: "start",
-    stack: "horizontal"
-  }
-});
-function PageLayoutRow({ children, className, align, stack }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(pageLayoutRowVariants({ align, stack }), className), children });
-}
-
-function PageLayoutTopArea({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid gap-4 pb-4", className), children });
-}
-
-const PageLayout = Object.assign(PageLayoutRoot, {
-  TopArea: PageLayoutTopArea,
-  MainArea: PageLayoutMainArea,
-  Column: PageLayoutColumn,
-  Row: PageLayoutRow
-});
-
-function NoDataPageLayout({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PageLayout, { width: "wide", height: "full", className: "grid-rows-[1fr]", children: /* @__PURE__ */ jsxRuntime.jsx(PageLayout.MainArea, { isCentered: true, children }) });
-}
 
+exports.NoDataPageLayout = noDataPageLayout.NoDataPageLayout;
+exports.PageLayout = noDataPageLayout.PageLayout;
 exports.PageHeadingContext = pageHeadingContext.PageHeadingContext;
 exports.usePageHeading = pageHeadingContext.usePageHeading;
-exports.NoDataPageLayout = NoDataPageLayout;
-exports.PageLayout = PageLayout;
 //# sourceMappingURL=PageLayout.cjs.js.map

package/dist/components/PageLayout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.cjs.js","sources":["../../src/ds/components/PageLayout/page-layout-column.tsx","../../src/ds/components/PageLayout/page-layout-main-area.tsx","../../src/ds/components/PageLayout/page-layout-root.tsx","../../src/ds/components/PageLayout/page-layout-row.tsx","../../src/ds/components/PageLayout/page-layout-top-area.tsx","../../src/ds/components/PageLayout/page-layout.tsx","../../src/ds/components/PageLayout/no-data-page-layout.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type PageLayoutColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function PageLayoutColumn({ children, className }: PageLayoutColumnProps) {\n  return <div className={cn('grid content-start', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type PageLayoutMainAreaProps = {\n  children: ReactNode;\n  className?: string;\n  isCentered?: boolean;\n};\n\nexport function PageLayoutMainArea({ children, className, isCentered = false }: PageLayoutMainAreaProps) {\n  return (\n    <div\n      className={cn(\n        'overflow-auto',\n        {\n          'flex items-center justify-center': isCentered,\n        },\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { usePageHeading } from './page-heading-context';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutRoot({\n  children,\n  className,\n  width = 'default',\n  height = 'default',\n}: {\n  children: ReactNode;\n  className?: string;\n  width?: 'default' | 'narrow' | 'wide';\n  height?: 'default' | 'full';\n}) {\n  const pageHeading = usePageHeading();\n\n  return (\n    <main\n      className={cn(\n        'grid w-full grid-rows-[auto_auto] content-start p-6',\n        {\n          'max-w-screen-lg mx-auto pt-8': width === 'narrow',\n          'h-full grid-rows-[auto_1fr] overflow-y-auto': height === 'full',\n        },\n        className,\n        //   'LAYOUT_ROOT border border-dashed border-orange-400',\n      )}\n    >\n      {pageHeading && <h1 className=\"sr-only\">{pageHeading}</h1>}\n      {children}\n    </main>\n  );\n}\n","import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst pageLayoutRowVariants = cva('flex justify-between gap-3', {\n  variants: {\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n    },\n    stack: {\n      horizontal: 'flex-row',\n      responsive: 'flex-col items-stretch sm:flex-row',\n    },\n  },\n  compoundVariants: [\n    {\n      stack: 'responsive',\n      align: 'start',\n      class: 'sm:items-start',\n    },\n    {\n      stack: 'responsive',\n      align: 'center',\n      class: 'sm:items-center',\n    },\n  ],\n  defaultVariants: {\n    align: 'start',\n    stack: 'horizontal',\n  },\n});\n\nexport type PageLayoutRowProps = {\n  children?: React.ReactNode;\n  className?: string;\n} & VariantProps<typeof pageLayoutRowVariants>;\n\nexport function PageLayoutRow({ children, className, align, stack }: PageLayoutRowProps) {\n  return <div className={cn(pageLayoutRowVariants({ align, stack }), className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutTopArea({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('grid gap-4 pb-4', className)}>{children}</div>;\n}\n","import { PageLayoutColumn } from './page-layout-column';\nimport { PageLayoutMainArea } from './page-layout-main-area';\nimport { PageLayoutRoot } from './page-layout-root';\nimport { PageLayoutRow } from './page-layout-row';\nimport { PageLayoutTopArea } from './page-layout-top-area';\n\nexport const PageLayout = Object.assign(PageLayoutRoot, {\n  TopArea: PageLayoutTopArea,\n  MainArea: PageLayoutMainArea,\n  Column: PageLayoutColumn,\n  Row: PageLayoutRow,\n});\n","import type { ReactNode } from 'react';\nimport { PageLayout } from './page-layout';\n\nexport function NoDataPageLayout({ children }: { title?: string; icon?: ReactNode; children: ReactNode }) {\n  return (\n    <PageLayout width=\"wide\" height=\"full\" className=\"grid-rows-[1fr]\">\n      <PageLayout.MainArea isCentered>{children}</PageLayout.MainArea>\n    </PageLayout>\n  );\n}\n"],"names":["cn","jsx","usePageHeading","jsxs","cva"],"mappings":"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"}
+{"version":3,"file":"PageLayout.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/PageLayout.es.js

@@ -1,102 +1,3 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { c as cn } from '../cn-B4oPhFx9.js';
-import { u as usePageHeading } from '../page-heading-context-D3yjYoJE.js';
-export { P as PageHeadingContext } from '../page-heading-context-D3yjYoJE.js';
-import { c as cva } from '../index-DsNrjFJd.js';
-
-function PageLayoutColumn({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("grid content-start", className), children });
-}
-
-function PageLayoutMainArea({ children, className, isCentered = false }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "overflow-auto",
-        {
-          "flex items-center justify-center": isCentered
-        },
-        className
-      ),
-      children
-    }
-  );
-}
-
-function PageLayoutRoot({
-  children,
-  className,
-  width = "default",
-  height = "default"
-}) {
-  const pageHeading = usePageHeading();
-  return /* @__PURE__ */ jsxs(
-    "main",
-    {
-      className: cn(
-        "grid w-full grid-rows-[auto_auto] content-start p-6",
-        {
-          "max-w-screen-lg mx-auto pt-8": width === "narrow",
-          "h-full grid-rows-[auto_1fr] overflow-y-auto": height === "full"
-        },
-        className
-        //   'LAYOUT_ROOT border border-dashed border-orange-400',
-      ),
-      children: [
-        pageHeading && /* @__PURE__ */ jsx("h1", { className: "sr-only", children: pageHeading }),
-        children
-      ]
-    }
-  );
-}
-
-const pageLayoutRowVariants = cva("flex justify-between gap-3", {
-  variants: {
-    align: {
-      start: "items-start",
-      center: "items-center"
-    },
-    stack: {
-      horizontal: "flex-row",
-      responsive: "flex-col items-stretch sm:flex-row"
-    }
-  },
-  compoundVariants: [
-    {
-      stack: "responsive",
-      align: "start",
-      class: "sm:items-start"
-    },
-    {
-      stack: "responsive",
-      align: "center",
-      class: "sm:items-center"
-    }
-  ],
-  defaultVariants: {
-    align: "start",
-    stack: "horizontal"
-  }
-});
-function PageLayoutRow({ children, className, align, stack }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(pageLayoutRowVariants({ align, stack }), className), children });
-}
-
-function PageLayoutTopArea({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-4 pb-4", className), children });
-}
-
-const PageLayout = Object.assign(PageLayoutRoot, {
-  TopArea: PageLayoutTopArea,
-  MainArea: PageLayoutMainArea,
-  Column: PageLayoutColumn,
-  Row: PageLayoutRow
-});
-
-function NoDataPageLayout({ children }) {
-  return /* @__PURE__ */ jsx(PageLayout, { width: "wide", height: "full", className: "grid-rows-[1fr]", children: /* @__PURE__ */ jsx(PageLayout.MainArea, { isCentered: true, children }) });
-}
-
-export { NoDataPageLayout, PageLayout, usePageHeading };
+export { N as NoDataPageLayout, P as PageLayout } from '../no-data-page-layout-CkhD1Xwb.js';
+export { P as PageHeadingContext, u as usePageHeading } from '../page-heading-context-D3yjYoJE.js';
 //# sourceMappingURL=PageLayout.es.js.map

package/dist/components/PageLayout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.es.js","sources":["../../src/ds/components/PageLayout/page-layout-column.tsx","../../src/ds/components/PageLayout/page-layout-main-area.tsx","../../src/ds/components/PageLayout/page-layout-root.tsx","../../src/ds/components/PageLayout/page-layout-row.tsx","../../src/ds/components/PageLayout/page-layout-top-area.tsx","../../src/ds/components/PageLayout/page-layout.tsx","../../src/ds/components/PageLayout/no-data-page-layout.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type PageLayoutColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function PageLayoutColumn({ children, className }: PageLayoutColumnProps) {\n  return <div className={cn('grid content-start', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type PageLayoutMainAreaProps = {\n  children: ReactNode;\n  className?: string;\n  isCentered?: boolean;\n};\n\nexport function PageLayoutMainArea({ children, className, isCentered = false }: PageLayoutMainAreaProps) {\n  return (\n    <div\n      className={cn(\n        'overflow-auto',\n        {\n          'flex items-center justify-center': isCentered,\n        },\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { usePageHeading } from './page-heading-context';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutRoot({\n  children,\n  className,\n  width = 'default',\n  height = 'default',\n}: {\n  children: ReactNode;\n  className?: string;\n  width?: 'default' | 'narrow' | 'wide';\n  height?: 'default' | 'full';\n}) {\n  const pageHeading = usePageHeading();\n\n  return (\n    <main\n      className={cn(\n        'grid w-full grid-rows-[auto_auto] content-start p-6',\n        {\n          'max-w-screen-lg mx-auto pt-8': width === 'narrow',\n          'h-full grid-rows-[auto_1fr] overflow-y-auto': height === 'full',\n        },\n        className,\n        //   'LAYOUT_ROOT border border-dashed border-orange-400',\n      )}\n    >\n      {pageHeading && <h1 className=\"sr-only\">{pageHeading}</h1>}\n      {children}\n    </main>\n  );\n}\n","import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst pageLayoutRowVariants = cva('flex justify-between gap-3', {\n  variants: {\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n    },\n    stack: {\n      horizontal: 'flex-row',\n      responsive: 'flex-col items-stretch sm:flex-row',\n    },\n  },\n  compoundVariants: [\n    {\n      stack: 'responsive',\n      align: 'start',\n      class: 'sm:items-start',\n    },\n    {\n      stack: 'responsive',\n      align: 'center',\n      class: 'sm:items-center',\n    },\n  ],\n  defaultVariants: {\n    align: 'start',\n    stack: 'horizontal',\n  },\n});\n\nexport type PageLayoutRowProps = {\n  children?: React.ReactNode;\n  className?: string;\n} & VariantProps<typeof pageLayoutRowVariants>;\n\nexport function PageLayoutRow({ children, className, align, stack }: PageLayoutRowProps) {\n  return <div className={cn(pageLayoutRowVariants({ align, stack }), className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutTopArea({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('grid gap-4 pb-4', className)}>{children}</div>;\n}\n","import { PageLayoutColumn } from './page-layout-column';\nimport { PageLayoutMainArea } from './page-layout-main-area';\nimport { PageLayoutRoot } from './page-layout-root';\nimport { PageLayoutRow } from './page-layout-row';\nimport { PageLayoutTopArea } from './page-layout-top-area';\n\nexport const PageLayout = Object.assign(PageLayoutRoot, {\n  TopArea: PageLayoutTopArea,\n  MainArea: PageLayoutMainArea,\n  Column: PageLayoutColumn,\n  Row: PageLayoutRow,\n});\n","import type { ReactNode } from 'react';\nimport { PageLayout } from './page-layout';\n\nexport function NoDataPageLayout({ children }: { title?: string; icon?: ReactNode; children: ReactNode }) {\n  return (\n    <PageLayout width=\"wide\" height=\"full\" className=\"grid-rows-[1fr]\">\n      <PageLayout.MainArea isCentered>{children}</PageLayout.MainArea>\n    </PageLayout>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageLayout.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Section.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const section = require('../section-LbaBW2X3.cjs');
+const section = require('../section-CzPerGGn.cjs');
 
 
 

package/dist/components/Section.es.js

@@ -1,2 +1,2 @@
-export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-D963QL3h.js';
+export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-BXEB4HRl.js';
 //# sourceMappingURL=Section.es.js.map

package/dist/components/SideDialog.cjs.js

@@ -14,7 +14,7 @@ const React = require('react');
 const Button = require('../Button-D10WB4vc.cjs');
 const buttonsGroup = require('../buttons-group-Cn36DWYX.cjs');
 const copyButton = require('../copy-button-BtnbaMvl.cjs');
-const section = require('../section-LbaBW2X3.cjs');
+const section = require('../section-CzPerGGn.cjs');
 const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
 const drawer = require('../drawer-mE9CCzMI.cjs');
 const utils_cn = require('../cn-DCPcv4xv.cjs');

package/dist/components/SideDialog.es.js

@@ -11,7 +11,7 @@ import { useState, useMemo } from 'react';
 import { B as Button } from '../Button-BsfLQEC6.js';
 import { B as ButtonsGroup } from '../buttons-group-BjM12HPx.js';
 import { C as CopyButton } from '../copy-button-BHmcGzIz.js';
-import { S as Section } from '../section-D963QL3h.js';
+import { S as Section } from '../section-BXEB4HRl.js';
 import { u as useTheme } from '../theme-provider-C9ih9jSS.js';
 import { j as DrawerInteractive, D as Drawer, l as DrawerPortal, a as DrawerBackdrop, q as DrawerViewport, k as DrawerPopup, o as DrawerTitle, e as DrawerDescription, c as DrawerClose } from '../drawer-4U7L_dHA.js';
 import { c as cn } from '../cn-B4oPhFx9.js';

package/dist/components/Switch.cjs.js

@@ -2,125 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../Switch.css');const jsxRuntime = require('react/jsx-runtime');
-const _switch = require('@base-ui/react/switch');
-const React = require('react');
-const utils_cn = require('../cn-DCPcv4xv.cjs');
+const _switch = require('../switch-DS4BaB8F.cjs');
 
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
 
-const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const Switch = React__namespace.forwardRef(
-  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {
-    const shouldRenderStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
-    const shouldRenderIcon = icon !== void 0 || shouldRenderStateIcons;
-    const singleIcon = shouldRenderStateIcons ? void 0 : icon;
-    const onIcon = checkedIcon ?? icon;
-    const offIcon = uncheckedIcon ?? icon;
-    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : { render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }), nativeButton: true };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      _switch.Switch.Root,
-      {
-        ref,
-        "data-slot": "switch",
-        className: utils_cn.cn(
-          "peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden",
-          "duration-normal transition-colors ease-out-custom motion-reduce:transition-none",
-          "hover:bg-neutral6/[0.18]",
-          "active:bg-neutral6/[0.22]",
-          "focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55 focus-visible:outline-solid",
-          "data-[checked]:bg-neutral6/[0.92]",
-          "data-[checked]:hover:bg-neutral6",
-          "data-[checked]:active:bg-neutral5",
-          "data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]",
-          "data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]",
-          className
-        ),
-        ...renderProps,
-        ...props,
-        children: [
-          asChild ? void 0 : children,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            _switch.Switch.Thumb,
-            {
-              "data-slot": "switch-thumb",
-              className: utils_cn.cn(
-                "switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6",
-                "duration-normal transition-[background-color,translate,width,transform] ease-out-custom motion-reduce:transition-none",
-                "group-active/switch:w-6 group-data-[disabled]/switch:w-5",
-                "data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0",
-                "group-active/switch:data-[checked]:translate-x-2",
-                "data-[disabled]:data-[checked]:bg-surface1/80 data-[disabled]:data-[unchecked]:bg-neutral6/[0.42]"
-              ),
-              children: shouldRenderIcon ? /* @__PURE__ */ jsxRuntime.jsx(SwitchThumbIcon, { checkedIcon: onIcon, icon: singleIcon, uncheckedIcon: offIcon }) : null
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Switch.displayName = "Switch";
-function SwitchThumbIcon({
-  checkedIcon,
-  icon,
-  uncheckedIcon
-}) {
-  const iconClassName = utils_cn.cn(
-    "absolute inset-0 flex items-center justify-center text-surface1",
-    "duration-normal transition-[color,opacity] ease-out-custom motion-reduce:transition-none",
-    "[&_svg]:stroke-2.5 [&_svg]:size-2.5"
-  );
-  if (icon !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "aria-hidden": true,
-        "data-slot": "switch-thumb-icon",
-        className: utils_cn.cn(iconClassName, "group-data-[checked]/switch:text-neutral6"),
-        children: icon
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    uncheckedIcon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "aria-hidden": true,
-        "data-slot": "switch-thumb-icon",
-        "data-switch-icon": "unchecked",
-        className: utils_cn.cn(iconClassName, "opacity-100 group-data-[checked]/switch:opacity-0"),
-        children: uncheckedIcon
-      }
-    ) : null,
-    checkedIcon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "aria-hidden": true,
-        "data-slot": "switch-thumb-icon",
-        "data-switch-icon": "checked",
-        className: utils_cn.cn(iconClassName, "text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100"),
-        children: checkedIcon
-      }
-    ) : null
-  ] });
-}
-
-exports.Switch = Switch;
+exports.Switch = _switch.Switch;
 //# sourceMappingURL=Switch.cjs.js.map

package/dist/components/Switch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs.js","sources":["../../src/ds/components/Switch/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport './switch.css';\n\ntype SwitchProps = Omit<SwitchPrimitive.Root.Props, 'className'> & {\n  className?: string;\n  /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n  asChild?: boolean;\n  icon?: React.ReactNode;\n  checkedIcon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n};\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {\n    const shouldRenderStateIcons = checkedIcon !== undefined || uncheckedIcon !== undefined;\n    const shouldRenderIcon = icon !== undefined || shouldRenderStateIcons;\n\n    const singleIcon = shouldRenderStateIcons ? undefined : icon;\n    const onIcon = checkedIcon ?? icon;\n    const offIcon = uncheckedIcon ?? icon;\n\n    // Base UI's Switch.Root defaults to a `<span>` and forwards `id` to its\n    // hidden checkbox input. Render a native `<button>` (with `nativeButton`) so\n    // the consumer's `id` — and the click target — lands on the visible control,\n    // matching the previous Radix behavior.\n    const renderProps =\n      asChild && React.isValidElement(children)\n        ? { render: children as React.ReactElement }\n        : { render: <button type=\"button\" />, nativeButton: true };\n\n    return (\n      <SwitchPrimitive.Root\n        ref={ref}\n        data-slot=\"switch\"\n        className={cn(\n          'peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden',\n          'duration-normal transition-colors ease-out-custom motion-reduce:transition-none',\n          'hover:bg-neutral6/[0.18]',\n          'active:bg-neutral6/[0.22]',\n          'focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55 focus-visible:outline-solid',\n          'data-[checked]:bg-neutral6/[0.92]',\n          'data-[checked]:hover:bg-neutral6',\n          'data-[checked]:active:bg-neutral5',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]',\n          'data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n        <SwitchPrimitive.Thumb\n          data-slot=\"switch-thumb\"\n          className={cn(\n            'switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6',\n            'duration-normal transition-[background-color,translate,width,transform] ease-out-custom motion-reduce:transition-none',\n            'group-active/switch:w-6 group-data-[disabled]/switch:w-5',\n            'data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0',\n            'group-active/switch:data-[checked]:translate-x-2',\n            'data-[disabled]:data-[checked]:bg-surface1/80 data-[disabled]:data-[unchecked]:bg-neutral6/[0.42]',\n          )}\n        >\n          {shouldRenderIcon ? <SwitchThumbIcon checkedIcon={onIcon} icon={singleIcon} uncheckedIcon={offIcon} /> : null}\n        </SwitchPrimitive.Thumb>\n      </SwitchPrimitive.Root>\n    );\n  },\n);\nSwitch.displayName = 'Switch';\n\nfunction SwitchThumbIcon({\n  checkedIcon,\n  icon,\n  uncheckedIcon,\n}: {\n  checkedIcon?: React.ReactNode;\n  icon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n}) {\n  const iconClassName = cn(\n    'absolute inset-0 flex items-center justify-center text-surface1',\n    'duration-normal transition-[color,opacity] ease-out-custom motion-reduce:transition-none',\n    '[&_svg]:stroke-2.5 [&_svg]:size-2.5',\n  );\n\n  if (icon !== undefined) {\n    return (\n      <span\n        aria-hidden\n        data-slot=\"switch-thumb-icon\"\n        className={cn(iconClassName, 'group-data-[checked]/switch:text-neutral6')}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      {uncheckedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"unchecked\"\n          className={cn(iconClassName, 'opacity-100 group-data-[checked]/switch:opacity-0')}\n        >\n          {uncheckedIcon}\n        </span>\n      ) : null}\n      {checkedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"checked\"\n          className={cn(iconClassName, 'text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100')}\n        >\n          {checkedIcon}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { Switch };\nexport type { SwitchProps };\n"],"names":["React","jsx","jsxs","SwitchPrimitive","cn","Fragment"],"mappings":"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"}
+{"version":3,"file":"Switch.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}