krl-alfred 2.24.0 → 2.24.2

package/dist/components/ActionButton/ActionButton.styled.js

@@ -22,7 +22,7 @@ exports.IconWrapper = styled_components_1.default.div(templateObject_9 || (templ
 exports.Title = styled_components_1.default.strong(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    font: var(--body-bold-14-17);\n"], ["\n    display: block;\n    font: var(--body-bold-14-17);\n"])));
 exports.BottomContent = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"])));
 exports.Timer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"], ["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"])));
-exports.TimerBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
+exports.TimerBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: var(--theme-bg-color);\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    width: 40px;\n    height: 48px;\n    background-color: var(--theme-bg-color);\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
 exports.TimerTitle = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: var(--title-extra-bold-16-19);\n"], ["\n    font: var(--title-extra-bold-16-19);\n"])));
 exports.TimerDescription = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font: var(--caption-regular-10-12);\n"], ["\n    font: var(--caption-regular-10-12);\n"])));
 exports.TimerDots = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"])));

package/dist/components/ActionButton/stories/ActionButton.stories.js

@@ -118,7 +118,7 @@ exports.StoreSettings = {
             padding: "1.5rem",
             border: "1px solid var(--dark-opacity-10)",
             borderRadius: "0.5rem",
-            background: "white",
+            background: "var(--theme-bg-color)",
         } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ style: {
                     display: "block",
                     marginBottom: "1.5rem",

package/dist/components/AddressCard/AddressCard.styled.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: var(--theme-bg-color);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
 exports.Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/AutocompleteInput/AutocompleteInput.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownInnerStyled = exports.DropdownStyled = exports.InputStyled = exports.Container = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 28px;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\n      }\n    }\n  }\n\n  .error {\n      display: flex;\n      align-items: center;\n      margin-top: 8px;\n      color: var(--red);\n      svg {\n          margin-right: 8px;\n      }\n\n      p {\n          margin: 0;\n          font:var(--caption-semi-bold-11-13);\n      }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 28px;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\n      }\n    }\n  }\n\n  .error {\n      display: flex;\n      align-items: center;\n      margin-top: 8px;\n      color: var(--red);\n      svg {\n          margin-right: 8px;\n      }\n\n      p {\n          margin: 0;\n          font:var(--caption-semi-bold-11-13);\n      }\n  }\n"])), function (props) { return props.$width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  ", "\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  ", "\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$isShowDropdown ? '0.5rem 0.5rem 0 0' : '0.5rem'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 53px 18.5px 23px' : '19.5px 54px 19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasAutoUppercase && "text-transform: uppercase;"; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n"], ["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; }, function (props) { return props.$dropdownPosition && props.$dropdownPosition; });
-exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; });
+exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  ", "\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: var(--theme-bg-color);\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  ", "\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: var(--theme-bg-color);\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'var(--theme-bg-color)' : 'var(--dark-opacity-3)'); }, function (props) { return props.$isShowDropdown ? '0.5rem 0.5rem 0 0' : '0.5rem'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 53px 18.5px 23px' : '19.5px 54px 19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasAutoUppercase && "text-transform: uppercase;"; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
+exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: var(--theme-bg-color);\n"], ["\n    border-radius: 0 0 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: var(--theme-bg-color);\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; }, function (props) { return props.$dropdownPosition && props.$dropdownPosition; });
+exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: var(--theme-bg-color);\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: ", ";\n    position: relative;\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 9px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--dark-opacity-10);\n        border-radius: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background: var(--dark-opacity-20);\n    }\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: var(--theme-bg-color);\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/BannerCard/BannerCard.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 0.5rem 0.5rem;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 0.5rem 0.5rem;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return props.$customStyle; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg);
+exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 0.5rem 0.5rem;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    ", "\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 0.5rem 0.5rem;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 0.5rem;\n        overflow: hidden;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "var(--theme-bg-color)"; }, function (props) { return props.$customStyle; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg);
 var templateObject_1;

package/dist/components/BannerCard/stories/BannerCard.stories.js

