barbican-reset 3.36.0 → 3.40.0

package/icons/{city_of_london_lockup.vue → CityOfLondonLockup.vue}

@@ -1,10 +1,9 @@
 <template>
   <a
-    class="city-of-london-lockup"
     href="//www.cityoflondon.gov.uk"
-    target="_blank"
-  >
-    <city-of-london-logo />
+    class="city-of-london-lockup"
+    target="_blank">
+    <city-of-london />
     <small>
       The City of London<br />Corporation is the founder<br />and principal
       funder of<br />the Barbican Centre
@@ -12,12 +11,6 @@
   </a>
 </template>
 
-<script>
-import CityOfLondonLogo from "#icons/city_of_london.vue";
-
-export default {
-  components: {
-    CityOfLondonLogo,
-  },
-};
+<script setup>
+import CityOfLondon from './CityOfLondon.vue'
 </script>

package/icons/Dropdown.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 0C4.032 0 0 4.032 0 9C0 13.968 4.032 18 9 18C13.968 18 18 13.968 18 9C18 4.032 13.968 0 9 0ZM9 16.8C4.704 16.8 1.2 13.296 1.2 9C1.2 4.704 4.704 1.2 9 1.2C13.296 1.2 16.8 4.704 16.8 9C16.8 13.296 13.296 16.8 9 16.8Z" />
+    <path d="M12.012 6.696L8.99999 10.2L5.98799 6.696C5.71199 6.372 5.21999 6.336 4.88399 6.612C4.55999 6.88801 4.52399 7.38 4.79999 7.716L8.39999 11.916C8.54399 12.084 8.75999 12.192 8.98799 12.192C9.21599 12.192 9.43199 12.096 9.57599 11.916L13.176 7.716C13.452 7.392 13.416 6.90001 13.092 6.612C12.768 6.336 12.276 6.372 11.988 6.696H12.012Z" />
+  </svg>
+</template>

package/icons/Renew.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.000563321 5.32832V1.76813C0.000563321 1.27861 0.40054 0.878085 0.8894 0.878085C1.37826 0.878085 1.77824 1.27861 1.77824 1.76813V2.9252C3.04927 1.40321 4.85361 0.352956 6.86238 0.0770416C9.00448 -0.216674 11.1288 0.335155 12.8531 1.63463C14.5775 2.943 15.6885 4.8388 15.9907 6.98381C16.0618 7.47334 15.7152 7.91836 15.2352 7.98957C15.1908 7.98957 15.1552 7.98957 15.1108 7.98957C14.6753 7.98957 14.2931 7.66915 14.2308 7.22413C13.9997 5.55084 13.1287 4.07336 11.7865 3.0498C10.4444 2.03515 8.78227 1.59902 7.11126 1.83044C5.38692 2.07075 3.84923 3.032 2.85373 4.42938H4.44475C4.93361 4.42938 5.33358 4.8299 5.33358 5.31942C5.33358 5.80895 4.93361 6.20947 4.44475 6.20947H0.8894C0.40054 6.20947 0.000563321 5.80895 0.000563321 5.31942V5.32832ZM15.1108 9.77856H11.5554C11.0666 9.77856 10.6666 10.1791 10.6666 10.6686C10.6666 11.1581 11.0666 11.5587 11.5554 11.5587H13.1465C12.151 12.956 10.6133 13.9173 8.88893 14.1576C5.44913 14.6382 2.24932 12.2173 1.76935 8.76391C1.69824 8.27438 1.25382 7.93617 0.764963 8.00737C0.276103 8.07857 -0.0616553 8.5236 0.00945168 9.01312C0.569419 13.0628 4.04477 16 8.01787 16C8.39118 16 8.75561 15.9733 9.13781 15.9199C11.1466 15.644 12.9509 14.5937 14.222 13.0717V14.2288C14.222 14.7183 14.6219 15.1189 15.1108 15.1189C15.5997 15.1189 15.9996 14.7183 15.9996 14.2288V10.6686C15.9996 10.1791 15.5997 9.77856 15.1108 9.77856Z" />
+  </svg>
+</template>

