@drivy/cobalt 0.29.2 → 0.31.0

package/cjs/tokens/theme.js

@@ -48,7 +48,7 @@ const text = {
 	base: "graphite/navy.700/grey.100",
 	baseInteractive: {
 		DEFAULT: "graphite/navy.700/grey.100",
-		hover: "graphite/navy.900/grey.100"
+		hover: "graphite/navy.300/grey.300"
 	},
 	subdued: "graphite.light/navy.300/grey.300",
 	subduedInteractive: {

package/components/Card/index.js

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import cx from 'classnames';
 
-const Card = ({ children, className, flattened }) => (React.createElement("div", { className: cx("cobalt-Card", className, {
-        "cobalt-Card--flattened": flattened,
+const Card = ({ children, className, legacy, responsive, }) => (React.createElement("div", { className: cx("cobalt-Card", className, {
+        "cobalt-Card--legacy": legacy,
+        "cobalt-Card--responsive": responsive,
     }) }, children));
 const getClasses = ({ className = "", tabBar, tight, subdued, divided, }) => {
     return cx(className, "cobalt-Card__Section", {

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  flattened?: boolean\n}\n\nexport const Card = ({ children, className, flattened }: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--flattened\": flattened,\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":";;;AASa,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAa,MAChE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACpC,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 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;;;;"}

package/components/Flash/index.js

@@ -8,9 +8,9 @@ const STATUS_ICONS_MAP = {
     error: "contextualWarningCircleFilled",
 };
 const STATUS_ICON_COLOR_MAP = {
-    info: "turquoise",
-    success: "green",
-    error: "red",
+    info: "info",
+    success: "success",
+    error: "error",
 };
 const Flash = ({ children, status = "info" }) => {
     const icon = STATUS_ICONS_MAP[status]
@@ -18,7 +18,7 @@ const Flash = ({ children, status = "info" }) => {
         : "infoFilled";
     const iconColor = STATUS_ICON_COLOR_MAP[status]
         ? STATUS_ICON_COLOR_MAP[status]
-        : "turquoise";
+        : "base";
     return (React.createElement("div", { className: `cobalt-Flash cobalt-Flash--${status}` },
         React.createElement("div", { className: "cobalt-Flash__wrapper" },
             React.createElement("span", { className: "cobalt-Flash__Icon" },

package/components/Flash/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Flash/index.tsx"],"sourcesContent":["import React from \"react\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nexport type FlashStatus = \"info\" | \"success\" | \"error\"\n\nexport interface FlashProps {\n  children: React.ReactNode\n  status: FlashStatus\n}\n\nconst ICON_SIZE = 20\n\nconst STATUS_ICONS_MAP: { [k in FlashStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in FlashStatus]: IconColorsType } = {\n  info: \"turquoise\",\n  success: \"green\",\n  error: \"red\",\n}\n\nexport const Flash = ({ children, status = \"info\" }: FlashProps) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"turquoise\"\n\n  return (\n    <div className={`cobalt-Flash cobalt-Flash--${status}`}>\n      <div className=\"cobalt-Flash__wrapper\">\n        <span className=\"cobalt-Flash__Icon\">\n          <Icon source={icon} size={ICON_SIZE} color={iconColor} />\n        </span>\n        <span className=\"cobalt-Flash__content\">{children}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,KAAK,EAAE,KAAK;CACb,CAAA;AAEM,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAc,KAAI;AACjE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,WAAW,CAAA;AAEf,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAA,2BAAA,EAA8B,MAAM,CAAE,CAAA,EAAA;QACpD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;YACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD;YACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACF,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Flash/index.tsx"],"sourcesContent":["import React from \"react\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nexport type FlashStatus = \"info\" | \"success\" | \"error\"\n\nexport interface FlashProps {\n  children: React.ReactNode\n  status: FlashStatus\n}\n\nconst ICON_SIZE = 20\n\nconst STATUS_ICONS_MAP: { [k in FlashStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in FlashStatus]: IconColorsType } = {\n  info: \"info\",\n  success: \"success\",\n  error: \"error\",\n}\n\nexport const Flash = ({ children, status = \"info\" }: FlashProps) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"base\"\n\n  return (\n    <div className={`cobalt-Flash cobalt-Flash--${status}`}>\n      <div className=\"cobalt-Flash__wrapper\">\n        <span className=\"cobalt-Flash__Icon\">\n          <Icon source={icon} size={ICON_SIZE} color={iconColor} />\n        </span>\n        <span className=\"cobalt-Flash__content\">{children}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAEM,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAc,KAAI;AACjE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,MAAM,CAAA;AAEV,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAA,2BAAA,EAA8B,MAAM,CAAE,CAAA,EAAA;QACpD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;YACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD;YACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACF,EACP;AACH;;;;"}

package/components/Form/Autocomplete/index.js

@@ -151,7 +151,7 @@ function Autocomplete({ id, icon, status, items, selectedItem, autoFilter = true
                     handleSelectItem(item, e);
                 } }, renderItem ? (renderItem(item, term)) : (React.createElement("span", { className: "cobalt-Autocomplete__item-wrapper" },
                 icon && (React.createElement("span", { className: "cobalt-Autocomplete__item-icon" },
-                    React.createElement(Icon, { source: icon, color: "indigo" }))),
+                    React.createElement(Icon, { source: icon, color: "accent" }))),
                 React.createElement("span", { className: "cobalt-Autocomplete__item-value" },
                     React.createElement(ComboboxOptionText, null)))))))))),
         React.createElement("div", { className: "cobalt-Autocomplete__input-wrapper" },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  const isMounted = useRef(true)\n  const forceIdTimer = useRef<any>()\n  const focusTimer = useRef<any>()\n  const blurTimer = useRef<any>()\n  const clearInputTimer = useRef<any>()\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    forceIdTimer.current = setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n\n    return () => {\n      isMounted.current = false\n      forceIdTimer.current && clearTimeout(forceIdTimer.current)\n      focusTimer.current && clearTimeout(focusTimer.current)\n      blurTimer.current && clearTimeout(blurTimer.current)\n      clearInputTimer.current && clearTimeout(clearInputTimer.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    focusTimer.current = setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      isMounted.current && setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    blurTimer.current = setTimeout(() => {\n      isMounted.current && setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    clearInputTimer.current = setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"indigo\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            role=\"clear\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":";;;;;;;AAkDA,SAAS,mBAAmB,CAC1B,KAAyB,EACzB,IAAY,EACZ,SAAiB,EACjB,QAAgB,EAAA;IAEhB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAA;IAE1E,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,MAAM,IAAI,SAAS;cACpB,gBAAgB,CACd,KAAK,CAAC,MAAM,CAAC,CAAC,IAAsB,KAAI;AACtC,gBAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AACtE,aAAC,CAAC,CACH;AACH,cAAE,gBAAgB,CAAC,EAAE,CAAC,CAAA;KACzB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;AAE3B,IAAA,OAAO,aAAa,CAAA;AACtB,CAAC;AAED,SAAS,aAAa,CAAC,KAAoC,EAAE,QAAgB,EAAA;IAC3E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAA;IAC5E,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CACf,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KACb,OAAO,IAAI,KAAK,QAAQ,GAAG,EAAE,CAAC,QAAQ,GAAG,IAAI,EAAE,GAAG,IAAI,CACvD,CACF,CAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AACX,IAAA,OAAO,cAAc,CAAA;AACvB,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,EAAE,EACF,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,UAAU,GAAG,IAAI,EACjB,cAAc,GAAG,CAAC,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,OAAO,EACP,MAAM,EACN,aAAa,EACb,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,eAAe,EACf,QAAQ,GAAG,OAAO,EAClB,GAAG,UAAU,EACP,EAAA;IACN,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEpC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE/C,IAAA,IAAI,WAAW,GAAG,KAAK,CAAA;IAEvB,MAAM,OAAO,GAAG,UAAU;AACxB,UAAE,mBAAmB,CACjB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,EAC9B,IAAI,EACJ,cAAc,EACd,QAAQ,CACT;AACH,UAAE,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElC,MAAM,UAAU,GAAG,eAAe,IAAI,MAAM,CAAiB,IAAI,CAAC,CAAA;IAElE,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAmB,IAAI,CAAC,CAAA;AAE1D,IAAA,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;IAEnD,MAAM,cAAc,GAAG,MAAK;QAC1B,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;AAC5C,KAAC,CAAA;AAED,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;AAC9B,IAAA,MAAM,YAAY,GAAG,MAAM,EAAO,CAAA;AAClC,IAAA,MAAM,UAAU,GAAG,MAAM,EAAO,CAAA;AAChC,IAAA,MAAM,SAAS,GAAG,MAAM,EAAO,CAAA;AAC/B,IAAA,MAAM,eAAe,GAAG,MAAM,EAAO,CAAA;AAErC,IAAA,SAAS,OAAO,GAAA;;AAEd,QAAA,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AACrC,YAAA,EAAE,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;AACjE,SAAC,CAAC,CAAA;KACH;IAED,SAAS,CAAC,MAAK;;QAEb,WAAW,IAAI,cAAc,EAAE,CAAA;AAE/B,QAAA,OAAO,MAAK;AACV,YAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;YACzB,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;YAC1D,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;YACtD,SAAS,CAAC,OAAO,IAAI,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YACpD,eAAe,CAAC,OAAO,IAAI,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;AAClE,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,EAAE,CAAA;AACX,KAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAER,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,YAAY,GAAG,EAAE,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAA;AAC1D,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AAElB,IAAA,MAAM,WAAW,GAAG,CAAC,KAAyC,KAAI;QAChE,CAAC,WAAW,IAAI,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;QACzC,WAAW,GAAG,KAAK,CAAA;AACnB,QAAA,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;;AAEnC,YAAA,SAAS,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,CAAA;SACvC,EAAE,GAAG,CAAC,CAAA;AACT,KAAC,CAAA;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,KAAyC,KAAI;;AAE/D,QAAA,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAA;AACvB,QAAA,SAAS,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AAClC,YAAA,SAAS,CAAC,OAAO,IAAI,WAAW,CAAC,KAAK,CAAC,CAAA;SACxC,EAAE,GAAG,CAAC,CAAA;AACT,KAAC,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,CAAC,KAAyC,KAAI;AACjE,QAAA,MAAM,UAAU,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;QAC3D,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE;;YAE3C,OAAO,CAAC,UAAU,CAAC,CAAA;AACnB,YAAA,aAAa,IAAI,aAAa,CAAC,UAAU,CAAC,CAAA;AAC3C,SAAA;AACH,KAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,MAAK;QAC5B,OAAO,CAAC,EAAE,CAAC,CAAA;AACX,QAAA,aAAa,IAAI,aAAa,CAAC,EAAE,CAAC,CAAA;QAElC,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;AACtD,KAAC,CAAA;AAED,IAAA,MAAM,gBAAgB,GAAG,CACvB,IAAsB,EACtB,CAAkE,KAChE;;QAEF,MAAM,gBAAgB,GAAG,YAAY;cACjC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK;cAClC,IAAI,CAAA;AAER,QAAA,IAAI,gBAAgB,EAAE;AACpB,YAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;AACxB,SAAA;AAAM,aAAA,IAAI,CAAC,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,WAAW,GAAG,IAAI,CAAA;AAClB,YAAA,cAAc,EAAE,CAAA;AACjB,SAAA;AACH,KAAC,CAAA;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAmC,KAAI;AAC5D,QAAA,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CAAA;;QAGzB,MAAM,cAAc,GAAG,EAAE,CAAA;;QAGzB,MAAM,kBAAkB,GAAG,CAAC,CAAA;AAE5B,QAAA,IAAI,CAAC,CAAC,OAAO,KAAK,cAAc,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,OAAO;gBAAE,OAAM;AAE9B,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CACxB,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CACnE,CAAA;YAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,CACzC,CAAC,EAAE,KAAK,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CACpD,CAAA;AAED,YAAA,iBAAiB,IAAI,CAAC,IAAI,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAA;AAC1E,SAAA;AAAM,aAAA,IAAI,CAAC,CAAC,OAAO,KAAK,kBAAkB,EAAE;YAC3C,IAAI,CAAC,OAAO,CAAC,OAAO;gBAAE,OAAM;AAC5B,YAAA,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;AAC/C,gBAAA,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AAC/B,aAAA;AACF,SAAA;AACH,KAAC,CAAA;IAED,MAAM,8BAA8B,GAAG,MAAK;AAC1C,QAAA,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAA;AAC3E,KAAC,CAAA;AAED,IAAA,MAAM,eAAe,GAAG,CACtB,IAAsB,EACtB,CAA+B,KAC7B;;;;AAIF,QAAA,IACE,8BAA8B,EAAE;AAChC,YAAA,SAAS,CAAC,OAAO;YACjB,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,EAChD;AACA,YAAA,CAAC,CAAC,cAAc,EAAE,CAAA;AAClB,YAAA,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AAC1B,SAAA;AACH,KAAC,CAAA;IAED,QACE,oBAAC,QAAQ,EAAA,EACP,SAAS,EAAEA,EAAU,CAAC,qBAAqB,EAAE;AAC3C,YAAA,0CAA0C,EACxC,8BAA8B,EAAE;SACnC,CAAC,EACF,EAAE,EAAC,KAAK,EACR,WAAW,EAAE,IAAI,EACjB,GAAG,EAAE,UAAU,EAAA;AAEd,QAAA,OAAO,CAAC,MAAM,GAAG,CAAC,KACjB,oBAAC,eAAe,EAAA,EACd,SAAS,EAAC,8BAA8B,EACxC,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,SAAS,EAAA;AAEd,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,SAAS,EAAC,2BAA2B,EAAA,YAAA,EAC1B,qBAAqB,EAE/B,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACvB,KAAA,CAAA,aAAA,CAAC,cAAc,EACb,EAAA,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EACrB,WAAW,EAAE,CAAC,CAA+B,KAAI;AAC/C,oBAAA,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AAC1B,iBAAC,EACD,OAAO,EAAE,CAAC,CAA+B,KAAI;AAC3C,oBAAA,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;iBAC1B,EAAA,EAEA,UAAU,IACT,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,KAEtB,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mCAAmC,EAAA;AAChD,gBAAA,IAAI,KACH,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA;oBAC9C,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,EAAG,CAAA,CAChC,CACR;gBAED,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,iCAAiC,EAAA;oBAC/C,KAAC,CAAA,aAAA,CAAA,kBAAkB,EAAG,IAAA,CAAA,CACjB,CACF,CACR,CACc,CAClB,CAAC,CACW,CACC,CACnB;QACD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,YAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,CAAC,SAAS,KAAI;oBACpB,QACE,KAAC,CAAA,aAAA,CAAA,aAAa,EACR,EAAA,GAAA,UAAU,EACd,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,KAAK,EACjB,cAAc,EAAC,KAAK,EACpB,UAAU,EAAE,KAAK,EAAA,YAAA,EACN,oBAAoB,EAC/B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,CAAA,EACH;AACH,iBAAC,EACD,CAAA;AAED,YAAA,IAAI,KACH,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,gBAAgB,EAAA;AAEzB,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,CAC7B,CACP,CACG,CACG,EACZ;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,YAAY,EAAC;AAC5D,gBAAgB,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  const isMounted = useRef(true)\n  const forceIdTimer = useRef<any>()\n  const focusTimer = useRef<any>()\n  const blurTimer = useRef<any>()\n  const clearInputTimer = useRef<any>()\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    forceIdTimer.current = setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n\n    return () => {\n      isMounted.current = false\n      forceIdTimer.current && clearTimeout(forceIdTimer.current)\n      focusTimer.current && clearTimeout(focusTimer.current)\n      blurTimer.current && clearTimeout(blurTimer.current)\n      clearInputTimer.current && clearTimeout(clearInputTimer.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    focusTimer.current = setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      isMounted.current && setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    blurTimer.current = setTimeout(() => {\n      isMounted.current && setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    clearInputTimer.current = setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"accent\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            role=\"clear\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":"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"}

package/components/Form/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport {\n  Slider as ReachSlider,\n  SliderProps as ReachSliderProps,\n} from \"@reach/slider\"\nimport classNames from \"classnames\"\n\ntype NativeEventType =\n  | \"onPointerDown\"\n  | \"onPointerUp\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n\nexport type SliderPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  ariaLabel: string\n  value?: number\n  defaultValue?: number\n  /**\n   * minimum selectable value (default is 0)\n   */\n  min?: number\n  /**\n   * maximum selectable value (default is 100)\n   */\n  max?: number\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onChange?: (newValue: number) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: number,\n    status: FormElement[\"status\"]\n  ) => React.ReactElement\n\n  onPointerDown?: ReachSliderProps[\"onPointerDown\"]\n  onPointerUp?: ReachSliderProps[\"onPointerUp\"]\n  onMouseDown?: ReachSliderProps[\"onMouseDown\"]\n  onMouseMove?: ReachSliderProps[\"onMouseMove\"]\n  onMouseUp?: ReachSliderProps[\"onMouseUp\"]\n  onTouchStart?: ReachSliderProps[\"onTouchStart\"]\n  onTouchMove?: ReachSliderProps[\"onTouchMove\"]\n  onTouchEnd?: ReachSliderProps[\"onTouchEnd\"]\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FormElement &\n  Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    NativeEventType | \"css\" | \"enterKeyHint\"\n  >\n\nconst Slider = ({\n  defaultValue,\n  value,\n  min,\n  max,\n  status,\n  disabled,\n  onChange,\n  renderValue,\n  ariaLabel,\n  ...restProps\n}: SliderPropsType) => {\n  function initValue() {\n    if (value != null) return value\n    if (defaultValue != null) return defaultValue\n    if (min != null) return min\n    return 0\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <div\n      className={classNames(\"cobalt-slider\", {\n        \"cobalt-slider--disabled\": disabled,\n      })}\n    >\n      {renderValue && (\n        <div className=\"cobalt-slider__value-container\">\n          {renderValue(sliderValue, status)}\n        </div>\n      )}\n\n      <ReachSlider\n        {...restProps}\n        aria-label={ariaLabel}\n        handleAlignment=\"contain\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        disabled={disabled}\n        onChange={(newValue) => {\n          setSliderValue(newValue)\n          onChange && onChange(newValue)\n        }}\n      />\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Slider)\nwrappedComponent.displayName = \"Slider\"\n\nexport default wrappedComponent\n\ntype SliderValueMetaProps = {\n  children: React.ReactNode\n}\nexport const SliderValueMeta = ({ children }: SliderValueMetaProps) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["classNames","ReachSlider"],"mappings":";;;;;AAkEA,MAAM,MAAM,GAAG,CAAC,EACd,YAAY,EACZ,KAAK,EACL,GAAG,EACH,GAAG,EACH,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACI,KAAI;AACpB,IAAA,SAAS,SAAS,GAAA;QAChB,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;AAAE,YAAA,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;AAAE,YAAA,OAAO,GAAG,CAAA;AAC3B,QAAA,OAAO,CAAC,CAAA;KACT;AAED,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,SAAS,EAAE,CAAC,CAAA;AAEjE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;AACrC,YAAA,yBAAyB,EAAE,QAAQ;SACpC,CAAC,EAAA;AAED,QAAA,WAAW,KACV,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;AAED,QAAA,KAAA,CAAA,aAAA,CAACC,QAAW,EAAA,EAAA,GACN,SAAS,EAAA,YAAA,EACD,SAAS,EACrB,eAAe,EAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,QAAQ,KAAI;gBACrB,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxB,gBAAA,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,EAAA,CACD,CACE,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;MAO1B,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AACpE,IAAA,OAAO,8BAAM,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAQ,CAAA;AACtE;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport {\n  Slider as ReachSlider,\n  SliderProps as ReachSliderProps,\n} from \"@reach/slider\"\nimport classNames from \"classnames\"\n\ntype NativeEventType =\n  | \"onPointerDown\"\n  | \"onPointerUp\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n\nexport type SliderPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  ariaLabel: string\n  value?: number\n  defaultValue?: number\n  /**\n   * minimum selectable value (default is 0)\n   */\n  min?: number\n  /**\n   * maximum selectable value (default is 100)\n   */\n  max?: number\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onChange?: (newValue: number) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: number,\n    status: FormElement[\"status\"]\n  ) => React.ReactElement\n\n  onPointerDown?: ReachSliderProps[\"onPointerDown\"]\n  onPointerUp?: ReachSliderProps[\"onPointerUp\"]\n  onMouseDown?: ReachSliderProps[\"onMouseDown\"]\n  onMouseMove?: ReachSliderProps[\"onMouseMove\"]\n  onMouseUp?: ReachSliderProps[\"onMouseUp\"]\n  onTouchStart?: ReachSliderProps[\"onTouchStart\"]\n  onTouchMove?: ReachSliderProps[\"onTouchMove\"]\n  onTouchEnd?: ReachSliderProps[\"onTouchEnd\"]\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FormElement &\n  Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    NativeEventType | \"css\" | \"enterKeyHint\" | \"onChange\"\n  >\n\nconst Slider = ({\n  defaultValue,\n  value,\n  min,\n  max,\n  status,\n  disabled,\n  onChange,\n  renderValue,\n  ariaLabel,\n  ...restProps\n}: SliderPropsType) => {\n  function initValue() {\n    if (value != null) return value\n    if (defaultValue != null) return defaultValue\n    if (min != null) return min\n    return 0\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <div\n      className={classNames(\"cobalt-slider\", {\n        \"cobalt-slider--disabled\": disabled,\n      })}\n    >\n      {renderValue && (\n        <div className=\"cobalt-slider__value-container\">\n          {renderValue(sliderValue, status)}\n        </div>\n      )}\n\n      <ReachSlider\n        {...restProps}\n        aria-label={ariaLabel}\n        handleAlignment=\"contain\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        disabled={disabled}\n        onChange={(newValue) => {\n          setSliderValue(newValue)\n          onChange && onChange(newValue)\n        }}\n      />\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Slider)\nwrappedComponent.displayName = \"Slider\"\n\nexport default wrappedComponent\n\ntype SliderValueMetaProps = {\n  children: React.ReactNode\n}\nexport const SliderValueMeta = ({ children }: SliderValueMetaProps) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["classNames","ReachSlider"],"mappings":";;;;;AAkEA,MAAM,MAAM,GAAG,CAAC,EACd,YAAY,EACZ,KAAK,EACL,GAAG,EACH,GAAG,EACH,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACI,KAAI;AACpB,IAAA,SAAS,SAAS,GAAA;QAChB,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;AAAE,YAAA,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;AAAE,YAAA,OAAO,GAAG,CAAA;AAC3B,QAAA,OAAO,CAAC,CAAA;KACT;AAED,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,SAAS,EAAE,CAAC,CAAA;AAEjE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;AACrC,YAAA,yBAAyB,EAAE,QAAQ;SACpC,CAAC,EAAA;AAED,QAAA,WAAW,KACV,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;AAED,QAAA,KAAA,CAAA,aAAA,CAACC,QAAW,EAAA,EAAA,GACN,SAAS,EAAA,YAAA,EACD,SAAS,EACrB,eAAe,EAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,QAAQ,KAAI;gBACrB,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxB,gBAAA,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,EAAA,CACD,CACE,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;MAO1B,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AACpE,IAAA,OAAO,8BAAM,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAQ,CAAA;AACtE;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.29.2",
+  "version": "0.31.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -31,7 +31,7 @@
     "date-fns": "2.29.3",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "4.0.0",
+    "nanoid": "4.0.1",
     "postcss": "8.4.21",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
@@ -49,11 +49,11 @@
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "6.0.0",
     "@rushstack/eslint-patch": "1.2.0",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addons": "6.5.15",
-    "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/manager-webpack5": "6.5.15",
-    "@storybook/react": "6.5.15",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addons": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
     "@svgr/cli": "6.5.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
@@ -65,9 +65,9 @@
     "@types/react": "18.0.26",
     "@whitespace/storybook-addon-html": "^5.1.1",
     "autoprefixer": "10.4.13",
-    "core-js": "3.27.2",
+    "core-js": "3.28.0",
     "css-loader": "6.7.3",
-    "eslint": "8.32.0",
+    "eslint": "8.34.0",
     "file-loader": "6.2.0",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
@@ -87,7 +87,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.34.1",
-    "sass": "1.57.1",
+    "sass": "1.58.1",
     "sass-loader": "13.2.0",
     "sharp": "0.31.3",
     "sharp-cli": "4.1.0",
@@ -97,7 +97,7 @@
     "svgo": "3.0.2",
     "ts-jest": "29.0.5",
     "ts-node": "10.9.1",
-    "typescript": "4.9.4"
+    "typescript": "4.9.5"
   },
   "scripts": {
     "build": "./scripts/build.sh",

package/styles/components/Accordion/index.scss

@@ -46,7 +46,7 @@
       &::before,
       &::after {
         // This element is actually an icon but animated, so we can use icon colors here
-        @include semantic-color(subdued, icon, background-color);
+        @include semantic-color(icon, subdued, background-color);
         position: absolute;
 
         content: "";

package/styles/components/Alerter/index.scss

@@ -34,10 +34,8 @@
     pointer-events: auto;
 
     &--info {
-      // TOFIX: there is no matching semantic color for this case
-      color: color(white);
-
-      background-color: color(graphite);
+      @include bg-color(info);
+      @include text-color(info);
     }
 
     &--success {

package/styles/components/BulletList/index.scss

@@ -26,8 +26,7 @@
     svg,
     use,
     g {
-      // TOFIX: find a way to use new colors here
-      fill: rgba(color(graphite), 0.5);
+      @include fill-color(subdued);
     }
   }
 }

package/styles/components/Buttons/DefaultButton/index.scss

@@ -1,19 +1,19 @@
 .cob-Button__default {
   @include semantic-color(
-    secondaryInteractive,
     buttonBackground,
+    secondaryInteractive,
     background-color
   );
-  @include semantic-color(baseInteractive, stroke, border-color);
-  @include semantic-color(secondaryInteractive, buttonLabel, color);
+  @include semantic-color(stroke, baseInteractive, border-color);
+  @include semantic-color(buttonLabel, secondaryInteractive, color);
 
   &--primary {
     @include semantic-color(
-      primaryInteractive,
       buttonBackground,
+      primaryInteractive,
       background-color
     );
-    @include semantic-color(primaryInteractive, buttonLabel, color);
+    @include semantic-color(buttonLabel, primaryInteractive, color);
 
     border-color: transparent;
 
@@ -25,24 +25,24 @@
 
     &.cob-Button__default--destructive {
       @include semantic-color(
-        destructiveInteractive,
         buttonBackground,
+        destructiveInteractive,
         background-color
       );
-      @include semantic-color(destructiveInteractive, buttonLabel, color);
+      @include semantic-color(buttonLabel, destructiveInteractive, color);
 
       border-color: transparent;
     }
   }
 
   &--destructive {
-    @include semantic-color(error, text, color);
+    @include semantic-color(text, error, color);
 
     &:hover,
     &:focus,
     &:active {
-      @include semantic-color(error, text, color);
-      @include semantic-color(error, stroke, border-color);
+      @include semantic-color(text, error, color);
+      @include semantic-color(stroke, error, border-color);
     }
   }
 
@@ -50,8 +50,8 @@
   &--selected:focus,
   &--selected:active,
   &--selected {
-    @include semantic-color(selected, buttonBackground, background-color);
-    @include semantic-color(selected, buttonLabel, color);
+    @include semantic-color(buttonBackground, selected, background-color);
+    @include semantic-color(buttonLabel, selected, color);
     @include border-color(accent);
   }
 }

package/styles/components/Buttons/GhostButton/index.scss

@@ -1,8 +1,8 @@
 .cob-Button__ghost {
-  @include semantic-color(tertiaryInteractive, buttonLabel, color);
+  @include semantic-color(buttonLabel, tertiaryInteractive, color);
   @include semantic-color(
-    tertiaryInteractive,
     buttonBackground,
+    tertiaryInteractive,
     background-color
   );
   border-color: transparent;
@@ -18,7 +18,7 @@
   }
 
   &.cob-Button__ghost--destructive {
-    @include semantic-color(error, text, color);
+    @include semantic-color(text, error, color);
   }
 
   &.cob-Button__ghost--standalone {
@@ -35,8 +35,8 @@
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
     @include semantic-color(
-      tertiaryInteractive,
       buttonBackground,
+      tertiaryInteractive,
       background-color
     );
     border-color: transparent;

package/styles/components/Buttons/InversedButton/index.scss

@@ -1,6 +1,6 @@
 .cob-Button__inversed {
-  @include semantic-color(inversed, text, color);
-  @include semantic-color(base, stroke, border-color);
+  @include semantic-color(text, inversed, color);
+  @include semantic-color(stroke, base, border-color);
 
   background-color: transparent;
   box-shadow: none;

package/styles/components/Buttons/index.scss

@@ -46,7 +46,6 @@
   white-space: normal;
 
   border-radius: border-radius(md);
-  box-shadow: 0 2px 8px 0 rgba(#000, 0.08);
 
   cursor: pointer;
   user-select: none;
@@ -98,9 +97,9 @@
   &[disabled],
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
-    @include semantic-color(disabled, buttonBackground, background-color);
-    @include semantic-color(disabled, buttonLabel, color);
-    @include semantic-color(subdued, stroke, border-color);
+    @include semantic-color(buttonBackground, disabled, background-color);
+    @include semantic-color(buttonLabel, disabled, color);
+    @include semantic-color(stroke, subdued, border-color);
 
     opacity: 1;
     cursor: not-allowed;
@@ -111,9 +110,9 @@
     &:hover,
     &:focus,
     &:active {
-      @include semantic-color(disabled, buttonBackground, background-color);
-      @include semantic-color(disabled, buttonLabel, color);
-      @include semantic-color(subdued, stroke, border-color);
+      @include semantic-color(buttonBackground, disabled, background-color);
+      @include semantic-color(buttonLabel, disabled, color);
+      @include semantic-color(stroke, subdued, border-color);
       box-shadow: none;
     }
   }

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -1,13 +1,9 @@
 @use "sass:math";
 
 .cobalt-CalendarRangePicker {
-  // TOFIX change it to AccentAlt color
-  $calendar-range-day-color: lighten(color(purple, light), 29);
-  $calendar-selected-day-invalid-color: color(red);
-  // TOFIX change it to ErrorAlt color
-  $calendar-range-day-invalid-color: lighten(color(red), 20);
-  // TOFIX find a semantic color equivalent
-  $calendar-out-of-range-color: darken($calendar-range-day-invalid-color, 8);
+  $calendar-range-day-color: var(--c-background-accentAlt);
+  $calendar-range-day-invalid-color: var(--c-background-errorAlt);
+  $calendar-out-of-range-color: var(--c-background-error);
 
   $calendar-day-inner-height: 24px;
   $calendar-day-padding: 6px;
@@ -45,7 +41,7 @@
 
     border-radius: 50%;
 
-    box-shadow: rgba(176, 26, 167, 0.4) 0 2px 6px 0;
+    box-shadow: var(--c-background-accentAlt) 0 2px 6px 0;
   }
 
   position: relative;
@@ -59,9 +55,8 @@
   }
 
   &__month {
+    @include bg-color(secondary);
     flex: 1;
-
-    background-color: color(white);
   }
 
   &__month-header {
@@ -92,11 +87,11 @@
   }
 
   &__month__day-header {
+    @include text-color(subdued);
     flex: 1;
 
     text-align: center;
     text-transform: capitalize;
-    color: color(grey, dark);
     font-weight: 400;
     font-size: 14px;
   }
@@ -129,7 +124,7 @@
     }
 
     &--today {
-      color: color(purple);
+      @include text-color(accent);
       font-weight: 600;
     }
 
@@ -140,8 +135,7 @@
     }
 
     &--disabled {
-      color: color(grey);
-
+      @include text-color(subdued);
       cursor: auto;
     }
 
@@ -178,7 +172,8 @@
       .cobalt-CalendarRangePicker__day-inner:before {
       @include start-end-day;
 
-      box-shadow: white 0 0 0 2px, rgb(176, 26, 167) 0 0 0 4px;
+      box-shadow: var(--c-background-secondary) 0 0 0 2px,
+        var(--c-background-accent) 0 0 0 4px;
     }
 
     // start/end day content when the other one is currently edited + today
@@ -188,8 +183,8 @@
     &--endDay.cobalt-CalendarRangePicker__day--today:not(
         &--startDay
       ).cobalt-CalendarRangePicker__day--subdued {
+      @include text-color(accent);
       font-weight: 600;
-      color: color(purple);
     }
 
     // not today
@@ -199,8 +194,8 @@
     &--endDay:not(&--startDay):not(
         &--today
       ).cobalt-CalendarRangePicker__day--subdued {
+      @include text-color(base);
       font-weight: inherit;
-      color: black;
     }
 
     // start/end day background (circle) when the other one is currently edited
@@ -305,7 +300,7 @@
     &--endDay .cobalt-CalendarRangePicker__day-inner:after {
       @include bg-color(error);
 
-      box-shadow: rgba($calendar-selected-day-invalid-color, 0.4) 0 2px 6px 0;
+      box-shadow: var(--c-background-errorAlt) 0 2px 6px 0;
     }
 
     // invalid start/end day background (circle) when the other one is currently edited

package/styles/components/Calendar/CalendarView/index.scss

@@ -38,24 +38,22 @@ $daySize: spacing(md);
     border-radius: math.div($daySize, 2);
 
     &--disabled {
-      @include bg-color(disabled);
+      @include bg-color(neutral);
+      @include text-color(subdued);
     }
 
     &--highlighted {
       @include text-color(inversed);
-
-      // TOFIX find a semantic color equivalent
-      background-color: color(turquoise);
+      @include bg-color(connect);
     }
 
     &--semi-highlighted {
-      // TOFIX find a semantic color equivalent
-      background-color: lighten(color(turquoise), 30);
+      @include bg-color(connectAlt);
     }
 
     &--past {
-      // TOFIX find a semantic color equivalent
-      color: color(grey);
+      @include text-color(subdued);
+      opacity: 0.4;
     }
 
     &:not(:first-child) {

package/styles/components/Card/index.scss

@@ -1,20 +1,27 @@
 .cobalt- {
-  $card-border-radius: border-radius(base);
+  $card-border-radius: border-radius(xl);
   // deprecated
   $legacy-card-padding-tight: 12px;
 
   &Card {
     @include bg-color(secondary);
+    @include border(base);
     width: 100%;
 
     border-radius: $card-border-radius;
 
-    box-shadow: elevation(base);
+    &--legacy {
+      border: 0;
 
-    &--flattened {
-      @include border(base);
+      box-shadow: elevation(base);
+    }
 
-      box-shadow: none;
+    &--responsive {
+      @include breakpoint($until: sm) {
+        border-radius: 0;
+        border-left-width: 0;
+        border-right-width: 0;
+      }
     }
   }
 
@@ -63,11 +70,14 @@
     padding-top: $legacy-card-padding-tight - 1px;
   }
 
-  &Card > .cobalt-Card__Section:first-of-type {
+  // first-of-class, source: https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class
+  &Card
+    > .cobalt-Card__Section:not(.cobalt-Card__Section ~ .cobalt-Card__Section) {
     border-top-left-radius: $card-border-radius;
     border-top-right-radius: $card-border-radius;
   }
 
+  // No last-of-class hack found for now
   &Card > .cobalt-Card__Section:last-of-type {
     border-bottom-right-radius: $card-border-radius;
     border-bottom-left-radius: $card-border-radius;