@mittwald/flow-react-components 0.2.0-alpha.26 → 0.2.0-alpha.261

package/dist/js/components/src/components/AreaChart/AreaChart.mjs

@@ -0,0 +1,94 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import { Children, cloneElement, useRef, useState, useEffect } from 'react';
+import { Area } from './components/Area/Area.mjs';
+import { CartesianGrid } from '../CartesianGrid/CartesianGrid.mjs';
+import clsx from 'clsx';
+import styles from './AreaChart.module.scss.mjs';
+import { Wrap } from '../Wrap/Wrap.mjs';
+
+const AreaChart = (props) => {
+  const {
+    children,
+    data,
+    className,
+    height,
+    flexGrow,
+    emptyView: EmptyView,
+    ...rest
+  } = props;
+  const rootClassName = clsx(styles.areaChart, className);
+  const areasWithoutDots = [];
+  const areasWithDots = [];
+  const otherChildren = [];
+  const gridChildren = [];
+  Children.forEach(children, (child, index) => {
+    if (!child) return;
+    const element = child;
+    if (element.type === CartesianGrid) {
+      gridChildren.push(element);
+    } else if (element.type === Area) {
+      areasWithoutDots.push(
+        cloneElement(element, {
+          onlyDots: false,
+          key: `area-${index}`
+        })
+      );
+      areasWithDots.push(
+        cloneElement(element, {
+          onlyDots: true,
+          key: `area-dots-${index}`
+        })
+      );
+    } else {
+      otherChildren.push(element);
+    }
+  });
+  const showEmptyView = (!data || data.length === 0) && EmptyView;
+  const chartContainerRef = useRef(null);
+  const [viewDimensions, setViewDimensions] = useState(null);
+  useEffect(() => {
+    if (showEmptyView) {
+      const updateDimensions = () => {
+        const svg = chartContainerRef.current?.querySelector(
+          "svg"
+        );
+        if (!svg) return;
+        const clip = svg.querySelector("clipPath rect");
+        if (clip) {
+          const x = parseFloat(clip.getAttribute("x") ?? "0");
+          const y = parseFloat(clip.getAttribute("y") ?? "0");
+          const width = parseFloat(clip.getAttribute("width") ?? "0");
+          const height2 = parseFloat(clip.getAttribute("height") ?? "0");
+          setViewDimensions({ x, y, width, height: height2 });
+        }
+      };
+      updateDimensions();
+      const container = chartContainerRef.current;
+      const observer = new ResizeObserver(updateDimensions);
+      if (container) observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(Wrap, { if: height, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height, flex: flexGrow ? 1 : void 0 },
+      ref: chartContainerRef,
+      children: /* @__PURE__ */ jsx(Recharts.ResponsiveContainer, { children: /* @__PURE__ */ jsxs(Recharts.AreaChart, { data, className: rootClassName, ...rest, children: [
+        !showEmptyView && gridChildren,
+        areasWithoutDots,
+        otherChildren,
+        areasWithDots,
+        showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx(EmptyView, { data }) })
+      ] }) })
+    }
+  ) });
+};
+
+export { AreaChart, AreaChart as default };
+//# sourceMappingURL=AreaChart.mjs.map

