@drivy/cobalt 2.15.0 → 2.16.0

package/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = {\n  children?: React.ReactNode\n  className?: string\n  legacy?: boolean\n  // Not used anymore, to remove in the next release\n  flattened?: boolean\n  responsive?: boolean\n}\n\nexport const Card = ({\n  children,\n  className,\n  legacy,\n  responsive,\n}: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--legacy\": legacy,\n      \"cobalt-Card--responsive\": responsive,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  className?: string\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({\n  className = \"\",\n  tabBar,\n  tight,\n  subdued,\n  divided,\n}: CardSectionProps) => {\n  return cx(className, \"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nCard.Section = CardSection\n\nexport default Card\n"],"names":[],"mappings":";;;AAYa,MAAA,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,GACA,MACV,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,qBAAqB,EAAE,MAAM;AAC7B,QAAA,yBAAyB,EAAE,UAAU;AACtC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AAqBD,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,GACU,KAAI;AACrB,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC3C,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,EAAA,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAE1C,MAAO,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe,CAAA;AAM/B,IAAI,CAAC,OAAO,GAAG,WAAW;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { PureComponent } from \"react\"\n\nexport type CardProps = {\n  children?: React.ReactNode\n  className?: string\n  legacy?: boolean\n  // Not used anymore, to remove in the next release\n  flattened?: boolean\n  responsive?: boolean\n}\n\nexport const Card = ({\n  children,\n  className,\n  legacy,\n  responsive,\n}: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--legacy\": legacy,\n      \"cobalt-Card--responsive\": responsive,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  className?: string\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({\n  className = \"\",\n  tabBar,\n  tight,\n  subdued,\n  divided,\n}: CardSectionProps) => {\n  return cx(className, \"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nCard.Section = CardSection\n\nexport default Card\n"],"names":["_jsx"],"mappings":";;;;AAaa,MAAA,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,GACA,MACVA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,qBAAqB,EAAE,MAAM;AAC7B,QAAA,yBAAyB,EAAE,UAAU;AACtC,KAAA,CAAC,EAED,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AAqBD,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,GACU,KAAI;AACrB,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC3C,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACEA,GACE,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,QAAA,EAAA,SAAS,CAAC,QAAQ,EAAA,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAE1C,MAAO,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAOA,aAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe,CAAA;AAM/B,IAAI,CAAC,OAAO,GAAG,WAAW;;;;"}

package/components/Cell/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import cx from 'classnames';
 
 function Cell({ children, divided, softDivided, className, }) {
-    return (React.createElement("div", { className: cx("cobalt-cell", className, {
+    return (jsx("div", { className: cx("cobalt-cell", className, {
             "cobalt-cell--divided": divided,
             "cobalt-cell--softDivided": softDivided,
-        }) }, children));
+        }), children: children }));
 }
 function Cells({ content, ...cellProps }) {
-    return (React.createElement(React.Fragment, null, content.map((c, i) => (React.createElement(Cell, { key: i, ...cellProps }, c)))));
+    return (jsx(Fragment, { children: content.map((c, i) => (jsx(Cell, { ...cellProps, children: c }, `cell-${i}-${typeof c === "string" || typeof c === "number" ? c : "unknown-value"}`))) }));
 }
 
 export { Cells, Cell as default };

package/components/Cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Cell/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type CellPropsType = {\n  children?: React.ReactNode\n  divided?: boolean\n  className?: string\n}\nexport type CellSoftPropsType = {\n  children?: React.ReactNode\n  softDivided?: boolean\n  className?: string\n}\n\nexport type CellsPropsType = {\n  content: CellPropsType[\"children\"][]\n} & Omit<CellPropsType, \"children\">\nexport type CellsSoftPropsType = {\n  content: CellSoftPropsType[\"children\"][]\n} & Omit<CellSoftPropsType, \"children\">\n\nfunction Cell(props: CellPropsType): JSX.Element\nfunction Cell(props: CellSoftPropsType): JSX.Element\nfunction Cell({\n  children,\n  divided,\n  softDivided,\n  className,\n}: CellPropsType & CellSoftPropsType): JSX.Element {\n  return (\n    <div\n      className={cx(\"cobalt-cell\", className, {\n        \"cobalt-cell--divided\": divided,\n        \"cobalt-cell--softDivided\": softDivided,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function Cells(props: CellsPropsType): JSX.Element\nexport function Cells(props: CellsSoftPropsType): JSX.Element\nexport function Cells({\n  content,\n  ...cellProps\n}: CellsPropsType & CellsSoftPropsType): JSX.Element {\n  return (\n    <>\n      {content.map((c, i) => (\n        <Cell key={i} {...cellProps}>\n          {c}\n        </Cell>\n      ))}\n    </>\n  )\n}\n\nexport default Cell\n"],"names":[],"mappings":";;;AAuBA,SAAS,IAAI,CAAC,EACZ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,SAAS,GACyB,EAAA;IAClC,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,YAAA,sBAAsB,EAAE,OAAO;AAC/B,YAAA,0BAA0B,EAAE,WAAW;AACxC,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,CAAC;AAIK,SAAU,KAAK,CAAC,EACpB,OAAO,EACP,GAAG,SAAS,EACwB,EAAA;AACpC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAChB,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAM,GAAA,SAAS,EACxB,EAAA,CAAC,CACG,CACR,CAAC,CACD,EACJ;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Cell/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\n\nexport type CellPropsType = {\n  children?: React.ReactNode\n  divided?: boolean\n  className?: string\n}\nexport type CellSoftPropsType = {\n  children?: React.ReactNode\n  softDivided?: boolean\n  className?: string\n}\n\nexport type CellsPropsType = {\n  content: CellPropsType[\"children\"][]\n} & Omit<CellPropsType, \"children\">\nexport type CellsSoftPropsType = {\n  content: CellSoftPropsType[\"children\"][]\n} & Omit<CellSoftPropsType, \"children\">\n\nfunction Cell(props: CellPropsType): JSX.Element\nfunction Cell(props: CellSoftPropsType): JSX.Element\nfunction Cell({\n  children,\n  divided,\n  softDivided,\n  className,\n}: CellPropsType & CellSoftPropsType): JSX.Element {\n  return (\n    <div\n      className={cx(\"cobalt-cell\", className, {\n        \"cobalt-cell--divided\": divided,\n        \"cobalt-cell--softDivided\": softDivided,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function Cells(props: CellsPropsType): JSX.Element\nexport function Cells(props: CellsSoftPropsType): JSX.Element\nexport function Cells({\n  content,\n  ...cellProps\n}: CellsPropsType & CellsSoftPropsType): JSX.Element {\n  return (\n    <>\n      {content.map((c, i) => (\n        <Cell\n          key={`cell-${i}-${typeof c === \"string\" || typeof c === \"number\" ? c : \"unknown-value\"}`}\n          {...cellProps}\n        >\n          {c}\n        </Cell>\n      ))}\n    </>\n  )\n}\n\nexport default Cell\n"],"names":["_jsx"],"mappings":";;;AAuBA,SAAS,IAAI,CAAC,EACZ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,SAAS,GACyB,EAAA;IAClC,QACEA,aACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,YAAA,sBAAsB,EAAE,OAAO;AAC/B,YAAA,0BAA0B,EAAE,WAAW;AACxC,SAAA,CAAC,EAED,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AACH,CAAC;AAIK,SAAU,KAAK,CAAC,EACpB,OAAO,EACP,GAAG,SAAS,EACwB,EAAA;IACpC,QACEA,0BACG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAChBA,GAAC,CAAA,IAAI,OAEC,SAAS,EAAA,QAAA,EAEZ,CAAC,EAAA,EAHG,CAAQ,KAAA,EAAA,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,eAAe,CAAA,CAAE,CAInF,CACR,CAAC,EACD,CAAA,EACJ;AACH;;;;"}

package/components/Chip/index.js

@@ -1,24 +1,21 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 
 const ChipWrapper = (props) => {
     if (props.onClick) {
-        return (React.createElement("button", { ...props, type: "button", disabled: props.disabled }, props.children));
+        return (jsx("button", { ...props, type: "button", disabled: props.disabled, children: props.children }));
     }
     else {
-        return React.createElement("div", { ...props }, props.children);
+        return jsx("div", { ...props, children: props.children });
     }
 };
 const Chip = ({ onClick, text, image, size, disabled, active, }) => {
-    return (React.createElement(ChipWrapper, { onClick: onClick, disabled: disabled, className: cx("cobalt-Chip", {
+    return (jsx(ChipWrapper, { onClick: onClick, disabled: disabled, className: cx("cobalt-Chip", {
             "cobalt-Chip--large": size === "large",
             "cobalt-Chip--disabled": disabled,
             "cobalt-Chip--interactive": !!onClick,
             "cobalt-Chip--active": active,
-        }) },
-        React.createElement("div", { className: "cobalt-Chip__Content" },
-            React.createElement("div", { className: "cobalt-Chip__Image", style: { backgroundImage: `url(${image})` } }),
-            React.createElement("div", { className: "cobalt-Chip__Text" }, text))));
+        }), children: jsxs("div", { className: "cobalt-Chip__Content", children: [jsx("div", { className: "cobalt-Chip__Image", style: { backgroundImage: `url(${image})` } }), jsx("div", { className: "cobalt-Chip__Text", children: text })] }) }));
 };
 
 export { Chip };

