@prokodo/ui 1.0.3 → 1.0.5

package/dist/components/datePicker/DatePicker.client.js

@@ -46,6 +46,7 @@ const DatePickerClient = /* @__PURE__ */ __name(({
   const [isOpen, setIsOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const [viewMode, setViewMode] = useState("days");
+  const [triggerRect, setTriggerRect] = useState(null);
   const viewModeRef = useRef("days");
   viewModeRef.current = viewMode;
   const swipeTouchStart = useRef(null);
@@ -100,7 +101,12 @@ const DatePickerClient = /* @__PURE__ */ __name(({
   useEffect(() => {
     if (!isOpen || isMobile) return;
     function handlePointerDown(e) {
-      if (rootRef.current && !rootRef.current.contains(e.target)) {
+      var _a;
+      const target = e.target;
+      const inRoot = (_a = rootRef.current) == null ? void 0 : _a.contains(target);
+      const dialogEl = document.getElementById(`${name}-dialog`);
+      const inDialog = dialogEl == null ? void 0 : dialogEl.contains(target);
+      if (!inRoot && !inDialog) {
         setIsOpen(false);
         setDraft(date);
       }
@@ -108,7 +114,23 @@ const DatePickerClient = /* @__PURE__ */ __name(({
     __name(handlePointerDown, "handlePointerDown");
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [isOpen, isMobile, date]);
+  }, [isOpen, isMobile, date, name]);
+  useEffect(() => {
+    if (!isOpen || isMobile || !rootRef.current) return;
+    function sync() {
+      const el = rootRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setTriggerRect({ top: r.bottom, left: r.left, width: r.width });
+    }
+    __name(sync, "sync");
+    document.addEventListener("scroll", sync, true);
+    window.addEventListener("resize", sync);
+    return () => {
+      document.removeEventListener("scroll", sync, true);
+      window.removeEventListener("resize", sync);
+    };
+  }, [isOpen, isMobile]);
   const validateDate = useCallback(
     (d) => {
       if (isNull(d)) {
@@ -143,6 +165,10 @@ const DatePickerClient = /* @__PURE__ */ __name(({
         setViewingMonth(date ?? dayjs());
         setDraft(date);
         setViewMode("days");
+        if (rootRef.current) {
+          const r = rootRef.current.getBoundingClientRect();
+          setTriggerRect({ top: r.bottom, left: r.left, width: r.width });
+        }
       }
       return !prev;
     });
@@ -218,6 +244,12 @@ const DatePickerClient = /* @__PURE__ */ __name(({
     },
     []
   );
+  const dialogStyle = !isMobile && triggerRect ? {
+    position: "fixed",
+    top: triggerRect.top + 8,
+    left: triggerRect.left,
+    zIndex: 1400
+  } : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -228,7 +260,8 @@ const DatePickerClient = /* @__PURE__ */ __name(({
         {
           ...rest,
           color,
-          dialogPortalTarget: isMobile ? document.body : null,
+          dialogPortalTarget: document.body,
+          dialogStyle,
           errorText: error,
           format: fmt,
           helperText,

package/dist/components/datePicker/DatePicker.css

@@ -199,7 +199,7 @@
   --pk-dp-trigger-label-float-fg: var(--pk-color-muted);
   --pk-dp-day-today-ring: var(--pk-color-muted);
 }
-html[data-theme="dark"] .prokodo-DatePicker--info, [data-theme="dark"] .prokodo-DatePicker--info, html[data-theme="dark"] .prokodo-DatePicker--inherit, [data-theme="dark"] .prokodo-DatePicker--inherit, html[data-theme="dark"] .prokodo-DatePicker--white, [data-theme="dark"] .prokodo-DatePicker--white {
+html[data-theme=dark] .prokodo-DatePicker--info, [data-theme=dark] .prokodo-DatePicker--info, html[data-theme=dark] .prokodo-DatePicker--inherit, [data-theme=dark] .prokodo-DatePicker--inherit, html[data-theme=dark] .prokodo-DatePicker--white, [data-theme=dark] .prokodo-DatePicker--white {
   --pk-dp-gradient-from: var(--pk-palette-grey-100);
   --pk-dp-gradient-to: var(--pk-palette-grey-200);
 }
@@ -280,7 +280,7 @@ html[data-theme="dark"] .prokodo-DatePicker--info, [data-theme="dark"] .prokodo-
   position: absolute;
   top: calc(100% + var(--pk-space-xs));
   left: 0;
-  z-index: 200;
+  z-index: var(--pk-z-popover, 1400);
   min-width: var(--pk-dp-dialog-min-width);
   width: -moz-max-content;
   width: max-content;
@@ -291,7 +291,7 @@ html[data-theme="dark"] .prokodo-DatePicker--info, [data-theme="dark"] .prokodo-
   padding: var(--pk-dp-dialog-padding);
   animation: dpDialogIn 180ms ease both;
 }
-html[data-theme="dark"] .prokodo-DatePicker__dialog, [data-theme="dark"] .prokodo-DatePicker__dialog, .pk-theme-dark .prokodo-DatePicker__dialog {
+html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-DatePicker__dialog, .pk-theme-dark .prokodo-DatePicker__dialog {
   --pk-dp-header-fg: var(--pk-palette-grey-50);
   --pk-dp-nav-fg: var(--pk-palette-grey-300);
   --pk-dp-nav-hover-bg: rgba(255, 255, 255, 0.10);
@@ -340,7 +340,7 @@ html[data-theme="dark"] .prokodo-DatePicker__dialog, [data-theme="dark"] .prokod
     display: block;
     position: fixed;
     inset: 0;
-    z-index: 199;
+    z-index: var(--pk-z-popover, 1400);
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);

package/dist/components/datePicker/DatePicker.module.css

@@ -199,7 +199,7 @@
   --pk-dp-trigger-label-float-fg: var(--pk-color-muted);
   --pk-dp-day-today-ring: var(--pk-color-muted);
 }
-html[data-theme="dark"] .prokodo-DatePicker--info, [data-theme="dark"] .prokodo-DatePicker--info, html[data-theme="dark"] .prokodo-DatePicker--inherit, [data-theme="dark"] .prokodo-DatePicker--inherit, html[data-theme="dark"] .prokodo-DatePicker--white, [data-theme="dark"] .prokodo-DatePicker--white {
+html[data-theme=dark] .prokodo-DatePicker--info, [data-theme=dark] .prokodo-DatePicker--info, html[data-theme=dark] .prokodo-DatePicker--inherit, [data-theme=dark] .prokodo-DatePicker--inherit, html[data-theme=dark] .prokodo-DatePicker--white, [data-theme=dark] .prokodo-DatePicker--white {
   --pk-dp-gradient-from: var(--pk-palette-grey-100);
   --pk-dp-gradient-to: var(--pk-palette-grey-200);
 }
@@ -280,7 +280,7 @@ html[data-theme="dark"] .prokodo-DatePicker--info, [data-theme="dark"] .prokodo-
   position: absolute;
   top: calc(100% + var(--pk-space-xs));
   left: 0;
-  z-index: 200;
+  z-index: var(--pk-z-popover, 1400);
   min-width: var(--pk-dp-dialog-min-width);
   width: -moz-max-content;
   width: max-content;
@@ -291,7 +291,7 @@ html[data-theme="dark"] .prokodo-DatePicker--info, [data-theme="dark"] .prokodo-
   padding: var(--pk-dp-dialog-padding);
   animation: dpDialogIn 180ms ease both;
 }
-html[data-theme="dark"] .prokodo-DatePicker__dialog, [data-theme="dark"] .prokodo-DatePicker__dialog, .pk-theme-dark .prokodo-DatePicker__dialog {
+html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-DatePicker__dialog, .pk-theme-dark .prokodo-DatePicker__dialog {
   --pk-dp-header-fg: var(--pk-palette-grey-50);
   --pk-dp-nav-fg: var(--pk-palette-grey-300);
   --pk-dp-nav-hover-bg: rgba(255, 255, 255, 0.10);
@@ -340,7 +340,7 @@ html[data-theme="dark"] .prokodo-DatePicker__dialog, [data-theme="dark"] .prokod
     display: block;
     position: fixed;
     inset: 0;
-    z-index: 199;
+    z-index: var(--pk-z-popover, 1400);
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);

package/dist/components/datePicker/DatePicker.module.scss.js

@@ -21,6 +21,7 @@ const styles = {
   "prokodo-DatePicker__trigger__icon": "prokodo-DatePicker__trigger__icon",
   "prokodo-DatePicker__dialog": "prokodo-DatePicker__dialog",
   dpDialogIn,
+  "pk-theme-dark": "pk-theme-dark",
   dpSlideUp,
   "prokodo-DatePicker__dialog__backdrop": "prokodo-DatePicker__dialog__backdrop",
   "prokodo-DatePicker__dialog__close": "prokodo-DatePicker__dialog__close",

package/dist/components/datePicker/DatePicker.view.js

@@ -52,7 +52,8 @@ function DatePickerView({
   viewMode,
   onViewModeChange,
   onMonthSelect,
-  onYearSelect
+  onYearSelect,
+  dialogStyle
 }) {
   const effectiveFormat = format ?? (withTime ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD");
   const displayValue = (selectedDate == null ? void 0 : selectedDate.format(effectiveFormat)) ?? "";
@@ -103,6 +104,7 @@ function DatePickerView({
           prevAriaLabel,
           prevIcon,
           selectedDate,
+          style: dialogStyle,
           timeLabel,
           todayLabel,
           viewingMonth,

package/dist/components/datePicker/DatePickerDialog.view.js

@@ -42,7 +42,8 @@ function DatePickerDialog({
   viewMode = "days",
   onViewModeChange,
   onMonthSelect,
-  onYearSelect
+  onYearSelect,
+  style
 }) {
   const calendarDays = buildCalendarGrid(viewingMonth, minDate, maxDate);
   const hours = buildHours();
@@ -63,6 +64,7 @@ function DatePickerDialog({
         "aria-modal": "true",
         id: `${name}-dialog`,
         role: "dialog",
+        style,
         className: [
           bem("dialog"),
           dialogColor ? bem(void 0, { [dialogColor]: true }) : ""

package/dist/components/dialog/Dialog.client.js

@@ -45,6 +45,14 @@ function DialogClient({
   useEffect(() => {
     if (open) openDialog();
   }, [open, openDialog]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     const handleKey = /* @__PURE__ */ __name((e) => {

package/dist/components/dialog/Dialog.css

@@ -150,6 +150,9 @@
   align-items: center;
   z-index: var(--pk-z-modal);
 }
+.prokodo-Dialog--is-visible {
+  display: flex;
+}
 .prokodo-Dialog__backdrop {
   display: none;
   position: fixed;
@@ -158,16 +161,11 @@
   align-items: center;
   z-index: var(--pk-z-modal);
   background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
-}
-.prokodo-Dialog__backdrop {
   animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
 .prokodo-Dialog__backdrop--is-visible {
   display: flex;
 }
-.prokodo-Dialog--is-visible {
-  display: flex;
-}
 .prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
   position: static;
   inset: auto;

package/dist/components/dialog/Dialog.module.css

@@ -150,6 +150,9 @@
   align-items: center;
   z-index: var(--pk-z-modal);
 }
+.prokodo-Dialog--is-visible {
+  display: flex;
+}
 .prokodo-Dialog__backdrop {
   display: none;
   position: fixed;
@@ -158,16 +161,11 @@
   align-items: center;
   z-index: var(--pk-z-modal);
   background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
-}
-.prokodo-Dialog__backdrop {
   animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
 .prokodo-Dialog__backdrop--is-visible {
   display: flex;
 }
-.prokodo-Dialog--is-visible {
-  display: flex;
-}
 .prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
   position: static;
   inset: auto;

package/dist/components/dialog/Dialog.module.scss.js

@@ -2,10 +2,10 @@ const Dialog_backdropFadeIn = "Dialog_backdropFadeIn";
 const Dialog_fadeIn = "Dialog_fadeIn";
 const styles = {
   "prokodo-Dialog": "prokodo-Dialog",
+  "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
   "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
   Dialog_backdropFadeIn,
   "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
-  "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
   "prokodo-Dialog__container": "prokodo-Dialog__container",
   Dialog_fadeIn,
   "prokodo-Dialog__container--fullScreen": "prokodo-Dialog__container--fullScreen",

package/dist/components/dialog/Dialog.view.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import { isNumber } from "../../helpers/validations.js";
 import styles from "./Dialog.module.scss.js";

package/dist/components/drawer/Drawer.js

@@ -11,6 +11,5 @@ const Drawer = createIsland({
   )
 });
 export {
-  Drawer,
-  Drawer as default
+  Drawer
 };

package/dist/components/dynamic-list/DynamicList.css

@@ -196,7 +196,7 @@
     line-height: 1.4;
   }
 }
-[data-theme="dark"] .prokodo-DynamicList__helperText, .pk-theme-dark .prokodo-DynamicList__helperText {
+[data-theme=dark] .prokodo-DynamicList__helperText, .pk-theme-dark .prokodo-DynamicList__helperText {
   color: var(--pk-palette-grey-400);
 }
 .prokodo-DynamicList__helperText__content {

package/dist/components/dynamic-list/DynamicList.module.css

@@ -196,7 +196,7 @@
     line-height: 1.4;
   }
 }
-[data-theme="dark"] .prokodo-DynamicList__helperText, .pk-theme-dark .prokodo-DynamicList__helperText {
+[data-theme=dark] .prokodo-DynamicList__helperText, .pk-theme-dark .prokodo-DynamicList__helperText {
   color: var(--pk-palette-grey-400);
 }
 .prokodo-DynamicList__helperText__content {

package/dist/components/dynamic-list/DynamicList.module.scss.js

@@ -8,6 +8,7 @@ const styles = {
   "prokodo-DynamicList__field--is-multi": "prokodo-DynamicList__field--is-multi",
   "prokodo-DynamicList__delete__button--is-multi": "prokodo-DynamicList__delete__button--is-multi",
   "prokodo-DynamicList__helperText": "prokodo-DynamicList__helperText",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-DynamicList__helperText__content": "prokodo-DynamicList__helperText__content",
   "prokodo-DynamicList__helperText__content--is-error": "prokodo-DynamicList__helperText__content--is-error"
 };

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

@@ -26,7 +26,7 @@ function FormFieldClient({
   onValidate,
   ...props
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const renderFieldContainer = useCallback(
     (children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }),
     []
@@ -66,6 +66,8 @@ function FormFieldClient({
             priority: true,
             color,
             ...props,
+            closeAriaLabel: props.closeAriaLabel ?? ((_a = messagesFields == null ? void 0 : messagesFields.select) == null ? void 0 : _a.closeAriaLabel),
+            doneLabel: props.doneLabel ?? ((_b = messagesFields == null ? void 0 : messagesFields.select) == null ? void 0 : _b.doneLabel),
             onChange: (
               /* istanbul ignore next */
               /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value ?? void 0), "onChange")
@@ -80,7 +82,7 @@ function FormFieldClient({
           {
             priority: true,
             color,
-            errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
+            errorTranslations: (_c = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _c.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"),
             ...props
@@ -95,7 +97,7 @@ function FormFieldClient({
             priority: true,
             color,
             ...props,
-            translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date,
+            translations: (_d = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _d.date,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((value) => onChange == null ? void 0 : onChange(
               props,
@@ -117,7 +119,7 @@ function FormFieldClient({
             color,
             ...p,
             value: p == null ? void 0 : p.value,
-            fields: (_c = p == null ? void 0 : p.fields) == null ? void 0 : _c.map((field) => ({
+            fields: (_e = p == null ? void 0 : p.fields) == null ? void 0 : _e.map((field) => ({
               ...field,
               onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(p, err), "onValidate")
             })),
@@ -133,7 +135,7 @@ function FormFieldClient({
             priority: true,
             color,
             ...props,
-            errorTranslations: (_d = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _d.input,
+            errorTranslations: (_f = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _f.input,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((e) => {
               var _a2;

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

@@ -44,10 +44,13 @@ function toPlainImgProps(p) {
     width,
     height
   };
-  if (Boolean(priority)) {
-    imgProps.loading = "eager";
-    imgProps.fetchPriority = "high";
+  if (!Boolean(priority)) {
+    imgProps.loading = "lazy";
   }
+  imgProps.decoding = "async";
+  imgProps["data-nimg"] = "1";
+  imgProps.style = { color: "transparent", ...imgProps.style };
+  imgProps["suppressHydrationWarning"] = true;
   return imgProps;
 }
 __name(toPlainImgProps, "toPlainImgProps");
@@ -63,13 +66,14 @@ const ImageClient = /* @__PURE__ */ __name(({
   const renderImage = /* @__PURE__ */ __name(() => {
     if (ctxImage !== void 0) {
       const CustomImage = ctxImage;
+      const ctxProps = { ...rawProps, suppressHydrationWarning: true };
       return /* @__PURE__ */ jsx(
         CustomImage,
         {
           alt: alt ?? /* istanbul ignore next */
           "",
           className: bem("image", void 0, className),
-          ...rawProps
+          ...ctxProps
         }
       );
     }

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

@@ -39,10 +39,13 @@ function toImgOnlyProps(p) {
     width,
     height
   };
-  if (Boolean(priority)) {
-    imgProps.loading = "eager";
-    imgProps.fetchPriority = "high";
+  if (!Boolean(priority)) {
+    imgProps.loading = "lazy";
   }
+  imgProps.decoding = "async";
+  imgProps["data-nimg"] = "1";
+  imgProps.style = { color: "transparent", ...imgProps.style };
+  imgProps["suppressHydrationWarning"] = true;
   return imgProps;
 }
 __name(toImgOnlyProps, "toImgOnlyProps");

package/dist/components/input/Input.css

@@ -181,7 +181,7 @@
   --pk-input-label-focused-fg: var(--pk-color-muted);
   --pk-input-border-focus: var(--pk-color-border);
 }
-html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input--info, .pk-theme-dark .prokodo-Input--info, html[data-theme="dark"] .prokodo-Input--inherit, [data-theme="dark"] .prokodo-Input--inherit, .pk-theme-dark .prokodo-Input--inherit, html[data-theme="dark"] .prokodo-Input--white, [data-theme="dark"] .prokodo-Input--white, .pk-theme-dark .prokodo-Input--white {
+html[data-theme=dark] .prokodo-Input--info, [data-theme=dark] .prokodo-Input--info, .pk-theme-dark .prokodo-Input--info, html[data-theme=dark] .prokodo-Input--inherit, [data-theme=dark] .prokodo-Input--inherit, .pk-theme-dark .prokodo-Input--inherit, html[data-theme=dark] .prokodo-Input--white, [data-theme=dark] .prokodo-Input--white, .pk-theme-dark .prokodo-Input--white {
   --pk-input-gradient-from: var(--pk-palette-grey-100);
   --pk-input-gradient-to: var(--pk-palette-grey-200);
 }
@@ -400,7 +400,7 @@ html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input
   pointer-events: none;
   z-index: 2;
 }
-[data-theme="dark"] .prokodo-Input__trailing, .pk-theme-dark .prokodo-Input__trailing {
+[data-theme=dark] .prokodo-Input__trailing, .pk-theme-dark .prokodo-Input__trailing {
   color: var(--pk-palette-grey-300);
 }
 .prokodo-Input__trailing--clickable {
@@ -472,7 +472,7 @@ html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input
 }
 .prokodo-Input__counter {
   padding-top: var(--pk-space-md);
-  color: var(--pk-palette-grey-600);
+  color: var(--pk-input-helper-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/input/Input.module.css

@@ -181,7 +181,7 @@
   --pk-input-label-focused-fg: var(--pk-color-muted);
   --pk-input-border-focus: var(--pk-color-border);
 }
-html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input--info, .pk-theme-dark .prokodo-Input--info, html[data-theme="dark"] .prokodo-Input--inherit, [data-theme="dark"] .prokodo-Input--inherit, .pk-theme-dark .prokodo-Input--inherit, html[data-theme="dark"] .prokodo-Input--white, [data-theme="dark"] .prokodo-Input--white, .pk-theme-dark .prokodo-Input--white {
+html[data-theme=dark] .prokodo-Input--info, [data-theme=dark] .prokodo-Input--info, .pk-theme-dark .prokodo-Input--info, html[data-theme=dark] .prokodo-Input--inherit, [data-theme=dark] .prokodo-Input--inherit, .pk-theme-dark .prokodo-Input--inherit, html[data-theme=dark] .prokodo-Input--white, [data-theme=dark] .prokodo-Input--white, .pk-theme-dark .prokodo-Input--white {
   --pk-input-gradient-from: var(--pk-palette-grey-100);
   --pk-input-gradient-to: var(--pk-palette-grey-200);
 }
@@ -400,7 +400,7 @@ html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input
   pointer-events: none;
   z-index: 2;
 }
-[data-theme="dark"] .prokodo-Input__trailing, .pk-theme-dark .prokodo-Input__trailing {
+[data-theme=dark] .prokodo-Input__trailing, .pk-theme-dark .prokodo-Input__trailing {
   color: var(--pk-palette-grey-300);
 }
 .prokodo-Input__trailing--clickable {
@@ -472,7 +472,7 @@ html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input
 }
 .prokodo-Input__counter {
   padding-top: var(--pk-space-md);
-  color: var(--pk-palette-grey-600);
+  color: var(--pk-input-helper-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/input/Input.module.scss.js

@@ -9,6 +9,7 @@ const styles = {
   "prokodo-Input--info": "prokodo-Input--info",
   "prokodo-Input--inherit": "prokodo-Input--inherit",
   "prokodo-Input--white": "prokodo-Input--white",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-Input__label": "prokodo-Input__label",
   "prokodo-Input__label--is-focused": "prokodo-Input__label--is-focused",
   "prokodo-Input__inner": "prokodo-Input__inner",

package/dist/components/input/Input.view.js

@@ -28,7 +28,7 @@ function InputView({
   inputClassName,
   hideCounter,
   rows,
-  hideLegend: _hideLegend,
+  hideLegend,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   minRows,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -76,14 +76,14 @@ function InputView({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: bem("field", void 0, fieldClassName), children: [
-        typeof label === "string" && /* @__PURE__ */ jsx(
+        !hideLegend && /* @__PURE__ */ jsx(
           "fieldset",
           {
             "aria-hidden": "true",
             className: bem("notch", {
               "is-focused": Boolean(isFocused) || hasValue
             }),
-            children: /* @__PURE__ */ jsx("legend", { className: bem("notchLegend"), children: /* @__PURE__ */ jsx("span", { children: label }) })
+            children: typeof label === "string" && /* @__PURE__ */ jsx("legend", { className: bem("notchLegend"), children: /* @__PURE__ */ jsx("span", { children: label }) })
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/components/label/Label.css

@@ -187,7 +187,7 @@
   -webkit-text-fill-color: transparent;
   color: var(--pk-label-gradient-from);
 }
-html[data-theme="dark"] .prokodo-Label__highlighted, [data-theme="dark"] .prokodo-Label__highlighted, .pk-theme-dark .prokodo-Label__highlighted {
+html[data-theme=dark] .prokodo-Label__highlighted, [data-theme=dark] .prokodo-Label__highlighted, .pk-theme-dark .prokodo-Label__highlighted {
   background: linear-gradient(to right, var(--pk-label-gradient-from), var(--pk-label-gradient-to));
   background-clip: text;
   -webkit-background-clip: text;

package/dist/components/label/Label.module.css

@@ -187,7 +187,7 @@
   -webkit-text-fill-color: transparent;
   color: var(--pk-label-gradient-from);
 }
-html[data-theme="dark"] .prokodo-Label__highlighted, [data-theme="dark"] .prokodo-Label__highlighted, .pk-theme-dark .prokodo-Label__highlighted {
+html[data-theme=dark] .prokodo-Label__highlighted, [data-theme=dark] .prokodo-Label__highlighted, .pk-theme-dark .prokodo-Label__highlighted {
   background: linear-gradient(to right, var(--pk-label-gradient-from), var(--pk-label-gradient-to));
   background-clip: text;
   -webkit-background-clip: text;

package/dist/components/label/Label.module.scss.js

@@ -9,6 +9,7 @@ const styles = {
   "prokodo-Label--inherit": "prokodo-Label--inherit",
   "prokodo-Label--white": "prokodo-Label--white",
   "prokodo-Label__highlighted": "prokodo-Label__highlighted",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-Label__highlighted--error": "prokodo-Label__highlighted--error"
 };
 export {

package/dist/components/list/List.css

@@ -211,9 +211,6 @@
   border-radius: 1000rem;
   background-color: var(--pk-color-surface-raised);
 }
-html[data-theme=dark] .prokodo-List__item__icon {
-  background-color: var(--pk-palette-grey-400);
-}
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;

package/dist/components/list/List.module.css

@@ -211,9 +211,6 @@
   border-radius: 1000rem;
   background-color: var(--pk-color-surface-raised);
 }
-html[data-theme=dark] .prokodo-List__item__icon {
-  background-color: var(--pk-palette-grey-400);
-}
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;

package/dist/components/loading/Loading.js

@@ -11,6 +11,5 @@ const Loading = createIsland({
   )
 });
 export {
-  Loading,
-  Loading as default
+  Loading
 };

package/dist/components/post-teaser/PostTeaser.view.js

@@ -145,6 +145,7 @@ function PostTeaserView(props) {
                       /* @__PURE__ */ jsx(
                         Image,
                         {
+                          fill: true,
                           ...imageMerged,
                           alt: (imageMerged == null ? void 0 : imageMerged.alt) ?? /* istanbul ignore next */
                           "",

package/dist/components/post-widget/PostWidget.view.js

@@ -170,7 +170,7 @@ function PostWidgetView({
                               ((_s = item.classes) == null ? void 0 : _s.article) ?? (classes == null ? void 0 : classes.listItemContent)
                             ),
                             children: [
-                              imgMerged && /* @__PURE__ */ jsx("header", { className: (_t = item.classes) == null ? void 0 : _t.header, children: /* @__PURE__ */ jsx(Link, { ...linkMerged, children: /* @__PURE__ */ jsx(Image, { ...imgMerged, itemProp: "image" }) }) }),
+                              imgMerged && /* @__PURE__ */ jsx("header", { className: (_t = item.classes) == null ? void 0 : _t.header, children: /* @__PURE__ */ jsx(Link, { ...linkMerged, children: /* @__PURE__ */ jsx(Image, { fill: true, ...imgMerged, itemProp: "image" }) }) }),
                               /* @__PURE__ */ jsxs(
                                 "div",
                                 {

package/dist/components/post-widget-carousel/PostWidgetCarousel.view.js

@@ -167,6 +167,7 @@ function PostWidgetCarouselView(props) {
                       imgMerged && /* @__PURE__ */ jsx(Link, { ...linkMerged, children: /* @__PURE__ */ jsx(
                         Image,
                         {
+                          fill: true,
                           ...imgMerged,
                           className: bem(
                             "carousel__item__image",

package/dist/components/rating/Rating.css

@@ -249,7 +249,7 @@
     line-height: 1.4;
   }
 }
-[data-theme="dark"] .prokodo-Rating__helperText, .pk-theme-dark .prokodo-Rating__helperText {
+[data-theme=dark] .prokodo-Rating__helperText, .pk-theme-dark .prokodo-Rating__helperText {
   color: var(--pk-palette-grey-400);
 }
 .prokodo-Rating__helperText__content {

package/dist/components/rating/Rating.module.css

@@ -249,7 +249,7 @@
     line-height: 1.4;
   }
 }
-[data-theme="dark"] .prokodo-Rating__helperText, .pk-theme-dark .prokodo-Rating__helperText {
+[data-theme=dark] .prokodo-Rating__helperText, .pk-theme-dark .prokodo-Rating__helperText {
   color: var(--pk-palette-grey-400);
 }
 .prokodo-Rating__helperText__content {

package/dist/components/rating/Rating.module.scss.js

@@ -22,6 +22,7 @@ const styles = {
   "prokodo-Rating__icon--readonly": "prokodo-Rating__icon--readonly",
   "prokodo-Rating__footer": "prokodo-Rating__footer",
   "prokodo-Rating__helperText": "prokodo-Rating__helperText",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-Rating__helperText__content": "prokodo-Rating__helperText__content",
   "prokodo-Rating__helperText__content--is-error": "prokodo-Rating__helperText__content--is-error"
 };