@box/blueprint-web-assets 4.27.0 → 4.29.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/Fill/LegalHold.d.ts

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

package/icons/Fill/LegalHold.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgLegalHold = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: [_jsx("path", { fill: props.color || '#909090', d: "M13.589 2.992a.5.5 0 1 0-.18-.984L8.5 2.901V2.5a.5.5 0 0 0-1 0v.583l-5.09.925a.5.5 0 1 0 .179.984l.123-.022L1.156 9h1.072L3.5 5.707 4.77 9h1.072L4.183 4.702 7.5 4.1V13h-2a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-2V3.917l3.185-.579L10.165 7h1.083L12.5 3.986 13.75 7h1.083l-1.634-3.937.39-.071Z" }), _jsx("path", { fill: props.color || '#909090', d: "M1.489 11.21A2.052 2.052 0 0 1 .991 9.5h5.016a2.053 2.053 0 0 1-.497 1.71c-.45.5-1.148.79-2.01.79-.863 0-1.56-.29-2.011-.79Zm9.001-2a2.053 2.053 0 0 1-.497-1.71h5.015a2.053 2.053 0 0 1-.498 1.71c-.45.5-1.148.79-2.01.79-.863 0-1.56-.29-2.01-.79Z" })] }));
+export default SvgLegalHold;

package/icons/Fill/index.d.ts

@@ -133,6 +133,7 @@ export { default as InfoBadge } from './InfoBadge';
 export { default as InfoDoc } from './InfoDoc';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeList } from './LargeList';
+export { default as LegalHold } from './LegalHold';
 export { default as Letters } from './Letters';
 export { default as Link } from './Link';
 export { default as LinkBroken } from './LinkBroken';

package/icons/Fill/index.js

@@ -133,6 +133,7 @@ export { default as InfoBadge } from './InfoBadge';
 export { default as InfoDoc } from './InfoDoc';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeList } from './LargeList';
+export { default as LegalHold } from './LegalHold';
 export { default as Letters } from './Letters';
 export { default as Link } from './Link';
 export { default as LinkBroken } from './LinkBroken';

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/Line/LegalHold.d.ts

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

package/icons/Line/LegalHold.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgLegalHold = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsx("path", { fill: "#222", fillRule: "evenodd", d: "M8.5 2.502a.5.5 0 1 0-1 0v.583l-5.09.925a.5.5 0 1 0 .18.984l.123-.022-1.668 4.32a.501.501 0 0 0-.036.11 2.06 2.06 0 0 0 .48 1.81c.45.5 1.148.79 2.01.79.863 0 1.56-.29 2.01-.79.443-.491.606-1.14.487-1.774a.502.502 0 0 0-.03-.116L4.185 4.704 7.5 4.101v8.901h-2a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1h-2V3.92l3.186-.579-1.648 3.97a.5.5 0 0 0-.034.13 2.058 2.058 0 0 0 .486 1.772c.45.5 1.147.79 2.01.79.862 0 1.56-.29 2.01-.79a2.059 2.059 0 0 0 .483-1.793.5.5 0 0 0-.031-.109L13.2 3.065l.39-.07a.5.5 0 1 0-.18-.985l-4.91.893v-.4Zm5.251 4.5-1.25-3.014-1.252 3.014h2.502Zm-8.98 2L3.501 5.71 2.228 9.002H4.77Zm6.462-.46a1.028 1.028 0 0 1-.255-.54h3.044c-.03.202-.117.387-.255.54-.225.25-.63.46-1.267.46-.638 0-1.042-.21-1.267-.46Zm-9.256 1.46c.03.202.117.387.255.54.225.25.63.46 1.268.46.637 0 1.042-.21 1.267-.46.138-.153.225-.338.255-.54H1.977Z", clipRule: "evenodd" }) }));
+export default SvgLegalHold;

package/icons/Line/index.d.ts

@@ -85,6 +85,7 @@ export { default as InfoDoc } from './InfoDoc';
 export { default as Key } from './Key';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeList } from './LargeList';
