@box/blueprint-web-assets 4.26.0 → 4.28.0

package/icons/Fill/BoxApps.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsxs("g", { fill: props.color || '#909090', children: [_jsx("path", { d: "M10.17 5.826a.447.447 0 0 1-.006-.697l2.514-2.033a.428.428 0 0 1 .534-.005l2.617 2.033a.447.447 0 0 1-.006.707L13.205 7.79a.428.428 0 0 1-.52-.005L10.17 5.826Z" }), _jsx("path", { fillRule: "evenodd", d: "M.454 9.037a1.192 1.192 0 0 1-.016-1.86l6.704-5.421a1.142 1.142 0 0 1 1.423-.014l2.141 1.663-1.17.946a1.447 1.447 0 0 0 .02 2.264l2.514 1.958a1.428 1.428 0 0 0 1.734.017l1.82-1.36c.533.494.499 1.375-.096 1.82l-6.98 5.221c-.415.31-.981.305-1.39-.014L.454 9.037Zm4.716 1.79a.447.447 0 0 1-.006-.698l2.514-2.033a.428.428 0 0 1 .534-.005l2.617 2.033a.447.447 0 0 1-.006.707L8.205 12.79a.428.428 0 0 1-.52-.005L5.17 10.826Z", clipRule: "evenodd" }), _jsx("path", { d: "m11.517 4.035 3.29 2.556-1.602 1.198a.428.428 0 0 1-.52-.005L10.17 5.826a.447.447 0 0 1-.006-.697l1.353-1.094Z" })] }) }));
+const SvgBoxApps = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: [_jsx("path", { fill: props.color || '#909090', d: "M5.413 12.689a5.109 5.109 0 0 1-.138-.085l-3.938-2.482c-.1-.063-.234-.026-.272.086-.301.876.511 1.312 1.172 1.728l4.093 2.58a3.13 3.13 0 0 0 3.342 0l4.093-2.58c.662-.417 1.468-.852 1.172-1.73-.038-.113-.173-.15-.273-.088l-1.405.886a1.253 1.253 0 0 1-.05.034l-4.094 2.58c-.681.43-1.546.43-2.228 0l-1.474-.93Z" }), _jsx("path", { fill: props.color || '#909090', fillRule: "evenodd", d: "m6.397.485-5.355 3.53c-1.39.917-1.39 3.053 0 3.97l5.355 3.53c.98.647 2.225.647 3.206 0l5.355-3.53c1.39-.917 1.39-3.053 0-3.97L9.603.486a2.891 2.891 0 0 0-3.206 0ZM4.814 6.991a.6.6 0 0 0 0 1.018L7.682 9.8a.6.6 0 0 0 .636 0l2.868-1.792a.6.6 0 0 0 0-1.018L8.318 5.2a.6.6 0 0 0-.636 0L4.814 6.99Z", clipRule: "evenodd" })] }));
 export default SvgBoxApps;

package/icons/Line/BoxApps.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsxs("g", { fill: props.color || '#222222', children: [_jsx("path", { d: "M1.067 7.955 7.77 2.533a.142.142 0 0 1 .18-.002l1.653 1.284a.5.5 0 0 0 .614-.79L8.565 1.742a1.142 1.142 0 0 0-1.423.014L.438 7.177a1.192 1.192 0 0 0 .016 1.86l6.704 5.22c.409.319.975.324 1.39.014l6.98-5.22c.622-.467.63-1.411.016-1.888a.425.425 0 0 0-.527.004l-.092.074a.453.453 0 0 0 .006.712.18.18 0 0 1 .069.149.18.18 0 0 1-.071.147l-6.98 5.221a.142.142 0 0 1-.176-.002l-6.704-5.22A.18.18 0 0 1 1 8.102c0-.063.024-.113.067-.147Z" }), _jsx("path", { d: "M9.67 5.826a.447.447 0 0 1-.006-.697l2.514-2.033a.428.428 0 0 1 .534-.005l2.617 2.033a.447.447 0 0 1-.006.707L12.705 7.79a.428.428 0 0 1-.52-.005L9.67 5.826Z" }), _jsx("path", { fillRule: "evenodd", d: "m6.337 8.967 1.618 1.26 1.686-1.26-1.685-1.31-1.62 1.31Zm-1.173-.338a.447.447 0 0 0 .006.697l2.514 1.958c.154.12.366.121.521.005l2.618-1.958a.447.447 0 0 0 .006-.707L8.212 6.59a.428.428 0 0 0-.534.005L5.164 8.629Z", clipRule: "evenodd" })] }) }));
+const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsxs("g", { fill: props.color || '#222222', children: [_jsx("path", { d: "M5.413 12.689a5.109 5.109 0 0 1-.138-.085l-3.938-2.482c-.1-.063-.234-.026-.272.086-.301.876.511 1.312 1.172 1.728l4.093 2.58a3.13 3.13 0 0 0 3.342 0l4.093-2.58c.662-.417 1.468-.852 1.172-1.73-.038-.113-.173-.15-.273-.088l-1.405.886a1.253 1.253 0 0 1-.05.034l-4.094 2.58c-.681.43-1.546.43-2.228 0l-1.474-.93Z" }), _jsx("path", { fillRule: "evenodd", d: "M1.042 4.016 6.397.485a2.891 2.891 0 0 1 3.206 0l5.355 3.53c1.39.917 1.39 3.053 0 3.97l-5.355 3.53a2.891 2.891 0 0 1-3.206 0l-5.355-3.53c-1.39-.917-1.39-3.053 0-3.97Zm.535.902c-.758.5-.758 1.664 0 2.164l5.354 3.531a1.927 1.927 0 0 0 2.138 0l5.354-3.53c.758-.5.758-1.665 0-2.165L9.07 1.387a1.927 1.927 0 0 0-2.138 0l-5.354 3.53Z", clipRule: "evenodd" }), _jsx("path", { d: "M5.5 7.333a.4.4 0 0 1 0-.666l2.278-1.52a.4.4 0 0 1 .444 0l2.279 1.52a.4.4 0 0 1 0 .666l-2.28 1.52a.4.4 0 0 1-.443 0L5.5 7.332Z" })] }) }));
 export default SvgBoxApps;

