superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/react/components/Autocomplete.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,16 +29,18 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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 __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -52,7 +56,7 @@ var Autocomplete = /** @class */ (function (_super) {
     function Autocomplete(props) {
         var _a, _b;
         var _this = _super.call(this, props) || this;
-        _this.htmlId = react_id_generator_1.default();
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             selectedItem: (_a = _this.props.value) !== null && _a !== void 0 ? _a : null,
             filteredItems: null,
@@ -81,7 +85,7 @@ var Autocomplete = /** @class */ (function (_super) {
         setTimeout(function () {
             var filteredItems;
             if (!event.query.trim().length) {
-                filteredItems = __spreadArrays(_this.props.items);
+                filteredItems = __spreadArray([], _this.props.items, true);
             }
             else {
                 filteredItems = _this.props.items.filter(function (item) {
@@ -111,7 +115,7 @@ var Autocomplete = /** @class */ (function (_super) {
         var _this = this;
         var classes, inputFieldClass;
         if (this.props.isSearchField) {
-            classes = classnames_1.default('sd-searchbar', 'sd-searchbar--boxed', {
+            classes = (0, classnames_1.default)('sd-searchbar', 'sd-searchbar--boxed', {
                 'sd-searchbar--disabled': this.props.disabled,
                 'sd-searchbar--invalid': this.props.invalid || this.state.invalid,
                 'sd-searchbar--focused': this.state.focused,
@@ -119,7 +123,7 @@ var Autocomplete = /** @class */ (function (_super) {
             inputFieldClass = 'sd-searchbar__input';
         }
         else {
-            classes = classnames_1.default('sd-input', {
+            classes = (0, classnames_1.default)('sd-input', {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
                 'sd-input--disabled': this.props.disabled,

package/react/components/Avatar.d.ts

@@ -14,6 +14,15 @@ export declare class AvatarContentText extends React.PureComponent<ITextAvatar>
 export declare class AvatarContentImage extends React.PureComponent<IImageAvatar> {
     render(): JSX.Element;
 }
+interface IPropsAvatarGroup {
+    appearance?: 'stacked' | 'grid';
+    borderColor?: '000' | '050' | '100' | '150' | '200';
+    className?: string;
+    children: React.ReactNode;
+}
+export declare class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
+    render(): JSX.Element;
+}
 interface IPropsAvatarWrapper {
     size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
     statusIndicator?: {

package/react/components/Avatar.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -35,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarWrapper = exports.AvatarContentImage = exports.AvatarContentText = void 0;
+exports.AvatarWrapper = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var AvatarContentText = /** @class */ (function (_super) {
@@ -67,6 +69,24 @@ var AvatarContentImage = /** @class */ (function (_super) {
     return AvatarContentImage;
 }(React.PureComponent));
 exports.AvatarContentImage = AvatarContentImage;
+var AvatarGroup = /** @class */ (function (_super) {
+    __extends(AvatarGroup, _super);
+    function AvatarGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarGroup.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('sd-avatar-group', (_a = {},
+            _a["sd-avatar-group--stacked"] = this.props.appearance === undefined,
+            _a["sd-avatar-group--".concat(this.props.appearance)] = this.props.appearance,
+            _a["sd-avatar-group__border--000"] = this.props.borderColor === undefined,
+            _a["sd-avatar-group__border--".concat(this.props.borderColor)] = this.props.borderColor,
+            _a), this.props.className);
+        return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
+    };
+    return AvatarGroup;
+}(React.PureComponent));
+exports.AvatarGroup = AvatarGroup;
 var AvatarWrapper = /** @class */ (function (_super) {
     __extends(AvatarWrapper, _super);
     function AvatarWrapper() {
@@ -74,7 +94,7 @@ var AvatarWrapper = /** @class */ (function (_super) {
     }
     AvatarWrapper.prototype.render = function () {
         var _a;
-        return (React.createElement("span", { className: classnames_1.default('sd-avatar', {
+        return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
                 'sd-avatar--small': this.props.size === 'small',
                 'sd-avatar--medium': this.props.size === 'medium' || this.props.size == null,
                 'sd-avatar--large': this.props.size === 'large',

package/react/components/Badge.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     color?: string;
     shape?: 'round' | 'square';
     children?: React.ReactNode;
+    hexColor?: string;
     'data-test-id'?: string;
 }
 export declare class Badge extends React.PureComponent<IProps> {

package/react/components/Badge.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -45,18 +47,18 @@ var Badge = /** @class */ (function (_super) {
     }
     Badge.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('badge', (_a = {},
-            _a["badge--" + this.props.type] = this.props.type && !this.props.color,
-            _a["" + this.props.color] = this.props.color && !this.props.type,
+        var classes = (0, classnames_1.default)('badge', (_a = {},
+            _a["badge--".concat(this.props.type)] = this.props.type && !this.props.color,
+            _a["".concat(this.props.color)] = this.props.color && !this.props.type,
             _a['badge--square'] = this.props.shape === 'square',
             _a));
         if (this.props.children) {
             return (React.createElement("div", { className: 'element-with-badge', "data-test-id": this.props['data-test-id'] },
                 this.props.children,
-                React.createElement("span", { className: classes, "data-test-id": "badge-content" }, this.props.text)));
+                React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": "badge-content" }, this.props.text)));
         }
         else {
-            return React.createElement("span", { className: classes, "data-test-id": this.props['data-test-id'] }, this.props.text);
+            return React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": this.props['data-test-id'] }, this.props.text);
         }
     };
     return Badge;

package/react/components/Button.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -48,12 +50,12 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _a;
         var _this = this;
-        var classes = classnames_1.default('btn', (_a = {
+        var classes = (0, classnames_1.default)('btn', (_a = {
                 'btn--expanded': this.props.expand
             },
-            _a["btn--" + this.props.size] = this.props.size !== 'normal' && this.props.size !== undefined,
-            _a["btn--" + this.props.type] = this.props.type !== 'default' && this.props.type !== undefined,
-            _a["btn--" + this.props.style] = this.props.style !== 'filled' && this.props.style !== undefined,
+            _a["btn--".concat(this.props.size)] = this.props.size !== 'normal' && this.props.size !== undefined,
+            _a["btn--".concat(this.props.type)] = this.props.type !== 'default' && this.props.type !== undefined,
+            _a["btn--".concat(this.props.style)] = this.props.style !== 'filled' && this.props.style !== undefined,
             _a['btn--disabled'] = this.props.disabled,
             _a['btn--icon-only'] = this.props.iconOnly,
             _a['btn--ui-dark'] = this.props.theme === 'dark',

package/react/components/ButtonGroup.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 interface IProps {
     orientation?: 'horizontal' | 'vertical';
-    spaces?: 'comfort' | 'compact';
-    align?: 'left' | 'right' | 'center' | 'inline';
+    spaces?: 'comfort' | 'compact' | 'loose' | 'no-space';
+    align?: 'start' | 'end' | 'center' | 'inline' | 'sub';
     padded?: boolean;
+    subgroup?: boolean;
     children: React.ReactNode;
+    className?: string;
 }
 export declare class ButtonGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/ButtonGroup.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -45,13 +47,15 @@ var ButtonGroup = /** @class */ (function (_super) {
     }
     ButtonGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('button-group', (_a = {},
-            _a["button-group--left"] = this.props.align === undefined && !this.props.orientation,
-            _a["button-group--" + this.props.align] = this.props.align && !this.props.orientation,
+        var classes = (0, classnames_1.default)('button-group', (_a = {},
+            _a["button-group--start"] = this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
+            _a["button-group--".concat(this.props.align)] = this.props.align && !this.props.orientation,
             _a["button-group--vertical"] = this.props.orientation === 'vertical',
-            _a["button-group--compact"] = this.props.spaces === 'compact',
+            _a["button-group--comfort"] = this.props.spaces === undefined,
+            _a["button-group--".concat(this.props.spaces)] = this.props.spaces,
             _a["button-group--padded"] = this.props.padded === true,
-            _a));
+            _a["button-group--sub-group"] = this.props.subgroup === true,
+            _a), this.props.className);
         return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
     };
     return ButtonGroup;

package/react/components/Carousel.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -51,7 +53,7 @@ var Carousel = /** @class */ (function (_super) {
         var itemTemplate = function (props) { return (React.createElement("div", { className: "sd-thumb-carousel__item" },
             React.createElement("div", { className: "sd-thumb-carousel__item-inner" },
                 React.createElement("img", { src: props.src, alt: props.alt })))); };
-        return React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? '' : 'dark-ui', className: this.props.className },
+        return React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui', className: this.props.className },
             React.createElement(carousel_1.Carousel, { id: this.props.id, value: this.props.images, numVisible: this.props.numVisible, numScroll: this.props.numScroll, responsiveOptions: this.props.responsiveOptions, itemTemplate: itemTemplate, header: header, footer: footer, indicatorsContentClassName: 'sd-thumb-carousel__indicators', onPageChange: this.props.onPageChange }));
     };
     return Carousel;

package/react/components/CheckButtonGroup.d.ts

@@ -2,8 +2,10 @@ import * as React from 'react';
 interface IProps {
     orientation?: 'horizontal' | 'vertical';
     grid?: boolean;
-    align?: 'left' | 'right' | 'center' | 'inline';
+    align?: 'start' | 'end' | 'center' | 'inline';
     padded?: boolean;
+    groupLabel?: string;
+    groupLabelledBy?: string;
 }
 export declare class CheckButtonGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/CheckButtonGroup.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -38,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckButtonGroup = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var FormLabel_1 = require("./Form/FormLabel");
 var CheckButtonGroup = /** @class */ (function (_super) {
     __extends(CheckButtonGroup, _super);
     function CheckButtonGroup() {
@@ -45,14 +48,19 @@ var CheckButtonGroup = /** @class */ (function (_super) {
     }
     CheckButtonGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('sd-check-button__group', (_a = {},
-            _a["sd-check-button__group--" + this.props.align] = this.props.align,
-            _a["sd-check-button__group--left"] = !this.props.grid && this.props.align === undefined,
+        var classes = (0, classnames_1.default)('sd-check-button__group', (_a = {},
+            _a["sd-check-button__group--".concat(this.props.align)] = this.props.align,
+            _a["sd-check-button__group--start"] = !this.props.grid && this.props.align === undefined,
             _a["button-group--vertical"] = this.props.orientation === 'vertical',
             _a["sd-check-button__group--grid"] = this.props.grid,
             _a["sd-check-button__group--padded"] = this.props.padded === true,
             _a));
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return (React.createElement(React.Fragment, null, this.props.groupLabel ?
+            React.createElement("div", { className: 'sd-check-button__group-wrapper', "aria-labelledby": this.props.groupLabelledBy },
+                React.createElement(FormLabel_1.FormLabel, { forId: 'group', text: this.props.groupLabel }),
+                React.createElement("div", { className: classes }, this.props.children))
+            :
+                React.createElement("div", { className: classes }, this.props.children)));
     };
     return CheckButtonGroup;
 }(React.PureComponent));

package/react/components/CheckGroup.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 interface IProps {
     orientation?: 'horizontal' | 'vertical';
     children: React.ReactNode;
+    groupLabelledBy?: string;
 }
 export declare class CheckGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/CheckGroup.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -45,10 +47,10 @@ var CheckGroup = /** @class */ (function (_super) {
     }
     CheckGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('sd-check__group-new', (_a = {},
+        var classes = (0, classnames_1.default)('sd-check__group-new', (_a = {},
             _a["sd-check__group-new--vertical"] = this.props.orientation === 'vertical',
             _a));
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return (React.createElement("div", { className: classes, "aria-labelledby": this.props.groupLabelledBy }, this.props.children));
     };
     return CheckGroup;
 }(React.PureComponent));

package/react/components/Checkbox.d.ts

@@ -2,12 +2,13 @@ import * as React from 'react';
 interface IProps {
     label: {
         text: string;
-        side?: 'left' | 'right';
+        side?: 'start' | 'end';
         hidden?: boolean;
     };
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
 export declare class Checkbox extends React.Component<IProps> {

package/react/components/Checkbox.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -42,7 +44,7 @@ var Checkbox = /** @class */ (function (_super) {
     __extends(Checkbox, _super);
     function Checkbox(props) {
         var _this = _super.call(this, props) || this;
-        _this.htmlId = react_id_generator_1.default();
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
@@ -52,8 +54,8 @@ var Checkbox = /** @class */ (function (_super) {
         }
     };
     Checkbox.prototype.render = function () {
-        return (React.createElement("span", { className: "sd-check-new__wrapper", "label-position": this.props.label.side || null, tabIndex: -1 },
-            React.createElement("input", { type: "checkbox", className: "sd-check-new__input", id: this.htmlId, tabIndex: 0, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
+        return (React.createElement("span", { className: "sd-check-new__wrapper", "label-position": this.props.label.side || null, tabIndex: this.props.tabindex === undefined ? undefined : -1 },
+            React.createElement("input", { type: "checkbox", className: "sd-check-new__input", id: this.htmlId, tabIndex: this.props.tabindex, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
             React.createElement("span", { className: "sd-check-new" }),
             this.props.label.hidden ? React.createElement("label", { htmlFor: this.htmlId, "aria-label": this.props.label.text }) : null,
             !this.props.label.hidden ? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));

package/react/components/CheckboxButton.d.ts

@@ -8,6 +8,7 @@ interface IProps {
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
 export declare class CheckboxButton extends React.Component<IProps> {

package/react/components/CheckboxButton.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -42,7 +44,7 @@ var CheckboxButton = /** @class */ (function (_super) {
     __extends(CheckboxButton, _super);
     function CheckboxButton(props) {
         var _this = _super.call(this, props) || this;
-        _this.htmlId = react_id_generator_1.default();
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
@@ -52,11 +54,11 @@ var CheckboxButton = /** @class */ (function (_super) {
         }
     };
     CheckboxButton.prototype.render = function () {
-        return (React.createElement("span", { className: "sd-check-button sd-check-button--native", tabIndex: -1 },
-            React.createElement("input", { type: "checkbox", className: "sd-check-button__input", id: this.htmlId, tabIndex: 0, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
+        return (React.createElement("span", { className: "sd-check-button sd-check-button--native", tabIndex: this.props.tabindex === undefined ? undefined : -1 },
+            React.createElement("input", { type: "checkbox", className: "sd-check-button__input", id: this.htmlId, tabIndex: this.props.tabindex, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
             React.createElement("label", { className: "sd-check-button__text-label", htmlFor: this.htmlId, "aria-label": this.props.label.hidden ? this.props.label.text : undefined },
                 this.props.label.icon ?
-                    React.createElement("i", { className: "icon-" + this.props.label.icon, "aria-hidden": "true" }) : null,
+                    React.createElement("i", { className: "icon-".concat(this.props.label.icon), "aria-hidden": "true" }) : null,
                 !this.props.label.hidden || !this.props.label.icon ?
                     React.createElement("span", { className: "sd-check-button__text-label-inner" }, this.props.label.text) : null)));
     };

package/react/components/ContentDivider.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    type?: 'dashed' | 'dotted' | 'solid';
+    orientation?: 'horizontal' | 'vertical';
+    align?: 'center' | 'left' | 'right';
+    border?: boolean;
+    margin?: 'x-small' | 'small' | 'medium' | 'large' | 'none';
+    children?: React.ReactNode;
+}
+export declare class ContentDivider extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};