@pingux/astro 1.28.0 → 1.28.2-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.28.0...@pingux/astro@1.28.1) (2022-09-22)
+
+
+### Bug Fixes
+
+* Change DataTable prop type definitions for width and height ([e295973](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e29597388e30eec017532a262bf79a37e147f87d))
+* Hotfix to address React Spectrum build error happening for some users ([9dccf35](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9dccf35dd2a91e2517c975812649592bef51ef43))
+
+
+
+
+
 # [1.28.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.27.0...@pingux/astro@1.28.0) (2022-09-22)
 
 

package/lib/cjs/components/DataTable/DataTable.js

@@ -46,8 +46,6 @@ var _virtualizer = require("@react-aria/virtualizer");
 
 var _table = require("@react-stately/table");
 
-var _utils2 = require("@react-spectrum/utils");
-
 var _layout = require("@react-stately/layout");
 
 var _table2 = require("@react-aria/table");
@@ -106,11 +104,9 @@ var ROW_HEIGHTS = {
 */
 
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var onAction = props.onAction;
-
-  var _useStyleProps = (0, _utils2.useStyleProps)(props),
-      styleProps = _useStyleProps.styleProps;
-
+  var width = props.width,
+      height = props.height,
+      onAction = props.onAction;
   var direction = 'ltr'; // useLocale override
 
   var scale = 'large'; // useProvider override
@@ -243,7 +239,9 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     style: {
       whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
     }
-  }, gridProps, styleProps, {
+  }, gridProps, {
+    width: width,
+    height: height,
     layout: layout,
     collection: state.collection,
     focusedKey: state.selectionManager.focusedKey,
@@ -256,6 +254,30 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     getColumnWidth: columnState.getColumnWidth
   })));
 });
+DataTable.propTypes = {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * density: 'compact' | 'regular' | 'spacious'
+   * @default 'regular'
+   */
+  density: _propTypes["default"].string,
+
+  /**
+   * Sets the overflow behavior for the cell contents.
+   * overflowMode: 'wrap' | 'truncate'
+   * @default 'truncate'
+   */
+  overflowMode: _propTypes["default"].string,
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: _propTypes["default"].func,
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+};
+DataTable.defaultProps = {
+  width: '100%',
+  height: 565
+};
 
 function TableHeader(_ref) {
   var children = _ref.children,
@@ -423,24 +445,6 @@ function CenteredWrapper(_ref6) {
   }, children));
 }
 
-DataTable.propTypes = {
-  /**
-   * Sets the amount of vertical padding within each cell.
-   * density: 'compact' | 'regular' | 'spacious'
-   * @default 'regular'
-   */
-  density: _propTypes["default"].string,
-
-  /**
-   * Sets the overflow behavior for the cell contents.
-   * overflowMode: 'wrap' | 'truncate'
-   * @default 'truncate'
-   */
-  overflowMode: _propTypes["default"].string,
-
-  /** Handler that is called when a user performs an action on a row. */
-  onAction: _propTypes["default"].func
-};
 TableCell.propTypes = {
   cell: _propTypes["default"].shape({
     column: _propTypes["default"].shape({

package/lib/cjs/index.js

@@ -1804,7 +1804,7 @@ _forEachInstanceProperty(_context69 = _Object$keys(_DataTable)).call(_context69,
   });
 });
 
-var _table = require("@react-spectrum/table");
+var _table = require("@react-stately/table");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/lib/cjs/recipes/Slider.stories.js

@@ -24,12 +24,12 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.Default = void 0;
 
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _slider = require("@react-aria/slider");
@@ -55,6 +55,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Recipes/Slider'
 };
+exports["default"] = _default;
+var sx = {
+  sliderContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    width: '100%',
+    touchAction: 'none'
+  },
+  sliderInnerBox: {
+    flex: '1 0 auto',
+    textAlign: 'end'
+  },
+  sliderOuterBox: {
+    alignSelf: 'stretch'
+  },
+  sliderBox: {
+    position: 'relative',
+    height: 30,
+    width: ' 100%'
+  },
+  slider: {
+    position: 'absolute',
+    height: 10,
+    borderRadius: '5px',
+    top: 13,
+    width: '100%'
+  },
+  rangeSlider: {
+    position: 'absolute',
+    backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
+    height: 10,
+    borderRadius: '5px',
+    top: 13,
+    width: '100%'
+  },
+  thumbContainer: {
+    position: 'absolute',
+    top: 5,
+    transform: 'translateX(-50%)'
+  },
+  thumb: {
+    width: 25,
+    height: 25,
+    borderRadius: '50%',
+    backgroundColor: 'white',
+    border: '1px solid #C1C5C8',
+    boxShadow: '0 2px 2px 0 #CACACA'
+  }
+};
+
+var setSliderColor = function setSliderColor(thumbPosition) {
+  var _context, _context2, _context3, _context4;
+
+  return thumbPosition < 25 ? (0, _concat["default"])(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? (0, _concat["default"])(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? (0, _concat["default"])(_context3 = "linear-gradient(to right,  rgb(231, 135, 38) 0%,  rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : (0, _concat["default"])(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)");
+};
 /*
  * The slider value can be formatted by using the `formatOptions` prop.
 `* formatOptions` is compatible with the option parameter of
@@ -63,7 +118,6 @@ var _default = {
  * https://react-spectrum.adobe.com/react-aria/useSlider.html
  */
 
-exports["default"] = _default;
 
 var Default = function Default() {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
@@ -83,8 +137,6 @@ var Default = function Default() {
 exports.Default = Default;
 
 var Slider = function Slider(props) {
-  var _context, _context2, _context3, _context4;
-
   var trackRef = _react["default"].useRef(null);
 
   var numberFormatter = (0, _i18n.useNumberFormatter)(props.formatOptions);
@@ -100,37 +152,18 @@ var Slider = function Slider(props) {
 
   var thumbPosition = state.getThumbPercent(0) * 100;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, groupProps, {
-    sx: {
-      position: 'relative',
-      alignItems: 'center',
-      width: '100%',
-      touchAction: 'none'
-    }
+    sx: sx.sliderContainer
   }), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      alignSelf: 'stretch'
-    }
+    sx: sx.sliderOuterBox
   }, props.label && (0, _react2.jsx)("label", labelProps, props.label), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, outputProps, {
-    sx: {
-      flex: '1 0 auto',
-      textAlign: 'end'
-    }
+    sx: sx.sliderInnerBox
   }), "(", state.getThumbValueLabel(0), ")")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, trackProps, {
     ref: trackRef,
-    sx: {
-      position: 'relative',
-      height: 30,
-      width: ' 100%'
-    }
+    sx: sx.sliderBox
   }), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      position: 'absolute',
-      backgroundImage: thumbPosition < 25 ? (0, _concat["default"])(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? (0, _concat["default"])(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? (0, _concat["default"])(_context3 = "linear-gradient(to right,  rgb(231, 135, 38) 0%,  rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : (0, _concat["default"])(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)"),
-      height: 10,
-      borderRadius: '5px',
-      top: 13,
-      width: '100%'
-    }
+    sx: _objectSpread(_objectSpread({}, sx.slider), {}, {
+      backgroundImage: setSliderColor(thumbPosition)
+    })
   }), (0, _react2.jsx)(Thumb, {
     index: 0,
     state: state,
@@ -155,37 +188,16 @@ var RangeSlider = function RangeSlider(props) {
       outputProps = _useSlider2.outputProps;
 
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, groupProps, {
-    sx: {
-      position: 'relative',
-      alignItems: 'center',
-      width: '100%',
-      touchAction: 'none'
-    }
+    sx: sx.sliderContainer
   }), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      alignSelf: 'stretch'
-    }
+    sx: sx.sliderOuterBox
   }, props.label && (0, _react2.jsx)("label", labelProps, props.label), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, outputProps, {
-    sx: {
-      flex: '1 0 auto',
-      textAlign: 'end'
-    }
+    sx: sx.sliderInnerBox
   }), "(", (0, _concat["default"])(_context5 = "".concat(state.getThumbValueLabel(0), ", ")).call(_context5, state.getThumbValueLabel(1)), ")")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, trackProps, {
     ref: trackRef,
-    sx: {
-      position: 'relative',
-      height: 30,
-      width: ' 100%'
-    }
+    sx: sx.sliderBox
   }), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      position: 'absolute',
