@sproutsocial/seeds-react-card 1.0.0

package/dist/esm/index.js

@@ -0,0 +1,1357 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../node_modules/object-assign/index.js
+var require_object_assign = __commonJS({
+  "../../node_modules/object-assign/index.js"(exports, module) {
+    "use strict";
+    var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+    var hasOwnProperty = Object.prototype.hasOwnProperty;
+    var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+    function toObject(val) {
+      if (val === null || val === void 0) {
+        throw new TypeError("Object.assign cannot be called with null or undefined");
+      }
+      return Object(val);
+    }
+    function shouldUseNative() {
+      try {
+        if (!Object.assign) {
+          return false;
+        }
+        var test1 = new String("abc");
+        test1[5] = "de";
+        if (Object.getOwnPropertyNames(test1)[0] === "5") {
+          return false;
+        }
+        var test2 = {};
+        for (var i = 0; i < 10; i++) {
+          test2["_" + String.fromCharCode(i)] = i;
+        }
+        var order2 = Object.getOwnPropertyNames(test2).map(function(n) {
+          return test2[n];
+        });
+        if (order2.join("") !== "0123456789") {
+          return false;
+        }
+        var test3 = {};
+        "abcdefghijklmnopqrst".split("").forEach(function(letter) {
+          test3[letter] = letter;
+        });
+        if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
+          return false;
+        }
+        return true;
+      } catch (err) {
+        return false;
+      }
+    }
+    module.exports = shouldUseNative() ? Object.assign : function(target, source) {
+      var from;
+      var to = toObject(target);
+      var symbols;
+      for (var s = 1; s < arguments.length; s++) {
+        from = Object(arguments[s]);
+        for (var key in from) {
+          if (hasOwnProperty.call(from, key)) {
+            to[key] = from[key];
+          }
+        }
+        if (getOwnPropertySymbols) {
+          symbols = getOwnPropertySymbols(from);
+          for (var i = 0; i < symbols.length; i++) {
+            if (propIsEnumerable.call(from, symbols[i])) {
+              to[symbols[i]] = from[symbols[i]];
+            }
+          }
+        }
+      }
+      return to;
+    };
+  }
+});
+
+// src/Card.tsx
+import { useRef, useState } from "react";
+
+// src/styles.tsx
+import styled from "styled-components";
+
+// ../../node_modules/@styled-system/core/dist/index.esm.js
+var import_object_assign = __toESM(require_object_assign());
+var merge = function merge2(a, b) {
+  var result = (0, import_object_assign.default)({}, a, b);
+  for (var key in a) {
+    var _assign;
+    if (!a[key] || typeof b[key] !== "object")
+      continue;
+    (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
+  }
+  return result;
+};
+var sort = function sort2(obj) {
+  var next = {};
+  Object.keys(obj).sort(function(a, b) {
+    return a.localeCompare(b, void 0, {
+      numeric: true,
+      sensitivity: "base"
+    });
+  }).forEach(function(key) {
+    next[key] = obj[key];
+  });
+  return next;
+};
+var defaults = {
+  breakpoints: [40, 52, 64].map(function(n) {
+    return n + "em";
+  })
+};
+var createMediaQuery = function createMediaQuery2(n) {
+  return "@media screen and (min-width: " + n + ")";
+};
+var getValue = function getValue2(n, scale) {
+  return get(scale, n, n);
+};
+var get = function get2(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var createParser = function createParser2(config9) {
+  var cache = {};
+  var parse = function parse2(props) {
+    var styles = {};
+    var shouldSort = false;
+    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+    for (var key in props) {
+      if (!config9[key])
+        continue;
+      var sx = config9[key];
+      var raw = props[key];
+      var scale = get(props.theme, sx.scale, sx.defaults);
+      if (typeof raw === "object") {
+        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+        if (Array.isArray(raw)) {
+          cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
+          styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+          continue;
+        }
+        if (raw !== null) {
+          styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+          shouldSort = true;
+        }
+        continue;
+      }
+      (0, import_object_assign.default)(styles, sx(raw, scale, props));
+    }
+    if (shouldSort) {
+      styles = sort(styles);
+    }
+    return styles;
+  };
+  parse.config = config9;
+  parse.propNames = Object.keys(config9);
+  parse.cache = cache;
+  var keys = Object.keys(config9).filter(function(k) {
+    return k !== "config";
+  });
+  if (keys.length > 1) {
+    keys.forEach(function(key) {
+      var _createParser;
+      parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[key], _createParser));
+    });
+  }
+  return parse;
+};
+var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
+  var styles = {};
+  raw.slice(0, mediaQueries.length).forEach(function(value, i) {
+    var media = mediaQueries[i];
+    var style = sx(value, scale, _props);
+    if (!media) {
+      (0, import_object_assign.default)(styles, style);
+    } else {
+      var _assign2;
+      (0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
+    }
+  });
+  return styles;
+};
+var parseResponsiveObject = function parseResponsiveObject2(breakpoints, sx, scale, raw, _props) {
+  var styles = {};
+  for (var key in raw) {
+    var breakpoint = breakpoints[key];
+    var value = raw[key];
+    var style = sx(value, scale, _props);
+    if (!breakpoint) {
+      (0, import_object_assign.default)(styles, style);
+    } else {
+      var _assign3;
+      var media = createMediaQuery(breakpoint);
+      (0, import_object_assign.default)(styles, (_assign3 = {}, _assign3[media] = (0, import_object_assign.default)({}, styles[media], style), _assign3));
+    }
+  }
+  return styles;
+};
+var createStyleFunction = function createStyleFunction2(_ref) {
+  var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
+  properties = properties || [property];
+  var sx = function sx2(value, scale2, _props) {
+    var result = {};
+    var n = transform(value, scale2, _props);
+    if (n === null)
+      return;
+    properties.forEach(function(prop) {
+      result[prop] = n;
+    });
+    return result;
+  };
+  sx.scale = scale;
+  sx.defaults = defaultScale;
+  return sx;
+};
+var system = function system2(args) {
+  if (args === void 0) {
+    args = {};
+  }
+  var config9 = {};
+  Object.keys(args).forEach(function(key) {
+    var conf = args[key];
+    if (conf === true) {
+      config9[key] = createStyleFunction({
+        property: key,
+        scale: key
+      });
+      return;
+    }
+    if (typeof conf === "function") {
+      config9[key] = conf;
+      return;
+    }
+    config9[key] = createStyleFunction(conf);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+var compose = function compose2() {
+  var config9 = {};
+  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
+    parsers[_key] = arguments[_key];
+  }
+  parsers.forEach(function(parser2) {
+    if (!parser2 || !parser2.config)
+      return;
+    (0, import_object_assign.default)(config9, parser2.config);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+
+// ../../node_modules/@styled-system/layout/dist/index.esm.js
+var isNumber = function isNumber2(n) {
+  return typeof n === "number" && !isNaN(n);
+};
+var getWidth = function getWidth2(n, scale) {
+  return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
+};
+var config = {
+  width: {
+    property: "width",
+    scale: "sizes",
+    transform: getWidth
+  },
+  height: {
+    property: "height",
+    scale: "sizes"
+  },
+  minWidth: {
+    property: "minWidth",
+    scale: "sizes"
+  },
+  minHeight: {
+    property: "minHeight",
+    scale: "sizes"
+  },
+  maxWidth: {
+    property: "maxWidth",
+    scale: "sizes"
+  },
+  maxHeight: {
+    property: "maxHeight",
+    scale: "sizes"
+  },
+  size: {
+    properties: ["width", "height"],
+    scale: "sizes"
+  },
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  display: true,
+  verticalAlign: true
+};
+var layout = system(config);
+var index_esm_default = layout;
+
+// ../../node_modules/@styled-system/color/dist/index.esm.js
+var config2 = {
+  color: {
+    property: "color",
+    scale: "colors"
+  },
+  backgroundColor: {
+    property: "backgroundColor",
+    scale: "colors"
+  },
+  opacity: true
+};
+config2.bg = config2.backgroundColor;
+var color = system(config2);
+var index_esm_default2 = color;
+
+// ../../node_modules/@styled-system/typography/dist/index.esm.js
+var defaults2 = {
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var config3 = {
+  fontFamily: {
+    property: "fontFamily",
+    scale: "fonts"
+  },
+  fontSize: {
+    property: "fontSize",
+    scale: "fontSizes",
+    defaultScale: defaults2.fontSizes
+  },
+  fontWeight: {
+    property: "fontWeight",
+    scale: "fontWeights"
+  },
+  lineHeight: {
+    property: "lineHeight",
+    scale: "lineHeights"
+  },
+  letterSpacing: {
+    property: "letterSpacing",
+    scale: "letterSpacings"
+  },
+  textAlign: true,
+  fontStyle: true
+};
+var typography = system(config3);
+var index_esm_default3 = typography;
+
+// ../../node_modules/@styled-system/flexbox/dist/index.esm.js
+var config4 = {
+  alignItems: true,
+  alignContent: true,
+  justifyItems: true,
+  justifyContent: true,
+  flexWrap: true,
+  flexDirection: true,
+  // item
+  flex: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: true,
+  justifySelf: true,
+  alignSelf: true,
+  order: true
+};
+var flexbox = system(config4);
+var index_esm_default4 = flexbox;
+
+// ../../node_modules/@styled-system/grid/dist/index.esm.js
+var defaults3 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config5 = {
+  gridGap: {
+    property: "gridGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridColumnGap: {
+    property: "gridColumnGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridRowGap: {
+    property: "gridRowGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridAutoRows: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var grid = system(config5);
+var index_esm_default5 = grid;
+
+// ../../node_modules/@styled-system/border/dist/index.esm.js
+var config6 = {
+  border: {
+    property: "border",
+    scale: "borders"
+  },
+  borderWidth: {
+    property: "borderWidth",
+    scale: "borderWidths"
+  },
+  borderStyle: {
+    property: "borderStyle",
+    scale: "borderStyles"
+  },
+  borderColor: {
+    property: "borderColor",
+    scale: "colors"
+  },
+  borderRadius: {
+    property: "borderRadius",
+    scale: "radii"
+  },
+  borderTop: {
+    property: "borderTop",
+    scale: "borders"
+  },
+  borderTopLeftRadius: {
+    property: "borderTopLeftRadius",
+    scale: "radii"
+  },
+  borderTopRightRadius: {
+    property: "borderTopRightRadius",
+    scale: "radii"
+  },
+  borderRight: {
+    property: "borderRight",
+    scale: "borders"
+  },
+  borderBottom: {
+    property: "borderBottom",
+    scale: "borders"
+  },
+  borderBottomLeftRadius: {
+    property: "borderBottomLeftRadius",
+    scale: "radii"
+  },
+  borderBottomRightRadius: {
+    property: "borderBottomRightRadius",
+    scale: "radii"
+  },
+  borderLeft: {
+    property: "borderLeft",
+    scale: "borders"
+  },
+  borderX: {
+    properties: ["borderLeft", "borderRight"],
+    scale: "borders"
+  },
+  borderY: {
+    properties: ["borderTop", "borderBottom"],
+    scale: "borders"
+  }
+};
+config6.borderTopWidth = {
+  property: "borderTopWidth",
+  scale: "borderWidths"
+};
+config6.borderTopColor = {
+  property: "borderTopColor",
+  scale: "colors"
+};
+config6.borderTopStyle = {
+  property: "borderTopStyle",
+  scale: "borderStyles"
+};
+config6.borderTopLeftRadius = {
+  property: "borderTopLeftRadius",
+  scale: "radii"
+};
+config6.borderTopRightRadius = {
+  property: "borderTopRightRadius",
+  scale: "radii"
+};
+config6.borderBottomWidth = {
+  property: "borderBottomWidth",
+  scale: "borderWidths"
+};
+config6.borderBottomColor = {
+  property: "borderBottomColor",
+  scale: "colors"
+};
+config6.borderBottomStyle = {
+  property: "borderBottomStyle",
+  scale: "borderStyles"
+};
+config6.borderBottomLeftRadius = {
+  property: "borderBottomLeftRadius",
+  scale: "radii"
+};
+config6.borderBottomRightRadius = {
+  property: "borderBottomRightRadius",
+  scale: "radii"
+};
+config6.borderLeftWidth = {
+  property: "borderLeftWidth",
+  scale: "borderWidths"
+};
+config6.borderLeftColor = {
+  property: "borderLeftColor",
+  scale: "colors"
+};
+config6.borderLeftStyle = {
+  property: "borderLeftStyle",
+  scale: "borderStyles"
+};
+config6.borderRightWidth = {
+  property: "borderRightWidth",
+  scale: "borderWidths"
+};
+config6.borderRightColor = {
+  property: "borderRightColor",
+  scale: "colors"
+};
+config6.borderRightStyle = {
+  property: "borderRightStyle",
+  scale: "borderStyles"
+};
+var border = system(config6);
+var index_esm_default6 = border;
+
+// ../../node_modules/@styled-system/background/dist/index.esm.js
+var config7 = {
+  background: true,
+  backgroundImage: true,
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true
+};
+config7.bgImage = config7.backgroundImage;
+config7.bgSize = config7.backgroundSize;
+config7.bgPosition = config7.backgroundPosition;
+config7.bgRepeat = config7.backgroundRepeat;
+var background = system(config7);
+var index_esm_default7 = background;
+
+// ../../node_modules/@styled-system/position/dist/index.esm.js
+var defaults4 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config8 = {
+  position: true,
+  zIndex: {
+    property: "zIndex",
+    scale: "zIndices"
+  },
+  top: {
+    property: "top",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  right: {
+    property: "right",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  bottom: {
+    property: "bottom",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  left: {
+    property: "left",
+    scale: "space",
+    defaultScale: defaults4.space
+  }
+};
+var position = system(config8);
+var index_esm_default8 = position;
+
+// ../../node_modules/@styled-system/space/dist/index.esm.js
+var defaults5 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var isNumber3 = function isNumber4(n) {
+  return typeof n === "number" && !isNaN(n);
+};
+var getMargin = function getMargin2(n, scale) {
+  if (!isNumber3(n)) {
+    return get(scale, n, n);
+  }
+  var isNegative = n < 0;
+  var absolute = Math.abs(n);
+  var value = get(scale, absolute, absolute);
+  if (!isNumber3(value)) {
+    return isNegative ? "-" + value : value;
+  }
+  return value * (isNegative ? -1 : 1);
+};
+var configs = {};
+configs.margin = {
+  margin: {
+    property: "margin",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginTop: {
+    property: "marginTop",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginRight: {
+    property: "marginRight",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginBottom: {
+    property: "marginBottom",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginLeft: {
+    property: "marginLeft",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginX: {
+    properties: ["marginLeft", "marginRight"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginY: {
+    properties: ["marginTop", "marginBottom"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  }
+};
+configs.margin.m = configs.margin.margin;
+configs.margin.mt = configs.margin.marginTop;
+configs.margin.mr = configs.margin.marginRight;
+configs.margin.mb = configs.margin.marginBottom;
+configs.margin.ml = configs.margin.marginLeft;
+configs.margin.mx = configs.margin.marginX;
+configs.margin.my = configs.margin.marginY;
+configs.padding = {
+  padding: {
+    property: "padding",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingTop: {
+    property: "paddingTop",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingRight: {
+    property: "paddingRight",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingBottom: {
+    property: "paddingBottom",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingLeft: {
+    property: "paddingLeft",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingX: {
+    properties: ["paddingLeft", "paddingRight"],
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingY: {
+    properties: ["paddingTop", "paddingBottom"],
+    scale: "space",
+    defaultScale: defaults5.space
+  }
+};
+configs.padding.p = configs.padding.padding;
+configs.padding.pt = configs.padding.paddingTop;
+configs.padding.pr = configs.padding.paddingRight;
+configs.padding.pb = configs.padding.paddingBottom;
+configs.padding.pl = configs.padding.paddingLeft;
+configs.padding.px = configs.padding.paddingX;
+configs.padding.py = configs.padding.paddingY;
+var margin = system(configs.margin);
+var padding = system(configs.padding);
+var space = compose(margin, padding);
+
+// ../../node_modules/@styled-system/shadow/dist/index.esm.js
+var shadow = system({
+  boxShadow: {
+    property: "boxShadow",
+    scale: "shadows"
+  },
+  textShadow: {
+    property: "textShadow",
+    scale: "shadows"
+  }
+});
+
+// ../../node_modules/@styled-system/css/dist/index.esm.js
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var get3 = function get4(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var defaultBreakpoints = [40, 52, 64].map(function(n) {
+  return n + "em";
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var aliases = {
+  bg: "backgroundColor",
+  m: "margin",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  mx: "marginX",
+  my: "marginY",
+  p: "padding",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  px: "paddingX",
+  py: "paddingY"
+};
+var multiples = {
+  marginX: ["marginLeft", "marginRight"],
+  marginY: ["marginTop", "marginBottom"],
+  paddingX: ["paddingLeft", "paddingRight"],
+  paddingY: ["paddingTop", "paddingBottom"],
+  size: ["width", "height"]
+};
+var scales = {
+  color: "colors",
+  backgroundColor: "colors",
+  borderColor: "colors",
+  margin: "space",
+  marginTop: "space",
+  marginRight: "space",
+  marginBottom: "space",
+  marginLeft: "space",
+  marginX: "space",
+  marginY: "space",
+  padding: "space",
+  paddingTop: "space",
+  paddingRight: "space",
+  paddingBottom: "space",
+  paddingLeft: "space",
+  paddingX: "space",
+  paddingY: "space",
+  top: "space",
+  right: "space",
+  bottom: "space",
+  left: "space",
+  gridGap: "space",
+  gridColumnGap: "space",
+  gridRowGap: "space",
+  gap: "space",
+  columnGap: "space",
+  rowGap: "space",
+  fontFamily: "fonts",
+  fontSize: "fontSizes",
+  fontWeight: "fontWeights",
+  lineHeight: "lineHeights",
+  letterSpacing: "letterSpacings",
+  border: "borders",
+  borderTop: "borders",
+  borderRight: "borders",
+  borderBottom: "borders",
+  borderLeft: "borders",
+  borderWidth: "borderWidths",
+  borderStyle: "borderStyles",
+  borderRadius: "radii",
+  borderTopRightRadius: "radii",
+  borderTopLeftRadius: "radii",
+  borderBottomRightRadius: "radii",
+  borderBottomLeftRadius: "radii",
+  borderTopWidth: "borderWidths",
+  borderTopColor: "colors",
+  borderTopStyle: "borderStyles",
+  borderBottomWidth: "borderWidths",
+  borderBottomColor: "colors",
+  borderBottomStyle: "borderStyles",
+  borderLeftWidth: "borderWidths",
+  borderLeftColor: "colors",
+  borderLeftStyle: "borderStyles",
+  borderRightWidth: "borderWidths",
+  borderRightColor: "colors",
+  borderRightStyle: "borderStyles",
+  outlineColor: "colors",
+  boxShadow: "shadows",
+  textShadow: "shadows",
+  zIndex: "zIndices",
+  width: "sizes",
+  minWidth: "sizes",
+  maxWidth: "sizes",
+  height: "sizes",
+  minHeight: "sizes",
+  maxHeight: "sizes",
+  flexBasis: "sizes",
+  size: "sizes",
+  // svg
+  fill: "colors",
+  stroke: "colors"
+};
+var positiveOrNegative = function positiveOrNegative2(scale, value) {
+  if (typeof value !== "number" || value >= 0) {
+    return get3(scale, value, value);
+  }
+  var absolute = Math.abs(value);
+  var n = get3(scale, absolute, absolute);
+  if (typeof n === "string")
+    return "-" + n;
+  return n * -1;
+};
+var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
+  var _extends2;
+  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+}, {});
+var responsive = function responsive2(styles) {
+  return function(theme) {
+    var next = {};
+    var breakpoints = get3(theme, "breakpoints", defaultBreakpoints);
+    var mediaQueries = [null].concat(breakpoints.map(function(n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
+    for (var key in styles) {
+      var value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
+      if (value == null)
+        continue;
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+        next[media] = next[media] || {};
+        if (value[i] == null)
+          continue;
+        next[media][key] = value[i];
+      }
+    }
+    return next;
+  };
+};
+var css = function css2(args) {
+  return function(props) {
+    if (props === void 0) {
+      props = {};
+    }
+    var theme = _extends({}, defaultTheme, {}, props.theme || props);
+    var result = {};
+    var obj = typeof args === "function" ? args(theme) : args;
+    var styles = responsive(obj)(theme);
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === "function" ? x(theme) : x;
+      if (key === "variant") {
+        var variant3 = css2(get3(theme, val))(theme);
+        result = _extends({}, result, {}, variant3);
+        continue;
+      }
+      if (val && typeof val === "object") {
+        result[key] = css2(val)(theme);
+        continue;
+      }
+      var prop = get3(aliases, key, key);
+      var scaleName = get3(scales, prop);
+      var scale = get3(theme, scaleName, get3(theme, prop, {}));
+      var transform = get3(transforms, prop, get3);
+      var value = transform(scale, val, val);
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+    return result;
+  };
+};
+var index_esm_default9 = css;
+
+// ../../node_modules/@styled-system/variant/dist/index.esm.js
+var variant = function variant2(_ref) {
+  var _config;
+  var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
+  var sx;
+  if (Object.keys(variants).length) {
+    sx = function sx2(value, scale2, props) {
+      return index_esm_default9(get(scale2, value, null))(props.theme);
+    };
+  } else {
+    sx = function sx2(value, scale2) {
+      return get(scale2, value, null);
+    };
+  }
+  sx.scale = scale || key;
+  sx.defaults = variants;
+  var config9 = (_config = {}, _config[prop] = sx, _config);
+  var parser = createParser(config9);
+  return parser;
+};
+var buttonStyle = variant({
+  key: "buttons"
+});
+var textStyle = variant({
+  key: "textStyles",
+  prop: "textStyle"
+});
+var colorStyle = variant({
+  key: "colorStyles",
+  prop: "colors"
+});
+
+// ../../node_modules/styled-system/dist/index.esm.js
+var width = index_esm_default.width;
+var height = index_esm_default.height;
+var minWidth = index_esm_default.minWidth;
+var minHeight = index_esm_default.minHeight;
+var maxWidth = index_esm_default.maxWidth;
+var maxHeight = index_esm_default.maxHeight;
+var size = index_esm_default.size;
+var verticalAlign = index_esm_default.verticalAlign;
+var display = index_esm_default.display;
+var overflow = index_esm_default.overflow;
+var overflowX = index_esm_default.overflowX;
+var overflowY = index_esm_default.overflowY;
+var opacity = index_esm_default2.opacity;
+var fontSize = index_esm_default3.fontSize;
+var fontFamily = index_esm_default3.fontFamily;
+var fontWeight = index_esm_default3.fontWeight;
+var lineHeight = index_esm_default3.lineHeight;
+var textAlign = index_esm_default3.textAlign;
+var fontStyle = index_esm_default3.fontStyle;
+var letterSpacing = index_esm_default3.letterSpacing;
+var alignItems = index_esm_default4.alignItems;
+var alignContent = index_esm_default4.alignContent;
+var justifyItems = index_esm_default4.justifyItems;
+var justifyContent = index_esm_default4.justifyContent;
+var flexWrap = index_esm_default4.flexWrap;
+var flexDirection = index_esm_default4.flexDirection;
+var flex = index_esm_default4.flex;
+var flexGrow = index_esm_default4.flexGrow;
+var flexShrink = index_esm_default4.flexShrink;
+var flexBasis = index_esm_default4.flexBasis;
+var justifySelf = index_esm_default4.justifySelf;
+var alignSelf = index_esm_default4.alignSelf;
+var order = index_esm_default4.order;
+var gridGap = index_esm_default5.gridGap;
+var gridColumnGap = index_esm_default5.gridColumnGap;
+var gridRowGap = index_esm_default5.gridRowGap;
+var gridColumn = index_esm_default5.gridColumn;
+var gridRow = index_esm_default5.gridRow;
+var gridAutoFlow = index_esm_default5.gridAutoFlow;
+var gridAutoColumns = index_esm_default5.gridAutoColumns;
+var gridAutoRows = index_esm_default5.gridAutoRows;
+var gridTemplateColumns = index_esm_default5.gridTemplateColumns;
+var gridTemplateRows = index_esm_default5.gridTemplateRows;
+var gridTemplateAreas = index_esm_default5.gridTemplateAreas;
+var gridArea = index_esm_default5.gridArea;
+var borderWidth = index_esm_default6.borderWidth;
+var borderStyle = index_esm_default6.borderStyle;
+var borderColor = index_esm_default6.borderColor;
+var borderTop = index_esm_default6.borderTop;
+var borderRight = index_esm_default6.borderRight;
+var borderBottom = index_esm_default6.borderBottom;
+var borderLeft = index_esm_default6.borderLeft;
+var borderRadius = index_esm_default6.borderRadius;
+var backgroundImage = index_esm_default7.backgroundImage;
+var backgroundSize = index_esm_default7.backgroundSize;
+var backgroundPosition = index_esm_default7.backgroundPosition;
+var backgroundRepeat = index_esm_default7.backgroundRepeat;
+var zIndex = index_esm_default8.zIndex;
+var top = index_esm_default8.top;
+var right = index_esm_default8.right;
+var bottom = index_esm_default8.bottom;
+var left = index_esm_default8.left;
+
+// src/styles.tsx
+import { focusRing, disabled } from "@sproutsocial/seeds-react-mixins";
+import Icon from "@sproutsocial/seeds-react-icon";
+var StyledCardContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.space[400]};
+  box-sizing: border-box;
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+var StyledCardHeader = styled(StyledCardContent)`
+  flex-direction: row;
+  border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid
+  ${theme.colors.container.border.base}`};
+  border-top-left-radius: ${({ theme }) => theme.radii.inner};
+  border-top-right-radius: ${({ theme }) => theme.radii.inner};
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+var StyledCardFooter = styled(StyledCardContent)`
+  flex-direction: row;
+  border-top: ${({ theme }) => `${theme.borderWidths[500]} solid
+  ${theme.colors.container.border.base}`};
+  border-bottom-left-radius: ${({ theme }) => theme.radii.inner};
+  border-bottom-right-radius: ${({ theme }) => theme.radii.inner};
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+var SelectedIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: -8px;
+  right: -8px;
+`;
+var StyledSelectedIcon = styled(Icon)`
+  border-radius: 50%;
+  background: ${({ theme }) => theme.colors.container.background.base};
+  opacity: 0;
+  transition: opacity ${({ theme }) => theme.duration.medium};
+
+  ${({ $selected }) => $selected && `
+    opacity: 1;
+  `}
+`;
+var StyledCardLink = styled.a`
+  font-family: ${(p) => p.theme.fontFamily};
+  font-weight: ${(p) => p.theme.fontWeights.bold};
+  color: ${(p) => p.theme.colors.text.headline};
+  ${(p) => p.theme.typography[400]};
+
+  ${color}
+  ${typography}
+`;
+var StyledCard = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin: 0;
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+  padding: ${({ theme, $compositionalComponents }) => $compositionalComponents ? 0 : theme.space[400]};
+  border-radius: ${({ theme }) => theme.radii.outer};
+  transition: box-shadow ${({ theme }) => theme.duration.medium},
+    border ${({ theme }) => theme.duration.medium};
+
+  &[role="button"],
+  &[role="checkbox"] {
+    cursor: pointer;
+  }
+
+  ${({ $isRoleLink }) => $isRoleLink && `
+		cursor: pointer;
+	`}
+
+  &:hover {
+    box-shadow: ${({ theme, $elevation = "low" }) => theme.shadows[$elevation]};
+  }
+
+  &:focus-within {
+    ${({ $isRoleLink }) => $isRoleLink ? focusRing : null}
+    ${StyledCardLink}:focus {
+      border: none;
+      box-shadow: none;
+      outline: none;
+    }
+  }
+
+  &:focus {
+    ${focusRing}
+  }
+
+  ${({ $disabled }) => $disabled && `
+    ${disabled}
+  `}
+
+  ${({ $selected, theme }) => $selected && `
+    border: ${theme.borderWidths[500]} solid ${theme.colors.container.border.selected};  
+  `}
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${position}
+  ${space}
+`;
+var StyledCardAffordance = styled(Icon)`
+  ${StyledCard}:hover & {
+    transform: translateX(${(p) => p.theme.space[200]});
+  }
+  transition: ${(p) => p.theme.duration.medium};
+`;
+
+// src/utils.ts
+import { createContext, useContext, useEffect } from "react";
+import { assertIsElement } from "@sproutsocial/seeds-react-utilities";
+var SubComponentContext = createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setHasSubComponent: () => {
+  },
+  href: "",
+  linkRef: null
+});
+function useChildContext() {
+  const { setHasSubComponent } = useContext(SubComponentContext);
+  useEffect(() => {
+    setHasSubComponent && setHasSubComponent(true);
+  }, [setHasSubComponent]);
+}
+var navigateTo = ({ e, href, ref }) => {
+  const { target } = e;
+  assertIsElement(target);
+  if (ref.current?.contains(target)) {
+    if (target.getAttribute("onclick") !== null || target.getAttribute("href") !== null) {
+      e.stopPropagation();
+      return;
+    }
+  }
+  window.open(href, "_blank")?.focus();
+};
+var onKeyDown = ({ e, href, onClick, ref, role }) => {
+  if (e?.key === "Enter") {
+    if (role === "link") {
+      return navigateTo({ e, href, ref });
+    }
+    if (role === "presentation") {
+      return;
+    }
+    return onClick?.(e);
+  }
+};
+
+// src/subComponents.tsx
+import { useContext as useContext2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CardContent = ({
+  children,
+  ...rest
+}) => {
+  useChildContext();
+  return /* @__PURE__ */ jsx(StyledCardContent, { ...rest, children });
+};
+var CardHeader = ({
+  children,
+  ...rest
+}) => {
+  useChildContext();
+  return /* @__PURE__ */ jsx(StyledCardHeader, { ...rest, children });
+};
+var CardFooter = ({
+  children,
+  ...rest
+}) => {
+  useChildContext();
+  return /* @__PURE__ */ jsx(StyledCardFooter, { ...rest, children });
+};
+var SelectedIcon = ({ $selected }) => {
+  return /* @__PURE__ */ jsx(SelectedIconWrapper, { children: /* @__PURE__ */ jsx(
+    StyledSelectedIcon,
+    {
+      "aria-hidden": true,
+      color: "icon.base",
+      name: "circle-check-solid",
+      $selected
+    }
+  ) });
+};
+var CardAffordance = ({ ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    StyledCardAffordance,
+    {
+      ...rest,
+      size: "mini",
+      name: "arrow-right-solid",
+      "aria-hidden": true
+    }
+  );
+};
+var CardLink = ({
+  affordance,
+  children,
+  external = false,
+  color: color2,
+  ...rest
+}) => {
+  const { href, linkRef } = useContext2(SubComponentContext);
+  const handleClick = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(
+    StyledCardLink,
+    {
+      ...rest,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noreferrer" : void 0,
+      href,
+      onClick: handleClick,
+      ref: linkRef,
+      color: color2,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        affordance ? /* @__PURE__ */ jsx(CardAffordance, { ml: 300 }) : null
+      ] })
+    }
+  );
+};
+
+// src/Card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Card = ({
+  children,
+  disabled: disabled2 = false,
+  elevation,
+  href,
+  onClick,
+  role = "presentation",
+  selected,
+  ...rest
+}) => {
+  const [hasSubComponent, setHasSubComponent] = useState(false);
+  const containerRef = useRef(null);
+  const linkRef = useRef(null);
+  const isRoleLink = role === "link";
+  const checkedConditions = role === "checkbox" ? selected : void 0;
+  const cardContext = {
+    setHasSubComponent,
+    href,
+    linkRef
+  };
+  const handleClickConditions = (e) => isRoleLink ? linkRef.current?.click() : onClick?.(e);
+  const handleKeyDown = (e) => onKeyDown({ e, href, onClick, ref: containerRef, role });
+  return /* @__PURE__ */ jsxs2(
+    StyledCard,
+    {
+      tabIndex: isRoleLink ? -1 : 0,
+      role: isRoleLink ? void 0 : role,
+      onClick: handleClickConditions,
+      onKeyDown: handleKeyDown,
+      $elevation: elevation,
+      ref: containerRef,
+      $selected: selected,
+      "aria-checked": checkedConditions,
+      $disabled: disabled2,
+      "aria-disabled": disabled2 && disabled2,
+      $compositionalComponents: hasSubComponent,
+      $isRoleLink: isRoleLink,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx2(SelectedIcon, { $selected: selected }),
+        /* @__PURE__ */ jsx2(SubComponentContext.Provider, { value: cardContext, children })
+      ]
+    }
+  );
+};
+var Card_default = Card;
+
+// src/CardTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Card_default;
+export {
+  Card_default as Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardLink,
+  src_default as default
+};
+/*! Bundled license information:
+
+object-assign/index.js:
+  (*
+  object-assign
+  (c) Sindre Sorhus
+  @license MIT
+  *)
+*/
+//# sourceMappingURL=index.js.map