krl-alfred 2.24.7 → 2.24.9

package/dist/components/Button/Button.test.js

@@ -0,0 +1,125 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var Button_1 = __importDefault(require("./Button"));
+var props_1 = require("./props");
+var renderButton = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, props_1.ButtonDefault, props, { children: "Click" })));
+};
+var declaredColors = function (element) {
+    var colors = [];
+    Array.from(document.styleSheets).forEach(function (sheet) {
+        Array.from(sheet.cssRules).forEach(function (rule) {
+            if (!(rule instanceof CSSStyleRule) || !rule.style.color) {
+                return;
+            }
+            try {
+                if (element.matches(rule.selectorText)) {
+                    colors.push(rule.style.color);
+                }
+            }
+            catch (_a) {
+                // ignore selectors jsdom cannot parse
+            }
+        });
+    });
+    return colors;
+};
+describe('Button', function () {
+    it('renders children', function () {
+        renderButton();
+        expect(react_1.screen.getByRole('button', { name: 'Click' })).toBeInTheDocument();
+    });
+    it('calls onClick when clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    renderButton({ onClick: onClick });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Click' }))];
+                case 1:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not call onClick when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    renderButton({ onClick: onClick, disabled: true });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Click' }))];
+                case 1:
+                    _a.sent();
+                    expect(onClick).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('paints primary label with --on-primary', function () {
+        renderButton({ variant: 'primary' });
+        expect(declaredColors(react_1.screen.getByRole('button', { name: 'Click' }))).toContain('var(--on-primary)');
+    });
+    it('keeps success label on hardcoded white', function () {
+        renderButton({ variant: 'success' });
+        expect(declaredColors(react_1.screen.getByRole('button', { name: 'Click' }))).toContain('white');
+        expect(declaredColors(react_1.screen.getByRole('button', { name: 'Click' }))).not.toContain('var(--on-primary)');
+    });
+});

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -30,9 +30,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonBadgeSm = exports.CategoryItemButtonBadge = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    gap: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    gap: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])), function (props) { return props.$hasFewCategories ? 'flex-start' : 'space-between'; }, function (props) { return props.$hasFewCategories ? '2rem' : '0'; });
-var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"])));
-exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; }, function (props) { return props.$hasCustomItem ? "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n          &:before{\n            content: '';\n            background-color:var(--grey-10);\n            height: 39px;\n            width: 2px;\n            display: block;\n            vertical-align: middle;\n            border-radius: 8px;\n            margin-right: 6px;\n            margin-left: 6px;\n          }\n    " : ""; });
-exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
+var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--text);\n    &:before{\n        border-color: var(--border);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--text);\n    }\n"], ["\n    color: var(--text);\n    &:before{\n        border-color: var(--border);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--text);\n    }\n"])));
+exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--text-muted);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--text);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--text-muted);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--text);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; }, function (props) { return props.$hasCustomItem ? "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n          &:before{\n            content: '';\n            background-color:var(--border);\n            height: 39px;\n            width: 2px;\n            display: block;\n            vertical-align: middle;\n            border-radius: 8px;\n            margin-right: 6px;\n            margin-left: 6px;\n          }\n    " : ""; });
+exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--text-muted);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--text-muted);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--text-muted);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--text-muted);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
 exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    @keyframes tada_category {\n        0% {\n            transform: scaleX(1)\n        }\n\n        10%,20% {\n            transform: rotate(-2deg)\n        }\n\n        30%,50%,70%,90% {\n            transform: rotate(2deg)\n        }\n\n        40%,60%,80% {\n            transform: rotate(-2deg)\n        }\n\n        to {\n            transform: scaleX(1)\n        }\n    }\n\n    ", "\n    height: 24px;\n    display:flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n"], ["\n    @keyframes tada_category {\n        0% {\n            transform: scaleX(1)\n        }\n\n        10%,20% {\n            transform: rotate(-2deg)\n        }\n\n        30%,50%,70%,90% {\n            transform: rotate(2deg)\n        }\n\n        40%,60%,80% {\n            transform: rotate(-2deg)\n        }\n\n        to {\n            transform: scaleX(1)\n        }\n    }\n\n    ", "\n    height: 24px;\n    display:flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n"])), function (props) { return props.$hasAnimation ? "\n        animation: tada_category 1.5s infinite;\n        animation-iteration-count: 10;\n    " : ""; });
 exports.CategoryItemButtonBadge = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font: var(--caption-bold-10-12);\n    line-height: 17px;\n    border-radius: 3px;\n    background-color: var(--primary);\n    color: white;\n    padding: 0 0.5rem;\n    display: inline-block;\n    margin-top: 2px;\n"], ["\n    font: var(--caption-bold-10-12);\n    line-height: 17px;\n    border-radius: 3px;\n    background-color: var(--primary);\n    color: white;\n    padding: 0 0.5rem;\n    display: inline-block;\n    margin-top: 2px;\n"])));
 exports.CategoryItemButtonBadgeSm = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: 8px;\n"], ["\n    position: absolute;\n    right: 8px;\n    top: 8px;\n"])));

package/dist/components/Checkbox/Checkbox.styled.js

@@ -49,8 +49,8 @@ exports.CheckboxIndicator = styled_components_1.default.span(templateObject_4 ||
 exports.CheckboxInput = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        ", " {\n            display: block;\n        }\n\n        ", " {\n            display: none;\n        }\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        ", " {\n            display: block;\n        }\n\n        ", " {\n            display: none;\n        }\n    }\n"])), exports.CheckboxIndicator, exports.CheckboxIndicatorChecked, exports.CheckboxIndicatorIdle);
 exports.LabelsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return getCheckboxCursor(props); }, function (props) {
     if (props.disabled)
-        return 'var(--dark-opacity-25)';
-    return props.$valid ? 'var(--dark)' : 'var(--red)';
+        return 'var(--text-disabled)';
+    return props.$valid ? 'var(--text)' : 'var(--red)';
 }, function (props) { return !props.disabled && !props.$valid && 'color: var(--red)'; });
-exports.CheckboxLabel = styled_components_1.default.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"], ["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"])), function (props) { return getLabelFont(props.$textSize); });
+exports.CheckboxLabel = styled_components_1.default.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--text-soft);\n    }\n"], ["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--text-soft);\n    }\n"])), function (props) { return getLabelFont(props.$textSize); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (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"; });
+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(--text-soft);\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(--text-soft);\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/stories/CheckboxGroup.stories.js

@@ -137,7 +137,7 @@ exports.AllSizes = {
 };
 var InteractiveStory = function (args) {
     var _a = react_1.default.useState(args.value || []), value = _a[0], setValue = _a[1];
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 520 } }, { children: [(0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, __assign({}, args, { value: value, onChange: setValue })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 16, font: "var(--caption-medium-11-13)", color: "var(--dark-opacity-50)" } }, { children: ["Se\u00E7ili: ", value.length ? value.join(", ") : "—"] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 520 } }, { children: [(0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, __assign({}, args, { value: value, onChange: setValue })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 16, font: "var(--caption-medium-11-13)", color: "var(--text-soft)" } }, { children: ["Se\u00E7ili: ", value.length ? value.join(", ") : "—"] }))] })));
 };
 exports.Interactive = {
     render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },

package/dist/components/CircleProgress/CircleProgress.js

@@ -20,7 +20,7 @@ var CircleProgress = function (_a) {
     var currentStep = steps.find(function (p) { return p.index === activeStep; });
     return ((0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, __assign({ styles: (0, react_circular_progressbar_1.buildStyles)({
                         pathColor: "var(--primary)",
-                        trailColor: "var(--dark-opacity-5)"
+                        trailColor: "var(--surface)"
                     }), strokeWidth: 12, value: activeStep / steps.length * 100 }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [activeStep, "/"] }), steps.length] })) })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "info" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.text }), (0, jsx_runtime_1.jsx)("p", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.textSm })] }))] }));
 };
 exports.default = CircleProgress;

