@prokodo/ui 0.1.13 → 0.1.14

package/dist/components/checkbox-group/CheckboxGroup.view.js

@@ -0,0 +1,97 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./CheckboxGroup.module.scss.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+const bem = create(styles, "CheckboxGroup");
+function CheckboxGroupView({
+  ariaLabel,
+  legend,
+  hideLegend,
+  legendProps,
+  name,
+  disabled,
+  required,
+  options,
+  selectedValues,
+  hiddenInputName,
+  layout = "stack",
+  variant = "plain",
+  translations: t,
+  isChecked,
+  onToggle
+}) {
+  if (!(options == null ? void 0 : options.length)) return null;
+  const label = ariaLabel ?? (t == null ? void 0 : t.ariaLabel) ?? "Options";
+  const isGroupRequiredActive = Boolean(required) && selectedValues.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "aria-label": label,
+      "aria-required": required || void 0,
+      className: bem(),
+      children: [
+        legend ? /* @__PURE__ */ jsxs(
+          "legend",
+          {
+            ...legendProps,
+            className: bem(
+              "legend",
+              {
+                "is-hidden": Boolean(hideLegend)
+              },
+              legendProps == null ? void 0 : legendProps.className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: bem("legendLabel"), children: legend }),
+              required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("legendRequiredMark"), children: "*" }) : null
+            ]
+          }
+        ) : null,
+        hiddenInputName ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            name: hiddenInputName,
+            type: "hidden",
+            value: selectedValues.join(",")
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: bem("list", { [layout]: true, [variant]: true }), children: options.map((opt) => {
+          const checked = isChecked(opt.value);
+          const itemDisabled = Boolean(disabled) || Boolean(opt.disabled);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem("item", {
+                disabled: itemDisabled
+              }),
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked,
+                  description: opt.description,
+                  disabled: itemDisabled,
+                  icon: opt.icon,
+                  iconLabel: opt.iconLabel,
+                  name,
+                  required: Boolean(opt.required) || isGroupRequiredActive,
+                  showRequiredMark: Boolean(opt.required),
+                  title: opt.title,
+                  value: opt.value,
+                  variant,
+                  onChange: /* @__PURE__ */ __name(() => onToggle == null ? void 0 : onToggle(opt.value), "onChange")
+                }
+              )
+            },
+            opt.value
+          );
+        }) })
+      ]
+    }
+  );
+}
+__name(CheckboxGroupView, "CheckboxGroupView");
+export {
+  CheckboxGroupView
+};

package/dist/components/checkbox-group/index.js

@@ -0,0 +1,4 @@
+import { CheckboxGroup } from "./CheckboxGroup.js";
+export {
+  CheckboxGroup
+};

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

@@ -22,6 +22,7 @@ function DialogView({
   containerChildren,
   className,
   classNameHeader,
+  actionsClassName,
   height,
   scroll = "paper",
   fullScreen = false,
@@ -126,7 +127,7 @@ function DialogView({
                     children
                   }
                 ),
-                actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions"), children: [
+                actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions", void 0, actionsClassName), children: [
                   /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
                   actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
                   /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })

package/dist/components/snackbar/Snackbar.css

@@ -148,7 +148,11 @@
   color: var(--color-black);
 }
 .prokodo-Snackbar--info {
-  background-color: var(--color-info);
+  background-color: var(--color-grey-500);
+}
+html[data-theme=dark] .prokodo-Snackbar--info {
+  background-color: var(--color-grey-300);
+  color: var(--color-grey-900);
 }
 .prokodo-Snackbar__message {
   flex: 1 1;

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

@@ -148,7 +148,11 @@
   color: var(--color-black);
 }
 .prokodo-Snackbar--info {
-  background-color: var(--color-info);
+  background-color: var(--color-grey-500);
+}
+html[data-theme=dark] .prokodo-Snackbar--info {
+  background-color: var(--color-grey-300);
+  color: var(--color-grey-900);
 }
 .prokodo-Snackbar__message {
   flex: 1 1;

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.13";
+const PROKODO_UI_VERSION = "0.1.14";
 export {
   PROKODO_UI_VERSION
 };

package/dist/index.js

@@ -9,6 +9,8 @@ import { Button } from "./components/button/Button.js";
 import { Calendly } from "./components/calendly/Calendly.js";
 import { Card } from "./components/card/Card.js";
 import { Carousel } from "./components/carousel/Carousel.js";
+import { Checkbox } from "./components/checkbox/Checkbox.js";
+import { CheckboxGroup } from "./components/checkbox-group/CheckboxGroup.js";
 import { Chip } from "./components/chip/Chip.js";
 import { DatePicker } from "./components/datePicker/DatePicker.js";
 import { Dialog } from "./components/dialog/Dialog.js";
@@ -62,6 +64,8 @@ export {
   Calendly,
   Card,
   Carousel,
+  Checkbox,
+  CheckboxGroup,
   Chip,
   DatePicker,
   Dialog,

package/dist/theme.css

@@ -160,7 +160,7 @@
   --color-secondary-700: #2393a2;
   --color-secondary-800: #236c77;
   --color-secondary-900: #1e484e;
-  --color-success: #2e7d32;
+  --color-success: #20E381;
   --color-warning: #f7b529;
   --color-error: #f0453a;
   --elevation-1: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
@@ -192,6 +192,10 @@
   --gradient-border-6: linear-gradient(90deg, var(--color-secondary-500) 4.63%, var(--color-primary-500) 100%);
   --gradient-border-7: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
   --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
   --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
   --gradient-text-primary-secondary-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 50%, var(--color-primary-500) 100%);
   --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-400) 100%);
