@mittwald/flow-react-components 0.2.0-alpha.606 → 0.2.0-alpha.608

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

@@ -69,7 +69,7 @@ const Badge = flowComponent("Badge", (props) => {
       {
         className: styles.close,
         size: "s",
-        color: "dark",
+        color: color === "light" ? "light" : "dark",
         variant: "plain",
         onPress: onClose,
         isDisabled,

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

@@ -1 +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=\"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,EAAM,MAAA;AAAA,QACN,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;;;;"}
+{"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/BrowserOnly/BrowserOnly.mjs

@@ -6,13 +6,6 @@ import '../../lib/controller/overlay/context.mjs';
 import { useIsMounted } from '../../lib/hooks/useIsMounted.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import 'remeda';
-import 'react/jsx-runtime';
-import '@mittwald/react-tunnel';
-import '../../lib/slotContext/SlotContextProvider.mjs';
-import '../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
-import '../../views/ClearPropsContextView.mjs';
-import '../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import '@react-aria/utils';
 import 'dot-prop';
 

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

@@ -1 +1 @@
-{"version":3,"file":"BrowserOnly.mjs","sources":["../../../../../../src/components/BrowserOnly/BrowserOnly.tsx"],"sourcesContent":["import { useIsMounted } from \"@/lib/hooks\";\nimport type { PropsWithChildren } from \"react\";\n\nexport type BrowserOnlyProps = PropsWithChildren;\n\nexport const BrowserOnly = (props: PropsWithChildren) => {\n  if (useIsMounted()) {\n    return props.children;\n  }\n};\n\nexport default BrowserOnly;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAKO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA6B;AACvD,EAAA,IAAI,cAAa,EAAG;AAClB,IAAA,OAAO,KAAA,CAAM,QAAA;AAAA,EACf;AACF;;;;"}
+{"version":3,"file":"BrowserOnly.mjs","sources":["../../../../../../src/components/BrowserOnly/BrowserOnly.tsx"],"sourcesContent":["import { useIsMounted } from \"@/lib/hooks\";\nimport type { PropsWithChildren } from \"react\";\n\nexport type BrowserOnlyProps = PropsWithChildren;\n\nexport const BrowserOnly = (props: PropsWithChildren) => {\n  if (useIsMounted()) {\n    return props.children;\n  }\n};\n\nexport default BrowserOnly;\n"],"names":[],"mappings":";;;;;;;;;AAKO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA6B;AACvD,EAAA,IAAI,cAAa,EAAG;AAClB,IAAA,OAAO,KAAA,CAAM,QAAA;AAAA,EACf;AACF;;;;"}

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

@@ -17,6 +17,7 @@ import { Text } from '../Text/Text.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner.mjs';
 import { useAriaAnnounceActionState } from '../Action/lib/ariaLive.mjs';
+import { extractTextFromFirstChild } from '../../lib/react/remote.mjs';
 
 const disablePendingProps = (props) => {
   if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly) {
@@ -97,7 +98,7 @@ const Button = flowComponent("Button", (props) => {
       status: isFailed ? "danger" : isSucceeded ? "success" : void 0
     }
   );
-  const isStringContent = typeof children === "string";
+  const isStringContent = extractTextFromFirstChild(children) !== void 0;
   return /* @__PURE__ */ jsxs(
     Aria.Button,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\n\nexport interface ButtonProps\n  extends PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /** The color of the button. @default \"primary\" */\n  color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n    props.onKeyDown = undefined;\n    props.onKeyUp = undefined;\n    props.type = \"button\";\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    color = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    ...restProps\n  } = props;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        styles[`size-${size}`],\n        styles[color],\n        styles[variant],\n        className,\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <StateIconComponent\n      size={size}\n      className={styles.stateIcon}\n      status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n    />\n  );\n\n  const isStringContent = typeof children === \"string\";\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>\n            <Wrap if={isStringContent}>\n              <Text className={styles.text}>{children}</Text>\n            </Wrap>\n          </span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\n\nexport interface ButtonProps\n  extends PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /** The color of the button. @default \"primary\" */\n  color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n    props.onKeyDown = undefined;\n    props.onKeyUp = undefined;\n    props.type = \"button\";\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    color = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    ...restProps\n  } = props;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        styles[`size-${size}`],\n        styles[color],\n        styles[variant],\n        className,\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <StateIconComponent\n      size={size}\n      className={styles.stateIcon}\n      status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n    />\n  );\n\n  const isStringContent = extractTextFromFirstChild(children) !== undefined;\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>\n            <Wrap if={isStringContent}>\n              <Text className={styles.text}>{children}</Text>\n            </Wrap>\n          </span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}

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

@@ -29,10 +29,6 @@ import 'react-aria-components';
 import 'mobx';
 import '../../lib/controller/overlay/context.mjs';
 import 'remeda';
-import '../../lib/slotContext/SlotContextProvider.mjs';
-import '../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
-import '../../views/ClearPropsContextView.mjs';
-import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import '@react-aria/utils';
 import 'dot-prop';
 import '../Heading/Heading.mjs';
@@ -45,6 +41,7 @@ import 'react-syntax-highlighter';
 import '../CopyButton/CopyButton.mjs';
 import '../ColumnLayout/ColumnLayout.mjs';
 import '../ComboBox/ComboBox.mjs';
+import '../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
 import '../Content/Content.mjs';
 import '../ContextMenu/ContextMenu.mjs';
 import '../MenuItem/MenuItem.mjs';
@@ -92,7 +89,6 @@ import '../NumberField/NumberField.mjs';
 import '../Option/Option.mjs';
 import '../../views/OverlayContentView.mjs';
 import '../../views/LoadingSpinnerView.mjs';
-import '../../lib/remote/eventHandlerContext.mjs';
 import '../PasswordCreationField/PasswordCreationField.mjs';
 import '../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
 import '../Popover/Popover.mjs';
@@ -165,25 +161,35 @@ const CartesianChart = (props) => {
         observer.disconnect();
       };
     }
-  }, []);
+  }, [showEmptyView]);
   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.ComposedChart,
+      children: /* @__PURE__ */ jsx(
+        Recharts.ResponsiveContainer,
         {
-          data,
-          className: rootClassName,
-          ...rest,
-          children: [
-            !showEmptyView && gridChildren,
-            otherChildren,
-            showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx("div", { className: styles.emptyViewContainer, children: /* @__PURE__ */ jsx(EmptyView, { data }) }) })
-          ]
+          initialDimension: {
+            // fix warning on initial render
+            width: 1,
+            height: 1
+          },
+          children: /* @__PURE__ */ jsxs(
+            Recharts.ComposedChart,
+            {
+              data,
+              className: rootClassName,
+              ...rest,
+              children: [
+                !showEmptyView && gridChildren,
+                otherChildren,
+                showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx("div", { className: styles.emptyViewContainer, children: /* @__PURE__ */ jsx(EmptyView, { data }) }) })
+              ]
+            }
+          )
         }
