widenarrow-ui 1.1.34 → 1.1.37

package/lib/components/MultiActionButton/MultiActionButton.types.d.ts

@@ -25,6 +25,7 @@ export interface MultiActionButtonProps {
     loading?: boolean;
     withEllipsis?: boolean;
     autoFocus?: boolean;
-    ariaLabel?: string;
+    leftAriaLabel?: string;
+    rightAriaLabel?: string;
     tabIndex?: number;
 }

package/lib/components/SwitchButton/SwitchButton.types.d.ts

@@ -1,7 +1,8 @@
 export interface SwitchButtonProps {
     checked: boolean;
-    name?: string;
+    name: string;
     label?: string;
+    ariaLabel?: string;
     disabled?: boolean;
     alignCenter?: boolean;
     className?: string;

package/lib/index.d.ts

@@ -867,7 +867,8 @@ interface MultiActionButtonProps {
     loading?: boolean;
     withEllipsis?: boolean;
     autoFocus?: boolean;
-    ariaLabel?: string;
+    leftAriaLabel?: string;
+    rightAriaLabel?: string;
     tabIndex?: number;
 }
 
@@ -936,8 +937,9 @@ declare const SortableTable: FC<SortableTableProps>;
 
 interface SwitchButtonProps {
     checked: boolean;
-    name?: string;
+    name: string;
     label?: string;
+    ariaLabel?: string;
     disabled?: boolean;
     alignCenter?: boolean;
     className?: string;

package/lib/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, Fragment, memo, useRef, useEffect, useState, useMemo, isValidElement, cloneElement, createContext, useContext, useCallback } from 'react';
-import { is, isEmpty, path, times, sort, pipe, prop, ascend, descend, pickBy, has } from 'ramda';
+import { is, pickBy, isEmpty, path, times, sort, pipe, prop, ascend, descend, has } from 'ramda';
 import { Tooltip } from 'react-tooltip';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
@@ -200,6 +200,165 @@ var Box = forwardRef(function (_a, ref) {
         _b.position_relative = ref, _b["position_".concat(position)] = is(String, position), _b["showOnBreakpoint_".concat(showOnBreakpoint)] = is(String, showOnBreakpoint), _b[className] = className, _b))), style: style, ref: ref, onClick: onClick }, otherProps, { children: children && children })));
 });
 
+function uuid() {
+    function chr4() {
+        return Math.random().toString(16).slice(-4);
+    }
+    return "".concat(chr4()).concat(chr4(), "-").concat(chr4(), "-").concat(chr4(), "-").concat(chr4());
+}
+/**
+ * Helper function to verify that passed argument is a valid
+ * array with content. Used both as a truthy value and as a plucker
+ * @function isArrayWithContent
+ * @param {Array} array
+ * @returns {Boolean}
+ */
+var isArrayWithContent = function (array) {
+    if (!array) {
+        return false;
+    }
+    return is(Array, array) && !isEmpty(array);
+};
+/**
+ * Helper function to verify that passed argument is a valid
+ * object with content. Used both as a truthy value and as a plucker
+ * @function isObjectWithContent
+ * @returns {Boolean}
+ */
+var isObjectWithContent = function (object) { return is(Object, object) && !isEmpty(object); };
+/**
+ * @function toLowerCustom
+ * @param {Any} val
+ * @returns {String} if string it is lowerCased otherwise the initial value
+ */
+var toLowerCustom = function (val) {
+    if (is(String, val)) {
+        return val.toLowerCase();
+    }
+    return val;
+};
+/**
+ * @function masterSort
+ * @param sortOptions {Object} { keyName, ascending }
+ * @param array {Array}
+ * @returns {Array} sorted array
+ */
+var masterSort = function (array, _a) {
+    var keyName = _a.keyName, ascending = _a.ascending;
+    var f = ascending ? ascend : descend;
+    return sort(f(pipe(prop(keyName), toLowerCustom)), array);
+};
+/**
+ * @function sortObjectsInArrayByMultipleKeys
+ * @param {Array} array
+ * @param {Array} sortOptions
+ * @returns {Array} with objects sorted
+ */
+var sortObjectsInArrayByMultipleKeys = function (array, sortOptions) {
+    if (!isArrayWithContent(array) || !sortOptions) {
+        return [];
+    }
+    if (isArrayWithContent(array) && is(Array, sortOptions) && !sortOptions.length) {
+        return array;
+    }
+    return masterSort(array, sortOptions[0]);
+};
+/**
+ * @function getSortableTableState
+ * @param currentState
+ * @param newSortOption
+ */
+var getSortableTableState = function (currentState, newSortOption) {
+    if (!isArrayWithContent(currentState)) {
+        return [__assign(__assign({}, newSortOption), { ascending: true })];
+    }
+    if (!isObjectWithContent(newSortOption)) {
+        return currentState;
+    }
+    var itemInArray = currentState.find(function (val) { return val.keyName === newSortOption.keyName; });
+    // Is clicking something that has been clicked before
+    if (itemInArray) {
+        // If toggling same column as previous click
+        if (currentState[0].keyName === newSortOption.keyName) {
+            return __spreadArray([
+                __assign(__assign({}, itemInArray), { ascending: !itemInArray.ascending })
+            ], currentState.filter(function (val) { return val.keyName !== newSortOption.keyName; }), true);
+        }
+        // If going back to one already selected
+        return __spreadArray([
+            __assign({}, itemInArray)
+        ], currentState.filter(function (val) { return val.keyName !== newSortOption.keyName; }), true);
+    }
+    // Selecting and option that has not yet been selected - Set ascending to true
+    return __spreadArray([{ ascending: true, keyName: newSortOption.keyName }], currentState, true);
+};
+/**
+ * @function getSortableTableState
+ * @param {Array} state [{}]
+ * @param {String} cellKey [{}]
+ * @returns {Boolean}
+ */
+var tableColumnIsActive = function (_a) {
+    var state = _a.state, cellKey = _a.cellKey;
+    return path([0, 'keyName'], state) === cellKey;
+};
+/**
+ * @function isSortingAscending
+ * @param {Array} state [{}]
+ * @returns {Boolean}
+ */
+var isSortingAscending = function (state) { return path([0, 'ascending'], state); };
+/**
+ * @function getPaginationArray
+ * @param pagination
+ * @returns {Array}
+ */
+var getPaginationArray = function (pagination) {
+    var pages = pagination.pages || 0;
+    var maxButtons = 5;
+    if (pages <= maxButtons + 1) {
+        return __spreadArray([], times(function (i) { return ({
+            page: i + 1,
+            type: 'page'
+        }); }, pages), true);
+    }
+    var closeToStart = pagination.currentPage < maxButtons;
+    if (closeToStart) {
+        return __spreadArray(__spreadArray([], times(function (i) { return ({
+            page: i + 1,
+            type: 'page'
+        }); }, maxButtons), true), [
+            { page: 0, type: 'dots' },
+            { page: pages, type: 'page' }
+        ], false);
+    }
+    var closeToEnd = maxButtons - 1 > pages - pagination.currentPage;
+    if (closeToEnd) {
+        return __spreadArray([
+            { page: 1, type: 'page' },
+            { page: 0, type: 'dots' }
+        ], times(function (i) { return ({
+            page: pages - i,
+            type: 'page'
+        }); }, maxButtons).reverse(), true);
+    }
+    return [
+        { page: 1, type: 'page' },
+        { page: 0, type: 'dots' },
+        { page: pagination.currentPage - 1, type: 'page' },
+        { page: pagination.currentPage, type: 'page' },
+        { page: pagination.currentPage + 1, type: 'page' },
+        { page: 0, type: 'dots' },
+        { page: pages, type: 'page' }
+    ];
+};
+/**
+ * @function pickAttributes
+ * @param {Object} attr
+ * @returns {Object}
+ */
+var pickAttributes = function (attributes) { return pickBy(function (val) { return val !== undefined; }, attributes); };
+
 var IconTypes;
 (function (IconTypes) {
     IconTypes["ACCOUNT_SETTINGS"] = "iconAccountSettings";
@@ -526,159 +685,6 @@ var AppColors;
     AppColors["MAIN_DARK"] = "#1c202b";
 })(AppColors || (AppColors = {}));
 
-function uuid() {
-    function chr4() {
-        return Math.random().toString(16).slice(-4);
-    }
-    return "".concat(chr4()).concat(chr4(), "-").concat(chr4(), "-").concat(chr4(), "-").concat(chr4());
-}
-/**
- * Helper function to verify that passed argument is a valid
- * array with content. Used both as a truthy value and as a plucker
- * @function isArrayWithContent
- * @param {Array} array
- * @returns {Boolean}
- */
-var isArrayWithContent = function (array) {
-    if (!array) {
-        return false;
-    }
-    return is(Array, array) && !isEmpty(array);
-};
-/**
- * Helper function to verify that passed argument is a valid
- * object with content. Used both as a truthy value and as a plucker
- * @function isObjectWithContent
- * @returns {Boolean}
- */
-var isObjectWithContent = function (object) { return is(Object, object) && !isEmpty(object); };
-/**
- * @function toLowerCustom
- * @param {Any} val
- * @returns {String} if string it is lowerCased otherwise the initial value
- */
-var toLowerCustom = function (val) {
-    if (is(String, val)) {
-        return val.toLowerCase();
-    }
-    return val;
-};
-/**
- * @function masterSort
- * @param sortOptions {Object} { keyName, ascending }
- * @param array {Array}
- * @returns {Array} sorted array
- */
-var masterSort = function (array, _a) {
-    var keyName = _a.keyName, ascending = _a.ascending;
-    var f = ascending ? ascend : descend;
-    return sort(f(pipe(prop(keyName), toLowerCustom)), array);
-};
-/**
- * @function sortObjectsInArrayByMultipleKeys
- * @param {Array} array
- * @param {Array} sortOptions
- * @returns {Array} with objects sorted
- */
-var sortObjectsInArrayByMultipleKeys = function (array, sortOptions) {
-    if (!isArrayWithContent(array) || !sortOptions) {
-        return [];
-    }
-    if (isArrayWithContent(array) && is(Array, sortOptions) && !sortOptions.length) {
-        return array;
-    }
-    return masterSort(array, sortOptions[0]);
-};
-/**
- * @function getSortableTableState
- * @param currentState
- * @param newSortOption
- */
-var getSortableTableState = function (currentState, newSortOption) {
-    if (!isArrayWithContent(currentState)) {
-        return [__assign(__assign({}, newSortOption), { ascending: true })];
-    }
-    if (!isObjectWithContent(newSortOption)) {
-        return currentState;
-    }
-    var itemInArray = currentState.find(function (val) { return val.keyName === newSortOption.keyName; });
-    // Is clicking something that has been clicked before
-    if (itemInArray) {
-        // If toggling same column as previous click
-        if (currentState[0].keyName === newSortOption.keyName) {
-            return __spreadArray([
-                __assign(__assign({}, itemInArray), { ascending: !itemInArray.ascending })
-            ], currentState.filter(function (val) { return val.keyName !== newSortOption.keyName; }), true);
-        }
-        // If going back to one already selected
-        return __spreadArray([
-            __assign({}, itemInArray)
-        ], currentState.filter(function (val) { return val.keyName !== newSortOption.keyName; }), true);
-    }
-    // Selecting and option that has not yet been selected - Set ascending to true
-    return __spreadArray([{ ascending: true, keyName: newSortOption.keyName }], currentState, true);
-};
-/**
- * @function getSortableTableState
- * @param {Array} state [{}]
- * @param {String} cellKey [{}]
- * @returns {Boolean}
- */
-var tableColumnIsActive = function (_a) {
-    var state = _a.state, cellKey = _a.cellKey;
-    return path([0, 'keyName'], state) === cellKey;
-};
-/**
- * @function isSortingAscending
- * @param {Array} state [{}]
- * @returns {Boolean}
- */
-var isSortingAscending = function (state) { return path([0, 'ascending'], state); };
-/**
- * @function getPaginationArray
- * @param pagination
- * @returns {Array}
- */
-var getPaginationArray = function (pagination) {
-    var pages = pagination.pages || 0;
-    var maxButtons = 5;
-    if (pages <= maxButtons + 1) {
-        return __spreadArray([], times(function (i) { return ({
-            page: i + 1,
-            type: 'page'
-        }); }, pages), true);
-    }
-    var closeToStart = pagination.currentPage < maxButtons;
-    if (closeToStart) {
-        return __spreadArray(__spreadArray([], times(function (i) { return ({
-            page: i + 1,
-            type: 'page'
-        }); }, maxButtons), true), [
-            { page: 0, type: 'dots' },
-            { page: pages, type: 'page' }
-        ], false);
-    }
-    var closeToEnd = maxButtons - 1 > pages - pagination.currentPage;
-    if (closeToEnd) {
-        return __spreadArray([
-            { page: 1, type: 'page' },
-            { page: 0, type: 'dots' }
-        ], times(function (i) { return ({
-            page: pages - i,
-            type: 'page'
-        }); }, maxButtons).reverse(), true);
-    }
-    return [
-        { page: 1, type: 'page' },
-        { page: 0, type: 'dots' },
-        { page: pagination.currentPage - 1, type: 'page' },
-        { page: pagination.currentPage, type: 'page' },
-        { page: pagination.currentPage + 1, type: 'page' },
-        { page: 0, type: 'dots' },
-        { page: pages, type: 'page' }
-    ];
-};
-
 var styles$r = {"body":"ToolTip-module_EfvT16","container":"ToolTip-module_rxb-Ce","withEllipsis":"ToolTip-module_vea-tI"};
 
 var s$r = classNames.bind(styles$r);
@@ -2318,8 +2324,7 @@ var Button = memo(function (_a) {
         _c.autoFocus = autoFocus,
         _c.tabIndex = tabIndex,
         _c);
-    var buttonAttributes = pickBy(function (val) { return val !== undefined; }, baseAttributes);
-    var buttonMarkup = (jsxs("button", __assign({}, buttonAttributes, { children: [loading && !icon ? (jsx("div", { className: s$n('spinnerContainer'), children: jsx(SolidSpinner, { className: s$n('spinner'), type: HierarchyTypes.SECONDARY, size: SizeTypes.SMALL, disabled: true }) })) : null, children ? jsx("div", { className: s$n('childrenContainer'), children: children }) : getInnerMarkup()] })));
+    var buttonMarkup = (jsxs("button", __assign({}, pickAttributes(baseAttributes), { children: [loading && !icon ? (jsx("div", { className: s$n('spinnerContainer'), children: jsx(SolidSpinner, { className: s$n('spinner'), type: HierarchyTypes.SECONDARY, size: SizeTypes.SMALL, disabled: true }) })) : null, children ? jsx("div", { className: s$n('childrenContainer'), children: children }) : getInnerMarkup()] })));
     if (toolTip) {
         return (jsx(ToolTip, { text: "".concat(toolTip), id: id ? "".concat(id) : undefined, withEllipsis: withEllipsis, children: buttonMarkup }));
     }
@@ -2417,7 +2422,7 @@ var Card = function (_a) {
         role: !!onClickCallback ? 'button' : 'presentation',
         onClick: !!onClickCallback ? onClickCallback : undefined
     };
-    var sharedAttributes = pickBy(function (val) { return val !== undefined; }, baseAttributes);
+    var sharedAttributes = pickAttributes(baseAttributes);
     var mergedClassNames = s$k('container', __assign(__assign(__assign({ container_withHoverEffect: withHoverEffect }, paddingClassNames({ padding: padding, paddingX: paddingX, paddingY: paddingY, paddingTop: paddingTop, paddingBottom: paddingBottom, paddingRight: paddingRight, paddingLeft: paddingLeft })), flexClassNames({
         displayFlex: displayFlex,
         displayFlexCenter: displayFlexCenter,
@@ -2750,8 +2755,7 @@ var InlineButton = memo(function (_a) {
         _c['aria-label'] = ariaLabel || text,
         _c.style = style,
         _c);
-    var buttonAttributes = pickBy(function (val) { return val !== undefined; }, baseAttributes);
-    var button = (jsxs("button", __assign({}, buttonAttributes, { children: [loading && !icon ? (jsx("div", { className: s$f('spinnerContainer'), children: jsx(SolidSpinner, { className: s$f('spinner'), type: type, size: SizeTypes.EXTRA_SMALL, disabled: true }) })) : null, getInnerMarkup()] })));
+    var button = (jsxs("button", __assign({}, pickAttributes(baseAttributes), { children: [loading && !icon ? (jsx("div", { className: s$f('spinnerContainer'), children: jsx(SolidSpinner, { className: s$f('spinner'), type: type, size: SizeTypes.EXTRA_SMALL, disabled: true }) })) : null, getInnerMarkup()] })));
     return toolTip ? (jsx(ToolTip, { text: "".concat(toolTip), withEllipsis: withEllipsis, id: id ? "".concat(id) : undefined, offset: 12, className: s$f('toolTip'), children: button })) : (button);
 });
 
@@ -2946,12 +2950,11 @@ var IconButton = memo(function (_a) {
         _c.target = href ? '_blank' : undefined,
         _c.rel = href ? 'noopener noreferrer' : undefined,
         _c);
-    var buttonAttributes = pickBy(function (val) { return val !== undefined; }, baseAttributes);
     var buttonMarkup = function () {
         if (href) {
-            return (jsxs("a", __assign({}, buttonAttributes, { children: [jsx("span", { className: s$a('text'), children: text || toolTip || ariaLabel || 'link' }), iconMarkup] })));
+            return (jsxs("a", __assign({}, pickAttributes(baseAttributes), { children: [jsx("span", { className: s$a('text'), children: text || toolTip || ariaLabel || 'link' }), iconMarkup] })));
         }
-        return (jsxs("button", __assign({}, buttonAttributes, { children: [jsx("span", { className: s$a('text'), children: text || toolTip || ariaLabel || 'button' }), iconMarkup] })));
+        return (jsxs("button", __assign({}, pickAttributes(baseAttributes), { children: [jsx("span", { className: s$a('text'), children: text || toolTip || ariaLabel || 'button' }), iconMarkup] })));
     };
     if (toolTip) {
         return (jsx(ToolTip, { text: "".concat(toolTip), id: id ? "".concat(id) : undefined, offset: 12, children: buttonMarkup() }));
@@ -3129,7 +3132,16 @@ var styles$5 = {"body":"MultiActionButton-module_BqAJK-","button":"MultiActionBu
 var s$5 = classNames.bind(styles$5);
 var MultiActionButton = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, iconClassName = _a.iconClassName, innerClassName = _a.innerClassName, id = _a.id, _g = _a.type, type = _g === void 0 ? HierarchyTypes.PRIMARY : _g, _h = _a.size, size = _h === void 0 ? SizeTypes.MEDIUM : _h, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, rotateLeftIconByDegree = _a.rotateLeftIconByDegree, rotateMiddleIconByDegree = _a.rotateMiddleIconByDegree, rotateRightIconByDegree = _a.rotateRightIconByDegree, text = _a.text, toolTip = _a.toolTip, iconSize = _a.iconSize, leftIcon = _a.leftIcon, middleIcon = _a.middleIcon, rightIcon = _a.rightIcon, withEllipsis = _a.withEllipsis, onRightClickCallback = _a.onRightClickCallback, onLeftClickCallback = _a.onLeftClickCallback, loading = _a.loading, disabled = _a.disabled, autoFocus = _a.autoFocus, ariaLabel = _a.ariaLabel, tabIndex = _a.tabIndex;
+    var className = _a.className, iconClassName = _a.iconClassName, innerClassName = _a.innerClassName, id = _a.id, _g = _a.type, type = _g === void 0 ? HierarchyTypes.PRIMARY : _g, _h = _a.size, size = _h === void 0 ? SizeTypes.MEDIUM : _h, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, rotateLeftIconByDegree = _a.rotateLeftIconByDegree, rotateMiddleIconByDegree = _a.rotateMiddleIconByDegree, rotateRightIconByDegree = _a.rotateRightIconByDegree, text = _a.text, toolTip = _a.toolTip, iconSize = _a.iconSize, leftIcon = _a.leftIcon, middleIcon = _a.middleIcon, rightIcon = _a.rightIcon, withEllipsis = _a.withEllipsis, onRightClickCallback = _a.onRightClickCallback, onLeftClickCallback = _a.onLeftClickCallback, loading = _a.loading, disabled = _a.disabled, autoFocus = _a.autoFocus, leftAriaLabel = _a.leftAriaLabel, rightAriaLabel = _a.rightAriaLabel, tabIndex = _a.tabIndex;
+    var getFallbackAriaLabel = function (position) {
+        if (text) {
+            return "".concat(text, " - ").concat(position, " button");
+        }
+        if (toolTip) {
+            return "".concat(toolTip, " - ").concat(position, " button");
+        }
+        return "".concat(position, " button");
+    };
     var buttonMarkup = (jsxs("div", { role: 'group', className: s$5('container', (_b = {},
             _b[className] = className,
             _b)), children: [loading ? (jsx(SolidSpinner, { className: s$5('spinner'), type: type === HierarchyTypes.PRIMARY ? HierarchyTypes.QUATERNARY : HierarchyTypes.SECONDARY, size: SizeTypes.SMALL })) : null, jsxs("div", { className: s$5('innerContainer', (_c = {},
@@ -3147,9 +3159,9 @@ var MultiActionButton = function (_a) {
                             button_disabled: loading || disabled,
                             button_noButtonRight: !rightIcon,
                             button_withEllipsis: withEllipsis
-                        }), disabled: loading || disabled, onClick: !loading ? onLeftClickCallback : undefined, autoFocus: autoFocus, "aria-label": text || ariaLabel || 'button', tabIndex: tabIndex, children: [leftIcon ? (jsx(Icon, { icon: leftIcon, size: iconSize, rotateIconByDegree: rotateLeftIconByDegree, className: s$5((_d = { icon: !iconSize, marginRight: !!text }, _d[iconClassName] = iconClassName, _d)) })) : null, jsx("span", { className: s$5('text', {
+                        }), disabled: loading || disabled, onClick: !loading ? onLeftClickCallback : undefined, autoFocus: autoFocus, "aria-label": leftAriaLabel || getFallbackAriaLabel('left'), tabIndex: tabIndex, children: [leftIcon ? (jsx(Icon, { icon: leftIcon, size: iconSize, rotateIconByDegree: rotateLeftIconByDegree, className: s$5((_d = { icon: !iconSize, marginRight: !!text }, _d[iconClassName] = iconClassName, _d)) })) : null, jsx("span", { className: s$5('text', {
                                     text_withEllipsis: withEllipsis
-                                }), children: text }), middleIcon ? (jsx(Icon, { icon: middleIcon, size: iconSize, rotateIconByDegree: rotateMiddleIconByDegree, className: s$5((_e = { icon: !iconSize, marginLeft: !!text }, _e[iconClassName] = iconClassName, _e)) })) : null] }), rightIcon ? (jsx("button", { className: s$5({ button: true, button_right: true, button_disabled: loading || disabled }), onClick: onRightClickCallback, children: jsx(Icon, { icon: rightIcon, size: iconSize, className: s$5((_f = { icon: !iconSize }, _f[iconClassName] = iconClassName, _f)), rotateIconByDegree: rotateRightIconByDegree }) })) : null] })] }));
+                                }), children: text }), middleIcon ? (jsx(Icon, { icon: middleIcon, size: iconSize, rotateIconByDegree: rotateMiddleIconByDegree, className: s$5((_e = { icon: !iconSize, marginLeft: !!text }, _e[iconClassName] = iconClassName, _e)) })) : null] }), rightIcon ? (jsx("button", { className: s$5({ button: true, button_right: true, button_disabled: loading || disabled }), "aria-label": rightAriaLabel || getFallbackAriaLabel('right'), onClick: onRightClickCallback, children: jsx(Icon, { icon: rightIcon, size: iconSize, className: s$5((_f = { icon: !iconSize }, _f[iconClassName] = iconClassName, _f)), rotateIconByDegree: rotateRightIconByDegree }) })) : null] })] }));
     if (toolTip) {
         return (jsx(ToolTip, { text: "".concat(toolTip), id: "".concat(id), withEllipsis: withEllipsis, children: buttonMarkup }));
     }
@@ -3277,22 +3289,25 @@ var styles$2 = {"body":"SwitchButton-module_BSiKOl","container":"SwitchButton-mo
 
 var s$2 = classNames.bind(styles$2);
 var SwitchButton = function (_a) {
-    var _b;
-    var className = _a.className, onClickCallback = _a.onClickCallback, checked = _a.checked, disabled = _a.disabled, label = _a.label, inlineLabel = _a.inlineLabel, _c = _a.name, name = _c === void 0 ? '' : _c, alignCenter = _a.alignCenter, marginBottom = _a.marginBottom;
-    return (jsxs("div", { className: s$2('container', (_b = {
+    var _b, _c;
+    var className = _a.className, onClickCallback = _a.onClickCallback, checked = _a.checked, disabled = _a.disabled, label = _a.label, inlineLabel = _a.inlineLabel, ariaLabel = _a.ariaLabel, name = _a.name, alignCenter = _a.alignCenter, marginBottom = _a.marginBottom;
+    var baseAttributes = (_b = {},
+        _b['aria-label'] = ariaLabel || label || name,
+        _b);
+    return (jsxs("div", __assign({ className: s$2('container', (_c = {
                 disabled: disabled,
                 checked: checked,
                 notChecked: !checked,
                 container_marginBottom: marginBottom,
                 container_withInlineLabel: !!(label && inlineLabel)
             },
-            _b[className] = className,
-            _b)), role: 'button', onClick: function (e) {
+            _c[className] = className,
+            _c)), role: 'button', onClick: function (e) {
             e.stopPropagation();
             onClickCallback();
-        }, children: [label ? (jsx("label", { className: s$2('label', { label_alignCenter: alignCenter, label_inlineLabel: inlineLabel, label_disabled: disabled }), htmlFor: name, children: label })) : null, jsxs("div", { className: s$2('button', {
+        } }, pickAttributes(baseAttributes), { children: [label ? (jsx("label", { className: s$2('label', { label_alignCenter: alignCenter, label_inlineLabel: inlineLabel, label_disabled: disabled }), htmlFor: name, children: label })) : null, jsxs("div", { className: s$2('button', {
                     button_alignCenter: alignCenter
-                }), children: [jsx("input", { className: s$2('input'), type: 'checkbox', name: name, checked: checked, disabled: disabled, onChange: function () { return undefined; }, "aria-label": label || name }), jsx("span", { className: s$2('line') }), jsx("span", { className: s$2('circle') })] })] }));
+                }), children: [jsx("input", { className: s$2('input'), type: 'checkbox', checked: checked, disabled: disabled, onChange: function () { return undefined; }, name: name }), jsx("span", { className: s$2('line') }), jsx("span", { className: s$2('circle') })] })] })));
 };
 
 var styles$1 = {"body":"SelectInput-module_w2mdUW","container":"SelectInput-module_hAgG55","container_marginBottom":"SelectInput-module_2lOd3w","container_disabled":"SelectInput-module_gU2gdL","inputContainer":"SelectInput-module_SGwhru","input":"SelectInput-module_Gn75Yy","input_disabled":"SelectInput-module_2fbHpO","input_hasError":"SelectInput-module_7qVlVo","input_sizeSm_small":"SelectInput-module_1LUt-c","input_sizeSm_medium":"SelectInput-module_VPhg9x","input_sizeSm_large":"SelectInput-module_Dpw8UL","input_sizeMd_small":"SelectInput-module_DM5Arh","input_sizeMd_medium":"SelectInput-module_NdCawf","input_sizeMd_large":"SelectInput-module_-tRhea","input_sizeLg_small":"SelectInput-module_BcApb-","input_sizeLg_medium":"SelectInput-module_YJn5Z8","input_sizeLg_large":"SelectInput-module_Omz8y0","input_sizeXl_small":"SelectInput-module_Mr9cBg","input_sizeXl_medium":"SelectInput-module_nlHNAR","input_sizeXl_large":"SelectInput-module_dChlCy","button":"SelectInput-module_KonxcG","dropDown":"SelectInput-module_MFE3na","spinner":"SelectInput-module_3OYBJ6","helperText":"SelectInput-module_u9GtGN"};