package/dist/js/components/src/components/AreaChart/AreaChart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.mjs","sources":["../../../../../../src/components/AreaChart/AreaChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport type { CategoricalChartProps } from \"recharts/types/chart/generateCategoricalChart\";\nimport React, {\n  Children,\n  cloneElement,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n  type ReactElement,\n  type SVGProps,\n} from \"react\";\nimport { Area, type AreaProps } from \"./components/Area\";\nimport CartesianGrid from \"../CartesianGrid\";\nimport clsx from \"clsx\";\nimport styles from \"./AreaChart.module.scss\";\nimport Wrap from \"../Wrap\";\n\nexport interface AreaChartEmptyViewProps {\n  data?: CategoricalChartProps[\"data\"];\n}\n\nexport interface AreaChartProps\n  extends Pick<\n      CategoricalChartProps,\n      \"data\" | \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  height?: string;\n  /** View that is provided when data is empty/undefined */\n  emptyView?: React.ComponentType<AreaChartEmptyViewProps>;\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 AreaChart: FC<AreaChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView: EmptyView,\n    ...rest\n  } = props;\n  const rootClassName = clsx(styles.areaChart, className);\n\n  // render order: grid, areas without dots, other children, areas with dots\n  // this is needed to ensure that the dots will always overlay the areas\n  const areasWithoutDots: ReactElement[] = [];\n  const areasWithDots: ReactElement[] = [];\n  const otherChildren: ReactElement[] = [];\n  const gridChildren: ReactElement[] = [];\n\n  Children.forEach(children, (child, index) => {\n    if (!child) return;\n    const element = child as ReactElement;\n\n    if (element.type === CartesianGrid) {\n      gridChildren.push(element);\n    } else if (element.type === Area) {\n      areasWithoutDots.push(\n        cloneElement(element as ReactElement<AreaProps>, {\n          onlyDots: false,\n          key: `area-${index}`,\n        }),\n      );\n      areasWithDots.push(\n        cloneElement(element as ReactElement<AreaProps>, {\n          onlyDots: true,\n          key: `area-dots-${index}`,\n        }),\n      );\n    } else {\n      otherChildren.push(element);\n    }\n  });\n\n  const showEmptyView = (!data || data.length === 0) && EmptyView;\n\n  const chartContainerRef = useRef<HTMLDivElement>(null);\n  const [viewDimensions, setViewDimensions] = useState<Partial<\n    SVGProps<SVGForeignObjectElement>\n  > | null>(null);\n\n  // resizing the foreignObject for the EmptyView on size changes\n  useEffect(() => {\n    if (showEmptyView) {\n      const updateDimensions = () => {\n        const svg = chartContainerRef.current?.querySelector(\n          \"svg\",\n        ) as SVGSVGElement | null;\n        if (!svg) return;\n\n        const clip = svg.querySelector(\"clipPath rect\");\n        if (clip) {\n          const x = parseFloat(clip.getAttribute(\"x\") ?? \"0\");\n          const y = parseFloat(clip.getAttribute(\"y\") ?? \"0\");\n          const width = parseFloat(clip.getAttribute(\"width\") ?? \"0\");\n          const height = parseFloat(clip.getAttribute(\"height\") ?? \"0\");\n          setViewDimensions({ x, y, width, height });\n        }\n      };\n\n      updateDimensions();\n\n      const container = chartContainerRef.current;\n      const observer = new ResizeObserver(updateDimensions);\n      if (container) observer.observe(container);\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, []);\n\n  return (\n    <Wrap if={height}>\n      <div\n        style={{ height, flex: flexGrow ? 1 : undefined }}\n        ref={chartContainerRef}\n      >\n        <Recharts.ResponsiveContainer>\n          <Recharts.AreaChart data={data} className={rootClassName} {...rest}>\n            {!showEmptyView && gridChildren}\n            {areasWithoutDots}\n            {otherChildren}\n            {areasWithDots}\n            {showEmptyView && viewDimensions && (\n              <foreignObject {...viewDimensions}>\n                <EmptyView data={data} />\n              </foreignObject>\n            )}\n          </Recharts.AreaChart>\n        </Recharts.ResponsiveContainer>\n      </div>\n    </Wrap>\n  );\n};\n\nexport default AreaChart;\n"],"names":["height"],"mappings":"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"}

package/dist/js/components/src/components/AreaChart/AreaChart.module.scss.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const areaChart = "flow--area-chart";
+const styles = {
+	areaChart: areaChart
+};
+
+export { areaChart, styles as default };
+//# sourceMappingURL=AreaChart.module.scss.mjs.map

package/dist/js/components/src/components/AreaChart/AreaChart.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/js/components/src/components/AreaChart/components/Area/Area.mjs

@@ -0,0 +1,33 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import { AreaDot } from '../AreaDot/AreaDot.mjs';
+import { getCategoricalColorValue } from '../../../../lib/tokens/getCategoricalColorValue.mjs';
+
+const Area = (props) => {
+  const {
+    color = "sea-green",
+    stackId = 1,
+    fillOpacity = 1,
+    onlyDots = true,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.Area,
+    {
+      stackId,
+      fillOpacity,
+      ...rest,
+      activeDot: onlyDots ? /* @__PURE__ */ jsx(AreaDot, { color: getCategoricalColorValue(color) }) : false,
+      fill: onlyDots ? "none" : getCategoricalColorValue(color),
+      stroke: onlyDots ? "none" : tokens.area["border-color"].value,
+      strokeWidth: onlyDots ? void 0 : tokens.area["border-width"].value
+    }
+  );
+};
+
+export { Area, Area as default };
+//# sourceMappingURL=Area.mjs.map

