@frontify/fondue-components 29.0.1 → 29.2.0

package/dist/fondue-components.js

@@ -3,80 +3,82 @@ import { Accordion as t } from "./fondue-components3.js";
 import { Badge as m } from "./fondue-components4.js";
 import { Box as f } from "./fondue-components5.js";
 import { Button as a } from "./fondue-components6.js";
-import { Checkbox as l } from "./fondue-components7.js";
-import { ColorPicker as c } from "./fondue-components8.js";
-import { Dialog as g } from "./fondue-components9.js";
-import { Divider as S } from "./fondue-components10.js";
-import { Dropdown as L } from "./fondue-components11.js";
-import { DatePicker as B } from "./fondue-components12.js";
-import { EditableText as k } from "./fondue-components13.js";
-import { Flex as D } from "./fondue-components14.js";
-import { Flyout as v } from "./fondue-components15.js";
-import { Grid as w } from "./fondue-components16.js";
-import { Heading as R } from "./fondue-components17.js";
-import { Label as E } from "./fondue-components18.js";
-import { Link as H } from "./fondue-components19.js";
-import { LoadingBar as N } from "./fondue-components20.js";
-import { LoadingCircle as j } from "./fondue-components21.js";
-import { Notice as z } from "./fondue-components22.js";
-import { OrderableList as K } from "./fondue-components23.js";
-import { RadioList as Q } from "./fondue-components24.js";
-import { RouterProvider as V } from "./fondue-components25.js";
-import { ScrollArea as X } from "./fondue-components26.js";
-import { Section as Z } from "./fondue-components27.js";
-import { SegmentedControl as $ } from "./fondue-components28.js";
-import { Select as ro } from "./fondue-components29.js";
-import { Slider as to } from "./fondue-components30.js";
-import { SplitButton as mo } from "./fondue-components31.js";
-import { Switch as fo } from "./fondue-components32.js";
-import { Table as ao } from "./fondue-components33.js";
-import { Tag as no } from "./fondue-components34.js";
-import { Tabs as To } from "./fondue-components35.js";
-import { Text as uo } from "./fondue-components36.js";
-import { TextInput as bo } from "./fondue-components37.js";
-import { Textarea as ho } from "./fondue-components38.js";
-import { ThemeContext as Co, ThemeProvider as ko, useFondueTheme as so } from "./fondue-components39.js";
-import { Tooltip as Po } from "./fondue-components40.js";
+import { Card as l } from "./fondue-components7.js";
+import { Checkbox as c } from "./fondue-components8.js";
+import { ColorPicker as g } from "./fondue-components9.js";
+import { Dialog as S } from "./fondue-components10.js";
+import { Divider as C } from "./fondue-components11.js";
+import { Dropdown as h } from "./fondue-components12.js";
+import { DatePicker as k } from "./fondue-components13.js";
+import { EditableText as D } from "./fondue-components14.js";
+import { Flex as v } from "./fondue-components15.js";
+import { Flyout as w } from "./fondue-components16.js";
+import { Grid as R } from "./fondue-components17.js";
+import { Heading as E } from "./fondue-components18.js";
+import { Label as H } from "./fondue-components19.js";
+import { Link as N } from "./fondue-components20.js";
+import { LoadingBar as j } from "./fondue-components21.js";
+import { LoadingCircle as z } from "./fondue-components22.js";
+import { Notice as K } from "./fondue-components23.js";
+import { OrderableList as Q } from "./fondue-components24.js";
+import { RadioList as V } from "./fondue-components25.js";
+import { RouterProvider as X } from "./fondue-components26.js";
+import { ScrollArea as Z } from "./fondue-components27.js";
+import { Section as $ } from "./fondue-components28.js";
+import { SegmentedControl as ro } from "./fondue-components29.js";
+import { Select as to } from "./fondue-components30.js";
+import { Slider as mo } from "./fondue-components31.js";
+import { SplitButton as fo } from "./fondue-components32.js";
+import { Switch as ao } from "./fondue-components33.js";
+import { Table as no } from "./fondue-components34.js";
+import { Tag as To } from "./fondue-components35.js";
+import { Tabs as uo } from "./fondue-components36.js";
+import { Text as bo } from "./fondue-components37.js";
+import { TextInput as Lo } from "./fondue-components38.js";
+import { Textarea as Bo } from "./fondue-components39.js";
+import { ThemeContext as so, ThemeProvider as Do, useFondueTheme as Po } from "./fondue-components40.js";
+import { Tooltip as Fo } from "./fondue-components41.js";
 export {
   t as Accordion,
   m as Badge,
   f as Box,
   a as Button,
-  l as Checkbox,
-  c as ColorPicker,
-  B as DatePicker,
-  g as Dialog,
-  S as Divider,
-  L as Dropdown,
-  k as EditableText,
-  D as Flex,
-  v as Flyout,
-  w as Grid,
-  R as Heading,
-  E as Label,
-  H as Link,
-  N as LoadingBar,
-  j as LoadingCircle,
-  z as Notice,
-  K as OrderableList,
-  Q as RadioList,
-  V as RouterProvider,
-  X as ScrollArea,
-  Z as Section,
-  $ as SegmentedControl,
-  ro as Select,
-  to as Slider,
-  mo as SplitButton,
-  fo as Switch,
-  ao as Table,
-  To as Tabs,
-  no as Tag,
-  uo as Text,
-  bo as TextInput,
-  ho as Textarea,
-  Co as ThemeContext,
-  ko as ThemeProvider,
-  Po as Tooltip,
-  so as useFondueTheme
+  l as Card,
+  c as Checkbox,
+  g as ColorPicker,
+  k as DatePicker,
+  S as Dialog,
+  C as Divider,
+  h as Dropdown,
+  D as EditableText,
+  v as Flex,
+  w as Flyout,
+  R as Grid,
+  E as Heading,
+  H as Label,
+  N as Link,
+  j as LoadingBar,
+  z as LoadingCircle,
+  K as Notice,
+  Q as OrderableList,
+  V as RadioList,
+  X as RouterProvider,
+  Z as ScrollArea,
+  $ as Section,
+  ro as SegmentedControl,
+  to as Select,
+  mo as Slider,
+  fo as SplitButton,
+  ao as Switch,
+  no as Table,
+  uo as Tabs,
+  To as Tag,
+  bo as Text,
+  Lo as TextInput,
+  Bo as Textarea,
+  so as ThemeContext,
+  Do as ThemeProvider,
+  Fo as Tooltip,
+  Po as useFondueTheme
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components10.js

@@ -1,38 +1,181 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as f from "@radix-ui/react-separator";
-import { forwardRef as p } from "react";
-import c from "./fondue-components57.js";
-const u = p(
-  ({
-    "data-test-id": t = "fondue-divider",
-    direction: a = "horizontal",
-    padding: r = "medium",
-    className: i = "",
-    variant: d = "solid",
-    color: e = "default",
-    as: n = "div",
-    decorative: m
-  }, s) => {
-    const l = n;
-    return /* @__PURE__ */ o(
-      f.Root,
-      {
-        ref: s,
-        className: [c.root, i].filter(Boolean).join(" "),
-        "data-variant": d,
-        "data-color": e,
-        "data-padding": r,
-        "data-test-id": t,
-        decorative: m,
-        "data-orientation": a,
-        asChild: !0,
-        children: /* @__PURE__ */ o(l, {})
-      }
-    );
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { IconCross as L } from "@frontify/fondue-icons";
+import * as r from "@radix-ui/react-dialog";
+import { createContext as _, forwardRef as d, useRef as k, useContext as G, useMemo as I } from "react";
+import { useSyncRefs as J } from "./fondue-components59.js";
+import { useTranslation as K } from "./fondue-components43.js";
+import { addShowFocusRing as Q, addAutoFocusAttribute as U } from "./fondue-components60.js";
+import { useFondueTheme as V, ThemeProvider as W } from "./fondue-components40.js";
+import s from "./fondue-components61.js";
+const D = _({ isModal: !1 });
+D.displayName = "DialogContext";
+const T = ({ children: t, modal: e, onOpenChange: a, open: i }) => {
+  const n = I(() => ({ isModal: e ?? !1 }), [e]);
+  return /* @__PURE__ */ o(D.Provider, { value: n, children: /* @__PURE__ */ o(r.Root, { open: i, onOpenChange: a, modal: e, children: t }) });
+};
+T.displayName = "Dialog.Root";
+const R = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ o(
+  r.Trigger,
+  {
+    onMouseDown: U,
+    "data-auto-focus-visible": "true",
+    "data-auto-focus-trigger": !0,
+    "data-test-id": a,
+    asChild: t,
+    ref: i,
+    children: e
+  }
+);
+R.displayName = "Dialog.Trigger";
+const X = ({ children: t, showUnderlay: e }) => {
+  const { isModal: a } = G(D);
+  return a ? /* @__PURE__ */ o(r.Overlay, { "data-visible": e, className: s.underlay, children: t }) : /* @__PURE__ */ o("div", { className: s.underlay, "data-visible": e, children: t });
+}, S = ({
+  maxWidth: t = "800px",
+  minWidth: e = "400px",
+  minHeight: a = "200px",
+  padding: i = "compact",
+  verticalAlign: n = "center",
+  "data-test-id": u = "fondue-dialog-content",
+  showUnderlay: c = !1,
+  rounded: p = !0,
+  onEscapeKeyDown: j,
+  children: A
+}, H) => {
+  const { theme: P, dir: N } = V(), l = k(null);
+  J(l, H);
+  const B = (z) => {
+    var C, v, x;
+    z.preventDefault();
+    const g = 'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', m = (C = l.current) == null ? void 0 : C.querySelector('[data-dialog-layout-component="body"]'), f = (v = l.current) == null ? void 0 : v.querySelector('[data-dialog-layout-component="footer"]'), y = (x = l.current) == null ? void 0 : x.querySelector('[data-dialog-layout-component="header"]'), b = (m == null ? void 0 : m.querySelector(g)) || (f == null ? void 0 : f.querySelector(g)) || (y == null ? void 0 : y.querySelector(g));
+    b instanceof HTMLElement && b.focus();
+  };
+  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(W, { theme: P, dir: N, children: /* @__PURE__ */ o(X, { showUnderlay: c, children: /* @__PURE__ */ o(
+    r.Content,
+    {
+      style: {
+        "--dialog-max-width": t,
+        "--dialog-min-width": e,
+        "--dialog-min-height": a
+      },
+      ref: l,
+      className: s.content,
+      onFocus: Q,
+      onOpenAutoFocus: B,
+      onEscapeKeyDown: j,
+      "data-dialog-padding": i,
+      "data-dialog-rounded": p,
+      "data-test-id": u,
+      "data-dialog-vertical-align": n,
+      dir: N,
+      children: A
+    }
+  ) }) }) });
+};
+S.displayName = "Dialog.Content";
+const h = ({
+  padding: t,
+  showBorder: e = !0,
+  showCloseButton: a = !0,
+  closeProps: i,
+  children: n,
+  "data-test-id": u = "fondue-dialog-header"
+}, c) => {
+  const { t: p } = K();
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      "data-test-id": u,
+      ref: c,
+      className: s.header,
+      "data-dialog-header-padding": t,
+      "data-show-border": e,
+      "data-dialog-layout-component": "header",
+      children: [
+        /* @__PURE__ */ o("div", { children: n }),
+        a && /* @__PURE__ */ o(
+          r.Close,
+          {
+            role: "button",
+            "data-test-id": `${u}-close`,
+            "aria-label": p("Dialog_close"),
+            ...i,
+            children: /* @__PURE__ */ o(L, { size: 20 })
+          }
+        )
+      ]
+    }
+  );
+};
+h.displayName = "Dialog.Header";
+const F = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, n) => /* @__PURE__ */ o(
+  "div",
+  {
+    "data-test-id": i,
+    ref: n,
+    className: s.footer,
+    "data-dialog-footer-padding": t,
+    "data-show-border": e,
+    "data-dialog-layout-component": "footer",
+    children: a
   }
 );
