cetec-design-system 3.5.1-0 → 4.0.0-0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useContext, useMemo, forwardRef, createElement, useLayoutEffect, useState, useRef, useSyncExternalStore, useCallback, useEffect, useId as useId$1, isValidElement, Children, cloneElement, useReducer } from "react";
+import { createContext, useContext, useMemo, forwardRef, createElement, useLayoutEffect, useState, useRef, useSyncExternalStore, useEffect, useCallback, useId as useId$1, isValidElement, Children, cloneElement, useReducer } from "react";
 import * as ReactDOM from "react-dom";
 import { b as breakpoints, c as containerSizes } from "./containerSizes-nJuD-1Ap.js";
 import { useForm } from "@tanstack/react-form";
@@ -543,8 +543,16 @@ const checkboxInput = /* @__PURE__ */ Object.assign(memo(checkboxInputFn.recipeF
   },
   getVariantProps: checkboxInputFn.getVariantProps
 });
-const codeFn = /* @__PURE__ */ createRecipe("code", {}, []);
-const codeVariantMap = {};
+const codeFn = /* @__PURE__ */ createRecipe("code", {
+  "variant": "subtle"
+}, []);
+const codeVariantMap = {
+  "variant": [
+    "subtle",
+    "outline",
+    "plain"
+  ]
+};
 const codeVariantKeys = Object.keys(codeVariantMap);
 const code = /* @__PURE__ */ Object.assign(memo(codeFn.recipeFn), {
   __recipe__: true,
@@ -883,24 +891,6 @@ const list = /* @__PURE__ */ Object.assign(memo(listFn.recipeFn), {
   },
   getVariantProps: listFn.getVariantProps
 });
-const preFn = /* @__PURE__ */ createRecipe("pre", {}, []);
-const preVariantMap = {};
-const preVariantKeys = Object.keys(preVariantMap);
-const pre = /* @__PURE__ */ Object.assign(memo(preFn.recipeFn), {
-  __recipe__: true,
-  __name__: "pre",
-  __getCompoundVariantCss__: preFn.__getCompoundVariantCss__,
-  raw: (props) => props,
-  variantKeys: preVariantKeys,
-  variantMap: preVariantMap,
-  merge(recipe) {
-    return mergeRecipes(this, recipe);
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, preVariantKeys);
-  },
-  getVariantProps: preFn.getVariantProps
-});
 const radioInputFn = /* @__PURE__ */ createRecipe("radioInput", {}, []);
 const radioInputVariantMap = {};
 const radioInputVariantKeys = Object.keys(radioInputVariantMap);
@@ -984,7 +974,7 @@ const spinnerVariantKeys = [
   "inverse",
   "centered"
 ];
-const getVariantProps$t = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const getVariantProps$v = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
 const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   __recipe__: false,
   __name__: "spinner",
@@ -1009,7 +999,7 @@ const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, spinnerVariantKeys);
   },
-  getVariantProps: getVariantProps$t
+  getVariantProps: getVariantProps$v
 });
 const tagFn = /* @__PURE__ */ createRecipe("tag", {
   "variant": "default",
@@ -1677,7 +1667,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps$s = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$u = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1688,7 +1678,7 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: getVariantProps$s
+  getVariantProps: getVariantProps$u
 });
 const alertDefaultVariants = {
   "tone": "info"
@@ -1731,7 +1721,7 @@ const alertFn = memo((props = {}) => {
 const alertVariantKeys = [
   "tone"
 ];
-const getVariantProps$r = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
+const getVariantProps$t = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
 const alert = /* @__PURE__ */ Object.assign(alertFn, {
   __recipe__: false,
   __name__: "alert",
@@ -1750,7 +1740,7 @@ const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps$1(props, alertVariantKeys);
   },
-  getVariantProps: getVariantProps$r
+  getVariantProps: getVariantProps$t
 });
 const autocompleteDefaultVariants = {
   "size": "md",
@@ -1807,7 +1797,7 @@ const autocompleteVariantKeys = [
   "layer",
   "size"
 ];
-const getVariantProps$q = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
+const getVariantProps$s = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
 const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   __recipe__: false,
   __name__: "autocomplete",
@@ -1829,7 +1819,7 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, autocompleteVariantKeys);
   },
-  getVariantProps: getVariantProps$q
+  getVariantProps: getVariantProps$s
 });
 const avatarDefaultVariants = {
   "size": "md",
@@ -1866,7 +1856,7 @@ const avatarVariantKeys = [
   "size",
   "shape"
 ];
-const getVariantProps$p = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const getVariantProps$r = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
 const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
   __name__: "avatar",
@@ -1891,7 +1881,7 @@ const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: getVariantProps$p
+  getVariantProps: getVariantProps$r
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1918,7 +1908,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$o = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$q = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1954,7 +1944,7 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$o
+  getVariantProps: getVariantProps$q
 });
 const breadcrumbsDefaultVariants = {};
 const breadcrumbsCompoundVariants = [];
