npm - @drivy/cobalt - Versions diffs - 0.13.1 → 0.14.0 - Mend

@drivy/cobalt 0.13.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (317) hide show

package/components/Icon/__generated__/TimeAlertIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeAlertIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeAlertIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeAlert\"\n\nconst TimeAlertIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n id=\"a\"\n d=\"M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10c2.25 0 4.33-.76 6-2v-2.72C16.53 18.94 14.39 20 12 20a8 8 0 1 1 0-16c3.36 0 6.23 2.07 7.41 5h2.13C20.27 4.94 16.5 2 12 2zm-1 5v6l5.25 3.15.75-1.23-4.5-2.67V7H11zm9 4v7h2v-7h-2zm0 9v2h2v-2h-2z\"\n />\n </svg>\n )\n}\n\nexport default TimeAlertIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,WAAW,CAAA;IAExB,aAAa,GAAG,UAAC,EAKX;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,0OAA0O,GAC5O,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"TimeAlertIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeAlertIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeAlert\"\n\nconst TimeAlertIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n id=\"a\"\n d=\"M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10c2.25 0 4.33-.76 6-2v-2.72C16.53 18.94 14.39 20 12 20a8 8 0 1 1 0-16c3.36 0 6.23 2.07 7.41 5h2.13C20.27 4.94 16.5 2 12 2zm-1 5v6l5.25 3.15.75-1.23-4.5-2.67V7H11zm9 4v7h2v-7h-2zm0 9v2h2v-2h-2z\"\n />\n </svg>\n )\n}\n\nexport default TimeAlertIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,WAAW,CAAA;IAExB,aAAa,GAAG,UAAC,EAKX;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,0OAA0O,GAC5O,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/TimeBackwardsIcon.js CHANGED Viewed

@@ -7,8 +7,8 @@ var iconSource = "timeBackwards";
 var TimeBackwardsIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,

package/components/Icon/__generated__/TimeBackwardsIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeBackwardsIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeBackwardsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeBackwards\"\n\nconst TimeBackwardsIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 3a9 9 0 00-9 9H1l3.89 3.89.07.14L9 12H6a7 7 0 117 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.896 8.896 0 0013 21a9 9 0 100-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\" />\n </svg>\n )\n}\n\nexport default TimeBackwardsIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,eAAe,CAAA;IAE5B,iBAAiB,GAAG,UAAC,EAKf;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,2KAA2K,GAAG,CAClL,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"TimeBackwardsIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeBackwardsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeBackwards\"\n\nconst TimeBackwardsIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 3a9 9 0 00-9 9H1l3.89 3.89.07.14L9 12H6a7 7 0 117 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.896 8.896 0 0013 21a9 9 0 100-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\" />\n </svg>\n )\n}\n\nexport default TimeBackwardsIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,eAAe,CAAA;IAE5B,iBAAiB,GAAG,UAAC,EAKf;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,2KAA2K,GAAG,CAClL,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/TimeCalendarIcon.js CHANGED Viewed

@@ -7,8 +7,8 @@ var iconSource = "timeCalendar";
 var TimeCalendarIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,

package/components/Icon/__generated__/TimeCalendarIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeCalendarIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeCalendarIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeCalendar\"\n\nconst TimeCalendarIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14,15 L7,15 L7,17 L14,17 L14,15 Z M19,20 L5,20 L5,9 L19,9 L19,20 Z M19,4 L18,4 L18,2 L16,2 L16,4 L8,4 L8,2 L6,2 L6,4 L5,4 C3.89,4 3,4.9 3,6 L3,20 C3,21.1045695 3.8954305,22 5,22 L19,22 C20.1045695,22 21,21.1045695 21,20 L21,6 C21,4.8954305 20.1045695,4 19,4 L19,4 Z M17,11 L7,11 L7,13 L17,13 L17,11 Z\" />\n </svg>\n )\n}\n\nexport default TimeCalendarIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,cAAc,CAAA;IAE3B,gBAAgB,GAAG,UAAC,EAKd;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,+SAA+S,GAAG,CACtT,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"TimeCalendarIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeCalendarIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeCalendar\"\n\nconst TimeCalendarIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14,15 L7,15 L7,17 L14,17 L14,15 Z M19,20 L5,20 L5,9 L19,9 L19,20 Z M19,4 L18,4 L18,2 L16,2 L16,4 L8,4 L8,2 L6,2 L6,4 L5,4 C3.89,4 3,4.9 3,6 L3,20 C3,21.1045695 3.8954305,22 5,22 L19,22 C20.1045695,22 21,21.1045695 21,20 L21,6 C21,4.8954305 20.1045695,4 19,4 L19,4 Z M17,11 L7,11 L7,13 L17,13 L17,11 Z\" />\n </svg>\n )\n}\n\nexport default TimeCalendarIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,cAAc,CAAA;IAE3B,gBAAgB,GAAG,UAAC,EAKd;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,+SAA+S,GAAG,CACtT,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/TimeForwardIcon.js CHANGED Viewed

@@ -7,8 +7,8 @@ var iconSource = "timeForward";
 var TimeForwardIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,

package/components/Icon/__generated__/TimeForwardIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeForwardIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeForwardIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeForward\"\n\nconst TimeForwardIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 000 9.8c2.73 2.7 7.15 2.7 9.88 0 1.36-1.35 2.04-2.92 2.04-4.9h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58a8.987 8.987 0 0112.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z\" />\n </svg>\n )\n}\n\nexport default TimeForwardIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,aAAa,CAAA;IAE1B,eAAe,GAAG,UAAC,EAKb;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,qSAAqS,GAAG,CAC5S,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"TimeForwardIcon.js","sources":["../../../../src/components/Icon/__generated__/TimeForwardIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"timeForward\"\n\nconst TimeForwardIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 000 9.8c2.73 2.7 7.15 2.7 9.88 0 1.36-1.35 2.04-2.92 2.04-4.9h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58a8.987 8.987 0 0112.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z\" />\n </svg>\n )\n}\n\nexport default TimeForwardIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,aAAa,CAAA;IAE1B,eAAe,GAAG,UAAC,EAKb;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,qSAAqS,GAAG,CAC5S,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/TrainIcon.js CHANGED Viewed

@@ -7,8 +7,8 @@ var iconSource = "train";
 var TrainIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,

package/components/Icon/__generated__/TrainIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TrainIcon.js","sources":["../../../../src/components/Icon/__generated__/TrainIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"train\"\n\nconst TrainIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 4c-3.5 0-7 .447-7 3.579v8.5c0 1.73 1.371 3.131 3.063 3.131L6.75 20.553V21h1.951l1.75-1.79h3.299L15.5 21h1.75v-.447l-1.313-1.343c1.693 0 3.063-1.402 3.063-3.13v-8.5C19 4.447 15.867 4 12 4zM8.062 17.421c-.724 0-1.312-.6-1.312-1.342 0-.741.588-1.342 1.313-1.342.724 0 1.312.6 1.312 1.342 0 .741-.588 1.342-1.313 1.342zm3.063-6.263H6.75V7.579h4.375v3.579zm1.75 0V7.579h4.375v3.579h-4.375zm3.063 6.263c-.725 0-1.313-.6-1.313-1.342 0-.741.588-1.342 1.313-1.342.724 0 1.312.6 1.312 1.342 0 .741-.588 1.342-1.313 1.342z\" />\n </svg>\n )\n}\n\nexport default TrainIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,OAAO,CAAA;IAEpB,SAAS,GAAG,UAAC,EAKP;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,qgBAAqgB,GAAG,CAC5gB,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"TrainIcon.js","sources":["../../../../src/components/Icon/__generated__/TrainIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"train\"\n\nconst TrainIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 4c-3.5 0-7 .447-7 3.579v8.5c0 1.73 1.371 3.131 3.063 3.131L6.75 20.553V21h1.951l1.75-1.79h3.299L15.5 21h1.75v-.447l-1.313-1.343c1.693 0 3.063-1.402 3.063-3.13v-8.5C19 4.447 15.867 4 12 4zM8.062 17.421c-.724 0-1.312-.6-1.312-1.342 0-.741.588-1.342 1.313-1.342.724 0 1.312.6 1.312 1.342 0 .741-.588 1.342-1.313 1.342zm3.063-6.263H6.75V7.579h4.375v3.579zm1.75 0V7.579h4.375v3.579h-4.375zm3.063 6.263c-.725 0-1.313-.6-1.313-1.342 0-.741.588-1.342 1.313-1.342.724 0 1.312.6 1.312 1.342 0 .741-.588 1.342-1.313 1.342z\" />\n </svg>\n )\n}\n\nexport default TrainIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,OAAO,CAAA;IAEpB,SAAS,GAAG,UAAC,EAKP;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,qgBAAqgB,GAAG,CAC5gB,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/UserShieldIcon.js CHANGED Viewed

