@zendeskgarden/react-draggable 9.1.1 → 9.2.0

package/dist/esm/elements/draggable/Draggable.js

@@ -19,17 +19,27 @@ import '../../styled/dropzone/StyledIcon.js';
 
 const DraggableComponent = forwardRef((_ref, ref) => {
   let {
+    focusInset,
+    isBare,
+    isCompact,
+    isDisabled,
+    isGrabbed,
+    isPlaceholder,
     tag,
-    ...props
+    ...other
   } = _ref;
-  const isDisabled = props.isDisabled;
   return React__default.createElement(StyledDraggable, Object.assign({
-    as: tag,
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isDisabled: isDisabled,
+    $isGrabbed: isGrabbed,
+    $isPlaceholder: isPlaceholder,
     "aria-disabled": isDisabled,
+    as: tag,
+    ref: ref,
     tabIndex: isDisabled ? undefined : 0
-  }, props, {
-    ref: ref
-  }));
+  }, other));
 });
 DraggableComponent.displayName = 'Draggable';
 const Draggable = DraggableComponent;

package/dist/esm/elements/draggable-list/DraggableList.js

@@ -18,15 +18,20 @@ import '../../styled/dropzone/StyledMessage.js';
 import '../../styled/dropzone/StyledIcon.js';
 import { DraggableListContext } from '../../utils/useDraggableListContext.js';
 
-const DraggableListComponent = forwardRef((props, ref) => {
+const DraggableListComponent = forwardRef((_ref, ref) => {
+  let {
+    isHorizontal,
+    ...other
+  } = _ref;
   const value = useMemo(() => ({
-    isHorizontal: props.isHorizontal
-  }), [props.isHorizontal]);
+    isHorizontal
+  }), [isHorizontal]);
   return React__default.createElement(DraggableListContext.Provider, {
     value: value
-  }, React__default.createElement(StyledDraggableList, Object.assign({}, props, {
+  }, React__default.createElement(StyledDraggableList, Object.assign({
+    $isHorizontal: isHorizontal,
     ref: ref
-  })));
+  }, other)));
 });
 DraggableListComponent.displayName = 'DraggableList';
 const DraggableList = DraggableListComponent;

package/dist/esm/elements/draggable-list/components/DropIndicator.js

@@ -24,7 +24,7 @@ const DropIndicator = forwardRef((props, ref) => {
   const ariaLabel = useText(DropIndicator, props, 'aria-label', 'Drop indicator');
   return React__default.createElement(StyledDropIndicator, Object.assign({}, props, {
     "aria-label": ariaLabel,
-    isHorizontal: isHorizontal,
+    $isHorizontal: isHorizontal,
     ref: ref
   }));
 });

package/dist/esm/elements/draggable-list/components/Item.js

@@ -21,7 +21,7 @@ const Item = forwardRef((props, ref) => {
     isHorizontal
   } = useDraggableListContext();
   return React__default.createElement(StyledItem, Object.assign({}, props, {
-    isHorizontal: isHorizontal,
+    $isHorizontal: isHorizontal,
     ref: ref
   }));
 });

package/dist/esm/elements/dropzone/Dropzone.js

@@ -21,14 +21,15 @@ import { DropzoneContext } from '../../utils/useDropzoneContext.js';
 
 const DropzoneComponent = forwardRef((_ref, ref) => {
   let {
-    tag,
-    isVertical,
     children,
-    ...props
+    isActive,
+    isDanger,
+    isDisabled,
+    isHighlighted,
+    isVertical,
+    tag,
+    ...other
   } = _ref;
-  const {
-    isDanger
-  } = props;
   const [hasMessage, setHasMessage] = useState(false);
   const [hasIcon, setHasIcon] = useState(false);
   const value = useMemo(() => ({
@@ -43,16 +44,20 @@ const DropzoneComponent = forwardRef((_ref, ref) => {
     value: value
   }, React__default.createElement(StyledDropzone, Object.assign({
     as: tag,
-    "aria-disabled": props.isDisabled
-  }, props, {
-    hasIcon: hasIcon,
-    hasMessage: hasMessage,
-    isVertical: isVertical,
+    "aria-disabled": isDisabled
+  }, other, {
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isDanger: isDanger,
+    $isHighlighted: isHighlighted,
+    $hasIcon: hasIcon,
+    $hasMessage: hasMessage,
+    $isVertical: isVertical,
     ref: ref
   }), !!(hasMessage && isDanger) && !hasIcon && React__default.createElement(StyledIcon, {
     "aria-hidden": "true",
-    hasMessage: hasMessage,
-    isVertical: isVertical
+    $hasMessage: hasMessage,
+    $isVertical: isVertical
   }, React__default.createElement(SvgTrashStroke, null)), children));
 });
 DropzoneComponent.displayName = 'Dropzone';

package/dist/esm/elements/dropzone/components/Icon.js

@@ -36,8 +36,8 @@ const Icon = forwardRef((props, ref) => {
   return React__default.createElement(StyledIcon, Object.assign({
     "aria-hidden": "true"
   }, props, {
-    hasMessage: hasMessage,
-    isVertical: isVertical,
+    $hasMessage: hasMessage,
+    $isVertical: isVertical,
     ref: ref
   }));
 });

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'draggable.content';
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-15arore-0"

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

@@ -24,11 +24,11 @@ function getDragShadow(theme) {
 }
 const colorStyles = props => {
   const {
-    isBare,
-    isGrabbed,
-    isDisabled,
-    isPlaceholder,
-    focusInset,
+    $isBare,
+    $isGrabbed,
+    $isDisabled,
+    $isPlaceholder,
+    $focusInset,
     theme
   } = props;
   const dragShadow = getDragShadow(theme);
@@ -53,23 +53,23 @@ const colorStyles = props => {
   let boxShadow;
   let borderColor = 'transparent';
   let backgroundColor = baseBgColor;
-  if (isDisabled) {
+  if ($isDisabled) {
     backgroundColor = disabledBgColor;
     color = disabledColor;
-  } else if (isPlaceholder) {
+  } else if ($isPlaceholder) {
     backgroundColor = placeholderBgColor;
   } else {
     color = getColor({
       variable: 'foreground.default',
       theme
     });
-    borderColor = isBare ? 'transparent' : getColor({
+    borderColor = $isBare ? 'transparent' : getColor({
       variable: 'border.default',
       theme
     });
     hoverBackgroundColor = getColor({
-      variable: isGrabbed ? 'background.raised' : 'background.primaryEmphasis',
-      ...(!isGrabbed && {
+      variable: $isGrabbed ? 'background.raised' : 'background.primaryEmphasis',
+      ...(!$isGrabbed && {
         transparency: theme.opacity[100],
         dark: {
           offset: -100
@@ -79,34 +79,34 @@ const colorStyles = props => {
     });
     boxShadow = dragShadow;
   }
-  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover{background-color:", ";}", " > ", "{color:", ";}"], borderColor, isGrabbed && boxShadow, backgroundColor, color, hoverBackgroundColor, focusStyles({
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover{background-color:", ";}", " > ", "{color:", ";}"], borderColor, $isGrabbed && boxShadow, backgroundColor, color, hoverBackgroundColor, focusStyles({
     theme,
-    inset: focusInset,
-    boxShadow: isGrabbed ? dragShadow : undefined
-  }), StyledGrip, isDisabled && disabledColor);
+    inset: $focusInset,
+    boxShadow: $isGrabbed ? dragShadow : undefined
+  }), StyledGrip, $isDisabled && disabledColor);
 };
 const sizeStyles = props => {
   const {
-    isCompact,
+    $isCompact,
     theme
   } = props;
   const paddingDefault = theme.space.base * 2.25;
   const paddingCompact = theme.space.base * 1.25;
-  return css(["margin:0;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";font-weight:", ";"], theme.borders.sm, theme.borderRadii.md, isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`, getLineHeight(theme.space.base * 5, theme.fontSizes.md), theme.fontSizes.md, theme.fontWeights.regular);
+  return css(["margin:0;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";font-weight:", ";"], theme.borders.sm, theme.borderRadii.md, $isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`, getLineHeight(theme.space.base * 5, theme.fontSizes.md), theme.fontSizes.md, theme.fontWeights.regular);
 };
 const getCursor = props => {
-  let cursor = props.isGrabbed ? 'grabbing' : 'grab';
-  if (props.isDisabled || props.isPlaceholder) {
+  let cursor = props.$isGrabbed ? 'grabbing' : 'grab';
+  if (props.$isDisabled || props.$isPlaceholder) {
     cursor = 'default';
   }
   return cursor;
 };
 const StyledDraggable = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.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', props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledDraggable, getDragShadow };

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

@@ -17,7 +17,7 @@ function sizeStyles(_ref) {
 }
 const StyledGrip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledGrip",
   componentId: "sc-13uv9iv-0"

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

@@ -11,14 +11,14 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID = 'draggable_list';
 const sizeStyles = props => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme: {
       space
     }
   } = props;
   let marginStart = 'margin-top';
   let marginEnd = 'margin-bottom';
-  if (isHorizontal) {
+  if ($isHorizontal) {
     marginStart = 'margin-right';
     marginEnd = 'margin-left';
   }
@@ -26,10 +26,10 @@ const sizeStyles = props => {
 };
 const StyledDraggableList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.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, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledDraggableList };

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

@@ -20,17 +20,17 @@ const colorStyles = props => {
 };
 const sizeStyles = props => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme
   } = props;
   const pseudoSize = theme.space.xs;
-  const translateX = isHorizontal ? theme.space.xxs : theme.space.xs;
-  const translateY = isHorizontal ? theme.space.xs : theme.space.xxs;
+  const translateX = $isHorizontal ? theme.space.xxs : theme.space.xs;
+  const translateY = $isHorizontal ? theme.space.xs : theme.space.xxs;
   return css(["&::before,&::after{border-radius:50%;width:", ";height:", ";}&::before{top:0;left:0;transform:translate(-", ",-", ");}&::after{right:0;bottom:0;transform:translate(", ",", ");}"], pseudoSize, pseudoSize, translateX, translateY, translateX, translateY);
 };
 const StyledDropIndicator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledDropIndicator",
   componentId: "sc-1f1u2lh-0"

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

@@ -10,16 +10,16 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'draggable_list.item';
 const sizeStyles = props => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme: {
       space
     }
   } = props;
-  return css(["padding:", ";"], isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`);
+  return css(["padding:", ";"], $isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`);
 };
 const StyledItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1nps3s3-0"

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

@@ -11,19 +11,19 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropzone';
 const colorStyles = props => {
   const {
-    isDanger,
-    isDisabled,
-    isActive,
-    isHighlighted,
+    $isDanger,
+    $isDisabled,
+    $isActive,
+    $isHighlighted,
     theme
   } = props;
-  const fgVariable = isDanger ? 'foreground.danger' : 'foreground.primary';
+  const fgVariable = $isDanger ? 'foreground.danger' : 'foreground.primary';
   const fgActive = getColor({
     variable: fgVariable,
     theme
   });
   const borderActive = getColor({
-    variable: isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis',
+    variable: $isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis',
     theme
   });
   let backgroundColor = 'transparent';
@@ -35,7 +35,7 @@ const colorStyles = props => {
     variable: `foreground.subtle`,
     theme
   });
-  if (isDisabled) {
+  if ($isDisabled) {
     backgroundColor = getColor({
       variable: 'background.disabled',
       theme
@@ -48,8 +48,8 @@ const colorStyles = props => {
       variable: 'foreground.disabled',
       theme
     });
-  } else if (isActive || isHighlighted) {
-    color = isHighlighted ? getColor({
+  } else if ($isActive || $isHighlighted) {
+    color = $isHighlighted ? getColor({
       variable: fgVariable,
       light: {
         offset: 200
@@ -60,7 +60,7 @@ const colorStyles = props => {
       theme
     }) : fgActive;
     backgroundColor = getColor({
-      variable: isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis',
+      variable: $isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis',
       transparency: theme.opacity[100],
       dark: {
         offset: -100
@@ -68,7 +68,7 @@ const colorStyles = props => {
       theme
     });
     borderColor = borderActive;
-  } else if (isDanger) {
+  } else if ($isDanger) {
     borderColor = borderActive;
     color = fgActive;
   }
@@ -77,17 +77,17 @@ const colorStyles = props => {
 const sizeStyles = props => {
   const {
     theme,
-    isHighlighted
+    $isHighlighted
   } = props;
-  const borderWidth = isHighlighted ? math(`${theme.borderWidths.sm} * 2`) : theme.borderWidths.sm;
-  return css(["border-width:", ";border-style:", ";border-radius:", ";padding:", "px;width:100%;font-family:", ";font-size:", ";"], borderWidth, isHighlighted ? theme.borderStyles.solid : 'dashed', theme.borderRadii.md, isHighlighted ? theme.space.base * 4 - 1 : theme.space.base * 4, theme.fonts.system, theme.fontSizes.md);
+  const borderWidth = $isHighlighted ? math(`${theme.borderWidths.sm} * 2`) : theme.borderWidths.sm;
+  return css(["border-width:", ";border-style:", ";border-radius:", ";padding:", "px;width:100%;font-family:", ";font-size:", ";"], borderWidth, $isHighlighted ? theme.borderStyles.solid : 'dashed', theme.borderRadii.md, $isHighlighted ? theme.space.base * 4 - 1 : theme.space.base * 4, theme.fonts.system, theme.fontSizes.md);
 };
 const StyledDropzone = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.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, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledDropzone };

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

@@ -11,11 +11,11 @@ const COMPONENT_ID = 'dropzone.icon';
 function sizeStyles(_ref) {
   let {
     theme,
-    isVertical
+    $isVertical
   } = _ref;
   let property;
   let value;
-  if (isVertical) {
+  if ($isVertical) {
     property = 'margin-bottom';
     value = theme.space.xs;
   } else {
@@ -26,10 +26,10 @@ function sizeStyles(_ref) {
 }
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.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), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledIcon };

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

@@ -10,7 +10,7 @@ import { getLineHeight, retrieveComponentStyles } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropzone.message';
 const StyledMessage = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-5kb2l2-0"

package/dist/index.cjs.js

@@ -44,7 +44,7 @@ function sizeStyles$6(_ref) {
 }
 const StyledGrip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledGrip",
   componentId: "sc-13uv9iv-0"
@@ -69,11 +69,11 @@ function getDragShadow(theme) {
 }
 const colorStyles$2 = props => {
   const {
-    isBare,
-    isGrabbed,
-    isDisabled,
-    isPlaceholder,
-    focusInset,
+    $isBare,
+    $isGrabbed,
+    $isDisabled,
+    $isPlaceholder,
+    $focusInset,
     theme
   } = props;
   const dragShadow = getDragShadow(theme);
@@ -98,23 +98,23 @@ const colorStyles$2 = props => {
   let boxShadow;
   let borderColor = 'transparent';
   let backgroundColor = baseBgColor;
-  if (isDisabled) {
+  if ($isDisabled) {
     backgroundColor = disabledBgColor;
     color = disabledColor;
-  } else if (isPlaceholder) {
+  } else if ($isPlaceholder) {
     backgroundColor = placeholderBgColor;
   } else {
     color = reactTheming.getColor({
       variable: 'foreground.default',
       theme
     });
-    borderColor = isBare ? 'transparent' : reactTheming.getColor({
+    borderColor = $isBare ? 'transparent' : reactTheming.getColor({
       variable: 'border.default',
       theme
     });
     hoverBackgroundColor = reactTheming.getColor({
-      variable: isGrabbed ? 'background.raised' : 'background.primaryEmphasis',
-      ...(!isGrabbed && {
+      variable: $isGrabbed ? 'background.raised' : 'background.primaryEmphasis',
+      ...(!$isGrabbed && {
         transparency: theme.opacity[100],
         dark: {
           offset: -100
@@ -124,40 +124,40 @@ const colorStyles$2 = props => {
     });
     boxShadow = dragShadow;
   }
-  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover{background-color:", ";}", " > ", "{color:", ";}"], borderColor, isGrabbed && boxShadow, backgroundColor, color, hoverBackgroundColor, reactTheming.focusStyles({
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover{background-color:", ";}", " > ", "{color:", ";}"], borderColor, $isGrabbed && boxShadow, backgroundColor, color, hoverBackgroundColor, reactTheming.focusStyles({
     theme,
-    inset: focusInset,
-    boxShadow: isGrabbed ? dragShadow : undefined
-  }), StyledGrip, isDisabled && disabledColor);
+    inset: $focusInset,
+    boxShadow: $isGrabbed ? dragShadow : undefined
+  }), StyledGrip, $isDisabled && disabledColor);
 };
 const sizeStyles$5 = props => {
   const {
-    isCompact,
+    $isCompact,
     theme
   } = props;
   const paddingDefault = theme.space.base * 2.25;
   const paddingCompact = theme.space.base * 1.25;
-  return styled.css(["margin:0;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";font-weight:", ";"], theme.borders.sm, theme.borderRadii.md, isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`, reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md), theme.fontSizes.md, theme.fontWeights.regular);
+  return styled.css(["margin:0;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";font-weight:", ";"], theme.borders.sm, theme.borderRadii.md, $isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`, reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md), theme.fontSizes.md, theme.fontWeights.regular);
 };
 const getCursor = props => {
-  let cursor = props.isGrabbed ? 'grabbing' : 'grab';
-  if (props.isDisabled || props.isPlaceholder) {
+  let cursor = props.$isGrabbed ? 'grabbing' : 'grab';
+  if (props.$isDisabled || props.$isPlaceholder) {
     cursor = 'default';
   }
   return cursor;
 };
 const StyledDraggable = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.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', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 
 const COMPONENT_ID$6 = 'draggable.content';
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-15arore-0"
@@ -166,16 +166,16 @@ const StyledContent = styled__default.default.div.attrs({
 const COMPONENT_ID$5 = 'draggable_list.item';
 const sizeStyles$4 = props => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme: {
       space
     }
   } = props;
-  return styled.css(["padding:", ";"], isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`);
+  return styled.css(["padding:", ";"], $isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`);
 };
 const StyledItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1nps3s3-0"
@@ -184,14 +184,14 @@ const StyledItem = styled__default.default.li.attrs({
 const COMPONENT_ID$4 = 'draggable_list';
 const sizeStyles$3 = props => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme: {
       space
     }
   } = props;
   let marginStart = 'margin-top';
   let marginEnd = 'margin-bottom';
-  if (isHorizontal) {
+  if ($isHorizontal) {
     marginStart = 'margin-right';
     marginEnd = 'margin-left';
   }
@@ -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.1.1'
+  'data-garden-version': '9.2.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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 
 const COMPONENT_ID$3 = 'draggable_list.drop_indicator';
 const colorStyles$1 = props => {
@@ -218,17 +218,17 @@ const colorStyles$1 = props => {
 };
 const sizeStyles$2 = props => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme
   } = props;
   const pseudoSize = theme.space.xs;
-  const translateX = isHorizontal ? theme.space.xxs : theme.space.xs;
-  const translateY = isHorizontal ? theme.space.xs : theme.space.xxs;
+  const translateX = $isHorizontal ? theme.space.xxs : theme.space.xs;
+  const translateY = $isHorizontal ? theme.space.xs : theme.space.xxs;
   return styled.css(["&::before,&::after{border-radius:50%;width:", ";height:", ";}&::before{top:0;left:0;transform:translate(-", ",-", ");}&::after{right:0;bottom:0;transform:translate(", ",", ");}"], pseudoSize, pseudoSize, translateX, translateY, translateX, translateY);
 };
 const StyledDropIndicator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledDropIndicator",
   componentId: "sc-1f1u2lh-0"
@@ -237,19 +237,19 @@ const StyledDropIndicator = styled__default.default.li.attrs({
 const COMPONENT_ID$2 = 'dropzone';
 const colorStyles = props => {
   const {
-    isDanger,
-    isDisabled,
-    isActive,
-    isHighlighted,
+    $isDanger,
+    $isDisabled,
+    $isActive,
+    $isHighlighted,
     theme
   } = props;
-  const fgVariable = isDanger ? 'foreground.danger' : 'foreground.primary';
+  const fgVariable = $isDanger ? 'foreground.danger' : 'foreground.primary';
   const fgActive = reactTheming.getColor({
     variable: fgVariable,
     theme
   });
   const borderActive = reactTheming.getColor({
-    variable: isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis',
+    variable: $isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis',
     theme
   });
   let backgroundColor = 'transparent';
@@ -261,7 +261,7 @@ const colorStyles = props => {
     variable: `foreground.subtle`,
     theme
   });
-  if (isDisabled) {
+  if ($isDisabled) {
     backgroundColor = reactTheming.getColor({
       variable: 'background.disabled',
       theme
@@ -274,8 +274,8 @@ const colorStyles = props => {
       variable: 'foreground.disabled',
       theme
     });
-  } else if (isActive || isHighlighted) {
-    color = isHighlighted ? reactTheming.getColor({
+  } else if ($isActive || $isHighlighted) {
+    color = $isHighlighted ? reactTheming.getColor({
       variable: fgVariable,
       light: {
         offset: 200
@@ -286,7 +286,7 @@ const colorStyles = props => {
       theme
     }) : fgActive;
     backgroundColor = reactTheming.getColor({
-      variable: isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis',
+      variable: $isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis',
       transparency: theme.opacity[100],
       dark: {
         offset: -100
@@ -294,7 +294,7 @@ const colorStyles = props => {
       theme
     });
     borderColor = borderActive;
-  } else if (isDanger) {
+  } else if ($isDanger) {
     borderColor = borderActive;
     color = fgActive;
   }
@@ -303,23 +303,23 @@ const colorStyles = props => {
 const sizeStyles$1 = props => {
   const {
     theme,
-    isHighlighted
+    $isHighlighted
   } = props;
-  const borderWidth = isHighlighted ? polished.math(`${theme.borderWidths.sm} * 2`) : theme.borderWidths.sm;
-  return styled.css(["border-width:", ";border-style:", ";border-radius:", ";padding:", "px;width:100%;font-family:", ";font-size:", ";"], borderWidth, isHighlighted ? theme.borderStyles.solid : 'dashed', theme.borderRadii.md, isHighlighted ? theme.space.base * 4 - 1 : theme.space.base * 4, theme.fonts.system, theme.fontSizes.md);
+  const borderWidth = $isHighlighted ? polished.math(`${theme.borderWidths.sm} * 2`) : theme.borderWidths.sm;
+  return styled.css(["border-width:", ";border-style:", ";border-radius:", ";padding:", "px;width:100%;font-family:", ";font-size:", ";"], borderWidth, $isHighlighted ? theme.borderStyles.solid : 'dashed', theme.borderRadii.md, $isHighlighted ? theme.space.base * 4 - 1 : theme.space.base * 4, theme.fonts.system, theme.fontSizes.md);
 };
 const StyledDropzone = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
 const COMPONENT_ID$1 = 'dropzone.message';
 const StyledMessage = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-5kb2l2-0"
@@ -329,11 +329,11 @@ const COMPONENT_ID = 'dropzone.icon';
 function sizeStyles(_ref) {
   let {
     theme,
-    isVertical
+    $isVertical
   } = _ref;
   let property;
   let value;
-  if (isVertical) {
+  if ($isVertical) {
     property = 'margin-bottom';
     value = theme.space.xs;
   } else {
@@ -344,11 +344,11 @@ function sizeStyles(_ref) {
 }
 const StyledIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.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), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 
 const Content = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledContent, Object.assign({}, props, {
   ref: ref
@@ -419,17 +419,27 @@ Grip.displayName = 'Draggable.Grip';
 
 const DraggableComponent = React.forwardRef((_ref, ref) => {
   let {
+    focusInset,
+    isBare,
+    isCompact,
+    isDisabled,
+    isGrabbed,
+    isPlaceholder,
     tag,
-    ...props
+    ...other
   } = _ref;
-  const isDisabled = props.isDisabled;
   return React__namespace.default.createElement(StyledDraggable, Object.assign({
-    as: tag,
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isDisabled: isDisabled,
+    $isGrabbed: isGrabbed,
+    $isPlaceholder: isPlaceholder,
     "aria-disabled": isDisabled,
+    as: tag,
+    ref: ref,
     tabIndex: isDisabled ? undefined : 0
-  }, props, {
-    ref: ref
-  }));
+  }, other));
 });
 DraggableComponent.displayName = 'Draggable';
 const Draggable = DraggableComponent;
@@ -452,7 +462,7 @@ const DropIndicator = React.forwardRef((props, ref) => {
   const ariaLabel = reactTheming.useText(DropIndicator, props, 'aria-label', 'Drop indicator');
   return React__namespace.default.createElement(StyledDropIndicator, Object.assign({}, props, {
     "aria-label": ariaLabel,
-    isHorizontal: isHorizontal,
+    $isHorizontal: isHorizontal,
     ref: ref
   }));
 });
@@ -463,21 +473,26 @@ const Item = React.forwardRef((props, ref) => {
     isHorizontal
   } = useDraggableListContext();
   return React__namespace.default.createElement(StyledItem, Object.assign({}, props, {
-    isHorizontal: isHorizontal,
+    $isHorizontal: isHorizontal,
     ref: ref
   }));
 });
 Item.displayName = 'DraggableList.Item';
 
-const DraggableListComponent = React.forwardRef((props, ref) => {
+const DraggableListComponent = React.forwardRef((_ref, ref) => {
+  let {
+    isHorizontal,
+    ...other
+  } = _ref;
   const value = React.useMemo(() => ({
-    isHorizontal: props.isHorizontal
-  }), [props.isHorizontal]);
+    isHorizontal
+  }), [isHorizontal]);
   return React__namespace.default.createElement(DraggableListContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledDraggableList, Object.assign({}, props, {
+  }, React__namespace.default.createElement(StyledDraggableList, Object.assign({
+    $isHorizontal: isHorizontal,
     ref: ref
-  })));
+  }, other)));
 });
 DraggableListComponent.displayName = 'DraggableList';
 const DraggableList = DraggableListComponent;
@@ -552,8 +567,8 @@ const Icon = React.forwardRef((props, ref) => {
   return React__namespace.default.createElement(StyledIcon, Object.assign({
     "aria-hidden": "true"
   }, props, {
-    hasMessage: hasMessage,
-    isVertical: isVertical,
+    $hasMessage: hasMessage,
+    $isVertical: isVertical,
     ref: ref
   }));
 });
@@ -561,14 +576,15 @@ Icon.displayName = 'Dropzone.Icon';
 
 const DropzoneComponent = React.forwardRef((_ref, ref) => {
   let {
-    tag,
-    isVertical,
     children,
-    ...props
+    isActive,
+    isDanger,
+    isDisabled,
+    isHighlighted,
+    isVertical,
+    tag,
+    ...other
   } = _ref;
-  const {
-    isDanger
-  } = props;
   const [hasMessage, setHasMessage] = React.useState(false);
   const [hasIcon, setHasIcon] = React.useState(false);
   const value = React.useMemo(() => ({
@@ -583,16 +599,20 @@ const DropzoneComponent = React.forwardRef((_ref, ref) => {
     value: value
   }, React__namespace.default.createElement(StyledDropzone, Object.assign({
     as: tag,
-    "aria-disabled": props.isDisabled
-  }, props, {
-    hasIcon: hasIcon,
-    hasMessage: hasMessage,
-    isVertical: isVertical,
+    "aria-disabled": isDisabled
+  }, other, {
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isDanger: isDanger,
+    $isHighlighted: isHighlighted,
+    $hasIcon: hasIcon,
+    $hasMessage: hasMessage,
+    $isVertical: isVertical,
     ref: ref
   }), !!(hasMessage && isDanger) && !hasIcon && React__namespace.default.createElement(StyledIcon, {
     "aria-hidden": "true",
-    hasMessage: hasMessage,
-    isVertical: isVertical
+    $hasMessage: hasMessage,
+    $isVertical: isVertical
   }, React__namespace.default.createElement(SvgTrashStroke, null)), children));
 });
 DropzoneComponent.displayName = 'Dropzone';

package/dist/typings/styled/draggable/StyledDraggable.d.ts

@@ -7,12 +7,12 @@
 import { ThemeProps, DefaultTheme } from 'styled-components';
 import { IGardenTheme } from '@zendeskgarden/react-theming';
 export interface IStyledDraggableProps extends ThemeProps<DefaultTheme> {
-    focusInset?: boolean;
-    isBare?: boolean;
-    isCompact?: boolean;
-    isDisabled?: boolean;
-    isGrabbed?: boolean;
-    isPlaceholder?: boolean;
+    $focusInset?: boolean;
+    $isBare?: boolean;
+    $isCompact?: boolean;
+    $isDisabled?: boolean;
+    $isGrabbed?: boolean;
+    $isPlaceholder?: boolean;
 }
 export declare function getDragShadow(theme: IGardenTheme): string;
 export declare const StyledDraggable: import("styled-components").StyledComponent<"div", DefaultTheme, {

package/dist/typings/styled/draggable-list/StyledDraggableList.d.ts

@@ -6,7 +6,7 @@
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
 export interface IStyledDraggableListProps extends ThemeProps<DefaultTheme> {
-    isHorizontal?: boolean;
+    $isHorizontal?: boolean;
 }
 /**
  * 1. <ul> reset.

package/dist/typings/styled/draggable-list/StyledDropIndicator.d.ts

@@ -6,7 +6,7 @@
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
 export interface IStyledDropIndicatorProps extends ThemeProps<DefaultTheme> {
-    isHorizontal?: boolean;
+    $isHorizontal?: boolean;
 }
 export declare const StyledDropIndicator: import("styled-components").StyledComponent<"li", DefaultTheme, {
     'data-garden-id': string;

package/dist/typings/styled/draggable-list/StyledItem.d.ts

@@ -6,7 +6,7 @@
  */
 import { DefaultTheme, ThemeProps } from 'styled-components';
 export interface IStyledItemProps extends ThemeProps<DefaultTheme> {
-    isHorizontal?: boolean;
+    $isHorizontal?: boolean;
 }
 export declare const StyledItem: import("styled-components").StyledComponent<"li", DefaultTheme, {
     'data-garden-id': string;

package/dist/typings/styled/dropzone/StyledDropzone.d.ts

@@ -6,13 +6,13 @@
  */
 import { DefaultTheme, ThemeProps } from 'styled-components';
 export interface IStyledDropzoneProps extends ThemeProps<DefaultTheme> {
-    isActive?: boolean;
-    isVertical?: boolean;
-    isDanger?: boolean;
-    isDisabled?: boolean;
-    isHighlighted?: boolean;
-    hasMessage?: boolean;
-    hasIcon?: boolean;
+    $isActive?: boolean;
+    $isVertical?: boolean;
+    $isDanger?: boolean;
+    $isDisabled?: boolean;
+    $isHighlighted?: boolean;
+    $hasMessage?: boolean;
+    $hasIcon?: boolean;
 }
 /**
  * 1. Reset margin, e.g. when alternative tag includes native margin

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

@@ -6,8 +6,8 @@
  */
 import { DefaultTheme, ThemeProps } from 'styled-components';
 interface IStyledIconProps extends ThemeProps<DefaultTheme> {
-    isVertical?: boolean;
-    hasMessage?: boolean;
+    $isVertical?: boolean;
+    $hasMessage?: boolean;
 }
 /**
  * 1. Corrects the vertical text alignment of the icon within a dropzone message.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-draggable",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "Components related to drag and drop in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -34,8 +34,8 @@
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@zendeskgarden/react-theming": "^9.1.1",
-    "@zendeskgarden/react-typography": "^9.1.1",
+    "@zendeskgarden/react-theming": "^9.2.0",
+    "@zendeskgarden/react-typography": "^9.2.0",
     "@zendeskgarden/svg-icons": "7.3.0"
   },
   "keywords": [
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
+  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
 }