package/dist/js/components/src/components/AreaChart/components/Area/Area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Area.mjs","sources":["../../../../../../../../src/components/AreaChart/components/Area/Area.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalColors } from \"@/lib/tokens/CategoricalColors\";\nimport { getCategoricalColorValue } from \"@/lib/tokens/getCategoricalColorValue\";\n\nexport interface AreaProps\n  extends Pick<\n    Recharts.AreaProps,\n    | \"className\"\n    | \"dataKey\"\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?: CategoricalColors;\n  /** @internal */\n  onlyDots?: boolean;\n}\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n  const {\n    color = \"sea-green\",\n    stackId = 1,\n    fillOpacity = 1,\n    onlyDots = true,\n    ...rest\n  } = props;\n\n  return (\n    <Recharts.Area\n      stackId={stackId}\n      fillOpacity={fillOpacity}\n      {...rest}\n      activeDot={\n        onlyDots ? <AreaDot color={getCategoricalColorValue(color)} /> : false\n      }\n      fill={onlyDots ? \"none\" : getCategoricalColorValue(color)}\n      stroke={onlyDots ? \"none\" : tokens.area[\"border-color\"].value}\n      strokeWidth={onlyDots ? undefined : tokens.area[\"border-width\"].value}\n    />\n  );\n};\n\nexport default Area;\n"],"names":[],"mappings":";;;;;;;AA2Ba,MAAA,IAAA,GAAsB,CAAC,KAAU,KAAA;AAC5C,EAAM,MAAA;AAAA,IACJ,KAAQ,GAAA,WAAA;AAAA,IACR,OAAU,GAAA,CAAA;AAAA,IACV,WAAc,GAAA,CAAA;AAAA,IACd,QAAW,GAAA,IAAA;AAAA,IACX,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA,EACE,2BAAY,GAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,wBAAyB,CAAA,KAAK,GAAG,CAAK,GAAA,KAAA;AAAA,MAEnE,IAAM,EAAA,QAAA,GAAW,MAAS,GAAA,wBAAA,CAAyB,KAAK,CAAA;AAAA,MACxD,QAAQ,QAAW,GAAA,MAAA,GAAS,MAAO,CAAA,IAAA,CAAK,cAAc,CAAE,CAAA,KAAA;AAAA,MACxD,aAAa,QAAW,GAAA,MAAA,GAAY,MAAO,CAAA,IAAA,CAAK,cAAc,CAAE,CAAA;AAAA;AAAA,GAClE;AAEJ;;;;"}

package/dist/js/components/src/components/AreaChart/components/AreaDot/AreaDot.mjs

@@ -0,0 +1,30 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AreaDot = ({
+  cx,
+  cy,
+  color
+}) => {
+  if (cx === void 0 || cy === void 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      x: cx - 7,
+      y: cy - 7,
+      width: 14,
+      height: 14,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "7", fill: "white" }),
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4", stroke: color, strokeWidth: "2", fill: "white" })
+      ]
+    }
+  );
+};
+
+export { AreaDot };
+//# sourceMappingURL=AreaDot.mjs.map

package/dist/js/components/src/components/AreaChart/components/AreaDot/AreaDot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaDot.mjs","sources":["../../../../../../../../src/components/AreaChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\n\nexport const AreaDot: FC<Recharts.DotProps & { color: string }> = ({\n  cx,\n  cy,\n  color,\n}) => {\n  if (cx === undefined || cy === undefined) return null;\n\n  return (\n    <svg\n      x={cx - 7}\n      y={cy - 7}\n      width={14}\n      height={14}\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"7\" fill=\"white\" />\n      <circle cx=\"7\" cy=\"7\" r=\"4\" stroke={color} strokeWidth=\"2\" fill=\"white\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;AAGO,MAAM,UAAqD,CAAC;AAAA,EACjE,EAAA;AAAA,EACA,EAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,IAAI,EAAO,KAAA,MAAA,IAAa,EAAO,KAAA,MAAA,EAAkB,OAAA,IAAA;AAEjD,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAG,EAAK,GAAA,CAAA;AAAA,MACR,GAAG,EAAK,GAAA,CAAA;AAAA,MACR,KAAO,EAAA,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,MAAA;AAAA,MACL,KAAM,EAAA,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,QAAA,EAAA,EAAO,IAAG,GAAI,EAAA,EAAA,EAAG,KAAI,CAAE,EAAA,GAAA,EAAI,MAAK,OAAQ,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAA,QAAA,EAAA,EAAO,EAAG,EAAA,GAAA,EAAI,EAAG,EAAA,GAAA,EAAI,CAAE,EAAA,GAAA,EAAI,MAAQ,EAAA,KAAA,EAAO,WAAY,EAAA,GAAA,EAAI,MAAK,OAAQ,EAAA;AAAA;AAAA;AAAA,GAC1E;AAEJ;;;;"}

package/dist/js/components/src/components/Avatar/Avatar.mjs

@@ -0,0 +1,38 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Avatar.module.scss.mjs';
+import clsx from 'clsx';
+import { ClearPropsContext } from '../ClearPropsContext/ClearPropsContext.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { AlertIcon } from '../AlertIcon/AlertIcon.mjs';
+
+const Avatar = flowComponent("Avatar", (props) => {
+  const { children, className, color, size = "m", status, ref } = props;
+  const rootClassName = clsx(
+    styles.avatar,
+    styles[`size-${size}`],
+    className,
+    !status && styles[color ?? "blue"],
+    status && styles[status]
+  );
+  const useDynamicColor = color === void 0 && status === void 0;
+  const propsContext = {
+    Initials: {
+      className: styles.initials,
+      useDynamicColor
+    },
+    Icon: {
+      className: styles.icon
+    }
+  };
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx("div", { className: rootClassName, ref, children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
+    !status && children,
+    status && /* @__PURE__ */ jsx(AlertIcon, { className: styles.icon, status })
+  ] }) }) });
+});
+
+export { Avatar, Avatar as default };
+//# sourceMappingURL=Avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Avatar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { PropsWithClassName, Status } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { avatarColors } from \"@/components/Avatar/avatarColors\";\n\nexport type AvatarColors = (typeof avatarColors)[number];\n\nexport interface AvatarProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The size of the avatar. @default \"m\" */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\";\n  /** The color of icons and initials inside the avatar. */\n  color?: AvatarColors;\n  /**\n   * Adds status icon and color to the avatar. May only be used if the status is\n   * explained by an element (like text or label) nearby.\n   */\n  status?: Status;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Avatar = flowComponent(\"Avatar\", (props) => {\n  const { children, className, color, size = \"m\", status, ref } = props;\n\n  const rootClassName = clsx(\n    styles.avatar,\n    styles[`size-${size}`],\n    className,\n    !status && styles[color ?? \"blue\"],\n    status && styles[status],\n  );\n\n  const useDynamicColor = color === undefined && status === undefined;\n\n  const propsContext: PropsContext = {\n    Initials: {\n      className: styles.initials,\n      useDynamicColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <ClearPropsContext>\n      <div className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {!status && children}\n          {status && <AlertIcon className={styles.icon} status={status} />}\n        </PropsContextProvider>\n      </div>\n    </ClearPropsContext>\n  );\n});\n\nexport default Avatar;\n"],"names":[],"mappings":";;;;;;;;;AAiCO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA,EAAE,UAAU,SAAW,EAAA,KAAA,EAAO,OAAO,GAAK,EAAA,MAAA,EAAQ,KAAQ,GAAA,KAAA;AAEhE,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,IACrB,SAAA;AAAA,IACA,CAAC,MAAA,IAAU,MAAO,CAAA,KAAA,IAAS,MAAM,CAAA;AAAA,IACjC,MAAA,IAAU,OAAO,MAAM;AAAA,GACzB;AAEA,EAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,MAAA,IAAa,MAAW,KAAA,MAAA;AAE1D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,QAAU,EAAA;AAAA,MACR,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,eAAe,GAC7B,EAAA,QAAA,kBAAA,IAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,MAAU,IAAA,QAAA;AAAA,IACX,0BAAW,GAAA,CAAA,SAAA,EAAA,EAAU,SAAW,EAAA,MAAA,CAAO,MAAM,MAAgB,EAAA;AAAA,GAAA,EAChE,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Avatar/Avatar.module.scss.mjs