package/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface ChipProps {\n  onClick?(): void\n  text: string\n  image: string\n  size?: \"large\"\n  disabled?: boolean\n  active?: boolean\n}\n\nexport interface ChipWrapperProps {\n  onClick?(): void\n  children: React.ReactElement\n  disabled?: boolean\n  className: string\n}\n\nconst ChipWrapper = (props: ChipWrapperProps) => {\n  if (props.onClick) {\n    return (\n      <button {...props} type=\"button\" disabled={props.disabled}>\n        {props.children}\n      </button>\n    )\n  } else {\n    return <div {...props}>{props.children}</div>\n  }\n}\n\nexport const Chip = ({\n  onClick,\n  text,\n  image,\n  size,\n  disabled,\n  active,\n}: ChipProps) => {\n  return (\n    <ChipWrapper\n      onClick={onClick}\n      disabled={disabled}\n      className={cx(\"cobalt-Chip\", {\n        \"cobalt-Chip--large\": size === \"large\",\n        \"cobalt-Chip--disabled\": disabled,\n        \"cobalt-Chip--interactive\": !!onClick,\n        \"cobalt-Chip--active\": active,\n      })}\n    >\n      <div className=\"cobalt-Chip__Content\">\n        <div\n          className=\"cobalt-Chip__Image\"\n          style={{ backgroundImage: `url(${image})` }}\n        />\n        <div className=\"cobalt-Chip__Text\">{text}</div>\n      </div>\n    </ChipWrapper>\n  )\n}\n"],"names":[],"mappings":";;;AAmBA,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;AAC9C,IAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACjB,QAAA,QACE,KAAY,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACtD,EAAA,KAAK,CAAC,QAAQ,CACR,EACV;KACF;SAAM;AACL,QAAA,OAAO,gCAAS,KAAK,EAAA,EAAG,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC9C;AACH,CAAC,CAAA;AAEY,MAAA,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,GACI,KAAI;AACd,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE;YAC3B,oBAAoB,EAAE,IAAI,KAAK,OAAO;AACtC,YAAA,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,CAAC,CAAC,OAAO;AACrC,YAAA,qBAAqB,EAAE,MAAM;SAC9B,CAAC,EAAA;QAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA;AACnC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA,CAAG,EAAE,EAC3C,CAAA;YACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAO,CAC3C,CACM,EACf;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\n\nexport interface ChipProps {\n  onClick?(): void\n  text: string\n  image: string\n  size?: \"large\"\n  disabled?: boolean\n  active?: boolean\n}\n\nexport interface ChipWrapperProps {\n  onClick?(): void\n  children: React.ReactElement\n  disabled?: boolean\n  className: string\n}\n\nconst ChipWrapper = (props: ChipWrapperProps) => {\n  if (props.onClick) {\n    return (\n      <button {...props} type=\"button\" disabled={props.disabled}>\n        {props.children}\n      </button>\n    )\n  } else {\n    return <div {...props}>{props.children}</div>\n  }\n}\n\nexport const Chip = ({\n  onClick,\n  text,\n  image,\n  size,\n  disabled,\n  active,\n}: ChipProps) => {\n  return (\n    <ChipWrapper\n      onClick={onClick}\n      disabled={disabled}\n      className={cx(\"cobalt-Chip\", {\n        \"cobalt-Chip--large\": size === \"large\",\n        \"cobalt-Chip--disabled\": disabled,\n        \"cobalt-Chip--interactive\": !!onClick,\n        \"cobalt-Chip--active\": active,\n      })}\n    >\n      <div className=\"cobalt-Chip__Content\">\n        <div\n          className=\"cobalt-Chip__Image\"\n          style={{ backgroundImage: `url(${image})` }}\n        />\n        <div className=\"cobalt-Chip__Text\">{text}</div>\n      </div>\n    </ChipWrapper>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAmBA,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;AAC9C,IAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACjB,QAAA,QACEA,GAAY,CAAA,QAAA,EAAA,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACtD,QAAA,EAAA,KAAK,CAAC,QAAQ,EAAA,CACR,EACV;KACF;SAAM;AACL,QAAA,OAAOA,gBAAS,KAAK,EAAA,QAAA,EAAG,KAAK,CAAC,QAAQ,GAAO,CAAA;KAC9C;AACH,CAAC,CAAA;AAEY,MAAA,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,GACI,KAAI;AACd,IAAA,QACEA,GAAC,CAAA,WAAW,EACV,EAAA,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE;YAC3B,oBAAoB,EAAE,IAAI,KAAK,OAAO;AACtC,YAAA,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,CAAC,CAAC,OAAO;AACrC,YAAA,qBAAqB,EAAE,MAAM;AAC9B,SAAA,CAAC,EAEF,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EACnC,QAAA,EAAA,CAAAD,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,CAAO,IAAA,EAAA,KAAK,CAAG,CAAA,CAAA,EAAE,EAC3C,CAAA,EACFA,aAAK,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAE,IAAI,EAAA,CAAO,CAC3C,EAAA,CAAA,EAAA,CACM,EACf;AACH;;;;"}

package/components/ContainedIcon/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import capitalize from '../utils/capitalize.js';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
+import capitalize from '../utils/capitalize.js';
 
 function ContainedIcon({ icon, color = "base", className, }) {
-    return (React.createElement("div", { className: cx(className, `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`) }, icon));
+    return (jsx("div", { className: cx(className, `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`), children: icon }));
 }
 
 export { ContainedIcon };

package/components/ContainedIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\ntype BaseColor =\n  | \"base\"\n  | \"accent\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"connect\"\n  | \"keyExchange\"\n  | \"disabled\"\n  | \"info\"\n  | \"driver\"\n  | \"owner\"\ntype WithBackgroundColor = `${BaseColor}Alt`\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: IconColorsType | BaseColor | WithBackgroundColor\n  className?: string\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n  className,\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={cx(\n        className,\n        `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`\n      )}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAyBM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,GACc,EAAA;AACvB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,IAEA,IAAI,CACD,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport type { IconColorsType } from \"../Icon\"\nimport capitalize from \"../utils/capitalize\"\n\ntype BaseColor =\n  | \"base\"\n  | \"accent\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"connect\"\n  | \"keyExchange\"\n  | \"disabled\"\n  | \"info\"\n  | \"driver\"\n  | \"owner\"\ntype WithBackgroundColor = `${BaseColor}Alt`\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: IconColorsType | BaseColor | WithBackgroundColor\n  className?: string\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n  className,\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={cx(\n        className,\n        `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`,\n      )}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;AAyBM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,GACc,EAAA;AACvB,IAAA,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,YAEA,IAAI,EAAA,CACD,EACP;AACH;;;;"}

package/components/EmptyState/index.js

@@ -1,15 +1,8 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ButtonsGroup from '../Buttons/ButtonsGroup.js';
 
 const EmptyState = ({ title, children, action, secondaryAction, image, }) => {
-    return (React.createElement("div", { className: "cobalt-EmptyState" },
-        React.createElement("img", { className: "cobalt-EmptyState__Image", role: "presentation", alt: "", src: image, height: 188, width: 188 }),
-        React.createElement("h2", { className: "cobalt-EmptyState__Title" }, title),
-        children && React.createElement("div", { className: "cobalt-EmptyState__Body" }, children),
-        action && (React.createElement(ButtonsGroup, { align: "center" },
-            React.createElement(React.Fragment, null,
-                action,
-                secondaryAction)))));
+    return (jsxs("div", { className: "cobalt-EmptyState", children: [jsx("img", { className: "cobalt-EmptyState__Image", alt: "", src: image, height: 188, width: 188 }), jsx("h2", { className: "cobalt-EmptyState__Title", children: title }), children && jsx("div", { className: "cobalt-EmptyState__Body", children: children }), action && (jsxs(ButtonsGroup, { align: "center", children: [action, secondaryAction] }))] }));
 };
 
 export { EmptyState };

