@frontify/fondue-components 27.0.1 → 28.0.0

package/dist/fondue-components13.js

@@ -1,125 +1,40 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { IconCross as x } from "@frontify/fondue-icons";
-import * as l from "@radix-ui/react-popover";
-import { forwardRef as i } from "react";
-import { useTranslation as I } from "./fondue-components39.js";
-import { addAutoFocusAttribute as _, addShowFocusRing as B } from "./fondue-components52.js";
-import { Button as O } from "./fondue-components6.js";
-import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components36.js";
-import u from "./fondue-components58.js";
-const f = ({ children: t, ...o }) => /* @__PURE__ */ e(l.Root, { ...o, children: t });
-f.displayName = "Flyout.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-flyout-trigger", ...r }, d) => /* @__PURE__ */ e(
-  l.Trigger,
-  {
-    onMouseDown: _,
-    "data-auto-focus-visible": "true",
-    "data-auto-focus-trigger": !0,
-    "data-test-id": a,
-    asChild: t,
-    ref: d,
-    ...r,
-    children: o
-  }
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { propsToCssVariables as y } from "./fondue-components43.js";
+import x from "./fondue-components61.js";
+const u = n(
+  ({
+    as: a = "div",
+    "data-test-id": e = "fondue-flex",
+    children: r,
+    role: i,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": t,
+    "aria-labelledby": o,
+    "aria-expanded": l,
+    "aria-haspopup": p,
+    ...b
+  }, f) => /* @__PURE__ */ m(
+    a,
+    {
+      className: x.root,
+      "data-test-id": e,
+      style: y(b, { justify: "justify-content" }),
+      role: i,
+      "aria-label": d,
+      "aria-hidden": s,
+      "aria-describedby": t,
+      "aria-labelledby": o,
+      "aria-expanded": l,
+      "aria-haspopup": p,
+      ref: f,
+      children: r
+    }
+  )
 );
-y.displayName = "Flyout.Trigger";
-const D = {
-  compact: 8,
-  comfortable: 12,
-  spacious: 16
-}, H = {
-  compact: 8,
-  spacious: 24
-}, p = ({
-  align: t = "start",
-  maxWidth: o = "360px",
-  padding: a = "compact",
-  rounded: r = "medium",
-  width: d = "fit-content",
-  shadow: n = "medium",
-  side: N,
-  triggerOffset: v = "compact",
-  viewportCollisionPadding: C = "compact",
-  "data-test-id": P = "fondue-flyout-content",
-  children: R,
-  ...b
-}, w) => {
-  const { theme: A, dir: c } = S(), T = (s) => !s || c === "ltr" ? s : s === "left" ? "right" : s === "right" ? "left" : s;
-  return /* @__PURE__ */ e(l.Portal, { children: /* @__PURE__ */ m(j, { theme: A, dir: c, children: [
-    /* @__PURE__ */ e("div", { "data-test-id": "fondue-flyout-overlay", className: u.overlay }),
-    /* @__PURE__ */ e(
-      l.Content,
-      {
-        dir: c,
-        style: {
-          "--flyout-max-width": o,
-          "--flyout-width": d
-        },
-        ref: w,
-        align: t,
-        collisionPadding: H[C],
-        sideOffset: D[v],
-        side: T(N),
-        className: u.root,
-        "data-flyout-spacing": a,
-        "data-rounded": r,
-        "data-shadow": n,
-        "data-test-id": P,
-        onFocus: B,
-        ...b,
-        children: R
-      }
-    )
-  ] }) });
-};
-p.displayName = "Flyout.Content";
-const F = ({ showCloseButton: t, children: o, "data-test-id": a = "fondue-flyout-header", closeProps: r }, d) => {
-  const { t: n } = I();
-  return /* @__PURE__ */ m("div", { "data-test-id": a, ref: d, className: u.header, children: [
-    /* @__PURE__ */ e("div", { children: o }),
-    t && /* @__PURE__ */ e(l.Close, { asChild: !0, ...r, children: /* @__PURE__ */ e(
-      O,
-      {
-        size: "small",
-        aspect: "square",
-        emphasis: "weak",
-        "aria-label": n("Flyout_close"),
-        "data-test-id": `${a}-close`,
-        children: /* @__PURE__ */ e(x, { size: 20 })
-      }
-    ) })
-  ] });
-};
-F.displayName = "Flyout.Header";
-const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: u.footer, children: t });
-g.displayName = "Flyout.Footer";
-const h = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: a = !1 }, r) => /* @__PURE__ */ e(
-  "div",
-  {
-    "data-test-id": o,
-    ref: r,
-    "data-flyout-spacing": "compact",
-    "data-scrollable": a,
-    className: u.body,
-    children: t
-  }
-);
-h.displayName = "Flyout.Body";
-const W = {
-  Root: f,
-  Trigger: i(y),
-  Content: i(p),
-  Header: i(F),
-  Footer: i(g),
-  Body: i(h)
-};
+u.displayName = "Flex";
 export {
-  W as Flyout,
-  h as FlyoutBody,
-  p as FlyoutContent,
-  g as FlyoutFooter,
-  F as FlyoutHeader,
-  f as FlyoutRoot,
-  y as FlyoutTrigger
+  u as Flex
 };
 //# sourceMappingURL=fondue-components13.js.map

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { Button } from '../Button/Button';\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    /**\n     * Event handler called when auto-focusing on open\n     */\n    onOpenAutoFocus?: (event: Event) => void;\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\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        side,\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    dir={dir}\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={getAdjustedSide(side)}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    closeProps?: CommonAriaProps;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header', closeProps }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close asChild {...closeProps}>\n                    <Button\n                        size=\"small\"\n                        aspect=\"square\"\n                        emphasis=\"weak\"\n                        aria-label={t('Flyout_close')}\n                        data-test-id={`${dataTestId}-close`}\n                    >\n                        <IconCross size={20} />\n                    </Button>\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","side","triggerOffset","viewportCollisionPadding","theme","dir","useFondueTheme","getAdjustedSide","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","t","useTranslation","Button","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components13.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-flex',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-content' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nFlex.displayName = 'Flex';\n"],"names":["Flex","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAuDO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,mBAAmB;AAAA,MAChE,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}

