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

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

@@ -1674,7 +1674,8 @@ declare const _default: {
             mr: string;
         };
         line: {
-            mr: string;
+            mx: string;
+            maxWidth: string;
             borderBottomWidth: string;
             borderBottomColor: string;
             '&.is-inactive': {
@@ -1684,29 +1685,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;
@@ -1720,17 +1724,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/components/Stepper/Stepper.stories.js

@@ -115,30 +115,27 @@ export var Default = function Default(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 export var DisabledToolTips = function DisabledToolTips(args) {
@@ -150,30 +147,27 @@ export var DisabledToolTips = function DisabledToolTips(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 Default.parameters = {
@@ -195,30 +189,27 @@ export var WithCustomTooltip = function WithCustomTooltip(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 export var ControlledStepper = function ControlledStepper() {
@@ -237,10 +228,9 @@ export var ControlledStepper = function ControlledStepper() {
     }, ___EmotionJSX(Box, {
       sx: sx.contentContainer
     }, ___EmotionJSX(Text, {
-      fontSize: "lg",
-      fontWeight: "3"
+      variant: "stepperTabContentHeader"
     }, item.title), ___EmotionJSX(Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };
@@ -289,10 +279,9 @@ export var Panel = function Panel() {
       }, ___EmotionJSX(Box, {
         sx: sx.contentContainer
       }, ___EmotionJSX(Text, {
-        fontSize: "lg",
-        fontWeight: "3"
+        variant: "stepperTabContentHeader"
       }, item.title), ___EmotionJSX(Text, {
-        fontSize: "md"
+        variant: "stepperTabContent"
       }, item.children)));
     })))
   );
@@ -316,7 +305,7 @@ export var VerticalStepper = function VerticalStepper() {
     }, ___EmotionJSX(Box, {
       sx: sx.verticalContentContainer
     }, ___EmotionJSX(Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };

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

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

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

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

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

@@ -0,0 +1,15 @@
+var step = {
+  active: {
+    '&.is-horizontal': {
+      color: 'black'
+    }
+  },
+  inactive: {
+    '&.is-horizontal': {
+      backgroundColor: 'black'
+    }
+  }
+};
+export default {
+  step: step
+};

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

@@ -9,6 +9,7 @@ import { message } from './message';
 import { navBar } from './navbar';
 import rangeCalendar from './rangeCalendar';
 import skeleton from './skeleton';
+import stepper from './stepper';
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
@@ -182,6 +183,7 @@ export default {
   tab: tab,
   iconBadge: iconBadge,
   skeleton: skeleton,
+  stepper: stepper,
   footer: footer,
   tooltip: tooltip,
   popoverMenu: {

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

@@ -9,8 +9,10 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
+import spacing from '../spacing';
 var line = {
-  mr: 'xs',
+  mx: "".concat(spacing.xs, " !important"),
+  maxWidth: '82px',
   borderBottomWidth: '2px',
   borderBottomColor: 'active',
   '&.is-inactive': {
@@ -32,32 +34,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)
+  }
 };
 export default {
   tab: tab,

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

@@ -94,6 +94,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'
+});
 export var text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -200,5 +208,7 @@ export var text = _objectSpread(_objectSpread({
     lineHeight: 'body',
     color: 'font.light',
     marginTop: '0px !important'
-  }
+  },
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });