@pingux/astro 2.161.1-alpha.1 → 2.161.1-alpha.2

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

@@ -127,30 +127,27 @@ var Default = exports.Default = function Default(args) {
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 var DisabledToolTips = exports.DisabledToolTips = function DisabledToolTips(args) {
@@ -162,30 +159,27 @@ var DisabledToolTips = exports.DisabledToolTips = function DisabledToolTips(args
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 Default.parameters = {
@@ -207,30 +201,27 @@ var WithCustomTooltip = exports.WithCustomTooltip = function WithCustomTooltip(a
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 var ControlledStepper = exports.ControlledStepper = function ControlledStepper() {
@@ -249,10 +240,9 @@ var ControlledStepper = exports.ControlledStepper = function ControlledStepper()
     }, (0, _react2.jsx)(_index.Box, {
       sx: sx.contentContainer
     }, (0, _react2.jsx)(_index.Text, {
-      fontSize: "lg",
-      fontWeight: "3"
+      variant: "stepperTabContentHeader"
     }, item.title), (0, _react2.jsx)(_index.Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };
@@ -301,10 +291,9 @@ var Panel = exports.Panel = function Panel() {
       }, (0, _react2.jsx)(_index.Box, {
         sx: sx.contentContainer
       }, (0, _react2.jsx)(_index.Text, {
-        fontSize: "lg",
-        fontWeight: "3"
+        variant: "stepperTabContentHeader"
       }, item.title), (0, _react2.jsx)(_index.Text, {
-        fontSize: "md"
+        variant: "stepperTabContent"
       }, item.children)));
     })))
   );
