Fail
Unable to find role="button" and name "Sign into Chromatic with SSO"
Ignored nodes: comments, script, style
<div
class="css-u7lwfg"
data-canvas="right"
orientation="right"
>
<div
class="css-mhl5t4"
>
<button
class="css-qnsn01"
>
<span
class="css-0"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.76 7.096a.498.498 0 00.136.258l5.5 5.5a.5.5 0 00.707-.708L3.958 7l5.147-5.146a.5.5 0 10-.708-.708l-5.5 5.5a.5.5 0 00-.137.45z"
fill="currentColor"
/>
</svg>
<span
class="css-1ujnczq"
>
Back
</span>
</span>
</button>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 58 53"
width="58"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317890)"
>
<rect
fill="#FF4785"
height="40"
rx="8"
shape-rendering="crispEdges"
width="40"
x="6"
y="2"
/>
<path
clip-rule="evenodd"
d="M17.5005 11.0555C16.8471 11.0963 16.3455 11.6508 16.37 12.3051L17.1135 32.1151C17.137 32.7426 17.6379 33.2471 18.2651 33.2753L34.3716 33.9987C34.3896 33.9995 34.4077 33.9999 34.4257 33.9999C35.0921 33.9999 35.6324 33.4597 35.6324 32.7932V11.2067C35.6324 11.1816 35.6316 11.1565 35.63 11.1314C35.5885 10.4663 35.0156 9.96082 34.3505 10.0024L33.0259 10.0853L33.1227 12.8548C33.1261 12.9541 33.0484 13.0375 32.949 13.041C32.9065 13.0424 32.8648 13.0288 32.8314 13.0025L31.939 12.2995L30.8825 13.1009C30.8033 13.161 30.6904 13.1455 30.6303 13.0663C30.605 13.033 30.5921 12.9919 30.5939 12.9501L30.707 10.2302L17.5005 11.0555ZM31.221 19.1936C30.7965 19.5234 27.6343 19.7484 27.6343 19.2789C27.7011 17.4876 26.8991 17.409 26.4536 17.409C26.0303 17.409 25.3174 17.537 25.3174 18.4966C25.3174 19.4746 26.3592 20.0267 27.582 20.6747C29.3191 21.5952 31.4215 22.7093 31.4215 25.5128C31.4215 28.1998 29.2383 29.6842 26.4536 29.6842C23.5797 29.6842 21.0683 28.5215 21.352 24.4904C21.4633 24.0171 25.1169 24.1296 25.1169 24.4904C25.0723 26.1538 25.4511 26.6431 26.409 26.6431C27.1442 26.6431 27.4783 26.2379 27.4783 25.5554C27.4783 24.5227 26.3929 23.9133 25.1442 23.2122C23.4534 22.2629 21.4633 21.1456 21.4633 18.5819C21.4633 16.0229 23.2233 14.3168 26.3645 14.3168C29.5056 14.3168 31.221 15.9967 31.221 19.1936Z"
fill="white"
fill-rule="evenodd"
/>
</g>
<circle
cx="46"
cy="22"
fill="white"
r="2.5"
stroke="#FF4785"
/>
<path
d="M57.8536 22.3536C58.0488 22.1583 58.0488 21.8417 57.8536 21.6464L54.6716 18.4645C54.4763 18.2692 54.1597 18.2692 53.9645 18.4645C53.7692 18.6597 53.7692 18.9763 53.9645 19.1716L56.7929 22L53.9645 24.8284C53.7692 25.0237 53.7692 25.3403 53.9645 25.5355C54.1597 25.7308 54.4763 25.7308 54.6716 25.5355L57.8536 22.3536ZM48.5 22.5H57.5V21.5H48.5V22.5Z"
fill="#FF4785"
/>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317890"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317890"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317890"
mode="normal"
result="effect2_dropShadow_304_317890"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317890"
mode="normal"
result="shape"
/>
</filter>
</defs>
</svg>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05...
Ignored nodes: comments, script, style
<div
class="css-u7lwfg"
data-canvas="right"
orientation="right"
>
<div
class="css-mhl5t4"
>
<button
class="css-qnsn01"
>
<span
class="css-0"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.76 7.096a.498.498 0 00.136.258l5.5 5.5a.5.5 0 00.707-.708L3.958 7l5.147-5.146a.5.5 0 10-.708-.708l-5.5 5.5a.5.5 0 00-.137.45z"
fill="currentColor"
/>
</svg>
<span
class="css-1ujnczq"
>
Back
</span>
</span>
</button>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 58 53"
width="58"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317890)"
>
<rect
fill="#FF4785"
height="40"
rx="8"
shape-rendering="crispEdges"
width="40"
x="6"
y="2"
/>
<path
clip-rule="evenodd"
d="M17.5005 11.0555C16.8471 11.0963 16.3455 11.6508 16.37 12.3051L17.1135 32.1151C17.137 32.7426 17.6379 33.2471 18.2651 33.2753L34.3716 33.9987C34.3896 33.9995 34.4077 33.9999 34.4257 33.9999C35.0921 33.9999 35.6324 33.4597 35.6324 32.7932V11.2067C35.6324 11.1816 35.6316 11.1565 35.63 11.1314C35.5885 10.4663 35.0156 9.96082 34.3505 10.0024L33.0259 10.0853L33.1227 12.8548C33.1261 12.9541 33.0484 13.0375 32.949 13.041C32.9065 13.0424 32.8648 13.0288 32.8314 13.0025L31.939 12.2995L30.8825 13.1009C30.8033 13.161 30.6904 13.1455 30.6303 13.0663C30.605 13.033 30.5921 12.9919 30.5939 12.9501L30.707 10.2302L17.5005 11.0555ZM31.221 19.1936C30.7965 19.5234 27.6343 19.7484 27.6343 19.2789C27.7011 17.4876 26.8991 17.409 26.4536 17.409C26.0303 17.409 25.3174 17.537 25.3174 18.4966C25.3174 19.4746 26.3592 20.0267 27.582 20.6747C29.3191 21.5952 31.4215 22.7093 31.4215 25.5128C31.4215 28.1998 29.2383 29.6842 26.4536 29.6842C23.5797 29.6842 21.0683 28.5215 21.352 24.4904C21.4633 24.0171 25.1169 24.1296 25.1169 24.4904C25.0723 26.1538 25.4511 26.6431 26.409 26.6431C27.1442 26.6431 27.4783 26.2379 27.4783 25.5554C27.4783 24.5227 26.3929 23.9133 25.1442 23.2122C23.4534 22.2629 21.4633 21.1456 21.4633 18.5819C21.4633 16.0229 23.2233 14.3168 26.3645 14.3168C29.5056 14.3168 31.221 15.9967 31.221 19.1936Z"
fill="white"
fill-rule="evenodd"
/>
</g>
<circle
cx="46"
cy="22"
fill="white"
r="2.5"
stroke="#FF4785"
/>
<path
d="M57.8536 22.3536C58.0488 22.1583 58.0488 21.8417 57.8536 21.6464L54.6716 18.4645C54.4763 18.2692 54.1597 18.2692 53.9645 18.4645C53.7692 18.6597 53.7692 18.9763 53.9645 19.1716L56.7929 22L53.9645 24.8284C53.7692 25.0237 53.7692 25.3403 53.9645 25.5355C54.1597 25.7308 54.4763 25.7308 54.6716 25.5355L57.8536 22.3536ZM48.5 22.5H57.5V21.5H48.5V22.5Z"
fill="#FF4785"
/>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317890"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317890"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317890"
mode="normal"
result="effect2_dropShadow_304_317890"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317890"
mode="normal"
result="shape"
/>
</filter>
</defs>
</svg>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05...View in Storybook
Chrome 105960x720
Linux Linux Ubuntu 20.04.4
385705 on dark-mode-adjustments
Unable to find role="button" and name "Sign into Chromatic with SSO"
Ignored nodes: comments, script, style
<div
class="css-17pfsf2"
data-canvas="right"
orientation="right"
>
<div
class="css-ggfeq3"
>
<button
class="css-16bd420"
>
<span
class="css-0"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.76 7.096a.498.498 0 00.136.258l5.5 5.5a.5.5 0 00.707-.708L3.958 7l5.147-5.146a.5.5 0 10-.708-.708l-5.5 5.5a.5.5 0 00-.137.45z"
fill="#D9E8F2"
/>
</svg>
<span
class="css-m3fi0l"
>
Back
</span>
</span>
</button>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 58 53"
width="58"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317890)"
>
<rect
fill="#FF4785"
height="40"
rx="8"
shape-rendering="crispEdges"
width="40"
x="6"
y="2"
/>
<path
clip-rule="evenodd"
d="M17.5005 11.0555C16.8471 11.0963 16.3455 11.6508 16.37 12.3051L17.1135 32.1151C17.137 32.7426 17.6379 33.2471 18.2651 33.2753L34.3716 33.9987C34.3896 33.9995 34.4077 33.9999 34.4257 33.9999C35.0921 33.9999 35.6324 33.4597 35.6324 32.7932V11.2067C35.6324 11.1816 35.6316 11.1565 35.63 11.1314C35.5885 10.4663 35.0156 9.96082 34.3505 10.0024L33.0259 10.0853L33.1227 12.8548C33.1261 12.9541 33.0484 13.0375 32.949 13.041C32.9065 13.0424 32.8648 13.0288 32.8314 13.0025L31.939 12.2995L30.8825 13.1009C30.8033 13.161 30.6904 13.1455 30.6303 13.0663C30.605 13.033 30.5921 12.9919 30.5939 12.9501L30.707 10.2302L17.5005 11.0555ZM31.221 19.1936C30.7965 19.5234 27.6343 19.7484 27.6343 19.2789C27.7011 17.4876 26.8991 17.409 26.4536 17.409C26.0303 17.409 25.3174 17.537 25.3174 18.4966C25.3174 19.4746 26.3592 20.0267 27.582 20.6747C29.3191 21.5952 31.4215 22.7093 31.4215 25.5128C31.4215 28.1998 29.2383 29.6842 26.4536 29.6842C23.5797 29.6842 21.0683 28.5215 21.352 24.4904C21.4633 24.0171 25.1169 24.1296 25.1169 24.4904C25.0723 26.1538 25.4511 26.6431 26.409 26.6431C27.1442 26.6431 27.4783 26.2379 27.4783 25.5554C27.4783 24.5227 26.3929 23.9133 25.1442 23.2122C23.4534 22.2629 21.4633 21.1456 21.4633 18.5819C21.4633 16.0229 23.2233 14.3168 26.3645 14.3168C29.5056 14.3168 31.221 15.9967 31.221 19.1936Z"
fill="white"
fill-rule="evenodd"
/>
</g>
<circle
cx="46"
cy="22"
fill="white"
r="2.5"
stroke="#FF4785"
/>
<path
d="M57.8536 22.3536C58.0488 22.1583 58.0488 21.8417 57.8536 21.6464L54.6716 18.4645C54.4763 18.2692 54.1597 18.2692 53.9645 18.4645C53.7692 18.6597 53.7692 18.9763 53.9645 19.1716L56.7929 22L53.9645 24.8284C53.7692 25.0237 53.7692 25.3403 53.9645 25.5355C54.1597 25.7308 54.4763 25.7308 54.6716 25.5355L57.8536 22.3536ZM48.5 22.5H57.5V21.5H48.5V22.5Z"
fill="#FF4785"
/>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317890"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317890"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317890"
mode="normal"
result="effect2_dropShadow_304_317890"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317890"
mode="normal"
result="shape"
/>
</filter>
</defs>
</svg>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"...
Ignored nodes: comments, script, style
<div
class="css-17pfsf2"
data-canvas="right"
orientation="right"
>
<div
class="css-ggfeq3"
>
<button
class="css-16bd420"
>
<span
class="css-0"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.76 7.096a.498.498 0 00.136.258l5.5 5.5a.5.5 0 00.707-.708L3.958 7l5.147-5.146a.5.5 0 10-.708-.708l-5.5 5.5a.5.5 0 00-.137.45z"
fill="#D9E8F2"
/>
</svg>
<span
class="css-m3fi0l"
>
Back
</span>
</span>
</button>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 58 53"
width="58"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317890)"
>
<rect
fill="#FF4785"
height="40"
rx="8"
shape-rendering="crispEdges"
width="40"
x="6"
y="2"
/>
<path
clip-rule="evenodd"
d="M17.5005 11.0555C16.8471 11.0963 16.3455 11.6508 16.37 12.3051L17.1135 32.1151C17.137 32.7426 17.6379 33.2471 18.2651 33.2753L34.3716 33.9987C34.3896 33.9995 34.4077 33.9999 34.4257 33.9999C35.0921 33.9999 35.6324 33.4597 35.6324 32.7932V11.2067C35.6324 11.1816 35.6316 11.1565 35.63 11.1314C35.5885 10.4663 35.0156 9.96082 34.3505 10.0024L33.0259 10.0853L33.1227 12.8548C33.1261 12.9541 33.0484 13.0375 32.949 13.041C32.9065 13.0424 32.8648 13.0288 32.8314 13.0025L31.939 12.2995L30.8825 13.1009C30.8033 13.161 30.6904 13.1455 30.6303 13.0663C30.605 13.033 30.5921 12.9919 30.5939 12.9501L30.707 10.2302L17.5005 11.0555ZM31.221 19.1936C30.7965 19.5234 27.6343 19.7484 27.6343 19.2789C27.7011 17.4876 26.8991 17.409 26.4536 17.409C26.0303 17.409 25.3174 17.537 25.3174 18.4966C25.3174 19.4746 26.3592 20.0267 27.582 20.6747C29.3191 21.5952 31.4215 22.7093 31.4215 25.5128C31.4215 28.1998 29.2383 29.6842 26.4536 29.6842C23.5797 29.6842 21.0683 28.5215 21.352 24.4904C21.4633 24.0171 25.1169 24.1296 25.1169 24.4904C25.0723 26.1538 25.4511 26.6431 26.409 26.6431C27.1442 26.6431 27.4783 26.2379 27.4783 25.5554C27.4783 24.5227 26.3929 23.9133 25.1442 23.2122C23.4534 22.2629 21.4633 21.1456 21.4633 18.5819C21.4633 16.0229 23.2233 14.3168 26.3645 14.3168C29.5056 14.3168 31.221 15.9967 31.221 19.1936Z"
fill="white"
fill-rule="evenodd"
/>
</g>
<circle
cx="46"
cy="22"
fill="white"
r="2.5"
stroke="#FF4785"
/>
<path
d="M57.8536 22.3536C58.0488 22.1583 58.0488 21.8417 57.8536 21.6464L54.6716 18.4645C54.4763 18.2692 54.1597 18.2692 53.9645 18.4645C53.7692 18.6597 53.7692 18.9763 53.9645 19.1716L56.7929 22L53.9645 24.8284C53.7692 25.0237 53.7692 25.3403 53.9645 25.5355C54.1597 25.7308 54.4763 25.7308 54.6716 25.5355L57.8536 22.3536ZM48.5 22.5H57.5V21.5H48.5V22.5Z"
fill="#FF4785"
/>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317890"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317890"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317890"
mode="normal"
result="effect2_dropShadow_304_317890"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317890"
mode="normal"
result="shape"
/>
</filter>
</defs>
</svg>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"...View in StorybookChrome 105960x720
Linux Linux Ubuntu 20.04.4
385705 on dark-mode-adjustments
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Unable to find role="button" and name "Sign into Chromatic with SSO"
Ignored nodes: comments, script, style
<div
class="css-u7lwfg"
data-canvas="right"
orientation="right"
>
<div
class="css-mhl5t4"
>
<button
class="css-qnsn01"
>
<span
class="css-0"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.76 7.096a.498.498 0 00.136.258l5.5 5.5a.5.5 0 00.707-.708L3.958 7l5.147-5.146a.5.5 0 10-.708-.708l-5.5 5.5a.5.5 0 00-.137.45z"
fill="currentColor"
/>
</svg>
<span
class="css-1ujnczq"
>
Back
</span>
</span>
</button>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 58 53"
width="58"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317890)"
>
<rect
fill="#FF4785"
height="40"
rx="8"
shape-rendering="crispEdges"
width="40"
x="6"
y="2"
/>
<path
clip-rule="evenodd"
d="M17.5005 11.0555C16.8471 11.0963 16.3455 11.6508 16.37 12.3051L17.1135 32.1151C17.137 32.7426 17.6379 33.2471 18.2651 33.2753L34.3716 33.9987C34.3896 33.9995 34.4077 33.9999 34.4257 33.9999C35.0921 33.9999 35.6324 33.4597 35.6324 32.7932V11.2067C35.6324 11.1816 35.6316 11.1565 35.63 11.1314C35.5885 10.4663 35.0156 9.96082 34.3505 10.0024L33.0259 10.0853L33.1227 12.8548C33.1261 12.9541 33.0484 13.0375 32.949 13.041C32.9065 13.0424 32.8648 13.0288 32.8314 13.0025L31.939 12.2995L30.8825 13.1009C30.8033 13.161 30.6904 13.1455 30.6303 13.0663C30.605 13.033 30.5921 12.9919 30.5939 12.9501L30.707 10.2302L17.5005 11.0555ZM31.221 19.1936C30.7965 19.5234 27.6343 19.7484 27.6343 19.2789C27.7011 17.4876 26.8991 17.409 26.4536 17.409C26.0303 17.409 25.3174 17.537 25.3174 18.4966C25.3174 19.4746 26.3592 20.0267 27.582 20.6747C29.3191 21.5952 31.4215 22.7093 31.4215 25.5128C31.4215 28.1998 29.2383 29.6842 26.4536 29.6842C23.5797 29.6842 21.0683 28.5215 21.352 24.4904C21.4633 24.0171 25.1169 24.1296 25.1169 24.4904C25.0723 26.1538 25.4511 26.6431 26.409 26.6431C27.1442 26.6431 27.4783 26.2379 27.4783 25.5554C27.4783 24.5227 26.3929 23.9133 25.1442 23.2122C23.4534 22.2629 21.4633 21.1456 21.4633 18.5819C21.4633 16.0229 23.2233 14.3168 26.3645 14.3168C29.5056 14.3168 31.221 15.9967 31.221 19.1936Z"
fill="white"
fill-rule="evenodd"
/>
</g>
<circle
cx="46"
cy="22"
fill="white"
r="2.5"
stroke="#FF4785"
/>
<path
d="M57.8536 22.3536C58.0488 22.1583 58.0488 21.8417 57.8536 21.6464L54.6716 18.4645C54.4763 18.2692 54.1597 18.2692 53.9645 18.4645C53.7692 18.6597 53.7692 18.9763 53.9645 19.1716L56.7929 22L53.9645 24.8284C53.7692 25.0237 53.7692 25.3403 53.9645 25.5355C54.1597 25.7308 54.4763 25.7308 54.6716 25.5355L57.8536 22.3536ZM48.5 22.5H57.5V21.5H48.5V22.5Z"
fill="#FF4785"
/>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317890"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317890"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317890"
mode="normal"
result="effect2_dropShadow_304_317890"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317890"
mode="normal"
result="shape"
/>
</filter>
</defs>
</svg>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05...
at Yl (https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/playAll-52b82d74.js:42:3372)
at Object.findByRole (https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/playAll-52b82d74.js:50:236)
at un.invoke (https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/preview-11611d0a.js:27:8713)
at un.intercept (https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/preview-11611d0a.js:27:6354)
at un.track (https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/preview-11611d0a.js:27:6086)
at findByRole (https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/preview-11611d0a.js:27:5459)
at https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/Authentication.stories-68a284df.js:10:3926
at https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/playAll-52b82d74.js:73:1597
at Array.map (<anonymous>)
at https://6480e1b0042842f149cfd74c-eopzenamzh.capture-loopback.chromatic.com/assets/playAll-52b82d74.js:73:1586