@mittwald/flow-react-components 0.2.0-alpha.61 → 0.2.0-alpha.611

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.mjs","sources":["../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Alert.module.scss\";\n\nexport interface AlertProps\n  extends PropsWithChildren<ComponentProps<\"aside\">>,\n    PropsWithStatus,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Alert = flowComponent(\"Alert\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.alert, styles[status], className);\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 3,\n      size: \"s\",\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Content: {\n      className: styles.content,\n      Button: {\n        size: \"s\",\n      },\n      ActionGroup: {\n        Button: {\n          size: \"s\",\n        },\n      },\n    },\n  };\n\n  return (\n    <aside {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext} dependencies={[status]}>\n        {children}\n      </PropsContextProvider>\n    </aside>\n  );\n});\n\nexport default Alert;\n"],"names":["props"],"mappings":";;;;;;;;;AAgBO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,MAAA,GAAS,QAAQ,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE/D,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,OAAO,MAAA,CAAO,MAAM,GAAG,SAAS,CAAA;AAElE,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,KAAA,EAAO,CAAA;AAAA,MACP,IAAA,EAAM,GAAA;AAAA,MACN,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,qBACjB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,MAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,CAAA;AAAA,QAClDA,MAAAA,CAAM;AAAA,OAAA,EACT,CACD;AAAA,KACH;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,WAAA,EAAa;AAAA,QACX,MAAA,EAAQ;AAAA,UACN,IAAA,EAAM;AAAA;AACR;AACF;AACF,GACF;AAEA,EAAA,2BACG,OAAA,EAAA,EAAO,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EACzC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,cAAc,YAAA,EAAc,CAAC,MAAM,CAAA,EAC7D,UACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,23 @@
+"use client"
+/* */
+const alert = "flow--alert";
+const icon = "flow--alert--icon";
+const content = "flow--alert--content";
+const info = "flow--alert--info";
+const heading = "flow--alert--heading";
+const warning = "flow--alert--warning";
+const danger = "flow--alert--danger";
+const success = "flow--alert--success";
+const styles = {
+	alert: alert,
+	icon: icon,
+	content: content,
+	info: info,
+	heading: heading,
+	warning: warning,
+	danger: danger,
+	success: success
+};
+
+export { alert, content, danger, styles as default, heading, icon, info, success, warning };
+//# sourceMappingURL=Alert.module.scss.mjs.map

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

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

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

@@ -0,0 +1,20 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './AlertBadge.module.scss.mjs';
+import clsx from 'clsx';
+import { AlertIcon } from '../AlertIcon/AlertIcon.mjs';
+import { Text } from '../Text/Text.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+
+const AlertBadge = flowComponent("AlertBadge", (props) => {
+  const { children, className, status = "info", ref, ...rest } = props;
+  const rootClassName = clsx(styles.alertBadge, styles[status], className);
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, ...rest, ref, children: [
+    /* @__PURE__ */ jsx(AlertIcon, { size: "s", className: styles.alertIcon, status }),
+    /* @__PURE__ */ jsx(Text, { className: styles.text, children })
+  ] });
+});
+
+export { AlertBadge, AlertBadge as default };
+//# sourceMappingURL=AlertBadge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBadge.mjs","sources":["../../../../../../src/components/AlertBadge/AlertBadge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./AlertBadge.module.scss\";\nimport clsx from \"clsx\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport { Text } from \"@/components/Text\";\nimport type { PropsWithClassName, PropsWithStatus } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface AlertBadgeProps\n  extends PropsWithChildren,\n    PropsWithStatus,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithClassName {}\n\n/** @flr-generate all */\nexport const AlertBadge = flowComponent(\"AlertBadge\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.alertBadge, styles[status], className);\n\n  return (\n    <div className={rootClassName} {...rest} ref={ref}>\n      <AlertIcon size=\"s\" className={styles.alertIcon} status={status} />\n      <Text className={styles.text}>{children}</Text>\n    </div>\n  );\n});\n\nexport default AlertBadge;\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,MAAA,GAAS,QAAQ,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE/D,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,YAAY,MAAA,CAAO,MAAM,GAAG,SAAS,CAAA;AAEvE,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAgB,GAAG,MAAM,GAAA,EACvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aAAU,IAAA,EAAK,GAAA,EAAI,SAAA,EAAW,MAAA,CAAO,WAAW,MAAA,EAAgB,CAAA;AAAA,oBACjE,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,MAAO,QAAA,EAAS;AAAA,GAAA,EAC1C,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,34 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconDanger } from '../Icon/components/icons/IconDanger.mjs';
+import { IconInfo } from '../Icon/components/icons/IconInfo.mjs';
+import { IconSuccess } from '../Icon/components/icons/IconSuccess.mjs';
+import { IconWarning } from '../Icon/components/icons/IconWarning.mjs';
+import locales from '../../../../_virtual/_.locale.json@24b745a6ce9353be513d1f98e927d8d3.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+
+const icons = {
+  danger: IconDanger,
+  info: IconInfo,
+  success: IconSuccess,
+  warning: IconWarning
+};
+const AlertIcon = (props) => {
+  const { status = "info", ...rest } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const Icon = icons[status];
+  const iconProps = {
+    status,
+    "aria-label": stringFormatter.format(`alertIcon.${status}`),
+    ...rest
+  };
+  return /* @__PURE__ */ jsx(Icon, { ...iconProps });
+};
+
+export { AlertIcon, AlertIcon as default };
+//# sourceMappingURL=AlertIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertIcon.mjs","sources":["../../../../../../src/components/AlertIcon/AlertIcon.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport {\n  IconDanger,\n  IconInfo,\n  IconSuccess,\n  IconWarning,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { PropsWithStatus, Status } from \"@/lib/types/props\";\nimport type { IconProps } from \"@/components/Icon\";\n\nexport interface AlertIconProps extends PropsWithStatus, IconProps {}\n\nconst icons: Record<Status, ComponentType> = {\n  danger: IconDanger,\n  info: IconInfo,\n  success: IconSuccess,\n  warning: IconWarning,\n};\n\n/** @flr-generate all */\nexport const AlertIcon: FC<AlertIconProps> = (props) => {\n  const { status = \"info\", ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const Icon = icons[status];\n\n  const iconProps: IconProps = {\n    status,\n    \"aria-label\": stringFormatter.format(`alertIcon.${status}`),\n    ...rest,\n  };\n\n  return <Icon {...iconProps} />;\n};\n\nexport default AlertIcon;\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA,MAAM,KAAA,GAAuC;AAAA,EAC3C,MAAA,EAAQ,UAAA;AAAA,EACR,IAAA,EAAM,QAAA;AAAA,EACN,OAAA,EAAS,WAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;AAGO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,MAAA,GAAS,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAErC,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,IAAA,GAAO,MAAM,MAAM,CAAA;AAEzB,EAAA,MAAM,SAAA,GAAuB;AAAA,IAC3B,MAAA;AAAA,IACA,YAAA,EAAc,eAAA,CAAgB,MAAA,CAAO,CAAA,UAAA,EAAa,MAAM,CAAA,CAAE,CAAA;AAAA,IAC1D,GAAG;AAAA,GACL;AAEA,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAM,GAAG,SAAA,EAAW,CAAA;AAC9B;;;;"}

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

@@ -0,0 +1,35 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import styles from './Align.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+
+const Align = flowComponent(
+  "Align",
+  (props) => {
+    const { children, className } = props;
+    const rootClassName = clsx(styles.align, className);
+    const propsContext = {
+      Text: { className: styles.text },
+      Button: { className: styles.button },
+      Avatar: { className: styles.avatar, size: "m" },
+      CopyButton: { size: "s", className: styles.copyButton },
+      Icon: { size: "s", className: styles.icon },
+      ContextualHelpTrigger: {
+        Button: {
+          className: styles.contextualHelpTriggerButton
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { className: rootClassName, children }) });
+  },
+  {
+    type: "layout"
+  }
+);
+
+export { Align, Align as default };
+//# sourceMappingURL=Align.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Align.mjs","sources":["../../../../../../src/components/Align/Align.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Align.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface AlignProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const Align = flowComponent(\n  \"Align\",\n  (props) => {\n    const { children, className } = props;\n\n    const rootClassName = clsx(styles.align, className);\n\n    const propsContext: PropsContext = {\n      Text: { className: styles.text },\n      Button: { className: styles.button },\n      Avatar: { className: styles.avatar, size: \"m\" },\n      CopyButton: { size: \"s\", className: styles.copyButton },\n      Icon: { size: \"s\", className: styles.icon },\n      ContextualHelpTrigger: {\n        Button: {\n          className: styles.contextualHelpTriggerButton,\n        },\n      },\n    };\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        <div className={rootClassName}>{children}</div>\n      </PropsContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Align;\n"],"names":[],"mappings":";;;;;;;AAeO,MAAM,KAAA,GAAQ,aAAA;AAAA,EACnB,OAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAElD,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,MAC/B,MAAA,EAAQ,EAAE,SAAA,EAAW,MAAA,CAAO,MAAA,EAAO;AAAA,MACnC,QAAQ,EAAE,SAAA,EAAW,MAAA,CAAO,MAAA,EAAQ,MAAM,GAAA,EAAI;AAAA,MAC9C,YAAY,EAAE,IAAA,EAAM,GAAA,EAAK,SAAA,EAAW,OAAO,UAAA,EAAW;AAAA,MACtD,MAAM,EAAE,IAAA,EAAM,GAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAK;AAAA,MAC1C,qBAAA,EAAuB;AAAA,QACrB,MAAA,EAAQ;AAAA,UACN,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAgB,QAAA,EAAS,CAAA,EAC3C,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

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

@@ -0,0 +1,21 @@
+"use client"
+/* */
+const align = "flow--align";
+const avatar = "flow--align--avatar";
+const text = "flow--align--text";
+const button = "flow--align--button";
+const contextualHelpTriggerButton = "flow--align--contextual-help-trigger-button";
+const copyButton = "flow--align--copy-button";
+const icon = "flow--align--icon";
+const styles = {
+	align: align,
+	avatar: avatar,
+	text: text,
+	button: button,
+	contextualHelpTriggerButton: contextualHelpTriggerButton,
+	copyButton: copyButton,
+	icon: icon
+};
+
+export { align, avatar, button, contextualHelpTriggerButton, copyButton, styles as default, icon, text };
+//# sourceMappingURL=Align.module.scss.mjs.map

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

@@ -0,0 +1,110 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import * as Aria from 'react-aria-components';
+import 'mobx';
+import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { Options } from '../Options/Options.mjs';
+import { TunnelExit } from '@mittwald/react-tunnel';
+import locales from '../../../../_virtual/_.locale.json@48bdcfec6dd32df5dc9f6fa222d33240.mjs';
+import { Text } from '../Text/Text.mjs';
+import styles from './Autocomplete.module.scss.mjs';
+import { useObjectRef, useLocalizedStringFormatter, useFocusWithin, UNSAFE_PortalProvider } from 'react-aria';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { isFocused } from '../../lib/form/isFocused.mjs';
+import { emitElementValueChange } from '../../lib/react/emitElementValueChange.mjs';
+
+const Autocomplete = flowComponent("Autocomplete", (props) => {
+  const { children, ref, ...rest } = props;
+  const inputRef = useObjectRef(ref);
+  const { contains } = Aria.useFilter({ sensitivity: "base" });
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const container = useRef(null);
+  const optionsOverlayController = useOverlayController("Popover", {
+    reuseControllerFromContext: false
+  });
+  const focusWithin = useFocusWithin({
+    onBlurWithin: optionsOverlayController.close
+  });
+  const renderEmptyState = () => /* @__PURE__ */ jsx(Text, { className: styles.empty, children: stringFormatter.format("autocomplete.empty") });
+  const handleInputChange = (value) => {
+    if (value === "") {
+      optionsOverlayController.close();
+    } else if (isFocused(inputRef.current)) {
+      optionsOverlayController.open();
+    }
+  };
+  const handleOptionAction = (key) => {
+    const value = String(key);
+    if (inputRef.current) {
+      emitElementValueChange(inputRef.current, value);
+    }
+    optionsOverlayController.close();
+  };
+  const inputProps = {
+    onKeyDown: (e) => {
+      if (e.key === "Enter" && optionsOverlayController.isOpen) {
+        e.preventDefault();
+      }
+    },
+    ref: inputRef,
+    onChange: handleInputChange
+  };
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldPropsContext,
+    fieldProps
+  } = useFieldComponent(props);
+  const propsContext = {
+    SearchField: inputProps,
+    TextField: inputProps,
+    Option: {
+      tunnelId: "options"
+    },
+    Popover: {
+      className: styles.popover
+    },
+    ...fieldPropsContext
+  };
+  return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
+    /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(
+      PropsContextProvider,
+      {
+        props: propsContext,
+        dependencies: [optionsOverlayController],
+        children: /* @__PURE__ */ jsx("div", { ...focusWithin.focusWithinProps, ref: container, children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, { getContainer: () => container.current, children: /* @__PURE__ */ jsxs(
+          Aria.Autocomplete,
+          {
+            filter: contains,
+            disableAutoFocusFirst: true,
+            ...rest,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(
+                Options,
+                {
+                  onAction: handleOptionAction,
+                  triggerRef: inputRef,
+                  controller: optionsOverlayController,
+                  renderEmptyState,
+                  isNonModal: true,
+                  placement: "bottom start",
+                  children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
+                }
+              )
+            ]
+          }
+        ) }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FieldErrorView, {})
+  ] });
+});
+
+export { Autocomplete, Autocomplete as default };
+//# sourceMappingURL=Autocomplete.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n  useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\n\nexport interface AutocompleteProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps<HTMLInputElement>,\n    Omit<\n      Aria.AutocompleteProps,\n      \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n    > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, ref, ...rest } = props;\n\n  const inputRef = useObjectRef(ref);\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n\n  const optionsOverlayController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: optionsOverlayController.close,\n  });\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleInputChange = (value: string) => {\n    if (value === \"\") {\n      optionsOverlayController.close();\n    } else if (isFocused(inputRef.current)) {\n      optionsOverlayController.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const value = String(key);\n    if (inputRef.current) {\n      emitElementValueChange(inputRef.current, value);\n    }\n    optionsOverlayController.close();\n  };\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n        e.preventDefault();\n      }\n    },\n    ref: inputRef,\n    onChange: handleInputChange,\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnelId: \"options\",\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[optionsOverlayController]}\n        >\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={inputRef}\n                  controller={optionsOverlayController}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <TunnelExit id=\"options\" />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const popover = "flow--autocomplete--popover";
+const empty = "flow--autocomplete--empty";
+const styles = {
+	popover: popover,
+	empty: empty
+};
+
+export { styles as default, empty, popover };
+//# sourceMappingURL=Autocomplete.module.scss.mjs.map

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

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

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

@@ -0,0 +1,37 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Avatar.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/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("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 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/** @flr-generate all */\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    <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  );\n});\n\nexport default Avatar;\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,KAAA,EAAO,OAAO,GAAA,EAAK,MAAA,EAAQ,KAAI,GAAI,KAAA;AAEhE,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IACrB,SAAA;AAAA,IACA,CAAC,MAAA,IAAU,MAAA,CAAO,KAAA,IAAS,MAAM,CAAA;AAAA,IACjC,MAAA,IAAU,OAAO,MAAM;AAAA,GACzB;AAEA,EAAA,MAAM,eAAA,GAAkB,KAAA,KAAU,MAAA,IAAa,MAAA,KAAW,MAAA;AAE1D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,WAAW,MAAA,CAAO,QAAA;AAAA,MAClB;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAe,KAC7B,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,CAAC,MAAA,IAAU,QAAA;AAAA,IACX,0BAAU,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,MAAM,MAAA,EAAgB;AAAA,GAAA,EAChE,CAAA,EACF,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,YAAA,GAAe;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,44 @@
+"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 { PropsContextProvider } from '../../lib/propsContext/components/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, 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 { 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}>\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":";;;;;;;;;;AA0BO,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA,GAAa,CAAA;AAAA,IACb,IAAA,GAAO,GAAA;AAAA,IACP;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA;AAE3C,EAAA,MAAM,uBAAuB,UAAA,GAAa,WAAA;AAE1C,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,WAAA;AAAA,IACP,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IACrB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ,EAAE,SAAA,EAAW,MAAA,CAAO,QAAQ,IAAA,EAAK;AAAA,IACzC,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,2BACG,oBAAA,EAAA,EAAqB,KAAA,EAAO,cAC3B,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,aAAA,EACb,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,oBAAA,GAAuB,CAAA,oBACtB,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,YAAA,EACR,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,YAAA,EACf,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAY,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE;AAAA,KAAA,EAAqB,GAC7C,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,83 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Badge.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { Button } from '../Button/Button.mjs';
+import 'react';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.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: color === "light" ? "light" : "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 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/** @flr-generate all */\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={color === \"light\" ? \"light\" : \"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":";;;;;;;;;;;;;AAyCO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,GAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,OAAO,KAAK,CAAA;AAAA,IACZ,cAAc,MAAA,CAAO,QAAA;AAAA,IACrB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAA,EAAa,MAAA;AAAA,MACb,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAA,EAAa,MAAA;AAAA,MACb,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,MAAA;AAAA,QACb,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,WAAA,EAAa,MAAA;AAAA,QACb,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,GAAA,EACtC,QAAA,EAAA;AAAA,IAAA,CAAC,2BAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAS,CAAA;AAAA,IACtD,OAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,QAAA,EAAQ,IAAA;AAAA,QACR,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,OAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,IAED,OAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,IAAA,EAAK,GAAA;AAAA,QACL,KAAA,EAAO,KAAA,KAAU,OAAA,GAAU,OAAA,GAAU,MAAA;AAAA,QACrC,OAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS,OAAA;AAAA,QACT,UAAA;AAAA,QAEA,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,21 @@
+"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 { PropsContextProvider } from '../../lib/propsContext/components/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, 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}>\n      <span className={rootClassName}>{children}</span>\n    </PropsContextProvider>\n  );\n};\n\nexport default BigNumber;\n"],"names":[],"mappings":";;;;;;AASO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,QAAA,EAAS,CAAA,EAC5C,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":";;;;;;;;;"}