@@ -101,7 +101,7 @@ exports.ButtonSuccess = {
     args: __assign(__assign({}, baseArgs), { buttonVariant: "success", buttonText: "Başla" }),
 };
 exports.CustomStyle = {
-    args: __assign(__assign({}, baseArgs), { customStyle: "background: linear-gradient(135deg, #f5f0ff 0%, #ffffff 60%);", title: "Özel arka plan", description: "customStyle ile banner arka planı özelleştirildi." }),
+    args: __assign(__assign({}, baseArgs), { customStyle: "background: linear-gradient(135deg, #f5f0ff 0%, var(--theme-bg-color) 60%);", title: "Özel arka plan", description: "customStyle ile banner arka planı özelleştirildi." }),
 };
 exports.LongContent = {
     args: __assign(__assign({}, baseArgs), { title: "Çok uzun bir banner başlığı: döngüsel ekonomi ve sürdürülebilir tüketim birlikte", description: "Bu açıklama bilerek uzun tutuldu. Birkaç kez kullanacağın cihazları kiralayarak hem bütçeni koruyabilir hem de elektronik atıkları azaltarak gezegene katkı sağlayabilirsin. Kampanya koşulları dönemsel olarak değişiklik gösterebilir.", shortDesc: "Uzun mobil kısa açıklama: cihazlarını kiralayarak döngüsel ekonomiye katkı sağla ve fırsatları kaçırma!", hasRightArrow: true }),

package/dist/components/Breadcrumbs/Breadcrumbs.styled.js

@@ -19,8 +19,8 @@ exports.ButtonLinkComponentLg = styled_components_1.default.span(templateObject_
 exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n  > *{\n    display: block;    \n  }\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n  > *{\n    display: block;    \n  }\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"], ["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"])));
-exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
+exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: var(--theme-bg-color);\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: var(--theme-bg-color);\n  height: 26px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
 exports.DropdownList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  z-index:15;\n  padding: 0;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"], ["\n  z-index:15;\n  padding: 0;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"])));
 exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 1.5rem 15px 1.5rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 1.5rem 15px 0 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 1.5rem 15px 1.5rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 1.5rem 15px 0 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.xl);
-exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
+exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: var(--theme-bg-color);\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: var(--theme-bg-color);\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
 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/Button/Button.styled.js

@@ -101,7 +101,7 @@ var ghost = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 exports.LoadingContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  background-color: inherit;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n  border-radius: inherit;\n\n  svg {\n    color: inherit;\n  }\n"], ["\n  position: absolute;\n  background-color: inherit;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n  border-radius: inherit;\n\n  svg {\n    color: inherit;\n  }\n"])));
-exports.ButtonTooltip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: white;\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"], ["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: white;\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"])));
+exports.ButtonTooltip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: var(--theme-bg-color);\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"], ["\n  position: absolute;\n  right: 0;\n  top: calc(100% + 5px);\n  background: var(--theme-bg-color);\n  color: var(--dark);\n  font: var(--caption-medium-10-12);\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n  opacity: 0;\n  transition-delay: 0s;\n"])));
 exports.ButtonStyled = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  &:hover {\n    ", " {\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  &:hover {\n    ", " {\n      opacity: 1;\n      transition-delay: 0.5s;\n    }\n  }\n  &:is(.loading) {\n    user-select: none;\n    pointer-events: none;\n    .children{\n      > span{\n        opacity: 0;\n      } \n    }\n    > *:not(.children){\n      opacity: 0;\n    }\n  }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
     switch (props.$variant) {
         case 'primary':

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

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (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;
 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: white;\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: white;\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\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(--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.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: white;\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: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\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"])));

package/dist/components/ColorPalette/ColorPalette.js

@@ -9,7 +9,7 @@ var colors_json_1 = __importDefault(require("./../../jsons/colors.json"));
 var ColorPalette = function (props) {
     var Item = function (_a) {
         var _b = _a.gradient, gradient = _b === void 0 ? props.gradient : _b, _c = _a.data, data = _c === void 0 ? props.data : _c;
-        return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ColorItem, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Bg, { gradient: gradient, data: data }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Text, { children: Object.entries(data).map(function (_a) {
+        return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ColorItem, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Bg, { "$gradient": gradient, "$data": data, "data-testid": "color-palette-bg" }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Text, { children: Object.entries(data).map(function (_a) {
                         var key4 = _a[0], value4 = _a[1];
                         return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title, { children: key4 }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Value, { children: value4 })] }, key4));
                     }) })] }));

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

@@ -1,10 +1,16 @@
 /// <reference types="react" />
+import { ColorPalette } from "./props";
+type BgProps = {
+    $gradient?: ColorPalette["gradient"];
+    $data?: ColorPalette["data"];
+};
 export declare const ColorPaletteStyled: 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 ColorItem: 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 Bg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").ColorPalette> & import("./props").ColorPalette, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").ColorPalette> & import("./props").ColorPalette, never>>> & string;
+export declare const Bg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BgProps> & BgProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BgProps> & BgProps, never>>> & string;
 export declare const Text: 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 Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
 export declare const TitleXl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const TitleLg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const Value: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
 export declare const ValueListWrapper: 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 {};

package/dist/components/ColorPalette/ColorPalette.styled.js

@@ -11,11 +11,11 @@ exports.ValueListWrapper = exports.Value = exports.TitleLg = exports.TitleXl = e
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ColorPaletteStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"])));
 exports.ColorItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"])));
-exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 120px;\n  background: ", "};\n"], ["\n  min-height: 120px;\n  background: ", "};\n"])), function (props) {
-    var _a;
-    return ((_a = props === null || props === void 0 ? void 0 : props.gradient) === null || _a === void 0 ? void 0 : _a.length) > 0
-        ? "linear-gradient(0deg,  ".concat(props.gradient.join(","), ")")
-        : props.data.hex;
+exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 120px;\n  background: ", ";\n"], ["\n  min-height: 120px;\n  background: ", ";\n"])), function (_a) {
+    var $gradient = _a.$gradient, $data = _a.$data;
+    return ($gradient === null || $gradient === void 0 ? void 0 : $gradient.length) > 0
+        ? "linear-gradient(0deg, ".concat($gradient.join(", "), ")")
+        : ($data === null || $data === void 0 ? void 0 : $data.hex) || "transparent";
 });
 exports.Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 22px;\n"], ["\n  padding: 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 22px;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n  font: var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n  font: var(--caption-bold-12-15);\n"])));

package/dist/components/ColorPalette/ColorPalette.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ColorPalette/ColorPalette.test.js

@@ -0,0 +1,31 @@
+"use strict";
+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 ColorPalette_1 = __importDefault(require("./ColorPalette"));
+var renderPalette = function () {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(ColorPalette_1.default, { data: { name: "", hex: "", rgb: "", hex2: "", rgb2: "" } }));
+};
+var swatchFor = function (label) {
+    var _a, _b;
+    var item = (_b = (_a = react_1.screen.getByText(label).closest("div")) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+    return (0, react_1.within)(item).getByTestId("color-palette-bg");
+};
+describe("ColorPalette", function () {
+    it("paints a solid swatch from the hex value", function () {
+        renderPalette();
+        expect(swatchFor("#9763F6")).toHaveStyle({
+            minHeight: "120px",
+            background: "#9763F6",
+        });
+    });
+    it("paints a gradient swatch from gradient stops", function () {
+        renderPalette();
+        expect(swatchFor("#7730FA")).toHaveStyle({
+            background: "linear-gradient(0deg, #7730FA, #9961FF)",
+        });
+    });
+});

package/dist/components/DescriptionCard/DescriptionCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { DescriptionCardProps } from "./props";
-declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: DescriptionCardProps) => React.JSX.Element;
+declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, hasDisableSubcategorySort, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: DescriptionCardProps) => React.JSX.Element;
 export default DescriptionCard;

package/dist/components/DescriptionCard/DescriptionCard.js

