@frontify/fondue-components 22.2.0 → 23.0.0

package/dist/fondue-components9.js

@@ -1,19 +1,20 @@
-import { jsx as o, jsxs as P } from "react/jsx-runtime";
+import { jsx as e, jsxs as P } from "react/jsx-runtime";
 import { IconCross as j } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dialog";
 import { createContext as q, forwardRef as l, useRef as B, useContext as z, useMemo as E } from "react";
-import { useSyncRefs as L } from "./fondue-components48.js";
-import { addShowFocusRing as $, addAutoFocusAttribute as k } from "./fondue-components49.js";
+import { useSyncRefs as L } from "./fondue-components49.js";
+import { useTranslation as _ } from "./fondue-components34.js";
+import { addShowFocusRing as $, addAutoFocusAttribute as k } from "./fondue-components50.js";
 import { useFondueTheme as G, ThemeProvider as I } from "./fondue-components31.js";
-import n from "./fondue-components50.js";
-const m = q({ isModal: !1 });
-m.displayName = "DialogContext";
-const D = ({ children: t, modal: e, onOpenChange: a, open: i }) => {
-  const r = E(() => ({ isModal: e ?? !1 }), [e]);
-  return /* @__PURE__ */ o(m.Provider, { value: r, children: /* @__PURE__ */ o(d.Root, { open: i, onOpenChange: a, modal: e, children: t }) });
+import n from "./fondue-components51.js";
+const p = q({ isModal: !1 });
+p.displayName = "DialogContext";
+const h = ({ children: t, modal: o, onOpenChange: a, open: i }) => {
+  const r = E(() => ({ isModal: o ?? !1 }), [o]);
+  return /* @__PURE__ */ e(p.Provider, { value: r, children: /* @__PURE__ */ e(d.Root, { open: i, onOpenChange: a, modal: o, children: t }) });
 };
-D.displayName = "Dialog.Root";
-const h = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ o(
+h.displayName = "Dialog.Root";
+const C = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ e(
   d.Trigger,
   {
     onMouseDown: k,
@@ -22,103 +23,106 @@ const h = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-tr
     "data-test-id": a,
     asChild: t,
     ref: i,
-    children: e
+    children: o
   }
 );
-h.displayName = "Dialog.Trigger";
-const J = ({ children: t, showUnderlay: e }) => {
-  const { isModal: a } = z(m);
-  return a ? /* @__PURE__ */ o(d.Overlay, { "data-visible": e, className: n.underlay, children: t }) : /* @__PURE__ */ o("div", { className: n.underlay, "data-visible": e, children: t });
-}, C = ({
+C.displayName = "Dialog.Trigger";
+const J = ({ children: t, showUnderlay: o }) => {
+  const { isModal: a } = z(p);
+  return a ? /* @__PURE__ */ e(d.Overlay, { "data-visible": o, className: n.underlay, children: t }) : /* @__PURE__ */ e("div", { className: n.underlay, "data-visible": o, children: t });
+}, N = ({
   maxWidth: t = "800px",
-  minWidth: e = "400px",
+  minWidth: o = "400px",
   minHeight: a = "200px",
   padding: i = "compact",
   verticalAlign: r = "center",
   "data-test-id": s = "fondue-dialog-content",
   showUnderlay: c = !1,
-  rounded: w = !0,
+  rounded: u = !0,
   children: S
 }, M) => {
-  const { theme: A, dir: p } = G(), u = B(null);
-  L(u, M);
+  const { theme: A, dir: f } = G(), g = B(null);
+  L(g, M);
   const H = (O) => {
     var y;
     O.preventDefault();
-    const g = (y = u.current) == null ? void 0 : y.querySelector('[data-dialog-layout-component="body"]'), f = g == null ? void 0 : g.querySelector(
+    const m = (y = g.current) == null ? void 0 : y.querySelector('[data-dialog-layout-component="body"]'), D = m == null ? void 0 : m.querySelector(
       'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
     );
-    f instanceof HTMLElement && f.focus();
+    D instanceof HTMLElement && D.focus();
   };
-  return /* @__PURE__ */ o(d.Portal, { children: /* @__PURE__ */ o(I, { theme: A, dir: p, children: /* @__PURE__ */ o(J, { showUnderlay: c, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(I, { theme: A, dir: f, children: /* @__PURE__ */ e(J, { showUnderlay: c, children: /* @__PURE__ */ e(
     d.Content,
     {
       style: {
         "--dialog-max-width": t,
-        "--dialog-min-width": e,
+        "--dialog-min-width": o,
         "--dialog-min-height": a
       },
-      ref: u,
+      ref: g,
       className: n.content,
       onFocus: $,
       onOpenAutoFocus: H,
       "data-dialog-padding": i,
-      "data-dialog-rounded": w,
+      "data-dialog-rounded": u,
       "data-test-id": s,
       "data-dialog-vertical-align": r,
-      dir: p,
+      dir: f,
       children: S
     }
   ) }) }) });
 };
-C.displayName = "Dialog.Content";
-const N = ({
+N.displayName = "Dialog.Content";
+const b = ({
   padding: t,
-  showBorder: e = !0,
+  showBorder: o = !0,
   showCloseButton: a = !0,
   closeProps: i,
   children: r,
   "data-test-id": s = "fondue-dialog-header"
-}, c) => /* @__PURE__ */ P(
-  "div",
-  {
-    "data-test-id": s,
-    ref: c,
-    className: n.header,
-    "data-dialog-header-padding": t,
-    "data-show-border": e,
-    "data-dialog-layout-component": "header",
-    children: [
-      /* @__PURE__ */ o("div", { children: r }),
-      a && /* @__PURE__ */ o(
-        d.Close,
-        {
-          role: "button",
-          "data-test-id": `${s}-close`,
-          className: "tw-cursor-pointer",
-          "aria-label": "Close",
-          ...i,
-          children: /* @__PURE__ */ o(j, { size: 20 })
-        }
-      )
-    ]
-  }
-);
-N.displayName = "Dialog.Header";
-const b = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ o(
+}, c) => {
+  const { t: u } = _();
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      "data-test-id": s,
+      ref: c,
+      className: n.header,
+      "data-dialog-header-padding": t,
+      "data-show-border": o,
+      "data-dialog-layout-component": "header",
+      children: [
+        /* @__PURE__ */ e("div", { children: r }),
+        a && /* @__PURE__ */ e(
+          d.Close,
+          {
+            role: "button",
+            "data-test-id": `${s}-close`,
+            className: "tw-cursor-pointer",
+            "aria-label": u("Dialog_close"),
+            ...i,
+            children: /* @__PURE__ */ e(j, { size: 20 })
+          }
+        )
+      ]
+    }
+  );
+};
+b.displayName = "Dialog.Header";
+const v = ({ padding: t, showBorder: o = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ e(
   "div",
   {
     "data-test-id": i,
     ref: r,
     className: n.footer,
     "data-dialog-footer-padding": t,
-    "data-show-border": e,
+    "data-show-border": o,
     "data-dialog-layout-component": "footer",
     children: a
   }
 );
-b.displayName = "Dialog.Footer";
-const v = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ o(
+v.displayName = "Dialog.Footer";
+const x = ({ padding: t, children: o, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ e(
   "div",
   {
     "data-test-id": a,
@@ -126,41 +130,41 @@ const v = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }
     className: n.body,
     "data-dialog-body-padding": t,
     "data-dialog-layout-component": "body",
-    children: e
+    children: o
   }
 );
-v.displayName = "Dialog.Body";
-const x = ({ children: t, "data-test-id": e = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ o("div", { "data-test-id": e, ref: a, className: n.sideContent, "data-dialog-layout-component": !0, children: t });
-x.displayName = "Dialog.SideContent";
-const F = ({ children: t }) => /* @__PURE__ */ o(d.Close, { asChild: !0, children: t });
+x.displayName = "Dialog.Body";
+const T = ({ children: t, "data-test-id": o = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: n.sideContent, "data-dialog-layout-component": !0, children: t });
+T.displayName = "Dialog.SideContent";
+const F = ({ children: t }) => /* @__PURE__ */ e(d.Close, { asChild: !0, children: t });
 F.displayName = "Dialog.Close";
-const R = ({ children: t, asChild: e }) => /* @__PURE__ */ o(d.Title, { asChild: e, children: t });
+const R = ({ children: t, asChild: o }) => /* @__PURE__ */ e(d.Title, { asChild: o, children: t });
 R.displayName = "Dialog.Title";
-const T = ({ children: t, asChild: e }) => /* @__PURE__ */ o(d.Description, { asChild: e, children: t });
-T.displayName = "Dialog.Description";
-const Z = {
-  Root: D,
+const w = ({ children: t, asChild: o }) => /* @__PURE__ */ e(d.Description, { asChild: o, children: t });
+w.displayName = "Dialog.Description";
+const tt = {
+  Root: h,
   Title: R,
-  Description: T,
+  Description: w,
   Close: F,
-  Trigger: l(h),
-  Content: l(C),
-  Header: l(N),
-  Footer: l(b),
-  Body: l(v),
-  SideContent: l(x)
+  Trigger: l(C),
+  Content: l(N),
+  Header: l(b),
+  Footer: l(v),
+  Body: l(x),
+  SideContent: l(T)
 };
 export {
-  Z as Dialog,
-  v as DialogBody,
+  tt as Dialog,
+  x as DialogBody,
   F as DialogClose,
-  C as DialogContent,
-  T as DialogDescription,
-  b as DialogFooter,
-  N as DialogHeader,
-  D as DialogRoot,
-  x as DialogSideContent,
+  N as DialogContent,
+  w as DialogDescription,
+  v as DialogFooter,
+  b as DialogHeader,
+  h as DialogRoot,
+  T as DialogSideContent,
   R as DialogTitle,
-  h as DialogTrigger
+  C as DialogTrigger
 };
 //# sourceMappingURL=fondue-components9.js.map

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.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 { 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    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 = { children?: ReactNode; asChild?: boolean };\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        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 dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\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                        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    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                    className=\"tw-cursor-pointer\"\n                    aria-label=\"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 }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\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","theme","dir","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.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    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 = { children?: ReactNode; asChild?: boolean };\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        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 dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\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                        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                    className=\"tw-cursor-pointer\"\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 }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\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","theme","dir","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","t","useTranslation","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components90.js

@@ -1,9 +1,5 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconCross as s } from "@frontify/fondue-icons";
-import { Button as o } from "./fondue-components6.js";
-import t from "./fondue-components70.js";
-const c = ({ onClear: r }) => /* @__PURE__ */ e(o, { "aria-label": "clear input", type: "button", size: "small", emphasis: "weak", aspect: "square", onPress: r, children: /* @__PURE__ */ e(s, { className: t.clearIcon, size: 16 }) });
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  c as SelectClear
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components90.js.map

package/dist/fondue-components90.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components90.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    return (\n        <Button aria-label=\"clear input\" type=\"button\" size=\"small\" emphasis=\"weak\" aspect=\"square\" onPress={onClear}>\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","jsx","Button","IconCross","styles"],"mappings":";;;;AAQO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAEtB,gBAAAC,EAACC,KAAO,cAAW,eAAc,MAAK,UAAS,MAAK,SAAQ,UAAS,QAAO,QAAO,UAAS,SAASF,GACjG,UAAA,gBAAAC,EAACE,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI,EAAA,CACtD;"}
+{"version":3,"file":"fondue-components90.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components91.js

@@ -0,0 +1,43 @@
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components68.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
+} : {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        r,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
+};
+export {
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
+};
+//# sourceMappingURL=fondue-components91.js.map

package/dist/fondue-components91.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components91.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}

package/dist/fondue-components92.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconCross as s } from "@frontify/fondue-icons";
+import { useTranslation as t } from "./fondue-components34.js";
+import { Button as a } from "./fondue-components6.js";
+import l from "./fondue-components71.js";
+const f = ({ onClear: r }) => {
+  const { t: o } = t();
+  return /* @__PURE__ */ e(
+    a,
+    {
+      "aria-label": o("Select_clear"),
+      type: "button",
+      size: "small",
+      emphasis: "weak",
+      aspect: "square",
+      onPress: r,
+      children: /* @__PURE__ */ e(s, { className: l.clearIcon, size: 16 })
+    }
+  );
+};
+export {
+  f as SelectClear
+};
+//# sourceMappingURL=fondue-components92.js.map

package/dist/fondue-components92.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components92.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    const { t } = useTranslation();\n\n    return (\n        <Button\n            aria-label={t('Select_clear')}\n            type=\"button\"\n            size=\"small\"\n            emphasis=\"weak\"\n            aspect=\"square\"\n            onPress={onClear}\n        >\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","t","useTranslation","jsx","Button","IconCross","styles"],"mappings":";;;;;AAUO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAAwC;AAClE,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,cAAYH,EAAE,cAAc;AAAA,MAC5B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,QAAO;AAAA,MACP,SAASD;AAAA,MAET,4BAACK,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/index.d.ts

@@ -780,6 +780,26 @@ declare type DropdownTriggerProps = {
 
 declare type DropdownViewportCollisionPadding = 'compact' | 'spacious';
 
+declare const enUS: {
+    ColorPicker_selectColor: string;
+    ColorPicker_selectFormat: string;
+    ColorPicker_hexValue: string;
+    ColorPicker_redChannel: string;
+    ColorPicker_greenChannel: string;
+    ColorPicker_blueChannel: string;
+    ColorPicker_opacity: string;
+    Dialog_close: string;
+    Flyout_close: string;
+    Select_clear: string;
+    Select_toggleMenu: string;
+    Switch_defaultLabel: string;
+    Table_sortByDescending: string;
+    Table_sortByAscending: string;
+    Table_sortDescending: string;
+    Table_sortAscending: string;
+    Badge_dismiss: string;
+};
+
 declare type ExtraAction = {
     icon: ReactElement;
     title: string;
@@ -1758,11 +1778,29 @@ declare type TableRootProps = {
      * @default 'small'
      */
     fontSize?: 'small' | 'medium';
+    /**
+     * Additional spacing between table cells (both horizontal and vertical)
+     *
+     * This value is added to the default cell spacing. For example, with `gutter="48px"`,
+     * cells will have 48px of additional space between them in both directions
+     * (24px added to each side).
+     *
+     * Accepts any CSS length value with units (e.g., '16px', '1rem', '48px')
+     *
+     * **Important:** Always include a unit, even for zero (use '0px', not '0')
+     * @default '0px'
+     */
+    gutter?: CSSProperties['borderSpacing'];
     /**
      * Whether header should stick to the top when scrolling
      * @deprecated Use `Table.Header sticky` prop instead. For sticky columns, use `Table.Body firstColumnSticky` or `lastColumnSticky` props
      */
     sticky?: 'head' | 'col' | 'both';
+    /**
+     * Whether to remove the top and bottom borders from the table
+     * @default false
+     */
+    noBorder?: boolean;
     children: ReactNode;
 } & CommonAriaAttrs_2 & Pick<AriaAttributes, 'aria-multiselectable'>;
 
@@ -2236,9 +2274,15 @@ declare type TextSize = 'x-small' | 'small' | 'medium' | 'large';
 
 declare type TextWeight = 'default' | 'strong' | 'x-strong';
 
-export declare const ThemeContext: Context<Pick<ThemeProviderProps, "dir" | "theme">>;
+export declare const ThemeContext: Context<ThemeContextValue>;
 
-export declare const ThemeProvider: ({ children, theme, dir, asChild }: ThemeProviderProps) => JSX_2.Element;
+declare type ThemeContextValue = {
+    theme: AvailableTheme;
+    dir: 'ltr' | 'rtl';
+    translations: Translations;
+};
+
+export declare const ThemeProvider: ({ children, theme, dir, translations, asChild, }: ThemeProviderProps) => JSX_2.Element;
 
 declare type ThemeProviderProps = {
     children: ReactNode;
@@ -2246,12 +2290,24 @@ declare type ThemeProviderProps = {
      * The theme to apply
      * @default "light"
      * */
-    theme: AvailableTheme;
+    theme?: AvailableTheme;
     /**
      * Direction to apply to the theme
      * @default "ltr"
      */
-    dir: 'ltr' | 'rtl';
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Translations object to use for component strings.
+     * Import from '@frontify/fondue/components/locales' or provide your own.
+     * Must be a complete Translations object.
+     * @default "enUS"
+     * @example
+     * ```tsx
+     * import { deDE } from '@frontify/fondue/components/locales';
+     * <ThemeProvider translations={deDE}>...</ThemeProvider>
+     * ```
+     */
+    translations?: Translations;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -2310,7 +2366,9 @@ declare type TooltipTriggerProps = {
     'data-test-id'?: string;
 };
 
-export declare const useFondueTheme: () => Pick<ThemeProviderProps, "dir" | "theme">;
+declare type Translations = typeof enUS;
+
+export declare const useFondueTheme: () => ThemeContextValue;
 
 export { }