@zendeskgarden/react-datepickers 9.0.0-next.4 → 9.0.0-next.6

package/README.md

@@ -22,7 +22,7 @@ for localization support.
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Field, Label, Input } from '@zendeskgarden/react-forms';
+import { Field, Input } from '@zendeskgarden/react-forms';
 import { DatePicker } from '@zendeskgarden/react-datepickers';
 
 /**
@@ -30,7 +30,7 @@ import { DatePicker } from '@zendeskgarden/react-datepickers';
  */
 <ThemeProvider>
   <Field>
-    <Label>Example datepicker</Label>
+    <Field.Label>Example datepicker</Field.Label>
     <DatePicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
       <Input />
     </DatePicker>

package/dist/index.cjs.js

@@ -63,7 +63,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -106,7 +106,7 @@ const StyledDatePicker = styled__default.default.div.attrs({
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => reactTheming.getColorV8('background', 600 , props.theme), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledDatePicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -148,7 +148,7 @@ const retrieveColor$1 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, reactTheming.getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, reactTheming.getColor('neutralHue', 600, theme));
+  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColorV8('primaryHue', 600, theme, 0.08), reactTheming.getColorV8('foreground', 600 , theme), reactTheming.getColorV8('primaryHue', 600, theme, 0.2), reactTheming.getColorV8('foreground', 600 , theme), reactTheming.getColorV8('neutralHue', 600, theme));
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled__default.default.div.attrs({
@@ -246,7 +246,7 @@ const retrieveColor = _ref2 => {
     isHighlighted,
     theme
   } = _ref2;
-  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColor('primaryHue', 600, theme, 0.08));
+  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColorV8('primaryHue', 600, theme, 0.08));
 };
 const StyledHighlight = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1
@@ -267,26 +267,26 @@ const retrieveStyledDayColors = _ref => {
     theme
   } = _ref;
   let backgroundColor = 'inherit';
-  let color = reactTheming.getColor('primaryHue', 600, theme);
+  let color = reactTheming.getColorV8('primaryHue', 600, theme);
   if (isSelected && !isDisabled) {
-    backgroundColor = reactTheming.getColor('primaryHue', 600, theme);
-    color = theme.colors.background;
+    backgroundColor = reactTheming.getColorV8('primaryHue', 600, theme);
+    color = reactTheming.getColorV8('background', 600 , theme);
   } else if (isDisabled) {
-    color = reactTheming.getColor('neutralHue', 400, theme);
+    color = reactTheming.getColorV8('neutralHue', 400, theme);
   } else if (isToday) {
     color = 'inherit';
   } else if (isPreviousMonth) {
-    color = reactTheming.getColor('neutralHue', 600, theme);
+    color = reactTheming.getColorV8('neutralHue', 600, theme);
   }
   return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
       :hover {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.08)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.08)};
+        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
       }
 
       :active {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.2)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.2)};
+        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
       }
   `);
 };
@@ -1612,7 +1612,7 @@ const Calendar = React.forwardRef((props, ref) => {
   return React__namespace.default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.4'
+    "data-garden-version": '9.0.0-next.6'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/dist/index.esm.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { mergeRefs } from 'react-merge-refs';
 import styled, { css, ThemeContext } from 'styled-components';
 import { useFloating, platform, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
-import { PLACEMENT as PLACEMENT$1, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getMenuPosition, getColor, getFloatingPlacements } from '@zendeskgarden/react-theming';
+import { PLACEMENT as PLACEMENT$1, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getMenuPosition, getColorV8, getFloatingPlacements } from '@zendeskgarden/react-theming';
 import { startOfMonth } from 'date-fns/startOfMonth';
 import { endOfMonth } from 'date-fns/endOfMonth';
 import { startOfWeek } from 'date-fns/startOfWeek';
@@ -38,7 +38,7 @@ const PLACEMENT = ['auto', ...PLACEMENT$1];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -81,7 +81,7 @@ const StyledDatePicker = styled.div.attrs({
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => getColorV8('background', 600 , props.theme), props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledDatePicker.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -123,7 +123,7 @@ const retrieveColor$1 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, getColor('neutralHue', 600, theme));
+  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColorV8('primaryHue', 600, theme, 0.08), getColorV8('foreground', 600 , theme), getColorV8('primaryHue', 600, theme, 0.2), getColorV8('foreground', 600 , theme), getColorV8('neutralHue', 600, theme));
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled.div.attrs({
@@ -221,7 +221,7 @@ const retrieveColor = _ref2 => {
     isHighlighted,
     theme
   } = _ref2;
-  return css(["background-color:", ";"], isHighlighted && getColor('primaryHue', 600, theme, 0.08));
+  return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
 };
 const StyledHighlight = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1
@@ -242,26 +242,26 @@ const retrieveStyledDayColors = _ref => {
     theme
   } = _ref;
   let backgroundColor = 'inherit';
-  let color = getColor('primaryHue', 600, theme);
+  let color = getColorV8('primaryHue', 600, theme);
   if (isSelected && !isDisabled) {
-    backgroundColor = getColor('primaryHue', 600, theme);
-    color = theme.colors.background;
+    backgroundColor = getColorV8('primaryHue', 600, theme);
+    color = getColorV8('background', 600 , theme);
   } else if (isDisabled) {
-    color = getColor('neutralHue', 400, theme);
+    color = getColorV8('neutralHue', 400, theme);
   } else if (isToday) {
     color = 'inherit';
   } else if (isPreviousMonth) {
-    color = getColor('neutralHue', 600, theme);
+    color = getColorV8('neutralHue', 600, theme);
   }
   return css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
       :hover {
-        background-color: ${getColor('primaryHue', 600, theme, 0.08)};
-        color: ${getColor('primaryHue', 800, theme)};
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.08)};
+        color: ${getColorV8('primaryHue', 800, theme)};
       }
 
       :active {
-        background-color: ${getColor('primaryHue', 600, theme, 0.2)};
-        color: ${getColor('primaryHue', 800, theme)};
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.2)};
+        color: ${getColorV8('primaryHue', 800, theme)};
       }
   `);
 };
@@ -1587,7 +1587,7 @@ const Calendar = forwardRef((props, ref) => {
   return React__default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.4'
+    "data-garden-version": '9.0.0-next.6'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-datepickers",
-  "version": "9.0.0-next.4",
+  "version": "9.0.0-next.6",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,10 +31,10 @@
     "@zendeskgarden/react-theming": "^8.1.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.4",
+    "@zendeskgarden/react-theming": "^9.0.0-next.6",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
+  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
 }