@onepercentio/one-ui 0.19.2 → 0.19.4

package/dist/components/Chart/Chart.view.js

@@ -1,140 +1,221 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const Chart_module_scss_1 = __importDefault(require("./Chart.module.scss"));
-const Chart_e2e_1 = require("./Chart.e2e");
-const AnchoredTooltip_1 = __importDefault(require("../AnchoredTooltip"));
+exports.default = ChartView;
+var _react = _interopRequireWildcard(require("react"));
+var _ChartModule = _interopRequireDefault(require("./Chart.module.scss"));
+var _AnchoredTooltip = _interopRequireDefault(require("../AnchoredTooltip"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 const DEFAULT_STYLE = {
-    lineColor: "#000",
-    pointColor: "#000",
-    textColor: "#fff",
+  lineColor: "#000",
+  pointColor: "#000",
+  textColor: "#fff"
 };
-function FloatingTooltip({ children, x, y, hoverOnly, height, style, }) {
-    const [ope, setOpen] = (0, react_1.useState)(() => (hoverOnly ? false : true));
-    const ref = (0, react_1.useRef)(null);
-    const circleRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const animateEl = circleRef.current.children.item(0);
-        let interval;
-        animateEl.addEventListener("beginEvent", () => {
-            interval = setInterval(() => ref.current.updatePosition(), 1000 / 24);
-        });
-        animateEl.addEventListener("endEvent", () => {
-            clearInterval(interval);
-            ref.current.updatePosition();
-        });
-    }, []);
-    const actions = (0, react_1.useMemo)(() => hoverOnly
-        ? {
-            onMouseEnter: () => setOpen(true),
-            onMouseOut: () => setOpen(false),
-        }
-        : {}, [hoverOnly]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("circle", Object.assign({ ref: circleRef, r: height * 0.01, cx: x, cy: y, style: {
-                "--point-color": style.pointColor,
-            } }, actions),
-            react_1.default.createElement("animate", { attributeName: "cy", values: `${height};${y}`, dur: "1s" })),
-        react_1.default.createElement(AnchoredTooltip_1.default, { ref: ref, containInViewport: false, anchorRef: circleRef, open: ope, className: Chart_module_scss_1.default.tooltipContainer, style: {
-                "--line-color": style.lineColor,
-                "--text-color": style.textColor,
-            } }, children)));
+function FloatingTooltip(_ref) {
+  let children = _ref.children,
+    x = _ref.x,
+    y = _ref.y,
+    hoverOnly = _ref.hoverOnly,
+    height = _ref.height,
+    style = _ref.style;
+  const _useState = (0, _react.useState)(function () {
+      return hoverOnly ? false : true;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    ope = _useState2[0],
+    setOpen = _useState2[1];
+  const ref = (0, _react.useRef)(null);
+  const circleRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    const animateEl = circleRef.current.children.item(0);
+    let interval;
+    animateEl.addEventListener("beginEvent", function () {
+      interval = setInterval(function () {
+        return ref.current.updatePosition();
+      }, 1000 / 24);
+    });
+    animateEl.addEventListener("endEvent", function () {
+      clearInterval(interval);
+      ref.current.updatePosition();
+    });
+  }, []);
+  const actions = (0, _react.useMemo)(function () {
+    return hoverOnly ? {
+      onMouseEnter: function onMouseEnter() {
+        return setOpen(true);
+      },
+      onMouseOut: function onMouseOut() {
+        return setOpen(false);
+      }
+    } : {};
+  }, [hoverOnly]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", _extends({
+    ref: circleRef,
+    r: height * 0.01,
+    cx: x,
+    cy: y,
+    style: {
+      "--point-color": style.pointColor
+    }
+  }, actions), /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "cy",
+    values: "".concat(height, ";").concat(y),
+    dur: "1s"
+  })), /*#__PURE__*/_react.default.createElement(_AnchoredTooltip.default, {
+    ref: ref,
+    containInViewport: false,
+    anchorRef: circleRef,
+    open: ope,
+    className: _ChartModule.default.tooltipContainer,
+    style: {
+      "--line-color": style.lineColor,
+      "--text-color": style.textColor
+    }
+  }, children));
 }
+
 /**
  * Draws a simple line chart with some animation
  **/
-function ChartView({ bounds: [[startX, endX, stepsX], [startY, endY, stepsY]], data = [], points = [], label, style: groupStyle = [], }) {
-    const [dim, setDIm] = (0, react_1.useState)();
-    const chartRef = (0, react_1.useRef)(null);
-    (0, react_1.useLayoutEffect)(() => {
-        setDIm({
-            width: chartRef.current.clientWidth,
-            height: chartRef.current.clientHeight,
-        });
-    }, []);
-    const { width, height } = dim || {};
-    const howMuchStepsY = (0, react_1.useMemo)(() => (endY - startY) / stepsY + 1, [endY, startY, stepsY]);
-    const yAxis = (0, react_1.useMemo)(() => {
-        return new Array(howMuchStepsY).fill(undefined).map((_, i) => {
-            return react_1.default.createElement("span", null, label.y(endY - i * stepsY));
-        });
-    }, [startY, endY, stepsY, howMuchStepsY]);
-    const howMuchStepsX = (0, react_1.useMemo)(() => (endX - startX) / stepsX + 1, [endX, startX, stepsX]);
-    const xAxis = (0, react_1.useMemo)(() => {
-        return new Array(howMuchStepsX).fill(undefined).map((_, i) => {
-            return react_1.default.createElement("span", null, label.x(startX + i * stepsX));
-        });
-    }, [startX, endX, stepsX]);
-    const { polylines, tooltips } = (0, react_1.useMemo)(() => {
-        const calculate = (end, start, overrideScale = 100) => (point) => {
-            const max = end - start;
-            const current = point - start;
-            return (current * overrideScale) / max;
-        };
-        const calculateX = calculate(endX, startX, width);
-        const calculateY = calculate(endY, startY, height);
-        return {
-            tooltips: points.map((pointsCategory, i) => {
-                const style = groupStyle[i] || DEFAULT_STYLE;
-                return pointsCategory.map(([x, y, label, onlyOnHover = false]) => {
-                    return (react_1.default.createElement(FloatingTooltip, { x: calculateX(x), y: height - calculateY(y), height: height, style: style, hoverOnly: onlyOnHover }, label));
-                });
-            }),
-            polylines: data.map((lineData, i) => {
-                const style = groupStyle[i] || DEFAULT_STYLE;
-                const calculateLines = (yOverride) => {
-                    return lineData
-                        .map(([x, y]) => `${calculateX(x)},${yOverride === undefined ? height - calculateY(y) : yOverride}`)
-                        .join(" ");
-                };
-                return (react_1.default.createElement("polyline", { strokeLinejoin: "round", strokeLinecap: "round", points: calculateLines(), fill: "none", strokeWidth: 5, style: {
-                        "--line-color": style.lineColor,
-                    } },
-                    react_1.default.createElement("animate", { attributeName: "points", attributeType: "XML", values: [calculateLines(height), calculateLines()].join("; "), dur: "1s" })));
-            }),
+function ChartView(_ref2) {
+  let _ref2$bounds = _slicedToArray(_ref2.bounds, 2),
+    _ref2$bounds$ = _slicedToArray(_ref2$bounds[0], 3),
+    startX = _ref2$bounds$[0],
+    endX = _ref2$bounds$[1],
+    stepsX = _ref2$bounds$[2],
+    _ref2$bounds$2 = _slicedToArray(_ref2$bounds[1], 3),
+    startY = _ref2$bounds$2[0],
+    endY = _ref2$bounds$2[1],
+    stepsY = _ref2$bounds$2[2],
+    _ref2$data = _ref2.data,
+    data = _ref2$data === void 0 ? [] : _ref2$data,
+    _ref2$points = _ref2.points,
+    points = _ref2$points === void 0 ? [] : _ref2$points,
+    label = _ref2.label,
+    _ref2$style = _ref2.style,
+    groupStyle = _ref2$style === void 0 ? [] : _ref2$style;
+  const _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dim = _useState4[0],
+    setDIm = _useState4[1];
+  const chartRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    setDIm({
+      width: chartRef.current.clientWidth,
+      height: chartRef.current.clientHeight
+    });
+  }, []);
+  const _ref3 = dim || {},
+    width = _ref3.width,
+    height = _ref3.height;
+  const howMuchStepsY = (0, _react.useMemo)(function () {
+    return (endY - startY) / stepsY + 1;
+  }, [endY, startY, stepsY]);
+  const yAxis = (0, _react.useMemo)(function () {
+    return new Array(howMuchStepsY).fill(undefined).map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement("span", null, label.y(endY - i * stepsY));
+    });
+  }, [startY, endY, stepsY, howMuchStepsY]);
+  const howMuchStepsX = (0, _react.useMemo)(function () {
+    return (endX - startX) / stepsX + 1;
+  }, [endX, startX, stepsX]);
+  const xAxis = (0, _react.useMemo)(function () {
+    return new Array(howMuchStepsX).fill(undefined).map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement("span", null, label.x(startX + i * stepsX));
+    });
+  }, [startX, endX, stepsX]);
+  const _useMemo = (0, _react.useMemo)(function () {
+      const calculate = function calculate(end, start) {
+        let overrideScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+        return function (point) {
+          const max = end - start;
+          const current = point - start;
+          return current * overrideScale / max;
         };
-    }, [data, width, height]);
-    const paddingY = (0, react_1.useMemo)(() => {
-        const stepSizeY = height / (howMuchStepsY - 1);
-        return stepSizeY / 2;
-    }, [howMuchStepsY, height]);
-    const paddingX = (0, react_1.useMemo)(() => {
-        const stepSizeX = width / (howMuchStepsX - 1);
-        return stepSizeX / 2;
-    }, [howMuchStepsX, width]);
-    return (react_1.default.createElement("div", { className: Chart_module_scss_1.default.chartRoot },
-        react_1.default.createElement("div", { className: Chart_module_scss_1.default.yAxis, "data-testid": Chart_e2e_1.ChartDataTestIds.Y_AXIS }, yAxis),
-        react_1.default.createElement("div", { ref: chartRef, className: Chart_module_scss_1.default.chartContainer }, width && (react_1.default.createElement("svg", { className: Chart_module_scss_1.default.chart, viewBox: `${-paddingX} ${-paddingY} ${width + paddingX * 2} ${height + paddingY * 2}`, preserveAspectRatio: "none" },
-            polylines,
-            tooltips))),
-        "\u00A0",
-        react_1.default.createElement("div", { className: Chart_module_scss_1.default.xAxis, "data-testid": Chart_e2e_1.ChartDataTestIds.X_AXIS }, xAxis)));
-}
-exports.default = ChartView;
-//# sourceMappingURL=Chart.view.js.map
+      };
+      const calculateX = calculate(endX, startX, width);
+      const calculateY = calculate(endY, startY, height);
+      return {
+        tooltips: points.map(function (pointsCategory, i) {
+          const style = groupStyle[i] || DEFAULT_STYLE;
+          return pointsCategory.map(function (_ref4) {
+            let _ref5 = _slicedToArray(_ref4, 4),
+              x = _ref5[0],
+              y = _ref5[1],
+              label = _ref5[2],
+              _ref5$ = _ref5[3],
+              onlyOnHover = _ref5$ === void 0 ? false : _ref5$;
+            return /*#__PURE__*/_react.default.createElement(FloatingTooltip, {
+              x: calculateX(x),
+              y: height - calculateY(y),
+              height: height,
+              style: style,
+              hoverOnly: onlyOnHover
+            }, label);
+          });
+        }),
+        polylines: data.map(function (lineData, i) {
+          const style = groupStyle[i] || DEFAULT_STYLE;
+          const calculateLines = function calculateLines(yOverride) {
+            return lineData.map(function (_ref6) {
+              let _ref7 = _slicedToArray(_ref6, 2),
+                x = _ref7[0],
+                y = _ref7[1];
+              return "".concat(calculateX(x), ",").concat(yOverride === undefined ? height - calculateY(y) : yOverride);
+            }).join(" ");
+          };
+          return /*#__PURE__*/_react.default.createElement("polyline", {
+            strokeLinejoin: "round",
+            strokeLinecap: "round",
+            points: calculateLines(),
+            fill: "none",
+            strokeWidth: 5,
+            style: {
+              "--line-color": style.lineColor
+            }
+          }, /*#__PURE__*/_react.default.createElement("animate", {
+            attributeName: "points",
+            attributeType: "XML",
+            values: [calculateLines(height), calculateLines()].join("; "),
+            dur: "1s"
+          }));
+        })
+      };
+    }, [data, width, height]),
+    polylines = _useMemo.polylines,
+    tooltips = _useMemo.tooltips;
+  const paddingY = (0, _react.useMemo)(function () {
+    const stepSizeY = height / (howMuchStepsY - 1);
+    return stepSizeY / 2;
+  }, [howMuchStepsY, height]);
+  const paddingX = (0, _react.useMemo)(function () {
+    const stepSizeX = width / (howMuchStepsX - 1);
+    return stepSizeX / 2;
+  }, [howMuchStepsX, width]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _ChartModule.default.chartRoot
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _ChartModule.default.yAxis
+  }, yAxis), /*#__PURE__*/_react.default.createElement("div", {
+    ref: chartRef,
+    className: _ChartModule.default.chartContainer
+  }, width && /*#__PURE__*/_react.default.createElement("svg", {
+    className: _ChartModule.default.chart,
+    viewBox: "".concat(-paddingX, " ").concat(-paddingY, " ").concat(width + paddingX * 2, " ").concat(height + paddingY * 2),
+    preserveAspectRatio: "none"
+  }, polylines, tooltips)), "\xA0", /*#__PURE__*/_react.default.createElement("div", {
+    className: _ChartModule.default.xAxis
+  }, xAxis));
+}

