@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/form/FormField.client.js

@@ -5,9 +5,12 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { create } from "../../helpers/bem.js";
 import styles from "./Form.module.scss.js";
+import { Autocomplete } from "../autocomplete/Autocomplete.js";
+import { CheckboxGroup } from "../checkbox-group/CheckboxGroup.js";
 import { Rating } from "../rating/Rating.js";
 import { DynamicList } from "../dynamic-list/DynamicList.js";
 import { GridRow } from "../grid/GridRow.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
 import { DatePicker } from "../datePicker/DatePicker.js";
 import { Input } from "../input/Input.js";
 import { Select } from "../select/Select.js";
@@ -17,7 +20,7 @@ const bem = create(styles, "FormField");
 function FormFieldClient({
   fieldType,
   visible,
-  variant,
+  color,
   messagesFields,
   onChange,
   onValidate,
@@ -36,7 +39,7 @@ function FormFieldClient({
           Switch,
           {
             priority: true,
-            color: variant,
+            color,
             ...props,
             checked: typeof (props == null ? void 0 : props.value) === "boolean" ? Boolean(props == null ? void 0 : props.value) : props.checked,
             onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
@@ -49,6 +52,7 @@ function FormFieldClient({
           Slider,
           {
             priority: true,
+            color,
             ...props,
             onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value == null ? void 0 : value.toString()), "onChange")
           }
@@ -60,8 +64,12 @@ function FormFieldClient({
           Select,
           {
             priority: true,
+            color,
             ...props,
-            onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value ?? void 0), "onChange")
+            onChange: (
+              /* istanbul ignore next */
+              /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value ?? void 0), "onChange")
+            )
           }
         )
       );
@@ -71,6 +79,7 @@ function FormFieldClient({
           Input,
           {
             priority: true,
+            color,
             errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((e) => onChange == null ? void 0 : onChange(props, e.target.value), "onChange"),
@@ -84,12 +93,16 @@ function FormFieldClient({
           DatePicker,
           {
             priority: true,
+            color,
             ...props,
             translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((value) => onChange == null ? void 0 : onChange(
               props,
-              typeof value === "object" ? value == null ? void 0 : value.format("YYYY-MM-DDTHH:mm:ssZ") : value
+              typeof value === "object" ? value == null ? void 0 : value.format("YYYY-MM-DDTHH:mm:ssZ") : (
+                /* istanbul ignore next */
+                value
+              )
             ), "onChange")
           }
         )
@@ -101,6 +114,7 @@ function FormFieldClient({
           DynamicList,
           {
             priority: true,
+            color,
             ...p,
             value: p == null ? void 0 : p.value,
             fields: (_c = p == null ? void 0 : p.fields) == null ? void 0 : _c.map((field) => ({
@@ -117,6 +131,7 @@ function FormFieldClient({
           Rating,
           {
             priority: true,
+            color,
             ...props,
             errorTranslations: (_d = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _d.input,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
@@ -127,6 +142,46 @@ function FormFieldClient({
           }
         )
       );
+    case "checkbox":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            priority: true,
+            color,
+            ...props,
+            checked: typeof (props == null ? void 0 : props.value) === "boolean" ? Boolean(props == null ? void 0 : props.value) : props.checked,
+            onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
+          }
+        )
+      );
+    case "checkbox-group":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          CheckboxGroup,
+          {
+            priority: true,
+            color,
+            ...props,
+            values: Array.isArray(props == null ? void 0 : props.value) ? props.value : props.values,
+            onChange: /* @__PURE__ */ __name((next) => onChange == null ? void 0 : onChange(props, next), "onChange")
+          }
+        )
+      );
+    case "autocomplete":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            priority: true,
+            color,
+            ...props,
+            value: typeof (props == null ? void 0 : props.value) === "string" ? props.value : props.value,
+            onChange: /* @__PURE__ */ __name(({ query }) => onChange == null ? void 0 : onChange(props, query), "onChange"),
+            onSelect: /* @__PURE__ */ __name((item) => onChange == null ? void 0 : onChange(props, item.value), "onSelect")
+          }
+        )
+      );
     default:
       return null;
   }

package/dist/components/form/FormField.js

@@ -5,7 +5,10 @@ import FormFieldServer from "./FormField.server.js";
 const FormField = createIsland({
   name: "FormField",
   Server: FormFieldServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./FormField.lazy.js"), "loadLazy")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./FormField.lazy.js"), "loadLazy")
+  )
 });
 FormField.displayName = "FormField";
 export {

package/dist/components/form/FormField.server.js

@@ -13,7 +13,7 @@ const bem = create(styles, "FormField");
 function FormFieldServer({
   fieldType,
   visible,
-  variant,
+  color,
   messagesFields,
   ...props
 }) {
@@ -25,18 +25,23 @@ function FormFieldServer({
   switch (fieldType) {
     case "switch":
       return renderFieldContainer(
-        /* @__PURE__ */ jsx(Switch, { color: variant, ...props })
+        /* @__PURE__ */ jsx(Switch, { color, ...props })
       );
     case "slider":
-      return renderFieldContainer(/* @__PURE__ */ jsx(Slider, { ...props }));
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(Slider, { color, ...props })
+      );
     case "select":
-      return renderFieldContainer(/* @__PURE__ */ jsx(Select, { ...props }));
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(Select, { color, ...props })
+      );
     case "input":
       return renderFieldContainer(
         /* @__PURE__ */ jsx(
           Input,
           {
             readOnly: true,
+            color,
             errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
             ...props
           }
@@ -48,6 +53,7 @@ function FormFieldServer({
           DatePicker,
           {
             readOnly: true,
+            color,
             ...props,
             translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date
           }

package/dist/components/form/FormResponse.js

@@ -17,7 +17,10 @@ const FormResponse = /* @__PURE__ */ __name(({
     return {
       id: key,
       title: key.charAt(0).toUpperCase() + key.slice(1),
-      desc: (messages == null ? void 0 : messages.errors) ? (_b = (_a = messages.errors) == null ? void 0 : _a[key]) == null ? void 0 : _b.join(", ") : "",
+      desc: (messages == null ? void 0 : messages.errors) ? (_b = (_a = messages.errors) == null ? void 0 : _a[key]) == null ? void 0 : _b.join(", ") : (
+        /* istanbul ignore next */
+        ""
+      ),
       className: bem("errors__item")
     };
   });
@@ -31,9 +34,9 @@ const FormResponse = /* @__PURE__ */ __name(({
         "aria-relevant": "all",
         className: bem("errors"),
         classNameDesc: bem("errors__desc"),
+        color: "error",
         items: listItems,
-        role: "alert",
-        variant: "error"
+        role: "alert"
       }
     )
   ] });

package/dist/components/grid/Grid.css

@@ -127,7 +127,7 @@
 .prokodo-Grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  padding: 1rem;
+  padding: var(--pk-grid-padding);
 }
 
 .prokodo-GridRow {

package/dist/components/grid/Grid.module.css

@@ -127,7 +127,7 @@
 .prokodo-Grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  padding: 1rem;
+  padding: var(--pk-grid-padding);
 }
 
 .prokodo-GridRow {

package/dist/components/headline/Headline.css

@@ -127,43 +127,37 @@
  */
 .prokodo-Headline {
   margin: 0;
-  /* Basale Farb-Varianten (ohne Gradients) */
-  /* Highlight-Grundlage */
+  /* Color variants (mapped to semantic design tokens) */
   /* Varianten mit Highlight (mit Gradients/Shadow) */
   /* Größen */
   /* Alignment */
 }
 .prokodo-Headline--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-Headline--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Headline--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Headline--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Headline--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Headline--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Headline--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Headline--white {
-  color: #fff;
+  color: var(--pk-palette-white);
 }
 .prokodo-Headline--black {
-  color: var(--color-black);
-}
-.prokodo-Headline--is-highlighted {
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: var(--pk-palette-black);
 }
 .prokodo-Headline--inherit--highlighted {
   background-image: var(--gradient-text-grey);
@@ -206,6 +200,12 @@
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(var(--elevation-1--text));
 }
+.prokodo-Headline--info--highlighted {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 .prokodo-Headline--xs {
   font-weight: 400;
   font-size: 1rem;

package/dist/components/headline/Headline.js

@@ -18,21 +18,23 @@ const Headline = /* @__PURE__ */ __name(({
   className,
   align,
   isRichtext = false,
-  variant = "inherit",
+  color = "inherit",
   children,
   ...remainingProps
 }) => {
-  const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(variant);
+  const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(color);
   const modifier = {
-    [variant]: !!variant,
+    [color]: !!color,
     "is-highlighted": isHighlighted,
-    highlighted: isHighlighted,
-    [`${variant}--highlighted`]: isHighlighted,
+    [`${color}--highlighted`]: isHighlighted,
     [size]: typeof size === "string" && !!size,
     [`${align}`]: !!align
   };
   const bemClass = bem(void 0, modifier, className);
-  const customStyle = typeof size === "number" ? { fontSize: `${size}em` } : {};
+  const customStyle = typeof size === "number" ? { fontSize: `${size}em` } : (
+    /* istanbul ignore next */
+    {}
+  );
   const ariaLabel = typeof children === "string" ? children : void 0;
   const baseProps = {
     id,
@@ -61,13 +63,16 @@ const Headline = /* @__PURE__ */ __name(({
         animated,
         animationProps,
         className: bem("headline", void 0, className),
+        color,
         id,
         itemProp: void 0,
         linkComponent: void 0,
         schema,
-        variant,
         ...remainingProps,
-        overrideParagraph: /* @__PURE__ */ __name((textContent) => renderHTag({ children: textContent }), "overrideParagraph"),
+        overrideParagraph: (
+          /* istanbul ignore next */
+          /* @__PURE__ */ __name((textContent) => renderHTag({ children: textContent }), "overrideParagraph")
+        ),
         children
       }
     ) });

package/dist/components/headline/Headline.module.css

@@ -127,43 +127,37 @@
  */
 .prokodo-Headline {
   margin: 0;
-  /* Basale Farb-Varianten (ohne Gradients) */
-  /* Highlight-Grundlage */
+  /* Color variants (mapped to semantic design tokens) */
   /* Varianten mit Highlight (mit Gradients/Shadow) */
   /* Größen */
   /* Alignment */
 }
 .prokodo-Headline--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-Headline--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Headline--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Headline--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Headline--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Headline--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Headline--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Headline--white {
-  color: #fff;
+  color: var(--pk-palette-white);
 }
 .prokodo-Headline--black {
-  color: var(--color-black);
-}
-.prokodo-Headline--is-highlighted {
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: var(--pk-palette-black);
 }
 .prokodo-Headline--inherit--highlighted {
   background-image: var(--gradient-text-grey);
@@ -206,6 +200,12 @@
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(var(--elevation-1--text));
 }
+.prokodo-Headline--info--highlighted {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 .prokodo-Headline--xs {
   font-weight: 400;
   font-size: 1rem;

package/dist/components/headline/Headline.module.scss.js

@@ -9,13 +9,13 @@ const styles = {
   "prokodo-Headline--error": "prokodo-Headline--error",
   "prokodo-Headline--white": "prokodo-Headline--white",
   "prokodo-Headline--black": "prokodo-Headline--black",
-  "prokodo-Headline--is-highlighted": "prokodo-Headline--is-highlighted",
   "prokodo-Headline--inherit--highlighted": "prokodo-Headline--inherit--highlighted",
   "prokodo-Headline--primary--highlighted": "prokodo-Headline--primary--highlighted",
   "prokodo-Headline--secondary--highlighted": "prokodo-Headline--secondary--highlighted",
   "prokodo-Headline--success--highlighted": "prokodo-Headline--success--highlighted",
   "prokodo-Headline--warning--highlighted": "prokodo-Headline--warning--highlighted",
   "prokodo-Headline--error--highlighted": "prokodo-Headline--error--highlighted",
+  "prokodo-Headline--info--highlighted": "prokodo-Headline--info--highlighted",
   "prokodo-Headline--xs": "prokodo-Headline--xs",
   "prokodo-Headline--sm": "prokodo-Headline--sm",
   "prokodo-Headline--md": "prokodo-Headline--md",

package/dist/components/headline/Headline.variants.js

@@ -2,7 +2,10 @@ const POSSIBLE_HIGHLIGHTS = [
   "inherit",
   "primary",
   "secondary",
-  "white"
+  "success",
+  "warning",
+  "error",
+  "info"
 ];
 export {
   POSSIBLE_HIGHLIGHTS

package/dist/components/icon/Icon.css

@@ -138,44 +138,44 @@
   --webkit-mask-position: center;
 }
 .prokodo-Icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--primary:hover {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--secondary:hover {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--info:hover {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--success:hover {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--warning:hover {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--error:hover {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--white {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .prokodo-Icon--white:hover {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }

package/dist/components/icon/Icon.js

@@ -8,7 +8,10 @@ import { isString } from "../../helpers/validations.js";
 import styles from "./Icon.module.scss.js";
 const bem = create(styles, "Icon");
 const getIconSize = /* @__PURE__ */ __name((s) => ({ xs: 15, sm: 20, md: 30, lg: 40, xl: 50 })[s] ?? s ?? 16, "getIconSize");
-const baseUrl = ENVIRONMENT !== "development" ? `https://cdn.jsdelivr.net/gh/prokodo-agency/ui@v${PROKODO_UI_VERSION}/assets/icons` : "/assets/icons";
+const baseUrl = ENVIRONMENT !== "development" ? `https://cdn.jsdelivr.net/gh/prokodo-agency/ui@v${PROKODO_UI_VERSION}/assets/icons` : (
+  /* istanbul ignore next */
+  "/assets/icons"
+);
 const iconUrl = /* @__PURE__ */ __name((n) => `${baseUrl}/${n.replace(/Icon$/, "").replace(/([a-z0-9])([A-Z])/g, "$1_$2").replace(/([a-zA-Z])([0-9])/g, "$1_$2").toLowerCase()}_icon.svg`, "iconUrl");
 const Icon = /* @__PURE__ */ __name(({
   name,
@@ -25,7 +28,10 @@ const Icon = /* @__PURE__ */ __name(({
   const mask = {
     width: sizePx,
     height: sizePx,
-    backgroundColor: Boolean(isCustomColor) ? color : "currentColor",
+    backgroundColor: (
+      /* istanbul ignore next */
+      Boolean(isCustomColor) ? color : "currentColor"
+    ),
     maskImage: `url("${url}")`,
     WebkitMaskImage: `url("${url}")`
   };

package/dist/components/icon/Icon.module.css

@@ -138,44 +138,44 @@
   --webkit-mask-position: center;
 }
 .prokodo-Icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--primary:hover {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--secondary:hover {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--info:hover {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--success:hover {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--warning:hover {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--error:hover {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--white {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .prokodo-Icon--white:hover {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }

package/dist/components/image/Image.client.js

@@ -25,10 +25,13 @@ function toPlainImgProps(p) {
   const rawSrc = rest.src;
   if (typeof rawSrc === "string") {
     src = rawSrc;
-  } else if (typeof rawSrc === "object" && rawSrc !== null && Object.prototype.hasOwnProperty.call(
-    rawSrc,
-    "src"
-  ) && typeof rawSrc.src === "string") {
+  } else if (
+    /* istanbul ignore next */
+    typeof rawSrc === "object" && rawSrc !== null && Object.prototype.hasOwnProperty.call(
+      rawSrc,
+      "src"
+    ) && typeof rawSrc.src === "string"
+  ) {
     const rs = rawSrc;
     ({ src } = rs);
   } else {
@@ -63,7 +66,8 @@ const ImageClient = /* @__PURE__ */ __name(({
       return /* @__PURE__ */ jsx(
         CustomImage,
         {
-          alt: alt ?? "",
+          alt: alt ?? /* istanbul ignore next */
+          "",
           className: bem("image", void 0, className),
           ...rawProps
         }

package/dist/components/image/Image.css

@@ -132,14 +132,15 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-Image__caption {
   position: absolute;
   width: 100%;
-  bottom: -1rem;
+  bottom: calc(-1 * var(--pk-space-lg));
   left: 0;
-  opacity: 0.5;
+  opacity: 0.6;
+  color: var(--pk-color-fg);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/image/Image.js

@@ -5,10 +5,16 @@ import ImageServer from "./Image.server.js";
 const Image = createIsland({
   name: "Image",
   Server: ImageServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Image.lazy.js"), "loadLazy"),
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Image.lazy.js"), "loadLazy")
+  ),
   // Treat Image as interactive so it always gets the client path
   // when needed, but markup is still valid for server-only fallback.
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   Image