@frontify/fondue-components 1.3.0 → 1.3.2

package/dist/fondue-components5.js

@@ -1,26 +1,81 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as m from "@radix-ui/react-separator";
-import { forwardRef as s } from "react";
-import { cn as p } from "./fondue-components13.js";
-import { dividerStyles as f } from "./fondue-components18.js";
-const r = ({ "data-test-id": o = "fondue-divider", direction: t = "horizontal", className: i, ...e }, d) => /* @__PURE__ */ a(
-  m.Root,
-  {
-    ref: d,
-    className: p(
-      f({
-        direction: t,
-        ...e
-      }),
-      i
-    ),
-    "data-test-id": o
-  }
-);
-r.displayName = "Divider";
-const D = s(r);
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { IconCross as T } from "@frontify/fondue-icons";
+import * as i from "@radix-ui/react-dialog";
+import { forwardRef as d } from "react";
+import { dialogUnderlayStyles as v, dialogContentStyles as R, dialogHeaderStyles as w, dialogFooterStyles as B, dialogBodyStyles as F, dialogSideContentStyles as H } from "./fondue-components19.js";
+const r = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
+r.displayName = "Dialog.Root";
+const n = ({ children: t, "data-test-id": o = "fondue-dialog-trigger" }, e) => /* @__PURE__ */ a(i.Trigger, { "data-test-id": o, asChild: !0, ref: e, children: t });
+n.displayName = "Dialog.Trigger";
+const g = ({
+  maxWidth: t = "800px",
+  minWidth: o = "400px",
+  minHeight: e = "200px",
+  padding: N = "compact",
+  "data-test-id": f = "fondue-dialog-content",
+  showUnderlay: h = !1,
+  children: S,
+  ...l
+}, x) => /* @__PURE__ */ s(i.Portal, { children: [
+  /* @__PURE__ */ a(i.Overlay, { className: v({ showUnderlay: h }) }),
+  /* @__PURE__ */ a(
+    i.Content,
+    {
+      style: {
+        "--dialog-max-width": t,
+        "--dialog-min-width": o,
+        "--dialog-min-height": e
+      },
+      ref: x,
+      className: R({ ...l }),
+      "data-dialog-spacing": N,
+      "data-test-id": f,
+      ...l,
+      children: S
+    }
+  )
+] });
+g.displayName = "Dialog.Content";
+const c = ({ children: t, "data-test-id": o = "fondue-dialog-header" }, e) => /* @__PURE__ */ s("div", { "data-test-id": o, ref: e, className: w, "data-dialog-layout-component": !0, children: [
+  /* @__PURE__ */ a("div", { children: t }),
+  /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${o}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(T, { size: 20 }) })
+] });
+c.displayName = "Dialog.Header";
+const m = ({ children: t, "data-test-id": o = "fondue-dialog-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: B, "data-dialog-layout-component": !0, children: t });
+m.displayName = "Dialog.Footer";
+const p = ({ children: t, "data-test-id": o = "fondue-dialog-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: F, "data-dialog-layout-component": !0, children: t });
+p.displayName = "Dialog.Body";
+const u = ({ children: t, "data-test-id": o = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: H, "data-dialog-layout-component": !0, children: t });
+u.displayName = "Dialog.SideContent";
+const y = ({ children: t }) => /* @__PURE__ */ a(i.Close, { asChild: !0, children: t });
+y.displayName = "Dialog.Close";
+const D = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Title, { asChild: o, children: t });
+D.displayName = "Dialog.Title";
+const C = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Description, { asChild: o, children: t });
+C.displayName = "Dialog.Description";
+const P = {
+  Root: r,
+  Title: D,
+  Description: C,
+  Close: y,
+  Trigger: d(n),
+  Content: d(g),
+  Header: d(c),
+  Footer: d(m),
+  Body: d(p),
+  SideContent: d(u)
+};
 export {
-  D as Divider,
-  r as DividerComponent
+  P as Dialog,
+  p as DialogBody,
+  y as DialogClose,
+  g as DialogContent,
+  C as DialogDescription,
+  m as DialogFooter,
+  c as DialogHeader,
+  r as DialogRoot,
+  u as DialogSideContent,
+  D as DialogTitle,
+  n as DialogTrigger
 };
 //# sourceMappingURL=fondue-components5.js.map

package/dist/fondue-components5.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components5.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    style?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const DividerComponent = (\n    { 'data-test-id': dataTestId = 'fondue-divider', direction = 'horizontal', className, ...props }: DividerProps,\n    ref: ForwardedRef<HTMLDivElement | null>,\n): ReactElement => {\n    return (\n        <Separator.Root\n            ref={ref}\n            className={cn(\n                dividerStyles({\n                    direction,\n                    ...props,\n                }),\n                className,\n            )}\n            data-test-id={dataTestId}\n        />\n    );\n};\n\nDividerComponent.displayName = 'Divider';\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(DividerComponent);\n"],"names":["DividerComponent","dataTestId","direction","className","props","ref","jsx","Separator","cn","dividerStyles","Divider","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B,EAAE,gBAAgBC,IAAa,kBAAkB,WAAAC,IAAY,cAAc,WAAAC,GAAW,GAAGC,EAAM,GAC/FC,MAGI,gBAAAC;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACG,KAAAF;AAAA,IACA,WAAWG;AAAA,MACPC,EAAc;AAAA,QACV,WAAAP;AAAA,QACA,GAAGE;AAAA,MAAA,CACN;AAAA,MACDD;AAAA,IACJ;AAAA,IACA,gBAAcF;AAAA,EAAA;AAAA;AAK1BD,EAAiB,cAAc;AAElB,MAAAU,IAAUC,EAAyCX,CAAgB;"}
+{"version":3,"file":"fondue-components5.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport {\n    dialogBodyStyles,\n    dialogContentStyles,\n    dialogFooterStyles,\n    dialogHeaderStyles,\n    dialogSideContentStyles,\n    dialogUnderlayStyles,\n} from './styles/dialogStyles';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a maximum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogHeaderProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDialog.Portal>\n            <RadixDialog.Overlay className={dialogUnderlayStyles({ showUnderlay })} />\n            <RadixDialog.Content\n                style={\n                    {\n                        '--dialog-max-width': maxWidth,\n                        '--dialog-min-width': minWidth,\n                        '--dialog-min-height': minHeight,\n                    } as CSSProperties\n                }\n                ref={ref}\n                className={dialogContentStyles({ ...props })}\n                data-dialog-spacing={padding}\n                data-test-id={dataTestId}\n                {...props}\n            >\n                {children}\n            </RadixDialog.Content>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-header' }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={dialogHeaderStyles} data-dialog-layout-component>\n            <div>{children}</div>\n            <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                <IconCross size={20} />\n            </RadixDialog.Close>\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={dialogFooterStyles} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={dialogBodyStyles} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={dialogSideContentStyles} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogRoot","children","props","RadixDialog","DialogTrigger","dataTestId","ref","jsx","DialogContent","maxWidth","minWidth","minHeight","padding","showUnderlay","jsxs","dialogUnderlayStyles","dialogContentStyles","DialogHeader","dialogHeaderStyles","IconCross","DialogFooter","dialogFooterStyles","DialogBody","dialogBodyStyles","DialogSideContent","dialogSideContentStyles","DialogClose","DialogTitle","asChild","DialogDescription","Dialog","forwardRef"],"mappings":";;;;;AAqFO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAY,MAAZ,EAAkB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAElDD,EAAW,cAAc;AAEZ,MAAAI,IAAgB,CACzB,EAAE,UAAAH,GAAU,gBAAgBI,IAAa,2BACzCC,MAGI,gBAAAC,EAACJ,EAAY,SAAZ,EAAoB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GAClD,UAAAL,EACL,CAAA;AAGRG,EAAc,cAAc;AAErB,MAAMI,IAAgB,CACzB;AAAA,EACI,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,gBAAgBP,IAAa;AAAA,EAC7B,cAAAQ,IAAe;AAAA,EACf,UAAAZ;AAAA,EACA,GAAGC;AACP,GACAI,MAGI,gBAAAQ,EAACX,EAAY,QAAZ,EACG,UAAA;AAAA,EAAC,gBAAAI,EAAAJ,EAAY,SAAZ,EAAoB,WAAWY,EAAqB,EAAE,cAAAF,EAAc,CAAA,GAAG;AAAA,EACxE,gBAAAN;AAAA,IAACJ,EAAY;AAAA,IAAZ;AAAA,MACG,OACI;AAAA,QACI,sBAAsBM;AAAA,QACtB,sBAAsBC;AAAA,QACtB,uBAAuBC;AAAA,MAC3B;AAAA,MAEJ,KAAAL;AAAA,MACA,WAAWU,EAAoB,EAAE,GAAGd,GAAO;AAAA,MAC3C,uBAAqBU;AAAA,MACrB,gBAAcP;AAAA,MACb,GAAGH;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EACL;AACJ,EAAA,CAAA;AAGRO,EAAc,cAAc;AAEf,MAAAS,IAAe,CACxB,EAAE,UAAAhB,GAAU,gBAAgBI,IAAa,0BACzCC,MAGI,gBAAAQ,EAAC,SAAI,gBAAcT,GAAY,KAAAC,GAAU,WAAWY,GAAoB,gCAA4B,IAChG,UAAA;AAAA,EAAA,gBAAAX,EAAC,SAAK,UAAAN,GAAS;AAAA,oBACdE,EAAY,OAAZ,EAAkB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAU,qBAC5E,UAAA,gBAAAE,EAACY,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AACJ,EAAA,CAAA;AAGRF,EAAa,cAAc;AAEd,MAAAG,IAAe,CACxB,EAAE,UAAAnB,GAAU,gBAAgBI,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWe,GAAoB,gCAA4B,IAC/F,UAAApB,EACL,CAAA;AAGRmB,EAAa,cAAc;AAEd,MAAAE,IAAa,CACtB,EAAE,UAAArB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWiB,GAAkB,gCAA4B,IAC7F,UAAAtB,EACL,CAAA;AAGRqB,EAAW,cAAc;AAEZ,MAAAE,IAAoB,CAC7B,EAAE,UAAAvB,GAAU,gBAAgBI,IAAa,gCACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWmB,GAAyB,gCAA4B,IACpG,UAAAxB,EACL,CAAA;AAGRuB,EAAkB,cAAc;AAEzB,MAAME,IAAc,CAAC,EAAE,UAAAzB,0BAClBE,EAAY,OAAZ,EAAkB,SAAO,IAAE,UAAAF,EAAS,CAAA;AAEhDyB,EAAY,cAAc;AAEnB,MAAMC,IAAc,CAAC,EAAE,UAAA1B,GAAU,SAAA2B,QAC5B,gBAAArB,EAAAJ,EAAY,OAAZ,EAAkB,SAAAyB,GAAmB,UAAA3B,EAAS,CAAA;AAE1D0B,EAAY,cAAc;AAEnB,MAAME,IAAoB,CAAC,EAAE,UAAA5B,GAAU,SAAA2B,QAClC,gBAAArB,EAAAJ,EAAY,aAAZ,EAAwB,SAAAyB,GAAmB,UAAA3B,EAAS,CAAA;AAEhE4B,EAAkB,cAAc;AAEzB,MAAMC,IAAS;AAAA,EAClB,MAAM9B;AAAA,EACN,OAAO2B;AAAA,EACP,aAAaE;AAAA,EACb,OAAOH;AAAA,EACP,SAASK,EAAkD3B,CAAa;AAAA,EACxE,SAAS2B,EAA+CvB,CAAa;AAAA,EACrE,QAAQuB,EAA8Cd,CAAY;AAAA,EAClE,QAAQc,EAA8CX,CAAY;AAAA,EAClE,MAAMW,EAA4CT,CAAU;AAAA,EAC5D,aAAaS,EAAmDP,CAAiB;AACrF;"}

package/dist/fondue-components6.js

@@ -1,61 +1,26 @@
-import { jsx as a, jsxs as F } from "react/jsx-runtime";
-import { IconCross as g } from "@frontify/fondue-icons";
-import * as r from "@radix-ui/react-popover";
-import { forwardRef as d } from "react";
-import { flyoutContentStyles as N, flyoutHeaderStyles as C, flyoutFooterStyles as h, flyoutBodyStyles as x } from "./fondue-components19.js";
-const i = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
-i.displayName = "Flyout.Root";
-const y = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(r.Trigger, { "data-test-id": o, asChild: !0, ref: e, children: t });
-y.displayName = "Flyout.Trigger";
-const n = ({
-  align: t = "start",
-  maxWidth: o = "360px",
-  padding: e = "compact",
-  "data-test-id": s = "fondue-flyout-content",
-  children: m,
-  ...l
-}, p) => /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
-  r.Content,
+import { jsx as a } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-separator";
+import { forwardRef as s } from "react";
+import { cn as p } from "./fondue-components14.js";
+import { dividerStyles as f } from "./fondue-components20.js";
+const r = ({ "data-test-id": o = "fondue-divider", direction: t = "horizontal", className: i, ...e }, d) => /* @__PURE__ */ a(
+  m.Root,
   {
-    style: {
-      "--flyout-max-width": o
-    },
-    ref: p,
-    align: t,
-    collisionPadding: 8,
-    sideOffset: 8,
-    className: N({ ...l }),
-    "data-flyout-spacing": e,
-    "data-test-id": s,
-    ...l,
-    children: m
+    ref: d,
+    className: p(
+      f({
+        direction: t,
+        ...e
+      }),
+      i
+    ),
+    "data-test-id": o
   }
-) });
-n.displayName = "Flyout.Content";
-const u = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ F("div", { "data-test-id": e, ref: s, className: C, children: [
-  /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(g, { size: 20 }) })
-] });
-u.displayName = "Flyout.Header";
-const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: h, children: t });
-f.displayName = "Flyout.Footer";
-const c = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: x, children: t });
-c.displayName = "Flyout.Body";
-const S = {
-  Root: i,
-  Trigger: d(y),
-  Content: d(n),
-  Header: d(u),
-  Footer: d(f),
-  Body: d(c)
-};
+);
+r.displayName = "Divider";
+const D = s(r);
 export {
-  S as Flyout,
-  c as FlyoutBody,
-  n as FlyoutContent,
-  f as FlyoutFooter,
-  u as FlyoutHeader,
-  i as FlyoutRoot,
-  y as FlyoutTrigger
+  D as Divider,
+  r as DividerComponent
 };
 //# sourceMappingURL=fondue-components6.js.map

