@proprioo/salatim 18.6.2 → 19.3.1

package/lib/ui/src/card/icons/Dropdown.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var Dropdown = function () { return (react_1.default.createElement("svg", { fill: "none", height: "32", width: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M11.2 14.4l4.8 4.8 4.8-4.8z", fill: "#abb3ba" }))); };
+const react_1 = __importDefault(require("react"));
+const Dropdown = () => (react_1.default.createElement("svg", { fill: "none", height: "32", width: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M11.2 14.4l4.8 4.8 4.8-4.8z", fill: "#abb3ba" })));
 exports.default = Dropdown;
 //# sourceMappingURL=Dropdown.js.map

package/lib/ui/src/card/icons/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../../packages/ui/src/card/icons/Dropdown.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAE1B,IAAM,QAAQ,GAAG,cAAM,OAAA,CACrB,uCACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;IAElC,wCAAM,CAAC,EAAC,6BAA6B,EAAC,IAAI,EAAC,SAAS,GAAG,CACnD,CACP,EAVsB,CAUtB,CAAC;AAEF,kBAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../../packages/ui/src/card/icons/Dropdown.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,uCACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;IAElC,wCAAM,CAAC,EAAC,6BAA6B,EAAC,IAAI,EAAC,SAAS,GAAG,CACnD,CACP,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/lib/ui/src/card/icons/Dropup.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Dropup: () => JSX.Element;
 export default Dropup;

package/lib/ui/src/card/icons/Dropup.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var Dropup = function () { return (react_1.default.createElement("svg", { fill: "none", height: "32", width: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M11.2 17.6l4.8-4.8 4.8 4.8z", fill: "#ff4d00" }))); };
+const react_1 = __importDefault(require("react"));
+const Dropup = () => (react_1.default.createElement("svg", { fill: "none", height: "32", width: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M11.2 17.6l4.8-4.8 4.8 4.8z", fill: "#ff4d00" })));
 exports.default = Dropup;
 //# sourceMappingURL=Dropup.js.map

package/lib/ui/src/card/icons/Dropup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropup.js","sourceRoot":"","sources":["../../../../../packages/ui/src/card/icons/Dropup.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAE1B,IAAM,MAAM,GAAG,cAAM,OAAA,CACnB,uCACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;IAElC,wCAAM,CAAC,EAAC,6BAA6B,EAAC,IAAI,EAAC,SAAS,GAAG,CACnD,CACP,EAVoB,CAUpB,CAAC;AAEF,kBAAe,MAAM,CAAC"}
+{"version":3,"file":"Dropup.js","sourceRoot":"","sources":["../../../../../packages/ui/src/card/icons/Dropup.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,CACnB,uCACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;IAElC,wCAAM,CAAC,EAAC,6BAA6B,EAAC,IAAI,EAAC,SAAS,GAAG,CACnD,CACP,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/lib/ui/src/checkbox/Checkbox.d.ts

@@ -6,6 +6,7 @@ export interface CheckboxProps {
     disabled: boolean;
     name: string;
     dataTest?: string;
+    indeterminate?: boolean;
     onChange(checked: boolean): void;
 }
 declare const Checkbox: FC<CheckboxProps>;

package/lib/ui/src/checkbox/Checkbox.js

@@ -3,16 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var Checkbox_styles_1 = require("./Checkbox.styles");
-var Checkbox = function (_a) {
-    var label = _a.label, id = _a.id, checked = _a.checked, disabled = _a.disabled, onChange = _a.onChange, name = _a.name, dataTest = _a.dataTest;
-    var hash = id + "-" + name;
-    return (react_1.default.createElement(Checkbox_styles_1.Layout, { "data-test": dataTest || "checkbox-" + name },
-        react_1.default.createElement(Checkbox_styles_1.CheckboxLayout, { "data-test": dataTest ? "checkbox-" + dataTest : 'checkbox-input', type: "checkbox", id: hash, name: name, onChange: function (event) { return onChange(event.target.checked); }, checked: checked, disabled: disabled }),
-        react_1.default.createElement(Checkbox_styles_1.CheckboxLabelLayout, { "data-test": dataTest ? "checkbox-label-" + dataTest : 'checkbox-label', label: label, htmlFor: hash, dangerouslySetInnerHTML: {
+const react_1 = __importDefault(require("react"));
+const hokkaido_1 = require("@proprioo/hokkaido");
+const Checkbox_styles_1 = require("./Checkbox.styles");
+const Checkbox = ({ label, id, checked, children, disabled, indeterminate = false, onChange, name, dataTest }) => {
+    const hash = `${id}-${name}`;
+    return (react_1.default.createElement(Checkbox_styles_1.Layout, { "data-test": dataTest || `checkbox-${name}` },
+        react_1.default.createElement(Checkbox_styles_1.CheckboxLayout, Object.assign({ "data-test": dataTest ? `checkbox-${dataTest}` : 'checkbox-input', type: "checkbox", id: hash, indeterminate: indeterminate, name: name, onChange: event => onChange(event.target.checked), checked: checked, disabled: disabled }, (Boolean(children) && { 'aria-label': label }))),
+        react_1.default.createElement(Checkbox_styles_1.CheckboxLabelLayout, { "data-test": dataTest ? `checkbox-label-${dataTest}` : 'checkbox-label', hasLabel: (0, hokkaido_1.isNotEmpty)(label), htmlFor: hash }, children || (react_1.default.createElement(Checkbox_styles_1.StringLabel, { dangerouslySetInnerHTML: {
                 __html: label
-            } })));
+            } })))));
 };
 exports.default = Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/lib/ui/src/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAkC;AAElC,qDAAgF;AAYhF,IAAM,QAAQ,GAAsB,UAAC,EAQpC;QAPC,KAAK,WAAA,EACL,EAAE,QAAA,EACF,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,QAAQ,cAAA;IAER,IAAM,IAAI,GAAM,EAAE,SAAI,IAAM,CAAC;IAC7B,OAAO,CACL,8BAAC,wBAAM,iBAAY,QAAQ,IAAI,cAAY,IAAM;QAC/C,8BAAC,gCAAc,iBACF,QAAQ,CAAC,CAAC,CAAC,cAAY,QAAU,CAAC,CAAC,CAAC,gBAAgB,EAC/D,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAA9B,CAA8B,EACjD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB;QACF,8BAAC,qCAAmB,iBACP,QAAQ,CAAC,CAAC,CAAC,oBAAkB,QAAU,CAAC,CAAC,CAAC,gBAAgB,EACrE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,EACb,uBAAuB,EAAE;gBACvB,MAAM,EAAE,KAAK;aACd,GACD,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAkC;AAElC,iDAAgD;AAEhD,uDAK2B;AAa3B,MAAM,QAAQ,GAAsB,CAAC,EACnC,KAAK,EACL,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACT,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,GAAG,EAAE,IAAI,IAAI,EAAE,CAAC;IAE7B,OAAO,CACL,8BAAC,wBAAM,iBAAY,QAAQ,IAAI,YAAY,IAAI,EAAE;QAC/C,8BAAC,gCAAc,+BACF,QAAQ,CAAC,CAAC,CAAC,YAAY,QAAQ,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAC/D,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,EACR,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EACjD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IACd,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,EAClD;QACF,8BAAC,qCAAmB,iBACP,QAAQ,CAAC,CAAC,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC,CAAC,gBAAgB,EACrE,QAAQ,EAAE,IAAA,qBAAU,EAAC,KAAK,CAAC,EAC3B,OAAO,EAAE,IAAI,IAEZ,QAAQ,IAAI,CACX,8BAAC,6BAAW,IACV,uBAAuB,EAAE;gBACvB,MAAM,EAAE,KAAK;aACd,GACD,CACH,CACmB,CACf,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/lib/ui/src/checkbox/Checkbox.stories.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -33,58 +22,87 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var storybook_state_1 = require("@sambego/storybook-state");
-var addon_actions_1 = require("@storybook/addon-actions");
-var addon_knobs_1 = require("@storybook/addon-knobs");
-var react_2 = require("@storybook/react");
-var utils_1 = require("../../../utils");
-var Checkbox_1 = __importDefault(require("./Checkbox"));
-var checkboxState = new storybook_state_1.Store({
+const react_1 = __importStar(require("react"));
+const storybook_state_1 = require("@sambego/storybook-state");
+const addon_actions_1 = require("@storybook/addon-actions");
+const addon_knobs_1 = require("@storybook/addon-knobs");
+const react_2 = require("@storybook/react");
+const utils_1 = require("../../../utils");
+const Tag_1 = __importDefault(require("../tag/Tag"));
+const Checkbox_1 = __importDefault(require("./Checkbox"));
+const checkboxState = new storybook_state_1.Store({
     checked: false
 });
-var onChange = addon_actions_1.action('onChange');
-var defaultProps = {
+const indeterminateState = new storybook_state_1.Store({
+    checked1: false,
+    checked2: false
+});
+const onChange = (0, addon_actions_1.action)('onChange');
+const defaultProps = {
     id: 'id',
     label: 'Label',
     checked: false,
     disabled: false,
     name: 'testCheckbox',
-    onChange: onChange
+    onChange
 };
-react_2.storiesOf('Checkbox', module)
-    .add('Checkbox', function () {
-    var disabled = addon_knobs_1.boolean('Disabled', false);
-    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, function (state) { return (react_1.default.createElement(Checkbox_1.default, __assign({}, defaultProps, { dataTest: "testCheckbox", checked: state.checked, disabled: disabled, onChange: function (checked) {
-            checkboxState.set({ checked: checked });
-        } }))); }));
+(0, react_2.storiesOf)('Checkbox', module)
+    .add('Checkbox', () => {
+    const disabled = (0, addon_knobs_1.boolean)('Disabled', false);
+    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, state => (react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { dataTest: "testCheckbox", checked: state.checked, disabled: disabled, onChange: checked => {
+            checkboxState.set({ checked });
+        } })))));
 })
-    .add('Checkbox without label (no padding)', function () {
-    var style = {
+    .add('Checkbox without label (no padding)', () => {
+    const style = {
         maxWidth: '44px',
         background: utils_1.colors.green.base,
         padding: '10px'
     };
-    var disabled = addon_knobs_1.boolean('Disabled', false);
-    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, function (state) { return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(Checkbox_1.default, __assign({}, defaultProps, { label: "", checked: state.checked, disabled: disabled, onChange: function (checked) {
-                checkboxState.set({ checked: checked });
-            } })))); }));
+    const disabled = (0, addon_knobs_1.boolean)('Disabled', false);
+    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, state => (react_1.default.createElement("div", { style: style },
+        react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { label: "", checked: state.checked, disabled: disabled, onChange: checked => {
+                checkboxState.set({ checked });
+            } }))))));
 })
-    .add('Checkbox with html', function () {
-    var disabled = addon_knobs_1.boolean('Disabled', false);
-    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, function (state) { return (react_1.default.createElement(Checkbox_1.default, __assign({}, defaultProps, { label: "<strong>label</strong>", checked: state.checked, disabled: disabled, onChange: function (checked) {
-            checkboxState.set({ checked: checked });
-        } }))); }));
+    .add('Checkbox with html', () => {
+    const disabled = (0, addon_knobs_1.boolean)('Disabled', false);
+    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, state => (react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { label: "<strong>label</strong>", checked: state.checked, disabled: disabled, onChange: checked => {
+            checkboxState.set({ checked });
+        } })))));
+})
+    .add('Checkbox with custom component as label', () => {
+    const disabled = (0, addon_knobs_1.boolean)('Disabled', false);
+    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, state => (react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { checked: state.checked, disabled: disabled, onChange: checked => {
+            checkboxState.set({ checked });
+        } }),
+        react_1.default.createElement(Tag_1.default, { labels: ['Custom Tag component used here'] })))));
+})
+    .add('Double checkbox', () => {
+    const disabled = (0, addon_knobs_1.boolean)('Disabled', false);
+    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, state => (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { checked: state.checked, disabled: disabled, onChange: checked => {
+                checkboxState.set({ checked });
+            } })),
+        react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { checked: state.checked, disabled: disabled, onChange: checked => {
+                checkboxState.set({ checked });
+            } }))))));
 })