@@ -0,0 +1,35 @@
+"use client"
+/* */
+const avatar = "flow--avatar";
+const icon = "flow--avatar--icon";
+const initials = "flow--avatar--initials";
+const blue = "flow--avatar--blue";
+const teal = "flow--avatar--teal";
+const green = "flow--avatar--green";
+const violet = "flow--avatar--violet";
+const lilac = "flow--avatar--lilac";
+const info = "flow--avatar--info";
+const success = "flow--avatar--success";
+const warning = "flow--avatar--warning";
+const danger = "flow--avatar--danger";
+const styles = {
+	avatar: avatar,
+	icon: icon,
+	initials: initials,
+	"size-m": "flow--avatar--size-m",
+	"size-xs": "flow--avatar--size-xs",
+	"size-s": "flow--avatar--size-s",
+	"size-l": "flow--avatar--size-l",
+	blue: blue,
+	teal: teal,
+	green: green,
+	violet: violet,
+	lilac: lilac,
+	info: info,
+	success: success,
+	warning: warning,
+	danger: danger
+};
+
+export { avatar, blue, danger, styles as default, green, icon, info, initials, lilac, success, teal, violet, warning };
+//# sourceMappingURL=Avatar.module.scss.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/Avatar/avatarColors.mjs

@@ -0,0 +1,12 @@
+"use client"
+/* */
+const avatarColors = [
+  "blue",
+  "teal",
+  "green",
+  "violet",
+  "lilac"
+];
+
+export { avatarColors };
+//# sourceMappingURL=avatarColors.mjs.map

package/dist/js/components/src/components/Avatar/avatarColors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarColors.mjs","sources":["../../../../../../src/components/Avatar/avatarColors.tsx"],"sourcesContent":["export const avatarColors = [\n  \"blue\",\n  \"teal\",\n  \"green\",\n  \"violet\",\n  \"lilac\",\n] as const;\n"],"names":[],"mappings":"AAAO,MAAM,YAAe,GAAA;AAAA,EAC1B,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;;;;"}

package/dist/js/components/src/components/AvatarStack/AvatarStack.mjs

@@ -0,0 +1,45 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Children } from 'react';
+import clsx from 'clsx';
+import styles from './AvatarStack.module.scss.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+import { Button } from '../Button/Button.mjs';
+import { Avatar } from '../Avatar/Avatar.mjs';
+import { Wrap } from '../Wrap/Wrap.mjs';
+
+const AvatarStack = (props) => {
+  const {
+    className,
+    children,
+    totalCount = 0,
+    size = "m",
+    onCountPress
+  } = props;
+  const avatarCount = Children.count(children);
+  const additionalItemsCount = totalCount - avatarCount;
+  const rootClassName = clsx(
+    styles.avatarStack,
+    styles[`size-${size}`],
+    className
+  );
+  const propsContext = {
+    Avatar: { className: styles.avatar, size },
+    Button: {
+      className: styles.avatar
+    }
+  };
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, mergeInParentContext: true, children: /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+    children,
+    additionalItemsCount > 0 && /* @__PURE__ */ jsx(Wrap, { if: onCountPress, children: /* @__PURE__ */ jsx(Button, { onPress: onCountPress, children: /* @__PURE__ */ jsxs(Avatar, { size, children: [
+      "+",
+      additionalItemsCount
+    ] }) }) })
+  ] }) });
+};
+
+export { AvatarStack, AvatarStack as default };
+//# sourceMappingURL=AvatarStack.mjs.map

package/dist/js/components/src/components/AvatarStack/AvatarStack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.mjs","sources":["../../../../../../src/components/AvatarStack/AvatarStack.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React, { Children } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./AvatarStack.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { Avatar } from \"@/components/Avatar\";\nimport { Wrap } from \"@/components/Wrap\";\n\nexport interface AvatarStackProps\n  extends PropsWithClassName,\n    PropsWithChildren {\n  /**\n   * The total count of items, as avatars should only be displayed for the first\n   * view\n   */\n  totalCount?: number;\n  /** The onPress action of the additional items count element */\n  onCountPress?: () => void;\n  /** The size of the avatars inside the stack. @default \"m\" */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const AvatarStack: FC<AvatarStackProps> = (props) => {\n  const {\n    className,\n    children,\n    totalCount = 0,\n    size = \"m\",\n    onCountPress,\n  } = props;\n\n  const avatarCount = Children.count(children);\n\n  const additionalItemsCount = totalCount - avatarCount;\n\n  const rootClassName = clsx(\n    styles.avatarStack,\n    styles[`size-${size}`],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Avatar: { className: styles.avatar, size },\n    Button: {\n      className: styles.avatar,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      <div className={rootClassName}>\n        {children}\n        {additionalItemsCount > 0 && (\n          <Wrap if={onCountPress}>\n            <Button onPress={onCountPress}>\n              <Avatar size={size}>+{additionalItemsCount}</Avatar>\n            </Button>\n          </Wrap>\n        )}\n      </div>\n    </PropsContextProvider>\n  );\n};\n\nexport default AvatarStack;\n"],"names":[],"mappings":";;;;;;;;;;;AA0Ba,MAAA,WAAA,GAAoC,CAAC,KAAU,KAAA;AAC1D,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,CAAA;AAAA,IACb,IAAO,GAAA,GAAA;AAAA,IACP;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,WAAA,GAAc,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA;AAE3C,EAAA,MAAM,uBAAuB,UAAa,GAAA,WAAA;AAE1C,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,WAAA;AAAA,IACP,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,IACrB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,MAAQ,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,QAAQ,IAAK,EAAA;AAAA,IACzC,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,wBAAqB,KAAO,EAAA,YAAA,EAAc,sBAAoB,IAC7D,EAAA,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,aACb,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,oBAAuB,GAAA,CAAA,oBACrB,GAAA,CAAA,IAAA,EAAA,EAAK,EAAI,EAAA,YAAA,EACR,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,YAAA,EACf,QAAC,kBAAA,IAAA,CAAA,MAAA,EAAA,EAAO,IAAY,EAAA,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE;AAAA,KAAA,EAAqB,GAC7C,CACF,EAAA;AAAA,GAAA,EAEJ,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/AvatarStack/AvatarStack.module.scss.mjs