-u.displayName = "Divider";
+F.displayName = "Dialog.Footer";
+const q = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ o(
+  "div",
+  {
+    "data-test-id": a,
+    ref: i,
+    className: s.body,
+    "data-dialog-body-padding": t,
+    "data-dialog-layout-component": "body",
+    children: e
+  }
+);
+q.displayName = "Dialog.Body";
+const w = ({ children: t, "data-test-id": e = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ o("div", { "data-test-id": e, ref: a, className: s.sideContent, "data-dialog-layout-component": !0, children: t });
+w.displayName = "Dialog.SideContent";
+const M = ({ children: t }) => /* @__PURE__ */ o(r.Close, { asChild: !0, children: t });
+M.displayName = "Dialog.Close";
+const O = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
+  ...t,
+  props: {
+    ...t.props,
+    className: `${t.props.className || ""} ${s.screenReaderOnly}`.trim()
+  }
+} : t }) : /* @__PURE__ */ o(r.Title, { asChild: e, children: t });
+O.displayName = "Dialog.Title";
+const $ = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
+  ...t,
+  props: {
+    ...t.props,
+    className: `${t.props.className || ""} ${s.screenReaderOnly}`.trim()
+  }
+} : t }) : /* @__PURE__ */ o(r.Description, { asChild: e, children: t });
+$.displayName = "Dialog.Description";
+const st = {
+  Root: T,
+  Title: O,
+  Description: $,
+  Close: M,
+  Trigger: d(R),
+  Content: d(S),
+  Header: d(h),
+  Footer: d(F),
+  Body: d(q),
+  SideContent: d(w)
+};
 export {
-  u as Divider
+  st as Dialog,
+  q as DialogBody,
+  M as DialogClose,
+  S as DialogContent,
+  $ as DialogDescription,
+  F as DialogFooter,
+  h as DialogHeader,
+  T as DialogRoot,
+  w as DialogSideContent,
+  O as DialogTitle,
+  R as DialogTrigger
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport styles from './styles/divider.module.scss';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            padding = 'medium',\n            className = '',\n            variant = 'solid',\n            color = 'default',\n            as = 'div',\n            decorative,\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={[styles.root, className].filter(Boolean).join(' ')}\n                data-variant={variant}\n                data-color={color}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                data-orientation={direction}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","padding","className","variant","color","as","decorative","ref","Component","jsx","Separator","styles"],"mappings":";;;;AAgDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,EAAA,GAEJC,MACe;AACf,UAAMC,IAAYH;AAElB,WACI,gBAAAI;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAW,CAACI,EAAO,MAAMT,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAC5D,gBAAcC;AAAA,QACd,cAAYC;AAAA,QACZ,gBAAcH;AAAA,QACd,gBAAcF;AAAA,QACd,YAAAO;AAAA,QACA,oBAAkBN;AAAA,QAClB,SAAO;AAAA,QAEP,4BAACQ,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvB;AACJ;AAEAX,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = {\n    children?: ReactNode;\n    asChild?: boolean;\n    /**\n     * Visually hide the element while keeping it accessible to screen readers\n     * @default false\n     */\n    screenReaderOnly?: boolean;\n};\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, modal, onOpenChange, open }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: modal ?? false }), [modal]);\n\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n                {children}\n            </RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        onEscapeKeyDown,\n        children,\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const focusableSelector =\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n        // Try to find focusable element in order: body -> footer -> header\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n        const dialogFooter = contentRef.current?.querySelector('[data-dialog-layout-component=\"footer\"]');\n        const dialogHeader = contentRef.current?.querySelector('[data-dialog-layout-component=\"header\"]');\n\n        const firstFocusable =\n            dialogBody?.querySelector(focusableSelector) ||\n            dialogFooter?.querySelector(focusableSelector) ||\n            dialogHeader?.querySelector(focusableSelector);\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        onEscapeKeyDown={onEscapeKeyDown}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        dir={dir}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    aria-label={t('Dialog_close')}\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Title asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Title>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Title asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Title>\n        );\n    }\n\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Description asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Description>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Description asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Description>\n        );\n    }\n\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","modal","onOpenChange","open","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","onEscapeKeyDown","theme","dir","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","focusableSelector","dialogBody","_a","dialogFooter","_b","dialogHeader","_c","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","t","useTranslation","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","screenReaderOnly","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components100.js