-    .add('Double checkbox', function () {
-    var disabled = addon_knobs_1.boolean('Disabled', false);
-    return (react_1.default.createElement(storybook_state_1.State, { store: checkboxState }, function (state) { return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(Checkbox_1.default, __assign({}, defaultProps, { checked: state.checked, disabled: disabled, onChange: function (checked) {
-                checkboxState.set({ checked: checked });
+    .add('Indeterminate checkbox', () => {
+    const disabled = (0, addon_knobs_1.boolean)('Disabled', false);
+    return (react_1.default.createElement(storybook_state_1.State, { store: indeterminateState }, state => (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { id: "indeterminate", label: "indeterminate", checked: state.checked1 && state.checked2, indeterminate: state.checked1 || state.checked2, disabled: disabled, onChange: checked => {
+                indeterminateState.set({
+                    checked1: checked,
+                    checked2: checked
+                });
             } })),
-        react_1.default.createElement(Checkbox_1.default, __assign({}, defaultProps, { checked: state.checked, disabled: disabled, onChange: function (checked) {
-                checkboxState.set({ checked: checked });
-            } })))); }));
+        react_1.default.createElement("div", { style: { marginTop: 16, marginLeft: 16 } },
+            react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { id: "checkbox-1", label: "checkbox 1", checked: state.checked1, disabled: disabled, onChange: checked => {
+                    indeterminateState.set(Object.assign(Object.assign({}, state), { checked1: checked }));
+                } })),
+            react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps, { id: "checkbox-2", label: "checkbox 2", checked: state.checked2, disabled: disabled, onChange: checked => {
+                    indeterminateState.set(Object.assign(Object.assign({}, state), { checked2: checked }));
+                } })))))));
 });
 //# sourceMappingURL=Checkbox.stories.js.map

package/lib/ui/src/checkbox/Checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"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"}

package/lib/ui/src/checkbox/Checkbox.styles.d.ts

@@ -1,5 +1,8 @@
 export declare const Layout: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CheckboxLabelLayout: import("styled-components").StyledComponent<"label", any, {
-    label: string;
+    hasLabel: boolean;
+}, never>;
+export declare const StringLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CheckboxLayout: import("styled-components").StyledComponent<"input", any, {
+    indeterminate: boolean;
 }, never>;
-export declare const CheckboxLayout: import("styled-components").StyledComponent<"input", any, {}, never>;

package/lib/ui/src/checkbox/Checkbox.styles.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -26,18 +22,153 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxLayout = exports.CheckboxLabelLayout = exports.Layout = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var tick_svg_1 = __importDefault(require("../../../assets/icons/tick.svg"));
-var tick_disabled_svg_1 = __importDefault(require("../../../assets/icons/tick_disabled.svg"));
-var utils_1 = require("../../../utils");
-exports.Layout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n  z-index: 0;\n\n  & + & {\n    margin-top: ", ";\n  }\n"], ["\n  position: relative;\n  text-align: left;\n  z-index: 0;\n\n  & + & {\n    margin-top: ", ";\n  }\n"])), utils_1.convertPxToRem(16));
-exports.CheckboxLabelLayout = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  clear: both;\n  display: inline-block;\n  cursor: pointer;\n\n  ", "\n\n  ::selection {\n    background-color: transparent;\n  }\n"], ["\n  ", ";\n  color: ", ";\n  clear: both;\n  display: inline-block;\n  cursor: pointer;\n\n  ",
-    "\n\n  ::selection {\n    background-color: transparent;\n  }\n"])), utils_1.paragraphs.label, utils_1.colors.dark.base, function (_a) {
-    var label = _a.label;
-    return label
-        ? styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          padding: ", " 0 0 ", ";\n        "], ["\n          padding: ", " 0 0 ", ";\n        "])), utils_1.convertPxToRem(4), utils_1.convertPxToRem(32)) : styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          padding: 0 0 0 ", ";\n        "], ["\n          padding: 0 0 0 ", ";\n        "])), utils_1.convertPxToRem(24));
-});
-exports.CheckboxLayout = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  float: left;\n  outline: none;\n  visibility: hidden;\n  width: 0;\n  margin: 0;\n  font-size: inherit;\n\n  :checked,\n  :not(:checked) {\n    + ", " {\n      ::before {\n        content: '';\n        position: absolute;\n        z-index: 1;\n        left: 0;\n        top: 0;\n        width: ", ";\n        height: ", ";\n        border: ", " solid ", ";\n        border-radius: ", ";\n        cursor: pointer;\n        transition: background-color 0.1s, border-color 0.1s;\n        transition: all 250ms ease;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        z-index: 0;\n        left: 0;\n        top: 0;\n        width: ", ";\n        height: ", ";\n        border-radius: ", ";\n        border-color: ", ";\n        background-color: ", ";\n        background-position: center;\n        background-repeat: no-repeat;\n        background-image: url('", "');\n        background-size: ", " auto;\n        opacity: 0;\n      }\n    }\n  }\n\n  :checked {\n    + ", " {\n      ::before {\n        border-color: ", ";\n      }\n\n      ::after {\n        opacity: 1;\n      }\n    }\n  }\n\n  :not(:checked):not(:disabled) {\n    + ", " {\n      :hover {\n        ::before {\n          border-color: ", ";\n        }\n      }\n    }\n  }\n\n  :disabled {\n    + ", " {\n      color: ", ";\n      cursor: not-allowed;\n\n      ::before {\n        border-color: ", ";\n        cursor: inherit;\n      }\n\n      ::after {\n        opacity: 1;\n        background-color: ", ";\n        background-image: url('", "');\n      }\n    }\n  }\n"], ["\n  display: block;\n  float: left;\n  outline: none;\n  visibility: hidden;\n  width: 0;\n  margin: 0;\n  font-size: inherit;\n\n  :checked,\n  :not(:checked) {\n    + ", " {\n      ::before {\n        content: '';\n        position: absolute;\n        z-index: 1;\n        left: 0;\n        top: 0;\n        width: ", ";\n        height: ", ";\n        border: ", " solid ", ";\n        border-radius: ", ";\n        cursor: pointer;\n        transition: background-color 0.1s, border-color 0.1s;\n        transition: all 250ms ease;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        z-index: 0;\n        left: 0;\n        top: 0;\n        width: ", ";\n        height: ", ";\n        border-radius: ", ";\n        border-color: ", ";\n        background-color: ", ";\n        background-position: center;\n        background-repeat: no-repeat;\n        background-image: url('", "');\n        background-size: ", " auto;\n        opacity: 0;\n      }\n    }\n  }\n\n  :checked {\n    + ", " {\n      ::before {\n        border-color: ", ";\n      }\n\n      ::after {\n        opacity: 1;\n      }\n    }\n  }\n\n  :not(:checked):not(:disabled) {\n    + ", " {\n      :hover {\n        ::before {\n          border-color: ", ";\n        }\n      }\n    }\n  }\n\n  :disabled {\n    + ", " {\n      color: ", ";\n      cursor: not-allowed;\n\n      ::before {\n        border-color: ", ";\n        cursor: inherit;\n      }\n\n      ::after {\n        opacity: 1;\n        background-color: ", ";\n        background-image: url('", "');\n      }\n    }\n  }\n"])), exports.CheckboxLabelLayout, utils_1.convertPxToRem(24), utils_1.convertPxToRem(24), utils_1.convertPxToRem(2), utils_1.colors.grey.base60, utils_1.radius.small, utils_1.convertPxToRem(24), utils_1.convertPxToRem(24), utils_1.radius.small, utils_1.colors.orange.base, utils_1.colors.orange.base20, tick_svg_1.default, utils_1.convertPxToRem(32), exports.CheckboxLabelLayout, utils_1.colors.orange.base20, exports.CheckboxLabelLayout, utils_1.colors.orange.base, exports.CheckboxLabelLayout, utils_1.colors.grey.base60, utils_1.colors.dark.base20, utils_1.colors.dark.base10, tick_disabled_svg_1.default);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+exports.CheckboxLayout = exports.StringLabel = exports.CheckboxLabelLayout = exports.Layout = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const indeterminate_svg_1 = __importDefault(require("../../../assets/icons/indeterminate.svg"));
+const indeterminate_disabled_svg_1 = __importDefault(require("../../../assets/icons/indeterminate_disabled.svg"));
+const tick_svg_1 = __importDefault(require("../../../assets/icons/tick.svg"));
+const tick_disabled_svg_1 = __importDefault(require("../../../assets/icons/tick_disabled.svg"));
+const utils_1 = require("../../../utils");
+exports.Layout = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  min-width: ${(0, utils_1.convertPxToRem)(24)};
+  min-height: ${(0, utils_1.convertPxToRem)(24)};
+  position: relative;
+  text-align: left;
+  z-index: 0;
+
+  & + & {
+    margin-top: ${(0, utils_1.convertPxToRem)(16)};
+  }
+`;
+exports.CheckboxLabelLayout = styled_components_1.default.label `
+  clear: both;
+  cursor: pointer;
+  padding-left: ${({ hasLabel }) => (0, utils_1.convertPxToRem)(hasLabel ? 32 : 24)};
+`;
+exports.StringLabel = styled_components_1.default.span `
+  ${utils_1.paragraphs.label};
+  display: inline-block;
+  padding-top: ${(0, utils_1.convertPxToRem)(2)};
+  color: ${utils_1.colors.dark.base};
+
+  ::selection {
+    background-color: transparent;
+  }
+`;
+exports.CheckboxLayout = styled_components_1.default.input `
+  display: block;
+  float: left;
+  outline: none;
+  visibility: hidden;
+  width: 0;
+  margin: 0;
+  font-size: inherit;
+
+  :checked,
+  :not(:checked) {
+    + ${exports.CheckboxLabelLayout} {
+      ::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: ${(0, utils_1.convertPxToRem)(24)};
+        height: ${(0, utils_1.convertPxToRem)(24)};
+        border: ${(0, utils_1.convertPxToRem)(2)} solid ${utils_1.colors.grey.base60};
+        border-radius: ${utils_1.radius.small};
+        cursor: pointer;
+        transition: background-color 0.1s, border-color 0.1s;
+        transition: all 250ms ease;
+      }
+
+      ::after {
+        content: '';
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        top: 0;
+        width: ${(0, utils_1.convertPxToRem)(24)};
+        height: ${(0, utils_1.convertPxToRem)(24)};
+        border-radius: ${utils_1.radius.small};
+        border-color: ${utils_1.colors.orange.base};
+        background-color: ${utils_1.colors.orange.base20};
+        background-position: center;
+        background-repeat: no-repeat;
+        background-image: url('${tick_svg_1.default}');
+        background-size: ${(0, utils_1.convertPxToRem)(32)} auto;
+        opacity: 0;
+      }
+    }
+  }
+
+  :checked {
+    + ${exports.CheckboxLabelLayout} {
+      ::before {
+        border-color: ${utils_1.colors.orange.base20};
+      }
+
+      ::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  :not(:checked):not(:disabled) {
+    + ${exports.CheckboxLabelLayout} {
+      :hover {
+        ::before {
+          border-color: ${utils_1.colors.orange.base};
+        }
+      }
+
+      ${({ indeterminate }) => indeterminate &&
+    (0, styled_components_1.css) `
+          ::before {
+            border-color: ${utils_1.colors.orange.base20};
+          }
+
+          ::after {
+            background-image: url('${indeterminate_svg_1.default}');
+            opacity: 1;
+          }
+        `}
+    }
+  }
+
+  :disabled {
+    + ${exports.CheckboxLabelLayout} {
+      color: ${utils_1.colors.grey.base60};
+      cursor: not-allowed;
+
+      ::before {
+        border-color: ${utils_1.colors.dark.base20};
+        cursor: inherit;
+      }
+
+      ::after {
+        opacity: 1;
+        background-color: ${utils_1.colors.dark.base10};
+      }
+    }
+  }
+
+  :disabled:not(:checked) {
+    + ${exports.CheckboxLabelLayout} {
+      ::after {
+        background-image: ${({ indeterminate }) => indeterminate ? `url('${indeterminate_disabled_svg_1.default}')` : 'none'};
+      }
+    }
+  }
+
+  :disabled:checked {
+    + ${exports.CheckboxLabelLayout} {
+      ::after {
+        background-image: url('${tick_disabled_svg_1.default}');
+      }
+    }
+  }
+`;
 //# sourceMappingURL=Checkbox.styles.js.map

package/lib/ui/src/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAEhD,4EAAmD;AACnD,8FAAoE;AACpE,wCAA4E;AAE/D,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,2KAAA,4FAMd,EAAkB,UAEnC,KAFiB,sBAAc,CAAC,EAAE,CAAC,EAElC;AAEW,QAAA,mBAAmB,GAAG,2BAAM,CAAC,KAAK,oOAAmB,MAC9D,EAAgB,cACT,EAAgB,uEAKvB;IAOK,gEAKR,KAlBG,kBAAU,CAAC,KAAK,EACT,cAAM,CAAC,IAAI,CAAC,IAAI,EAKvB,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK;QACH,CAAC,CAAC,uBAAG,kHAAA,uBACU,EAAiB,OAAQ,EAAkB,aACvD,KADY,sBAAc,CAAC,CAAC,CAAC,EAAQ,sBAAc,CAAC,EAAE,CAAC,EAE1D,CAAC,CAAC,uBAAG,+GAAA,6BACgB,EAAkB,aACpC,KADkB,sBAAc,CAAC,EAAE,CAAC,CACpC;AANL,CAMK,EAKP;AAEW,QAAA,cAAc,GAAG,2BAAM,CAAC,KAAK,ooDAAA,2KAWlC,EAAmB,kJAOV,EAAkB,qBACjB,EAAkB,qBAClB,EAAiB,SAAU,EAAkB,4BACtC,EAAY,yRAYpB,EAAkB,qBACjB,EAAkB,4BACX,EAAY,2BACb,EAAkB,+BACd,EAAoB,iHAGf,EAAK,gCACX,EAAkB,0EAOrC,EAAmB,8CAEH,EAAoB,sHAUpC,EAAmB,kEAGD,EAAkB,4DAOpC,EAAmB,mBACZ,EAAkB,2EAIT,EAAkB,0GAMd,EAAkB,oCACb,EAAa,4BAI7C,KA3EO,2BAAmB,EAOV,sBAAc,CAAC,EAAE,CAAC,EACjB,sBAAc,CAAC,EAAE,CAAC,EAClB,sBAAc,CAAC,CAAC,CAAC,EAAU,cAAM,CAAC,IAAI,CAAC,MAAM,EACtC,cAAM,CAAC,KAAK,EAYpB,sBAAc,CAAC,EAAE,CAAC,EACjB,sBAAc,CAAC,EAAE,CAAC,EACX,cAAM,CAAC,KAAK,EACb,cAAM,CAAC,MAAM,CAAC,IAAI,EACd,cAAM,CAAC,MAAM,CAAC,MAAM,EAGf,kBAAK,EACX,sBAAc,CAAC,EAAE,CAAC,EAOrC,2BAAmB,EAEH,cAAM,CAAC,MAAM,CAAC,MAAM,EAUpC,2BAAmB,EAGD,cAAM,CAAC,MAAM,CAAC,IAAI,EAOpC,2BAAmB,EACZ,cAAM,CAAC,IAAI,CAAC,MAAM,EAIT,cAAM,CAAC,IAAI,CAAC,MAAM,EAMd,cAAM,CAAC,IAAI,CAAC,MAAM,EACb,2BAAa,EAI5C"}
+{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAAgD;AAEhD,gGAAoE;AACpE,kHAAqF;AACrF,8EAAmD;AACnD,gGAAoE;AACpE,0CAA4E;AAE/D,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,CAAA;;;eAGjB,IAAA,sBAAc,EAAC,EAAE,CAAC;gBACjB,IAAA,sBAAc,EAAC,EAAE,CAAC;;;;;;kBAMhB,IAAA,sBAAc,EAAC,EAAE,CAAC;;CAEnC,CAAC;AAEW,QAAA,mBAAmB,GAAG,2BAAM,CAAC,KAAK,CAAuB;;;kBAGpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAA,sBAAc,EAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;CACrE,CAAC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,IAAI,CAAA;IAClC,kBAAU,CAAC,KAAK;;iBAEH,IAAA,sBAAc,EAAC,CAAC,CAAC;WACvB,cAAM,CAAC,IAAI,CAAC,IAAI;;;;;CAK1B,CAAC;AAEW,QAAA,cAAc,GAAG,2BAAM,CAAC,KAAK,CAA4B;;;;;;;;;;;QAW9D,2BAAmB;;;;;;;iBAOV,IAAA,sBAAc,EAAC,EAAE,CAAC;kBACjB,IAAA,sBAAc,EAAC,EAAE,CAAC;kBAClB,IAAA,sBAAc,EAAC,CAAC,CAAC,UAAU,cAAM,CAAC,IAAI,CAAC,MAAM;yBACtC,cAAM,CAAC,KAAK;;;;;;;;;;;;iBAYpB,IAAA,sBAAc,EAAC,EAAE,CAAC;kBACjB,IAAA,sBAAc,EAAC,EAAE,CAAC;yBACX,cAAM,CAAC,KAAK;wBACb,cAAM,CAAC,MAAM,CAAC,IAAI;4BACd,cAAM,CAAC,MAAM,CAAC,MAAM;;;iCAGf,kBAAK;2BACX,IAAA,sBAAc,EAAC,EAAE,CAAC;;;;;;;QAOrC,2BAAmB;;wBAEH,cAAM,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;QAUpC,2BAAmB;;;0BAGD,cAAM,CAAC,MAAM,CAAC,IAAI;;;;QAIpC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,IAAA,uBAAG,EAAA;;4BAEiB,cAAM,CAAC,MAAM,CAAC,MAAM;;;;qCAIX,2BAAa;;;SAGzC;;;;;QAKD,2BAAmB;eACZ,cAAM,CAAC,IAAI,CAAC,MAAM;;;;wBAIT,cAAM,CAAC,IAAI,CAAC,MAAM;;;;;;4BAMd,cAAM,CAAC,IAAI,CAAC,MAAM;;;;;;QAMtC,2BAAmB;;4BAEC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACxC,aAAa,CAAC,CAAC,CAAC,QAAQ,oCAAqB,IAAI,CAAC,CAAC,CAAC,MAAM;;;;;;QAM5D,2BAAmB;;iCAEM,2BAAa;;;;CAI7C,CAAC"}

package/lib/ui/src/checkbox/Checkbox.test.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -19,43 +8,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@testing-library/react");
-var user_event_1 = __importDefault(require("@testing-library/user-event"));
-var Checkbox_1 = __importDefault(require("./Checkbox"));
-var mockChange = jest.fn();
-var defaultProps = {
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const Checkbox_1 = __importDefault(require("./Checkbox"));
+const mockChange = jest.fn();
+const defaultProps = {
     id: 'id',
     label: 'Checkbox',
     disabled: false,
@@ -63,28 +25,31 @@ var defaultProps = {
     onChange: mockChange,
     name: 'test'
 };
-describe('Checkbox component', function () {
-    afterEach(function () { return jest.resetAllMocks(); });
-    afterAll(function () { return jest.clearAllMocks(); });
-    it('should render component', function () {
-        react_2.render(react_1.default.createElement(Checkbox_1.default, __assign({}, defaultProps)));
+describe('Checkbox component', () => {
+    afterEach(() => jest.resetAllMocks());
+    afterAll(() => jest.clearAllMocks());
+    it('should render component', () => {
+        (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps)));
         expect(react_2.screen.getByTestId('checkbox-test')).toBeInTheDocument();
         expect(react_2.screen.getByTestId('checkbox-input')).toBeInTheDocument();
         expect(react_2.screen.getByTestId('checkbox-label')).toBeInTheDocument();
         expect(react_2.screen.getByTestId('checkbox-label')).toHaveTextContent('Checkbox');
+        expect(react_2.screen.getByTestId('checkbox-input')).not.toHaveAttribute('aria-label', defaultProps.label);
+    });
+    it('should render checkbox with custom component', () => {
+        (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps),
+            react_1.default.createElement("div", { "data-test": "some-custom-component" }, "Custom component")));
+        expect(react_2.screen.getByTestId('checkbox-test')).toBeInTheDocument();
+        expect(react_2.screen.getByTestId('checkbox-input')).toBeInTheDocument();
+        expect(react_2.screen.getByTestId('checkbox-label')).toBeInTheDocument();
+        expect(react_2.screen.getByTestId('some-custom-component')).toBeInTheDocument();
+        expect(react_2.screen.getByTestId('checkbox-label')).toHaveTextContent('Custom component');
+        expect(react_2.screen.getByTestId('checkbox-input')).toHaveAttribute('aria-label', defaultProps.label);
     });
-    it('should trigger onChange component', function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    react_2.render(react_1.default.createElement(Checkbox_1.default, __assign({}, defaultProps)));
-                    user_event_1.default.click(react_2.screen.getByTestId('checkbox-input'));
-                    return [4 /*yield*/, react_2.waitFor(function () { return expect(mockChange).toHaveBeenCalled(); })];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); });
+    it('should trigger onChange component', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, Object.assign({}, defaultProps)));
+        user_event_1.default.click(react_2.screen.getByTestId('checkbox-input'));
+        yield (0, react_2.waitFor)(() => expect(mockChange).toHaveBeenCalled());
+    }));
 });
 //# sourceMappingURL=Checkbox.test.js.map

package/lib/ui/src/checkbox/Checkbox.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,gDAAiE;AACjE,2EAAoD;AAEpD,wDAAqD;AAErD,IAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAE7B,IAAM,YAAY,GAAkB;IAClC,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE;IAC7B,SAAS,CAAC,cAAM,OAAA,IAAI,CAAC,aAAa,EAAE,EAApB,CAAoB,CAAC,CAAC;IACtC,QAAQ,CAAC,cAAM,OAAA,IAAI,CAAC,aAAa,EAAE,EAApB,CAAoB,CAAC,CAAC;IAErC,EAAE,CAAC,yBAAyB,EAAE;QAC5B,cAAM,CAAC,8BAAC,kBAAQ,eAAK,YAAY,EAAI,CAAC,CAAC;QAEvC,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE;;;;oBACtC,cAAM,CAAC,8BAAC,kBAAQ,eAAK,YAAY,EAAI,CAAC,CAAC;oBAEvC,oBAAS,CAAC,KAAK,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;oBACtD,qBAAM,eAAO,CAAC,cAAM,OAAA,MAAM,CAAC,UAAU,CAAC,CAAC,gBAAgB,EAAE,EAArC,CAAqC,CAAC,EAAA;;oBAA1D,SAA0D,CAAC;;;;SAC5D,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/checkbox/Checkbox.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,kDAAiE;AACjE,6EAAoD;AAEpD,0DAAqD;AAErD,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAE7B,MAAM,YAAY,GAAkB;IAClC,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IACtC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAErC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,IAAA,cAAM,EAAC,8BAAC,kBAAQ,oBAAK,YAAY,EAAI,CAAC,CAAC;QAEvC,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QAC3E,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAC9D,YAAY,EACZ,YAAY,CAAC,KAAK,CACnB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,IAAA,cAAM,EACJ,8BAAC,kBAAQ,oBAAK,YAAY;YACxB,oDAAe,uBAAuB,uBAAuB,CACpD,CACZ,CAAC;QAEF,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACxE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAC5D,kBAAkB,CACnB,CAAC;QACF,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAC1D,YAAY,EACZ,YAAY,CAAC,KAAK,CACnB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,GAAS,EAAE;QACjD,IAAA,cAAM,EAAC,8BAAC,kBAAQ,oBAAK,YAAY,EAAI,CAAC,CAAC;QAEvC,oBAAS,CAAC,KAAK,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACtD,MAAM,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}