@drivy/cobalt 1.5.0 → 2.0.0-beta.1

package/components/Icon/__generated__/YingyangIcon.js

@@ -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 = "yingyang";
 const YingyangIcon = ({ 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__/YingyangIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"YingyangIcon.js","sources":["../../../../src/components/Icon/__generated__/YingyangIcon.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 = \"yingyang\"\nconst YingyangIcon = ({\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=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2 2 6.477 2 12Zm18.5 0a8.494 8.494 0 0 0-4.022-7.226A5 5 0 0 1 12 12a5 5 0 0 0-4.478 7.226A8.5 8.5 0 0 0 20.5 12Zm-8-3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-1 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"\n      />\n    </svg>\n  )\n}\nexport default YingyangIcon\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,+PAA+P,EACjQ,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"YingyangIcon.js","sources":["../../../../src/components/Icon/__generated__/YingyangIcon.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 = \"yingyang\"\nconst YingyangIcon = ({\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=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2 2 6.477 2 12Zm18.5 0a8.494 8.494 0 0 0-4.022-7.226A5 5 0 0 1 12 12a5 5 0 0 0-4.478 7.226A8.5 8.5 0 0 0 20.5 12Zm-8-3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-1 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"\n      />\n    </svg>\n  )\n}\nexport default YingyangIcon\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,+PAA+P,EACjQ,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { icons, theme } from '../../tokens/index.js';
 import * as index from '../../icons/index.js';
-import capitalize from '../utils/capitalize.js';
+import camelize from '../utils/camelize.js';
 import eqSet from '../utils/eqSet.js';
 import 'lodash.throttle';
 
@@ -12,35 +12,11 @@ const BUNDLED_ICONS = Object.freeze(Object.keys(icons.icons).reduce((bundledIcon
     ...bundledIcons,
     [name]: index[name],
 }), {}));
-const iconLegacyColorsOptions = [
-    "amber",
-    "blue",
-    "coral",
-    "graphite",
-    "graphiteLight",
-    "green",
-    "greenDark",
-    "greenLight",
-    "grey",
-    "greyDark",
-    "greyLight",
-    "greyLighter",
-    "indigo",
-    "indigoDark",
-    "purple",
-    "purpleLight",
-    "red",
-    "turquoise",
-    "white",
-];
-const iconColors = [
-    ...Object.keys(theme.icon),
-    ...iconLegacyColorsOptions,
-];
+const iconColors = [...Object.keys(theme)];
 const isIconSource = (source) => Object.keys(icons.icons).includes(source);
 const Icon = ({ source, color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${source}`, {
-        [`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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { icons as iconTokens, theme } from \"../../tokens\"\n\nimport * as icons from \"../../icons\"\nimport { eqSet, capitalize } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(icons)),\n    new Set(Object.keys(iconTokens.icons))\n  )\n)\n  throw new Error(\n    \"Icon sources and tokens are not consistent. Did you add the source, export it and run 'pnpm run icons:update'\"\n  )\n\ninterface IconsMap {\n  [name: string]: string | undefined\n}\n\nexport const BUNDLED_ICONS: IconsMap = Object.freeze(\n  Object.keys(iconTokens.icons).reduce(\n    (bundledIcons, name) => ({\n      ...bundledIcons,\n      [name]: (icons as IconsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport type IconSources = keyof typeof iconTokens.icons\n\nconst iconLegacyColorsOptions = [\n  \"amber\",\n  \"blue\",\n  \"coral\",\n  \"graphite\",\n  \"graphiteLight\",\n  \"green\",\n  \"greenDark\",\n  \"greenLight\",\n  \"grey\",\n  \"greyDark\",\n  \"greyLight\",\n  \"greyLighter\",\n  \"indigo\",\n  \"indigoDark\",\n  \"purple\",\n  \"purpleLight\",\n  \"red\",\n  \"turquoise\",\n  \"white\",\n] as const\n\nexport const iconColors = [\n  ...(Object.keys(theme.icon) as Array<keyof typeof theme.icon>),\n  ...iconLegacyColorsOptions,\n]\n\nexport type IconColorsType = (typeof iconColors)[number]\nexport interface IconProps {\n  source: IconSources\n  /**\n   * Available colors\n   * @default base\n   */\n  color?: IconColorsType\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\n\nexport const isIconSource = (source: string): source is IconSources =>\n  Object.keys(iconTokens.icons).includes(source)\n\nexport const Icon = ({\n  source,\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${source}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const iconSource = BUNDLED_ICONS[source]\n\n  if (iconSource == null)\n    throw new Error(\n      `Icon '${source}' can not be found. Did you add the source, export it and run 'pnpm run icons:update'?`\n    )\n\n  return (\n    <span\n      className={computedClassName}\n      dangerouslySetInnerHTML={{ __html: iconSource }}\n    />\n  )\n}\n\nexport * from \"./__generated__/index\"\n\nexport default Icon\n"],"names":["icons","iconTokens"],"mappings":";;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,CACvC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,+GAA+G,CAChH,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAACA,KAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAClC,CAAC,YAAY,EAAE,IAAI,MAAM;AACvB,IAAA,GAAG,YAAY;AACf,IAAA,CAAC,IAAI,GAAID,KAAkB,CAAC,IAAI,CAAC;AAClC,CAAA,CAAC,EACF,EAAE,CACH,EACF;AAID,MAAM,uBAAuB,GAAG;IAC9B,OAAO;IACP,MAAM;IACN,OAAO;IACP,UAAU;IACV,eAAe;IACf,OAAO;IACP,WAAW;IACX,YAAY;IACZ,MAAM;IACN,UAAU;IACV,WAAW;IACX,aAAa;IACb,QAAQ;IACR,YAAY;IACZ,QAAQ;IACR,aAAa;IACb,KAAK;IACL,WAAW;IACX,OAAO;CACC,CAAA;AAEG,MAAA,UAAU,GAAG;AACxB,IAAA,GAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAoC;AAC9D,IAAA,GAAG,uBAAuB;EAC3B;MAmBY,YAAY,GAAG,CAAC,MAAc,KACzC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAC;MAEnC,IAAI,GAAG,CAAC,EACnB,MAAM,EACN,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,MAAM,CAAA,CAAE,EACpC;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;AAED,IAAA,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IAExC,IAAI,UAAU,IAAI,IAAI;AACpB,QAAA,MAAM,IAAI,KAAK,CACb,SAAS,MAAM,CAAA,sFAAA,CAAwF,CACxG,CAAA;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,iBAAiB,EAC5B,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAA,CAC/C,EACH;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { icons as iconTokens, theme } from \"../../tokens\"\n\nimport * as icons from \"../../icons\"\nimport { eqSet, camelize } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(icons)),\n    new Set(Object.keys(iconTokens.icons))\n  )\n)\n  throw new Error(\n    \"Icon sources and tokens are not consistent. Did you add the source, export it and run 'pnpm run icons:update'\"\n  )\n\ninterface IconsMap {\n  [name: string]: string | undefined\n}\n\nexport const BUNDLED_ICONS: IconsMap = Object.freeze(\n  Object.keys(iconTokens.icons).reduce(\n    (bundledIcons, name) => ({\n      ...bundledIcons,\n      [name]: (icons as IconsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport type IconSources = keyof typeof iconTokens.icons\n\nexport const iconColors = [...(Object.keys(theme) as Array<keyof typeof theme>)]\n\nexport type IconColorsType = (typeof iconColors)[number]\nexport interface IconProps {\n  source: IconSources\n  /**\n   * Available colors\n   * @default base\n   */\n  color?: IconColorsType\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\n\nexport const isIconSource = (source: string): source is IconSources =>\n  Object.keys(iconTokens.icons).includes(source)\n\nexport const Icon = ({\n  source,\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${source}`,\n    {\n      [`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\n  const iconSource = BUNDLED_ICONS[source]\n\n  if (iconSource == null)\n    throw new Error(\n      `Icon '${source}' can not be found. Did you add the source, export it and run 'pnpm run icons:update'?`\n    )\n\n  return (\n    <span\n      className={computedClassName}\n      dangerouslySetInnerHTML={{ __html: iconSource }}\n    />\n  )\n}\n\nexport * from \"./__generated__/index\"\n\nexport default Icon\n"],"names":["icons","iconTokens"],"mappings":";;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,CACvC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,+GAA+G,CAChH,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAACA,KAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAClC,CAAC,YAAY,EAAE,IAAI,MAAM;AACvB,IAAA,GAAG,YAAY;AACf,IAAA,CAAC,IAAI,GAAID,KAAkB,CAAC,IAAI,CAAC;AAClC,CAAA,CAAC,EACF,EAAE,CACH,EACF;AAIM,MAAM,UAAU,GAAG,CAAC,GAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAA+B,EAAC;MAmBnE,YAAY,GAAG,CAAC,MAAc,KACzC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAC;MAEnC,IAAI,GAAG,CAAC,EACnB,MAAM,EACN,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,MAAM,CAAA,CAAE,EACpC;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;AAED,IAAA,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IAExC,IAAI,UAAU,IAAI,IAAI;AACpB,QAAA,MAAM,IAAI,KAAK,CACb,SAAS,MAAM,CAAA,sFAAA,CAAwF,CACxG,CAAA;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,iBAAiB,EAC5B,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAA,CAC/C,EACH;AACH;;;;"}

package/components/Modal/ModalHeader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Dialog } from '@ark-ui/react';
-import { Icon } from '../Icon/index.js';
+import '../Icon/index.js';
+import CloseIcon from '../Icon/__generated__/CloseIcon.js';
 
 const ModalHeader = ({ title, close, }) => {
     if (!title && !close)
@@ -9,7 +10,7 @@ const ModalHeader = ({ title, close, }) => {
         React.createElement(Dialog.Title, { className: "cobalt-modal-header__title" }, title),
         close && (React.createElement(Dialog.CloseTrigger, { className: "cobalt-modal-header__close-button" },
             React.createElement("span", { "aria-hidden": true },
-                React.createElement(Icon, { source: "close", color: "subdued" }))))));
+                React.createElement(CloseIcon, { color: "onSurfaceVariant" }))))));
 };
 
 export { ModalHeader as default };

package/components/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport { Dialog } from \"@ark-ui/react\"\n\nimport { Icon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: React.ReactNode\n  close?: () => void\n}) => {\n  if (!title && !close) return null\n\n  return (\n    <div className=\"cobalt-modal-header\">\n      <Dialog.Title className=\"cobalt-modal-header__title\">\n        {title}\n      </Dialog.Title>\n      {close && (\n        <Dialog.CloseTrigger className=\"cobalt-modal-header__close-button\">\n          <span aria-hidden>\n            <Icon source=\"close\" color=\"subdued\" />\n          </span>\n        </Dialog.CloseTrigger>\n      )}\n    </div>\n  )\n}\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;AAKM,MAAA,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,KAAI;AACH,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI,CAAA;AAEjC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA;QAClC,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4BAA4B,EACjD,EAAA,KAAK,CACO;QACd,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,mCAAmC,EAAA;AAChE,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;AACE,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAClC,CACa,CACvB,CACG,EACP;AACH;;;;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport { Dialog } from \"@ark-ui/react\"\n\nimport { CloseIcon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: React.ReactNode\n  close?: () => void\n}) => {\n  if (!title && !close) return null\n\n  return (\n    <div className=\"cobalt-modal-header\">\n      <Dialog.Title className=\"cobalt-modal-header__title\">\n        {title}\n      </Dialog.Title>\n      {close && (\n        <Dialog.CloseTrigger className=\"cobalt-modal-header__close-button\">\n          <span aria-hidden>\n            <CloseIcon color=\"onSurfaceVariant\" />\n          </span>\n        </Dialog.CloseTrigger>\n      )}\n    </div>\n  )\n}\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;;AAKM,MAAA,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,KAAI;AACH,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI,CAAA;AAEjC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA;QAClC,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4BAA4B,EACjD,EAAA,KAAK,CACO;QACd,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,mCAAmC,EAAA;AAChE,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;gBACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,EAAG,CAAA,CACjC,CACa,CACvB,CACG,EACP;AACH;;;;"}

package/components/Pagination/index.js

@@ -61,7 +61,7 @@ const Pagination = ({ onPageChange, currentPage, totalPages, options = {
     const pages = generatePages(currentPage, totalPages, options);
     return (React.createElement("div", { className: "cobalt-pagination" },
         React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: "chevronLeft" }),
-        pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "accent" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
+        pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "primary" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
         React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: "chevronRight" })));
 };
 

package/components/Pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n  currentPage,\n  pageNumber,\n  onPageChange,\n}: {\n  currentPage: number\n  pageNumber: number\n  onPageChange: (page: number) => void\n}) => {\n  const isActive = currentPage === pageNumber\n  return (\n    <DefaultButton\n      className={cx(\"cobalt-pagination__DefaultButton\")}\n      selected={isActive}\n      onClick={() => !isActive && onPageChange(pageNumber)}\n    >\n      {pageNumber}\n    </DefaultButton>\n  )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n  currentPage: number,\n  totalPages: number,\n  options: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  }\n) => {\n  const pages: number[] = []\n  const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n  const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n  if (totalPages <= maxVisiblePages) {\n    // Show all pages\n    for (let i = 1; i <= totalPages; i++) {\n      pages.push(i)\n    }\n    return pages\n  }\n\n  // Calculate dynamic range for middle pages\n  const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n  let startMiddlePage = Math.max(\n    currentPage - Math.floor(middlePagesCount / 2),\n    edgeButtons + 1\n  )\n  let endMiddlePage = Math.min(\n    currentPage + Math.floor(middlePagesCount / 2),\n    totalPages - edgeButtons\n  )\n\n  // Adjust start and end pages if they exceed boundaries\n  if (startMiddlePage === edgeButtons + 1) {\n    endMiddlePage = startMiddlePage + middlePagesCount - 1\n  } else if (endMiddlePage === totalPages - edgeButtons) {\n    startMiddlePage = endMiddlePage - middlePagesCount + 1\n  }\n\n  // Add leading edge buttons\n  for (let i = 1; i <= edgeButtons; i++) {\n    pages.push(i)\n  }\n  if (startMiddlePage > edgeButtons + 1) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n\n  // Add middle pages\n  for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n    pages.push(i)\n  }\n\n  // Add trailing edge buttons\n  if (endMiddlePage < totalPages - edgeButtons) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n  for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n    pages.push(i)\n  }\n\n  return pages\n}\n\n// eslint-disable-next-line complexity\nconst Pagination = ({\n  onPageChange,\n  currentPage,\n  totalPages,\n  options = {\n    maxVisibleLength: 11,\n    edgeVisibleLength: 3,\n  },\n}: {\n  currentPage: number\n  totalPages: number\n  onPageChange: (page: number) => void\n  options?: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  }\n}) => {\n  if (totalPages <= 1) return null\n  const pages = generatePages(currentPage, totalPages, options)\n\n  return (\n    <div className=\"cobalt-pagination\">\n      <DefaultButton\n        className={cx(\"cobalt-pagination__DefaultButton\")}\n        disabled={currentPage === 1}\n        onClick={() => onPageChange(currentPage - 1)}\n        icon=\"chevronLeft\"\n      />\n      {pages.map((page, index) =>\n        page === PAGE_DOTS_VALUE ? (\n          <DotsHorizontalIcon\n            key={`dots-${index}`}\n            className=\"cobalt-pagination__threeDots\"\n            color=\"accent\"\n          />\n        ) : (\n          <PaginationButton\n            key={page}\n            currentPage={currentPage}\n            pageNumber={page}\n            onPageChange={onPageChange}\n          />\n        )\n      )}\n      <DefaultButton\n        className={cx(\"cobalt-pagination__DefaultButton\")}\n        disabled={currentPage === totalPages}\n        onClick={() => onPageChange(currentPage + 1)}\n        icon=\"chevronRight\"\n      />\n    </div>\n  )\n}\n\nexport default Pagination\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n  currentPage,\n  pageNumber,\n  onPageChange,\n}: {\n  currentPage: number\n  pageNumber: number\n  onPageChange: (page: number) => void\n}) => {\n  const isActive = currentPage === pageNumber\n  return (\n    <DefaultButton\n      className={cx(\"cobalt-pagination__DefaultButton\")}\n      selected={isActive}\n      onClick={() => !isActive && onPageChange(pageNumber)}\n    >\n      {pageNumber}\n    </DefaultButton>\n  )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n  currentPage: number,\n  totalPages: number,\n  options: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  }\n) => {\n  const pages: number[] = []\n  const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n  const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n  if (totalPages <= maxVisiblePages) {\n    // Show all pages\n    for (let i = 1; i <= totalPages; i++) {\n      pages.push(i)\n    }\n    return pages\n  }\n\n  // Calculate dynamic range for middle pages\n  const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n  let startMiddlePage = Math.max(\n    currentPage - Math.floor(middlePagesCount / 2),\n    edgeButtons + 1\n  )\n  let endMiddlePage = Math.min(\n    currentPage + Math.floor(middlePagesCount / 2),\n    totalPages - edgeButtons\n  )\n\n  // Adjust start and end pages if they exceed boundaries\n  if (startMiddlePage === edgeButtons + 1) {\n    endMiddlePage = startMiddlePage + middlePagesCount - 1\n  } else if (endMiddlePage === totalPages - edgeButtons) {\n    startMiddlePage = endMiddlePage - middlePagesCount + 1\n  }\n\n  // Add leading edge buttons\n  for (let i = 1; i <= edgeButtons; i++) {\n    pages.push(i)\n  }\n  if (startMiddlePage > edgeButtons + 1) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n\n  // Add middle pages\n  for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n    pages.push(i)\n  }\n\n  // Add trailing edge buttons\n  if (endMiddlePage < totalPages - edgeButtons) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n  for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n    pages.push(i)\n  }\n\n  return pages\n}\n\n// eslint-disable-next-line complexity\nconst Pagination = ({\n  onPageChange,\n  currentPage,\n  totalPages,\n  options = {\n    maxVisibleLength: 11,\n    edgeVisibleLength: 3,\n  },\n}: {\n  currentPage: number\n  totalPages: number\n  onPageChange: (page: number) => void\n  options?: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  }\n}) => {\n  if (totalPages <= 1) return null\n  const pages = generatePages(currentPage, totalPages, options)\n\n  return (\n    <div className=\"cobalt-pagination\">\n      <DefaultButton\n        className={cx(\"cobalt-pagination__DefaultButton\")}\n        disabled={currentPage === 1}\n        onClick={() => onPageChange(currentPage - 1)}\n        icon=\"chevronLeft\"\n      />\n      {pages.map((page, index) =>\n        page === PAGE_DOTS_VALUE ? (\n          <DotsHorizontalIcon\n            key={`dots-${index}`}\n            className=\"cobalt-pagination__threeDots\"\n            color=\"primary\"\n          />\n        ) : (\n          <PaginationButton\n            key={page}\n            currentPage={currentPage}\n            pageNumber={page}\n            onPageChange={onPageChange}\n          />\n        )\n      )}\n      <DefaultButton\n        className={cx(\"cobalt-pagination__DefaultButton\")}\n        disabled={currentPage === totalPages}\n        onClick={() => onPageChange(currentPage + 1)}\n        icon=\"chevronRight\"\n      />\n    </div>\n  )\n}\n\nexport default Pagination\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,UAAU,EACV,YAAY,GAKb,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,UAAU,CAAA;AAC3C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,EACjD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAM,CAAC,QAAQ,IAAI,YAAY,CAAC,UAAU,CAAC,EAAA,EAEnD,UAAU,CACG,EACjB;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,CAAC,CAAA;AAE1B,MAAM,aAAa,GAAG,CACpB,WAAmB,EACnB,UAAkB,EAClB,OAGC,KACC;IACF,MAAM,KAAK,GAAa,EAAE,CAAA;AAC1B,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,gBAAgB,CAAA;AAChD,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,iBAAiB,CAAA;AAE7C,IAAA,IAAI,UAAU,IAAI,eAAe,EAAE;;AAEjC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;SACd;AACD,QAAA,OAAO,KAAK,CAAA;KACb;;IAGD,MAAM,gBAAgB,GAAG,eAAe,GAAG,CAAC,GAAG,WAAW,CAAA;IAC1D,IAAI,eAAe,GAAG,IAAI,CAAC,GAAG,CAC5B,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAC9C,WAAW,GAAG,CAAC,CAChB,CAAA;IACD,IAAI,aAAa,GAAG,IAAI,CAAC,GAAG,CAC1B,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAC9C,UAAU,GAAG,WAAW,CACzB,CAAA;;AAGD,IAAA,IAAI,eAAe,KAAK,WAAW,GAAG,CAAC,EAAE;AACvC,QAAA,aAAa,GAAG,eAAe,GAAG,gBAAgB,GAAG,CAAC,CAAA;KACvD;AAAM,SAAA,IAAI,aAAa,KAAK,UAAU,GAAG,WAAW,EAAE;AACrD,QAAA,eAAe,GAAG,aAAa,GAAG,gBAAgB,GAAG,CAAC,CAAA;KACvD;;AAGD,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,EAAE,EAAE;AACrC,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;AACD,IAAA,IAAI,eAAe,GAAG,WAAW,GAAG,CAAC,EAAE;AACrC,QAAA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KAC5B;;AAGD,IAAA,KAAK,IAAI,CAAC,GAAG,eAAe,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC,EAAE,EAAE;AACrD,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;;AAGD,IAAA,IAAI,aAAa,GAAG,UAAU,GAAG,WAAW,EAAE;AAC5C,QAAA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KAC5B;AACD,IAAA,KAAK,IAAI,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE;AAC/D,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;AAED,IAAA,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED;AACM,MAAA,UAAU,GAAG,CAAC,EAClB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,GAAG;AACR,IAAA,gBAAgB,EAAE,EAAE;AACpB,IAAA,iBAAiB,EAAE,CAAC;AACrB,CAAA,GASF,KAAI;IACH,IAAI,UAAU,IAAI,CAAC;AAAE,QAAA,OAAO,IAAI,CAAA;IAChC,MAAM,KAAK,GAAG,aAAa,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,CAAC,CAAA;AAE7D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA;AAChC,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,EACjD,QAAQ,EAAE,WAAW,KAAK,CAAC,EAC3B,OAAO,EAAE,MAAM,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,IAAI,EAAC,aAAa,EAClB,CAAA;QACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACrB,IAAI,KAAK,eAAe,IACtB,KAAC,CAAA,aAAA,CAAA,kBAAkB,EACjB,EAAA,GAAG,EAAE,CAAA,KAAA,EAAQ,KAAK,CAAA,CAAE,EACpB,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAC,SAAS,EACf,CAAA,KAEF,KAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,GAAG,EAAE,IAAI,EACT,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,YAAY,EAC1B,CAAA,CACH,CACF;AACD,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,EACjD,QAAQ,EAAE,WAAW,KAAK,UAAU,EACpC,OAAO,EAAE,MAAM,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,IAAI,EAAC,cAAc,EACnB,CAAA,CACE,EACP;AACH;;;;"}

package/components/PhotoDropzone/index.js

@@ -155,7 +155,7 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
         // Need to reset those listeners to avoid default browser behaviour
         onDragStart: preventEventDefaults, onDragEnd: preventEventDefaults, onDragOver: preventEventDefaults },
         isErrored && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
-            React.createElement(ContextualWarningCircleFilledIcon, { color: "red" }),
+            React.createElement(ContextualWarningCircleFilledIcon, { color: "error" }),
             errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB))),
         isLoading && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
             React.createElement(LoadingIcon, null))),