package/components/EmptyState/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React from \"react\"\n\nimport type { CobaltButtonElement } from \"../Buttons/Button\"\nimport ButtonsGroup from \"../Buttons/ButtonsGroup\"\n\nexport interface EmptyStateProps {\n  children?: React.ReactNode\n  title: string\n  action?: CobaltButtonElement\n  secondaryAction?: CobaltButtonElement\n  image: string\n}\n\nexport const EmptyState = ({\n  title,\n  children,\n  action,\n  secondaryAction,\n  image,\n}: EmptyStateProps) => {\n  return (\n    <div className=\"cobalt-EmptyState\">\n      <img\n        className=\"cobalt-EmptyState__Image\"\n        role=\"presentation\"\n        alt=\"\"\n        src={image}\n        height={188}\n        width={188}\n      />\n      <h2 className=\"cobalt-EmptyState__Title\">{title}</h2>\n      {children && <div className=\"cobalt-EmptyState__Body\">{children}</div>}\n      {action && (\n        <ButtonsGroup align=\"center\">\n          <>\n            {action}\n            {secondaryAction}\n          </>\n        </ButtonsGroup>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAaa,MAAA,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,eAAe,EACf,KAAK,GACW,KAAI;AACpB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA;QAChC,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,cAAc,EACnB,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,GAAG,EACX,KAAK,EAAE,GAAG,EACV,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAM;AACpD,QAAA,QAAQ,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA,EAAE,QAAQ,CAAO;AACrE,QAAA,MAAM,KACL,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAA;AAC1B,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;gBACG,MAAM;AACN,gBAAA,eAAe,CACf,CACU,CAChB,CACG,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import type React from \"react\"\nimport type { CobaltButtonElement } from \"../Buttons/Button\"\nimport ButtonsGroup from \"../Buttons/ButtonsGroup\"\n\nexport interface EmptyStateProps {\n  children?: React.ReactNode\n  title: string\n  action?: CobaltButtonElement\n  secondaryAction?: CobaltButtonElement\n  image: string\n}\n\nexport const EmptyState = ({\n  title,\n  children,\n  action,\n  secondaryAction,\n  image,\n}: EmptyStateProps) => {\n  return (\n    <div className=\"cobalt-EmptyState\">\n      <img\n        className=\"cobalt-EmptyState__Image\"\n        alt=\"\"\n        src={image}\n        height={188}\n        width={188}\n      />\n      <h2 className=\"cobalt-EmptyState__Title\">{title}</h2>\n      {children && <div className=\"cobalt-EmptyState__Body\">{children}</div>}\n      {action && (\n        <ButtonsGroup align=\"center\">\n          {action}\n          {secondaryAction}\n        </ButtonsGroup>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAYa,MAAA,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,eAAe,EACf,KAAK,GACW,KAAI;AACpB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAChCC,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,0BAA0B,EACpC,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,GAAG,EACX,KAAK,EAAE,GAAG,EACV,CAAA,EACFA,YAAI,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACpD,QAAQ,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,EACrE,MAAM,KACLD,IAAA,CAAC,YAAY,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CACzB,MAAM,EACN,eAAe,CAAA,EAAA,CACH,CAChB,CAAA,EAAA,CACG,EACP;AACH;;;;"}

package/components/Flag/index.js

@@ -1,16 +1,16 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
-import { countries } from '../../tokens/index.js';
 import * as index from '../../icons/countries/index.js';
-import eqSet from '../utils/eqSet.js';
+import { countries } from '../../tokens/index.js';
 import 'lodash.throttle';
+import eqSet from '../utils/eqSet.js';
 
 if (!eqSet(new Set(Object.keys(index)), new Set(Object.keys(countries.flags))))
     throw new Error("Flag sources and tokens are not consistent. Did you add the source and export it");
-const BUNDLED_FLAGS = Object.freeze(Object.keys(countries.flags).reduce((bundledFlags, name) => ({
-    ...bundledFlags,
-    [name]: index[name],
-}), {}));
+const BUNDLED_FLAGS = Object.freeze(Object.keys(countries.flags).reduce((bundledFlags, name) => {
+    bundledFlags[name] = index[name];
+    return bundledFlags;
+}, {}));
 const Flag = ({ country, size = 24, className }) => {
     const _className = cx("cobalt-Flag", className, {
         "cobalt-Flag--size16": size === 16,
@@ -20,7 +20,9 @@ const Flag = ({ country, size = 24, className }) => {
     const countryFlag = BUNDLED_FLAGS[country];
     if (countryFlag == null)
         throw new Error(`'${country}' Flag can not be found. Did you add the source and export it`);
-    return (React.createElement("span", { className: _className, dangerouslySetInnerHTML: { __html: countryFlag } }));
+    return (jsx("span", { className: _className, 
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Should generated SVGR components like icons
+        dangerouslySetInnerHTML: { __html: countryFlag } }));
 };
 
 export { BUNDLED_FLAGS, Flag };

package/components/Flag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Flag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { countries } from \"../../tokens\"\n\nimport * as flags from \"../../icons/countries\"\nimport { eqSet } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(flags)),\n    new Set(Object.keys(countries.flags))\n  )\n)\n  throw new Error(\n    \"Flag sources and tokens are not consistent. Did you add the source and export it\"\n  )\n\ninterface FlagsMap {\n  [name: string]: string\n}\n\nexport const BUNDLED_FLAGS: FlagsMap = Object.freeze(\n  Object.keys(countries.flags).reduce(\n    (bundledFlags, name) => ({\n      ...bundledFlags,\n      [name]: (flags as FlagsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport interface FlagProps {\n  country: string\n  className?: string\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n}\n\nexport const Flag = ({ country, size = 24, className }: FlagProps) => {\n  const _className = cx(\"cobalt-Flag\", className, {\n    \"cobalt-Flag--size16\": size === 16,\n    \"cobalt-Flag--size20\": size === 20,\n    \"cobalt-Flag--size32\": size === 32,\n  })\n\n  const countryFlag = BUNDLED_FLAGS[country]\n\n  if (countryFlag == null)\n    throw new Error(\n      `'${country}' Flag can not be found. Did you add the source and export it`\n    )\n\n  return (\n    <span\n      className={_className}\n      dangerouslySetInnerHTML={{ __html: countryFlag }}\n    />\n  )\n}\n"],"names":["flags"],"mappings":";;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACtC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CACjC,CAAC,YAAY,EAAE,IAAI,MAAM;AACvB,IAAA,GAAG,YAAY;AACf,IAAA,CAAC,IAAI,GAAIA,KAAkB,CAAC,IAAI,CAAC;AAClC,CAAA,CAAC,EACF,EAAE,CACH,EACF;AAYM,MAAM,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAa,KAAI;AACnE,IAAA,MAAM,UAAU,GAAG,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;QAC9C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AACnC,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE1C,IAAI,WAAW,IAAI,IAAI;AACrB,QAAA,MAAM,IAAI,KAAK,CACb,IAAI,OAAO,CAAA,6DAAA,CAA+D,CAC3E,CAAA;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,UAAU,EACrB,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,EAAA,CAChD,EACH;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Flag/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport * as flags from \"../../icons/countries\"\nimport { countries } from \"../../tokens\"\nimport { eqSet } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(flags)),\n    new Set(Object.keys(countries.flags)),\n  )\n)\n  throw new Error(\n    \"Flag sources and tokens are not consistent. Did you add the source and export it\",\n  )\n\ninterface FlagsMap {\n  [name: string]: string\n}\n\nexport const BUNDLED_FLAGS: FlagsMap = Object.freeze(\n  Object.keys(countries.flags).reduce((bundledFlags, name) => {\n    bundledFlags[name] = (flags as FlagsMap)[name]\n    return bundledFlags\n  }, {} as FlagsMap),\n)\n\nexport interface FlagProps {\n  country: string\n  className?: string\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n}\n\nexport const Flag = ({ country, size = 24, className }: FlagProps) => {\n  const _className = cx(\"cobalt-Flag\", className, {\n    \"cobalt-Flag--size16\": size === 16,\n    \"cobalt-Flag--size20\": size === 20,\n    \"cobalt-Flag--size32\": size === 32,\n  })\n\n  const countryFlag = BUNDLED_FLAGS[country]\n\n  if (countryFlag == null)\n    throw new Error(\n      `'${country}' Flag can not be found. Did you add the source and export it`,\n    )\n\n  return (\n    <span\n      className={_className}\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: Should generated SVGR components like icons\n      dangerouslySetInnerHTML={{ __html: countryFlag }}\n    />\n  )\n}\n"],"names":["flags","_jsx"],"mappings":";;;;;;;AAKA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACtC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,IAAI,KAAI;IACzD,YAAY,CAAC,IAAI,CAAC,GAAIA,KAAkB,CAAC,IAAI,CAAC,CAAA;AAC9C,IAAA,OAAO,YAAY,CAAA;AACrB,CAAC,EAAE,EAAc,CAAC,EACnB;AAYM,MAAM,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAa,KAAI;AACnE,IAAA,MAAM,UAAU,GAAG,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;QAC9C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AACnC,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE1C,IAAI,WAAW,IAAI,IAAI;AACrB,QAAA,MAAM,IAAI,KAAK,CACb,IAAI,OAAO,CAAA,6DAAA,CAA+D,CAC3E,CAAA;AAEH,IAAA,QACEC,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,UAAU;;QAErB,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,EAAA,CAChD,EACH;AACH;;;;"}

package/components/Form/Autocomplete/index.js

@@ -1,9 +1,12 @@
-import React, { forwardRef, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createListCollection, useCombobox, Combobox, Portal } from '@ark-ui/react';
 import cx from 'classnames';
+import { nanoid } from 'nanoid';
+import { forwardRef, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
+import { getA11yOnClick } from '../../../helpers/index.js';
+import { useOnMountEffect } from '../../../hooks/useOnMountEffect.js';
 import { Icon } from '../../Icon/index.js';
-import { createListCollection, useCombobox, Combobox, Portal } from '@ark-ui/react';
 import { Hint } from '../Hint.js';
-import { nanoid } from 'nanoid';
 import CheckIcon from '../../Icon/__generated__/CheckIcon.js';
 
 function sanitizeItem(item) {
@@ -29,6 +32,8 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
     const sanitizedInitialItems = useMemo(() => sanitizeItems(items), [items]);
     const [value, setValue] = useState(defaultValue || "");
     const [popoverItems, setPopoverItems] = useState(sanitizedInitialItems);
+    // Allow to use the combobox without listening its changes
+    const comboboxRef = useRef(null);
     const collection = useMemo(() => createListCollection({
         items: popoverItems.length
             ? popoverItems
@@ -71,6 +76,9 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
             flip: false,
         },
     });
+    useEffect(() => {
+        comboboxRef.current = combobox;
+    }, [combobox]);
     useImperativeHandle(ref, () => {
         return {
             query: combobox.inputValue,
@@ -85,8 +93,8 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
                 combobox.clearValue();
                 setValue("");
                 setDefaultInputValue("");
-                onClearValue && onClearValue();
-                onQueryChange && onQueryChange("");
+                onClearValue === null || onClearValue === void 0 ? void 0 : onClearValue();
+                onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange("");
             },
             setSelectedItem: (selectedItem) => {
                 isInputValidChangedProgrammatically.current = true;
@@ -105,81 +113,70 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
                 }
             },
         };
-    }, [combobox]);
-    useEffect(() => {
+    }, [combobox, autocompleteKey, onClearValue, onQueryChange, popoverItems]);
+    useOnMountEffect(() => {
         focusOnInit && combobox.setOpen(collection.items.length > 0);
-    }, []);
-    const validItems = collection.items.filter((item) => item.value !== ignoreItemValue);
+    });
+    const validItems = useMemo(() => collection.items.filter((item) => item.value !== ignoreItemValue), [collection.items]);
     useEffect(() => {
-        validItems.length === 0 && combobox.setOpen(false);
-        combobox.focused &&
-            collection.items.length > 0 &&
-            !combobox.open &&
-            combobox.setOpen(true);
-    }, [collection.items.length]);
-    const autocomplete = (React.createElement(Combobox.RootProvider, { value: combobox, className: cx("cobalt-Autocomplete", className, {
+        var _a, _b, _c;
+        if (validItems.length) {
+            if (!((_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.open) && ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.focused)) {
+                comboboxRef.current.setOpen(true);
+            }
+        }
+        else {
+            if ((_c = comboboxRef.current) === null || _c === void 0 ? void 0 : _c.open) {
+                comboboxRef.current.setOpen(false);
+            }
+        }
+    }, [validItems]);
+    const autocomplete = (jsxs(Combobox.RootProvider, { value: combobox, className: cx("cobalt-Autocomplete", className, {
             "cobalt-Autocomplete--empty": validItems.length === 0,
-        }), key: "" + autocompleteKey },
-        label && (React.createElement(Combobox.Label, { className: "cobalt-FormField__Label" }, label)),
-        React.createElement(Combobox.Control, { className: cx("cobalt-TextField", {
-                "cobalt-TextField--error": status === "error",
-                "cobalt-TextField--success": status === "success",
-                "cobalt-TextField--withIcon": icon,
-                "cobalt-TextField--withValue": inputRef.current && inputRef.current.value.length > 0,
-            }) },
-            React.createElement(Combobox.Input, { className: "cobalt-TextField__Input", ref: inputRef, disabled: disabled, defaultValue: defaultInputValue, ...inputProps, onKeyDown: (e) => {
-                    onKeyDown && onKeyDown(e);
-                    if (onSelectItem &&
-                        e.keyCode === KEY_CODE_ENTER &&
-                        combobox.highlightedItem) {
-                        const processSelection = onSelectItem(combobox.highlightedItem, combobox.inputValue);
-                        if (!processSelection) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                        }
-                    }
-                } }),
-            icon && (React.createElement(Icon, { source: icon, color: "primary", className: "cobalt-TextField__Icon" })),
-            value.length > 0 && !disabled && (React.createElement(Combobox.ClearTrigger, { className: "cobalt-Autocomplete__clear-button", role: "clear", onClick: () => {
-                    setDefaultInputValue("");
-                    setValue("");
-                    setAutocompleteKey(!autocompleteKey);
-                    minQueryLength === 0 &&
-                        setTimeout(() => {
-                            var _a;
-                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                        }, 0);
-                    onClearValue && onClearValue();
-                    onQueryChange && onQueryChange("");
-                } },
-                React.createElement(Icon, { source: "close", size: 16 })))),
-        React.createElement(Portal, null,
-            React.createElement(Combobox.Positioner, { className: "cobalt-Autocomplete__positioner" },
-                React.createElement(Combobox.Content, { className: cx("cobalt-Autocomplete__content", popoverClassName, {
-                        "cobalt-Autocomplete__content--empty": validItems.length === 0,
-                    }) }, validItems.map((item, index) => (React.createElement(Combobox.Item, { key: index, item: item, className: "cobalt-Autocomplete__item" }, renderItem ? (React.createElement("div", { onClick: (e) => {
-                        if (onSelectItem) {
-                            const processSelection = onSelectItem(item, combobox.inputValue);
-                            if (!processSelection) {
-                                e.preventDefault();
-                                e.stopPropagation();
+        }), children: [label && (jsx(Combobox.Label, { className: "cobalt-FormField__Label", children: label })), jsxs(Combobox.Control, { className: cx("cobalt-TextField", {
+                    "cobalt-TextField--error": status === "error",
+                    "cobalt-TextField--success": status === "success",
+                    "cobalt-TextField--withIcon": icon,
+                    "cobalt-TextField--withValue": inputRef.current && inputRef.current.value.length > 0,
+                }), children: [jsx(Combobox.Input, { className: "cobalt-TextField__Input", ref: inputRef, disabled: disabled, defaultValue: defaultInputValue, ...inputProps, onKeyDown: (e) => {
+                            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+                            if (onSelectItem &&
+                                e.keyCode === KEY_CODE_ENTER &&
+                                combobox.highlightedItem) {
+                                const processSelection = onSelectItem(combobox.highlightedItem, combobox.inputValue);
+                                if (!processSelection) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }
                             }
-                        }
-                    } }, renderItem(item, combobox.inputValue))) : (React.createElement("div", { className: cx("cobalt-Autocomplete__item-wrapper", {
-                        "cobalt-Autocomplete__item-wrapper--disabled": item.disabled,
-                    }) },
-                    icon && (React.createElement("span", { className: "cobalt-Autocomplete__item-icon" },
-                        React.createElement(Icon, { source: icon, color: "primary" }))),
-                    React.createElement(Combobox.ItemText, { className: "cobalt-Autocomplete__item-label" }, item.label),
-                    React.createElement(Combobox.ItemIndicator, { className: "cobalt-Autocomplete_selected-item-indicator" },
-                        React.createElement(CheckIcon, { size: 16 }))))))))))));
-    return label || hint ? (React.createElement("div", { className: cx("cobalt-FormField", {
+                        } }), icon && (jsx(Icon, { source: icon, color: "primary", className: "cobalt-TextField__Icon" })), value.length > 0 && !disabled && (jsx(Combobox.ClearTrigger, { className: "cobalt-Autocomplete__clear-button", "data-testid": "clear", onClick: () => {
+                            setDefaultInputValue("");
+                            setValue("");
+                            setAutocompleteKey(!autocompleteKey);
+                            minQueryLength === 0 &&
+                                setTimeout(() => {
+                                    var _a;
+                                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                }, 0);
+                            onClearValue === null || onClearValue === void 0 ? void 0 : onClearValue();
+                            onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange("");
+                        }, children: jsx(Icon, { source: "close", size: 16 }) }))] }), jsx(Portal, { children: jsx(Combobox.Positioner, { className: "cobalt-Autocomplete__positioner", children: jsx(Combobox.Content, { className: cx("cobalt-Autocomplete__content", popoverClassName, {
+                            "cobalt-Autocomplete__content--empty": validItems.length === 0,
+                        }), children: validItems.map((item, index) => (jsx(Combobox.Item, { item: item, className: "cobalt-Autocomplete__item", children: renderItem ? (jsx("div", { ...getA11yOnClick((e) => {
+                                    if (onSelectItem) {
+                                        const processSelection = onSelectItem(item, combobox.inputValue);
+                                        if (!processSelection) {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                        }
+                                    }
+                                }), children: renderItem(item, combobox.inputValue) })) : (jsxs("div", { className: cx("cobalt-Autocomplete__item-wrapper", {
+                                    "cobalt-Autocomplete__item-wrapper--disabled": item.disabled,
+                                }), children: [icon && (jsx("span", { className: "cobalt-Autocomplete__item-icon", children: jsx(Icon, { source: icon, color: "primary" }) })), jsx(Combobox.ItemText, { className: "cobalt-Autocomplete__item-label", children: item.label }), jsx(Combobox.ItemIndicator, { className: "cobalt-Autocomplete_selected-item-indicator", children: jsx(CheckIcon, { size: 16 }) })] })) }, `${item.label}-${item.value}-${index}`))) }) }) })] }, `${autocompleteKey}`));
+    return label || hint ? (jsxs("div", { className: cx("cobalt-FormField", {
             "cobalt-FormField--withHint": hint,
             "cobalt-FormField--fullWidth": fullWidth,
-        }) },
-        autocomplete,
-        hint && (React.createElement(Hint, { status: status },
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: hint } }))))) : (React.createElement(React.Fragment, null, autocomplete));
+        }), children: [autocomplete, hint && (jsx(Hint, { status: status, children: jsx("span", { dangerouslySetInnerHTML: { __html: hint } }) }))] })) : (autocomplete);
 });
 Autocomplete.displayName = "Autocomplete";
 

package/components/Form/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useImperativeHandle,\n  forwardRef,\n} from \"react\"\nimport { useState } from \"react\"\nimport cx from \"classnames\"\n\nimport { CheckIcon, Icon, IconSources } from \"../../Icon\"\n\nimport { FormElement } from \"../form\"\nimport {\n  Combobox,\n  createListCollection,\n  Portal,\n  useCombobox,\n} from \"@ark-ui/react\"\nimport { Hint } from \"../Hint\"\nimport { nanoid } from \"nanoid\"\n\nexport type AutocompleteItemInput =\n  | string\n  | {\n      [x: string]: any\n      icon?: IconSources\n      label?: string\n      value: string\n      disabled?: boolean\n    }\n\nexport type AutocompleteItem = {\n  [x: string]: any\n  icon?: IconSources\n  label: string\n  value: string\n  disabled?: boolean\n}\n\nexport type AutocompleteRefType = {\n  query: string\n  input: HTMLInputElement\n  open: () => void\n  focus: () => void\n  clearValue: () => void\n  setSelectedItem: (item: AutocompleteItemInput) => void\n}\n\ntype Props = {\n  className?: string\n  label?: string\n  hint?: string\n  fullWidth?: boolean\n  icon?: IconSources\n  items: AutocompleteItemInput[]\n  popoverClassName?: string\n  minQueryLength?: number\n  autoFilter?: boolean\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onClearValue?: () => void\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n  allowCustomValue?: boolean\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction sanitizeItem(item: AutocompleteItemInput) {\n  if (typeof item === \"string\") {\n    // If the item is a string, create an object with label and value being the string\n    return { label: item, value: item }\n  } else {\n    // If the item is an object, ensure it has a label property\n    const { value, label } = item\n    return { ...item, label: label ?? value }\n  }\n}\n\nfunction sanitizeItems(items: AutocompleteItemInput[]) {\n  return items.map((item) => sanitizeItem(item))\n}\n\nconst HIGHLIGHT_CLASSNAME = \"autocomplete_matching_query\"\nconst regExpEscape = (s: string) => s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\")\n\ntype AutocompleteMatchHighlightPropsType = {\n  label: string\n  query: string\n  matchClassName?: string\n}\n\nexport const AutocompleteMatchHighlight = ({\n  label,\n  query,\n  matchClassName = HIGHLIGHT_CLASSNAME,\n}: AutocompleteMatchHighlightPropsType) => {\n  if (query.trim().length === 0) return label\n\n  const queryRX = RegExp(`(${regExpEscape(query)})`, \"gi\")\n\n  return (\n    <>\n      {label.split(queryRX).map((part, i) =>\n        part.match(queryRX) ? (\n          <span className={cx(matchClassName)} key={i}>\n            {part}\n          </span>\n        ) : (\n          part\n        )\n      )}\n    </>\n  )\n}\n\nconst KEY_CODE_ENTER = 13\n\nconst ignoreItemValue = nanoid()\n\nconst Autocomplete = forwardRef(\n  (\n    {\n      id,\n      className,\n      label,\n      hint,\n      fullWidth,\n      icon,\n      status,\n      focusOnInit = false,\n      popoverClassName,\n      minQueryLength = 1,\n      onQueryChange,\n      onSelectItem,\n      renderItem,\n      items,\n      onKeyDown,\n      disabled,\n      defaultValue,\n      onClearValue,\n      allowCustomValue = true,\n      ...inputProps\n    }: Props,\n    ref\n  ) => {\n    const [defaultInputValue, setDefaultInputValue] = useState(defaultValue)\n    const [autocompleteKey, setAutocompleteKey] = useState(true)\n\n    const isInputValidChangedProgrammatically = useRef(false)\n    const sanitizedInitialItems = useMemo(() => sanitizeItems(items), [items])\n\n    const [value, setValue] = useState<string>((defaultValue as string) || \"\")\n    const [popoverItems, setPopoverItems] = useState(sanitizedInitialItems)\n\n    const collection = useMemo(\n      () =>\n        createListCollection({\n          items: popoverItems.length\n            ? popoverItems\n            : sanitizeItems([{ value: ignoreItemValue }]), // having an empty collection makes the component buggy. Best practice is to always have an \"instruction\" item when empty. This dummy item will not be displayed\n        }),\n      [popoverItems]\n    )\n\n    const handleInputChange = (details: Combobox.InputValueChangeDetails) => {\n      if (isInputValidChangedProgrammatically.current) {\n        isInputValidChangedProgrammatically.current = false\n        return\n      }\n\n      onQueryChange\n        ? onQueryChange(details.inputValue)\n        : setPopoverItems(\n            sanitizedInitialItems.filter((item) =>\n              item.label\n                .toLowerCase()\n                .includes(details.inputValue.toLowerCase())\n            )\n          )\n    }\n\n    useEffect(() => {\n      setPopoverItems(sanitizeItems(items))\n    }, [items])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const combobox = useCombobox({\n      ...(id ? { id } : {}),\n      allowCustomValue: allowCustomValue,\n      autoFocus: focusOnInit,\n      value: [value],\n      collection: collection,\n      onInputValueChange: handleInputChange,\n      openOnClick: minQueryLength === 0 && collection.items.length > 0,\n      onValueChange: (details) => {\n        isInputValidChangedProgrammatically.current = true\n        details.items[0]\n          ? setValue((details.items[0] as AutocompleteItem).value)\n          : setValue(\"\")\n      },\n      onInteractOutside: () => {\n        setTimeout(() => inputRef.current?.blur(), 30)\n      },\n      positioning: {\n        gutter: -3,\n        flip: false,\n      },\n    })\n\n    useImperativeHandle(ref, (): AutocompleteRefType => {\n      return {\n        query: combobox.inputValue,\n        input: inputRef.current as HTMLInputElement,\n        open: () => {\n          combobox.setOpen(true)\n        },\n        focus: () => {\n          combobox.focus()\n        },\n        clearValue: () => {\n          combobox.clearValue()\n          setValue(\"\")\n          setDefaultInputValue(\"\")\n          onClearValue && onClearValue()\n          onQueryChange && onQueryChange(\"\")\n        },\n        setSelectedItem: (selectedItem: AutocompleteItemInput) => {\n          isInputValidChangedProgrammatically.current = true\n          const sanitizedItem = sanitizeItem(selectedItem)\n          const existingItem = popoverItems.find(\n            (item) => item.value === sanitizedItem.value\n          )\n\n          if (!existingItem) {\n            combobox.setOpen(false)\n            setPopoverItems([])\n            setDefaultInputValue(sanitizedItem.value)\n            setValue(sanitizedItem.value)\n            setAutocompleteKey(!autocompleteKey)\n          } else {\n            setValue(sanitizedItem.value)\n            combobox.setOpen(false)\n          }\n        },\n      }\n    }, [combobox])\n\n    useEffect(() => {\n      focusOnInit && combobox.setOpen(collection.items.length > 0)\n    }, [])\n\n    const validItems = collection.items.filter(\n      (item) => item.value !== ignoreItemValue\n    )\n\n    useEffect(() => {\n      validItems.length === 0 && combobox.setOpen(false)\n\n      combobox.focused &&\n        collection.items.length > 0 &&\n        !combobox.open &&\n        combobox.setOpen(true)\n    }, [collection.items.length])\n\n    const autocomplete = (\n      <Combobox.RootProvider\n        value={combobox}\n        className={cx(\"cobalt-Autocomplete\", className, {\n          \"cobalt-Autocomplete--empty\": validItems.length === 0,\n        })}\n        key={\"\" + autocompleteKey}\n      >\n        {label && (\n          <Combobox.Label className=\"cobalt-FormField__Label\">\n            {label}\n          </Combobox.Label>\n        )}\n        <Combobox.Control\n          className={cx(\"cobalt-TextField\", {\n            \"cobalt-TextField--error\": status === \"error\",\n            \"cobalt-TextField--success\": status === \"success\",\n            \"cobalt-TextField--withIcon\": icon,\n            \"cobalt-TextField--withValue\":\n              inputRef.current && inputRef.current.value.length > 0,\n          })}\n        >\n          <Combobox.Input\n            className=\"cobalt-TextField__Input\"\n            ref={inputRef}\n            disabled={disabled}\n            defaultValue={defaultInputValue}\n            {...inputProps}\n            onKeyDown={(e) => {\n              onKeyDown && onKeyDown(e)\n              if (\n                onSelectItem &&\n                e.keyCode === KEY_CODE_ENTER &&\n                combobox.highlightedItem\n              ) {\n                const processSelection = onSelectItem(\n                  combobox.highlightedItem as AutocompleteItem,\n                  combobox.inputValue\n                )\n\n                if (!processSelection) {\n                  e.preventDefault()\n                  e.stopPropagation()\n                }\n              }\n            }}\n          />\n          {icon && (\n            <Icon\n              source={icon}\n              color=\"primary\"\n              className=\"cobalt-TextField__Icon\"\n            />\n          )}\n          {value.length > 0 && !disabled && (\n            <Combobox.ClearTrigger\n              className=\"cobalt-Autocomplete__clear-button\"\n              role=\"clear\"\n              onClick={() => {\n                setDefaultInputValue(\"\")\n                setValue(\"\")\n                setAutocompleteKey(!autocompleteKey)\n                minQueryLength === 0 &&\n                  setTimeout(() => {\n                    inputRef.current?.click()\n                  }, 0)\n                onClearValue && onClearValue()\n                onQueryChange && onQueryChange(\"\")\n              }}\n            >\n              <Icon source=\"close\" size={16} />\n            </Combobox.ClearTrigger>\n          )}\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner className=\"cobalt-Autocomplete__positioner\">\n            <Combobox.Content\n              className={cx(\"cobalt-Autocomplete__content\", popoverClassName, {\n                \"cobalt-Autocomplete__content--empty\": validItems.length === 0,\n              })}\n            >\n              {validItems.map((item: AutocompleteItem, index: number) => (\n                <Combobox.Item\n                  key={index}\n                  item={item}\n                  className=\"cobalt-Autocomplete__item\"\n                >\n                  {renderItem ? (\n                    <div\n                      onClick={(e) => {\n                        if (onSelectItem) {\n                          const processSelection = onSelectItem(\n                            item,\n                            combobox.inputValue\n                          )\n\n                          if (!processSelection) {\n                            e.preventDefault()\n                            e.stopPropagation()\n                          }\n                        }\n                      }}\n                    >\n                      {renderItem(item, combobox.inputValue)}\n                    </div>\n                  ) : (\n                    <div\n                      className={cx(\"cobalt-Autocomplete__item-wrapper\", {\n                        \"cobalt-Autocomplete__item-wrapper--disabled\":\n                          item.disabled,\n                      })}\n                    >\n                      {icon && (\n                        <span className=\"cobalt-Autocomplete__item-icon\">\n                          <Icon source={icon} color=\"primary\" />\n                        </span>\n                      )}\n                      <Combobox.ItemText className=\"cobalt-Autocomplete__item-label\">\n                        {item.label}\n                      </Combobox.ItemText>\n                      <Combobox.ItemIndicator className=\"cobalt-Autocomplete_selected-item-indicator\">\n                        <CheckIcon size={16} />\n                      </Combobox.ItemIndicator>\n                    </div>\n                  )}\n                </Combobox.Item>\n              ))}\n            </Combobox.Content>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.RootProvider>\n    )\n\n    return label || hint ? (\n      <div\n        className={cx(\"cobalt-FormField\", {\n          \"cobalt-FormField--withHint\": hint,\n          \"cobalt-FormField--fullWidth\": fullWidth,\n        })}\n      >\n        {autocomplete}\n        {hint && (\n          <Hint status={status}>\n            <span dangerouslySetInnerHTML={{ __html: hint }} />\n          </Hint>\n        )}\n      </div>\n    ) : (\n      <>{autocomplete}</>\n    )\n  }\n)\n\nAutocomplete.displayName = \"Autocomplete\"\n\nexport { Autocomplete }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import {\n  Combobox,\n  createListCollection,\n  Portal,\n  useCombobox,\n} from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { nanoid } from \"nanoid\"\nimport type React from \"react\"\nimport {\n  Fragment,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { getA11yOnClick } from \"../../../helpers\"\nimport { useOnMountEffect } from \"../../../hooks/useOnMountEffect\"\nimport { CheckIcon, Icon, type IconSources } from \"../../Icon\"\nimport type { FormElement } from \"../form\"\nimport { Hint } from \"../Hint\"\n\nexport type AutocompleteItemInput =\n  | string\n  | {\n      [x: string]: unknown\n      icon?: IconSources\n      label?: string\n      value: string\n      disabled?: boolean\n    }\n\nexport type AutocompleteItem = {\n  [x: string]: unknown\n  icon?: IconSources\n  label: string\n  value: string\n  disabled?: boolean\n  description?: string\n}\n\nexport type AutocompleteRefType = {\n  query: string\n  input: HTMLInputElement\n  open: () => void\n  focus: () => void\n  clearValue: () => void\n  setSelectedItem: (item: AutocompleteItemInput) => void\n}\n\ntype Props = {\n  className?: string\n  label?: string\n  hint?: string\n  fullWidth?: boolean\n  icon?: IconSources\n  items: AutocompleteItemInput[]\n  popoverClassName?: string\n  minQueryLength?: number\n  autoFilter?: boolean\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onClearValue?: () => void\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n  allowCustomValue?: boolean\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction sanitizeItem(item: AutocompleteItemInput) {\n  if (typeof item === \"string\") {\n    // If the item is a string, create an object with label and value being the string\n    return { label: item, value: item }\n  } else {\n    // If the item is an object, ensure it has a label property\n    const { value, label } = item\n    return { ...item, label: label ?? value }\n  }\n}\n\nfunction sanitizeItems(items: AutocompleteItemInput[]) {\n  return items.map((item) => sanitizeItem(item))\n}\n\nconst HIGHLIGHT_CLASSNAME = \"autocomplete_matching_query\"\nconst regExpEscape = (s: string) => s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\")\n\ntype AutocompleteMatchHighlightPropsType = {\n  label: string\n  query: string\n  matchClassName?: string\n}\n\nexport const AutocompleteMatchHighlight = ({\n  label,\n  query,\n  matchClassName = HIGHLIGHT_CLASSNAME,\n}: AutocompleteMatchHighlightPropsType) => {\n  if (query.trim().length === 0) return label\n\n  const queryRX = RegExp(`(${regExpEscape(query)})`, \"gi\")\n\n  const parts = label.split(queryRX)\n\n  return (\n    <>\n      {parts.map((part, index) => {\n        const key = `${index}-${part}`\n        return part.match(queryRX) ? (\n          <span className={cx(matchClassName)} key={key}>\n            {part}\n          </span>\n        ) : (\n          <Fragment key={key}>{part}</Fragment>\n        )\n      })}\n    </>\n  )\n}\n\nconst KEY_CODE_ENTER = 13\n\nconst ignoreItemValue = nanoid()\n\nconst Autocomplete = forwardRef(\n  (\n    {\n      id,\n      className,\n      label,\n      hint,\n      fullWidth,\n      icon,\n      status,\n      focusOnInit = false,\n      popoverClassName,\n      minQueryLength = 1,\n      onQueryChange,\n      onSelectItem,\n      renderItem,\n      items,\n      onKeyDown,\n      disabled,\n      defaultValue,\n      onClearValue,\n      allowCustomValue = true,\n      ...inputProps\n    }: Props,\n    ref,\n  ) => {\n    const [defaultInputValue, setDefaultInputValue] = useState(defaultValue)\n    const [autocompleteKey, setAutocompleteKey] = useState(true)\n\n    const isInputValidChangedProgrammatically = useRef(false)\n    const sanitizedInitialItems = useMemo(() => sanitizeItems(items), [items])\n\n    const [value, setValue] = useState<string>((defaultValue as string) || \"\")\n    const [popoverItems, setPopoverItems] = useState(sanitizedInitialItems)\n    // Allow to use the combobox without listening its changes\n    const comboboxRef = useRef<ReturnType<\n      typeof useCombobox<AutocompleteItem>\n    > | null>(null)\n\n    const collection = useMemo(\n      () =>\n        createListCollection({\n          items: popoverItems.length\n            ? popoverItems\n            : sanitizeItems([{ value: ignoreItemValue }]), // having an empty collection makes the component buggy. Best practice is to always have an \"instruction\" item when empty. This dummy item will not be displayed\n        }),\n      [popoverItems],\n    )\n\n    const handleInputChange = (details: Combobox.InputValueChangeDetails) => {\n      if (isInputValidChangedProgrammatically.current) {\n        isInputValidChangedProgrammatically.current = false\n        return\n      }\n\n      onQueryChange\n        ? onQueryChange(details.inputValue)\n        : setPopoverItems(\n            sanitizedInitialItems.filter((item) =>\n              item.label\n                .toLowerCase()\n                .includes(details.inputValue.toLowerCase()),\n            ),\n          )\n    }\n\n    useEffect(() => {\n      setPopoverItems(sanitizeItems(items))\n    }, [items])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const combobox = useCombobox({\n      ...(id ? { id } : {}),\n      allowCustomValue: allowCustomValue,\n      autoFocus: focusOnInit,\n      value: [value],\n      collection: collection,\n      onInputValueChange: handleInputChange,\n      openOnClick: minQueryLength === 0 && collection.items.length > 0,\n      onValueChange: (details) => {\n        isInputValidChangedProgrammatically.current = true\n        details.items[0]\n          ? setValue((details.items[0] as AutocompleteItem).value)\n          : setValue(\"\")\n      },\n      onInteractOutside: () => {\n        setTimeout(() => inputRef.current?.blur(), 30)\n      },\n      positioning: {\n        gutter: -3,\n        flip: false,\n      },\n    })\n\n    useEffect(() => {\n      comboboxRef.current = combobox\n    }, [combobox])\n\n    useImperativeHandle(ref, (): AutocompleteRefType => {\n      return {\n        query: combobox.inputValue,\n        input: inputRef.current as HTMLInputElement,\n        open: () => {\n          combobox.setOpen(true)\n        },\n        focus: () => {\n          combobox.focus()\n        },\n        clearValue: () => {\n          combobox.clearValue()\n          setValue(\"\")\n          setDefaultInputValue(\"\")\n          onClearValue?.()\n          onQueryChange?.(\"\")\n        },\n        setSelectedItem: (selectedItem: AutocompleteItemInput) => {\n          isInputValidChangedProgrammatically.current = true\n          const sanitizedItem = sanitizeItem(selectedItem)\n          const existingItem = popoverItems.find(\n            (item) => item.value === sanitizedItem.value,\n          )\n\n          if (!existingItem) {\n            combobox.setOpen(false)\n            setPopoverItems([])\n            setDefaultInputValue(sanitizedItem.value)\n            setValue(sanitizedItem.value)\n            setAutocompleteKey(!autocompleteKey)\n          } else {\n            setValue(sanitizedItem.value)\n            combobox.setOpen(false)\n          }\n        },\n      }\n    }, [combobox, autocompleteKey, onClearValue, onQueryChange, popoverItems])\n\n    useOnMountEffect(() => {\n      focusOnInit && combobox.setOpen(collection.items.length > 0)\n    })\n\n    const validItems = useMemo(\n      () => collection.items.filter((item) => item.value !== ignoreItemValue),\n      [collection.items],\n    )\n\n    useEffect(() => {\n      if (validItems.length) {\n        if (!comboboxRef.current?.open && comboboxRef.current?.focused) {\n          comboboxRef.current.setOpen(true)\n        }\n      } else {\n        if (comboboxRef.current?.open) {\n          comboboxRef.current.setOpen(false)\n        }\n      }\n    }, [validItems])\n\n    const autocomplete = (\n      <Combobox.RootProvider\n        value={combobox}\n        className={cx(\"cobalt-Autocomplete\", className, {\n          \"cobalt-Autocomplete--empty\": validItems.length === 0,\n        })}\n        key={`${autocompleteKey}`}\n      >\n        {label && (\n          <Combobox.Label className=\"cobalt-FormField__Label\">\n            {label}\n          </Combobox.Label>\n        )}\n        <Combobox.Control\n          className={cx(\"cobalt-TextField\", {\n            \"cobalt-TextField--error\": status === \"error\",\n            \"cobalt-TextField--success\": status === \"success\",\n            \"cobalt-TextField--withIcon\": icon,\n            \"cobalt-TextField--withValue\":\n              inputRef.current && inputRef.current.value.length > 0,\n          })}\n        >\n          <Combobox.Input\n            className=\"cobalt-TextField__Input\"\n            ref={inputRef}\n            disabled={disabled}\n            defaultValue={defaultInputValue}\n            {...inputProps}\n            onKeyDown={(e) => {\n              onKeyDown?.(e)\n              if (\n                onSelectItem &&\n                e.keyCode === KEY_CODE_ENTER &&\n                combobox.highlightedItem\n              ) {\n                const processSelection = onSelectItem(\n                  combobox.highlightedItem as AutocompleteItem,\n                  combobox.inputValue,\n                )\n\n                if (!processSelection) {\n                  e.preventDefault()\n                  e.stopPropagation()\n                }\n              }\n            }}\n          />\n          {icon && (\n            <Icon\n              source={icon}\n              color=\"primary\"\n              className=\"cobalt-TextField__Icon\"\n            />\n          )}\n          {value.length > 0 && !disabled && (\n            <Combobox.ClearTrigger\n              className=\"cobalt-Autocomplete__clear-button\"\n              data-testid=\"clear\"\n              onClick={() => {\n                setDefaultInputValue(\"\")\n                setValue(\"\")\n                setAutocompleteKey(!autocompleteKey)\n                minQueryLength === 0 &&\n                  setTimeout(() => {\n                    inputRef.current?.click()\n                  }, 0)\n                onClearValue?.()\n                onQueryChange?.(\"\")\n              }}\n            >\n              <Icon source=\"close\" size={16} />\n            </Combobox.ClearTrigger>\n          )}\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner className=\"cobalt-Autocomplete__positioner\">\n            <Combobox.Content\n              className={cx(\"cobalt-Autocomplete__content\", popoverClassName, {\n                \"cobalt-Autocomplete__content--empty\": validItems.length === 0,\n              })}\n            >\n              {validItems.map((item: AutocompleteItem, index: number) => (\n                <Combobox.Item\n                  key={`${item.label}-${item.value}-${index}`}\n                  item={item}\n                  className=\"cobalt-Autocomplete__item\"\n                >\n                  {renderItem ? (\n                    <div\n                      {...getA11yOnClick((e) => {\n                        if (onSelectItem) {\n                          const processSelection = onSelectItem(\n                            item,\n                            combobox.inputValue,\n                          )\n\n                          if (!processSelection) {\n                            e.preventDefault()\n                            e.stopPropagation()\n                          }\n                        }\n                      })}\n                    >\n                      {renderItem(item, combobox.inputValue)}\n                    </div>\n                  ) : (\n                    <div\n                      className={cx(\"cobalt-Autocomplete__item-wrapper\", {\n                        \"cobalt-Autocomplete__item-wrapper--disabled\":\n                          item.disabled,\n                      })}\n                    >\n                      {icon && (\n                        <span className=\"cobalt-Autocomplete__item-icon\">\n                          <Icon source={icon} color=\"primary\" />\n                        </span>\n                      )}\n                      <Combobox.ItemText className=\"cobalt-Autocomplete__item-label\">\n                        {item.label}\n                      </Combobox.ItemText>\n                      <Combobox.ItemIndicator className=\"cobalt-Autocomplete_selected-item-indicator\">\n                        <CheckIcon size={16} />\n                      </Combobox.ItemIndicator>\n                    </div>\n                  )}\n                </Combobox.Item>\n              ))}\n            </Combobox.Content>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.RootProvider>\n    )\n\n    return label || hint ? (\n      <div\n        className={cx(\"cobalt-FormField\", {\n          \"cobalt-FormField--withHint\": hint,\n          \"cobalt-FormField--fullWidth\": fullWidth,\n        })}\n      >\n        {autocomplete}\n        {hint && (\n          <Hint status={status}>\n            {/** biome-ignore lint/security/noDangerouslySetInnerHtml: Allow to pass content from the HAML template*/}\n            <span dangerouslySetInnerHTML={{ __html: hint }} />\n          </Hint>\n        )}\n      </div>\n    ) : (\n      autocomplete\n    )\n  },\n)\n\nAutocomplete.displayName = \"Autocomplete\"\n\nexport { Autocomplete }\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/components/Form/CheckablePill.js

@@ -1,29 +1,24 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 import { withFieldLabelAndHint } from './field.js';
 
 const CheckablePill = ({ type, icon, value, children, defaultChecked, status, ...InputProps }) => {
-    return (React.createElement("span", { className: cx("cobalt-CheckablePillField", {
+    return (jsx("span", { className: cx("cobalt-CheckablePillField", {
             "cobalt-CheckablePillField--error": status === "error",
             "cobalt-CheckablePillField--with-icon": icon,
-        }) },
-        React.createElement("label", { className: "cobalt-CheckablePillField__LabelWrapper" },
-            React.createElement("input", { ...InputProps, type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked }),
-            React.createElement("span", { className: "cobalt-CheckablePillField__Label" },
-                icon && React.createElement(Icon, { source: icon }),
-                children))));
+        }), children: jsxs("label", { className: "cobalt-CheckablePillField__LabelWrapper", children: [jsx("input", { ...InputProps, type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked }), jsxs("span", { className: "cobalt-CheckablePillField__Label", children: [icon && jsx(Icon, { source: icon }), children] })] }) }));
 };
 const CheckboxPill = ({ ...props }) => {
-    return React.createElement(CheckablePill, { ...props, type: "checkbox" });
+    return jsx(CheckablePill, { ...props, type: "checkbox" });
 };
 CheckboxPill.displayName = "CheckboxPill";
 const RadioPill = ({ ...props }) => {
-    return React.createElement(CheckablePill, { ...props, type: "radio" });
+    return jsx(CheckablePill, { ...props, type: "radio" });
 };
 RadioPill.displayName = "RadioPill";
 const _CheckablePillsGroup = ({ children }) => {
-    return (React.createElement("div", { className: "cobalt-CheckablePillsGroup" }, typeof children === "function" ? children() : children));
+    return (jsx("div", { className: "cobalt-CheckablePillsGroup", children: typeof children === "function" ? children() : children }));
 };
 const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
 CheckablePillsGroup.displayName = "CheckablePillsGroup";

package/components/Form/CheckablePill.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckablePill.js","sources":["../../../src/components/Form/CheckablePill.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon, IconSources } from \"../Icon\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  type?: \"checkbox\" | \"radio\"\n  icon?: IconSources\n  value: string\n  children: React.ReactNode\n  defaultChecked?: boolean\n  name: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst CheckablePill = ({\n  type,\n  icon,\n  value,\n  children,\n  defaultChecked,\n  status,\n  ...InputProps\n}: Props) => {\n  return (\n    <span\n      className={classNames(\"cobalt-CheckablePillField\", {\n        \"cobalt-CheckablePillField--error\": status === \"error\",\n        \"cobalt-CheckablePillField--with-icon\": icon,\n      })}\n    >\n      <label className=\"cobalt-CheckablePillField__LabelWrapper\">\n        <input\n          {...InputProps}\n          type={type}\n          className=\"cobalt-CheckablePillField__Input\"\n          value={value}\n          defaultChecked={defaultChecked}\n        />\n        <span className=\"cobalt-CheckablePillField__Label\">\n          {icon && <Icon source={icon} />}\n          {children}\n        </span>\n      </label>\n    </span>\n  )\n}\n\nexport const CheckboxPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"checkbox\" />\n}\nCheckboxPill.displayName = \"CheckboxPill\"\n\nexport const RadioPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"radio\" />\n}\nRadioPill.displayName = \"RadioPill\"\n\ninterface CheckablePillsGroupProps {\n  children: React.ReactNode | (() => React.ReactNode)\n}\n\nconst _CheckablePillsGroup = ({ children }: CheckablePillsGroupProps) => {\n  return (\n    <div className=\"cobalt-CheckablePillsGroup\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nexport const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup)\nCheckablePillsGroup.displayName = \"CheckablePillsGroup\"\n"],"names":["classNames"],"mappings":";;;;;AAgBA,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAM,EACN,GAAG,UAAU,EACP,KAAI;AACV,IAAA,QACE,KACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,2BAA2B,EAAE;YACjD,kCAAkC,EAAE,MAAM,KAAK,OAAO;AACtD,YAAA,sCAAsC,EAAE,IAAI;SAC7C,CAAC,EAAA;QAEF,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,yCAAyC,EAAA;AACxD,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,UAAU,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,CAAA;YACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;AAC/C,gBAAA,IAAI,IAAI,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAE,IAAI,EAAI,CAAA;AAC9B,gBAAA,QAAQ,CACJ,CACD,CACH,EACR;AACH,CAAC,CAAA;AAEY,MAAA,YAAY,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAClD,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,UAAU,EAAA,CAAG,CAAA;AACrD,EAAC;AACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAE5B,MAAA,SAAS,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG,CAAA;AAClD,EAAC;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAMnC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACtE,QACE,6BAAK,SAAS,EAAC,4BAA4B,EACxC,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;MAEY,mBAAmB,GAAG,qBAAqB,CAAC,oBAAoB,EAAC;AAC9E,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"CheckablePill.js","sources":["../../../src/components/Form/CheckablePill.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport type React from \"react\"\nimport { Icon, type IconSources } from \"../Icon\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport type { FormElement } from \"./form\"\n\ntype Props = {\n  type?: \"checkbox\" | \"radio\"\n  icon?: IconSources\n  value: string\n  children: React.ReactNode\n  defaultChecked?: boolean\n  name: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst CheckablePill = ({\n  type,\n  icon,\n  value,\n  children,\n  defaultChecked,\n  status,\n  ...InputProps\n}: Props) => {\n  return (\n    <span\n      className={classNames(\"cobalt-CheckablePillField\", {\n        \"cobalt-CheckablePillField--error\": status === \"error\",\n        \"cobalt-CheckablePillField--with-icon\": icon,\n      })}\n    >\n      <label className=\"cobalt-CheckablePillField__LabelWrapper\">\n        <input\n          {...InputProps}\n          type={type}\n          className=\"cobalt-CheckablePillField__Input\"\n          value={value}\n          defaultChecked={defaultChecked}\n        />\n        <span className=\"cobalt-CheckablePillField__Label\">\n          {icon && <Icon source={icon} />}\n          {children}\n        </span>\n      </label>\n    </span>\n  )\n}\n\nexport const CheckboxPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"checkbox\" />\n}\nCheckboxPill.displayName = \"CheckboxPill\"\n\nexport const RadioPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"radio\" />\n}\nRadioPill.displayName = \"RadioPill\"\n\ninterface CheckablePillsGroupProps {\n  children: React.ReactNode | (() => React.ReactNode)\n}\n\nconst _CheckablePillsGroup = ({ children }: CheckablePillsGroupProps) => {\n  return (\n    <div className=\"cobalt-CheckablePillsGroup\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nexport const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup)\nCheckablePillsGroup.displayName = \"CheckablePillsGroup\"\n"],"names":["_jsx","classNames","_jsxs"],"mappings":";;;;;AAgBA,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAM,EACN,GAAG,UAAU,EACP,KAAI;AACV,IAAA,QACEA,GACE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEC,EAAU,CAAC,2BAA2B,EAAE;YACjD,kCAAkC,EAAE,MAAM,KAAK,OAAO;AACtD,YAAA,sCAAsC,EAAE,IAAI;SAC7C,CAAC,EAAA,QAAA,EAEFC,gBAAO,SAAS,EAAC,yCAAyC,EACxD,QAAA,EAAA,CAAAF,GAAA,CAAA,OAAA,EAAA,EAAA,GACM,UAAU,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,CAAA,EACFE,eAAM,SAAS,EAAC,kCAAkC,EAC/C,QAAA,EAAA,CAAA,IAAI,IAAIF,GAAC,CAAA,IAAI,IAAC,MAAM,EAAE,IAAI,EAAI,CAAA,EAC9B,QAAQ,CACJ,EAAA,CAAA,CAAA,EAAA,CACD,EACH,CAAA,EACR;AACH,CAAC,CAAA;AAEY,MAAA,YAAY,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAClD,OAAOA,GAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,UAAU,EAAA,CAAG,CAAA;AACrD,EAAC;AACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAE5B,MAAA,SAAS,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAC/C,OAAOA,GAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG,CAAA;AAClD,EAAC;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAMnC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACtE,QACEA,aAAK,SAAS,EAAC,4BAA4B,EACxC,QAAA,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,EACnD,CAAA,EACP;AACH,CAAC,CAAA;MAEY,mBAAmB,GAAG,qBAAqB,CAAC,oBAAoB,EAAC;AAC9E,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}