@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/cjs/styles/variants/accordion.js

@@ -0,0 +1,92 @@
+"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 accordionTitle = {
+  display: 'inline-block !important',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  fontSize: 'lg',
+  fontWeight: 700,
+  color: 'text.primary',
+  '&.is-pressed': {
+    color: 'white'
+  }
+};
+var accordion = {
+  display: 'flex',
+  mt: '5px',
+  mb: '20px',
+  alignItems: 'flex-start'
+};
+var accordionBody = {
+  display: 'none',
+  pt: 'md',
+  width: '100%',
+  '.is-open &': {
+    display: 'flex'
+  }
+};
+var accordionGridHeader = {
+  cursor: 'pointer',
+  lineHeight: '30px',
+  pl: 'sm',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  bg: 'white',
+  color: 'neutral.10',
+  flexGrow: 1,
+  fontWeight: 700,
+  border: '1px solid transparent',
+  '&.is-focused': {
+    border: '1px solid',
+    borderColor: 'focus',
+    zIndex: '10'
+  },
+  minHeight: '64px',
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    '& div > div > div > span': {
+      color: 'accent.20'
+    }
+  }
+};
+var accordionGridBody = {
+  display: 'none !important',
+  pl: 'sm',
+  width: '100%',
+  '&.is-selected': {
+    display: 'flex !important'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+var accordionGridItem = {
+  ':focus': {
+    outline: 'none'
+  }
+};
+var _default = {
+  accordionGridHeader: accordionGridHeader,
+  accordionGridBody: accordionGridBody,
+  accordionTitle: accordionTitle,
+  accordion: accordion,
+  accordionBody: accordionBody,
+  accordionGridItem: accordionGridItem
+};
+exports["default"] = _default;

package/lib/cjs/{components/FieldHelperText/FieldHelperText.styles.js → styles/variants/bidirectionalIconButton.js}

@@ -26,33 +26,29 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Text = require("../Text/Text.styles");
+var _buttons = require("./buttons");
 
 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 title = _objectSpread(_objectSpread(_objectSpread({}, _Text.base), _Text.wordWrap), {}, {
-  fontSize: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
+var bidirectionalIconButton = {
+  border: '1px solid',
+  outline: 'none',
+  height: '24px',
+  width: '24px',
+  color: 'active',
+  borderRadius: '12px',
+  borderColor: 'active',
+  '&.is-hovered': {
+    color: 'accent.40',
+    borderColor: 'accent.40'
   },
-  '&.is-error': {
-    color: 'critical.dark'
+  '&.is-pressed': {
+    color: 'accent.20',
+    borderColor: 'accent.20'
   },
-  '&.is-success': {
-    color: 'success.dark'
-  },
-  '&.is-warning': {
-    color: 'warning.dark'
-  },
-  '.is-left-label > &': {
-    gridRowEnd: 3,
-    gridColumnEnd: 3
-  }
-});
-
-var _default = {
-  title: title
+  '&.is-focused': _objectSpread({}, _buttons.defaultFocus)
 };
+var _default = bidirectionalIconButton;
 exports["default"] = _default;

package/lib/cjs/styles/variants/boxes.js

@@ -0,0 +1,439 @@
+"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"] = exports.chip = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _text = require("./text");
+
+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 base = {
+  display: 'flex'
+};
+var card = {
+  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
+  borderRadius: '3px',
+  p: 'lg',
+  flex: '1 1 0',
+  fontWeight: 0,
+  fontSize: 'md',
+  color: 'text.primary'
+}; // Used to give a border to radio elements
+
+var radioContainer = {
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: 'active',
+  borderRadius: 3,
+  padding: 'md',
+  mb: 'md'
+}; // Used to add spacing for content shown when a radio is checked
+
+var radioCheckedContent = {
+  pb: 'sm',
+  pl: 'lg',
+  color: 'text.secondary',
+  fontSize: 'md'
+};
+
+var listItem = _objectSpread(_objectSpread({}, base), {}, {
+  flex: '1 1 0px',
+  cursor: 'pointer',
+  height: '64px',
+  pl: 'md',
+  pr: 'sm',
+  pt: 16,
+  pb: 16,
+  justifyContent: 'center',
+  bg: 'accent.99',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white'
+  }
+}); // the transparent border is included so that the content does not shift on hover.
+
+
+var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
+  padding: '0px 15px 0px 25px',
+  flex: '1 1 0px',
+  minHeight: '80px',
+  justifyContent: 'center',
+  bg: 'accent.99',
+  outline: 'none',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white',
+    cursor: 'pointer'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'neutral.80'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
+  }
+});
+
+var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
+  minHeight: '75px',
+  height: '76px',
+  '&.has-inset-separator': {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      width: 'calc(100% - 43px)',
+      right: 0,
+      bottom: 0,
+      borderBottom: '1px solid',
+      borderBottomColor: 'line.hairline'
+    },
+    '&.is-focused': {
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 'calc(100% - 43px)',
+        right: 0,
+        bottom: 0,
+        borderBottom: '1px solid',
+        borderBottomColor: 'focus'
+      }
+    }
+  }
+});
+
+var listBoxSectionTitle = {
+  fontSize: 'sm',
+  fontWeight: '3',
+  color: 'text.secondary',
+  height: '36px',
+  ml: 'sm',
+  justifyContent: 'center'
+};
+var chip = {
+  cursor: 'default',
+  p: '3px 5px 4px 5px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '50px',
+  alignSelf: 'flex-start',
+  display: 'inline-flex !important',
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
+};
+exports.chip = chip;
+
+var countDefault = _objectSpread(_objectSpread({}, chip), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  minHeight: '17px',
+  p: '2px 5px 2px 5px',
+  '& span': {
+    fontSize: '11px',
+    textTransform: 'uppercase'
+  }
+});
+
+var countChip = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+
+var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20',
+    fontSize: '11px',
+    textTransform: 'uppercase'
+  }
+});
+
+var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  cursor: 'default',
+  m: 5,
+  mr: 10,
+  ml: 0,
+  '& span': {
+    mr: '2px'
+  }
+});
+
+var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  py: 3,
+  pr: 0,
+  my: 3
+});
+
+var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  p: 2.54,
+  border: '1px solid',
+  borderColor: 'neutral.80'
+});
+
+var itemChipWithSlot = _objectSpread(_objectSpread({}, readOnlyChip), {}, {
+  p: 3,
+  my: 0,
+  backgroundColor: 'white',
+  '& span': {
+    color: 'text.primary',
+    mr: '2px',
+    lineHeight: '16px'
+  },
+  maxHeight: '22px'
+});
+
+var inputInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  right: 'sm',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var textFieldInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var copy = {
+  alignItems: 'center',
+  wordBreak: 'break-all',
+  overflowWrap: 'break-word',
+  '& .is-focused': {
+    outline: '1px solid',
+    outlineColor: 'active',
+    outlineOffset: '4px',
+    borderRadius: '4px'
+  },
+  '& span': {
+    cursor: 'text'
+  }
+};
+var topShadowScrollbox = {
+  '&.has-shadows.is-top-shadow-showing': {
+    position: 'relative',
+    zIndex: '10000',
+    boxShadow: '0px 4px 2px 1px rgb(37, 55, 70, 0.15)',
+    height: '4px',
+    marginBottom: '-4px',
+    backgroundColor: '#FFFFFF'
+  }
+};
+var bottomShadowScrollbox = {
+  '&.has-shadows.is-bottom-shadow-showing': {
+    position: 'relative',
+    zIndex: '10000',
+    boxShadow: '0px -4px 2px 1px rgb(37, 55, 70, 0.15)',
+    height: '4px',
+    marginTop: '-2px',
+    backgroundColor: '#FFFFFF'
+  }
+};
+var scrollbox = {
+  '&::-webkit-scrollbar': {
+    display: 'none',
+    width: '0px !important'
+  },
+  '&::-webkit-scrollbar-track': {
+    width: '0px',
+    display: 'none'
+  },
+  '&::-webkit-scrollbar-thumb': {
+    borderRadius: '0px',
+    display: 'none'
+  },
+  position: 'relative',
+  '& > *': {
+    overflow: 'hidden auto'
+  }
+};
+var expandableRow = {
+  titleWrapper: {
+    maxWidth: '50%'
+  },
+  lineChart: {
+    alignCellRightWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-end'
+    },
+    chart: {
+      width: '50px',
+      height: '18px'
+    },
+    chartWrapper: {
+      '&:hover': {
+        backgroundColor: '#4462ED1A'
+      }
+    },
+    divider: {
+      backgroundColor: 'neutral.80',
+      height: '35px',
+      width: '1px'
+    }
+  }
+};
+var datePicker = {
+  '.react-calendar': {
+    width: 280,
+    '& .react-calendar__month-view__days__day': {
+      width: 40,
+      height: 40,
+      color: 'neutral.10',
+      fontSize: 'sm',
+      fontWeight: 1
+    },
+    '& .react-calendar__navigation__label__labelText': _text.text.itemTitle,
+    '& .react-calendar__navigation__arrow, & .react-calendar__month-view__days__day--neighboringMonth': {
+      color: 'neutral.40'
+    },
+    '& .react-calendar__month-view__weekdays': {
+      borderBottom: '1px solid',
+      borderColor: 'neutral.80'
+    },
+    '& .react-calendar__month-view__weekdays__weekday abbr': {
+      textDecoration: 'none',
+      textTransform: 'capitalize'
+    },
+    '& .react-calendar__month-view__days__day--weekend': {
+      color: 'decorative.4'
+    },
+    '& .react-calendar__tile--active, & .react-calendar__tile--hasActive': {
+      backgroundColor: 'active',
+      color: 'white'
+    },
+    '& .react-calendar__year-view__months__month': {
+      padding: '19px 0'
+    },
+    '& .react-calendar__decade-view__years__year, & .react-calendar__month-view__days__day, & .react-calendar__year-view__months__month': {
+      '&:hover': {
+        backgroundColor: 'rgba(70, 96, 162, .1);',
+        color: 'neutral.10'
+      }
+    },
+    '& .react-calendar__navigation': {
+      marginBottom: 0
+    }
+  }
+};
+
+var environmentChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  height: '17px',
+  minWidth: 'fit-content',
+  ml: 8,
+  '& span': {
+    fontSize: 'xs',
+    lineHeight: 1
+  }
+});
+
+var fileInputFieldWrapper = {
+  display: 'flex',
+  border: '1px dashed',
+  borderColor: 'active',
+  padding: '10px 0',
+  '&.is-drag-active': {
+    backgroundColor: 'accent.95'
+  },
+  '&.is-error': {
+    borderColor: 'critical.dark'
+  },
+  '&.is-success': {
+    borderColor: 'success.dark'
+  },
+  '&.is-warning': {
+    borderColor: 'warning.dark'
+  },
+  '&.is-loading': {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
+var floatLabelWrapper = {
+  width: 'calc(100% - 4px)',
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
+var bracketBase = {
+  width: '15px',
+  pl: '5px',
+  ml: '5px',
+  position: 'relative'
+};
+var _default = {
+  base: base,
+  bracketBase: bracketBase,
+  card: card,
+  chip: chip,
+  countChip: countChip,
+  countNeutral: countNeutral,
+  selectedItemChip: selectedItemChip,
+  readOnlyChip: readOnlyChip,
+  copy: copy,
+  datePicker: datePicker,
+  environmentChip: environmentChip,
+  expandableRow: expandableRow,
+  inputInContainerSlot: inputInContainerSlot,
+  itemChipWithSlot: itemChipWithSlot,
+  textFieldInContainerSlot: textFieldInContainerSlot,
+  fileInputFieldWrapper: fileInputFieldWrapper,
+  listItem: listItem,
+  listBoxSectionTitle: listBoxSectionTitle,
+  listViewItem: listViewItem,
+  linkedListViewItem: linkedListViewItem,
+  radioCheckedContent: radioCheckedContent,
+  radioContainer: radioContainer,
+  scrollbox: scrollbox,
+  topShadowScrollbox: topShadowScrollbox,
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  floatLabelWrapper: floatLabelWrapper
+};
+exports["default"] = _default;