@prokodo/ui 1.0.3 → 1.0.5

package/dist/components/RTE/RTE.css

@@ -520,32 +520,32 @@
   text-align: left;
   text-decoration: none;
 }
-[data-theme="dark"] .prokodo-RTE, .pk-theme-dark .prokodo-RTE {
+[data-theme=dark] .prokodo-RTE, .pk-theme-dark .prokodo-RTE {
   --pk-rte-toolbar-bg: color-mix(in srgb, var(--pk-color-brand) 14%, var(--pk-palette-slate-950));
   --pk-rte-icon-color: var(--pk-palette-white);
   --pk-rte-picker-bg: var(--pk-palette-slate-950);
   --pk-rte-picker-shadow: 0 10px 40px rgba(0, 0, 0, 0.7),
                              0 2px 12px rgba(0, 0, 0, 0.4);
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-stroke, .pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke {
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-stroke, .pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke {
   stroke: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-fill,
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-stroke.ql-fill, .pk-theme-dark .prokodo-RTE .ql-snow .ql-fill,
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-fill,
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-stroke.ql-fill, .pk-theme-dark .prokodo-RTE .ql-snow .ql-fill,
 .pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke.ql-fill {
   fill: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-picker, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker {
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-picker, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker {
   color: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-picker-label::before, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker-label::before {
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-picker-label::before, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker-label::before {
   color: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-toolbar .ql-picker-options, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-options {
+[data-theme=dark] .prokodo-RTE .ql-toolbar .ql-picker-options, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-options {
   background: var(--pk-palette-slate-950) !important;
   border-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-toolbar .ql-picker-item, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-item {
+[data-theme=dark] .prokodo-RTE .ql-toolbar .ql-picker-item, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-item {
   color: var(--pk-palette-white) !important;
 }
 .prokodo-RTE--primary {
@@ -566,7 +566,7 @@
 .prokodo-RTE--info, .prokodo-RTE--inherit, .prokodo-RTE--white {
   --pk-rte-accent: var(--pk-color-muted);
 }
-[data-theme="dark"] .prokodo-RTE--info, [data-theme="dark"] .prokodo-RTE--inherit, [data-theme="dark"] .prokodo-RTE--white, .pk-theme-dark .prokodo-RTE--info, .pk-theme-dark .prokodo-RTE--inherit, .pk-theme-dark .prokodo-RTE--white {
+[data-theme=dark] .prokodo-RTE--info, [data-theme=dark] .prokodo-RTE--inherit, [data-theme=dark] .prokodo-RTE--white, .pk-theme-dark .prokodo-RTE--info, .pk-theme-dark .prokodo-RTE--inherit, .pk-theme-dark .prokodo-RTE--white {
   --pk-rte-accent: var(--pk-palette-grey-200);
 }
 .prokodo-RTE--disabled {

package/dist/components/RTE/RTE.module.css

@@ -520,32 +520,32 @@
   text-align: left;
   text-decoration: none;
 }
-[data-theme="dark"] .prokodo-RTE, .pk-theme-dark .prokodo-RTE {
+[data-theme=dark] .prokodo-RTE, .pk-theme-dark .prokodo-RTE {
   --pk-rte-toolbar-bg: color-mix(in srgb, var(--pk-color-brand) 14%, var(--pk-palette-slate-950));
   --pk-rte-icon-color: var(--pk-palette-white);
   --pk-rte-picker-bg: var(--pk-palette-slate-950);
   --pk-rte-picker-shadow: 0 10px 40px rgba(0, 0, 0, 0.7),
                              0 2px 12px rgba(0, 0, 0, 0.4);
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-stroke, .pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke {
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-stroke, .pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke {
   stroke: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-fill,
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-stroke.ql-fill, .pk-theme-dark .prokodo-RTE .ql-snow .ql-fill,
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-fill,
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-stroke.ql-fill, .pk-theme-dark .prokodo-RTE .ql-snow .ql-fill,
 .pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke.ql-fill {
   fill: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-picker, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker {
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-picker, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker {
   color: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-snow .ql-picker-label::before, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker-label::before {
+[data-theme=dark] .prokodo-RTE .ql-snow .ql-picker-label::before, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker-label::before {
   color: var(--pk-palette-white) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-toolbar .ql-picker-options, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-options {
+[data-theme=dark] .prokodo-RTE .ql-toolbar .ql-picker-options, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-options {
   background: var(--pk-palette-slate-950) !important;
   border-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent) !important;
 }
-[data-theme="dark"] .prokodo-RTE .ql-toolbar .ql-picker-item, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-item {
+[data-theme=dark] .prokodo-RTE .ql-toolbar .ql-picker-item, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-item {
   color: var(--pk-palette-white) !important;
 }
 .prokodo-RTE--primary {
@@ -566,7 +566,7 @@
 .prokodo-RTE--info, .prokodo-RTE--inherit, .prokodo-RTE--white {
   --pk-rte-accent: var(--pk-color-muted);
 }
-[data-theme="dark"] .prokodo-RTE--info, [data-theme="dark"] .prokodo-RTE--inherit, [data-theme="dark"] .prokodo-RTE--white, .pk-theme-dark .prokodo-RTE--info, .pk-theme-dark .prokodo-RTE--inherit, .pk-theme-dark .prokodo-RTE--white {
+[data-theme=dark] .prokodo-RTE--info, [data-theme=dark] .prokodo-RTE--inherit, [data-theme=dark] .prokodo-RTE--white, .pk-theme-dark .prokodo-RTE--info, .pk-theme-dark .prokodo-RTE--inherit, .pk-theme-dark .prokodo-RTE--white {
   --pk-rte-accent: var(--pk-palette-grey-200);
 }
 .prokodo-RTE--disabled {

package/dist/components/RTE/RTE.module.scss.js

@@ -1,12 +1,21 @@
 const styles = {
   "prokodo-RTE": "prokodo-RTE",
   "prokodo-RTE__surface": "prokodo-RTE__surface",
+  "ql-toolbar": "ql-toolbar",
+  "ql-container": "ql-container",
+  "ql-snow": "ql-snow",
+  "ql-stroke": "ql-stroke",
+  "ql-active": "ql-active",
+  "ql-fill": "ql-fill",
+  "ql-picker-label": "ql-picker-label",
+  "ql-picker": "ql-picker",
+  "ql-expanded": "ql-expanded",
+  "ql-picker-options": "ql-picker-options",
   "prokodo-RTE__toolbar": "prokodo-RTE__toolbar",
   "prokodo-RTE__toolbar__icon__part__stroke": "prokodo-RTE__toolbar__icon__part__stroke",
   "prokodo-RTE__toolbar__icon__part__stroke__miter": "prokodo-RTE__toolbar__icon__part__stroke__miter",
   "prokodo-RTE__toolbar__icon__part__fill": "prokodo-RTE__toolbar__icon__part__fill",
   "prokodo-RTE__toolbar__button": "prokodo-RTE__toolbar__button",
-  "ql-active": "ql-active",
   "prokodo-RTE__toolbar__picker__label": "prokodo-RTE__toolbar__picker__label",
   "prokodo-RTE__toolbar__picker__options": "prokodo-RTE__toolbar__picker__options",
   "prokodo-RTE__toolbar__picker__item": "prokodo-RTE__toolbar__picker__item",
@@ -15,6 +24,8 @@ const styles = {
   "prokodo-RTE__mount--disabled": "prokodo-RTE__mount--disabled",
   "prokodo-RTE__tooltip": "prokodo-RTE__tooltip",
   "prokodo-RTE__editor": "prokodo-RTE__editor",
+  "pk-theme-dark": "pk-theme-dark",
+  "ql-picker-item": "ql-picker-item",
   "prokodo-RTE--primary": "prokodo-RTE--primary",
   "prokodo-RTE--secondary": "prokodo-RTE--secondary",
   "prokodo-RTE--success": "prokodo-RTE--success",

package/dist/components/animatedText/AnimatedText.server.js

@@ -3,8 +3,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsx } from "react/jsx-runtime";
 import { AnimatedTextView } from "./AnimatedText.view.js";
 function AnimatedTextServer(props) {
-  const { children: _ignored, ...rest } = props;
-  return /* @__PURE__ */ jsx(AnimatedTextView, { ...rest, text: "" });
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(AnimatedTextView, { ...rest, text: children });
 }
 __name(AnimatedTextServer, "AnimatedTextServer");
 export {

package/dist/components/autocomplete/Autocomplete.css

@@ -171,7 +171,7 @@
   --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-autocomplete-bg));
   --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-autocomplete-bg));
 }
-html[data-theme="dark"] .prokodo-Autocomplete, [data-theme="dark"] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
+html[data-theme=dark] .prokodo-Autocomplete, [data-theme=dark] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
   --pk-autocomplete-state-fg: var(--pk-color-fg);
   --pk-autocomplete-fg-muted: var(--pk-palette-grey-200);
   --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 15%, var(--pk-autocomplete-bg));

package/dist/components/autocomplete/Autocomplete.module.css

@@ -171,7 +171,7 @@
   --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-autocomplete-bg));
   --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-autocomplete-bg));
 }
-html[data-theme="dark"] .prokodo-Autocomplete, [data-theme="dark"] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
+html[data-theme=dark] .prokodo-Autocomplete, [data-theme=dark] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
   --pk-autocomplete-state-fg: var(--pk-color-fg);
   --pk-autocomplete-fg-muted: var(--pk-palette-grey-200);
   --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 15%, var(--pk-autocomplete-bg));

package/dist/components/autocomplete/Autocomplete.module.scss.js

@@ -8,8 +8,11 @@ const styles = {
   "prokodo-Autocomplete--info": "prokodo-Autocomplete--info",
   "prokodo-Autocomplete--inherit": "prokodo-Autocomplete--inherit",
   "prokodo-Autocomplete--white": "prokodo-Autocomplete--white",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-Autocomplete__inputWrap": "prokodo-Autocomplete__inputWrap",
   "prokodo-Autocomplete__input--is-open": "prokodo-Autocomplete__input--is-open",
+  "prokodo-Input__field": "prokodo-Input__field",
+  "prokodo-Input__notch": "prokodo-Input__notch",
   "prokodo-Autocomplete__input__inner--is-open": "prokodo-Autocomplete__input__inner--is-open",
   "prokodo-Autocomplete__input__node": "prokodo-Autocomplete__input__node",
   "prokodo-Autocomplete__input__node--is-open": "prokodo-Autocomplete__input__node--is-open",

package/dist/components/avatar/Avatar.view.js

@@ -4,8 +4,8 @@ import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import { isNumber } from "../../helpers/validations.js";
 import styles from "./Avatar.module.scss.js";
-import { Icon, getIconSize } from "../icon/Icon.js";
 import { Link } from "../link/Link.js";
+import { Icon, getIconSize } from "../icon/Icon.js";
 import { Image } from "../image/Image.js";
 const bem = create(styles, "Avatar");
 function AvatarView({

package/dist/components/button/Button.client.js

@@ -3,7 +3,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import LinkClient from "../link/Link.client.js";
+import BaseLinkClient from "../base-link/BaseLink.client.js";
 import { ButtonView } from "./Button.view.js";
 function ButtonClient(props, ref) {
   const { loading, iconProps = {}, ...rest } = props;
@@ -15,7 +15,7 @@ function ButtonClient(props, ref) {
       buttonRef: ref,
       iconProps,
       isIconOnly: Boolean(isIconOnly),
-      LinkComponent: LinkClient,
+      LinkComponent: BaseLinkClient,
       loading
     }
   );

package/dist/components/button/Button.css

@@ -156,7 +156,7 @@
   border-radius: 1.5rem;
   border-radius: var(--pk-button-radius);
 }
-.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning, .prokodo-Button--has-bg-error {
   color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-primary {
@@ -171,7 +171,6 @@
 }
 .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
-  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
@@ -181,7 +180,6 @@
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
-  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-primary, .prokodo-Button--has-text-primary, .prokodo-Button--has-variant-outlined--has-outline-primary {
   box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-brand) 18%, transparent);

package/dist/components/button/Button.module.css

@@ -156,7 +156,7 @@
   border-radius: 1.5rem;
   border-radius: var(--pk-button-radius);
 }
-.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning, .prokodo-Button--has-bg-error {
   color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-primary {
@@ -171,7 +171,6 @@
 }
 .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
-  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
@@ -181,7 +180,6 @@
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
-  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-primary, .prokodo-Button--has-text-primary, .prokodo-Button--has-variant-outlined--has-outline-primary {
   box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-brand) 18%, transparent);

package/dist/components/button/Button.module.scss.js

@@ -1,12 +1,12 @@
 const styles = {
   "prokodo-Button": "prokodo-Button",
-  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
-  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
   "prokodo-Button--has-bg-primary": "prokodo-Button--has-bg-primary",
-  "prokodo-Button--has-bg-inherit": "prokodo-Button--has-bg-inherit",
   "prokodo-Button--has-bg-secondary": "prokodo-Button--has-bg-secondary",
+  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
   "prokodo-Button--has-bg-success": "prokodo-Button--has-bg-success",
   "prokodo-Button--has-bg-warning": "prokodo-Button--has-bg-warning",
+  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
+  "prokodo-Button--has-bg-inherit": "prokodo-Button--has-bg-inherit",
   "prokodo-Button--has-text-primary": "prokodo-Button--has-text-primary",
   "prokodo-Button--has-variant-outlined--has-outline-primary": "prokodo-Button--has-variant-outlined--has-outline-primary",
   "prokodo-Button--has-text-secondary": "prokodo-Button--has-text-secondary",

package/dist/components/button/Button.server.js

@@ -1,12 +1,19 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-import LinkServer from "../link/Link.server.js";
+import BaseLinkServer from "../base-link/BaseLink.server.js";
 import { ButtonView } from "./Button.view.js";
 function ButtonServer(p) {
   var _a;
   const isIconOnly = ((_a = p.iconProps) == null ? void 0 : _a.name) && !("title" in p && p.title);
-  return /* @__PURE__ */ jsx(ButtonView, { ...p, isIconOnly: Boolean(isIconOnly), LinkComponent: LinkServer });
+  return /* @__PURE__ */ jsx(
+    ButtonView,
+    {
+      ...p,
+      isIconOnly: Boolean(isIconOnly),
+      LinkComponent: BaseLinkServer
+    }
+  );
 }
 __name(ButtonServer, "ButtonServer");
 export {

package/dist/components/card/Card.client.js

@@ -31,7 +31,6 @@ function CardClient({
     },
     [onClick, onKeyDown, disabled]
   );
-  const linkRole = isString(redirect == null ? void 0 : redirect.href) && !Boolean(disabled) ? "link" : void 0;
   const linkTabIndex = isString(redirect == null ? void 0 : redirect.href) && !Boolean(disabled) ? 0 : void 0;
   return /* @__PURE__ */ jsx(
     CardView,
@@ -40,7 +39,6 @@ function CardClient({
       disabled,
       isClickable,
       redirect,
-      role: linkRole,
       tabIndex: linkTabIndex,
       onClick: !Boolean(disabled) ? handleClickVoid : void 0,
       onKeyDown: handleKey,

package/dist/components/card/Card.view.js

@@ -101,6 +101,7 @@ function CardView({
           isString(background) && /* @__PURE__ */ jsx(
             Image,
             {
+              fill: true,
               alt: "card background",
               src: background,
               className: bem(

package/dist/components/carousel/Carousel.client.js

@@ -180,15 +180,20 @@ function CarouselClient(props) {
                 transform: getTransformValue(),
                 transition: transitioning ? "transform 0.3s ease-in-out" : "none"
               },
-              children: items.map((child, i) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: bem("item", void 0, classNameItem),
-                  style: { width: `${100 / effectiveItemsToShow}%` },
-                  children: child
-                },
-                `cl-${i}`
-              ))
+              children: items.map((child, i) => {
+                const isClone = i < effectiveItemsToShow || i >= effectiveItemsToShow + num;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": isClone || void 0,
+                    className: bem("item", void 0, classNameItem),
+                    inert: isClone || void 0,
+                    style: { width: `${100 / effectiveItemsToShow}%` },
+                    children: child
+                  },
+                  `cl-${i}`
+                );
+              })
             }
           ),
           /* @__PURE__ */ jsx(

package/dist/components/checkbox/Checkbox.css

@@ -135,7 +135,7 @@
   width: 100%;
   position: relative;
 }
-html[data-theme="dark"] .prokodo-Checkbox, [data-theme="dark"] .prokodo-Checkbox, .pk-theme-dark .prokodo-Checkbox {
+html[data-theme=dark] .prokodo-Checkbox, [data-theme=dark] .prokodo-Checkbox, .pk-theme-dark .prokodo-Checkbox {
   --pk-checkbox-control-border: rgba(255, 255, 255, 0.18);
   --pk-checkbox-control-bg: rgba(255, 255, 255, 0.04);
   --pk-checkbox-card-bg: rgba(255, 255, 255, 0.03);
@@ -171,7 +171,7 @@ html[data-theme="dark"] .prokodo-Checkbox, [data-theme="dark"] .prokodo-Checkbox
   --pk-checkbox-gradient-to: var(--pk-color-border);
   --pk-checkbox-shadow-color: rgba(0, 0, 0, 0.1);
 }
-html[data-theme="dark"] .prokodo-Checkbox--info, [data-theme="dark"] .prokodo-Checkbox--info, .pk-theme-dark .prokodo-Checkbox--info, html[data-theme="dark"] .prokodo-Checkbox--inherit, [data-theme="dark"] .prokodo-Checkbox--inherit, .pk-theme-dark .prokodo-Checkbox--inherit, html[data-theme="dark"] .prokodo-Checkbox--white, [data-theme="dark"] .prokodo-Checkbox--white, .pk-theme-dark .prokodo-Checkbox--white {
+html[data-theme=dark] .prokodo-Checkbox--info, [data-theme=dark] .prokodo-Checkbox--info, .pk-theme-dark .prokodo-Checkbox--info, html[data-theme=dark] .prokodo-Checkbox--inherit, [data-theme=dark] .prokodo-Checkbox--inherit, .pk-theme-dark .prokodo-Checkbox--inherit, html[data-theme=dark] .prokodo-Checkbox--white, [data-theme=dark] .prokodo-Checkbox--white, .pk-theme-dark .prokodo-Checkbox--white {
   --pk-checkbox-gradient-from: var(--pk-palette-grey-100);
   --pk-checkbox-gradient-to: var(--pk-palette-grey-200);
 }

package/dist/components/checkbox/Checkbox.module.css

@@ -135,7 +135,7 @@
   width: 100%;
   position: relative;
 }
-html[data-theme="dark"] .prokodo-Checkbox, [data-theme="dark"] .prokodo-Checkbox, .pk-theme-dark .prokodo-Checkbox {
+html[data-theme=dark] .prokodo-Checkbox, [data-theme=dark] .prokodo-Checkbox, .pk-theme-dark .prokodo-Checkbox {
   --pk-checkbox-control-border: rgba(255, 255, 255, 0.18);
   --pk-checkbox-control-bg: rgba(255, 255, 255, 0.04);
   --pk-checkbox-card-bg: rgba(255, 255, 255, 0.03);
@@ -171,7 +171,7 @@ html[data-theme="dark"] .prokodo-Checkbox, [data-theme="dark"] .prokodo-Checkbox
   --pk-checkbox-gradient-to: var(--pk-color-border);
   --pk-checkbox-shadow-color: rgba(0, 0, 0, 0.1);
 }
-html[data-theme="dark"] .prokodo-Checkbox--info, [data-theme="dark"] .prokodo-Checkbox--info, .pk-theme-dark .prokodo-Checkbox--info, html[data-theme="dark"] .prokodo-Checkbox--inherit, [data-theme="dark"] .prokodo-Checkbox--inherit, .pk-theme-dark .prokodo-Checkbox--inherit, html[data-theme="dark"] .prokodo-Checkbox--white, [data-theme="dark"] .prokodo-Checkbox--white, .pk-theme-dark .prokodo-Checkbox--white {
+html[data-theme=dark] .prokodo-Checkbox--info, [data-theme=dark] .prokodo-Checkbox--info, .pk-theme-dark .prokodo-Checkbox--info, html[data-theme=dark] .prokodo-Checkbox--inherit, [data-theme=dark] .prokodo-Checkbox--inherit, .pk-theme-dark .prokodo-Checkbox--inherit, html[data-theme=dark] .prokodo-Checkbox--white, [data-theme=dark] .prokodo-Checkbox--white, .pk-theme-dark .prokodo-Checkbox--white {
   --pk-checkbox-gradient-from: var(--pk-palette-grey-100);
   --pk-checkbox-gradient-to: var(--pk-palette-grey-200);
 }

package/dist/components/checkbox/Checkbox.module.scss.js

@@ -1,5 +1,6 @@
 const styles = {
   "prokodo-Checkbox": "prokodo-Checkbox",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-Checkbox--primary": "prokodo-Checkbox--primary",
   "prokodo-Checkbox--secondary": "prokodo-Checkbox--secondary",
   "prokodo-Checkbox--success": "prokodo-Checkbox--success",

package/dist/components/checkbox-group/CheckboxGroup.css

@@ -133,25 +133,25 @@
 .prokodo-CheckboxGroup--primary {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-brand) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--primary, [data-theme="dark"] .prokodo-CheckboxGroup--primary, .pk-theme-dark .prokodo-CheckboxGroup--primary {
+html[data-theme=dark] .prokodo-CheckboxGroup--primary, [data-theme=dark] .prokodo-CheckboxGroup--primary, .pk-theme-dark .prokodo-CheckboxGroup--primary {
   --pk-cg-legend-color: var(--pk-color-brand);
 }
 .prokodo-CheckboxGroup--secondary {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-accent) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--secondary, [data-theme="dark"] .prokodo-CheckboxGroup--secondary, .pk-theme-dark .prokodo-CheckboxGroup--secondary {
+html[data-theme=dark] .prokodo-CheckboxGroup--secondary, [data-theme=dark] .prokodo-CheckboxGroup--secondary, .pk-theme-dark .prokodo-CheckboxGroup--secondary {
   --pk-cg-legend-color: var(--pk-color-accent);
 }
 .prokodo-CheckboxGroup--success {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-success) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--success, [data-theme="dark"] .prokodo-CheckboxGroup--success, .pk-theme-dark .prokodo-CheckboxGroup--success {
+html[data-theme=dark] .prokodo-CheckboxGroup--success, [data-theme=dark] .prokodo-CheckboxGroup--success, .pk-theme-dark .prokodo-CheckboxGroup--success {
   --pk-cg-legend-color: var(--pk-color-success);
 }
 .prokodo-CheckboxGroup--warning {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-warning) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--warning, [data-theme="dark"] .prokodo-CheckboxGroup--warning, .pk-theme-dark .prokodo-CheckboxGroup--warning {
+html[data-theme=dark] .prokodo-CheckboxGroup--warning, [data-theme=dark] .prokodo-CheckboxGroup--warning, .pk-theme-dark .prokodo-CheckboxGroup--warning {
   --pk-cg-legend-color: var(--pk-color-warning);
 }
 .prokodo-CheckboxGroup--error {
@@ -160,7 +160,7 @@ html[data-theme="dark"] .prokodo-CheckboxGroup--warning, [data-theme="dark"] .pr
 .prokodo-CheckboxGroup--info, .prokodo-CheckboxGroup--inherit, .prokodo-CheckboxGroup--white {
   --pk-cg-legend-color: var(--pk-color-muted);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--info, [data-theme="dark"] .prokodo-CheckboxGroup--info, .pk-theme-dark .prokodo-CheckboxGroup--info, html[data-theme="dark"] .prokodo-CheckboxGroup--inherit, [data-theme="dark"] .prokodo-CheckboxGroup--inherit, .pk-theme-dark .prokodo-CheckboxGroup--inherit, html[data-theme="dark"] .prokodo-CheckboxGroup--white, [data-theme="dark"] .prokodo-CheckboxGroup--white, .pk-theme-dark .prokodo-CheckboxGroup--white {
+html[data-theme=dark] .prokodo-CheckboxGroup--info, [data-theme=dark] .prokodo-CheckboxGroup--info, .pk-theme-dark .prokodo-CheckboxGroup--info, html[data-theme=dark] .prokodo-CheckboxGroup--inherit, [data-theme=dark] .prokodo-CheckboxGroup--inherit, .pk-theme-dark .prokodo-CheckboxGroup--inherit, html[data-theme=dark] .prokodo-CheckboxGroup--white, [data-theme=dark] .prokodo-CheckboxGroup--white, .pk-theme-dark .prokodo-CheckboxGroup--white {
   --pk-cg-legend-color: var(--pk-palette-grey-200);
 }
 .prokodo-CheckboxGroup__legend {

package/dist/components/checkbox-group/CheckboxGroup.module.css

@@ -133,25 +133,25 @@
 .prokodo-CheckboxGroup--primary {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-brand) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--primary, [data-theme="dark"] .prokodo-CheckboxGroup--primary, .pk-theme-dark .prokodo-CheckboxGroup--primary {
+html[data-theme=dark] .prokodo-CheckboxGroup--primary, [data-theme=dark] .prokodo-CheckboxGroup--primary, .pk-theme-dark .prokodo-CheckboxGroup--primary {
   --pk-cg-legend-color: var(--pk-color-brand);
 }
 .prokodo-CheckboxGroup--secondary {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-accent) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--secondary, [data-theme="dark"] .prokodo-CheckboxGroup--secondary, .pk-theme-dark .prokodo-CheckboxGroup--secondary {
+html[data-theme=dark] .prokodo-CheckboxGroup--secondary, [data-theme=dark] .prokodo-CheckboxGroup--secondary, .pk-theme-dark .prokodo-CheckboxGroup--secondary {
   --pk-cg-legend-color: var(--pk-color-accent);
 }
 .prokodo-CheckboxGroup--success {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-success) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--success, [data-theme="dark"] .prokodo-CheckboxGroup--success, .pk-theme-dark .prokodo-CheckboxGroup--success {
+html[data-theme=dark] .prokodo-CheckboxGroup--success, [data-theme=dark] .prokodo-CheckboxGroup--success, .pk-theme-dark .prokodo-CheckboxGroup--success {
   --pk-cg-legend-color: var(--pk-color-success);
 }
 .prokodo-CheckboxGroup--warning {
   --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-warning) 80%, #000000);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--warning, [data-theme="dark"] .prokodo-CheckboxGroup--warning, .pk-theme-dark .prokodo-CheckboxGroup--warning {
+html[data-theme=dark] .prokodo-CheckboxGroup--warning, [data-theme=dark] .prokodo-CheckboxGroup--warning, .pk-theme-dark .prokodo-CheckboxGroup--warning {
   --pk-cg-legend-color: var(--pk-color-warning);
 }
 .prokodo-CheckboxGroup--error {
@@ -160,7 +160,7 @@ html[data-theme="dark"] .prokodo-CheckboxGroup--warning, [data-theme="dark"] .pr
 .prokodo-CheckboxGroup--info, .prokodo-CheckboxGroup--inherit, .prokodo-CheckboxGroup--white {
   --pk-cg-legend-color: var(--pk-color-muted);
 }
-html[data-theme="dark"] .prokodo-CheckboxGroup--info, [data-theme="dark"] .prokodo-CheckboxGroup--info, .pk-theme-dark .prokodo-CheckboxGroup--info, html[data-theme="dark"] .prokodo-CheckboxGroup--inherit, [data-theme="dark"] .prokodo-CheckboxGroup--inherit, .pk-theme-dark .prokodo-CheckboxGroup--inherit, html[data-theme="dark"] .prokodo-CheckboxGroup--white, [data-theme="dark"] .prokodo-CheckboxGroup--white, .pk-theme-dark .prokodo-CheckboxGroup--white {
+html[data-theme=dark] .prokodo-CheckboxGroup--info, [data-theme=dark] .prokodo-CheckboxGroup--info, .pk-theme-dark .prokodo-CheckboxGroup--info, html[data-theme=dark] .prokodo-CheckboxGroup--inherit, [data-theme=dark] .prokodo-CheckboxGroup--inherit, .pk-theme-dark .prokodo-CheckboxGroup--inherit, html[data-theme=dark] .prokodo-CheckboxGroup--white, [data-theme=dark] .prokodo-CheckboxGroup--white, .pk-theme-dark .prokodo-CheckboxGroup--white {
   --pk-cg-legend-color: var(--pk-palette-grey-200);
 }
 .prokodo-CheckboxGroup__legend {

package/dist/components/checkbox-group/CheckboxGroup.module.scss.js

@@ -1,6 +1,7 @@
 const styles = {
   "prokodo-CheckboxGroup": "prokodo-CheckboxGroup",
   "prokodo-CheckboxGroup--primary": "prokodo-CheckboxGroup--primary",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-CheckboxGroup--secondary": "prokodo-CheckboxGroup--secondary",
   "prokodo-CheckboxGroup--success": "prokodo-CheckboxGroup--success",
   "prokodo-CheckboxGroup--warning": "prokodo-CheckboxGroup--warning",

package/dist/components/chip/Chip.css

@@ -221,7 +221,7 @@
 .prokodo-Chip--filled--inherit {
   background: var(--gradient-background-inherit);
 }
-html[data-theme="dark"] .prokodo-Chip--filled--inherit, [data-theme="dark"] .prokodo-Chip--filled--inherit {
+html[data-theme=dark] .prokodo-Chip--filled--inherit, [data-theme=dark] .prokodo-Chip--filled--inherit {
   background: var(--pk-color-surface-raised);
 }
 .prokodo-Chip--outlined {
@@ -262,7 +262,7 @@ html[data-theme="dark"] .prokodo-Chip--filled--inherit, [data-theme="dark"] .pro
 .prokodo-Chip--outlined--white::before, .prokodo-Chip--outlined--inherit::before {
   background: linear-gradient(90deg, var(--pk-palette-grey-100) 0%, var(--pk-palette-grey-200) 100%);
 }
-html[data-theme="dark"] .prokodo-Chip--outlined--white::before, [data-theme="dark"] .prokodo-Chip--outlined--white::before, html[data-theme="dark"] .prokodo-Chip--outlined--inherit::before, [data-theme="dark"] .prokodo-Chip--outlined--inherit::before {
+html[data-theme=dark] .prokodo-Chip--outlined--white::before, [data-theme=dark] .prokodo-Chip--outlined--white::before, html[data-theme=dark] .prokodo-Chip--outlined--inherit::before, [data-theme=dark] .prokodo-Chip--outlined--inherit::before {
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.5) 100%);
 }
 .prokodo-Chip__delete {
@@ -364,7 +364,7 @@ html[data-theme="dark"] .prokodo-Chip--outlined--white::before, [data-theme="dar
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-html[data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, html[data-theme="dark"] .prokodo-Chip--outlined--white .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--outlined--white .prokodo-Chip__label {
+html[data-theme=dark] .prokodo-Chip--filled--white .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--filled--white .prokodo-Chip__label, html[data-theme=dark] .prokodo-Chip--outlined--white .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--outlined--white .prokodo-Chip__label {
   background-image: linear-gradient(90deg, var(--pk-palette-grey-400) 0%, var(--pk-palette-grey-600) 100%);
 }
 .prokodo-Chip--filled--inherit .prokodo-Chip__label {
@@ -379,7 +379,7 @@ html[data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, [data
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-html[data-theme="dark"] .prokodo-Chip--filled--inherit .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--filled--inherit .prokodo-Chip__label, html[data-theme="dark"] .prokodo-Chip--outlined--inherit .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--outlined--inherit .prokodo-Chip__label {
+html[data-theme=dark] .prokodo-Chip--filled--inherit .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--filled--inherit .prokodo-Chip__label, html[data-theme=dark] .prokodo-Chip--outlined--inherit .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--outlined--inherit .prokodo-Chip__label {
   background-image: linear-gradient(90deg, var(--pk-palette-white) 0%, var(--pk-palette-grey-100) 100%);
 }
 .prokodo-Chip__label {

package/dist/components/chip/Chip.module.css

@@ -221,7 +221,7 @@
 .prokodo-Chip--filled--inherit {
   background: var(--gradient-background-inherit);
 }
-html[data-theme="dark"] .prokodo-Chip--filled--inherit, [data-theme="dark"] .prokodo-Chip--filled--inherit {
+html[data-theme=dark] .prokodo-Chip--filled--inherit, [data-theme=dark] .prokodo-Chip--filled--inherit {
   background: var(--pk-color-surface-raised);
 }
 .prokodo-Chip--outlined {
@@ -262,7 +262,7 @@ html[data-theme="dark"] .prokodo-Chip--filled--inherit, [data-theme="dark"] .pro
 .prokodo-Chip--outlined--white::before, .prokodo-Chip--outlined--inherit::before {
   background: linear-gradient(90deg, var(--pk-palette-grey-100) 0%, var(--pk-palette-grey-200) 100%);
 }
-html[data-theme="dark"] .prokodo-Chip--outlined--white::before, [data-theme="dark"] .prokodo-Chip--outlined--white::before, html[data-theme="dark"] .prokodo-Chip--outlined--inherit::before, [data-theme="dark"] .prokodo-Chip--outlined--inherit::before {
+html[data-theme=dark] .prokodo-Chip--outlined--white::before, [data-theme=dark] .prokodo-Chip--outlined--white::before, html[data-theme=dark] .prokodo-Chip--outlined--inherit::before, [data-theme=dark] .prokodo-Chip--outlined--inherit::before {
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.5) 100%);
 }
 .prokodo-Chip__delete {
@@ -364,7 +364,7 @@ html[data-theme="dark"] .prokodo-Chip--outlined--white::before, [data-theme="dar
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-html[data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, html[data-theme="dark"] .prokodo-Chip--outlined--white .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--outlined--white .prokodo-Chip__label {
+html[data-theme=dark] .prokodo-Chip--filled--white .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--filled--white .prokodo-Chip__label, html[data-theme=dark] .prokodo-Chip--outlined--white .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--outlined--white .prokodo-Chip__label {
   background-image: linear-gradient(90deg, var(--pk-palette-grey-400) 0%, var(--pk-palette-grey-600) 100%);
 }
 .prokodo-Chip--filled--inherit .prokodo-Chip__label {
@@ -379,7 +379,7 @@ html[data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, [data
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-html[data-theme="dark"] .prokodo-Chip--filled--inherit .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--filled--inherit .prokodo-Chip__label, html[data-theme="dark"] .prokodo-Chip--outlined--inherit .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--outlined--inherit .prokodo-Chip__label {
+html[data-theme=dark] .prokodo-Chip--filled--inherit .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--filled--inherit .prokodo-Chip__label, html[data-theme=dark] .prokodo-Chip--outlined--inherit .prokodo-Chip__label, [data-theme=dark] .prokodo-Chip--outlined--inherit .prokodo-Chip__label {
   background-image: linear-gradient(90deg, var(--pk-palette-white) 0%, var(--pk-palette-grey-100) 100%);
 }
 .prokodo-Chip__label {