@@ -1,26 +1,11 @@
-const t = "_table_1v3sd_4", o = "_headerCell_1v3sd_18", e = "_rowCell_1v3sd_19", _ = "_row_1v3sd_19", s = "_caption_1v3sd_76", n = "_header_1v3sd_18", d = "_cellContent_1v3sd_124", l = "_sortIndicator_1v3sd_152", c = "_body_1v3sd_162", r = "_buttonText_1v3sd_235", a = {
-  table: t,
-  headerCell: o,
-  rowCell: e,
-  row: _,
-  caption: s,
-  header: n,
-  cellContent: d,
-  sortIndicator: l,
-  body: c,
-  buttonText: r
-};
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import m from "./fondue-components134.js";
+const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
+t.displayName = "Select.Slot";
+const S = d(t);
 export {
-  c as body,
-  r as buttonText,
-  s as caption,
-  d as cellContent,
-  a as default,
-  n as header,
-  o as headerCell,
-  _ as row,
-  e as rowCell,
-  l as sortIndicator,
-  t as table
+  S as ForwardedRefSelectSlot,
+  t as SelectSlot
 };
 //# sourceMappingURL=fondue-components100.js.map

package/dist/fondue-components100.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components100.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components100.js","sources":["../src/components/Select/components/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}

package/dist/fondue-components101.js

