krl-alfred 2.17.59 → 2.18.1

package/dist/components/Button/stories/Button.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllVariants = exports.Success = exports.Ghost = exports.Inverted = exports.Secondary = exports.Primary = exports.Icon = exports.Default = void 0;
+exports.WithTooltip = exports.FullWidth = exports.IconOnly = exports.Disabled = exports.Loading = exports.AllSizes = exports.AllVariants = exports.Success = exports.Ghost = exports.Inverted = exports.Secondary = exports.Primary = exports.Icon = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Button_1 = __importDefault(require("../Button"));
 var props_1 = require("../props");
@@ -66,3 +66,23 @@ exports.AllVariants = {
     args: __assign({}, exports.Default.args),
     render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: '12px', flexWrap: 'wrap' } }, { children: props_1.variants.map(function (v) { return ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, args, { variant: v }, { children: v }), v)); }) }))); },
 };
+// Story displaying all sizes together
+exports.AllSizes = {
+    args: __assign({}, exports.Default.args),
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' } }, { children: props_1.sizes.map(function (s) { return ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, args, { size: s }, { children: s }), s)); }) }))); },
+};
+exports.Loading = {
+    args: __assign(__assign({}, exports.Default.args), { isLoading: true, children: "Yükleniyor..." }),
+};
+exports.Disabled = {
+    args: __assign(__assign({}, exports.Default.args), { disabled: true, children: "Devre Dışı" }),
+};
+exports.IconOnly = {
+    args: __assign(__assign({}, exports.Default.args), { children: undefined, icon: 'ArrowSmallRight', iconSize: "1.25rem" }),
+};
+exports.FullWidth = {
+    args: __assign(__assign({}, exports.Default.args), { width: "100%", children: "Tam Genişlik" }),
+};
+exports.WithTooltip = {
+    args: __assign(__assign({}, exports.Default.args), { tooltip: "Bu butona tıklayarak işlemi başlatabilirsiniz", children: "Tooltip'li Buton" }),
+};

package/dist/components/CampaignCard/stories/CampaignCard.stories.d.ts

@@ -7,10 +7,62 @@ declare const _default: {
             control: string;
             options: string[];
         };
