@prokodo/ui 1.0.3 → 1.0.5

package/dist/components/rich-text/RichText.client.js

@@ -3,7 +3,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Marked as B } from "../../node_modules/.pnpm/marked@17.0.1/node_modules/marked/lib/marked.esm.js";
-import { useRef, useMemo, useState, useEffect, Fragment, Children, cloneElement, isValidElement, createElement } from "react";
+import { useRef, useMemo, useState, useEffect, Fragment, isValidElement, createElement, Children, cloneElement } from "react";
 import { l as libExports } from "../../_virtual/index.js";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";

package/dist/components/select/Select.client.js

@@ -49,6 +49,7 @@ function SelectClient({
   const [popupReady, setPopupReady] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const sheetSwipeStart = useRef(null);
+  const didInitFocus = useRef(false);
   const hasPlaceholder = !Boolean(required) && !Boolean(multiple);
   const optionCount = (hasPlaceholder ? 1 : 0) + items.length;
   useEffect(() => {
@@ -114,7 +115,12 @@ function SelectClient({
     []
   );
   useEffect(() => {
-    if (!open || !popupReady) return;
+    if (!open) {
+      didInitFocus.current = false;
+      return;
+    }
+    if (!popupReady || didInitFocus.current) return;
+    didInitFocus.current = true;
     setActiveIndex(valueToIndex());
     requestAnimationFrame(() => {
       var _a;
@@ -150,6 +156,10 @@ function SelectClient({
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [open, updatePopupPosition]);
+  useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(() => updatePopupPosition());
+  }, [val, open, updatePopupPosition]);
   useEffect(() => {
     if (!open) return;
     const handleOutside = /* @__PURE__ */ __name((e) => {
@@ -326,7 +336,7 @@ function SelectClient({
                       /* @__PURE__ */ jsx(
                         "button",
                         {
-                          "aria-label": "Close",
+                          "aria-label": rest.closeAriaLabel ?? "Close",
                           className: bem("sheet__close"),
                           type: "button",
                           onClick: close,
@@ -419,7 +429,7 @@ function SelectClient({
                         className: bem("sheet__done"),
                         type: "button",
                         onClick: close,
-                        children: "Done"
+                        children: rest.doneLabel ?? "Done"
                       }
                     ) })
                   ]

package/dist/components/select/Select.css

@@ -212,12 +212,12 @@
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
 }
-html[data-theme="dark"] .prokodo-Select--info, [data-theme="dark"] .prokodo-Select--info, .pk-theme-dark .prokodo-Select--info, html[data-theme="dark"] .prokodo-Select--inherit, [data-theme="dark"] .prokodo-Select--inherit, .pk-theme-dark .prokodo-Select--inherit, html[data-theme="dark"] .prokodo-Select--white, [data-theme="dark"] .prokodo-Select--white, .pk-theme-dark .prokodo-Select--white {
+html[data-theme=dark] .prokodo-Select--info, [data-theme=dark] .prokodo-Select--info, .pk-theme-dark .prokodo-Select--info, html[data-theme=dark] .prokodo-Select--inherit, [data-theme=dark] .prokodo-Select--inherit, .pk-theme-dark .prokodo-Select--inherit, html[data-theme=dark] .prokodo-Select--white, [data-theme=dark] .prokodo-Select--white, .pk-theme-dark .prokodo-Select--white {
   --pk-select-gradient-from: var(--pk-palette-grey-100);
   --pk-select-gradient-to: var(--pk-palette-grey-200);
   --pk-select-label-fg: var(--pk-palette-grey-200);
 }
-html[data-theme="dark"] .prokodo-Select, [data-theme="dark"] .prokodo-Select, .pk-theme-dark .prokodo-Select {
+html[data-theme=dark] .prokodo-Select, [data-theme=dark] .prokodo-Select, .pk-theme-dark .prokodo-Select {
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
   --pk-select-fg-placeholder: var(--pk-palette-grey-400);
@@ -460,7 +460,7 @@ html[data-theme="dark"] .prokodo-Select, [data-theme="dark"] .prokodo-Select, .p
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
 }
-html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-Select__listbox, .pk-theme-dark .prokodo-Select__listbox {
+html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Select__listbox, .pk-theme-dark .prokodo-Select__listbox {
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
   --pk-select-fg: var(--pk-color-fg);
@@ -556,7 +556,7 @@ html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-S
 .prokodo-Select__sheet__backdrop {
   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);
@@ -567,7 +567,7 @@ html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-S
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 200;
+  z-index: calc(var(--pk-z-popover, 1400) + 1);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -617,7 +617,7 @@ html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-S
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
 }
-html[data-theme="dark"] .prokodo-Select__sheet, [data-theme="dark"] .prokodo-Select__sheet, .pk-theme-dark .prokodo-Select__sheet {
+html[data-theme=dark] .prokodo-Select__sheet, [data-theme=dark] .prokodo-Select__sheet, .pk-theme-dark .prokodo-Select__sheet {
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
   --pk-select-fg: var(--pk-color-fg);
@@ -759,35 +759,18 @@ html[data-theme="dark"] .prokodo-Select__sheet, [data-theme="dark"] .prokodo-Sel
 }
 .prokodo-Select__sheet__done {
   width: 100%;
-  padding: 0.75rem;
-  border-radius: var(--pk-select-radius, 8px);
+  height: 3rem;
+  padding: var(--pk-space-xs, 0.25rem) var(--pk-space-sm, 0.5rem);
+  border-radius: var(--pk-radius-lg, 12px);
   border: none;
   cursor: pointer;
-  font-weight: 700;
-  background: linear-gradient(90deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  background: linear-gradient(135deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
   color: #fff;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--pk-select-gradient-from) 30%, transparent);
   transition: opacity var(--pk-timing-fast) ease;
-  font-weight: 700;
-  font-size: 1.75rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.6;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
 }
 .prokodo-Select__sheet__done:hover {
   opacity: 0.9;

package/dist/components/select/Select.module.css

@@ -212,12 +212,12 @@
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
 }
-html[data-theme="dark"] .prokodo-Select--info, [data-theme="dark"] .prokodo-Select--info, .pk-theme-dark .prokodo-Select--info, html[data-theme="dark"] .prokodo-Select--inherit, [data-theme="dark"] .prokodo-Select--inherit, .pk-theme-dark .prokodo-Select--inherit, html[data-theme="dark"] .prokodo-Select--white, [data-theme="dark"] .prokodo-Select--white, .pk-theme-dark .prokodo-Select--white {
+html[data-theme=dark] .prokodo-Select--info, [data-theme=dark] .prokodo-Select--info, .pk-theme-dark .prokodo-Select--info, html[data-theme=dark] .prokodo-Select--inherit, [data-theme=dark] .prokodo-Select--inherit, .pk-theme-dark .prokodo-Select--inherit, html[data-theme=dark] .prokodo-Select--white, [data-theme=dark] .prokodo-Select--white, .pk-theme-dark .prokodo-Select--white {
   --pk-select-gradient-from: var(--pk-palette-grey-100);
   --pk-select-gradient-to: var(--pk-palette-grey-200);
   --pk-select-label-fg: var(--pk-palette-grey-200);
 }
-html[data-theme="dark"] .prokodo-Select, [data-theme="dark"] .prokodo-Select, .pk-theme-dark .prokodo-Select {
+html[data-theme=dark] .prokodo-Select, [data-theme=dark] .prokodo-Select, .pk-theme-dark .prokodo-Select {
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
   --pk-select-fg-placeholder: var(--pk-palette-grey-400);
@@ -460,7 +460,7 @@ html[data-theme="dark"] .prokodo-Select, [data-theme="dark"] .prokodo-Select, .p
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
 }
-html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-Select__listbox, .pk-theme-dark .prokodo-Select__listbox {
+html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Select__listbox, .pk-theme-dark .prokodo-Select__listbox {
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
   --pk-select-fg: var(--pk-color-fg);
@@ -556,7 +556,7 @@ html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-S
 .prokodo-Select__sheet__backdrop {
   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);
@@ -567,7 +567,7 @@ html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-S
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 200;
+  z-index: calc(var(--pk-z-popover, 1400) + 1);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -617,7 +617,7 @@ html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-S
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
 }
-html[data-theme="dark"] .prokodo-Select__sheet, [data-theme="dark"] .prokodo-Select__sheet, .pk-theme-dark .prokodo-Select__sheet {
+html[data-theme=dark] .prokodo-Select__sheet, [data-theme=dark] .prokodo-Select__sheet, .pk-theme-dark .prokodo-Select__sheet {
   --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
   --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
   --pk-select-fg: var(--pk-color-fg);
@@ -759,35 +759,18 @@ html[data-theme="dark"] .prokodo-Select__sheet, [data-theme="dark"] .prokodo-Sel
 }
 .prokodo-Select__sheet__done {
   width: 100%;
-  padding: 0.75rem;
-  border-radius: var(--pk-select-radius, 8px);
+  height: 3rem;
+  padding: var(--pk-space-xs, 0.25rem) var(--pk-space-sm, 0.5rem);
+  border-radius: var(--pk-radius-lg, 12px);
   border: none;
   cursor: pointer;
-  font-weight: 700;
-  background: linear-gradient(90deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  background: linear-gradient(135deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
   color: #fff;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--pk-select-gradient-from) 30%, transparent);
   transition: opacity var(--pk-timing-fast) ease;
-  font-weight: 700;
-  font-size: 1.75rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.6;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
 }
 .prokodo-Select__sheet__done:hover {
   opacity: 0.9;

package/dist/components/select/Select.module.scss.js

@@ -12,6 +12,7 @@ const styles = {
   "prokodo-Select--info": "prokodo-Select--info",
   "prokodo-Select--inherit": "prokodo-Select--inherit",
   "prokodo-Select--white": "prokodo-Select--white",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-Select--fullWidth": "prokodo-Select--fullWidth",
   "prokodo-Select__label": "prokodo-Select__label",
   "prokodo-Select__label--is-focused": "prokodo-Select__label--is-focused",

package/dist/components/snackbar/Snackbar.css

@@ -124,6 +124,42 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+.prokodo-SnackbarProvider {
+  position: fixed;
+  z-index: 1400;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pk-space-sm);
+  width: -moz-max-content;
+  width: max-content;
+  max-width: min(480px, 100vw - var(--pk-space-xl) * 2);
+  pointer-events: none;
+}
+.prokodo-SnackbarProvider > * {
+  pointer-events: auto;
+}
+.prokodo-SnackbarProvider--is-top {
+  top: var(--pk-space-lg);
+  bottom: auto;
+}
+.prokodo-SnackbarProvider--is-bottom {
+  bottom: var(--pk-space-lg);
+  top: auto;
+}
+.prokodo-SnackbarProvider--is-left {
+  left: var(--pk-space-lg);
+  right: auto;
+}
+.prokodo-SnackbarProvider--is-right {
+  right: var(--pk-space-lg);
+  left: auto;
+}
+.prokodo-SnackbarProvider--is-center {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+
 @keyframes Snackbar_slideIn {
   from {
     opacity: 0;

package/dist/components/snackbar/Snackbar.module.css

@@ -124,6 +124,42 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+.prokodo-SnackbarProvider {
+  position: fixed;
+  z-index: 1400;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pk-space-sm);
+  width: -moz-max-content;
+  width: max-content;
+  max-width: min(480px, 100vw - var(--pk-space-xl) * 2);
+  pointer-events: none;
+}
+.prokodo-SnackbarProvider > * {
+  pointer-events: auto;
+}
+.prokodo-SnackbarProvider--is-top {
+  top: var(--pk-space-lg);
+  bottom: auto;
+}
+.prokodo-SnackbarProvider--is-bottom {
+  bottom: var(--pk-space-lg);
+  top: auto;
+}
+.prokodo-SnackbarProvider--is-left {
+  left: var(--pk-space-lg);
+  right: auto;
+}
+.prokodo-SnackbarProvider--is-right {
+  right: var(--pk-space-lg);
+  left: auto;
+}
+.prokodo-SnackbarProvider--is-center {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+
 @keyframes Snackbar_slideIn {
   from {
     opacity: 0;

package/dist/components/snackbar/Snackbar.module.scss.js

@@ -1,6 +1,12 @@
 const Snackbar_slideIn = "Snackbar_slideIn";
 const Snackbar_slideOut = "Snackbar_slideOut";
 const styles = {
+  "prokodo-SnackbarProvider": "prokodo-SnackbarProvider",
+  "prokodo-SnackbarProvider--is-top": "prokodo-SnackbarProvider--is-top",
+  "prokodo-SnackbarProvider--is-bottom": "prokodo-SnackbarProvider--is-bottom",
+  "prokodo-SnackbarProvider--is-left": "prokodo-SnackbarProvider--is-left",
+  "prokodo-SnackbarProvider--is-right": "prokodo-SnackbarProvider--is-right",
+  "prokodo-SnackbarProvider--is-center": "prokodo-SnackbarProvider--is-center",
   "prokodo-Snackbar": "prokodo-Snackbar",
   Snackbar_slideIn,
   "prokodo-Snackbar--info": "prokodo-Snackbar--info",

package/dist/components/stepper/Stepper.css

@@ -127,15 +127,9 @@
 .prokodo-Stepper {
   display: flex;
   justify-content: space-between;
-  flex-direction: column;
+  flex-direction: row;
   padding: 0;
-  height: 100%;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Stepper {
-    width: 100%;
-    flex-direction: row;
-  }
+  width: 100%;
 }
 .prokodo-Stepper--primary {
   --gradient-border-1: linear-gradient(180deg, var(--pk-color-brand) 0%, var(--pk-color-accent) 100%);
@@ -174,35 +168,22 @@
 }
 .prokodo-Stepper__step {
   position: relative;
-  height: 100%;
+  width: 100%;
   list-style-type: none;
   cursor: pointer;
 }
 .prokodo-Stepper__step::after {
   content: "";
-  position: relative;
-  display: block;
-  margin: -10rem 0 1.25rem 1.25rem;
-  height: calc(100% - 150px);
-  width: 3px;
+  position: absolute;
+  top: 1.25rem;
+  margin: 0;
+  left: auto;
+  height: 3px;
+  width: calc(100% - 80px);
   background: var(--gradient-border-7);
-  transform: translateY(-50%);
+  transform: translateX(-50%);
   opacity: 0.5;
 }
-@media screen and (min-width: 480px) {
-  .prokodo-Stepper__step {
-    width: 100%;
-  }
-  .prokodo-Stepper__step::after {
-    position: absolute;
-    top: 1.25rem;
-    margin: 0;
-    left: auto;
-    height: 3px;
-    width: calc(100% - 80px);
-    transform: translateX(-50%);
-  }
-}
 .prokodo-Stepper__step:first-child::after {
   display: none;
 }
@@ -312,7 +293,7 @@
 }
 .prokodo-Stepper__label {
   text-align: center;
-  align-items: flex-start;
+  align-items: center;
   display: flex !important;
   flex-direction: column;
   justify-content: center;
@@ -368,7 +349,6 @@
 }
 @media screen and (min-width: 480px) {
   .prokodo-Stepper__label {
-    align-items: center;
     font-weight: 400;
     font-size: 1rem;
     font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/stepper/Stepper.module.css

@@ -127,15 +127,9 @@
 .prokodo-Stepper {
   display: flex;
   justify-content: space-between;
-  flex-direction: column;
+  flex-direction: row;
   padding: 0;
-  height: 100%;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Stepper {
-    width: 100%;
-    flex-direction: row;
-  }
+  width: 100%;
 }
 .prokodo-Stepper--primary {
   --gradient-border-1: linear-gradient(180deg, var(--pk-color-brand) 0%, var(--pk-color-accent) 100%);
@@ -174,35 +168,22 @@
 }
 .prokodo-Stepper__step {
   position: relative;
-  height: 100%;
+  width: 100%;
   list-style-type: none;
   cursor: pointer;
 }
 .prokodo-Stepper__step::after {
   content: "";
-  position: relative;
-  display: block;
-  margin: -10rem 0 1.25rem 1.25rem;
-  height: calc(100% - 150px);
-  width: 3px;
+  position: absolute;
+  top: 1.25rem;
+  margin: 0;
+  left: auto;
+  height: 3px;
+  width: calc(100% - 80px);
   background: var(--gradient-border-7);
-  transform: translateY(-50%);
+  transform: translateX(-50%);
   opacity: 0.5;
 }
-@media screen and (min-width: 480px) {
-  .prokodo-Stepper__step {
-    width: 100%;
-  }
-  .prokodo-Stepper__step::after {
-    position: absolute;
-    top: 1.25rem;
-    margin: 0;
-    left: auto;
-    height: 3px;
-    width: calc(100% - 80px);
-    transform: translateX(-50%);
-  }
-}
 .prokodo-Stepper__step:first-child::after {
   display: none;
 }
@@ -312,7 +293,7 @@
 }
 .prokodo-Stepper__label {
   text-align: center;
-  align-items: flex-start;
+  align-items: center;
   display: flex !important;
   flex-direction: column;
   justify-content: center;
@@ -368,7 +349,6 @@
 }
 @media screen and (min-width: 480px) {
   .prokodo-Stepper__label {
-    align-items: center;
     font-weight: 400;
     font-size: 1rem;
     font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/switch/Switch.css

@@ -157,10 +157,10 @@
 .prokodo-Switch--inherit {
   --pk-switch-active: currentColor;
 }
-[data-theme="dark"] .prokodo-Switch--info, .pk-theme-dark .prokodo-Switch--info {
+[data-theme=dark] .prokodo-Switch--info, .pk-theme-dark .prokodo-Switch--info {
   --pk-switch-active: var(--pk-palette-grey-300);
 }
-[data-theme="dark"] .prokodo-Switch--inherit, .pk-theme-dark .prokodo-Switch--inherit {
+[data-theme=dark] .prokodo-Switch--inherit, .pk-theme-dark .prokodo-Switch--inherit {
   --pk-switch-active: var(--pk-color-fg);
 }
 .prokodo-Switch__label {
@@ -262,17 +262,17 @@
 .prokodo-Switch__icon--isActive {
   color: var(--pk-color-fg);
 }
-[data-theme="dark"] .prokodo-Switch__thumb, .pk-theme-dark .prokodo-Switch__thumb {
+[data-theme=dark] .prokodo-Switch__thumb, .pk-theme-dark .prokodo-Switch__thumb {
   --pk-switch-thumb-bg: #ffffff;
   --pk-switch-thumb-checked-bg: #ffffff;
 }
-[data-theme="dark"] .prokodo-Switch__icon__wrapper, .pk-theme-dark .prokodo-Switch__icon__wrapper, [data-theme="dark"] .prokodo-Switch__icon, .pk-theme-dark .prokodo-Switch__icon {
+[data-theme=dark] .prokodo-Switch__icon__wrapper, .pk-theme-dark .prokodo-Switch__icon__wrapper, [data-theme=dark] .prokodo-Switch__icon, .pk-theme-dark .prokodo-Switch__icon {
   color: #000000;
 }
-[data-theme="dark"] .prokodo-Switch--inherit .prokodo-Switch__thumb--checked, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__thumb--checked {
+[data-theme=dark] .prokodo-Switch--inherit .prokodo-Switch__thumb--checked, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__thumb--checked {
   --pk-switch-thumb-checked-bg: #000000;
 }
-[data-theme="dark"] .prokodo-Switch--inherit .prokodo-Switch__icon--isActive, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__icon--isActive {
+[data-theme=dark] .prokodo-Switch--inherit .prokodo-Switch__icon--isActive, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__icon--isActive {
   color: #ffffff;
 }
 .prokodo-Switch--disabled, .prokodo-Switch__control--disabled {

package/dist/components/switch/Switch.module.css

@@ -157,10 +157,10 @@
 .prokodo-Switch--inherit {
   --pk-switch-active: currentColor;
 }
-[data-theme="dark"] .prokodo-Switch--info, .pk-theme-dark .prokodo-Switch--info {
+[data-theme=dark] .prokodo-Switch--info, .pk-theme-dark .prokodo-Switch--info {
   --pk-switch-active: var(--pk-palette-grey-300);
 }
-[data-theme="dark"] .prokodo-Switch--inherit, .pk-theme-dark .prokodo-Switch--inherit {
+[data-theme=dark] .prokodo-Switch--inherit, .pk-theme-dark .prokodo-Switch--inherit {
   --pk-switch-active: var(--pk-color-fg);
 }
 .prokodo-Switch__label {
@@ -262,17 +262,17 @@
 .prokodo-Switch__icon--isActive {
   color: var(--pk-color-fg);
 }
-[data-theme="dark"] .prokodo-Switch__thumb, .pk-theme-dark .prokodo-Switch__thumb {
+[data-theme=dark] .prokodo-Switch__thumb, .pk-theme-dark .prokodo-Switch__thumb {
   --pk-switch-thumb-bg: #ffffff;
   --pk-switch-thumb-checked-bg: #ffffff;
 }
-[data-theme="dark"] .prokodo-Switch__icon__wrapper, .pk-theme-dark .prokodo-Switch__icon__wrapper, [data-theme="dark"] .prokodo-Switch__icon, .pk-theme-dark .prokodo-Switch__icon {
+[data-theme=dark] .prokodo-Switch__icon__wrapper, .pk-theme-dark .prokodo-Switch__icon__wrapper, [data-theme=dark] .prokodo-Switch__icon, .pk-theme-dark .prokodo-Switch__icon {
   color: #000000;
 }
-[data-theme="dark"] .prokodo-Switch--inherit .prokodo-Switch__thumb--checked, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__thumb--checked {
+[data-theme=dark] .prokodo-Switch--inherit .prokodo-Switch__thumb--checked, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__thumb--checked {
   --pk-switch-thumb-checked-bg: #000000;
 }
-[data-theme="dark"] .prokodo-Switch--inherit .prokodo-Switch__icon--isActive, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__icon--isActive {
+[data-theme=dark] .prokodo-Switch--inherit .prokodo-Switch__icon--isActive, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__icon--isActive {
   color: #ffffff;
 }
 .prokodo-Switch--disabled, .prokodo-Switch__control--disabled {

package/dist/components/switch/Switch.module.scss.js

@@ -7,6 +7,7 @@ const styles = {
   "prokodo-Switch--info": "prokodo-Switch--info",
   "prokodo-Switch--warning": "prokodo-Switch--warning",
   "prokodo-Switch--inherit": "prokodo-Switch--inherit",
+  "pk-theme-dark": "pk-theme-dark",
   "prokodo-Switch__label": "prokodo-Switch__label",
   "prokodo-Switch__control": "prokodo-Switch__control",
   "prokodo-Switch__track": "prokodo-Switch__track",

package/dist/components/table/Table.css

@@ -159,9 +159,14 @@
 .prokodo-Table__head__row {
   border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
+.prokodo-Table__head__row--double {
+  border-bottom-width: 3px;
+  border-bottom-style: double;
+}
 .prokodo-Table__head__cell {
   padding: var(--pk-table-padding-y) var(--pk-table-padding-x);
   font-weight: 500;
+  color: var(--pk-table-cell-fg);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -182,6 +187,10 @@
 .prokodo-Table__body__row {
   border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
+.prokodo-Table__body__row--double {
+  border-bottom-width: 3px;
+  border-bottom-style: double;
+}
 .prokodo-Table__body__row--has-link:hover {
   background: var(--pk-table-row-hover-bg);
 }

package/dist/components/table/Table.js

@@ -38,7 +38,7 @@ const Table = /* @__PURE__ */ __name(({
     ) }),
     isString(content) && /* @__PURE__ */ jsx(Animated, { className: bem("content"), delay: 500, children: /* @__PURE__ */ jsx(RichText, { children: content }) }),
     /* @__PURE__ */ jsx("div", { className: bem("table__wrapper"), children: /* @__PURE__ */ jsxs("table", { "aria-label": ariaLabel, className: bem("table"), ...props, children: [
-      /* @__PURE__ */ jsx("thead", { className: bem("head"), children: /* @__PURE__ */ jsx("tr", { className: bem("head__row"), children: header.map((cell, i) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("thead", { className: bem("head"), children: /* @__PURE__ */ jsx("tr", { className: bem("head__row", { [type]: true }), children: header.map((cell, i) => /* @__PURE__ */ jsx(
         "th",
         {
           className: bem("head__cell", void 0, cell == null ? void 0 : cell.className),
@@ -52,6 +52,7 @@ const Table = /* @__PURE__ */ __name(({
           "tr",
           {
             className: bem("body__row", {
+              [type]: true,
               /* istanbul ignore next */
               "has-link": isString((_a = row == null ? void 0 : row.redirect) == null ? void 0 : _a.href)
             }),

package/dist/components/table/Table.module.css

@@ -159,9 +159,14 @@
 .prokodo-Table__head__row {
   border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
+.prokodo-Table__head__row--double {
+  border-bottom-width: 3px;
+  border-bottom-style: double;
+}
 .prokodo-Table__head__cell {
   padding: var(--pk-table-padding-y) var(--pk-table-padding-x);
   font-weight: 500;
+  color: var(--pk-table-cell-fg);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -182,6 +187,10 @@
 .prokodo-Table__body__row {
   border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
+.prokodo-Table__body__row--double {
+  border-bottom-width: 3px;
+  border-bottom-style: double;
+}
 .prokodo-Table__body__row--has-link:hover {
   background: var(--pk-table-row-hover-bg);
 }