@prokodo/ui 1.0.4 → 1.0.5

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/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/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/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

@@ -280,7 +280,7 @@ html[data-theme=dark] .prokodo-DatePicker--info, [data-theme=dark] .prokodo-Date
   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;
@@ -340,7 +340,7 @@ html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-Da
     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

@@ -280,7 +280,7 @@ html[data-theme=dark] .prokodo-DatePicker--info, [data-theme=dark] .prokodo-Date
   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;
@@ -340,7 +340,7 @@ html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-Da
     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.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/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

@@ -472,7 +472,7 @@ html[data-theme=dark] .prokodo-Input--info, [data-theme=dark] .prokodo-Input--in
 }
 .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

@@ -472,7 +472,7 @@ html[data-theme=dark] .prokodo-Input--info, [data-theme=dark] .prokodo-Input--in
 }
 .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.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/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/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

@@ -556,7 +556,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
 .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-Selec
   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;
@@ -759,35 +759,18 @@ html[data-theme=dark] .prokodo-Select__sheet, [data-theme=dark] .prokodo-Select_
 }
 .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

@@ -556,7 +556,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
 .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-Selec
   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;
@@ -759,35 +759,18 @@ html[data-theme=dark] .prokodo-Select__sheet, [data-theme=dark] .prokodo-Select_
 }
 .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;