@spothero/ui 24.0.4-beta.0 → 24.0.5-beta.0

package/dist/index.cjs.js

@@ -49957,7 +49957,7 @@ RadioGroup.propTypes = {
   direction: PropTypes__default.default.oneOf(['row', 'column'])
 };
 
-var _excluded$6 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size"];
+var _excluded$6 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles"];
 var SelectionCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var isChecked = _ref.isChecked,
     isDisabled = _ref.isDisabled,
@@ -49970,10 +49970,13 @@ var SelectionCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isExpandable = _ref.isExpandable,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$expandableChildr = _ref.expandableChildrenStyles,
+    expandableChildrenStyles = _ref$expandableChildr === void 0 ? {} : _ref$expandableChildr,
     props = _objectWithoutProperties$1(_ref, _excluded$6);
   var Component = isRadio ? Radio : Checkbox;
   var expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   var hasExpandableContent = isExpandable && isChecked && expandableChildren;
+  var prefersReducedMotion = usePrefersReducedMotion();
   return /*#__PURE__*/React__namespace.default.createElement(Box, {
     paddingBottom: hasExpandableContent ? 3 : 0,
     borderRadius: "lg",
@@ -49997,12 +50000,22 @@ var SelectionCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     width: "100%",
     paddingX: 4,
     paddingY: 3
-  }, props), label)), hasExpandableContent && /*#__PURE__*/React__namespace.default.createElement(Box, {
+  }, props), label)), /*#__PURE__*/React__namespace.default.createElement(Box, {
+    overflow: "hidden",
+    display: "grid"
+    // Using this as a pseudo height transition to get around no height auto transition
+    ,
+    gridTemplateRows: hasExpandableContent ? '1fr' : '0fr',
+    opacity: hasExpandableContent ? '100%' : '0%',
+    transition: prefersReducedMotion ? '' : 'all 150ms ease-out'
+  }, /*#__PURE__*/React__namespace.default.createElement(Box, {
+    overflow: "hidden"
+  }, hasExpandableContent && /*#__PURE__*/React__namespace.default.createElement(Box, _extends$7({
     color: "gray.600",
     fontSize: expandableTextSize,
     paddingTop: 3,
     paddingX: 4
-  }, expandableChildren));
+  }, expandableChildrenStyles), expandableChildren))));
 });
 SelectionCard.propTypes = {
   label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]).isRequired,
@@ -50014,6 +50027,7 @@ SelectionCard.propTypes = {
   helperText: PropTypes__default.default.string,
   isRadio: PropTypes__default.default.bool,
   isExpandable: PropTypes__default.default.bool,
+  expandableChildrenStyles: PropTypes__default.default.object,
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg'])
 };