@@ -1981,7 +1971,7 @@ const breadcrumbsFn = memo((props = {}) => {
   return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const breadcrumbsVariantKeys = [];
-const getVariantProps$n = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const getVariantProps$p = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
 const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   __recipe__: false,
   __name__: "breadcrumbs",
@@ -1992,7 +1982,7 @@ const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, breadcrumbsVariantKeys);
   },
-  getVariantProps: getVariantProps$n
+  getVariantProps: getVariantProps$p
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -2023,7 +2013,7 @@ const buttonVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$m = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$o = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -2057,7 +2047,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$m
+  getVariantProps: getVariantProps$o
 });
 const calendarDefaultVariants = {
   "type": "days"
@@ -2096,7 +2086,7 @@ const calendarFn = memo((props = {}) => {
 const calendarVariantKeys = [
   "type"
 ];
-const getVariantProps$l = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
+const getVariantProps$n = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
 const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   __recipe__: false,
   __name__: "calendar",
@@ -2113,7 +2103,7 @@ const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, calendarVariantKeys);
   },
-  getVariantProps: getVariantProps$l
+  getVariantProps: getVariantProps$n
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -2140,7 +2130,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$k = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$m = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -2151,7 +2141,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$k
+  getVariantProps: getVariantProps$m
 });
 const chipDefaultVariants = {
   "size": "md"
@@ -2189,7 +2179,7 @@ const chipVariantKeys = [
   "after",
   "dismissable"
 ];
-const getVariantProps$j = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const getVariantProps$l = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
 const chip = /* @__PURE__ */ Object.assign(chipFn, {
   __recipe__: false,
   __name__: "chip",
@@ -2216,7 +2206,112 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, chipVariantKeys);
   },
-  getVariantProps: getVariantProps$j
+  getVariantProps: getVariantProps$l
+});
+const codeBlockDefaultVariants = {
+  "tone": "default",
+  "size": "md",
+  "wrap": false,
+  "lineNumbers": false,
+  "collapsed": false,
+  "actionGutter": false
+};
+const codeBlockCompoundVariants = [];
+const codeBlockSlotNames = [
+  [
+    "root",
+    "codeBlock__root"
+  ],
+  [
+    "header",
+    "codeBlock__header"
+  ],
+  [
+    "title",
+    "codeBlock__title"
+  ],
+  [
+    "actions",
+    "codeBlock__actions"
+  ],
+  [
+    "floatingActions",
+    "codeBlock__floatingActions"
+  ],
+  [
+    "content",
+    "codeBlock__content"
+  ],
+  [
+    "pre",
+    "codeBlock__pre"
+  ],
+  [
+    "code",
+    "codeBlock__code"
+  ],
+  [
+    "line",
+    "codeBlock__line"
+  ],
+  [
+    "lineNumber",
+    "codeBlock__lineNumber"
+  ],
+  [
+    "expand",
+    "codeBlock__expand"
+  ]
+];
+const codeBlockSlotFns = /* @__PURE__ */ codeBlockSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, codeBlockDefaultVariants, getSlotCompoundVariant(codeBlockCompoundVariants, slotName))]);
+const codeBlockFn = memo((props = {}) => {
+  return Object.fromEntries(codeBlockSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const codeBlockVariantKeys = [
+  "tone",
+  "size",
+  "wrap",
+  "lineNumbers",
+  "collapsed",
+  "actionGutter"
+];
+const getVariantProps$k = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
+const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
+  __recipe__: false,
+  __name__: "codeBlock",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: codeBlockVariantKeys,
+  variantMap: {
+    "tone": [
+      "default",
+      "inverse"
+    ],
+    "size": [
+      "sm",
+      "md"
+    ],
+    "wrap": [
+      "true",
+      "false"
+    ],
+    "lineNumbers": [
+      "true",
+      "false"
+    ],
+    "collapsed": [
+      "true",
+      "false"
+    ],
+    "actionGutter": [
+      "true",
+      "false"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, codeBlockVariantKeys);
+  },
+  getVariantProps: getVariantProps$k
 });
 const dateMenusDefaultVariants = {};
 const dateMenusCompoundVariants = [];
@@ -2239,7 +2334,7 @@ const dateMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateMenusVariantKeys = [];
-const getVariantProps$i = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$j = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
 const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   __recipe__: false,
   __name__: "dateMenus",
@@ -2250,7 +2345,7 @@ const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$i
+  getVariantProps: getVariantProps$j
 });
 const dateTimeMenusDefaultVariants = {};
 const dateTimeMenusCompoundVariants = [];
@@ -2273,7 +2368,7 @@ const dateTimeMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateTimeMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateTimeMenusVariantKeys = [];
-const getVariantProps$h = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$i = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
 const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   __recipe__: false,
   __name__: "dateTimeMenus",
@@ -2284,6 +2379,80 @@ const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateTimeMenusVariantKeys);
   },
+  getVariantProps: getVariantProps$i
+});
+const drawerDefaultVariants = {
+  "side": "right",
+  "size": "md",
+  "scrollable": true
+};
+const drawerCompoundVariants = [];
+const drawerSlotNames = [
+  [
+    "overlay",
+    "drawer__overlay"
+  ],
+  [
+    "container",
+    "drawer__container"
+  ],
+  [
+    "header",
+    "drawer__header"
+  ],
+  [
+    "title",
+    "drawer__title"
+  ],
+  [
+    "closeButton",
+    "drawer__closeButton"
+  ],
+  [
+    "body",
+    "drawer__body"
+  ],
+  [
+    "footer",
+    "drawer__footer"
+  ]
+];
+const drawerSlotFns = /* @__PURE__ */ drawerSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, drawerDefaultVariants, getSlotCompoundVariant(drawerCompoundVariants, slotName))]);
+const drawerFn = memo((props = {}) => {
+  return Object.fromEntries(drawerSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const drawerVariantKeys = [
+  "side",
+  "size",
+  "scrollable"
+];
+const getVariantProps$h = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
+const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
+  __recipe__: false,
+  __name__: "drawer",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: drawerVariantKeys,
+  variantMap: {
+    "side": [
+      "right",
+      "left"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "full"
+    ],
+    "scrollable": [
+      "true",
+      "false"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, drawerVariantKeys);
+  },
   getVariantProps: getVariantProps$h
 });
 const formFieldDefaultVariants = {
@@ -15670,6 +15839,44 @@ function useContainerQuery(containerRef, size2, direction = "min") {
     () => false
   );
 }
+function useClipboard(options = {}) {
+  const { timeout = 2e3 } = options;
+  const [copied, setCopied] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const timerRef = useRef(null);
+  const attemptRef = useRef(0);
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const copy = useCallback(
+    async (text2) => {
+      const attempt = ++attemptRef.current;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setFailed(false);
+      try {
+        if (typeof navigator === "undefined" || !navigator.clipboard) {
+          throw new Error("Clipboard API is not available.");
+        }
+        await navigator.clipboard.writeText(text2);
+      } catch {
+        if (attempt !== attemptRef.current) return false;
+        setCopied(false);
+        setFailed(true);
+        return false;
+      }
+      if (attempt !== attemptRef.current) return true;
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), timeout);
+      return true;
+    },
+    [timeout]
+  );
+  return { copy, copied, failed };
+}
 const Tag = (props) => {
   const { variant, hue, iconBefore, iconAfter, children, ...rest } = props;
   const [className, otherProps] = splitProps(rest);
@@ -16925,36 +17132,207 @@ const ChipGroup = (props) => {
   ) });
 };
 const Code = (props) => {
-  const { lang, children, ...rest } = props;
+  const { variant, language, children, ...rest } = props;
   const [className, otherProps] = splitProps(rest);
   return /* @__PURE__ */ jsx(
     Box,
     {
       ...dsComponent("Code"),
       as: "code",
-      className: cx(code({}), className),
-      lang,
+      className: cx(code({ variant }), className),
+      "data-language": language,
       ...otherProps,
-      children: /* @__PURE__ */ jsx(Text, { color: "slate.0", children })
+      children
     }
   );
 };
-const Pre = (props) => {
+const DS_PART_ATTRIBUTE = "data-ds-part";
+const dsPart = (part) => ({
+  [DS_PART_ATTRIBUTE]: part
+});
+const stripTrailingNewline = (value) => value.replace(/\r?\n$/, "");
+const scrollbarHeight = (element) => {
+  const styles = getComputedStyle(element);
+  return Math.max(
+    0,
+    element.offsetHeight - element.clientHeight - parseFloat(styles.borderTopWidth) - parseFloat(styles.borderBottomWidth)
+  );
+};
+const CodeBlock = (props) => {
   const {
+    code: codeProp,
     children,
-    lang,
-    "data-ds-component": dsComponentName,
+    language,
+    title,
+    copyable = true,
+    copyLabel = "Copy code",
+    maxLines,
+    expanded: expandedProp,
+    defaultExpanded = false,
+    onExpandedChange,
+    lineNumbers = false,
+    tone = "default",
+    size: size2,
+    wrap,
+    style,
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
-  return /* @__PURE__ */ jsx(
+  const text2 = stripTrailingNewline(codeProp ?? children ?? "");
+  const lines = text2.split(/\r?\n/);
+  const lineCount = lines.length;
+  const showLineNumbers = lineNumbers !== false;
+  const lineStart = typeof lineNumbers === "object" ? lineNumbers.start : 1;
+  const lastLineNumber = lineStart + lineCount - 1;
+  const [expanded, setExpanded] = useControllableState({
+    value: expandedProp,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange
+  });
+  const canCollapse = maxLines !== void 0 && lineCount > maxLines;
+  const collapsed = canCollapse && !expanded;
+  const floatingCopy = copyable && title === void 0;
+  const classes = codeBlock({
+    tone,
+    size: size2,
+    wrap,
+    lineNumbers: showLineNumbers,
+    collapsed,
+    actionGutter: floatingCopy
+  });
+  const { copy, copied, failed } = useClipboard();
+  const labelId = useId$1();
+  const contentId = useId$1();
+  const contentRef = useRef(null);
+  const [overflowing, setOverflowing] = useState(false);
+  const [collapsedHeight, setCollapsedHeight] = useState();
+  useLayoutEffect(() => {
+    const element = contentRef.current;
+    if (!element) return void 0;
+    const measure = () => {
+      var _a;
+      const lastVisibleLine = collapsed && maxLines !== void 0 ? (_a = element.querySelector("code")) == null ? void 0 : _a.children[maxLines - 1] : void 0;
+      const pre = element.firstElementChild;
+      if (lastVisibleLine && pre) {
+        const bottom = lastVisibleLine.getBoundingClientRect().bottom - element.getBoundingClientRect().top + element.scrollTop + parseFloat(getComputedStyle(pre).paddingBottom) + scrollbarHeight(element);
+        setCollapsedHeight(Math.ceil(bottom));
+      } else {
+        setCollapsedHeight(void 0);
+      }
+      setOverflowing(
+        element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    const codeElement = element.querySelector("code");
+    if (codeElement) observer.observe(codeElement);
+    return () => observer.disconnect();
+  }, [text2, collapsed, maxLines, wrap, showLineNumbers, size2]);
+  const labelSource = typeof title === "string" ? title : language;
+  const label2 = labelSource ? `${labelSource} code block` : "Code block";
+  const rootStyle = {
+    "--code-block-max-lines": maxLines,
+    "--code-block-collapsed-h": collapsed && collapsedHeight !== void 0 ? `${String(collapsedHeight)}px` : void 0,
+    "--code-block-gutter": `${String(Math.max(lastLineNumber, 1)).length}ch`,
+    ...style
+  };
+  const copyButton = copyable ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...dsPart("copy"),
+      iconName: copied ? "check" : "copy",
+      altText: copied ? "Copied" : copyLabel,
+      variant: tone === "inverse" ? "primary" : "ghost",
+      size: "sm",
+      onClick: () => {
+        void copy(text2);
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
     Box,
     {
-      ...dsComponent("Pre", dsComponentName),
-      as: "pre",
-      className: cx(pre({}), className),
+      ...dsComponent("CodeBlock"),
+      className: cx(classes.root, className),
+      "data-language": language,
+      style: rootStyle,
       ...otherProps,
-      children: /* @__PURE__ */ jsx(Code, { lang, slot: "react", bg: "transparent", children })
+      children: [
+        /* @__PURE__ */ jsx(Box, { as: "span", id: labelId, srOnly: true, children: label2 }),
+        title !== void 0 && /* @__PURE__ */ jsxs(Box, { className: classes.header, children: [
+          /* @__PURE__ */ jsx(Box, { className: classes.title, children: title }),
+          copyButton && /* @__PURE__ */ jsx(Box, { className: classes.actions, children: copyButton })
+        ] }),
+        floatingCopy && /* @__PURE__ */ jsx(Box, { className: classes.floatingActions, children: copyButton }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: contentRef,
+            id: contentId,
+            className: classes.content,
+            ...overflowing && {
+              tabIndex: 0,
+              role: "region",
+              "aria-labelledby": labelId
+            },
+            children: /* @__PURE__ */ jsx(Box, { as: "pre", className: classes.pre, children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: "code",
+                className: cx(classes.code, language && `language-${language}`),
+                children: lines.map((line, index2) => /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    as: "span",
+                    className: classes.line,
+                    children: [
+                      showLineNumbers && /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          as: "span",
+                          "aria-hidden": "true",
+                          className: classes.lineNumber,
+                          "data-line": lineStart + index2
+                        }
+                      ),
+                      line
+                    ]
+                  },
+                  index2
+                ))
+              }
+            ) })
+          }
+        ),
+        canCollapse && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            as: "button",
+            type: "button",
+            ...dsPart("expand"),
+            className: classes.expand,
+            "aria-expanded": expanded,
+            "aria-controls": contentId,
+            onClick: () => setExpanded(!expanded),
+            children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: expanded ? "collapse-vertical" : "expand-vertical",
+                  size: "16",
+                  fill: "current",
+                  "aria-hidden": "true"
+                }
+              ),
+              expanded ? "Show less" : `Show all ${lineCount} lines`
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { as: "span", role: "status", "aria-live": "polite", srOnly: true, children: copied ? "Copied" : failed ? "Copy failed" : "" })
+      ]
     }
   );
 };
@@ -21513,6 +21891,216 @@ const DateTimeRangePicker = (props) => {
     }
   );
 };
+const DrawerContext = createContext(null);
+const useDrawerContext = () => {
+  const context2 = useContext(DrawerContext);
+  if (!context2) {
+    throw new Error("Drawer components must be used within a <Drawer>");
+  }
+  return context2;
+};
+const DRAWER_MOTION_MS = 200;
+const drawerPhaseReducer = (phase, action) => {
+  switch (action.type) {
+    case "open":
+      return "open";
+    case "startClosing":
+      return phase === "closed" ? phase : "closing";
+    case "finishClosing":
+      return "closed";
+    default:
+      return phase;
+  }
+};
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const Drawer = (props) => {
+  const {
+    open,
+    onOpenChange,
+    modal: modal2 = true,
+    side = "right",
+    size: size2 = "md",
+    preventOutsideClose = false,
+    initialFocus,
+    returnFocus = true,
+    children,
+    id,
+    ref,
+    onKeyDown,
+    onAnimationEnd,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer({ side, size: size2 });
+  const [phase, dispatch] = useReducer(
+    drawerPhaseReducer,
+    open ? "open" : "closed"
+  );
+  const panelRef = useRef(null);
+  const { refs, context: context2 } = useOverlayFloating({
+    open,
+    onOpenChange,
+    strategy: "fixed",
+    middleware: []
+  });
+  const dismiss = useDismiss(context2, {
+    escapeKey: modal2,
+    outsidePress: modal2 && !preventOutsideClose
+  });
+  const { getFloatingProps } = useInteractions([dismiss]);
+  useEffect(() => {
+    if (open) {
+      dispatch({ type: "open" });
+      return;
+    }
+    dispatch({ type: "startClosing" });
+    const timeout = setTimeout(
+      () => dispatch({ type: "finishClosing" }),
+      prefersReducedMotion() ? 0 : DRAWER_MOTION_MS
+    );
+    return () => clearTimeout(timeout);
+  }, [open]);
+  const setPanelRef = useCallback(
+    (node) => {
+      panelRef.current = node;
+      refs.setFloating(node);
+    },
+    [refs]
+  );
+  const mergedPanelRef = useMergeRefs([setPanelRef, ref]);
+  const onClose = useCallback(() => {
+    if (open) {
+      onOpenChange(false);
+    }
+  }, [open, onOpenChange]);
+  const handleKeyDown = (event) => {
+    var _a;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (modal2 || event.key !== "Escape" || event.defaultPrevented) {
+      return;
+    }
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+    if (!((_a = panelRef.current) == null ? void 0 : _a.contains(event.target))) {
+      return;
+    }
+    event.stopPropagation();
+    onClose();
+  };
+  const contextValue = useMemo(
+    () => ({ open: phase === "open", onClose, modal: modal2 }),
+    [modal2, onClose, phase]
+  );
+  if (phase === "closed") {
+    return null;
+  }
+  const dataState = phase === "closing" ? "closing" : "open";
+  return /* @__PURE__ */ jsx(FloatingLayerContext.Provider, { value: "modalFloating", children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(DsChainPortalRoot, { children: [
+    modal2 && /* @__PURE__ */ jsx(
+      FloatingOverlay,
+      {
+        lockScroll: true,
+        className: classes.overlay,
+        "data-state": dataState,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FloatingFocusManager,
+      {
+        context: context2,
+        modal: modal2,
+        initialFocus: initialFocus ?? (modal2 ? 0 : panelRef),
+        returnFocus,
+        closeOnFocusOut: false,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ...dsComponent("Drawer"),
+            ref: mergedPanelRef,
+            className: cx(classes.container, className),
+            "data-state": dataState,
+            "data-side": side,
+            id,
+            role: "dialog",
+            "aria-modal": modal2 ? "true" : void 0,
+            ...getFloatingProps({
+              // Consumer props go through Floating UI so its handlers
+              // merge with them instead of being overwritten.
+              ...otherProps,
+              onKeyDown: handleKeyDown,
+              onAnimationEnd: (event) => {
+                onAnimationEnd == null ? void 0 : onAnimationEnd(event);
+                if (phase === "closing" && event.target === event.currentTarget) {
+                  dispatch({ type: "finishClosing" });
+                }
+              }
+            }),
+            children
+          }
+        )
+      }
+    )
+  ] }) }) }) });
+};
+const Heading = (props) => {
+  const { level = "h2", allCaps, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...dsComponent("Heading"),
+      as: level,
+      className: cx(heading({ level, allCaps }), className),
+      ...otherProps,
+      children
+    }
+  );
+};
+const DrawerHeader = (props) => {
+  const { title, titleId, showCloseButton = true, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer();
+  const { onClose } = useDrawerContext();
+  const isSm = useMediaQuery("sm");
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.header, className), ...otherProps, children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx(
+      Heading,
+      {
+        id: titleId,
+        level: "h3",
+        textStyle: { base: "heading.sm", sm: "heading.xs" },
+        className: classes.title,
+        children: title
+      }
+    ),
+    showCloseButton && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        size: isSm ? "md" : "lg",
+        onClick: onClose,
+        altText: "Close drawer",
+        "aria-label": "Close drawer",
+        className: classes.closeButton,
+        iconName: "x"
+      }
+    )
+  ] }) });
+};
+const DrawerBody = (props) => {
+  const { children, scrollable = true, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer({ scrollable });
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.body, className), ...otherProps, children });
+};
+const DrawerFooter = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
+};
 const Required = () => {
   return /* @__PURE__ */ jsx(Text, { color: "text.danger", fontSize: "inherit", lineHeight: "tight", children: "*" });
 };
@@ -21599,20 +22187,6 @@ const FormField = (props) => {
     }
   );
 };
-const Heading = (props) => {
-  const { level = "h2", allCaps, children, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      ...dsComponent("Heading"),
-      as: level,
-      className: cx(heading({ level, allCaps }), className),
-      ...otherProps,
-      children
-    }
-  );
-};
 const toneIconNames$2 = {
   info: "info",
   success: "success",
@@ -22272,10 +22846,6 @@ const RadioInput = (props) => {
     }
   );
 };
-const DS_PART_ATTRIBUTE = "data-ds-part";
-const dsPart = (part) => ({
-  [DS_PART_ATTRIBUTE]: part
-});
 const AutocompleteListbox = (props) => {
   const {
     activeIndex,
@@ -24366,6 +24936,7 @@ export {
   Chip,
   ChipGroup,
   Code,
+  CodeBlock,
   ConfirmationModal,
   DateInput,
   DateMenu,
@@ -24378,6 +24949,10 @@ export {
   DateTimePicker,
   DateTimeRangePicker,
   Divider,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
   DsChainScope,
   FormField,
   Heading,
@@ -24404,7 +24979,6 @@ export {
   ModalWrapper,
   Option,
   PageBanner,
-  Pre,
   Radio,
   RadioGroup,
   RadioInput,
@@ -24440,7 +25014,9 @@ export {
   isItemMatch,
   splitProps,
   useChipGroup,
+  useClipboard,
   useContainerQuery,
+  useDrawerContext,
   useForm2 as useForm,
   useIconConfig,
   useListContext,