package/dist/fondue-components6.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components6.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 { flyoutBodyStyles, flyoutContentStyles, flyoutFooterStyles, flyoutHeaderStyles } from './styles/flyoutStyles';\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?: '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        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={ref}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                className={flyoutContentStyles({ ...props })}\n                data-flyout-spacing={padding}\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={flyoutHeaderStyles}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\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={flyoutFooterStyles}>\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={flyoutBodyStyles}>\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","flyoutContentStyles","FlyoutHeader","showCloseButton","flyoutHeaderStyles","IconCross","FlyoutFooter","flyoutFooterStyles","FlyoutBody","flyoutBodyStyles","Flyout","forwardRef"],"mappings":";;;;;AAwEO,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,GAAGC;AACP,GACAI,MAGI,gBAAAC,EAACJ,EAAa,QAAb,EACG,UAAA,gBAAAI;AAAA,EAACJ,EAAa;AAAA,EAAb;AAAA,IACG,OACI;AAAA,MACI,sBAAsBO;AAAA,IAC1B;AAAA,IAEJ,KAAAJ;AAAA,IACA,OAAAG;AAAA,IACA,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,WAAWG,EAAoB,EAAE,GAAGV,GAAO;AAAA,IAC3C,uBAAqBS;AAAA,IACrB,gBAAcN;AAAA,IACb,GAAGH;AAAA,IAEH,UAAAD;AAAA,EAAA;AAET,EAAA,CAAA;AAGRO,EAAc,cAAc;AAEf,MAAAK,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAb,GAAU,gBAAgBI,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWS,GAChD,UAAA;AAAA,EAAA,gBAAAR,EAAC,SAAK,UAAAN,GAAS;AAAA,EACda,KACI,gBAAAP,EAAAJ,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAU,qBAC7E,4BAACW,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRH,EAAa,cAAc;AAEd,MAAAI,IAAe,CACxB,EAAE,UAAAhB,GAAU,gBAAgBI,IAAa,0BACzCC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWY,GAC/C,UAAAjB,EACL,CAAA;AAGRgB,EAAa,cAAc;AAEd,MAAAE,IAAa,CACtB,EAAE,UAAAlB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWc,GAC7E,UAAAnB,EACL,CAAA;AAGRkB,EAAW,cAAc;AAElB,MAAME,IAAS;AAAA,EAClB,MAAMrB;AAAA,EACN,SAASsB,EAAkDlB,CAAa;AAAA,EACxE,SAASkB,EAA+Cd,CAAa;AAAA,EACrE,QAAQc,EAA8CT,CAAY;AAAA,EAClE,QAAQS,EAA8CL,CAAY;AAAA,EAClE,MAAMK,EAA4CH,CAAU;AAChE;"}
+{"version":3,"file":"fondue-components6.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    style?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const DividerComponent = (\n    { 'data-test-id': dataTestId = 'fondue-divider', direction = 'horizontal', className, ...props }: DividerProps,\n    ref: ForwardedRef<HTMLDivElement | null>,\n): ReactElement => {\n    return (\n        <Separator.Root\n            ref={ref}\n            className={cn(\n                dividerStyles({\n                    direction,\n                    ...props,\n                }),\n                className,\n            )}\n            data-test-id={dataTestId}\n        />\n    );\n};\n\nDividerComponent.displayName = 'Divider';\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(DividerComponent);\n"],"names":["DividerComponent","dataTestId","direction","className","props","ref","jsx","Separator","cn","dividerStyles","Divider","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B,EAAE,gBAAgBC,IAAa,kBAAkB,WAAAC,IAAY,cAAc,WAAAC,GAAW,GAAGC,EAAM,GAC/FC,MAGI,gBAAAC;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACG,KAAAF;AAAA,IACA,WAAWG;AAAA,MACPC,EAAc;AAAA,QACV,WAAAP;AAAA,QACA,GAAGE;AAAA,MAAA,CACN;AAAA,MACDD;AAAA,IACJ;AAAA,IACA,gBAAcF;AAAA,EAAA;AAAA;AAK1BD,EAAiB,cAAc;AAElB,MAAAU,IAAUC,EAAyCX,CAAgB;"}