package/icons/Logo/BoxApps.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: _jsxs("g", { children: [_jsx("path", { fill: "#2486FC", d: "M26 0H6a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6Z" }), _jsx("path", { fill: "#12437E", d: "m8.84 15.75 6.219 4.756a1.323 1.323 0 0 0 1.587.016l6.437-4.73 1.837 1.402a1.374 1.374 0 0 1-.02 2.2l-8.279 6.083a1.374 1.374 0 0 1-1.648-.016L7.02 19.378a1.374 1.374 0 0 1-.02-2.167l1.84-1.462Z" }), _jsx("path", { fill: "#12437E", d: "M12.522 16.449a.5.5 0 0 1-.007-.794l3.103-2.42a.5.5 0 0 1 .607-.006l3.23 2.42a.5.5 0 0 1-.007.805l-3.23 2.33a.5.5 0 0 1-.593-.005l-3.103-2.33Z" }), _jsx("path", { fill: "#12437E", fillRule: "evenodd", d: "m19.895 10.791 2.286 1.717 2.38-1.717-2.38-1.782-2.286 1.782Zm-1.13-.386a.5.5 0 0 0 .007.794l3.103 2.33a.5.5 0 0 0 .593.006l3.23-2.33a.5.5 0 0 0 .008-.806l-3.23-2.42a.5.5 0 0 0-.608.006l-3.103 2.42Z", clipRule: "evenodd" }), _jsx("path", { fill: "white", fillRule: "evenodd", d: "M7.383 12.562a1.323 1.323 0 0 0 .019 2.086l7.657 5.858a1.323 1.323 0 0 0 1.587.016l7.973-5.858c.71-.523.72-1.583.019-2.118l-.389-.296-1.781 1.285a.5.5 0 0 1-.593-.006l-3.103-2.33a.5.5 0 0 1-.007-.794l1.517-1.183-3.616-2.76a1.323 1.323 0 0 0-1.626.017l-7.657 6.083Zm5.132 3.093a.5.5 0 0 0 .007.794l3.103 2.33a.5.5 0 0 0 .593.006l3.23-2.33a.5.5 0 0 0 .008-.806l-3.23-2.42a.5.5 0 0 0-.608.006l-3.103 2.42Z", clipRule: "evenodd" }), _jsx("path", { fill: "white", d: "m19.895 10.791 2.286 1.717 2.38-1.717-2.38-1.782-2.286 1.782Z" })] }) }));
+const SvgBoxApps = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: [_jsxs("g", { children: [_jsx("path", { fill: "#376DCC", d: "M26 0H6a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6Z" }), _jsxs("g", { clipPath: "url(#BoxApps_svg__b)", children: [_jsx("path", { fill: "black", fillRule: "evenodd", d: "m5.564 16.024 8.032-5.297a4.337 4.337 0 0 1 4.808 0l8.032 5.297c2.085 1.374 2.085 4.578 0 5.952l-8.032 5.297a4.337 4.337 0 0 1-4.808 0l-8.032-5.297c-2.085-1.374-2.085-4.578 0-5.952Z", clipRule: "evenodd" }), _jsx("path", { fill: "#E2E2E2", fillRule: "evenodd", d: "m5.564 12.024 8.032-5.297a4.337 4.337 0 0 1 4.808 0l8.032 5.297C26.84 12.29 28 13 28 13s.003 1.308 0 2.014c-.004 1.14-.526 2.278-1.564 2.962l-8.032 5.297a4.337 4.337 0 0 1-4.808 0l-8.032-5.297c-1.05-.692-1.571-1.847-1.564-3C4.004 14.284 4 13 4 13s1.16-.71 1.564-.976Z", clipRule: "evenodd" }), _jsx("path", { fill: "white", fillRule: "evenodd", d: "m5.564 10.024 8.032-5.297a4.337 4.337 0 0 1 4.808 0l8.032 5.297c2.085 1.374 2.085 4.578 0 5.952l-8.032 5.296a4.337 4.337 0 0 1-4.808 0l-8.032-5.296c-2.085-1.374-2.085-4.578 0-5.952Z", clipRule: "evenodd" }), _jsx("g", { filter: "url(#BoxApps_svg__c)", children: _jsx("path", { fill: "#0DB6FF", d: "M11.357 16.098a1 1 0 0 1 0-1.696l4.113-2.57a1 1 0 0 1 1.06 0l4.113 2.57a1 1 0 0 1 0 1.696l-4.113 2.57a1 1 0 0 1-1.06 0l-4.113-2.57Z" }) })] })] }), _jsxs("defs", { children: [_jsx("clipPath", { id: "BoxApps_svg__b", children: _jsx("path", { fill: "white", d: "M0 0h24v24H0z", transform: "matrix(1 0 0 -1 4 28)" }) }), _jsxs("filter", { id: "BoxApps_svg__c", width: 10.226, height: 7.942, x: 10.887, y: 11.679, colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", children: [_jsx("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), _jsx("feOffset", { dy: 0.8 }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { values: "0 0 0 0 0.0512048 0 0 0 0 0.506949 0 0 0 0 0.703809 0 0 0 1 0" }), _jsx("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_19850_116" }), _jsx("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_19850_116", result: "shape" })] })] })] }));
 export default SvgBoxApps;

package/illustrations/Medium/Governance.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgGovernance: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgGovernance;