@@ -7,8 +7,8 @@ var iconSource = "userShield";
 var UserShieldIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,

package/components/Icon/__generated__/UserShieldIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserShieldIcon.js","sources":["../../../../src/components/Icon/__generated__/UserShieldIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"userShield\"\n\nconst UserShieldIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4a3 3 0 110 6 3 3 0 010-6zm5.13 12A9.69 9.69 0 0112 20.92 9.69 9.69 0 016.87 17c-.34-.5-.63-1-.87-1.53 0-1.65 2.71-3 6-3s6 1.32 6 3c-.24.53-.53 1.03-.87 1.53z\" />\n </svg>\n )\n}\n\nexport default UserShieldIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,YAAY,CAAA;IAEzB,cAAc,GAAG,UAAC,EAKZ;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,mOAAmO,GAAG,CAC1O,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"UserShieldIcon.js","sources":["../../../../src/components/Icon/__generated__/UserShieldIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"userShield\"\n\nconst UserShieldIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4a3 3 0 110 6 3 3 0 010-6zm5.13 12A9.69 9.69 0 0112 20.92 9.69 9.69 0 016.87 17c-.34-.5-.63-1-.87-1.53 0-1.65 2.71-3 6-3s6 1.32 6 3c-.24.53-.53 1.03-.87 1.53z\" />\n </svg>\n )\n}\n\nexport default UserShieldIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,YAAY,CAAA;IAEzB,cAAc,GAAG,UAAC,EAKZ;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,mOAAmO,GAAG,CAC1O,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/VerifiedSealIcon.js CHANGED Viewed

@@ -7,8 +7,8 @@ var iconSource = "verifiedSeal";
 var VerifiedSealIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,

package/components/Icon/__generated__/VerifiedSealIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerifiedSealIcon.js","sources":["../../../../src/components/Icon/__generated__/VerifiedSealIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"verifiedSeal\"\n\nconst VerifiedSealIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m22 11.51-2.218-2.528.309-3.346-3.282-.745-1.718-2.891-3.091 1.327-3.09-1.327-1.72 2.89-3.28.737.308 3.346-2.218 2.536 2.218 2.527-.309 3.355 3.282.745 1.718 2.891 3.091-1.336 3.09 1.327 1.72-2.89 3.28-.746-.308-3.346zm-11.818 4.545-3.637-3.637 1.282-1.282 2.355 2.346 5.99-5.991 1.283 1.29z\"\n fillRule=\"evenodd\"\n />\n </svg>\n )\n}\n\nexport default VerifiedSealIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,cAAc,CAAA;IAE3B,gBAAgB,GAAG,UAAC,EAKd;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,CAAC,EAAC,qSAAqS,EACvS,QAAQ,EAAC,SAAS,GAClB,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"VerifiedSealIcon.js","sources":["../../../../src/components/Icon/__generated__/VerifiedSealIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"verifiedSeal\"\n\nconst VerifiedSealIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m22 11.51-2.218-2.528.309-3.346-3.282-.745-1.718-2.891-3.091 1.327-3.09-1.327-1.72 2.89-3.28.737.308 3.346-2.218 2.536 2.218 2.527-.309 3.355 3.282.745 1.718 2.891 3.091-1.336 3.09 1.327 1.72-2.89 3.28-.746-.308-3.346zm-11.818 4.545-3.637-3.637 1.282-1.282 2.355 2.346 5.99-5.991 1.283 1.29z\"\n fillRule=\"evenodd\"\n />\n </svg>\n )\n}\n\nexport default VerifiedSealIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,cAAc,CAAA;IAE3B,gBAAgB,GAAG,UAAC,EAKd;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,CAAC,EAAC,qSAAqS,EACvS,QAAQ,EAAC,SAAS,GAClB,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/WrenchIcon.js CHANGED Viewed

@@ -7,8 +7,8 @@ var iconSource = "wrench";
 var WrenchIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,

package/components/Icon/__generated__/WrenchIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WrenchIcon.js","sources":["../../../../src/components/Icon/__generated__/WrenchIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"wrench\"\n\nconst WrenchIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M6.53 3.53a6 6 0 0 1 7.885 8.057l6 5.999a2 2 0 0 1-2.83 2.828l-5.998-5.999A6 6 0 0 1 3.53 6.53L8 11l3-3-4.47-4.47z\" />\n </svg>\n )\n}\n\nexport default WrenchIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,QAAQ,CAAA;IAErB,UAAU,GAAG,UAAC,EAKR;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~UAAY~~;QAEtC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;QACzD,8BAAM,CAAC,EAAC,oHAAoH,GAAG,CAC3H,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"WrenchIcon.js","sources":["../../../../src/components/Icon/__generated__/WrenchIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"wrench\"\n\nconst WrenchIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M6.53 3.53a6 6 0 0 1 7.885 8.057l6 5.999a2 2 0 0 1-2.83 2.828l-5.998-5.999A6 6 0 0 1 3.53 6.53L8 11l3-3-4.47-4.47z\" />\n </svg>\n )\n}\n\nexport default WrenchIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,QAAQ,CAAA;IAErB,UAAU,GAAG,UAAC,EAKR;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;QACzD,8BAAM,CAAC,EAAC,oHAAoH,GAAG,CAC3H,CACP,CAAA;AACH;;;;"}

package/components/Icon/index.js CHANGED Viewed

@@ -45,8 +45,8 @@ var isIconSource = function (source) {
 var Icon = function (_a) {
     var _b;
     var source = _a.source, color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + source, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(source), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,
@@ -54,7 +54,7 @@ var Icon = function (_a) {
         _b));
     var iconSource = BUNDLED_ICONS[source];
     if (iconSource == null)
-        throw new Error("Icon '" + source + "' can not be found. Did you add the source, export it and run 'yarn run icons:update'?");
+        throw new Error("Icon '".concat(source, "' can not be found. Did you add the source, export it and run 'yarn run icons:update'?"));
     return (React.createElement("span", { className: computedClassName, dangerouslySetInnerHTML: { __html: iconSource } }));
 };

package/components/Icon/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { icons as iconTokens } from \"../../tokens\"\n\nimport * as icons from \"../../icons\"\nimport { eqSet, capitalize } from \"../utils\"\n\nif (\n !eqSet<string>(\n new Set(Object.keys(icons)),\n new Set(Object.keys(iconTokens.icons))\n )\n)\n throw new Error(\n \"Icon sources and tokens are not consistent. Did you add the source, export it and run 'yarn run icons:update'\"\n )\n\ninterface IconsMap {\n [name: string]: string \| undefined\n}\n\nexport const BUNDLED_ICONS: IconsMap = Object.freeze(\n Object.keys(iconTokens.icons).reduce(\n (bundledIcons, name) => ({\n ...bundledIcons,\n [name]: (icons as IconsMap)[name],\n }),\n {}\n )\n)\n\nexport type IconSources = keyof typeof iconTokens.icons\n\nexport const IconColorsOptions = [\n \"aller\",\n \"amber\",\n \"asphalt\",\n \"asphaltLight\",\n \"blue\",\n \"coral\",\n \"essence\",\n \"graphite\",\n \"graphiteLight\",\n \"green\",\n \"greenDark\",\n \"greenLight\",\n \"grey\",\n \"greyDark\",\n \"greyLight\",\n \"greyLighter\",\n \"indigo\",\n \"indigoDark\",\n \"purple\",\n \"purpleLight\",\n \"red\",\n \"signal\",\n \"turquoise\",\n \"white\",\n] as const\n\nexport type IconColors = typeof IconColorsOptions[number]\n\nexport interface IconProps {\n source: IconSources\n /*\n Available colors\n * @default asphaltLight\n /\n color?: IconColors\n /\n Available size in px\n * @default 24\n /\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\n\nexport const isIconSource = (source: string): source is IconSources =>\n Object.keys(iconTokens.icons).includes(source)\n\nexport const Icon = ({\n source,\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${source}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const iconSource = BUNDLED_ICONS[source]\n\n if (iconSource == null)\n throw new Error(\n `Icon '${source}' can not be found. Did you add the source, export it and run 'yarn run icons:update'?`\n )\n\n return (\n <span\n className={computedClassName}\n dangerouslySetInnerHTML={{ __html: iconSource }}\n />\n )\n}\n\nexport from \"./__generated__/index\"\n\nexport default Icon\n"],"names":["icons","iconTokens"],"mappings":";;;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,CACvC;IAED,MAAM,IAAI,KAAK,CACb,+GAA+G,CAChH,CAAA;IAMU,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAACA,KAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAClC,UAAC,YAAY,EAAE,IAAI;;IAAK,8BACnB,YAAY,gBACd,IAAI,IAAID,KAAkB,CAAC,IAAI,CAAC;AAFX,CAGtB,EACF,EAAE,CACH,EACF;IAIY,iBAAiB,GAAG;IAC/B,OAAO;IACP,OAAO;IACP,SAAS;IACT,cAAc;IACd,MAAM;IACN,OAAO;IACP,SAAS;IACT,UAAU;IACV,eAAe;IACf,OAAO;IACP,WAAW;IACX,YAAY;IACZ,MAAM;IACN,UAAU;IACV,WAAW;IACX,aAAa;IACb,QAAQ;IACR,YAAY;IACZ,QAAQ;IACR,aAAa;IACb,KAAK;IACL,QAAQ;IACR,WAAW;IACX,OAAO;EACC;IAoBG,YAAY,GAAG,UAAC,MAAc;IACzC,OAAA,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;AAA9C,EAA8C;IAEnC,IAAI,GAAG,UAAC,EAMT;;QALV,MAAM,YAAA,EACN,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,~~8BAA4B~~,~~MAAQ~~;QAElC,GAAC,~~uBAAqB~~,UAAU,CAAC,KAAK,~~CAAG~~,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IAExC,IAAI,UAAU,IAAI,IAAI;QACpB,MAAM,IAAI,KAAK,CACb,~~WAAS~~,MAAM,2FAAwF,CACxG,CAAA;IAEH,QACE,8BACE,SAAS,EAAE,iBAAiB,EAC5B,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,GAC/C,EACH;AACH;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { icons as iconTokens } from \"../../tokens\"\n\nimport * as icons from \"../../icons\"\nimport { eqSet, capitalize } from \"../utils\"\n\nif (\n !eqSet<string>(\n new Set(Object.keys(icons)),\n new Set(Object.keys(iconTokens.icons))\n )\n)\n throw new Error(\n \"Icon sources and tokens are not consistent. Did you add the source, export it and run 'yarn run icons:update'\"\n )\n\ninterface IconsMap {\n [name: string]: string \| undefined\n}\n\nexport const BUNDLED_ICONS: IconsMap = Object.freeze(\n Object.keys(iconTokens.icons).reduce(\n (bundledIcons, name) => ({\n ...bundledIcons,\n [name]: (icons as IconsMap)[name],\n }),\n {}\n )\n)\n\nexport type IconSources = keyof typeof iconTokens.icons\n\nexport const IconColorsOptions = [\n \"aller\",\n \"amber\",\n \"asphalt\",\n \"asphaltLight\",\n \"blue\",\n \"coral\",\n \"essence\",\n \"graphite\",\n \"graphiteLight\",\n \"green\",\n \"greenDark\",\n \"greenLight\",\n \"grey\",\n \"greyDark\",\n \"greyLight\",\n \"greyLighter\",\n \"indigo\",\n \"indigoDark\",\n \"purple\",\n \"purpleLight\",\n \"red\",\n \"signal\",\n \"turquoise\",\n \"white\",\n] as const\n\nexport type IconColors = typeof IconColorsOptions[number]\n\nexport interface IconProps {\n source: IconSources\n /*\n Available colors\n * @default asphaltLight\n /\n color?: IconColors\n /\n Available size in px\n * @default 24\n /\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\n\nexport const isIconSource = (source: string): source is IconSources =>\n Object.keys(iconTokens.icons).includes(source)\n\nexport const Icon = ({\n source,\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${source}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const iconSource = BUNDLED_ICONS[source]\n\n if (iconSource == null)\n throw new Error(\n `Icon '${source}' can not be found. Did you add the source, export it and run 'yarn run icons:update'?`\n )\n\n return (\n <span\n className={computedClassName}\n dangerouslySetInnerHTML={{ __html: iconSource }}\n />\n )\n}\n\nexport from \"./__generated__/index\"\n\nexport default Icon\n"],"names":["icons","iconTokens"],"mappings":";;;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,CACvC;IAED,MAAM,IAAI,KAAK,CACb,+GAA+G,CAChH,CAAA;IAMU,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAACA,KAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAClC,UAAC,YAAY,EAAE,IAAI;;IAAK,8BACnB,YAAY,gBACd,IAAI,IAAID,KAAkB,CAAC,IAAI,CAAC;AAFX,CAGtB,EACF,EAAE,CACH,EACF;IAIY,iBAAiB,GAAG;IAC/B,OAAO;IACP,OAAO;IACP,SAAS;IACT,cAAc;IACd,MAAM;IACN,OAAO;IACP,SAAS;IACT,UAAU;IACV,eAAe;IACf,OAAO;IACP,WAAW;IACX,YAAY;IACZ,MAAM;IACN,UAAU;IACV,WAAW;IACX,aAAa;IACb,QAAQ;IACR,YAAY;IACZ,QAAQ;IACR,aAAa;IACb,KAAK;IACL,QAAQ;IACR,WAAW;IACX,OAAO;EACC;IAoBG,YAAY,GAAG,UAAC,MAAc;IACzC,OAAA,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;AAA9C,EAA8C;IAEnC,IAAI,GAAG,UAAC,EAMT;;QALV,MAAM,YAAA,EACN,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,MAAM,CAAE;QAElC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IAExC,IAAI,UAAU,IAAI,IAAI;QACpB,MAAM,IAAI,KAAK,CACb,gBAAS,MAAM,2FAAwF,CACxG,CAAA;IAEH,QACE,8BACE,SAAS,EAAE,iBAAiB,EAC5B,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,GAC/C,EACH;AACH;;;;"}

package/components/Modal/index.js CHANGED Viewed

@@ -41,8 +41,8 @@ var _Modal = forwardRef(function (_a, ref) {
         // dangerouslyBypassScrollLock is used to disabled it
         // + fake scrollbar width to avoid visual layout shift
         if (isOpen) {
-            document.body.style.paddingRight = getScrollbarWidth() +
-                parseInt(window.getComputedStyle(document.body).paddingRight, 10) + "px"; // to avoid visual shift due to removing an existing scrollbar
+            document.body.style.paddingRight = "".concat(getScrollbarWidth() +
+                parseInt(window.getComputedStyle(document.body).paddingRight, 10), "px"); // to avoid visual shift due to removing an existing scrollbar
             document.body.style.overflow = "hidden";
         }
         return function () {
@@ -99,7 +99,7 @@ var _Modal = forwardRef(function (_a, ref) {
         return;
     };
     return (React.createElement(React.Fragment, null, transition(function (styles, isOpenState) {
-        return isOpenState && (React.createElement(AnimatedDialogOverlay, { initialFocusRef: initialFocusRef, onDismiss: getDismissHandler(close), className: "cobalt-modal__overlay", style: { opacity: styles.overlayOpacity }, dangerouslyBypassScrollLock: true },
+        return isOpenState && (React.createElement(AnimatedDialogOverlay, { initialFocusRef: initialFocusRef, onDismiss: getDismissHandler(close), className: "cobalt-modal__overlay", style: { opacity: styles.overlayOpacity }, onTouchEnd: function (e) { return e.stopPropagation(); }, onMouseUp: function (e) { return e.stopPropagation(); }, dangerouslyBypassScrollLock: true },
             React.createElement(AnimatedDialogContent, { className: cx("cobalt-modal", {
                     "cobalt-modal--desktop": !isMobile,
                     "cobalt-modal--mobile": isMobile,

package/components/Modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n /*\n mandatory for A11y\n /\n [\"aria-label\"]: string\n /\n Function called to close the modal, providing it make the modal closeable\n /\n close?: () => void\n /\n React.ref of the element to focus first when the modal opens\n /\n initialFocusRef?: React.RefObject<HTMLElement>\n /\n State to show or hide the modal/dialog\n /\n isOpen: boolean\n /\n Action to fire if the user try to dismiss when the modal is not closeable\n /\n onDismissAttempt?: () => void\n /\n Listener called when the modal has been fully hidden\n /\n onHidden?: () => void\n /\n Listener called when the modal begins to show\n /\n onShow?: () => void\n /\n Modal title\n /\n title?: string\n /\n Disable/Enable body paddings (enabled by default)\n /\n bodySpacing?: boolean\n /\n Disable/Enable hidding overflowing absolute elements (enabled by default)\n /\n overflowHidden?: boolean\n /\n Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n [\"aria-label\"]: ariaLabel,\n children,\n isOpen,\n close,\n overflowHidden = true,\n initialFocusRef,\n bodySpacing,\n onDismissAttempt,\n onHidden,\n onShow,\n title,\n }: ModalPropsType,\n ref\n ) => {\n const defaultBodyStyle =\n useRef<Record<\"paddingRight\" \| \"overflow\", string>>()\n\n useEffect(() => {\n defaultBodyStyle.current = {\n paddingRight: document.body.style.paddingRight,\n overflow: document.body.style.overflow,\n }\n }, [])\n\n const restoreDefaultBodyStyle = () => {\n if (defaultBodyStyle.current) {\n const { overflow, paddingRight } = defaultBodyStyle.current\n setTimeout(() => {\n // setTimeout is used to ensure that the restore style job is done as a final step\n document.body.style.overflow = overflow\n document.body.style.paddingRight = paddingRight\n }, 0)\n }\n }\n\n useEffect(() => {\n // disable / enable body scroll\n // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n // https://github.com/reach/reach-ui/issues/678\n // dangerouslyBypassScrollLock is used to disabled it\n // + fake scrollbar width to avoid visual layout shift\n if (isOpen) {\n document.body.style.paddingRight = `${\n getScrollbarWidth() +\n parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n }px` // to avoid visual shift due to removing an existing scrollbar\n\n document.body.style.overflow = \"hidden\"\n }\n return () => {\n isOpen && restoreDefaultBodyStyle()\n }\n }, [isOpen])\n\n const { isMobile } = useBreakpoint()\n\n const transformTransitionOut = isMobile ? 500 : -20\n\n const springConfig = { tension: 300, friction: 30, clamp: true }\n\n const transition = useTransition(isOpen, {\n from: {\n overlayOpacity: 0,\n modalTransform: transformTransitionOut,\n },\n enter: {\n overlayOpacity: 1,\n modalTransform: 0,\n config: springConfig,\n },\n leave: {\n overlayOpacity: 0,\n modalTransform: transformTransitionOut,\n config: springConfig,\n },\n onStart: () => {\n if (onShow) onShow()\n },\n onDestroyed: (isTransitioned) => {\n !isOpen && restoreDefaultBodyStyle()\n if (onHidden && isTransitioned) onHidden()\n },\n })\n\n const AnimatedDialogOverlay = animated(DialogOverlay)\n const AnimatedDialogContent = animated(DialogContent)\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c)\n )\n\n let header: React.ReactNode = null\n if (title \|\| close) {\n header = <ModalHeader title={title} {...(close ? { close } : {})} />\n }\n const hasHeader = !!title \|\| !!close\n\n let footer: React.ReactNode = null\n if (React.isValidElement(modalFooter)) {\n footer = <ModalFooter {...modalFooter.props} />\n }\n\n const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n if (onClose) return onClose\n if (onDismissAttempt) return onDismissAttempt\n return\n }\n\n return (\n <>\n {transition(\n (styles, isOpenState) =>\n isOpenState && (\n <AnimatedDialogOverlay\n initialFocusRef={initialFocusRef}\n onDismiss={getDismissHandler(close)}\n className=\"cobalt-modal__overlay\"\n style={{ opacity: styles.overlayOpacity }}\n dangerouslyBypassScrollLock\n >\n <AnimatedDialogContent\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--desktop\": !isMobile,\n \"cobalt-modal--mobile\": isMobile,\n \"cobalt-modal--overflowHidden\": overflowHidden,\n })}\n aria-label={ariaLabel}\n style={{ translateY: styles.modalTransform }}\n ref={ref}\n >\n {header}\n <ModalBody\n bodySpacing={bodySpacing}\n hasHeader={hasHeader}\n hasFooter={!!footer}\n >\n {children}\n </ModalBody>\n {footer}\n </AnimatedDialogContent>\n </AnimatedDialogOverlay>\n )\n )}\n </>\n )\n }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":";;;;;;;;;;;;AA0DA;IACa,cAAc,GAAG,UAAC,MAA4B,IAAK,OAAA,IAAI,IAAA;IAEvD,yBAAyB,GAAG,UACvC,SAA0B;IAE1B,OAAA,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,IAAI,KAAK,cAAc;AAApE,EAAoE;AAEtE,IAAM,MAAM,GAAG,UAAU,CACvB,UACE,EAYiB,EACjB,GAAG;QAZe,SAAS,mBAAA,EACzB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,KAAK,WAAA,EACL,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA,EACrB,eAAe,qBAAA,EACf,WAAW,iBAAA,EACX,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,KAAK,WAAA;IAIP,IAAM,gBAAgB,GACpB,MAAM,EAA+C,CAAA;IAEvD,SAAS,CAAC;QACR,gBAAgB,CAAC,OAAO,GAAG;YACzB,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;YAC9C,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;SACvC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAEN,IAAM,uBAAuB,GAAG;QAC9B,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACtB,IAAA,KAA6B,gBAAgB,CAAC,OAAO,EAAnD,UAAQ,cAAA,EAAE,cAAY,kBAA6B,CAAA;YAC3D,UAAU,CAAC;;gBAET,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAQ,CAAA;gBACvC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,cAAY,CAAA;aAChD,EAAE,CAAC,CAAC,CAAA;SACN;KACF,CAAA;IAED,SAAS,CAAC;;;;;;QAMR,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAC9B,iBAAiB,EAAE;gBACnB,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,OAC/D,CAAA;YAEJ,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;SACxC;QACD,OAAO;YACL,MAAM,IAAI,uBAAuB,EAAE,CAAA;SACpC,CAAA;KACF,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEJ,IAAA,QAAQ,GAAK,aAAa,EAAE,SAApB,CAAoB;IAEpC,IAAM,sBAAsB,GAAG,QAAQ,GAAG,GAAG,GAAG,CAAC,EAAE,CAAA;IAEnD,IAAM,YAAY,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;IAEhE,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE;YACJ,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,sBAAsB;SACvC;QACD,KAAK,EAAE;YACL,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,CAAC;YACjB,MAAM,EAAE,YAAY;SACrB;QACD,KAAK,EAAE;YACL,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,sBAAsB;YACtC,MAAM,EAAE,YAAY;SACrB;QACD,OAAO,EAAE;YACP,IAAI,MAAM;gBAAE,MAAM,EAAE,CAAA;SACrB;QACD,WAAW,EAAE,UAAC,cAAc;YAC1B,CAAC,MAAM,IAAI,uBAAuB,EAAE,CAAA;YACpC,IAAI,QAAQ,IAAI,cAAc;gBAAE,QAAQ,EAAE,CAAA;SAC3C;KACF,CAAC,CAAA;IAEF,IAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IACrD,IAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IAErD,IAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,UAAC,CAAC;QAC1D,OAAA,yBAAyB,CAAC,CAAC,CAAC;KAAA,CAC7B,CAAA;IAED,IAAI,MAAM,GAAoB,IAAI,CAAA;IAClC,IAAI,KAAK,IAAI,KAAK,EAAE;QAClB,MAAM,GAAG,oBAAC,WAAW,aAAC,KAAK,EAAE,KAAK,KAAO,KAAK,GAAG,EAAE,KAAK,OAAA,EAAE,GAAG,EAAE,GAAK,CAAA;KACrE;IACD,IAAM,SAAS,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAA;IAEpC,IAAI,MAAM,GAAoB,IAAI,CAAA;IAClC,IAAI,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE;QACrC,MAAM,GAAG,oBAAC,WAAW,eAAK,WAAW,CAAC,KAAK,EAAI,CAAA;KAChD;IAED,IAAM,iBAAiB,GAAG,UAAC,OAAiC;QAC1D,IAAI,OAAO;YAAE,OAAO,OAAO,CAAA;QAC3B,IAAI,gBAAgB;YAAE,OAAO,gBAAgB,CAAA;QAC7C,OAAM;KACP,CAAA;IAED,QACE,0CACG,UAAU,CACT,UAAC,MAAM,EAAE,WAAW;QAClB,OAAA,WAAW,KACT,oBAAC,qBAAqB,IACpB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,EACnC,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,cAAc,EAAE,EACzC,2BAA2B;YAE3B,oBAAC,qBAAqB,IACpB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE;oBAC5B,uBAAuB,EAAE,CAAC,QAAQ;oBAClC,sBAAsB,EAAE,QAAQ;oBAChC,8BAA8B,EAAE,cAAc;iBAC/C,CAAC,gBACU,SAAS,EACrB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,cAAc,EAAE,EAC5C,GAAG,EAAE,GAAG;gBAEP,MAAM;gBACP,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,CAAC,MAAM,IAElB,QAAQ,CACC;gBACX,MAAM,CACe,CACF,CACzB;KAAA,CACJ,CACA,EACJ;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,OAAO,CAAA;IAEtB,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n /*\n mandatory for A11y\n /\n [\"aria-label\"]: string\n /\n Function called to close the modal, providing it make the modal closeable\n /\n close?: () => void\n /\n React.ref of the element to focus first when the modal opens\n /\n initialFocusRef?: React.RefObject<HTMLElement>\n /\n State to show or hide the modal/dialog\n /\n isOpen: boolean\n /\n Action to fire if the user try to dismiss when the modal is not closeable\n /\n onDismissAttempt?: () => void\n /\n Listener called when the modal has been fully hidden\n /\n onHidden?: () => void\n /\n Listener called when the modal begins to show\n /\n onShow?: () => void\n /\n Modal title\n /\n title?: string\n /\n Disable/Enable body paddings (enabled by default)\n /\n bodySpacing?: boolean\n /\n Disable/Enable hidding overflowing absolute elements (enabled by default)\n /\n overflowHidden?: boolean\n /\n Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n [\"aria-label\"]: ariaLabel,\n children,\n isOpen,\n close,\n overflowHidden = true,\n initialFocusRef,\n bodySpacing,\n onDismissAttempt,\n onHidden,\n onShow,\n title,\n }: ModalPropsType,\n ref\n ) => {\n const defaultBodyStyle =\n useRef<Record<\"paddingRight\" \| \"overflow\", string>>()\n\n useEffect(() => {\n defaultBodyStyle.current = {\n paddingRight: document.body.style.paddingRight,\n overflow: document.body.style.overflow,\n }\n }, [])\n\n const restoreDefaultBodyStyle = () => {\n if (defaultBodyStyle.current) {\n const { overflow, paddingRight } = defaultBodyStyle.current\n setTimeout(() => {\n // setTimeout is used to ensure that the restore style job is done as a final step\n document.body.style.overflow = overflow\n document.body.style.paddingRight = paddingRight\n }, 0)\n }\n }\n\n useEffect(() => {\n // disable / enable body scroll\n // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n // https://github.com/reach/reach-ui/issues/678\n // dangerouslyBypassScrollLock is used to disabled it\n // + fake scrollbar width to avoid visual layout shift\n if (isOpen) {\n document.body.style.paddingRight = `${\n getScrollbarWidth() +\n parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n }px` // to avoid visual shift due to removing an existing scrollbar\n\n document.body.style.overflow = \"hidden\"\n }\n return () => {\n isOpen && restoreDefaultBodyStyle()\n }\n }, [isOpen])\n\n const { isMobile } = useBreakpoint()\n\n const transformTransitionOut = isMobile ? 500 : -20\n\n const springConfig = { tension: 300, friction: 30, clamp: true }\n\n const transition = useTransition(isOpen, {\n from: {\n overlayOpacity: 0,\n modalTransform: transformTransitionOut,\n },\n enter: {\n overlayOpacity: 1,\n modalTransform: 0,\n config: springConfig,\n },\n leave: {\n overlayOpacity: 0,\n modalTransform: transformTransitionOut,\n config: springConfig,\n },\n onStart: () => {\n if (onShow) onShow()\n },\n onDestroyed: (isTransitioned) => {\n !isOpen && restoreDefaultBodyStyle()\n if (onHidden && isTransitioned) onHidden()\n },\n })\n\n const AnimatedDialogOverlay = animated(DialogOverlay)\n const AnimatedDialogContent = animated(DialogContent)\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c)\n )\n\n let header: React.ReactNode = null\n if (title \|\| close) {\n header = <ModalHeader title={title} {...(close ? { close } : {})} />\n }\n const hasHeader = !!title \|\| !!close\n\n let footer: React.ReactNode = null\n if (React.isValidElement(modalFooter)) {\n footer = <ModalFooter {...modalFooter.props} />\n }\n\n const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n if (onClose) return onClose\n if (onDismissAttempt) return onDismissAttempt\n return\n }\n\n return (\n <>\n {transition(\n (styles, isOpenState) =>\n isOpenState && (\n <AnimatedDialogOverlay\n initialFocusRef={initialFocusRef}\n onDismiss={getDismissHandler(close)}\n className=\"cobalt-modal__overlay\"\n style={{ opacity: styles.overlayOpacity }}\n onTouchEnd={(e) => e.stopPropagation()}\n onMouseUp={(e) => e.stopPropagation()}\n dangerouslyBypassScrollLock\n >\n <AnimatedDialogContent\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--desktop\": !isMobile,\n \"cobalt-modal--mobile\": isMobile,\n \"cobalt-modal--overflowHidden\": overflowHidden,\n })}\n aria-label={ariaLabel}\n style={{ translateY: styles.modalTransform }}\n ref={ref}\n >\n {header}\n <ModalBody\n bodySpacing={bodySpacing}\n hasHeader={hasHeader}\n hasFooter={!!footer}\n >\n {children}\n </ModalBody>\n {footer}\n </AnimatedDialogContent>\n </AnimatedDialogOverlay>\n )\n )}\n </>\n )\n }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":"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"}

package/components/PhotoDropzone/index.js ADDED Viewed

@@ -0,0 +1,189 @@
+import { __read, __awaiter, __generator } from '../../_virtual/_tslib.js';
+import VisuallyHidden from '@reach/visually-hidden';
+import React, { useRef, useState } from 'react';
+import cx from 'classnames';
+import '../Icon/index.js';
+import { validateFile } from '../utils/validateFile.js';
+import Popover from '../Popover/index.js';
+import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';
+import BinIcon from '../Icon/__generated__/BinIcon.js';
+import PlusIcon from '../Icon/__generated__/PlusIcon.js';
+import LoadingIcon from '../Icon/__generated__/LoadingIcon.js';
+var ACCEPTED_MAX_SIZE_MB = 10;
+var ACCEPTED_PHOTOS_TYPES = ["jpg", "jpeg", "png", "gif"];
+var ERROR_DISPLAY_TIME = 6000;
+var ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(", ");
+var preventEventDefaults = function (e) {
+    e.preventDefault && e.preventDefault();
+    e.stopPropagation && e.stopPropagation();
+};
+var isEnterOrSpaceKey = function (event) {
+    return event.key === "Enter" || event.key === " ";
+};
+var PhotoDropzone = function (_a) {
+    var className = _a.className, description = _a.description, deletePopoverContent = _a.deletePopoverContent, errorContent = _a.errorContent, onDropped = _a.onDropped, onPhotoDelete = _a.onPhotoDelete, _b = _a.initialImageUrl, initialImageUrl = _b === void 0 ? "" : _b;
+    var fileInputRef = useRef(null);
+    var deleteButtonRef = useRef(null);
+    var _c = __read(useState(false), 2), isDragging = _c[0], setIsDragging = _c[1];
+    var _d = __read(useState(false), 2), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = __read(useState(false), 2), isErrored = _e[0], setIsErrored = _e[1];
+    var _f = __read(useState(initialImageUrl), 2), imagePreviewUrl = _f[0], setImagePreviewUrl = _f[1];
+    var _g = __read(useState(false), 2), displayDeletion = _g[0], setDisplayDeletion = _g[1];
+    var _h = __read(useState(false), 2), showDeletePopover = _h[0], setShowDeletePopover = _h[1];
+    var openDeletePopover = function (event) {
+        event && preventEventDefaults(event);
+        setShowDeletePopover(true);
+    };
+    var closeDeletePopover = function (event) {
+        event && preventEventDefaults(event);
+        setShowDeletePopover(false);
+    };
+    var onDropzoneMouseEnter = function (event) {
+        event && preventEventDefaults(event);
+        if (imagePreviewUrl)
+            setDisplayDeletion(true);
+    };
+    var onDropzoneMouseLeave = function (event) {
+        event && preventEventDefaults(event);
+        if (displayDeletion && !showDeletePopover)
+            setDisplayDeletion(false);
+    };
+    var onDropzoneClick = function (event) {
+        var _a;
+        event && preventEventDefaults(event);
+        if (isLoading)
+            return;
+        if (isErrored)
+            setIsErrored(false);
+        if (imagePreviewUrl) {
+            if (showDeletePopover)
+                closeDeletePopover();
+            return setDisplayDeletion(!displayDeletion);
+        }
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var onDropzoneKey = function (event) {
+        if (showDeletePopover)
+            return;
+        if (isEnterOrSpaceKey(event)) {
+            onDropzoneClick();
+        }
+    };
+    var onDeleteKey = function (event) {
+        if (isEnterOrSpaceKey(event)) {
+            openDeletePopover(event);
+        }
+    };
+    var onDelete = function () {
+        if (fileInputRef.current)
+            fileInputRef.current.value = "";
+        closeDeletePopover();
+        setImagePreviewUrl("");
+        onPhotoDelete && onPhotoDelete();
+    };
+    var onDragEnter = function (event) {
+        preventEventDefaults(event);
+        if (isErrored)
+            setIsErrored(false);
+        !imagePreviewUrl && setIsDragging(true);
+    };
+    var onDragLeave = function (event) {
+        preventEventDefaults(event);
+        setIsDragging(false);
+    };
+    var processFile = function (fileToProcess) { return __awaiter(void 0, void 0, void 0, function () {
+        var isValidFile, imageSrc;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsDragging(false);
+                    setIsErrored(false);
+                    setIsLoading(true);
+                    return [4 /*yield*/, validateFile(fileToProcess, function (fileToValidate, extension) {
+                            var maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000;
+                            var acceptedFileTypes = ACCEPTED_PHOTOS_TYPES;
+                            if (fileToValidate.size > maxFileSize) {
+                                return false;
+                            }
+                            else if (!extension || !acceptedFileTypes.includes(extension)) {
+                                return false;
+                            }
+                            else {
+                                return true;
+                            }
+                        })];
+                case 1:
+                    isValidFile = _a.sent();
+                    if (!isValidFile) return [3 /*break*/, 3];
+                    imageSrc = URL.createObjectURL(fileToProcess);
+                    setImagePreviewUrl(imageSrc);
+                    return [4 /*yield*/, onDropped(fileToProcess)];
+                case 2:
+                    _a.sent();
+                    setIsLoading(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsLoading(false);
+                    setIsErrored(true);
+                    setTimeout(function () {
+                        setIsErrored(false);
+                    }, ERROR_DISPLAY_TIME);
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var onFileInputChanged = function (event) {
+        var _a;
+        if ((_a = event.target.files) === null || _a === void 0 ? void 0 : _a.length) {
+            processFile(event.target.files[0]);
+        }
+    };
+    var onDrop = function (event) {
+        var _a, _b;
+        preventEventDefaults(event);
+        if (((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length) && !imagePreviewUrl) {
+            processFile(event.dataTransfer.files[0]);
+        }
+    };
+    var onDeleteButtonClick = showDeletePopover
+        ? closeDeletePopover
+        : openDeletePopover;
+    return (React.createElement("div", { tabIndex: 0, className: cx("cobalt-photo-dropzone", className, {
+            "cobalt-photo-dropzone--filled": imagePreviewUrl,
+            "cobalt-photo-dropzone--dragging": isDragging,
+            "cobalt-photo-dropzone--loading": isLoading,
+            "cobalt-photo-dropzone--errored": isErrored,
+        }), onMouseEnter: onDropzoneMouseEnter, onMouseLeave: onDropzoneMouseLeave, onDragEnter: onDragEnter, onDragLeave: onDragLeave,
+        // Not on click because we also use mouseEnter listener
+        onMouseUp: onDropzoneClick, onTouchEnd: onDropzoneClick, onKeyUp: onDropzoneKey, onDrop: onDrop,
+        // Need to reset those listeners to avoid default browser behaviour
+        onDragStart: preventEventDefaults, onDragEnd: preventEventDefaults, onDragOver: preventEventDefaults },
+        isErrored && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
+            React.createElement(ContextualWarningCircleFilledIcon, { color: "red" }),
+            errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB))),
+        isLoading && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
+            React.createElement(LoadingIcon, null))),
+        !isLoading &&
+            !isErrored &&
+            (imagePreviewUrl ? (React.createElement(React.Fragment, null,
+                React.createElement("img", { className: "cobalt-photo-dropzone__preview", src: imagePreviewUrl }),
+                React.createElement("div", null,
+                    React.createElement("button", { className: cx("cobalt-photo-dropzone__delete-button", {
+                            "cobalt-photo-dropzone__delete-button--triggered": displayDeletion,
+                        }), ref: deleteButtonRef,
+                        // Must follow the click listeners on the dropzone,
+                        // in order to have the correct events bubbling
+                        onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey },
+                        React.createElement(VisuallyHidden, null, "Delete"),
+                        React.createElement(BinIcon, { color: "indigo" })),
+                    React.createElement(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true }, deletePopoverContent(onDelete, closeDeletePopover))))) : (React.createElement("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong" },
+                React.createElement("p", null, description),
+                React.createElement(PlusIcon, null)))),
+        React.createElement(VisuallyHidden, null,
+            React.createElement("input", { ref: fileInputRef, type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map(function (ext) { return ".".concat(ext); }).join(","), multiple: false }))));
+};
+export { PhotoDropzone as default };
+//# sourceMappingURL=index.js.map

package/components/PhotoDropzone/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../src/components/PhotoDropzone/index.tsx"],"sourcesContent":["import VisuallyHidden from \"@reach/visually-hidden\"\nimport React, {\n useState,\n DragEvent as ReactDragEvent,\n useRef,\n TouchEvent as ReactTouchEvent,\n ChangeEvent as ReactChangeEvent,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent,\n ReactNode,\n} from \"react\"\nimport cx from \"classnames\"\nimport {\n PlusIcon,\n BinIcon,\n LoadingIcon,\n ContextualWarningCircleFilledIcon,\n} from \"../Icon\"\nimport { validateFile } from \"../utils/validateFile\"\nimport Popover from \"../Popover\"\n\nconst ACCEPTED_MAX_SIZE_MB = 10\nconst ACCEPTED_PHOTOS_TYPES = [\"jpg\", \"jpeg\", \"png\", \"gif\"]\nconst ERROR_DISPLAY_TIME = 6000\nconst ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(\", \")\n\nexport type PhotoDropzonePropsType = {\n className?: string\n description: string\n deletePopoverContent: (onDelete: () => void, close: () => void) => ReactNode\n errorContent: (acceptedTypes: string, maxFileSize: number) => ReactNode\n onDropped: (file: File) => Promise<void> | void\n onPhotoDelete?: () => void\n initialImageUrl?: string\n}\n\nconst preventEventDefaults = (\n e: ReactDragEvent | ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n) => {\n e.preventDefault && e.preventDefault()\n e.stopPropagation && e.stopPropagation()\n}\n\nconst isEnterOrSpaceKey = (event: ReactKeyboardEvent) =>\n event.key === \"Enter\" || event.key === \" \"\n\nconst PhotoDropzone = ({\n className,\n description,\n deletePopoverContent,\n errorContent,\n onDropped,\n onPhotoDelete,\n initialImageUrl = \"\",\n}: PhotoDropzonePropsType) => {\n const fileInputRef = useRef<HTMLInputElement>(null)\n const deleteButtonRef = useRef<HTMLButtonElement>(null)\n const [isDragging, setIsDragging] = useState(false)\n const [isLoading, setIsLoading] = useState(false)\n const [isErrored, setIsErrored] = useState(false)\n const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl)\n const [displayDeletion, setDisplayDeletion] = useState(false)\n const [showDeletePopover, setShowDeletePopover] = useState(false)\n\n const openDeletePopover = (\n event?: ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n ) => {\n event && preventEventDefaults(event)\n setShowDeletePopover(true)\n }\n const closeDeletePopover = (event?: ReactMouseEvent | ReactTouchEvent) => {\n event && preventEventDefaults(event)\n setShowDeletePopover(false)\n }\n\n const onDropzoneMouseEnter = (event?: ReactMouseEvent) => {\n event && preventEventDefaults(event)\n if (imagePreviewUrl) setDisplayDeletion(true)\n }\n\n const onDropzoneMouseLeave = (event?: ReactMouseEvent) => {\n event && preventEventDefaults(event)\n if (displayDeletion && !showDeletePopover) setDisplayDeletion(false)\n }\n\n const onDropzoneClick = (event?: ReactMouseEvent | ReactTouchEvent) => {\n event && preventEventDefaults(event)\n if (isLoading) return\n if (isErrored) setIsErrored(false)\n if (imagePreviewUrl) {\n if (showDeletePopover) closeDeletePopover()\n return setDisplayDeletion(!displayDeletion)\n }\n fileInputRef.current?.click()\n }\n\n const onDropzoneKey = (event: ReactKeyboardEvent) => {\n if (showDeletePopover) return\n if (isEnterOrSpaceKey(event)) {\n onDropzoneClick()\n }\n }\n\n const onDeleteKey = (event: ReactKeyboardEvent) => {\n if (isEnterOrSpaceKey(event)) {\n openDeletePopover(event)\n }\n }\n\n const onDelete = () => {\n if (fileInputRef.current) fileInputRef.current.value = \"\"\n closeDeletePopover()\n setImagePreviewUrl(\"\")\n onPhotoDelete && onPhotoDelete()\n }\n\n const onDragEnter = (event: ReactDragEvent) => {\n preventEventDefaults(event)\n if (isErrored) setIsErrored(false)\n !imagePreviewUrl && setIsDragging(true)\n }\n\n const onDragLeave = (event: ReactDragEvent) => {\n preventEventDefaults(event)\n setIsDragging(false)\n }\n\n const processFile = async (fileToProcess: File) => {\n setIsDragging(false)\n setIsErrored(false)\n setIsLoading(true)\n\n const isValidFile = await validateFile(\n fileToProcess,\n (fileToValidate, extension) => {\n const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000\n const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES\n\n if (fileToValidate.size > maxFileSize) {\n return false\n } else if (!extension || !acceptedFileTypes.includes(extension)) {\n return false\n } else {\n return true\n }\n }\n )\n\n if (isValidFile) {\n const imageSrc = URL.createObjectURL(fileToProcess)\n setImagePreviewUrl(imageSrc)\n await onDropped(fileToProcess)\n setIsLoading(false)\n } else {\n setIsLoading(false)\n setIsErrored(true)\n setTimeout(() => {\n setIsErrored(false)\n }, ERROR_DISPLAY_TIME)\n }\n }\n\n const onFileInputChanged = (event: ReactChangeEvent<HTMLInputElement>) => {\n if (event.target.files?.length) {\n processFile(event.target.files[0])\n }\n }\n\n const onDrop = (event: ReactDragEvent<HTMLDivElement>) => {\n preventEventDefaults(event)\n if (event.dataTransfer?.files?.length && !imagePreviewUrl) {\n processFile(event.dataTransfer.files[0])\n }\n }\n\n const onDeleteButtonClick = showDeletePopover\n ? closeDeletePopover\n : openDeletePopover\n\n return (\n <div\n tabIndex={0}\n className={cx(\"cobalt-photo-dropzone\", className, {\n \"cobalt-photo-dropzone--filled\": imagePreviewUrl,\n \"cobalt-photo-dropzone--dragging\": isDragging,\n \"cobalt-photo-dropzone--loading\": isLoading,\n \"cobalt-photo-dropzone--errored\": isErrored,\n })}\n onMouseEnter={onDropzoneMouseEnter}\n onMouseLeave={onDropzoneMouseLeave}\n onDragEnter={onDragEnter}\n onDragLeave={onDragLeave}\n // Not on click because we also use mouseEnter listener\n onMouseUp={onDropzoneClick}\n onTouchEnd={onDropzoneClick}\n onKeyUp={onDropzoneKey}\n onDrop={onDrop}\n // Need to reset those listeners to avoid default browser behaviour\n onDragStart={preventEventDefaults}\n onDragEnd={preventEventDefaults}\n onDragOver={preventEventDefaults}\n >\n {isErrored && (\n <div className=\"cobalt-photo-dropzone__description\">\n <ContextualWarningCircleFilledIcon color=\"red\" />\n {errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)}\n </div>\n )}\n {isLoading && (\n <div className=\"cobalt-photo-dropzone__description\">\n <LoadingIcon />\n </div>\n )}\n {!isLoading &&\n !isErrored &&\n (imagePreviewUrl ? (\n <>\n <img\n className=\"cobalt-photo-dropzone__preview\"\n src={imagePreviewUrl}\n />\n <div>\n <button\n className={cx(\"cobalt-photo-dropzone__delete-button\", {\n \"cobalt-photo-dropzone__delete-button--triggered\":\n displayDeletion,\n })}\n ref={deleteButtonRef}\n // Must follow the click listeners on the dropzone,\n // in order to have the correct events bubbling\n onTouchEnd={onDeleteButtonClick}\n onMouseUp={onDeleteButtonClick}\n onKeyUp={onDeleteKey}\n >\n <VisuallyHidden>Delete</VisuallyHidden>\n <BinIcon color=\"indigo\" />\n </button>\n <Popover\n targetRef={deleteButtonRef}\n isOpen={showDeletePopover}\n close={closeDeletePopover}\n placement=\"left-start\"\n distance={12}\n bodySpacing={false}\n arrow\n >\n {deletePopoverContent(onDelete, closeDeletePopover)}\n </Popover>\n </div>\n </>\n ) : (\n <div className=\"cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong\">\n <p>{description}</p>\n <PlusIcon />\n </div>\n ))}\n <VisuallyHidden>\n <input\n ref={fileInputRef}\n type=\"file\"\n onChange={onFileInputChanged}\n accept={ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(\",\")}\n multiple={false}\n />\n </VisuallyHidden>\n </div>\n )\n}\n\nexport default PhotoDropzone\n"],"names":[],"mappings":"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"}

package/components/Popover/index.js CHANGED Viewed

@@ -49,7 +49,7 @@ var Popover = function (_a) {
             onShow();
     };
     var TippyComp = lazy ? LazyTippy : Tippy;
-    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, __assign({ content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children) }, defaultTippyProps, { visible: isOpen, reference: targetRef, theme: defaultTippyProps.theme + " " + theme, offset: [0, distance] }, { arrow: arrow, placement: placement, zIndex: zIndex }, { onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close })));
+    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, __assign({ content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children) }, defaultTippyProps, { visible: isOpen, reference: targetRef, theme: "".concat(defaultTippyProps.theme, " ").concat(theme), offset: [0, distance] }, { arrow: arrow, placement: placement, zIndex: zIndex }, { onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close })));
 };
 export { Popover as default };

