@zendeskgarden/react-buttons 9.0.0-next.8 → 9.0.0-next.9

package/dist/esm/elements/IconButton.js

@@ -27,7 +27,7 @@ const IconButton = forwardRef((_ref, ref) => {
   }, otherProps, {
     focusInset: otherProps.focusInset || focusInset
   }), React__default.createElement(StyledIcon, {
-    isRotated: isRotated
+    $isRotated: isRotated
   }, children));
 });
 IconButton.displayName = 'IconButton';

package/dist/esm/elements/components/EndIcon.js

@@ -12,9 +12,16 @@ import '../../styled/StyledExternalIcon.js';
 import { StyledIcon } from '../../styled/StyledIcon.js';
 import '../../styled/StyledIconButton.js';
 
-const EndIconComponent = props => React__default.createElement(StyledIcon, Object.assign({
-  position: "end"
-}, props));
+const EndIconComponent = _ref => {
+  let {
+    isRotated,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledIcon, Object.assign({
+    $position: "end",
+    $isRotated: isRotated
+  }, props));
+};
 EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 

package/dist/esm/elements/components/StartIcon.js

@@ -12,9 +12,16 @@ import '../../styled/StyledExternalIcon.js';
 import { StyledIcon } from '../../styled/StyledIcon.js';
 import '../../styled/StyledIconButton.js';
 
-const StartIconComponent = props => React__default.createElement(StyledIcon, Object.assign({
-  position: "start"
-}, props));
+const StartIconComponent = _ref => {
+  let {
+    isRotated,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledIcon, Object.assign({
+    $position: "start",
+    $isRotated: isRotated
+  }, props));
+};
 StartIconComponent.displayName = 'Button.StartIcon';
 const StartIcon = StartIconComponent;
 

package/dist/esm/styled/StyledAnchor.js

@@ -11,7 +11,7 @@ import { StyledButton } from './StyledButton.js';
 const COMPONENT_ID = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,

package/dist/esm/styled/StyledButton.js

@@ -142,7 +142,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",

package/dist/esm/styled/StyledExternalIcon.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"

package/dist/esm/styled/StyledIcon.js

@@ -5,34 +5,25 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import React__default, { Children } from 'react';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.icon';
 const sizeStyles = props => {
   let marginProperty;
-  if (props.position === 'start') {
+  if (props.$position === 'start') {
     marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
-  } else if (props.position === 'end') {
+  } else if (props.$position === 'end') {
     marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
   }
   return marginProperty && css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
 };
-const StyledIcon = styled(_ref => {
-  let {
-    children,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
+const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledIconButton.js

@@ -27,7 +27,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"

package/dist/esm/styled/StyledSplitButton.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledSplitButton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
@@ -53,28 +53,20 @@ StyledSplitButton.defaultProps = {
 const COMPONENT_ID$4 = 'buttons.icon';
 const sizeStyles$1 = props => {
   let marginProperty;
-  if (props.position === 'start') {
+  if (props.$position === 'start') {
     marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
-  } else if (props.position === 'end') {
+  } else if (props.$position === 'end') {
     marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
   }
   return marginProperty && styled.css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
 };
-const StyledIcon = styled__default.default(_ref => {
-  let {
-    children,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -211,7 +203,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -224,7 +216,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -258,7 +250,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -285,7 +277,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -299,15 +291,29 @@ const useSplitButtonContext = () => {
   return React.useContext(SplitButtonContext);
 };
 
-const StartIconComponent = props => React__namespace.default.createElement(StyledIcon, Object.assign({
-  position: "start"
-}, props));
+const StartIconComponent = _ref => {
+  let {
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledIcon, Object.assign({
+    $position: "start",
+    $isRotated: isRotated
+  }, props));
+};
 StartIconComponent.displayName = 'Button.StartIcon';
 const StartIcon = StartIconComponent;
 
-const EndIconComponent = props => React__namespace.default.createElement(StyledIcon, Object.assign({
-  position: "end"
-}, props));
+const EndIconComponent = _ref => {
+  let {
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledIcon, Object.assign({
+    $position: "end",
+    $isRotated: isRotated
+  }, props));
+};
 EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 
@@ -389,7 +395,7 @@ const IconButton = React.forwardRef((_ref, ref) => {
   }, otherProps, {
     focusInset: otherProps.focusInset || focusInset
   }), React__namespace.default.createElement(StyledIcon, {
-    isRotated: isRotated
+    $isRotated: isRotated
   }, children));
 });
 IconButton.displayName = 'IconButton';

package/dist/typings/elements/components/EndIcon.d.ts

@@ -10,6 +10,6 @@ import { IButtonIconProps } from '../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const EndIcon: {
-    (props: IButtonIconProps): React.JSX.Element;
+    ({ isRotated, ...props }: IButtonIconProps): React.JSX.Element;
     displayName: string;
 };

package/dist/typings/elements/components/StartIcon.d.ts

@@ -10,6 +10,6 @@ import { IButtonIconProps } from '../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const StartIcon: {
-    (props: IButtonIconProps): React.JSX.Element;
+    ({ isRotated, ...props }: IButtonIconProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -4,13 +4,13 @@
  * 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';
-import React from 'react';
 interface IStyledIconProps {
-    isRotated: boolean;
-    position?: 'start' | 'end';
+    $isRotated: boolean;
+    $position?: 'start' | 'end';
 }
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, isRotated, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledIconProps, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.8",
+    "@zendeskgarden/react-theming": "^9.0.0-next.9",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }