@skyscanner/backpack-web 31.10.1 → 32.0.0

package/bpk-component-checkbox/src/BpkCheckbox.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-checkbox{position:relative;display:inline-block;padding-left:1.75rem;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}html[dir='rtl'] .bpk-checkbox{padding-right:1.75rem;padding-left:0}.bpk-checkbox__label{vertical-align:baseline}.bpk-checkbox__label--small{margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-checkbox--white{color:#fff}.bpk-checkbox--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-checkbox--disabled--white{color:rgba(255,255,255,0.5)}.bpk-checkbox--invalid input[type='checkbox']{border:.1875rem solid #e70866}.bpk-checkbox__input{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.1875rem solid #545860;border-radius:.25rem;cursor:pointer;vertical-align:text-bottom;appearance:none}html[dir='rtl'] .bpk-checkbox__input{right:0;left:auto}@media screen\0 {.bpk-checkbox__input{background:none !important}}.bpk-checkbox__input:checked,.bpk-checkbox__input:indeterminate{background-color:#0062e3;background-color:var(--bpk-checkbox-checked-color, #0062e3);border-color:#0062e3;border-color:var(--bpk-checkbox-checked-color, #0062e3)}.bpk-checkbox__input:checked:disabled,.bpk-checkbox__input:indeterminate:disabled{border-color:rgba(0,0,0,0.2);background:none}.bpk-checkbox__input:checked:not(:indeterminate)::before,.bpk-checkbox__input:checked:not(:indeterminate)::after{position:absolute;content:'';transform:rotate(45deg);border-radius:2px;background-color:#fff}.bpk-checkbox__input:checked:not(:indeterminate)::before{top:0.4375rem;left:0;width:.5rem;height:0.1875rem}.bpk-checkbox__input:checked:not(:indeterminate)::after{top:0.125rem;left:0.4375rem;width:0.1875rem;height:0.6875rem}.bpk-checkbox__input:checked:not(:indeterminate):disabled::before,.bpk-checkbox__input:checked:not(:indeterminate):disabled::after{background-color:rgba(0,0,0,0.2)}.bpk-checkbox__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-checkbox__input-indeterminate::before{position:absolute;top:0.3125rem;left:0.125rem;content:'';width:.625rem;height:0.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox__input:disabled{cursor:inherit}.bpk-checkbox__input-white{background-color:#fff}.bpk-checkbox__asterisk{color:#e70866}
+ */
+.bpk-checkbox{position:relative;display:inline-block;padding-left:1.75rem;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}html[dir=rtl] .bpk-checkbox{padding-right:1.75rem;padding-left:0}.bpk-checkbox__label{vertical-align:baseline}.bpk-checkbox__label--small{margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-checkbox--white{color:#fff}.bpk-checkbox--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-checkbox--disabled--white{color:rgba(255,255,255,.5)}.bpk-checkbox--invalid input[type=checkbox]{border:.1875rem solid #e70866}.bpk-checkbox__input{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.1875rem solid #626971;border-radius:.25rem;cursor:pointer;vertical-align:text-bottom;appearance:none}html[dir=rtl] .bpk-checkbox__input{right:0;left:auto}@media screen\0 {.bpk-checkbox__input{background:none !important}}.bpk-checkbox__input:checked,.bpk-checkbox__input:indeterminate{background-color:#0062e3;background-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227))}.bpk-checkbox__input:checked:disabled,.bpk-checkbox__input:indeterminate:disabled{border-color:rgba(0,0,0,.2);background:none}.bpk-checkbox__input:checked:not(:indeterminate)::before,.bpk-checkbox__input:checked:not(:indeterminate)::after{position:absolute;content:"";transform:rotate(45deg);border-radius:2px;background-color:#fff}.bpk-checkbox__input:checked:not(:indeterminate)::before{top:.4375rem;left:0;width:.5rem;height:.1875rem}.bpk-checkbox__input:checked:not(:indeterminate)::after{top:.125rem;left:.4375rem;width:.1875rem;height:.6875rem}.bpk-checkbox__input:checked:not(:indeterminate):disabled::before,.bpk-checkbox__input:checked:not(:indeterminate):disabled::after{background-color:rgba(0,0,0,.2)}.bpk-checkbox__input:disabled{border-color:rgba(0,0,0,.2)}.bpk-checkbox__input-indeterminate::before{position:absolute;top:.3125rem;left:.125rem;content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox__input:disabled{cursor:inherit}.bpk-checkbox__input-white{background-color:#fff}.bpk-checkbox__asterisk{color:#e70866}

package/bpk-component-chip/src/BpkSelectableChip.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir='rtl'] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-.5rem}html[dir='rtl'] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir='rtl'] .bpk-chip__trailing-accessory-view{margin-left:-.5rem}.bpk-chip--on-dark{background-color:transparent;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, #161616);background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, #fff);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#545860}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:transparent;color:#161616;box-shadow:0 0 0 1px #c2c9cd inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, #fff);background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, #05203c);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,0.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff1f2}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff1f2}.bpk-chip--on-image:active:not(:disabled){background-color:#eff1f2}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, #fff);background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, #05203c)}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, #05203c)}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, #05203c)}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, #05203c)}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,0.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}.bpk-chip--disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2);cursor:not-allowed}
+ */
+.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}

package/bpk-component-close-button/src/BpkCloseButton.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-.125rem;margin-left:-.125rem;padding:0;border:0;background-color:transparent;color:#545860;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc((-2.75rem / 2) + 50%);left:calc((-2.75rem / 2) + 50%);content:'';width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button:active{color:#161616}.bpk-close-button__icon{vertical-align:-.125rem;fill:currentcolor}
+ */
+.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-0.125rem;margin-left:-0.125rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button:active{color:#161616}.bpk-close-button__icon{vertical-align:-0.125rem;fill:currentcolor}

package/bpk-component-code/src/BpkCode.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-code{display:inline;padding:0 0.25rem;background-color:#e0e3e5;color:#161616;text-align:left;white-space:nowrap;vertical-align:bottom;border-radius:.25rem}html[dir='rtl'] .bpk-code{direction:ltr}.bpk-code--alternate{background-color:#eff1f2;text-shadow:none}
+ */
+.bpk-code{display:inline;padding:0 .25rem;background-color:#e0e4e9;color:#161616;text-align:left;white-space:nowrap;vertical-align:bottom;border-radius:.25rem}html[dir=rtl] .bpk-code{direction:ltr}.bpk-code--alternate{background-color:#eff3f8;text-shadow:none}

package/bpk-component-code/src/BpkCodeBlock.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-code--block{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-code--block::-webkit-scrollbar{display:none}.bpk-code__pre{margin:0 0 1rem;padding:1.5rem;background-color:#e0e3e5;border-radius:.25rem}.bpk-code__pre--alternate{background-color:transparent;box-shadow:0 0 0 1px #c2c9cd inset}
+ */
+.bpk-code--block{display:block;margin:0;padding:0;background-color:rgba(0,0,0,0);white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-code--block::-webkit-scrollbar{display:none}.bpk-code__pre{margin:0 0 1rem;padding:1.5rem;background-color:#e0e4e9;border-radius:.25rem}.bpk-code__pre--alternate{background-color:rgba(0,0,0,0);box-shadow:0 0 0 1px #c1c7cf inset}

package/bpk-component-content-cards/src/BpkContentCard.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-card--link{color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media (max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media (max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media (max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media (max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media (max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:0.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#545860;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover}
+ */
+.bpk-content-card--link{color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media(max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media(max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media(max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media(max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media(max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#626971;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover}

package/bpk-component-content-cards/src/BpkContentCards.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-cards--header-text{margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media (max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}}
+ */
+.bpk-content-cards--header-text{margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media(max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}}

package/bpk-component-datatable/index.js

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import BpkDataTable from "./src/BpkDataTable";
-import BpkDataTableColumn from "./src/BpkDataTableColumn";
-export { BpkDataTable, BpkDataTableColumn };
+export { BpkDataTable };
+export default BpkDataTable;

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

@@ -14,14 +14,16 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { useMemo, useState } from 'react';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { useTable, useSortBy } from 'react-table';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkDataTable.module.css";
-import { SORT_DIRECTION_TYPES } from "./sort-types";
+import { SORT_DIRECTION_TYPES } from "./common-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
-import { pxToRem, getColumns, createColumnsSchema } from "./utils";
+import { createColumnsSchema } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -31,39 +33,37 @@ const KEYCODES = {
 };
 const BpkDataTable = props => {
   const {
-    children,
-    className,
+    className = null,
     columns: columnsData,
-    defaultColumnSortIndex,
+    defaultColumnSortIndex = 0,
     headerClassName,
-    headerHeight,
+    headerHeight = '3.75rem',
     height,
     onRowClick,
     rowClassName,
-    rowHeight,
+    rowHeight = '3.75rem',
     rowStyle,
     rows: rowsData,
-    sort,
-    sortBy,
-    sortDirection,
+    sort = null,
+    sortBy = null,
+    sortDirection = SORT_DIRECTION_TYPES.ASC,
     width,
     ...restOfProps
   } = props;
   const [rowSelected, updateRowSelected] = useState(undefined);
   const classNames = getClassName('bpk-data-table', className);
-  const getRowClassNames = (consumerClassName, index) => {
+  const getRowClassNames = (index, consumerClassName) => {
     const rowClassNames = getClassName('bpk-data-table__row', rowSelected === index && 'bpk-data-table__row--selected', onRowClick !== undefined && 'bpk-data-table__row--clickable', index === -1 && 'bpk-data-table__header-row', consumerClassName && (typeof consumerClassName === 'function' ? consumerClassName({
       index
     }) : consumerClassName));
     return rowClassNames;
   };
   const headerClassNames = getClassName('bpk-data-table__row', 'bpk-data-table__header-row', headerClassName);
-  const columns = useMemo(() => {
-    if (columnsData) {
-      return createColumnsSchema(columnsData);
-    }
-    return getColumns(children);
-  }, [children, columnsData]);
+
+  /**
+   * Call createColumnsSchema to modify the columns data to match the API expected by the hooks of the react-table library.
+   */
+  const columns = useMemo(() => createColumnsSchema(columnsData), [columnsData]);
   const data = useMemo(() => rowsData, [rowsData]);
   const {
     getTableBodyProps,
@@ -82,16 +82,16 @@ const BpkDataTable = props => {
     }
   }, useSortBy);
   const onRowClicked = index => {
-    if (rowSelected === index) {
-      updateRowSelected(undefined);
-    } else {
-      updateRowSelected(index);
-    }
     if (onRowClick !== undefined) {
+      if (rowSelected === index) {
+        updateRowSelected(undefined);
+      } else {
+        updateRowSelected(index);
+      }
       onRowClick(rows[index].original);
     }
   };
-  const handleKeyboardEvent = (event, i) => {
+  const handleRowKeyboardEvent = (event, i) => {
     if (event.keyCode === KEYCODES.ENTER || event.keyCode === KEYCODES.SPACEBAR) {
       event.preventDefault();
       onRowClicked(i);
@@ -100,8 +100,8 @@ const BpkDataTable = props => {
   return /*#__PURE__*/_jsxs("div", {
     ...getTableProps({
       style: {
-        width: pxToRem(width),
-        height: pxToRem(height)
+        width,
+        height
       },
       className: classNames
     }),
@@ -110,14 +110,21 @@ const BpkDataTable = props => {
       children: headerGroups.map(headerGroup => /*#__PURE__*/_jsx("div", {
         ...headerGroup.getHeaderGroupProps({
           style: {
-            height: pxToRem(headerHeight)
+            height: headerHeight
           },
           className: headerClassNames
         }),
         children: headerGroup.headers.map(column => {
+          // if consumer passes a custom sort function for a specific column (using sortBy to specify the column id),
+          // we need to pass them to react-table by setting the sortType and sortDirection properties on the column              
           if (sort && sortBy) {
             if (column.id === sortBy) {
-              column.sortType = sort; // eslint-disable-line no-param-reassign
+              if (typeof sort === 'function') {
+                // abstract the sort function to be used by react-table as consumers don't need to be aware of more data than the row values.
+                column.sortType = (rowA, rowB, columnID, desc) => sort(rowA?.values, rowB?.values, columnID, desc); // eslint-disable-line no-param-reassign
+              } else {
+                column.sortType = sort; // eslint-disable-line no-param-reassign
+              }
               column.sortDirection = sortDirection; // eslint-disable-line no-param-reassign
             }
           }
@@ -134,14 +141,14 @@ const BpkDataTable = props => {
         return /*#__PURE__*/_jsx("div", {
           onClick: () => onRowClicked(i),
           role: "button",
-          onKeyDown: event => handleKeyboardEvent(event, i),
+          onKeyDown: event => handleRowKeyboardEvent(event, i),
           tabIndex: 0,
           ...row.getRowProps({
             style: {
               ...rowStyle,
-              height: pxToRem(rowHeight)
+              height: rowHeight
             },
-            className: getRowClassNames(rowClassName, i)
+            className: getRowClassNames(i, rowClassName)
           }),
           children: row.cells.map(cell => {
             if (cell.column.className) {
@@ -164,76 +171,4 @@ const BpkDataTable = props => {
     })]
   });
 };
-BpkDataTable.propTypes = {
-  rows: PropTypes.arrayOf(Object).isRequired,
-  /**
-   * @deprecated Use the columns prop instead to pass the columns to the BpkDataTable component.
-   */
-  children: PropTypes.node,
-  /**
-   * Array of objects describing the columns of the table.
-   * Note: Header and Cell props are functions to format the header and cell data respectively and should implement the following signatures:
-   * ```Header: function({disableSortBy, accessor, label})```,
-   * ```Cell: function({rowData, rowIndex, accessor, columnIndex, cellData})```
-   */
-  columns: PropTypes.arrayOf(PropTypes.shape({
-    accessor: PropTypes.string.isRequired,
-    Header: PropTypes.func,
-    disableSortBy: PropTypes.bool,
-    width: PropTypes.string,
-    minWidth: PropTypes.string,
-    flexGrow: PropTypes.number,
-    className: PropTypes.string,
-    headerClassName: PropTypes.string,
-    headerStyle: {},
-    Cell: PropTypes.func,
-    label: PropTypes.string,
-    style: {},
-    defaultSortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES))
-  })),
-  /**
-   * Table height. Please provide this value in rem.
-   */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * Table width. Please provide this value in rem.
-   * If not provided, the table will expand to fill the available space.
-   */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Height of the header row. Please provide this value in rem.
-   */
-  headerHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Height of each row. Please provide this value in rem.
-   */
-  rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  /**
-   * The data will be sorted by default based on this column.
-   */
-  defaultColumnSortIndex: PropTypes.number,
-  /**
-   * For custom sorting, pass a sort function.
-   */
-  sort: PropTypes.func,
-  /**
-   * Use sortBy to specify which column the custom sorting will be applied to.
-   */
-  sortBy: PropTypes.string,
-  /**
-   * Use sortDirection to set the direction of sorting. By default, it will be ascending.
-   */
-  sortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES))
-};
-BpkDataTable.defaultProps = {
-  width: null,
-  headerHeight: '3.75rem',
-  rowHeight: '3.75rem',
-  className: null,
-  defaultColumnSortIndex: 0,
-  sort: null,
-  sortBy: null,
-  sortDirection: SORT_DIRECTION_TYPES.ASC
-};
 export default BpkDataTable;

package/bpk-component-datatable/src/BpkDataTable.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-data-table{width:100%}.bpk-data-table__header-row{overflow:hidden}.bpk-data-table__row{display:flex;flex-direction:row;align-items:center;border:1px solid #c2c9cd;border-bottom:none;outline-offset:-.25rem;color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-data-table__row:last-child:not(.bpk-data-table__header-row){border-bottom:1px solid #c2c9cd}.bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{background-color:#eff1f2;cursor:pointer;box-shadow:6px 0 0 0 #0062e3 inset}html[dir='rtl'] .bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{box-shadow:-6px 0 0 0 #0062e3 inset}.bpk-data-table__row--selected{background-color:#fff7cf;box-shadow:6px 0 0 0 #0062e3 inset}html[dir='rtl'] .bpk-data-table__row--selected{box-shadow:-6px 0 0 0 #0062e3 inset}.bpk-data-table__cell{margin:1rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
+ */
+.bpk-data-table{width:100%}.bpk-data-table__header-row{overflow:hidden}.bpk-data-table__row{display:flex;flex-direction:row;align-items:center;border:1px solid #c1c7cf;border-bottom:none;outline-offset:-0.25rem;color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-data-table__row:last-child:not(.bpk-data-table__header-row){border-bottom:1px solid #c1c7cf}.bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{background-color:#eff3f8;cursor:pointer;box-shadow:6px 0 0 0 #0062e3 inset}html[dir=rtl] .bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{box-shadow:-6px 0 0 0 #0062e3 inset}.bpk-data-table__row--selected{background-color:#fff7cf;box-shadow:6px 0 0 0 #0062e3 inset}html[dir=rtl] .bpk-data-table__row--selected{box-shadow:-6px 0 0 0 #0062e3 inset}.bpk-data-table__cell{margin:1rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

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

@@ -14,12 +14,16 @@
  * 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 { cssModules } from "../../bpk-react-utils";
+ */
+
+import { cssModules } from "../../bpk-react-utils";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSmallArrowDownIcon from "../../bpk-component-icon/sm/arrow-down";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSmallArrowUpIcon from "../../bpk-component-icon/sm/arrow-up";
 import { withRtlSupport } from "../../bpk-component-icon";
-import { SORT_DIRECTION_TYPES } from "./sort-types";
 import STYLES from "./BpkDataTableHeader.module.css";
+import { SORT_DIRECTION_TYPES } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
@@ -29,6 +33,11 @@ const KEYCODES = {
   ENTER: 13,
   SPACEBAR: 32
 };
+
+/**
+ * Internal component to render the header of a column.
+ * @returns {JSX.Element} data table header component
+ */
 const BpkDataTableHeader = ({
   column
 }) => {
@@ -45,6 +54,11 @@ const BpkDataTableHeader = ({
     sortDirection,
     width
   } = column;
+
+  /**
+   * Callback for when the header is clicked to sort the column unless disableSortBy is true.
+   * @returns {void}
+   */
   const onHeaderClick = () => {
     if (disableSortBy === true) {
       return;
@@ -61,6 +75,12 @@ const BpkDataTableHeader = ({
     }
     column.toggleSortBy(isDescending);
   };
+
+  /**
+   * Callback for handling keyboard events on the header to sort the column.
+   * @param {KeyboardEvent} event keyboard event on the header
+   * @returns {void}
+   */
   const handleKeyboardEvent = event => {
     if (event.keyCode === KEYCODES.ENTER || event.keyCode === KEYCODES.SPACEBAR) {
       event.preventDefault();

package/bpk-component-datatable/src/BpkDataTableHeader.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-data-table-column__header{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-0.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-data-table-column__header:hover{cursor:pointer}.bpk-data-table-column__sort-icons{margin:0 0 0 .75rem}html[dir='rtl'] .bpk-data-table-column__sort-icons{margin:0 .75rem 0 0}.bpk-data-table-column__sort-icon{display:block;fill:#c2c9cd}.bpk-data-table-column__sort-icon:hover{fill:#c2c9cd}.bpk-data-table-column__sort-icon--selected,.bpk-data-table-column__sort-icon--selected:hover{fill:#0062e3}.bpk-data-table-column__sort-icon--up{margin-bottom:-0.25rem}
+ */
+.bpk-data-table-column__header{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-0.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-data-table-column__header:hover{cursor:pointer}.bpk-data-table-column__sort-icons{margin:0 0 0 .75rem}html[dir=rtl] .bpk-data-table-column__sort-icons{margin:0 .75rem 0 0}.bpk-data-table-column__sort-icon{display:block;fill:#c1c7cf}.bpk-data-table-column__sort-icon:hover{fill:#c1c7cf}.bpk-data-table-column__sort-icon--selected,.bpk-data-table-column__sort-icon--selected:hover{fill:#0062e3}.bpk-data-table-column__sort-icon--up{margin-bottom:-0.25rem}

package/bpk-component-datatable/src/common-types.js

@@ -0,0 +1,22 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+export const SORT_DIRECTION_TYPES = {
+  ASC: 'ASC',
+  DESC: 'DESC'
+};

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

@@ -14,153 +14,14 @@
  * 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.
- */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')) {
-    console.warn("Height in px is deprecated. Please pass the equivalent value in rem.");
-    parsed = `${value / ROOT_FONT_SIZE_PX}rem`;
-  }
-  return parsed;
-};
-
-/**
- * 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
-    });
-
-    /**
-     * 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,
-      defaultSortDirection,
-      flexGrow,
-      headerClassName,
-      headerStyle,
-      label,
-      minWidth: pxToRem(minWidth),
-      style,
-      width: pxToRem(width)
-    };
-  });
-  return columnsArray;
-};
 
 /**
+ * This function abstracts the Cell and Header of the react-table API.
+ * The columns API defined in Backpack will therefore be independent of the react-table columns API which consumers don't need to be aware of.
+ * @param {Array} columns Array of column objects compatible with the API defined in Backpack
+ * @returns {Array} An array of column objects that can be directly passed to the hooks of the react-table library
  * 
- * @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 = [];
@@ -177,7 +38,9 @@ export const createColumnsSchema = columns => {
       },
       sortedRows,
       value: cellData
-    }) => column.Cell({
+    }) =>
+    // @ts-ignore Cell is called only when column has a Cell which we check below in the return statement
+    column.Cell({
       rowData,
       rowIndex: sortedRows.map(row => row.id).indexOf(rowID),
       accessor,
@@ -186,13 +49,15 @@ export const createColumnsSchema = columns => {
     });
     const Header = ({
       column: {
-        disableSortBy: disableSort,
+        disableSortBy,
         id: accessor,
         label
       }
-    }) => column.Header({
+    }) =>
+    // @ts-ignore Header is called only when column has a Header which we check below in the return statement
+    column.Header({
       label,
-      disableSort,
+      disableSortBy,
       accessor
     });
     return {
@@ -204,4 +69,5 @@ export const createColumnsSchema = columns => {
     };
   });
   return columnsArray;
-};
+};
+export default createColumnsSchema;

package/bpk-component-datepicker/src/BpkDatepicker.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%}
+ */
+.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%}

package/bpk-component-description-list/src/BpkDescriptionList.module.css

@@ -14,5 +14,5 @@
  * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-description-list{margin:0}.bpk-description-list__term{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-description-list__details{margin:0;margin-left:1.5rem}html[dir='rtl'] .bpk-description-list__details{margin-right:1.5rem;margin-left:0}
+ */
+.bpk-description-list{margin:0}.bpk-description-list__term{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-description-list__details{margin:0;margin-left:1.5rem}html[dir=rtl] .bpk-description-list__details{margin-right:1.5rem;margin-left:0}