@pingux/astro 2.128.0 → 2.129.0-alpha.0

package/lib/components/NumberField/NumberField.stories.js

@@ -7,6 +7,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
@@ -25,9 +26,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NumberFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -104,8 +102,8 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(NumberField, args);
 };
-export var Decimals = function Decimals() {
-  return ___EmotionJSX(NumberField, {
+export var Decimals = function Decimals(args) {
+  return ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Adjust exposure",
     defaultValue: 0,
     formatOptions: {
@@ -113,7 +111,7 @@ export var Decimals = function Decimals() {
       minimumFractionDigits: 1,
       maximumFractionDigits: 2
     }
-  });
+  }));
 };
 export var ControlledState = function ControlledState() {
   var _useState = useState(12),
@@ -126,8 +124,8 @@ export var ControlledState = function ControlledState() {
     onChange: setValue
   });
 };
-export var CurrencyValues = function CurrencyValues() {
-  return ___EmotionJSX(NumberField, {
+export var CurrencyValues = function CurrencyValues(args) {
+  return ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Transaction amount",
     defaultValue: 45,
     formatOptions: {
@@ -136,14 +134,14 @@ export var CurrencyValues = function CurrencyValues() {
       currencyDisplay: 'code',
       currencySign: 'accounting'
     }
-  });
+  }));
 };
-export var DisabledAndReadOnly = function DisabledAndReadOnly() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NumberField, {
+export var DisabledAndReadOnly = function DisabledAndReadOnly(args) {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Disabled",
     isDisabled: true,
     value: 25
-  }), ___EmotionJSX(NumberField, {
+  })), ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Read only",
     isReadOnly: true,
     value: 32,
@@ -152,19 +150,19 @@ export var DisabledAndReadOnly = function DisabledAndReadOnly() {
         marginTop: '15px'
       }
     }
-  }));
+  })));
 };
-export var MinimumAndMaximumValues = function MinimumAndMaximumValues() {
-  return ___EmotionJSX(NumberField, {
+export var MinimumAndMaximumValues = function MinimumAndMaximumValues(args) {
+  return ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Enter your age",
     minValue: 0
-  });
+  }));
 };
-export var StepValues = function StepValues() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NumberField, {
+export var StepValues = function StepValues(args) {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Step",
     step: 10
-  }), ___EmotionJSX(NumberField, {
+  })), ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Step + minValue",
     minValue: 2,
     step: 3,
@@ -173,7 +171,7 @@ export var StepValues = function StepValues() {
         marginTop: '15px'
       }
     }
-  }), ___EmotionJSX(NumberField, {
+  })), ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Step + minValue + maxValue",
     minValue: 2,
     maxValue: 21,
@@ -186,17 +184,17 @@ export var StepValues = function StepValues() {
         marginTop: '15px'
       }
     }
-  }));
+  })));
 };
-export var WithHelperText = function WithHelperText() {
-  return ___EmotionJSX(NumberField, {
+export var WithHelperText = function WithHelperText(args) {
+  return ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Helper Text",
     defaultValue: 88,
     helperText: "Useful Text"
-  });
+  }));
 };
-export var Units = function Units() {
-  return ___EmotionJSX(NumberField, {
+export var Units = function Units(args) {
+  return ___EmotionJSX(NumberField, _extends({}, args, {
     label: "Package width",
     defaultValue: 4,
     formatOptions: {
@@ -204,5 +202,5 @@ export var Units = function Units() {
       unit: 'inch',
       unitDisplay: 'long'
     }
-  });
+  }));
 };

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -37,11 +37,9 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayPanelReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
-    }
+    },
+    codesandbox: false
   }
 };
 export var Default = function Default(_ref) {

package/lib/components/PageHeader/PageHeader.stories.js

@@ -12,9 +12,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PageHeaderReadMe, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Link', 'PageHeader']
       }
     }
   },
@@ -43,10 +45,10 @@ Default.parameters = {
     url: FIGMA_LINKS.pageHeader["default"]
   }
 };
