@mittwald/flow-react-components 1.5.0-next.8 → 1.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChartValue.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { 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"],"mappings":";;;;;;;AASA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,QAAQ,GAAG,eAAe,aAAa;CAE/C,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,SAAS,MAAM,QAAQ,IAAI,GAC7B,OAAO,oBAAC,QAAD;EAAM,WAAW,0BAAO;EAAQ;CAAe,CAAA;CAGxD,MAAM,iBAAiB,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAE1E,OACE,oBAAC,QAAD;EAAM,WAAW,0BAAO;EACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,eAAuB,CAAA;CAC5B,CAAA;AAEV"}
+{"version":3,"file":"DonutChartValue.mjs","names":["styles"],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { 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.toArray(children).length > 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"],"mappings":";;;;;;;AASA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,QAAQ,GAAG,eAAe,aAAa;CAE/C,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,GACtC,OAAO,oBAAC,QAAD;EAAM,WAAWA,0BAAO;EAAQ;CAAe,CAAA;CAGxD,MAAM,iBAAiB,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAE1E,OACE,oBAAC,QAAD;EAAM,WAAWA,0BAAO;EACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,eAAuB,CAAA;CAC5B,CAAA;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"EmulatedBoldText.mjs","names":[],"sources":["../../../../../../../src/components/EmulatedBoldText/EmulatedBoldText.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./EmulatedBoldText.module.scss\";\nimport clsx from \"clsx\";\n\nexport type EmulatedBoldTextProps = PropsWithChildren<ComponentProps<\"span\">>;\n\nexport const EmulatedBoldText: FC<EmulatedBoldTextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.emulatedBoldText, className);\n\n  return (\n    <span className={rootClassName} {...rest}>\n      {children}\n      <span aria-hidden=\"true\" className={styles.boldText}>\n        {children}\n      </span>\n    </span>\n  );\n};\n\nexport default EmulatedBoldText;\n"],"mappings":";;;;;;AAMA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAK,gCAAO,kBAAkB,SAAS;CAE7D,OACE,qBAAC,QAAD;EAAM,WAAW;EAAe,GAAI;EAApC,UAAA,CACG,UACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,gCAAO;GACxC;EACG,CAAA,CACF;;AAEV"}
+{"version":3,"file":"EmulatedBoldText.mjs","names":["styles"],"sources":["../../../../../../../src/components/EmulatedBoldText/EmulatedBoldText.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./EmulatedBoldText.module.scss\";\nimport clsx from \"clsx\";\n\nexport type EmulatedBoldTextProps = PropsWithChildren<ComponentProps<\"span\">>;\n\nexport const EmulatedBoldText: FC<EmulatedBoldTextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.emulatedBoldText, className);\n\n  return (\n    <span className={rootClassName} {...rest}>\n      {children}\n      <span aria-hidden=\"true\" className={styles.boldText}>\n        {children}\n      </span>\n    </span>\n  );\n};\n\nexport default EmulatedBoldText;\n"],"mappings":";;;;;;AAMA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,gCAAO,kBAAkB,SAAS;CAE7D,OACE,qBAAC,QAAD;EAAM,WAAW;EAAe,GAAI;EAApC,UAAA,CACG,UACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAWA,gCAAO;GACxC;EACG,CAAA,CACF;;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.mjs","names":[],"sources":["../../../../../../../src/components/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import styles from \"./FieldDescription.module.scss\";\nimport clsx from \"clsx\";\nimport type { TextProps } from \"@/components/Text\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldDescriptionProps extends TextProps, FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldDescription = flowComponent(\"FieldDescription\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldDescription, className);\n\n  return (\n    <Text slot=\"description\" {...rest} className={rootClassName} ref={ref}>\n      {children}\n    </Text>\n  );\n});\n\nexport default FieldDescription;\n"],"mappings":";;;;;;;;;AAUA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAC3E,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,gCAAO,kBAAkB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAM,MAAK;EAAc,GAAI;EAAM,WAAW;EAAoB;EAC/D;CACG,CAAA;AAEV,CAAC"}
+{"version":3,"file":"FieldDescription.mjs","names":["styles"],"sources":["../../../../../../../src/components/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import styles from \"./FieldDescription.module.scss\";\nimport clsx from \"clsx\";\nimport type { TextProps } from \"@/components/Text\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldDescriptionProps extends TextProps, FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldDescription = flowComponent(\"FieldDescription\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldDescription, className);\n\n  return (\n    <Text slot=\"description\" {...rest} className={rootClassName} ref={ref}>\n      {children}\n    </Text>\n  );\n});\n\nexport default FieldDescription;\n"],"mappings":";;;;;;;;;AAUA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAC3E,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,gCAAO,kBAAkB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAM,MAAK;EAAc,GAAI;EAAM,WAAW;EAAoB;EAC/D;CACG,CAAA;AAEV,CAAC"}

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

@@ -1,13 +1,16 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { Alert } from "../Alert/Alert.mjs";
 import { AlertText } from "../AlertText/AlertText.mjs";
+import { FieldErrorRenderedContext } from "../../lib/hooks/fieldErrorRenderedContext.mjs";
 import { Heading } from "../Heading/Heading.mjs";
 import FieldError_module_default from "./FieldError.module.mjs";
 import clsx from "clsx";
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
 import * as Aria from "react-aria-components";
 import { FieldErrorContext, TextContext } from "react-aria-components";
 //#region src/components/FieldError/FieldError.tsx
@@ -15,40 +18,49 @@ import { FieldErrorContext, TextContext } from "react-aria-components";
 var FieldError = flowComponent("FieldError", (props) => {
 	const { children, className, ref, renderAlert, ...rest } = props;
 	const rootClassName = clsx(FieldError_module_default.fieldError, className);
-	const fieldErrorFromAriaContext = useContext(FieldErrorContext);
-	const isInvalidFromChildren = React.Children.count(children) >= 1;
-	const mergedErrorState = useMemo(() => {
-		const errors = fieldErrorFromAriaContext?.validationErrors ?? [];
-		if (isInvalidFromChildren) errors.push(children);
-		const isInvalid = !!(isInvalidFromChildren || fieldErrorFromAriaContext?.isInvalid);
-		const lastError = errors.length >= 1 ? errors[errors.length - 1] : void 0;
-		return {
-			isInvalid,
-			validationDetails: {
-				valid: !isInvalid,
-				badInput: false,
-				customError: isInvalid,
-				patternMismatch: false,
-				rangeOverflow: false,
-				rangeUnderflow: false,
-				stepMismatch: false,
-				tooLong: false,
-				tooShort: false,
-				valueMissing: false,
-				typeMismatch: false,
-				...fieldErrorFromAriaContext?.validationDetails
-			},
-			...fieldErrorFromAriaContext,
-			validationErrors: lastError ? [lastError] : []
-		};
-	}, [fieldErrorFromAriaContext, children]);
-	if (!mergedErrorState.isInvalid) return;
+	const isSkeleton = useSkeletonMode();
+	const fieldValidation = useContext(FieldErrorContext);
+	const reportRendered = useContext(FieldErrorRenderedContext);
+	const hasChildren = React.Children.count(children) >= 1;
+	const isInvalid = fieldValidation ? fieldValidation.isInvalid : hasChildren;
+	const isShown = isInvalid && !isSkeleton;
+	const message = hasChildren ? children : fieldValidation?.validationErrors.at(-1);
+	const errorState = {
+		isInvalid,
+		validationDetails: fieldValidation?.validationDetails ?? {
+			badInput: false,
+			customError: isInvalid,
+			patternMismatch: false,
+			rangeOverflow: false,
+			rangeUnderflow: false,
+			stepMismatch: false,
+			tooLong: false,
+			tooShort: false,
+			typeMismatch: false,
+			valid: !isInvalid,
+			valueMissing: false
+		},
+		validationErrors: message ? [message] : []
+	};
+	const localRef = useObjectRef(ref);
+	useLayoutEffect(() => {
+		const element = localRef.current;
+		if (!reportRendered || !isShown || !element?.isConnected || !element.id) return;
+		reportRendered(element.id);
+		return () => reportRendered(void 0);
+	}, [
+		reportRendered,
+		isShown,
+		rest.id,
+		localRef
+	]);
+	if (!isShown) return;
 	return /* @__PURE__ */ jsx(Aria.Provider, {
 		values: [[TextContext, { slot: void 0 }]],
 		children: /* @__PURE__ */ jsx(FieldErrorContext, {
-			value: mergedErrorState,
+			value: errorState,
 			children: /* @__PURE__ */ jsx(Aria.FieldError, {
-				ref,
+				ref: localRef,
 				...rest,
 				className: rootClassName,
 				children: ({ validationErrors }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FieldError.mjs","names":[],"sources":["../../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, TextContext } from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertText } from \"@/components/AlertText\";\nimport { Alert } from \"@/components/Alert\";\nimport { Heading } from \"@/components/Heading\";\n\nexport interface FieldErrorProps\n  extends\n    PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {\n  /** @internal */\n  renderAlert?: boolean;\n}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, renderAlert, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const fieldErrorFromAriaContext = useContext(FieldErrorContext);\n  const isInvalidFromChildren = React.Children.count(children) >= 1;\n\n  const mergedErrorState = useMemo(() => {\n    const errors: (string | ReactNode)[] =\n      fieldErrorFromAriaContext?.validationErrors ?? [];\n\n    if (isInvalidFromChildren) {\n      errors.push(children);\n    }\n\n    const isInvalid = !!(\n      isInvalidFromChildren || fieldErrorFromAriaContext?.isInvalid\n    );\n    const lastError =\n      errors.length >= 1 ? errors[errors.length - 1] : undefined;\n\n    return {\n      isInvalid: isInvalid,\n      validationDetails: {\n        valid: !isInvalid,\n        badInput: false,\n        customError: isInvalid,\n        patternMismatch: false,\n        rangeOverflow: false,\n        rangeUnderflow: false,\n        stepMismatch: false,\n        tooLong: false,\n        tooShort: false,\n        valueMissing: false,\n        typeMismatch: false,\n        ...fieldErrorFromAriaContext?.validationDetails,\n      },\n      ...fieldErrorFromAriaContext,\n      validationErrors: lastError ? [lastError] : [],\n    };\n  }, [fieldErrorFromAriaContext, children]);\n\n  if (!mergedErrorState.isInvalid) {\n    return undefined;\n  }\n\n  return (\n    <Aria.Provider values={[[TextContext, { slot: undefined }]]}>\n      <FieldErrorContext value={mergedErrorState as never}>\n        <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n          {({ validationErrors }) => {\n            return renderAlert ? (\n              <Alert status=\"danger\">\n                <Heading>{validationErrors}</Heading>\n              </Alert>\n            ) : (\n              <AlertText status=\"danger\">{validationErrors}</AlertText>\n            );\n          }}\n        </Aria.FieldError>\n      </FieldErrorContext>\n    </Aria.Provider>\n  );\n});\n\nexport default FieldError;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,KAAK,aAAa,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CACvD,MAAM,4BAA4B,WAAW,iBAAiB;CAC9D,MAAM,wBAAwB,MAAM,SAAS,MAAM,QAAQ,KAAK;CAEhE,MAAM,mBAAmB,cAAc;EACrC,MAAM,SACJ,2BAA2B,oBAAoB,CAAC;EAElD,IAAI,uBACF,OAAO,KAAK,QAAQ;EAGtB,MAAM,YAAY,CAAC,EACjB,yBAAyB,2BAA2B;EAEtD,MAAM,YACJ,OAAO,UAAU,IAAI,OAAO,OAAO,SAAS,KAAK,KAAA;EAEnD,OAAO;GACM;GACX,mBAAmB;IACjB,OAAO,CAAC;IACR,UAAU;IACV,aAAa;IACb,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,UAAU;IACV,cAAc;IACd,cAAc;IACd,GAAG,2BAA2B;GAChC;GACA,GAAG;GACH,kBAAkB,YAAY,CAAC,SAAS,IAAI,CAAC;EAC/C;CACF,GAAG,CAAC,2BAA2B,QAAQ,CAAC;CAExC,IAAI,CAAC,iBAAiB,WACpB;CAGF,OACE,oBAAC,KAAK,UAAN;EAAe,QAAQ,CAAC,CAAC,aAAa,EAAE,MAAM,KAAA,EAAU,CAAC,CAAC;EACxD,UAAA,oBAAC,mBAAD;GAAmB,OAAO;GACxB,UAAA,oBAAC,KAAK,YAAN;IAAsB;IAAK,GAAI;IAAM,WAAW;IAC5C,WAAA,EAAE,uBAAuB;KACzB,OAAO,cACL,oBAAC,OAAD;MAAO,QAAO;MACZ,UAAA,oBAAC,SAAD,EAAA,UAAU,iBAA0B,CAAA;KAC/B,CAAA,IAEP,oBAAC,WAAD;MAAW,QAAO;MAAU,UAAA;KAA4B,CAAA;IAE5D;GACe,CAAA;EACA,CAAA;CACN,CAAA;AAEnB,CAAC"}
+{"version":3,"file":"FieldError.mjs","names":["styles"],"sources":["../../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import React, {\n  type PropsWithChildren,\n  useContext,\n  useLayoutEffect,\n} from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, TextContext } from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertText } from \"@/components/AlertText\";\nimport { Alert } from \"@/components/Alert\";\nimport { Heading } from \"@/components/Heading\";\nimport { FieldErrorRenderedContext } from \"@/lib/hooks/fieldErrorRenderedContext\";\nimport { useObjectRef } from \"react-aria\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface FieldErrorProps\n  extends\n    PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {\n  /** @internal */\n  renderAlert?: boolean;\n}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, renderAlert, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const isSkeleton = useSkeletonMode();\n  const fieldValidation = useContext(FieldErrorContext);\n  const reportRendered = useContext(FieldErrorRenderedContext);\n  const hasChildren = React.Children.count(children) >= 1;\n\n  // Inside a field the field decides whether there is an error – children only\n  // provide its message. Without a field, children are the error.\n  const isInvalid = fieldValidation ? fieldValidation.isInvalid : hasChildren;\n  // A skeleton claims no state, and an error is one.\n  const isShown = isInvalid && !isSkeleton;\n\n  // Never mutate the context's errors: for a valid field react-aria hands out\n  // one module-level array shared by every field of the page.\n  const message = hasChildren\n    ? children\n    : fieldValidation?.validationErrors.at(-1);\n\n  const errorState = {\n    isInvalid,\n    validationDetails: fieldValidation?.validationDetails ?? {\n      badInput: false,\n      customError: isInvalid,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !isInvalid,\n      valueMissing: false,\n    },\n    validationErrors: message ? [message] : [],\n  };\n\n  // Report what is actually in the document: inside a collection (`Select`,\n  // `ComboBox`) react-aria renders the children a second time into a hidden\n  // collection document, where no field context exists and no id resolves.\n  const localRef = useObjectRef(ref);\n  useLayoutEffect(() => {\n    const element = localRef.current;\n    if (!reportRendered || !isShown || !element?.isConnected || !element.id) {\n      return;\n    }\n    reportRendered(element.id);\n    return () => reportRendered(undefined);\n  }, [reportRendered, isShown, rest.id, localRef]);\n\n  if (!isShown) {\n    return undefined;\n  }\n\n  return (\n    <Aria.Provider values={[[TextContext, { slot: undefined }]]}>\n      <FieldErrorContext value={errorState as never}>\n        <Aria.FieldError ref={localRef} {...rest} className={rootClassName}>\n          {({ validationErrors }) => {\n            return renderAlert ? (\n              <Alert status=\"danger\">\n                <Heading>{validationErrors}</Heading>\n              </Alert>\n            ) : (\n              <AlertText status=\"danger\">{validationErrors}</AlertText>\n            );\n          }}\n        </Aria.FieldError>\n      </FieldErrorContext>\n    </Aria.Provider>\n  );\n});\n\nexport default FieldError;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,KAAK,aAAa,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KAAKA,0BAAO,YAAY,SAAS;CACvD,MAAM,aAAa,gBAAgB;CACnC,MAAM,kBAAkB,WAAW,iBAAiB;CACpD,MAAM,iBAAiB,WAAW,yBAAyB;CAC3D,MAAM,cAAc,MAAM,SAAS,MAAM,QAAQ,KAAK;CAItD,MAAM,YAAY,kBAAkB,gBAAgB,YAAY;CAEhE,MAAM,UAAU,aAAa,CAAC;CAI9B,MAAM,UAAU,cACZ,WACA,iBAAiB,iBAAiB,GAAG,EAAE;CAE3C,MAAM,aAAa;EACjB;EACA,mBAAmB,iBAAiB,qBAAqB;GACvD,UAAU;GACV,aAAa;GACb,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,cAAc;GACd,SAAS;GACT,UAAU;GACV,cAAc;GACd,OAAO,CAAC;GACR,cAAc;EAChB;EACA,kBAAkB,UAAU,CAAC,OAAO,IAAI,CAAC;CAC3C;CAKA,MAAM,WAAW,aAAa,GAAG;CACjC,sBAAsB;EACpB,MAAM,UAAU,SAAS;EACzB,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,SAAS,eAAe,CAAC,QAAQ,IACnE;EAEF,eAAe,QAAQ,EAAE;EACzB,aAAa,eAAe,KAAA,CAAS;CACvC,GAAG;EAAC;EAAgB;EAAS,KAAK;EAAI;CAAQ,CAAC;CAE/C,IAAI,CAAC,SACH;CAGF,OACE,oBAAC,KAAK,UAAN;EAAe,QAAQ,CAAC,CAAC,aAAa,EAAE,MAAM,KAAA,EAAU,CAAC,CAAC;EACxD,UAAA,oBAAC,mBAAD;GAAmB,OAAO;GACxB,UAAA,oBAAC,KAAK,YAAN;IAAiB,KAAK;IAAU,GAAI;IAAM,WAAW;IACjD,WAAA,EAAE,uBAAuB;KACzB,OAAO,cACL,oBAAC,OAAD;MAAO,QAAO;MACZ,UAAA,oBAAC,SAAD,EAAA,UAAU,iBAA0B,CAAA;KAC/B,CAAA,IAEP,oBAAC,WAAD;MAAW,QAAO;MAAU,UAAA;KAA4B,CAAA;IAE5D;GACe,CAAA;EACA,CAAA;CACN,CAAA;AAEnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileCard.mjs","names":[],"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 { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface FileCardProps\n  extends\n    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      tunnel: {\n        id: \"subTitle\",\n        component: \"FileCard\",\n      },\n    },\n    ProgressBar: {\n      size: \"s\",\n      tunnel: {\n        id: \"progressBar\",\n        component: \"FileCard\",\n      },\n    },\n    Button: { variant: \"plain\", color: \"secondary\" },\n  };\n\n  const Element = elementType;\n\n  return (\n    <PropsContextProvider props={propsContext}>\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              <UiComponentTunnelExit id=\"subTitle\" component=\"FileCard\" />\n              <UiComponentTunnelExit id=\"progressBar\" component=\"FileCard\" />\n            </span>\n          </Link>\n        </Wrap>\n        {children}\n        {onDelete && <DeleteButton onDelete={onDelete} />}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCard;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,KACA,UACA,MACA,aACA,MACA,WACA,cAAc,OACd,SACA,MACA,QACA,UACA,UACA,UACA,aACE;CAEJ,MAAM,gBAAgB,KACpB,wBAAO,UACP,YAAY,wBAAO,WACnB,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;GACX,UAAU,oBAAC,eAAD,CAAgB,CAAA;GAC1B,WAAW;EACb;EACA,MAAM;GACJ,aAAa;GACb,WAAW,wBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,aAAa;GACX,MAAM;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ;GAAE,SAAS;GAAS,OAAO;EAAY;CACjD;CAIA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,aAAD;GAAc;GAAc,WAAW;GAAvC,UAAA;IACE,oBAAC,MAAD;KAAM,KAAK,QAAQ,YAAY,CAAC;KAC9B,UAAA,qBAAC,MAAD;MACE,WAAW,wBAAO;MAClB,UAAA;MACM;MACG;MACD;MACE;MANZ,UAAA,CAQE,oBAAC,QAAD;OAAc;OAAgB;OAAoB;MAAW,CAAA,GAE7D,qBAAC,QAAD;OAAM,WAAW,wBAAO;OAAxB,UAAA;QACG,QACC,oBAAC,MAAD;SAAM,WAAW,wBAAO;SACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,KAAa,CAAA;QAClB,CAAA;QAEP,eAAe,oBAAC,cAAD,EAA2B,YAAc,CAAA;QACzD,oBAAC,uBAAD;SAAuB,IAAG;SAAW,WAAU;QAAY,CAAA;QAC3D,oBAAC,uBAAD;SAAuB,IAAG;SAAc,WAAU;QAAY,CAAA;OAC1D;MACF,CAAA,CAAA;;IACF,CAAA;IACL;IACA,YAAY,oBAAC,cAAD,EAAwB,SAAW,CAAA;GACzC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"FileCard.mjs","names":["styles","Element"],"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 { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface FileCardProps\n  extends\n    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      tunnel: {\n        id: \"subTitle\",\n        component: \"FileCard\",\n      },\n    },\n    ProgressBar: {\n      size: \"s\",\n      tunnel: {\n        id: \"progressBar\",\n        component: \"FileCard\",\n      },\n    },\n    Button: { variant: \"plain\", color: \"secondary\" },\n  };\n\n  const Element = elementType;\n\n  return (\n    <PropsContextProvider props={propsContext}>\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              <UiComponentTunnelExit id=\"subTitle\" component=\"FileCard\" />\n              <UiComponentTunnelExit id=\"progressBar\" component=\"FileCard\" />\n            </span>\n          </Link>\n        </Wrap>\n        {children}\n        {onDelete && <DeleteButton onDelete={onDelete} />}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCard;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,KACA,UACA,MACA,aACA,MACA,WACA,cAAc,OACd,SACA,MACA,QACA,UACA,UACA,UACA,aACE;CAEJ,MAAM,gBAAgB,KACpBA,wBAAO,UACP,YAAYA,wBAAO,WACnB,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;GACX,UAAU,oBAAC,eAAD,CAAgB,CAAA;GAC1B,WAAW;EACb;EACA,MAAM;GACJ,aAAa;GACb,WAAWA,wBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,aAAa;GACX,MAAM;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ;GAAE,SAAS;GAAS,OAAO;EAAY;CACjD;CAIA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAACC,aAAD;GAAc;GAAc,WAAW;GAAvC,UAAA;IACE,oBAAC,MAAD;KAAM,KAAK,QAAQ,YAAY,CAAC;KAC9B,UAAA,qBAAC,MAAD;MACE,WAAWD,wBAAO;MAClB,UAAA;MACM;MACG;MACD;MACE;MANZ,UAAA,CAQE,oBAAC,QAAD;OAAc;OAAgB;OAAoB;MAAW,CAAA,GAE7D,qBAAC,QAAD;OAAM,WAAWA,wBAAO;OAAxB,UAAA;QACG,QACC,oBAAC,MAAD;SAAM,WAAWA,wBAAO;SACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,KAAa,CAAA;QAClB,CAAA;QAEP,eAAe,oBAAC,cAAD,EAA2B,YAAc,CAAA;QACzD,oBAAC,uBAAD;SAAuB,IAAG;SAAW,WAAU;QAAY,CAAA;QAC3D,oBAAC,uBAAD;SAAuB,IAAG;SAAc,WAAU;QAAY,CAAA;OAC1D;MACF,CAAA,CAAA;;IACF,CAAA;IACL;IACA,YAAY,oBAAC,cAAD,EAAwB,SAAW,CAAA;GACzC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFile, IconImage } from \"@/components/Icon/components/icons\";\nimport { Avatar as AvatarComponent } from \"@/components/Avatar\";\nimport { Image } from \"@/components/Image\";\n\ninterface Props {\n  type?: string;\n  imageSrc?: string;\n  isFailed?: boolean;\n}\n\nexport const Avatar: FC<Props> = (props) => {\n  const { type, imageSrc, isFailed } = props;\n\n  if (isFailed) {\n    return <AvatarComponent status=\"danger\" />;\n  }\n\n  if (imageSrc) {\n    return (\n      <AvatarComponent>\n        <Image src={imageSrc} />\n      </AvatarComponent>\n    );\n  }\n\n  return (\n    <AvatarComponent color=\"blue\">\n      {type?.startsWith(\"image\") ? <IconImage /> : <IconFile />}\n    </AvatarComponent>\n  );\n};\nexport default Avatar;\n"],"mappings":";;;;;;;;AAWA,IAAa,UAAqB,UAAU;CAC1C,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,UACF,OAAO,oBAAC,UAAD,EAAiB,QAAO,SAAU,CAAA;CAG3C,IAAI,UACF,OACE,oBAAC,UAAD,EAAA,UACE,oBAAC,OAAD,EAAO,KAAK,SAAW,CAAA,EACR,CAAA;CAIrB,OACE,oBAAC,UAAD;EAAiB,OAAM;EACpB,UAAA,MAAM,WAAW,OAAO,IAAI,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACzC,CAAA;AAErB"}
+{"version":3,"file":"Avatar.mjs","names":["AvatarComponent"],"sources":["../../../../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFile, IconImage } from \"@/components/Icon/components/icons\";\nimport { Avatar as AvatarComponent } from \"@/components/Avatar\";\nimport { Image } from \"@/components/Image\";\n\ninterface Props {\n  type?: string;\n  imageSrc?: string;\n  isFailed?: boolean;\n}\n\nexport const Avatar: FC<Props> = (props) => {\n  const { type, imageSrc, isFailed } = props;\n\n  if (isFailed) {\n    return <AvatarComponent status=\"danger\" />;\n  }\n\n  if (imageSrc) {\n    return (\n      <AvatarComponent>\n        <Image src={imageSrc} />\n      </AvatarComponent>\n    );\n  }\n\n  return (\n    <AvatarComponent color=\"blue\">\n      {type?.startsWith(\"image\") ? <IconImage /> : <IconFile />}\n    </AvatarComponent>\n  );\n};\nexport default Avatar;\n"],"mappings":";;;;;;;;AAWA,IAAa,UAAqB,UAAU;CAC1C,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,UACF,OAAO,oBAACA,UAAD,EAAiB,QAAO,SAAU,CAAA;CAG3C,IAAI,UACF,OACE,oBAACA,UAAD,EAAA,UACE,oBAAC,OAAD,EAAO,KAAK,SAAW,CAAA,EACR,CAAA;CAIrB,OACE,oBAACA,UAAD;EAAiB,OAAM;EACpB,UAAA,MAAM,WAAW,OAAO,IAAI,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACzC,CAAA;AAErB"}

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

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.mjs","names":[],"sources":["../../../../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"FileCard\");\n\n  return (\n    <Button\n      aria-label={stringFormatter.format(`delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,aAAa;CACrB,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,OACE,oBAAC,QAAD;EACE,cAAY,gBAAgB,OAAO,QAAQ;EAC3C,SAAQ;EACR,OAAM;EACN,SAAS;EAET,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ"}
+{"version":3,"file":"DeleteButton.mjs","names":["locales"],"sources":["../../../../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"FileCard\");\n\n  return (\n    <Button\n      aria-label={stringFormatter.format(`delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,aAAa;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,OACE,oBAAC,QAAD;EACE,cAAY,gBAAgB,OAAO,QAAQ;EAC3C,SAAQ;EACR,OAAM;EACN,SAAS;EAET,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileSizeText.mjs","names":[],"sources":["../../../../../../../../../src/components/FileCard/components/FileSizeText/FileSizeText.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Text } from \"@/components/Text\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\n\ninterface Props {\n  sizeInBytes: number;\n}\n\nexport const FileSizeText: FC<Props> = (props) => {\n  const { sizeInBytes } = props;\n\n  return (\n    <Text className={styles.subTitle}>\n      {new Intl.NumberFormat(\"en-US\", {\n        notation: \"compact\",\n        style: \"unit\",\n        unit: \"byte\",\n        unitDisplay: \"narrow\",\n      }).format(sizeInBytes)}\n    </Text>\n  );\n};\n\nexport default FileSizeText;\n"],"mappings":";;;;;;AAQA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,gBAAgB;CAExB,OACE,oBAAC,MAAD;EAAM,WAAW,wBAAO;EACrB,UAAA,IAAI,KAAK,aAAa,SAAS;GAC9B,UAAU;GACV,OAAO;GACP,MAAM;GACN,aAAa;EACf,CAAC,CAAC,CAAC,OAAO,WAAW;CACjB,CAAA;AAEV"}
+{"version":3,"file":"FileSizeText.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/FileCard/components/FileSizeText/FileSizeText.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Text } from \"@/components/Text\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\n\ninterface Props {\n  sizeInBytes: number;\n}\n\nexport const FileSizeText: FC<Props> = (props) => {\n  const { sizeInBytes } = props;\n\n  return (\n    <Text className={styles.subTitle}>\n      {new Intl.NumberFormat(\"en-US\", {\n        notation: \"compact\",\n        style: \"unit\",\n        unit: \"byte\",\n        unitDisplay: \"narrow\",\n      }).format(sizeInBytes)}\n    </Text>\n  );\n};\n\nexport default FileSizeText;\n"],"mappings":";;;;;;AAQA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,gBAAgB;CAExB,OACE,oBAAC,MAAD;EAAM,WAAWA,wBAAO;EACrB,UAAA,IAAI,KAAK,aAAa,SAAS;GAC9B,UAAU;GACV,OAAO;GACP,MAAM;GACN,aAAa;EACf,CAAC,CAAC,CAAC,OAAO,WAAW;CACjB,CAAA;AAEV"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { IllustratedMessage } from "../IllustratedMessage/IllustratedMessage.mjs";
 import FileDropZone_module_default from "./FileDropZone.module.mjs";
@@ -14,9 +15,10 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var FileDropZone = flowComponent("FileDropZone", (props) => {
 	const { multiple, accept, className, onChange: onChangeDropZone, children, name, isDisabled, isReadOnly } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "FileDropZone");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "FileDropZone");
 	const fileFieldRef = useRef(null);
-	const rootClassName = clsx(FileDropZone_module_default.fileDropZone, isDisabled && FileDropZone_module_default.disabled, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(FileDropZone_module_default.fileDropZone, isDisabled && FileDropZone_module_default.disabled, isSkeleton && FileDropZone_module_default.skeleton, className);
 	const propsContext = {
 		...fieldPropsContext,
 		IllustratedMessage: {
@@ -31,7 +33,8 @@ var FileDropZone = flowComponent("FileDropZone", (props) => {
 					color: "dark"
 				},
 				isDisabled,
-				isReadOnly
+				isReadOnly,
+				"aria-describedby": controlProps["aria-describedby"]
 			},
 			Heading: { className: FileDropZone_module_default.heading },
 			Icon: { className: FileDropZone_module_default.icon },
@@ -49,20 +52,22 @@ var FileDropZone = flowComponent("FileDropZone", (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		className: wrapperProps.className,
+		inert: isSkeleton || void 0,
+		children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
+			dependencies: [controlProps["aria-describedby"]],
 			children: /* @__PURE__ */ jsx(Aria.DropZone, {
 				className: rootClassName,
 				onDrop: onDropHandler,
 				isDisabled,
 				"data-readonly": isReadOnly,
-				children: /* @__PURE__ */ jsx(IllustratedMessage, {
+				children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(IllustratedMessage, {
 					color: "dark",
-					children
-				})
+					children: /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children })
+				}) })
 			})
-		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+		}), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"FileDropZone\");\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      IllustratedMessage: {\n        FileField: {\n          name,\n          onChange: onChangeDropZone,\n          ref: fileFieldRef,\n          accept: accept,\n          multiple: multiple,\n          Button: { variant: \"outline\", color: \"dark\" },\n          isDisabled,\n          isReadOnly,\n        },\n        Heading: {\n          className: styles.heading,\n        },\n        Icon: { className: styles.icon },\n        Text: { className: styles.text },\n      },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const files = await getAcceptedFiles(event.items, accept);\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div {...fieldProps}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;GACF;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAAQ;IAA6B,CAAA;GAClD,CAAA;EACK,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}
+{"version":3,"file":"FileDropZone.mjs","names":["styles"],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      wrapperProps,\n      controlProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"FileDropZone\");\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const isSkeleton = useSkeletonMode();\n\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      isSkeleton && styles.skeleton,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      IllustratedMessage: {\n        FileField: {\n          name,\n          onChange: onChangeDropZone,\n          ref: fileFieldRef,\n          accept: accept,\n          multiple: multiple,\n          Button: { variant: \"outline\", color: \"dark\" },\n          isDisabled,\n          isReadOnly,\n          \"aria-describedby\": controlProps[\"aria-describedby\"],\n        },\n        Heading: {\n          className: styles.heading,\n        },\n        Icon: { className: styles.icon },\n        Text: { className: styles.text },\n      },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const files = await getAcceptedFiles(event.items, accept);\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div className={wrapperProps.className} inert={isSkeleton || undefined}>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[controlProps[\"aria-describedby\"]]}\n        >\n          <Aria.DropZone\n            className={rootClassName}\n            onDrop={onDropHandler}\n            isDisabled={isDisabled}\n            data-readonly={isReadOnly}\n          >\n            {/* The drop zone is one skeleton surface, its content draws none. */}\n            <SkeletonModeReset>\n              <IllustratedMessage color=\"dark\">\n                {/* Inside: IllustratedMessage clears the props context it gets. */}\n                <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n              </IllustratedMessage>\n            </SkeletonModeReset>\n          </Aria.DropZone>\n        </PropsContextProvider>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;;;AAmCA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,4BAAO,cACP,cAAcA,4BAAO,UACrB,cAAcA,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;IACA,oBAAoB,aAAa;GACnC;GACA,SAAS,EACP,WAAWA,4BAAO,QACpB;GACA,MAAM,EAAE,WAAWA,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAWA,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,aAAa;EAAW,OAAO,cAAc,KAAA;EAA7D,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,aAAa,mBAAmB;GAE/C,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAGf,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,oBAAD;KAAoB,OAAM;KAExB,UAAA,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC5C,CAAA,EACH,CAAA;GACN,CAAA;EACK,CAAA,GACtB,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}

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

@@ -6,14 +6,18 @@ var disabled = "flow--file-drop-zone--disabled";
 var icon = "flow--file-drop-zone--icon";
 var heading = "flow--file-drop-zone--heading";
 var text = "flow--file-drop-zone--text";
+var skeleton = "flow--file-drop-zone--skeleton";
 var FileDropZone_module_default = {
 	fileDropZone,
 	disabled,
 	icon,
 	heading,
-	text
+	text,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--file-drop-zone--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--file-drop-zone--skeleton-text-shimmer"
 };
 //#endregion
-export { FileDropZone_module_default as default, disabled, fileDropZone, heading, icon, text };
+export { FileDropZone_module_default as default, disabled, fileDropZone, heading, icon, skeleton, text };
 
 //# sourceMappingURL=FileDropZone.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.module.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.module.scss"],"sourcesContent":[".fileDropZone {\n  border-style: var(--file-drop-zone--border-style--default);\n  border-width: var(--file-drop-zone--border-width);\n  border-color: var(--file-drop-zone--border-color--default);\n  background-color: var(--file-drop-zone--background-color--default);\n  border-radius: var(--file-drop-zone--corner-radius);\n  padding: var(--file-drop-zone--padding);\n  transition-property: background-color, border-color;\n  transition-duration: var(--transition--duration--default);\n\n  &[data-focus-visible],\n  &[data-drop-target]:where(:not([data-readonly])) {\n    border-color: var(--file-drop-zone--border-color--target);\n    border-style: var(--file-drop-zone--border-style--target);\n  }\n\n  &[data-drop-target]:where(:not([data-readonly])) {\n    background-color: var(--file-drop-zone--background-color--target);\n  }\n\n  :global(.flow--form-field) {\n    align-items: center;\n  }\n\n  &.disabled {\n    background-color: var(--file-drop-zone--background-color--disabled);\n    border-color: var(--file-drop-zone--border-color--disabled);\n\n    .icon,\n    .heading,\n    .text {\n      color: var(--file-drop-zone--content-color--disabled);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"FileDropZone.module.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.fileDropZone {\n  border-style: var(--file-drop-zone--border-style--default);\n  border-width: var(--file-drop-zone--border-width);\n  border-color: var(--file-drop-zone--border-color--default);\n  background-color: var(--file-drop-zone--background-color--default);\n  border-radius: var(--file-drop-zone--corner-radius);\n  padding: var(--file-drop-zone--padding);\n  transition-property: background-color, border-color;\n  transition-duration: var(--transition--duration--default);\n\n  &[data-focus-visible],\n  &[data-drop-target]:where(:not([data-readonly])) {\n    border-color: var(--file-drop-zone--border-color--target);\n    border-style: var(--file-drop-zone--border-style--target);\n  }\n\n  &[data-drop-target]:where(:not([data-readonly])) {\n    background-color: var(--file-drop-zone--background-color--target);\n  }\n\n  :global(.flow--form-field) {\n    align-items: center;\n  }\n\n  &.disabled {\n    background-color: var(--file-drop-zone--background-color--disabled);\n    border-color: var(--file-drop-zone--border-color--disabled);\n\n    .icon,\n    .heading,\n    .text {\n      color: var(--file-drop-zone--content-color--disabled);\n    }\n  }\n\n  /* SkeletonMode — after the states, so the surface wins over their colors */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--file-drop-zone--corner-radius);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -15,7 +15,7 @@ import { useFormValidationState } from "@react-stately/form";
 /** @flr-generate all */
 var FileField = flowComponent("FileField", (props) => {
 	const { children, ref, isRequired, isInvalid, isDisabled, validationBehavior, onChange, isReadOnly, ...restInputProps } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "FileField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "FileField");
 	const inputRef = useObjectRef(ref);
 	const formValidationState = useFormValidationState({
 		value: void 0,
@@ -25,6 +25,7 @@ var FileField = flowComponent("FileField", (props) => {
 	useFormValidation({ validationBehavior }, formValidationState, inputRef);
 	const inputProps = {
 		...restInputProps,
+		"aria-describedby": controlProps["aria-describedby"],
 		"aria-invalid": formValidationState.displayValidation.isInvalid,
 		value: void 0
 	};
@@ -32,8 +33,8 @@ var FileField = flowComponent("FileField", (props) => {
 		if (fileList && onChange) onChange(fileList);
 	};
 	return /* @__PURE__ */ jsx("div", {
-		...fieldProps,
-		className: clsx(fieldProps.className, FileField_module_default.fileField),
+		...skeletonProps,
+		className: clsx(wrapperProps.className, FileField_module_default.fileField),
 		children: /* @__PURE__ */ jsxs(FieldErrorContext.Provider, {
 			value: formValidationState.displayValidation,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","names":[],"sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"FileField\");\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      onChange(fileList);\n    }\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.fileField)}\n    >\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={fieldPropsContext}>\n            <div\n              data-readonly={isReadOnly}\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n            >\n              <FileInput\n                ref={inputRef}\n                isReadOnly={isReadOnly}\n                onChange={isReadOnly ? undefined : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,KACA,YACA,WACA,YACA,oBACA,UACA,YACA,GAAG,mBACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,sBAAsB,uBAAuB;EACjD,OAAO,KAAA;EACP;EACA;CACF,CAAC;CAED,kBAAkB,EAAE,mBAAmB,GAAG,qBAAqB,QAAQ;CAEvE,MAAM,aAAa;EACjB,GAAG;EACH,gBAAgB,oBAAoB,kBAAkB;EACtD,OAAO,KAAA;CACT;CAEA,MAAM,gBAA0C,aAAa;EAC3D,IAAI,YAAY,UACd,SAAS,QAAQ;CAErB;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,yBAAO,SAAS;EAEtD,UAAA,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO,oBAAoB;GAAvD,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KACE,iBAAe;KACf,iBAAe,CAAC,CAAC,cAAc,KAAA;KAC/B,gBACE,oBAAoB,kBAAkB,aAAa,KAAA;KAGrD,UAAA,oBAAC,WAAD;MACE,KAAK;MACO;MACZ,UAAU,aAAa,KAAA,IAAY;MACvB;MACZ,GAAI;MAEH;KACQ,CAAA;IACR,CAAA;GACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACS;;CACzB,CAAA;AAET,CAAC"}
+{"version":3,"file":"FileField.mjs","names":["styles"],"sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\" | \"aria-describedby\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"FileField\");\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-describedby\": controlProps[\"aria-describedby\"],\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      onChange(fileList);\n    }\n  };\n\n  return (\n    <div\n      {...skeletonProps}\n      className={clsx(wrapperProps.className, styles.fileField)}\n    >\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={fieldPropsContext}>\n            <div\n              data-readonly={isReadOnly}\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n            >\n              <FileInput\n                ref={inputRef}\n                isReadOnly={isReadOnly}\n                onChange={isReadOnly ? undefined : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,KACA,YACA,WACA,YACA,oBACA,UACA,YACA,GAAG,mBACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,sBAAsB,uBAAuB;EACjD,OAAO,KAAA;EACP;EACA;CACF,CAAC;CAED,kBAAkB,EAAE,mBAAmB,GAAG,qBAAqB,QAAQ;CAEvE,MAAM,aAAa;EACjB,GAAG;EACH,oBAAoB,aAAa;EACjC,gBAAgB,oBAAoB,kBAAkB;EACtD,OAAO,KAAA;CACT;CAEA,MAAM,gBAA0C,aAAa;EAC3D,IAAI,YAAY,UACd,SAAS,QAAQ;CAErB;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,aAAa,WAAWA,yBAAO,SAAS;EAExD,UAAA,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO,oBAAoB;GAAvD,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KACE,iBAAe;KACf,iBAAe,CAAC,CAAC,cAAc,KAAA;KAC/B,gBACE,oBAAoB,kBAAkB,aAAa,KAAA;KAGrD,UAAA,oBAAC,WAAD;MACE,KAAK;MACO;MACZ,UAAU,aAAa,KAAA,IAAY;MACvB;MACZ,GAAI;MAEH;KACQ,CAAA;IACR,CAAA;GACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACS;;CACzB,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs

@@ -5,8 +5,8 @@ import FileInput_module_default from "./FileInput.module.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
-import * as Aria from "react-aria-components";
 import { useVisuallyHidden } from "react-aria";
+import * as Aria from "react-aria-components";
 //#region src/components/FileField/components/FileInput.tsx
 /** @internal */
 var FileInput = (props) => {
@@ -38,6 +38,7 @@ var FileInput = (props) => {
 			...restInputProps,
 			...visuallyHiddenProps,
 			type: "file",
+			disabled: isDisabled,
 			ref: inputRef,
 			onChange: handleChange,
 			onClick: (event) => event.stopPropagation()

package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.mjs","names":[],"sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n  isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n    props;\n  const inputRef = useObjectRef(ref);\n  const { visuallyHiddenProps } = useVisuallyHidden();\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n      isReadOnly,\n    },\n    FieldDescription: { className: styles.fieldDescription },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children}\n      <Aria.Input\n        {...restInputProps}\n        {...visuallyHiddenProps}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n        onClick={(event) => event.stopPropagation()}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,YAAY,UAAU,YAAY,KAAK,GAAG,mBAC1D;CACF,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,oBAAoB;EACxB,IAAI,SAAS,SAAS,OAAO;GAC3B,SAAS,QAAQ,QAAQ;GACzB,WAAW,IAAI;EACjB;EACA,SAAS,SAAS,MAAM;CAC1B;CAEA,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,MAAM,OAAO,KAAK;CAC/B;CAEA,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS;GACT,WAAW,yBAAO;GAClB;GACA;EACF;EACA,kBAAkB,EAAE,WAAW,yBAAO,iBAAiB;CACzD;CAEA,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,oBAAC,KAAK,OAAN;GACE,GAAI;GACJ,GAAI;GACJ,MAAK;GACL,KAAK;GACL,UAAU;GACV,UAAU,UAAU,MAAM,gBAAgB;EAC3C,CAAA,CACmB;;AAE1B"}
+{"version":3,"file":"FileInput.mjs","names":["styles"],"sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n  isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n    props;\n  const inputRef = useObjectRef(ref);\n  const { visuallyHiddenProps } = useVisuallyHidden();\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n      isReadOnly,\n    },\n    FieldDescription: { className: styles.fieldDescription },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children}\n      <Aria.Input\n        {...restInputProps}\n        {...visuallyHiddenProps}\n        type=\"file\"\n        disabled={isDisabled}\n        ref={inputRef}\n        onChange={handleChange}\n        onClick={(event) => event.stopPropagation()}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,YAAY,UAAU,YAAY,KAAK,GAAG,mBAC1D;CACF,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,oBAAoB;EACxB,IAAI,SAAS,SAAS,OAAO;GAC3B,SAAS,QAAQ,QAAQ;GACzB,WAAW,IAAI;EACjB;EACA,SAAS,SAAS,MAAM;CAC1B;CAEA,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,MAAM,OAAO,KAAK;CAC/B;CAEA,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS;GACT,WAAWA,yBAAO;GAClB;GACA;EACF;EACA,kBAAkB,EAAE,WAAWA,yBAAO,iBAAiB;CACzD;CAEA,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,oBAAC,KAAK,OAAN;GACE,GAAI;GACJ,GAAI;GACJ,MAAK;GACL,UAAU;GACV,KAAK;GACL,UAAU;GACV,UAAU,UAAU,MAAM,gBAAgB;EAC3C,CAAA,CACmB;;AAE1B"}

package/dist/js/packages/components/src/components/FileField/components/FileInput.module.mjs

@@ -5,7 +5,9 @@ var trigger = "flow--file-field--trigger";
 var fieldDescription = "flow--file-field--field-description";
 var FileInput_module_default = {
 	trigger,
-	fieldDescription
+	fieldDescription,
+	"skeleton-surface-shimmer": "flow--file-field--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--file-field--skeleton-text-shimmer"
 };
 //#endregion
 export { FileInput_module_default as default, fieldDescription, trigger };

package/dist/js/packages/components/src/components/FileField/components/FileInput.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.module.mjs","names":[],"sources":["../../../../../../../../src/components/FileField/components/FileInput.module.scss"],"sourcesContent":[".trigger {\n  order: 2;\n\n  &[data-disabled=\"true\"] ~ .fieldDescription {\n    color: var(--label--color--disabled);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"FileInput.module.mjs","names":[],"sources":["../../../../../../../../src/components/FileField/components/FileInput.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.trigger {\n  order: 2;\n\n  &[data-disabled=\"true\"] ~ .fieldDescription {\n    color: var(--label--color--disabled);\n  }\n\n  /* Skeleton: the button is the control of the field */\n  @include formControl.formSkeleton(var(--button--corner-radius));\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.mjs","names":[],"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\n    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 and bottom of the element. Takes precedence over `padding`. */\n  paddingBlock?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left and right of the element. Takes precedence over `padding`. */\n  paddingInline?: \"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\ntype FlexSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nconst sizeVariable = (size: FlexSize | undefined) =>\n  size && `var(--size-px--${size})`;\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    paddingBlock,\n    paddingInline,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const columnGapSize = columnGap ?? gap;\n  const rowGapSize = rowGap ?? gap;\n  const paddingTopSize = paddingTop ?? paddingBlock ?? padding;\n  const paddingBottomSize = paddingBottom ?? paddingBlock ?? padding;\n  const paddingLeftSize = paddingLeft ?? paddingInline ?? padding;\n  const paddingRightSize = paddingRight ?? paddingInline ?? padding;\n\n  const rootClassName = clsx(\n    styles.flex,\n    align && styles.align,\n    justify && styles.justify,\n    grow && styles.grow,\n    columnGapSize && styles[\"column-gap\"],\n    rowGapSize && styles[\"row-gap\"],\n    paddingTopSize && styles[\"padding-top\"],\n    paddingBottomSize && styles[\"padding-bottom\"],\n    paddingLeftSize && styles[\"padding-left\"],\n    paddingRightSize && styles[\"padding-right\"],\n    className,\n  );\n\n  const style: CSSProperties = {\n    \"--flex--direction\": direction,\n    \"--flex--wrap\": wrap,\n    \"--flex--align\":\n      align === \"end\" ? \"flex-end\" : align === \"start\" ? \"flex-start\" : align,\n    \"--flex--justify\": justify,\n    \"--flex--column-gap\": sizeVariable(columnGapSize),\n    \"--flex--row-gap\": sizeVariable(rowGapSize),\n    \"--flex--padding-top\": sizeVariable(paddingTopSize),\n    \"--flex--padding-bottom\": sizeVariable(paddingBottomSize),\n    \"--flex--padding-left\": sizeVariable(paddingLeftSize),\n    \"--flex--padding-right\": sizeVariable(paddingRightSize),\n  };\n\n  const Element = elementType;\n\n  return (\n    <Element {...restProps} className={rootClassName} style={style}>\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"mappings":";;;;;;AA2DA,IAAM,gBAAgB,SACpB,QAAQ,kBAAkB,KAAK;;AAGjC,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,UACA,WACA,YAAY,OACZ,OACA,SACA,KACA,WACA,QACA,MACA,OAAO,UACP,SACA,cACA,eACA,YACA,eACA,aACA,cACA,cAAc,OACd,GAAG,cACD;CAEJ,MAAM,gBAAgB,aAAa;CACnC,MAAM,aAAa,UAAU;CAC7B,MAAM,iBAAiB,cAAc,gBAAgB;CACrD,MAAM,oBAAoB,iBAAiB,gBAAgB;CAC3D,MAAM,kBAAkB,eAAe,iBAAiB;CACxD,MAAM,mBAAmB,gBAAgB,iBAAiB;CAE1D,MAAM,gBAAgB,KACpB,oBAAO,MACP,SAAS,oBAAO,OAChB,WAAW,oBAAO,SAClB,QAAQ,oBAAO,MACf,iBAAiB,oBAAO,eACxB,cAAc,oBAAO,YACrB,kBAAkB,oBAAO,gBACzB,qBAAqB,oBAAO,mBAC5B,mBAAmB,oBAAO,iBAC1B,oBAAoB,oBAAO,kBAC3B,SACF;CAEA,MAAM,QAAuB;EAC3B,qBAAqB;EACrB,gBAAgB;EAChB,iBACE,UAAU,QAAQ,aAAa,UAAU,UAAU,eAAe;EACpE,mBAAmB;EACnB,sBAAsB,aAAa,aAAa;EAChD,mBAAmB,aAAa,UAAU;EAC1C,uBAAuB,aAAa,cAAc;EAClD,0BAA0B,aAAa,iBAAiB;EACxD,wBAAwB,aAAa,eAAe;EACpD,yBAAyB,aAAa,gBAAgB;CACxD;CAIA,OACE,oBAAC,aAAD;EAAS,GAAI;EAAW,WAAW;EAAsB;EACtD;CACM,CAAA;AAEb"}
+{"version":3,"file":"Flex.mjs","names":["styles","Element"],"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\n    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 and bottom of the element. Takes precedence over `padding`. */\n  paddingBlock?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left and right of the element. Takes precedence over `padding`. */\n  paddingInline?: \"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\ntype FlexSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nconst sizeVariable = (size: FlexSize | undefined) =>\n  size && `var(--size-px--${size})`;\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    paddingBlock,\n    paddingInline,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const columnGapSize = columnGap ?? gap;\n  const rowGapSize = rowGap ?? gap;\n  const paddingTopSize = paddingTop ?? paddingBlock ?? padding;\n  const paddingBottomSize = paddingBottom ?? paddingBlock ?? padding;\n  const paddingLeftSize = paddingLeft ?? paddingInline ?? padding;\n  const paddingRightSize = paddingRight ?? paddingInline ?? padding;\n\n  const rootClassName = clsx(\n    styles.flex,\n    align && styles.align,\n    justify && styles.justify,\n    grow && styles.grow,\n    columnGapSize && styles[\"column-gap\"],\n    rowGapSize && styles[\"row-gap\"],\n    paddingTopSize && styles[\"padding-top\"],\n    paddingBottomSize && styles[\"padding-bottom\"],\n    paddingLeftSize && styles[\"padding-left\"],\n    paddingRightSize && styles[\"padding-right\"],\n    className,\n  );\n\n  const style: CSSProperties = {\n    \"--flex--direction\": direction,\n    \"--flex--wrap\": wrap,\n    \"--flex--align\":\n      align === \"end\" ? \"flex-end\" : align === \"start\" ? \"flex-start\" : align,\n    \"--flex--justify\": justify,\n    \"--flex--column-gap\": sizeVariable(columnGapSize),\n    \"--flex--row-gap\": sizeVariable(rowGapSize),\n    \"--flex--padding-top\": sizeVariable(paddingTopSize),\n    \"--flex--padding-bottom\": sizeVariable(paddingBottomSize),\n    \"--flex--padding-left\": sizeVariable(paddingLeftSize),\n    \"--flex--padding-right\": sizeVariable(paddingRightSize),\n  };\n\n  const Element = elementType;\n\n  return (\n    <Element {...restProps} className={rootClassName} style={style}>\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"mappings":";;;;;;AA2DA,IAAM,gBAAgB,SACpB,QAAQ,kBAAkB,KAAK;;AAGjC,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,UACA,WACA,YAAY,OACZ,OACA,SACA,KACA,WACA,QACA,MACA,OAAO,UACP,SACA,cACA,eACA,YACA,eACA,aACA,cACA,cAAc,OACd,GAAG,cACD;CAEJ,MAAM,gBAAgB,aAAa;CACnC,MAAM,aAAa,UAAU;CAC7B,MAAM,iBAAiB,cAAc,gBAAgB;CACrD,MAAM,oBAAoB,iBAAiB,gBAAgB;CAC3D,MAAM,kBAAkB,eAAe,iBAAiB;CACxD,MAAM,mBAAmB,gBAAgB,iBAAiB;CAE1D,MAAM,gBAAgB,KACpBA,oBAAO,MACP,SAASA,oBAAO,OAChB,WAAWA,oBAAO,SAClB,QAAQA,oBAAO,MACf,iBAAiBA,oBAAO,eACxB,cAAcA,oBAAO,YACrB,kBAAkBA,oBAAO,gBACzB,qBAAqBA,oBAAO,mBAC5B,mBAAmBA,oBAAO,iBAC1B,oBAAoBA,oBAAO,kBAC3B,SACF;CAEA,MAAM,QAAuB;EAC3B,qBAAqB;EACrB,gBAAgB;EAChB,iBACE,UAAU,QAAQ,aAAa,UAAU,UAAU,eAAe;EACpE,mBAAmB;EACnB,sBAAsB,aAAa,aAAa;EAChD,mBAAmB,aAAa,UAAU;EAC1C,uBAAuB,aAAa,cAAc;EAClD,0BAA0B,aAAa,iBAAiB;EACxD,wBAAwB,aAAa,eAAe;EACpD,yBAAyB,aAAa,gBAAgB;CACxD;CAIA,OACE,oBAACC,aAAD;EAAS,GAAI;EAAW,WAAW;EAAsB;EACtD;CACM,CAAA;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","names":[],"sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport SectionHeader from \"@/components/Section/components/SectionHeader/SectionHeader\";\n\nexport interface HeaderProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"header\" | \"span\">,\n    FlowComponentProps<HTMLDivElement | HTMLHeadElement | HTMLSpanElement> {\n  /** @internal */\n  renderSectionHeader?: boolean;\n}\n\n/** @flr-generate all */\nexport const Header = flowComponent(\n  \"Header\",\n  (props) => {\n    const {\n      children,\n      ref,\n      elementType = \"header\",\n      renderSectionHeader,\n      className,\n      ...rest\n    } = props;\n\n    if (renderSectionHeader) {\n      return (\n        <SectionHeader ref={ref as never} className={className}>\n          {children}\n        </SectionHeader>\n      );\n    }\n\n    const Element = elementType;\n\n    return (\n      <Element {...rest} className={className} ref={ref as never}>\n        {children}\n      </Element>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Header;\n"],"mappings":";;;;;;;AAgBA,IAAa,SAAS,cACpB,WACC,UAAU;CACT,MAAM,EACJ,UACA,KACA,cAAc,UACd,qBACA,WACA,GAAG,SACD;CAEJ,IAAI,qBACF,OACE,oBAAC,eAAD;EAAoB;EAAyB;EAC1C;CACY,CAAA;CAMnB,OACE,oBAAC,aAAD;EAAS,GAAI;EAAiB;EAAgB;EAC3C;CACM,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Header.mjs","names":["Element"],"sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport SectionHeader from \"@/components/Section/components/SectionHeader/SectionHeader\";\n\nexport interface HeaderProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"header\" | \"span\">,\n    FlowComponentProps<HTMLDivElement | HTMLHeadElement | HTMLSpanElement> {\n  /** @internal */\n  renderSectionHeader?: boolean;\n}\n\n/** @flr-generate all */\nexport const Header = flowComponent(\n  \"Header\",\n  (props) => {\n    const {\n      children,\n      ref,\n      elementType = \"header\",\n      renderSectionHeader,\n      className,\n      ...rest\n    } = props;\n\n    if (renderSectionHeader) {\n      return (\n        <SectionHeader ref={ref as never} className={className}>\n          {children}\n        </SectionHeader>\n      );\n    }\n\n    const Element = elementType;\n\n    return (\n      <Element {...rest} className={className} ref={ref as never}>\n        {children}\n      </Element>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Header;\n"],"mappings":";;;;;;;AAgBA,IAAa,SAAS,cACpB,WACC,UAAU;CACT,MAAM,EACJ,UACA,KACA,cAAc,UACd,qBACA,WACA,GAAG,SACD;CAEJ,IAAI,qBACF,OACE,oBAAC,eAAD;EAAoB;EAAyB;EAC1C;CACY,CAAA;CAMnB,OACE,oBAACA,aAAD;EAAS,GAAI;EAAiB;EAAgB;EAC3C;CACM,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { containsTextChild } from "../../lib/react/remote.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
 import { Text } from "../Text/Text.mjs";
 import HeaderNavigation_module_default from "./HeaderNavigation.module.mjs";
@@ -12,20 +13,28 @@ import { jsx } from "react/jsx-runtime";
 var HeaderNavigation = (props) => {
 	const { children, className, color = "default", ...rest } = props;
 	const rootClassName = clsx(HeaderNavigation_module_default.headerNavigation, isAlphaColor(color) && HeaderNavigation_module_default[color], className);
+	const buttonPropsContext = {
+		className: HeaderNavigation_module_default.button,
+		color: isAlphaColor(color) ? color : "secondary",
+		variant: "plain"
+	};
 	const propsContext = {
 		Link: {
 			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item }),
 			className: HeaderNavigation_module_default.link,
 			unstyled: true,
-			children: dynamic((props) => /* @__PURE__ */ jsx(Text, {
+			/**
+			* `Text` clears the props context, so a link combined with a button must
+			* not get it — the button would lose the context of `Link`.
+			*/
+			children: dynamic((props) => containsTextChild(props.children) ? /* @__PURE__ */ jsx(Text, {
 				emulateBoldWidth: true,
 				children: props.children
-			}))
+			}) : props.children),
+			Button: buttonPropsContext
 		},
 		Button: {
-			className: HeaderNavigation_module_default.button,
-			color: isAlphaColor(color) ? color : "secondary",
-			variant: "plain",
+			...buttonPropsContext,
 			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item })
 		}
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n  /** The color of the header navigation. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.headerNavigation,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((props) => (\n        <Text emulateBoldWidth>{props.children}</Text>\n      )),\n    },\n    Button: {\n      className: styles.button,\n      color: isAlphaColor(color) ? color : \"secondary\",\n      variant: \"plain\",\n      wrapWith: <li className={styles.item} />,\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest}>\n      <ul className={styles.list}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n    </nav>\n  );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;GACvC,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD;GAAI,WAAW,gCAAO;GACpB,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA;CACD,CAAA;AAET"}
+{"version":3,"file":"HeaderNavigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n  /** The color of the header navigation. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.headerNavigation,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const buttonPropsContext = {\n    className: styles.button,\n    color: isAlphaColor(color) ? color : \"secondary\",\n    variant: \"plain\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      /**\n       * `Text` clears the props context, so a link combined with a button must\n       * not get it — the button would lose the context of `Link`.\n       */\n      children: dynamic((props) =>\n        containsTextChild(props.children) ? (\n          <Text emulateBoldWidth>{props.children}</Text>\n        ) : (\n          props.children\n        ),\n      ),\n      Button: buttonPropsContext,\n    },\n    Button: {\n      ...buttonPropsContext,\n      wrapWith: <li className={styles.item} />,\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest}>\n      <ul className={styles.list}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n    </nav>\n  );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpBA,gCAAO,kBACP,aAAa,KAAK,KAAKA,gCAAO,QAC9B,SACF;CAEA,MAAM,qBAAqB;EACzB,WAAWA,gCAAO;EAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;EACrC,SAAS;CACX;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAI,WAAWA,gCAAO,KAAO,CAAA;GACvC,WAAWA,gCAAO;GAClB,UAAU;;;;;GAKV,UAAU,SAAS,UACjB,kBAAkB,MAAM,QAAQ,IAC9B,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,IAE7C,MAAM,QAEV;GACA,QAAQ;EACV;EACA,QAAQ;GACN,GAAG;GACH,UAAU,oBAAC,MAAD,EAAI,WAAWA,gCAAO,KAAO,CAAA;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD;GAAI,WAAWA,gCAAO;GACpB,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA;CACD,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n  .list {\n    display: flex;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: var(--header-navigation--spacing);\n  }\n\n  .item {\n    list-style: none;\n  }\n\n  .link {\n    padding: var(--header-navigation--padding);\n    border-radius: var(--header-navigation--corner-radius);\n    color: var(--header-navigation--color);\n    position: relative;\n\n    @include focus.focus;\n\n    &:hover:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--hover);\n    }\n\n    &[data-pressed]:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--pressed);\n    }\n\n    &[aria-current] {\n      font-weight: var(--header-navigation--font-weight-current);\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        inset-inline: 0;\n        background-color: var(--header-navigation--color);\n        height: var(--header-navigation--underline-width-current);\n      }\n    }\n  }\n\n  .button {\n    color: var(--header-navigation--color);\n    border-radius: var(--header-navigation--corner-radius-round);\n\n    &:hover,\n    &[data-pressed] {\n      color: var(--header-navigation--color);\n    }\n  }\n\n  /* Color */\n\n  @mixin color($color) {\n    &.#{$color} {\n      .link,\n      .button {\n        color: var(--header-navigation--color-#{$color});\n\n        &:hover:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--hover\n          );\n        }\n\n        &[data-pressed]:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--pressed\n          );\n        }\n\n        &[aria-current] {\n          &::after {\n            background-color: var(--header-navigation--color-#{$color});\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}
+{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n  .list {\n    display: flex;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: var(--header-navigation--spacing);\n  }\n\n  .item {\n    list-style: none;\n  }\n\n  .link {\n    padding: var(--header-navigation--padding);\n    border-radius: var(--header-navigation--corner-radius);\n    color: var(--header-navigation--color);\n    position: relative;\n\n    @include focus.focus;\n\n    /* Combined with a Button, the Button carries the look */\n    &:has(> .button) {\n      display: block;\n      padding: 0;\n      border-radius: var(--header-navigation--corner-radius-round);\n    }\n  }\n\n  .link:not(:has(> .button)) {\n    &:hover:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--hover);\n    }\n\n    &[data-pressed]:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--pressed);\n    }\n\n    &[aria-current] {\n      font-weight: var(--header-navigation--font-weight-current);\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        inset-inline: 0;\n        background-color: var(--header-navigation--color);\n        height: var(--header-navigation--underline-width-current);\n      }\n    }\n  }\n\n  .button {\n    color: var(--header-navigation--color);\n    border-radius: var(--header-navigation--corner-radius-round);\n\n    &:hover,\n    &[data-pressed] {\n      color: var(--header-navigation--color);\n    }\n  }\n\n  /* Color */\n\n  @mixin color($color) {\n    &.#{$color} {\n      .link,\n      .button {\n        color: var(--header-navigation--color-#{$color});\n      }\n\n      .link:not(:has(> .button)),\n      .button {\n        &:hover:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--hover\n          );\n        }\n\n        &[data-pressed]:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--pressed\n          );\n        }\n\n        &[aria-current] {\n          &::after {\n            background-color: var(--header-navigation--color-#{$color});\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}