@drivy/cobalt 1.4.0 → 1.4.2

package/cjs/tokens/icons.js

@@ -171,6 +171,7 @@ const icons = {
 	minusCircleFilled: "minus-circle-filled.svg",
 	minus: "minus.svg",
 	miscGift: "misc-gift.svg",
+	moon: "moon.svg",
 	nearbyDevice: "nearby-device.svg",
 	notification: "notification.svg",
 	number1Circle: "number-1-circle.svg",
@@ -229,6 +230,7 @@ const icons = {
 	reply: "reply.svg",
 	reset: "reset.svg",
 	ride: "ride.svg",
+	roadsideAssistance: "roadside-assistance.svg",
 	roofBox: "roof-box.svg",
 	rotate: "rotate.svg",
 	sealCheck: "seal-check.svg",

package/cjs/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/Form/TagsInput.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TagsInput as TagsInput$1 } from '@ark-ui/react';
+import cx from 'classnames';
+import '../Icon/index.js';
+import { withFieldLabelAndHint } from './field.js';
+import CloseIcon from '../Icon/__generated__/CloseIcon.js';
+
+const TagsInput = ({ status, forwardedRef, value, onValueChange, tags, onTagsChange, defaultTags, defaultValue, placeholder, id, disabled, readOnly, ...restProps }) => {
+    const hasDeleteTrigger = !disabled && !readOnly;
+    return (React.createElement("div", { className: "cobalt-TagsField" },
+        React.createElement(TagsInput$1.Root, { ids: { input: id }, onInputValueChange: (details) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(details.inputValue), onValueChange: (details) => onTagsChange === null || onTagsChange === void 0 ? void 0 : onTagsChange(details.value), defaultValue: defaultTags, defaultInputValue: defaultValue, className: cx("cobalt-TagsField__InputContainer", {
+                "cobalt-TagsField__InputContainer--success": status === "success",
+                "cobalt-TagsField__InputContainer--error": status === "error",
+            }), value: tags, inputValue: value, disabled: disabled, readOnly: readOnly, addOnPaste: true, ...restProps },
+            React.createElement(TagsInput$1.Context, null, (tagsInput) => (React.createElement(React.Fragment, null,
+                React.createElement(TagsInput$1.Control, { className: "cobalt-TagsField__Tags" }, tagsInput.value.map((tagValue, index) => (React.createElement(TagsInput$1.Item, { key: tagValue, index: index, value: tagValue },
+                    React.createElement(TagsInput$1.ItemPreview, { className: cx("cobalt-Tag cobalt-TagsField__Tag", {
+                            "c-pr-none": hasDeleteTrigger,
+                        }) },
+                        React.createElement(TagsInput$1.ItemText, null, tagValue),
+                        hasDeleteTrigger && (React.createElement(TagsInput$1.ItemDeleteTrigger, { className: "cobalt-TagsField__TagDeleteTrigger" },
+                            React.createElement(CloseIcon, { size: 16 })))),
+                    React.createElement(TagsInput$1.ItemInput, null))))),
+                React.createElement(TagsInput$1.Input, { className: "cobalt-TagsField__Input", placeholder: placeholder })))),
+            React.createElement(TagsInput$1.HiddenInput, { ref: forwardedRef }))));
+};
+TagsInput.displayName = "TagsInputRaw";
+const wrappedComponent = withFieldLabelAndHint(TagsInput);
+wrappedComponent.displayName = "TagsInput";
+
+export { wrappedComponent as TagsInput };
+//# sourceMappingURL=TagsInput.js.map

package/components/Form/TagsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.js","sources":["../../../src/components/Form/TagsInput.tsx"],"sourcesContent":["import React from \"react\"\nimport {\n  TagsInput as TagsInputComponent,\n  TagsInputRootProps,\n} from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { CloseIcon, IconSources } from \"../Icon\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  icon?: IconSources\n  forwardedRef?: React.Ref<HTMLInputElement>\n  value?: string\n  onValueChange?: (value: string) => void\n  tags?: string[]\n  onTagsChange?: (tags: string[]) => void\n  defaultTags?: string[]\n  defaultValue?: string\n  max?: number\n} & Omit<\n  FormElement,\n  \"value\" | \"defaultValue\" | \"max\" | \"onChange\" | \"onInputChange\"\n> &\n  React.InputHTMLAttributes<HTMLInputElement> &\n  Omit<TagsInputRootProps, \"value\" | \"inputValue\" | \"onValueChange\">\n\nexport const TagsInputWrapper = ({\n  status,\n  render,\n}: {\n  status?: FormElement[\"status\"]\n  render: (className: string) => React.ReactNode\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-TagsField\", {\n        \"cobalt-TagsField--success\": status === \"success\",\n        \"cobalt-TagsField--error\": status === \"error\",\n      })}\n    >\n      {render(\"cobalt-TagsField__InputContainer\")}\n    </div>\n  )\n}\n\nconst TagsInput = ({\n  status,\n  forwardedRef,\n  value,\n  onValueChange,\n  tags,\n  onTagsChange,\n  defaultTags,\n  defaultValue,\n  placeholder,\n  id,\n  disabled,\n  readOnly,\n  ...restProps\n}: Props) => {\n  const hasDeleteTrigger = !disabled && !readOnly\n  return (\n    <div className=\"cobalt-TagsField\">\n      <TagsInputComponent.Root\n        ids={{ input: id }}\n        onInputValueChange={(details) => onValueChange?.(details.inputValue)}\n        onValueChange={(details) => onTagsChange?.(details.value)}\n        defaultValue={defaultTags}\n        defaultInputValue={defaultValue}\n        className={cx(\"cobalt-TagsField__InputContainer\", {\n          \"cobalt-TagsField__InputContainer--success\": status === \"success\",\n          \"cobalt-TagsField__InputContainer--error\": status === \"error\",\n        })}\n        value={tags}\n        inputValue={value}\n        disabled={disabled}\n        readOnly={readOnly}\n        addOnPaste\n        {...restProps}\n      >\n        <TagsInputComponent.Context>\n          {(tagsInput) => (\n            <>\n              <TagsInputComponent.Control className=\"cobalt-TagsField__Tags\">\n                {tagsInput.value.map((tagValue, index) => (\n                  <TagsInputComponent.Item\n                    key={tagValue}\n                    index={index}\n                    value={tagValue}\n                  >\n                    <TagsInputComponent.ItemPreview\n                      className={cx(\"cobalt-Tag cobalt-TagsField__Tag\", {\n                        \"c-pr-none\": hasDeleteTrigger,\n                      })}\n                    >\n                      <TagsInputComponent.ItemText>\n                        {tagValue}\n                      </TagsInputComponent.ItemText>\n                      {hasDeleteTrigger && (\n                        <TagsInputComponent.ItemDeleteTrigger className=\"cobalt-TagsField__TagDeleteTrigger\">\n                          <CloseIcon size={16} />\n                        </TagsInputComponent.ItemDeleteTrigger>\n                      )}\n                    </TagsInputComponent.ItemPreview>\n                    <TagsInputComponent.ItemInput />\n                  </TagsInputComponent.Item>\n                ))}\n              </TagsInputComponent.Control>\n              <TagsInputComponent.Input\n                className=\"cobalt-TagsField__Input\"\n                placeholder={placeholder}\n              />\n            </>\n          )}\n        </TagsInputComponent.Context>\n        <TagsInputComponent.HiddenInput ref={forwardedRef} />\n      </TagsInputComponent.Root>\n    </div>\n  )\n}\n\nTagsInput.displayName = \"TagsInputRaw\"\n\nconst wrappedComponent = withFieldLabelAndHint(TagsInput)\nwrappedComponent.displayName = \"TagsInput\"\n\nexport { wrappedComponent as TagsInput }\n"],"names":["TagsInputComponent"],"mappings":";;;;;;;AA8CA,MAAM,SAAS,GAAG,CAAC,EACjB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,aAAa,EACb,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACN,KAAI;AACV,IAAA,MAAM,gBAAgB,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAA;AAC/C,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA;AAC/B,QAAA,KAAA,CAAA,aAAA,CAACA,WAAkB,CAAC,IAAI,EAAA,EACtB,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAClB,kBAAkB,EAAE,CAAC,OAAO,KAAK,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAG,OAAO,CAAC,UAAU,CAAC,EACpE,aAAa,EAAE,CAAC,OAAO,KAAK,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAG,OAAO,CAAC,KAAK,CAAC,EACzD,YAAY,EAAE,WAAW,EACzB,iBAAiB,EAAE,YAAY,EAC/B,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE;gBAChD,2CAA2C,EAAE,MAAM,KAAK,SAAS;gBACjE,yCAAyC,EAAE,MAAM,KAAK,OAAO;AAC9D,aAAA,CAAC,EACF,KAAK,EAAE,IAAI,EACX,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,WACN,SAAS,EAAA;YAEb,KAAC,CAAA,aAAA,CAAAA,WAAkB,CAAC,OAAO,EAAA,IAAA,EACxB,CAAC,SAAS,MACT,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,gBAAA,KAAA,CAAA,aAAA,CAACA,WAAkB,CAAC,OAAO,EAAC,EAAA,SAAS,EAAC,wBAAwB,EAAA,EAC3D,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,MACnC,KAAA,CAAA,aAAA,CAACA,WAAkB,CAAC,IAAI,EACtB,EAAA,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,QAAQ,EAAA;oBAEf,KAAC,CAAA,aAAA,CAAAA,WAAkB,CAAC,WAAW,EAAA,EAC7B,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE;AAChD,4BAAA,WAAW,EAAE,gBAAgB;yBAC9B,CAAC,EAAA;AAEF,wBAAA,KAAA,CAAA,aAAA,CAACA,WAAkB,CAAC,QAAQ,EAAA,IAAA,EACzB,QAAQ,CACmB;wBAC7B,gBAAgB,KACf,KAAC,CAAA,aAAA,CAAAA,WAAkB,CAAC,iBAAiB,EAAA,EAAC,SAAS,EAAC,oCAAoC,EAAA;4BAClF,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CACc,CACxC,CAC8B;AACjC,oBAAA,KAAA,CAAA,aAAA,CAACA,WAAkB,CAAC,SAAS,OAAG,CACR,CAC3B,CAAC,CACyB;AAC7B,gBAAA,KAAA,CAAA,aAAA,CAACA,WAAkB,CAAC,KAAK,EAAA,EACvB,SAAS,EAAC,yBAAyB,EACnC,WAAW,EAAE,WAAW,EACxB,CAAA,CACD,CACJ,CAC0B;YAC7B,KAAC,CAAA,aAAA,CAAAA,WAAkB,CAAC,WAAW,EAAC,EAAA,GAAG,EAAE,YAAY,EAAI,CAAA,CAC7B,CACtB,EACP;AACH,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,cAAc,CAAA;AAEtC,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,SAAS,EAAC;AACzD,gBAAgB,CAAC,WAAW,GAAG,WAAW;;;;"}