package/dist/components/CircleProgress/CircleProgress.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircleProgressStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.CircleProgressStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 280px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--theme-font);\n  div.icon {\n    width: 56px;\n    height: 56px;\n  }\n\n  div.info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    \n    h1 {\n      color: var(--dark);\n      margin: 0 0 4px;\n      font:var(--title-bold-16-19);\n    }\n    p {\n      color: var(--dark-opacity-50);\n      margin: 0;\n      font:var(--body-regular-13-16);\n    }\n  }\n  \n  div.text {\n    color: var(--dark);\n    font:var(--body-bold-14-17);\n    span{\n      font:var(--title-bold-16-19);\n    }\n  }\n\n\n  .CircularProgressbar {\n    width: 100%;\n    vertical-align: middle;\n\n    .CircularProgressbar-path {\n      stroke-linecap: round;\n      -webkit-transition: stroke-dashoffset 0.5s ease 0s;\n      transition: stroke-dashoffset 0.5s ease 0s;\n    }\n\n    .CircularProgressbar-trail {\n      stroke-linecap: round;\n    }\n\n    .CircularProgressbar-text {\n      dominant-baseline: middle;\n      text-anchor: middle;\n    }\n\n    \n  }\n\n  .CircularProgressbar.CircularProgressbar-inverted {\n\n    .CircularProgressbar-trail {\n      stroke: transparent;\n    }\n  }\n\n"], ["\n  min-width: 280px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--theme-font);\n  div.icon {\n    width: 56px;\n    height: 56px;\n  }\n\n  div.info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    \n    h1 {\n      color: var(--dark);\n      margin: 0 0 4px;\n      font:var(--title-bold-16-19);\n    }\n    p {\n      color: var(--dark-opacity-50);\n      margin: 0;\n      font:var(--body-regular-13-16);\n    }\n  }\n  \n  div.text {\n    color: var(--dark);\n    font:var(--body-bold-14-17);\n    span{\n      font:var(--title-bold-16-19);\n    }\n  }\n\n\n  .CircularProgressbar {\n    width: 100%;\n    vertical-align: middle;\n\n    .CircularProgressbar-path {\n      stroke-linecap: round;\n      -webkit-transition: stroke-dashoffset 0.5s ease 0s;\n      transition: stroke-dashoffset 0.5s ease 0s;\n    }\n\n    .CircularProgressbar-trail {\n      stroke-linecap: round;\n    }\n\n    .CircularProgressbar-text {\n      dominant-baseline: middle;\n      text-anchor: middle;\n    }\n\n    \n  }\n\n  .CircularProgressbar.CircularProgressbar-inverted {\n\n    .CircularProgressbar-trail {\n      stroke: transparent;\n    }\n  }\n\n"])));
+exports.CircleProgressStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 280px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--theme-font);\n  div.icon {\n    width: 56px;\n    height: 56px;\n  }\n\n  div.info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    \n    h1 {\n      color: var(--text);\n      margin: 0 0 4px;\n      font:var(--title-bold-16-19);\n    }\n    p {\n      color: var(--text-soft);\n      margin: 0;\n      font:var(--body-regular-13-16);\n    }\n  }\n  \n  div.text {\n    color: var(--text);\n    font:var(--body-bold-14-17);\n    span{\n      font:var(--title-bold-16-19);\n    }\n  }\n\n\n  .CircularProgressbar {\n    width: 100%;\n    vertical-align: middle;\n\n    .CircularProgressbar-path {\n      stroke-linecap: round;\n      -webkit-transition: stroke-dashoffset 0.5s ease 0s;\n      transition: stroke-dashoffset 0.5s ease 0s;\n    }\n\n    .CircularProgressbar-trail {\n      stroke-linecap: round;\n    }\n\n    .CircularProgressbar-text {\n      dominant-baseline: middle;\n      text-anchor: middle;\n    }\n\n    \n  }\n\n  .CircularProgressbar.CircularProgressbar-inverted {\n\n    .CircularProgressbar-trail {\n      stroke: transparent;\n    }\n  }\n\n"], ["\n  min-width: 280px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--theme-font);\n  div.icon {\n    width: 56px;\n    height: 56px;\n  }\n\n  div.info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    \n    h1 {\n      color: var(--text);\n      margin: 0 0 4px;\n      font:var(--title-bold-16-19);\n    }\n    p {\n      color: var(--text-soft);\n      margin: 0;\n      font:var(--body-regular-13-16);\n    }\n  }\n  \n  div.text {\n    color: var(--text);\n    font:var(--body-bold-14-17);\n    span{\n      font:var(--title-bold-16-19);\n    }\n  }\n\n\n  .CircularProgressbar {\n    width: 100%;\n    vertical-align: middle;\n\n    .CircularProgressbar-path {\n      stroke-linecap: round;\n      -webkit-transition: stroke-dashoffset 0.5s ease 0s;\n      transition: stroke-dashoffset 0.5s ease 0s;\n    }\n\n    .CircularProgressbar-trail {\n      stroke-linecap: round;\n    }\n\n    .CircularProgressbar-text {\n      dominant-baseline: middle;\n      text-anchor: middle;\n    }\n\n    \n  }\n\n  .CircularProgressbar.CircularProgressbar-inverted {\n\n    .CircularProgressbar-trail {\n      stroke: transparent;\n    }\n  }\n\n"])));
 var templateObject_1;

package/dist/components/CircleProgressPro/CircleProgressPro.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressWrapperStyled = exports.SummaryInfoTitleStyled = exports.SummaryInfoStyled = exports.SummaryBodyStyled = exports.DropdownToggleButton = exports.DropdownWrapperStyled = exports.BadgeWrapperStyled = exports.SummaryHeaderRightContentStyled = exports.TitleStyled = exports.SummaryHeaderStyled = exports.CircleProgressProStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.CircleProgressProStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n"])));
+exports.CircleProgressProStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: 1px solid var(--border);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n"], ["\n    border: 1px solid var(--border);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n"])));
 exports.SummaryHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
 exports.TitleStyled = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--title-bold-16-19);\n"], ["\n    font: var(--title-bold-16-19);\n"])));
 exports.SummaryHeaderRightContentStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));

package/dist/components/CircleProgressPro/stories/CircleProgressPro.stories.js

@@ -56,6 +56,6 @@ exports.OnMutedBackground = {
             maxWidth: 400,
             padding: 24,
             borderRadius: 8,
-            background: "var(--dark-opacity-3)",
+            background: "var(--surface-subtle)",
         } }, { children: (0, jsx_runtime_1.jsx)(CircleProgressPro_1.default, {}) }))); },
 };

package/dist/components/ColorCard/ColorCard.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ColorCardProps } from './props';
-declare const ColorCard: ({ title, hint, value, placeholder, hasError, errorMessage, disabled, name, id, onChange, }: ColorCardProps) => React.JSX.Element;
+declare const ColorCard: ({ title, hint, value, placeholder, hasError, errorMessage, disabled, name, id, hasBadge, badgeText, hasResetLink, resetLinkText, onReset, onChange, }: ColorCardProps) => React.JSX.Element;
 export default ColorCard;

package/dist/components/ColorCard/ColorCard.js

@@ -20,17 +20,22 @@ var react_i18next_1 = require("react-i18next");
 var props_1 = require("./props");
 var ColorCard_styled_1 = require("./ColorCard.styled");
 var Input_1 = __importDefault(require("../Input"));
+var Badges_1 = __importDefault(require("../Badges"));
+var TextLink_1 = __importDefault(require("../TextLink"));
 var ColorPicker_1 = __importDefault(require("./ColorPicker"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var color_1 = require("./utils/color");
 var ColorCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.ColorCardDefault.title : _b, _c = _a.hint, hint = _c === void 0 ? props_1.ColorCardDefault.hint : _c, _d = _a.value, value = _d === void 0 ? props_1.ColorCardDefault.value : _d, _e = _a.placeholder, placeholder = _e === void 0 ? props_1.ColorCardDefault.placeholder : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.ColorCardDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.ColorCardDefault.errorMessage : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ColorCardDefault.disabled : _h, _j = _a.name, name = _j === void 0 ? props_1.ColorCardDefault.name : _j, _k = _a.id, id = _k === void 0 ? props_1.ColorCardDefault.id : _k, _l = _a.onChange, onChange = _l === void 0 ? props_1.ColorCardDefault.onChange : _l;
+    var _b = _a.title, title = _b === void 0 ? props_1.ColorCardDefault.title : _b, _c = _a.hint, hint = _c === void 0 ? props_1.ColorCardDefault.hint : _c, _d = _a.value, value = _d === void 0 ? props_1.ColorCardDefault.value : _d, _e = _a.placeholder, placeholder = _e === void 0 ? props_1.ColorCardDefault.placeholder : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.ColorCardDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.ColorCardDefault.errorMessage : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ColorCardDefault.disabled : _h, _j = _a.name, name = _j === void 0 ? props_1.ColorCardDefault.name : _j, _k = _a.id, id = _k === void 0 ? props_1.ColorCardDefault.id : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.ColorCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.ColorCardDefault.badgeText : _m, _o = _a.hasResetLink, hasResetLink = _o === void 0 ? props_1.ColorCardDefault.hasResetLink : _o, _p = _a.resetLinkText, resetLinkText = _p === void 0 ? props_1.ColorCardDefault.resetLinkText : _p, _q = _a.onReset, onReset = _q === void 0 ? props_1.ColorCardDefault.onReset : _q, _r = _a.onChange, onChange = _r === void 0 ? props_1.ColorCardDefault.onChange : _r;
     var t = (0, react_i18next_1.useTranslation)().t;
     var pickerRef = (0, react_1.useRef)(null);
-    var _m = (0, react_1.useState)(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = (0, react_1.useState)(function () { return (0, color_1.formatHexInput)(value); }), hex = _o[0], setHex = _o[1];
+    var _s = (0, react_1.useState)(false), isOpen = _s[0], setIsOpen = _s[1];
+    var _t = (0, react_1.useState)(function () { return (0, color_1.formatHexInput)(value); }), hex = _t[0], setHex = _t[1];
     var swatchColor = (0, color_1.toSwatchColor)(hex);
     var pickerValue = (0, color_1.normalizeHex)(hex) || '#000000';
+    var showResetLink = Boolean(hasResetLink);
+    var showBadge = !showResetLink && hasBadge && Boolean(badgeText);
+    var showHeader = Boolean(title || showBadge || showResetLink);
     (0, useOnClickOutside_1.default)(pickerRef, function () { return setIsOpen(false); }, true);
     (0, react_1.useEffect)(function () {
         setHex((0, color_1.formatHexInput)(value));
@@ -64,6 +69,11 @@ var ColorCard = function (_a) {
                             if (disabled)
                                 return;
                             setIsOpen(function (open) { return !open; });
-                        } }), isOpen && !disabled && ((0, jsx_runtime_1.jsx)(ColorCard_styled_1.ColorPickerPopover, __assign({ role: "dialog", "aria-label": t('pickColor') }, { children: (0, jsx_runtime_1.jsx)(ColorPicker_1.default, { value: pickerValue, onChange: emitHex }) })))] })), (0, jsx_runtime_1.jsx)(ColorCard_styled_1.ColorCardField, __assign({ onBlur: handleHexBlur }, { children: (0, jsx_runtime_1.jsx)(Input_1.default, { label: title, description: hint, value: hex, placeholder: placeholder, hasError: hasError, errorMessage: errorMessage, disabled: disabled, name: name, id: id, mask: null, format: null, maxLength: 7, onChange: function (event) { var _a; return emitHex((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); }, width: "100%" }) }))] }));
+                        } }), isOpen && !disabled && ((0, jsx_runtime_1.jsx)(ColorCard_styled_1.ColorPickerPopover, __assign({ role: "dialog", "aria-label": t('pickColor') }, { children: (0, jsx_runtime_1.jsx)(ColorPicker_1.default, { value: pickerValue, onChange: emitHex }) })))] })), (0, jsx_runtime_1.jsxs)(ColorCard_styled_1.ColorCardField, __assign({ onBlur: handleHexBlur }, { children: [showHeader && ((0, jsx_runtime_1.jsxs)(ColorCard_styled_1.Header, { children: [title ? (0, jsx_runtime_1.jsx)(ColorCard_styled_1.Label, __assign({ htmlFor: id }, { children: title })) : (0, jsx_runtime_1.jsx)("span", {}), showResetLink && ((0, jsx_runtime_1.jsx)(ColorCard_styled_1.ResetLinkWrap, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ variant: "primary", size: "small", icon: "RotateRightSm", iconDirection: "left", onClick: function (event) {
+                                        event.preventDefault();
+                                        if (disabled)
+                                            return;
+                                        onReset === null || onReset === void 0 ? void 0 : onReset(event);
+                                    } }, { children: resetLinkText || t('resetToAutomatic') })) })), showBadge && ((0, jsx_runtime_1.jsx)(ColorCard_styled_1.BadgeWrap, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] })), (0, jsx_runtime_1.jsx)(Input_1.default, { label: "", description: hint, value: hex, placeholder: placeholder, hasError: hasError, errorMessage: errorMessage, disabled: disabled, name: name, id: id, mask: null, format: null, maxLength: 7, onChange: function (event) { var _a; return emitHex((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); }, width: "100%" })] }))] }));
 };
 exports.default = ColorCard;

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

@@ -4,6 +4,10 @@ export declare const ColorCardStyled: import("styled-components/dist/types").ISt
 export declare const SwatchWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ColorSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ColorCardStyledProps> & ColorCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ColorCardStyledProps> & ColorCardStyledProps, never>>> & string;
 export declare const ColorCardField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const BadgeWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ResetLinkWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ColorPickerPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const PickerBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const Saturation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hue"> & {

package/dist/components/ColorCard/ColorCard.styled.js

@@ -7,15 +7,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Thumb = exports.HueSlider = exports.Saturation = exports.PickerBody = exports.ColorPickerPopover = exports.ColorCardField = exports.ColorSwatch = exports.SwatchWrap = exports.ColorCardStyled = void 0;
+exports.Thumb = exports.HueSlider = exports.Saturation = exports.PickerBody = exports.ColorPickerPopover = exports.ResetLinkWrap = exports.BadgeWrap = exports.Label = exports.Header = exports.ColorCardField = exports.ColorSwatch = exports.SwatchWrap = exports.ColorCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ColorCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"])));
-exports.SwatchWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--dark-opacity-10);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"], ["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--dark-opacity-10);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"])));
+exports.ColorCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--surface-subtle);\n    box-sizing: border-box;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--surface-subtle);\n    box-sizing: border-box;\n"])));
+exports.SwatchWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--border);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"], ["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--border);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"])));
 exports.ColorSwatch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: 0.25rem;\n    border: none;\n    background-color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    appearance: none;\n\n    &:focus-visible {\n        outline: 2px solid var(--primary);\n        outline-offset: 2px;\n    }\n"], ["\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: 0.25rem;\n    border: none;\n    background-color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    appearance: none;\n\n    &:focus-visible {\n        outline: 2px solid var(--primary);\n        outline-offset: 2px;\n    }\n"])), function (props) { return props.$color || 'transparent'; }, function (props) { return props.$disabled ? 0.4 : 1; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; });
 exports.ColorCardField = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex: 1;\n    min-width: 0;\n"], ["\n    flex: 1;\n    min-width: 0;\n"])));