@@ -1,37 +1,14 @@
-function s(e, n) {
-  const r = 'tr[tabindex="0"]', t = e.closest("table");
-  if (!t)
-    return null;
-  const o = Array.from(t.querySelectorAll(r)), l = o.indexOf(e) + (n === "ArrowUp" ? -1 : 1);
-  return l >= 0 && l < o.length ? o[l] : null;
-}
-function a(e) {
-  const n = e.target, r = n.closest("tr");
-  if (!r || n !== r || !["ArrowUp", "ArrowDown"].includes(e.key))
-    return;
-  const t = s(r, e.key);
-  t && (e.preventDefault(), t.focus());
-}
-const u = [HTMLButtonElement, HTMLAnchorElement], i = ["button", "link"];
-function f(e) {
-  if (!e)
-    return !1;
-  const { target: n, currentTarget: r } = e;
-  let t = n instanceof Element ? n : null;
-  if (!r.contains(t))
-    return !0;
-  for (; t && !(t instanceof HTMLTableRowElement); ) {
-    if (u.some((c) => t instanceof c))
-      return !0;
-    const o = t.getAttribute("role");
-    if (o && i.includes(o))
-      return !0;
-    t = t.parentElement;
-  }
-  return !1;
-}
+const t = "_root_1x5sc_5", c = "_thumb_1x5sc_17", o = "_track_1x5sc_21", s = "_range_1x5sc_28", _ = {
+  root: t,
+  thumb: c,
+  track: o,
+  range: s
+};
 export {
-  a as handleKeyDown,
-  f as shouldIgnoreRowClick
+  _ as default,
+  s as range,
+  t as root,
+  c as thumb,
+  o as track
 };
 //# sourceMappingURL=fondue-components101.js.map

