@coorpacademy/components 11.32.21 → 11.32.23-alpha.2

package/lib/organism/brand-learning-priorities/index.js

@@ -0,0 +1,147 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _cssColorFunction = require("css-color-function");
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _loader = _interopRequireDefault(require("../../atom/loader"));
+
+var _select = require("../../atom/select");
+
+var _draggableList = _interopRequireDefault(require("../../molecule/draggable-list"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _learningPriorityModal = _interopRequireDefault(require("../../molecule/learning-priority-modal"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const BrandLearningPriorities = (props, context) => {
+  const {
+    content,
+    priorities,
+    filters,
+    isLoading,
+    onAdd
+  } = props;
+  const {
+    items,
+    onDrop,
+    itemType
+  } = content;
+  const [itemList, setItemList] = (0, _react.useState)([...items]);
+  const [openModal, setOpenModal] = (0, _react.useState)(false);
+  const {
+    skin,
+    translate
+  } = context;
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
+  const selectedPriorities = (0, _react.useMemo)(() => items.map(priority => priority.priorityRef), [items]);
+  const handleDropItem = (0, _react.useCallback)((dragRef, dropRef) => {
+    const dragIndex = itemList.findIndex(item => item.priorityRef === dragRef);
+    const dropIndex = itemList.findIndex(item => item.priorityRef === dropRef);
+    if (dragIndex === dropIndex) return;
+    const newItems = [...itemList];
+    const [dragItem] = newItems.splice(dragIndex, 1);
+    newItems.splice(dropIndex, 0, dragItem);
+    setItemList(newItems);
+    onDrop(newItems.map(item => {
+      return {
+        type: item.type,
+        ref: item.priorityRef
+      };
+    }));
+  }, [itemList, setItemList, onDrop]);
+  const Loading = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.loading
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, null)), []);
+  (0, _react.useEffect)(() => {
+    setItemList(items);
+  }, [items]);
+  const handleOpenModal = (0, _react.useCallback)(() => setOpenModal(true), [setOpenModal]);
+  const handleCloseModal = (0, _react.useCallback)(() => setOpenModal(false), [setOpenModal]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement(_learningPriorityModal.default, {
+    isLoading: isLoading,
+    isOpen: openModal,
+    onCancel: handleCloseModal,
+    onClose: handleCloseModal,
+    onAdd: onAdd,
+    priorities: priorities,
+    filters: filters,
+    preselected: selectedPriorities
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.LPtitle
+  }, translate('learning_priorities')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.LPdescription
+  }, translate('learning_priorities_brand_description')), isLoading ? /*#__PURE__*/_react.default.createElement(Loading, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.ctaWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.priorityCount
+  }, `${items.length} ${translate('items')}`), /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    customStyle: {
+      backgroundColor: primarySkinColor,
+      color: '#FFFFFF',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: 'fit-content'
+    },
+    hoverBackgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+    hoverColor: primarySkinColor,
+    onClick: handleOpenModal,
+    label: translate('add_learning_priority'),
+    "data-name": "add-learning-priority",
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'plus',
+        backgroundColor: primarySkinColor,
+        color: '#FFFFFF',
+        size: 16
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_draggableList.default, {
+    itemType: itemType,
+    items: itemList,
+    onDrop: handleDropItem
+  })));
+};
+
+BrandLearningPriorities.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+BrandLearningPriorities.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: _propTypes.default.shape(_draggableList.default.propTypes),
+  priorities: _propTypes.default.arrayOf(_propTypes.default.shape({
+    ref: _propTypes.default.string,
+    title: _propTypes.default.string,
+    courses: _propTypes.default.number,
+    type: _propTypes.default.string
+  })),
+  filters: _propTypes.default.arrayOf(_propTypes.default.shape(_extends({}, _select.SelectOptionPropTypes, {
+    count: _propTypes.default.number
+  }))),
+  isLoading: _propTypes.default.bool,
+  onAdd: _propTypes.default.func
+} : {};
+var _default = BrandLearningPriorities;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/organism/brand-learning-priorities/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BrandLearningPriorities","props","context","content","priorities","filters","isLoading","onAdd","items","onDrop","itemType","itemList","setItemList","useState","openModal","setOpenModal","skin","translate","primarySkinColor","selectedPriorities","useMemo","map","priority","priorityRef","handleDropItem","useCallback","dragRef","dropRef","dragIndex","findIndex","item","dropIndex","newItems","dragItem","splice","type","ref","Loading","style","loading","useEffect","handleOpenModal","handleCloseModal","container","LPtitle","LPdescription","ctaWrapper","priorityCount","length","backgroundColor","color","transition","width","convert","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","DraggableList","arrayOf","string","title","courses","number","SelectOptionPropTypes","count","bool","func"],"sources":["../../../src/organism/brand-learning-priorities/index.js"],"sourcesContent":["import React, {useState, useCallback, useMemo, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport DraggableList from '../../molecule/draggable-list';\nimport ButtonLink from '../../atom/button-link';\nimport LearningPriorityModal from '../../molecule/learning-priority-modal';\nimport style from './style.css';\n\nconst BrandLearningPriorities = (props, context) => {\n  const {content, priorities, filters, isLoading, onAdd} = props;\n  const {items, onDrop, itemType} = content;\n  const [itemList, setItemList] = useState([...items]);\n  const [openModal, setOpenModal] = useState(false);\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const selectedPriorities = useMemo(() => items.map(priority => priority.priorityRef), [items]);\n\n  const handleDropItem = useCallback(\n    (dragRef, dropRef) => {\n      const dragIndex = itemList.findIndex(item => item.priorityRef === dragRef);\n      const dropIndex = itemList.findIndex(item => item.priorityRef === dropRef);\n\n      if (dragIndex === dropIndex) return;\n\n      const newItems = [...itemList];\n      const [dragItem] = newItems.splice(dragIndex, 1);\n      newItems.splice(dropIndex, 0, dragItem);\n\n      setItemList(newItems);\n      onDrop(\n        newItems.map(item => {\n          return {type: item.type, ref: item.priorityRef};\n        })\n      );\n    },\n    [itemList, setItemList, onDrop]\n  );\n\n  const Loading = useCallback(\n    () => (\n      <div className={style.loading}>\n        <Loader />\n      </div>\n    ),\n    []\n  );\n\n  useEffect(() => {\n    setItemList(items);\n  }, [items]);\n\n  const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);\n  const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);\n  return (\n    <div className={style.container}>\n      <LearningPriorityModal\n        isLoading={isLoading}\n        isOpen={openModal}\n        onCancel={handleCloseModal}\n        onClose={handleCloseModal}\n        onAdd={onAdd}\n        priorities={priorities}\n        filters={filters}\n        preselected={selectedPriorities}\n      />\n      <div className={style.LPtitle}>{translate('learning_priorities')}</div>\n      <div className={style.LPdescription}>\n        {translate('learning_priorities_brand_description')}\n      </div>\n\n      {isLoading ? (\n        <Loading />\n      ) : (\n        <>\n          <div className={style.ctaWrapper}>\n            <div className={style.priorityCount}>{`${items.length} ${translate('items')}`}</div>\n            <ButtonLink\n              customStyle={{\n                backgroundColor: primarySkinColor,\n                color: '#FFFFFF',\n                transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n                width: 'fit-content'\n              }}\n              hoverBackgroundColor={convert(`color(${primarySkinColor} a(0.07))`)}\n              hoverColor={primarySkinColor}\n              onClick={handleOpenModal}\n              label={translate('add_learning_priority')}\n              data-name=\"add-learning-priority\"\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'plus',\n                  backgroundColor: primarySkinColor,\n                  color: '#FFFFFF',\n                  size: 16\n                }\n              }}\n            />\n          </div>\n          <DraggableList itemType={itemType} items={itemList} onDrop={handleDropItem} />\n        </>\n      )}\n    </div>\n  );\n};\n\nBrandLearningPriorities.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nBrandLearningPriorities.propTypes = {\n  content: PropTypes.shape(DraggableList.propTypes),\n  priorities: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      title: PropTypes.string,\n      courses: PropTypes.number,\n      type: PropTypes.string\n    })\n  ),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      ...SelectOptionPropTypes,\n      count: PropTypes.number\n    })\n  ),\n  isLoading: PropTypes.bool,\n  onAdd: PropTypes.func\n};\n\nexport default BrandLearningPriorities;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,uBAAuB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAClD,MAAM;IAACC,OAAD;IAAUC,UAAV;IAAsBC,OAAtB;IAA+BC,SAA/B;IAA0CC;EAA1C,IAAmDN,KAAzD;EACA,MAAM;IAACO,KAAD;IAAQC,MAAR;IAAgBC;EAAhB,IAA4BP,OAAlC;EACA,MAAM,CAACQ,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,CAAC,GAAGL,KAAJ,CAAT,CAAhC;EACA,MAAM,CAACM,SAAD,EAAYC,YAAZ,IAA4B,IAAAF,eAAA,EAAS,KAAT,CAAlC;EACA,MAAM;IAACG,IAAD;IAAOC;EAAP,IAAoBf,OAA1B;EACA,MAAMgB,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;EAEA,MAAMG,kBAAkB,GAAG,IAAAC,cAAA,EAAQ,MAAMZ,KAAK,CAACa,GAAN,CAAUC,QAAQ,IAAIA,QAAQ,CAACC,WAA/B,CAAd,EAA2D,CAACf,KAAD,CAA3D,CAA3B;EAEA,MAAMgB,cAAc,GAAG,IAAAC,kBAAA,EACrB,CAACC,OAAD,EAAUC,OAAV,KAAsB;IACpB,MAAMC,SAAS,GAAGjB,QAAQ,CAACkB,SAAT,CAAmBC,IAAI,IAAIA,IAAI,CAACP,WAAL,KAAqBG,OAAhD,CAAlB;IACA,MAAMK,SAAS,GAAGpB,QAAQ,CAACkB,SAAT,CAAmBC,IAAI,IAAIA,IAAI,CAACP,WAAL,KAAqBI,OAAhD,CAAlB;IAEA,IAAIC,SAAS,KAAKG,SAAlB,EAA6B;IAE7B,MAAMC,QAAQ,GAAG,CAAC,GAAGrB,QAAJ,CAAjB;IACA,MAAM,CAACsB,QAAD,IAAaD,QAAQ,CAACE,MAAT,CAAgBN,SAAhB,EAA2B,CAA3B,CAAnB;IACAI,QAAQ,CAACE,MAAT,CAAgBH,SAAhB,EAA2B,CAA3B,EAA8BE,QAA9B;IAEArB,WAAW,CAACoB,QAAD,CAAX;IACAvB,MAAM,CACJuB,QAAQ,CAACX,GAAT,CAAaS,IAAI,IAAI;MACnB,OAAO;QAACK,IAAI,EAAEL,IAAI,CAACK,IAAZ;QAAkBC,GAAG,EAAEN,IAAI,CAACP;MAA5B,CAAP;IACD,CAFD,CADI,CAAN;EAKD,CAjBoB,EAkBrB,CAACZ,QAAD,EAAWC,WAAX,EAAwBH,MAAxB,CAlBqB,CAAvB;EAqBA,MAAM4B,OAAO,GAAG,IAAAZ,kBAAA,EACd,mBACE;IAAK,SAAS,EAAEa,cAAA,CAAMC;EAAtB,gBACE,6BAAC,eAAD,OADF,CAFY,EAMd,EANc,CAAhB;EASA,IAAAC,gBAAA,EAAU,MAAM;IACd5B,WAAW,CAACJ,KAAD,CAAX;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,MAAMiC,eAAe,GAAG,IAAAhB,kBAAA,EAAY,MAAMV,YAAY,CAAC,IAAD,CAA9B,EAAsC,CAACA,YAAD,CAAtC,CAAxB;EACA,MAAM2B,gBAAgB,GAAG,IAAAjB,kBAAA,EAAY,MAAMV,YAAY,CAAC,KAAD,CAA9B,EAAuC,CAACA,YAAD,CAAvC,CAAzB;EACA,oBACE;IAAK,SAAS,EAAEuB,cAAA,CAAMK;EAAtB,gBACE,6BAAC,8BAAD;IACE,SAAS,EAAErC,SADb;IAEE,MAAM,EAAEQ,SAFV;IAGE,QAAQ,EAAE4B,gBAHZ;IAIE,OAAO,EAAEA,gBAJX;IAKE,KAAK,EAAEnC,KALT;IAME,UAAU,EAAEH,UANd;IAOE,OAAO,EAAEC,OAPX;IAQE,WAAW,EAAEc;EARf,EADF,eAWE;IAAK,SAAS,EAAEmB,cAAA,CAAMM;EAAtB,GAAgC3B,SAAS,CAAC,qBAAD,CAAzC,CAXF,eAYE;IAAK,SAAS,EAAEqB,cAAA,CAAMO;EAAtB,GACG5B,SAAS,CAAC,uCAAD,CADZ,CAZF,EAgBGX,SAAS,gBACR,6BAAC,OAAD,OADQ,gBAGR,yEACE;IAAK,SAAS,EAAEgC,cAAA,CAAMQ;EAAtB,gBACE;IAAK,SAAS,EAAER,cAAA,CAAMS;EAAtB,GAAuC,GAAEvC,KAAK,CAACwC,MAAO,IAAG/B,SAAS,CAAC,OAAD,CAAU,EAA5E,CADF,eAEE,6BAAC,mBAAD;IACE,WAAW,EAAE;MACXgC,eAAe,EAAE/B,gBADN;MAEXgC,KAAK,EAAE,SAFI;MAGXC,UAAU,EAAE,6DAHD;MAIXC,KAAK,EAAE;IAJI,CADf;IAOE,oBAAoB,EAAE,IAAAC,yBAAA,EAAS,SAAQnC,gBAAiB,WAAlC,CAPxB;IAQE,UAAU,EAAEA,gBARd;IASE,OAAO,EAAEuB,eATX;IAUE,KAAK,EAAExB,SAAS,CAAC,uBAAD,CAVlB;IAWE,aAAU,uBAXZ;IAYE,IAAI,EAAE;MACJqC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,MADA;QAENP,eAAe,EAAE/B,gBAFX;QAGNgC,KAAK,EAAE,SAHD;QAINO,IAAI,EAAE;MAJA;IAFJ;EAZR,EAFF,CADF,eA0BE,6BAAC,sBAAD;IAAe,QAAQ,EAAE/C,QAAzB;IAAmC,KAAK,EAAEC,QAA1C;IAAoD,MAAM,EAAEa;EAA5D,EA1BF,CAnBJ,CADF;AAmDD,CAjGD;;AAmGAxB,uBAAuB,CAAC0D,YAAxB,GAAuC;EACrC1C,IAAI,EAAE2C,iBAAA,CAASC,iBAAT,CAA2B5C,IADI;EAErCC,SAAS,EAAE0C,iBAAA,CAASC,iBAAT,CAA2B3C;AAFD,CAAvC;AAKAjB,uBAAuB,CAAC6D,SAAxB,2CAAoC;EAClC1D,OAAO,EAAE2D,kBAAA,CAAUC,KAAV,CAAgBC,sBAAA,CAAcH,SAA9B,CADyB;EAElCzD,UAAU,EAAE0D,kBAAA,CAAUG,OAAV,CACVH,kBAAA,CAAUC,KAAV,CAAgB;IACd3B,GAAG,EAAE0B,kBAAA,CAAUI,MADD;IAEdC,KAAK,EAAEL,kBAAA,CAAUI,MAFH;IAGdE,OAAO,EAAEN,kBAAA,CAAUO,MAHL;IAIdlC,IAAI,EAAE2B,kBAAA,CAAUI;EAJF,CAAhB,CADU,CAFsB;EAUlC7D,OAAO,EAAEyD,kBAAA,CAAUG,OAAV,CACPH,kBAAA,CAAUC,KAAV,cACKO,6BADL;IAEEC,KAAK,EAAET,kBAAA,CAAUO;EAFnB,GADO,CAVyB;EAgBlC/D,SAAS,EAAEwD,kBAAA,CAAUU,IAhBa;EAiBlCjE,KAAK,EAAEuD,kBAAA,CAAUW;AAjBiB,CAApC;eAoBezE,uB"}

package/lib/organism/brand-learning-priorities/style.css

@@ -0,0 +1,40 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_500 from colors;
+
+.container {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.LPtitle {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  margin-bottom: 8px;
+}
+
+.LPdescription {
+  color: cm_grey_500;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  max-width: 620px;
+  margin-bottom: 32px;
+}
+
+.loading {
+  position: relative;
+  height: 200px;
+}
+
+.ctaWrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.priorityCount {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px; 
+}

package/lib/organism/list-item/index.d.ts

@@ -1,20 +1,50 @@
 export default ListItem;
-declare function ListItem({ buttonLink, secondButtonLink, bulletPointMenuButton, tags, title, dataColumns, order, "aria-label": ariaLabel, contentType, isBulkStyle, isOverflowHidden }: {
+declare function ListItem({ buttonLink, secondButtonLink, bulletPointMenuButton, tags, title, selected, subtitle, dataColumns, order, "aria-label": ariaLabel, disabled, contentType, isBulkStyle, isOverflowHidden, onClick }: {
     buttonLink: any;
     secondButtonLink: any;
     bulletPointMenuButton: any;
     tags: any;
     title: any;
+    selected: any;
+    subtitle: any;
     dataColumns: any;
     order: any;
     "aria-label": any;
+    disabled?: boolean | undefined;
     contentType: any;
     isBulkStyle?: boolean | undefined;
     isOverflowHidden?: boolean | undefined;
-}): JSX.Element;
+    onClick?: import("lodash/fp").LodashNoop | undefined;
+}, context: any): JSX.Element;
 declare namespace ListItem {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
     const propTypes: {
         title: PropTypes.Validator<string>;
+        subtitle: PropTypes.Requireable<string>;
+        selected: PropTypes.Requireable<boolean>;
         dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
@@ -57,6 +87,8 @@ declare namespace ListItem {
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
+        disabled: PropTypes.Requireable<boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         isBulkStyle: PropTypes.Requireable<boolean>;
         isOverflowHidden: PropTypes.Requireable<boolean>;
         order: PropTypes.Requireable<number>;

package/lib/organism/list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAUA;;;;;;;;;;;;gBA6DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAaA;;;;;;;;;;;;;;;;8BAuGC"}

package/lib/organism/list-item/index.js

@@ -3,6 +3,10 @@
 exports.__esModule = true;
 exports.default = void 0;
 
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
+var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
+
 var _map2 = _interopRequireDefault(require("lodash/fp/map"));
 
 var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
@@ -11,10 +15,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _cssColorFunction = require("css-color-function");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
 var _tag = _interopRequireDefault(require("../../atom/tag"));
 
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
 var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
 var _bulletPointMenuButton = _interopRequireDefault(require("../../molecule/bullet-point-menu-button"));
@@ -23,59 +33,93 @@ var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// eslint-disable-next-line css-modules/no-unused-class
+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); }
+
 const ListItem = ({
   buttonLink,
   secondButtonLink,
   bulletPointMenuButton,
   tags,
   title,
+  selected,
+  subtitle,
   dataColumns,
   order,
   'aria-label': ariaLabel,
+  disabled = false,
   contentType,
   isBulkStyle = false,
-  isOverflowHidden = false
-}) => {
-  let isPublished = false;
-
-  const tagsView = _map2.default.convert({
+  isOverflowHidden = false,
+  onClick = _noop2.default
+}, context) => {
+  const {
+    skin
+  } = context;
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
+
+  const mapUncapped = _map2.default.convert({
     cap: false
-  })((tag, index) => {
+  });
+
+  let isPublished = false;
+  const selectedStyle = selected ? {
+    backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`)
+  } : {};
+  const tagSelectedStyle = selected ? {
+    backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.15))`),
+    color: primarySkinColor
+  } : {};
+  const tagsView = mapUncapped((tag, index) => {
     isPublished = tag.type === 'success';
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: _style.default.tag
-    }, /*#__PURE__*/_react.default.createElement(_tag.default, tag));
+    }, /*#__PURE__*/_react.default.createElement(_tag.default, _extends({}, tag, {
+      customStyle: tagSelectedStyle
+    })));
   })(tags);
-
-  const dataColumnsView = _map2.default.convert({
-    cap: false
-  })((dataColumn, index) => {
+  const dataColumnsView = mapUncapped((dataColumn, index) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: _style.default[dataColumn.className]
     }, dataColumn.type ? /*#__PURE__*/_react.default.createElement(_tag.default, dataColumn) : dataColumn.label);
   })(dataColumns);
-
   const orderView = order !== null && order !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.order,
     "aria-label": ariaLabel
   }, order + 1) : null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.wrapper, isBulkStyle && _style.default.gridLayout)
+    className: (0, _classnames.default)(_style.default.wrapper, isBulkStyle && _style.default.gridLayout, subtitle && _style.default.withSubtitle, disabled && _style.default.disabled, onClick !== _noop2.default && !disabled && _style.default.cursorPointer),
+    onClick: !disabled ? onClick : undefined,
+    style: selectedStyle
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_style.default.dataColumnsWrapper, isOverflowHidden && _style.default.hiddenOverflowX)
   }, isPublished && contentType === 'certification' ? orderView : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.title,
     title: title
-  }, title), dataColumnsView), /*#__PURE__*/_react.default.createElement("div", {
+  }, title, subtitle ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.subtitle
+  }, subtitle) : null), dataColumnsView), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.settings
-  }, tagsView, buttonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink) : null, secondButtonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, secondButtonLink) : null, !(0, _isEmpty2.default)(bulletPointMenuButton) ? /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, bulletPointMenuButton) : null));
+  }, tagsView, selected ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "circle-check",
+    iconColor: primarySkinColor,
+    backgroundColor: '#ffffff',
+    size: {
+      faSize: 16,
+      wrapperSize: 16
+    }
+  }) : null, buttonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink) : null, secondButtonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, secondButtonLink) : null, !(0, _isEmpty2.default)(bulletPointMenuButton) ? /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, bulletPointMenuButton) : null));
 };
 