+        hasDelivery: {
+            control: string;
+        };
+        isProgressComplete: {
+            control: string;
+        };
+        activeStep: {
+            control: string;
+        };
+        totalStep: {
+            control: string;
+        };
+        title: {
+            control: string;
+        };
+        progressTitle: {
+            control: string;
+        };
+        deliveryText: {
+            control: string;
+        };
+        onClick: {
+            action: string;
+        };
     };
 };
 export default _default;
 export declare const Default: {
+    args: {
+        size: "medium";
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const Large: {
+    args: {
+        size: string;
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const Medium: {
     args: {
         size: string;
         deliveryText: string;
@@ -24,3 +76,130 @@ export declare const Default: {
         image: import("react/jsx-runtime").JSX.Element;
     };
 };
+export declare const Small: {
+    args: {
+        size: string;
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const Xsmall: {
+    args: {
+        size: string;
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const AllSizes: {
+    args: {
+        size: "medium";
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+    render: (args: any) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithDelivery: {
+    args: {
+        hasDelivery: boolean;
+        deliveryText: string;
+        size: "medium";
+        onClick: () => void;
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const ProgressComplete: {
+    args: {
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        size: "medium";
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const ProgressIncomplete: {
+    args: {
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        size: "medium";
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        title: string;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const WithoutProgress: {
+    args: {
+        progressTitle: string;
+        activeStep: number;
+        totalStep: any;
+        size: "medium";
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        isProgressComplete: boolean;
+        title: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const Minimal: {
+    args: {
+        hasDelivery: boolean;
+        progressTitle: string;
+        activeStep: number;
+        totalStep: any;
+        title: string;
+        size: "medium";
+        deliveryText: string;
+        onClick: () => void;
+        isProgressComplete: boolean;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const LongTitle: {
+    args: {
+        title: string;
+        size: "medium";
+        deliveryText: string;
+        onClick: () => void;
+        hasDelivery: boolean;
+        isProgressComplete: boolean;
+        activeStep: number;
+        totalStep: number;
+        progressTitle: string;
+        image: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/CampaignCard/stories/CampaignCard.stories.js

@@ -14,29 +14,75 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.LongTitle = exports.Minimal = exports.WithoutProgress = exports.ProgressIncomplete = exports.ProgressComplete = exports.WithDelivery = exports.AllSizes = exports.Xsmall = exports.Small = exports.Medium = exports.Large = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var CampaignCard_1 = __importDefault(require("../CampaignCard"));
 var props_1 = require("../props");
+var defaultImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
+var defaultArgs = {
+    size: "medium",
+    deliveryText: "Son 24 saat",
+    onClick: function () { return console.log("onClick"); },
+    hasDelivery: false,
+    isProgressComplete: false,
+    activeStep: 2,
+    totalStep: 5,
+    title: "After four rentals, your fifth rental is 15% off 😎",
+    progressTitle: "Kazancın %10 indirim",
+    image: defaultImage,
+};
 exports.default = {
     title: 'Components/CampaignCard',
     component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '375px' } }, { children: (0, jsx_runtime_1.jsx)(CampaignCard_1.default, __assign({}, props)) })); },
     tags: ['autodocs'],
     argTypes: {
         size: { control: 'select', options: props_1.sizes },
+        hasDelivery: { control: 'boolean' },
+        isProgressComplete: { control: 'boolean' },
+        activeStep: { control: 'number' },
+        totalStep: { control: 'number' },
+        title: { control: 'text' },
+        progressTitle: { control: 'text' },
+        deliveryText: { control: 'text' },
+        onClick: { action: 'clicked' },
     }
 };
 exports.Default = {
-    args: {
-        size: "medium",
-        deliveryText: "Son 24 saat",
-        onClick: function () { return console.log("onClick"); },
-        hasDelivery: false,
-        isProgressComplete: false,
-        activeStep: 2,
-        totalStep: 5,
-        title: "After four rentals, your fifth rental is 15% off 😎",
-        progressTitle: "Kazancın %10 indirim",
-        image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
-    },
+    args: defaultArgs,
+};
+// Size stories
+exports.Large = {
+    args: __assign(__assign({}, defaultArgs), { size: 'large' }),
+};
+exports.Medium = {
+    args: __assign(__assign({}, defaultArgs), { size: 'medium' }),
+};
+exports.Small = {
+    args: __assign(__assign({}, defaultArgs), { size: 'small' }),
+};
+exports.Xsmall = {
+    args: __assign(__assign({}, defaultArgs), { size: 'xsmall' }),
+};
+// All sizes together
+exports.AllSizes = {
+    args: defaultArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, { children: props_1.sizes.map(function (s) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '375px' } }, { children: (0, jsx_runtime_1.jsx)(CampaignCard_1.default, __assign({}, args, { size: s })) }), s)); }) }))); },
+};
+exports.WithDelivery = {
+    args: __assign(__assign({}, defaultArgs), { hasDelivery: true, deliveryText: "Son 24 saat" }),
+};
+exports.ProgressComplete = {
+    args: __assign(__assign({}, defaultArgs), { isProgressComplete: true, activeStep: 5, totalStep: 5 }),
+};
+exports.ProgressIncomplete = {
+    args: __assign(__assign({}, defaultArgs), { isProgressComplete: false, activeStep: 2, totalStep: 5 }),
+};
+exports.WithoutProgress = {
+    args: __assign(__assign({}, defaultArgs), { progressTitle: "", activeStep: 0, totalStep: null }),
+};
+exports.Minimal = {
+    args: __assign(__assign({}, defaultArgs), { hasDelivery: false, progressTitle: "", activeStep: 0, totalStep: null, title: "Kampanya başlığı" }),
+};
+exports.LongTitle = {
+    args: __assign(__assign({}, defaultArgs), { title: "Çok uzun bir kampanya başlığı: Bu başlık taşma durumlarını test etmek için kasıtlı olarak uzun tutulmuştur ve farklı ekran boyutlarında nasıl görüneceğini kontrol etmemize yardımcı olur" }),
 };

package/dist/components/Checkbox/stories/Checkbox.stories.d.ts

@@ -17,9 +17,24 @@ declare const _default: {
         checked: {
             control: string;
         };
+        disabled: {
+            control: string;
+        };
+        valid: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
         color: {
             control: string;
         };
+        onChange: {
+            action: string;
+        };
     };
 };
 export default _default;
@@ -31,3 +46,128 @@ export declare const Default: {
         onChange: (e: any) => void;
     };
 };
+export declare const Checked: {
+    args: {
+        checked: boolean;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Unchecked: {
+    args: {
+        checked: boolean;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Disabled: {
+    args: {
+        disabled: boolean;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const DisabledChecked: {
+    args: {
+        disabled: boolean;
+        checked: boolean;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Invalid: {
+    args: {
+        valid: boolean;
+        id: string;
+        label: string;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Optional: {
+    args: {
+        required: boolean;
+        label: string;
+        id: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const ReadOnly: {
+    args: {
+        readOnly: boolean;
+        checked: boolean;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Small: {
+    args: {
+        size: string;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Medium: {
+    args: {
+        size: string;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Large: {
+    args: {
+        size: string;
+        id: string;
+        label: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const AllSizes: {
+    args: {
+        label: string;
+        valid: boolean;
+        id: string;
+        onChange: (e: any) => void;
+    };
+    render: (args: any) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const AllTextSizes: {
+    args: {
+        label: string;
+        valid: boolean;
+        id: string;
+        onChange: (e: any) => void;
+    };
+    render: (args: any) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithoutLabel: {
+    args: {
+        label: any;
+        id: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const LongLabel: {
+    args: {
+        label: string;
+        id: string;
+        valid: boolean;
+        onChange: (e: any) => void;
+    };
+};

package/dist/components/Checkbox/stories/Checkbox.stories.js

@@ -1,11 +1,29 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.LongLabel = exports.WithoutLabel = exports.AllTextSizes = exports.AllSizes = exports.Large = exports.Medium = exports.Small = exports.ReadOnly = exports.Optional = exports.Invalid = exports.DisabledChecked = exports.Disabled = exports.Unchecked = exports.Checked = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var Checkbox_1 = __importDefault(require("../Checkbox"));
 var props_1 = require("../props");
+var defaultArgs = {
+    label: "Text",
+    valid: true,
+    id: "check_1",
+    onChange: function (e) { return console.log("event", e); },
+};
 exports.default = {
     title: "Components/Checkbox",
     component: Checkbox_1.default,
@@ -15,14 +33,61 @@ exports.default = {
         textSize: { control: "select", options: props_1.textSizes },
         label: { control: "text" },
         checked: { control: "boolean" },
-        color: { control: 'color' },
+        disabled: { control: "boolean" },
+        valid: { control: "boolean" },
+        required: { control: "boolean" },
+        readOnly: { control: "boolean" },
+        color: { control: "color" },
+        onChange: { action: "changed" },
     },
 };
 exports.Default = {
-    args: {
-        label: "Text",
-        valid: true,
-        id: "check_1",
-        onChange: function (e) { return console.log("event", e); },
-    },
+    args: defaultArgs,
+};
+exports.Checked = {
+    args: __assign(__assign({}, defaultArgs), { checked: true, id: "check_checked" }),
+};
+exports.Unchecked = {
+    args: __assign(__assign({}, defaultArgs), { checked: false, id: "check_unchecked" }),
+};
+exports.Disabled = {
+    args: __assign(__assign({}, defaultArgs), { disabled: true, id: "check_disabled" }),
+};
+exports.DisabledChecked = {
+    args: __assign(__assign({}, defaultArgs), { disabled: true, checked: true, id: "check_disabled_checked" }),
+};
+exports.Invalid = {
+    args: __assign(__assign({}, defaultArgs), { valid: false, id: "check_invalid" }),
+};
+exports.Optional = {
+    args: __assign(__assign({}, defaultArgs), { required: false, label: "İsteğe bağlı alan", id: "check_optional" }),
+};
+exports.ReadOnly = {
+    args: __assign(__assign({}, defaultArgs), { readOnly: true, checked: true, id: "check_readonly" }),
+};
+// Size stories
+exports.Small = {
+    args: __assign(__assign({}, defaultArgs), { size: "small", id: "check_small" }),
+};
+exports.Medium = {
+    args: __assign(__assign({}, defaultArgs), { size: "medium", id: "check_medium" }),
+};
+exports.Large = {
+    args: __assign(__assign({}, defaultArgs), { size: "large", id: "check_large" }),
+};
+// All sizes together
+exports.AllSizes = {
+    args: defaultArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: "16px", flexDirection: "column" } }, { children: props_1.sizes.map(function (s) { return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, __assign({}, args, { size: s, id: "check_".concat(s), label: "".concat(s, " size") }), s)); }) }))); },
+};
+// All text sizes together
+exports.AllTextSizes = {
+    args: defaultArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: "16px", flexDirection: "column" } }, { children: props_1.textSizes.map(function (ts) { return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, __assign({}, args, { textSize: ts, id: "check_".concat(ts), label: "".concat(ts, " text size") }), ts)); }) }))); },
+};
+exports.WithoutLabel = {
+    args: __assign(__assign({}, defaultArgs), { label: undefined, id: "check_no_label" }),
+};
+exports.LongLabel = {
+    args: __assign(__assign({}, defaultArgs), { label: "Çok uzun bir etiket metni: Bu etiket taşma durumlarını test etmek için kasıtlı olarak uzun tutulmuştur ve farklı ekran boyutlarında nasıl görüneceğini kontrol etmemize yardımcı olur", id: "check_long_label" }),
 };

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxGroupProps } from "./props";
+declare const CheckboxGroup: ({ options, value, onChange, name, label, disabled, size, textSize, layout, valid, labelOffset, color, verticalAlign, required, readOnly, gap, }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default CheckboxGroup;

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var props_1 = require("./props");
+var CheckboxGroup_styled_1 = require("./CheckboxGroup.styled");
+var Checkbox_1 = __importDefault(require("../Checkbox"));
+var CheckboxGroup = function (_a) {
+    var _b = _a.options, options = _b === void 0 ? props_1.CheckboxGroupDefault.options : _b, _c = _a.value, value = _c === void 0 ? props_1.CheckboxGroupDefault.value : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxGroupDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxGroupDefault.name : _e, _f = _a.label, label = _f === void 0 ? props_1.CheckboxGroupDefault.label : _f, _g = _a.disabled, disabled = _g === void 0 ? props_1.CheckboxGroupDefault.disabled : _g, _h = _a.size, size = _h === void 0 ? props_1.CheckboxGroupDefault.size : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.CheckboxGroupDefault.textSize : _j, _k = _a.layout, layout = _k === void 0 ? props_1.CheckboxGroupDefault.layout : _k, _l = _a.valid, valid = _l === void 0 ? props_1.CheckboxGroupDefault.valid : _l, _m = _a.labelOffset, labelOffset = _m === void 0 ? props_1.CheckboxGroupDefault.labelOffset : _m, _o = _a.color, color = _o === void 0 ? props_1.CheckboxGroupDefault.color : _o, _p = _a.verticalAlign, verticalAlign = _p === void 0 ? props_1.CheckboxGroupDefault.verticalAlign : _p, _q = _a.required, required = _q === void 0 ? props_1.CheckboxGroupDefault.required : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.CheckboxGroupDefault.readOnly : _r, _s = _a.gap, gap = _s === void 0 ? props_1.CheckboxGroupDefault.gap : _s;
+    var handleCheckboxChange = function (optionValue, checked) {
+        if (!onChange)
+            return;
+        var currentValues = value || [];
+        var newValues;
+        if (checked) {
+            newValues = __spreadArray(__spreadArray([], currentValues, true), [optionValue], false);
+        }
+        else {
+            newValues = currentValues.filter(function (v) { return v !== optionValue; });
+        }
+        onChange(newValues);
+    };
+    return ((0, jsx_runtime_1.jsxs)(CheckboxGroup_styled_1.CheckboxGroupStyled, __assign({ "$layout": layout, "$gap": gap }, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", { children: label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "checkboxesWrapper" }, { children: options.map(function (option, index) {
+                    var checkboxId = option.id || "".concat(name, "_").concat(index);
+                    var isChecked = (value === null || value === void 0 ? void 0 : value.includes(option.value)) || false;
+                    return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, name: name, value: option.value, checked: isChecked, onChange: function (e) { return handleCheckboxChange(option.value, e.target.checked); }, label: option.label, disabled: disabled || option.disabled, size: size, textSize: textSize, valid: valid, labelOffset: labelOffset, color: color, verticalAlign: verticalAlign, required: required, readOnly: readOnly }, checkboxId));
+                }) }))] })));
+};
+exports.default = CheckboxGroup;

package/dist/components/CheckboxGroup/CheckboxGroup.styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckboxGroupStyledProps } from "./props";
+export declare const CheckboxGroupStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CheckboxGroupStyledProps>> & string;

package/dist/components/CheckboxGroup/CheckboxGroup.styled.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroupStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.CheckboxGroupStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n\n    .top {\n        display: flex;\n        margin-bottom: 1rem;\n        font: var(--caption-bold-12-15);\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .checkboxesWrapper {\n        display: flex;\n        flex-direction: ", ";\n        gap: ", ";\n        flex-wrap: ", ";\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n\n    .top {\n        display: flex;\n        margin-bottom: 1rem;\n        font: var(--caption-bold-12-15);\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .checkboxesWrapper {\n        display: flex;\n        flex-direction: ", ";\n        gap: ", ";\n        flex-wrap: ", ";\n    }\n"])), function (props) { return props.$layout === "horizontal" ? "row" : "column"; }, function (props) { return props.$gap || "1rem"; }, function (props) { return props.$layout === "horizontal" ? "wrap" : "nowrap"; });
+var templateObject_1;

package/dist/components/CheckboxGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CheckboxGroup';

package/dist/components/CheckboxGroup/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var CheckboxGroup_1 = require("./CheckboxGroup");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CheckboxGroup_1).default; } });