@@ -0,0 +1,15 @@
+"use client"
+/* */
+const avatarStack = "flow--avatar-stack";
+const avatar = "flow--avatar-stack--avatar";
+const styles = {
+	avatarStack: avatarStack,
+	avatar: avatar,
+	"size-m": "flow--avatar-stack--size-m",
+	"size-xs": "flow--avatar-stack--size-xs",
+	"size-s": "flow--avatar-stack--size-s",
+	"size-l": "flow--avatar-stack--size-l"
+};
+
+export { avatar, avatarStack, styles as default };
+//# sourceMappingURL=AvatarStack.module.scss.mjs.map

package/dist/js/components/src/components/AvatarStack/AvatarStack.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/js/components/src/components/Badge/Badge.mjs

@@ -0,0 +1,83 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import styles from './Badge.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { Button } from '../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import { IconClose } from '../Icon/components/icons/IconClose.mjs';
+
+const Badge = flowComponent("Badge", (props) => {
+  const {
+    children,
+    className,
+    color = "neutral",
+    ref,
+    onPress,
+    onClose,
+    isDisabled,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.badge,
+    styles[color],
+    isDisabled && styles.disabled,
+    className
+  );
+  const propsContext = {
+    Label: {
+      elementType: "span",
+      className: styles.scope,
+      unstyled: true
+    },
+    Text: {
+      elementType: "span",
+      className: styles.value
+    },
+    Button: {
+      Label: {
+        elementType: "span",
+        className: styles.scope,
+        unstyled: true
+      },
+      Text: {
+        elementType: "span",
+        className: styles.value
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs("div", { className: rootClassName, ...rest, ref, children: [
+    !onPress && /* @__PURE__ */ jsx("div", { className: styles.content, children }),
+    onPress && /* @__PURE__ */ jsx(
+      Button,
+      {
+        isDisabled,
+        unstyled: true,
+        className: styles.button,
+        onPress,
+        children
+      }
+    ),
+    onClose && /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: styles.close,
+        size: "s",
+        color: "dark",
+        variant: "plain",
+        onPress: onClose,
+        isDisabled,
+        children: /* @__PURE__ */ jsx(IconClose, {})
+      }
+    )
+  ] }) });
+});
+
+export { Badge, Badge as default };
+//# sourceMappingURL=Badge.mjs.map

