@mittwald/flow-react-components 1.3.0-next.3 → 1.3.0-next.30

package/dist/js/_virtual/_24.locale.mjs

@@ -5,6 +5,7 @@ var __locale_default = {
 	"de-DE": {
 		"mode.editor": "Vorschau beenden",
 		"mode.preview": "Vorschau",
+		"toolbar.attachment": "Datei anhängen",
 		"toolbar.bold": "Fett",
 		"toolbar.code": "Code",
 		"toolbar.italic": "Kursiv",
@@ -12,11 +13,15 @@ var __locale_default = {
 		"toolbar.orderedList": "Sortierte Liste",
 		"toolbar.quote": "Zitat",
 		"toolbar.strikeThrough": "Durchgestrichen",
-		"toolbar.unorderedList": "Liste"
+		"toolbar.unorderedList": "Liste",
+		"upload.failed": "{name} konnte nicht hochgeladen werden",
+		"upload.pending": "{name} wird hochgeladen",
+		"upload.succeeded": "{name} wurde hochgeladen"
 	},
 	"en-US": {
 		"mode.editor": "Exit Preview",
 		"mode.preview": "Preview",
+		"toolbar.attachment": "Attach file",
 		"toolbar.bold": "Bold",
 		"toolbar.code": "Code",
 		"toolbar.italic": "Italic",
@@ -24,7 +29,10 @@ var __locale_default = {
 		"toolbar.orderedList": "Ordered List",
 		"toolbar.quote": "Quote",
 		"toolbar.strikeThrough": "Strike through",
-		"toolbar.unorderedList": "List"
+		"toolbar.unorderedList": "List",
+		"upload.failed": "Could not upload {name}",
+		"upload.pending": "Uploading {name}",
+		"upload.succeeded": "Uploaded {name}"
 	}
 };
 //#endregion

package/dist/js/_virtual/_28.locale.mjs

@@ -4,9 +4,14 @@
 var __locale_default = {
 	"de-DE": {
 		"button.generate": "Generieren",
+		"button.generate.label": "Passwort generieren",
 		"button.generate.tooltip.hide": "Passwort verbergen",
 		"button.generate.tooltip.show": "Passwort anzeigen",
+		"password.announce.hidden": "Passwort wird verborgen",
+		"password.announce.revealed": "Passwort wird angezeigt",
 		"password.requirements.heading": "Anforderungen an dein Passwort",
+		"password.requirements.rule.fulfilled": "Erfüllt",
+		"password.requirements.rule.unfulfilled": "Nicht erfüllt",
 		"password.requirements.subject": "den Anforderungen an dein Passwort",
 		"validation.allowedSpecialCharacters": "Erlaubte Sonderzeichen: #!~%^*_+-=?()<>|.,;$:/",
 		"validation.atLeastOneCapitalLetter": "Mindestens ein Großbuchstabe",
@@ -45,9 +50,14 @@ var __locale_default = {
 	},
 	"en-US": {
 		"button.generate": "Generate",
+		"button.generate.label": "Generate password",
 		"button.generate.tooltip.hide": "Hide password",
 		"button.generate.tooltip.show": "Show password",
+		"password.announce.hidden": "Password is hidden",
+		"password.announce.revealed": "Password is shown",
 		"password.requirements.heading": "Requirements for your password",
+		"password.requirements.rule.fulfilled": "Fulfilled",
+		"password.requirements.rule.unfulfilled": "Not fulfilled",
 		"password.requirements.subject": "your password requirements",
 		"validation.allowedSpecialCharacters": "Allowed special characters: #!~%^*_+-=?()<>|.,;$:/",
 		"validation.atLeastOneCapitalLetter": "At least one capital letter",

package/dist/js/packages/components/src/components/Accordion/Accordion.mjs

@@ -9,9 +9,22 @@ import { Button } from "../Button/Button.mjs";
 import { Activity } from "../Activity/Activity.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import clsx from "clsx";
-import { useId, useState } from "react";
+import { useCallback, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Accordion/Accordion.tsx
+var HeaderButton = (props) => {
+	const { children, id, contentId, isExpanded, onToggle } = props;
+	return /* @__PURE__ */ jsxs(Button, {
+		tunnel: null,
+		unstyled: true,
+		id,
+		"aria-expanded": isExpanded,
+		className: Accordion_module_default.headerButton,
+		onPress: onToggle,
+		"aria-controls": contentId,
+		children: [children, /* @__PURE__ */ jsx(IconChevronDown, { className: Accordion_module_default.chevron })]
+	});
+};
 /**
 * @flr-generate all
 * @flowStatus beta
@@ -22,18 +35,14 @@ var Accordion = flowComponent("Accordion", (props) => {
 	const rootClassName = clsx(Accordion_module_default.accordion, expanded && Accordion_module_default.expanded, variant === "outline" && Accordion_module_default.outline, className);
 	const headerId = useId();
 	const contentId = useId();
-	const HeaderButton = (props) => {
-		const { children } = props;
-		return /* @__PURE__ */ jsxs(Button, {
-			tunnel: null,
-			unstyled: true,
-			"aria-expanded": expanded,
-			className: Accordion_module_default.headerButton,
-			onPress: () => setExpanded((expanded) => !expanded),
-			"aria-controls": contentId,
-			children: [children, /* @__PURE__ */ jsx(IconChevronDown, { className: Accordion_module_default.chevron })]
-		});
-	};
+	const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);
+	const renderHeaderButton = (children) => /* @__PURE__ */ jsx(HeaderButton, {
+		id: headerId,
+		contentId,
+		isExpanded: expanded,
+		onToggle: toggle,
+		children
+	});
 	const propsContext = {
 		Content: {
 			className: Accordion_module_default.contentInner,
@@ -46,18 +55,20 @@ var Accordion = flowComponent("Accordion", (props) => {
 			className: Accordion_module_default.header,
 			level: 4,
 			size: "xs",
-			children: dynamic((props) => /* @__PURE__ */ jsx(HeaderButton, { children: props.children })),
+			children: dynamic((props) => renderHeaderButton(props.children)),
 			Button: { size: "m" }
 		},
 		Label: {
 			className: Accordion_module_default.header,
-			children: dynamic((props) => /* @__PURE__ */ jsx(HeaderButton, { children: props.children }))
+			elementType: "span",
+			children: dynamic((props) => renderHeaderButton(props.children))
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		className: rootClassName,
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			dependencies: [expanded],
 			props: propsContext,
 			children: [children, /* @__PURE__ */ jsx("div", {
 				"aria-labelledby": headerId,

package/dist/js/packages/components/src/components/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n  ComponentProps<\"div\">\n> {\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /** The visual variant of the accordion. @default \"default\" */\n  variant?: \"default\" | \"outline\";\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      defaultExpanded = false,\n      variant = \"default\",\n      ...rest\n    } = props;\n    const [expanded, setExpanded] = useState(defaultExpanded);\n\n    const rootClassName = clsx(\n      styles.accordion,\n      expanded && styles.expanded,\n      variant === \"outline\" && styles.outline,\n      className,\n    );\n\n    const headerId = useId();\n\n    const contentId = useId();\n\n    const HeaderButton: FC<PropsWithChildren> = (props) => {\n      const { children } = props;\n      return (\n        <Button\n          tunnel={null}\n          unstyled\n          aria-expanded={expanded}\n          className={styles.headerButton}\n          onPress={() => setExpanded((expanded) => !expanded)}\n          aria-controls={contentId}\n        >\n          {children}\n          <IconChevronDown className={styles.chevron} />\n        </Button>\n      );\n    };\n\n    const propsContext: PropsContext = {\n      Content: {\n        className: styles.contentInner,\n        tunnel: {\n          id: \"content\",\n          component: \"Accordion\",\n        },\n      },\n      Heading: {\n        className: styles.header,\n        level: 4,\n        size: \"xs\",\n        children: dynamic((props) => (\n          <HeaderButton>{props.children}</HeaderButton>\n        )),\n        Button: { size: \"m\" },\n      },\n      Label: {\n        className: styles.header,\n        children: dynamic((props) => (\n          <HeaderButton>{props.children}</HeaderButton>\n        )),\n      },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n          <div\n            aria-labelledby={headerId}\n            id={contentId}\n            role=\"region\"\n            hidden={!expanded}\n            className={styles.content}\n          >\n            <Activity isActive={expanded} inactiveDelay={1000}>\n              <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n            </Activity>\n          </div>\n        </PropsContextProvider>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,UAAU,WACV,GAAG,SACD;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,eAAe;CAExD,MAAM,gBAAgB,KACpB,yBAAO,WACP,YAAY,yBAAO,UACnB,YAAY,aAAa,yBAAO,SAChC,SACF;CAEA,MAAM,WAAW,MAAM;CAEvB,MAAM,YAAY,MAAM;CAExB,MAAM,gBAAuC,UAAU;EACrD,MAAM,EAAE,aAAa;EACrB,OACE,qBAAC,QAAD;GACE,QAAQ;GACR,UAAA;GACA,iBAAe;GACf,WAAW,yBAAO;GAClB,eAAe,aAAa,aAAa,CAAC,QAAQ;GAClD,iBAAe;GANjB,UAAA,CAQG,UACD,oBAAC,iBAAD,EAAiB,WAAW,yBAAO,QAAU,CAAA,CACvC;;CAEZ;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,SAAS;GACP,WAAW,yBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UACjB,oBAAC,cAAD,EAAA,UAAe,MAAM,SAAuB,CAAA,CAC7C;GACD,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,OAAO;GACL,WAAW,yBAAO;GAClB,UAAU,SAAS,UACjB,oBAAC,cAAD,EAAA,UAAe,MAAM,SAAuB,CAAA,CAC7C;EACH;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACxB,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IACE,mBAAiB;IACjB,IAAI;IACJ,MAAK;IACL,QAAQ,CAAC;IACT,WAAW,yBAAO;IAElB,UAAA,oBAAC,UAAD;KAAU,UAAU;KAAU,eAAe;KAC3C,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAa,CAAA;IACnD,CAAA;GACP,CAAA,CACe;;CACnB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useCallback, useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n  ComponentProps<\"div\">\n> {\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /** The visual variant of the accordion. @default \"default\" */\n  variant?: \"default\" | \"outline\";\n}\n\ninterface HeaderButtonProps extends PropsWithChildren {\n  id: string;\n  contentId: string;\n  isExpanded: boolean;\n  onToggle: () => void;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n  const { children, id, contentId, isExpanded, onToggle } = props;\n\n  return (\n    <Button\n      tunnel={null}\n      unstyled\n      id={id}\n      aria-expanded={isExpanded}\n      className={styles.headerButton}\n      onPress={onToggle}\n      aria-controls={contentId}\n    >\n      {children}\n      <IconChevronDown className={styles.chevron} />\n    </Button>\n  );\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      defaultExpanded = false,\n      variant = \"default\",\n      ...rest\n    } = props;\n    const [expanded, setExpanded] = useState(defaultExpanded);\n\n    const rootClassName = clsx(\n      styles.accordion,\n      expanded && styles.expanded,\n      variant === \"outline\" && styles.outline,\n      className,\n    );\n\n    const headerId = useId();\n\n    const contentId = useId();\n\n    const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);\n\n    const renderHeaderButton = (children: ReactNode) => (\n      <HeaderButton\n        id={headerId}\n        contentId={contentId}\n        isExpanded={expanded}\n        onToggle={toggle}\n      >\n        {children}\n      </HeaderButton>\n    );\n\n    const propsContext: PropsContext = {\n      Content: {\n        className: styles.contentInner,\n        tunnel: {\n          id: \"content\",\n          component: \"Accordion\",\n        },\n      },\n      Heading: {\n        className: styles.header,\n        level: 4,\n        size: \"xs\",\n        children: dynamic((props) => renderHeaderButton(props.children)),\n        Button: { size: \"m\" },\n      },\n      Label: {\n        className: styles.header,\n        /*\n         * A <label> names the first labelable element below it — here the\n         * toggle, whose own text is the label's only content. The name\n         * computation walks into the label, meets the button it started from\n         * and stops, so the toggle ends up with an empty name. A <span> names\n         * nothing and the name comes from the toggle's content again.\n         */\n        elementType: \"span\",\n        children: dynamic((props) => renderHeaderButton(props.children)),\n      },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        {/*\n         * The props context is memoized, and the header button takes `expanded`\n         * from it – without the dependency the toggle keeps announcing the\n         * state it was first rendered with.\n         */}\n        <PropsContextProvider dependencies={[expanded]} props={propsContext}>\n          {children}\n          <div\n            aria-labelledby={headerId}\n            id={contentId}\n            role=\"region\"\n            hidden={!expanded}\n            className={styles.content}\n          >\n            <Activity isActive={expanded} inactiveDelay={1000}>\n              <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n            </Activity>\n          </div>\n        </PropsContextProvider>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,IAAI,WAAW,YAAY,aAAa;CAE1D,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACI;EACJ,iBAAe;EACf,WAAW,yBAAO;EAClB,SAAS;EACT,iBAAe;EAPjB,UAAA,CASG,UACD,oBAAC,iBAAD,EAAiB,WAAW,yBAAO,QAAU,CAAA,CACvC;;AAEZ;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,UAAU,WACV,GAAG,SACD;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,eAAe;CAExD,MAAM,gBAAgB,KACpB,yBAAO,WACP,YAAY,yBAAO,UACnB,YAAY,aAAa,yBAAO,SAChC,SACF;CAEA,MAAM,WAAW,MAAM;CAEvB,MAAM,YAAY,MAAM;CAExB,MAAM,SAAS,kBAAkB,aAAa,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC;CAEzE,MAAM,sBAAsB,aAC1B,oBAAC,cAAD;EACE,IAAI;EACO;EACX,YAAY;EACZ,UAAU;EAET;CACW,CAAA;CAGhB,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,SAAS;GACP,WAAW,yBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;GAC/D,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,OAAO;GACL,WAAW,yBAAO;GAQlB,aAAa;GACb,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;EACjE;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EAMxB,UAAA,qBAAC,sBAAD;GAAsB,cAAc,CAAC,QAAQ;GAAG,OAAO;GAAvD,UAAA,CACG,UACD,oBAAC,OAAD;IACE,mBAAiB;IACjB,IAAI;IACJ,MAAK;IACL,QAAQ,CAAC;IACT,WAAW,yBAAO;IAElB,UAAA,oBAAC,UAAD;KAAU,UAAU;KAAU,eAAe;KAC3C,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAa,CAAA;IACnD,CAAA;GACP,CAAA,CACe;;CACnB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

package/dist/js/packages/components/src/components/Avatar/Avatar.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border-radius: var(--corner-radius--round);\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  font-weight: var(--font-weight--bold);\n  font-size: calc(var(--avatar-size) * 0.35);\n  background-color: var(--background-color);\n  color: var(--content-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Elements */\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .icon {\n    width: calc(var(--avatar-size) * 0.7);\n    height: calc(var(--avatar-size) * 0.7);\n  }\n\n  .initials {\n    font-size: calc(var(--avatar-size) * 0.4);\n  }\n\n  @extend .size-m;\n  @extend .blue;\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --avatar-size: var(--avatar--size--#{$size});\n    }\n  }\n\n  @include size(m);\n  @include size(xs);\n  @include size(s);\n  @include size(l);\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n    &.#{$color} {\n      --background-color: var(--decorative--#{$color}-background-color);\n      --content-color: var(--decorative--#{$color}-content-color);\n      --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n    }\n  }\n\n  @include color(\"blue\");\n  @include color(\"teal\");\n  @include color(\"green\");\n  @include color(\"violet\");\n  @include color(\"lilac\");\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      --background-color: var(--avatar--#{$status}-status-background-color);\n    }\n  }\n\n  @include status(\"info\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"danger\");\n  @include status(\"unavailable\");\n}\n"],"mappings":""}
+{"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border-radius: var(--corner-radius--round);\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  font-weight: var(--font-weight--bold);\n  font-size: calc(var(--avatar-size) * 0.35);\n  background-color: var(--background-color);\n  color: var(--content-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Elements */\n\n  // The image is a child the consumer passes — Flow `Image` or a bare `<img>`.\n  // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .icon {\n    width: calc(var(--avatar-size) * 0.7);\n    height: calc(var(--avatar-size) * 0.7);\n  }\n\n  .initials {\n    font-size: calc(var(--avatar-size) * 0.4);\n  }\n\n  @extend .size-m;\n  @extend .blue;\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --avatar-size: var(--avatar--size--#{$size});\n    }\n  }\n\n  @include size(m);\n  @include size(xs);\n  @include size(s);\n  @include size(l);\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n    &.#{$color} {\n      --background-color: var(--decorative--#{$color}-background-color);\n      --content-color: var(--decorative--#{$color}-content-color);\n      --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n    }\n  }\n\n  @include color(\"blue\");\n  @include color(\"teal\");\n  @include color(\"green\");\n  @include color(\"violet\");\n  @include color(\"lilac\");\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      --background-color: var(--avatar--#{$status}-status-background-color);\n    }\n  }\n\n  @include status(\"info\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"danger\");\n  @include status(\"unavailable\");\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs

@@ -2,16 +2,18 @@
 /* */
 //#region src/components/Calendar/Calendar.module.scss
 var calendar = "flow--calendar";
+var calendarHeader = "flow--calendar--calendar-header";
 var container = "flow--calendar--container";
 var presetMenu = "flow--calendar--preset-menu";
 var range = "flow--calendar--range";
 var Calendar_module_default = {
 	calendar,
+	calendarHeader,
 	container,
 	presetMenu,
 	range
 };
 //#endregion
-export { calendar, container, Calendar_module_default as default, presetMenu, range };
+export { calendar, calendarHeader, container, Calendar_module_default as default, presetMenu, range };
 
 //# sourceMappingURL=Calendar.module.mjs.map

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n  width: fit-content;\n\n  header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--calendar--spacing);\n\n    h2 {\n      font-size: var(--calendar--heading-font-size);\n    }\n  }\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    gap: var(--popover--padding--m);\n\n    .presetMenu {\n      max-width: 200px;\n    }\n  }\n\n  @media (max-width: 530px) {\n    .container {\n      flex-direction: column-reverse;\n    }\n  }\n\n  :global(.react-aria-CalendarHeaderCell) {\n    font-size: var(--calendar--cell-font-size);\n    height: var(--calendar--cell-size);\n  }\n\n  table {\n    border-spacing: var(--calendar--spacing);\n  }\n\n  :global(.react-aria-CalendarCell) {\n    width: var(--calendar--cell-size);\n    height: var(--calendar--cell-size);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n    border-radius: var(--calendar--cell-corner-radius);\n    font-size: var(--calendar--cell-font-size);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include focus.focus;\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &:hover {\n      background: var(--calendar--cell-background-color--hover);\n    }\n\n    &[data-pressed] {\n      background: var(--calendar--cell-background-color--pressed);\n    }\n\n    &[data-selected] {\n      background: var(--calendar--cell-background-color--selected);\n      color: var(--calendar--cell-content-color--selected);\n    }\n\n    &[data-disabled],\n    &[data-unavailable=\"true\"] {\n      background: var(--calendar--cell-background-color--disabled);\n      color: var(--calendar--cell-content-color--disabled);\n    }\n\n    @include focus.focus;\n  }\n\n  &.range {\n    :global(.react-aria-CalendarCell) {\n      position: relative;\n      isolation: isolate;\n      transition-duration: 0s;\n\n      &[data-selected] {\n        &::before {\n          content: \"\";\n          background: var(--calendar--range-background-color);\n          border-block: var(--calendar--range-border-width)\n            var(--calendar--range-border-style)\n            var(--calendar--range-border-color);\n          width: calc(100% + 0.375rem);\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n        }\n\n        &::after {\n          content: \"\";\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n          border-radius: var(--calendar--cell-corner-radius);\n        }\n\n        &:hover {\n          &::after {\n            background: var(--calendar--cell-background-color--hover);\n          }\n        }\n\n        &[data-pressed] {\n          &::after {\n            background: var(--calendar--cell-background-color--pressed);\n          }\n        }\n\n        &[data-selection-start],\n        &[data-selection-end] {\n          &::after {\n            background: var(--calendar--cell-background-color--selected);\n          }\n        }\n\n        &[data-selection-start] {\n          &::before {\n            border-start-start-radius: var(--calendar--cell-corner-radius);\n            border-end-start-radius: var(--calendar--cell-corner-radius);\n            inset-inline-start: 0;\n          }\n        }\n\n        &[data-selection-end] {\n          &::before {\n            border-start-end-radius: var(--calendar--cell-corner-radius);\n            border-end-end-radius: var(--calendar--cell-corner-radius);\n            inset-inline-end: 0;\n          }\n        }\n\n        &:not([data-selection-start], [data-selection-end]) {\n          color: var(--text--color--default);\n          background: none;\n        }\n\n        &[data-selection-start][data-selection-end] {\n          &::before {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 360px) {\n  .calendar {\n    --calendar--cell-size: 2.1rem;\n    --calendar--cell-font-size: 0.8rem;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n  width: fit-content;\n\n  .calendarHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--calendar--spacing);\n\n    /* react-aria's Heading — CalendarHeader passes no className, so its\n       default class is the handle. */\n    :global(.react-aria-Heading) {\n      font-size: var(--calendar--heading-font-size);\n    }\n  }\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    gap: var(--popover--padding--m);\n\n    .presetMenu {\n      max-width: 200px;\n    }\n  }\n\n  @media (max-width: 530px) {\n    .container {\n      flex-direction: column-reverse;\n    }\n  }\n\n  :global(.react-aria-CalendarHeaderCell) {\n    font-size: var(--calendar--cell-font-size);\n    height: var(--calendar--cell-size);\n  }\n\n  :global(.react-aria-CalendarGrid) {\n    border-spacing: var(--calendar--spacing);\n  }\n\n  :global(.react-aria-CalendarCell) {\n    width: var(--calendar--cell-size);\n    height: var(--calendar--cell-size);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n    border-radius: var(--calendar--cell-corner-radius);\n    font-size: var(--calendar--cell-font-size);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include focus.focus;\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &:hover {\n      background: var(--calendar--cell-background-color--hover);\n    }\n\n    &[data-pressed] {\n      background: var(--calendar--cell-background-color--pressed);\n    }\n\n    &[data-selected] {\n      background: var(--calendar--cell-background-color--selected);\n      color: var(--calendar--cell-content-color--selected);\n    }\n\n    &[data-disabled],\n    &[data-unavailable=\"true\"] {\n      background: var(--calendar--cell-background-color--disabled);\n      color: var(--calendar--cell-content-color--disabled);\n    }\n\n    @include focus.focus;\n  }\n\n  &.range {\n    :global(.react-aria-CalendarCell) {\n      position: relative;\n      isolation: isolate;\n      transition-duration: 0s;\n\n      &[data-selected] {\n        &::before {\n          content: \"\";\n          background: var(--calendar--range-background-color);\n          border-block: var(--calendar--range-border-width)\n            var(--calendar--range-border-style)\n            var(--calendar--range-border-color);\n          width: calc(100% + 0.375rem);\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n        }\n\n        &::after {\n          content: \"\";\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n          border-radius: var(--calendar--cell-corner-radius);\n        }\n\n        &:hover {\n          &::after {\n            background: var(--calendar--cell-background-color--hover);\n          }\n        }\n\n        &[data-pressed] {\n          &::after {\n            background: var(--calendar--cell-background-color--pressed);\n          }\n        }\n\n        &[data-selection-start],\n        &[data-selection-end] {\n          &::after {\n            background: var(--calendar--cell-background-color--selected);\n          }\n        }\n\n        &[data-selection-start] {\n          &::before {\n            border-start-start-radius: var(--calendar--cell-corner-radius);\n            border-end-start-radius: var(--calendar--cell-corner-radius);\n            inset-inline-start: 0;\n          }\n        }\n\n        &[data-selection-end] {\n          &::before {\n            border-start-end-radius: var(--calendar--cell-corner-radius);\n            border-end-end-radius: var(--calendar--cell-corner-radius);\n            inset-inline-end: 0;\n          }\n        }\n\n        &:not([data-selection-start], [data-selection-end]) {\n          color: var(--text--color--default);\n          background: none;\n        }\n\n        &[data-selection-start][data-selection-end] {\n          &::before {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 360px) {\n  .calendar {\n    --calendar--cell-size: 2.1rem;\n    --calendar--cell-font-size: 0.8rem;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs

@@ -3,25 +3,29 @@
 import { IconChevronLeft } from "../../../Icon/components/icons/IconChevronLeft.mjs";
 import { IconChevronRight } from "../../../Icon/components/icons/IconChevronRight.mjs";
 import { Button } from "../../../Button/Button.mjs";
+import Calendar_module_default from "../../Calendar.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx
 var CalendarHeader = () => {
-	return /* @__PURE__ */ jsxs("header", { children: [
-		/* @__PURE__ */ jsx(Button, {
-			ariaSlot: "previous",
-			variant: "plain",
-			color: "secondary",
-			children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-		}),
-		/* @__PURE__ */ jsx(Aria.Heading, {}),
-		/* @__PURE__ */ jsx(Button, {
-			ariaSlot: "next",
-			variant: "plain",
-			color: "secondary",
-			children: /* @__PURE__ */ jsx(IconChevronRight, {})
-		})
-	] });
+	return /* @__PURE__ */ jsxs("header", {
+		className: Calendar_module_default.calendarHeader,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				ariaSlot: "previous",
+				variant: "plain",
+				color: "secondary",
+				children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+			}),
+			/* @__PURE__ */ jsx(Aria.Heading, {}),
+			/* @__PURE__ */ jsx(Button, {
+				ariaSlot: "next",
+				variant: "plain",
+				color: "secondary",
+				children: /* @__PURE__ */ jsx(IconChevronRight, {})
+			})
+		]
+	});
 };
 //#endregion
 export { CalendarHeader, CalendarHeader as default };

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD,EAAA,UAAA;EACE,oBAAC,QAAD;GAAQ,UAAS;GAAW,SAAQ;GAAQ,OAAM;GAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;EACZ,CAAA;EACR,oBAAC,KAAK,SAAN,CAAe,CAAA;EACf,oBAAC,QAAD;GAAQ,UAAS;GAAO,SAAQ;GAAQ,OAAM;GAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;EACb,CAAA;CACF,EAAA,CAAA;AAEZ"}
+{"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"../../Calendar.module.scss\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header className={styles.calendarHeader}>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;;AASA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD;EAAQ,WAAW,wBAAO;EAA1B,UAAA;GACE,oBAAC,QAAD;IAAQ,UAAS;IAAW,SAAQ;IAAQ,OAAM;IAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACZ,CAAA;GACR,oBAAC,KAAK,SAAN,CAAe,CAAA;GACf,oBAAC,QAAD;IAAQ,UAAS;IAAO,SAAQ;IAAQ,OAAM;IAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;GACb,CAAA;EACF;;AAEZ"}

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs

@@ -15,7 +15,7 @@ import { TypedChartLegend } from "./components/ChartLegend/ChartLegend.mjs";
 import { TypedChartTooltip } from "./components/ChartTooltip/types.mjs";
 import { TypedLine } from "./components/Line/Line.mjs";
 import clsx from "clsx";
-import { isValidElement, useMemo } from "react";
+import { isValidElement, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ComposedChart, ResponsiveContainer } from "recharts";
 //#region src/components/CartesianChart/CartesianChart.tsx
@@ -32,7 +32,11 @@ var CartesianChart = (props) => {
 		if (!emptyView) return;
 		return null;
 	}, [emptyView]);
-	const contextValue = useMemo(() => ({ layout }), [layout]);
+	const chartId = useId().replaceAll(/[^\w-]/g, "");
+	const contextValue = useMemo(() => ({
+		layout,
+		stackIdPrefix: `${chartId}-`
+	}), [layout, chartId]);
 	return /* @__PURE__ */ jsx(CartesianChartContextProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Wrap, {

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const contextValue = useMemo(() => ({ layout }), [layout]);\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,eAAe,EAAE,OAAO,IAAI,CAAC,MAAM,CAAC;CAEzD,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
+{"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAEA,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":[".cartesianChart {\n  font-family: Inter, sans-serif;\n  isolation: isolate;\n\n  *:focus:not(:focus-visible) {\n    outline: none !important;\n  }\n\n  :global(.flow--illustrated-message--illustrated-message-container) {\n    container-type: normal;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .emptyViewContainer {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.emptyView {\n    :global(.recharts-cartesian-grid) {\n      display: none;\n    }\n  }\n\n  svg {\n    overflow: visible;\n  }\n\n  :global(.recharts-tooltip-wrapper) {\n    z-index: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":[".cartesianChart {\n  font-family: Inter, sans-serif;\n  isolation: isolate;\n\n  *:focus:not(:focus-visible) {\n    outline: none !important;\n  }\n\n  .emptyViewContainer {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.emptyView {\n    :global(.recharts-cartesian-grid) {\n      display: none;\n    }\n  }\n\n  // recharts renders every svg here; only its outermost surface is classed.\n  // stylelint-disable-next-line selector-max-type -- third-party svgs\n  svg {\n    overflow: visible;\n  }\n\n  :global(.recharts-tooltip-wrapper) {\n    z-index: 1;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CartesianChart/components/Area/Area.mjs

@@ -4,14 +4,18 @@ import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.m
 import { AreaDot } from "../AreaDot/AreaDot.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import { isDataKeyWithLabel } from "../../types.mjs";
+import { useScopedStackId } from "../../hooks/useScopedStackId.mjs";
+import { useChartAnimation } from "../../hooks/useChartAnimation.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
 //#region src/components/CartesianChart/components/Area/Area.tsx
 /** @flr-generate all */
 var Area = (props) => {
-	const { color: colorFromProps = "sea-green", stackId = 1, fillOpacity = 1, ...rest } = props;
+	const { color: colorFromProps = "sea-green", stackId: stackIdFromProps = 1, fillOpacity = 1, ...rest } = props;
 	const tokens = useDesignTokens();
+	const stackId = useScopedStackId(stackIdFromProps);
+	const animation = useChartAnimation();
 	const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
 	return /* @__PURE__ */ jsx(Recharts.Area, {
 		name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,
@@ -21,7 +25,8 @@ var Area = (props) => {
 		activeDot: /* @__PURE__ */ jsx(AreaDot, { color }),
 		fill: color,
 		stroke: tokens.area["border-color"].value,
-		strokeWidth: tokens.area["border-width"].value
+		strokeWidth: tokens.area["border-width"].value,
+		...animation
 	});
 };
 var TypedArea = () => Area;

package/dist/js/packages/components/src/components/CartesianChart/components/Area/Area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Area.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype AreaBaseProps = Pick<\n  Recharts.AreaProps,\n  | \"className\"\n  | \"stackId\"\n  | \"fillOpacity\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"type\"\n  | \"unit\"\n> & {\n  /** The color of the area. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface AreaPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends AreaBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface AreaPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends AreaBaseProps, DataKeyWithLabel<TData> {}\n\nexport type AreaProps<TData extends ChartDataValue = ChartDataValue> =\n  AreaPropsByDataKey<TData> | AreaPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n  const {\n    color: colorFromProps = \"sea-green\",\n    stackId = 1,\n    fillOpacity = 1,\n    ...rest\n  } = props;\n\n  const tokens = useDesignTokens();\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  return (\n    <Recharts.Area\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      stackId={stackId}\n      fillOpacity={fillOpacity}\n      {...rest}\n      activeDot={<AreaDot color={color} />}\n      fill={color}\n      stroke={tokens.area[\"border-color\"].value}\n      strokeWidth={tokens.area[\"border-width\"].value}\n    />\n  );\n};\n\nexport const TypedArea = <TData extends ChartDataValue = ChartDataValue>() =>\n  Area as ComponentType<AreaPropsByDataKeyProp<TData>>;\n\nexport default Area;\n"],"mappings":";;;;;;;;;;;AA2CA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,OAAO,iBAAiB,aACxB,UAAU,GACV,cAAc,GACd,GAAG,SACD;CAEJ,MAAM,SAAS,gBAAgB;CAE/B,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EACpD;EACI;EACb,GAAI;EACJ,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,MAAM;EACN,QAAQ,OAAO,KAAK,eAAe,CAAC;EACpC,aAAa,OAAO,KAAK,eAAe,CAAC;CAC1C,CAAA;AAEL;AAEA,IAAa,kBACX"}
+{"version":3,"file":"Area.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useScopedStackId } from \"@/components/CartesianChart/hooks/useScopedStackId\";\nimport { useChartAnimation } from \"@/components/CartesianChart/hooks/useChartAnimation\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype AreaBaseProps = Pick<\n  Recharts.AreaProps,\n  | \"className\"\n  | \"stackId\"\n  | \"fillOpacity\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"type\"\n  | \"unit\"\n> & {\n  /** The color of the area. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface AreaPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends AreaBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface AreaPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends AreaBaseProps, DataKeyWithLabel<TData> {}\n\nexport type AreaProps<TData extends ChartDataValue = ChartDataValue> =\n  AreaPropsByDataKey<TData> | AreaPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n  const {\n    color: colorFromProps = \"sea-green\",\n    stackId: stackIdFromProps = 1,\n    fillOpacity = 1,\n    ...rest\n  } = props;\n\n  const tokens = useDesignTokens();\n  const stackId = useScopedStackId(stackIdFromProps);\n  const animation = useChartAnimation();\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  return (\n    <Recharts.Area\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      stackId={stackId}\n      fillOpacity={fillOpacity}\n      {...rest}\n      activeDot={<AreaDot color={color} />}\n      fill={color}\n      stroke={tokens.area[\"border-color\"].value}\n      strokeWidth={tokens.area[\"border-width\"].value}\n      {...animation}\n    />\n  );\n};\n\nexport const TypedArea = <TData extends ChartDataValue = ChartDataValue>() =>\n  Area as ComponentType<AreaPropsByDataKeyProp<TData>>;\n\nexport default Area;\n"],"mappings":";;;;;;;;;;;;;AA6CA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,OAAO,iBAAiB,aACxB,SAAS,mBAAmB,GAC5B,cAAc,GACd,GAAG,SACD;CAEJ,MAAM,SAAS,gBAAgB;CAC/B,MAAM,UAAU,iBAAiB,gBAAgB;CACjD,MAAM,YAAY,kBAAkB;CAEpC,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EACpD;EACI;EACb,GAAI;EACJ,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,MAAM;EACN,QAAQ,OAAO,KAAK,eAAe,CAAC;EACpC,aAAa,OAAO,KAAK,eAAe,CAAC;EACzC,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBACX"}

package/dist/js/packages/components/src/components/CartesianChart/components/Bar/Bar.mjs

@@ -4,6 +4,8 @@ import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.m
 import { useCartesianChartContext } from "../../context.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import { isDataKeyWithLabel } from "../../types.mjs";
+import { useScopedStackId } from "../../hooks/useScopedStackId.mjs";
+import { useChartAnimation } from "../../hooks/useChartAnimation.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -12,10 +14,12 @@ import * as Recharts from "recharts";
 var Bar = (props) => {
 	const { color: colorFromProps = "sea-green", ...rest } = props;
 	const tokens = useDesignTokens();
+	const animation = useChartAnimation();
 	const { layout } = useCartesianChartContext();
+	const stackId = useScopedStackId(props.stackId);
 	const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
 	const cornerRadius = parseInt(tokens.bar["corner-radius"].value);
-	const radius = props.stackId !== void 0 ? 0 : layout === "vertical" ? [
+	const radius = layout === "vertical" ? [
 		0,
 		cornerRadius,
 		cornerRadius,
@@ -26,11 +30,19 @@ var Bar = (props) => {
 		0,
 		0
 	];
-	return /* @__PURE__ */ jsx(Recharts.Bar, {
+	const bar = /* @__PURE__ */ jsx(Recharts.Bar, {
 		name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,
 		...rest,
+		stackId,
 		fill: color,
-		radius
+		radius: stackId === void 0 ? radius : 0,
+		...animation
+	});
+	if (stackId === void 0) return bar;
+	return /* @__PURE__ */ jsx(Recharts.BarStack, {
+		stackId,
+		radius,
+		children: bar
 	});
 };
 var TypedBar = () => Bar;

package/dist/js/packages/components/src/components/CartesianChart/components/Bar/Bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Bar/Bar.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype BarBaseProps = Pick<\n  Recharts.BarProps,\n  | \"className\"\n  | \"stackId\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"unit\"\n  | \"barSize\"\n  | \"maxBarSize\"\n  | \"minPointSize\"\n> & {\n  /** The color of the bar. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface BarPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends BarBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface BarPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends BarBaseProps, DataKeyWithLabel<TData> {}\n\nexport type BarProps<TData extends ChartDataValue = ChartDataValue> =\n  BarPropsByDataKey<TData> | BarPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Bar: FC<BarProps> = (props) => {\n  const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  const cornerRadius = parseInt(tokens.bar[\"corner-radius\"].value);\n  const radius: Recharts.BarProps[\"radius\"] =\n    props.stackId !== undefined\n      ? 0\n      : layout === \"vertical\"\n        ? [0, cornerRadius, cornerRadius, 0]\n        : [cornerRadius, cornerRadius, 0, 0];\n\n  return (\n    <Recharts.Bar\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      {...rest}\n      fill={color}\n      radius={radius}\n    />\n  );\n};\n\nexport const TypedBar = <TData extends ChartDataValue = ChartDataValue>() =>\n  Bar as ComponentType<BarPropsByDataKeyProp<TData>>;\n\nexport default Bar;\n"],"mappings":";;;;;;;;;;;AA4CA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,MAAM,eAAe,SAAS,OAAO,IAAI,gBAAgB,CAAC,KAAK;CAC/D,MAAM,SACJ,MAAM,YAAY,KAAA,IACd,IACA,WAAW,aACT;EAAC;EAAG;EAAc;EAAc;CAAC,IACjC;EAAC;EAAc;EAAc;EAAG;CAAC;CAEzC,OACE,oBAAC,SAAS,KAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EAC7D,GAAI;EACJ,MAAM;EACE;CACT,CAAA;AAEL;AAEA,IAAa,iBACX"}
+{"version":3,"file":"Bar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Bar/Bar.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useScopedStackId } from \"@/components/CartesianChart/hooks/useScopedStackId\";\nimport { useChartAnimation } from \"@/components/CartesianChart/hooks/useChartAnimation\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype BarBaseProps = Pick<\n  Recharts.BarProps,\n  | \"className\"\n  | \"stackId\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"unit\"\n  | \"barSize\"\n  | \"maxBarSize\"\n  | \"minPointSize\"\n> & {\n  /** The color of the bar. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface BarPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends BarBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface BarPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends BarBaseProps, DataKeyWithLabel<TData> {}\n\nexport type BarProps<TData extends ChartDataValue = ChartDataValue> =\n  BarPropsByDataKey<TData> | BarPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Bar: FC<BarProps> = (props) => {\n  const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const animation = useChartAnimation();\n  const { layout } = useCartesianChartContext();\n  const stackId = useScopedStackId(props.stackId);\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  const cornerRadius = parseInt(tokens.bar[\"corner-radius\"].value);\n  const radius: Recharts.BarProps[\"radius\"] =\n    layout === \"vertical\"\n      ? [0, cornerRadius, cornerRadius, 0]\n      : [cornerRadius, cornerRadius, 0, 0];\n\n  const bar = (\n    <Recharts.Bar\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      {...rest}\n      stackId={stackId}\n      fill={color}\n      radius={stackId === undefined ? radius : 0}\n      {...animation}\n    />\n  );\n\n  if (stackId === undefined) {\n    return bar;\n  }\n\n  // Every Bar of a stack renders its own BarStack, because a Bar cannot know\n  // its siblings — they all describe the same clip path, so the duplicates are\n  // redundant rather than conflicting.\n  return (\n    <Recharts.BarStack stackId={stackId} radius={radius}>\n      {bar}\n    </Recharts.BarStack>\n  );\n};\n\nexport const TypedBar = <TData extends ChartDataValue = ChartDataValue>() =>\n  Bar as ComponentType<BarPropsByDataKeyProp<TData>>;\n\nexport default Bar;\n"],"mappings":";;;;;;;;;;;;;AA8CA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,YAAY,kBAAkB;CACpC,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,UAAU,iBAAiB,MAAM,OAAO;CAE9C,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,MAAM,eAAe,SAAS,OAAO,IAAI,gBAAgB,CAAC,KAAK;CAC/D,MAAM,SACJ,WAAW,aACP;EAAC;EAAG;EAAc;EAAc;CAAC,IACjC;EAAC;EAAc;EAAc;EAAG;CAAC;CAEvC,MAAM,MACJ,oBAAC,SAAS,KAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EAC7D,GAAI;EACK;EACT,MAAM;EACN,QAAQ,YAAY,KAAA,IAAY,SAAS;EACzC,GAAI;CACL,CAAA;CAGH,IAAI,YAAY,KAAA,GACd,OAAO;CAMT,OACE,oBAAC,SAAS,UAAV;EAA4B;EAAiB;EAC1C,UAAA;CACgB,CAAA;AAEvB;AAEA,IAAa,iBACX"}

package/dist/js/packages/components/src/components/CartesianChart/components/Line/Line.mjs

@@ -3,6 +3,7 @@
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
 import { AreaDot } from "../AreaDot/AreaDot.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
+import { useChartAnimation } from "../../hooks/useChartAnimation.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -11,6 +12,7 @@ import * as Recharts from "recharts";
 var Line = (props) => {
 	const { color: colorFromProps = "sea-green", ...rest } = props;
 	const tokens = useDesignTokens();
+	const animation = useChartAnimation();
 	const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
 	return /* @__PURE__ */ jsx(Recharts.Line, {
 		...rest,
@@ -18,7 +20,8 @@ var Line = (props) => {
 		activeDot: /* @__PURE__ */ jsx(AreaDot, { color }),
 		dot: false,
 		stroke: color,
-		strokeWidth: tokens.line["border-width"].value
+		strokeWidth: tokens.line["border-width"].value,
+		...animation
 	});
 };
 var TypedLine = () => Line;

package/dist/js/packages/components/src/components/CartesianChart/components/Line/Line.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Line.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Line/Line.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport type {\n  ChartDataValue,\n  DataKey,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LineProps<\n  TData extends ChartDataValue = ChartDataValue,\n> extends Pick<\n  Recharts.LineProps,\n  \"className\" | \"key\" | \"xAxisId\" | \"yAxisId\" | \"type\" | \"unit\"\n> {\n  dataKey?: DataKey<TData>;\n  /** The color of the line. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n}\n\n/** @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n  const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  return (\n    <Recharts.Line\n      {...rest}\n      fill={color}\n      activeDot={<AreaDot color={color} />}\n      dot={false}\n      stroke={color}\n      strokeWidth={tokens.line[\"border-width\"].value}\n    />\n  );\n};\n\nexport const TypedLine = <T extends ChartDataValue = ChartDataValue>() =>\n  Line as ComponentType<LineProps<T>>;\n\nexport default Line;\n"],"mappings":";;;;;;;;;;AAuBA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAE/B,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,GAAI;EACJ,MAAM;EACN,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,KAAK;EACL,QAAQ;EACR,aAAa,OAAO,KAAK,eAAe,CAAC;CAC1C,CAAA;AAEL;AAEA,IAAa,kBACX"}
+{"version":3,"file":"Line.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Line/Line.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport type {\n  ChartDataValue,\n  DataKey,\n} from \"@/components/CartesianChart/types\";\nimport { useChartAnimation } from \"@/components/CartesianChart/hooks/useChartAnimation\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LineProps<\n  TData extends ChartDataValue = ChartDataValue,\n> extends Pick<\n  Recharts.LineProps,\n  \"className\" | \"key\" | \"xAxisId\" | \"yAxisId\" | \"type\" | \"unit\"\n> {\n  dataKey?: DataKey<TData>;\n  /** The color of the line. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n}\n\n/** @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n  const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const animation = useChartAnimation();\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  return (\n    <Recharts.Line\n      {...rest}\n      fill={color}\n      activeDot={<AreaDot color={color} />}\n      dot={false}\n      stroke={color}\n      strokeWidth={tokens.line[\"border-width\"].value}\n      {...animation}\n    />\n  );\n};\n\nexport const TypedLine = <T extends ChartDataValue = ChartDataValue>() =>\n  Line as ComponentType<LineProps<T>>;\n\nexport default Line;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,YAAY,kBAAkB;CAEpC,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,GAAI;EACJ,MAAM;EACN,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,KAAK;EACL,QAAQ;EACR,aAAa,OAAO,KAAK,eAAe,CAAC;EACzC,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBACX"}

package/dist/js/packages/components/src/components/CartesianChart/context.mjs

@@ -2,7 +2,10 @@
 /* */
 import { createContext, useContext } from "react";
 //#region src/components/CartesianChart/context.ts
-var cartesianChartContext = createContext({ layout: "horizontal" });
+var cartesianChartContext = createContext({
+	layout: "horizontal",
+	stackIdPrefix: ""
+});
 var useCartesianChartContext = () => useContext(cartesianChartContext);
 var CartesianChartContextProvider = cartesianChartContext.Provider;
 //#endregion

package/dist/js/packages/components/src/components/CartesianChart/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CartesianChartLayout } from \"@/components/CartesianChart/types\";\n\ninterface CartesianChartContext {\n  layout: CartesianChartLayout;\n}\n\nconst cartesianChartContext = createContext<CartesianChartContext>({\n  layout: \"horizontal\",\n});\n\nexport const useCartesianChartContext = (): CartesianChartContext =>\n  useContext(cartesianChartContext);\n\nexport const CartesianChartContextProvider = cartesianChartContext.Provider;\n"],"mappings":";;;;AAOA,IAAM,wBAAwB,cAAqC,EACjE,QAAQ,aACV,CAAC;AAED,IAAa,iCACX,WAAW,qBAAqB;AAElC,IAAa,gCAAgC,sBAAsB"}
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CartesianChartLayout } from \"@/components/CartesianChart/types\";\n\ninterface CartesianChartContext {\n  layout: CartesianChartLayout;\n  /**\n   * Prefix that scopes a stack ID to this chart. Recharts derives DOM IDs from\n   * the stack ID, so two charts on one page sharing a stack ID would otherwise\n   * share their clip paths.\n   */\n  stackIdPrefix: string;\n}\n\nconst cartesianChartContext = createContext<CartesianChartContext>({\n  layout: \"horizontal\",\n  stackIdPrefix: \"\",\n});\n\nexport const useCartesianChartContext = (): CartesianChartContext =>\n  useContext(cartesianChartContext);\n\nexport const CartesianChartContextProvider = cartesianChartContext.Provider;\n"],"mappings":";;;;AAaA,IAAM,wBAAwB,cAAqC;CACjE,QAAQ;CACR,eAAe;AACjB,CAAC;AAED,IAAa,iCACX,WAAW,qBAAqB;AAElC,IAAa,gCAAgC,sBAAsB"}

package/dist/js/packages/components/src/components/CartesianChart/hooks/useChartAnimation.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { useDesignTokens } from "../../../lib/theming/hooks/useDesignTokens.mjs";
+import { useReducedMotion } from "framer-motion";
+//#region src/components/CartesianChart/hooks/useChartAnimation.ts
+/**
+* Animation props for the chart's graphical items. Recharts animates on mount
+* by default and does not look at the user's motion preference on its own.
+*
+* Replaces recharts' default `"auto"`, which means "not during SSR" – moot
+* here, since `ResponsiveContainer` renders nothing on the server.
+*
+* @internal
+*/
+var useChartAnimation = () => {
+	const prefersReducedMotion = useReducedMotion();
+	const tokens = useDesignTokens();
+	return {
+		isAnimationActive: !prefersReducedMotion,
+		animationDuration: parseInt(tokens["cartesian-chart"]["transition-duration"].value),
+		animationEasing: "ease"
+	};
+};
+//#endregion
+export { useChartAnimation };
+
+//# sourceMappingURL=useChartAnimation.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useChartAnimation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartAnimation.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useChartAnimation.ts"],"sourcesContent":["import { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\n/**\n * Animation props for the chart's graphical items. Recharts animates on mount\n * by default and does not look at the user's motion preference on its own.\n *\n * Replaces recharts' default `\"auto\"`, which means \"not during SSR\" – moot\n * here, since `ResponsiveContainer` renders nothing on the server.\n *\n * @internal\n */\nexport const useChartAnimation = () => {\n  const prefersReducedMotion = useReducedMotion();\n  const tokens = useDesignTokens();\n\n  return {\n    isAnimationActive: !prefersReducedMotion,\n    animationDuration: parseInt(\n      tokens[\"cartesian-chart\"][\"transition-duration\"].value,\n    ),\n    // Recharts' own default, pinned to match the CSS `ease` of the DonutChart\n    // and the ProgressBar.\n    animationEasing: \"ease\" as const,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;AAYA,IAAa,0BAA0B;CACrC,MAAM,uBAAuB,iBAAiB;CAC9C,MAAM,SAAS,gBAAgB;CAE/B,OAAO;EACL,mBAAmB,CAAC;EACpB,mBAAmB,SACjB,OAAO,kBAAkB,CAAC,sBAAsB,CAAC,KACnD;EAGA,iBAAiB;CACnB;AACF"}

package/dist/js/packages/components/src/components/CartesianChart/hooks/useScopedStackId.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { useCartesianChartContext } from "../context.mjs";
+//#region src/components/CartesianChart/hooks/useScopedStackId.ts
+/**
+* Scopes a stack ID to the surrounding chart, so that charts on the same page
+* using the same stack ID do not share the DOM IDs Recharts derives from it.
+*/
+var useScopedStackId = (stackId) => {
+	const { stackIdPrefix } = useCartesianChartContext();
+	return stackId === void 0 ? void 0 : `${stackIdPrefix}${stackId}`;
+};
+//#endregion
+export { useScopedStackId };
+
+//# sourceMappingURL=useScopedStackId.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useScopedStackId.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScopedStackId.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useScopedStackId.ts"],"sourcesContent":["import type { StackId } from \"recharts/types/util/ChartUtils\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\n\n/**\n * Scopes a stack ID to the surrounding chart, so that charts on the same page\n * using the same stack ID do not share the DOM IDs Recharts derives from it.\n */\nexport const useScopedStackId = (\n  stackId: StackId | undefined,\n): string | undefined => {\n  const { stackIdPrefix } = useCartesianChartContext();\n  return stackId === undefined ? undefined : `${stackIdPrefix}${stackId}`;\n};\n"],"mappings":";;;;;;;;AAOA,IAAa,oBACX,YACuB;CACvB,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,OAAO,YAAY,KAAA,IAAY,KAAA,IAAY,GAAG,gBAAgB;AAChE"}

package/dist/js/packages/components/src/components/Chat/Chat.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  .messageThreadContainer {\n    @include scrollbar.scrollbar;\n\n    overflow: auto;\n    padding-bottom: var(--chat--spacing);\n    padding-inline-end: var(--size-px--m);\n    margin-inline-end: calc(var(--size-px--m) * -1);\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column-reverse;\n  }\n\n  .fileCardList {\n    margin-top: var(--chat--spacing);\n  }\n\n  .controls:not(:has(form)),\n  .controls form {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--chat--spacing);\n    flex-wrap: wrap;\n    padding-top: var(--chat--spacing);\n\n    > :first-child {\n      order: 0;\n      width: 100%;\n    }\n\n    .successButton,\n    .button {\n      order: 1;\n    }\n\n    .successButton {\n      margin-inline-start: auto;\n    }\n  }\n}\n\n@media (max-width: 550px) {\n  .successButton,\n  .button {\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  .messageThreadContainer {\n    @include scrollbar.scrollbar;\n\n    overflow: auto;\n    padding-bottom: var(--chat--spacing);\n    padding-inline-end: var(--size-px--m);\n    margin-inline-end: calc(var(--size-px--m) * -1);\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column-reverse;\n  }\n\n  .fileCardList {\n    margin-top: var(--chat--spacing);\n  }\n\n  /* The `<form>` comes from the consumer wrapping the controls in the\n     react-hook-form `Form` (or its own `formComponent`). `Form` is a plain FC,\n     not a flowComponent, so Chat's props context cannot give it a class. */\n  // stylelint-disable selector-max-type -- consumer-supplied form, no class\n  .controls:not(:has(form)),\n  .controls form {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--chat--spacing);\n    flex-wrap: wrap;\n    padding-top: var(--chat--spacing);\n\n    > :first-child {\n      order: 0;\n      width: 100%;\n    }\n\n    .successButton,\n    .button {\n      order: 1;\n    }\n\n    .successButton {\n      margin-inline-start: auto;\n    }\n  }\n  // stylelint-enable selector-max-type\n}\n\n@media (max-width: 550px) {\n  .successButton,\n  .button {\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}