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

package/dist/esm/styled/StyledHeaderPaddle.js

@@ -5,34 +5,64 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const retrieveSizing = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
-  let size = theme.space.base * 10;
-  if (isCompact) {
-    size = theme.space.base * 8;
-  }
-  return css(["width:", "px;height:", "px;"], size, size);
+  const iconSize = theme.iconSizes.md;
+  const size = theme.space.base * ($isCompact ? 8 : 10);
+  return css(["width:", "px;height:", "px;svg{width:", ";height:", ";}"], size, size, iconSize, iconSize);
 };
-const retrieveColor = _ref2 => {
+const colorStyles = _ref2 => {
   let {
     theme
   } = _ref2;
-  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 foreground = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const foregroundHover = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const backgroundHover = getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[100]
+  });
+  const foregroundActive = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  const backgroundActive = getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[200]
+  });
+  return css(["color:", ";:hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}"], foreground, backgroundHover, foregroundHover, backgroundActive, foregroundActive);
 };
 const COMPONENT_ID = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHeaderPaddle",
   componentId: "sc-2oqh0g-0"
-})(["display:flex;align-items:center;justify-content:center;transform:", ";visibility:", ";border-radius:50%;cursor:pointer;", " ", " svg{width:", ";height:", ";}", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isHidden && 'hidden', retrieveSizing, retrieveColor, props => `${props.theme.iconSizes.md}`, props => `${props.theme.iconSizes.md}`, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHeaderPaddle.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;align-items:center;justify-content:center;transform:", ";border-radius:50%;cursor:pointer;&[aria-hidden]{visibility:hidden;}", " ", " ", ";"], props => props.theme.rtl && 'rotate(180deg)', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHeaderPaddle };

package/dist/esm/styled/StyledHighlight.js

@@ -5,46 +5,49 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'datepickers.highlight';
-const retrieveBorderRadius = _ref => {
+const sizeStyles = _ref => {
   let {
     theme,
-    isEnd,
-    isStart
+    $isEnd,
+    $isStart
   } = _ref;
-  const startValue = 'border-radius: 0 50% 50% 0;';
-  const endValue = 'border-radius: 50% 0 0 50%;';
+  let borderRadius;
+  const startValue = '0 50% 50% 0;';
+  const endValue = '50% 0 0 50%;';
   if (theme.rtl) {
-    if (isStart) {
-      return startValue;
-    } else if (isEnd) {
-      return endValue;
+    if ($isStart) {
+      borderRadius = startValue;
+    } else if ($isEnd) {
+      borderRadius = endValue;
     }
   }
-  if (isStart) {
-    return endValue;
-  } else if (isEnd) {
-    return startValue;
+  if ($isStart) {
+    borderRadius = endValue;
+  } else if ($isEnd) {
+    borderRadius = startValue;
   }
-  return '';
+  return css(["border-radius:", ";width:100%;height:100%;"], borderRadius);
 };
-const retrieveColor = _ref2 => {
+const colorStyles = _ref2 => {
   let {
-    isHighlighted,
+    $isHighlighted,
     theme
   } = _ref2;
-  return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
+  return css(["background-color:", ";"], $isHighlighted && getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    theme
+  }));
 };
 const StyledHighlight = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHighlight.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:absolute;top:0;left:0;", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHighlight };

package/dist/esm/styled/StyledMenu.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 = 'datepickers.menu';
 const StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMenu.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMenu };

package/dist/esm/styled/StyledMenuWrapper.js

@@ -5,23 +5,22 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { menuStyles, getMenuPosition, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { menuStyles, getMenuPosition, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'datepickers.menu_wrapper';
 const StyledMenuWrapper = styled.div.attrs(props => ({
-  className: props.isAnimated && 'is-animated'
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0',
+  className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-6fowoz-0"
-})(["top:0;left:0;", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";", ";"], props => menuStyles(getMenuPosition(props.$placement), {
   theme: props.theme,
-  hidden: props.isHidden,
+  hidden: props['aria-hidden'],
   margin: `${props.theme.space.base}px`,
-  zIndex: props.zIndex,
-  animationModifier: props.isAnimated ? '.is-animated' : undefined
+  zIndex: props.$zIndex,
+  animationModifier: props.$isAnimated ? '.is-animated' : undefined
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMenuWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMenuWrapper };

package/dist/esm/styled/StyledRangeCalendar.js

@@ -6,17 +6,15 @@
 */
 import styled from 'styled-components';
 import { StyledDatePicker } from './StyledDatePicker.js';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'datepickers.range_calendar';
 const StyledRangeCalendar = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
 })(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatePicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRangeCalendar.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRangeCalendar };