@parrot-co/parrot-ui 0.0.68 → 0.0.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.js CHANGED
@@ -4995,23 +4995,46 @@ function $c07c6db9734c74af$export$e6a97ba2cae5bb94({ items: items , render: rend
4995
4995
 
4996
4996
 
4997
4997
 
4998
- const $ceb05569908c0e0d$var$ModalOverlay = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
4998
+ const $ceb05569908c0e0d$var$ModalUnderlay = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
4999
4999
  position: "fixed",
5000
5000
  top: 0,
5001
5001
  right: 0,
5002
5002
  bottom: 0,
5003
5003
  left: 0,
5004
- display: "flex",
5005
- alignItems: "center",
5006
- justifyContent: "center",
5007
- background: "$blackA8"
5004
+ background: "$blackA8",
5005
+ width: "100vw",
5006
+ height: "100vh"
5007
+ });
5008
+ const $ceb05569908c0e0d$var$ModalContainer = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
5009
+ display: "grid",
5010
+ width: "100vw",
5011
+ height: "100vh",
5012
+ p: 12
5008
5013
  });
5009
5014
  const $ceb05569908c0e0d$var$ModalContent = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
5010
5015
  background: "white",
5011
- borderRadius: 12
5016
+ borderRadius: 12,
5017
+ display: "grid",
5018
+ gridTemplateRows: "1fr, 60px",
5019
+ flexDirection: "column",
5020
+ defaultVariants: {
5021
+ variant: "modal"
5022
+ },
5023
+ variants: {
5024
+ variant: {
5025
+ modal: {
5026
+ alignSelf: "center",
5027
+ justifySelf: "center"
5028
+ },
5029
+ drawer: {
5030
+ justifySelf: "end"
5031
+ }
5032
+ }
5033
+ }
5012
5034
  });
5013
5035
  const $ceb05569908c0e0d$var$ModalFooter = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
5014
- p: 16
5036
+ p: 16,
5037
+ alignSelf: "flex-end"
5015
5038
  });
5016
5039
  const $ceb05569908c0e0d$var$ModalHead = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
5017
5040
  p: 16,
@@ -5020,14 +5043,17 @@ const $ceb05569908c0e0d$var$ModalHead = (0, $80923bc9c1ba824c$export$3817b7a54a0
5020
5043
  const $ceb05569908c0e0d$var$ModalBody = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
5021
5044
  p: 16
5022
5045
  });
5023
- function $ceb05569908c0e0d$export$c6fdb837b070b4ff({ state: state , children: children , ...props }) {
5046
+ function $ceb05569908c0e0d$export$c6fdb837b070b4ff({ state: state , children: children , css: css , ...props }) {
5024
5047
  const modalRef = $E4F9t$react.useRef(null);
5025
5048
  const { modalProps: modalProps , underlayProps: underlayProps } = (0, $E4F9t$reactaria.useModalOverlay)(props, state, modalRef);
5026
5049
  if (!state.isOpen) return null;
5027
5050
  return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reactaria.Overlay), {
5028
- children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($ceb05569908c0e0d$var$ModalOverlay, {
5051
+ children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($ceb05569908c0e0d$var$ModalUnderlay, {
5052
+ className: "underlay",
5053
+ css: css,
5029
5054
  ...underlayProps,
5030
- children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
5055
+ children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($ceb05569908c0e0d$var$ModalContainer, {
5056
+ className: "modal-container",
5031
5057
  ...modalProps,
5032
5058
  ref: modalRef,
5033
5059
  children: children
@@ -5035,44 +5061,50 @@ function $ceb05569908c0e0d$export$c6fdb837b070b4ff({ state: state , children: ch
5035
5061
  })
5036
5062
  });
5037
5063
  }
5038
- function $ceb05569908c0e0d$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps }) {
5064
+ function $ceb05569908c0e0d$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps , variant: variant }) {
5039
5065
  const dialogRef = $E4F9t$react.useRef(null);
5040
5066
  const { dialogProps: dialogProps , titleProps: titleProps } = (0, $E4F9t$reactaria.useDialog)({
5041
5067
  role: "alertdialog"
5042
5068
  }, dialogRef);
5043
5069
  return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($ceb05569908c0e0d$var$ModalContent, {
5070
+ variant: variant,
5044
5071
  css: {
5045
5072
  width: width
5046
5073
  },
5047
5074
  ref: dialogRef,
5048
5075
  ...dialogProps,
5049
5076
  children: [
5050
- /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($ceb05569908c0e0d$var$ModalHead, {
5077
+ /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
5051
5078
  stack: true,
5052
- gap: 2,
5053
- className: "modal-head",
5054
5079
  children: [
5055
- title && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6fb5722ea7b379d7$export$2e2bcd8739ae039), {
5056
- weight: "medium",
5057
- size: "lg",
5058
- color: "black",
5059
- ...titleProps,
5060
- as: "div",
5061
- children: title
5080
+ /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($ceb05569908c0e0d$var$ModalHead, {
5081
+ stack: true,
5082
+ gap: 2,
5083
+ className: "modal-head",
5084
+ children: [
5085
+ title && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6fb5722ea7b379d7$export$2e2bcd8739ae039), {
5086
+ weight: "medium",
5087
+ size: "lg",
5088
+ color: "black",
5089
+ ...titleProps,
5090
+ as: "div",
5091
+ children: title
5092
+ }),
5093
+ description && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6fb5722ea7b379d7$export$2e2bcd8739ae039), {
5094
+ lineHeight: "base",
5095
+ size: "sm",
5096
+ color: "light",
5097
+ as: "div",
5098
+ children: description
5099
+ })
5100
+ ]
5062
5101
  }),
5063
- description && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6fb5722ea7b379d7$export$2e2bcd8739ae039), {
5064
- lineHeight: "base",
5065
- size: "sm",
5066
- color: "light",
5067
- as: "div",
5068
- children: description
5102
+ /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
5103
+ className: "modal-body",
5104
+ children: children
5069
5105
  })
5070
5106
  ]
5071
5107
  }),
5072
- /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
5073
- className: "modal-body",
5074
- children: children
5075
- }),
5076
5108
  (onConfirm || onCancel) && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($ceb05569908c0e0d$var$ModalFooter, {
5077
5109
  gap: 2,
5078
5110
  justify: "end",