@pingux/astro 2.128.0 → 2.129.0-alpha.0

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -29,9 +29,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextAreaFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -99,7 +96,7 @@ var IconSlot = ___EmotionJSX(Box, {
 export var Default = function Default(args) {
   return ___EmotionJSX(TextAreaField, args);
 };
-export var WithSlots = function WithSlots(args) {
+export var WithSlots = function WithSlots() {
   return (
     // This is an example of a slot that can be passed into the component
     // const IconSlot = (
@@ -109,18 +106,18 @@ export var WithSlots = function WithSlots(args) {
     //     />
     //   </Box>
     // );
-    ___EmotionJSX(TextAreaField, _extends({}, args, {
+    ___EmotionJSX(TextAreaField, {
       slots: {
         inContainer: IconSlot
       }
-    }))
+    })
   );
 };
-export var FloatLabel = function FloatLabel() {
-  return ___EmotionJSX(TextAreaField, {
+export var FloatLabel = function FloatLabel(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example label",
     labelMode: "float"
-  });
+  }));
 };
 export var Controlled = function Controlled() {
   var _useState = useState(),
@@ -135,54 +132,54 @@ export var Controlled = function Controlled() {
     value: value
   });
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(TextAreaField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isDisabled: true,
     label: "Example Label",
     value: "This is disabled"
-  });
+  }));
 };
-export var ReadOnly = function ReadOnly() {
-  return ___EmotionJSX(TextAreaField, {
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(TextAreaField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
-export var Rows = function Rows() {
-  return ___EmotionJSX(TextAreaField, {
+export var Rows = function Rows(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example label",
     rows: 5
-  });
+  }));
 };
-export var Unresizable = function Unresizable() {
-  return ___EmotionJSX(TextAreaField, {
+export var Unresizable = function Unresizable(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isUnresizable: true,
     label: "Example label"
-  });
+  }));
 };
-export var Error = function Error() {
-  return ___EmotionJSX(TextAreaField, {
+export var Error = function Error(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
-export var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return ___EmotionJSX(TextAreaField, {
+export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
-export var MaxLength = function MaxLength() {
-  return ___EmotionJSX(TextAreaField, {
+export var MaxLength = function MaxLength(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };

package/lib/components/TextField/TextField.stories.js

@@ -33,9 +33,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -74,21 +71,21 @@ export var Default = function Default(_ref) {
     }
   }, args));
 };
-export var SmallVariant = function SmallVariant() {
-  return ___EmotionJSX(TextField, {
+export var SmallVariant = function SmallVariant(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
       variant: 'input.small'
     }
-  });
+  }));
 };
-export var FloatLabel = function FloatLabel() {
-  return ___EmotionJSX(TextField, {
+export var FloatLabel = function FloatLabel(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label",
     labelMode: "float"
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -102,18 +99,18 @@ FloatLabel.parameters = {
     }
   }
 };
-export var LeftLabel = function LeftLabel() {
+export var LeftLabel = function LeftLabel(args) {
   return ___EmotionJSX(Box, {
     gap: "xl",
     width: "100%"
-  }, ___EmotionJSX(TextField, {
+  }, ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     labelMode: "left"
-  }), ___EmotionJSX(TextField, {
+  })), ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label that is much longer than the previous one",
     labelMode: "left"
-  }), ___EmotionJSX(TextField, {
+  })), ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example label with set width",
     labelMode: "left",
     containerProps: {
@@ -121,7 +118,7 @@ export var LeftLabel = function LeftLabel() {
         gridTemplateColumns: '120px auto'
       }
     }
-  }));
+  })));
 };
 LeftLabel.parameters = {
   docs: {
@@ -143,30 +140,30 @@ export var Controlled = function Controlled() {
     value: value
   });
 };
-export var Password = function Password() {
-  return ___EmotionJSX(TextField, {
+export var Password = function Password(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label",
     type: "password"
-  });
+  }));
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(TextField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     isDisabled: true,
     label: "Example Label"
-  });
+  }));
 };
-export var ReadOnly = function ReadOnly() {
-  return ___EmotionJSX(TextField, {
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(TextField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
 export var DynamicRequired = function DynamicRequired() {
   var _useState3 = useState(''),
@@ -182,37 +179,37 @@ export var DynamicRequired = function DynamicRequired() {
     }
   });
 };
-export var Error = function Error() {
-  return ___EmotionJSX(TextField, {
+export var Error = function Error(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
-export var Success = function Success() {
-  return ___EmotionJSX(TextField, {
+export var Success = function Success(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "success"
-  });
+  }));
 };
-export var Warning = function Warning() {
-  return ___EmotionJSX(TextField, {
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "warning"
-  });
+  }));
 };
-export var WithHelpHint = function WithHelpHint() {
-  return ___EmotionJSX(TextField, {
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"
-  });
+  }));
 };
-export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
-  return ___EmotionJSX(TextField, {
+export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
@@ -220,7 +217,7 @@ export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
     helpHintProps: {
       width: '300px'
     }
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -234,17 +231,17 @@ WithHelpHintCustomWidth.parameters = {
     }
   }
 };
-export var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return ___EmotionJSX(TextField, {
+export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
-export var MaxLength = function MaxLength() {
-  return ___EmotionJSX(TextField, {
+export var MaxLength = function MaxLength(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };
 export var WithSlots = function WithSlots() {
   var _useState5 = useState("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),

package/lib/components/TimeField/TimeField.stories.js

@@ -13,9 +13,6 @@ export default {
       argTypesRegex: '^on.*'
     },
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TimeFieldReadme, null), ___EmotionJSX(DocsLayout, null));
       }
@@ -42,7 +39,7 @@ export var DefaultValue = function DefaultValue(args) {
     defaultValue: "12:30"
   }));
 };
-export var Controlled = function Controlled(args) {
+export var Controlled = function Controlled() {
   var _useState = useState('12:30'),
     _useState2 = _slicedToArray(_useState, 2),
     time = _useState2[0],
@@ -50,11 +47,11 @@ export var Controlled = function Controlled(args) {
   var onChangeHandler = function onChangeHandler(value) {
     return setTime(value.toString());
   };
-  return ___EmotionJSX(TimeField, _extends({}, args, {
+  return ___EmotionJSX(TimeField, {
     "aria-label": "timefield-default",
     value: time,
     onChange: onChangeHandler
-  }));
+  });
 };
 export var Disabled = function Disabled(args) {
   return ___EmotionJSX(TimeField, _extends({}, args, {

package/lib/components/TimeZonePicker/TimeZonePicker.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { TimeZonePicker } from '../../index';
@@ -14,17 +15,17 @@ export default {
     }
   }
 };
-export var Default = function Default() {
-  return ___EmotionJSX(TimeZonePicker, {
+export var Default = function Default(args) {
+  return ___EmotionJSX(TimeZonePicker, _extends({}, args, {
     label: "Default Example"
-  });
+  }));
 };
-export var WithCustomTimeZone = function WithCustomTimeZone() {
+export var WithCustomTimeZone = function WithCustomTimeZone(args) {
   var customTimeZone = {
     '(GMT+02:00) Africa/Juba': 'Africa/Juba'
   };
-  return ___EmotionJSX(TimeZonePicker, {
+  return ___EmotionJSX(TimeZonePicker, _extends({}, args, {
     additionalTimeZones: customTimeZone,
     label: "With Custom Time Zone (Africa/Juba)"
-  });
+  }));
 };

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -25,7 +25,9 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     isDarkMode = props.isDarkMode,
     hasNoArrow = props.hasNoArrow,
     targetRef = props.targetRef,
-    width = props.width;
+    width = props.width,
+    _props$shouldAnimate = props.shouldAnimate,
+    shouldAnimate = _props$shouldAnimate === void 0 ? true : _props$shouldAnimate;
   var _React$Children$toArr = React.Children.toArray(children),
     _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
     trigger = _React$Children$toArr2[0],
@@ -48,7 +50,7 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useGetTheme = useGetTheme(),
     themeState = _useGetTheme.themeState;
   var isTransitioning = useMountTransition(state.isOpen, 200);
-  var isOpen = state.isOpen || themeState.isOnyx && isTransitioning;
+  var isOpen = state.isOpen || themeState.isOnyx && shouldAnimate && isTransitioning;
   var _useOverlayPosition = useOverlayPosition({
       placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
       targetRef: tooltipRef,
@@ -62,7 +64,7 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     positionProps = _useOverlayPosition.overlayProps,
     arrowProps = _useOverlayPosition.arrowProps,
     placement = _useOverlayPosition.placement;
-  var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(direction), direction), _defineProperty(_useStatusClasses2, "isDarkMode", isDarkMode), _defineProperty(_useStatusClasses2, "isTransitioning", isTransitioning), _defineProperty(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
+  var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(direction), direction), _defineProperty(_useStatusClasses2, "isDarkMode", isDarkMode), _defineProperty(_useStatusClasses2, "animate", shouldAnimate), _defineProperty(_useStatusClasses2, "isTransitioning", isTransitioning), _defineProperty(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   var overlay = ___EmotionJSX(PopoverContainer, _extends({
     isOpen: isOpen,

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import Earth from '@pingux/mdi-react/EarthIcon';
@@ -14,37 +15,43 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TooltipTriggerReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Icon', 'IconButton', 'Text', 'Tooltip', 'TooltipTrigger'],
+        '@pingux/mdi-react/AccountIcon': 'AccountIcon'
+      }
     }
   }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Tooltip Content"));
 };
-export var withAlignProp = function withAlignProp() {
-  return ___EmotionJSX(TooltipTrigger, {
+export var withAlignProp = function withAlignProp(args) {
+  return ___EmotionJSX(TooltipTrigger, _extends({}, args, {
     align: "end"
-  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "End aligned"));
+  }), ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "End aligned"));
 };
-export var withDirectionProp = function withDirectionProp() {
-  return ___EmotionJSX(TooltipTrigger, {
+export var withDirectionProp = function withDirectionProp(args) {
+  return ___EmotionJSX(TooltipTrigger, _extends({}, args, {
     direction: "right"
-  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display on the right"));
+  }), ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display on the right"));
 };
-export var withArrowCrossOffsetProp = function withArrowCrossOffsetProp() {
-  return ___EmotionJSX(TooltipTrigger, {
+export var withArrowCrossOffsetProp = function withArrowCrossOffsetProp(args) {
+  return ___EmotionJSX(TooltipTrigger, _extends({}, args, {
     arrowCrossOffset: "30px",
     isOpen: true
-  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "With arrowCrossOffset=\"30px\""));
+  }), ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "With arrowCrossOffset=\"30px\""));
 };
-export var isOpen = function isOpen() {
-  return ___EmotionJSX(TooltipTrigger, {
+export var isOpen = function isOpen(args) {
+  return ___EmotionJSX(TooltipTrigger, _extends({}, args, {
     isOpen: true
-  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display by default"));
+  }), ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display by default"));
 };
-export var IconWithTooltip = function IconWithTooltip() {
+export var IconWithTooltip = function IconWithTooltip(args) {
   return ___EmotionJSX(Box, {
     pl: 50
-  }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(IconButton, {
+  }, ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(IconButton, {
     variant: "tooltip.button"
   }, ___EmotionJSX(Icon, {
     icon: AccountIcon,
@@ -53,10 +60,10 @@ export var IconWithTooltip = function IconWithTooltip() {
     }
   })), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };
-export var BadgeWithTooltip = function BadgeWithTooltip() {
+export var BadgeWithTooltip = function BadgeWithTooltip(args) {
   return ___EmotionJSX(Box, {
     pl: 50
-  }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(Button, {
     variant: "variants.tooltip.badge",
     bg: "neutral.10"
   }, ___EmotionJSX(Text, {
@@ -75,18 +82,18 @@ BadgeWithTooltip.parameters = {
     url: FIGMA_LINKS.tooltipTrigger.badgeWithTooltip
   }
 };
-export var TextWithTooltip = function TextWithTooltip() {
+export var TextWithTooltip = function TextWithTooltip(args) {
   return ___EmotionJSX(Box, {
     pl: 50
-  }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(Button, {
     variant: "variants.tooltip.inline"
   }, "Some text"), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(TooltipTrigger, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(TooltipTrigger, _extends({}, args, {
     delay: 0,
     isDisabled: true
-  }, ___EmotionJSX(IconButton, {
+  }), ___EmotionJSX(IconButton, {
     "aria-label": "Earth Icon"
   }, ___EmotionJSX(Icon, {
     icon: Earth,
@@ -102,13 +109,13 @@ Disabled.parameters = {
     }
   }
 };
-export var withDelayProp = function withDelayProp() {
-  return ___EmotionJSX(TooltipTrigger, {
+export var withDelayProp = function withDelayProp(args) {
+  return ___EmotionJSX(TooltipTrigger, _extends({}, args, {
     delay: 700
-  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display with a delay"));
+  }), ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display with a delay"));
 };
-export var customWidth = function customWidth() {
-  return ___EmotionJSX(TooltipTrigger, {
+export var customWidth = function customWidth(args) {
+  return ___EmotionJSX(TooltipTrigger, _extends({}, args, {
     width: "200px"
-  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Custom width display"));
+  }), ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Custom width display"));
 };

package/lib/components/TreeView/TreeView.stories.js

@@ -29,9 +29,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TreeViewReadMe, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -47,7 +44,8 @@ export default {
           enabled: false
         }]
       }
-    }
+    },
+    codesandbox: false
   }
 };
 var data = [{

package/lib/recipes/AccordionCard.stories.js

@@ -21,7 +21,10 @@ import InviteTeamMembers from '../utils/devUtils/assets/accordionRecepi/InviteTe
 import LaunchStartedExperience from '../utils/devUtils/assets/accordionRecepi/LaunchStartedExperience.svg';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/AccordionCard'
+  title: 'Recipes/AccordionCard',
+  parameters: {
+    codesandbox: false
+  }
 };
 var accordionItemSX = {
   itemContainer: {

package/lib/recipes/AttributeMapping.stories.js

@@ -13,7 +13,10 @@ import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.ts';
 import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Attribute Mappings'
+  title: 'Recipes/Attribute Mappings',
+  parameters: {
+    codesandbox: false
+  }
 };
 var sx = {
   alertCircleIcon: {

package/lib/recipes/CollapsiblePanel.stories.js

@@ -24,7 +24,10 @@ import { useFilter } from '@react-aria/i18n';
 import { Badge, Box, Breadcrumbs, CheckboxField, CollapsiblePanel, CollapsiblePanelItem, Icon, IconButton, Item, ListView, ListViewItem, SearchField, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/CollapsiblePanel with List'
+  title: 'Recipes/CollapsiblePanel with List',
+  parameters: {
+    codesandbox: false
+  }
 };
 var data = [{
   id: '1',

package/lib/recipes/ConditionFilter.stories.js

@@ -30,7 +30,8 @@ export default {
           enabled: false
         }]
       }
-    }
+    },
+    codesandbox: false
   }
 };
 var borderBox = {

package/lib/recipes/CopyToClipboard.stories.js

@@ -3,7 +3,10 @@ import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { Box, Button, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Copy to Clipboard'
+  title: 'Recipes/Copy to Clipboard',
+  parameters: {
+    codesandbox: false
+  }
 };
 export var Default = function Default() {
   var textToCopy = 'eyJraWQiOiI4YTg5MmY3ZS1iNTk1LTRkYWQtODBlNC0yMzA4ODkyZTczZDQiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2FwaS5waW5nb25lLmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgucGluZ29uZS5jb20iLCJjb25zb2xlVXJsIjoiaHR0cHM6Ly9jb25zb2xlLnBpbmdvbmUuY29tIiwiZW52aXJvbm1lbnROYW1lIjoiTW9udGFuYSIsImVudmlyb25tZW50SWQiOiJhYzc2NWQ0Ny1kMDM2LTQ1MGUtODFjMS1mYjQ1NDMxMjM1NjYiLCJvcmdhbml6YXRpb25OYW1lIjoiaW50ZXJuYWxfZXJpa2FhbGRlYm9yZ2hfMjUyMDc1MDMxIiwib3JnYW5pemF0aW9uSWQiOiJkMDYzMmYwZi03YjQ2LTQ5ZjUtYjgyYS1kZWU5MWQ3MDY3ODYiLCJnYXRld2F5TmFtZSI6ImRzZHMiLCJnYXRld2F5SWQiOiJiMDVmNGU5Yy1jMzRiLTRlZTMtYTYyNS01ZGFiNjlkYTE1YTEiLCJnYXRld2F5VHlwZSI6IlBJTkdfRkVERVJBVEUiLCJ0YXJnZXRDbHVzdGVyRW52aXJvbm1lbnQiOiJQUk9EIiwidGFyZ2V0R2VvZ3JhcGh5IjoiTkEiLCJyZWdpb24iOiJOb3J0aCBBbWVyaWNhIiwianRpIjoiMTUwYTQ0OTktZjIyYi00YWVhLWIzY2UtYWM2YWY1NjVjNjk5IiwiaXNzIjoid3NzOi8vZ2F0ZXdheXMucGluZ29uZS5jb20iLCJpYXQiOjE2MjYyODEyMTZ9.JJ9wwqTxQWUwz2vmU0yE54xuYff51xbirzZuEUxd8GDzV45bnpbmx460CY8g9ccdmOjvfVF4RPPsawpKuMZH271tDlLZl67iknxDVWBZSih9K6v0RAmsmNriR4OyOFOkGrULCIz3ISyPWeItp1AVuue_8guWR63KzYg32aPC4SgmOrc2myq9N6XNU2H1KybETbG_s5-VU_cUqaXn7GUzhL2_W6CSVrrlE1cYfjC7pxMKFm4vvIw_KcNYVGO1K6oYgzRZ4A8toQHIdlGB8L-wkCt442LdC93OjoQdkLuGzmXnO8BUohWea-Dn35gGHoH-H1BRQTya_H9AKyWMxCw-vg';

package/lib/recipes/CountryPicker.stories.js

@@ -11,7 +11,10 @@ import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Country Picker',
-  decorators: [withDesign]
+  decorators: [withDesign],
+  parameters: {
+    codesandbox: false
+  }
 };
 var validatePhoneNumber = function validatePhoneNumber(str) {
   var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;

package/lib/recipes/DataVisualization.stories.js

@@ -25,7 +25,10 @@ import { Box, Button, CheckboxField, DataTable, DataTableBody, DataTableCell, Da
 import { placeholder } from '../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Data Visualization with Filtering'
+  title: 'Recipes/Data Visualization with Filtering',
+  parameters: {
+    codesandbox: false
+  }
 };
 var columns = [{
   name: 'Country',

package/lib/recipes/DateTimeRangePicker.stories.js

@@ -11,7 +11,10 @@ import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/DateTimeRangePicker',
-  decorators: [withDesign]
+  decorators: [withDesign],
+  parameters: {
+    codesandbox: false
+  }
 };
 var dropdownItems = [{
   key: 'Today',

package/lib/recipes/InlineEditing.stories.js

@@ -23,7 +23,10 @@ import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Inline Editing',
-  decorators: [withDesign]
+  decorators: [withDesign],
+  parameters: {
+    codesandbox: false
+  }
 };
 var EditableAreaContext = /*#__PURE__*/createContext();
 var EditableAreaProvider = EditableAreaContext.Provider;