@pingux/astro 2.125.0-alpha.1 → 2.125.0-alpha.3

package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -14,14 +14,14 @@ var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _index = require("../../index");
+var _ = require("../..");
 var _RockerButtonGroup = _interopRequireDefault(require("./RockerButtonGroup.mdx"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = {
   title: 'Components/RockerButtonGroup',
-  component: _index.RockerButtonGroup,
+  component: _.RockerButtonGroup,
   parameters: {
     docs: {
       page: function page() {
@@ -48,26 +48,26 @@ var _default = {
 exports["default"] = _default;
 var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
-  return (0, _react2.jsx)(_index.RockerButtonGroup, args, (0, _react2.jsx)(_index.RockerButton, {
+  return (0, _react2.jsx)(_.RockerButtonGroup, args, (0, _react2.jsx)(_.RockerButton, {
     name: "and",
     key: "and"
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "And"), (0, _react2.jsx)(_.RockerButton, {
     name: "or",
     key: "or"
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "Or"), (0, _react2.jsx)(_.RockerButton, {
     name: "maybe",
     key: "maybe"
   }, "Maybe"));
 };
 exports.Default = Default;
 var Uncontrolled = function Uncontrolled() {
-  return (0, _react2.jsx)(_index.RockerButtonGroup, null, (0, _react2.jsx)(_index.RockerButton, {
+  return (0, _react2.jsx)(_.RockerButtonGroup, null, (0, _react2.jsx)(_.RockerButton, {
     name: "and",
     key: "and"
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "And"), (0, _react2.jsx)(_.RockerButton, {
     name: "or",
     key: "or"
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "Or"), (0, _react2.jsx)(_.RockerButton, {
     name: "maybe",
     key: "maybe"
   }, "Maybe"));
@@ -78,55 +78,55 @@ var Controlled = function Controlled() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
-  return (0, _react2.jsx)(_index.RockerButtonGroup, {
+  return (0, _react2.jsx)(_.RockerButtonGroup, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab
-  }, (0, _react2.jsx)(_index.RockerButton, {
+  }, (0, _react2.jsx)(_.RockerButton, {
     name: "and",
     key: "and"
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "And"), (0, _react2.jsx)(_.RockerButton, {
     name: "or",
     key: "or"
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "Or"), (0, _react2.jsx)(_.RockerButton, {
     name: "maybe",
     key: "maybe"
   }, "Maybe"));
 };
 exports.Controlled = Controlled;
 var DisabledSingleButton = function DisabledSingleButton() {
-  return (0, _react2.jsx)(_index.RockerButtonGroup, {
+  return (0, _react2.jsx)(_.RockerButtonGroup, {
     defaultSelectedKey: "or",
     disabledKeys: ['and']
-  }, (0, _react2.jsx)(_index.RockerButton, {
+  }, (0, _react2.jsx)(_.RockerButton, {
     name: "and",
     key: "and"
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "And"), (0, _react2.jsx)(_.RockerButton, {
     name: "or",
     key: "or"
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "Or"), (0, _react2.jsx)(_.RockerButton, {
     name: "maybe",
     key: "maybe"
   }, "Maybe"));
 };
 exports.DisabledSingleButton = DisabledSingleButton;
 var customColors = function customColors() {
-  return (0, _react2.jsx)(_index.RockerButtonGroup, null, (0, _react2.jsx)(_index.RockerButton, {
+  return (0, _react2.jsx)(_.RockerButtonGroup, null, (0, _react2.jsx)(_.RockerButton, {
     name: "and",
     key: "and",
     selectedStyles: {
-      bg: '#640099'
+      bg: '#640099 !important'
     }
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "And"), (0, _react2.jsx)(_.RockerButton, {
     name: "or",
     key: "or",
     selectedStyles: {
-      bg: '#4660A2'
+      bg: '#4660A2 !important'
     }
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+  }, "Or"), (0, _react2.jsx)(_.RockerButton, {
     name: "maybe",
     key: "maybe",
     selectedStyles: {
-      bg: 'decorative.4'
+      bg: '#e30080 !important'
     }
   }, "Maybe"));
 };

package/lib/cjs/components/RockerButtonGroup/stories/NextGenDarkRockerButtonGroup.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/RockerButtonGroup/stories/NextGenDarkRockerButtonGroup.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _RockerButtonGroupChromatic = require("./RockerButtonGroup.chromatic.stories");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark RockerButtonGroup'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenDarkTheme]
+  }, (0, _react2.jsx)(_RockerButtonGroupChromatic.Default, null));
+};
+exports.Default = Default;

package/lib/cjs/components/RockerButtonGroup/stories/NextGenRockerButtonGroup.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/RockerButtonGroup/stories/NextGenRockerButtonGroup.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _RockerButtonGroupChromatic = require("./RockerButtonGroup.chromatic.stories");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx RockerButtonGroup'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_RockerButtonGroupChromatic.Default, null));
+};
+exports.Default = Default;

package/lib/cjs/{styles/themeOverrides → components/RockerButtonGroup}/stories/RockerButtonGroup.chromatic.stories.js

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../../../index");
-var _withUiLibraryCss = _interopRequireDefault(require("../withUiLibraryCss"));
+var _withUiLibraryCss = _interopRequireDefault(require("../../../styles/themeOverrides/withUiLibraryCss"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Chromatic Only RockerButtonGroup',

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -1,4 +1,24 @@
 declare const _default: {
+    rockerButton: {
+        innerContainer: {
+            border: number;
+            boxShadow: string;
+            backgroundColor: string;
+            button: {
+                backgroundColor: string;
+                color: string;
+                '&.is-selected': {
+                    color: string;
+                };
+                '&.is-hovered': {
+                    color: string;
+                };
+                '&.is-pressed': {
+                    color: string;
+                };
+            };
+        };
+    };
     attachment: {
         container: {
             backgroundColor: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -63,6 +63,26 @@ var modal = {
     bg: 'background.base'
   }
 };
+var rockerButton = {
+  innerContainer: {
+    border: 0,
+    boxShadow: 'none',
+    backgroundColor: 'gray-900',
+    'button': {
+      backgroundColor: 'gray-900',
+      color: 'blue-400',
+      '&.is-selected': {
+        color: 'gray-900'
+      },
+      '&.is-hovered': {
+        color: 'gray-900'
+      },
+      '&.is-pressed': {
+        color: 'gray-900'
+      }
+    }
+  }
+};
 var attachment = {
   container: {
     backgroundColor: 'background.secondary',
@@ -75,6 +95,7 @@ var tooltip = {
   }
 };
 var _default = {
+  rockerButton: rockerButton,
   attachment: attachment,
   avatar: _avatar.avatar,
   message: _message.message,

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -3568,6 +3568,55 @@ declare const _default: {
                 };
             };
         };
+        rockerButton: {
+            innerContainer: {
+                height: number;
+                boxShadow: string;
+                backgroundColor: string;
+                borderRadius: string;
+                padding: number;
+                button: {
+                    backgroundColor: string;
+                    padding: string;
+                    height: string;
+                    color: string;
+                    border: string;
+                    borderColor: string;
+                    borderRadius: number;
+                    '&.is-selected': {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                    '&.is-hovered': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                    '&.is-pressed': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                    '&.is-focused': {
+                        outline: string;
+                        outlineColor: string;
+                        outlineOffset: string;
+                    };
+                };
+                'button:not(:first-child)': {
+                    borderLeft: number;
+                };
+                'button:first-child': {
+                    borderTopLeftRadius: string;
+                    borderBottomLeftRadius: string;
+                };
+                'button:last-child': {
+                    borderTopRightRadius: string;
+                    borderBottomRightRadius: string;
+                };
+            };
+            thumbSwitch: {
+                textTransform: string;
+            };
+        };
         tooltip: {
             container: {
                 backgroundColor: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -1233,6 +1233,55 @@ declare const _default: {
             };
         };
     };
+    rockerButton: {
+        innerContainer: {
+            height: number;
+            boxShadow: string;
+            backgroundColor: string;
+            borderRadius: string;
+            padding: number;
+            button: {
+                backgroundColor: string;
+                padding: string;
+                height: string;
+                color: string;
+                border: string;
+                borderColor: string;
+                borderRadius: number;
+                '&.is-selected': {
+                    color: string;
+                    backgroundColor: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    color: string;
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    color: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+            };
+            'button:not(:first-child)': {
+                borderLeft: number;
+            };
+            'button:first-child': {
+                borderTopLeftRadius: string;
+                borderBottomLeftRadius: string;
+            };
+            'button:last-child': {
+                borderTopRightRadius: string;
+                borderBottomRightRadius: string;
+            };
+        };
+        thumbSwitch: {
+            textTransform: string;
+        };
+    };
     tooltip: {
         container: {
             backgroundColor: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -304,6 +304,55 @@ var overlayPanel = {
     backgroundColor: 'background.base'
   }
 };
+var rockerButton = {
+  innerContainer: {
+    height: 50,
+    boxShadow: 'none',
+    backgroundColor: 'white',
+    borderRadius: '50px',
+    padding: 0,
+    'button': {
+      backgroundColor: 'white',
+      padding: '0px 15px',
+      height: '100%',
+      color: 'active',
+      border: '1px solid',
+      borderColor: 'active',
+      borderRadius: 0,
+      '&.is-selected': {
+        color: 'white',
+        backgroundColor: 'active'
+      },
+      '&.is-hovered': {
+        backgroundColor: '#1462C8 !important',
+        color: 'white'
+      },
+      '&.is-pressed': {
+        backgroundColor: '#135CBC !important',
+        color: 'white'
+      },
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'focus',
+        outlineOffset: '2px'
+      }
+    },
+    'button:not(:first-child)': {
+      borderLeft: 0
+    },
+    'button:first-child': {
+      borderTopLeftRadius: '50px',
+      borderBottomLeftRadius: '50px'
+    },
+    'button:last-child': {
+      borderTopRightRadius: '50px',
+      borderBottomRightRadius: '50px'
+    }
+  },
+  thumbSwitch: {
+    textTransform: 'none'
+  }
+};
 var loader = {
   withinListView: {
     color: 'active'
@@ -337,6 +386,7 @@ var _default = {
   suggestion: _suggestion["default"],
   response: _response["default"],
   skeleton: _Skeleton["default"],
+  rockerButton: rockerButton,
   tooltip: _tooltip["default"],
   footer: _footer.footer,
   loader: loader

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -3,7 +3,7 @@ import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { RockerButton, RockerButtonGroup } from '../../index';
+import { RockerButton, RockerButtonGroup } from '../..';
 import RockerButtonGroupReadme from './RockerButtonGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -96,19 +96,19 @@ export var customColors = function customColors() {
     name: "and",
     key: "and",
     selectedStyles: {
-      bg: '#640099'
+      bg: '#640099 !important'
     }
   }, "And"), ___EmotionJSX(RockerButton, {
     name: "or",
     key: "or",
     selectedStyles: {
-      bg: '#4660A2'
+      bg: '#4660A2 !important'
     }
   }, "Or"), ___EmotionJSX(RockerButton, {
     name: "maybe",
     key: "maybe",
     selectedStyles: {
-      bg: 'decorative.4'
+      bg: '#e30080 !important'
     }
   }, "Maybe"));
 };

package/lib/components/RockerButtonGroup/stories/NextGenDarkRockerButtonGroup.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenDarkTheme } from '../../..';
+import { Default as RockerButtonGroupNextGen } from './RockerButtonGroup.chromatic.stories';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark RockerButtonGroup'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenDarkTheme]
+  }, ___EmotionJSX(RockerButtonGroupNextGen, null));
+};

package/lib/components/RockerButtonGroup/stories/NextGenRockerButtonGroup.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import { Default as RockerButtonGroupNextGen } from './RockerButtonGroup.chromatic.stories';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx RockerButtonGroup'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(RockerButtonGroupNextGen, null));
+};

package/lib/{styles/themeOverrides → components/RockerButtonGroup}/stories/RockerButtonGroup.chromatic.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RockerButton, RockerButtonGroup } from '../../../index';
-import WithUiLibraryCss from '../withUiLibraryCss';
+import WithUiLibraryCss from '../../../styles/themeOverrides/withUiLibraryCss';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Chromatic Only RockerButtonGroup',

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -55,6 +55,26 @@ var modal = {
     bg: 'background.base'
   }
 };
+var rockerButton = {
+  innerContainer: {
+    border: 0,
+    boxShadow: 'none',
+    backgroundColor: 'gray-900',
+    'button': {
+      backgroundColor: 'gray-900',
+      color: 'blue-400',
+      '&.is-selected': {
+        color: 'gray-900'
+      },
+      '&.is-hovered': {
+        color: 'gray-900'
+      },
+      '&.is-pressed': {
+        color: 'gray-900'
+      }
+    }
+  }
+};
 var attachment = {
   container: {
     backgroundColor: 'background.secondary',
@@ -67,6 +87,7 @@ var tooltip = {
   }
 };
 export default {
+  rockerButton: rockerButton,
   attachment: attachment,
   avatar: avatar,
   message: message,

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

package/lib/styles/themes/next-gen/variants/variants.js

@@ -295,6 +295,55 @@ var overlayPanel = {
     backgroundColor: 'background.base'
   }
 };
+var rockerButton = {
+  innerContainer: {
+    height: 50,
+    boxShadow: 'none',
+    backgroundColor: 'white',
+    borderRadius: '50px',
+    padding: 0,
+    'button': {
+      backgroundColor: 'white',
+      padding: '0px 15px',
+      height: '100%',
+      color: 'active',
+      border: '1px solid',
+      borderColor: 'active',
+      borderRadius: 0,
+      '&.is-selected': {
+        color: 'white',
+        backgroundColor: 'active'
+      },
+      '&.is-hovered': {
+        backgroundColor: '#1462C8 !important',
+        color: 'white'
+      },
+      '&.is-pressed': {
+        backgroundColor: '#135CBC !important',
+        color: 'white'
+      },
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'focus',
+        outlineOffset: '2px'
+      }
+    },
+    'button:not(:first-child)': {
+      borderLeft: 0
+    },
+    'button:first-child': {
+      borderTopLeftRadius: '50px',
+      borderBottomLeftRadius: '50px'
+    },
+    'button:last-child': {
+      borderTopRightRadius: '50px',
+      borderBottomRightRadius: '50px'
+    }
+  },
+  thumbSwitch: {
+    textTransform: 'none'
+  }
+};
 var loader = {
   withinListView: {
     color: 'active'
@@ -328,6 +377,7 @@ export default {
   suggestion: suggestion,
   response: response,
   skeleton: skeleton,
+  rockerButton: rockerButton,
   tooltip: tooltip,
   footer: footer,
   loader: loader

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.125.0-alpha.1",
+  "version": "2.125.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",