@zendeskgarden/react-pagination 9.0.0-next.9 → 9.1.0

package/dist/esm/elements/CursorPagination/CursorPagination.js

@@ -29,4 +29,4 @@ CursorPagination.Next = Next;
 CursorPagination.Previous = Previous;
 CursorPagination.Last = Last;
 
-export { CursorPagination, CursorPaginationComponent };
+export { CursorPagination };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-double-left-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-double-right-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDoubleRightStroke = function SvgChevronDoubleRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/CursorPagination/StyledCursor.js

@@ -5,20 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledPageBase } from '../OffsetPagination/StyledPageBase.js';
 
 const COMPONENT_ID = 'cursor_pagination.cursor';
 const StyledCursor = styled(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.1.0',
   as: 'button'
 }).withConfig({
   displayName: "StyledCursor",
   componentId: "sc-507ee-0"
 })(["display:flex;align-items:center;border:none;background:transparent;padding:", ";overflow:visible;&:not(", "-of-type){margin-right:", "px;}", ";"], props => `0px ${props.theme.space.base * 2}px`, props => props.theme.rtl ? ':first' : ':last', props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCursor.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCursor };

package/dist/esm/styled/CursorPagination/StyledCursorPagination.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'cursor_pagination';
 const StyledCursorPagination = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
 })(["display:flex;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCursorPagination.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCursorPagination };

package/dist/esm/styled/CursorPagination/StyledIcon.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon } from '@zendeskgarden/react-theming';
 
 const marginStyles = props => {
   const {
@@ -22,8 +22,5 @@ const StyledIcon = styled(StyledBaseIcon).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-2vzk6e-0"
 })(["", " transform:", ";"], marginStyles, props => props.theme.rtl && 'rotate(180deg)');
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledIcon };

package/dist/esm/styled/OffsetPagination/StyledGapListItem.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 import { StyledListItem } from './StyledListItem.js';
 
 const COMPONENT_ID = 'pagination.gap';
@@ -18,15 +18,21 @@ const sizeStyles = props => {
   const padding = `${props.theme.space.base * 1.5}px`;
   return css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, math(`${height} * 2`), height, lineHeight, fontSize);
 };
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["color:", ";"], getColor({
+    variable: 'foreground.subtle',
+    theme
+  }));
+};
 const StyledGapListItem = styled(StyledListItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledGapListItem",
   componentId: "sc-10wd0iz-0"
-})(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => getColorV8('neutralHue', 600, p.theme), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGapListItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:inline-block;text-align:center;", ";", " &:hover{color:inherit;}", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledGapListItem };

package/dist/esm/styled/OffsetPagination/StyledList.js

@@ -4,19 +4,25 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pagination.list';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["color:", ";"], getColor({
+    variable: 'foreground.subtle',
+    theme
+  }));
+};
 const StyledList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledList",
   componentId: "sc-1uz2jxo-0"
-})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledList.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;", " :focus{outline:none;}", ";"], p => p.theme.rtl && 'rtl', colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledList };

package/dist/esm/styled/OffsetPagination/StyledListItem.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pagination.list_item';
 const StyledListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledListItem",
   componentId: "sc-16j4sju-0"
 })(["box-sizing:border-box;margin-left:", ";user-select:none;&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledListItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledListItem };

package/dist/esm/styled/OffsetPagination/StyledNav.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pagination.pagination_view';
 const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-ppnpkw-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledNav.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledNav };

package/dist/esm/styled/OffsetPagination/StyledNavigation.js

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledPage } from './StyledPage.js';
 
 const COMPONENT_ID = 'pagination.navigation';
 const StyledNavigation = styled(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNavigation",
   componentId: "sc-1lpl8pp-0"
 })(["display:flex;align-items:center;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledNavigation.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledNavigation };

package/dist/esm/styled/OffsetPagination/StyledPage.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledPageBase } from './StyledPageBase.js';
 
 const COMPONENT_ID = 'pagination.page';
@@ -15,13 +15,10 @@ const sizeStyles = props => {
 };
 const StyledPage = styled(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledPage",
   componentId: "sc-sxjfwy-0"
 })(["", ";&[aria-current=\"true\"]{font-weight:", ";}", ";"], props => sizeStyles(props), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPage.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledPage };

package/dist/esm/styled/OffsetPagination/StyledPageBase.js

@@ -5,23 +5,72 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pagination.page';
-const colorStyles = props => {
-  const defaultColor = getColorV8('neutralHue', 600, props.theme);
-  const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
-  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
-  const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
-  const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const disabledColor = getColor({
+    variable: 'foreground.disabled',
+    theme
+  });
+  const defaultColor = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const hoverForegroundColor = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const hoverBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const activeForegroundColor = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  const activeBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
   const currentForegroundColor = activeForegroundColor;
   const currentBackgroundColor = hoverBackgroundColor;
-  const currentHoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.16);
-  const currentActiveBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
+  const currentHoverBackgroundColor = activeBackgroundColor;
+  const currentActiveBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
   return css(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active{background-color:", ";color:", ";}&[aria-current='page']{background-color:", ";color:", ";}&[aria-current='page']:hover{background-color:", ";}&[aria-current='page']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
-    theme: props.theme,
+    theme,
     inset: true
-  }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColorV8('grey', 300, props.theme));
+  }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, disabledColor);
 };
 const sizeStyles = props => {
   const fontSize = props.theme.fontSizes.md;
@@ -32,13 +81,10 @@ const sizeStyles = props => {
 };
 const StyledPageBase = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledPageBase",
   componentId: "sc-ttwj4u-0"
 })(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPageBase.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledPageBase };

package/dist/index.cjs.js

@@ -38,44 +38,96 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 const COMPONENT_ID$8 = 'pagination.list';
+const colorStyles$2 = _ref => {
+  let {
+    theme
+  } = _ref;
+  return styled.css(["color:", ";"], reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  }));
+};
 const StyledList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledList",
   componentId: "sc-1uz2jxo-0"
-})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledList.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;", " :focus{outline:none;}", ";"], p => p.theme.rtl && 'rtl', colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 
 const COMPONENT_ID$7 = 'pagination.list_item';
 const StyledListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledListItem",
   componentId: "sc-16j4sju-0"
 })(["box-sizing:border-box;margin-left:", ";user-select:none;&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledListItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$6 = 'pagination.page';
-const colorStyles = props => {
-  const defaultColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
-  const hoverForegroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
-  const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
-  const activeForegroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
-  const activeBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
+const colorStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const disabledColor = reactTheming.getColor({
+    variable: 'foreground.disabled',
+    theme
+  });
+  const defaultColor = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const hoverForegroundColor = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const hoverBackgroundColor = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const activeForegroundColor = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  const activeBackgroundColor = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
   const currentForegroundColor = activeForegroundColor;
   const currentBackgroundColor = hoverBackgroundColor;
-  const currentHoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.16);
-  const currentActiveBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.28);
+  const currentHoverBackgroundColor = activeBackgroundColor;
+  const currentActiveBackgroundColor = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
   return styled.css(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active{background-color:", ";color:", ";}&[aria-current='page']{background-color:", ";color:", ";}&[aria-current='page']:hover{background-color:", ";}&[aria-current='page']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
-    theme: props.theme,
+    theme,
     inset: true
-  }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColorV8('grey', 300, props.theme));
+  }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, disabledColor);
 };
 const sizeStyles$2 = props => {
   const fontSize = props.theme.fontSizes.md;
@@ -86,14 +138,11 @@ const sizeStyles$2 = props => {
 };
 const StyledPageBase = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledPageBase",
   componentId: "sc-ttwj4u-0"
-})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledPageBase.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 
 const COMPONENT_ID$5 = 'pagination.page';
 const sizeStyles$1 = props => {
@@ -102,39 +151,30 @@ const sizeStyles$1 = props => {
 };
 const StyledPage = styled__default.default(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledPage",
   componentId: "sc-sxjfwy-0"
 })(["", ";&[aria-current=\"true\"]{font-weight:", ";}", ";"], props => sizeStyles$1(props), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledPage.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$4 = 'cursor_pagination';
 const StyledCursorPagination = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
 })(["display:flex;justify-content:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledCursorPagination.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$3 = 'cursor_pagination.cursor';
 const StyledCursor = styled__default.default(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.1.0',
   as: 'button'
 }).withConfig({
   displayName: "StyledCursor",
   componentId: "sc-507ee-0"
 })(["display:flex;align-items:center;border:none;background:transparent;padding:", ";overflow:visible;&:not(", "-of-type){margin-right:", "px;}", ";"], props => `0px ${props.theme.space.base * 2}px`, props => props.theme.rtl ? ':first' : ':last', props => props.theme.space.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledCursor.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const marginStyles = props => {
   const {
@@ -151,9 +191,6 @@ const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).withConf
   displayName: "StyledIcon",
   componentId: "sc-2vzk6e-0"
 })(["", " transform:", ";"], marginStyles, props => props.theme.rtl && 'rotate(180deg)');
-StyledIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$2 = 'pagination.gap';
 const sizeStyles = props => {
@@ -164,43 +201,43 @@ const sizeStyles = props => {
   const padding = `${props.theme.space.base * 1.5}px`;
   return styled.css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, polished.math(`${height} * 2`), height, lineHeight, fontSize);
 };
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  return styled.css(["color:", ";"], reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  }));
+};
 const StyledGapListItem = styled__default.default(StyledListItem).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledGapListItem",
   componentId: "sc-10wd0iz-0"
-})(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => reactTheming.getColorV8('neutralHue', 600, p.theme), props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledGapListItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:inline-block;text-align:center;", ";", " &:hover{color:inherit;}", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
 const COMPONENT_ID$1 = 'pagination.navigation';
 const StyledNavigation = styled__default.default(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNavigation",
   componentId: "sc-1lpl8pp-0"
 })(["display:flex;align-items:center;justify-content:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledNavigation.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID = 'pagination.pagination_view';
 const StyledNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-ppnpkw-0"
 })(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledNav.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -216,7 +253,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 };
 
 var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -418,7 +455,7 @@ OffsetPagination.defaultProps = {
 OffsetPagination.displayName = 'OffsetPagination';
 
 var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -478,7 +515,7 @@ PreviousComponent.displayName = 'CursorPagination.Previous';
 const Previous = PreviousComponent;
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDoubleRightStroke = function SvgChevronDoubleRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/typings/elements/CursorPagination/CursorPagination.d.ts

@@ -9,13 +9,14 @@ import { First } from './components/First';
 import { Next } from './components/Next';
 import { Previous } from './components/Previous';
 import { Last } from './components/Last';
-export declare const CursorPaginationComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const CursorPaginationComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export declare const CursorPagination: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>> & {
+export declare const CursorPagination: typeof CursorPaginationComponent & {
     First: typeof First;
     Last: typeof Last;
     Next: typeof Next;
     Previous: typeof Previous;
 };
+export {};

package/dist/typings/styled/CursorPagination/StyledIcon.d.ts

@@ -4,9 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
 export interface IStyledIcon {
     $type: 'first' | 'next' | 'previous' | 'last';
 }
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {}, never>;

package/dist/typings/styled/OffsetPagination/StyledList.d.ts

@@ -4,11 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+import { DefaultTheme } from 'styled-components';
 /**
  * 1. List reset.
  * 2. Text truncation.
  */
-export declare const StyledList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
+export declare const StyledList: import("styled-components").StyledComponent<"ul", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-pagination",
-  "version": "9.0.0-next.9",
+  "version": "9.1.0",
   "description": "Components relating to pagination in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,18 +22,18 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.9",
-    "@zendeskgarden/svg-icons": "7.0.0"
+    "@zendeskgarden/react-theming": "^9.1.0",
+    "@zendeskgarden/svg-icons": "7.3.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
+  "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
 }