@pingux/astro 2.142.1-alpha.1 → 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/tableBase.d.ts

@@ -1,4 +1,34 @@
 export declare const tableBase: {
+    container: {
+        '& > thead > tr': {
+            '& > th:first-of-type': {
+                borderTopLeftRadius: string;
+            };
+            '& > th:last-of-type': {
+                borderTopRightRadius: string;
+            };
+        };
+        '& > tbody > tr:last-child': {
+            borderBottom: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '& > td:first-of-type': {
+                borderBottomLeftRadius: string;
+            };
+            '& > td:last-of-type': {
+                borderBottomRightRadius: string;
+            };
+        };
+        '&.has-caption > thead > tr:first-of-type > th': {
+            borderRadius: string;
+        };
+        '&.has-pagination > tbody > tr:last-child': {
+            borderRadius: number;
+            '& > td': {
+                borderRadius: number;
+            };
+        };
+    };
     caption: {
         backgroundColor: string;
         px: string;
@@ -29,17 +59,8 @@ export declare const tableBase: {
     thead: {
         borderBottomColor: string;
         backgroundColor: string;
-        '&:not(.has-caption)': {
-            borderTopLeftRadius: string;
-            borderTopRightRadius: string;
-            '& > tr:first-child': {
-                '& > th:first-of-type': {
-                    borderTopLeftRadius: string;
-                };
-                '& > th:last-of-type': {
-                    borderTopRightRadius: string;
-                };
-            };
+        '&.is-sticky': {
+            boxShadow: string;
         };
     };
     head: {
@@ -61,17 +82,6 @@ export declare const tableBase: {
         backgroundColor: string;
         borderBottomLeftRadius: string;
         borderBottomRightRadius: string;
-        '& > tr:last-child': {
-            borderBottom: string;
-            borderBottomLeftRadius: string;
-            borderBottomRightRadius: string;
-            '& > td:first-of-type': {
-                borderBottomLeftRadius: string;
-            };
-            '& > td:last-of-type': {
-                borderBottomRightRadius: string;
-            };
-        };
     };
     data: {
         py: string;

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.tableBase = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _colors = _interopRequireDefault(require("../colors/colors"));
 var _button = require("./button");
 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; }
@@ -21,6 +22,36 @@ var borderRadius = '16px';
 var defaultFocus = _objectSpread(_objectSpread({}, _button.defaultFocus), {}, {
   outlineOffset: '-2px'
 });
+var container = {
+  '& > thead > tr': {
+    '& > th:first-of-type': {
+      borderTopLeftRadius: borderRadius
+    },
+    '& > th:last-of-type': {
+      borderTopRightRadius: borderRadius
+    }
+  },
+  '& > tbody > tr:last-child': {
+    borderBottom: 'unset',
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    '& > td:first-of-type': {
+      borderBottomLeftRadius: borderRadius
+    },
+    '& > td:last-of-type': {
+      borderBottomRightRadius: borderRadius
+    }
+  },
+  '&.has-caption > thead > tr:first-of-type > th': {
+    borderRadius: '0'
+  },
+  '&.has-pagination > tbody > tr:last-child': {
+    borderRadius: 0,
+    '& > td': {
+      borderRadius: 0
+    }
+  }
+};
 var caption = {
   backgroundColor: 'background.base',
   px: 'lg',
@@ -47,17 +78,8 @@ var row = {
 var thead = {
   borderBottomColor: 'border.base',
   backgroundColor: 'background.base',
-  '&:not(.has-caption)': {
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    '& > tr:first-child': {
-      '& > th:first-of-type': {
-        borderTopLeftRadius: borderRadius
-      },
-      '& > th:last-of-type': {
-        borderTopRightRadius: borderRadius
-      }
-    }
+  '&.is-sticky': {
+    boxShadow: "0 1px 0 ".concat(_colors["default"].border.base)
   }
 };
 var head = {
@@ -74,24 +96,14 @@ var tbody = {
   borderBottom: 'unset',
   backgroundColor: 'background.base',
   borderBottomLeftRadius: borderRadius,
-  borderBottomRightRadius: borderRadius,
-  '& > tr:last-child': {
-    borderBottom: 'unset',
-    borderBottomLeftRadius: borderRadius,
-    borderBottomRightRadius: borderRadius,
-    '& > td:first-of-type': {
-      borderBottomLeftRadius: borderRadius
-    },
-    '& > td:last-of-type': {
-      borderBottomRightRadius: borderRadius
-    }
-  }
+  borderBottomRightRadius: borderRadius
 };
 var data = _objectSpread(_objectSpread({}, head), {}, {
   py: 'md',
   fontWeight: '1'
 });
 var tableBase = {
+  container: container,
   caption: caption,
   row: row,
   thead: thead,

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;