-      backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
-      height: 10,
-      borderRadius: '5px',
-      top: 13,
-      width: '100%'
-    }
+    sx: sx.rangeSlider
   }), (0, _react2.jsx)(Thumb, {
     index: 0,
     state: state,
@@ -217,22 +229,13 @@ var Thumb = function Thumb(props) {
       isFocusVisible = _useFocusRing.isFocusVisible;
 
   return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      position: 'absolute',
-      top: 5,
-      transform: 'translateX(-50%)',
+    sx: _objectSpread(_objectSpread({}, sx.thumbContainer), {}, {
       left: "".concat(state.getThumbPercent(index) * 100, "%")
-    }
+    })
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, thumbProps, {
-    sx: {
-      width: 25,
-      height: 25,
-      borderRadius: '50%',
-      backgroundColor: 'white',
-      border: '1px solid #C1C5C8',
-      boxShadow: '0 2px 2px 0 #CACACA',
+    sx: _objectSpread(_objectSpread({}, sx.thumb), {}, {
       outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
-    }
+    })
   }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)("input", (0, _extends2["default"])({
     ref: inputRef
   }, (0, _utils.mergeProps)(inputProps, focusProps))))));

package/lib/cjs/styles/forms/index.js

@@ -56,7 +56,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
-// See https://rebassjs.org/forms/ for the intended structure.
+// See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
 var _default = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
   comboBox: _comboBox["default"]

package/lib/cjs/styles/forms/label.js

@@ -79,7 +79,7 @@ label.radio = _objectSpread(_objectSpread({}, _text.text.base), {}, {
   cursor: 'pointer',
   alignItems: 'center',
   mb: 'xs'
-}); // NOTE: Rebass label adds 'flex' after other styles, so we have to use !important to override it
+}); // NOTE: ThemeUI label adds 'flex' after other styles, so we have to use !important to override it
 
 label.checkbox = _objectSpread(_objectSpread({}, _text.text.base), {}, {
   display: 'inline-flex !important',

package/lib/cjs/styles/forms/select.js

@@ -58,7 +58,7 @@ select.currentValue = {
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  // rebass adds display: flex after other styles and ellipsis goes away
+  // ThemeUI adds display: flex after other styles and ellipsis goes away
   display: 'inline !important'
 };
 select.listBoxPopup = _objectSpread(_objectSpread({}, _input.input), {}, {

package/lib/components/DataTable/DataTable.js

@@ -23,7 +23,6 @@ import { FocusRing, useFocusRing } from '@react-aria/focus';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
 import { useTableColumnResizeState, useTableState } from '@react-stately/table';
-import { useStyleProps } from '@react-spectrum/utils';
 import { TableLayout } from '@react-stately/layout';
 import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
 import PropTypes from 'prop-types';
@@ -60,11 +59,9 @@ var ROW_HEIGHTS = {
 */
 
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
-  var onAction = props.onAction;
-
-  var _useStyleProps = useStyleProps(props),
-      styleProps = _useStyleProps.styleProps;
-
+  var width = props.width,
+      height = props.height,
+      onAction = props.onAction;
   var direction = 'ltr'; // useLocale override
 
   var scale = 'large'; // useProvider override
@@ -197,7 +194,9 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
     }
-  }, gridProps, styleProps, {
+  }, gridProps, {
+    width: width,
+    height: height,
     layout: layout,
     collection: state.collection,
     focusedKey: state.selectionManager.focusedKey,
@@ -210,6 +209,30 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     getColumnWidth: columnState.getColumnWidth
   })));
 });
+DataTable.propTypes = {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * density: 'compact' | 'regular' | 'spacious'
+   * @default 'regular'
+   */
+  density: PropTypes.string,
+
+  /**
+   * Sets the overflow behavior for the cell contents.
+   * overflowMode: 'wrap' | 'truncate'
+   * @default 'truncate'
+   */
+  overflowMode: PropTypes.string,
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: PropTypes.func,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+DataTable.defaultProps = {
+  width: '100%',
+  height: 565
+};
 
 function TableHeader(_ref) {
   var children = _ref.children,
@@ -378,24 +401,6 @@ function CenteredWrapper(_ref6) {
   }, children));
 }
 