package/illustrations/Medium/Governance.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgGovernance = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 140 140", role: "img", ...props, children: [_jsxs("g", { fill: "var(--surface-illustration-surface-box-neutral)", opacity: 0.1, children: [_jsx("path", { d: "M65 63a1 1 0 0 1 1-1h11a1 1 0 1 1 0 2H66a1 1 0 0 1-1-1ZM65 67a1 1 0 0 1 1-1h19a1 1 0 1 1 0 2H66a1 1 0 0 1-1-1ZM66 70a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h19a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H66Z" }), _jsx("path", { fillRule: "evenodd", d: "M36 50c8.837 0 16-7.163 16-16a16.04 16.04 0 0 0-.465-3.845A42.832 42.832 0 0 1 70 26c2.038 0 4.043.142 6.005.416C76.225 35.06 83.302 42 92 42c3.345 0 6.45-1.026 9.017-2.781a42.892 42.892 0 0 1 11.136 21.246C105.175 62.188 100 68.49 100 76c0 5.8 3.087 10.88 7.707 13.686a43.211 43.211 0 0 1-15.832 16.342C89.113 101.23 83.934 98 78 98c-7.916 0-14.49 5.749-15.773 13.299a42.877 42.877 0 0 1-22.008-11.282A15.923 15.923 0 0 0 43 91c0-8.698-6.94-15.774-15.584-15.995A43.38 43.38 0 0 1 27 69c0-7.053 1.698-13.71 4.707-19.582 1.367.38 2.806.582 4.293.582Zm41.563-5L92 58.65V81a6 6 0 0 1-6 6h-.384a6.002 6.002 0 0 1-5.523 3.651H63.747A7.5 7.5 0 1 1 54 79.865V56a6.001 6.001 0 0 1 5.071-5.929A6.001 6.001 0 0 1 65 45h12.563Z", clipRule: "evenodd" })] }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M90.688 19.875c-.725 0-1.313.588-1.313 1.313v.437h-2.188a.438.438 0 0 0 0 .875l.73 8.033a1.75 1.75 0 0 0 1.744 1.592h4.678c.906 0 1.661-.69 1.743-1.592l.73-8.033a.438.438 0 0 0 0-.875h-2.187v-.438c0-.724-.588-1.312-1.313-1.312h-2.624Zm3.062 1.75v-.438a.438.438 0 0 0-.438-.437h-2.624a.438.438 0 0 0-.438.438v.437h3.5Zm-3.063 2.625a.438.438 0 0 0-.437.438v4.375a.438.438 0 0 0 .875 0v-4.375a.438.438 0 0 0-.438-.438Zm2.626 0a.438.438 0 0 0-.438.438v4.375a.438.438 0 0 0 .875 0v-4.375a.438.438 0 0 0-.438-.438Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M78 26c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Zm14-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12ZM29.125 26.5a.625.625 0 1 0 0 1.25h1.447l-3.068 5.625h-.18a.625.625 0 0 0-.612.5c-.145.715-.156 1.812.346 2.76.533 1.01 1.587 1.74 3.317 1.74 1.73 0 2.783-.73 3.317-1.74.502-.948.491-2.045.346-2.76a.625.625 0 0 0-.613-.5h-.028l-1.023-5.625h3v12.5h-2.5a.625.625 0 1 0 0 1.25h6.25a.625.625 0 1 0 0-1.25h-2.5v-12.5h3.002l-1.023 5.625h-.029a.625.625 0 0 0-.612.5c-.145.715-.156 1.812.346 2.76.533 1.01 1.587 1.74 3.317 1.74 1.73 0 2.783-.73 3.317-1.74.502-.948.491-2.045.346-2.76a.625.625 0 0 0-.613-.5h-.18l-3.067-5.625h1.447a.625.625 0 1 0 0-1.25h-13.75Zm3.001 6.875-.8-4.398-2.398 4.398h3.198Zm10.946 0h-3.198l.8-4.398 2.398 4.398Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M36 20c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14ZM24 34c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M66.836 22.105a47.706 47.706 0 0 1 6.328 0 1 1 0 0 1-.133 1.995 45.68 45.68 0 0 0-6.062 0 1 1 0 1 1-.133-1.995ZM59.726 24.14A1 1 0 0 1 59 25.354a44.657 44.657 0 0 0-5.758 1.87 1 1 0 0 1-.745-1.856 46.648 46.648 0 0 1 6.016-1.954 1 1 0 0 1 1.213.726ZM104.672 38.752a1 1 0 0 1 1.408.126 47.24 47.24 0 0 1 3.721 5.113 1 1 0 0 1-1.693 1.066 44.94 44.94 0 0 0-3.563-4.896 1 1 0 0 1 .127-1.409ZM112.332 50.941a1 1 0 0 1 1.3.556 46.572 46.572 0 0 1 1.954 6.016 1 1 0 0 1-1.94.487 44.534 44.534 0 0 0-1.87-5.758 1 1 0 0 1 .556-1.3ZM27.668 50.941a1 1 0 0 1 .556 1.3 44.657 44.657 0 0 0-1.87 5.76 1 1 0 1 1-1.94-.488 46.629 46.629 0 0 1 1.954-6.016 1 1 0 0 1 1.3-.556ZM24.169 64.905a1 1 0 0 1 .931 1.064 45.68 45.68 0 0 0 0 6.062 1 1 0 1 1-1.995.133 47.706 47.706 0 0 1 0-6.328 1 1 0 0 1 1.064-.931ZM109.487 92.63a1 1 0 0 1 .314 1.38 47.24 47.24 0 0 1-3.721 5.112 1 1 0 1 1-1.535-1.283 44.94 44.94 0 0 0 3.563-4.895 1 1 0 0 1 1.379-.314ZM100.248 103.672a1 1 0 0 1-.126 1.408 47.252 47.252 0 0 1-5.113 3.721 1 1 0 0 1-1.066-1.693 44.94 44.94 0 0 0 4.896-3.563 1 1 0 0 1 1.409.127ZM39.752 103.672a1 1 0 0 1 1.409-.127 44.94 44.94 0 0 0 4.895 3.563 1 1 0 0 1-1.065 1.693 47.24 47.24 0 0 1-5.113-3.721 1 1 0 0 1-.126-1.408ZM51.941 111.332a1 1 0 0 1 1.3-.556 44.534 44.534 0 0 0 5.76 1.87 1 1 0 0 1-.488 1.94 46.569 46.569 0 0 1-6.016-1.954 1 1 0 0 1-.556-1.3Z" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M77.563 45 92 58.65V81a6 6 0 0 1-6 6h-.384a6.002 6.002 0 0 1-5.523 3.651H63.747A7.5 7.5 0 1 1 54 79.865V56a6.001 6.001 0 0 1 5.071-5.929A6.001 6.001 0 0 1 65 45h12.563ZM56 79.15a7.54 7.54 0 0 1 3 0V52.126c-1.725.444-3 2.01-3 3.874v23.15Zm5 .715a7.511 7.511 0 0 1 3.85 5.132L65 85h21a4 4 0 0 0 4-4V59.65h-6.438a7 7 0 0 1-7-7V47H65a4 4 0 0 0-4 4v28.865ZM64.984 87a7.475 7.475 0 0 1-.297 1.651h15.406c1.331 0 2.511-.65 3.238-1.651H64.984Zm13.579-38.302v3.952a5 5 0 0 0 5 5h4.468l-9.469-8.952ZM56.879 89.75c.309 0 .544-.113.704-.34l3.567-5.215a.977.977 0 0 0 .124-.247.752.752 0 0 0 .038-.23.675.675 0 0 0-.217-.513.768.768 0 0 0-.548-.205.77.77 0 0 0-.374.085.872.872 0 0 0-.294.294l-3.013 4.585-1.514-1.755a.747.747 0 0 0-.59-.268.76.76 0 0 0-.546.205.682.682 0 0 0-.216.517c0 .092.016.18.049.262.032.083.09.17.175.262l1.979 2.263c.179.2.404.3.676.3Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M109.875 72.063c0-.484.392-.876.875-.876h10.5a.875.875 0 0 1 0 1.75h-10.5a.875.875 0 0 1-.875-.874Z" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M121.25 79.063a1.75 1.75 0 0 1-1.75 1.75h-7a1.75 1.75 0 0 1-1.75-1.75v-5.25h10.5v5.25Zm-7.438-3.5c0-.484.392-.876.876-.876h2.624a.875.875 0 1 1 0 1.75h-2.624a.875.875 0 0 1-.876-.874Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M102 76c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Zm14-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12ZM30.496 88.2a3.5 3.5 0 0 0-6.996.175v.875A1.75 1.75 0 0 0 21.75 91v4.375c0 .967.783 1.75 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V91a1.75 1.75 0 0 0-1.75-1.75v-.875l-.004-.175Zm-5.246 4.987c0-.241.196-.437.438-.437h2.625a.438.438 0 0 1 0 .875h-2.625l-.08-.007a.438.438 0 0 1-.358-.43Zm.004-4.943a1.751 1.751 0 0 1 3.496.131v.875h-3.5v-.875l.004-.131Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M13 91c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Zm14-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12ZM82.331 109.669A6.123 6.123 0 0 0 71.875 114a6.126 6.126 0 0 0 12.25 0 6.126 6.126 0 0 0-1.794-4.331Zm-5.078.084a.438.438 0 0 1 .31-.128l.078.007a.438.438 0 0 1 .359.43V114h2.188a.438.438 0 1 1 0 .875h-2.626a.438.438 0 0 1-.437-.437v-4.376c0-.116.046-.227.128-.309Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M64 114c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Zm14-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12Z", clipRule: "evenodd" })] }));
+export default SvgGovernance;

