@box/blueprint-web-assets 4.69.7 → 4.70.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
const SvgBoxAiLogoAnimated = (props, ref) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 400 400", role: "img", ref: ref, ...props, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "BoxAILogoAnimated_svg__magentaGradient", x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", style: {
|
|
4
|
+
stopColor: '#ff80ff',
|
|
5
|
+
stopOpacity: 1,
|
|
6
|
+
} }), _jsx("stop", { offset: "50%", style: {
|
|
7
|
+
stopColor: '#f0f',
|
|
8
|
+
stopOpacity: 1,
|
|
9
|
+
} }), _jsx("stop", { offset: "100%", style: {
|
|
10
|
+
stopColor: '#c0c',
|
|
11
|
+
stopOpacity: 1,
|
|
12
|
+
} })] }), _jsxs("linearGradient", { id: "BoxAILogoAnimated_svg__purpleGradient", x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", style: {
|
|
13
|
+
stopColor: '#b6e',
|
|
14
|
+
stopOpacity: 1,
|
|
15
|
+
} }), _jsx("stop", { offset: "50%", style: {
|
|
16
|
+
stopColor: '#93c',
|
|
17
|
+
stopOpacity: 1,
|
|
18
|
+
} }), _jsx("stop", { offset: "100%", style: {
|
|
19
|
+
stopColor: '#72a',
|
|
20
|
+
stopOpacity: 1,
|
|
21
|
+
} })] }), _jsxs("linearGradient", { id: "BoxAILogoAnimated_svg__blueGradient", x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", style: {
|
|
22
|
+
stopColor: '#7bf',
|
|
23
|
+
stopOpacity: 1,
|
|
24
|
+
} }), _jsx("stop", { offset: "50%", style: {
|
|
25
|
+
stopColor: '#39f',
|
|
26
|
+
stopOpacity: 1,
|
|
27
|
+
} }), _jsx("stop", { offset: "100%", style: {
|
|
28
|
+
stopColor: '#07d',
|
|
29
|
+
stopOpacity: 1,
|
|
30
|
+
} })] }), _jsx("clipPath", { id: "BoxAILogoAnimated_svg__clip1", children: _jsx("path", { d: "M0 200h400v200H0z" }) }), _jsx("clipPath", { id: "BoxAILogoAnimated_svg__clip2", children: _jsx("path", { d: "M0 0h400v200H0z" }) }), _jsxs("filter", { id: "BoxAILogoAnimated_svg__whiteBorder", width: "140%", height: "140%", x: "-20%", y: "-20%", children: [_jsx("feMorphology", { in: "SourceAlpha", operator: "dilate", radius: 5, result: "expanded" }), _jsx("feFlood", { floodColor: "white", floodOpacity: 1, result: "whiteColor" }), _jsx("feComposite", { in: "whiteColor", in2: "expanded", operator: "in", result: "whiteBorder" }), _jsx("feComposite", { in: "SourceGraphic", in2: "whiteBorder", operator: "over" })] })] }), _jsx("style", { children: '@keyframes magenta-draw{0%,3%{stroke-dasharray:0 780;stroke-dashoffset:390}45%,60%{stroke-dasharray:780 0;stroke-dashoffset:390}87%,to{stroke-dasharray:0 780;stroke-dashoffset:-390}}@keyframes purple-draw{0%,13%{stroke-dasharray:0 780;stroke-dashoffset:390}55%,70%{stroke-dasharray:780 0;stroke-dashoffset:390}87%,to{stroke-dasharray:0 780;stroke-dashoffset:-390}}@keyframes blue-draw{0%,23%{stroke-dasharray:0 780;stroke-dashoffset:390}65%,80%{stroke-dasharray:780 0;stroke-dashoffset:390}87%,to{stroke-dasharray:0 780;stroke-dashoffset:-390}}@keyframes magenta-fade{0%,2%,87%,to{opacity:0}15%,80%{opacity:1}}@keyframes purple-fade{0%,12%,87%,to{opacity:0}25%,80%{opacity:1}}@keyframes blue-fade{0%,22%,87%,to{opacity:0}35%,80%{opacity:1}}.BoxAILogoAnimated_svg__ring,.BoxAILogoAnimated_svg__ring-two{fill:none;stroke-width:28;stroke-linecap:round;filter:url(#BoxAILogoAnimated_svg__whiteBorder)}.BoxAILogoAnimated_svg__ring{animation-duration:3s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;opacity:0}.BoxAILogoAnimated_svg__ring-two{opacity:1}.BoxAILogoAnimated_svg__blue-ring{animation-name:blue-draw,blue-fade}.BoxAILogoAnimated_svg__blue-ring,.BoxAILogoAnimated_svg__blue-ring-two{stroke:url(#BoxAILogoAnimated_svg__blueGradient)}.BoxAILogoAnimated_svg__purple-ring{animation-name:purple-draw,purple-fade}.BoxAILogoAnimated_svg__purple-ring,.BoxAILogoAnimated_svg__purple-ring-two{stroke:url(#BoxAILogoAnimated_svg__purpleGradient)}.BoxAILogoAnimated_svg__magenta-ring{animation-name:magenta-draw,magenta-fade}.BoxAILogoAnimated_svg__magenta-ring,.BoxAILogoAnimated_svg__magenta-ring-two{stroke:url(#BoxAILogoAnimated_svg__magentaGradient)}' }), _jsxs("g", { style: {
|
|
31
|
+
opacity: 0.2,
|
|
32
|
+
}, children: [_jsxs("g", { clipPath: "url(#BoxAILogoAnimated_svg__clip1)", children: [_jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring-two BoxAILogoAnimated_svg__blue-ring-two", rx: 80, ry: 160, transform: "rotate(-60 200 200)" }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring-two BoxAILogoAnimated_svg__purple-ring-two", rx: 80, ry: 160, transform: "rotate(60 200 200)" }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring-two BoxAILogoAnimated_svg__magenta-ring-two", rx: 80, ry: 160 })] }), _jsxs("g", { clipPath: "url(#BoxAILogoAnimated_svg__clip2)", children: [_jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring-two BoxAILogoAnimated_svg__magenta-ring-two", rx: 80, ry: 160 }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring-two BoxAILogoAnimated_svg__blue-ring-two", rx: 80, ry: 160, transform: "rotate(-60 200 200)" }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring-two BoxAILogoAnimated_svg__purple-ring-two", rx: 80, ry: 160, transform: "rotate(60 200 200)" })] })] }), _jsxs("g", { clipPath: "url(#BoxAILogoAnimated_svg__clip1)", children: [_jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring BoxAILogoAnimated_svg__blue-ring", rx: 80, ry: 160, transform: "rotate(-60 200 200)" }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring BoxAILogoAnimated_svg__purple-ring", rx: 80, ry: 160, transform: "rotate(60 200 200)" }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring BoxAILogoAnimated_svg__magenta-ring", rx: 80, ry: 160 })] }), _jsxs("g", { clipPath: "url(#BoxAILogoAnimated_svg__clip2)", children: [_jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring BoxAILogoAnimated_svg__magenta-ring", rx: 80, ry: 160 }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring BoxAILogoAnimated_svg__blue-ring", rx: 80, ry: 160, transform: "rotate(-60 200 200)" }), _jsx("ellipse", { cx: 200, cy: 200, className: "BoxAILogoAnimated_svg__ring BoxAILogoAnimated_svg__purple-ring", rx: 80, ry: 160, transform: "rotate(60 200 200)" })] })] }));
|
|
33
|
+
const ForwardRef = forwardRef(SvgBoxAiLogoAnimated);
|
|
34
|
+
export default ForwardRef;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as BoxAiLogoAnimated } from './BoxAiLogoAnimated';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as BoxAiLogoAnimated } from './BoxAiLogoAnimated';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web-assets",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.70.1",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build-local-all": "yarn nx clone-repo && yarn build-local && nx run blueprint-web-assets:format-lint",
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
"svgr-logo": "svgr --config-file svgrConfig/common.svgrrc.js -d src/icons/Logo ./tmp/repo/Icon/Logo",
|
|
22
22
|
"svgr-medium-filled": "svgr --config-file svgrConfig/replace-color.svgrrc.js -d src/icons/MediumFilled ./tmp/repo/Icon/MediumFilled",
|
|
23
23
|
"svgr-medium": "svgr --config-file svgrConfig/replace-color.svgrrc.js -d src/icons/Medium ./tmp/repo/Icon/Medium",
|
|
24
|
-
"svgr": "
|
|
24
|
+
"svgr-animated": "svgr --config-file svgrConfig/animated.svgrrc.js -d src/icons/Animated ./tmp/repo/Icon/Animated",
|
|
25
|
+
"svgr": "rimraf src/icons/Content src/icons/ContentItemNoBackground src/icons/Fill src/icons/Line src/icons/Logo src/icons/MediumFilled src/icons/Medium src/icons/Animated && concurrently 'yarn svgr-content' 'yarn svgr-content-item-no-background' 'yarn svgr-fill' 'yarn svgr-illustration' 'yarn svgr-line' 'yarn svgr-logo' 'yarn svgr-medium-filled' 'yarn svgr-medium' 'yarn svgr-animated' && yarn remove-clippaths",
|
|
25
26
|
"tokens-build-styles-all": "yarn tokens-build-styles && yarn tokens-build-styles-create-typography-mixins && yarn build-bp2-tokens",
|
|
26
27
|
"tokens-build-styles-create-typography-mixins": "node scripts/create_typography_mixins.js --input tmp/repo/Style/values.json --output src/tokens/mixins.scss",
|
|
27
28
|
"tokens-build-styles": "token-transformer --expandTypography --expandComposition --resolveReferences=false tmp/repo/Style tmp/tokens_output_styles.json light-mode,values && node scripts/build-tokens.mjs",
|
|
@@ -88,6 +89,10 @@
|
|
|
88
89
|
"types": "./dist/icons/Medium/*.d.ts",
|
|
89
90
|
"default": "./dist/icons/Medium/*.js"
|
|
90
91
|
},
|
|
92
|
+
"./icons/Animated/*": {
|
|
93
|
+
"types": "./dist/icons/Animated/*.d.ts",
|
|
94
|
+
"default": "./dist/icons/Animated/*.js"
|
|
95
|
+
},
|
|
91
96
|
"./icons/Content": {
|
|
92
97
|
"types": "./dist/icons/Content/index.d.ts",
|
|
93
98
|
"default": "./dist/icons/Content/index.js"
|
|
@@ -116,6 +121,10 @@
|
|
|
116
121
|
"types": "./dist/icons/Medium/index.d.ts",
|
|
117
122
|
"default": "./dist/icons/Medium/index.js"
|
|
118
123
|
},
|
|
124
|
+
"./icons/Animated": {
|
|
125
|
+
"types": "./dist/icons/Animated/index.d.ts",
|
|
126
|
+
"default": "./dist/icons/Animated/index.js"
|
|
127
|
+
},
|
|
119
128
|
"./illustrations/*": {
|
|
120
129
|
"types": "./dist/illustrations/*.d.ts",
|
|
121
130
|
"default": "./dist/illustrations/*.js"
|
|
@@ -130,7 +139,7 @@
|
|
|
130
139
|
}
|
|
131
140
|
},
|
|
132
141
|
"devDependencies": {
|
|
133
|
-
"@box/storybook-utils": "^0.14.
|
|
142
|
+
"@box/storybook-utils": "^0.14.6",
|
|
134
143
|
"@types/react": "^18.0.0",
|
|
135
144
|
"@types/react-dom": "^18.0.0",
|
|
136
145
|
"chalk": "4.1.2",
|