@decisiv/ui-components 2.0.1-alpha.99 → 2.0.2-alpha.2

package/lib/components/TagInput/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/TagInput/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAmCrD,eAAe,MAAM,CAAC"}

package/lib/components/TagInput/schema.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _reactDesc = require("react-desc");
+
+var _InputField = require("../../atoms/InputField");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 schema = (0, _reactDesc.describe)({
+  displayName: 'TagInput'
+});
+schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['icon', 'children', 'value', 'onFocus', 'onBlur', 'showCharacterCount', 'maxLength']), {
+  tags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.oneOf([_reactDesc.PropTypes.string, _reactDesc.PropTypes.shape({
+    text: _reactDesc.PropTypes.string,
+    color: _reactDesc.PropTypes.string,
+    palette: _reactDesc.PropTypes.string
+  })])).description('An array of tags that represents the controlled value of the component. Array elements can be either strings or objects with `text`, `color` and `palette` properties.'),
+  defaultTags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string).description('An array of tags that represents the initial uncontrolled value of the component.'),
+  maxTags: _reactDesc.PropTypes.number.description('The maximum number of tags that should be added to the component. Used in conjuction with `showMaxTagsCount`.'),
+  showMaxTagsCount: _reactDesc.PropTypes.bool.description('Whether to show a counter with the number of added tags and the maximum allowed when `maxTags` is set.')
+});
+var _default = schema;
+exports.default = _default;

package/lib/components/TagInput/styles.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    isVisible?: boolean;
+}
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/TagInput/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAQ5C,eAAO,MAAM,OAAO,oEAYnB,CAAC;AAEF,eAAO,MAAM,SAAS,oEAOrB,CAAC;AAEF,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,oEAIxB,CAAC;AAEF,eAAO,MAAM,KAAK,8EAqCjB,CAAC"}

package/lib/components/TagInput/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = exports.InputWrapper = exports.Container = exports.Wrapper = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _typography = _interopRequireDefault(require("@decisiv/design-tokens/lib/typography"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+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; } }
+
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "h9lqjf-0"
+})(["flex:1;& > div > div:first-of-type{height:auto;& > div:first-of-type{padding-right:", ";padding-bottom:", ";}}"], (0, _rem.default)(_spacing.default.base * 0.2), (0, _rem.default)(_spacing.default.base * 0.6));
+
+exports.Wrapper = Wrapper;
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "h9lqjf-1"
+})(["display:flex;flex:1;gap:", ";flex-direction:row;flex-wrap:wrap;width:100%;"], (0, _rem.default)(_spacing.default.base * 0.5));
+
+exports.Container = Container;
+
+var InputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "h9lqjf-2"
+})(["display:flex;flex:1;position:relative;"]);
+
+exports.InputWrapper = InputWrapper;
+
+var Input = _styledComponents.default.input.withConfig({
+  displayName: "styles__Input",
+  componentId: "h9lqjf-3"
+})(["flex:1;min-width:", ";font-family:", ";font-size:", ";font-weight:", ";padding-right:", ";border:none;&:active,&:focus{outline:none;border:none;}", " ", ""], (0, _rem.default)(_spacing.default.base * 7), _typography.default.typeface.default, (0, _rem.default)(_typography.default.size.alias.default), _typography.default.weight.alias.default, (0, _rem.default)(_spacing.default.base * 3.2), function (_ref) {
+  var isVisible = _ref.isVisible;
+  return !isVisible && (0, _styledComponents.css)(["padding:0;border:none;flex:0;opacity:0;width:0;min-width:0;height:0;"]);
+}, function (_ref2) {
+  var isVisible = _ref2.isVisible;
+  return isVisible && (0, _styledComponents.css)(["&:not(:placeholder-shown) + button{display:block !important;}"]);
+});
+
+exports.Input = Input;

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

@@ -0,0 +1,21 @@
+import { CommonUIColorKeys } from '../../utils/commonUIColors';
+import { BaseInputFieldProps } from '../../atoms/InputField';
+import { DropdownListItem } from '../DropdownList/types';
+export interface TagObject {
+    text: string;
+    color?: CommonUIColorKeys;
+    palette?: 'pastel' | 'bright' | 'dark';
+}
+export declare type TagItem = TagObject | string;
+export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
+    hiddenLabel?: boolean;
+    defaultTags?: TagItem[];
+    tags?: TagItem[];
+    options: DropdownListItem[];
+    onChange?: (value: TagItem[]) => void;
+    onSelect?: (item: string[]) => void;
+    maxTags?: number;
+    showMaxTagsCount?: boolean;
+    zIndex?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACxC;AAED,oBAAY,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/components/TagInput/types.js

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

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,CA2D3B;kBArEQ,MAAM;;;;;;;;AAoFf,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

@@ -91,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/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`.'),

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

@@ -3,7 +3,7 @@ import { PProps } from '../Typography';
 export interface ToggleProps {
     defaultSelected?: string;
     disabled?: boolean;
-    name: string;
+    name?: string;
     onChange?: (selectedOptionId: string) => void;
     options: [ToggleOption, ToggleOption];
     readOnly?: boolean;
@@ -16,7 +16,7 @@ export interface ToggleOption {
 }
 export interface OptionProps extends ToggleOption {
     checked?: boolean;
-    name: string;
+    name?: string;
     size?: ToggleProps['size'];
 }
 export interface SliderProps {
@@ -27,6 +27,7 @@ export interface LabelProps extends PProps, React.LabelHTMLAttributes<HTMLLabelE
     color?: PProps['color'];
 }
 export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    position: SliderProps['position'];
     disabled?: ToggleProps['disabled'];
     readOnly?: ToggleProps['readOnly'];
     size?: ToggleProps['size'];

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,UACf,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,UACf,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B"}

package/lib/components/ToggleView/ToggleView.d.ts

@@ -0,0 +1,5 @@
+import { RefForwardingComponent } from 'react';
+import { ToggleViewRef, ToggleViewProps } from './types';
+declare const ToggleViewWithRef: RefForwardingComponent<ToggleViewRef, ToggleViewProps>;
+export default ToggleViewWithRef;
+//# sourceMappingURL=ToggleView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleView.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleView/ToggleView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAgB,MAAM,SAAS,CAAC;AA2DvE,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,aAAa,EACb,eAAe,CACS,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}

package/lib/components/ToggleView/ToggleView.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _types = require("./types");
+
+var _schema = _interopRequireDefault(require("./schema"));
+
+var _styles = require("./styles");
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ToggleView(props, ref) {
+  var selected = props.selected,
+      items = props.items,
+      onChange = props.onChange,
+      ariaLabel = props['aria-label'];
+  var translate = (0, _useTranslations.default)();
+  return _react.default.createElement(_Flex.default, {
+    flexDirection: "row",
+    "aria-label": translate(ariaLabel, 'toggleView.aria.label'),
+    ref: ref
+  }, items.map(function (_ref) {
+    var id = _ref.id,
+        icon = _ref.icon,
+        text = _ref.text,
+        rest = _objectWithoutProperties(_ref, ["id", "icon", "text"]);
+
+    var idLabel = (0, _capitalize.default)(id);
+    return _react.default.createElement(_Tooltip.default, {
+      key: id,
+      zIndex: 4,
+      target: // eslint-disable-next-line react/jsx-wrap-multilines
+      _react.default.createElement(_styles.StyledButton, _extends({
+        id: id,
+        icon: icon,
+        "aria-label": translate(text, 'toggleView.aria.element', {
+          id: idLabel
+        }),
+        kind: id === selected ? 'primary' : 'secondary',
+        variant: id === selected ? 'normal' : 'ghost',
+        onClick: function onClick() {
+          return onChange && onChange(id);
+        }
+      }, rest))
+    }, translate(text, 'toggleView.aria.element', {
+      id: idLabel
+    }));
+  }));
+}
+
+var ToggleViewWithRef = (0, _react.forwardRef)(ToggleView); // @ts-ignore
+
+ToggleViewWithRef.propTypes = _schema.default.propTypes; // @ts-ignore
+
+ToggleViewWithRef.defaultProps = _types.defaultProps;
+ToggleViewWithRef.displayName = 'ToggleView';
+var _default = ToggleViewWithRef;
+exports.default = _default;

package/lib/components/ToggleView/index.d.ts

@@ -0,0 +1,4 @@
+import ToggleView from './ToggleView';
+export { ToggleViewProps, ViewItem, ViewItems } from './types';
+export default ToggleView;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleView/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/D,eAAe,UAAU,CAAC"}

package/lib/components/ToggleView/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToggleViewProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.ToggleViewProps;
+  }
+});
+Object.defineProperty(exports, "ViewItem", {
+  enumerable: true,
+  get: function get() {
+    return _types.ViewItem;
+  }
+});
+Object.defineProperty(exports, "ViewItems", {
+  enumerable: true,
+  get: function get() {
+    return _types.ViewItems;
+  }
+});
+exports.default = void 0;
+
+var _ToggleView = _interopRequireDefault(require("./ToggleView"));
+
+var _types = require("./types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ToggleView.default;
+exports.default = _default;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _List = _interopRequireDefault(require("@decisiv/iconix/lib/components/List"));
+
+var _Grid = _interopRequireDefault(require("@decisiv/iconix/lib/components/Grid"));
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var items = [{
+  id: '1',
+  text: 'List element',
+  icon: _List.default
+}, {
+  id: '2',
+  text: 'Grid element',
+  icon: _Grid.default
+}, {
+  id: '3',
+  text: 'Another element',
+  icon: _List.default
+}];
+describe('ToggleView', function () {
+  it('renders list of options', function () {
+    var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+      items: items,
+      selected: "1"
+    })),
+        getByLabelText = _render.getByLabelText;
+
+    items.forEach(function (option) {
+      expect(getByLabelText(option.text)).toBeInTheDocument();
+    });
+  });
+  describe('Clicking an option', function () {
+    var item = items[2];
+    it('calls event handler with expected ID', function () {
+      var mockedFn = jest.fn();
+
+      var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+        items: items,
+        selected: "1",
+        onChange: mockedFn
+      })),
+          getByLabelText = _render2.getByLabelText;
+
+      items.forEach(function (option) {
+        expect(getByLabelText(option.text)).toBeInTheDocument();
+      });
+      (0, _react2.act)(function () {
+        _react2.fireEvent.click(getByLabelText(item.text));
+      });
+      expect(mockedFn).toHaveBeenCalledWith(item.id);
+    });
+  });
+});

package/lib/components/ToggleView/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/ToggleView/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleView/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAmC,CAAC;AA0BhD,eAAe,MAAM,CAAC"}