package/dist/fondue-components7.js

@@ -1,27 +1,61 @@
-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-components13.js";
-const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
-  d.Root,
+import { jsx as a, jsxs as F } from "react/jsx-runtime";
+import { IconCross as g } from "@frontify/fondue-icons";
+import * as r from "@radix-ui/react-popover";
+import { forwardRef as d } from "react";
+import { flyoutContentStyles as N, flyoutHeaderStyles as C, flyoutFooterStyles as h, flyoutBodyStyles as x } from "./fondue-components21.js";
+const i = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
+i.displayName = "Flyout.Root";
+const y = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(r.Trigger, { "data-test-id": o, asChild: !0, ref: e, children: t });
+y.displayName = "Flyout.Trigger";
+const n = ({
+  align: t = "start",
+  maxWidth: o = "360px",
+  padding: e = "compact",
+  "data-test-id": s = "fondue-flyout-content",
+  children: m,
+  ...l
+}, p) => /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
+  r.Content,
   {
-    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
+    style: {
+      "--flyout-max-width": o
+    },
+    ref: p,
+    align: t,
+    collisionPadding: 8,
+    sideOffset: 8,
+    className: N({ ...l }),
+    "data-flyout-spacing": e,
+    "data-test-id": s,
+    ...l,
+    children: m
   }
-), w = i(s);
-w.displayName = "Label";
+) });
+n.displayName = "Flyout.Content";
+const u = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ F("div", { "data-test-id": e, ref: s, className: C, children: [
+  /* @__PURE__ */ a("div", { children: o }),
+  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(g, { size: 20 }) })
+] });
+u.displayName = "Flyout.Header";
+const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: h, children: t });
+f.displayName = "Flyout.Footer";
+const c = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: x, children: t });
+c.displayName = "Flyout.Body";
+const S = {
+  Root: i,
+  Trigger: d(y),
+  Content: d(n),
+  Header: d(u),
+  Footer: d(f),
+  Body: d(c)
+};
 export {
-  w as Label,
-  s as LabelComponent
+  S as Flyout,
+  c as FlyoutBody,
+  n as FlyoutContent,
+  f as FlyoutFooter,
+  u as FlyoutHeader,
+  i as FlyoutRoot,
+  y as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.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;"}
+{"version":3,"file":"fondue-components7.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 { flyoutBodyStyles, flyoutContentStyles, flyoutFooterStyles, flyoutHeaderStyles } from './styles/flyoutStyles';\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?: '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        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={ref}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                className={flyoutContentStyles({ ...props })}\n                data-flyout-spacing={padding}\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={flyoutHeaderStyles}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\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={flyoutFooterStyles}>\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={flyoutBodyStyles}>\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","flyoutContentStyles","FlyoutHeader","showCloseButton","flyoutHeaderStyles","IconCross","FlyoutFooter","flyoutFooterStyles","FlyoutBody","flyoutBodyStyles","Flyout","forwardRef"],"mappings":";;;;;AAwEO,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,GAAGC;AACP,GACAI,MAGI,gBAAAC,EAACJ,EAAa,QAAb,EACG,UAAA,gBAAAI;AAAA,EAACJ,EAAa;AAAA,EAAb;AAAA,IACG,OACI;AAAA,MACI,sBAAsBO;AAAA,IAC1B;AAAA,IAEJ,KAAAJ;AAAA,IACA,OAAAG;AAAA,IACA,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,WAAWG,EAAoB,EAAE,GAAGV,GAAO;AAAA,IAC3C,uBAAqBS;AAAA,IACrB,gBAAcN;AAAA,IACb,GAAGH;AAAA,IAEH,UAAAD;AAAA,EAAA;AAET,EAAA,CAAA;AAGRO,EAAc,cAAc;AAEf,MAAAK,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAb,GAAU,gBAAgBI,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWS,GAChD,UAAA;AAAA,EAAA,gBAAAR,EAAC,SAAK,UAAAN,GAAS;AAAA,EACda,KACI,gBAAAP,EAAAJ,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAU,qBAC7E,4BAACW,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRH,EAAa,cAAc;AAEd,MAAAI,IAAe,CACxB,EAAE,UAAAhB,GAAU,gBAAgBI,IAAa,0BACzCC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWY,GAC/C,UAAAjB,EACL,CAAA;AAGRgB,EAAa,cAAc;AAEd,MAAAE,IAAa,CACtB,EAAE,UAAAlB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWc,GAC7E,UAAAnB,EACL,CAAA;AAGRkB,EAAW,cAAc;AAElB,MAAME,IAAS;AAAA,EAClB,MAAMrB;AAAA,EACN,SAASsB,EAAkDlB,CAAa;AAAA,EACxE,SAASkB,EAA+Cd,CAAa;AAAA,EACrE,QAAQc,EAA8CT,CAAY;AAAA,EAClE,QAAQS,EAA8CL,CAAY;AAAA,EAClE,MAAMK,EAA4CH,CAAU;AAChE;"}

package/dist/fondue-components8.js

@@ -1,42 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-progress";
-import { forwardRef as s } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components20.js";
-const p = s(
-  ({
-    value: a,
-    max: r = 100,
-    rounded: d = !0,
-    style: o = "default",
-    size: e = "medium",
-    "data-test-id": n = "fondue-loading-bar",
-    ...l
-  }, m) => /* @__PURE__ */ i(
-    t.Root,
-    {
-      ref: m,
-      "data-test-id": n,
-      className: g({ rounded: d, size: e, style: 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({ style: o, indeterminateState: a === null })
-        }
-      )
-    }
-  )
-);
-p.displayName = "LoadingBar";
+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-components14.js";
+const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
+  d.Root,
+  {
+    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
+  }
+), w = i(s);
+w.displayName = "Label";
 export {
-  p as LoadingBar
+  w as Label,
+  s as LabelComponent
 };
 //# sourceMappingURL=fondue-components8.js.map

package/dist/fondue-components8.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components8.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    style?: '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            style = '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, style })}\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({ style, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","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,OAAAC,IAAQ;AAAA,IACR,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,OAAAD,GAAO;AAAA,MAC7D,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,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components8.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;"}

package/dist/fondue-components9.js

@@ -1,50 +1,42 @@
-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-components21.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-components22.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 i } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-progress";
+import { forwardRef as s } from "react";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components22.js";
+const p = s(
+  ({
+    value: a,
+    max: r = 100,
+    rounded: d = !0,
+    style: o = "default",
+    size: e = "medium",
+    "data-test-id": n = "fondue-loading-bar",
+    ...l
+  }, m) => /* @__PURE__ */ i(
+    t.Root,
     {
-      ref: g,
-      ...a,
-      className: f,
-      onValueChange: (n) => {
-        n && C(n);
+      ref: m,
+      "data-test-id": n,
+      className: g({ rounded: d, size: e, style: 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))"
       },
-      value: p,
-      type: "single",
-      asChild: !1,
-      "aria-disabled": a.disabled,
-      children: [
-        e,
-        /* @__PURE__ */ t("div", { className: I })
-      ]
+      ...l,
+      children: /* @__PURE__ */ i(
+        t.Indicator,
+        {
+          className: f({ style: o, indeterminateState: a === null })
+        }
+      )
     }
-  );
-};
-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 })
-  ] })
-] });
-i.displayName = "SegmentedControl.Item";
-const j = {
-  Root: m(d),
-  Item: m(i)
-};
+  )
+);
+p.displayName = "LoadingBar";
 export {
-  j as SegmentedControl,
-  i as SegmentedControlItem,
-  d as SegmentedControlRoot
+  p as LoadingBar
 };
 //# sourceMappingURL=fondue-components9.js.map

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.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-components9.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    style?: '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            style = '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, style })}\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({ style, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","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,OAAAC,IAAQ;AAAA,IACR,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,OAAAD,GAAO;AAAA,MAC7D,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,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}