@@ -172,7 +172,7 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
                         // Must follow the click listeners on the dropzone,
                         // in order to have the correct events bubbling
                         onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey },
-                        React.createElement(BinIcon, { color: "indigo" })),
+                        React.createElement(BinIcon, { color: "onSurface" })),
                     deleteContentMode === "modal" && (React.createElement(Modal, { isOpen: showDeletePopover, "aria-label": "delete", bodySpacing: false }, deleteContent(onDelete, closeDeletePopover))),
                     deleteContentMode === "popover" && (React.createElement(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true }, deleteContent(onDelete, closeDeletePopover)))))) : (React.createElement("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong" },
                 description && React.createElement("div", null, description),

package/components/PhotoDropzone/index.js.map

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

package/components/Pill/index.js

@@ -3,9 +3,9 @@ import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 
 const ICON_SIZE = 20;
-const Pill = ({ icon, color = "base", children, overlayed, className, size, }) => {
+const Pill = ({ icon, color = "onSurface", children, overlayed, className, size, }) => {
     const iconMarkup = icon ? (React.createElement("span", { className: "cobalt-Pill__Icon" },
-        React.createElement(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "white" : color }))) : null;
+        React.createElement(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "surfaceFixed" : color }))) : null;
     return (React.createElement("div", { className: cx(className, "cobalt-Pill", {
             "cobalt-Pill--colorConnect": color === "connect",
             "cobalt-Pill--overlayed": overlayed,

package/components/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"base\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"white\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorConnect\": color === \"connect\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,EAAA,CAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,2BAA2B,EAAE,KAAK,KAAK,SAAS;AAChD,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"onSurface\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"surfaceFixed\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorConnect\": color === \"connect\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,WAAW,EACnB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,KAAK,EAAA,CACzC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,2BAA2B,EAAE,KAAK,KAAK,SAAS;AAChD,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}

package/components/Rating/RatingIcons.js

@@ -4,8 +4,8 @@ import cx from 'classnames';
 import '../Icon/index.js';
 import StarIcon from '../Icon/__generated__/StarIcon.js';
 
-const defaultRatingIcon = React.createElement(StarIcon, { color: "infoAlt" });
-const itemEmptyColor = "disabled";
+const defaultRatingIcon = React.createElement(StarIcon, { color: "primary" });
+const itemEmptyColor = "onSurfaceDisabled";
 function roundHalf(num) {
     const temp = num * 2;
     return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 2;

package/components/Rating/RatingIcons.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingIcons.js","sources":["../../../src/components/Rating/RatingIcons.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from \"react\"\nimport { nanoid } from \"nanoid\"\nimport cx from \"classnames\"\nimport { IconProps, StarIcon } from \"../Icon\"\n\nexport type RatingIconsPropsType = {\n  className?: string\n  max?: 5 | 10\n  value: number\n  size?: IconProps[\"size\"] | 48\n  editable?: boolean\n  disabled?: boolean\n  onChange?: (newValue: number) => void\n  icon?: JSX.Element | JSX.Element[]\n}\n\nexport type RatingIconPropsType = {\n  icon: JSX.Element\n  status?: \"full\" | \"half\" | \"empty\"\n  size?: RatingIconsPropsType[\"size\"]\n}\n\nexport const defaultRatingIcon = <StarIcon color=\"infoAlt\" />\nconst itemEmptyColor: IconProps[\"color\"] = \"disabled\"\n\nexport function roundHalf(num: number) {\n  const temp = num * 2\n  return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 2\n}\n\nexport function computeItemStatus(\n  ratingValue: number,\n  itemValue: number,\n  icon: RatingIconsPropsType[\"icon\"]\n): RatingIconPropsType[\"status\"] {\n  let itemStatus: RatingIconPropsType[\"status\"] = \"empty\"\n  if (!Array.isArray(icon)) {\n    // gauge\n    const isHalfItem = itemValue > ratingValue && ratingValue > itemValue - 1\n    if (isHalfItem) {\n      itemStatus = \"half\"\n    } else if (itemValue <= ratingValue) {\n      itemStatus = \"full\"\n    }\n  } else if (itemValue === ratingValue) {\n    // radio\n    itemStatus = \"full\"\n  }\n\n  return itemStatus\n}\n\nexport const RatingIcon = ({\n  icon,\n  status = \"full\",\n  size = 24,\n}: RatingIconPropsType) => {\n  if (status === \"half\") {\n    return (\n      <>\n        {React.cloneElement(icon, {\n          color: itemEmptyColor,\n          size,\n        })}\n        <div className=\"cobalt-rating-icons__icon-half-container\">\n          {React.cloneElement(icon, { size })}\n        </div>\n      </>\n    )\n  } else {\n    const iconColor: IconProps[\"color\"] =\n      status === \"empty\" ? itemEmptyColor : icon.props.color\n\n    return React.cloneElement(icon, {\n      color: iconColor,\n      size,\n    })\n  }\n}\n\nexport const RatingIcons = ({\n  className,\n  max = 5,\n  value,\n  size = 24,\n  editable = false,\n  onChange,\n  icon = defaultRatingIcon,\n}: RatingIconsPropsType) => {\n  const name = useRef(nanoid())\n\n  const items = useRef(\n    Array.from(new Array(Array.isArray(icon) ? icon.length : max))\n  )\n\n  const [ratingValue, setRatingValue] = useState(() =>\n    editable ? Math.floor(value) : roundHalf(value)\n  )\n  const [selectedIndex, setSelectedIndex] = useState(-1) // used to enforce selection effect (icon scale reset)\n\n  const resetSelection = useCallback(() => {\n    setSelectedIndex(-1)\n  }, [])\n\n  const itemSize = size === 48 ? 16 : size\n\n  // input element is used for a11y purpose ( focus feedback and keyboard selection )\n  return (\n    <div\n      className={cx(\"cobalt-rating-icons\", className, {\n        \"cobalt-rating-icons--icon-size-48\": size === 48,\n      })}\n      onPointerLeave={() => {\n        if (editable) {\n          ;(document.activeElement as HTMLInputElement).blur()\n        }\n      }}\n    >\n      {items.current.map((_value, idx) => {\n        const itemValue = idx + 1\n\n        const itemStatus = computeItemStatus(ratingValue, itemValue, icon)\n\n        return (\n          <label\n            className={cx(\"cobalt-rating-icons__icon-wrapper\", {\n              \"cobalt-rating-icons__icon-wrapper--selected\":\n                selectedIndex === idx,\n            })}\n            key={idx}\n            onClick={() => {\n              if (editable) {\n                setRatingValue(itemValue)\n                setSelectedIndex(idx)\n              }\n            }}\n            onMouseEnter={(e) => {\n              if (editable) {\n                ;(e.target as HTMLElement).focus()\n\n                resetSelection()\n              }\n            }}\n          >\n            <input\n              tabIndex={\n                editable &&\n                (ratingValue === itemValue ||\n                  (ratingValue === 0 && itemValue === 1))\n                  ? 0\n                  : -1\n              }\n              name={name.current}\n              type=\"radio\"\n              value={itemValue}\n              onChange={() => {\n                onChange && onChange(itemValue)\n              }}\n              disabled={!editable}\n            />\n            {\n              <RatingIcon\n                icon={Array.isArray(icon) ? icon[idx] : icon}\n                status={itemStatus}\n                size={itemSize}\n              />\n            }\n          </label>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RatingIcons.js","sources":["../../../src/components/Rating/RatingIcons.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from \"react\"\nimport { nanoid } from \"nanoid\"\nimport cx from \"classnames\"\nimport { IconProps, StarIcon } from \"../Icon\"\n\nexport type RatingIconsPropsType = {\n  className?: string\n  max?: 5 | 10\n  value: number\n  size?: IconProps[\"size\"] | 48\n  editable?: boolean\n  disabled?: boolean\n  onChange?: (newValue: number) => void\n  icon?: JSX.Element | JSX.Element[]\n}\n\nexport type RatingIconPropsType = {\n  icon: JSX.Element\n  status?: \"full\" | \"half\" | \"empty\"\n  size?: RatingIconsPropsType[\"size\"]\n}\n\nexport const defaultRatingIcon = <StarIcon color=\"primary\" />\nconst itemEmptyColor: IconProps[\"color\"] = \"onSurfaceDisabled\"\n\nexport function roundHalf(num: number) {\n  const temp = num * 2\n  return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 2\n}\n\nexport function computeItemStatus(\n  ratingValue: number,\n  itemValue: number,\n  icon: RatingIconsPropsType[\"icon\"]\n): RatingIconPropsType[\"status\"] {\n  let itemStatus: RatingIconPropsType[\"status\"] = \"empty\"\n  if (!Array.isArray(icon)) {\n    // gauge\n    const isHalfItem = itemValue > ratingValue && ratingValue > itemValue - 1\n    if (isHalfItem) {\n      itemStatus = \"half\"\n    } else if (itemValue <= ratingValue) {\n      itemStatus = \"full\"\n    }\n  } else if (itemValue === ratingValue) {\n    // radio\n    itemStatus = \"full\"\n  }\n\n  return itemStatus\n}\n\nexport const RatingIcon = ({\n  icon,\n  status = \"full\",\n  size = 24,\n}: RatingIconPropsType) => {\n  if (status === \"half\") {\n    return (\n      <>\n        {React.cloneElement(icon, {\n          color: itemEmptyColor,\n          size,\n        })}\n        <div className=\"cobalt-rating-icons__icon-half-container\">\n          {React.cloneElement(icon, { size })}\n        </div>\n      </>\n    )\n  } else {\n    const iconColor: IconProps[\"color\"] =\n      status === \"empty\" ? itemEmptyColor : icon.props.color\n\n    return React.cloneElement(icon, {\n      color: iconColor,\n      size,\n    })\n  }\n}\n\nexport const RatingIcons = ({\n  className,\n  max = 5,\n  value,\n  size = 24,\n  editable = false,\n  onChange,\n  icon = defaultRatingIcon,\n}: RatingIconsPropsType) => {\n  const name = useRef(nanoid())\n\n  const items = useRef(\n    Array.from(new Array(Array.isArray(icon) ? icon.length : max))\n  )\n\n  const [ratingValue, setRatingValue] = useState(() =>\n    editable ? Math.floor(value) : roundHalf(value)\n  )\n  const [selectedIndex, setSelectedIndex] = useState(-1) // used to enforce selection effect (icon scale reset)\n\n  const resetSelection = useCallback(() => {\n    setSelectedIndex(-1)\n  }, [])\n\n  const itemSize = size === 48 ? 16 : size\n\n  // input element is used for a11y purpose ( focus feedback and keyboard selection )\n  return (\n    <div\n      className={cx(\"cobalt-rating-icons\", className, {\n        \"cobalt-rating-icons--icon-size-48\": size === 48,\n      })}\n      onPointerLeave={() => {\n        if (editable) {\n          ;(document.activeElement as HTMLInputElement).blur()\n        }\n      }}\n    >\n      {items.current.map((_value, idx) => {\n        const itemValue = idx + 1\n\n        const itemStatus = computeItemStatus(ratingValue, itemValue, icon)\n\n        return (\n          <label\n            className={cx(\"cobalt-rating-icons__icon-wrapper\", {\n              \"cobalt-rating-icons__icon-wrapper--selected\":\n                selectedIndex === idx,\n            })}\n            key={idx}\n            onClick={() => {\n              if (editable) {\n                setRatingValue(itemValue)\n                setSelectedIndex(idx)\n              }\n            }}\n            onMouseEnter={(e) => {\n              if (editable) {\n                ;(e.target as HTMLElement).focus()\n\n                resetSelection()\n              }\n            }}\n          >\n            <input\n              tabIndex={\n                editable &&\n                (ratingValue === itemValue ||\n                  (ratingValue === 0 && itemValue === 1))\n                  ? 0\n                  : -1\n              }\n              name={name.current}\n              type=\"radio\"\n              value={itemValue}\n              onChange={() => {\n                onChange && onChange(itemValue)\n              }}\n              disabled={!editable}\n            />\n            {\n              <RatingIcon\n                icon={Array.isArray(icon) ? icon[idx] : icon}\n                status={itemStatus}\n                size={itemSize}\n              />\n            }\n          </label>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/components/Sidepanel/index.js

@@ -8,12 +8,12 @@ import { Fixed } from '../Layout/Surfaces/index.js';
 import CloseIcon from '../Icon/__generated__/CloseIcon.js';
 
 const SidepanelFooter = ({ children, className }) => {
-    return (React.createElement("div", { className: cx("c-p-sm c-border-t c-border-base", className) }, children));
+    return (React.createElement("div", { className: cx("c-p-sm c-border-t c-border-outline", className) }, children));
 };
 // Memoized component to not render content when the panel is collapsing
 function _SidepanelContent({ title, close, children }) {
     return (React.createElement(React.Fragment, null,
-        title && (React.createElement("div", { className: "c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base" },
+        title && (React.createElement("div", { className: "c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-outline" },
             React.createElement("div", { className: "c-text-title-md c-flex-1" }, title),
             close && (React.createElement("div", { className: "c-w-md c-cursor-pointer", onClick: close },
                 React.createElement(CloseIcon, { size: 24 }))))),

package/components/Sidepanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { ComponentProps, useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\nimport { Fixed } from \"../Layout/Surfaces\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-base\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  width?: ComponentProps<typeof Fixed>[\"width\"]\n  withDesktopOverlay?: boolean\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  width = 420,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c)\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <Fixed width={width} isFullHeight>\n            <SidepanelContent isOpen={isOpen} title={title} close={close}>\n              {children}\n              {footer}\n            </SidepanelContent>\n          </Fixed>\n        </div>\n        {withDesktopOverlay && <div className=\"cobalt-sidepanel-overlay\"></div>}\n      </>,\n      document.body\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { ComponentProps, useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\nimport { Fixed } from \"../Layout/Surfaces\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-outline\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  width?: ComponentProps<typeof Fixed>[\"width\"]\n  withDesktopOverlay?: boolean\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-outline\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  width = 420,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c)\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <Fixed width={width} isFullHeight>\n            <SidepanelContent isOpen={isOpen} title={title} close={close}>\n              {children}\n              {footer}\n            </SidepanelContent>\n          </Fixed>\n        </div>\n        {withDesktopOverlay && <div className=\"cobalt-sidepanel-overlay\"></div>}\n      </>,\n      document.body\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":[],"mappings":"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"}

package/components/utils/camelize.js

@@ -0,0 +1,13 @@
+function camelize(s) {
+    return s
+        .replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+        if (+match === 0)
+            return ""; // or if (/\s+/.test(match)) for white spaces
+        return index === 0 ? match.toLowerCase() : match.toUpperCase();
+    })
+        .replace(/-/g, "")
+        .replace(/_/g, "");
+}
+
+export { camelize as default };
+//# sourceMappingURL=camelize.js.map

package/components/utils/camelize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"camelize.js","sources":["../../../src/components/utils/camelize.ts"],"sourcesContent":["function camelize(s: string) {\n  return s\n    .replace(/(?:^\\w|[A-Z]|\\b\\w|\\s+)/g, function (match, index) {\n      if (+match === 0) return \"\" // or if (/\\s+/.test(match)) for white spaces\n      return index === 0 ? match.toLowerCase() : match.toUpperCase()\n    })\n    .replace(/-/g, \"\")\n    .replace(/_/g, \"\")\n}\n\nexport default camelize\n"],"names":[],"mappings":"AAAA,SAAS,QAAQ,CAAC,CAAS,EAAA;AACzB,IAAA,OAAO,CAAC;AACL,SAAA,OAAO,CAAC,yBAAyB,EAAE,UAAU,KAAK,EAAE,KAAK,EAAA;QACxD,IAAI,CAAC,KAAK,KAAK,CAAC;YAAE,OAAO,EAAE,CAAA;AAC3B,QAAA,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;AAChE,KAAC,CAAC;AACD,SAAA,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;AACjB,SAAA,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;AACtB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "1.5.0",
+  "version": "2.0.0-beta.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",