-export var WithoutButton = function WithoutButton() {
-  return ___EmotionJSX(PageHeader, {
+export var WithoutButton = function WithoutButton(args) {
+  return ___EmotionJSX(PageHeader, _extends({
     title: "Lorem ipsum"
-  }, description, ___EmotionJSX(Link, {
+  }, args), description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
 };
@@ -56,13 +58,13 @@ WithoutButton.parameters = {
     url: FIGMA_LINKS.pageHeader.withoutButton
   }
 };
-export var WithoutLink = function WithoutLink() {
-  return ___EmotionJSX(PageHeader, {
+export var WithoutLink = function WithoutLink(args) {
+  return ___EmotionJSX(PageHeader, _extends({
     buttonProps: {
       onPress: function onPress() {}
     },
     title: "Lorem ipsum"
-  }, description);
+  }, args), description);
 };
 WithoutLink.parameters = {
   design: {
@@ -70,13 +72,13 @@ WithoutLink.parameters = {
     url: FIGMA_LINKS.pageHeader.withoutLink
   }
 };
-export var Customization = function Customization() {
-  return ___EmotionJSX(PageHeader, {
+export var Customization = function Customization(args) {
+  return ___EmotionJSX(PageHeader, _extends({
     buttonProps: {
       bg: 'critical.bright'
     },
     title: "Lorem ipsum"
-  }, description, ___EmotionJSX(Link, {
+  }, args), description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
 };

package/lib/components/Pagination/Pagination.stories.js

@@ -17,7 +17,8 @@ export default {
       page: function page() {
         return ___EmotionJSX(PaginationReadme, null);
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: {
     totalCount: {

package/lib/components/PanelHeader/PanelHeader.stories.js

@@ -17,9 +17,13 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PanelHeaderReadMe, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Breadcrumbs', 'Item', 'PanelHeader', 'PanelHeaderCloseButton', 'PanelHeaderMenu', 'PanelHeaderSwitchField'],
+        '@pingux/mdi-react/ChevronRightIcon': 'ChevronRightIcon',
+        '@pingux/mdi-react/AccountIcon': 'AccountIcon'
       }
     }
   },
@@ -78,8 +82,8 @@ WithControls.parameters = {
     url: FIGMA_LINKS.panelHeader.withControls
   }
 };
-export var WithImage = function WithImage() {
-  return ___EmotionJSX(PanelHeader, {
+export var WithImage = function WithImage(args) {
+  return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
       image: {
         src: pingImg,
@@ -88,7 +92,7 @@ export var WithImage = function WithImage() {
       },
       text: 'Fons Vernall'
     }
-  });
+  }));
 };
 WithImage.parameters = {
   design: {

package/lib/components/PanelHeader/controls/PanelHeaderCloseButton.stories.js

@@ -12,7 +12,8 @@ export default {
       source: {
         type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: iconButtonArgTypes
 };

package/lib/components/PanelHeader/controls/PanelHeaderMenu.stories.js

@@ -11,7 +11,8 @@ export default {
       source: {
         type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: menuArgTypes
 };

package/lib/components/PanelHeader/controls/PanelHeaderSwitchField.stories.js

@@ -22,7 +22,8 @@ export default {
       source: {
         type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: _objectSpread({}, switchFieldArgTypes)
 };

package/lib/components/PasswordField/PasswordField.stories.js

@@ -28,9 +28,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PasswordFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },

package/lib/components/PopoverMenu/PopoverMenu.stories.js

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
 import { action } from '@storybook/addon-actions';
@@ -16,9 +17,12 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverMenuReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Icon', 'IconButton', 'Item', 'Menu', 'OverlayProvider', 'PopoverMenu', 'Section', 'Text'],
+        '@pingux/mdi-react/DotsVerticalIcon': 'DotsVerticalIcon'
       }
     }
   },
@@ -71,13 +75,13 @@ Default.parameters = {
     url: FIGMA_LINKS.popoverMenu["default"]
   }
 };
-export var DefaultOpen = function DefaultOpen() {
+export var DefaultOpen = function DefaultOpen(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, _extends({}, args, {
       isDefaultOpen: true
-    }, ___EmotionJSX(IconButton, {
+    }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, ___EmotionJSX(Icon, {
@@ -135,13 +139,16 @@ export var Controlled = function Controlled() {
     }, "Delete")))))
   );
 };
-export var Placement = function Placement() {
+Controlled.parameters = {
+  codesandbox: false
+};
+export var Placement = function Placement(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, _extends({}, args, {
       direction: "left"
-    }, ___EmotionJSX(IconButton, {
+    }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, ___EmotionJSX(Icon, {
@@ -164,14 +171,14 @@ export var Placement = function Placement() {
     }, "Delete")))))
   );
 };
-export var NotFlippable = function NotFlippable() {
+export var NotFlippable = function NotFlippable(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, _extends({}, args, {
       direction: "left",
       isNotFlippable: true
-    }, ___EmotionJSX(IconButton, {
+    }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, ___EmotionJSX(Icon, {
@@ -194,13 +201,13 @@ export var NotFlippable = function NotFlippable() {
     }, "Delete")))))
   );
 };
-export var NotClosedOnSelect = function NotClosedOnSelect() {
+export var NotClosedOnSelect = function NotClosedOnSelect(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, _extends({}, args, {
       isNotClosedOnSelect: true
-    }, ___EmotionJSX(IconButton, {
+    }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, ___EmotionJSX(Icon, {

package/lib/components/ProgressBar/ProgressBar.stories.js

@@ -11,9 +11,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ProgressBarReadMe, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },

package/lib/components/RadioGroupField/RadioGroupField.stories.js

@@ -6,6 +6,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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; }
@@ -26,6 +27,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RadioGroupFieldReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RadioField', 'RadioGroupField']
+      }
     }
   },
   argTypes: _objectSpread(_objectSpread({
@@ -101,11 +107,11 @@ export var Controlled = function Controlled() {
     label: "C"
   }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(RadioGroupField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one",
     isRequired: true
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "A"
   }), ___EmotionJSX(RadioField, {
@@ -116,10 +122,10 @@ export var Required = function Required() {
     label: "C"
   }));
 };
-export var CheckedContent = function CheckedContent() {
-  return ___EmotionJSX(RadioGroupField, {
+export var CheckedContent = function CheckedContent(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one"
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "A",
     checkedContent: "You chose A..."
@@ -133,12 +139,12 @@ export var CheckedContent = function CheckedContent() {
     checkedContent: "You chose C..."
   }));
 };
-export var HelperText = function HelperText() {
-  return ___EmotionJSX(RadioGroupField, {
+export var HelperText = function HelperText(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one",
     helperText: "Here is some helpful text...",
     status: "error"
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "A"
   }), ___EmotionJSX(RadioField, {
@@ -161,11 +167,11 @@ HelperText.parameters = {
     }
   }
 };
-export var HorizontalOrientation = function HorizontalOrientation() {
-  return ___EmotionJSX(RadioGroupField, {
+export var HorizontalOrientation = function HorizontalOrientation(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one",
     orientation: "horizontal"
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "Option A"
   }), ___EmotionJSX(RadioField, {

package/lib/components/RangeCalendar/RangeCalendar.stories.js

@@ -26,9 +26,6 @@ export default {
     actions: {
       argTypesRegex: '^on.*'
     },
-    source: {
-      type: 'code'
-    },
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RangeCalendarReadme, null), ___EmotionJSX(DocsLayout, null));
@@ -45,14 +42,14 @@ export var Default = function Default(args) {
     "aria-label": "range-calendar"
   }));
 };
-export var DefaultValue = function DefaultValue() {
-  return ___EmotionJSX(RangeCalendar, {
+export var DefaultValue = function DefaultValue(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
     "aria-label": "calendar-with-default-vaue",
     defaultValue: {
       start: '2030-01-15',
       end: '2030-01-22'
     }
-  });
+  }));
 };
 export var Disabled = function Disabled(args) {
   return ___EmotionJSX(RangeCalendar, _extends({}, args, {
@@ -76,25 +73,25 @@ export var UnavailableDates = function UnavailableDates() {
     isDateUnavailable: isDateUnavailable
   });
 };
-export var MinimumDate = function MinimumDate() {
-  return ___EmotionJSX(RangeCalendar, {
+export var MinimumDate = function MinimumDate(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
     "aria-label": "range-calendar-component-min-date",
     minValue: "2030-01-15",
     defaultValue: {
       start: '2030-01-15',
       end: '2030-01-20'
     }
-  });
+  }));
 };
-export var MaximumDate = function MaximumDate() {
-  return ___EmotionJSX(RangeCalendar, {
+export var MaximumDate = function MaximumDate(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
     "aria-label": "range-calendar-component-max-date",
     defaultValue: {
       start: '2030-01-12',
       end: '2030-01-15'
     },
     maxValue: "2030-01-17"
-  });
+  }));
 };
 export var Controlled = function Controlled(args) {
   var _useState = useState({

package/lib/components/RequirementsList/RequirementsList.stories.js

@@ -14,6 +14,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RequirementsListReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RequirementsList']
+      }
     }
   },
   argTypes: {

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -13,9 +13,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RockerButtonGroupReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RockerButton', 'RockerButtonGroup']
       }
     }
   },
@@ -57,6 +59,9 @@ export var Uncontrolled = function Uncontrolled() {
     key: "maybe"
   }, "Maybe"));
 };
+Uncontrolled.parameters = {
+  codesandbox: false
+};
 export var Controlled = function Controlled() {
   var _useState = useState('and'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -76,6 +81,9 @@ export var Controlled = function Controlled() {
     key: "maybe"
   }, "Maybe"));
 };
+Controlled.parameters = {
+  codesandbox: false
+};
 export var DisabledSingleButton = function DisabledSingleButton() {
   return ___EmotionJSX(RockerButtonGroup, {
     defaultSelectedKey: "or",
@@ -91,6 +99,9 @@ export var DisabledSingleButton = function DisabledSingleButton() {
     key: "maybe"
   }, "Maybe"));
 };
+DisabledSingleButton.parameters = {
+  codesandbox: false
+};
 export var customColors = function customColors() {
   return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
     name: "and",
@@ -111,4 +122,7 @@ export var customColors = function customColors() {
       bg: '#e30080 !important'
     }
   }, "Maybe"));
+};
+customColors.parameters = {
+  codesandbox: false
 };

package/lib/components/SearchField/SearchField.stories.js

@@ -31,9 +31,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SearchFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['SearchField', 'Button', 'Icon', 'Box', 'Text']
       }
     }
   },
@@ -114,15 +116,15 @@ export var CustomIcon = function CustomIcon() {
   });
 };
 
-export var NoClearButton = function NoClearButton() {
-  return ___EmotionJSX(SearchField, {
+export var NoClearButton = function NoClearButton(args) {
+  return ___EmotionJSX(SearchField, _extends({}, args, {
     hasNoClearButton: true,
     "aria-label": "Search Users",
     placeholder: "Search Users",
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-  });
+  }));
 };
 
 export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {

package/lib/components/SelectField/Select.styles.js

@@ -71,6 +71,7 @@ select.transparent = {
 };
 select.arrow = {
   ml: 'auto',
+  pointerEvents: 'none',
   '.is-float-label &': {
     mt: -10
   },