@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.1

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

@@ -113,14 +113,14 @@ var fieldControlWrapper = {
   },
   '&.is-read-only': {
     '> input': {
-      backgroundColor: 'gray-100',
+      backgroundColor: 'disabled',
       border: '1px solid',
-      borderColor: 'border.input !important'
+      borderColor: 'border.input'
     },
     '> textarea': {
-      backgroundColor: 'gray-100',
+      backgroundColor: 'disabled',
       border: '1px solid',
-      borderColor: 'border.input !important'
+      borderColor: 'border.input'
     },
     '&:after': {
       display: 'none'
@@ -144,7 +144,6 @@ input.promptInputWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   }
 });
 input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
-  borderColor: 'border.input',
   borderStyle: 'solid',
   borderWidth: 1,
   flexDirection: 'row !important',
@@ -170,6 +169,18 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-error': {
     borderColor: 'critical.dark'
+  },
+  '&.is-read-only': {
+    alignItems: 'center',
+    boxShadow: 'inset 0 0 0 100px #F6F8FA',
+    border: '1px solid',
+    borderColor: 'gray-900',
+    '> input': {
+      backgroundColor: 'background.secondary'
+    },
+    '&:after': {
+      display: 'none'
+    }
   }
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {

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

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.label = void 0;
 var label = {
   color: 'text.primary',
-  fontSize: '.9375rem',
+  fontSize: 'md',
   '&.is-float-label': {
     fontSize: 'md',
     fontWeight: 1,
@@ -19,7 +19,7 @@ var label = {
   },
   opacity: 1,
   checkbox: {
-    fontSize: '.9375rem',
+    fontSize: 'md',
     display: 'inline-flex !important',
     div: {
       flexShrink: 0
@@ -29,7 +29,9 @@ var label = {
     cursor: 'pointer'
   },
   radioGroup: {
-    fontSize: '.9375rem'
+    color: 'text.primary',
+    fontSize: 'md',
+    mb: 'md'
   }
 };
 exports.label = label;

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

@@ -171,13 +171,13 @@ declare const _default: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -186,6 +186,7 @@ declare const _default: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -218,13 +219,13 @@ declare const _default: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -233,6 +234,7 @@ declare const _default: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;

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

@@ -115,7 +115,7 @@ var listView = {
   container: {
     borderRadius: borderRadius,
     border: '1px solid',
-    borderColor: '#e7eef4'
+    borderColor: 'border.hairline'
   }
 };
 exports.listView = listView;

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

@@ -0,0 +1,16 @@
+declare const _default: {
+    container: {
+        bg: string;
+        border: string;
+        minHeight: number;
+        maxHeight: number;
+    };
+    controls: {
+        alignSelf: string;
+        pt: string;
+    };
+    wrapper: {
+        mr: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,26 @@
+"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 container = {
+  bg: 'background.base',
+  border: 'none',
+  minHeight: 72,
+  maxHeight: 72
+};
+var controls = {
+  alignSelf: 'start',
+  pt: 'xs'
+};
+var wrapper = {
+  mr: 'md'
+};
+var _default = {
+  container: container,
+  controls: controls,
+  wrapper: wrapper
+};
+exports["default"] = _default;

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

@@ -0,0 +1,66 @@
+declare const _default: {
+    tab: {
+        mr: string;
+    };
+    line: {
+        mr: string;
+        borderBottomWidth: string;
+        borderBottomColor: string;
+        '&.is-inactive': {
+            borderBottomStyle: string;
+            borderBottomColor: string;
+        };
+    };
+    step: {
+        active: {
+            '&:before': {
+                content: string;
+                height: string;
+                width: string;
+                top: number;
+                left: number;
+                position: string;
+                borderRadius: string;
+                borderStyle: string;
+                borderColor: string;
+                borderWidth: 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;
+            borderWidth: string;
+            width: number;
+            height: number;
+            minWidth: number;
+            minHeight: number;
+            position: string;
+            fontWeight: number;
+            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;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+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"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var line = {
+  mr: 'xs',
+  borderBottomWidth: '2px',
+  borderBottomColor: 'active',
+  '&.is-inactive': {
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'blue-200'
+  }
+};
+var stepBase = {
+  borderWidth: '2px',
+  width: 32,
+  height: 32,
+  minWidth: 32,
+  minHeight: 32,
+  position: 'relative',
+  fontWeight: 2,
+  fontSize: 'md'
+};
+var tab = {
+  mr: 'xs'
+};
+var step = {
+  active: _objectSpread(_objectSpread({
+    backgroundColor: 'active',
+    borderColor: 'active',
+    color: 'background.base'
+  }, stepBase), {}, {
+    '&:before': {
+      content: '""',
+      height: '24px',
+      width: '24px',
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      borderRadius: '100%',
+      borderStyle: 'solid',
+      borderColor: 'background.base',
+      borderWidth: '2px'
+    }
+  }),
+  completed: _objectSpread(_objectSpread({}, stepBase), {}, {
+    borderColor: 'active'
+  }),
+  inactive: _objectSpread({
+    backgroundColor: 'background.base',
+    borderColor: 'blue-200',
+    color: 'active'
+  }, stepBase)
+};
+var _default = {
+  tab: tab,
+  line: line,
+  step: step
+};
+exports["default"] = _default;

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

@@ -0,0 +1,36 @@
+export declare const switchable: {
+    container: {
+        minWidth: string;
+        color: string;
+        bg: string;
+        border: string;
+        borderColor: string;
+        borderRadius: number;
+        '&.is-selected': {
+            bg: string;
+            borderColor: string;
+        };
+    };
+    thumbContainer: {
+        bg: string;
+        border: string;
+        maxWidth: number;
+        height: number;
+        py: string;
+        px: string;
+        'label.is-selected &': {
+            bg: string;
+        };
+    };
+    thumb: {
+        bg: string;
+        minHeight: number;
+        maxHeight: number;
+        width: number;
+        border: string;
+        '&.is-selected': {
+            bg: string;
+            transform: string;
+        };
+    };
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.switchable = void 0;
+var switchable = {
+  container: {
+    minWidth: '32px',
+    color: 'neutral.80',
+    bg: 'backgorund.base',
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    borderRadius: 9999,
+    '&.is-selected': {
+      bg: 'active',
+      borderColor: 'active'
+    }
+  },
+  thumbContainer: {
+    bg: 'transparent',
+    border: 'none',
+    maxWidth: 24,
+    height: 16,
+    py: '3px',
+    px: '3px',
+    'label.is-selected &': {
+      bg: 'transparent'
+    }
+  },
+  thumb: {
+    bg: 'gray-500',
+    minHeight: 10,
+    maxHeight: 10,
+    width: 10,
+    border: 'none',
+    '&.is-selected': {
+      bg: 'white',
+      transform: 'translateX(15px)'
+    }
+  }
+};
+exports.switchable = switchable;

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

@@ -5,6 +5,15 @@ export declare const text: {
         fontSize: string;
         fontWeight: number;
     };
+    panelHeaderText: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
     messagesText: {
         '&.is-success, &.is-warning, &.is-error, &.is-default': {
             color: string;
@@ -15,6 +24,44 @@ export declare const text: {
             };
         };
     };
+    H1: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    H2: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    H3: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    H4: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    H5: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    H6: {
+        textTransform: string;
+        color: string;
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: string;
+        letterSpacing: string;
+    };
     h1: {
         fontSize: string;
         fontWeight: number;
@@ -51,6 +98,21 @@ export declare const text: {
         fontFamily: string;
         fontWeight: number;
         fontSize: string;
+        letterSpacing: string;
+    };
+    base: {
+        lineHeight: string;
+    };
+    buttonSubtitle: {
+        fontSize: string;
+        fontWeight: number;
+    };
+    buttonTitle: {
+        fontSize: string;
+    };
+    pageHeaderBody: {
+        lineHeight: string;
+        color: string;
     };
     sideNavHeader: {
         py: string;

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

@@ -17,45 +17,100 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var hTags = {
+  H1: {
+    fontSize: 'xxx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H2: {
+    fontSize: 'xx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H3: {
+    fontSize: 'xl',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H4: {
+    fontSize: 'lg',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H5: {
+    fontSize: 'md',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H6: {
+    textTransform: 'uppercase',
+    color: 'text.primary',
+    fontFamily: 'standard',
+    fontWeight: 1,
+    fontSize: 'xs',
+    letterSpacing: '1px'
+  },
   h1: {
     fontSize: 'xxx',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h2: {
     fontSize: 'xx',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h3: {
     fontSize: 'xl',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h4: {
     fontSize: 'lg',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h5: {
     fontSize: 'md',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h6: {
     textTransform: 'uppercase',
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs'
+    fontSize: 'xs',
+    letterSpacing: '1px'
   }
 };
+var buttonTitle = {
+  fontSize: '13px'
+};
+var buttonSubtitle = {
+  fontSize: '13px',
+  fontWeight: 2
+};
 var text = _objectSpread(_objectSpread({
+  base: {
+    lineHeight: 'body'
+  },
+  buttonSubtitle: buttonSubtitle,
+  buttonTitle: buttonTitle,
+  pageHeaderBody: {
+    lineHeight: '150%',
+    color: 'text.primary'
+  },
   sideNavHeader: {
     py: 'sm',
     lineHeight: 'body',
@@ -125,6 +180,11 @@ var text = _objectSpread(_objectSpread({
     fontSize: 'lg',
     fontWeight: 2
   },
+  panelHeaderText: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
       color: 'gray-700',