-DataTable.propTypes = {
-  /**
-   * Sets the amount of vertical padding within each cell.
-   * density: 'compact' | 'regular' | 'spacious'
-   * @default 'regular'
-   */
-  density: PropTypes.string,
-
-  /**
-   * Sets the overflow behavior for the cell contents.
-   * overflowMode: 'wrap' | 'truncate'
-   * @default 'truncate'
-   */
-  overflowMode: PropTypes.string,
-
-  /** Handler that is called when a user performs an action on a row. */
-  onAction: PropTypes.func
-};
 TableCell.propTypes = {
   cell: PropTypes.shape({
     column: PropTypes.shape({

package/lib/index.js

@@ -154,4 +154,4 @@ export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from '@react-a
 export { useOverlayTriggerState } from '@react-stately/overlays';
 export { default as DataTable } from './components/DataTable';
 export * from './components/DataTable';
-export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from '@react-spectrum/table';
+export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from '@react-stately/table';

package/lib/recipes/Slider.stories.js

@@ -6,9 +6,9 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
 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; }
 
@@ -27,6 +27,60 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Slider'
 };
+var sx = {
+  sliderContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    width: '100%',
+    touchAction: 'none'
+  },
+  sliderInnerBox: {
+    flex: '1 0 auto',
+    textAlign: 'end'
+  },
+  sliderOuterBox: {
+    alignSelf: 'stretch'
+  },
+  sliderBox: {
+    position: 'relative',
+    height: 30,
+    width: ' 100%'
+  },
+  slider: {
+    position: 'absolute',
+    height: 10,
+    borderRadius: '5px',
+    top: 13,
+    width: '100%'
+  },
+  rangeSlider: {
+    position: 'absolute',
+    backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
+    height: 10,
+    borderRadius: '5px',
+    top: 13,
+    width: '100%'
+  },
+  thumbContainer: {
+    position: 'absolute',
+    top: 5,
+    transform: 'translateX(-50%)'
+  },
+  thumb: {
+    width: 25,
+    height: 25,
+    borderRadius: '50%',
+    backgroundColor: 'white',
+    border: '1px solid #C1C5C8',
+    boxShadow: '0 2px 2px 0 #CACACA'
+  }
+};
+
+var setSliderColor = function setSliderColor(thumbPosition) {
+  var _context, _context2, _context3, _context4;
+
+  return thumbPosition < 25 ? _concatInstanceProperty(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? _concatInstanceProperty(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? _concatInstanceProperty(_context3 = "linear-gradient(to right,  rgb(231, 135, 38) 0%,  rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : _concatInstanceProperty(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)");
+};
 /*
  * The slider value can be formatted by using the `formatOptions` prop.
 `* formatOptions` is compatible with the option parameter of
@@ -35,6 +89,7 @@ export default {
  * https://react-spectrum.adobe.com/react-aria/useSlider.html
  */
 
+
 export var Default = function Default() {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     mb: "xl"
@@ -51,8 +106,6 @@ export var Default = function Default() {
 };
 
 var Slider = function Slider(props) {
-  var _context, _context2, _context3, _context4;
-
   var trackRef = React.useRef(null);
   var numberFormatter = useNumberFormatter(props.formatOptions);
   var state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
@@ -67,37 +120,18 @@ var Slider = function Slider(props) {
 
   var thumbPosition = state.getThumbPercent(0) * 100;
   return ___EmotionJSX(Box, _extends({}, groupProps, {
-    sx: {
-      position: 'relative',
-      alignItems: 'center',
-      width: '100%',
-      touchAction: 'none'
-    }
+    sx: sx.sliderContainer
   }), ___EmotionJSX(Box, {
-    sx: {
-      alignSelf: 'stretch'
-    }
+    sx: sx.sliderOuterBox
   }, props.label && ___EmotionJSX("label", labelProps, props.label), ___EmotionJSX(Box, _extends({}, outputProps, {
-    sx: {
-      flex: '1 0 auto',
-      textAlign: 'end'
-    }
+    sx: sx.sliderInnerBox
   }), "(", state.getThumbValueLabel(0), ")")), ___EmotionJSX(Box, _extends({}, trackProps, {
     ref: trackRef,
-    sx: {
-      position: 'relative',
-      height: 30,
-      width: ' 100%'
-    }
+    sx: sx.sliderBox
   }), ___EmotionJSX(Box, {
-    sx: {
-      position: 'absolute',
-      backgroundImage: thumbPosition < 25 ? _concatInstanceProperty(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? _concatInstanceProperty(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? _concatInstanceProperty(_context3 = "linear-gradient(to right,  rgb(231, 135, 38) 0%,  rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : _concatInstanceProperty(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)"),
-      height: 10,
-      borderRadius: '5px',
-      top: 13,
-      width: '100%'
-    }
+    sx: _objectSpread(_objectSpread({}, sx.slider), {}, {
+      backgroundImage: setSliderColor(thumbPosition)
+    })
   }), ___EmotionJSX(Thumb, {
     index: 0,
     state: state,
@@ -121,37 +155,16 @@ var RangeSlider = function RangeSlider(props) {
       outputProps = _useSlider2.outputProps;
 
   return ___EmotionJSX(Box, _extends({}, groupProps, {
-    sx: {
-      position: 'relative',
-      alignItems: 'center',
-      width: '100%',
-      touchAction: 'none'
-    }
+    sx: sx.sliderContainer
   }), ___EmotionJSX(Box, {
-    sx: {
-      alignSelf: 'stretch'
-    }
+    sx: sx.sliderOuterBox
   }, props.label && ___EmotionJSX("label", labelProps, props.label), ___EmotionJSX(Box, _extends({}, outputProps, {
-    sx: {
-      flex: '1 0 auto',
-      textAlign: 'end'
-    }
+    sx: sx.sliderInnerBox
   }), "(", _concatInstanceProperty(_context5 = "".concat(state.getThumbValueLabel(0), ", ")).call(_context5, state.getThumbValueLabel(1)), ")")), ___EmotionJSX(Box, _extends({}, trackProps, {
     ref: trackRef,
-    sx: {
-      position: 'relative',
-      height: 30,
-      width: ' 100%'
-    }
+    sx: sx.sliderBox
   }), ___EmotionJSX(Box, {
-    sx: {
-      position: 'absolute',
-      backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
-      height: 10,
-      borderRadius: '5px',
-      top: 13,
-      width: '100%'
-    }
+    sx: sx.rangeSlider
   }), ___EmotionJSX(Thumb, {
     index: 0,
     state: state,
@@ -182,22 +195,13 @@ var Thumb = function Thumb(props) {
       isFocusVisible = _useFocusRing.isFocusVisible;
 
   return ___EmotionJSX(Box, {
-    sx: {
-      position: 'absolute',
-      top: 5,
-      transform: 'translateX(-50%)',
+    sx: _objectSpread(_objectSpread({}, sx.thumbContainer), {}, {
       left: "".concat(state.getThumbPercent(index) * 100, "%")
-    }
+    })
   }, ___EmotionJSX(Box, _extends({}, thumbProps, {
-    sx: {
-      width: 25,
-      height: 25,
-      borderRadius: '50%',
-      backgroundColor: 'white',
-      border: '1px solid #C1C5C8',
-      boxShadow: '0 2px 2px 0 #CACACA',
+    sx: _objectSpread(_objectSpread({}, sx.thumb), {}, {
       outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
-    }
+    })
   }), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX("input", _extends({
     ref: inputRef
   }, mergeProps(inputProps, focusProps))))));

package/lib/styles/forms/index.js

@@ -21,7 +21,7 @@ import search from './search';
 import * as select from './select';
 import * as switchable from './switch'; // 'switch' is a reserved keyword
 
-import * as textarea from './textarea'; // See https://rebassjs.org/forms/ for the intended structure.
+import * as textarea from './textarea'; // See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
 
 export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {