@skyscanner/backpack-web 29.3.0 → 29.4.0

package/bpk-component-button/src/BpkButtonLink.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--link{border-radius:0;background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}

package/bpk-component-button/src/BpkButtonLinkOnDark.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--link-on-dark{border-radius:0;background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,0.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255,255,255,0.2))}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,0.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255,255,255,0.2))}

package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-background-color, #05203c)}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, #154679)}.bpk-button:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5);color:#c80456;color:var(--bpk-button-destructive-text-color, #c80456);background-color:#e0e3e5;background-color:var(--bpk-button-destructive-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, #c80456)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, #fff);background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, #0062e3)}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, #024daf)}.bpk-button--featured:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--link{border-radius:0;background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{border-radius:0;background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,0.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255,255,255,0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, #161616);background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, #fff)}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-active-background-color, #c2c9cd)}.bpk-button--primary-on-dark:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, #05203c)}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, #154679)}.bpk-button--primary-on-light:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--secondary:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, #fff);background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, #243346)}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, #010913)}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,0.2)}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-background-color, #05203c)}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, #154679)}.bpk-button:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5);color:#c80456;color:var(--bpk-button-destructive-text-color, #c80456);background-color:#e0e3e5;background-color:var(--bpk-button-destructive-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, #c80456)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, #fff);background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, #0062e3)}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, #024daf)}.bpk-button--featured:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,0.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255,255,255,0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, #161616);background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, #fff)}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-active-background-color, #c2c9cd)}.bpk-button--primary-on-dark:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, #05203c)}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, #154679)}.bpk-button--primary-on-light:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--secondary:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, #fff);background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, #243346)}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, #010913)}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,0.2)}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}

package/bpk-component-card/src/BpkCard.js

@@ -45,18 +45,14 @@ const BpkCard = ({
       atomicProps.tabIndex = -1;
       atomicProps.role = 'group';
     }
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx("a", {
-        href: href,
-        className: classNames,
-        ...atomicProps,
-        ...blankProps,
-        ...rest,
-        children: children
-      })
-    );
+    return /*#__PURE__*/_jsx("a", {
+      href: href,
+      className: classNames,
+      ...atomicProps,
+      ...blankProps,
+      ...rest,
+      children: children
+    });
   }
   if (atomic) {
     return /*#__PURE__*/_jsx("button", {
@@ -66,14 +62,10 @@ const BpkCard = ({
       children: children
     });
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("div", {
-      className: classNames,
-      ...rest,
-      children: children
-    })
-  );
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkCard;

package/bpk-component-card/src/BpkDividedCard.js

@@ -37,22 +37,18 @@ const BpkDividedCard = ({
 }) => {
   const isVertical = orientation === ORIENTATION.vertical;
   const classNames = getClassName('bpk-divided-card', isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal', !isElevated && 'bpk-divided-card--no-elevation', className);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs(BpkCard, {
-      className: classNames,
-      href: href,
-      padded: false,
-      ...rest,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
-        children: primaryContent
-      }), /*#__PURE__*/_jsx("div", {
-        className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
-        children: secondaryContent
-      })]
-    })
-  );
+  return /*#__PURE__*/_jsxs(BpkCard, {
+    className: classNames,
+    href: href,
+    padded: false,
+    ...rest,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
+      children: primaryContent
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
+      children: secondaryContent
+    })]
+  });
 };
 export default BpkDividedCard;

package/bpk-component-datatable/src/BpkDataTable.js

@@ -21,7 +21,7 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkDataTable.module.css";
 import { SORT_DIRECTION_TYPES } from "./sort-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
-import { pxToRem, getColumns } from "./utils";
+import { pxToRem, getColumns, createColumnsSchema } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -33,6 +33,7 @@ const BpkDataTable = props => {
   const {
     children,
     className,
+    columns: columnsData,
     defaultColumnSortIndex,
     headerClassName,
     headerHeight,
@@ -41,7 +42,7 @@ const BpkDataTable = props => {
     rowClassName,
     rowHeight,
     rowStyle,
-    rows: data,
+    rows: rowsData,
     sort,
     sortBy,
     sortDirection,
@@ -57,7 +58,13 @@ const BpkDataTable = props => {
     return rowClassNames;
   };
   const headerClassNames = getClassName('bpk-data-table__row', 'bpk-data-table__header-row', headerClassName);
-  const columns = useMemo(() => getColumns(children), [children]);
+  const columns = useMemo(() => {
+    if (columnsData) {
+      return createColumnsSchema(columnsData);
+    }
+    return getColumns(children);
+  }, [children, columnsData]);
+  const data = useMemo(() => rowsData, [rowsData]);
   const {
     getTableBodyProps,
     getTableProps,

package/bpk-component-datatable/src/BpkDataTableColumn.js

@@ -25,7 +25,7 @@ const BpkDataTableColumn = props => /*#__PURE__*/_jsx("div", {
 });
 BpkDataTableColumn.propTypes = {
   dataKey: PropTypes.string.isRequired,
-  width: PropTypes.number.isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   className: PropTypes.string,
   disableSort: PropTypes.bool,
   defaultSortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),

package/bpk-component-datatable/src/utils.js

@@ -15,6 +15,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */const ROOT_FONT_SIZE_PX = 16;
+
+/**
+ * 
+ * @param {String|Number} value width or height of data table or its columns, or rows
+ * @returns {String} the value in rem
+ */
 export const pxToRem = value => {
   let parsed = value;
   if (typeof value === 'number' || typeof value === 'string' && value.includes('px')) {
@@ -23,90 +29,179 @@ export const pxToRem = value => {
   }
   return parsed;
 };
-// TODO: Remove this function once we want to change the API to match the react-table library API
-// To maintain backwards compatibility with the old API of BpkDataTable which takes columns as children
-// The `react-table` library however expects columns as an array of objects
 
-export const getColumns = columns => columns.map(column => {
-  const {
-    cellDataGetter,
-    cellRenderer,
-    headerRenderer
-  } = column.props;
-  // To maintain backwards compatibility with the old API of BpkDataTable we rename the parameters
-  // And create an interface so that the function signature doesn't depend on the underlying library
-  const columnCellRenderer = ({
-    column: {
-      id: dataKey
-    },
-    columns: columnsData,
-    row: {
-      id: rowID,
-      values: rowData
-    },
-    sortedRows,
-    value: cellData
-  }) => {
-    const columnIndex = columnsData.map(col => col.id).indexOf(dataKey);
-    const rowIndex = sortedRows.map(row => row.id).indexOf(rowID);
-    return cellRenderer({
-      cellData,
-      columnIndex,
+/**
+ * TODO: Remove this function once BpkDataTableColumns is removed
+ * This function takes the children of BpkDataTableColumns and converts them to an array of objects
+ * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+ * 
+ * @param {Array} columns the BpkDataTableColumns children
+ * @returns {Array} An array of column objects that can be passed to the react-table library
+ */
+export const getColumns = columns => {
+  console.warn('BpkDataTableColumns is deprecated. Please pass an array of objects to the columns prop instead.');
+  let columnsArray = [];
+  if (!columns) return columnsArray;
+  columnsArray = columns.map(column => {
+    const {
+      cellDataGetter,
+      cellRenderer,
+      headerRenderer
+    } = column.props;
+
+    /**
+     * TODO: Remove this function once BpkDataTableColumns is removed
+     * This function takes the react-table column and row data and returns the cell data
+     * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+     * and create an interface so that the function signature doesn't depend on the underlying library
+     * 
+     * @param {Object} Object containing the react-table column and row data 
+     * @returns {Node} JSX to render in the cell
+     */
+    const columnCellRenderer = ({
+      column: {
+        id: dataKey
+      },
+      columns: columnsData,
+      row: {
+        id: rowID,
+        values: rowData
+      },
+      sortedRows,
+      value: cellData
+    }) => {
+      const columnIndex = columnsData.map(col => col.id).indexOf(dataKey);
+      const rowIndex = sortedRows.map(row => row.id).indexOf(rowID);
+      return cellRenderer({
+        cellData,
+        columnIndex,
+        dataKey,
+        rowData,
+        rowIndex
+      });
+    };
+
+    /**
+     * TODO: Remove this function once BpkDataTableColumns is removed
+     * This function takes the react-table column and row data and returns the cell data
+     * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+     * and create an interface so that the function signature doesn't depend on the underlying library
+     * 
+     * @param {Object} Object containing the react-table column and row data 
+     * @returns {Node} JSX to render in the cell
+     */
+    const columnCellDataGetter = ({
+      column: {
+        id: dataKey
+      },
+      row: {
+        values: rowData
+      }
+    }) => cellDataGetter({
       dataKey,
-      rowData,
-      rowIndex
+      rowData
     });
-  };
-  const columnCellDataGetter = ({
-    column: {
-      id: dataKey
-    },
-    row: {
-      values: rowData
-    }
-  }) => cellDataGetter({
-    dataKey,
-    rowData
-  });
-  const columnHeaderRenderer = ({
-    column: {
+
+    /**
+     * TODO: Remove this function once BpkDataTableColumns is removed
+     * This function takes the react-table column data and returns the header data
+     * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+     * and create an interface so that the function signature doesn't depend on the underlying library
+     * 
+     * @param {Object} Object containing the react-table column data 
+     * @returns {Node} JSX to render in the header
+     */
+    const columnHeaderRenderer = ({
+      column: {
+        disableSortBy: disableSort,
+        id: dataKey,
+        label
+      }
+    }) => headerRenderer({
+      dataKey,
+      label,
+      disableSort
+    });
+    const {
+      className,
+      dataKey,
+      defaultSortDirection,
+      disableSort,
+      flexGrow,
+      headerClassName,
+      headerStyle,
+      label,
+      minWidth,
+      style,
+      width
+    } = column.props;
+    return {
+      Header: headerRenderer ? columnHeaderRenderer : label,
+      accessor: dataKey,
+      ...((cellRenderer || cellDataGetter) && {
+        Cell: columnCellRenderer || columnCellDataGetter
+      }),
+      className,
       disableSortBy: disableSort,
-      id: dataKey,
-      label
-    }
-  }) => headerRenderer({
-    dataKey,
-    label,
-    disableSort
+      defaultSortDirection,
+      flexGrow,
+      headerClassName,
+      headerStyle,
+      label,
+      minWidth: pxToRem(minWidth),
+      style,
+      width: pxToRem(width)
+    };
+  });
+  return columnsArray;
+};
+
+/**
+ * 
+ * @param {Array} columns Array of column objects
+ * @returns {Array} An array of column objects that can be passed to the react-table library
+ * This function abstract the Cell and Header of the react-table API 
+ */
+export const createColumnsSchema = columns => {
+  let columnsArray = [];
+  if (!columns) return columnsArray;
+  columnsArray = columns.map(column => {
+    const Cell = ({
+      column: {
+        id: accessor
+      },
+      columns: columnsData,
+      row: {
+        id: rowID,
+        values: rowData
+      },
+      sortedRows,
+      value: cellData
+    }) => column.Cell({
+      rowData,
+      rowIndex: sortedRows.map(row => row.id).indexOf(rowID),
+      accessor,
+      columnIndex: columnsData.map(col => col.id).indexOf(accessor),
+      cellData
+    });
+    const Header = ({
+      column: {
+        disableSortBy: disableSort,
+        id: accessor,
+        label
+      }
+    }) => column.Header({
+      label,
+      disableSort,
+      accessor
+    });
+    return {
+      ...column,
+      ...(column.Cell && {
+        Cell
+      }),
+      Header: column.Header && typeof column.Header === 'function' ? Header : column.label
+    };
   });
-  const {
-    className,
-    dataKey,
-    defaultSortDirection,
-    disableSort,
-    flexGrow,
-    headerClassName,
-    headerStyle,
-    label,
-    minWidth,
-    style,
-    width
-  } = column.props;
-  return {
-    Header: headerRenderer ? columnHeaderRenderer : label,
-    accessor: dataKey,
-    ...((cellRenderer || cellDataGetter) && {
-      Cell: columnCellRenderer || columnCellDataGetter
-    }),
-    className,
-    disableSortBy: disableSort,
-    defaultSortDirection,
-    flexGrow,
-    headerClassName,
-    headerStyle,
-    label,
-    minWidth: pxToRem(minWidth),
-    style,
-    width: pxToRem(width)
-  };
-});
+  return columnsArray;
+};

package/bpk-component-input/src/BpkClearButton.js

@@ -34,22 +34,18 @@ const BpkClearButton = ({
   if (className) {
     classNames.push(className);
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("button", {
-      type: "button",
-      title: label,
-      onClick: onClick,
-      "aria-label": label,
-      className: classNames.join(' '),
-      ...rest,
-      children: /*#__PURE__*/_jsx(ClearButtonIcon, {
-        focusable: "false" // prevents focus on IE11
-        ,
-        className: getClassName('bpk-clear-button__icon')
-      })
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    title: label,
+    onClick: onClick,
+    "aria-label": label,
+    className: classNames.join(' '),
+    ...rest,
+    children: /*#__PURE__*/_jsx(ClearButtonIcon, {
+      focusable: "false" // prevents focus on IE11
+      ,
+      className: getClassName('bpk-clear-button__icon')
     })
-  );
+  });
 };
 export default BpkClearButton;

package/bpk-component-input/src/BpkInput.js

@@ -95,10 +95,7 @@ class BpkInput extends Component {
         classNames.push(className);
       }
     }
-    const renderedInput =
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("input", {
+    const renderedInput = /*#__PURE__*/_jsx("input", {
       className: classNames.join(' '),
       ref: input => {
         ref = input;

package/bpk-component-overlay/index.d.ts

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkOverlay, {
   OVERLAY_TYPES,

package/bpk-component-overlay/index.js

@@ -14,6 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkOverlay, { OVERLAY_TYPES } from "./src/BpkOverlay";
+ */
+
+import BpkOverlay, { OVERLAY_TYPES } from "./src/BpkOverlay";
 export default BpkOverlay;
 export { OVERLAY_TYPES };

package/bpk-mixins/src/mixins/_buttons.scss

@@ -389,7 +389,6 @@
   $vertical-padding: $bpk-one-pixel-rem * 6;
   $vertical-padding-large: $bpk-one-pixel-rem * 12;
 
-  border-radius: 0;
   background: none; /* stylelint-disable-line order/order, order/properties-order */
   box-shadow: none;
 

package/bpk-mixins/src/mixins/_utils.scss

@@ -20,6 +20,20 @@
 /// @group utils
 ////
 
+/// Standard focus indicator for elements.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-focus-indicator();
+///   }
+
+@mixin bpk-focus-indicator {
+  outline: ($bpk-one-pixel-rem * 2) solid $bpk-text-link-day !important; /* stylelint-disable-line declaration-no-important */
+  outline-offset: (
+    $bpk-one-pixel-rem * 2
+  ) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /// Hide visually and from screen readers.
 ///
 /// @example scss

package/bpk-stylesheets/base.css

@@ -16,5 +16,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}:global(body.scaffold-font-size){font-size:13px}:global(body.enable-font-smoothing){-webkit-font-smoothing:antialiased}:global(.hidden),:global(.hide){display:none !important}:global(.visuallyhidden),:global(.visually-hidden){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}:global(.visuallyhidden.focusable):active,:global(.visuallyhidden.focusable):focus,:global(.visually-hidden.focusable):active,:global(.visually-hidden.focusable):focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}:global(.invisible){visibility:hidden}:global(.clearfix)::before,:global(.clearfix)::after{content:'';display:table}:global(.clearfix)::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}:global(body.scaffold-font-size){font-size:13px}:global(body.enable-font-smoothing){-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3 !important;outline-offset:.125rem !important}:global(.hidden),:global(.hide){display:none !important}:global(.visuallyhidden),:global(.visually-hidden){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}:global(.visuallyhidden.focusable):active,:global(.visuallyhidden.focusable):focus,:global(.visually-hidden.focusable):active,:global(.visually-hidden.focusable):focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}:global(.invisible){visibility:hidden}:global(.clearfix)::before,:global(.clearfix)::after{content:'';display:table}:global(.clearfix)::after{clear:both}
 

package/bpk-stylesheets/index.scss

@@ -50,6 +50,10 @@ body {
   }
 }
 
+:focus-visible {
+  @include bpk-focus-indicator;
+}
+
 :global(.hidden),
 :global(.hide) {
   @include bpk-hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "29.3.0",
+  "version": "29.4.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
     "react-responsive": "^9.0.2",
-    "react-slider": "^1.3.1",
+    "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^2.5.3",
     "react-virtualized-auto-sizer": "^1.0.20",