@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Button/tokens.js

@@ -0,0 +1,223 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { BUTTON_STATES, BUTTON_VARIANT_NAMES } from "./types";
+var DEFAULT_PRIMARY_STATES = {
+  focus: {
+    backgroundColor: "blue100",
+    borderColor: "blue100",
+    color: "mono0",
+    textDecoration: "underline"
+  },
+  hover: {
+    backgroundColor: "blue100",
+    borderColor: "blue100",
+    color: "mono0",
+    textDecoration: "underline"
+  },
+  active: {
+    backgroundColor: "blue150",
+    borderColor: "blue150",
+    color: "mono0",
+    textDecoration: "underline"
+  },
+  loading: {
+    backgroundColor: "blue100",
+    borderColor: "blue100",
+    color: "mono0"
+  },
+  disabled: {
+    backgroundColor: "mono30",
+    borderColor: "mono30",
+    color: "mono0"
+  },
+  success: {
+    backgroundColor: "blue100",
+    borderColor: "blue100",
+    color: "mono0"
+  }
+};
+var DEFAULT_SECONDARY_STATES = _objectSpread(_objectSpread({}, DEFAULT_PRIMARY_STATES), {}, {
+  disabled: {
+    backgroundColor: "transparent",
+    borderColor: "mono30",
+    color: "mono30"
+  }
+});
+export var BUTTON_STYLES = {
+  primaryBlack: _objectSpread({
+    default: {
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0"
+    }
+  }, DEFAULT_PRIMARY_STATES),
+  primaryWhite: _objectSpread({
+    default: {
+      backgroundColor: "mono0",
+      borderColor: "mono0",
+      color: "mono100"
+    }
+  }, DEFAULT_PRIMARY_STATES),
+  primaryBlue: _objectSpread(_objectSpread({
+    default: {
+      backgroundColor: "blue100",
+      borderColor: "blue100",
+      color: "mono0"
+    }
+  }, DEFAULT_PRIMARY_STATES), {}, {
+    focus: {
+      backgroundColor: "blue150",
+      borderColor: "blue150",
+      color: "mono0",
+      textDecoration: "underline"
+    },
+    hover: {
+      backgroundColor: "blue150",
+      borderColor: "blue150",
+      color: "mono0",
+      textDecoration: "underline"
+    },
+    active: {
+      backgroundColor: "blue200",
+      borderColor: "blue200",
+      color: "mono0",
+      textDecoration: "underline"
+    }
+  }),
+  primaryGray: _objectSpread({
+    default: {
+      backgroundColor: "mono10",
+      borderColor: "mono10",
+      color: "mono100"
+    }
+  }, DEFAULT_PRIMARY_STATES),
+  secondaryBlack: _objectSpread({
+    default: {
+      backgroundColor: "transparent",
+      borderColor: "mono100",
+      color: "mono100"
+    }
+  }, DEFAULT_SECONDARY_STATES),
+  secondaryBlue: _objectSpread({
+    default: {
+      backgroundColor: "transparent",
+      borderColor: "blue100",
+      color: "blue100"
+    }
+  }, DEFAULT_SECONDARY_STATES),
+  secondaryWhite: _objectSpread({
+    default: {
+      backgroundColor: "transparent",
+      borderColor: "mono0",
+      color: "mono0"
+    }
+  }, DEFAULT_SECONDARY_STATES),
+  /** Used for follow buttons */
+  secondaryNeutral: _objectSpread(_objectSpread({
+    default: {
+      backgroundColor: "transparent",
+      borderColor: "mono100",
+      color: "mono100"
+    }
+  }, DEFAULT_SECONDARY_STATES), {}, {
+    focus: {
+      backgroundColor: "mono10",
+      borderColor: "mono10",
+      color: "mono100",
+      textDecoration: "underline"
+    },
+    hover: {
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0",
+      textDecoration: "underline"
+    },
+    active: {
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0",
+      textDecoration: "underline"
+    },
+    loading: {
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0"
+    },
+    success: {
+      backgroundColor: "transparent",
+      borderColor: "mono100",
+      color: "mono100"
+    }
+  }),
+  tertiary: {
+    default: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      color: "mono100"
+    },
+    focus: {
+      backgroundColor: "blue10",
+      borderColor: "blue10",
+      color: "blue100",
+      textDecoration: "underline"
+    },
+    hover: {
+      backgroundColor: "blue10",
+      borderColor: "blue10",
+      color: "blue100",
+      textDecoration: "underline"
+    },
+    active: {
+      backgroundColor: "blue15",
+      borderColor: "blue15",
+      color: "blue100",
+      textDecoration: "underline"
+    },
+    loading: {
+      backgroundColor: "blue10",
+      borderColor: "blue10",
+      color: "blue100"
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      color: "mono30"
+    },
+    success: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      color: "blue100"
+    }
+  }
+};
+/** Inverts the structure of the style object so that we can use responsive values for `variant` */
+export var BUTTON_VARIANTS = BUTTON_STATES.reduce(function (variantsMemo, state) {
+  return _objectSpread(_objectSpread({}, variantsMemo), {}, _defineProperty({}, state, BUTTON_VARIANT_NAMES.reduce(function (stateMemo, variant) {
+    return _objectSpread(_objectSpread({}, stateMemo), {}, _defineProperty({}, variant, BUTTON_STYLES[variant][state]));
+  }, {})));
+}, {});
+
+/** Available button sizes */
+export var BUTTON_SIZES = {
+  small: {
+    height: "30px",
+    borderRadius: "15px",
+    px: "25px"
+  },
+  large: {
+    height: "50px",
+    borderRadius: "25px",
+    px: "25px"
+  }
+};
+
+/** Text sizes associated with available button sizes */
+export var BUTTON_TEXT_SIZES = {
+  small: "xs",
+  large: "sm-display"
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/elements/Button/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["BUTTON_STATES","BUTTON_VARIANT_NAMES","DEFAULT_PRIMARY_STATES","focus","backgroundColor","borderColor","color","textDecoration","hover","active","loading","disabled","success","DEFAULT_SECONDARY_STATES","_objectSpread","BUTTON_STYLES","primaryBlack","default","primaryWhite","primaryBlue","primaryGray","secondaryBlack","secondaryBlue","secondaryWhite","secondaryNeutral","tertiary","BUTTON_VARIANTS","reduce","variantsMemo","state","_defineProperty","stateMemo","variant","BUTTON_SIZES","small","height","borderRadius","px","large","BUTTON_TEXT_SIZES"],"sources":["../../../../src/elements/Button/tokens.ts"],"sourcesContent":["import { BUTTON_STATES, BUTTON_VARIANT_NAMES } from \"./types\"\nimport { TextProps } from \"../Text\"\nimport { ButtonSize, ButtonState, ButtonVariant } from \"./types\"\n\nconst DEFAULT_PRIMARY_STATES = {\n  focus: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  hover: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  active: {\n    backgroundColor: \"blue150\",\n    borderColor: \"blue150\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  loading: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n  disabled: {\n    backgroundColor: \"mono30\",\n    borderColor: \"mono30\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nconst DEFAULT_SECONDARY_STATES = {\n  ...DEFAULT_PRIMARY_STATES,\n  disabled: {\n    backgroundColor: \"transparent\",\n    borderColor: \"mono30\",\n    color: \"mono30\",\n  },\n}\n\nexport const BUTTON_STYLES: Record<ButtonVariant, Record<ButtonState, any>> = {\n  primaryBlack: {\n    default: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryWhite: {\n    default: {\n      backgroundColor: \"mono0\",\n      borderColor: \"mono0\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryBlue: {\n    default: {\n      backgroundColor: \"blue100\",\n      borderColor: \"blue100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n    focus: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue200\",\n      borderColor: \"blue200\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n  },\n\n  primaryGray: {\n    default: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  secondaryBlack: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryBlue: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"blue100\",\n      color: \"blue100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryWhite: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono0\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  /** Used for follow buttons */\n  secondaryNeutral: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n    focus: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n  },\n\n  tertiary: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono100\",\n    },\n    focus: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue15\",\n      borderColor: \"blue15\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n    },\n    disabled: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono30\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"blue100\",\n    },\n  },\n}\n\ntype ButtonVariants = Record<ButtonState, Record<ButtonVariant, any>>\n\n/** Inverts the structure of the style object so that we can use responsive values for `variant` */\nexport const BUTTON_VARIANTS: ButtonVariants = BUTTON_STATES.reduce(\n  (variantsMemo, state) => {\n    return {\n      ...variantsMemo,\n      [state]: BUTTON_VARIANT_NAMES.reduce((stateMemo, variant) => {\n        return {\n          ...stateMemo,\n          [variant]: BUTTON_STYLES[variant][state],\n        }\n      }, {}),\n    }\n  },\n  {} as ButtonVariants\n)\n\n/** Available button sizes */\nexport const BUTTON_SIZES = {\n  small: {\n    height: \"30px\",\n    borderRadius: \"15px\",\n    px: \"25px\",\n  },\n  large: {\n    height: \"50px\",\n    borderRadius: \"25px\",\n    px: \"25px\",\n  },\n} as const\n\n/** Text sizes associated with available button sizes */\nexport const BUTTON_TEXT_SIZES: Record<ButtonSize, TextProps[\"variant\"]> = {\n  small: \"xs\",\n  large: \"sm-display\",\n}\n"],"mappings":";;;;;;AAAA,SAASA,aAAa,EAAEC,oBAAoB;AAI5C,IAAMC,sBAAsB,GAAG;EAC7BC,KAAK,EAAE;IACLC,eAAe,EAAE,SAAS;IAC1BC,WAAW,EAAE,SAAS;IACtBC,KAAK,EAAE,OAAO;IACdC,cAAc,EAAE;EAClB,CAAC;EACDC,KAAK,EAAE;IACLJ,eAAe,EAAE,SAAS;IAC1BC,WAAW,EAAE,SAAS;IACtBC,KAAK,EAAE,OAAO;IACdC,cAAc,EAAE;EAClB,CAAC;EACDE,MAAM,EAAE;IACNL,eAAe,EAAE,SAAS;IAC1BC,WAAW,EAAE,SAAS;IACtBC,KAAK,EAAE,OAAO;IACdC,cAAc,EAAE;EAClB,CAAC;EACDG,OAAO,EAAE;IACPN,eAAe,EAAE,SAAS;IAC1BC,WAAW,EAAE,SAAS;IACtBC,KAAK,EAAE;EACT,CAAC;EACDK,QAAQ,EAAE;IACRP,eAAe,EAAE,QAAQ;IACzBC,WAAW,EAAE,QAAQ;IACrBC,KAAK,EAAE;EACT,CAAC;EACDM,OAAO,EAAE;IACPR,eAAe,EAAE,SAAS;IAC1BC,WAAW,EAAE,SAAS;IACtBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,IAAMO,wBAAwB,GAAAC,aAAA,CAAAA,aAAA,KACzBZ,sBAAsB;EACzBS,QAAQ,EAAE;IACRP,eAAe,EAAE,aAAa;IAC9BC,WAAW,EAAE,QAAQ;IACrBC,KAAK,EAAE;EACT;AAAC,EACF;AAED,OAAO,IAAMS,aAA8D,GAAG;EAC5EC,YAAY,EAAAF,aAAA;IACVG,OAAO,EAAE;MACPb,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE;IACT;EAAC,GACEJ,sBAAsB,CAC1B;EAEDgB,YAAY,EAAAJ,aAAA;IACVG,OAAO,EAAE;MACPb,eAAe,EAAE,OAAO;MACxBC,WAAW,EAAE,OAAO;MACpBC,KAAK,EAAE;IACT;EAAC,GACEJ,sBAAsB,CAC1B;EAEDiB,WAAW,EAAAL,aAAA,CAAAA,aAAA;IACTG,OAAO,EAAE;MACPb,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE;IACT;EAAC,GACEJ,sBAAsB;IACzBC,KAAK,EAAE;MACLC,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE,OAAO;MACdC,cAAc,EAAE;IAClB,CAAC;IACDC,KAAK,EAAE;MACLJ,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE,OAAO;MACdC,cAAc,EAAE;IAClB,CAAC;IACDE,MAAM,EAAE;MACNL,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE,OAAO;MACdC,cAAc,EAAE;IAClB;EAAC,EACF;EAEDa,WAAW,EAAAN,aAAA;IACTG,OAAO,EAAE;MACPb,eAAe,EAAE,QAAQ;MACzBC,WAAW,EAAE,QAAQ;MACrBC,KAAK,EAAE;IACT;EAAC,GACEJ,sBAAsB,CAC1B;EAEDmB,cAAc,EAAAP,aAAA;IACZG,OAAO,EAAE;MACPb,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE;IACT;EAAC,GACEO,wBAAwB,CAC5B;EAEDS,aAAa,EAAAR,aAAA;IACXG,OAAO,EAAE;MACPb,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE;IACT;EAAC,GACEO,wBAAwB,CAC5B;EAEDU,cAAc,EAAAT,aAAA;IACZG,OAAO,EAAE;MACPb,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,OAAO;MACpBC,KAAK,EAAE;IACT;EAAC,GACEO,wBAAwB,CAC5B;EAED;EACAW,gBAAgB,EAAAV,aAAA,CAAAA,aAAA;IACdG,OAAO,EAAE;MACPb,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE;IACT;EAAC,GACEO,wBAAwB;IAC3BV,KAAK,EAAE;MACLC,eAAe,EAAE,QAAQ;MACzBC,WAAW,EAAE,QAAQ;MACrBC,KAAK,EAAE,SAAS;MAChBC,cAAc,EAAE;IAClB,CAAC;IACDC,KAAK,EAAE;MACLJ,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE,OAAO;MACdC,cAAc,EAAE;IAClB,CAAC;IACDE,MAAM,EAAE;MACNL,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE,OAAO;MACdC,cAAc,EAAE;IAClB,CAAC;IACDG,OAAO,EAAE;MACPN,eAAe,EAAE,SAAS;MAC1BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE;IACT,CAAC;IACDM,OAAO,EAAE;MACPR,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,SAAS;MACtBC,KAAK,EAAE;IACT;EAAC,EACF;EAEDmB,QAAQ,EAAE;IACRR,OAAO,EAAE;MACPb,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,aAAa;MAC1BC,KAAK,EAAE;IACT,CAAC;IACDH,KAAK,EAAE;MACLC,eAAe,EAAE,QAAQ;MACzBC,WAAW,EAAE,QAAQ;MACrBC,KAAK,EAAE,SAAS;MAChBC,cAAc,EAAE;IAClB,CAAC;IACDC,KAAK,EAAE;MACLJ,eAAe,EAAE,QAAQ;MACzBC,WAAW,EAAE,QAAQ;MACrBC,KAAK,EAAE,SAAS;MAChBC,cAAc,EAAE;IAClB,CAAC;IACDE,MAAM,EAAE;MACNL,eAAe,EAAE,QAAQ;MACzBC,WAAW,EAAE,QAAQ;MACrBC,KAAK,EAAE,SAAS;MAChBC,cAAc,EAAE;IAClB,CAAC;IACDG,OAAO,EAAE;MACPN,eAAe,EAAE,QAAQ;MACzBC,WAAW,EAAE,QAAQ;MACrBC,KAAK,EAAE;IACT,CAAC;IACDK,QAAQ,EAAE;MACRP,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,aAAa;MAC1BC,KAAK,EAAE;IACT,CAAC;IACDM,OAAO,EAAE;MACPR,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAE,aAAa;MAC1BC,KAAK,EAAE;IACT;EACF;AACF,CAAC;AAID;AACA,OAAO,IAAMoB,eAA+B,GAAG1B,aAAa,CAAC2B,MAAM,CACjE,UAACC,YAAY,EAAEC,KAAK,EAAK;EACvB,OAAAf,aAAA,CAAAA,aAAA,KACKc,YAAY,OAAAE,eAAA,KACdD,KAAK,EAAG5B,oBAAoB,CAAC0B,MAAM,CAAC,UAACI,SAAS,EAAEC,OAAO,EAAK;IAC3D,OAAAlB,aAAA,CAAAA,aAAA,KACKiB,SAAS,OAAAD,eAAA,KACXE,OAAO,EAAGjB,aAAa,CAACiB,OAAO,CAAC,CAACH,KAAK,CAAC;EAE5C,CAAC,EAAE,CAAC,CAAC,CAAC;AAEV,CAAC,EACD,CAAC,CAAC,CACH;;AAED;AACA,OAAO,IAAMI,YAAY,GAAG;EAC1BC,KAAK,EAAE;IACLC,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE,MAAM;IACpBC,EAAE,EAAE;EACN,CAAC;EACDC,KAAK,EAAE;IACLH,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE,MAAM;IACpBC,EAAE,EAAE;EACN;AACF,CAAU;;AAEV;AACA,OAAO,IAAME,iBAA2D,GAAG;EACzEL,KAAK,EAAE,IAAI;EACXI,KAAK,EAAE;AACT,CAAC"}

package/dist/esm/elements/Button/types.js

@@ -0,0 +1,14 @@
+/** Names of button variants */
+export var BUTTON_VARIANT_NAMES = ["primaryBlack", "primaryWhite", "primaryBlue", "primaryGray", "secondaryBlack", "secondaryBlue", "secondaryWhite", "secondaryNeutral", "tertiary"];
+
+/** Name of treatments */
+
+export var BUTTON_STATES = ["default", "hover", "focus", "active", "loading", "disabled", "success"];
+
+/** Possible states that require styling */
+
+/** Names of button sizes */
+export var BUTTON_SIZE_NAMES = ["small", "large"];
+
+/** Available sizes */
+//# sourceMappingURL=types.js.map

package/dist/esm/elements/Button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["BUTTON_VARIANT_NAMES","BUTTON_STATES","BUTTON_SIZE_NAMES"],"sources":["../../../../src/elements/Button/types.ts"],"sourcesContent":["/** Names of button variants */\nexport const BUTTON_VARIANT_NAMES = [\n  \"primaryBlack\",\n  \"primaryWhite\",\n  \"primaryBlue\",\n  \"primaryGray\",\n  \"secondaryBlack\",\n  \"secondaryBlue\",\n  \"secondaryWhite\",\n  \"secondaryNeutral\",\n  \"tertiary\",\n] as const\n\n/** Name of treatments */\nexport type ButtonVariant = typeof BUTTON_VARIANT_NAMES[number]\n\nexport const BUTTON_STATES = [\n  \"default\",\n  \"hover\",\n  \"focus\",\n  \"active\",\n  \"loading\",\n  \"disabled\",\n  \"success\",\n] as const\n\n/** Possible states that require styling */\nexport type ButtonState = typeof BUTTON_STATES[number]\n\n/** Names of button sizes */\nexport const BUTTON_SIZE_NAMES = [\"small\", \"large\"] as const\n\n/** Available sizes */\nexport type ButtonSize = typeof BUTTON_SIZE_NAMES[number]\n"],"mappings":"AAAA;AACA,OAAO,IAAMA,oBAAoB,GAAG,CAClC,cAAc,EACd,cAAc,EACd,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,CACF;;AAEV;;AAGA,OAAO,IAAMC,aAAa,GAAG,CAC3B,SAAS,EACT,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,CACD;;AAEV;;AAGA;AACA,OAAO,IAAMC,iBAAiB,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU;;AAE5D"}

package/dist/esm/elements/CSSGrid/CSSGrid.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { grid } from "styled-system";
+import { Box } from "../Box";
+
+/**
+ * All props available to the CSSGrid component
+ */
+
+/**
+ * A utility component that encapsulates CSS grid behavior
+ */
+export var CSSGrid = styled(Box).withConfig({
+  displayName: "CSSGrid",
+  componentId: "sc-1q8w5xn-0"
+})(["display:grid;", ""], grid);
+//# sourceMappingURL=CSSGrid.js.map

package/dist/esm/elements/CSSGrid/CSSGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSGrid.js","names":["styled","grid","Box","CSSGrid","withConfig","displayName","componentId"],"sources":["../../../../src/elements/CSSGrid/CSSGrid.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { grid, GridProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * All props available to the CSSGrid component\n */\nexport interface CSSGridProps extends GridProps, BoxProps {}\n\n/**\n * A utility component that encapsulates CSS grid behavior\n */\nexport const CSSGrid = styled(Box)<CSSGridProps>`\n  display: grid;\n  ${grid}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAmB,eAAe;AAC/C,SAASC,GAAG;;AAEZ;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAGH,MAAM,CAACE,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0BAE9BL,IAAI,CACP"}

package/dist/esm/elements/CSSGrid/CSSGrid.story.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { Image } from "../Image";
+import { CSSGrid } from "./CSSGrid";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/CSSGrid",
+  component: CSSGrid,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "CSSGrid component provides a CSS Grid layout container with responsive props support. Allows for flexible grid layouts with configurable gaps, columns, and responsive breakpoints."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var ResponsiveGrid = {
+  args: {
+    width: [220, 420, 680],
+    gridGap: [2, 3, 4],
+    gridTemplateColumns: ["repeat(2, 1fr)", "repeat(3, 1fr)", "repeat(4, 1fr)"],
+    children: [1, 2, 3, 4, 5, 6, 7, 8].map(function (i) {
+      return /*#__PURE__*/React.createElement(Image, {
+        src: "https://picsum.photos/id/1025/140/100/",
+        width: [100, 120, 140],
+        key: i
+      });
+    })
+  }
+};
+export var SimpleGrid = {
+  args: {
+    gridGap: 2,
+    gridTemplateColumns: "repeat(3, 1fr)",
+    children: [1, 2, 3, 4, 5, 6].map(function (i) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: i,
+        style: {
+          background: "#f0f0f0",
+          padding: "16px",
+          textAlign: "center"
+        }
+      }, "Item ", i);
+    })
+  }
+};
+export var FixedGrid = {
+  args: {
+    width: 400,
+    gridGap: 1,
+    gridTemplateColumns: "repeat(4, 1fr)",
+    children: [1, 2, 3, 4, 5, 6, 7, 8].map(function (i) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: i,
+        style: {
+          background: "#e0e0e0",
+          padding: "8px",
+          textAlign: "center"
+        }
+      }, i);
+    })
+  }
+};
+//# sourceMappingURL=CSSGrid.story.js.map

package/dist/esm/elements/CSSGrid/CSSGrid.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSGrid.story.js","names":["React","Image","CSSGrid","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","ResponsiveGrid","args","width","gridGap","gridTemplateColumns","children","map","i","createElement","src","key","SimpleGrid","style","background","padding","textAlign","FixedGrid"],"sources":["../../../../src/elements/CSSGrid/CSSGrid.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image } from \"../Image\"\nimport { CSSGrid } from \"./CSSGrid\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/CSSGrid\",\n  component: CSSGrid,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"CSSGrid component provides a CSS Grid layout container with responsive props support. Allows for flexible grid layouts with configurable gaps, columns, and responsive breakpoints.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const ResponsiveGrid = {\n  args: {\n    width: [220, 420, 680],\n    gridGap: [2, 3, 4],\n    gridTemplateColumns: [\"repeat(2, 1fr)\", \"repeat(3, 1fr)\", \"repeat(4, 1fr)\"],\n    children: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\n      <Image\n        src=\"https://picsum.photos/id/1025/140/100/\"\n        width={[100, 120, 140]}\n        key={i}\n      />\n    )),\n  },\n}\n\nexport const SimpleGrid = {\n  args: {\n    gridGap: 2,\n    gridTemplateColumns: \"repeat(3, 1fr)\",\n    children: [1, 2, 3, 4, 5, 6].map((i) => (\n      <div\n        key={i}\n        style={{ background: \"#f0f0f0\", padding: \"16px\", textAlign: \"center\" }}\n      >\n        Item {i}\n      </div>\n    )),\n  },\n}\n\nexport const FixedGrid = {\n  args: {\n    width: 400,\n    gridGap: 1,\n    gridTemplateColumns: \"repeat(4, 1fr)\",\n    children: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\n      <div\n        key={i}\n        style={{ background: \"#e0e0e0\", padding: \"8px\", textAlign: \"center\" }}\n      >\n        {i}\n      </div>\n    )),\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK;AACd,SAASC,OAAO;AAChB,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,oBAAoB;EAC3BC,SAAS,EAAEH,OAAO;EAClBI,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXJ,SAAS,EACP;MACJ,CAAC;MACDK,QAAQ,EAAE;QACRC,OAAO,EAAER;MACX;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMS,cAAc,GAAG;EAC5BC,IAAI,EAAE;IACJC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACtBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClBC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,CAAC;IAC3EC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACC,GAAG,CAAC,UAACC,CAAC;MAAA,oBACvCnB,KAAA,CAAAoB,aAAA,CAACnB,KAAK;QACJoB,GAAG,EAAC,wCAAwC;QAC5CP,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAE;QACvBQ,GAAG,EAAEH;MAAE,EACP;IAAA,CACH;EACH;AACF,CAAC;AAED,OAAO,IAAMI,UAAU,GAAG;EACxBV,IAAI,EAAE;IACJE,OAAO,EAAE,CAAC;IACVC,mBAAmB,EAAE,gBAAgB;IACrCC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACC,GAAG,CAAC,UAACC,CAAC;MAAA,oBACjCnB,KAAA,CAAAoB,aAAA;QACEE,GAAG,EAAEH,CAAE;QACPK,KAAK,EAAE;UAAEC,UAAU,EAAE,SAAS;UAAEC,OAAO,EAAE,MAAM;UAAEC,SAAS,EAAE;QAAS;MAAE,GACxE,OACM,EAACR,CAAC,CACH;IAAA,CACP;EACH;AACF,CAAC;AAED,OAAO,IAAMS,SAAS,GAAG;EACvBf,IAAI,EAAE;IACJC,KAAK,EAAE,GAAG;IACVC,OAAO,EAAE,CAAC;IACVC,mBAAmB,EAAE,gBAAgB;IACrCC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACC,GAAG,CAAC,UAACC,CAAC;MAAA,oBACvCnB,KAAA,CAAAoB,aAAA;QACEE,GAAG,EAAEH,CAAE;QACPK,KAAK,EAAE;UAAEC,UAAU,EAAE,SAAS;UAAEC,OAAO,EAAE,KAAK;UAAEC,SAAS,EAAE;QAAS;MAAE,GAErER,CAAC,CACE;IAAA,CACP;EACH;AACF,CAAC"}

package/dist/esm/elements/CSSGrid/index.js

@@ -0,0 +1,2 @@
+export * from "./CSSGrid";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/CSSGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/CSSGrid/index.ts"],"sourcesContent":["export * from \"./CSSGrid\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Cards/Card.js

@@ -0,0 +1,73 @@
+var _excluded = ["image", "title", "subtitle", "status", "maxWidth", "aspectWidth", "aspectHeight"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import { Image } from "../Image";
+import { Box } from "../Box";
+import { Text } from "../Text";
+import { ResponsiveBox } from "../ResponsiveBox";
+import { useTheme } from "../../Theme";
+/**
+ * `Card` is a card with one image one tall image, and text for title
+ * and subtitle at the bottom.
+ */
+export var Card = function Card(_ref) {
+  var image = _ref.image,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    status = _ref.status,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 280 : _ref$maxWidth,
+    _ref$aspectWidth = _ref.aspectWidth,
+    aspectWidth = _ref$aspectWidth === void 0 ? 280 : _ref$aspectWidth,
+    _ref$aspectHeight = _ref.aspectHeight,
+    aspectHeight = _ref$aspectHeight === void 0 ? 370 : _ref$aspectHeight,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var hasInfo = title || subtitle || status;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    maxWidth: maxWidth
+  }, rest), /*#__PURE__*/React.createElement(ResponsiveBox, {
+    aspectWidth: aspectWidth,
+    aspectHeight: aspectHeight,
+    maxWidth: "100%"
+  }, /*#__PURE__*/React.createElement(Image, _extends({
+    alt: "",
+    height: "100%",
+    width: "100%",
+    style: {
+      objectFit: "cover"
+    }
+  }, typeof image === "string" ? {
+    src: image
+  } : image)), hasInfo && /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    width: "100%",
+    height: "50%",
+    bottom: 0,
+    left: 0,
+    background: theme.effects.overlayGradient
+  }), /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    p: 2,
+    style: {
+      textShadow: theme.effects.textShadow
+    }
+  }, status && /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    color: "mono0"
+  }, status), title && /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display",
+    color: "mono0"
+  }, title), subtitle && /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display",
+    color: "mono15"
+  }, subtitle))));
+};
+Card.displayName = "Card";
+//# sourceMappingURL=Card.js.map

package/dist/esm/elements/Cards/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":["React","Image","Box","Text","ResponsiveBox","useTheme","Card","_ref","image","title","subtitle","status","_ref$maxWidth","maxWidth","_ref$aspectWidth","aspectWidth","_ref$aspectHeight","aspectHeight","rest","_objectWithoutProperties","_excluded","_useTheme","theme","hasInfo","createElement","_extends","alt","height","width","style","objectFit","src","position","bottom","left","background","effects","overlayGradient","p","textShadow","variant","color","displayName"],"sources":["../../../../src/elements/Cards/Card.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface CardProps extends BoxProps {\n  image: string | ImageProps | null | undefined\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n  aspectWidth?: number\n  aspectHeight?: number\n}\n\n/**\n * `Card` is a card with one image one tall image, and text for title\n * and subtitle at the bottom.\n */\nexport const Card: React.FC<React.PropsWithChildren<CardProps>> = ({\n  image,\n  title,\n  subtitle,\n  status,\n  maxWidth = 280,\n  aspectWidth = 280,\n  aspectHeight = 370,\n  ...rest\n}) => {\n  const { theme } = useTheme()\n\n  const hasInfo = title || subtitle || status\n\n  return (\n    <Box maxWidth={maxWidth} {...rest}>\n      <ResponsiveBox\n        aspectWidth={aspectWidth}\n        aspectHeight={aspectHeight}\n        maxWidth=\"100%\"\n      >\n        <Image\n          alt=\"\"\n          height=\"100%\"\n          width=\"100%\"\n          style={{ objectFit: \"cover\" }}\n          {...(typeof image === \"string\" ? { src: image } : image)}\n        />\n\n        {hasInfo && (\n          <Box\n            position=\"absolute\"\n            width=\"100%\"\n            height=\"50%\"\n            bottom={0}\n            left={0}\n            background={theme.effects.overlayGradient}\n          />\n        )}\n\n        <Box\n          position=\"absolute\"\n          bottom={0}\n          left={0}\n          width=\"100%\"\n          p={2}\n          style={{ textShadow: theme.effects.textShadow }}\n        >\n          {status && (\n            <Text variant=\"xs\" color=\"mono0\">\n              {status}\n            </Text>\n          )}\n\n          {title && (\n            <Text variant=\"sm-display\" color=\"mono0\">\n              {title}\n            </Text>\n          )}\n\n          {subtitle && (\n            <Text variant=\"sm-display\" color=\"mono15\">\n              {subtitle}\n            </Text>\n          )}\n        </Box>\n      </ResponsiveBox>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK;AACd,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,QAAQ;AAWjB;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAkD,GAAG,SAArDA,IAAkDA,CAAAC,IAAA,EASzD;EAAA,IARJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAAC,aAAA,GAAAL,IAAA,CACNM,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,GAAG,GAAAA,aAAA;IAAAE,gBAAA,GAAAP,IAAA,CACdQ,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,GAAG,GAAAA,gBAAA;IAAAE,iBAAA,GAAAT,IAAA,CACjBU,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,GAAG,GAAAA,iBAAA;IACfE,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EAEP,IAAAC,SAAA,GAAkBhB,QAAQ,EAAE;IAApBiB,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,IAAMC,OAAO,GAAGd,KAAK,IAAIC,QAAQ,IAAIC,MAAM;EAE3C,oBACEX,KAAA,CAAAwB,aAAA,CAACtB,GAAG,EAAAuB,QAAA;IAACZ,QAAQ,EAAEA;EAAS,GAAKK,IAAI,gBAC/BlB,KAAA,CAAAwB,aAAA,CAACpB,aAAa;IACZW,WAAW,EAAEA,WAAY;IACzBE,YAAY,EAAEA,YAAa;IAC3BJ,QAAQ,EAAC;EAAM,gBAEfb,KAAA,CAAAwB,aAAA,CAACvB,KAAK,EAAAwB,QAAA;IACJC,GAAG,EAAC,EAAE;IACNC,MAAM,EAAC,MAAM;IACbC,KAAK,EAAC,MAAM;IACZC,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAQ;EAAE,GACzB,OAAOtB,KAAK,KAAK,QAAQ,GAAG;IAAEuB,GAAG,EAAEvB;EAAM,CAAC,GAAGA,KAAK,EACvD,EAEDe,OAAO,iBACNvB,KAAA,CAAAwB,aAAA,CAACtB,GAAG;IACF8B,QAAQ,EAAC,UAAU;IACnBJ,KAAK,EAAC,MAAM;IACZD,MAAM,EAAC,KAAK;IACZM,MAAM,EAAE,CAAE;IACVC,IAAI,EAAE,CAAE;IACRC,UAAU,EAAEb,KAAK,CAACc,OAAO,CAACC;EAAgB,EAE7C,eAEDrC,KAAA,CAAAwB,aAAA,CAACtB,GAAG;IACF8B,QAAQ,EAAC,UAAU;IACnBC,MAAM,EAAE,CAAE;IACVC,IAAI,EAAE,CAAE;IACRN,KAAK,EAAC,MAAM;IACZU,CAAC,EAAE,CAAE;IACLT,KAAK,EAAE;MAAEU,UAAU,EAAEjB,KAAK,CAACc,OAAO,CAACG;IAAW;EAAE,GAE/C5B,MAAM,iBACLX,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC;EAAO,GAC7B9B,MAAM,CAEV,EAEAF,KAAK,iBACJT,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC;EAAO,GACrChC,KAAK,CAET,EAEAC,QAAQ,iBACPV,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC;EAAQ,GACtC/B,QAAQ,CAEZ,CACG,CACQ,CACZ;AAEV,CAAC;AArEYJ,IAAkD,CAAAoC,WAAA"}

package/dist/esm/elements/Cards/Cards.story.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { Card } from "./Card";
+import { TriptychCard } from "./TriptychCard";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Cards",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Card components display information in a structured card format with optional images, titles, subtitles, and status information. Includes both single cards and triptych layouts."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    title: "Example Exhibition Title",
+    subtitle: "Partner Gallery",
+    status: "4 days left",
+    image: {
+      lazyLoad: true,
+      src: "https://picsum.photos/seed/example/400/300",
+      srcSet: "https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x"
+    }
+  }
+};
+export var LongTitle = {
+  args: {
+    title: "A Much Longer Exhibition Title With Possible Line Break",
+    subtitle: "Partner Gallery",
+    status: "4 days left",
+    image: {
+      lazyLoad: true,
+      src: "https://picsum.photos/seed/example/400/300",
+      srcSet: "https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x"
+    }
+  }
+};
+export var WithMaxWidth = {
+  args: {
+    title: "Example Exhibition Title",
+    subtitle: "Partner Gallery",
+    status: "4 days left",
+    maxWidth: 400,
+    image: {
+      lazyLoad: true,
+      src: "https://picsum.photos/seed/example/400/300",
+      srcSet: "https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x"
+    }
+  }
+};
+export var NoImage = {
+  args: {
+    title: "Example Exhibition Title",
+    subtitle: "Partner Gallery",
+    status: "4 days left"
+  }
+};
+export var MinimalCard = {
+  args: {}
+};
+export var TriptychCardExample = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(TriptychCard, {
+      title: "Example Triptych",
+      subtitle: "Multiple Artworks",
+      status: "Available",
+      images: [{
+        lazyLoad: true,
+        src: "https://picsum.photos/seed/example/400/400",
+        srcSet: "https://picsum.photos/seed/example/400/400 1x, https://picsum.photos/seed/example/800/800 2x"
+      }, {
+        lazyLoad: true,
+        src: "https://picsum.photos/seed/example2/200/200",
+        srcSet: "https://picsum.photos/seed/example2/200/200 1x, https://picsum.photos/seed/example2/400/400 2x"
+      }, {
+        lazyLoad: true,
+        src: "https://picsum.photos/seed/example3/200/200",
+        srcSet: "https://picsum.photos/seed/example3/200/200 1x, https://picsum.photos/seed/example3/400/400 2x"
+      }]
+    });
+  }
+};
+//# sourceMappingURL=Cards.story.js.map

package/dist/esm/elements/Cards/Cards.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cards.story.js","names":["React","Card","TriptychCard","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","subtitle","status","image","lazyLoad","src","srcSet","LongTitle","WithMaxWidth","maxWidth","NoImage","MinimalCard","TriptychCardExample","render","createElement","images"],"sources":["../../../../src/elements/Cards/Cards.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Card } from \"./Card\"\nimport { TriptychCard } from \"./TriptychCard\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Cards\",\n  component: Card,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Card components display information in a structured card format with optional images, titles, subtitles, and status information. Includes both single cards and triptych layouts.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    title: \"Example Exhibition Title\",\n    subtitle: \"Partner Gallery\",\n    status: \"4 days left\",\n    image: {\n      lazyLoad: true,\n      src: \"https://picsum.photos/seed/example/400/300\",\n      srcSet:\n        \"https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x\",\n    },\n  },\n}\n\nexport const LongTitle = {\n  args: {\n    title: \"A Much Longer Exhibition Title With Possible Line Break\",\n    subtitle: \"Partner Gallery\",\n    status: \"4 days left\",\n    image: {\n      lazyLoad: true,\n      src: \"https://picsum.photos/seed/example/400/300\",\n      srcSet:\n        \"https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x\",\n    },\n  },\n}\n\nexport const WithMaxWidth = {\n  args: {\n    title: \"Example Exhibition Title\",\n    subtitle: \"Partner Gallery\",\n    status: \"4 days left\",\n    maxWidth: 400,\n    image: {\n      lazyLoad: true,\n      src: \"https://picsum.photos/seed/example/400/300\",\n      srcSet:\n        \"https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x\",\n    },\n  },\n}\n\nexport const NoImage = {\n  args: {\n    title: \"Example Exhibition Title\",\n    subtitle: \"Partner Gallery\",\n    status: \"4 days left\",\n  },\n}\n\nexport const MinimalCard = {\n  args: {},\n}\n\nexport const TriptychCardExample = {\n  render: () => (\n    <TriptychCard\n      title=\"Example Triptych\"\n      subtitle=\"Multiple Artworks\"\n      status=\"Available\"\n      images={[\n        {\n          lazyLoad: true,\n          src: \"https://picsum.photos/seed/example/400/400\",\n          srcSet:\n            \"https://picsum.photos/seed/example/400/400 1x, https://picsum.photos/seed/example/800/800 2x\",\n        },\n        {\n          lazyLoad: true,\n          src: \"https://picsum.photos/seed/example2/200/200\",\n          srcSet:\n            \"https://picsum.photos/seed/example2/200/200 1x, https://picsum.photos/seed/example2/400/400 2x\",\n        },\n        {\n          lazyLoad: true,\n          src: \"https://picsum.photos/seed/example3/200/200\",\n          srcSet:\n            \"https://picsum.photos/seed/example3/200/200 1x, https://picsum.photos/seed/example3/400/400 2x\",\n        },\n      ]}\n    />\n  ),\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,YAAY;AACrB,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,kBAAkB;EACzBC,SAAS,EAAEJ,IAAI;EACfK,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXJ,SAAS,EACP;MACJ;IACF,CAAC;IACDK,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJT,KAAK,EAAE,0BAA0B;IACjCU,QAAQ,EAAE,iBAAiB;IAC3BC,MAAM,EAAE,aAAa;IACrBC,KAAK,EAAE;MACLC,QAAQ,EAAE,IAAI;MACdC,GAAG,EAAE,4CAA4C;MACjDC,MAAM,EACJ;IACJ;EACF;AACF,CAAC;AAED,OAAO,IAAMC,SAAS,GAAG;EACvBP,IAAI,EAAE;IACJT,KAAK,EAAE,yDAAyD;IAChEU,QAAQ,EAAE,iBAAiB;IAC3BC,MAAM,EAAE,aAAa;IACrBC,KAAK,EAAE;MACLC,QAAQ,EAAE,IAAI;MACdC,GAAG,EAAE,4CAA4C;MACjDC,MAAM,EACJ;IACJ;EACF;AACF,CAAC;AAED,OAAO,IAAME,YAAY,GAAG;EAC1BR,IAAI,EAAE;IACJT,KAAK,EAAE,0BAA0B;IACjCU,QAAQ,EAAE,iBAAiB;IAC3BC,MAAM,EAAE,aAAa;IACrBO,QAAQ,EAAE,GAAG;IACbN,KAAK,EAAE;MACLC,QAAQ,EAAE,IAAI;MACdC,GAAG,EAAE,4CAA4C;MACjDC,MAAM,EACJ;IACJ;EACF;AACF,CAAC;AAED,OAAO,IAAMI,OAAO,GAAG;EACrBV,IAAI,EAAE;IACJT,KAAK,EAAE,0BAA0B;IACjCU,QAAQ,EAAE,iBAAiB;IAC3BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,IAAMS,WAAW,GAAG;EACzBX,IAAI,EAAE,CAAC;AACT,CAAC;AAED,OAAO,IAAMY,mBAAmB,GAAG;EACjCC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ1B,KAAA,CAAA2B,aAAA,CAACzB,YAAY;MACXE,KAAK,EAAC,kBAAkB;MACxBU,QAAQ,EAAC,mBAAmB;MAC5BC,MAAM,EAAC,WAAW;MAClBa,MAAM,EAAE,CACN;QACEX,QAAQ,EAAE,IAAI;QACdC,GAAG,EAAE,4CAA4C;QACjDC,MAAM,EACJ;MACJ,CAAC,EACD;QACEF,QAAQ,EAAE,IAAI;QACdC,GAAG,EAAE,6CAA6C;QAClDC,MAAM,EACJ;MACJ,CAAC,EACD;QACEF,QAAQ,EAAE,IAAI;QACdC,GAAG,EAAE,6CAA6C;QAClDC,MAAM,EACJ;MACJ,CAAC;IACD,EACF;EAAA;AAEN,CAAC"}