+export { default as LegalHold } from './LegalHold';
 export { default as Link } from './Link';
 export { default as LinkBadge } from './LinkBadge';
 export { default as List } from './List';

package/icons/Line/index.js

@@ -85,6 +85,7 @@ export { default as InfoDoc } from './InfoDoc';
 export { default as Key } from './Key';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeList } from './LargeList';
+export { default as LegalHold } from './LegalHold';
 export { default as Link } from './Link';
 export { default as LinkBadge } from './LinkBadge';
 export { default as List } from './List';

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/AppBuilder.d.ts

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

package/illustrations/Medium/AppBuilder.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgAppBuilder = (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: "M33 37a2 2 0 0 1 2-2h20a2 2 0 1 1 0 4H35a2 2 0 0 1-2-2ZM36 50.5a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8ZM52.5 50.5a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8ZM69.5 50.5a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8ZM36 54.5a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2h-1ZM52.5 54.5a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2h-1ZM69.5 54.5a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2h-1ZM94 43a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v58a2 2 0 0 1-2 2H96a2 2 0 0 1-2-2V43ZM110 127c0 1.657-17.909 3-40 3s-40-1.343-40-3 17.909-3 40-3 40 1.343 40 3ZM94 37a2 2 0 0 1 2-2h19a2 2 0 1 1 0 4H96a2 2 0 0 1-2-2ZM34 42a1 1 0 1 0 0 2h46a1 1 0 1 0 0-2H34ZM33 64.5a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2V72H57a2 2 0 0 0-2 2v10h26v14.5a2 2 0 0 1-2 2H35a2 2 0 0 1-2-2v-34Z" }), _jsx("path", { d: "M82.389 78.079a1 1 0 0 0-1.3 1.331l4.5 10a1 1 0 0 0 1.906-.31l.11-1.106a1 1 0 0 1-1.017-.584l-4.2-9.331ZM88.722 84.833l3.378-.338a1 1 0 0 0 .31-1.907l-.043-.02-3.453.346-.192 1.919Z" })] }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M124.014 20c.278 0 .504.217.504.494v.644c.156.088.286.217.376.373h.64c.243 0 .445.184.486.415l.008.088a.496.496 0 0 1-.494.504h-.64a1.02 1.02 0 0 1-.376.373v.643a.502.502 0 0 1-.415.486l-.089.008a.508.508 0 0 1-.503-.508l-.001-.638a1.008 1.008 0 0 1-.361-.364h-.655a.503.503 0 0 1-.486-.415l-.008-.089c0-.278.217-.503.494-.503h.655c.087-.15.212-.276.36-.365l.002-.65c0-.244.184-.446.415-.488l.088-.008ZM15.259 26a.31.31 0 0 1 .315.309v.423c.082.053.15.126.2.212h.435c.146 0 .269.107.3.244l.009.07a.31.31 0 0 1-.309.316h-.435a.634.634 0 0 1-.2.212v.423a.313.313 0 0 1-.245.3l-.07.009a.319.319 0 0 1-.315-.318v-.38a.63.63 0 0 1-.26-.246h-.374a.313.313 0 0 1-.3-.245L14 27.26a.31.31 0 0 1 .309-.315h.376c.06-.105.15-.19.259-.246v-.389c0-.147.107-.27.244-.302l.071-.008ZM128.014 95c.278 0 .504.217.504.494v.644c.156.088.286.217.376.373h.64c.243 0 .445.184.486.415l.008.088a.496.496 0 0 1-.494.504h-.64a1.02 1.02 0 0 1-.376.373v.643a.502.502 0 0 1-.415.486l-.089.008a.508.508 0 0 1-.503-.508l-.001-.638a1.008 1.008 0 0 1-.361-.364h-.655a.503.503 0 0 1-.486-.415l-.008-.089c0-.278.217-.503.494-.503h.655c.087-.15.212-.276.36-.365l.002-.65c0-.244.184-.446.415-.488l.088-.008ZM108.259 22a.31.31 0 0 1 .315.309v.423c.082.053.15.126.2.212h.435c.146 0 .269.107.3.244l.009.07a.31.31 0 0 1-.309.316h-.435a.634.634 0 0 1-.2.212v.423a.313.313 0 0 1-.245.3l-.07.009a.319.319 0 0 1-.315-.318v-.38a.63.63 0 0 1-.26-.246h-.375a.313.313 0 0 1-.3-.245L107 23.26a.31.31 0 0 1 .309-.315h.376c.06-.105.15-.19.259-.246v-.389c0-.147.107-.27.244-.302l.071-.008ZM12.259 93a.31.31 0 0 1 .315.309v.423c.082.053.15.126.2.212h.435c.146 0 .269.107.3.244l.009.07a.31.31 0 0 1-.309.316h-.435a.634.634 0 0 1-.2.212v.423a.313.313 0 0 1-.245.3l-.07.009a.319.319 0 0 1-.315-.318v-.38a.63.63 0 0 1-.26-.246h-.374a.313.313 0 0 1-.3-.245L11 94.26a.31.31 0 0 1 .309-.315h.376c.06-.105.15-.19.259-.246v-.388c0-.147.107-.27.244-.302l.07-.008.001-.001ZM11.014 105c.278 0 .504.217.504.494v.644c.156.088.286.217.376.373h.64c.243 0 .445.184.486.415l.008.088a.496.496 0 0 1-.494.504h-.64a1.02 1.02 0 0 1-.376.373v.643a.502.502 0 0 1-.415.486l-.089.008a.508.508 0 0 1-.503-.508l-.001-.638a1.008 1.008 0 0 1-.361-.364h-.655a.503.503 0 0 1-.486-.415L9 107.014c0-.278.217-.503.494-.503h.655c.087-.15.212-.276.36-.365l.002-.65c0-.244.184-.446.415-.488l.088-.008Z" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M19 36a5 5 0 0 1 5-5h92a5 5 0 0 1 5 5v66a5 5 0 0 1-5 5H24a5 5 0 0 1-5-5V36Zm5-3a3 3 0 0 0-3 3v66a3 3 0 0 0 3 3h92a3 3 0 0 0 3-3V36a3 3 0 0 0-3-3H24Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M11.014 38c.278 0 .504.217.504.494v.644c.156.088.286.217.376.373h.64c.243 0 .445.184.486.415l.008.088a.496.496 0 0 1-.494.504h-.64a1.02 1.02 0 0 1-.376.373v.643a.502.502 0 0 1-.415.486l-.089.008a.508.508 0 0 1-.503-.508l-.001-.638a1.008 1.008 0 0 1-.361-.364h-.655a.503.503 0 0 1-.486-.415L9 40.014c0-.278.217-.503.494-.503h.655c.087-.15.212-.276.36-.365l.002-.65c0-.244.184-.446.415-.488l.088-.008ZM26.014 112c.278 0 .504.217.504.494v.669c.138.087.253.206.335.348h.681c.243 0 .445.184.486.415l.008.088a.496.496 0 0 1-.494.504h-.681c-.082.14-.197.26-.335.348v.668a.502.502 0 0 1-.415.486l-.089.008a.508.508 0 0 1-.503-.508l-.001-.615a1.005 1.005 0 0 1-.402-.387h-.614a.503.503 0 0 1-.486-.415l-.008-.089c0-.278.217-.503.494-.503h.614c.094-.164.234-.299.402-.388v-.628c0-.243.185-.445.416-.487l.088-.008ZM129.542 42c.475 0 .88.389.88.885v1.133c.265.159.476.389.653.655h1.11c.493 0 .88.389.88.885a.885.885 0 0 1-.881.885h-1.127a2.111 2.111 0 0 1-.652.655v1.115a.886.886 0 0 1-.882.885.885.885 0 0 1-.88-.885V47.08a2.09 2.09 0 0 1-.652-.655h-1.11a.874.874 0 0 1-.881-.885c0-.478.388-.885.881-.885h1.128c.158-.265.387-.478.651-.655v-1.115c0-.495.388-.885.882-.885Z" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M32.5 50.5A2.5 2.5 0 0 1 35 48h10a2.5 2.5 0 0 1 2.5 2.5v6A2.5 2.5 0 0 1 45 59H35a2.5 2.5 0 0 1-2.5-2.5v-6ZM35 49a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 35 58h10a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 45 49H35ZM49 50.5a2.5 2.5 0 0 1 2.5-2.5h10a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5h-10a2.5 2.5 0 0 1-2.5-2.5v-6Zm2.5-1.5a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-6a1.5 1.5 0 0 0-1.5-1.5h-10ZM66 50.5a2.5 2.5 0 0 1 2.5-2.5h10a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5h-10a2.5 2.5 0 0 1-2.5-2.5v-6Zm2.5-1.5a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-6a1.5 1.5 0 0 0-1.5-1.5h-10Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M35 62c-.338 0-.662.067-.957.19a.5.5 0 1 0 .383.924c.176-.073.37-.114.574-.114h1.571a.5.5 0 1 0 0-1H35ZM39.714 62a.5.5 0 1 0 0 1h3.143a.5.5 0 1 0 0-1h-3.143ZM46 62a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1H46ZM52.286 62a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1h-3.143ZM58.571 62a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1h-3.143ZM64.857 62a.5.5 0 0 0 0 1H68a.5.5 0 0 0 0-1h-3.143ZM71.143 62a.5.5 0 1 0 0 1h3.143a.5.5 0 1 0 0-1h-3.143ZM77.429 62a.5.5 0 1 0 0 1H79c.204 0 .398.04.574.114a.5.5 0 1 0 .383-.924A2.494 2.494 0 0 0 79 62h-1.571ZM33.614 63.926a.5.5 0 1 0-.924-.383c-.123.295-.19.619-.19.957v1.417a.5.5 0 0 0 1 0V64.5c0-.204.04-.398.114-.574ZM81.31 63.543a.5.5 0 1 0-.924.383c.073.176.114.37.114.574v1.417a.5.5 0 0 0 1 0V64.5c0-.338-.067-.662-.19-.957ZM81.5 68.75a.5.5 0 0 0-1 0V71h1v-2.25ZM33.5 68.75a.5.5 0 0 0-1 0v2.833a.5.5 0 1 0 1 0V68.75ZM33.5 74.417a.5.5 0 1 0-1 0v2.833a.5.5 0 0 0 1 0v-2.833ZM33.5 80.083a.5.5 0 0 0-1 0v2.834a.5.5 0 0 0 1 0v-2.834ZM33.5 85.75a.5.5 0 0 0-1 0v2.833a.5.5 0 1 0 1 0V85.75ZM81.5 85.75a.5.5 0 0 0-1 0v2.833a.5.5 0 1 0 1 0V85.75ZM81.5 91.417a.5.5 0 1 0-1 0v2.833a.5.5 0 0 0 1 0v-2.833ZM33.5 91.417a.5.5 0 1 0-1 0v2.833a.5.5 0 0 0 1 0v-2.833ZM81.5 97.083a.5.5 0 0 0-1 0V98.5c0 .204-.04.398-.114.574a.5.5 0 1 0 .924.383c.123-.295.19-.619.19-.957v-1.417ZM33.5 97.083a.5.5 0 0 0-1 0V98.5c0 .338.067.662.19.957a.5.5 0 0 0 .924-.383 1.495 1.495 0 0 1-.114-.574v-1.417ZM34.426 99.886a.5.5 0 1 0-.383.924c.295.123.619.19.957.19h1.571a.5.5 0 0 0 0-1H35c-.204 0-.398-.04-.574-.114ZM79.957 100.81a.5.5 0 1 0-.383-.924c-.176.073-.37.114-.574.114h-1.571a.5.5 0 0 0 0 1H79c.338 0 .662-.067.957-.19ZM39.714 100a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1h-3.143ZM46 100a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1H46ZM52.286 100a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1h-3.143ZM58.571 100a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1h-3.143ZM64.857 100a.5.5 0 0 0 0 1H68a.5.5 0 0 0 0-1h-3.143ZM71.143 100a.5.5 0 0 0 0 1h3.143a.5.5 0 0 0 0-1h-3.143ZM57 71h26a3 3 0 0 1 3 3v3.253l-1-.45V74a2 2 0 0 0-2-2H57a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h26c.05 0 .101-.002.15-.006l.428.95c-.187.037-.38.056-.578.056H57a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3Z" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M93.41 80.588a1 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 1.322-1.322l10 4.5Z" })] }));
+export default SvgAppBuilder;

package/illustrations/Medium/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Activity } from './Activity';
 export { default as AllNewBox } from './AllNewBox';
+export { default as AppBuilder } from './AppBuilder';
 export { default as AppSupport } from './AppSupport';
 export { default as Bell } from './Bell';
 export { default as BoxDrive } from './BoxDrive';

package/illustrations/Medium/index.js

@@ -1,5 +1,6 @@
 export { default as Activity } from './Activity';
 export { default as AllNewBox } from './AllNewBox';
+export { default as AppBuilder } from './AppBuilder';
 export { default as AppSupport } from './AppSupport';
 export { default as Bell } from './Bell';
 export { default as BoxDrive } from './BoxDrive';

package/illustrations/Small/LegalPolicy.d.ts

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

package/illustrations/Small/LegalPolicy.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgLegalPolicy = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 56 56", role: "img", ...props, children: [_jsxs("g", { fill: "var(--surface-illustration-surface-box-neutral)", opacity: 0.1, children: [_jsx("path", { fillRule: "evenodd", d: "M17 44c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4ZM45 5a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z", clipRule: "evenodd" }), _jsx("path", { d: "M14.93 9H8a1 1 0 0 0-.993.883L7 10v29a1.886 1.886 0 0 0 .034.367c.015.084.036.167.062.247l.045.125.056.128.08.15.063.099.097.131.134.152.168.153.09.07.13.086.111.063.184.085.216.073.159.037.104.016.116.012L9 41a2.001 2.001 0 0 0 1.995-1.85L11 39V21c0-2.718 2.35-4.889 5.247-4.996L16.47 16H44v-1a3 3 0 0 0-2.824-2.995L41 12H19.07a3.003 3.003 0 0 1-2.38-1.173l-.116-.163-.812-1.219a1.004 1.004 0 0 0-.708-.437L14.93 9ZM28 36h-8c0 1.167.5 4 4 4 3.225 0 4-2.5 4-4ZM44.979 33 37 33.58c.084 1.163.788 3.953 4.28 3.7 3.216-.234 3.808-2.784 3.699-4.28Z" })] }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", fillRule: "evenodd", d: "M33.5 23a1 1 0 1 0-2 0v1.018l-9.75 1.712a1 1 0 1 0 .346 1.97l.156-.028-3.18 7.957a1 1 0 0 0-.06.217c-.244 1.286.1 2.593.992 3.576.904.995 2.293 1.578 3.997 1.578 1.704 0 3.092-.583 3.996-1.578.893-.983 1.236-2.292.991-3.58a.996.996 0 0 0-.07-.238l-3.652-8.461 6.234-1.095V43H28a1 1 0 1 0 0 2h9a1 1 0 1 0 0-2h-3.5V25.697l6.005-1.054-3.423 7.962a1 1 0 0 0-.07.245c-.243 1.284.1 2.59.99 3.572C37.907 37.417 39.294 38 41 38c3.633 0 5.495-3.13 4.982-5.696a.996.996 0 0 0-.07-.216l-3.35-7.982.69-.12a1 1 0 0 0-.347-1.97l-9.404 1.65V23Zm10.034 8.59-2.39-5.695-2.582 6.006 4.972-.311ZM26.479 35l-2.597-6.018L21.477 35h5.002Zm12.005.078a2.09 2.09 0 0 1-.53-1.136l6.084-.38C43.857 34.784 42.827 36 40.999 36c-1.247 0-2.057-.417-2.515-.922ZM20.963 37c.065.4.242.77.522 1.078.459.505 1.27.922 2.516.922 1.245 0 2.056-.417 2.515-.922.28-.308.457-.678.522-1.078h-6.075Z", clipRule: "evenodd" }), _jsx("path", { fill: "var(--surface-illustration-surface-box-neutral)", d: "M14.93 7c.936 0 1.814.437 2.38 1.173l.116.163.812 1.219c.163.243.422.401.708.437l.124.008H41a4.999 4.999 0 0 1 4.995 4.783L46 16h-.47c2.923 0 5.346 2.103 5.465 4.792L51 21v17.764c0 1.75-.988 3.348-2.553 4.13a1 1 0 1 1-.894-1.788 2.618 2.618 0 0 0 1.44-2.157l.007-.185V21c0-1.574-1.427-2.905-3.271-2.995l-.2-.005H16.471c-1.874 0-3.365 1.277-3.466 2.832L13 21v18c0 .729-.195 1.413-.536 2.001L16 40.929a1 1 0 0 1 .117 1.993l-.117.007L9 43a4 4 0 0 1-3.995-3.8L5 39V10a3 3 0 0 1 2.824-2.995L8 7h6.93Zm0 2H8a1 1 0 0 0-.993.883L7 10v29a1.886 1.886 0 0 0 .034.367c.015.084.036.167.062.247l.045.125.056.128.08.15.063.099.097.131.134.152.168.153.09.07.13.086.111.063.184.085.216.073.159.037.104.016.116.012L9 41a2.001 2.001 0 0 0 1.995-1.85L11 39V21c0-2.718 2.35-4.889 5.247-4.996L16.47 16H44v-1a3 3 0 0 0-2.824-2.995L41 12H19.07a3.003 3.003 0 0 1-2.38-1.173l-.116-.163-.812-1.219a1.004 1.004 0 0 0-.708-.437L14.93 9Zm-1.43 1a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1h4Z" })] }));
+export default SvgLegalPolicy;