package/icons/dots.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="dots">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      height="14"
+      width="14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      height="14"
+      width="14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      height="14"
+      width="14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { gsap } from 'gsap'
+import { onMounted, useTemplateRef } from 'vue'
+
+const dots = useTemplateRef('dots')
+
+onMounted(() => {
+  const tl = gsap.timeline({ repeat: 9 })
+
+  const duration = 0.3
+
+  const keyframes = [
+    { y: -8, duration },
+    { y: 0, duration },
+  ]
+
+  tl.to(dots.value.children, {
+    stagger: duration,
+    keyframes,
+  })
+})
+</script>

package/icons/index.js

@@ -1,19 +1,19 @@
-import BackArrow from "#icons/back_arrow.vue";
-import BarbicanLogo from "#icons/barbican.vue";
-import CartIcon from "#icons/cart.vue";
-import CityOfLondonLogo from "#icons/city_of_london.vue";
-import CityOfLondonLockup from "#icons/city_of_london_lockup.vue";
-import CloseIcon from "#icons/close.vue";
-import InformationIcon from "#icons/information.vue";
-import QrCode from "#icons/qr_code.vue";
+import BrBackArrow from './BackArrow.vue'
+import BrBarbicanLogo from './Barbican.vue'
+import BrCartIcon from './Cart.vue'
+import BrCityOfLondonLockup from './CityOfLondonLockup.vue'
+import BrCloseIcon from './Close.vue'
+import BrInfoIcon from './Info.vue'
+import BrRenewIcon from './Renew.vue'
+import BrDropdownIcon from './Dropdown.vue'
 
-export {
-  BackArrow,
-  BarbicanLogo,
-  CartIcon,
-  CityOfLondonLogo,
-  CityOfLondonLockup,
-  CloseIcon,
-  InformationIcon,
-  QrCode,
-};
+import BrAccountContactIcon from './AccountContact.vue'
+import BrAccountDetailsIcon from './AccountPerson.vue'
+import BrAccountEditIcon from './AccountEdit.vue'
+import BrAccountMembershipIcon from './AccountMembership.vue'
+import BrAccountOrdersIcon from './AccountOrders.vue'
+import BrAccountPaymentIcon from './AccountPayment.vue'
+import BrAccountTicketIcon from './AccountTicket.vue'
+import BrAccountPersonalIcon from './AccountPersonal.vue'
+
+export { BrAccountContactIcon, BrAccountDetailsIcon, BrAccountEditIcon, BrAccountMembershipIcon, BrAccountOrdersIcon, BrAccountPaymentIcon, BrAccountTicketIcon, BrAccountPersonalIcon, BrBackArrow, BrBarbicanLogo, BrCartIcon, BrCityOfLondonLockup, BrCloseIcon, BrDropdownIcon, BrInfoIcon, BrRenewIcon }

package/index.js