package/dist/fondue-components130.js

@@ -0,0 +1,19 @@
+function h(e) {
+  return (a, t) => {
+    const c = t != null && t.context ? String(t.context) : "standalone";
+    let l;
+    if (c === "formatting" && e.formattingValues) {
+      const d = e.defaultFormattingWidth || e.defaultWidth, u = t != null && t.width ? String(t.width) : d;
+      l = e.formattingValues[u] || e.formattingValues[d];
+    } else {
+      const d = e.defaultWidth, u = t != null && t.width ? String(t.width) : e.defaultWidth;
+      l = e.values[u] || e.values[d];
+    }
+    const f = e.argumentCallback ? e.argumentCallback(a) : a;
+    return l[f];
+  };
+}
+export {
+  h as buildLocalizeFn
+};
+//# sourceMappingURL=fondue-components130.js.map

package/dist/fondue-components130.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components130.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildLocalizeFn.mjs"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\n/**\n * The localize function argument callback which allows to convert raw value to\n * the actual type.\n *\n * @param value - The value to convert\n *\n * @returns The converted value\n */\n\n/**\n * The map of localized values for each width.\n */\n\n/**\n * The index type of the locale unit value. It types conversion of units of\n * values that don't start at 0 (i.e. quarters).\n */\n\n/**\n * Converts the unit value to the tuple of values.\n */\n\n/**\n * The tuple of localized era values. The first element represents BC,\n * the second element represents AD.\n */\n\n/**\n * The tuple of localized quarter values. The first element represents Q1.\n */\n\n/**\n * The tuple of localized day values. The first element represents Sunday.\n */\n\n/**\n * The tuple of localized month values. The first element represents January.\n */\n\nexport function buildLocalizeFn(args) {\n  return (value, options) => {\n    const context = options?.context ? String(options.context) : \"standalone\";\n\n    let valuesArray;\n    if (context === \"formatting\" && args.formattingValues) {\n      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;\n      const width = options?.width ? String(options.width) : defaultWidth;\n\n      valuesArray =\n        args.formattingValues[width] || args.formattingValues[defaultWidth];\n    } else {\n      const defaultWidth = args.defaultWidth;\n      const width = options?.width ? String(options.width) : args.defaultWidth;\n\n      valuesArray = args.values[width] || args.values[defaultWidth];\n    }\n    const index = args.argumentCallback ? args.argumentCallback(value) : value;\n\n    // @ts-expect-error - For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!\n    return valuesArray[index];\n  };\n}\n"],"names":["buildLocalizeFn","args","value","options","context","valuesArray","defaultWidth","width","index"],"mappings":"AAyCO,SAASA,EAAgBC,GAAM;AACpC,SAAO,CAACC,GAAOC,MAAY;AACzB,UAAMC,IAAUD,KAAA,QAAAA,EAAS,UAAU,OAAOA,EAAQ,OAAO,IAAI;AAE7D,QAAIE;AACJ,QAAID,MAAY,gBAAgBH,EAAK,kBAAkB;AACrD,YAAMK,IAAeL,EAAK,0BAA0BA,EAAK,cACnDM,IAAQJ,KAAA,QAAAA,EAAS,QAAQ,OAAOA,EAAQ,KAAK,IAAIG;AAEvD,MAAAD,IACEJ,EAAK,iBAAiBM,CAAK,KAAKN,EAAK,iBAAiBK,CAAY;AAAA,IACtE,OAAO;AACL,YAAMA,IAAeL,EAAK,cACpBM,IAAQJ,KAAA,QAAAA,EAAS,QAAQ,OAAOA,EAAQ,KAAK,IAAIF,EAAK;AAE5D,MAAAI,IAAcJ,EAAK,OAAOM,CAAK,KAAKN,EAAK,OAAOK,CAAY;AAAA,IAC9D;AACA,UAAME,IAAQP,EAAK,mBAAmBA,EAAK,iBAAiBC,CAAK,IAAIA;AAGrE,WAAOG,EAAYG,CAAK;AAAA,EAC1B;AACF;","x_google_ignoreList":[0]}

package/dist/fondue-components131.js

@@ -0,0 +1,32 @@
+function P(t) {
+  return (n, e = {}) => {
+    const l = e.width, h = l && t.matchPatterns[l] || t.matchPatterns[t.defaultMatchWidth], i = n.match(h);
+    if (!i)
+      return null;
+    const r = i[0], c = l && t.parsePatterns[l] || t.parsePatterns[t.defaultParseWidth], d = Array.isArray(c) ? o(c, (u) => u.test(r)) : (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
+      s(c, (u) => u.test(r))
+    );
+    let a;
+    a = t.valueCallback ? t.valueCallback(d) : d, a = e.valueCallback ? (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
+      e.valueCallback(a)
+    ) : a;
+    const f = n.slice(r.length);
+    return { value: a, rest: f };
+  };
+}
+function s(t, n) {
+  for (const e in t)
+    if (Object.prototype.hasOwnProperty.call(t, e) && n(t[e]))
+      return e;
+}
+function o(t, n) {
+  for (let e = 0; e < t.length; e++)
+    if (n(t[e]))
+      return e;
+}
+export {
+  P as buildMatchFn
+};
+//# sourceMappingURL=fondue-components131.js.map

package/dist/fondue-components131.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components131.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildMatchFn.mjs"],"sourcesContent":["export function buildMatchFn(args) {\n  return (string, options = {}) => {\n    const width = options.width;\n\n    const matchPattern =\n      (width && args.matchPatterns[width]) ||\n      args.matchPatterns[args.defaultMatchWidth];\n    const matchResult = string.match(matchPattern);\n\n    if (!matchResult) {\n      return null;\n    }\n    const matchedString = matchResult[0];\n\n    const parsePatterns =\n      (width && args.parsePatterns[width]) ||\n      args.parsePatterns[args.defaultParseWidth];\n\n    const key = Array.isArray(parsePatterns)\n      ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString))\n      : // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type\n        findKey(parsePatterns, (pattern) => pattern.test(matchedString));\n\n    let value;\n\n    value = args.valueCallback ? args.valueCallback(key) : key;\n    value = options.valueCallback\n      ? // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type\n        options.valueCallback(value)\n      : value;\n\n    const rest = string.slice(matchedString.length);\n\n    return { value, rest };\n  };\n}\n\nfunction findKey(object, predicate) {\n  for (const key in object) {\n    if (\n      Object.prototype.hasOwnProperty.call(object, key) &&\n      predicate(object[key])\n    ) {\n      return key;\n    }\n  }\n  return undefined;\n}\n\nfunction findIndex(array, predicate) {\n  for (let key = 0; key < array.length; key++) {\n    if (predicate(array[key])) {\n      return key;\n    }\n  }\n  return undefined;\n}\n"],"names":["buildMatchFn","args","string","options","width","matchPattern","matchResult","matchedString","parsePatterns","key","findIndex","pattern","findKey","value","rest","object","predicate","array"],"mappings":"AAAO,SAASA,EAAaC,GAAM;AACjC,SAAO,CAACC,GAAQC,IAAU,OAAO;AAC/B,UAAMC,IAAQD,EAAQ,OAEhBE,IACHD,KAASH,EAAK,cAAcG,CAAK,KAClCH,EAAK,cAAcA,EAAK,iBAAiB,GACrCK,IAAcJ,EAAO,MAAMG,CAAY;AAE7C,QAAI,CAACC;AACH,aAAO;AAET,UAAMC,IAAgBD,EAAY,CAAC,GAE7BE,IACHJ,KAASH,EAAK,cAAcG,CAAK,KAClCH,EAAK,cAAcA,EAAK,iBAAiB,GAErCQ,IAAM,MAAM,QAAQD,CAAa,IACnCE,EAAUF,GAAe,CAACG,MAAYA,EAAQ,KAAKJ,CAAa,CAAC;AAAA;AAAA,MAEjEK,EAAQJ,GAAe,CAACG,MAAYA,EAAQ,KAAKJ,CAAa,CAAC;AAAA;AAEnE,QAAIM;AAEJ,IAAAA,IAAQZ,EAAK,gBAAgBA,EAAK,cAAcQ,CAAG,IAAIA,GACvDI,IAAQV,EAAQ;AAAA;AAAA,MAEZA,EAAQ,cAAcU,CAAK;AAAA,QAC3BA;AAEJ,UAAMC,IAAOZ,EAAO,MAAMK,EAAc,MAAM;AAE9C,WAAO,EAAE,OAAAM,GAAO,MAAAC,EAAI;AAAA,EACtB;AACF;AAEA,SAASF,EAAQG,GAAQC,GAAW;AAClC,aAAWP,KAAOM;AAChB,QACE,OAAO,UAAU,eAAe,KAAKA,GAAQN,CAAG,KAChDO,EAAUD,EAAON,CAAG,CAAC;AAErB,aAAOA;AAIb;AAEA,SAASC,EAAUO,GAAOD,GAAW;AACnC,WAASP,IAAM,GAAGA,IAAMQ,EAAM,QAAQR;AACpC,QAAIO,EAAUC,EAAMR,CAAG,CAAC;AACtB,aAAOA;AAIb;","x_google_ignoreList":[0]}

package/dist/fondue-components132.js

@@ -0,0 +1,16 @@
+function h(t) {
+  return (e, c = {}) => {
+    const n = e.match(t.matchPattern);
+    if (!n) return null;
+    const u = n[0], a = e.match(t.parsePattern);
+    if (!a) return null;
+    let l = t.valueCallback ? t.valueCallback(a[0]) : a[0];
+    l = c.valueCallback ? c.valueCallback(l) : l;
+    const r = e.slice(u.length);
+    return { value: l, rest: r };
+  };
+}
+export {
+  h as buildMatchPatternFn
+};
+//# sourceMappingURL=fondue-components132.js.map

package/dist/fondue-components132.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components132.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildMatchPatternFn.mjs"],"sourcesContent":["export function buildMatchPatternFn(args) {\n  return (string, options = {}) => {\n    const matchResult = string.match(args.matchPattern);\n    if (!matchResult) return null;\n    const matchedString = matchResult[0];\n\n    const parseResult = string.match(args.parsePattern);\n    if (!parseResult) return null;\n    let value = args.valueCallback\n      ? args.valueCallback(parseResult[0])\n      : parseResult[0];\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type\n    value = options.valueCallback ? options.valueCallback(value) : value;\n\n    const rest = string.slice(matchedString.length);\n\n    return { value, rest };\n  };\n}\n"],"names":["buildMatchPatternFn","args","string","options","matchResult","matchedString","parseResult","value","rest"],"mappings":"AAAO,SAASA,EAAoBC,GAAM;AACxC,SAAO,CAACC,GAAQC,IAAU,OAAO;AAC/B,UAAMC,IAAcF,EAAO,MAAMD,EAAK,YAAY;AAClD,QAAI,CAACG,EAAa,QAAO;AACzB,UAAMC,IAAgBD,EAAY,CAAC,GAE7BE,IAAcJ,EAAO,MAAMD,EAAK,YAAY;AAClD,QAAI,CAACK,EAAa,QAAO;AACzB,QAAIC,IAAQN,EAAK,gBACbA,EAAK,cAAcK,EAAY,CAAC,CAAC,IACjCA,EAAY,CAAC;AAGjB,IAAAC,IAAQJ,EAAQ,gBAAgBA,EAAQ,cAAcI,CAAK,IAAIA;AAE/D,UAAMC,IAAON,EAAO,MAAMG,EAAc,MAAM;AAE9C,WAAO,EAAE,OAAAE,GAAO,MAAAC,EAAI;AAAA,EACtB;AACF;","x_google_ignoreList":[0]}

package/dist/fondue-components133.js

@@ -0,0 +1,10 @@
+function r(t) {
+  return (d = {}) => {
+    const n = d.width ? String(d.width) : t.defaultWidth;
+    return t.formats[n] || t.formats[t.defaultWidth];
+  };
+}
+export {
+  r as buildFormatLongFn
+};
+//# sourceMappingURL=fondue-components133.js.map

package/dist/fondue-components133.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components133.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs"],"sourcesContent":["export function buildFormatLongFn(args) {\n  return (options = {}) => {\n    // TODO: Remove String()\n    const width = options.width ? String(options.width) : args.defaultWidth;\n    const format = args.formats[width] || args.formats[args.defaultWidth];\n    return format;\n  };\n}\n"],"names":["buildFormatLongFn","args","options","width"],"mappings":"AAAO,SAASA,EAAkBC,GAAM;AACtC,SAAO,CAACC,IAAU,OAAO;AAEvB,UAAMC,IAAQD,EAAQ,QAAQ,OAAOA,EAAQ,KAAK,IAAID,EAAK;AAE3D,WADeA,EAAK,QAAQE,CAAK,KAAKF,EAAK,QAAQA,EAAK,YAAY;AAAA,EAEtE;AACF;","x_google_ignoreList":[0]}

package/dist/fondue-components14.js

@@ -1,40 +1,125 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { propsToCssVariables as n } from "./fondue-components42.js";
-import u from "./fondue-components59.js";
-const c = y(
-  ({
-    as: a = "div",
-    "data-test-id": r = "fondue-grid",
-    children: i,
-    role: e,
-    "aria-label": d,
-    "aria-hidden": s,
-    "aria-describedby": t,
-    "aria-labelledby": o,
-    "aria-expanded": p,
-    "aria-haspopup": l,
-    ...b
-  }, m) => /* @__PURE__ */ f(
-    a,
-    {
-      className: u.root,
-      "data-test-id": r,
-      style: n(b, { justify: "justify-items" }),
-      role: e,
-      "aria-label": d,
-      "aria-hidden": s,
-      "aria-describedby": t,
-      "aria-labelledby": o,
-      "aria-expanded": p,
-      "aria-haspopup": l,
-      ref: m,
-      children: i
-    }
-  )
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { IconCross as x } from "@frontify/fondue-icons";
+import * as l from "@radix-ui/react-popover";
+import { forwardRef as i } from "react";
+import { useTranslation as I } from "./fondue-components40.js";
+import { addAutoFocusAttribute as _, addShowFocusRing as B } from "./fondue-components53.js";
+import { Button as O } from "./fondue-components6.js";
+import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components37.js";
+import u from "./fondue-components62.js";
+const f = ({ children: t, ...o }) => /* @__PURE__ */ e(l.Root, { ...o, children: t });
+f.displayName = "Flyout.Root";
+const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-flyout-trigger", ...r }, d) => /* @__PURE__ */ e(
+  l.Trigger,
+  {
+    onMouseDown: _,
+    "data-auto-focus-visible": "true",
+    "data-auto-focus-trigger": !0,
+    "data-test-id": a,
+    asChild: t,
+    ref: d,
+    ...r,
+    children: o
+  }
 );
-c.displayName = "Grid";
+y.displayName = "Flyout.Trigger";
+const D = {
+  compact: 8,
+  comfortable: 12,
+  spacious: 16
+}, H = {
+  compact: 8,
+  spacious: 24
+}, p = ({
+  align: t = "start",
+  maxWidth: o = "360px",
+  padding: a = "compact",
+  rounded: r = "medium",
+  width: d = "fit-content",
+  shadow: n = "medium",
+  side: N,
+  triggerOffset: v = "compact",
+  viewportCollisionPadding: C = "compact",
+  "data-test-id": P = "fondue-flyout-content",
+  children: R,
+  ...b
+}, w) => {
+  const { theme: A, dir: c } = S(), T = (s) => !s || c === "ltr" ? s : s === "left" ? "right" : s === "right" ? "left" : s;
+  return /* @__PURE__ */ e(l.Portal, { children: /* @__PURE__ */ m(j, { theme: A, dir: c, children: [
+    /* @__PURE__ */ e("div", { "data-test-id": "fondue-flyout-overlay", className: u.overlay }),
+    /* @__PURE__ */ e(
+      l.Content,
+      {
+        dir: c,
+        style: {
+          "--flyout-max-width": o,
+          "--flyout-width": d
+        },
+        ref: w,
+        align: t,
+        collisionPadding: H[C],
+        sideOffset: D[v],
+        side: T(N),
+        className: u.root,
+        "data-flyout-spacing": a,
+        "data-rounded": r,
+        "data-shadow": n,
+        "data-test-id": P,
+        onFocus: B,
+        ...b,
+        children: R
+      }
+    )
+  ] }) });
+};
+p.displayName = "Flyout.Content";
+const F = ({ showCloseButton: t, children: o, "data-test-id": a = "fondue-flyout-header", closeProps: r }, d) => {
+  const { t: n } = I();
+  return /* @__PURE__ */ m("div", { "data-test-id": a, ref: d, className: u.header, children: [
+    /* @__PURE__ */ e("div", { children: o }),
+    t && /* @__PURE__ */ e(l.Close, { asChild: !0, ...r, children: /* @__PURE__ */ e(
+      O,
+      {
+        size: "small",
+        aspect: "square",
+        emphasis: "weak",
+        "aria-label": n("Flyout_close"),
+        "data-test-id": `${a}-close`,
+        children: /* @__PURE__ */ e(x, { size: 20 })
+      }
+    ) })
+  ] });
+};
+F.displayName = "Flyout.Header";
+const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: u.footer, children: t });
+g.displayName = "Flyout.Footer";
+const h = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: a = !1 }, r) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-test-id": o,
+    ref: r,
+    "data-flyout-spacing": "compact",
+    "data-scrollable": a,
+    className: u.body,
+    children: t
+  }
+);
+h.displayName = "Flyout.Body";
+const W = {
+  Root: f,
+  Trigger: i(y),
+  Content: i(p),
+  Header: i(F),
+  Footer: i(g),
+  Body: i(h)
+};
 export {
-  c as Grid
+  W as Flyout,
+  h as FlyoutBody,
+  p as FlyoutContent,
+  g as FlyoutFooter,
+  F as FlyoutHeader,
+  f as FlyoutRoot,
+  y as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components14.js.map

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n    /**\n     * The element to render the Grid component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n\n    /**\n     * The display property.\n     * @default 'grid'\n     */\n    display?: 'none' | 'grid' | 'inline-grid';\n    /**\n     * The columns property.\n     */\n    columns?: Responsive<string | number>;\n    /**\n     * The rows property.\n     */\n    rows?: Responsive<string | number>;\n    /**\n     * The flow property.\n     */\n    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-grid',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-items' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nGrid.displayName = 'Grid';\n"],"names":["Grid","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AA2DO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,iBAAiB;AAAA,MAC9D,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components14.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { Button } from '../Button/Button';\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    /**\n     * Event handler called when auto-focusing on open\n     */\n    onOpenAutoFocus?: (event: Event) => void;\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\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        side,\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    dir={dir}\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={getAdjustedSide(side)}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    closeProps?: CommonAriaProps;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header', closeProps }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close asChild {...closeProps}>\n                    <Button\n                        size=\"small\"\n                        aspect=\"square\"\n                        emphasis=\"weak\"\n                        aria-label={t('Flyout_close')}\n                        data-test-id={`${dataTestId}-close`}\n                    >\n                        <IconCross size={20} />\n                    </Button>\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","side","triggerOffset","viewportCollisionPadding","theme","dir","useFondueTheme","getAdjustedSide","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","t","useTranslation","Button","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}

package/dist/fondue-components15.js

@@ -1,49 +1,40 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import a from "./fondue-components60.js";
-const x = g(
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { propsToCssVariables as n } from "./fondue-components43.js";
+import u from "./fondue-components63.js";
+const c = y(
   ({
-    as: e = "span",
+    as: a = "div",
+    "data-test-id": r = "fondue-grid",
     children: i,
-    className: r,
-    color: d = "default",
-    role: o,
-    size: l = "medium",
-    weight: t = "default",
-    "data-test-id": s = "fondue-heading",
-    "aria-describedby": p,
-    "aria-expanded": n,
-    "aria-haspopup": b,
-    "aria-hidden": m,
-    "aria-label": f,
-    "aria-labelledby": u,
-    ...h
-  }, y) => /* @__PURE__ */ c(
-    e,
+    role: e,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": t,
+    "aria-labelledby": o,
+    "aria-expanded": p,
+    "aria-haspopup": l,
+    ...b
+  }, m) => /* @__PURE__ */ f(
+    a,
     {
-      className: [
-        a.root,
-        a[`size-${l}`],
-        a[`weight-${t}`],
-        a[`color-${d}`],
-        r
-      ].filter(Boolean).join(" "),
-      role: o,
-      "aria-label": f,
-      "aria-hidden": m,
-      "aria-describedby": p,
-      "aria-labelledby": u,
-      "aria-expanded": n,
-      "aria-haspopup": b,
-      "data-test-id": s,
-      ref: y,
-      ...h,
+      className: u.root,
+      "data-test-id": r,
+      style: n(b, { justify: "justify-items" }),
+      role: e,
+      "aria-label": d,
+      "aria-hidden": s,
+      "aria-describedby": t,
+      "aria-labelledby": o,
+      "aria-expanded": p,
+      "aria-haspopup": l,
+      ref: m,
       children: i
     }
   )
 );
-x.displayName = "Heading";
+c.displayName = "Grid";
 export {
-  x as Heading
+  c as Grid
 };
 //# sourceMappingURL=fondue-components15.js.map

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.js","sources":["../src/components/Heading/Heading.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ElementType, type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport styles from './styles/heading.module.scss';\n\ntype HeadingWeight = 'default' | 'strong';\ntype HeadingSize = 'medium' | 'large' | 'x-large' | 'xx-large';\ntype HeadingColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\n\ntype TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';\n\nexport type HeadingProps<TTag extends TagType = 'span'> = CommonAriaProps & {\n    'data-test-id'?: string;\n    as?: TTag;\n    children?: ReactNode;\n    color?: HeadingColor;\n    size?: HeadingSize;\n    weight?: HeadingWeight;\n    className?: string;\n};\n\ntype HeadingElementType<TTag extends TagType> = TTag extends 'span'\n    ? HTMLSpanElement\n    : TTag extends 'p'\n      ? HTMLParagraphElement\n      : HTMLHeadingElement;\n\nexport const Heading = forwardRef(\n    (\n        {\n            as: Tag = 'span' as ElementType,\n            children,\n            className,\n            color = 'default',\n            role,\n            size = 'medium',\n            weight = 'default',\n            'data-test-id': dataTestId = 'fondue-heading',\n            'aria-describedby': ariaDescribedBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            'aria-hidden': ariaHidden,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Tag\n                className={[\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`color-${color}`],\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                data-test-id={dataTestId}\n                ref={ref}\n                {...props}\n            >\n                {children}\n            </Tag>\n        );\n    },\n) as (<TTag extends TagType = 'span'>(\n    props: HeadingProps<TTag> & { ref?: ForwardedRef<HeadingElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nHeading.displayName = 'Heading';\n"],"names":["Heading","forwardRef","Tag","children","className","color","role","size","weight","dataTestId","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaHidden","ariaLabel","ariaLabelledBy","props","ref","jsx","styles"],"mappings":";;;AA8BO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,IAAIC,IAAM;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,oBAAoBC;AAAA,IACpB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,eAAeC;AAAA,IACf,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACPiB,EAAO;AAAA,QACPA,EAAO,QAAQZ,CAAI,EAAE;AAAA,QACrBY,EAAO,UAAUX,CAAM,EAAE;AAAA,QACzBW,EAAO,SAASd,CAAK,EAAE;AAAA,QACvBD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACb,MAAAE;AAAA,MACA,cAAYQ;AAAA,MACZ,eAAaD;AAAA,MACb,oBAAkBH;AAAA,MAClB,mBAAiBK;AAAA,MACjB,iBAAeJ;AAAA,MACf,iBAAeC;AAAA,MACf,gBAAcH;AAAA,MACd,KAAAQ;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAb;AAAA,IAAA;AAAA,EAAA;AAIjB;AAIAH,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components15.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n    /**\n     * The element to render the Grid component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n\n    /**\n     * The display property.\n     * @default 'grid'\n     */\n    display?: 'none' | 'grid' | 'inline-grid';\n    /**\n     * The columns property.\n     */\n    columns?: Responsive<string | number>;\n    /**\n     * The rows property.\n     */\n    rows?: Responsive<string | number>;\n    /**\n     * The flow property.\n     */\n    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-grid',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-items' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nGrid.displayName = 'Grid';\n"],"names":["Grid","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AA2DO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,iBAAiB;AAAA,MAC9D,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}