@decisiv/ui-components 2.0.1-alpha.16 → 2.0.1-alpha.161

package/lib/components/Tag/styles.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = exports.Content = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
+var _Action = _interopRequireWildcard(require("./Action"));
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _designTokens$color = _designTokens.default.color,
+    interactionColors = _designTokens$color.interaction,
+    statusColors = _designTokens$color.status;
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium',
+  dark: 'dark'
+};
+var FG_COLOR = {
+  pastel: _objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 0.8
+  }),
+  bright: _designTokens.color.base.snowWhite,
+  dark: _designTokens.color.base.snowWhite
+};
+var BORDER_OPACITY = {
+  pastel: 0.1,
+  bright: 0.15,
+  dark: 0.3
+};
+
+var getContentMaxWidth = function getContentMaxWidth(props) {
+  var isSingleChild = props.isSingleChild,
+      hasIcon = props.hasIcon;
+  var iconWidth = 12;
+  var actionBorder = 1;
+  var containerBorder = 2;
+  var baseWidth = _constants.MAX_CONTAINER_WIDTH - _constants.CONTAINER_X_PADDING - containerBorder;
+  var valuesToSubtract = [];
+  !isSingleChild && valuesToSubtract.push(_constants.ACTION_WIDTH, actionBorder);
+  hasIcon && valuesToSubtract.push(iconWidth, _constants.ICON_CONTENT_MARGIN);
+  return (0, _rem.default)(valuesToSubtract.reduce(function (r, v) {
+    return r - v;
+  }, baseWidth));
+};
+
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "styles__Content",
+  componentId: "sc-1sm93ik-0"
+})(["height:100%;color:inherit;align-items:center;border:0;display:flex;padding:0 ", ";border-right:1px solid ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING), function (_ref) {
+  var _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? 'bright' : _ref$palette;
+  return (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: BORDER_OPACITY[palette]
+  }));
+}, function (_ref2) {
+  var isSingleChild = _ref2.isSingleChild;
+  return (0, _styledComponents.css)(["max-width:", ";border-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_WIDTH, "px)"), isSingleChild ? '0' : '1px');
+}, (0, _rem.default)(_constants.ICON_CONTENT_MARGIN), getContentMaxWidth);
+
+exports.Content = Content;
+
+var contentSVGColor = function contentSVGColor(_ref3) {
+  var variant = _ref3.variant,
+      colorProp = _ref3.color;
+
+  if (variant === 'outline' && colorProp && colorProp in _commonUIColors.commonUIColors) {
+    return (0, _styledComponents.css)(["", " svg{color:", ";}"], Content, (0, _toColorString.default)(_commonUIColors.commonUIColors[colorProp]));
+  }
+
+  return null;
+};
+
+var getColorByProps = function getColorByProps(_ref4) {
+  var variant = _ref4.variant,
+      colorProp = _ref4.color,
+      _ref4$palette = _ref4.palette,
+      palette = _ref4$palette === void 0 ? 'bright' : _ref4$palette;
+  if (variant === 'outline') return _objectSpread({}, _designTokens.color.base.snowWhite, {
+    fg: _designTokens.color.base.alaskanHusky
+  });
+
+  if (colorProp && colorProp in _commonUIColors.commonUIThreeShadeColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[colorProp];
+    var fgColor = FG_COLOR[palette];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    return palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+  }
+
+  return _commonUIColors.commonUIColors.licoriceMousse;
+};
+
+var actionColors = {
+  normal: (0, _toColorString.default)(interactionColors.indianOcean),
+  danger: (0, _toColorString.default)(statusColors.danger.medium)
+};
+
+var actionColor = function actionColor(_ref5) {
+  var actionIntent = _ref5.actionIntent;
+  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette;
+
+  var borderColor = _objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: BORDER_OPACITY[palette]
+  });
+
+  return (0, _styledComponents.css)(["", ";border:1px solid ", ";", ""], (0, _color.default)(getColorByProps(props)), (0, _toColorString.default)(borderColor), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:inset 0 0 0 ", " ", ";", "{border-color:transparent;}}"], (0, _rem.default)(100), (0, _toColorString.default)(borderColor), Content)));
+};
+
+var variantModifiers = function variantModifiers(props) {
+  var _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'normal' : _props$variant;
+  if (variant === 'normal') return undefined;
+  return (0, _styledComponents.css)(["border:1px solid ", ";", " &:focus{border:1px solid ", ";::before{", ";}}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{background-color:", ";}"], (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 0.07
+  })))), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40));
+};
+
+var sizeModifiers = function sizeModifiers(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  if (size === 'small') return undefined;
+  var mediumHeight = (0, _rem.default)(25);
+  var mediumRadius = (0, _rem.default)(15);
+  var mediumBorderRadius = "0 ".concat(mediumRadius, " ").concat(mediumRadius, " 0");
+  return (0, _styledComponents.css)(["height:", ";border-radius:", ";&:focus{::before{border-radius:", ";}}", "{padding-right:", ";}", ",", "{border-radius:", ";}"], mediumHeight, mediumRadius, mediumRadius, _Action.default, (0, _rem.default)(2), _Action.default, _Action.ActionContainer, mediumBorderRadius);
+};
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1sm93ik-1"
+})(["position:relative;font-family:", ";font-size:", ";font-weight:", ";align-items:center;justify-content:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";background-color:transparent;padding:0;", " &:focus{border:1px solid ", ";&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';border-radius:", ";", ";}}&:focus-visible{outline:none;}&:hover{", "{color:", ";}}", ";", ";", ";", ";"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), (0, _rem.default)(20), (0, _rem.default)(26), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["cursor:pointer;"])), (0, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _rem.default)(10), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.default, actionColor, sizeModifiers, colorModifiers, variantModifiers, contentSVGColor);
+
+exports.Container = Container;

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

@@ -1,13 +1,15 @@
-import React, { Ref, RefAttributes, ButtonHTMLAttributes } from 'react';
+import React, { Ref, RefAttributes, AriaAttributes, DOMAttributes } from 'react';
 import { CSSObject } from 'styled-components';
 import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 export declare type TagRef = HTMLDivElement;
-export declare type TagActionButtonRef = HTMLButtonElement;
+export declare type TagActionRef = HTMLDivElement;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
-declare type ActionHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => unknown;
+export declare type ActionHandler = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => unknown;
 export declare type BaseProps = {
     color?: CommonUIColorKeys;
+    size?: 'medium' | 'small';
+    palette?: 'pastel' | 'bright' | 'dark';
     variant?: 'normal' | 'outline';
     style?: CSSObject;
 };
@@ -34,14 +36,11 @@ declare type ConditionalProps = Text & {
 } | Icon & {
     action?: never;
 } | Text & Icon | Text & Action & ActionIcon | Text & Icon & Action & ActionIcon;
-export declare type ActionButtonContainerProps = {
-    isFocused: boolean;
-};
-export declare type ActionButtonExtraProps = {
-    actionRef?: Ref<TagActionButtonRef>;
+export declare type ActionExtraProps = {
+    actionRef?: Ref<TagActionRef>;
     actionIntent?: 'normal' | 'danger';
-    actionAttributes?: ButtonHTMLAttributes<HTMLButtonElement>;
+    actionAttributes?: AriaAttributes & DOMAttributes<HTMLDivElement>;
 };
-export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionButtonExtraProps;
+export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionExtraProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/components/Tag/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC;AACnD,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,aAAK,aAAa,GAAG,CACnB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KACnD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,0BAA0B,GAAG;IACvC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,sBAAsB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAChD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;CACnE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}

package/lib/components/Tag/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,QAAQ,yEAqBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,QAAQ,yEAyBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/TextArea/TextArea.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var TextArea = _styledComponents.default.textarea.withConfig({
   displayName: "TextArea",
   componentId: "sc-19p1w4z-0"
-})(["font-family:", ";font-size:", ";font-weight:", ";overflow:auto;background-color:inherit;border:transparent;display:block;line-height:140%;margin:0 2px 2px 0;padding:1px 8px 4px 1px;resize:vertical;width:100%;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
+})(["font-family:", ";font-size:", ";font-weight:", ";overflow:auto;background-color:inherit;border:transparent;display:block;line-height:140%;margin:0 2px 2px 0;padding:1px 8px 4px 1px;resize:vertical;width:100%;&:active,&:focus{outline:none;}&:required{box-shadow:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
 
 var _default = TextArea;
 exports.default = _default;

package/lib/components/TextArea/index.js

@@ -21,6 +21,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function TextField(props, ref) {
   return _react.default.createElement(_InputField.default, _extends({}, props, {
+    isTextArea: true,
     overflow: "auto",
     ref: ref
   }), function (p) {

package/lib/components/TextArea/index.test.js

@@ -100,6 +100,11 @@ describe('TextArea', function () {
     props: _objectSpread({}, defaultProps, {
       disabled: true
     })
+  }, {
+    test: 'when label hidden',
+    props: _objectSpread({}, defaultProps, {
+      hideLabel: true
+    })
   }, {
     test: 'when readOnly',
     props: _objectSpread({}, defaultProps, {

package/lib/components/TextField/Input.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Input = _styledComponents.default.input.withConfig({
   displayName: "Input",
   componentId: "sc-1vtz9kb-0"
-})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:1px 10px 6px 1px;width:100%;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
+})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:0 10px 6px 1px;width:100%;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
 
 var _default = Input;
 exports.default = _default;

package/lib/components/TextField/index.test.js

@@ -105,6 +105,11 @@ describe('TextField', function () {
     props: _objectSpread({}, defaultProps, {
       disabled: true
     })
+  }, {
+    test: 'when label hidden',
+    props: _objectSpread({}, defaultProps, {
+      hideLabel: true
+    })
   }, {
     test: 'when readOnly',
     props: _objectSpread({}, defaultProps, {

package/lib/components/Toggle/Fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Fieldset.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA4BxC,QAAA,MAAM,QAAQ,oFAiDb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Fieldset.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAkCxC,QAAA,MAAM,QAAQ,oFAyDb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Toggle/Fieldset.js

@@ -17,33 +17,42 @@ var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingW
 
 var _styleModifiers = require("../../utils/styleModifiers");
 
-var _Option = require("./Option");
-
 var _Slider = require("./Slider");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var sharedInactiveStyles = (0, _styledComponents.css)(["cursor:not-allowed;&:active,&:focus{", "{border:1px solid transparent;", ";}}&:hover{", "{background-color:", ";}}", "{background-color:", ";}*{cursor:not-allowed;}"], _Slider.SliderContainer, (0, _focusRingWithColor.default)({
-  red: 0,
-  green: 0,
-  blue: 0,
-  alpha: 0
-}), _Slider.SliderSwitch, (0, _toColorString.default)(_designTokens.color.base.quarterMoon), _Slider.SliderSwitch, (0, _toColorString.default)(_designTokens.color.base.quarterMoon));
+var sharedInactiveStyles = function sharedInactiveStyles(_ref) {
+  var position = _ref.position;
+  return (0, _styledComponents.css)(["cursor:not-allowed;", "{", ";}&:active,&:focus{", "{border:1px solid transparent;", ";}}&:hover{", "{box-shadow:none;}}*{cursor:not-allowed;}"], _Slider.SliderContainer, position === 'left' ? (0, _styledComponents.css)(["opacity:0.15;"]) : (0, _styledComponents.css)(["background-color:rgb(179,215,197);"]), _Slider.SliderContainer, (0, _focusRingWithColor.default)({
+    red: 0,
+    green: 0,
+    blue: 0,
+    alpha: 0
+  }), _Slider.SliderSwitch);
+};
 
 var Fieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "Fieldset",
   componentId: "jon6ft-0"
-})(["display:inline-block;border-width:0;padding:0;margin:0;&:active,&:focus{outline:none;}&:active ", ",&:focus ", "{border:1px solid ", ";", ";}&:hover ", "{background-color:", ";}", "{border:1px solid transparent;}", ";", ";", ";"], _Slider.SliderContainer, _Slider.SliderContainer, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), _Slider.SliderSwitch, (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), _Slider.SliderContainer, (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref) {
-  var size = _ref.size;
+})(["display:inline-block;border-width:0;padding:0;margin:0;&:active,&:focus{outline:none;}&:hover{", "{box-shadow:0 0 0 ", "px rgba(37,38,46,0.15);}}&:active ", ",&:focus ", "{border:1px solid ", ";", "}&:hover ", "{background-color:toColorString(color.interaction.indianOcean)};}", "{border:1px solid transparent;}", ";", ";"], _Slider.SliderSwitch, _designTokens.spacing.base * 0.8, _Slider.SliderContainer, _Slider.SliderContainer, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), function (_ref2) {
+  var position = _ref2.position;
+  return position === 'left' ? (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40) : (0, _focusRingWithColor.default)(_designTokens.color.opacity.fullMoon50);
+}, _Slider.SliderSwitch, _Slider.SliderContainer, (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref3) {
+  var size = _ref3.size;
 
   if (size === 'small') {
     return (0, _styledComponents.css)(["height:", "px;"], 8 * 2 + 2);
   }
 
   return (0, _styledComponents.css)(["height:", "px;"], _designTokens.spacing.base * 2 + 2);
-}), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["", ";", "{color:", ";}"], sharedInactiveStyles, _Option.OptionLabel, (0, _toColorString.default)(_designTokens.color.opacity.charcoal40))), (0, _styleModifiers.when)('readOnly', sharedInactiveStyles));
+}), function (_ref4) {
+  var position = _ref4.position;
+  return (0, _styleModifiers.whenSome)([['disabled', true], ['readOnly', true]], (0, _styledComponents.css)(["", ""], sharedInactiveStyles({
+    position: position
+  })));
+});
 
 var _default = Fieldset;
 exports.default = _default;

package/lib/components/Toggle/Option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Option.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAUlD,eAAO,MAAM,WAAW;;qBAKvB,CAAC;AAEF,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2B3E;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Option.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAUlD,eAAO,MAAM,WAAW;;qBAIvB,CAAC;AAEF,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2B3E;AAED,eAAe,MAAM,CAAC"}

package/lib/components/Toggle/Option.js

@@ -28,7 +28,7 @@ var OptionLabel = (0, _styledComponents.default)(_Typography.P).attrs({
 }).withConfig({
   displayName: "Option__OptionLabel",
   componentId: "sjjkn8-1"
-})(["max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 exports.OptionLabel = OptionLabel;
 
 function Option(_ref) {

package/lib/components/Toggle/Slider.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import { SliderProps } from './types';
 export declare const SliderSwitch: import("styled-components").StyledComponent<"div", any, SliderProps, never>;
-export declare const SliderContainer: import("styled-components").StyledComponent<"div", any, {
-    size?: "small" | "medium" | undefined;
-}, never>;
+export declare const SliderContainer: import("styled-components").StyledComponent<"div", any, Partial<SliderProps>, never>;
 declare function Slider({ position, size }: SliderProps): JSX.Element;
 export default Slider;
 //# sourceMappingURL=Slider.d.ts.map

package/lib/components/Toggle/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Slider.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAe,MAAM,SAAS,CAAC;AAuBnD,eAAO,MAAM,YAAY,6EAuCxB,CAAC;AAEF,eAAO,MAAM,eAAe;;SAkB3B,CAAC;AAEF,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAQ5D;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Slider.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,eAAO,MAAM,YAAY,6EAuCxB,CAAC;AAuBF,eAAO,MAAM,eAAe,sFAqC3B,CAAC;AAEF,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAQ5D;AAED,eAAe,MAAM,CAAC"}

package/lib/components/Toggle/Slider.js

@@ -19,52 +19,57 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var SliderBar = _styledComponents.default.div.withConfig({
-  displayName: "Slider__SliderBar",
-  componentId: "egedid-0"
-})(["align-items:center;background-color:", ";border-radius:1px;display:flex;height:2px;position:relative;", ";"], (0, _rgb.default)(_designTokens.color.base.quarterMoon), (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref) {
-  var size = _ref.size;
-  return size === 'small' ? (0, _styledComponents.css)(["width:36px;"]) : (0, _styledComponents.css)(["width:44px;"]);
-}));
-
 var SliderSwitch = _styledComponents.default.div.withConfig({
   displayName: "Slider__SliderSwitch",
-  componentId: "egedid-1"
-})(["background-color:", ";border-radius:50%;position:absolute;transition:left 200ms cubic-bezier(0.39,0.575,0.565,1);", ";", ";"], (0, _rgb.default)(_designTokens.color.interaction.pacificOcean), (0, _dynamicModifiers.applyDynamicModifiers)('position', function (_ref2) {
-  var position = _ref2.position,
-      size = _ref2.size;
+  componentId: "egedid-0"
+})(["background-color:", ";border-radius:50%;position:absolute;transition:left 200ms cubic-bezier(0.39,0.575,0.565,1);", ";", ";"], (0, _rgb.default)(_designTokens.color.base.snowWhite), (0, _dynamicModifiers.applyDynamicModifiers)('position', function (_ref) {
+  var position = _ref.position,
+      size = _ref.size;
 
   if (position === 'left') {
-    return (0, _styledComponents.css)(["left:0;"]);
+    return (0, _styledComponents.css)(["left:", "px;"], _designTokens.spacing.base * 0.2);
   }
   /* Must equal the width of the SliderBar minus the width of the SliderSwitch */
 
   /* Must use the `left` position to maintain the animation of "sliding" */
 
 
-  return size === 'small' ? (0, _styledComponents.css)(["left:20px;"]) : (0, _styledComponents.css)(["left:24px;"]);
-}), (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref3) {
-  var size = _ref3.size;
-  return size === 'small' ? (0, _styledComponents.css)(["height:16px;width:16px;"]) : (0, _styledComponents.css)(["height:", "px;width:", "px;"], _designTokens.spacing.base * 2, _designTokens.spacing.base * 2);
+  return size === 'small' ? (0, _styledComponents.css)(["left:", "px;"], _designTokens.spacing.base * 1.7) : (0, _styledComponents.css)(["left:", "px;"], _designTokens.spacing.base * 2.1);
+}), (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref2) {
+  var size = _ref2.size;
+  return size === 'small' ? (0, _styledComponents.css)(["height:", "px;width:", "px;"], _designTokens.spacing.base * 1.2, _designTokens.spacing.base * 1.2) : (0, _styledComponents.css)(["height:", "px;width:", "px;"], _designTokens.spacing.base * 1.6, _designTokens.spacing.base * 1.6);
 }));
 
 exports.SliderSwitch = SliderSwitch;
 
+var SliderBar = _styledComponents.default.div.withConfig({
+  displayName: "Slider__SliderBar",
+  componentId: "egedid-1"
+})(["align-items:center;background-color:rgb(color.base.quarterMoon)};border-radius:1px;display:flex;height:2px;position:relative;", ";"], (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref3) {
+  var size = _ref3.size;
+  return size === 'small' ? (0, _styledComponents.css)(["width:", "px;"], _designTokens.spacing.base * 3.3) : (0, _styledComponents.css)(["width:", "px;"], _designTokens.spacing.base * 4.1);
+}));
+
 var SliderContainer = _styledComponents.default.div.withConfig({
   displayName: "Slider__SliderContainer",
   componentId: "egedid-2"
-})(["align-items:center;display:inline-flex;margin:0 ", "px;", ";"], _designTokens.spacing.base, (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref4) {
-  var size = _ref4.size;
-  return size === 'small' ? (0, _styledComponents.css)(["border-radius:", "px;height:", "px;"], 8 + 1, 8 * 2 + 2) : (0, _styledComponents.css)(["border-radius:", "px;height:", "px;"], _designTokens.spacing.base + 1, _designTokens.spacing.base * 2 + 2);
+})(["align-items:center;display:inline-flex;margin:0 ", "px;", ";", ";"], _designTokens.spacing.base, (0, _dynamicModifiers.applyDynamicModifiers)('position', function (_ref4) {
+  var position = _ref4.position;
+  var fillColor = (0, _rgb.default)(position === 'left' ? _designTokens.color.base.alaskanHusky : _designTokens.color.status.success.medium);
+  return (0, _styledComponents.css)(["background:", ";border:thin solid ", ";}"], fillColor, fillColor);
+}), (0, _dynamicModifiers.applyDynamicModifiers)('size', function (_ref5) {
+  var size = _ref5.size;
+  return size === 'small' ? (0, _styledComponents.css)(["height:", "px;width:", "px;border-radius:", "px;"], _designTokens.spacing.base * 1.8, _designTokens.spacing.base * 3.3, _designTokens.spacing.base * 0.9) : (0, _styledComponents.css)(["border-radius:", "px;height:", "px;width:", "px;"], _designTokens.spacing.base + 1, _designTokens.spacing.base * 2 + 2, _designTokens.spacing.base * 4.1);
 }));
 
 exports.SliderContainer = SliderContainer;
 
-function Slider(_ref5) {
-  var position = _ref5.position,
-      size = _ref5.size;
+function Slider(_ref6) {
+  var position = _ref6.position,
+      size = _ref6.size;
   return _react.default.createElement(SliderContainer, {
-    size: size
+    size: size,
+    position: position
   }, _react.default.createElement(SliderBar, {
     size: size
   }, _react.default.createElement(SliderSwitch, {

package/lib/components/Toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAoC,WAAW,EAAE,MAAM,SAAS,CAAC;AAExE,iBAAS,MAAM,CAAC,EACd,eAAe,EACf,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAuD3B;kBAjEQ,MAAM;;;;;;;;AAgFf,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAoC,WAAW,EAAE,MAAM,SAAS,CAAC;AAExE,iBAAS,MAAM,CAAC,EACd,eAAe,EACf,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA4D3B;kBAtEQ,MAAM;;;;;;;;AAqFf,eAAe,MAAM,CAAC"}

package/lib/components/Toggle/index.js

@@ -61,6 +61,10 @@ function Toggle(_ref) {
       selectedId = _useState2[0],
       setSelectedId = _useState2[1];
 
+  (0, _react.useEffect)(function () {
+    selected && !disabled && !readOnly && setSelectedId(selected);
+  }, [selected, disabled, readOnly]);
+
   var toggleOption = function toggleOption() {
     var _ref2 = options.find(function (_ref3) {
       var id = _ref3.id;
@@ -87,7 +91,8 @@ function Toggle(_ref) {
     onClick: toggleOption,
     onKeyDown: onKeyDownHandler,
     size: size,
-    tabIndex: 0
+    tabIndex: 0,
+    position: selectedId === (0, _get.default)(options, '0.id') ? 'left' : 'right'
   }), _react.default.createElement(_Flex.default, {
     alignItems: "center"
   }, options.map(function (option, index) {

package/lib/components/Toggle/index.test.js

@@ -33,9 +33,12 @@ var defaultProps = {
 describe('Toggle', function () {
   it('renders as expected', function () {
     var _render = (0, _react2.render)(_react.default.createElement(_.default, defaultProps)),
-        container = _render.container;
+        container = _render.container,
+        getByLabelText = _render.getByLabelText;
 
     expect(container).toMatchSnapshot();
+    expect(getByLabelText(option1Text)).toBeChecked();
+    expect(getByLabelText(option2Text)).not.toBeChecked();
   });
   it('renders as expected with size="small"', function () {
     var _render2 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
@@ -52,11 +55,14 @@ describe('Toggle', function () {
       onChange: onChange
     }))),
         container = _render3.container,
-        getByText = _render3.getByText;
+        getByText = _render3.getByText,
+        getByLabelText = _render3.getByLabelText;
 
     _react2.fireEvent.click(getByText(option2Text));
 
     expect(onChange).toHaveBeenCalledWith(option2Id);
+    expect(getByLabelText(option1Text)).not.toBeChecked();
+    expect(getByLabelText(option2Text)).toBeChecked();
     expect(container).toMatchSnapshot();
   });
   it('changes selection when focused and the space key is hit', function () {
@@ -65,7 +71,8 @@ describe('Toggle', function () {
     var _render4 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
       onChange: onChange
     }))),
-        getByText = _render4.getByText;
+        getByText = _render4.getByText,
+        getByLabelText = _render4.getByLabelText;
 
     _react2.fireEvent.keyDown(getByText(option2Text), {
       key: ' ',
@@ -73,6 +80,8 @@ describe('Toggle', function () {
     });
 
     expect(onChange).toHaveBeenCalledWith(option2Id);
+    expect(getByLabelText(option1Text)).not.toBeChecked();
+    expect(getByLabelText(option2Text)).toBeChecked();
   });
   it('changes selection when focused and the enter key is hit', function () {
     var onChange = jest.fn();
@@ -80,7 +89,8 @@ describe('Toggle', function () {
     var _render5 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
       onChange: onChange
     }))),
-        getByText = _render5.getByText;
+        getByText = _render5.getByText,
+        getByLabelText = _render5.getByLabelText;
 
     _react2.fireEvent.keyDown(getByText(option2Text), {
       key: 'Enter',
@@ -88,6 +98,25 @@ describe('Toggle', function () {
     });
 
     expect(onChange).toHaveBeenCalledWith(option2Id);
+    expect(getByLabelText(option1Text)).not.toBeChecked();
+    expect(getByLabelText(option2Text)).toBeChecked();
+  });
+  describe('when controlled', function () {
+    it('renders with the specified option selected', function () {
+      var _render6 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        selected: option2Id
+      }))),
+          getByLabelText = _render6.getByLabelText,
+          rerender = _render6.rerender;
+
+      expect(getByLabelText(option1Text)).not.toBeChecked();
+      expect(getByLabelText(option2Text)).toBeChecked();
+      rerender(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        selected: option1Id
+      })));
+      expect(getByLabelText(option1Text)).toBeChecked();
+      expect(getByLabelText(option2Text)).not.toBeChecked();
+    });
   });
   describe('with invalid props', function () {
     describe('with invalid defaultSelected', function () {
@@ -104,12 +133,12 @@ describe('Toggle', function () {
       it('does not toggle when clicked', function () {
         var onChange = jest.fn();
 
-        var _render6 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
           disabled: true,
           onChange: onChange
         }))),
-            container = _render6.container,
-            getByText = _render6.getByText;
+            container = _render7.container,
+            getByText = _render7.getByText;
 
         _react2.fireEvent.click(getByText(option2Text));
 
@@ -121,12 +150,12 @@ describe('Toggle', function () {
       it('does not toggle when clicked', function () {
         var onChange = jest.fn();
 
-        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render8 = (0, _react2.render)(_react.default.createElement(_.default, _extends({}, defaultProps, {
           readOnly: true,
           onChange: onChange
         }))),
-            container = _render7.container,
-            getByText = _render7.getByText;
+            container = _render8.container,
+            getByText = _render8.getByText;
 
         _react2.fireEvent.click(getByText(option2Text));
 

package/lib/components/Toggle/propTypes.js

@@ -20,7 +20,7 @@ function requiredOptionsValidator(props, propName, componentName) {
   _propTypes.default.checkPropTypes({
     options: _propTypes.default.arrayOf(_propTypes.default.shape({
       id: _propTypes.default.string.isRequired,
-      text: _propTypes.default.string.isRequired
+      text: _propTypes.default.string
     })).isRequired
   }, props, propName, componentName);
 

package/lib/components/Toggle/schema.js

@@ -18,7 +18,7 @@ schema.propTypes = {
   onChange: _reactDesc.PropTypes.func.description('A function called when the toggle is switched. It is called with the ID of the newly selected option'),
   options: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     id: _reactDesc.PropTypes.string.description('The ID of the option').isRequired,
-    text: _reactDesc.PropTypes.string.description('The label that will be displayed for the option')
+    text: _reactDesc.PropTypes.string.description('The label that will be displayed for the option. Ignore if you want to hide the label.')
   })).description('A two element array where each element represents an option in the Toggle').isRequired,
   readOnly: _reactDesc.PropTypes.bool.description('A boolean controlling whether the Toggle is read only.'),
   selected: _reactDesc.PropTypes.string.description('The ID of the option that is selected. If provided, controlling the Toggle must be handled externally. Overrides `defaultSelected`.'),