@sproutsocial/seeds-react-button 1.1.0 → 1.1.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeSystemGridProps } from '@sproutsocial/seeds-react-system-props';
 
 type TypeButtonAppearance = "primary" | "secondary" | "pill" | "destructive" | "unstyled" | "placeholder";
@@ -30,7 +30,7 @@ interface TypeButtonProps extends TypeStyledComponentsCommonProps, TypeSystemCom
 }
 
 declare const Button: {
-    ({ href, appearance, active, disabled, external, children, size, innerRef, onClick, title, qa, as, ariaLabel, ...rest }: TypeButtonProps): React__default.JSX.Element;
+    ({ href, appearance, active, disabled, external, children, size, innerRef, onClick, title, qa, as, ariaLabel, ...rest }: TypeButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeSystemGridProps } from '@sproutsocial/seeds-react-system-props';
 
 type TypeButtonAppearance = "primary" | "secondary" | "pill" | "destructive" | "unstyled" | "placeholder";
@@ -30,7 +30,7 @@ interface TypeButtonProps extends TypeStyledComponentsCommonProps, TypeSystemCom
 }
 
 declare const Button: {
-    ({ href, appearance, active, disabled, external, children, size, innerRef, onClick, title, qa, as, ariaLabel, ...rest }: TypeButtonProps): React__default.JSX.Element;
+    ({ href, appearance, active, disabled, external, children, size, innerRef, onClick, title, qa, as, ariaLabel, ...rest }: TypeButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -2995,27 +2995,33 @@ __export(seeds_border_esm_exports, {
   BORDER_RADIUS_400: () => BORDER_RADIUS_400,
   BORDER_RADIUS_500: () => BORDER_RADIUS_500,
   BORDER_RADIUS_600: () => BORDER_RADIUS_600,
+  BORDER_RADIUS_900: () => BORDER_RADIUS_900,
   BORDER_WIDTH_500: () => BORDER_WIDTH_500,
   BORDER_WIDTH_600: () => BORDER_WIDTH_600,
+  BORDER_WIDTH_700: () => BORDER_WIDTH_700,
   default: () => seeds_border_esm_default
 });
-var BORDER_RADIUS_400, BORDER_RADIUS_500, BORDER_RADIUS_600, BORDER_RADIUS_1000, BORDER_WIDTH_500, BORDER_WIDTH_600, seeds_border_esm_default;
+var BORDER_RADIUS_400, BORDER_RADIUS_500, BORDER_RADIUS_600, BORDER_RADIUS_900, BORDER_RADIUS_1000, BORDER_WIDTH_500, BORDER_WIDTH_600, BORDER_WIDTH_700, seeds_border_esm_default;
 var init_seeds_border_esm = __esm({
   "../../seeds-design-tokens/seeds-border/dist/seeds-border.esm.js"() {
     "use strict";
     BORDER_RADIUS_400 = "4px";
     BORDER_RADIUS_500 = "6px";
     BORDER_RADIUS_600 = "8px";
+    BORDER_RADIUS_900 = "24px";
     BORDER_RADIUS_1000 = "999999px";
     BORDER_WIDTH_500 = "1px";
     BORDER_WIDTH_600 = "2px";
+    BORDER_WIDTH_700 = "3px";
     seeds_border_esm_default = {
       BORDER_RADIUS_400,
       BORDER_RADIUS_500,
       BORDER_RADIUS_600,
+      BORDER_RADIUS_900,
       BORDER_RADIUS_1000,
       BORDER_WIDTH_500,
-      BORDER_WIDTH_600
+      BORDER_WIDTH_600,
+      BORDER_WIDTH_700
     };
   }
 });
@@ -3229,7 +3235,8 @@ var require_dataviz_palette = __commonJS({
         "18": _seedsColor.default.COLOR_RED_400,
         "19": _seedsColor.default.COLOR_GREEN_700,
         "20": _seedsColor.default.COLOR_YELLOW_800
-      }
+      },
+      PLACEHOLDER: _seedsColor.default.COLOR_NEUTRAL_300
     };
   }
 });
@@ -3644,7 +3651,13 @@ var require_theme = __commonJS({
       },
       dataviz: {
         map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
-        list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
+        list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST,
+        placeholder: _datavizPalette.datavizPalette.PLACEHOLDER
+      },
+      userStatus: {
+        online: _seedsColor.default.COLOR_GREEN_700,
+        offline: _seedsColor.default.COLOR_RED_600,
+        unavailable: _seedsColor.default.COLOR_NEUTRAL_600
       }
     }, _literalColors.default), _datavizPalette.datavizPalette);
     var typography = exports.typography = {
@@ -3711,16 +3724,21 @@ var require_theme = __commonJS({
       400: _seedsBorder.default.BORDER_RADIUS_400,
       500: _seedsBorder.default.BORDER_RADIUS_500,
       600: _seedsBorder.default.BORDER_RADIUS_600,
+      900: _seedsBorder.default.BORDER_RADIUS_900,
       1e3: _seedsBorder.default.BORDER_RADIUS_1000,
       inner: _seedsBorder.default.BORDER_RADIUS_500,
       outer: _seedsBorder.default.BORDER_RADIUS_600,
       pill: _seedsBorder.default.BORDER_RADIUS_1000
     };
     var borders = exports.borders = {
-      500: "".concat(_seedsBorder.default.BORDER_WIDTH_500, " solid")
+      500: "".concat(_seedsBorder.default.BORDER_WIDTH_500, " solid"),
+      600: "".concat(_seedsBorder.default.BORDER_WIDTH_600, " solid"),
+      700: "".concat(_seedsBorder.default.BORDER_WIDTH_700, " solid")
     };
     var borderWidths = exports.borderWidths = {
-      500: _seedsBorder.default.BORDER_WIDTH_500
+      500: _seedsBorder.default.BORDER_WIDTH_500,
+      600: _seedsBorder.default.BORDER_WIDTH_600,
+      700: _seedsBorder.default.BORDER_WIDTH_700
     };
     var shadows = exports.shadows = {
       low: "".concat(_seedsDepth.default.ELEVATION_LEVEL_100, " ").concat(_seedsColor.default.COLOR_NEUTRAL_900, "3D"),
@@ -3803,7 +3821,8 @@ var require_dataviz_palette2 = __commonJS({
         "18": _seedsColor.default.COLOR_RED_400,
         "19": _seedsColor.default.COLOR_GREEN_200,
         "20": _seedsColor.default.COLOR_YELLOW_200
-      }
+      },
+      PLACEHOLDER: _seedsColor.default.COLOR_NEUTRAL_800
     };
   }
 });
@@ -4184,7 +4203,13 @@ var require_theme2 = __commonJS({
       },
       dataviz: {
         map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
-        list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
+        list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST,
+        placeholder: _datavizPalette.datavizPalette.PLACEHOLDER
+      },
+      userStatus: {
+        online: _seedsColor.default.COLOR_GREEN_500,
+        offline: _seedsColor.default.COLOR_RED_500,
+        unavailable: _seedsColor.default.COLOR_NEUTRAL_500
       }
     }, _datavizPalette.datavizPalette);
     var darkTheme = _objectSpread(_objectSpread({}, _theme.default), {}, {
@@ -4932,12 +4957,13 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Button.tsx
-var import_react = __toESM(require("react"));
+var import_react2 = require("react");
 
 // src/styles.ts
 var import_styled_components2 = __toESM(require("styled-components"));
 
 // ../seeds-react-system-props/dist/index.mjs
+var import_react = require("react");
 var _r = Object.create;
 var _ = Object.defineProperty;
 var re = Object.getOwnPropertyDescriptor;
@@ -4951,7 +4977,7 @@ var se = (a3, r, e, o) => {
       !oe.call(a3, t) && t !== e && _(a3, t, { get: () => r[t], enumerable: !(o = re(r, t)) || o.enumerable });
   return a3;
 };
-var ie = (a3, r, e) => (e = a3 != null ? _r(te(a3)) : {}, se(r || !a3 || !a3.__esModule ? _(e, "default", { value: a3, enumerable: true }) : e, a3));
+var ie = (a3, r, e) => (e = a3 != null ? _r(te(a3)) : {}, se(!a3 || !a3.__esModule ? _(e, "default", { value: a3, enumerable: true }) : e, a3));
 var tr = ae(($e, er) => {
   var rr = Object.getOwnPropertySymbols, pe = Object.prototype.hasOwnProperty, ne = Object.prototype.propertyIsEnumerable;
   function de(a3) {
@@ -5012,13 +5038,13 @@ var ce = function(r) {
     e[o] = r[o];
   }), e;
 };
-var ge = { breakpoints: [40, 52, 64].map(function(a3) {
+var me = { breakpoints: [40, 52, 64].map(function(a3) {
   return a3 + "em";
 }) };
 var ar = function(r) {
   return "@media screen and (min-width: " + r + ")";
 };
-var me = function(r, e) {
+var ge = function(r, e) {
   return P(e, r, r);
 };
 var P = function(r, e, o, t, s) {
@@ -5029,18 +5055,18 @@ var P = function(r, e, o, t, s) {
 var j = function a(r) {
   var e = {}, o = function(i) {
     var p = {}, c = false, d = i.theme && i.theme.disableStyledSystemCache;
-    for (var m in i)
-      if (r[m]) {
-        var g = r[m], u = i[m], x = P(i.theme, g.scale, g.defaults);
+    for (var g in i)
+      if (r[g]) {
+        var m = r[g], u = i[g], x = P(i.theme, m.scale, m.defaults);
         if (typeof u == "object") {
-          if (e.breakpoints = !d && e.breakpoints || P(i.theme, "breakpoints", ge.breakpoints), Array.isArray(u)) {
-            e.media = !d && e.media || [null].concat(e.breakpoints.map(ar)), p = or(p, fe(e.media, g, x, u, i));
+          if (e.breakpoints = !d && e.breakpoints || P(i.theme, "breakpoints", me.breakpoints), Array.isArray(u)) {
+            e.media = !d && e.media || [null].concat(e.breakpoints.map(ar)), p = or(p, fe(e.media, m, x, u, i));
             continue;
           }
-          u !== null && (p = or(p, ue(e.breakpoints, g, x, u, i)), c = true);
+          u !== null && (p = or(p, ue(e.breakpoints, m, x, u, i)), c = true);
           continue;
         }
-        (0, R.default)(p, g(u, x, i));
+        (0, R.default)(p, m(u, x, i));
       }
     return c && (p = ce(p)), p;
   };
@@ -5056,33 +5082,33 @@ var j = function a(r) {
 var fe = function(r, e, o, t, s) {
   var i = {};
   return t.slice(0, r.length).forEach(function(p, c) {
-    var d = r[c], m = e(p, o, s);
+    var d = r[c], g = e(p, o, s);
     if (!d)
-      (0, R.default)(i, m);
+      (0, R.default)(i, g);
     else {
-      var g;
-      (0, R.default)(i, (g = {}, g[d] = (0, R.default)({}, i[d], m), g));
+      var m;
+      (0, R.default)(i, (m = {}, m[d] = (0, R.default)({}, i[d], g), m));
     }
   }), i;
 };
 var ue = function(r, e, o, t, s) {
   var i = {};
   for (var p in t) {
-    var c = r[p], d = t[p], m = e(d, o, s);
+    var c = r[p], d = t[p], g = e(d, o, s);
     if (!c)
-      (0, R.default)(i, m);
+      (0, R.default)(i, g);
     else {
-      var g, u = ar(c);
-      (0, R.default)(i, (g = {}, g[u] = (0, R.default)({}, i[u], m), g));
+      var m, u = ar(c);
+      (0, R.default)(i, (m = {}, m[u] = (0, R.default)({}, i[u], g), m));
     }
   }
   return i;
 };
 var X = function(r) {
-  var e = r.properties, o = r.property, t = r.scale, s = r.transform, i = s === void 0 ? me : s, p = r.defaultScale;
+  var e = r.properties, o = r.property, t = r.scale, s = r.transform, i = s === void 0 ? ge : s, p = r.defaultScale;
   e = e || [o];
-  var c = function(m, g, u) {
-    var x = {}, B = i(m, g, u);
+  var c = function(g, m, u) {
+    var x = {}, B = i(g, m, u);
     if (B !== null)
       return e.forEach(function(z) {
         x[z] = B;
@@ -5128,8 +5154,8 @@ var E = l(he);
 var v = E;
 var J = { color: { property: "color", scale: "colors" }, backgroundColor: { property: "backgroundColor", scale: "colors" }, opacity: true };
 J.bg = J.backgroundColor;
-var G = l(J);
-var sr = G;
+var A = l(J);
+var sr = A;
 var ve = { fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
 var Se = { fontFamily: { property: "fontFamily", scale: "fonts" }, fontSize: { property: "fontSize", scale: "fontSizes", defaultScale: ve.fontSizes }, fontWeight: { property: "fontWeight", scale: "fontWeights" }, lineHeight: { property: "lineHeight", scale: "lineHeights" }, letterSpacing: { property: "letterSpacing", scale: "letterSpacings" }, textAlign: true, fontStyle: true };
 var M = l(Se);
@@ -5139,8 +5165,8 @@ var D = l(xe);
 var b = D;
 var K = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
 var Re = { gridGap: { property: "gridGap", scale: "space", defaultScale: K.space }, gridColumnGap: { property: "gridColumnGap", scale: "space", defaultScale: K.space }, gridRowGap: { property: "gridRowGap", scale: "space", defaultScale: K.space }, gridColumn: true, gridRow: true, gridAutoFlow: true, gridAutoColumns: true, gridAutoRows: true, gridTemplateColumns: true, gridTemplateRows: true, gridTemplateAreas: true, gridArea: true };
-var A = l(Re);
-var S = A;
+var G = l(Re);
+var S = G;
 var f = { 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" } };
 f.borderTopWidth = { property: "borderTopWidth", scale: "borderWidths" };
 f.borderTopColor = { property: "borderTopColor", scale: "colors" };
@@ -5200,18 +5226,18 @@ n.padding.px = n.padding.paddingX;
 n.padding.py = n.padding.paddingY;
 var pr = l(n.margin);
 var nr = l(n.padding);
-var F = y(pr, nr);
+var N = y(pr, nr);
 var $ = l({ boxShadow: { property: "boxShadow", scale: "shadows" }, textShadow: { property: "textShadow", scale: "shadows" } });
 var q = $;
-function N() {
-  return N = Object.assign || function(a3) {
+function F() {
+  return F = Object.assign || function(a3) {
     for (var r = 1; r < arguments.length; r++) {
       var e = arguments[r];
       for (var o in e)
         Object.prototype.hasOwnProperty.call(e, o) && (a3[o] = e[o]);
     }
     return a3;
-  }, N.apply(this, arguments);
+  }, F.apply(this, arguments);
 }
 var w = function(r, e, o, t, s) {
   for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
@@ -5233,12 +5259,12 @@ var We = function(r, e) {
 };
 var Le = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(a3, r) {
   var e;
-  return N({}, a3, (e = {}, e[r] = We, e));
+  return F({}, a3, (e = {}, e[r] = We, e));
 }, {});
 var Oe = function(r) {
   return function(e) {
-    var o = {}, t = w(e, "breakpoints", Te), s = [null].concat(t.map(function(m) {
-      return "@media screen and (min-width: " + m + ")";
+    var o = {}, t = w(e, "breakpoints", Te), s = [null].concat(t.map(function(g) {
+      return "@media screen and (min-width: " + g + ")";
     }));
     for (var i in r) {
       var p = typeof r[i] == "function" ? r[i](e) : r[i];
@@ -5263,24 +5289,24 @@ var Oe = function(r) {
 var ze = function a2(r) {
   return function(e) {
     e === void 0 && (e = {});
-    var o = N({}, we, {}, e.theme || e), t = {}, s = typeof r == "function" ? r(o) : r, i = Oe(s)(o);
+    var o = F({}, we, {}, e.theme || e), t = {}, s = typeof r == "function" ? r(o) : r, i = Oe(s)(o);
     for (var p in i) {
       var c = i[p], d = typeof c == "function" ? c(o) : c;
       if (p === "variant") {
-        var m = a2(w(o, d))(o);
-        t = N({}, t, {}, m);
+        var g = a2(w(o, d))(o);
+        t = F({}, t, {}, g);
         continue;
       }
       if (d && typeof d == "object") {
         t[p] = a2(d)(o);
         continue;
       }
-      var g = w(Ce, p, p), u = w(Be, g), x = w(o, u, w(o, g, {})), B = w(Le, g, w), z = B(x, d, d);
-      if (dr[g])
-        for (var Z = dr[g], Q = 0; Q < Z.length; Q++)
+      var m = w(Ce, p, p), u = w(Be, m), x = w(o, u, w(o, m, {})), B = w(Le, m, w), z = B(x, d, d);
+      if (dr[m])
+        for (var Z = dr[m], Q = 0; Q < Z.length; Q++)
           t[Z[Q]] = z;
       else
-        t[g] = z;
+        t[m] = z;
     }
     return t;
   };
@@ -5293,15 +5319,15 @@ var L = function(r) {
   } : d = function(x, B) {
     return P(B, x, null);
   }, d.scale = o || c, d.defaults = p;
-  var m = (e = {}, e[s] = d, e), g = j(m);
-  return g;
+  var g = (e = {}, e[s] = d, e), m = j(g);
+  return m;
 };
 L({ key: "buttons" });
 L({ key: "textStyles", prop: "textStyle" });
 L({ key: "colorStyles", prop: "colors" });
 var cr = v.width;
-var gr = v.height;
-var mr = v.minWidth;
+var mr = v.height;
+var gr = v.minWidth;
 var fr = v.minHeight;
 var ur = v.maxWidth;
 var yr = v.maxHeight;
@@ -5326,8 +5352,8 @@ var Lr = b.justifyContent;
 var Or = b.flexWrap;
 var zr = b.flexDirection;
 var jr = b.flex;
-var Gr = b.flexGrow;
-var Ar = b.flexShrink;
+var Ar = b.flexGrow;
+var Gr = b.flexShrink;
 var Ir = b.flexBasis;
 var Hr = b.justifySelf;
 var kr = b.alignSelf;
@@ -5344,8 +5370,8 @@ S.gridTemplateColumns;
 S.gridTemplateRows;
 S.gridTemplateAreas;
 S.gridArea;
-var Fr = T.borderWidth;
-var Nr = T.borderStyle;
+var Nr = T.borderWidth;
+var Fr = T.borderStyle;
 var Xr = T.borderColor;
 var Er = T.borderTop;
 var Mr = T.borderRight;
@@ -5363,16 +5389,16 @@ var Jr = k.bottom;
 var Kr = k.left;
 var Zr = l({ gap: { property: "gap", scale: "space" }, rowGap: { property: "rowGap", scale: "space" }, columnGap: { property: "columnGap", scale: "space" } });
 var He = L({ key: "typography", prop: "typeScale" });
-var ke = y(G, F, l({ cursor: true, whiteSpace: true }));
-var Ye = y(I, Er, Mr, Dr, Vr, Fr, Nr, Xr, Ur, q);
-var Fe = y(He, xr, wr, Rr, Pr, Tr);
-var Ne = y(vr, br, cr, gr, mr, fr, ur, yr, Sr, hr);
+var ke = y(A, N, l({ cursor: true, whiteSpace: true }));
+var Ye = y(I, Er, Mr, Dr, Vr, Nr, Fr, Xr, Ur, q);
+var Ne = y(He, xr, wr, Rr, Pr, Tr);
+var Fe = y(vr, br, cr, mr, gr, fr, ur, yr, Sr, hr);
 var Xe = y(H, $r, qr, Qr, Jr, Kr);
-var Ee = y(Ir, zr, Or, Br, Cr, Lr, Wr, Yr, jr, Ar, Gr, Hr, kr, Zr);
-var Me = A;
+var Ee = y(Ir, zr, Or, Br, Cr, Lr, Wr, Yr, jr, Gr, Ar, Hr, kr, Zr);
+var Me = G;
 var De = y(l({ cursor: true, whiteSpace: true }));
 var Ve = y(L({ key: "typography", prop: "typeScale" }));
-var Po = y(De, Ve, V, I, G, D, A, E, H, $, F, M);
+var mo = y(De, Ve, V, I, A, D, G, E, H, $, N, M);
 
 // ../seeds-react-mixins/dist/index.mjs
 init_polished_esm();
@@ -5489,7 +5515,7 @@ var Container = import_styled_components2.default.button`
     vertical-align: text-bottom;
   }
 
-  ${Ne}
+  ${Fe}
   ${ke}
   ${Ee}
   ${Me}
@@ -5498,6 +5524,7 @@ Container.displayName = "Button-Container";
 var styles_default = Container;
 
 // src/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var Button = ({
   href,
   appearance = "unstyled",
@@ -5519,7 +5546,7 @@ var Button = ({
       "Warning: external prop cannot be set without a href declaration"
     );
   }
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     styles_default,
     {
       title,
@@ -5539,14 +5566,17 @@ var Button = ({
       "data-qa-button-isdisabled": disabled2 === true,
       "aria-label": ariaLabel,
       ...qa,
-      ...rest
-    },
-    children
+      ...rest,
+      children
+    }
   );
 };
 Button.displayName = "Button";
 var Button_default = Button;
 
+// src/ButtonTypes.ts
+var React2 = require("react");
+
 // src/index.ts
 var src_default = Button_default;
 // Annotate the CommonJS export names for ESM import in node: