@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/layout/Spacer.js

@@ -0,0 +1,45 @@
+const _excluded = ["as", "flexGrow", "flexShrink", "flexBasis", "horizontal", "vertical", "maxHorizontal", "maxVertical", "minHorizontal", "minVertical"];
+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 { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const spacerDefaultElement = 'span';
+export const Spacer = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      horizontal,
+      vertical,
+      maxHorizontal,
+      maxVertical,
+      minHorizontal,
+      minVertical
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : spacerDefaultElement;
+  const isFixedSize = horizontal !== undefined || vertical !== undefined;
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    ref: ref,
+    "aria-hidden": "true",
+    as: Component,
+    flexBasis: flexBasis !== null && flexBasis !== void 0 ? flexBasis : isFixedSize ? undefined : 1,
+    flexGrow: flexGrow !== null && flexGrow !== void 0 ? flexGrow : isFixedSize ? 0 : 1,
+    flexShrink: flexShrink !== null && flexShrink !== void 0 ? flexShrink : isFixedSize ? 0 : 1,
+    height: vertical && "calc(".concat(vertical, " * var(--space-1))"),
+    maxHeight: maxVertical && "calc(".concat(maxVertical, " * var(--space-1))"),
+    maxWidth: maxHorizontal && "calc(".concat(maxHorizontal, " * var(--space-1))"),
+    minHeight: minVertical && "calc(".concat(minVertical, " * var(--space-1))"),
+    minWidth: minHorizontal && "calc(".concat(minHorizontal, " * var(--space-1))"),
+    role: "presentation",
+    width: horizontal && "calc(".concat(horizontal, " * var(--space-1))")
+  }, props));
+});
+Spacer.displayName = 'Spacer';

package/esm/layout/VStack.js

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

package/esm/layout/__figma__/Divider.figma.js