package/components/Form/TextArea.js

@@ -1,42 +1,48 @@
-import React, { PureComponent } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
 import { withFieldLabelAndHint } from './field.js';
 
-class TextArea extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.handleChange = this.handleChange.bind(this);
-        this.state = {
-            length: 0,
-            height: 0,
-        };
-    }
-    handleChange(event) {
-        if (this.props.autosize || this.props.maxLength) {
-            this.setState({
-                length: event.target.value.length,
-                height: event.target.scrollHeight + 2,
-            });
+const TextArea = forwardRef((props, ref) => {
+    const { autosize, className, inputClassName, status, maxLength, onChange, ...nativeProps } = props;
+    const internalRef = useRef(null);
+    const [length, setLength] = useState(0);
+    const [height, setHeight] = useState(0);
+    const hasAutosize = autosize || (maxLength && maxLength > 0);
+    useEffect(() => {
+        if (ref && "current" in ref) {
+            ref.current = internalRef.current;
         }
-        this.props.onChange && this.props.onChange(event);
-    }
-    render() {
-        const { autosize, className, inputClassName, status, maxLength, ...nativeProps } = this.props;
-        return (React.createElement("div", { className: cx("cobalt-TextAreaField", className, {
-                "cobalt-TextAreaField--withLimit": maxLength && maxLength > 0,
-                "cobalt-TextAreaField--success": status === "success",
-                "cobalt-TextAreaField--error": status === "error",
-            }) },
-            React.createElement("textarea", { ...nativeProps, maxLength: maxLength, style: autosize
-                    ? {
-                        height: this.state.height + "px",
-                    }
-                    : {}, onChange: this.handleChange, className: cx("cobalt-TextAreaField__Input", inputClassName) }),
-            this.state.length > 0 && maxLength && maxLength > 0 && (React.createElement("div", { className: "cobalt-TextAreaField__RemainingChars" },
-                maxLength - this.state.length,
-                " remaining characters"))));
-    }
-}
+    }, [ref]);
+    const handleAutosize = (el) => {
+        if (!el)
+            return;
+        if (hasAutosize) {
+            setLength(el.value.length);
+            setHeight(el.scrollHeight + 2);
+        }
+    };
+    useEffect(() => {
+        handleAutosize(internalRef.current);
+    }, [autosize, maxLength]);
+    const handleChange = (event) => {
+        handleAutosize(event.target);
+        onChange && onChange(event);
+    };
+    return (React.createElement("div", { className: cx("cobalt-TextAreaField", className, {
+            "cobalt-TextAreaField--withLimit": maxLength && maxLength > 0,
+            "cobalt-TextAreaField--success": status === "success",
+            "cobalt-TextAreaField--error": status === "error",
+        }) },
+        React.createElement("textarea", { ...nativeProps, maxLength: maxLength, style: hasAutosize
+                ? {
+                    height: height + "px",
+                }
+                : {}, onChange: handleChange, className: cx("cobalt-TextAreaField__Input", inputClassName), ref: internalRef }),
+        length > 0 && maxLength && maxLength > 0 && (React.createElement("div", { className: "cobalt-TextAreaField__RemainingChars" },
+            maxLength - length,
+            " remaining characters"))));
+});
+TextArea.displayName = "TextArea";
 const wrappedComponent = withFieldLabelAndHint(TextArea);
 wrappedComponent.displayName = "TextArea";
 

package/components/Form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/Form/TextArea.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport cx from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  maxLength?: number\n  className?: string\n  inputClassName?: string\n  autosize?: boolean\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void\n} & FormElement &\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>\n\ntype State = {\n  length: number\n  height: number\n}\n\nclass TextArea extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n    this.handleChange = this.handleChange.bind(this)\n\n    this.state = {\n      length: 0,\n      height: 0,\n    }\n  }\n\n  handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (this.props.autosize || this.props.maxLength) {\n      this.setState({\n        length: event.target.value.length,\n        height: event.target.scrollHeight + 2,\n      })\n    }\n    this.props.onChange && this.props.onChange(event)\n  }\n\n  render() {\n    const {\n      autosize,\n      className,\n      inputClassName,\n      status,\n      maxLength,\n      ...nativeProps\n    } = this.props\n\n    return (\n      <div\n        className={cx(\"cobalt-TextAreaField\", className, {\n          \"cobalt-TextAreaField--withLimit\": maxLength && maxLength > 0,\n          \"cobalt-TextAreaField--success\": status === \"success\",\n          \"cobalt-TextAreaField--error\": status === \"error\",\n        })}\n      >\n        <textarea\n          {...nativeProps}\n          maxLength={maxLength}\n          style={\n            autosize\n              ? {\n                  height: this.state.height + \"px\",\n                }\n              : {}\n          }\n          onChange={this.handleChange}\n          className={cx(\"cobalt-TextAreaField__Input\", inputClassName)}\n        />\n        {this.state.length > 0 && maxLength && maxLength > 0 && (\n          <div className=\"cobalt-TextAreaField__RemainingChars\">\n            {maxLength - this.state.length} remaining characters\n          </div>\n        )}\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(TextArea)\nwrappedComponent.displayName = \"TextArea\"\n\nexport { wrappedComponent as TextArea }\n"],"names":[],"mappings":";;;;AAmBA,MAAM,QAAS,SAAQ,aAA2B,CAAA;AAChD,IAAA,WAAA,CAAY,KAAY,EAAA;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEhD,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,CAAC;SACV,CAAA;KACF;AAED,IAAA,YAAY,CAAC,KAA6C,EAAA;AACxD,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YAC/C,IAAI,CAAC,QAAQ,CAAC;AACZ,gBAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;AACjC,gBAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC;AACtC,aAAA,CAAC,CAAA;SACH;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;KAClD;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,MAAM,EACN,SAAS,EACT,GAAG,WAAW,EACf,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;AAC/C,gBAAA,iCAAiC,EAAE,SAAS,IAAI,SAAS,GAAG,CAAC;gBAC7D,+BAA+B,EAAE,MAAM,KAAK,SAAS;gBACrD,6BAA6B,EAAE,MAAM,KAAK,OAAO;aAClD,CAAC,EAAA;YAEF,KACM,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GAAA,WAAW,EACf,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,QAAQ;AACN,sBAAE;AACE,wBAAA,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI;AACjC,qBAAA;AACH,sBAAE,EAAE,EAER,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,cAAc,CAAC,EAC5D,CAAA;AACD,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC,KAClD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,sCAAsC,EAAA;AAClD,gBAAA,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;wCAC1B,CACP,CACG,EACP;KACF;AACF,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,QAAQ,EAAC;AACxD,gBAAgB,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/Form/TextArea.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  maxLength?: number\n  className?: string\n  inputClassName?: string\n  autosize?: boolean\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void\n} & FormElement &\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>\n\nconst TextArea = forwardRef<HTMLTextAreaElement, Props>((props, ref) => {\n  const {\n    autosize,\n    className,\n    inputClassName,\n    status,\n    maxLength,\n    onChange,\n    ...nativeProps\n  } = props\n\n  const internalRef = useRef<HTMLTextAreaElement>(null)\n  const [length, setLength] = useState(0)\n  const [height, setHeight] = useState(0)\n\n  const hasAutosize = autosize || (maxLength && maxLength > 0)\n\n  useEffect(() => {\n    if (ref && \"current\" in ref) {\n      ref.current = internalRef.current\n    }\n  }, [ref])\n\n  const handleAutosize = (el?: HTMLTextAreaElement | null) => {\n    if (!el) return\n    if (hasAutosize) {\n      setLength(el.value.length)\n      setHeight(el.scrollHeight + 2)\n    }\n  }\n\n  useEffect(() => {\n    handleAutosize(internalRef.current)\n  }, [autosize, maxLength])\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    handleAutosize(event.target)\n    onChange && onChange(event)\n  }\n\n  return (\n    <div\n      className={cx(\"cobalt-TextAreaField\", className, {\n        \"cobalt-TextAreaField--withLimit\": maxLength && maxLength > 0,\n        \"cobalt-TextAreaField--success\": status === \"success\",\n        \"cobalt-TextAreaField--error\": status === \"error\",\n      })}\n    >\n      <textarea\n        {...nativeProps}\n        maxLength={maxLength}\n        style={\n          hasAutosize\n            ? {\n                height: height + \"px\",\n              }\n            : {}\n        }\n        onChange={handleChange}\n        className={cx(\"cobalt-TextAreaField__Input\", inputClassName)}\n        ref={internalRef}\n      />\n      {length > 0 && maxLength && maxLength > 0 && (\n        <div className=\"cobalt-TextAreaField__RemainingChars\">\n          {maxLength - length} remaining characters\n        </div>\n      )}\n    </div>\n  )\n})\n\nTextArea.displayName = \"TextArea\"\n\nconst wrappedComponent = withFieldLabelAndHint(TextArea)\nwrappedComponent.displayName = \"TextArea\"\n\nexport { wrappedComponent as TextArea }\n"],"names":[],"mappings":";;;;AAcA,MAAM,QAAQ,GAAG,UAAU,CAA6B,CAAC,KAAK,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,GAAG,KAAK,CAAA;AAET,IAAA,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvC,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS,IAAI,SAAS,GAAG,CAAC,CAAC,CAAA;IAE5D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,SAAS,IAAI,GAAG,EAAE;AAC3B,YAAA,GAAG,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAA;SAClC;AACH,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AAET,IAAA,MAAM,cAAc,GAAG,CAAC,EAA+B,KAAI;AACzD,QAAA,IAAI,CAAC,EAAE;YAAE,OAAM;QACf,IAAI,WAAW,EAAE;AACf,YAAA,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC1B,YAAA,SAAS,CAAC,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA;SAC/B;AACH,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;AACb,QAAA,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;AACrC,KAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAA;AAEzB,IAAA,MAAM,YAAY,GAAG,CAAC,KAA6C,KAAI;AACrE,QAAA,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC5B,QAAA,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAA;IAED,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;AAC/C,YAAA,iCAAiC,EAAE,SAAS,IAAI,SAAS,GAAG,CAAC;YAC7D,+BAA+B,EAAE,MAAM,KAAK,SAAS;YACrD,6BAA6B,EAAE,MAAM,KAAK,OAAO;SAClD,CAAC,EAAA;QAEF,KACM,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GAAA,WAAW,EACf,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,WAAW;AACT,kBAAE;oBACE,MAAM,EAAE,MAAM,GAAG,IAAI;AACtB,iBAAA;AACH,kBAAE,EAAE,EAER,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,cAAc,CAAC,EAC5D,GAAG,EAAE,WAAW,EAChB,CAAA;AACD,QAAA,MAAM,GAAG,CAAC,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC,KACvC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,sCAAsC,EAAA;AAClD,YAAA,SAAS,GAAG,MAAM;oCACf,CACP,CACG,EACP;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,QAAQ,EAAC;AACxD,gBAAgB,CAAC,WAAW,GAAG,UAAU;;;;"}

package/components/Icon/__generated__/MoonIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "moon";
+const MoonIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M12.25 21a8.9 8.9 0 0 1-3.606-.734 9.4 9.4 0 0 1-2.93-1.983 9.4 9.4 0 0 1-1.981-2.935A9 9 0 0 1 3 11.736q0-2.935 1.649-5.32t4.419-3.348a.96.96 0 0 1 .939.126q.435.31.412.837a9.2 9.2 0 0 0 .618 3.715 9.05 9.05 0 0 0 2.06 3.142 9 9 0 0 0 3.138 2.063 9.2 9.2 0 0 0 3.709.62q.595-.023.882.4.286.425.102.952-1.007 2.752-3.377 4.414Q15.181 21 12.251 21" })));
+};
+
+export { MoonIcon as default };
+//# sourceMappingURL=MoonIcon.js.map

package/components/Icon/__generated__/MoonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoonIcon.js","sources":["../../../../src/components/Icon/__generated__/MoonIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"moon\"\nconst MoonIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M12.25 21a8.9 8.9 0 0 1-3.606-.734 9.4 9.4 0 0 1-2.93-1.983 9.4 9.4 0 0 1-1.981-2.935A9 9 0 0 1 3 11.736q0-2.935 1.649-5.32t4.419-3.348a.96.96 0 0 1 .939.126q.435.31.412.837a9.2 9.2 0 0 0 .618 3.715 9.05 9.05 0 0 0 2.06 3.142 9 9 0 0 0 3.138 2.063 9.2 9.2 0 0 0 3.709.62q.595-.023.882.4.286.425.102.952-1.007 2.752-3.377 4.414Q15.181 21 12.251 21\" />\n    </svg>\n  )\n}\nexport default MoonIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,MAAM,CAAA;AACzB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,4VAA4V,EAAG,CAAA,CACnW,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/RoadsideAssistanceIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "roadsideAssistance";
+const RoadsideAssistanceIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M1.5 15.618V13.68q0-.411.278-.69a.94.94 0 0 1 .69-.278h6.97L3.437 7.97v1.84a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278.94.94 0 0 1-.69-.278.94.94 0 0 1-.278-.69V6.08q0-.555.472-.835a.91.91 0 0 1 .956-.012l10.19 5.591V4.968q0-.411.278-.69a.94.94 0 0 1 .69-.278h2.977q.435 0 .823.182.387.18.653.52l3.8 4.574q.217.267.339.581.12.315.12.654v5.107a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278h-1.452a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.057-.847 2.8 2.8 0 0 1-.847-2.057H9.245a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.058-.847 2.8 2.8 0 0 1-.847-2.057h-.968a.94.94 0 0 1-.69-.279.94.94 0 0 1-.278-.69m4.84 2.42q.63 0 1.041-.412.412-.41.412-1.04t-.412-1.041q-.41-.411-1.04-.412-.63 0-1.041.412-.412.411-.412 1.04 0 .63.412 1.041.411.412 1.04.412m11.134 0q.63 0 1.04-.412.412-.41.412-1.04t-.411-1.041q-.411-.411-1.04-.412-.63 0-1.042.412-.411.411-.411 1.04 0 .63.411 1.041.412.412 1.041.412m-2.42-8.23h5.228l-3.244-3.872h-1.984z" })));
+};
+
+export { RoadsideAssistanceIcon as default };
+//# sourceMappingURL=RoadsideAssistanceIcon.js.map

package/components/Icon/__generated__/RoadsideAssistanceIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoadsideAssistanceIcon.js","sources":["../../../../src/components/Icon/__generated__/RoadsideAssistanceIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"roadsideAssistance\"\nconst RoadsideAssistanceIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M1.5 15.618V13.68q0-.411.278-.69a.94.94 0 0 1 .69-.278h6.97L3.437 7.97v1.84a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278.94.94 0 0 1-.69-.278.94.94 0 0 1-.278-.69V6.08q0-.555.472-.835a.91.91 0 0 1 .956-.012l10.19 5.591V4.968q0-.411.278-.69a.94.94 0 0 1 .69-.278h2.977q.435 0 .823.182.387.18.653.52l3.8 4.574q.217.267.339.581.12.315.12.654v5.107a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278h-1.452a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.057-.847 2.8 2.8 0 0 1-.847-2.057H9.245a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.058-.847 2.8 2.8 0 0 1-.847-2.057h-.968a.94.94 0 0 1-.69-.279.94.94 0 0 1-.278-.69m4.84 2.42q.63 0 1.041-.412.412-.41.412-1.04t-.412-1.041q-.41-.411-1.04-.412-.63 0-1.041.412-.412.411-.412 1.04 0 .63.412 1.041.411.412 1.04.412m11.134 0q.63 0 1.04-.412.412-.41.412-1.04t-.411-1.041q-.411-.411-1.04-.412-.63 0-1.042.412-.411.411-.411 1.04 0 .63.411 1.041.412.412 1.041.412m-2.42-8.23h5.228l-3.244-3.872h-1.984z\" />\n    </svg>\n  )\n}\nexport default RoadsideAssistanceIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,oBAAoB,CAAA;AACvC,MAAM,sBAAsB,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,y8BAAy8B,EAAG,CAAA,CACh9B,CACP,CAAA;AACH;;;;"}

package/icons/index.js

@@ -166,6 +166,7 @@ export { default as minibus } from './minibus.js';
 export { default as minusCircleFilled } from './minus-circle-filled.js';
 export { default as minus } from './minus.js';
 export { default as miscGift } from './misc-gift.js';
+export { default as moon } from './moon.js';
 export { default as nearbyDevice } from './nearby-device.js';
 export { default as notification } from './notification.js';
 export { default as number1Circle } from './number-1-circle.js';
@@ -224,6 +225,7 @@ export { default as replacementCar } from './replacement-car.js';
 export { default as reply } from './reply.js';
 export { default as reset } from './reset.js';
 export { default as ride } from './ride.js';
+export { default as roadsideAssistance } from './roadside-assistance.js';
 export { default as roofBox } from './roof-box.js';
 export { default as rotate } from './rotate.js';
 export { default as sealCheck } from './seal-check.js';

package/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/icons/moon.js

@@ -0,0 +1,4 @@
+var moon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12.25 21a8.9 8.9 0 0 1-3.606-.734 9.4 9.4 0 0 1-2.93-1.983 9.4 9.4 0 0 1-1.981-2.935A9 9 0 0 1 3 11.736q0-2.935 1.649-5.32t4.419-3.348a.96.96 0 0 1 .939.126q.435.31.412.837a9.2 9.2 0 0 0 .618 3.715 9.05 9.05 0 0 0 2.06 3.142 9 9 0 0 0 3.138 2.063 9.2 9.2 0 0 0 3.709.62q.595-.023.882.4.286.425.102.952-1.007 2.752-3.377 4.414Q15.181 21 12.251 21\"/></svg>";
+
+export { moon as default };
+//# sourceMappingURL=moon.js.map

package/icons/moon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/icons/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.25 21a8.9 8.9 0 0 1-3.606-.734 9.4 9.4 0 0 1-2.93-1.983 9.4 9.4 0 0 1-1.981-2.935A9 9 0 0 1 3 11.736q0-2.935 1.649-5.32t4.419-3.348a.96.96 0 0 1 .939.126q.435.31.412.837a9.2 9.2 0 0 0 .618 3.715 9.05 9.05 0 0 0 2.06 3.142 9 9 0 0 0 3.138 2.063 9.2 9.2 0 0 0 3.709.62q.595-.023.882.4.286.425.102.952-1.007 2.752-3.377 4.414Q15.181 21 12.251 21"/></svg>

