@coinbase/cds-web 9.1.2 → 9.2.0

package/esm/overlays/__figma__/Toast.figma.js

@@ -1,51 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useCallback } from 'react';
-import { figma } from '@figma/code-connect';
-import { Button } from '../../buttons';
-import { PortalProvider } from '../PortalProvider';
-import { Toast } from '../Toast';
-import { useToast } from '../useToast';
-import { jsx as _jsx } from "react/jsx-runtime";
-figma.connect(Toast, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=8500%3A674', {
-  imports: ["import { useToast } from '@coinbase/cds-web/overlays/useToast'"],
-  props: {
-    hideCloseButton: figma.boolean('close', {
-      true: undefined,
-      false: true
-    }),
-    content: figma.nestedProps('string.toast', {
-      string: figma.enum('Ready-made', {
-        Custom: figma.string('string'),
-        Transaction: figma.textContent('toast-label'),
-        'Copied to clipboard': figma.textContent('toast-label'),
-        Reward: figma.textContent('toast-label')
-      })
-    }),
-    action: figma.boolean('action', {
-      true: {
-        label: 'Button',
-        onPress: () => {}
-      },
-      false: undefined
-    })
-  },
-  example: () => {
-    const toast = useToast();
-    const handleShowToast = useCallback(() => {
-      toast.show('Toast content', {
-        action: {
-          label: 'Action',
-          onPress: () => {}
-        },
-        onWillHide: () => {},
-        onDidHide: () => {}
-      });
-    }, [toast]);
-    return /*#__PURE__*/_jsx(PortalProvider, {
-      children: /*#__PURE__*/_jsx(Button, {
-        onClick: handleShowToast,
-        children: "Show Toast"
-      })
-    });
-  }
-});

package/esm/overlays/modal/__figma__/FullscreenModal.figma.css

@@ -1 +0,0 @@
-@layer cds{.FullscreenModal-f10q9hg9{margin-inline-start:auto;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}}

package/esm/overlays/modal/__figma__/FullscreenModal.figma.js

@@ -1,104 +0,0 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useCallback, useRef, useState } from 'react';
-import { figma } from '@figma/code-connect';
-import { Button } from '../../../buttons';
-import { FullscreenModal } from '../FullscreenModal';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-figma.connect(FullscreenModal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=302%3A20262', {
-  imports: ["import { FullscreenModal } from '@coinbase/cds-web/overlays/Modal/FullscreenModal'"],
-  variant: {
-    layout: 'primary + secondary'
-  },
-  props: {
-    showSecondaryContentDivider: figma.boolean('show divider'),
-    secondaryContent: figma.instance('🔄 secondary content'),
-    primaryContent: figma.instance('🔄 primary content')
-  },
-  example: function Example(props) {
-    const [visible, setVisible] = useState(true);
-    const triggerRef = useRef(null);
-    const focusTrigger = useCallback(() => {
-      var _triggerRef$current;
-      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
-    }, []);
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        ref: triggerRef,
-        onClick: () => setVisible(true),
-        children: "Open Modal"
-      }), /*#__PURE__*/_jsx(FullscreenModal, _objectSpread({
-        onDidClose: focusTrigger,
-        onRequestClose: () => setVisible(false),
-        title: "Modal title",
-        visible: visible
-      }, props))]
-    });
-  }
-});
-figma.connect(FullscreenModal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=302%3A20262', {
-  imports: ["import { FullscreenModal } from '@coinbase/cds-web/overlays/Modal/FullscreenModal'"],
-  variant: {
-    layout: 'primary left aligned'
-  },
-  props: {
-    showSecondaryContentDivider: figma.boolean('show divider'),
-    primaryContent: figma.instance('🔄 primary content')
-  },
-  example: function Example(props) {
-    const [visible, setVisible] = useState(true);
-    const triggerRef = useRef(null);
-    const focusTrigger = useCallback(() => {
-      var _triggerRef$current2;
-      (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
-    }, []);
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        ref: triggerRef,
-        onClick: () => setVisible(true),
-        children: "Open Modal"
-      }), /*#__PURE__*/_jsx(FullscreenModal, _objectSpread({
-        onDidClose: focusTrigger,
-        onRequestClose: () => setVisible(false),
-        title: "Modal title",
-        visible: visible
-      }, props))]
-    });
-  }
-});
-figma.connect(FullscreenModal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=302%3A20262', {
-  imports: ["import { FullscreenModal } from '@coinbase/cds-web/overlays/Modal/FullscreenModal'"],
-  variant: {
-    layout: 'primary centered'
-  },
-  props: {
-    showSecondaryContentDivider: figma.boolean('show divider'),
-    secondaryContent: figma.instance('🔄 secondary content'),
-    primaryContent: figma.instance('🔄 primary content')
-  },
-  example: function Example(props) {
-    const [visible, setVisible] = useState(true);
-    const triggerRef = useRef(null);
-    const focusTrigger = useCallback(() => {
-      var _triggerRef$current3;
-      (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
-    }, []);
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        ref: triggerRef,
-        onClick: () => setVisible(true),
-        children: "Open Modal"
-      }), /*#__PURE__*/_jsx(FullscreenModal, _objectSpread({
-        contentContainerClassName: "FullscreenModal-f10q9hg9",
-        onDidClose: focusTrigger,
-        onRequestClose: () => setVisible(false),
-        title: "Modal title",
-        visible: visible
-      }, props))]
-    });
-  }
-});
-import "./FullscreenModal.figma.css";

package/esm/overlays/modal/__figma__/Modal.figma.js

@@ -1,81 +0,0 @@
-const _excluded = ["modalHeader", "modalFooter", "children"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { useCallback, useRef, useState } from 'react';
-import { figma } from '@figma/code-connect';
-import { Button } from '../../../buttons';
-import { Modal } from '../Modal';
-import { ModalBody } from '../ModalBody';
-import { ModalFooter } from '../ModalFooter';
-import { ModalHeader } from '../ModalHeader';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-figma.connect(Modal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=68-1065&m=dev', {
-  imports: ["import { Modal } from '@coinbase/cds-web/overlays/Modal/Modal'", "import { ModalHeader } from '@coinbase/cds-web/overlays/Modal/ModalHeader'", "import { ModalFooter } from '@coinbase/cds-web/overlays/Modal/ModalFooter'", "import { ModalBody } from '@coinbase/cds-web/overlays/Modal/ModalBody'"],
-  props: {
-    modalHeader: figma.nestedProps('.Modal Header', {
-      // onBackButtonPress: figma.boolean('show back button', {
-      //   true: () => {},
-      //   false: undefined,
-      // }),
-      title: figma.boolean('show title', {
-        true: figma.string('title'),
-        false: undefined
-      })
-    }),
-    modalFooter: figma.nestedProps('.Modal Footer', {
-      secondaryAction: figma.boolean('show secondary', {
-        true: /*#__PURE__*/_jsx(Button, {
-          variant: "secondary",
-          children: "Button"
-        }),
-        false: undefined
-      })
-    }),
-    children: figma.instance('🔄 replace me'),
-    hideDividers: figma.enum('height defined by', {
-      content: true,
-      container: undefined
-    })
-  },
-  example: function Example(_ref) {
-    let {
-        modalHeader,
-        modalFooter,
-        children
-      } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-    const [visible, setVisible] = useState(true);
-    const triggerRef = useRef(null);
-    const focusTrigger = useCallback(() => {
-      var _triggerRef$current;
-      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
-    }, []);
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        ref: triggerRef,
-        onClick: () => setVisible(true),
-        children: "Open Modal"
-      }), /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
-        onDidClose: focusTrigger,
-        onRequestClose: () => setVisible(false),
-        visible: visible
-      }, props), {}, {
-        children: [/*#__PURE__*/_jsx(ModalHeader, {
-          title: modalHeader.title
-        }), /*#__PURE__*/_jsx(ModalBody, {
-          children: children
-        }), /*#__PURE__*/_jsx(ModalFooter, {
-          primaryAction: /*#__PURE__*/_jsx(Button, {
-            children: "Button"
-          }),
-          secondaryAction: modalFooter.secondaryAction
-        })]
-      }))]
-    });
-  }
-});

package/esm/overlays/tooltip/__figma__/Tooltip.figma.js

@@ -1,93 +0,0 @@
-import { figma } from '@figma/code-connect';
-import { Button } from '../../../buttons';
-import { Text } from '../../../typography';
-import { Tooltip } from '../Tooltip';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=715%3A14162', {
-  imports: ["import { Tooltip } from '@coinbase/cds-web/overlays'", "import { Button } from '@coinbase/cds-web/buttons/Button'"],
-  variant: {
-    type: 'body'
-  },
-  props: {
-    content: figma.nestedProps('string.tooltip', {
-      description: figma.enum('Ready-made', {
-        Custom: figma.string('description'),
-        Congestion: figma.textContent('body-option'),
-        'Crypto prices': figma.textContent('body-option'),
-        'Exchange rate': figma.textContent('body-option'),
-        'Gain/loss': figma.textContent('body-option'),
-        'Max slippage': figma.textContent('body-option'),
-        Network: figma.textContent('body-option'),
-        'Network fee': figma.textContent('body-option'),
-        'Trading activity': figma.textContent('body-option'),
-        'Transaction estimate': figma.textContent('body-option')
-      })
-    })
-  },
-  example: _ref => {
-    let {
-      content
-    } = _ref;
-    return /*#__PURE__*/_jsx(Tooltip, {
-      content: content.description,
-      children: /*#__PURE__*/_jsx(Button, {
-        children: "Default"
-      })
-    });
-  }
-});
-figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=715%3A14162', {
-  imports: ["import { Tooltip } from '@coinbase/cds-web/overlays'", "import { Button } from '@coinbase/cds-web/buttons/Button'"],
-  variant: {
-    type: 'title + body'
-  },
-  props: {
-    content: figma.nestedProps('string.tooltip', {
-      title: figma.enum('Ready-made', {
-        Custom: figma.string('title'),
-        Congestion: figma.textContent('title-option'),
-        'Crypto prices': figma.textContent('title-option'),
-        'Exchange rate': figma.textContent('title-option'),
-        'Gain/loss': figma.textContent('title-option'),
-        'Max slippage': figma.textContent('title-option'),
-        Network: figma.textContent('title-option'),
-        'Network fee': figma.textContent('title-option'),
-        'Trading activity': figma.textContent('title-option'),
-        'Transaction estimate': figma.textContent('title-option')
-      }),
-      description: figma.enum('Ready-made', {
-        Custom: figma.string('description'),
-        Congestion: figma.textContent('body-option'),
-        'Crypto prices': figma.textContent('body-option'),
-        'Exchange rate': figma.textContent('body-option'),
-        'Gain/loss': figma.textContent('body-option'),
-        'Max slippage': figma.textContent('body-option'),
-        Network: figma.textContent('body-option'),
-        'Network fee': figma.textContent('body-option'),
-        'Trading activity': figma.textContent('body-option'),
-        'Transaction estimate': figma.textContent('body-option')
-      })
-    })
-  },
-  example: _ref2 => {
-    let {
-      content
-    } = _ref2;
-    return /*#__PURE__*/_jsx(Tooltip, {
-      content: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          as: "p",
-          font: "headline",
-          children: content.title
-        }), /*#__PURE__*/_jsx(Text, {
-          as: "p",
-          font: "body",
-          children: content.description
-        })]
-      }),
-      children: /*#__PURE__*/_jsx(Button, {
-        children: "Default"
-      })
-    });
-  }
-});

package/esm/overlays/tray/__figma__/Tray.figma.js

@@ -1,191 +0,0 @@
-import { useId, useState } from 'react';
-import { figma } from '@figma/code-connect';
-import { Button } from '../../../buttons';
-import { useBreakpoints } from '../../../hooks/useBreakpoints';
-import { Pictogram } from '../../../illustrations/Pictogram';
-import { Box } from '../../../layout';
-import { VStack } from '../../../layout/VStack';
-import { PageFooter } from '../../../page/PageFooter';
-import { Text } from '../../../typography/Text';
-import { Tray } from '../Tray';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const FIGMA_URL = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=74148-11495&m=dev';
-figma.connect(Tray, FIGMA_URL, {
-  variant: {
-    type: 'standard'
-  },
-  imports: ["import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'", "import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'"],
-  props: {
-    title: figma.textContent('SectionHeader')
-  },
-  example: function StandardExample(_ref) {
-    let {
-      title
-    } = _ref;
-    const [visible, setVisible] = useState(false);
-    const {
-      isPhone
-    } = useBreakpoints();
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: () => setVisible(true),
-        children: "Open Tray"
-      }), visible && /*#__PURE__*/_jsx(Tray, {
-        footer: _ref2 => {
-          let {
-            handleClose
-          } = _ref2;
-          return /*#__PURE__*/_jsx(PageFooter, {
-            borderedTop: true,
-            action: /*#__PURE__*/_jsx(Button, {
-              block: isPhone,
-              onClick: handleClose,
-              children: "Close"
-            }),
-            justifyContent: isPhone ? 'center' : 'flex-end'
-          });
-        },
-        onCloseComplete: () => setVisible(false),
-        pin: isPhone ? 'bottom' : 'right',
-        showHandleBar: isPhone,
-        title: title,
-        children: /*#__PURE__*/_jsx(Text, {
-          color: "fgMuted",
-          paddingBottom: 2,
-          children: "Content goes here."
-        })
-      })]
-    });
-  }
-});
-figma.connect(Tray, FIGMA_URL, {
-  variant: {
-    type: 'illustration'
-  },
-  imports: ["import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'", "import { Pictogram } from '@coinbase/cds-web/illustrations/Pictogram'", "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'"],
-  props: {
-    sectionTitle: figma.textContent('SectionHeader')
-  },
-  example: function IllustrationExample(_ref3) {
-    let {
-      sectionTitle
-    } = _ref3;
-    const [visible, setVisible] = useState(false);
-    const {
-      isPhone
-    } = useBreakpoints();
-    const titleId = useId();
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: () => setVisible(true),
-        children: "Open Tray"
-      }), visible && /*#__PURE__*/_jsx(Tray, {
-        accessibilityLabelledBy: titleId,
-        onCloseComplete: () => setVisible(false),
-        pin: isPhone ? 'bottom' : 'right',
-        showHandleBar: isPhone,
-        title: /*#__PURE__*/_jsxs(VStack, {
-          gap: {
-            phone: 1.5,
-            tablet: 2,
-            desktop: 2
-          },
-          children: [/*#__PURE__*/_jsx(Pictogram, {
-            name: "addWallet"
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "title3",
-            id: titleId,
-            children: sectionTitle
-          })]
-        }),
-        children: /*#__PURE__*/_jsx(Text, {
-          color: "fgMuted",
-          font: "body",
-          paddingBottom: 2,
-          children: "Content goes here."
-        })
-      })]
-    });
-  }
-});
-figma.connect(Tray, FIGMA_URL, {
-  variant: {
-    type: 'full-bleed image'
-  },
-  imports: ["import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'", "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'"],
-  props: {
-    sectionTitle: figma.textContent('SectionHeader')
-  },
-  example: function FullBleedImageExample(_ref4) {
-    let {
-      sectionTitle
-    } = _ref4;
-    const [visible, setVisible] = useState(false);
-    const {
-      isPhone
-    } = useBreakpoints();
-    const titleId = useId();
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: () => setVisible(true),
-        children: "Open Tray"
-      }), visible && /*#__PURE__*/_jsx(Tray, {
-        accessibilityLabelledBy: titleId,
-        header: /*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          id: titleId,
-          paddingTop: 2,
-          paddingX: {
-            base: 4,
-            phone: 3
-          },
-          children: sectionTitle
-        }),
-        onCloseComplete: () => setVisible(false),
-        pin: isPhone ? 'bottom' : 'right',
-        showHandleBar: isPhone,
-        styles: {
-          handleBar: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 1
-          },
-          closeButton: {
-            position: 'absolute',
-            top: 'var(--space-4)',
-            right: 'var(--space-4)',
-            zIndex: 1
-          },
-          header: {
-            paddingTop: 0
-          }
-        },
-        title: /*#__PURE__*/_jsx(Box, {
-          flexGrow: 1,
-          marginX: {
-            base: -4,
-            phone: -3
-          },
-          children: /*#__PURE__*/_jsx("img", {
-            alt: "Full Bleed",
-            height: 180,
-            src: "image.jpg",
-            style: {
-              objectFit: 'cover',
-              pointerEvents: 'none'
-            },
-            width: "100%"
-          })
-        }),
-        children: /*#__PURE__*/_jsx(Text, {
-          color: "fgMuted",
-          font: "body",
-          paddingBottom: 2,
-          children: "Content goes here."
-        })
-      })]
-    });
-  }
-});

package/esm/page/__figma__/PageFooter.figma.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import { figma } from '@figma/code-connect';
-import { Button } from '../../buttons/Button';
-import { ButtonGroup } from '../../buttons/ButtonGroup';
-import { PageFooter } from '../PageFooter';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const url = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266';
-figma.connect(PageFooter, url, {
-  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'"],
-  variant: {
-    '# of actions': '1'
-  },
-  props: {
-    action: figma.children('Button'),
-    legalText: figma.boolean('show legal text', {
-      true: 'Your legal text here.',
-      false: undefined
-    })
-  },
-  example: _ref => {
-    let {
-      legalText
-    } = _ref;
-    return /*#__PURE__*/_jsx(PageFooter, {
-      action: /*#__PURE__*/_jsx(Button, {
-        variant: "primary",
-        children: "Next"
-      }),
-      legalText: legalText
-    });
-  }
-});
-figma.connect(PageFooter, url, {
-  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'", "import { ButtonGroup } from '@coinbase/cds-web/buttons/ButtonGroup'"],
-  variant: {
-    '# of actions': '2'
-  },
-  props: {
-    legalText: figma.boolean('show legal text', {
-      true: 'Your legal text here.',
-      false: undefined
-    })
-  },
-  example: _ref2 => {
-    let {
-      legalText
-    } = _ref2;
-    return /*#__PURE__*/_jsx(PageFooter, {
-      action: /*#__PURE__*/_jsxs(ButtonGroup, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          variant: "secondary",
-          children: "Back"
-        }), /*#__PURE__*/_jsx(Button, {
-          variant: "primary",
-          children: "Next"
-        })]
-      }),
-      legalText: legalText
-    });
-  }
-});

package/esm/page/__figma__/PageHeader.figma.js

@@ -1,57 +0,0 @@
-import { figma } from '@figma/code-connect';
-import { Button, IconButton } from '../../buttons';
-import { HStack } from '../../layout';
-import { PageHeader } from '../PageHeader';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-figma.connect(PageHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3171', {
-  imports: ["import { PageHeader } from '@coinbase/cds-web/page/PageHeader'", "import { HStack } from '@coinbase/cds-web/layout/HStack'"],
-  props: {
-    start: figma.boolean('show start', {
-      true: figma.enum('type', {
-        L1: figma.children('Logo*'),
-        L2: /*#__PURE__*/_jsx(IconButton, {
-          compact: true,
-          name: "backArrow",
-          variant: "secondary"
-        })
-      }),
-      false: undefined
-    }),
-    title: figma.boolean('stepper', {
-      true: 'Stepper',
-      false: figma.boolean('show page title', {
-        true: 'Page title',
-        false: undefined
-      })
-    })
-  },
-  example: _ref => {
-    let {
-      title,
-      start
-    } = _ref;
-    return /*#__PURE__*/_jsx(PageHeader, {
-      end: /*#__PURE__*/_jsxs(HStack, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          compact: true,
-          transparent: true,
-          flush: "start",
-          variant: "primary",
-          children: "Button"
-        }), /*#__PURE__*/_jsx(IconButton, {
-          compact: true,
-          transparent: true,
-          name: "externalLink",
-          variant: "secondary"
-        }), /*#__PURE__*/_jsx(IconButton, {
-          compact: true,
-          transparent: true,
-          name: "close",
-          variant: "secondary"
-        })]
-      }),
-      start: start,
-      title: title
-    });
-  }
-});

package/esm/pagination/__figma__/Pagination.figma.js

@@ -1,22 +0,0 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { figma } from '@figma/code-connect';
-import { Pagination } from '../Pagination';
-import { jsx as _jsx } from "react/jsx-runtime";
-figma.connect(Pagination, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49607-6651&m=dev', {
-  imports: ["import { Pagination } from '@coinbase/cds-web/pagination/Pagination'"],
-  props: {
-    totalPages: figma.enum('number of pages', {
-      '5< pages': 5,
-      '5+ pages': 8,
-      '50+ pages': 100
-    })
-  },
-  example: props => /*#__PURE__*/_jsx(Pagination, _objectSpread({
-    activePage: 1,
-    onChange: () => {}
-  }, props))
-});