@quen-ui/components 0.0.13

package/dist/Card/Card.es.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import Title from "../typography/Title/Title.es.js";
+import { CardStyled, CardHeaderStyled, CardContentStyled, CardActionsStyled } from "./styles.es.js";
+import Button from "../Button/Button.es.js";
+import Divider from "../Divider/Divider.es.js";
+const Card = ({
+  title,
+  children,
+  size = "m",
+  extra,
+  className,
+  classNameHeader,
+  classNameContent,
+  classNameAction,
+  actionContent,
+  cover,
+  leftContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(CardStyled, { className, ...props, children: [
+    cover,
+    title && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(CardHeaderStyled, { size, className: classNameHeader, children: [
+        leftContent,
+        /* @__PURE__ */ jsx(Title, { size, children: title }),
+        extra && /* @__PURE__ */ jsx(Button, { view: "link", size: "s", children: extra })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContentStyled, { size, className: classNameContent, children }),
+    actionContent && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { direction: "horizontal" }),
+      /* @__PURE__ */ jsx(CardActionsStyled, { size, className: classNameAction, children: actionContent })
+    ] })
+  ] });
+};
+export {
+  Card as default
+};

package/dist/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card';
+export type { ICardProps } from './types';

package/dist/Card/styles.cjs.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const getSizing = (size) => {
+  switch (size) {
+    case "xs":
+      return styled.css`
+        padding: 0.25rem;
+        gap: 0.75rem;
+      `;
+    case "s":
+      return styled.css`
+        padding: 0.5rem;
+        gap: 1rem;
+      `;
+    case "l":
+      return styled.css`
+        padding: 1.5rem;
+        gap: 2rem;
+      `;
+    case "m":
+    default:
+      return styled.css`
+        padding: 1rem;
+        gap: 1.5rem
+      `;
+  }
+};
+const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
+  border-radius: 0.25rem;
+  border: 1px solid ${({ theme }) => theme.colors.grayViolet["5"]};
+  max-width: 350px;
+`;
+const CardHeaderStyled = styled.div`
+  ${({ size }) => getSizing(size)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CardContentStyled = styled.div`
+  ${({ size }) => getSizing(size)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CardActionsStyled = styled.div`
+  ${({ size }) => getSizing(size)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+exports.CardActionsStyled = CardActionsStyled;
+exports.CardContentStyled = CardContentStyled;
+exports.CardHeaderStyled = CardHeaderStyled;
+exports.CardStyled = CardStyled;

package/dist/Card/styles.d.ts

@@ -0,0 +1,11 @@
+import { TQuenSize } from '../types/size';
+export declare const CardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const CardHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+}>> & string;
+export declare const CardContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+}>> & string;
+export declare const CardActionsStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+}>> & string;

package/dist/Card/styles.es.js

@@ -0,0 +1,55 @@
+import styled, { css } from "styled-components";
+const getSizing = (size) => {
+  switch (size) {
+    case "xs":
+      return css`
+        padding: 0.25rem;
+        gap: 0.75rem;
+      `;
+    case "s":
+      return css`
+        padding: 0.5rem;
+        gap: 1rem;
+      `;
+    case "l":
+      return css`
+        padding: 1.5rem;
+        gap: 2rem;
+      `;
+    case "m":
+    default:
+      return css`
+        padding: 1rem;
+        gap: 1.5rem
+      `;
+  }
+};
+const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
+  border-radius: 0.25rem;
+  border: 1px solid ${({ theme }) => theme.colors.grayViolet["5"]};
+  max-width: 350px;
+`;
+const CardHeaderStyled = styled.div`
+  ${({ size }) => getSizing(size)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CardContentStyled = styled.div`
+  ${({ size }) => getSizing(size)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CardActionsStyled = styled.div`
+  ${({ size }) => getSizing(size)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+export {
+  CardActionsStyled,
+  CardContentStyled,
+  CardHeaderStyled,
+  CardStyled
+};

package/dist/Card/types.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export interface ICardProps {
+    /** Card title (displayed in the header) */
+    title?: React.ReactNode;
+    /** Class for the main container */
+    className?: string;
+    /** Class for header */
+    classNameHeader?: string;
+    /** Class for main content */
+    classNameContent?: string;
+    /** Class for action block */
+    classNameAction?: string;
+    /** Card size (affects paddings and fonts)  */
+    size?: TQuenSize;
+    /** Additional content in the header (to the right of the title) */
+    extra?: React.ReactNode;
+    /** Footer content (buttons/actions) */
+    actionContent?: React.ReactNode;
+    /** Image/cover at the top */
+    cover?: React.ReactNode;
+    /** Main card content */
+    children?: React.ReactNode;
+    leftContent?: React.ReactNode;
+    [key: string]: any;
+}

package/dist/Checkbox/Checkbox.cjs.js

@@ -0,0 +1,39 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const Text = require("../typography/Text/Text.cjs.js");
+const styles = require("./styles.cjs.js");
+const Checkbox = ({
+  disabled,
+  label,
+  size = "m",
+  name,
+  id,
+  onChange,
+  checked,
+  value,
+  className,
+  intermediate,
+  ...props
+}) => {
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.checked, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CheckboxLabelStyled, { disabled, className, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styles.CheckboxInputStyled,
+      {
+        intermediate,
+        checked,
+        type: "checkbox",
+        name,
+        onChange: handleChange,
+        size,
+        disabled,
+        value,
+        id
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: label })
+  ] });
+};
+module.exports = Checkbox;

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ICheckboxProps } from './types';
+declare const Checkbox: ({ disabled, label, size, name, id, onChange, checked, value, className, intermediate, ...props }: ICheckboxProps) => React.ReactElement;
+export default Checkbox;