@@ -41,10 +41,12 @@ var useSortableSensors_1 = require("./utils/useSortableSensors");
 var getReorderIndexes_1 = require("./utils/getReorderIndexes");
 var getSubcategoryId = function (item, index) { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : "subcategory-".concat(index); };
 var DragHandle = function (_a) {
-    var dragHandleProps = _a.dragHandleProps;
-    return ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DragHandleStyled, __assign({ type: "button", "aria-label": "S\u00FCr\u00FCkle" }, dragHandleProps, { onClick: function (e) {
+    var dragHandleProps = _a.dragHandleProps, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    return ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DragHandleStyled, __assign({ type: "button", "aria-label": "S\u00FCr\u00FCkle", "aria-disabled": disabled || undefined, "$disabled": disabled, tabIndex: disabled ? -1 : undefined }, (disabled ? undefined : dragHandleProps), { onClick: function (e) {
             var _a;
             e.stopPropagation();
+            if (disabled)
+                return;
             (_a = dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.onClick) === null || _a === void 0 ? void 0 : _a.call(dragHandleProps, e);
         } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Drag", width: "16", height: "16" }) })));
 };
@@ -56,11 +58,11 @@ var CategoryStatusCell = function (_a) {
 };
 var SubcategoryRowContent = function (_a) {
     var _b, _c, _d, _e, _f;
-    var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout, hasDragHandle = _a.hasDragHandle, dragHandleProps = _a.dragHandleProps, setNodeRef = _a.setNodeRef, style = _a.style, isDragging = _a.isDragging;
+    var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout, hasDragHandle = _a.hasDragHandle, isSortDisabled = _a.isSortDisabled, dragHandleProps = _a.dragHandleProps, setNodeRef = _a.setNodeRef, style = _a.style, isDragging = _a.isDragging;
     var hasButton = (_b = item.hasButton) !== null && _b !== void 0 ? _b : true;
     var buttonText = (_c = item.buttonText) !== null && _c !== void 0 ? _c : defaultButtonText;
     var isClickable = !!item.onClick;
-    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ ref: setNodeRef, style: style, "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, "$isDragging": isDragging, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [hasDragHandle && (0, jsx_runtime_1.jsx)(DragHandle, { dragHandleProps: dragHandleProps }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (hasCategoryLayout || item.status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: item.status })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ ref: setNodeRef, style: style, "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, "$isDragging": isDragging, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [hasDragHandle && ((0, jsx_runtime_1.jsx)(DragHandle, { dragHandleProps: dragHandleProps, disabled: isSortDisabled })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (hasCategoryLayout || item.status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: item.status })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
 };
 var SortableSubcategoryRow = function (_a) {
     var id = _a.id, rowProps = __rest(_a, ["id"]);
@@ -71,7 +73,7 @@ var SortableSubcategoryRow = function (_a) {
         }, dragHandleProps: __assign(__assign({}, attributes), listeners) })));
 };
 var DescriptionCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasTitleBadgeBetween, hasTitleBadgeBetween = _o === void 0 ? props_1.DescriptionCardDefault.hasTitleBadgeBetween : _o, _p = _a.hasHeader, hasHeader = _p === void 0 ? props_1.DescriptionCardDefault.hasHeader : _p, _q = _a.hasHeaderBackground, hasHeaderBackground = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _q, _r = _a.hasHeaderBorder, hasHeaderBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _r, _s = _a.hasRounded, hasRounded = _s === void 0 ? props_1.DescriptionCardDefault.hasRounded : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.DescriptionCardDefault.hasBorder : _t, _u = _a.hasShadow, hasShadow = _u === void 0 ? props_1.DescriptionCardDefault.hasShadow : _u, _v = _a.headerImage, headerImage = _v === void 0 ? props_1.DescriptionCardDefault.headerImage : _v, _w = _a.headerRightContent, headerRightContent = _w === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _w, _x = _a.dropdownList, dropdownList = _x === void 0 ? props_1.DescriptionCardDefault.dropdownList : _x, _y = _a.dropdownWidth, dropdownWidth = _y === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _y, _z = _a.accordionList, accordionList = _z === void 0 ? props_1.DescriptionCardDefault.accordionList : _z, _0 = _a.boxSize, boxSize = _0 === void 0 ? props_1.DescriptionCardDefault.boxSize : _0, _1 = _a.hasHeaderButton, hasHeaderButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _1, _2 = _a.headerButtonWidth, headerButtonWidth = _2 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _2, _3 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _3 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _3, _4 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _4, _5 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _5, _6 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _6 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _6, _7 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _7 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _7, _8 = _a.content, content = _8 === void 0 ? props_1.DescriptionCardDefault.content : _8, _9 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _9 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _9, _10 = _a.middleTitle, middleTitle = _10 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _10, _11 = _a.status, status = _11 === void 0 ? props_1.DescriptionCardDefault.status : _11, _12 = _a.subcategoryList, subcategoryList = _12 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _12, _13 = _a.hasCategoryLayout, hasCategoryLayout = _13 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _13, _14 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _14 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _14, _15 = _a.hasDragHandle, hasDragHandle = _15 === void 0 ? props_1.DescriptionCardDefault.hasDragHandle : _15, _16 = _a.dragHandleProps, dragHandleProps = _16 === void 0 ? props_1.DescriptionCardDefault.dragHandleProps : _16, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, onSubcategoryReorder = _a.onSubcategoryReorder, _17 = _a.customColumnSpan, customColumnSpan = _17 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _17;
+    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasTitleBadgeBetween, hasTitleBadgeBetween = _o === void 0 ? props_1.DescriptionCardDefault.hasTitleBadgeBetween : _o, _p = _a.hasHeader, hasHeader = _p === void 0 ? props_1.DescriptionCardDefault.hasHeader : _p, _q = _a.hasHeaderBackground, hasHeaderBackground = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _q, _r = _a.hasHeaderBorder, hasHeaderBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _r, _s = _a.hasRounded, hasRounded = _s === void 0 ? props_1.DescriptionCardDefault.hasRounded : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.DescriptionCardDefault.hasBorder : _t, _u = _a.hasShadow, hasShadow = _u === void 0 ? props_1.DescriptionCardDefault.hasShadow : _u, _v = _a.headerImage, headerImage = _v === void 0 ? props_1.DescriptionCardDefault.headerImage : _v, _w = _a.headerRightContent, headerRightContent = _w === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _w, _x = _a.dropdownList, dropdownList = _x === void 0 ? props_1.DescriptionCardDefault.dropdownList : _x, _y = _a.dropdownWidth, dropdownWidth = _y === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _y, _z = _a.accordionList, accordionList = _z === void 0 ? props_1.DescriptionCardDefault.accordionList : _z, _0 = _a.boxSize, boxSize = _0 === void 0 ? props_1.DescriptionCardDefault.boxSize : _0, _1 = _a.hasHeaderButton, hasHeaderButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _1, _2 = _a.headerButtonWidth, headerButtonWidth = _2 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _2, _3 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _3 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _3, _4 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _4, _5 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _5, _6 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _6 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _6, _7 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _7 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _7, _8 = _a.content, content = _8 === void 0 ? props_1.DescriptionCardDefault.content : _8, _9 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _9 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _9, _10 = _a.middleTitle, middleTitle = _10 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _10, _11 = _a.status, status = _11 === void 0 ? props_1.DescriptionCardDefault.status : _11, _12 = _a.subcategoryList, subcategoryList = _12 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _12, _13 = _a.hasCategoryLayout, hasCategoryLayout = _13 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _13, _14 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _14 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _14, _15 = _a.hasDragHandle, hasDragHandle = _15 === void 0 ? props_1.DescriptionCardDefault.hasDragHandle : _15, _16 = _a.hasDisableSubcategorySort, hasDisableSubcategorySort = _16 === void 0 ? props_1.DescriptionCardDefault.hasDisableSubcategorySort : _16, _17 = _a.dragHandleProps, dragHandleProps = _17 === void 0 ? props_1.DescriptionCardDefault.dragHandleProps : _17, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, onSubcategoryReorder = _a.onSubcategoryReorder, _18 = _a.customColumnSpan, customColumnSpan = _18 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _18;
     var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
     var hasHeaderRightContent = !!headerRightContent;
     var hasHeaderRight = hasHeaderRightContent || hasHeaderPrimaryButton || hasHeaderButton;
@@ -80,7 +82,7 @@ var DescriptionCard = function (_a) {
     var isBackTitleClickable = hasHeaderBackButton && !!handleBackTitleClick;
     var sensors = (0, useSortableSensors_1.useSortableSensors)();
     var subcategoryIds = subcategoryList.map(getSubcategoryId);
-    var canSortSubcategories = hasDragHandle && hasSubcategories;
+    var canSortSubcategories = hasDragHandle && hasSubcategories && !hasDisableSubcategorySort;
     var handleSubcategoryDragEnd = function (_a) {
         var active = _a.active, over = _a.over;
         var indexes = (0, getReorderIndexes_1.getReorderIndexes)(subcategoryIds, active.id, over === null || over === void 0 ? void 0 : over.id);
@@ -95,6 +97,7 @@ var DescriptionCard = function (_a) {
             defaultButtonWidth: headerButtonWidth,
             hasCategoryLayout: hasCategoryLayout,
             hasDragHandle: hasDragHandle,
+            isSortDisabled: hasDisableSubcategorySort,
         };
         if (!canSortSubcategories) {
             return (0, jsx_runtime_1.jsx)(SubcategoryRowContent, __assign({}, rowProps), getSubcategoryId(item, key));

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

@@ -8,7 +8,7 @@ export declare const DescriptionCardStyled: import("styled-components/dist/types
 export declare const DescriptionCardHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderLeftStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderBackButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
-export declare const DragHandleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
+export declare const DragHandleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderRightStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderActionWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderRightContentStyled: 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;

package/dist/components/DescriptionCard/DescriptionCard.styled.js

@@ -46,7 +46,7 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
 }, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; });
 exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"])));
 exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"])));
-exports.DragHandleStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 0.75rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: grab;\n    color: var(--primary);\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    &:active {\n        cursor: grabbing;\n        background-color: var(--primary);\n        color: white;\n    }\n    &:hover {\n        background-color: var(--primary);\n        color: white;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 0.75rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: grab;\n    color: var(--primary);\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    &:active {\n        cursor: grabbing;\n        background-color: var(--primary);\n        color: white;\n    }\n    &:hover {\n        background-color: var(--primary);\n        color: white;\n    }\n"])));
+exports.DragHandleStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"])), function (props) { return props.$disabled ? 'no-drop' : 'grab'; }, function (props) { return props.$disabled ? 'var(--grey-50)' : 'var(--primary)'; }, function (props) { return !props.$disabled && "\n        &:active {\n            cursor: grabbing;\n            background-color: var(--primary);\n            color: white;\n        }\n        &:hover {\n            background-color: var(--primary);\n            color: white;\n        }\n    "; });
 exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])), function (props) { return props.$hasHeaderRight ? 'flex' : 'none'; }, function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; }, function (props) { return props.$hasCategoryLayout ? '100%' : 'auto'; });
 exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 exports.HeaderRightContentStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    min-width: 0;\n"], ["\n    display: block;\n    min-width: 0;\n"])));
