@pingux/astro 2.128.1-alpha.0 → 2.129.0-alpha.0

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

@@ -40,9 +40,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TextAreaField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -112,7 +109,7 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.TextAreaField, args);
 };
 exports.Default = Default;
-var WithSlots = function WithSlots(args) {
+var WithSlots = function WithSlots() {
   return (
     // This is an example of a slot that can be passed into the component
     // const IconSlot = (
@@ -122,19 +119,19 @@ var WithSlots = function WithSlots(args) {
     //     />
     //   </Box>
     // );
-    (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
+    (0, _react2.jsx)(_index.TextAreaField, {
       slots: {
         inContainer: IconSlot
       }
-    }))
+    })
   );
 };
 exports.WithSlots = WithSlots;
-var FloatLabel = function FloatLabel() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var FloatLabel = function FloatLabel(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     labelMode: "float"
-  });
+  }));
 };
 exports.FloatLabel = FloatLabel;
 var Controlled = function Controlled() {
@@ -151,62 +148,62 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     label: "Example Label",
     value: "This is disabled"
-  });
+  }));
 };
 exports.Disabled = Disabled;
-var ReadOnly = function ReadOnly() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
 exports.ReadOnly = ReadOnly;
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
 exports.Required = Required;
-var Rows = function Rows() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Rows = function Rows(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     rows: 5
-  });
+  }));
 };
 exports.Rows = Rows;
-var Unresizable = function Unresizable() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Unresizable = function Unresizable(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isUnresizable: true,
     label: "Example label"
-  });
+  }));
 };
 exports.Unresizable = Unresizable;
-var Error = function Error() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Error = function Error(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
 exports.Error = Error;
-var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
 exports.WithoutStatusIndicator = WithoutStatusIndicator;
-var MaxLength = function MaxLength() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var MaxLength = function MaxLength(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };
 exports.MaxLength = MaxLength;

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

@@ -44,9 +44,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TextField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -87,22 +84,22 @@ var Default = function Default(_ref) {
   }, args));
 };
 exports.Default = Default;
-var SmallVariant = function SmallVariant() {
-  return (0, _react2.jsx)(_index.TextField, {
+var SmallVariant = function SmallVariant(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
       variant: 'input.small'
     }
-  });
+  }));
 };
 exports.SmallVariant = SmallVariant;
-var FloatLabel = function FloatLabel() {
-  return (0, _react2.jsx)(_index.TextField, {
+var FloatLabel = function FloatLabel(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     labelMode: "float"
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -117,18 +114,18 @@ FloatLabel.parameters = {
     }
   }
 };
-var LeftLabel = function LeftLabel() {
+var LeftLabel = function LeftLabel(args) {
   return (0, _react2.jsx)(_index.Box, {
     gap: "xl",
     width: "100%"
-  }, (0, _react2.jsx)(_index.TextField, {
+  }, (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     labelMode: "left"
-  }), (0, _react2.jsx)(_index.TextField, {
+  })), (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label that is much longer than the previous one",
     labelMode: "left"
-  }), (0, _react2.jsx)(_index.TextField, {
+  })), (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example label with set width",
     labelMode: "left",
     containerProps: {
@@ -136,7 +133,7 @@ var LeftLabel = function LeftLabel() {
         gridTemplateColumns: '120px auto'
       }
     }
-  }));
+  })));
 };
 exports.LeftLabel = LeftLabel;
 LeftLabel.parameters = {
@@ -160,33 +157,33 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var Password = function Password() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Password = function Password(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     type: "password"
-  });
+  }));
 };
 exports.Password = Password;
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     label: "Example Label"
-  });
+  }));
 };
 exports.Disabled = Disabled;
-var ReadOnly = function ReadOnly() {
-  return (0, _react2.jsx)(_index.TextField, {
+var ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
 exports.ReadOnly = ReadOnly;
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
 exports.Required = Required;
 var DynamicRequired = function DynamicRequired() {
@@ -204,41 +201,41 @@ var DynamicRequired = function DynamicRequired() {
   });
 };
 exports.DynamicRequired = DynamicRequired;
-var Error = function Error() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Error = function Error(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
 exports.Error = Error;
-var Success = function Success() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Success = function Success(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "success"
-  });
+  }));
 };
 exports.Success = Success;
-var Warning = function Warning() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Warning = function Warning(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "warning"
-  });
+  }));
 };
 exports.Warning = Warning;
-var WithHelpHint = function WithHelpHint() {
-  return (0, _react2.jsx)(_index.TextField, {
+var WithHelpHint = function WithHelpHint(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"
-  });
+  }));
 };
 exports.WithHelpHint = WithHelpHint;
-var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
-  return (0, _react2.jsx)(_index.TextField, {
+var WithHelpHintCustomWidth = function WithHelpHintCustomWidth(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
@@ -246,7 +243,7 @@ var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
     helpHintProps: {
       width: '300px'
     }
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -261,18 +258,18 @@ WithHelpHintCustomWidth.parameters = {
     }
   }
 };
-var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.TextField, {
+var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
 exports.WithoutStatusIndicator = WithoutStatusIndicator;
-var MaxLength = function MaxLength() {
-  return (0, _react2.jsx)(_index.TextField, {
+var MaxLength = function MaxLength(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };
 exports.MaxLength = MaxLength;
 var WithSlots = function WithSlots() {

package/lib/cjs/components/TimeField/TimeField.stories.d.ts

@@ -1,30 +1,6 @@
-import React from 'react';
 import { StoryFn } from '@storybook/react';
 import { TimeFieldProps } from '../../types';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<TimeFieldProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-        docs: {
-            source: {
-                type: string;
-            };
-            page: () => React.JSX.Element;
-        };
-        a11y: {
-            config: {
-                rules: {
-                    id: string;
-                    enabled: boolean;
-                }[];
-            };
-        };
-    };
-    argTypes: {};
-};
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<TimeFieldProps>;
 export declare const DefaultValue: StoryFn<TimeFieldProps>;

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

@@ -26,9 +26,6 @@ var _default = {
       argTypesRegex: '^on.*'
     },
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TimeField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
@@ -58,7 +55,7 @@ var DefaultValue = function DefaultValue(args) {
   }));
 };
 exports.DefaultValue = DefaultValue;
-var Controlled = function Controlled(args) {
+var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('12:30'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     time = _useState2[0],
@@ -66,11 +63,11 @@ var Controlled = function Controlled(args) {
   var onChangeHandler = function onChangeHandler(value) {
     return setTime(value.toString());
   };
-  return (0, _react2.jsx)(_index.TimeField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.TimeField, {
     "aria-label": "timefield-default",
     value: time,
     onChange: onChangeHandler
-  }));
+  });
 };
 exports.Controlled = Controlled;
 var Disabled = function Disabled(args) {

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

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WithCustomTimeZone = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -23,19 +24,19 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var Default = function Default() {
-  return (0, _react2.jsx)(_index.TimeZonePicker, {
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.TimeZonePicker, (0, _extends2["default"])({}, args, {
     label: "Default Example"
-  });
+  }));
 };
 exports.Default = Default;
-var WithCustomTimeZone = function WithCustomTimeZone() {
+var WithCustomTimeZone = function WithCustomTimeZone(args) {
   var customTimeZone = {
     '(GMT+02:00) Africa/Juba': 'Africa/Juba'
   };
-  return (0, _react2.jsx)(_index.TimeZonePicker, {
+  return (0, _react2.jsx)(_index.TimeZonePicker, (0, _extends2["default"])({}, args, {
     additionalTimeZones: customTimeZone,
     label: "With Custom Time Zone (Africa/Juba)"
-  });
+  }));
 };
 exports.WithCustomTimeZone = WithCustomTimeZone;

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

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withDirectionProp = exports.withDelayProp = exports.withArrowCrossOffsetProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.customWidth = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.BadgeWithTooltip = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
@@ -22,6 +23,12 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TooltipTrigger["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Icon', 'IconButton', 'Text', 'Tooltip', 'TooltipTrigger'],
+        '@pingux/mdi-react/AccountIcon': 'AccountIcon'
+      }
     }
   }
 };
@@ -30,35 +37,35 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.TooltipTrigger, args, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Tooltip Content"));
 };
 exports.Default = Default;
-var withAlignProp = function withAlignProp() {
-  return (0, _react2.jsx)(_index.TooltipTrigger, {
+var withAlignProp = function withAlignProp(args) {
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({}, args, {
     align: "end"
-  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "End aligned"));
+  }), (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "End aligned"));
 };
 exports.withAlignProp = withAlignProp;
-var withDirectionProp = function withDirectionProp() {
-  return (0, _react2.jsx)(_index.TooltipTrigger, {
+var withDirectionProp = function withDirectionProp(args) {
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({}, args, {
     direction: "right"
-  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Display on the right"));
+  }), (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Display on the right"));
 };
 exports.withDirectionProp = withDirectionProp;
-var withArrowCrossOffsetProp = function withArrowCrossOffsetProp() {
-  return (0, _react2.jsx)(_index.TooltipTrigger, {
+var withArrowCrossOffsetProp = function withArrowCrossOffsetProp(args) {
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({}, args, {
     arrowCrossOffset: "30px",
     isOpen: true
-  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "With arrowCrossOffset=\"30px\""));
+  }), (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "With arrowCrossOffset=\"30px\""));
 };
 exports.withArrowCrossOffsetProp = withArrowCrossOffsetProp;
-var isOpen = function isOpen() {
-  return (0, _react2.jsx)(_index.TooltipTrigger, {
+var isOpen = function isOpen(args) {
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({}, args, {
     isOpen: true
-  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Display by default"));
+  }), (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Display by default"));
 };
 exports.isOpen = isOpen;
-var IconWithTooltip = function IconWithTooltip() {
+var IconWithTooltip = function IconWithTooltip(args) {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
-  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.IconButton, {
+  }, (0, _react2.jsx)(_index.TooltipTrigger, args, (0, _react2.jsx)(_index.IconButton, {
     variant: "tooltip.button"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _AccountIcon["default"],
@@ -68,10 +75,10 @@ var IconWithTooltip = function IconWithTooltip() {
   })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 exports.IconWithTooltip = IconWithTooltip;
-var BadgeWithTooltip = function BadgeWithTooltip() {
+var BadgeWithTooltip = function BadgeWithTooltip(args) {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
-  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.TooltipTrigger, args, (0, _react2.jsx)(_index.Button, {
     variant: "variants.tooltip.badge",
     bg: "neutral.10"
   }, (0, _react2.jsx)(_index.Text, {
@@ -91,19 +98,19 @@ BadgeWithTooltip.parameters = {
     url: _figmaLinks.FIGMA_LINKS.tooltipTrigger.badgeWithTooltip
   }
 };
-var TextWithTooltip = function TextWithTooltip() {
+var TextWithTooltip = function TextWithTooltip(args) {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
-  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.TooltipTrigger, args, (0, _react2.jsx)(_index.Button, {
     variant: "variants.tooltip.inline"
   }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 exports.TextWithTooltip = TextWithTooltip;
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.TooltipTrigger, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({}, args, {
     delay: 0,
     isDisabled: true
-  }, (0, _react2.jsx)(_index.IconButton, {
+  }), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Earth Icon"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _EarthIcon["default"],
@@ -120,15 +127,15 @@ Disabled.parameters = {
     }
   }
 };
-var withDelayProp = function withDelayProp() {
-  return (0, _react2.jsx)(_index.TooltipTrigger, {
+var withDelayProp = function withDelayProp(args) {
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({}, args, {
     delay: 700
-  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Display with a delay"));
+  }), (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Display with a delay"));
 };
 exports.withDelayProp = withDelayProp;
-var customWidth = function customWidth() {
-  return (0, _react2.jsx)(_index.TooltipTrigger, {
+var customWidth = function customWidth(args) {
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({}, args, {
     width: "200px"
-  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Custom width display"));
+  }), (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Custom width display"));
 };
 exports.customWidth = customWidth;

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

@@ -42,9 +42,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TreeView["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -60,7 +57,8 @@ var _default = {
           enabled: false
         }]
       }
-    }
+    },
+    codesandbox: false
   }
 };
 exports["default"] = _default;

package/lib/cjs/recipes/AccordionCard.stories.js

@@ -28,7 +28,10 @@ var _react2 = require("@emotion/react");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _default = {
-  title: 'Recipes/AccordionCard'
+  title: 'Recipes/AccordionCard',
+  parameters: {
+    codesandbox: false
+  }
 };
 exports["default"] = _default;
 var accordionItemSX = {

package/lib/cjs/recipes/AttributeMapping.stories.js

@@ -26,7 +26,10 @@ var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = {
-  title: 'Recipes/Attribute Mappings'
+  title: 'Recipes/Attribute Mappings',
+  parameters: {
+    codesandbox: false
+  }
 };
 exports["default"] = _default;
 var sx = {

package/lib/cjs/recipes/CollapsiblePanel.stories.js

@@ -36,7 +36,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _default = {
-  title: 'Recipes/CollapsiblePanel with List'
+  title: 'Recipes/CollapsiblePanel with List',
+  parameters: {
+    codesandbox: false
+  }
 };
 exports["default"] = _default;
 var data = [{

package/lib/cjs/recipes/ConditionFilter.stories.js

@@ -37,7 +37,8 @@ var _default = {
           enabled: false
         }]
       }
-    }
+    },
+    codesandbox: false
   }
 };
 exports["default"] = _default;

package/lib/cjs/recipes/CopyToClipboard.stories.js

@@ -11,7 +11,10 @@ var _useCopyToClipboard = _interopRequireDefault(require("../hooks/useCopyToClip
 var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Recipes/Copy to Clipboard'
+  title: 'Recipes/Copy to Clipboard',
+  parameters: {
+    codesandbox: false
+  }
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -24,7 +24,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = {
   title: 'Recipes/Country Picker',
-  decorators: [_storybookAddonDesigns.withDesign]
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    codesandbox: false
+  }
 };
 exports["default"] = _default;
 var validatePhoneNumber = function validatePhoneNumber(str) {