package/dist/Checkbox/Checkbox.es.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Text from "../typography/Text/Text.es.js";
+import { CheckboxLabelStyled, CheckboxInputStyled } from "./styles.es.js";
+const Checkbox = ({
+  disabled,
+  label,
+  size = "m",
+  name,
+  id,
+  onChange,
+  checked,
+  value,
+  className,
+  intermediate,
+  ...props
+}) => {
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.checked, event);
+  };
+  return /* @__PURE__ */ jsxs(CheckboxLabelStyled, { disabled, className, ...props, children: [
+    /* @__PURE__ */ jsx(
+      CheckboxInputStyled,
+      {
+        intermediate,
+        checked,
+        type: "checkbox",
+        name,
+        onChange: handleChange,
+        size,
+        disabled,
+        value,
+        id
+      }
+    ),
+    label && /* @__PURE__ */ jsx(Text, { size, children: label })
+  ] });
+};
+export {
+  Checkbox as default
+};

package/dist/Checkbox/CheckboxGroup.cjs.js

@@ -0,0 +1,82 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Checkbox = require("./Checkbox.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const CheckboxGroup = ({
+  ...props
+}) => {
+  const {
+    name,
+    className,
+    size = "m",
+    getItemKey,
+    getItemLabel,
+    direction,
+    options,
+    disabled,
+    getItemDisabled,
+    getItemValue,
+    value = [],
+    onChange,
+    label,
+    required,
+    error,
+    ...otherProps
+  } = helpers.withDefaultGetters(props);
+  const getIsChecked = (item) => value.includes(
+    getItemValue(item)
+  );
+  const handleChange = (params, event) => {
+    let newValue = [];
+    if (params.isChecked) {
+      newValue = [...value];
+      newValue.push(params.value);
+    } else {
+      newValue = value.filter((v) => v !== params.value);
+    }
+    onChange == null ? void 0 : onChange(newValue, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.CheckboxGroupWrapper,
+    {
+      ...otherProps,
+      direction,
+      className,
+      isError: Boolean(error),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox-group__required", children: "*" })
+        ] }),
+        options.map((option) => {
+          var _a;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              size,
+              label: getItemLabel(option),
+              name,
+              checked: getIsChecked(option),
+              disabled: disabled ?? getItemDisabled(option),
+              value: getItemValue(option),
+              onChange: (isChecked, event) => handleChange(
+                {
+                  isChecked,
+                  value: getItemValue(
+                    option
+                  )
+                },
+                event
+              )
+            },
+            getItemKey(option) ?? ((_a = getItemLabel(option)) == null ? void 0 : _a.toString())
+          );
+        }),
+        typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "checkbox-group__error-message", size: "xs", children: error })
+      ]
+    }
+  );
+};
+module.exports = CheckboxGroup;

package/dist/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ICheckboxGroupProps, ICheckboxGroupDefaultItem } from './types';
+declare const CheckboxGroup: <ITEM = ICheckboxGroupDefaultItem, VALUE extends string | number = string | number>({ ...props }: ICheckboxGroupProps<ITEM, VALUE>) => React.ReactElement;
+export default CheckboxGroup;

package/dist/Checkbox/CheckboxGroup.es.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CheckboxGroupWrapper } from "./styles.es.js";
+import Checkbox from "./Checkbox.es.js";
+import { withDefaultGetters } from "./helpers.es.js";
+import Text from "../typography/Text/Text.es.js";
+const CheckboxGroup = ({
+  ...props
+}) => {
+  const {
+    name,
+    className,
+    size = "m",
+    getItemKey,
+    getItemLabel,
+    direction,
+    options,
+    disabled,
+    getItemDisabled,
+    getItemValue,
+    value = [],
+    onChange,
+    label,
+    required,
+    error,
+    ...otherProps
+  } = withDefaultGetters(props);
+  const getIsChecked = (item) => value.includes(
+    getItemValue(item)
+  );
+  const handleChange = (params, event) => {
+    let newValue = [];
+    if (params.isChecked) {
+      newValue = [...value];
+      newValue.push(params.value);
+    } else {
+      newValue = value.filter((v) => v !== params.value);
+    }
+    onChange == null ? void 0 : onChange(newValue, event);
+  };
+  return /* @__PURE__ */ jsxs(
+    CheckboxGroupWrapper,
+    {
+      ...otherProps,
+      direction,
+      className,
+      isError: Boolean(error),
+      children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "label", size, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "checkbox-group__required", children: "*" })
+        ] }),
+        options.map((option) => {
+          var _a;
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size,
+              label: getItemLabel(option),
+              name,
+              checked: getIsChecked(option),
+              disabled: disabled ?? getItemDisabled(option),
+              value: getItemValue(option),
+              onChange: (isChecked, event) => handleChange(
+                {
+                  isChecked,
+                  value: getItemValue(
+                    option
+                  )
+                },
+                event
+              )
+            },
+            getItemKey(option) ?? ((_a = getItemLabel(option)) == null ? void 0 : _a.toString())
+          );
+        }),
+        typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "checkbox-group__error-message", size: "xs", children: error })
+      ]
+    }
+  );
+};
+export {
+  CheckboxGroup as default
+};

package/dist/Checkbox/helpers.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultGetItemKey = (item) => item.key;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemValue = (item) => item.value;
+const withDefaultGetters = (props) => ({
+  ...props,
+  getItemKey: props.getItemKey || defaultGetItemKey,
+  getItemLabel: props.getItemLabel || defaultGetItemLabel,
+  getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+  getItemValue: props.getItemValue || defaultGetItemValue
+});
+exports.withDefaultGetters = withDefaultGetters;

package/dist/Checkbox/helpers.d.ts

@@ -0,0 +1,18 @@
+import { ICheckboxGroupDefaultItem, TCheckboxGroupPropGetItemKey, TCheckboxGroupPropGetItemLabel, TCheckboxGroupPropGetItemDisabled, TCheckboxGroupPropGetItemValue, ICheckboxGroupProps } from './types';
+export declare const withDefaultGetters: <ITEM, VALUE extends (string | number) = string | number>(props: ICheckboxGroupProps<ITEM, VALUE>) => {
+    getItemKey: TCheckboxGroupPropGetItemKey<ICheckboxGroupDefaultItem> | TCheckboxGroupPropGetItemKey<ITEM>;
+    getItemLabel: TCheckboxGroupPropGetItemLabel<ICheckboxGroupDefaultItem> | TCheckboxGroupPropGetItemLabel<ITEM>;
+    getItemDisabled: TCheckboxGroupPropGetItemDisabled<ICheckboxGroupDefaultItem> | TCheckboxGroupPropGetItemDisabled<ITEM>;
+    getItemValue: TCheckboxGroupPropGetItemValue<ICheckboxGroupDefaultItem> | TCheckboxGroupPropGetItemValue<ITEM, VALUE>;
+    label?: React.ReactNode;
+    value?: VALUE[] | undefined;
+    size?: import('..').TQuenSize;
+    disabled?: boolean;
+    options: ITEM[];
+    name?: string;
+    direction?: "vertical" | "horizontal";
+    onChange?: ((value: VALUE[], event: import('react').ChangeEvent<HTMLInputElement>) => void) | undefined;
+    className?: string;
+    required?: boolean;
+    error?: string;
+};

package/dist/Checkbox/helpers.es.js

@@ -0,0 +1,14 @@
+const defaultGetItemKey = (item) => item.key;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemValue = (item) => item.value;
+const withDefaultGetters = (props) => ({
+  ...props,
+  getItemKey: props.getItemKey || defaultGetItemKey,
+  getItemLabel: props.getItemLabel || defaultGetItemLabel,
+  getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+  getItemValue: props.getItemValue || defaultGetItemValue
+});
+export {
+  withDefaultGetters
+};

package/dist/Checkbox/index.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Checkbox$1 = require("./Checkbox.cjs.js");
+const CheckboxGroup = require("./CheckboxGroup.cjs.js");
+const Checkbox = Checkbox$1;
+Checkbox.Group = CheckboxGroup;
+exports.Checkbox = Checkbox;

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,8 @@
+import { default as CheckboxComponent } from './Checkbox';
+import { default as CheckboxGroupComponent } from './CheckboxGroup';
+type TCheckbox = typeof CheckboxComponent & {
+    Group: typeof CheckboxGroupComponent;
+};
+declare const Checkbox: TCheckbox;
+export { Checkbox };
+export type { ICheckboxGroupProps, ICheckboxProps, TCheckboxGroupPropGetItemKey, ICheckboxGroupDefaultItem, TCheckboxGroupPropGetItemDisabled, TCheckboxGroupPropGetItemLabel, TCheckboxGroupPropGetItemValue } from './types';

package/dist/Checkbox/index.es.js

@@ -0,0 +1,7 @@
+import Checkbox$1 from "./Checkbox.es.js";
+import CheckboxGroup from "./CheckboxGroup.es.js";
+const Checkbox = Checkbox$1;
+Checkbox.Group = CheckboxGroup;
+export {
+  Checkbox
+};

package/dist/Checkbox/styles.cjs.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const getSizing = (size) => {
+  switch (size) {
+    case "l":
+      return "1.5rem";
+    case "s":
+      return "1rem";
+    case "xs":
+      return "0.875rem";
+    case "m":
+    default:
+      return "1.25rem";
+  }
+};
+const CheckboxLabelStyled = styled.label.withConfig({
+  shouldForwardProp: (props) => !["disabled"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  user-select: none;
+`;
+const CheckboxInputStyled = styled.input.withConfig({
+  shouldForwardProp: (props) => !["size", "intermediate"].includes(props)
+})`
+  width: ${({ size }) => getSizing(size)};
+  height: ${({ size }) => getSizing(size)};
+  border: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+  transition:
+    border-color 0.15s,
+    background-color 0.15s;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  -webkit-appearance: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc(calc(${({ size }) => getSizing(size)} - 1px) / 2);
+    left: calc(calc(${({ size }) => getSizing(size)} - 6px) / 5);
+    box-sizing: border-box;
+    width: calc(${({ size }) => getSizing(size)} * 0.6);
+    height: calc(${({ size }) => getSizing(size)} * 0.35);
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+    border-left: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+    border-bottom: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+    opacity: 0;
+    transition:
+      opacity 0.15s,
+      transform 0.15s,
+      background-color 0.08s;
+    transform: rotate(-50deg) scale(0, 1);
+    transform-origin: 0 0;
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    cursor: not-allowed;
+  }
+
+  &:disabled:checked {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    cursor: not-allowed;
+
+    &:before {
+      background-color: ${({ theme }) => theme.colors.gray[2]};
+      border-left: 1px solid ${({ theme }) => theme.colors.gray[4]};
+      border-bottom: 1px solid ${({ theme }) => theme.colors.gray[4]};
+    }
+  }
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+    border-color: ${({ theme }) => theme.colors.violet[5]};
+
+    &::before {
+      opacity: 1;
+      transform: rotate(-50deg) scale(1, 1);
+    }
+  }
+
+  &:hover:not(:disabled) {
+    border: 1px solid ${({ theme }) => theme.colors.violet[9]};
+  }
+
+  &:hover:checked:not(:disabled) {
+    border-color: ${({ theme }) => theme.colors.violet[9]};
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+
+    &:before {
+      background-color: ${({ theme }) => theme.colors.violet[9]};
+    }
+  }
+
+  ${({ intermediate, size, theme }) => intermediate && styled.css`
+      &,
+      &:hover,
+      &:checked {
+        background-color: ${({ theme: theme2 }) => theme2.colors.violet[9]};
+        border-color: ${({ theme: theme2 }) => theme2.colors.grayViolet[9]};
+        &::before {
+          top: calc(calc(${getSizing(size)} - 0.125rem) / 2);
+          left: 0.125rem;
+          width: calc(${getSizing(size)} - 0.125rem * 2 - 0.125rem);
+          height: 0.125rem;
+          background-color: ${theme.colors.grayViolet[7]};
+          border: none;
+          opacity: 1;
+          transition:
+            opacity 0.15s,
+            transform 0.15s,
+            background-color 0.08s 0.04s;
+          transform: rotate(0) translate(0, -50%);
+        }
+      }
+    `};
+`;
+const CheckboxGroupWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["direction", "isError"].includes(props)
+})`
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
+
+  .checkbox-group__required {
+    color: ${({ theme }) => theme.colors.red[7]};
+  }
+
+  .checkbox-group__error-message {
+    color: ${({ theme }) => theme.colors.red[7]};
+  }
+
+  ${({ isError, theme }) => isError && styled.css`
+      border-left: 2px solid ${theme.colors.red[9]};
+      padding-left: 0.5rem;
+    `};
+`;
+exports.CheckboxGroupWrapper = CheckboxGroupWrapper;
+exports.CheckboxInputStyled = CheckboxInputStyled;
+exports.CheckboxLabelStyled = CheckboxLabelStyled;