@frontify/fondue-components 3.1.0 → 3.2.1

package/dist/fondue-components.js

@@ -1,28 +1,42 @@
 /* empty css                   */
-import { Button as e } from "./fondue-components3.js";
-import { Checkbox as m } from "./fondue-components4.js";
-import { Dialog as f } from "./fondue-components5.js";
-import { Divider as l } from "./fondue-components6.js";
-import { Dropdown as a } from "./fondue-components7.js";
-import { Flyout as g } from "./fondue-components8.js";
-import { Label as D } from "./fondue-components9.js";
-import { LoadingBar as c } from "./fondue-components10.js";
-import { SegmentedControl as C } from "./fondue-components11.js";
-import { Select as S } from "./fondue-components12.js";
-import { TextInput as h } from "./fondue-components13.js";
-import { Tooltip as v } from "./fondue-components14.js";
+import { Box as t } from "./fondue-components3.js";
+import { Button as x } from "./fondue-components4.js";
+import { Checkbox as f } from "./fondue-components5.js";
+import { ColorPicker as l } from "./fondue-components6.js";
+import { Dialog as d } from "./fondue-components7.js";
+import { Divider as S } from "./fondue-components8.js";
+import { Dropdown as g } from "./fondue-components9.js";
+import { Flex as B } from "./fondue-components10.js";
+import { Flyout as D } from "./fondue-components11.js";
+import { Grid as h } from "./fondue-components12.js";
+import { Label as w } from "./fondue-components13.js";
+import { LoadingBar as L } from "./fondue-components14.js";
+import { Section as v } from "./fondue-components15.js";
+import { SegmentedControl as G } from "./fondue-components16.js";
+import { Slider as P } from "./fondue-components17.js";
+import { Switch as q } from "./fondue-components18.js";
+import { Select as z } from "./fondue-components19.js";
+import { TextInput as E } from "./fondue-components20.js";
+import { Tooltip as J } from "./fondue-components21.js";
 export {
-  e as Button,
-  m as Checkbox,
-  f as Dialog,
-  l as Divider,
-  a as Dropdown,
-  g as Flyout,
-  D as Label,
-  c as LoadingBar,
-  C as SegmentedControl,
-  S as Select,
-  h as TextInput,
-  v as Tooltip
+  t as Box,
+  x as Button,
+  f as Checkbox,
+  l as ColorPicker,
+  d as Dialog,
+  S as Divider,
+  g as Dropdown,
+  B as Flex,
+  D as Flyout,
+  h as Grid,
+  w as Label,
+  L as LoadingBar,
+  v as Section,
+  G as SegmentedControl,
+  z as Select,
+  P as Slider,
+  q as Switch,
+  E as TextInput,
+  J as Tooltip
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

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

package/dist/fondue-components10.js

@@ -1,42 +1,22 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-progress";
-import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components26.js";
-const p = m(
-  ({
-    value: a,
-    max: r = 100,
-    rounded: d = !0,
-    variant: o = "default",
-    size: e = "medium",
-    "data-test-id": n = "fondue-loading-bar",
-    ...l
-  }, s) => /* @__PURE__ */ i(
-    t.Root,
-    {
-      ref: s,
-      "data-test-id": n,
-      className: g({ rounded: d, size: e, variant: o }),
-      "aria-busy": a !== r,
-      value: a,
-      max: r,
-      style: {
-        "--loading-bar-value": a,
-        "--loading-bar-max": r,
-        "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
-      },
-      ...l,
-      children: /* @__PURE__ */ i(
-        t.Indicator,
-        {
-          className: f({ variant: o, indeterminateState: a === null })
-        }
-      )
-    }
-  )
+import { jsx as r } from "react/jsx-runtime";
+import { propsToCssVariables as a } from "./fondue-components22.js";
+import i from "./fondue-components39.js";
+const l = ({
+  as: t = "div",
+  "data-test-id": s = "fondue-flex",
+  children: e,
+  ...o
+}) => /* @__PURE__ */ r(
+  t,
+  {
+    className: i.root,
+    "data-test-id": s,
+    style: a(o, { justify: "justify-content" }),
+    children: e
+  }
 );
-p.displayName = "LoadingBar";
+l.displayName = "Flex";
 export {
-  p as LoadingBar
+  l as Flex
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC/E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { 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 = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-flex',\n    children,\n    ...props\n}: FlexProps) => {\n    return (\n        <Component\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props, { justify: 'justify-content' })}\n        >\n            {children}\n        </Component>\n    );\n};\nFlex.displayName = 'Flex';\n"],"names":["Flex","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAuDO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACJ;AAAA,EAAA;AAAA,IACG,WAAWK,EAAO;AAAA,IAClB,gBAAcJ;AAAA,IACd,OAAOK,EAAoBH,GAAO,EAAE,SAAS,mBAAmB;AAAA,IAE/D,UAAAD;AAAA,EAAA;AAAA;AAIbH,EAAK,cAAc;"}

package/dist/fondue-components11.js

@@ -1,50 +1,74 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-toggle-group";
-import { forwardRef as m } from "react";
-import { useControllableState as S } from "./fondue-components27.js";
-import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components28.js";
-const d = ({ children: e, value: o, defaultValue: s, onValueChange: c, ...a }, g) => {
-  const [p, C] = S({
-    prop: o,
-    defaultProp: s,
-    onChange: c
-  });
-  return /* @__PURE__ */ l(
-    r.Root,
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import { IconCross as v } from "@frontify/fondue-icons";
+import * as s from "@radix-ui/react-popover";
+import { forwardRef as r, useRef as x } from "react";
+import { usePreventDropdownOverflow as w } from "./fondue-components36.js";
+import { syncRefs as u } from "./fondue-components37.js";
+import d from "./fondue-components40.js";
+const y = ({ children: t, ...o }) => /* @__PURE__ */ a(s.Root, { ...o, children: t });
+y.displayName = "Flyout.Root";
+const c = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(s.Trigger, { "data-test-id": o, asChild: !0, ref: e, children: t });
+c.displayName = "Flyout.Trigger";
+const f = ({
+  align: t = "start",
+  maxWidth: o = "360px",
+  padding: e = "compact",
+  "data-test-id": i = "fondue-flyout-content",
+  children: g,
+  rounded: N,
+  ...R
+}, n) => {
+  const l = x(null), { setMaxHeight: h } = w(l);
+  return /* @__PURE__ */ a(s.Portal, { children: /* @__PURE__ */ a(
+    s.Content,
     {
-      ref: g,
-      ...a,
-      className: f,
-      onValueChange: (n) => {
-        n && C(n);
+      style: {
+        "--flyout-max-width": o
       },
-      value: p,
-      type: "single",
-      asChild: !1,
-      "aria-disabled": a.disabled,
-      children: [
-        e,
-        /* @__PURE__ */ t("div", { className: I })
-      ]
+      ref: l,
+      align: t,
+      collisionPadding: 8,
+      sideOffset: 8,
+      onOpenAutoFocus: () => {
+        h(), u(l, n);
+      },
+      onCloseAutoFocus: () => {
+        u(l, n);
+      },
+      className: d.root,
+      "data-flyout-spacing": e,
+      "data-rounded": N,
+      "data-test-id": i,
+      ...R,
+      children: g
     }
-  );
+  ) });
 };
-d.displayName = "SegmentedControl.Root";
-const i = ({ children: e, ...o }, s) => /* @__PURE__ */ l(r.Item, { ref: s, ...o, className: y, asChild: !1, children: [
-  /* @__PURE__ */ t("span", { className: N }),
-  /* @__PURE__ */ l("span", { className: u, children: [
-    /* @__PURE__ */ t("span", { className: b, children: e }),
-    /* @__PURE__ */ t("span", { className: h, children: e })
-  ] })
+f.displayName = "Flyout.Content";
+const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, i) => /* @__PURE__ */ C("div", { "data-test-id": e, ref: i, className: d.header, children: [
+  /* @__PURE__ */ a("div", { children: o }),
+  t && /* @__PURE__ */ a(s.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(v, { size: 20 }) })
 ] });
-i.displayName = "SegmentedControl.Item";
+m.displayName = "Flyout.Header";
+const p = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
+p.displayName = "Flyout.Footer";
+const F = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: d.body, children: t });
+F.displayName = "Flyout.Body";
 const j = {
-  Root: m(d),
-  Item: m(i)
+  Root: y,
+  Trigger: r(c),
+  Content: r(f),
+  Header: r(m),
+  Footer: r(p),
+  Body: r(F)
 };
 export {
-  j as SegmentedControl,
-  i as SegmentedControlItem,
-  d as SegmentedControlRoot
+  j as Flyout,
+  F as FlyoutBody,
+  f as FlyoutContent,
+  p as FlyoutFooter,
+  m as FlyoutHeader,
+  y as FlyoutRoot,
+  c as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport {\n    segmentedControlActiveIndicatorStyles,\n    segmentedControlItemLabelActiveStyles,\n    segmentedControlItemLabelInactiveStyles,\n    segmentedControlItemLabelStyles,\n    segmentedControlItemSeparatorStyles,\n    segmentedControlItemStyles,\n    segmentedControlRootStyles,\n} from './styles/segmentedControlStyles';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={segmentedControlRootStyles}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={segmentedControlActiveIndicatorStyles} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={segmentedControlItemStyles} asChild={false}>\n        {/* Separator */}\n        <span className={segmentedControlItemSeparatorStyles} />\n        <span className={segmentedControlItemLabelStyles}>\n            {/* Active children */}\n            <span className={segmentedControlItemLabelActiveStyles}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={segmentedControlItemLabelInactiveStyles}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","segmentedControlRootStyles","jsx","segmentedControlActiveIndicatorStyles","SegmentedControlItem","itemProps","segmentedControlItemStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles","SegmentedControl","forwardRef"],"mappings":";;;;;AAwCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO;AAAA,MACX,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAED,gBAAAY,EAAC,OAAI,EAAA,WAAWC,EAAuC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE;AACAd,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,EAAA,GACfV,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGU,GAAW,WAAWC,GAA4B,SAAS,IAEhG,UAAA;AAAA,EAAC,gBAAAJ,EAAA,QAAA,EAAK,WAAWK,EAAqC,CAAA;AAAA,EACtD,gBAAAR,EAAC,QAAK,EAAA,WAAWS,GAEb,UAAA;AAAA,IAAC,gBAAAN,EAAA,QAAA,EAAK,WAAWO,GAAwC,UAAAnB,EAAS,CAAA;AAAA,IAGjE,gBAAAY,EAAA,QAAA,EAAK,WAAWQ,GAA0C,UAAApB,EAAS,CAAA;AAAA,EAAA,GACxE;AAAA,GACJ;AAEJc,EAAqB,cAAc;AAE5B,MAAMO,IAAmB;AAAA,EAC5B,MAAMC,EAAsDvB,CAAoB;AAAA,EAChF,MAAMuB,EAAyDR,CAAoB;AACvF;"}
+{"version":3,"file":"fondue-components11.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, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\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 type FlyoutContentProps = {\n    /**\n     * Add rounded corners to the flyout\n     * @default true\n     */\n    rounded?: boolean;\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?: 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type FlyoutTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\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};\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport const FlyoutTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        rounded,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\n                className={styles.root}\n                data-flyout-spacing={padding}\n                data-rounded={rounded}\n                data-test-id={dataTestId}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\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 const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\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","dataTestId","ref","jsx","FlyoutContent","align","maxWidth","padding","rounded","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA2EO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAEnDD,EAAW,cAAc;AAEZ,MAAAI,IAAgB,CACzB,EAAE,UAAAH,GAAU,gBAAgBI,IAAa,2BACzCC,MAGI,gBAAAC,EAACJ,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAL,EACL,CAAA;AAGRG,EAAc,cAAc;AAErB,MAAMI,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,gBAAgBN,IAAa;AAAA,EAC7B,UAAAJ;AAAA,EACA,SAAAW;AAAA,EACA,GAAGV;AACP,GACAI,MACC;AACK,QAAAO,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAN,EAACJ,EAAa,QAAb,EACG,UAAA,gBAAAI;AAAA,IAACJ,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBO;AAAA,MAC1B;AAAA,MAEJ,KAAKG;AAAA,MACL,OAAAJ;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,iBAAiB,MAAM;AACN,QAAAM,KACbE,EAASJ,GAAUP,CAAG;AAAA,MAC1B;AAAA,MACA,kBAAkB,MAAM;AACpB,QAAAW,EAASJ,GAAUP,CAAG;AAAA,MAC1B;AAAA,MACA,WAAWY,EAAO;AAAA,MAClB,uBAAqBP;AAAA,MACrB,gBAAcC;AAAA,MACd,gBAAcP;AAAA,MACb,GAAGH;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAER;AACAO,EAAc,cAAc;AAEf,MAAAW,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAnB,GAAU,gBAAgBI,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWY,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAX,EAAC,SAAK,UAAAN,GAAS;AAAA,EACdmB,KACI,gBAAAb,EAAAJ,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAWa,EAAO,OACrF,4BAACG,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRF,EAAa,cAAc;AAEd,MAAAG,IAAe,CACxB,EAAE,UAAArB,GAAU,gBAAgBI,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWY,EAAO,QACtD,UAAAjB,EACL,CAAA;AAGRqB,EAAa,cAAc;AAEd,MAAAC,IAAa,CACtB,EAAE,UAAAtB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWY,EAAO,MACpF,UAAAjB,EACL,CAAA;AAGRsB,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAMxB;AAAA,EACN,SAASyB,EAAkDrB,CAAa;AAAA,EACxE,SAASqB,EAA+CjB,CAAa;AAAA,EACrE,QAAQiB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}

package/dist/fondue-components12.js

@@ -1,80 +1,22 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { IconCaretDown as B } from "@frontify/fondue-icons";
-import * as p from "@radix-ui/react-popover";
-import { Slot as j } from "@radix-ui/react-slot";
-import { useSelect as D } from "downshift";
-import { forwardRef as M } from "react";
-import { ForwardedRefCombobox as T } from "./fondue-components29.js";
-import { ForwardedRefSelectItem as k, ForwardedRefSelectItemGroup as z } from "./fondue-components30.js";
-import { SelectMenu as A } from "./fondue-components31.js";
-import { ForwardedRefSelectSlot as O } from "./fondue-components32.js";
-import r from "./fondue-components33.js";
-import { useSelectData as V } from "./fondue-components34.js";
-const n = ({
-  children: S,
-  onSelect: a,
-  value: f,
-  defaultValue: u,
-  placeholder: I = "",
-  disabled: m,
-  "aria-label": h,
-  "data-test-id": b = "fondue-select"
-}, s) => {
-  const { inputSlots: g, menuSlots: N, items: x, clearButton: c, getItemByValue: i } = V(S), y = i(u), C = i(f), { getToggleButtonProps: R, getMenuProps: w, getItemProps: v, reset: F, selectedItem: l, isOpen: P, highlightedIndex: G } = D({
-    items: x,
-    defaultSelectedItem: y,
-    selectedItem: C,
-    onSelectedItemChange: ({ selectedItem: t }) => {
-      a && a(t.value);
-    },
-    itemToString: (t) => t ? t.label : ""
-  });
-  return /* @__PURE__ */ d(p.Root, { open: P, children: [
-    /* @__PURE__ */ o(p.Anchor, { asChild: !0, children: /* @__PURE__ */ d(
-      "div",
-      {
-        className: r.root,
-        "data-disabled": m,
-        "data-empty": !l,
-        "data-test-id": b,
-        ...m ? {} : R({
-          "aria-label": h,
-          ...s ? { ref: s } : {}
-        }),
-        children: [
-          /* @__PURE__ */ o("span", { className: r.input, children: l ? l.label : I }),
-          g,
-          c && /* @__PURE__ */ o(
-            j,
-            {
-              onClick: (t) => {
-                t.stopPropagation(), F();
-              },
-              className: r.clear,
-              children: c
-            }
-          ),
-          /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(B, { size: 16, className: r.caret }) })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ o(A, { highlightedIndex: G, getMenuProps: w, getItemProps: v, children: N })
-  ] });
-};
-n.displayName = "Select";
-const q = M(n), e = q;
-e.displayName = "Select";
-e.Combobox = T;
-e.Combobox.displayName = "Select.Combobox";
-e.Item = k;
-e.Item.displayName = "Select.Item";
-e.Group = z;
-e.Group.displayName = "Select.Group";
-e.Slot = O;
-e.Slot.displayName = "Select.Slot";
+import { jsx as o } from "react/jsx-runtime";
+import { propsToCssVariables as a } from "./fondue-components22.js";
+import e from "./fondue-components41.js";
+const d = ({
+  as: s = "div",
+  "data-test-id": t = "fondue-grid",
+  children: r,
+  ...i
+}) => /* @__PURE__ */ o(
+  s,
+  {
+    className: e.root,
+    "data-test-id": t,
+    style: a(i, { justify: "justify-items" }),
+    children: r
+  }
+);
+d.displayName = "Grid";
 export {
-  q as ForwardedRefSelect,
-  e as Select,
-  n as SelectInput
+  d as Grid
 };
 //# sourceMappingURL=fondue-components12.js.map

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div\n                    className={styles.root}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.input}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div>\n                        <IconCaretDown size={16} className={styles.caret} />\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu highlightedIndex={highlightedIndex} getMenuProps={getMenuProps} getItemProps={getItemProps}>\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","styles","RadixSlot","event","IconCaretDown","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":";;;;;;;;;;;;AAkDO,MAAMA,IAAc,CACvB;AAAA,EACI,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AACjC,GACAC,MACC;AACK,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,gBAAAC,EAAe,IAAIC,EAAcd,CAAQ,GAEtFe,IAAcF,EAAeV,CAAY,GACzCa,IAAaH,EAAeX,CAAK,GAEjC,EAAE,sBAAAe,GAAsB,cAAAC,GAAc,cAAAC,GAAc,OAAAC,GAAO,cAAAC,GAAc,QAAAC,GAAQ,kBAAAC,EAAiB,IACpGC,EAAU;AAAA,IACN,OAAAb;AAAA,IACA,qBAAqBI;AAAA,IACrB,cAAcC;AAAA,IACd,sBAAsB,CAAC,EAAE,cAAAK,QAAmB;AAC5B,MAAApB,KAAAA,EAASoB,EAAa,KAAK;AAAA,IAC3C;AAAA,IACA,cAAc,CAACI,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD;AAEL,SACK,gBAAAC,EAAAC,EAAa,MAAb,EAAkB,MAAML,GACrB,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAO;AAAA,QAClB,iBAAexB;AAAA,QACf,cAAY,CAACgB;AAAA,QACb,gBAAcd;AAAA,QACb,GAAIF,IACC,CAAC,IACDY,EAAqB;AAAA,UACjB,cAAcX;AAAA,UACd,GAAIE,IAAe,EAAE,KAAKA,MAAiB,CAAC;AAAA,QAAA,CAC/C;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAoB,EAAC,UAAK,WAAWC,EAAO,OAAQ,UAAeR,IAAAA,EAAa,QAAQjB,EAAY,CAAA;AAAA,UAC/EK;AAAA,UACAG,KACG,gBAAAgB;AAAA,YAACE;AAAAA,YAAA;AAAA,cACG,SAAS,CAACC,MAAU;AAChB,gBAAAA,EAAM,gBAAgB,GAChBX;cACV;AAAA,cACA,WAAWS,EAAO;AAAA,cAEjB,UAAAjB;AAAA,YAAA;AAAA,UACL;AAAA,UAEJ,gBAAAgB,EAAC,SACG,UAAC,gBAAAA,EAAAI,GAAA,EAAc,MAAM,IAAI,WAAWH,EAAO,MAAA,CAAO,EACtD,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IAEC,gBAAAD,EAAAK,GAAA,EAAW,kBAAAV,GAAoC,cAAAL,GAA4B,cAAAC,GACvE,UACLT,GAAA;AAAA,EACJ,EAAA,CAAA;AAER;AACAX,EAAY,cAAc;AAEb,MAAAmC,IAAqBC,EAAiDpC,CAAW,GAGjFqC,IAKTF;AACJE,EAAO,cAAc;AACrBA,EAAO,WAAWC;AAClBD,EAAO,SAAS,cAAc;AAC9BA,EAAO,OAAOE;AACdF,EAAO,KAAK,cAAc;AAC1BA,EAAO,QAAQG;AACfH,EAAO,MAAM,cAAc;AAC3BA,EAAO,OAAOI;AACdJ,EAAO,KAAK,cAAc;"}
+{"version":3,"file":"fondue-components12.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { 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 = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-grid',\n    children,\n    ...props\n}: GridProps) => {\n    return (\n        <Component\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props, { justify: 'justify-items' })}\n        >\n            {children}\n        </Component>\n    );\n};\nGrid.displayName = 'Grid';\n"],"names":["Grid","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA2DO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACJ;AAAA,EAAA;AAAA,IACG,WAAWK,EAAO;AAAA,IAClB,gBAAcJ;AAAA,IACd,OAAOK,EAAoBH,GAAO,EAAE,SAAS,iBAAiB;AAAA,IAE7D,UAAAD;AAAA,EAAA;AAAA;AAIbH,EAAK,cAAc;"}

package/dist/fondue-components13.js

@@ -1,69 +1,27 @@
-import { jsxs as g, jsx as s } from "react/jsx-runtime";
-import { IconCheckMark as w, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
-import { forwardRef as n, useRef as S } from "react";
-import { cn as m } from "./fondue-components15.js";
-import r from "./fondue-components35.js";
-const f = ({
-  children: c,
-  className: d,
-  status: e = "neutral",
-  "data-test-id": a = "fondue-text-input",
-  ...t
-}, R) => {
-  const i = S(!1);
-  return /* @__PURE__ */ g("div", { className: m(r.root, d), "data-status": e, "data-test-id": a, children: [
-    e === "loading" ? /* @__PURE__ */ s("div", { className: r.loadingStatus, "data-test-id": `${a}-loader` }) : null,
-    /* @__PURE__ */ s(
-      "input",
-      {
-        onMouseDown: (o) => {
-          i.current = !0, o.currentTarget.dataset.showFocusRing = "false";
-        },
-        type: "text",
-        ...t,
-        onFocus: (o) => {
-          var l;
-          i.current || (o.target.dataset.showFocusRing = "true"), (l = t.onFocus) == null || l.call(t, o);
-        },
-        onBlur: (o) => {
-          var l;
-          o.target.dataset.showFocusRing = "false", i.current = !1, (l = t.onBlur) == null || l.call(t, o);
-        },
-        ref: R,
-        className: r.input,
-        "aria-invalid": e === "error"
-      }
-    ),
-    e === "success" ? /* @__PURE__ */ s(w, { size: 16, className: r.iconSuccess, "data-test-id": `${a}-success-icon` }) : null,
-    e === "error" ? /* @__PURE__ */ s(
-      N,
-      {
-        size: 16,
-        className: r.iconError,
-        "data-test-id": `${a}-error-icon`
-      }
-    ) : null,
-    c
-  ] });
-};
-f.displayName = "TextField.Root";
-const u = ({ name: c, className: d, ...e }, a) => /* @__PURE__ */ s(
-  "div",
+import { jsx as o } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-label";
+import { forwardRef as i } from "react";
+import { cn as n } from "./fondue-components24.js";
+const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
+  d.Root,
   {
-    "data-slot": !0,
-    "data-name": c,
-    ...e,
-    ref: a,
-    className: m(r.slot, d)
+    ref: r,
+    "data-required": t.required,
+    className: n(
+      'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state="checked"]:tw-font-medium peer-data-[state="indeterminate"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',
+      // Disabled state if siblings has disabled state
+      "has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed",
+      // Required asterisk
+      'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
+      e
+    ),
+    "data-test-id": a,
+    ...t
   }
-);
-u.displayName = "TextField.Slot";
-const x = n(f), T = n(u), F = x;
-F.Root = x;
-F.Slot = T;
+), w = i(s);
+w.displayName = "Label";
 export {
-  f as TextFieldRoot,
-  u as TextFieldSlot,
-  F as TextInput
+  w as Label,
+  s as LabelComponent
 };
 //# sourceMappingURL=fondue-components13.js.map

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />\n            ) : null}\n            <input\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                type=\"text\"\n                {...inputProps}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    inputProps.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    inputProps.onBlur?.(blurEvent);\n                }}\n                ref={ref}\n                className={styles.input}\n                aria-invalid={status === 'error'}\n            />\n\n            {status === 'success' ? (\n                <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className={styles.iconError}\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot={true}\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={cn(styles.slot, className)}\n        />\n    );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA2GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGP,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACVM,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACjB,UAACP,EAAW,YACDO,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcR,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACP,gBAAAS,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGP,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGP,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EACL,EAAA,CAAA;AAER;AACAD,EAAc,cAAc;AAQf,MAAAmB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAlB,GAAW,GAAGmB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMT,CAAS;AAAA,EAAA;AAAA;AAKhDiB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CxB,CAAa,GACtFyB,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components13.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","Label","forwardRef"],"mappings":";;;;AAuBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACb,GAAGC;AAAA,EAAA;AAAA,GAKHK,IAAQC,EAAyCT,CAAc;AAC5EQ,EAAM,cAAc;"}