@commercetools-uikit/view-switcher 0.0.0-canary-20220603091700

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# ViewSwitcher
+
+## Description
+
+ViewSwitchers allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.
+
+## When to use
+
+ViewSwitchers are frequently used to let users toggle between different formatting's, like with a grid view and a table view.
+
+## When not to use
+
+Do not use the ViewSwitcher as Tabs
+Tabs should be used when the content on the page is divided into related sections but without any overlap.
+See tabs as separate of content.
+
+Do not use the ViewSwitcher as Toggle
+Toggles are used for “yes/no” or “on/off” binary decisions.
+
+## Do's and Don'ts“
+
+- If you use an icon within the ViewSwitcher, each switch needs to have an icon.
+- No colored icons are allowed. Only color-solid (black)
+- Do not use two lines of text in one switch field.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/view-switcher
+```
+
+```
+npm --save install @commercetools-uikit/view-switcher
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import ViewSwitcher from '@commercetools-uikit/view-switcher';
+
+const Example = () => (
+  <ViewSwitcher.Group
+    defaultSelected="Button 2"
+    onChange={(value) => console.log(value)}
+  >
+    <ViewSwitcher.Button isDisabled value="button 1">
+      View 1
+    </ViewSwitcher.Button>
+    <ViewSwitcher.Button value="button 2">View 2</ViewSwitcher.Button>
+    <ViewSwitcher.Button value="button 3">View 3</ViewSwitcher.Button>
+  </ViewSwitcher.Group>
+);
+
+export default Example;
+```
+
+## Properties
+
+### ViewSwitcher.Group
+
+| Props             | Type                                                 | Required | Default | Description                                                                                             |
+| ----------------- | ---------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------- |
+| `isCondensed`     | `boolean`                                            |          |         | Indicates that the view switcher can be reduced to save space                                           |
+| `children`        | `ReactNode`                                          |    ✅    |         | Pass one or more `ViewSwitcher.Button` components                                                       |
+| `onChange`        | `Function`<br/>[See signature.](#signature-onChange) |          |         | Will be triggered whenever a `ViewSwitcher.Button` is clicked. Called with the ViewSwitcherButton value |
+| `defaultSelected` | `string`                                             |    ✅    |         | Indicates the default selected button                                                                   |
+
+## Signatures
+
+### Signature `onChange`
+
+```ts
+(value: string) => void
+```
+
+### ViewSwitcher.Button
+
+| Props        | Type                                                | Required | Default | Description                                                  |
+| ------------ | --------------------------------------------------- | :------: | ------- | ------------------------------------------------------------ |
+| `isDisabled` | `boolean`                                           |          |         | If `true`, indicates that the button is in a disabled state. |
+| `children`   | `ReactNode`                                         |    ✅    |         | Indicates the label of the `ViewSwitcher.Button`.            |
+| `onClick`    | `Function`<br/>[See signature.](#signature-onClick) |          |         | Will be triggered whenever a button is clicked.              |
+| `value`      | `string`                                            |    ✅    |         | The value identifying this `ViewSwitcher.Button`.            |
+
+## Signatures
+
+### Signature `onClick`
+
+```ts
+(value: string) => void
+```
+
+## Invariants
+
+1.  The `ViewSwitcher.Group` must have at least one `ViewSwitcher.Button` element as `children`

package/dist/commercetools-uikit-view-switcher.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-view-switcher.cjs.dev.js

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _pt = require('prop-types');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var react$1 = require('react');
+var react = require('@emotion/react');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var designSystem = require('@commercetools-uikit/design-system');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var utils = require('@commercetools-uikit/utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+
+var getSizeStyles = function getSizeStyles(isCondensed) {
+  if (isCondensed) {
+    return /*#__PURE__*/react.css("padding:0 ", designSystem.customProperties.spacingS, " 0 ", designSystem.customProperties.spacingS, ";height:", designSystem.customProperties.smallButtonHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFjIiwiZmlsZSI6InZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wcyB9IGZyb20gJy4vdmlldy1zd2l0Y2hlci1idXR0b24nO1xuXG5jb25zdCBnZXRTaXplU3R5bGVzID0gKFxuICBpc0NvbmRlbnNlZDogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddXG4pID0+IHtcbiAgaWYgKGlzQ29uZGVuc2VkKSB7XG4gICAgcmV0dXJuIGNzc2BcbiAgICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdTfSAwICR7dmFycy5zcGFjaW5nU307XG4gICAgICBoZWlnaHQ6ICR7dmFycy5zbWFsbEJ1dHRvbkhlaWdodH07XG4gICAgYDtcbiAgfVxuXG4gIHJldHVybiBjc3NgXG4gICAgcGFkZGluZzogMCAke3ZhcnMuc3BhY2luZ019IDAgJHt2YXJzLnNwYWNpbmdNfTtcbiAgICBoZWlnaHQ6ICR7dmFycy5iaWdCdXR0b25IZWlnaHR9O1xuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEJ1dHRvblN0eWxlcyA9IChcbiAgaXNEaXNhYmxlZD86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNEaXNhYmxlZCddLFxuICBpc0FjdGl2ZT86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNBY3RpdmUnXSxcbiAgaXNDb25kZW5zZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQ29uZGVuc2VkJ10sXG4gIGlzRmlyc3RCdXR0b24/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRmlyc3RCdXR0b24nXSxcbiAgaXNMYXN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0xhc3RCdXR0b24nXVxuKSA9PiB7XG4gIGNvbnN0IGJvcmRlclJhZGl1cyA9IGAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9ICR7XG4gICAgaXNMYXN0QnV0dG9uID8gYCR7dmFycy5ib3JkZXJSYWRpdXM2fSAke3ZhcnMuYm9yZGVyUmFkaXVzNn1gIDogJzAgMCdcbiAgfSAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9YDtcblxuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBjb2xvcjogJHt2YXJzLmNvbG9yU29saWR9O1xuICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAke3ZhcnMudHJhbnNpdGlvbkxpbmVhcjgwTXN9O1xuICAgICAgZm9udC1zaXplOiAke3ZhcnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGJvcmRlci1yYWRpdXM6ICR7Ym9yZGVyUmFkaXVzfTtcbiAgICAgIGJveC1zaGFkb3c6IDAgMXB4IDFweCAwIHJnYmEoMCwgMCwgMCwgMC4yNCksXG4gICAgICAgIDAgLTFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMTIpO1xuICAgICAgJjpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5MH07XG4gICAgICB9XG4gICAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICB9XG4gICAgICAke2dldFNpemVTdHlsZXMoaXNDb25kZW5zZWQpfVxuICAgIGAsXG4gICAgaXNBY3RpdmUgJiZcbiAgICAgIGNzc2BcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt2YXJzLmNvbG9yTmV1dHJhbDk1fTtcbiAgICAgICAgYm94LXNoYWRvdzogJHt2YXJzLnNoYWRvdzl9O1xuICAgICAgYCxcbiAgICBpc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgfVxuICAgICAgYCxcbiAgXTtcbn07XG4iXX0= */");
+  }
+
+  return /*#__PURE__*/react.css("padding:0 ", designSystem.customProperties.spacingM, " 0 ", designSystem.customProperties.spacingM, ";height:", designSystem.customProperties.bigButtonHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNZIiwiZmlsZSI6InZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wcyB9IGZyb20gJy4vdmlldy1zd2l0Y2hlci1idXR0b24nO1xuXG5jb25zdCBnZXRTaXplU3R5bGVzID0gKFxuICBpc0NvbmRlbnNlZDogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddXG4pID0+IHtcbiAgaWYgKGlzQ29uZGVuc2VkKSB7XG4gICAgcmV0dXJuIGNzc2BcbiAgICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdTfSAwICR7dmFycy5zcGFjaW5nU307XG4gICAgICBoZWlnaHQ6ICR7dmFycy5zbWFsbEJ1dHRvbkhlaWdodH07XG4gICAgYDtcbiAgfVxuXG4gIHJldHVybiBjc3NgXG4gICAgcGFkZGluZzogMCAke3ZhcnMuc3BhY2luZ019IDAgJHt2YXJzLnNwYWNpbmdNfTtcbiAgICBoZWlnaHQ6ICR7dmFycy5iaWdCdXR0b25IZWlnaHR9O1xuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEJ1dHRvblN0eWxlcyA9IChcbiAgaXNEaXNhYmxlZD86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNEaXNhYmxlZCddLFxuICBpc0FjdGl2ZT86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNBY3RpdmUnXSxcbiAgaXNDb25kZW5zZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQ29uZGVuc2VkJ10sXG4gIGlzRmlyc3RCdXR0b24/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRmlyc3RCdXR0b24nXSxcbiAgaXNMYXN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0xhc3RCdXR0b24nXVxuKSA9PiB7XG4gIGNvbnN0IGJvcmRlclJhZGl1cyA9IGAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9ICR7XG4gICAgaXNMYXN0QnV0dG9uID8gYCR7dmFycy5ib3JkZXJSYWRpdXM2fSAke3ZhcnMuYm9yZGVyUmFkaXVzNn1gIDogJzAgMCdcbiAgfSAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9YDtcblxuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBjb2xvcjogJHt2YXJzLmNvbG9yU29saWR9O1xuICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAke3ZhcnMudHJhbnNpdGlvbkxpbmVhcjgwTXN9O1xuICAgICAgZm9udC1zaXplOiAke3ZhcnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGJvcmRlci1yYWRpdXM6ICR7Ym9yZGVyUmFkaXVzfTtcbiAgICAgIGJveC1zaGFkb3c6IDAgMXB4IDFweCAwIHJnYmEoMCwgMCwgMCwgMC4yNCksXG4gICAgICAgIDAgLTFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMTIpO1xuICAgICAgJjpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5MH07XG4gICAgICB9XG4gICAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICB9XG4gICAgICAke2dldFNpemVTdHlsZXMoaXNDb25kZW5zZWQpfVxuICAgIGAsXG4gICAgaXNBY3RpdmUgJiZcbiAgICAgIGNzc2BcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt2YXJzLmNvbG9yTmV1dHJhbDk1fTtcbiAgICAgICAgYm94LXNoYWRvdzogJHt2YXJzLnNoYWRvdzl9O1xuICAgICAgYCxcbiAgICBpc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgfVxuICAgICAgYCxcbiAgXTtcbn07XG4iXX0= */");
+};
+
+var getButtonStyles = function getButtonStyles(isDisabled, isActive, isCondensed, isFirstButton, isLastButton) {
+  var _context, _context2, _context3;
+
+  var borderRadius = _concatInstanceProperty__default["default"](_context = _concatInstanceProperty__default["default"](_context2 = "".concat(isFirstButton ? designSystem.customProperties.borderRadius6 : '0', " ")).call(_context2, isLastButton ? _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.customProperties.borderRadius6, " ")).call(_context3, designSystem.customProperties.borderRadius6) : '0 0', " ")).call(_context, isFirstButton ? designSystem.customProperties.borderRadius6 : '0');
+
+  return [/*#__PURE__*/react.css("align-items:center;color:", designSystem.customProperties.colorSolid, ";transition:background-color ", designSystem.customProperties.transitionLinear80Ms, ";font-size:", designSystem.customProperties.fontSizeDefault, ";border-radius:", borderRadius, ";box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.24),0 -1px 1px 0 rgba(0, 0, 0, 0.12);&:hover{background-color:", designSystem.customProperties.colorNeutral90, ";}&:active{background-color:", designSystem.customProperties.colorNeutral95, ";}", getSizeStyles(isCondensed), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDTyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgfSBmcm9tICcuL3ZpZXctc3dpdGNoZXItYnV0dG9uJztcblxuY29uc3QgZ2V0U2l6ZVN0eWxlcyA9IChcbiAgaXNDb25kZW5zZWQ6IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNDb25kZW5zZWQnXVxuKSA9PiB7XG4gIGlmIChpc0NvbmRlbnNlZCkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBwYWRkaW5nOiAwICR7dmFycy5zcGFjaW5nU30gMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgaGVpZ2h0OiAke3ZhcnMuc21hbGxCdXR0b25IZWlnaHR9O1xuICAgIGA7XG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdNfSAwICR7dmFycy5zcGFjaW5nTX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuYmlnQnV0dG9uSGVpZ2h0fTtcbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoXG4gIGlzRGlzYWJsZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRGlzYWJsZWQnXSxcbiAgaXNBY3RpdmU/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQWN0aXZlJ10sXG4gIGlzQ29uZGVuc2VkPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddLFxuICBpc0ZpcnN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0ZpcnN0QnV0dG9uJ10sXG4gIGlzTGFzdEJ1dHRvbj86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNMYXN0QnV0dG9uJ11cbikgPT4ge1xuICBjb25zdCBib3JkZXJSYWRpdXMgPSBgJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfSAke1xuICAgIGlzTGFzdEJ1dHRvbiA/IGAke3ZhcnMuYm9yZGVyUmFkaXVzNn0gJHt2YXJzLmJvcmRlclJhZGl1czZ9YCA6ICcwIDAnXG4gIH0gJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfWA7XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgY29sb3I6ICR7dmFycy5jb2xvclNvbGlkfTtcbiAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25MaW5lYXI4ME1zfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gICAgICBib3JkZXItcmFkaXVzOiAke2JvcmRlclJhZGl1c307XG4gICAgICBib3gtc2hhZG93OiAwIDFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMjQpLFxuICAgICAgICAwIC0xcHggMXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEyKTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICAgICAgfVxuICAgICAgJjphY3RpdmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTV9O1xuICAgICAgfVxuICAgICAgJHtnZXRTaXplU3R5bGVzKGlzQ29uZGVuc2VkKX1cbiAgICBgLFxuICAgIGlzQWN0aXZlICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICAgIGJveC1zaGFkb3c6ICR7dmFycy5zaGFkb3c5fTtcbiAgICAgIGAsXG4gICAgaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIGNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIH1cbiAgICAgIGAsXG4gIF07XG59O1xuIl19 */"), isActive && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorNeutral95, ";box-shadow:", designSystem.customProperties.shadow9, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlEUyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgfSBmcm9tICcuL3ZpZXctc3dpdGNoZXItYnV0dG9uJztcblxuY29uc3QgZ2V0U2l6ZVN0eWxlcyA9IChcbiAgaXNDb25kZW5zZWQ6IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNDb25kZW5zZWQnXVxuKSA9PiB7XG4gIGlmIChpc0NvbmRlbnNlZCkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBwYWRkaW5nOiAwICR7dmFycy5zcGFjaW5nU30gMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgaGVpZ2h0OiAke3ZhcnMuc21hbGxCdXR0b25IZWlnaHR9O1xuICAgIGA7XG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdNfSAwICR7dmFycy5zcGFjaW5nTX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuYmlnQnV0dG9uSGVpZ2h0fTtcbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoXG4gIGlzRGlzYWJsZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRGlzYWJsZWQnXSxcbiAgaXNBY3RpdmU/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQWN0aXZlJ10sXG4gIGlzQ29uZGVuc2VkPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddLFxuICBpc0ZpcnN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0ZpcnN0QnV0dG9uJ10sXG4gIGlzTGFzdEJ1dHRvbj86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNMYXN0QnV0dG9uJ11cbikgPT4ge1xuICBjb25zdCBib3JkZXJSYWRpdXMgPSBgJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfSAke1xuICAgIGlzTGFzdEJ1dHRvbiA/IGAke3ZhcnMuYm9yZGVyUmFkaXVzNn0gJHt2YXJzLmJvcmRlclJhZGl1czZ9YCA6ICcwIDAnXG4gIH0gJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfWA7XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgY29sb3I6ICR7dmFycy5jb2xvclNvbGlkfTtcbiAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25MaW5lYXI4ME1zfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gICAgICBib3JkZXItcmFkaXVzOiAke2JvcmRlclJhZGl1c307XG4gICAgICBib3gtc2hhZG93OiAwIDFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMjQpLFxuICAgICAgICAwIC0xcHggMXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEyKTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICAgICAgfVxuICAgICAgJjphY3RpdmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTV9O1xuICAgICAgfVxuICAgICAgJHtnZXRTaXplU3R5bGVzKGlzQ29uZGVuc2VkKX1cbiAgICBgLFxuICAgIGlzQWN0aXZlICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICAgIGJveC1zaGFkb3c6ICR7dmFycy5zaGFkb3c5fTtcbiAgICAgIGAsXG4gICAgaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIGNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIH1cbiAgICAgIGAsXG4gIF07XG59O1xuIl19 */"), isDisabled && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorAccent98, ";color:", designSystem.customProperties.colorNeutral60, ";&:hover{background-color:", designSystem.customProperties.colorAccent98, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEUyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgfSBmcm9tICcuL3ZpZXctc3dpdGNoZXItYnV0dG9uJztcblxuY29uc3QgZ2V0U2l6ZVN0eWxlcyA9IChcbiAgaXNDb25kZW5zZWQ6IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNDb25kZW5zZWQnXVxuKSA9PiB7XG4gIGlmIChpc0NvbmRlbnNlZCkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBwYWRkaW5nOiAwICR7dmFycy5zcGFjaW5nU30gMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgaGVpZ2h0OiAke3ZhcnMuc21hbGxCdXR0b25IZWlnaHR9O1xuICAgIGA7XG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdNfSAwICR7dmFycy5zcGFjaW5nTX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuYmlnQnV0dG9uSGVpZ2h0fTtcbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoXG4gIGlzRGlzYWJsZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRGlzYWJsZWQnXSxcbiAgaXNBY3RpdmU/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQWN0aXZlJ10sXG4gIGlzQ29uZGVuc2VkPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddLFxuICBpc0ZpcnN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0ZpcnN0QnV0dG9uJ10sXG4gIGlzTGFzdEJ1dHRvbj86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNMYXN0QnV0dG9uJ11cbikgPT4ge1xuICBjb25zdCBib3JkZXJSYWRpdXMgPSBgJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfSAke1xuICAgIGlzTGFzdEJ1dHRvbiA/IGAke3ZhcnMuYm9yZGVyUmFkaXVzNn0gJHt2YXJzLmJvcmRlclJhZGl1czZ9YCA6ICcwIDAnXG4gIH0gJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfWA7XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgY29sb3I6ICR7dmFycy5jb2xvclNvbGlkfTtcbiAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25MaW5lYXI4ME1zfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gICAgICBib3JkZXItcmFkaXVzOiAke2JvcmRlclJhZGl1c307XG4gICAgICBib3gtc2hhZG93OiAwIDFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMjQpLFxuICAgICAgICAwIC0xcHggMXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEyKTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICAgICAgfVxuICAgICAgJjphY3RpdmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTV9O1xuICAgICAgfVxuICAgICAgJHtnZXRTaXplU3R5bGVzKGlzQ29uZGVuc2VkKX1cbiAgICBgLFxuICAgIGlzQWN0aXZlICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICAgIGJveC1zaGFkb3c6ICR7dmFycy5zaGFkb3c5fTtcbiAgICAgIGAsXG4gICAgaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIGNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIH1cbiAgICAgIGAsXG4gIF07XG59O1xuIl19 */")];
+};
+
+var ViewSwitcherButton = function ViewSwitcherButton(props) {
+  return jsxRuntime.jsxs(AccessibleButton__default["default"], {
+    label: props.children,
+    css: getButtonStyles(props.isDisabled, props.isActive, props.isCondensed, props.isFirstButton, props.isLastButton),
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    children: [props.icon && jsxRuntime.jsx("span", {
+      css: /*#__PURE__*/react.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:ViewSwitcherButton;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXItYnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Q2dCIiwiZmlsZSI6InZpZXctc3dpdGNoZXItYnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIGNsb25lRWxlbWVudCxcbiAgdHlwZSBNb3VzZUV2ZW50LFxuICB0eXBlIEtleWJvYXJkRXZlbnQsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgQWNjZXNzaWJsZUJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9hY2Nlc3NpYmxlLWJ1dHRvbic7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGdldEJ1dHRvblN0eWxlcyB9IGZyb20gJy4vdmlldy1zd2l0Y2hlci5zdHlsZXMnO1xuXG5leHBvcnQgdHlwZSBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBpc0FjdGl2ZT86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBzdHJpbmc7XG4gIGlzQ29uZGVuc2VkPzogYm9vbGVhbjtcbiAgaXNGaXJzdEJ1dHRvbj86IGJvb2xlYW47XG4gIGlzTGFzdEJ1dHRvbj86IGJvb2xlYW47XG4gIGljb24/OiBSZWFjdEVsZW1lbnQ7XG4gIHZhbHVlOiBzdHJpbmc7XG4gIG9uQ2xpY2s/OiAoXG4gICAgZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+IHwgS2V5Ym9hcmRFdmVudDxIVE1MQnV0dG9uRWxlbWVudD5cbiAgKSA9PiB2b2lkO1xufTtcblxuY29uc3QgVmlld1N3aXRjaGVyQnV0dG9uID0gKHByb3BzOiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMpID0+IChcbiAgPEFjY2Vzc2libGVCdXR0b25cbiAgICBsYWJlbD17cHJvcHMuY2hpbGRyZW59XG4gICAgY3NzPXtnZXRCdXR0b25TdHlsZXMoXG4gICAgICBwcm9wcy5pc0Rpc2FibGVkLFxuICAgICAgcHJvcHMuaXNBY3RpdmUsXG4gICAgICBwcm9wcy5pc0NvbmRlbnNlZCxcbiAgICAgIHByb3BzLmlzRmlyc3RCdXR0b24sXG4gICAgICBwcm9wcy5pc0xhc3RCdXR0b25cbiAgICApfVxuICAgIG9uQ2xpY2s9e3Byb3BzLm9uQ2xpY2t9XG4gICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgPlxuICAgIHtwcm9wcy5pY29uICYmIChcbiAgICAgIDxzcGFuXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbjogMCAke3ZhcnMuc3BhY2luZ1hzfSAwIDA7XG4gICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7Y2xvbmVFbGVtZW50KHByb3BzLmljb24sIHtcbiAgICAgICAgICBjb2xvcjogcHJvcHMuaXNEaXNhYmxlZCA/ICduZXV0cmFsNjAnIDogJ2NvbG9yU29saWQnLFxuICAgICAgICAgIHNpemU6IHByb3BzLmlzQ29uZGVuc2VkID8gJ21lZGl1bScgOiAnYmlnJyxcbiAgICAgICAgfSl9XG4gICAgICA8L3NwYW4+XG4gICAgKX1cbiAgICA8c3Bhbj57cHJvcHMuY2hpbGRyZW59PC9zcGFuPlxuICA8L0FjY2Vzc2libGVCdXR0b24+XG4pO1xuXG5WaWV3U3dpdGNoZXJCdXR0b24uZGlzcGxheU5hbWUgPSAnVmlld1N3aXRjaGVyQnV0dG9uJztcbmV4cG9ydCBkZWZhdWx0IFZpZXdTd2l0Y2hlckJ1dHRvbjtcbiJdfQ== */"),
+      children: /*#__PURE__*/react$1.cloneElement(props.icon, {
+        color: props.isDisabled ? 'neutral60' : 'colorSolid',
+        size: props.isCondensed ? 'medium' : 'big'
+      })
+    }), jsxRuntime.jsx("span", {
+      children: props.children
+    })]
+  });
+};
+
+ViewSwitcherButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  isDisabled: _pt__default["default"].bool,
+  isActive: _pt__default["default"].bool,
+  children: _pt__default["default"].string.isRequired,
+  isCondensed: _pt__default["default"].bool,
+  isFirstButton: _pt__default["default"].bool,
+  isLastButton: _pt__default["default"].bool,
+  icon: _pt__default["default"].element,
+  value: _pt__default["default"].string.isRequired,
+  onClick: _pt__default["default"].func
+} : {};
+ViewSwitcherButton.displayName = 'ViewSwitcherButton';
+var Button = ViewSwitcherButton;
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "xd53is-ViewSwitcher",
+  styles: "display:flex;label:ViewSwitcher;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlFYyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoaWxkcmVuLFxuICBpc1ZhbGlkRWxlbWVudCxcbiAgY2xvbmVFbGVtZW50LFxuICB1c2VTdGF0ZSxcbiAgdHlwZSBSZWFjdE5vZGUsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgVmlld1N3aXRjaGVyQnV0dG9uIGZyb20gJy4vdmlldy1zd2l0Y2hlci1idXR0b24nO1xuaW1wb3J0IHsgd2FybmluZyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcblxudHlwZSBUUmVhY3RDaGlsZCA9IHtcbiAgdHlwZT86IHsgZGlzcGxheU5hbWU6IHN0cmluZyB9O1xufSAmIFJlYWN0RWxlbWVudDtcblxuZXhwb3J0IHR5cGUgVFZpZXdTd2l0Y2hlclByb3BzID0ge1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgdGhlIHZpZXcgc3dpdGNoZXIgY2FuIGJlIHJlZHVjZWQgdG8gc2F2ZSBzcGFjZVxuICAgKi9cbiAgaXNDb25kZW5zZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogUGFzcyBvbmUgb3IgbW9yZSBgVmlld1N3aXRjaGVyLkJ1dHRvbmAgY29tcG9uZW50c1xuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIFdpbGwgYmUgdHJpZ2dlcmVkIHdoZW5ldmVyIGEgYFZpZXdTd2l0Y2hlci5CdXR0b25gIGlzIHNlbGVjdGVkLiBDYWxsZWQgd2l0aCB0aGUgVmlld1N3aXRjaGVyQnV0dG9uIHZhbHVlXG4gICAqL1xuICBvbkNoYW5nZT86ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoZSBkZWZhdWx0IHNlbGVjdGVkIGJ1dHRvblxuICAgKi9cbiAgZGVmYXVsdFNlbGVjdGVkOiBzdHJpbmc7XG59O1xuXG5jb25zdCBWaWV3U3dpdGNoZXIgPSAocHJvcHM6IFRWaWV3U3dpdGNoZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2VsZWN0ZWRCdXR0b24sIHNldFNlbGVjdGVkQnV0dG9uXSA9IHVzZVN0YXRlPHN0cmluZz4oXG4gICAgcHJvcHMuZGVmYXVsdFNlbGVjdGVkXG4gICk7XG5cbiAgd2FybmluZyhcbiAgICAocHJvcHMuY2hpbGRyZW4gYXMgVFJlYWN0Q2hpbGRbXSkubGVuZ3RoID4gMCxcbiAgICAnVmlld1N3aXRjaGVyLkdyb3VwIG11c3QgY29udGFpbiBhdCBsZWFzdCBvbmUgVmlld1N3aXRjaGVyLkJ1dHRvbidcbiAgKTtcblxuICBjb25zdCB2aWV3U3dpdGNoZXJFbGVtZW50cyA9IENoaWxkcmVuLm1hcChwcm9wcy5jaGlsZHJlbiwgKGNoaWxkLCBpbmRleCkgPT4ge1xuICAgIGlmIChcbiAgICAgIGNoaWxkICYmXG4gICAgICBpc1ZhbGlkRWxlbWVudChjaGlsZCkgJiZcbiAgICAgIChjaGlsZCBhcyBUUmVhY3RDaGlsZCkudHlwZS5kaXNwbGF5TmFtZSA9PT0gVmlld1N3aXRjaGVyQnV0dG9uLmRpc3BsYXlOYW1lXG4gICAgKSB7XG4gICAgICBjb25zdCBpc0J1dHRvbkFjdGl2ZSA9IHNlbGVjdGVkQnV0dG9uID09PSBjaGlsZC5wcm9wcy52YWx1ZTtcbiAgICAgIGNvbnN0IGNsb25lZENoaWxkID0gY2xvbmVFbGVtZW50KGNoaWxkLCB7XG4gICAgICAgIG9uQ2xpY2s6ICgpID0+IHtcbiAgICAgICAgICBzZXRTZWxlY3RlZEJ1dHRvbihjaGlsZC5wcm9wcy52YWx1ZSk7XG4gICAgICAgICAgaWYgKCFpc0J1dHRvbkFjdGl2ZSkge1xuICAgICAgICAgICAgY2hpbGQucHJvcHMub25DbGljaz8uKGNoaWxkLnByb3BzLnZhbHVlKTtcbiAgICAgICAgICAgIHByb3BzLm9uQ2hhbmdlPy4oY2hpbGQucHJvcHMudmFsdWUpO1xuICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgaXNDb25kZW5zZWQ6IHByb3BzLmlzQ29uZGVuc2VkLFxuICAgICAgICBpc0FjdGl2ZTogaXNCdXR0b25BY3RpdmUsXG4gICAgICAgIGlzRmlyc3RCdXR0b246IGluZGV4ID09PSAwLFxuICAgICAgICBpc0xhc3RCdXR0b246XG4gICAgICAgICAgaW5kZXggPT09ICgocHJvcHMuY2hpbGRyZW4gYXMgVFJlYWN0Q2hpbGRbXSkubGVuZ3RoID8/IDEpIC0gMSxcbiAgICAgIH0pO1xuICAgICAgcmV0dXJuIGNsb25lZENoaWxkO1xuICAgIH1cbiAgICByZXR1cm4gY2hpbGQ7XG4gIH0pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBgfVxuICAgID5cbiAgICAgIHt2aWV3U3dpdGNoZXJFbGVtZW50c31cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFZpZXdTd2l0Y2hlcjtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var ViewSwitcher$1 = function ViewSwitcher(props) {
+  var _useState = react$1.useState(props.defaultSelected),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedButton = _useState2[0],
+      setSelectedButton = _useState2[1];
+
+  process.env.NODE_ENV !== "production" ? utils.warning(props.children.length > 0, 'ViewSwitcher.Group must contain at least one ViewSwitcher.Button') : void 0;
+
+  var viewSwitcherElements = _mapInstanceProperty__default["default"](react$1.Children).call(react$1.Children, props.children, function (child, index) {
+    if (child && /*#__PURE__*/react$1.isValidElement(child) && child.type.displayName === Button.displayName) {
+      var _length;
+
+      var isButtonActive = selectedButton === child.props.value;
+      var clonedChild = /*#__PURE__*/react$1.cloneElement(child, {
+        onClick: function onClick() {
+          setSelectedButton(child.props.value);
+
+          if (!isButtonActive) {
+            var _child$props$onClick, _child$props, _props$onChange;
+
+            (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, child.props.value);
+            (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, child.props.value);
+          }
+        },
+        isCondensed: props.isCondensed,
+        isActive: isButtonActive,
+        isFirstButton: index === 0,
+        isLastButton: index === ((_length = props.children.length) !== null && _length !== void 0 ? _length : 1) - 1
+      });
+      return clonedChild;
+    }
+
+    return child;
+  });
+
+  return jsxRuntime.jsx("div", {
+    css: _ref,
+    children: viewSwitcherElements
+  });
+};
+
+ViewSwitcher$1.propTypes = process.env.NODE_ENV !== "production" ? {
+  isCondensed: _pt__default["default"].bool,
+  children: _pt__default["default"].node.isRequired,
+  onChange: _pt__default["default"].func,
+  defaultSelected: _pt__default["default"].string.isRequired
+} : {};
+var Group = ViewSwitcher$1;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "15.0.0";
+
+var ViewSwitcher = {
+  Group: Group,
+  Button: Button
+};
+
+exports["default"] = ViewSwitcher;
+exports.version = version;

package/dist/commercetools-uikit-view-switcher.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-view-switcher.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-view-switcher.cjs.dev.js");
+}

package/dist/commercetools-uikit-view-switcher.cjs.prod.js

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('prop-types');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var react$1 = require('react');
+var react = require('@emotion/react');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var designSystem = require('@commercetools-uikit/design-system');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('@commercetools-uikit/utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+
+var getSizeStyles = function getSizeStyles(isCondensed) {
+  if (isCondensed) {
+    return /*#__PURE__*/react.css("padding:0 ", designSystem.customProperties.spacingS, " 0 ", designSystem.customProperties.spacingS, ";height:", designSystem.customProperties.smallButtonHeight, ";" + ("" ), "" );
+  }
+
+  return /*#__PURE__*/react.css("padding:0 ", designSystem.customProperties.spacingM, " 0 ", designSystem.customProperties.spacingM, ";height:", designSystem.customProperties.bigButtonHeight, ";" + ("" ), "" );
+};
+
+var getButtonStyles = function getButtonStyles(isDisabled, isActive, isCondensed, isFirstButton, isLastButton) {
+  var _context, _context2, _context3;
+
+  var borderRadius = _concatInstanceProperty__default["default"](_context = _concatInstanceProperty__default["default"](_context2 = "".concat(isFirstButton ? designSystem.customProperties.borderRadius6 : '0', " ")).call(_context2, isLastButton ? _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.customProperties.borderRadius6, " ")).call(_context3, designSystem.customProperties.borderRadius6) : '0 0', " ")).call(_context, isFirstButton ? designSystem.customProperties.borderRadius6 : '0');
+
+  return [/*#__PURE__*/react.css("align-items:center;color:", designSystem.customProperties.colorSolid, ";transition:background-color ", designSystem.customProperties.transitionLinear80Ms, ";font-size:", designSystem.customProperties.fontSizeDefault, ";border-radius:", borderRadius, ";box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.24),0 -1px 1px 0 rgba(0, 0, 0, 0.12);&:hover{background-color:", designSystem.customProperties.colorNeutral90, ";}&:active{background-color:", designSystem.customProperties.colorNeutral95, ";}", getSizeStyles(isCondensed), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorNeutral95, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" ), "" ), isDisabled && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorAccent98, ";color:", designSystem.customProperties.colorNeutral60, ";&:hover{background-color:", designSystem.customProperties.colorAccent98, ";}" + ("" ), "" )];
+};
+
+var ViewSwitcherButton = function ViewSwitcherButton(props) {
+  return jsxRuntime.jsxs(AccessibleButton__default["default"], {
+    label: props.children,
+    css: getButtonStyles(props.isDisabled, props.isActive, props.isCondensed, props.isFirstButton, props.isLastButton),
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    children: [props.icon && jsxRuntime.jsx("span", {
+      css: /*#__PURE__*/react.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
+      children: /*#__PURE__*/react$1.cloneElement(props.icon, {
+        color: props.isDisabled ? 'neutral60' : 'colorSolid',
+        size: props.isCondensed ? 'medium' : 'big'
+      })
+    }), jsxRuntime.jsx("span", {
+      children: props.children
+    })]
+  });
+};
+
+ViewSwitcherButton.propTypes = {};
+ViewSwitcherButton.displayName = 'ViewSwitcherButton';
+var Button = ViewSwitcherButton;
+
+var _ref = {
+  name: "zjik7",
+  styles: "display:flex"
+} ;
+
+var ViewSwitcher$1 = function ViewSwitcher(props) {
+  var _useState = react$1.useState(props.defaultSelected),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedButton = _useState2[0],
+      setSelectedButton = _useState2[1];
+
+  var viewSwitcherElements = _mapInstanceProperty__default["default"](react$1.Children).call(react$1.Children, props.children, function (child, index) {
+    if (child && /*#__PURE__*/react$1.isValidElement(child) && child.type.displayName === Button.displayName) {
+      var _length;
+
+      var isButtonActive = selectedButton === child.props.value;
+      var clonedChild = /*#__PURE__*/react$1.cloneElement(child, {
+        onClick: function onClick() {
+          setSelectedButton(child.props.value);
+
+          if (!isButtonActive) {
+            var _child$props$onClick, _child$props, _props$onChange;
+
+            (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, child.props.value);
+            (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, child.props.value);
+          }
+        },
+        isCondensed: props.isCondensed,
+        isActive: isButtonActive,
+        isFirstButton: index === 0,
+        isLastButton: index === ((_length = props.children.length) !== null && _length !== void 0 ? _length : 1) - 1
+      });
+      return clonedChild;
+    }
+
+    return child;
+  });
+
+  return jsxRuntime.jsx("div", {
+    css: _ref,
+    children: viewSwitcherElements
+  });
+};
+
+ViewSwitcher$1.propTypes = {};
+var Group = ViewSwitcher$1;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "15.0.0";
+
+var ViewSwitcher = {
+  Group: Group,
+  Button: Button
+};
+
+exports["default"] = ViewSwitcher;
+exports.version = version;

package/dist/commercetools-uikit-view-switcher.esm.js

@@ -0,0 +1,129 @@
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _pt from 'prop-types';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import { cloneElement, useState, Children, isValidElement } from 'react';
+import { css } from '@emotion/react';
+import AccessibleButton from '@commercetools-uikit/accessible-button';
+import { customProperties } from '@commercetools-uikit/design-system';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { warning } from '@commercetools-uikit/utils';
+
+var getSizeStyles = function getSizeStyles(isCondensed) {
+  if (isCondensed) {
+    return /*#__PURE__*/css("padding:0 ", customProperties.spacingS, " 0 ", customProperties.spacingS, ";height:", customProperties.smallButtonHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFjIiwiZmlsZSI6InZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wcyB9IGZyb20gJy4vdmlldy1zd2l0Y2hlci1idXR0b24nO1xuXG5jb25zdCBnZXRTaXplU3R5bGVzID0gKFxuICBpc0NvbmRlbnNlZDogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddXG4pID0+IHtcbiAgaWYgKGlzQ29uZGVuc2VkKSB7XG4gICAgcmV0dXJuIGNzc2BcbiAgICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdTfSAwICR7dmFycy5zcGFjaW5nU307XG4gICAgICBoZWlnaHQ6ICR7dmFycy5zbWFsbEJ1dHRvbkhlaWdodH07XG4gICAgYDtcbiAgfVxuXG4gIHJldHVybiBjc3NgXG4gICAgcGFkZGluZzogMCAke3ZhcnMuc3BhY2luZ019IDAgJHt2YXJzLnNwYWNpbmdNfTtcbiAgICBoZWlnaHQ6ICR7dmFycy5iaWdCdXR0b25IZWlnaHR9O1xuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEJ1dHRvblN0eWxlcyA9IChcbiAgaXNEaXNhYmxlZD86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNEaXNhYmxlZCddLFxuICBpc0FjdGl2ZT86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNBY3RpdmUnXSxcbiAgaXNDb25kZW5zZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQ29uZGVuc2VkJ10sXG4gIGlzRmlyc3RCdXR0b24/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRmlyc3RCdXR0b24nXSxcbiAgaXNMYXN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0xhc3RCdXR0b24nXVxuKSA9PiB7XG4gIGNvbnN0IGJvcmRlclJhZGl1cyA9IGAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9ICR7XG4gICAgaXNMYXN0QnV0dG9uID8gYCR7dmFycy5ib3JkZXJSYWRpdXM2fSAke3ZhcnMuYm9yZGVyUmFkaXVzNn1gIDogJzAgMCdcbiAgfSAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9YDtcblxuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBjb2xvcjogJHt2YXJzLmNvbG9yU29saWR9O1xuICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAke3ZhcnMudHJhbnNpdGlvbkxpbmVhcjgwTXN9O1xuICAgICAgZm9udC1zaXplOiAke3ZhcnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGJvcmRlci1yYWRpdXM6ICR7Ym9yZGVyUmFkaXVzfTtcbiAgICAgIGJveC1zaGFkb3c6IDAgMXB4IDFweCAwIHJnYmEoMCwgMCwgMCwgMC4yNCksXG4gICAgICAgIDAgLTFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMTIpO1xuICAgICAgJjpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5MH07XG4gICAgICB9XG4gICAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICB9XG4gICAgICAke2dldFNpemVTdHlsZXMoaXNDb25kZW5zZWQpfVxuICAgIGAsXG4gICAgaXNBY3RpdmUgJiZcbiAgICAgIGNzc2BcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt2YXJzLmNvbG9yTmV1dHJhbDk1fTtcbiAgICAgICAgYm94LXNoYWRvdzogJHt2YXJzLnNoYWRvdzl9O1xuICAgICAgYCxcbiAgICBpc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgfVxuICAgICAgYCxcbiAgXTtcbn07XG4iXX0= */");
+  }
+
+  return /*#__PURE__*/css("padding:0 ", customProperties.spacingM, " 0 ", customProperties.spacingM, ";height:", customProperties.bigButtonHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNZIiwiZmlsZSI6InZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wcyB9IGZyb20gJy4vdmlldy1zd2l0Y2hlci1idXR0b24nO1xuXG5jb25zdCBnZXRTaXplU3R5bGVzID0gKFxuICBpc0NvbmRlbnNlZDogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddXG4pID0+IHtcbiAgaWYgKGlzQ29uZGVuc2VkKSB7XG4gICAgcmV0dXJuIGNzc2BcbiAgICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdTfSAwICR7dmFycy5zcGFjaW5nU307XG4gICAgICBoZWlnaHQ6ICR7dmFycy5zbWFsbEJ1dHRvbkhlaWdodH07XG4gICAgYDtcbiAgfVxuXG4gIHJldHVybiBjc3NgXG4gICAgcGFkZGluZzogMCAke3ZhcnMuc3BhY2luZ019IDAgJHt2YXJzLnNwYWNpbmdNfTtcbiAgICBoZWlnaHQ6ICR7dmFycy5iaWdCdXR0b25IZWlnaHR9O1xuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEJ1dHRvblN0eWxlcyA9IChcbiAgaXNEaXNhYmxlZD86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNEaXNhYmxlZCddLFxuICBpc0FjdGl2ZT86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNBY3RpdmUnXSxcbiAgaXNDb25kZW5zZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQ29uZGVuc2VkJ10sXG4gIGlzRmlyc3RCdXR0b24/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRmlyc3RCdXR0b24nXSxcbiAgaXNMYXN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0xhc3RCdXR0b24nXVxuKSA9PiB7XG4gIGNvbnN0IGJvcmRlclJhZGl1cyA9IGAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9ICR7XG4gICAgaXNMYXN0QnV0dG9uID8gYCR7dmFycy5ib3JkZXJSYWRpdXM2fSAke3ZhcnMuYm9yZGVyUmFkaXVzNn1gIDogJzAgMCdcbiAgfSAke2lzRmlyc3RCdXR0b24gPyB2YXJzLmJvcmRlclJhZGl1czYgOiAnMCd9YDtcblxuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBjb2xvcjogJHt2YXJzLmNvbG9yU29saWR9O1xuICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAke3ZhcnMudHJhbnNpdGlvbkxpbmVhcjgwTXN9O1xuICAgICAgZm9udC1zaXplOiAke3ZhcnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGJvcmRlci1yYWRpdXM6ICR7Ym9yZGVyUmFkaXVzfTtcbiAgICAgIGJveC1zaGFkb3c6IDAgMXB4IDFweCAwIHJnYmEoMCwgMCwgMCwgMC4yNCksXG4gICAgICAgIDAgLTFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMTIpO1xuICAgICAgJjpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5MH07XG4gICAgICB9XG4gICAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICB9XG4gICAgICAke2dldFNpemVTdHlsZXMoaXNDb25kZW5zZWQpfVxuICAgIGAsXG4gICAgaXNBY3RpdmUgJiZcbiAgICAgIGNzc2BcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt2YXJzLmNvbG9yTmV1dHJhbDk1fTtcbiAgICAgICAgYm94LXNoYWRvdzogJHt2YXJzLnNoYWRvdzl9O1xuICAgICAgYCxcbiAgICBpc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvckFjY2VudDk4fTtcbiAgICAgICAgfVxuICAgICAgYCxcbiAgXTtcbn07XG4iXX0= */");
+};
+
+var getButtonStyles = function getButtonStyles(isDisabled, isActive, isCondensed, isFirstButton, isLastButton) {
+  var _context, _context2, _context3;
+
+  var borderRadius = _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(isFirstButton ? customProperties.borderRadius6 : '0', " ")).call(_context2, isLastButton ? _concatInstanceProperty(_context3 = "".concat(customProperties.borderRadius6, " ")).call(_context3, customProperties.borderRadius6) : '0 0', " ")).call(_context, isFirstButton ? customProperties.borderRadius6 : '0');
+
+  return [/*#__PURE__*/css("align-items:center;color:", customProperties.colorSolid, ";transition:background-color ", customProperties.transitionLinear80Ms, ";font-size:", customProperties.fontSizeDefault, ";border-radius:", borderRadius, ";box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.24),0 -1px 1px 0 rgba(0, 0, 0, 0.12);&:hover{background-color:", customProperties.colorNeutral90, ";}&:active{background-color:", customProperties.colorNeutral95, ";}", getSizeStyles(isCondensed), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDTyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgfSBmcm9tICcuL3ZpZXctc3dpdGNoZXItYnV0dG9uJztcblxuY29uc3QgZ2V0U2l6ZVN0eWxlcyA9IChcbiAgaXNDb25kZW5zZWQ6IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNDb25kZW5zZWQnXVxuKSA9PiB7XG4gIGlmIChpc0NvbmRlbnNlZCkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBwYWRkaW5nOiAwICR7dmFycy5zcGFjaW5nU30gMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgaGVpZ2h0OiAke3ZhcnMuc21hbGxCdXR0b25IZWlnaHR9O1xuICAgIGA7XG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdNfSAwICR7dmFycy5zcGFjaW5nTX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuYmlnQnV0dG9uSGVpZ2h0fTtcbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoXG4gIGlzRGlzYWJsZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRGlzYWJsZWQnXSxcbiAgaXNBY3RpdmU/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQWN0aXZlJ10sXG4gIGlzQ29uZGVuc2VkPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddLFxuICBpc0ZpcnN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0ZpcnN0QnV0dG9uJ10sXG4gIGlzTGFzdEJ1dHRvbj86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNMYXN0QnV0dG9uJ11cbikgPT4ge1xuICBjb25zdCBib3JkZXJSYWRpdXMgPSBgJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfSAke1xuICAgIGlzTGFzdEJ1dHRvbiA/IGAke3ZhcnMuYm9yZGVyUmFkaXVzNn0gJHt2YXJzLmJvcmRlclJhZGl1czZ9YCA6ICcwIDAnXG4gIH0gJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfWA7XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgY29sb3I6ICR7dmFycy5jb2xvclNvbGlkfTtcbiAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25MaW5lYXI4ME1zfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gICAgICBib3JkZXItcmFkaXVzOiAke2JvcmRlclJhZGl1c307XG4gICAgICBib3gtc2hhZG93OiAwIDFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMjQpLFxuICAgICAgICAwIC0xcHggMXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEyKTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICAgICAgfVxuICAgICAgJjphY3RpdmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTV9O1xuICAgICAgfVxuICAgICAgJHtnZXRTaXplU3R5bGVzKGlzQ29uZGVuc2VkKX1cbiAgICBgLFxuICAgIGlzQWN0aXZlICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICAgIGJveC1zaGFkb3c6ICR7dmFycy5zaGFkb3c5fTtcbiAgICAgIGAsXG4gICAgaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIGNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIH1cbiAgICAgIGAsXG4gIF07XG59O1xuIl19 */"), isActive && /*#__PURE__*/css("background-color:", customProperties.colorNeutral95, ";box-shadow:", customProperties.shadow9, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlEUyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgfSBmcm9tICcuL3ZpZXctc3dpdGNoZXItYnV0dG9uJztcblxuY29uc3QgZ2V0U2l6ZVN0eWxlcyA9IChcbiAgaXNDb25kZW5zZWQ6IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNDb25kZW5zZWQnXVxuKSA9PiB7XG4gIGlmIChpc0NvbmRlbnNlZCkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBwYWRkaW5nOiAwICR7dmFycy5zcGFjaW5nU30gMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgaGVpZ2h0OiAke3ZhcnMuc21hbGxCdXR0b25IZWlnaHR9O1xuICAgIGA7XG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdNfSAwICR7dmFycy5zcGFjaW5nTX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuYmlnQnV0dG9uSGVpZ2h0fTtcbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoXG4gIGlzRGlzYWJsZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRGlzYWJsZWQnXSxcbiAgaXNBY3RpdmU/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQWN0aXZlJ10sXG4gIGlzQ29uZGVuc2VkPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddLFxuICBpc0ZpcnN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0ZpcnN0QnV0dG9uJ10sXG4gIGlzTGFzdEJ1dHRvbj86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNMYXN0QnV0dG9uJ11cbikgPT4ge1xuICBjb25zdCBib3JkZXJSYWRpdXMgPSBgJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfSAke1xuICAgIGlzTGFzdEJ1dHRvbiA/IGAke3ZhcnMuYm9yZGVyUmFkaXVzNn0gJHt2YXJzLmJvcmRlclJhZGl1czZ9YCA6ICcwIDAnXG4gIH0gJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfWA7XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgY29sb3I6ICR7dmFycy5jb2xvclNvbGlkfTtcbiAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25MaW5lYXI4ME1zfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gICAgICBib3JkZXItcmFkaXVzOiAke2JvcmRlclJhZGl1c307XG4gICAgICBib3gtc2hhZG93OiAwIDFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMjQpLFxuICAgICAgICAwIC0xcHggMXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEyKTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICAgICAgfVxuICAgICAgJjphY3RpdmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTV9O1xuICAgICAgfVxuICAgICAgJHtnZXRTaXplU3R5bGVzKGlzQ29uZGVuc2VkKX1cbiAgICBgLFxuICAgIGlzQWN0aXZlICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICAgIGJveC1zaGFkb3c6ICR7dmFycy5zaGFkb3c5fTtcbiAgICAgIGAsXG4gICAgaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIGNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIH1cbiAgICAgIGAsXG4gIF07XG59O1xuIl19 */"), isDisabled && /*#__PURE__*/css("background-color:", customProperties.colorAccent98, ";color:", customProperties.colorNeutral60, ";&:hover{background-color:", customProperties.colorAccent98, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEUyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgfSBmcm9tICcuL3ZpZXctc3dpdGNoZXItYnV0dG9uJztcblxuY29uc3QgZ2V0U2l6ZVN0eWxlcyA9IChcbiAgaXNDb25kZW5zZWQ6IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNDb25kZW5zZWQnXVxuKSA9PiB7XG4gIGlmIChpc0NvbmRlbnNlZCkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBwYWRkaW5nOiAwICR7dmFycy5zcGFjaW5nU30gMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgaGVpZ2h0OiAke3ZhcnMuc21hbGxCdXR0b25IZWlnaHR9O1xuICAgIGA7XG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgIHBhZGRpbmc6IDAgJHt2YXJzLnNwYWNpbmdNfSAwICR7dmFycy5zcGFjaW5nTX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuYmlnQnV0dG9uSGVpZ2h0fTtcbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoXG4gIGlzRGlzYWJsZWQ/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzRGlzYWJsZWQnXSxcbiAgaXNBY3RpdmU/OiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHNbJ2lzQWN0aXZlJ10sXG4gIGlzQ29uZGVuc2VkPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0NvbmRlbnNlZCddLFxuICBpc0ZpcnN0QnV0dG9uPzogVFZpZXdTd2l0Y2hlckJ1dHRvblByb3BzWydpc0ZpcnN0QnV0dG9uJ10sXG4gIGlzTGFzdEJ1dHRvbj86IFRWaWV3U3dpdGNoZXJCdXR0b25Qcm9wc1snaXNMYXN0QnV0dG9uJ11cbikgPT4ge1xuICBjb25zdCBib3JkZXJSYWRpdXMgPSBgJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfSAke1xuICAgIGlzTGFzdEJ1dHRvbiA/IGAke3ZhcnMuYm9yZGVyUmFkaXVzNn0gJHt2YXJzLmJvcmRlclJhZGl1czZ9YCA6ICcwIDAnXG4gIH0gJHtpc0ZpcnN0QnV0dG9uID8gdmFycy5ib3JkZXJSYWRpdXM2IDogJzAnfWA7XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgY29sb3I6ICR7dmFycy5jb2xvclNvbGlkfTtcbiAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25MaW5lYXI4ME1zfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gICAgICBib3JkZXItcmFkaXVzOiAke2JvcmRlclJhZGl1c307XG4gICAgICBib3gtc2hhZG93OiAwIDFweCAxcHggMCByZ2JhKDAsIDAsIDAsIDAuMjQpLFxuICAgICAgICAwIC0xcHggMXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEyKTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICAgICAgfVxuICAgICAgJjphY3RpdmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsOTV9O1xuICAgICAgfVxuICAgICAgJHtnZXRTaXplU3R5bGVzKGlzQ29uZGVuc2VkKX1cbiAgICBgLFxuICAgIGlzQWN0aXZlICYmXG4gICAgICBjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dmFycy5jb2xvck5ldXRyYWw5NX07XG4gICAgICAgIGJveC1zaGFkb3c6ICR7dmFycy5zaGFkb3c5fTtcbiAgICAgIGAsXG4gICAgaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIGNvbG9yOiAke3ZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JBY2NlbnQ5OH07XG4gICAgICAgIH1cbiAgICAgIGAsXG4gIF07XG59O1xuIl19 */")];
+};
+
+var ViewSwitcherButton = function ViewSwitcherButton(props) {
+  return jsxs(AccessibleButton, {
+    label: props.children,
+    css: getButtonStyles(props.isDisabled, props.isActive, props.isCondensed, props.isFirstButton, props.isLastButton),
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    children: [props.icon && jsx("span", {
+      css: /*#__PURE__*/css("margin:0 ", customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:ViewSwitcherButton;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXItYnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Q2dCIiwiZmlsZSI6InZpZXctc3dpdGNoZXItYnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIGNsb25lRWxlbWVudCxcbiAgdHlwZSBNb3VzZUV2ZW50LFxuICB0eXBlIEtleWJvYXJkRXZlbnQsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgQWNjZXNzaWJsZUJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9hY2Nlc3NpYmxlLWJ1dHRvbic7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGdldEJ1dHRvblN0eWxlcyB9IGZyb20gJy4vdmlldy1zd2l0Y2hlci5zdHlsZXMnO1xuXG5leHBvcnQgdHlwZSBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBpc0FjdGl2ZT86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBzdHJpbmc7XG4gIGlzQ29uZGVuc2VkPzogYm9vbGVhbjtcbiAgaXNGaXJzdEJ1dHRvbj86IGJvb2xlYW47XG4gIGlzTGFzdEJ1dHRvbj86IGJvb2xlYW47XG4gIGljb24/OiBSZWFjdEVsZW1lbnQ7XG4gIHZhbHVlOiBzdHJpbmc7XG4gIG9uQ2xpY2s/OiAoXG4gICAgZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+IHwgS2V5Ym9hcmRFdmVudDxIVE1MQnV0dG9uRWxlbWVudD5cbiAgKSA9PiB2b2lkO1xufTtcblxuY29uc3QgVmlld1N3aXRjaGVyQnV0dG9uID0gKHByb3BzOiBUVmlld1N3aXRjaGVyQnV0dG9uUHJvcHMpID0+IChcbiAgPEFjY2Vzc2libGVCdXR0b25cbiAgICBsYWJlbD17cHJvcHMuY2hpbGRyZW59XG4gICAgY3NzPXtnZXRCdXR0b25TdHlsZXMoXG4gICAgICBwcm9wcy5pc0Rpc2FibGVkLFxuICAgICAgcHJvcHMuaXNBY3RpdmUsXG4gICAgICBwcm9wcy5pc0NvbmRlbnNlZCxcbiAgICAgIHByb3BzLmlzRmlyc3RCdXR0b24sXG4gICAgICBwcm9wcy5pc0xhc3RCdXR0b25cbiAgICApfVxuICAgIG9uQ2xpY2s9e3Byb3BzLm9uQ2xpY2t9XG4gICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgPlxuICAgIHtwcm9wcy5pY29uICYmIChcbiAgICAgIDxzcGFuXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbjogMCAke3ZhcnMuc3BhY2luZ1hzfSAwIDA7XG4gICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7Y2xvbmVFbGVtZW50KHByb3BzLmljb24sIHtcbiAgICAgICAgICBjb2xvcjogcHJvcHMuaXNEaXNhYmxlZCA/ICduZXV0cmFsNjAnIDogJ2NvbG9yU29saWQnLFxuICAgICAgICAgIHNpemU6IHByb3BzLmlzQ29uZGVuc2VkID8gJ21lZGl1bScgOiAnYmlnJyxcbiAgICAgICAgfSl9XG4gICAgICA8L3NwYW4+XG4gICAgKX1cbiAgICA8c3Bhbj57cHJvcHMuY2hpbGRyZW59PC9zcGFuPlxuICA8L0FjY2Vzc2libGVCdXR0b24+XG4pO1xuXG5WaWV3U3dpdGNoZXJCdXR0b24uZGlzcGxheU5hbWUgPSAnVmlld1N3aXRjaGVyQnV0dG9uJztcbmV4cG9ydCBkZWZhdWx0IFZpZXdTd2l0Y2hlckJ1dHRvbjtcbiJdfQ== */"),
+      children: /*#__PURE__*/cloneElement(props.icon, {
+        color: props.isDisabled ? 'neutral60' : 'colorSolid',
+        size: props.isCondensed ? 'medium' : 'big'
+      })
+    }), jsx("span", {
+      children: props.children
+    })]
+  });
+};
+
+ViewSwitcherButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  isDisabled: _pt.bool,
+  isActive: _pt.bool,
+  children: _pt.string.isRequired,
+  isCondensed: _pt.bool,
+  isFirstButton: _pt.bool,
+  isLastButton: _pt.bool,
+  icon: _pt.element,
+  value: _pt.string.isRequired,
+  onClick: _pt.func
+} : {};
+ViewSwitcherButton.displayName = 'ViewSwitcherButton';
+var Button = ViewSwitcherButton;
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "xd53is-ViewSwitcher",
+  styles: "display:flex;label:ViewSwitcher;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlFYyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoaWxkcmVuLFxuICBpc1ZhbGlkRWxlbWVudCxcbiAgY2xvbmVFbGVtZW50LFxuICB1c2VTdGF0ZSxcbiAgdHlwZSBSZWFjdE5vZGUsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgVmlld1N3aXRjaGVyQnV0dG9uIGZyb20gJy4vdmlldy1zd2l0Y2hlci1idXR0b24nO1xuaW1wb3J0IHsgd2FybmluZyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcblxudHlwZSBUUmVhY3RDaGlsZCA9IHtcbiAgdHlwZT86IHsgZGlzcGxheU5hbWU6IHN0cmluZyB9O1xufSAmIFJlYWN0RWxlbWVudDtcblxuZXhwb3J0IHR5cGUgVFZpZXdTd2l0Y2hlclByb3BzID0ge1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgdGhlIHZpZXcgc3dpdGNoZXIgY2FuIGJlIHJlZHVjZWQgdG8gc2F2ZSBzcGFjZVxuICAgKi9cbiAgaXNDb25kZW5zZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogUGFzcyBvbmUgb3IgbW9yZSBgVmlld1N3aXRjaGVyLkJ1dHRvbmAgY29tcG9uZW50c1xuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIFdpbGwgYmUgdHJpZ2dlcmVkIHdoZW5ldmVyIGEgYFZpZXdTd2l0Y2hlci5CdXR0b25gIGlzIHNlbGVjdGVkLiBDYWxsZWQgd2l0aCB0aGUgVmlld1N3aXRjaGVyQnV0dG9uIHZhbHVlXG4gICAqL1xuICBvbkNoYW5nZT86ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoZSBkZWZhdWx0IHNlbGVjdGVkIGJ1dHRvblxuICAgKi9cbiAgZGVmYXVsdFNlbGVjdGVkOiBzdHJpbmc7XG59O1xuXG5jb25zdCBWaWV3U3dpdGNoZXIgPSAocHJvcHM6IFRWaWV3U3dpdGNoZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2VsZWN0ZWRCdXR0b24sIHNldFNlbGVjdGVkQnV0dG9uXSA9IHVzZVN0YXRlPHN0cmluZz4oXG4gICAgcHJvcHMuZGVmYXVsdFNlbGVjdGVkXG4gICk7XG5cbiAgd2FybmluZyhcbiAgICAocHJvcHMuY2hpbGRyZW4gYXMgVFJlYWN0Q2hpbGRbXSkubGVuZ3RoID4gMCxcbiAgICAnVmlld1N3aXRjaGVyLkdyb3VwIG11c3QgY29udGFpbiBhdCBsZWFzdCBvbmUgVmlld1N3aXRjaGVyLkJ1dHRvbidcbiAgKTtcblxuICBjb25zdCB2aWV3U3dpdGNoZXJFbGVtZW50cyA9IENoaWxkcmVuLm1hcChwcm9wcy5jaGlsZHJlbiwgKGNoaWxkLCBpbmRleCkgPT4ge1xuICAgIGlmIChcbiAgICAgIGNoaWxkICYmXG4gICAgICBpc1ZhbGlkRWxlbWVudChjaGlsZCkgJiZcbiAgICAgIChjaGlsZCBhcyBUUmVhY3RDaGlsZCkudHlwZS5kaXNwbGF5TmFtZSA9PT0gVmlld1N3aXRjaGVyQnV0dG9uLmRpc3BsYXlOYW1lXG4gICAgKSB7XG4gICAgICBjb25zdCBpc0J1dHRvbkFjdGl2ZSA9IHNlbGVjdGVkQnV0dG9uID09PSBjaGlsZC5wcm9wcy52YWx1ZTtcbiAgICAgIGNvbnN0IGNsb25lZENoaWxkID0gY2xvbmVFbGVtZW50KGNoaWxkLCB7XG4gICAgICAgIG9uQ2xpY2s6ICgpID0+IHtcbiAgICAgICAgICBzZXRTZWxlY3RlZEJ1dHRvbihjaGlsZC5wcm9wcy52YWx1ZSk7XG4gICAgICAgICAgaWYgKCFpc0J1dHRvbkFjdGl2ZSkge1xuICAgICAgICAgICAgY2hpbGQucHJvcHMub25DbGljaz8uKGNoaWxkLnByb3BzLnZhbHVlKTtcbiAgICAgICAgICAgIHByb3BzLm9uQ2hhbmdlPy4oY2hpbGQucHJvcHMudmFsdWUpO1xuICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgaXNDb25kZW5zZWQ6IHByb3BzLmlzQ29uZGVuc2VkLFxuICAgICAgICBpc0FjdGl2ZTogaXNCdXR0b25BY3RpdmUsXG4gICAgICAgIGlzRmlyc3RCdXR0b246IGluZGV4ID09PSAwLFxuICAgICAgICBpc0xhc3RCdXR0b246XG4gICAgICAgICAgaW5kZXggPT09ICgocHJvcHMuY2hpbGRyZW4gYXMgVFJlYWN0Q2hpbGRbXSkubGVuZ3RoID8/IDEpIC0gMSxcbiAgICAgIH0pO1xuICAgICAgcmV0dXJuIGNsb25lZENoaWxkO1xuICAgIH1cbiAgICByZXR1cm4gY2hpbGQ7XG4gIH0pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBgfVxuICAgID5cbiAgICAgIHt2aWV3U3dpdGNoZXJFbGVtZW50c31cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFZpZXdTd2l0Y2hlcjtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var ViewSwitcher$1 = function ViewSwitcher(props) {
+  var _useState = useState(props.defaultSelected),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedButton = _useState2[0],
+      setSelectedButton = _useState2[1];
+
+  process.env.NODE_ENV !== "production" ? warning(props.children.length > 0, 'ViewSwitcher.Group must contain at least one ViewSwitcher.Button') : void 0;
+
+  var viewSwitcherElements = _mapInstanceProperty(Children).call(Children, props.children, function (child, index) {
+    if (child && /*#__PURE__*/isValidElement(child) && child.type.displayName === Button.displayName) {
+      var _length;
+
+      var isButtonActive = selectedButton === child.props.value;
+      var clonedChild = /*#__PURE__*/cloneElement(child, {
+        onClick: function onClick() {
+          setSelectedButton(child.props.value);
+
+          if (!isButtonActive) {
+            var _child$props$onClick, _child$props, _props$onChange;
+
+            (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, child.props.value);
+            (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, child.props.value);
+          }
+        },
+        isCondensed: props.isCondensed,
+        isActive: isButtonActive,
+        isFirstButton: index === 0,
+        isLastButton: index === ((_length = props.children.length) !== null && _length !== void 0 ? _length : 1) - 1
+      });
+      return clonedChild;
+    }
+
+    return child;
+  });
+
+  return jsx("div", {
+    css: _ref,
+    children: viewSwitcherElements
+  });
+};
+
+ViewSwitcher$1.propTypes = process.env.NODE_ENV !== "production" ? {
+  isCondensed: _pt.bool,
+  children: _pt.node.isRequired,
+  onChange: _pt.func,
+  defaultSelected: _pt.string.isRequired
+} : {};
+var Group = ViewSwitcher$1;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "15.0.0";
+
+var ViewSwitcher = {
+  Group: Group,
+  Button: Button
+};
+
+export { ViewSwitcher as default, version };

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,9 @@
+declare const ViewSwitcher: {
+    Group: (props: import("./view-switcher").TViewSwitcherProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Button: {
+        (props: import("./view-switcher-button").TViewSwitcherButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default ViewSwitcher;
+export { default as version } from './version';

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/dist/declarations/src/view-switcher-button.d.ts

@@ -0,0 +1,17 @@
+import { type MouseEvent, type KeyboardEvent, type ReactElement } from 'react';
+export declare type TViewSwitcherButtonProps = {
+    isDisabled?: boolean;
+    isActive?: boolean;
+    children: string;
+    isCondensed?: boolean;
+    isFirstButton?: boolean;
+    isLastButton?: boolean;
+    icon?: ReactElement;
+    value: string;
+    onClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+};
+declare const ViewSwitcherButton: {
+    (props: TViewSwitcherButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ViewSwitcherButton;

package/dist/declarations/src/view-switcher.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export declare type TViewSwitcherProps = {
+    isCondensed?: boolean;
+    children: ReactNode;
+    onChange?: (value: string) => void;
+    defaultSelected: string;
+};
+declare const ViewSwitcher: (props: TViewSwitcherProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ViewSwitcher;

package/dist/declarations/src/view-switcher.styles.d.ts

@@ -0,0 +1,2 @@
+import type { TViewSwitcherButtonProps } from './view-switcher-button';
+export declare const getButtonStyles: (isDisabled?: TViewSwitcherButtonProps['isDisabled'], isActive?: TViewSwitcherButtonProps['isActive'], isCondensed?: TViewSwitcherButtonProps['isCondensed'], isFirstButton?: TViewSwitcherButtonProps['isFirstButton'], isLastButton?: TViewSwitcherButtonProps['isLastButton']) => (false | import("@emotion/utils").SerializedStyles | undefined)[];

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@commercetools-uikit/view-switcher",
+  "description": "ViewSwitchers allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.",
+  "version": "0.0.0-canary-20220603091700",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/view-switcher"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "typescript",
+    "design-system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-view-switcher.cjs.js",
+  "module": "dist/commercetools-uikit-view-switcher.esm.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.17.2",
+    "@babel/runtime-corejs3": "^7.17.2",
+    "@commercetools-uikit/accessible-button": "15.0.0",
+    "@commercetools-uikit/design-system": "15.0.0",
+    "@commercetools-uikit/utils": "15.0.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.8.1"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}