@zendeskgarden/react-draggable 9.3.0 → 9.5.0

package/dist/esm/styled/draggable/StyledContent.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 = 'draggable.content';
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-15arore-0"
-})(["flex:1;word-wrap:break-word;overflow-wrap:anywhere;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex:1;word-wrap:break-word;overflow-wrap:anywhere;", ";"], componentStyles);
 
 export { StyledContent };

package/dist/esm/styled/draggable/StyledDraggable.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledGrip } from './StyledGrip.js';
 
 const COMPONENT_ID = 'draggable';
@@ -103,10 +103,10 @@ const getCursor = props => {
 };
 const StyledDraggable = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDraggable",
   componentId: "sc-3lxpf1-0"
-})(["display:flex;flex:1;align-items:center;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,z-index 0.25s ease-in-out;cursor:", ";font-family:", ";direction:", ";box-sizing:border-box;", " ", " > *{visibility:", ";}", ";"], getCursor, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, p => p.$isPlaceholder && !p.$isDisabled && 'hidden', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex:1;align-items:center;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,z-index 0.25s ease-in-out;cursor:", ";font-family:", ";direction:", ";box-sizing:border-box;", " ", " > *{visibility:", ";}", ";"], getCursor, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, p => p.$isPlaceholder && !p.$isDisabled && 'hidden', componentStyles);
 
 export { StyledDraggable, getDragShadow };

package/dist/esm/styled/draggable/StyledGrip.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'draggable.grip';
 function sizeStyles(_ref) {
@@ -17,13 +17,13 @@ function sizeStyles(_ref) {
 }
 const StyledGrip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledGrip",
   componentId: "sc-13uv9iv-0"
 })(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => getColor({
   variable: 'foreground.subtle',
   theme: p.theme
-}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+}), sizeStyles, componentStyles);
 
 export { StyledGrip };

package/dist/esm/styled/draggable-list/StyledDraggableList.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledItem } from './StyledItem.js';
 
 const COMPONENT_ID = 'draggable_list';
@@ -26,10 +26,10 @@ const sizeStyles = props => {
 };
 const StyledDraggableList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDraggableList",
   componentId: "sc-17agksa-0"
-})(["display:flex;flex-direction:", ";margin:0;padding:0;list-style:none;box-sizing:border-box;direction:", ";> ", "{flex:1;}", ";", ";"], p => p.$isHorizontal ? 'row' : 'column', props => props.theme.rtl && 'rtl', StyledItem, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex-direction:", ";margin:0;padding:0;list-style:none;box-sizing:border-box;direction:", ";> ", "{flex:1;}", ";", ";"], p => p.$isHorizontal ? 'row' : 'column', props => props.theme.rtl && 'rtl', StyledItem, sizeStyles, componentStyles);
 
 export { StyledDraggableList };

package/dist/esm/styled/draggable-list/StyledDropIndicator.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';
 
 const COMPONENT_ID = 'draggable_list.drop_indicator';
 const colorStyles = props => {
@@ -30,10 +30,10 @@ const sizeStyles = props => {
 };
 const StyledDropIndicator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDropIndicator",
   componentId: "sc-1f1u2lh-0"
-})(["position:relative;", " ", " &::before,&::after{position:absolute;content:'';}", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:relative;", " ", " &::before,&::after{position:absolute;content:'';}", ";"], sizeStyles, colorStyles, componentStyles);
 
 export { StyledDropIndicator };

package/dist/esm/styled/draggable-list/StyledItem.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'draggable_list.item';
 const sizeStyles = props => {
@@ -19,10 +19,10 @@ const sizeStyles = props => {
 };
 const StyledItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1nps3s3-0"
-})(["display:flex;", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;", " ", ";"], sizeStyles, componentStyles);
 
 export { StyledItem };

package/dist/esm/styled/dropzone/StyledDropzone.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropzone';
 const colorStyles = props => {
@@ -84,10 +84,10 @@ const sizeStyles = props => {
 };
 const StyledDropzone = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDropzone",
   componentId: "sc-1b7zuip-0"
-})(["display:", ";flex-direction:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;text-align:", ";direction:", ";box-sizing:border-box;", " ", " ", ";"], p => (p.$hasMessage || p.$hasIcon) && 'flex', p => p.$hasMessage && p.$isVertical && 'column', p => (p.$hasMessage || p.$hasIcon) && 'center', p => (p.$hasMessage || p.$hasIcon) && 'center', p => p.$hasMessage && 'center', props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:", ";flex-direction:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;text-align:", ";direction:", ";box-sizing:border-box;", " ", " ", ";"], p => (p.$hasMessage || p.$hasIcon) && 'flex', p => p.$hasMessage && p.$isVertical && 'column', p => (p.$hasMessage || p.$hasIcon) && 'center', p => (p.$hasMessage || p.$hasIcon) && 'center', p => p.$hasMessage && 'center', props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, componentStyles);
 
 export { StyledDropzone };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropzone.icon';
 function sizeStyles(_ref) {
@@ -26,10 +26,10 @@ function sizeStyles(_ref) {
 }
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-1o12gen-0"
-})(["display:flex;width:", ";height:", ";", " ", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, p => p.$hasMessage && sizeStyles(p), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;width:", ";height:", ";", " ", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, p => p.$hasMessage && sizeStyles(p), componentStyles);
 
 export { StyledIcon };

package/dist/esm/styled/dropzone/StyledMessage.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropzone.message';
 const StyledMessage = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-5kb2l2-0"
-})(["margin:0;line-height:", ";color:inherit;font-size:", ";font-weight:", ";", ";"], p => getLineHeight(p.theme.space.base * 5, p.theme.fontSizes.md), p => p.theme.fontSizes.md, p => p.theme.fontWeights.regular, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["margin:0;line-height:", ";color:inherit;font-size:", ";font-weight:", ";", ";"], p => getLineHeight(p.theme.space.base * 5, p.theme.fontSizes.md), p => p.theme.fontSizes.md, p => p.theme.fontWeights.regular, componentStyles);
 
 export { StyledMessage };

package/dist/index.cjs.js

@@ -44,14 +44,14 @@ function sizeStyles$6(_ref) {
 }
 const StyledGrip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledGrip",
   componentId: "sc-13uv9iv-0"
 })(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => reactTheming.getColor({
   variable: 'foreground.subtle',
   theme: p.theme
-}), sizeStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+}), sizeStyles$6, reactTheming.componentStyles);
 
 const COMPONENT_ID$7 = 'draggable';
 function getDragShadow(theme) {
@@ -148,20 +148,20 @@ const getCursor = props => {
 };
 const StyledDraggable = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDraggable",
   componentId: "sc-3lxpf1-0"
-})(["display:flex;flex:1;align-items:center;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,z-index 0.25s ease-in-out;cursor:", ";font-family:", ";direction:", ";box-sizing:border-box;", " ", " > *{visibility:", ";}", ";"], getCursor, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', sizeStyles$5, colorStyles$2, p => p.$isPlaceholder && !p.$isDisabled && 'hidden', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["display:flex;flex:1;align-items:center;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,z-index 0.25s ease-in-out;cursor:", ";font-family:", ";direction:", ";box-sizing:border-box;", " ", " > *{visibility:", ";}", ";"], getCursor, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', sizeStyles$5, colorStyles$2, p => p.$isPlaceholder && !p.$isDisabled && 'hidden', reactTheming.componentStyles);
 
 const COMPONENT_ID$6 = 'draggable.content';
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-15arore-0"
-})(["flex:1;word-wrap:break-word;overflow-wrap:anywhere;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["flex:1;word-wrap:break-word;overflow-wrap:anywhere;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$5 = 'draggable_list.item';
 const sizeStyles$4 = props => {
@@ -175,11 +175,11 @@ const sizeStyles$4 = props => {
 };
 const StyledItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1nps3s3-0"
-})(["display:flex;", " ", ";"], sizeStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:flex;", " ", ";"], sizeStyles$4, reactTheming.componentStyles);
 
 const COMPONENT_ID$4 = 'draggable_list';
 const sizeStyles$3 = props => {
@@ -199,11 +199,11 @@ const sizeStyles$3 = props => {
 };
 const StyledDraggableList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDraggableList",
   componentId: "sc-17agksa-0"
-})(["display:flex;flex-direction:", ";margin:0;padding:0;list-style:none;box-sizing:border-box;direction:", ";> ", "{flex:1;}", ";", ";"], p => p.$isHorizontal ? 'row' : 'column', props => props.theme.rtl && 'rtl', StyledItem, sizeStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["display:flex;flex-direction:", ";margin:0;padding:0;list-style:none;box-sizing:border-box;direction:", ";> ", "{flex:1;}", ";", ";"], p => p.$isHorizontal ? 'row' : 'column', props => props.theme.rtl && 'rtl', StyledItem, sizeStyles$3, reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'draggable_list.drop_indicator';
 const colorStyles$1 = props => {
@@ -228,11 +228,11 @@ const sizeStyles$2 = props => {
 };
 const StyledDropIndicator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDropIndicator",
   componentId: "sc-1f1u2lh-0"
-})(["position:relative;", " ", " &::before,&::after{position:absolute;content:'';}", ";"], sizeStyles$2, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:relative;", " ", " &::before,&::after{position:absolute;content:'';}", ";"], sizeStyles$2, colorStyles$1, reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'dropzone';
 const colorStyles = props => {
@@ -310,20 +310,20 @@ const sizeStyles$1 = props => {
 };
 const StyledDropzone = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledDropzone",
   componentId: "sc-1b7zuip-0"
-})(["display:", ";flex-direction:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;text-align:", ";direction:", ";box-sizing:border-box;", " ", " ", ";"], p => (p.$hasMessage || p.$hasIcon) && 'flex', p => p.$hasMessage && p.$isVertical && 'column', p => (p.$hasMessage || p.$hasIcon) && 'center', p => (p.$hasMessage || p.$hasIcon) && 'center', p => p.$hasMessage && 'center', props => props.theme.rtl && 'rtl', sizeStyles$1, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["display:", ";flex-direction:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;text-align:", ";direction:", ";box-sizing:border-box;", " ", " ", ";"], p => (p.$hasMessage || p.$hasIcon) && 'flex', p => p.$hasMessage && p.$isVertical && 'column', p => (p.$hasMessage || p.$hasIcon) && 'center', p => (p.$hasMessage || p.$hasIcon) && 'center', p => p.$hasMessage && 'center', props => props.theme.rtl && 'rtl', sizeStyles$1, colorStyles, reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'dropzone.message';
 const StyledMessage = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-5kb2l2-0"
-})(["margin:0;line-height:", ";color:inherit;font-size:", ";font-weight:", ";", ";"], p => reactTheming.getLineHeight(p.theme.space.base * 5, p.theme.fontSizes.md), p => p.theme.fontSizes.md, p => p.theme.fontWeights.regular, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["margin:0;line-height:", ";color:inherit;font-size:", ";font-weight:", ";", ";"], p => reactTheming.getLineHeight(p.theme.space.base * 5, p.theme.fontSizes.md), p => p.theme.fontSizes.md, p => p.theme.fontWeights.regular, reactTheming.componentStyles);
 
 const COMPONENT_ID = 'dropzone.icon';
 function sizeStyles(_ref) {
@@ -344,11 +344,11 @@ function sizeStyles(_ref) {
 }
 const StyledIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-1o12gen-0"
-})(["display:flex;width:", ";height:", ";", " ", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, p => p.$hasMessage && sizeStyles(p), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;width:", ";height:", ";", " ", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, p => p.$hasMessage && sizeStyles(p), reactTheming.componentStyles);
 
 const Content = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledContent, Object.assign({}, props, {
   ref: ref

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-draggable",
-  "version": "9.3.0",
+  "version": "9.5.0",
   "description": "Components related to drag and drop in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,12 +31,12 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@dnd-kit/core": "6.1.0",
-    "@dnd-kit/sortable": "8.0.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@zendeskgarden/react-theming": "^9.3.0",
-    "@zendeskgarden/react-typography": "^9.3.0",
-    "@zendeskgarden/svg-icons": "7.3.0"
+    "@zendeskgarden/react-theming": "^9.5.0",
+    "@zendeskgarden/react-typography": "^9.5.0",
+    "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
     "components",
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "fa6461e0d9fae27956980056006e8013daedc6b9"
+  "gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
 }