@coorpacademy/components 11.40.15 → 11.40.17-react18.15

package/es/atom/autocomplete/index.d.ts

@@ -1,5 +1,5 @@
 export default Autocomplete;
-declare function Autocomplete(props: any): JSX.Element;
+declare function Autocomplete(props: any): React.JSX.Element;
 declare namespace Autocomplete {
     namespace propTypes {
         const title: PropTypes.Requireable<string>;
@@ -10,10 +10,10 @@ declare namespace Autocomplete {
         const modified: PropTypes.Requireable<boolean>;
         const error: PropTypes.Requireable<boolean>;
         const errorMessage: PropTypes.Requireable<string>;
-        const suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
+        const suggestions: PropTypes.Requireable<PropTypes.InferProps<{
             name: PropTypes.Requireable<string>;
-            value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        }> | null | undefined)[]>;
+            value: PropTypes.Requireable<NonNullable<string | number>>;
+        }>[]>;
         const theme: PropTypes.Requireable<string>;
         const onInput: PropTypes.Requireable<(...args: any[]) => any>;
         const onFetch: PropTypes.Requireable<(...args: any[]) => any>;
@@ -22,5 +22,6 @@ declare namespace Autocomplete {
         const onSuggestionSelected: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/autocomplete/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";AAmBA,uDA8GC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";AAmBA,6DA8GC"}

package/es/atom/avatar/index.d.ts

@@ -1,11 +1,12 @@
 export default Avatar;
 declare function Avatar({ url }: {
     url: any;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace Avatar {
     namespace propTypes {
         const url: PropTypes.Validator<string>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/avatar/index.js"],"names":[],"mappings":";AAKA;;gBAaC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/avatar/index.js"],"names":[],"mappings":";AAKA;;sBAaC"}

package/es/atom/battle-opponent/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { WebContextValues } from '../provider/web-context';
 import { BattleOpponentProps } from './prop-types';
 declare const BattleOpponent: {
-    ({ isAlreadyEngaged, isRandom, userAvatarSrc, onClick, displayName, tooltipText, "aria-label": ariaLabel }: BattleOpponentProps, legacyContext: WebContextValues): JSX.Element;
+    ({ isAlreadyEngaged, isRandom, userAvatarSrc, onClick, displayName, tooltipText, "aria-label": ariaLabel }: BattleOpponentProps, legacyContext: WebContextValues): React.JSX.Element;
     propTypes: {
         isAlreadyEngaged: import("prop-types").Requireable<boolean>;
         isRandom: import("prop-types").Requireable<boolean>;

package/es/atom/battle-opponent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;gHASf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;;CAyGhC,CAAC;AAQF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAUpE,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;gHASf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;;CAyGhC,CAAC;AAQF,eAAe,cAAc,CAAC"}

package/es/atom/button/index.d.ts

@@ -1,5 +1,5 @@
 export default Button;
-declare function Button(props: any): JSX.Element;
+declare function Button(props: any): React.JSX.Element;
 declare namespace Button {
     const propTypes: {
         color: any;
@@ -29,5 +29,6 @@ declare namespace Button {
         buttonContentClassName: PropTypes.Requireable<string>;
     };
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";AA8IA,iDAgCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";AA8IA,uDAgCC"}

package/es/atom/button/index.native.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 declare type ButtonProps = {
     accessibilityLabel?: string;
@@ -9,6 +9,6 @@ declare type ButtonProps = {
     testID?: string;
     textStyle?: TextStyle;
 };
-declare const Button: (props: ButtonProps) => JSX.Element | null;
+declare const Button: (props: ButtonProps) => React.JSX.Element;
 export default Button;
 //# sourceMappingURL=index.native.d.ts.map

package/es/atom/button/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.native.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA8B9D,aAAK,WAAW,GAAG;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,uBA4BjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAa,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA8B9D,aAAK,WAAW,GAAG;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,sBA4BjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/es/atom/button/style.css

@@ -3,7 +3,7 @@
 @value xtraLightGrey from colors;
 @value light from colors;
 @value white from colors;
-@value lightMediumGray from colors;
+@value lightMediumGrey from colors;
 
 .button {
   composes: hoverFill from './hover-fill.css';
@@ -41,7 +41,7 @@
 }
 
 .disabledAnchor {
-  background-color: lightMediumGray;
+  background-color: lightMediumGrey;
   min-width: 200px;
   text-transform: inherit;
   border-radius: 2px;

package/es/atom/button-link/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { ButtonLinkProps } from './types';
 declare const ButtonLink: {
-    (props: ButtonLinkProps): JSX.Element;
+    (props: ButtonLinkProps): React.JSX.Element;
     propTypes: {
         type: import("prop-types").Requireable<string>;
         usage: import("prop-types").Requireable<string>;
@@ -22,7 +22,7 @@ declare const ButtonLink: {
                 size: import("prop-types").Requireable<number>;
                 customStyle: import("prop-types").Requireable<object>;
             }>>;
-        }> | (import("prop-types").InferProps<{
+        }> | import("prop-types").InferProps<{
             position: import("prop-types").Requireable<string>;
             type: import("prop-types").Requireable<string>;
             faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
@@ -32,7 +32,7 @@ declare const ButtonLink: {
                 size: import("prop-types").Requireable<number>;
                 customStyle: import("prop-types").Requireable<object>;
             }>>;
-        }> | null | undefined)[] | null | undefined>>;
+        }>[]>>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         link: import("prop-types").Requireable<import("prop-types").InferProps<{
             href: import("prop-types").Requireable<string>;

package/es/atom/button-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAQA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAuG7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAQ5D,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAuG7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/es/atom/button-link/types.d.ts

@@ -33,7 +33,7 @@ declare const propTypes: {
             size: PropTypes.Requireable<number>;
             customStyle: PropTypes.Requireable<object>;
         }>>;
-    }> | (PropTypes.InferProps<{
+    }> | PropTypes.InferProps<{
         position: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
         faIcon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -43,7 +43,7 @@ declare const propTypes: {
             size: PropTypes.Requireable<number>;
             customStyle: PropTypes.Requireable<object>;
         }>>;
-    }> | null | undefined)[] | null | undefined>>;
+    }>[]>>;
     onClick: PropTypes.Requireable<(...args: any[]) => any>;
     link: PropTypes.Requireable<PropTypes.InferProps<{
         href: PropTypes.Requireable<string>;

package/es/atom/button-link-icon/index.d.ts

@@ -1,5 +1,5 @@
 export default ButtonLinkIcon;
-declare function ButtonLinkIcon(props: any): JSX.Element;
+declare function ButtonLinkIcon(props: any): React.JSX.Element;
 declare namespace ButtonLinkIcon {
     const propTypes: {
         size: PropTypes.Requireable<string>;
@@ -18,5 +18,6 @@ declare namespace ButtonLinkIcon {
         tooltipPlacement: PropTypes.Requireable<string>;
     };
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/button-link-icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon/index.js"],"names":[],"mappings":";AAoCA,yDAkHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon/index.js"],"names":[],"mappings":";AAoCA,+DAkHC"}

package/es/atom/button-menu/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { ButtonMenuProps } from './types';
 declare const ButtonMenu: {
-    (props: ButtonMenuProps): JSX.Element;
+    (props: ButtonMenuProps): React.JSX.Element;
     propTypes: {
-        buttons: import("prop-types").Validator<(import("prop-types").InferProps<{
+        buttons: import("prop-types").Validator<import("prop-types").InferProps<{
             'data-name': import("prop-types").Requireable<string>;
             disabled: import("prop-types").Requireable<boolean>;
             label: import("prop-types").Validator<string>;
@@ -23,10 +23,10 @@ declare const ButtonMenu: {
                 }>>;
             }>>;
             customStyle: import("prop-types").Requireable<{
-                [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                [x: string]: NonNullable<string | number>;
             }>;
             customLabelClassName: import("prop-types").Requireable<string>;
-        }> | null | undefined)[]>;
+        }>[]>;
         'data-name': import("prop-types").Requireable<string>;
         'aria-label': import("prop-types").Requireable<string>;
         enableScroll: import("prop-types").Requireable<boolean>;

package/es/atom/button-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AA+DjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AA+DjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/es/atom/button-menu/types.d.ts

@@ -20,12 +20,12 @@ export declare const buttonPropTypes: {
         }>>;
     }>>;
     customStyle: PropTypes.Requireable<{
-        [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+        [x: string]: NonNullable<string | number>;
     }>;
     customLabelClassName: PropTypes.Requireable<string>;
 };
 declare const propTypes: {
-    buttons: PropTypes.Validator<(PropTypes.InferProps<{
+    buttons: PropTypes.Validator<PropTypes.InferProps<{
         'data-name': PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         label: PropTypes.Validator<string>;
@@ -45,10 +45,10 @@ declare const propTypes: {
             }>>;
         }>>;
         customStyle: PropTypes.Requireable<{
-            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+            [x: string]: NonNullable<string | number>;
         }>;
         customLabelClassName: PropTypes.Requireable<string>;
-    }> | null | undefined)[]>;
+    }>[]>;
     'data-name': PropTypes.Requireable<string>;
     'aria-label': PropTypes.Requireable<string>;
     enableScroll: PropTypes.Requireable<boolean>;

package/es/atom/button-menu/utils.d.ts

@@ -2,7 +2,7 @@ export declare const DEFAULT_ICON_STYLE: {
     position: "left";
     faIcon: {
         size: number;
-        color: "#9999A8";
+        color: "#515161";
         customStyle: {
             padding: number;
         };

package/es/atom/card-image-preview/index.d.ts

@@ -3,7 +3,7 @@ declare function CardImagePreview({ image }: {
     image: any;
 }, { skin }: {
     skin: any;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace CardImagePreview {
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{
@@ -32,5 +32,6 @@ declare namespace CardImagePreview {
         const image: PropTypes.Requireable<string>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/card-image-preview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/card-image-preview/index.js"],"names":[],"mappings":";AAQA;;;;gBAiBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/card-image-preview/index.js"],"names":[],"mappings":";AAQA;;;;sBAiBC"}

package/es/atom/catalog-section/index.d.ts

@@ -2,12 +2,13 @@ export default CatalogSection;
 declare function CatalogSection({ title, children }: {
     title: any;
     children: any;
-}, context: any): JSX.Element;
+}, context: any): React.JSX.Element;
 declare namespace CatalogSection {
     namespace propTypes {
         const title: PropTypes.Requireable<string>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/catalog-section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/catalog-section/index.js"],"names":[],"mappings":";AAIA;;;8BAKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/catalog-section/index.js"],"names":[],"mappings":";AAIA;;;oCAKC"}

package/es/atom/centered-text/index.d.ts

@@ -1,11 +1,12 @@
 export default CenteredText;
 declare function CenteredText({ children }: {
     children: any;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace CenteredText {
     namespace propTypes {
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/centered-text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/centered-text/index.js"],"names":[],"mappings":";AAIA;;gBAAmF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/centered-text/index.js"],"names":[],"mappings":";AAIA;;sBAAmF"}

package/es/atom/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 export default Checkbox;
-declare function Checkbox(props: any): JSX.Element;
+declare function Checkbox(props: any): React.JSX.Element;
 declare namespace Checkbox {
     const propTypes: {
         checked: PropTypes.Requireable<boolean>;
@@ -12,5 +12,6 @@ declare namespace Checkbox {
         'aria-label': PropTypes.Requireable<string>;
     };
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox/index.js"],"names":[],"mappings":";AAIA,mDAaC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox/index.js"],"names":[],"mappings":";AAIA,yDAaC"}

package/es/atom/checkbox-with-title/index.d.ts

@@ -1,7 +1,8 @@
 export default CheckboxWithTitle;
-declare function CheckboxWithTitle(props: any): JSX.Element;
+declare function CheckboxWithTitle(props: any, context: any): React.JSX.Element;
 declare namespace CheckboxWithTitle {
     const propTypes: {
+        value: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
         name: PropTypes.Requireable<string>;
         checked: PropTypes.Requireable<boolean>;
@@ -14,9 +15,33 @@ declare namespace CheckboxWithTitle {
             preset: PropTypes.Requireable<string>;
         }>>;
         customStyle: PropTypes.Requireable<{
-            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+            [x: string]: NonNullable<string | number>;
         }>;
     };
+    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;
+            }>;
+        }>>;
+    }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/checkbox-with-title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox-with-title/index.js"],"names":[],"mappings":";AAQA,4DA0DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox-with-title/index.js"],"names":[],"mappings":";AAUA,gFAiEC"}

package/es/atom/checkbox-with-title/index.js

@@ -1,16 +1,20 @@
 import _uniqueId from "lodash/fp/uniqueId";
 import _noop from "lodash/fp/noop";
+import _getOr from "lodash/fp/getOr";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import FaIcon from '../icon';
+import { COLORS } from '../../variables/colors';
+import Provider from '../provider';
 import style from './style.css';
 const DEFAULT_ICON_STYLE = {
   padding: '0',
   width: '20px',
   height: '20px'
 };
-const CheckboxWithTitle = props => {
+const CheckboxWithTitle = (props, context) => {
   const {
+    value,
     title,
     name,
     checked,
@@ -24,6 +28,10 @@ const CheckboxWithTitle = props => {
     },
     customStyle = {}
   } = props;
+  const {
+    skin
+  } = context;
+  const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
   const {
     iconName,
     iconColor,
@@ -40,6 +48,7 @@ const CheckboxWithTitle = props => {
     htmlFor: idCheckbox
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
+    "data-value": value,
     id: idCheckbox,
     name: name,
     onChange: handleChange,
@@ -48,7 +57,11 @@ const CheckboxWithTitle = props => {
     "data-name": dataName,
     "aria-label": ariaLabel
   }), /*#__PURE__*/React.createElement("div", {
-    className: style.label
+    className: style.label,
+    style: checked ? {
+      background: primaryColor,
+      borderColor: primaryColor
+    } : null
   }, checked ? /*#__PURE__*/React.createElement(FaIcon, {
     className: style.icon,
     iconName: iconName,
@@ -69,6 +82,7 @@ const CheckboxWithTitle = props => {
   }) : null);
 };
 CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
+  value: PropTypes.string,
   title: PropTypes.string,
   name: PropTypes.string,
   checked: PropTypes.bool,
@@ -82,5 +96,8 @@ CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 } : {};
+CheckboxWithTitle.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default CheckboxWithTitle;
 //# sourceMappingURL=index.js.map

package/es/atom/checkbox-with-title/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FaIcon","style","DEFAULT_ICON_STYLE","padding","width","height","CheckboxWithTitle","props","title","name","checked","onChange","_noop","dataName","ariaLabel","icon","iconName","iconColor","preset","customStyle","idCheckbox","_uniqueId","handleChange","e","target","createElement","className","container","htmlFor","type","id","checkbox","label","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","string","bool","func","shape","objectOf","oneOfType","number"],"sources":["../../../src/atom/checkbox-with-title/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport FaIcon from '../icon';\nimport style from './style.css';\n\nconst DEFAULT_ICON_STYLE = {padding: '0', width: '20px', height: '20px'};\n\nconst CheckboxWithTitle = props => {\n  const {\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    icon = {iconName: 'check', iconColor: 'white', preset: 's'},\n    customStyle = {}\n  } = props;\n  const {iconName, iconColor, preset} = icon;\n  const idCheckbox = useMemo(() => uniqueId('input-checkbox-'), []);\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <div className={style.container} style={{...customStyle}}>\n      {onChange !== noop ? (\n        <label htmlFor={idCheckbox}>\n          <input\n            type=\"checkbox\"\n            id={idCheckbox}\n            name={name}\n            onChange={handleChange}\n            checked={checked}\n            className={style.checkbox}\n            data-name={dataName}\n            aria-label={ariaLabel}\n          />\n          <div className={style.label}>\n            {checked ? (\n              <FaIcon\n                className={style.icon}\n                iconName={iconName}\n                iconColor={iconColor}\n                preset={preset}\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            ) : (\n              <FaIcon\n                className={style.icon}\n                iconName={'square'}\n                iconColor={'transparent'}\n                preset=\"s\"\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            )}\n          </div>\n        </label>\n      ) : null}\n      {title ? (\n        <span\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.shape({\n    iconName: PropTypes.string,\n    iconColor: PropTypes.string,\n    preset: PropTypes.string\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\nexport default CheckboxWithTitle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FaIcon","COLORS","Provider","style","DEFAULT_ICON_STYLE","padding","width","height","CheckboxWithTitle","props","context","value","title","name","checked","onChange","_noop","dataName","ariaLabel","icon","iconName","iconColor","preset","customStyle","skin","primaryColor","_getOr","cm_primary_blue","idCheckbox","_uniqueId","handleChange","e","target","createElement","className","container","htmlFor","type","id","checkbox","label","background","borderColor","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","string","bool","func","shape","objectOf","oneOfType","number","contextTypes","childContextTypes"],"sources":["../../../src/atom/checkbox-with-title/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, noop, uniqueId} from 'lodash/fp';\nimport FaIcon from '../icon';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst DEFAULT_ICON_STYLE = {padding: '0', width: '20px', height: '20px'};\n\nconst CheckboxWithTitle = (props, context) => {\n  const {\n    value,\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    icon = {iconName: 'check', iconColor: 'white', preset: 's'},\n    customStyle = {}\n  } = props;\n  const {skin} = context;\n  const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n  const {iconName, iconColor, preset} = icon;\n  const idCheckbox = useMemo(() => uniqueId('input-checkbox-'), []);\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <div className={style.container} style={{...customStyle}}>\n      {onChange !== noop ? (\n        <label htmlFor={idCheckbox}>\n          <input\n            type=\"checkbox\"\n            data-value={value}\n            id={idCheckbox}\n            name={name}\n            onChange={handleChange}\n            checked={checked}\n            className={style.checkbox}\n            data-name={dataName}\n            aria-label={ariaLabel}\n          />\n          <div\n            className={style.label}\n            style={checked ? {background: primaryColor, borderColor: primaryColor} : null}\n          >\n            {checked ? (\n              <FaIcon\n                className={style.icon}\n                iconName={iconName}\n                iconColor={iconColor}\n                preset={preset}\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            ) : (\n              <FaIcon\n                className={style.icon}\n                iconName={'square'}\n                iconColor={'transparent'}\n                preset=\"s\"\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            )}\n          </div>\n        </label>\n      ) : null}\n      {title ? (\n        <span\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  value: PropTypes.string,\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.shape({\n    iconName: PropTypes.string,\n    iconColor: PropTypes.string,\n    preset: PropTypes.string\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nCheckboxWithTitle.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default CheckboxWithTitle;\n"],"mappings":"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","ignoreList":[]}

package/es/atom/chip/index.d.ts

@@ -1,6 +1,6 @@
 export function calculateHoveredSelectedBgColor(selectedBgColor: any, luminosityDelta?: number): any;
 export default Chip;
-declare function Chip(props: any, context: any): JSX.Element;
+declare function Chip(props: any, context: any): React.JSX.Element;
 declare namespace Chip {
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{
@@ -35,9 +35,10 @@ declare namespace Chip {
         const onClick: PropTypes.Requireable<(...args: any[]) => any>;
         const leftIcon: PropTypes.Requireable<string>;
         const customStyle: PropTypes.Requireable<{
-            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+            [x: string]: NonNullable<string | number>;
         }>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAmBO,qGAG0E;;AAGjF,6DAuEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAmBO,qGAG0E;;AAGjF,mEA0EC"}

package/es/atom/chip/index.js

@@ -1,10 +1,10 @@
 import React, { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 import { convert } from 'css-color-function';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { fas } from '@fortawesome/pro-solid-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import Provider from '../provider';
 import { COLORS } from '../../variables/colors';
@@ -27,14 +27,14 @@ const Chip = (props, context) => {
     customIcon,
     onClick,
     leftIcon,
-    backgroundColor = DEFAULT_BACKGROUND_COLOR,
+    backgroundColor,
     customStyle
   } = props;
   const {
     skin
   } = context;
-  const skinColor = get('common.primary', skin);
-  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;
+  const skinColor = getOr(DEFAULT_BACKGROUND_COLOR, 'common.primary', skin);
+  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor || DEFAULT_BACKGROUND_COLOR;
   const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);
   const [isHovered, setIsHovered] = useState(false);
   const handleClick = useMemo(() => onClick, [onClick]);

package/es/atom/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","convert","FontAwesomeIcon","fas","library","Provider","COLORS","style","add","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","textColor","cm_grey_700","selected","customIcon","onClick","leftIcon","backgroundColor","customStyle","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","showIcon","color","white","createElement","className","container","unselected","onMouseEnter","onMouseLeave","left","icon","fontSize","title","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","func","objectOf","oneOfType","number"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n  selectedBgColor,\n  luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n  const {\n    text,\n    subText,\n    textColor = COLORS.cm_grey_700,\n    selected = false,\n    customIcon,\n    onClick,\n    leftIcon,\n    backgroundColor = DEFAULT_BACKGROUND_COLOR,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const skinColor = get('common.primary', skin);\n  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n  const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useMemo(() => onClick, [onClick]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n  const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n  const showIcon = customIcon !== 'none';\n  const color = selected ? COLORS.white : textColor;\n\n  return (\n    <div\n      className={classnames(style.container, !selected && style.unselected)}\n      style={{\n        ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n        ...(selected && hoverStyle),\n        ...customStyle\n      }}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-label={text}\n      data-name={`chip-${text}`}\n    >\n      <div className={style.left}>\n        {leftIcon ? <FontAwesomeIcon style={{color}} icon={leftIcon} fontSize={ICON_SIZE} /> : null}\n        <div title={text}>\n          <span className={style.text} style={{color}}>\n            {text}\n          </span>\n          {subText ? (\n            <span className={style.subText} style={{color}}>\n              {subText}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {showIcon ? (\n        <FontAwesomeIcon\n          style={{color}}\n          icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n          fontSize={ICON_SIZE}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nChip.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n  text: PropTypes.string,\n  subText: PropTypes.string,\n  textColor: PropTypes.string,\n  selected: PropTypes.bool,\n  customIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  onClick: PropTypes.func,\n  leftIcon: PropTypes.string,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","getOr","convert","FontAwesomeIcon","fas","library","Provider","COLORS","style","add","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","textColor","cm_grey_700","selected","customIcon","onClick","leftIcon","backgroundColor","customStyle","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","showIcon","color","white","createElement","className","container","unselected","onMouseEnter","onMouseLeave","left","icon","fontSize","title","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","func","objectOf","oneOfType","number"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/free-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n  selectedBgColor,\n  luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n  const {\n    text,\n    subText,\n    textColor = COLORS.cm_grey_700,\n    selected = false,\n    customIcon,\n    onClick,\n    leftIcon,\n    backgroundColor,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const skinColor = getOr(DEFAULT_BACKGROUND_COLOR, 'common.primary', skin);\n  const selectedBgColor =\n    backgroundColor === 'skin' && skinColor\n      ? skinColor\n      : backgroundColor || DEFAULT_BACKGROUND_COLOR;\n  const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useMemo(() => onClick, [onClick]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n  const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n  const showIcon = customIcon !== 'none';\n  const color = selected ? COLORS.white : textColor;\n\n  return (\n    <div\n      className={classnames(style.container, !selected && style.unselected)}\n      style={{\n        ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n        ...(selected && hoverStyle),\n        ...customStyle\n      }}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-label={text}\n      data-name={`chip-${text}`}\n    >\n      <div className={style.left}>\n        {leftIcon ? <FontAwesomeIcon style={{color}} icon={leftIcon} fontSize={ICON_SIZE} /> : null}\n        <div title={text}>\n          <span className={style.text} style={{color}}>\n            {text}\n          </span>\n          {subText ? (\n            <span className={style.subText} style={{color}}>\n              {subText}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {showIcon ? (\n        <FontAwesomeIcon\n          style={{color}}\n          icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n          fontSize={ICON_SIZE}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nChip.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n  text: PropTypes.string,\n  subText: PropTypes.string,\n  textColor: PropTypes.string,\n  selected: PropTypes.bool,\n  customIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  onClick: PropTypes.func,\n  leftIcon: PropTypes.string,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}