@prokodo/ui 0.1.6 → 0.1.8

package/dist/components/accordion/Accordion.css

@@ -144,7 +144,7 @@
   margin-bottom: 8px;
   overflow: hidden;
   transition: border 0.3s ease;
-  box-shadow: var(--elevation-3);
+  box-shadow: var(--elevation-1);
 }
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
@@ -237,6 +237,9 @@
 .prokodo-Accordion__title {
   font-weight: 500;
 }
+html[data-theme=dark] .prokodo-Accordion__title {
+  color: var(--color-grey-900);
+}
 .prokodo-Accordion__icon {
   padding-left: 1rem;
   transition: transform 0.3s ease;
@@ -244,6 +247,9 @@
 .prokodo-Accordion__icon--is-hidden {
   display: none !important;
 }
+html[data-theme=dark] .prokodo-Accordion__icon {
+  color: var(--color-grey-900);
+}
 .prokodo-Accordion__content {
   padding: 16px;
   background-color: var(--color-white);

package/dist/components/accordion/Accordion.module.css

@@ -144,7 +144,7 @@
   margin-bottom: 8px;
   overflow: hidden;
   transition: border 0.3s ease;
-  box-shadow: var(--elevation-3);
+  box-shadow: var(--elevation-1);
 }
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
@@ -237,6 +237,9 @@
 .prokodo-Accordion__title {
   font-weight: 500;
 }
+html[data-theme=dark] .prokodo-Accordion__title {
+  color: var(--color-grey-900);
+}
 .prokodo-Accordion__icon {
   padding-left: 1rem;
   transition: transform 0.3s ease;
@@ -244,6 +247,9 @@
 .prokodo-Accordion__icon--is-hidden {
   display: none !important;
 }
+html[data-theme=dark] .prokodo-Accordion__icon {
+  color: var(--color-grey-900);
+}
 .prokodo-Accordion__content {
   padding: 16px;
   background-color: var(--color-white);

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

@@ -3,9 +3,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./Avatar.module.scss.js";
-import { Image } from "../image/Image.js";
 import { Icon, getIconSize } from "../icon/Icon.js";
 import { Link } from "../link/Link.js";
+import { Image } from "../image/Image.js";
 const bem = create(styles, "Avatar");
 function AvatarView({
   className,

package/dist/components/button/Button.css

@@ -254,7 +254,7 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
-.prokodo-Button--has-icon {
+.prokodo-Button--has-image, .prokodo-Button--has-icon {
   align-items: center;
 }
 .prokodo-Button--icon-only {
@@ -264,9 +264,6 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   border-radius: 10000px;
   padding: 0.75rem;
 }
-html[data-theme=dark] .prokodo-Button--icon-only {
-  background: none;
-}
 .prokodo-Button--has-fullWidth {
   display: flex;
   justify-content: center;
@@ -280,8 +277,11 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   flex-direction: row;
   align-items: center;
 }
+.prokodo-Button__image {
+  margin-right: 0.5rem;
+}
 .prokodo-Button__icon {
-  margin-right: 5px;
+  margin-right: 0.5rem;
 }
 .prokodo-Button__icon--icon-only {
   margin-right: 0;

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

@@ -254,7 +254,7 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
-.prokodo-Button--has-icon {
+.prokodo-Button--has-image, .prokodo-Button--has-icon {
   align-items: center;
 }
 .prokodo-Button--icon-only {
@@ -264,9 +264,6 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   border-radius: 10000px;
   padding: 0.75rem;
 }
-html[data-theme=dark] .prokodo-Button--icon-only {
-  background: none;
-}
 .prokodo-Button--has-fullWidth {
   display: flex;
   justify-content: center;
@@ -280,8 +277,11 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   flex-direction: row;
   align-items: center;
 }
+.prokodo-Button__image {
+  margin-right: 0.5rem;
+}
 .prokodo-Button__icon {
-  margin-right: 5px;
+  margin-right: 0.5rem;
 }
 .prokodo-Button__icon--icon-only {
   margin-right: 0;

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

@@ -15,10 +15,12 @@ const styles = {
   "prokodo-Button--has-text-warning": "prokodo-Button--has-text-warning",
   "prokodo-Button--has-text-error": "prokodo-Button--has-text-error",
   "prokodo-Button--has-variant-outlined": "prokodo-Button--has-variant-outlined",
+  "prokodo-Button--has-image": "prokodo-Button--has-image",
   "prokodo-Button--has-icon": "prokodo-Button--has-icon",
   "prokodo-Button--icon-only": "prokodo-Button--icon-only",
   "prokodo-Button--has-fullWidth": "prokodo-Button--has-fullWidth",
   "prokodo-Button__title": "prokodo-Button__title",
+  "prokodo-Button__image": "prokodo-Button__image",
   "prokodo-Button__icon": "prokodo-Button__icon",
   "prokodo-Button__icon--icon-only": "prokodo-Button__icon--icon-only",
   "prokodo-Button__link": "prokodo-Button__link",

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

@@ -4,6 +4,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./Button.module.scss.js";
+import { Image } from "../image/Image.js";
 import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Button");
 const ButtonView = /* @__PURE__ */ __name(({
@@ -15,6 +16,7 @@ const ButtonView = /* @__PURE__ */ __name(({
   contentClassName,
   disabled,
   redirect,
+  image,
   iconProps = {},
   isIconOnly,
   LinkComponent,
@@ -25,6 +27,15 @@ const ButtonView = /* @__PURE__ */ __name(({
   const iconMod = { "icon-only": isIconOnly };
   const { title } = rest;
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    (image == null ? void 0 : image.src) !== void 0 && /* @__PURE__ */ jsx(
+      Image,
+      {
+        height: 20,
+        width: 20,
+        ...image,
+        className: bem("image", void 0, image == null ? void 0 : image.className)
+      }
+    ),
     iconName && /* @__PURE__ */ jsx(Icon, { className: bem("icon", iconMod), ...iconProps }),
     title
   ] });
@@ -36,6 +47,7 @@ const ButtonView = /* @__PURE__ */ __name(({
       void 0,
       {
         "has-fullWidth": Boolean(fullWidth),
+        "has-image": (image == null ? void 0 : image.src) !== void 0,
         "has-icon": !Boolean(isIconOnly) && isString(iconProps == null ? void 0 : iconProps.name),
         [`has-variant-${variant}`]: true,
         [`has-bg-${color}`]: variant === "contained",

package/dist/components/drawer/Drawer.view.js

@@ -14,6 +14,7 @@ const DrawerView = /* @__PURE__ */ __name(({
   titleProps,
   anchor = "left",
   fullscreen = false,
+  hideHeader = false,
   renderHeader,
   closeButtonRef,
   closeButtonProps,
@@ -63,7 +64,7 @@ const DrawerView = /* @__PURE__ */ __name(({
             ),
             ...rest,
             children: [
-              renderHeader ? renderHeader() : /* @__PURE__ */ jsxs("div", { className: bem("header"), children: [
+              renderHeader !== void 0 ? renderHeader() : !Boolean(hideHeader) && /* @__PURE__ */ jsxs("div", { className: bem("header"), children: [
                 isString(title) && /* @__PURE__ */ jsx(Headline, { size: "md", ...titleProps, id: "drawer-title", children: title }),
                 /* @__PURE__ */ jsx(
                   Button,

package/dist/components/form/Form.view.js

@@ -99,7 +99,7 @@ const FormView = /* @__PURE__ */ __name(({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
-          (hideResponse === false || hideResponse === void 0) && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
+          hideResponse !== false && hideResponse !== void 0 && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
           !isNull(button) && Boolean(isHoneypotEmpty) && /* @__PURE__ */ jsx(
             Button,
             {
@@ -109,7 +109,7 @@ const FormView = /* @__PURE__ */ __name(({
               ...button,
               className: bem("footer__submit", void 0, button == null ? void 0 : button.className),
               color: (button == null ? void 0 : button.color) ?? variant,
-              disabled: Boolean(formMessages == null ? void 0 : formMessages.errors) || !isFormValid
+              disabled: !isFormValid
             }
           )
         ] })

package/dist/components/label/Label.css

@@ -162,6 +162,12 @@
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+html[data-theme=dark] .prokodo-Label__highlighted {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--color-grey-800);
+}
 .prokodo-Label__highlighted--error {
   background-image: var(--gradient-text-error);
 }
@@ -170,5 +176,5 @@
   font-style: normal;
 }
 html[data-theme=dark] .prokodo-Label__text {
-  color: var(--color-grey-700);
+  color: var(--color-grey-800);
 }

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

@@ -162,6 +162,12 @@
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+html[data-theme=dark] .prokodo-Label__highlighted {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--color-grey-800);
+}
 .prokodo-Label__highlighted--error {
   background-image: var(--gradient-text-error);
 }
@@ -170,5 +176,5 @@
   font-style: normal;
 }
 html[data-theme=dark] .prokodo-Label__text {
-  color: var(--color-grey-700);
+  color: var(--color-grey-800);
 }

package/dist/components/snackbar/Snackbar.css

@@ -180,7 +180,7 @@
 }
 
 .prokodo-SnackbarProvider {
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
   gap: 8;

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

@@ -180,7 +180,7 @@
 }
 
 .prokodo-SnackbarProvider {
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
   gap: 8;

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.6";
+const PROKODO_UI_VERSION = "0.1.8";
 export {
   PROKODO_UI_VERSION
 };

package/dist/theme.css

@@ -289,7 +289,7 @@
   margin-bottom: 8px;
   overflow: hidden;
   transition: border 0.3s ease;
-  box-shadow: var(--elevation-3);
+  box-shadow: var(--elevation-1);
 }
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
@@ -382,6 +382,9 @@
 .prokodo-Accordion__title {
   font-weight: 500;
 }
+html[data-theme=dark] .prokodo-Accordion__title {
+  color: var(--color-grey-900);
+}
 .prokodo-Accordion__icon {
   padding-left: 1rem;
   transition: transform 0.3s ease;
@@ -389,6 +392,9 @@
 .prokodo-Accordion__icon--is-hidden {
   display: none !important;
 }
+html[data-theme=dark] .prokodo-Accordion__icon {
+  color: var(--color-grey-900);
+}
 .prokodo-Accordion__content {
   padding: 16px;
   background-color: var(--color-white);
@@ -658,7 +664,7 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
-.prokodo-Button--has-icon {
+.prokodo-Button--has-image, .prokodo-Button--has-icon {
   align-items: center;
 }
 .prokodo-Button--icon-only {
@@ -668,9 +674,6 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   border-radius: 10000px;
   padding: 0.75rem;
 }
-html[data-theme=dark] .prokodo-Button--icon-only {
-  background: none;
-}
 .prokodo-Button--has-fullWidth {
   display: flex;
   justify-content: center;
@@ -684,8 +687,11 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   flex-direction: row;
   align-items: center;
 }
+.prokodo-Button__image {
+  margin-right: 0.5rem;
+}
 .prokodo-Button__icon {
-  margin-right: 5px;
+  margin-right: 0.5rem;
 }
 .prokodo-Button__icon--icon-only {
   margin-right: 0;
@@ -2468,6 +2474,12 @@ html[data-theme=dark] .prokodo-Input__helperText {
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+html[data-theme=dark] .prokodo-Label__highlighted {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--color-grey-800);
+}
 .prokodo-Label__highlighted--error {
   background-image: var(--gradient-text-error);
 }
@@ -2476,7 +2488,7 @@ html[data-theme=dark] .prokodo-Input__helperText {
   font-style: normal;
 }
 html[data-theme=dark] .prokodo-Label__text {
-  color: var(--color-grey-700);
+  color: var(--color-grey-800);
 }
 
 .prokodo-Link {
@@ -4477,7 +4489,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
 }
 
 .prokodo-SnackbarProvider {
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
   gap: 8;