-      ) })
+      )
     }
   ) });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport React, {\n  Children,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactElement,\n  type SVGProps,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport Wrap from \"../Wrap\";\nimport { CartesianGrid } from \"../public\";\n\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof Recharts.ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n  extends Pick<\n      ComponentProps<typeof Recharts.ComposedChart>,\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<CartesianChartEmptyViewProps>;\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: EmptyView,\n    ...rest\n  } = props;\n  const rootClassName = clsx(styles.cartesianChart, className);\n\n  const otherChildren: ReactElement[] = [];\n  const gridChildren: ReactElement[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!child) return;\n    const element = child as ReactElement;\n\n    if (element.type === CartesianGrid) {\n      gridChildren.push(element);\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.ComposedChart\n            data={data}\n            className={rootClassName}\n            {...rest}\n          >\n            {!showEmptyView && gridChildren}\n            {otherChildren}\n            {showEmptyView && viewDimensions && (\n              <foreignObject {...viewDimensions}>\n                <div className={styles.emptyViewContainer}>\n                  <EmptyView data={data} />\n                </div>\n              </foreignObject>\n            )}\n          </Recharts.ComposedChart>\n        </Recharts.ResponsiveContainer>\n      </div>\n    </Wrap>\n  );\n};\n\nexport default CartesianChart;\n"],"names":["height"],"mappings":"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"}
+{"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport React, {\n  Children,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactElement,\n  type SVGProps,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport Wrap from \"../Wrap\";\nimport { CartesianGrid } from \"../public\";\n\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof Recharts.ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n  extends Pick<\n      ComponentProps<typeof Recharts.ComposedChart>,\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<CartesianChartEmptyViewProps>;\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: EmptyView,\n    ...rest\n  } = props;\n  const rootClassName = clsx(styles.cartesianChart, className);\n\n  const otherChildren: ReactElement[] = [];\n  const gridChildren: ReactElement[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!child) return;\n    const element = child as ReactElement;\n\n    if (element.type === CartesianGrid) {\n      gridChildren.push(element);\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  }, [showEmptyView]);\n\n  return (\n    <Wrap if={height}>\n      <div\n        style={{ height, flex: flexGrow ? 1 : undefined }}\n        ref={chartContainerRef}\n      >\n        <Recharts.ResponsiveContainer\n          initialDimension={{\n            // fix warning on initial render\n            width: 1,\n            height: 1,\n          }}\n        >\n          <Recharts.ComposedChart\n            data={data}\n            className={rootClassName}\n            {...rest}\n          >\n            {!showEmptyView && gridChildren}\n            {otherChildren}\n            {showEmptyView && viewDimensions && (\n              <foreignObject {...viewDimensions}>\n                <div className={styles.emptyViewContainer}>\n                  <EmptyView data={data} />\n                </div>\n              </foreignObject>\n            )}\n          </Recharts.ComposedChart>\n        </Recharts.ResponsiveContainer>\n      </div>\n    </Wrap>\n  );\n};\n\nexport default CartesianChart;\n"],"names":["height"],"mappings":"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"}

package/dist/js/components/src/components/DonutChart/components/DonutChartValue.mjs

