Error: expect(element).toHaveStyle() - Expected - --text: #text-custom; ❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:329:19

Error: Snapshot `Checkbox > should render disabled checkbox with custom colors 1` mismatched - Expected + Received @@ -1,26 +1,28 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" + for="«rk»" > <input - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 cursor-0-not-allowed--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-not-allowed--1" disabled="" id="«rk»" - style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;" + style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox" /> - </div> + </label> <label class="cursor-0-not-allowed--255" for="«rk»" > <span - class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255" + class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255" + style="--text: #0000ff;" > Test Checkbox </span> </label> </div> ❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:286:23

Error: Snapshot `Checkbox > should render checked checkbox with custom colors 1` mismatched - Expected + Received @@ -1,22 +1,24 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" + for="«rj»" > <input checked="" - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-pointer--1" id="«rj»" - style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;" + style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox" /> <svg - class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255" - height="10" + class="pointer-events-0-none--255 opacity-0-1--255 z-index-0-1--255" + height="10" + style="--checkIcon: #000000;" viewBox="0

Error: Snapshot `Checkbox > should render with partial custom colors 1` mismatched - Expected + Received @@ -1,25 +1,27 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" + for="«ri»" > <input - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-pointer--1" id="«ri»" - style="--primary: #ff0000; --text: #0000ff;" + style="--primary: #ff0000;" type="checkbox" /> - </div> + </label> <label class="cursor-0-pointer--255" for="«ri»" > <span - class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255" + class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255" + style="--text: #0000ff;" > Test Checkbox </span> </label>

Error: Snapshot `Checkbox > should render with custom colors 1` mismatched - Expected + Received @@ -1,25 +1,27 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" + for="«rh»" > <input - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-pointer--1" id="«rh»" - style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00;" + style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox" /> - </div> + </label> <label class="cursor-0-pointer--255" for="«rh»" > <span - class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255" + class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255" + style="--text: #000

Error: Snapshot `Checkbox > should render checkbox with custom child 1` mismatched - Expected + Received @@ -1,18 +1,19 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" + for="«r4»" > <input - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-pointer--1" id="«r4»" type="checkbox" /> - </div> + </label> <label class="cursor-0-pointer--255" for="«r4»" > <div> ❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:41:23

Error: Snapshot `Checkbox > should render disabled and checked checkbox 1` mismatched - Expected + Received @@ -1,40 +1,41 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" + for="«r3»" > <input checked="" - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 cursor-0-not-allowed--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-not-allowed--1" disabled="" id="«r3»" type="checkbox" /> <svg - class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255" + class="pointer-events-0-none--255 opacity-0-1--255 z-index-0-1--255" height="10" viewBox="0 0 12 10" width="12" xmlns="http://www.w3.org/2000/svg" > <path clip-rule="evenodd" d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z" - fill="light-dark(#D6D7DE, #373737)" + fill="light-dark(#D6D7DE, #47474A)" fill-rule="evenodd" /> </svg> - </div> + </label> <label class="cursor-0-not-allowed--255" for="«r3»" > <span - class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255" + class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255" > Test Checkbox </span> </label> </div> ❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:30:23

Error: Snapshot `Checkbox > should render disabled checkbox 1` mismatched - Expected + Received @@ -1,25 +1,26 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" + for="«r2»" > <input - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 cursor-0-not-allowed--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-not-allowed--1" disabled="" id="«r2»" type="checkbox" /> - </div> + </label> <label class="cursor-0-not-allowed--255" for="«r2»" > <span - class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255" + class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255" > Test Checkbox </span> </label> </div> ❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:20:23

Error: Snapshot `Checkbox > should render checked checkbox 1` mismatched - Expected + Received @@ -1,20 +1,21 @@ <div> <div - class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255" + class="align-items-0-center--255 gap-0-8px--255 display-0-flex--0" > - <div + <label - class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255" + class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" + for="«r1»" > <input checked="" - class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 " + class="position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 position-0-absolute--255 top-0-0--255 left-0-0--255 width-0-100%--255 height-0-100%--255 opacity-0-1--255 z-index-0-0--255 pointer-events-0-none--255 cursor-0-pointer--1" id="«r1»" type="checkbox" /> <svg - class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255" + class="pointer-events-0-none--255 opacity-0-1--255 z-index-0-1--255" height="10" viewBox="0 0 12 10" width="12" xmlns="http://www.w3.org/2000/svg" > @@ -23,17 +24,17 @@ d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.