box-ui-elements 16.1.0-beta.9 → 17.0.0

package/es/components/avatar/Avatar.js

@@ -9,12 +9,14 @@ function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) ||
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import * as React from 'react';
+import { injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import Badgeable from '../badgeable';
 import AvatarImage from './AvatarImage';
 import AvatarInitials from './AvatarInitials';
 import UnknownUserAvatar from './UnknownUserAvatar';
 import GlobeBadge16 from '../../icon/fill/GlobeBadge16';
+import messages from './messages';
 import './Avatar.scss';
 var SIZES = {
   small: true,
@@ -25,14 +27,17 @@ function Avatar(_ref) {
   var _ref2;
 
   var avatarUrl = _ref.avatarUrl,
+      badgeIcon = _ref.badgeIcon,
       className = _ref.className,
       name = _ref.name,
       id = _ref.id,
+      intl = _ref.intl,
       isExternal = _ref.isExternal,
       _ref$shouldShowExtern = _ref.shouldShowExternal,
       shouldShowExternal = _ref$shouldShowExtern === void 0 ? false : _ref$shouldShowExtern,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? '' : _ref$size;
+  var formatMessage = intl.formatMessage;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -44,7 +49,7 @@ function Avatar(_ref) {
       prevAvatarUrl = _React$useState4[0],
       setPrevAvatarUrl = _React$useState4[1];
 
-  var classes = classNames(['avatar', className, (_ref2 = {}, _defineProperty(_ref2, "avatar--".concat(size), size && SIZES[size]), _defineProperty(_ref2, 'avatar--isExternal', shouldShowExternal && isExternal), _ref2)]); // Reset hasImageErrored state when avatarUrl changes
+  var classes = classNames(['avatar', className, (_ref2 = {}, _defineProperty(_ref2, "avatar--".concat(size), size && SIZES[size]), _defineProperty(_ref2, 'avatar--isExternal', shouldShowExternal && isExternal), _defineProperty(_ref2, 'avatar--iconBadge', !!badgeIcon), _ref2)]); // Reset hasImageErrored state when avatarUrl changes
 
   if (avatarUrl !== prevAvatarUrl) {
     setHasImageErrored(false);
@@ -71,13 +76,25 @@ function Avatar(_ref) {
     });
   }
 
+  var badge = null;
+
+  if (shouldShowExternal && isExternal) {
+    badge = React.createElement(GlobeBadge16, {
+      className: "bdl-Avatar-externalBadge",
+      title: formatMessage(messages.externalUser)
+    });
+  } else if (badgeIcon) {
+    badge = React.createElement("div", {
+      className: "bdl-Avatar-badge bdl-Avatar-iconBadge"
+    }, badgeIcon);
+  }
+
   return React.createElement(Badgeable, {
     className: classes,
-    bottomRight: shouldShowExternal && isExternal ? React.createElement(GlobeBadge16, {
-      className: "bdl-Avatar-externalBadge"
-    }) : undefined
+    bottomRight: badge
   }, React.createElement("span", null, avatar));
 }
 
-export default Avatar;
+export { Avatar as AvatarBase };
+export default injectIntl(Avatar);
 //# sourceMappingURL=Avatar.js.map

package/es/components/avatar/Avatar.js.flow

@@ -18,6 +18,12 @@ type Props = {
      * Required if "name" is not specified.
      */
     avatarUrl?: ?string,
+    /**
+     * Icon React Element that will be shown as a badge in bottom right corner of Avatar.
+     *
+     * Will not be used if `shouldShowExternal` and `isExternal` is true, then GlobalBadge will be shown.
+     */
+    badgeIcon?: React.Element<any>,
     /** classname to add to the container element. */
     className?: string,
     /** Users id */
@@ -36,7 +42,16 @@ type Props = {
     size?: $Keys<typeof SIZES>,
 };
 
-function Avatar({ avatarUrl, className, name, id, isExternal, shouldShowExternal = false, size = '' }: Props) {
+function Avatar({
+    avatarUrl,
+    badgeIcon,
+    className,
+    name,
+    id,
+    isExternal,
+    shouldShowExternal = false,
+    size = '',
+}: Props) {
     const [hasImageErrored, setHasImageErrored] = React.useState<boolean>(false);
     const [prevAvatarUrl, setPrevAvatarUrl] = React.useState<$PropertyType<Props, 'avatarUrl'>>(null);
 
@@ -68,13 +83,15 @@ function Avatar({ avatarUrl, className, name, id, isExternal, shouldShowExternal
         avatar = <UnknownUserAvatar className="avatar-icon" />;
     }
 
+    let badge = null;
+    if (shouldShowExternal && isExternal) {
+        badge = <GlobeBadge16 className="bdl-Avatar-externalBadge" />;
+    } else if (badgeIcon) {
+        badge = <div className="bdl-Avatar-badge bdl-Avatar-iconBadge">{badgeIcon}</div>;
+    }
+
     return (
-        <Badgeable
-            className={classes}
-            bottomRight={
-                shouldShowExternal && isExternal ? <GlobeBadge16 className="bdl-Avatar-externalBadge" /> : undefined
-            }
-        >
+        <Badgeable className={classes} bottomRight={badge}>
             <span role="presentation">{avatar}</span>
         </Badgeable>
     );

package/es/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar/Avatar.tsx"],"names":["React","classNames","Badgeable","AvatarImage","AvatarInitials","UnknownUserAvatar","GlobeBadge16","SIZES","small","large","Avatar","avatarUrl","className","name","id","isExternal","shouldShowExternal","size","useState","hasImageErrored","setHasImageErrored","prevAvatarUrl","setPrevAvatarUrl","classes","avatar","undefined"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,YAAP,MAAyB,8BAAzB;AAEA,OAAO,eAAP;AAEA,IAAMC,KAAK,GAAG;AAAEC,EAAAA,KAAK,EAAE,IAAT;AAAeC,EAAAA,KAAK,EAAE;AAAtB,CAAd;;AA2BA,SAASC,MAAT,OAAoH;AAAA;;AAAA,MAAlGC,SAAkG,QAAlGA,SAAkG;AAAA,MAAvFC,SAAuF,QAAvFA,SAAuF;AAAA,MAA5EC,IAA4E,QAA5EA,IAA4E;AAAA,MAAtEC,EAAsE,QAAtEA,EAAsE;AAAA,MAAlEC,UAAkE,QAAlEA,UAAkE;AAAA,mCAAtDC,kBAAsD;AAAA,MAAtDA,kBAAsD,sCAAjC,KAAiC;AAAA,uBAA1BC,IAA0B;AAAA,MAA1BA,IAA0B,0BAAnB,EAAmB;;AAAA,wBAClEjB,KAAK,CAACkB,QAAN,CAAwB,KAAxB,CADkE;AAAA;AAAA,MACzGC,eADyG;AAAA,MACxFC,kBADwF;;AAAA,yBAEtEpB,KAAK,CAACkB,QAAN,CAAyC,IAAzC,CAFsE;AAAA;AAAA,MAEzGG,aAFyG;AAAA,MAE1FC,gBAF0F;;AAIhH,MAAMC,OAAO,GAAGtB,UAAU,CAAC,CACvB,QADuB,EAEvBW,SAFuB,wDAGTK,IAHS,GAGAA,IAAI,IAAIV,KAAK,CAACU,IAAD,CAHb,0BAGqB,oBAHrB,EAG2CD,kBAAkB,IAAID,UAHjE,UAAD,CAA1B,CAJgH,CAUhH;;AACA,MAAIJ,SAAS,KAAKU,aAAlB,EAAiC;AAC7BD,IAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACAE,IAAAA,gBAAgB,CAACX,SAAD,CAAhB;AACH;;AAED,MAAIa,MAAJ;;AACA,MAAIb,SAAS,IAAI,CAACQ,eAAlB,EAAmC;AAC/BK,IAAAA,MAAM,GACF,oBAAC,WAAD;AACI,MAAA,OAAO,EAAE,mBAAM;AACXJ,QAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACH,OAHL;AAII,MAAA,GAAG,EAAET;AAJT,MADJ;AAQH,GATD,MASO,IAAIE,IAAJ,EAAU;AACbW,IAAAA,MAAM,GAAG,oBAAC,cAAD;AAAgB,MAAA,EAAE,EAAEV,EAApB;AAAwB,MAAA,IAAI,EAAED;AAA9B,MAAT;AACH,GAFM,MAEA;AACHW,IAAAA,MAAM,GAAG,oBAAC,iBAAD;AAAmB,MAAA,SAAS,EAAC;AAA7B,MAAT;AACH;;AAED,SACI,oBAAC,SAAD;AACI,IAAA,SAAS,EAAED,OADf;AAEI,IAAA,WAAW,EACPP,kBAAkB,IAAID,UAAtB,GAAmC,oBAAC,YAAD;AAAc,MAAA,SAAS,EAAC;AAAxB,MAAnC,GAA2FU;AAHnG,KAMI,kCAAOD,MAAP,CANJ,CADJ;AAUH;;AAED,eAAed,MAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport Badgeable from '../badgeable';\nimport AvatarImage from './AvatarImage';\nimport AvatarInitials from './AvatarInitials';\nimport UnknownUserAvatar from './UnknownUserAvatar';\nimport GlobeBadge16 from '../../icon/fill/GlobeBadge16';\n\nimport './Avatar.scss';\n\nconst SIZES = { small: true, large: true };\n\nexport interface AvatarProps {\n    /**\n     * Url to avatar image.  If passed in, component will render the avatar image instead of the initials\n     *\n     * Required if \"name\" is not specified.\n     */\n    avatarUrl?: string | null;\n    /** classname to add to the container element. */\n    className?: string;\n    /** Users id */\n    id?: string | number | null;\n    /** Whether this avatar should be labeled as external in the current context */\n    isExternal?: boolean;\n    /**\n     * Users full name.\n     *\n     * Required if \"avatarUrl\" is not specified.\n     */\n    name?: string | null;\n    /** Show the external avatar marker if the avatar is marked as for an external user */\n    shouldShowExternal?: boolean;\n    /* avatar size (enum) */\n    size?: keyof typeof SIZES | '';\n}\n\nfunction Avatar({ avatarUrl, className, name, id, isExternal, shouldShowExternal = false, size = '' }: AvatarProps) {\n    const [hasImageErrored, setHasImageErrored] = React.useState<boolean>(false);\n    const [prevAvatarUrl, setPrevAvatarUrl] = React.useState<AvatarProps['avatarUrl']>(null);\n\n    const classes = classNames([\n        'avatar',\n        className,\n        { [`avatar--${size}`]: size && SIZES[size], 'avatar--isExternal': shouldShowExternal && isExternal },\n    ]);\n\n    // Reset hasImageErrored state when avatarUrl changes\n    if (avatarUrl !== prevAvatarUrl) {\n        setHasImageErrored(false);\n        setPrevAvatarUrl(avatarUrl);\n    }\n\n    let avatar;\n    if (avatarUrl && !hasImageErrored) {\n        avatar = (\n            <AvatarImage\n                onError={() => {\n                    setHasImageErrored(true);\n                }}\n                url={avatarUrl}\n            />\n        );\n    } else if (name) {\n        avatar = <AvatarInitials id={id} name={name} />;\n    } else {\n        avatar = <UnknownUserAvatar className=\"avatar-icon\" />;\n    }\n\n    return (\n        <Badgeable\n            className={classes}\n            bottomRight={\n                shouldShowExternal && isExternal ? <GlobeBadge16 className=\"bdl-Avatar-externalBadge\" /> : undefined\n            }\n        >\n            <span>{avatar}</span>\n        </Badgeable>\n    );\n}\n\nexport default Avatar;\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../src/components/avatar/Avatar.tsx"],"names":["React","injectIntl","classNames","Badgeable","AvatarImage","AvatarInitials","UnknownUserAvatar","GlobeBadge16","messages","SIZES","small","large","Avatar","avatarUrl","badgeIcon","className","name","id","intl","isExternal","shouldShowExternal","size","formatMessage","useState","hasImageErrored","setHasImageErrored","prevAvatarUrl","setPrevAvatarUrl","classes","avatar","badge","externalUser","AvatarBase"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { injectIntl, IntlShape } from 'react-intl';\nimport classNames from 'classnames';\nimport Badgeable from '../badgeable';\nimport AvatarImage from './AvatarImage';\nimport AvatarInitials from './AvatarInitials';\nimport UnknownUserAvatar from './UnknownUserAvatar';\nimport GlobeBadge16 from '../../icon/fill/GlobeBadge16';\n\nimport messages from './messages';\n\nimport './Avatar.scss';\n\nconst SIZES = { small: true, large: true };\n\nexport interface AvatarProps {\n    /**\n     * Url to avatar image.  If passed in, component will render the avatar image instead of the initials\n     *\n     * Required if \"name\" is not specified.\n     */\n    avatarUrl?: string | null;\n    /**\n     * Icon React Element that will be shown as a badge in bottom right corner of Avatar.\n     *\n     * Will not be used if `shouldShowExternal` and `isExternal` is true, then GlobalBadge will be shown.\n     */\n    badgeIcon?: React.ReactElement;\n    /** classname to add to the container element. */\n    className?: string;\n    /** Users id */\n    id?: string | number | null;\n    /** Intl object */\n    intl: IntlShape;\n    /** Whether this avatar should be labeled as external in the current context */\n    isExternal?: boolean;\n    /**\n     * Users full name.\n     *\n     * Required if \"avatarUrl\" is not specified.\n     */\n    name?: string | null;\n    /** Show the external avatar marker if the avatar is marked as for an external user */\n    shouldShowExternal?: boolean;\n    /* avatar size (enum) */\n    size?: keyof typeof SIZES | '';\n}\n\nfunction Avatar({\n    avatarUrl,\n    badgeIcon,\n    className,\n    name,\n    id,\n    intl,\n    isExternal,\n    shouldShowExternal = false,\n    size = '',\n}: AvatarProps) {\n    const { formatMessage } = intl;\n\n    const [hasImageErrored, setHasImageErrored] = React.useState<boolean>(false);\n    const [prevAvatarUrl, setPrevAvatarUrl] = React.useState<AvatarProps['avatarUrl']>(null);\n\n    const classes = classNames([\n        'avatar',\n        className,\n        {\n            [`avatar--${size}`]: size && SIZES[size],\n            'avatar--isExternal': shouldShowExternal && isExternal,\n            'avatar--iconBadge': !!badgeIcon,\n        },\n    ]);\n\n    // Reset hasImageErrored state when avatarUrl changes\n    if (avatarUrl !== prevAvatarUrl) {\n        setHasImageErrored(false);\n        setPrevAvatarUrl(avatarUrl);\n    }\n\n    let avatar;\n    if (avatarUrl && !hasImageErrored) {\n        avatar = (\n            <AvatarImage\n                onError={() => {\n                    setHasImageErrored(true);\n                }}\n                url={avatarUrl}\n            />\n        );\n    } else if (name) {\n        avatar = <AvatarInitials id={id} name={name} />;\n    } else {\n        avatar = <UnknownUserAvatar className=\"avatar-icon\" />;\n    }\n\n    let badge = null;\n    if (shouldShowExternal && isExternal) {\n        badge = <GlobeBadge16 className=\"bdl-Avatar-externalBadge\" title={formatMessage(messages.externalUser)} />;\n    } else if (badgeIcon) {\n        badge = <div className=\"bdl-Avatar-badge bdl-Avatar-iconBadge\">{badgeIcon}</div>;\n    }\n\n    return (\n        <Badgeable className={classes} bottomRight={badge}>\n            <span>{avatar}</span>\n        </Badgeable>\n    );\n}\n\nexport { Avatar as AvatarBase };\nexport default injectIntl(Avatar);\n"],"file":"Avatar.js"}

package/es/components/avatar/Avatar.scss

@@ -55,6 +55,22 @@
         }
     }
 
+    &.avatar--iconBadge {
+        .bdl-Avatar-iconBadge {
+            border-width: 2px;
+
+            & > svg {
+                width: 12px;
+                height: 12px;
+            }
+        }
+
+        @include Badgeable-bottomRightBadge {
+            bottom: -4px;
+            left: calc(100% - 10px);
+        }
+    }
+
     @for $i from 1 through length($avatar-colors) {
         .avatar-initials[data-bg-idx='#{$i - 1}'] {
             background-color: nth($avatar-colors, $i);
@@ -81,6 +97,20 @@
                 left: calc(100% - 10px);
             }
         }
+
+        &.avatar--iconBadge {
+            line-height: 0; // .badgeable-container has `line-height: 1 which evaluates to 13px which is too much for small badge
+
+            @include Badgeable-bottomRightBadge {
+                bottom: -4px;
+                left: calc(100% - 10px);
+            }
+
+            .bdl-Avatar-iconBadge > svg {
+                width: 8px;
+                height: 8px;
+            }
+        }
     }
 
     &.avatar--large {
@@ -90,9 +120,21 @@
         .avatar-initials {
             font-size: 14px;
         }
+
+        &.avatar--iconBadge {
+            @include Badgeable-bottomRightBadge {
+                left: calc(100% - 14px);
+            }
+
+            .bdl-Avatar-iconBadge > svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
     }
 }
 
+.bdl-Avatar-badge,
 .bdl-Avatar-externalBadge {
     background-color: $white;
     border-color: $white;

package/es/components/avatar/Avatar.stories.js

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import IconVerified from '../../icons/general/IconVerified';
+import IconTaskGeneral from '../../icons/two-toned/IconTaskGeneral';
+import IconAnnotation from '../../icons/two-toned/IconAnnotation';
 import Avatar from './Avatar';
 import notes from './Avatar.stories.md';
 export var regular = function regular() {
@@ -56,6 +59,61 @@ export var markedAsExternal = function markedAsExternal() {
     size: "small"
   }));
 };
+export var withBadges = function withBadges() {
+  return React.createElement("div", null, React.createElement(Avatar, {
+    id: 1,
+    name: "Aaron Levie",
+    badgeIcon: React.createElement(IconTaskGeneral, null),
+    size: "large"
+  }), React.createElement("br", null), React.createElement(Avatar, {
+    id: 1,
+    name: "Aaron Levie",
+    badgeIcon: React.createElement(IconTaskGeneral, null)
+  }), React.createElement("br", null), React.createElement(Avatar, {
+    id: 1,
+    name: "Aaron Levie",
+    badgeIcon: React.createElement(IconTaskGeneral, null),
+    size: "small"
+  }), React.createElement("br", null), React.createElement("br", null), React.createElement(Avatar, {
+    id: 1,
+    name: "Aaron Levie",
+    badgeIcon: React.createElement(IconAnnotation, null),
+    size: "large"
+  }), React.createElement("br", null), React.createElement(Avatar, {
+    id: 1,
+    name: "Aaron Levie",
+    badgeIcon: React.createElement(IconAnnotation, null)
+  }), React.createElement("br", null), React.createElement(Avatar, {
+    id: 1,
+    name: "Aaron Levie",
+    badgeIcon: React.createElement(IconAnnotation, null),
+    size: "small"
+  }), React.createElement("br", null), React.createElement("br", null), React.createElement(Avatar, {
+    badgeIcon: React.createElement(IconVerified, {
+      className: "completed",
+      title: "Verified user"
+    }),
+    id: 1,
+    name: "Aaron Levie",
+    size: "large"
+  }), React.createElement("br", null), React.createElement(Avatar, {
+    avatarUrl: "data:image/jpeg;base64,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",
+    badgeIcon: React.createElement(IconVerified, {
+      className: "completed",
+      title: "Verified user"
+    }),
+    id: 1,
+    name: "Aaron Levie"
+  }), React.createElement("br", null), React.createElement(Avatar, {
+    badgeIcon: React.createElement(IconVerified, {
+      className: "completed",
+      title: "Verified user"
+    }),
+    id: 1,
+    name: "Aaron Levie",
+    size: "small"
+  }));
+};
 export var withMultipleAvatars = function withMultipleAvatars() {
   return React.createElement("div", null, React.createElement(Avatar, {
     id: 1,

package/es/components/avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar/Avatar.stories.tsx"],"names":["React","Avatar","notes","regular","small","large","withAvatarUrl","withUrlFallbackToInitials","markedAsExternal","withMultipleAvatars","withoutNameOrInitials","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,IAAI,EAAC;AAAvC,IAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,IAAI,EAAC;AAAvC,IAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SACzB,oBAAC,MAAD;AACI,IAAA,EAAE,EAAE,CADR;AAEI,IAAA,IAAI,EAAC,aAFT;AAGI,IAAA,SAAS,EAAC;AAHd,IADyB;AAAA,CAAtB;AAQP,OAAO,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAC;AAA5C,IAAN;AAAA,CAAlC;AAEP,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,SAC5B,iCACI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,kBAAkB,MAAjC;AAAkC,IAAA,IAAI,EAAC,aAAvC;AAAqD,IAAA,UAAU,MAA/D;AAAgE,IAAA,IAAI,EAAC;AAArE,IADJ,EAEI,+BAFJ,EAGI,oBAAC,MAAD;AACI,IAAA,EAAE,EAAE,CADR;AAEI,IAAA,IAAI,EAAC,aAFT;AAGI,IAAA,kBAAkB,MAHtB;AAII,IAAA,UAAU,MAJd;AAKI,IAAA,SAAS,EAAC;AALd,IAHJ,EAUI,+BAVJ,EAWI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,kBAAkB,MAAjC;AAAkC,IAAA,IAAI,EAAC,aAAvC;AAAqD,IAAA,UAAU,MAA/D;AAAgE,IAAA,IAAI,EAAC;AAArE,IAXJ,CAD4B;AAAA,CAAzB;AAgBP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB;AAAA,SAC/B,iCACI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IADJ,EAEI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IAFJ,EAGI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IAHJ,CAD+B;AAAA,CAA5B;AAQP,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,SAAM,oBAAC,MAAD,OAAN;AAAA,CAA9B;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,mBADI;AAEXC,EAAAA,SAAS,EAAEX,MAFA;AAGXY,EAAAA,UAAU,EAAE;AACRX,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport Avatar from './Avatar';\nimport notes from './Avatar.stories.md';\n\nexport const regular = () => <Avatar id={1} name=\"Aaron Levie\" />;\n\nexport const small = () => <Avatar id={1} name=\"Aaron Levie\" size=\"small\" />;\n\nexport const large = () => <Avatar id={1} name=\"Aaron Levie\" size=\"large\" />;\n\nexport const withAvatarUrl = () => (\n    <Avatar\n        id={1}\n        name=\"Aaron Levie\"\n        avatarUrl=\"data:image/jpeg;base64,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\"\n    />\n);\n\nexport const withUrlFallbackToInitials = () => <Avatar id={1} name=\"Aaron Levie\" avatarUrl=\"garbage\" />;\n\nexport const markedAsExternal = () => (\n    <div>\n        <Avatar id={1} shouldShowExternal name=\"Aaron Levie\" isExternal size=\"large\" />\n        <br />\n        <Avatar\n            id={1}\n            name=\"Aaron Levie\"\n            shouldShowExternal\n            isExternal\n            avatarUrl=\"data:image/jpeg;base64,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\"\n        />\n        <br />\n        <Avatar id={1} shouldShowExternal name=\"Aaron Levie\" isExternal size=\"small\" />\n    </div>\n);\n\nexport const withMultipleAvatars = () => (\n    <div>\n        <Avatar id={1} name=\"Aaron Levie\" />\n        <Avatar id={2} name=\"Front End (example.com)\" />\n        <Avatar id={3} name=\"Redwood City\" />\n    </div>\n);\n\nexport const withoutNameOrInitials = () => <Avatar />;\n\nexport default {\n    title: 'Components|Avatar',\n    component: Avatar,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Avatar.stories.js"}
+{"version":3,"sources":["../../../src/components/avatar/Avatar.stories.tsx"],"names":["React","IconVerified","IconTaskGeneral","IconAnnotation","Avatar","notes","regular","small","large","withAvatarUrl","withUrlFallbackToInitials","markedAsExternal","withBadges","withMultipleAvatars","withoutNameOrInitials","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,YAAP,MAAyB,kCAAzB;AACA,OAAOC,eAAP,MAA4B,uCAA5B;AACA,OAAOC,cAAP,MAA2B,sCAA3B;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,IAAI,EAAC;AAAvC,IAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,IAAI,EAAC;AAAvC,IAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SACzB,oBAAC,MAAD;AACI,IAAA,EAAE,EAAE,CADR;AAEI,IAAA,IAAI,EAAC,aAFT;AAGI,IAAA,SAAS,EAAC;AAHd,IADyB;AAAA,CAAtB;AAQP,OAAO,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAC;AAA5C,IAAN;AAAA,CAAlC;AAEP,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,SAC5B,iCACI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,kBAAkB,MAAjC;AAAkC,IAAA,IAAI,EAAC,aAAvC;AAAqD,IAAA,UAAU,MAA/D;AAAgE,IAAA,IAAI,EAAC;AAArE,IADJ,EAEI,+BAFJ,EAGI,oBAAC,MAAD;AACI,IAAA,EAAE,EAAE,CADR;AAEI,IAAA,IAAI,EAAC,aAFT;AAGI,IAAA,kBAAkB,MAHtB;AAII,IAAA,UAAU,MAJd;AAKI,IAAA,SAAS,EAAC;AALd,IAHJ,EAUI,+BAVJ,EAWI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,kBAAkB,MAAjC;AAAkC,IAAA,IAAI,EAAC,aAAvC;AAAqD,IAAA,UAAU,MAA/D;AAAgE,IAAA,IAAI,EAAC;AAArE,IAXJ,CAD4B;AAAA,CAAzB;AAgBP,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SACtB,iCACI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAE,oBAAC,eAAD,OAA7C;AAAkE,IAAA,IAAI,EAAC;AAAvE,IADJ,EAEI,+BAFJ,EAGI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAE,oBAAC,eAAD;AAA7C,IAHJ,EAII,+BAJJ,EAKI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAE,oBAAC,eAAD,OAA7C;AAAkE,IAAA,IAAI,EAAC;AAAvE,IALJ,EAMI,+BANJ,EAOI,+BAPJ,EASI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAE,oBAAC,cAAD,OAA7C;AAAiE,IAAA,IAAI,EAAC;AAAtE,IATJ,EAUI,+BAVJ,EAWI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAE,oBAAC,cAAD;AAA7C,IAXJ,EAYI,+BAZJ,EAaI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAE,oBAAC,cAAD,OAA7C;AAAiE,IAAA,IAAI,EAAC;AAAtE,IAbJ,EAcI,+BAdJ,EAeI,+BAfJ,EAiBI,oBAAC,MAAD;AACI,IAAA,SAAS,EAAE,oBAAC,YAAD;AAAc,MAAA,SAAS,EAAC,WAAxB;AAAoC,MAAA,KAAK,EAAC;AAA1C,MADf;AAEI,IAAA,EAAE,EAAE,CAFR;AAGI,IAAA,IAAI,EAAC,aAHT;AAII,IAAA,IAAI,EAAC;AAJT,IAjBJ,EAuBI,+BAvBJ,EAwBI,oBAAC,MAAD;AACI,IAAA,SAAS,EAAC,qhEADd;AAEI,IAAA,SAAS,EAAE,oBAAC,YAAD;AAAc,MAAA,SAAS,EAAC,WAAxB;AAAoC,MAAA,KAAK,EAAC;AAA1C,MAFf;AAGI,IAAA,EAAE,EAAE,CAHR;AAII,IAAA,IAAI,EAAC;AAJT,IAxBJ,EA8BI,+BA9BJ,EA+BI,oBAAC,MAAD;AACI,IAAA,SAAS,EAAE,oBAAC,YAAD;AAAc,MAAA,SAAS,EAAC,WAAxB;AAAoC,MAAA,KAAK,EAAC;AAA1C,MADf;AAEI,IAAA,EAAE,EAAE,CAFR;AAGI,IAAA,IAAI,EAAC,aAHT;AAII,IAAA,IAAI,EAAC;AAJT,IA/BJ,CADsB;AAAA,CAAnB;AAyCP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB;AAAA,SAC/B,iCACI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IADJ,EAEI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IAFJ,EAGI,oBAAC,MAAD;AAAQ,IAAA,EAAE,EAAE,CAAZ;AAAe,IAAA,IAAI,EAAC;AAApB,IAHJ,CAD+B;AAAA,CAA5B;AAQP,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,SAAM,oBAAC,MAAD,OAAN;AAAA,CAA9B;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,mBADI;AAEXC,EAAAA,SAAS,EAAEZ,MAFA;AAGXa,EAAAA,UAAU,EAAE;AACRZ,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport IconVerified from '../../icons/general/IconVerified';\nimport IconTaskGeneral from '../../icons/two-toned/IconTaskGeneral';\nimport IconAnnotation from '../../icons/two-toned/IconAnnotation';\n\nimport Avatar from './Avatar';\nimport notes from './Avatar.stories.md';\n\nexport const regular = () => <Avatar id={1} name=\"Aaron Levie\" />;\n\nexport const small = () => <Avatar id={1} name=\"Aaron Levie\" size=\"small\" />;\n\nexport const large = () => <Avatar id={1} name=\"Aaron Levie\" size=\"large\" />;\n\nexport const withAvatarUrl = () => (\n    <Avatar\n        id={1}\n        name=\"Aaron Levie\"\n        avatarUrl=\"data:image/jpeg;base64,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\"\n    />\n);\n\nexport const withUrlFallbackToInitials = () => <Avatar id={1} name=\"Aaron Levie\" avatarUrl=\"garbage\" />;\n\nexport const markedAsExternal = () => (\n    <div>\n        <Avatar id={1} shouldShowExternal name=\"Aaron Levie\" isExternal size=\"large\" />\n        <br />\n        <Avatar\n            id={1}\n            name=\"Aaron Levie\"\n            shouldShowExternal\n            isExternal\n            avatarUrl=\"data:image/jpeg;base64,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\"\n        />\n        <br />\n        <Avatar id={1} shouldShowExternal name=\"Aaron Levie\" isExternal size=\"small\" />\n    </div>\n);\n\nexport const withBadges = () => (\n    <div>\n        <Avatar id={1} name=\"Aaron Levie\" badgeIcon={<IconTaskGeneral />} size=\"large\" />\n        <br />\n        <Avatar id={1} name=\"Aaron Levie\" badgeIcon={<IconTaskGeneral />} />\n        <br />\n        <Avatar id={1} name=\"Aaron Levie\" badgeIcon={<IconTaskGeneral />} size=\"small\" />\n        <br />\n        <br />\n\n        <Avatar id={1} name=\"Aaron Levie\" badgeIcon={<IconAnnotation />} size=\"large\" />\n        <br />\n        <Avatar id={1} name=\"Aaron Levie\" badgeIcon={<IconAnnotation />} />\n        <br />\n        <Avatar id={1} name=\"Aaron Levie\" badgeIcon={<IconAnnotation />} size=\"small\" />\n        <br />\n        <br />\n\n        <Avatar\n            badgeIcon={<IconVerified className=\"completed\" title=\"Verified user\" />}\n            id={1}\n            name=\"Aaron Levie\"\n            size=\"large\"\n        />\n        <br />\n        <Avatar\n            avatarUrl=\"data:image/jpeg;base64,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\"\n            badgeIcon={<IconVerified className=\"completed\" title=\"Verified user\" />}\n            id={1}\n            name=\"Aaron Levie\"\n        />\n        <br />\n        <Avatar\n            badgeIcon={<IconVerified className=\"completed\" title=\"Verified user\" />}\n            id={1}\n            name=\"Aaron Levie\"\n            size=\"small\"\n        />\n    </div>\n);\n\nexport const withMultipleAvatars = () => (\n    <div>\n        <Avatar id={1} name=\"Aaron Levie\" />\n        <Avatar id={2} name=\"Front End (example.com)\" />\n        <Avatar id={3} name=\"Redwood City\" />\n    </div>\n);\n\nexport const withoutNameOrInitials = () => <Avatar />;\n\nexport default {\n    title: 'Components|Avatar',\n    component: Avatar,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Avatar.stories.js"}

package/es/components/avatar/messages.js

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+var messages = defineMessages({
+  externalUser: {
+    "id": "boxui.avatar.externalUser",
+    "defaultMessage": "External user"
+  }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/es/components/avatar/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar/messages.ts"],"names":["defineMessages","messages","externalUser"],"mappings":"AAAA,SAASA,cAAT,QAA+B,YAA/B;AAEA,IAAMC,QAAQ,GAAGD,cAAc,CAAC;AAC5BE,EAAAA,YAAY;AAAA;AAAA;AAAA;AADgB,CAAD,CAA/B;AAQA,eAAeD,QAAf","sourcesContent":["import { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n    externalUser: {\n        defaultMessage: 'External user',\n        description: 'Text for an icon aria label to convey an external user of the enterprise',\n        id: 'boxui.avatar.externalUser',\n    },\n});\n\nexport default messages;\n"],"file":"messages.js"}

package/es/components/badgeable/Badgeable.scss

@@ -4,7 +4,7 @@
 $badgeable-position-offset: 1px;
 $badgeable-icon-size: 14px;
 
-$badgeable-position: ($badgeable-icon-size/2);
+$badgeable-position: ($badgeable-icon-size * .5);
 
 %badge {
     position: absolute;

package/es/components/breadcrumb/Breadcrumb.js

@@ -70,6 +70,6 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }, React.createElement("ol", null, renderBreadcrumbs()));
 };
 
-export { Breadcrumb as BreadcrumbCore };
+export { Breadcrumb as BreadcrumbBase };
 export default injectIntl(Breadcrumb);
 //# sourceMappingURL=Breadcrumb.js.map

package/es/components/breadcrumb/Breadcrumb.js.flow

@@ -84,5 +84,5 @@ const Breadcrumb = ({
     );
 };
 
-export { Breadcrumb as BreadcrumbCore };
+export { Breadcrumb as BreadcrumbBase };
 export default injectIntl(Breadcrumb);

package/es/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/breadcrumb/Breadcrumb.js"],"names":["React","injectIntl","classNames","MenuLinkItem","EllipsisCrumb","Crumb","messages","Breadcrumb","children","className","hasReverseOverflowOrder","intl","numItemsBeforeOverflow","overflowMenuButton","threshold","breadcrumbs","Children","toArray","constructChildren","overflowItems","slice","length","dotDotDotItems","reverse","menuCrumbsItems","map","crumb","index","renderBreadcrumbs","newChildren","hasEllipsis","item","i","isLastCrumb","formatMessage","breadcrumbLabel","BreadcrumbCore"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport classNames from 'classnames';\n\nimport { MenuLinkItem } from '../menu';\nimport EllipsisCrumb from './EllipsisCrumb';\nimport Crumb from './Crumb';\nimport messages from './messages';\n\nimport './Breadcrumb.scss';\n\nexport type BreadcrumbProps = {\n    /** Breadcrumb contents */\n    children: React.Node,\n    /** Class name for Breadcrumb */\n    className?: string,\n    /** Reverse default overflow breadcrumb ordering to highest to lowest depth */\n    hasReverseOverflowOrder?: boolean,\n    /** Show number of breadcrumb items before overflow. Default is 1 */\n    numItemsBeforeOverflow?: number,\n    /** Element to override default overflow menu button */\n    overflowMenuButton?: React.Node,\n    /** Number of crumbs to show before they collapse into an ellipsis */\n    threshold?: number,\n};\n\ntype Props = BreadcrumbProps & InjectIntlProvidedProps;\n\nconst Breadcrumb = ({\n    children,\n    className = '',\n    hasReverseOverflowOrder = false,\n    intl,\n    numItemsBeforeOverflow = 1,\n    overflowMenuButton,\n    threshold = 4,\n}: Props) => {\n    const breadcrumbs = React.Children.toArray(children);\n\n    const constructChildren = () => {\n        const overflowItems = breadcrumbs.slice(numItemsBeforeOverflow, breadcrumbs.length + 1 - threshold);\n        const dotDotDotItems = hasReverseOverflowOrder ? overflowItems : overflowItems.reverse();\n\n        const menuCrumbsItems = (\n            <EllipsisCrumb menuButton={overflowMenuButton}>\n                {dotDotDotItems.map((crumb, index) => (\n                    <MenuLinkItem key={index}>{crumb}</MenuLinkItem>\n                ))}\n            </EllipsisCrumb>\n        );\n        return [...breadcrumbs.slice(0, numItemsBeforeOverflow), menuCrumbsItems, ...breadcrumbs.slice(1 - threshold)];\n    };\n\n    const renderBreadcrumbs = () => {\n        let newChildren = breadcrumbs;\n        let { length } = breadcrumbs;\n        let hasEllipsis = false;\n\n        if (length > threshold) {\n            newChildren = constructChildren();\n            length = newChildren.length;\n            hasEllipsis = true;\n        }\n\n        return React.Children.map(newChildren, (item, i) => {\n            const isLastCrumb = length === 0 || i === length - 1;\n            return (\n                <Crumb\n                    className={classNames({ 'no-shrink': hasEllipsis && i === numItemsBeforeOverflow })}\n                    isLastCrumb={isLastCrumb}\n                >\n                    {item}\n                </Crumb>\n            );\n        });\n    };\n\n    return (\n        <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={classNames('breadcrumbs', className)}>\n            <ol>{renderBreadcrumbs()}</ol>\n        </nav>\n    );\n};\n\nexport { Breadcrumb as BreadcrumbCore };\nexport default injectIntl(Breadcrumb);\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../../src/components/breadcrumb/Breadcrumb.js"],"names":["React","injectIntl","classNames","MenuLinkItem","EllipsisCrumb","Crumb","messages","Breadcrumb","children","className","hasReverseOverflowOrder","intl","numItemsBeforeOverflow","overflowMenuButton","threshold","breadcrumbs","Children","toArray","constructChildren","overflowItems","slice","length","dotDotDotItems","reverse","menuCrumbsItems","map","crumb","index","renderBreadcrumbs","newChildren","hasEllipsis","item","i","isLastCrumb","formatMessage","breadcrumbLabel","BreadcrumbBase"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport classNames from 'classnames';\n\nimport { MenuLinkItem } from '../menu';\nimport EllipsisCrumb from './EllipsisCrumb';\nimport Crumb from './Crumb';\nimport messages from './messages';\n\nimport './Breadcrumb.scss';\n\nexport type BreadcrumbProps = {\n    /** Breadcrumb contents */\n    children: React.Node,\n    /** Class name for Breadcrumb */\n    className?: string,\n    /** Reverse default overflow breadcrumb ordering to highest to lowest depth */\n    hasReverseOverflowOrder?: boolean,\n    /** Show number of breadcrumb items before overflow. Default is 1 */\n    numItemsBeforeOverflow?: number,\n    /** Element to override default overflow menu button */\n    overflowMenuButton?: React.Node,\n    /** Number of crumbs to show before they collapse into an ellipsis */\n    threshold?: number,\n};\n\ntype Props = BreadcrumbProps & InjectIntlProvidedProps;\n\nconst Breadcrumb = ({\n    children,\n    className = '',\n    hasReverseOverflowOrder = false,\n    intl,\n    numItemsBeforeOverflow = 1,\n    overflowMenuButton,\n    threshold = 4,\n}: Props) => {\n    const breadcrumbs = React.Children.toArray(children);\n\n    const constructChildren = () => {\n        const overflowItems = breadcrumbs.slice(numItemsBeforeOverflow, breadcrumbs.length + 1 - threshold);\n        const dotDotDotItems = hasReverseOverflowOrder ? overflowItems : overflowItems.reverse();\n\n        const menuCrumbsItems = (\n            <EllipsisCrumb menuButton={overflowMenuButton}>\n                {dotDotDotItems.map((crumb, index) => (\n                    <MenuLinkItem key={index}>{crumb}</MenuLinkItem>\n                ))}\n            </EllipsisCrumb>\n        );\n        return [...breadcrumbs.slice(0, numItemsBeforeOverflow), menuCrumbsItems, ...breadcrumbs.slice(1 - threshold)];\n    };\n\n    const renderBreadcrumbs = () => {\n        let newChildren = breadcrumbs;\n        let { length } = breadcrumbs;\n        let hasEllipsis = false;\n\n        if (length > threshold) {\n            newChildren = constructChildren();\n            length = newChildren.length;\n            hasEllipsis = true;\n        }\n\n        return React.Children.map(newChildren, (item, i) => {\n            const isLastCrumb = length === 0 || i === length - 1;\n            return (\n                <Crumb\n                    className={classNames({ 'no-shrink': hasEllipsis && i === numItemsBeforeOverflow })}\n                    isLastCrumb={isLastCrumb}\n                >\n                    {item}\n                </Crumb>\n            );\n        });\n    };\n\n    return (\n        <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={classNames('breadcrumbs', className)}>\n            <ol>{renderBreadcrumbs()}</ol>\n        </nav>\n    );\n};\n\nexport { Breadcrumb as BreadcrumbBase };\nexport default injectIntl(Breadcrumb);\n"],"file":"Breadcrumb.js"}

package/es/components/button-group/ButtonGroup.scss

@@ -78,7 +78,7 @@
             z-index: 2; /* place on top of siblings */
             color: $bdl-gray-80;
             background-color: $bdl-gray-10;
-            border-color: $bdl-gray-62;
+            border-color: $bdl-gray-65;
             box-shadow: none;
         }
 
@@ -93,7 +93,7 @@
         & > .bdl-targeted-click-through {
             > .btn,
             > .bdl-Button {
-                color: $bdl-gray-62;
+                color: $bdl-gray-65;
                 background-color: $bdl-gray-02;
                 border: 1px solid $bdl-gray-30;
                 box-shadow: none;

package/es/components/checkbox/Checkbox.js

@@ -17,14 +17,16 @@ var Checkbox = function Checkbox(_ref) {
       fieldLabel = _ref.fieldLabel,
       hideLabel = _ref.hideLabel,
       id = _ref.id,
+      inputClassName = _ref.inputClassName,
       isChecked = _ref.isChecked,
       isDisabled = _ref.isDisabled,
       label = _ref.label,
       name = _ref.name,
+      onFocus = _ref.onFocus,
       onChange = _ref.onChange,
       subsection = _ref.subsection,
       tooltip = _ref.tooltip,
-      rest = _objectWithoutProperties(_ref, ["className", "description", "fieldLabel", "hideLabel", "id", "isChecked", "isDisabled", "label", "name", "onChange", "subsection", "tooltip"]);
+      rest = _objectWithoutProperties(_ref, ["className", "description", "fieldLabel", "hideLabel", "id", "inputClassName", "isChecked", "isDisabled", "label", "name", "onFocus", "onChange", "subsection", "tooltip"]);
 
   var generatedID = React.useRef(uniqueId('checkbox')).current; // use passed-in ID from props; otherwise generate one
 
@@ -34,9 +36,11 @@ var Checkbox = function Checkbox(_ref) {
   }, React.createElement("input", _extends({
     "aria-describedby": description ? "description_".concat(inputID) : '',
     checked: isChecked,
+    className: inputClassName,
     disabled: isDisabled,
     id: inputID,
     name: name,
+    onFocus: onFocus,
     onChange: onChange,
     type: "checkbox"
   }, rest)), React.createElement("span", {

package/es/components/checkbox/Checkbox.js.flow

@@ -17,6 +17,7 @@ type Props = {
     hideLabel?: boolean,
     /** Unique `id` for the input */
     id?: string,
+    inputClassName?: string,
     /** Checkbox checked state */
     isChecked?: boolean, // @TODO: eventually call this `checked`
     /** Checkbox disabled state */
@@ -29,6 +30,8 @@ type Props = {
     onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => any,
     /** change callback function called with event as the argument */
     onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => any,
+    /** onFocus - focus callback function that takes the event as the argument  */
+    onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
     /** Subsection below the checkbox */
     subsection?: React.Node,
     /** Info tooltip text next to the checkbox label */
@@ -43,10 +46,12 @@ const Checkbox = ({
     fieldLabel,
     hideLabel,
     id,
+    inputClassName,
     isChecked,
     isDisabled,
     label,
     name,
+    onFocus,
     onChange,
     subsection,
     tooltip,
@@ -60,9 +65,11 @@ const Checkbox = ({
         <span className="checkbox-label">
             <input
                 checked={isChecked}
+                className={classNames(inputClassName)}
                 disabled={isDisabled}
                 id={inputID}
                 name={name}
+                onFocus={onFocus}
                 onChange={onChange}
                 type="checkbox"
                 {...rest}

package/es/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":["React","uniqueId","classNames","CheckboxTooltip","Checkbox","className","description","fieldLabel","hideLabel","id","isChecked","isDisabled","label","name","onChange","subsection","tooltip","rest","generatedID","useRef","current","inputID","checkboxAndLabel"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,OAAO,iBAAP;;AAqCA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAcI;AAAA,4BAbjBC,SAaiB;AAAA,MAbjBA,SAaiB,+BAbL,EAaK;AAAA,MAZjBC,WAYiB,QAZjBA,WAYiB;AAAA,MAXjBC,UAWiB,QAXjBA,UAWiB;AAAA,MAVjBC,SAUiB,QAVjBA,SAUiB;AAAA,MATjBC,EASiB,QATjBA,EASiB;AAAA,MARjBC,SAQiB,QARjBA,SAQiB;AAAA,MAPjBC,UAOiB,QAPjBA,UAOiB;AAAA,MANjBC,KAMiB,QANjBA,KAMiB;AAAA,MALjBC,IAKiB,QALjBA,IAKiB;AAAA,MAJjBC,QAIiB,QAJjBA,QAIiB;AAAA,MAHjBC,UAGiB,QAHjBA,UAGiB;AAAA,MAFjBC,OAEiB,QAFjBA,OAEiB;AAAA,MADdC,IACc;;AACjB,MAAMC,WAAW,GAAGlB,KAAK,CAACmB,MAAN,CAAalB,QAAQ,CAAC,UAAD,CAArB,EAAmCmB,OAAvD,CADiB,CAEjB;;AACA,MAAMC,OAAO,GAAGZ,EAAE,IAAIS,WAAtB;AAEA,MAAMI,gBAAgB,GAClB;AAAM,IAAA,SAAS,EAAC;AAAhB,KACI;AACI,wBAAkBhB,WAAW,yBAAkBe,OAAlB,IAA8B,EAD/D;AAEI,IAAA,OAAO,EAAEX,SAFb;AAGI,IAAA,QAAQ,EAAEC,UAHd;AAII,IAAA,EAAE,EAAEU,OAJR;AAKI,IAAA,IAAI,EAAER,IALV;AAMI,IAAA,QAAQ,EAAEC,QANd;AAOI,IAAA,IAAI,EAAC;AAPT,KAQQG,IARR,EADJ,EAaI;AAAM,IAAA,SAAS,EAAC;AAAhB,IAbJ,EAcI;AAAM,IAAA,SAAS,EAAEf,UAAU,CAAC,kCAAD,EAAqC;AAAE,8BAAwBM;AAA1B,KAArC;AAA3B,KACKI,KAAK,IAAI;AAAO,IAAA,OAAO,EAAES;AAAhB,KAA0BT,KAA1B,CADd,EAEKI,OAAO,IAAI,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAEA;AAA1B,IAFhB,CAdJ,CADJ;AAsBA,SACI;AAAK,IAAA,SAAS,EAAEd,UAAU,CAAC,oBAAD,EAAuBG,SAAvB,EAAkC;AAAE,qCAA+BM;AAAjC,KAAlC;AAA1B,KACKJ,UAAU,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwBA,UAAxB,CADnB,EAEKe,gBAFL,EAGKhB,WAAW,GACR;AAAK,IAAA,EAAE,wBAAiBe,OAAjB,CAAP;AAAmC,IAAA,SAAS,EAAC;AAA7C,KACKf,WADL,CADQ,GAIR,IAPR,EAQKS,UAAU,GAAG;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,UAAtC,CAAH,GAA6D,IAR5E,CADJ;AAYH,CArDD;;AAuDA,eAAeX,QAAf","sourcesContent":["import * as React from 'react';\nimport uniqueId from 'lodash/uniqueId';\nimport classNames from 'classnames';\n\nimport CheckboxTooltip from './CheckboxTooltip';\n\nimport './Checkbox.scss';\n\nexport interface CheckboxProps {\n    /** Class name for the checkbox */\n    className?: string;\n    /** Description for the checkbox */\n    description?: React.ReactNode;\n    /** fieldLabel - label for the field shown on top of the checkbox */\n    fieldLabel?: React.ReactNode;\n    /** hideLabel - whether the checkbox label is hidden or not */\n    hideLabel?: boolean;\n    /** id - Unique `id` for the input */\n    id?: string;\n    /** isChecked - whether the checkbox is checked or not */\n    isChecked?: boolean; // @TODO: eventually call this `checked`\n    /** isDisabled - whether the checkbox is disabled or not */\n    isDisabled?: boolean; // @TODO: eventually call this `disabled`\n    /** Label displayed for the input */\n    label: React.ReactNode;\n    /** Name of the input */\n    name: string;\n    /** onBlur - blur callback function that takes the event as the argument */\n    onBlur?:\n        | ((e: React.SyntheticEvent<HTMLInputElement, Event>) => React.ReactText)\n        | {\n              (e: React.FocusEvent<HTMLInputElement>): void;\n          };\n    /** onChange - change callback function that takes the event as the argument */\n    onChange?: (e: React.SyntheticEvent<HTMLInputElement, Event>) => string | number | boolean | void;\n    /** Subsection below the checkbox */\n    subsection?: React.ReactNode;\n    /** Tooltip text next to the checkbox label */\n    tooltip?: string;\n    /** Value for the checkbox */\n    value?: string | number | string[];\n}\n\nconst Checkbox = ({\n    className = '',\n    description,\n    fieldLabel,\n    hideLabel,\n    id,\n    isChecked,\n    isDisabled,\n    label,\n    name,\n    onChange,\n    subsection,\n    tooltip,\n    ...rest // @TODO: eventually remove `rest` in favor of explicit props\n}: CheckboxProps) => {\n    const generatedID = React.useRef(uniqueId('checkbox')).current;\n    // use passed-in ID from props; otherwise generate one\n    const inputID = id || generatedID;\n\n    const checkboxAndLabel = (\n        <span className=\"checkbox-label\">\n            <input\n                aria-describedby={description ? `description_${inputID}` : ''}\n                checked={isChecked}\n                disabled={isDisabled}\n                id={inputID}\n                name={name}\n                onChange={onChange}\n                type=\"checkbox\"\n                {...rest}\n            />\n            {/* This span is used for the before/after custom checkbox styles, but mouse clicks will pass through this element\n                    to the underlying <input> */}\n            <span className=\"checkbox-pointer-target\" />\n            <span className={classNames('bdl-Checkbox-labelTooltipWrapper', { 'accessibility-hidden': hideLabel })}>\n                {label && <label htmlFor={inputID}>{label}</label>}\n                {tooltip && <CheckboxTooltip tooltip={tooltip} />}\n            </span>\n        </span>\n    );\n\n    return (\n        <div className={classNames('checkbox-container', className, { 'is-disabled bdl-is-disabled': isDisabled })}>\n            {fieldLabel && <div className=\"label\">{fieldLabel}</div>}\n            {checkboxAndLabel}\n            {description ? (\n                <div id={`description_${inputID}`} className=\"checkbox-description\">\n                    {description}\n                </div>\n            ) : null}\n            {subsection ? <div className=\"checkbox-subsection\">{subsection}</div> : null}\n        </div>\n    );\n};\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":["React","uniqueId","classNames","CheckboxTooltip","Checkbox","className","description","fieldLabel","hideLabel","id","inputClassName","isChecked","isDisabled","label","name","onFocus","onChange","subsection","tooltip","rest","generatedID","useRef","current","inputID","checkboxAndLabel"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,OAAO,iBAAP;;AAwCA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAgBI;AAAA,4BAfjBC,SAeiB;AAAA,MAfjBA,SAeiB,+BAfL,EAeK;AAAA,MAdjBC,WAciB,QAdjBA,WAciB;AAAA,MAbjBC,UAaiB,QAbjBA,UAaiB;AAAA,MAZjBC,SAYiB,QAZjBA,SAYiB;AAAA,MAXjBC,EAWiB,QAXjBA,EAWiB;AAAA,MAVjBC,cAUiB,QAVjBA,cAUiB;AAAA,MATjBC,SASiB,QATjBA,SASiB;AAAA,MARjBC,UAQiB,QARjBA,UAQiB;AAAA,MAPjBC,KAOiB,QAPjBA,KAOiB;AAAA,MANjBC,IAMiB,QANjBA,IAMiB;AAAA,MALjBC,OAKiB,QALjBA,OAKiB;AAAA,MAJjBC,QAIiB,QAJjBA,QAIiB;AAAA,MAHjBC,UAGiB,QAHjBA,UAGiB;AAAA,MAFjBC,OAEiB,QAFjBA,OAEiB;AAAA,MADdC,IACc;;AACjB,MAAMC,WAAW,GAAGpB,KAAK,CAACqB,MAAN,CAAapB,QAAQ,CAAC,UAAD,CAArB,EAAmCqB,OAAvD,CADiB,CAEjB;;AACA,MAAMC,OAAO,GAAGd,EAAE,IAAIW,WAAtB;AAEA,MAAMI,gBAAgB,GAClB;AAAM,IAAA,SAAS,EAAC;AAAhB,KACI;AACI,wBAAkBlB,WAAW,yBAAkBiB,OAAlB,IAA8B,EAD/D;AAEI,IAAA,OAAO,EAAEZ,SAFb;AAGI,IAAA,SAAS,EAAED,cAHf;AAII,IAAA,QAAQ,EAAEE,UAJd;AAKI,IAAA,EAAE,EAAEW,OALR;AAMI,IAAA,IAAI,EAAET,IANV;AAOI,IAAA,OAAO,EAAEC,OAPb;AAQI,IAAA,QAAQ,EAAEC,QARd;AASI,IAAA,IAAI,EAAC;AATT,KAUQG,IAVR,EADJ,EAeI;AAAM,IAAA,SAAS,EAAC;AAAhB,IAfJ,EAgBI;AAAM,IAAA,SAAS,EAAEjB,UAAU,CAAC,kCAAD,EAAqC;AAAE,8BAAwBM;AAA1B,KAArC;AAA3B,KACKK,KAAK,IAAI;AAAO,IAAA,OAAO,EAAEU;AAAhB,KAA0BV,KAA1B,CADd,EAEKK,OAAO,IAAI,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAEA;AAA1B,IAFhB,CAhBJ,CADJ;AAwBA,SACI;AAAK,IAAA,SAAS,EAAEhB,UAAU,CAAC,oBAAD,EAAuBG,SAAvB,EAAkC;AAAE,qCAA+BO;AAAjC,KAAlC;AAA1B,KACKL,UAAU,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwBA,UAAxB,CADnB,EAEKiB,gBAFL,EAGKlB,WAAW,GACR;AAAK,IAAA,EAAE,wBAAiBiB,OAAjB,CAAP;AAAmC,IAAA,SAAS,EAAC;AAA7C,KACKjB,WADL,CADQ,GAIR,IAPR,EAQKW,UAAU,GAAG;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,UAAtC,CAAH,GAA6D,IAR5E,CADJ;AAYH,CAzDD;;AA2DA,eAAeb,QAAf","sourcesContent":["import * as React from 'react';\nimport uniqueId from 'lodash/uniqueId';\nimport classNames from 'classnames';\n\nimport CheckboxTooltip from './CheckboxTooltip';\n\nimport './Checkbox.scss';\n\nexport interface CheckboxProps {\n    /** Class name for the checkbox */\n    className?: string;\n    /** Description for the checkbox */\n    description?: React.ReactNode;\n    /** fieldLabel - label for the field shown on top of the checkbox */\n    fieldLabel?: React.ReactNode;\n    /** hideLabel - whether the checkbox label is hidden or not */\n    hideLabel?: boolean;\n    /** id - Unique `id` for the input */\n    id?: string;\n    inputClassName?: string;\n    /** isChecked - whether the checkbox is checked or not */\n    isChecked?: boolean; // @TODO: eventually call this `checked`\n    /** isDisabled - whether the checkbox is disabled or not */\n    isDisabled?: boolean; // @TODO: eventually call this `disabled`\n    /** Label displayed for the input */\n    label: React.ReactNode;\n    /** Name of the input */\n    name: string;\n    /** onBlur - blur callback function that takes the event as the argument */\n    onBlur?:\n        | ((e: React.SyntheticEvent<HTMLInputElement, Event>) => React.ReactText)\n        | {\n              (e: React.FocusEvent<HTMLInputElement>): void;\n          };\n    /** onFocus - focus callback function that takes the event as the argument  */\n    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n    /** onChange - change callback function that takes the event as the argument */\n    onChange?: (e: React.SyntheticEvent<HTMLInputElement, Event>) => string | number | boolean | void;\n    /** Subsection below the checkbox */\n    subsection?: React.ReactNode;\n    /** Tooltip text next to the checkbox label */\n    tooltip?: string;\n    /** Value for the checkbox */\n    value?: string | number | string[];\n}\n\nconst Checkbox = ({\n    className = '',\n    description,\n    fieldLabel,\n    hideLabel,\n    id,\n    inputClassName,\n    isChecked,\n    isDisabled,\n    label,\n    name,\n    onFocus,\n    onChange,\n    subsection,\n    tooltip,\n    ...rest // @TODO: eventually remove `rest` in favor of explicit props\n}: CheckboxProps) => {\n    const generatedID = React.useRef(uniqueId('checkbox')).current;\n    // use passed-in ID from props; otherwise generate one\n    const inputID = id || generatedID;\n\n    const checkboxAndLabel = (\n        <span className=\"checkbox-label\">\n            <input\n                aria-describedby={description ? `description_${inputID}` : ''}\n                checked={isChecked}\n                className={inputClassName}\n                disabled={isDisabled}\n                id={inputID}\n                name={name}\n                onFocus={onFocus}\n                onChange={onChange}\n                type=\"checkbox\"\n                {...rest}\n            />\n            {/* This span is used for the before/after custom checkbox styles, but mouse clicks will pass through this element\n                    to the underlying <input> */}\n            <span className=\"checkbox-pointer-target\" />\n            <span className={classNames('bdl-Checkbox-labelTooltipWrapper', { 'accessibility-hidden': hideLabel })}>\n                {label && <label htmlFor={inputID}>{label}</label>}\n                {tooltip && <CheckboxTooltip tooltip={tooltip} />}\n            </span>\n        </span>\n    );\n\n    return (\n        <div className={classNames('checkbox-container', className, { 'is-disabled bdl-is-disabled': isDisabled })}>\n            {fieldLabel && <div className=\"label\">{fieldLabel}</div>}\n            {checkboxAndLabel}\n            {description ? (\n                <div id={`description_${inputID}`} className=\"checkbox-description\">\n                    {description}\n                </div>\n            ) : null}\n            {subsection ? <div className=\"checkbox-subsection\">{subsection}</div> : null}\n        </div>\n    );\n};\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/es/components/checkbox/Checkbox.scss

@@ -95,7 +95,7 @@
 
     &.bdl-is-disabled .checkbox-label,
     &.is-disabled .checkbox-label {
-        color: $bdl-gray-62;
+        color: $bdl-gray-65;
     }
 
     > .bdl-Label,
@@ -111,5 +111,5 @@
 }
 
 .checkbox-description {
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
 }

package/es/components/close-button/CloseButton.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import Button, { ButtonType } from '../button';
 import IconClose from '../../icons/general/IconClose';
-import { bdlGray62 } from '../../styles/variables';
+import { bdlGray65 } from '../../styles/variables';
 import './CloseButton.scss';
 
 var CloseButton = function CloseButton(_ref) {
@@ -14,7 +14,7 @@ var CloseButton = function CloseButton(_ref) {
     onClick: onClick,
     type: ButtonType.BUTTON
   }, React.createElement(IconClose, {
-    color: bdlGray62,
+    color: bdlGray65,
     height: 18,
     width: 18
   }));

package/es/components/close-button/CloseButton.js.flow

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import Button from '../button';
 import IconClose from '../../icons/general/IconClose';
-import { bdlGray62 } from '../../styles/variables';
+import { bdlGray65 } from '../../styles/variables';
 
 import './CloseButton.scss';
 
@@ -18,7 +18,7 @@ type Props = {
 const CloseButton = ({ className, onClick }: Props) => {
     return (
         <Button className={classNames('bdl-CloseButton', className)} onClick={onClick} type="button">
-            <IconClose color={bdlGray62} height={18} width={18} />
+            <IconClose color={bdlGray65} height={18} width={18} />
         </Button>
     );
 };

package/es/components/close-button/CloseButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/close-button/CloseButton.tsx"],"names":["React","classNames","Button","ButtonType","IconClose","bdlGray62","CloseButton","className","onClick","BUTTON"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,MAAP,IAAiBC,UAAjB,QAAmC,WAAnC;AACA,OAAOC,SAAP,MAAsB,+BAAtB;AACA,SAASC,SAAT,QAA0B,wBAA1B;AAEA,OAAO,oBAAP;;AASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAA8C;AAAA,MAA3CC,SAA2C,QAA3CA,SAA2C;AAAA,MAAhCC,OAAgC,QAAhCA,OAAgC;AAC9D,SACI,oBAAC,MAAD;AACI,IAAA,SAAS,EAAEP,UAAU,CAAC,iBAAD,EAAoBM,SAApB,CADzB;AAEI,mBAAY,iBAFhB;AAGI,IAAA,OAAO,EAAEC,OAHb;AAII,IAAA,IAAI,EAAEL,UAAU,CAACM;AAJrB,KAMI,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAEJ,SAAlB;AAA6B,IAAA,MAAM,EAAE,EAArC;AAAyC,IAAA,KAAK,EAAE;AAAhD,IANJ,CADJ;AAUH,CAXD;;AAaA,eAAeC,WAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport Button, { ButtonType } from '../button';\nimport IconClose from '../../icons/general/IconClose';\nimport { bdlGray62 } from '../../styles/variables';\n\nimport './CloseButton.scss';\n\nexport interface CloseButtonProps {\n    /** Custom class for the close button */\n    className?: string;\n    /** onClick handler for the close button */\n    onClick?: Function;\n}\n\nconst CloseButton = ({ className, onClick }: CloseButtonProps) => {\n    return (\n        <Button\n            className={classNames('bdl-CloseButton', className)}\n            data-testid=\"bdl-CloseButton\"\n            onClick={onClick}\n            type={ButtonType.BUTTON}\n        >\n            <IconClose color={bdlGray62} height={18} width={18} />\n        </Button>\n    );\n};\n\nexport default CloseButton;\n"],"file":"CloseButton.js"}
+{"version":3,"sources":["../../../src/components/close-button/CloseButton.tsx"],"names":["React","classNames","Button","ButtonType","IconClose","bdlGray65","CloseButton","className","onClick","BUTTON"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,MAAP,IAAiBC,UAAjB,QAAmC,WAAnC;AACA,OAAOC,SAAP,MAAsB,+BAAtB;AACA,SAASC,SAAT,QAA0B,wBAA1B;AAEA,OAAO,oBAAP;;AASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAA8C;AAAA,MAA3CC,SAA2C,QAA3CA,SAA2C;AAAA,MAAhCC,OAAgC,QAAhCA,OAAgC;AAC9D,SACI,oBAAC,MAAD;AACI,IAAA,SAAS,EAAEP,UAAU,CAAC,iBAAD,EAAoBM,SAApB,CADzB;AAEI,mBAAY,iBAFhB;AAGI,IAAA,OAAO,EAAEC,OAHb;AAII,IAAA,IAAI,EAAEL,UAAU,CAACM;AAJrB,KAMI,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAEJ,SAAlB;AAA6B,IAAA,MAAM,EAAE,EAArC;AAAyC,IAAA,KAAK,EAAE;AAAhD,IANJ,CADJ;AAUH,CAXD;;AAaA,eAAeC,WAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport Button, { ButtonType } from '../button';\nimport IconClose from '../../icons/general/IconClose';\nimport { bdlGray65 } from '../../styles/variables';\n\nimport './CloseButton.scss';\n\nexport interface CloseButtonProps {\n    /** Custom class for the close button */\n    className?: string;\n    /** onClick handler for the close button */\n    onClick?: Function;\n}\n\nconst CloseButton = ({ className, onClick }: CloseButtonProps) => {\n    return (\n        <Button\n            className={classNames('bdl-CloseButton', className)}\n            data-testid=\"bdl-CloseButton\"\n            onClick={onClick}\n            type={ButtonType.BUTTON}\n        >\n            <IconClose color={bdlGray65} height={18} width={18} />\n        </Button>\n    );\n};\n\nexport default CloseButton;\n"],"file":"CloseButton.js"}

package/es/components/contact-datalist-item/ContactDatalistItem.scss

@@ -24,7 +24,7 @@
 }
 
 .contact-sub-name {
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
     font-size: 13px;
 }