@@ -2,17 +2,17 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import styles from '../DonutChart.module.scss.mjs';
-import 'react';
+import { Children } from 'react';
 import { useNumberFormatter } from 'react-aria';
 
 const DonutChartValue = (props) => {
   const { value = 0, formatOptions, children } = props;
   const formatter = useNumberFormatter(formatOptions);
-  if (children) {
+  if (Children.count(children) > 0) {
     return /* @__PURE__ */ jsx("span", { className: styles.value, children });
   }
   const formattedValue = formatOptions ? formatter.format(value) : `${value} %`;
-  return /* @__PURE__ */ jsx("span", { className: styles.value, children: /* @__PURE__ */ jsx("b", { children: formattedValue }) });
+  return /* @__PURE__ */ jsx("span", { className: styles.value, children: /* @__PURE__ */ jsx("strong", { children: formattedValue }) });
 };
 
 export { DonutChartValue };

package/dist/js/components/src/components/DonutChart/components/DonutChartValue.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChartValue.mjs","sources":["../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<DonutChartProps, \"formatOptions\" | \"children\"> {\n  value?: number;\n}\n\nexport const DonutChartValue: FC<Props> = (props) => {\n  const { value = 0, formatOptions, children } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (children) {\n    return <span className={styles.value}>{children}</span>;\n  }\n\n  const formattedValue = formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <span className={styles.value}>\n      <b>{formattedValue}</b>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,aAAA,EAAe,UAAS,GAAI,KAAA;AAE/C,EAAA,MAAM,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,OAAQ,QAAA,EAAS,CAAA;AAAA,EAClD;AAEA,EAAA,MAAM,iBAAiB,aAAA,GAAgB,SAAA,CAAU,OAAO,KAAK,CAAA,GAAI,GAAG,KAAK,CAAA,EAAA,CAAA;AAEzE,EAAA,uBACE,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,OACtB,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAG,0BAAe,CAAA,EACrB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DonutChartValue.mjs","sources":["../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport React, { Children, type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<DonutChartProps, \"formatOptions\" | \"children\"> {\n  value?: number;\n}\n\nexport const DonutChartValue: FC<Props> = (props) => {\n  const { value = 0, formatOptions, children } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (Children.count(children) > 0) {\n    return <span className={styles.value}>{children}</span>;\n  }\n\n  const formattedValue = formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <span className={styles.value}>\n      <strong>{formattedValue}</strong>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,aAAA,EAAe,UAAS,GAAI,KAAA;AAE/C,EAAA,MAAM,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAA,IAAI,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA,GAAI,CAAA,EAAG;AAChC,IAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,OAAQ,QAAA,EAAS,CAAA;AAAA,EAClD;AAEA,EAAA,MAAM,iBAAiB,aAAA,GAAgB,SAAA,CAAU,OAAO,KAAK,CAAA,GAAI,GAAG,KAAK,CAAA,EAAA,CAAA;AAEzE,EAAA,uBACE,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,OACtB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,0BAAe,CAAA,EAC1B,CAAA;AAEJ;;;;"}

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

@@ -67,7 +67,7 @@ const FileCard = flowComponent("FileCard", (props) => {
         children: [
           /* @__PURE__ */ jsx(Avatar, { type, imageSrc, isFailed }),
           /* @__PURE__ */ jsxs("span", { className: styles.text, children: [
-            name && /* @__PURE__ */ jsx(Text, { className: styles.title, children: /* @__PURE__ */ jsx("b", { children: name }) }),
+            name && /* @__PURE__ */ jsx(Text, { className: styles.title, children: /* @__PURE__ */ jsx("strong", { children: name }) }),
             sizeInBytes && /* @__PURE__ */ jsx(FileSizeText, { sizeInBytes }),
             /* @__PURE__ */ jsx(TunnelExit, { id: "subTitle" }),
             /* @__PURE__ */ jsx(TunnelExit, { id: "progressBar" })

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

@@ -1 +1 @@
-{"version":3,"file":"FileCard.mjs","sources":["../../../../../../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import { Avatar } from \"./components/Avatar\";\nimport { Text } from \"@/components/Text\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport styles from \"./FileCard.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { FileSizeText } from \"@/components/FileCard/components/FileSizeText\";\nimport { Link, type LinkProps } from \"@/components/Link\";\nimport Wrap from \"@/components/Wrap\";\nimport { DeleteButton } from \"@/components/FileCard/components/DeleteButton\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface FileCardProps\n  extends FlowComponentProps<HTMLDivElement | HTMLLIElement>,\n    PropsWithClassName,\n    PropsWithElementType<\"div\" | \"li\">,\n    Pick<LinkProps, \"onPress\" | \"href\" | \"target\" | \"download\"> {\n  /** The name of the file. */\n  name?: string;\n  /** The type of the file. */\n  type?: string;\n  /** Handler that is called when the file cards delete button is clicked. */\n  onDelete?: () => void;\n  /** The size of the file in bytes. */\n  sizeInBytes?: number;\n  /** The source of an image file. */\n  imageSrc?: string;\n  /** Whether the file card is in a failed state. */\n  isFailed?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileCard = flowComponent(\"FileCard\", (props) => {\n  const {\n    ref,\n    onDelete,\n    type,\n    sizeInBytes,\n    name,\n    className,\n    elementType = \"div\",\n    onPress,\n    href,\n    target,\n    download,\n    imageSrc,\n    children,\n    isFailed,\n  } = props;\n\n  const rootClassName = clsx(\n    styles.fileCard,\n    isFailed && styles[\"failed\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      wrapWith: <OptionsButton />,\n      placement: \"bottom right\",\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.subTitle,\n      tunnelId: \"subTitle\",\n    },\n    ProgressBar: {\n      size: \"s\",\n      tunnelId: \"progressBar\",\n    },\n    Button: { variant: \"plain\", color: \"secondary\" },\n  };\n\n  const Element = elementType;\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <Element ref={ref as never} className={rootClassName}>\n          <Wrap if={(href || onPress) && !isFailed}>\n            <Link\n              className={styles.link}\n              unstyled\n              href={href}\n              onPress={onPress}\n              target={target}\n              download={download}\n            >\n              <Avatar type={type} imageSrc={imageSrc} isFailed={isFailed} />\n\n              <span className={styles.text}>\n                {name && (\n                  <Text className={styles.title}>\n                    <b>{name}</b>\n                  </Text>\n                )}\n                {sizeInBytes && <FileSizeText sizeInBytes={sizeInBytes} />}\n                <TunnelExit id=\"subTitle\" />\n                <TunnelExit id=\"progressBar\" />\n              </span>\n            </Link>\n          </Wrap>\n          {children}\n          {onDelete && <DeleteButton onDelete={onDelete} />}\n        </Element>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwCO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,GAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,OAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IACP,QAAA,IAAY,OAAO,QAAQ,CAAA;AAAA,IAC3B;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,QAAA,sBAAW,aAAA,EAAA,EAAc,CAAA;AAAA,MACzB,SAAA,EAAW;AAAA,KACb;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAA,EAAa,MAAA;AAAA,MACb,WAAW,MAAA,CAAO,QAAA;AAAA,MAClB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,GAAA;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,MAAA,EAAQ,EAAE,OAAA,EAAS,OAAA,EAAS,OAAO,WAAA;AAAY,GACjD;AAEA,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,kBACC,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,GAAA,EAAmB,SAAA,EAAW,aAAA,EACrC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAA,CAAK,IAAA,IAAQ,OAAA,KAAY,CAAC,QAAA,EAC9B,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,QAAA,EAAQ,IAAA;AAAA,QACR,IAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAY,QAAA,EAAoB,QAAA,EAAoB,CAAA;AAAA,0BAE5D,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EACrB,QAAA,EAAA;AAAA,YAAA,IAAA,oBACC,GAAA,CAAC,QAAK,SAAA,EAAW,MAAA,CAAO,OACtB,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAG,gBAAK,CAAA,EACX,CAAA;AAAA,YAED,WAAA,oBAAe,GAAA,CAAC,YAAA,EAAA,EAAa,WAAA,EAA0B,CAAA;AAAA,4BACxD,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAA,EAAW,CAAA;AAAA,4BAC1B,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,aAAA,EAAc;AAAA,WAAA,EAC/B;AAAA;AAAA;AAAA,KACF,EACF,CAAA;AAAA,IACC,QAAA;AAAA,IACA,QAAA,oBAAY,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAoB;AAAA,GAAA,EACjD,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileCard.mjs","sources":["../../../../../../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import { Avatar } from \"./components/Avatar\";\nimport { Text } from \"@/components/Text\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport styles from \"./FileCard.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { FileSizeText } from \"@/components/FileCard/components/FileSizeText\";\nimport { Link, type LinkProps } from \"@/components/Link\";\nimport Wrap from \"@/components/Wrap\";\nimport { DeleteButton } from \"@/components/FileCard/components/DeleteButton\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface FileCardProps\n  extends FlowComponentProps<HTMLDivElement | HTMLLIElement>,\n    PropsWithClassName,\n    PropsWithElementType<\"div\" | \"li\">,\n    Pick<LinkProps, \"onPress\" | \"href\" | \"target\" | \"download\"> {\n  /** The name of the file. */\n  name?: string;\n  /** The type of the file. */\n  type?: string;\n  /** Handler that is called when the file cards delete button is clicked. */\n  onDelete?: () => void;\n  /** The size of the file in bytes. */\n  sizeInBytes?: number;\n  /** The source of an image file. */\n  imageSrc?: string;\n  /** Whether the file card is in a failed state. */\n  isFailed?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileCard = flowComponent(\"FileCard\", (props) => {\n  const {\n    ref,\n    onDelete,\n    type,\n    sizeInBytes,\n    name,\n    className,\n    elementType = \"div\",\n    onPress,\n    href,\n    target,\n    download,\n    imageSrc,\n    children,\n    isFailed,\n  } = props;\n\n  const rootClassName = clsx(\n    styles.fileCard,\n    isFailed && styles[\"failed\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      wrapWith: <OptionsButton />,\n      placement: \"bottom right\",\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.subTitle,\n      tunnelId: \"subTitle\",\n    },\n    ProgressBar: {\n      size: \"s\",\n      tunnelId: \"progressBar\",\n    },\n    Button: { variant: \"plain\", color: \"secondary\" },\n  };\n\n  const Element = elementType;\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <Element ref={ref as never} className={rootClassName}>\n          <Wrap if={(href || onPress) && !isFailed}>\n            <Link\n              className={styles.link}\n              unstyled\n              href={href}\n              onPress={onPress}\n              target={target}\n              download={download}\n            >\n              <Avatar type={type} imageSrc={imageSrc} isFailed={isFailed} />\n\n              <span className={styles.text}>\n                {name && (\n                  <Text className={styles.title}>\n                    <strong>{name}</strong>\n                  </Text>\n                )}\n                {sizeInBytes && <FileSizeText sizeInBytes={sizeInBytes} />}\n                <TunnelExit id=\"subTitle\" />\n                <TunnelExit id=\"progressBar\" />\n              </span>\n            </Link>\n          </Wrap>\n          {children}\n          {onDelete && <DeleteButton onDelete={onDelete} />}\n        </Element>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwCO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,GAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,OAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IACP,QAAA,IAAY,OAAO,QAAQ,CAAA;AAAA,IAC3B;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,QAAA,sBAAW,aAAA,EAAA,EAAc,CAAA;AAAA,MACzB,SAAA,EAAW;AAAA,KACb;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAA,EAAa,MAAA;AAAA,MACb,WAAW,MAAA,CAAO,QAAA;AAAA,MAClB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,GAAA;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,MAAA,EAAQ,EAAE,OAAA,EAAS,OAAA,EAAS,OAAO,WAAA;AAAY,GACjD;AAEA,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,kBACC,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,GAAA,EAAmB,SAAA,EAAW,aAAA,EACrC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAA,CAAK,IAAA,IAAQ,OAAA,KAAY,CAAC,QAAA,EAC9B,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,QAAA,EAAQ,IAAA;AAAA,QACR,IAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAY,QAAA,EAAoB,QAAA,EAAoB,CAAA;AAAA,0BAE5D,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EACrB,QAAA,EAAA;AAAA,YAAA,IAAA,oBACC,GAAA,CAAC,QAAK,SAAA,EAAW,MAAA,CAAO,OACtB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,gBAAK,CAAA,EAChB,CAAA;AAAA,YAED,WAAA,oBAAe,GAAA,CAAC,YAAA,EAAA,EAAa,WAAA,EAA0B,CAAA;AAAA,4BACxD,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAA,EAAW,CAAA;AAAA,4BAC1B,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,aAAA,EAAc;AAAA,WAAA,EAC/B;AAAA;AAAA;AAAA,KACF,EACF,CAAA;AAAA,IACC,QAAA;AAAA,IACA,QAAA,oBAAY,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAoB;AAAA,GAAA,EACjD,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -21,13 +21,15 @@ const Flex = (props) => {
     paddingBottom,
     paddingLeft,
     paddingRight,
-    elementType = "div"
+    elementType = "div",
+    ...restProps
   } = props;
   const rootClassName = clsx(styles.flex, className);
   const Element = elementType;
   return /* @__PURE__ */ jsx(
     Element,
     {
+      ...restProps,
       className: rootClassName,
       style: {
         flexDirection: direction,

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.mjs","sources":["../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n  } = props;\n\n  const rootClassName = clsx(styles.flex, className);\n\n  const Element = elementType;\n\n  return (\n    <Element\n      className={rootClassName}\n      style={{\n        flexDirection: direction,\n        alignItems:\n          align === \"end\"\n            ? \"flex-end\"\n            : align === \"start\"\n              ? \"flex-start\"\n              : align,\n        justifyContent: justify,\n        columnGap: columnGap\n          ? `var(--size-px--${columnGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        rowGap: rowGap\n          ? `var(--size-px--${rowGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        flexGrow: grow ? 1 : undefined,\n        flexWrap: wrap,\n        paddingTop: paddingTop\n          ? `var(--size-px--${paddingTop})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingBottom: paddingBottom\n          ? `var(--size-px--${paddingBottom})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingLeft: paddingLeft\n          ? `var(--size-px--${paddingLeft})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingRight: paddingRight\n          ? `var(--size-px--${paddingRight})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n      }}\n    >\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"names":[],"mappings":";;;;AAqDO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA,GAAc;AAAA,GAChB,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAEjD,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACX,KAAA,EAAO;AAAA,QACL,aAAA,EAAe,SAAA;AAAA,QACf,YACE,KAAA,KAAU,KAAA,GACN,UAAA,GACA,KAAA,KAAU,UACR,YAAA,GACA,KAAA;AAAA,QACR,cAAA,EAAgB,OAAA;AAAA,QAChB,SAAA,EAAW,YACP,CAAA,eAAA,EAAkB,SAAS,MAC3B,GAAA,GACE,CAAA,eAAA,EAAkB,GAAG,CAAA,CAAA,CAAA,GACrB,MAAA;AAAA,QACN,MAAA,EAAQ,SACJ,CAAA,eAAA,EAAkB,MAAM,MACxB,GAAA,GACE,CAAA,eAAA,EAAkB,GAAG,CAAA,CAAA,CAAA,GACrB,MAAA;AAAA,QACN,QAAA,EAAU,OAAO,CAAA,GAAI,MAAA;AAAA,QACrB,QAAA,EAAU,IAAA;AAAA,QACV,UAAA,EAAY,aACR,CAAA,eAAA,EAAkB,UAAU,MAC5B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,aAAA,EAAe,gBACX,CAAA,eAAA,EAAkB,aAAa,MAC/B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,WAAA,EAAa,cACT,CAAA,eAAA,EAAkB,WAAW,MAC7B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,YAAA,EAAc,eACV,CAAA,eAAA,EAAkB,YAAY,MAC9B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB;AAAA,OACR;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"Flex.mjs","sources":["../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const rootClassName = clsx(styles.flex, className);\n\n  const Element = elementType;\n\n  return (\n    <Element\n      {...restProps}\n      className={rootClassName}\n      style={{\n        flexDirection: direction,\n        alignItems:\n          align === \"end\"\n            ? \"flex-end\"\n            : align === \"start\"\n              ? \"flex-start\"\n              : align,\n        justifyContent: justify,\n        columnGap: columnGap\n          ? `var(--size-px--${columnGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        rowGap: rowGap\n          ? `var(--size-px--${rowGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        flexGrow: grow ? 1 : undefined,\n        flexWrap: wrap,\n        paddingTop: paddingTop\n          ? `var(--size-px--${paddingTop})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingBottom: paddingBottom\n          ? `var(--size-px--${paddingBottom})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingLeft: paddingLeft\n          ? `var(--size-px--${paddingLeft})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingRight: paddingRight\n          ? `var(--size-px--${paddingRight})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n      }}\n    >\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"names":[],"mappings":";;;;AAqDO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAEjD,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,KAAA,EAAO;AAAA,QACL,aAAA,EAAe,SAAA;AAAA,QACf,YACE,KAAA,KAAU,KAAA,GACN,UAAA,GACA,KAAA,KAAU,UACR,YAAA,GACA,KAAA;AAAA,QACR,cAAA,EAAgB,OAAA;AAAA,QAChB,SAAA,EAAW,YACP,CAAA,eAAA,EAAkB,SAAS,MAC3B,GAAA,GACE,CAAA,eAAA,EAAkB,GAAG,CAAA,CAAA,CAAA,GACrB,MAAA;AAAA,QACN,MAAA,EAAQ,SACJ,CAAA,eAAA,EAAkB,MAAM,MACxB,GAAA,GACE,CAAA,eAAA,EAAkB,GAAG,CAAA,CAAA,CAAA,GACrB,MAAA;AAAA,QACN,QAAA,EAAU,OAAO,CAAA,GAAI,MAAA;AAAA,QACrB,QAAA,EAAU,IAAA;AAAA,QACV,UAAA,EAAY,aACR,CAAA,eAAA,EAAkB,UAAU,MAC5B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,aAAA,EAAe,gBACX,CAAA,eAAA,EAAkB,aAAa,MAC/B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,WAAA,EAAa,cACT,CAAA,eAAA,EAAkB,WAAW,MAC7B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,YAAA,EAAc,eACV,CAAA,eAAA,EAAkB,YAAY,MAC9B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB;AAAA,OACR;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -5,9 +5,9 @@ import { useMemo } from 'react';
 import { getInitialsFromString } from './lib/getInitialsFromString.mjs';
 import styles from './Initials.module.scss.mjs';
 import clsx from 'clsx';
-import { onlyText } from 'react-children-utilities';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { getColorFromInitials } from './lib/getColorFromInitials.mjs';
+import { extractTextFromFirstChild } from '../../lib/react/remote.mjs';
 
 const Initials = flowComponent("Initials", (props) => {
   const {
@@ -17,7 +17,7 @@ const Initials = flowComponent("Initials", (props) => {
     "aria-hidden": ariaHidden,
     ref
   } = props;
-  const textContent = onlyText(children);
+  const textContent = extractTextFromFirstChild(children) ?? "";
   const initials = getInitialsFromString(textContent);
   const dynamicColor = useMemo(
     () => useDynamicColor ? getColorFromInitials(textContent) : void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"Initials.mjs","sources":["../../../../../../src/components/Initials/Initials.tsx"],"sourcesContent":["import { useMemo, type PropsWithChildren } from \"react\";\nimport { getInitialsFromString } from \"./lib/getInitialsFromString\";\nimport styles from \"./Initials.module.scss\";\nimport clsx from \"clsx\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { getColorFromInitials } from \"@/components/Initials/lib/getColorFromInitials\";\n\nexport interface InitialsProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps {\n  \"aria-hidden\"?: boolean;\n  /** @internal */\n  useDynamicColor?: boolean;\n}\n\n/** @flr-generate all */\nexport const Initials = flowComponent(\"Initials\", (props) => {\n  const {\n    children,\n    useDynamicColor = false,\n    className,\n    \"aria-hidden\": ariaHidden,\n    ref,\n  } = props;\n\n  const textContent = onlyText(children);\n  const initials = getInitialsFromString(textContent);\n  const dynamicColor = useMemo(\n    () => (useDynamicColor ? getColorFromInitials(textContent) : undefined),\n    [useDynamicColor, textContent],\n  );\n\n  const rootClassName = clsx(styles.initials, className);\n\n  const initialsElements = initials.map((initial, index) => (\n    <span key={index}>{initial}</span>\n  ));\n\n  return (\n    <div\n      data-dynamic-color={dynamicColor}\n      aria-hidden={ariaHidden}\n      aria-label={textContent}\n      className={rootClassName}\n      ref={ref}\n    >\n      {initialsElements}\n    </div>\n  );\n});\n\nexport default Initials;\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,SAAS,QAAQ,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,sBAAsB,WAAW,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,MAAO,eAAA,GAAkB,oBAAA,CAAqB,WAAW,CAAA,GAAI,MAAA;AAAA,IAC7D,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,EAAS,0BAC9C,GAAA,CAAC,MAAA,EAAA,EAAkB,QAAA,EAAA,OAAA,EAAA,EAAR,KAAgB,CAC5B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,oBAAA,EAAoB,YAAA;AAAA,MACpB,aAAA,EAAa,UAAA;AAAA,MACb,YAAA,EAAY,WAAA;AAAA,MACZ,SAAA,EAAW,aAAA;AAAA,MACX,GAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Initials.mjs","sources":["../../../../../../src/components/Initials/Initials.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from \"react\";\nimport { getInitialsFromString } from \"./lib/getInitialsFromString\";\nimport styles from \"./Initials.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { getColorFromInitials } from \"@/components/Initials/lib/getColorFromInitials\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\n\nexport interface InitialsProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps {\n  \"aria-hidden\"?: boolean;\n  /** @internal */\n  useDynamicColor?: boolean;\n}\n\n/** @flr-generate all */\nexport const Initials = flowComponent(\"Initials\", (props) => {\n  const {\n    children,\n    useDynamicColor = false,\n    className,\n    \"aria-hidden\": ariaHidden,\n    ref,\n  } = props;\n\n  const textContent = extractTextFromFirstChild(children) ?? \"\";\n  const initials = getInitialsFromString(textContent);\n  const dynamicColor = useMemo(\n    () => (useDynamicColor ? getColorFromInitials(textContent) : undefined),\n    [useDynamicColor, textContent],\n  );\n\n  const rootClassName = clsx(styles.initials, className);\n\n  const initialsElements = initials.map((initial, index) => (\n    <span key={index}>{initial}</span>\n  ));\n\n  return (\n    <div\n      data-dynamic-color={dynamicColor}\n      aria-hidden={ariaHidden}\n      aria-label={textContent}\n      className={rootClassName}\n      ref={ref}\n    >\n      {initialsElements}\n    </div>\n  );\n});\n\nexport default Initials;\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,yBAAA,CAA0B,QAAQ,CAAA,IAAK,EAAA;AAC3D,EAAA,MAAM,QAAA,GAAW,sBAAsB,WAAW,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,MAAO,eAAA,GAAkB,oBAAA,CAAqB,WAAW,CAAA,GAAI,MAAA;AAAA,IAC7D,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,EAAS,0BAC9C,GAAA,CAAC,MAAA,EAAA,EAAkB,QAAA,EAAA,OAAA,EAAA,EAAR,KAAgB,CAC5B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,oBAAA,EAAoB,YAAA;AAAA,MACpB,aAAA,EAAa,UAAA;AAAA,MACb,YAAA,EAAY,WAAA;AAAA,MACZ,SAAA,EAAW,aAAA;AAAA,MACX,GAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

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

@@ -20,7 +20,6 @@ const LabeledValue = (props) => {
     },
     Button: {
       className: styles.button,
-      variant: "plain",
       size: "s"
     },
     Link: {

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

@@ -1 +1 @@
-{"version":3,"file":"LabeledValue.mjs","sources":["../../../../../../src/components/LabeledValue/LabeledValue.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LabeledValue.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface LabeledValueProps\n  extends PropsWithChildren,\n    PropsWithClassName {}\n\n/** @flr-generate all */\nexport const LabeledValue: FC<LabeledValueProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.labeledValue, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n    },\n    CopyButton: {\n      className: styles.button,\n      variant: \"plain\",\n      size: \"s\",\n    },\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      size: \"s\",\n    },\n    Link: {\n      inline: true,\n    },\n  };\n\n  return (\n    <div className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default LabeledValue;\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,OAAA,EAAS,OAAA;AAAA,MACT,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,OAAA,EAAS,OAAA;AAAA,MACT,IAAA,EAAM;AAAA,KACR;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA;AACV,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EACd,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LabeledValue.mjs","sources":["../../../../../../src/components/LabeledValue/LabeledValue.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LabeledValue.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface LabeledValueProps\n  extends PropsWithChildren,\n    PropsWithClassName {}\n\n/** @flr-generate all */\nexport const LabeledValue: FC<LabeledValueProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.labeledValue, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n    },\n    CopyButton: {\n      className: styles.button,\n      variant: \"plain\",\n      size: \"s\",\n    },\n    Button: {\n      className: styles.button,\n      size: \"s\",\n    },\n    Link: {\n      inline: true,\n    },\n  };\n\n  return (\n    <div className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default LabeledValue;\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,OAAA,EAAS,OAAA;AAAA,MACT,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,IAAA,EAAM;AAAA,KACR;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA;AACV,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EACd,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs

@@ -11,116 +11,14 @@ import { useLocalizedStringFormatter } from 'react-aria';
 import { TooltipTrigger } from '../../../../../Tooltip/components/TooltipTrigger/TooltipTrigger.mjs';
 import 'react-aria-components';
 import 'clsx';
-import '../../../../../AccentBox/AccentBox.mjs';
 import '../../../../../../lib/propsContext/propsContext.mjs';
-import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../../../../../Button/Button.mjs';
 import '@tabler/icons-react';
 import '../../../../../Icon/Icon.mjs';
 import '../../../../../../views/IconView.mjs';
 import { IconClose } from '../../../../../Icon/components/icons/IconClose.mjs';
 import { IconSave } from '../../../../../Icon/components/icons/IconSave.mjs';
 import { IconUndo } from '../../../../../Icon/components/icons/IconUndo.mjs';
-import '@mittwald/react-tunnel';
-import '../../../../../Activity/Activity.mjs';
-import '../../../../../Action/Action.mjs';
-import '@react-aria/live-announcer';
-import '../../../../../ActionGroup/ActionGroup.mjs';
-import '../../../../../Alert/Alert.mjs';
-import '../../../../../AlertBadge/AlertBadge.mjs';
-import '../../../../../Align/Align.mjs';
-import '../../../../../Autocomplete/Autocomplete.mjs';
-import '../../../../../Avatar/Avatar.mjs';
-import '../../../../../Badge/Badge.mjs';
-import 'mobx';
-import '../../../../../../lib/controller/overlay/context.mjs';
-import 'remeda';
-import '../../../../../../lib/slotContext/SlotContextProvider.mjs';
-import '../../../../../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
-import '../../../../../../views/ClearPropsContextView.mjs';
-import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import '@react-aria/utils';
-import 'dot-prop';
-import 'recharts';
-import '../../../../../Heading/Heading.mjs';
-import '../../../../../Text/Text.mjs';
-import '../../../../../Checkbox/Checkbox.mjs';
-import '../../../../../CheckboxButton/CheckboxButton.mjs';
-import '../../../../../CheckboxGroup/CheckboxGroup.mjs';
-import 'react-syntax-highlighter';
-import '../../../../../CopyButton/CopyButton.mjs';
-import '../../../../../ColumnLayout/ColumnLayout.mjs';
-import '../../../../../ComboBox/ComboBox.mjs';
-import '../../../../../Content/Content.mjs';
-import '../../../../../ContextMenu/ContextMenu.mjs';
-import '../../../../../MenuItem/MenuItem.mjs';
-import '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
-import '../../../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
-import '../../../../../ContextualHelp/ContextualHelp.mjs';
-import '../../../../../ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs';
-import '../../../../../CounterBadge/CounterBadge.mjs';
-import '../../../../../CountryOptions/CountryOptions.mjs';
-import '../../../../../DatePicker/DatePicker.mjs';
-import '../../../../../DateRangePicker/DateRangePicker.mjs';
-import '../../../../../FieldDescription/FieldDescription.mjs';
-import '../../../../../FieldError/FieldError.mjs';
-import '../../../../../FileCard/FileCard.mjs';
-import '../../../../../FileCardList/FileCardList.mjs';
-import '../../../../../FileDropZone/FileDropZone.mjs';
-import '../../../../../FileField/FileField.mjs';
-import '../../../../../Header/Header.mjs';
-import '../../../../../Image/Image.mjs';
-import '../../../../../Initials/Initials.mjs';
-import '../../../../../Label/Label.mjs';
-import '../../../../../LayoutCard/LayoutCard.mjs';
-import '../../../../../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
-import '../../../../../../views/DialogTriggerView.mjs';
-import '../../../../../LightBox/LightBox.mjs';
-import '../../../../../Link/Link.mjs';
-import 'invariant';
-import '../../../../../../views/ListItemViewContentView.mjs';
 import ButtonView from '../../../../../../views/ButtonView.mjs';
-import '../../../../../../views/ContextMenuTriggerView.mjs';
-import '../../../ListSummary/ListSummary.mjs';
-import '../../../../listContext.mjs';
-import '../../../../List.mjs';
-import 'react-markdown';
-import 'remark-gfm';
-import '../../../../../MarkdownEditor/MarkdownEditor.mjs';
-import '../../../../../Message/Message.mjs';
-import '../../../../../MessageThread/MessageThread.mjs';
-import '../../../../../Modal/Modal.mjs';
-import '../../../../../Navigation/Navigation.mjs';
-import '../../../../../Navigation/components/NavigationGroup/NavigationGroup.mjs';
-import '../../../../../NotificationProvider/NotificationProvider.mjs';
-import 'luxon';
-import '../../../../../NumberField/NumberField.mjs';
-import '../../../../../Option/Option.mjs';
-import '../../../../../../views/OverlayContentView.mjs';
-import '../../../../../../views/LoadingSpinnerView.mjs';
-import '../../../../../PasswordCreationField/PasswordCreationField.mjs';
-import '../../../../../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
-import '../../../../../Popover/Popover.mjs';
-import '../../../../../ProgressBar/ProgressBar.mjs';
-import '../../../../../RadioGroup/RadioGroup.mjs';
-import '../../../../../RadioGroup/components/Radio/Radio.mjs';
-import '../../../../../RadioGroup/components/RadioButton/RadioButton.mjs';
-import '../../../../../SearchField/SearchField.mjs';
-import '../../../../../Section/Section.mjs';
-import '../../../../../SegmentedControl/SegmentedControl.mjs';
-import '../../../../../SegmentedControl/components/Segment/Segment.mjs';
-import '../../../../../Select/Select.mjs';
-import '../../../../../SettingsProvider/SettingsProvider.mjs';
-import '../../../../../Slider/Slider.mjs';
-import '../../../../../SuspenseTrigger/SuspenseTrigger.mjs';
-import '../../../../../Switch/Switch.mjs';
-import '../../../../../Tabs/Tabs.mjs';
-import '../../../../../Tabs/components/Tab/context.mjs';
-import '../../../../../TextArea/TextArea.mjs';
-import '../../../../../TextField/TextField.mjs';
-import '../../../../../TimeField/TimeField.mjs';
-import '../../../../../TranslationProvider/TranslationProvider.mjs';
-import '../../../../../../lib/remote/eventHandlerContext.mjs';
 import TooltipView from '../../../../../../views/TooltipView.mjs';
 import DivView from '../../../../../../views/DivView.mjs';
 import BadgeView from '../../../../../../views/BadgeView.mjs';

package/dist/js/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveFilters.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Translate } from \"@/lib/react/components/Translate\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TooltipTrigger } from \"@/components/Tooltip\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\n\nexport const ActiveFilters: FC = observer(() => {\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales);\n\n  const activeFilterValues = list.filters\n    .flatMap((f) => f.values)\n    .filter((v) => v.isActive);\n\n  const activeFilters = activeFilterValues.map((v) => (\n    <BadgeView key={v.id} onClose={() => v.deactivate()}>\n      <TextView>{v.render()}</TextView>\n    </BadgeView>\n  ));\n\n  const someFiltersChanged =\n    list.filters.filter((f) => f.hasChanged()).length > 0;\n\n  const storeFiltersButton = list.supportsSettingsStorage &&\n    someFiltersChanged && (\n      <TooltipTriggerView>\n        <TooltipView>\n          <Translate locales={locales}>list.filters.store</Translate>\n        </TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.storeFilterDefaultSettings()}\n          aria-label={formatter.format(\"list.filters.store\")}\n        >\n          <IconSave />\n        </ButtonView>\n      </TooltipTriggerView>\n    );\n\n  const resetFiltersButton = someFiltersChanged ? (\n    <TooltipTrigger>\n      <TooltipView>\n        <Translate locales={locales}>list.filters.reset</Translate>\n      </TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"list.filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTrigger>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 0 ? (\n      <TooltipTrigger>\n        <TooltipView>\n          <Translate locales={locales}>list.filters.clear</Translate>\n        </TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTrigger>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActiveFilters.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Translate } from \"@/lib/react/components/Translate\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TooltipTrigger } from \"@/components/Tooltip\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\n\nexport const ActiveFilters: FC = observer(() => {\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales);\n\n  const activeFilterValues = list.filters\n    .flatMap((f) => f.values)\n    .filter((v) => v.isActive);\n\n  const activeFilters = activeFilterValues.map((v) => (\n    <BadgeView key={v.id} onClose={() => v.deactivate()}>\n      <TextView>{v.render()}</TextView>\n    </BadgeView>\n  ));\n\n  const someFiltersChanged =\n    list.filters.filter((f) => f.hasChanged()).length > 0;\n\n  const storeFiltersButton = list.supportsSettingsStorage &&\n    someFiltersChanged && (\n      <TooltipTriggerView>\n        <TooltipView>\n          <Translate locales={locales}>list.filters.store</Translate>\n        </TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.storeFilterDefaultSettings()}\n          aria-label={formatter.format(\"list.filters.store\")}\n        >\n          <IconSave />\n        </ButtonView>\n      </TooltipTriggerView>\n    );\n\n  const resetFiltersButton = someFiltersChanged ? (\n    <TooltipTrigger>\n      <TooltipView>\n        <Translate locales={locales}>list.filters.reset</Translate>\n      </TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"list.filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTrigger>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 0 ? (\n      <TooltipTrigger>\n        <TooltipView>\n          <Translate locales={locales}>list.filters.clear</Translate>\n        </TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTrigger>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/List/components/Header/components/SearchField/SearchField.mjs

@@ -7,12 +7,6 @@ import '../../../../../../lib/controller/overlay/context.mjs';
 import { useOnChange } from '../../../../../../lib/hooks/useOnChange.mjs';
 import '../../../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
-import '@mittwald/react-tunnel';
-import '../../../../../../lib/slotContext/SlotContextProvider.mjs';
-import '../../../../../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
-import '../../../../../../views/ClearPropsContextView.mjs';
-import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import '@react-aria/utils';
 import 'dot-prop';
 import SearchFieldView from '../../../../../../views/SearchFieldView.mjs';