package/dist/components/Chart/index.js

@@ -1,9 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Chart_logic_1 = require("./Chart.logic");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Chart_logic_1).default; } });
-//# sourceMappingURL=index.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Chart.default;
+  }
+});
+var _Chart = _interopRequireDefault(require("./Chart.logic"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/CheckBox/CheckBox.d.ts

@@ -2,10 +2,12 @@ import React, { PropsWithChildren } from "react";
 /**
  * A simple checkbox with nissan guidelines
  **/
-export default function CheckBox({ checked, onToggle, label, className, size, ...props }: PropsWithChildren<{
+export default function CheckBox({ checked, onToggle, label, className, size, groupId, value, ...props }: PropsWithChildren<{
     checked: boolean;
     onToggle: (checked: boolean) => void;
     label: React.ReactNode;
     className?: string;
     size?: number;
+    groupId: string;
+    value: string;
 }> & React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): JSX.Element;

package/dist/components/CheckBox/CheckBox.js

@@ -1,34 +1,47 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const OneUIProvider_1 = require("../../context/OneUIProvider");
-const CheckBox_module_scss_1 = __importDefault(require("./CheckBox.module.scss"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CheckBox;
+var _react = _interopRequireDefault(require("react"));
+var _OneUIProvider = require("../../context/OneUIProvider");
+var _CheckBoxModule = _interopRequireDefault(require("./CheckBox.module.scss"));
+const _excluded = ["checked", "onToggle", "label", "className", "size", "groupId", "value"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * A simple checkbox with nissan guidelines
  **/
-function CheckBox(_a) {
-    var { checked, onToggle, label, className = "", size = undefined } = _a, props = __rest(_a, ["checked", "onToggle", "label", "className", "size"]);
-    const Checkbox = (0, OneUIProvider_1.useOneUIConfig)("component.checkbox.Component", "span");
-    return (react_1.default.createElement("label", { className: `${CheckBox_module_scss_1.default.container} ${className}`, style: { fontSize: size }, onClick: (e) => {
-            onToggle(!checked);
-            e.preventDefault();
-        } },
-        react_1.default.createElement(Checkbox, Object.assign({}, props, { className: `${checked ? CheckBox_module_scss_1.default.checked : ""} ${label ? CheckBox_module_scss_1.default.wContent : ""}` })),
-        label));
-}
-exports.default = CheckBox;
-//# sourceMappingURL=CheckBox.js.map
+function CheckBox(_ref) {
+  let checked = _ref.checked,
+    onToggle = _ref.onToggle,
+    label = _ref.label,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? undefined : _ref$size,
+    groupId = _ref.groupId,
+    value = _ref.value,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Checkbox = (0, _OneUIProvider.useOneUIConfig)("component.checkbox.Component", "span");
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: "".concat(_CheckBoxModule.default.container, " ").concat(className),
+    style: {
+      fontSize: size
+    },
+    onClick: function onClick(e) {
+      onToggle(!checked);
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/_react.default.createElement(Checkbox, _extends({}, props, {
+    className: "".concat(checked ? _CheckBoxModule.default.checked : "", " ").concat(label ? _CheckBoxModule.default.wContent : "")
+  })), /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    name: groupId,
+    id: value,
+    checked: checked
+  }), label);
+}

package/dist/components/CheckBox/CheckBox.module.scss

@@ -4,6 +4,10 @@
   display: flex;
   line-height: 1.5em;
   vertical-align: middle;
+  input {
+    max-width: 0px;
+    max-height: 0px;
+  }
 
   > span:first-child {
     visibility: visible;
@@ -15,6 +19,8 @@
     transition: background-color 250ms, border 250ms, box-shadow 250ms;
     border: 1px solid rgb(40, 43, 53);
     box-shadow: 0px 0px 0px -4px $digitalBlue;
+    flex-shrink: 0;
+
     &.wContent {
       margin-right: 0.45em;
     }

package/dist/components/CheckBox/index.js

@@ -1,9 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var CheckBox_1 = require("./CheckBox");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CheckBox_1).default; } });
-//# sourceMappingURL=index.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CheckBox.default;
+  }
+});
+var _CheckBox = _interopRequireDefault(require("./CheckBox"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Collapsable/Collapsable.d.ts

@@ -1,46 +1,45 @@
-import React, { HTMLAttributes, PropsWithChildren } from "react";
+import React from "react";
 import { AnchoredTooltipAlignment } from "../AnchoredTooltip/AnchoredTooltip";
+declare class _CollapsableInterface {
+    _id: string;
+    constructor(id: string);
+    _getElements(): {
+        header: HTMLElement | null;
+        content: HTMLElement | null;
+    };
+    open(onOpened: () => void): void;
+    getElement(type: "header" | "content"): HTMLDivElement | null;
+}
 /**
- * Wrapps some content on a collapsable header
- **/
-export default function Collapsable({ children, title, className, onToggleOpen, open, id, mode, contentClassName, onContentClick, keepUnderlayingElement, onClickOut, ...props }: PropsWithChildren<{
+ * A helper function for interacting with collapsables without a reference
+ */
+export declare function CollapsableInterface(id: string): _CollapsableInterface;
+declare const _default: React.ForwardRefExoticComponent<(React.PropsWithChildren<{
     title: React.ReactNode;
-    className?: string;
-    contentClassName?: string;
+    className?: string | undefined;
+    contentClassName?: string | undefined;
     onToggleOpen: (isOpen: boolean) => void;
     open: boolean;
     id?: string | undefined;
-    "data-testid"?: string;
-    onContentClick?: HTMLAttributes<HTMLInputElement>["onClick"];
+    "data-testid"?: string | undefined;
+    onContentClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
     /**
      * This flag indicates if the collapsable content should be kept in HTML while it's collapsed
      *
      * Usefull for responsive layouts where the collapsable should not "behave" as a collapsable content
      */
-    keepUnderlayingElement?: boolean;
+    keepUnderlayingElement?: boolean | undefined;
     /**
      * To detect when the user clicks out of the container
      */
-    onClickOut?: () => void;
+    onClickOut?: (() => void) | undefined;
 } & ({
     /** This will define if the content will be floating under the title or will expand all the container as one */
-    mode?: "block";
+    mode?: "block" | undefined;
 } | {
     mode: "float";
     alignTo: AnchoredTooltipAlignment;
-})> & Omit<HTMLAttributes<HTMLDivElement>, "title">): JSX.Element;
-declare class _CollapsableInterface {
-    _id: string;
-    constructor(id: string);
-    _getElements(): {
-        header: HTMLElement | null;
-        content: HTMLElement | null;
-    };
-    open(onOpened: () => void): void;
-    getElement(type: "header" | "content"): HTMLDivElement | null;
-}
-/**
- * A helper function for interacting with collapsables without a reference
- */
-export declare function CollapsableInterface(id: string): _CollapsableInterface;
-export {};
+})> & Omit<React.HTMLAttributes<HTMLDivElement>, "title">) & React.RefAttributes<{
+    redimension: () => void;
+}>>;
+export default _default;