package/icons/roadside-assistance.js

@@ -0,0 +1,4 @@
+var roadsideAssistance = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M1.5 15.618V13.68q0-.411.278-.69a.94.94 0 0 1 .69-.278h6.97L3.437 7.97v1.84a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278.94.94 0 0 1-.69-.278.94.94 0 0 1-.278-.69V6.08q0-.555.472-.835a.91.91 0 0 1 .956-.012l10.19 5.591V4.968q0-.411.278-.69a.94.94 0 0 1 .69-.278h2.977q.435 0 .823.182.387.18.653.52l3.8 4.574q.217.267.339.581.12.315.12.654v5.107a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278h-1.452a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.057-.847 2.8 2.8 0 0 1-.847-2.057H9.245a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.058-.847 2.8 2.8 0 0 1-.847-2.057h-.968a.94.94 0 0 1-.69-.279.94.94 0 0 1-.278-.69m4.84 2.42q.63 0 1.041-.412.412-.41.412-1.04t-.412-1.041q-.41-.411-1.04-.412-.63 0-1.041.412-.412.411-.412 1.04 0 .63.412 1.041.411.412 1.04.412m11.134 0q.63 0 1.04-.412.412-.41.412-1.04t-.411-1.041q-.411-.411-1.04-.412-.63 0-1.042.412-.411.411-.411 1.04 0 .63.411 1.041.412.412 1.041.412m-2.42-8.23h5.228l-3.244-3.872h-1.984z\"/></svg>";
+
+export { roadsideAssistance as default };
+//# sourceMappingURL=roadside-assistance.js.map

package/icons/roadside-assistance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roadside-assistance.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/icons/roadside-assistance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1.5 15.618V13.68q0-.411.278-.69a.94.94 0 0 1 .69-.278h6.97L3.437 7.97v1.84a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278.94.94 0 0 1-.69-.278.94.94 0 0 1-.278-.69V6.08q0-.555.472-.835a.91.91 0 0 1 .956-.012l10.19 5.591V4.968q0-.411.278-.69a.94.94 0 0 1 .69-.278h2.977q.435 0 .823.182.387.18.653.52l3.8 4.574q.217.267.339.581.12.315.12.654v5.107a.94.94 0 0 1-.278.69.94.94 0 0 1-.69.278h-1.452a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.057-.847 2.8 2.8 0 0 1-.847-2.057H9.245a2.8 2.8 0 0 1-.847 2.057 2.8 2.8 0 0 1-2.057.847 2.8 2.8 0 0 1-2.058-.847 2.8 2.8 0 0 1-.847-2.057h-.968a.94.94 0 0 1-.69-.279.94.94 0 0 1-.278-.69m4.84 2.42q.63 0 1.041-.412.412-.41.412-1.04t-.412-1.041q-.41-.411-1.04-.412-.63 0-1.041.412-.412.411-.412 1.04 0 .63.412 1.041.411.412 1.04.412m11.134 0q.63 0 1.04-.412.412-.41.412-1.04t-.411-1.041q-.411-.411-1.04-.412-.63 0-1.042.412-.411.411-.411 1.04 0 .63.411 1.041.412.412 1.041.412m-2.42-8.23h5.228l-3.244-3.872h-1.984z"/></svg>

package/index.js

@@ -43,6 +43,7 @@ export { Select } from './components/Form/Select.js';
 export { default as Slider, SliderValueMeta } from './components/Form/Slider.js';
 export { Stepper, StepperMeta } from './components/Form/Stepper.js';
 export { TextArea } from './components/Form/TextArea.js';
+export { TagsInput } from './components/Form/TagsInput.js';
 export { TextInput } from './components/Form/TextInput.js';
 export { ToggleSwitch } from './components/Form/ToggleSwitch.js';
 export { CalendarView } from './components/Calendar/CalendarView/index.js';
@@ -222,6 +223,7 @@ export { default as MinibusIcon } from './components/Icon/__generated__/MinibusI
 export { default as MinusCircleFilledIcon } from './components/Icon/__generated__/MinusCircleFilledIcon.js';
 export { default as MinusIcon } from './components/Icon/__generated__/MinusIcon.js';
 export { default as MiscGiftIcon } from './components/Icon/__generated__/MiscGiftIcon.js';
+export { default as MoonIcon } from './components/Icon/__generated__/MoonIcon.js';
 export { default as NearbyDeviceIcon } from './components/Icon/__generated__/NearbyDeviceIcon.js';
 export { default as NotificationIcon } from './components/Icon/__generated__/NotificationIcon.js';
 export { default as Number1CircleIcon } from './components/Icon/__generated__/Number1CircleIcon.js';
@@ -280,6 +282,7 @@ export { default as ReplacementCarIcon } from './components/Icon/__generated__/R
 export { default as ReplyIcon } from './components/Icon/__generated__/ReplyIcon.js';
 export { default as ResetIcon } from './components/Icon/__generated__/ResetIcon.js';
 export { default as RideIcon } from './components/Icon/__generated__/RideIcon.js';
+export { default as RoadsideAssistanceIcon } from './components/Icon/__generated__/RoadsideAssistanceIcon.js';
 export { default as RoofBoxIcon } from './components/Icon/__generated__/RoofBoxIcon.js';
 export { default as RotateIcon } from './components/Icon/__generated__/RotateIcon.js';
 export { default as SealCheckIcon } from './components/Icon/__generated__/SealCheckIcon.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -19,10 +19,9 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@ark-ui/react": "5.9.0",
+    "@ark-ui/react": "5.9.2",
     "@juggle/resize-observer": "3.4.0",
     "@lottiefiles/react-lottie-player": "3.5.4",
-    "@react-spring/web": "9.7.5",
     "@tippyjs/react": "4.2.6",
     "classnames": "2.5.1",
     "date-fns": "2.30.0",
@@ -60,7 +59,7 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
     "@types/node": "22.14.1",
-    "@types/react": "18.3.21",
+    "@types/react": "18.3.22",
     "@types/react-dom": "18.3.7",
     "autoprefixer": "10.4.21",
     "core-js": "3.42.0",
@@ -97,7 +96,7 @@
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.3.2",
-    "ts-jest": "29.3.2",
+    "ts-jest": "29.3.4",
     "tsx": "4.19.4",
     "typescript": "5.4.5"
   },

package/styles/components/Form/TagsInput.scss

@@ -16,7 +16,7 @@
       width: 100%;
       padding: 10px 12px;
 
-      &:not([data-disabled]) {
+      &:not([data-disabled]):not([data-readonly]) {
         @apply c-state-interactive c-transition-colors;
       }
 
@@ -52,10 +52,22 @@
           @apply c-pointer-events-none;
         }
       }
+
+      &[data-readonly] {
+        @apply c-border-base c-text-subdued c-bg-neutral c-cursor-text;
+      }
     }
 
     &__Tags {
-      @apply c-flex c-flex-wrap c-gap-x-[4px] c-mb-2xs;
+      @apply c-flex c-flex-wrap c-gap-[4px] c-mb-2xs;
+    }
+
+    &__Tag {
+      @apply c-border-none c-cursor-pointer c-state-interactive c-transition-colors c-gap-[2px];
+    }
+
+    &__TagDeleteTrigger {
+      @apply c-flex c-border-none c-cursor-pointer c-p-[2px] c-state-interactive c-transition-colors c-rounded-br c-rounded-tr;
     }
 
     &__Input {

package/styles/components/Form/TextArea.scss

@@ -26,9 +26,6 @@
     }
 
     &__RemainingChars {
-      @include withContext(".cobalt-FormField--withHint") {
-        @apply c-bottom-md;
-      }
       @apply c-text-subdued;
 
       position: absolute;

package/styles/components/Form/form.scss

@@ -1,5 +1,6 @@
 @mixin form-input-base($container) {
-  @apply c-text-base c-border c-border-strong c-bg-secondary c-state-interactive c-transition-colors;
+  @apply c-text-base c-border c-border-strong c-bg-secondary c-transition-colors;
+
   @include withContext(#{$container}--success) {
     @apply c-border-success;
 
@@ -31,6 +32,10 @@
 
   border-radius: 8px;
 
+  &:not([readonly]):not([disabled]) {
+    @apply c-state-interactive;
+  }
+
   &:not(:disabled):not(:read-only):hover {
     @apply c-text-base;
   }

package/tokens/icons.js

@@ -167,6 +167,7 @@ const icons = {
 	minusCircleFilled: "minus-circle-filled.svg",
 	minus: "minus.svg",
 	miscGift: "misc-gift.svg",
+	moon: "moon.svg",
 	nearbyDevice: "nearby-device.svg",
 	notification: "notification.svg",
 	number1Circle: "number-1-circle.svg",
@@ -225,6 +226,7 @@ const icons = {
 	reply: "reply.svg",
 	reset: "reset.svg",
 	ride: "ride.svg",
+	roadsideAssistance: "roadside-assistance.svg",
 	roofBox: "roof-box.svg",
 	rotate: "rotate.svg",
 	sealCheck: "seal-check.svg",

package/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/types/src/components/Form/Autocomplete/index.d.ts

@@ -34,7 +34,7 @@ declare const Autocomplete: React.ForwardRefExoticComponent<{
     label?: string | undefined;
     hint?: string | undefined;
     fullWidth?: boolean | undefined;
-    icon?: "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    icon?: "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "moon" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roadsideAssistance" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     items: AutocompleteItemInput[];
     popoverClassName?: string | undefined;
     minQueryLength?: number | undefined;

package/types/src/components/Form/TagsInput.d.ts

@@ -18,7 +18,7 @@ export declare const TagsInputWrapper: ({ status, render, }: {
     render: (className: string) => React.ReactNode;
 }) => React.JSX.Element;
 declare const wrappedComponent: React.ComponentClass<{
-    icon?: "download" | "search" | "document" | "slider" | "key" | "map" | "video" | "location" | "copy" | "loading" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "locality" | "locationMap" | "locationParking" | "locationPin" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    icon?: "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "moon" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roadsideAssistance" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     forwardedRef?: React.Ref<HTMLInputElement> | undefined;
     value?: string | undefined;
     onValueChange?: ((value: string) => void) | undefined;
@@ -27,7 +27,7 @@ declare const wrappedComponent: React.ComponentClass<{
     defaultTags?: string[] | undefined;
     defaultValue?: string | undefined;
     max?: number | undefined;
-} & Omit<FormElement, "defaultValue" | "onChange" | "value" | "max" | "onInputChange"> & React.InputHTMLAttributes<HTMLInputElement> & Omit<TagsInputComponent.RootProps, "onValueChange" | "value" | "inputValue"> & {
+} & Omit<FormElement, "value" | "defaultValue" | "max" | "onChange" | "onInputChange"> & React.InputHTMLAttributes<HTMLInputElement> & Omit<TagsInputComponent.RootProps, "value" | "inputValue" | "onValueChange"> & {
     id?: string | undefined;
     label?: string | undefined;
     hint?: string | undefined;

package/types/src/components/Form/TextArea.d.ts

@@ -1,25 +1,24 @@
 import React from "react";
 import { FormElement } from "./form";
-type Props = {
-    maxLength?: number;
-    className?: string;
-    inputClassName?: string;
-    autosize?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-} & FormElement & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 declare const wrappedComponent: React.ComponentClass<{
     maxLength?: number | undefined;
     className?: string | undefined;
     inputClassName?: string | undefined;
     autosize?: boolean | undefined;
     onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
-} & FormElement & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+} & FormElement & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement> & {
     id?: string | undefined;
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
     fullWidth?: boolean | undefined;
 }, any> & {
-    Raw: React.ComponentType<Props>;
+    Raw: React.ComponentType<{
+        maxLength?: number | undefined;
+        className?: string | undefined;
+        inputClassName?: string | undefined;
+        autosize?: boolean | undefined;
+        onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+    } & FormElement & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 };
 export { wrappedComponent as TextArea };

package/types/src/components/Form/TextInput.d.ts

@@ -14,7 +14,7 @@ export declare const TextInputWrapper: ({ icon, status, render, }: {
 }) => React.JSX.Element;
 declare const wrappedComponent: React.ComponentClass<{
     type?: TextInputType | undefined;
-    icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "moon" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roadsideAssistance" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     forwardedRef?: React.Ref<HTMLInputElement> | undefined;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement> & {
     id?: string | undefined;

package/types/src/components/Icon/__generated__/MoonIcon.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { IconColorsType } from "../";
+export type IconProps = {
+    color?: IconColorsType;
+    size?: 16 | 20 | 24 | 32;
+    contained?: boolean;
+    className?: string;
+};
+declare const MoonIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
+export default MoonIcon;

package/types/src/components/Icon/__generated__/RoadsideAssistanceIcon.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { IconColorsType } from "../";
+export type IconProps = {
+    color?: IconColorsType;
+    size?: 16 | 20 | 24 | 32;
+    contained?: boolean;
+    className?: string;
+};
+declare const RoadsideAssistanceIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
+export default RoadsideAssistanceIcon;

package/types/src/components/Icon/__generated__/index.d.ts

@@ -166,6 +166,7 @@ export { default as MinibusIcon } from "./MinibusIcon";
 export { default as MinusCircleFilledIcon } from "./MinusCircleFilledIcon";
 export { default as MinusIcon } from "./MinusIcon";
 export { default as MiscGiftIcon } from "./MiscGiftIcon";
+export { default as MoonIcon } from "./MoonIcon";
 export { default as NearbyDeviceIcon } from "./NearbyDeviceIcon";
 export { default as NotificationIcon } from "./NotificationIcon";
 export { default as Number1CircleIcon } from "./Number1CircleIcon";
@@ -224,6 +225,7 @@ export { default as ReplacementCarIcon } from "./ReplacementCarIcon";
 export { default as ReplyIcon } from "./ReplyIcon";
 export { default as ResetIcon } from "./ResetIcon";
 export { default as RideIcon } from "./RideIcon";
+export { default as RoadsideAssistanceIcon } from "./RoadsideAssistanceIcon";
 export { default as RoofBoxIcon } from "./RoofBoxIcon";
 export { default as RotateIcon } from "./RotateIcon";
 export { default as SealCheckIcon } from "./SealCheckIcon";

package/types/src/components/Icon/index.d.ts

@@ -22,7 +22,7 @@ export interface IconProps {
     contained?: boolean;
     className?: string;
 }
-export declare const isIconSource: (source: string) => source is "info" | "warning" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang";
+export declare const isIconSource: (source: string) => source is "info" | "warning" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "moon" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roadsideAssistance" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang";
 export declare const Icon: ({ source, color, size, contained, className, }: IconProps) => React.JSX.Element;
 export * from "./__generated__/index";
 export default Icon;

package/types/src/icons/index.d.ts

@@ -166,6 +166,7 @@ export { default as minibus } from "./minibus.svg";
 export { default as minusCircleFilled } from "./minus-circle-filled.svg";
 export { default as minus } from "./minus.svg";
 export { default as miscGift } from "./misc-gift.svg";
+export { default as moon } from "./moon.svg";
 export { default as nearbyDevice } from "./nearby-device.svg";
 export { default as notification } from "./notification.svg";
 export { default as number1Circle } from "./number-1-circle.svg";
@@ -224,6 +225,7 @@ export { default as replacementCar } from "./replacement-car.svg";
 export { default as reply } from "./reply.svg";
 export { default as reset } from "./reset.svg";
 export { default as ride } from "./ride.svg";
+export { default as roadsideAssistance } from "./roadside-assistance.svg";
 export { default as roofBox } from "./roof-box.svg";
 export { default as rotate } from "./rotate.svg";
 export { default as sealCheck } from "./seal-check.svg";

package/types/src/index.d.ts

@@ -44,6 +44,7 @@ export { Select } from "./components/Form/Select";
 export { default as Slider, SliderValueMeta } from "./components/Form/Slider";
 export { Stepper, StepperMeta } from "./components/Form/Stepper";
 export { TextArea } from "./components/Form/TextArea";
+export { TagsInput } from "./components/Form/TagsInput";
 export { TextInput } from "./components/Form/TextInput";
 export { ToggleSwitch } from "./components/Form/ToggleSwitch";
 export { CalendarView, MonthType, StatusByDateType, } from "./components/Calendar";

package/types/src/tokens/index.d.ts

@@ -225,6 +225,7 @@ export declare const icons: {
         minusCircleFilled: string;
         minus: string;
         miscGift: string;
+        moon: string;
         nearbyDevice: string;
         notification: string;
         number1Circle: string;
@@ -283,6 +284,7 @@ export declare const icons: {
         reply: string;
         reset: string;
         ride: string;
+        roadsideAssistance: string;
         roofBox: string;
         rotate: string;
         sealCheck: string;

package/types/src/hooks/useElementHeight.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-/**
- * Hook to listen the giving element resize events (using ResizeObserver)
- * and returning the updated height of that element according to those events
- *
- * Useful to animated using react-spring an element that we can't know the
- * actual size since it's computed from the child elements
- */
-declare const useElementHeight: <ElementType extends HTMLElement>() => {
-    ref: import("react").RefObject<ElementType>;
-    height: number;
-};
-export default useElementHeight;