@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/tour/Tour.js

@@ -0,0 +1,204 @@
+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 React, { useCallback, useEffect, useRef } from 'react';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { RefMapContext } from '@coinbase/cds-common/system/RefMapContext';
+import { TourContext } from '@coinbase/cds-common/tour/TourContext';
+import { useTour } from '@coinbase/cds-common/tour/useTour';
+import { arrow as arrowMiddleware, autoPlacement, autoUpdate, offset, shift, useFloating } from '@floating-ui/react-dom';
+import { animated, config as springConfig, useSpring } from '@react-spring/web';
+import { useScrollBlocker } from '../hooks/useScrollBlocker';
+import { FocusTrap } from '../overlays/FocusTrap';
+import { Portal } from '../overlays/Portal';
+import { modalContainerId } from '../overlays/PortalProvider';
+import { DefaultTourMask } from './DefaultTourMask';
+import { DefaultTourStepArrow } from './DefaultTourStepArrow';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const overlayContentContextValue = {
+  isTour: true
+};
+const containerCss = "containerCss-c1gsy0il";
+const defaultScrollOptions = {
+  behavior: 'smooth',
+  marginX: 100,
+  marginY: 100
+};
+
+/** Waits for scrolling to finish before resolving, up to maximum of 3 seconds. */
+const waitForScroll = async () => new Promise(resolve => {
+  let isScrolling;
+  let resolved = false;
+  const listener = () => {
+    clearTimeout(isScrolling);
+    isScrolling = setTimeout(() => {
+      window.removeEventListener('scroll', listener);
+      resolved = true;
+      resolve();
+    }, 50);
+  };
+  window.addEventListener('scroll', listener);
+  // This is a failsafe so we don't hang the whole app
+  // if `waitForScroll` is called when not scrolling.
+  // We assume scrolling won't last longer than 3 sec.
+  setTimeout(() => {
+    if (!resolved) resolve();
+  }, 3000);
+});
+const scrollIntoView = async (element, scrollOptions) => {
+  var _scrollOptions$margin, _scrollOptions$margin2;
+  if (!element) return;
+  const rect = element.getBoundingClientRect();
+  const shouldScrollUp = rect.top < 0;
+  const shouldScrollDown = rect.bottom > window.innerHeight;
+  const shouldScrollLeft = rect.left < 0;
+  const shouldScrollRight = rect.right > window.innerWidth;
+  const shouldScrollX = shouldScrollLeft && !shouldScrollRight || !shouldScrollLeft && shouldScrollRight;
+  const shouldScrollY = shouldScrollUp && !shouldScrollDown || !shouldScrollUp && shouldScrollDown;
+  if (!shouldScrollX && !shouldScrollY) return;
+  const marginX = (_scrollOptions$margin = scrollOptions === null || scrollOptions === void 0 ? void 0 : scrollOptions.marginX) !== null && _scrollOptions$margin !== void 0 ? _scrollOptions$margin : 0;
+  const marginY = (_scrollOptions$margin2 = scrollOptions === null || scrollOptions === void 0 ? void 0 : scrollOptions.marginY) !== null && _scrollOptions$margin2 !== void 0 ? _scrollOptions$margin2 : 0;
+  const targetX = rect.left + window.scrollX - marginX;
+  const targetY = rect.top + window.scrollY - marginY;
+  window.scrollTo({
+    top: shouldScrollY ? targetY : undefined,
+    left: shouldScrollX ? targetX : undefined,
+    behavior: 'smooth'
+  });
+  await waitForScroll();
+};
+const TourComponent = _ref => {
+  var _activeTourStep$Arrow, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
+  let {
+    steps,
+    activeTourStep,
+    onChange,
+    children,
+    TourMaskComponent = DefaultTourMask,
+    TourStepArrowComponent = DefaultTourStepArrow,
+    hideOverlay,
+    tourStepOffset = 24,
+    tourStepShift,
+    tourStepAutoPlacement,
+    tourMaskPadding,
+    tourMaskBorderRadius,
+    scrollOptions = defaultScrollOptions,
+    disablePortal,
+    disableAutoScroll,
+    accessibilityLabel,
+    accessibilityLabelledBy,
+    id,
+    testID
+  } = _ref;
+  const refMap = useRefMap();
+  const tourStepArrowRef = useRef(null);
+  const RenderedTourStep = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.Component;
+  const RenderedTourStepArrow = (_activeTourStep$Arrow = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.ArrowComponent) !== null && _activeTourStep$Arrow !== void 0 ? _activeTourStep$Arrow : TourStepArrowComponent;
+  const activeTourStepTarget = activeTourStep ? refMap.getRef(activeTourStep.id) : null;
+  const defaultTourStepShiftPadding = 32;
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData: {
+      arrow
+    }
+  } = useFloating({
+    middleware: [autoPlacement(tourStepAutoPlacement), offset(tourStepOffset), shift(tourStepShift !== null && tourStepShift !== void 0 ? tourStepShift : {
+      padding: defaultTourStepShiftPadding
+    }), arrowMiddleware({
+      element: tourStepArrowRef
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const [animation, animationApi] = useSpring(() => ({
+    from: {
+      opacity: 0
+    },
+    config: springConfig.slow
+  }), []);
+  const handleChange = useCallback(tourStep => {
+    // If the opacity is already 0, animating it to 0 does not trigger `onRest`
+    if (animation.opacity.get() === 0) return onChange(tourStep);
+    void animationApi.start({
+      to: {
+        opacity: 0
+      },
+      config: springConfig.stiff,
+      onRest: () => onChange(tourStep)
+    });
+  }, [animation.opacity, animationApi, onChange]);
+  const revealTourStep = useCallback(async () => {
+    var _activeTourStep$scrol;
+    if (!disableAutoScroll && !(activeTourStep !== null && activeTourStep !== void 0 && activeTourStep.disableAutoScroll)) await scrollIntoView(activeTourStepTarget, (_activeTourStep$scrol = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.scrollOptions) !== null && _activeTourStep$scrol !== void 0 ? _activeTourStep$scrol : scrollOptions);
+    refs.setReference(activeTourStepTarget);
+    void animationApi.start({
+      to: {
+        opacity: 1
+      },
+      config: springConfig.slow
+    });
+  }, [activeTourStep, activeTourStepTarget, refs, animationApi, disableAutoScroll, scrollOptions]);
+  const api = useTour({
+    steps,
+    activeTourStep,
+    onChange: handleChange
+  });
+  const blockScroll = useScrollBlocker();
+  useEffect(() => {
+    if (!activeTourStep) return;
+    blockScroll(true);
+    void revealTourStep();
+    return () => blockScroll(false);
+  }, [activeTourStep, blockScroll, revealTourStep]);
+  return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
+    value: overlayContentContextValue,
+    children: /*#__PURE__*/_jsx(RefMapContext.Provider, {
+      value: refMap,
+      children: /*#__PURE__*/_jsxs(TourContext.Provider, {
+        value: api,
+        children: [children, !!RenderedTourStep && /*#__PURE__*/_jsx(Portal, {
+          containerId: modalContainerId,
+          disablePortal: disablePortal,
+          children: /*#__PURE__*/_jsxs("div", {
+            "aria-label": accessibilityLabel,
+            "aria-labelledby": accessibilityLabelledBy,
+            "aria-modal": "true",
+            className: containerCss,
+            "data-testid": testID,
+            id: id,
+            role: "dialog",
+            children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) !== null && _activeTourStep$hideO !== void 0 ? _activeTourStep$hideO : hideOverlay) && activeTourStepTarget && /*#__PURE__*/_jsx(animated.div, {
+              style: animation,
+              children: /*#__PURE__*/_jsx(TourMaskComponent, {
+                activeTourStepTargetRect: activeTourStepTarget.getBoundingClientRect(),
+                borderRadius: (_activeTourStep$tourM = activeTourStep.tourMaskBorderRadius) !== null && _activeTourStep$tourM !== void 0 ? _activeTourStep$tourM : tourMaskBorderRadius,
+                padding: (_activeTourStep$tourM2 = activeTourStep.tourMaskPadding) !== null && _activeTourStep$tourM2 !== void 0 ? _activeTourStep$tourM2 : tourMaskPadding
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              ref: refs.setFloating,
+              style: floatingStyles,
+              children: /*#__PURE__*/_jsx(FocusTrap, {
+                children: /*#__PURE__*/_jsxs(animated.div, {
+                  style: animation,
+                  children: [/*#__PURE__*/_jsx(RenderedTourStepArrow, {
+                    ref: tourStepArrowRef,
+                    arrow: arrow,
+                    placement: placement,
+                    style: activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.arrowStyle
+                  }), /*#__PURE__*/_jsx(RenderedTourStep, _objectSpread({}, activeTourStep))]
+                })
+              })
+            })]
+          })
+        })]
+      })
+    })
+  });
+};
+TourComponent.displayName = 'Tour';
+export const Tour = TourComponent;
+import "./Tour.css";

package/esm/tour/TourStep.js

@@ -0,0 +1,22 @@
+import React, { useCallback } from 'react';
+import { useRefMapContext } from '@coinbase/cds-common/system/RefMapContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The TourStep component wraps the target element (children) that you want to highlight during a step
+ * in the tour. The active tour step content will be positioned relative to the target element when it
+ * is rendered.
+ */
+export const TourStep = _ref => {
+  let {
+    id,
+    children
+  } = _ref;
+  const {
+    registerRef
+  } = useRefMapContext();
+  const refCallback = useCallback(ref => ref && registerRef(id, ref), [registerRef, id]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: refCallback,
+    children: children
+  });
+};

package/esm/tour/index.js

@@ -0,0 +1,4 @@
+export * from './DefaultTourMask';
+export * from './DefaultTourStepArrow';
+export * from './Tour';
+export * from './TourStep';

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/esm/typography/Link.css

@@ -0,0 +1 @@
+.baseCss-b678mx9{cursor:pointer;-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial;}.baseCss-b678mx9:hover > *,.baseCss-b678mx9:active > *,.baseCss-b678mx9[data-active='true'] > *,.baseCss-b678mx9[data-loading='true'] > *{opacity:1;}.baseCss-b678mx9:focus-visible{outline-offset:0;border-radius:var(--borderRadius-100);}

package/esm/typography/Link.js

@@ -0,0 +1,62 @@
+const _excluded = ["children", "color", "font", "mono", "underline", "as", "className", "display", "borderWidth", "margin", "padding", "noScaleOnPress", "openInNewWindow"];
+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 React, { forwardRef, memo, useRef } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { cx } from '../cx';
+import { Pressable } from '../system/Pressable';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const linkDefaultElement = 'a';
+const baseCss = "baseCss-b678mx9";
+export const Link = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      // Text props
+      children,
+      color = 'fgPrimary',
+      font = 'inherit',
+      mono,
+      underline,
+      // Pressable props
+      as,
+      className,
+      display = 'inline',
+      borderWidth = 0,
+      margin = 0,
+      padding = 0,
+      noScaleOnPress = true,
+      openInNewWindow = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : linkDefaultElement;
+  const isAnchor = Component === 'a';
+  const linkRef = useRef(null);
+  const mergedRef = useMergeRefs(ref, linkRef);
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: mergedRef,
+    as: Component,
+    borderWidth: borderWidth,
+    className: cx(baseCss, className),
+    color: color,
+    display: display,
+    margin: margin,
+    noScaleOnPress: noScaleOnPress,
+    padding: padding,
+    target: isAnchor && openInNewWindow ? '_blank' : undefined
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Text, {
+      as: "span",
+      color: "currentColor",
+      font: font,
+      mono: mono,
+      underline: underline,
+      children: children
+    })
+  }));
+}));
+import "./Link.css";

package/esm/typography/Text.css

@@ -0,0 +1,11 @@
+.baseCss-bc3l1w2{margin:0;text-transform:var(--text-textTransform);}
+.monoCss-mtmutj8{font-family:var(--text-fontFamilyMono);}
+.numberOfLinesCss-n13nhnuq{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-numberOfLines);overflow:hidden;}
+.disabledCss-d1cjzz0c{opacity:0.5;cursor:default;pointer-events:none;touch-action:none;}
+.tabularNumbersCss-t1n226t6{font-variant-numeric:tabular-nums;}
+.slashedZeroCss-str7ii8{font-variant-numeric:slashed-zero;}
+.noWrapCss-n1uzz2yv{white-space:nowrap;}
+.truncate-t1wbwwx3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.clip-ctas4z3{overflow-wrap:break-word;text-overflow:clip;}
+.wrap-w1v7id0v{white-space:normal;overflow-wrap:break-word;}
+.break-b1iy2urk{overflow-wrap:anywhere;}@supports not (overflow-wrap:anywhere){.break-b1iy2urk{word-break:break-word;overflow-wrap:break-word;}}

package/esm/typography/Text.js

@@ -0,0 +1,77 @@
+const _excluded = ["as", "font", "fontFamily", "color", "display", "textAlign", "numberOfLines", "style", "className", "disabled", "dangerouslySetColor", "tabularNumbers", "slashedZero", "underline", "mono", "noWrap", "overflow", "textDecoration", "textTransform", "children", "renderEmptyNode"];
+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 React, { forwardRef, memo, useMemo } from 'react';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseCss = "baseCss-bc3l1w2";
+const monoCss = "monoCss-mtmutj8";
+const numberOfLinesCss = "numberOfLinesCss-n13nhnuq";
+const disabledCss = "disabledCss-d1cjzz0c";
+const tabularNumbersCss = "tabularNumbersCss-t1n226t6";
+const slashedZeroCss = "slashedZeroCss-str7ii8";
+const noWrapCss = "noWrapCss-n1uzz2yv";
+const overflowCss = {
+  truncate: "truncate-t1wbwwx3",
+  clip: "clip-ctas4z3",
+  wrap: "wrap-w1v7id0v",
+  break: "break-b1iy2urk"
+};
+export const textDefaultElement = 'span';
+export const Text = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'inherit',
+      fontFamily = font,
+      color = 'fg',
+      display = 'inline',
+      textAlign = 'start',
+      numberOfLines,
+      style,
+      className,
+      disabled,
+      dangerouslySetColor,
+      tabularNumbers,
+      slashedZero,
+      underline,
+      mono,
+      noWrap,
+      overflow,
+      textDecoration = underline ? 'underline' : 'none',
+      textTransform,
+      children,
+      renderEmptyNode = true
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textDefaultElement;
+  const textStyle = useMemo(() => _objectSpread({
+    color: dangerouslySetColor,
+    '--text-numberOfLines': numberOfLines,
+    '--text-textTransform': textTransform !== null && textTransform !== void 0 ? textTransform : "var(--textTransform-".concat(fontFamily, ")"),
+    '--text-fontFamilyMono': mono && "var(--fontFamilyMono-".concat(fontFamily, ")")
+  }, style), [dangerouslySetColor, numberOfLines, textTransform, mono, fontFamily, style]);
+  if (!renderEmptyNode && (children === null || children === undefined || children === '' || Number.isNaN(children))) return null;
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    as: Component,
+    className: cx(baseCss, numberOfLines && numberOfLinesCss, disabled && disabledCss, mono && monoCss, tabularNumbers && tabularNumbersCss, slashedZero && slashedZeroCss, noWrap && noWrapCss, overflow && overflowCss[overflow], className),
+    color: color,
+    display: display,
+    font: font,
+    fontFamily: fontFamily,
+    style: textStyle,
+    textAlign: textAlign,
+    textDecoration: textDecoration
+  }, props), {}, {
+    children: children
+  }));
+}));
+Text.displayName = 'Text';
+import "./Text.css";

package/esm/typography/TextBody.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textBodyDefaultElement = 'span';
+export const TextBody = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'body'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textBodyDefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextBody.displayName = 'TextBody';

package/esm/typography/TextCaption.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textCaptionDefaultElement = 'span';
+export const TextCaption = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'caption'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textCaptionDefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextCaption.displayName = 'TextCaption';

package/esm/typography/TextDisplay1.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textDisplay1DefaultElement = 'span';
+export const TextDisplay1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'display1'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textDisplay1DefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextDisplay1.displayName = 'TextDisplay1';

package/esm/typography/TextDisplay2.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textDisplay2DefaultElement = 'span';
+export const TextDisplay2 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'display2'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textDisplay2DefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextDisplay2.displayName = 'TextDisplay2';

package/esm/typography/TextDisplay3.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textDisplay3DefaultElement = 'span';
+export const TextDisplay3 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'display3'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textDisplay3DefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextDisplay3.displayName = 'TextDisplay3';

package/esm/typography/TextHeadline.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textHeadlineDefaultElement = 'span';
+export const TextHeadline = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'headline'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textHeadlineDefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextHeadline.displayName = 'TextHeadline';

package/esm/typography/TextInherited.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textInheritDefaultElement = 'span';
+export const TextInherited = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'inherit'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textInheritDefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextInherited.displayName = 'TextInherited';

package/esm/typography/TextLabel1.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "font"];
+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 React, { forwardRef } from 'react';
+import { Text } from './Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textLabel1DefaultElement = 'span';
+export const TextLabel1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      font = 'label1'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : textLabel1DefaultElement;
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    ref: ref,
+    as: Component,
+    font: font
+  }, props));
+});
+TextLabel1.displayName = 'TextLabel1';