@@ -0,0 +1,31 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { Divider } from '../Divider';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Divider, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=283-19869&m=dev', {
+  imports: ["import { Divider } from '@coinbase/cds-web/layout/Divider';"],
+  props: {
+    color: figma.enum('type', {
+      line: 'bgLine',
+      lineHeavy: 'bgLineHeavy'
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Divider, _objectSpread({}, props))
+});
+figma.connect(Divider, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=60-654&m=dev', {
+  imports: ["import { Divider } from '@coinbase/cds-web/layout/Divider';"],
+  props: {
+    color: figma.enum('type', {
+      line: 'bgLine',
+      lineHeavy: 'bgLineHeavy'
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Divider, _objectSpread({
+    direction: "vertical"
+  }, props))
+});

package/esm/layout/__figma__/Fallback.figma.js

@@ -0,0 +1,25 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { Fallback } from '../Fallback';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Fallback, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=731-14951&m=dev', {
+  imports: ["import { Fallback } from '@coinbase/cds-web/layout/Fallback';"],
+  props: {
+    shape: figma.enum('shape', {
+      circle: 'circle',
+      rectangle: 'rectangle'
+    }),
+    width: figma.enum('shape', {
+      circle: 32,
+      rectangle: 150
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Fallback, _objectSpread({
+    height: 32
+  }, props))
+});

package/esm/layout/index.js

@@ -0,0 +1,9 @@
+export * from './Box';
+export * from './Divider';
+export * from './Fallback';
+export * from './Grid';
+export * from './GridColumn';
+export * from './Group';
+export * from './HStack';
+export * from './Spacer';
+export * from './VStack';

package/esm/loaders/CircularProgress.js

@@ -0,0 +1,51 @@
+import React, { memo, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CircularProgress = /*#__PURE__*/memo(_ref => {
+  let {
+    radius,
+    strokeWidth,
+    progress,
+    indeterminate = true,
+    testID
+  } = _ref;
+  const normalizedRadius = radius - strokeWidth * 2;
+  const circumference = normalizedRadius * 2 * Math.PI;
+  const [internalProgress, setProgress] = useState(indeterminate ? 0 : progress);
+  const [direction, setDirection] = useState('forward');
+
+  // Used for calculating the position of the circular progress based on
+  // the progress
+  const strokeDashoffset = circumference - (indeterminate ? internalProgress : progress) / 100 * circumference;
+  useEffect(() => {
+    if (indeterminate) {
+      // Toggle between circular progress going forward and backward
+      // to create a less abrupt animation experience
+      const timer = setInterval(() => {
+        if (internalProgress >= 100) setDirection('backward');
+        if (internalProgress <= 0) setDirection('forward');
+        setProgress(prog => direction === 'forward' ? prog + 1 : prog - 1);
+      }, 10);
+      return () => {
+        clearInterval(timer);
+      };
+    }
+    return undefined;
+  }, [indeterminate, internalProgress, direction]);
+  return /*#__PURE__*/_jsx("svg", {
+    "data-testid": testID,
+    height: radius * 2,
+    width: radius * 2,
+    children: /*#__PURE__*/_jsx("circle", {
+      cx: radius,
+      cy: radius,
+      "data-testid": "".concat(testID, "-circle"),
+      fill: "transparent",
+      r: normalizedRadius,
+      stroke: "blue",
+      strokeDasharray: "".concat(circumference, " ").concat(circumference),
+      strokeDashoffset: strokeDashoffset,
+      strokeWidth: strokeWidth
+    })
+  });
+});
+CircularProgress.displayName = 'CircularProgress';

package/esm/loaders/MaterialSpinner.css

@@ -0,0 +1 @@
+@layer cds{.circleCss-c1agunln{stroke-dasharray:180;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;}}

package/esm/loaders/MaterialSpinner.js

@@ -0,0 +1,68 @@
+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, { memo, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
+import { useMotionProps } from '../motion/useMotionProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const circleCss = "circleCss-c1agunln";
+/**
+ * @deprecated Use Spinner component instead
+ */
+export const MaterialSpinner = /*#__PURE__*/memo(_ref => {
+  let {
+    size,
+    color,
+    testID
+  } = _ref;
+  const svgMotionProps = useMotionProps({
+    animate: {
+      rotate: [0, 360]
+    },
+    transition: {
+      easing: 'linear',
+      duration: 'slow4',
+      repeat: Infinity
+    }
+  });
+  const circleMotionProps = useMotionProps({
+    initial: {
+      strokeDashoffset: 0
+    },
+    animate: {
+      rotate: [0, 135, 360],
+      strokeDashoffset: [180, 45, 180]
+    },
+    transition: {
+      easing: 'global',
+      duration: 'slow4',
+      repeat: Infinity,
+      times: [0, 0.5, 1]
+    }
+  });
+  const style = useMemo(() => ({
+    stroke: "var(--color-".concat(color, ")")
+  }), [color]);
+  return /*#__PURE__*/_jsx(motion.svg, _objectSpread(_objectSpread({
+    "data-testid": testID,
+    height: "".concat(size, "px"),
+    style: style,
+    viewBox: "0 0 66 66",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, svgMotionProps), {}, {
+    children: /*#__PURE__*/_jsx(motion.circle, _objectSpread(_objectSpread({
+      cx: "33",
+      cy: "33",
+      fill: "none",
+      r: "30",
+      strokeLinecap: "round",
+      strokeWidth: "6"
+    }, circleMotionProps), {}, {
+      className: circleCss
+    }))
+  }));
+});
+MaterialSpinner.displayName = 'MaterialSpinner';
+import "./MaterialSpinner.css";

package/esm/loaders/Spinner.css

@@ -0,0 +1,2 @@
+@layer cds{.baseCss-bggfp25{position:relative;border:1.1em solid;border-radius:50%;width:10em;height:10em;border-top-color:var(--color-bgAlternate);border-right-color:var(--color-bgAlternate);border-left-color:var(--color-bgAlternate);-webkit-animation:spin-baseCss-bggfp25 1000ms linear infinite;animation:spin-baseCss-bggfp25 1000ms linear infinite;}@-webkit-keyframes spin-baseCss-bggfp25{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes spin-baseCss-bggfp25{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.spinnerStatusCss-s1pli158{-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;}}

package/esm/loaders/Spinner.js

@@ -0,0 +1,45 @@
+const _excluded = ["color", "size", "style", "className", "accessibilityLabel", "testID"];
+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, { memo, useMemo } from 'react';
+import { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseCss = "baseCss-bggfp25";
+const spinnerStatusCss = "spinnerStatusCss-s1pli158";
+export const Spinner = /*#__PURE__*/memo(_ref => {
+  let {
+      color = 'fgMuted',
+      size,
+      style,
+      className,
+      accessibilityLabel,
+      testID
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const spinnerStyle = useMemo(() => _objectSpread({
+    fontSize: "".concat(size, "px")
+  }, style), [size, style]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    "aria-describedby": "spinnerStatus",
+    className: cx(baseCss, className),
+    color: color,
+    "data-testid": testID,
+    role: "status",
+    style: spinnerStyle
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("div", {
+      "aria-live": "polite",
+      className: spinnerStatusCss,
+      id: "spinnerStatus",
+      children: accessibilityLabel
+    })
+  }));
+});
+Spinner.displayName = 'Spinner';
+import "./Spinner.css";

package/esm/loaders/index.js

@@ -0,0 +1 @@
+export * from './Spinner';

package/esm/media/Avatar.css

@@ -0,0 +1,5 @@
+@layer cds{.wrapperCss-w1d48qa2[data-colorscheme='blue']{color:rgb(var(--blue60));}.wrapperCss-w1d48qa2[data-colorscheme='teal']{color:rgb(var(--teal60));}.wrapperCss-w1d48qa2[data-colorscheme='purple']{color:rgb(var(--purple60));}.wrapperCss-w1d48qa2[data-colorscheme='pink']{color:rgb(var(--pink60));}.wrapperCss-w1d48qa2[data-colorscheme='green']{color:rgb(var(--green60));}.wrapperCss-w1d48qa2[data-colorscheme='gray']{color:rgb(var(--gray60));}.wrapperCss-w1d48qa2[data-colorscheme='orange']{color:rgb(var(--orange60));}.wrapperCss-w1d48qa2[data-colorscheme='yellow']{color:rgb(var(--yellow60));}.wrapperCss-w1d48qa2[data-colorscheme='indigo']{color:rgb(var(--indigo60));}.wrapperCss-w1d48qa2[data-colorscheme='red']{color:rgb(var(--red60));}.wrapperCss-w1d48qa2[data-colorscheme='chartreuse']{color:rgb(var(--chartreuse60));}
+.avatarCss-arpga7l{overflow:hidden;border:solid 1px var(--avatar-borderColor);}.avatarCss-arpga7l[data-bordered='true']{border-width:2px;}.avatarCss-arpga7l[data-selected='true']{box-shadow:0 0 0 2px currentColor;}.avatarCss-arpga7l[data-shape='hexagon']{border:none;box-shadow:none;-webkit-clip-path:url(#cds-hexagon-avatar-clipper);clip-path:url(#cds-hexagon-avatar-clipper);}
+.circle-cfv7qmm{border-radius:100%;}
+.square-s917yqm{border-radius:4px;}
+.hexagon-hsci9wn{border-radius:0;}}

package/esm/media/Avatar.js

@@ -0,0 +1,130 @@
+const _excluded = ["src", "shape", "size", "borderColor", "colorScheme", "name", "selected", "alt", "testID", "dangerouslySetSize", "className", "style"];
+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, { memo, useMemo } from 'react';
+import { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { Text } from '../typography/Text';
+import { hexagonAvatarClipId, HexagonBorder } from './Hexagon';
+import { RemoteImage } from './RemoteImage';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const fallbackImageSrc = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAOAA4AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t80Zo4o4oAM0ZrsPBvw7m8Sxi7uZDa2GcKwHzyeu30HvXdf8Kp0Dytnlz7v+ennHP8Ah+lAHiuaM12XjL4dTeG4jd2sjXViDhiR88f1x1HvXG8UAGaKOKKADI9Kkt4vtFxFEOC7Bc/U4qPJ9KVXZGDLwwOQaAPpS0tY7G1ht4VCRRKEVcdABipc1meG9eh8RaRBeRMNzACRB1R+4/z2rU/OgCK5t47y3lgmUPFKpR1I6gjBr5uu4fst1NCefLdkz64OK+g/EWuQ+HtJnvJmHyjCIerv2Ar55klaWRnblmJJPqaAG5HpRRk+lFABzVnTtOutWvY7W0iMs8hwqj+Z9BVbB9a9o+GXhlNI0VL2VR9rvFD5PVY/4R+PX8vSgCfwX4EXwsDNJdSTXTrh1RisQ/Dv9T+QrrP89aT8qPyoA5Txr4FHilRNHdSQ3Ua4RHYtEfw7fUfrXjOo6dc6Tey2t3EYp4zgqf5j1FfSP5VxvxN8Mpq+jPfRKPtlmpfI6tH/ABD8Ov5+tAHi/NFGDRQBY060+3aja22f9dKsf5kD+tfSKIsaKigKqjAAHAFFFAC/j+lL+P6UUUAH4/pTXRZEZGG5WGCCOooooA+btRtPsOoXVtn/AFMrR/kSKKKKAP/Z';
+const wrapperCss = "wrapperCss-w1d48qa2";
+const avatarCss = "avatarCss-arpga7l";
+const borderRadiusCss = {
+  circle: "circle-cfv7qmm",
+  square: "square-s917yqm",
+  hexagon: "hexagon-hsci9wn"
+};
+export const Avatar = /*#__PURE__*/memo(_ref => {
+  var _ref2, _style$width;
+  let {
+      src,
+      shape = 'circle',
+      size = 'l',
+      borderColor,
+      colorScheme = 'blue',
+      name,
+      selected,
+      alt,
+      testID,
+      dangerouslySetSize,
+      className,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const avatarSize = "var(--avatarSize-".concat(size, ")");
+  const userProvidedSize = (_ref2 = (_style$width = style === null || style === void 0 ? void 0 : style.width) !== null && _style$width !== void 0 ? _style$width : style === null || style === void 0 ? void 0 : style.height) !== null && _ref2 !== void 0 ? _ref2 : dangerouslySetSize;
+  const computedSize = userProvidedSize !== null && userProvidedSize !== void 0 ? userProvidedSize : avatarSize;
+  const avatarText = useMemo(() => {
+    const placeholderLetter = name === null || name === void 0 ? void 0 : name.charAt(0);
+
+    // to maintain backwards compatibility with the dangerouslySetSize prop (now deprecated)
+    // we want to make sure the placeholder letter responds nicely with the set size
+    // we do this by picking an arbitrary constant to scale the text by
+    // we intentionally are not doing the same treatment for sizes set with the inline style prop
+    if (dangerouslySetSize) {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: "fgInverse",
+        display: "block",
+        font: "title2",
+        style: {
+          transform: "scale(".concat(dangerouslySetSize * 0.02, ")")
+        },
+        textAlign: "center",
+        transform: "uppercase",
+        children: placeholderLetter
+      });
+    }
+    const largeStandardSizes = ['xxxl', 'xxl'];
+    const showLargerFont = largeStandardSizes.includes(size);
+    return /*#__PURE__*/_jsx(Text, {
+      as: "p",
+      color: "fgInverse",
+      display: "block",
+      font: showLargerFont ? 'title2' : 'body',
+      textAlign: "center",
+      transform: "uppercase",
+      children: placeholderLetter
+    });
+  }, [name, size, dangerouslySetSize]);
+  const shouldShowBorder = Boolean((src || !name) && borderColor);
+  const avatarInlineStyles = useMemo(() => _objectSpread({
+    width: computedSize,
+    height: computedSize,
+    '--avatar-borderColor': shouldShowBorder ? "var(--color-".concat(borderColor, ")") : 'var(--color-transparent)'
+  }, style), [computedSize, style, shouldShowBorder, borderColor]);
+  return (
+    /*#__PURE__*/
+    // set position required to place the HexagonBorder elements properly
+    _jsxs(Box, _objectSpread(_objectSpread({
+      className: wrapperCss,
+      "data-colorscheme": colorScheme,
+      position: "relative",
+      testID: "".concat(testID, "-wrapper")
+    }, props), {}, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        className: cx(avatarCss, borderRadiusCss[shape], className),
+        "data-bordered": shouldShowBorder,
+        "data-selected": selected,
+        "data-shape": shape,
+        flexGrow: 0,
+        flexShrink: 0,
+        justifyContent: "center",
+        style: avatarInlineStyles,
+        testID: testID,
+        children: !!src || !name ? /*#__PURE__*/_jsx(RemoteImage, {
+          alt: alt,
+          height: computedSize,
+          shape: shape,
+          source: src || fallbackImageSrc,
+          width: computedSize
+        }) : /*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          background: "currentColor",
+          className: borderRadiusCss[shape],
+          flexGrow: 1,
+          height: "100%",
+          justifyContent: "center",
+          testID: "".concat(testID, "-fallback"),
+          children: avatarText
+        })
+      }), shape === 'hexagon' && selected && /*#__PURE__*/_jsx(HexagonBorder, {
+        offset: true,
+        size: size,
+        strokeColor: "currentColor"
+      }), shape === 'hexagon' && borderColor && /*#__PURE__*/_jsx(HexagonBorder, {
+        size: size,
+        strokeColor: "var(--color-".concat(borderColor, ")")
+      })]
+    }))
+  );
+});
+import "./Avatar.css";

package/esm/media/Hexagon.css

@@ -0,0 +1 @@
+@layer cds{.pathElementCss-p13ka9b8{fill:none;stroke-linecap:round;}}

package/esm/media/Hexagon.js

@@ -0,0 +1,158 @@
+var _getBrowserGlobals;
+import React, { memo, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { useIsBrowser } from '../hooks/useIsBrowser';
+import { Box } from '../layout/Box';
+import { getBrowserGlobals } from '../utils/browser';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const cdsHexagonTestId = 'cds-hexagon';
+export const hexagonClipPathContainerId = 'cds-hexagon-clipPath-container';
+export const hexagonAvatarClipId = 'cds-hexagon-avatar-clipper';
+
+/**
+ * We need to mount this to the DOM one time
+ * This is currently done in the PortalProvider
+ */
+export const HexagonAvatarClipPath = () => {
+  // to get scale values use equation 1/x, where x is height or width
+  const xScale = 1 / 66;
+  const yScale = 1 / 62;
+  return /*#__PURE__*/_jsx("svg", {
+    height: "0",
+    viewBox: "0 0 66 62",
+    width: "0",
+    children: /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
+        clipPathUnits: "objectBoundingBox",
+        id: hexagonAvatarClipId,
+        transform: "scale(".concat(xScale, " ").concat(yScale, ")"),
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M63.4372 22.8624C66.2475 27.781 66.2475 33.819 63.4372 38.7376L54.981 53.5376C52.1324 58.5231 46.8307 61.6 41.0887 61.6H24.4562C18.7142 61.6 13.4125 58.5231 10.564 53.5376L2.10774 38.7376C-0.702577 33.819 -0.702582 27.781 2.10774 22.8624L10.564 8.06243C13.4125 3.07687 18.7142 0 24.4562 0H41.0887C46.8307 0 52.1324 3.07686 54.981 8.06242L63.4372 22.8624Z"
+        })
+      })
+    })
+  });
+};
+HexagonAvatarClipPath.displayName = 'HexagonAvatarClipPath';
+
+/**
+ * Because the hexagon is not symmetrical, we have to get all mathy to scale the border appropriately
+ * Note: These values were manually set with my eyeballs
+ */
+export const hexagonSvgTransformStyles = {
+  standard: {
+    s: {
+      transform: "scale(1.1) translateX(-0.3px)"
+    },
+    m: {
+      transform: "scale(1.075) translateX(-0.25px)"
+    },
+    l: {
+      transform: "scaleY(1.075) translateX(-0.25px)"
+    },
+    xl: {
+      transform: "scaleY(1.075) translateX(-0.25px)"
+    },
+    xxl: {
+      transform: "scaleX(1.05) scaleY(1.075) translateX(-0.55px)"
+    },
+    xxxl: {
+      transform: "scaleX(1.05) scaleY(1.075) translateX(-0.55px)"
+    }
+  },
+  offset: {
+    s: {
+      transform: "scaleX(1.3) scaleY(1.325)"
+    },
+    m: {
+      transform: "scaleX(1.25) scaleY(1.275)"
+    },
+    l: {
+      transform: "scaleX(1.2) scaleY(1.25)"
+    },
+    xl: {
+      transform: "scaleX(1.175) scaleY(1.215)"
+    },
+    xxl: {
+      transform: "scaleX(1.15) scaleY(1.2125) translateX(-0.25px)"
+    },
+    xxxl: {
+      transform: "scaleX(1.125) scaleY(1.2) translateX(-0.25px)"
+    }
+  }
+};
+const pathElementCss = "pathElementCss-p13ka9b8";
+export const HexagonBorder = /*#__PURE__*/memo(_ref => {
+  let {
+    strokeColor,
+    offset,
+    size = 'l',
+    testID = cdsHexagonTestId,
+    className
+  } = _ref;
+  const svgTransformStyles = hexagonSvgTransformStyles[offset ? 'offset' : 'standard'][size];
+  return /*#__PURE__*/_jsx(Box, {
+    "aria-hidden": true,
+    className: className,
+    "data-testid": testID,
+    height: "100%",
+    position: "absolute",
+    width: "100%",
+    children: /*#__PURE__*/_jsx("svg", {
+      "data-testid": "".concat(testID, "-svg"),
+      style: svgTransformStyles,
+      viewBox: "-2.25 0 70 62",
+      children: /*#__PURE__*/_jsx("path", {
+        className: pathElementCss,
+        d: "M63.4372 22.8624C66.2475 27.781 66.2475 33.819 63.4372 38.7376L54.981 53.5376C52.1324 58.5231 46.8307 61.6 41.0887 61.6H24.4562C18.7142 61.6 13.4125 58.5231 10.564 53.5376L2.10774 38.7376C-0.702577 33.819 -0.702582 27.781 2.10774 22.8624L10.564 8.06243C13.4125 3.07687 18.7142 0 24.4562 0H41.0887C46.8307 0 52.1324 3.07686 54.981 8.06242L63.4372 22.8624Z",
+        "data-testid": "".concat(testID, "-path"),
+        stroke: strokeColor,
+        strokeWidth: 1.5,
+        vectorEffect: "non-scaling-stroke"
+      })
+    })
+  });
+});
+HexagonBorder.displayName = 'HexagonBorder';
+
+/**
+ * To prevent a flash when the DOM rehydrates and ensure we don't
+ * mount the clip path multiple times, we use a Portal for the
+ * browser, but mount directly to the dom for our first paint
+ * */
+const safeDocument = (_getBrowserGlobals = getBrowserGlobals()) === null || _getBrowserGlobals === void 0 ? void 0 : _getBrowserGlobals.document;
+export const HexagonClipPathPortal = /*#__PURE__*/memo(() => {
+  const hexagonClipPathContainer = useMemo(
+  // prevent duplicate portal root
+  () => safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.createElement('div'), []);
+  useEffect(() => {
+    const target = safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.body;
+
+    // prevent duplicate host
+    if (safeDocument !== null && safeDocument !== void 0 && safeDocument.getElementById(hexagonClipPathContainerId) || !hexagonClipPathContainer) return undefined;
+    hexagonClipPathContainer.id = hexagonClipPathContainerId;
+    hexagonClipPathContainer.style.height = '0px';
+    hexagonClipPathContainer.style.width = '0px';
+    hexagonClipPathContainer.ariaHidden = 'true';
+
+    // Append element to dom
+    target === null || target === void 0 || target.appendChild(hexagonClipPathContainer);
+
+    // Avoid removing child from other provider
+    // This happens when multiple PortalProvider are defined
+    return () => {
+      // Remove element from dom
+      hexagonClipPathContainer.remove();
+    };
+  }, [hexagonClipPathContainer]);
+  if (!hexagonClipPathContainer) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(HexagonAvatarClipPath, {}), hexagonClipPathContainer);
+});
+HexagonClipPathPortal.displayName = 'HexagonClipPathPortal';
+export const IsoHexagonClipPath = () => {
+  const isBrowser = useIsBrowser();
+  if (!isBrowser) return /*#__PURE__*/_jsx(HexagonAvatarClipPath, {});
+  return /*#__PURE__*/_jsx(HexagonClipPathPortal, {});
+};
+IsoHexagonClipPath.displayName = 'IsoHexagonClipPath';
+import "./Hexagon.css";

package/esm/media/RemoteImage.css

@@ -0,0 +1,10 @@
+@layer cds{.baseCss-bbzp605{display:block;}
+.cover-c1sg9xj9{object-fit:cover;}
+.contain-ct639h6{object-fit:contain;}
+.hexagonOverflowCss-h106avb5{overflow:visible;}
+.fallbackCss-fmd7ixe{background-repeat:no-repeat;background-size:cover;background-position:center;}.light .fallbackCss-fmd7ixe{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiM1QjYxNkUiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNSIgcj0iMyIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMTEiIHk9IjYiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik01IDE1TDguNSA5TDEyIDE1SDVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);}.dark .fallbackCss-fmd7ixe{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiM4QTkxOUUiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNSIgcj0iMyIgZmlsbD0iIzBBMEIwRCIvPgo8cmVjdCB4PSIxMSIgeT0iNiIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iIzBBMEIwRCIvPgo8cGF0aCBkPSJNNSAxNUw4LjUgOUwxMiAxNUg1WiIgZmlsbD0iIzBBMEIwRCIvPgo8L3N2Zz4K);}
+.circle-c1oh4yoq{border-radius:1e5px;}
+.squircle-s1exwfs9{border-radius:8px;}
+.square-s117wpuw{border-radius:4px;}
+.rectangle-r18cj7oi{border-radius:0;}
+.hexagon-h4bc24o{border-radius:0;}}