@@ -328,7 +317,7 @@ var VerticalStepper = exports.VerticalStepper = function VerticalStepper() {
     }, (0, _react2.jsx)(_index.Box, {
       sx: sx.verticalContentContainer
     }, (0, _react2.jsx)(_index.Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };

package/lib/cjs/components/Stepper/Stepper.styles.js

@@ -23,7 +23,7 @@ var wrapper = {
 var tabs = {
   outline: 'none',
   borderBottom: 'none',
-  mb: 0,
+  mb: 'lg',
   justifyContent: 'center',
   '&.is-horizontal': {
     width: '100%'

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -6431,6 +6431,13 @@ export declare const text: {
         variant?: string;
         label?: string;
     };
+    stepperTabContent: {
+        fontSize: string;
+    };
+    stepperTabContentHeader: {
+        fontSize: string;
+        fontWeight: number;
+    };
     H1: {
         lineHeight: string;
         fontWeight: number;

package/lib/cjs/components/Text/Text.styles.js

@@ -170,6 +170,13 @@ var listViewItemExpandedText = {
   fontSize: 'md',
   color: 'text.primary'
 };
+var stepperTabContent = {
+  fontSize: 'md'
+};
+var stepperTabContentHeader = {
+  fontSize: 'lg',
+  fontWeight: 3
+};
 var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -288,5 +295,7 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   copyRightText: copyRightText,
   attachmentTitle: attachmentTitle,
   messagesText: _objectSpread({}, base),
-  stepperLabel: stepperLabel
+  stepperLabel: stepperLabel,
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    step: {
+        active: {
+            '&.is-horizontal': {
+                color: string;
+            };
+        };
+        inactive: {
+            '&.is-horizontal': {
+                backgroundColor: string;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var step = {
+  active: {
+    '&.is-horizontal': {
+      color: 'black'
+    }
+  },
+  inactive: {
+    '&.is-horizontal': {
+      backgroundColor: 'black'
+    }
+  }
+};
+var _default = exports["default"] = {
+  step: step
+};

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

@@ -532,6 +532,20 @@ declare const _default: {
             backgroundColor: string;
         };
     };
+    stepper: {
+        step: {
+            active: {
+                '&.is-horizontal': {
+                    color: string;
+                };
+            };
+            inactive: {
+                '&.is-horizontal': {
+                    backgroundColor: string;
+                };
+            };
+        };
+    };
     footer: {
         container: {
             backgroundColor: string;

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

@@ -17,6 +17,7 @@ var _message = require("./message");
 var _navbar = require("./navbar");
 var _rangeCalendar = _interopRequireDefault(require("./rangeCalendar"));
 var _skeleton = _interopRequireDefault(require("./skeleton"));
+var _stepper = _interopRequireDefault(require("./stepper"));
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
@@ -190,6 +191,7 @@ var _default = exports["default"] = {
   tab: tab,
   iconBadge: _iconBadge["default"],
   skeleton: _skeleton["default"],
+  stepper: _stepper["default"],
   footer: _footer.footer,
   tooltip: tooltip,
   popoverMenu: {

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

@@ -1975,6 +1975,17 @@ declare const _default: {
             color: string;
             marginTop: string;
         };
+        stepperTabContent: {
+            fontSize: string;
+            color: string;
+            lineHeight: string;
+        };
+        stepperTabContentHeader: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            fontFamily: string;
+        };
         H1: {
             fontSize: string;
             fontWeight: number;
@@ -5282,7 +5293,8 @@ declare const _default: {
                 mr: string;
             };
             line: {
-                mr: string;
+                mx: string;
+                maxWidth: string;
                 borderBottomWidth: string;
                 borderBottomColor: string;
                 '&.is-inactive': {
@@ -5292,29 +5304,32 @@ declare const _default: {
             };
             step: {
                 active: {
-                    '&:before': {
-                        content: string;
-                        height: string;
-                        width: string;
-                        top: number;
-                        left: number;
+                    '&.is-horizontal': {
+                        '&:before': {
+                            content: string;
+                            height: string;
+                            width: string;
+                            top: number;
+                            left: number;
+                            position: string;
+                            borderRadius: string;
+                            borderStyle: string;
+                            borderColor: string;
+                            borderWidth: string;
+                            zIndex: number;
+                        };
+                        borderWidth: string;
+                        width: number;
+                        height: number;
+                        minWidth: number;
+                        minHeight: number;
                         position: string;
-                        borderRadius: string;
-                        borderStyle: string;
+                        fontWeight: number;
+                        fontSize: string;
+                        backgroundColor: string;
                         borderColor: string;
-                        borderWidth: string;
+                        color: string;
                     };
-                    borderWidth: string;
-                    width: number;
-                    height: number;
-                    minWidth: number;
-                    minHeight: number;
-                    position: string;
-                    fontWeight: number;
-                    fontSize: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    color: string;
                 };
                 completed: {
                     borderColor: string;
@@ -5328,17 +5343,19 @@ declare const _default: {
                     fontSize: string;
                 };
                 inactive: {
-                    borderWidth: string;
-                    width: number;
-                    height: number;
-                    minWidth: number;
-                    minHeight: number;
-                    position: string;
-                    fontWeight: number;
-                    fontSize: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    color: string;
+                    '&.is-horizontal': {
+                        borderWidth: string;
+                        width: number;
+                        height: number;
+                        minWidth: number;
+                        minHeight: number;
+                        position: string;
+                        fontWeight: number;
+                        fontSize: string;
+                        backgroundColor: string;
+                        borderColor: string;
+                        color: string;
+                    };
                 };
             };
         };

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

@@ -3,7 +3,8 @@ declare const _default: {
         mr: string;
     };
     line: {
-        mr: string;
+        mx: string;
+        maxWidth: string;
         borderBottomWidth: string;
         borderBottomColor: string;
         '&.is-inactive': {
@@ -13,29 +14,32 @@ declare const _default: {
     };
     step: {
         active: {
-            '&:before': {
-                content: string;
-                height: string;
-                width: string;
-                top: number;
-                left: number;
+            '&.is-horizontal': {
+                '&:before': {
+                    content: string;
+                    height: string;
+                    width: string;
+                    top: number;
+                    left: number;
+                    position: string;
+                    borderRadius: string;
+                    borderStyle: string;
+                    borderColor: string;
+                    borderWidth: string;
+                    zIndex: number;
+                };
+                borderWidth: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
                 position: string;
-                borderRadius: string;
-                borderStyle: string;
+                fontWeight: number;
+                fontSize: string;
+                backgroundColor: string;
                 borderColor: string;
-                borderWidth: string;
+                color: string;
             };
-            borderWidth: string;
-            width: number;
-            height: number;
-            minWidth: number;
-            minHeight: number;
-            position: string;
-            fontWeight: number;
-            fontSize: string;
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
         };
         completed: {
             borderColor: string;
@@ -49,17 +53,19 @@ declare const _default: {
             fontSize: string;
         };
         inactive: {
-            borderWidth: string;
-            width: number;
-            height: number;
-            minWidth: number;
-            minHeight: number;
-            position: string;
-            fontWeight: number;
-            fontSize: string;
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
+            '&.is-horizontal': {
+                borderWidth: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                position: string;
+                fontWeight: number;
+                fontSize: string;
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
         };
     };
 };

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

@@ -14,10 +14,12 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _spacing = _interopRequireDefault(require("../spacing"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var line = {
-  mr: 'xs',
+  mx: "".concat(_spacing["default"].xs, " !important"),
+  maxWidth: '82px',
   borderBottomWidth: '2px',
   borderBottomColor: 'active',
   '&.is-inactive': {
@@ -39,32 +41,37 @@ var tab = {
   mr: 'xs'
 };
 var step = {
-  active: _objectSpread(_objectSpread({
-    backgroundColor: 'active',
-    borderColor: 'active',
-    color: 'backgroundBase'
-  }, stepBase), {}, {
-    '&:before': {
-      content: '""',
-      height: '24px',
-      width: '24px',
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      borderRadius: '100%',
-      borderStyle: 'solid',
-      borderColor: 'backgroundBase',
-      borderWidth: '2px'
-    }
-  }),
+  active: {
+    '&.is-horizontal': _objectSpread(_objectSpread({
+      backgroundColor: 'active',
+      borderColor: 'active',
+      color: 'white'
+    }, stepBase), {}, {
+      '&:before': {
+        content: '""',
+        height: '24px',
+        width: '24px',
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        borderRadius: '100%',
+        borderStyle: 'solid',
+        borderColor: 'backgroundBase',
+        borderWidth: '2px',
+        zIndex: 0
+      }
+    })
+  },
   completed: _objectSpread(_objectSpread({}, stepBase), {}, {
     borderColor: 'active'
   }),
-  inactive: _objectSpread({
-    backgroundColor: 'backgroundBase',
-    borderColor: 'blue-200',
-    color: 'active'
-  }, stepBase)
+  inactive: {
+    '&.is-horizontal': _objectSpread({
+      backgroundColor: 'backgroundBase',
+      borderColor: 'blue-200',
+      color: 'active'
+    }, stepBase)
+  }
 };
 var _default = exports["default"] = {
   tab: tab,

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

@@ -31,6 +31,17 @@ export declare const text: {
         color: string;
         marginTop: string;
     };
+    stepperTabContent: {
+        fontSize: string;
+        color: string;
+        lineHeight: string;
+    };
+    stepperTabContentHeader: {
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        fontFamily: string;
+    };
     H1: {
         fontSize: string;
         fontWeight: number;

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

@@ -101,6 +101,14 @@ var buttonSubtitle = {
   fontSize: '13px',
   fontWeight: 2
 };
+var stepperTabContent = {
+  fontSize: 'md',
+  color: 'font.base',
+  lineHeight: 'body'
+};
+var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
+  color: 'font.base'
+});
 var text = exports.text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -207,5 +215,7 @@ var text = exports.text = _objectSpread(_objectSpread({
     lineHeight: 'body',
     color: 'font.light',
     marginTop: '0px !important'
-  }
+  },
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });