box-ui-elements 15.0.0-beta.49 → 15.0.0-beta.51

package/es/components/media-query/constants.js

@@ -1,7 +1,7 @@
-export var SIZE_SMALL = '(max-width: 374px)';
-export var SIZE_MEDIUM = '(min-width: 375px) and (max-width: 767px)';
-export var SIZE_LARGE = '(min-width: 768px) and (max-width: 1023px)';
-export var SIZE_XLARGE = '(min-width: 1024px)';
+import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';
+export var SIZE_SMALL = smallScreen;
+export var SIZE_MEDIUM = mediumScreen;
+export var SIZE_LARGE = largeScreen;
 export var HOVER = '(hover: hover)';
 export var ANY_HOVER = '(any-hover: hover)';
 export var POINTER_FINE = '(pointer: fine)';

package/es/components/media-query/constants.js.flow

@@ -1,7 +1,8 @@
-export const SIZE_SMALL = '(max-width: 374px)';
-export const SIZE_MEDIUM = '(min-width: 375px) and (max-width: 767px)';
-export const SIZE_LARGE = '(min-width: 768px) and (max-width: 1023px)';
-export const SIZE_XLARGE = '(min-width: 1024px)';
+import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';
+
+export const SIZE_SMALL = smallScreen;
+export const SIZE_MEDIUM = mediumScreen;
+export const SIZE_LARGE = largeScreen;
 
 export const HOVER = '(hover: hover)';
 export const ANY_HOVER = '(any-hover: hover)';

package/es/components/media-query/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/media-query/constants.js"],"names":["SIZE_SMALL","SIZE_MEDIUM","SIZE_LARGE","SIZE_XLARGE","HOVER","ANY_HOVER","POINTER_FINE","POINTER_COARSE","ANY_POINTER_FINE","ANY_POINTER_COARSE","POINTER_TYPE","fine","coarse","none","HOVER_TYPE","hover","VIEW_SIZE_TYPE","small","medium","large","xlarge"],"mappings":"AAAA,OAAO,IAAMA,UAAU,GAAG,oBAAnB;AACP,OAAO,IAAMC,WAAW,GAAG,2CAApB;AACP,OAAO,IAAMC,UAAU,GAAG,4CAAnB;AACP,OAAO,IAAMC,WAAW,GAAG,qBAApB;AAEP,OAAO,IAAMC,KAAK,GAAG,gBAAd;AACP,OAAO,IAAMC,SAAS,GAAG,oBAAlB;AAEP,OAAO,IAAMC,YAAY,GAAG,iBAArB;AACP,OAAO,IAAMC,cAAc,GAAG,mBAAvB;AAEP,OAAO,IAAMC,gBAAgB,GAAG,qBAAzB;AACP,OAAO,IAAMC,kBAAkB,GAAG,uBAA3B;AAEP,OAAO,IAAMC,YAAY,GAAG;AACxBC,EAAAA,IAAI,EAAE,MADkB;AAExBC,EAAAA,MAAM,EAAE,QAFgB;AAGxBC,EAAAA,IAAI,EAAE;AAHkB,CAArB;AAMP,OAAO,IAAMC,UAAU,GAAG;AACtBC,EAAAA,KAAK,EAAE,OADe;AAEtBF,EAAAA,IAAI,EAAE;AAFgB,CAAnB;AAKP,OAAO,IAAMG,cAAc,GAAG;AAC1BC,EAAAA,KAAK,EAAE,OADmB;AAE1BC,EAAAA,MAAM,EAAE,QAFkB;AAG1BC,EAAAA,KAAK,EAAE,OAHmB;AAI1BC,EAAAA,MAAM,EAAE;AAJkB,CAAvB","sourcesContent":["export const SIZE_SMALL = '(max-width: 374px)';\nexport const SIZE_MEDIUM = '(min-width: 375px) and (max-width: 767px)';\nexport const SIZE_LARGE = '(min-width: 768px) and (max-width: 1023px)';\nexport const SIZE_XLARGE = '(min-width: 1024px)';\n\nexport const HOVER = '(hover: hover)';\nexport const ANY_HOVER = '(any-hover: hover)';\n\nexport const POINTER_FINE = '(pointer: fine)';\nexport const POINTER_COARSE = '(pointer: coarse)';\n\nexport const ANY_POINTER_FINE = '(any-pointer: fine)';\nexport const ANY_POINTER_COARSE = '(any-pointer: coarse)';\n\nexport const POINTER_TYPE = {\n    fine: 'fine',\n    coarse: 'coarse',\n    none: 'none',\n};\n\nexport const HOVER_TYPE = {\n    hover: 'hover',\n    none: 'none',\n};\n\nexport const VIEW_SIZE_TYPE = {\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n    xlarge: 'x-large',\n};\n"],"file":"constants.js"}
+{"version":3,"sources":["../../../src/components/media-query/constants.js"],"names":["smallScreen","mediumScreen","largeScreen","SIZE_SMALL","SIZE_MEDIUM","SIZE_LARGE","HOVER","ANY_HOVER","POINTER_FINE","POINTER_COARSE","ANY_POINTER_FINE","ANY_POINTER_COARSE","POINTER_TYPE","fine","coarse","none","HOVER_TYPE","hover","VIEW_SIZE_TYPE","small","medium","large","xlarge"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,wBAAvD;AAEA,OAAO,IAAMC,UAAU,GAAGH,WAAnB;AACP,OAAO,IAAMI,WAAW,GAAGH,YAApB;AACP,OAAO,IAAMI,UAAU,GAAGH,WAAnB;AAEP,OAAO,IAAMI,KAAK,GAAG,gBAAd;AACP,OAAO,IAAMC,SAAS,GAAG,oBAAlB;AAEP,OAAO,IAAMC,YAAY,GAAG,iBAArB;AACP,OAAO,IAAMC,cAAc,GAAG,mBAAvB;AAEP,OAAO,IAAMC,gBAAgB,GAAG,qBAAzB;AACP,OAAO,IAAMC,kBAAkB,GAAG,uBAA3B;AAEP,OAAO,IAAMC,YAAY,GAAG;AACxBC,EAAAA,IAAI,EAAE,MADkB;AAExBC,EAAAA,MAAM,EAAE,QAFgB;AAGxBC,EAAAA,IAAI,EAAE;AAHkB,CAArB;AAMP,OAAO,IAAMC,UAAU,GAAG;AACtBC,EAAAA,KAAK,EAAE,OADe;AAEtBF,EAAAA,IAAI,EAAE;AAFgB,CAAnB;AAKP,OAAO,IAAMG,cAAc,GAAG;AAC1BC,EAAAA,KAAK,EAAE,OADmB;AAE1BC,EAAAA,MAAM,EAAE,QAFkB;AAG1BC,EAAAA,KAAK,EAAE,OAHmB;AAI1BC,EAAAA,MAAM,EAAE;AAJkB,CAAvB","sourcesContent":["import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';\n\nexport const SIZE_SMALL = smallScreen;\nexport const SIZE_MEDIUM = mediumScreen;\nexport const SIZE_LARGE = largeScreen;\n\nexport const HOVER = '(hover: hover)';\nexport const ANY_HOVER = '(any-hover: hover)';\n\nexport const POINTER_FINE = '(pointer: fine)';\nexport const POINTER_COARSE = '(pointer: coarse)';\n\nexport const ANY_POINTER_FINE = '(any-pointer: fine)';\nexport const ANY_POINTER_COARSE = '(any-pointer: coarse)';\n\nexport const POINTER_TYPE = {\n    fine: 'fine',\n    coarse: 'coarse',\n    none: 'none',\n};\n\nexport const HOVER_TYPE = {\n    hover: 'hover',\n    none: 'none',\n};\n\nexport const VIEW_SIZE_TYPE = {\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n    xlarge: 'x-large',\n};\n"],"file":"constants.js"}

package/es/icons/general/IconSearch.js

@@ -4,7 +4,7 @@ import { bdlGray40 } from '../../styles/variables';
 
 var IconSearch = function IconSearch(_ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? 'icon-search' : _ref$className,
+      className = _ref$className === void 0 ? '' : _ref$className,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? bdlGray40 : _ref$color,
       _ref$height = _ref.height,

package/es/icons/general/IconSearch.js.flow

@@ -6,7 +6,7 @@ import { bdlGray40 } from '../../styles/variables';
 
 import type { Icon } from '../flowTypes';
 
-const IconSearch = ({ className = 'icon-search', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+const IconSearch = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
     <AccessibleSVG
         className={`icon-search ${className}`}
         height={height}

package/es/icons/general/IconSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/general/IconSearch.tsx"],"names":["React","AccessibleSVG","bdlGray40","IconSearch","className","color","height","title","width"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,SAASC,SAAT,QAA0B,wBAA1B;;AAIA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,aAAf;AAAA,wBAA8BC,KAA9B;AAAA,MAA8BA,KAA9B,2BAAsCH,SAAtC;AAAA,yBAAiDI,MAAjD;AAAA,MAAiDA,MAAjD,4BAA0D,EAA1D;AAAA,MAA8DC,KAA9D,QAA8DA,KAA9D;AAAA,wBAAqEC,KAArE;AAAA,MAAqEA,KAArE,2BAA6E,EAA7E;AAAA,SACf,oBAAC,aAAD;AACI,IAAA,SAAS,wBAAiBJ,SAAjB,CADb;AAEI,IAAA,MAAM,EAAEE,MAFZ;AAGI,IAAA,KAAK,EAAEC,KAHX;AAII,IAAA,OAAO,EAAC,WAJZ;AAKI,IAAA,KAAK,EAAEC;AALX,KAOI;AACI,IAAA,SAAS,EAAC,YADd;AAEI,IAAA,CAAC,EAAC,kQAFN;AAGI,IAAA,IAAI,EAAEH,KAHV;AAII,IAAA,QAAQ,EAAC;AAJb,IAPJ,CADe;AAAA,CAAnB;;AAiBA,eAAeF,UAAf","sourcesContent":["import * as React from 'react';\n\nimport AccessibleSVG from '../accessible-svg';\nimport { bdlGray40 } from '../../styles/variables';\n\nimport { Icon } from '../iconTypes';\n\nconst IconSearch = ({ className = 'icon-search', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (\n    <AccessibleSVG\n        className={`icon-search ${className}`}\n        height={height}\n        title={title}\n        viewBox=\"0 0 14 14\"\n        width={width}\n    >\n        <path\n            className=\"fill-color\"\n            d=\"M13.7,12.1L11.6,10l-1.1-0.2c0.9-1,1.4-2.4,1.4-3.9c0-3.3-2.7-6-6-6C2.7,0,0,2.7,0,6s2.7,6,6,6 c1.5,0,2.9-0.6,4-1.5l0.2,1l2.1,2.1c0.4,0.4,1,0.4,1.4,0l0,0C14.1,13.1,14.1,12.5,13.7,12.1z M6,10.4c-2.5,0-4.5-2-4.5-4.5 s2-4.5,4.5-4.5s4.5,2,4.5,4.5S8.4,10.4,6,10.4z\"\n            fill={color}\n            fillRule=\"evenodd\"\n        />\n    </AccessibleSVG>\n);\n\nexport default IconSearch;\n"],"file":"IconSearch.js"}
+{"version":3,"sources":["../../../src/icons/general/IconSearch.tsx"],"names":["React","AccessibleSVG","bdlGray40","IconSearch","className","color","height","title","width"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,SAASC,SAAT,QAA0B,wBAA1B;;AAIA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,EAAf;AAAA,wBAAmBC,KAAnB;AAAA,MAAmBA,KAAnB,2BAA2BH,SAA3B;AAAA,yBAAsCI,MAAtC;AAAA,MAAsCA,MAAtC,4BAA+C,EAA/C;AAAA,MAAmDC,KAAnD,QAAmDA,KAAnD;AAAA,wBAA0DC,KAA1D;AAAA,MAA0DA,KAA1D,2BAAkE,EAAlE;AAAA,SACf,oBAAC,aAAD;AACI,IAAA,SAAS,wBAAiBJ,SAAjB,CADb;AAEI,IAAA,MAAM,EAAEE,MAFZ;AAGI,IAAA,KAAK,EAAEC,KAHX;AAII,IAAA,OAAO,EAAC,WAJZ;AAKI,IAAA,KAAK,EAAEC;AALX,KAOI;AACI,IAAA,SAAS,EAAC,YADd;AAEI,IAAA,CAAC,EAAC,kQAFN;AAGI,IAAA,IAAI,EAAEH,KAHV;AAII,IAAA,QAAQ,EAAC;AAJb,IAPJ,CADe;AAAA,CAAnB;;AAiBA,eAAeF,UAAf","sourcesContent":["import * as React from 'react';\n\nimport AccessibleSVG from '../accessible-svg';\nimport { bdlGray40 } from '../../styles/variables';\n\nimport { Icon } from '../iconTypes';\n\nconst IconSearch = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (\n    <AccessibleSVG\n        className={`icon-search ${className}`}\n        height={height}\n        title={title}\n        viewBox=\"0 0 14 14\"\n        width={width}\n    >\n        <path\n            className=\"fill-color\"\n            d=\"M13.7,12.1L11.6,10l-1.1-0.2c0.9-1,1.4-2.4,1.4-3.9c0-3.3-2.7-6-6-6C2.7,0,0,2.7,0,6s2.7,6,6,6 c1.5,0,2.9-0.6,4-1.5l0.2,1l2.1,2.1c0.4,0.4,1,0.4,1.4,0l0,0C14.1,13.1,14.1,12.5,13.7,12.1z M6,10.4c-2.5,0-4.5-2-4.5-4.5 s2-4.5,4.5-4.5s4.5,2,4.5,4.5S8.4,10.4,6,10.4z\"\n            fill={color}\n            fillRule=\"evenodd\"\n        />\n    </AccessibleSVG>\n);\n\nexport default IconSearch;\n"],"file":"IconSearch.js"}

package/es/icons/general/IconSearchJuicy.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray40 } from '../../styles/variables';
+
+var IconSearchJuicy = function IconSearchJuicy(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? bdlGray40 : _ref$color,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 14 : _ref$height,
+      title = _ref.title,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 14 : _ref$width;
+  return React.createElement(AccessibleSVG, {
+    className: "icon-search-juicy ".concat(className),
+    height: height,
+    title: title,
+    viewBox: "0 0 24 24",
+    width: width
+  }, React.createElement("path", {
+    className: "fill-color",
+    d: "M10.491 1.5a8.99 8.99 0 0 1 7.359 14.157l4.21 4.21a1.5 1.5 0 0 1 0 2.123l-.07.07a1.5 1.5 0 0 1-2.122 0l-4.211-4.21A8.99 8.99 0 1 1 10.491 1.5zm0 2.997a5.994 5.994 0 1 0 0 11.988 5.994 5.994 0 0 0 0-11.988z",
+    fill: color,
+    fillRule: "evenodd"
+  }));
+};
+
+export default IconSearchJuicy;
+//# sourceMappingURL=IconSearchJuicy.js.map

package/es/icons/general/IconSearchJuicy.js.flow

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray40 } from '../../styles/variables';
+
+import type { Icon } from '../flowTypes';
+
+const IconSearchJuicy = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+    <AccessibleSVG
+        className={`icon-search-juicy ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 24 24"
+        width={width}
+    >
+        <path
+            className="fill-color"
+            d="M10.491 1.5a8.99 8.99 0 0 1 7.359 14.157l4.21 4.21a1.5 1.5 0 0 1 0 2.123l-.07.07a1.5 1.5 0 0 1-2.122 0l-4.211-4.21A8.99 8.99 0 1 1 10.491 1.5zm0 2.997a5.994 5.994 0 1 0 0 11.988 5.994 5.994 0 0 0 0-11.988z"
+            fill={color}
+            fillRule="evenodd"
+        />
+    </AccessibleSVG>
+);
+
+export default IconSearchJuicy;

package/es/icons/general/IconSearchJuicy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/general/IconSearchJuicy.tsx"],"names":["React","AccessibleSVG","bdlGray40","IconSearchJuicy","className","color","height","title","width"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,SAASC,SAAT,QAA0B,wBAA1B;;AAIA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,EAAf;AAAA,wBAAmBC,KAAnB;AAAA,MAAmBA,KAAnB,2BAA2BH,SAA3B;AAAA,yBAAsCI,MAAtC;AAAA,MAAsCA,MAAtC,4BAA+C,EAA/C;AAAA,MAAmDC,KAAnD,QAAmDA,KAAnD;AAAA,wBAA0DC,KAA1D;AAAA,MAA0DA,KAA1D,2BAAkE,EAAlE;AAAA,SACpB,oBAAC,aAAD;AACI,IAAA,SAAS,8BAAuBJ,SAAvB,CADb;AAEI,IAAA,MAAM,EAAEE,MAFZ;AAGI,IAAA,KAAK,EAAEC,KAHX;AAII,IAAA,OAAO,EAAC,WAJZ;AAKI,IAAA,KAAK,EAAEC;AALX,KAOI;AACI,IAAA,SAAS,EAAC,YADd;AAEI,IAAA,CAAC,EAAC,+MAFN;AAGI,IAAA,IAAI,EAAEH,KAHV;AAII,IAAA,QAAQ,EAAC;AAJb,IAPJ,CADoB;AAAA,CAAxB;;AAiBA,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\n\nimport AccessibleSVG from '../accessible-svg';\nimport { bdlGray40 } from '../../styles/variables';\n\nimport { Icon } from '../iconTypes';\n\nconst IconSearchJuicy = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (\n    <AccessibleSVG\n        className={`icon-search-juicy ${className}`}\n        height={height}\n        title={title}\n        viewBox=\"0 0 24 24\"\n        width={width}\n    >\n        <path\n            className=\"fill-color\"\n            d=\"M10.491 1.5a8.99 8.99 0 0 1 7.359 14.157l4.21 4.21a1.5 1.5 0 0 1 0 2.123l-.07.07a1.5 1.5 0 0 1-2.122 0l-4.211-4.21A8.99 8.99 0 1 1 10.491 1.5zm0 2.997a5.994 5.994 0 1 0 0 11.988 5.994 5.994 0 0 0 0-11.988z\"\n            fill={color}\n            fillRule=\"evenodd\"\n        />\n    </AccessibleSVG>\n);\n\nexport default IconSearchJuicy;\n"],"file":"IconSearchJuicy.js"}

package/es/src/icons/general/IconSearchJuicy.d.ts

@@ -0,0 +1,3 @@
+import { Icon } from '../iconTypes';
+declare const IconSearchJuicy: ({ className, color, height, title, width }: Icon) => JSX.Element;
+export default IconSearchJuicy;

package/es/src/icons/general/__tests__/IconSearchJuicy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/src/styles/variables.d.ts

@@ -98,3 +98,9 @@ export declare const bdlBtnTextIconSize = "16px";
 export declare const bdlBtnPaddingHorizontal = "16px";
 export declare const bdlTransitionDurationBase = "0.15s";
 export declare const bdlTimingFunction: string[];
+export declare const sizeSmallMax = "374px";
+export declare const sizeMediumMax = "767px";
+export declare const sizeLargeMax = "1023px";
+export declare const smallScreen = "(max-width: 374px)";
+export declare const mediumScreen = "(max-width: 767px)";
+export declare const largeScreen = "(max-width: 1023px)";

package/es/styles/_variables.scss

@@ -5,6 +5,7 @@
 @import './constants/typography';
 @import './constants/themes';
 @import './constants/buttons';
+@import './constants/media-queries';
 @import './deprecated'; // <<< Deprecated
 
 // Mixins

package/es/styles/constants/_media-queries.scss

@@ -0,0 +1,13 @@
+$size-small-max: 374px;
+$size-medium-max: 767px;
+$size-large-max: 1023px;
+
+$small-screen: unquote('(max-width: #{$size-small-max})');
+$medium-screen: unquote('(max-width: #{$size-medium-max})');
+$large-screen: unquote('(max-width: #{$size-large-max})');
+
+@mixin breakpoint($media-query) {
+    @media #{$media-query} {
+        @content;
+    }
+}

package/es/styles/variables.js

@@ -198,4 +198,16 @@ export var bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal
 export var bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase
 
 export var bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction
+
+export var sizeSmallMax = '374px'; // size-small-max
+
+export var sizeMediumMax = '767px'; // size-medium-max
+
+export var sizeLargeMax = '1023px'; // size-large-max
+
+export var smallScreen = '(max-width: 374px)'; // small-screen
+
+export var mediumScreen = '(max-width: 767px)'; // medium-screen
+
+export var largeScreen = '(max-width: 1023px)'; // large-screen
 //# sourceMappingURL=variables.js.map

package/es/styles/variables.js.flow

@@ -101,4 +101,10 @@ export const bdlBtnIconSize = "20px"; // bdl-btn-icon-size
 export const bdlBtnTextIconSize = "16px"; // bdl-btn-text-icon-size
 export const bdlBtnPaddingHorizontal = "16px"; // bdl-btn-padding-horizontal
 export const bdlTransitionDurationBase = "0.15s"; // bdl-transitionDurationBase
-export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const sizeSmallMax = "374px"; // size-small-max
+export const sizeMediumMax = "767px"; // size-medium-max
+export const sizeLargeMax = "1023px"; // size-large-max
+export const smallScreen = "(max-width: 374px)"; // small-screen
+export const mediumScreen = "(max-width: 767px)"; // medium-screen
+export const largeScreen = "(max-width: 1023px)"; // large-screen

package/es/styles/variables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/variables.ts"],"names":["white","black","countBadgeBackground","bdlBoxBlue","bdlBoxBlue80","bdlBoxBlue50","bdlBoxBlue40","bdlBoxBlue30","bdlBoxBlue20","bdlBoxBlue10","bdlBoxBlue05","bdlBoxBlue02","bdlGray","bdlGray80","bdlGray62","bdlGray50","bdlGray40","bdlGray30","bdlGray20","bdlGray10","bdlGray05","bdlGray02","bdlDarkBlue","bdlDarkBlue50","bdlDarkBlue20","bdlDarkBlue10","bdlDarkBlue05","bdlDarkBlue02","bdlLightBlue","bdlLightBlue50","bdlLightBlue20","bdlLightBlue10","bdlLightBlue05","bdlLightBlue02","bdlYellorange","bdlYellorange50","bdlYellorange20","bdlYellorange10","bdlYellorange05","bdlYellorange02","bdlYellow","bdlYellow50","bdlYellow20","bdlYellow10","bdlYellow05","bdlYellow02","bdlGreenLight","bdlGreenLight50","bdlGreenLight20","bdlGreenLight10","bdlGreenLight05","bdlGreenLight02","bdlGrimace","bdlGrimace50","bdlGrimace20","bdlGrimace10","bdlGrimace05","bdlGrimace02","bdlOrange","bdlOrange50","bdlOrange20","bdlOrange10","bdlOrange05","bdlOrange02","bdlPurpleRain","bdlPurpleRain50","bdlPurpleRain20","bdlPurpleRain10","bdlPurpleRain05","bdlPurpleRain02","bdlWatermelonRed","bdlWatermelonRed50","bdlWatermelonRed20","bdlWatermelonRed10","bdlWatermelonRed05","bdlWatermelonRed02","bdlLineHeight","bdlFontSize","bdlFontSizeMinimum","bdlFontSizeDejaBlue","avatarColors","modalDialogZIndex","menuZIndex","notificationsWrapperZIndex","overlayZIndex","tooltipZIndex","bdlBorderRadiusSize","bdlBorderRadiusSizeMed","bdlBorderRadiusSizeLarge","bdlBorderRadiusSizeXlarge","bdlGridUnit","bdlGridUnitPx","bdlBtnBorderWidth","bdlBtnHeight","bdlBtnHeightLarge","bdlBtnIconSize","bdlBtnTextIconSize","bdlBtnPaddingHorizontal","bdlTransitionDurationBase","bdlTimingFunction"],"mappings":"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","sourcesContent":["/* File auto-generated */\nexport const white = '#fff'; // white\nexport const black = '#000'; // black\nexport const countBadgeBackground = '#e9163c'; // countBadgeBackground\nexport const bdlBoxBlue = '#0061d5'; // bdl-box-blue\nexport const bdlBoxBlue80 = '#3381dd'; // bdl-box-blue-80\nexport const bdlBoxBlue50 = '#7fb0ea'; // bdl-box-blue-50\nexport const bdlBoxBlue40 = '#99c0ee'; // bdl-box-blue-40\nexport const bdlBoxBlue30 = '#b2cff2'; // bdl-box-blue-30\nexport const bdlBoxBlue20 = '#ccdff7'; // bdl-box-blue-20\nexport const bdlBoxBlue10 = '#e5effa'; // bdl-box-blue-10\nexport const bdlBoxBlue05 = '#f2f7fd'; // bdl-box-blue-05\nexport const bdlBoxBlue02 = '#fafcfe'; // bdl-box-blue-02\nexport const bdlGray = '#222'; // bdl-gray\nexport const bdlGray80 = '#4e4e4e'; // bdl-gray-80\nexport const bdlGray62 = '#767676'; // bdl-gray-62\nexport const bdlGray50 = '#909090'; // bdl-gray-50\nexport const bdlGray40 = '#a7a7a7'; // bdl-gray-40\nexport const bdlGray30 = '#bcbcbc'; // bdl-gray-30\nexport const bdlGray20 = '#d3d3d3'; // bdl-gray-20\nexport const bdlGray10 = '#e8e8e8'; // bdl-gray-10\nexport const bdlGray05 = '#f4f4f4'; // bdl-gray-05\nexport const bdlGray02 = '#fbfbfb'; // bdl-gray-02\nexport const bdlDarkBlue = '#003c84'; // bdl-dark-blue\nexport const bdlDarkBlue50 = '#7f9dc1'; // bdl-dark-blue-50\nexport const bdlDarkBlue20 = '#ccd8e6'; // bdl-dark-blue-20\nexport const bdlDarkBlue10 = '#e5ebf2'; // bdl-dark-blue-10\nexport const bdlDarkBlue05 = '#f2f5f9'; // bdl-dark-blue-05\nexport const bdlDarkBlue02 = '#fafbfd'; // bdl-dark-blue-02\nexport const bdlLightBlue = '#2486fc'; // bdl-light-blue\nexport const bdlLightBlue50 = '#91c2fd'; // bdl-light-blue-50\nexport const bdlLightBlue20 = '#d3e7fe'; // bdl-light-blue-20\nexport const bdlLightBlue10 = '#e9f2fe'; // bdl-light-blue-10\nexport const bdlLightBlue05 = '#f4f9ff'; // bdl-light-blue-05\nexport const bdlLightBlue02 = '#fbfdff'; // bdl-light-blue-02\nexport const bdlYellorange = '#f5b31b'; // bdl-yellorange\nexport const bdlYellorange50 = '#fad98d'; // bdl-yellorange-50\nexport const bdlYellorange20 = '#fdf0d1'; // bdl-yellorange-20\nexport const bdlYellorange10 = '#fef7e8'; // bdl-yellorange-10\nexport const bdlYellorange05 = '#fefbf3'; // bdl-yellorange-05\nexport const bdlYellorange02 = '#fffefb'; // bdl-yellorange-02\nexport const bdlYellow = '#ffd700'; // bdl-yellow\nexport const bdlYellow50 = '#ffeb7f'; // bdl-yellow-50\nexport const bdlYellow20 = '#fff7cc'; // bdl-yellow-20\nexport const bdlYellow10 = '#fffbe5'; // bdl-yellow-10\nexport const bdlYellow05 = '#fffdf2'; // bdl-yellow-05\nexport const bdlYellow02 = '#fffefa'; // bdl-yellow-02\nexport const bdlGreenLight = '#26c281'; // bdl-green-light\nexport const bdlGreenLight50 = '#92e0c0'; // bdl-green-light-50\nexport const bdlGreenLight20 = '#d4f3e6'; // bdl-green-light-20\nexport const bdlGreenLight10 = '#e9f8f2'; // bdl-green-light-10\nexport const bdlGreenLight05 = '#f4fcf8'; // bdl-green-light-05\nexport const bdlGreenLight02 = '#fbfefd'; // bdl-green-light-02\nexport const bdlGrimace = '#4826c2'; // bdl-grimace\nexport const bdlGrimace50 = '#a392e0'; // bdl-grimace-50\nexport const bdlGrimace20 = '#dad4f3'; // bdl-grimace-20\nexport const bdlGrimace10 = '#ece9f8'; // bdl-grimace-10\nexport const bdlGrimace05 = '#f6f4fc'; // bdl-grimace-05\nexport const bdlGrimace02 = '#fbfbfe'; // bdl-grimace-02\nexport const bdlOrange = '#f1811a'; // bdl-orange\nexport const bdlOrange50 = '#f8c08c'; // bdl-orange-50\nexport const bdlOrange20 = '#fce6d1'; // bdl-orange-20\nexport const bdlOrange10 = '#fdf2e8'; // bdl-orange-10\nexport const bdlOrange05 = '#fef8f3'; // bdl-orange-05\nexport const bdlOrange02 = '#fffdfb'; // bdl-orange-02\nexport const bdlPurpleRain = '#9f3fed'; // bdl-purple-rain\nexport const bdlPurpleRain50 = '#cf9ff6'; // bdl-purple-rain-50\nexport const bdlPurpleRain20 = '#ecd9fb'; // bdl-purple-rain-20\nexport const bdlPurpleRain10 = '#f5ebfd'; // bdl-purple-rain-10\nexport const bdlPurpleRain05 = '#faf5fe'; // bdl-purple-rain-05\nexport const bdlPurpleRain02 = '#fdfbff'; // bdl-purple-rain-02\nexport const bdlWatermelonRed = '#ed3757'; // bdl-watermelon-red\nexport const bdlWatermelonRed50 = '#f69bab'; // bdl-watermelon-red-50\nexport const bdlWatermelonRed20 = '#fbd7dd'; // bdl-watermelon-red-20\nexport const bdlWatermelonRed10 = '#fdebee'; // bdl-watermelon-red-10\nexport const bdlWatermelonRed05 = '#fef5f6'; // bdl-watermelon-red-05\nexport const bdlWatermelonRed02 = '#fffbfc'; // bdl-watermelon-red-02\nexport const bdlLineHeight = '20px'; // bdl-line-height\nexport const bdlFontSize = '13px'; // bdl-fontSize\nexport const bdlFontSizeMinimum = '11px'; // bdl-fontSize-minimum\nexport const bdlFontSizeDejaBlue = '14px'; // bdl-fontSize--dejaBlue\nexport const avatarColors = ['#0061d5', '#003c84', '#767676', '#222', '#4826c2', '#9f3fed']; // avatar-colors\nexport const modalDialogZIndex = '160'; // modal-dialog-z-index\nexport const menuZIndex = '170'; // menu-z-index\nexport const notificationsWrapperZIndex = '180'; // notifications-wrapper-z-index\nexport const overlayZIndex = '190'; // overlay-z-index\nexport const tooltipZIndex = '190'; // tooltip-z-index\nexport const bdlBorderRadiusSize = '4px'; // bdl-border-radius-size\nexport const bdlBorderRadiusSizeMed = '6px'; // bdl-border-radius-size-med\nexport const bdlBorderRadiusSizeLarge = '8px'; // bdl-border-radius-size-large\nexport const bdlBorderRadiusSizeXlarge = '12px'; // bdl-border-radius-size-xlarge\nexport const bdlGridUnit = '4px'; // bdl-grid-unit\nexport const bdlGridUnitPx = '4'; // bdl-grid-unit-px\nexport const bdlBtnBorderWidth = '1px'; // bdl-btn-border-width\nexport const bdlBtnHeight = '32px'; // bdl-btn-height\nexport const bdlBtnHeightLarge = '40px'; // bdl-btn-height-large\nexport const bdlBtnIconSize = '20px'; // bdl-btn-icon-size\nexport const bdlBtnTextIconSize = '16px'; // bdl-btn-text-icon-size\nexport const bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal\nexport const bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase\nexport const bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction\n"],"file":"variables.js"}
+{"version":3,"sources":["../../src/styles/variables.ts"],"names":["white","black","countBadgeBackground","bdlBoxBlue","bdlBoxBlue80","bdlBoxBlue50","bdlBoxBlue40","bdlBoxBlue30","bdlBoxBlue20","bdlBoxBlue10","bdlBoxBlue05","bdlBoxBlue02","bdlGray","bdlGray80","bdlGray62","bdlGray50","bdlGray40","bdlGray30","bdlGray20","bdlGray10","bdlGray05","bdlGray02","bdlDarkBlue","bdlDarkBlue50","bdlDarkBlue20","bdlDarkBlue10","bdlDarkBlue05","bdlDarkBlue02","bdlLightBlue","bdlLightBlue50","bdlLightBlue20","bdlLightBlue10","bdlLightBlue05","bdlLightBlue02","bdlYellorange","bdlYellorange50","bdlYellorange20","bdlYellorange10","bdlYellorange05","bdlYellorange02","bdlYellow","bdlYellow50","bdlYellow20","bdlYellow10","bdlYellow05","bdlYellow02","bdlGreenLight","bdlGreenLight50","bdlGreenLight20","bdlGreenLight10","bdlGreenLight05","bdlGreenLight02","bdlGrimace","bdlGrimace50","bdlGrimace20","bdlGrimace10","bdlGrimace05","bdlGrimace02","bdlOrange","bdlOrange50","bdlOrange20","bdlOrange10","bdlOrange05","bdlOrange02","bdlPurpleRain","bdlPurpleRain50","bdlPurpleRain20","bdlPurpleRain10","bdlPurpleRain05","bdlPurpleRain02","bdlWatermelonRed","bdlWatermelonRed50","bdlWatermelonRed20","bdlWatermelonRed10","bdlWatermelonRed05","bdlWatermelonRed02","bdlLineHeight","bdlFontSize","bdlFontSizeMinimum","bdlFontSizeDejaBlue","avatarColors","modalDialogZIndex","menuZIndex","notificationsWrapperZIndex","overlayZIndex","tooltipZIndex","bdlBorderRadiusSize","bdlBorderRadiusSizeMed","bdlBorderRadiusSizeLarge","bdlBorderRadiusSizeXlarge","bdlGridUnit","bdlGridUnitPx","bdlBtnBorderWidth","bdlBtnHeight","bdlBtnHeightLarge","bdlBtnIconSize","bdlBtnTextIconSize","bdlBtnPaddingHorizontal","bdlTransitionDurationBase","bdlTimingFunction","sizeSmallMax","sizeMediumMax","sizeLargeMax","smallScreen","mediumScreen","largeScreen"],"mappings":"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","sourcesContent":["/* File auto-generated */\nexport const white = '#fff'; // white\nexport const black = '#000'; // black\nexport const countBadgeBackground = '#e9163c'; // countBadgeBackground\nexport const bdlBoxBlue = '#0061d5'; // bdl-box-blue\nexport const bdlBoxBlue80 = '#3381dd'; // bdl-box-blue-80\nexport const bdlBoxBlue50 = '#7fb0ea'; // bdl-box-blue-50\nexport const bdlBoxBlue40 = '#99c0ee'; // bdl-box-blue-40\nexport const bdlBoxBlue30 = '#b2cff2'; // bdl-box-blue-30\nexport const bdlBoxBlue20 = '#ccdff7'; // bdl-box-blue-20\nexport const bdlBoxBlue10 = '#e5effa'; // bdl-box-blue-10\nexport const bdlBoxBlue05 = '#f2f7fd'; // bdl-box-blue-05\nexport const bdlBoxBlue02 = '#fafcfe'; // bdl-box-blue-02\nexport const bdlGray = '#222'; // bdl-gray\nexport const bdlGray80 = '#4e4e4e'; // bdl-gray-80\nexport const bdlGray62 = '#767676'; // bdl-gray-62\nexport const bdlGray50 = '#909090'; // bdl-gray-50\nexport const bdlGray40 = '#a7a7a7'; // bdl-gray-40\nexport const bdlGray30 = '#bcbcbc'; // bdl-gray-30\nexport const bdlGray20 = '#d3d3d3'; // bdl-gray-20\nexport const bdlGray10 = '#e8e8e8'; // bdl-gray-10\nexport const bdlGray05 = '#f4f4f4'; // bdl-gray-05\nexport const bdlGray02 = '#fbfbfb'; // bdl-gray-02\nexport const bdlDarkBlue = '#003c84'; // bdl-dark-blue\nexport const bdlDarkBlue50 = '#7f9dc1'; // bdl-dark-blue-50\nexport const bdlDarkBlue20 = '#ccd8e6'; // bdl-dark-blue-20\nexport const bdlDarkBlue10 = '#e5ebf2'; // bdl-dark-blue-10\nexport const bdlDarkBlue05 = '#f2f5f9'; // bdl-dark-blue-05\nexport const bdlDarkBlue02 = '#fafbfd'; // bdl-dark-blue-02\nexport const bdlLightBlue = '#2486fc'; // bdl-light-blue\nexport const bdlLightBlue50 = '#91c2fd'; // bdl-light-blue-50\nexport const bdlLightBlue20 = '#d3e7fe'; // bdl-light-blue-20\nexport const bdlLightBlue10 = '#e9f2fe'; // bdl-light-blue-10\nexport const bdlLightBlue05 = '#f4f9ff'; // bdl-light-blue-05\nexport const bdlLightBlue02 = '#fbfdff'; // bdl-light-blue-02\nexport const bdlYellorange = '#f5b31b'; // bdl-yellorange\nexport const bdlYellorange50 = '#fad98d'; // bdl-yellorange-50\nexport const bdlYellorange20 = '#fdf0d1'; // bdl-yellorange-20\nexport const bdlYellorange10 = '#fef7e8'; // bdl-yellorange-10\nexport const bdlYellorange05 = '#fefbf3'; // bdl-yellorange-05\nexport const bdlYellorange02 = '#fffefb'; // bdl-yellorange-02\nexport const bdlYellow = '#ffd700'; // bdl-yellow\nexport const bdlYellow50 = '#ffeb7f'; // bdl-yellow-50\nexport const bdlYellow20 = '#fff7cc'; // bdl-yellow-20\nexport const bdlYellow10 = '#fffbe5'; // bdl-yellow-10\nexport const bdlYellow05 = '#fffdf2'; // bdl-yellow-05\nexport const bdlYellow02 = '#fffefa'; // bdl-yellow-02\nexport const bdlGreenLight = '#26c281'; // bdl-green-light\nexport const bdlGreenLight50 = '#92e0c0'; // bdl-green-light-50\nexport const bdlGreenLight20 = '#d4f3e6'; // bdl-green-light-20\nexport const bdlGreenLight10 = '#e9f8f2'; // bdl-green-light-10\nexport const bdlGreenLight05 = '#f4fcf8'; // bdl-green-light-05\nexport const bdlGreenLight02 = '#fbfefd'; // bdl-green-light-02\nexport const bdlGrimace = '#4826c2'; // bdl-grimace\nexport const bdlGrimace50 = '#a392e0'; // bdl-grimace-50\nexport const bdlGrimace20 = '#dad4f3'; // bdl-grimace-20\nexport const bdlGrimace10 = '#ece9f8'; // bdl-grimace-10\nexport const bdlGrimace05 = '#f6f4fc'; // bdl-grimace-05\nexport const bdlGrimace02 = '#fbfbfe'; // bdl-grimace-02\nexport const bdlOrange = '#f1811a'; // bdl-orange\nexport const bdlOrange50 = '#f8c08c'; // bdl-orange-50\nexport const bdlOrange20 = '#fce6d1'; // bdl-orange-20\nexport const bdlOrange10 = '#fdf2e8'; // bdl-orange-10\nexport const bdlOrange05 = '#fef8f3'; // bdl-orange-05\nexport const bdlOrange02 = '#fffdfb'; // bdl-orange-02\nexport const bdlPurpleRain = '#9f3fed'; // bdl-purple-rain\nexport const bdlPurpleRain50 = '#cf9ff6'; // bdl-purple-rain-50\nexport const bdlPurpleRain20 = '#ecd9fb'; // bdl-purple-rain-20\nexport const bdlPurpleRain10 = '#f5ebfd'; // bdl-purple-rain-10\nexport const bdlPurpleRain05 = '#faf5fe'; // bdl-purple-rain-05\nexport const bdlPurpleRain02 = '#fdfbff'; // bdl-purple-rain-02\nexport const bdlWatermelonRed = '#ed3757'; // bdl-watermelon-red\nexport const bdlWatermelonRed50 = '#f69bab'; // bdl-watermelon-red-50\nexport const bdlWatermelonRed20 = '#fbd7dd'; // bdl-watermelon-red-20\nexport const bdlWatermelonRed10 = '#fdebee'; // bdl-watermelon-red-10\nexport const bdlWatermelonRed05 = '#fef5f6'; // bdl-watermelon-red-05\nexport const bdlWatermelonRed02 = '#fffbfc'; // bdl-watermelon-red-02\nexport const bdlLineHeight = '20px'; // bdl-line-height\nexport const bdlFontSize = '13px'; // bdl-fontSize\nexport const bdlFontSizeMinimum = '11px'; // bdl-fontSize-minimum\nexport const bdlFontSizeDejaBlue = '14px'; // bdl-fontSize--dejaBlue\nexport const avatarColors = ['#0061d5', '#003c84', '#767676', '#222', '#4826c2', '#9f3fed']; // avatar-colors\nexport const modalDialogZIndex = '160'; // modal-dialog-z-index\nexport const menuZIndex = '170'; // menu-z-index\nexport const notificationsWrapperZIndex = '180'; // notifications-wrapper-z-index\nexport const overlayZIndex = '190'; // overlay-z-index\nexport const tooltipZIndex = '190'; // tooltip-z-index\nexport const bdlBorderRadiusSize = '4px'; // bdl-border-radius-size\nexport const bdlBorderRadiusSizeMed = '6px'; // bdl-border-radius-size-med\nexport const bdlBorderRadiusSizeLarge = '8px'; // bdl-border-radius-size-large\nexport const bdlBorderRadiusSizeXlarge = '12px'; // bdl-border-radius-size-xlarge\nexport const bdlGridUnit = '4px'; // bdl-grid-unit\nexport const bdlGridUnitPx = '4'; // bdl-grid-unit-px\nexport const bdlBtnBorderWidth = '1px'; // bdl-btn-border-width\nexport const bdlBtnHeight = '32px'; // bdl-btn-height\nexport const bdlBtnHeightLarge = '40px'; // bdl-btn-height-large\nexport const bdlBtnIconSize = '20px'; // bdl-btn-icon-size\nexport const bdlBtnTextIconSize = '16px'; // bdl-btn-text-icon-size\nexport const bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal\nexport const bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase\nexport const bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction\nexport const sizeSmallMax = '374px'; // size-small-max\nexport const sizeMediumMax = '767px'; // size-medium-max\nexport const sizeLargeMax = '1023px'; // size-large-max\nexport const smallScreen = '(max-width: 374px)'; // small-screen\nexport const mediumScreen = '(max-width: 767px)'; // medium-screen\nexport const largeScreen = '(max-width: 1023px)'; // large-screen\n"],"file":"variables.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "15.0.0-beta.49",
+    "version": "15.0.0-beta.51",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/components/media-query/constants.js

@@ -1,7 +1,8 @@
-export const SIZE_SMALL = '(max-width: 374px)';
-export const SIZE_MEDIUM = '(min-width: 375px) and (max-width: 767px)';
-export const SIZE_LARGE = '(min-width: 768px) and (max-width: 1023px)';
-export const SIZE_XLARGE = '(min-width: 1024px)';
+import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';
+
+export const SIZE_SMALL = smallScreen;
+export const SIZE_MEDIUM = mediumScreen;
+export const SIZE_LARGE = largeScreen;
 
 export const HOVER = '(hover: hover)';
 export const ANY_HOVER = '(any-hover: hover)';

package/src/icons/general/IconSearch.js.flow

@@ -6,7 +6,7 @@ import { bdlGray40 } from '../../styles/variables';
 
 import type { Icon } from '../flowTypes';
 
-const IconSearch = ({ className = 'icon-search', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+const IconSearch = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
     <AccessibleSVG
         className={`icon-search ${className}`}
         height={height}

package/src/icons/general/IconSearch.tsx

@@ -5,7 +5,7 @@ import { bdlGray40 } from '../../styles/variables';
 
 import { Icon } from '../iconTypes';
 
-const IconSearch = ({ className = 'icon-search', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+const IconSearch = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
     <AccessibleSVG
         className={`icon-search ${className}`}
         height={height}

package/src/icons/general/IconSearchJuicy.js.flow

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray40 } from '../../styles/variables';
+
+import type { Icon } from '../flowTypes';
+
+const IconSearchJuicy = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+    <AccessibleSVG
+        className={`icon-search-juicy ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 24 24"
+        width={width}
+    >
+        <path
+            className="fill-color"
+            d="M10.491 1.5a8.99 8.99 0 0 1 7.359 14.157l4.21 4.21a1.5 1.5 0 0 1 0 2.123l-.07.07a1.5 1.5 0 0 1-2.122 0l-4.211-4.21A8.99 8.99 0 1 1 10.491 1.5zm0 2.997a5.994 5.994 0 1 0 0 11.988 5.994 5.994 0 0 0 0-11.988z"
+            fill={color}
+            fillRule="evenodd"
+        />
+    </AccessibleSVG>
+);
+
+export default IconSearchJuicy;

package/src/icons/general/IconSearchJuicy.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray40 } from '../../styles/variables';
+
+import { Icon } from '../iconTypes';
+
+const IconSearchJuicy = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+    <AccessibleSVG
+        className={`icon-search-juicy ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 24 24"
+        width={width}
+    >
+        <path
+            className="fill-color"
+            d="M10.491 1.5a8.99 8.99 0 0 1 7.359 14.157l4.21 4.21a1.5 1.5 0 0 1 0 2.123l-.07.07a1.5 1.5 0 0 1-2.122 0l-4.211-4.21A8.99 8.99 0 1 1 10.491 1.5zm0 2.997a5.994 5.994 0 1 0 0 11.988 5.994 5.994 0 0 0 0-11.988z"
+            fill={color}
+            fillRule="evenodd"
+        />
+    </AccessibleSVG>
+);
+
+export default IconSearchJuicy;

package/src/icons/general/README.md

@@ -901,6 +901,11 @@ width?: number,
         component: require('./IconSearch').default,
         propsDocumentation: iconPropsDocumentation,
     },
+    {
+        name: 'IconSearchJuicy',
+        component: require('./IconSearchJuicy').default,
+        propsDocumentation: iconPropsDocumentation,
+    },
     {
         name: 'IconSecurityClassification',
         component: require('./IconSecurityClassification').default,

package/src/icons/general/__tests__/IconSearchJuicy.test.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import IconSearchJuicy from '../IconSearchJuicy';
+import { bdlGray40 } from '../../../styles/variables';
+
+describe('icons/general/IconSearchJuicy', () => {
+    test('should correctly render default icon with default color', () => {
+        const dimension = 14;
+        const wrapper = shallow(<IconSearchJuicy />);
+
+        expect(wrapper.hasClass('icon-search-juicy')).toEqual(true);
+        expect(wrapper.find('path').prop('fill')).toEqual(bdlGray40);
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(dimension);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(dimension);
+    });
+
+    test('should correctly render icon with specified color', () => {
+        const color = '#fcfcfc';
+        const wrapper = shallow(<IconSearchJuicy color={color} />);
+
+        expect(wrapper.find('path').prop('fill')).toEqual(color);
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const dimension = 16;
+        const wrapper = shallow(<IconSearchJuicy height={dimension} width={dimension} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(dimension);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(dimension);
+    });
+
+    test('should correctly render icon with title', () => {
+        const title = 'abcde';
+        const wrapper = shallow(<IconSearchJuicy title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});

package/src/styles/_variables.scss

@@ -5,6 +5,7 @@
 @import './constants/typography';
 @import './constants/themes';
 @import './constants/buttons';
+@import './constants/media-queries';
 @import './deprecated'; // <<< Deprecated
 
 // Mixins

package/src/styles/constants/_media-queries.scss

@@ -0,0 +1,13 @@
+$size-small-max: 374px;
+$size-medium-max: 767px;
+$size-large-max: 1023px;
+
+$small-screen: unquote('(max-width: #{$size-small-max})');
+$medium-screen: unquote('(max-width: #{$size-medium-max})');
+$large-screen: unquote('(max-width: #{$size-large-max})');
+
+@mixin breakpoint($media-query) {
+    @media #{$media-query} {
+        @content;
+    }
+}

package/src/styles/variables.js

@@ -101,4 +101,10 @@ export const bdlBtnIconSize = "20px"; // bdl-btn-icon-size
 export const bdlBtnTextIconSize = "16px"; // bdl-btn-text-icon-size
 export const bdlBtnPaddingHorizontal = "16px"; // bdl-btn-padding-horizontal
 export const bdlTransitionDurationBase = "0.15s"; // bdl-transitionDurationBase
-export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const sizeSmallMax = "374px"; // size-small-max
+export const sizeMediumMax = "767px"; // size-medium-max
+export const sizeLargeMax = "1023px"; // size-large-max
+export const smallScreen = "(max-width: 374px)"; // small-screen
+export const mediumScreen = "(max-width: 767px)"; // medium-screen
+export const largeScreen = "(max-width: 1023px)"; // large-screen

package/src/styles/variables.json

@@ -98,5 +98,11 @@
     "bdl-btn-text-icon-size": "16px",
     "bdl-btn-padding-horizontal": "16px",
     "bdl-transitionDurationBase": "0.15s",
-    "bdl-timingFunction": ["cubic-bezier(0", "0", "0.6", "1)"]
+    "bdl-timingFunction": ["cubic-bezier(0", "0", "0.6", "1)"],
+    "size-small-max": "374px",
+    "size-medium-max": "767px",
+    "size-large-max": "1023px",
+    "small-screen": "(max-width: 374px)",
+    "medium-screen": "(max-width: 767px)",
+    "large-screen": "(max-width: 1023px)"
 }

package/src/styles/variables.ts

@@ -99,3 +99,9 @@ export const bdlBtnTextIconSize = '16px'; // bdl-btn-text-icon-size
 export const bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal
 export const bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase
 export const bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction
+export const sizeSmallMax = '374px'; // size-small-max
+export const sizeMediumMax = '767px'; // size-medium-max
+export const sizeLargeMax = '1023px'; // size-large-max
+export const smallScreen = '(max-width: 374px)'; // small-screen
+export const mediumScreen = '(max-width: 767px)'; // medium-screen
+export const largeScreen = '(max-width: 1023px)'; // large-screen