package/illustrations/Small/index.d.ts

@@ -50,6 +50,7 @@ export { default as JobMigrateData } from './JobMigrateData';
 export { default as Keynote } from './Keynote';
 export { default as LegalContract } from './LegalContract';
 export { default as LegalFolder } from './LegalFolder';
+export { default as LegalPolicy } from './LegalPolicy';
 export { default as LimitedApp } from './LimitedApp';
 export { default as LineChart } from './LineChart';
 export { default as LocationSecurity } from './LocationSecurity';

package/illustrations/Small/index.js

@@ -50,6 +50,7 @@ export { default as JobMigrateData } from './JobMigrateData';
 export { default as Keynote } from './Keynote';
 export { default as LegalContract } from './LegalContract';
 export { default as LegalFolder } from './LegalFolder';
+export { default as LegalPolicy } from './LegalPolicy';
 export { default as LimitedApp } from './LimitedApp';
 export { default as LineChart } from './LineChart';
 export { default as LocationSecurity } from './LocationSecurity';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.27.0",
+    "version": "4.29.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": "8f6549b0a207fd05f099b465c43e533f17031184"
+    "gitHead": "49a00d2aae3ace4f44354245f55976050b714d76"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 02 Oct 2024 08:55:42 GMT
+ * Generated on Fri, 08 Nov 2024 16:30:00 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 Wed, 02 Oct 2024 08:55:42 GMT
+ * Generated on Fri, 08 Nov 2024 16:30:00 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -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 Wed, 02 Oct 2024 08:55:42 GMT
+ * Generated on Fri, 08 Nov 2024 16:30:00 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);

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

@@ -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

@@ -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

@@ -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,