package/dist/js/components/src/components/Badge/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","sources":["../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\n\nexport const badgeColors = [\n  \"neutral\",\n  \"blue\",\n  \"navy\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"orange\",\n  \"red\",\n  \"dark\",\n  \"light\",\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n  extends PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** Handler that is called when the badge is pressed. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when the badges close icon is pressed. */\n  onClose?: (e: PressEvent) => void;\n  /** The color of the badge. @default \"neutral\" */\n  color?: BadgeColors;\n  /** Whether the badge is disabled. */\n  isDisabled?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n  const {\n    children,\n    className,\n    color = \"neutral\",\n    ref,\n    onPress,\n    onClose,\n    isDisabled,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.badge,\n    styles[color],\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      elementType: \"span\",\n      className: styles.scope,\n      unstyled: true,\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.value,\n    },\n    Button: {\n      Label: {\n        elementType: \"span\",\n        className: styles.scope,\n        unstyled: true,\n      },\n      Text: {\n        elementType: \"span\",\n        className: styles.value,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName} {...rest} ref={ref}>\n        {!onPress && <div className={styles.content}>{children}</div>}\n        {onPress && (\n          <Button\n            isDisabled={isDisabled}\n            unstyled\n            className={styles.button}\n            onPress={onPress}\n          >\n            {children}\n          </Button>\n        )}\n        {onClose && (\n          <Button\n            className={styles.close}\n            size=\"s\"\n            color=\"dark\"\n            variant=\"plain\"\n            onPress={onClose}\n            isDisabled={isDisabled}\n          >\n            <IconClose />\n          </Button>\n        )}\n      </div>\n    </PropsContextProvider>\n  );\n});\n\nexport default Badge;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA6CO,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,CAAC,KAAU,KAAA;AACrD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAQ,GAAA,SAAA;AAAA,IACR,GAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,OAAO,KAAK,CAAA;AAAA,IACZ,cAAc,MAAO,CAAA,QAAA;AAAA,IACrB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAa,EAAA,MAAA;AAAA,MACb,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,WAAa,EAAA,MAAA;AAAA,MACb,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,WAAa,EAAA,MAAA;AAAA,QACb,WAAW,MAAO,CAAA,KAAA;AAAA,QAClB,QAAU,EAAA;AAAA,OACZ;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,MAAA;AAAA,QACb,WAAW,MAAO,CAAA;AAAA;AACpB;AACF,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAW,EAAA,aAAA,EAAgB,GAAG,IAAA,EAAM,GACtC,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,2BAAY,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SAAU,QAAS,EAAA,CAAA;AAAA,IACtD,OACC,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,QAAQ,EAAA,IAAA;AAAA,QACR,WAAW,MAAO,CAAA,MAAA;AAAA,QAClB,OAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,IAED,OACC,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,KAAA;AAAA,QAClB,IAAK,EAAA,GAAA;AAAA,QACL,KAAM,EAAA,MAAA;AAAA,QACN,OAAQ,EAAA,OAAA;AAAA,QACR,OAAS,EAAA,OAAA;AAAA,QACT,UAAA;AAAA,QAEA,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA;AACb,GAAA,EAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Badge/Badge.module.scss.mjs

@@ -0,0 +1,43 @@
+"use client"
+/* */
+const badge = "flow--badge";
+const content = "flow--badge--content";
+const button = "flow--badge--button";
+const close = "flow--badge--close";
+const scope = "flow--badge--scope";
+const value = "flow--badge--value";
+const neutral = "flow--badge--neutral";
+const disabled = "flow--badge--disabled";
+const blue = "flow--badge--blue";
+const navy = "flow--badge--navy";
+const violet = "flow--badge--violet";
+const teal = "flow--badge--teal";
+const lilac = "flow--badge--lilac";
+const green = "flow--badge--green";
+const orange = "flow--badge--orange";
+const red = "flow--badge--red";
+const dark = "flow--badge--dark";
+const light = "flow--badge--light";
+const styles = {
+	badge: badge,
+	content: content,
+	button: button,
+	close: close,
+	scope: scope,
+	value: value,
+	neutral: neutral,
+	disabled: disabled,
+	blue: blue,
+	navy: navy,
+	violet: violet,
+	teal: teal,
+	lilac: lilac,
+	green: green,
+	orange: orange,
+	red: red,
+	dark: dark,
+	light: light
+};
+
+export { badge, blue, button, close, content, dark, styles as default, disabled, green, light, lilac, navy, neutral, orange, red, scope, teal, value, violet };
+//# sourceMappingURL=Badge.module.scss.mjs.map

package/dist/js/components/src/components/Badge/Badge.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/BigNumber/BigNumber.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './BigNumber.module.scss.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import 'react';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+
+const BigNumber = (props) => {
+  const { children, className } = props;
+  const rootClassName = clsx(styles.bigNumber, className);
+  const propsContext = {
+    Text: {
+      className: styles.text
+    }
+  };
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, mergeInParentContext: true, children: /* @__PURE__ */ jsx("span", { className: rootClassName, children }) });
+};
+
+export { BigNumber, BigNumber as default };
+//# sourceMappingURL=BigNumber.mjs.map

package/dist/js/components/src/components/BigNumber/BigNumber.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BigNumber.mjs","sources":["../../../../../../src/components/BigNumber/BigNumber.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./BigNumber.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type BigNumberProps = PropsWithChildren & PropsWithClassName;\n\n/** @flr-generate all */\nexport const BigNumber: FC<BigNumberProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.bigNumber, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      <span className={rootClassName}>{children}</span>\n    </PropsContextProvider>\n  );\n};\n\nexport default BigNumber;\n"],"names":[],"mappings":";;;;;;;;AASa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAM,MAAA,EAAE,QAAU,EAAA,SAAA,EAAc,GAAA,KAAA;AAEhC,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,oBAAA,EAAoB,IAC7D,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,aAAgB,EAAA,QAAA,EAAS,CAC5C,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/BigNumber/BigNumber.module.scss.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const bigNumber = "flow--big-number";
+const text = "flow--big-number--text";
+const styles = {
+	bigNumber: bigNumber,
+	text: text
+};
+
+export { bigNumber, styles as default, text };
+//# sourceMappingURL=BigNumber.module.scss.mjs.map

package/dist/js/components/src/components/BigNumber/BigNumber.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BigNumber.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/js/components/src/components/Breadcrumb/Breadcrumb.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import styles from './Breadcrumb.module.scss.mjs';
+import clsx from 'clsx';
+import { BreadcrumbItem } from './components/BreadcrumbItem/BreadcrumbItem.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+
+const Breadcrumb = (props) => {
+  const { children, className, color = "primary", ...rest } = props;
+  const rootClassName = clsx(styles.breadcrumb, styles[color], className);
+  const propsContext = {
+    Link: {
+      unstyled: true,
+      className: styles.link,
+      wrapWith: /* @__PURE__ */ jsx(BreadcrumbItem, {})
+    }
+  };
+  return /* @__PURE__ */ jsx(Aria.Breadcrumbs, { ...rest, className: rootClassName, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+};
+
+export { Breadcrumb, Breadcrumb as default };
+//# sourceMappingURL=Breadcrumb.mjs.map

package/dist/js/components/src/components/Breadcrumb/Breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.mjs","sources":["../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface BreadcrumbProps\n  extends Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n    PropsWithChildren {\n  /** The color of the breadcrumb. @default \"primary\" */\n  color?: \"primary\" | \"dark\" | \"light\";\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n  const { children, className, color = \"primary\", ...rest } = props;\n\n  const rootClassName = clsx(styles.breadcrumb, styles[color], className);\n\n  const propsContext: PropsContext = {\n    Link: {\n      unstyled: true,\n      className: styles.link,\n      wrapWith: <BreadcrumbItem />,\n    },\n  };\n\n  return (\n    <Aria.Breadcrumbs {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Breadcrumbs>\n  );\n};\n\nexport default Breadcrumb;\n"],"names":[],"mappings":";;;;;;;;;;AAqBa,MAAA,UAAA,GAAkC,CAAC,KAAU,KAAA;AACxD,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,QAAQ,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE5D,EAAA,MAAM,gBAAgB,IAAK,CAAA,MAAA,CAAO,YAAY,MAAO,CAAA,KAAK,GAAG,SAAS,CAAA;AAEtE,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA,IAAA;AAAA,MACV,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,QAAA,sBAAW,cAAe,EAAA,EAAA;AAAA;AAC5B,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,IAAA,CAAK,WAAL,EAAA,EAAkB,GAAG,IAAA,EAAM,SAAW,EAAA,aAAA,EACrC,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,UACH,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Breadcrumb/Breadcrumb.module.scss.mjs

@@ -0,0 +1,21 @@
+"use client"
+/* */
+const breadcrumb = "flow--breadcrumb";
+const link = "flow--breadcrumb--link";
+const breadcrumbItem = "flow--breadcrumb--breadcrumb-item";
+const icon = "flow--breadcrumb--icon";
+const primary = "flow--breadcrumb--primary";
+const dark = "flow--breadcrumb--dark";
+const light = "flow--breadcrumb--light";
+const styles = {
+	breadcrumb: breadcrumb,
+	link: link,
+	breadcrumbItem: breadcrumbItem,
+	icon: icon,
+	primary: primary,
+	dark: dark,
+	light: light
+};
+
+export { breadcrumb, breadcrumbItem, dark, styles as default, icon, light, link, primary };
+//# sourceMappingURL=Breadcrumb.module.scss.mjs.map

package/dist/js/components/src/components/Breadcrumb/Breadcrumb.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}