package/illustrations/Medium/StorageCapacity.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgStorageCapacity = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 140 140", role: "img", ...props, children: [_jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M13 28h30v67H16a3 3 0 0 1-3-3V28ZM99 43a2 2 0 0 1 2-2v29a2 2 0 0 0 2 2h10v2h-12a2 2 0 0 1-2-2V48h-2v-1h2v-4ZM119 116c0 2.209-21.938 4-49 4s-49-1.791-49-4 21.938-4 49-4 49 1.791 49 4ZM118 42v6h5.5l-5.5-6ZM48 32a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h30a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H48ZM47 41.5a1.5 1.5 0 0 1 1.5-1.5h9a1.5 1.5 0 0 1 0 3h-9a1.5 1.5 0 0 1-1.5-1.5ZM106.5 32a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM48.852 90.772l.383-.923c.234.097.492.151.765.151h1v1h-1c-.407 0-.795-.081-1.148-.228ZM105 91v-1h1c.273 0 .531-.054.765-.151l.383.923A2.987 2.987 0 0 1 106 91h-1ZM51 47h-1c-.407 0-.795.081-1.148.228l.383.923c.234-.097.492-.151.765-.151h1v-1ZM47 87.05h1V88c0 .273.054.53.151.765l-.923.383A2.993 2.993 0 0 1 47 88v-.95ZM47 85.15h1v-1.9h-1v1.9ZM47 81.35h1v-1.9h-1v1.9ZM47 77.55h1v-1.9h-1v1.9ZM47 73.75h1v-1.9h-1v1.9ZM47 69.95h1v-1.9h-1v1.9ZM47 66.15h1v-1.9h-1v1.9ZM47 62.35h1v-1.9h-1v1.9ZM47 58.55h1v-1.9h-1v1.9ZM47 54.75h1v-1.9h-1v1.9ZM47 50.95h1V50c0-.273.054-.53.151-.765l-.923-.383A2.993 2.993 0 0 0 47 50v.95ZM53 47v1h2v-1h-2ZM57 47v1h2v-1h-2ZM61 47v1h2v-1h-2ZM65 47v1h2v-1h-2ZM69 47v1h2v-1h-2ZM73 47v1h2v-1h-2ZM77 47v1h2v-1h-2ZM81 47v1h2v-1h-2ZM85 47v1h2v-1h-2ZM89 47v1h2v-1h-2ZM93 47v1h2v-1h-2ZM109 75.65h-1v1.9h1v-1.9ZM109 79.45h-1v1.9h1v-1.9ZM109 83.25h-1v1.9h1v-1.9ZM109 87.05h-1V88c0 .273-.054.53-.151.765l.923.383c.147-.353.228-.741.228-1.148v-.95ZM103 91v-1h-2v1h2ZM99 91v-1h-2v1h2ZM95 91v-1h-2v1h2ZM91 91v-1h-2v1h2ZM87 91v-1h-2v1h2ZM83 91v-1h-2v1h2ZM79 91v-1h-2v1h2ZM75 91v-1h-2v1h2ZM71 91v-1h-2v1h2ZM67 91v-1h-2v1h2ZM63 91v-1h-2v1h2ZM59 91v-1h-2v1h2ZM55 91v-1h-2v1h2ZM116.293 54.293a1 1 0 0 1 1.117-.205l10 4.5a1 1 0 0 1-.31 1.907l-4.186.419-.419 4.186a1 1 0 0 1-1.907.31l-4.5-10a1 1 0 0 1 .205-1.117Z" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M81.995 65.8A4 4 0 0 0 74 66v1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2v-1l-.005-.2ZM76 71.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3l-.09-.008A.5.5 0 0 1 76 71.5Zm.005-5.65A2.001 2.001 0 0 1 80 66v1h-4v-1l.005-.15Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M11 26a5 5 0 0 1 5-5h94a5 5 0 0 1 5 5v13h1.946c.567 0 1.107.24 1.486.662l7.054 7.835c.331.368.514.844.514 1.338v6.668l2.41 1.085a1 1 0 0 1-.31 1.907l-2.1.21V70a2 2 0 0 1-2 2h-9v20a5 5 0 0 1-5 5H16a5 5 0 0 1-5-5V26Zm113 28.603-5.59-2.515a1 1 0 0 0-1.322 1.322l4.5 10a1 1 0 0 0 1.907-.31l.419-4.186.086-.009V70h-21V41h13v7a2 2 0 0 0 2 2h6v4.603ZM113 39h-10a2 2 0 0 0-2 2v29a2 2 0 0 0 2 2h10v20a3 3 0 0 1-3 3H16a3 3 0 0 1-3-3V28h100v11Zm-9-16a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-6Zm-88 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm73 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm5 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm5 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm19 25v-6l5.5 6H118Z", clipRule: "evenodd" })] }));
+const SvgStorageCapacity = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 140 140", role: "img", ...props, children: [_jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillOpacity: 0.1, d: "M13 28h30v67H16a3 3 0 0 1-3-3V28ZM99 43a2 2 0 0 1 2-2v29a2 2 0 0 0 2 2h10v2h-12a2 2 0 0 1-2-2V48h-2v-1h2v-4ZM119 116c0 2.209-21.938 4-49 4s-49-1.791-49-4 21.938-4 49-4 49 1.791 49 4ZM118 42v6h5.5l-5.5-6ZM48 32a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h30a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H48ZM47 41.5a1.5 1.5 0 0 1 1.5-1.5h9a1.5 1.5 0 0 1 0 3h-9a1.5 1.5 0 0 1-1.5-1.5ZM106.5 32a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM48.852 90.772l.383-.923c.234.097.492.151.765.151h1v1h-1c-.407 0-.795-.081-1.148-.228ZM105 91v-1h1c.273 0 .531-.054.765-.151l.383.923A2.987 2.987 0 0 1 106 91h-1ZM51 47h-1c-.407 0-.795.081-1.148.228l.383.923c.234-.097.492-.151.765-.151h1v-1ZM47 87.05h1V88c0 .273.054.53.151.765l-.923.383A2.993 2.993 0 0 1 47 88v-.95ZM47 85.15h1v-1.9h-1v1.9ZM47 81.35h1v-1.9h-1v1.9ZM47 77.55h1v-1.9h-1v1.9ZM47 73.75h1v-1.9h-1v1.9ZM47 69.95h1v-1.9h-1v1.9ZM47 66.15h1v-1.9h-1v1.9ZM47 62.35h1v-1.9h-1v1.9ZM47 58.55h1v-1.9h-1v1.9ZM47 54.75h1v-1.9h-1v1.9ZM47 50.95h1V50c0-.273.054-.53.151-.765l-.923-.383A2.993 2.993 0 0 0 47 50v.95ZM53 47v1h2v-1h-2ZM57 47v1h2v-1h-2ZM61 47v1h2v-1h-2ZM65 47v1h2v-1h-2ZM69 47v1h2v-1h-2ZM73 47v1h2v-1h-2ZM77 47v1h2v-1h-2ZM81 47v1h2v-1h-2ZM85 47v1h2v-1h-2ZM89 47v1h2v-1h-2ZM93 47v1h2v-1h-2ZM109 75.65h-1v1.9h1v-1.9ZM109 79.45h-1v1.9h1v-1.9ZM109 83.25h-1v1.9h1v-1.9ZM109 87.05h-1V88c0 .273-.054.53-.151.765l.923.383c.147-.353.228-.741.228-1.148v-.95ZM103 91v-1h-2v1h2ZM99 91v-1h-2v1h2ZM95 91v-1h-2v1h2ZM91 91v-1h-2v1h2ZM87 91v-1h-2v1h2ZM83 91v-1h-2v1h2ZM79 91v-1h-2v1h2ZM75 91v-1h-2v1h2ZM71 91v-1h-2v1h2ZM67 91v-1h-2v1h2ZM63 91v-1h-2v1h2ZM59 91v-1h-2v1h2ZM55 91v-1h-2v1h2ZM116.293 54.293a1 1 0 0 1 1.117-.205l10 4.5a1 1 0 0 1-.31 1.907l-4.186.419-.419 4.186a1 1 0 0 1-1.907.31l-4.5-10a1 1 0 0 1 .205-1.117Z" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M81.995 65.8A4 4 0 0 0 74 66v1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2v-1l-.005-.2ZM76 71.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3l-.09-.008A.5.5 0 0 1 76 71.5Zm.005-5.65A2.001 2.001 0 0 1 80 66v1h-4v-1l.005-.15Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M11 26a5 5 0 0 1 5-5h94a5 5 0 0 1 5 5v13h1.946c.567 0 1.107.24 1.486.662l7.054 7.835c.331.368.514.844.514 1.338v6.668l2.41 1.085a1 1 0 0 1-.31 1.907l-2.1.21V70a2 2 0 0 1-2 2h-9v20a5 5 0 0 1-5 5H16a5 5 0 0 1-5-5V26Zm113 28.603-5.59-2.515a1 1 0 0 0-1.322 1.322l4.5 10a1 1 0 0 0 1.907-.31l.419-4.186.086-.009V70h-21V41h13v7a2 2 0 0 0 2 2h6v4.603ZM113 39h-10a2 2 0 0 0-2 2v29a2 2 0 0 0 2 2h10v20a3 3 0 0 1-3 3H16a3 3 0 0 1-3-3V28h100v11Zm-9-16a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-6Zm-88 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm73 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm5 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm5 0a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Zm19 25v-6l5.5 6H118Z", clipRule: "evenodd" })] }));
 export default SvgStorageCapacity;

