@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/dist/Card/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","names":["React","useContext","PropTypes","classNames","Skeleton","CardContext","IS_LOADING_HEIGHT_VALUE","CardFooter","forwardRef","_ref","ref","children","className","isStacked","textElement","skeletonHeight","skeletonWidth","orientation","cardOrientation","isLoading","footerOrientation","wrapperClassName","textElementClassName","createElement","containerClassName","height","width","propTypes","node","string","bool","oneOf","number","defaultProps","undefined"],"sources":["../../src/Card/CardFooter.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\n\nconst IS_LOADING_HEIGHT_VALUE = 18;\n\nconst CardFooter = React.forwardRef(({\n  children,\n  className,\n  isStacked,\n  textElement,\n  skeletonHeight,\n  skeletonWidth,\n  orientation,\n}, ref) => {\n  const { orientation: cardOrientation, isLoading } = useContext(CardContext);\n  const footerOrientation = orientation || cardOrientation;\n  const wrapperClassName = `pgn__card-footer ${footerOrientation}${isStacked ? '-stacked' : ''}`;\n  const textElementClassName = `pgn__card-footer-text ${footerOrientation}${isStacked ? '-stacked' : ''}`;\n\n  if (isLoading) {\n    return (\n      <div className={classNames(className, wrapperClassName)}>\n        <Skeleton\n          containerClassName=\"pgn__card-footer-loader\"\n          height={skeletonHeight}\n          width={skeletonWidth}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames(className, wrapperClassName)} ref={ref}>\n      {textElement && <div className={textElementClassName}>{textElement}</div>}\n      {children}\n    </div>\n  );\n});\n\nCardFooter.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Optional node to display near actions. Should be either a plain text or an element containing text (e.g. link). */\n  textElement: PropTypes.node,\n  /** Specifies whether to use stacked variant. */\n  isStacked: PropTypes.bool,\n  /** Specifies which orientation to use. This prop will override context value if provided. */\n  orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n  /** Specifies height of skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n};\n\nCardFooter.defaultProps = {\n  children: null,\n  className: undefined,\n  textElement: undefined,\n  isStacked: false,\n  orientation: undefined,\n  skeletonHeight: IS_LOADING_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n};\n\nexport default CardFooter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,WAAW,MAAM,eAAe;AAEvC,MAAMC,uBAAuB,GAAG,EAAE;AAElC,MAAMC,UAAU,gBAAGP,KAAK,CAACQ,UAAU,CAAC,CAAAC,IAAA,EAQjCC,GAAG,KAAK;EAAA,IAR0B;IACnCC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,cAAc;IACdC,aAAa;IACbC;EACF,CAAC,GAAAR,IAAA;EACC,MAAM;IAAEQ,WAAW,EAAEC,eAAe;IAAEC;EAAU,CAAC,GAAGlB,UAAU,CAACI,WAAW,CAAC;EAC3E,MAAMe,iBAAiB,GAAGH,WAAW,IAAIC,eAAe;EACxD,MAAMG,gBAAgB,GAAI,oBAAmBD,iBAAkB,GAAEP,SAAS,GAAG,UAAU,GAAG,EAAG,EAAC;EAC9F,MAAMS,oBAAoB,GAAI,yBAAwBF,iBAAkB,GAAEP,SAAS,GAAG,UAAU,GAAG,EAAG,EAAC;EAEvG,IAAIM,SAAS,EAAE;IACb,oBACEnB,KAAA,CAAAuB,aAAA;MAAKX,SAAS,EAAET,UAAU,CAACS,SAAS,EAAES,gBAAgB;IAAE,gBACtDrB,KAAA,CAAAuB,aAAA,CAACnB,QAAQ;MACPoB,kBAAkB,EAAC,yBAAyB;MAC5CC,MAAM,EAAEV,cAAe;MACvBW,KAAK,EAAEV;IAAc,CACtB,CACE,CAAC;EAEV;EAEA,oBACEhB,KAAA,CAAAuB,aAAA;IAAKX,SAAS,EAAET,UAAU,CAACS,SAAS,EAAES,gBAAgB,CAAE;IAACX,GAAG,EAAEA;EAAI,GAC/DI,WAAW,iBAAId,KAAA,CAAAuB,aAAA;IAAKX,SAAS,EAAEU;EAAqB,GAAER,WAAiB,CAAC,EACxEH,QACE,CAAC;AAEV,CAAC,CAAC;AAEFJ,UAAU,CAACoB,SAAS,GAAG;EACrB;EACAhB,QAAQ,EAAET,SAAS,CAAC0B,IAAI;EACxB;EACAhB,SAAS,EAAEV,SAAS,CAAC2B,MAAM;EAC3B;EACAf,WAAW,EAAEZ,SAAS,CAAC0B,IAAI;EAC3B;EACAf,SAAS,EAAEX,SAAS,CAAC4B,IAAI;EACzB;EACAb,WAAW,EAAEf,SAAS,CAAC6B,KAAK,CAAC,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;EACxD;EACAhB,cAAc,EAAEb,SAAS,CAAC8B,MAAM;EAChC;EACAhB,aAAa,EAAEd,SAAS,CAAC8B;AAC3B,CAAC;AAEDzB,UAAU,CAAC0B,YAAY,GAAG;EACxBtB,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAEsB,SAAS;EACpBpB,WAAW,EAAEoB,SAAS;EACtBrB,SAAS,EAAE,KAAK;EAChBI,WAAW,EAAEiB,SAAS;EACtBnB,cAAc,EAAET,uBAAuB;EACvCU,aAAa,EAAEkB;AACjB,CAAC;AAED,eAAe3B,UAAU"}
+{"version":3,"file":"CardFooter.js","names":["React","useContext","PropTypes","classNames","Skeleton","CardContext","IS_LOADING_HEIGHT_VALUE","CardFooter","forwardRef","_ref","ref","children","className","isStacked","textElement","skeletonHeight","skeletonWidth","orientation","_useContext","cardOrientation","isLoading","footerOrientation","wrapperClassName","concat","textElementClassName","createElement","containerClassName","height","width","propTypes","node","string","bool","oneOf","number","defaultProps","undefined"],"sources":["../../src/Card/CardFooter.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\n\nconst IS_LOADING_HEIGHT_VALUE = 18;\n\nconst CardFooter = React.forwardRef(({\n  children,\n  className,\n  isStacked,\n  textElement,\n  skeletonHeight,\n  skeletonWidth,\n  orientation,\n}, ref) => {\n  const { orientation: cardOrientation, isLoading } = useContext(CardContext);\n  const footerOrientation = orientation || cardOrientation;\n  const wrapperClassName = `pgn__card-footer ${footerOrientation}${isStacked ? '-stacked' : ''}`;\n  const textElementClassName = `pgn__card-footer-text ${footerOrientation}${isStacked ? '-stacked' : ''}`;\n\n  if (isLoading) {\n    return (\n      <div className={classNames(className, wrapperClassName)}>\n        <Skeleton\n          containerClassName=\"pgn__card-footer-loader\"\n          height={skeletonHeight}\n          width={skeletonWidth}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames(className, wrapperClassName)} ref={ref}>\n      {textElement && <div className={textElementClassName}>{textElement}</div>}\n      {children}\n    </div>\n  );\n});\n\nCardFooter.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Optional node to display near actions. Should be either a plain text or an element containing text (e.g. link). */\n  textElement: PropTypes.node,\n  /** Specifies whether to use stacked variant. */\n  isStacked: PropTypes.bool,\n  /** Specifies which orientation to use. This prop will override context value if provided. */\n  orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n  /** Specifies height of skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n};\n\nCardFooter.defaultProps = {\n  children: null,\n  className: undefined,\n  textElement: undefined,\n  isStacked: false,\n  orientation: undefined,\n  skeletonHeight: IS_LOADING_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n};\n\nexport default CardFooter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,WAAW,MAAM,eAAe;AAEvC,IAAMC,uBAAuB,GAAG,EAAE;AAElC,IAAMC,UAAU,gBAAGP,KAAK,CAACQ,UAAU,CAAC,UAAAC,IAAA,EAQjCC,GAAG,EAAK;EAAA,IAPTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,cAAc,GAAAN,IAAA,CAAdM,cAAc;IACdC,aAAa,GAAAP,IAAA,CAAbO,aAAa;IACbC,WAAW,GAAAR,IAAA,CAAXQ,WAAW;EAEX,IAAAC,WAAA,GAAoDjB,UAAU,CAACI,WAAW,CAAC;IAAtDc,eAAe,GAAAD,WAAA,CAA5BD,WAAW;IAAmBG,SAAS,GAAAF,WAAA,CAATE,SAAS;EAC/C,IAAMC,iBAAiB,GAAGJ,WAAW,IAAIE,eAAe;EACxD,IAAMG,gBAAgB,uBAAAC,MAAA,CAAuBF,iBAAiB,EAAAE,MAAA,CAAGV,SAAS,GAAG,UAAU,GAAG,EAAE,CAAE;EAC9F,IAAMW,oBAAoB,4BAAAD,MAAA,CAA4BF,iBAAiB,EAAAE,MAAA,CAAGV,SAAS,GAAG,UAAU,GAAG,EAAE,CAAE;EAEvG,IAAIO,SAAS,EAAE;IACb,oBACEpB,KAAA,CAAAyB,aAAA;MAAKb,SAAS,EAAET,UAAU,CAACS,SAAS,EAAEU,gBAAgB;IAAE,gBACtDtB,KAAA,CAAAyB,aAAA,CAACrB,QAAQ;MACPsB,kBAAkB,EAAC,yBAAyB;MAC5CC,MAAM,EAAEZ,cAAe;MACvBa,KAAK,EAAEZ;IAAc,CACtB,CACE,CAAC;EAEV;EAEA,oBACEhB,KAAA,CAAAyB,aAAA;IAAKb,SAAS,EAAET,UAAU,CAACS,SAAS,EAAEU,gBAAgB,CAAE;IAACZ,GAAG,EAAEA;EAAI,GAC/DI,WAAW,iBAAId,KAAA,CAAAyB,aAAA;IAAKb,SAAS,EAAEY;EAAqB,GAAEV,WAAiB,CAAC,EACxEH,QACE,CAAC;AAEV,CAAC,CAAC;AAEFJ,UAAU,CAACsB,SAAS,GAAG;EACrB;EACAlB,QAAQ,EAAET,SAAS,CAAC4B,IAAI;EACxB;EACAlB,SAAS,EAAEV,SAAS,CAAC6B,MAAM;EAC3B;EACAjB,WAAW,EAAEZ,SAAS,CAAC4B,IAAI;EAC3B;EACAjB,SAAS,EAAEX,SAAS,CAAC8B,IAAI;EACzB;EACAf,WAAW,EAAEf,SAAS,CAAC+B,KAAK,CAAC,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;EACxD;EACAlB,cAAc,EAAEb,SAAS,CAACgC,MAAM;EAChC;EACAlB,aAAa,EAAEd,SAAS,CAACgC;AAC3B,CAAC;AAED3B,UAAU,CAAC4B,YAAY,GAAG;EACxBxB,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAEwB,SAAS;EACpBtB,WAAW,EAAEsB,SAAS;EACtBvB,SAAS,EAAE,KAAK;EAChBI,WAAW,EAAEmB,SAAS;EACtBrB,cAAc,EAAET,uBAAuB;EACvCU,aAAa,EAAEoB;AACjB,CAAC;AAED,eAAe7B,UAAU"}

package/dist/Card/CardGrid.js

@@ -5,17 +5,19 @@ import PropTypes from 'prop-types';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 function CardGrid(_ref) {
-  let {
-    className,
-    children,
-    columnSizes,
-    hasEqualColumnHeights
-  } = _ref;
-  const cards = useMemo(() => React.Children.map(children, card => /*#__PURE__*/React.createElement(Col, _extends({}, columnSizes, {
-    className: classNames('pgn__card-grid__card-item', {
-      'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights
-    })
-  }), card)), [children, columnSizes, hasEqualColumnHeights]);
+  var className = _ref.className,
+    children = _ref.children,
+    columnSizes = _ref.columnSizes,
+    hasEqualColumnHeights = _ref.hasEqualColumnHeights;
+  var cards = useMemo(function () {
+    return React.Children.map(children, function (card) {
+      return /*#__PURE__*/React.createElement(Col, _extends({}, columnSizes, {
+        className: classNames('pgn__card-grid__card-item', {
+          'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights
+        })
+      }), card);
+    });
+  }, [children, columnSizes, hasEqualColumnHeights]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pgn__card-grid', className)
   }, /*#__PURE__*/React.createElement(Row, null, cards));

package/dist/Card/CardGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.js","names":["React","useMemo","classNames","PropTypes","Row","Col","CardGrid","_ref","className","children","columnSizes","hasEqualColumnHeights","cards","Children","map","card","createElement","_extends","propTypes","string","node","isRequired","shape","xs","number","sm","md","lg","xl","bool","defaultProps","undefined"],"sources":["../../src/Card/CardGrid.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\n\nfunction CardGrid({\n  className,\n  children,\n  columnSizes,\n  hasEqualColumnHeights,\n}) {\n  const cards = useMemo(\n    () => React.Children.map(children, (card) => (\n      <Col\n        {...columnSizes}\n        className={classNames(\n          'pgn__card-grid__card-item',\n          {\n            'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights,\n          },\n        )}\n      >\n        {card}\n      </Col>\n    )),\n    [children, columnSizes, hasEqualColumnHeights],\n  );\n\n  return (\n    <div className={classNames('pgn__card-grid', className)}>\n      <Row>\n        {cards}\n      </Row>\n    </div>\n  );\n}\n\nCardGrid.propTypes = {\n  /** The class name for the CardGrid component */\n  className: PropTypes.string,\n  /** The Card components to organize into a responsive grid */\n  children: PropTypes.node.isRequired,\n  /**\n   * An object containing the desired column size at each breakpoint, following a similar\n   * props API as ``react-bootstrap/Col``\n   */\n  columnSizes: PropTypes.shape({\n    xs: PropTypes.number,\n    sm: PropTypes.number,\n    md: PropTypes.number,\n    lg: PropTypes.number,\n    xl: PropTypes.number,\n  }),\n  /** Whether to disable the default equal height cards across rows in the card grid */\n  hasEqualColumnHeights: PropTypes.bool,\n};\n\nCardGrid.defaultProps = {\n  className: undefined,\n  columnSizes: {\n    sm: 12,\n    lg: 6,\n    xl: 4,\n  },\n  hasEqualColumnHeights: true,\n};\n\nexport default CardGrid;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,GAAG,MAAM,qBAAqB;AACrC,OAAOC,GAAG,MAAM,qBAAqB;AAErC,SAASC,QAAQA,CAAAC,IAAA,EAKd;EAAA,IALe;IAChBC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC;EACF,CAAC,GAAAJ,IAAA;EACC,MAAMK,KAAK,GAAGX,OAAO,CACnB,MAAMD,KAAK,CAACa,QAAQ,CAACC,GAAG,CAACL,QAAQ,EAAGM,IAAI,iBACtCf,KAAA,CAAAgB,aAAA,CAACX,GAAG,EAAAY,QAAA,KACEP,WAAW;IACfF,SAAS,EAAEN,UAAU,CACnB,2BAA2B,EAC3B;MACE,yCAAyC,EAAE,CAACS;IAC9C,CACF;EAAE,IAEDI,IACE,CACN,CAAC,EACF,CAACN,QAAQ,EAAEC,WAAW,EAAEC,qBAAqB,CAC/C,CAAC;EAED,oBACEX,KAAA,CAAAgB,aAAA;IAAKR,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS;EAAE,gBACtDR,KAAA,CAAAgB,aAAA,CAACZ,GAAG,QACDQ,KACE,CACF,CAAC;AAEV;AAEAN,QAAQ,CAACY,SAAS,GAAG;EACnB;EACAV,SAAS,EAAEL,SAAS,CAACgB,MAAM;EAC3B;EACAV,QAAQ,EAAEN,SAAS,CAACiB,IAAI,CAACC,UAAU;EACnC;AACF;AACA;AACA;EACEX,WAAW,EAAEP,SAAS,CAACmB,KAAK,CAAC;IAC3BC,EAAE,EAAEpB,SAAS,CAACqB,MAAM;IACpBC,EAAE,EAAEtB,SAAS,CAACqB,MAAM;IACpBE,EAAE,EAAEvB,SAAS,CAACqB,MAAM;IACpBG,EAAE,EAAExB,SAAS,CAACqB,MAAM;IACpBI,EAAE,EAAEzB,SAAS,CAACqB;EAChB,CAAC,CAAC;EACF;EACAb,qBAAqB,EAAER,SAAS,CAAC0B;AACnC,CAAC;AAEDvB,QAAQ,CAACwB,YAAY,GAAG;EACtBtB,SAAS,EAAEuB,SAAS;EACpBrB,WAAW,EAAE;IACXe,EAAE,EAAE,EAAE;IACNE,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE;EACN,CAAC;EACDjB,qBAAqB,EAAE;AACzB,CAAC;AAED,eAAeL,QAAQ"}
+{"version":3,"file":"CardGrid.js","names":["React","useMemo","classNames","PropTypes","Row","Col","CardGrid","_ref","className","children","columnSizes","hasEqualColumnHeights","cards","Children","map","card","createElement","_extends","propTypes","string","node","isRequired","shape","xs","number","sm","md","lg","xl","bool","defaultProps","undefined"],"sources":["../../src/Card/CardGrid.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\n\nfunction CardGrid({\n  className,\n  children,\n  columnSizes,\n  hasEqualColumnHeights,\n}) {\n  const cards = useMemo(\n    () => React.Children.map(children, (card) => (\n      <Col\n        {...columnSizes}\n        className={classNames(\n          'pgn__card-grid__card-item',\n          {\n            'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights,\n          },\n        )}\n      >\n        {card}\n      </Col>\n    )),\n    [children, columnSizes, hasEqualColumnHeights],\n  );\n\n  return (\n    <div className={classNames('pgn__card-grid', className)}>\n      <Row>\n        {cards}\n      </Row>\n    </div>\n  );\n}\n\nCardGrid.propTypes = {\n  /** The class name for the CardGrid component */\n  className: PropTypes.string,\n  /** The Card components to organize into a responsive grid */\n  children: PropTypes.node.isRequired,\n  /**\n   * An object containing the desired column size at each breakpoint, following a similar\n   * props API as ``react-bootstrap/Col``\n   */\n  columnSizes: PropTypes.shape({\n    xs: PropTypes.number,\n    sm: PropTypes.number,\n    md: PropTypes.number,\n    lg: PropTypes.number,\n    xl: PropTypes.number,\n  }),\n  /** Whether to disable the default equal height cards across rows in the card grid */\n  hasEqualColumnHeights: PropTypes.bool,\n};\n\nCardGrid.defaultProps = {\n  className: undefined,\n  columnSizes: {\n    sm: 12,\n    lg: 6,\n    xl: 4,\n  },\n  hasEqualColumnHeights: true,\n};\n\nexport default CardGrid;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,GAAG,MAAM,qBAAqB;AACrC,OAAOC,GAAG,MAAM,qBAAqB;AAErC,SAASC,QAAQA,CAAAC,IAAA,EAKd;EAAA,IAJDC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,qBAAqB,GAAAJ,IAAA,CAArBI,qBAAqB;EAErB,IAAMC,KAAK,GAAGX,OAAO,CACnB;IAAA,OAAMD,KAAK,CAACa,QAAQ,CAACC,GAAG,CAACL,QAAQ,EAAE,UAACM,IAAI;MAAA,oBACtCf,KAAA,CAAAgB,aAAA,CAACX,GAAG,EAAAY,QAAA,KACEP,WAAW;QACfF,SAAS,EAAEN,UAAU,CACnB,2BAA2B,EAC3B;UACE,yCAAyC,EAAE,CAACS;QAC9C,CACF;MAAE,IAEDI,IACE,CAAC;IAAA,CACP,CAAC;EAAA,GACF,CAACN,QAAQ,EAAEC,WAAW,EAAEC,qBAAqB,CAC/C,CAAC;EAED,oBACEX,KAAA,CAAAgB,aAAA;IAAKR,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS;EAAE,gBACtDR,KAAA,CAAAgB,aAAA,CAACZ,GAAG,QACDQ,KACE,CACF,CAAC;AAEV;AAEAN,QAAQ,CAACY,SAAS,GAAG;EACnB;EACAV,SAAS,EAAEL,SAAS,CAACgB,MAAM;EAC3B;EACAV,QAAQ,EAAEN,SAAS,CAACiB,IAAI,CAACC,UAAU;EACnC;AACF;AACA;AACA;EACEX,WAAW,EAAEP,SAAS,CAACmB,KAAK,CAAC;IAC3BC,EAAE,EAAEpB,SAAS,CAACqB,MAAM;IACpBC,EAAE,EAAEtB,SAAS,CAACqB,MAAM;IACpBE,EAAE,EAAEvB,SAAS,CAACqB,MAAM;IACpBG,EAAE,EAAExB,SAAS,CAACqB,MAAM;IACpBI,EAAE,EAAEzB,SAAS,CAACqB;EAChB,CAAC,CAAC;EACF;EACAb,qBAAqB,EAAER,SAAS,CAAC0B;AACnC,CAAC;AAEDvB,QAAQ,CAACwB,YAAY,GAAG;EACtBtB,SAAS,EAAEuB,SAAS;EACpBrB,WAAW,EAAE;IACXe,EAAE,EAAE,EAAE;IACNE,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE;EACN,CAAC;EACDjB,qBAAqB,EAAE;AACzB,CAAC;AAED,eAAeL,QAAQ"}

package/dist/Card/CardHeader.js

@@ -3,27 +3,22 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
-const SKELETON_HEIGHT_VALUE = 20;
-const CardHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    actions,
-    className,
-    size,
-    subtitle,
-    title,
-    skeletonHeight,
-    skeletonWidth
-  } = _ref;
-  const {
-    isLoading
-  } = useContext(CardContext);
-  const cloneActions = useCallback(Action => {
+var SKELETON_HEIGHT_VALUE = 20;
+var CardHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var actions = _ref.actions,
+    className = _ref.className,
+    size = _ref.size,
+    subtitle = _ref.subtitle,
+    title = _ref.title,
+    skeletonHeight = _ref.skeletonHeight,
+    skeletonWidth = _ref.skeletonWidth;
+  var _useContext = useContext(CardContext),
+    isLoading = _useContext.isLoading;
+  var cloneActions = useCallback(function (Action) {
     if ( /*#__PURE__*/React.isValidElement(Action)) {
-      const {
-        children
-      } = Action.props;
-      const addtlActionProps = {
-        size,
+      var children = Action.props.children;
+      var addtlActionProps = {
+        size: size,
         children: Array.isArray(children) ? children.map(cloneActions) : cloneActions(children)
       };
       return /*#__PURE__*/React.cloneElement(Action, addtlActionProps);
@@ -45,9 +40,9 @@ const CardHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "pgn__card-header-content"
   }, title && /*#__PURE__*/React.createElement("div", {
-    className: `pgn__card-header-title-${size}`
+    className: "pgn__card-header-title-".concat(size)
   }, title), subtitle && /*#__PURE__*/React.createElement("div", {
-    className: `pgn__card-header-subtitle-${size}`
+    className: "pgn__card-header-subtitle-".concat(size)
   }, subtitle)), actions && /*#__PURE__*/React.createElement("div", {
     className: "pgn__card-header-actions"
   }, size !== 'md' ? cloneActions(actions) : actions));

package/dist/Card/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","names":["React","useCallback","useContext","PropTypes","classNames","Skeleton","CardContext","SKELETON_HEIGHT_VALUE","CardHeader","forwardRef","_ref","ref","actions","className","size","subtitle","title","skeletonHeight","skeletonWidth","isLoading","cloneActions","Action","isValidElement","children","props","addtlActionProps","Array","isArray","map","cloneElement","createElement","containerClassName","height","width","propTypes","node","string","oneOf","number","defaultProps"],"sources":["../../src/Card/CardHeader.jsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\n\nconst SKELETON_HEIGHT_VALUE = 20;\n\nconst CardHeader = React.forwardRef(({\n  actions,\n  className,\n  size,\n  subtitle,\n  title,\n  skeletonHeight,\n  skeletonWidth,\n}, ref) => {\n  const { isLoading } = useContext(CardContext);\n  const cloneActions = useCallback(\n    (Action) => {\n      if (React.isValidElement(Action)) {\n        const { children } = Action.props;\n        const addtlActionProps = {\n          size,\n          children: Array.isArray(children) ? children.map(cloneActions) : cloneActions(children),\n        };\n        return React.cloneElement(Action, addtlActionProps);\n      }\n\n      return Action;\n    },\n    [size],\n  );\n\n  if (isLoading) {\n    return (\n      <div className={classNames('pgn__card-header', className)}>\n        <Skeleton\n          containerClassName=\"pgn__card-header-loader\"\n          height={skeletonHeight}\n          width={skeletonWidth}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames('pgn__card-header', className)} ref={ref}>\n      <div className=\"pgn__card-header-content\">\n        {title && <div className={`pgn__card-header-title-${size}`}>{title}</div>}\n        {subtitle && <div className={`pgn__card-header-subtitle-${size}`}>{subtitle}</div>}\n      </div>\n      {actions && (\n        <div className=\"pgn__card-header-actions\">\n          {size !== 'md' ? cloneActions(actions) : actions}\n        </div>\n      )}\n    </div>\n  );\n});\n\nCardHeader.propTypes = {\n  /** Optional node to render on the top right of the card header,\n   *  i.e. ActionRow or a DropdownMenu.\n   * */\n  actions: PropTypes.node,\n  /** The class name for the CardHeader component */\n  className: PropTypes.string,\n  /** The title for the CardHeader component */\n  title: PropTypes.node,\n  /** The size of the CardHeader component */\n  size: PropTypes.oneOf(['sm', 'md']),\n  /** The subtitle of the CardHeader component */\n  subtitle: PropTypes.node,\n  /** Specifies height of skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of  skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n};\n\nCardHeader.defaultProps = {\n  actions: null,\n  className: null,\n  size: 'md',\n  title: null,\n  subtitle: null,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  skeletonWidth: null,\n};\n\nexport default CardHeader;\n"],"mappings":"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"}
+{"version":3,"file":"CardHeader.js","names":["React","useCallback","useContext","PropTypes","classNames","Skeleton","CardContext","SKELETON_HEIGHT_VALUE","CardHeader","forwardRef","_ref","ref","actions","className","size","subtitle","title","skeletonHeight","skeletonWidth","_useContext","isLoading","cloneActions","Action","isValidElement","children","props","addtlActionProps","Array","isArray","map","cloneElement","createElement","containerClassName","height","width","concat","propTypes","node","string","oneOf","number","defaultProps"],"sources":["../../src/Card/CardHeader.jsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\n\nconst SKELETON_HEIGHT_VALUE = 20;\n\nconst CardHeader = React.forwardRef(({\n  actions,\n  className,\n  size,\n  subtitle,\n  title,\n  skeletonHeight,\n  skeletonWidth,\n}, ref) => {\n  const { isLoading } = useContext(CardContext);\n  const cloneActions = useCallback(\n    (Action) => {\n      if (React.isValidElement(Action)) {\n        const { children } = Action.props;\n        const addtlActionProps = {\n          size,\n          children: Array.isArray(children) ? children.map(cloneActions) : cloneActions(children),\n        };\n        return React.cloneElement(Action, addtlActionProps);\n      }\n\n      return Action;\n    },\n    [size],\n  );\n\n  if (isLoading) {\n    return (\n      <div className={classNames('pgn__card-header', className)}>\n        <Skeleton\n          containerClassName=\"pgn__card-header-loader\"\n          height={skeletonHeight}\n          width={skeletonWidth}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames('pgn__card-header', className)} ref={ref}>\n      <div className=\"pgn__card-header-content\">\n        {title && <div className={`pgn__card-header-title-${size}`}>{title}</div>}\n        {subtitle && <div className={`pgn__card-header-subtitle-${size}`}>{subtitle}</div>}\n      </div>\n      {actions && (\n        <div className=\"pgn__card-header-actions\">\n          {size !== 'md' ? cloneActions(actions) : actions}\n        </div>\n      )}\n    </div>\n  );\n});\n\nCardHeader.propTypes = {\n  /** Optional node to render on the top right of the card header,\n   *  i.e. ActionRow or a DropdownMenu.\n   * */\n  actions: PropTypes.node,\n  /** The class name for the CardHeader component */\n  className: PropTypes.string,\n  /** The title for the CardHeader component */\n  title: PropTypes.node,\n  /** The size of the CardHeader component */\n  size: PropTypes.oneOf(['sm', 'md']),\n  /** The subtitle of the CardHeader component */\n  subtitle: PropTypes.node,\n  /** Specifies height of skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of  skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n};\n\nCardHeader.defaultProps = {\n  actions: null,\n  className: null,\n  size: 'md',\n  title: null,\n  subtitle: null,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  skeletonWidth: null,\n};\n\nexport default CardHeader;\n"],"mappings":"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"}

package/dist/Card/CardImageCap.js

@@ -1,34 +1,43 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
 import cardSrcFallbackImg from './fallback-default.png';
-const SKELETON_HEIGHT_VALUE = 140;
-const LOGO_SKELETON_HEIGHT_VALUE = 41;
-const CardImageCap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    src,
-    fallbackSrc,
-    srcAlt,
-    logoSrc,
-    fallbackLogoSrc,
-    logoAlt,
-    skeletonHeight,
-    skeletonWidth,
-    logoSkeleton,
-    logoSkeletonHeight,
-    logoSkeletonWidth,
-    className,
-    imageLoadingType
-  } = _ref;
-  const {
-    orientation,
-    isLoading
-  } = useContext(CardContext);
-  const [showImageCap, setShowImageCap] = useState(false);
-  const [showLogoCap, setShowLogoCap] = useState(false);
-  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
+var SKELETON_HEIGHT_VALUE = 140;
+var LOGO_SKELETON_HEIGHT_VALUE = 41;
+var CardImageCap = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var src = _ref.src,
+    fallbackSrc = _ref.fallbackSrc,
+    srcAlt = _ref.srcAlt,
+    logoSrc = _ref.logoSrc,
+    fallbackLogoSrc = _ref.fallbackLogoSrc,
+    logoAlt = _ref.logoAlt,
+    skeletonHeight = _ref.skeletonHeight,
+    skeletonWidth = _ref.skeletonWidth,
+    logoSkeleton = _ref.logoSkeleton,
+    logoSkeletonHeight = _ref.logoSkeletonHeight,
+    logoSkeletonWidth = _ref.logoSkeletonWidth,
+    className = _ref.className,
+    imageLoadingType = _ref.imageLoadingType;
+  var _useContext = useContext(CardContext),
+    orientation = _useContext.orientation,
+    isLoading = _useContext.isLoading;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showImageCap = _useState2[0],
+    setShowImageCap = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showLogoCap = _useState4[0],
+    setShowLogoCap = _useState4[1];
+  var wrapperClassName = "pgn__card-wrapper-image-cap ".concat(orientation);
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(wrapperClassName, className),
@@ -43,10 +52,8 @@ const CardImageCap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       width: logoSkeletonWidth
     }));
   }
-  const handleSrcFallback = (event, altSrc, imageKey) => {
-    const {
-      currentTarget
-    } = event;
+  var handleSrcFallback = function handleSrcFallback(event, altSrc, imageKey) {
+    var currentTarget = event.currentTarget;
     if (!altSrc || currentTarget.src.endsWith(altSrc)) {
       if (imageKey === 'imageCap') {
         currentTarget.src = cardSrcFallbackImg;
@@ -65,8 +72,12 @@ const CardImageCap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       show: showImageCap
     }),
     src: src,
-    onError: event => handleSrcFallback(event, fallbackSrc, 'imageCap'),
-    onLoad: () => setShowImageCap(true),
+    onError: function onError(event) {
+      return handleSrcFallback(event, fallbackSrc, 'imageCap');
+    },
+    onLoad: function onLoad() {
+      return setShowImageCap(true);
+    },
     alt: srcAlt,
     loading: imageLoadingType
   }), !!logoSrc && /*#__PURE__*/React.createElement("img", {
@@ -74,8 +85,12 @@ const CardImageCap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       show: showLogoCap
     }),
     src: logoSrc,
-    onError: event => handleSrcFallback(event, fallbackLogoSrc, 'logoCap'),
-    onLoad: () => setShowLogoCap(true),
+    onError: function onError(event) {
+      return handleSrcFallback(event, fallbackLogoSrc, 'logoCap');
+    },
+    onLoad: function onLoad() {
+      return setShowLogoCap(true);
+    },
     alt: logoAlt,
     loading: imageLoadingType
   }));

package/dist/Card/CardImageCap.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","_ref","ref","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","orientation","isLoading","showImageCap","setShowImageCap","showLogoCap","setShowLogoCap","wrapperClassName","createElement","containerClassName","height","width","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport cardSrcFallbackImg from './fallback-default.png';\n\nconst SKELETON_HEIGHT_VALUE = 140;\nconst LOGO_SKELETON_HEIGHT_VALUE = 41;\n\nconst CardImageCap = React.forwardRef(({\n  src,\n  fallbackSrc,\n  srcAlt,\n  logoSrc,\n  fallbackLogoSrc,\n  logoAlt,\n  skeletonHeight,\n  skeletonWidth,\n  logoSkeleton,\n  logoSkeletonHeight,\n  logoSkeletonWidth,\n  className,\n  imageLoadingType,\n}, ref) => {\n  const { orientation, isLoading } = useContext(CardContext);\n  const [showImageCap, setShowImageCap] = useState(false);\n  const [showLogoCap, setShowLogoCap] = useState(false);\n\n  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;\n\n  if (isLoading) {\n    return (\n      <div\n        className={classNames(wrapperClassName, className)}\n        data-testid=\"image-loader-wrapper\"\n      >\n        <Skeleton\n          containerClassName=\"pgn__card-image-cap-loader\"\n          height={orientation === 'horizontal' ? '100%' : skeletonHeight}\n          width={skeletonWidth}\n        />\n        {logoSkeleton && (\n          <Skeleton\n            containerClassName=\"pgn__card-logo-cap\"\n            height={logoSkeletonHeight}\n            width={logoSkeletonWidth}\n          />\n        )}\n      </div>\n    );\n  }\n\n  const handleSrcFallback = (event, altSrc, imageKey) => {\n    const { currentTarget } = event;\n\n    if (!altSrc || currentTarget.src.endsWith(altSrc)) {\n      if (imageKey === 'imageCap') {\n        currentTarget.src = cardSrcFallbackImg;\n      } else {\n        setShowLogoCap(false);\n      }\n\n      return;\n    }\n\n    currentTarget.src = altSrc;\n  };\n\n  return (\n    <div className={classNames(className, wrapperClassName)} ref={ref}>\n      {!!src && (\n        <img\n          className={classNames('pgn__card-image-cap', { show: showImageCap })}\n          src={src}\n          onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}\n          onLoad={() => setShowImageCap(true)}\n          alt={srcAlt}\n          loading={imageLoadingType}\n        />\n      )}\n      {!!logoSrc && (\n        <img\n          className={classNames('pgn__card-logo-cap', { show: showLogoCap })}\n          src={logoSrc}\n          onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}\n          onLoad={() => setShowLogoCap(true)}\n          alt={logoAlt}\n          loading={imageLoadingType}\n        />\n      )}\n    </div>\n  );\n});\n\nCardImageCap.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies image src. */\n  src: PropTypes.string,\n  /** Specifies fallback image src. */\n  fallbackSrc: PropTypes.string,\n  /** Specifies image alt text. */\n  srcAlt: PropTypes.string,\n  /** Specifies logo src to put on top of the image. */\n  logoSrc: PropTypes.string,\n  /** Specifies fallback image logo src. */\n  fallbackLogoSrc: PropTypes.string,\n  /** Specifies logo image alt text. */\n  logoAlt: PropTypes.string,\n  /** Specifies height of Image skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of Image skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n  /** Specifies whether the cap should be displayed during loading. */\n  logoSkeleton: PropTypes.bool,\n  /** Specifies height of Logo skeleton in loading state. */\n  logoSkeletonHeight: PropTypes.number,\n  /** Specifies width of Logo skeleton in loading state. */\n  logoSkeletonWidth: PropTypes.number,\n  /** Specifies loading type for images */\n  imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),\n};\n\nCardImageCap.defaultProps = {\n  src: undefined,\n  fallbackSrc: cardSrcFallbackImg,\n  logoSrc: undefined,\n  fallbackLogoSrc: undefined,\n  className: undefined,\n  srcAlt: undefined,\n  logoAlt: undefined,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  logoSkeleton: false,\n  logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n  logoSkeletonWidth: undefined,\n  imageLoadingType: 'eager',\n};\n\nexport default CardImageCap;\n"],"mappings":"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"}
+{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","_ref","ref","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","_useContext","orientation","isLoading","_useState","_useState2","_slicedToArray","showImageCap","setShowImageCap","_useState3","_useState4","showLogoCap","setShowLogoCap","wrapperClassName","concat","createElement","containerClassName","height","width","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport cardSrcFallbackImg from './fallback-default.png';\n\nconst SKELETON_HEIGHT_VALUE = 140;\nconst LOGO_SKELETON_HEIGHT_VALUE = 41;\n\nconst CardImageCap = React.forwardRef(({\n  src,\n  fallbackSrc,\n  srcAlt,\n  logoSrc,\n  fallbackLogoSrc,\n  logoAlt,\n  skeletonHeight,\n  skeletonWidth,\n  logoSkeleton,\n  logoSkeletonHeight,\n  logoSkeletonWidth,\n  className,\n  imageLoadingType,\n}, ref) => {\n  const { orientation, isLoading } = useContext(CardContext);\n  const [showImageCap, setShowImageCap] = useState(false);\n  const [showLogoCap, setShowLogoCap] = useState(false);\n\n  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;\n\n  if (isLoading) {\n    return (\n      <div\n        className={classNames(wrapperClassName, className)}\n        data-testid=\"image-loader-wrapper\"\n      >\n        <Skeleton\n          containerClassName=\"pgn__card-image-cap-loader\"\n          height={orientation === 'horizontal' ? '100%' : skeletonHeight}\n          width={skeletonWidth}\n        />\n        {logoSkeleton && (\n          <Skeleton\n            containerClassName=\"pgn__card-logo-cap\"\n            height={logoSkeletonHeight}\n            width={logoSkeletonWidth}\n          />\n        )}\n      </div>\n    );\n  }\n\n  const handleSrcFallback = (event, altSrc, imageKey) => {\n    const { currentTarget } = event;\n\n    if (!altSrc || currentTarget.src.endsWith(altSrc)) {\n      if (imageKey === 'imageCap') {\n        currentTarget.src = cardSrcFallbackImg;\n      } else {\n        setShowLogoCap(false);\n      }\n\n      return;\n    }\n\n    currentTarget.src = altSrc;\n  };\n\n  return (\n    <div className={classNames(className, wrapperClassName)} ref={ref}>\n      {!!src && (\n        <img\n          className={classNames('pgn__card-image-cap', { show: showImageCap })}\n          src={src}\n          onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}\n          onLoad={() => setShowImageCap(true)}\n          alt={srcAlt}\n          loading={imageLoadingType}\n        />\n      )}\n      {!!logoSrc && (\n        <img\n          className={classNames('pgn__card-logo-cap', { show: showLogoCap })}\n          src={logoSrc}\n          onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}\n          onLoad={() => setShowLogoCap(true)}\n          alt={logoAlt}\n          loading={imageLoadingType}\n        />\n      )}\n    </div>\n  );\n});\n\nCardImageCap.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies image src. */\n  src: PropTypes.string,\n  /** Specifies fallback image src. */\n  fallbackSrc: PropTypes.string,\n  /** Specifies image alt text. */\n  srcAlt: PropTypes.string,\n  /** Specifies logo src to put on top of the image. */\n  logoSrc: PropTypes.string,\n  /** Specifies fallback image logo src. */\n  fallbackLogoSrc: PropTypes.string,\n  /** Specifies logo image alt text. */\n  logoAlt: PropTypes.string,\n  /** Specifies height of Image skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of Image skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n  /** Specifies whether the cap should be displayed during loading. */\n  logoSkeleton: PropTypes.bool,\n  /** Specifies height of Logo skeleton in loading state. */\n  logoSkeletonHeight: PropTypes.number,\n  /** Specifies width of Logo skeleton in loading state. */\n  logoSkeletonWidth: PropTypes.number,\n  /** Specifies loading type for images */\n  imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),\n};\n\nCardImageCap.defaultProps = {\n  src: undefined,\n  fallbackSrc: cardSrcFallbackImg,\n  logoSrc: undefined,\n  fallbackLogoSrc: undefined,\n  className: undefined,\n  srcAlt: undefined,\n  logoAlt: undefined,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  logoSkeleton: false,\n  logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n  logoSkeletonWidth: undefined,\n  imageLoadingType: 'eager',\n};\n\nexport default CardImageCap;\n"],"mappings":"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"}

package/dist/Card/CardSection.js

@@ -3,20 +3,17 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
-const SKELETON_HEIGHT_VALUE = 100;
-const CardSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    className,
-    children,
-    title,
-    actions,
-    muted,
-    skeletonHeight,
-    skeletonWidth
-  } = _ref;
-  const {
-    isLoading
-  } = useContext(CardContext);
+var SKELETON_HEIGHT_VALUE = 100;
+var CardSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    title = _ref.title,
+    actions = _ref.actions,
+    muted = _ref.muted,
+    skeletonHeight = _ref.skeletonHeight,
+    skeletonWidth = _ref.skeletonWidth;
+  var _useContext = useContext(CardContext),
+    isLoading = _useContext.isLoading;
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames('pgn__card-section', className, {

package/dist/Card/CardSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSection.js","names":["React","useContext","PropTypes","classNames","Skeleton","CardContext","SKELETON_HEIGHT_VALUE","CardSection","forwardRef","_ref","ref","className","children","title","actions","muted","skeletonHeight","skeletonWidth","isLoading","createElement","containerClassName","height","width","propTypes","string","node","bool","number","defaultProps","undefined"],"sources":["../../src/Card/CardSection.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\n\nconst SKELETON_HEIGHT_VALUE = 100;\n\nconst CardSection = React.forwardRef(({\n  className,\n  children,\n  title,\n  actions,\n  muted,\n  skeletonHeight,\n  skeletonWidth,\n}, ref) => {\n  const { isLoading } = useContext(CardContext);\n\n  if (isLoading) {\n    return (\n      <div className={classNames('pgn__card-section', className, { 'is-muted': muted })}>\n        <Skeleton\n          containerClassName=\"pgn__card-section-loader\"\n          height={skeletonHeight}\n          width={skeletonWidth}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classNames('pgn__card-section', className, { 'is-muted': muted })}\n      ref={ref}\n    >\n      {title && <div className=\"pgn__card-section-title\">{title}</div>}\n      {children}\n      {actions && <div className=\"pgn__card-section-actions\">{actions}</div>}\n    </div>\n  );\n});\n\nCardSection.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies contents of the component. */\n  children: PropTypes.node,\n  /** Specifies title of the `Section`. */\n  title: PropTypes.node,\n  /** Specifies node to render on the bottom right of the `Section` (i.e. `ActionRow`). */\n  actions: PropTypes.node,\n  /** Specifies whether to display `Section` with muted styling. */\n  muted: PropTypes.bool,\n  /** Specifies height of skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n};\n\nCardSection.defaultProps = {\n  children: null,\n  className: undefined,\n  title: undefined,\n  actions: undefined,\n  muted: false,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n};\n\nexport default CardSection;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,WAAW,MAAM,eAAe;AAEvC,MAAMC,qBAAqB,GAAG,GAAG;AAEjC,MAAMC,WAAW,gBAAGP,KAAK,CAACQ,UAAU,CAAC,CAAAC,IAAA,EAQlCC,GAAG,KAAK;EAAA,IAR2B;IACpCC,SAAS;IACTC,QAAQ;IACRC,KAAK;IACLC,OAAO;IACPC,KAAK;IACLC,cAAc;IACdC;EACF,CAAC,GAAAR,IAAA;EACC,MAAM;IAAES;EAAU,CAAC,GAAGjB,UAAU,CAACI,WAAW,CAAC;EAE7C,IAAIa,SAAS,EAAE;IACb,oBACElB,KAAA,CAAAmB,aAAA;MAAKR,SAAS,EAAER,UAAU,CAAC,mBAAmB,EAAEQ,SAAS,EAAE;QAAE,UAAU,EAAEI;MAAM,CAAC;IAAE,gBAChFf,KAAA,CAAAmB,aAAA,CAACf,QAAQ;MACPgB,kBAAkB,EAAC,0BAA0B;MAC7CC,MAAM,EAAEL,cAAe;MACvBM,KAAK,EAAEL;IAAc,CACtB,CACE,CAAC;EAEV;EAEA,oBACEjB,KAAA,CAAAmB,aAAA;IACER,SAAS,EAAER,UAAU,CAAC,mBAAmB,EAAEQ,SAAS,EAAE;MAAE,UAAU,EAAEI;IAAM,CAAC,CAAE;IAC7EL,GAAG,EAAEA;EAAI,GAERG,KAAK,iBAAIb,KAAA,CAAAmB,aAAA;IAAKR,SAAS,EAAC;EAAyB,GAAEE,KAAW,CAAC,EAC/DD,QAAQ,EACRE,OAAO,iBAAId,KAAA,CAAAmB,aAAA;IAAKR,SAAS,EAAC;EAA2B,GAAEG,OAAa,CAClE,CAAC;AAEV,CAAC,CAAC;AAEFP,WAAW,CAACgB,SAAS,GAAG;EACtB;EACAZ,SAAS,EAAET,SAAS,CAACsB,MAAM;EAC3B;EACAZ,QAAQ,EAAEV,SAAS,CAACuB,IAAI;EACxB;EACAZ,KAAK,EAAEX,SAAS,CAACuB,IAAI;EACrB;EACAX,OAAO,EAAEZ,SAAS,CAACuB,IAAI;EACvB;EACAV,KAAK,EAAEb,SAAS,CAACwB,IAAI;EACrB;EACAV,cAAc,EAAEd,SAAS,CAACyB,MAAM;EAChC;EACAV,aAAa,EAAEf,SAAS,CAACyB;AAC3B,CAAC;AAEDpB,WAAW,CAACqB,YAAY,GAAG;EACzBhB,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAEkB,SAAS;EACpBhB,KAAK,EAAEgB,SAAS;EAChBf,OAAO,EAAEe,SAAS;EAClBd,KAAK,EAAE,KAAK;EACZC,cAAc,EAAEV,qBAAqB;EACrCW,aAAa,EAAEY;AACjB,CAAC;AAED,eAAetB,WAAW"}
+{"version":3,"file":"CardSection.js","names":["React","useContext","PropTypes","classNames","Skeleton","CardContext","SKELETON_HEIGHT_VALUE","CardSection","forwardRef","_ref","ref","className","children","title","actions","muted","skeletonHeight","skeletonWidth","_useContext","isLoading","createElement","containerClassName","height","width","propTypes","string","node","bool","number","defaultProps","undefined"],"sources":["../../src/Card/CardSection.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\n\nconst SKELETON_HEIGHT_VALUE = 100;\n\nconst CardSection = React.forwardRef(({\n  className,\n  children,\n  title,\n  actions,\n  muted,\n  skeletonHeight,\n  skeletonWidth,\n}, ref) => {\n  const { isLoading } = useContext(CardContext);\n\n  if (isLoading) {\n    return (\n      <div className={classNames('pgn__card-section', className, { 'is-muted': muted })}>\n        <Skeleton\n          containerClassName=\"pgn__card-section-loader\"\n          height={skeletonHeight}\n          width={skeletonWidth}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classNames('pgn__card-section', className, { 'is-muted': muted })}\n      ref={ref}\n    >\n      {title && <div className=\"pgn__card-section-title\">{title}</div>}\n      {children}\n      {actions && <div className=\"pgn__card-section-actions\">{actions}</div>}\n    </div>\n  );\n});\n\nCardSection.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies contents of the component. */\n  children: PropTypes.node,\n  /** Specifies title of the `Section`. */\n  title: PropTypes.node,\n  /** Specifies node to render on the bottom right of the `Section` (i.e. `ActionRow`). */\n  actions: PropTypes.node,\n  /** Specifies whether to display `Section` with muted styling. */\n  muted: PropTypes.bool,\n  /** Specifies height of skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n};\n\nCardSection.defaultProps = {\n  children: null,\n  className: undefined,\n  title: undefined,\n  actions: undefined,\n  muted: false,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n};\n\nexport default CardSection;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,WAAW,MAAM,eAAe;AAEvC,IAAMC,qBAAqB,GAAG,GAAG;AAEjC,IAAMC,WAAW,gBAAGP,KAAK,CAACQ,UAAU,CAAC,UAAAC,IAAA,EAQlCC,GAAG,EAAK;EAAA,IAPTC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,cAAc,GAAAP,IAAA,CAAdO,cAAc;IACdC,aAAa,GAAAR,IAAA,CAAbQ,aAAa;EAEb,IAAAC,WAAA,GAAsBjB,UAAU,CAACI,WAAW,CAAC;IAArCc,SAAS,GAAAD,WAAA,CAATC,SAAS;EAEjB,IAAIA,SAAS,EAAE;IACb,oBACEnB,KAAA,CAAAoB,aAAA;MAAKT,SAAS,EAAER,UAAU,CAAC,mBAAmB,EAAEQ,SAAS,EAAE;QAAE,UAAU,EAAEI;MAAM,CAAC;IAAE,gBAChFf,KAAA,CAAAoB,aAAA,CAAChB,QAAQ;MACPiB,kBAAkB,EAAC,0BAA0B;MAC7CC,MAAM,EAAEN,cAAe;MACvBO,KAAK,EAAEN;IAAc,CACtB,CACE,CAAC;EAEV;EAEA,oBACEjB,KAAA,CAAAoB,aAAA;IACET,SAAS,EAAER,UAAU,CAAC,mBAAmB,EAAEQ,SAAS,EAAE;MAAE,UAAU,EAAEI;IAAM,CAAC,CAAE;IAC7EL,GAAG,EAAEA;EAAI,GAERG,KAAK,iBAAIb,KAAA,CAAAoB,aAAA;IAAKT,SAAS,EAAC;EAAyB,GAAEE,KAAW,CAAC,EAC/DD,QAAQ,EACRE,OAAO,iBAAId,KAAA,CAAAoB,aAAA;IAAKT,SAAS,EAAC;EAA2B,GAAEG,OAAa,CAClE,CAAC;AAEV,CAAC,CAAC;AAEFP,WAAW,CAACiB,SAAS,GAAG;EACtB;EACAb,SAAS,EAAET,SAAS,CAACuB,MAAM;EAC3B;EACAb,QAAQ,EAAEV,SAAS,CAACwB,IAAI;EACxB;EACAb,KAAK,EAAEX,SAAS,CAACwB,IAAI;EACrB;EACAZ,OAAO,EAAEZ,SAAS,CAACwB,IAAI;EACvB;EACAX,KAAK,EAAEb,SAAS,CAACyB,IAAI;EACrB;EACAX,cAAc,EAAEd,SAAS,CAAC0B,MAAM;EAChC;EACAX,aAAa,EAAEf,SAAS,CAAC0B;AAC3B,CAAC;AAEDrB,WAAW,CAACsB,YAAY,GAAG;EACzBjB,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAEmB,SAAS;EACpBjB,KAAK,EAAEiB,SAAS;EAChBhB,OAAO,EAAEgB,SAAS;EAClBf,KAAK,EAAE,KAAK;EACZC,cAAc,EAAEV,qBAAqB;EACrCW,aAAa,EAAEa;AACjB,CAAC;AAED,eAAevB,WAAW"}

package/dist/Card/CardStatus.js

@@ -1,4 +1,4 @@
-const _excluded = ["className", "children", "variant", "icon", "title", "actions"];
+var _excluded = ["className", "children", "variant", "icon", "title", "actions"];
 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; }
@@ -8,19 +8,16 @@ import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import Icon from '../Icon';
 import CardContext from './CardContext';
-const CardStatus = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      className,
-      children,
-      variant,
-      icon,
-      title,
-      actions
-    } = _ref,
+var CardStatus = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    variant = _ref.variant,
+    icon = _ref.icon,
+    title = _ref.title,
+    actions = _ref.actions,
     props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    isLoading
-  } = useContext(CardContext);
+  var _useContext = useContext(CardContext),
+    isLoading = _useContext.isLoading;
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames('pgn__card-status', className),
@@ -29,7 +26,7 @@ const CardStatus = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, /*#__PURE__*/React.createElement(Skeleton, null));
   }
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames('pgn__card-status', `pgn__card-status__${variant}`, className),
+    className: classNames('pgn__card-status', "pgn__card-status__".concat(variant), className),
     ref: ref
   }, props), /*#__PURE__*/React.createElement("div", {
     className: "pgn__card-status__content"

package/dist/Card/CardStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardStatus.js","names":["React","useContext","PropTypes","classNames","Skeleton","Icon","CardContext","CardStatus","forwardRef","_ref","ref","className","children","variant","icon","title","actions","props","_objectWithoutProperties","_excluded","isLoading","createElement","_extends","src","propTypes","node","isRequired","string","func","oneOf","oneOfType","element","defaultProps","undefined"],"sources":["../../src/Card/CardStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport Icon from '../Icon';\nimport CardContext from './CardContext';\n\nconst CardStatus = React.forwardRef(({\n  className,\n  children,\n  variant,\n  icon,\n  title,\n  actions,\n  ...props\n}, ref) => {\n  const { isLoading } = useContext(CardContext);\n\n  if (isLoading) {\n    return (\n      <div\n        className={classNames(\n          'pgn__card-status',\n          className,\n        )}\n        data-testid=\"card-status-skeleton\"\n        ref={ref}\n      >\n        <Skeleton />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classNames(\n        'pgn__card-status',\n        `pgn__card-status__${variant}`,\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"pgn__card-status__content\">\n        {icon && <Icon className=\"pgn__card-status__content-icon\" src={icon} />}\n        <div className=\"pgn__card-status__message-content\">\n          {title && <div className=\"pgn__card-status__heading\">{title}</div>}\n          {children}\n        </div>\n      </div>\n      {!!actions && (\n        <div className=\"pgn__card-status__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n});\n\nCardStatus.propTypes = {\n  /** Specifies the content of the component. */\n  children: PropTypes.node.isRequired,\n  /** The class to append to the base element. */\n  className: PropTypes.string,\n  /** Icon that will be shown in the top-left corner. */\n  icon: PropTypes.func,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf([\n    'primary',\n    'success',\n    'danger',\n    'warning',\n  ]),\n  /** Specifies title for the `Card.Status`. */\n  title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n  /** Specifies any optional actions, e.g. button(s). */\n  actions: PropTypes.node,\n};\n\nCardStatus.defaultProps = {\n  className: undefined,\n  icon: undefined,\n  variant: 'warning',\n  title: undefined,\n  actions: undefined,\n};\n\nexport default CardStatus;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAAM,eAAe;AAEvC,MAAMC,UAAU,gBAAGP,KAAK,CAACQ,UAAU,CAAC,CAAAC,IAAA,EAQjCC,GAAG,KAAK;EAAA,IAR0B;MACnCC,SAAS;MACTC,QAAQ;MACRC,OAAO;MACPC,IAAI;MACJC,KAAK;MACLC;IAEF,CAAC,GAAAP,IAAA;IADIQ,KAAK,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAER,MAAM;IAAEC;EAAU,CAAC,GAAGnB,UAAU,CAACK,WAAW,CAAC;EAE7C,IAAIc,SAAS,EAAE;IACb,oBACEpB,KAAA,CAAAqB,aAAA;MACEV,SAAS,EAAER,UAAU,CACnB,kBAAkB,EAClBQ,SACF,CAAE;MACF,eAAY,sBAAsB;MAClCD,GAAG,EAAEA;IAAI,gBAETV,KAAA,CAAAqB,aAAA,CAACjB,QAAQ,MAAE,CACR,CAAC;EAEV;EAEA,oBACEJ,KAAA,CAAAqB,aAAA,QAAAC,QAAA;IACEX,SAAS,EAAER,UAAU,CACnB,kBAAkB,EACjB,qBAAoBU,OAAQ,EAAC,EAC9BF,SACF,CAAE;IACFD,GAAG,EAAEA;EAAI,GACLO,KAAK,gBAETjB,KAAA,CAAAqB,aAAA;IAAKV,SAAS,EAAC;EAA2B,GACvCG,IAAI,iBAAId,KAAA,CAAAqB,aAAA,CAAChB,IAAI;IAACM,SAAS,EAAC,gCAAgC;IAACY,GAAG,EAAET;EAAK,CAAE,CAAC,eACvEd,KAAA,CAAAqB,aAAA;IAAKV,SAAS,EAAC;EAAmC,GAC/CI,KAAK,iBAAIf,KAAA,CAAAqB,aAAA;IAAKV,SAAS,EAAC;EAA2B,GAAEI,KAAW,CAAC,EACjEH,QACE,CACF,CAAC,EACL,CAAC,CAACI,OAAO,iBACRhB,KAAA,CAAAqB,aAAA;IAAKV,SAAS,EAAC;EAA2B,GACvCK,OACE,CAEJ,CAAC;AAEV,CAAC,CAAC;AAEFT,UAAU,CAACiB,SAAS,GAAG;EACrB;EACAZ,QAAQ,EAAEV,SAAS,CAACuB,IAAI,CAACC,UAAU;EACnC;EACAf,SAAS,EAAET,SAAS,CAACyB,MAAM;EAC3B;EACAb,IAAI,EAAEZ,SAAS,CAAC0B,IAAI;EACpB;EACAf,OAAO,EAAEX,SAAS,CAAC2B,KAAK,CAAC,CACvB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,CACV,CAAC;EACF;EACAd,KAAK,EAAEb,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAAC6B,OAAO,EAAE7B,SAAS,CAACyB,MAAM,CAAC,CAAC;EACjE;EACAX,OAAO,EAAEd,SAAS,CAACuB;AACrB,CAAC;AAEDlB,UAAU,CAACyB,YAAY,GAAG;EACxBrB,SAAS,EAAEsB,SAAS;EACpBnB,IAAI,EAAEmB,SAAS;EACfpB,OAAO,EAAE,SAAS;EAClBE,KAAK,EAAEkB,SAAS;EAChBjB,OAAO,EAAEiB;AACX,CAAC;AAED,eAAe1B,UAAU"}
+{"version":3,"file":"CardStatus.js","names":["React","useContext","PropTypes","classNames","Skeleton","Icon","CardContext","CardStatus","forwardRef","_ref","ref","className","children","variant","icon","title","actions","props","_objectWithoutProperties","_excluded","_useContext","isLoading","createElement","_extends","concat","src","propTypes","node","isRequired","string","func","oneOf","oneOfType","element","defaultProps","undefined"],"sources":["../../src/Card/CardStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport Icon from '../Icon';\nimport CardContext from './CardContext';\n\nconst CardStatus = React.forwardRef(({\n  className,\n  children,\n  variant,\n  icon,\n  title,\n  actions,\n  ...props\n}, ref) => {\n  const { isLoading } = useContext(CardContext);\n\n  if (isLoading) {\n    return (\n      <div\n        className={classNames(\n          'pgn__card-status',\n          className,\n        )}\n        data-testid=\"card-status-skeleton\"\n        ref={ref}\n      >\n        <Skeleton />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classNames(\n        'pgn__card-status',\n        `pgn__card-status__${variant}`,\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"pgn__card-status__content\">\n        {icon && <Icon className=\"pgn__card-status__content-icon\" src={icon} />}\n        <div className=\"pgn__card-status__message-content\">\n          {title && <div className=\"pgn__card-status__heading\">{title}</div>}\n          {children}\n        </div>\n      </div>\n      {!!actions && (\n        <div className=\"pgn__card-status__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n});\n\nCardStatus.propTypes = {\n  /** Specifies the content of the component. */\n  children: PropTypes.node.isRequired,\n  /** The class to append to the base element. */\n  className: PropTypes.string,\n  /** Icon that will be shown in the top-left corner. */\n  icon: PropTypes.func,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf([\n    'primary',\n    'success',\n    'danger',\n    'warning',\n  ]),\n  /** Specifies title for the `Card.Status`. */\n  title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n  /** Specifies any optional actions, e.g. button(s). */\n  actions: PropTypes.node,\n};\n\nCardStatus.defaultProps = {\n  className: undefined,\n  icon: undefined,\n  variant: 'warning',\n  title: undefined,\n  actions: undefined,\n};\n\nexport default CardStatus;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAAM,eAAe;AAEvC,IAAMC,UAAU,gBAAGP,KAAK,CAACQ,UAAU,CAAC,UAAAC,IAAA,EAQjCC,GAAG,EAAK;EAAA,IAPTC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,OAAO,GAAAP,IAAA,CAAPO,OAAO;IACJC,KAAK,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAER,IAAAC,WAAA,GAAsBnB,UAAU,CAACK,WAAW,CAAC;IAArCe,SAAS,GAAAD,WAAA,CAATC,SAAS;EAEjB,IAAIA,SAAS,EAAE;IACb,oBACErB,KAAA,CAAAsB,aAAA;MACEX,SAAS,EAAER,UAAU,CACnB,kBAAkB,EAClBQ,SACF,CAAE;MACF,eAAY,sBAAsB;MAClCD,GAAG,EAAEA;IAAI,gBAETV,KAAA,CAAAsB,aAAA,CAAClB,QAAQ,MAAE,CACR,CAAC;EAEV;EAEA,oBACEJ,KAAA,CAAAsB,aAAA,QAAAC,QAAA;IACEZ,SAAS,EAAER,UAAU,CACnB,kBAAkB,uBAAAqB,MAAA,CACGX,OAAO,GAC5BF,SACF,CAAE;IACFD,GAAG,EAAEA;EAAI,GACLO,KAAK,gBAETjB,KAAA,CAAAsB,aAAA;IAAKX,SAAS,EAAC;EAA2B,GACvCG,IAAI,iBAAId,KAAA,CAAAsB,aAAA,CAACjB,IAAI;IAACM,SAAS,EAAC,gCAAgC;IAACc,GAAG,EAAEX;EAAK,CAAE,CAAC,eACvEd,KAAA,CAAAsB,aAAA;IAAKX,SAAS,EAAC;EAAmC,GAC/CI,KAAK,iBAAIf,KAAA,CAAAsB,aAAA;IAAKX,SAAS,EAAC;EAA2B,GAAEI,KAAW,CAAC,EACjEH,QACE,CACF,CAAC,EACL,CAAC,CAACI,OAAO,iBACRhB,KAAA,CAAAsB,aAAA;IAAKX,SAAS,EAAC;EAA2B,GACvCK,OACE,CAEJ,CAAC;AAEV,CAAC,CAAC;AAEFT,UAAU,CAACmB,SAAS,GAAG;EACrB;EACAd,QAAQ,EAAEV,SAAS,CAACyB,IAAI,CAACC,UAAU;EACnC;EACAjB,SAAS,EAAET,SAAS,CAAC2B,MAAM;EAC3B;EACAf,IAAI,EAAEZ,SAAS,CAAC4B,IAAI;EACpB;EACAjB,OAAO,EAAEX,SAAS,CAAC6B,KAAK,CAAC,CACvB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,CACV,CAAC;EACF;EACAhB,KAAK,EAAEb,SAAS,CAAC8B,SAAS,CAAC,CAAC9B,SAAS,CAAC+B,OAAO,EAAE/B,SAAS,CAAC2B,MAAM,CAAC,CAAC;EACjE;EACAb,OAAO,EAAEd,SAAS,CAACyB;AACrB,CAAC;AAEDpB,UAAU,CAAC2B,YAAY,GAAG;EACxBvB,SAAS,EAAEwB,SAAS;EACpBrB,IAAI,EAAEqB,SAAS;EACftB,OAAO,EAAE,SAAS;EAClBE,KAAK,EAAEoB,SAAS;EAChBnB,OAAO,EAAEmB;AACX,CAAC;AAED,eAAe5B,UAAU"}

package/dist/Card/_variables.scss

@@ -0,0 +1,55 @@
+// Card
+
+$card-spacer-y:                      .75rem !default;
+$card-spacer-x:                      1.25rem !default;
+$card-border-width:                  $border-width !default;
+$card-border-radius:                 $border-radius !default;
+$card-border-color:                  rgba($black, .125) !default;
+$card-border-focus-color:            $primary-500 !default;
+$card-border-focus-color-dark:       theme-color("primary", "focus") !default;
+$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
+$card-cap-bg:                        rgba($black, .03) !default;
+$card-cap-color:                     null !default;
+$card-height:                        null !default;
+$card-color:                         null !default;
+$card-bg:                            $white !default;
+$card-bg-dark:                       $primary-500 !default;
+$card-bg-muted:                      $light-200 !default;
+
+$card-img-overlay-padding:           1.25rem !default;
+
+$card-group-margin:                  calc($grid-gutter-width / 2) !default;
+$card-deck-margin:                   $card-group-margin !default;
+$card-grid-margin:                   $card-group-margin !default;
+$card-deck-margin-bottom:            map_get($spacers, 3) !default;
+$card-grid-margin-bottom:            map_get($spacers, 3) !default;
+
+$card-columns-count:                 3 !default;
+$card-columns-gap:                   1.25rem !default;
+$card-columns-margin:                $card-spacer-y !default;
+
+$card-divider-bg:                    $light-400 !default;
+
+$card-footer-actions-gap:            .5rem !default;
+
+$card-logo-left-offset:              1.5rem !default;
+$card-logo-bottom-offset:            1rem !default;
+$card-logo-left-offset-horizontal:   .4375rem !default;
+$card-logo-bottom-offset-horizontal: .4375rem !default;
+
+$card-logo-width:                    7.25rem !default;
+$card-logo-height:                   4.125rem !default;
+
+$card-image-border-radius:           $card-border-radius !default;
+$card-logo-border-radius:            .25rem !default;
+
+$card-footer-text-font-size:         $x-small-font-size;
+
+$card-image-horizontal-max-width:    240px !default;
+$card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
+$card-image-vertical-max-height:     140px !default;
+$loading-skeleton-spacer:            .313rem !default;
+
+$card-focus-border-offset:           5px !default;
+$card-focus-border-width:            2px !default;
+$card-focus-border-radius:           calc($card-focus-border-offset + $card-border-radius) !default;

package/dist/Card/index.js

@@ -1,10 +1,11 @@
-const _excluded = ["orientation", "isLoading", "className", "isClickable", "muted", "variant"];
+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); }
+var _excluded = ["orientation", "isLoading", "className", "isClickable", "muted", "variant"];
 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); }
 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 _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); }
 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';
@@ -20,28 +21,25 @@ import CardImageCap from './CardImageCap';
 import CardBody from './CardBody';
 import CardStatus from './CardStatus';
 import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
-export const CARD_VARIANTS = ['light', 'dark', 'muted'];
-const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      orientation,
-      isLoading,
-      className,
-      isClickable,
-      muted,
-      variant
-    } = _ref,
+export var CARD_VARIANTS = ['light', 'dark', 'muted'];
+var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var orientation = _ref.orientation,
+    isLoading = _ref.isLoading,
+    className = _ref.className,
+    isClickable = _ref.isClickable,
+    muted = _ref.muted,
+    variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
-  const resolvedVariant = muted ? 'muted' : variant;
+  var resolvedVariant = muted ? 'muted' : variant;
   return /*#__PURE__*/React.createElement(CardContextProvider, {
     orientation: orientation,
     isLoading: isLoading,
     variant: resolvedVariant
   }, /*#__PURE__*/React.createElement(BaseCard, _extends({}, props, {
-    className: classNames(className, 'pgn__card', {
+    className: classNames(className, 'pgn__card', _defineProperty({
       horizontal: orientation === 'horizontal',
-      clickable: isClickable,
-      [`pgn__card-${resolvedVariant}`]: resolvedVariant
-    }),
+      clickable: isClickable
+    }, "pgn__card-".concat(resolvedVariant), resolvedVariant)),
     ref: ref,
     tabIndex: isClickable ? 0 : -1
   })));
@@ -73,7 +71,7 @@ Card.defaultProps = _objectSpread(_objectSpread({}, BaseCard.defaultProps), {},
   variant: 'light',
   isLoading: false
 });
-const CardWithDeprecatedProp = withDeprecatedProps(Card, 'Card', {
+var CardWithDeprecatedProp = withDeprecatedProps(Card, 'Card', {
   muted: {
     deprType: DeprTypes.REMOVED,
     message: 'Use "variant" prop instead, i.e. variant="muted"'