@conveyorhq/arrow-ds 1.189.0 → 1.191.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.189.0",
+  "version": "1.191.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Checkbox/Checkbox.d.ts

@@ -6,6 +6,7 @@ export type CheckboxProps = Omit<InputProps, "checked"> & {
     hideRequiredStyles?: boolean;
     isRequired?: boolean;
     checked?: boolean | "indeterminate";
+    color?: "brandGreen" | "blue";
 };
 export declare enum CheckboxState {
     CHECKED = "checked",
@@ -13,6 +14,6 @@ export declare enum CheckboxState {
     INDETERMINATE = "indeterminate"
 }
 export declare const Checkbox: {
-    ({ checked, children, className, disabled, id: idProp, label, onBlur, onChange, onClick, onFocus, hideRequiredStyles, isRequired, tabIndex, theme: themeProp, ...rest }: CheckboxProps): React.JSX.Element;
+    ({ checked, children, className, disabled, id: idProp, label, onBlur, onChange, onClick, onFocus, hideRequiredStyles, isRequired, tabIndex, theme: themeProp, color, ...rest }: CheckboxProps): React.JSX.Element;
     Group: (props: StackProps) => React.JSX.Element;
 };

package/public/components/Checkbox/Checkbox.js

@@ -50,7 +50,7 @@ var CheckboxState;
     CheckboxState["UNCHECKED"] = "unchecked";
     CheckboxState["INDETERMINATE"] = "indeterminate";
 })(CheckboxState || (exports.CheckboxState = CheckboxState = {}));
-const Checkbox = ({ checked, children, className, disabled = false, id: idProp, label, onBlur, onChange = () => { }, onClick, onFocus, hideRequiredStyles = true, isRequired = undefined, tabIndex, theme: themeProp, ...rest }) => {
+const Checkbox = ({ checked, children, className, disabled = false, id: idProp, label, onBlur, onChange = () => { }, onClick, onFocus, hideRequiredStyles = true, isRequired = undefined, tabIndex, theme: themeProp, color = "brandGreen", ...rest }) => {
     const { isRequired: isRequiredContext, theme: themeContext } = (0, react_1.useContext)(FormGroupContext_1.FormGroupContext);
     const fallbackId = `checkbox-${(0, react_1.useId)()}`;
     const id = (0, isUndefined_1.default)(idProp) ? fallbackId : idProp;
@@ -87,6 +87,12 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
         else if (checkedState === CheckboxState.UNCHECKED) {
             updatedChecked = CheckboxState.CHECKED;
         }
+        else if (checkedState === CheckboxState.INDETERMINATE) {
+            updatedChecked = CheckboxState.INDETERMINATE;
+        }
+        else {
+            updatedChecked = CheckboxState.UNCHECKED;
+        }
         setCheckedState(updatedChecked);
         if (onChange) {
             onChange(event);
@@ -103,10 +109,10 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
     };
     const bareCheckbox = (react_1.default.createElement(Box_1.Box, { className: (0, bem_1.bem)(cn, { e: "BoxWrapper" }) },
         react_1.default.createElement(Input_1.Input, { "aria-checked": ariaChecked(), checked: checkedState === CheckboxState.CHECKED, className: (0, bem_1.bem)(cn, { e: "Input" }), disabled: disabled, id: id, onChange: handleChange, type: "checkbox", onFocus: onFocus, onBlur: onBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex, ...rest }),
-        react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Box" }), (0, bem_1.bem)(cn, { e: "Box", m: theme }), checked && (0, bem_1.bem)(cn, { e: "Box", m: "checked" })) }),
-        checked && (react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Check" }), (0, bem_1.bem)(cn, { e: "Check", m: theme })), icon: checkedState === CheckboxState.INDETERMINATE
+        react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Box" }), (0, bem_1.bem)(cn, { e: "Box", m: theme }), (0, bem_1.bem)(cn, { e: "Box", m: color }), checked && (0, bem_1.bem)(cn, { e: "Box", m: "checked" })) }),
+        react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Check" }), (0, bem_1.bem)(cn, { e: "Check", m: theme }), checked && (0, bem_1.bem)(cn, { e: "Check", m: "checked" })), icon: checkedState === CheckboxState.INDETERMINATE
                 ? Icon_1.ICON_TYPE.MINUS
-                : Icon_1.ICON_TYPE.CHECK }))));
+                : Icon_1.ICON_TYPE.CHECK })));
     const checkboxWithLabel = label || children ? (react_1.default.createElement(Label_1.Label, { className: (0, bem_1.bem)(cn, { e: "Label" }), isRequired: calculatedRequired && !hideRequiredStyles },
         bareCheckbox,
         react_1.default.createElement(Text_1.Text, { as: "span", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "LabelText" }), (0, bem_1.bem)(cn, { e: "LabelText", m: theme })) },

package/public/components/Icon/Icon.d.ts

@@ -88,6 +88,7 @@ export declare enum ICON_TYPE {
     COPY = "copy",
     DOOR_CLOSED = "door-closed",
     DOOR_OPEN = "door-open",
+    DOWNLOAD = "download",
     DUNGEON = "dungeon",
     EDIT = "edit",
     ELLIPSIS_H = "ellipsis-h",

package/public/components/Icon/Icon.js

@@ -105,6 +105,7 @@ const faCrosshairs_1 = require("@fortawesome/free-solid-svg-icons/faCrosshairs")
 const faCrown_1 = require("@fortawesome/free-solid-svg-icons/faCrown");
 const faDoorClosed_1 = require("@fortawesome/free-solid-svg-icons/faDoorClosed");
 const faDoorOpen_1 = require("@fortawesome/free-solid-svg-icons/faDoorOpen");
+const faDownload_1 = require("@fortawesome/free-solid-svg-icons/faDownload");
 const faDungeon_1 = require("@fortawesome/free-solid-svg-icons/faDungeon");
 const faEdit_1 = require("@fortawesome/free-solid-svg-icons/faEdit");
 const faEllipsisH_1 = require("@fortawesome/free-solid-svg-icons/faEllipsisH");
@@ -248,7 +249,7 @@ const utilities_1 = require("../../utilities");
 const ShieldCheck_1 = require("./svg/ShieldCheck");
 const BrandZendesk_1 = require("./svg/BrandZendesk");
 const cn = (0, utilities_1.bemHOF)("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClipboardCheck_1.faClipboardCheck, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCodeBranch_1.faCodeBranch, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFeatherAlt_1.faFeatherAlt, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGavel_1.faGavel, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTag_1.faTag, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUniversalAccess_1.faUniversalAccess, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserClock_1.faUserClock, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClipboardCheck_1.faClipboardCheck, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCodeBranch_1.faCodeBranch, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDownload_1.faDownload, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFeatherAlt_1.faFeatherAlt, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGavel_1.faGavel, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTag_1.faTag, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUniversalAccess_1.faUniversalAccess, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserClock_1.faUserClock, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -364,6 +365,7 @@ var ICON_TYPE;
     ICON_TYPE["COPY"] = "copy";
     ICON_TYPE["DOOR_CLOSED"] = "door-closed";
     ICON_TYPE["DOOR_OPEN"] = "door-open";
+    ICON_TYPE["DOWNLOAD"] = "download";
     ICON_TYPE["DUNGEON"] = "dungeon";
     ICON_TYPE["EDIT"] = "edit";
     ICON_TYPE["ELLIPSIS_H"] = "ellipsis-h";

package/public/css/styles.css

@@ -2244,15 +2244,26 @@ override built-in Image component classes */
   border-color: rgb(134 163 181 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(249 251 252 / var(--tw-bg-opacity));
+  transition-duration: 150ms;
+
+  transition-property: background-color, border-color, opacity;
 }
 
-.ads-Checkbox-Box--product.ads-Checkbox-Box--checked {
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked, 
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--brandGreen {
   --tw-border-opacity: 1;
   border-color: rgb(51 198 159 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(51 198 159 / var(--tw-bg-opacity));
 }
 
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--blue {
+  --tw-border-opacity: 1;
+  border-color: rgb(13 125 228 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 125 228 / var(--tw-bg-opacity));
+}
+
 .ads-Checkbox-Check--product {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2268,13 +2279,21 @@ override built-in Image component classes */
 .ads-Checkbox.is-disabled .ads-Checkbox-Box--product {
   --tw-border-opacity: 1;
   border-color: rgb(222 231 238 / var(--tw-border-opacity));
+  transition-duration: 150ms;
 }
 
-.ads-Checkbox.is-disabled .ads-Checkbox-Box--product.ads-Checkbox-Box--checked {
+.ads-Checkbox.is-disabled .ads-Checkbox-Box--product.ads-Checkbox-Box--checked, 
+.ads-Checkbox.is-disabled
+  .ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--brandGreen {
   --tw-border-opacity: 1;
-  border-color: rgb(125 229 202 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(125 229 202 / var(--tw-bg-opacity));
+  border-color: rgb(51 198 159 / var(--tw-border-opacity));
+  opacity: 0.5;
+}
+
+.ads-Checkbox.is-disabled
+  .ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--blue {
+  --tw-border-opacity: 1;
+  border-color: rgb(13 125 228 / var(--tw-border-opacity));
   opacity: 0.5;
 }
 
@@ -2366,12 +2385,39 @@ override built-in Image component classes */
 /* Checked */
 
 .ads-Checkbox-Check {
+  pointer-events: none;
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 12px;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  opacity: 0;
+  transition-duration: 150ms;
+
+  transition-property: opacity, -webkit-transform;
+
+  transition-property: opacity, transform;
+
+  transition-property: opacity, transform, -webkit-transform;
+  -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+}
+
+.ads-Checkbox-Check--checked {
+  opacity: 1;
+  transition-duration: 150ms;
+
+  transition-property: opacity, -webkit-transform;
+
+  transition-property: opacity, transform;
+
+  transition-property: opacity, transform, -webkit-transform;
+  -webkit-transform: scale(1);
+          transform: scale(1);
 }
 
 /* Focused */