package/illustrations/Medium/index.d.ts

@@ -29,6 +29,7 @@ export { default as FolderStar } from './FolderStar';
 export { default as Form } from './Form';
 export { default as FormsDragandDrop } from './FormsDragandDrop';
 export { default as FormsZeroState } from './FormsZeroState';
+export { default as Governance } from './Governance';
 export { default as Handshake } from './Handshake';
 export { default as HandshakeSecure } from './HandshakeSecure';
 export { default as HatWand } from './HatWand';

package/illustrations/Medium/index.js

@@ -29,6 +29,7 @@ export { default as FolderStar } from './FolderStar';
 export { default as Form } from './Form';
 export { default as FormsDragandDrop } from './FormsDragandDrop';
 export { default as FormsZeroState } from './FormsZeroState';
+export { default as Governance } from './Governance';
 export { default as Handshake } from './Handshake';
 export { default as HandshakeSecure } from './HandshakeSecure';
 export { default as HatWand } from './HatWand';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.26.0",
+    "version": "4.28.0",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -98,12 +98,12 @@
         }
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.6.1",
+        "@box/storybook-utils": "^0.7.0",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "chalk": "4.1.2",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },
-    "gitHead": "fc4d7910edf521a9a5eb4c109c22eb305ff86341"
+    "gitHead": "36614341a1bf61c7180c7f08e3cd523db717fa3d"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Sep 2024 07:45:47 GMT
+ * Generated on Fri, 18 Oct 2024 08:39:49 GMT
  */
 
 export const BackgroundBackground: string;
@@ -233,6 +233,12 @@ export const SurfaceRadiotileSurfaceSelected: string;
 export const SurfaceToggletextSurfaceOn: string;
 export const SurfaceToggletextSurfaceOnHover: string;
 export const SurfaceToggletextSurfaceOnPressed: string;
+export const SurfaceToggletextSurfaceOnAi: string;
+export const SurfaceToggletextSurfaceOnAiHover: string;
+export const SurfaceToggletextSurfaceOnAiPressed: string;
+export const SurfaceToggletextSurfaceOffAi: string;
+export const SurfaceToggletextSurfaceOffAiHover: string;
+export const SurfaceToggletextSurfaceOffAiPressed: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -313,6 +319,12 @@ export const BorderToggletextBorderOffPressed: string;
 export const BorderToggletextBorderOn: string;
 export const BorderToggletextBorderOnHover: string;
 export const BorderToggletextBorderOnPressed: string;