package/dist/fondue-components101.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components101.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent, type MouseEvent } from 'react';\n\nfunction getAdjacentRow(currentRow: HTMLElement, key: 'ArrowUp' | 'ArrowDown'): HTMLElement | null {\n    const selector = 'tr[tabindex=\"0\"]';\n    const table = currentRow.closest('table');\n    if (!table) {\n        return null;\n    }\n\n    const rows = Array.from(table.querySelectorAll(selector));\n    const currentIndex = rows.indexOf(currentRow);\n    const nextIndex = currentIndex + (key === 'ArrowUp' ? -1 : 1);\n\n    return nextIndex >= 0 && nextIndex < rows.length ? (rows[nextIndex] as HTMLElement) : null;\n}\n\nexport function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n    const target = event.target as HTMLElement;\n    const currentRow = target.closest('tr');\n\n    if (!currentRow || target !== currentRow || !['ArrowUp', 'ArrowDown'].includes(event.key)) {\n        return;\n    }\n\n    const nextRow = getAdjacentRow(currentRow, event.key as 'ArrowUp' | 'ArrowDown');\n    if (nextRow) {\n        event.preventDefault();\n        nextRow.focus();\n    }\n}\n\nconst INTERACTIVE_ELEMENTS_LIST = [HTMLButtonElement, HTMLAnchorElement];\nconst INTERACTIVE_ROLES_LIST = ['button', 'link'];\n\nexport function shouldIgnoreRowClick(event?: MouseEvent): boolean {\n    if (!event) {\n        return false;\n    }\n\n    const { target, currentTarget } = event;\n\n    let element = target instanceof Element ? target : null;\n\n    if (!currentTarget.contains(element)) {\n        return true;\n    }\n\n    while (element && !(element instanceof HTMLTableRowElement)) {\n        if (INTERACTIVE_ELEMENTS_LIST.some((interactiveElement) => element instanceof interactiveElement)) {\n            return true;\n        }\n\n        const role = element.getAttribute('role');\n        if (role && INTERACTIVE_ROLES_LIST.includes(role)) {\n            return true;\n        }\n\n        element = element.parentElement;\n    }\n\n    return false;\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow","INTERACTIVE_ELEMENTS_LIST","INTERACTIVE_ROLES_LIST","shouldIgnoreRowClick","currentTarget","element","interactiveElement","role"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACD,WAAO;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAA,GACNE,EAAQ,MAAA;AAEhB;AAEA,MAAMC,IAA4B,CAAC,mBAAmB,iBAAiB,GACjEC,IAAyB,CAAC,UAAU,MAAM;AAEzC,SAASC,EAAqBL,GAA6B;AAC9D,MAAI,CAACA;AACD,WAAO;AAGX,QAAM,EAAE,QAAAC,GAAQ,eAAAK,EAAA,IAAkBN;AAElC,MAAIO,IAAUN,aAAkB,UAAUA,IAAS;AAEnD,MAAI,CAACK,EAAc,SAASC,CAAO;AAC/B,WAAO;AAGX,SAAOA,KAAW,EAAEA,aAAmB,wBAAsB;AACzD,QAAIJ,EAA0B,KAAK,CAACK,MAAuBD,aAAmBC,CAAkB;AAC5F,aAAO;AAGX,UAAMC,IAAOF,EAAQ,aAAa,MAAM;AACxC,QAAIE,KAAQL,EAAuB,SAASK,CAAI;AAC5C,aAAO;AAGX,IAAAF,IAAUA,EAAQ;AAAA,EACtB;AAEA,SAAO;AACX;"}
+{"version":3,"file":"fondue-components101.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/fondue-components102.js

@@ -1,14 +1,14 @@
-const n = "_root_bn9za_3", t = "_mainContent_bn9za_15", o = "_actionButton_bn9za_28", a = "_secondaryContent_bn9za_123", e = {
-  root: n,
-  mainContent: t,
-  actionButton: o,
-  secondaryContent: a
+const t = "_root_gywoe_3", o = "_content_gywoe_18", n = "_action_gywoe_22", c = "_actionButton_gywoe_200", _ = {
+  root: t,
+  content: o,
+  action: n,
+  actionButton: c
 };
 export {
-  o as actionButton,
-  e as default,
-  t as mainContent,
-  n as root,
-  a as secondaryContent
+  n as action,
+  c as actionButton,
+  o as content,
+  _ as default,
+  t as root
 };
 //# sourceMappingURL=fondue-components102.js.map

package/dist/fondue-components103.js

@@ -1,71 +1,10 @@
-import { useRef as W, useState as p, useEffect as w, useLayoutEffect as I } from "react";
-const T = (e, s) => e.filter((f) => {
-  var c;
-  const t = (c = f.ref) == null ? void 0 : c.current;
-  return t ? t.offsetLeft + t.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || t.offsetLeft - s.scrollLeft < 0 : !1;
-}), a = (e, s) => {
-  const f = s.current, t = e == null ? void 0 : e.querySelector('[data-state="active"]');
-  if (!e || !(t instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
-    return;
-  const u = getComputedStyle(e).direction === "rtl", r = (e == null ? void 0 : e.scrollLeft) > (t == null ? void 0 : t.offsetLeft), l = (t == null ? void 0 : t.offsetLeft) + (t == null ? void 0 : t.offsetWidth) > (e == null ? void 0 : e.offsetWidth), o = (n) => u ? e.offsetWidth - n - t.offsetWidth : n;
-  if (r) {
-    if (e.offsetWidth > t.offsetWidth + t.offsetLeft)
-      f.style.insetInlineStart = `${o(t.offsetLeft)}px`;
-    else {
-      const i = e.offsetWidth - t.offsetWidth;
-      f.style.insetInlineStart = `${o(i)}px`;
-    }
-    f.style.width = `${t == null ? void 0 : t.offsetWidth}px`;
-  } else if (l) {
-    const n = e.clientWidth - t.offsetWidth;
-    f.style.insetInlineStart = `${o(n)}px`, f.style.width = `${t.offsetWidth}px`;
-  } else
-    f.style.insetInlineStart = `${o(t.offsetLeft)}px`, f.style.width = `${t.offsetWidth}px`;
-}, b = ({
-  activeTab: e
-}) => {
-  const s = W(null), f = W(null), [t, c] = p([]), [u, r] = p([]);
-  return w(() => {
-    const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
-    n instanceof HTMLButtonElement && o instanceof HTMLDivElement && (a(o, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
-  }, [e, f]), I(() => {
-    var i;
-    const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
-    if (o instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
-      a(o, f);
-      const d = new MutationObserver(() => {
-        n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(o, f);
-      });
-      o.parentNode && d.observe(o.parentNode, { childList: !0 });
-      const h = new IntersectionObserver(
-        () => {
-          r(T(t, o)), a(o, f);
-        },
-        {
-          root: o,
-          threshold: 1
-        }
-      );
-      for (const v of t)
-        (i = v.ref) != null && i.current && h.observe(v.ref.current);
-      return () => {
-        h.disconnect(), d.disconnect();
-      };
-    }
-  }, [t, s, f]), {
-    triggerListRef: s,
-    activeIndicatorRef: f,
-    triggersOutOfView: u,
-    triggers: t,
-    addTrigger: (o) => {
-      o.previousElement || c((n) => [...n, o]), c((n) => {
-        const i = n.findIndex((d) => d.element === o.previousElement);
-        return n[i] = o, [...n];
-      });
-    }
-  };
+const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
+  root: t,
+  thumb: o
 };
 export {
-  b as useTabTriggers
+  s as default,
+  t as root,
+  o as thumb
 };
 //# sourceMappingURL=fondue-components103.js.map