@@ -236,7 +240,7 @@
   --color-secondary-700: #AFF3FF;
   --color-secondary-800: #CCF7FF;
   --color-secondary-900: #E6FBFF;
-  --color-success: #2e7d32;
+  --color-success: #20E381;
   --color-warning: #f7b529;
   --color-error: #f0453a;
   --elevation-1: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.08);
@@ -266,6 +270,11 @@
   --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
   --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
   --gradient-border-7: linear-gradient(180deg, var(--color-grey-400) 0%, var(--color-grey-600) 100%);
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
   --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
   --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-700) 100%);
   --gradient-text-grey: linear-gradient(90deg, var(--color-grey-700) 0%, var(--color-grey-900) 100%);
@@ -804,29 +813,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -882,7 +920,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -903,6 +941,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -921,6 +1019,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -964,7 +1082,6 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }
 
@@ -1228,6 +1345,306 @@ html[data-theme=dark] .prokodo-Card__background {
   }
 }
 
+.prokodo-Checkbox {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  grid-gap: 0.75rem;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-Checkbox--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.prokodo-Checkbox:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Checkbox--card {
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+.prokodo-Checkbox__left {
+  display: inline-flex;
+  align-items: center;
+}
+.prokodo-Checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.prokodo-Checkbox__control {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  position: relative;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: var(--inner-elevation-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+.prokodo-Checkbox__control::after {
+  content: "";
+  width: 9px;
+  height: 5px;
+  border-left: 2px solid var(--color-primary-500, #2f6bff);
+  border-bottom: 2px solid var(--color-primary-500, #2f6bff);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(0.6);
+  opacity: 0;
+  transition: transform 140ms ease, opacity 140ms ease;
+}
+.prokodo-Checkbox__control--checked {
+  border-color: rgba(255, 255, 255, 0.32);
+}
+.prokodo-Checkbox__control--checked::after {
+  opacity: 1;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
+}
+.prokodo-Checkbox__control--card {
+  box-shadow: var(--inner-elevation-1);
+}
+.prokodo-Checkbox__control--card.prokodo-Checkbox__control--checked {
+  background: rgba(255, 255, 255, 0.1);
+}
+.prokodo-Checkbox__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.prokodo-Checkbox__row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-Checkbox__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-grey-900);
+  margin: 0;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__requiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__desc {
+  color: var(--color-grey-700);
+  opacity: 0.82;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Checkbox__right {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  align-self: start;
+  margin-top: 2px;
+}
+.prokodo-Checkbox__rightIcon {
+  color: var(--color-grey-700);
+  opacity: 0.9;
+}
+
+.prokodo-CheckboxGroup {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__legend {
+  margin: 0 0 0.5rem 0;
+  padding: 0;
+  opacity: 0.82;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legend--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-CheckboxGroup__legendLabel {
+  color: var(--color-grey-900);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legendRequiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__list--plain {
+  gap: 0;
+}
+.prokodo-CheckboxGroup__list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.prokodo-CheckboxGroup__item {
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__item--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
 .prokodo-Chip {
   display: inline-flex;
   align-items: center;
@@ -4783,7 +5200,11 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   color: var(--color-black);
 }
 .prokodo-Snackbar--info {
-  background-color: var(--color-info);
+  background-color: var(--color-grey-500);
+}
+html[data-theme=dark] .prokodo-Snackbar--info {
+  background-color: var(--color-grey-300);
+  color: var(--color-grey-900);
 }
 .prokodo-Snackbar__message {
   flex: 1 1;