+export const BorderToggletextBorderOnAi: string;
+export const BorderToggletextBorderOnAiHover: string;
+export const BorderToggletextBorderOnAiPressed: string;
+export const BorderToggletextBorderOffAi: string;
+export const BorderToggletextBorderOffAiHover: string;
+export const BorderToggletextBorderOffAiPressed: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
@@ -378,6 +390,9 @@ export const BrandDocgenTertiary: string;
 export const BrandSignPrimary: string;
 export const BrandSignSecondary: string;
 export const BrandSignTertiary: string;
+export const BrandBoxAi100: string;
+export const BrandBoxAi120: string;
+export const BrandBoxAi140: string;
 export const Gray10: string;
 export const Gray20: string;
 export const Gray30: string;

package/tokens/px-tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Sep 2024 07:45:47 GMT
+ * Generated on Fri, 18 Oct 2024 08:39:49 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -127,10 +127,10 @@ export const SurfaceItemSmallSurfaceHover = '#f4f4f4';
 export const SurfaceItemSmallSurfaceSelected = '#f2f7fd';
 export const SurfaceSwitchSurface = '#ffffff';
 export const SurfaceSwitchSurfaceHover = '#ffffff';
-export const SurfaceSwitchSurfaceOff = '#909090';
-export const SurfaceSwitchSurfaceOffHover = '#909090';
+export const SurfaceSwitchSurfaceOff = '#d3d3d3';
+export const SurfaceSwitchSurfaceOffHover = '#bcbcbc';
 export const SurfaceSwitchSurfaceOn = '#0061d5';
-export const SurfaceSwitchSurfaceOnHover = '#0061d5';
+export const SurfaceSwitchSurfaceOnHover = '#2079E3';
 export const SurfaceRadioSurface = '#ffffff';
 export const SurfaceRadioSurfaceHover = '#ffffff';
 export const SurfaceRadioSurfaceSelected = '#0061d5';
@@ -233,6 +233,12 @@ export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
 export const SurfaceToggletextSurfaceOn = '#f2f7fd';
 export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
 export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
+export const SurfaceToggletextSurfaceOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const SurfaceToggletextSurfaceOnAiHover = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
+export const SurfaceToggletextSurfaceOnAiPressed = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
+export const SurfaceToggletextSurfaceOffAi = '#ffffff';
+export const SurfaceToggletextSurfaceOffAiHover = '#f4f4f4';
+export const SurfaceToggletextSurfaceOffAiPressed = '#e8e8e8';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -313,6 +319,12 @@ export const BorderToggletextBorderOffPressed = '#6F6F6F';
 export const BorderToggletextBorderOn = '#f2f7fd';
 export const BorderToggletextBorderOnHover = '#ccdff7';
 export const BorderToggletextBorderOnPressed = '#b2cff2';
+export const BorderToggletextBorderOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOnAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOffAi = '#bcbcbc';
+export const BorderToggletextBorderOffAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOffAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
@@ -378,6 +390,9 @@ export const BrandDocgenTertiary = '#ece9f8';
 export const BrandSignPrimary = '#003c84';
 export const BrandSignSecondary = '#ccd8e6';
 export const BrandSignTertiary = '#e5ebf2';
+export const BrandBoxAi100 = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BrandBoxAi120 = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
+export const BrandBoxAi140 = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
 export const Gray10 = '#e8e8e8';
 export const Gray20 = '#d3d3d3';
 export const Gray30 = '#bcbcbc';

package/tokens/tokens-css-vars.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Sep 2024 07:45:47 GMT
+ * Generated on Fri, 18 Oct 2024 08:39:49 GMT
  */
 
 :root {
@@ -323,9 +323,10 @@
     --gray-30: #bcbcbc;
     --gray-20: #d3d3d3;
     --gray-10: #e8e8e8;
+    --brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%);
+    --brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%);
+    --brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
     --border-cta-border-outline-disabled: #646464;
-    --border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
-    --border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
     --surface-badge-video-surface: #009aed;
     --surface-badge-keynote-surface: #0a84ff;
     --surface-badge-pages-surface: #ff9500;
@@ -438,6 +439,12 @@
     --icon-icon-on-light-tertiary: var(--gray-50);
     --icon-icon-on-light-secondary: var(--gray-65);
     --icon-icon-on-light: var(--gray-100);
+    --border-toggletext-border-off-ai-pressed: var(--brand-box-ai-100);
+    --border-toggletext-border-off-ai-hover: var(--brand-box-ai-100);
+    --border-toggletext-border-off-ai: var(--gray-30);
+    --border-toggletext-border-on-ai-pressed: var(--brand-box-ai-100);
+    --border-toggletext-border-on-ai-hover: var(--brand-box-ai-100);
+    --border-toggletext-border-on-ai: var(--brand-box-ai-100);
     --border-toggletext-border-on-pressed: var(--box-blue-30);
     --border-toggletext-border-on-hover: var(--box-blue-20);
     --border-toggletext-border-on: var(--box-blue-05);
@@ -450,6 +457,8 @@
     --border-cta-border-secondary-disabled: var(--gray-10);
     --border-toggle-border-on: var(--box-blue-40);
     --border-contentbutton-border-selected: var(--gray-50);
+    --border-cta-border-ai: var(--brand-box-ai-100);
+    --border-card-border-ai: var(--brand-box-ai-100);
     --border-toggle-border: var(--gray-30);
     --border-badge-border: var(--gray-white);
     --border-collapsible-border: var(--gray-20);
@@ -515,6 +524,12 @@
     --border-cta-border-secondary-hover: var(--gray-30);
     --border-cta-border-secondary-pressed: var(--gray-30);
     --border-cta-border-secondary: var(--gray-30);
+    --surface-toggletext-surface-off-ai-pressed: var(--gray-10);
+    --surface-toggletext-surface-off-ai-hover: var(--gray-05);
+    --surface-toggletext-surface-off-ai: var(--gray-white);
+    --surface-toggletext-surface-on-ai-pressed: var(--brand-box-ai-140);
+    --surface-toggletext-surface-on-ai-hover: var(--brand-box-ai-120);
+    --surface-toggletext-surface-on-ai: var(--brand-box-ai-100);
     --surface-toggletext-surface-on-pressed: var(--box-blue-30);
     --surface-toggletext-surface-on-hover: var(--box-blue-20);
     --surface-toggletext-surface-on: var(--box-blue-05);
@@ -611,10 +626,10 @@
     --surface-radio-surface-selected: var(--box-blue-100);
     --surface-radio-surface-hover: var(--gray-white);
     --surface-radio-surface: var(--gray-white);