@@ -1,102 +1,52 @@
-import BrAlert from '#components/BrAlert.vue'
-import BrAnchor from '#components/BrAnchor.vue'
-import BrButton from '#components/BrButton.vue'
-
-import BrCard from '#components/BrCard.vue'
-import BrCardBody from '#components/BrCardBody.vue'
-import BrCardText from '#components/BrCardText.vue'
-import BrCardTitle from '#components/BrCardTitle.vue'
-import BrCardSubtitle from '#components/BrCardSubtitle.vue'
-import BrCardTearoff from '#components/BrCardTearoff.vue'
-
-import BrCollapseButton from '#components/BrCollapse/Button.vue'
-import BrCollapseContent from '#components/BrCollapse/Content.vue'
-
-import BrConfirmDone from '#components/BrConfirmDone.vue'
-import BrConfirmEmail from '#components/BrConfirmEmail.vue'
-
-import BrContainer from '#components/BrContainer.vue'
-import BrDetails from '#components/BrDetails.vue'
-import BrFooterLower from '#components/BrFooterLower.vue'
-import BrFooterUpper from '#components/BrFooterUpper.vue'
-
-import BrFormBlock from '#components/BrFormBlock.vue'
-import BrFormCheckbox from '#components/BrFormCheckbox.vue'
-import BrFormCheckboxGroup from '#components/BrFormCheckboxGroup.vue'
-import BrFormDate from '#components/BrFormDate.vue'
-import BrFormEdit from '#components/BrFormEdit.vue'
-import BrFormEmail from '#components/BrFormEmail.vue'
-import BrFormFieldset from '#components/BrFormFieldset.vue'
-import BrFormInput from '#components/BrFormInput.vue'
-import BrFormLabel from '#components/BrFormLabel.vue'
-import BrFormPassword from '#components/BrFormPassword.vue'
-import BrFormRadio from '#components/BrFormRadio.vue'
-import BrFormRadioGroup from '#components/BrFormRadioGroup.vue'
-import BrFormRow from '#components/BrFormRow.vue'
-import BrFormSelect from '#components/BrFormSelect.vue'
-import BrFormSelectItem from '#components/BrFormSelectItem.vue'
-import BrFormTel from '#components/BrFormTel.vue'
-import BrFormTextarea from '#components/BrFormTextarea.vue'
-import BrFormToggle from '#components/BrFormToggle.vue'
-import BrFormUpdate from '#components/BrFormUpdate.vue'
-import BrFormVisible from '#components/BrFormVisible.vue'
-import BrLink from '#components/BrLink.vue'
-
-import BrOverlay from '#components/BrOverlay.vue'
-
-import BrLoader from '#components/BrLoader.vue'
-import BrSkiplink from '#components/BrSkiplink.vue'
-import BrStatusBars from '#components/BrStatusBars.vue'
-import BrTableCell from '#components/BrTableCell.vue'
-import BrTableHeader from '#components/BrTableHeader.vue'
-import BrTableRow from '#components/BrTableRow.vue'
-import BrWrap from '#components/BrWrap.vue'
-
-export {
-  BrAlert,
-  BrAnchor,
-  BrButton,
-  BrCard,
-  BrCardBody,
-  BrCardSubtitle,
-  BrCardText,
-  BrCardTitle,
-  BrCardTearoff,
-  BrCollapseButton,
-  BrCollapseContent,
-  BrConfirmDone,
-  BrConfirmEmail,
-  BrContainer,
-  BrDetails,
-  BrFormDate,
-  BrFooterLower,
-  BrFooterUpper,
-  BrFormBlock,
-  BrFormCheckbox,
-  BrFormCheckboxGroup,
-  BrFormEdit,
-  BrFormEmail,
-  BrFormFieldset,
-  BrFormInput,
-  BrFormLabel,
-  BrFormPassword,
-  BrFormRadio,
-  BrFormRadioGroup,
-  BrFormRow,
-  BrFormSelect,
-  BrFormSelectItem,
-  BrFormTel,
-  BrFormTextarea,
-  BrFormToggle,
-  BrFormUpdate,
-  BrFormVisible,
-  BrLink,
-  BrLoader,
-  BrOverlay,
-  BrSkiplink,
-  BrStatusBars,
-  BrTableCell,
-  BrTableHeader,
-  BrTableRow,
-  BrWrap,
-}
+export { default as BrAlert } from '#components/BrAlert.vue'
+export { default as BrButton } from '#components/BrButton.vue'
+
+export { default as BrCard } from '#components/BrCard.vue'
+export { default as BrCardBody } from '#components/BrCardBody.vue'
+export { default as BrCardSubtitle } from '#components/BrCardSubtitle.vue'
+export { default as BrCardText } from '#components/BrCardText.vue'
+export { default as BrCardTearoff } from '#components/BrCardTearoff.vue'
+export { default as BrCardTitle } from '#components/BrCardTitle.vue'
+
+export { default as BrCollapseButton } from '#components/BrCollapse/Button.vue'
+export { default as BrCollapseContent } from '#components/BrCollapse/Content.vue'
+
+export { default as BrConfirmDone } from '#components/BrConfirmDone.vue'
+export { default as BrConfirmEmail } from '#components/BrConfirmEmail.vue'
+
+export { default as BrContainer } from '#components/BrContainer.vue'
+export { default as BrDetails } from '#components/BrDetails.vue'
+export { default as BrFooterLower } from '#components/BrFooterLower.vue'
+export { default as BrFooterUpper } from '#components/BrFooterUpper.vue'
+
+export { default as BrFormBlock } from '#components/BrFormBlock.vue'
+export { default as BrFormCheckbox } from '#components/BrFormCheckbox.vue'
+export { default as BrFormCheckboxGroup } from '#components/BrFormCheckboxGroup.vue'
+export { default as BrFormDate } from '#components/BrFormDate.vue'
+export { default as BrFormEdit } from '#components/BrFormEdit.vue'
+export { default as BrFormEmail } from '#components/BrFormEmail.vue'
+export { default as BrFormFieldset } from '#components/BrFormFieldset.vue'
+export { default as BrFormInput } from '#components/BrFormInput.vue'
+export { default as BrFormLabel } from '#components/BrFormLabel.vue'
+export { default as BrFormPassword } from '#components/BrFormPassword.vue'
+export { default as BrFormRadio } from '#components/BrFormRadio.vue'
+export { default as BrFormRadioGroup } from '#components/BrFormRadioGroup.vue'
+export { default as BrFormRow } from '#components/BrFormRow.vue'
+export { default as BrFormSelect } from '#components/BrFormSelect.vue'
+export { default as BrFormSelectItem } from '#components/BrFormSelectItem.vue'
+export { default as BrFormTel } from '#components/BrFormTel.vue'
+export { default as BrFormTextarea } from '#components/BrFormTextarea.vue'
+export { default as BrFormToggle } from '#components/BrFormToggle.vue'
+export { default as BrFormUpdate } from '#components/BrFormUpdate.vue'
+export { default as BrFormVisible } from '#components/BrFormVisible.vue'
+
+export { default as BrLink } from '#components/BrLink.vue'
+export { default as BrLoader } from '#components/BrLoader.vue'
+export { default as BrOverlay } from '#components/BrOverlay.vue'
+export { default as BrQrCode } from '#components/BrQrCode.vue'
+export { default as BrSkiplink } from '#components/BrSkiplink.vue'
+export { default as BrStatusBars } from '#components/BrStatusBars.vue'
+export { default as BrTableCell } from '#components/BrTableCell.vue'
+export { default as BrTableHeader } from '#components/BrTableHeader.vue'
+export { default as BrTableRow } from '#components/BrTableRow.vue'
+export { default as BrWrap } from '#components/BrWrap.vue'

package/package.json

@@ -1,26 +1,22 @@
 {
   "name": "barbican-reset",
-  "version": "3.36.0",
+  "version": "3.40.0",
   "description": "Shared design system for Barbican projects, providing SCSS utilities, animations, icons, Vue components, and JS helpers for consistent styling and behaviour.",
   "main": "index.js",
   "exports": {
     ".": "./index.js",
-    "./animations": "./animations/index.js",
     "./lists": "./scss/lists.scss",
     "./reset": "./scss/reset.scss",
     "./supreme": "./scss/supreme.scss",
     "./typography": "./scss/typography.scss",
     "./focus-visible": "./focus-visible.min.js",
     "./icons": "./icons/index.js",
-    "./icons/account": "./icons/account/index.js",
-    "./icons/confirm": "./icons/confirm/index.js",
-    "./icons/stream": "./icons/stream/index.js",
     "./scss": "./scss/index.scss",
     "./scss/functions": "./scss/functions/index.scss",
     "./scss/mixins": "./scss/mixins/index.scss",
     "./scss/helpers": "./scss/_helpers.scss",
-    "./scripts/helpers": "./scripts/helpers.js",
-    "./mixins": "./mixins/inputs.js"
+    "./mixins": "./mixins/inputs.js",
+    "./utils": "./utils.js"
   },
   "imports": {
     "#animations/*": "./animations/*.js",
@@ -28,8 +24,7 @@
     "#icons/*": "./icons/*",
     "#mixins/*": "./mixins/*.js",
     "#styles/*": "./scss/*.scss",
-    "#scripts/*": "./scripts/*.js",
-    "#helpers/*": "./scripts/helpers/*.js"
+    "#utils/*": "./utils/*.js"
   },
   "scripts": {
     "build:css": "gulp build:css",
@@ -47,6 +42,7 @@
     "luxon": "^3.2.1",
     "nodemon": "^3.1.0",
     "pug": "^3.0.2",
+    "qrcode": "^1.5.3",
     "serve-favicon": "^2.5.0"
   },
   "peerDependencies": {
@@ -55,16 +51,14 @@
   "files": [
     "animations/**/*",
     "components/**/*",
-    "css/**/*",
-    "fonts/*",
     "icons/**/*",
     "mixins/**/*",
     "patterns/**/*",
-    "logos/*",
-    "scripts/**/*",
+    "utils/**/*",
     "scss/**/*",
     "focus-visible.min.js",
-    "index.js"
+    "index.js",
+    "utils.js"
   ],
   "homepage": "https://bitbucket.org/barbicandev/barbican-reset#readme",
   "license": "MIT",

package/scss/_atomic.scss

@@ -12,7 +12,7 @@
 @use "atomic/widths";
 
 .border-radius-lg {
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
 }
 
 .list-style-none {

package/scss/_br-button.scss

@@ -1,10 +1,6 @@
 @use "mixins/focus" as *;
 @use "mixins/buttons" as *;
 
-button.btn:active {
-  transform: var(--scale-click);
-}
-
 /// Button component setup class. 
 /// Used in combination with a button style class
 /// @group Buttons
@@ -70,14 +66,6 @@ button.btn:active {
   @include btn-edit-input;
 }
 
-/// Remove button. 
-/// Used only by StreamDonation.vue component. Could be deprecated.
-/// Defaults to slim solid grey. Borders grey on focus.
-/// @group Buttons
-.btn.btn-remove {
-  @include btn-remove;
-}
-
 /// Link button.
 /// Imitates the appearance of an anchor link. 
 /// Defaults to transparent fill. Fills grey on focus.
@@ -86,13 +74,6 @@ button.btn:active {
   @include btn-link;
 }
 
-/// Video help button.
-/// Apparently no longer used. Could be deprecated.
-/// @group Buttons
-.btn.btn-video-help {
-  @include btn-video-help;
-}
-
 /// Exit button.
 /// Circular close button. Used in the BrAlert component.
 /// @group Buttons
@@ -128,6 +109,11 @@ button.btn:active {
   @include btn-exit-overlay;
 }
 
+/// @group Buttons
+.btn.btn-exit-overlay-bg {
+  @include btn-exit-overlay-bg;
+}
+
 .btn {
   &.btn-video-login {
     @include btn-video-login;
@@ -241,6 +227,10 @@ button.btn:active {
     @include btn-slim;
   }
 
+  &.btn-voucher-amount {
+    @include btn-voucher-amount;
+  }
+
   // modifyers
 
   &.expand {
@@ -250,4 +240,8 @@ button.btn:active {
   &.expand--mobile {
     @include btn-expand--mobile;
   }
+
+  &.btn-react:not(:disabled):not([aria-busy=true]):active {
+    transform: var(--scale-click);
+  }
 }

package/scss/_br-form-select.scss

@@ -0,0 +1,52 @@
+@use "mixins/breakpoints" as *;
+
+.br-select-form {
+  width: var(--width-select-form);
+  position: relative;
+}
+
+.br-select-form-button[aria-expanded='false'] + .br-select-form-list {
+  visibility: hidden;
+}
+
+.br-select-form-button svg {
+  @include large-down {
+    display: none;
+  }
+}
+
+.br-select-form-list {
+  border-bottom-right-radius: var(--border-radius-lg);
+  border-bottom-left-radius: var(--border-radius-lg);
+  border-width: var(--border-width-sm);
+  color: var(--color-form-select-list);
+  border-color: currentColor;
+  background-color: white;
+  border-style: solid;
+  position: absolute;
+  margin-bottom: 0;
+  list-style: none;
+  border-top: none;
+  overflow: hidden;
+  padding-left: 0;
+  margin-top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.br-select-form-item:not(:last-of-type) {
+  border-bottom: 1px solid currentColor;
+}
+
+.br-form-select-link {
+  padding: var(--padding-md);
+  display: block;
+}
+
+.br-form-select-link:focus-visible,
+.br-form-select-link:hover {
+  background-color: var(--background-color-form-select-link-focus);
+  outline-offset: var(--outline-inset-lg);
+  outline-color: inherit;
+  outline-style: dashed;
+}

package/scss/_br-form-toggle.scss

@@ -1,18 +1,12 @@
+@use "sass:map";
 @use "mixins/input/generic" as *;
 @use "mixins/breakpoints" as *;
 
-$circleSize: 1.25rem;
-$circleMargin: 0.25rem;
-$circleTransform: $circleSize;
-$toggleHeight: $circleSize + $circleMargin * 2;
-$toggleWidth: $circleSize * 2 + $circleMargin * 2;
-$toggleRadius: $toggleHeight * 0.5;
-
 .br-form-toggle label {
   @include generic-input-label;
 
   & {
-    grid-template-columns: auto $toggleWidth;
+    grid-template-columns: auto var(--width-toggle);
     padding-left: var(--padding-md);
     display: inline-grid;
     align-items: center;
@@ -35,22 +29,26 @@ $toggleRadius: $toggleHeight * 0.5;
 }
 
 .br-form-toggle input[type=checkbox] {
-  background-color: var(--color-black-50-lighten);
+  background-color: var(--background-color-toggle-unchecked);
+  border-color: var(--border-color-toggle-unchecked);
+  border-radius: var(--border-radius-toggle);
   transition-property: background-color;
-  border-radius: $toggleRadius;
+  border-width: var(--border-width-sm);
   transition-duration: 200ms;
-  height: $toggleHeight;
-  width: $toggleWidth;
+  height: var(--height-toggle);
+  width: var(--width-toggle);
+  border-style: solid;
   position: relative;
   appearance: none;
-  cursor: inherit;
+  cursor: pointer;
+  display: block;
   color: white;
   padding: 0;
   margin: 0;
 
   &:hover,
   &:focus-visible {
-    outline-color: var(--color-black-50-lighten);
+    outline-color: var(--outline-color-toggle-unchecked);
     outline-offset: var(--border-width-lg);
     outline-width: var(--border-width-lg);
     outline-style: solid;
@@ -58,29 +56,34 @@ $toggleRadius: $toggleHeight * 0.5;
 }
 
 .br-form-toggle input[type=checkbox]:before {
+  background-color: var(--background-color-toggle-before-unchecked);
   transition-property: transform;
   transition-duration: 300ms;
-  background-color: white;
-  bottom: $circleMargin;
-  height: $circleSize;
-  left: $circleMargin;
-  width: $circleSize;
+  bottom: var(--margin-toggle-before);
+  height: var(--width-toggle-before);
+  left: var(--margin-toggle-before);
+  width: var(--width-toggle-before);
   border-radius: 50%;
   position: absolute;
   content: '';
 }
 
 .br-form-toggle input[type=checkbox]:checked:before {
-  -webkit-transform: translateX($circleTransform);
-  -ms-transform: translateX($circleTransform);
-  transform: translateX($circleTransform);
+  -webkit-transform: translateX(var(--width-toggle-before));
+  -ms-transform: translateX(var(--width-toggle-before));
+  transform: translateX(var(--width-toggle-before));
 }
 
 .br-form-toggle input[type=checkbox]:checked {
-  background-color: var(--color-status-success);
+  border-color: var(--border-color-toggle-checked);
+  background-color: var(--background-color-toggle-checked);
 
   &:hover,
   &:focus-visible {
-    outline-color: var(--color-status-success);
+    outline-color: var(--outline-color-toggle-checked);
   }
+}
+
+.br-form-toggle input[type=checkbox]:checked:before {
+  background-color: var(--background-color-toggle-before-checked);
 }

package/scss/_br-overlay.scss

@@ -11,16 +11,41 @@
     overflow: scroll;
     position: fixed;
     display: flex;
+    z-index: 999;
     height: 100%;
     width: 100%;
-    z-index: 5;
+
+    &.fade-enter-active,
+    &.fade-leave-active {
+      transition: opacity 0.3s ease;
+    }
+
+    &.fade-enter-from,
+    &.fade-leave-to {
+      opacity: 0;
+    }
   }
 }
 
 .br-overlay-content {
-  justify-content: center;
+  margin-right: auto;
   position: relative;
-  display: flex;
-  width: 100%;
+  margin-left: auto;
+  z-index: 2;
+}
+
+.wrap-overlay-exit-button {
+  padding: var(--padding-xxl);
+  position: absolute;
   z-index: 2;
+  right: 0;
+}
+
+.br-overlay-background {
+    @include inset;
+
+  & {
+    position: fixed;
+    z-index: 1;
+  }
 }

package/scss/_br-qr-code.scss

@@ -0,0 +1,3 @@
+  .br-qr-code path:last-child {
+    stroke: var(--stroke-qr-code);
+  }

package/scss/_br-table-row.scss

@@ -14,7 +14,7 @@
   }
 
   @include medium-down {
-    border-radius: var(--border-radius-lg);
+    border-radius: var(--border-radius-md);
     padding: var(--padding-sm);
   }
 }

package/scss/_input.scss

@@ -12,7 +12,7 @@ input[type=radio] {
 
 input[type=button],
 input[type=submit] {
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   appearance: none;
 }