@pingux/astro 1.41.0-alpha.1 → 1.41.0-alpha.3

package/lib/cjs/Patterns/ListAndPanelPattern.stories.hidden.js

@@ -0,0 +1,418 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+
+var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
+
+var _hooks = require("../hooks");
+
+var _images = require("../utils/devUtils/constants/images");
+
+var _index = require("../index");
+
+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: 'Design Patterns/List And Panel'
+};
+exports["default"] = _default;
+var usersInfo = [{
+  fullname: 'Fons, Vernall',
+  firstname: 'Fons',
+  lastname: 'Vernall',
+  email: 'fvernall0@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Priya, Ponnappa',
+  firstname: 'Priya',
+  lastname: 'Ponnappa',
+  email: 'Priyaponnappa0w@google.it',
+  hasIcon: false,
+  avatar: _images.pingImg
+}, {
+  fullname: 'French, Tamzyn',
+  firstname: 'French',
+  lastname: 'Tamzyn',
+  email: 'frenchtamzyn03@google.it',
+  hasIcon: false,
+  avatar: _images.pingImg
+}, {
+  fullname: 'John, Stone',
+  firstname: 'John',
+  lastname: 'Stone',
+  email: 'johnsstone2@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Ang, Li',
+  firstname: 'Ang',
+  lastname: 'Li',
+  email: 'Angli022@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Eugenia, Anders',
+  firstname: 'Eugenia',
+  lastname: 'Anders',
+  email: 'EugeniaaAnders2@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Trevor, Virtue',
+  firstname: 'Trevor',
+  lastname: 'Virtue',
+  email: 'TrevorVirtue33@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Salome, Simoes',
+  firstname: 'Salome',
+  lastname: 'Simoes',
+  email: 'SalomesimoesS@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Verona, Blair',
+  firstname: 'Verona',
+  lastname: 'Blair',
+  email: 'VeronaBlair01@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Tarryn, Campbell-Gillies',
+  firstname: 'Tarryn',
+  lastname: 'Campbell-Gillies',
+  email: 'tarryncampbellGillies@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Daly, Harry',
+  firstname: 'Daly',
+  lastname: 'Harry',
+  email: 'Daly93Harry@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Dallas, Potter',
+  firstname: 'Dallas',
+  lastname: 'Potter',
+  email: 'DallasPotter94@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  fullname: 'Alexander, Crawford',
+  firstname: 'Alexander',
+  lastname: 'Crawford',
+  email: 'alexCrawford011@google.it',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}];
+var sx = {
+  mainBox: {
+    bg: 'accent.99'
+  },
+  contentBox: {
+    p: 'md',
+    m: 'sm',
+    'justifyContent': 'center',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchFieldStyle: {
+    mb: 'sm'
+  },
+  searchFieldStyleProps: {
+    variant: 'input.small',
+    py: '11px',
+    pl: '42px',
+    pr: '47px',
+    height: '40px',
+    width: '400px'
+  },
+  listItemBoxStyle: {
+    alignSelf: 'center',
+    mr: 'auto'
+  },
+  emailBoxStyle: {
+    lineHeight: '15.51px'
+  },
+  iconStyle: {
+    alignSelf: 'center',
+    mr: 'sm',
+    color: 'accent.40'
+  },
+  avatarStyle: {
+    mr: 'md',
+    width: '25px',
+    height: '25px'
+  },
+  subtitleTextStyle: {
+    mt: '1'
+  },
+  switchFieldStyle: {
+    mt: 'xs'
+  },
+  dotsVerticalIcon: {
+    color: 'neutral.20'
+  },
+  closeIconStyle: {
+    color: 'neutral.20'
+  },
+  separatorStyle: {
+    m: '0',
+    bg: 'accent.90'
+  },
+  overlayPanelStyle: {
+    p: '0'
+  },
+  overlayPanelListItemBox: {
+    width: '100%'
+  },
+  listItemInPanelStyle: {
+    justifyContent: 'space-between'
+  },
+  tabsBox: {
+    px: 'md'
+  },
+  tabsListPropsStyle: {
+    justifyContent: 'center',
+    width: '100%'
+  },
+  tabsCreateIconButton: {
+    ml: 'auto'
+  },
+  tabsBoldText: {
+    mb: 'sm',
+    lineHeight: '15.87px',
+    fontWeight: '3',
+    fontSize: 'sm',
+    height: '16px'
+  },
+  tabsFirstAndLastNameText: {
+    mb: 'sm',
+    lineHeight: '15.87px',
+    fontWeight: '3',
+    fontSize: 'sm',
+    width: '68px',
+    height: '16px'
+  },
+  tabsEmailText: {
+    mb: 'sm',
+    lineHeight: '15.87px',
+    fontWeight: '3',
+    fontSize: 'sm',
+    width: '35px',
+    height: '16px'
+  },
+  tabsSelectedItemText: {
+    mb: 'sm',
+    height: '18px',
+    fontWeight: '0',
+    fontSize: 'md',
+    lineHeight: '17.89px'
+  }
+};
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(usersInfo),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      items = _useState2[0];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
+      state = _useOverlayPanelState.state,
+      onClose = _useOverlayPanelState.onClose;
+
+  var triggerRef = (0, _react.useRef)();
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.mainBox
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentBox
+  }, (0, _react2.jsx)(_index.SearchField, {
+    controlProps: {
+      sx: sx.searchFieldStyleProps
+    },
+    containerProps: {
+      sx: sx.searchFieldStyle
+    },
+    position: "fixed",
+    "aria-label": "Search",
+    placeholder: "Search"
+  }), (0, _map["default"])(items).call(items, function (person) {
+    return (0, _react2.jsx)(_index.Box, {
+      key: person.email,
+      sx: sx.emailBoxStyle
+    }, (0, _react2.jsx)(_index.ListItem, {
+      name: person.fullname,
+      onClick: function onClick() {
+        state.toggle();
+        setSelected(person);
+      }
+    }, (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      sx: sx.listItemBoxStyle
+    }, person.hasIcon ? (0, _react2.jsx)(_index.Icon, {
+      icon: person.avatar,
+      sx: sx.iconStyle,
+      size: 24
+    }) : (0, _react2.jsx)(_index.Avatar, {
+      sx: sx.avatarStyle,
+      src: person.avatar
+    }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+      variant: "itemTitle"
+    }, person.fullname), (0, _react2.jsx)(_index.Text, {
+      sx: sx.subtitleTextStyle,
+      variant: "itemSubtitle"
+    }, person.email))), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SwitchField, {
+      containerProps: {
+        sx: sx.switchFieldStyle
+      },
+      "aria-label": "active user",
+      isDefaultSelected: true,
+      label: "",
+      value: "my-switch"
+    })), (0, _react2.jsx)(_index.Box, {
+      alignSelf: "center",
+      isRow: true
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "Dots Vertical Icon"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      sx: sx.dotsVerticalIcon,
+      size: 24
+    }))))), (0, _react2.jsx)(_index.Separator, {
+      sx: sx.separatorStyle
+    }));
+  })), state.isOpen && (0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: state.isOpen,
+    state: state,
+    triggerRef: triggerRef,
+    sx: sx.overlayPanelStyle
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.overlayPanelListItemBox
+  }, (0, _react2.jsx)(_index.ListItem, {
+    name: selected.fullname,
+    sx: sx.listItemInPanelStyle
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, selected.hasIcon ? (0, _react2.jsx)(_index.Icon, {
+    icon: selected.avatar,
+    sx: sx.iconStyle,
+    size: 24
+  }) : (0, _react2.jsx)(_index.Avatar, {
+    sx: sx.avatarStyle,
+    src: selected.avatar
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "itemTitle"
+  }, selected.fullname), (0, _react2.jsx)(_index.Text, {
+    sx: sx.subtitleTextStyle,
+    variant: "itemSubtitle"
+  }, selected.email))), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "active user",
+    isDefaultSelected: true,
+    label: "",
+    value: "my-switch",
+    justifyContent: "center"
+  }), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Dots Vertical Icon"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DotsVerticalIcon["default"],
+    sx: sx.dotsVerticalIcon,
+    size: 24
+  })), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Close Icon Button",
+    onPress: function onPress() {
+      onClose(state, triggerRef);
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CloseIcon["default"],
+    sx: sx.closeIconStyle,
+    size: 24
+  }))))), (0, _react2.jsx)(_index.Box, {
+    sx: sx.tabsBox
+  }, (0, _react2.jsx)(_index.Tabs, {
+    items: items,
+    tabListProps: {
+      sx: sx.tabsListPropsStyle
+    }
+  }, (0, _react2.jsx)(_index.Tab, {
+    key: "tab1",
+    title: "Profile",
+    "aria-label": "Tab 1"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Create Icon",
+    variant: "inverted",
+    sx: sx.tabsCreateIconButton
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"]
+  }))), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsBoldText
+  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Fullname"
+  }, selected.fullname), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsBoldText
+  }, "First Name"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Firstname"
+  }, selected.firstname), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsBoldText
+  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Lastname"
+  }, selected.lastname), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsBoldText
+  }, "Email"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Email"
+  }, selected.email)), (0, _react2.jsx)(_index.Tab, {
+    key: "tab2",
+    title: "Group Memberships",
+    "aria-label": "Tab 2"
+  }, (0, _react2.jsx)(_index.Text, null, "Placeholder content for group membership tab")), (0, _react2.jsx)(_index.Tab, {
+    key: "tab3",
+    title: "Account Info",
+    "aria-label": "Tab 3"
+  }, (0, _react2.jsx)(_index.Text, null, "Placeholder content for account info tab"))))))));
+};
+
+exports.Default = Default;

package/lib/cjs/Patterns/MessagesPattern.stories.hidden.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../index");
+
+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: 'Design Patterns/Messages'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var messages = {
+    neutral: {
+      text: 'Here is a very neutral thing'
+    },
+    success: {
+      text: 'Form saved successfully',
+      status: 'success'
+    },
+    warning: {
+      text: 'Something unexpected happened.',
+      status: 'warning'
+    },
+    error: {
+      text: 'Not saved! We could not validate one of the fields. Please see inline message below.',
+      status: 'error'
+    }
+  };
+  var sx = {
+    mainContentBox: {
+      p: 'xx'
+    }
+  };
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      messageState = _useState2[0],
+      setMessageState = _useState2[1];
+
+  var handleUpdateMessage = function handleUpdateMessage(message) {
+    setMessageState(message);
+    (0, _setTimeout2["default"])(function () {
+      return setMessageState(null);
+    }, 3000);
+  };
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "lg",
+    sx: sx.mainContentBox
+  }, (0, _react2.jsx)(_index.Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.neutral);
+    }
+  }, "Neutral"), (0, _react2.jsx)(_index.Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.success);
+    }
+  }, "Success"), (0, _react2.jsx)(_index.Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.warning);
+    }
+  }, "Warning"), (0, _react2.jsx)(_index.Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.error);
+    }
+  }, "Error")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Messages, null, messageState && (0, _react2.jsx)(_index.Item, {
+    status: messageState.status
+  }, messageState.text))));
+};
+
+exports.Default = Default;

package/lib/cjs/Patterns/SaveBarPattern.stories.hidden.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _text = require("../utils/devUtils/constants/text");
+
+var _hooks = require("../hooks");
+
+var _index = require("../index");
+
+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: 'Design Patterns/Save Bar'
+};
+exports["default"] = _default;
+var sx = {
+  mainContentBox: {
+    p: 'xl',
+    justifyContent: 'center'
+  },
+  overlayPanelStyle: {
+    width: '720px',
+    height: '100%'
+  },
+  overlayPanelMainBox: {
+    height: '100%'
+  },
+  overlayPanelInnerBox: {
+    p: 'sm'
+  },
+  scrollboxStyle: {
+    m: 'sm'
+  },
+  saveButtonStyle: {
+    p: '10px 15px',
+    width: '65px',
+    height: '38px',
+    lineHeight: '18.31px'
+  },
+  cancelButtonStyle: {
+    m: 'sm',
+    lineHeight: '18.31px'
+  }
+};
+
+var Default = function Default() {
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
+      state = _useOverlayPanelState.state,
+      onClose = _useOverlayPanelState.onClose;
+
+  var triggerRef = (0, _react.useRef)();
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.mainContentBox
+  }, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+    ref: triggerRef,
+    onPress: state.open
+  }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: state.isOpen,
+    state: state,
+    triggerRef: triggerRef,
+    sx: sx.overlayPanelStyle
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.overlayPanelMainBox
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.overlayPanelInnerBox,
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.TextField, {
+    label: "Placeholder"
+  }), (0, _react2.jsx)(_index.TextField, {
+    label: "Placeholder"
+  }), (0, _react2.jsx)(_index.TextField, {
+    label: "Placeholder"
+  })), (0, _react2.jsx)(_index.ScrollBox, {
+    sx: sx.scrollboxStyle
+  }, (0, _react2.jsx)("p", null, _text.DummyText)), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    position: "fixed"
+  }, (0, _react2.jsx)(_index.Button, {
+    sx: sx.saveButtonStyle,
+    variant: "primary"
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
+    sx: sx.cancelButtonStyle,
+    variant: "link",
+    onPress: function onPress() {
+      onClose(state, triggerRef);
+    }
+  }, "Cancel")))))));
+};
+
+exports.Default = Default;