-exports.ColorPickerPopover = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"], ["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"])));
-exports.PickerBody = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"])));
-exports.Saturation = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"], ["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"])), function (props) { return props.$hue; });
-exports.HueSlider = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"], ["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"])));
-exports.Thumb = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: absolute;\n    left: ", "%;\n    top: ", "%;\n    width: 16px;\n    height: 16px;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px var(--dark-opacity-25);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    box-sizing: border-box;\n"], ["\n    position: absolute;\n    left: ", "%;\n    top: ", "%;\n    width: 16px;\n    height: 16px;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px var(--dark-opacity-25);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    box-sizing: border-box;\n"])), function (props) { return props.$x * 100; }, function (props) { return props.$y * 100; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+exports.Header = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"])));
+exports.Label = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin: 0;\n    min-width: 0;\n    color: var(--text-soft);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    min-width: 0;\n    color: var(--text-soft);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
+exports.BadgeWrap = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    flex-shrink: 0;\n"], ["\n    flex-shrink: 0;\n"])));
+exports.ResetLinkWrap = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    flex-shrink: 0;\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"], ["\n    flex-shrink: 0;\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"])));
+exports.ColorPickerPopover = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"], ["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"])));
+exports.PickerBody = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"])));
+exports.Saturation = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"], ["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"])), function (props) { return props.$hue; });
+exports.HueSlider = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"], ["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"])));
+exports.Thumb = styled_components_1.default.span(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    position: absolute;\n    left: ", "%;\n    top: ", "%;\n    width: 16px;\n    height: 16px;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px var(--text-disabled);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    box-sizing: border-box;\n"], ["\n    position: absolute;\n    left: ", "%;\n    top: ", "%;\n    width: 16px;\n    height: 16px;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px var(--text-disabled);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    box-sizing: border-box;\n"])), function (props) { return props.$x * 100; }, function (props) { return props.$y * 100; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/components/ColorCard/ColorCard.test.js

@@ -242,16 +242,96 @@ describe('ColorCard', function () {
         renderColorCard({ hasError: true, errorMessage: 'Geçersiz renk' });
         expect(react_1.screen.getByText('Geçersiz renk')).toBeInTheDocument();
     });
-    it('renders title, hint and value as text, not HTML', function () {
+    it('renders a secondary text badge aligned with the label', function () {
+        renderColorCard({ hasBadge: true, badgeText: 'Önerilen' });
+        var badge = react_1.screen.getByText('Önerilen');
+        var label = react_1.screen.getByText('Birincil renk');
+        expect(badge).toBeInTheDocument();
+        expect(badge.parentElement).toHaveStyle({
+            backgroundColor: 'var(--primary-opacity-10)',
+        });
+        expect(label.parentElement).toHaveStyle({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        });
+    });
+    it('does not render the badge when hasBadge is false', function () {
+        renderColorCard({ hasBadge: false, badgeText: 'Önerilen' });
+        expect(react_1.screen.queryByText('Önerilen')).not.toBeInTheDocument();
+        expect(react_1.screen.getByText('Birincil renk')).toBeInTheDocument();
+    });
+    it('replaces the badge with a reset text link when hasResetLink is true', function () {
+        renderColorCard({
+            hasBadge: true,
+            badgeText: 'Önerilen',
+            hasResetLink: true,
+            resetLinkText: 'Otomatiğe dön',
+        });
+        expect(react_1.screen.queryByText('Önerilen')).not.toBeInTheDocument();
+        expect(react_1.screen.getByText('Otomatiğe dön')).toBeInTheDocument();
+    });
+    it('calls onReset when the reset text link is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, onReset;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = user_event_1.default.setup();
+                    onReset = jest.fn();
+                    renderColorCard({
+                        hasResetLink: true,
+                        resetLinkText: 'Otomatiğe dön',
+                        onReset: onReset,
+                    });
+                    return [4 /*yield*/, user.click(react_1.screen.getByText('Otomatiğe dön'))];
+                case 1:
+                    _a.sent();
+                    expect(onReset).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not call onReset when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, onReset;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = user_event_1.default.setup();
+                    onReset = jest.fn();
+                    renderColorCard({
+                        disabled: true,
+                        hasResetLink: true,
+                        resetLinkText: 'Otomatiğe dön',
+                        onReset: onReset,
+                    });
+                    return [4 /*yield*/, user.click(react_1.screen.getByText('Otomatiğe dön'))];
+                case 1:
+                    _a.sent();
+                    expect(onReset).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('renders title, hint, value and badge text as text, not HTML', function () {
         renderColorCard({
             title: '<script>alert(1)</script>',
             hint: '<img src=x onerror=alert(1)>',
             value: '<script>alert(1)</script>',
+            hasBadge: true,
+            badgeText: '<img src=x onerror=alert(1)>',
         });
         expect(react_1.screen.getByText('<script>alert(1)</script>')).toBeInTheDocument();
-        expect(react_1.screen.getByText('<img src=x onerror=alert(1)>')).toBeInTheDocument();
+        expect(react_1.screen.getAllByText('<img src=x onerror=alert(1)>')).toHaveLength(2);
         expect(react_1.screen.getByDisplayValue(/^#[0-9A-Fa-f]{0,6}$/)).toBeInTheDocument();
         expect(document.querySelector('script')).not.toBeInTheDocument();
         expect(document.querySelector('img')).not.toBeInTheDocument();
     });
+    it('renders reset link text as text, not HTML', function () {
+        renderColorCard({
+            hasResetLink: true,
+            resetLinkText: '<img src=x onerror=alert(1)>',
+        });
+        expect(react_1.screen.getByText('<img src=x onerror=alert(1)>')).toBeInTheDocument();
+        expect(document.querySelector('img')).not.toBeInTheDocument();
+    });
 });

package/dist/components/ColorCard/props.d.ts

@@ -8,6 +8,11 @@ export interface ColorCard {
     disabled?: boolean;
     name?: string;
     id?: string;
+    hasBadge?: boolean;
+    badgeText?: string;
+    hasResetLink?: boolean;
+    resetLinkText?: string;
+    onReset?(e: any): void;
     onChange?(e: any): void;
 }
 export interface ColorCardStyledProps {

package/dist/components/ColorCard/props.js

@@ -11,5 +11,10 @@ exports.ColorCardDefault = {
     disabled: false,
     name: null,
     id: null,
+    hasBadge: false,
+    badgeText: '',
+    hasResetLink: false,
+    resetLinkText: '',
+    onReset: null,
     onChange: null,
 };