-    --surface-switch-surface-on-hover: var(--box-blue-100);
+    --surface-switch-surface-on-hover: var(--light-blue-110);
     --surface-switch-surface-on: var(--box-blue-100);
-    --surface-switch-surface-off-hover: var(--gray-50);
-    --surface-switch-surface-off: var(--gray-50);
+    --surface-switch-surface-off-hover: var(--gray-30);
+    --surface-switch-surface-off: var(--gray-20);
     --surface-switch-surface-hover: var(--gray-white);
     --surface-switch-surface: var(--gray-white);
     --surface-item-small-surface-selected: var(--box-blue-05);

package/tokens/tokens.d.ts

@@ -228,6 +228,12 @@ export const SurfaceRadiotileSurfaceSelected: string;
 export const SurfaceToggletextSurfaceOn: string;
 export const SurfaceToggletextSurfaceOnHover: string;
 export const SurfaceToggletextSurfaceOnPressed: string;
+export const SurfaceToggletextSurfaceOnAi: string;
+export const SurfaceToggletextSurfaceOnAiHover: string;
+export const SurfaceToggletextSurfaceOnAiPressed: string;
+export const SurfaceToggletextSurfaceOffAi: string;
+export const SurfaceToggletextSurfaceOffAiHover: string;
+export const SurfaceToggletextSurfaceOffAiPressed: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -308,6 +314,12 @@ export const BorderToggletextBorderOffPressed: string;
 export const BorderToggletextBorderOn: string;
 export const BorderToggletextBorderOnHover: string;
 export const BorderToggletextBorderOnPressed: string;
+export const BorderToggletextBorderOnAi: string;
+export const BorderToggletextBorderOnAiHover: string;
+export const BorderToggletextBorderOnAiPressed: string;
+export const BorderToggletextBorderOffAi: string;
+export const BorderToggletextBorderOffAiHover: string;
+export const BorderToggletextBorderOffAiPressed: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
@@ -373,6 +385,9 @@ export const BrandDocgenTertiary: string;
 export const BrandSignPrimary: string;
 export const BrandSignSecondary: string;
 export const BrandSignTertiary: string;
+export const BrandBoxAi100: string;
+export const BrandBoxAi120: string;
+export const BrandBoxAi140: string;
 export const Gray10: string;
 export const Gray20: string;
 export const Gray30: string;

package/tokens/tokens.js

@@ -122,10 +122,10 @@ export const SurfaceItemSmallSurfaceHover = '#f4f4f4';
 export const SurfaceItemSmallSurfaceSelected = '#f2f7fd';
 export const SurfaceSwitchSurface = '#ffffff';
 export const SurfaceSwitchSurfaceHover = '#ffffff';
-export const SurfaceSwitchSurfaceOff = '#909090';
-export const SurfaceSwitchSurfaceOffHover = '#909090';
+export const SurfaceSwitchSurfaceOff = '#d3d3d3';
+export const SurfaceSwitchSurfaceOffHover = '#bcbcbc';
 export const SurfaceSwitchSurfaceOn = '#0061d5';
-export const SurfaceSwitchSurfaceOnHover = '#0061d5';
+export const SurfaceSwitchSurfaceOnHover = '#2079E3';
 export const SurfaceRadioSurface = '#ffffff';
 export const SurfaceRadioSurfaceHover = '#ffffff';
 export const SurfaceRadioSurfaceSelected = '#0061d5';
@@ -228,6 +228,12 @@ export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
 export const SurfaceToggletextSurfaceOn = '#f2f7fd';
 export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
 export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
+export const SurfaceToggletextSurfaceOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const SurfaceToggletextSurfaceOnAiHover = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
+export const SurfaceToggletextSurfaceOnAiPressed = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
+export const SurfaceToggletextSurfaceOffAi = '#ffffff';
+export const SurfaceToggletextSurfaceOffAiHover = '#f4f4f4';
+export const SurfaceToggletextSurfaceOffAiPressed = '#e8e8e8';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -308,6 +314,12 @@ export const BorderToggletextBorderOffPressed = '#6F6F6F';
 export const BorderToggletextBorderOn = '#f2f7fd';
 export const BorderToggletextBorderOnHover = '#ccdff7';
 export const BorderToggletextBorderOnPressed = '#b2cff2';
+export const BorderToggletextBorderOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOnAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOffAi = '#bcbcbc';
+export const BorderToggletextBorderOffAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderToggletextBorderOffAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
@@ -373,6 +385,9 @@ export const BrandDocgenTertiary = '#ece9f8';
 export const BrandSignPrimary = '#003c84';
 export const BrandSignSecondary = '#ccd8e6';
 export const BrandSignTertiary = '#e5ebf2';
+export const BrandBoxAi100 = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BrandBoxAi120 = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
+export const BrandBoxAi140 = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
 export const Gray10 = '#e8e8e8';
 export const Gray20 = '#d3d3d3';
 export const Gray30 = '#bcbcbc';

package/tokens/tokens.json

@@ -123,10 +123,10 @@
     "SurfaceItemSmallSurfaceSelected": "#f2f7fd",
     "SurfaceSwitchSurface": "#ffffff",
     "SurfaceSwitchSurfaceHover": "#ffffff",
-    "SurfaceSwitchSurfaceOff": "#909090",
-    "SurfaceSwitchSurfaceOffHover": "#909090",
+    "SurfaceSwitchSurfaceOff": "#d3d3d3",
+    "SurfaceSwitchSurfaceOffHover": "#bcbcbc",
     "SurfaceSwitchSurfaceOn": "#0061d5",
-    "SurfaceSwitchSurfaceOnHover": "#0061d5",
+    "SurfaceSwitchSurfaceOnHover": "#2079E3",
     "SurfaceRadioSurface": "#ffffff",
     "SurfaceRadioSurfaceHover": "#ffffff",
     "SurfaceRadioSurfaceSelected": "#0061d5",
@@ -229,6 +229,12 @@
     "SurfaceToggletextSurfaceOn": "#f2f7fd",
     "SurfaceToggletextSurfaceOnHover": "#ccdff7",
     "SurfaceToggletextSurfaceOnPressed": "#b2cff2",
+    "SurfaceToggletextSurfaceOnAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "SurfaceToggletextSurfaceOnAiHover": "linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)",
+    "SurfaceToggletextSurfaceOnAiPressed": "linear-gradient(135deg, #980284 0%, #174F96 100%)",
+    "SurfaceToggletextSurfaceOffAi": "#ffffff",
+    "SurfaceToggletextSurfaceOffAiHover": "#f4f4f4",
+    "SurfaceToggletextSurfaceOffAiPressed": "#e8e8e8",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -309,6 +315,12 @@
     "BorderToggletextBorderOn": "#f2f7fd",
     "BorderToggletextBorderOnHover": "#ccdff7",
     "BorderToggletextBorderOnPressed": "#b2cff2",
+    "BorderToggletextBorderOnAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderToggletextBorderOnAiHover": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderToggletextBorderOnAiPressed": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderToggletextBorderOffAi": "#bcbcbc",
+    "BorderToggletextBorderOffAiHover": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderToggletextBorderOffAiPressed": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
     "IconIconOnLight": "#222222",
     "IconIconOnLightSecondary": "#6F6F6F",
     "IconIconOnLightTertiary": "#909090",
@@ -374,6 +386,9 @@
     "BrandSignPrimary": "#003c84",
     "BrandSignSecondary": "#ccd8e6",
     "BrandSignTertiary": "#e5ebf2",
+    "BrandBoxAi100": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BrandBoxAi120": "linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)",
+    "BrandBoxAi140": "linear-gradient(135deg, #980284 0%, #174F96 100%)",
     "Gray10": "#e8e8e8",
     "Gray20": "#d3d3d3",
     "Gray30": "#bcbcbc",

package/tokens/tokens.scss

@@ -122,10 +122,10 @@ $surface-item-small-surface-hover: #f4f4f4 !default;
 $surface-item-small-surface-selected: #f2f7fd !default;
 $surface-switch-surface: #ffffff !default;
 $surface-switch-surface-hover: #ffffff !default;
-$surface-switch-surface-off: #909090 !default;
-$surface-switch-surface-off-hover: #909090 !default;
+$surface-switch-surface-off: #d3d3d3 !default;
+$surface-switch-surface-off-hover: #bcbcbc !default;
 $surface-switch-surface-on: #0061d5 !default;
-$surface-switch-surface-on-hover: #0061d5 !default;
+$surface-switch-surface-on-hover: #2079e3 !default;
 $surface-radio-surface: #ffffff !default;
 $surface-radio-surface-hover: #ffffff !default;
 $surface-radio-surface-selected: #0061d5 !default;
@@ -228,6 +228,12 @@ $surface-radiotile-surface-selected: #f2f7fd !default;
 $surface-toggletext-surface-on: #f2f7fd !default;
 $surface-toggletext-surface-on-hover: #ccdff7 !default;
 $surface-toggletext-surface-on-pressed: #b2cff2 !default;
+$surface-toggletext-surface-on-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$surface-toggletext-surface-on-ai-hover: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%) !default;
+$surface-toggletext-surface-on-ai-pressed: linear-gradient(135deg, #980284 0%, #174f96 100%) !default;
+$surface-toggletext-surface-off-ai: #ffffff !default;
+$surface-toggletext-surface-off-ai-hover: #f4f4f4 !default;
+$surface-toggletext-surface-off-ai-pressed: #e8e8e8 !default;
 $border-cta-border-secondary: #bcbcbc !default;
 $border-cta-border-secondary-pressed: #bcbcbc !default;
 $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -308,6 +314,12 @@ $border-toggletext-border-off-pressed: #6f6f6f !default;
 $border-toggletext-border-on: #f2f7fd !default;
 $border-toggletext-border-on-hover: #ccdff7 !default;
 $border-toggletext-border-on-pressed: #b2cff2 !default;
+$border-toggletext-border-on-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-toggletext-border-on-ai-hover: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-toggletext-border-on-ai-pressed: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-toggletext-border-off-ai: #bcbcbc !default;
+$border-toggletext-border-off-ai-hover: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-toggletext-border-off-ai-pressed: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
 $icon-icon-on-light: #222222 !default;
 $icon-icon-on-light-secondary: #6f6f6f !default;
 $icon-icon-on-light-tertiary: #909090 !default;
@@ -373,6 +385,9 @@ $brand-docgen-tertiary: #ece9f8 !default;
 $brand-sign-primary: #003c84 !default;
 $brand-sign-secondary: #ccd8e6 !default;
 $brand-sign-tertiary: #e5ebf2 !default;
+$brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%) !default;
+$brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%) !default;
 $gray-10: #e8e8e8 !default;
 $gray-20: #d3d3d3 !default;
 $gray-30: #bcbcbc !default;
@@ -980,6 +995,12 @@ $tokens: (
         'toggletext-surface-on': $surface-toggletext-surface-on,
         'toggletext-surface-on-hover': $surface-toggletext-surface-on-hover,
         'toggletext-surface-on-pressed': $surface-toggletext-surface-on-pressed,
+        'toggletext-surface-on-ai': $surface-toggletext-surface-on-ai,
+        'toggletext-surface-on-ai-hover': $surface-toggletext-surface-on-ai-hover,
+        'toggletext-surface-on-ai-pressed': $surface-toggletext-surface-on-ai-pressed,
+        'toggletext-surface-off-ai': $surface-toggletext-surface-off-ai,
+        'toggletext-surface-off-ai-hover': $surface-toggletext-surface-off-ai-hover,
+        'toggletext-surface-off-ai-pressed': $surface-toggletext-surface-off-ai-pressed,
     ),
     'Border': (
         'cta-border-secondary': $border-cta-border-secondary,
@@ -1062,6 +1083,12 @@ $tokens: (
         'toggletext-border-on': $border-toggletext-border-on,
         'toggletext-border-on-hover': $border-toggletext-border-on-hover,
         'toggletext-border-on-pressed': $border-toggletext-border-on-pressed,
+        'toggletext-border-on-ai': $border-toggletext-border-on-ai,
+        'toggletext-border-on-ai-hover': $border-toggletext-border-on-ai-hover,
+        'toggletext-border-on-ai-pressed': $border-toggletext-border-on-ai-pressed,
+        'toggletext-border-off-ai': $border-toggletext-border-off-ai,
+        'toggletext-border-off-ai-hover': $border-toggletext-border-off-ai-hover,
+        'toggletext-border-off-ai-pressed': $border-toggletext-border-off-ai-pressed,
     ),
     'Icon': (
         'icon-on-light': $icon-icon-on-light,
@@ -1137,6 +1164,11 @@ $tokens: (
         'sign-primary': $brand-sign-primary,
         'sign-secondary': $brand-sign-secondary,
         'sign-tertiary': $brand-sign-tertiary,
+        'BoxAI': (
+            '100': $brand-box-ai-100,
+            '120': $brand-box-ai-120,
+            '140': $brand-box-ai-140,
+        ),
     ),
     'Gray': (
         '10': $gray-10,