package/components/Popover/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback, PropsWithChildren } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = PropsWithChildren<{\n isOpen: boolean\n close: () => void\n \"aria-label\"?: string\n bodySpacing?: boolean\n onShow?: () => void\n onHidden?: () => void\n // Desktop props\n targetRef: TippyProps[\"reference\"]\n arrow?: boolean\n placement?: TippyProps[\"placement\"]\n theme?: string\n distance?: number\n zIndex?: number\n /*\n __Only for desktop popover__\n \n Allow to render the content only when the popover is mounted in the DOM\n * Useful to render async content in the popover\n */\n lazy?: boolean\n}>\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" \| \"children\" \| \"visible\"> =\n {\n animation: \"shift-away-subtle\",\n interactive: true,\n interactiveBorder: 10,\n delay: [0, 0],\n duration: [200, 150],\n maxWidth: 500,\n sticky: true,\n plugins: [sticky],\n theme: \"light cobalt-popover\",\n inertia: true,\n }\n\nconst MobilePopover = ({\n isOpen,\n children,\n ariaLabel = \"Popover mobile modal\",\n onDismiss,\n bodySpacing,\n onShow,\n onHidden,\n}: PropsWithChildren<{\n ariaLabel?: ModalPropsType[\"aria-label\"]\n isOpen: ModalPropsType[\"isOpen\"]\n onDismiss?: () => void\n bodySpacing: ModalPropsType[\"bodySpacing\"]\n onShow: ModalPropsType[\"onShow\"]\n onHidden: ModalPropsType[\"onHidden\"]\n}>) => {\n return (\n <Modal\n aria-label={ariaLabel}\n isOpen={isOpen}\n onDismissAttempt={onDismiss}\n bodySpacing={bodySpacing}\n onShow={onShow}\n onHidden={onHidden}\n >\n {children}\n </Modal>\n )\n}\n\nconst Popover = ({\n isOpen,\n targetRef,\n close,\n \"aria-label\": ariaLabel,\n children,\n bodySpacing = true,\n onShow,\n onHidden,\n // Desktop props\n arrow = false,\n placement = \"bottom-start\",\n theme = \"\",\n distance = 8,\n zIndex = zIndexes.dropdown,\n lazy,\n}: PopoverPropsType) => {\n const { breakpoint } = useBreakpoint()\n const isMobile = breakpoint === \"sm\" \|\| breakpoint === \"xs\"\n\n const escListener = useCallback(\n (event: KeyboardEvent) => {\n if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n },\n [isOpen, close]\n )\n\n useEffect(() => {\n window.addEventListener(\"keydown\", escListener)\n\n return () => window.removeEventListener(\"keydown\", escListener)\n }, [escListener])\n\n const onTippyClose = () => {\n if (onHidden) onHidden()\n }\n\n const onTippyOpen = () => {\n if (onShow) onShow()\n }\n\n const TippyComp = lazy ? LazyTippy : Tippy\n\n return isMobile ? (\n <MobilePopover\n isOpen={isOpen}\n onDismiss={close}\n bodySpacing={bodySpacing}\n ariaLabel={ariaLabel}\n onShow={onShow}\n onHidden={onHidden}\n >\n {children}\n </MobilePopover>\n ) : (\n <TippyComp\n content={\n bodySpacing ? (\n <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n ) : (\n children\n )\n }\n {...defaultTippyProps}\n visible={isOpen}\n reference={targetRef}\n theme={`${defaultTippyProps.theme} ${theme}`}\n offset={[0, distance]}\n {...{ arrow, placement, zIndex }}\n onHidden={onTippyClose}\n onShow={onTippyOpen}\n onClickOutside={close}\n />\n )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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~~EAAK~~,iBAAiB,CAAC,KAAK,~~SAAI~~,~~KAAO~~,EAC5C,MAAM,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,IACjB,EAAE,KAAK,OAAA,EAAE,SAAS,WAAA,EAAE,MAAM,QAAA,EAAE,IAChC,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,WAAW,EACnB,cAAc,EAAE,KAAK,IACrB,CACH,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback, PropsWithChildren } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = PropsWithChildren<{\n isOpen: boolean\n close: () => void\n \"aria-label\"?: string\n bodySpacing?: boolean\n onShow?: () => void\n onHidden?: () => void\n // Desktop props\n targetRef: TippyProps[\"reference\"]\n arrow?: boolean\n placement?: TippyProps[\"placement\"]\n theme?: string\n distance?: number\n zIndex?: number\n /*\n __Only for desktop popover__\n \n Allow to render the content only when the popover is mounted in the DOM\n * Useful to render async content in the popover\n */\n lazy?: boolean\n}>\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" \| \"children\" \| \"visible\"> =\n {\n animation: \"shift-away-subtle\",\n interactive: true,\n interactiveBorder: 10,\n delay: [0, 0],\n duration: [200, 150],\n maxWidth: 500,\n sticky: true,\n plugins: [sticky],\n theme: \"light cobalt-popover\",\n inertia: true,\n }\n\nconst MobilePopover = ({\n isOpen,\n children,\n ariaLabel = \"Popover mobile modal\",\n onDismiss,\n bodySpacing,\n onShow,\n onHidden,\n}: PropsWithChildren<{\n ariaLabel?: ModalPropsType[\"aria-label\"]\n isOpen: ModalPropsType[\"isOpen\"]\n onDismiss?: () => void\n bodySpacing: ModalPropsType[\"bodySpacing\"]\n onShow: ModalPropsType[\"onShow\"]\n onHidden: ModalPropsType[\"onHidden\"]\n}>) => {\n return (\n <Modal\n aria-label={ariaLabel}\n isOpen={isOpen}\n onDismissAttempt={onDismiss}\n bodySpacing={bodySpacing}\n onShow={onShow}\n onHidden={onHidden}\n >\n {children}\n </Modal>\n )\n}\n\nconst Popover = ({\n isOpen,\n targetRef,\n close,\n \"aria-label\": ariaLabel,\n children,\n bodySpacing = true,\n onShow,\n onHidden,\n // Desktop props\n arrow = false,\n placement = \"bottom-start\",\n theme = \"\",\n distance = 8,\n zIndex = zIndexes.dropdown,\n lazy,\n}: PopoverPropsType) => {\n const { breakpoint } = useBreakpoint()\n const isMobile = breakpoint === \"sm\" \|\| breakpoint === \"xs\"\n\n const escListener = useCallback(\n (event: KeyboardEvent) => {\n if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n },\n [isOpen, close]\n )\n\n useEffect(() => {\n window.addEventListener(\"keydown\", escListener)\n\n return () => window.removeEventListener(\"keydown\", escListener)\n }, [escListener])\n\n const onTippyClose = () => {\n if (onHidden) onHidden()\n }\n\n const onTippyOpen = () => {\n if (onShow) onShow()\n }\n\n const TippyComp = lazy ? LazyTippy : Tippy\n\n return isMobile ? (\n <MobilePopover\n isOpen={isOpen}\n onDismiss={close}\n bodySpacing={bodySpacing}\n ariaLabel={ariaLabel}\n onShow={onShow}\n onHidden={onHidden}\n >\n {children}\n </MobilePopover>\n ) : (\n <TippyComp\n content={\n bodySpacing ? (\n <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n ) : (\n children\n )\n }\n {...defaultTippyProps}\n visible={isOpen}\n reference={targetRef}\n theme={`${defaultTippyProps.theme} ${theme}`}\n offset={[0, distance]}\n {...{ arrow, placement, zIndex }}\n onHidden={onTippyClose}\n onShow={onTippyOpen}\n onClickOutside={close}\n />\n )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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"}