@skyscanner/backpack-web 42.19.1 → 42.19.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.d.ts +1 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css +1 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.d.ts +1 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.js +6 -3
- package/bpk-component-layout/src/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
declare const BpkCheckboxV2: {
|
|
2
|
-
Root: (
|
|
2
|
+
Root: import("react").ForwardRefExoticComponent<import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
3
3
|
Control: ({ children }: import("./BpkCheckboxV2Control").BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
Indicator: () => null;
|
|
5
5
|
Label: ({ children }: import("./BpkCheckboxV2Label").BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;
|
|
18
|
+
.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2:has(.bpk-checkbox-v2__hidden-input:focus-visible) .bpk-checkbox-v2__control{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}
|
|
@@ -13,5 +13,5 @@ export type BpkCheckboxV2RootProps = {
|
|
|
13
13
|
required?: boolean;
|
|
14
14
|
value?: string;
|
|
15
15
|
};
|
|
16
|
-
declare const BpkCheckboxV2Root: (
|
|
16
|
+
declare const BpkCheckboxV2Root: import("react").ForwardRefExoticComponent<BpkCheckboxV2RootProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
17
17
|
export default BpkCheckboxV2Root;
|
|
@@ -16,12 +16,13 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
+
import { forwardRef } from 'react';
|
|
19
20
|
import { Checkbox } from '@ark-ui/react';
|
|
20
21
|
import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
|
|
21
22
|
import STYLES from "./BpkCheckboxV2.module.css";
|
|
22
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
24
|
const getClassName = cssModules(STYLES);
|
|
24
|
-
const BpkCheckboxV2Root = ({
|
|
25
|
+
const BpkCheckboxV2Root = /*#__PURE__*/forwardRef(({
|
|
25
26
|
checked,
|
|
26
27
|
children,
|
|
27
28
|
'data-testid': dataTestId,
|
|
@@ -33,7 +34,8 @@ const BpkCheckboxV2Root = ({
|
|
|
33
34
|
onCheckedChange,
|
|
34
35
|
required = false,
|
|
35
36
|
value
|
|
36
|
-
}) => /*#__PURE__*/_jsx(Checkbox.Root, {
|
|
37
|
+
}, ref) => /*#__PURE__*/_jsx(Checkbox.Root, {
|
|
38
|
+
ref: ref,
|
|
37
39
|
className: getClassName('bpk-checkbox-v2'),
|
|
38
40
|
checked: checked,
|
|
39
41
|
"data-testid": dataTestId,
|
|
@@ -47,5 +49,6 @@ const BpkCheckboxV2Root = ({
|
|
|
47
49
|
value: value,
|
|
48
50
|
...getDataComponentAttribute('CheckboxV2'),
|
|
49
51
|
children: children
|
|
50
|
-
});
|
|
52
|
+
}));
|
|
53
|
+
BpkCheckboxV2Root.displayName = 'BpkCheckboxV2Root';
|
|
51
54
|
export default BpkCheckboxV2Root;
|