@zendeskgarden/react-buttons 9.4.0 → 9.5.1

package/dist/esm/styled/StyledAnchor.js

@@ -5,13 +5,13 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 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.4.0',
+  'data-garden-version': '9.5.1',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   $isLink: true,
@@ -19,6 +19,6 @@ const StyledAnchor = styled(StyledButton).attrs(props => ({
 })).withConfig({
   displayName: "StyledAnchor",
   componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(props['data-garden-id'], props));
+})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', componentStyles);
 
 export { StyledAnchor };

package/dist/esm/styled/StyledButton.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math, em } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
+import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
 import { StyledSplitButton } from './StyledSplitButton.js';
 import { StyledIcon } from './StyledIcon.js';
 
@@ -308,11 +308,11 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.$isLink ? 'inline' : 'inline-flex', props => !props.$isLink && 'center', props => !props.$isLink && 'center', props => `${props.$isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.$isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.$isLink && 'nowrap', props => props.$isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.$isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.$isLink ? 'underline' : 'none', props => props.$isLink ? 'underline' : 'none', props => colorStyles(props), props => props.$isLink && 'none', StyledIcon, props => iconStyles(props), StyledSplitButton, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.$isLink ? 'inline' : 'inline-flex', props => !props.$isLink && 'center', props => !props.$isLink && 'center', props => `${props.$isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.$isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.$isLink && 'nowrap', props => props.$isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.$isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.$isLink ? 'underline' : 'none', props => props.$isLink ? 'underline' : 'none', props => colorStyles(props), props => props.$isLink && 'none', StyledIcon, props => iconStyles(props), StyledSplitButton, props => groupStyles(props), componentStyles);
 
 export { COMPONENT_ID, StyledButton, getHeight };

package/dist/esm/styled/StyledExternalIcon.js

@@ -6,15 +6,15 @@
 */
 import styled from 'styled-components';
 import SvgNewWindowStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/new-window-stroke.svg.js';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
-})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', componentStyles);
 
 export { StyledExternalIcon };

package/dist/esm/styled/StyledIcon.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.icon';
 const sizeStyles = props => {
@@ -19,10 +19,10 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).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), componentStyles);
 
 export { StyledIcon };

package/dist/esm/styled/StyledIconButton.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledButton, COMPONENT_ID as COMPONENT_ID$1, getHeight } from './StyledButton.js';
 import { StyledIcon } from './StyledIcon.js';
 
@@ -51,11 +51,11 @@ const StyledIconButton = styled(StyledButton).attrs(props => {
   const externalId = props['data-garden-id'];
   return {
     'data-garden-id': externalId && externalId !== COMPONENT_ID$1 ? externalId : COMPONENT_ID,
-    'data-garden-version': '9.4.0'
+    'data-garden-version': '9.5.1'
   };
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], iconButtonStyles, StyledIcon, iconStyles, props => retrieveComponentStyles(props['data-garden-id'], props));
+})(["", ";& ", "{", "}", ";"], iconButtonStyles, StyledIcon, iconStyles, componentStyles);
 
 export { COMPONENT_ID, StyledIconButton };

package/dist/esm/styled/StyledSplitButton.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
-})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', componentStyles);
 
 export { StyledSplitButton };

package/dist/index.cjs.js

@@ -41,11 +41,11 @@ 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.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
-})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', reactTheming.componentStyles);
 
 const COMPONENT_ID$4 = 'buttons.icon';
 const sizeStyles$1 = props => {
@@ -59,11 +59,11 @@ const sizeStyles$1 = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).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), reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'buttons.button';
 const getBorderRadius = props => {
@@ -363,17 +363,17 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$3,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.$isLink ? 'inline' : 'inline-flex', props => !props.$isLink && 'center', props => !props.$isLink && 'center', props => `${props.$isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.$isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.$isLink && 'nowrap', props => props.$isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.$isLink && 'none', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => props.$isLink ? 'underline' : 'none', props => props.$isLink ? 'underline' : 'none', props => colorStyles(props), props => props.$isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.$isLink ? 'inline' : 'inline-flex', props => !props.$isLink && 'center', props => !props.$isLink && 'center', props => `${props.$isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.$isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.$isLink && 'nowrap', props => props.$isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.$isLink && 'none', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => props.$isLink ? 'underline' : 'none', props => props.$isLink ? 'underline' : 'none', props => colorStyles(props), props => props.$isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   $isLink: true,
@@ -381,7 +381,7 @@ const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
 })).withConfig({
   displayName: "StyledAnchor",
   componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
+})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', reactTheming.componentStyles);
 
 var _path$1;
 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); }
@@ -404,11 +404,11 @@ 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.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
-})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', reactTheming.componentStyles);
 
 const COMPONENT_ID = 'buttons.icon_button';
 const iconColorStyles = _ref => {
@@ -452,12 +452,12 @@ const StyledIconButton = styled__default.default(StyledButton).attrs(props => {
   const externalId = props['data-garden-id'];
   return {
     'data-garden-id': externalId && externalId !== COMPONENT_ID$3 ? externalId : COMPONENT_ID,
-    'data-garden-version': '9.4.0'
+    'data-garden-version': '9.5.1'
   };
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], iconButtonStyles, StyledIcon, iconStyles, props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
+})(["", ";& ", "{", "}", ";"], iconButtonStyles, StyledIcon, iconStyles, reactTheming.componentStyles);
 
 const SplitButtonContext = React.createContext(undefined);
 const useSplitButtonContext = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.4.0",
+  "version": "9.5.1",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,8 +33,8 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.4.0",
-    "@zendeskgarden/svg-icons": "7.3.0"
+    "@zendeskgarden/react-theming": "^9.5.1",
+    "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "02e3f240b6f0c776fdae785254d6fe90cbfc37e4"
+  "gitHead": "2571d0225b784bb7c765316ed584d289d35d4605"
 }