+ListItem.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
 ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string.isRequired,
+  subtitle: _propTypes.default.string,
+  selected: _propTypes.default.bool,
   dataColumns: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string,
     type: _propTypes.default.oneOf(['success', 'failure', 'warning', 'progress', 'default']),
@@ -118,6 +162,8 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
     label: _propTypes.default.string,
     type: _propTypes.default.oneOf(['success', 'failure', 'warning', 'progress', 'default'])
   })),
+  disabled: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
   isBulkStyle: _propTypes.default.bool,
   isOverflowHidden: _propTypes.default.bool,
   order: _propTypes.default.number,

package/lib/organism/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItem","buttonLink","secondButtonLink","bulletPointMenuButton","tags","title","dataColumns","order","ariaLabel","contentType","isBulkStyle","isOverflowHidden","isPublished","tagsView","convert","cap","tag","index","type","style","dataColumnsView","dataColumn","className","label","orderView","undefined","classnames","wrapper","gridLayout","dataColumnsWrapper","hiddenOverflowX","settings","propTypes","PropTypes","string","isRequired","arrayOf","shape","oneOf","dataName","icon","position","onClick","func","buttonAriaLabel","menuAriaLabel","buttons","bool","number","id"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst ListItem = ({\n  buttonLink,\n  secondButtonLink,\n  bulletPointMenuButton,\n  tags,\n  title,\n  dataColumns,\n  order,\n  'aria-label': ariaLabel,\n  contentType,\n  isBulkStyle = false,\n  isOverflowHidden = false\n}) => {\n  let isPublished = false;\n\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    isPublished = tag.type === 'success';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n\n  const dataColumnsView = map.convert({cap: false})((dataColumn, index) => {\n    return (\n      <div key={index} className={style[dataColumn.className]}>\n        {dataColumn.type ? <Tag {...dataColumn} /> : dataColumn.label}\n      </div>\n    );\n  })(dataColumns);\n\n  const orderView =\n    order !== null && order !== undefined ? (\n      <div className={style.order} aria-label={ariaLabel}>\n        {order + 1}\n      </div>\n    ) : null;\n\n  return (\n    <div className={classnames(style.wrapper, isBulkStyle && style.gridLayout)}>\n      <div\n        className={classnames(style.dataColumnsWrapper, isOverflowHidden && style.hiddenOverflowX)}\n      >\n        {isPublished && contentType === 'certification' ? orderView : null}\n        <div className={style.title} title={title}>\n          {title}\n        </div>\n        {dataColumnsView}\n      </div>\n\n      <div className={style.settings}>\n        {tagsView}\n        {buttonLink ? <ButtonLink {...buttonLink} /> : null}\n        {secondButtonLink ? <ButtonLink {...secondButtonLink} /> : null}\n        {!isEmpty(bulletPointMenuButton) ? (\n          <BulletPointMenuButton {...bulletPointMenuButton} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  title: PropTypes.string.isRequired,\n  dataColumns: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default']),\n      className: PropTypes.oneOf(['cell', 'title'])\n    })\n  ),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  secondButtonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default'])\n    })\n  ),\n  isBulkStyle: PropTypes.bool,\n  isOverflowHidden: PropTypes.bool,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string,\n  contentType: PropTypes.string,\n  id: PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ListItem","buttonLink","secondButtonLink","bulletPointMenuButton","tags","title","selected","subtitle","dataColumns","order","ariaLabel","disabled","contentType","isBulkStyle","isOverflowHidden","onClick","context","skin","primarySkinColor","mapUncapped","convert","cap","isPublished","selectedStyle","backgroundColor","tagSelectedStyle","color","tagsView","tag","index","type","style","dataColumnsView","dataColumn","className","label","orderView","undefined","classnames","wrapper","gridLayout","withSubtitle","cursorPointer","dataColumnsWrapper","hiddenOverflowX","settings","faSize","wrapperSize","contextTypes","Provider","childContextTypes","translate","propTypes","PropTypes","string","isRequired","bool","arrayOf","shape","oneOf","dataName","icon","position","func","buttonAriaLabel","menuAriaLabel","buttons","number","id"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map, noop, get} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst ListItem = (\n  {\n    buttonLink,\n    secondButtonLink,\n    bulletPointMenuButton,\n    tags,\n    title,\n    selected,\n    subtitle,\n    dataColumns,\n    order,\n    'aria-label': ariaLabel,\n    disabled = false,\n    contentType,\n    isBulkStyle = false,\n    isOverflowHidden = false,\n    onClick = noop\n  },\n  context\n) => {\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const mapUncapped = map.convert({cap: false});\n  let isPublished = false;\n\n  const selectedStyle = selected\n    ? {\n        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`)\n      }\n    : {};\n\n  const tagSelectedStyle = selected\n    ? {\n        backgroundColor: convert(`color(${primarySkinColor} a(0.15))`),\n        color: primarySkinColor\n      }\n    : {};\n\n  const tagsView = mapUncapped((tag, index) => {\n    isPublished = tag.type === 'success';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} customStyle={tagSelectedStyle} />\n      </div>\n    );\n  })(tags);\n\n  const dataColumnsView = mapUncapped((dataColumn, index) => {\n    return (\n      <div key={index} className={style[dataColumn.className]}>\n        {dataColumn.type ? <Tag {...dataColumn} /> : dataColumn.label}\n      </div>\n    );\n  })(dataColumns);\n\n  const orderView =\n    order !== null && order !== undefined ? (\n      <div className={style.order} aria-label={ariaLabel}>\n        {order + 1}\n      </div>\n    ) : null;\n\n  return (\n    <div\n      className={classnames(\n        style.wrapper,\n        isBulkStyle && style.gridLayout,\n        subtitle && style.withSubtitle,\n        disabled && style.disabled,\n        onClick !== noop && !disabled && style.cursorPointer\n      )}\n      onClick={!disabled ? onClick : undefined}\n      style={selectedStyle}\n    >\n      <div\n        className={classnames(style.dataColumnsWrapper, isOverflowHidden && style.hiddenOverflowX)}\n      >\n        {isPublished && contentType === 'certification' ? orderView : null}\n        <div className={style.title} title={title}>\n          {title}\n          {subtitle ? <div className={style.subtitle}>{subtitle}</div> : null}\n        </div>\n        {dataColumnsView}\n      </div>\n\n      <div className={style.settings}>\n        {tagsView}\n        {selected ? (\n          <Icon\n            iconName=\"circle-check\"\n            iconColor={primarySkinColor}\n            backgroundColor={'#ffffff'}\n            size={{faSize: 16, wrapperSize: 16}}\n          />\n        ) : null}\n        {buttonLink ? <ButtonLink {...buttonLink} /> : null}\n        {secondButtonLink ? <ButtonLink {...secondButtonLink} /> : null}\n        {!isEmpty(bulletPointMenuButton) ? (\n          <BulletPointMenuButton {...bulletPointMenuButton} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nListItem.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nListItem.propTypes = {\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string,\n  selected: PropTypes.bool,\n  dataColumns: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default']),\n      className: PropTypes.oneOf(['cell', 'title'])\n    })\n  ),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  secondButtonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default'])\n    })\n  ),\n  disabled: PropTypes.bool,\n  onClick: PropTypes.func,\n  isBulkStyle: PropTypes.bool,\n  isOverflowHidden: PropTypes.bool,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string,\n  contentType: PropTypes.string,\n  id: PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":"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"}

package/lib/organism/list-item/style.css

@@ -24,11 +24,16 @@
   grid-template-columns: 60% auto;
 }
 
+.disabled {
+  opacity: 0.5;
+}
+
 .title {
   color: cm_grey_900;
   display: flex;
+  flex-direction: column;
   height: 56px;
-  align-items: center;
+  justify-content: center;
   flex: 2 0 0;
   font-family: Gilroy;
   font-size: 16px;
@@ -42,6 +47,17 @@
   white-space: nowrap;
 }
 
+.subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_400;
+}
+
+.cursorPointer {
+  cursor: pointer;
+}
+
 .settings {
   align-items: center;
   display: flex;
@@ -96,4 +112,12 @@
 
 .hiddenOverflowX:hover {
   overflow-x: auto;
+}
+
+.withSubtitle {
+  padding: 8px 16px;
+
+  .setting {
+    gap: 8px;
+  }
 }

package/lib/organism/list-items/index.d.ts

@@ -54,6 +54,8 @@ declare namespace ListItems {
         content: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
             items: PropTypes.Requireable<(PropTypes.InferProps<{
                 title: PropTypes.Validator<string>;
+                subtitle: PropTypes.Requireable<string>;
+                selected: PropTypes.Requireable<boolean>;
                 dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
@@ -96,6 +98,8 @@ declare namespace ListItems {
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
                 }> | null | undefined)[]>;
+                disabled: PropTypes.Requireable<boolean>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 isBulkStyle: PropTypes.Requireable<boolean>;
                 isOverflowHidden: PropTypes.Requireable<boolean>;
                 order: PropTypes.Requireable<number>;

package/lib/organism/rewards-form/index.d.ts

@@ -26,6 +26,9 @@ declare namespace RewardsForm {
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
                     size: PropTypes.Requireable<string>;
+                    customStyle: PropTypes.Requireable<{
+                        [x: string]: string | null | undefined;
+                    }>;
                 }>>;
             }>>;
             child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{

package/lib/organism/select-opponents/index.d.ts

@@ -25,6 +25,9 @@ declare const SelectOpponents: {
                     label: import("prop-types").Requireable<string>;
                     type: import("prop-types").Requireable<string>;
                     size: import("prop-types").Requireable<string>;
+                    customStyle: import("prop-types").Requireable<{
+                        [x: string]: string | null | undefined;
+                    }>;
                 }>>;
             }>>;
             child: import("prop-types").Requireable<NonNullable<import("prop-types").InferProps<{

package/lib/organism/select-opponents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,oBAAoB,EAA+B,MAAM,SAAS,CAAC;AAMtF,QAAA,MAAM,eAAe;YAAW,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnD,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,oBAAoB,EAA+B,MAAM,SAAS,CAAC;AAMtF,QAAA,MAAM,eAAe;YAAW,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnD,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/lib/organism/select-opponents/types.d.ts

@@ -22,6 +22,9 @@ export declare const propTypes: {
                 label: PropTypes.Requireable<string>;
                 type: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<string>;
+                customStyle: PropTypes.Requireable<{
+                    [x: string]: string | null | undefined;
+                }>;
             }>>;
         }>>;
         child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{

package/lib/organism/select-opponents/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAErB,CAAC;AAEF,oBAAY,4BAA4B,GAAG;IACzC,KAAK,EAAE;QACL,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;KACtB,CAAC;IACF,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,4BAA4B,EAAE,CAAC;CACvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAErB,CAAC;AAEF,oBAAY,4BAA4B,GAAG;IACzC,KAAK,EAAE;QACL,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;KACtB,CAAC;IACF,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,4BAA4B,EAAE,CAAC;CACvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/organism/title-and-input/index.d.ts

@@ -15,6 +15,9 @@ declare const TitleAndInput: {
                 label: import("prop-types").Requireable<string>;
                 type: import("prop-types").Requireable<string>;
                 size: import("prop-types").Requireable<string>;
+                customStyle: import("prop-types").Requireable<{
+                    [x: string]: string | null | undefined;
+                }>;
             }>>;
         }>>>;
         field: import("prop-types").Requireable<NonNullable<import("prop-types").InferProps<{
@@ -76,6 +79,9 @@ declare const TitleAndInput: {
                         label: import("prop-types").Requireable<string>;
                         type: import("prop-types").Requireable<string>;
                         size: import("prop-types").Requireable<string>;
+                        customStyle: import("prop-types").Requireable<{
+                            [x: string]: string | null | undefined;
+                        }>;
                     }>>;
                 }>>;
                 child: import("prop-types").Requireable<NonNullable<import("prop-types").InferProps<{

package/lib/organism/title-and-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/title-and-input/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAiBtD,QAAA,MAAM,aAAa;YAAW,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB/C,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/title-and-input/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAiBtD,QAAA,MAAM,aAAa;YAAW,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB/C,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/lib/organism/title-and-input/types.d.ts

@@ -16,6 +16,9 @@ declare const propTypes: {
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
             size: PropTypes.Requireable<string>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
         }>>;
     }>>>;
     field: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
@@ -77,6 +80,9 @@ declare const propTypes: {
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
                     size: PropTypes.Requireable<string>;
+                    customStyle: PropTypes.Requireable<{
+                        [x: string]: string | null | undefined;
+                    }>;
                 }>>;
             }>>;
             child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{

package/lib/organism/title-and-input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/title-and-input/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAC,oBAAoB,EAAC,MAAM,2BAA2B,CAAC;AAE/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQd,CAAC;AACF,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,EACD,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,GACzC,oBAAoB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/title-and-input/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAC,oBAAoB,EAAC,MAAM,2BAA2B,CAAC;AAE/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQd,CAAC;AACF,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,EACD,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,GACzC,oBAAoB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAe,SAAS,CAAC"}