@akhil-saxena/design-system 1.4.2 → 1.5.0

package/dist/index.js

@@ -542,6 +542,110 @@ function InlineEditField({
     }
   );
 }
+var wrapStyle2 = { width: "100%" };
+var triggerStyle = {
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  height: 40,
+  border: "1px dashed var(--rule-s)",
+  borderRadius: "var(--radius-sm)",
+  padding: "0 10px",
+  fontFamily: "var(--font)",
+  fontSize: 12,
+  color: "var(--ink-4)",
+  fontStyle: "italic",
+  cursor: "text",
+  background: "none",
+  textAlign: "left",
+  boxSizing: "border-box"
+};
+var activeStyle = {
+  display: "flex",
+  alignItems: "center",
+  height: 40,
+  border: "1px solid var(--amber)",
+  borderRadius: "var(--radius-sm)",
+  background: "var(--panel)",
+  boxShadow: "var(--focus-ring)",
+  boxSizing: "border-box",
+  overflow: "hidden"
+};
+var inputStyle = {
+  flex: 1,
+  border: "none",
+  background: "transparent",
+  outline: "none",
+  fontFamily: "var(--font)",
+  fontSize: 12,
+  padding: "0 10px",
+  height: "100%",
+  color: "var(--ink)"
+};
+var hintStyle = {
+  fontFamily: "var(--mono)",
+  fontSize: 9,
+  color: "var(--ink-4)",
+  padding: "0 10px",
+  flexShrink: 0,
+  letterSpacing: "0.04em",
+  whiteSpace: "nowrap"
+};
+var InlineAddRow = forwardRef(function InlineAddRow2({ placeholder = "Add\u2026", onSave, kbdHint = "\u21B5 \xB7 Esc", className, style }, ref) {
+  const [active, setActive] = useState(false);
+  const [value, setValue] = useState("");
+  const inputRef = useRef(null);
+  const save = () => {
+    const trimmed = value.trim();
+    if (trimmed) onSave(trimmed);
+    setValue("");
+    setActive(false);
+  };
+  const discard = () => {
+    setValue("");
+    setActive(false);
+  };
+  const activate = () => {
+    setActive(true);
+    requestAnimationFrame(() => inputRef.current?.focus());
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      save();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      discard();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `ds-atom-inline-add${className ? ` ${className}` : ""}`,
+      "data-active": active,
+      style: { ...wrapStyle2, ...style },
+      children: active ? /* @__PURE__ */ jsxs("div", { style: activeStyle, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown,
+            onBlur: discard,
+            placeholder,
+            "aria-label": placeholder,
+            style: inputStyle
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: hintStyle, children: kbdHint })
+      ] }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: activate, style: triggerStyle, children: placeholder })
+    }
+  );
+});
 var baseStyle2 = {
   display: "inline-block",
   fontFamily: "var(--mono)",
@@ -1097,9 +1201,10 @@ function deriveGradient(seed) {
   const idx = djb2(seed.toLowerCase()) % AVATAR_PALETTE.length;
   return AVATAR_PALETTE[idx] ?? AVATAR_PALETTE[0];
 }
-function deriveSolidColor(seed) {
-  const idx = djb2(seed.toLowerCase()) % SOLID_PALETTE.length;
-  return SOLID_PALETTE[idx] ?? SOLID_PALETTE[0];
+function deriveSolidColor(seed, palette = SOLID_PALETTE) {
+  const pool = palette.length > 0 ? palette : SOLID_PALETTE;
+  const idx = djb2(seed.toLowerCase()) % pool.length;
+  return pool[idx] ?? pool[0] ?? SOLID_PALETTE[0];
 }
 var presenceColors = {
   online: "var(--green-vivid)",
@@ -1110,6 +1215,8 @@ var presenceColors = {
 var Avatar = forwardRef(function Avatar2({
   name,
   initials,
+  seed,
+  palette,
   src,
   alt,
   gradient,
@@ -1120,14 +1227,14 @@ var Avatar = forwardRef(function Avatar2({
   style,
   ...rest
 }, ref) {
-  const seed = initials || name || "?";
+  const colorSeed = seed || initials || name || "?";
   const computedInitials = initials ?? deriveInitials(name);
   let background;
   if (gradient) {
-    const stops = Array.isArray(gradient) ? gradient : deriveGradient(seed);
+    const stops = Array.isArray(gradient) ? gradient : deriveGradient(colorSeed);
     background = `linear-gradient(145deg, ${stops[0]}, ${stops[1]})`;
   } else {
-    background = deriveSolidColor(seed);
+    background = deriveSolidColor(colorSeed, palette);
   }
   const containerStyle = {
     position: "relative",
@@ -1234,7 +1341,7 @@ var labelStyle = {
   color: "var(--ink)",
   userSelect: "none"
 };
-var inputStyle = {
+var inputStyle2 = {
   position: "absolute",
   width: 1,
   height: 1,
@@ -1281,7 +1388,7 @@ var Checkbox = forwardRef(function Checkbox2({ label, className, disabled, style
             type: "checkbox",
             className: "ds-atom-checkbox-input",
             disabled,
-            style: inputStyle,
+            style: inputStyle2,
             ...rest
           }
         ),
@@ -1341,7 +1448,7 @@ var labelStyle2 = {
   color: "var(--ink)",
   userSelect: "none"
 };
-var inputStyle2 = {
+var inputStyle3 = {
   position: "absolute",
   width: 1,
   height: 1,
@@ -1393,7 +1500,7 @@ var Radio = forwardRef(function Radio2({ label, className, disabled, value, name
               ctx?.onChange(value, e);
               onChange?.(e);
             },
-            style: inputStyle2,
+            style: inputStyle3,
             ...rest
           }
         ),
@@ -1413,7 +1520,7 @@ var labelStyle3 = {
   color: "var(--ink)",
   userSelect: "none"
 };
-var inputStyle3 = {
+var inputStyle4 = {
   position: "absolute",
   width: 1,
   height: 1,
@@ -1446,7 +1553,7 @@ var Toggle = forwardRef(function Toggle2({ label, className, disabled, style, ch
             disabled,
             checked,
             defaultChecked,
-            style: inputStyle3,
+            style: inputStyle4,
             ...rest
           }
         ),
@@ -3104,6 +3211,7 @@ function BottomSheet({
   height = "half",
   closeOnBackdropClick = true,
   dark,
+  trackKeyboard = true,
   className,
   style
 }) {
@@ -3115,6 +3223,7 @@ function BottomSheet({
   const dragStateRef = useRef(null);
   const [dragOffset, setDragOffset] = useState(0);
   const [dragging, setDragging] = useState(false);
+  const [kbOffset, setKbOffset] = useState(0);
   function handleHandlePointerDown(e) {
     if (!panelNode) return;
     dragStateRef.current = {
@@ -3160,6 +3269,22 @@ function BottomSheet({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
+  useEffect(() => {
+    if (!open || !trackKeyboard) return;
+    if (typeof window === "undefined") return;
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const update = () => {
+      const offset = window.innerHeight - vv.height - (vv.offsetTop ?? 0);
+      setKbOffset(Math.max(0, offset));
+    };
+    vv.addEventListener("resize", update);
+    update();
+    return () => {
+      vv.removeEventListener("resize", update);
+      setKbOffset(0);
+    };
+  }, [open, trackKeyboard]);
   if (!open) return null;
   const isDark = dark ?? document.documentElement.classList.contains("dark");
   function handleBackdropClick(e) {
@@ -3202,7 +3327,14 @@ function BottomSheet({
             ),
             title ? /* @__PURE__ */ jsx("header", { id: titleId, className: "ds-atom-bottomsheet-hd", children: title }) : null,
             /* @__PURE__ */ jsx("div", { className: "ds-atom-bottomsheet-body", children }),
-            footer ? /* @__PURE__ */ jsx("footer", { className: "ds-atom-bottomsheet-ft", children: footer }) : null
+            footer ? /* @__PURE__ */ jsx(
+              "footer",
+              {
+                className: "ds-atom-bottomsheet-ft",
+                style: kbOffset > 0 ? { paddingBottom: `${kbOffset}px` } : void 0,
+                children: footer
+              }
+            ) : null
           ]
         }
       )
@@ -3210,6 +3342,153 @@ function BottomSheet({
   ) });
   return /* @__PURE__ */ jsx(DSPortal, { children: isDark ? /* @__PURE__ */ jsx("div", { className: "dark", children: sheetEl }) : sheetEl });
 }
+var KEYFRAMES = `
+@keyframes ds-actionsheet-backdrop { from { opacity: 0 } to { opacity: 1 } }
+@keyframes ds-actionsheet-enter { from { transform: translateY(30px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
+@keyframes ds-actionsheet-enter-delayed { 0% { transform: translateY(30px); opacity: 0 } 8.3% { transform: translateY(30px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
+@media (prefers-reduced-motion: reduce) {
+	.ds-actionsheet-backdrop, .ds-actionsheet-items, .ds-actionsheet-cancel { animation: none !important }
+}
+`;
+var blockStyle = {
+  borderRadius: "var(--radius-lg)",
+  background: "var(--panel)",
+  overflow: "hidden",
+  boxShadow: "var(--shadow-3)"
+};
+var itemBase = {
+  display: "block",
+  width: "100%",
+  minHeight: 56,
+  background: "var(--panel)",
+  border: "none",
+  fontFamily: "var(--font)",
+  fontSize: 17,
+  textAlign: "center",
+  cursor: "pointer",
+  padding: "0 16px"
+};
+function ActionSheet({ open, onClose, items, cancelLabel = "Close" }) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      return;
+    }
+    const t = setTimeout(() => setVisible(false), 260);
+    return () => clearTimeout(t);
+  }, [open]);
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  if (!mounted || !visible) return null;
+  const fade = {
+    opacity: open ? 1 : 0,
+    transition: open ? void 0 : "opacity 260ms ease-in"
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "ds-actionsheet-backdrop",
+          onClick: onClose,
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.18)",
+            zIndex: 60,
+            animation: open ? "ds-actionsheet-backdrop 240ms ease-out both" : void 0,
+            ...fade
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: 8,
+            right: 8,
+            bottom: "calc(8px + env(safe-area-inset-bottom))",
+            zIndex: 61,
+            display: "flex",
+            flexDirection: "column",
+            gap: 8
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "menu",
+                className: "ds-actionsheet-items",
+                style: {
+                  ...blockStyle,
+                  animation: open ? "ds-actionsheet-enter 240ms cubic-bezier(0.32,0.72,0,1) both" : void 0,
+                  ...fade
+                },
+                children: items.map((item, idx) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => {
+                      item.onSelect();
+                      onClose();
+                    },
+                    style: {
+                      ...itemBase,
+                      borderBottom: idx < items.length - 1 ? "1px solid var(--rule)" : "none",
+                      color: item.variant === "destructive" ? "var(--red)" : "var(--ink)"
+                    },
+                    children: item.label
+                  },
+                  item.label
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ds-actionsheet-cancel",
+                style: {
+                  ...blockStyle,
+                  animation: open ? "ds-actionsheet-enter-delayed 240ms cubic-bezier(0.32,0.72,0,1) both" : void 0,
+                  ...fade
+                },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    style: { ...itemBase, fontWeight: 600, color: "var(--ink)" },
+                    children: cancelLabel
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
 function Lightbox({ open, onClose, items, activeIndex = 0, onIndexChange }) {
   const closeButtonRef = useRef(null);
   const length = items.length;
@@ -3730,6 +4009,7 @@ function SnackbarProvider({ children }) {
         action,
         duration,
         dismissible,
+        progress: opts?.progress ?? false,
         dismissing: false
       });
       if (Number.isFinite(duration)) {
@@ -3769,9 +4049,27 @@ function SnackbarProvider({ children }) {
     ) }) }) : null
   ] });
 }
+var PROGRESS_COLOR = {
+  neutral: "var(--amber)",
+  success: "var(--green, #1f8a5b)",
+  error: "var(--red, #9b2c2c)"
+};
+var PROGRESS_STYLE = `
+@keyframes ds-atom-snackbar-progress {
+	from { transform: scaleX(1); }
+	to { transform: scaleX(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+	.ds-atom-snackbar-progress {
+		animation: none !important;
+		transform: scaleX(1) !important;
+	}
+}
+`;
 function SnackbarNode({ entry, onAction, onDismiss }) {
   const role = entry.tone === "error" ? "alert" : "status";
   const ariaLive = role === "alert" ? "assertive" : "polite";
+  const showProgress = entry.progress && Number.isFinite(entry.duration);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3780,6 +4078,7 @@ function SnackbarNode({ entry, onAction, onDismiss }) {
       "data-dismissing": entry.dismissing ? "true" : void 0,
       role,
       "aria-live": ariaLive,
+      style: showProgress ? { position: "relative", overflow: "hidden" } : void 0,
       children: [
         /* @__PURE__ */ jsx("span", { className: "ds-atom-snackbar-msg", children: entry.message }),
         entry.action ? /* @__PURE__ */ jsx("button", { type: "button", className: "ds-atom-snackbar-action", onClick: onAction, children: entry.action.label }) : null,
@@ -3792,7 +4091,29 @@ function SnackbarNode({ entry, onAction, onDismiss }) {
             onClick: onDismiss,
             children: /* @__PURE__ */ jsx(X, { size: 14, "aria-hidden": "true" })
           }
-        ) : null
+        ) : null,
+        showProgress ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("style", { children: PROGRESS_STYLE }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ds-atom-snackbar-progress",
+              "data-testid": "ds-atom-snackbar-progress",
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: 0,
+                bottom: 0,
+                height: 2,
+                width: "100%",
+                transformOrigin: "left",
+                background: PROGRESS_COLOR[entry.tone],
+                // Pause depletion once dismissing so the slide-out reads cleanly.
+                animation: entry.dismissing ? void 0 : `ds-atom-snackbar-progress ${entry.duration}ms linear forwards`
+              }
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -5141,7 +5462,7 @@ function FileInput({
       }
     );
   }
-  const triggerStyle = {
+  const triggerStyle2 = {
     width: "100%",
     padding: 18,
     background: dragOver ? "var(--paper-deep)" : "var(--paper-warm)",
@@ -5185,7 +5506,7 @@ function FileInput({
           if (disabled) return;
           handlePickedFiles(e.dataTransfer.files);
         },
-        style: triggerStyle,
+        style: triggerStyle2,
         children: children ?? /* @__PURE__ */ jsx(DefaultDropzoneContent, {})
       }
     ),
@@ -5806,6 +6127,7 @@ function SegmentedControlInner({
       children: options.map((opt, i) => {
         const isActive = opt.value === value;
         const tabIndex = activeIndex >= 0 ? isActive ? 0 : -1 : i === fallbackTabIndex ? 0 : -1;
+        const toneStyle = isActive && opt.tone ? { background: opt.tone.activeBg, color: opt.tone.fg } : void 0;
         return /* @__PURE__ */ jsx(
           "button",
           {
@@ -5815,6 +6137,8 @@ function SegmentedControlInner({
             tabIndex,
             disabled: disabled || opt.disabled,
             "data-active": isActive ? "true" : void 0,
+            "data-toned": isActive && opt.tone ? "true" : void 0,
+            style: toneStyle,
             onClick: () => {
               if (!disabled && !opt.disabled) onChange(opt.value);
             },
@@ -10757,6 +11081,15 @@ lowlight.register("ts", typescript);
 lowlight.register("typescript", typescript);
 lowlight.register("json", json);
 lowlight.register("python", python);
+var HINT_ITEMS = [
+  { key: "\u2318B", label: "Bold" },
+  { key: "\u2318I", label: "Italic" },
+  { key: "\u2318U", label: "Underline" },
+  { key: "\u2318\u21E7H", label: "Highlight" },
+  { key: "\u2318K", label: "Link" },
+  { key: "\u2318\u21B5", label: "Save" },
+  { key: "Esc", label: "Discard" }
+];
 var CODE_LANGUAGES = [
   { value: "plaintext", label: "Plain text" },
   { value: "javascript", label: "JavaScript" },
@@ -10780,7 +11113,9 @@ var RichText = forwardRef(function RichText2({
   toolbar,
   className,
   ariaLabel = "Rich text editor",
-  style
+  style,
+  inline = false,
+  hints = false
 }, ref) {
   const lastEmittedRef = useRef(typeof value === "string" ? value : "");
   const linkBtnRef = useRef(null);
@@ -10790,6 +11125,7 @@ var RichText = forwardRef(function RichText2({
   const [headingOpen, setHeadingOpen] = useState(false);
   const [headingActiveIndex, setHeadingActiveIndex] = useState(0);
   const [codeBlockDark, setCodeBlockDark] = useState(false);
+  const [focused, setFocused] = useState(false);
   const editor = useEditor({
     extensions: [
       // Disable StarterKit's bundled Link and Underline so we can configure them ourselves.
@@ -10808,6 +11144,9 @@ var RichText = forwardRef(function RichText2({
     editable: !readOnly,
     // MANDATORY: SSR-safe per D-17-19. Without this TipTap throws during SSR hydration.
     immediatelyRender: false,
+    // Focus tracking only drives the optional `hints` strip; no behavioral impact when off.
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
     onUpdate: ({ editor: editor2 }) => {
       if (outputFormat === "json") {
         onChange(editor2.getJSON());
@@ -11134,30 +11473,84 @@ var RichText = forwardRef(function RichText2({
       ]
     }
   ) }) : null;
+  const inlineRootStyle = inline ? { border: "none", borderRadius: 0, background: "transparent", overflow: "visible" } : void 0;
+  const inlineSurfaceStyle = inline ? { padding: 0, minHeight: 0 } : void 0;
+  const hintStrip = hints && !readOnly ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "ds-atom-richtext-hints",
+      "aria-hidden": "true",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 14,
+        paddingLeft: inline ? 0 : 12,
+        paddingRight: inline ? 0 : 12,
+        // Collapse vertical space when unfocused so the default (unfocused)
+        // layout is unchanged; reveal on focus.
+        paddingTop: focused ? 6 : 0,
+        paddingBottom: focused ? inline ? 0 : 6 : 0,
+        borderTop: inline ? "none" : "1px solid var(--rule)",
+        fontFamily: "var(--mono)",
+        fontSize: 9.5,
+        color: "var(--ink-4)",
+        letterSpacing: "0.03em",
+        opacity: focused ? 1 : 0,
+        maxHeight: focused ? 200 : 0,
+        overflow: "hidden",
+        transition: "opacity 0.15s ease, max-height 0.15s ease"
+      },
+      children: HINT_ITEMS.map((h) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: { display: "inline-flex", alignItems: "center", gap: 5, color: "var(--ink-3)" },
+          children: [
+            /* @__PURE__ */ jsx(Kbd, { size: "sm", children: h.key }),
+            h.label
+          ]
+        },
+        h.key
+      ))
+    }
+  ) : null;
   if (!editor) {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: `ds-atom-richtext ds-atom-richtext--loading${className ? ` ${className}` : ""}`,
-        style,
+        style: { ...inlineRootStyle, ...style },
+        "data-inline": inline || void 0,
         "aria-label": ariaLabel,
         "aria-busy": "true"
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { ref, className: "ds-atom-richtext", style, "aria-label": ariaLabel, children: [
-    !readOnly && (toolbar ?? defaultToolbar),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: ["ds-atom-richtext-surface", className].filter(Boolean).join(" "),
-        "data-code-dark": codeBlockDark || void 0,
-        children: /* @__PURE__ */ jsx(EditorContent, { editor })
-      }
-    ),
-    linkPopover
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "ds-atom-richtext",
+      style: { ...inlineRootStyle, ...style },
+      "data-inline": inline || void 0,
+      "aria-label": ariaLabel,
+      children: [
+        !readOnly && (toolbar ?? defaultToolbar),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ["ds-atom-richtext-surface", className].filter(Boolean).join(" "),
+            "data-code-dark": codeBlockDark || void 0,
+            style: inlineSurfaceStyle,
+            children: /* @__PURE__ */ jsx(EditorContent, { editor })
+          }
+        ),
+        hintStrip,
+        linkPopover
+      ]
+    }
+  );
 });
 function readStorage(storageKey) {
   if (storageKey === null || storageKey === void 0) return false;
@@ -11845,6 +12238,6 @@ function Sortable({ items, onReorder, renderItem, id, className, style }) {
   );
 }
 
-export { Accordion2 as Accordion, AlertBanner, AppBar, AppShell, Autocomplete, Avatar, AvatarStack, Badge, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, Coachmark, ColorInput, ColorPicker, CommandPalette, ConfirmDialog, ContextMenu, CopyToClipboard, DSPortal, DataGrid, DatePicker, DateRangePicker, Divider, DotGrid, EmptyState, Eyebrow, FieldError, FileInput, Footer, FormErrorSummary, Heading, HoverCard, InfiniteList, InlineConfirm, InlineEdit, InlineEditField, Kbd, Lightbox, Link, MiniBar, MiniDonut, Modal, MultiSelect, NumberStepper, OAuthButton, Pagination, PasswordStrength, Popover, ProgressBar, Radio, RadioGroup, RangeSlider, RelativeTime, RichText, RollingNumber, SearchAndFilters, SegmentedControl, Select, Sheet, Skeleton, SnackbarProvider, Sortable, SortableDndContext, SortableItem, Sparkline, SplitButton, SplitHero, StarRating, StatCard, StatusPill, StickyNote, Table, Tabs, Text, TextInput, Textarea, Timeline, ToastProvider, Toggle, Tooltip, TypeToConfirm, Wizard, deriveGradient, deriveInitials, useSnackbar, useToast };
+export { Accordion2 as Accordion, ActionSheet, AlertBanner, AppBar, AppShell, Autocomplete, Avatar, AvatarStack, Badge, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, Coachmark, ColorInput, ColorPicker, CommandPalette, ConfirmDialog, ContextMenu, CopyToClipboard, DSPortal, DataGrid, DatePicker, DateRangePicker, Divider, DotGrid, EmptyState, Eyebrow, FieldError, FileInput, Footer, FormErrorSummary, Heading, HoverCard, InfiniteList, InlineAddRow, InlineConfirm, InlineEdit, InlineEditField, Kbd, Lightbox, Link, MiniBar, MiniDonut, Modal, MultiSelect, NumberStepper, OAuthButton, Pagination, PasswordStrength, Popover, ProgressBar, Radio, RadioGroup, RangeSlider, RelativeTime, RichText, RollingNumber, SearchAndFilters, SegmentedControl, Select, Sheet, Skeleton, SnackbarProvider, Sortable, SortableDndContext, SortableItem, Sparkline, SplitButton, SplitHero, StarRating, StatCard, StatusPill, StickyNote, Table, Tabs, Text, TextInput, Textarea, Timeline, ToastProvider, Toggle, Tooltip, TypeToConfirm, Wizard, deriveGradient, deriveInitials, useSnackbar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map