@@ -56,7 +56,7 @@ exports.HeaderTitleDescriptionStyled = styled_components_1.default.p(templateObj
 exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"], ["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"])), function (props) { return props.$titleSize === 'lg'
     ? 'var(--headline-semi-bold-20-24)'
     : 'var(--headline-semi-bold-18-22)'; }, function (props) { return props.$isClickable ? 'pointer' : 'inherit'; });
-exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
+exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: var(--theme-bg-color);\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    flex-shrink: 0;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: var(--theme-bg-color);\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
 exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    margin-left: ", ";\n    flex-shrink: 0;\n"], ["\n    display: block;\n    margin-left: ", ";\n    flex-shrink: 0;\n"])), function (props) { return props.$hasTitleBadgeBetween ? '0' : '1.5rem'; });
 exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    padding: ", ";\n"], ["\n    display: block;\n    padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '0' : '0 1.5rem'; });
 exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ",1fr);\n    padding: 0;\n    margin: 0;\n    position: relative;\n    overflow: hidden;\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n    }\n"])), function (props) { return props.$boxSize; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; });
@@ -68,9 +68,9 @@ exports.AccordionListWrapper = styled_components_1.default.div(templateObject_23
 exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    + div{\n        border-top: 1px solid var(--dark-opacity-10);\n        margin-top: -1px;\n    }\n"], ["\n    + div{\n        border-top: 1px solid var(--dark-opacity-10);\n        margin-top: -1px;\n    }\n"])));
 exports.AccordionItemHeader = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--primary);\n    padding: 1.5rem;\n    cursor: pointer;\n    border-bottom: ", ";\n    strong{\n        font: var(--body-bold-14-17);\n        display: block;\n        color: inherit;\n    }\n    .icon{\n        *{\n            display: block;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--primary);\n    padding: 1.5rem;\n    cursor: pointer;\n    border-bottom: ", ";\n    strong{\n        font: var(--body-bold-14-17);\n        display: block;\n        color: inherit;\n    }\n    .icon{\n        *{\n            display: block;\n        }\n    }\n"])), function (props) { return props.$show ? "1px solid var(--dark-opacity-10)" : "none"; });
 exports.HeaderMiddleTitleStyled = styled_components_1.default.span(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n    cursor: ", ";\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
-exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding-top: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding-top: 1rem;\n"])));
-exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border-width: ", ";\n    border-style: solid;\n    border-color: transparent;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: ", ";\n    z-index: ", ";\n\n    ", "\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border-width: ", ";\n    border-style: solid;\n    border-color: transparent;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: ", ";\n    z-index: ", ";\n\n    ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.subcategoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasCategoryLayout ? '1px' : '0'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$isDragging ? 0.6 : 1; }, function (props) { return props.$isDragging ? 2 : 'auto'; }, function (props) { return props.$hasCategoryLayout && "\n        &:hover {\n            border-color: var(--grey-10);\n        }\n    "; });
-exports.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    min-width: 0;\n"])));
+exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding-top: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding-top: 1rem;\n"])));
+exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border: none;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: 1;\n    z-index: ", ";\n\n    ", "\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border: none;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: 1;\n    z-index: ", ";\n\n    ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.subcategoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$isDragging ? 2 : 'auto'; }, function (props) { return props.$hasCategoryLayout && "\n        &:hover {\n            box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n        }\n    "; });
+exports.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    min-width: 0;\n\n    ", " {\n        margin-right: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    min-width: 0;\n\n    ", " {\n        margin-right: 0;\n    }\n"])), exports.DragHandleStyled);
 exports.SubcategoryIconWrapper = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--dark-opacity-50);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--dark-opacity-50);\n"])));
 exports.SubcategoryNameStyled = styled_components_1.default.span(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark);\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark);\n"])));
 exports.RowMiddleTitleStyled = styled_components_1.default.span(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n"])));

package/dist/components/DescriptionCard/DescriptionCard.test.js

@@ -80,7 +80,7 @@ describe('DescriptionCard', function () {
             boxShadow: '0px 6px 30px 0px var(--box-shadow-color)',
         });
     });
-    it('gives category layout subcategories a transparent border that can color on hover', function () {
+    it('keeps category layout subcategories borderless so hover can use the card shadow', function () {
         var _a;
         renderDescriptionCard({
             hasCategoryLayout: true,
@@ -89,11 +89,29 @@ describe('DescriptionCard', function () {
         var row = (_a = react_1.screen.getByText('Blend').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
         expect(row).toHaveStyle({
             display: 'grid',
-            borderWidth: '1px',
-            borderStyle: 'solid',
-            borderColor: 'transparent',
         });
     });
+    it('spaces subcategory rows with a 0.5rem gap', function () {
+        var _a;
+        renderDescriptionCard({
+            hasCategoryLayout: true,
+            subcategoryList: [{ name: 'Blend' }, { name: 'Terra' }],
+        });
+        var row = (_a = react_1.screen.getByText('Blend').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        expect(row === null || row === void 0 ? void 0 : row.parentElement).toHaveStyle({ gap: '0.5rem' });
+    });
+    it('spaces subcategory handle, icon and title with a 1rem gap', function () {
+        renderDescriptionCard({
+            hasDragHandle: true,
+            hasCategoryLayout: true,
+            subcategoryList: [{ name: 'Blend' }],
+        });
+        var nameWrapper = react_1.screen.getByText('Blend').parentElement;
+        var handles = react_1.screen.getAllByRole('button', { name: 'Sürükle' });
+        expect(nameWrapper).toHaveStyle({ gap: '1rem' });
+        expect(handles[1]).toHaveStyle({ marginRight: '0' });
+        expect(handles[0]).toHaveStyle({ marginRight: '1rem' });
+    });
     it('always shows the edit button on main and sub categories', function () {
         renderDescriptionCard({
             title: 'Çekirdek kahve',
@@ -143,6 +161,20 @@ describe('DescriptionCard', function () {
         expect(handles).toHaveLength(2);
         expect(handles[1]).toHaveAttribute('aria-roledescription', 'sortable');
     });
+    it('disables subcategory sorting when hasDisableSubcategorySort is true', function () {
+        renderDescriptionCard({
+            hasDragHandle: true,
+            hasDisableSubcategorySort: true,
+            hasCategoryLayout: true,
+            subcategoryList: [{ name: 'Blend' }],
+        });
+        var handles = react_1.screen.getAllByRole('button', { name: 'Sürükle' });
+        expect(handles).toHaveLength(2);
+        expect(handles[0]).toBeEnabled();
+        expect(handles[1]).toHaveAttribute('aria-disabled', 'true');
+        expect(handles[1]).not.toHaveAttribute('aria-roledescription');
+        expect(handles[1]).toHaveStyle({ cursor: 'no-drop' });
+    });
     it('maps subcategory drag ids to indexes within the same list', function () {
         expect((0, getReorderIndexes_1.getReorderIndexes)(['blend', 'terra'], 'blend', 'terra')).toEqual({
             fromIndex: 0,

package/dist/components/DescriptionCard/SortableDescriptionCard.js

@@ -35,7 +35,7 @@ var SortableDescriptionCard = function (_a) {
     return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: setNodeRef, style: {
             transform: utilities_1.CSS.Transform.toString(transform),
             transition: transition,
-            opacity: isDragging ? 0.6 : 1,
+            opacity: 1,
             zIndex: isDragging ? 2 : undefined,
         } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, __assign({}, props, { hasDragHandle: true, dragHandleProps: __assign(__assign({}, attributes), listeners) })) })));
 };

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

@@ -65,6 +65,8 @@ export interface DescriptionCard {
     hasTwoColumnHeader?: boolean;
     /** true ise başlık ve alt kategori satırlarında sürükle tutamacı gösterilir */
     hasDragHandle?: boolean;
+    /** true ise alt kategori sıralaması kapatılır (ör. tek alt kategori) */
+    hasDisableSubcategorySort?: boolean;
     /** Ana kategori tutamacına dnd-kit listener/attribute geçirmek için */
     dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
     headerButtonAction?(e: any): void;
@@ -102,6 +104,7 @@ export interface DescriptionCardStyledProps {
     $headerAlignItems?: HEADER_ALIGN_ITEMS;
     $isClickable?: boolean;
     $isDragging?: boolean;
+    $disabled?: boolean;
     $hasAccordion?: boolean;
     $statusVariant?: CATEGORY_STATUS_VARIANT;
     $customColumnSpan?: {