npm - @drivy/cobalt - Versions diffs - 1.5.0 → 2.0.0-beta.2 - Mend

@drivy/cobalt 1.5.0 → 2.0.0-beta.2

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 (733) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChevronRightIcon.js","sources":["../../../../src/components/Icon/__generated__/ChevronRightIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"chevronRight\"\nconst ChevronRightIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z\"\n />\n </svg>\n )\n}\nexport default ChevronRightIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,cAAc,CAAA;AACjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,wDAAwD,EAC1D,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ChevronRightIcon.js","sources":["../../../../src/components/Icon/__generated__/ChevronRightIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"chevronRight\"\nconst ChevronRightIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z\"\n />\n </svg>\n )\n}\nexport default ChevronRightIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,cAAc,CAAA;AACjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,wDAAwD,EAC1D,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "chevronUp";
 const ChevronUpIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChevronUpIcon.js","sources":["../../../../src/components/Icon/__generated__/ChevronUpIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"chevronUp\"\nconst ChevronUpIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.41 16 12 11.41 16.59 16 18 14.58l-6-6-6 6L7.41 16Z\"\n />\n </svg>\n )\n}\nexport default ChevronUpIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,WAAW,CAAA;AAC9B,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uDAAuD,EACzD,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ChevronUpIcon.js","sources":["../../../../src/components/Icon/__generated__/ChevronUpIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"chevronUp\"\nconst ChevronUpIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.41 16 12 11.41 16.59 16 18 14.58l-6-6-6 6L7.41 16Z\"\n />\n </svg>\n )\n}\nexport default ChevronUpIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,WAAW,CAAA;AAC9B,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uDAAuD,EACzD,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "circledArrowLeft";
 const CircledArrowLeftIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CircledArrowLeftIcon.js","sources":["../../../../src/components/Icon/__generated__/CircledArrowLeftIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"circledArrowLeft\"\nconst CircledArrowLeftIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M12.957 16.543 9.414 13H18v-2H9.414l3.543-3.543-1.414-1.414L5.586 12l5.957 5.957z\" />\n <path\n fillRule=\"evenodd\"\n d=\"M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m2 0a9 9 0 1 1 18 0 9 9 0 0 1-18 0\"\n clipRule=\"evenodd\"\n />\n </svg>\n )\n}\nexport default CircledArrowLeftIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,kBAAkB,CAAA;AACrC,MAAM,oBAAoB,GAAG,CAAC,EAC5B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;QACzD,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,mFAAmF,EAAG,CAAA;AAC9F,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0GAA0G,EAC5G,QAAQ,EAAC,SAAS,EAClB,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"CircledArrowLeftIcon.js","sources":["../../../../src/components/Icon/__generated__/CircledArrowLeftIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"circledArrowLeft\"\nconst CircledArrowLeftIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M12.957 16.543 9.414 13H18v-2H9.414l3.543-3.543-1.414-1.414L5.586 12l5.957 5.957z\" />\n <path\n fillRule=\"evenodd\"\n d=\"M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m2 0a9 9 0 1 1 18 0 9 9 0 0 1-18 0\"\n clipRule=\"evenodd\"\n />\n </svg>\n )\n}\nexport default CircledArrowLeftIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,kBAAkB,CAAA;AACrC,MAAM,oBAAoB,GAAG,CAAC,EAC5B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;QACzD,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,mFAAmF,EAAG,CAAA;AAC9F,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0GAA0G,EAC5G,QAAQ,EAAC,SAAS,EAClB,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "circledArrowRight";
 const CircledArrowRightIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CircledArrowRightIcon.js","sources":["../../../../src/components/Icon/__generated__/CircledArrowRightIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"circledArrowRight\"\nconst CircledArrowRightIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.043 7.457 14.586 11H6v2h8.586l-3.543 3.543 1.414 1.414L18.414 12l-5.957-5.957-1.414 1.414Z\" />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11Zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"\n />\n </svg>\n )\n}\nexport default CircledArrowRightIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,mBAAmB,CAAA;AACtC,MAAM,qBAAqB,GAAG,CAAC,EAC7B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;QACzD,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gGAAgG,EAAG,CAAA;AAC3G,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8GAA8G,EAChH,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"CircledArrowRightIcon.js","sources":["../../../../src/components/Icon/__generated__/CircledArrowRightIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"circledArrowRight\"\nconst CircledArrowRightIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.043 7.457 14.586 11H6v2h8.586l-3.543 3.543 1.414 1.414L18.414 12l-5.957-5.957-1.414 1.414Z\" />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11Zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"\n />\n </svg>\n )\n}\nexport default CircledArrowRightIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,mBAAmB,CAAA;AACtC,MAAM,qBAAqB,GAAG,CAAC,EAC7B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;QACzD,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gGAAgG,EAAG,CAAA;AAC3G,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8GAA8G,EAChH,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "city";
 const CityIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CityIcon.js","sources":["../../../../src/components/Icon/__generated__/CityIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"city\"\nconst CityIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16 6H6l-5 6v3h2a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2v-3c0-1.11-.89-2-2-2h-2l-3-4ZM6.5 7.5h4V10h-6l2-2.5Zm5.5 0h3.5l1.96 2.5H12V7.5Zm-6 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm12 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z\" />\n </svg>\n )\n}\nexport default CityIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,MAAM,CAAA;AACzB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,qNAAqN,EAAG,CAAA,CAC5N,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"CityIcon.js","sources":["../../../../src/components/Icon/__generated__/CityIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"city\"\nconst CityIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16 6H6l-5 6v3h2a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2v-3c0-1.11-.89-2-2-2h-2l-3-4ZM6.5 7.5h4V10h-6l2-2.5Zm5.5 0h3.5l1.96 2.5H12V7.5Zm-6 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm12 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z\" />\n </svg>\n )\n}\nexport default CityIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,MAAM,CAAA;AACzB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,qNAAqN,EAAG,CAAA,CAC5N,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "cleaning";
 const CleaningIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CleaningIcon.js","sources":["../../../../src/components/Icon/__generated__/CleaningIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"cleaning\"\nconst CleaningIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 11.4c-1.657 0-3-1.347-3-3.009C3 6.385 6 3 6 3s3 3.385 3 5.391A3.004 3.004 0 0 1 6 11.4Zm12 0c-1.657 0-3-1.347-3-3.009C15 6.385 18 3 18 3s3 3.385 3 5.391a3.004 3.004 0 0 1-3 3.009Zm-6 10c-1.657 0-3-1.347-3-3.009C9 16.385 12 13 12 13s3 3.385 3 5.391a3.004 3.004 0 0 1-3 3.009Z\"\n />\n </svg>\n )\n}\nexport default CleaningIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uRAAuR,EACzR,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"CleaningIcon.js","sources":["../../../../src/components/Icon/__generated__/CleaningIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"cleaning\"\nconst CleaningIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 11.4c-1.657 0-3-1.347-3-3.009C3 6.385 6 3 6 3s3 3.385 3 5.391A3.004 3.004 0 0 1 6 11.4Zm12 0c-1.657 0-3-1.347-3-3.009C15 6.385 18 3 18 3s3 3.385 3 5.391a3.004 3.004 0 0 1-3 3.009Zm-6 10c-1.657 0-3-1.347-3-3.009C9 16.385 12 13 12 13s3 3.385 3 5.391a3.004 3.004 0 0 1-3 3.009Z\"\n />\n </svg>\n )\n}\nexport default CleaningIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uRAAuR,EACzR,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "clockAlert";
 const ClockAlertIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ClockAlertIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockAlertIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clockAlert\"\nconst ClockAlertIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\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}\nexport default ClockAlertIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0OAA0O,EAC5O,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ClockAlertIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockAlertIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clockAlert\"\nconst ClockAlertIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\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}\nexport default ClockAlertIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0OAA0O,EAC5O,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "clockBackwards";
 const ClockBackwardsIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ClockBackwardsIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockBackwardsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clockBackwards\"\nconst ClockBackwardsIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6a7 7 0 1 1 7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.896 8.896 0 0 0 13 21a9 9 0 1 0 0-18Zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12Z\"\n />\n </svg>\n )\n}\nexport default ClockBackwardsIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,gBAAgB,CAAA;AACnC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,kLAAkL,EACpL,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ClockBackwardsIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockBackwardsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clockBackwards\"\nconst ClockBackwardsIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6a7 7 0 1 1 7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.896 8.896 0 0 0 13 21a9 9 0 1 0 0-18Zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12Z\"\n />\n </svg>\n )\n}\nexport default ClockBackwardsIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,gBAAgB,CAAA;AACnC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,kLAAkL,EACpL,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "clockForwards";
 const ClockForwardsIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ClockForwardsIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockForwardsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clockForwards\"\nconst ClockForwardsIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 0 0 0 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 0 1 12.65 0L21 3v7.12ZM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5Z\"\n />\n </svg>\n )\n}\nexport default ClockForwardsIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,eAAe,CAAA;AAClC,MAAM,iBAAiB,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ySAAyS,EAC3S,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ClockForwardsIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockForwardsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clockForwards\"\nconst ClockForwardsIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 0 0 0 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 0 1 12.65 0L21 3v7.12ZM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5Z\"\n />\n </svg>\n )\n}\nexport default ClockForwardsIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,eAAe,CAAA;AAClC,MAAM,iBAAiB,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ySAAyS,EAC3S,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "clock";
 const ClockIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ClockIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clock\"\nconst ClockIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-18a10 10 0 0 1 0 20C6.47 22 2 17.5 2 12 2 6.477 6.477 2 12 2Zm.5 5v5.25l4.5 2.67-.75 1.23L11 13V7h1.5Z\"\n />\n </svg>\n )\n}\nexport default ClockIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,OAAO,CAAA;AAC1B,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gJAAgJ,EAClJ,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ClockIcon.js","sources":["../../../../src/components/Icon/__generated__/ClockIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"clock\"\nconst ClockIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-18a10 10 0 0 1 0 20C6.47 22 2 17.5 2 12 2 6.477 6.477 2 12 2Zm.5 5v5.25l4.5 2.67-.75 1.23L11 13V7h1.5Z\"\n />\n </svg>\n )\n}\nexport default ClockIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,OAAO,CAAA;AAC1B,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gJAAgJ,EAClJ,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "closeCircleFilled";
 const CloseCircleFilledIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseCircleFilledIcon.js","sources":["../../../../src/components/Icon/__generated__/CloseCircleFilledIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"closeCircleFilled\"\nconst CloseCircleFilledIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-5.022-2.8-2.829 2.828 2.829 2.829a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-2.829-2.829L9.2 16.979a1 1 0 0 1-1.414 0l-.708-.707a1 1 0 0 1 0-1.414l2.829-2.829L7.078 9.2a1 1 0 0 1 0-1.414l.708-.708a1 1 0 0 1 1.414 0l2.828 2.829 2.829-2.829a1 1 0 0 1 1.414 0l.707.708a1 1 0 0 1 0 1.414Z\"\n />\n </svg>\n )\n}\nexport default CloseCircleFilledIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,mBAAmB,CAAA;AACtC,MAAM,qBAAqB,GAAG,CAAC,EAC7B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4WAA4W,EAC9W,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"CloseCircleFilledIcon.js","sources":["../../../../src/components/Icon/__generated__/CloseCircleFilledIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"closeCircleFilled\"\nconst CloseCircleFilledIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-5.022-2.8-2.829 2.828 2.829 2.829a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-2.829-2.829L9.2 16.979a1 1 0 0 1-1.414 0l-.708-.707a1 1 0 0 1 0-1.414l2.829-2.829L7.078 9.2a1 1 0 0 1 0-1.414l.708-.708a1 1 0 0 1 1.414 0l2.828 2.829 2.829-2.829a1 1 0 0 1 1.414 0l.707.708a1 1 0 0 1 0 1.414Z\"\n />\n </svg>\n )\n}\nexport default CloseCircleFilledIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,mBAAmB,CAAA;AACtC,MAAM,qBAAqB,GAAG,CAAC,EAC7B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4WAA4W,EAC9W,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "close";
 const CloseIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseIcon.js","sources":["../../../../src/components/Icon/__generated__/CloseIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"close\"\nconst CloseIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z\"\n />\n </svg>\n )\n}\nexport default CloseIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,OAAO,CAAA;AAC1B,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+GAA+G,EACjH,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"CloseIcon.js","sources":["../../../../src/components/Icon/__generated__/CloseIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"close\"\nconst CloseIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z\"\n />\n </svg>\n )\n}\nexport default CloseIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,OAAO,CAAA;AAC1B,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+GAA+G,EACjH,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "collapse";
 const CollapseIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CollapseIcon.js","sources":["../../../../src/components/Icon/__generated__/CollapseIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"collapse\"\nconst CollapseIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M3.4 22 2 20.6 8.6 14H4v-2h8v8h-2v-4.6zM12 12V4h2v4.6L20.6 2 22 3.4 15.4 10H20v2z\" />\n </svg>\n )\n}\nexport default CollapseIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,mFAAmF,EAAG,CAAA,CAC1F,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"CollapseIcon.js","sources":["../../../../src/components/Icon/__generated__/CollapseIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"collapse\"\nconst CollapseIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M3.4 22 2 20.6 8.6 14H4v-2h8v8h-2v-4.6zM12 12V4h2v4.6L20.6 2 22 3.4 15.4 10H20v2z\" />\n </svg>\n )\n}\nexport default CollapseIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,mFAAmF,EAAG,CAAA,CAC1F,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "connectCar";
 const ConnectCarIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConnectCarIcon.js","sources":["../../../../src/components/Icon/__generated__/ConnectCarIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"connectCar\"\nconst ConnectCarIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M23.017 6.448A11 11 0 0 0 13 0a1 1 0 1 0 0 2 9 9 0 0 1 8.196 5.276 1 1 0 1 0 1.82-.828Zm-3.643 1.656A7 7 0 0 0 13 4a1 1 0 1 0 0 2 5 5 0 0 1 4.554 2.932 1 1 0 0 0 1.82-.828Zm-2.635 3.919A1.5 1.5 0 1 1 17 15h-.005c.005.35.005.686.005 1v4.997A1 1 0 0 1 15.99 22h-1.98A1 1 0 0 1 13 20.997V20H6v.997A1 1 0 0 1 4.99 22H3.01A1 1 0 0 1 2 20.997V16c0-.314 0-.65.005-1H2a1.5 1.5 0 1 1 .261-2.977C2.674 9.878 3.742 8 6.5 8h6c2.758 0 3.826 1.878 4.239 4.023Zm-1.834 1.284C14.662 10.927 14.018 10 12.5 10h-6c-1.517 0-2.16.928-2.406 3.307a15.38 15.38 0 0 0-.056.693h10.924c-.014-.236-.032-.46-.056-.693ZM6.25 17a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 18.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z\"\n />\n </svg>\n )\n}\nexport default ConnectCarIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0rBAA0rB,EAC5rB,CAAA,CACE,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ConnectCarIcon.js","sources":["../../../../src/components/Icon/__generated__/ConnectCarIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"connectCar\"\nconst ConnectCarIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M23.017 6.448A11 11 0 0 0 13 0a1 1 0 1 0 0 2 9 9 0 0 1 8.196 5.276 1 1 0 1 0 1.82-.828Zm-3.643 1.656A7 7 0 0 0 13 4a1 1 0 1 0 0 2 5 5 0 0 1 4.554 2.932 1 1 0 0 0 1.82-.828Zm-2.635 3.919A1.5 1.5 0 1 1 17 15h-.005c.005.35.005.686.005 1v4.997A1 1 0 0 1 15.99 22h-1.98A1 1 0 0 1 13 20.997V20H6v.997A1 1 0 0 1 4.99 22H3.01A1 1 0 0 1 2 20.997V16c0-.314 0-.65.005-1H2a1.5 1.5 0 1 1 .261-2.977C2.674 9.878 3.742 8 6.5 8h6c2.758 0 3.826 1.878 4.239 4.023Zm-1.834 1.284C14.662 10.927 14.018 10 12.5 10h-6c-1.517 0-2.16.928-2.406 3.307a15.38 15.38 0 0 0-.056.693h10.924c-.014-.236-.032-.46-.056-.693ZM6.25 17a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 18.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z\"\n />\n </svg>\n )\n}\nexport default ConnectCarIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0rBAA0rB,EAC5rB,CAAA,CACE,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "contactMail";
 const ContactMailIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactMailIcon.js","sources":["../../../../src/components/Icon/__generated__/ContactMailIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contactMail\"\nconst ContactMailIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M20,8 L12,13 L4,8 L4,6 L12,11 L20,6 L20,8 Z M20,4 L4,4 C2.89,4 2,4.89 2,6 L2,18 C2,19.1045695 2.8954305,20 4,20 L20,20 C21.1045695,20 22,19.1045695 22,18 L22,6 C22,4.89 21.1,4 20,4 Z\" />\n </svg>\n )\n}\nexport default ContactMailIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,aAAa,CAAA;AAChC,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wLAAwL,EAAG,CAAA,CAC/L,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ContactMailIcon.js","sources":["../../../../src/components/Icon/__generated__/ContactMailIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contactMail\"\nconst ContactMailIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M20,8 L12,13 L4,8 L4,6 L12,11 L20,6 L20,8 Z M20,4 L4,4 C2.89,4 2,4.89 2,6 L2,18 C2,19.1045695 2.8954305,20 4,20 L20,20 C21.1045695,20 22,19.1045695 22,18 L22,6 C22,4.89 21.1,4 20,4 Z\" />\n </svg>\n )\n}\nexport default ContactMailIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,aAAa,CAAA;AAChC,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wLAAwL,EAAG,CAAA,CAC/L,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "contactPhone";
 const ContactPhoneIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactPhoneIcon.js","sources":["../../../../src/components/Icon/__generated__/ContactPhoneIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contactPhone\"\nconst ContactPhoneIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"m22 17.7954545c0 .2556819-.0473485.5894887-.1420455 1.0014205-.0946969.4119318-.1941287.7362689-.2982954.9730114-.1988636.4734848-.7765152.9753788-1.7329546 1.5056818-.8901515.4829545-1.7708333.7244318-2.6420454.7244318-.2556818 0-.5042614-.016572-.7457386-.0497159-.2414773-.0331439-.5137311-.0923296-.8167614-.1775568-.3030303-.0852273-.5279356-.1538826-.6747159-.2059659-.1467803-.0520834-.4095644-.1491478-.7883523-.2911932-.3787879-.1420455-.6107954-.2272727-.6960227-.2556818-.9280303-.3314394-1.7566288-.7244319-2.4857955-1.1789773-1.21212118-.7481061-2.46448861-1.7684659-3.75710225-3.0610796-1.29261363-1.2926136-2.31297348-2.544981-3.06107954-3.7571022-.45454546-.7291667-.84753788-1.5577652-1.17897727-2.4857955-.02840909-.0852273-.11363637-.3172348-.25568182-.69602271-.14204546-.37878788-.23910985-.64157197-.29119318-.78835227-.05208334-.1467803-.12073864-.37168561-.20596591-.67471591-.08522728-.3030303-.14441288-.57528409-.17755682-.81676136-.03314394-.24147728-.04971591-.49005682-.04971591-.74573864 0-.87121212.24147727-1.75189394.72443182-2.64204546.53030303-.95643939 1.03219697-1.5340909 1.50568182-1.73295454.23674242-.10416667.56107954-.20359849.97301136-.29829546s.74573864-.14204545 1.00142045-.14204545c.13257576 0 .23200758.01420455.29829546.04261364.17045454.05681818.42140151.41666666.75284091 1.07954545.10416666.17992424.24621212.43560606.42613636.76704546.17992424.33143939.34564394.63210227.49715909.90198863.15151515.26988637.29829546.52320076.44034091.75994318.02840909.03787879.11126894.15625.24857955.35511364.1373106.19886364.23910985.36695076.30539772.50426136.06628788.13731061.09943182.27225379.09943182.40482955 0 .18939394-.13494318.42613636-.40482954.71022727-.26988637.28409091-.56344697.54450758-.88068182.78125-.31723485.23674243-.61079546.4876894-.88068182.75284091-.26988636.26515152-.40482954.48295455-.40482954.65340909 0 .08522727.02367424.19176137.07102272.31960232.04734849.1278409.0875947.2249053.12073864.2911931.03314394.0662879.09943182.1799243.19886364.3409091.09943181.1609849.15388257.250947.16335227.2698864.71969697 1.2973485 1.5435606 2.4100379 2.47159091 3.3380682.92803027.9280303 2.04071967 1.7518939 3.33806817 2.4715909.0189394.0094697.1089015.0639204.2698864.1633523.1609848.0994318.2746212.1657197.3409091.1988636.0662878.0331439.1633522.0733901.2911931.1207386.127841.0473485.234375.0710228.3196023.0710228.1704546 0 .3882576-.1349432.6534091-.4048296s.5160985-.563447.7528409-.8806818c.2367424-.3172349.4971591-.6107955.78125-.8806818.2840909-.2698864.5208334-.4048296.7102273-.4048296.1325757 0 .2675189.033144.4048295.0994318.1373106.0662879.3053978.1680872.5042614.3053978s.3172348.2201704.3551136.2485795c.2367425.1420455.4900569.2888258.7599432.4403409.2698864.1515152.5705493.3172349.9019887.4971591.3314393.1799243.5871212.3219697.7670454.4261364.6628788.3314394 1.0227273.5823863 1.0795455.7528409.0284091.0662879.0426136.1657197.0426136.2982954z\" />\n </svg>\n )\n}\nexport default ContactPhoneIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,cAAc,CAAA;AACjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,m3FAAm3F,EAAG,CAAA,CAC13F,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ContactPhoneIcon.js","sources":["../../../../src/components/Icon/__generated__/ContactPhoneIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contactPhone\"\nconst ContactPhoneIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"m22 17.7954545c0 .2556819-.0473485.5894887-.1420455 1.0014205-.0946969.4119318-.1941287.7362689-.2982954.9730114-.1988636.4734848-.7765152.9753788-1.7329546 1.5056818-.8901515.4829545-1.7708333.7244318-2.6420454.7244318-.2556818 0-.5042614-.016572-.7457386-.0497159-.2414773-.0331439-.5137311-.0923296-.8167614-.1775568-.3030303-.0852273-.5279356-.1538826-.6747159-.2059659-.1467803-.0520834-.4095644-.1491478-.7883523-.2911932-.3787879-.1420455-.6107954-.2272727-.6960227-.2556818-.9280303-.3314394-1.7566288-.7244319-2.4857955-1.1789773-1.21212118-.7481061-2.46448861-1.7684659-3.75710225-3.0610796-1.29261363-1.2926136-2.31297348-2.544981-3.06107954-3.7571022-.45454546-.7291667-.84753788-1.5577652-1.17897727-2.4857955-.02840909-.0852273-.11363637-.3172348-.25568182-.69602271-.14204546-.37878788-.23910985-.64157197-.29119318-.78835227-.05208334-.1467803-.12073864-.37168561-.20596591-.67471591-.08522728-.3030303-.14441288-.57528409-.17755682-.81676136-.03314394-.24147728-.04971591-.49005682-.04971591-.74573864 0-.87121212.24147727-1.75189394.72443182-2.64204546.53030303-.95643939 1.03219697-1.5340909 1.50568182-1.73295454.23674242-.10416667.56107954-.20359849.97301136-.29829546s.74573864-.14204545 1.00142045-.14204545c.13257576 0 .23200758.01420455.29829546.04261364.17045454.05681818.42140151.41666666.75284091 1.07954545.10416666.17992424.24621212.43560606.42613636.76704546.17992424.33143939.34564394.63210227.49715909.90198863.15151515.26988637.29829546.52320076.44034091.75994318.02840909.03787879.11126894.15625.24857955.35511364.1373106.19886364.23910985.36695076.30539772.50426136.06628788.13731061.09943182.27225379.09943182.40482955 0 .18939394-.13494318.42613636-.40482954.71022727-.26988637.28409091-.56344697.54450758-.88068182.78125-.31723485.23674243-.61079546.4876894-.88068182.75284091-.26988636.26515152-.40482954.48295455-.40482954.65340909 0 .08522727.02367424.19176137.07102272.31960232.04734849.1278409.0875947.2249053.12073864.2911931.03314394.0662879.09943182.1799243.19886364.3409091.09943181.1609849.15388257.250947.16335227.2698864.71969697 1.2973485 1.5435606 2.4100379 2.47159091 3.3380682.92803027.9280303 2.04071967 1.7518939 3.33806817 2.4715909.0189394.0094697.1089015.0639204.2698864.1633523.1609848.0994318.2746212.1657197.3409091.1988636.0662878.0331439.1633522.0733901.2911931.1207386.127841.0473485.234375.0710228.3196023.0710228.1704546 0 .3882576-.1349432.6534091-.4048296s.5160985-.563447.7528409-.8806818c.2367424-.3172349.4971591-.6107955.78125-.8806818.2840909-.2698864.5208334-.4048296.7102273-.4048296.1325757 0 .2675189.033144.4048295.0994318.1373106.0662879.3053978.1680872.5042614.3053978s.3172348.2201704.3551136.2485795c.2367425.1420455.4900569.2888258.7599432.4403409.2698864.1515152.5705493.3172349.9019887.4971591.3314393.1799243.5871212.3219697.7670454.4261364.6628788.3314394 1.0227273.5823863 1.0795455.7528409.0284091.0662879.0426136.1657197.0426136.2982954z\" />\n </svg>\n )\n}\nexport default ContactPhoneIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,cAAc,CAAA;AACjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,m3FAAm3F,EAAG,CAAA,CAC13F,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "contextualPaperclip";
 const ContextualPaperclipIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextualPaperclipIcon.js","sources":["../../../../src/components/Icon/__generated__/ContextualPaperclipIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contextualPaperclip\"\nconst ContextualPaperclipIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.832 13.652c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z\" />\n </svg>\n )\n}\nexport default ContextualPaperclipIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,qBAAqB,CAAA;AACxC,MAAM,uBAAuB,GAAG,CAAC,EAC/B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,giBAAgiB,EAAG,CAAA,CACviB,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ContextualPaperclipIcon.js","sources":["../../../../src/components/Icon/__generated__/ContextualPaperclipIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contextualPaperclip\"\nconst ContextualPaperclipIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.832 13.652c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z\" />\n </svg>\n )\n}\nexport default ContextualPaperclipIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,qBAAqB,CAAA;AACxC,MAAM,uBAAuB,GAAG,CAAC,EAC/B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,giBAAgiB,EAAG,CAAA,CACviB,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "contextualQuestion";
 const ContextualQuestionIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextualQuestionIcon.js","sources":["../../../../src/components/Icon/__generated__/ContextualQuestionIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { ~~capitalize~~ } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contextualQuestion\"\nconst ContextualQuestionIcon = ({\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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M13,18 L13,16 L11,16 L11,18 L13,18 Z M15.07,10.625 C15.64,10.112 16,9.392 16,8.6 C16,6.611 14.21,5 12,5 C9.79,5 8,6.611 8,8.6 L10,8.6 C10,7.61 10.9,6.8 12,6.8 C13.1,6.8 14,7.61 14,8.6 C14,9.095 13.78,9.545 13.41,9.869 L12.17,11.003 C11.45,11.66 11,12.56 11,13.55 L11,14 L13,14 C13,12.65 13.45,12.11 14.17,11.453 L15.07,10.625 Z\" />\n </svg>\n )\n}\nexport default ContextualQuestionIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,oBAAoB,CAAA;AACvC,MAAM,sBAAsB,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,~~kBAAA~~,~~EAAqB~~,~~UAAU~~,CAAC,KAAK,CAAC,CAAE,~~CAAA,~~GAAG,KAAK;~~QACjD~~,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,odAAod,EAAG,CAAA,CAC3d,CACP,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ContextualQuestionIcon.js","sources":["../../../../src/components/Icon/__generated__/ContextualQuestionIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColorsType\n size?: 16 \| 20 \| 24 \| 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"contextualQuestion\"\nconst ContextualQuestionIcon = ({\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 [`c-fill-${camelize(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 const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n return wrap(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M13,18 L13,16 L11,16 L11,18 L13,18 Z M15.07,10.625 C15.64,10.112 16,9.392 16,8.6 C16,6.611 14.21,5 12,5 C9.79,5 8,6.611 8,8.6 L10,8.6 C10,7.61 10.9,6.8 12,6.8 C13.1,6.8 14,7.61 14,8.6 C14,9.095 13.78,9.545 13.41,9.869 L12.17,11.003 C11.45,11.66 11,12.56 11,13.55 L11,14 L13,14 C13,12.65 13.45,12.11 14.17,11.453 L15.07,10.625 Z\" />\n </svg>\n )\n}\nexport default ContextualQuestionIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,oBAAoB,CAAA;AACvC,MAAM,sBAAsB,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,odAAod,EAAG,CAAA,CAC3d,CACP,CAAA;AACH;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 const iconSource = "contextualWarningCircleFilled";
 const ContextualWarningCircleFilledIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,